Tema 3. Desarrollo web

Currículo: esta unidad desarrolla todos los saberes básicos del Bloque E – Desarrollo web correspondiente a 2ºESO. Además, se evalúan los criterios que puedes encontrar al final de esta página.

Tabla de contenidos

• 3.1. Estructura básica de una página web
  • 3.1.1. Componentes principales
  • 3.1.2. Cómo se presenta la información
  • 3.1.3. La importancia de la estructura
• 3.2. Servidores web: funcionamiento
  • 3.2.1. Inicio de la solicitud
  • 3.2.2. Ruta hacia el servidor
  • 3.2.3. Procesamiento de la solicitud en el servidor
  • 3.2.4. Recepción y renderizado en el navegador
• 3.3. Lenguajes para la edición de páginas web: diferencias
  • 3.3.1. HTML vs. CSS
  • 3.3.2. PHP vs. JavaScript
  • 3.3.3. SQL vs. NoSQL
• 3.4. Tipos de animación web
  • 3.4.1. Animaciones CSS
  • 3.4.2. Animaciones basadas en JavaScript
  • 3.4.3. Animaciones SVG
  • 3.4.4. Animaciones de Lienzo (Canvas)
  • 3.4.5. Animaciones 3D y WebGL
• 3.5. Prácticas de desarrollo web
  • 3.5.1. Google Sites
  • 3.5.2. Crear animaciones para la web
  • 3.5.3. Webflow

Adentrarse en el mundo del desarrollo web supone poner en práctica habilidades relacionadas con la creatividad y la tecnología. No se trata solo de aprender a producir código; sino de dar vida a las ideas, crear experiencias que cautiven a quienes navegan por la web y facilitar el acceso a la información de manera que antes no podíamos imaginar.

Este tema nos llevará desde los cimientos de cómo se construyen las páginas hasta cómo cobran vida mediante la animación. A través de este aprendizaje, descubriremos las herramientas y los lenguajes que nos permiten estructurar contenido y hacerlo mas atractivo.

3.1. Estructura básica de una página web

Entendiendo que una página web es un documento digital que puede ser increíblemente rico en contenido, como ya vimos aquí; demos un pasito más para entender cómo está hecha.

La estructura básica de una página web puede compararse con la de un libro o cualquier otra publicación impresa que estés acostumbrado a leer, pero con elementos interactivos que van más allá del papel.

3.1.1. Componentes principales

Cuando piensas en un libro, reconoces inmediatamente ciertos elementos como el índice, los capítulos, los párrafos, las imágenes y, quizás incluso, referencias -enlaces- a otros libros -o capítulos-. 

Una página web comparte muchas de estas características estructurales, pero se presenta en un formato digital que permite una interacción mucho más dinámica. Veamos algunos de sus elementos más importantes:

• Encabezados: de manera similar a los libros -que siempre tienen un título y un encabezado para cada capítulo y/o sección importante-, una página web tiene un título que suele aparecer en la pestaña del navegador (como la flecha roja del ejemplo). Dentro de la página, puedes encontrar encabezados de varios tamaños que organizan el contenido y ayudan a entender la jerarquía de la información presentada (como el área resaltada de amarillo).

• Cuerpo de texto: este es el contenido principal de la página web, similar al texto que encuentras en los párrafos de un libro. El texto puede estar organizado de muchas maneras para facilitar la lectura y guiar al lector a través de la información de manera lógica.

• Multimedia: al igual que las ilustraciones de un libro, las páginas web pueden contener imágenes, videos, sonidos, animaciones y otros elementos multimedia para complementar el contenido textual. Estos elementos pueden ser interactivos y ofrecer experiencias mucho más inmersivas que las que ofrece el papel.

• Enlaces: si pudieras tocar una palabra o frase de un libro y ser instantáneamente transportado a otro libro que proporciona información adicional, estarías usando un enlace. Eso es exactamente lo que hacen los «links» -enlaces- en una página web. Conectan un documento digital con otro, permitiéndote navegar a través de enormes cantidades de información relacionada con facilidad.

• Secciones: es fundamental que las páginas web se dividan en secciones claramente marcadas, como el encabezado (cabecera), el pie de página y barras laterales, que pueden contener información adicional, enlaces de navegación y otros recursos útiles. Estas secciones ayudan a organizar el contenido, hacen que la página sea fácil de explorar y les indica a los motores de búsqueda qué partes del contenido son más importantes que otras.

3.1.2. Cómo se presenta la información

