1. WEB 2.0
Y EL
DISEÑO WEB

2.  Cuenta la historia1, en nuestro caso, la
Wikipedia, que la primera web fue publicada en el
año 1991 por Tim Bernérs-Lee. El padre de la World
Wide Web elaboró un documento informático que rompía
con lo anterior porque contenía hipervínculos, es
decir, ofrecía posibilidad de ir a otro texto al
pulsar sobre una palabra.
 Trece años después, en el año 2004, el
descubrimiento de Berners -Lee se reinventó, y no
porque cambiara de un día para otro, sino
porque, como suele ocurrir en el mundo de
Internet, alguien le puso un nuevo nombre: Web 2.02.

3. DISEÑO Y WEB 2.0
 La llegada de la Web 2.0 ha supuesto una revolución en el
diseño, tanto en lo que se refiere a la concepción
artística como en las interfaces.
 El usuario adquiere un nuevo papel dentro del soporte, ya
que deja de ser un “escaneador” de contenidos para ser el
que elige, el que participa e incluso el que crea esos
contenidos.
 Desde el punto de vista visual este nuevo modo de hacer
webs ha supuesto una estandarización. Mientras en la Web
1.0 los diseñadores realizaban páginas sin apenas base
previa, ya que existían pocas referencias de diseño
digital, la Web 2.0 ha supuesto el nacimiento de los
estilos.

4. El nacimiento de estos estilos viene derivado al mismo tiempo de la
creación de nuevos perfiles profesionales: diseñador gráfico web. Las
páginas 1.0 fueron dibujadas por diseñadores que provenían del mundo
de los carteles, prensa y papelería, sin embargo las 2.0 han sido
pensadas por creadores especializados en diseño de webs.
Las páginas han evolucionado, pero los usuarios más. Cada día son más
exigentes a la hora de elegir el tiempo que pasan en cada site.
Gracias a esta demanda el diseño
2.0 se ha visto obligado a incluir como disciplina no sólo la elección
de formas y colores, sino también a pensar en el individuo que va a
interaccionar. Así nace la Usabilidad, un término que también surgió
cuando alguien le puso nombre, en concreto fue Jacob Nielsen.

5. ESTILO 2.0
 La Web 2.0 ha supuesto la creación de una serie de clichés de
diseño, de elementos comunes, que configuran un estilo
propio, hasta el punto de que a la hora de abordar el diseño de
una página se habla del grado de aplicación del arquetipo 2.0
que debe tener.
 Aunque existen unas características concretas, que
abordaremos a continuación, podemos definir el diseño 2.0
como una conjunción de estilos cuya máxima es la sutileza y la
combinación de elementos dispares. Grandes masas con
volumen, utilizando técnicas de 3D, a la vez que figuras planas;
pequeños detalles de luz o degradados delicados, con grandes
tipografías.
 Siguiendo el ar tículo “How to destroy the Web 2.0 look”3, de
Elliot Jay Stocks, podemos definir las siguientes
características:

6. 1- Uso de colores vibrantes y contrastados: además de por criterios
puramente estéticos, la Web 2.0 se caracteriza por el uso colores
con mucho contrasteque facilitan la jerarquización de la
información y, por lo tanto, la lectura. Colores contrastados pero, al
mismo tiempo, en menor número.
En ninguna web se suelen emplear más de dos colores, uno de
ellos habitualmente oscuro como el negro o gris, junto a otro más
vivo como el verde o el azul y, aumentando la variedad
cromática, diferentes tramas de estos dos colores.
Como si se tratara de una identidad corporativa tradicional, los
diseñadores seleccionan los colores y los aplican a todos los
elementos de la web: iconos, menús, efectos de los enlaces, etc.

7. 2- Badges: se trata de una serie de botones con forma de chapas o
placas.
Consiste en una estrella con bordes redondeados y que habitualmente
se utilizan para atraer la atención sobre un precio, una promoción o “un
gran mensaje de Beta”4, es decir, indica que se trata de una versión no
definitiva de la web.

8. 3- Brillos, destellos y reflejos: tanto los
logotipos como las barras de menú y los
distintos elementos de las composiciones
cuentan con destellos de luz y pequeñas
zonas sobreexpuestas, que aportan volumen
a los diseños. Al mismo tiempo, las webs se
llenan de objetos con un reflejo de él mismo
sobre su base.

9. 4.Bordes redondeados: la llegada de
la Web 2.0 ha supuesto el fin de las
esquinas, dando paso a un nuevo
arquetipo en el que todos los bordes
son redondeados. Bien sea a través
de los programas de diseño o a
través de las hojas de estilo CSS;
incluso han surgido una gran
cantidad de aplicaciones online que
redondean los diseños por nosotros.

10. 5- Degradados: sin duda es una de
las técnicas visuales que más han
calado entre dos diseñadores de
Web 2.0. Más pronunciados o más
sutiles, los gradientes de color son
empleados desde los fondos de las
páginas hasta los favicones, los
pequeños iconos que se muestran
junto a la dirección web en el
navegador de Internet.
4 What

