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.

Presentación del tema: "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."— Transcripción de la presentación:

1 3. La página web

2 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). 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).

3 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.

4 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.

5 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.

6

7

8 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. 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.

9 Estructuras aplicaciones web 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. 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.

10 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.

11

12 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.

13 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. 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.

14 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 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

15 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. 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.

16 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.

17 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.

18 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 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

19

20 Diseñ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

21 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 Navegación –Indicar el contexto (dónde estoy) –Hacia atrás o página anterior –Barras de botones –Barras de desplazamiento

22 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 –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

23

24

25

26

27

28 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 Nivel estético, informativo, como menú. Mayor visibilidad Más visitada Más actualizada si hay noticias. Primer punto de contacto de interfaz

29 Principal 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?

30 Subpágina Exploración De contenido Específicas para tareas

31

32 3. La página web 3.2 Soluciones para el diseño web

33 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. 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.

34 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 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

35

36 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 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

37 Diseño textual Metafórico y temático Diseño orientado a GUI Diseño no convencional

38 3. La página web 3.2 Disposición y retículas

39 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. 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.

40 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 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

41

42

43 Cabecera-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.

44 Ventana flotante Amplía información o da otra información relevante, publicidad.

45 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. 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.

46 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).

47 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. 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.

48 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.

49 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. 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.

50

51 Más información http://www.imageandart.com/tutoriales/ web_design/proyecto_web/index.htmlhttp://www.imageandart.com/tutoriales/ web_design/proyecto_web/index.html http://www.imageandart.com/tutoriales/ web_design/guia_web/index.htmlhttp://www.imageandart.com/tutoriales/ web_design/guia_web/index.html http://www.nosolousabilidad.com/a rticulos/sec_disciplinas.htmhttp://www.nosolousabilidad.com/a rticulos/sec_disciplinas.htm http://www.imageandart.com/tutoriales/ web_design/proyecto_web/index.htmlhttp://www.imageandart.com/tutoriales/ web_design/proyecto_web/index.html http://www.imageandart.com/tutoriales/ web_design/guia_web/index.htmlhttp://www.imageandart.com/tutoriales/ web_design/guia_web/index.html http://www.nosolousabilidad.com/a rticulos/sec_disciplinas.htmhttp://www.nosolousabilidad.com/a rticulos/sec_disciplinas.htm