Ahora que has decidido maquetar con CSS + XHTML
pero esto porqué… esto a que viene???
Lo primero que hay que entender es porqué vamos a utilizar CSS y xhtml para el desarrollo de una web frente a la maquetación práctica y sencilla (basada generalmente basada en tablas). En mi opinión las razones son las siguientes:
- Separación clara y evidente entre presentación y contenido: este es quizás el objetivo más importante a conseguir cuando se maqueta con este tipo de técnicas. Si hemos hecho un buen trabajo cuando hay que hacer modificaciones sobre el diseño de una web éstas se llevan a cabo principalmente sobre los archivos css y no supone cambios drásticos en o no supone cambio alguno en el código xhtml o html .
- Generación de un código más limpio y claro facilmente entendible por todos. Esto tiene un efecto que se produce en el primer proyecto de estas características: las personas que van a programar la web (también llamados programadores) tienen muchísimos menos problemas por lo que la posibilidad de que "destrocen" nuestra maqueta es bastante menor.
- Accesibilidad: una web maquetada siguiendo los estándares es más facil de leer por todos. Desde las personas con dificultades de visión a los robots que explorar páginas ya que el contenido no depende del diseño, es decir, puede ser leído y procesado aunque no se utilicen los ficheros css.
- Compatibilidad: esto es discutible porque entre los navegadores sigue habiendo ciertas diferencias (sobre todo Explorer y su manía de pasarse por el arco algunas reglas fundamentales)
- Control sobre la presentación: aunque al prinicipio no lo parezca, el uso eficiente de las css permite abordar diseño complejos de una forma bastánte más sencilla que con la maquetación tradicional (ver csszengarden). De verdad, para hacer que una web se vea como la definieron los llamados diseñadores no es necesario utilizar una sola tabla y aún menos el terrible pixel transparente de 1×1 pixel.
Por donde empiezo?
Los más recomendable para empezar es tener muy claro como funciona el posicionamiento con css, compreder el modelo de caja y conocer bien como funcionan los selectores. Lo primero que se debe hacer
La destrucción de un mito o leyenda urbana
En todos sitios hay radicales y en el tema de las css + xhtml especialmente. El kaleborroka de las css asegura que no se deben utilizar tablas en ningún caso; la realidad es que el evitar el uso de tablas para maquetar no quiere decir que haya que evitarlas para todo, las tablas sirven para mostrar datos tabulados y para eso deben ser usadas (listados, calendarios, etc..)(http://www.456bereastreet.com/archive/200410/bring_on_the_tables/). Para lo que NO fueron creadas es para hacer la maqueta general (layout) de una web.
Documentos esenciales para salir del lado oscuro de la maquetación
Por si acaso empiezas de 0
En prinicpio este documento está dirigido a personas que ya han hecho tareas de maquetación pero si realmente no tienes mucha esperiencia… comienza por aqui: Manual de Diseño Digital
Buenos ejemplos de otros sitios
- http://www.csszengarden.com/ -> aqui empezó todo algunos se convierten con solo ver esto (seleccionar un "tema" cualquiera en el menú de la derecha)
- http://cssvault.com/gallery.php (montones de páginas)
Para ir viendo de que va la cosa
- http://www.hotdesign.com/seybold/ -> o porque maquetar con tablas es estupido xD
- http://www.glish.com/css/
- http://www.sidar.org/recur/desdi/traduc/es/css/cover.html
- http://www.sidar.org/recur/desdi/mcss/index.php -> diseño cutre patatero pero es de lo mejor q hay en castellano como manual de las css… muy interesante la sección de selectores
- http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41-> El modelo de caja
- http://css.maxdesign.com.au/index.htm -> especialmente para el uso de listas para la creación de menús
- http://www.zonageek.com/articulos/web/trucos_con_estilos/index.php
Por desgracia existen bugs….
- http://www.tantek.com/CSS/Examples/boxmodelhack.html -> Modelo de caja :: esto es básico y esencial
- http://positioniseverything.net/explorer.html
Para estudiar mucho
- http://www.roderickhoward.com/cssdirectory/ -> aquí están reunido los sitios de referencia más importantes clasificados por temas.
Sitios muy activos que hablan sobre el tema
Para finalizar
Si te has leído todo lo anterior es que parece que tienes posibilidades de convertirte, un úlitmo consejo, los 2 primeros proyectos cuestan bastante más trabajo que hacerlos de la forma tradicional (como decía un compañero "He visto hombres maduros llorar y regresar al comfort de las tablas") pero pasada esa fase… ver una maqueta hecha a base da tablas produce escalofríos, sudoración, palidez y visión borrosa y otros efectos negativos.
