Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 1 Módulo 5 parte II...

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



3


Contraste es esen-cial:balance apropiado entre atraer la vista con el contraste visual y proveer un sentido de organización



4


Evitar distracciones



5

Estructura de páginaEstructura de página

• Impacto visual• Predicitibilidad• Legibilidad



6

EncabezadoEncabezado

• Identidad del sitio

• “Firma”

• Vínculos de navegación básicos



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



8


Balance– Texto e imágenes

pequeñas– Juego de color



9


Área de impacto



10

Dimensión de páginasDimensión de páginas

Diferencia entre visualización e impresión



11

Elementos de una páginaElementos de una página

•



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



13


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



14

MarcosMarcos



15

Uso de marcosUso de marcos

• Posiciones encontradas



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



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)



18

Diseño de páginas para Diseño de páginas para comercio electrónicocomercio electrónico



19

Diseño de páginas para Diseño de páginas para comercio electrónicocomercio electrónico



20

TipografíaTipografía

• Buena tipografía depende del contraste visual entre– fuentes

– bloques de texto, títulos y espacios en blanco



21




22


• 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



23


Evite utilizar todas las letras mayúsculas en un título: rectángulos monótonos

Inicialize sólo la primera letra del título



24

Uso de bloquesUso de bloques

Líneas de texto entre 40-60 caracteres

Utilizar tablas invisibles (“border=0”)CellspadingCellspacing



25

FuentesFuentes

Legibilidad de una fuente está influen-ciada por la altura del caracter x



26

FuentesFuentes

Sans-serif:

Serif:



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



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



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



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



31

Definición de EstiloDefinición de Estilo

•



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



33




34


• Ventajas:– Separación de contenido y diseño– Control eficiente sobre documentos

grandes

• Desventajas:– Los navegadores ofrecen soporte

inconsistente e incompleto para el CSS



35

Inserción perfecta de Inserción perfecta de imágenesimágenes

• Diferencias entre navegado-res

• "LEFTMARGIN" and "TOPMARGIN"

8 pixels

8 pixels



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")



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



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)



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



40

InsertosInsertos

• Medio de promoción más explotado en el web: millones de páginas los tienen

• Pueden distraer al usuario



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.



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



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



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”



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



46

GráficosGráficos

• Formatos:– Graphic Interchange Format (GIF)– Joint Photographic Experts Group (JPEG)– Portable Network Graphic (PNG)



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)



48

GIFGIF



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)



50

Interlaced GIFInterlaced GIF



51

GIF transparenteGIF transparente

• Colores del gráfico se pueden hacer transparentes– Usualmente color de fondo



52

GIF transparenteGIF transparente



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



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



55

JPEGJPEG



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



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



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”



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)



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

Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 1 Módulo 5 parte II...

Documents

Transcript of Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 1 Módulo 5 parte II...