Desde la llegada de la Web 2.0, se han propuesto cambios en la forma en que está hecha la estructura de un sitio web (layout). A los que empezamos hace años con html, nos acomodaba mucho el diseño con tablas, por su fácil manejo “in Situ” de todos los elementos gráficos. Luego, al diseñar o modificar plantillas para Joomla, era una manera cómoda de hacer lo que quisiéramos con las famosas tablas… pero esto llegó a su fin.
CSS Tableless
Hace ya un tiempo, la tendencia es diseñar sin tablas y dejar al o los archivos CSS todo el trabajo de organización del sitio; esto es el tamaño del layout, ancho de las columnas, posición de los módulos, etc. además de las ya conocidas indicaciones de colores, fuentes e imágenes.
Para Joomla 1.5, básicamente se comienza con un código en el header del archivo php:
<?php // no direct access defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xml:lang=”<?php echo $this->language; ?>”
lang=”<?php echo $this->language; ?>” >
<head>
<jdoc:include type=”head” />
<link rel=”stylesheet” href=”/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/<?php echo $this->template ?>/css/template.css” type=”text/css” />
</head>
y luego el contenido del BODY:
<body>
<?php echo $mainframe->getCfg(’sitename’);?><br />
<jdoc:include type=”module” name=”breadcrumbs” />
<jdoc:include type=”modules” name=”top” />
<jdoc:include type=”modules” name=”left” />
<jdoc:include type=”component” />
<jdoc:include type=”modules” name=”right” />
</body>
Eso es lo más sencillo… porque ahora se necesita dominar CSS para manejar todas las variables que queramos para nuestro sitio. Casi todos los sitios de templates comerciales trabajan con el concepto “100% CSS and Tableless” aunque no es una obligación, podría usarse tablas en algunos casos sin perjudicar el sitio… ¿perjudicar?, bueno, veamos las ventajas de trabajar así.
Algunas Ventajas
- Validación W3C, el lugar donde se norma la Web
- Usabilidad, Accesibilidad, SEO
- Se ve en la mayoría de los navegadores
- El sitio carga más rápido
Resumiendo, para diseñar con 100% CSS and Tableless, se debe pensar de otra forma, y tal vez eso sea lo difícil para alguien acostumbrado a las tablas. El futuro va hacia allá, así que no nos queda más remedio que aprender.
Hola, soy diseñador y como bien dices, no es tan fácil dominar CSS para lograr lo mismo que con las tablas. Personalmente no le encuentro nada malo a las tablas, de hecho son validadas igual por w3c… pero los futuros navegadores preferirán el diseño sin tablas, asi que a aprender se ha dicho.
Muy bueno el blog, felicitaciones!
te felciito por tu sitio pero me gustaria mucho que estuviera montado sobre Joomla en ves de WordPress, no crees?
Gracias por sus comentarios… bueno JanOS, no es la primera vez que alguien hace un alcance respecto a porqué WordPress y no Joomla!… La razón principal es que para montar un blog, WordPress es superior a Joomla!. Y como yo necesito un blog para comentar y opinar y no un CMS, mi opción es WordPress.
Y lo mejor… WordPress ofrece el servicio gratuito y por 10 dólares, incluye el dominio por un año.
Saludos!
Gracias por responder
[...] – bookmarked by 5 members originally found by meneertjuhh on 2008-09-27 Diseño sin tablas en Joomla http://joomladesign.cl/2008/07/15/diseno-sin-tablas-en-joomla/ – bookmarked by 2 members [...]
Excelente información… Es muy buena, me parece un muy buen primer pasopara el diseño de una plantilla para joomla, solo que seria mejor sasi te extendieras un poquito más y explicaras el posicionamiento de los objetos como imagenes, modulos, etc con css.
De igual forma te felicito!!! Y estoy muy agradecido.
Que pena la pregunta, quisiera que los sitios que cree en joomla! 1.5.x sean completamente xHTML – CSS sin tablas.
Al incluir el contenido
éste es generado con tablas.
Hay alguna forma de que este contenido no se genere con tablas, asi como sucede con los módulos, en los cuales se puede elegir el modo en que se mostrarán?
Mil gracias de antemano.
Gracias for the really cool article Amigo!
Hola… felicitaciones por tu web y foro….
llegue aki por un problema gigante…
he descargado miles de versiones de joomla , desde la 1.0 a la 1.5 y sus derivados.
No dejo de instalar y desinstalar, porque ningun plguin funciona bien.
Lo único que necesito es un joomla 1.5 con un editor, ojala el JCE o fck…
si pudieras enviarmelo al mail … ambas cosas que se compatibilisen
te lo agradeceria toda la vida…
instale el maldito joomla y su FCK y funciono!! yo estaba feliz, sin embargo
al instalar todo tipo de plantilla me salia con Restring acces..
puta madre
xd
saludos!
excelente ayuda… pero seria mucho mejor para los que aprendemos como quedaria el ejemplo que has expuesto.. es decir el codigo y luego la imagen antes y despues … gracias y felicidades por tu tiempo…