Por que dar estilo a sus páginas con CSS?

Translated by Omar Gonzalez

La web hoy es un lugar diferente de lo que fue 5 años atrás. La tecnología usada en la web ha crecido rápidamente y esto es reflejado en los sitios web y en la manera como ellos ahora se están creando. En el pasado, el HTML – Que es lenguaje usado para crear las páginas web – tenía recursos (tags), tanto para crear la estructura como para dar estilo a la página tambien.

Hoy el método preferido para dar estilo a las páginas es algo llamado CSS or Cascading Style Sheets. CSS es una extensión del HTML, y está orientada básicamente a dar estilo a las páginas. Antes del CSS, nosotros solo teníamos el HTML para poder dar estilos a cualquier elemento en nuestra página, como por ejemplo para colocar una letra en negrilla nosotros teníamos que usar el tag bold:

<b> Esto estaría en negrilla </b>

Hay otros tags en HTML que le permiten a usted dar estilo a sus páginas, pero ellos son limitados en muchas formas. Para superar estas limitaciones y los problemas relacionados con las incompatibilidades de los browsers; los diseñadores algunas veces usan texto en imágenes GIF o JPEG en lugar del texto HTML. Con las limitaciones en ese entonces del HTML esta técnica permitió a los diseñadores conseguir la apariencia específica que ellos estaban buscando en el diseño.

Esto resultaría en gran cantidad de imágenes en sus páginas – imágenes que no serían usadas para mostrar un logo o una foto, si no que serian usadas en su lugar para remplazar texto; texto que debería ser creado con HTML. Lo positivo acerca de este enfoque es que usted puede lograr el estilo exacto que usted esta buscando,pero esto puede resultar contraproducente.

Trabajar el texto usando imágenes es un proceso que consume tiempo. Usted de seguro tendrá que estar cambiando entre su HTML y su editor de imágenes cada vez que desee cambiar su texto.

Muchas veces el proceso de arreglar un error requiere de muchos intercambios entre el editor HTML y su editor de imágenes. Si de otra parte el texto es creado en solo HTML, los cambios tomarán solo una fracción del tiempo.

Otro efecto negativo de usar imágenes para el texto en el cuerpo del documento es que ellas empiezan rápidamente a abultar la página en términos de kilobytes. Usted deberá siempre tratar al máximo de mantener sus páginas tan ‘livianas’ en este aspecto como sea posible, y de esta forma el usuario final podrá download las páginas más rápidamente. La regla general es que si su página web no carga en 10 segundos, usted perderá la mayoría de sus visitantes. Aunque actualmente mucha gente tiene Internet a alta velocidad, Yo trato de que mis páginas sean al rededor de 50-60k.

Otra buena razón para no usar imágenes cuando cree sus páginas de contenido de texto, es la compresion GZIP. Todos los servidores web soportan hoy GZIP; GZIP es un método para comprimir HTML dinámicamente tanto como de 1/10 de su tamaño original!

Así si usted tiene una página HTML con 50k, con GZIP usted estaría enviando al cliente solo 5k! GZIP solo trabaja en texto y no en imágenes, de todas formas la mayoría de las imágenes ya están comprimidas a su máximo cuando están en formato GIF o JPEG.

Considere esto; HTML no comprimido con GZIP es mucho menos pesado que el mismo texto en formato de imágenes. Pero cuando HTML es comprimido, entonces no hay ninguna comparación! Ok, ahora nosotros sabemos que debemos usar las imágenes moderadamente en nuestras páginas, la pregunta es como podemos superar las limitaciones de presentación en HTML? La respuesta se puede encontrar en el CSS.

CSS es muy poderoso y permite dar estilo a su página en una forma que no fue posible antes. Hasta hace poco (Algo así como un año o dos) las implementaciones en CSS eran irregulares e inconsistentes. Por ello mucha gente evitó su uso, o lo uso en su mínima expresión. Confieso que este es mi caso también y hasta ahora continuo utilizando una mezcla entre la vieja manera de hacer las cosas y lo nuevo.

A la fecha yo me mantendré usando tablas para la estructura principal de la página y usaré algunas imágenes para crear los encabezados de mis páginas, pero nunca para el texto el el cuerpo de la página! Igualmente pienso que nos podemos sentir seguros cuando usamos CSS1 y CSS2, que son las dos primeras especificaciones de CSS y siendo justos la mayoría de las cosas trabajaran propiamente en los browsers. Lo anterior teniendo en cuenta que IE tiene entre 95% y el 97% de el mercado y que soporta el CSS estándard con ello nosotros podremos estar Ok.

El surgimiento de las pautas estilisticas:

Cuando la web empezó y llegó a el público en general, y los browsers empezaron a soportar sofisticadas presentaciones e imágenes, la gente empezó a desenfrenarse en términos de diseño. Esto ocasionó una gran diversidad de estilos y websites que aun persiste hoy en día y que son una evidencia de ello.

El problema con esta anarquía fue que desencadenó problemas de consistencia entre la manera como los websites trabajaban y otros elementos estructurales que podían ser totalmente diferentes de sitio a sitio y también de página a página. Esto ha tenido un mayor impacto en términos de facilidad de uso con en el usuario promedio.

En plataformas de software maduras, convenciones y guias de mejores prácticas emergen. Estos estándares son creados para hacer más consistentes las cosas en ambas partes; la persona que está trabajando para crear el software, y también para el usuario final que es el que lo va a usar. Cuando MAC estableció estándares definiendo como serian y como lucirían los productos en su OS, al comienzo hubieron bastantes quejas, pero al final estas medidas han resultado en una mucha mejor experiencia para el usuario y desde el punto de vista del programador se ha hecho más fácil crear su software.

La web se está moviendo lentamente hacia el mismo objetivo; CSS empieza por hacer mas consistente el dar estilo a las páginas mientras experimentados desarrolladores web han desarrollado estructuras, que ellos ya saben trabajan bien, ya que las han usado consistentemente en todos sus proyectos.

En estos años yo he hecho los mismo, tanto con mi programación como con el diseño web. La gente dirá que este enfoque es solamente el uso de templates y que no es original; Yo les diría que las buenas ideas deben ser reusadas y que el trabajo original se puede encontrar sobre el contexto de una estructura que se encuentre establecida y trabajando.

La apariencia de las páginas tiene que ver con colores y fonts; la estructura solamente hace fácil a los usuarios navegar en la página y en el website. Una buena imagen propiamente localizada puede hacer toda la diferencia entre una página con buena apariencia y otra con mala apariencia.

Hoy en día yo doy estilo a mis páginas con CSS y algunas bien colocadas imágenes. Yo combino algunos métodos tradicionales (como dar formato usando tablas) con ocasionales usos de CSS para posicionar elementos. Yo no estoy totalmente centrado en el uso del CSS aun pero continuo explorando las posibilidades de hacerlo en un corto plazo.

Si usted quiere conseguir las bases en CSS lea mi artículo en CSS .

Si le gustó el artículo y desea saber más déjemelo saber!

Stefan Mischook.

Top