Usualmente cuando iniciamos nuestro recorrido por el mundo de la programación web y comenzamos a elaborar nuestras primeras páginas, nos enfocamos tanto en el manejo del HTML y su estructura que mantenemos muy poco, sino es que nulo, contacto con un lenguaje de estilo, desconociendo o incluso muchas veces tratando de ignorar su importancia, sin tener realmente idea de su relevancia para el éxito o fracaso de nuestros sitios.
El CSS, por sus siglas en inglés Cascading Style Sheets, es en la actualidad el más importante y usado de este tipo de lenguajes. Su inicio como tal data de la mitad de la década de los años 1990s, aunque si hablamos de “hojas de estilo” nos podríamos remontar hasta finales de la década de los 1960s pero sería abrumarnos con cosas que no necesitamos en estos momentos, fue a finales del año 1996 cuando la W3C (World Wide Web Consortium) organización que desarrolla estándares para guiar la expansión de la Web, publicó la primera recomendación oficial a la cual se le dio el nombre de "CSS nivel 1".
A partir de ese momento la expectante influencia del CSS sobre el nuevo desarrollo de sitios web se volvió inminente, la estructura, estilo y diseño de los sitios desarrollados con HTML pasaba a ser controlado por este lenguaje que podía manejarse de un cierto modo autónomo y reutilizable, haciendo que las decenas de líneas repetitivas para darle estilo a una etiqueta pasaran a la historia.
Pero no todo fue “azúcar y flores” para el proyecto, los programadores, principalmente los principiantes, tendían a omitir en gran medida dicho lenguaje al momento de desarrollar su sitio, el HTML puro y primitivo seguía dominando en las estructuras y etiquetas como esta se seguían viendo cotidianamente en un sitio cualquiera:
<TABLE BGCOLOR="#000000" BORDER="1" BORDERCOLOR="#FFF000" WIDTH="100" HEIGHT=”20”><TR><TD><FONT COLOR="#FFFFFF" SIZE=”10”></FONT></TD></TR></TABLE>
Dicho tipo de sentencia se podían repetir una y otra vez, cada vez que creábamos una tabla nueva, insertábamos más celdas dentro de una misma fila o más filas en la tabla, lo cual generaba un gran número de líneas basura en nuestro código.
Con el CSS esto no pasaba, solo se tenía que definir una sola vez y se podía reutilizar las veces necesarias para darle un estilo uniforme a los sitios, el diseño de la anterior tabla quedaría definido de la siguiente manera:
table{
background: #000000;
border: 1px solid #FFF000;
width: 100px;
height: 20px;
font-size: 10px;
color: #FFFFFF;
}
Si bien a simple vista se ven bastantes líneas, hay que tener en cuenta que estos atributos ya no tenían que ser definidos en cada etiqueta, es decir, al momento de escribir en mi código HTML la etiqueta <table>, sin más ni menos, automáticamente tomaba todos estos atributos. Claro que para ello debíamos incluir el CSS en nuestro código HTML, ya sea de manera interna o externa, en artículos posteriores veremos más a fondo esto y ejemplos prácticos del lenguaje.
Nota del editor.
Ya tienes pagina web? buscas hosting de calidad?, visita
Okhosting.com la empresa numero uno de Web hosting dominios y páginas web en
Mexico, conoce nuestros planes de Hosting ASP y PHP , y si aun no
tienes nombre de dominio ( dirección única en internet www.tuempresa.com)
regístralo al mejor precio, venta de
dominios www.tuempresa.com, y dominios .MX, si aun no cuentas con un sitio web
ahora es facil, Crea tu pagina web con el programa Sitebuilder SW, con
el cual tendrás una página profesional en minutos sin conocimientos de diseño ni
programacion. Visita okhosting.com y sal a la luz del internet
Pero aún ante las ventajas que ofrecía este lenguaje los programadores seguían sin usarlo, ¿A qué se debía esto?, bueno en realidad no se tiene una respuesta única o exacta para definir el fenómeno que ocurría con las “hojas de estilo”, ya que fueron diversos factores los que pudieron influir, como lo fue el poco soporte dado por los navegadores más populares de la época, su poca popularidad a finales de la década de los 1990s, quizás también por la poca influencia de los diseñadores gráficos en el desarrollo de sitios en aquellos años, o por la poca difusión que se le daba en escuelas y centros universitarios fuera de Estados Unidos, donde solamente se seguía enseñando el HTML en su forma más básica.
Lo cierto es, que a partir de la primera década del Siglo XXI el “boom” del CSS surgió, sitios enteros se reformaron y empezaron a darle un toque de “Estilo” a sus páginas proporcionando un nuevo aire a la Web y dando paso a una mejor estructuración del código, esto en gran medida producido por sucesos como la creación del primer navegador con soporte completo de CSS 1, que fue la versión para Mac de Internet Explorer 5 publicada en el año 2000, así como la incursión de un mercado cada vez más joven en el uso del Internet, el cual se veía atraído por grandes y mejores diseños en los sitios.
Si bien la programación siempre ha sido y será lo más importante para el "soporte" del sitio, muchas veces el éxito o fracaso comercial del mismo se basa más en su diseño y la manera en que presenta la información, que en sus scripts o manejo de base de datos. Está claro que sin una buena programación el sitio sería nada más otra “cara bonita” inservible, pero tenemos que recordar que los “if”, los “for” y los “arrays” no lo son todo, no hay que olvidarnos de las posibilidades que nos ofrecen las hojas de estilo y de los distintos mercados que podemos atraer con una buena imagen comercial, una cosa no está peleada con la otra, así que debemos aprovechar las distintas herramientas que se nos ofrecen para proporcionar el mejor servicio a los clientes.
El estudio de las hojas de estilo no significa nada más manejar colores, imágenes y transparencias, la aplicación de ellas para realizar montajes y estructuras de páginas Web vino a sustituir definitivamente el uso de tablas, framesets, iframes y otros trucos tan populares en la década de los 1990s para realizar esta función, que si bien eran útiles, sólo venían a complicar el procesamiento en navegadores, así como el orden y legibilidad del código.
Gracias al CSS, el desarrollador web actual cada vez se vuelve más consciente en la importancia de utilizar la declaración de atributos como id, class, name, en las etiquetas, lo cual le ayuda a crear un diseño más específico y personalizado para cada elemento de la estructura, permitiendo experimentar con nuevos estilos.
Este lenguaje de estilo ha permitido establecer un mejor concepto de maquetación de sitios, instaurando el manejo de distinción de elementos basado en la información, separando el contenido relevante y lo decorativo que únicamente es utilizado para la ambientación del sitio, lo que a su vez ha producido que el tamaño de las páginas construidas de esta forma sea menor y por lo tanto el ancho de banda y tiempo consumido disminuya.
La web ha cambiado mucho desde aquellas páginas con fondos chillantes en mosaico, con gifs bailarines y canciones MIDI de Star Wars, actualmente no saber la importancia del diseño de información y limitarse a usar únicamente HTML (o XHTML) para desarrollar un sitio puede ser mucho más costoso de lo que parece, la accesibilidad, manejo, procesamiento y velocidad de los sitios web pueden marcar la diferencia entre triunfar o morir en el intento.
Autor: Daniel Navarro
Ok Hosting, Investigación y Tecnologia