Usabilidad y Arquitectura de la Información de las aplicaciones web

Domingo, 27 de diciembre de 2009 | 4 comentarios home title

La usabilidad de una aplicación web es mucho más fácil de revisar utilizando un Inventario de Contenido, es decir, una lista del contenido de un sitio web, y, si usamos una clase principal con referencias (punteros) a las clases que construyen la plataforma de información web nos será más fácil acceder al contenido para elaborar dicha lista.

He desarrollado sitios web donde el contenido ha sido adquirido gracias a las entradas de los usuarios, sus propias búsquedas son las generadoras de datos…, sus necesidades crean un punto de referencia que se ha tenido en cuenta en la Arquitectura de la Información, almacenándose para ser utilizadas en próximas visitas.

Diseño de Procesos

Para organizar dicha información se utilizan estructuras de datos, normalmente matrices (vector

es) de varios tipos que almacenan el texto de una búsqueda, su url en formato amigable para los buscadores, el números de veces que se ha repetido la misma búsqueda y otros datos opcionales como la fecha y la hora de la petición/creación de una nueva entrada en la tabla de información, nombre del usuario, procedencia, idioma, etc.

Al observar este informe APEI sobre Usabilidad me he llevado una grata sorpresa al descubrir que el esquema de wireframe utilizado para una web:

es precisamente el que utilizo en mis aplicaciones web,

Ejemplo 1:

Ejemplo 2:

Existen un conjunto de herramientas muy útiles para diseñar la AI fácilmente:

fluidIA: herramienta para generar varias ideas simultáneamente construyendo sobre una pizarra prototipos de interfaces enriquecidas
Omnigraffle: Recursos de la AI para este programa , más información aquí
Text 2 Mind Map : una web para crear nuestros árboles de conceptos.

Teoría aplicable de la Arquitectura de la Información:

Análisis de secuencia: ¿cuál es la secuencia idónea para llegar a una página de contenido?
Documentos guía (objetivos y usuarios del sitio, así como las tareas que éstos realizarán)
Análisis de contexto o benchmarking (análisis de sitios web similares)
Inventario de contenidos (antes mencionado)
Tag line (una frase para describir el sitio web)
SEO (Search Engine Optimization), SEM(Search Engine Marketing) y SMO (Social Media Optimization): métodos
Card sorting (cómo organizan sus usuarios los contenidos del sitio web): leer más
Bluprints y rotulación (mapas de interacción, diseño de información) [blueprint ejemplo (.PDF)]
Perfiles y escenarios (personificación de los tipos de usuarios del sitio web y las posibles tareas que éstos pueden realizar) [personas .PDF]
Wireframes(prototipos de baja o alta fidelidad que materializan gráficamente el proceso de diseño de información e interacción, navegación, rotulación hecho previamente).
Shades of Gray: ejemplo en PDF de un WireFrame
Análisis del Valor de los Contenidos
Mapa para IC: (.DOC), Aproximación de un Inventario de Contenidos utilizando un Mapa de Metro
Plantilla para administración de tareas
Esquema para un mapa del sitio (.XLS)
Ejemplo de diagrama de flujo (.PDF) y otro ejemplo con bloques (.PDF)
Métodos de Arquitectura de Información para la organización de contenidos en el diseño de sitios web universitarios: unicauca.edu.co, un caso práctico

Presentaciones sobre AI:

A Process By Any Other Name…
(Powerpoint) 91_Presentation_Desc.ppt (188 kb)
Polansky_Artifact_Assessment.vss (88 kb)
Polansky_Site_Map.vss (222 kb)
Polansky_Wireframe.vss (143 kb)
(Powerpoint) Leise-IAforIndexers.ppt (188 kb)
Leise-IAforIndexers.pdf (217 kb)Submitted by Fred Leise, May, 2004Why IA Matters
(Powerpoint) Morville-WhyIaMatters.ppt (1.7 MB)
Morville-WhyIaMatters.pdf (958 kb)
Introducción a la AI
(Powerpoint) Maurer-IAIntro.ppt (2 MB)
Maurer-IAIntro.pdf (3.9 MB)
(Powerpoint) Bailey-IAIntro.ppt (1.4 MB)
Bailey-IAIntro.pdf (600 kb)

Plantillas para desarrollo de contenidos:

HoweContentTool.xls (21 kb)
john-howe_desenvolvimento-de-conteudo.xls (In Portuguese, 44 kb)
Submitted by John Howe, February 6, 2004
RiceContentInventory.xls (6.6 MB)
Submitted by Sarah A. Rice, April 19, 2004

Plantillas Wireframe

