Вы находитесь на странице: 1из 109

Gua para el Desarrollo de Sitios Web 2.

0
Gobierno de Costa Rica

Secretara Tcnica de Gobierno Digital

Versin 1.0 Febrero, 2009

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Tabla de Contenidos

Resumen Ejecutivo ........................................................................................................... 4 Introduccin ..................................................................................................................... 6 Captulo 1 ......................................................................................................................... 8 Normas que Rigen los Sitios Web ..................................................................................... 8 Captulo 2 ...................................................................................................................... 16 Aplicacin de Estndares ............................................................................................... 16 Captulo 3 ...................................................................................................................... 37 Diseo de Interfases e Interaccin .................................................................................. 37 Captulo 4 ...................................................................................................................... 59 Cmo se llega al Sitio Web ............................................................................................. 59 Captulo 5 ...................................................................................................................... 81 De la Usabilidad a la Utilidad ....................................................................................... 81 Anexo 1 .......................................................................................................................... 98 Biblioteca de Recursos ................................................................................................... 98

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 2 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Produccin La presente gua se ha desarrollado en el rea de Innovacin de Procesos de la Secretara Tcnica de Gobierno Digital en el mes de febrero del 2009.

Acuerdo de Uso Se autoriza la reproduccin total o parcial de este documento. El texto y el material contenido fueron elaborados con base en la Gua Web 2.0 publicada por el Gobierno de Chile principalmente.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 3 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Resumen Ejecutivo

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 4 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

La Gua para el Desarrollo de Sitios Web 2.0 es una continuacin de la versin 1.0 que fue publicada en Julio del 2007 a travs de un esfuerzo impulsado por la Secretara Tcnica de Gobierno Digital, el cual viene a complementarse con la presentacin de la versin 2.0, que busca construir un documento de referencia permanente para los encargados de los sitios web de las instituciones pblicas. Esta Gua se encuentra conformada por cinco captulos a travs de los cuales se ofrece informacin terica y prctica que buscan la optimizacin de los sitios web. A continuacin una breve descripcin de ellos. El captulo uno identifica y trata las regulaciones dirigidas a las instituciones pblicas en el campo de la presencia Web que han sido emitidas por el Gobierno de Costa Rica, en las que se establecen directrices mnimas que deben contener para su operacin, en miras de su transformacin a instrumentos de informacin y accin para los ciudadanos y organizaciones. El captulo dos se refiere a la definicin y aplicacin de los estndares sobre construccin de sitios, accesibilidad, interoperabilidad y buenas prcticas que debe cumplir el Sitio Web. El captulo tres trata que la informacin ofrecida cumpla con ciertas reglas y/o estndares, para que sus usuarios puedan sacarle todo el provecho posible, abordando los elementos necesarios para la optimizacin de las interfaces de los Sitios Web. El captulo cuatro introduce el concepto de la Encontrabilidad que se puede entender como la "habilidad para ser encontrado", como la facilidad para que los contenidos de un Sitio Web puedan ser indexados y luego encontrados por sistemas de bsqueda externos e internos. El captulo cinco presenta el concepto de la Usabilidad, entendido como facilidad de uso, que se presenta como uno de los elementos centrales que deben poseer los Sitios Web de Gobierno, ya que en la medida que se asegure que lo que se publica pueda ser visto y usado sin problemas de acceso por los ciudadanos, se estar cumpliendo con la misin ms importante de estos espacios digitales. Adicionalmente se ofrecen aspectos relativos a Experiencia de Usuario y Aseguramiento de Usabilidad, a travs de la presentacin de metodologas probadas y usadas internacionalmente.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 5 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Introduccin

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 6 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

La Gua para el Desarrollo de Sitios Web 2.0 es un documento elaborado con el propsito de optimizar los esfuerzos que vienen desarrollando las instituciones pblicas para mejorar su presencia en Internet, pasando de pginas Web sumamente limitadas en cuanto al elemento alcance a sitios de mucha mayor calidad y envergadura transaccional, transformando sus sitios en puntos de mayor relevancia para los usuarios, proveyendo contenido informativo y transaccional de mayor calidad, ajustado a los estndares nacionales e internacionales y a la necesidades de los ciudadanos. En este marco, con el propsito de establecer de manera ms clara los lineamientos bsicos para el desarrollo de los sitios web de las instituciones pblicas, la Secretara Tcnica de Gobierno Digital establece la Gua para el Desarrollo de Sitios Web 1.0 y 2.0. La Gua para el Desarrollo de Sitios Web 1.0 se presenta como un instructivo que recoge la experiencia nacional e internacional y que muestra los lineamientos para el desarrollo de sitios web dirigidos a apoyar eficazmente a los equipos y a las personas del sector pblico que tiene a cargo la planificacin, construccin, modificacin de los sitios web del Gobierno de Costa Rica. Con ese mismo propsito, se presenta la Gua para el Desarrollo de Sitios Web 2.0 la cual viene a complementar los lineamientos establecidos en su primera versin, entrando a detallar nuevos elementos que se derivan del crecimiento y desarrollo de las aplicaciones web y de sus estndares, con los cuales se busca la optimizacin de sitios Web de las instituciones pblicas y la satisfaccin de sus usuarios. De esta forma, mientras la primera versin busca explicar la forma de llevar adelante un proyecto para generar un sitio web, esta segunda versin busca entregar herramientas a los desarrolladores y encargados de contenidos para optimizar el sitio que hayan construido, apoyando su rendimiento, la insercin en los motores de bsqueda y el uso de estndares. El fin perseguido por la Secretara Tcnica de Gobierno Digital es fortalecer los proyectos e iniciativas que conlleven a que las instituciones pblicas presten servicios giles, cercanos y sencillos para los ciudadanos. Impulsando de esta manera las polticas y la gestin de proyectos que lleven al desarrollo y optimizacin del punto de encuentro en la Web entre el Gobierno y los ciudadanos, empresas, e instituciones.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 7 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Captulo 1
Normas que Rigen los Sitios Web

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 8 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Resumen
Este captulo identifica y trata las regulaciones dirigidas a las instituciones pblicas en el campo de la presencia Web, que han sido emitidas por el Gobierno de Costa Rica, en las que se establecen directrices mnimas que deben contener para su operacin, en miras de su transformacin a instrumentos de informacin y accin para los ciudadanos y organizaciones.

B. Introduccin / Normas que rigen a los Sitios Web


Resulta importante iniciar reconociendo que el desarrollo de los sitios Web en Costa Rica por parte de las instituciones pblicas carece de regulacin, lo que podra resultar ser una pequea causal de los bajos resultados obtenidos en las recientes evaluaciones1. Si bien muchas de las instituciones tienen un trayecto reconocible en su presencia Web, as como varios aos de experiencia brindando colaboracin a los costarricenses, la carencia de normas que les sean aplicables y por lo mismo ha generado que su contenido y caractersticas obedezcan ms al criterio de sus autores y al de las autoridades de cada entidad, que a una norma gubernamental general. Lo que evidencia un reto y una ruta clara a seguir para el fortalecimiento del Gobierno Digital en Costa Rica. El paso del tiempo y la conciencia que se ha venido adquiriendo en cuanto al rol que las tecnologas digitales pueden llegar a jugar en la comunicacin entre el Gobierno, los ciudadanos y organizaciones, justifica la razn por la cual las instituciones pblicas hoy cuentan con presencia en la Web, e inician, unas ms que otras, a brindar a los ciudadanos servicios en lnea. Lo que hoy evidencia la necesidad de regular la presencia Web de las instituciones. La norma que solicita a las instituciones contar con un sitio Web lleg en 2005 mediante la directriz de la Presidencia y del Ministerio de Ciencia y Tecnologa a travs de la Comisin Nacional de Tecnologas de la Informacin y la Comunicacin (CONATIC). Existen a su vez mltiples reglamentos, resoluciones, circulares, entre otras, que establecen regulaciones concretas para algunas instituciones.

Barahona, J.C., Zuleta, R., Zamora, D. (2008) Evaluacin de Sitios Web del Gobierno de Costa Rica. INCAE. San Jos, Costa Rica.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 9 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

C. Normas que afectan a los Sitios Web


Respecto de la normativa que afecta a los Sitios Web, es importante indicar que se pueden separar varios tipos, que desde sus temticas entregan un marco de accin para el desarrollo, operacin y mantencin de los Sitios Web de Gobierno: 1. Constitucin Poltica: Fija los lmites y define las relaciones entre los poderes del Estado y de stos con sus ciudadanos, a travs de lo cual se establecen las relaciones entre los mismos, que hoy en da sugieren el uso de las tecnologas digitales. 2. Leyes: Abarcan diferentes reas temticas que afectan a la operacin de los Sitios Web. Por ejemplo, la proteccin a la privacidad de los datos personales. 3. Decretos: Son emitidos por entidades dependientes del Poder Ejecutivo. Estos se concentran en reas e instituciones, pues no existe alguno dirigido al desarrollo Web de las instituciones. 4. Reglamentos: Los reglamentos tratan tambin regulaciones especficas para uso y aplicaciones en internet para instituciones, existiendo ausencia de norma que busque estandarizacin. 5. Directrices: La nica norma que establece una regulacin dirigida a todas las instituciones, instruyendo a las que an no tienen presencia en Internet a tomar las medidas necesarias para que logren dicha presencia mediante el desarrollo de sitios Web institucionales; instruyendo a las que cuentan con un sitio incluir servicios Web de acuerdo a mecanismos de interoperabilidad. 6. Resoluciones y Circulares: Se disponen regulaciones concretas para instituciones en cuanto a su presencia en internet. 7. Guas de Aplicacin: Son un conjunto de buenas prcticas emitidas por organismos del Estado para orientar y precisar la forma de dar cumplimiento a las normas que se han emitido sobre temas determinados. Por ejemplo, la Gua para el desarrollo de sitios Web del Gobierno de Costa Rica emitida por la Secretara Tcnica de Gobierno Digital en el 2007. Debido a que las normas que se han enmarcado establecen regulaciones estrictas para algunas de las instituciones pblicas, ms no a todas ellas como normas estandarizadas. Es necesario

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 10 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

que los funcionarios responsables de las diferentes aplicaciones de los sitios Web revisen la normativa que le compete y regula su institucin. A continuacin se entrega un detalle de las normas que establecen una regulacin o bien tienen incidencia para todas las instituciones.

D. Directriz N 40 del 28 de abril del 2005


Directriz2 del Presidente de la Repblica y el Ministro de Ciencia y Tecnologa, que busca instruir a las Instituciones Pblicas que an no tienen Internet a tomar medidas para que en un plazo de seis meses logren dicha presencia mediante el desarrollo de sitios de Web. La directriz establece lo siguiente: Artculo 1Instruir a las instituciones pblicas que an no tienen presencia en Internet a tomar las medidas necesarias para que en un plazo de seis meses logren dicha presencia mediante el desarrollo de sitios Web institucionales. Para la realizacin de esto debern cumplir con todos los trmites y procedimientos que establece nuestro ordenamiento jurdico vigente. Artculo 2Instruir a las instituciones pblicas que ya cuentan con presencia en Internet que debern tomar las acciones necesarias para que un plazo de 18 meses ofrezcan a travs de sitios web los servicios institucionales estratgicos de acuerdo con sus prioridades y la demanda de servicios de sus usuarios; lo anterior en forma interactiva y cumpliendo con estndares de eficiencia, seguridad y amigabilidad. Para la realizacin de esto debern presentar al Ministerio de Ciencia y Tecnologa a ms tardar tres meses despus de la entrada en vigencia de esta directriz un plan de accin institucional en donde se incluya el cronograma de actividades que se estarn llevando a cabo y que incorpore un plan de seguridad y un plan de contingencias adems de todos los trmites y procedimientos que establece nuestro ordenamiento jurdico vigente. Artculo 3Establecer normas y mecanismos que permitan la interoperatibilidad de los sistemas de informacin entre instituciones pblicas y dentro de ellas cuando por su funcin as lo requieran empleando tecnologas de manera rentable, eficiente y segura. Artculo 4Rige a partir de su publicacin.

Directriz accesible en la direccin http://www.pgr.go.cr/scij/busqueda/normativa/normas/nrm_repartidor.asp?param1=NRTC&param2=1&n Valor1=1&nValor2=55035&nValor3=60303&strTipM=TC&lResultado=4&strSelect=sel


2

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 11 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Al da de hoy la norma que marca la pauta general a seguir por las instituciones. Dado que la norma fue emitida el da 28 de abril del 2005 y de conformidad con su artculo primero, que indica que un plazo de seis meses las instituciones lograran su presencia en Internet, para fin del mismo ao habra garanta que la presencia Web est superada. Ahora bien, contando las instituciones con un sitio en internet la directriz solicita que en un plazo no mayor a los 18 meses, periodo cumplido a noviembre del 2006 para quienes ya contaban con un sitio, o bien a mayo del 2007 para quienes no contaban con un sitios Web, ofrecer servicios estratgicos de acuerdo con las prioridades y la demanda de los ciudadanos. De lo que se puede concluir a travs de la norma que al da de hoy, las instituciones pblicas deben estar ofreciendo servicios a los costarricenses a travs de sus sitios Web segn las necesidades del ciudadano. El alcance de esta directriz tiene una consideracin muy importante en cuanto implora a la constitucin de mecanismos de interoperabilidad entre las instituciones y sus sistemas, de manera que se erradique la prctica de construir sistemas que duplican informacin y operaciones ya existentes en otras aplicaciones institucionales, llevando a minimizar la eficiencia, rentabilidad y seguridad de muchas operaciones electrnicas de la administracin pblica. Estando este ltimo componente rezagado, la Secretaria Tcnica de Gobierno Digital lidera un esfuerzo en el sector pblico para definir e implementar sistemas de informacin interoperables, compartiendo estndares tericos, semnticos y organizacionales cordados en un entorno de trabajo conjunto y de aplicacin obligatoria.

E. Gua para el Desarrollo de Sitios Web del Gobierno de Costa Rica


La gua3 se presenta como una respuesta a la necesidad de garantizar estndares de contenido y calidad de los sitios Web de Gobierno para permitir el acceso de todos los ciudadanos a la informacin, trmites, servicios y programas pblicos. A partir de este documento, la Secretara Tcnica de Gobierno Digital ha tomado la iniciativa para presentar las recomendaciones para el desarrollo de sitios Web, destinada a apoyar

3 Gua accesible a travs del sitio www.gobiernofacil.go.cr

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 12 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

eficazmente a las personas y los equipos del sector pblico que tienen a cargo su publicacin, construccin o modificacin. El documento especifica los lineamientos generales para el desarrollo de un proyecto de desarrollo de portales Web, particularizado en las responsabilidades de las diferentes partes involucradas. La gua desarrollo los siguientes contenidos: Captulo 1: Planificacin Inicial de un Sitio Web Se abordan los pasos que se deben dar en el proyecto, que van desde la creacin de un equipo de trabajo hasta las tareas de recepcin del proyecto terminado, pasando por temas relativos a financiamiento, licitacin e instrumentos para hacer su seguimiento. Captulo 2: Definicin del Sitio Web Se explica cmo definir los contenidos que se incluirn en un sitio Web y los pasos que se deben dar para desarrollar la estructura de un sitio y su forma. Esta forma de trabajo constituye una metodologa aprobada en sitios pblicos, que asegura el xito de las etapas posteriores del proyecto de desarrollo de un Sitio Web. Captulo 3: Diseo Web y Estndares Se expone informacin sobre buenas prcticas de accesibilidad y sobre la administracin de la retroalimentacin proporcionada por los usuarios, adems de metodologas para realizar pruebas de usuarios orientadas a mejorar el sitio. Captulo 4: Puesta en Marcha del Sitio Web Se revisan los pasos que se deben dar para terminar el desarrollo de un sitio Web y efectuar su presentacin a los usuarios, incluyendo desde criterios tcnicos para hacer pruebas sobre el sitio construido, hasta la forma de efectuar la comunicacin de sus caractersticas, para dar a conocer a la comunidad el trabajo realizado. Captulo 5: Plan de Mantenimiento del Sitio

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 13 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Aborda los temas referidos a mantenimiento de un sitio Web en forma posterior a su lanzamiento y se entregan recomendaciones sobre los pasos que se deben dar para asegurar su adecuada operacin. Los contenidos presentados en esta primer Gua constituyen un complemento a los nuevos elementos desarrollados en la Gua 2.0, de manera que ambos documentos se integran.

F. Premio a la Excelencia en Gobierno Digital


La Secretara Tcnica de Gobierno Digital ha instaurado esta premiacin como un efecto al trabajo que desarrollan las instituciones pblicas para mejorar la calidad de sus sitios Web, el cual ha denominado Premio a la Excelencia en Gobierno Digital. La evaluacin de los sitios Web de las instituciones pblicas se desarrollo de acuerdo a la Herramienta para la Evaluacin de la Calidad de la Prestacin de Servicios por Medios Digitales4 de INCAE. Con el propsito de estandarizar los formatos de evaluacin para poder hacer referencias al desarrollo de los sitios Web de las instituciones en el tiempo. De esta manera, anualmente, la Secretara Tcnica de Gobierno Digital trabaja cada ao en conjunto con el INCAE para valorar la calidad y las mejoras en la calidad de los Web de las instituciones pblicas, premiando a las tres instituciones que obtengan los mejores resultados en esta evaluacin. La herramienta de evaluacin mencionada considera los siguientes elementos: Calidad de la Interaccin: La presencia en lnea evoluciona tradicionalmente de una presencia esttica donde la informacin fluye en una sola direccin, a un nivel ms maduro y complejo de interaccin entre la institucin y los usuarios, lo que es evaluado a travs de dos niveles diferentes: o Nivel de Interaccin: que ve el nivel de la madurez de la interaccin que ofrece el sitio web. Es decir, es un sitio esttico tipo brochure o se encuentra en un

4 Barahona, J.C., Zuleta, R., Caldern, O. (2006). Herramienta para la evaluacin de la calidad de la prestacin de servicios por medios digitales. Artculo fue presentado en el 1er Congreso Iberoamericano de e-Government organizado por la Pontificia Universidad Catlica de Chile.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 14 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

nivel ms maduro donde se ofrecen servicios o interacciones ms complejas entre el ciudadano y el Estado. o Nivel de Individualizacin: que ve el grado de preparacin de la informacin para diferentes perfiles de usuarios de una institucin y qu tanto se le permite a este usuario personalizar la informacin que se publica en el sitio. Calidad de la Informacin: el sitio web debe ser capaz de ser accesado y comprendido por todos los consumidores, sean ciudadanos, productores, no ciudadanos que viven en el pas, etc. La informacin de ser relevante y slida y se evala mediante 2 niveles: o Nivel de relevancia: mide la utilidad de la informacin publicada, al evaluar lo fcil de comprenderla y lo aplicable que sea para el usuario. o Nivel de solidez: analiza que dicha informacin est actualizada y sea correcta y adems que la forma en que se presenta sea consistente a lo largo del sitio para que el usuario encuentre ms fcil utilizar el sitio y encontrar la informacin que ah se publica. Calidad del Medio: evala la experiencia del usuario del medio y recoge aspectos relacionados con la amigabilidad del sitio segn su construccin. Adems se evalan aspectos ms tcnicos que pueden incidir en la experiencia del usuario que resultan de la infraestructura sobre la que corre el sitio. La calidad del medio digital evala mediante 2 niveles: o Nivel de Eficiencia: evala aspectos de la experiencia del usuario tales como la usabilidad del sitio, lo forma en que se navega por el sitio y qu tan flexible es la informacin que se ah se publica. o Nivel de Infraestructura: evala los aspectos ms tcnicos del sitio como su apego a estndares que aumente la accesibilidad del sitio, la seguridad que emplea, el mantenimiento que se le da a las pginas y qu tan rpido carga el sitio. Como se puede apreciar la evaluacin se concentran en la perspectiva del usuario consumidor de la informacin, trmites y servicios presentes en el sitio Web, pues el marco del concepto que sigue la Secretara Tcnica de Gobierno Digital ubica al ciudadano en un lugar cntrico, siendo el gobierno digital al final un medio para servir al ciudadano.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 15 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Captulo 2
Aplicacin de Estndares

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 16 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Resumen
Este captulo que se refiere a la definicin y aplicacin de los estndares sobre construccin de sitios, accesibilidad, interoperabilidad y buenas prcticas que debe cumplir el Sitio Web, haciendo especial referencia a lo sealado en los trabajos desarrollados por el Gobierno de Costa Rica que establecen las directrices en estos aspectos. As tambin, se establecen de acuerdo con las normas de estructura de documentos y accesibilidad emitidos por el World Wide Web Consortium.

B. Introduccin / Aplicacin de Estndares


Los Sitios Web son el resultado de la implementacin de una serie de tecnologas que facilitan la transmisin de contenidos desde un servidor a una serie de clientes o usuarios, a travs de redes de computadores conectados a Internet. Para que este sistema funcione, es necesario que el computador que contiene la informacin (servidor) ofrezca dichos contenidos mediante tecnologas conocidas y que cumplan con ciertas reglas o estndares, para que quienes acceden a ellas (clientes o usuarios) utilizando diferentes tipos de software, puedan entender los elementos de informacin que se les entregan. En este sentido, los estndares juegan un papel clave ya que es la forma en que ambas partes logren intercambiar informacin y ms importante an, permite que otros actores lleguen a ofrecer nuevas funcionalidades que puedan agregarse a las anteriores sin mayores dificultades. Adicionalmente, los estndares facilitan que la oferta de contenidos y funcionalidades pueda ser utilizada desde diferentes plataformas computacionales (sistemas operativos y software), sin que se requiera obligatoriamente que el usuario tenga una en particular, para acceder a dicha informacin. Debido a la importancia de lo anterior, a escala mundial se han establecido organizaciones que regulan los estndares y permiten que exista una normalizacin tecnolgica que abarque ms all del mbito de cada pas. Por su parte, el Gobierno de Costa Rica a travs de la Gua para el Desarrollo de Sitios Web, ha tomado la decisin de sugerir estos estndares para los rganos de la Administracin del Estado, con el objetivo de que tanto la informacin como las funcionalidades ofrecidas en los

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 17 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Sitios Web institucionales puedan ser accedidos por los ciudadanos sin que existan barreras tecnolgicas mayores.

C. Qu son los estndares


Los estndares se definen como las especificaciones que determinan la manera en que se construye y funciona una tecnologa en particular, con el objetivo de regular la realizacin de sus procesos; tambin se conoce de esta manera a la forma en que se construyen elementos de hardware o software, para que quienes generen elementos adicionales a estos logren realizar dicha tarea correctamente y consigan que esos nuevos elementos se acoplen a los anteriores sin problemas. En lo que se refiere a los Sitios Web, los estndares determinan la forma de construir sus pginas y componentes, ya que se engloba bajo este nombre al conjunto de normas que dan origen al lenguaje en el que se escriben las pginas de los Sitios Web. Para este mbito existe una organizacin de carcter mundial conocida como World Wide Web Consortium (W3C) que genera constantemente las nuevas versiones de los estndares del web y ofrece herramientas que permiten hacer la validacin del uso de los mismos. En el caso de los Sitios Web en Costa Rica, diversas normas establecen la relacin con el cumplimiento de los estndares (ver Captulo 3 de la Gua de Desarrollo de Sitios Web del Gobierno de Costa Rica) por lo que los administradores de los sitios Web deben conocer estas indicaciones. Conociendo que en el campo legal Costa Rica no posee ninguna norma que regule los estndares que deben ser seguidos en los desarrollos Web, la Secretara Tcnica de Gobierno Digital asume el reto de trabajar de manera colaborativa con las instituciones pblicas de manera que se pueda proceder a emitir las regulaciones respectivas que debern ser acatadas de manera obligatoria en el desarrollo de los sitios Web del sector pblico.

D. Quin Fija los Estndares


Tal como se explic antes, en el caso del web los estndares son fijados por el World Wide Web Consortium (W3C), una organizacin internacional que agrupa a ms de 400 entidades

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 18 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

miembros5 entre las cuales se cuentan empresas, universidades, medios de comunicacin, fundaciones y centros de investigacin. El W3C fue creado en 1994 a partir del trabajo de Tim Berners-Lee quien fue el inventor de esta tecnologa en el ao 1989, mientras trabajaba en la Organizacin Europea de Investigacin Nuclear (CERN) ubicada en Suiza. Con el fin de facilitar el intercambio de informacin a travs de redes de computadores, ide el sistema para que cada documento tuviera una direccin nica (Uniform Resource Identificator -URI) con el fin de que desde cualquier lugar de la red pudiera ser accedido sin dificultades. Adems, ide la forma de representar ese documento a travs de un lenguaje comn (Hyper text Markup Language HTML) y finalmente, la forma de transmitir esos datos a travs de la red, utilizando un protocolo de comunicaciones especializado para esta tarea (Hyper text Transfer Protocol HTTP). Debido a que se requera que esas tecnologas de comunicacin de datos y creacin de documentos tuvieran una continuidad en el tiempo y fueran adaptndose a las mejoras tecnolgicas que fueran apareciendo en el tiempo, se cre el W3C que desde su fundacin ha generado ms de 90 estndares. La norma que establezca la regulacin en torno a los estndares para el Gobierno de Costa Rica, sera emitida a travs de Decreto Ejecutivo, a travs del cual se determinar la adopcin y el uso de los estndares sealados por el W3C como los estndares aceptados para el desarrollo de los Sitios Web costarricense. De esta forma la Secretara Tcnica de Gobierno Digital estara coordinando un trabajo conjunto participativo con las instituciones pblicas para la apropiacin y validacin de los estndares propuestos por el W3C mediante este Decreto Ejecutivo. Ms adelante se presentar una propuesta en esta direccin.

E. Por qu hay que Seguir los Estndares


Uno de los problemas principales que exista para el intercambio de documentacin hasta antes de la aparicin del web, era el formato de los documentos debido a que las plataformas computacionales (sistemas operativos, software) no eran compatibles entre s.

Ver listado actualizado de miembros en http://www.w3.org/Consortium/Member/List

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 19 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

El HTML permiti resolver ese problema, al crear un estndar que fue similar para todas ellas y que por lo tanto, no tena requerimientos especficos para cada una de las plataformas, sino que los mismos para todas ellas. Esta solucin habilitada por las tecnologas web constituy entonces uno de sus haberes principales y por ello es que el W3C la incorpor dentro de su propia misin como organizacin. En este sentido, se indic que su objetivo global es aumentar el potencial de la web y para ello realiza acciones mediante las cuales se aseguran que las tecnologas relacionadas al web sean compatibles entre ellas, y as permitir que el hardware y software usado para acceder a los Sitios Web trabaje en conjunto. A esta meta le denominan interoperabilidad web y para conseguirla es que los estndares son abiertos y pblicos. Este mismo objetivo sera incorporado por el Gobierno de Costa Rica en su normativa, donde se estara indicando que los sitios web deben ser accesibles por diferentes navegadores en un claro llamado a la compatibilidad con las distintas plataformas computacionales.

F. Cules son los Estndares Propuestos para Sitios Web del Gobierno
De acuerdo con lo que se ha mencionado, a continuacin se presenta una propuesta inicial de los estndares ms importantes que se incluiran en el Decreto Ejecutivo: De la interoperabilidad Web: o Plantea la obligacin de que los documentos electrnicos que se generen en los rganos de la Administracin del Estado cumplan con estndares mundiales que les permitan ser utilizados en diferentes plataformas. La obligacin es utilizar XML para los documentos y UTF-8 como conjunto para la codificacin de caracteres. De las pginas Web: o Deben cumplir los estndares fijados en cuanto a su cdigo de despliegue que debe ser HTML o XML y validado ante el W3C. Para asegurar que el cdigo cumple con los estndares sealados, el respectivo rgano de la Administracin del Estado deber, por s o a travs de un tercero autorizado por ste, validar el HTML y las cascadas de estilo a travs de las herramientas provistas por la W3C

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 20 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

(World Wide Web Consortium6. Asimismo, se debe hacer dicha validacin para detectar y corregir posibles enlaces rotos y la presencia de imgenes perdidas en el sitio web. o Deben contar con un set de caracteres preferiblemente en formato UTF-8. o Deben diagramar sus pginas utilizando la tecnologa conocida como hojas de estilo en cascada o CSS. Separando el contenido, la estructura y la presentacin de los primeros. o Deben ser accesibles utilizando diferentes navegadores. Debiendo al menos uno de ellos ser de distribucin y uso gratuito, y estar disponible desde el propio sitio web. o Deben validar sus hojas de estilo en cascada con las herramientas provistas por el W3C. Ms adelante en este captulo se hace un anlisis detallado de estos lineamientos y la forma de cumplir sus requerimientos.

G. Cmo se Mide y Verifica su Cumplimiento


Los estndares deben ofrecer la capacidad de que su cumplimiento pueda ser medido, con el fin de que se logre establecer si sus caractersticas han sido bien utilizadas. En el caso de los estndares de Internet, es posible verificar su cumplimiento a travs de aplicaciones que funcionan mediante tecnologa web, lo que hace mucho ms simple la revisin. Para ello se cuenta con un grupo de herramientas que son proporcionadas por el W3C las cuales permiten hacer mediciones instantneas acerca del cumplimiento de los estndares establecidos por el organismo. Entre dichas herramientas, las ms relevantes y que estn disponibles de manera gratuita a travs del web, son las siguientes: Disponibilidad de Dominio .go.cr y .cr7: permite revisar si el sitio web del organismo ha sido inscrito en el servidor de dominios de Gobierno (NIC). Es

Sitio Web http://www.w3.org

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 21 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

importante considerar que para que se pueda utilizar esta herramienta, la consulta debe realizarse desde un computador ubicado dentro de la red de Gobierno. o La Validacin de los dominios de Gobierno se realiza en: http://www.nic.cr/niccr_publico/showMain.do Verificacin de HTML: permite revisar el cumplimiento del estndar de la versin de HTML o XHTML que se haya elegido; la herramienta compara el cdigo de la pgina web que se revisa contra la norma correspondiente y da a conocer cules son las infracciones que se han cometido (en caso de existir) y adems, ofrece informacin acerca de cmo resolver el problema.

o La Validacin de HTML se realiza en http://validator.w3.org/


Verificacin de Enlaces Rotos: permite revisar que no haya enlaces rotos o imgenes perdidas en el sitio web, la herramienta entrega un listado de los problemas detectados para que el encargado del sitio web realice las correcciones correspondientes. o La Validacin de enlaces rotos se realiza en http://validator.w3.org/checklink Verificacin de CSS: permite revisar el cumplimiento de la norma que indica que el contenido debe estar separado de la presentacin, la herramienta compara el cdigo de la hoja de estilo con la norma correspondiente y da a conocer cules de los estilos no la cumplen e indica cmo resolver el problema. o La Validacin de CSS se realiza en http://jigsaw.w3.org/css-validator/ Como una forma de dar a conocer pblicamente que un sitio web ha pasado las validaciones, el propio sistema entrega un icono que destaca esta calidad (ver Figura 1). Naturalmente la inclusin de este u otro tipo de imgenes que den a conocer el cumplimiento de estos estndares es voluntaria y su objetivo es dar a conocer esta informacin de manera pblica.

El .cr es el dominio de nivel superior (Top Level Domain) para Costa Rica, y bajo el cual se agrupan todos los dominios de segundo y tercer nivel registrados en nuestro pas (.cr, .co.cr, .ed.cr, .ac.cr, .or.cr, .go.cr, .fi.cr, .sa.cr). .cr corresponde al cdigo de 2 letras para Costa Rica segn RFC 920 del ICANN.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 22 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Figura 1. El sitio web de validacin entrega la informacin para crear una imagen que d a conocer el cumplimiento del estndar.

H. Normas y Estndares que se Incluiran en la Norma


La norma por excelencia para los Sitios Web estara incluyendo un grupo de estndares y exigencias que en su conjunto suman importancia para la construccin de sitios web de mayor calidad. Respecto al contenido de esta norma, se debe sealar aunque se establece una serie de mandatos se crear el portillo que obligue a lo menos cada dos aos" a una normalizacin y actualizacin de sus contenidos. La norma propuesta est conformada por dos niveles de cumplimiento, de conformidad con la complejidad de las acciones que deben ser tomadas, las cuales variarn en cuanto a la fecha de cumplimiento. A continuacin se detallan las regulaciones para cada nivel as como las acciones a realizar para dar cumplimiento. La descripcin a continuacin es la propuesta de la Secretara Tcnica de Gobierno Digital para la norma que regule el desarrollo de los sitios web de las instituciones pblicas. 1. Nivel I Su objetivo es que los Sitios Web sean desarrollados de manera tal que las personas que los utilizan, puedan acceder de manera rpida, efectiva y eficiente a los servicios, funciones y prestaciones ofrecidas en sus pginas. 1.1 Uso de Dominio .go.cr y .cr

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 23 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Todo sitio web de un organismo de gobierno debe hacer uso del dominio .go.cr y .cr para lo cual debe registrarlos. La inscripcin de los dominios de Gobierno se realiza en http://www.nic.cr/ 1.2 Uso de Tablas Reversas Los Sitios Web debern registrar en sus servicios de nombres las tablas reversas de la o las direcciones IP asociadas a los dominios .go.cr y .cr correspondientes. Las tablas reversas son una parte de la implementacin de los Servidores de Nombres de Dominio (DNS, por su sigla del ingls Domain Name Server) que permiten asociar un nombre de dominios a partir de nmeros IP. El beneficio de usar tablas reversas es que los servicios web dentro de la red de Gobierno responden con mayor velocidad al requerimiento de un usuario, facilita la proteccin contra el spam y ayuda a la confirmacin de validez de la relacin entre un nombre y un dominio, permitiendo por ejemplo, evitar acciones de phishing. 1.3 Utilidad Se refiere a la necesidad de que los contenidos del sitio web estn desarrollados con una orientacin al usuario, ofrecindole la informacin de manera simple, rpida y eficiente. Para lograrlo se deben adoptar las siguientes medidas: Ofrecer Contenidos de Utilidad: se refiere a que el sitio web debe ser til desde la perspectiva del usuario, es decir, entregar lo que ste anda buscando. Emplear Etiquetas Descriptivas: se refiere a que se deben emplear palabras y descriptores que sean de fcil comprensin y que estn escritas en el lenguaje que hable el usuario, no en la terminologa propia de la institucin. Asegurar la Correcta Indexacin: se refiere a preparar la informacin del sitio web para que sea incluida en sistemas de bsqueda, con el objetivo de que el sitio web pueda ser encontrado por diferentes medios (ms de este tema en el Captulo 4). Optimizar el Acceso: se refiere a equilibrar el peso y calidad de los contenidos, con el objetivo de asegurar que el sitio web tenga caractersticas fsicas de peso de archivos que sean adecuadas para un buen tiempo de despliegue. Dado que este tema fue tratado en la Gua Web8 versin 1.0, se recomienda su revisin.

1.4 Desarrollo Usando HTML/XML Estndar

Documento accesible en el sitio www.gobiernofacil.go.cr

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 24 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

La referencia ms clara al uso de estndares, sealando que el cdigo de despliegue del sitio web debe ser HTML o XML, detallando que se recomienda que el sitio web cumpla con los estndares HTML 4.01 o XHTML 1.0 validados ante el W3C. Para estos efectos, como se mencion anteriormente se utilizaran las herramientas de verificacin del W3C para asegurar que el sitio web cumple con el estndar sealado. Adicionalmente se debe ejecutar una tarea similar con los enlaces rotos y con las imgenes perdidas. Respecto del desarrollo utilizando estos estndares se recomienda revisar el Captulo III: Diseo Web y Estndares de la Gua Web Versin 1.0, donde se aborda este tema en detalle. 1.5 Monitoreo de Actividad Establece la obligacin del encargado del sitio web para "monitorear regularmente la actividad del mismo" con el objetivo de obtener informacin acerca de los cdigos de error y los elementos ms visitados. Es importante considerar que este tema ya haba sido abordado a travs del Captulo IV "Puesta en Marcha" de la Gua Web 1.0. A partir de la informacin conseguida mediante el monitoreo, se espera que el administrador pueda generar reportes frecuentes de actividad en los que se establezcan los aciertos y errores del sitio, con el fin de establecer las buenas tendencias y realizar las correcciones que sea del caso. Respecto de los errores, cabe tener en cuenta que el protocolo HTTP9 que utilizan las pginas web para la transmisin de sus contenidos, genera errores que estn estandarizados mediante cdigos para su mejor comprensin. Los que comienzan con el nmero 4 representan errores del lado del cliente y los que empiezan con 5 son errores del lado del servidor. De ellos, los ms frecuentes y que deben ser atendidos a travs del monitoreo son los siguientes: Error 401 Acceso no autorizado a una pgina, no se ingres la password. Error 403 Acceso prohibido; normalmente aparece cuando la pgina que se busca no tiene permiso para ser mostrada. Error 404 La pgina no existe y no puede ser mostrada. Error 500 Error en el servidor debido a un problema de software. Error 503 El servicio web no est disponible. Error 504 Tiempo de respuesta excede lo normal y por lo tanto la pgina no se muestra.

Es importante considerar que una buena prctica respecto de este tema es adoptar una poltica de atencin de errores, de tal manera de definir qu mensaje recibir el usuario

Ver el listado de errores en http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 25 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

cuando ocurran los problemas descritos. En particular se debe poner atencin sobre el Error 404, debido a que igualmente se puede producir si, por ejemplo, el usuario escribe mal una direccin. Para atender este problema se sugiere la inclusin de una "pgina de error estndar" en el software del servidor web, para que la muestre en el caso de ocurrir un error. Los elementos mnimos que debe incorporar son: Identificacin del sitio web a travs de un logotipo y nombre. Sistema de navegacin en el Sitio: men, botones, etc. Ttulo que explique el sentido de la pgina.

Un prrafo describiendo el error en lenguaje no tcnico (no ms de dos lneas). Por ejemplo, "El documento solicitado no existe o ha cambiado de ubicacin; puede buscarlo a travs del Mapa del sitio". Buscador interno del sitio web para ayudar a encontrar lo que buscaba cuando apareci el error. 1.6 Contingencias Seala que el organismo dueo del sitio web debe tener un Plan de Contingencia que incluya "las medidas a ser ejecutadas en el caso de que el sitio web deje de estar disponible para el pblico, o que el nivel de acceso disminuya o sea intermitente, o que se vea comprometido por ataques externos". 1.7 Codificacin de Caracteres Para la codificacin de caracteres se utilizar preferentemente UTF-8, sigla que significa 8-bit Unicode Transformation Format. Al respecto se debe indicar que la codificacin de caracteres es un elemento que se declara en la seccin head de cada pgina y permite que el programa navegador interprete adecuadamente los smbolos (letras, nmeros y otros) que se incluyan en la misma. En el caso de esta recomendacin, debe agregarse la siguiente lnea:

La utilizacin de este conjunto de caracteres est relacionada con los lineamientos de interoperabilidad, dnde se sugiere que los documentos electrnicos que se generen en los

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 26 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

rganos de la Administracin Pblica utilicen XML para los documentos y UTF-8 como conjunto para la codificacin de caracteres. 1.8 Poltica de Privacidad Los Sitios Web deben contar con una Poltica de Privacidad de los Datos Personales de los usuarios que acceden a ste, en la cual se den a conocer las obligaciones y derechos que tienen por el hecho de entregar sus datos en las pantallas del sitio web.

2. Nivel II Su objetivo consiste en que los Sitios Web cumplan las directrices principales de las normas internacionales de accesibilidad" con el fin de permitir un grado de acceso a las personas con discapacidades. A continuacin se revisa el contenido de los artculos y la forma de darles cumplimiento. 2.1 Diagramacin con CSS Las pginas de los Sitios Web deben ser diagramadas utilizando hojas de estilo en cascada (CSS por su sigla en ingls), de manera que se separe "el contenido, la estructura y la presentacin de los primeros". Esto podra ser un cambio de importancia respecto de la situacin actual, ya que habitualmente se empleaban tablas para disponer los elementos en las pginas, facilitando de esa manera su ubicacin en la pantalla. La diagramacin con tablas se us habitualmente desde el inicio de los Sitios Web y el problema con esta forma de trabajo se relacionaba con el hecho de que los contenidos se unan con el cdigo utilizado en la presentacin, evitando que el sitio web pudiera ser usado en plataformas diferentes sin adecuarlo previamente. Gracias al uso de las hojas de estilo en cascada, esta situacin puede mejorarse ya que el contenido se pudo mantener inalterable y slo hacer los cambios en la capa de la presentacin, lo que permiti llevar dichos contenidos a cualquier plataforma, slo haciendo cambios en el estilo de diagramacin, el cual se define a travs del archivo CSS relacionado a la pgina. Otro elemento importante en la diagramacin usando las hojas de estilo, es la revisin de lo que ocurre cuando ellas no estn presentes. En este sentido, se debe tender a que el sitio web se degrade aceptablemente, vale decir, que sus contenidos no se vean diagramados con la

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 27 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

presentacin grfica habitual pero que al menos puedan entenderse adecuadamente. Para hacer este experimento, existe una serie de herramientas que facilitan la revisin, destacando entre ellas las extensiones para el navegador Firefox Versin 2: Firebug15: software que ocupa la parte inferior de la pantalla y va mostrando el cdigo fuente a medida que se desplaza el cursor sobre el sitio web que se revisa; ofrece mucha informacin acerca de su cdigo fuente. CSS Viewer16: comando que permite ver el estilo utilizado en la pgina que se revisa, a medida que se desplaza el mouse sobre la pgina web. Web Developer17: barra de herramientas con gran cantidad de opciones para revisar el sitio web. Mozilla Accessibility Extension18: barra de herramientas con todas las opciones necesarias para revisar la accesibilidad del sitio web.

Es importante considerar que al final de este captulo se ofrecen archivos para trabajar en la incorporacin de CSS a una pgina web de manera prctica. 2.2 Utilizacin de Marcos Los marcos o "frames" que se utilicen para mostrar el contenido de los Sitios Web, "deben ofrecer informacin adecuada al usuario" para que ste no tenga dificultades de navegacin o pierda los enlaces que se ofrecen dentro del propio sitio web. El tema de los marcos ya haba sido abordado en la Gua Web versin 1.0 donde se explicaba que dicha tecnologa consiste en agrupar varios archivos para que se desplieguen de manera simultnea, permitiendo a los usuarios ver varios contenidos al mismo tiempo. Se mostraban asimismo las ventajas y desventajas de la misma y se planteaba que esta forma de organizar los Sitios Web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo. Si bien se entiende que esta actividad se puede hacer en un periodo de tiempo adecuado, en tanto se siguen usando los marcos, se deben tener las siguientes consideraciones: La informacin contenida en la seccin noframes que se inserta dentro de la etiqueta frameset debe contener datos adecuados acerca del contenido del sitio web e idealmente, entregar enlaces que permitan acceder a contenidos en el interior del sitio web. Los enlaces que salgan de los marcos deben utilizar siempre el modificador "target" en la etiqueta a, con el objetivo de que el enlace siempre llegue hacia uno de los marcos cuyo

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 28 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

nombre se indica; hacia la ventana donde estn contenidos los marcos usando el modificador target =_ top o bien hacia una ventana nueva usando el modificador target =_ blank. Los buscadores de Internet pueden tener indexado el contenido de los marcos por separado, lo que podra motivar su apertura sin los dems archivos que le dan contexto a las pginas. Para ello se aconseja programar a nivel de servidor para que cada vez que se solicite una pgina por separado, sta se muestre con los marcos relacionados. 2.3 Uso de Plug-ins En caso de que se emplee software adicional al sitio web para mostrar contenidos especficos, se debe proporcionar el visualizador correspondiente de manera gratuita, ya sea que puedan ser bajados del propio sitio web como desde el sitio web de la empresa que lo ofrezca. El objetivo de esta medida es que los usuarios no deban comprar un software para acceder a los contenidos de los Sitios Web, sino que siempre tengan alternativas gratuitas para revisar la informacin que se les ofrece. En este sentido, cabe mencionar que lo anterior tambin implica que los Sitios Web no deben ofrecer archivos para los cuales no haya visualizadores gratuitos o que pertenezcan a formatos propietarios, aunque se suponga que todo el mundo tenga dichos software. Los visualizadores ms habituales y sus ubicaciones va web son los siguientes: Adobe-PDF: http://www.latinamerica.adobe.com/products/acrobat/readstep2.html MS-Excel: http://www.microsoft.com/downloads/details.aspx?familyid=c8378bf4-996c4569-b547-75edbd03aaf0&displaylang=es MS-Word: http://www.microsoft.com/downloads/details.aspx?familyid=95E24C878732-48D5-8689-AB826E7B8FDF&displaylang=es MS-PowerPoint: http://www.microsoft.com/downloads/details.aspx?familyid=428D5727-43AB-4F2490B7-A94784AF71A4&displaylang=es 2.4 Accesibilidad

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 29 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Los Sitios Web deben ser accesibles usando diferentes tipos de navegadores10 (browser o programa para ver Sitios Web), de los cuales al menos uno debe ser gratuito y estar disponible en el propio sitio web para que sea obtenido por los usuarios. El objetivo de esta medida es terminar con la optimizacin" que habitualmente se hace en los Sitios Web para que puedan ser vistos a travs de un navegador en particular. Asimismo, al no existir optimizacin del navegador, se debe trabajar para que el sitio web cumpla los estndares web, ya que de esa manera se puede asegurar que efectivamente cualquier programa de navegacin pueda acceder a los contenidos. En este mbito, la organizacin W3C ofrece su propio browser denominado Amaya"11 que est disponible para las plataformas Windows, Macintosh y Linux (Debian, Ubuntu, RedHat, Mandrake, Suse). 2.5 Validacin de la Hoja de Estilo Mientras anteriormente se seal que las pginas de los Sitios Web deben ser diagramadas utilizando hojas de estilo en cascada (CSS por su sigla en ingls), ahora se detalla indicando que dichas hojas deben ser validadas usando el servicio ofrecido por el W3C. El servicio est disponible en http://jigsaw.w3.org/css-validator/ El objetivo de esta actividad es asegurar que las hojas de estilo del sitio web cumplan con el estndar adoptado por el W3C, en el entendido que de esta manera se podr asegurar que el sitio web puede ser utilizado desde cualquier plataforma.

I. Puesta en Marcha
Una de las caractersticas ms importantes del estndar HTML es que permite la creacin de documentos que tienen una estructura definida, en la cual se puede ordenar por importancia el contenido que se incluya. Por eso es relevante que en este captulo de estndares, se incluya una referencia hacia esta caracterstica, debido a que al desarrollar el sitio web utilizando estndares esta forma de ordenamiento del contenido ocupa un lugar privilegiado.

10 11

Se puede encontrar una coleccin histrica de browsers en http://browsers.evolt.org/ Se puede obtener el browser desde http://www.w3.org/Amaya/User/BinDist.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 30 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Adicionalmente, esta caracterstica estructural es la que permitir que el sitio web pueda cumplir una de las metas que tienen las normas sealadas en este captulo, cual es la de permitir que los Sitios Web del Gobierno sean accesibles por personas con discapacidades fsicas. De lo anterior se concluye que al realizar la Puesta en Marcha del desarrollo de un proyecto web, sus pginas debern estar conformadas de la manera que se indica en los siguientes ttulos. Estructura de los Documentos Web El estndar HTML determina que los contenidos deben ser ubicados mediante el uso de etiquetas (del ingls "tag") que especifica la caracterstica del mismo y que se identifican porque usan los corchetes angulados <" y >" para designarlas. Dichas etiquetas van desde las que permiten darle forma a todo el documento, hasta aquellas que sirven para explicar el comportamiento o caractersticas de una parte del mismo, como un ttulo, un enlace o una imagen. Lo importante, es que cualquier elemento dentro de la pgina, debe ser incorporado mediante una etiqueta y que sta debe cumplir las formalidades que indica el estndar para ella. En trminos generales, los documentos web estn compuestos de tres partes y dentro de stas, hay un orden que ayuda a su comprensin y uso. Dichas partes son:

o Declaracin del Tipo de Documento Estndar a Usar Corresponde a las primeras lneas que debe tener toda pgina web y en ella se indica el tipo de documento de que se trata y con ello, el estndar que regir su contenido. Normalmente la declaracin es similar a la siguiente:

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 31 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Como se puede observar del texto, los elementos que son relevantes son los siguientes: Tipo de documento: con la expresin "doctype" se indica cul es el estndar a utilizar, el cual aparece por escrito. En el caso del ejemplo anterior, es XHTML, versin 1, en su modo de transicin (el otro se denomina estricto). Referencia del documento: siempre se indica un enlace a un documento con la extensin "dtd", que es el documento oficial del W3C donde se establece el estndar y sus caractersticas. Etiqueta <html>: es la que da inicio a las etiquetas del sitio web y que ser finalizada al trmino del documento con la etiqueta </html>; en el caso de este ejemplo, cuenta con dos modificadores que son xmlns para detallar cul es el conjunto de atributos del estndar (cuya ubicacin se indica con una direccin web) y lang, para sealar el lenguaje en que estar el contenido.

Si estas lneas no estn presentes, el validador entregar un error general y no seguir revisando la pgina.

o Encabezado de la Pgina Una vez que se ha declarado el estndar como se indic antes, las siguientes lneas de cdigo de la pgina web estn reservadas para crear el encabezado, que se despliega entre las etiquetas <head> y </head>. Dentro de ellas se ubican los elementos mediante los cuales se describe el contenido de la pgina web, por lo cual a estos elementos se les llama "meta datos" (datos acerca de los datos). Los hay de cuatro tipos, de acuerdo a la siguiente descripcin: Ttulo: es la etiqueta <title> que permite designar el ttulo que llevar en el encabezado de la ventana el sitio web; se recomienda que lleve el nombre del sitio web ms un ttulo que describa el contenido de la pgina. Por ejemplo: "Secretara Tcnica de Gobierno Digital Costa Rica: Acerca de la Secretara". De esta manera, esta informacin ser la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha pgina.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 32 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Metadato: es informacin acerca de la informacin y se define mediante la etiqueta <meta>. Para hacerlo se pueden emplear las descripciones del W3C o bien las del proyecto Dublin Core, las cuales permiten generar informacin descriptiva acerca de contenidos, autores, copyright y otras descripciones acerca de los contenidos del sitio web. Los ms usados son:

Cabe recordar que este tema fue tratado en la Gua Web versin 1.0, por lo que sugerimos revisar dicho contenido. Enlaces externos: permite informar al documento acerca de otros archivos que se deben ejecutar al mismo tiempo; el mejor ejemplo es el llamado a una hoja de estilo para ejecutar la presentacin grfica de la pgina:

Scripts: permiten hacer llamados a lenguajes de programacin, como Javascript, para desarrollar acciones y crear funcionalidades en la pgina web que se est visitando. Por ejemplo:

o Cuerpo de la Pgina

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 33 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Cuando ya se ha ingresado la informacin correspondiente al encabezado, se accede a la zona de contenido propiamente tal la que se despliega entre las etiquetas <body> y </body>. En el caso de sitios realizados mediante marcos o "frames" esta etiqueta va situada dentro de esta ltima. Dentro de ellas se ubican todos los elementos que pueden identificarse como los contenidos de la pgina web, vale decir, textos, imgenes, funcionalidades. No obstante, para que su despliegue sea adecuado, es importante considerar la estructura de la pgina, la cual se explica a travs de las siguientes etiquetas: Utilizacin de la etiqueta <h>: es la etiqueta utilizada para marcar los ttulos que habr en el contenido, comenzando por el principal que recibe la etiqueta <h1>. Cabe recordar que gracias al uso de la tecnologa CSS de Hojas de Estilo, ser a travs de sta que se dar el formato adecuado a dicho ttulo para que se distinga en la pgina. Las etiquetas <h> van desde 1 a 6, por lo que permiten indicar hasta seis niveles de importancia de los titulares utilizados en el documento. Su uso es muy relevante en trminos de accesibilidad, ya que los programas de software lectores de pantalla -que leen el contenido para que sea escuchado por usuarios ciegos- siempre buscarn esta jerarqua de los contenidos para determinar la seccin por la que debe comenzar la lectura de la pgina. Utilizacin de la etiqueta <p>: es la etiqueta utilizada para marcar los prrafos en los que se divide el contenido; utilizando la tecnologa CSS de Hojas de Estilo, es posible agregarle el formato adecuado como tamao de letra, espaciado, interlineado, sangra, justificacin, color y tipografa utilizada. Utilizacin de la etiqueta <div> y <span>: son elementos neutros que sirven para marcar y agrupar contenidos con fines estructurales. Con <div> se define lo que ocurre con bloques de informacin, mientras que con <span> es posible hacer esa misma definicin pero para lneas de contenidos. Ambas etiquetas utilizan las definiciones existentes en las Hojas de Estilo y permiten aplicarlas a los contenidos. Basndonos en un ejemplo de W3C, se puede ver el siguiente cdigo en que se aprecia la aplicacin de estas etiquetas:

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 34 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Si al documento anterior se le agrega la siguiente hoja de estilos (que en este caso se define en el propio documento):

Se puede ver que la seccin identificada por el id="sitio-web" va a aparecer alineada en forma justificada y con su texto en 12 puntos de altura; adicionalmente su ttulo marcado por <h1> se ver en letras cursivas de color verde. Mientras que la seccin identificada por el id="pagina-web" va a heredar las caractersticas de la anterior -porque es un bloque que est inserto en ste pero tendr una columna ms angosta por la indentacin que se indica, mientras que su titular -marcado con <h2> ser de color verde pero en estilo normal. Otro uso muy interesante de la etiqueta <div> es la de expresar posiciones de los bloques de contenido en el sitio web, gracias a lo cual se puede diagramar la informacin de una manera adecuada a la plataforma en que se est trabajando.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 35 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Utilizacin de las Hojas de Estilo (CSS) Como se puede apreciar por el ejemplo anterior, cuando se logra separar el contenido de la presentacin, el resultado suele ser muy poderoso ya que permite al administrador del sitio web hacer cambios al diseo (colores, ubicaciones, tamaos) del contenido de sus pginas con muy poco esfuerzo: basta con modificar la Hoja de Estilos para que stos tengan efecto. Para utilizar de mejor forma las Hojas de Estilo en Cascada, se ofrecen tres archivos que se pueden obtener: o Archivo de Contenido: se trata del archivo 3cols.htm que consiste en una pgina con tres columnas: una tiene un logotipo y las otras dos, texto simulado; en su cdigo se puede ver que slo tiene etiquetas de html estndar, por lo que esta pgina hace un uso vlido de los estndares. o Hojas de Estilo: se ofrecen dos para este archivo, las cuales se llaman desde la seccin <head> de su cdigo; una de ellas es para mostrar el contenido en pantalla, mientras que la segunda es para impresin. Los archivos se denominan 3cols.css y 3cols-print.css. Un elemento interesante, es que al usar la hoja de estilo de impresin, se modifica completamente el contenido y la pgina se diagrama de manera diferente. La intencin de entregar estos archivos es que el usuario de la Gua pueda trabajar con ellos y hacerles las modificaciones que estime adecuadas, para ir aprendiendo sobre la marcha el efecto que consigue a travs de los cambios que realice. Para aprender y practicar ms sobre este tema, de por s complejo, se sugieren los siguientes recursos: Tutorial CSS en W3C - http://www.w3.org/Style/Examples/011/firstcss.es.html Tejedores del Web - http://www.tejedoresdelweb.com/307/article-1061.html Directorio de enlaces de CSS en W3C - http://www.w3.org/Style/CSS/learning

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 36 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Captulo 3
Diseo de Interfaces e Interaccin

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 37 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Resumen
La clave del xito de un Sitio Web est dada por la forma en que se presenta la informacin a los visitantes. Debido a que el web es el resultado de la implementacin de una serie de tecnologas que facilitan la transmisin de contenidos desde un computador central o servidor a una serie de clientes o usuarios, utilizando computadores conectados a la red Internet, es muy importante que la informacin ofrecida cumpla con ciertas reglas y/o estndares, para que sus usuarios puedan sacarle todo el provecho posible. En este captulo entonces, se abordan los elementos necesarios para que la creacin de las interfaces de los Sitios Web (las pantallas que el usuario visita y utiliza) cumpla con dichos preceptos y la comunicacin fluya ms directamente entre el organismo y el usuario final.

B. Introduccin / Diseo de Interfaces e Interaccin


Uno de los captulos iniciales de la Gua Web versin 1.0 se refiere a la estrategia que debe seguir un rgano de la Administracin Pblica para decidir qu debe incluir en dicho espacio digital, e indica que al inicio de un proyecto corresponde definir cules sern los objetivos centrales que deber tener el Sitio Web y establecer la forma de cumplirlos partiendo desde la visin y misin del organismo, con el objetivo de establecer un objetivo central y luego definir varios objetivos secundarios. Con estas directrices, la primera versin de la Gua Web promova que los encargados del sitio web pudieran recopilar los elementos suficientes para crear un conjunto de contenidos y funcionalidades que les permitieran hacer una oferta de informacin adecuada para sus visitantes. Lo que no se estableca en dicha Gua y que se aborda a travs de esta nueva versin, es la forma que deben tener las pantallas que se generan en los Sitios Web, para cumplir con la tarea de hacer su contenido ms simple de usar para quienes visitan sus pginas. Es importante sealar que la clave del xito de un sitio web est dada por la forma en que se presenta la informacin a los visitantes. Por ello es que en este captulo se abordan los elementos necesarios para que durante la creacin de las interfaces de los Sitios Web (las pantallas que el usuario ve y utiliza) se cumpla con dichos preceptos y la comunicacin fluya ms directamente entre el organismo y el usuario final.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 38 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Asimismo las instrucciones de este captulo deben revisarse en conjunto con las del Captulo V - De la Usabilidad a la Utilidad en el que se hace nfasis en la necesidad de asegurar la facilidad de acceso a la informacin por parte de los ciudadanos.

Diseo Web Se entiende por diseo web12 el conjunto de actividades que permiten avanzar desde el concepto que se defina para el sitio web hasta su realizacin, por lo que no slo est referido a las tareas relacionadas con el diseo grfico, sino que tambin aborda otras como las definiciones relativas a usabilidad, interaccin, y tambin a todas las que estn relacionadas con los contenidos propiamente tales. Por lo mismo, este captulo aborda todos estos elementos y se podrn encontrar a continuacin las recomendaciones de buenas prcticas para cada uno de estos aspectos, con el fin de que el encargado del sitio web pueda adoptarlas de acuerdo a la realidad de su propia organizacin. Es importante tener en cuenta que los aspectos relacionados con el desarrollo de un proyecto web propiamente tal no son tratados en este captulo, ya fueron abordados en la versin 1.0 de la Gua Web a travs del Captulo II: Definicin del Sitio Web y el Captulo III: Diseo Web13.

Qu es una interfaz? Cuando se habla de Sitios Web, se denomina interfaz14 al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el sitio web que est visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificacin, de navegacin, de contenidos y de accin. Todos ellos deben estar preparados para ofrecer servicios determinados al usuario, con el fin de que ste obtenga lo que vino a buscar cuando visit el sitio web. Por lo anterior, cada uno de los elementos que sean integrados dentro de la interfaz debe estar pensado para causar un efecto sobre el usuario y deben ser utilizados con un propsito. En este sentido, es importante

Ver definicin ms amplia en http://es.wikipedia.org/wiki/Dise%C3%B1o_de_p%C3%A1ginas_web Documento disponible en el sitio www.gobiernofacil.go.cr 14 Ver una definicin ms amplia en http://es.wikipedia.org/wiki/Interface
12 13

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 39 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

considerar que uno de los autores15 ms citados en cuanto a la usabilidad de los Sitios Web, destaca que los elementos ms importantes de la portada de todo sitio web se pueden resumir en cuatro postulados generales: o Dejar claro el propsito del sitio: se refiere a que el sitio debe explicar a quin pertenece y qu permite hacer a quienes lo visitan; se entiende que debe hacerlo de manera simple y rpida. Por ejemplo, ayuda en este sentido el cumplimiento de las normas referidas a uso de URLs y logotipos oficiales. o Ayudar a los usuarios a encontrar lo que necesitan: implica que debe contar con un sistema de navegacin visible y completa, pero que adems deber estar complementado por algn sistema de bsqueda que sea efectivo para acceder al contenido al que no se logra acceder o que no se encuentra a simple vista. o Demostrar el contenido del sitio: significa que el contenido se debe mostrar de manera clara, con ttulos comprensibles por parte del usuario y con enlaces hacia las secciones ms usadas que estn disponibles donde el usuario los busque. Ayudar en este sentido tener un seguimiento de las visitas para comprender qu es lo ms visto y lo ms buscado del sitio web. o Usar diseo visual para mejorar y no para definir la interaccin del sitio web: se refiere a que los elementos grficos del sitio web deben estar preparados para ayudar en los objetivos del sitio y no slo como adornos utilizados para rellenar espacio. Aunque se trata de uno de los temas ms debatibles, su alcance no es el de restringir el uso de imgenes y elementos grficos, sino a que su uso sea adecuado para la experiencia de uso que se desea ofrecer. Como se puede apreciar, el foco central de una interfaz es permitir que el usuario que llega como visitante logre los objetivos que lo trajeron al sitio web y que ste le facilite el acceso a los contenidos que estn incorporados a travs de sus pantallas. Para conseguir esto, es necesario que la interfaz adopte los elementos que detallamos en este captulo, a travs de los cuales ser posible conseguir el cumplimiento de los postulados antes sealados. o Elementos de la Interfaz

Jakob Nielsen con su artculo Top Ten Guidelines for Homepage Usability (versin en idioma ingls), en: http://www.useit.com/alertbox/20020512.html
15

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 40 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

La interfaz del sitio web, cualquiera sea el objetivo que persiga, debe dar cuenta de normas de carcter general, que se refieren a sus caractersticas como sistema de informacin y comunicacin. Gracias al cumplimiento de stas, el usuario lograr acceder a las informaciones que se le ofrecen y, adems, podr realizar las acciones que el organismo dueo del espacio digital le entrega a travs de este sistema. Dichas caractersticas tienen que ver con los elementos de identificacin, de navegacin, de contenidos y de accin que el sitio web debe contener, todos los cuales se analizan en las siguientes pginas. La existencia e importancia de dichos elementos, como asimismo la ubicacin que deben tener en la interfaz, se ha visto comprobada a travs de las investigaciones que se han hecho en torno a los Sitios Web. Con ellas se demuestra que las zonas que normalmente se ven en una visita inicial, estn conformadas por una letra F7 o bien por un tringulo16, cuya seccin ms revisada es la que se encuentra en la esquina superior izquierda. Lo anterior se aprecia en la Figura 2, tomada del sitio web de la consultora de Jakob Nielsen.

Por lo anterior, es importante que las interfaces se construyan tomando en cuenta esta evidencia, con el fin de asegurar que los visitantes reciban la informacin en cuanto lleguen al sitio web, permitiendo que el diseo web contribuya al mejor uso de los contenidos y funcionalidad, en lugar de afectar dicho uso.

16

Ms informacin en http://www.enquiro.com/research/eyetrackingreport.asp

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 41 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Respecto de los elementos de la interfaz, los aspectos ms relevantes a tener en consideracin son los siguientes: a. b. c. d. e. Uso de logotipos Sistema de navegacin reas de contenidos reas de interaccin Experiencia de usuario

Si se revisa el siguiente esquema (tambin llamado wireframe), se podr ver la ubicacin relativa de todos ellos, ver figura 3:

a. Uso de Logotipos Lo importante, en este sentido es que el usuario que ingrese al sitio web entienda a quin pertenece el sitio web de un solo vistazo y no tenga que estar adivinando si ha llegado al lugar que deseaba visitar. Para enfatizar en esto, es recomendable que el logotipo de identificacin se ubique en la esquina superior izquierda de las pginas por tratarse del lugar que siempre se mira con la mayor frecuencia y que, por la forma ms tradicional de construccin del cdigo HTML, aparecer como uno de los primeros elementos de la pantalla.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 42 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A continuacin se pueden ver algunos ejemplos de cmo los organismos pblicos utilizan este elemento de identificacin: La figura 4 muestra el sitio de la Caja Costarricense de Seguro Social, muestra el logotipo en un tamao pequeo y el premio a la Excelencia de Gobierno Digital 2008.

La figura 5 El sitio del Instituto Nacional de Seguros, muestra el logotipo y el nombre de la institucin en letra pequea.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 43 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Siguiendo con la identificacin del sitio web, otro elemento que ayuda en este aspecto es el correcto uso de la etiqueta <title> en la cabecera de las pginas web, a travs de la cual se define el ttulo que mostrar el sitio web en la parte superior de la ventana del browser utilizado. El contenido de la etiqueta <title> es de gran importancia: su contenido es usado por los buscadores para crear un enlace en sus pginas de resultados, que lleve hacia el sitio de la institucin pblica. En las imgenes anteriores se puede apreciar en la barra azul que aparece al tope de cada imagen. En este sentido se recomienda que lleve el nombre del sitio web ms un ttulo que describa el contenido de la pgina, debido a que dicha informacin ser la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha pgina. Finalmente en este aspecto se debe sealar que utilizando los dos elementos antes sealados, el usuario debe recibir la informacin suficiente para saber que est en un sitio web de un organismo del Gobierno y adems, conocer el nombre de dicho servicio.

b. Sistema de Navegacin Se denomina sistema de navegacin al conjunto de elementos presente en cada una de las pantallas, que permite a un usuario moverse por las diferentes secciones de un sitio web y retornar hasta la portada, sin sentir la sensacin de haberse perdido en ese camino. Para conseguir este objetivo el diseo web debe contemplar, al menos, que el sistema de navegacin cuente con los siguientes elementos: Men de secciones: es una zona de la interfaz en la que se detallan las secciones o categoras en las que est dividida la informacin contenida en el sitio web. Normalmente se ubica en la parte superior de cada pgina o bien en la zona superior derecha o izquierda. Hasta la aparicin de los ltimos estudios basados en eyetracking17 no haba una recomendacin certera acerca de su ubicacin; tras stos, parece indicado ubicarlos en la zona superior o en la zona superior izquierda. Se debe evitar el uso de nombres complejos y preferir palabras de fcil y rpida comprensin.

17

Ms informacin en http://www.enquiro.com/research/eyetrackingreport.asp

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 44 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Men de rastros: es el men que indica mediante los nombres de cada seccin o categora del men, la distancia que separa a la pgina actual de la portada. Por ejemplo, si el usuario est revisando la pgina del Programa A, el men correspondiente debe indicar Portada > Programas > Programa A. Este men debe ir siempre debajo de la Identificacin de la seccin o categora y sobre el ttulo. Identificacin de secciones: debe estar en la zona superior de la pgina, de manera cercana la zona donde se encuentra el logotipo que se haya elegido para identificar al sitio web. Puede ser grfico y por lo mismo tener alguna imagen alusiva a la seccin o categora o bien ser una solucin que incorpore slo texto y color. S debe tener en forma destacada el nombre de la seccin o categora y por lo mismo, debe aparecer en todas las pantallas que pertenezcan a dicha sta. En trminos de tamao, su ancho debe ser el de la zona de contenido y su alto, no menor a 100 pixeles (aproximado) para una adecuada visualizacin. Si usa colores, recuerde que deben tener contraste adecuado para ser usados por personas con problemas de visin disminuida. Enlaces de accin: son aquellos elementos que permiten realizar acciones directas relativas a la navegacin y que se muestran como parte de sta, tales como los correspondientes a Regreso a la Portada, Contacto, Envo de Mail al Sitio y Mapa del Sitio. Eyetracking: sistema de comprobacin de usabilidad que permite identificar qu est mirando un usuario en una pantalla. Pie de pgina: aunque regularmente no se le concede importancia en trminos de navegacin, se entiende que la zona inferior de cada pantalla cumple el relevante papel de completar su la informacin que se ofrece en las zonas superiores de navegacin, al entregar datos relativos a la organizacin (nombre, direcciones, telfonos), poltica de privacidad y repetir enlaces que se han entregado en la zona superior, para facilitar el contacto del usuario con el sitio.

c. reas de Contenidos Se entiende por reas de contenidos a las zonas en la que se entrega la informacin en cada pgina web, sin importar el formato o los medios que sta utilice. Dentro de la zona de contenido se debe distinguir las zonas de ttulo, resumen e informacin propiamente tal.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 45 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Para la zona de ttulo, como se especific previamente en esta versin de la Gua se debe trabajar con las estructuras definidas por las etiquetas <h> que permiten indicar hasta seis niveles de importancia de los titulares (incluyendo ttulos y subttulos) utilizados en el documento. Es imprescindible para efectos de Accesibilidad por parte de personas con discapacidades fsicas, en particular para quienes tienen problemas de visin, que el ttulo principal del contenido se escriba usando la etiqueta HTML conocida como <h1> debido a que los lectores de pantalla usada por personas ciegas lo destacan como el ttulo principal de la pgina. El resumen en tanto, permitir explicar en dos o tres lneas el contenido de la pgina y se podr utilizar esa misma informacin para la etiqueta del encabezado que permite incluir una descripcin. Respecto del contenido o informacin propiamente tal, se debe privilegiar el uso de textos cortos, separados por subttulos significativos que permitan entregar de manera concisa y clarea la informacin al usuario. Se debe recordar que las personas no leen en pantalla de la misma forma que en los documentos impresos, por lo que se debe privilegiar la economa de palabras. Adicionalmente, como parte de los contenidos, siempre se deber ofrecer informacin adicional, recursos multimediales y otros que aprovechen el hecho de que el usuario accede a la informacin a travs de un sistema computacional. Nuevamente, se debe recordar que los contenidos que no sean textuales debern cumplir con las normas de accesibilidad recomendadas por el W3C.

d. reas de Interaccin Se entiende por reas de interaccin a las zonas en la que se ofrece realizacin de acciones por parte de los usuarios del sitio web, a travs de las cuales pueden utilizar los servicios de la institucin que pone en marcha el espacio digital. La interaccin, en este sentido, va desde acciones menores que pueden ser enlaces para mayor informacin o suscripcin a servicios informativos peridicos, hasta la realizacin de trmites complejos como la obtencin de certificados o el pago de obligaciones. Uno de los elementos que se debe tener en cuenta en este aspecto es que el usuario normalmente entiende que las zonas de contenidos son para leer y revisar informacin y las zonas de interaccin son las que muestran botones y en ellas no se lee, sino que se ingresa informacin y se desarrolla la actividad que el sitio ofrece llevar a cabo.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 46 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Por lo mismo, es necesario que en las zonas de interaccin haya la mnima informacin posible y que siempre sea la necesaria para llevar a cabo en forma adecuada la accin a que se refiere la interfaz. Por ejemplo, debido a que normalmente la interaccin tendr lugar a travs de un formulario, es necesario que ste slo cuente con los datos mnimos para que el usuario ingrese lo solicitado para activarlo. En los siguientes ejemplos se hace un comentario sobre esta forma de trabajo:

Ejemplo 1: la pantalla muestra un sistema de interaccin directa a travs de un formulario que slo ofrece informacin bsica, ya que todo est explicado mediante elementos del propio formulario en la pgina web; el texto, por lo mismo se reduce al mnimo.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 47 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Ejemplo 2: el formulario contiene mucha informacin, pero en trminos prcticos el usuario no la lee porque est interesado en la accin propuesta en el formulario, que es ingresar RUT y Clave. Como se puede apreciar a partir de los ejemplos, es necesario que las zonas de interaccin estn diseadas de manera que privilegien la accin. Si se desea dar informacin relativa a sta, debe ofrecerse mediante enlaces relacionados y ubicados en las cercanas y no a travs del despliegue de texto en el mismo lugar porque queda claro que ste no ser ledo.

e. Experiencia de Usuario Se entiende por Experiencia de usuario lo que siente y experimenta un usuario que ingresa a cada pgina web. Si bien no es fcil de medir y adquiere un tono subjetivo al hablar de sensacin, s es un elemento que se puede modelar gracias al uso de diferentes elementos que son empleados por el usuario que visita el sitio web. Adems de ser un campo de estudio muy abordado desde diferentes disciplinas, el rea de Experiencia de usuario ha recibido aportes muy notables en el ltimo tiempo gracias a la introduccin de tecnologas de seguimiento de las acciones del usuario en un sitio web, tales como las de eyetracking mencionada antes que han permitido entender de manera real y concreta la manera en que los usuarios emplean los espacios digitales.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 48 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

En este sentido, se ha observado que los usuarios necesitan confirmaciones visuales de las percepciones que tienen de los contenidos que revisan. Por ejemplo, la utilizacin de un lenguaje claro genera una tasa de respuesta ms alta que cuando el lenguaje utiliza palabras que no son tan conocidas para el usuario. Lo mismo ocurre cuando los elementos interactivos como enlaces, botones y zonas de ingreso de informacin no se presentan con las formas a las que el usuario est acostumbrado. Debido a lo anterior, a continuacin se entregarn recomendaciones acerca de tres elementos que son claves en la experiencia que tiene el usuario y que se utilizan con gran frecuencia: nos referimos a los enlaces, botones y formularios: Uso de botones

Los botones son los elementos que permiten que el usuario realice o confirme acciones solicitadas en las pantallas del sitio web. Por lo mismo, su forma debe ser estndar, similar en todo el sitio y no ofrecer dudas acerca de su presencia o de la accin a la que invita. Para ello es necesario que se cuide tanto su aspecto fsico como la palabra que contiene, ya que ambos permitirn que el usuario entienda, sin lugar a dudas, qu ocurrir si lo presiona.

En el ejemplo de la Figura 6, queda claro que hay un espacio para escribir y luego el botn Buscar; adems se ofrece un breve ttulo explicativo de lo que permite hacer el formulario. De esa manera se facilita la comprensin del funcionamiento del mismo y el usuario tiene claro cul ser el efecto de la accin que emprender.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 49 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

En el ejemplo de la Figura 7, hay dos cambios importantes: el formulario no tiene un ttulo que explique para qu es el formulario de manera breve, sino que se enfoca a lo que el usuario ya sabe, que es que debe ingresar una palabra o frase para buscar; adems el botn al no decir slo Buscar tambin genera un problema de comprensin ya que obliga al usuario a pensar si efectivamente eso es un botn o es una etiqueta descriptiva. Otro elemento importante es la palabra que acompaa al botn. Esta necesariamente debe estar relacionada con la accin a realizar y dicha accin debe ser coherente con lo que se ofrece en la pantalla en la que se est trabajando. Adems, debe ser una sola palabra y corresponder a un verbo que defina adecuadamente la accin ofrecida. Finalmente el ltimo elemento relevante es que el botn debe cambiar de estado cuando el mouse est sobre l, utilizando alguna tecnologa que haga evidente su comportamiento como botn activo. En conclusin, para que un formulario sea efectivo y apoye la experiencia que tendr el usuario que visite el sitio web, los botones deben parecer tales (en tamao, forma, accin y contenido) y debern estar ubicados de manera que el usuario sepa qu ocurrir cuando los presione. Asimismo, deben ser parte integrante de formularios que logren indicar en una frase breve y explicativa, qu ocurrir al utilizarlos.

Uso de enlaces

Los enlaces son una de las caractersticas esenciales de los sitios web, ya que permiten al usuario visitar otros documentos del mismo o externos, slo haciendo clic sobre una zona demarcada. En este sentido, si bien el estndar indica que el enlace debe ser subrayado y de color azul, los cambios tecnolgicos han permitido que haya otras formas de hacerlos evidentes.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 50 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

No obstante, hay ciertos elementos que siguen siendo esenciales respecto de los enlaces y son los siguientes: 1. Deben ser diferentes al texto: los enlaces se deben diferenciar del texto que los rodea para explicar visualmente al usuario que se ofrece una accin a partir de su contenido. La forma de diferenciarlo puede variar pero al menos se debe procurar que est subrayado y de color diferente o bien, si no est subrayado, s se debe mostrar en otro color. 2. Su estado debe ser visual: los enlaces tienen cuatro estados posibles los que deben visualizarse de manera simple y directa (Ejemplo en Figura 8). a. Enlace sin visitar: es el color que tiene antes de que se le haga clic encima; su color debe ser diferente del texto que lo rodea. b. Enlace destacado: es el color que puede adoptar cuando se le pasa el mouse sobre el enlace y permite ayudar al usuario a descubrir su existencia. c. Enlace activo: es el color que tiene cuando se le da clic encima; normalmente es un color fuerte que permite notar que se le ha activado. d. Enlace visitado: es el color que tiene el enlace cuando ya ha sido activado y la pgina a la que conduce ya ha sido visitada.

La figura 8 muestra la diferencia visual entre los cuatro tipos de enlaces

3. Su contenido debe ser explicativo: los enlaces deben contener palabras que expliquen hacia dnde se dirige la accin, de tal manera de evitar que lo enlazado sean frases como clic aqu y otras similares. Adicionalmente y para efectos de aumentar su accesibilidad, la sintaxis HTML de los enlaces debe contener el modificador title de tal manera que se despliegue un recuadro explicativo (ver Figura 9) acerca del efecto que tendr hacer clic sobre el enlace elegido. La figura 9 se observa como el texto explicativo ofrece ms informacin sobre el enlace

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 51 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Uso de elementos especficos

Los restantes elementos interactivos que requieren ser revisados son los que permiten definir el tipo de interaccin que se desea ofrecer a los usuarios del sitio web a travs de un formulario. El primero de ellos es el llamado Text Area que es el que permite que el usuario pueda ingresar informacin en los formularios. Respecto de ste, se define como buena prctica ofrecer un espacio adecuado para escritura (por ejemplo, 500 caracteres que equivalen a seis lneas de texto). Sin embargo, una prctica ms adecuada consiste en emplear un contador reverso que informe el total de caracteres que se puede escribir y que los vaya restando a medida que el usuario va ingresando la informacin; de esa manera se le ofrece una retroalimentacin adecuada. El segundo elemento es el check button que permite marcar las opciones que sean las ms adecuadas para la accin que se est realizando dentro de un formulario. Hay que tener en cuenta que un campo de este tipo siempre permite la seleccin mltiple de opciones. El tercer elemento es el radio button que permite marcar la opcin ms adecuada para la accin que se est realizando dentro de un formulario; normalmente se trata de opciones excluyentes entre ellas. La figura 10 muestra el uso del radio button para marcar el campo Sexo.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 52 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Para efectos de que el usuario tenga una experiencia adecuada al usar el sitio web, es imprescindible que los elementos citados slo se empleen de la forma sealada.

Desafos de nuevas tecnologas

Uno de los desafos de los encargados de los Sitios Web ser siempre ir avanzando al mismo paso que lo hacen las tecnologas que se utilizan para desarrollarlos. En este sentido, en esta Gua se decidi incluir referencias para dos de ellas que son Flash y Ajax, debido a que con ambas se enfrentan problemas relacionados con la accesibilidad que pueden ser resueltos adecuadamente. 1. Uso de Flash Flash es una tecnologa propietaria de la empresa Adobe18 que tiene como objetivo ofrecer interactividad en un entorno grfico mejorado. Debido a que tiene herramientas para hacer un uso especializado de sonidos, imgenes y video, es el entorno ms utilizado cuando se desea ofrecer informacin de este tipo. Ya en la primera versin de la Gua Web se entregaba una recomendacin para evitar el uso de esta tecnologa en la portada del sitio web, explicndose que su uso recarga la presentacin del sitio y si la presentacin no est bien hecha, puede impedir el acceso de los robots de bsqueda al interior del mismo. Con el tiempo transcurrido y las sucesivas versiones de esta tecnologa, se ha avanzado en la especificacin de su accesibilidad, existiendo variados ejemplos para ofrecer formas de acceso paralelas. Adicionalmente la propia empresa ha ofrecido guas19 para hacer accesibles las aplicaciones hechas con Flash (desde la versin Flash MX 2004 en adelante) que permiten ofrecer alternativas no grficas para sus pantallas grficas. Entre las acciones que se deben realizar en este sentido se cuentan las siguientes: 1.1 Utilizar equivalentes de texto para los elementos grficos que se incluyan en las escenas de la pelcula Flash; la aplicacin ofrece una paleta de accesibilidad en que se puede realizar esta operacin de manera simple y directa. En todo caso

18 19

Ms informacin en http://www.adobe.com/products/flash/ Ver ms en ingls en http://www.adobe.com/resources/accessibility/best_practices/bp_fp.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 53 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

1.2

1.3

1.4 1.5

los equivalentes deben ser completos y descriptivos, no slo el nombre del objeto grfico que se incluye. Habilitar la accesibilidad para objetos: de esta manera los equivalentes de texto sern utilizados como las descripciones de texto para botones y otros controles utilizados en la pelcula Flash. Ofrecer una descripcin para la pelcula: cuando se genera un botn con el nombre site info en la que se describe la escena, los lectores de pantalla reciben la informacin adecuada para ser leda por dichos software. Entregar controles de teclado: se deben habilitar atajos de teclado que permitan manejar la pelcula Flash de la misma manera en que se utiliza el mouse. Asegurar el contraste de colores: personas con problemas visuales tienen dificultades para ver determinados contrastes de colores, por lo que los elementos grficos deben ser tratados de manera que haya un contraste suficiente que permita su comprensin.

2. Uso de Ajax Ajax20 es una combinacin de tecnologas que se basa en el lenguaje Javascript para ofrecer una experiencia de intercambio dinmico de informacin en Sitios Web, enriqueciendo la experiencia de revisar datos y conseguir resultados de manera rpida y confiable. Ajax en s no es una tecnologa, sino que una implementacin de varias tecnologas ya existentes tales como XHTML y CSS para mostrar pginas web; Document Object Model (DOM) para mostrar e interactuar dinmicamente con la informacin presentada; el objeto XMLHTTPRequest que permite realizar peticiones HTTP y HTTPS a servidores WEB de manera asncrona y XML para intercambio de informacin entre el browser del usuario y el servidor que contiene la informacin. Debido a que se basa en un lenguaje de scripting como Javascript, el cual se puede usar con fines maliciosos como extraer informacin de parte del usuario, muchas veces se puede dar el caso que dicha capacidad no est habilitada en el browser utilizado. Si este es el caso, la aplicacin que utilice Ajax tambin quedar desactivada. En este sentido se sugiere que desde la programacin de la aplicacin se haga este tipo de deteccin con el objetivo de ofrecer una interfaz distinta en dicho caso y, gracias a eso, entregar otra forma de interactuar con la pantalla que permita utilizar la aplicacin que se

20

Ms informacin sobre Ajax en Wikipedia: http://es.wikipedia.org/wiki/AJAX

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 54 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

ofrece. Es importante sealar que al tiempo de la edicin de este documento, la organizacin W3C est desarrollando un nuevo estndar orientadas a las aplicaciones de interaccin enriquecida22 con el objetivo de definir la mejor manera de hacerlas accesibles y que funcionen en los diferentes entornos desde las cuales son utilizadas.

Desarrollo con estndares XHTML y CSS

De conformidad con lo mencionado previamente en esta Gua, se propone en primera instancia el desarrollo de los sitios web empleando los estndares definidos por el World Wide Web Consortium, ms conocido y citado como W3C. En lo que se refiere a estndar para el cdigo de despliegue, se recomienda que el sitio web cumpla con los estndares HTML 4.01 o XHTML 1.0 validados ante el W3C. Debido a que los avances de los estndares web son hacia el estndar XML que adems es el estndar elegido para el intercambio de documentos electrnicos, en esta Gua se ha privilegiado destacar el trabajo con XHTML 1.0 con el fin de destacar las caractersticas de su utilizacin sobre los estndares anteriores. Entre las diferencias ms relevantes de XHTML respecto de HTML y que deben ser tenidas en cuenta, aparecen las siguientes21: 1. El documento debe estar bien formado con todas las etiquetas cerradas en el mismo orden en que se abren, vale decir, en el caso de etiquetas que se abren dentro de otras, deben ser cerradas en el mismo orden. 2. No puede haber elementos vacos, por lo que las etiquetas que no tienen cierre deben completarse con un slash al final, como en <img />,<br /> y <hr />. 3. Las etiquetas deben escribirse en minsculas debido a que XML es sensible a maysculas y minsculas. 4. Los valores de los atributos deben encerrarse entre comillas "dobles". 5. La informacin de scripts como los de Javascript debe ser incluida dentro de marcadores especiales llamados [CDATA]. Por ejemplo:

21

Extrado de http://www.w3.org/TR/xhtml1/#diffs y http://es.wikipedia.org/wiki/XHTML

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 55 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

6. Los elementos ya no pueden usar el identificador name el cual debe ser cambiados por el identificador ID. Debido a estas diferencias, los desarrolladores que migren sus Sitios Web hacia el nuevo estndar debern hacer varias modificaciones ya que como se aprecia, el uso de XHTML obliga a ser estricto en el cumplimiento de la especificacin, en especial en el uso de minsculas y en el cierre de todos los elementos, tema que en las versiones anteriores de HTML no era tan crucial.

Separacin de contenidos y presentacin

En las pginas que forman parte del sitio web se debe separar los contenidos de la presentacin, aprovechando las caractersticas sealadas del estndar XHTML. Tal como se indic en el Captulo 2 de esta Gua, este es un cambio de importancia en lo referido al diseo web, ya que habitualmente se empleaban tablas para disponer los elementos en las pginas, facilitando de esa manera su ubicacin en la pantalla. Para conseguir esta separacin es necesario incorporar la tecnologa de las Hojas de Estilo en Cascada (CSS por su sigla en ingls) que permiten manejar la presentacin de manera externa al contenido. De esta manera, ser posible ofrecer pginas con diagramacin diferente de la plataforma desde la que se acceda o, incluso, contar con la posibilidad de ofrecer una mejor diagramacin para efectos de su impresin. De esta forma se puede ofrecer diferentes visiones del mismo contenido sin hacerle cambios a sus pginas. Lo nico que corresponde en dicho caso es modificar el archivo de presentacin de los contenidos, lo cual se hace a travs de los archivos de CSS. Entonces al revisar el cdigo de sus pginas se puede encontrar en la parte del <head> las siguientes lneas:

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 56 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Cabe sealar que al avanzar en el uso de CSS se puede ver que este estndar se encuentra preparado para ofrecer soporte a diferentes tipos de dispositivos22 entre los que se cuentan aparatos como agendas mviles, sistemas de proyeccin, aparatos para lenguaje Braille y otros23.

Uso de elementos para diagramar

Junto con el uso de CSS es importante indicar que la separacin de contenidos y presentacin debe ir acompaada por la utilizacin de varios elementos de la sintaxis XHTML que permiten hacer la diagramacin y presentacin final de los contenidos. Uno de los principales es el elemento <div> que permite sealar los bloques de informacin y su ubicacin dentro de la pantalla. <div> proviene de la palabra "divisin" y es utilizada para crear secciones o agrupar contenidos. Normalmente este elemento puede llevar la informacin sobre su presentacin en forma local, es decir en el propio archivo (como en el caso de este ejemplo, usando el atributo style), o bien puede tener asignado un ID (identificador) mediante el cual se le da un nombre que puede ser referenciado desde CSS para aplicarle un estilo al bloque. El problema en este caso, es que la presentacin queda ligada al contenido, lo que no es aconsejable.

22 23

Ver ms informacin en http://www.w3.org/TR/REC-CSS2/media.html Ver ms informacin en http://www.w3.org/TR/css-mobile/

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 57 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Adicionalmente el elemento <div> puede recibir como argumento una ubicacin espacial dentro de la pantalla, lo que permite generar una diagramacin del sitio web controlada slo por CSS. Para ver un ejemplo detallado sobre esta forma de trabajo, se recomienda revisar lo que se muestra en el Captulo 2 de esta versin de la Gua. Dentro del elemento <div> se pueden utilizar otros dos para asignar tipos de presentacin especial a los contenidos. El primero es el elemento <p> que permite generar prrafos de informacin textual, a la cual se le asignan valores mediante atributos de CSS. El segundo es el elemento <span> que es un contenedor que se utiliza para aplicar estilo en forma directa al texto.

En el ejemplo anterior se ve cmo el elemento <span> aparece dentro de un prrafo y permite generar un tipo de presentacin especfico para una parte del texto.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 58 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Captulo 4
Cmo se llega al Sitio Web

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 59 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Resumen
Este captulo introduce el concepto de la Encontrabilidad que es una traduccin libre del trmino ingls "findability", el cual se puede entender como la "habilidad para ser encontrado". Para efectos de esta versin de la Gua Web, entenderemos la "Encontrabilidad" como la facilidad para que los contenidos de un Sitio Web puedan ser indexados y luego encontrados por sistemas de bsqueda externos e internos.

B. Introduccin / Cmo se Llega al Sitio Web


En la Gua Web versin 1.0 se hizo una mnima referencia a la importancia de que el Sitio Web estuviera bien indexado en los sistemas de bsqueda en Internet, debido a que para la fecha de esa edicin, stos no tenan la relevancia que han adquirido con el tiempo. Esto se corrige en la presente edicin, debido a que actualmente un Sitio Web corre el riesgo de "no existir" si sus contenidos no han sido indexados por los sistemas de bsqueda y recuperacin de informacin y no tan slo a travs de la bsqueda del nombre de la institucin, sino tambin, a travs de los principales temas a los que sta se dedica. Debido a lo anterior, se debe hacer un trabajo permanente tanto en la seccin visible del sitio web (contenidos, imgenes y otros elementos similares) como en la invisible para los usuarios (keywords, meta tags, archivos destinados a robots de bsqueda), para asegurar que ellos siempre puedan llegar al sitio web a travs de los buscadores. Entonces, para efectos de esta versin de la Gua Web entenderemos la Encontrabilidad como la facilidad para que los contenidos de un sitio web puedan ser indexados y luego encontrados por sistemas de bsqueda externos e internos. Esta capacidad ser el elemento clave que nos permita asegurar que los contenidos que se ofrecen a travs del Sitio Web estarn adecuadamente indexados, facilitando de esa manera el acceso directo a la informacin desde los sistemas de bsqueda. Para cumplir con este objetivo tan importante, los administradores de los Sitios Web de Gobierno debern tener presente la importancia de llevar a cabo las tareas relacionadas con los siguientes aspectos: 1. Generacin de los Contenidos: se refiere a que los contenidos del Sitio Web deben ser escritos teniendo en mente la forma en que el usuario final denomina a los temas que incluye el sitio. Se debe considerar que si se habla en el lenguaje del usuario, ser ms

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 60 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

fcil que un sistema de bsqueda muestre entre sus resultados los contenidos ofrecidos por el sitio ya que contendrn las mismas palabras utilizadas por el usuario que busca. 2. Presentacin de los Contenidos: se refiere a que las pginas del sitio web deben ser preparadas para que tengan una estructura vlida, en la cual haya consistencia entre los elementos de titulacin y los contenidos propiamente tales, de manera que no haya alguna discordancia que las lleve a ser penalizada por los buscadores. 3. Apoyo a los Robots de Bsqueda: se refiere al adecuado manejo de las cabeceras de las pginas (es decir, los contenidos de la etiqueta <head>); el contenido del archivo robots.txt; la generacin del archivo estndar sitemaps.xml y la revisin del sitio mediante herramientas que simulan la accin de un spider de bsqueda. 4. Monitoreo de sistemas de bsqueda: se refiere que se debe prestar atencin permanente a los sistemas que reflejan la forma en que los usuarios acceden al sitio web, ya que de esta manera se podr entender qu palabras estn utilizando para ese efecto y optimizar el contenido para reflejar dichos trminos.

C. Qu es la Encontrabilidad?
Uno de los autores que ha apoyado con mayor fuerza el concepto de la Encontrabilidad es Peter Morville, a travs de un texto del ao 2006 titulado Ambient Findability24 cuyo epgrafe indica lo que encontramos nos transforma25. Basado en la premisa no puedes usar lo que no puedes encontrar el autor destaca la importancia que tiene en la forma actual de usar la Internet, la capacidad de ser indexado puesto que es la forma ms habitual que tendrn los usuarios de acceder al sitio web y emplear los contenidos que se ofrecen. Adicionalmente, define el concepto de tres formas: 1. La capacidad de ser ubicado o de ser navegable. 2. El grado en el que un objeto determinado es fcil de descubrir o ubicar.

24 25

Ms informacin del libro en la Editorial OReilly: http://www.oreilly.com/catalog/ambient/ Traduccin libre de la frase What We Find Changes Who We Become

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 61 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

3. El grado en el que un sistema o ambiente apoya la navegacin y recuperacin por sus contenidos. Por lo mismo, podemos entender que la calidad de "encontrable" de un sitio web depender de dos aspectos: su capacidad para ser encontrado a travs de los sistemas de bsqueda de Internet y, una vez que los usuarios decidan llegar al sitio web, de la calidad de la navegacin que encuentren internamente en el propio sitio. Esto representa desafos interesantes para el administrador del sitio web, ya que siempre deber estar mirando ambos aspectos para tener la seguridad de que la experiencia que se ofrece a travs de sus pginas, es coherente con las expectativas de quien llega a visitarlo.

D. Sitios Visibles e Invisibles


Uno de los desafos ms importantes de todo administrador de un sitio web consiste en permitir que sus contenidos sean indexados por los sistemas de bsqueda de Internet. Esta caracterstica debe tener en cuenta el hecho de que el sitio web debe estar preparado para ser indexado por sistemas automatizados, los cuales estn basados en programas (conocidos como robots de bsqueda o spiders) que navegan a travs de los enlaces ofrecidos por el sitio web y que le permiten descubrir las pginas de contenidos disponibles. Lo anterior significa que cada pgina debera ofrecer enlaces en lenguaje HTML4 hacia el resto del sitio web y, por lo mismo, que ninguna pgina del sitio debera estar aislada del resto. Para apoyar esta tarea, que ya se revis en detalle en el Captulo 3 en el subttulo referido a Sistema de Navegacin, es imprescindible que haya enlaces en cada una de las pginas que hagan referencia al resto del Sitio Web, en particular que lleven a la Portada y al Mapa del Sitio. Esta ltima pgina, a la que siempre se le da poca importancia, cobra a partir de esta circunstancia una relevancia mayor ya que es una coleccin de enlaces que debe ser visitada por el sistema de indexacin de los buscadores porque constituye el punto de entrada al sitio web. En este sentido es interesante tener en cuenta un trabajo realizado en Chile que puede cumplir con una funcin de referencia denominado "Caractersticas de la Web Chilena 2006"26 llevado a cabo por el Centro de Investigacin de la Web de la Universidad de Chile, a travs del cual se determin que el 21,4% de los sitios chilenos muestra una sola pgina.
26

Ver el estudio en http://www.ciw.cl/material/web_chilena_2006/index.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 62 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

En dicho estudio se indica que dentro de los motivos por los cuales se encuentra solamente una pgina en el sitio, destacan los siguientes: La pgina basa su navegacin en la tecnologa Javascript, por lo que es necesario interpretar dicho cdigo para navegarla; como los robots de bsqueda no lo hacen, aparece como que no existen ms y el contenido que exista no se incluye. La pgina necesita un plug-in de la tecnologa Flash para visualizar su contenido; esto ocurre habitualmente en sitios que tienen una introduccin animada que puede ser vista por humanos, pero que no ofrece puntos de entrada para el robot de bsqueda; por lo tanto, para ste el sitio slo tiene una pgina. Lo anterior tambin es vlido para aquellas pginas que emplean tecnologa basada en Applets Java para la navegacin, los cuales tambin impiden el acceso a los programas automticos.

En los tres casos sealados se da el fenmeno que los robots de bsqueda no logran entender la sintaxis ofrecida en el cdigo, ya que normalmente en los tres casos sealados de haber enlaces hacia el resto del sitio, estos se ofrecen desde el interior de programas que deben ser interpretados y no mediante enlaces basados en HTML. Debido a esto, en dichos casos los robots no logran encontrar la forma de tener acceso al interior del sitio web y slo guardan la informacin de la portada del sitio web. Cabe indicar que, tal como se explica ms adelante en este captulo, en los tres casos sealados existen formas de ofrecer acceso alternativo a los robots de bsqueda, facilitando el acceso de estos al sitio pese al uso de dichas tecnologas en la portada.

E. Posicionamiento del Sitio Web


Una tarea permanente del administrador del sitio web ser la de determinar la posicin relativa del sitio web en los sistemas de bsqueda, respecto de las palabras ms utilizadas por los usuarios. Para conocer cules son ellas, ser muy importante que se haga un monitoreo permanente y constante de las visitas, para ver cules son las que llegan desde los buscadores y las palabras que se usan para eso.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 63 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Normalmente se deber esperar que el sitio web est indexado, lo que se puede comprobar escribiendo la direccin web principal del sitio en el buscador. El resultado deber mostrar que el sitio efectivamente est indexado y aparece en la primera pgina de resultados. Luego, deber hacerse una bsqueda similar para las palabras que identifican al servicio u organismo al que pertenece al sitio web. Normalmente para las palabras ms importantes, el sitio web debera aparecer entre los primeros lugares ya que de esa manera se podr asegurar que los usuarios efectivamente vern el enlace y llegarn al sitio web por esa va. La figura 11muestra el resultado de la bsqueda consulta de marchamo a travs del sistema Google, entre los primeros resultados se muestran los sitios de cmo hacerlo.

Para ello, el sitio web debe estar preparado para ser indexado por sistemas automatizados que llegarn como una visita ms, y se deber hacer el trabajo adicional de incluir el sitio en aquellos sistemas de directorio que sean ms importantes en la web mundial. Para atender adecuadamente estos dos aspectos, es importante entender la diferencia entre ambos ya que su comportamiento y forma de acceso vara notablemente, como tambin lo hace la forma en que un sitio web puede llegar a quedar incluido en ellos.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 64 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Inclusin en ndices Automatizados Los ndices automatizados se forman gracias a la actividad realizada por los buscadores de Internet (search engines en ingls) que utilizan robots que navegan y almacenan informacin de pginas, que luego integran a una base de datos general, a partir de la cual los usuarios hacen las bsquedas. Al momento de la edicin de esta Gua, los ms conocidos son Google, Yahoo!, LiveWeb (ex MSN), Ask, Teoma y Quaero. Para asegurar que un robot de bsqueda llegue a un sitio web se requiere de cumplir con al menos las siguientes caractersticas: 1. Dar de alta el sitio web propio en algunos de los ms importantes buscadores de Internet. Al menos se debe realizar esta accin en Google, Yahoo! y LiveWeb. 2. Dar y recibir enlaces hacia otros sitios de Internet, porque sta es la nica manera que un robot de bsqueda pueda conocer la direccin de nuestro sitio web al detectar nuestra direccin a partir de otro sitio web; adicionalmente en el caso de Google, esto contribuir a su mejorar su ndice Page Rank. 3. Ofrecer en la pgina de portada del sitio web los meta-tag que dirijan a los robots hacia los archivos robots.txt y sitemaps.xml cuyas caractersticas se analizan ms adelante en este captulo. 4. Ofrecer en la pgina de portada del sitio web un meta-tag que indique el sitio da permiso para ser indexado, tal como se explica ms adelante en este captulo. 5. Ofrecer en la pgina de portada del sitio web un enlace hacia la pgina Mapa del Sitio, en la que se entreguen enlaces en lenguaje HTML estndar hacia todas las secciones del sitio web. Aunque hay ms elementos que intervienen en la Encontrabilidad del sitio web como se analiza ms adelante en este captulo, al menos con los consejos anteriores se podr asegurar que el sitio web est disponible para ser indexado por los robots de los sistemas de bsqueda automticos. Inclusin en Directorios Los directorios son ndices manuales de contenidos, en los que los propios interesados inscriben sus sitios, los cuales posteriormente son analizados y catalogados por los encargados del sistema, habitualmente humanos.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 65 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Gracias a esto, los sitios que se integran a un directorio aparecen ordenados por categoras y subcategoras, permitiendo a los usuarios encontrar listados ordenados de sitios, lo que facilita entender los sitios similares y competidores de los que se revisan. Un directorio puede tener un buscador interno, pero slo para ubicar lo que se busca dentro de todos los registros existentes. Entre los ms conocidos al momento de edicin de esta Gua se encuentran Yahoo! Directory y Open Directory Project (tambin conocido como DMOZ). La figura 12 muestra la pgina de inicio de DMOZ.org con sus contenidos separados por categoras.

Como se indic, la nica forma de integrar un directorio es por la suscripcin manual del sitio, por lo que ser tarea del administrador del sitio web tomar las medidas para que ello ocurra.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 66 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

F. Usuarios y Uso de Buscadores


En forma adicional a las tareas anteriores, el administrador del sitio web deber tener informacin actualizada acerca de la forma en que sus usuarios estn accediendo al sitio web desde los buscadores. Para ello ser relevante revisar los informes de visita, ya que stos cuentan con una seccin en la que se analizan los referers del sitio web, que son las pginas desde las cuales llegan los visitantes gracias al uso de enlaces. Gracias a esto se podr saber cules son los buscadores ms utilizados y cules son las palabras que han motivado a los usuarios a llegar al sitio web por esta va. Este conocimiento permitir, adems, contar con una forma concreta de saber cmo se muestran los contenidos del propio sitio web en los buscadores y, a partir de ello, determinar cules pueden ser las reformas que se pueden aplicar para optimizar dicha experiencia. Cabe sealar que ms adelante en este captulo se analizan algunos de los elementos principales que permiten mejorar la capacidad de los contenidos para ser encontrados, por lo que se puede seguir sus indicaciones como una gua de buenas prcticas para ayudar a la Encontrabilidad. Esto se debe a que no slo influye el hecho de inscribir el sitio en un buscador, sino que como se ver, hay una serie de elementos que contribuyen a hacer ms eficiente dicha inclusin de tal manera que cuando los usuarios busquen contenidos que estn integrados al sitio web, ste aparezca siempre en la primera pgina. Esto ltimo es relevante ya que abundantes estudios al respecto, indican que los usuarios siempre miran los resultados de dicha pgina6, sin seguir ms all.

G. Cmo se Mide la Encontrabilidad?


Respecto de esto ltimo, hay que tener en cuenta que los usuarios siempre estarn intentando llegar en la menor cantidad de pasos posibles hacia los contenidos que sean de inters para resolver sus necesidades de informacin. Debido a esto, su intencin siempre ser que para las palabras que ingresan en los buscadores, haya algo de nuestro sitio que les permita acceder a nuestros contenidos. La forma de asegurar esto tiene mucho que ver con los contenidos que se ofrezcan desde el sitio web, pero, principalmente, con el conocimiento de la forma en que los usuarios operan a travs de estos sistemas. Esto significa un llamado a los administradores de los Sitios Web a estar permanentemente actualizados respecto de las ltimas investigaciones y noticias

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 67 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

respecto de estos temas, ya que ellas darn pistas sobre las actividades a realizar para estar ms cerca de los usuarios. En todo caso, la Encontrabilidad de un sitio web siempre estar relacionada con su habilidad para aparecer en las primeras pginas de los resultados de bsqueda de un buscador para aquellas palabras, frases y trminos ms relevantes relacionados con la institucin, ya que ser la nica forma de asegurar que sea visto por quien utiliza dicho servicio. Por lo mismo, la Encontrabilidad ser medida con esa caracterstica: su habilidad para ubicarse lo ms cerca posible de la parte superior de la primera pgina de resultados. Relacin con los Motores de Bsqueda Para llegar a resultados de privilegio dentro de un sistema bsquedas, el administrador del sitio web deber estar preocupado permanentemente de que se cumplan las buenas prcticas que se definen en las siguientes pginas, pero adems deber estar revisando frecuentemente las estadsticas de su propio sitio para averiguar los siguientes elementos: 1. Determinar cul es el buscador ms utilizado en su sitio web, para aprender de sus usuarios cules son las palabras ms usadas. 2. Determinar las pginas que reciben ms visitas por esta va, de tal manera de prepararlas con ms elementos que lleven a los usuarios a conocer otros contenidos relacionados a partir de ellas. 3. Determinar cul es el patrn de navegacin a partir de esas pginas, para saber si ese ciclo se puede mejorar a travs de contenidos ms completos. 4. Determinar cada cunto tiempo estn visitando el sitio web los robots de bsqueda, para tener en cuenta ese dato para efecto de las actualizaciones del sitio web. Como se puede adivinar a partir de lo anterior, los administradores deben realizar un trabajo permanente en torno a las estadsticas e informes generados por las visitas al sitio web, ya que es la nica forma de ir aprendiendo de los usuarios, los cuales siempre tendrn actividades cambiantes relacionadas con la informacin que existe en el ambiente y que los motiva a visitar el sitio web del servicio propietario del sitio web. Es importante, en este sentido, que el administrador revise los contenidos de noticias generales del pas referidas a los temas abordados en el sitio web, para determinar las nuevas palabras que podran llevar a los usuarios a buscar con dichos trminos. Gracias a esto, podr modificar o mejorar sus contenidos para que los nuevos trminos tambin permitan que ms usuarios lleguen al sitio web tras una bsqueda.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 68 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Finalmente una recomendacin habitual es revisar los Sitios Web que salen antes en las pginas de resultados de los buscadores para los trminos en los que el sitio web tiene participacin, para indagar los eventuales motivos que los llevan a tener un mejor posicionamiento que el sitio propio. Relacin con los ndices A diferencia de los motores de bsqueda, la relacin con los ndices es menos dinmica, ya que slo est asociada a la accin de conseguir que el sitio web sea agregado a uno de ellos, sin que esto tenga modificaciones en el tiempo. No obstante, hay que tener la precaucin de revisar con cuidado la forma en que el sitio ha sido descrito en estos ndices, ya que esto es realizado por personas que normalmente trabajan como voluntarios del sistema indexador. Cmo se aumenta la Encontrabilidad? Tras analizar las pginas anteriores queda claro que la meta de un sitio web ser la de tener la mayor capacidad de ser encontrado desde los buscadores, ya que eso garantizar que los usuarios de Internet tengan acceso a la informacin que el sitio web puede ofrecer. Para ello, en esta seccin se aborda este desafo desde dos perspectivas: el cdigo HTML y el contenido de las pginas, ya que desde ambos se contribuye a aumentar la capacidad de acercarse a este objetivo. Lo primero que se analiza es el cdigo HTML puesto que en la medida que el sitio web se desarrolle mediante el uso de cdigo estndar habr mayores posibilidades de que su posicionamiento sea mayor. Estndares y Cdigos Relacionados Aunque la Encontrabilidad de un sitio web tiene una serie de elementos desde los cuales se puede explicar su buen resultado en los buscadores, la calidad de su cdigo es uno de los ms relevantes. Como se ha explicado antes, el cdigo del sitio web debe ser estndar y por lo mismo ofrecer un cumplimiento concreto en el uso de las etiquetas HTML a lo largo de sus pginas, siendo las de la zona del <head> las ms relevantes. Etiquetas de <head>

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 69 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Las pginas web bien estructuradas dividen su contenido en las zonas de <head> y <body>. La primera se ubica en la parte superior de las pginas y entrega informacin de referencia para el sistema computacional que utiliza y despliega la pgina, a fin de que pueda entender de qu manera se ha codificado el contenido y de esa manera mostrarlo adecuadamente a travs del browser o programa navegador que se utilice. Respecto de la Encontrabilidad, las etiquetas sobre las que hay que poner la mayor atencin son las siguientes: 1. <title>: permite indicar el ttulo que aparece en el encabezado de la ventana de cada pgina del sitio web; se recomienda que lleve el nombre del sitio web ms un ttulo que describa el contenido de la pgina. Por ejemplo: Secretara Tcnica de Gobierno Digital Costa Rica: Acerca de la Secretara. De esta manera, esta informacin ser la que aparezca en los buscadores cuando se muestre el enlace al usuario que busca alguna palabra o frase que tenga dicha pgina. 2. <meta>: una de las etiquetas meta de esta seccin est orientada a dar una instruccin concreta a los robots de bsqueda, cual es la de indexar el contenido27. Es importante considerar que los modificadores que se agregan al elemento content tienen efecto sobre el buscador, de la siguiente manera: 1. 2. 3. 4. index: indica que el contenido debe ser indexado. noindex: indica que el contenido no debe ser indexado. follow: indica que los enlaces existentes en la pgina deben ser seguidos. nofollow: indica que los enlaces existentes en la pgina no deben ser seguidos.

Uso de Robots.txt En forma paralela a lo que se indique en cada pgina, para el sitio se debe generar un archivo que cumple una funcin similar a la sealada para la etiqueta <meta> anterior, cual es la de indicar a los robots de los buscadores cul es la accin global que debe desarrollar en el sitio web.

27

Ms informacin en http://www.robotstxt.org/wc/meta-user.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 70 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Para ello, en la raz del servidor se debe incluir un archivo de texto que lleve el nombre robots.txt y en el que se indique la informacin acerca de la accin a desarrollar. El contenido estndar28 est dado por dos lneas, que son las siguientes:

Se debe considerar que la lnea User-agent puede incluir el nombre de cualquier robot y que si tiene un asterisco, indica que la directiva se aplica a todos; en tanto que la lnea Disallow permite indicar los directorios del sitio web que no se desee incluir en la indexacin. Si est en blanco, indica que permite indexar todo el contenido del sitio web. Es importante considerar que este archivo es revisado por todos los robots de bsqueda que acceden al sitio web por lo que es muy importante su presencia, ya que constituye una de las buenas prcticas en torno a los buscadores, debido a que forman parte de una suerte de bienvenida formal a todos los programas enviados por los sistemas de bsqueda de Internet. Cmo mostrar Contenidos De acuerdo a lo indicado en los prrafos precedentes, el sitio web deber cumplir con tener los siguientes elementos para asegurar que los buscadores de Internet los indexen: 1. <meta>: en esta seccin la lnea debe indicar lo siguiente:

2. robots.txt: en este archivo el contenido debe indicar lo siguiente:

Cmo Esconder Contenidos

28

Ms informacin en http://www.robotstxt.org/wc/exclusion.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 71 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Para evitar que el contenido del sitio web sea indexado, se debe tener el siguiente contenido en las pginas que no se desee incluir en los sistemas de bsqueda: 1. <meta>: en esta seccin la lnea debe indicar una de los siguientes contenidos:

2. Con el primero se consigue no indexar el contenido, pero que el robot siga los enlaces ofrecidos; con el segundo se consigue que no haya indexacin ni que se sigan los enlaces existentes. 3. robots.txt: en este archivo el contenido debe indicar lo siguiente, dependiendo del caso:

4. Con la primera lnea se indica que la instruccin es para todos los robots y con la segunda, se seala que desde la raz en adelante, no se debe indexar nada.

5. Con la primera lnea se indica que la instruccin es para todos los robots y con la segunda, se seala que el directorio llamado fotos no debe ser indexado.

Uso de Sitemaps.xml Como se revis en las pginas anteriores, una de las dificultades ms importantes referidas a la indexacin en buscadores dice relacin con la manera de indicar a estos sistemas cules son las direcciones de las pginas web que se desea incluir en ellos. Para enfrentar este tema, desde los sistemas de bsquedas se plante el uso de un protocolo denominado Sitemaps que consiste en un archivo XML en el que se enumeran todas las URL de un sitio junto, a las que se agregan metadatos adicionales acerca de cada una de ellas. Por

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 72 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

ejemplo, se indica la fecha de la ltima actualizacin, la frecuencia de modificacin de sus contenidos y la importancia relativa de la pgina en el sitio. 1. Un archivo estndar de este tipo tiene el siguiente contenido:

Los elementos que se definen por cada lnea son los siguientes29: 1.1 <url>: tambin es obligatorio y es la etiqueta que permite definir cada una de las pginas web diferentes que se desea incluir en el archivo. 1.2 <loc> tambin es obligatorio y permite indicar la direccin o URL de la pgina que se incluye. Debe comenzar con el protocolo correspondiente (http en el caso del web) y termina con un slash (barra diagonal). 1.3 <lastmod>: es un valor opcional que permite indicar la fecha de la ltima modificacin del archivo que se est incluyendo; para la fecha se usa el formato AAAA-MM-DD. 1.4 <changefreq>: es un valor opcional que hace referencia a la frecuencia con la que cambia la pgina a la que se hace referencia; sus valores son en idioma ingls y corresponden a siempre (always), cada hora (hourly), diariamente (daily), semanalmente (weekly), mensualmente (monthly), anualmente (yearly) y nunca (never). Es importante considerar que el valor "always" se utiliza para describir documentos que cambian cada vez que se accede a ellos, mientras que "never" se utiliza para describir URL archivadas.

29

Se puede ver ms informacin en http://www.sitemaps.org/es/protocol.php

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 73 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

1.5 <priority>: es un valor opcional que permite informar a los motores de bsqueda las pginas que se consideran ms importantes dentro del sitio web. Los valores aceptados abarcan desde 0,0 a 1,0. La prioridad predeterminada de una pgina es 0,5. De acuerdo a la informacin del protocolo, los motores de bsqueda pueden utilizar esta informacin para elegir entre varias URL del mismo sitio. Es importante considerar que el protocolo Sitemaps es un estndar que ya fue aceptado por Google, Yahoo! y LiveWeb, lo que garantiza que su uso permite atender a los principales buscadores actuales de la Internet. Una vez que el archivo ha sido creado y contiene todas las direcciones de pginas web que se desea indexar, hay que hacer referencia de l al sitio web mediante una de las siguientes actividades: 1. Mediante la interfaz de envo del motor de bsqueda: se debe consultar la documentacin ofrecida por los propios motores de bsqueda, los que indican la forma de hacerlo. 2. Mediante el archivo robots.txt: se debe aadir una lnea al final del archivo que consigne la ubicacin del archivo con el sitemap. Dicha lnea deben indicar: Sitemap: <ubicacin_sitemap> De acuerdo a lo que se indica en el sitio web en que se difunde este protocolo, la forma de ingresar la informacin correspondiente a la <ubicacin del sitemap> debe ser la URL completa del Sitemap. 3. Mediante una solicitud http desde el browser: para hacerlo se debe utilizar el propio browser y en la lnea de la direccin escribir lo siguiente: <searchengine_URL>/ping?sitemap=sitemap_url

Administracin de Contenidos Tal como se indic antes, la calidad del cdigo HTML de un sitio web es uno de los aspectos ms relevantes para conseguir que sus contenidos sean incorporados adecuadamente en los ndices y aparezcan entre los primeros lugares de las bsquedas realizadas por los usuarios. No obstante, tal como se indica en el prrafo anterior, quienes visitan los buscadores siempre

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 74 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

solicitarn contenidos y por tanto, ser la calidad de stos apoyada por la forma en que se ha creado el cdigo HTML de la pgina, lo que determine lo forma de aparecer en las pginas de resultados. A continuacin se revisan los tres grandes elementos que se deben vigilar en cada pgina, para apoyar una adecuada Encontrabilidad: 1. Estructura de Contenidos 2. Caractersticas de los Contenidos 3. Calidad de los Contenidos 1. Estructura de Contenidos Para que los contenidos de una pgina web reciban un trato adecuado en los motores de bsqueda debe existir una concordancia entre las diferentes partes del cdigo. En este sentido, es importante velar porque el texto que aparezca en la etiqueta <title> de la seccin <head> sea el mismo que aparece en la etiqueta <h1> de la seccin <body>. Tambin es adecuado que las palabras que aparezcan en la etiqueta <meta ... content=keywords> de la seccin <head> incluya palabras que tambin aparezcan en la etiqueta <h1> de la seccin <body>. Gracias a esta relacin, se estar dando una prueba de que la pgina se refiere a los contenidos que se exponen en estas etiquetas, generando una demostracin de credibilidad que es valorada dentro de los parmetros de los buscadores. Otro elemento de inters es que el contenido est estructurado utilizando etiquetas del tipo <h> para los subttulos, ya que gracias a ello se demostrar que se ha utilizado el estndar. Adicionalmente, es interesante utilizar la etiqueta <strong> o <em> para indicar contenidos destacados, dejando de lado la etiqueta <b> que slo denota negritas. Adems, si dichas etiquetas se asignan a palabras que estn en la lista de palabras claves (keywords) antes sealadas, se aumentar la correspondencia interna de la pgina lo cual, a su vez, ayudar en la calidad de su indexacin. 2. Caractersticas de los Contenidos Un tema central de la pgina tiene que ver con la titulacin de la pgina, vale decir, con la frase que aparece repetida tanto en la etiqueta <title> como en la etiqueta <h1>. Se debera

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 75 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

intentar que dicha frase incorporara la forma en que el contenido es llamado por los usuarios a travs de los buscadores. Por ejemplo, si el contenido se refiere a la Cdula de Identificacin, ser interesante utilizar la denominacin Carn o Carnet de Identidad en lugar de su nombre oficial. De esta manera, habr ms posibilidades que al ser indexada, la pgina tenga las palabras que sean ms cercanas a lo que las personas utilizarn para hacer la bsqueda respectiva. Otra de las prcticas habituales para apoyar la Encontrabilidad de los Sitios Web y fomentar su posicionamiento en las pginas de resultados, tiene que ver con el hecho de que se debe convencer a los robots de bsqueda de que la pgina se refiere a los temas que aparecen tanto en <title> como en <h1>. Para ello es vital que dentro del texto aparezcan varias veces los trminos utilizados en dichas secciones. La lgica detrs de esta situacin es que si una pgina se refiere a un tema determinado, es natural que en su contenido, las palabras utilizadas en los ttulos (de la pgina y del texto), aparezcan nombradas con cierta frecuencia. Gracias a esto, se busca reprimir una mala prctica realizada por algunos sitios que para subir en su posicionamiento, ponen ciertas palabras en la lista de palabras claves (keywords) pero luego no las usan en los contenidos. Esto puede ser apoyado por los enlaces que ofrezca la pgina, que deberan ir naturalmente hacia otros sitios donde tambin se encuentren las mismas palabras, con lo que se reforzar el contenido de la propia pgina. Adicionalmente dichos enlaces deberan usar el elemento title en su sintaxis, de tal manera de poner all alguna frase que refuerce la idea de que se acceder a contenidos relacionados con el tema de la propia pgina. Cuntas veces se deben repetir los contenidos? La respuesta tiene que ver con la redaccin: se debe repetir tantas veces como sea necesario para la comprensin del texto por parte de un humano que est leyendo y menos de las que se puedan interpretar como que se est haciendo dicha repeticin slo para el robot de bsqueda. Otro elemento de inters en este sentido, es que los buscadores valoran el hecho de que haya enlaces que apunten hacia el contenido que se ofrece. En este sentido, aparece como una herramienta importante, la capacidad que tenga el sitio web de ofrecer elementos que puedan ser enlazados desde diferentes sitios. En la medida que se haga dicha accin, aumentar la posibilidad de que los contenidos del sitio aparezcan en mejores lugares en las pginas de resultados de los buscadores.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 76 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

3. Calidad de los Contenidos Por ltimo y aunque esto se plante previamente, es importante reconocer que por muy importante que sean los buscadores, los contenidos que se ofrecen sern ledos por personas y por lo tanto debern ser creados para fomentar su comprensin por parte de ellas. En este sentido, hay que convenir que en la medida que los contenidos que se ofrezcan sean de calidad y provengan de una fuente importante como es el servicio pblico propietario del sitio web, ser bien recibido, credo y, eventualmente, enlazado desde otros Sitios Web creando de esta manera el crculo virtuoso que permite mejorar la presencia y posicin en las pginas de resultados de los buscadores.

H. Minera Web y Encontrabilidad


La Minera de la Web30 es una disciplina que permite generar informacin acerca del comportamiento de los usuarios en un sitio web, mediante el anlisis de los datos que ellos mismos van dejando a medida que visitan los Sitios Web. Utilizando tcnicas provenientes de las ciencias sociales, entre las que se cuenta la clasificacin, asociacin y agrupacin mediante patrones, es posible caracterizar a posvisitantes con el objetivo de ofrecerles productos o servicios que vayan de acuerdo a las necesidades que se asignen a los tipos de usuario que se hayan definido. Para mejorar su efectividad, se define que la minera del web se puede hacer en tres reas que se refieren al contenido del sitio y la estructura de navegacin, ms el comportamiento de los usuarios respecto de los dos primeros31. El objetivo de utilizarla en el contexto de esta versin de la Gua Web, es ofrecer una alternativa que permita la generacin de mayor informacin acerca de las actividades que llevan a cabo los usuarios que visitan el Sitio Web. Respecto de esto es importante tener en cuenta que las acciones que realizan los usuarios son registradas annimamente en archivos de texto tambin conocidos como logs (o bitcoras, en espaol), en los cuales se va registrando cada uno de los archivos que son mostrados por un servidor tras la peticin de un cliente que visita un sitio web. Por lo mismo, cada visita genera decenas o centenares de lneas de informacin que al ser procesadas con software

30 31

Ver ms informacin en http://www.infovis.net/printMag.php?num=172&lang=1 Ms informacin en http://www.webtaller.com/maletin/articulos/web-mining-diseno-sitios-web.ph

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 77 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

especializado de anlisis32, permiten tener informacin agregada acerca de visitas, zonas del sitio que son ms visitadas y otros elementos bsicos de informacin similares. Asimismo es posible tener informacin acerca de las palabras ingresadas en los buscadores externos e internos del sitio web, lo que ayuda a entender cules son los trminos ms buscados y para los cuales el sitio web constituye una fuente de informacin. En este sentido, la posibilidad de analizar por ejemplo, los logs de la navegacin del sitio web o bien los logs de las palabras ingresadas en un buscador, permitirn al administrador del sitio web, tener informacin de primer orden para tomar decisiones acerca de contenidos, de la forma que tiene el sitio web e incluso, para tomar decisiones de reorganizacin de las secciones existentes en el mismo. Quin Busca y Qu Busca Respecto de los usuarios del sitio web se debe intentar conseguir informacin acerca de qu estn buscando en el sitio web y cules son los objetivos que persiguen al visitarlo. Aunque la informacin que se obtiene mediante minera de web ser annima, ya que est basada en elementos de este tipo, ser posible activar otros tipos de recursos para conocer al usuario y de esta manera saber ms acerca de sus necesidades y las razones que lo llevan a visitar al sitio web. Por lo mismo, se apoya como una buena prctica que el administrador del sitio web pueda dedicar algn tiempo de su jornada semanal a las siguientes actividades: 1. Responder correos electrnicos de los usuarios que tengan relacin con la operacin del sitio web, ya que en el intercambio con ellos ser posible entender su percepcin del sitio web y las necesidades de informacin que lo llevan a visitarlo. Desde all, ser ms fcil conocer si hay satisfaccin de las necesidades y qu pasos se deben dar para conseguirla. 2. Responder llamados telefnicos de usuarios que no consigan terminar sus operaciones y para quienes los sistemas de ayuda tradicionales ofrecidos por el servicio u organizacin duea del sitio web tampoco aporten informacin adecuada. El contacto directo con los usuarios ser una herramienta valiosa para perfeccionar los contenidos y funcionalidades del sitio web. 3. Desarrollar tests de usuario tendientes a entender de qu manera se relacionan los usuarios con los contenidos y a partir de esto, establecer las mejoras necesarias en los

32

Ver software de este tipo en http://www.download.com/Site-Management/3150-2181_4-0.html?tag=catat

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 78 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

mbitos que se requieran (este tema ser tratado con ms profundidad en el Captulo 5 de esta Gua). Los Seis Tipos de Contenidos segn R. Baeza Cuando se est trabajando con usuarios, ser importante avanzar en el conocimiento de los seis tipos de contenidos que el usuario viene a buscar en el sitio web, los cuales quedan normalmente reflejados a travs de las palabras que usa en el buscador interno del sitio para encontrar aquellos trminos que el sistema de navegacin no le puede aportar o no le muestra dnde pueden estar ubicado dentro de la organizacin actual de contenidos. Basado en un diagrama de rbol33 que se aprecia en la figura anterior, el acadmico Ricardo Baeza-Yates plantea que los seis tipos de contenidos que los usuarios buscan a travs del buscador interno del sitio son:

La figura 13 muestra el rbol de la organizacin de contenidos, dnde se aparecen los seis tipos definidos por el acadmico. A) Contenidos principales y que estn en el sitio web, pero que no son destacados adecuadamente por el sistema de navegacin o de contenidos.
33

Este diagrama fue publicado por el autor en el artculo "Excavando la Web" que apareci en "El Profesional de la Informacin" (http://www.dcc.uchile.cl/~rbaeza/inf/EPIexcavando.pdf)

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 79 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

B) Contenidos que constituyen un tema secundario del sitio web y que no son destacados como elemento de importancia. C) Contenidos que no son destacados en el sitio web y que los usuarios asumen que son parte de los contenidos, por lo que los buscan en el sitio web. D) Contenidos que existen en el sitio web pero que estn registrados con otro nombre. E) Contenidos que no existen en el sitio web pero que deberan estar, ya que forman parte de los contenidos que deberan utilizarse. F) Contenidos que no existen en el sitio web y para cuya inexistencia se cuenta con definiciones editoriales o polticas de la organizacin o servicio. El acadmico recalca que los ltimos tres son muy importantes porque revelan que los usuarios pueden dar pistas de mucho inters para la creacin de contenidos, para los cuales el sitio web es considerado una fuente principal o relevante.

Influencia de la Minera en los Contenidos Basado en la informacin anterior, es evidente que el desarrollo de una poltica de minera de web sobre los contenidos permite tener un aporte contundente para la generacin de contenidos, ya que se trata de un mecanismo de feedback efectivo para entender las necesidades de informacin de los usuarios. Por lo anterior, deber constituir una buena prctica la revisin permanente de los informes de actividad del sitio web ms la informacin que aporten los informes de minera web, ya que basados en ellos se podrn tomar decisiones editoriales que permitan responder a las necesidades que los usuarios manifiesten a travs de su navegacin por el sitio web.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 80 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Captulo 5
De la Usabilidad a la Utilidad

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 81 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Resumen
En este captulo se presenta el concepto de la Usabilidad, entendido como facilidad de uso, como uno de los elementos centrales que deben poseer los Sitios Web de Gobierno, ya que en la medida que se asegure que lo que se publica pueda ser visto y usado sin problemas de acceso por los ciudadanos, se estar cumpliendo con la misin ms importante de estos espacios digitales. Adicionalmente se ofrecen aspectos relativos a Experiencia de Usuario y Aseguramiento de Usabilidad, a travs de la presentacin de metodologas probadas y usadas internacionalmente.

B. Introduccin / De la Usabilidad a la Utilidad


Uno de los objetivos ms importantes que persigue todo sitio web es transformarse en un autoservicio de informacin e interaccin, que requiera de la menor explicacin posible para que los usuarios que lo visitan, puedan encontrar y obtener la informacin que buscan y tambin, sean capaces de completar las tareas que se les proponen desde el espacio digital. En la primera versin de la Gua Web se comenz a emplear el trmino Usabilidad para explicar lo anterior, aunque no se hizo un desarrollo muy amplio de sus caractersticas, sino que ms que nada se hizo desde un punto de vista operativo. A diferencia de ese enfoque, en esta versin se decidi incluirlo como un Captulo completo para darle la relevancia que tiene, ya que de la usabilidad depender la influencia que tenga un sitio web sobre la comunidad a la que necesita atender. Tal como se indic, la Usabilidad fue incluida entre los contenidos de la Gua Web, en particular en el Captulo III, donde se planteaba la importancia de realizar Pruebas de Usabilidad, explicndose que stas se realizaban con usuarios, con el objetivo de determinar si la organizacin de los contenidos y las funcionalidades que se ofrecen desde el Sitio Web son entendidas y utilizadas por los usuarios de manera simple y directa. All se explicaba adems que las pruebas tradicionales de Usabilidad son: Prueba Inicial: para ver cmo funciona la organizacin de contenidos y elementos iniciales de diseo (botones, interfaces).

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 82 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Prueba de Boceto Web: para ver si se entiende la navegacin, si se pueden cumplir tareas y si el usuario entiende todos los elementos que se le ofrecen. En dichas pruebas el objetivo era determinar durante el desarrollo del sitio web y en forma previa al desarrollo mismo, si las interfaces y los elementos de las pantallas del sitio web eran comprendidos por los usuarios, con el fin de que se pudieran hacer las correcciones que fueran necesarias en forma previa. Adicionalmente se entregaba un Checklist de Usabilidad34, mediante el cual se ofrecan treinta criterios para asegurar esta caracterstica de los Sitios Web, abordando desde temas de Identidad Corporativa hasta Retroalimentacin (Feedback) para que el administrador de un sitio web pudiera evaluar la calidad de experiencia de uso que estaba ofreciendo a los visitantes.

C. Qu es la Usabilidad?
La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interacta con un producto o sistema. Esto se mide a travs del estudio de la relacin que se produce entre las herramientas (entendidas en un sitio web el conjunto integrado por el sistema de navegacin, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a travs de ellas. Otra definicin es la que entrega el acadmico Yusef Hassan35 (Universidad de Granada) al indicar que la usabilidad es la disciplina que estudia la forma de disear Sitios Web para que los usuarios puedan interactuar con ellos de la forma ms fcil, cmoda e intuitiva posible y agregar que la mejor forma de crear un sitio web usable es realizando un diseo centrado en el usuario, diseando para y por el usuario, en contraposicin a lo que podra ser un diseo centrado en la tecnologa o uno centrado en la creatividad u originalidad. Adems, el profesor Ricardo Baeza-Yates36 en un artculo del ao 2002 recalca que bsicamente los sitios no son usables ya que presentan problemas de usabilidad y de paso define a la disciplina como un concepto que engloba a una serie de mtricas y mtodos que

Ver documento en sitio www.gobiernofacil.go.cr Ms informacin en http://www.nosolousabilidad.com/articulos/introduccion_usabilidad.htm 36 Ms informacin en http://www.dcc.uchile.cl/~rbaeza/inf/usabilidad.html


34 35

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 83 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

buscan hacer que un sistema sea fcil de usar y de aprender. Al hablar de sistema la referencia se hace a cualquier dispositivo que tenga que ser operado por un usuario. En esta categora caen los Sitios Web, aplicaciones de software, hardware, etc.. Cabe indicar, finalmente, que la norma internacional IISO 9241-11: Guidance on Usability (1998)37 hace referencia a la Usabilidad y ofrece una definicin de su contenido y alcance: La Usabilidad se refiere el grado en que un producto puede ser usado por usuarios especficos para conseguir metas especficas con efectividad, eficiencia y satisfaccin dado un contexto especfico de uso. Es importante indicar que la Usabilidad es una disciplina que nace en Estados Unidos y florece gracias al desarrollo computacional, consolidndose como una prctica habitual con la aparicin de los Sitios Web en la dcada de los 90s. Adicionalmente se debe anotar que la palabra Usabilidad deriva del ingls Usability, cuya traduccin ms acertada es facilidad y simplicidad de uso de un artculo u objeto. Se ha considerado adecuado utilizar la palabra usabilidad con dicha traduccin debido a que en idioma espaol no existen palabras que describan con tanta precisin este concepto. En este sentido, lo ms cercano sera Utilidad, palabra que de acuerdo al Diccionario de la Real Academia Espaola, significa que trae o produce provecho, comodidad, fruto o inters. Sin embargo, debido a que dicho trmino no engloba la idea de facilidad o simplicidad en el uso de un objeto o espacio por parte de quien lo emplea, se ha preferido utilizar la derivacin de la palabra originalmente en idioma ingls.

D. Caractersticas Principales de la Usabilidad


Dadas las definiciones anteriores es claro que abordar la Usabilidad implica tambin revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen. Por lo mismo, se ha hecho necesario hacer una serie de comprobaciones de estos aspectos, mediante la revisin completa de la forma en que el espacio digital apoya a los usuarios en

37

Ms informacin en: http://www.usabilitynet.org/tools/r_international.htm

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 84 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

cumplir sus tareas en la mejor forma posible. Dicha revisin debe ser hecha a travs de diferentes factores38, entre los que se cuentan los siguientes: Facilidad de aprendizaje: define en cunto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones bsicas. Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema. Facilidad de recordar cmo funciona: se refiere a la capacidad de recordar las caractersticas y forma de uso de un sistema para volver a utilizarlo a futuro. Frecuencia y gravedad de errores: plantea el apoyo que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema. Satisfaccin subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.

E. reas Tericas Relacionadas


En torno a la Usabilidad se ha creado una comunidad que ha ido expandiendo sus capacidades y herramientas, abarcando reas como la Experiencia de usuario y la medicin de la calidad de la misma, porque se entiende que mientras mayor sea la usabilidad de un sitio, mayor ser el impacto del sitio web en quienes lo visitan y utilizan. Adicionalmente, es til entender el contexto en el que se desenvuelve esta forma de trabajo utilizando para ello la perspectiva que ofrece Peter Morville, autor ya reseado en el Captulo 4 de esta versin de la Gua Web, cuando l sita la Usabilidad en funcin de otras variables que permiten medir la calidad de un sitio web desde diferentes perspectivas. En ese sentido, seala que un sitio web puede ser mejorado desde diferentes acercamientos, quedando la Usabilidad como uno ms de ellos, permitiendo la aparicin de otros con similar importancia que deben ser tenidos en cuenta al momento de hacer el rediseo de un sitio web. A estos acercamientos simultneos al de la Usabilidad el autor los denomina las Facetas de la Experiencia del Usuario3940, y corresponden a los siguientes:

Ms informacin en http://usability.gov/basics/index.html#definition Ms informacin en http://semanticstudios.com/publications/semantics/000029.php 40 Ms informacin en espaol en: http://iainstitute.org/es/translations/000370.html


38 39

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 85 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

til: es necesario preguntarnos si nuestros productos y sistemas son tiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad. Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las dems facetas. Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios ms complejos (imgenes, sonidos, animaciones), esto se debe equilibrar con los dems valores del diseo emocional. Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan. Accesible: los Sitios Web deben ser asequibles a las personas con discapacidades (ms de 10% de la poblacin). Para los Sitios Web de Gobierno ya es un requisito normativo. Creble: la credibilidad es uno de los factores ms importantes de tener en cuenta y por ello se deben revisar los elementos de diseo afectan la confianza que nos tienen los usuarios. Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.

La figura 14 muestra el Panal de Morville con las diferentes facetas de la experiencia del usuario.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 86 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

F. Principales Autores
Adems de Morville, los autores que han trabajado ms directamente en el tema de la Usabilidad han sido Jakob Nielsen y Steve Krug. Ambos han presentado libros en los cuales debaten esta forma de trabajo y han definido sus caractersticas y formas de abordarlas en el desarrollo de Sitios Web. Jakob Nielsen es un doctor en ingeniera que centr su carrera en el desarrollo de interfaces de software, desde lo cual evolucion hacia el tema de la usabilidad41. Es el autor y consultor ms relacionado con el tema, al punto que le llam el gur mundial de la usabilidad, apareciendo como tal en medios de prensa en todo el planeta. Su libro Designing Web Usability (Diseando Usabilidad Web 1999) fij las pautas de la disciplina y entreg las herramientas necesarias para los desarrolladores de Sitios Web, quienes a partir de entonces comenzaron a incorporar las prcticas de la Usabilidad en su trabajo habitual. Entre otros aspectos, sus consejos principales para mejorar la usabilidad de un sitio web son: Aclarar el propsito del sitio: se refiere a que desde la primera mirada, el usuario tenga claro quin hace el sitio y cules el alcance del mismo. Ayudar a los usuarios a encontrar lo que buscan: ofrecer una buena organizacin de informacin con nfasis en los mensajes principales y sistemas de bsqueda adecuados. Mostrar el contenido del sitio: consiste en mostrar los contenidos de manera clara para evitar clicks innecesarios, mostrando temas anteriores que hayan sido destacados. Diseo para mejorar Interaccin, no para definirla: tener como meta que el diseo coopere con la informacin, ms que competir con ella. Un segundo autor de importancia es Steve Krug consultor en Usabilidad cuyo libro Dont make me think (No me hagas pensar - 2000) marc un hito al poner en el centro de la discusin el hecho de que los Sitios Web deben ser creados para que el usuario llegue a sus pginas y acte en forma inmediata, sin que tenga que detenerse a entender cmo est hecho u organizado. Adems, plante la necesidad de probar con los propios usuarios la interaccin que se ofrece en los espacios digitales, con el fin de asegurar que la oferta que se realiza, es
41

Ver ms informacin en: http://www.useit.com/alertbox/20020512.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 87 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

comprendida por quienes las estarn utilizando. Entre otros, sus principales consejos para ayudar a la usabilidad de un sitio web son: Disear un sitio es siempre un acto de balance: priorizar el uso del espacio ayuda a la audiencia y a quien publica, a alcanzar sus metas. Balancear el diseo y el formato, para que las cosas tengan un nfasis adecuado en cuanto a uso y espacio. Siempre se deben optimizar muchas variables al mismo tiempo, mostrando suficiente de una sin ocupar mucho con otra. No hay reglas universales porque la solucin que funciona en un caso, no funciona en otro contexto. Adicionalmente se debe disear pensando que los usuarios no leen los textos sino que van saltando por el contenido; que los contenidos sern accedidos de mejor forma si se crean jerarquas visuales; que la navegacin debe utilizar signos visibles y mtodos convencionales para que sea entendida en todos los contextos, entre otros aspectos.

G. Principales Recursos
Adems de los libros reseados, hay en Internet una serie de recursos que pueden ser accedidos en idioma espaol, para conocer ms acerca de las caractersticas de la Usabilidad como disciplina. Entre ellos, citamos los siguientes como las ms interesantes: Usabilidad en el Gobierno de Chile. http://www.clienteperdido.cl/media/slides/saavedra.pdf Mejora de Sitios Web a partir de la experiencia de los usuarios http://www.clienteperdido.cl/media/slides/marcos.pdf Research-Based Web Design & Usability Guidelines (ingls) http://www.usability.gov/pdfs/guidelines.html Quality Framework for UK government website design (ingls) http://www.cabinetoffice.gov.uk/e-government/resources/qualityframework.asp Usabilidad definida en Wikipedia http://es.wikipedia.org/wiki/Usabilidad Herramientas para la usabilidad en la Fundacin Sidar (Espaa)

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 88 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

H. Aseguramiento de Usabilidad
Una vez entendido el alcance y caractersticas de la Usabilidad, es posible avanzar en la comprensin de los elementos que se deben tener en cuenta para asegurar su existencia y avanzar en mejoras que la amplen. No obstante, para asegurar que dichos elementos estn presentes en un sitio web, los expertos de esta rea de estudios han desarrollado una serie de metodologas tendientes a medir de manera concreta la existencia de los elementos que ayudan a la Usabilidad. Esta puede ser medida a travs de expertos, de usuarios y de mquinas. La aplicacin de estas mediciones da lugar a la generacin de criterios objetivos y puntos de chequeo, que permiten hacer comparaciones metdicas y peridicas, las que incluso en el caso de los Sitios Web de organismos relacionados con el Gobierno, han permitido llevar adelante las evaluaciones conocidas como los Premios a la Excelencia en Gobierno Digital, que di inicio el ao anterior, 2008. Por lo anterior, es de suma importancia conocer los mtodos de medicin para ponerlos en prctica y aprovechar las caractersticas de esta disciplina para aumentar la efectividad y eficiencia de los Sitios Web.

I. Medicin de la Usabilidad
Se entiende por medicin de la Usabilidad la tarea de aplicar uno ms mtodos que permiten obtener datos objetivos acerca de la calidad de la experiencia que tiene un usuario en un sitio web. Por lo mismo, se trata de la aplicacin de mtricas sobre diferentes aspectos que van desde la interfaz grfica hasta el uso y comprensin de las funcionalidades, que permitan comparar la experiencia que tiene un usuario en diferentes Sitios Web, mediante mtodos que puedan ser utilizados con cualquier tipo de ellos. El inters central de la utilizacin de estas mtricas es que se pueden lograr criterios objetivos respecto de los aspectos medidos, con lo cual se obtiene mayor informacin que la que slo otorga la percepcin subjetiva de una persona, por muy experta o conocedora de las tecnologas de informacin que ella sea.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 89 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Dentro de los autores que ms han avanzado en la creacin de criterios de medicin, se encuentra Jakob Nielsen, quien tempranamente tras la aparicin del web, desarroll los estudios necesarios para llegar a describir la existencia de un conjunto de principios de medicin42 , cuyo cumplimiento permitira asegurar la calidad de usable de un sitio web. A dichos criterios les llam principios heursticos43 debido a que permitan hacer una evaluacin considerando la perspectiva de los expertos. Dichos principios son diez y su revisin permite desarrollar un proceso repetitivo de desarrollo y pruebas, que asegure que el producto resultante permita generar un sitio usable. La importancia de ponerlos en prctica radica en que ofrecen una forma simple de revisar las caractersticas de los Sitios Web de una manera ms econmica que sistemas similares basados en pruebas de laboratorios y tecnologas de seguimiento de las actividades de los usuarios.

J. Metodologa de Jakob Nielsen


Para llegar a los principios de usabilidad antes sealados, Nielsen estudi 249 problemas de usabilidad y a partir de ellos dise lo que llam las reglas generales para identificar los problemas de usabilidad. Gracias a esta sistematizacin le fue posible pasar desde el terreno emprico al terico. Los principios definidos por Nielsen son los siguientes: 1. Visibilidad del estado del sistema: el sistema siempre debera mantener informados a los usuarios de lo que est ocurriendo, a travs de retroalimentacin apropiada dentro de un tiempo razonable. 2. Relacin entre el sistema y el mundo real: el sistema debera hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, ms que con trminos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la informacin aparezca en un orden natural y lgico. 3. Control y libertad del usuario: hay ocasiones en que los usuarios elegirn las funciones del sistema por error y necesitarn una salida de emergencia claramente marcada

Ver en http://www.useit.com/papers/heuristic/heuristic_list.html Heurstico: en algunas ciencias, manera de buscar la solucin de un problema mediante mtodos no rigurosos, como por tanteo, reglas empricas, etc. (definicin de la RAE)
42 43

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 90 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer. 4. Consistencia y estndares: los usuarios no deberan cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas. 5. Prevencin de errores: mucho mejor que un buen diseo de mensajes de error es realizar un diseo cuidadoso que prevenga la ocurrencia de problemas. 6. Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendra que recordar la informacin que se le da en una p el uso del sistema deben estar a la vista o ser fcilmente recuperables cuando sea necesario. 7. Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interaccin ms rpida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes. 8. Esttica y diseo minimalista: los dilogos no deben contener informacin que es irrelevante o poco usada. Cada unidad extra de informacin en un dilogo, compite con las unidades de informacin relevante y disminuye su visibilidad relativa. 9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solucin constructiva al problema. 10. Ayuda y documentacin: incluso en los casos en que el sistema pueda ser usado sin documentacin, podra ser necesario ofrecer ayuda y documentacin. Dicha informacin debera ser fcil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Test Heurstico A partir de los principios sealados en el paso anterior, Nielsen plante que un grupo de expertos poda hacer la revisin de un sitio web ya fuera operativo o en etapa de

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 91 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

construccin- y contrastar su funcionamiento contra el grupo de principios enunciados. A dicha prueba se le conoce generalmente como test heurstico. El grado de cumplimiento y los problemas de usabilidad detectados durante este test heurstico44, permitira a los desarrolladores tomar las precauciones y sugerir los cambios que fueran los ms adecuados para aumentar la usabilidad del sistema. En este sentido, Nielsen explic que los expertos podran incluso aumentar el nmero de reas a revisar dependiendo de las caractersticas del proyecto a evaluar. El resultado de un test de este tipo es un informe emitido por el evaluador en el que describe el problema analizado, las reglas especficas que son afectadas por su comportamiento y cmo podra mejorar el cumplimiento de ellas con un cambio en la interfaz. Aade que si bien esto ltimo no es posible, s ser importante que los problemas conocidos sean reportados con el fin de intentar hacer las modificaciones posibles para aportar a su solucin. Un elemento de inters en este caso, es que como se trata de evaluar interfaces basado en los principios descritos, no es necesario que stas estn construidas para evaluarlas; en perodos previos al desarrollo pero cuando ya se cuente con las caractersticas grficas operacionales que tendr la interfaz, esta metodologa tambin puede ser utilizada. Respecto del nmero de expertos que debe llevar a cabo el test heurstico para que ste tenga validez y un nmero adecuado de hallazgos, el autor sugiere que cinco es el nmero ms adecuado ya que muchos de sus hallazgos sern equivalentes pero tambin habr un nmero importante de ellos que sern nicos. Agrega que el nmero exacto de evaluadores que se debera usar depende del costo-beneficio. Ms evaluadores deberan ser usados en casos en que la usabilidad es crtica o cuando se pueden esperar grandes ahorros debido a la gran capacidad de un sistema de ser crtico para la misin de una empresa.

Test de Usuario El test de usuario es un sistema de comprobacin de la usabilidad que consiste en que un experto observa la forma en que un usuario emplea un sistema y a partir de eso, logra establecer los principales problemas que tiene su interfaz. En este sentido, la usabilidad se relaciona directamente con el nivel de desempeo que tiene el usuario observado.

44

Ver ms informacin en http://www.useit.com/papers/heuristic/heuristic_evaluation.html

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 92 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Las principales ventajas de este mtodo radican en el hecho de que se ve al usuario actuando sobre una pantalla real, manipulando sus opciones de la manera que lo hara en una situacin real de uso. Adems, los problemas que se detectan normalmente identifican las principales dificultades que tienen los usuarios ante el sistema que se les ofrece. Gracias a este trabajo, es posible identificar de manera rpida y simple los problemas, dejando lecciones para que los encargados del desarrollo de las aplicaciones, puedan hacer correcciones que lleven a un mejor uso del sistema. Adicionalmente permite aislar las percepciones de los usuarios sobre un sistema, respecto del uso real que le dan al mismo, generando observaciones ms objetivas acerca de la calidad del sistema probado. No obstante, para que un sistema pueda ser probado adecuadamente mediante este sistema se debe seguir un protocolo estricto que permita ver al usuario en accin, sin que ste se reste de hacer la prueba como si estuviera usando de verdad el sistema. Para ello es imprescindible tener en cuenta lo siguiente: o Se debe convencer al usuario de que lo que est a prueba no son sus habilidades, sino el sistema; si ste no funciona ser culpa del sistema y no del usuario. Por lo mismo, es esperable que diga en voz alta todo lo que le pasa por la mente cuando est haciendo la prueba, para que el equipo de desarrollo pueda entender cules son sus expectativas y por qu ellas no se cumplen. o Cada accin que se solicite realizar al usuario debe tener un objetivo claro a ser medido, con el fin de entender cules son las dificultades que enfrenta y cmo podran atenderse al ver su forma de usar la interfaz. o En ningn momento del test se deber ayudar o retroalimentar al usuario explicndole cmo hacer una accin, debido a que se espera ver la usabilidad del sistema por s mismo, es decir en las mismas condiciones en que funcionar cuando est a disposicin de todos los usuarios va web. o A excepcin de sistemas que estn dirigidos a una audiencia especfica, cualquier persona que sepa usar un computador podra ser elegido para hacer el test de usuario. Es importante que quienes sean elegidos sean representativos de los usuarios que utilizarn finalmente el sistema.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 93 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Respecto del nmero de usuarios que se debe empelar en un test de este tipo, Nielsen seala que cinco personas45 es el nmero ms adecuado. En el sitio web se entrega una Pauta de Test de Usuario que puede emplearse como modelo para este tipo de tests.

K. Metodologa de Alan Cooper


Uno de los problemas ms habituales que tienen los desarrolladores de Sitios Web, es la dificultad para entender las necesidades que tienen los usuarios que llegan a visitar estos espacios digitales. Habitualmente lo que hacen es conseguir que un determinado software funcione adecuadamente, aunque no necesariamente ligado a la actividad de un usuario en particular lo que lleva a que no siempre logre ser entendido y utilizado completamente por estos. Para atender esta problemtica, el consultor Alan Cooper desarroll una metodologa de diseo orientado a metas a travs del cual se trabaja directamente con la interaccin que tendrn los usuarios con los sistemas que se estn desarrollando. Dicha metodologa implica el desarrollo de una serie de piezas grficas en las que se ilustra la manera en que los usuarios trabajan con el sistema y mediante esta frmula, se busca responder de la mejor manera a las necesidades que tienen los usuarios de los sistemas que se les ofrecen.

L. Creacin de Personas y Escenarios


Como parte integral de dicha metodologa se cre el concepto de persona46 que corresponde a personajes determinados aunque ficticios, que permiten entender de manera clara quines sern los usuarios del mismo y ms tarde el de escenarios47, que corresponden a las situaciones en que dichos personajes emplearn el sistema. La forma de utilizar dichos conceptos se explica de la siguiente manera: Creamos modelos de datos y flujos de trabajo para definir los procesos de negocio. Modelamos arquetipos de
Ver ms informacin en http://www.useit.com/alertbox/20000319.html La palabra persona se usa en idioma ingls. Puede revisarse ms informacin acerca de este tema en http://www.cooper.com/insights/journal_of_design/articles/the_origin_of_personas_1.html 47 Ms informacin en http://www.cooper.com/insights/journal_of_design/articles/six_sigma_and_goaldirected_des.html
45 46

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 94 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

usuarios que son las personas para entender sus metas y modelos mentales. Para encontrar el diseo de interaccin adecuado, ponemos a las personas en escenarios y desarrollamos bosquejos grficos que siguen los caminos ms relevantes en las interfaces. Aplicamos posprincipios de diseo y las plantillas para construir una solucin. Mientras ms avanzamos adquirimos ms confianza en lo que desarrollamos y definimos la conducta de las funciones menos usadas y diseamos nuestra solucin con mejores niveles de fidelidad. En cada paso, documentamos los cambios en nuestro diseo de manera que podamos comunicarlos a todos los miembros de nuestro equipo de desarrollo. Esta metodologa tiene un uso muy importante al momento de definir las funcionalidades de un sitio web, ya que al definir a los personajes que utilizarn y las situaciones en que los emplearn, ser ms fcil que todo el equipo de desarrollo determine los lmites de las funcionalidades y contenidos que debe poner en cada pantalla48. Por ejemplo, para un sitio que ofrezca trmites de un servicio determinado, ser importante determinar quines son los usuarios habituales del mismo. Si se sabe que son de la tercera edad y con limitados conocimientos sobre el uso del computador, se podr disear una persona que sea un hombre que slo quiere realizar el trmite en el menor nmero de pasos posibles, con una interfaz con la menor cantidad de elementos tecnolgicos y la mayor simplicidad posible, con el fin de hacer la accin que se necesita y terminar consiguiendo un comprobante que le ayude posteriormente a demostrar que ya hizo la gestin. Como parte del uso de esta metodologa se puede bautizar a la persona como Don Tito, indicar que se trata de un jubilado. Luego, se podr definir que el escenario consistir en que utilizar el trmite desde un infocentro donde es improbable que pueda recibir ayuda lo que determinar que la pantalla debe ser lo ms simple posible y que esperar salir de all con un documento impreso que lleve un timbre, tal como si hubiera ido a la oficina del servicio. Al conocer estos requerimientos, todo el equipo de desarrollo entender muy bien lo que tiene que hacer y su respuesta ser diferente que si slo se hablara del usuario en trminos genricos.

M. Ejemplos Prcticos de Medicin de Usabilidad

48

Ms sobre este tema en http://www.alzado.org/articulo.php?id_art=110&s=1

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 95 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Con las metodologas dadas a conocer anteriormente es posible que el equipo que desarrolla un sistema pueda capturar informacin de primer orden durante el proceso de creacin de un sitio web para determinar la mejor forma de disear tanto sus interfaces grficas como las interacciones que se generan a partir de ellas.

N. Utilizacin de la Metodologa
Tomando dichas metodologas y aplicndolas a un proceso de desarrollo, se sugiere su uso en el siguiente orden: Creacin de personas: el uso de esta metodologa aparece como primera actividad en un proceso de desarrollo web y consiste en una revisin de la audiencia a la que se dirige el sitio web para elegir de entre aquellos usuarios que aparecen como los principales, a uno o dos que representen a los usuarios promedio. La actividad en este caso consiste en definirlos con nombre y apellido, otorgarles caractersticas demogrficas e incluso darles una fotografa que los identifique. Dichas personas deben estar siempre referenciadas en las conversaciones que definan las capacidades del sitio, con el objetivo de que la interfaz siempre est orientada a los usuarios. Creacin de Escenarios: como segunda actividad se determina en qu momentos los usuarios para los cuales se han creado las personas llegarn a utilizar el sitio web y de qu manera lo harn. Con eso se puede terminar qu funcionalidades son las ms relevantes a ser desarrolladas y la manera en que el enfoque a las personas debe ser expresado tanto en el diseo grfico como de interaccin. Las interfaces que se generen tras estos aportes, debern consignar dicha visin. Test Heurstico: una vez que se han completado los pasos anteriores y an antes del desarrollo, se puede entregar los diseos de interfaces a un pequeo grupo de expertos, para que determinen las eventuales fallas de usabilidad que puedan existir en las propuestas. Con sus informes ser posible hacer correcciones a las interfaces que se hayan desarrollado hasta el momento, gracias a lo cual se evitarn problemas posteriores. Test de Usuario: cuando ya se ha avanzado en el desarrollo, es posible hacer pruebas con usuarios reales para ver la manera en que ellos utilizan las interfaces, para comprobar si se ha conseguido la meta de que logren realizar las tareas que se

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 96 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

proponen en la pantallas de manera eficiente y efectiva. Con los resultados se deben hacer as correcciones que aparezcan como necesarias para asegurar la usabilidad. Es importante considerar que todos los pasos anteriores deben ser insertados en el sistema de desarrollo que se ponga en prctica, dando espacio para la generacin de sus resultados e integrando a stos en procesos repetitivos de mejoras. Slo de esta manera se podr asegurar que el sitio web resultante ser comprendido y utilizado adecuadamente por los usuarios. Tambin es relevante tener la claridad de que un sistema slo ser til cuando los usuarios que lo empleen logren desarrollar las tareas que se ofrecen en sus pantallas; en este sentido, no basta que el software realice las operaciones que se desean, sino que slo se entender que funciona adecuadamente cuando los usuarios lo entienden, lo emplean y logran cumplir con las actividades que comprende su interfaz.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 97 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Anexo 1
Biblioteca de Recursos

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 98 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

A. Documentos
El Anexo 1 ofrece una seleccin de vnculos y documentos para observar y bajar documentos, tales como Guas Web de otros pases, artculos de especialistas, ensayos, documentos especializados. Espaa: Legislacin sobre Accesibilidad para la Sociedad de la Informacin New Zealand Government Web Guidelines Canada: Web site for Common Look and Feel (CLF) The Argus Center for Information Architecture The World Wide Web Consortium (W3C) W3C, Policies Relating to Web Accessibility Web Content Accessibility Guidelines 1.0 Web Content Accessibility Guidelines 2.0 (documentos en consulta) Microsoft Accessibility Technology for Everyone Adobe Accessibility Resource Center Thirty-Something (Million): Should They Be Exceptions? Section 508 of the Rehabilitation Act

Espaa: Legislacin sobre Accesibilidad para la Sociedad de la Informacin Recopilacin de las leyes que se han dictado en Espaa acerca de condiciones bsicas para el acceso de las personas con discapacidad a las tecnologas, productos y servicios relacionados con la sociedad de la informacin y medios de comunicacin social. Fuente: Fundacin Sidar http://www.sidar.org/recur/direc/legis/espa.php

New Zealand Government Web Guidelines Esta gua de recomendaciones es relevante para todas las organizaciones del sector pblico que usan Internet para la publicacin de informacin y entrega de servicios a ciudadanos y empresarios. Entrega un conjunto de recomendaciones estndares que todo el Sector Pblico de Nueva Zelandia debe adoptar cuando disea un nuevo sitio Web pblico o actualiza uno existente. Fuente: Gobierno de Nueva Zelandia http://www.e-government.govt.nz/docs/web-guidelines-v1/

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 99 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Canada: Web site for Common Look and Feel (CLF) Este sitio ha sido desarrollado para asistir a departamentos gubernamentales y a las agencias federales con la puesta en prctica de una mirada comn y la aplicacin de estndares de presentacin (look) y contenido (feel). El objetivo es que con la aplicacin de estos estndares en los sitios Web del gobierno de Canad sus usuarios podrn distinguir programas y servicios federales de otros y navegar con xito a partir de un sitio federal a otro para encontrar la informacin que necesitan. Fuente: Treasury Board of Board Secretariat http://www.tbs-sct.gc.ca/clf-nsi/index_e.asp

The Argus Center for Information Architecture Coleccin de artculos relativos a diferentes tpicos relativos a Arquitectura de Informacin como: Manejo de Contenido, Navegacin, Diseo Web y otros. Fuente: Argus Center for Information Architecture http://argus-acia.com/

The World Wide Web Consortium (W3C) Este Consorcio se preocupa de desarrollar la interoperabilidad de tecnologas (especificaciones, pautas, software, y herramientas) para conducir Web a su capacidad mxima. W3C es un foro para la informacin, el comercio, la comunicacin, y la comprensin colectiva. En esta pgina, usted encontrar noticias de W3C, enlaces a las tecnologas de W3C y guas para adoptarlas. Fuente: World Wide Web Consortium http://www.w3c.org

W3C, Policies Relating to Web Accessibility Los vnculos a polticas especficas en esta pgina corresponden a una recopilacin de recursos hecha por el Consorcio Web W3C, la iniciativa de accesibilidad Web (WAI) y el Education and Outreach Working Group (EOWG). Esta pgina y sus contenidos no deben ser tomados como recurso definitivo puesto que est en constante actualizacin. Fuente: World Wide Web Consortium http://www.w3.org/WAI/Policy/

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 100 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Web Content Accessibility Guidelines 1.0 Esta es una gua de especificaciones bsicas hecha por el Consorcio W3C, que tiene por objeto hacer que un Sitio Web sea accesible para personas con alguna discapacidad. Estas especificaciones estn orientadas para todos los desarrolladores de contenido (editores y diseadores) y programadores. Fuente: World Wide Web Consortium http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html

Web Content Accessibility Guidelines 2.0 (documentos en consulta) Esta es la pgina con las nuevas especificaciones de Accesibilidad que se encuentra en consultas por parte del Consorcio W3C. Fuente: World Wide Web Consortium http://www.w3.org/WAI/intro/wcag20.php

Microsoft Accessibility Technology for Everyone Servicio de la Empresa Microsoft donde se describe e informa de las polticas de la compaa con relacin al acceso de todas las personas a la tecnologa. Productos y recursos, asistencia tcnica, artculos, estudios de caso, tutoriales, etc. Fuente: Microsoft http://www.microsoft.com/enable/

Adobe Accessibility Resource Center Sitio con informacin acerca de cmo hacer accesibles los documentos que se creen con productos de la empresa Adobe (en idioma ingls). Fuente: Adobe http://access.adobe.com/

Thirty-Something (Million): Should They Be Exceptions? There are over thirty million people in the U.S. with disabilities or functional limitations (of which a major cause is aging), and this number is increasing. An examination of the role of human factors in addressing this population is presented which would include both special

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 101 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

designs for disability/aging and the incorporation of disability/aging into mainstream human factors research and education. Fuente: Trace Research & Development Center, College of Engineering, University of Wisconsin-Madison. http://trace.wisc.edu/docs/30_some/30_some.htm

Section 508 of the Rehabilitation Act Las normas, publicadas en la seccin 508 de la Ley de Rehabilitacin (Rehabilitation Act) de los Estados Unidos, son vlidas para la tecnologa electrnica y de informacin adquirida por las agencias federales. Ofrecen criterios especficos para maquinas y programas de computadoras, portales, sistemas telefnicos, mquinas facsimilares, copiadoras y tecnologas similares. Fuente: Federal Information Technology Accessibility Initiative http://www.section508.gov/ http://www.access-board.gov/508.htm

B. Herramientas de Validacin
Hera Es una herramienta para revisar la accesibilidad de pginas web de acuerdo a las especificaciones de las Guas de Accesibilidad de la World Wide Web Consortium (WCAG 1.0). Servicio Gratuito. http://www.sidar.org/hera/index.php.es

TAWdis Test de accesibilidad, permite Validacin de un sitio completo utilizando las normas de validacin WAI, entrega un reporte con detalles de los errores y propone soluciones para los mismos. Servicio Gratuito. http://www.tawdis.net/taw3/cms/en

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 102 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

W3C MarkUp Validator Servicio de validacin de documentos como HTML y XHTML segn las recomendaciones del Consorcio W3C y otros estndares. Entrega un informe detallado con los errores encontrados. http://validator.w3.org

W3C Link Checker Verifica el correcto funcionamiento de &quot;anchors&quot; (hyperlinks) en documentos HTML/XHTML. Se recomienda usarlo frecuentemente para detectar enlaces (links) rotos o inconsistentes. Ofrece varias alternativas para la construccin del informe. http://validator.w3.org/checklink

W3C CSS Validation Service Servicio de validacin de hojas de estilo (CSS, Cascade Style Sheets) o documentos que usan hojas de estilo. Ofrece tres alternativas para la validacin de CCS: URL, subir un archivo (upload) y por medio de un rea de texto. Adems, se ofrece la alternativa de bajar una aplicacin para usarla en forma local. http://jigsaw.w3.org/css-validator/

C. Consejos Prcticos
Manejo de CSS Este es un sitio elaborado por un grupo de profesionales expertos en desarrollo y diseo de Web, incluye una completa coleccin de artculos y recomendaciones para resolver problemas frecuentes relacionados con el armado, montaje y programacin de hojas de estilo, CSS. Incluye tpicos como: Diseo, Browsers, Contenidos, CSS, Negocios, Herramientas, Procesos, XHTML, etc. http://www.alistapart.com

Accesibilidad de objetos Flash Flash ha evolucionado en los ltimos aos, incluyendo mdulos de accesibilidad en sus productos; Adobe entrega guas para lograr este objetivo.
Pg. 103 de 109

Gobierno de Costa Rica

www.gobiernofacil.go.cr

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

http://www.adobe.com/es/accessibility/

D. Arquitectura de Informacin
Information Architecture Institute Este instituto es una organizacin de voluntarios dedicados a la promocin y avance de la arquitectura de informacin, incluye un directorio de recursos, ejemplos de experiencias, noticias y artculos relacionados con el manejo de contenidos. http://www.iainstitute.org/

Visual Vocabulary, Jesse James Garret Este documento trata las consideraciones en el desarrollo de tales diagramas, delinea una simbologa bsica para hacer diagramas de conceptos de arquitectura de informacin y diseo de interaccin, y entrega guas para el uso de estos elementos. http://www.jjg.net/ia/visvocab/

E. Herramientas
Browsers Completo listado de Browsers disponibles para navegar, incluye los ms populares y tambin los que permiten explorar en formato &quot;Solo Texto&quot;. http://browsers.evolt.org/

F. Gestin y Manejo de Proyectos


Actualmente, existe una gran cantidad de herramientas (software) orientadas a hacer ms eficiente la gestin de proyectos, obviamente, muchas de estas herramientas aumentan su grado de dificultad dependiendo de con que objetivos han sido creadas. Sin embargo, hay varias herramientas que pueden ser usadas para coordinar de mejor forma el desarrollo de un sitio Web, algunas implicarn el gasto en la compra de licencias. En este sentido, la eleccin de la herramienta depender necesariamente del presupuesto y la posibilidad de investigar

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 104 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

entre las herramientas gratuitas existentes (Open Source). Podemos mencionar las ms conocidas: PhpCollab, Project Management Consiste en una aplicacin basada en LINUX que funciona como una pgina Web y que permite llevar el control de las etapas del desarrollo (planificacin, diseo, programacin y puesta en marcha) asignar tareas a personas del equipo y controlar su cumplimiento. http://phpcollab.sourceforge.net/ o http://sourceforge.net/

Microsoft Office Project Office Project es un software cliente que tiene costo de licenciamiento y que habitualmente est incluido con la compra de licencias Office de Microsoft, es una herramienta muy completa que puede ser usada para la coordinacin y seguimiento de proyectos diversos, por lo que del desarrollo de un sitio Web puede ser controlado perfectamente con esta herramienta. En este vnculo se entrega una completa gua de trabajo y ayuda para poder usar adecuadamente el programa. http://office.microsoft.com/

G. Administracin de Contenidos
Uno de los problemas comunes en los proyectos Web tiene que ver con el ingreso y actualizacin de contenidos, para resolver esto y evitar la actualizacin manual de las pginas, existen herramientas automticas, basadas en relaciones con bases de datos. Estas herramientas dan un carcter ms dinmico a los sitios pero al mismo tiempo exigen la dedicacin de una persona o un equipo que se encargue de su operacin, de la misma manera, estas herramientas tienen costos asociados que debe ser considerados a fondo antes de tomar cualquier decisin y afectan el diseo original del proyecto y la tecnologa necesaria para su funcionamiento. Por lo general, estas herramientas son diseadas a la medida, an cuando en el mercado y en Internet existen algunas que permiten ser instaladas y usadas en forma inmediata. Por ejemplo: Joomla Open Source Joomla es una herramienta gratuita de Open Source (Cdigo Abierto) que permite la creacin y administracin de Sitios. Basada en el software Mambo, est diseado en plataforma Linux

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 105 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

y requiere ser instalado en un servidor de esas caractersticas. Permite el manejo de usuarios, control de plantillas de despliegue, publicacin, encuestas, foros y otros mdulos propios del Web. http://www.joomla.org/ http://www.comunidadtecnologica.gob.cl/

Plone, Zope y Python Plone es una herramienta gratuita de Open Source (Cdigo Abierto) que permite la creacin y administracin de Sitios. http://plone.org/countries/conosur

Adobe Contribute Software licenciado que facilita a personas o equipos las tareas de actualizacin, mantencin, creacin y publicacin de contenidos HTML en cualquier Sitios Web. Permite que usuarios no tcnicos actualicen el contenido del Web manteniendo los estndares de estilo (CSS), diagramacin y cdigo del Sitio. http://www.adobe.com/products/contribute/

H. Manejo de Imgenes
Manejo de Imgenes Existe una gran cantidad de herramientas que estn hechas para el manejo de imgenes, muchas de ellas estn basadas en modos diferentes de dibujo, estas diferencias tienen directa relacin con el tipo de objeto (imagen) con el que se trabaja, resolucin y la calidad final del mismo. Existen programas especficos para manejo de imgenes que son usadas en diseo profesional y que han derivado a programas ms pequeos, que fusionan la manipulacin de mapas de bits (bitmap) con la orientacin a objetos (coordenadas) para facilitar la creacin de imgenes para Web. Aprender a usar estas herramientas no es difcil, aunque siempre es recomendable la asesora externa, puesto que el diseo requiere de una intervencin especial.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 106 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Gimp GIMP es un programa de tratamiento de imgenes libre. Es ideal para tareas como retocar fotografas, crear imgenes para la web, etc. Se distribuye bajo una licencia libre, lo que permite usarlo, distribuirlo o incluso adaptarlo a las necesidades de cada uno. http://www.gimp.org.es/

Adobe Fireworks Software orientado especficamente a la creacin de imgenes para publicar en Sitios Web, incluye opciones y efectos como sombrados y resalte de color. Permite guardar los archivos en diversos formatos y facilita el intercambio con programas. http://www.adobe.com/products/fireworks/?promoid=home_prod_fw_082403

Adobe Photoshop Este es el programa profesional ms completo para el manejo de imgenes digitales, permite hacer efectos y trucos fotogrficos de gran calidad, maneja las imgenes en mapas de bits, lo que muchas veces podra dificultar la creacin de imgenes livianas para publicar en el Web. Sin embargo, las ltimas versiones incluyen un mdulo especial que incluye todas las opciones de exportacin para Internet. http://www.adobe.com/products/photoshop/index.html

Adobe Illustrator Este programa permite la creacin de ilustraciones en formato liviano y de gran calidad, sus ltimas versiones permiten la creacin y exportacin de imgenes de vectores para publicar en Sitios Web, a diferencia de Photoshop, este programa est orientado a objetos, es decir, dibuja las figuras como vectores y no como mapas de bits. http://www.adobe.com/products/illustrator/index.html

Adobe Freehand Este programa permite la creacin de ilustraciones en formato liviano y de gran calidad, sus ltimas versiones permiten la creacin y exportacin de imgenes de vectores para publicar

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 107 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

en Sitios Web, a diferencia de Photoshop, este programa est orientado a objetos, es decir, dibuja las figuras como vectores y no como mapas de bits. http://www.adobe.com/products/freehand/?promoid=home_prod_fh_082403

I. HTML
HTML Tidy Al editar un documento HTML es fcil cometer errores de escritura, esta herramienta permite ajustar esos errores en forma simple y automtica ordenando el cdigo. Facilita la construccin de pginas HTML estndar segn las especificaciones de accesibilidad de la W3C. Esta es una herramienta de software libre y no requiere compra de licencias, se recomienda leer la documentacin relativa al programa. http://tidy.sourceforge.net/ http://www.w3.org/People/Raggett/tidy/

HTML Kit HTML-Kit es una herramienta de alto nivel de desarrollo de HTML, puede ser usada para crear, editar, validar, previsualizar y publicar pginas Web y scripts en un ambiente de generacin de cdigo ordenado y con posibilidades de trabajo en diferentes objetos como archivos JAVA. Ofrece acceso en lnea a mltiples herramientas de validacin para archivos en formatos HTML, XHTML, XML y CSS. http://www.chami.com/html-kit/

XENU, Link Checking Software Es un software araa que comprueba sitios Web para descubrir si contienen vnculos quebrados. La verificacin se hace sobre enlaces normales, imgenes, marcos, plug-in, fondos, mapas de imagen, hojas del estilo (CSS), Scripts y Java applets. Entrega un listado de todos los elementos que corresponden a un vnculo especificando el estado de cada uno y la informacin relativa al objeto. EL software se instala en el PC y permite hacer un chequeo a sitios en Internet desde el escritorio. http://home.snafu.de/tilman/xenulink.html

TopStyle

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 108 de 109

GUA PARA EL DESARROLLO DE SITIOS WEB 2.0

Este software tiene costo de licencia y es una excelente herramienta para crear y editar documentos HTML, XHTML y especialmente manejo de CSS en un mismo programa. Entre muchas de sus funciones se destacan: el chequeo especfico de la estructura y sintaxis de CSS para mltiples browsers; conversin de HTML a XHTML con la integracin de TYDY e incluye los estndares de validacin de W3C HTML Validator. La versin "lite" es gratuita. http://www.newsgator.com/Individuals/TopStyle/Default.aspx

J. Manejo de Color
Color theory, tutorials & resources Seccin de Laboratorio de manejo de colores relacionado con un software creado para la seleccin de colores aplicados en diferentes medios. Esta seccin es de acceso gratuito y entrega informacin relativa a teora del color, ejemplos de aplicacin y combinaciones de colores, tutoriales y documentos de referencia. http://www.tigercolor.com/colorlab/Default.htm http://www.tigercolor.com/color-lab/Default.htm

VISCHECK: Chequeo Visual Vischeck es un sitio que entrega informacin relativa a enfermedades que afectan a la vista y que afectan la forma en que una persona puede ver con alguna distorsin colores e imgenes. Tambin se ofrece la posibilidad de revisar on-line cmo vera un sitio una persona daltnica, entregando algunas herramientas que se pueden descargar. Segn este sitio, su sitio puede verse como usted no lo imagina. http://www.vischeck.com

Web Safe Color: Paleta de Colores Seguros Contiene una imagen con una lista de colores seguros (Web Safe Color) que pueden ser aplicados y se vern de la misma manera en los diferentes Browsers. Cada color incluye los valores hexadecimales y RGB. http://www.lynda.com/hexh.html

NOTA: Algunas direcciones de Sitios externos pueden cambiar sin previo aviso.

Gobierno de Costa Rica

www.gobiernofacil.go.cr

Pg. 109 de 109

Вам также может понравиться