Taller de Sistemas de Información Web
Academia de computación
Ingeniería en Comunicaciones y Electrónica
| Ciudad de México | enero 12 - 30, 2026 |
Instructores
Nancy Jacqueline Villeda López
Arturo Sánchez Vázquez
Juan Luis Alcaide Juárez
Conejo Chambitas
Luis Antonio García Espinosa
Planeación
1.1 Aplicaciones Web
Ideas clave del modelo cliente-servidor
Define roles y resposabilidades de los nodos: el cliente solicita, el servidor responde.
Es la evolución natural de las terminales pasivas a clientes activos conectados a servidores potentes.
Es la base de la web, la nube y la mayoría de aplicaciones modernas, incluyendo IoT.
Simulación de solicitudes y respuestas http/https
Insomnia es una herramienta gratuita y de código abierto que permite generar solicitudes (request) y consumir repuestas (response) HTTP/HTTPS. Es decir, cliente HTTP/HTTP.
Descarga Insomnia.
OpenSSL es un proyecto de
software libre que proporciona una biblioteca criptográfica y un conjunto
de herramientas de línea de comandos.
Permite generar claves privadas, administrar
certificados e implementar cifrado en aplicaciones incluyendo a los sistemas
de información web donde se requiere una comunicación segura a través de Internet.
Descarga OpenSSL.
Ejemplo de simulación cliente-servidor HTTP/HTTPS
Simulemos un sistema de adquisición de datos de sensores para inspeccionar el tráfico HTTP/HTTPS completo.
Pero antes ...
Mensaje HTTP
Códigos de estados de respuesta HTTP
Visita mozilla.org
Cabeceras HTTP
Visita mozilla.org
Emulación de mensaje HTTPS
¡Iniciemos la emulación!
Descarga el instructivo de la actividad 1 accediendo al curso Sistemas de Información Web en rabbitcourses.mx con el nombre de usuario y contraseña proporcionada en la primera sesión
1.2 Páginas estáticas con lenguaje de marcado de hipertexto(HTML)
Breve reseña histórica
1.2.1 Estructura de un documento HTML/XHTML
1.2.2 Etiquetas y atributos
- Etiquetas: marcan la estructura y elementos (ej. <p>, <h1>, <img>)
- Atributos: modifican el comportamiento o apariencia
(ej. src, href, alt, class, id) - Sintaxis:
<etiqueta atributo="valor">contenido</etiqueta>
Prueba el ejemplo.
1.2.3 Conjunto de etiquetas HTML/XHML
Descarga la presentación.
Prueba el ejemplo.
1.3 Hojas de estilo en cascada (CSS)
1.3.1 Generalidades de CSS
En 1994, Håkon Wium Lie, trabajando con Tim Berners-Lee en el CERN, propone las hojas de estilo en cascada (CSS, Cascading Style Sheets) como solución para separa la estructura (HTML) de la presentación (CSS). Así, las páginas web adquieren uniformidad visual y facilita el mantenimiento y el diseño.
Hoy en día, CSS sigue evolucionando con herramientas modernas para un diseño más dinámico y flexible. La última innovación, CSS Houdini Magic, es la colección de APIs de bajo nivel que ofrece a los desarrolladores acceso directo al motor de renderizado de CSS de los navegadores.
Generalidades destacadas de CSS
| Aspecto | Destacado |
|---|---|
| Separación | HTML estructura, CSS estilo |
| Selectores | Etiquetas, clases, IDs, pseudo-clases |
| Responsivo | Media queries, Flexbox, Grid |
| Disposición (Layout) | Posicionamiento, capas, display |
| Reutilización | Hojas externas, variables |
| Animación | Transiciones, keyframes, transformaciones |
| Integración | Con JavaScript y preprocesadores |
Generalidades destacadas de CSS
Ejemplo sencillo que integra las generalidades de CSS
- Separación de contenido y estilo: HTML para estructura, CSS para presentación.
- Selectores: etiquetas (header), clases (.card), pseudo-clases (:hover).
- Responsivo: @media para adaptar a pantallas pequeñas.
- Disposición (Layout): Flexbox y Grid para organizar tarjetas.
- Reutilización: variables CSS (--color-principal).
- Animaciones/transiciones: efectos al pasar el mouse (hover).
Prueba el ejemplo.
- Ventajas: flexibilidad, reutilización, accesibilidad, diseño moderno.
- Desafíos: curva de aprendizaje en layouts complejos, compatibilidad entre navegadores, necesidad de buenas prácticas para mantener código limpio.
1.3.2 Formas de aplicación de CSS
| Forma de aplición | Ubicación | Sintaxis/ejemplo | Ventaja | Desventajas | Uso recomendado |
|---|---|---|---|---|---|
| En línea | Dentro del atributo style de una etiqueta HTML | <p style="color:red; font-size:14px;">Texto</p> |
|
|
Ajustes muy específicos o pruebas rápidas |
| Embebido (interno) | Dentro de la etiqueta <style> en el <head> del documento HTML |
<html> <style> p { color:blue; } </style> </html> |
|
|
Proyectos pequeños o prototipos |
| Enlazado (externo) | En un archivo .css separado, referenciado con <link> en el <head> del documento HTML | <link rel="stylesheet" href="style.css"> |
|
|
Sitios completos, proyectos profesionales, trabajo colaborativo |
Código de ejemplo: Comparación de aplicación de CSS
Archivo externo (estilo.css)
Prueba el ejemplo.
1.3.3 Selectores
Descarga la presentación.
Prueba el ejemplo.
Desarrollo de un panel de control web con HTML y CSS
Descarga el instructivo de la actividad 2 accediendo al curso Sistemas de Información Web en rabbitcourses.mx con el nombre de usuario y contraseña proporcionada en la primera sesión
1.4 Creación de páginas web con un marco de trabajo (framework)
Marco de trabajo
Un marco de trabajo (framework) es un conjunto de herramientas, reglas, componentes y convenciones que facilitan y agilizan el desarrollo de software.
En el desarrollo web, un marco de trabajo CSS ofrece:
- Estilos predefinidos para elementos comunes.
- Utilidades para crear interfaces visuales de forma coherente.
- Estructuras que permiten trabajar más rápido y con menos código repetido.
Breve reseña histórica de Tailwind CSS
2017: Adam Wathan y Steve Schoger comienzan a desarrollar un sistema llamado Utility-First CSS mientras experimentaban con estilos minimalistas.
1 de noviembre de 2017: se lanza oficialmente Tailwind CSS v0.1, construido con un enfoque “utility-first” lo diferencia de frameworks tradicionales que se basan en componentes preestilizados.
¡Imagina construir un conejo a tu gusto con bloques de LEGO!
Su enfoque “utility-first” lo diferencia de los marcos de trabajo tradicionales que se basan en componentes preestilizados.
Con el crecimiento de la comunidad y el ecosistema de herramientas modernas, Tailwind gana popularidad rápidamente.
2020: el lanzamiento de Tailwind 2.0 consolida su adopción y expande su conjunto de utilidades.
2022–2024: Tailwind continúa evolucionando con mejoras en rendimiento, JIT (Just-in-Time Compiler) y soporte para diseño moderno.
Instalación de Tailwind CSS v4 y creación de un proyecto desde cero
Observa el video guía. Descarga el documento HTML haciendo clic derecho y selecciona la opción "Guardar enlace como...". Este documento se utilizará en el proceso de creación del primer proyecto
Tarjetas de consulta rápida y hojas de trucos
Las tarjetas de consulta rápida (quick cards) y las hojas de trucos (cheat sheet) son documentos resúmenes que facilitan el acceso a información esencial para el diseño web.
Este tipo de documentos resúmenes son especialmente útiles para desarrolladores web que trabajan con múltiples lenguajes y marcos de trabajo.
Hay opciones oficiales y no oficiales muy usadas.
Algunas son:
- Tailwind: documentación oficial y la más confiable.
- Tailwind Cheat Sheet visual: muy populary útil para principiantes que requieren de una consulta rápida en clase
- Tailwind Quick Reference: pensada como tarjeta rápida muy compacta
Desarrollo de un panel de control web con un marco de trabajo (Tailwind)
Descarga el instructivo de la actividad 3 accediendo al curso Sistemas de Información Web en rabbitcourses.mx con el nombre de usuario y contraseña proporcionada en la primera sesión