Enlace permanente
Diseño para la Web 2.0
Los que visiten esta bitácora con cierta regularidad se habrán percatado de que le he cambiado el diseño hace pocos días. Se me ha ocurrido que podría aprovechar la ocasión para escribir otro de mis alegatos en favor del diseño. He pensado que esta vez puede que atraiga a los lectores si logro unir mis ideas con la tan mencionada Web 2.0. Porque ¿cómo se va a poder construir todo este nuevo tinglado de internet si el edificio no se sostiene adecuadamente? Lo primero es la Web semántica, y después viene todo lo que queráis: blogs, wikis, wikipedias, technorati, delicious y demás herramientas. Dejaré para otro artículo la explicación de algunos aspectos importantes del diseño de páginas web fijándome en mi propia bitácora con el fin de hacerlo de manera práctica.
Un nuevo diseño para la nueva internet
Desde tiempos inmemoriales, allá por mil novecientos noventa y tantos, las páginas web se han diseñado principalmente con el código HTML, pero desde aquel siglo, internet ha ido cambiando vertiginosamente, como nuestro estrés nos demuestra todos los días. Es lógico pensar que el diseño de las páginas web también tenga que ir variando para acomodarse a los nuevos retos. Los diseñadores se han inventado todo tipo de trucos para hacer que las páginas queden bonitas, y verdaderamente lo han conseguido muchas veces, aunque fuese a costa de impedir algunas funcionalidades de los documentos creados. Sin embargo, la nueva Web 2.0 requiere otro tipo de diseños más ágiles y asequibles si de verdad queremos participar todos en esta fiesta de la comunicación y del conocimiento compartido.
Muchas webs, entre ellas las que utilizan la mayoría de los gestores de contenidos, ya se diseñan de esta nueva manera. Pero queda por resolver dos aspectos importantes, desde mi punto de vista:
- Hay millones de webs en internet que todavía utilizan formas arcaicas de diseño, lo que impide el desarrollo rápido de la Web 2.0.
- Los usuarios de los nuevos diseños no saben o no pueden modificarlos para adaptarlos a sus gustos y sus necesidades. Porque si la nueva internet es el reino de la libre expresión y de la creatividad, no se entiende que los usuarios tengan que ir vestidos de la misma manera.
Hay tres formas básicas de diseñar una web: con el código HTML, con la tecnología Flash y con XHTML/CSS. Vamos a ver en qué consiste cada una de ellas. También vamos a analizar por qué ésta última es la más apropiada para los tiempos que corren.
El diseño basado en el código HTML
Las primeras páginas web se diseñaban con el código HTML, por decirlo de alguna manera, pues ese código no fue pensado realmente para el diseño sino para transmitir el contenido de forma sencilla. En este tipo de diseño, son las tablas las que se utilizan para dividir el documento en varias secciones: columnas a la izquierda y a la derecha para la navegación, una fila superior para la cabecera y otra inferior para el pie de página, y una columna central más amplia para el contenido. Dentro de estas celdas se colocan otras tablas con más filas y columnas para dividir aún más el contenido. Si a esto se le añaden fotografías por aquí y por allí, colores variados y bien puestos, y algún que otro ornamento, el resultado puede ser hasta bonito y atractivo.
Esta forma de diseño es aún la más extendida en internet. Yo la utilizo para enseñar a mis alumnos a crear páginas web, porque es la más sencilla y la que de momento da menos problemas de visualización en los navegadores. También la he empleado durante varios años en mis propias páginas, y la verdad es que es un diseño seguro, porque el código utilizado lo leen bien todos los navegadores, incluidas las versiones antiguas. Sin embargo, tiene algunas desventajas:
- La abundancia de código utilizado, que provoca una mayor lentitud en la carga total del documento.
- La ilógica representación del contenido si tenemos en cuenta las recomendaciones de las instituciones que velan por la nueva Web semántica.
- La dificultad para los buscadores de ordenar bien la información debido a ese magma de código donde se mezcla diseño y contenido con pocos indicadores precisos de orden semántico.
El diseño basado en la tecnología Flash
En 1996 surgió la tecnología del programa Macromedia Flash, que ahora pertenece a Adobe. Los diseñadores lo vieron como el maná caído del cielo, como la herramienta adecuada para ponerse a crear diseños de empresas y conseguir así traducir a internet el diseño gráfico que utilizaban en papel. Fue el principio de la web como instrumento de hacer dinero. Porque ¿cómo iba una empresa a presentarse en la Red con esos pelos de HTML? De esa manera, todas las instituciones, empresas, ministerios e incluso centros educativos que se preciaran tenían que salir a la calle vestidos de Flash (¡faltaría más!). Aquello fue lo mejor que le podía haber ocurrido a internet para que la burbuja empezara a hincharse sin parar.
Desde entonces, millones de páginas comenzaron a hincharse de engreimiento, y aparecieron animaciones por todas partes. Las animaciones en sí pueden ser de mucha utilidad para una web si lo que hacen es ilustrar el contenido, pero molestan si sólo se utilizan como accesorio. Esta ley tan elemental la han estado quebrando miles de páginas web con el único motivo de conseguir que sus contenidos parecieran serios y profesionales. Ya se han encargado los expertos de demostrar las muchas desventajas que supone el uso de Flash, y ya nos hemos fastidiado muchos usuarios hasta decir basta. Sin embargo, Flash sigue vivo y coleando como forma de diseño, y lo tendremos con nosotros durante mucho tiempo, tanto como dure la vanidad entre los humanos.
Entre las desventajas de esta tecnología podemos citar las siguientes:
- Al estar basado el diseño en imágenes, no se puede escalar la página para acomodarla a todas las resoluciones de pantalla. El colmo de este problema es que el texto basado en imagen no se puede aumentar ni disminuir.
- Los buscadores no pueden indexar los contenidos de estas páginas, perdiéndose así una de las mayores funcionalidades de la Red, pues estos documentos no tienen URL.
- Por muchos motivos inherentes a esta tecnología, la accesibilidad de las páginas creadas es escasa.
- Funciona con un plugin que no viene integrado en todos los navegadores o que el usuario puede desactivar.
El diseño basado en XHTML y en hojas de estilos (CSS)
Ya dediqué un artículo en esta bitácora, ¿Hacia dónde nos lleva internet? La Web semántica, a profundizar en este concepto originario de la Red y de sus creadores. Internet, desde sus orígenes, quiere ser una red de comunicación y de creación de conocimientos compartidos. Por tanto, cuando hablamos de la Web 2.0 como la nueva internet nos referimos a que sólo ahora se dan las condiciones adecuadas y sólo ahora disponemos de los instrumentos necesarios para llevar a cabo el objetivo de esta red de redes. Hemos perdido varios años entretenidos por los que quieren hacer de esto un circo o un mercado, y ya va siendo hora de que nos centremos en lo nuestro: el verdadero poder de la gente expresado libremente y sin diseños abstrusos que nos lo impidan. ¿Es mucho pedir? Sí, lo es, por eso hay que construir este poder desde la base con diseños transparentes.
Tim Berners-Lee, el creador de la World Wide Web, fue también el creador del XML, conjunto de lenguajes y códigos, sobre los que ya escribí en mi último artículo citado, que sustentan lo que denomina la web semántica, es decir, la web que da sentido humano a su desarrollo para una mejor organización de sus contenidos. Dentro de esos lenguajes, el XHTML es una variación de HTML para acoplarlo a estas exigencias de precisión semántica. Para quien domine el código HTML, no supone mayor esfuerzo hacerse con el nuevo, aunque sí implica una distinta ordenación mental del diseño y de los contenidos, que es de lo que se trata. XHTML es un lenguaje estricto que no deja etiqueta sin cerrar y que no permite ningún tipo de error o de tibieza por mor de la precisión en el decir, que es la mejor forma de entendernos. Con él se pretende ordenar más eficazmente todos los contenidos de internet con el fin de su mejor aprovechamiento. Su utilización tiene que ser obligatoria para todo aquel que quiera hacerse su rinconcito en internet y empezar a decir cosas.
Pero una de las mayores revoluciones, silenciosa e invisible, del diseño en internet fue la creación de las hojas de estilo en cascada (CSS), técnica que vio la luz e iluminó el firmamento virtual en 1996. Desde el principio de internet se estuvo buscando una técnica que separara el contenido de un documento y su diseño en dos partes diferenciadas pero unidas. Eso lo logró esta nueva técnica, que desde entonces ha conseguido varias proezas:
- Que los buscadores no se entretengan ni se pierdan con el código dedicado al diseño, y busquen donde tienen que buscar, dentro del contenido de los documentos de internet.
- Que los documentos (X)HTML se descarguen del peso y de las grasas sobrantes guardando el código de diseño en un archivo aparte que sólo contenga unos datos precisos y breves que indiquen al navegador el diseño de la página. De esta forma también el usuario puede modificar el código para personalizar el diseño de los documentos.
- Que podamos crear y modificar el diseño de todos los documentos de una página web cambiando sólo el código del archivo de estilos.
- Que nos sintamos cómodos y seguros a la hora de diseñar una página, que es lo más importante en este mundo cambiante de internet. Aunque, en realidad, estos sentimientos sólo se tienen cuando se utiliza la primera versión de las CSS, porque las siguientes versiones introducen códigos nuevos que no leen todos los navegadores. Pero ésa es otra historia, que ya contaremos más adelante para no ser aguafiestas.
Por tanto, si unimos estas dos tecnologías, XHTML y CSS, las páginas creadas contendrán los elementos necesarios para satisfacer las exigencias de la web semántica. Éste es el ideal, pero pecaría de ingenuo si no advirtiera de las dificultades que supone el uso de estas tecnologías, debido sobre todo a que los navegadores no procesan de igual forma estos códigos, como ya indiqué en otro artículo. Pero no debe cundir el desánimo, pues por lo general los nuevos navegadores se adaptan bien a estos códigos, y no dan muchos problemas.
Usabilidad y accesibilidad
Cuando afirmamos que la nueva internet tiene que ser para todos, no hay que decirlo con la boca pequeña. Los nuevos diseños deben incorporar las recomendaciones que nos brindan los expertos en usabilidad y accesibilidad, que constantemente realizan pruebas con usuarios para descubrir cuáles son las técnicas más apropiadas para crear páginas web útiles y asequibles para todas las personas, incluidas las que tienen impedimientos físicos o psíquicos. Estas técnicas no añaden una dificultad especial a la hora de elaborar los diseños si las tienen en cuenta desde el principio todos los encargados de diseñar y programar un sitio web. Se ha demostrado además que la inclusión de estas técnicas en el diseño de un sitio web supone un gasto escaso para las empresas, que luego mejoran su comunicación con los clientes, y con ello su rendimiento económico. Por tanto, si la comunicación es la base de la Web 2.0, sería un error irreparable crear páginas web que nos cueste visitar tanto como nos cuesta abrir algunos envases de tomate frito.
La magia de la interactividad
No podemos olvidarnos de la palabra mágica: interactividad. Sin ella internet no sería la que es y no podría llegar a convertirse en la Web 2.0, la red de la participación. La interactividad se ha conseguido todos estos años mediante algunos lenguajes de programación creados especialmente para ello. Los más conocidos son JavaScript, PERL y PHP, que también han colaborado decisivamente en el diseño general de las páginas web. Estos lenguajes hacen funcionar los nuevos gestores de contenidos y las bases de datos que los acompañan. No se puede entender el diseño web sin ellos, y de esta forma diseñadores y programadores deben trabajar más unidos que nunca para conseguir crear las aplicaciones rápidas, sencillas y completas que son necesarias para difundir la información y el conocimiento y crear los contenidos.
Todas las páginas web más conocidas y utilizadas de esta nueva versión de internet apuestan por la sencillez, el minimalismo, la funcionalidad y la elegancia, y para ello utilizan estos códigos y lenguajes. A éstos se ha unido últimamente el famoso AJAX, que promete ser el lenguaje de scripts por antonomasia de la nueva Web. En realidad no es tan nuevo, pues se trata de una mezcla de JavaScript, XML y otros códigos adheridos, lo que ya indica de por sí la variedad que subyace en este planteamiento de la Red, que no hay que confundir con la confusión, aunque no esté exento de ella.
Qué se saca de todo esto
Lo mejor que podemos observar actualmente es la constante ebullición que hay en internet. Se va por el camino correcto, pero habrá que esperar todavía unos años hasta que todo esto se aclare. El estado de las cosas es complejo, e incluso a algunos puede parecerle decepcionante. A mí me atosigan todas estas novedades que aparecen cada día, pero no puedo dejar de pensar en la meta que se pretende conseguir, que es muy positiva. Lo importante es que cada uno de nosotros contribuimos a crear esta nueva sociedad, y no debemos creer que nos la van a construir desde arriba, porque entonces no merece la pena. Así que aquí estamos todos dispuestos a ejercer nuestra libertad en la Red. Que no lo impidan los gobiernos, el mercado, la ignorancia, la tibieza. Ni tampoco el mal diseño.
Otros enlaces de interés
(En los artículos citados de mi bitácora y en los que enlazo en la categoría correspondiente aparecen muchos enlaces informativos.)
- Diseño web. Categoría de esta bitácora.
- Web Educativa 2.0. Wiki informativo de Aníbal de la Torre sobre la Web 2.0 en el ámbito educativo.
- Un Tao del diseño Web. Artículo de John Allsopp. Gracias a Javier Escajedo por este enlace.
- Flash paso a paso. Blog de Ángel Puente. Gracias a Isidro Vidal por este enlace.
Por Alejandro Valero en Diseño web el 14.01.06 con 36 comentarios
Fatal error: Call to undefined function sqlite_open() in /srv/disk4/avalerofer/www/avalero.awardspace.info/dispersas/dispersas/inc/link.php on line 341