Embed Size (px)
Citation preview
3. La página web3. La página web
Tipos de sitiosTipos 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).
• 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 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.
• 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.
• 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.
EstructurasEstructuras
• 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.
• 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 webEstructuras aplicaciones web
Con opcionesCon opcionesCaracterísticas:Características: Página principal con Página principal con varias opciones a elegir.varias opciones a elegir.
Las páginas están enlazadas a las Las páginas están enlazadas a las opciones de tal forma que opciones de tal forma que es sencillo es sencillo desplazarsedesplazarse entre ellas.entre ellas.
LinealLinealTodas las páginas están enlazadas en el Todas las páginas están enlazadas en el mismo nivel.mismo nivel.Para accesar a alguna página se tiene Para accesar a alguna página se tiene que que pasar por todas las anteriorespasar por todas las anteriores a a ésta.ésta.
EstructurasEstructuras
JerárquicaJerárquicaPágina principal con Página principal con opciones opciones descendentes.descendentes.Para accesar a los niveles inferiores hay Para accesar a los niveles inferiores hay que pasar por los superiores. Se puede que pasar por los superiores. Se puede navegar entre las páginas del mismo nivel.navegar entre las páginas del mismo nivel.
Telaraña o Estilo WebTelaraña o Estilo WebNo existe jerarquíaNo existe jerarquía, no hay , no hay una página principal específica, una página principal específica, pero sí una de acceso.pero sí una de acceso.Se Se puede desplazar en el sentido y puede desplazar en el sentido y dirección deseadodirección deseado sin necesidad de pasar sin necesidad de pasar por el mismo lugar de donde se procede por el mismo lugar de donde se procede para llegar a otro.para llegar a otro.
Todo documento web debe tener…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.
• 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.
AccesibilidadAccesibilidad
• 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.
• 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 accesibilidadRecomendaciones 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
• 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 ANivel 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.
• 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.
• 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.
• 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 interfazDiseñ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 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 interfazDiseño de interfaz
• Accesibilidad– Alternativas o fallbacks– Hojas de estilo– Directrices de accesibilidad– Degradación agradable
• Accesibilidad– Alternativas o fallbacks– Hojas de estilo– Directrices de accesibilidad– Degradación agradable
Diseño de interfazDiseño de interfaz
• Navegación– Indicar el contexto (dónde estoy)– Hacia atrás o página anterior– Barras de botones– Barras de desplazamiento
• Navegación– Indicar el contexto (dónde estoy)– Hacia atrás o página anterior– Barras de botones– Barras de desplazamiento
3.1 Arquitectura3.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
– 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, principalEntrada, 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
• Nivel estético, informativo, como menú.• Mayor visibilidad• Más visitada• Más actualizada si hay noticias.• Primer punto de contacto de interfaz
PrincipalPrincipal
• Como menú• Para mostrar noticias• Orientada (divide al público,
información específica)• Como portada
?Gráficos o texto?
• Como menú• Para mostrar noticias• Orientada (divide al público,
información específica)• Como portada
?Gráficos o texto?
SubpáginaExploraciónDe contenidoEspecíficas para tareas
SubpáginaExploraciónDe contenidoEspecíficas para tareas
3. La página web3. La página web
3.2 Soluciones para el diseño web
3.2 Soluciones para el diseño web
CaracterísticasCaracterí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.
• 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ísticasCaracterísticas
• Zona segura para imprimirAncho máximo 560 pxAltura máxima 410 px sin barras de
desplazamiento.
• Zona segura para tamaños maximizados
Ancho 760 pxAlto 410 px
• Zona segura para imprimirAncho máximo 560 pxAltura máxima 410 px sin barras de
desplazamiento.
• Zona segura para tamaños maximizados
Ancho 760 pxAlto 410 px
CaracterísticasCaracterí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
• 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 textualMetafórico y temáticoDiseño orientado a GUIDiseño no convencional
Diseño textualMetafórico y temáticoDiseño orientado a GUIDiseño no convencional
3. La página web3. La página web
3.2 Disposición y retículas3.2 Disposición y retículas
RetículaRetí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.
• 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ículaRetí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
• 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-pieCabecera-pie
• Cabecera para identidad del sitio y relación con otras páginas.
• Pueden aparecer secciones , relaciones y banners
• Pie para procedencia.
• Cabecera para identidad del sitio y relación con otras páginas.
• Pueden aparecer secciones , relaciones y banners
• Pie para procedencia.
Ventana flotanteVentana flotante
• Amplía información o da otra información relevante, publicidad.
• Amplía información o da otra información relevante, publicidad.
Consideraciones de diseñoConsideraciones 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.
• 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).
• 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).
EnlacesEnlaces
• 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.
• 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.
• 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 saltarSi 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.
• Asegúrarse de que el lector conoce la información a la que va acceder antes de saltarSi 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ónMá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/articulos/sec_disciplinas.htm
• 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/articulos/sec_disciplinas.htm
