Patrones de
Diseño web
Ingeniería del Software
Docente:
[Link]. Yeshica Ormeño Ayala
Introducción
Tienen su origen en el arquitecto Christopher
Alexander en su libro Pattern Languages.
Donde defendía la creación de un lenguaje
común basado en patrones para guiar el
proceso de diseño y creación.
En su momento fue una reacción al diseño
de la arquitectura contemporánea
De acuerdo con Alexander
"Un patrón describe un problema que
sucede repetidamente y la solución a ese
problema, de manera que esta solución
pueda aplicarse millones de veces sin
tener que hacerlo de la misma forma dos
veces” .
Por tanto, un patrón de diseño es una
descripción formal de un problema y su
solución.
Algo mas de patrones
Los patrones hacen frente a los problemas de
diseño, capturando la esencia de los
problemas y sus soluciones de una forma
compacta.
Es decir, los patrones nos dan un medio para
reconocer y hacer referencia a problemas
conocidos, además de disponer de un medio
para comparar soluciones alternativas siendo
plenamente conscientes de las
consecuencias de cada alternativa.
Catalogo de Patrones
Muchos de los patrones recogidos en el
catálogo reflejan cómo los clientes
entienden e interactúan con los sitios
Web.
Algunos de los patrones reflejan
características abstractas que perfilan
grandes sitios Web, como es la
confianza, el valor percibido y la
fiabilidad
Cada patrón del repositorio presenta los
ingredientes esenciales de un patrón de
diseño: una explicación del problema
básico y la descripción de la solución a
nivel general, una enumeración de los
motivos que hacen necesario un diseño,
y numerosas decisiones y compromisos
que deben adoptarse si se utiliza el
patrón.
Cada patrón del catálogo está
conectado a diferentes patrones de más
alto y de más bajo nivel de abstracción.
Un patrón ayudará a completar los
patrones de mayor nivel de abstracción
que hay por encima de él, y será
completado por los patrones de menor
nivel de abstracción que tiene por
debajo.
Estructura de un patrón
Nombre: nombre dado a la solución. Cada patrón además queda
identificado por un código formado por una letra que referencia el
grupo al que pertenece el patrón, y un número.
Contexto: perfila un contexto para el patrón, describiendo a otros
patrones que te dirigen al mismo y cómo se relacionan, así como el
alcance del patrón.
Problema: se trata de una frase concisa para señalar el problema
específico al que atiende el patrón.
Motivaciones: se extiende en el problema, describiéndolo con más
detalle, analizando cómo la gente, sus tareas, la tecnología, y la
sociedad afectan al problema de diseño.
Solución: se trata de una frase concisa acerca de cómo resolver el
problema acompañada de un pequeño gráfico que permita
visualizar la solución.
Otros patrones a considerar: recomendaciones acerca de patrones
más detallados que ayudan a completar el patrón en cuestión, que
habrá que examinar y evaluar para seleccionar aquellos que se
ajustan a las necesidades del problema.
En su catálogo, van Duyne propone una serie de
grupos organizados por letra y por nombre cada
uno de los cuales contiene una colección de
patrones relacionados temáticamente. Según el
esquema propuesto los primeros grupos deberían
ser los primeros en usarse en el proceso de diseño.
Dentro de la descripción de un patrón se
identifican patrones relacionados en varias de las
secciones; en el contexto, en las motivaciones y
en otros patrones a considerar. Esta red de
patrones proporciona un modo de seleccionar
rápidamente aquellos que se necesitan para
completar un determinado diseño, y facilita la
articulación de un gran número de diseños para
escenarios diferentes.
Aplicación de Patrones
Patrón Multiple Ways to Navigate (B1)
Este patrón identifica los diferentes esquemas
de navegación que determinan cómo los
usuarios navegan por los sitios.
Problema:
Estamos acostumbrados a navegar por los
sitios Web de diversas maneras. Es por ello por
lo que deberemos ofrecer diferentes tipos de
navegación que cubran por completo las
necesidades de movilidad de los usuarios.
Intención e impulso
“intención” se entiende el hecho de
dirigirse a un sitio Web con un objetivo
concreto
“impulso” consideramos aquellas
acciones conducidas por las cosas que
llaman nuestra atención
Estilos de navegación
Búsqueda(search)
Intención Exploración(browsed)
Paso a Paso(wizard)
Relación(relate)
Impulso Promoción(promote)
Ubicación de las herramientas
de navegación
Las herramientas que permitan al usuario alcanzar
sus objetivos e intenciones, se sitúan cerca de
donde se comienza a leer. Es decir, a la izquierda y
en la parte superior de la página (search, browse,
wizard). Esto asegura que estas herramientas serán
encontradas y usadas.
Aquellas otras que permiten dar una continuidad o
completar algo, se deben situar donde se continúa
leyendo. Es decir, en la parte superior derecha de
la página y en la parte inferior (relate, promote).
2. Patrón Homepage Portal (C1)
Este patrón ayuda a perfilar el grueso del
diseño de la página de inicio de un sitio Web.
Problema:
Las páginas de inicio deben seducir a los
visitantes mediante un estilo adecuado a la
vez que deben guardar un equilibrio con
otros aspectos como pueden ser la
navegación, el contenido, la marca e
identidad del sitio, y la rapidez de descarga.
Marca e identidad del sitio
La marca de un sitio Web es una promesa de lo que
éste ofrece, y que tiene como objetivo atraer a los
usuarios para que naveguen por el sitio. Una vez
conseguida la atención, hay que intentar satisfacer
continuamente la promesa para ganar su respeto y
confianza.
Lograr una primera impresión positiva del estilo
Si no se aplica un estilo adecuado a la naturaleza y
propósito del sitio Web, se corre el riesgo de que los
usuarios piensen que no es lo que estaban
buscando. Por tanto hay que diseñar pensando en
la audiencia potencial del sitio.
Seducir con el contenido
Pasado sólo unos segundos tras entrar a un sitio Web, los usuarios
hacen un juicio de valor del mismo. Ese es el momento en el que
se debe captar y retener su atención. Además de una escritura y
unos recursos visuales vivos, es importante determinar los
contenidos apropiados a mostrar en la página. Hay que procurar
organizar estos contenidos en títulos, resúmenes y cuerpo.
Hacer una página de inicio ligera
Si un usuario se dirige a un sitio y la página de inicio tarda
demasiado en cargarse, lo más probable es que desista y dé
marcha atrás.
Estrategias para agilizar las descargas:
- Aprovechar las capacidades de HTML, utilizar texto siempre que
sea posible
- Usar imágenes rápidas de descargar
- Usar tablas HTML separadas en lugar de una gran tabla
- Evitar contenido de descarga lenta como sonido, animaciones
flash o applets.
Patrón Writing for Search
Engines
Este patrón proporciona la solución para escribir
páginas Web que obtengan un ranking elevado por
parte de los motores de búsqueda.
Problema:
Cuando se busca información en Internet
relacionada con el sitio Web que se está diseñando,
es fundamental que éste aparezca en las primeras
posiciones de la lista de resultados, si queremos que
los navegantes lo encuentren rápida y regularmente.
Patrón Writing for Search
Engines
Los motores de búsqueda son las herramientas más
populares para buscar páginas Web en Internet. Presentan
listas de resultados de búsquedas que los usuarios exploran
hasta que dan con el sitio Web que se ajusta a sus
expectativas. Como lo normal es realizar la exploración
partiendo de la cabeza de la lista, un sitio Web necesitará
aparecer en las primeras posiciones.
Los motores de búsqueda indexan archivos almacenados
en servidores Web. Estos programas, llamados crawlers o
spiders, parten de un pequeño conjunto de sitios Web, y
recorren las páginas de enlace a enlace, recopilando e
indexando información sobre los contenidos de las mismas.
Cuando se busca información en los motores, éstos
consultan su base de datos y presentan resultados
clasificados por su relevancia o por la frecuencia de
apariciones de palabras en una página o sitio.
En cualquier caso, las palabras empleadas en el
contenido de un sitio Web deben ajustarse a las palabras
clave que los buscadores recogen del formulario de
búsqueda.
Estrategias ineficaces
La mayoría de los motores de búsqueda guardan secreto sobre
el algoritmo que emplean para ponderar los sitios Web, para
evitar el plagio y para evitar los trucos usados por algunos
diseñadores en sus sitios. Uno de los trucos es añadir palabras
claves muy populares pero para nada representativas del sitio,
tales como “sexo” y “MP3”, que dirijan el tráfico al sitio al tener
más probabilidad de aparecer en resultados de búsqueda.
Otro truco es presentar un conjunto de páginas falsas a los
motores, mientras se presentan otras a los visitantes del sitio.
Este tipo de estrategias para mejorar el ranking en las
búsquedas no es ético e incluso son perseguidas por los
gestores de los servicios de búsqueda. Aquí se muestra una lista
de estrategias a evitar:
Palabras clave repetidas.
Palabras clave que no describen el contenido del sitio.
Palabras clave propiedad de otros sitios.
