Esta es una clase emitida en directo, la sesión 03 del curso gratuito de HTML5 que estamos realizando en EscuelaIT, impartida por Daniel Martínez @Wakkos. Todos conocemos a Daniel y sabemos lo mucho que nos puede enseñar, y de manera tan amena como él lo hace, así que no hay realmente mucha más introducción que hacer, solo recomendar ver el vídeo que encontrarás al final de este artículo.

CSS es el lenguaje con el que aplicamos estilo a una web, con HTML definimos el contenido y con CSS le decimos cómo debe de presentarse ese contenido. Puede parecer que aplicar CSS es simplemente saberse unos cuantos atributos y selectores y escribirlos sin mucho orden, pero como nos dice Daniel, la parte más importante para el éxito de un CSS es la ESTRUCTURACIÓN.

En ese sentido esta clase no solo nos da un recorrido a las características de las CSS3, sino que el mayor valor lo encontraremos gracias a una enorme cantidad de consejos y de pautas para escribir mejor código CSS, mantenible, escalable, etc.

Fundamentos de las CSS

Daniel comienza ofreciendo una serie de fundamentos de las hojas de estilo en cascada, enseñándonos como integrar un archivo CSS en una página web. Vemos cómo podemos aplicar estilo a elementos que se seleccionan por medio de diversos selectores.

El trabajo de un desarrollador front-end consiste en aplicar CSS de una manera que permita un correcto mantenimiento del proyecto, pero tal como es el CSS actual ¿qué es lo que un desarrollador echa en falta?

Preprocesadores CSS

Lo que nos falta para poder estructurar un código CSS es lo que nos ofrecen los preprocesadores, nos referimos a variables, includes, etc. Para demostrarnos esta tarea Daniel nos pone varios ejemplos y nos demuestra cómo él organiza el CSS de un proyecto ayudado con el preprocesador Less.

El objetivo de la clase no es aprender preprocesadores, pero sí saber por dónde tenemos que continuar nuestro aprendizaje cuando ya dominemos las hojas de estilo en cascada.

Diseño adaptable

De nuevo, Daniel nos ayuda a entender los fundamentos de una de sus grandes pasiones, que es el diseño adaptable, lo que a veces conocemos como "Responsive". No se trata de maquetar un sitio web pensando en nuestro ordenador y nuestra pantalla, sino pensar que el sitio debe poder ser navegable por cualquier tipo de dispositivo, tablet, móvil, etc.

Así pues, daniel nos ofreció una clase maestra sobre cómo debemos comenzar a trabajar un diseño adaptable, cómo aplicar las mediaqueries y cómo usar nuevas características de las CSS3 para la maquetación y solventar diversos problemas típicos que nos encontramos en el día a día. Cómo usar unidades relativas y cómo calcular las dimensiones de los elementos, también de manera relativa.

Ejemplos y vídeo de la clase

A lo largo de la clase se realizó un ejemplo de maquetación responsive completo, en el que pudimos apreciar algunas de las claves para poder adaptar el diseño a dispositivos y ordenadores con pantallas grandes. Puedes descargar el código de este enlace.

El vídeo lo encuentras a continuación.