Saltar índice de contenido - Desplazarse al índice de navegación.
Contenido: Propósito. Scripts de doble filo. Estructuras inocuas. Falsas apariencias. Puesta en práctica. Comentarios.
El uso de tecnologías como CSS, JavaScript o DOM (esta última algo menos) es ya algo habitual como apoyo para extender las posibilidades del desarrollo de webs sin demasiadas complicaciones. Pero algo que debe quedar claro, y que se olvida con facilidad, es que la base de cualquier documento sigue siendo su estructura, por lo cual hay que trabajar en el código HTML como si lo demás no existiera. A esto lo llamaremos ser amables, en alusión a todos aquellos agentes y usuarios que no soporten cierto rango de tecnologías.
Generar contenido mediante un script en el lado del cliente entraña un grave problema de accesibilidad. La utilización de instrucciones del tipo document.write oculta sin solución una porción de contenido a todos aquellos agentes de usuario sin soporte para el tipo de lenguaje utilizado en el script. Entre ellos se encuentran los robots utilizados por los buscadores importantes para agregar documentos a sus directorios.
No se trata de renunciar a crear contenidos de forma programática, sino de hacerlo desde el lugar adecuado, es decir, desde el servidor en la mayoría de las ocasiones. Sólo aquellos contenidos que dependan precisamente de la capacidad de ejecución de un script en el lado del usuario deberían ser generados sobre la marcha.
El uso de scripts para la creación de cualquier tipo de efecto, mediante la transformación de sus propiedades, queda fuera de sospecha. Se supone que simplemente "juegan" con un contenido que seguirá siendo accesible aunque no funcione. Las precauciones en este caso deben enfocarse a la posibilidad de que no funcione siempre como esperamos, lo cual no es descabellado, dado que los navegadores pueden interpretar nuestras instrucciones de forma errónea o, simplemente, diferente.
Los elementos div son simples contenedores, que nos sirven para agrupar elementos con vistas a la utilización de otros recursos, como CSS o DOM. Se da la circunstancia de que los primeros navegadores (hoy piezas de museo) que malinterpretaban el nivel 2 de CSS sólo posicionaban correctamente este tipo de elementos. De ahí que nos podamos topar con trozos de código sorprendentes, como elementos div que contienen un único elemento o que directamente sólo dan cabida a texto.
Por su parte, los span vienen a ser lo mismo, pero enfocados a los elementos en línea. Los editores wysiwyg de páginas web fomentan su uso indiscriminado, y en la mayoría de las ocasiones se utilizan como sustitución de elementos con verdadera entidad, como em o strong. Lógicamente no es un buen negocio, ya que la estructuración queda afectada negativamente.
Para huir del error que supone confiar en un nivel que estos elementos no tienen realmente, sólo hay que seguir una sencilla disciplina de uso: comenzar su implementación después de acabar la estructuración del documento mediante HTML.
Mediante el uso de CSS un elemento puede "imitar" la imagen de cualquier otro (siempre que el soporte del navegador lo permita, claro). Unos simples ejemplos:
Esto es un párrafo, aparentemente normal y corriente.
Pero lo extraño es que esto es otro párrafo.
Y esto es otro, aunque no lo parezca.
Según lo anterior, nada nos impide modificar la apariencia de un elemento. Pero no debemos dejarnos llevar por el engaño: la entidad de un elemento no cambia con su aspecto, por lo que, una vez más, debemos insistir en la importancia de la estructuración. En resumidas cuentas, CSS no puede establecer una estructura si ésta no existe en el código HTML. Por otro lado, esa potente facultad para crear interfaces gráficas nos permite precisamente despreocuparnos de la imagen y asignarle a cada elemento su nivel correcto, lo cual es una gran ventaja.
Para ilustrar este tema optaremos por un documento sencillo al que dotaremos de una interfaz mediante CSS y de un discreto efecto dinámico mediante DOM y JavaScript. Partimos de un documento totalmente estructurado, pero limpio de estilos y scripts:
Ver ejemplo (fase 1) · Ver código del ejemplo (fase 1).
Tras comprobar que el documento funciona correctamente y que tiene una estructura coherente llega el momento de pensar en la estética y los efectos visuales. Además de añadir los colores, fondos y bordes de turno, vamos a convertir el índice superior en un cuadro combinado (al estilo de un elemento select) para mostrar una parte del documento y ocultar lo demás. Para ello agruparemos, clasificaremos e identificaremos ciertos elementos, pero como puede apreciarse en el documento no se nota ningún cambio (como debe ser):
Ver ejemplo (fase 2) · Ver código del ejemplo (fase 2).
Sólo queda agregar la hoja de estilos, el script que produce el efecto dinámico, y los atributos de evento que lanzarán dicho script. Lo único que debe preocuparnos es que las rutinas se ejecuten sólo en los navegadores que las toleren. El resultado es este:
Ver ejemplo (fase 3) · Ver código del ejemplo (fase 3).
Publicado por Rusty, 29/09/02, 06:43
He mirado el codigo 50 veces porque no me lo creia, que un "white papel" como el ejemplo 2 se convierta en el 3 sin tocar el cuerpo html. estoy totalment alucinado, y todavia no lo creo del todo :-D
Publicado por isue, 29/09/02, 11:25
me paese a mi que la tecnologia css te iba a gustar mucho, te quiero animar, igual que a todo el que lo lea y no la conzca, que intentasen mirarse como funciona css ya que es una tecnologia facil de implementar y quisiera resaltar que toda web hecha con css no solo es mejor, por la rapidez de carga de las paginas y demas cosas, si no que te ayudaran a cambiar el formato visual de cualquier sitio web en mu poco tiempo y esfuerzo, animo somos el futuro.
http://html.conclase.net/tutorial/html/#tut5
Publicado por suy, 15/10/02, 10:06
La verdad que es una pena que todas las ventajas que tienen las CSS, sean desaprovechadas porque la gente ni siquiera sepa de su existencia. El poco esfuerzo de cierta compañía de Redmond, también estropea un poco algo tan práctico (y hasta divertido) como el usar hojas de estilo. Gracias por otro estupendo taller ;-)
Publicado por el caminante, 05/08/08, 06:32
recien empiezo con css, y la verdad
Publicado por el caminante, 05/08/08, 06:34
recien empiezo con css y es increible lo que se puede obtener a juzgar por los ejemplos que veo en esta pagina.
gracias por este taller.
Publicado por alhendin, 05/11/08, 09:21
Soy un novato total, os he conocido buscando un problema que me generaba y me genera el Dreamweaver 8, con respecto al centrado de las páginas, pero tengo muchas ganas de aprender y profundizar, de forma seria en todo lo que es el desarrollo Web, con esto quiero decir, aprender HTML, CSS, etc. etc. y no depender de un interprete como Dreamweavery, y no puedo decir más, que cuando he visto en la pantalla de mi ordenador el resultado del Ejemplo 3, viendo los anteriores, NO ME LO PODIA CREER.
Os felicito por la página, seguir así, y cualquier consejo, de por donde ir, para aprender bien estas tecnologías, será agradecido al máximo.
Saludos y Que tengais un buen día.
10/09/2002. sysifus. Taller nº 5.
Estás en: tierra de nómadas > tallerWeb > Dinámicos, pero amables.