LombardiWireframe.vst (177 kb, Visio)
LombardiWireframe.vdx (754 kb, Omnigraffle)
LombardiWireframe.pdf (16 kb, Illustrator)
SmithWireframe.vst (147 kb)
SmithWireframe.vdx (1 MB, Omnigraffle)
SmithWireframe.pdf (11 kb, Illustrator)
(Illustrator) WarfelWireframe.ai (660 kb)
WarfelWireframe.pdf (5.1 MB)
(Powerpoint) CavazzaWireframe.ppt (120 kb)
CavazzaWireframe.pdf (496 kb)
GarrettDimon_Wireframes_2003.vsd (Visio 2003, 733 kb)
GarrettDimon_Wireframes_2002.vsd (Visio 2002, 692 kb)

(más…)

Aplicación PHP para gestionar un Departamento de Universidad

Jueves, 10 de diciembre de 2009 | 4 comentarios home title

Otra demostración de cómo se puede adaptar el framework zenphp.
En este ejemplo multilenguaje desarrollado para el Departamento de Filología Inglesa y Alemana de la Universidad de Granada se utilizan categorías con subcategorías sin límite, como extra, se pueden añadir programas en ellas así como una contraseña para limitar la visibilidad además de asociar ficheros y documentos.

Otro programa diseñado a medida en este proyecto es el de búsqueda de profesores, la versión actual utiliza AJAX para mostrar todos los docentes cuyos apellidos empiezan por la letra seleccionada, además se puede observar la cantidad de campos personalizables y ficheros adjuntos que trae cada perfil incluída la imagen del usuario.

Las categorías editables se van colocando en el orden establecido dentro de un menú dinámico en javascript así como ,al entrar en cada una de ellas aparecen sus artículos y subcategorías en varios niveles.

El contenido multimedia se puede incrustar fácilmente gracias a los editores HTML online o WYSIWYG (What you See Is What You Get), con estilos prefijados por CSS compartidos entre clientes y administradores de la aplicación web de departamentos de universidades.

El diseño es de Agencia Q4.

Generador de menús online con XML y PHP

Miércoles, 25 de noviembre de 2009 | sin comentarios home title

Este generador de menús fue realizado hace años con el primer prototipo de zenphp.
La configuración de los platos de este restaurante con menú online se hace a través de XML y otros datos son guardados en base de datos relacional. Se utiliza una impresora de tickets como las utilizadas en los terminales punto de venta, que imprime los “vales” de los menús aceptados para ser enviados a sus clientes, habiendo hecho efectivo previamente el abono del importe a través de la pasarela de pago.

Se pueden añadir varios tipos de platos por día, así como bebidas, un programa en AJAX permite la edición y preselección de nuestro menú para toda la semana de modo que nos es posible pagar y recibir la comida sin tener que preocuparnos por nada gracias a la automatización de procesos entre el cliente y el proveedor.

La plantilla utilizada fue creada por un diseñador Web y existen varios temas disponibles (azul, rojo por defecto),…y usa el motor de plantillas del prototipo de framework zenphp: fast-template. Existe un calendario con el menú (los platos disponibles) para cada día de forma que se pueden asignar parámetros como el precio, la cantidad de platos para ese día en stock, etc. y otras variables que completan la experiencia de usuario/administrador haciéndola más cómoda, para saber más acerca de la optimización ,puede leer más acerca del framework php en español utilizado.

El diseño web Agencia Q4.

Gestor de contenidos con últimas tecnologías web

Domingo, 20 de septiembre de 2009 | sin comentarios home title

En este sitio web se comparte el funcionamiento de la edición de artículos para distintas clases de categorías, se hace uso de tecnologías como RSS para sindicar el contenido de dichos artículos y noticias asi como de validaciones con prototype y scriptaculous para terminar con un rápido funcionamiento general gracias al framework zenphp. La administración del contenido se hace a través de una aplicación web diseñada a tal efecto de forma que se puede añadir,editar o borrar cualquier parte de la web fácilmente, cualquiera podría hacerlo y además se ajusta a las necesidades de los usuarios, de hecho trae un algoritmo único de galería de imágenes y de mapa de imagen para colocar los barrios del pueblo de las Gabias en Granada.

Vídeo en YouTube con explicaciones

El diseño corre a cargo de la empresa Agencia Q4.

Todas las noticias

Domingo, 20 de septiembre de 2009 | sin comentarios home title

Últimas entradas desde GranadaPHP – La Comunidad Granadina de Programadores PHP

Desde el Blog del Framework PHP Zenphp.es

Aplicaciones web escalables con potencialidades sin límites - Escabilidad: Sistema de aplicaciones Atómico Cuando empecé a programar en PHP allá por el año 2005 ya pensaba que no quería mezclar código HTML con PHP, es por esto mismo que los creadores del lenguaje PHP creyeron que era mejor si se utilizaban objetos, capas, separación, jerarquías, etc. , es decir, su deseo era crear [...]
Consultas avanzadas y plantillas simples - Cuando tenemos un sistema de aplicaciones web multidominio, las tareas como comprobar si un fichero existe cuando está en otro dominio virtual se pueden complicar. Con el framework zenphp es fácil evitar el problema enfocándolo de una manera práctica y sencilla, he aprendido muchísimo desde que empecé con él en el año 2005, este truco [...]