La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

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

Presentaciones similares


Presentación del tema: "Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 1 Módulo 5 parte II Diseño para sitios web."— Transcripción de la presentación:

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

2 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 2 Diseño de páginas Jerarquía visual: elementos visuales se enfatizan y contenido se organiza de manera lógica y predicible

3 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 3 Diseñ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

4 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 4 Diseño de páginas Evitar distracciones

5 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 5 Estructura de página Impacto visual Predicitibilidad Legibilidad

6 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 6 Encabezado Identidad del sitio Firma Vínculos de navegación básicos

7 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 7 Pie de página Origen, versión de la página Navegación –Acerca de la compañía –Contacto –Políticas

8 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 8 Diseño de páginas Balance –Texto e imágenes pequeñas –Juego de color

9 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 9 Diseño de páginas Área de impacto

10 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 10 Dimensión de páginas Diferencia entre visualización e impresión

11 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 11 Elementos de una página

12 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 12 Esqueleto 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 13 Diseñ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

14 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 14 Marcos

15 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 15 Uso de marcos Posiciones encontradas

16 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 16 Argumentos en contra para 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 17 Argumentos a favor del uso 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 y programación web para comercio electrónico Dr. Francisco J. Mata 18 Diseño de páginas para comercio electrónico

19 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 19 Diseño de páginas para comercio electrónico

20 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 20 Tipografía Buena tipografía depende del contraste visual entre –fuentes –bloques de texto, títulos y espacios en blanco

21 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 21 Tipografía

22 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 22 Tipografí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

23 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 23 Tipografí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

24 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 24 Uso de bloques Líneas de texto entre caracteres Utilizar tablas invisibles (border=0) Cellspading Cellspacing

25 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 25 Fuentes Legibilidad de una fuente está influen- ciada por la altura del caracter x

26 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 26 Fuentes Sans-serif: Serif:

27 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 27 Fuentes 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 28 É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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 29 É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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 30 Tí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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 31 Definición de Estilo

32 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 32 Cascading style sheets Provee control sobre el estilo exacto de los encabezados, párrafos, listas y otros elementos de la página

33 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 33 Cascading style sheets

34 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 34 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

35 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 35 Inserción perfecta de imágenes Diferencias entre navegado- res "LEFTMARGIN" and "TOPMARGIN" 8 pixels

36 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 36 Colores 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 37Colores 01- Agua Motivación Acción Dinámico 02- Lavanda Romántico Inventiva Fantasía 03- Verde Crecimiento Abundancia Vigor 04- Anaranjado Feliz Coraje Éxito 05- Amarillo Entusiástico Festividad Optimismo 06- Azul Tranquilidad Intuitivo Fidedigno 07- Magenta Violento Imaginativo Innovador 08- Turquesa Refrescante Fresco Imaginativo 09- Rojo Energía Decisión Pasión 10- Café Estabilidad Fidedigno 11- Indigo Conocimiento Poder Integridad 12- Oro Iluminación Sabiduría 13- Púrpura Espiritual Apasionado Visionario 14- Light Pacífico Sincero Cariñoso 15- Rosado Amistoso Compasivo Fiel

38 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 38 Ví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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 39 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 40 Insertos Medio de promoción más explotado en el web: millones de páginas los tienen Pueden distraer al usuario

41 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 41 Insertos 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 42 Insertos 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 43 Insertos 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 44 Insertos 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 45 Otras 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 46 Gráficos Formatos: –Graphic Interchange Format (GIF) –Joint Photographic Experts Group (JPEG) –Portable Network Graphic (PNG)

47 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 47 GIF 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 48 GIF

49 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 49 Interlaced 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 50 Interlaced GIF

51 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 51 GIF transparente Colores del gráfico se pueden hacer transparentes –Usualmente color de fondo

52 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 52 GIF transparente

53 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 53 GIF 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 54 JPEG 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 55 JPEG

56 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 56 PNG 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 57 Usos 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 58 Ventajas 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 59 Ventajas de imágenes JPEG Altos radios de compresión son posibles Funciona bien con fotografías Soporta color verdadero (24 bits)

60 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 60 Más información Libro: –www.webstyle.comwww.webstyle.com Evolución de un sitio web: –Wayback machine:

61 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 61 FIN


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

Presentaciones similares


Anuncios Google