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

menu

banner

banner

pie

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

<html><head>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1“>

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

<link rel="stylesheet" href="imagenes/estilos.css" type="text/css">

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



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



SI SI

NO SI

EN HTML:

<div id="contenedor"> <div id="cabecera"></div> <div id="cuerpo"> <div id="bloqueIzq"></div> <div id="bloquedcha"></div> </div> <div id="pie"></div></div>







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

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

WEB 1


EjerciciosEjercicios

WEB 2


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