Capitulo 3: CSS
3 CSS
3.1 Introducción
3.2 Maquetación
3.3 Uso en el proyecto Ninbox
3.4 Conclusiones
3.1 Introducción
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Por ejemplo, el elemento de HTML indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como . Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta debía disponer de la información si se deseaba un diseño consistente para una página, y además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta no debería proporcionar información sobre como va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar : color, fuente, alineación del texto, tamaño, y otras características no visuales como definir el volumen de un sintetizador de voz (véase Sintetización del habla), por ejemplo.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:
Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web remoto, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño.
Hay varias versiones : CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium (W3C). Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores¹. CSS2, sin embargo, está solo parcialmente implentado en los más recientes.
3.2 Maquetación
Aunque de un tiempo atrás los diseñadores web han optado la utilización de tablas para el diseño de páginas webs. De esta forma, el uso que daban a las tablas era como elementos de estilo cuando su verdadero cometido es albergar contenido. La maquetación CSS consiste en utilizar capas (layers) que en HTML se definen con las marcas
Ejemplo.html
...
dentro del body
Contenido: imágenes, texto, etc.
Estilo_Ejemplo.css
#capa1 { /*aquí definimos las propiedades de la capa*/
background-color: #ffffff;
margin: auto;
color: #000000;
}
Además también se pueden aplicar extensiones CSS no estándares como éstas:
Extensiones.css
#capa2 {
-moz-border-radius: 2.5px;
-moz-opacity: 0.55;
filter:alpha(opacity=55);
}
En este caso -moz-border-radius es una propiedad de los productos Gecko el cual puede moldear el radio de elementos de una página, -moz-opacity es una implementación también de los motores de rendering de Mozilla y por último filter:alpha es una extensión propietaria de Internet Explorer de Microsoft.
3.4 Uso en el proyecto Ninbox
En el sistema existira una hoja de estilos principal que sera cargada por defecto dentro de cualquier página que visitemos. En esta hoja de estilos se especifican todos los atributos de las diferentes capas, links... para la correcta maquetación y presentación de la web en los diversos navegadores.
Un punto muy importante es el uso de tamaño relativos y no absolutos. La capa principal del documento, tendrá un tamaño relativo a la resolución del dispositivo que utilicemos. De esta manera aseguramos una correcta visualización.
Sin embargo en dispositivos portatiles o lectores de pantalla, se tendrá la posibilidad de utilizar una presentación maquetada de manera simplista, es decir, sin ningún elemento de decoración que pueda retardar la carga de la web. Todas las imagenes que existan en el documento original serán sustituidas por links a las propias imágenes asegurando así que aunque no exista pérdida de información no existe demora en la carga de la web. En este modo de visualización se utilizará una hoja de estilos especial que proporcionará estas propiedades.
Existe un modo de visualización para impresión, este modo será usado para visualizar articulos y posts en modo adecuado para la impresión. En este caso se utilizará una tercera hoja de estilos para asignar propiedades adecuadas para su correcta maquetación. Se definirán propiedades de página que permitan una impresión paginada adecuada, definidas en las recomendaciones CSS3 de W3C.
Un ejemplo de este tipo de hojas recomendada por el organismo W3C sería:
address,
blockquote,
body, dd, div,
dl, dt,
form,
h1, h2, h3, h4,
h5, h6,
object, ol, p,
ul,
hr, pr e { display: block }
li { display: list-item }
head { display: none }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { padding: 8px; line-height: 1.33 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .83em 0 }
h3 { font-size: 1.17em; margin: 1em 0 }
h4, p,
blockquote, ul,
form,
ol, dl, { margin: 1.33em 0 }
h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6 { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
hr { border: 1px }
ol, ul, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
br { content: "\A" }
@media print {
@page { margin: 10% }
blockquote,
pre { page-break-inside: avoid }
}
En estas tres hojas de estilo existirá una especificaciones para lectores de pantalla, definidas en CSS2 de W3C.
3.4 Conclusiones
Las hojas de estilo nos proporcionan un mecanismo modulado y eficaz para maquetar el contenido de la web. Además nos proporcionan atributos como las pseudo-clases que permiten añadir efectos a los elementos de la web, para conseguir una mejor usabilidad sin tener que recurrir al uso de JavaScript. Aunque el sistema Ninbox utiliza Javascript para muchas partes del sistema está diseñado para que que las partes principales de la web no necesiten su uso, gracias al uso de CSS, además proporciona mecanismos de usabilidad paralelos en caso de que el usuario tenga desactivado Javascript en el navegador.
Existen propiedades no estandarizadas en la W3C para los diferentes navegadores que nos permiten la posibilidad de añadir efectos avanzados, como es el caso del canal alpha. Su uso no esta desaconsejado , siempre que se tenga en cuenta que debe ser empleado en elementos secundarios de la web , que no afecten directamente la usabilidad y que además se compruebe que en caso de que no sea compatible con el navegador utilizado la visualización aunque no sea la pretendida sea correcta y no afecte la maquetación general de la web.
En cuanto al tipo de maquetación de la web se deben tener en cuenta los siquientes aspectos:
Segun el estudio que se ha realizado sobre legibilidad, las fuentes de tipo sheriff , es decir, aquellas que en los finales de las letras tienen remates, como por ejemplo la times new roman son más fáciles de distinguir por los lectores cuando el material esta imprimido. sin embargo en pantalla este tipo de letras no son tan "distinguibles" por el pequeño blur que introduce la resolucián de la propia pantalla. En este caso lo aconsejable es utilizar tipos de fuente sans sherif, es decir sin esos remates en los bordes, como es el caso de la Arial.
Respecto al tamaño no hay una norma estricta, pero al menos en la impresión se aconseja 12 px, y muchas web también han adoptado este tamaño como el más adecuado.
Si existe mucho contenido en la web de lectura se debe poner un color al fondo ( aconsejable casi blanco ) y un color de letra (acosejable muy oscuro) que contrasten mucho.
Los parrafos no deben tener un ancho muy largo , porque asi es más dificil seguir la lectura,.
Lo aconsejable es realizar un maquetado similar a los periódicos.
Por ultimo que las lineas del parrafo tengan sentido por si mismas.
La introdución ha sido extraido de Wikipedia®
El contenido está disponible bajo los términos de la Licencia de documentación libre de GNU
Copyright (C) 2005,2006 Proyecto Ninbox, Carlos Serrano Sánchez
Copias exactas y la distribución de este artículo se permiten en cualquier medio, siempre que esta nota sea conservada.
