Estás en Inicio / Editorial / Maquetación

04.12.2007

Maquetando con hojas de estilo

Por Juan Manuel Lemus | 4,956 Lecturas
Archivado en: CSS, Maquetación

En la actualidad se ha vuelto muy famoso el concepto de separación de estructura y diseño (HTML de CSS). Hasta que punto debe ser llevado este modo de estructurar un sitio y que ventajas ofrece son solo algunas de las preguntas que trataremos de resolver en este artículo.

CSS nació de la propuesta de dividir la estructura del documento de su diseño. La problemática que se venía dando en el viejo orden era que los documentos eran muy difíciles de mantener. Si por ejemplo, suponemos un sitio con alrededor de 100 o más documentos el cambiar el diseño a cada uno era muy laborioso.

De esto ha pasado algún tiempo y las exigencias han cambiado. El uso de CSS se ha hecho más cotidiano tanto que ya es un estándar. Como en todo desarrollo, cuando separamos componentes estamos ahorrándonos tiempo y esfuerzo. CSS es ideal para todos los proyectos no importando su tamaño.

Clases y valores por defecto:

Hace algún tiempo leí acerca de este tema en el sitio de Shapead y me llamó la atención tanto, que preparé la traducción. A manera general el tema mostraba las razones para definir valores por defecto para la hoja de estilo que estamos utilizando.

Como muchos sabemos existe un gran variedad de navegadores en el mercado y cada uno trabaja de manera distinta. Aparte de que cada navegador tiene características particulares, trae consigo distintos valores por defecto para los documentos.

La gran ventaja de utilizar esta técnica es que nos permite llevar el desarrollo de nuestra plantilla de una manera más estándar. Por ejemplo, es recomendable definir los valores por defecto de los márgenes y de las sangrías, el tipo de letra, el interlineado, etc. Para que todos los navegadores muestren en la misma posición los elementos en pantalla.

Además es un técnica interesante el ir creando clases generales con nombres característicos que establezcan valores como el texto de decoración de la letra, el espaciado, etc. Con lo cual nos evitamos ir definiendo mismas propiedades para elementos distintos.

También, podemos definir y reutilizar valores de clases para ir creando los estilos en una especie de propiedades con herencia y que conforme vaya especializándose el diseño para un objeto; se vaya añadiendo propiedades específicas para el mismo.

Técnicas para modelar la hoja de estilos:

Es gracioso que cada webmaster tenga un modo particular de modelar su hoja de estilos. Existen varios puntos a cubrir como:

El orden en que se escriben las clases y propiedades: una de las técnicas más populares es ir dividiendo por secciones a la vez de ir comentando ciertos puntos y clases dentro del CSS. También podemos encontrar el caso de ordenar las clases por tipo y alfabéticamente (tanto nombres de clases como propiedades).

Crear un archivo CSS aparte por cada navegador con ajustes a las clases CSS que definitivamente no pudieron estandarizarse o utilizar los famosos hacks por navegador (una medida algo desesperada; aunque divertida).

Los nombres de las clases: casi todos coinciden en que es importante que los nombres de las clases sean descriptivos y que denoten incluso el ámbito en el que actúan en la página. Una buena técnica podría ser ir definiendo la clase de lo general a lo específico como: news_title_tiny ó administrator_menu_subitem.

Hojas de estilo para varios navegadores:

Al tener tantos navegadores con diferentes características es inevitable que el diseño que estamos realizando no se vea bien en alguno de ellos. En mi caso; cada vez que voy realizando cambios en la hoja de estilo voy probando continuamente en cada uno de los navegadores como se muestra la página.

Una buena implementación de CSS no contendrá ajustes o hacks. Aunque muchas veces esto es inevitable, es necesario que conforme nuestra experiencia avanza, vayamos disminuyendo el uso de este tipo de técnicas que muchas veces se salen de los estándares.

Si separamos correctamente HTML de CSS, cuando quitemos la referencia a la hoja de estilo, este deberá verse y leerse de manera vertical sin ningún tipo de diseño. Esto es una característica que también nos permitirá aplicar de mejor manera las técnicas SEO.

Algunas propiedades olvidadas de CSS 2

