TEMA 2: Navegadores web
eugeniaperez.es
eugeniaperez.es
1 Introducción
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.
eugeniaperez.es
2 Arquitectura de un navegador 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.
eugeniaperez.es
2 Arquitectura de un navegador web
eugeniaperez.es
2 Arquitectura de un navegador web
En función de la plataforma suele existir un navegador predeterminado.
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.
eugeniaperez.es
2 Arquitectura de un navegador web
Motores de exploración
Búsqueda avanzada
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).
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.
eugeniaperez.es
3 Navegadores de uso común
eugeniaperez.es
3 Navegadores de uso común
Google Chrome
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.
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.
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.
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.
eugeniaperez.es
4 Seguridad en los navegadores
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).
eugeniaperez.es
4 Seguridad en los navegadores
Las últimas versiones ofrecen de forma alternativa:
eugeniaperez.es
5 Integración de plugins en los navegadores
eugeniaperez.es
5 Integración de plugins en los navegadores
Consola de inspección o firebug:
Mozilla Firefox.
Inspección de elemento:
Google Chrome.
eugeniaperez.es
5 Integración de plugins en los navegadores
La inspección del elemento (F12, Ctr.+Shift+L):
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)
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
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Network:
Se puede filtrar
Ver las cabeceras HTTP
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Sources:
Depuración
eugeniaperez.es
5 Integración de plugins en los navegadores
La pestaña Resources:
Cookies
Almacén de
Sesión de usuario
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
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.
eugeniaperez.es
5 Integración de plugins en los navegadores
Web developer: Yahoo email: https://eu.edit.yahoo.com/registration
eugeniaperez.es
6 Conformidad a estándares
eugeniaperez.es
6 Conformidad a estándares
El cumplimiento de los estándares es importante:
Los estándares actuales para la web se encuentran definidos por una organización llamada W3C: http://www.w3c.es/
eugeniaperez.es
6 Conformidad a estándares
eugeniaperez.es
Bibliografía y referencias
eugeniaperez.es