*
DISEÑO WEB:
Fue publicado en el año 1991 trece años
después se reinvento, alguien le puso
nombre: Web 2.0
DISEÑO WEB 2.0:
Ha supuesto el nacimiento de los estilos.
Todos sabemos que nos encontramos en
una pagina actual porque reconocemos una
serie de cañones repetitivos.
Las páginas 1.0 fueron dibujadas por
diseñadores que provenían del mundo de los
carteles, sin embargo las 2.0 han sido pensadas
por creadores especializados en diseño de
webs.
DISEÑO WEB 2.0

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.
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 que a la hora de
abordar el diseño de una pagina se habla del grado
de aplicación del arquetipo 2.0 que debe tener


.
ESTILO 2.0

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.
Podemos definir las siguientes caracteristicas:
*
    1- Uso de colores vibrantes y
    contrastados: Es el uso de colores con
    mucho contraste que facilita la
    jerarquización de la información y por lo
    tanto la lectura.
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 o una promoción.
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. Al mismo
tiempo, las webs se llenan de objetos con
un reflejo de él mismo sobre su base
4- Bordes 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
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.
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 de un trama de
este.
7- Desenfoques: se hacen
especialmente patentes en las
sombras. En lugar de ser sombras
duras, los diseñadores utilizan leves
desenfoques.
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
*

1. Simplicidad: Esta simplicidad ha tenido como
consecuencia también que el color blanco adquiera
un mayor protagonismo
2. Diseño centrado: mientras en la web 1.0 todo el
contenido se alineaba a la izquierda, las páginas 2.0
siempre están centradas
3. Menos columnas: tiende hacia dos, en
el caso de los blogs, y tres en el caso de
las páginas con un mayor volumen de
contenido.
4. Separar la navegación: Clara área esta
claramente definida por un tipo de
navegación
5. Navegación simple: cada elemento y con
cuáles puede interactuar.




6. Tipografías más grandes: Se ha pasado a un
modelo en el que se consigue que las fuentes
grandes también sean visualmente atractivas
7. Leads en negrita: en general, la negrita
se ha convertido en el modo más eficiente
de destacar la información
8. Iconos atractivos: han dejado de ser un
elemento auxiliar del diseño para
convertirse en un componente prioritario.
Futuro de diseño 2.0.Se refiere a una
estandarización .La web 2.0 esta generando un
movimiento en contra de estándares que hacen lo
mismo.
La web 2.0 es un concepto… no un diseño estético.
*
    Es un programa que se utiliza para acceder
    a la web. Nets Cape consiguió ser el
    navegador desde 1994 hasta que en
    1997,Microsoft introdujo el internet
    Explorer.
El domino que consiguió el IE fue tal que el
desarrollo webs oriento a la visualización.
Las estadísticas aduales nos dice que IE sigue
caminando
*
Navegadores como móviles y PDA de solo
texto estan ganando importancia.
Cada navegador interpreta asu modo el
código HTML no queda mas remedio que
usar un estándar común.
*
La utilización de este tipo de animaciones ha
pasado como decíamos a una posición
secundaria que es en animaciones de las webs
o para estudiar noticias.
*
Es nombre que se puso a una serie de técnicas y
combinaciones de tecnologías ya existentes ,ya
podemos mover las ventanas en donde nos
apetezca en servicios como Net vives o Igoogle.
*
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 hipervínculos.
*
- Los usuarios son más exigentes. El
usuario de Internet de hoy en día, por el
contrario, ofrece muchas menos
posibilidades a los sites. Entra, y si no ve
nada que le interese, se va.
- Los usuarios saben dónde está o
debería estar cada botón. Los menús
están en
la parte superior y/o en la izquierda, y el
logo que abre la pantalla es un enlace a la
página de inicio.
-Los usuarios no quieren diseñar. Gracias al fenómeno
de las plantillas el usuario no pierde tiempo
programando o diseñando y coge un diseño ya elaborado
por otros, lo aplica, y puede tener una página personal
moderna
-Los usuarios quieren participar: la Web 2.0 es a
menudo considerada como la “web colaborativa” ya que
su base es que los usuarios empiezan a opinar, a juzgar y
a decir lo que les gusta y lo que no.
-- 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.
*
Usabilidad: 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.
*

1. Anticipación, el sitio web debe
anticiparse a las necesidades del usuario.
2.   Autonomía, los usuarios deben tener el
     control sobre el sitio web.
3. Los colores han de utilizarse con
   precaución para no dificultar el acceso
   a los usuarios con problemas de
   distinción de colores (aprox. un 15% del
   total).
