“Año de la universalización de la salud”

UNIVERSIDAD NACIONAL DEL CALLAO

FACULTAD DE INGENIERIA INDUSTRIAL Y DE
SISTEMAS
ESCUELA PROFESIONAL DE INGENIERÍA DE
SISTEMAS

ENSAYO DE DISEÑO BASADO EN PATRONES

CURSO: Diseño de Sistemas de Información
PROFESOR: Ing. Ramírez Veliz, Juan Francisco
INTEGRANTES:
 SOTELO ARCE, LUIS ANGEL
 CASTILLO PÉREZ, LUIS VICENTE

2020-I
Introducción

Hablar de diseño, cada uno hemos tenido un problema y pensar siempre: ¿Habrá
solución para esto? La respuesta a esa pregunta es casi si, donde el problema es
encontrarla. Estas soluciones o métodos están codificadas las cuales se llaman patrones
de diseño, estos patrones se emplean para describir problemas y sus soluciones la cual
permite a la comunidad de ingeniería de software el conocimiento del diseño en forma
tal que sea posible reutilizarla.
Como se mencionó en párrafo anterior, en el presente ensayo se desarrollarán temas en
relación para la creación de aplicaciones nuevas a partir de un conjunto de soluciones
probadas para el conjunto de problemas, pero ¿Quién los hace? Los que deben
desarrollar los diseños basados en patrones son los ingenieros de software ya que ellos
analizan y catalogan cada problema para encontrar una solución relevante que debe ser
descrito por un patrón. Estos patrones son importantes ya que al implementarlas las
solucione se integran y la aplicación que se está desarrollando se acerca al diseño final.
Cada patrón nos describe un problema que indica el contexto y hace que el usuario
entienda el ambiente, en este tema se verá diferentes puntos de los diseños de patrones:

 Patrones Arquitectónicos
 Patrones de diseño en el nivel de componentes
 Patrones de diseño de la interfaz de usuario
 Patrones de diseño de WEBAPP
¿Qué es un patrón de diseño?
Investigando me topé con muchas definiciones, todas ellas se refieren a que son una
especie de solución a problemas típicos en programación. Te explican de una manera
muy centrada que la aparición de estos problemas no es nada nuevo y que desde hace
tiempo alguien ya ha logrado solucionarlos. Si la forma de solucionar ese problema se
puede extraer, explicar y reutilizar en diversas situaciones, entonces nos encontramos
ante un patrón de diseño. Esto ayuda, por ejemplo, a que un nuevo programador no
requiera conocimiento de lo que otro ha realizado. El software creado resulta más fácil
de entender, mantener y extender. A continuación, describiré brevemente los tipos de
patrones y el propósito de cada uno. Cabe destacar que los patrones se dividen en
distintos grupos según el tipo de problema que resuelven.

 Patrones Arquitectónicos

Los patrones arquitectónicos para el software definen un enfoque específico para

el manejo de algunas características del sistema.

o Control de acceso:
En situaciones en las que el acceso a datos, características y funciones
realizadas por una aplicación, desde un punto de vista arquitectónico, el
acceso a cierta parte de la arquitectura del software debe controlarse de
manera rigurosa.
o Concurrencia:
Las aplicaciones deben manejar tareas múltiples de manera que simule.
Hay varias formas distintas en las que una aplicación maneja la
concurrencia y cada una puede presentarse con un patrón arquitectónico
diferente.
o Distribución:
El problema de la distribución se aboca a la manera en la que los
sistemas o componentes de los sistemas se comunican entre sí en un
ambiente distribuido. Se toman en cuenta dos subproblemas: 1) la forma
en la que se conectan las entidades una con la otra y 2) la naturaleza de la
comunicación que tiene lugar
o Persistencia:
Los datos persistentes se almacenan en una base de datos o archivos que
pueden ser leídos o modificados por otros procesos en un momento
posterior. En los ambientes orientados a objetos, la idea de un objeto
persistente extiende un poco más el concepto de persistencia. Los valores
de todos los atributos del objeto, el estado general de éste y otra
información complementaria se almacenan para su recuperación y uso
futuro.
Antes de que pueda elegirse cualquiera de los patrones arquitectónicos
representativos mencionados en los párrafos anteriores, debe evaluarse lo
apropiado que es para la aplicación y el estilo arquitectónico general, así como el
contexto y sistema de fuerzas que especifiquen.

 Patrones de diseño en el nivel de componentes:

