Currículo: esta unidad desarrolla todos los saberes básicos del Bloque E – Desarrollo web correspondiente a 1ºESO. Además, se evalúan los criterios que puedes encontrar al final de esta página.
Tabla de contenidos
- 3.1. Introducción a las páginas web
- 3.2. Introducción a los servidores web
- 3.3. Tipos de lenguajes para la edición de páginas web
- 3.4. Introducción a la animación web
- 3.5. Prácticas de desarrollo web
Adentrarse en el mundo del desarrollo web es como abrir una puerta a la creatividad en el universo digital. Las páginas web son más que simples textos e imágenes en una pantalla; son espacios interactivos que nos informan, nos conectan con otros y nos entretienen.
Nuestro camino comenzará entendiendo los servidores web que nos revelan cómo estas páginas están disponibles día y noche, al alcance de todos.
El estudio de la animación web nos lleva un paso más allá, permitiéndonos añadir movimiento y vida a nuestras creaciones. No se trata solo de técnicas y códigos; es sobre cómo hacer que las páginas web sean funcionales al mismo tiempo que atractivas para quienes las visitan.
Más que aprender a programar, estamos aprendiendo a comunicar a través del lenguaje universal del diseño web.
3.1. Introducción a las páginas web
Una página web es, por simplificarlo al máximo, un documento digital. Este documento puede contener texto, imágenes, videos y enlaces a otras páginas web, creando así una red de información.
Son esos enlaces en los que reside la auténtica potencia de este sistema, ya que desde un sólo documento, saltando de enlace en enlace, podemos acceder a todo el conocimiento universal.
3.1.1. ¿Cómo accedemos a las páginas web?
Para ver una página web, utilizamos un programa llamado navegador web (como Google Chrome, Firefox o Safari).
Introducimos una dirección web (también conocida como URL) en el navegador, y este actúa como nuestro guía personal, llevándonos directamente a las páginas que queremos ver.
3.1.2. ¿De qué están hechas las páginas web?
Las páginas web están escritas en un lenguaje especial llamado HTML –HyperText Markup Language–, que el navegador interpreta para mostrarnos la página de una manera estructurada y visualmente atractiva.
El HTML permite a los creadores de páginas web organizar la información en secciones, como si estuvieran maquetando las páginas de un libro, usando títulos, párrafos, listas, imágenes, etc.
Si quieres aprender más sobre este lenguaje, te recomiendo estos libros.
3.1.3. ¿Por qué son importantes las páginas web?
Las páginas web son la columna vertebral de la World Wide Web -WWW-, un sistema de documentos interconectados accesibles a través de internet. Nos permiten acceder a una cantidad casi infinita de información, servicios y entretenimiento.
Ya sea para leer noticias, ver videos, comprar productos, aprender nuevas habilidades o asistir a clases virtuales, las páginas web hacen posible gran parte de nuestra vida diaria digital.
En la actualidad, prácticamente la totalidad de la economía mundial depende en gran medida de Internet y las páginas web que la habitan: desde estos apuntes que estás leyendo, hasta los resultados de tu análisis de sangre pasando por el mecanismo que controla los semáforos, todo depende de Internet.
3.2. Introducción a los servidores web
Para lograr comprender cómo una página web es capaz de estar accesible por todo el mundo durante 24h todos los días del año, es necesario conocer qué son los servidores web.
3.2.1. ¿Qué es un servidor web?
Ya hemos visto que internet es como una enorme biblioteca mundial, pero en lugar de libros, almacena páginas web, es decir, documentos digitales. Un servidor web actúa como un estante en esa biblioteca, permitiendo que se guarden las páginas para que cualquier persona pueda acceder a ellas.
Físicamente, un servidor web no es más que un ordenador especializado, permanentemente encendido, que almacena, envía y recibe páginas web o datos a través de internet.
Cuando escribes una dirección web (URL) en tu navegador o haces clic en un enlace, en realidad estás solicitando a un servidor web que te envíe una copia de la página web que deseas ver. El servidor procesa esta solicitud y, si todo está en orden, te envía los datos necesarios para que el navegador pueda mostrarte la página.
Este es su aspecto y los elementos que lo forman, además así puedes hacerte una idea del precio.
3.2.2. ¿Cómo funciona un servidor web?
El funcionamiento de un servidor web se puede simplificar en los siguientes pasos:
- Solicitud: todo comienza cuando haces una petición, normalmente introduciendo una URL en tu navegador o haciendo clic en un enlace.
- Procesamiento de la solicitud: el servidor web recibe esta solicitud y busca la página web que has pedido.
- Respuesta: si la página existe y está disponible, el servidor la envía de vuelta a tu navegador.
- Visualización: tu navegador recibe los datos de la página web (texto, imágenes, etc.) y los procesa para mostrarte la página tal y como la conocemos.
A este esquema de comunicación se le llama Arquitectura Cliente-Servidor, de manera que los clientes realizan peticiones y los servidores las atienden ofreciendo una respuesta.
3.2.3. Tipos de contenidos que manejan
Los servidores web no solo envían páginas web estáticas (texto e imágenes que no cambian a menos que el desarrollador actualice la página) sino que también pueden gestionar contenido dinámico. Esto significa que pueden personalizar las páginas web para diferentes usuarios, mostrar contenido actualizado o incluso permitir a los usuarios interactuar con ellas, como en el caso de tiendas online, redes sociales o foros.
¿Has probado a realizar una misma búsqueda en tu casa y en el instituto? ¿Cómo es posible que buscando lo mismo, no aparezcan los mismos resultados?
3.2.4. ¿Son importantes?
Los servidores web son una pieza fundamental de internet porque sin ellos, no podríamos acceder a las páginas web. Cada vez que aprendes algo nuevo en Internet, haces una compra online, o te conectas con amigos en redes sociales, estás interactuando con uno o más servidores web.
Además, los servidores web han evolucionado para ofrecer no solo páginas web sino también servicios online, aplicaciones y mucho más, ampliando las capacidades de lo que podemos hacer actualmente en internet.
3.3. Tipos de lenguajes para la edición de páginas web
Si rescatas la definición que dimos inicialmente de qué es una página web, verás que se trataba de un documento que podemos ver en internet. Y como cualquier otro documento, están escritos en un idioma que entiendan los lectores. En el caso de las páginas web, es el navegador quien debe entender ese lenguaje que explica cómo está construido el documento.
Los lenguajes de edición de páginas web son las herramientas que nos permiten crear y modificar ese documento, añadiendo texto, imágenes, enlaces y mucho más.
Por tanto, estos lenguajes son el medio por el cual los programadores nos comunicamos con los ordenadores para diseñar sitios web que resuelvan las necesidades de los usuarios de Internet.
Hay varios lenguajes que se utilizan en la creación de páginas web, cada uno con su propósito específico. Aquí te presento los más importantes:
- HTML –HyperText Markup Language–: es el esqueleto de cualquier página web. Se utiliza para crear y estructurar el contenido en la web. Con HTML, se define la estructura básica de una página, incluyendo párrafos, encabezados, listas, enlaces, imágenes y muchos otros elementos. Es el punto de partida para cualquier sitio web. A través de etiquetas, HTML permite organizar el texto y los elementos multimedia en una estructura coherente.
- CSS –Cascading Style Sheets–: se utiliza para controlar la presentación, el diseño, y el «layout» de las páginas web. Si HTML es el esqueleto, CSS sería la ropa. Permite añadir estilos a la página, como colores, fuentes, espaciados y posicionamiento de los elementos, sin afectar a la estructura creada con HTML. Se utiliza para hacer que las páginas web sean visualmente atractivas y para garantizar que se vea todo bien en diferentes dispositivos con distintos tamaños de pantalla.
Formulario sin CSS
Formulario con CSS
- JavaScript: es un lenguaje de programación que se utiliza para añadir interactividad a las páginas web. Con JavaScript, las páginas pueden responder a acciones del usuario, como clics del ratón, entradas del teclado y otros eventos, haciendo posible la creación de contenido dinámico. Es fundamental para el desarrollo de aplicaciones web complejas. Si te interesa aprender este lenguaje, puedes empezar por aquí.
- PHP –Hypertext Preprocessor–: es un lenguaje de programación del lado del servidor utilizado para desarrollar contenido web dinámico. Permite a las páginas web interactuar con bases de datos, recoger datos de formularios y realizar otras tareas en el servidor antes de enviar el contenido final al navegador del usuario. Se utiliza comúnmente en el desarrollo de sistemas de gestión de contenido (como WordPress), foros y aplicaciones web que necesitan almacenar y recuperar información de una base de datos.
- SQL –Structured Query Language–: aunque no es un lenguaje de programación específicamente para la creación de páginas web, SQL es indispensable para consultar bases de datos en aplicaciones web. Permite a los desarrolladores recuperar, insertar, actualizar y borrar datos de bases de datos, lo que es fundamental para sitios web dinámicos que manejan grandes cantidades de datos.
Estos lenguajes, en conjunto, forman la base de lo que conocemos como desarrollo web. En pocas palabras: HTML forma la estructura, CSS decora la apariencia estética, JavaScript añade interactividad y PHP y SQL se encargan del manejo de datos en el lado servidor.
3.4. Introducción a la animación web
La animación web se refiere a la técnica de dar vida a las páginas web a través del movimiento.
Cuando estás leyendo un cómic, las imágenes son estáticas, pero puedes imaginar la acción en tu mente. Ahora, piensa en una película de animación, donde los personajes se mueven, expresan emociones y la historia se desarrolla delante de tus ojos. La animación web es como llevar ese dinamismo de las películas de animación a las páginas de Internet, haciendo que elementos como textos, imágenes y fondos se muevan o cambien de forma, ofreciendo una experiencia más interactiva.
3.4.1. ¿Qué es la animación web?
En el contexto de las páginas web, la animación puede variar desde simples efectos como un botón que cambia de color cuando pasas el cursor sobre él, hasta complejas secuencias de acción que se activan al desplazarse por la página o interactuar de alguna manera con el sitio. Estas animaciones pueden servir para muchos propósitos: mejorar la estética de la página, dirigir la atención del usuario hacia elementos específicos, explicar visualmente conceptos complicados o simplemente para entretener.
3.4.2. ¿Cómo se crea la animación web?
La animación web puede lograrse mediante varias técnicas, siendo las más comunes el uso de:
- CSS: este lenguaje de estilos, que ya conocemos por definir la apariencia visual de las páginas web, también permite crear animaciones simples. Por ejemplo, puedes hacer que un elemento se desvanezca, cambie de tamaño o gire utilizando solo CSS. Veamos un ejemplo, realizando una pequeña animación de un botón, comparado con otro sin animar:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón Animado</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<button id="botonAnimado">Pulsa aquí</button>
<button>Pulsa aquí</button>
</body>
</html>#botonAnimado {
transition: all 0.5s ease;
cursor: pointer;
border: none;
padding: 10px 20px;
background-color: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
outline: none;
}
#botonAnimado:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
#botonAnimado:active { animation: zoomInOut 0.5s ease forwards; }
@keyframes zoomInOut {
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}- JavaScript: para animaciones más complejas y controladas, JavaScript es el lenguaje preferido por los programadores más avanzados. Este lenguaje de programación puede interactuar con los elementos HTML de la página para crear animaciones interactivas. Es particularmente potente porque permite animaciones basadas en la lógica y la interacción del usuario, como animaciones que se disparan al hacer clic en un botón o al llegar a una cierta sección de la página. Veamos un ejemplo, realizando una pequeña animación de un enlace:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Enlace Animado</title>
<style>
#enlaceAnimado {
display: inline-block;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<a href="#" id="enlaceAnimado">Enlace animado</a>
<script>
document.getElementById('enlaceAnimado').addEventListener('mouseover', function() {
this.style.transform = "rotate(180deg)";
});
document.getElementById('enlaceAnimado').addEventListener('mouseout', function() {
this.style.transform = "rotate(0deg)";
});
</script>
</body>
</html>- Herramientas específicas: existen numerosas herramientas de distintos lenguajes diseñados específicamente para facilitar la creación de animaciones web, como Adobe After Effects, LottieFiles o Webflow. Lo interesante de estas aplicaciones específicas es que nos permiten realizar animaciones sin necesidad de conocer las particularidades de ningún lenguaje de programación. Como desventaja, debemos tener en cuenta que tenemos menos control sobre elementos concretos de nuestra página. La elección de cada una de estas herramientas es muy dependiente del tipo de animación y proyecto en el que estemos trabajando.
Si quieres probar los fragmentos de código que han aparecido 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.4.3. Usos recomendados de las animaciones web
Las animaciones hacen que un sitio web se vea más atractivo, al mismo tiempo que pueden mejorar la experiencia del usuario. Animaciones bien pensadas pueden guiar a los visitantes a través de un sitio, destacar acciones importantes que pueden tomar, y hacer que la interacción con el sitio sea más intuitiva.
Sin embargo, es importante recordar que las animaciones tienen un propósito, debes usarlas con moderación. Demasiada animación o animaciones mal implementadas pueden distraer al usuario, confundirlo o incluso irritarlo, lo cual podría perjudicar la experiencia general en lugar de mejorarla.
3.5. Prácticas de desarrollo web
Como alumnos de 1º 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. 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.