Diseo de sitios Web de calidad

Herramientas para gerenciar el Web Poltica del Web Procedimientos Guas de Estilo Inventario de Recursos de Informacin

Web: Documento de poltica

Consiste en un documento donde se exponen de manera clara los lineamentos generales que se seguirn para cumplir los objetivos del Web, los principios que deben cumplirse as como quines, cuando y cmo toman decisiones sobre el Web. Es emitido por la direccin, un comit u otro rgano poltico de la institucin

Web: Procedimientos
Es el conjunto de pasos discretos para poder llevar adelante los objetivos del sitio y concretar la poltica. Incluye algoritmos para cuestiones tales como cada que tiempo se actualizan las pginas, cmo y donde se ponen los contenidos, cuando se indiza el Web,etc.

Web: Gua de estilo

Es un documento tcnico donde se incluyen las especificaciones editoriales y de diseo del Web. Especifica de forma detallada temas como la grfica del sitio, los tipos de letra, la forma de hacer los enlaces, las recomendaciones de ordenamiento de los menes y otros.

Web: Inventario de Recursos de Informacin

Es una base de datos que registra el conjunto de fuentes, servicios y sistemas de informacin que se presentan en el Web y que contiene atributos como la misin de cada recurso, su responsable, sus contenidos, su fecha de actualizacin y otros datos que facilitan su gerencia y localizacin

Primeros pasos en el diseo de un sitio Web

Definir los objetivos del sitio Tener una declaracin de propsitos Planificar adecuadamente lo que se desea lograr Crear el equipo para el trabajo

Primeros pasos en el diseo del Web (2)

Identificar la audiencia Tener una descripcin concisa de la informacin que el sitio tendr

Los Objetivos en el Web

Partir de una breve declaracin de objetivos Expandir los objetivos en la declaracin de propsitos Ejemplo: El Web pretende reducir las llamadas de clientes solicitando informacin sobre los servicios bsicos de la clnica y cmo solicitarlos

Web: Diversos propsitos

Interfaz de usuario a un servicio Venta de productos o servicios Presentacin de informacin a una audiencia interesada Coleccin de enlaces El propsito del Web condiciona las decisiones de diseo del mismo

Web. Tareas iniciales

Se debe comenzar a identificar todos los contenidos de informacin as como los recursos grficos que se necesitarn coleccionar o crear para cumplir los objetivos declarados.

Usuarios expertos y frecuentes

Dependen del sitio para obtener informacin rpida y pertinente
Generalmente son impacientes con las pginas cargadas de grficos. Prefieren menes textuales que carguen rpido. Tienen objetivos precisos y especficos.

Agradecen los ndices y los opciones de bsqueda rpida.

Acceso directo a Medline en sitios de salud

Para el usuario de la salud y especialmente los mdicos tener acceso a Medline es bsico Eso explica que sea comn un enlace a Medline en las primeras pginas de los Webs de esta especialidad Ejemplo de acceso a Medline en Infomed

Definir la audiencia
Quin usar las pginas Qu problema trata de resolver quien consulta las pginas Pueden ver el Web usuarios de diferentes niveles (terminales, IE, Netscape , otro) Ancho de banda de las conexiones Otros aspectos especficos

Web: Caractersticas del diseo de un sitio de Referencia

Entrada rpida al sitio
Fcil localizacin de lo que se busca Fcil descarga e impresin del resultado Grficos mnimos Opcin de bsqueda por ndices en lugar de listas de enlaces exclusivamente. Tiempo de contacto breve

Web: ejemplo del diseo de un sitio de referencia

El Yahoo
http://www.yahoo.com

Web: Diseo del Sitio

Principio
Usar unidades pequeas y discretas de informacin en lugar de grandes textos indiferenciados. De esta forma se facilita la bsqueda y el uso de la informacin.

Web: Pasos bsicos en la organizacin de la informacin

Dividir en unidades lgicas la informacin
Establecer una jerarqua de importancia y generalidad Usar la jerarqua para estructurar las relaciones entre las partes

