Generador de cajas redondeadas

Por medio Ovillo.org, la lista de distribución de CSS en castellano, me entero que Carlos Rincón Sanchez de Neurotic ha desarrollado CSS Rounded Box Generator, éste aún se encuenta en fase Beta, esta herramienta genera de manera automática cajas redondeadas, proporciona las imágenes de las esquinas. Este generador sigue el modelo propuesto en Doug’s easyCorners.

Traductor de Selectores CSS2 y CSS3

A través del Weblog torresburriel me entero de la existencia de un “traductor de CSS”, esto para muchos puede ser muy funcional, lo he probado y me ha llamado mucho la atención, este sistema maneja 2 tipos de entrada, el primero es directo, en el cual simplemente se puede ingresar uno o más selectores de manera separada, en esta sección también se admiten reglas, para ello debemos utilizar Direct Input. También se ofrece la funcionalidad de ingresar la URL de la hoja de estilos en cascada, para ello emplearemos URL Input. Finalmente podemos escoger que la “traducción” se haga en inglés o en español. El servicio en cuestión es SelectORacle.

¡Disfrutenlo!

Hosting gratuito para tu bitácora

Gracias a nuestro nuevo servicio Pregunta a BdW, nuestro fiel lector juglar103 (Estudio 103) nos formula una pregunta bastante interesante, dicha pregunta se refiere a que compañias ofrecen hosting gratuito para alojar un bitácora con el CMS Wordpress preinstalado.

Como en BdW queremos ser un arbitro imparcial y no dar preferencias, una respuesta a dicha pregunta podría ser la siguiente:

Para instalar Wordpress, te servirá cualquier hosting gratuito que soporte PHP 4.1 (o una versión posterior) y la gestión de bases de datos bajo MySQL 3.23.23 (o una versión posterior) te servirá, opcionalmente podrías buscar aquel hosting que soporte el módulo mod-rewrite en Apache, esto último te ayudará en la ?reescritura? de las URL en tiempo real, esto te facilitará el tener URL más amigables al usuario y te evitará tener esas largas URL que normalmente se presentan en las páginas que son generadas dinámicamente, la instalación de este CMS es realmente fácil, es famoso por eso, te tomará menos de 5 minutos con un par de clicks.

Una buena opción antes de instalar un CMS es probar opensourceCMS, la idea detrás de este sitio es proveer un lugar en donde puedas probar la utilización de estos sistemas manejadores de contenido, todo desde un mismo sitio, esto puede ser conveniente si deseas examinar las distintas características que ofrecen estos sistemas y así examinar en definitiva cual es el que más te conviene.

Revisión sobre el uso de los blockquote

Todo comenzo el día de ayer cuando le sugerí a Juan García, a través de un correo electrónico, modificar de cierta manera la presentación de los blockquote, le indique que posiblemente le brindaría un mayor contraste a la plantilla actual de BdW. Después de enviar dicho correo recorde un artículo que había leido hace tiempo en minid.net, el artículo al cual hago referencia lleva como título Un uso más práctico y semántico del BLOCKQUOTE, del mismo extraigo lo siguiente:

Pero Adrian Howalty ha descubierto cómo mejorar el uso del Blockquote agregando “etiquetas” dinámicas cuando se cita un blockquote. Aplicar este efecto es cuestión de aprender a usar la propiedad “cite”.

En realidad el artículo al cual hace referencia Diego Lafuente, simplemente aprovecha las virtudes que nos ofrece la segunda revisión de CSS (Cascading Style Sheets) , se implementa el uso de selectores de atributos (en este ejemplo: [cite]) y el uso del pseudo-elemento :after, adicionalmente se recurre a la propiedad content para generación de contenido "dinámico", el valor attr(cite) devolverá como una cadena el valor contenido en el atributo cite del selector blockquote.

Sin más preámbulos, el código explicado anteriormente es el siguiente:

1
2
3
4

blockquote[cite]:after {
	content: "Quote from: " attr(cite);
	display: block;
}

Pero esta implementación no es la panacea, el mismo autor reconoce ciertos inconvenientes en la implementación de este metodo:

I’m not quite sure how useful this is, because the printed URL isn’t a clickable hyperlink. (Does anybody know a way to make it so?) In Mozilla 1.2 for Windows, it can’t even be selected by the mouse cursor for copying/pasting, so it’s doubly unuseful. (It can, though, be selected in Opera 7.) Another potential problem: Long URLs might look funky and break the page layout somehow.

