Objetivo: Desmitificar la web y entender cómo se comunican las computadoras.
El internet funciona igual que un restaurante. Tú (el navegador web) eres el Cliente que mira el menú. Cuando haces clic en un enlace o escribes una dirección web, llamas al Mesero (el Internet). El mesero toma tu orden y corre a la Cocina (el Servidor). La cocina prepara la página web que pediste y se la da al mesero para que te la entregue en tu pantalla.
Veamos cómo ocurre esto en la vida real paso a paso:
google.com. Al presionar "Enter", envías al mesero con tu orden.A este proceso se le conoce en tecnología como el modelo Cliente-Servidor. Cada vez que navegas, tu computadora está haciendo una "Petición" (Request) y esperando una "Respuesta" (Response).
Sigue estos pasos en tu computadora:
es.wikipedia.org pero NO presiones Enter todavía.En una hoja de papel (o usando Paint), dibuja un diagrama de flujo sencillo de 3 pasos que represente la petición web. Puedes usar la metáfora del restaurante o inventar una propia (ej. el cartero).
Sube una foto o captura de tu diagrama al foro del Módulo 1. Revisa el diagrama de un compañero y comenta qué te pareció su analogía.
Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).
Objetivo: Conocer los tres pilares del desarrollo frontend.
Toda página web moderna está construida con tres lenguajes diferentes que trabajan en equipo para brindar la experiencia completa al usuario:
Para que estos tres lenguajes funcionen, los programadores los escriben en archivos separados. Imagina que tienes una carpeta en tu computadora, adentro verías algo así:
Como ves en el ejemplo anterior, cada archivo tiene una "extensión" específica (lo que va después del punto). Esa extensión es la que le dice a la computadora y al navegador cómo debe interpretar el código escrito adentro. El archivo index.html es el jefe: él es quien se encarga de "llamar" o "invitar" al CSS y al JS para que se unan a la fiesta.
Vamos a desvestir una página famosa (¡tranquilo, no la romperás de verdad, solo en tu pantalla!):
google.com en tu navegador.Usa tu imaginación. Ya usamos la metáfora del cuerpo humano y la ropa. Escribe una metáfora completamente nueva para explicar HTML, CSS y JS usando la construcción de una casa, un automóvil o una receta de cocina.
Publica tu metáfora en el foro del Módulo 1. Leer las analogías de otros ayuda a fortalecer la memoria mediante asociación creativa.
Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).
Objetivo: Preparar el taller donde construiremos nuestra magia.
Técnicamente, podrías escribir código web en un Bloc de Notas básico, pero sería como intentar construir un edificio usando solo una cuchara. Necesitamos herramientas profesionales. Instalaremos Visual Studio Code (VS Code). Es un "Editor de Código", un programa gratuito creado por Microsoft que colorea las palabras clave, autocompleta el código y nos avisa si cometemos errores de escritura.
Preparar tu computadora es un proceso estándar de 3 pasos:
¿Por qué es vital abrir una carpeta y no archivos sueltos? A esta carpeta principal se le llama "Carpeta Raíz". El navegador web es muy estricto y busca las imágenes, el CSS y el JS guiándose por la estructura de carpetas. Si eres desordenado y tienes tus archivos regados por todo tu escritorio, tu página web simplemente aparecerá rota.
Sigue estas instrucciones para preparar tu primer entorno real:
code.visualstudio.com en tu navegador, descarga e instala el programa.curso-web-basico.curso-web-basico que acabas de crear. Verás el nombre de tu carpeta en el panel izquierdo del programa.El orden lo es todo en la programación. Usando los botones que aparecen al pasar el ratón sobre el nombre de tu proyecto en el panel izquierdo de VS Code, crea tres nuevas sub-carpetas dentro de tu proyecto. Llámalas exactamente así (en minúsculas): css, js y assets.
Toma una captura de pantalla del panel lateral izquierdo de tu VS Code donde se vean tus tres subcarpetas ordenadas. Súbela al foro y ¡celebra, tu taller de desarrollo está 100% listo!
Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).