lunes, 23 de noviembre de 2009

Bibliografía

•Usabilidad, Prioridad en el diseño web, Jakob Nielsen, editorial ANAYA, 1era edición.
•Usabilidad, la gran desconocida, artículo publicado en la revistaE.comm (No Sept, 2000).
•No me hagas pensar, una aproximación a la usabilidad en la web, Steve Krug. Editorial Prentice Hall.

4.2 Principios de la usabilidad

Los principios de la usabilidad son reglas de diseño orientado al usuario. El diseño de sitios web debe seguir los siguientes principios:

Los 10 principios desarrollados por Jakob Nielsen (2001) constituyen la base de la evaluación heurística:

Visibilidad del estado del sistema: El sistema debe siempre mantener informado a los usuarios de lo que ocurre, con un correcto feedback en un tiempo razonable.
Correspondencia entre el sistema y el mundo real: El sistema debe hablar el lenguaje de los usuarios con palabras, frases y conceptos familiares. Sigue las convenciones del mundo real. Haz que la información aparezca en forma natural y lógica.
Control y libertad del usuario: Los usuarios frecuentemente eligen opciones por error, por eso indica una salida clara a esas situaciones no deseadas sin necesidad de pasar por extensos diálogos.
Consistencia y estándares: Los usuarios no tienen que adivinar que las diferentes palabras, situaciones o acciones significan lo mismo.
Evitar errores: Un diseño cuidado que previene problemas es mejor que unos buenos mensajes de error.

Reconocimiento: Haz objetos, acciones y opciones visibles. El usuario no tiene que recordar información de una parte a otra. Las instrucciones de uso del sistema deben estar visibles o ser fácilmente recuperables.
Flexible y eficiente: Diseña un sistema que pueda ser utilizado por un rango amplio de usuarios. Brinda instrucciones cuando sean necesarias para nuevos usuarios sin dificultar el camino de usuarios avanzados. Permite a los usuarios avanzados ir directamente al contenido que buscan.
Diseño minimalista: No hay que mostrar información irrelevante. Cada pedazo de información extra compite con la importante y disminuye su relativa visibilidad.
Reconocer, diagnosticar y recuperarse de los errores: Para ayudar a los usuarios, los mensajes de error deben estar escritos en lenguaje sencillo, indicar el problema de forma precisa e indicar una solución.
Ayuda y documentación: Facilita siempre una documentación o ayuda. La información debe ser fácil de encontrar, está dirigida a las tareas de los usuarios, lista los pasos concretos para hacer algo y es breve.

1. Anticipación: El sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía: Los usuarios deben tener el control sobre el sitio web.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores.
4. Consistencia: Se debe considera el conocimiento previo del usuario
5. Eficiencia del usuario: Los sitios web se deben centrar en la experiencia del usuario.
6. Reversibilidad: Un sitio web ha de permitir deshacer las acciones realizadas.
7. Ley de Fitts: Iindica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo.
8. Reducción del tiempo: Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje: los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
10. Metáforas: El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.

4.1 Definición de usabilidad

La usabilidad es la medida en la que se presenta la calidad en los sistemas de información interactivos, de tal manera que equilibra la productividad, navegabilidad, accesibilidad y optimización, de acuerdo al grado al objetivo que se desea cumplir.

La usabilidad no solo pretende lograr un equilibrio entre los desarrollos tecnológicos óptimos y los requisitos del cliente, del mercado y los objetivos de la empresa, sino favorecer la interacción constante y actualizada entre las herramientas Web, sus gestores y sus usuarios.
La usabilidad se refiere a la rapidez y facilidad con la que los usuarios realizan sus tareas al utilizar una interface. Usabilidad significa, por lo tanto, centrarse en la audiencia potencial de las páginas, estructurar el sitio de acuerdo a sus necesidades y organizar la navegación de manera que le permita encontrar lo que busca. Requiere construir un sistema interactivo que mejor responda a las tareas a realizar. Por ello, el principio estratégico que debe guiar todo diseño de un sitio web es tener como referencia las necesidades del usuario, las demandas de los posibles clientes.

¿Por qué es importante la usabilidad?

Cuando se realiza un sitio web, los gestores de proyecto no le dan la importancia necesaria a la realización del análisis de usabilidad de sus páginas, considerándolo innecesaria, cuando en realidad, las páginas que resultan ser más eficaces son aquellas diseñadas especialmente para el usuario.
Un punto importante a tener en cuenta es que el diseño debe basarse en crear una interacción positiva con el usuario.
•Intercambio de valores con el usuario: Cualquier desarrollo Web debe realizarse con la idea de intensificar y optimizar el intercambio de valores con sus usuarios.
•Tiempo mínimo de descarga: Consiste en la optimización de los elementos de la página y en el uso inteligente de los recursos gráficos propios del código html.
•Facilidad del uso:
1.Accesibilidad: ante la universalidad de Internet, el diseño se debe plantear flexible y accesible para todas las configuraciones de nuestros clientes.
2.Navegabilidad: debemos realizar planteamientos que nos faciliten encontrar la información que buscamos, mediante buscadores o navegación sencilla e intuitiva. Tenemos que conseguir una consistencia de todos los elementos que la componen y facilitar múltiples maneras y vías de acceder a la información.
3.Productividad: Productividad: independientemente del objetivo de nuestro sitio, debemos intentar minimizar el trabajo del usuario. La arquitectura y el diseño deben estar pensados para que éste realice el menor número de tareas repetitivas posibles.
•Contenido de calidad: El mayor activo de un sitio web, es el valor que aportan sus contenidos. La necesidad de proporcionar contenidos de calidad básica al momento de diseñar un sitio Web es buscar la interacción con los usuarios.
•Actualización permanente: Ningún negocio es estático, sino que cuando el tiempo va transcurriendo va cambiando. De igual manera, los contenidos de cualquier sitio Web necesitan una constante adecuación a los contenidos

Otra característica primordial de la usabilidad, la cual es la estructura, teniendo una organización en cuanto a la manera en la que presentan el contenido, con el cual el usuario pueda navegar, incluso con información sonora, visual y en movimiento, esta característica es muy importante, debido a que si no se cuenta con el medio para reproducir el audio, el usuario recurre a leer la información, presentándola con agrado, con un tipo de letra adecuado y colores a tenue en cuanto al fondo y a la presentación en pantalla.
Otra característica importante a considerar es la forma de presentar el diseño al usuario, en cuanto a legibilidad y la comprensión del texto, porque se debe presentar de tal manera que la navegación sea fácil y agradable, orientando al usuario por los distintos recorridos que realiza dentro del sitio, ofreciéndole textos alternos a los botones, ayuda.

martes, 17 de noviembre de 2009

Elementos a contemplar en un sitio web

Martes 17 de noviembre de 2009


