Nisu.

Concurso de CSS.

Sólo para fans del CSS ;-)

Contenido.

  1. Objetivos.
  2. Introducción.
  3. Requerimientos.
  4. Estructura del documento.
    1. Envoltorio.
    2. Cabecera.
    3. Tabla de contenidos.
    4. El cuerpo
      1. El resumen.
      2. Secciones.
      3. Bibliografía.
      4. Faq.
      5. Relleno.
    5. Navegación.
    6. Final.
  5. Especiales.
  6. Formato del CSS.
  7. Compatibilidad.
  8. Ejemplos.
  9. Acopio.
  10. Premios.
  11. Conclusiones.
  12. Bibliografía

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:
  1. Primer línea del fichero:
    /* by algo AT dominio
    Sirve para identificar al autor.
  2. Siguientes líneas: Idioma y Título, algo como:
     es Mi CSS
    en My CSS
  3. Siguiente línea */
  4. 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.
Select Style - Legal