Analizar el xito funcional del sistema y su presentacin

Web: Dividir en unidades lgicas la informacin

El concepto de una unidad de informacin debe ser flexible y consistente con el sentido comn, la organizacin lgica y las conveniencias de los usuarios del Web. La naturaleza del contenido es la que mejor puede sugerir la mejor forma de subdividir la informacin.

Web: la jerarqua en el diseo de un sitio

Una vez determinadas un conjunto lgico de prioridades se puede construir la jerarqua de los conceptos ms generales e importantes hasta los tpicos ms especficos u opcionales.
La organizacin jerrquica es casi una necesidad del Web. La mayora de los esquemas de Home Pages dependen de jerarquas.

Web: Diagrama de un sitio con una estructura jerrquica

Web: La lgica del sitio

Los usuarios se forman un modelo mental del sitio que se le presenta En el diseo de la estructura del Web debe pensarse en las necesidades. Un sitio lgicamente diseado debe permitir hacer predicciones acertadas de donde se encuentran las cosas. Ser consistente en cuanto a mtodos de agrupar, ordenar, etiquetar y organizar grficamente.

Web: Diseo funcional del sitio

El objetivo es construir una jerarqua de menes y pginas que sean naturales al usuario y que no entorpezcan el uso del Web o lo desorienten.

Web: Balance del sitio

Es fundamental el balance entre la estructura y las relaciones de los Home Pages y las pginas de contenido as como otros documentos y grficos vinculados.

Web: Objetivo del diseo del sitio

El objetivo es producir un rbol jerrquico bien balanceado que facilite un acceso rpido a la informacin y ayude a los usuarios a comprender cmo se organizan las cosas.

Web: ejemplo de un buen diseo de sitio

Arbol jerrquico balanceado como base de la estructura de un sitio Web

Web: Componentes del diseo de pginas

Diseo grfico Balance de pginas y menes Maquetas de pginas Areas grficas reservadas Encabezamientos y pies de pginas Tipografa Consistencia Tablas bsicas y avanzadas Estilo Editorial

Web: Diseo de pginas principios

Comprender el medio Establecer una jerarqua visual Dirigir la mirada del usuario Manejar la distraccin grfica Ser consistente Desarrollar un estilo propio que considere los principios generales del estilo de Webs

Web: Importancia de la jerarqua visual

Web: diseo de pgina Cul usted leera primero?

Web: Consistencia del diseo

Web: Diseo de pginas, las maquetas

Ejemplo de una maqueta de pgina Web

Web: La importancia de una gua de estilo

Adems de las polticas y procedimientos de un sitio Web, la Gua de Estilo es el documento tcnico especfico ms importante.

Web: Principios en el diseo de las pginas

Claridad, orden y veracidad de las fuentes de informacin Organizacin espacial de textos y grficos dirigida a impactar al usuario con la grfica, dirigir su atencin, y hacer sus interacciones con el sitio agradables y eficientes.

Web: El balance en el diseo de pginas

Balancear el poder de los enlaces hipermediales del Web con la capacidad de incorporar grficos y otros medios en pginas Web que funcionan en red.
La idea es atraer al usuario con una combinacin de descripciones textuales y grficos interesantes y relacionados con la materia en cuestin.

Una pgina con balance

Web Estilo Editorial

El diseo de sitios y pginas Web es un reto que combina el enfoque editorial tradicional respecto a los documentos, el diseo de interfaz de usuario, el diseo de informacin y las habilidades tcnicas de autora para optimizar el cdigo HTML, la grfica y el texto dentro de las pginas Web

Aspectos editoriales en el Web

Las pginas Web tienen muchas similaridades con la publicaciones impresas pero al ser accesibles sin prembulo exigen ser ms independientes que estas.
Muchas pginas terminan aisladas, se presentan como fragmentos aislados y fuera de contexto lo que exige un tratamiento particular.

Web: Estilo editorial aspectos esenciales

Tratamiento de ttulos y subttulos El ttulo del documento como tag HTML Estilo de los documentos en lnea Documentos Largos Formateo de textos para el Web Enlaces y lenguaje Seleccin de enlaces

