1. 12.5 Patrones de diseño de la interfaz de usuario
1.1. 1. Whole UI
1.1.1. Patrón:
1.1.1.1. NavegacióndeAltoNivel (TopLevelNavigation)
1.1.2. Descripción breve:
1.1.2.1. Se usa cuando un sitio o aplicación implementa cierto número de funciones importantes.
1.1.3. Detalles:
1.1.3.1. Las funciones importantes se enlistan en la parte superior de la pantalla en un renglón de texto horizontal.
1.1.4. Elementos de navegación:
1.1.4.1. Cada nombre de función o contenido representa un vínculo hacia la función o contenido apropiados.
1.2. 2. Distribución de la página
1.2.1. Patrón:
1.2.1.1. ApilarTarjetas (CardStack)
1.2.2. Descripción breve:
1.2.2.1. Se utiliza cuando deben seleccionarse aleatoriamente cierto número de subfunciones o categorías de contenido específicas relacionadas con una característica o función.
1.2.3. Detalles:
1.2.3.1. Las tarjetas con pestañas son una metáfora bien entendida y son fáciles de manipular por parte del usuario.
1.2.4. Elementos de navegación:
1.2.4.1. Un clic en una pestaña hace que aparezca la tarjeta apropiada.
1.3. 3. Formatos y entrada
1.3.1. Patrón:
1.3.1.1. Llenar los espacios.
1.3.2. Descripción breve:
1.3.2.1. Permite introducir datos alfanuméricos en un “cuadro de texto”.
1.3.3. Detalles:
1.3.3.1. Los datos entran en un cuadro de texto. En general, se validan y procesan después de pulsar algún indicador de texto o gráfico (como un botón que diga “ir”, “enviar”, “siguiente”, etc.)
1.3.4. Elementos de navegación:
1.3.4.1. Indicador de texto o gráfico que inicia la validación y el procesamiento.
1.4. 4. Tablas
1.4.1. Patrón:
1.4.1.1. OrdenarTabla (SortableTable)
1.4.2. Descripción breve:
1.4.2.1. Despliega una lista larga de registros que pueden ordenarse por medio de un mecanismo de cambio para cualquier etiqueta de columna.
1.4.3. Detalles:
1.4.3.1. Cada renglón de la tabla representa un registro completo.
1.4.4. Elementos de navegación:
1.4.4.1. Cada encabezado de columna inicia el ordenamiento de todos los registros.
1.5. 5. Manipulación directa de los datos
1.5.1. Patrón:
1.5.1.1. MigajasdePan (BreadCrumbs)
1.5.2. Descripción breve:
1.5.2.1. Brinda una ruta completa de navegación cuando el usuario trabaja con una jerarquía compleja de páginas o pantallas.
1.5.3. Detalles:
1.5.3.1. Se da a cada página o pantalla un identificador único. La ruta de navegación hacia la ubicación actual se especifica en una ubicación predefinida para cada pantalla.
1.5.3.1.1. La ruta tiene la forma siguiente: página inicial>página del tema principal>página del subtema>página específica>página actual
1.5.4. Elementos de navegación:
1.5.4.1. Cualquiera de las entradas en la pantalla de las migajas de pan puede usarse como un apuntador hacia el vínculo de regreso hacia un nivel más alto de la jerarquía.
1.6. 6. Navegación
1.6.1. Patrón:
1.6.1.1. Editar (EditInPlace)
1.6.2. Descripción breve:
1.6.2.1. Brinda capacidades de edición de texto sencillo para ciertos tipos de contenido en la ubicación que se muestra en la pantalla.
1.6.3. Detalles:
1.6.3.1. El usuario observa en la pantalla el contenido que debe modificarse.
1.6.4. Elementos de navegación:
1.6.4.1. Ninguno.
1.7. 7. Búsqueda
1.7.1. Patrón:
1.7.1.1. BúsquedaSimple (SimpleSearch)
1.7.2. Descripción breve:
1.7.2.1. Da la capacidad de buscar un sitio web o fuente persistente de datos para un concepto simple de datos descritos por una cadena alfanumérica.
1.7.3. Detalles:
1.7.3.1. Brinda la capacidad de hacer una búsqueda local o global para la cadena de búsqueda.
1.7.4. Elementos de navegación:
1.7.4.1. Cada entrada de la lista representa un vínculo de navegación hacia los datos a los que se hace referencia con la entrada.
1.8. 8. Elementos de página
1.8.1. Patrón:
1.8.1.1. Mago (Wizard)
1.8.2. Descripción breve:
1.8.2.1. Lleva al usuario paso a paso a través de una tarea compleja y lo guía para que la termine por medio de ventanas sencillas en la pantalla.
1.8.3. Detalles:
1.8.3.1. El ejemplo clásico es un proceso de registro de cuatro etapas. El patrón mago genera una ventana en cada una de ellas, en las que solicita información del usuario paso a paso
1.8.4. Elementos de navegación:
1.8.4.1. La navegación hacia delante y atrás permite que el usuario vuelva a cada etapa en el proceso mago.
1.9. 9. Comercio electrónico
1.9.1. Patrón:
1.9.1.1. CarritodeCompras (ShoppingCart)
1.9.2. Descripción breve:
1.9.2.1. Da una lista de artículos seleccionados para compra.
1.9.3. Detalles:
1.9.3.1. Enlista artículos, cantidad, código del producto, disponibilidad, , precio, información para la entrega, costos de envío y otra información relevante para la compra.
1.9.3.1.1. También da la facilidad de editar.
1.9.4. Elementos de navegación:
1.9.4.1. Contiene la capacidad de continuar la compra o salir.
1.10. 10. Varios
1.10.1. Patrón:
1.10.1.1. IndicadordeAvance (ProgressIndicator)
1.10.2. Descripción breve:
1.10.2.1. Proporciona una indicación del avance cuando una operación dura más de n segundos
1.10.3. Detalles:
1.10.3.1. Se representa con un icono animado o cuadro de mensaje que contiene alguna indicación visual de que el procesamiento está en curso.
1.10.3.1.1. También contiene una indicación de texto acerca del estado del procesamiento.
1.10.4. Elementos de navegación:
1.10.4.1. Es frecuente que contenga un botón que permita al usuario hacer una pausa o cancelar el procesamiento.
2. 12.6 Patrones de diseño webapp
2.1. 12.6.1 Centrarse en el diseño
2.1.1. Los patrones de webapps se clasifican con el empleo de los siguientes niveles de atención en el diseño:
2.1.1.1. Patrones de arquitectura de la información:
2.1.1.1.1. Se relacionan con la estructura general del espacio de información y con las formas en las que los usuarios interactúan con ésta.
2.1.1.2. Patrones de navegación:
2.1.1.2.1. Definen estructuras de los vínculos de navegación, tales como jerarquías, anillos, recorridos, etcétera.
2.1.1.3. Patrones de interacción:
2.1.1.3.1. Contribuyen al diseño de la interfaz de usuario
2.1.1.4. Patrones de presentación:
2.1.1.4.1. Ayudan a presentar el contenido al usuario a través de la interfaz.
2.1.1.5. Patrones funcionales:
2.1.1.5.1. Definen los flujos de trabajo, comportamientos, procesamiento, comunicación y otros elementos algorítmicos dentro de una webapp.
2.2. 12.6.2 Granularidad del diseño
2.2.1. En términos del nivel de granularidad, los patrones se describen en los niveles siguientes:
2.2.1.1. Patrones arquitectónicos:
2.2.1.1.1. Este nivel de abstracción se relacionará por lo común con patrones que definen la estructura general de la webapp, que indican las relaciones entre diferentes componentes o incrementos y que definen las reglas para especificar las relaciones entre los elementos (páginas, paquetes, componentes y subsistemas) de la arquitectura.
2.2.1.2. Patrones de diseño:
2.2.1.2.1. Éstos se abocan a un elemento específico del diseño, como un agrupamiento de componentes, a fin de resolver algún problema de diseño, relaciones entre los elementos de una página, o mecanismos para efectuar la comunicación entre componentes.
2.2.1.3. Patrones de componentes:
2.2.1.3.1. Este nivel de abstracción se relaciona con elementos individuales de pequeña escala de una webapp.
3. Se trata de plantillas que identifican problemas en el sistema y proporcionan soluciones apropiadas a problemas generales a los que se han enfrentado los desarrolladores durante un largo periodo de tiempo, a través de prueba y error.
4. 12.1 Patrones de diseño
4.1. 12.1.1 Clases de patrones
4.1.1. El patrón Cuello de Botella
4.1.1.1. No hace nada mas que describir el problema.
4.1.2. Los patrones arquitectura
4.1.2.1. Organización o esquema estructural.
4.1.3. Los patrones de datos
4.1.3.1. Describen los problemas orientados a datos y las soluciones de modelado de datos que pueden emplearse para resolverlos.
4.1.4. Los patrones de componentes
4.1.4.1. Esquema para refinar los subsistemas o componentes de un sistema de software, o las relaciones entre ellos.
4.1.5. Los patrones de diseño de la interfaz
4.1.5.1. Describen problemas comunes de interfaz de usuario y su solución.
4.1.6. Los patrones de webapp
4.1.6.1. Centrarse en el diseño del patrón y en el nivel de detalles.
4.2. 12.1.3 Descripción de un patrón
4.2.1. Los patrones de diseño, son una solución general, reutilizable y aplicable a diferentes problemas de diseño de software.
4.3. 12.1.2 Estructuras
4.3.1. Diferencias entre los patrones de diseño y estructuras:
4.3.1.1. 1. Los patrones de diseño son más abstractos que las estructuras.
4.3.1.1.1. Las estructuras están incrustadas en el código, pero en éste sólo es posible incrustar ejemplos de patrones. Una ventaja de las estructuras es que se escriben en lenguajes de programación y no sólo son estudiadas, sino ejecutadas y reutilizadas directamente.
4.3.1.2. 2. Los patrones de diseño son elementos arquitectónicos más pequeños que las estructuras.
4.3.1.2.1. Una estructura normal contiene varios patrones de diseño, pero lo contrario nunca se cumple.
4.3.1.3. 3. Los patrones de diseño están menos especializados que las estructuras.
4.3.1.3.1. Las estructuras siempre tienen un dominio particular de aplicación. En contraste, los patrones de diseño se usan en casi cualquier tipo de aplicación. Si bien es posible tener patrones de diseño más especializados, incluso éstos no imponen la arquitectura de una aplicación.
4.4. 12.1.4 Lenguajes y repositorios de patrones
4.4.1. El lenguaje tiene una sintaxis y semántica que se utiliza para comunicar ideas o instrucciones de procedimiento en forma eficaz.
4.4.2. Un lenguaje de patrón agrupa un conjunto de patrones, cada uno de los cuales se describe con el uso de un formato estandarizado e interrelacionado para mostrar como colaboran los patrones para resolver problemas en un dominio de aplicación.
5. 12.2 Diseño de software basado en patrones
5.1. 12.2.1 El diseño basado en patrones, en contexto
5.1.1. El modelo de requerimientos describe el conjunto problema, establece el contexto e identifica el sistema de fuerzas que actúan.
5.2. 12.2.2 Pensar en patrones
5.2.1. a. Entender el panorama. b. Estudiar el panorama. c. Comenzar el diseño con patrones del “panorama. d. Trabajar dentro del contexto. e. Repetir los pasos 1 a 4 hasta que el diseño esté completo. f. Mejorar el diseño.
5.3. 12.2.3 Tareas de diseño
5.3.1. a. Examinar el modelo de requerimientos. b. Determinar el desarrollo del patrón. c. Patrones arquitectónicos. d. Uso de colaboraciones provistas para el patrón arquitectónico. e. Repetir los pasos 2 a 5. f. Patrones de diseño de la interfaz de usuario. g. Lenguaje de patrón. h. Asegurarse de refinar el diseño.
5.4. 12.2.4 Construcción de una tabla para organizar el patrón
5.4.1. Microsoft [Mic04] sugiere crear una tabla de organización de patrones.
5.5. 12.2.5 Errores comunes en el diseño
5.5.1. En ciertos casos, no se dedica el tiempo suficiente a entender el problema subyacente, su contexto y fuerzas, y en consecuencia se elige un patrón que parece correcto, pero es inapropiado para llegar a la solución que se requiere.
6. 12.3 Patrones arquitectónicos
6.1. ¿Cuáles son algunos dominios comunes del patrón arquitectónico?
6.1.1. Por ejemplo, toda vivienda (y todo estilo arquitectónico para ellas) emplea un patrón Cocina. En general, se emplean dos patrones arquitectónicos para lograr la persistencia:
6.1.1.1. Un patrón de Sistema de Administración de Base de Datos que aplica la capacidad de almacenamiento y recuperación de un SABD a la arquitectura
6.1.1.2. Un patrón Persistencia a Nivel de Aplicación que construye las características de la persistencia en la arquitectura de la aplicación (por ejemplo, un software de procesamiento de textos que administre su propia estructura de documento).
7. 12.4 Patrones de diseño en nivel de componentes
7.1. AdvancedSearch
7.1.1. Los usuarios deben encontrar un objeto específico en una gran colección de ellos.
7.2. HelpWizard
7.2.1. Los usuarios necesitan ayuda acerca de cierto tema relacionado con el sitio web o necesitan encontrar una página específica dentro del sitio.
7.3. SearchArea
7.3.1. Los usuarios deben encontrar una página.
7.4. SearchTips
7.4.1. Los usuarios requieren saber cómo controlar el motor de búsqueda.
7.5. SearchResults
7.5.1. Los usuarios tienen que procesar una lista de resultados de una búsqueda.
7.6. SearchBox
7.6.1. Los usuarios tienen que encontrar un objeto o información específicos.