Objetivos.
Se trata de disponer de una colección de CSS que permita, aparte de ponerse
al día en CSS, que cada uno vea la página como más le guste usando el
selector que hay al final. El CSS se aplica no a una página sino a un formato
genérico de páginas "serias".
Introducción.
El diseño clásico de páginas web se basa en los mismos criterios que el diseño
de un folleto o de una portada de libro. Normalmente se trata de realizar dibujos
que rellenen completamente una página pensada para una determinada resolución.
La página suele ser una tabla con muchas imágenes troceadas y encajadas
para obtener la apariencia de solapamiento deseada.
Con ello se consiguen efectos estéticos muy buenos, pero las páginas resultan difíciles
de mantener, y cambiar algo del diseño significa tener que reconstruir por completo
la o las páginas. Además la página es escasamente accesible y sólo se puede
ver con navegadores avanzados, de modo que muchos sites acaban construyendo una
versión accesible si requieren un mínimo de cortesía.
Frente a ello, los efectos visuales logrados con CSS son normalmente menores,
pero sobre todo requieren que el constructor del documento trabaje con HTML directamente
y con las ideas muy claras. Otro escollo es que ¡hay que saber CSS!.
El CSS de por sí solo no es la mayor dificultad, es la construcción misma del documento, que
debe ser suficientemente estructurado.
Todo ello incrementa la dificultad de construir programas asistidos para diseño con CSS, con
lo que
los diseñadores que saben dibujar pero poco HTML, huyen del CSS sistemáticamente.
Un escollo más es
la incompatibilidad en la visualización de los distintos navegadores y la
insuficiente implementación de CSS en casi todos.
Pero las ventajas son obvias. Cambiar el diseño de una colección de documentos es
simplemente rehacer el CSS. Si el navegador no acepta CSS la página se visualiza
en estilo llano, lo que la hace automáticamente accesible.
Además, por ejemplo, en esta página el lector puede
elegir él mismo el CSS y visualizarla como más
le apetezca.
Requerimientos.
Se trata de escribir un CSS para una colección de documentos, no para uno solo.
Por tanto es importante inicialmente determinar con claridad las características
de esos documentos.
Hacer un CSS para cualquier documento es imposible. Por ello el documento
tendrá que ajustarse a un patrón estricto.
Algunas características generales son:
Estructura del documento.
El documento tiene al principio un resumen o similar, luego una tabla de contenidos,
luego las distintas secciones y subsecciones, para acabar con una bibliografía
y un menú de navegación. Al final de todo, el selector de estilo y un
espacio en blanco para navegabilidad. Para entender los detalles paso a explicarlos, y
también puedes mirar la
plantilla.
Envoltorio.
El documento entero es un <div id="todo"> . Ello se debe a que algunos navegadores
no admiten reposicionar el propio body, por lo que metemos todo lo que va en el body dentro de este div.
Cabecera.
Es el primer objeto, debería estar siempre presente.
Es un <div>. Su id es
cabecera y contendrá
un objeto con id
cablogo (puede ser una imagen), un <h3>,
un <h1>, un <h2> y un elemento con id
autor,
siempre en ese orden, pero son todos opcionales.
Tabla de contenidos.
Es un <div>. Su id es
contenido. Contiene una lista <ul> o <ol>, y puede contener un <h3> antes de la lista, pero nada más.
Este mini
script, me ayuda a preparar los
contenido.
Es un apartado opcional pero probable. Se compone de todos los campos H del documento a partir del cuerpo.
Cada enlace tiene una clase asociada en función de si hace referencia a un H3 o un H4, etc, la clase será toc_3, toc_4, etc.
Obsérvese que campos de tipo H1 y H2 no aparecerán. Los H que no están en el cuerpo son de clase toc_nc, lo que es útil por si no quieren
mostrarse en un CSS determinado.
El cuerpo
Es un <div> que va a continuación de la cabecera, sólo puede haber uno y su id es
cuerpo.
Contine un resumen, secciones, blibliografías y faqs, todos opcionales y al final un <div> cuyo id es
rellecuerpo que es lo único obligatorio.
Paso a explicar las partes.
El resumen.
Es un <div>. Su id es
resumen. Si contiene elementos H serán <h3>.
Secciones.
Cada sección es un <div> separado.
La primera sección será de clase
bloque1. Si tiene una subsección será de class
bloque2 y así hasta bloque 4.
La primera sección tendrá un título de tipo <h3>, la subsección de tipo <h4>, etc. y así hasta <h6>.
Algo como:
<div class="bloque1">
<h3>Secc.</h3>
bla bla
<div class="bloque2">
<h4>Subsecc</h4>
bla bla
<div>
<div>
El uso de párrafos <p> será opcional.
Bibliografía.
Es de clase
biblio. Contiene una o varias listas <ul> o <ol>.
Puede aparecer varias veces en el documento.
Faq.
Es de clase
faq. Contiene una o varias listas <ul> o <ol>.
Puede aparecer varias veces en el documento.
Cada pregunta es de tipo
resalta, ver ejemplos.
Relleno.
Es un único <div> con id
rellecuerpo cuya misión es crear un relleno al final del cuerpo para
que sea navagable a partir de la tabla de contenidos.
Debería definirse sólo en el
@media screen.
Navegación.
Ya fuera del cuerpo, es la sección/secciones dedicada a enlaces no bibliográfico, del tipo selector de varias páginas, barra de navegación rápida, etc.
Es un <div>, con una única <ul> o <ol>. Su id es:
- id = navega. Para navegar entre documentos relacionados.
- id = extern. Para vínculos externos tipo navegación rápida (no bibliográficos).
Además de la lista puede haber una cabecera <h3> y nada más.
Cada elemento de la lista puede contener un span de clase
noboton, con el
oscuro propósito de que el enlace, excluyendo el
noboton no ocupe más de 4em
por si algún CSS lo implementa en plan botonera. Obviamente, como en los demás casos, si el documento no
cumple el requisito el problema está en el documento, no en el CSS.
Un ejemplo de
noboton, puede ser:
<li><a href="loquesea">Tararí<span class="noboton"> new web site.</span></a></li>
Sólo puede haber un
navega y un
extern en el documento.
Final.
Se incluye al final el selector de estilos que va en un <div> con id
zonafinal,
donde suelo poner también un enlace
Legal. También va otro <div> con
id
rellefinal que es espacio vertical para que la tabla de contenidos
sea realmente navegable, no es incompatible con
rellecuerpo. Los elementos
zonafinal y
rellefinal son obligatorios en el documento.
Especiales.
Se definen unas clases especiales:
class bajar para cosas descargables
class atenc para señales de atención
class resalta para marcar palabras destacadas.
class resaltamas para marcar palabras más destacadas.
Formato del CSS.
La única restricción es que al inicio debe de haber un comentario, según:
- Primer línea del fichero:
/* by algo AT dominio
Sirve para identificar al autor.
- Siguientes líneas: Idioma y Título, algo como:
es Mi CSS
en My CSS
- Siguiente línea */
- Resto: el CSS
El patrón realmente interpretado es:
|^/\* *(.*? AT .*?)\n(.*?)\n\*/|s
y sobre la segunda coincidencia se aplica:
/^ *xx *(.*)/m
siendo xx las dos letras del idioma. Al mostrarlo, si el idioma detectado por el selector
(según
esto) está presente, se muestra ese título, si no, inglés, que es el único idioma obligado.
Como ejemplo:
/* mm AT nsiu.org
es Explorer abstenerse
en Not for explorer
ca No per al explorer
*/
Compatibilidad.
Se trata de que sea lo más compatible con las ultimas versiones de Explorer, Mozilla y asociados, Opera y Konqueror, pero
puede hacerse un CSS que sea específico para un navegador. Puede ser interesante por ejemplo, hacer un CSS sólo para Explorer,
porque el CSS que admite Explorer es pobre, pero admite javascript en el propio CSS, lo que le da una potencia muy superior.
Ejemplos.
Ver el código fuente HTML de este documento y
éste otro.
Éste es un documento con un contenido intratable que mediante javascript lo hace visible.
La plantilla latinaja es
ésta.
Acopio.
Si no has muerto en el intento y tienes un CSS, me lo puedes hacer llegar:
- Lo pones en una página web y cada vez que lo actualices me lo notificas vía mail, o bien.
- Lo insertas tu mismo vía web (necesitas un certificado con NIF).
Premios.
Todos los participantes tienen premio, a elegir entre:
- Una peli de los hermanos Marx.
- Un huevo Ki*der.
- Un video inolvidable.
El diseño más molón lo pondré por defecto.
Conclusiones.
Ninguna por el momento.