arquitectura de webapps . . . 328 E
DISEÑO DE WEBAPPS
C A P Í T U L O
13 C O N C E P T O S C L A V E
arquitectu ra CVM . . . . . . . . 328
arquitectura del contenido . . 326
objetos . . . . . . . . . . . . . . 324
diseño
arquitectónico . . . . . . . . . 326
cal id ad . . . . . . . . . . . . . . 374
contenido . . . . . . . . . . . . 324
en el nivel de
componentes. . . . . . . . . . 331
estética . . . . . . . . . . . . . 323
gráfico . . . . . . . . . . . . . . 324
metas. . . . . . . . . . . . . . . 320
navegación . . . . . . . . . . . 329
pirámide . . . . . . . . . . . . . 321
MDHOO . . . . . . . . . . . . . . . 332
n su autoriz ado libro sobre diseño web, Jako b Nielsen [Nie0 0] afirm a lo siguient e: “En
esen cia , hay dos enfo qu es fun dam ent ale s del diseñ o : el ideal artístico de expresar s e a sí
mism o y el ideal de la ingen ier ía de resolv er un problem a para un client e.” En la primera
década del desar rollo de la web, el enfoque que elegían muchos diseñadores era el ideal artís-
tico. El diseño se desarrollaba de manera ad hoc y por lo general se efectuaba a medida que se
generaba HTML. Desp u és evolucio n ó a partir de la visión artística que surgió de la const ru cció n
de webap p s.
I n clu so h o y, m uch o s de sar ro llado res we b ut ilizan web a p p s co m o cart e l in fantil p ara un “ di-
señ o lim it ado ”. Af irm an que la inmediatez y vo lat ilida d de un a web a p p p alidecen an t e el diseñ o
form al, q ue é st e ev o l ucio n a co n fo rm e se e labo ra (se co dif ica) un a ap licació n y q ue d e be d e di-
carse relativamente poco tiempo a crear un modelo detallado del diseño. Este argumento tiene
algo de v erda d, p ero só lo p ara web a p p s r e la tiv am ent e sen cillas. C uan do el contenido y las fun -
ciones son complejos o cuando el tamaño de la web a p p in cluy e ciento s o m iles de objetos de
co nt en ido , fun cio n e s y clases de an álisis y cuando el éxit o de la web a p p t en ga in f luen cia dir ecta
en el éxito del nego cio , el diseño no puede ni debe tomarse a la ligera .
Est a r ealida d co n d uce al seg un do en fo q ue de Nielsen : “el ideal de la ingeniería es resolver un
proble m a para un client e”. La ingenier ía web1 adopta esta filoso fía , y un enfoque más riguroso
del diseñ o de weba p p s permit e que los desarrolladores la hagan realidad.
U N A
M I R A D A
R Á P I D A
¿Qué es? El diseño de webapps incluye acti-
vidades técnicas y no técnicas que incluyen
lo siguiente: establecer la vista y sensación de
la webapp, creando la distribución estética de la
blecer el diseño de los objetos del contenido. El diseño
estético (también llamado diseño gráfico) establece la vista
y sensación que el usuario final percibe. El diseño arqui-
tectónico se centra en la estructura general de hipermedios
interfaz de usuario, definiendo la estructura arquitectónica
general, desarrollando el contenido y la funcionalidad que
residen en la arquitectura y planeando la navegación
que ocurre dentro de la webapp.
¿Q ui én lo hace? En la creación del modelo del diseño de
una webapp , intervienen ingenieros web, diseñadores
gráficos, desarrolladores de contenido y varios participan-
tes más.
¿Por qué es importante? El diseño permite crear un
modelo que se evalúe respecto de su calidad para mejo-
rarlo antes de la generación de contenido y código, de la
realización de las pruebas y del involucramiento de un
gran número de usuarios. El diseño es el lugar donde se
establece la calidad de la webapp.
¿Cuáles son los pasos? El diseño de una webapp incluye
seis etapas principales que son orient adas por la informa-
ción obtenida durante la modelación de los requerimien-
tos. El diseño del contenido utiliza el contenido del modelo
(desarrollado durante el análisis) como la base para esta-
de todos los objetos y funciones del contenido. El diseño de la interfaz establece la distribución y mecanismos de distri-
bución que definen a la interfaz de usuario. El diseño de
la navegación define la forma en la que el usuario final
navega a través de la estructura de hipermedios. Y el dise-
ño de los componentes representa la estructura interna
detallada de los elementos funcionales de la webapp.
¿Cuál es el producto final? El principal producto que se
genera durante el diseño de la webapp es un modelo del
diseño que incluye aspectos del diseño del contenido, de la
estética, de la arquitectura, de la interfaz, de la navega-
ción y en el nivel de componentes.
¿Cómo me aseguro de que lo hice bien? Cada ele-
mento del modelo del diseño se revisa para descubrir
errores, inconsistencias u omisiones. Además, se toman en
cuenta soluciones alternativas y se evalúa el grado en el
que el modelo actual del diseño llevará a una implementa-
ción eficaz.
1 La ingeniería web [Pre08] es una versión adaptada del enfoque de ingenierí a de software que se presenta en todo
este libro. Propone una estructu ra ágil, pero disciplin ad a , para construi r sistemas y aplicaciones basados en web
con calidad industrial .
317
318 PA R T E D O S MO D E L A D O
13 . 1 C A L I D A D D E L D I SE Ñ O D E W E B A P P S
Cita:
“Si los productos se diseñan para
que se ajusten mejor a las
tendenci as natural es del com-
portami ent o humano, entonces
las person as estarán más satis-
fechas, más complac id as y serán
más product iv as. ”
Susan Weinschenk
? ¿Cuáles son los
prin ci p a l es atributos
de la calidad de las
webapps?
El diseño es la act iv idad de la ingeniería que genera un producto de alt a calida d. Est o llev a a una
pregunta recurrente que surge en todas las discip lin as de la in g en ier ía : ¿q ué es cali da d? En esta
secció n estudiarem o s la respuesta en el context o del desarro llo de webap p s .
Toda persona que haya navegado en la r ed m un dia l o qu e h ay a ut ilizado un a intr an et co rp o-
rativa se ha formado una opinión sobre lo que co n st it uy e un a “ buen a” web a pp . Los puntos de v ista
in div iduale s v ar ían m uch o . A algunos usuarios les gustan los gráfico s br illant es, otro s prefier en el
text o sim p le , alg un o s m á s de m an dan m uch a in form ació n , m ientr as los hay que desean una pre-
sentación abreviada. A algunos les agradan las h err am ien t as an alít icas sof ist icada s o t en er acceso
a bases de datos y a otros les gusta lo sen cillo . En r ealida d, la p ercep ció n del usuario acerca de lo
q ue e s “ b uen o ” (y en consecuencia la aceptación o rechazo de la weba p p) p uede ser un aspecto
más importante que cualquier otro de índole técnica sobr e la calidad de las webapp s.
P ero, ¿có m o se p ercibe la calida d de un a w eb a p p ? ¿Q ué atributos debe tener para que haya
bondad ante los o jo s de los us uar io s f in ales y a la v ez ex ist an las características técnicas de
calidad que perm it an corregir, adapt ar , mejo rar y dar apoyo a la aplicación en el largo plazo ?
En realidad, a las web a p p s s e ap lican t o das las características técnicas de calidad del diseñ o
estudiadas en el cap ít ulo 8 y los atributos generales de calidad que se vieron en el cap ít ulo 14.
Sin em bar go , los más relevantes de est o s at rib ut o s gen erales — usa bilida d, fun cio n alida d, con-
fiabilida d, ef ic ien cia y s uscep t ibilida d de r ecibir m an t en im ien t o — br in dan un a base útil para
evaluar la calidad de los sistemas basados en web.
Olsin a et al. [Ols99 ] h an prep arado un “ árbo l de r e q uer im i en t o s de calidad” q ue id ent ifica un
co n jun t o de at rib ut o s t écn ico s — usa bilida d, fun cio n alida d, con f iabilida d, ef ic ien cia y su scep t i-
bilidad de r eci bir m an t en im ien t o — q ue gen eran la calidad en las web a pp s .2 La figura 13.1 re-
sume su trabajo. Los cr it er io s q ue ahí aparecen tienen interés especial si el lector diseña, cons-
truye y da manten im ient o a web a p p s a largo plazo.
Of futt [Off02] agrega los siguientes a los c in co at r ib ut o s pr in cip ales de la calid a d q ue se men-
cionan en la figura 13.1:
Seguridad. Las web a p p s se h an int egra do m u ch o co n b ase s de dat o s cr ít icas, co rpo rativ as y
gubernamentales. Las ap licacio n es de co m ercio elect ró n ico ext r aen y después almacenan in-
form ació n delica d a p ara el c lient e. Por estas y muchas otras razones, la se g ur ida d de las web-
a p p s t ien e im p o rt an cia cap it a l en m uc h as sit ua cio n es. La m e di da clav e de la seg ur i da d de una
web a p p y de su ambiente de servidor es su capacidad para rechazar los accesos no autorizados
o para detener un ataque proveniente del ext er ior . El an álisis d et allado de la seg ur i da d de las
web a p p s est á m ás allá del alcance de est e libro . Si el lector está interesado en este tema, puede
consultar [Vac0 6] , [Kiz05] o [Kal03].
Disponibilidad. Aun la m ejo r web a p p será in cap az de sat isf acer las necesidades de los usua-
rio s si n o se en cuen t r a disp o n i ble . En sent ido t écn ico , la disp o n i bilida d e s la medida porcentual
del t iem p o q u e un a web a p p p ue de ut ilizar se . El us uar io f in al co m ú n e sp era q ue las webapps se
h allen di sp o n ibl es las 24 horas de los 365 días del año. Algo menos que eso es tomado como
in acept able .3 P ero el “t iem p o ar r iba” n o es e l ú n ico in dica do r de la dispo nibilidad. Offutt [Off02]
s u giere q ue “el e m p leo de características que sólo se encuentren disponibles en un navegador
o platafo rm a ” hace que quien es tengan una config ura ció n difere nt e de navegador o plataforma
no puedan utilizar la weba p p. Invariab lem ent e, el usuario irá a otro sitio.
2 Estos atributos de la calidad son similares a los que se mencionan en los capítulos 8 y 14. Esto implica que las
características de la calidad son universales para todo el software .
3 Por supuesto, esta expectativa no es realista. Para las webapps import ant es , deben program ars e “ tiempos fuera”
a fin de que reciban arregl os y actualizaciones.
319 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
FIGURA 13.1
Árbol de
requerim iento s
de la calidad.
Fuente: [Ols99].
Calidad
de una
aplicación
web
Usabilidad
Funcionalidad
Confiabilidad
Eficiencia
Facilidad para
recibir
mantenimiento
Comprensión global del sitio
Retroalimentación y ayuda en línea
Características y estética de la interfaz
Características especiales
Capacidad de búsqueda y de recuperación
Características de navegación y de conexión
Características relacionadas con el dominio de la aplicación
Procesamiento correcto de los vínculos
Recuperación de errores
Validación y recuperación de las entradas del usuario Desempeño del tiempo de respuesta
Velocidad de generación de la página
Velocidad de generación de los gráficos
Facilidad de corrección
Adaptabilidad
Extensibilidad
Escalabilidad. ¿Una weba p p y su ambiente de servid o r pued en crecer para que manejen 100,
1 000, 10 000 o 100 000 usuar io s? ¿La web a pp y los sistemas con los que tiene interfaz son ca-
paces de m an ejar un a v ar iació n sign if icativ a del volumen o su respuesta se desplomará (o ce-
sará)? No ba st a co n struir un a web a p p ex it o sa. Tam bié n es im p o r t ant e q u e p ue da asi m ilar la
carga del éxito (much o s más usuar io s) y que tenga aún más éxito.
Tiempo para llegar al mercado. Aunque el tie m p o q u e t o m a llegar al mercado en realidad
no es un atributo de la calidad en el sent ido t écn ico , sí lo es desde el punto de v ist a de la em-
presa. Es f r ecuen t e q ue la p r im era w eb a p p q ue lle ga a un se g m en t o esp ecíf ico del mercado
obtenga un número desproporcionado de usuar io s finales.
Diseño de una webapp. Lista de revisión de la calidad
La siguiente es una lista adaptada de la información
contenida en Webreference.com , donde se plantean
INFOR MACIÓN
preguntas que ayudarán a los diseñadores y a los usuarios finales
de la webapp a evaluar la calidad de la aplicación:
• ¿Es posible adaptar las opciones de contenido, función o
navegación a las preferencias del usuario?
• ¿Puede personalizarse el contenido o la funcionalidad al ancho de
banda con el que se comunica el usuario?
• ¿Se han utilizado de manera apropiada las imágenes y otros
medios distintos del texto? ¿Es posible adaptar el tamaño de
los archivos de imagen para mejorar la eficiencia de la pan-
talla?
• ¿Las tablas están organizadas y tienen un tamaño tal que se entienden y despliegan de modo eficiente?
• ¿El HTML está optimizado a fin de eliminar las ineficiencias?
• ¿El diseño general de la página tiene lectura y navegación fáciles?
• ¿Todos los vínculos llevan a información de interés para los usua-
rios?
• ¿Es probable que la mayor parte de vínculos persistan en la red
mundial?
• ¿La webapp t iene herramientas de administración del sitio, tales
como historial del uso, prueba de vínculos, búsqueda local y segu-
ridad?
A q uello s q ue b u scan in form a ció n disp o n en de m iles de m illo n es de páginas web. Aun las
bú s q ue da s bien dir i gi da s en la red mundial generan una avalancha de co nt en i do s. Con tan-
tas fuentes de información entre las cuales e le gir, ¿có m o ev alú a el usuario la calida d (es decir,
la v eraci da d, ex act it ud, co m p let it ud, o p o rt un ida d, et c . ) del contenido que presenta una web a p p?
T illamn [T il00] sugiere el siguie nt e conjunt o de criterio s útiles para ello:
320 PA R T E D O S MO D E L A D O
?
¿Qué debe considerarse
cuan do se evalúa la
calidad del contenido?
• ¿Es fácil determinar el alcance y la profun d id ad del contenido a fin de estar seguros de
que satisf a ce las necesidades del usuario ?
• ¿Puede identif icar s e fácilm ent e la formació n y la autoridad de los autores del contenid o ?
• ¿Es posible determ in ar la actualid a d del conten id o, la fecha de su última actualiza ció n y
en qué consistió ésta?
• ¿El contenido y su ubicación son estables (permanecerán en la URL de referen cia)?
Adem ás de estas preguntas relacionadas con el contenido, deben agregarse las siguient e s:
• ¿Es creíble el conten id o ?
• ¿El conten id o es único ?, es decir , ¿la web a p p brin da algú n benef icio único a quien es la
emplea n ?
• ¿Es valio so el contenido para la com un id a d de usuarios a la que se dirig e?
• ¿Está bien organ iza do el conten ido ? ¿Está indizad o ? ¿Se accede a él con facilid ad ?
Las listas de comprobación citadas en esta sección representan sólo una muestra pequeña de
los aspectos que deben estudiarse a medida que el diseñ o de la weba p p evolucio n a.
13 . 2 M E T A S D E L D I SE Ñ O
En su co lu m n a p er ió di ca so bre el diseñ o web, Jean Kaiser [Kai02 ] su giere un co n jun t o de metas
para el diseñ o q ue so n ap licable s v irt ual m en t e a t o da web a p p , sin im p o rt ar su d o m in io de ap li-
cació n, tamañ o o comp lejid ad .
Cita:
“Que algo pueda hacers e, no
significa que deba hacers e . ”
Jean Kaiser
Cita:
“Para ciertas person as , el diseño
web se centra en el aspecto
visual y en la percep ci ón … Para
otras, se trata de estruc tu - rar la
informació n y la navegac ió n a
través del espacio del
document o. Otras más consi-
deran incluso que el diseño web
es tecnolo gí a … En realid ad, el
diseño incluye todo esto y tal
vez más.”
Thom a s Powell
Simplicidad: Aun q ue p arezca al go p a sa do de moda, el afor ism o “t o do co n m o deració n ” es
aplicable a las webapps. Existe una tendencia entre ciertos diseñadores a dar al usuar io fin al
“ dem asia do ”: co n t en ido ex h a u stiv o , ext r em o s v i s uale s, an im acio n e s int rus as, p á gin as we b
enorm es… y la lista sigue. Es mejor moderació n y simp licid ad.
El co nt en i do de be s er in fo rm at iv o p ero sucin t o y de be ut ilizar un m o do de ent r ega (t ext o ,
im á gen es, v ideo o a u dio ) q ue r e s ult e ap ro p iado p ara la in form a ció n q ue se en v íe . La estéti-
ca debe ser agradable pero no abrumadora (demasiados colores tienden a distraer al usuario
en vez de m ejo rar la int er acció n ). La arq uit ect ura d e be lo grar los o bjetiv o s de la web a p p de la
m an era m á s sen cilla p o si ble . La navegación debe ser directa y sus mecanismos, obvios para
la int uició n del us uar io fin al. Las fun cio n es de be n ser f áciles de ut ilizar y m ás f áciles de en-
tender.
Consist encia. Esta meta del diseño se aplica virtualmente a todo elemento del m o delo del
dis eñ o . El contenido debe construirse de m o do co n gr uen t e ( fo rm at o y t ip o graf ía del texto deben
ser los mismos en todos los documentos de text o ; las imágenes deben tener coherencia en su
asp ect o, co lo r y est ilo ). El diseñ o gráf ico ( est ét ica) de be p resen t ar un a v ist a consistente en todas
las partes de la web a pp . E l diseñ o arq uit ect ó n ico d e be e st ablec er p lant illas que generen una
estructura de hipermedios constante. El dis eñ o de la int erf az de be def in ir modos consistentes
de int er acció n , n av eg ació n y desp lie g ue del co nt en ido . Los mecanismos de navegación deben
usarse de manera consistente en todos los elementos de la web ap p. Co m o dice Kaiser [Kai0 2] :
“recuer de qu e p ara un v isit ant e, un sit io we b es un lu gar f ísico . Si sus páginas no tienen un di-
seño consistente, son fuente de confusión ”.
Identidad. El diseñ o de la estética, la int er f az y la n av e gació n de un a web a p p deben ser con-
sistentes con el do m in io de la ap licació n p ara la que se va a elaborar. Un sit io we b p ara un grupo
de h ip- h o p sin duda tendrá un aspecto y sen sació n dist int o s q ue un a web a p p diseñada para una
compañía de servicio s finan ciero s. La arquitectura de la webap p será diferente por completo, las
321 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
interfaces se construirán para que reciban a distintas categorías de usuarios, la n av e gació n se
o rgan izará p ara q ue c u m p la o bjetiv o s dif er ent es. U st e d (y q uien e s co n t r ib uy an al diseño) debe
trabajar para establecer la ident id ad de la weba pp por medio del diseñ o .
Robustez. Con base en la ident ida d q ue se h ay a est ablecido , es f r ecuent e q ue un a web a p p haga
un a “p ro m esa” im p lícit a al usuar io . Ést e esp er a co nt en ido y funciones robustas que sean relevan-
tes para sus necesidades. Si no existen o son insuficie nt es, es probab le que la webap p fracase.
Navegabilidad. Ya se dijo que la n av e ga ció n de b e ser sen cilla y consistente. También debe
estar diseñada en forma tal que sea int uit iv a y p redeci ble . Es decir , el us uar io de be co m p ren d er
có m o m o v er se p o r la web a p p sin ten er q ue b u scar v ín culo s o in st ruc cio n es p ara la n av ega ció n.
Por ejem p lo, si un campo de ico n o s gráf ico s o de imágenes contiene algunos que serán usados
co m o m ecan i s m o s de n av e gació n , de ben i den t if icar se v isual m en t e. Na da es más frustrante que
intentar encontrar el vínculo vivo apropiado entre muchas imágenes.
Tam bién es i m p o rt an t e co lo car los v ín culo s h acia el contenido y las fun cio n e s de la web a pp
en una ubicación predecible en cada página web. Si se requiere desplazar la página (lo que
suc ed e co n f r ecuen cia) , los v ín culo s sit ua do s en las p art es sup er io r e in ferio r de la página hacen
que las tareas de naveg ació n del usuario sean más fáciles.
Atractivo visual. De todas las categorías de so ft war e, las aplicacio n e s we b so n in di sc ut ible-
mente las m ás v i s uales, din á m i cas y estéticas. La belleza ( at r activ o v isual) r adic a sin lugar a
dudas en los o jo s del espectador, pero muchas características del dis eñ o ( asp ect o y sensación
del cont en ido , dist r ibució n de la int er f az, co o rdin ació n del co lor , balan ce del texto , im ágen es y
otros medios) aumentan el atractiv o visual.
Compatibilidad. Un a web a p p se us ará en v ario s a m bien t es ( dist int o h ard war e, t ip o s de co -
n ex ió n , sist e m as o p erat iv o s, n av ega do re s, et cét era) y debe diseñarse para que sea compatible
con cada uno.
13 . 3 P I R Á M I D E D E L D I SE Ñ O D E W E B A P P S
Cita:
“Si un sitio es perfec t am en t e
utilizabl e , pero carece de un
estilo elegant e y apropiado, fra-
casará . ”
Curt Clonin g er
¿Q u é es el dis eñ o de un a w eb a p p ? Est a sen cilla p reg unt a es m ás difícil de responder de lo que
se creería. En n uestro libro [Pre0 8] de in gen ier ía we b, Dav id Lo we y yo lo analizamos del m o do
siguient e:
La crea ción de un di seño e fi ca z requ eri rá por lo general de un conjunto divers i fi cado de apt it udes. En
ocasiones, para proyectos pequeños, un desarrollador único necesitará tener varias habilidades. Para
los proyectos grandes , es acons ej able o fact ibl e con fi a r en la experi en ci a de especi al i s t as: i ngenieros
web, di señado res grá fi cos , desarrol l adores de contenido, progra mad ores , especi al i s t as de bases de
datos, arquitectos de la i nfor ma ción, i ngenieros de redes, expertos en seguridad y probado res . D epe n-
der de estas distintas aptitudes permite la crea ción de un modelo cuya calidad puede evaluarse a fi n
de mejorar su contenido y su código antes de que se generen contenido y código, de que se realicen
pruebas y de que se involucre un gran número de usuarios. Si el análisis reside en donde se establece
la calidad de la webapp, entonces el diseño está donde la calidad está en verdad incrustada.
La mezcla apropiada de h abilida de s de diseñ o v ar iar á en fun ció n de la naturaleza de la
web a p p. La f ig ura 13 .2 ilustr a la p ir ám i de del diseñ o de las web ap p s . Cada n iv el representa una
acció n del diseño que se describe en las siguient e s seccio n es.
13 . 4 D I SE Ñ O D E L A I N T E R F A Z D E L A W E B A P P
Cuan d o el usuario interactúa con un sistema basado en computadora, se aplica un conjunto de
princip io s fun dam ent ale s y lineamientos generales de diseño. Éstos se estudiaron en el capít ulo
322 PA R T E D O S MO D E L A D O
?
FIGURA 13.2
Pirámide del
diseño de las
webapps
usuario
Diseño
de la interfaz
Diseño estético Diseño
del contenido Diseño de
la navegación Diseño de
la arquitectura
Diseño de los componentes
tecnología
¿De qué mecanismos
de interacción disponen
los diseñadores
de webapps?
11.4 Aun que las weba p p s plantean algun as dificu lt ad es especiales en el diseñ o de la interfaz de
usuar io , los princip io s y lineam ient o s básico s son aplicab les.
Un o de los retos del diseñ o de la int er f az de las web a p p s e s la n at uraleza in det erm in a da del
punto en el que entra el us uar io . Es decir, éste p uede in gresar po r un a ubicación “ in icial” de la
web a p p (la página de arranque, por ejemplo) o por algún vínculo en cierto nivel inferior de
la arquitectura de aq uéll a . En algunos casos, la web a p p se diseñ a de m o do q ue r e dir ija a l usua-
rio a un a u bica ció n in icial, p ero si esto es algo indeseable, entonces el diseño debe dar caracte-
r íst icas de navegación en la interfaz que acompañen a todos los o bjet o s de contenido y de las
cuales se disponga sin import ar el modo en el que el usuar io ingres e al sistema.
Los o bjet iv o s de la int er f az de un a web a p p so n lo s sig uien t es: 1) establecer una ventana con-
gruente en el contenido y las fun cio n es q u e br in da, 2) guiar al usuario a través de una serie de
interacciones con la web a p p y 3) organizar las o p cio n es de n av eg ació n y co nt en ido di sp o n ibl es
para el usuario. Para lograr una interfaz consistente, primero debe usarse un diseño estético
(v éase la secció n 1 3 .5 ) a fin de est ablecer un “ asp ect o ” co h erent e . Est o in cluy e muchas carac-
terísticas, pero debe ponerse énfasis en la dist rib ució n y la form a de los mecanismos de nave-
gació n . P ara g uiar la int er acció n del usuario, debe establecerse una metáfora5 apropiada que
p erm it a al usuario tener una comprensión intuitiva de la int erf az. A fin de im p le m en t ar las op-
ciones de naveg ació n , puede seleccio n ar s e algun o de los siguie nt es mecan is m o s:
• Menús de navegació n: contien e n palabras clave (organ izad a s en form a vertical u hori-
zontal) que enlist an conten id o o funcio n e s clav e. Estos menú s se implem e nt an de modo
que el usuario pueda elegir entre una jerarquía de subtemas que se despliegan al selec-
cionar la opció n princip al en el menú.
• Iconos gráficos: botones, interruptores y otras imágen es sim ilare s que permit en que el
usuar io seleccio n e algun a propied ad o que especif iq u e una decis ió n.
• Imágenes: cierta represe nt ació n gráfica que el usuario selecciona para establecer un
vínculo hacia un objet o de contenid o o funció n de la webap p .
4 La s ecc i ón 1 1 .5 es t á d edi cad a al di s eño de la i nt e r faz de la weba pp . Si aún no se ha leído, es el momento de
hacerl o .
5 En este contexto, una metáfora es la repres ent ac i ón (es t abl eci d a p o r la exp eri en ci a del usuario con el mundo
real) que se modela en el con t ext o de la i nt e r faz . Un e j e mp lo s en ci ll o s er í a u n i nt e r rup to r d esli zabl e qu e s e utilice
para controlar el volumen auditivo de un archivo .mpg .
323 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
?
Es import ant e observ ar que en cada nivel de la jerarqu ía del conten id o debe proporcio n ar s e uno
o vario s de estos mecanismos de control.
13 . 5 D I SE Ñ O D E L A E ST É T IC A
No todo ingeniero web
(o de software) tiene
talento artístico
(estético). Si el lector se
encuentra en esta
categoría, contrate un
diseñador gráfico
experimentado para
que haga el trabajo de
diseño estético.
Cita:
“Descub rim os que las person as
evalúan rápidam en t e un sitio
tan sólo por su diseño visual.”
Lineamientos Stanford para
la credibilidad en web
CONSEJO
Los usuarios tienden a tolerar el
desplazami ent o vertical mejor que el
horizontal. Evite los formatos anchos
para la página.
El diseñ o est ético, t am bién llam ado d iseñ o g rá fico , es una actividad artística que complementa
los aspectos técnicos del diseñ o de las weba p p s. Sin est ét ica , un a web a p p tal vez sea funcional
pero no atractiva. Con est ética , un a w eb a p p l lev a a su s u s uar io s a un m un do q ue los sitúa en un
nivel tanto visceral como intelect u al.
P ero, ¿q u é es la est ét ica? Hay un v iejo r ef r án q ue dice qu e “la belleza está en los ojo s del
espectador”. Esto es particularmente cierto cuando se trata del diseñ o est ét ico de las web a p p s.
P ara llev ar a cabo é st e co n ef icacia , h ay q ue v o lv er a la jer arq uía del us u ar io de sar ro llad a co m o
parte del m o delo de r eq u er im ien t o s (v éase el cap ít ulo 5) y pregun t ar : ¿ qu ién es son los usua rios
de la webap p y qué “vista ” desean tener?
13.5.1 Aspectos de la distribución
To da p ágin a we b t ien e un a can t ida d lim it ad a de “ sup erf ic ie” q ue se utiliza p ara dar ap o y o a la
est ética n o fun cio n al, caract er íst icas de n av e gació n , co n t en ido de in form ació n y fun cio n es dir i-
gidas al usuar io . El desarro llo de dich a super fic ie se planea durant e el diseñ o estético.
Igual q ue t o do s los temas de la estética, cuando se diseña la dist rib ució n de la pantalla no hay
reglas absolutas. Sin embargo, es útil consid era r vario s lineam ient o s de la distrib u ció n general:
No tema al espacio en blanco. No es aconsejable ocupar con información cada centí-
metro cuadrado de una página web. El amasijo resultante hará difícil que el usuar io iden -
tifique la inform ació n o las características que necesita y creará un caos visual que no será
agradable a los ojos.
Hacer énfasis en el contenido. Después de todo, ésta es la razón de que el usuario esté
ahí. Nielsen [Nie00 ] sugiere que la página web común debe tener 80 por cient o de conte-
nido y destinar el resto a la naveg ació n y otras características.
Organizar los elementos con una distribución que vaya desde arriba a la iz-
quierda hacia abajo a la derecha. La gran may or ía de usuarios de una página web la
recorrerán en forma muy parecida a como lo hacen con las hojas de un libro : desd e arriba a
la izquierda hacia abajo a la derech a.6 Si los elementos de la distr ib u ció n tienen priorid ad es
específ icas, aquello s que sean priorit ar io s deben colocar s e en la parte superior izquierda de
la superf ic ie de la págin a.
Agrupa r la navegación, el contenido y la función en forma geográfica dentro de la
página. Los humanos buscamos patrones virtualmente en todas las cosas. Si en una pá-
gina web no hay patron es discern ib les, es probab le que la frustr a ció n del usuario aumente
(debid o a la búsqueda innecesaria de la inform ació n requer id a) .
No aumente la superficie con la barra de desplazamiento. Aunque es frecuente que
se necesite el desplazamiento, la may or parte de estud io s indican que los usuario s prefer i-
rían no hacerlo. Es mejor reducir el contenido de la página o presentar en varias páginas el
que sea necesario.
Cuando se diseñe la distribución hay que considerar la resolución y tamaño de la
ventana del navegador. En vez de defin ir tamañ o s fijos dentro de una plantilla, el di-
seño debe especif icar todos los parámetros en términos de porcentaje del espacio disp o n i-
ble [Nie00].
6 Hay excep c io n es cultural es y lingüísticas , pero esta regla se aplica a la mayo r parte de usuarios.
324 PA R T E D O S MO D E L A D O
13.5.2 Aspectos del diseño gráfico
El diseñ o gráf ico t o m a en c uen t a cada asp ect o de la v ist a y sensación de la web a pp . El proceso
de di señ o gráf ico co m ien za co n la distr ib ució n (v éase la secció n 1 3.5 .1 ) y avanza hacia la con-
sid eració n de los esquemas de co lo r glo bale s; t ip o s, t am añ o s y est ilo s del t exto ; u so de m e dio s
co m p lem en t ar io s ( audio , v ideo y an im ació n ) y todos los demás elementos estéticos de una
aplicació n.
El an álisis ex h aust iv o de los temas del diseñ o gráf ico de web a p p s est á m ás allá del alcance
de est e libro . El lect or p ue d e o bt en er r eco m en dacio n e s y lin ea m ien t o s en m uch o s sit io s we b
dedica d o s a dich a mater ia (como www.graphic-design.com , www.grantasticdesigns.com y
www.wpdfd.com ) o en uno o más documentos impresos (como [Roc06] y [Gor02]).
Sitios web bien diseñados
A veces, la mejor manera de entender lo que es un buen
diseño de webapps es ver algunos ejemplos. En su artículo
“Las veinte mejores recomendaciones para el diseño web”, Marcelle
Toor (www.graphic-design.com/Web/feature/tips.html)
recomienda los siguientes sitios como ejemplos de lo que constituye un
buen diseño gráfico:
www.creativepro.com/designresource/home/787.html:
empresa de diseño dirigida por Primo Angeli
www.workbook.com: este sitio presenta los portafolios de varios
ilustradores y diseñadores
INFOR MACIÓN
www.pbs.org/riverofsong: serie de televisión y radio públicas
acerca de la música estadounidense
www.RKDINC.com: empresa de diseño con un portafolio en línea
y buenas recomendaciones de diseño
www.creativehotlist.com/index.html: buena fuente de sitios
bien diseñados desarrollados por agencias, empresas de artes
gráficas y otros especialistas de la comunicación
www.btdnyc.com: compañía de diseño encabezada por Beth
Toudreau
13 . 6 D I SE Ñ O D E L C O N T E N I D O
Cita:
“Los buenos diseñadores gene-
ran la regul ari d ad a parti r del
caos; comunican sus ideas con
clarid ad , organizand o y mani-
pulando palabras e imágen es . ”
Jeffery Veen
El diseñ o del contenido se centra en dos tareas diferentes del diseño, cada una de las cuales es
dir igi da p o r in div i d uo s q ue p o seen h a bili da des dist int as. En primer lugar, se desarrolla una re-
presentación del diseño para los o bjet o s del contenido y los m ecan i s m o s r e q uer i do s para esta-
blecer un a r elació n ent r e e llo s. A de m ás, se cr ea la in fo rm ació n den tro de un objeto de contenido
esp ecífico . El t r abajo p o st erio r es llev a do a ca bo p o r escr it o res, di señ a do re s gráf ico s y otros
actores que generan el contenido que se usará en la weba pp .
13.6.1 Objetos de contenido
La relación entre lo s o bjet o s de co nt en ido def in i do s co m o p art e del m o delo de r eq uer i m ien t o s
para la web a pp y los o bjet o s de diseño que representan el contenido es análoga a la relación que
existe entre las clases de an álisis y los componentes del diseño que se describió en capítulos
anteriores. En el co nt ext o del diseñ o de la web a p p, un o bjet o de contenido se parece más a un
o bjet o de datos del so ft ware t r adicio n al. Un o bjet o de co nt en ido t ien e at r ib ut o s q ue in cluy en
info rm ació n de co nt en ido esp ecíf ico (n o rm al m en t e def in i do d uran t e el m o dela do de los reque-
r im ient o s de la web ap p) y atributos de im p lem en t ació n esp ecíf ica q ue se establecen como parte
del diseñ o.
Por ejemplo, piense en una clase de an álisis, ComponentedelProducto , desarrollada para
el sistema de co m ercio elect ró n ico de Ca saS egu ra. El at r ib ut o de la clase de an álisis, descripción,
se representa como clase de análisis llamada DescripcióndeComponente y está compuesta
p or cin co o bjet o s de co nt en ido : DescripcióndelMercado, Fotografía, DescripciónTécnica,
Esquema y Video, que se muestran como objetos sombreados en la figura 13.3. La inform ació n
325 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
Sensor Cámara Panel de
control Características
del software
FIGURA 13.3
Representación
del diseño de
objetos de
contenido
ComponentedelProducto
NúmerodeParte
NombredeParte TipodeParte
Descripción 1 precio
crearNuevoArtículo( )
descripcióndelaPantalla( ) mostrarEspecificacionesTécnicas
Es parte de
1
Descripcióndel
Componente
1
0..1
1 1..*
0..1 0..1 1
DescripcióndeMercado
color de texto estilo de fuente tamaño de fuente espacio entre líneas tamaño de texto
de uso color del fondo
Fotografía
dimensión horizontal dimensión vertical estilo de bordes
Esquema
dimensión horizontal dimensión vertical estilo de bordes
Video
dimensión horizontal dimensión vertical estilo de bordes volumen del audio
DescripciónTécnica
color de texto estilo de fuente tamaño de fuente espacio entre líneas
tamaño de texto de la imagen color del fondo
contenida dentro del objet o de contenido se etiqueta como atributos. Por ejemp lo, Fotografía
(imagen de t ipo .jpg) tiene los atributos dimensión horizontal, dimensión vertical y estilo de bordes.
Puede usarse una asociación UML y un agregado7 para representar relaciones entre los ob-
jet o s de co nt en ido . Por e jem p lo , la aso ciació n UML que se ilustra en la f igura 1 3.3 in dica q ue se
usa una DescripcióndeComponente para cada instancia de la clase ComponentedelPro-
ducto. La DescripcióndeComponente está integrada sobre los c in co o bjet o s de contenido
ilust r ado s. Sin em bar go , la notación de m ult iplic ida d q ue se ap recia in dica q ue Esquema y
Video so n o p cio n ales ( so n p o sibl es 0 ocurrencias), que se requiere una DescripcióndelMer-
cado y una DescripciónTécnica, y que se emplean una o varias instancias de Fotografía.
13.6.2 Aspectos de diseño del contenido
Un a v ez m o d elado s los o bjet o s del co nt en ido , la in form a ció n qu e va a entregar cada objeto debe
regist r ar al autor y después editarse para que satisfaga del m ejo r m o do p o si ble las necesidades
del co n su m i do r . La autoría del contenido es trabajo de especialistas en el área relevante de
quien diseña el o bjet o de contenido, dando un bosquejo de la in fo rm ació n q u e se va a entregar
y una indicación de los t ip o s de o bjet o s de co nt en ido gen eral (p o r e jem p lo , t ext o descr ip tiv o ,
im á gen es, fot o graf ías, et c .) q ue se usarán p ara ent r egar la in form ació n . El dis eñ o est ét ico (v éase
la secció n 13 .5 ) t am bién p ue de ap licar se p ara r ep resent ar la v ist a y sensación apropiadas para
el conten id o.
Los o bjeto s se “ cort an ” [Po w0 2 ] a m edi da q ue se diseñ an p ara fo rm ar las páginas de la w eb-
app. El número de o bjet o s de co nt en ido in co rp o rado en un a p á gin a in div i d ual e st á en fun ció n
de las necesidades del u s uar io , de las r est riccio n es im p ue st as p o r la v elo cida d de descarga de
la conexió n de internet y de las restriccio n es impuest as por la cantidad de desp laz am ient o ver-
tical que el usuario tolerará.
7 En el apéndice 1 se estudian ambas representaciones.
326 PA R T E D O S MO D E L A D O
?
13 . 7 D I SE Ñ O A R Q U I T E C T Ó N I C O
Cita:
“…la estru ct u ra arquit ec t ón i ca
de un sitio bien diseñad o no
siempre es visible para el usua-
rio: no debe serlo.”
Thom a s Powell
¿Qué tipos de
arquitectura del
contenido es común
encontrar?
El diseñ o arq uit ect ó n ico est á lig a do co n las m et as est abl eci das p ara un a web a p p , co n el conte-
nido que se va a presentar, con los usuarios que la v isit ar án y con la filo so fía de n av eg ació n
ado p t ada. Co m o di señ a do r de la arquitectura, el lect o r de be id ent if icar la arquitectura del con-
ten ido y la de la weba p p. La a rq u itectu ra del contenido8 se centra en la manera en la que lo s
o bjet o s de contenido (o compuestos, como páginas web) se estructuran para la p resent ació n y
la n av e gació n . La a rqu itectu ra de la webapp se aboca a la forma en la que la aplicación queda
estructurada para administrar la int er acció n co n el usuario, manejar tareas de procesamiento
intern o, naveg ar con eficac ia y presentar el conten id o .
En la m ay or ía de los casos, el diseño arquitectónico se lleva a cabo en paralelo con el de la
int erf az, el estético y el del co nt en ido . Co m o la arquitectura de la web a p p tal v ez est é m uy in-
flui da p o r la n av e gació n , las decisiones que se tomen durante esta acción del diseñ o in f luir án
en el trabajo realizado durante el diseñ o de aquélla .
13.7.1 Arquitectura del contenido
El diseñ o del contenido se centra en la def in ició n de la estructura general de los hipermedios de
la webapp. Aunque en ocasiones se crean arquitecturas personalizadas, siempre se tiene la
opció n de elegir entre cuatro distint as estruct uras de contenid o [Pow0 0] :
Las estru ctu ra s lin eales (véase la fig ura 1 3.4) se encuentran cuando es común una secuencia
p redeci ble de int er accio n es ( co n ciert a v ar iación o dif eren cia) . Un ejem p lo clá sico es la presen-
tación de tuto riales en lo s que se despliegan páginas de información junto con imágenes rela-
cio n ad as, v i deo s co r t o s o a u dio , só lo de sp ués de h a ber m o st r ado ciert a in fo rm ació n de prerre-
q uisit o s. La secuencia de la presentación del co nt en ido e s p re def in i da y p o r lo general es lineal.
Ot ro eje m p lo ser ía un a sec uen cia de entrada para ordenar un producto en la q ue de b e p ro p o r -
cionarse información específica en un orden determinado. En tales casos, resultan apropiadas
las estructuras mostradas en la f igura 1 3.4. A m e di da q ue el contenido y el procesamiento se
hacen más comp lejo s, el flujo exclu siv am ent e lineal que se aprecia a la izquierd a de la figura da
origen a estructuras lineales más complejas en las que puede invocarse contenido alternativo o
FIGURA 13.4
Estructuras
lineales
Lineal Lineal con flujo opcional
Lineal con desviaciones
8 El término arquitectura de la informació n tambi én se utiliza para denotar estructuras que produzcan una mejor
organi zaci ó n , etiquet ad o , naveg aci ón y búsqueda de objetos de contenid o .
327 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
FIGURA 13.5
Estructura
de malla
en las qu e s uce de un a d esv iació n p ara a d q uir ir co nt en i do co m p l e m en t ar io ( est ruct ura q ue apa-
rece en el lado derech o de la figura 13.4).
Las estru ctu ra s de m a lla (v éase la f ig ura 1 3.5 ) so n un a o p ció n arq uit ect ó n ica q ue s e ap lica
cuando es posible organizar el contenido de una webapp en forma categórica en dos (o m ás)
di m en sio n es. Por ejemplo, considere una situación en la q ue u n sit io de co m ercio elect ró n ico
v en d e p alo s de golf. La di m en sió n h o r izo nt al de la malla representa el t ip o de p alo (m a d era,
m et al, c uñ a, m azo , e t c. ). La di m en sió n v ert ical r ep resen t a las ofertas que hacen los dist int o s
f abr ican t es de p alo s de golf. Ent o n ces, un u s uar io p o dr ía n av e gar p o r la m alla en fo rm a h o ri-
zontal a f in de encontrar la co lu m n a de mazos y después en forma vertical para examinar las
o fert as de los f abr ican t es q ue los v en den . Est a arq uit ect ura de w eb a p p s es útil sólo cuando se
encuent r a conten id o muy regular [Pow0 0] .
Las estru ctu ra s jerá rqu ica s (v éase la f igura 1 3.6 ) so n sin duda la arquitectura más común de
las webapp s . A diferen cia de las jerarq u ías de software dividid as que se estudiaron en el capít ulo
9 y que motivan a controlar el flujo sólo a lo largo de las ramas verticales de la jer arq uía , la
estru ct ura jer árq uica de las w eb a p p s se diseñ a en fo rm a tal q ue p er m it e (p o r m edio de la r am i-
ficació n del h ip ert ext o) qu e e l flujo del control sea en el sentido horizontal a través de las ramas
v erticales de la estructura. Así, el contenido presentado en la última rama del lado izquierdo de
la jerarq u ía puede tener víncu lo s de hipertext o que llevan direct am ent e al conten id o que existe
en la parte media de la rama del lado derech o de la estructura. Sin embargo, debe observarse
FIGURA 13.6
Estructura
jerárquica
328 PA R T E D O S MO D E L A D O
FIGURA 13.7
Estruct ura de red
CLAVE La arquitectura CVM desacopla la
interfaz de usuario de las funciones
de la webapp y del contenido de
información.
q ue a un q ue dich a r am if icació n p erm it e un a n av e g ació n r áp ida p o r el contenido de la weba p p,
genera confusión para el usuar io.
Un a estru ctu ra de red o “telaraña pura” (v éase la f ig ura 1 3 .7 ) es sim ilar en m uch o s sen tido s a
la arquitectura que evoluciona a partir de sistemas orientados a objetos. Lo s componentes ar-
q uit ect ó n ico s (p ágin a s we b, en est e caso ) se dis eñ an de modo que pasan virtualmente el co nt rol
(p o r m e dio de v ín culo s de h ip ert ext o ) a ca da co m p o n en t e del sist em a. Est e en fo q ue p erm it e una
flexibilid ad considerable de navega ció n, pero al mism o tiemp o confun d e al usuar io.
Las estructuras arquitectónicas estudiadas en los párrafos anteriores se combinan para for-
m ar estru ctu ra s co m pu esta s . La arquitectura general de un a web a p p puede ser jerárquica, pero
una parte de la estructura puede tener características lineales y ot r a , form a de r ed. La m et a del
diseñador arquitectónico es ajustar la estructura de la web a p p co n el contenido que va a presen-
tarse y con el procesamiento que va a efectuarse.
13.7.2 Arquitectura de las webapps
La arquitectura de un a web a p p de scr ib e un a in fr aestru ct ura q u e p erm it e q ue un sist em a o ap li-
cació n basa do s en web alcan ce su s o bjet iv o s em p resar ia les. Jacy nt h o et al. [ Jac02 b] describe las
características básicas de esta infraestructura del modo siguient e:
Las apli ca ciones deb en cons t rui rse con el empleo de capas en las que se tomen en cuenta distintas
preocupaciones; en particular, deben separarse los datos de la apl i cación de los contenidos de ésta
(nodos de naveg ación), y éstos, a su vez, deben separarse con toda claridad del aspecto y la sensación
de la interfaz (páginas).
Los autores sugieren una arquitectura del diseño en tres capas que desacopla la int er f az de la
n av e gació n y del comportamiento de la aplicación. Plantean que mantener separadas la int er-
faz, la aplicació n y la navegació n, simp lif ica la implem e nt ació n y mejo ra la reutilizació n.
La arquitectura de co ntrolad o r de la vista del mo d elo (CVM) [Kra88] 9 es uno de v ar io s m o d elos
sugeridos para la in f r aestru ct ura de web a p p s q ue d esaco p lan la int er f az de usuario de su s f un-
c io n es y co nt en ido in fo rm at iv o . El m od elo (a v eces den o m in ado “ o bjet o de m o delo”) contiene
todo el contenido y la ló gica de p ro cesa m ient o esp ecíf ico s de la ap licació n, in cluso t o do s lo s
o bjet o s de contenido, acceso a fuentes de dat o s o in fo rm ació n ext ern o s y todas las funciones de
procesamiento que son específicas de la aplicació n. La vista contiene todas las funcio n es espe-
cíficas de la interf az y perm it e la presentación de contenido y lógica de procesam ient o , incluid o s
9 D eb e o bs erv ars e q u e el CVM es en realidad un patrón de diseño arquitectónico desarrollado para el ambiente
S mal lt al k (v éas e www.cetus-links.org/oo_smalltalk.html ) que puede usarse para cualquier aplicación inter-
activa.
329 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
FIGURA 13.8
La arquitectura
CVM
Fuente: Adaptad o de [Jac02].
Nave- gador
Solicitud o datos
del usuario
Controlad o r
Administra las solicitudes del usuario
Selecciona el comportamiento
del modelo
Selecciona la respuesta
de la vista
Selección de la vista
Mod elo
Solicitud de
comportamiento (cambio de estado)
Cliente
Datos HTML
Vista
Contiene las funciones Contiene objetos de contenido Incorpora
estados de la webapp
Datos del modelo
Actualización
Datos externos
Prepara los datos del modelo Solicita actualizaciones del modelo
Presenta la vista seleccionada por
el controlador
de solicitud
Servidor
todos los o bjet o s de co nt en ido , el acceso a fuentes de datos o información del ext er io r y todas
las fun cio n e s de pro cesa m i en t o q ue r e q uiere e l us uar io f in al. El con tro la do r ad m in ist r a el acceso
al m o delo y la vist a, y co ordin a el flujo de datos entre ellos. En un a web a p p , “la vista es actuali-
zada por el controlador con datos del modelo, basándose en las entradas que da el us uar io ”
[WMT02]. En la figura 13.8 se muestr a una represent ació n de la arquit ect ura CVM .
En relació n co n la f igura, el controlador maneja las so lic it u de s o d at o s del us u ar io . El contro-
lado r t am bién seleccio n a el o bjet o de v ist a q u e sea ap lic a ble co n base en la so licit u d del us uario.
Un a v ez det erm in a do el t ip o de so lic it u d, se tr an s m it e al m o delo un p edi do de co m p o r t am ien to,
q ue i m p le m en t a la fun cio n alid a d o r ec up era el contenido requerido para dar acomodo a la so-
lic it ud. El o bjet o de modelo accede a lo s datos almacenados en una base de datos corporativa,
como parte de un almacén de datos locales o como una colección de archivos independientes.
El o bjet o de vist a apro p ia do de be dar fo rm at o y organizar los dat o s de sar ro llado s p o r el m o delo
p ara lue go tr as m it ir lo s de s de el serv ido r de la ap licació n h acia el navegador del cliente para que
se desplieguen en la máquina de éste.
En muchos casos, la arquitectura de la web a p p se d ef in e en el co nt ex t o del ambiente de
desarrollo en el que va a implementarse la ap licació n . Si el lector está interesado, puede con-
sult ar en [Fo w0 3 ] el an álisi s de los ambientes de desar ro llo y el papel que juegan en el di seño
de arquitecturas de aplicacio n es web.
13 . 8 D I SE Ñ O D E L A N A VE GA C I Ó N
Cita:
“Grete l, sólo espera que salga la
luna y veremo s las migajas del
pan que desmen u cé; ellas nos
mostrarán el camino de regres o
a casa.”
Hansel y Gretel
Un a v ez que la arquitectura de la web a p p h a sido est ablecida y se h an ident ificado s u s componen-
tes (páginas, textos, subprogramas y otras funciones de pro cesam ien t o) , deben def in ir se las rutas
de navegación que permitan a los usuarios acceder al contenido y a las fun cio n es de la web a pp.
P ar a lo grar est o , de be h acer se lo siguient e : 1) identif ica r la semántica de navegación para lo s
distint o s usuar io s del sitio y 2) definir la mecán ica (sintax is) para efect uar la navegació n.
13.8.1 Semántica de la navegación
Co m o m uch as accio n e s del diseñ o de weba p p s, e l diseñ o de la n av egació n co m ien za co n la
consid eració n de la jerarq u ía del usuario y los casos de uso relacionados (véase el capítulo 5),
330 PA R T E D O S MO D E L A D O
CLAVE
Una USN describe los requerimi ento s
de navegación para cada caso de
uso. En esencia, la USN muestra la
forma en la que un actor avanza
entre los objetos de contenido o
entre las funciones de una webapp.
Cita:
“El problem a de la navegaci ó n
en un sitio web es concept u al ,
técnico, espacial, filosófico y
logístico. En consecu en ci a, las
soluciones tienden a reclam ar
combinaci on es complejas e
improvisad as de arte, ciencia y
psicología organizac i on a l. ”
Tim Horg a n
desarrollados para cada categoría de us uar io ( act o r ). C a da act o r p ue de usar la web a p p en fo rma
algo dif erent e , p o r lo que t en drán di stint o s r eq u er im ien t o s de n av eg ació n . A de m ás, los casos de
u so d esar ro lla do s p o r ca da act o r def in ir án un co n jun t o de c lases q ue in cl uir án un o o m ás o bje-
tos de co nt en i do o fun cio n e s de la we bap p . A medida que cada usuario interactúe con la web-
app, encuentra una serie de u n id a d es semá n tica s de na vega ció n (USN): “ co njun t o de estructuras
de in form ació n y navegación relacionadas que colaboran para el cu m p lim ien t o de un subcon-
junto de requer im ie nt o s del usuar io relacion a do s” [Cac02 ].
Un a USN está compuesta por un conjunto de elementos de n av egació n llam a do s [ Gn a9 9 ]
fo rm a s de na veg a r (FdN). Un a FdN representa la m ejo r rut a de navegación a fin de lograr una
meta para un tipo de us uar io esp ecíf ico. Ca da FdN está organizada como un conjunto de n o d o s
de naveg a ció n (NN) co n ect ado s p o r v ín c ulo s. En ciert o s caso s, un v ín culo n av eg able e s ot r a USN.
Ent o n ces, la estructura de n av e gació n gen eral de un a web a p p e st á o rg an iza da co m o jerarq uía
de USN.
P ara ilustr ar el de sar ro llo de una USN, co n sid ere el caso de uso SeleccionarComponentes
deCasaSegura:
Caso de uso: Seleccionar Componentes de CasaSegura
La w ebapp reco me ndar á co mpon entes del producto (como paneles de control, sensores, cámaras,
et c. ) y otras características (como funciones con base en PC implementadas en el softw are) para cada
habi t ación y ent rad a exterior. Si se piden alternativas, la w ebapp las dará, en caso de que exi st an.
P odré obtener i nfor ma ción descriptiva y de precios de cada componente del producto. La w ebapp
creará y mostrará una cuenta de los materi al es con for me sel ec cione dis ti ntos compon entes . P odré dar
un nombre a la cuenta de los materiales y guardarla para futuras referencias (véase el caso de uso
Guardar Configu ración).
Los conceptos subrayados en la descr ip ció n del caso de uso representan clases y objetos de
contenido que se incorporarán en una o más USN que p er m it ir án q ue un clien t e ex p erim en t e e l
escenario descrito en el caso de uso Seleccionar Componentes de CasaSegura.
La fig ura 1 3.9 ilu st r a un an álisis p arcial de la semántica de la n av e gació n q ue im p lica e l caso
de uso Seleccionar Componentes d e CasaSegura . Con el em p leo de la term in o lo gía ya
mencionada, la f ig ura t am bién r ep re sen t a un a form a de n av egació n (Fde N) p ara la web a p p
CasaSeguraAsegurada.com . Las clases importantes de do m in io del problema se muestran
jun t o con o bjet o s seleccio n a do s de contenido (en este caso, el paquete de o bjet o s de contenido
llam a do Descripción deComponentes, at r ib ut o de la clase ComponentedelProducto). Estos con-
ceptos son nodos de n av e gació n . Ca da f lech a r ep resen t a un v ín c ulo de n av e gació n 10 y t ien e la
leyen d a con la acció n iniciad a por el usuario que hace que el vínculo tenga lugar.
Es posible crear una USN para cada caso de uso asociado con cada rol de u s uar io . Por e jem-
plo, un cliente nuevo de CasaSeguraAsegurada.com puede tener tres diferentes casos de
uso, los cuales dan como resultado el acceso a distintas funciones de in fo rm ació n y de web a p p.
Se crea entonces una USN para cada meta.
D uran t e las et ap as in iciales del diseñ o de la navegación, se evalúa la arquitectura del conte-
n ido de la web a p p a fin de determinar una o más FdN para cada caso de uso . Co m o ya se dijo,
una FdN ident if ica los nodos de n av egació n (p o r e jem p lo , co nt en ido ) y después los v ín culo s que
perm it en naveg ar entre ellos. Entonce s, las FdN están organizadas en USN.
13.8.2 Sintax is de navegación
Al avanzar en el diseñ o , la t ar ea sig ui ent e es def in ir la mecánica de la n av ega ció n . Se di sp one
de varias opciones para desarrollar un enfoque de implem ent ació n para cada USN:
10 Éstas se denomi n an a veces vínculos semántico s de navegación (VSN) [Cac02].
331 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
FIGURA 13.9
Creació n de una
<<vínculo de navegación>>
<<vínculo de navegación>>
solicitar alternativa
<<vínculo de navegación>>
<<vínculo de navegación>>
tación
recommend component(s) Componente delProducto
mostrar ComponentedelProducto
<<vínculo de navegación>>
regresar a Habitación <<vínculo de navegación>>
<<vínculo de navegación>>
mostrar descripción
<<vínculo de navegación>>
vista CuentadelosMateriales
Cuentadelos
Materiales
comprar ComponentedelProducto
DescripcióndelComponente
<<vínculo de navegación>>
comprar ComponentedelProducto
DescripcióndeMercado
DescripciónTécnica fotografía
esquema video
CONSEJO
En la mayoría de situaciones, elija
mecanismo s de navegación
horizontales o verticales, pero no
ambos.
CONSEJO
El mapa del sitio debe ser accesible
desde cualquier página. El mapa
mismo debe estar organizado de
modo que la estructura de la
información de la webapp se vea
fácilmente .
• Vínculo de navegació n individu a l: incluy e vínculo s basados en texto, iconos, botones e
interrup to res, así como metáforas gráficas. Deben elegirse vínculos que sean apropiados
para el contenido y consistentes con la heurística que conduzca al diseñ o de una
interfaz de alta calidad .
• Barra de navega ció n horizo n ta l : enlista las categor ías princip ales de contenido o de
funciones en una barra que contiene vínculos apropiados. En general, se enlistan de
cuatro a siete categorías.
• Column a de navegación vertical: 1) enlista las princip ale s catego r ías de contenido o
funcio n es o 2) enlist a virtualm ent e todos los princip ales objet o s de conten id o que hay
dentro de la webap p. Si se elige la segu n d a opció n, las columnas de navegación pueden
“expan d ir se” para que present en objet o s de contenido como parte de una jerarquía
(seleccionar una entrada en la colum n a origin al ocasio n a una expan sió n que enlist a una
segunda capa de objeto s de contenid o relacio n ad o s) .
• Pestañ a s: metáfora que no es más que una variación de la barra o columna de navega-
ción y representa categorías de contenido o funciones como pestañas que se selec-
cionan cuando se requiere un vínculo.
• Mapas del sitio: dan una tabla de conten id o que incluy e todo el contenido a fin de
navegar hacia todos los objet o s y funciones contenidas dentro de la webap p.
A de m ás de e legir la mecánica de navegación, también deben establecerse las conv en cio n es
y ayudas apropiadas para navegar. Por e jem p lo , los ico n o s y vín culo s gráf ico s de ben in v it ar a
hacer “clic” en ellos, desvaneciendo las aristas a fin de darles una apariencia tridimensional.
De be diseñ ar se r et ro alim ent ació n au dit iv a o v isu al co n o bjet o de dar al usuario una indicación
de que se ha escogido cierta opción de n av e ga ció n . P ara la navegación basada en texto debe
ut ilizar se co lo r q ue in di qu e los v ín culo s de n av e gació n y que señale aquéllos ya r eco rr ido s.
Éstas son unas cuantas convenciones entre las decenas que hay para el diseñ o y que hacen que
la navegación sea amigable para el usuar io .
13 . 9 D I SE Ñ O E N E L NI V E L D E C O M P O N E N T E S
Las web a p p s m o dern a s d an fun cio n es de p ro cesa m ien t o ca da v ez m á s co m p leja s q ue: 1) r eali-
zan un procesamiento localizado para generar contenido y cap aci da d de navegación en forma
din á m ica, 2) pro p o rcio n an cap aci d a d de cómputo o de procesamiento de datos que resultan
apropiados para el domin io del nego cio de la webapp , 3) dan consulta y acces o comp lejo s a
332 PA R T E D O S MO D E L A D O
Diseño abstracto
Diseño conceptual Diseño de la navegación de la interfaz Implementación
Productos
del trabajo
Vínculos de nodos, Objetos abstractos
Clases, subsistemas, estructuras de acceso, de la interfaz, respuestas a Webapp
relaciones, atributos contextos de navegación, eventos externos, ejecutable transformaciones transformaciones
de navegación
Mecanismos
de diseño
Clasificación, Recurso
composición, Mapeo entre objetos Mapeo entre la proporcionado
agregación, conceptuales y de navegación y los por el
generalización, navegación objetos perceptibles ambiente meta
especialización
Preocupaciones del diseño
Semántica de Toma en cuenta el perfil Modelado de los objetos
Corrección;
modelado del del usuario y la tarea. perceptibles, implementación
desempeño de
dominio de la Hace énfasis en de las metáforas escogidas.
la aplicación;
aplicación aspectos cognitivos Descripción de la interfaz
completitud para objetos de navegación
bases de datos y 4) establecen interfaces de datos con sistemas corporativos externos. Para
lograr estas capacidades (y muchas otras) deben diseñarse y construirse componentes de pro -
gramas con forma idéntica a los componentes del soft ware tradicio n al.
Los métodos de diseño estudiados en el cap ít ulo 10 se aplican a los componentes de las web-
a p p s con p o ca, o n in g un a, m o dif icació n . El ambiente de im p lem ent ació n , los len g uaje s de pro -
gra m ació n , los patrones de diseño, estructuras y so ft war e, tal v ez v ar íen un p o co , p ero el enfo -
que general del diseño es el mism o .
13 .1 0 M É T OD O D E D I SEÑ O D E H IP ER M EDIO S O R I E N T A D O
A O B J E T O S (MDHO O )
En la última década, se han propuesto varios métodos de dis eñ o p ara ap licacio n e s we b. Ha sta
h o y, n in g un o de ellos es el do m in an t e .11 En esta sección se presenta un panorama breve de uno
de los métodos de diseñ o de webap p s más estudiado.
Dan iel Sch wa be et al. [ Sch 9 5 , Sch 9 8 b] p ro p usiero n po r pr im era v ez el Méto do de Diseñ o de
Hip erm edio s Orien ta do a Ob jeto s (MDHOO), que está compuesto de cuatro dist int as act iv ida d es
de diseñ o : diseñ o co n cep t ual, dis eñ o de n av e gació n , dis eñ o a bst r act o de la interfaz e implemen-
tación . En la figura 13.10 se present a un resum en de estas actividades de diseñ o y en las sec-
ciones que siguen se analizan brevemente.
13.10 .1 Diseño conceptual del MDHOO
El diseño co n cep tu a l del MDHOO genera una representación de los subsistemas, clases y rela-
cio n es q ue def in en el do m in io de aplicación para la web a pp . Se p ue de ut ilizar UML12 para crear
diagramas de c lase ap ro p iado s, a gre gacio n e s y representaciones compuestas de c lase , dia gra-
mas de colab o ració n y otra clase de inform ació n que descr ib a el dom in io de la aplicació n.
FIGURA 13.10
Resum en
del MDHOO
Fuente: Adaptado
de [Sch95].
11 En realidad, son relativamente pocos los d es ar roll ad o res w eb q u e u s an u n mét o d o es p ec í fi co cuando trabajan
en una webapp. Hay la esperanza de que este enfoque ad-hoc del diseño cambie a medida que transcurra el
tiemp o .
12 El MDH OO n o p res cri b e u n a n ot ac i ón esp ec í fi ca ; sin embargo, su empleo es común cuando se aplica este mé-
todo.
333 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
FIGURA 13.11
Esquema conceptual
parcial para
CasaSeg u ra As eg u ra da .
recomendación de componente
el cliente selecciona el componente
ComponentedelProducto
Númerodeparte Nombredeparte
com
Habitación
solicitada Tipodeparte descripción precio
crearNuevoArtículo( ) obtenerDescripción( )
CuentadelosMateriales
identificador
ListadeCdM númerodeArtículos precioTotal
Nombredelahabitación dimensiones
Ventanasexteriores Puertasexteriores
obtenerEspecificaciones Técnicas( )
Sensor Cámara Panel de
control
Característica del software
agregarEntrada( ) eliminarEntrada( )
editarEntrada( ) nombre( ) calcularPrecio( )
el cliente continúa con la
selección del componente el cliente
ArtículodeCdM
cantidad
Númerodeparte Nombredeparte Tipodeparte
Orden
Númerodeorden Informaciónparaelcliente
cuentaDeMateriales Informacióndeentre ga Informacióndecuenta
solicita compra precio
agregaraLista( ) eliminardeLista( )
obtenerSiguiente EntradadeLista( )
Co m o ejem p lo sen cillo del diseñ o co n cep t ual del MDHOO, piense en la ap licació n de comer-
cio e lect ró n ico CasaSeguraAsegurada.com . En la f igura 1 3.1 1, se presenta un “esquema con-
cept ual” . D urant e el diseño conceptual se reutilizan los diagramas de clase, agregaciones e in-
form ació n des ar ro llada co m o p art e del an álisis de la web a p p , co n o bjet o de representar las
relaciones entre clases.
13.10 .2 Diseño de la navegación para el MDHOO
El d iseñ o de la na veg a ción identif ica un co njun to de “o bjet o s” q ue se der iv an de las c lases def i-
nidas en el dise ñ o co n cep t ual. P ara in cl uir ést o s, se def in e un a ser ie de “ clases de n av eg ació n ”
o “ n o do s ”. Se utiliza UML para crear casos de uso, tablas de estado y diagramas de secuencia
apropiados; todas éstas son representaciones que ayudan a entender mejor los r eq uer i m ien t o s
de la n av e gació n . A de m ás, co n fo rm e se d esar ro lla el diseño, se utilizan patrones para el dise-
ño de la n av eg ació n . El MDH OO em p lea un co njunt o predefin ido de clases de n av eg ación:
n o do s, v ín c ulo s, an clas y estructuras de acceso [ Sch 9 8 b] . Estas últimas son más elaboradas e
incluy en mecan is m o s tales como un índice de la weba p p , mapa del sitio o recorr ido guiado .
Un a v ez def in idas las clases de n av eg ació n , el MDHOO “ est ruct ura el esp acio de n av e ga ción,
agrupando los o bjet o s de n av egació n en co njun t o s llam a do s co ntext o s” [Sch 9 8 b] . Un co ntexto
in cluy e la descr ip ció n de la estructura de n av egació n lo cal, la r est ricció n im p ue st a al acceso de
los o bjet o s de contenido y lo s métodos (operaciones) requeridos para acceder a los o bjet os
de co nt en ido . Se de sar ro lla un a p l ant illa co n t ext ual ( an álo ga a las tarjetas CRC estudiadas en el
cap ít ulo 6) que se emplea para dar seguimiento a los r eq u er im ien t o s de n av eg ació n de cada
categoría de usuario a través de los dist int o s co nt ext o s def in i do s en el MDHOO. Al hacer esto,
surgen trayect o ria s específ ica s de navegación (que en la secció n 13.8.1 llamam o s FdN).
13.10.3 Diseño abstracto de la interfaz y su implementación
La acció n de d iseñ o a b stra cto de la interfa z esp ecif ica los o bjet o s de la int er f az q ue e l us uar io ve
cuando ocurre una interacción con la webap p. Se emp lea un modelo formal de objet o s de inter-
334 PA R T E D O S MO D E L A D O
f az, l lam a do vista de dato s a b stra cto s (VDA), para representar la r e lació n ent r e o bj et o s de int er faz
y de naveg ació n , así com o las características de comportamiento de los objet o s de interf az.
El m o delo VDA def in e un a “ p lant illa est át ica” [ Sch 9 8 b] que r ep resent a la metáfora de la in-
terf az e in cluy e un a r ep resen t ació n de los o bjet o s de navegación dentro de la int erf az y la espe-
cif icació n de los o bjet o s de ésta (como menús, botones e iconos) que ayudan a la n av egación y
a la int er acció n. Ad em á s, el m o delo VDA contiene un componente de co m p o rt am ient o ( sim ilar
al diagrama de estado UML) q ue in dica la forma en la que los ev en t o s “ disp aran la n av e gación
y cuáles son las transformaciones de la int erf az q ue o c ur ren c uan do el usuario interactúa con
la aplicació n ” [Sch0 1 a] .
La activ ida d de im p lem en ta ció n del MDHOO representa una iteración del diseñ o e sp ecíf ica
del ambiente en el que opera la web a p p. Las clases, navegación e interfaz se caracterizan cada
una en forma tal que pueden construirse para el am bien t e c lient e - serv ido r , sist em as o p erat iv o s,
so ft ware de ap o y o , len g uajes de p ro gra m ació n , y otras características ambientales que son re-
levantes para el problem a.
13 .1 1 R E SU M E N
La calida d de un a web a p p — def in ida en t érm in o s de usa bilida d, fun cio n alida d, co n f iabilida d,
ef ic ien cia , f acilidad de m an t en im ient o , seg ur i da d, escala bilid a d y t iem p o p ara lleg ar al mer-
cado — se intro d uce duran t e la etapa de di señ o . P ara lo grar est o s at r ib ut o s de calidad, un buen
dis eñ o de la web a p p de be t en er las sig uien t es caract er ísticas: sen cillez , co n sist en cia , iden t ida d,
ro b ust ez, n av eg a bilida d y atr act iv o v isual. P ara lo grar lo, la activ ida d de dis eñ o de la web a p p se
centra en seis distintos elementos del diseñ o.
El diseñ o de la int er f az d escr i be la estructura y o rgan iz ació n de la int erf az de usuario e in-
cluy e un a r ep res en t ació n de la dist r ibució n de la p ant alla , un a def in ició n de los modos de int er-
acció n y un a de scr ip ció n de los mecanismos de n av e gació n . Un co n jun t o de pr in cip io s de diseñ o
de la int erf az y el flujo de tr a bajo del di señ o g uí an el tr a bajo de diseñ o de la distr ib ució n y los
mecanismos de contro l de la interf az.
El diseño est ét ico, l lam ado tam bién d iseñ o g rá fico , descr ibe el “asp ect o y sen sació n ” de la
web a p p , e in cluy e esq ue m a s de co lor ; distr ib ució n geo m ét rica; t am añ o del t exto , de las fuentes
y su co lo c ació n ; e m p leo de imágenes y otras decisiones relacionadas con la estética. Un con-
junto de lineam ient o s de diseñ o gráfico da la base para el enfo qu e de diseñ o .
El diseñ o del co nt en ido def in e dist rib u ció n , est ruct ura y bo s q uejo de todo el contenido que
se presenta como parte de la web a pp , y establece las relaciones entre los o bjet o s del co nt en ido .
El diseñ o del contenido comienza con la representación de sus objetos, así co m o las aso cia cio-
nes y r elacio n es en tr e e llo s. Un co n ju nt o de p r im it iv as de navegación establece la base para el
diseñ o de ésta.
El diseñ o arquit ect ó n ico iden t ifica la estructura general de los hipermedios para la web a pp , e
in cluy e la arquitectura del contenido y de la web a pp . Los estilos arquitectónicos para el conte-
n ido in cluy en e st ruct uras lin eales, de m alla , jer árq uic as y de r ed. La arquitectura de la web app
describe una infraestructura que permite que un sistema o aplicación basado en web cumpla
con sus objet iv o s de nego cio s.
El diseñ o de la navegación representa el flujo de ésta entre los o bjet o s de contenido y todas
las fun cio n es de la web a pp . La semántica de la n av eg ació n se def in e, des cr ibien d o un co n j un to
de unidades semánticas de n av ega ció n . Ca da un i da d est á co m p ue st a p o r fo rm as de n av eg ación,
así co m o v ín c ulo s y n o do s p ara e llo. La sint ax is de n av ega ció n ilust r a los m ecan is m o s ut iliza dos
para navegar descritos como parte de la semántica.
El diseñ o de los componentes desarrolla la ló gica de procesamiento detallada que se requiere
para implem ent ar comp o n ent e s funcio n ales que desar ro llen una funció n comp let a de la web-
335 CA P ÍTU L O 1 3 D ISE ÑO D E W E BA P P S
app. Las técnicas de diseño descritas en el cap ít ulo 10 son aplicables para la in gen ier ía de los
componentes de la webap p.
El Mét o do de Diseñ o de Hip er m e dio s Or ien t ado a O bj et o s (MDHO O) es un a de v ar ias p ro-
puestas para hacer el diseñ o de weba p p s. El MDHOO su giere un p ro ce so q u e in cl uy e di señ o
concept u al, diseñ o de la naveg ació n , diseñ o abstr a ct o de la interf az y la implem ent ació n.
P R O B L E M A S Y P U N T O S P O R E VA L U A R
13.1. ¿ P or qué es i nsufi ci ent e para el abor ar w ebapps la fil osofí a de di seño del “ ideal artí st i co”? ¿Hay algún
caso en el que ésa sea la filosofí a por seguir?
13.2. En es t e capí tulo se sel ec ciona un conjunto am pl io de atributos de la calidad de las w ebapps. S el eccione
las tres que crea que son las más importantes y cons t ruya un argum ento que expl ique por qué debe hacerse
énfasis en cada una durante el trabajo de diseño de webapps.
13.3. Agregue al menos cinco preguntas adic ionales a la Li st a de Veri fi cación del Di seño de w ebapps que
se presentó en la sección 13.1.
13.4. El lector es un diseñador de w ebapps de Corporación de Aprendi zaj e del Futuro, compañía de aprendi-
zaje a distancia. Trata de implementar un “ motor de apre ndizaj e ” basa do en int ern et que permi t a ent regar el
contenido de un curso a los estudiantes. El motor de apre ndizaj e brinda la i nfr aes t ructur a bás i ca para entre-
gar el contenido del aprendizaje sobre cualquier tema (los diseñadores del contenido prepararán el que sea
apropiado). Desarroll e el diseño de un prototipo de interfaz para el motor de apren diz aj e.
13.5. ¿Cuál es el sitio web de estét i ca más agrada ble que usted haya visitado y por qué?
13.6. Considere el obj eto de contenido Orden, generado una vez que un usuario de CasaS egu raAs egu -
rad a. co m haya t er minado la sel ección de todos los componentes y est é l is to para fi nali zar su co mpra. De-
sarrol l e una descrip ción UML para Ord en , así como todas las representaciones del diseño que sean apropia-
das.
13.7. ¿Cuál es la difere ncia entre la arquitectura del contenido y la de una webapp?
13.8. R ec ons idere el “ motor de aprendizaj e” de Aprendizaj e del Futuro que se describió en el problema 13. 4,
seleccione una arquitectura del contenido que resulte apropiada para la w ebapp. Anali ce el porqué de su
selecció n.
13.9. Utili ce UML para desarrollar tres o cuatro representaciones del diseño de objetos de contenido que se
encontrarían al diseñar el “ motor de aprendiz aj e” descrit o en el problema 13.4.
13.10. Inves tigue un poco acer ca de la arquitectura de cont rol ador de vi st a del modelo (CVM) y decida si
sería apropiada para la webapp del “ motor de aprendizaj e” del problem a 13.4.
13.11. ¿Cuál es la difere ncia entre la sintaxi s de navega ción y la semántica de ésta?
13.12. Defina dos o tres USN para la webapp CasaS egu ra Asegu rad a. com . D escriba con det al l e cada
una.
13.13. Escriba un texto breve sobre un método de diseño de hipermedios que no sea MDHOO.
L E C T U R A S A D I C I O N A L E S Y F U E N T E S D E I N F O R M A C I Ó N
Van Duyne et al. (The Des ign of Si t es, 2a. ed., P renti ce Hall, 2007) escribi eron un l i bro exhaus t ivo que c ubre
la mayorí a de aspectos importantes del proceso de di seño de w ebapps. C ubre con det al l e los modelos del
proceso de di seño y los patrones de di seño. Wodtke (Information Archit ecture, New Riders Publ ishing, 2003),
R osenfeld y Morvill e (Information Archit ecture for the World Wide W eb, O’Reilly & Associat es, 2002), y R eiss
(Practi cal Information Archit ecture, Addison-W esley, 2000) abordan la arquitectura del contenido y otros te-
mas.
Aunque se han escrito c ientos de li bros sobre el “ diseño web ”, son muy pocos los que estudian métodos
t écnicos s igni fi cat ivos para hacer el trab ajo de di seño. En el mejor de los casos, presentan varios lineamien-
tos útiles para el di seño de w ebapps, dan ej emplos de páginas w eb y de programación en Java y anali zan los
detall e s técnic os import antes para impleme nta r webapps moderna s. Entre los representantes de esta cate-
336 PA R T E D O S MO D E L A D O
goría están los libros de Sklar (Principl es of Web Design, 4a. ed., Course Technology, 2008), McInti re (Visual
Design for the Modern Web, New Riders Press, 2007), Niederst (Web Design in a Nutshell, 3a. ed., O-Reilly,
2006), Eccher (Advanced Professional W eb Design, C harl es River Media, 2006), C ederholm (Bull etproof W eb
Design, New Riders P ress, 2005) y S hel ly et al. (Web Design, 2a. ed., C ourse Technology, 2005). El estudio
enci clopédico de P owell [P ow02] y el profundo an ál is i s de Nielsen [Nie00] sobre el di seño t am bién son úti l es
en cualquier bibliot e ca.
Los li bros de B eai rd (The Principl es of Beautif ul W eb Design, Si t eP oint, 2007), Clarke y Holzschlag (Trans-
cending CSS: The Fine Art of Web Design, New Riders Press, 2006) y Golbeck (Art T heory for Web Design, Addi-
son W esley, 2005), hacen énfas i s en el diseño es t ét i co y son una lectura benéfica para los profesionales con
poca experiencia en el tema.
El punto de vi st a ágil del di seño (y otros temas) de w ebapps es presentado por W al l ace et al. (Ext reme
Programming for Web Projects, Addison-W esley, 2003). C onall en (Building W eb Appli cations with UML, 2a. ed.,
Addi son-W esley, 2002) y R osenberg y S cott (Applying Use-Case Driven Object Modeling w ith UML, Addi son-
Wesley, 2001) presentan ejemplos detall ados de webapps modela das con el emple o de UML.
En el contexto de li bros escrit os acer ca de ambientes espe cí fi cos de desarrollo, también se mencionan
técnicas de di seño. Los lectores interesados en ello deben estudiar textos sobre HTML, CSS, J2EE, Java, .NET,
XML, Perl, Ruby on R ail s, Ajax y vari as apli ca ciones emple adas par a cre ar w ebapps (Dreamw eaver, HomePage,
Frontpage, GoLive, MacroMedia Flash, etc.) con trucos de diseño útiles.
En int ernet hay un a ampl i a vari edad de fuentes de i nfor mación sobre di seño de w ebapps. En el s it i o web
del libro, se encuentra una lista actualizada de referencias en la red mundial que son relevantes para el di -
seño de webapps: www.mhhe.com/engcs/compsci/pressman/professional/olc/ser.htm.