Curso: CSS Intermedio

Técnicas de maquetación con CSS

En el curso CSS Básico aprendimos los fundamentos de CSS, reglas, selectores y propiedades para manipular todos los elementos HTML. Pero CSS es más que memorizar un conjunto de propiedades, es saber cómo aplicar estos conocimientos para diversos fines por medio de técnicas especiales.

La "maquetación" es un término utilizado para describir el proceso de dar una estructura visual al contenido de una página Web, un mecanismo para distribuir la información en secciones fácilmente reconocidas por los visitantes como encabezados, pie de páginas, barras laterales, barra de navegación, área principal, etc.

Hasta algunos años, la maquetación se realizaba por medio de tablas, en donde cada celda se usaba para demarcar las secciones antes descritas. Esta técnica ha caído en desuso por la rigidez de las tablas, el limitado control de CSS y Javascript sobre estos elementos y sobre todo, porque hace imposible crear páginas web altamente interactivas que son el fundamento de la Web 2.0. Es por ello que nos enfocamos en técnicas basadas únicamente en CSS para la maquetación.

Es relativamente fácil crear diseños de dos o más columnas usando capas y algunas propiedades CSS, el reto principal consiste en lograr que las columnas tengan una misma altura, que el diseño sea flexible y se adapte a cualquier tamaño de pantalla o dispositivo; y que sea amigable con los motores de búsqueda para favorecer el posicionamiento. A cada una de estas técnicas se le ha bautizado con nombres peculiares como "Faux Columns", "Liquid Bleach", "One True Layout" y "Holy Grail".

Poco a poco, CSS va tomando responsabilidades que antes eran exclusivas de Javascript y que nos permiten añadir interactividad sin necesidad de códigos complejos o librerías pesadas. La creación de menús desplegables es un ejemplo de esta tendencia y que se está consolidando con el advenimiento de CSS 3 pues esta evolución del lenguaje nos permite crear transiciones y animaciones simples de una forma eficiente.

En este curso seguiremos ampliando nuestro dominio con Dreamweaver CS5, esta vez orientado a la manipulación de CSS y la integración con FTP para la sincronización de archivos entre nuestro computador y el servidor web remoto.

MSc. David Barreto