Una página web no es estática; es un documento vivo que puede cambiar y responder a diferentes acciones del usuario. Por ejemplo, al hacer clic en un enlace, puedes ser llevado a una nueva sección de la misma página o a una página web completamente diferente. Esta interactividad es parte de lo que hace que las páginas web sean herramientas tan potentes para compartir y acceder a información.

3.1.3. La importancia de la estructura

Entender la estructura de una página web -lo que llamamos el layout– es indispensable porque determina cómo se presenta la información a los visitantes. 

Una estructura clara y lógica hace que una página web sea fácil de usar -navegar-, lo que a su vez hace que la información sea comprensible. Esto es especialmente importante en un entorno digital donde la atención de las personas es limitada y la cantidad de información disponible inmensa.

3.2. Servidores web: funcionamiento

Para entender mejor cómo funcionan los servidores web, un estudio que iniciamos aquí, profundizaremos un poco más en el proceso detallado que ocurre desde el momento en que se solicita una página web hasta que se muestra en tu navegador. 

Este proceso implica varios pasos y tecnologías clave que trabajan conjuntamente para entregar el contenido web a los usuarios. 

3.2.1. Inicio de la solicitud

Todo comienza con una acción por parte del usuario, como introducir una dirección web en el navegador o hacer clic en un enlace.

Esta acción genera una solicitud HTTP -Protocolo de Transferencia de Hipertexto- hacia el servidor web que aloja la página solicitada.

La dirección URL -Localizador Uniforme de Recursos-, como www.ejemplo.com, necesita ser traducida a una dirección IP numérica que los ordenadores pueden entender y usar para localizar el servidor web en la inmensidad de internet. Este proceso se llama resolución DNS -Sistema de Nombres de Dominio-.

3.2.2. Ruta hacia el servidor

La solicitud, ahora con la dirección IP del servidor destino, viaja a través de la red, posiblemente saltando a través de varios dispositivos y redes intermedias -routers, switches, etc.- hasta alcanzar el servidor web destino.

Una vez en el servidor web, la solicitud HTTP es recibida y procesada por el software del servidor -por ejemplo, Apache, Nginx-. Este software está diseñado para escuchar solicitudes entrantes y responder a ellas.

3.2.3. Procesamiento de la solicitud en el servidor

El servidor busca en sus archivos la página web solicitada. Si se trata de contenido dinámico -como resultados de búsqueda personalizados o páginas que cambian según el usuario-, el servidor puede necesitar ejecutar scripts -por ejemplo, PHP, Python o Java- y realizar consultas a bases de datos para generar el contenido específico para esa solicitud.

Una vez que el contenido está listo -ya sea una página web estática o dinámicamente generada-, el servidor lo empaqueta y lo envía de vuelta al navegador en forma de una respuesta HTTP, que incluye el código HTML de la página, junto con cualquier otro recurso necesario como CSS, imágenes, y JavaScript.

3.2.4. Recepción y renderizado en el navegador

El navegador recibe los datos de la respuesta del servidor. Esta respuesta puede ser una página web completa, una redirección a otra URL, o un mensaje de error si la página no pudo ser encontrada o si hubo otro problema.

El navegador interpreta el código HTML, aplica estilos CSS, y ejecuta scripts JavaScript para construir y renderizar la página web. Este proceso incluye la disposición de elementos de texto, la inclusión de imágenes y la implementación de interactividades definidas por JavaScript.

Una vez que la página está completamente cargada y renderizada, está lista para la interacción del usuario. Cualquier acción adicional del usuario -como clics en enlaces o envíos de formularios- iniciará este proceso nuevamente para solicitar nueva información o páginas al servidor.

Este flujo detallado, muestra la complejidad y la eficiencia del proceso que permite a los usuarios acceder a contenido web de todo el mundo en cuestión de segundos. Cada paso, desde la solicitud inicial hasta el renderizado final en el navegador, involucra tecnologías que han sido creadas y mejoradas a lo largo de los años para hacer de internet un recurso global único.

3.3. Lenguajes para la edición de páginas web: diferencias

Basándonos en el conocimiento previo sobre los lenguajes de programación para la creación de páginas web, vamos a explorar las diferencias clave entre ellos, enfocándonos en sus roles específicos, capacidades y cómo interactúan entre sí para construir sitios web funcionales.

Si quieres probar los fragmentos de código que irán apareciendo a continuación en este apartado te recomiendo que uses Codepen.io, una herramienta que nos permite escribir código HTML, CSS y JavaScript y probar cómo se vería el resultado en tu página web. Es una herramienta online, por lo que no necesitarás instalar ningún programa en tu ordenador.