Reversibilidad, un sitio web ha de permitir
deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para
alcanzar un objetivo con el ratón esta en
función de la distancia y el tamaño del
objetivo.
8. Reducción del tiempo de latencia.
Hace posible optimizar el tiempo de
espera
del usuario, permitiendo la realización de
otras tareas
9. Aprendizaje, los sitios web deben requerir un
mínimo proceso de aprendizaje y deben poder ser
utilizados desde el primer momento.
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.
*

La Usabilidad se desarrolla con la parte izquierda del
cerebro y representa la razón y la acción lógica; por lo
tanto se corresponde con Marte. Por su parte, el
Diseño reside en la parte derecha del cerebro y se
identifica con lo emocional y la acción intuitiva, así
que se corresponde con Venus.
*

“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”.
*

    1.   Entender el contenido de la web.
    2. Realizar estudios de card sorting.
    3. Elaborar un borrador del árbol de la web.
    4. Crear el mapa del sitio.
    5. Definir las funcionalidades de la página y cómo
    se llega a ellas.
*

* Se define como el “conjunto de
  recomendaciones dadas por el World
  Wide Web Consortium (W3C)
* 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 personas ciegas o
  dispositivos móviles como PDA o
  teléfonos móviles.
* Consiste en uno o varios documentos en los que
 se escriben las características que va a tener
 cada uno de los elementos de la página:
 titulares, párrafos, columnas, enlaces, etc., de
 modo que afectan o pueden afectar al
 conjunto del site.
*


1- Es más sencillo realizar cambios globales.
2- El site es más accesible.
3- Rápida descarga.
4- El usuario puede usar sus propias normas de
estilo.
*
* 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.
*
* No está claro de donde provino el estilo 2.0. Nos
 recuerda elementos muy dispares: desde la
 portada del disco Tubular Bells de Mike Oldfield,
 hasta los reflejos de las obras de Roy Lichtenstein
 o las siluetas contrastadas de Keith Haring. Pero
 lo que sí está claro que esta forma de diseñar
 está traspasando los límites de las pantallas de
 ordenador, para convertirse en un referente del
 diseño digital como se aprecia, por ejemplo, en
 los grafismos de televisión.