Tratamiento de ttulos y subttulos

Las marcas editoriales como los ttulos y encabezamientos son el aspecto fundamental de la interfaz humana del Web de la misma manera que en las publicaciones impresas.
Es fundamental por tanto un tratamiento consistente de titulado, encabezamientos y subencabezamientos

Web: Tratamiento de ttulos y subttulos (2)

Estilo de Encabezamientos Enfatice, capitalizando las letras iniciales en el caso de:
Ttulos de documentos Otros sitios Web Ttulos de documentos referenciados en el texto Nombres propios, de productos, marcas comerciales

Web: Tratamiento de ttulos y subttulos (3)

Estilo del resto del texto Enfatice, capitalizando la primera palabra solamente en los siguientes casos:
Subencabezamientos Referencias a otros encabezamientos dentro de la pgina Ttulos de las ilustraciones Listas

Web: El ttulo de las pginas en HTML

El ttulo de una pgina HTML se incluye en el encabezamiento de la misma
<HEAD>

<TITLE>Este es el ttulo de esta pgina<TITLE>

.
<HEAD>

Web: Importancia del ttulo en la pgina HTML

Es el primer elemento de identificacin de la pgina Es la base para la creacin de bookmarks o favoritos por los usuarios Es la primera fuente para la indizacin del sitio Debe combinar identificacin del sitio y la pgina

Web: Importancia del ttulo en la pgina HTML

Cmo lucir el ttulo de su pgina en una lista de favoritos? Le recordar al usuario de qu hablaba la pgina?

Web: El estilo de los documentos en lnea

Los documentos que se leen en lnea tienen que ser concisos y estructurados para leerlos rpidamente Es vlido el estilo de pirmide invertida de los peridicos para el Web: Los hechos importantes en los primeros prrafos para que se encuentren rpido
Asumir que generalmente los usuarios imprimirn aquello que sea ms largo que media pgina en lugar de leerlo en lnea

Web: El estilo de los documentos en lnea. Recomendaciones

Sea conciso Use listas donde sea posible Facilite la impresin

Web: Cmo tratar los documentos largos

La regla general es que los documentos largos ms que leerse en lnea se descargan para su impresin, por tanto haga fcil este proceso. No los descuartice si desea que los usuarios puedan leerlos Puede combinar la opcin de Documentos Portables en formato PDF o versiones HTML con el documento completo

Web: El formateo de los textos

Evitar el excesivo marcaje de los prrafos Usar colores homogneos Usar los mejores editores de texto para el texto fuente y una vez listo exporte a HTML Revise el resultado de la conversin No use hojas de estilo en el procesador de textos pues perder los efectos al exportar No use caracteres especiales fuera de HTML No use el autoespaciado del procesador

Web: El manejo de los enlaces

No construya oraciones alrededor de enlaces. Pobre: Haga Clic aqu para ms informacin sobre enlaces. Mejor: Los enlaces mal manejados pueden causar problemas

Web: Area segura de la pgina

El rea segura de una pgina Web est determinada por dos factores: el tamao mnimo de la pantalla de uso comn (640x480 pixeles) y el ancho del papel en que se imprime una pgina Web.

Web: Los encabezamientos de pginas

La mejor medida de la eficiencia del diseo de una pgina es el nmero de opciones disponibles en las 4 pulgadas superiores de esa pgina.
Los encabezamientos ms efectivos incorporan una combinacin de grficos y enlaces interactivos en la mayora de los casos en forma de mapas de imgenes.

Web: Los encabezamientos de pginas (2)

Es fundamental la identidad visual nica de las pginas Un grfico de identificacin o una especie de cuo grfico en todas las pginas suele ser efectivo, tal como este de Sun

Web: Los pie de pginas

Se recomienda utilizarlos para dar informacin sobre el origen y la fecha de actualizacin del documento. Esta informacin debe estar en todas las pginas pero no en el encabezamiento.
Tambin pueden ofrecer enlaces a otras pginas Es un buen lugar para el cuo de identidad del sitio

