Manual estilo web

1,442 views
1,337 views

Published on

Estilos de diseños de paginas Web

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,442
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
48
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Manual estilo web

  1. 1. Instituto Nacional de Tecnología Agropecuaria wwwwww..iinnttaa..ggoovv..aarr Manual de estilo y diseño de sitios y páginas Web Departamento de Comunicaciones Ing. Agr. Marcelo H. Bosch Marzo 2002
  2. 2. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -2- Copyright Se prohíbe la reproducción total o parcial sin permiso expreso del autor o del Instituto Nacional de Tecnología Agropecuaria.
  3. 3. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 www.inta.gov.ar/manualweb/index.htm
  4. 4. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 .......................................................................................................................... 10 El análisis de requerimientos.............................................................................................................. 11 El anteproyecto................................................................................................................................... 11 La estructura ....................................................................................................................................... 11 La organización del espacio................................................................................................................ 12 El diseño de la entrada........................................................................................................................ 12 La planificación.................................................................................................................................. 13 Supervisión de obra ............................................................................................................................ 13 La terminación.................................................................................................................................... 13 Capitulo 3: La usabilidad de sitios web..................................................................................14 ¿Qué es la usabilidad? ........................................................................................................................ 14 Aspectos de la usabilidad.................................................................................................................... 14 Contenido para la Web ....................................................................................................................... 15 Textos para la Web............................................................................................................................. 15 PARTE II: ASPECTOS TECNICOS.......................................................................................................... 18 Capitulo 4: Preparación del contenido...................................................................................18 Edición del texto de páginas............................................................................................................... 18 Los Textos Ocultos de una Página...................................................................................................... 29 Lecturabilidad..................................................................................................................................... 31 El contexto de la página...................................................................................................................... 34 Imágenes para la Web......................................................................................................................... 35 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 ............................................................... 42 La utilización del espacio ................................................................................................................... 43 El Tiempo de descarga ....................................................................................................................... 44 Los hipervínculos ............................................................................................................................... 45 Marcos o Frames ................................................................................................................................ 49 La Impresión....................................................................................................................................... 50 Capítulo 6: La codificación......................................................................................................52 Codificación semantica....................................................................................................................... 52 Lenguaje HTML 4.0........................................................................................................................... 56 Una página al alcance de todos........................................................................................................... 57 Hojas de Estilo en Cascada (CSS)...................................................................................................... 62
  5. 5. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -5- Capitulo 7: Diseño de sitios .....................................................................................................68 Consideraciones generales.................................................................................................................. 68 Estructura de navegación.................................................................................................................... 69 Subsitios.............................................................................................................................................. 70 Funcionamiento del motor de búsqueda............................................................................................. 75 Bibliografía y referencias.........................................................................................................76 Apéndice I .................................................................................................................................78
  6. 6. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  7. 7. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -7- PARTE I: ASPECTOS CONCEPTUALES CAPÍTULO 1: LA WEB 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, http://www.inta.gov.ar/informa.htm indica que el documento o página informa.htm se localiza en el servidor de INTA (www.inta.gov.ar). 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. Tom Berners Lee concibió la Web como una plataforma para compartir documentos a través de redes.
  8. 8. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. ¿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 Un sitio web debe ser concebido para los usuarios y visitantes potenciales.
  9. 9. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -9- 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. 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.
  10. 10. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 www.inta.gov.ar 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 10.000 páginas de contenido y registrar
  11. 11. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -11- 3000 visitas diarias al sitio para fines del año 2002”. 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. 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. Se debe relevar las necesidades de la organización.
  12. 12. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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. Los diseñadores de sitios deben organizar el espacio de información.
  13. 13. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  14. 14. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -14- 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. El enfoque sistémico de construcción de sitios es el único que puede asegurar que los mismos funcionen adecuadamente.
  15. 15. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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). 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 Es el contenido lo que los usuarios buscan primero.
  16. 16. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -16- 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. Los usuarios ojean el texto en vez de leerlo por completo. El estilo de escritura para páginas web debe considerar el comportamiento del usuario y el medio.
  17. 17. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -17- 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. La lectura en pantalla es un 25% más lenta que en el papel.
  18. 18. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -18- PARTE II: ASPECTOS TECNICOS CAPITULO 4: PREPARACIÓN DEL CONTENIDO 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. 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.
  19. 19. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -19- Encabezado (<H1>) Vínculos a otras secciones Separación de párrafos Sub encabezado (<H2>)
  20. 20. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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”.
  21. 21. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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. Las páginas breves y concisas se descargan rápidamente.
  22. 22. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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
  23. 23. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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 No descuide el título de las páginas.
  24. 24. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  25. 25. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 Comentario Bienvenido a nuestra Home Page Pobre Bienvenido al INTA Mejor Bienvenido a la página principal del INTA Mejor INTA Incompleto INTA Instituto Nacional de Tecnología Agropecuaria Correcto para la pág. Principal INTA Boletín Informativo Jun 2001 Correcto para páginas interiores INTA - Instituto de Clima y Agua Correcto para la pág. Principal INTA - Clima y Agua - Informe metereológico 10 Mar 2001 Correcto para páginas interiores INTA Estación Experimental Balcarce Correcto para la pág. Principal INTA Balcarce - Curso Manejo de Lanares Correcto para páginas interiores http://www.inta.gov.ar/cr/balcarce/lana.htm Título inexistente El Programa Prohuerta del INTA Desplazar INTA a la izquierda INTA - Programa Prohuerta Correcto para la pág. Principal INTA - Programa Prohuerta - Memoria 2000 Correcto para páginas interiores 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, Tómese un tiempo para organizar el texto.
  26. 26. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  27. 27. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  28. 28. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 sub- titulares) • 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.
  29. 29. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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 El principal motivo para dedicarles tiempo y esfuerzo es la accesibilidad de la página.
  30. 30. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -30- 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> Las páginas deben quedar bien posicionadas en un ranking de resultado de búsqueda de un motor.
  31. 31. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  32. 32. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  33. 33. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 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. Como norma pruebe sus diseños en todas las resoluciones probables de monitor.
  34. 34. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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. Preste atención al contexto de la página.
  35. 35. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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,
  36. 36. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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. Deben evitarse las imágenes en las páginas de navegación.
  37. 37. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -37- La imagen original 178 Kb Recorte 25Kb Recorte y reducción de tamaño 8.6 Kb Idem comprimida 6 Kb
  38. 38. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -38- El récord Un mal ejemplo que bien podría aparecer en el libro de récords de Guinnes es la página http://www.doangroup.com/specials.htm que presenta un imagen escaneada del periódico con la publicidad de venta de autos usados que mide 1.075.496 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
  39. 39. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 e-mail 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
  40. 40. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  41. 41. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -41- 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. Puede complementar sus diseños web editando Cds con contenido multimedia.
  42. 42. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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 Crear diseños adaptables a diferentes tamaños de pantalla.. NO 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. Los tamaños fijos de fuente ocasionan problemas.
  43. 43. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  44. 44. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -44- 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 Diseñar páginas largas con gráficos pesados, animaciones y componentes. SI Utilizar el hipertexto para crear conjuntos de páginas relacionadas discretas y ágiles. 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.
  45. 45. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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: http://www.inta.gov.ar/iffive/ • 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. 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! Los hipervínculos expanden el espacio de información.
  46. 46. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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="http://www.inta.gov.ar/presid.htm" title="Ing. Cetrángolo">Hugo Cetrángolo</a> y presentará el siguiente aspecto al pasar el mouse sobre él:
  47. 47. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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="http://www.inta.gov.ar/presid.htm" title="Ing. Cetrángolo">Hugo Cetrángolo</a> 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 e-mail. 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 www.inta.gov.ar ) agregan valor al sitio si se crean de manera Existe correlacion positiva entre uso de colores estándar y usabilidad.
  48. 48. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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 www.agro.uba .ar sino www.agro.uba .ar/agrotxt/agroneg/principal.htm • 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: www.inta.gov.ar/balcarce/boletín/actual.htm presenta el problema que dicha página cambia permanentemente y el Piense en el mantenimiento!
  49. 49. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -49- contenido debe pasarse a otra página o perderse. www.inta.gov.ar/balcarce/boletín/11-2000.htm 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: 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 emails. 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. Trate por todos los medios de no usar marcos (frames).
  50. 50. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -50- Obsérvese que el título de la página y la URL (www.inta.gov.ar) 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:
  51. 51. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  52. 52. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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: El lenguaje HTML se basó originalmente en la codificación del significado de la información.
  53. 53. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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.
  54. 54. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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. 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 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.
  55. 55. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -55- 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 (www.w3.org). 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. Web Consortium trata de imponer estándares y limitar las diferencias que las compañías introducen al código HTML original.
  56. 56. INTA - Manual de arquitectura de sitios y diseño de páginas Web Ing. Marcelo H. Bosch Pág. -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:

×