TALLER OpenCms Creación de un portal Fase de Análisis y Diseño Arquitectura de Información Diseño Gráfico Usabilidad y Accesibilidad Fase de Desarrollo.

Presentación del tema: "TALLER OpenCms Creación de un portal Fase de Análisis y Diseño Arquitectura de Información Diseño Gráfico Usabilidad y Accesibilidad Fase de Desarrollo."— Transcripción de la presentación:

1

2 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño Arquitectura de Información Diseño Gráfico Usabilidad y Accesibilidad Fase de Desarrollo y Producción Maquetación Desarrollo Publicación Contenido del taller

3 Metodología Orientada al Usuario TALLER OpenCms Creación de un portal Fase de Análisis y Diseño

4 TALLER OpenCms Creación de un portal Identificación de contenidos Recopilación de funcionalidades Índice y etiquetado de contenidos Mapa de navegación Fase de Análisis y Diseño. AI

5 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. AI Prototipo de baja fidelidad

6 TALLER OpenCms Creación de un portal Modelado de audiencia Diseño de estilo Diseño visual Diseño de contenidos Edición del Manual de Estilo Fase de Análisis y Diseño. D. Gráfico

7 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. D. Gráfico Prototipo de alta fidelidad

8 TALLER OpenCms Creación de un portal Test Heurístico Test de usuario Edición del Manual de Usabilidad Edición de la Matriz de Usabilidad Fase de Análisis y Diseño. Usabilidad

9 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Hablar de Accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, navegador, idioma y capacidades de los usuarios. Introducción

10 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Con esta idea de accesibilidad nace la Iniciativa de Accesibilidad Web, conocida como WAI (Web Accessibility Initiative). Se trata de una actividad desarrollada con el objetivo de facilitar el acceso de las personas con discapacidad. Introducción

11 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Consta de tres prioridades: La Prioridad 1 que tiene que satisfacerse o algunos grupos de personas serán incapaces de acceder a la información de un sitio. La Prioridad 2 que debe satisfacerse o alguien encontrará muchas dificultades para acceder a la información. La Prioridad 3 que puede satisfacerse o algunas personas hallarán dificultades para acceder a la información. Introducción

12 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad En función a estos puntos de verificación se establecen unos niveles de conformidad: Introducción

13 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad El nivel de conformidad “A” (A) incluye los puntos de verificación de prioridad Introducción

14 El nivel de conformidad “Doble A” (AA) incluye los puntos de verificación de prioridad 2. TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Introducción

15 El nivel de conformidad “Triple A” (AAA) incluye los puntos de verificación de prioridad 3. TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Introducción

