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 I 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 I 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 I Diseño para sitios web

2 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 2 Antes de empezar Defina las metas y objetivos del proyecto: Misión de la organización –Sitio WEB debe soportar la misión de la organización Metas inmediatas Metas a largo plazo Manera de medir el éxito del sitio WEB

3 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 3 Conozca a su audiencia Usuarios potenciales del sitio web –web surfers home page análogas a portadas de revista explicación concisa de que existe en el sitio que pueda ser de interés –novatos y usuarios ocasionales se intimidan con menús de texto complejo –usuarios frecuentes y expertos requieren información rápida, son impacientes –usuarios internacionales pueden requerir traducción, comprensión (no abreviar fechas)

4 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 4 Proceso de desarrollo del sitio WEB 1.Definición y planificación del sitio 2.Arquitectura de la información 3.Diseño del sitio 4.Construcción del sitio 5.Mercadeo del sitio 6.Mantenimiento, evaluación y seguimiento del sitio

5 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 5 Definición y planificación del sitio Consideraciones estratégicas –Propósito y metas del sitio –Audiencia meta y sus expectativas –Equipo de producción Personal interno Contratación externa Mezcla de los dos –Administrador del proceso –Expertos en contenido –Webmaster/Editor del sitio

6 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 6 Definición y planificación del sitio Tecnología –Navegadores que se soportarán –Lenguaje de hipertexto/scripting/plug-ins a utilizar –Apoyo de bases de datos Sitio dinámico versus estático Registro de visitantes –Contenido Texto Gráficos Video/audio –Promedio de visitantes y ancho de banda –Soporte técnico y su contacto

7 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 7 Definición y planificación del sitio Servidor –Propio o uso de servicio de hospedaje Capacidad Disponibilidad del servicio Mantenimiento/respaldos Software para la operación del sitio Estadísticas

8 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 8 Definición y planificación del sitio Presupuesto (etapas) –Desarrollo –Operación –Mantenimiento/mejoramiento

9 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 9 Definición y planificación del sitio Presupuesto (rubros) –Salarios/honorarios –Hardware y software –Telecomunicación –Promoción del sitio

10 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 10 Arquitectura de la información Contenido y organización del sitio: especificación detallada de diseño descripción del contenido del sitio –mapa/tabla de contenido especificación de soporte técnico –navegadores/velocidad/servidor requerimientos de programación calendario de implementación prototipos de páginas diseño gráfico múltiple y boceto para el diseño de interfaz

11 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 11 Arquitectura de la información

12 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 12 Diseño del sitio Se producen todos los componentes de contenido, funcionales y lógicos

13 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 13 Diseño del sitio Componentes de contenido Texto Diseño gráfico para todas las páginas Diseño de la interfase Ilustraciones y fotografías

14 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 14 Diseño del sitio Componentes funcionales y lógicos Scripts y applets Estructuras de bases de datos Programación Búsqueda

15 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 15 Construcción del sitio Páginas web construídas listas para pruebas: HTML finalizado para cada página estructuras de ligas de navegación concluidas programación lista para pruebas de tipo beta componentes de base de datos en su lugar y ligados a las páginas pruebas de reporte producidos a partir de la base de datos archivos de todos los componentes de contenido: –Código HTML –Código de programación

16 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 16 Mercadeo del sitio El sitio web debe ser parte integral del mercadeo de la empresa: –anuncios impresos –anuncios por radio y TV –campañas de correo directo –papelería/tarjetas de presentación –manuales y empaque de productos

17 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 17 Mantenimiento, evaluación y seguimiento del sitio Bitácoras Tráfico Ubicación usuarios Navegador utilizado Páginas más visitadas Tiempo dedicado a las páginas

18 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 18 Mantenimiento, evaluación y seguimiento del sitio Sitio necesita ser constantemente mejorado

19 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 19 Diseño de la interfaz Se siguen principios de diseño de documentos: –Quién siempre diga al lector quien escribió la página –Qué títulos claros para capturar la atención de los lectores –Cuándo número de versión, fechas de revisión y creación –Dónde afiliación, lugar

