Diseño y programación web para comercio electrónico

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

Diseñ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ónico Dr. Francisco J. Mata

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

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

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

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

Pie 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ónico Dr. Francisco J. Mata

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

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

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

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

Esqueleto y dimensiones
Graphic "safe area" dimensions for layouts designed to print well: Maximum width = pixels Maximum height = 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ónico Dr. Francisco J. Mata

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

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

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

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

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

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

Tipografí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ónico Dr. Francisco J. Mata

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

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

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

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

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

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

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

É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ónico Dr. Francisco J. Mata

É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ónico Dr. Francisco J. Mata

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

Definición de Estilo Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

“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ónico Dr. Francisco J. Mata

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ónico Dr. Francisco J. Mata

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

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

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

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

“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ónico Dr. Francisco J. Mata

Insertos 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ónico Dr. Francisco J. Mata

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

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

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

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

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

Gráficos Formatos: Graphic Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphic (PNG) Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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

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

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

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

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

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

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

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

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

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

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

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

Ventajas de imágenes JPEG
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ónico Dr. Francisco J. Mata

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

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

Diseño y programación web para comercio electrónico

Presentaciones similares

Presentación del tema: "Diseño y programación web para comercio electrónico"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Diseño y programación web para comercio electrónico

Presentaciones similares

Presentación del tema: "Diseño y programación web para comercio electrónico"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback