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

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

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

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

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

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

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

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

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

Arquitectura de la informació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 del sitio Se producen todos los componentes de contenido, funcionales y lógicos 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 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ónico Dr. Francisco J. Mata

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

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

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

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

Mantenimiento, evaluación y seguimiento del sitio Sitio necesita ser constantemente mejorado 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 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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

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

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

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

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

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

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

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 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 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ónico Dr. Francisco J. Mata

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

Organización de la información Jerarquía Métodos consistentes de agrupamiento, orden, etiquetado y organización gráfica 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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 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 del sitio Secuencias Jerarquías Rejillas Webs 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 del sitio Secuencias Orden cronológico General a específico Alfabético Índices Glosarios Enciclopedias 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 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 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 del sitio 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 Rejillas Categoría A Componente 1 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 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 Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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

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

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

Diseño y programación web para comercio electrónico Páginas principales Menú Noticias Separación Splash Texto/menú Gráfico Gráfico/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 Menú Diseño y programación web para comercio electrónico Dr. Francisco J. Mata

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

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

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