Summary
Highlights
La clase comienza introduciendo la Semana 8 de CS50, enfocándose en Internet, su funcionamiento y cómo construir software sobre él. Se mencionan los lenguajes previos (Scratch, C, Python, SQL) y se anticipa la integración de todos en el contexto de la web con tres nuevos lenguajes: HTML, CSS y JavaScript.
Se explora la historia de Internet, desde ARPANET en los años 60 y 70, explicando cómo los routers, similares a seres humanos pasando información, mueven paquetes de datos. Se destaca la resiliencia de Internet para enrutar datos incluso si algunos servidores fallan.
Se detallan los protocolos TCP/IP. IP (Internet Protocol) asigna direcciones únicas a cada dispositivo, análogas a direcciones físicas de edificios, estandarizadas como IPv4 (ej. 1.2.3.4) e IPv6. TCP (Transmission Control Protocol) garantiza la entrega de datos utilizando números de secuencia y números de puerto (como 80 para la web y 443 para HTTPS) para multiplexar servicios como correo electrónico o videoconferencias.
Se introduce el Sistema de Nombres de Dominio (DNS), que traduce los nombres de dominio legibles para humanos (como harvard.edu) a direcciones IP numéricas. Los servidores DHCP (Dynamic Host Configuration Protocol) se encargan de asignar automáticamente direcciones IP y servidores DNS a los dispositivos, simplificando la conexión a Internet.
HTTP (Hypertext Transfer Protocol) es el protocolo para la World Wide Web. HTTPS es su versión segura, que encripta la comunicación entre el navegador y el servidor. Se explican las partes de una URL, incluyendo esquemas (HTTPS), nombres de host (www), nombres de dominio (harvard.edu) y rutas, así como los verbos GET y POST para solicitar y enviar información.
Se muestran los códigos de estado HTTP, como 200 (OK), 301 (movido permanentemente) y 404 (no encontrado), y cómo ver las interacciones del navegador con las herramientas de desarrollo. Estas herramientas permiten inspeccionar las solicitudes y respuestas HTTP, revelando la comunicación subyacente entre el cliente y el servidor.
Se introduce HTML (Hypertext Markup Language) como un lenguaje de marcado para estructurar contenido web. Se explican las etiquetas (tags) como <html>, <head>, <title>, <body> y sus atributos, así como la declaración de tipo de documento (DOCTYPE). Se muestra cómo ejecutar un servidor HTTP localmente para visualizar archivos HTML.
Se demuestran etiquetas HTML fundamentales: <p> para párrafos, <h1> a <h6> para encabezados (diferentes tamaños), <ul> y <ol> para listas desordenadas y ordenadas respectivamente, y <li> para elementos de lista. También se muestra la etiqueta <img> para insertar imágenes, explicando el atributo `src` para la fuente y `alt` para texto alternativo, así como la etiqueta <video>.
Se cubre la creación de hipervínculos con la etiqueta <a> y el atributo `href`. Se explica cómo utilizar formularios HTML con las etiquetas <form>, <input> y <button>, que permiten interactuar con el usuario y enviar datos a un servidor. Se muestra cómo crear una interfaz de búsqueda básica similar a Google.
Se introduce el atributo `pattern` en los campos de entrada de formularios para la validación del lado del cliente utilizando expresiones regulares (regex). Sin embargo, se enfatiza que la validación del lado del cliente no es segura y se debe realizar también en el servidor, utilizando las herramientas de desarrollador para demostrar cómo un usuario podría eludirla.
Se introduce CSS (Cascading Style Sheets) para controlar la apariencia visual de las páginas web. Se explica cómo aplicar estilos directamente con el atributo `style`, o de forma más organizada con la etiqueta <style> dentro del <head> del documento. Se demuestran propiedades como `font-size` y `text-align`.
Se profundiza en los selectores CSS: selectores de tipo (por ejemplo, `body`), selectores de clase (prefijados con `.`) e selectores de ID (prefijados con `#`). Se muestra cómo vincular un archivo CSS externo para gestionar estilos de forma centralizada y cómo frameworks como Bootstrap facilitan la estilización con clases predefinidas.
Se introduce JavaScript como un lenguaje de programación que añade interactividad a las páginas web. Se explica cómo incluir código JavaScript con la etiqueta <script> y cómo interactuar con elementos HTML mediante el DOM (Document Object Model). Se demuestran funciones para mostrar alertas (`alert`) y manejar eventos como `onsubmit`.
Se explican los eventos JavaScript como `click` y `submit`, y cómo usar `addEventListener` para responder a ellos. Se demuestra cómo JavaScript puede manipular dinámicamente el CSS de una página (cambiando el color de fondo). También se muestra cómo usar `setInterval` para acciones repetitivas como hacer que el texto parpadee (un ejemplo de la "etiqueta blink" histórica).
Se presenta un ejemplo de autocompletado en un campo de entrada usando JavaScript, donde se filtra una lista de palabras en tiempo real. Finalmente, se demuestra cómo JavaScript puede acceder a la API de geolocalización del navegador para obtener las coordenadas GPS del usuario, mostrando la potencia y las implicaciones de privacidad de las capacidades modernas de JavaScript.