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

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

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

Diseño y programación web para comercio electrónico 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 y programación web para comercio electrónico 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 y programación web para comercio electrónico Diseño de páginas Área de impacto Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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

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

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

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

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

Diseño y programación web 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

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

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

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

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

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

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

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

Diseño y programación web para comercio electrónico É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

Diseño y programación web para comercio electrónico É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

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

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

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

“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ó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

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

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

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

Diseño y programación web para comercio electrónico “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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Diseño y programación web para comercio electrónico Má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

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