Diseño y programación web para comercio electrónico Dr. Francisco J. Mata 1 Módulo 5 parte I...
-
Upload
encarna-galicia -
Category
Documents
-
view
5 -
download
0
Transcript of 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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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)
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
6
Definición y planificación Definición y planificación del sitiodel 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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
7
Definición y planificación Definición y planificación del sitiodel sitio
Servidor– Propio o uso de servicio de hospedaje
• Capacidad• Disponibilidad del servicio• Mantenimiento/respaldos• Software para la operación del sitio• Estadísticas
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
8
Definición y planificación Definición y planificación del sitiodel sitio
Presupuesto (etapas)– Desarrollo– Operación– Mantenimiento/mejoramiento
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
9
Definición y planificación Definición y planificación del sitiodel sitio
Presupuesto (rubros)– Salarios/honorarios– Hardware y software– Telecomunicación– Promoción del sitio
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
11
Arquitectura de la informaciónArquitectura de la información
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
12
Diseño del sitioDiseño del sitio
Se producen todos los componentes de
contenido, funcionales y lógicos
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
13
Diseño del sitioDiseñ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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
14
Diseño del sitioDiseño del sitio
Componentes funcionales y lógicos• Scripts y applets• Estructuras de bases de datos• Programación• Búsqueda
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
18
Mantenimiento, evaluación y Mantenimiento, evaluación y seguimiento del sitioseguimiento del sitio
Sitio necesita ser constantemente mejorado
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
20
Toda páginaToda página
• Título informativo
• Creador (empresa)
• Liga a la página principal
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
21
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
23
Esquemas de navegaciónEsquemas de navegación
• Cejillas
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
24
Esquemas de navegaciónEsquemas de navegación
• Menús
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
25
Esquemas de navegaciónEsquemas de navegación
• Texto
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
32
Estructura del sitioEstructura del sitio
Secuencias
Rejillas
Jerarquías
Webs
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
33
Estructura del sitioEstructura del sitio
Secuencias
Orden cronológicoGeneral a específicoAlfabético
ÍndicesGlosariosEnciclopedias
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
34
Estructura del sitioEstructura del sitio
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
35
Estructura del sitioEstructura del sitio
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
36
Estructura del sitioEstructura del sitio
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
37
Clasificación de estructurasClasificación de estructuras
•
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
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
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
39
Página principalPágina principal
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
40
Páginas principalesPáginas principales
• Menú
• Noticias
• Separación
• Splash
• Texto/menú
• Gráfico
• Gráfico/texto
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
41
MenúMenú
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
42
NoticiasNoticias
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
43
SeparaciónSeparación
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
44
SplashSplash
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
45
Texto y menuTexto y menu
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
46
GráficoGráfico
Diseño y programación web para comercio
electrónicoDr. Francisco J. Mata
47
Gráfico y textoGráfico y texto