Vídeo Conociendo CSS3

  • Por
  • CSS
Clase de introducción a la maquetación web y las posibilidades del lenguaje CSS, en concreto CSS3 con HTML5.

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.

Autor

Daniel Martínez

Daniel es un diseñador gráfico convertido a web que vive dentro de Internet desde el año 95. Amante del diseño y estilismo en las diferentes expresiones, siempre ha destacado creando diseños adaptados a las últimas tendencias. Es una de esas personas que ha formado parte de todas las generaciones dedicadas al diseño web, desde el estilo "Geocities" de los 90, hasta Responsive Web Design actualmente.
Diseñador gráfico convertido a web

Compartir

Comentarios

Navar

22/4/2014
comentario
el curso segun lo que he visto esta muy bien pero me gustaria ver todos los videos en orden por si me perdi la linea del curso
al abrir me sale el video pero no se si es es primero o el segundo
gracias

Alfredo Huertas

23/4/2014
El orden lo tienes en la página del manual
Hola,

En la cabecera tienes enlazado el manual que compila todas las clases y las tienes en orden.
http://www.desarrolloweb.com/manuales/curso-gratuito-html5.html