taller opencms creación de un portal fase de análisis y diseño arquitectura de información...

TALLER OpenCmsCreación de un portal

Fase de Análisis y DiseñoArquitectura de InformaciónDiseño GráficoUsabilidad y Accesibilidad

Fase de Desarrollo y ProducciónMaquetaciónDesarrolloPublicación

Contenido del tallerContenido del taller

Metodología Orientada al Usuario

Fase de Análisis y DiseñoFase de Análisis y Diseño

Identificación de contenidosRecopilación de funcionalidadesÍndice y etiquetado de contenidosMapa de navegación

Fase de Análisis y Diseño. AIFase de Análisis y Diseño. AI

Prototipo Baja Fidelidad

Fase de Análisis y Diseño. AIFase de Análisis y Diseño. AIPrototipo de baja fidelidad

cabecera

novedades productos

banner

rastro de migas

logo 1 logo 2

sección 1

sección 2

sección 3

sección 4

sección 5

Modelado de audienciaDiseño de estiloDiseño visualDiseño de contenidosEdición del Manual de Estilo

Fase de Análisis y Diseño. D. GráficoFase de Análisis y Diseño. D. Gráfico

Prototipo Alta Fidelidad

Fase de Análisis y Diseño. D. GráficoFase de Análisis y Diseño. D. GráficoPrototipo de alta fidelidad

Test HeurísticoTest de usuarioEdición del Manual de UsabilidadEdición de la Matriz de Usabilidad

Fase de Análisis y Diseño. UsabilidadFase de Análisis y Diseño. Usabilidad

Prototipo Desarrollo

Fase de Análisis y Diseño. AccesibilidadFase 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

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

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

En función a estos puntos de verificación se establecen unos niveles de conformidad:

Introducción

El nivel de conformidad “A” (A) incluye los puntos de verificación de prioridad

Introducción

El nivel de conformidad “Doble A” (AA) incluye los puntos de verificación de prioridad 2.

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadIntroducción

El nivel de conformidad “Triple A” (AAA) incluye los puntos de verificación de prioridad 3.

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadIntroducción

Alt para describir imágenesOrganizació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

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Guía breve

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios 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.

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios 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.

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

La hoja de estilos también puede validarse según lo que establece la normativa del W3C

("http://jigsaw.w3.org/css-validator/")

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)

La hoja de estilos se vincula con el documento html a través del elemento <link>, el cual debe ir situado en la sección <head>.

<html>

<head><title>Título</title><link rel="stylesheet" type="text/css“ href="estilos.css" />

</head>

<body> ……

<div class=”letraRoja”></div>……

</body>

</html>

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.

Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. XHTML

Sitios Web Accesibles. XHTML

Se puede validar gracias al validador oficial introduciendo el código html de las páginas del portal.

http://validator.w3.org

Definición

Fase de Análisis y Diseño. MaquetaciónFase 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).

¿Tablas o Capas? Tablas

En HTML las tablas surgen por la necesidad de mostrar datos tabulares.

Las etiquetas usadas son: <TABLE><TR><TD>contenido </TD>

</TR></TABLE>

VentajasDesarrollo más sencillo

DesventajasNo cumplen con los estándares de

accesibilidad.

Código resultante más complejo y menos legible.

¿Tablas o Capas? Capas (div)

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:

<DIV>contenido</DIV>

VentajasSeparació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

DesventajasNavegadores web:

Incompatibilidad con navegadores antiguos

Incoherencias visuales

Desarrollo mas complejo

Utilización de Capas y CSS

Configuración de PhotoshopCreación de HTML y CSSCabecera <HEAD>Cuerpo <BODY>La capa ContenedorEstructuración de la páginaCabeceraBloque centralPie de página

Edición: Preferencias / Generales

Selector del color Adobe

Preferencias / Unidades y reglasReglas PíxelesTipo Píxeles

Ajustes de colorRGB Adobe RGB (1998)