Leyendo los comentarios del artículo Dynamically labeling blockquotes with CSS me doy cuenta que Paul Hammond argumenta que JavaScript y DOM (Document Object Model) son mucho más flexibles a la hora de crear efectos como el expuesto por Adrian, además de lo anterior agrega que probablemente sea la única manera en que pueda seleccionarse la URI (Uniform Resource Identifier) que ha sido extraida del atributo cite de la etiqueta blockquote.

Paul Hammond ha propuesto una solución alternativa en el artículo Blockquote Citations, en dicho artículo podrá encontrar el código fuente en CSS y en JavaScript.

Al seguir leyendo los comentarios doy con uno expuesto por Simon Willison, el cual presenta una solución alternativa basada en la misma idea anterior, la implementación se puede encontrar en el artículo Blockquote Citations, en dicho artículo también podrá encontrar el código fuente en JavaScript.

Ahora bien, todo lo anterior me hacía pensar en mejorar el uso de los blockquote, así que reflexionando me dispuse a hacer mi implementación. En primer lugar la estructura del documento en XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<blockquote
cite="http://www.simplebits.com/notebook/2003/08/22/css_photo_zoom.html"
title="CSS Photo Zoom" xml:lang="en">
<p>After reading Pixy&#8217;s clever
<a href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/">
Fast rollovers, no preload needed</a>
method for using a single background
image for multiple hover states,
it got me thinking. What if the
concept was used to offer a zoomed
view of a thumbnail image, right
inline on the page, again using
a single image?</p>
<p><strong>
<a href="http://www.simplebits.com/code/photo_zoom.html">
Here&#8217;s the example</a></strong>,
where I&#8217;ve created a
<a href="http://www.simplebits.com/images/zoom.jpg">
single JPG image</a>
that contains both the thumbnail
and zoomed photo below it. I then
use Pixy&#8217;s idea of changing
the <code>background-position</code>
as well as the <code>width</code>
and <code>height</code>
for the <code>:hover</code> state to
hide the thumbnail, but reveal
the larger zoomed photo.</p>
</blockquote>

Después de ello me he puesto a mejorar la visualización de la etiqueta blockquote, para ello he recurrido a las excelentes hojas de estilo en cascada o CSS.

1
2
3
4
5
6
7
8

