Zona de Lectura




Diseño Web y Estándares: Volver a las fuentes

Si hay algo en lo que creo, es que la gloria solo dura un instante. Si. Podrá sonar extraño para quien no me conoce, o hasta descabellado por el título de este mensaje, pero está basado en mi experiencia personal (1).

Fecha del documento: Nov/2003.

    Formarse y ejercer una profesión como diseñador web en estos momentos no resulta una tarea sencilla, porque como muchos sabrán, vivimos en un lugar del mundo donde en muchas áreas todavía se siguen escatimando recursos y -lamentablemente- por necesidad, no se delegan las tareas a los profesionales que realmente saben del tema. Por ende, es habitual que un diseñador termine aprendiendo programación en Perl o por qué no también en VBScript; puesto que habitualmente tiene que contar con un amplio dominio de PHP, ASP, ASP Net, etc. Y si estamos en esa senda, atravesando alguna de las etapas de aprendizaje, es muy probable que terminemos mareados por el exceso de (des)información.
Con acierto, podemos agregar otros factores: la diversidad de medios para acceder a internet. Desde las tradicionales computadoras personales, a teléfonos celulares, dispositivos de mano, PDAs (Personal Digital Assistants), teletipos, etc. Todos y cada uno de ellos, con sus propias plataformas.
    Y sigamos condimentando esta especie de ensalada, con una gran variedad de hierbas, -perdón- navegadores, que se utilizan en la actualidad: Internet Explorer, Mozilla, Netscape, Opera, AOL, ya sean para Mac o PC. ¿Por qué no también incluir un poco de Gecko y sus derivados? O un toquecito de iCab, OmniWeb, Safari Camino, Konkeror específicos para Mac y Linux respectivamente?
Ahora bien, dejando de lado toda analogía culinaria, sabemos que cualquier persona que se haya familiarizado con el uso de algunos programas para diseño, suele hacer lo infaltable: su propio sitio web! O al menos, quién no lo ha intentado? O durante muchos años, quién no ha aprovechado las herramientas que, por defecto traían algunas suites de oficina, como ser por ejemplo, MS Office y su FrontPage Express? ¿Cómo olvidar esas páginas con gifs animados por doquier... mientras veíamos de fondo, esos bitmaps interminables?

    Aunque los tiempos hayan cambiado, y los programas también, se sigue aprendiendo en base a prueba y error. Pero se van incorporando también, todos los vicios, inclusive aquellos que heredamos directamente del fabricante de nuestro software favorito (y no hablo precisamente de FrontPage, sino de muchos otros programas muy populares).
Pero eso si! Qué orgullosos nos sentimos cuando vemos nuestro sitio en línea! Contentos, vamos de a poco mejorándolo, en el mejor de los casos. Otras veces, lo olvidamos, y lo abandonamos plagado de enlaces "en construcción" mientras decidimos cómo encarar un nuevo proyecto (sic).
Otros casos: el de muchos estudiantes que, al empezar una carrera relacionada al diseño se lanzan a experimentar con toda su creatividad intacta, publicando sus primeras páginas.
O cuando vemos que muchos profesionales, ya en ejercicio, se encuentran preparados para cubrir las necesidades comunicacionales de una empresa, aunque al mismo tiempo van descubriendo sus propias limitaciones respecto a este medio, ya sea por deficiencias en su formación, como por los avances tecnológicos: la web, sigue a su vez, en constante cambio y ampliado permanentemente el espectro de la comunicación.

    Es por ésta razón que se hace necesario un replanteo de la profesión y de la enseñanza de la misma, nos apuntó coreano citando un artículo de la Asociación de Diseñadores Gráficos de Buenos Aires. A lo cual yo agregaría que además debemos replantearnos nuestras metas si pretendemos trabajar en este medio: siendo entusiastas, inquietos y emprendedores, tendríamos que investigar e indagar más allá de lo que se ve.


El Volver a la Fuentes:

    En otro de los escritos que vimos recientemente publicados Metodología del Proceso de Diseño, Walo nos presenta algunas de las múltiples variables que se deben tener en cuenta, al momento de empezar un proyecto: cómo recabar la información necesaria, los objetivos a plantearse, qué aspectos analizar, y hasta como llegar a la etapa de implementación y testeo del mismo.
 Esta metodología supone la preexistencia de un manejo y conocimiento completo de la herramienta más básica y fundamental: El código HTML. Aunque tal vez debería hablar ya de XHTML.
 Alguien pensará que soy anticuada, que para eso existen los editores de páginas WYSIWYG (lo que ves es lo que obtienes): para escribir el código mientras nosotros trabajamos cómodamente en un entorno gráfico. Y yo le respondería que si, estos editores escriben solos el código, pero si no conocemos los atributos y las propiedades de los distintos elementos, y las especificaciones en las cuales se basan, no podremos nunca saber qué es lo que nuestro editor preferido está haciendo a nuestras espaldas.
 Y entonces... volver a las fuentes...?