3.3.1. HTML vs. CSS

Mientras HTML se encarga de la estructura y el contenido de una página web (por ejemplo, texto, imágenes, enlaces), CSS se utiliza para definir el estilo de estos elementos (como el color, la fuente y los márgenes). HTML dice qué mostrar y CSS cómo mostrarlo.

Veamos un ejemplo de HTML para mostrar una lista de los 10 videojuegos más jugados de la historia:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista Desplegable de Videojuegos</title>
</head>
<body>
    <h2>Selecciona un videojuego:</h2>
    <select name="videojuegos" id="videojuegos">
        <option value="tetris">Tetris</option>
        <option value="minecraft">Minecraft</option>
        <option value="gtaV">Grand Theft Auto V</option>
        <option value="wiiSports">Wii Sports</option>
        <option value="pubg">PlayerUnknown's Battlegrounds (PUBG)</option>
        <option value="superMarioBros">Super Mario Bros.</option>
        <option value="pokemonRedBlue">Pokémon Red/Green/Blue</option>
        <option value="tetrisMobile">Tetris (móvil)</option>
        <option value="wiiFit">Wii Fit + Wii Fit Plus</option>
        <option value="marioKartWii">Mario Kart Wii</option>
    </select>
</body>
</html>

El código anterior se vería así en el navegador:

Como puedes ver, la estética es bastante mala; ya que se están aplicando los estilos por defecto del navegador. Sin embargo, si le añadimos este archivo CSS al código anterior:

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    color: #333;
}
h2 { color: #007BFF; }
select {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 2px solid #007BFF;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: #333;
    background-color: #fff;
    cursor: pointer;
    outline: none;
}
select:hover { border-color: #0056b3; }
select:focus { box-shadow: 0 0 8px rgba(0, 123, 255, 0.8); }
option {
    padding: 10px;
    color: #333;
}

Este sería el resultado:

Si quieres aprender más sobre este lenguaje, te recomiendo estos libros.

A diferencia de HTML y CSS, que son más estáticos, JavaScript añade interactividad a las páginas web, permitiendo crear contenido que cambia sin necesidad de recargar la página. Con JavaScript, se pueden manejar eventos del usuario, validar formularios o crear animaciones, entre muchas otras capacidades.

JavaScript se ejecuta generalmente en el navegador del usuario –lado del cliente–, lo que significa que puede realizar tareas y responder a acciones del usuario en tiempo real, sin necesidad de comunicarse constantemente con el servidor. Por ejemplo, esta pieza de código, abre una ventana modal dentro de la web que se está visualizando, cuando se pulsa en el enlace.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ventana Modal</title>
    <style>
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed; /* Se queda fijo en la pantalla */
            z-index: 1; /* Sitúa el modal sobre otros elementos */
            left: 0;
            top: 0;
            width: 100%; /* Anchura completa */
            height: 100%; /* Altura completa */
            overflow: auto; /* Habilita el desplazamiento si es necesario */
            background-color: rgba(0,0,0,0.4); /* Color de fondo */
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% desde arriba y centrado */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Puede variar según el diseño */
            border-radius: 5px; /* Bordes redondeados */
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<p>Pulsa <span id="openModal" style="cursor:pointer; text-decoration:underline; color:blue;">aquí</span> para abrir una ventana usando JavaScript.</p>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Contenido de la ventana modal creada por JavaScript de forma dinámica.</p>
  </div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("openModal");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

Si te interesa aprender este lenguaje, puedes empezar por aquí.

3.3.2. PHP vs. JavaScript

La primera diferencia importante de la que es necesario dejar constancia es «el lado» en el que se ejecuta el lenguaje.

PHP es un lenguaje de programación del lado del servidor, lo que significa que se ejecuta en el servidor web antes de que la página sea enviada al navegador del usuario. Esto lo hace ideal para tareas como acceder a bases de datos, procesar formularios o controlar la autenticación de usuarios. 

JavaScript, por su parte, aunque tradicionalmente es un lenguaje del lado del cliente, con la introducción de Node.js, ahora también se puede utilizar en el servidor.

Mientras que JavaScript se centra en la interactividad del lado del cliente, PHP se utiliza para generar contenido dinámico basado en la lógica del servidor antes de que la página llegue al navegador.

Existen numerosas opciones disponibles para sustituir a PHP como lenguaje principal de programación de nuestras aplicaciones web del lado servidor. Algunas de las más importantes son:

• Python: es extremadamente versátil, siendo popular en ciencia de datos, aprendizaje automático, automatización y desarrollo web.

• Ruby: Ruby on Rails es conocido por su enfoque en la rapidez del desarrollo. Ofrece muchas convenciones que ayudan a tomar decisiones, permitiendo a los desarrolladores enfocarse en las características únicas de sus aplicaciones.

• Java: conocido por su portabilidad, rendimiento y robustez. Es ampliamente utilizado en empresas para aplicaciones web de gran escala debido a su escalabilidad y mantenimiento.

3.3.3. SQL vs. NoSQL

SQL –Structured Query Language– se distingue de los otros lenguajes mencionados por ser específicamente un lenguaje de consulta de bases de datos. No tiene un impacto directo en la apariencia o funcionalidad de la página web en el navegador, pero es fundamental para el manejo de datos en el servidor. 

Una base de datos es una colección de tablas que almacenan datos relacionados entre sí, como por ejemplo una cadena de librerías:

Y este sería el aspecto de una de las tablas anteriores -LIBRO-, ya con datos concretos:

Teniendo todo lo anterior, SQL permite realizar operaciones como insertar, actualizar, borrar y recuperar datos de una base de datos, lo cual es tremendamente importante para sitios web dinámicos que requieren interacciones con datos persistentes -datos guardados en bases de datos-.

Aunque SQL es el método más usado para realizar las operaciones descritas, no es la única tecnología disponible. La principal alternativa son aquellas denominadas NoSQL.

NoSQL se refiere a una amplia categoría de sistemas de gestión de bases de datos que difieren del modelo relacional tradicional. No están construidos principalmente alrededor de tablas, y muchos no usan SQL para la manipulación de datos. Las bases de datos NoSQL se diseñaron para mejorar la escalabilidad, el rendimiento y la flexibilidad en comparación con las bases de datos relacionales tradicionales. 

Algunos de los lenguajes y sistemas de consulta de bases de datos NoSQL más populares son MongoDB, Neo4j o CouchDB.

La elección entre SQL y sus alternativas depende de varios factores, como el tipo de datos, la escala, la complejidad de las consultas, la consistencia de los datos requerida y el ecosistema tecnológico existente. Mientras que SQL sigue siendo fundamental para muchas aplicaciones, estas alternativas ofrecen soluciones especializadas para necesidades de almacenamiento y procesamiento de datos que van más allá de las capacidades de las bases de datos relacionales tradicionales.

3.4. Tipos de animación web

Entendiendo la animación web como una forma de dar vida a las páginas de Internet, vamos a ver los tipos de animación web más comunes y cómo cada uno puede enriquecer la experiencia del usuario. 

Estas animaciones pueden variar en complejidad, desde efectos sutiles que mejoran la interfaz de usuario hasta experiencias interactivas completas que capturan la imaginación del visitante.

3.4.1. Animaciones CSS

Las animaciones CSS son potentes herramientas para diseñadores web que desean implementar movimientos sutiles o transiciones en sus páginas sin recargar la página o depender de scripts externos.

• Transiciones CSS: permiten a los elementos cambiar de estado con una animación suave. Por ejemplo, cambiar el color de fondo de un botón al pasar el ratón por encima. Son fáciles de implementar y pueden mejorar significativamente la experiencia de usuario al hacer que la interfaz sea más reactiva y dinámica.
• Animaciones CSS con keyframes: ofrecen control total sobre el ciclo de animación, permitiendo definir varios estados y cómo el elemento debe animarse entre ellos. Esto se puede usar para crear efectos como elementos que «entran» o «salen» de la vista, giran, se expanden o se contraen.

3.4.2. Animaciones basadas en JavaScript

JavaScript abre un mundo de posibilidades para animaciones complejas e interactivas, superando a menudo las limitaciones de las animaciones CSS en términos de control y flexibilidad.

• Manipulación directa del DOM: JavaScript puede cambiar cualquier aspecto de los elementos de la página en tiempo real. Esto significa que puedes crear animaciones basadas en la interacción del usuario, como arrastrar elementos, hacer zoom o cambiar dinámicamente el contenido.
• Bibliotecas de animación: herramientas como Velocity.js, Anime.js, Popmotion o Threejs, ofrecen una sintaxis simplificada para crear animaciones complejas, incluyendo la manipulación de líneas de tiempo, efectos de easing -modificación del ritmo de la animación-, y animaciones en 3D, todo ello con un rendimiento optimizado.

3.4.3. Animaciones SVG

El formato SVG es excepcionalmente poderoso para gráficos vectoriales que necesitan ser escalables sin perder calidad. Esto es particularmente útil para logotipos, iconos y otros gráficos que deben verse bien en una variedad de tamaños de pantalla.

Puedes animar cómo un trazo se dibuja o cómo una forma cambia con el tiempo, lo que es ideal para infografías interactivas o para añadir un toque visual intrigante a los iconos. Los gráficos SVG pueden ser manipulados con CSS y JavaScript, permitiendo una amplia gama de efectos interactivos y animaciones que responden a la acción del usuario.

3.4.4. Animaciones de Lienzo (Canvas)

El elemento <canvas> de HTML5 permite dibujar y animar gráficos rasterizados mediante JavaScript. Es ideal para gráficos intensivos y animaciones que no se pueden lograr fácilmente con CSS o SVG.

Desde juegos en el navegador hasta visualizaciones de datos complejos, <canvas> es una herramienta poderosa para crear experiencias dinámicas en la web.

A diferencia de SVG, que es mejor para gráficos vectoriales, Canvas te da control a nivel de píxel, lo que significa que puedes crear efectos de imagen detallados, como filtros, transformaciones y animaciones de partículas.

3.4.5. Animaciones 3D y WebGL

WebGL es una API de JavaScript para renderizar gráficos 3D y 2D dentro del navegador, permitiendo crear desde simples modelos 3D hasta complejos mundos virtuales.

Las animaciones 3D no son solo visualmente impresionantes, sino que también ofrecen nuevas dimensiones de interactividad, permitiendo a los usuarios explorar entornos, manipular objetos 3D, o incluso participar en juegos directamente desde sus navegadores.

La elección del tipo de animación depende de varios factores, incluyendo los objetivos del proyecto, la audiencia objetivo y los recursos disponibles. Mientras que las animaciones CSS pueden ser suficientes para efectos sutiles, las animaciones JavaScript, SVG, Canvas y WebGL ofrecen capacidades más avanzadas para crear experiencias web ricas e interactivas. Es importante equilibrar el deseo de animaciones llamativas con la necesidad de mantener un rendimiento web óptimo y una buena usabilidad.

3.5. Prácticas de desarrollo web

Como alumnos de 2º ESO todavía no tenemos conocimientos de lenguajes de programación textuales, por tanto, vamos a utilizar herramientas «no-code», que nos permiten crear sitios web sin necesidad de programar nada.

3.5.1. Google Sites

Esta herramienta, integrada en el conjunto de herramientas de Google que forman parte de nuestro correo corporativo, nos permite ir seleccionando componentes sencillos y ajustándolos para que queden como queremos.

A continuación, tienes un vídeo donde te explico cómo acceder a la herramienta y cómo realizar tu primer sitio web.

3.5.2. Crear animaciones para la web

Crear una animación para insertarla en un sitio web no es una tarea sencilla cuando no se tienen conocimientos medios y avanzados de programación, sin embargo, existen multitud de herramientas que nos facilitan esta tarea sin necesidad de escribir código.

Un buen ejemplo de este tipo de aplicaciones es SVGator que nos permite crear animaciones de gráficos vectoriales simplemente haciendo unos cuantos clics de ratón. Es importante que entiendas los conceptos básicos del mundo de la animación como componente, fotograma clave («keyframe»), línea de tiempo y transformaciones.

En este vídeo que tienes a continuación se explica cómo acceder y registrarse en la aplicación, además de dos ejemplos sencillos para que te vayas familiarizando con la interfaz del programa.

3.5.3. Webflow

Esta herramienta va un poco más allá y es el equivalente web a Thunkable -que la usamos para desarrollar aplicaciones móviles-.

Así que si te has quedado con ganas de profundizar un poco más en el desarrollo de aplicaciones web, este apartado es para tí.

Webflow nos permitirá entender conceptos prácticos del desarrollo web sin que sea necesario aprender desde cero ningún lenguaje de programación.

Realmente estamos aprendiendo multitud de conceptos de programación, pero sin escribir código directamente.

Webflow es una plataforma de diseño web que elimina la necesidad de escribir código manualmente, ofreciendo una interfaz visual intuitiva que transforma la manera en que se aborda la creación de sitios web.

Una vez hechas las presentaciones, aquí tienes una lista de enlaces que debes seguir por orden para ir aprendiendo poco a poco a realizar tareas de desarrollo web cada vez más complejas:

• Cómo registrarse en Webflow.
• La interfaz de usuario de Webflow.
• El modelo de cajas.
• El selector de estilos.

Si quieres seguir avanzando con esta herramienta, continúa por aquí.