Diferencias de perfil: (todo marcado)Faltan perfiles: (todo marcado)

Utilización de Capas y CSS. Conf.Photoshop

Imágenes optimizadas para la Web:

Resolución de imagen 72 px/ ppp

Imagen / Modo

Color RGB (marcado)

8 bits / canal (marcado)

Utilización de Capas y CSS. Conf.PhotoshopFase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación

<title>Web ejemplo para el taller de imaginática</title>

</head> <body></body>

</html>

Utilización de Capas y CSS. HTML y CSS

HTML:<body>

//div contenedor</body>

CSS:body{ background-

color:#676767; text-align:center;}

Utilización de Capas y CSS. Cuerpo

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

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

Márgenes:- Hacemos zoom.- Observamos la ventana de información

EN HTML:<body><div id="contenedor"></div></body>

EN CSS: #contenedor {

width:752px; margin:auto; Text-align:left; margin-top:12px; }

Utilización de Capas y CSS. Contenedor

Utilización de Capas y CSS. Estructuración

EN HTML:

#bloqueIzd{

float:left;width:182px;

background- color:#EBEBEB;

padding-top:12px;

text-align:left; }

#bloquedcha{

float:left;width:570px;

background-color:#ffffff;}

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;}

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

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.

PNG, para elementos gráficos con transparencias, es una especificación de libre uso, no requiere pagar licencia.

HTML: <div id="cabecera"></div>

CSS: #Cabecera{background-

image:url(cabecera.gif);background-repeat:no-repeat;clear:both;width:752px;height:97px;}

Creamos una capa horizontal (cuerpo) que contiene 2 capas verticales (bloqueIzq, bloqueDcha).

EN HTML: <div id="cuerpo"> <div id="bloqueIzq"></div><div id="bloquedcha"></div> </div>

EN CSS: #cuerpo{clear:both;width:752px;background-color:#ffffff;float:left;}#bloqueIzd #bloquedcha{ {float:left; 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

HERRAMIENTA GRÁFICA- Recortamos la imagen y obtenemos el tamaño.

EN HTML: <div id="pie"></div>

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

EjerciciosEjercicios

EjerciciosEjerciciosEjercicio 1. Modificación de estilos IObtener 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 IICambiar el color de fondo de la Web de blanco a negro.Ejercicio 3. Modificación de estilos IIIObtener 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 interfazCambiar 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 ISustitución de la fuente tipográfica Verdana por la Cominc Sans.Ejercicio 6. Estilo tipografías IISustitución del tamaño de la fuente de 11 a 12 px.Ejercicio 7. Estilo tipografías IIISustitución del color de las fuentes de color negro (#00000) a color blanco Ejercicio 8. Estilo tipografías IVSustituir las fuentes en color azul, por el color amarillo obtenido en el ejercicio 3.

• 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ónFase de Desarrollo y Producción

taller opencms creación de un portal fase de análisis y diseño arquitectura de información...

Documents

modelo assure - fase de diseño de objetivos

criterios tÉcnicos y de diseÑo quioscos-bar fase i

da 1 fase concepcion diseño

planificación fase diseño (content curation)

diseño de pasaraela peatonal fase 3

ingeniería de diseño para aprobación orionoil eno 2016...

asador zaragoza diseño carta - fase 8 · diseño carta -...

capitulo iv diseÑo del sistema de control 1. fase …

proyecto de accesos y acondicionamiento de viario de los...

“diseño curricular con el enfoque de competencias”...

opencms instalación y puesta en marcha opencms hispano ...

diseño de un convertidor de fase rotativo capitulo ii

la fase de diseño

análisis de operaciones. fase 9. diseño de trabajo

fase de diseño de servicios itil

traductor tramat para opencms

presentación de fase de diseño de base de datos

diseño lògico fase 1

ingenierÍa, marketing y comunicaciÓn · 6 03 diseÑo de...

fase 1: trabajos preliminares · 2019-02-09 · fase 1:...