Se expusó en clase el tema correspondiente a definiendo un buen diseño
Libro "los principios de "The principles of beatiful web design", los principios de
El diseño siempre se agredece, pero no es nada sin contenidos
El suuario debe moverse libremente en sitio, la navegabilidad es un factos irmportannte en el diseño
El suuario pueda reconocer cada página como perteneciente al sitio.
Anato,´ña de una pagina, elementos:
Logo, menus, titulares, frases que representan al sitio, contenido, espacio en blanco, footer (pie de página, guarda información pertenecientes al sitio, crèditos, copyrigh
Fold: refrencia metaforica a la notas cortas final de un periódico, un elemento importante por usabilidad, link a secciones en específico.

TEORIA DE LA REJILLA

Manejo de proporciones.

Sirve para ubicar elementos dentro de un espacio, todos los programas de diseño lo tienen, y contienen las proporciones de un elemento.

Divide en líneas proporcionales el espacio que se tienen, lo que se obtiene son proporciones que sirven para el diseño.

"DIVINA DE PROPORCIÓN", un número que dice que todos los pedacitos, tiene esa proporción, de manera que lo único que se tiene que hacer es ubicar elementos de acuerdo al area en donde se encontrarían los elementos.

Ofrecer plantillas de diseño, no se reiventa, lo único que se hace es una reorganización de los msimso elementos en otras proporciones.

1. Crear una cuadricula.
2. Distribuir los elementos en la cuadricula.

Dividir el área en tres porciones y luego definir una que sea parte de otra área, así se optiene proporciones que son coherente en cualquier diseño, da que el resultado sea agradable.


BALANCE

¿Que aspectos hay que contemplar para distribuir los elementos en las rejillas?

El balance visual es similar al balance físico, los objetos tienen peso.

Balance simétrico: es pràcticamente proporcionados en cuanto a tamaño, al hablar de este se basa en un eje, se obtiene una fígura simetrica, a través de un eje, la proporcuón es identica de ambos lados.

Simetría horizontal: que coincidia en proporción horizontal
Simetría bilateral: combinaciòn del horizontal y vertical.
Simetría radial: Proporcion con respecto de un punto al centro, elementos en distribución alrededor de un punto.


Balance asimètrico. Marco que engloba los textos, proporción que se encuentra implica leemntos de diferente tamaño, textura, tono, forma o ubicación. Aùn copn la diferencia de proporción debe estar balanceada, diferencia de cambio, tamaño y color, con una de estas ya se trata de balance simetrico.

¿Cómo balanceamos?

Nota: La simetría pasa de manera menos visible que algo que es asimetrico, de tal manera que la asimetría es más notoria.

UNIDAD

Es otro aspecto a contemplar, de tal manera que los elementos mantienen forma colar, la proximidad hace que un grupo de objetos de vean como uno solo, colocarlos de manera más proxima.

Efecto de Proximidad: Son aspectos no consientes del observador.

Repetición: al repetirlo un elemento causa unidad, la falta de ello, aislamiento.

Elementos, color y efectos.

Énfasis: Cuando se desea que algo llame en aternciòn con respecto al resto, por lo tanto, un elemento en particular llame la atenciòn del observador.

Ubicación: Para que la atención del usuario vaya ahi
y continuidad: en donde se espera que se siga despúes.

"La proximidad produce unidad, mientras que el aislamiento produce enfàsis."

Contraste: no es diferente pero contrasta por que es diferente es contrario de lo que hay en el escenario.

Proporción: El tamaño de un elemento en el cual su tamaño y su forma sea irreal a lo normal, llamaría la atención, más que en otro.

PATRONES DE DISEÑO


TÉCNICAS DE DISEÑO WEB

PATRONES DE DISEÑO

MARISELA DEL CARMEN PECH TAMAYO
INTRODUCCION
La lógica detrás de un patrón de interacción está dada por la construcción de modelos mentales, que nos permiten identificar y reconocer fácilmente aquellos elementos que hemos aprendido y asociado a través de la experiencia. En la medida que este proceso se concreta, se eliminan una serie de factores innecesarios, asociados a procesos congnitivos que se traducen en que nos enfrentamos a esquemas similares, conocidos, de resolver un problema. Este proceso nos permite pasar de un mecanismo que podría tomas algunos segundos, a un reconocimiento que ocurre en fracciones de segundos. Esto no es irrelevente si pensamos en que estos segundos de diferencia, y la calidad de la experiencia que ellos constituyen, tienen una relación directa con el éxito de una venta en linea, el envío correcto de un mensaje de contacto para un potencial negocio, la venta de una suscripción para un medio de noticias, etc.
Naturalmente los patrones y estándares nacen del establecimiento de una solución a un problema específico, en la medida que esa solución funciona, los usuarios tienden a reconocerla y esperarla. Por lo mismo, cada patrón funciona en el contexto del problema que pretende solucionar, si aparecen variables nuevas en el problema o incluso un problema nuevo, requerirá de nuevas soluciones.
PATRONES DE DISEÑO WEB


Los patrones en el diseño web son precisamente uno de los aspectos que me interesa cubrir y explorar en efh. Si el tiempo me acompaña, espero pronto comenzar a publicar temas relacionados con estos patrones. Mientran eso ocurre, los dejo con un conjunto interesante de sitios dedicados a la exploración de patrones en el web:

Breve historia de los patrones de diseño


Un patrón de diseño es una abstracción de una solución en un nivel alto. Los patrones solucionan problemas que existen en muchos niveles de abstracción.
Hay patrones que abarcan las distintas etapas del desarrollo; desde el análisis hasta el diseño y desde la arquitectura hasta la implementación.

Muchos diseñadores y arquitectos de software han definido el término de patrón de diseño de varias formas que corresponden al ámbito a la cual se aplican los patrones. Luego, se dividió los patrones en diferentes categorías de acuerdo a su uso.

Los diseñadores de software extendieron la idea de patrones de diseño al proceso de desarrollo de software. Debido a las características que proporcionaron los lenguajes orientados a objetos (como herencia, abstracción y encapsulamiento) les permitieron relacionar entidades de los lenguajes de programación a entidades del mundo real fácilmente, los diseñadores empezaron a aplicar esas características para crear soluciones comunes y reutilizables para problemas frecuentes que exhibían patrones similares.

Fue por los años 1994, que apareció el libro "Design Patterns: Elements of Reusable Object Oriented Sofware" escrito por los ahora famosos Gang of Four (GoF, que en español es la pandilla de los cuatro) formada por Erich Gamma, Richard Helm, Ralph Johnson y John Vlissides. Ellos recopilaron y documentaron 23 patrones de diseño aplicados usualmente por expertos diseñadores de software orientado a objetos. Desde luego que ellos no son los inventores ni los únicos involucrados, pero ese fue luego de la publicación de ese libro que empezó a difundirse con más fuerza la idea de patrones de diseño.

El grupo de GoF clasificaron los patrones en 3 grandes categorías basadas en su PROPÓSITO: creacionales, estructurales y de comportamiento.

Creacionales: Patrones creacionales tratan con las formas de crear instancias de objetos. El objetivo de estos patrones es de abstraer el proceso de instanciación y ocultar los detalles de cómo los objetos son creados o inicializados.

Estructurales: Los patrones estructurales describen como las clases y objetos pueden ser combinados para formar grandes estructuras y proporcionar nuevas funcionalidades. Estos objetos adicionados pueden ser incluso objetos simples u objetos compuestos.
Comportamiento: Los patrones de comportamiento nos ayudan a definir la comunicación e iteración entre los objetos de un sistema. El propósito de este patrón es reducir el acoplamiento entre los objetos.

En el segundo nivel, ellos clasificaron los patrones en 2 ámbitos: Clases y objetos. Es así que, tenemos 6 tipos de patrones:

Creacionales

Creacional de la Clase: Los patrones creacionales de Clases usan la herencia como un mecanismo para lograr la instanciación de la Clase. Por ejemplo el método Factoría.
Creacional del objeto; Los patrones creacionales de objetos son más escalables y dinámicos comparados de los patrones creacionales de Clases. Por ejemplo la Factoría abstracta y el patrón Singleton.

Estructurales

Estructural de la Clase: Los patrones estructurales de Clases usan la herencia para proporcionar interfaces más útiles combinando la funcionalidad de múltiples Clases. Por ejemplo el patrón Adaptador (Clase).

Estructural de Objetos: Los patrones estructurales de objetos crean objetos complejos agregando objetos individuales para construir grandes estructuras. La composición de l patrón estructural del objeto puede ser cambiado en tiempo de ejecución, el cual nos da flexibilidad adicional sobre los patrones estructurales de Clases. Por ejemplo el Adaptador (Objeto), Facade, Bridge, Composite.

Comportamiento

Comportamiento de Clase: Los patrones de comportamiento de Clases usan la herencia para distribuir el comportamiento entre Clases. Por ejemplo Interpreter.
Comportamiento de ObjetoLos patrones de comportamiento de objetos nos permite analizar los patrones de comunicación entre objetos interconectados, como objetos incluidos en un objeto complejo. Ejemplo Iterator, Observer, Visitor. Patrones J2EE

Con la aparición del J2EE, todo un nuevo catálogo de patrones de diseño apareció. Desde que J2EE es una arquitectura por si misma que involucra otras arquitecturas, incluyendo servlets, JavaServer Pages, Enterprise JavaBeans, y más, merece su propio conjunto de patrones específicos para diferentes aplicaciones empresariales.

De acuerdo al libro "J2EE PATTERNS Best Practices and Design Strategies", existen 5 capas en la arquitectura J2EE:

Cliente
Presentación
Negocios
Integración
Recurso

El libro explica 15 patrones J2EE que están divididos en 3 de las capas: presentación, negocios e integración.

Catálogo de patrones J2EE
Capa de Presentación
Decorating Filter / Intercepting Filter
Un objeto que está entre el cliente y los componentes Web. Este procesa las peticiones y las respuestas.
Front Controller/ Front Component

Un objeto que acepta todos los requerimientos de un cliente y los direcciona a manejadores apropiados. El patrón Front Controller podría dividir la funcionalidad en 2 diferentes objetos: el Front Controller y el Dispatcher. En ese caso, El Front Controller acepta todos los requerimientos de un cliente y realiza la autenticación, y el Dispatcher direcciona los requerimientos a manejadores apropiada.

View Helper

Un objeto helper que encapsula la lógica de acceso a datos en beneficio de los componentes de la presentación. Por ejemplo, los JavaBeans pueden ser usados como patrón View Helper para las páginas JSP.
Composite view

Un objeto vista que está compuesto de otros objetos vista. Por ejemplo, una página JSP que incluye otras páginas JSP y HTML usando la directiva include o el action include es un patrón Composite View.

Service To Worker

Es como el patrón de diseño MVC con el Controlador actuando como Front Controller pero con una cosa importante: aquí el Dispatcher (el cual es parte del Front Controller) usa View Helpers a gran escala y ayuda en el manejo de la vista.
Dispatcher View

Es como el patrón de diseño MVC con el controlador actuando como Front Controller pero con un asunto importante: aquí el Dispatcher (el cual es parte del Front Controller) no usa View Helpers y realiza muy poco trabajo en el manejo de la vista. El manejo de la vista es manejado por los mismos componentes de la Vista.

Capa de Negocios

Business Delegate

Un objeto que reside en la capa de presentación y en beneficio de los otros componentes de la capa de presentación llama a métodos remotos en los objetos de la capa de negocios.
Value Object/ Data Transfer Object/ Replicate Object
Un objeto serializable para la transferencia de datos sobre lar red.
Session Façade/ Session Entity Façade/ Distributed Façade

El uso de un bean de sesion como una fachada (facade) para encapsular la complejidad de las interacciones entre los objetos de negocio y participantes en un flujo de trabajo. El Session Façade maneja los objetos de negocio y proporciona un servicio de acceso uniforme a los clientes.
Aggregate Entity

Un bean entidad que es construido o es agregado a otros beans de entidad.
Value Object Assembler
Un objeto que reside en la capa de negocios y crea Value Objets cuando es requerido.
Value List Handler/ Page-by-Page Iterator/ Paged List
Es un objeto que maneja la ejecución de consultas SQL, caché y procesamiento del resultado. Usualmente implementado como beans de sesión.
Service Locator

Consiste en utilizar un objeto Service Locutor para abstraer toda la utilización JNDI y para ocultar las complejidades de la creación del contexto inicial, de búsqueda de objetos home EJB y recreación de objetos EJB. Varios clientes pueden reutilizar el objeto Service Locutor para reducir la complejidad del código, proporcionando un punto de control.
Capa de Integración

Data Access Object Service Activator
Consiste en utilizar un objeto de acceso a datos para abstraer y encapsular todos los accesos a la fuente de datos. El DAO maneja la conexión con la fuente de datos para obtener y almacenar datos.
Service Activator
Se utiliza para recibir peticiones y mensajes asíncronos de los clientes. Cuando se recibe un mensaje, el Service Activator localiza e invoca a los métodos de los componentes de negocio necesarios para cumplir la petición de forma asíncrona.
REFERENCIAS WEB