HTML Website Generator-Introducción a la web
-HTML, lo básico
-El navegador
-VS Code
- Equipo de Cómputo
- Conexión a Internet
Clientes y Servidores
La web funciona por dispositivos conectados llamados clientes y servidores, los clientes son los encargados de realizar las peticiones o Request a los servidores y los servidores se encargan de atender a dichos clientes contestando sus solicitudes, lo que se conoce como enviar un response.
Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que se teclean en la barra de direcciones para encontrar sitios web. En realidad, se trata de secuencias de números, algo como 63.245.217.105.
Lo anterior se llama dirección IP y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar. Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde un navegador con la dirección real del sitio web (IP), funcionan como una especie de directorios telefónicos.
Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Si se intenta acceder a la página web de Mozilla escribiendo 63.245.217.105 en la barra de dirección de una nueva pestaña de un navegador, no se accede; es posible encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como DNS lookup.
Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet.
HTTP, de sus siglas en inglés: "Hypertext Transfer Protocol", es el nombre de un protocolo el cual nos permite realizar una petición de datos y recursos, como pueden ser documentos HTML.
Instalar junto con los estudiantes VS Code desde su página oficial, teniendo en cuenta marcar todos los accesos directos adicionales.
Hacer la guía de instalación en presentación.
Preguntar a los estudiantes si tienen instalado Google Chrome y Firefox, en caso de no contar con alguno de los dos, proceder a instalar ambos desde sus sitios oficiales.
La idea de instalar ambos es que presentan devtools similares pero cambian en algún aspecto y es mejor presentarle a los estudiantes como puede encontrarse un recurso de un navegador y cómo en el otro o como se ven visualmente diferentes.
Se inicia desde la estructura básica
Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. En esta sección se explica cómo utilizar las funciones básicas de las herramientas de desarrollo de un navegador.
El primer enlace del listado cuenta con la información necesaria para presentarle a los estudiantes, a saber, cómo abrir o habilitar las devtools, la pestaña inspector y sus ventanas, HTML y Styles, cómo ir directamente a un elemento, ya sea buscarlo en el inspector o desde la parte visual utilizando click derecho, opciones en el inspector, eliminar nodo, duplicar, editar. Mencionar el editor de estilos lo que son los selectores y las propiedades, lo que son reglas vistas en la lección anterior.
De la pestaña consola se hablará más adelante pero se establece un acercamiento dando a conocer que se puede ejecutar código JS desde allí y también ver información de las peticiones. Pestaña de Red para indicar que se muestra la carga de recursos que componen el sitio web y su tiempo de carga, doble click para abrir o visualizar el recurso.
Pestaña de almacenamiento con dos elementos que se utilizan más adelante como lo es el almacenamiento local y almacenamiento de sesión, que permiten guardar información en formato llave/valor, solo cadenas, el local siempre se almacena y el de sesión se borra al cerrar el navegador.
HTML Website Generator