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
TALLER OpenCmsCreación de un portal
Fase de Análisis y DiseñoFase de Análisis y Diseño
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. D. GráficoFase de Análisis y Diseño. D. GráficoPrototipo de alta fidelidad
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase 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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase 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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. Accesibilidad
En función a estos puntos de verificación se establecen unos niveles de conformidad:
Introducción
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. Accesibilidad
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.
TALLER OpenCmsCreación de un portal
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.
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadIntroducción
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. Accesibilidad
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Guía breve
TALLER OpenCmsCreación de un portal
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.
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Hojas de Estilo
La hoja de estilos también puede validarse según lo que establece la normativa del W3C
("http://jigsaw.w3.org/css-validator/")
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Hojas de Estilo
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 OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Hojas de Estilo
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>.
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Hojas de Estilo
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. Hojas de Estilo
<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.
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase de Análisis y Diseño. AccesibilidadSitios Web Accesibles. XHTML
Sitios Web Accesibles. XHTML
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. AccesibilidadFase 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
Definición
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
En HTML las tablas surgen por la necesidad de mostrar datos tabulares.
Las etiquetas usadas son: <TABLE><TR><TD>contenido </TD>
</TR></TABLE>
¿Tablas o Capas? Tablas
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
VentajasDesarrollo más sencillo
¿Tablas o Capas? Tablas
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
DesventajasNo cumplen con los estándares de
accesibilidad.
Código resultante más complejo y menos legible.
¿Tablas o Capas? Capas (div)
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase 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:
<DIV>contenido</DIV>
¿Tablas o Capas? Capas (div)
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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
¿Tablas o Capas? Capas (div)
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
DesventajasNavegadores web:
Incompatibilidad con navegadores antiguos
Incoherencias visuales
Desarrollo mas complejo
Utilización de Capas y CSS
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
Imágenes optimizadas para la Web:
Resolución de imagen 72 px/ ppp
Imagen / Modo
Color RGB (marcado)
8 bits / canal (marcado)
TALLER OpenCmsCreación de un portal
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
HTML:<body>
//div contenedor</body>
CSS:body{ background-
color:#676767; text-align:center;}
Utilización de Capas y CSS. Cuerpo
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
Utilización de Capas y CSS. Cuerpo
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase 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”.
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 OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
Utilización de Capas y CSS. Estructuración
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetació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>
Utilización de Capas y CSS. Estructuración
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
Utilización de Capas y CSS. Estructuración
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase 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;}
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 OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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 OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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;}
Utilización de Capas y CSS. Cabecera
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
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
TALLER OpenCmsCreación de un portal
Fase de Análisis y Diseño. MaquetaciónFase de Análisis y Diseño. Maquetación
TALLER OpenCmsCreación de un portal
EjerciciosEjercicios
WEB 1
TALLER OpenCmsCreación de un portal
EjerciciosEjercicios
WEB 2
TALLER OpenCmsCreación de un portal
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 OpenCmsCreación de un portal
Top Related