20 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 20 Toda página Título informativo Creador (empresa) Liga a la página principal

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

22 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 22 Sugerencias para la navegación No se debe perder el sentido de donde se está dentro de la organización de la información Usuarios deben poder acceder páginas adentro del sitio. Si no existen vínculos en una página esta es un callejón sin salida

23 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 23 Esquemas de navegación Cejillas

24 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 24 Esquemas de navegación Menús

25 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 25 Esquemas de navegación Texto

26 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 26 Acceso directo y ancho de banda Los usuarios desean obtener información en los mínimos pasos posibles: Se debe diseñar una eficiente jerarquía de información que minimice los paso a través de páginas de menú Los usuarios no toleran largas esperas: Si se orienta el sitio web a usuarios que se conectan vía modem no es conveniente usar gráficos grandes en las páginas

27 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 27 Botones hacia atrás y adelante y barras de botones Ir hacia atrás a través de una serie de ligas que se visitaron previamente no es lo mismo que ir hacia atrás a través una ordenada secuencia de páginas Las barras de botones pueden también desplegar información de localización y ligas a la página principal o a otras páginas de menú relacionadas

28 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 28 Diseño del Sitio –Organización de la información Divida el contenido en unidades –Estructura del sitio Ponga la información en orden lógico –Temas del diseño del sitio La información estará gobernada por objetivos –Elementos del sitio Diseñe para actuar como recurso de información –Diseño Intranet vrs. Internet Audiencia dentro de la organización o fuera de ella

29 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 29 Organización de la información –Divida su contenido en unidades lógicas –Establezca una jerarquía de importancia entre las unidades –Use la jerarquía para estructurar las relaciones entre las unidades –Construya el sitio para que siga la estructura de su información –Construya el sitio para una experiencia de compra –Analice la funcionalidad y la estética del sistema

30 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 30 Organización de la información Métodos consistentes de agrupamiento, orden, etiquetado y organización gráfica Jerarquía Relaciones Si se confunde al usuario con una estructura que no es lógica o predecible éste se sentirá frustrado por las dificultades de navegación

31 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 31 Organización de la información Esquemas de menú muy profundos entierran la información muchas capas abajo La meta es producir un árbol jerárquico bien balanceado que facilite el rápido acceso a la información y ayude a los usuarios a entender como están organizadas las cosas

32 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 32 Estructura del sitio Secuencias Rejillas Jerarquías Webs

33 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 33 Estructura del sitio Secuencias Orden cronológico General a específico Alfabético Índices Glosarios Enciclopedias

34 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 34 Estructura del sitio Jerarquías Mayoría de sitios se encuentran organizados alrededor de una página principal Mejor manera de organizar cuerpos complejos de información La mayoría de los usuarios comprenden bien esta estructura Requiere que el material esté bien organizado

35 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 35 Estructura del sitio Rejillas Categoría A Componente 1 Correlacionan variables Unidades de información deben compartir una estructura muy uniforme de categorías y componentes Los usuarios deben reconocer la interrelación de la información Manuales de procedimientos Listas de cursos en universidades

36 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 36 Estructura del sitio Telaraña Favorece el pensamiento asociativo permitiendo que los usuarios sigan sus intereses en patrones únicos, heurísticos e idiosincráticos Pueden ser difíciles de entender y de predecir para los usuarios

37 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 37 Clasificación de estructuras

38 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 38 Elementos del sitio –Página principal Más visitada Más visible –30 pulgadas cuadradas superiores –3 pulgadas superiores Similar al periódico la posición importa Base para la navegación

39 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 39 Página principal

40 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 40 Páginas principales Menú Noticias Separación Splash Texto/menú Gráfico Gráfico/texto

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

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

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

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

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

46 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 46 Gráfico

47 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 47 Gráfico y texto


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

Presentaciones similares


Anuncios Google