diseño y programación web para comercio electrónico dr. francisco j. mata 1 módulo 5 parte ii...
TRANSCRIPT
![Page 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/6.jpg)
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
![Page 7: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/11.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
11
Elementos de una páginaElementos de una página
•
![Page 12: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/14.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
14
MarcosMarcos
![Page 15: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/15.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
15
Uso de marcosUso de marcos
• Posiciones encontradas
![Page 16: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/17.jpg)
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)
![Page 18: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/18.jpg)
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
![Page 19: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/21.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
21
TipografíaTipografía
![Page 22: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/26.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
26
FuentesFuentes
Sans-serif:
Serif:
![Page 27: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/30.jpg)
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
![Page 31: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/31.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
31
Definición de EstiloDefinición de Estilo
•
![Page 32: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/32.jpg)
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
![Page 33: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/33.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
33
““Cascading style sheets”Cascading style sheets”
![Page 34: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/34.jpg)
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
![Page 35: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/35.jpg)
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
![Page 36: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/36.jpg)
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")
![Page 37: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/37.jpg)
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
![Page 38: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/38.jpg)
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)
![Page 39: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/39.jpg)
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
![Page 40: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/40.jpg)
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
![Page 41: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/41.jpg)
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.
![Page 42: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/42.jpg)
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
![Page 43: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/43.jpg)
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
![Page 44: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/44.jpg)
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”
![Page 45: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/45.jpg)
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
![Page 46: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/46.jpg)
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)
![Page 47: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/47.jpg)
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)
![Page 48: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/48.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
48
GIFGIF
![Page 49: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/49.jpg)
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)
![Page 50: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/50.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
50
Interlaced GIFInterlaced GIF
![Page 51: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/51.jpg)
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
![Page 52: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/52.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
52
GIF transparenteGIF transparente
![Page 53: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/53.jpg)
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
![Page 54: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/54.jpg)
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
![Page 55: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/55.jpg)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
55
JPEGJPEG
![Page 56: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/56.jpg)
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
![Page 57: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/57.jpg)
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
![Page 58: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/58.jpg)
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”
![Page 59: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/59.jpg)
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)
![Page 60: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/60.jpg)
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
![Page 61: 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](https://reader035.vdocumento.com/reader035/viewer/2022081518/54e5ef684a795956398b45e1/html5/thumbnails/61.jpg)
Diseño y programación web para comercio electrónico
Dr. Francisco J. Mata 61
FINFIN