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

El propio w3c proporciona la siguiente herramienta:

http://validator.w3.org/

 

 

 

tema 2: NAVEGADORES web

 

eugeniaperez.es

Bibliografía y referencias

 

 

 

 

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

Loading comments...

More from eugenia_perez