Manual de estilo y diseño de sitios y páginas Web

Transcripción

1 Instituto Nacional de Tecnología Agropecuaria Manual de estilo y diseño de sitios y páginas Web Departamento de Comunicaciones Ing. Agr. Marcelo H. Bosch Marzo 2002

2 Copyright Se prohíbe la reproducción total o parcial sin permiso expreso del autor o del Instituto Nacional de Tecnología Agropecuaria. Ing. Marcelo H. Bosch Pág. -2-

3 ANTES DE COMENZAR Agradecimientos El presente trabajo contiene el aporte de ideas, comentarios, sugerencias y correciones de varias personas. Marina Lopez Casoli, Estela María Varela y Silvia de Bellis cuyos agudos ojos pulieron algunos de los muchos horrores ortográficos y de tipeo cometidos durante largas jornadas de confección del documento. Carlos Roig con su visión/utopía de Sistema Institucional de Información le dio un marco más amplio al proyecto. José Luis Vecchi a través de fuertes pero enriquecedoras discusiones sobre lo que debe ser la Web. A Colin Fraser y Sonia Restrepo, consultores internacionales en comunicación, por sus comentarios específicos y apoyo general al proyecto web institucional. Un especial reconocimiento al Ing. Carlos Torres por su fuerte apuesta al proyecto web y la confianza depositada en el autor. Aclaración La intención del autor es la de resumir en pocas páginas la experiencia acumulada internacionalmente y la investigación sobre desarrollos de sistemas e interfaces de usuario desde las primeras aproximaciones, ya clásicas, en el PARC de Xerox en California. No pretende establecer dogma sino más bien fundamentar técnicamente en la medida de lo posible cada una de las decisiones de desarrollo que deben tomarse. Si el lector logra incrementar su criterio respecto de cómo encarar el desarrollo de un sitio web, más allá de las herramientas, lenguajes y tecnologías, que por otra parte cambian o desaparecen demasiado rápido, se habrá abierto entonces una senda de racionalidad en el ejercicio de la profesión de diseñador web y el esfuerzo estará ampliamente compensado. Aportes y Actualizaciones La web nos proporciona una oportunidad única de utilizar la inteligencia y creatividad diseminada a través de los mecanismos de interacción electrónicos. Se habilitó un espacio para recibir críticas, sugerencias y aportes, así como propuestas de temas y continuidad de este modesto aporte al trabajo de muchos desarrolladores que contribuirán a la creación del sitio web del INTA. La plataforma de Internet esta en plena evolución y requerirá de los profesionales una permanente actualización en el uso de las tecnologías más apropiadas por lo que este trabajo puede considerarse como el primero de una serie. Póngase en contacto través de Ing. Marcelo H. Bosch Pág. -3-

4 Tabla de Contenido del Manual de estilo para publicación Web Antes de comenzar... 3 Quienes deben leer esta guía... 6 PARTE I: ASPECTOS CONCEPTUALES...7 Capítulo 1: La web...7 Qué es un sitio Web... 7 Qué no es un sitio Web... 8 Para quién es un sitio Web?... 8 Capitulo 2: La arquitectura de sitios web...10 La visión y la misión El análisis de requerimientos El anteproyecto La estructura La organización del espacio El diseño de la entrada La planificación Supervisión de obra La terminación Capitulo 3: La usabilidad de sitios web...14 Qué es la usabilidad? Aspectos de la usabilidad Contenido para la Web Textos para la Web PARTE II: ASPECTOS TECNICOS Capitulo 4: Preparación del contenido...18 Edición del texto de páginas Los Textos Ocultos de una Página Lecturabilidad El contexto de la página Imágenes para la Web Multimedia: Sonido y Video para la Web...38 Capitulo 5: Diseño de páginas...42 Diseño independiente de los dispositivos de visualización La utilización del espacio El Tiempo de descarga Los hipervínculos Marcos o Frames La Impresión Capítulo 6: La codificación...52 Codificación semantica Lenguaje HTML Una página al alcance de todos Hojas de Estilo en Cascada (CSS) Ing. Marcelo H. Bosch Pág. -4-

5 Capitulo 7: Diseño de sitios...68 Consideraciones generales Estructura de navegación Subsitios Funcionamiento del motor de búsqueda Bibliografía y referencias...76 Apéndice I...78 Ing. Marcelo H. Bosch Pág. -5-

6 INTRODUCCION QUIENES DEBEN LEER ESTA GUÍA Esta Guía, que surge como material de apoyo y capacitación dentro del proyecto de desarrollo de Internet del INTA, se divide en dos partes: la Parte I es de carácter conceptual mientras que la parte II es de carácter técnico. La Parte I puede ser leída por todos aquellos que tengan interés en entender los conceptos de sitios web y la lógica que debe guiar el trabajo de contenidistas y diseñadores. Cualquier usuario de la web encontrará explicación a sus padecimientos en la tarea de encontrar información relevante y descubrirá que no es su incompetencia sino la mala arquitectura de los sitios la que provoca muchos de sus fracasos. Se explican aquí los dos conceptos principales que deben guiar el trabajo de construcción de sitios y páginas: la arquitectura y la usabilidad. Adquirir estos conceptos le permitirá también convertirse en un usuario crítico y exigente respecto del servicio que le ofrecen diferentes sitios de Internet. La Parte II es de lectura obligatoria para aquellos que tengan alguna responsabilidad en la preparación de paginas y sitios web del INTA ya sea para diseño o redacción de contenidos. Las recomendaciones de esta Guía son de aplicación universal y no una mera disposición burocrática y están basadas en investigaciones y comprobaciones hechas por expertos de la ingeniería de sistemas, ingeniería de usabilidad y por recomendaciones del Web Consortium, organización internacional de elaboración de estándares en Internet. Los diseñadores y webmasters que incorporen a su método de trabajo estas sanas prácticas, habrán dado un salto de calidad en sus diseños, desarrollarán materiales reutilizables y agregarán valor a los mismos. Los contenidistas que preparen material para su publicación electrónica siguiendo las normas y recomendaciones de este Manual, tendrán mayor probabilidad de ser leídos por los usuarios, les brindarán contenido de mayor calidad y una mejor experiencia web. Por otra parte, los conceptos aquí desarrollados perdurarán en el tiempo mucho después que las tecnologías (lenguajes y herramientas) hayan quedado obsoletas y por lo tanto es una buena inversión adquirir las disciplinas de diseño que aquí se recomiendan. Ing. Marcelo H. Bosch Pág. -6-

7 PARTE I: ASPECTOS CONCEPTUALES CAPÍTULO 1: LA WEB Tom Berners Lee concibió la Web como una plataforma para compartir documentos a través de redes. QUÉ ES UN SITIO WEB Un sitio web es un conjunto de páginas Web relacionadas a través de una estructura de navegación, con el objetivo de hacer pública y universalmente accesible una cierta cantidad de información. Para alcanzar dicho objetivo, los sitios deben concebirse con un criterio arquitectónico y construirse desde los cimientos, con una visión sistémica y una lógica adecuada a su función específica. Tom Berners Lee concibió la Web como una plataforma para compartir documentos a través de redes. La unidad de información de la web es un documento (archivo) llamado página Web que se aloja en algún servidor web y puede ser localizada a través de su URL o dirección desde cualquier computadora cliente, en cualquier ubicación del mundo que posea acceso a Internet. Por ejemplo, indica que el documento o página informa.htm se localiza en el servidor de INTA ( Para acceder a una página web se requiere de un programa o cliente web que gestione la localización, recuperación, interpretación, visualización, archivado e impresión eventual de la misma. Ese tipo de programa se llama navegador Web, siendo los más utilizados el Explorer de Microsoft y el Navigator de Netscape. Para que los documentos pudieran ser independientes de las plataformas de sistemas de los usuarios se desarrolló el lenguaje HTML, también conocido como lenguaje de marcado de hipertexto. Posteriormente, las empresas de software que desarrollan navegadores han extendido por su cuenta dicho lenguaje, agregando etiquetas para mejorar los efectos de visualización de las páginas, generando un problema de incompatibilidad dado que esas extensiones no son reconocidas de manera universal. Los programadores de páginas web deben preocuparse, desde entonces, que sus diseños sean correctamente visibles en cualquiera de los dos navegadores más utilizados del mercado en las versiones actuales y anteriores, dado que el reemplazo es relativamente lento. Nuestra recomendación es atenerse los estándares de Web Consortium sobre el uso adecuado del lenguaje HTML lo cual asegura la máxima compatibilidad. Asimismo recomendamos muy fuertemente la utilización de hojas de estilo por razones que se indican más adelante y hemos desarrollado una plantilla institucional de estilo para dar consistencia a todas las páginas del sitio web de INTA. Ing. Marcelo H. Bosch Pág. -7-

8 QUÉ NO ES UN SITIO WEB Aunque para muchos resulte obvio, un sitio web no es un libro así como una página web no es una página impresa o un folleto. Esto que parece fácil de entender no lo es tanto en la práctica diaria de redacción de contenido para la web y menos todavía para el diseño gráfico de las páginas. En este manual se hará hincapié en las diferencias que separan al medio impreso de Internet y sus consecuencias sobre la usabilidad de sitios. La web es una medio excelente y económico para publicar documentos cortos y con vínculos a otros documentos relacionados, sin embargo no es tan adecuada para documentos largos con desarrollo secuenciado. Por lo tanto hay que conocer las ventajas pero también las limitaciones que impone la edición de páginas web. Un sitio web debe ser concebido para los usuarios y visitantes potenciales. PARA QUIÉN ES UN SITIO WEB? La respuesta aparentemente obvia sería: para la empresa o la institución que lo desarrolla. Sin embargo la visión que se quiere compartir aquí es que un sitio es para los usuarios y visitantes, ellos son los destinatarios de todos los esfuerzos desplegados en su construcción. Un visitante ocasional se transformará en un usuario si vuelve al sitio. Volverá al sitio solamente si es satisfecho en tres aspectos: calidad de la información, facilidad de acceso y velocidad. Logrado eso es probable que vuelva por más y se transforme en un cliente y difusor activo del sitio. Caso contrario no solo no volverá sino que será un eficiente detractor (por aquello de que un cliente insatisfecho desalienta a muchos otros potenciales clientes) y seguramente con razón. Lo que se intenta decir es que el sitio Web del INTA debe estar al servicio de sus usuarios: productores rurales, estudiantes, profesionales, funcionarios públicos, entidades vinculadas al sector agroalimentario y público en general. En el caso de la Intranet el cliente es interno: empleados, técnicos e investigadores de la institución lo cual plantea un escenario diferente y merecerá un análisis por separado. Las mejoras de usabilidad de la Intranet se pueden cuantificar en términos económicos que justifican ampliamente la inversión de recursos en su arquitectura y diseño. Debe reflexionarse también acerca del comportamiento de los usuarios ya que la comprensión del mismo debe guiar todas las practicas de diseño. Mucha investigación sobre las buenas practicas de diseño web se han elaborado tras largas sesiones de observación de usuarios en laboratorios controlados y en estudios de campo en empresas de tecnología. Otro tanto de lo que se sabe proviene de Ing. Marcelo H. Bosch Pág. -8-

9 Subordinar el diseño a la usabilidad, el arte a la ingeniería, la creatividad a la funcionalidad y la estética a la eficiencia. investigaciones realizadas desde los años setenta en laboratorios como el PARC de Xerox sobre interfaz gráfica de usuarios (GUI) y muchas de las recomendaciones de usabilidad se aplican también a la interactividad en sitios web, aunque la arquitectura propia de la web requiere atender otros aspectos. Fundamentalmente, en lo que a tiempos se refiere, los usuarios son extremadamente intolerantes a las demoras, sumado al hecho de que a un clic de distancia hay más de mil millones de páginas, la ecuación es muy sencilla: página lenta = usuario molesto = visitante perdido Por oposición decimos que el sitio Web no debe ser de los webmasters, diseñadores, contenidistas o autoridades. La usabilidad de los sitios dependen de factores técnicos y comportamientos humanos que están más allá de los gustos personales, opiniones e intereses y la optimización de Internet como medio puede lograrse subordinando el diseño a la usabilidad, el arte a la ingeniería, la creatividad a la funcionalidad y la estética a la eficiencia. La buena noticia es que los métodos de la usabilidad son baratos y no requieren aprendizajes complejos. Todo lo contrario: lo más probable es que haya que desaprender y dejar de utilizar técnicas y software sofisticado sin necesidad, solo por que rápidamente hace cosas maravillosas pero que no respeta los estándares y tampoco agrega valor al contenido. Se debe desarrollar sentido crítico al navegar por la web para discernir lo bueno de lo atractivo, sobre todo a la hora de copiar ideas. Ing. Marcelo H. Bosch Pág. -9-

10 CAPITULO 2: LA ARQUITECTURA DE SITIOS WEB Aunque no es objetivo de este manual desarrollar una teoría sobre arquitectura de sitios web, lo que sí se pretende es transmitir los conceptos básicos para poner de manifiesto la importancia que tiene en la funcionalidad general del sitio. Para ello utilizaremos como metáfora, la construcción de edificios, para comprender de qué se trata y que importancia tiene disponer de una arquitectura. Veamos algunas similitudes. LA VISIÓN Y LA MISIÓN Así como un edificio se construye con un objetivo y funciones determinadas (residencia, centro comercial, hospital) los sitios se construyen, o deberían hacerlo, con ciertos objetivos en mente: comunicar, distribuir o comercializar información, generar comunidades, vincularse con el medio o crear cultura organizacional. Antes de sentarse a pensar en el proyecto los arquitectos deben tener en claro para qué se construye, es decir la visión y la misión y luego para quién se construye. Esa información orientará el resto del proceso. Existe una misión general asociada a la de la organización en su conjunto y pueden coexistir misiones parciales y subordinadas para cada subsitio. La misión del sitio web se ha propuesto de la siguiente forma: Brindar al usuario un acceso rápido y simple a la información que necesita y que le motive a explorar el sitio para descubrir nuevas posibilidades de servicios. Difundir las actividades del Grupo INTA, potenciando la función de transferencia, la creación de servicios y la vinculación. La visión debería incluir no solo la descripción de lo que se desea alcanzar sino una ubicación temporal. Por ejemplo: Constituirse en la fuente de información agropecuaria de mayor calidad para productores, estudiantes, profesionales, técnicos y funcionarios. Alcanzar páginas de contenido y registrar Ing. Marcelo H. Bosch Pág. -10-

11 3000 visitas diarias al sitio para fines del año La visión y la misión del sitio o subsitio debería elaborarse en forma consensuada y alineada con la misión y visión organizacional. Se debe relevar las necesidades de la organización. EL ANÁLISIS DE REQUERIMIENTOS Ya se sabe para qué será el edificio, pero qué tamaño tendrá? Cuántos pisos, habitaciones, salones y sanitarios? Qué servicios se necesitan? Habrá gimnasio, ascensores, estacionamiento o seguridad? Todo ello determinará la envergadura de la obra y los recursos necesarios para el proyecto. Antes de diseñar un sitio web se deben relevar las necesidades de la organización: cantidad y tipo de contenido a publicar, servicios que se pretende ofrecer: acceso a bases de datos, comercio electrónico, foros de discusión, web mail, etc. Sobre la base de dichos requerimientos se puede planificar y presupuestar no solo la construcción sino el mantenimiento permanente. EL ANTEPROYECTO El arquitecto debe ahora realizar los primeros bocetos de la arquitectura de su edificio para poder mostrar a los clientes su idea y exponer como esta cumplirá los requerimientos establecidos. Los diseñadores web en esta etapa deben valerse de modelos, prototipos o maquetas de sitios web para depurar, junto a su cliente o directivos, los aspectos que no hayan quedado claros durante las reuniones de requerimientos. Existe software para realizar estas tareas rápidamente como el FrontPage de Microsoft. LA ESTRUCTURA Así como en un edificio se disponen las columnas para que soporten el peso de los niveles superiores y un posible crecimiento futuro, los sitios web deben basarse en una estructura que soporte la organización lógica de la información y el incremento vigoroso que seguramente sufrirá en los próximos años. Antes de diseñar la página de inicio (home page) deberá disponerse del diagrama lógico de la estructura de información, así como el diseño de directorios que almacenarán las diferentes partes del sitio y como se van a agregar en el futuro. Ing. Marcelo H. Bosch Pág. -11-

12 Pantalla de Microsoft Front Page en vista Exploración Este nivel de decisiones es de máxima importancia dado que su modificación durante las etapas posteriores puede ser muy costosa. Merece entonces una adecuada atención. Los diseñadores de sitios deben organizar el espacio de información. LA ORGANIZACIÓN DEL ESPACIO Los arquitectos deben organizar el espacio disponible y disponer las habitaciones y salones de manera de hacer que el conjunto sea lo más funcional posible. Los diseñadores de sitios también deben organizar el espacio de información (hiperespacio) y para ello deben pensar como organizar la información de manera tal que los usuarios puedan encontrarla y usarla fácilmente (baja carga cognitiva), rápida y eficientemente (pocos clics). La posibilidad de relacionar páginas mediante vínculos confiere mayor libertad en el diseño del acceso a la información, pero esta nunca debe sustituir una buena arquitectura de base. EL DISEÑO DE LA ENTRADA Los arquitectos dedican significativo esfuerzo al diseño del frente y la entrada de un edificio y no es casual. El aspecto visual (sobrio, elegante, recargado, informal o académico), el acceso al interior (escaleras, ascensores, puertas) y la señalización adecuada influyen directamente en la forma en que las personas ingresan y circulan por el edificio, en la percepción de calidad y en su experiencia general. Ing. Marcelo H. Bosch Pág. -12-

13 Los visitantes a un sitio también ingresan, navegan tratando de obtener aquello por lo que ingresaron y se retiran con una sensación (grado de satisfacción) que estará en función del diseño de la página principal y los instrumentos de navegación disponibles. Los diseños cargados, inconsistentes y complejos dan una impresión poco profesional y no reflejan el esfuerzo e inversión que se realiza en imagen institucional. LA PLANIFICACIÓN Una vez consensuada y pulida la propuesta original y reunido el contenido general a organizar, el arquitecto debe planificar el proceso de producción, para asegurarse que dispone de los recursos necesarios; elaborar el cronograma de desarrollo y coordinar a los diferentes especialistas que participen de los procesos. SUPERVISIÓN DE OBRA Durante la ejecución aparecen cantidad de problemas que obligan a tomar decisiones que no fueron previstas durante la etapa de diseño. Por lo tanto, el arquitecto debe estar disponible para que el equipo de desarrollo tenga el referente de consulta que asegure la consistencia general del sitio, su alineación con los objetivos de la organización y que mantenga la orientación al usuario. LA TERMINACIÓN El terminado de un edificio lleva mucho tiempo y recursos, pintores, albañiles, plomeros, electricistas, carpinteros y decoradores trabajan duro para el día de la inauguración. En los sitios web esta etapa es la de diseño, que la hemos dejado para el final por que debe estar subordinada a la estructura. Muchos diseñadores de sitios web comienzan su trabajo creando la página principal con alguna herramienta de diseño. Lo que hemos tratado de transmitir es que debe pensarse el sitio como un todo, como un sistema de relaciones entre páginas web y no como un diseño visual determinado. Sin embargo, cuando se ha cumplido con las etapas anteriores, se puede pasar a la parte divertida dando espacio a la creatividad dentro de las pautas generales de estilo y usabilidad que se verán más adelante. La terminación es una etapa que requiere de paciencia y prolijidad para cuidar esos detalles que hacen la diferencia entre páginas. Ing. Marcelo H. Bosch Pág. -13-

14 El enfoque sistémico de construcción de sitios es el único que puede asegurar que los mismos funcionen adecuadamente. CAPITULO 3: LA USABILIDAD DE SITIOS WEB QUÉ ES LA USABILIDAD? El diseño visual de las páginas de un sitio es su parte visible y donde los diseñadores se lucen con su trabajo. En sus curriculum enumeran los sitios diseñados y guardan copias de sus diseños para mostrarlos orgullosamente. Sin embargo nadie escucha decir he diseñado una pagina sumamente usable. Se descuenta que la página se podrá usar sin problemas. Que alejado de la realidad! Los sitios y páginas difieren en su usabilidad, podemos encontrar desde aquellos que no presentan ningún inconveniente al usuario para obtener lo que busca hasta aquellos donde encontrar cierta información es una odisea que muchas veces termina en el fracaso total, es decir donde el usuario opta por abandonar su objetivo. En otros casos, el efecto negativo se traduce en el exceso de tiempo utilizado para completar una tarea aspecto con evidente significación económica para las organizaciones. Las pruebas de usabilidad cuantifican dichas variables y brindan información certera sobre la calidad de la arquitectura de un sitio. Todos podemos ponernos de acuerdo en que los sitios web deben ser fáciles de usar, pero llevar este criterio a la práctica requiere un cambio de enfoque y de disciplina de trabajo más que importante. Usabilidad y arquitectura están relacionadas íntimamente: sin una buena arquitectura no se dispone de accesos a la información simples y ágiles; con diseños de página poco usables una buena arquitectura queda desperdiciada. El enfoque sistémico de construcción de sitios es el único que puede asegurar que los mismos funcionen adecuadamente y sean capaces de crecer sin procesos de reestructuración costosos. ASPECTOS DE LA USABILIDAD La usabilidad es más que una expresión de deseos y sus aspectos pueden ser medidos por pruebas de usabilidad que cuantifican el grado de éxito de un sitio o proyecto en particular. Estas pruebas utilizan diversas metodologías para evaluar el comportamiento de los usuarios ante un determinado diseño y una serie de tareas específicas. También se evalúa el grado de satisfacción una vez que estas han sido completadas. Se mide por ejemplo el tiempo necesario para completar tareas, la tasa de abandonos y los errores cometidos durante la navegación. La observación y la opinión de los usuarios completan la información que servirá para determinar la necesidad de rediseño a distinto nivel. Ing. Marcelo H. Bosch Pág. -14-

15 Si las pruebas de usabilidad se efectúan durante el desarrollo, el proyecto tendrá mayor sustento técnico y posibilidad de éxito. Las pruebas sobre sitios ya implantados brindan buenas pistas para enfocar el trabajo de rediseño. Si bien un sitio web es un sistema y como tal sus componentes están interrelacionados, los mencionamos y analizamos por separado; el lector deberá esforzarse permanentemente en anticipar los efectos que el cambio de un elemento puede determinar en el resto del sistema: el contenido, las páginas y los sitios enteros. Obsérvese que el contenido (información fuente) se vuelca en una página (elemento) que a su vez integra un sitio (sistema) que es parte de Internet (red). Es el contenido lo que los usuarios buscan primero. CONTENIDO PARA LA WEB Ya dijimos que una página web no es una página impresa, un afiche, revista, libro o folleto. Es un medio diferente, que transporta mensajes de manera diferente, con usuarios que se comportan de manera diferente y que acceden desde dispositivos informáticos también diferentes. Todo ello debe ser suficiente para entender el desafío que significa redactar contenidos para la web y en esta sección iremos dando pautas y técnicas para que contenidistas de cualquier disciplina puedan explotar las ventajas que representa y evitar los problemas que surgen por las limitaciones propias como medio de comunicación. El contenido web es lo que los usuarios buscan y ha sido demostrado en las pruebas de usabilidad que primero se fijan en el área de contenido, en los titulares y demás indicadores. Las páginas web con su capacidad multimedia despiertan la imaginación de todos aquellos que ven en este medio una posibilidad de comunicar mensajes de múltiples maneras. Analizaremos primero el texto, las imágenes y otros componentes multimedia, siendo este el orden de importancia, según iremos descubriendo. TEXTOS PARA LA WEB La práctica de escribir para la Web debe ser reconocida como una especialidad y los responsables de organizaciones con presencia en la web tienen que arbitrar los medios para disponer de personal con las Ing. Marcelo H. Bosch Pág. -15-

16 El estilo de escritura para páginas web debe considerar el comportamiento del usuario y el medio. Los usuarios ojean el texto en vez de leerlo por completo. competencias necesarias para generar contenido de calidad, uno de los tres pilares del éxito. La justificación económica de disponer de un editor web pasa no solo por lo dicho sobre la calidad del contenido, lo cual eleva el valor agregado del sitio, sino también por el ahorro del tiempo de los usuarios y empleados (usuarios internos) en el caso de Intranets. Editar para la web es una tarea que puede ser desempeñada por periodistas y comunicadores que se interioricen sobre los nuevos requerimientos de dicho medio pero también por los contenidistas originales: profesionales técnicos, extensionistas o investigadores, pueden escribir considerando el destino final de su material (la pantalla) ahorrando un enorme trabajo editorial. Ya hablaremos de la importancia de la velocidad de descarga de las páginas y lucharemos por todos los medios para reducirlos, pero también tenemos que cuidar el tiempo del usuario orientándolo adecuadamente durante su recorrida por el sitio. Por ejemplo, un texto confuso de un hipertexto hace dudar al usuario sobre su utilidad y un porcentaje de ellos seguirá el vínculo para darse cuenta que no es de su interés. En ambos casos, perdió su tiempo lo que equivale a dinero. Para concebir un estilo de escritura para páginas web hay que entender dos realidades: el comportamiento del usuario y el medio. Como leen los usuarios Los usuarios ojean (scanning) el texto en vez de leerlo por completo según se ha comprobado en numerosas pruebas de usabilidad. Durante el ojeado la vista se detiene en los elementos resaltadores que encuentra: titulares de distinto nivel, listas con viñetas o numeradas y texto enfatizado. A los usuarios no les gusta desplazarse verticalmente por páginas muy extensas, salvo que el material sea de gran valor y lo más probable en ese caso es que lo imprima. El desplazamiento horizontal es aún más odiado por los usuarios con justa razón y por ello deben evitarse a toda costa los diseños que no se ajusten al ancho de pantalla. Se ha comprobado también que la retención de lo leído en pantalla es menor que lo leído en papel, por lo que conviene realizar una cuidadosa planificación del hipertexto al convertir material impreso para la web. Resulta obvio que no es efectivo simplemente copiar dicho material para elaborar páginas web, sin embargo es demasiado frecuente esta práctica. Ing. Marcelo H. Bosch Pág. -16-

17 La lectura en pantalla es un 25% más lenta que en el papel. El medio no es el mensaje, pero lo condiciona Estamos de acuerdo en que lo importante al publicar es lo que se dice, pero cualquier comunicador sabe que también es importante como se dice y el cómo, esta ligado al medio y al uso que el receptor hace del medio. La lectura en pantalla es un 25% más lenta que en papel fundamentalmente porque la calidad de los monitores es aún baja y aunque se esperan mejoras en los próximos años, la tasa de reemplazo de monitores es lenta. Los propietarios de PC son más proclives a cambiar componentes internos (discos rígidos, memoria o procesador) y dispositivos periféricos como impresoras o scanners, pero un cambio de monitor en general es un recurso extremo, aunque es fácil mostrar la influencia del monitor en la mejora de productividad en ciertos trabajos informáticos. Existe un cierto hábito de zapping que lleva al usuario a no detenerse demasiado en una página y pasar rápidamente a otras. El costo de conexión alienta esta conducta de hojear muchas páginas en el menor tiempo posible para luego leerlas off-line o imprimirlas. Sobre la base de lo que sabemos del comportamiento del usuario y del medio deberíamos escribir páginas que sean: ojeables, breves, concisas y claras, temas que trataremos en el capítulo siguiente. Ing. Marcelo H. Bosch Pág. -17-

18 PARTE II: ASPECTOS TECNICOS CAPITULO 4: PREPARACIÓN DEL CONTENIDO La estructura y el diseño de las páginas claras permitirá una rápida navegación y asimilación del contenido útil por parte del usuario. EDICIÓN DEL TEXTO DE PÁGINAS La lectura de largos textos impresos (novelas, monografías o trabajos de investigación) es secuencial y su escritura desarrolla un proceso lógico de encadenamiento de argumentos y descripciones que permitan comprender y evaluar la idea del autor. La web por el contrario no es secuencial sino aleatoria: el usuario puede abordar una estructura de información desde múltiples lugares y recorrerla de infinitas maneras a través de los vínculos vínculos y por lo tanto necesita ubicarse en dicha estructura sea cual fuera la forma en que la abordó. La percepción de dicha estructura y el diseño de las páginas ojeables, breves, concisas y claras permitirá una rápida navegación y asimilación del contenido útil por parte del usuario. Páginas ojeables Piense en aspectos de redacción y diseño que faciliten el desplazamiento rápido de la vista por la página y la retención de los conceptos clave. Algunas recomendaciones: Organice el texto con dos o tres niveles de titulares (según la complejidad y extensión). Use listas numeradas o viñetas para organizar conjuntos de elementos. Si la lista es muy larga clasifique los ítems Resalte las palabras importantes. Utilice reforzadores Saque fuera del cuerpo del texto información que no sea central Separe los párrafos En la página de Cnet (ver imagen) la columna editorial Web Shui muestra un titular (H1) Working the guide... y más abajo un titular de segundo nivel (H2) Reviewing the research.... Los párrafos son relativamente cortos, separados entre sí y se usan hipervínculos a otros artículos de la columna. Aunque la página es larga es posible una hojeada rápida de la misma por los titulares y vínculos. Ing. Marcelo H. Bosch Pág. -18-

19 Encabezado (<H1>) Separación de párrafos Vínculos a otras secciones Sub encabezado (<H2>) Ing. Marcelo H. Bosch Pág. -19-

20 Páginas breves Las páginas de navegación no deben exigir desplazamiento (scroll) y los vínculos deben ser visibles aun en monitores pequeños. Mirabilis en la Home Page the ICQ es un buen exponente de la filosofía póngalo todo aquí : más de cien opciones en una página principal que requiere varios desplazamientos hacia abajo para abarcarla por completo y que confunden hasta a los más avezados. Intente encontrar una opción allí: parece el juego de los errores. Ing. Marcelo H. Bosch Pág. -20-

21 No es recomendable superar las diez opciones por página de navegación (páginas que llevan al contenido) y para ello debe organizar el contenido en categorías jerárquicas. Las páginas de contenido son por norma más largas y el usuario es más tolerante en cuanto al desplazamiento, pero se debe balancear contenido y diseño siguiendo estas recomendaciones. Fraccione el texto en unidades lógicas de información y cree vínculos entre ellas Si es necesario cree un índice de contenido que facilite la navegación del conjunto Identifique fragmentos poco relevantes y sepárelos del texto central En ocasiones deberá redactar de nuevo el cuerpo del texto en forma resumida con vínculos al resto de los fragmentos. Utilice un esquema de pirámide invertida de manera que lo más importante quede en la parte superior de la página y luego agregue profundidad. Las páginas breves y concisas se descargan rápidamente. Páginas concisas e ideas precisas En la web se da aquello de escribir menos para comunicar más que no es otra cosa que evitar el exceso de retórica. La paciencia del usuario no lo permite según se comprueba en los tiempos promedios de permanencia en las páginas. Algunas recomendaciones: Use una idea por párrafo y no incluya demasiada información ya que muchos lectores no pasan de la primera frase. Utilice un estilo informal, salvo cuando lo hace para audiencias especiales (académicas, por ejemplo). Le ayudará a evitar retórica innecesaria. En el intento de ser conciso no pierda precisión ya que puede afectar la credibilidad de la información. El arte consiste en balancear tamaño y calidad. Además Las páginas breves y concisas se descargan rápidamente. Ing. Marcelo H. Bosch Pág. -21-

22 Lenguaje claro Haga todo lo posible para que las páginas sean comprensibles por el espectro más amplio posible de lectores. No abandone la profundidad de las ideas que quiere expresar pero no las convierta en obscuras. Sea objetivo o evite subjetividades u opiniones personales, salvo que sea ese el valor del contenido: su opinión experta. Evite lenguaje o jerga excesivamente técnica a no ser que este seguro que se dirige a una audiencia específica que lo soporta. Evite los modismos locales del lenguaje dado que el sitio es visitado desde muchos países y no solo de habla hispana. Los usuarios de otros países pueden malinterpretar las expresiones. Evite el lenguaje irónico por la misma razón, es difícil de interpretar. Evite la jerga marketinera o de vendedor de colectivo pues le quita seriedad y es rechazada por los usuarios. Consejo: después de redactar la página, pruébela. Haga que la lea otra persona que pueda darle su opinión sincera. Lo ideal es la corrección editorial, pero si no dispone de editor hágalo con un amigo. Otros textos importantes: titulos y titulares Aquí haremos una aclaración semántica: en este Manual de estilo, cuando hablamos de títulos de página nos referimos a la etiqueta (<title>) que se inserta en el código HTML de la página para que la barra de título del navegador lo muestre. En cambio, cuando hablamos de titulares nos referimos a los encabezados y subencabezados (de varios niveles) del texto, que se corresponden con las etiquetas HTML <H1> a <H6>. En el lenguaje corriente también son llamados títulos y subtítulos, por eso la aclaración. Aunque subestimados por muchos diseñadores, estos son los aspectos más importantes de la interfaz humana en páginas web así como en publicaciones impresas según se sabe desde las Ing. Marcelo H. Bosch Pág. -22-

23 investigaciones clásicas de Xerox (Xerox Publications Standards Manual). Merece que tanto diseñadores como contenidistas le presten atención a su redacción. Títulos de página Los títulos de las páginas son importantes por varias razones: 1. Aparecen en la barra de título del navegador, orientan al usuario sobre su ubicación en el espacio de información y sugieren el tema de la página. 2. Aparece como nombre en los botones Atrás y Adelante del navegador. 3. Constituye el nombre del acceso directo que el usuario agenda como favorito. 4. Constituye el nombre del acceso directo que se conserva en el historial del navegador. 5. Los motores de búsqueda presentan los resultados de consultas como una lista de títulos de las páginas encontradas. La información del título se constituye en el principal elemento de decisión del usuario para explorar los resultados. 6. Algunos algoritmos de los motores de búsqueda analizan si la palabra clave buscada está en el título de la página y otorgan puntaje a dichas páginas para mejorar la posición en el ranking de resultados. No descuide el título de las páginas. Inconvenientes por mal uso o inexistencia de títulos: 1. De no colocarse un título, el navegador lo reemplaza por el nombre del archivo de la página, lo cual es mucho más difícil de recordar. 2. Pierden utilidad los accesos directos en favoritos e historial 3. Pierden utilidad los vínculos de las páginas de resultado de los motores de búsqueda. 4. La página pierde posiciones en el ranking de resultados de búsqueda. Recomendaciones para los títulos de página: Use el nombre de la organización en los títulos de todas las páginas. Complete el título con el tema principal de la página pensando que debe tener sentido por si mismo cuando se lea fuera de contexto (como favorito por ejemplo). Deben ser diferentes para cada página de lo contrario se confunden los accesos directos mencionados. Utilice 40 a 60 caracteres y elimine los artículos Ing. Marcelo H. Bosch Pág. -23-

24 Evite palabras sin sentido y elija en cambio unas pocas palabras; ponga las más importantes a la izquierda. En la pantalla de arriba se observa el inconveniente tratado al hablar de marcos : a pesar de estar en una página interior (Cursos etc.) el título nos indica la Pagina principal. Al agendar en favoritos aparecerá dicho título y cualquier otra página que se intente agendar sobrescribirá el favorito anterior. Queda desactivada así una función importantísima del navegador que es registrar la ubicación de páginas en el universo web (cientos de millones de documentos). En la pantalla de arriba se observa una página interior (investigación) que lleva su título inequívoco y como aparece en la lista de Favoritos de la izquierda del navegador. Ing. Marcelo H. Bosch Pág. -24-

25 A continuación se presenta una serie de títulos de páginas, el grado de adecuación y mejores alternativas para que el lector haga el ejercicio de repensar los títulos de las páginas que publique. Ejemplos de títulos Bienvenido a nuestra Home Page Bienvenido al INTA Bienvenido a la página principal del INTA INTA INTA Instituto Nacional de Tecnología Agropecuaria INTA Boletín Informativo Jun 2001 INTA - Instituto de Clima y Agua INTA - Clima y Agua - Informe metereológico 10 Mar 2001 INTA Estación Experimental Balcarce INTA Balcarce - Curso Manejo de Lanares El Programa Prohuerta del INTA INTA - Programa Prohuerta Comentario Pobre Mejor Mejor Incompleto Correcto para la pág. Principal Correcto para páginas interiores Correcto para la pág. Principal Correcto para páginas interiores Correcto para la pág. Principal Correcto para páginas interiores Título inexistente Desplazar INTA a la izquierda Correcto para la pág. Principal INTA - Programa Prohuerta - Memoria 2000 Correcto para páginas interiores Tómese un tiempo para organizar el texto. Titulares de página Ya aclaramos que los titulares de una página web se corresponden con las etiquetas HTML <H1> a <H6> y sirven para organizar en forma estructurada el contenido. El tema general del contenido de la página se traduce a un titular de primer nivel (H1). El contenido de la página puede estar subdivido en temas cuyos encabezados serán de segundo nivel (H2) y estos a su vez podrían subdividirse en varios de tercer nivel (H3). Asignar etiquetas de encabezado (head) a los titulares es muy conveniente y sencillo pero requiere que el texto este estructurado, es decir con su contenido organizado en categorías jerárquicas (tema, Ing. Marcelo H. Bosch Pág. -25-

26 subtema etc.). Si el texto a publicar no se halla estructurado tómese un tiempo para hacerlo y verá que le resulta más fácil planificar el hipertexto. Para ello separe el texto en fragmentos lógicos y agrégueles un titular significativo. En la pantalla siguiente se observa un artículo sobre enfermedades de maíz. Si bien existe una estructura del texto no se ha evidenciado a través de etiquetas HTML apropiadas las jerarquías del texto: <H1> Enfermedades del Maíz <H2> Vuelco por pudrición de la raíz y el tallo <H3> Importancia Una vez asignadas las etiquetas la página toma el aspecto de la pantalla siguiente. Ing. Marcelo H. Bosch Pág. -26-

27 Allí queda clara la importancia jerárquica de los distintos componentes de texto. En una etapa posterior al enlazar la página con la hoja de estilo (CSS) correspondiente los titulares pueden visualizarse con otros formatos (fuente, color, etc.) que tornen la página más atractiva. Otro ejemplo puede verse en el artículo de la National Geographic con un titular (H1) bien destacado que atrapa la atención del lector inmediatamente y le da una idea clara sobre el tema tratado. Ing. Marcelo H. Bosch Pág. -27-

28 En el ejemplo siguiente un artículo técnico sobre cría bovina no se adapta a la lectura en pantalla por varios motivos: Texto excesivamente largo (para la pantalla) Falta de estructuración del contenido (sin titulares y subtitulares) Párrafos largos Todo lo anterior dificulta el hojeado del documento obligando al usuario a desplazarse a través de varias pantallas. El titular de la página: Algunas consideraciones básicas... no sugiere el tema del artículo, solo lo ubica temáticamente: manejo nutricional de vientres, pero no avanza sobre lo específico (restricción nutricional), el ensayo ni sobre las conclusiones. El usuario del sitio no puede decidir de antemano si le interesa la página y debe descargarla obligadamente. Es preferible anticiparle al usuario algo más sobre lo que puede encontrar si sigue leyendo y en un recorrido rápido hacerle conocer los items principales. Un mejor titular podría haber sido: Restricción nutricional de vacas al destete: una alternativa de manejo, lo cual acerca más al contenido del artículo. Ing. Marcelo H. Bosch Pág. -28-

29 Debería cambiarse también el rótulo (ancla) de acceso al artículo en la página correspondiente. En la imagen siguiente se observa la lista de artículos, en dicha página se podría agregar además del rótulo un breve comentario sobre cada artículo listado que oriente aún más al lector. Es decir que rótulos y titulares deben pensarse para lograr que el usuario no tenga dudas sobre el contenido del artículo en cuestión y así pueda decidir si es de su interés. El principal motivo para dedicarles tiempo y esfuerzo es la accesibilidad de la página. LOS TEXTOS OCULTOS DE UNA PÁGINA El lenguaje HTML incluye una serie de marcadores o etiquetas que permiten incluir en la página ciertos datos sobre si misma, es decir datos sobre los datos o información que contiene la página o lo que en la jerga informática se llama metadatos. Por eso a estas etiquetas especiales se las conoce en inglés como metatags o etiquetas meta. La información de las etiquetas meta no es visualizada por el navegador sino que permanece oculta en el código HTML al que puede accederse a través del menú Ver/Código Fuente del Explorer. Por eso pasa desapercibida para la mayoría de los usuarios y muchos programadores web las ignoran, seguramente debido al hecho que no añaden valor a sus diseños visuales o por desconocimiento sobre su utilidad. Veamos entonces cual es el objeto de incluir etiquetas meta y cuales son las posibilidades y alcance de las mismas. El principal motivo para dedicarles tiempo y esfuerzo es la accesibilidad de la página, entendiendo como tal la facilidad con que puede ser localizarla desde los buscadores, ya sea el del propio sitio o Ing. Marcelo H. Bosch Pág. -29-

30 Las páginas deben quedar bien posicionadas en un ranking de resultado de búsqueda de un motor. cualquier otro motor externo. La calidad de la información obtenida por un motor de búsqueda no solo depende de su programación interna sino también de los datos que se le brinden sobre el contenido de las páginas, datos con los que construirá sus bases de datos. Si las páginas poco informan sobre su contenido, el motor no puede hacer mucho para asignar relevancia a dichas páginas durante un proceso de búsqueda basado en palabras clave. Además de ser encontrada, la página debiera quedar bien posicionada en el orden de los resultados de la búsqueda. De poco vale que la página quede ubicada en posición 189 pues los usuarios no revisan más que un número relativamente bajo de resultados. Los motores usan diferentes técnicas para elaborar el ranking de resultados y utilizan a tal fin el contenido de las etiquetas meta. Las etiquetas META TAGs se deben colocar en la cabecera de la página entre las etiquetas correspondientes (<HEAD> y </HEAD>). A continuación daremos un ejemplo de las etiquetas que se deberían incluir en una página de contenido con información técnica agronómica. <META name="description" content="descripcion de la página aquí"> <META name="keywords" content="palabra clave 1,palabra 2,palabra3"> <META name="author" content="nombre del autor"> Por ejemplo una página con un documento técnico podría contener este encabezado: <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta http-equiv="content-language" content="es"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <meta name="microsoft Border" content="none"> <META name="description" content="informe técnico sobre el comportamiento de cultivares de Cebadilla Criolla en ensayos de fertilización NPK"> <META name="keywords" content="cebadilla Criolla, pastura, forrajeras, fertilizante, fertilización, Nitrógeno, Fósforo, Potasio, dosis, rendimiento, materia seca, variedad, variedades, foliar"> <meta name="author" content="juan Martín Zubillaga"> <title>inta - Pergamino Novedades en pasturas</title> Ing. Marcelo H. Bosch Pág. -30-

31 <link rel="stylesheet" type="text/css" href="_private/intastyle.css"> </head> Los editores de código como FrontPage incorporan automáticamente algunas etiquetas con información de lenguaje y del programa. Existen muchas otras etiquetas y parámetros para controlar algunos comportamientos e información de la página; para más información puede consultarse la bibliografía recomendada. LECTURABILIDAD Todo el esfuerzo que se haga para mejorar el índice de lecturabilidad es poco si se entiende que el tiempo de atención del usuario web es escaso y la lectura en pantalla dificultosa. El proceso de lectura en general ha sido objeto de numerosos estudios y pueden darse algunas recomendaciones que tienen mayor validez aún, para la lectura en pantalla. El índice de lecturabilidad o legibilidad disminuye cuando: Se utilizan párrafos muy largos. El ejemplo siguiente esta extraído de una página web de INTA. Durante los dos meses de trabajo destinados a esta etapa del proyecto, se trabajó con células somáticas de diferentes individuos y con diferentes características de interés tanto zootécnico como biomédico. En las trece sesiones de clonado que se llevaron a cabo durante ese período, se pusieron a fusionar un total de 819 óvulos con células somáticas. El éxito de la fusión fue muy alto puesto que se observó un 91.7% de fusiones. La etapa siguiente en la evaluación del proceso, fue la de óvulos fusionados que comenzaron la división. Es así que se observó que el 54% de estos óvulos eran embriones que habían comenzado la división celular entre las 24 y 36 hs. después de ser activados. Posteriormente, estos embriones de dos células debían seguir creciendo durante 6 días para llegar al estadio en que podían ser transferidos a las vacas receptoras. En esta etapa es en general donde se producen las mayores pérdidas ya que es muy difícil de mantener en el laboratorio condiciones de cultivo similares a las que se observan en el útero del animal vivo. A pesar de ello, a los 7 días después de la fusión se observó que un 41% de los embriones que habían comenzado la división alcanzaban el estadio deseado (llamados mórula y blastocisto) lo cual significa que un 22% de los óvulos fusionados habían llegado a ser embriones susceptibles de ser transferidos a las vacas receptoras. Esta performance general puede ser considerada excelente ya que fue similar a la obtenida en otros laboratorios del mundo que trabajan en la misma técnica desde hace varios años. Ing. Marcelo H. Bosch Pág. -31-

32 Observe el mismo texto fraccionado, sangrado, con separación de párrafos y enfatizado de palabras que atraen la atención. La tipografía utilizada (Verdana) también es más apropiada para la lectura en pantalla. Durante los dos meses de trabajo destinados a esta etapa del proyecto, se trabajó con células somáticas de diferentes individuos y con diferentes características de interés tanto zootécnico como biomédico. En las trece sesiones de clonado que se llevaron a cabo durante ese período, se pusieron a fusionar un total de 819 óvulos con células somáticas. El éxito de la fusión fue muy alto puesto que se observó un 91.7% de fusiones. La etapa siguiente en la evaluación del proceso, fue la de óvulos fusionados que comenzaron la división. Es así que se observó que el 54% de estos óvulos eran embriones que habían comenzado la división celular entre las 24 y 36 hs después de ser activados. Posteriormente, estos embriones de dos células debían seguir creciendo durante 6 días para llegar al estadio en que podían ser transferidos a las vacas receptoras. En esta etapa es en general donde se producen las mayores pérdidas ya que es muy difícil de mantener en el laboratorio condiciones de cultivo similares a las que se observan en el útero del animal vivo. A pesar de ello, a los 7 días después de la fusión se observó que un 41% de los embriones que habían comenzado la división alcanzaban el estadio deseado (llamados mórula y blastocisto) lo cual significa que un 22% de los óvulos fusionados habían llegado a ser embriones susceptibles de ser transferidos a las vacas receptoras. Esta performance general puede ser considerada excelente ya que fue similar a la obtenida en otros laboratorios del mundo que trabajan en la misma técnica desde hace varios años. Se utilizan palabras muy largas. Trate de encontrar sinónimos que simplifiquen y acorten el texto. Ing. Marcelo H. Bosch Pág. -32-

33 Se incorporan varias ideas en la misma frase. Trate de limitar los conceptos que incluye en una frase y si es necesario utilice varias frases. Se utilizan dobles negativas, por ejemplo:...nunca debe impedirse que las vaquillonas accedan a... es menos comprensible que...las vaquillonas deben acceder libremente a... Se utiliza todo en mayúscula No se alinea el texto a la izquierda Como norma pruebe sus diseños en todas las resoluciones probables de monitor. QUE SIENTE CUANDO TIENE QUE LEER UN TEXTO COMO ESTE. SI PRESTA ATENCIÓN DESCUBRIRA QUE LECTURA EN MAYÚSCULA ES MAS LENTA (UN 10 %) Y CANSADORA. EN EL CORREO ELECTRÓNICO, POR EJEMPLO, SE CONSIDERA UNA DESCORTESÍA QUE VA CONTRA LAS REGLAS DE NETIQUETTE. ADEMÁS LA ALINEACIÓN CENTRADA INTERFIERE CON EL MOVIMIENTO NATURAL DE LA VISTA A LA IZQUIERDA CADA VEZ QUE TERMINA UNA LINEA. En las páginas web además se debe cuidar el tamaño de la fuente, ya que los tamaños muy pequeños se visualizan mal en pantalla y en ese caso es preferible usar fuentes sans-serif. Como norma pruebe sus diseños en todas las resoluciones probables de monitor y utilice tamaños de fuente porcentuales para dejar la posibilidad abierta al usuario de cambiar el tamaño de texto en el navegador. Ing. Marcelo H. Bosch Pág. -33-

34 EL CONTEXTO DE LA PÁGINA En ocasiones se accede a una página en particular desde un motor de búsqueda, por lo tanto se desconoce la ubicación de la misma en la jerarquía de contenidos, salvo que se ofrezca la información de contexto en dicha página. Veamos un ejemplo. Preste atención al contexto de la página. La pantalla de arriba muestra una parte de los resultados de una búsqueda por la palabra clave trigo. El 7º resultado indica Adelantos Producción Vegetal que surge del título (title) de la página. Si observamos la página en cuestión en la imagen siguiente, notamos la falta de contexto: no sabemos a que unidad, proyecto, publicación o autor pertenece; no se indica la fecha del documento (de máxima importancia en documentos técnicos) ni como contactarse para obtener más información. Al no existir vínculos a la estructura, el usuario tampoco tiene forma de navegar por información relacionada. Se debe entonces prestar atención al contexto de todas las páginas, dando toda la información relacionada que transforme simples datos en información útil. La inclusión de la barra de navegación en la parte superior de las páginas de INTA apunta al mismo concepto. Ing. Marcelo H. Bosch Pág. -34-

35 IMÁGENES PARA LA WEB Cuando usar imágenes Las imágenes pueden comunicar mensajes de una manera que no es posible hacer por medio de palabras. Es posible describir en un texto la belleza del paisaje pero cada lector se hará una imagen mental diferente del mismo. En páginas comerciales se precisan las fotografías de los productos para que se los identifique correctamente y por su efecto vendedor. En documentos técnicos, académicos o educativos suele ser necesario acompañar un relato con imágenes que demuestren lo que se afirma de manera contundente o que clarifiquen conceptos demasiado abstractos. En otros casos, las imágenes tienen un sentido estético y decorativo. Pero en muchos casos las imágenes que se encuentran en páginas Web no tienen ninguno de los dos sentidos mencionados y se incluyen simplemente por que hay espacio y este no se cobra. Sin embargo, Ing. Marcelo H. Bosch Pág. -35-

36 no es del todo gratis pues el costo de descarga e impresión lo absorbe el usuario. Las imágenes que no cumplen una función significativa en la página deben eliminarse por tres razones: 1. Incrementan el tiempo de descarga de la página. 2. Distraen la atención. 3. Interfieren con el mensaje. Deben evitarse las imágenes en las páginas de navegación. Antes de incluir una imagen en la página pregúntese: para qué, después de incluir la imagen en la página pregúntese: agregó valor? Los usuarios desean ver fotografías sobre temas específicos e incluso están dispuestos a soportar los prolongados tiempos de descargas de grandes fotos de calidad si son de su interés, por eso deben evitarse las imágenes en las páginas de navegación (alto nivel en la jerarquía) dado que en ese momento aún no ha seleccionado un tema concreto. En esta etapa de su recorrido la velocidad es la máxima prioridad. Una vez que se encuentra en páginas de contenido (por ejemplo, un artículo sobre enfermedades del trigo) las imágenes agregan valor al documento. Pero mantenga un ojo en el cronómetro! Escalado de imágenes Una forma de superar la tensión que siempre existe entre el tamaño total de la página (en bytes) y la necesidad de incluir fotografías es utilizar miniaturas enlazadas a las imágenes a tamaño completo. Esta técnica tiene la ventaja de no demorar el conjunto de la página al mismo tiempo que se enriquece visualmente. Por otra parte el detalle de las fotografías se conserva para quien realmente este interesado en verla. Las tres técnicas para crear miniaturas de fotos son: el recorte, la reducción de resolución y la compresión. Las tres técnicas pueden combinarse para obtener una miniatura que sea de tamaño mínimo conservando sentido. Si recorta una fotografía de 70 Kb, obteniendo una porción de 32% del original, y luego reduce el tamaño al 32% obtendrá una fotografía del 10% del tamaño original o sea de 7Kb. El formato jpg admite diferentes grados de compresión. Ud. puede ensayar diferentes valores de compresión al guardar el archivo de la miniatura observando la calidad obtenida. Las siguientes imágenes ilustran las posibilidades mencionadas y los tamaños de archivos obtenidos. Ing. Marcelo H. Bosch Pág. -36-

37 La imagen original 178 Kb Recorte 25Kb Recorte y reducción de tamaño 8.6 Kb Idem comprimida 6 Kb Ing. Marcelo H. Bosch Pág. -37-

38 El récord Un mal ejemplo que bien podría aparecer en el libro de récords de Guinnes es la página que presenta un imagen escaneada del periódico con la publicidad de venta de autos usados que mide bytes. Si, leyó bien, 1 MB o unos 9 minutos de tiempo de descarga. MULTIMEDIA: SONIDO Y VIDEO PARA LA WEB El uso de multimedia en la web entusiasma a diseñadores y contenidistas por igual pero también debe someterse a las pautas generales que venimos sosteniendo en materia de velocidad de descarga, distracciones etc. Se debe considerar que no se puede anticipar el gusto de los usuarios por lo cual la inclusión de música corre el riesgo de disgustar. Pero fundamentalmente su utilización debe cumplir una función clara de agregar valor al contenido. De lo contrario es preferible descartar el recurso. En determinado tipo de contenidos, por ejemplo los educativos, se torna necesario incluir este tipo de material, pero debe analizarse la Ing. Marcelo H. Bosch Pág. -38-

39 posibilidad a la luz de los destinatarios y los recursos de hardware y software disponibles, tanto en el cliente como en el servidor. De lo contrario se caerá en páginas excesivamente lentas que desalentarán su uso. Animaciones El movimiento, es sabido, atrae la atención y los diseños de página tratan de explotar dicha capacidad aunque muchas veces sin medir las consecuencias para el conjunto visual y su principal objetivo: comunicar un mensaje determinado. Por ejemplo, si en la parte inferior izquierda de una página se coloca la imagen animada de un sobre para representar un vínculo de correo electrónico, la visión periférica distraerá los ojos del lector del texto principal (lo realmente importante) hacia un elemento secundario. Obsérvese esta pantalla: Nótese que el buzón (animado) no agrega ningún mensaje al vínculo de a su derecha y consume el valioso espacio superior de la pantalla. Tal vínculo debería estar en la parte inferior de la pantalla incrustado en un texto que explique que información se puede solicitar a esa dirección. Hay diferentes tecnologías disponibles para mover texto o imágenes desde las más sencillas como los Gif animados hasta los archivos de Shockwave o Flash de Macromedia pasando por applets de Java. La elección de una u otra debe obedecer a los criterios de : 1. Compatibilidad con los navegadores 2. Necesidad de utilización de plug-ins 3. Tamaño de los archivos generados 4. Posibilidad de errores de código Ing. Marcelo H. Bosch Pág. -39-

40 5. Capacidad para lograr los efectos deseados Cuándo conviene usar animaciones? 1. Para mostrar la sucesión de diferentes estados, por ejemplo: el desplazamiento de los continentes o las fases de división celular. 2. Clarificar el significado de íconos que puedan ser mal interpretados. 3. Para comunicar más mensajes en la misma zona de la pantalla, por ejemplo, mapas de imágenes que cambien al pasar el puntero por cada área. 4. Mejorar la interpretación de estructuras tridimensionales. 5. Atraer la atención hacia un elemento en particular, por ejemplo novedades. En este caso se deben evitar las animaciones continuas, más bien programar uno o dos bucles y después detenerla. Valen también las consideraciones hechas sobre el uso de imágenes en el apartado Cuando usar imágenes. Sonido El audio proporciona una dimensión adicional al uso de la pantalla. Puede utilizarse para agregar comentarios, complementar la interfaz de usuario, reproducir música o sonidos. El sonido de calidad mejora la experiencia del usuario por lo que, tomada la decisión de incorporarlo, vale la pena dedicar esfuerzo en su preparación o consultar un profesional que balancee la calidad con el tamaño del archivo y elija el codificador adecuado. Recomendaciones: No utilice sonidos como fondo de página salvo que tenga un sentido particular y en páginas de contenido. De usar sonidos de fondo, indique uno o dos bucles de reproducción, en vez de ejecución continua. Si utiliza descarga de archivos, indique el tiempo de descarga aproximado y el reproductor de audio necesario. En el rótulo de descarga, indique claramente de que se trata el sonido. Ing. Marcelo H. Bosch Pág. -40-

41 Puede complementar sus diseños web editando Cds con contenido multimedia. Video Si bien la utilización de video tiene muchas ventajas desde comerciales hasta educativas su incorporación a la web esta limitada actualmente en nuestro país por la disponibilidad de ancho de banda. Su uso debe limitarse a casos excepcionales y preferentemente en las porciones de la red donde la velocidad este asegurada, por ejemplo, la Intranet central. La producción de videos digitales es una especialidad y se debería consultar a un profesional con experiencia en el tema antes de embarcarse en alguna iniciativa de este tipo. No es recomendable agregar fragmentos de video de más de un minuto de duración, superado ese tiempo debería subdividirse el mismo. Si esta pensando en usar masivamente video, por ejemplo en actividades de formación, evalué la edición de un CD Rom que contenga el video digitalizado y que complemente los contenidos Web. Al igual que en el apartado anterior en el rótulo de descarga de archivos de video indique claramente de qué se trata el fragmento y si es posible incorpore una pequeña fotografía de alguna escena del mismo. La evolución de las tecnologías de compresión, de streamimg, servidores más potentes y mayor ancho de banda irán mejorando las posibilidades de utilización de video on-line. Ing. Marcelo H. Bosch Pág. -41-

42 CAPITULO 5: DISEÑO DE PÁGINAS DISEÑO INDEPENDIENTE DE LOS DISPOSITIVOS DE VISUALIZACIÓN Una página web puede ser visualizada a través de un navegador en dispositivos tan variados como monitores de 14 o 21, pequeñas computadoras de mano (Palm PC) y hasta en pantallas de teléfonos celulares. La cantidad de pixeles que dispone un usuario para visualizar una página varía además en función de la resolución de su pantalla con valores tan dispersos como 1280 x 1024 en monitores grandes hasta 180 x 320 en algunas Palm. Los tamaños fijos de fuente ocasionan problemas. Por otra parte, el usuario puede controlar el tamaño de visualización del texto alterando la cantidad y disposición del los elementos de la página. Los tamaños fijos de fuentes y tablas ocasionan problemas de visualización y de impresión. El desafío, entonces, es lograr páginas que se vean bien en diferentes contextos. SI NO Crear diseños adaptables a diferentes tamaños de pantalla.. Diseños para una determinada configuración de monitor. Ej: 800 x 600 Recomendaciones: Utilizar tamaños de fuente variables: porcentual o em. Utilizar tamaño de tablas porcentuales. Testear los diseños en diferentes pantallas y con distintos tamaños de fuentes. Probar la impresión. Ing. Marcelo H. Bosch Pág. -42-

43 LA UTILIZACIÓN DEL ESPACIO Los usuarios acceden a páginas web para obtener información relevante (contenido) por lo tanto, el espacio debe ser utilizado mayoritariamente con ese fin. Recomendaciones: El contenido debe abarcar entre el 50 y el 80% del espacio disponible (tener en cuenta el espacio que utiliza el navegador).la barra de navegación debe mantenerse por debajo del 20 % del espacio. El uso de gráficos debe limitarse y evitar aquellos que comunican poco y ocupan mucho. Los espacios en blanco pueden usarse para agrupar el contenido y evitar los diseños muy compactos y con demasiadas opciones. Observe la distribución del espacio en esta página y calcule el % destinado a contenido (sombreada en celeste y punteada en rojo). Fíjese también el exceso de elementos de navegación: marco izquierdo y barra superior en forma de botones excesivamente grandes. Ing. Marcelo H. Bosch Pág. -43-

44 Un estudio demostró la alta correlación entre cantidad de visitas y rapidez de descarga. 10 segundos es el tiempo máximo para mantener la atención del usuario. EL TIEMPO DE DESCARGA Time is money El tiempo es dinero reza un proverbio inglés y en la Web podríamos afirmar que es aún más valioso. Los estudios desde 1994 a esta parte demuestran que los usuarios demandan más y más velocidad. En las encuestas los usuarios se quejan de este aspecto mucho más que de cualquier otro por lo que se concluye que los usuarios prefieren sitios rápidos antes que atractivos (muy pocos se quejan de la pobreza visual ). Un estudio de Jacob Nielsen en 1999 comparando los sitios más visitados de la web contra los sitios de las corporaciones más grandes de EEUU demostró la alta correlación entre cantidad de visitas y rapidez de descarga. En los sitios web más visitados las páginas tenían un promedio de 8 segundos de tiempo de descarga mientras que las páginas de los sitios de las grandes corporaciones descargaban en promedio en 19 segundos. La tasa de abandono de páginas (antes que termine de descargarse) también se incrementa notablemente cuando se supera el límite de los diez segundos, comportamiento que se corrobora a nivel de servidor analizando las estadísticas de visitas y permanencia en las páginas especialmente en la principal. Hemos visto en ciertos períodos que un 60 % de las visitas contabilizadas en la web de INTA, son en la página principal lo cual indica que muchos usuarios no siguen navegando. Páginas veloces Con el objetivo de hacer que la experiencia del usuario sea lo más exitosa posible la velocidad de las páginas será el criterio más importante de diseño de las páginas web. Los estudios de varias décadas sobre interfaces humanas indican que 10 segundos es el tiempo máximo para mantener la atención del usuario centrada en la tarea, por lo tanto el objetivo será que todas las páginas estén por debajo de los diez segundos de tiempo de descarga. Para lograr esto el tamaño máximo de las páginas debe ser de 20 Kb (a una tasa promedio de descarga 2 Kb/seg) sumando todos los componentes de la misma (gráficos, plug-ins, objetos incrustados etc.). NO SI Diseñar páginas largas con gráficos pesados, animaciones y componentes. Utilizar el hipertexto para crear conjuntos de páginas relacionadas discretas y ágiles. Ing. Marcelo H. Bosch Pág. -44-

45 Recomendaciones para disminuir los tiempos de descarga: Fraccione los documentos largos en unidades de información con sentido. Depure el código HTML. Vea el capítulo X Limite y optimice los gráficos. Vea el capítulo X Los hipervínculos a directorios deben incluir la última barra para evitar retardo por redireccionamiento. Ej: Evite tablas complejas y anidadas y de ser necesario divida la tabla en varias más simples. Diseñe las páginas con la información más importante arriba (texto) y desplace las imágenes hacia abajo. Contabilice el tamaño de todos los componentes de la página, imágenes, botones, applets, páginas incrustadas etc. pues lo que importa es la suma total de Kilobytes. Los hipervínculos expanden el espacio de información. Documentos muy largos Cuando la página de contenido aún optimizada sea de excesivo tamaño (que excedan 10 segundos) o contenga muchas imágenes, debe indicar el tiempo de descarga aproximado y dejar libertad al usuario para que tome la decisión de descargarla. El mismo criterio debe usarse siempre para documentos en otros formatos: pdf, zip, word, excel etc. LOS HIPERVÍNCULOS Los vínculos expanden el espacio de información permitiendo relacionar información más allá de la estructura del sitio. Pueden relacionarse páginas con otras similares o con noticias de actualidad sobre el tema o con sitios externos. Las posibilidades son infinitas y un uso criterioso de los mismos le dará valor agregado al sitio. Aquí es donde Ud. puede construir un verdadero hipertexto, es decir tejer las relaciones entre conceptos que residen en páginas muy distantes entre sí físicamente pero muy cercanas conceptualmente. Por otra parte permite no reinventar la pólvora reutilizando e integrando los esfuerzos de otros y liberando tiempo, energía y creatividad para nuevos desarrollos. La receta es: si ya existe, solo utilícelo! Ing. Marcelo H. Bosch Pág. -45-

46 Textos de hipervínculos (ancla) Se refiere a la porción de texto que se activa con el clic del mouse. Los textos de los hipervínculos deben ser significativos y representar fielmente la información que encontrará el usuario al seguir el vínculo y por que debe dejar el contexto actual. La idea es que el usuario no tenga que adivinar sino que pueda decidir antes de hacer clic. Dedique tiempo a pensar en la redacción de los hipervínculos y sus títulos (apartado siguiente) y su coherencia con el resto del sistema de rotulado: títulos y descripciones de páginas etc. Recomendaciones: Evitar vínculos no descriptivos del tipo Haga clic aquí o Nota siguiente pues no revela contenido. Ejemplo correcto: Más información sobre producción de soja en el NOA. Ejemplos incorrectos: Para más información sobre soja haga clic aquí. Más información. (muy impreciso) El ancla de hipertexto no debe contener más de cuatro palabras pero si fuera necesario puede ampliarse la descripción como texto normal. Por ejemplo: Otros proyectos institucionales sobre mejoramiento animal en Balcarce. Títulos de vínculos El atributo TITLE en los hipervínculos permiten desplegar una etiqueta de pantalla al pasar el mouse sobre él, otorgando mayor contexto sin alterar el texto del hipervínculo. Por ejemplo: El presidente del INTA Ing. Hugo Cetrángolo firmó un convenio... El código del hipervínculo podría ser : <a href=" title="ing. Cetrángolo">Hugo Cetrángolo</a> y presentará el siguiente aspecto al pasar el mouse sobre él: Ing. Marcelo H. Bosch Pág. -46-

47 Recomendaciones: La longitud de los títulos de hipervínculos no deben exceder los 70 caracteres. Debe agregar información de lo contrario no se justifica su uso. Por ejemplo (incorrecto): <a href=" title="ing. Cetrángolo">Hugo Cetrángolo</a> Existe correlacion positiva entre uso de colores estándar y usabilidad. Colores de vínculos Los colores estándar que utilizan los navegadores para diferenciar a los vínculos ya visitados del los todavía no visitados deben respetarse por que la mayor parte de los usuarios los reconoce y les ayuda en la navegación. En pruebas de usabilidad se ha encontrado correlación positiva entre uso de colores estándar y porcentaje de éxito en las tareas. Destino de los vínculos Los vínculos deben abrirse en la misma ventana salvo excepciones muy justificadas. La apertura de nuevas ventanas está totalmente desaconsejada por diversas razones, básicamente por que confunden a los usuarios, alteran el funcionamiento del botón Atrás y muchos usuarios no observan que se abrió otra ventana. Constituye además un uso no autorizado de los recursos de la máquina del usuario. Vínculos personales Cuando se usa el nombre de una persona en un hipervínculo se recomienda que la página de destino sea una página personal que puede incluir un curriculum abreviado, vínculos a otras actividades o publicaciones, las formas de contacto y quizás una foto. Si lo que se desea es crear un vínculo de tipo mailto (hipervínculo que dispara el envío de correo electrónico) es preferible usar como ancla de texto la propia dirección de . Por ejemplo: Biblioteca y Archivo Documental - INTA Central biblioteca@inta.gov.ar (vínculo mailto) Bibliotecaria: Gabriela L. De Pedro (vínculo a su página personal) Vínculos externos Los vínculos externos (aquellos que llevan al usuario fuera de ) agregan valor al sitio si se crean de manera Ing. Marcelo H. Bosch Pág. -47-

48 contextualizada. De poco vale una lista de Sitios de interés sin comentar y sin actualizar. Recomendaciones: Siga las pautas generales para los vínculos. Seleccione los vínculos con criterio y solo si agregan valor al texto fuente. En los vínculos contextuales no linkee a la página principal de un sitio sino a la página específica de referencia. Así evitará el esfuerzo de búsqueda una vez en el sitio. Por ejemplo: El INTA firmó un convenio con la Facultad de Agronomía por el cual se otorgan 4 becas para el Programa de Agronegocios de dicha institución. La URL de destino no debe ser sino Piense en el mantenimiento! Si decide crear una lista de vínculos piense en su actualización. Es sumamente frustrante seguir un vínculo recomendado para encontrar un mensaje de error del servidor. Al crear una sección de Sitios recomendados presupueste el tiempo que le llevará mantenerla vigente. Un pequeño comentario acerca del sitio agrega valor editorial a su lista y ayuda a la decisión del usuario. Si los vínculos de la lista son muchos clasifíquelos en forma consistente con la forma de organización de información del INTA. Consulte los directorios de información. En vez de incluir una lista extensa de vínculos, identifique unos pocos portales verticales (temáticos) que posean material de calidad. Los usuarios no pueden revisar mucha cantidad de vínculos, pero si recuerdan unos pocos de gran valor. Acompañe los vínculos externos con el logo que los representa Los vínculos entrantes A priori no se puede hacer mucho para controlar los vínculos que apuntan a nuestro sitio excepto por la estabilidad de las URLs y la calidad del contenido. 1. Los usuarios externos que sigan un vínculo para descubrir que la página caducó se llevarán una mala impresión del sitio en lo que a credibilidad se refiere. 2. Debe prestarse especial atención a las páginas de noticias o novedades y nombrarlas con visión de futuro. Por ejemplo: presenta el problema que dicha página cambia permanentemente y el Ing. Marcelo H. Bosch Pág. -48-

49 contenido debe pasarse a otra página o perderse. representa una manera clara de identificar los archivos por fecha y la URLs no tiene por que cambiar luego. 3. En cuanto a la calidad, además de todas las consideraciones contenidas en este manual, el centrado de las páginas en temas específicos ayuda a que el ancla del hipervínculo de salida sea adecuado. Es difícil crear un buen rótulo de hipervínculo si la página destino contiene una variedad de temas. MARCOS O FRAMES Salvo casos muy especiales y debidamente fundamentados para el resto de los subsitios de INTA la recomendación es categórica. No usar marcos. La página web unifica la visión de pantalla del usuario, la forma en que se organiza la información, se almacena, se explora y se recupera. El uso de marcos rompe este esquema concebido en el diseño original de la Web. Problemas con los marcos: Trate por todos los medios de no usar marcos (frames). 1. La dirección URL es la del frameset (archivo que contiene información sobre el conjunto de marcos utilizados) en vez de la página de contenido. 2. Dejan de funcionar los marcadores: favoritos, historial, copiado de URLs y pegado en otros documentos o s. 3. Lo anterior impide la difusión boca a boca de las URLs. 4. Roban espacio valioso de pantalla a expensas de contenido máxime en monitores de baja resolución y tamaño. 5. Se complica el proceso de impresión. 6. Confunden a los motores de búsqueda en la creación de índices. 7. Las páginas externas vistas dentro de un marco se ven diferentes al diseño original. 8. Si la página de destino también esta diseñada con marcos el problema de usabilidad se agrava. Ing. Marcelo H. Bosch Pág. -49-

50 Obsérvese que el título de la página y la URL ( corresponden a la página principal a pesar de estar en una página interna de bibliotecas. Recomendación: Antes de organizar su sitio con marcos piénselo dos veces, luego vuelva a pensarlo y ante la dudad diga NO. Encuentre alguna otra forma ingeniosa para hacer lo que pretende sin caer en los marcos. Casos especiales En una página larga con vínculos a marcadores de la misma página o a otras páginas de contenido similar. Por ejemplo, un índice alfabético con un marco horizontal que contenga las letras del alfabeto como vínculos a partes o a páginas del índice. LA IMPRESIÓN Los navegadores fueron diseñados para visualizar documentos en pantalla y sus capacidades para el manejo de la impresión son actualmente muy limitadas, sin embargo la mayoría de los usuarios imprimen las páginas (de contenido) que les interesan lo cual requiere que se preste atención al aspecto de las mismas una vez impresas. Es muy común observar páginas impresas con un par de centímetros del lado derecho cortado, debido a que el ancho de la tabla que contiene el texto excede al de la página impresa. Recomendaciones: Ing. Marcelo H. Bosch Pág. -50-

51 Además de observar la página en la pantalla, pruebe imprimiéndola en papel carta y A4 y cuide que no se pierda nada. Cree y vincule versiones imprimibles de los documentos más extensos o que se hayan dividido en varias páginas. Esto disminuirá el trabajo de impresión y derroche de papel. En la versión para impresión puede manejar otros márgenes, espaciados de párrafos y tipografías que considere más adecuadas. La versión imprimible puede también ser realizada en formato.pdf o.doc y debe aclararse el formato en el vínculo, así como su tamaño, tiempo de descarga estimada y software necesario para utilizarlo. Ing. Marcelo H. Bosch Pág. -51-

52 CAPÍTULO 6: LA CODIFICACIÓN Este capítulo será de mucha utilidad para aquellos que tienen nociones de HTML. Si a Ud. le asusta todo lo que tiene que ver con lenguajes de programación igualmente le sugiero que le de una lectura rápida, lo que le permitirá adquirir algunos conceptos básicos que utilizará luego cuando use editores de páginas web, aún sin escribir una línea de código. El lenguaje HTML se basó originalmente en la codificación del significado de la información. CODIFICACIÓN SEMANTICA Con el objeto de que la web fuera universal, el lenguaje de hipertexto HTML se basó originalmente en la codificación del significado de la información (codificación semántica) y no en su formato. Mediante etiquetas se marca un bloque de texto y se le asigna un significado particular, por ejemplo el encabezado de una página se marca como <H1>, el subencabezado como <H2> y así sucesivamente hasta <H6>. La sintaxis general del marcado de texto indica que el bloque de texto debe delimitarse por un marcador de inicio y un marcador de cierre, ambos a su vez encerrados entre signos menor y mayor; además el de cierre lleva una barra / antes del nombre del marcador. En síntesis: <marcador>bloque de texto a marcar</marcador> Por ejemplo: <H1>La fotosíntesis en cultivos de verano</h1> <p>un enfoque productivo</p> <H2>Bioquímica de la fotosíntesis</h2> <p>la estructura de las células...</p> En el bloque anterior tenemos un marcador H1 que representa el título del trabajo, dos marcadores <p> que representa párrafos normales y un marcador <H2> que representa un subtítulo o encabezado de segundo nivel. De manera estándar este bloque html se verá en un navegador, como el Internet Explorer, en este formato: Ing. Marcelo H. Bosch Pág. -52-

53 La fotosíntesis en cultivos de verano Un enfoque productivo Bioquímica de la fotosíntesis La estructura de las células... El texto encerrado entre estos marcadores es presentado en la pantalla por los navegadores de una manera estándar, por ejemplo para H1 el texto se muestra en tamaño 24 y negrita, pero otros formatos adicionales pueden ser establecidos por reglas de estilo (CSS) como se verá más adelante. La pregunta de muchos es Por que no aplicar directamente dichos formatos al texto del encabezado en vez de usar H1? Sobre todo teniendo en cuenta que con los programas de edición resulta muy sencillo hacerlo. Razones para utilizar codificación semántica: 1. La codificación semántica es interpretada por todos los navegadores independientemente de la plataforma de hardware y software en la que corren. 2. Es más rápido y sencillo asignar un estilo de Encabezado a un bloque de texto que aplicarle varios formatos. 3. El código HTML resultante es más limpio lo cual aligera las páginas web y facilita su revisión y depuración. Por ejemplo: <h1>estación Experimental Balcarce</h1> es más simple que: <p><font size="5"><b><i>estación Experimental Balcarce</i></b> </font></p> 4. En el ejemplo anterior el segundo método de codificar provoca pérdida del significado del texto, solo indica que va en tamaño 5, negrita e itálica, pero no se puede saber que se trata de un título. 5. Si todos los documentos usan marcadores estándar, su interpretación es más fácil pues el usuario se acostumbra a relacionar determinados formatos con sus correspondientes significados; en cambio cuando un subtítulo se presenta de varias maneras diferentes, se pierde la idea de su significado. Ing. Marcelo H. Bosch Pág. -53-

54 6. Existen lectores de pantalla para no-videntes que reconocen los marcadores estándar HTML. Algunos países han elaborados normas para proteger a las personas con discapacidades como el Americans with Disabilities Act en EEUU que indica que todas las iniciativas de organismos de gobierno en el área de tecnologías de información deben ser accesibles para todos. 7. Los formatos de etiquetas HTML se pueden controlar y extender mediante el uso de hojas de estilo en cascada CSS, tema que trataremos más adelante y que resuelve muchos de los desafíos de diseño de páginas. 8. El mantenimiento y rediseño de las páginas y sitios enteros se reduce enormemente al usar hojas de estilos en cascada, en combinación con los marcadores estándar HTML. Por ejemplo: podemos redefinir (declarar) el estilo del encabezado nivel 1 (<H1>) para que se presente con un tamaño, color, alineación, interlineado y otros aspectos diferentes del estándar. Esto implica crear o modificar una sola línea de código que afecta a todos los marcadores H1 de todas las páginas del sitio. Vea la sección de hojas de estilo. 9. A la inversa, si se ha usado codificación basada en formato, el rediseño de sitios implica un trabajo gigantesco de reemplazo de código. Esto sucede también cuando se copia y pega texto de otras aplicaciones como Microsoft Word. Truco: Si debe utilizar texto de otras aplicaciones use Pegado especial, péguelo como texto sin formato y luego complete el trabajo asignando los estilos necesarios. 10. En un futuro no muy lejano las páginas podrán vincularse a dos o más hojas de estilos diseñadas para diferentes dispositivos (PCs, Palms, Web TV etc.) y el navegador elegirá la más conveniente. 11. Los datos pueden sobrevivir en la Web por muchos años. Más que lo que duran los lenguajes y las versiones de software y mucho más que el hardware. Es necesario que los datos (contenido estructurado) y su formato estén lo más separado posible. El Lenguaje de marcado de hipertexto (Hypertext Marked Language) HTML ha ido evolucionando de la mano de los esfuerzos de las grandes casas de software, especialmente Netscape y Microsoft y de la Web Consortium que trata de imponer estándares y limitar las diferencias que las compañías introducen al código original. La batalla comercial entre ambas empresas por captar las preferencias de los Ing. Marcelo H. Bosch Pág. -54-

55 Web Consortium trata de imponer estándares y limitar las diferencias que las compañías introducen al código HTML original. usuarios ha provocado un problema de diseño importante: algunos marcadores HTML (no estándar) no son soportados por el navegador de la competencia. El diseñador entonces se enfrenta al dilema de elegir para que público realiza su trabajo: para usuarios de Explorer o para usuarios de Netscape. La lógica indica que hay que diseñar para todo el mundo y para ello se ha recurrido a distintas soluciones hasta el punto de tener que diseñar dos versiones de la misma página para que sea vista adecuadamente por los dos segmentos. Algunos estudios indican que el 25% del tiempo de diseño se emplea en resolver dicha situación lo cual obviamente se refleja en los costos y duración de los proyectos. Aquí predicamos el uso de un lenguaje universal mediante el uso de marcadores HTML estándar que son soportados por la mayoría de los navegadores, complementado por la tecnología CSS (Cascading style Sheets). Se puede acceder a ambas especificaciones de lenguaje en el sitio del Web Consortium ( Es necesario aclarar que el Web Estándar Project no ha logrado consenso aún en algunas especificaciones y que estas evolucionan permanentemente por lo que se hace necesario monitorear el desarrollo de los lenguajes, los estándares y los modelos. En este manual indicaremos cuales son los marcadores HTML estándar que se pueden utilizar con seguridad y indicaremos cuales son los marcadores que no se deben usar por no ser estándar o estar desaconsejados por el Web Consortium por atentar contra la codificación semántica. El aspecto (formato) final de cada marcador se dejará en manos de la hoja de estilo oficial del INTA que incluirá estilos preparados para los usos más frecuentes y que podrá ser ampliada conforme se adquiera el nivel de capacitación necesario para utilizarlo. Cuando todos los documentos del sitio estén codificados de esta manera, un cambio de diseño se podrá aplicar globalmente cambiando algunas líneas de código en la hoja de estilo. En forma automática todas las páginas del sitio reflejarán dicho cambio. Que capacidad de trabajo y cuanto ahorro de recursos! Nota Técnica: Los programadores avanzados y expertos disponen de herramientas adicionales como el lenguaje de guiones (scripts) y el Modelo de Objeto de Documento (DOM) que permiten junto al HTML y CSS crear contenido dinámico en las páginas, también llamado DHTML o HTML dinámico. Otro estándar que asoma en el horizonte es el XML o Extensible Marked Language que busca resolver el problema de la catalogación de documentos para que sean fáciles de encontrar por los motores de búsqueda y fáciles de leer. Para ello separa el contenido del formato mediante el empleo de hojas de estilo. Como desventaja, por el momento, tenemos que los navegadores no lo soportan totalmente y es un lenguaje más duro que requiere cierto entrenamiento antes de su utilización segura. Ing. Marcelo H. Bosch Pág. -55-

56 LENGUAJE HTML 4.0 Reglas de sintaxis Ya dijimos que el lenguaje HTML se basa en marcadores o etiquetas que indican que tipo de texto encierran y se relacionan con un formato determinado de manera estándar pero modificable a través de especificaciones en hojas de estilo CSS. La sintaxis básica es: <marcador>bloque de texto a marcar</marcador> a lo que en algunos casos debe agregarse los atributos de marcadores o etiquetas que son opciones o variaciones adicionales. La sintaxis en ese caso queda así: <marcador atributo>bloque de texto a marcar</marcador> A su vez los atributos pueden disponer de valores o medidas y estas se declaran entre comillas detrás de un signo igual: <marcador atributo= valor >Bloque de texto a marcar</marcador> Ejemplo: <font size= 3 >Bloque de texto a marcar</font> Aquí la etiqueta font lleva un atributo size a un valor de 3. Aunque los navegadores reconocen muchas etiquetas del lenguaje HTML el Web Consortium desaconseja el uso de un conjunto de ellas, como la etiqueta font del ejemplo anterior y recomienda el control del formato de los elementos de la página mediante las hojas de estilo. Anidamiento de etiquetas En ciertos casos es necesario combinar etiquetas para lograr efectos diferentes. Si quisiera lograr este efecto: El gran cañon del Colorado Debería codificarse como: Ing. Marcelo H. Bosch Pág. -56-

57 <h1>el gran cañon del <font color="#ff0000">colorado</font></h1> En el ejemplo anterior la etiqueta H1 contiene a la etiqueta font. Note el orden de cierre de las etiquetas: de adentro hacia fuera o dicho en forma gráfica las líneas que conectan apertura y cierre no deben solaparse. Otro detalle importante es que las etiquetas de bloque pueden contener etiquetas incrustadas, pero no a la inversa. Etiquetas de bloque son aquellas que afectan a párrafos completos e incluyen un salto de línea automático. Por ejemplo: H1, P, BR, UL y TABLE. Etiquetas incrustadas son aquellas que afectan a cadenas de caracteres y no comienzan en una nueva línea. Por ejemplo: EM, B e IMG. Para una lista completa de etiquetas HTML consulte la bibliografía y sitios de Internet recomendados. UNA PÁGINA AL ALCANCE DE TODOS No se requiere a un experto para crear una página Web, si se tiene claro la estructura del contenido y las limitantes de la pantalla como se comentó en el Capítulo 4. Básicamente una página web es un archivo de texto y por lo tanto puede crearse con una herramienta tan sencilla como un Bloc de notas de Windows. También puede aprovechar texto que ya tenga tipeado en su procesador de texto, con la precaución de que al copiar y pegar no debe trasladar los formatos del texto del procesador. Para ello debe utilizar el comando Pegado especial y elegir la opción Texto sin formato. Debe tener en claro la jerarquía de los textos (encabezados, subencabezados, las listas con viñetas o numeradas) y si lleva alguna imagen deberá tener el archivo ya preparado para insertar. Vamos a desarrollar el código HTML de un documento ya escrito en un procesador de textos y que se muestra a continuación: Ing. Marcelo H. Bosch Pág. -57-

58 Estudios realizados Informe de Avance Agronomía El cultivo de la papa Se avanzó en el conocimiento de la aptitud semillera de áreas no exploradas anteriormente y se ensayó la optimización de técnicas de riego para las diferentes categorías de semilla de los cultivares utilizados. Se desarrollaron métodos más eficientes para la micropropagación de plántulas y para la producción de minitubérculos. Además, se puso en funcionamiento el Laboratorio de Genética Molecular Aplicada, lográndose la identificación de variedades de papa y se mejoraron las técnicas de muestreo de suelo para la estimación de nematodos. Distribución de nematodos Se continuó con el estudio de la distribución de los nematodos cuarentenarios incluídos en las listas A1 y A2 del COSAVE (1997 Germoplasma Se coleccionó germoplasma de S.commersoni ssp commersoni en la región serrana del sudeste de la provincia. Se conserva la colección de germoplasma de papa, ºefectuándose el monitoreo de la viabilidad de las colecciones y la regeneración y acondicionamiento de semilla sexual y/o mantenimiento de material clonal in vitro y a campo. El Tizón tardío Se estudió la eficacia de 19 tratamientos para controlar el tizón tardío de la papa en el cultivar Kennebec. Las condiciones ambientales fueron favorables para el desarrollo de la enfermedad. La incidencia de la misma se evaluó en base a síntomas y defoliación de las plantas y al rendimiento de papa recibo, "semilla" y total. La mayoría de los tratamientos químicos controlaron la enfermedad, encontrándose diferencias significativas entre fungicidas, dosis e intervalos entre aplicaciones. Ing. Marcelo H. Bosch Pág. -58-

59 El código correspondiente para crear la página web sería: <html> <head> <title>inta - Balcarce - Avances Agronomia - Octubre 2001</title> </head> <body> <h1>informe de Avance Agronomía</h1> <h2>el cultivo de la papa</h2> <h3>estudios realizados </h3> <p>se avanzó en el conocimiento de la aptitud semillera de áreas no exploradas anteriormente y se ensayó la optimización de técnicas de riego para las diferentes categorías de semilla de los cultivares utilizados. </p> <p>se desarrollaron métodos más eficientes para la micropropagación de plántulas y para la producción de minitubérculos. Además, se puso en funcionamiento el Laboratorio de Genética Molecular Aplicada, lográndose la identificación de variedades de papa y se mejoraron las técnicas de muestreo de suelo para la estimación de nematodos. </p> <h3>distribución de nematodos </h3> <p>se continuó con el estudio de la distribución de los nematodos cuarentenarios incluídos en las listas A1 y A2 del COSAVE (1997 Germoplasma Se coleccionó germoplasma de S.commersoni ssp commersoni en la región serrana del sudeste de la provincia. </p> <p>se conserva la colección de germoplasma de papa, ºefectuándose el monitoreo de la viabilidad de las colecciones y la regeneración y acondicionamiento de semilla sexual y/o mantenimiento de material clonal in vitro y a campo. </p> <h3>el Tizón tardío </h3> <p>se estudió la eficacia de 19 tratamientos para controlar el tizón tardío de la papa en el cultivar Kennebec. Las condiciones ambientales fueron favorables para el desarrollo de la enfermedad. </p> Ing. Marcelo H. Bosch Pág. -59-

60 <p>la incidencia de la misma se evaluó en base a síntomas y defoliación de las plantas y al rendimiento de papa recibo, "semilla" y total. La mayoría de los tratamientos químicos controlaron la enfermedad, encontrándose diferencias significativas entre fungicidas, dosis e intervalos entre aplicaciones.</p> <hr> </body> </html> En este ejemplo de código se han utilizado las siguientes etiquetas: <html> : identifica el texto como HTML <head> : marca el encabezado, donde se incluye el título, las etiquetas meta, hoja de estilo etc. <title> : para incluir el título de la página <body> : marca el cuerpo de la página e incluye el resto de los elementos de la página <h1> : define el encabezado de la página <h2> : define el subencabezado de la página <h3> : define el subencabezado de la página <p> : define los párrafos normales <hr> : inserta una línea horizontal Como expresáramos anteriormente: no hace falta mucho para codificar una página de texto, solo se requiere encerrar los bloques de texto según su significado entre las etiquetas correspondientes. No hay que olvidar el cierre de las etiquetas. Es cierto que no se ganará un concurso de diseño con este código, pero nadie puede negar que es eficiente, esta limpio y muestra lo necesario. Cualquier técnico o personal administrativo puede preparar estas páginas sencillas y enviarlas para su publicación directa en el server. Si requiere algo más sofisticado puede destinarse para su retoque gráfico o agregado de componentes de programación, pero al menos ha quitado a los programadores el trabajo primario de edición. Ing. Marcelo H. Bosch Pág. -60-

61 Así se ve nuestra página de ejemplo: Ing. Marcelo H. Bosch Pág. -61-

62 HOJAS DE ESTILO EN CASCADA (CSS) CSS, es un estándar para formatear páginas Web que trasciende las limitaciones del HTML. Promulgado por el World Wide Web Consortium (W3C), CSS extiende HTML mediante más de 70 propiedades de estilo que pueden aplicarse a etiquetas (tags) HTML y que cubren aspectos como color, espaciado, posicionamiento, bordes, márgenes, cursores y otros. Las hojas de estilos en cascada le otorgan más control sobre la apariencia y la presentación de las páginas. Al utilizar hojas de estilos en cascada, puede ampliar la habilidad de especificar con precisión la ubicación y la apariencia de los elementos de una página y crear efectos especiales. Asimismo puede hacer el sitio Web más accesible a los visitantes que tengan exploradores o dispositivos de salida especializados. Las hojas de estilo pueden simplificar el trabajo de diseño de sitios completo al centralizar el control de formatos, separándolo del contenido de los documentos. Internet Explorer 4.0 y posterior soporta la especificación HTML 4.0 y CSS2. Puede consultar más información en Contenido de una hoja de estilos Una hoja de estilos en cascada (CSS) define los estilos que puede aplicar a las páginas o a los elementos de página. Cada definición de estilo, o regla de estilo, consiste en un selector seguido de las propiedades y los valores de ese selector. A continuación se muestran ejemplos simples de reglas de estilo definidas en una hoja de estilos CSS: H1 { font-size: 1 em; color: green } H2 { font-size: 12 px; color: blue } H1 y H2 son selectores que modifican las propiedades de formato de las etiquetas HTML estándar. Las propiedades de los selectores y los valores se encuentran dentro de corchetes { }, font-size es una propiedad y x-large es el valor de la propiedad tamaño fuente. Puede especificar propiedades múltiples para un selector separando cada una de ellas con un punto y coma ( ; ). Así además de las características normales de H1, se presentará en color verde y tamaño 1em y H2 se presentará en color azul y tamaño 12 pixeles. Cada vez que se usen! Ing. Marcelo H. Bosch Pág. -62-

63 .note { font-size: small } Este ejemplo es un selector de clase. Un selector de clase se puede aplicar a varias etiquetas HTML estándar, por ejemplo: <p class= note > Párrafo cualquiera </p> El párrafo se presentará en tamaño pequeño. Al utilizar hojas de estilos en cascada, puede establecer una variedad más amplia de propiedades que al utilizar sólo formato HTML estándar, entre las que se incluyen: Efectos de fuente, como VERSALES y espaciado entre caracteres expandido. Propiedades de párrafo, como sangría, interlineado y espaciado antes o después. Propiedades de bordes y sombreado, como cuadros y colores de fondo. Propiedades de ubicación, como ajuste de texto alrededor de los elementos de página, ubicación absoluta o relativa de los elementos de página y orden z (de adelante hacia atrás) de los elementos de página. Para obtener más información acerca de la estructura y las reglas para definir una hoja de estilos en cascada y sobre propiedades válidas y valores, consulte las especificaciones del World Wide Web Consortium (W3C). Utilizar la hoja de estilos con una página Son tres las formas en que se pueden utilizar las hojas de estilos en las páginas del sitio Web: 1. Vincular una página a una hoja de estilos externa. 2. Crear una hoja de estilos incrustada en una página. 3. Aplicar estilos definidos a los elementos individuales de página. Cada método tiene sus ventajas y sus desventajas: 1. Utilice una hoja de estilos externa cuando desee aplicar los mismos estilos de forma coherente en algunas o en todas las páginas del sitio Web. Al definir los estilos en una o más hojas de estilos externas y vincularlas a las páginas, asegura la coherencia de la apariencia en todas esas páginas. Si decide Ing. Marcelo H. Bosch Pág. -63-

64 cambiar un estilo, sólo necesita hacer un cambio, en la hoja de estilos externa, y éste se verá reflejado en todas las páginas vinculadas a esa hoja de estilos. Normalmente, una hoja de estilos externa utiliza la extensión de nombre de archivo.css, como intastyle.css. 2. Utilice una hoja de estilos incrustada cuando desee definir los estilos sólo en la página actual. Una hoja de estilos incrustada es un tipo de hoja de estilos en cascada, es decir, "incrustada" dentro de las etiquetas <HEAD> de una página. Los estilos de una hoja de estilos incrustada sólo se pueden utilizar en esa misma página. 3. Utilice estilos definidos para aplicar las propiedades de la hoja de estilos en cascada a elementos individuales de una página. Si una página está vinculada a una hoja de estilos externa, los estilos incrustados o definidos que cree para esa página extenderán o suplantarán las propiedades especificadas en la hoja de estilos externa. Utilizar la hoja de estilos Para utilizar los estilos definidos en una hoja de estilos externa en una página en particular, vincule dicha página a la hoja de estilos. El programa Front Page, por ejemplo, lo hace de forma automática utilizando el comando Vínculos de hoja de estilos en el menú Formato. Para hacerlo de forma manual debe agregar en el encabezado de la página (entre la etiquetas HEAD) una declaración con la siguiente sintaxis: <link rel="stylesheet" type="text/css" href="../ruta/intastyle.css"> donde href declara la ruta y el nombre de archivo de la hoja de estilos oficial de INTA. Esta declaración debe agregarse en todas las páginas del sitio INTA de manera tal que el aspecto final de las etiquetas HTML se pueda definir en forma centralizada y los cambios afectan a la totalidad del sitio. Ing. Marcelo H. Bosch Pág. -64-

65 La hoja de estilos de INTA /* Hoja de estilos CCS - Ing. Marcelo H. Bosch - Julio 2001 */ body {font-size:1em ; topmargin:0; font-family: Verdana, Arial, Helvetica; } /* ---- Estilos para encabezados (titulares) de página ---- */ h1, h2, h3, h4, h5, h6 {font-weight:normal; fontstyle:italic; margin-top: 10; margin-bottom: 10;}; h1 {font-family: Bookman Old Style, Times New Roman; font-weight: medium;font-size:1.4em ;align: center } h2 { font-weight: normal; font-size: 1.2em; background-color: #FFFFCC; border-right: 1 solid #808080; border-bottom: 1 solid # } h3 { font-weight: medium; font-size: 1.1em; background-color: #FFFFCC; border-right: 1 solid #808080; border-bottom: 1 solid # } ; h4 {font-weight: medium; font-size:1em ;borderright: 1 solid #808080; border-bottom: 1 solid #808080;} h5 {font-weight: medium;font-size:0.9em; } h6 {font-weight: medium;font-size:0.8em; } h1.bk { background-color: #D1D1D1 } h6.color { color: # } p {font-size:0.8 em; left-margin:2; margin-top: 0; margin-bottom: 0; } p.content { text-indent: 40; margin-top: 10; margin-bottom: 10 } p.tabla {font-size:0.8 em; left-margin:2; margintop: 0; margin-bottom: 0; } em { color: #800000; font-weight: bold }; table {width:100% ; border:0; cellspacing:0; cellpadding:0;} dt { font-size:80%;font-weight: bold;} dd { font-size:80%;}; small {font-size: 0.75em } div.grisclaro {background-color: #DBDBDB } span.loco {text-transform: uppercase; letterspacing: 1pt; color: #008080; font-style:italic } span.nota {font-weight: bold; color: red; texttransform: uppercase; letter-spacing: 1pt; background-color: yellow; font-style:italic } Ing. Marcelo H. Bosch Pág. -65-

66 span.producto { color: #006600; font-style: italic; font-weight: bold } span.intaname { color: #ed1b24; font-style: italic; font-weight: bold } span.intanameb { font-family: ArialBlack, Arial; color: #ed1b24; font-weight: bold } a:hover {font-style: italic;}; ul {list-style-type: disc; font-size: 0.8 em; margin-top: 0; margin-bottom: 0} ol {list-style-type: decimal; font-size: 0.8 em; margin-top: 0; margin-bottom: 0} ul.red {color: red;} ol.red {color: red;} ul.rednews { font-size: 0.8em; color: red; liststyle-type: square; }.autor { color: #800000; font-style: italic }.barranav { font-family: Verdana, Arial, Helvetica; font-size:0.8em }.boletin_title { font-family: Times New Roman; font-size: 1.4 em; font-style: italic; align="center" }.categ { font-size: 0.85em; font-weight: bold };.clase { font-size: 0.85em; color: #FFFFFF; font-weight: bold; background-color: # }.contenido { text-indent: 40; margin-top: 10; margin-bottom: 10 }.contraste { font-family: Arial, Verdana, Helvetica; color: #FFFFFF; font-weight: bold; background-color: #FF0000 }.copyr { font-size: 0.75em; font-style: italic; border-top: 1 solid #C0C0C0 }.datofoto { font-size: 0.7em; text-align: center; color: #FF0000; border-top: 1 solid #C0C0C0 }.dirección {font-size: 0.75em; font-style: italic;};.inta { font-size: 0.75em; font-style: italic; border-bottom: 1 solid #C0C0C0 }.explica { color: #800000; font-size: 0.8 em; font-style: italic }.obra { color: #0000FF; font-style: italic }.new { font-family: Comic Sans MS; fontsize: 1 em; background-color: #FFFF00; color: #FF0000; font-style: italic }.pie { font-size: 0.8 em; font-style: italic }.piefoto { font-size: 0.7em; text-align: center; border-top: 1 solid #C0C0C0; margin-left: 20; margin-right: 20 } Ing. Marcelo H. Bosch Pág. -66-

67 .recom { background-color: #C0C0C0; font-size: 0.9 em; font-style: italic; text-indent: 10; border-style: solid; border-width: 1; margin-left: 10; margin-right: 10; margin-top: 5; margin-bottom: 5; padding-left: 5 }.redline { border-bottom: 1 solid #FF0000 }.slogan { font-size: 1 em; color: #800000; font-style: italic; font-weight: bold; text-align: right }.subcateg {font-size: 0.75em;}.year { color: #FF0000; font-family: Arial Black; font-size: 1.2 em; font-style: italic } /* Estilos para tablas */ thead {font-style: italic; font-weight: bold; color:green;}; tbody {font-style: normal; }; tfoot {font-style: italic; font-size:0.7em; background-color= #FFFFCC;};.panisup { background-color: #99CCFF; borderright: 2 solid #808080; border-bottom: 2 solid # }.pandsup { background-color: #CCFFFF; borderright: 2 solid #808080; border-bottom: 2 solid # }.panimed { background-color: #CCFFCC; borderright: 2 solid #808080; }.pandmed { background-color: #CCFFFF; borderright: 2 solid #808080;}.paninf { background-color: #FFFFCC; border-top: 2 solid #808080; }.pandinf { background-color: #FFFFCC; borderright: 2 solid #808080; border-top: 2 solid #808080; } /* --- o --- */ Ing. Marcelo H. Bosch Pág. -67-

68 CAPITULO 7: DISEÑO DE SITIOS Un equipo interdisciplinario que integre la programación, diseño grafico, bibliotecología, documentalismo, comunicación, marketing y análisis de sistemas. Es muy poco frecuente discutir sobre la arquitectura de sitios porque dicho aspecto es invisible, aunque esencial. CONSIDERACIONES GENERALES Un sitio web es un sistema de información y como tal debe ser concebido y diseñado, es decir como un conjunto de piezas de información (páginas) que cumplen un objetivo común. Dichas páginas están conectadas entre sí y conectadas con el mundo exterior (la web) lo cual tiene implicancias a nivel de diseño. Como sistema puede tener diversos grados de complejidad y estar integrado por una cantidad variable de subsistemas también interconectados. Este comentario trata de jerarquizar el trabajo del diseñador de sitios web que no debe ser visto como un mero artista gráfico o programador de páginas sino que debe entenderse como un planificador de sistemas de información. Es probable que dicha tarea no recaiga en una sola persona sino que deba conformarse un equipo interdisciplinario que integre áreas tan diversas como la programación, diseño grafico, bibliotecología, documentalismo, comunicación, marketing, análisis de sistemas y también la visión estratégica del negocio institucional. En la evolución de los sitios web hemos visto como el área de sistemas ha monopolizado el desarrollo de sitios web por la base informática de la tecnología web. Muchos programadores, con poco esfuerzo, comenzaron a codificar primitivas páginas en HTML con escaso criterio visual pero que deslumbraban por el solo efecto del hipertexto y su potencialidad para enlazar documentos distantes. Más tarde los diseñadores gráficos agregaron a su competencia laboral al diseño de páginas web subiéndose al caballo de las herramientas de software que evolucionaron en esa dirección pero desconociendo los fundamentos del lenguaje web. Aparecieron páginas cada vez más vistosas, con agregados multimedia de dudoso valor informativo pero de gran espectacularidad. Las páginas fueron haciéndose cada más pesadas y el lento crecimiento del ancho de banda decepcionó a muchos usuarios que debían esperar demasiado sin tener muy en claro que recibirían a cambio de su tiempo. En toda esta evolución poco se ha dicho y evaluado respecto de la estructura subyacente a los sitios web, más bien estamos acostumbrados a discutir sobre páginas, su diseño y desempeño. Es muy poco frecuente discutir sobre la arquitectura de tal o cual sitio en principio porque dicho aspecto es invisible, aunque esencial, como diría El Principito. Por otra parte es difícil conocer la arquitectura de un sitio por simple observación dado que hay que deducir y suponer muchas cosas y requiere experiencia en la disciplina específica de arquitectura de información. De tal manera podemos afirmar que la arquitectura, ha sido la gran ausente de la fiesta Web de los últimos años y es muy probable que siga haciendo así por varias razones aunque no es este el lugar para discutirlas. Ing. Marcelo H. Bosch Pág. -68-

69 La importancia de la arquitectura tiene relación con el tamaño del sitio así como la necesidad de un arquitecto es obvia si de construir un edificio se trata, en cambio es discutible si el objetivo es construir una modesta vivienda. Quizás un albañil experimentado pueda hacerlo muy bien. Resulta evidente que un sitio de la magnitud del que se pretende para una organización tecnológico/científica como es el INTA no puede concebirse sin una estudiada arquitectura. Y dado que el sitio web está compuesto por numerosos subsitios, las arquitecturas individuales deben ser consistentes, complementarias e integrables en el conjunto: el sitio Web este a su vez es un subsistema del sistema integrado de información (SII) del INTA. Los responsables del desarrollo de cualquier componente web deben ser conscientes de la pertenencia a dicho sistema para evitar las famosas islas de información y para aprovechar la sinergia que significa integrar nuevos nodos a una red preexistente. Un aspecto delicado es decidir como deberán navegar los usuarios. ESTRUCTURA DE NAVEGACIÓN Uno de los aspectos más delicados en el diseño de los sitios es la forma en que deberán navegar los usuarios ya que las satisfacción de los mismos estará influida por la experiencia positiva o negativa mientras trata de encontrar la información deseada. No me canso de repetir que la simplicidad en el diseño y la facilidad de uso deben ser los objetivos de todo desarrollo web. Es muy poco lo que puede hacerse a nivel de página si no se ha pensado la estructura de la información por lo cual le sugerimos que antes de diseñar alguna página de su sitio comience por especificar el objetivo del sitio/subsitio, luego convoque a todas las personas que tengan interés o responsabilidad para aportar contenido al sitio de manera de reunir la mayor cantidad de información posible sobre el alcance que tendrá en el mediano plazo. Una vez que se conocen todos los tipos de documentos que se desea publicar y sus formatos se puede pensar en como agruparlos, organizarlos y conectarlos entre sí. Cada subsistema tiene sus particularidades pero también similitudes. Explotar estas últimas para simplificar y homogeneizar el diseño de los subsitios es el desafío que nos hemos propuesto con el propósito de darle valor agregado al sitio en su conjunto y disminuir la exigencia de aprendizaje de los usuarios cada vez que acceden a un componente nuevo. El sitio ha sido diseñado bajo esas premisas y se pretende que los subsitios que lo integran sean diseñados con el mismo criterio. Para simplificar la tarea de los diseñadores y mantener la consistencia se ha relevado el contenido actual de los subsitios y se ha diseñado una arquitectura tipo para algunos de ellos como es el caso de las estaciones experimentales. Más allá del tamaño de las unidades y del volumen de información que generan, se pretende que la misma sea accesible de la misma manera por los usuarios. Por ejemplo: un documento sobre ensayos de soja debe tener la misma posición en la Ing. Marcelo H. Bosch Pág. -69-

70 estructura de la EERA Pergamino que en EERA Balcarce. Caso contrario el usuario debería efectuar toda una investigación en cada subsitio para encontrar información similar. Ejemplo de estructura Otros subsitios pueden tener una identidad única en la organización como es el caso de determinados programas de investigación o extensión por lo que deberá planificarse especialmente. Pero en todos los casos la guía para el diseño de las estructuras será las tareas que deben llevar a cabo los usuarios del sitio, lo cual nos obliga a pensar como ellos, no como diseñadores. SUBSITIOS Un subsitio es un conjunto de páginas con estructura y administración propia, que comparten un estilo y forma de navegación y dispone de una página de inicio. En el INTA un subsitio puede ser de una Estación Experimental, de un Instituto de Investigación, de un Programa o de cualquier entidad organizacional que desee organizar su espacio de información y/o aprovechar las tecnologías de redes para implementar algún servicio al usuario. En este apartado daremos algunas indicaciones sobre como estructurar este tipo de subsistema de información y ofrecemos algunos ejemplos de estructuras típicas que se han elaborado como plantillas para uso de los diseñadores. Ing. Marcelo H. Bosch Pág. -70-

71 La página de inicio La página inicial creemos que debe tener muy pocos elementos y debe responder a dos preguntas básicas: dónde estoy? y dónde puedo ir? La inclusión de pocos elementos colabora con la definición del objetivo del sitio; pregúntese el lector si queda claro cuál es la misión y el objetivo del sitio de Mirabilis presentado en la página 16. Una gran cantidad de opciones iniciales pueden confundir al usuario y generalmente reflejan la falta de una arquitectura clara y definiciones básicas sobre qué es y para qué es el sitio. El usuario que no conoce el sitio necesita ser guiado hacia la información que necesita y en ese sentido presentarle un pequeño numero de opciones que se vayan abriendo (estructura jerárquica) facilita la investigación y aprendizaje. Ing. Marcelo H. Bosch Pág. -71-

72 El usuario debe saber a golpe de vista donde está. Donde estoy? Aunque responder a esta pregunta no parece ser un desafío para el diseñador, muchos sitios confunden al usuario por no prestar atención a detalles aparentemente menores pero que sumados definen la experiencia de navegación. Algunos a tener en cuenta son: Titulo de la página: debe asegurarse que la etiqueta title este redactada correctamente. Ver página 18. Por ejemplo INTA - Pergamino - Estación Experimental - Página principal es preferible a Página principal de la Estación Experimental INTA de Pergamino pues las palabras más significativas deben desplazarse hacia la izquierda para que sean visibles en cualquier tamaño de ventana del navegador. Logo de la institución: dado que se trata de un subsitio debe utilizarse el logo oficial de INTA sin ningún tipo de alteración particular en el centro de la página y con un tamaño de 100 pixeles de lado. Identificación de la Unidad: el nombre de la unidad o programa en estilo Encabezado 1 <H1> URL: los subsitios de tendrán todos una pagina principal con una dirección del tipo por ejemplo. que se interpreta como la página principal del pergamino dentro del directorio de Buenos Aires Norte (/ban) dentro del directorio de los centros regionales (/creg). Estas recomendaciones apuntan a que el usuario, ya sea que entra por el sitio de INTA o directamente a través de un motor de búsqueda, interprete a golpe de vista y sin lugar a dudas donde se encuentra. Donde puedo ir? La herramienta de navegación se debe diseñar en base a la arquitectura del subsitio. Se ha propuesto una arquitectura tipo que refleja las necesidades de publicación de la mayoría de las unidades. Su utilización contribuirá al fortalecimiento de la imagen institucional, a la consistencia de todo el sitio y a la facilidad de uso del mismo. Lo anterior no impide que dentro de los límites establecidos los diseñadores propongan interfaces originales. Ing. Marcelo H. Bosch Pág. -72-

73 La consistencia visual brinda la sensación de lugar conocido al visitante. La imagen superior permite observar algunos inconvenientes de los que hemos hablado en los capítulos anteriores: Título de página incompleto (no incluye la palabra INTA). Diseño visual no estándar. Uso no autorizado del logo oficial (animado y con recuadro azul). Las opciones de navegación no se visualizan al disminuir el tamaño de la ventana y el usuario debe desplazarse verticalmente para verlas. La fotografía mide 12 Kb (un 60 % del tamaño máximo de página admitido). La propuesta institucional para las páginas de inicio de las Estaciones Experimentales se ejemplifica con las pantallas de las EERA Balcarce y Pergamino. Como puede observarse el diseño de la página inicial es el mismo lo cual le otorga consistencia visual, a la vez que brinda la sensación de lugar conocido al visitante. La arquitectura de los sub-sitios debe ser la misma para facilitar la navegación, el examinado (browsing) y la búsqueda (searching) de Ing. Marcelo H. Bosch Pág. -73-