Web: La consistencia de las pginas

Parmetros de estilo
Se refiere a las especificaciones sobre tipos de letras, espacios entre prrafos, tamao de los subencabezamientos y otros aspectos que marcan el estilo de las pginas Web. Son contenido de la gua de estilo Son la base de la consistencia del sitio y cruciales en el caso de sitios grandes con numerosas pginas. Son la base del trabajo con las Cascading Style Sheets.

Web: las tablas en el formateo de pginas

Lograr la legibilidad, disponibilidad y estilo dependen mucho de la capacidad de posicionar las palabras, imgenes y elementos de la pantalla en una forma que se adhiera a las convenciones tipogrficas establecidas.
Dadas las limitaciones del HTML las tablas son la nica herramienta efectiva y normalizada que permiten lograr el formateo de pginas Web de ah su enorme importancia

Web: Uso de tablas para el formateo de pginas

Se recomienda usar las tablas para el formateo de pginas Use las celdas de las tablas para crear mrgenes. Ubique el texto en celdas de tablas para limitar el largo de lnea (idealmente de 10 a 12 palabras en una lnea) Use las celdas para posicionar elementos en las pginas.

Web: Uso de tablas para el formateo de pginas (2)

El comportamiento de la tabla depende de como se definen sus celdas. Para el formateo se deben definir los anchos de celdas con valores absolutos. Diferenciar el uso de tablas con fines de formateo de la presentacin tabular. NO usar bordes en este caso Se pueden usar las celdas para crear gutters o espacios tipogrficos.

Web: Determinacin del largo de las pginas

Los 4 Factores determinantes Relacin entre la pgina y el tamao de la pantalla
El contenido particular de los documentos

Si se espera que el usuario lea en lnea o descargue el documento para su lectura posterior. El ancho de banda disponible

Web: Cmo presentar documentos largos

Para combinar una buena interfaz en lnea a las pginas con la facilidad de impresin o descarga del contenido: Divida la pgina en unidades de 2 o 3 pginas impresas completas incluyendo imgenes y figuras. Use el poder de los hiperenlaces
Ofrezca un enlace a un fichero que contenga el texto completo combinado en una pgina para que el usuario pueda imprimirlo o salvarlo en un slo paso. Incluya el URL de la versin en lnea en el texto para actualizaciones y referencia de fuente.

Web: Diseo modular de las colecciones de documentos

Un buen diseo modular facilita la actualizacin sin necesidad de cambiar o reformatear pginas complejas y/o largas. El URL de cada tpico puede mantenerse independientemente de que la pgina crezca o se modifique. Funciona como un manual de pginas modificables donde las secciones se mantienen y los contenidos cambian

Web: El tamao de las pginas recomendaciones prcticas

Pginas cortas para:
Home pages, menus o pginas de navegacin. Documentos que se naveguen o lean en lnea.

Pginas con grficos muy grandes

Documentos mas largos para:

Mantenerlos fcilmente (todos en una pgina y pocos enlaces) Ms cercanos a sus contrapartes impresas Fciles de descargar e imprimir

Web: Principios para el diseo de la interfaz de usuarios

Gran parte de la gua necesaria para disear, crear, editar y organizar el Web no se diferencia radicalmente de la prctica acumulada en la industria editorial.
Reconozca las particularidades del medio, entre ellas la posibilidad de hiperenlaces que exige ms independencia de cada pgina. Eso implica que los encabezamientos y pies de pginas son esenciales en este caso

Que cada pgina tenga su quin, qu, cuando y donde

Web: interfaz y navegacin el problema de los hiperenlaces

Web: interfaz y navegacin

Cada sitio necesita sus botones propios de navegacin. Enlaces fijos en este caso. Es necesario dar una idea de consistencia del sitio manejando la forma en que se navega

Resumen de los aspectos esenciales para garantizar la calidad del Web

Web: Los primeros pasos

