diseño y programación web para comercio electrónico dr. francisco j. mata 1 módulo 5 parte i...

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

Dr. Francisco J. Mata 1

Módulo 5Módulo 5parte Iparte I

Diseño para sitios web

Diseño y programación web para comercio

electrónicoDr. Francisco J. Mata

2

Antes de empezarAntes 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

Conozca a su Conozca a su audienciaaudiencia

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 ocasionalesse intimidan con menús de texto complejo

– usuarios frecuentes y expertos requieren información rápida, son impacientes

– usuarios internacionalespueden requerir traducción, comprensión (no abreviar fechas)



4

Proceso de desarrolloProceso de desarrollodel sitio WEBdel sitio WEB

1. Definición y planificación del sitio2. Arquitectura de la información3. Diseño del sitio4. Construcción del sitio5. Mercadeo del sitio6. Mantenimiento, evaluación y seguimiento del sitio



5

Definición y planificación Definición y planificación del sitiodel 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


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


Servidor– Propio o uso de servicio de hospedaje

• Capacidad• Disponibilidad del servicio• Mantenimiento/respaldos• Software para la operación del sitio• Estadísticas



8


Presupuesto (etapas)– Desarrollo– Operación– Mantenimiento/mejoramiento



9


Presupuesto (rubros)– Salarios/honorarios– Hardware y software– Telecomunicación– Promoción del sitio



10

Arquitectura de la Arquitectura de la informacióninformació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

Arquitectura de la informaciónArquitectura de la información



12

Diseño del sitioDiseño del sitio

Se producen todos los componentes de

contenido, funcionales y lógicos



13


Componentes de contenido• Texto• Diseño gráfico para todas las páginas• Diseño de la interfase• Ilustraciones y fotografías



14


Componentes funcionales y lógicos• Scripts y applets• Estructuras de bases de datos• Programación• Búsqueda



15

Construcción del sitioConstrucció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

Mercadeo del sitioMercadeo 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

Mantenimiento, evaluación y Mantenimiento, evaluación y seguimiento del sitioseguimiento del sitio

Bitácoras• Tráfico• Ubicación usuarios• Navegador utilizado• Páginas más visitadas• Tiempo dedicado a las páginas



18

Mantenimiento, evaluación y Mantenimiento, evaluación y seguimiento del sitioseguimiento del sitio

Sitio necesita ser constantemente mejorado



19

Diseño de la interfazDiseñ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ándonúmero de versión, fechas de revisión y creación

– Dónde afiliación, lugar



20

Toda páginaToda página

• Título informativo

• Creador (empresa)

• Liga a la página principal



21



22

Sugerencias para Sugerencias para la navegaciónla navegación

No se debe perder el sentidode donde se está dentro de laorganizació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

Esquemas de navegaciónEsquemas de navegación

• Cejillas



24


• Menús



25


• Texto



26

Acceso directoAcceso directoy ancho de banday 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

Botones hacia atrás y adelante y Botones hacia atrás y adelante y barras de botonesbarras 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 del SitioDiseñ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

Organización deOrganización dela informaciónla 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

Organización deOrganización dela informaciónla información

Métodos consistentes de agrupamiento, orden, etiquetado y organización gráfica

Jerarquía

Relaciones

Si se confunde al usuario conuna estructura que no es lógica o predecible éste se sentiráfrustrado por las dificultadesde navegación



31

Organización deOrganización dela informaciónla informaciónEsquemas de

menú muy profundosentierran la información

muchas capas abajo

La meta es producir un árboljerárquico bien balanceado que facilite el rápido acceso a la información y ayude a los usuarios a entender comoestán organizadas las cosas



32

Estructura del sitioEstructura del sitio

Secuencias

Rejillas

Jerarquías

Webs



33


Secuencias

Orden cronológicoGeneral a específicoAlfabético

ÍndicesGlosariosEnciclopedias



34


Jerarquías Mayoría de sitios se encuentran organizados alrededor de una página principalMejor manera de organizar cuerpos complejos de informaciónLa mayoría de los usuarios comprenden bien esta estructuraRequiere que el material esté bien organizado



35


RejillasCategoría

A

Componente1

Correlacionan variablesUnidades de información deben compartir una estructura muy uniforme de categorías y componentesLos usuarios deben reconocer la interrelación de la información

Manuales de procedimientosListas de cursos en universidades



36


TelarañaFavorece 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

Clasificación de estructurasClasificación de estructuras

•



38

Elementos del sitioElementos 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

Página principalPágina principal



40

Páginas principalesPáginas principales

• Menú

• Noticias

• Separación

• Splash

• Texto/menú

• Gráfico

• Gráfico/texto



41

MenúMenú



42

NoticiasNoticias



43

SeparaciónSeparación



44

SplashSplash



45

Texto y menuTexto y menu



46

GráficoGráfico



47

Gráfico y textoGráfico y texto

diseño y programación web para comercio electrónico dr. francisco j. mata 1 módulo 5 parte i...

Documents