Cada vez son más los diseñadores webs que optan por migrar sus trabajos a CSS, abandonan para siempre el uso de tablas para maquetar y optan por concebir una web más cercana a los estándares. Sin embargo una cosa es decirlo y otra cosa es hacerlo. Es relativamente complejo dejar de pensar en las tablas y trabajar de un día para otro con HTML y CSS íntegramente. Este artículo pretende acercar un poco más las nuevas tecnologías y estimular su uso.
UN PRIMER ACERCAMIENTO:
Si los diseñadores no hubiesen utilizado las tablas nunca para maquetar sus trabajos, hubiese sido muy fácil implementar la forma de trabajo de los estándares. Sin embargo muchos empezamos mal por seguir la corriente popular.
Por ejemplo, si bien CSS y HTML ya funcionaban como la mejor forma de maquetar webs desde el año 1993 aproximadamente, hace tan solo unos tres o cuatro años atrás se impuso de manera casi masiva la maquetación mediante HTML y CSS. No hay duda de que los navegadores ayudaron mucho, empezaron a interpretar de mejor manera el uso de estas tecnologías y se acercaron a los stándares. Sin embargo hasta este año (2006) todavía quedan cosas por hacer de parte de los navegadores.
Las tablas se concibieron desde un principio con otros objetivos; mostrar datos tabulares. Sin embargo con el atributo “border 0” muchos webmaster empezaron a delimitar y diseñar en base a las prestaciones que daban estas. Parecía que no habái otra forma, sencillamente usábamos tablas para todo. Todo era relativamente fácil y práctico, pero porque no conocíamos otra cosa. Era como estar viajando a pié mientras teníamos la posibilidad de viajar en auto.
Muy por el contrario el uso de HTML y CSS permite separar completamente la presentación o el diseño del contenido. Porque la maquetación se escribe en un archivo externo (*.css) que determina toda la apariencia del sitio y este queda almacenado en la caché de cada máquina. De esta forma la navegación es mucho más rápida y se tiene el control absoluto del diseño.
CUALES SON LAS VENTAJAS DE UTILIZAR HTML Y CSS?
Las ventajas del uso de CSS solo se comprueban y se creen definitivamente cuando empezamos a trabajar con este nuevo concepto. Dicho en otras palabras, se pueden escribir libros enteros sobre las ventajas, pero hasta que no lo compruebas por ti mismo todo parece en vano.
Aquí un pequeño listado de sus beneficios:
- Reducción drástica de código (Reducción del ancho de banda)
- Rapidez y practicidad a la hora de diseñar
- Excelente adaptabilidad para diseños complejos
- Control absoluto del posicionamiento de cada objeto
- Fácil edición general
-Mejoras drásticas de cara a los buscadores (Mejoras en el posicionamiento)
-Mejoras drásticas en la Accesibilidad web..
- La lista sigue...
POR DONDE EMPIEZO?
Se habla mucho de las ventajas, porque es realmente fácil hacerlo, sin embargo son pocos los que tiran el salvavidas a los “tableros”.
El primer consejo, creo que debería ser; olvidarse de las tablas y ser flexibles en cuanto a la nueva forma de trabajar.
No podemos trabajar con los mismos conceptos y recursos que usábamos antes. Creo que este es el principal motivo por el que muchos webmaster, cuando encaran CSS, salen corriendo y se refugian de nuevo en las tablas.
Lo primero es entender bien el porque optamos en cambiar o abandonar las tablas, y dejar de pensar que esto es una moda o un capricho de Geek( Nerds tecnológicos).
Aquí un listado a modo de ayuda para principiantes y no tanto:
- Diseño de Formularios con CSS:
Este enlace te muestra como generar formularios dinámicos exclusivamente con CSS. Además de mejorar el aspecto general se simplifica mucho la maquetación y el código.
Enlace: http://www.baluart.net/articulo.php?id_art=90
- Generador de Bordes redondeados para cajas en CSS:
Herramienta on-line que te permite generar cajas con esquinas redondeadas de manera sencilla, con solo elegir el color general la aplicación genera código CSS, código HTML e imágenes.
Enlace: http://www.neuroticweb.com/recursos/css-rounded-box/index.php
- Templates y Layouts CSS para descargar:
Completo sitio que contiene cientos de templates en css listos para descargar, el sitio mantiene la política de "código libre", por lo que se pueden ver varios tipos de estructura de sito en css.
Enlace: http://www.oswd.org
- Hojas de Estilos CSS para Tablas:
El sitio se ha dedicado a compilar diferentes estilos CSS para un mismo diseño de tablas. Como si fuera en CSSGarden pero de un grupo de enlaces a manera de listado. Se puede visualizar el diseño y descargarlo.
Enlace: http://icant.co.uk/csstablegallery/index.php
Otro sitio que posee layouts listos para descargar es este: http://www.inknoise.com/experimental/layoutomatic.php que mediante seleccionar como debe ser nuestra estructura puedes descargar todo la maquetación completa.
- Lista de atributos soportados por diferentes navegadores:
Si estás empezando a trabajar con css, te habrás dado cuenta las incompatibilidades que existen entre los diferentes navegadores, este sitio (que está en un inglés entendible) agrupa a manera de tabla, que atributos son soportados correctamente en cada navegador.
http://www.westciv.com/style_master/academy/browser_support/
- Generadores Automáticos de Layouts CSS:
Sencillo y práctico generador automático de código css para estructuras. Incluyendo unos sencillos valores podrás tener de manera instantánea la maquetación de un sitio. Con funciones AJAX la aplicación te va preguntando todos los valores necesarios. Vale la pena probarlo.
Enlace: http://www.csscreator.com/version2/pagelayout.php
Si necesitas generar listas en CSS tienes este excelente generador: http://www.listulike.com/generator/
- Aplicación para Optimizar tus CSS:
Muchas veces repetimos atributos o generamos código con algunos errores que nos ocasionarán problemas en algunos navegadores, esta aplicación optimiza tu código CSS de manera muy sencilla.
Enlace: http://flumpcakes.co.uk/css/optimiser/
- Valida Tu código CSS:
Aunque muchos no lo ven importante (por ejemplo yo mismo), muchos son fanáticos de validar todo código que escriben. Respeto tal postura.
Enlace: http://jigsaw.w3.org/css-validator/
- Menús Tipo Solapas o Pestañas mediante CSS:
Te dejamos para que te descargues varios tipos de menús horizontales mediante pestañas dinámicas, muchos ofrecen el código desglosado sin embargo aquí en webnova te dejamos las descargas ya maquetas y en varios colores.
http://www.webnova.com.ar/ descargas/menus-css/cssmenus.zip
http://www.webnova.com.ar/ descargas/menus-css/cssmenus2.zip
http://www.webnova.com.ar/ descargas/menus-css/menu-css-doors.zip
- Curso para descargar de CSS:
Si deseas aprender de manera avanzada todo lo referido a la maquetación css te dejamos un curso para que te descargues gratuitamente.
Enlace: http://www.webnova.com.ar/ descargas/cursos/diseno_web/ curso-completo-css.zip
Tambien te dejo este práctico manual on-line: http://www.manualdecss.com
[b]SE SACRIFICA EL DISEÑO CON CSS?
NO! En absoluto, muy por el contrario, las posiblidades para diseñar sitios excelentes en apariencia no tiene límites, porque justamente CSS fue concebido para diseñar. Por el contrario hemos usado las tablas equivocadamente. Nos duele pero es así.
La posiblidad de manejar distancias al milímetro o al píxel permite que tengamos un control abosoluto de cada objeto, de esta forma, el uso equilibrado de fondos mediante imágenes y otros recursos como lo son las etiquetaspermiten una excelente administración de los menús, permitiendo aplicar efectos y apariencias imposibles de lograr mediante tablas. Ejemplos concretos, lo puedes encontrar en esta web ShowCase: http://www.cssmania.com
CONCLUSIÓN
Bueno, creo que no hay excusas para no darle una oportunidad a CSS. Como dije antes, requiere esfuerzo y gran paciencia. Si ves que algo no sale, simplemente te levantas de tu máquina, caminas un poco e intentas más tarde.
Averigua, investiga y pregunta a los que ya pasaron y abandonaron sin traumas el uso de tablas. |
monteron
