/ / / / / / Maquetando con CSS

Maquetando con CSS

, , , ,
Hola comunidad!

Imagen: Icofinder.com
En estos días recientes hemos estado trabajando temas interesantes en cuanto a diseño web con algunos estudiantes y por supuesto hemos llegado a un tema "coco". El diseño de un sitio web con CSS - olvidando y no recomendando las famosas tablas para diseñar - que de por sí estarían siendo mal utilizadas si se tienen en cuenta para esta tarea.

Diseñar con CSS no es difícil, ya entendemos que el CSS se utiliza en parte para definir la apariencia, estilos, posición etc de un contenido web, es de entrada la mejor opción: Separar contenidos de su aspecto gráfico, sin embargo el CSS puede utilizarse también para controlar estos objetos en cuanto a posición, visibilidad, flujo en la página y un sinfín de posibilidades más.


Estas etiquetas específicas de posicionamiento y maquetación pueden llegar a ser un poco confusas, incluso si no se tienen unas buenas prácticas y entendimiento del HTML y el diseño en si mismo se convertirá en un quebradero de cabeza.

Por lo tanto la primera opción es revisar las buenas prácticas y realizar varios ejercicios, como siempre la práctica hace al maestro y la habilidad es algo que no se enseña, se adquiere. Algunos "agarran" la mecánica en cuestión de un par de horas, otros se demorarán un poco mas, pero es claro que el diseño con CSS es la opción recomendada y una vez que se domina se convierte en una poderosa arma respecto a otros productores de contenido o webs, así que ánimo, vale la pena invertir el tiempo para aprenderlo.

No les doy mas lata, manos a la obra, primero con el PDF que recomiendo como lectura para CSS, posteriormente un par de artículos de desarrolloweb.com que pueden darles luces sobre CSS, luego los videotutoriales (son varios pero un solo ejercicio) que muestran el proceso y finalmente un videotutorial sobre prácticas recomendadas, espero sirvan en tu aprendizaje.


Videotutoriales Desarrolloweb.com - Práctica de maquetación con CSS

A continuación veremos el paso a paso

Parte. 1



Parte. 2



Parte. 3



Parte. 4



Parte. 5



Parte. 6 (Final del ejercicio)



Recomendaciones finales para maquetar



Espero que esta entrada te ayude en el crecimiento de tus habilidades, prueba mucho, corrige, revisa y vuelve a probar, es la mejor forma de aprender.

- Nos webmos.