LecturaBienvenida al curso
Bienvenido a Desarrollo web básico: HTML, CSS y JavaScript. Pulse Ctrl+U en cualquier página y verá el código con que está hecha. En el sitio de pedidos de una ferretería ficticia de Cartago, por ejemplo:
<!-- Precio especial para mayoristas: usar el código FERRE2026 -->
<label for="cantidad">Cantidad de sacos de cemento</label>
<input id="cantidad" name="cantidad" type="number" min="1" max="10" required>Cualquier visitante ve un comentario que alguien dejó "para acordarse" y un max="10" que parece un límite, pero vive en la computadora del cliente: con dos clics en las herramientas de desarrollador se borra y el formulario manda 50, o 9999. Si el servidor no revisa la cantidad, acepta el pedido.
Aquí va a construir y publicar su propia página, mirándola en cada paso como la vería alguien con malas intenciones.
Qué va a lograr
- Explicar qué es la web, cómo nacieron HTML, CSS y JavaScript y qué papel cumple cada uno.
- Escribir una página HTML bien formada con un formulario y elegir entre GET y POST.
- Dar estilo a la página con CSS y hacer que se adapte a celulares.
- Usar las herramientas de desarrollador del navegador para ver el HTML vivo, la Consola y cada petición en la pestaña Red.
- Programar en JavaScript con variables, funciones, eventos y el DOM, y demostrar por qué validar en el navegador no es seguridad.
- Publicar su página por HTTPS sin secretos expuestos y revisar sus cabeceras de seguridad.
Para quién es y qué necesita
Para quien quiere entrar a la seguridad web o al desarrollo y nunca ha escrito una página. No necesita saber programar. Ayuda haber hecho Internet y la web desde cero, pero no es obligatorio. Necesita una computadora, un navegador actual y un editor de texto, como Visual Studio Code, que es gratuito. Para el módulo 4, una cuenta gratuita de GitHub y, si quiere probar el servidor local, Python 3.
Cómo está organizado
| Módulo | Qué aprende | Laboratorio |
|---|---|---|
| 1. HTML: la estructura de una página | Qué es la web y su historia, etiquetas, atributos, estructura y formularios GET y POST | Su página con un formulario de contacto |
| 2. CSS y herramientas del navegador | Selectores, modelo de caja, flexbox, diseño adaptable y las pestañas Elementos, Consola y Red | Estilo y la pestaña Red |
| 3. JavaScript: darle vida a la página | Variables, funciones, eventos, el DOM, textContent frente a innerHTML y validación | Valide el formulario y sáltese la validación |
| 4. Publicar con cuidado | Servidor local, DNS, HTTPS, secretos, cabeceras, dependencias y hosting estático, más la conclusión | Publique su página sin secretos y con HTTPS |
| Evaluación | 6 preguntas sobre todo el curso | Aprueba con 70 % |
Cómo aprovecharlo
Todos los laboratorios trabajan sobre la página de una panadería ficticia que crece de módulo en módulo, así que guarde la carpeta. Recargue con F5 cada vez que guarde: la mitad de los "no me funciona" del principio son una página sin recargar o una etiqueta sin cerrar.
El laboratorio que más se disfruta es el del módulo 3. Primero programa la validación del formulario y después se la salta de tres maneras distintas, como en el ejemplo de la ferretería. Para el del módulo 4, cree la cuenta de GitHub el día anterior. Al aprobar la evaluación final con 70 % recibe el certificado y la insignia.
Tiempo estimado
Casi 5 horas en total. Media hora alcanza para una lección; cada laboratorio pide una sesión entera.