Defina la misin del Web Declare los objetivos explcitamente Defina su audiencia Establezca una poltica y los procedimientos Haga un inventario de sus recursos de informacin y seleccione los que incluir en el Web Haga un plan de trabajo

Los enlaces en el Web

Escribir como si no existieran enlaces en el texto Buscar frase claras y con sentido para los enlaces Seleccionar un largo apropiado para los enlaces Crear contexto para los enlaces Seleccionar los enlaces de manera que apoyen el concepto y estructura de las oraciones Tratar de que el enlace se corresponda con el ttulo de la pagina referenciada Subrayar el texto que es diferente No cambiar los colores convencionales de los enlaces

El largo de las pginas Web

Para atraer la atencin no ms que la ventana Que no se dejen de ver cosas que estn fuera del ojo de la ventana Si se presentan textos que las personas deben leer entonces es adecuada la opcin de scrolling http://millkern.com/garuda/style.html Como una regla gral. que las pginas no sean mayores que una pantalla y media Para impresin y salva ofrecer un enlace al documento completo Con pginas ms cortas es ms fcil mantener el Web

La navegacin en el Web
Incluir encabezamientos de documentos y captulos en documentos largos y con varias partes.
Considerar duplicar encabezamientos de navegacin al final de las pginas. Evitar botones y enlaces del tipo retornar a o ir atrs Evitar el uso de paletas grficas de navegacin, si se usan combinar con texto.

Ofrecer siempre texto complementario a los grficos de navegacin.

La navegacin en el Web (2)

Cuando sea apropiado incluir tablas de contenido breves al inicio de las pginas
Poner encabezamiento de ttulo para cada pgina Poner en el encabezamiento del cdigo HTML el ttulo de cada pgina tratando que sea nico y se corresponda con el de la pgina Seleccionar un ttulo que resuma el contenido de la pgina

Ofrecer un servicio de bsqueda

Los grficos en el Web

Usar grficos que sean crticos para el contenido de la pgina Limitar el uso de imgenes grandes destinadas a llamar la atencin Mantener el tamao total de las imgenes en una pgina por debajo de los 30 K. Usar pequeas imgenes que apunten a imgenes ms grandes en caso de ser necesario.

Los grficos en el Web (2)

Evitar imgenes jpeg en pginas con amplias audiencias Alertar sobre el tamao de la imagen en caso de enlaces Minimizar el nmero de colores usados en una sola imagen. Si se usan muchas imgenes en una pgina considerar la audiencia y ancho de banda por la repeticin de enlaces al servidor. Incluir siempre texto alternativo para cada imagen <ALT=descripcin> Usar imgenes con fondo transparente para una mejor integracin con la pgina

Los grficos en el Web (3)

No referenciar grficos que estn fuera del servidor donde esta el Web para evitar demoras. Usar plecas grficas si tienen sentido solamente No abusar de reglas grficas horizontales Los grficos como plecas y otros que se repitan deben llamarse igual para aprovechar el cache de los visualizadores Ser cuidadosos con el uso de las imgenes de background Revisar las imgenes en diferentes visualizadores antes de ponerlas en el Web

Contenidos en el Web
Poner la mayor cantidad de contenido en lo ms alto de la jerarqua siempre que sea posible Ofrecer contenido til en cada pgina que sea vista por los usuarios Ofrecer valor en las pginas de manera que los usuarios las pongan en sus favoritos Ofrecer informaciones bien escritas, cortas, ricas en datos y hechos. Dar idea del carcter dinmico de la pgina mediante anuncios u otros medios Preparar la pgina para los diversos visualizadores incluida la opcin textual

Asegurando calidad en el Web

Probar cada enlace Verificar la sintaxis y construccin del HTML Mantener las pginas actualizadas Revisar la ortografa Escribir bien Escribir para todos los visualizadores, no slo Internet Explorer No usar la opcin de blink por favor

Asegurando calidad en el Web (2)

Poner fecha a todas las pginas Poner en todas las pginas la opcin de comentarios con un email asociado que alguien atienda Responder a quienes comentan las pginas Ser cuidadoso con el HTML producto de conversiones de procesadores de texto