Para quienes utilizamos editores con soporte CSS y la característica Smart Tags el ver propiedades que nunca utilizamos en la lista seguro que nos intriga. Por qué será que casi nunca las utilizamos: talvez es desconocimiento o simplemente su uso está fuera de foco. Para cualquiera de los dos casos aquí preparo una lista de algunos de esos elementos perdidos en CSS 2:

• azimuth: indica el ángulo horizontal o lateral del sonido en hojas de estilos Aural.
• caption-sice: al igual que la anterior pertenece al orden de las propiedades para hojas de estilo Aural. Su objetivo es posicionar el elemento caption de una tabla arriba o abajo.
• clip: esta propiedad me ha llamado mucho la atención. El objetivo de la misma es mostrar una región de un elemento posicionable (con atributo position: absolute). En CSS 2 la única forma que admite es un rectángulo pero se tienen planes de extender el soporte a otras formas. Me ha parecido muy parecida, en cuanto a manejo y comprensión al elemento MAP.
• column-span: el equivalente a COLSPAN para elementos TD.
• content: este atributo es bastante peculiar y definitivamente sale del estándar de separar el contenido del diseño. Funciona solamente con las seudoclases cue-before y cue-after. Su objetivo es poder incluir contenido HTML antes o después de la definición del objeto.
• direction: permite definir la posición del texto de un elemento: es decir ya sea de izquierda a derecha o viceversa. Actualmente no es soportada por ningún navegador.
• elevation: tiene un funcionamiento similar a azimuth.
• filter: para muchos no es una propiedad desconocida. Es la encargada de aplicar filtros de efectos a los elementos CSS y solo está disponible para Internet Explorer. Con ella se logra es famoso efecto de transparencia de imágenes PNG en versiones anteriores a Internet Explorer 7.
• letter-spacing: establece un espacio de separación entre letras.
• orphans: indica el número mínimo de línea que debe tener un párrafo que debe ser visible en la parte inferior de la página cuando ocurre el salto de página. Generalmente utilizado para impresiones.
• page-break-after, page-break-before: define el comportamiento del contenido para el salto de página cuando el documento es enviado a la impresora.
• pause, pitch, play-during, richness, speak, stress y voice-family: controles del sonido para hojas de estilo tipo Aural.
• size: define el tamaño y la orientación del papel para la impresión.
• text-indent: determina el tamaño de la sangría en la primera línea del párrafo.
• widows: el mismo propósito de orphans, pero en la posición de arriba del elemento.

Conclusiones:

CSS es muy interesante y posee muchas cualidades. CSS no es solamente utilizado para hacer el diseño de la página sino también de otros elementos como la versión imprimible y herramientas para voz. Muchos dicen acerca de la necesidad de diseñar la versión imprimible de la página. Ahora que vimos los elementos olvidados también podemos incluir la versión escuchada.

CSS está evolucionando y ahora esta próximo el lanzamiento de la tan esperada versión 3 que incluye muchas nuevas características ya solicitadas hace mucho tiempo incluyendo el regreso de @font-face para aquellos amantes de la era Web 2.0 y de las tipografías.

NOTA: para quienes no sabíamos que eran las hojas de estilo Aural (así como yo, antes de escribir este artículo), les comento que este tipo de CSS es utilizado cuando la hoja de estilo describe las propiedades del sonido. Como podemos recordar CSS puede ser utilizado en el medio de Internet, para Impresiones y para describir el comportamiento en medios de reconocimiento de voz y sonidos.

Editorial

• Todos los editoriales
• Lo más leido
• Lo más comentado
• Aspectos técnicos
• Desarrollo Web
• Diseño
• Negocios
• Principiantes
• Navegando
• Semblanza
• Enviar colaboración

Actualidad

• Todas las notas
• Eventos
• Enviar colaboración

Empresas

• Por países
• Por temática
• Sugerir empresa

Foros del Web

• Todos los foros
• Últimos temas
• Diseño web
• Programación web
• Negocios web
• Temas generales
• Compartiendo
• Admistrando sitios
• Seguridad y Redes
• Archivo

Corporativo

• Acerca de
• Nuestras conferencias
• Preguntas frecuentes
• Créditos
• Contacto
• Política de Privacidad

Boletín

• Suscribirse
• Archivo de boletines

Sitios amigos

• AmigoMensajero
• Buscahost
• DesarrolloWeb
• Cristalab
• Infospyware
• Programación
• Webestilo
• Webexperto
• Webtaller