16 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Alt para describir imágenes Organización de las páginas. Hojas de estilos (CSS) Scripts, applets y plug-ins: contenido alternativo si no son accesibles. Revisar el trabajo:Test de accesibilidad Web (http://www.tawdis.net/descargas.php). Sitios Web Accesibles. Guía breve

17 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Guía breve

18 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Beneficios Es un requisito legal. Amplía el mercado al incrementar el número de usuarios. Menor coste de mantenimiento. Imagen de responsabilidad y compromiso social.

19 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo Se elimina el código superfluo, haciendo las páginas más ligeras y navegables y asegurando al mismo tiempo una plena accesibilidad.

20 Se aconsejan fuentes como Arial, Verdana y similar con tamaño 11 píxeles: Creación de un portal en Opencms Dado que son fuentes de sistema y están disponibles en todos los S.O. Creación de un portal en Opencms TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo

21 La hoja de estilos también puede validarse según lo que establece la normativa del W3C ("http://jigsaw.w3.org/css-validator/") TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo

22 Selector:Indica que elementos van a ser afecatdos por esa declaración. Declaración:Establece cual será el efecto. letraRoja{ <- (selector) font-family:Verdana, Arial; font-size: 11px; color:red; <- (declaración) } TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo

23 La hoja de estilos se vincula con el documento html a través del elemento, el cual debe ir situado en la sección. TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo

24 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. Hojas de Estilo Título <link rel="stylesheet" type="text/css“ href="estilos.css" /> …… ……

25 XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML, que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso con las herramientas basadas en XML. TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Sitios Web Accesibles. XHTML

26 TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Accesibilidad Se puede validar gracias al validador oficial introduciendo el código html de las páginas del portal. http://validator.w3.org

27 Definición TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Entendemos por maquetar una página web a traducir un prototipo de alta fidelidad en un prototipo de desarrollo mediante un lenguaje de marcas (HTML).

28 ¿Tablas o Capas? Tablas TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación En HTML las tablas surgen por la necesidad de mostrar datos tabulares. Las etiquetas usadas son: contenido

29 ¿Tablas o Capas? Tablas TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Ventajas Desarrollo más sencillo

30 ¿Tablas o Capas? Tablas TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Desventajas No cumplen con los estándares de accesibilidad. Código resultante más complejo y menos legible.

31 ¿Tablas o Capas? Capas (div) TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación La maquetación por capas es la utilizada por los desarrolladores que cumplen los estándares. Empleo de hojas de estilo en cascada (CSS). Las etiquetas usadas son: contenido

32 ¿Tablas o Capas? Capas (div) TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Ventajas Separación del contenido de la página y el aspecto con el que se deben mostrar Mayor precisión en el diseño. Ahorro en la transferencia Mayor facilidad de actualización sin alterar la codificación

33 ¿Tablas o Capas? Capas (div) TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Desventajas Navegadores web: Incompatibilidad con navegadores antiguos Incoherencias visuales Desarrollo mas complejo

34 Utilización de Capas y CSS TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Configuración de Photoshop Creación de HTML y CSS Cabecera Cuerpo La capa Contenedor Estructuración de la página Cabecera Bloque central Pie de página

35 Edición: Preferencias / Generales Selector del color  Adobe Preferencias / Unidades y reglas Reglas  Píxeles Tipo  Píxeles Ajustes de color RGB  Adobe RGB (1998) Diferencias de perfil: (todo marcado) Faltan perfiles: (todo marcado) Utilización de Capas y CSS. Conf.Photoshop TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

36 Imágenes optimizadas para la Web: Resolución de imagen  72 px/ ppp Imagen / Modo Color RGB (marcado) 8 bits / canal (marcado) TALLER OpenCms Creación de un portal Utilización de Capas y CSS. Conf.Photoshop Fase de Análisis y Diseño. Maquetación

37 Web ejemplo para el taller de imaginática Utilización de Capas y CSS. HTML y CSS TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

38 HTML: //div contenedor CSS: body { background-color:#676767; text-align:center; } Utilización de Capas y CSS. Cuerpo TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

39 Utilización de Capas y CSS. Cuerpo TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación Obtención del color de fondo: - Cogemos el cuentagotas. - Hacemos doble click en el color Frontal  - Obtenemos el código Hexadecimal en la ventana “selector del color”.

40 Creamos una capa principal denominada contenedor que contendrá todas las demás. HERRAMIENTA GRÁFICA (Photoshop) Obtención del tamaño: - Seleccionamos el área. - Observamos la ventana de información  Utilización de Capas y CSS. Contenedor TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

41 Márgenes: - Hacemos zoom. - Observamos la ventana de información EN HTML: EN CSS: #contenedor { width:752px; margin:auto; Text-align:left; margin-top:12px; } Utilización de Capas y CSS. Contenedor TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

42 Utilización de Capas y CSS. Estructuración TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación SI NO SI

43 EN HTML : Utilización de Capas y CSS. Estructuración TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

44 Utilización de Capas y CSS. Estructuración TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación #bloqueIzd { float:left; width:182px; background- color:#EBEBEB; padding-top:12px; text-align:left; } #bloquedcha { float:left; width:570px; background-color:#ffffff;} #pie { clear:both; Float:left; width:752px; height:91px; background-image:url(pie.gif); background-position: left bottom; background-repeat: no-repeat; text-align:right;} EN CSS: #Contenedor #Cabecera { background- image:url(cabecera.gif); background-repeat:no-repeat; margin-bottom:1px; clear:both; width:752px; height:97px;} #cuerpo { clear:both; width:752px; background-color:#ffffff; float:left;}

45 Herramienta gráfica - Recorte de la imagen: - Nos colocamos en la capa a recortar. - Seleccionamos el área. - Copiamos en una hoja nueva. - Obtenemos el tamaño, (ventana “info”). - Guardamos para la Web. Utilización de Capas y CSS. Cabecera TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

46 Guardar para la Web: -Jgp, gif o png. -JPG, para fotografías digitales y elementos gráficos sin transparencias. Optimizamos la calidad, (óptimo 40). Marcamos Progresivo. -GIF, para elementos gráficos con transparencias. Adaptable y sin tramado. Optimizamos colores, (óptimo 32). Marcar transparencias. Marcar entrelazado. Mate, para transparencias con color de fondo. Utilización de Capas y CSS. Cabecera TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

47 PNG, para elementos gráficos con transparencias, es una especificación de libre uso, no requiere pagar licencia. HTML: CSS: #Cabecera { background-image:url(cabecera.gif); background-repeat:no-repeat; clear:both; width:752px; height:97px;} Utilización de Capas y CSS. Cabecera TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

48 Creamos una capa horizontal (cuerpo) que contiene 2 capas verticales (bloqueIzq, bloqueDcha). EN HTML: EN CSS: #cuerpo { clear:both; width:752px; background-color:#ffffff; float:left; } #bloqueIzd#bloquedcha { float:left; width:182px;width:570px; background-color:#EBEBEB;background-color:#ffffff; padding-top:12px; } text-align:left;} Utilización de Capas y CSS. Bloque central TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

49 HERRAMIENTA GRÁFICA - Recortamos la imagen y obtenemos el tamaño. EN HTML: EN CSS: #pie { clear:both; width:752px; height:91px; background-image:url(pie.gif); background-position: left bottom; background-repeat: no-repeat; text-align: right;} Utilización de Capas y CSS. Pie de página TALLER OpenCms Creación de un portal Fase de Análisis y Diseño. Maquetación

50 TALLER OpenCms Creación de un portal Ejercicios WEB 1

51 TALLER OpenCms Creación de un portal Ejercicios WEB 2

52 TALLER OpenCms Creación de un portal Ejercicios Ejercicio 1. Modificación de estilos I Obtener el color azul del escudo de Opencms. Cambiar el color gris del fondo de la pantalla por el color azul obtenido anteriormente. Ejercicio 2. Modificación de estilos II Cambiar el color de fondo de la Web de blanco a negro. Ejercicio 3. Modificación de estilos III Obtener el color amarillo representado en la cabecera. Sustituir el color gris del menú de la izquierda de la Web, por el obtenido anteriormente. Ejercicio 4. Sustitución de elementos gráficos de la interfaz Cambiar el color la parte blanca de la imagen del pie a color negro y la parte gris al color amarillo obtenido en el ejercicio 3. Ejercicio 5. Estilo tipografías I Sustitución de la fuente tipográfica Verdana por la Cominc Sans. Ejercicio 6. Estilo tipografías II Sustitución del tamaño de la fuente de 11 a 12 px. Ejercicio 7. Estilo tipografías III Sustitución del color de las fuentes de color negro (#00000) a color blanco Ejercicio 8. Estilo tipografías IV Sustituir las fuentes en color azul, por el color amarillo obtenido en el ejercicio 3.

53 Visita rapida por OpenCms Navegador de recursos Separación de datos, diseño y logica Diferencia proyectos offline y online Vistas de OpenCms Fase de Desarrollo y Producción TALLER OpenCms Creación de un portal