Los patrones de diseño en el nivel de componentes brindan soluciones

comprobadas que se abocan a uno o más subproblemas extraídos del modelo
de requerimientos. En muchos casos, los patrones de diseño de este tipo se
centran en algún elemento funcional de un sistema.
¿Cómo pueden obtenerse especificaciones del producto e información acerca
de cualquier dispositivo de una aplicación? Después de enunciar el
subproblema que afecta a la solución, debe considerarse el contexto y el
sistema de fuerzas que también la afecten. Al estudiar el modelo de
requerimientos apropiados del caso de uso, se observa que el consumidor
utiliza la especificación de un dispositivo de la aplicación (como un sensor
de seguridad o cámara) con propósitos de información. Sin embargo, cuando
se selecciona la función de comercio electrónico, quizá se requiera otro tipo
de información relacionada con la especificación. La solución del
subproblema involucra una búsqueda. Al investigar en varios repositorios de
patrones, se encuentran los siguientes, así como el problema que resuelve
cada uno:

o AdvancedSearch:
Los usuarios deben encontrar un objeto específico en una gran colección
de ellos.
o HelpWizard:
Los usuarios necesitan ayuda acerca de cierto tema relacionado con el
sitio web o necesitan encontrar una página específica dentro del sitio.
o SearchArea:
Los usuarios deben encontrar una página.
o SearchTips:
Los usuarios requieren saber cómo controlar el motor de búsqueda.
o SearchResults:
Los usuarios tienen que procesar una lista de resultados de una búsqueda.
o SearchBox:
Los usuarios tienen que encontrar un objeto o información específicos.

 Patrones de diseño de la interfaz de usuario:

En los últimos años, se han propuesto cientos de patrones de interfaz de

usuario (IU). La mayoría se ubican en una de las siguientes:
o Whole UI.
Proporciona una guía para diseñar la estructura y navegación de alto
nivel a través de toda la interfaz.
Patrón: NavegacióndeAltoNivel (TopLevelNavigation)
Se usa cuando un sitio o aplicación implementa cierto número de
funciones importantes. Da un menú de alto nivel, acoplado con
frecuencia con un logotipo o gráfico identificador que permite la
navegación directa hacia cualquiera de las funciones principales del
sistema.

o Distribución de la página.
Se aboca a la organización general de páginas (para sitios web) o de
distintas pantallas (para aplicaciones interactivas).
Patrón: ApilarTarjetas (CardStack)
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. Tiene la apariencia de una pila de tarjetas con
“pestaña”, cada una seleccionable con un clic del ratón, que representan
subfunciones o categorías de contenido específicas.

o Formatos y entrada.
Considera varias técnicas de diseño para llenar las entradas en el nivel de
formato.
Patrón: Llenar los espacios
Permite introducir datos alfanuméricos en un “cuadro de texto”.
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.). En muchos casos, este patrón se
combina con una lista desplegable u otros patrones.

o Tablas.
Dan una guía para el diseño a fin de crear y manipular datos tabulares de
todo tipo.
Patrón: OrdenarTabla (SortableTable)
Despliega una lista larga de registros que pueden ordenarse por medio de
un mecanismo de cambio para cualquier etiqueta de columna. Cada
renglón de la tabla representa un registro completo. Cada columna
representa un campo del registro. Cada encabezado de columna en
realidad es un botón seleccionable que se pulsa para iniciar un
ordenamiento ascendente o descendente en el campo asociado con la
columna para todos los registros desplegados. Por lo general, la tabla es
ajustable y tiene algún mecanismo de desplazamiento para el caso de que
 el número de registros sea más grande que el espacio disponible en la
