Post on 19-Feb-2015
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata 1
Módulo 5Módulo 5parte IIparte II
Diseño para sitios web
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
2
Diseño de páginasDiseño de páginas
Jerarquía visual:elementos visuales se enfatizan y contenido se organiza de manera lógica y predicible
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
3
Diseño de páginasDiseño de páginas
Contraste es esen-cial:balance apropiado entre atraer la vista con el contraste visual y proveer un sentido de organización
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
4
Diseño de páginasDiseño de páginas
Evitar distracciones
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
5
Estructura de páginaEstructura de página
• Impacto visual• Predicitibilidad• Legibilidad
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
6
EncabezadoEncabezado
• Identidad del sitio
• “Firma”
• Vínculos de navegación básicos
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
7
Pie de páginaPie de página
• Origen, versión de la página
• Navegación– Acerca de la compañía– Contacto– Políticas
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
8
Diseño de páginasDiseño de páginas
Balance– Texto e imágenes
pequeñas– Juego de color
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
9
Diseño de páginasDiseño de páginas
Área de impacto
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
10
Dimensión de páginasDimensión de páginas
Diferencia entre visualización e impresión
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
11
Elementos de una páginaElementos de una página
•
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
12
Esqueleto y dimensionesEsqueleto y dimensiones
Graphic "safe area" dimensions for layouts designed to print well: Maximum width = 535 pixels Maximum height = 295 pixels Graphic "safe area" dimensions for layouts designed to maximize screen usage: Maximum width = 595 pixels Maximum height = 295 pixels
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
13
Diseño de páginasDiseño de páginas
Consistencia:establecer un esquema y estilo pata textos y gráficos y aplicarlos a todas la páginas en el sitio
Crea ritmo y unidad
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
14
MarcosMarcos
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
15
Uso de marcosUso de marcos
• Posiciones encontradas
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
16
Argumentos en contra Argumentos en contra para el uso de marcospara el uso de marcos
• Rompen el modelo fundamental de la página• Reducen el espacio para mostrar la
información• No todos los usuarios podrán visualizarlos• Impresión resulta difícil• Usuario no sabe dónde va a aparecer la
información
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
17
Argumentos a favor del Argumentos a favor del uso de marcosuso de marcos
• Proveen una forma consistente de dar estructura al sitio
• Permite partir la página en archivos HTML separados
• Proveen interactividad adicional (dar click en un enlace, cambia contenido del otro marco)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
18
Diseño de páginas para Diseño de páginas para comercio electrónicocomercio electrónico
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
19
Diseño de páginas para Diseño de páginas para comercio electrónicocomercio electrónico
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
20
TipografíaTipografía
• Buena tipografía depende del contraste visual entre– fuentes
– bloques de texto, títulos y espacios en blanco
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
21
TipografíaTipografía
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
22
TipografíaTipografía
• Alineamiento:– Márgenes son vitales– Alineamiento para bloques de texto:
• Alineamiento al centro o a la derecha es difícil de leer
• Alineamiento a la izquierda es mejor• Justificación es deseable si no aparecen
muchos espacios o división de palabras
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
23
TipografíaTipografía
Evite utilizar todas las letras mayúsculas en un título: rectángulos monótonos
Inicialize sólo la primera letra del título
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
24
Uso de bloquesUso de bloques
Líneas de texto entre 40-60 caracteres
Utilizar tablas invisibles (“border=0”)CellspadingCellspacing
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
25
FuentesFuentes
Legibilidad de una fuente está influen-ciada por la altura del caracter x
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
26
FuentesFuentes
Sans-serif:
Serif:
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
27
FuentesFuentes
• Utilice una fuente serif como Times New Roman o Georgia para el texto
• Utilice fuente sans serif como Verdana o Arial para los títulos
• Especifique las fuentes utilizando la cláusula FONT FACE in HTML
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
28
ÉnfasisÉnfasis
• Negrita: buen énfasis pero no debe usarse en bloques muy grandes pues pierde efectividad
• Itálica: atrae la vista pero su resolución es menor
• Subrayado: puede confundirse con un vínculo
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
29
ÉnfasisÉnfasis
• Texto en otro color: puede confundirse con los vínculos; use colores oscuros y diferentes de los utilizados para los hipervínculos
• LETRAS MAYÚSCULAS: evitarlas
• Espaciado e identación– Aislar y tratar diferente al texto
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
30
Títulos como bitmapsTítulos como bitmaps
• Para ofrecer letra estándar y más resaltada
• Problema: No interpretable – incluir texto dentro ALT tag para que pueda ser buscado y indexado
• Para mayor legibilidad – Antialiased
• Difícil mantenimiento
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
31
Definición de EstiloDefinición de Estilo
•
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
32
““Cascading style sheets”Cascading style sheets”
• Provee control sobre el estilo exacto de los encabezados, párrafos, listas y otros elementos de la página
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
33
““Cascading style sheets”Cascading style sheets”
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
34
““Cascading style sheets”Cascading style sheets”
• Ventajas:– Separación de contenido y diseño– Control eficiente sobre documentos
grandes
• Desventajas:– Los navegadores ofrecen soporte
inconsistente e incompleto para el CSS
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
35
Inserción perfecta de Inserción perfecta de imágenesimágenes
• Diferencias entre navegado-res
• "LEFTMARGIN" and "TOPMARGIN"
8 pixels
8 pixels
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
36
ColoresColores
• El color es utilizado para influenciar la forma cómo ve el usuario la página
• Seleccione los colores y manténgalos en todo el sitio
• Colores acordes al mensaje
• Cuando se especifican los colores, utilice códigos hexadecimales ("#FF0000")
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
37
ColoresColores
01- Agua Motivación Acción Dinámico02- Lavanda Romántico Inventiva Fantasía 03- Verde Crecimiento Abundancia Vigor04- Anaranjado Feliz Coraje Éxito 05- Amarillo Entusiástico Festividad Optimismo 06- Azul Tranquilidad Intuitivo Fidedigno07- Magenta Violento Imaginativo Innovador08- Turquesa Refrescante Fresco Imaginativo09- Rojo Energía Decisión Pasión10- Café Estabilidad Fidedigno11- Indigo Conocimiento Poder Integridad12- Oro Iluminación Sabiduría13- Púrpura Espiritual Apasionado Visionario14- Light Pacífico Sincero Cariñoso15- Rosado Amistoso Compasivo Fiel
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
38
VínculosVínculos
• No se deben poner enlaces hacia sitios sin utilidad y sin ninguna explicación aparente
– Perder al cliente• Enlaces relacionados con el tema
• No es recomendable usar los colores clásicos de los enlaces para escribir texto normal (azul, rojo y violeta)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
39
““Scrolls”Scrolls”
• A la mayoría de la gente no le es agradable visualizar páginas muy grandes
• En caso de ser necesario, la creación de páginas grandes es recomendable – Crear al principio una tabla de contenidos que
facilite la visualización y lectura de la misma
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
40
InsertosInsertos
• Medio de promoción más explotado en el web: millones de páginas los tienen
• Pueden distraer al usuario
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
41
InsertosInsertos
• Consejos de diseño:• Deben capturar la atención del usuario
– “MÍREME A MÍ”
• Los insertos animados capturan mejor la atención, los estáticos tienen poca efectividad
• Utilizar frases que impliquen curiosidad, humor, miedo o preguntas es muy efectivo:
– “Sabía usted que...”, “Es usted de las personas que...”, “Precaución, usted podría...”, etc.
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
42
InsertosInsertos
• Consejos de diseño (cont.):• Incluir logo, dirección web o identificación
gráfica del sitio para que se grabe en la memoria de los navegantes
• Tamaño: – 468 x 60 pixeles– no más de 10 Kb
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
43
InsertosInsertos
• Consejos de diseño (cont.):• Uso de colores brillantes más que oscuros: azul,
amarillo, naranja y verde• Realizar contrastes efectivos: amarillo sobre fondo rojo
en vez de verde sobre fondo azul
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
44
InsertosInsertos
• Consejos de diseño (cont.):• Evitar hacer falsas promesas: se obtendrá
visitantes disgustados que no recomendarán el sitio
• Incluir texto que implique pulsar el inserto aumenta la cantidad de visitas:
– “Pulse aquí”, “Click aquí”, “Pulse para continuar”
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
45
Otras recomendacionesOtras recomendaciones
• 20 ó 30 segundos, es el tiempo máximo de atención sostenida
• Diseñe la página principal para que la información que contiene pueda ser leída y analizada en ese tiempo
• Evite páginas muy cortas que obligan constantemente a usar navegación – longitud razonable => pantalla y media
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
46
GráficosGráficos
• Formatos:– Graphic Interchange Format (GIF)– Joint Photographic Experts Group (JPEG)– Portable Network Graphic (PNG)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
47
GIFGIF
• Graphic Interchange Format• Popularizado por CompuServe en los 80s• La mayoría de las imágenes en el web están
en este formato• Utilizan un esquema de compresión para
mantener los archivos en un mínimo de tamaño y están limitados a una paleta de 8 bits (compresión LZW)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
48
GIFGIF
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
49
Interlaced GIFInterlaced GIF
• Permite cargar una versión de baja resolución primero y luego se amplía la resolución
• Buena opción para imágenes grandes
• No se debe utilizar para imágenes pequeñas (barras de navegación, botones, íconos)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
50
Interlaced GIFInterlaced GIF
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
51
GIF transparenteGIF transparente
• Colores del gráfico se pueden hacer transparentes– Usualmente color de fondo
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
52
GIF transparenteGIF transparente
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
53
GIF animadosGIF animados
• El formato de archivo GIF permite la combinación de múltiples imágenes para crear animación
• Compresión no se realiza entre las imágenes
• Puede distraer a los usuarios
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
54
JPEGJPEG
• Joint Photographic Experts Group• Imágenes en color verdadero (24 bits)• Usa técnica matemática sofisticada de
compresión– Elimina datos innecesarios– Compresión de pérdida– Archivos hasta 100 veces más pequeños
que los originales
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
55
JPEGJPEG
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
56
PNGPNG
• Portable Network Graphic– Uso de GIF requiere pagar regalías a
CompuServe y a UNISYS
• Diseñado para páginas Web– Mayor rango de colores– Transparencia de imágenes más sofisticada– Mejor “interlacing”
• Aún no es soportado por los navegadores
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
57
Usos de GIF y JPEGUsos de GIF y JPEG
• GIF para la mayoría de los elementos gráficos de las páginas
• JPEG para fotografías o ilustraciones fotográficas
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
58
Ventajas de imágenes GIFVentajas de imágenes GIF
• Buen soporte visual en los navegadores
• Imágenes esquemáticas lucen mejor como GIF que JPEG
• Soporta transparencia e “interlacing”
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
59
Ventajas de imágenes Ventajas de imágenes JPEGJPEG
• Altos radios de compresión son posibles
• Funciona bien con fotografías
• Soporta color verdadero (24 bits)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
60
Más informaciónMás información
• Libro:– www.webstyle.com
• Evolución de un sitio web:– Wayback machine:
• http://www.archive.org/web/web.php
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata 61
FINFIN