3. La página web
Tipos de sitios
• Weblog (o blog): para registrar lecturas o exponer diarios
online. Pede incluir foros.
• De empresa: para promocionar una empresa o servicio.
• De comercio electrónico: para comprar bienes.
(Amazon.com)
• De comunidad virtual: las personas con intereses
similares se comunican con otros, normalmente por chat o
foros. (MySpace, schoolfusion)
• De Base de datos: búsqueda y muestra de un contenido
específico de la base de datos (Internet Movie Database).
• De desarrollo: proporciona información y recursos
relacionados con el desarrollo de software, Diseño web, etc.
• Directorio: contiene contenidos variados que están divididos
en categorías y subcategorías, como el directorio de Yahoo!, el
directorio de Google y el Open Directory Project.
• De descargas: usado para descargar contenido electrónico,
como software, demos de juegos o fondos de escritorio.
(downloads.com)
• De juego o entretenimiento: es un "patio de recreo"
donde mucha gente viene a jugar, ver videos o escuchar
música. (MSN Games, Pogo.com y macrojuegos.
• De información: contenido que pretende informar a los
visitantes, no necesariamente de propósitos comerciales.
RateMyProfessors.com, Free Internet Lexicon and
Encyclopedia. La mayoría de los gobiernos y instituciones
educacionales y sin ánimo de lucro tienen un sitio de
información.
• De noticias: Similar a un sitio de información, pero dedicada
a mostrar noticias y comentarios.
• Buscador: proporciona información general y está pensado
como entrada o búsqueda para otros sitios. Google, Yahoo,
Altavista.
• Portal: proporciona un punto de inicio, entrada o portal a otros
recursos en Internet o una intranet.
• Shock: incluye materiales que tienen la intención de ser
ofensivos a la mayoría de visitantes. Ejemplos: rotten.com,
ratemypoo.com.
• Personal: Mantenido por una persona o un pequeño grupo
(como por ejemplo familia) que contiene información o cualquier
contenido que la persona quiere incluir.
• Wiki: los usuarios editan colaborativamente (por ejemplo:
Wikipedia).
• De Rating: un sitio donde la gente puede alabar o
menospreciar lo que aparece. Ejemplos: ratemycar.com,
ratemygun.com, ratemypet.com, sexyono.com.
Estructuras
• La estructura depende del contenido.
• Ayuda al creador a concretar sus ideas y sobre
todo a darle forma al cuerpo de información.
• Ubica al usuario y da como resultado “el mapa
del sitio” que se incluye en el mismo sitio.
Estructuras aplicaciones
web
Lineal
Todas las páginas están enlazadas en el
mismo nivel.
Para accesar a alguna página se tiene que
pasar por todas las anteriores a ésta.
Con opciones
Características: Página principal con varias
opciones a elegir.
Las páginas están enlazadas a las opciones de
tal forma que es sencillo desplazarse
entre ellas.
Estructuras
Jerárquica
Página principal con opciones descendentes.
Para accesar a los niveles inferiores hay que
pasar por los superiores. Se puede navegar entre
las páginas del mismo nivel.
Telaraña o Estilo Web
No existe jerarquía, no hay
una página principal específica,
pero sí una de acceso.
Se puede desplazar en el sentido y dirección
deseado sin necesidad de pasar por el mismo
lugar de donde se procede para llegar a otro.
Todo documento web
debe tener…
• Titulo informativo
(es el mismo texto que se guarda en
“Favoritos”).
•
•
•
•
Identidad del creador
Fecha de creación o actualización
Al menos un enlace a la página principal
La dirección URL de la página principal.
Accesibilidad
• Medidas para hacer más accesibles las
páginas:
• Estructurales. HTML NO ES LO IDEAL PARA LAS
ESTRUCTURAS VISUALES, lo óptimo son las CSS.
• Navegación. La navegación debe ser
completamente funcional usando teclas y de
una fácil orientación.
• Contenido alternativo: elementos visuales,
sonidos, scripts y applets deberían tener un texto
alternativo que explique el contenido de los
mismos.
Recomendaciones de W3C
para la accesibilidad
• Basadas en el documento:
Web Content Accesibility Guidelines 1.0
Son las recomendaciones mínimas para que una
página Web sea accesible. Si todas son
cumplidas, la página Web es "Conformace Level
A" y se puede mostrar este gráfico en las
páginas.
Existen también los niveles Double-A y Triple-A,
que dan una mayor accesibilidad a las páginas
Nivel A
• Proporcionar contenidos alternativos
equivalentes a los contenidos audiovisuales
• El texto y los gráficos deben ser comprensibles
sin el uso del color.
• Controlar la representación visual con hojas de
estilo.
• Usar marcas que faciliten la pronunciación e
interpretación de abreviaturas o texto en
diferente lenguajes.
• Crear tablas que se transformen
adecuadamente.
• Asegurarse que las páginas son accesibles
incluso cuando las nuevas tecnologías usadas
no son soportadas o están desactivadas.
• Asegurar el control de los elementos basados en
el tiempo (detener y pausa).
• Scripts y applets deben ser directamente
compatibles con tecnologías accesibles.
• Asegúrarse que el usuario pueda navegar con
el dispositivo que le resulte más adecuado.
• Use las tecnologías W3C
• Proporcione información de orientación y
contexto (titular todo)
• Proporcionar mecanismos claros de
navegación.
• Asegurarse que los documentos son claros y
simples.
Diseño de interfaz
• Diseño centrado en el usuario
–
–
–
–
–
–
–
Ayudas claras a la navegación
Evitar páginas que sean callejón sin salida
Acceso directo a la información
Interacción y ancho de banda
Simplicidad y consistencia
Integridad y estabilidad del diseño
Diálogo y retroalimentación
Diseño de interfaz
• Accesibilidad
–
–
–
–
Alternativas o fallbacks
Hojas de estilo
Directrices de accesibilidad
Degradación agradable
Diseño de interfaz
• Navegación
–
–
–
–
Indicar el contexto (dónde estoy)
Hacia atrás o página anterior
Barras de botones
Barras de desplazamiento
3.1 Arquitectura
– Dividir el contenido en unidades lógicas
(segmentar)
– Establecer jerarquía entre unidades
– Utilizar jerarquía para establecer vínculos
– Construir sitio de acuerdo a la información
– Analizar el éxito funcional y estético del sistema
– Crear diagrama y resumen
Entrada, bienvenida,
principal
•
•
•
•
•
Nivel estético, informativo, como menú.
Mayor visibilidad
Más visitada
Más actualizada si hay noticias.
Primer punto de contacto de interfaz
Principal
• Como menú
• Para mostrar noticias
• Orientada (divide al público,
información específica)
• Como portada
?Gráficos o texto?
Subpágina
Exploración
De contenido
Específicas para tareas
3. La página web
3.2 Soluciones para el
diseño web
Características
•
•
•
•
•
•
Claridad, orden y veracidad
Lógica y jerarquía visual
Contraste, armonía
Consistencia
Dimensiones
Zonas gráficas seguras (pantalla e impresión)
o contenidos que se escalan.
Características
• Zona segura para imprimir
Ancho máximo 560 px
Altura máxima 410 px sin barras de desplazamiento.
• Zona segura para tamaños maximizados
Ancho 760 px
Alto 410 px
Características
• Longitud de página
• Relación entre página y tamaño de pantalla
• Contenidos (si van a ser consultados o
impresos)
• Ancho de banda (tan grande como el ancho
de banda lo permita)
• Desplazamiento y división en bloques
Diseño textual
Metafórico y temático
Diseño orientado a GUI
Diseño no convencional
3. La página web
3.2 Disposición y retículas
Retícula
• Para la página maestra y derivadas
• Establece número, ubicación y terminología
de los principales elementos y enlaces que ha
de contener.
Retícula
• Basada en tablas de composición.
– Longitud de línea (12 palabras por línea como
máximo)
– Márgenes (pueden servir como parte de la interfaz,
establecen espacios)
– Columnas (dan funcionalidad y delimitan la lectura)
– Medianiles (cellpadding,cellspacing)
– Bordes
– Anchos fijos o adaptable
– Frames
– Layers
Cabecera-pie
• Cabecera para identidad del sitio y
relación con otras páginas.
• Pueden aparecer secciones ,
relaciones y banners
• Pie para procedencia.
Ventana flotante
• Amplía información o da otra
información relevante, publicidad.
Consideraciones de diseño
•
•
•
•
•
•
•
•
Adaptarse al medio
Incluir elementos fijos
No imponer el estilo editorial
Aprovechar los 10 cm superiores
Colores claros para fondos
Cuidado con “los ornamentos”
Visualizar en diferentes plataformas
Probar accesibilidad.
• Los usuarios no hacen scroll.La extensión
máxima es de pantalla y media. (El
usuario no sabe que hay más información).
• Si es mucho texto hacerlo en una
columna aunque sea extenso el scroll
vertical (el lector prefiere hacer copy-paste
de esta información que ir saltando en varios
vínculos. Incluir versiones imprimibles o PDF).
Enlaces
• Escriba como si no hubiese enlaces en el
texto
Es preferible:
• Gabriel García Márquez es uno de los máximos
exponentes de la novela latinoamericana.
• Gabriel García Márquez es un exponente de la
novela Latinoamericana (Más información, click
aquí).
• Elegir palabras significativas con longitudes
apropiadas.
• Resaltar el texto diferente
• Al realizar enlaces consecutivos similares, resalte
la información que diferencie unos enlaces de
otros y siempre pruebe todos los enlaces.
•
•
•
•
Textos de Economía.
Textos de Medicina.
Textos de Historia.
Textos de Educación.
•
•
•
•
Textos de Economía.
Textos de Medicina.
Textos de Historia.
Textos de Educación.
• Asegúrarse de que el lector conoce la
información a la que va acceder antes
de saltar
Si el enlace resulta no ser lo que
esperaba, se confunde y frustra al no
conseguir la información que desea.
• Los enlaces modifican el énfasis de la
frase y pueden distraer del tema
principal.
Más información
• http://www.imageandart.com/tutoriales/
web_design/proyecto_web/index.html
• http://www.imageandart.com/tutoriales/
web_design/guia_web/index.html
• http://www.nosolousabilidad.com/a
rticulos/sec_disciplinas.htm
Descargar

3. La página web