¿Cómo? ¿Qué fuente? Si, el código fuente. El que le da sustento a todo lo que gráficamente nos muestran nuestros queridos, modernos y estardarizados (¿?) navegadores (perdón por el chiste de mal gusto).
 Sin ese sustento, la página web no existe. Y cuanto más estándar sea el código, mayor será la cantidad de público que podrá acceder a la información que presentemos. Sin éste principio dudo que lleguemos a buen puerto.
    El punto de partida no puede ser otro, que las mismas páginas del W3C, o World Wide Web Consortium. Ahí están todas las especificaciones necesarias para redactar un código accesible y sintácticamente correcto, un código actual.
 Y todo aquel que se llame a si mismo diseñador web, debería interiorizarse más en las especificaciones y normativas, en los estándares. Actualizarse en cuanto a las nuevas tecnologías, porque los cambios que vemos día a día en la web, se tienen que reflejar en nuestro trabajo también. Y sobre estos temas no pueden tener incidencia ningun tipo de controversias sobre divisiones de tareas o áreas de competencia, entre diseñadores y programadores. Cuando se trata de estar informados, estar actualizados sobre las tendencias actuales, no hablo de leer las noticias de C-Net unicamente, sino de actualizar nuestro código web: La versión actual de HTML, la 4.01, convertida en recomendación en Diciembre del 1997, es la última versión que veremos de éste lenguaje.

 
El rol del W3C:

    El Consortium tiene a su cargo la creación de un código estándar y amplio, que no se limita a un cierto tipo de ordenador, ni sistema operativo. Un código que nos sirve de base para nuestro mensaje, cualquiera que éste sea, y sin importar el medio por el cuál accedemos al mismo. La función del diseñador sería implementarlo. Usarlo.
Owen Briggs no lo pudo haber dicho mejor: "Nuestra tecnología apenas está 'precalentando'. Por eso, el código web es amplio, no se trata solo de como se ven las cosas en una pc o en una Mac..." (Design Rant por Owen Briggs en TheNoodleIncident).
 Finalizaba el año 2001 cuando Briggs redactaba ésto. Así que bien podrán imaginarse como siguió la historia...
Viendo los hechos en retrospectiva, creo que nuestra meta ahora, debería enfocarse a una revisión del código HTML que hayamos escrito, para tomar los elementos que lo conforman, y con ellos construir la estructura que le dará basamento al mensaje que deseamos transmitir. Dichos elementos se deben adaptar a estos tiempos de transición, por medio del uso de un documento acorde, el XHTML.
    El XHTML es un lenguaje híbrido que se parece y funciona en forma bastante similar al HTML. Está basado en XML (eXtensible Markup Language), o el meta lenguaje de la web, como le llaman algunos, porque se utiliza para definir otros lenguajes destinados a fines específicos. El XML es utilizado en bases de datos, en trabajos con catálogos, en los feeders tan de moda. Pero también es el lenguaje fundacional para los estándares web de algunos protocolos como ser, el (SVG) Scalable Vector Graphics, el Synchronized Multimedia Integration Language (SMIL), Wireless Markup Language (WML). Aunque todas estas siglas se asemejen más a jeroglíficos que a lenguajes, el XML se podría resumir como texto puro, donde, a diferencia del HTML, somos nosotros quienes definimos los elementos, atributos y propiedades dentro de dicho documento, pudiendo éstos, significar lo que nos parezca apropiado según la tarea que estemos llevando a cabo.

 
El XHTML:

    Los beneficios de utilizarlo, son muchos: Uno de los fundamentales es que son fácilmente trasportables a otros entornos como los que mencioné anteriormente: desde un screen reader a cualquier dispositivo inalámbrico.
Este tipo de documento nos obliga a mantener un orden y una estructura lógica. Pensemos en todo caso, en un medio estrictamente gráfico: si vemos un diario impreso, observaremos un titular, cierto texto a modo de introducción y luego el párrafo que contiene el desarrollo de la noticia. Es esa misma estructura la que se debe mantener en un documento XHTML: los titulares bajo la etiqueta <h1></h1>; los párrafos entre etiquetas <p></p>, etc.
Además de éstas prácticas, que desde ya, deberían ser de uso corriente, tendremos que prestar más atención para escribir todo el código en minúsculas; encerrar todos los valores de los atributos entre comillas; completar obligatoriamente el atributo ALT con el texto correspondiente y un opcional "title" cuando se utilicen imágenes. No porque estemos motivados por la validación de nuestro documento, sino por razones de usabilidad.
Revisar también las normativas en cuanto al cierre de todas las etiquetas, ya que ninguna podrá quedar abierta (el ejemplo más común es el salto de línea o <br> el cual se debe cerrar de esta forma: <br />).
Verificar la correcta escritura del DOCTYPE (DOCTYPE es una declaración del lenguaje SGML o Standard Generalized Markup Language que determina a cual DocumentTyeDefinition o mejor dicho DTD, se ajusta un documento). Cuidar que no se incluyan ningún tipo de prólogo opcional, para que no existan incompatibilidades entre los distintos navegadores. (Notas extraídas de New York Public Library en donde se podrá encontrar mayor información).
Otro de los beneficios de utilizar este formato es la indexación de las páginas en los motores de búsqueda. Un código bien escrito, facilita y agiliza la indexación de todo texto incluido dentro del elemento h1; no solamente en el "title" o en los metatags.
Al tener un documento bien estructurado, su actualización y/o modificación resulta prácticamente una tarea ínfima en tiempo y recursos. Más aún si lo utilizamos conjuntamente con CSS.
En resúmen, lo aconsejable es volver a utilizar los elementos para lo que realmente fueron creados:
Los encabezados (h1/h6) tienen una función, que es definir los títulos y subtítulos.
Los párrafos nos definen los textos y se separan como tales.
Si tenemos varios enlaces agrupados, usemos una lista ordenada o desordenada según corresponda.
Las tablas están destinadas a presentar datos (generalmente numéricos) en forma ordenada, usémoslas para eso y no para crear toda la estructura del sitio.

