Currículo: esta unidad desarrolla todos los saberes básicos del Bloque E – Desarrollo web correspondiente a 3ºESO. Además, se evalúan los criterios que puedes encontrar al final de esta página.
Tabla de contenidos
- 3.1. Análisis de la estructura de las páginas web
- 3.2. Tipos de servidores web
- 3.3. Introducción a HTML y CSS
- 3.4. Formatos y herramientas de animación web
En esta era digital, donde la presencia en la red se ha convertido en una extensión de nuestra propia identidad, aprender desarrollo web es una de esas habilidades que serán imprescindibles para complementar nuestra formación básica.
Este tema nos permitirá comprender cómo se construyen las páginas que visitamos a diario, y nos dará la capacidad de crear espacios virtuales propios que reflejen nuestras ideas.
A través del estudio del desarrollo web, aprenderemos a analizar el diseño de sitios web, entenderemos cómo la interactividad mejora la experiencia de usuario y descubriremos las herramientas que hacen posible la maravilla que es internet.
Además, también tendremos en cuenta cómo nuestras creaciones pueden mejorar la accesibilidad y la usabilidad, haciendo de la web un lugar más inclusivo.
3.1. Análisis de la estructura de las páginas web
Al igual que podríamos estudiar la estructura de un libro para entender cómo el autor organiza sus ideas, también podemos analizar las páginas web para descubrir cómo se organizan y se presentan los contenidos digitales.
Realizar esta tarea de análisis nos ayuda a entender cómo se construyen las páginas, para posteriormente crear las nuestras propias.
3.1.1. La organización del contenido
La primera clave para analizar una página web es observar cómo está organizado su contenido. Aunque no veamos el código HTML subyacente, podemos notar cómo se utilizan los encabezados para darle estructura al contenido, cómo se dividen las secciones para agrupar información relacionada y cómo se destacan ciertos elementos, como los enlaces, para guiar al usuario a través de la página.
El año pasado ya identificamos los elementos clave que forman parte de la estructura mayoritaria de las páginas web, por lo que nos centraremos en observar otros aspectos avanzados, como la disposición espacial, la interactividad, la coherencia visual y la accesibilidad.
3.1.2. Jerarquía visual
Llamamos jerarquía visual a la forma en que se destacan los elementos más importantes -usando por ejemplo llamadas a la acción o encabezados principales- a través del tamaño, color y posicionamiento de los elementos. Una jerarquía visual clara facilita al usuario entender rápidamente cuál es la información más importante.
A través de la disposición y estética de los elementos, la página es capaz de guiar la vista del usuario a través del contenido. Esto incluye el uso de espacios en blanco, líneas y bloques de color para dirigir la atención hacia elementos importantes o separar secciones de contenido.
3.1.3. Interactividad
Debemos, también, identificar cómo los elementos -botones, enlaces, formularios y otros widgets- invitan a la interacción, y cómo esta interacción afecta la experiencia del usuario.
Los widgets son como pequeñas aplicaciones interactivas integradas dentro de una interfaz más grande, diseñados para mejorar la experiencia del usuario ofreciéndole formas rápidas de interactuar con la aplicación web.
Por ejemplo: campos de búsqueda, calendarios, carrusel de imágenes, reproductores de video/audio, feed de redes sociales, mapas, botones de suscripción, etc. ¿Los botones cambian de apariencia al pasar el ratón por encima? ¿Hay elementos que aparecen o desaparecen en respuesta a acciones del usuario?
Observa con mirada curiosa cómo la página web responde a las interacciones. Esto puede incluir transiciones suaves, animaciones o cambios en el contenido que indican al usuario que su acción ha tenido efecto.
A primera vista todo sucede de manera agradable, pero si te fijas en los detalles, verás comportamientos en los que nunca te habías percatado, y que son importantes para que la experiencia de uso general sea armoniosa..
3.1.4. Consistencia
La consistencia hace referencia a la coherencia y uniformidad en el uso de elementos visuales. El uso de colores, tipografías, y otros estilos consistentes a lo largo de la página web ayuda a crear una experiencia de usuario profesional.
Con la experiencia empezarás a detectar patrones recurrentes en el diseño que ayudan a estandarizar la experiencia del usuario, como la disposición de los menús de navegación, la estructura de los pies de página y la localización de los formularios.
3.1.5. Accesibilidad
No todos los usuarios somos iguales, ni tenemos todos nuestros sentidos en perfecto estado. Hay usuarios que no ven bien, no pueden escuchar o tienen movilidad reducida. En todos los casos, nuestro trabajo como desarrolladores web es proporcionar una experiencia satisfactoria, y esto se consigue aplicando técnicas de accesibilidad.
Es necesario asegurarse de que los contrastes de color y el tamaño de la tipografía hacen que el texto sea fácil de leer en diferentes dispositivos y para usuarios con distintas necesidades visuales.
Comprobar si la página web puede ser navegada únicamente con el teclado, lo cual es vital para usuarios con limitaciones de movilidad o que usan lectores de pantalla, para aquellos que no tienen la posibilidad de mover un ratón o pulsar una tecla.
La mera estructura de la página puede aportar semántica del contenido para mejorar la accesibilidad. Estas prácticas ayudan a los lectores de pantalla a interpretar el contenido de la página, facilitando el acceso a usuarios con diversidad de capacidades.
3.2. Tipos de servidores web
Ahora que tenemos una idea clara sobre qué es un servidor web y cómo funciona desde una perspectiva general, vamos a profundizar en los diferentes tipos de servidores web.
Esta clasificación nos permitirá comprender mejor la diversidad en el funcionamiento de internet y cómo distintos servidores cumplen con necesidades específicas de los usuarios.
A continuación, exploramos algunas de las tipologías más comunes.
3.2.1. Por su software
Comenzamos por la clasificación en función del tipo de aplicación que gestiona el servidor. Los tres más importantes son:
- Apache: es uno de los servidores web más populares y versátiles. Apache es software libre y de código abierto, lo que significa que cualquier persona puede modificarlo según sus necesidades. Se destaca por su robustez, seguridad y flexibilidad.
- Nginx: pronunciado como «Engine-X», este servidor web es conocido por su alto rendimiento, estabilidad, configuración simple y bajo consumo de recursos. Nginx es particularmente eficaz en el manejo de un gran número de conexiones simultáneas, gracias a su arquitectura orientada a eventos.
- IIS –Internet Information Services-: es el servidor web de Microsoft, diseñado para trabajar estrechamente con el ecosistema Windows. IIS es una opción común para aplicaciones que requieren integración con herramientas de Microsoft.
3.2.2. Por el tipo de contenido que gestionan
Según el tipo de contenido que gestionan, nos encontramos con dos tipos de servidores muy diferenciados:
- Servidores de páginas estáticas: sirven contenido que no cambia, independientemente del usuario que acceda a la página web. Las páginas estáticas son archivos HTML que se almacenan en el servidor tal y como se van a mostrar en el navegador.
- Servidores de aplicaciones web: estos servidores son capaces de entregar contenido dinámico. Pueden ejecutar programas en el lado del servidor para generar páginas web personalizadas en tiempo real antes de enviarlas al usuario. Ejemplos de lenguajes utilizados en estos servidores incluyen PHP, Python y Java.
3.2.3. Por su propósito
Si miramos la necesidad que cubren, tenemos una muy alta variabilidad, que podemos simplificar en las siguientes:
- Servidores de desarrollo: son utilizados por los desarrolladores web durante la fase de creación y prueba de sitios web. Estos servidores suelen estar configurados para facilitar la depuración y el testing.
- Servidores de producción: están optimizados para entregar contenido a los usuarios finales en internet. Estos servidores priorizan la seguridad, estabilidad y rendimiento para manejar tráfico real.
3.2.4. Servidores especializados
Todo lo que hemos visto sobre servidores hasta aquí, es aplicable a un tipo de servidor muy concreto: el servidor web. Sin embargo, existen muchos otros tipos de servidores que desarrollan una labor tremendamente importante en una variedad de situaciones. Entre otros, tenemos:
- Servidores de correo: permiten el envío y recepción de correos electrónicos entre usuarios a través de internet, facilitando la comunicación personal.
- Servidores de aplicaciones: proporcionan un entorno para ejecutar aplicaciones específicas del lado del servidor, permitiendo la gestión centralizada de operaciones empresariales.
- Servidores de bases de datos: almacenan, organizan y proporcionan acceso a grandes cantidades de datos, fundamentales para aplicaciones que requieren el almacenamiento persistente de datos.
- Servidores DNS (Sistema de Nombres de Dominio): traducen los nombres de dominio fáciles de recordar en direcciones IP numéricas que los dispositivos usan para identificarse entre sí en la red.
- Servidores Proxy: actúan como intermediarios entre los usuarios e internet, mejorando la seguridad y el rendimiento mediante el filtrado de contenido y el almacenamiento en caché de páginas web.
- Servidores DHCP (Protocolo de Configuración Dinámica de Host): asignan automáticamente direcciones IP y otros parámetros de red a los dispositivos dentro de una red, simplificando la administración de la misma.
- Servidores de archivos: centralizan el almacenamiento y la gestión de archivos en una red, facilitando la colaboración entre usuarios.
- Servidores de gaming: proporcionan una plataforma para que los videojuegos multijugador se ejecuten en red, gestionando y sincronizando las interacciones de los jugadores en tiempo real.
- Servidores de impresión: gestionan las solicitudes de impresión en una red, permitiendo a múltiples usuarios compartir una o varias impresoras, optimizando así los recursos de impresión.
Cada tipo de servidor web tiene sus propias ventajas y se elige en función de las necesidades específicas de cada proyecto. La elección entre un servidor u otro dependerá de varios factores, incluyendo el tráfico esperado, el tipo de contenido del sitio web y las preferencias tecnológicas del equipo de desarrollo. Conocer esta tipología nos ayuda a tomar decisiones informadas al planificar el despliegue de aplicaciones en internet.
3.3. Introducción a HTML y CSS
En el mundo del desarrollo web, HTML –HyperText Markup Language– es esa estructura fundamental sobre la que se construyen las páginas. Es el lenguaje que se utiliza para crear y organizar el contenido en la web, desde simples párrafos hasta complejas galerías de imágenes, pasando por formularios de entrada de datos.
Ahora, una vez que la página tiene una estructura sólida, querrás darle estilo y personalidad, ¿verdad? Aquí es donde entra en juego CSS –Cascading Style Sheets–. Si HTML construye la estructura de tu sitio web, CSS se encarga de su apariencia: colores, tipos de letra, espacios entre elementos y muchas otras características. CSS te permite transformar los documentos HTML básicos en páginas visualmente atractivas.
Para poder probar tus instrucciones HTML, CSS e incluso JavaScript sin salir del navegador, te recomiendo que te registres en CodePen.io y conseguirás aprender mucho más rápido, sin necesidad de tener que crear archivos, moverlos ni actualizarlos constantemente.
3.3.1. Código HTML
HTML utiliza lo que llamamos «etiquetas» para construir elementos que definen las diferentes partes del contenido de una página web.
Veamos cómo se forman estos elementos:
Por ejemplo, si quieres crear un encabezado, usarías el elemento h1; para un párrafo, p. Estos elementos le dicen al navegador cómo debe estructurar la página web que estás creando.
Piensa en los elementos HTML como los diferentes tipos de bloques de construcción que utilizas para construir la estructura de tu página: algunos bloques son para textos, otros para imágenes y otros para enlaces a otras páginas.
Todos los documentos HTML comienzan con la etiqueta <!DOCTYPE html> para indicar al navegador el tipo de documento que se trata.
El resto de la página se añade dentro de las etiquetas <html> y </html>.
Veamos el esqueleto básico de una página web:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<!-- Aquí va todo el contenido visible de la web -->
</body>
</html>Aquí encontramos dos elementos principales:
- Cabecera: delimitada por las etiquetas <head> y </head>, contiene información sobre el documento -los metadatos-, como el título de la página -que aparecerá en la pestaña del navegador-.
- Cuerpo: delimitado por las etiquetas <body> y </body>, contiene todos los elementos visibles que se muestran en la web.
Es importante tabular correctamente cada elemento HTML para que sea más sencillo leer el código, lo que mejora el mantenimiento y previene la introducción de errores de programación.
Veamos algunos de los elementos más importantes que podemos incluir en el elemento body.
- Encabezados: se escriben con los elementos h1, h2, …, h6. El número permite definir la importancia del texto, de manera que cuanto mayor es el número, más importante es ese encabezado y, en consecuencia, más grande aparece.
<body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body>
- Párrafos: se definen con el elemento p. Diferenciarás un párrafo de un texto normal, porque en el navegador aparecerán espacios antes y después de él.
<body> <p>Este es un primer párrafo con texto de relleno Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis posuere dignissim. Mauris pellentesque hendrerit tellus tincidunt suscipit. Aenean pellentesque mi id erat viverra rhoncus. Quisque felis est, pellentesque vitae tellus sed, viverra vestibulum augue. Integer vehicula nisl quis mattis pretium. Phasellus in ligula in nunc auctor efficitur vitae sed sem. Donec eu purus varius, molestie odio ac, euismod nunc. Donec augue erat, porttitor in facilisis ut, aliquam et diam. Aliquam erat volutpat. Pellentesque porttitor sapien et elit commodo, quis posuere sapien tempor. Nam ultrices, ligula sit amet iaculis rutrum, tortor ante varius sapien, eget laoreet neque erat id augue.</p> <p>Este es el segundo párrafo con más texto de relleno Phasellus in ligula in nunc auctor efficitur vitae sed sem. Donec eu purus varius, molestie odio ac, euismod nunc. Donec augue erat, porttitor in facilisis ut, aliquam et diam. </p> </body>
- Enlaces: nos permiten saltar a otras partes del documento o directamente a otras páginas web. Usa el atributo href para que indiquemos la página de destino.
<body> <a href="https://lopegonzalez.es/">Ir a los apuntes</a> </body>
- Imágenes: con este elemento podremos insertar imágenes en nuestra página web, del mismo modo que lo hacemos con los editores de texto como Google Docs. En el atributo src colocamos la dirección de la imagen y en alt la descripción de la imagen.
<img src="https://shorturl.at/gruxX"
alt="Dragón con las alas extendidas arrasando una población"
title="Significado de ¡Dracarys!"
width="400">- Vídeos: también podemos insertar vídeos que tengamos subidos a nuestro servidor, en nuestras páginas web.
<video width="320" height="240" controls autoplay loop muted preload="auto" poster="caratula.jpg">
<source src="tuvideo.mp4" type="video/mp4">
<source src="tuvideo.ogg" type="video/ogg">
Tu navegador no soporta la etiqueta video.
</video>- Recursos de una página web externa: se trata de una interesante opción que tenemos en nuestra mano. Podemos insertar otras páginas, utilidades o herramientas de terceros en nuestra propia página web. Por ejemplo, con el siguiente código conseguimos insertar un vídeo de Youtube manteniendo su look&feel y las funcionalidades integradas que ofrece el reproductor de Youtube.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/QL5HYaVsJnw?si=1etPocHaKYbv5URy"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>- Comentarios: los usamos sólo para mostrar información de programación y para que lo puedan leer aquellas personas que se encarguen de modificar la web más adelante. Esos mensajes no tendrán ninguna repercusión visual en el navegador, pero sí que son visibles si un usuario inspecciona el código.
<body> <a href="https://lopegonzalez.es/" target="_blank">Ir a los apuntes</a> <!-- El atributo target="_blank" hace que el enlace se abra en otra pestaña --> </body>
Además, para poder estructurar todo el contenido que se encuentra dentro del elemento body y dotarlo de más significado estructural, HTML5 incorpora una serie de etiquetas semánticas. Estas son las más importantes:
- <header>: utiliza para definir la cabecera de una página o de una sección dentro de ella. No solo es el lugar donde usualmente colocamos el título principal, el logotipo o los elementos iniciales que queremos que los visitantes vean primero, sino que también puede incluir herramientas de búsqueda, y se percibe como la «cara» de la página, dándole la bienvenida a los visitantes.
- <nav>: está destinada a encerrar la sección de navegación principal de la página. Esto incluye enlaces a otras páginas o secciones de la misma página, usualmente representados por un menú. Utilizarla ayuda a los usuarios a orientarse y moverse a través de tu sitio de manera intuitiva, proporcionando accesos directos que son fácilmente identificables.
- <section>: se usa para segmentar el contenido en diferentes secciones que tienen un tema relacionado o están organizadas bajo un título común. Es útil para dividir grandes bloques de información en partes más manejables, lo que hace que el contenido sea más digerible y fácil de entender para los usuarios. Cada una de estas secciones suele tener su propio encabezado.
- <footer>: se emplea para el pie de página. Aquí es donde ponemos información que queremos que esté disponible en todo momento, como datos de contacto, derechos de autor, enlaces a políticas de privacidad o incluso pequeños menús que complementan la navegación principal. Funciona como el cierre de la página, asegurando que el usuario tenga fácil acceso a elementos frecuentemente usados sin necesidad de buscar en otra parte.
3.3.2. Código CSS
Una vez que tienes la estructura básica con HTML, es hora de hacerla bonita con CSS. Con CSS, puedes especificar exactamente cómo quieres que se vean esos bloques de construcción. ¿Quieres que tus encabezados sean azules? ¿Prefieres que tus párrafos tengan una fuente grande y fácil de leer? ¿Necesitas que las imágenes tengan un borde redondeado? Todo esto y mucho más se puede hacer con CSS. Básicamente, le das a cada bloque de construcción las instrucciones específicas sobre cómo debe aparecer en la página web.
¿Cómo funcionan las hojas de estilo?
Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css las propiedades que describen el aspecto que deben tener los diferentes elementos HTML de una página.
Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:
- “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respectivamente.”
- “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”
¿Cómo se añaden estilos a nuestras páginas?
Para añadir estilos a nuestras páginas web debemos crear un archivo .css y enlazarlo dentro de nuestro archivo HTML, así:
p {
color: red;
}<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Primer párrafo que aparecerá coloreado de rojo.</p>
<p>Segundo párrafo que aparecerá coloreado de rojo.</p>
<h3>Encabezado de nivel 3 que no aparecerá coloreado de rojo.</h3>
</body>
</html>Estructura y sintaxis de CSS
El funcionamiento de CSS consiste en definir unas reglas de presentación que se van a aplicar a un número indeterminado de elementos del documento HTML, al que están vinculadas. Por lo tanto, se necesitan dos herramientas básicas para crear y aplicar un estilo:
- SELECTORES: son las herramientas que permiten seleccionar el elemento o elementos sobre los que aplicar las reglas.
- DECLARACIONES: son las indicaciones para asignar, mediante claves propiedad : valor, el aspecto deseado a los elementos determinados por el selector.
Los selectores y las declaraciones se agrupan en reglas.
Esta es la estructura de una regla en CSS:
En el siguiente ejemplo se muestra una regla compuesta por los distintos elementos:
- Selector body. El contenido se aplica a todos los elementos que se encuentren dentro del elemento body en la página HTML.
- Las declaraciones que asignan valor a las propiedades text-align, font-family, background-color y color, que afectarán respectivamente a la alineación del texto, el tipo de letra, el color de fondo y el color del texto que haya en el elemento body y de todos los elementos contenidos en este, siempre que las propiedades sean aplicables a dichos elementos.
body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
background-color: brown;
color: white;
}Prácticamente todos los elementos HTML comparten una serie de propiedades, como por ejemplo las referidas a su tamaño y márgenes -tanto internos como externos-:
- width: el ancho del elemento, expresado en píxeles o porcentaje.
- height: el alto del elemento, expresado en píxeles o porcentaje.
- margin: el margen exterior del elemento -espacio entre el elemento y quien lo contiene- (en el ejemplo aparece en verde).
- padding: el margen interior del elemento -espacio entre el borde del elemento y su contenido- (en el ejemplo aparece en amarillo).
Para la imagen anterior la caja amarilla se escribiría así:
<p> El texto de un párafo cualquiera </p>
p {
margin: 50px;
padding: 40px;
text-align: center;
background-color: yellow;
border: 5px solid #555;
}Veamos algunas de las propiedades CSS más usadas para decorar texto:
- color: establece el color del texto. Podemos especificar un color usando su nombre en inglés –aquí los tienes todos-, o indicarlo por medio de su valor hexadecimal RGB #RRGGBB.
- font-size: establece el tamaño de la letra. Podemos indicarlo usando como unidad de medida el píxel y un porcentaje, entre otros.
- font-family: para indicar el tipo de letra que queremos aplicar, como «Courier New» o «Arial».
- line-height: podemos modificar el alto de la línea de texto. Podemos indicarlo usando como unidad de medida el píxel y un porcentaje, entre otros.
- text-align: nos permite establecer la forma en la que se alineará el texto dentro de un párrafo. Sus valores más habituales son left, right, center y justify.
- letter-spacing: indica la separación entre letras, en píxeles.
- word-spacing: indica la separación entre palabras, en píxeles.
Por ejemplo:
<p>Un párrafo cualquiera con varias líneas de texto que nos permitan observar todas las propiedades que se están aplicando por medio de CSS.</p>
p {
color: blue;
font-size: 25px;
font-family: Arial;
line-height: 30px;
text-align: right;
letter-spacing: 5px;
word-spacing: 15px;
}Resultado:
Otro conjunto de propiedades muy usadas son las que se encargan de la apariencia de los fondos de los elementos -el «background»–.
Veamos las más comunes:
- background-color: establece el color de fondo del elemento.
- background-image: podemos indicar que el fondo, en vez de estar coloreado, muestre una imagen. Su valor debe ser url(‘http://….’) y dentro la URL donde se encuentra la imagen.
- background-size: establece el tamaño de la imagen de fondo. Podemos usar dos valores en píxeles para indicar ancho y alto, también un porcentaje, y las palabras contain -coloca la imagen completa- y cover -rellena todo el espacio disponible-.
- background-repeat: si la imagen que hemos establecido como fondo es más pequeña que el espacio disponible, nos permite indicar qué queremos que ocurra con el espacio restante. Con repeat-x la imagen se repetirá horizontalmente y con repeat-y se repetirá verticalmente. Para aplicar las dos a la vez, podemos escribir repeat-xy.
- background-position: para colocar la imagen alineada a algunos de los márgenes, por ejemplo, top, bottom, right o left.
Siguiendo con el ejemplo HTML anterior, podemos usar este CSS:
p {
font-size: 40px;
background-color: lightblue;
background-image: url("https://www.iconpacks.net/icons/2/free-check-icon-3278-thumb.png");
background-size: 30px 30px;
background-repeat: repeat-x;
background-position: bottom;
}Y obtendríamos este resultado:
Para finalizar esta pequeña introducción, es necesario que aprendamos mínimamente a organizar los contenidos en la página.
Existen muchas formas diferentes de hacerlo, en las que intervienen cantidad de tecnologías complementarias que nos facilitan esta labor. Sin embargo, es importante que entendamos su funcionamiento usando las propiedades nativas del lenguaje CSS.
CSS tiene un sistema de cuadrícula denominado grid, que nos permite organizar los elementos de la página en forma de filas y columnas.
Veamos las propiedades que tenemos a nuestra disposición para trabajar con ellas:
- display:grid: indica que se va a realizar una cuadricula.
- grid-template-columns: especifica el número de columnas que se van a crear.
Por ejemplo:
<body> <div>Primera caja</div> <div>Segunda caja</div> <div>Tercera caja</div> </body>
div {
background-color: red;
color: white;
}
body {
display: grid;
grid-template-columns: 30% 30% 40%;
}Resultado:
- grid-column-gap: establece el espacio que hay entre las columnas. Lo podemos indicar en píxeles o porcentaje.
En el ejemplo anterior, las 3 cajas están pegadas, vamos a separarlas 30px.
div {
background-color: red;
color: white;
}
body {
display: grid;
grid-template-columns: 30% 30% 40%;
grid-column-gap: 30px;
}Resultado:
- grid-template-rows: indica el número de filas de la cuadricula. Su valor es el porcentaje o píxeles que queremos que ocupe cada fila.
- grid-row-gap: determina el espacio que hay entre las filas. Su valor, igualmente, lo expresamos en píxeles o porcentaje.
Si tuviéramos 6 cajas:
<body> <div>Primera caja</div> <div>Segunda caja</div> <div>Tercera caja</div> <div>Cuarta caja</div> <div>Quinta caja</div> <div>Sexta caja</div> </body>
Así es cómo se haría para configurar una cuadrícula de 2 filas y 3 columnas (2×3 = 6 cajas):
div {
background-color: red;
color: white;
}
body {
display: grid;
grid-template-rows: 50px 50px;
grid-template-columns: 100px 100px 100px;
grid-row-gap: 30px;
grid-column-gap: 10px
}3.3.3. Trabajando juntos
La belleza de HTML y CSS radica en cómo trabajan juntos: HTML se enfoca en la estructura, mientras que CSS se encarga de la estética. Al aprender ambos, estás aprendiendo a crear páginas web desde cero, pero en la actualidad, ya no es necesario que hagas todo el trabajo tú solo.
Puedes apoyarte en los llamados «frameworks».
Los frameworks CSS son librerías ya programadas de componentes que podemos usar para acelerar nuestro proceso de creación de páginas web, con la garantía de que el código está bien formado y el resultado es de calidad.
Te sugiero que pruebes el framework Bootstrap y juguetees con él para descubrir una manera rápida de crear código útil para el diseño de sitios web atractivos.
3.4. Formatos y herramientas de animación web
Una vez que conseguimos dominar algunos de los lenguajes de desarrollo web que hemos citado, tenemos la posibilidad de crear animaciones web. Ya vimos en cursos anteriores algunos de los formatos y herramientas que tenemos disponibles para realizar todo tipo de animaciones.
Como recordatorio, recalcamos que las animaciones web son efectos visuales que crean movimiento en los elementos que forman parte de una página web.
Estas animaciones pueden tener varios formatos en función del momento en el que se deben iniciar:
- Animaciones de carga: su cometido es informar al usuario de una manera dinámica para que se «entretenga» mientras se carga el contenido.
- Animaciones de navegación: se trata de menús de navegación ocultos, que nos permiten ahorrar espacio en pantalla. Evitar el «scrolling» todo lo posible, mejora la experiencia de los usuarios.
- Animaciones «hover»: se producen cuando situamos el ratón encima del elemento afectado.
- Animaciones de imágenes: desde carruseles de imágenes, hasta galerías tipo Instagram pasando por efectos hover sobre imágenes.
- Animaciones de desplazamiento: movimientos suaves que mejoran la experiencia del usuario cuando se hace scroll a algún punto de la página.
En cursos anteriores ya repasamos todas las tecnologías que tenemos en nuestra mano para preparar estas animaciones, como por ejemplo la herramienta SVGator:
Sin embargo, ahora que ya tenemos conocimientos de programación web en modo texto, vamos a extender nuestras habilidades creando las animaciones de forma programática usando CSS.
Para empezar a animar con CSS, vamos a ser un poco conservadores, para ir haciendo cosas más complejas poco a poco. De momento, intentemos animar elementos para que cambien de tamaño, posición y orientación cuando situeemos el ratón sobre ellos.
Las dos propiedades fundamentales con las que necesitamos jugar para lograr estos efectos, se llaman transform y transition.
Propiedad transform
Esta propiedad se usa para lograr que los elementos modifiquen su apariencia, como forma, tamaño y posición. Sus valores más utilizados son translate -cambia la posición del elemento-, scale -cambia su tamaño- y rotate -hace que gire-.
Veamos un primer ejemplo de uso de translate, para mover un elemento por la pantalla:
<body>
<div>
<img src="https://cdn-icons-png.freepik.com/256/6829/6829852.png">
</div>
</body>img {
border: 1px solid #000;
transform: translate(100px, 50px);
}Nuestra imagen se mueve 100px a la derecha y 50px hacia abajo:
Con lo cual, hemos descubierto que el primer parámetro de translate controla el eje X y el segundo el eje Y.
La propiedad scale, funciona de manera similar. Su primer valor controla el tamaño del ancho del elemento, y el segundo valor, el alto. De manera que si queremos que sea igual de alto, pero la mitad de ancho, haremos:
img {
border: 1px solid #000;
scale: 50% 100%;
}Evidentemente, la imagen de deformará:
Igualmente para rotar un elemento, debemos usar rotate indicándole el número de grados que queremos rotar:
img {
border: 1px solid #000;
transform: rotate(90deg);
}
Propiedad transition
Esta propiedad, por su parte, controla la animación, estableciendo su velocidad, duración, etc. Para conseguir un efecto de movimiento, debemos controlar al menos dos propiedades: transition-property (indica a qué propiedades les va a afectar la animación) y transition-duration (especifica el tiempo que durará la animación).
En el siguiente ejemplo, vamos a hacer que cuando el ratón se sitúe encima del coche (de la imagen), se produzca una animación que durante 2 segundos girará el coche hasta que alcance la posición de 90º.
img {
border: 1px solid #000;
transition-duration: 2s;
transition-property: transform;
}
img:hover {
transform: rotate(90deg);
}Ahora vamos a hacer que cuando el ratón se sitúe encima del coche su tamaño se escale a la mitad durante 3 segundos.
img {
border: 1px solid #000;
transition-duration: 3s;
transition-property: scale;
}
img:hover {
scale: 50%;
}Te invito a que revises este vídeo y pruebes por tu cuenta otras propiedades CSS relacionadas con las animaciones, para lograr efectos impactantes: