Capitulo 13 sfdsgfg

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:


?

¿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


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


?

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 .


?

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.


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

http://www.graphic-design.com/

http://www.grantasticdesigns.com/

http://www.wpdfd.com/

http://www.graphic-design.com/Web/feature/tips.html

http://www.creativepro.com/designresource/home/787.html:

http://www.workbook.com/

http://www.pbs.org/riverofsong:

http://www.rkdinc.com/

http://www.creativehotlist.com/index.html:

http://www.btdnyc.com/


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.


?

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 .


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


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.

http://www.cetus-links.org/oo_smalltalk.html


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),


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].


FIGURA 13.9

Creació n de una

<<vínculo de navegación>>


solicitar alternativa



tación

recommend component(s) Componente delProducto

mostrar ComponentedelProducto


regresar a Habitación <<vínculo de navegación>>


mostrar descripción


vista CuentadelosMateriales

Cuentadelos

Materiales

comprar ComponentedelProducto

DescripcióndelComponente


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


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.


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-


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-


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-


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.

http://www.mhhe.com/engcs/compsci/pressman/professional/olc/ser.htm

Engineering

Capitulo 13 sfdsgfg