Diseño web

  • 2.
    * DISEÑO WEB: Fue publicadoen el año 1991 trece años después se reinvento, alguien le puso nombre: Web 2.0
  • 3.
    DISEÑO WEB 2.0: Hasupuesto el nacimiento de los estilos. Todos sabemos que nos encontramos en una pagina actual porque reconocemos una serie de cañones repetitivos.
  • 4.
    Las páginas 1.0fueron dibujadas por diseñadores que provenían del mundo de los carteles, sin embargo las 2.0 han sido pensadas por creadores especializados en diseño de webs.
  • 5.
    DISEÑO WEB 2.0 Laspá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.
  • 7.
    ESTILO 2.0 La Web2.0 ha supuesto la creación de una serie de clichés de diseño, de elementos comunes, que configuran un estilo propio que a la hora de abordar el diseño de una pagina se habla del grado de aplicación del arquetipo 2.0 que debe tener .
  • 8.
    ESTILO 2.0 Aunque existenunas 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. Podemos definir las siguientes caracteristicas:
  • 9.
    * 1- Uso de colores vibrantes y contrastados: Es el uso de colores con mucho contraste que facilita la jerarquización de la información y por lo tanto la lectura.
  • 10.
    2- Badges: Setrata 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 o una promoción.
  • 11.
    3- Brillos, destellosy reflejos: tanto los logotipos como las barras de menú y los distintos elementos de las composiciones cuentan con destellos de luz. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base
  • 12.
    4- Bordes 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
  • 13.
    5- Degradados: sinduda 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.
  • 14.
    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 de un trama de este.
  • 15.
    7- Desenfoques: sehacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques.
  • 16.
    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
  • 17.
    * 1. Simplicidad: Estasimplicidad ha tenido como consecuencia también que el color blanco adquiera un mayor protagonismo 2. Diseño centrado: mientras en la web 1.0 todo el contenido se alineaba a la izquierda, las páginas 2.0 siempre están centradas
  • 18.
    3. Menos columnas:tiende hacia dos, en el caso de los blogs, y tres en el caso de las páginas con un mayor volumen de contenido. 4. Separar la navegación: Clara área esta claramente definida por un tipo de navegación
  • 19.
    5. Navegación simple:cada elemento y con cuáles puede interactuar. 6. Tipografías más grandes: Se ha pasado a un modelo en el que se consigue que las fuentes grandes también sean visualmente atractivas
  • 20.
    7. Leads ennegrita: en general, la negrita se ha convertido en el modo más eficiente de destacar la información 8. Iconos atractivos: han dejado de ser un elemento auxiliar del diseño para convertirse en un componente prioritario.
  • 21.
    Futuro de diseño2.0.Se refiere a una estandarización .La web 2.0 esta generando un movimiento en contra de estándares que hacen lo mismo. La web 2.0 es un concepto… no un diseño estético.
  • 22.
    * Es un programa que se utiliza para acceder a la web. Nets Cape consiguió ser el navegador desde 1994 hasta que en 1997,Microsoft introdujo el internet Explorer.
  • 23.
    El domino queconsiguió el IE fue tal que el desarrollo webs oriento a la visualización. Las estadísticas aduales nos dice que IE sigue caminando
  • 24.
    * Navegadores como móvilesy PDA de solo texto estan ganando importancia. Cada navegador interpreta asu modo el código HTML no queda mas remedio que usar un estándar común.
  • 25.
    * La utilización deeste tipo de animaciones ha pasado como decíamos a una posición secundaria que es en animaciones de las webs o para estudiar noticias.
  • 26.
    * Es nombre quese puso a una serie de técnicas y combinaciones de tecnologías ya existentes ,ya podemos mover las ventanas en donde nos apetezca en servicios como Net vives o Igoogle.
  • 27.
    * Atrás queda aquellaweb 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 hipervínculos.
  • 28.
    * - Los usuariosson más exigentes. El usuario de Internet de hoy en día, por el contrario, ofrece muchas menos posibilidades a los sites. Entra, y si no ve nada que le interese, se va. - Los usuarios saben dónde está o debería estar cada botón. Los menús están en la parte superior y/o en la izquierda, y el logo que abre la pantalla es un enlace a la página de inicio.
  • 29.
    -Los usuarios noquieren diseñar. Gracias al fenómeno de las plantillas el usuario no pierde tiempo programando o diseñando y coge un diseño ya elaborado por otros, lo aplica, y puede tener una página personal moderna -Los usuarios quieren participar: la Web 2.0 es a menudo considerada como la “web colaborativa” ya que su base es que los usuarios empiezan a opinar, a juzgar y a decir lo que les gusta y lo que no. -- 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.
  • 30.
  • 31.
    Usabilidad: Se trataen 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.
  • 32.
    * 1. Anticipación, elsitio web debe anticiparse a las necesidades del usuario. 2. Autonomía, los usuarios deben tener el control sobre el sitio web. 3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
  • 34.
    Reversibilidad, un sitioweb ha de permitir deshacer las acciones realizadas 7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. 8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas
  • 35.
    9. Aprendizaje, lossitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. 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.
  • 36.
    13. Seguimiento delas 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.
  • 37.
    * La Usabilidad sedesarrolla con la parte izquierda del cerebro y representa la razón y la acción lógica; por lo tanto se corresponde con Marte. Por su parte, el Diseño reside en la parte derecha del cerebro y se identifica con lo emocional y la acción intuitiva, así que se corresponde con Venus.
  • 38.
    * “El arte yla 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”.
  • 40.
    * 1. Entender el contenido de la web. 2. Realizar estudios de card sorting. 3. Elaborar un borrador del árbol de la web. 4. Crear el mapa del sitio. 5. Definir las funcionalidades de la página y cómo se llega a ellas.
  • 41.
    * * Se definecomo el “conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) * 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 personas ciegas o dispositivos móviles como PDA o teléfonos móviles.
  • 42.
    * Consiste enuno o varios documentos en los que se escriben las características que va a tener cada uno de los elementos de la página: titulares, párrafos, columnas, enlaces, etc., de modo que afectan o pueden afectar al conjunto del site.
  • 43.
    * 1- Es mássencillo realizar cambios globales. 2- El site es más accesible. 3- Rápida descarga. 4- El usuario puede usar sus propias normas de estilo.
  • 44.
    * * El XHTMLes 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.
  • 45.
    * * No estáclaro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares: desde la portada del disco Tubular Bells de Mike Oldfield, hasta los reflejos de las obras de Roy Lichtenstein o las siluetas contrastadas de Keith Haring. Pero lo que sí está claro que esta forma de diseñar está traspasando los límites de las pantallas de ordenador, para convertirse en un referente del diseño digital como se aprecia, por ejemplo, en los grafismos de televisión.