El documento presenta la agenda de la segunda sesión de la materia de Programación en ambiente web. La sesión cubre el tema de los navegadores web, incluyendo una indagación de conocimientos previos de los estudiantes, una explicación de los tipos de navegadores y sus características, y una revisión de los depuradores integrados en los principales navegadores. Finalmente, se mencionan brevemente las extensiones que pueden agregarse a los navegadores.

1. Sesión 2
Tema: Navegadores
Materia: Programación en ambiente web
Mtro. Luis Adrián Guzmán Gonzaga
23 de enero 2023
© Universidad del Valle de México, 2023. Todos los derechos reservados.
Queda totalmente prohibido difundir, comunicar o publicar esta grabación a través de Internet o de
cualquier otro medio equivalente.

2. Agenda de la sesión
1. Bienvenida a la sesión
(7 minutos)
2. Objetivo de la semana
(3 minutos)
3. Indagación de saberes
previos
(5 minutos)
4. Tema de la semana
(25 minutos)
5. Dinámica de cierre
con Quizziz
(10 minutos)
6. Actividades a
entregar de la semana
en curso
( 10 minutos)

3. Indagación de saberes previos.
Actualmente utilizamos diversos navegadores web para poder conectarnos a
nuestras clases en línea, así como poder consultar información en internet.
Pero…
¿Cómo defines un navegador web?
¿Qué navegador utilizas actualmente como preferido o predeterminado y por
qué?
¿Conoces las extensiones o plugins que puedes utilizar en este navegador que
mencionas?
Selecciona a uno de tus compañeros para que nos comparta su punto de vista y
aportaciones.

4. Resultado de aprendizaje de la semana 2:
Resultado de aprendizaje:
Diferenciar los tipos de navegadores a fin de considerar sus características para la toma de decisiones en la
planificación y desarrollo de proyectos web de forma eficiente.

5. Tipos de navegadores:
El navegador web es una aplicación, distribuida habitualmente como software libre, que
permite a un usuario acceder (y, normalmente, visualizar) a un recurso publicado por un
servidor Web a través de Internet y descrito mediante una dirección URL (Universal Resource
Locator).
López Sanz, M. Sánchez Fúnquene, D. M. y Moreno Pérez, Á. (2015). Programación web en el
entorno cliente. Paracuellos de Jarama, Madrid, RA-MA Editorial. Recuperado de
https://elibro.net/es/ereader/uvm/106486?page=97.

6. Tipos de navegadores:
Algunos de los navegadores más utilizados son:
Google Chrome
Microsoft Edge – Internet Explorer
Mozilla Firefox
Opera
Safari
Mosaic: fue uno de los primeros navegadores web, usado
principalmente con UNIX pero debido a su gran
adaptabilidad fue usado también en Microsoft y Macintosh.
Fue la base para el desarrollo de IE y Firefox.
Netscape Comunicator: Fue el primero en implementar un
módulo para la ejecución de Javascript.

7. Tipos de navegadores:
Criterios para diferenciar los navegadores web:
Plataforma de ejecución: Algunos solamente eran diseñados para un sistema operativo. Safari
e Internet Explorer con Macintosh y Microsoft respectivamente.
Características del navegador: incluyen herramientas como la administración de marcadores,
gestores de descargas, almacenamiento de contraseñas, corrección ortográfica, entre otras.
Personalización de la interfaz: el uso de pestañas, bloqueadores de ventanas emergentes,
integración de visualizadores como archivos o documentos PDF, Zoom, herramientas de
búsqueda e inspección.
Soporte de tecnologías web: Uso de estilos CSS, JavaScript, sindicación de contenidos.
Licencia de software. La mayoría de los navegadores web son de código abierto, algunos como
IE y Safari son navegadores propietarios.

8. Tipos de navegadores:

9. Navegación:
Para poder navegar en las páginas de internet se utilizan los menús. Estos menús se
recomienda que no excedan la cantidad de 8 para no saturar la vista del usuario.
En versiones de escritorio suelen utilizarse menús de tipo Rollover o también conocidos como
menús desplegables, sin embargo, estos últimos no son tan “cómodos” en la navegación móvil.
Para dispositivos móviles una opción puede ser la navegación SWIPE o a través de gestos.
Otro elemento son las barras de desplazamiento o de navegación, sin embargo suelen quitar
espacio a la vista de los usuarios lo cual genera cierta inconformidad por que no pueden ver
sus contenidos sin “elementos que estorben”.
Pestañas: son elementos para poder organizar diferentes páginas del mismo sitio web en una
ventana del navegador, se recomienda no exceder el número 8.
Menú hamburguesa: utilizado en dispositivos móviles muestran una sangría para mostrar los
niveles de acceso.

10. Depuradores integrados
La depuración de un código consiste en eliminar elementos que no son
necesarios, que presentan inconsistencias o errores.
Hoy en día la mayoría de los entornos de desarrollo integran un depurador.
Los Navegadores web no son excepción.
Validar código CSS: https://jigsaw.w3.org/css-validator/
Validar código HTML XML o documentos: https://validator.w3.org/

11. Depuradores integrados
Mozilla Firefox:
Integra depuradores como Firefox Aurora
También se desarrollaron herramientas externas como Firebug, entre otras.
Firebug permite monitorear y modificar los códigos HMTL, CSS y JavaScript
en tiempo real.
• HTML: Permite ver el código y editarlo mientras puedes ver como se
ajustan los cambios.
• Consola: Se utiliza para ver errores y logs
• CSS: Permite monitorear y editar los comandos de estilo
• Script: Verifica el código de JavaScript

12. Depuradores integrados
Internet Explorer:
Microsoft Internet Exporer y ahora Microsoft Edge cuentan con
Herramientas de desarrollo las cuales permiten analizar los códigos HTML y
CSS, así como JavaScritp.
Puedes abrirlas con la tecla F12 o menú herramientas y herramientas de
desarrollo.

13. Depuradores integrados
Opera:
Al igual que los navegadores anteriores, cuenta con un elemento para
inspeccionar código desde el mismo navegador. También existen
herramientas adicionales como:
• Opera Dragonfly
• Opera Next
• La consola de errores
• Visor de código fuente

14. Depuradores integrados
Google Chrome:
Para acceder a ellas, diríjase al botón del navegador que se denomina
Personaliza y controla Google Chrome, y luego a la opción Herramientas.
• Consola de JavaScript.
• Administrador de tareas.
• Herramientas para desarrolladores.
• Ver código fuente.

15. Depuradores integrados
Google Chrome:
Para acceder a ellas, diríjase al botón del navegador que se denomina
Personaliza y controla Google Chrome, y luego a la opción Herramientas.
• Consola de JavaScript.
• Administrador de tareas.
• Herramientas para desarrolladores.
• Ver código fuente.

16. Depuradores integrados
Safari:
Ofrece diversas herramientas interesantes cómo
• Yslow: Analiza la velocidad de carga de un sitio web
• Measurelt: Maqueta dibujando una regla para medir distancia entre
pixeles.
• Code Notes. Esquemas y diagramas sobre la web y permite exportarlos
como captura de pantalla
• Validator: Se asegura de cumplir con los estándares w3c
• Builtwith: Comprueba qué tecnología fue usada para el desarrollo del
sitio web.
• Firebug Lite

17. Extensiones
Son herramientas que se agregan a los navegadores para aumentar o
complementar su funcionalidad.

18. © Universidad del Valle de México, 2022. Todos los derechos reservados.
Queda totalmente prohibido difundir, comunicar o publicar esta grabación a través de Internet o de
cualquier otro medio equivalente.
Dinámica de cierre:

19. © Universidad del Valle de México, 2023. Todos los derechos reservados.
Queda totalmente prohibido difundir, comunicar o publicar esta grabación a través de Internet o de
cualquier otro medio equivalente.
Actividades de la semana 2:
Revisemos las actividades e instrumentos de evaluación
directamente en plataforma.

20. ¡Gracias!
Les deseamos el mayor de los éxitos