Haz clic para llenar formulario (Todos los Grupos)
Conoce los Acuerdos de Académia
👨🏫 INTRODUCCIÓN AL dESARROLLO DE sITIOS wEB 👨💻
🚀
🛠️
¿Cómo se construye la web hoy en día? (Técnicas Actuales)
Imagina que el internet es una ciudad gigante y vacía. El Desarrollo Web es el arte y la técnica de construir los edificios, las tiendas y los parques que hay en esa ciudad. Básicamente, es el proceso de crear sitios y aplicaciones que viven en el navegador (como Chrome o Safari) para que personas de todo el mundo puedan visitarlos. No se trata solo de que se vea "bonito"; se trata de que sea útil, rápido y que funcione correctamente cuando hacemos clic en un botón.
Actualmente, no empezamos de cero escribiendo miles de códigos extraños. Usamos tres técnicas principales que son como las "reglas de oro" de la construcción digital:
El Sistema de las "Capas": Para que una web funcione, usamos tres herramientas que trabajan en equipo
HTML: Es el "esqueleto" (los muros y techos).
CSS: Es la "pintura y decoración" (colores y tipos de letra)
JavaScript: Es la "electricidad y fontanería" (lo que hace que las cosas se muevan o cambien).
Diseño "Mobile-First" (Primero el Celular): Antes, las webs se hacían para computadoras. ¡Hoy no! La técnica actual es diseñar primero para el celular, porque es donde pasamos más tiempo, y luego hacer que se adapte a pantallas más grandes. 📱
Constructores Visuales (No-Code): No siempre es necesario ser un genio de la programación. Existen herramientas que permiten arrastrar y soltar elementos para armar una página web de forma visual, ¡como si estuviéramos armando un set de LEGO! 🧱
La Nube (Cloud Hosting): Ya no guardamos las webs en un disco duro. Las técnicas modernas nos permiten "subir" nuestros proyectos a computadoras gigantes que siempre están prendidas (servidores), para que cualquiera pueda entrar con un link desde cualquier país. ☁️🌍
Comenzaremos definiendo las dos tecnologías que usaremos en el desarrollo del sitio web
🦴 ¿Qué es HTML?
HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el estándar universal que se utiliza para definir y estructurar el contenido de las páginas web.
Es el "ADN" de la web. Todo lo que ves cuando navegas por internet, desde un video en YouTube hasta una publicación en redes sociales, está envuelto en etiquetas HTML que le dan orden y sentido a la información.
A diferencia de lo que muchos creen, HTML no es un lenguaje de programación, ya que no puede realizar cálculos matemáticos ni procesos lógicos complejos por sí solo. Es un lenguaje de marcado, lo que significa que utiliza una serie de etiquetas (tags) para "marcar" el texto y decirle al navegador (Chrome, Safari, Firefox) qué es cada cosa: "esto es un título", "esto es un párrafo", "esto es una imagen".
🚀
Tres Características Esenciales de HTML
1. Estructura basada en Etiquetas (Tags) 🏷️HTML funciona mediante un sistema de etiquetas que abren y cierran contenido, usualmente representadas así:
<etiqueta>contenido</etiqueta>.
Por qué importa: Esta estructura jerárquica permite que el navegador entienda la importancia de los elementos. Por ejemplo, una etiqueta <h1> le dice al buscador que ese es el título más importante de la página, ayudando incluso a que el sitio aparezca en Google.
2. Es multiplataforma y estándar (Universal) 🌍HTML es un lenguaje "nómada". No importa si usas Windows, Android, una Mac o un refrigerador inteligente; si tiene un navegador web, puede leer HTML.
Por qué importa: Gracias a que es un estándar regulado por la W3C (el comité que gobierna la web), los desarrolladores solo tienen que escribir el código una vez y este funcionará de la misma forma en prácticamente cualquier dispositivo del mundo.
3. Es un lenguaje interpretado (No necesita compilación) ⚡A diferencia de otros lenguajes que necesitan ser "traducidos" por programas especiales antes de funcionar, HTML es leído directamente por el navegador de forma instantánea.
Por qué importa: Esto facilita mucho el aprendizaje para principiantes. Puedes escribir código HTML en un simple bloc de notas, guardar el archivo y, al abrirlo en el navegador, verás el resultado de inmediato. ¡Es diseño en tiempo real!
Dato curioso para la clase: La primera página web de la historia (creada en 1991) solo tenía texto y enlaces en HTML. ¡Y todavía puedes visitarla hoy porque el lenguaje sigue siendo compatible!
➡️ Haz clic en el botón de la parte inferior, para explorar el sitio web. 💻🚀
¡Es una verdadera cápsula del tiempo! 🕰️
La página fue creada por Tim Berners-Lee (el padre de la web) en agosto de 1991, utilizando una computadora NeXT en el CERN (Organización Europea para la Investigación Nuclear).
Lo más increíble es que, como te mencionaba, todavía está activa y puedes entrar a verla tal cual era en ese entonces. Es minimalismo puro: solo texto azul, enlaces y un fondo gris o blanco (dependiendo de tu navegador).
A continuación se presenta una guía centrada exclusivamente en la construcción de interfaces mediante la escritura directa de código <HTML>, enfocándose en el uso de etiquetas como base fundamental del desarrollo web. En este entorno, cada componente de la página se genera a través de instrucciones de texto precisas que el navegador interpreta para renderizar el contenido en pantalla. Para integrar elementos funcionales, es necesario escribir manualmente comandos específicos: los cuadros de texto se definen mediante la etiqueta input, las imágenes se incorporan a través del comando img y los botones se crean utilizando la etiqueta button. Esta metodología requiere organizar el documento de manera lógica y secuencial, asegurando que cada instrucción escrita ocupe su lugar correcto dentro de la sintaxis para que la interfaz final sea funcional y esté correctamente estructurada.
🚀
Tres Características Esenciales de CSS
Si el HTML es el esqueleto de nuestra web, el CSS (Cascading Style Sheets) es el estilo, la moda y la personalidad. Como experto en desarrollo, te puedo decir que sin CSS, internet sería un desierto de texto aburrido en blanco y negro.
1. Separación de Contenido y Diseño🎨 Esta es la regla de oro del desarrollo web moderno. El CSS permite que el HTML se encargue exclusivamente de la información (qué dice la página) y el CSS se encarga exclusivamente de la apariencia (cómo se ve).
2. El Efecto de "Cascada" y Herencia 🌊El nombre "Hojas de Estilo en Cascada" no es casualidad. Las reglas de estilo fluyen de arriba hacia abajo. Si le dices al "cuerpo" (body) de la web que la letra sea azul, todos los elementos dentro de él heredarán ese color, a menos que les des una instrucción específica diferente.
3. Adaptabilidad (Responsive Design) 📱💻CSS es el responsable de que una página web se vea perfecta tanto en un monitor gigante de 32 pulgadas como en la pequeña pantalla de un celular. Gracias a técnicas como las Media Queries, el CSS puede detectar el tamaño de la pantalla y reacomodar los elementos automáticamente.
Por qué importa: Esto permite que, si quieres cambiar el color de todos los títulos de tu sitio, solo tengas que editar una línea en tu archivo CSS en lugar de buscar cada título en 50 páginas de HTML. ¡Es eficiencia pura!
Por qué importa: Facilita la creación de diseños consistentes. Puedes definir reglas generales para todo el sitio y solo "romperlas" en secciones específicas (como un botón que necesite resaltar).
Por qué importa: Hoy en día, más del 60% del tráfico web viene de dispositivos móviles. El CSS permite que los desarrolladores creen una sola web que "fluya" y se adapte a cualquier dispositivo sin tener que crear versiones distintas para cada uno, acontinuación se muestra un video que maraca caracteriticas del uso de esta tecnología al momento de crear páginas web, da un clic para saber más al respecto.
Como conclusión..! En conclusión, el Desarrollo Web es el arte de combinar estructura, estética y funcionalidad para construir experiencias digitales únicas. 🌐 Al dominar el HTML como base sólida, el CSS como el motor visual de la personalidad y el JavaScript como el cerebro interactivo, cualquier estudiante puede transformarse de un simple espectador a un verdadero arquitecto del internet, capaz de convertir ideas abstractas en proyectos reales y profesionales. 🚀💻✨
A continuación se te comparte a manera de ejemplo, un caso particular entre el uso de ambas tecnologias conjugadas <HTML> y <CSS> para que tú como estudiante identifiques de manera plena como se observaria una venatana con texto, fondo, imagen y boton, mismo que mas adelante implementaremos en la plataforma de Kompozer al dar el seguimiento puntual de las instrucciones del proyecto de un sitio web con tu profesor.
Haz un pequeño ejercicio con tu profe... Accede al sitio de CODEPEN presionando el siguiente boton que se encuentra en la parte inferior.
Dato curioso para la clase: ¿Sabías que el CSS moderno es un sistema tan inteligente que puede crear animaciones 3D y activar el "modo oscuro" con solo unas líneas de código? 🌙✨ Hoy en día, permite que las webs sean ultrarrápidas y se adapten automáticamente a cualquier celular, eliminando la necesidad de usar imágenes pesadas para que el diseño se vea profesional. 🚀📱
¡Hola, chicos de 6to Semestre! 👋 A continuación, les presento una actividad de reforzamiento basada en los temas que revisamos en la presentación de clase. 📚 El objetivo es razonar cada pregunta y asociarla con su respuesta correcta. 💡 ¡No se preocupen! Si fallan, tienen la oportunidad de reintentar hasta lograrlo. 🔄 ¡Diviértanse y sigan aprendiendo! 🚀