ventana.

o Manipulación directa de los datos.

Se aboca a la edición, modificación y transformación de los datos.
Patrón: MigajasdePan (BreadCrumbs)
Brinda una ruta completa de navegación cuando el usuario trabaja con
una jerarquía compleja de páginas o pantallas.
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. 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.

o Navegación.
Ayuda al usuario a navegar a través de menús jerárquicos, páginas web y
pantallas interactivas.
Patrón: Editar (EditInPlace)
Brinda capacidades de edición de texto sencillo para ciertos tipos de
contenido en la ubicación que se muestra en la pantalla. No es necesario
que el usuario introduzca explícitamente alguna función de edición de
texto o algún modo.
El usuario observa en la pantalla el contenido que debe modificarse. Con
un doble clic en el contenido, se indica al sistema que se desea editar. El
contenido se resalta para indicar que el modo de edición está activado
para que el usuario haga los cambios apropiados.

o Búsqueda.
Permite hacer búsquedas de contenido específico a través de información
conservada en un sitio web o que está contenida en almacenamientos
persistentes de datos accesibles a través de una aplicación interactiva.
Patrón: BúsquedaSimple (SimpleSearch)
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.
Brinda la capacidad de hacer una búsqueda local (una página o un
archivo) o global (todo el sitio o la base de datos completa) para la
cadena de búsqueda. Genera una lista de “aciertos” ordenados según su
probabilidad de satisfacer las necesidades del usuario. No hace
búsquedas de conceptos múltiples o con operaciones booleanas
especiales.
 o Elementos de página.
Implanta elementos específicos de una página web o de una pantalla del
monitor.
Patrón: Mago (Wizard)
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.
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.

o Comercio electrónico.
Específicos para sitios web, estos patrones implementan elementos
recurrentes de las aplicaciones de comercio electrónico.
Patrón: CarritodeCompras (ShoppingCart)
Enlista artículos, cantidad, código del producto, disponibilidad (en
inventario, fuera de inventario), precio, información para la entrega,
costos de envío y otra información relevante para la compra. También da
la facilidad de editar (por ejemplo, retirar, cambiar la cantidad, etcétera).

o Varios.
Son patrones que no se ajustan fácilmente a ninguna de las categorías
anteriores. En ciertos casos, dependen del dominio u ocurren sólo para
clases específicas de usuarios.
Patrón: IndicadordeAvance (ProgressIndicator)
Se representa con un icono animado o cuadro de mensaje que contiene
alguna indicación visual (por ejemplo, una “barra de peluquero”, barra de
avance con indicador de porcentaje, etc.) de que el procesamiento está en
curso. También contiene una indicación de texto acerca del estado del
procesamiento.

Cada uno de los ejemplos de patrones anteriores (y todos los de cada

categoría) también pueden tener un diseño completo en el nivel de
componentes, incluso clases de diseño, atributos, operaciones e
interfaces.

 Patrones de diseño de WEBAPP:

Cuando se consideran los problemas de diseño que deben resolverse para

construir una webapp, es bueno considerar categorías de patrones en dos
dimensiones: centrarse en el diseño del patrón y en el nivel de granularidad.

o Centrarse en el diseño
 Los problemas (y soluciones) que se encontrarán cuando se diseñe una
arquitectura de información para una webapp serán diferentes de
aquellos que aparecen cuando se diseña una interfaz. Por tanto, no debe
sorprender que los patrones para el diseño de webapps se desarrollen
para distintos niveles de atención, de modo que se aborden los problemas
(y sus soluciones) únicos que se encuentren en cada nivel.
Los patrones de webapps se clasifican con el empleo de los siguientes
niveles de atención en el diseño:
 Patrones de arquitectura de la información:
se relacionan con la estructura general del espacio de información
y con las formas en las que los usuarios interactúan con ésta.
 Patrones de navegación:
Definen estructuras de los vínculos de navegación, tales como
jerarquías, anillos, recorridos, etcétera.
 Patrones de interacción:
Contribuyen al diseño de la interfaz de usuario. Los patrones en
esta categoría se enfrentan al modo en el que la interfaz informa
al usuario de las consecuencias de una acción específica, cómo
expande el usuario el contenido con base en el empleo del
contexto y sus deseos.
 Patrones de presentación:
Ayudan a presentar el contenido al usuario a través de la interfaz.
Los patrones en esta categoría se abocan al modo de organizar las
funciones de control de la interfaz de usuario para mejorar su uso,
a mostrar la relación entre una acción de la interfaz y los objetos
de contenido a los que afecta y a la forma de establecer jerarquías
eficaces del contenido.
 Patrones funcionales:
Definen los flujos de trabajo, comportamientos, procesamiento,
comunicación y otros elementos algorítmicos dentro de una
webapp.

o Granularidad del diseño

Cuando un problema involucra aspectos del “panorama”, debe tratarse de
desarrollar soluciones (y los patrones de uso relevantes) que se centren
en éste. A la inversa, cuando la atención es muy estrecha (como cuando
se selecciona únicamente un aspecto de un conjunto reducido de cinco o
menos de ellos), la solución (y el patrón correspondiente) se busca con
más estrechez. En términos del nivel de granularidad, los patrones se
describen en los niveles siguientes:

 Patrones arquitectónicos.
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.
 Patrones de diseño.
É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.
 Patrones de componentes.
Se relaciona con elementos individuales de pequeña escala de una
webapp.

Entonces, ¿cómo identifico qué patrón encaja con mi problema? La verdad es que no
hay una guía en donde consultar la solución exacta de tu problema, sino que esto se
aprende mediante la práctica. La experiencia es la mejor forma de ser más hábil
detectando dónde se puede aplicar un patrón de diseño. Por suerte, en libros y sitios de
internet (blogs personales y paginas oficiales) es posible encontrar a personas que
comparten de su conocimiento y de su tiempo libre para ayudar a superar los posibles
obstáculos que se nos presenten.
Conclusión

El libro “Ingeniería de Software: Un Enfoque Practico” fue una obra de gran utilidad
que nos permitió a comprender más a fondo el tema de cómo se lleva el diseño basado
en los patrones, y como se puede apreciar a lo largo de este ensayo, la utilización de
patrones permite una flexibilidad en la creación o en el desarrollo de aplicaciones.
Bajo la idea de los diseños basados en patrones es una pieza clave para la creación de
proyectos ya que nos ayuda en las posibles soluciones que nos brinda un problema y
porque será utilizado un conjunto de métodos, estos nos permiten enlistar en un sistema
de fuerza que indica que nos permite de cómo se puede interpretar los problemas en el
cual nos permitiría definir el contexto, gracias a este conjunto de circunstancias que
rodean dichas situaciones, no se podría comprender correctamente las soluciones.
Cabe destacar que si hacen un uso malo de los patrones o tienen descuidos se podrá
presentar una serie de problemas la cuales son: retrasos en los desarrollos de proyectos,
problemas con la mantenibilidad del software, poca reutilización de los patrones.
Es importante saber que no se necesita ser un experto en diseños o programación y es
por eso por lo que, nosotros como autores de este ensayo podemos decir que el diseño
basado en patrones son recursos que todo programador o ingeniero de software debería
saber y aplicarlo en sus aplicaciones, por ende, a los estudiantes no se le debe de
enseñar de la manera tradicional, sino deberían ser introducidos de una manera práctica.
Bibliografía

 Roger S. Pressman, Ph. D. (2010). Ingeniería de Software – Un enfoque

práctico (Séptima edición)

  Antonio Leiva (2016). Patrones de diseño de software, de DEVEXPERTO

Sitio web: https://devexperto.com/patrones-de-diseno-software/

 Nicolás Tedeschi. (2014). ¿Qué es un patrón de diseño? 18 de marzo del

2018, de Microsoft
Sitio web: https://docs.microsoft.com/es-es/previous-
versions/bb972240(v=msdn.10)?redirectedfrom=MSDN