11. 6- Líneas diagonales: se emplean
especialmente en los fondos de las
páginas y en los de los titulares, como
motivos decorativos que se repiten. Estos
patrones rayados se componen
habitualmente de un color y una trama
de este, es decir, una versión más oscura
o más clara de la misma. El contraste
siempre es leve para no dificultar la
lectura ni centrar la atención sobre
elementos decorativos

12. 7- Desenfoques: se hacen
especialmente patentes en las
sombras. En lugar de ser sombras
duras, los diseñadores utilizan
leves desenfoques.

13. 8- Logotipos reflejados: durante un tiempo
se convirtieron prácticamente en un
estándar los logotipos reflejados, de forma
que según va separándose el dibujo del
reflejo va desenfocándose como si se tratara
de papel mojado.

14.  1 . S i m p l i ci d a d : “ e n i g u a l d a d d e c o n d i c i o n e s l a s o l u c i ó n m á s
s e n c i l l a e s p r o b a b l e me n te l a c o r r e c t a ” 6 . E s te p r i n c i p i o , c o n o c i d o
c o m o e l d e l a N av a j a d e O c c a m , s e h a c o nv e r t i d o e n l a b a s e d e l
d i s e ñ o . B u s c a r l a o p c i ó n q u e h a g a l a n av e g a c i ó n m á s s e n c i l l a y
q u e ex i j a n m e n o s e s f u e r z o a l o s u s u a r i o s , ev i t a n d o l a s
i n te r fe r e nc i a s d e e l e m e n to s s u p e r fl uo s y o to r g a n d o u n a m ayo r
importancia a aquellos en los que queremos que fijen su
a te n c i ó n .
 E s t a s i m p l ic i d a d h a te n i d o c o m o c o n s e c ue n c i a t a m b i é n q u e e l
c o l o r b l a n c o a d q u i e r a u n m ayo r p r o t a g o ni s m o : a n a d i e l e a s u s t a
ya v e r u n a p á g i n a c o n f o n d o b l a n c o ( G o o g l e e s b l a n c o ) y, e n
g e n e r a l , h a p a s a d o d e p r o p o rc i o n a r s e n s a c i ó n d e w e b p o c o
trabajada a otra de web clara y ordenada.
 2 . D i s e ñ o c e n t r a d o : m i e n t r a s e n l a w e b 1 . 0 to d o e l c o n te n i d o s e
alineaba a la izquierda, las páginas 2.0 siempre están
c e n t r a d a s , m e j o r a n d o l a v i s u a l i z a c i ó n d e l o s c o n te n i d o s e n
c u a l q ui e r t i p o d e r e s o l uci ó n d e e s c r i to r i o .
 3 . M e n o s c o l um n a s : a n te s l a p á g i n a s s e e s t r u c t ur a b a n e n u n
m ayo r n ú m e r o d e c o l um n a s , i m i t a n d o t a l v e z e l e s t i l o d e l o s
p e r i ó d ic o s ; e l d i s e ñ o a c t u a l t i e n d e h a c i a d o s , e n e l c a s o d e l o s
b l o g s , y t r e s e n e l c a s o d e l a s p á g i n a s c o n u n m ayo r v o l u m e n d e
c o n te n i d o .

15. 4. Separar la navegación: aunque siempre fueron distintas la zona superior
y la inferior, ahora se marca más visualmente. Al mismo tiempo, cada área
está claramente definida para un tipo de navegación o de interacción y una
serie de contenidos.
5. Navegación simple: el concepto de Usabilidad en sí mismo. Organizar la
página para que el usuario navegue intuitivamente y sepa para qué sirve
cada elemento y con cuáles puede interactuar.
6. Tipografías más grandes: tras un período en el que la tendencia era
emplear fuentes pequeñas, como indicativo de elegancia, se ha pasado a
un modelo en el que se consigue que las fuentes grandes también sean
visualmente atractivas. Los sites pueden ser bonitos y a la vez respetar los
principios de la usabilidad.

16. 7. Leads en negrita: en general, la negrita se ha convertido en el modo más
eficiente de destacar la información sin recurrir a colores que ensucien la
identidad corporativa de la página. Esto, unido a la necesidad de
jerarquizar los contenidos, ha derivado en los tagline, es decir, frases que
resumen el contenido de la página o de la empresa, así como entradillas
que esquematizan los servicios o contenidos de la entidad o de la
aplicación.
8. Iconos atractivos: han dejado de ser un elemento auxiliar del diseño
para convertirse en un componente prioritario. En general, se puede decir
que la principal característica del diseño 2.0 es la sutilidad, los pequeños
detalles, y por ello los iconos son uno de los campos de acción más
interesantes para los diseñadores.

20. FUTURO DEL DISEÑO 2.0
 Hablar de diseño implica en general referirse a una
estandarización, hablar de escuelas, de tendencias, de modos
de actuar generalizados, pero, al mismo tiempo, de ruptura y
originalidad. Todos los movimientos ar tísticos se caracterizan
porque mucha gente hace lo mismo, hasta que alguien lo
rompe y crea algo más innovador. Por esta razón la Web 2.0
está generando un movimiento en contra de estos estándares.
 Precisamente el ar tículo citado anteriormente, How to destroy
the Web 2.0 look”7, de Elliot Jay Stocks, se ha constituido en
un referente para este movimiento. Para el autor “los clichés de
diseño siempre han existido. Lo impor tante es
conocerlos, saber por qué existen y cómo evitarlos”. “Hay que
enseñar a las masas que el look Web 2.0 es un término sin
significado. El Web 2.0 es un concepto… no un diseño estético.”

22.  Este diseñador, al igual que muchos otros, apuestan por
utilizar las tendencias actuales estéticas actuales como base
para los nuevos cánones web, creando sites en los que no
aparezca ninguno de los clichés.
 No obstante, y a pesar de esa aparente disidencia visual, es
evidente que los diseños que rompen con el estándar
contienen características de las citadas anteriormente, ya que
mientras la Web 2.0 continúe siendo vanguardia los
internautas seguirán
 utilizándolo como referencia para saber si les gusta o no una
página.

23. E VO L U C I Ó N T E C N O L Ó G I C A ( Y S U U S O )
3 . 4 . 1 N AV E G A D O R
 N av e g a d o r e s w e b
 3 . 4 . E v o l uc i ó n te c n o l ó g ic a ( y s u u s o )
 3 . 4 . 1 N av e g a d o r
 U n n av e g a d o r e s u n p r o g r a m a q u e s e u t i l i z a p a r a a c c e d e r a l a w e b .
D e s d e e l p r i m e r ex p l o r a d o r, l l a m a d o N C S A M o s a i c d e p r i n c i p i o d e l o s
n o v e n t a h a s t a h oy, l a ev o l uc i ó n h a s i d o e s p e c t a c ul ar.
 N et s c a pe c o n s i g uió s e r e l n av e g a d o r d e r e f e r e n c i a d e s d e e l 1 9 9 4 h a s t a
que, en el año
 1 9 97 , M i c r o s o f t i n t r o d ujo e l I n te r n et E x p l o r e r e n e l S i s te m a O p e r a t i vo
W i n d ow s 9 8 .
 El dominio que ejerció IE fue tal que el desarrollo web se orientó
to t a l me n te a l a v i s u a l i z a c ió n e n e s te n av e g a d o r. N a c i e r o n f r a s e s c o m o
“ O p t i m i z a d o p a r a I n te r n et E x p l o r e r ” , q u e v e n í a a s i g n i fi c a r e n m u c h o s
casos que si no usabas el Explorador de Windows, no ibas o poder ver la
p á g i n a o a l g u n o s s e r v i c i o s n o i b a n a f u n c i o n a r.
 A pesar de que las estadísticas actuales nos dicen que IE sigue
c a m i n a n d o , l a s c o r r i e n te s a l te r n a t i va s v a n a b r i é n d o s e p a s o . O p e r a a b r i ó
e l c a m i n o y, h oy e n d í a , M o z i l l a F i r e Fox e s t á h a c i e n d o “ p u p a ” a l d o m i n i o
de IE con cuotas del 20% en algunos países europeos.
 L o s o t r o s n av e g a d o r e s
 H oy e n d í a ex i s te n o t r a s a p l i c ac i o n e s q u e e s t á n g a n a n d o i m p o r t a n c i a
c o m o s o n l o s n av e g a d o r e s p a r a m ó v i l e s y p a r a P DA , l o s n av e g a d o r e s d e
s ó l o tex to … .

24. 3.5. FLASH
 L o s a r c h i v o s e l a b o r a d o s c o n e l p r o g r am a d e a n i m a c i ó n 2 D p o r ex c e l e n c ia e n e l
c a m p o w e b , F l a s h , h a n p a s a d o d e s e r l a s o l u c i ó n d e f i n i t iv a c u a n d o d e s e a m o s h a c e r
u n a w e b v i s u a l m en te a t r a c t i va , a u n a p o s i c ió n m u c h o m á s d i s c r et a .
 D u r a n te a l g ú n t i e m po m u c h a s p á g i n a s c o n s i s t í a n e n u n g r a n a r c h i vo d e F l a s h q u e
c o n te n í a to d o s l o s m e n ú s , tex to s , f o to s , et c . E s to s u p o n e u n g r a n p r o b l em a d e
a c c e s i b il id a d , ya q u e c u a l q ui e r a q u e v i s i te l a p á g i n a d e s d e u n n av e g a d o r n o
g r á f i c o , c o m o p u e d e n l o s l e c to r e s p a r a p e r s o n a s c i e g a s , o m u c h o s m ó v i l e s y P DA ,
no veían nada.
 L o m i s m o s u c e d e c o n l o s b u s c a d o r e s d e I n te r n et , q u e c u a n d o r e c o r r e n l a s p á g i n a s
l o c a l i z a n d o p a l a b r a s e n f u n c i ó n d e l a s c u a l e s i n d ex a r l a w e b , n o e n c o n t r a b a n n a d a .
Y c o m o c a d a d í a e s m á s ev i d e n te m e n te q u e s i n o e s t á s e n l o s b u s c a d o r e s , c o m o
G o o g l e o Ya h o o , n o ex i s te s , n o t i e n e s e n t i d o d a r l e to d a l a r e s p o n s a b i l id a d a u n
archivo de Flash.
 Ta m b i é n e s t u v o d e m o d a c r e a r i m p r e s i o n a n te s i n t r o d ucc i o n e s e n F l a s h p a r a r e c i b i r
a l o s i n te r n a u t a s , a l g o q u e e s t á p r á c t i c am e n te e r r a d i c a d o d e to d a s l a s w e b s 2 . 0 .
¿ Po r q u é s e p a r a r a n u e s t r o v i s i t a n te d e l p r o d uc to u n c l i c m á s ?
 L a u t i l iz a c ió n d e e s te t i p o d e a n i m a c i on e s h a p a s a d o c o m o d e c í am o s a u n a
p o s i c ió n s e c u n d a r i a , q u e e s e n a n i m a c i o n e s e n l a s c a b e c e r a s d e l a s w e b s , e n l o s
b a n n e r s o p a r a i l u s t r a r n o t i c i a s . C o m o u n i n g r e d i e n te m á s d e l d i s e ñ o , p e r o n o c o m o
p l a to ú n i c o

25. 3.6. AJAX
 El término AJAX ( Asynchronous JavaScript And XML), al igual que el de
Web 2.0, no es ningún invento, ni un gran avance tecnológico, es el
nombre que se le puso a una serie de técnicas y combinación de
tecnologías ya existentes. Poco a poco se ha conver tido en una palabra
de moda, que popularizó Jesse James Garrett en su ar tículo “Ajax: A
New Approach to Web Applications” 8.
 El ejemplo que popularizó el uso de esta tecnología fue como casi
siempre, al hablar de web hoy en día, de la mano de Google, con sus
aplicaciones GMaps y Gmail. De repente, el usuario descubrió que los
contenidos de las páginas podían actualizar se de una manera más
amable, sin tener que sopor tar la recarga de completa de la página. Se
actualizaba solamente lo que el usuario quería.
 El uso de Ajax ha supuesto una revolución en el concepto de
interacción del usuario con la página web. Ya podemos mover las
ventanas a nuestro gusto y ponerlas en donde nos
apetezca, eliminarlas de la vista o añadir nuevas ventanas con
nuestras RSS favoritas en ser vicios como Netvives o Igoogle.

26. 3.7. EL INTERNAUTA 2.0
 ¿Qué evolucionó antes? ¿El internauta o la web? Como en el famoso caso
del huevo y la gallina, no está claro quién nació antes, pero parece
evidente que con el surgimiento de las aplicaciones 2.0 los usuarios
comenzaron a exigirlas. Entre una web donde ver vídeos y otra donde
además de ver vídeos puedo comentarl o, compar tirlo y subir los míos
propios, el usuario elegirá siempre la segunda opción.
 Atrás queda aquella web 1 .0 donde los internautas eran meros
espectadores que perdían más tiempo buscando que utilizando los sites y
que simplemente leían texto con hiper víncul os.
 Manuel Lavín, director de consultoría eBusiness de Adesis Netlife , define
así al internauta 1 .0 en su ar tículo “ Web 2.0: Por fin alguien al otro lado
de la pantalla” 9:
 1 . Utiliza IE para navegar por la Web
 2. Accede siempre desde su PC
 3. Se conecta por módem
 4. Se fija más en la espectacularidad de la Web que en los contenidos
 5. Es un usuario pasivo que sólo asimila informaci ón
 6. Sólo interactúa para realizar compras, ver el mail y obtener información

27. MIENTRAS ASIGNA ESTAS CARACTERÍSTICAS
 1 . U t i l i z a I E , F i r eALO p e r a , S a f a r i …
f ox , INTERNAUTA 2.0:
 2 . A c c e d e d e s d e s u P C , P DA , B l a c k b e r r y, T V, W I I …
 3. Se conecta por GPRS, ADSL, Cable…
 4 . B u s c a l a o p e r a t i va e n l a s p á g i n a s
 5 . G e n e r a i n f o r m a c ió n : B l o g s , p á g i n a s p e r s o n a l e s …
 6 . P u b l i c a c o n te n i d o , l o o r d e n a …
 Te n i e n d o e n c u e n t a e s to s a s p e c to s , p o d e m o s e l a b o r a r u n l i s t a d o d e l a s
n e c e s i d a d e s d e l i n te r n a u t a 2 . 0 y q u e te n d r á n u n p a p e l f u n d a m e n t al a l a
hora de diseñar una página:
 - L o s u s u a r i o s s o n m á s ex i g e n te s . H a s t a l a l l e g a d a d e l a We b 2 . 0 e l
i n te r n a ut a a c c e d í a a u n a p á g i n a , l a ex p l o r a b a , v a l o r a b a s i a l g ú n
c o n te n i d o l e i n te r e s a b a y, s i n o , s e i b a .
 E l u s u a r i o d e I n te r n et d e h oy e n d í a , p o r e l c o n t r a r i o , o f r e c e m u c h a s
m e n o s p o s i b i li d a d e s a l o s s i te s . E n t r a , y s i n o v e n a d a q u e l e i n te r e s e , s e
v a . G r a c i a s a h e r r a m i e n t a s c o m o G o o g l e A n a l y t i cs 10 p o d e m o s a l f i n
c o n o c e r c ó m o e s l a ex p e r i e n c ia d e n av e g a c i ó n d e n u e s t r o s v i s i t a n tes . S e
t r a t a d e u n a a p l i c a c ió n d e e s t a d í s t ic a s q u e n o s o f r e c e to d o s l o s d a to s
s o b r e l a s p e r s o n a s q u e a c c e d e n a n u e s t r a p á g i n a y, p o r l o t a n to , a
n u e s t r o s c l i e n te s . Po d e m o s s a b e r c u á n to t i e m p o e s t á n , c u á n t a s p á g i n a s
v e n , c u á n to s s e f r u s t r a n y a b a n d o n a n e l s i te e n l a p á g i n a d e i n i c i o , c ó m o
n o s e n c o n t r a ro n , d e d ó n d e v i e n e n , q u e n av e g a d o r u s a n … e s d e c i r,
p o d em o s t r a t a r l o s d e t ú a t ú q u e e n e l f o n d o e s l a e s e n c i a d e l 2 . 0 .

28.  Los usuarios saben dónde está o debería estar cada botón . Los
menús están en la par te superior y/o en la izquierda, y el logo que
abre la pantalla es un enlace a la página de inicio. El paso de los
años ha hecho que los internautas conoz can una serie de
convenci ones sobre cómo se diseñan las páginas, por lo que si no
se respetan se frustrará y se irá.
 Lo mismo sucede con la iconografía, se han creado una serie de
símbolos univer sales como puede ser el de RSS que deben
respetar se si queremos que sean efectivos.
 - Los usuarios no quieren diseñar. Hasta hace poco cuando alguien
diseñaba una página web era porque abría un programa de
retoque fotográfico , de diseño vectorial o de programaci ón. Eso ya
no es así. Cuando hoy en día alguien quiere, por ejemplo, hacer su
blog, piensa en con qué lo va a llenar, qué va a escribir, a quién se
va a dirigir, y el diseño se lo deja a Wordpress. Gracias al
fenómeno de las plantillas el usuario no pierde tiempo
programand o o diseñando y coge un diseño ya elaborado por otros,
lo aplica, y puede tener una página per sonal moderna sin
necesidad de manejar más herramientas que el procesad or de
textos y el navegad or de Internet.
 - Los usuarios quieren par ticipar: la Web 2.0 es a menudo
considerada como la“web colaborati va” ya que su base es que los
usuarios empiezan a opinar, a juzgar y a decir lo que les gusta y lo
que no. Esto implica que los diseñadores tengan en cuenta la
presencia de estas herramientas: módulos para comentari os, que
muchas veces hacen que la página contenga “kilómetros” de scroll
hacia abajo, espacios para que el usuario pueda compar tir la
página a través de del.icio.us, Menéame o Technorati , etc.

29. LOS USUARIOS QUIEREN CREAR:
 este el objetivo último de la Web 2.0. Un internauta que
crea contenidos y que, por lo tanto, no se encuentra ante
una página diseñada con mejor o peor resultado, sino
ante una interface. No se trata de hacer una aplicación
amable por fuera y dura por dentro, sino que es
necesario poner a la vista las entrañas de la web para
que nuestro visitante suba documentos, organice vídeos
o retoque fotos. Y cada una de estas entrañas debe estar
diseñada cumpliendo unos principios

30. 3.8. INTERFACES PARA UN INTERNAUTA 2.0
3.8.1. USABILIDAD
 El considerad o gran gurú de la Usabilidad, Jacob Nielsen, la
definió así en el año
 2003: “El atributo de calidad que mide lo fáciles que son de usar
las inter faces Web”11 .
 Se trata en una disciplina cuyo objetivo es facilitar la interacci ón
del usuario y, por esta razón, es lógico que naciera o, más bien,
cobrara fuerza, con la llegada de la Web 2.0. Si el mundo web se
sustenta en que los internautas par ticipen, es necesario estudiar
qué es lo que los estimula.
 De ahí el nacimiento de una nueva profesión inexistente hasta
hace poco: los exper tos en Usabilidad, per sonas especializadas en
la interacci ón entre los ordenad ores y las per sonas y,
concretamente, entre los sitios web y los internautas de hoy en
día. Para hacernos idea de cómo funciona, podemos ver los cinco
componentes con los que Jacob Nielsen mide la usabilidad 1 2:
 - Aprendizaje: ¿es fácil para los usuarios emplear las utilidades
básicas de una web la primera vez que se encuentran con ella?
 - Eficacia: una vez que el diseño ya les es familiar, ¿cuánto tardan
en aprender a realizar las tareas?
 - Memorizaci ón: cuándo los usuarios vuelven al diseño después de
un período sin utilizarlo, ¿cuánto tardan en reestablecer la
habilidad? Errores: ¿cuántos errores cometen los usuarios, cómo
de graves son, y cuánto tardan en reponer se de estos errores?
 - Satisfacci ón: ¿es agradable interactuar con el diseño?

31. 3.8.2. PRINCIPIOS DE LA USABILIDAD
 E d u a r d o M a n c h ó n , c o - f u n d a d o r d e P a n o r a m i o , i n te r p r e t a y e s q u e m a t i z a l o s
p r i n c i p i o s d e l a U s a b i l i d a d d e B r u c e To g n a z z i n i 1 3 y q u e , a s u v e z , e s t a b a n
basados en gran medida en los principios heurísticos de Jacob Nielsen:
 1 . A n t i c i p a c i ó n , e l s i t i o we b d e b e a n t i c i p a r s e a l a s n e c e s i d a d e s d e l u s u a r i o .
 2 . A u to n o m í a , l o s u s u a r i o s d e b e n te n e r e l c o n t r o l s o b r e e l s i t i o w e b . L o s
u s u a r i o s s i e n t e n q u e c o n t r o l a n u n s i t i o we b s i c o n o c e n s u s i t u a c i ó n e n u n
e n to r n o a b a r c a b l e y n o i n fi n i t o .
 3 . L o s c o l o r e s h a n d e u t i l i z a r s e c o n p r e c a u c i ó n p a r a n o d i fi c u l t a r e l a c c e s o a
l o s u s u a r i o s c o n p r o b l e m a s d e d i s t i n c i ó n d e c o l o r e s ( a p r ox . u n 1 5 % d e l to t a l ) .
 4 . C o n s i s te n c i a , l a s a p l i c a c i o n e s d e b e n s e r c o n s i s te n t e s c o n l a s e x p e c t a t i v a s
d e l o s u s u a r i o s , e s d e c i r, c o n s u a p r e n d i z a j e p r e v i o .
 5 . E f i c i e n c i a d e l u s u a r i o , l o s s i t i o s we b s e d e b e n c e n t r a r e n l a p r o d u c t i v i d a d
d e l u s u a r i o , n o e n l a d e l p r o p i o s i t i o we b . Po r e j e m p l o , e n o c a s i o n e s t a r e a s
c o n m ayo r n ú m e r o d e p a s o s s o n m á s r á p i d a s d e r e a l i z a r p a r a u n a p e r s o n a q u e
otras tareas con menos pasos, pero más complejas.
 6 . Re v e r s i b i l i d a d , u n s i t i o we b h a d e p e r m i t i r d e s h a c e r l a s a c c i o n e s r e a l i z a d a s
 7. L ey d e F i t t s i n d i c a q u e e l t i e m p o p a r a a l c a n z a r u n o b j e t i v o c o n e l r a t ó n e s t a
e n f u n c i ó n d e l a d i s t a n c i a y e l t a m a ñ o d e l o b j e t i v o . A m e n o r d i s t a n c i a y m ayo r
t a m a ñ o m á s f a c i l i d a d p a r a u s a r u n m e c a n i s m o d e i n te r a c c i ó n .
 8 . Re d u c c i ó n d e l t i e m p o d e l a te n c i a . H a c e p o s i b l e o p t i m i z a r e l t i e m p o d e
e s p e r a d e l u s u a r i o , p e r m i t i e n d o l a r e a l i z a c i ó n d e ot r a s t a r e a s m i e n t r a s s e
c o m p l e t a l a p r e v i a e i n fo r m a n d o a l u s u a r i o d e l t i e m p o p e n d i e n t e p a r a l a
finalización de la tarea.
 9 . A p r e n d i z a j e , l o s s i t i o s we b d e b e n r e q u e r i r u n m í n i m o p r o c e s o d e
aprendizaje y deben poder ser utilizados desde el primer momento.
 13 MANCHÓN,

32. 10. El uso adecuado de metáforas facilita el aprendizaje de un sitio
web, pero un uso inadecuado de estas puede dificultar enormemente el
aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe
asegurar que los usuarios nunca pierden su trabajo como consecuencia
de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y
el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y
almacenando información sobre su comportamiento previo se ha de
permitir al usuario realizar operaciones frecuentes de manera más
rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación
que han de ser inferidos por los usuarios, menús desplegables,
indicaciones ocultas, etc.
3.8.3. Usabilidad frente al diseño

33. 3.8.3. USABILIDAD FRENTE AL DISEÑO
 La Usabilidad se desarrolla con la par te izquierda del cerebro y
representa la razón y la acción lógica; por lo tanto se corresp onde
con Mar te. Por su par te, el Diseño reside en la par te derecha del
cerebro y se identifica con lo emocional y la acción intuitiva, así
que se corresp ond e con Venus. Esta teoría, desarrollada por Cur t
Cloninger en su ar tículo “ Usability exper ts are from Mar s, graphic
designer s are from Venus”14 es una muestra de la lucha
aparentemente existente entre diseño y Usabilidad.
 Decimos aparentemente porque el paso del tiempo ha demostrad o
que ninguna web puede prescindir de la Usabilidad, porque el
usuario se frustra y se va si no sabe manejar la inter face y, al
mismo tiempo, si algo no es atractivo visualmente para el
internauta es difícil que se desarrolle como producto: no se
diferenciaría de los demás, parecería anticuado, nadie recordaría
la web, etc.
 Por lo tanto se trata de dos disciplinas que se necesitan una a la
otra. El diseño necesita que la Usabilidad le diga cómo navega el
usuario, y la Usabilidad necesita que el diseño le ayude a
jerarquizar la información, a organizar contenid os y, en conjunto, a
mejorar el producto.

34. 3.8.4 ARQUITECTURA DE LA INFORMACIÓN
 “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a
los usuarios a encontrar y manejar la información”. Así definieron Louis Rosenfield y Peter
Morville esta disciplina en su libro “ Information Architecture for the World Wide Web:
Designing Large-Scale Web Sites”.
 Tomando como punto de partida el artículo de Iain Barker titulado “What is information
architecture?”15, podemos definir los siguientes como los pasos necesarios para una
arquitectura de la información acertada:
 1. Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está
dirigida la web.
 2. Realizar estudios de card sorting. Se trata de un ejercicio que consiste en utilizar a
usuarios potenciales de nuestra para web para que organicen el contenido a través de
fichas, ordenándolo según sus esquemas mentales. Esto hace que la estructura resultante
se adecúe más a lo que el internauta espera encontrarse.
 3. Elaborar un borrador del árbol de la web, agrupando la información y estableciendo
jerarquías.
 4. Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.
 5. Crear el mapa del sitio.
 6. Definir las funcionalidades de la página y cómo se llega a ellas.
 7. Contrastar la organización de la información que hemos propuesto con el resto de
miembros del equipo.
 8. Elaborar el wireframe que le pasaremos al departamento de diseño y al de programación.
 Los beneficios de organizar la información correctamente son vitales para que el site
funcione:
 - Los clientes pasarán más tiempo navegando
 - Mejorará la imagen de marca, ya que percibirán la página positivamente y no se frustrarán
por no encontrar lo que buscan.
 - Aumenta su fidelidad, es más probable que vuelvan.

35. 3.9. ESTÁNDARES
 El verdadero triunfo de la Web 2.0 ha sido el triunfo de los
estándares web, un término a veces poco conocid o entre los
internautas pero con una impor tancia vital para el desarroll o web.
Se define como el “conjunto de recomendaci ones dadas por el
World Wide Web Consor tium (W3C) y otras organizaci ones
internacionales acerca de cómo crear e interpretar documentos
basados en el Web” (Alexis Bellido)16.
 Es decir, son las normas que permiten que las webs se puedan
visionar no sólo en Internet Explorer o Mozilla Firefox, sino
también en los navegadores para per sonas ciegas o dispositivos
móviles como PDA o teléfonos móviles, así como para los
internautas que utilizan velocidades de transferencia baja.
 “El poder de la web está en su univer salidad. El acceso a la web
para todos, independientemente de su discapacid ad, es un
aspecto esencial.” Esta frase de Tim Berner s -Lee representa a la
per fección lo que suponen los estándares web: que la red no
suponga una brecha con ningún colectivo por no disponer al cien
por cien de sus sentidos, ni por navegar en un sopor te distinto a
un plasma de 17”.
 Derivado de los estándares nació el concepto de accesibilidad ,
orientado precisamente a integrar en la web a las per sonas con
minusvalías mentales o físicas.

36. 3.9.1 CCS
 Las hojas de estilo en cascada ( Cascading Style Sheets, CSS) son un lenguaje
u s a d o p a r a d e fi n i r l a p r e s e n t a c i ó n d e u n d o c u m e n t o e s t r u c t u r a d o e s c r i to e n
H T M L o X M L . C o n s i s te e n u n o o v a r i o s d o c u m e n to s e n l o s q u e s e e s c r i b e n l a s
c a r a c te r í s t i c a s q u e v a a te n e r c a d a u n o d e l o s e l e m e n t o s d e l a p á g i n a :
t i t u l a r e s , p á r r a fo s , c o l u m n a s , e n l a c e s , e t c . , d e m o d o q u e a fe c t a n o p u e d e n
a f e c t a r a l c o n j u n to d e l s i te .
 L a s p r i n c i p a l e s v e n t a j a s p a r a u s a r C C S s o n 17:
 1- Es más sencillo realizar cambios globales: si queremos realizar un cambio
e n e l d i s e ñ o , c o m o p u e d e s e r l a d i s t a n c i a e n t r e l a s foto s e l te x to , e l c o l o r d e
los hiper vínculos o el tamaño de los titulares, será más sencillo hacerlo en las
C S S ya q u e b a s t a r á c o n m o d i fi c a r u n a r c h i v o y n o p á g i n a p o r p á g i n a .
 2 - E l e s t i l o d e l s i te s e m a n t i e n e e n to d a s u e x te n s i ó n : s a l v o q u e m a r q u e m o s l o
c o n t r a r i o , to d a s l a s p á g i n a s te n d r á n e l t i t u l a r y l o s p á r r a fo s e n e l m i s m o
f o r m a to , l o s m i s m o m á r g e n e s e n t r e l o s e l e m e n t o s , e t c .
 3 - E l s i te e s m á s a c c e s i b l e , ya q u e p u e d e n d e fi n i r s e e s t i l o s p a r a c a d a t i p o d e
n av e g a d o r. P u e d e n c r e a r s e d i s t i n t o s fo r m a to s p a r a q u e c a d a n av e g a d o r l o
i n te r p r e t e c o m o l e s e ñ a l e m o s .
 4 - R á p i d a d e s c a r g a : e n g e n e r a l l a s p á g i n a s s o n m á s l i g e r a s , ya q u e to d a l a
información de estilo está en los archivos CSS, que cargamos al acceder al
s i te , y n o h ay q u e c a r g a r u n o s e s t i l o s c a d a v e z q u e c a m b i a m o s d e p á g i n a .
 5- Separación del diseño y la programación. Los dos pueden trabajar en la web
s i n i n te r f e r i r u n o e n e l t r a b a j o d e l ot r o .
 6 - E s t á o p t i m i z a d o p a r a b u s c a d o r e s : h ay m e n o s c ó d i g o e n l o s a r c h i v o s y
r e s u l t a m á s f á c i l p a r a e l b u s c a d o r e n c o n t r a r p a l a b r a s c l av e .
 7 - E l u s u a r i o p u e d e u s a r s u s p r o p i a s n o r m a s d e e s t i l o : a l g u n o s n av e g a d o r e s d e
I n te r n e t p e r m i t e n p e r s o n a l i z a r l a s C S S d e l a s p á g i n a s , p o r l o q u e s o n e l l o s
quienes eligen cómo visionarlas.

37. 3.9.2 XHTML
 El XHTML (Lenguaje de Marcado de Hipertexto Extensible)
es el lenguaje de marcado pensado para sustituir al
HTML, pero aún le queda camino por recorrer. Cuando se
daba por muerto el HTML 4.0 surge una nueva revisión
del W3C el HTML 5.0 lo que hace que seguramente
convivan durante un largo periodo de tiempo ambos.
 El XHTML es una versión más estricta del código HTML
para conseguir reducir las posibilidades de su uso y que
la interpretación por los distintos dispositivos sea más
simple, y que pequeños dispositivos, con menor
capacidad que los ordenadores de mesa tradicionales
puedan soportar, como los móviles.
 Las principales ventajas que aportan son:
 • La compatibilidad con navegadores antiguos
 • La independencia del diseño. Pudiendo adoptar
presentaciones distintas según el dispositivo.
 • Facilidad de edición del código y su mantenimiento
 • Mejoras de rendimiento.

38. .
3.10. CONCLUSIONES
• N o e s t á c l a r o d e d o n d e p r o v i n o e l e s t i l o 2 . 0 . N o s r e c u e r d a e l e m e n to s m u y
d i s p a r e s : d e s d e l a p o r t a d a d e l d i s c o Tu b ul a r B e l l s d e M i ke O l d f i el d , h a s t a
l o s r e f l e j o s d e l a s o b r a s d e Roy L i c h te n s te i n o l a s s i l u et a s c o n t r a s t a d a s
d e Ke i t h H a r i n g . Pe r o l o q u e s í e s t á c l a r o q u e e s t a f o r m a d e d i s e ñ a r e s t á
t r a s p a s a n d o l o s l í m i te s d e l a s p a n t a l l a s d e o r d e n a d o r, p a r a c o nv e r t ir s e e n
u n r e f e r e n te d e l d i s e ñ o d i g i t a l c o m o s e a p r e c i a , p o r e j e m p l o , e n l o s
g r a f i s m o s d e te l ev i s i ó n .
• To d a l a i m a g e n c o r p o r a t i va d e l a s c a d e n a s , d e s d e l o s p r i n te r s c o n e l
nombre de los presentadores hasta las ráfagas entre programas o los
g r á f i c o s ex p l i c a t i vo s d e l a s n o t i c i a s , l a p a n t a l l a v a l l e n á n d o s e d e
d e g r a d a d o s , r e f l e j o s y d e m á s . ¿ S u p o n d r á l a 6 3 A s o c i ac i ó n N a c i o n al d e
E m p r e s a s d e I n te r n et , A N E I
• t r a n s i c i ó n a te l ev i s i ó n d i g i t al l a m i s m a r ev o l uc ió n v i s u a l q u e p a r a l a w e b
f u e e l a u m e n to d e l a r e s o l uc ió n y d e l a n c h o d e b a n d a ?
• C o m o c o n c l us i ón , p o d e m o s r e s u m i r to d o l o ex p u e s to h a s t a a h o r a e n q u e
e l d i s e ñ o We b 2 . 0 p r o n to e s t a r á p a s a d o d e m o d a . C u a n d o l a s n o r m a s d e
u n e s t i l o e s t á n t a n c l a r a s , e s p o r q ue e l s i g u i e n te p a s o s e r á s u
r e d e f i n i ci ó n . E l d i s e ñ o s u p o n e e n g r a n m e d i d a r o m p e r l o s c á n o n e s , a s í
q u e d e b e m o s e s t a r p r e p a r a d o s p a r a l a l l e g a d a d e l a p r ó x i m a te n d e n c i a .
• U n n u ev o m o d o d e h a c e r w e b s , d o n d e s e i m p o n g a u n o s n u ev o s h á b i to s d e
n av e g a c i ó n p o r p a r te d e l o s u s u a r i o s y q u e n o s o b l i g ue a r e d e f i ni r l a
usabilidad, el
• a s p e c to v i s u a l y, e n c o n j u nto , l a i n te r a c c i ó n .