Para agregarle riqueza visual a nuestras páginas, utilicemos lo que se debe usar: CSS. Una buena combinación de XHTML y CSS no falla al momento de presentar la información de manera accesible pero rica por su atractivo visual.
Alguien me estará odiando a esta altura...ya. ¿Pero por qué no se crean páginas web utilizando éstos estándares? ¿Por qué no se usan las hojas de estilo para darle formato a la información?
Porque si bien es fácil crear un documento XHTML, es mucho más difícil utilizar CSS que una simple "table" para estructurar el contenido de un sitio, cuando tenemos que lidiar con navegadores tan disímiles, para múltiples plataformas y por sobre todo, antiguos u obsoletos. Si elegimos el camino fácil, estamos destinados a quedarnos en el tiempo... y a tener cada vez menor audiencia o usuarios navegando nuestras páginas...

Bien. Estas son solo algunas de la pautas para estructurar el contenido como es debido. Son ideas para comenzar a crear una zona de inicio como la llamo en estos días...
La investigación y el aprendizaje no solo viven en los claustros académicos. Esta información está abierta para todos. Yo lo simplificaría en un "tómalo o déjalo."

Carina Kornowski.

 

 

 

 

Referencias:

(1) Se muy bien que este resúmen bien podría estar incluido en la Zona Informativa, pero... Hace poco más de dos años, me encontraba por primera vez un Jasc PaintShopPro 7.01. Unos meses más tarde me hice amiga de Adobe Photoshop, y empecé a jugar con "layers" y "masks". Después fue Macromedia Flash, Dreamweaver y Fireworks. Me desvelé con efectos ray of light o matrix... Indagué sobre "while loops" de ActionScript, sin dejar de lado ningún "prototype" que me pudiera ser útil para mostrar mi galería fotográfica.
Descubrí quienes eran/son Kris Holmes y Charles Bigelow; Summer Stone, Erik Spiekermann, Martin Majoor y Luc de Groot, entre otros. En esa euforia hasta dibujé a mano varias ligaduras para incluir en mis fuentes favoritas. Armé un juego completo de caracteres para una fuente bitmap, sin descuidar, por cierto, los fondos de escritorio y los íconos para mi pc. Animé copos de nieve en 3D para un Papá Noel que sonreía rodeado de regalitos vectorizados al ritmo de Santa's Coming to Town por Frank Sinatra. Armé proyectos de portfolios personales en todo papelito que tenía a mano, mientras leía cómo se estructura la información para que sea más accesible al usuario. Digitalicé mis portfolios de papel en cuanto formato se me ocurrió, y de un día para otro me encontré buceando entre las páginas de la W3C, tratando de averiguar cuál era el karma de todos los browsers.
¿La gloria dura solo un instante...? Y....si. Es ínfimo el momento de alegría y satisfacción al contemplar un trabajo bien hecho, comparado con las horas de esfuerzo y dedicación invertidas. ¡Pero qué bien se siente! Y valen la pena!

(2) Design Rant por Owen Briggs: http://www.thenoodleincident.com/tutorials/design_rant/index.html
Recomiendo leer todo el artículo.

(3) Con esto no estoy diciendo que hay que suprimir todas las tablas de un layout, sino que se deben utilizar cuando realmente son necesarias. Una tabla con sus atributos bien definidos, puede estar perfectamente inserta acorde a los estándares y es un hecho que la complejidad de algunos proyectos web, bien ameritan su utilización.
Pero siempre hay que analizar con criterio cuál es el contenido y el mensaje a transmitir: en muchos casos las numerosas etiquetas <font> <size> <th> <td> <tr> <img> no son necesarias, y bien podrían suprimirse, logrando un acceso a la información, mucho más rápido, y favoreciendo a todos los públicos.


‹‹ Volver       Leer la Segunda Parte ››