Conceptos
- Qué es internet y cómo funciona la web
- La web y el diseño gráfico
- El problema de la información
- Convenciones y limitaciones
Qué es internet y cómo funciona la web
Internet tiene sus orígenes en varios experimentos que tuvieron lugar principalmente en Estados Unidos durante los años sesenta y setenta. La idea era construir una red para compartir información. Así, en caso de perder la información en un sitio, ésta sigue existiendo en otro lugar.
Internet es el conjunto de todos y cada uno de los ordenadores y dispositivos que están conectados a ella, de la misma forma que una cadena es el conjunto de sus eslabones. Todos estos ordenadores se comunican entre ellos mediante una serie de protocolos, destacando actualmente el http, que posibilita la transmisión de páginas web. Otros protocolos son los de correo electrónico, transmisión de ficheros (FTP), mensajería instantánea, etcétera.
Centrándonos en la web, ésta se compone de documentos que pueden enlazarse entre sí mediante hiperenlaces. Estos documentos se basan en el formato html, que a través de los años ha experimentado muchas mejoras, lográndose documentos más sofisticados y consistentes.
Estos documentos se almacenan en un ordenador (servidor), que luego sirve a otros ordenadores (clientes). Una vez transferido el documento, este se visualiza en un navegador web, como Netscape Navigator o Microsoft Internet Explorer.
La web y el diseño gráfico
En los primeros años de la web era difícil que los diseñadores gráficos tradicionales se interesaran por el medio, ya que no había opciones para cambiar la estructura y apariencia de las páginas. Todas las páginas eran visualmente iguales, centradas absolutamente en la información textual. No es extraño, ya que la web fue inventada por un físico, no por un artista gráfico. Sin embargo, esto tenía su parte positiva: navegar era muy fácil, ya que el sistema de uso era el mismo en todas partes.
No obstante, hacia la mitad de los años noventa las empresas empezaron a ver negocio en internet, y se hizo necesario mejorar la presentación de las páginas: las empresas invierten en marcas distintivas y reconocibles, no en parecer otra oscura marca más. Dicho y hecho, ante las limitaciones del html los navegadores comenzaron a estirar sus posibilidades, usando etiquetas fuera del estándar, creando código incompatible y, en general, estirando las cosas hasta límites ridículos.
En estos años, más y más diseñadores gráficos comenzaron a interesarse por la web, ya que gracias a herramientas visuales como Macromedia Dreamweaver podían editar páginas de la misma forma que dibujaban con Macromedia Freehand o maquetaban con Quark Xpress. Las herramientas visuales, sin embargo, alejan a los diseñadores de la esencia de la web, vendiéndoles la idea de que la web es lo mismo que un libro o un folleto pero encapsulado en una pantalla de ordenador, cuando no es así.
Hay que tener en cuenta unas cuantas cosas:
- La web es un medio efímero.
- Las páginas nunca están terminadas. Cambian continuamente: se actualiza la información, se rediseña la presentación…
- Todo el mundo no percibe igual la web.
- Existen muchas plataformas y navegadores distintos, con diferentes enfoques: por ejemplo, Internet Explorer es un navegador gráfico de sobremesa, mientras que Lynx es un navegador que funciona en modo texto e ignora los gráficos. También existen navegadores en los teléfonos móviles y PDAs, y los lectores de pantalla, que leen el contenido de las páginas en voz alta. Además, cada sistema operativo tiene sus peculiaridades… y así hasta el infinito.
- La web ofrece un acceso inmediato a la información.
- La web evita trámites físicos como buscar en libros, caminar hasta la biblioteca… se agiliza el acceso a la información gracias a los hiperenlaces: los documentos html no son entidades aisladas, sino que forman un tejido, se relacionan entre ellos.
- La web tiene posibilidades multimedia.
- A la información textual puede añadírsele vídeo, gráficos, interactividad, sonido…
- La web responde de forma dinámica a las acciones del visitante.
- El usuario espera ciertos comportamientos de las páginas web, como que los enlaces hagan algo cuando se pase el puntero del ratón por encima. Esto ayuda a navegar más cómodamente.
- La web NO permite al diseñador un control absoluto de la experiencia visual.
- Esto puede ser lo más frustrante al principio, si estás acostumbrado al diseño impreso, pero hay que adaptarse y aceptarlo. Un buen diseñador acepta los límites que le impongan y trabaja ciñéndose a ellos.
El problema de la información
Separación entre contenido y presentación
Como quedó claro que extender el html para mejorar la presentación de las páginas hacía más mal que bien, el W3C, consorcio encargado de desarrollar las tecnologías estándar para la web, se puso manos a la obra y desarrolló otro lenguaje, pensado específicamente para controlar la apariencia de los documentos: las hojas de estilo en cascada o css.
Esta decisión de separar la esencia del documento, que es la información textual, de la presentación, tiene una serie de ventajas:
- Se simplifican los documentos.
- Éstos pesan menos y se descargan antes.
- Se facilita el desarrollo web.
- Se mejora la portabilidad de las páginas: un mismo documento puede servir para diferentes receptores.
Para lograr una separación conveniente entre contenido y presentación hay que distinguir claramente ambos. Que estén juntos, pero no revueltos.
El contenido es la información en forma de texto que alberga la pagina y que es la base de la misma. Debe estar bien estructurada, esto es, que haya una jerarquía clara y coherente entre los diferentes elementos. Esta parte debe ser accesible con el más rudimentario de los sistemas de navegación por internet (por ejemplo, el navegador de texto Lynx), y para ello usaremos el lenguaje xhtml, una versión mejorada del antiguo html que es más sencilla de usar.
También pueden considerarse contenido las imágenes, siempre que acompañen al texto y no sean un mero adorno. Lo mismo se aplica al contenido multimedia como vÌdeo o animaciones flash.
La presentación debe basarse en las hojas de estilo en cascada o css. Permiten controlar de una forma sencilla y racional colores, tipografías, tamaños, posiciones, imágenes decorativas… lo ideal es que la presentación realce la estructura del documento, que cree el ambiente adecuado para el contenido.
Estructura de la información
La arquitectura de la información es una disciplina que estudia cómo se organiza la información, lo que es vital para estructurar bien una página web, entre otras cosas.
En una página web es recomendable establecer un título que englobe todo el tema de la página. Dentro de ese título genérico, después, pueden ir definiéndose una serie de puntos secundarios, dentro de éstos otros terciarios, y así sucesivamente. Imaginemos que el título principal es el tronco de un árbol, los títulos secundarios las ramas principales y los temas terciarios y sucesivos diferentes ramificaciones. Pues esa es la idea, estructurar la información de forma que lo más importante aparezca en primer lugar.
También ayuda a enriquecer la estructura de la página definir claramente qué es cada cosa: párrafos, listas de puntos, tablas de datos, anotaciones, negritas… es decir, jerarquizar la información, hacerla más cómoda de comprender y, por lo tanto, más efectiva. Por supuesto, es muy recomendable que el texto sea lo más conciso y bien escrito posible — un diseño visualmente bueno pierde mucho cuando el texto no está a la altura.
Accesibilidad y usabilidad
La accesibilidad tiene que ver con la facilidad de acceso a la información. Poniendo un ejemplo de la vida real, una ciudad accesible es aquella a la que se puede llegar fácilmente por múltiples medios: a pie, en coche, en tren, en avión… una página web accesible es esa en la que para ver el contenido no necesitas tener ningún plug-in, ni el último navegador. Lograr un sitio web accesible no es demasiado difícil si se tienen en cuenta los estándares del w3c. Al separarse contenido de presentación, puede orientarse aquel a diferentes “salidas” sin apenas trabajo adicional: pantalla, impresión, proyección, lectores de pantalla…
La usabilidad trata de la facilidad de uso, y busca que la navegación por la información sea lo más sencilla y fluida posible. Es conveniente ofrecer al lector una ruta de navegación, señalar en qué lugar se encuentra en cada momento, permitir búsquedas… también es recomendable no poner varios enlaces al mismo sitio, ya que eso puede confundir. En general es eso, buscar la claridad y evitar la confusión.
Convenciones y limitaciones
A la hora de escribir páginas web, nos encontraremos con una serie de limitaciones. La primera son los protocolos y los diferentes lenguajes (por ejemplo, xhtml o css), cuyas limitaciones ya iremos estudiando.
Otra limitación importante es el ancho de banda, el caudal de datos disponible; esto es, no todas las personas que se conectan a internet lo hacen a la misma velocidad. Por eso los datos bajan más rápido en un ordenador conectado por adsl que en otro conectado a la línea telefónica con un módem de 56k. De hecho, la mayoría de las personas tiene conexiones lentas. ¿Nos afecta esto a la hora de hacer nuestras páginas? Pues sí, bastante, porque la mayoría de las páginas se hacen con la idea de servir al mayor número de personas posible. Así que tenemos que hacer páginas lo más ligeras y rápidas posible, porque si una página tarda mucho en cargar, te cansas y te vas.
¿Y cómo se consigue eso?
- Escribiendo código limpio, que ocupe el mínimo espacio necesario
- Utilizando css en lugar de imágenes donde sea posible
- Empleando el mínimo de imágenes posibles, y lo más optimizadas que sea posible (que ocupen lo mínimo necesario)
El resto de consideraciones son las mismas que en el diseño gráfico tradicional: estructurar bien el texto, situar la información o los accesos a ella en lugares fáciles de ver, usar bien los colores, componer de forma interesante… todo esto ayuda a que la página funcione mejor.
Diferentes tipos de páginas
Todas las páginas web no sirven al mismo propósito, y, como decían los funcionalistas, la forma sigue a la función. Así, podemos dividir las páginas en tres grandes grupos: institucionales, comerciales o corporativas, y personales.
Las páginas institucionales tienen el deber de servir a un grupo de personas, por lo general, diverso y de características variadas. Por ejemplo, las páginas de un Estado o de un ayuntamiento. En un país o en una ciudad hay personas que utilizan diversas formas de acceder a internet, diversos navegadores… incluso, hay navegadores para personas ciegas. De forma que hay que preparar muy bien la información para que lo realmente importante llegue a todos los usuarios.
Ejemplos: Portal de la Administración española, Euskadi, Casa Real Española, Ayuntamiento de Irun…
En el caso de las páginas comerciales o corporativas, la información es importante, pero la presentación también: se trata de negocios que buscan vender productos o servicios, por lo que, al mismo tiempo que presentan la información de forma clara, deben hacerlo de forma atractiva. Es en este entorno en el que suelen usarse tecnologías como Flash, Quicktime o Real.
Ejemplos: Kicksology, eBay, Apple…
En cuanto a las páginas personales, hay una gran variedad ya que pueden pertenecer tanto a principiantes como a auténticos expertos. Son una forma muy interesante de experimentar y mejorar ya que no están sujetas a las presiones que tienen las páginas institucionales y las comerciales. Precisamente por esa experimentación, las páginas personales dan vida a internet.
Ejemplos: Hicks Design, Misprinted Type, Super Kick Ass Design…
En conclusión, no hay una sola forma de estructurar páginas web. En cada caso hay que ceñirse a las necesidades del proyecto y a las limitaciones del medio.
La importancia de los estándares abiertos
En 1994 se creó el W3C, el consorcio de la Web, para desarrollar tecnologías para internet de forma conjunta, buscando que las páginas funcionen sin problemas en las diferentes plataformas y navegadores. En este consorcio están presentes empresas como Microsoft, Opera, Macromedia, representantes de instituciones académicas como el MIT, etcétera.
Esto no evitó la guerra de navegadores entre Netscape Navigator e Internet Explorer. En aquella época, ninguno de los dos hacía mucho caso al consorcio, resolviendo las necesidades de presentación mediante tecnologías cerradas que eran incompatibles entre sí. Se llegó a un punto en el que los profesionales del diseño web tenían que elegir si programar para un navegador u otro, o bien programar dos veces la misma página, una vez por cada navegador. Vamos, un follón.
La progresiva adopción de las tecnologías abiertas del W3C por parte de los fabricantes de navegadores ha facilitado mucho la tarea de los diseñadores web, pudiendo hacer una página que sea accesible en muchos navegadores y dispositivos distintos. Por eso es importante seguir los estándares: hacen más fácil nuestro trabajo y nos permiten sacarle más partido.
Asuntos legales
Internet nació como un medio de intercambio colectivo, pero eso no significa que podamos tomar cualquiera de sus contenidos y emplearlo como nos plazca. En ocasiones, los autores permiten que sí lo hagamos, pero no siempre; y en Internet las patentes, las marcas registradas, los derechos de autoría y de copia siguen aplicándose, así que es importante conocer la condición de lo que encontremos en la Red antes de emplearlo.
Como productores de páginas web, debemos preocuparnos por indicar la situación de los derechos sobre las páginas y lo que contienen, ya sea mediante una nota al final de cada página o con un enlace a una página que contenga dicha información legal. Si puedes pedir consejo a un abogado, mucho mejor, aunque hay disponibles algunas licencias predefinidas, como las de Creative Commons.