blockquote{
	margin: 10px 20px 14px 30px;
	padding: 10px 10px 10px 20px;
	-moz-border-radius: 10px;
	background: #eee url(quot.gif) no-repeat 2% 2%;
	color: #666;
	font: 0.85em/1.6em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

La mayoría de las propiedades utilizadas en la regla CSS anterior se explican por si solas, a excepción de la propiedad -moz-border-radius, simplemente es un comando CSS creado por la fundación mozilla.org que permite a las interfaces de usuario de Mozilla aprovechar la funcionalidad de redondear las esquinas de una caja. El hecho de que este comando sea una iniciativa de Mozilla, no indica que esté en contra de los estándares, de hecho, el W3C concede la libertad en los estándares de CSS el hecho de agregar propiedades propias para ciertos navegadores, estas propiedades después de un vasto estudio pueden ser consideradas un estándar universal. Esto no es ningún mito, en la tercera revisión de CSS ya se considera la propiedad border-radius.

Siguiendo con el tema, a pesar de no conocer absolutamente nada de JavaScript, decidí aventurarme en revisar el código fuente propuesto por Simon Willison, para mi sorpresa resulta que la mayoría del código se me ha hecho fácil interpretarlo, adicionalmente procedi a buscar un poco de información a través de Google para poder modificar ligeramente el código, así lo hice y lo ajuste a mi conveniencia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function extractBlockquoteCitations() {
	quotes = document.getElementsByTagName('blockquote');
	for (i = 0; i < quotes.length; i++) {
		cite = quotes[i].getAttribute('cite');
		<strong>title = quotes[i].getAttribute('title')</strong>
		if (cite != '' <strong>&amp;&amp; title != ''</strong>) {
			<strong>var</strong> newlink = document.createElement('a');
			newlink.setAttribute('href', cite);
			newlink.setAttribute('title', <strong>title</strong>);
			newlink.appendChild(document.createTextNode(<strong>title</strong>));
			<strong>var newparr = document.createElement('p');
			newparr.className = 'blockquotesource';
			var text = document.createTextNode('Tomado de: ');
			newparr.appendChild(text);
			newparr.appendChild(newlink);</strong>
 
			quotes[i].appendChild(<strong>newparr</strong>);
		}
	}
}
 
window.onload = extractBlockquoteCitations;

Los cambios que hice los he enfatizado, básicamente agregue la extracción del atributo title de la etiqueta blockquote. En el caso en que los atributos cite y title estén presentes en la etiqueta blockquote, se procederá a crear un nuevo elemento a, el cual tendrá como atributos href y title, el valor que tomará href será la URI del atributo cite de la etiqueta blockquote , el valor del atributo title dentro de la etiqueta a tendrá el mismo contenido que el atributo title dentro de la etiqueta blockquote, el texto que representa el hipervínculo será el contenido del atributo title dentro de la etiqueta blockquote, en este último punto, desde mi perspectiva, considero que brindamos mayor usabilidad de este modo, que en el caso planteado por Simon Willison, quien simplemente colocaba como texto en el hipervínculo la palabra Source. Adicionalmente no es recomendable utilizar como texto del hipervínculo la URI contenida en el atributo cite, puesto que ésta en ciertas ocasiones puede ser extremadamente larga y esto degrade el esquema del layout. Otra modificación hecha fue la sustitución de la etiqueta de división (div) con clase blockquotesource por un elemento de párrafo (p), mantuve el nombre de la clase para este elemento.

El resultado de la obra lo puede ver en este ejemplo.

Pruebas Realizadas

Firefox 1.0, Opera 7.54, IE 6.0 con SP2.

Código Fuente

Código CSS, Código JavaScript.

Nota del autor: Puedes colaborar comentando si has realizado pruebas de lo expuesto en otros navegadores o en distintas versiones de los ya mencionados, ¿te ha funcionado?. Por favor no seas muy duros con el código que he modificado, les recuerdo que soy neófito en cuanto al tema del JavaScript.

Shorthands CSS

En este artículo se hará una breve introducción al uso de los shorthands (no se que traducción adecuada darle a este término) en CSS (Cascading Style Sheets), simplemente es una reducción del código CSS, el cual nos ayudará a optimizar dichos ficheros.

body{
	color: #000;
	background: #fff; /* esta propiedad presenta mayor soporte que background-color */
	margin: 25px 0;
	padding: 0;
}

Para esta regla, todo el texto será negro (#000) en un fondo blanco (#fff). Los colores son descritos en shorthand CSS. #000 es una abreviatura de #000000; #fff es equivalente a #ffffff. El shorthand solo puede ser utilizado para reemplazar pares de caracteres; #fc0 es equivalente a #ffcc00. El shorthand no puede ser usado en ausencia de pares de caracteres. No existe una abreviatura para los colores no seguros en la web como por ejemplo #f93C7a.

Las Caras de Reloj

La primera regla también establece el margen superior e inferior en 25px y el margen izquierdo y derecho en 0. Esto es una abreviatura de:

margin: 25px 0 25px 0;

Lo anterior, también es una abreviatura de esto:

margin-top: 25px;
margin-right: 0;
margin-bottom: 25px;
margin-left: 0;

En CSS, los valores son asignados en el orden de las agujas del reloj: 12 (margen superior), 3 (margen derecho), 6 (margen inferior), 9 (margen izquierdo). Si queremos que nuestra página tenga un margen superior de 25px, un margen derecho de 5px, un margen inferior de 10px y un margen izquierdo de 30% de la anchura completa, nuestra regla sería algo como esto:

margin: 25px 5px 10px 30%;

Cuando el margen vertical sea igual en el tope y en el fondo (como se mostró al principio - valor 25px), y el margen horizontal sea igual en el izquierdo y en el derecho (como se mostró al principio - valor 0), podemos ahorrar unos cuantos bytes en el ancho de banda escribiendo lo siguiente:

margin: 25px 0;

El valor 0 no requiere una unidad de medida. 0px es lo mismo que 0cm, 0in.

Nota del autor: Como mencione al principio esto es una introducción al tema, espero pronto traer una "segunda parte".

Abreviaturas vs. Acrónimos

A muchos autores se les presentan ciertas inquietudes a la hora de la redacción de sus documentos en cuanto al uso de estas etiquetas, el siguiente artículo pretende establecer ciertas diferencias y clarificar el uso de ellas.

Según la RAE (Real Academia Española) el término abreviatura significa lo siguiente:

Tipo de abreviación que consiste en la representación gráfica reducida de una palabra mediante la supresión de letras finales o centrales, y que suele cerrarse con punto; p. ej., afmo. por afectísimo; Dir.a por directora; íd. por ídem; SS. MM. por Sus Majestades; D. por don.

Ahora bien, veamos que nos dice la RAE acerca del significado del término acrónimo.

1.- Tipo de sigla que se pronuncia como una palabra; p. ej., o(bjeto) v(olante) n(o) i(dentificado).

2.- Vocablo formado por la unión de elementos de dos o más palabras, constituido por el principio de la primera y el final de la última, p. ej., ofi(cina infor)mática, o, frecuentemente, por otras combinaciones, p. ej., so(und) n(avigation) a(nd) r(anging), Ban(co) es(pañol) (de) (crédi)to.

Otro término que es importante definir en este contexto es el de sigla, según la RAE obtenemos lo siguiente:

1.- Palabra formada por el conjunto de letras iniciales de una expresión compleja; p. ej., O(rganización de) N(aciones) U(nidas), o(bjeto) v(olante) n(o) i(dentificado), Í(ndice de) P(recios al) C(onsumo).

2.- Cada una de las letras de una sigla (palabra formada por letras iniciales). P. ej., N, O y U son siglas en ONU.

3.- Cualquier signo que sirve para ahorrar letras o espacio en la escritura.

¿Nos ha quedado claro hasta ahora la diferencia?

Voy a tratar de profundizar más en el tema, se puede considerar un acrónimo a aquella sigla que se pronuncia como una palabra, haciendo referencia a las definiciones anteriores, podemos concluir que por ejemplo la sigla OTAN ONU (Organización de Naciones Unidas) es también un acrónimo.

Una característica general que puede ayudarnos a diferenciar las abreviaturas de las siglas es que las primeras normalmente las leemos interpretando lo escrito por su significado, es decir, en ese sentido estamos contemplando la abreviatura como una representación gráfica reducida, normalmente nosotros no leemos EEUU como [É - É - Ú -Ú], sino que simplemente lo interpretamos como “Estados Unidos”, en cambio las siglas no las “traducimos”, sino las interpretamos tal cual está escrita, por lo tanto, podemos concluir que las siglas son palabras que se emplean indiferentemente en la escritura como en el habla.

Las abreviaturas pueden tratarse en plural, mientras que los acrónimos y siglas no.

Una diferencia notable entre las abreviaturas y las siglas es su forma de escribirlas, siempre escribimos las abreviaturas con puntos, en cambio, las siglas se escriben sin ellos en su mayoría.

¿Cómo aplicamos lo anteriormente explicado a nuestro entorno?

En primer instancia hagamos un ejemplo

1
2

<abbr title="Estados Unidos" xml:lang="es">EEUU</abbr>
<acronym title="Cascading Style Sheets" xml:lang="en">CSS</acronym>

Podemos observar que EEUU es una abreviatura, para una mayor explicación de la expansión utilizamos el atributo title tanto en las abreviaturas (abbr) como en los acrónimos (acronym), el último atributo (xml:lang) pero no menos importante es donde especificamos el idioma, esto nos favorece en el caso de los sintetizadores de voz, indexación en buscadores, entre otros.

En importante resaltar que la primera vez que hagamos uso de las abreviaturas o acrónimos debemos añadir su expansión después de ellas, p.ej.:

1
2

<abbr title="Estados Unidos" xml:lang="es">EEUU</abbr> (Estados Unidos)
<acronym title="Cascading Style Sheets" xml:lang="en">CSS</acronym> (Cascading Style Sheets)

¿Y esto último para qué?, simplemente para brindar una mayor usabilidad a nuestros documentos, siempre se recomienda marcar todas las abreviaturas y acrónimos en nuestro documento, puesto que a ciencia cierta no sabemos por donde va comenzar a leerse dicho documento, pero la regla general nos indica que la expansión del término se hará simplemente la primera vez que se haga uso de las abreviaturas y los acrónimos en nuestro documento.

Comentarios Condicionales para IE

Hace unos días Simon comentaba en el artículo Personalizar la barra de scroll cierta implementación orientada a un navegador específico, este tipo de prácticas va en detrimento de la usabilidad y de los estándares web, pero la intención de este artículo no es criticar el trabajo de Simon, sino ofrecer una alternativa para el uso de este tipo de prácticas.

Para aquellos desarrolladores web que consideren necesario implementar este tipo de cosas orientadas al navegador IE (Internet Explorer) yo recomendaría hacer uso de las etiquetas condicionales de IE, estas etiquetas solo serán procesadas por las versiones posteriores a la 5.0, para aclarar el asunto coloco un ejemplo:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="ie.css"/>
<![endif]-->

Dicha instrucción es considerada como comentario por todos los navegadores a excepción de IE, así que en dicha hoja de estilos podemos manejar la personalización de la barras verticales y horizontales (tal cual como lo planteo Simon en su artículo) así como implementar algunos hacks exclusivos para IE.

La ventaja que implica el uso de los comentarios condicionales para IE es que no necesitamos recurrir a JavaScript ni tecnologías de servidor para reconocer las versiones más recientes del navegador de Microsoft.

A continuación desglosaré algunos de los usos que podemos darle a los comentarios condicionales

<!--[if IE 5.5]>
[Las instrucciones dentro de esta estructura se visualizarán
solo en IE 5.5]
<![endif]-->
<!--[if gt IE 5.0]>
[Las instrucciones dentro de esta estructura se visualizarán
en las versiones posteriores a IE 5.0]
<![endif]-->
<!--[if gte IE 5.5]>
[Las instrucciones dentro de esta estructura se visualizarán
en la versión 5.5 y las posteriores a ésta]
<![endif]-->
<!--[if lt IE 5.5]>
[Las instrucciones dentro de esta estructura se visualizarán
en las versiones anteriores a la 5.5 de IE]
<![endif]-->
<!--[if lte IE 5.5]>
[Las instrucciones dentro de esta estructura se visualizarán
en la versión 5.5 de IE y las anteriores a ésta]
<![endif]-->

Para resumir el artículo, utilizaremos gt dentro de los comentarios condicionales cuando deseamos indicar las versiones mayores (de manera estricta) a la indicada en dicha estructura, de manera similar funciona gte, pero en este caso se aplicará a las versiones mayores o iguales que la indicada en la estructura condicional, las instrucciones restantes funcionan de manera contraria a las indicadas anteriormente, lt para menor (de manera estricta) y lte para menores o iguales.

¿En realidad es bueno seguir los estándares del W3C?

La respuesta evidentemente es afirmativa, pero antes de adentrarnos en la especificación de los distintos beneficios que nos aporta seguir los estándares en el desarrollo web, definamos el término estándar, según la RAE tenemos que:

adj. Que sirve como tipo, modelo, norma, patrón o referencia.

Habiendo definido el término, apliquémoslo al mundo del desarrollo web, los estándares del W3C deben seguirse como un patrón, dicho consorcio se encarga de establecer las normas a seguir por los desarrolladores con el fin de generar un bien común, evitando en lo posible que ciertas compañias impongan algunas etiquetas o métodos no convencionales que solo servirán en un navegador o Agente de Usuario, lo anterior ha sucedido con compañias como Netscape o Microsoft, principalmente cuando se estableció entre ambas compañias la "guerra" por liderar el mercado de los navegadores, impusieron ciertas etiquetas no estándares que en vez de generarle un bien a la WWW lo complicó aún más. ¿Se imaginan desarrollar un documento XHTML para cada Agente de Usuario existente en el mercado?, se generarían excesivos gastos en la producción y la pérdida de tiempo no se podría cuantificar, la idea de seguir los estándares es que un solo documento pueda ser visualizado en todos los Agentes de Usuario existentes.

Al seguir los lineamientos de los estándares lograremos:

• Separar el contenido o estructura del documento XHTML de la presentación o diseño del mismo.
• Reducción en la cantidad de código XHTML.
• Facilidad en el cambio del diseño del documento, ofreciendo una mayor flexibilidad.
• Mejoramos la semántica de nuestros documentos y por ende brindamos una mayor accesibilidad al mismo.
• Basta un solo documento para todos los agentes de usuario existentes.

Debemos recordar que el "antiguo" lenguaje HTML fue concebido como un lenguaje de marcas para la presentación de documentos científicos, en otras palabras, nació como una abstracción del lenguaje que se llevaba en las imprentas, en donde los editores colocaban "marcas" en los documentos, por ejemplo, el título de la página, los posibles subtítulos, los párrafos, etc. Para colocarlo en términos simples, los editores de las imprentas no pensaban en un título de color rojo, un párrafo indentado, definitivamente no era ese su estilo de marcas. Para el diseño o presentación de los documentos XHTML recurriremos a las fabulosas hojas de estilos en cascada o CSS, en las cuales a tráves de unas reglas nos permitirá controlar tanto el posicionamiento de los elementos en nuestros documentos así como también nos permite controlar la presentación de los mismos.

Un tema en el que se debe hacer hincapíe es en el mal uso de las tablas, al emplearlas para maquetar los documentos, es uno de los errores más cómunes en los desarrolladores que aún siguen la vieja escuela. La presentación de los documentos a través del empleo de las tablas para la maquetación se ha venido convirtiendo en un abuso real de este principio tan importante. Hace ya algunos años atrás, diseñadores web sintieron la necesidad de usar tablas para crear complejas presentaciones. Este hack de usar tablas y pequeñas imágenes transparentes para la creación de presentaciones hacían estas páginas interesantes en el aspecto visual, pero todo esto iba en contra de la accesibilidad y usabilidad, este legado aún se mantiene en gran parte del desarrollo web. Hasta hoy día, el lema, si funciona, es bueno domina el diseño web. Realmente se debe dejar atrás esta actitud, y mantener en mente la importancia de los principios accesibilidad y usabilidad, haciendo uso apropiado de los recursos estándar para el desarrollo web.

Las tablas en HTML no existen para propósitos de presentación, pero si para representar datos de manera tabular. Algunos ejemplos incluyen listas de productos, cursos disponibles en la escuela, colegio o la universidad, y los calendarios. En este tipo de información será en la que es realmente útil el uso de las tablas.

A continuación se dará una breve explicación de los beneficios obtenidos al seguir los lineamientos del W3C.

Reducción en la cantidad de código necesario

Doug Bowman nos demuestra en su presentación The beauty and business of CSS, especificamente en la sección Wired News: file size reductions como se logró reducir el tamaño de los archivos, en el caso de la portada de Wired News la reducción fue de un 54%, esto genera un ahorro en el ancho de banda, en la medida de lograr lo anterior se obtienen ciertos beneficios, entre ellos podemos mencionar el incremento en la capacidad y eficiencia de respuesta del servidor, carga más rápida de las páginas, entre otras. En el caso expuesto de ESPN las estadísticas llaman aún más la atención, el ahorro estipulado por página se considera alrededor de los 50 KB, ESPN tiene aproximadamente unas 40 millones de visitas por día, por lo tanto se prevee que el ahorro diario en ancho de banda se acerca a los 2 Terabytes por día, en un mes serían 61 Terabytes, en un año serían aproximadamente 730 Terabytes o equivalententemente unos 784.000.000.000 KB. Si esto ya le parece demasiado prepárese para lo mejor, el caso de estudio hecho a Microsoft realizado por el mismo Doug Bowman.

Un solo documento para todos los Navegadores o Agentes de Usuario

En el caso de estudio mencionado previamente se puede notar que Microsoft mantiene 2 versiones en sus documentos, una versión para IE5.5 e IE6.0 para Windows y la otra versión con menos detalles para los demás navegadores, esto genera un costo de producción y pérdida de tiempo, la solución es apegarse a los estándares.

Separar el contenido o estructura del documento del diseño o presentación del mismo

Simplemente basta con visualizar el proyecto comenzado por Dave Shea llamado CSS Zen Garden, en él se puede observar que se emplea un solo documento bien estructurado en XHTML y se pueden aplicar al mismo documento distintos estilos controlados vía CSS. Además, cabe mencionar que si controlamos nuestros documentos a través de hojas de estilos en cascada externas estas sólo necesitarán cargarse la primera vez que son invocadas, posteriomente no será necesaria su carga ya que quedan almacenadas en el cache del navegador, esto realmente es una ventaja.

Este artículo es una breve introducción sobre los beneficios que nos aporta el seguir los estándares en el desarrollo web, el objetivo de este documento es difundir su uso.

Antes de finalizar quisiera recomendarles el hecho de válidar nuestros documentos, para ello les recomiendo:

• Servicio de Validación del W3C.
• Servicio de Validación del WDG (Mi preferido).

Referencias:

• World Wide Web Consortium
• Real Academia Española
• Zen and the Art of Web Improvement por Dave Shea.
• Designing with CSS: Past, Present, and Future por Dave Shea.
• The beauty and business of CSS por Doug Bowman.
• Pushing Your Limits (and other secrets of designing with CSS) por Doug Bowman
• CSS Zen Garden