UF2 Desarrollo de apps mediante lenguajes de script
TEMA 2: Navegadores web
eugeniaperez.es
tema 2: NAVEGADORES web
eugeniaperez.es
1 Introducción
tema 2: NAVEGADORES web
eugeniaperez.es
1 Introducción
Navegador web: software de cliente que interpreta el código (HTML) y el estilo adecuado (CSS) de las distintas páginas que conforman dicho sitio web.
Y presenta esta información visual en forma de texto, imágenes y recursos multimedia al usuario final.
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
La interfaz del usuario es el medio a través del cual un usuario interactúa con el navegador.
Una vez que te inicies en el mundo del desarrollo verás patente las diferentes interpretaciones de código en función de los navegadores.
En muchas ocasiones te encontrarás con incompatibilidades o un funcionamiento incorrecto.
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
En función de la plataforma suele existir un navegador predeterminado.
- Si bien utiliza Windows ->Internet Explorer
- Un equipo con OS X -> Safari
- Basado en Linux -> Firefox (aunque depende de la distribución)
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
Motores de exploración
También conocidos como buscadores, nos ayudan a encontrar páginas lo más relevantes posibles, acorde a las frases o palabras clave que se han especificado a través de arañas o algoritmos específicos.
Algunos de los motores de búsqueda más importante son Google, Yahoo! Search, Bing, etc.
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
Motores de exploración
Búsqueda avanzada
- site:wikipedia.org Programming
- -site:wikipedia.org Programming
- "" -> busca literalmente
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
Motores de presentación
Parte del contenido que se obtiene cuando se visita una web es almacenado de forma temporal en la caché del navegador.
Así la próxima vez que se acceda se recupera de forma local, permitiendo una carga mucho más rápida.
También es posible guardar información de utilidad como marcadores o favoritos (book-marks).
tema 2: NAVEGADORES web
eugeniaperez.es
2 Arquitectura de un navegador web
Módulos auxiliares
Algunas páginas web almacenan información relativa a la sesión de usuario en los propios ordenadores para un uso posterior. Esto se permite mediante cookies o el historial.
Adicionalmente se dispone de un motor Javascript que se encarga de traducir el código fuente en Javascript y, según las instrucciones proporcionadas, ejecutar el script.
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
Google Chrome
- Es estable y veloz.
- El navegador más utilizado
- Basado en Chromium (open source)
- La velocidad de carga de las páginas y la gran cantidad de plugins lo han hecho altamente popular.
- Utiliza un motor de renderizado llamado Blink
- Actualmente está disponible para cualquier SO
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
Internet Explorer
-
Desarrollado por Microsoft
-
Contó con gran auge hasta la llegada de Firefox o Chrome.
-
La última versión es la Edge, compatible únicamente con Windows 7, 8 y 10.
-
Esta versión ha mejorado notablemente la compatibilidad con estándares web, mejoras en rendimiento y renderizado de páginas gracias a su motor Trident.
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
Mozilla Firefox
-
Navegador de código libre y abierto
-
Existen numerosas aplicaciones y plugins basadas en él
Es el segundo navegador más utilizado
-
Es un navegador rápido, con un buen diseño y que consume muchos menos recursos que otros.
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
Opera
-
Desarrollado por la empresa noruega Opera Software
-
Usa el motor de renderizado Blink.
-
En su momento fue el pionero en añadir características como la búsqueda integrada, las pestañas y el zoom.
-
Puede encontrarse en la mayoría de sistemas operativos.
tema 2: NAVEGADORES web
eugeniaperez.es
3 Navegadores de uso común
Safari
-
Desarrollado por Apple, utilizado en ordenadores MAC, para OS X y iOS, aunque también disponible para Windows.
-
Destacan su sincronización con otros dispositivos mediante iCloud, su rapidez, su rendimiento y la posibilidad de compartir archivos en aplicaciones web y redes sociales.
-
Tiene la limitación de ser un navegador de código cerrado, no posee tantas extensiones.
tema 2: NAVEGADORES web
eugeniaperez.es
4 Seguridad en los navegadores
tema 2: NAVEGADORES web
eugeniaperez.es
4 Seguridad en los navegadores
Cada navegador, de forma interna, tiene sus propios mecanismos de seguridad, que pueden diferir de unos a otros.
Por defecto cada uno tiene unos sistemas de seguridad, que si el usuario desea extender, debe optar por una configuración avanzada (por ejemplo desde Chrome -> Configuración).
tema 2: NAVEGADORES web
eugeniaperez.es
4 Seguridad en los navegadores
Las últimas versiones ofrecen de forma alternativa:
- Navegación privada: con esta opción no se va a dejar ningún rastro de la web que se visita en el ordenador.
- Integración con antivirus
- Actualizaciones periódicas
- Limpiar el historial reciente y las cookies
- Plugins
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
Consola de inspección o firebug:
Mozilla Firefox.
Inspección de elemento:
Google Chrome.
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La inspección del elemento (F12, Ctr.+Shift+L):
- Nos permite editar, depurar, monitorear HTML, CSS y JS en tiempo real.
- Son previsualizaciones temporales, no cambios definitivos.
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La inspección del elemento (F12, Ctr.+Shift+l):
Modifico sus propiedades (tamaño, etc)
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La inspección del elemento (F12, Ctr.+Shift+l):
Modificamos el texto
Modificamos el estilo
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Network:
Se puede filtrar
Ver las cabeceras HTTP
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Sources:
Depuración
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Resources:
Cookies
Almacén de
Sesión de usuario
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Console:
Ejecución directa de
instrucciones JS
Información, adevertencias y errores
se detectan
mediante la consola
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
Web developer para Chrome, Firefox o IE.
Permite también modificar código HTML, CSS, imágenes o bien formularios en tiempo real.
- Buscamos web developer en Google
- Añadimos la extensión
tema 2: NAVEGADORES web
eugeniaperez.es
5 Integración de plugins en los navegadores
Web developer: Yahoo email: https://eu.edit.yahoo.com/registration
- Deshabilitar JS -> deshabilitar validaciones cliente
- Deshabilitar CSS
- Trabajar con formularios (limpiar, popular, etc.)
- Trabajar con imágenes -> información
- Miscelánea (borrar cache, colorpicker...)
- Resize (dispositivos responsibles)
tema 2: NAVEGADORES web
eugeniaperez.es
6 Conformidad a estándares
tema 2: NAVEGADORES web
eugeniaperez.es
6 Conformidad a estándares
El cumplimiento de los estándares es importante:
- El sitio será mejor indexado por los motores de búsqueda
- Las páginas serán entendidas por usuarios con navegadores distintos a los usuales... Multinavegador
Los estándares actuales para la web se encuentran definidos por una organización llamada W3C: http://www.w3c.es/
tema 2: NAVEGADORES web
eugeniaperez.es
6 Conformidad a estándares
tema 2: NAVEGADORES web
eugeniaperez.es
Bibliografía y referencias
- W3C España: http://www.w3c.es/
- Ranking de navegadores: http://blog.uchceu.es/informatica/ranking-de-navegadores-de-internet-para-2014/
- Referencias a los apuntes de esta UF de Editorial IC
eugeniaperez.es
Realiza las actividades de la UT1
- A2 Firebug: o bien Inspeccionar elemento en Chrome
- A2.B Debugging
- A3 Web Developer Toolbar, en Chrome o en Firefox
REALIZA LOS TESTS:
- T1
- T2
actividades OPCIONALES
- A1 Test Web Browsers
- A arquitecturas de aplicaciones
actividades tema 2
tema 2: navegadores web
UT1.B
By eugenia_perez
