SlideShare uma empresa Scribd logo
1 de 45
*
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.

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Web2mili
Web2miliWeb2mili
Web2mili
 
principales caracteristicas de la web
principales caracteristicas de la web principales caracteristicas de la web
principales caracteristicas de la web
 
Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 
Trabajo web 1.0, 2.0 y 3.0
Trabajo web 1.0, 2.0 y 3.0Trabajo web 1.0, 2.0 y 3.0
Trabajo web 1.0, 2.0 y 3.0
 
La web (1)
La web (1)La web (1)
La web (1)
 
Web 2.0. sanchez
Web 2.0. sanchezWeb 2.0. sanchez
Web 2.0. sanchez
 
La Web 1.0 2.0 3.0
La Web 1.0 2.0 3.0La Web 1.0 2.0 3.0
La Web 1.0 2.0 3.0
 
Presentación1
Presentación1Presentación1
Presentación1
 
Grabiela mamani
Grabiela mamaniGrabiela mamani
Grabiela mamani
 
Que es la web...
Que es la web...Que es la web...
Que es la web...
 
Trabajo final informatica
Trabajo final informaticaTrabajo final informatica
Trabajo final informatica
 
Que es la web.
Que es la web.Que es la web.
Que es la web.
 
Practica 2.3
Practica 2.3Practica 2.3
Practica 2.3
 

Destaque

Bahasan 6 wbt cbt elearning blog
Bahasan 6 wbt cbt elearning blogBahasan 6 wbt cbt elearning blog
Bahasan 6 wbt cbt elearning blogsofiaheleni
 
derechos de autor
derechos de autorderechos de autor
derechos de autorRosa Urbano
 
Marketing Community Events Using Social Media
Marketing Community Events Using Social MediaMarketing Community Events Using Social Media
Marketing Community Events Using Social MediaSarah Page
 
Common ethics mistake law firms make when marketing online Lincoln 2016
Common ethics mistake law firms make when marketing online   Lincoln 2016Common ethics mistake law firms make when marketing online   Lincoln 2016
Common ethics mistake law firms make when marketing online Lincoln 2016Jon Sutten
 
Odeon Light 2013-2014
Odeon Light 2013-2014Odeon Light 2013-2014
Odeon Light 2013-2014Bam Design
 
Декоративное освещение 2014-2015
 Декоративное освещение 2014-2015 Декоративное освещение 2014-2015
Декоративное освещение 2014-2015Bam Design
 
Salud e higiene. emily gutiérrez
Salud e higiene. emily gutiérrezSalud e higiene. emily gutiérrez
Salud e higiene. emily gutiérrezEmily Gutiérrez
 
What are Return & Refund Policies
What are Return & Refund PoliciesWhat are Return & Refund Policies
What are Return & Refund Policiestermsfeed
 

Destaque (15)

Smaill
SmaillSmaill
Smaill
 
P1 Rivas
P1 RivasP1 Rivas
P1 Rivas
 
Bahasan 6 wbt cbt elearning blog
Bahasan 6 wbt cbt elearning blogBahasan 6 wbt cbt elearning blog
Bahasan 6 wbt cbt elearning blog
 
derechos de autor
derechos de autorderechos de autor
derechos de autor
 
Slid si
Slid siSlid si
Slid si
 
Marketing Community Events Using Social Media
Marketing Community Events Using Social MediaMarketing Community Events Using Social Media
Marketing Community Events Using Social Media
 
Common ethics mistake law firms make when marketing online Lincoln 2016
Common ethics mistake law firms make when marketing online   Lincoln 2016Common ethics mistake law firms make when marketing online   Lincoln 2016
Common ethics mistake law firms make when marketing online Lincoln 2016
 
CV_STEINTHAL2015_EN
CV_STEINTHAL2015_ENCV_STEINTHAL2015_EN
CV_STEINTHAL2015_EN
 
Odeon Light 2013-2014
Odeon Light 2013-2014Odeon Light 2013-2014
Odeon Light 2013-2014
 
Декоративное освещение 2014-2015
 Декоративное освещение 2014-2015 Декоративное освещение 2014-2015
Декоративное освещение 2014-2015
 
Salud e higiene. emily gutiérrez
Salud e higiene. emily gutiérrezSalud e higiene. emily gutiérrez
Salud e higiene. emily gutiérrez
 
Sale of Goods
Sale of GoodsSale of Goods
Sale of Goods
 
What are Return & Refund Policies
What are Return & Refund PoliciesWhat are Return & Refund Policies
What are Return & Refund Policies
 
Tabrez agro supply chain conf 7 oct 2016
Tabrez agro supply chain conf 7 oct 2016Tabrez agro supply chain conf 7 oct 2016
Tabrez agro supply chain conf 7 oct 2016
 
La vida antes de Google
La vida antes de GoogleLa vida antes de Google
La vida antes de Google
 

Semelhante a Diseño web (20)

Diseño weeb
Diseño weebDiseño weeb
Diseño weeb
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2
Web 2Web 2
Web 2
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
Diana
DianaDiana
Diana
 
Wed
WedWed
Wed
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
La web 2
La web 2La web 2
La web 2
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Diseño web
Diseño webDiseño web
Diseño web
 
Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 

Último

Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxpaogar2178
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024IES Vicent Andres Estelles
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONamelia poma
 
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...Ars Erótica
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfRaulGomez822561
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfGruberACaraballo
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfJonathanCovena1
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxroberthirigoinvasque
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primariaWilian24
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
Código Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de VenezuelaCódigo Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de Venezuelabeltranponce75
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 

Último (20)

Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
PP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomasPP_Comunicacion en Salud: Objetivación de signos y síntomas
PP_Comunicacion en Salud: Objetivación de signos y síntomas
 
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACIONRESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
RESOLUCIÓN VICEMINISTERIAL 00048 - 2024 EVALUACION
 
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdf
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
Sesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdfSesión de clase APC: Los dos testigos.pdf
Sesión de clase APC: Los dos testigos.pdf
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
Código Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de VenezuelaCódigo Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de Venezuela
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 

Diseño web

  • 1.
  • 2. * DISEÑO WEB: Fue publicado en el año 1991 trece años después se reinvento, alguien le puso nombre: Web 2.0
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6.
  • 7. 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 .
  • 8. 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:
  • 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: 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.
  • 11. 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
  • 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: 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.
  • 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: se hacen 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: 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
  • 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 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.
  • 21. 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.
  • 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 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
  • 24. * 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.
  • 25. * 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.
  • 26. * 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.
  • 27. * 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.
  • 28. * - 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.
  • 29. -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.
  • 30. *
  • 31. 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.
  • 32. * 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).
  • 33.
  • 34. 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
  • 35. 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.
  • 36. 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.
  • 37. * 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.
  • 38. * “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”.
  • 39.
  • 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 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.
  • 42. * 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.
  • 43. * 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.
  • 44. * * 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.
  • 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.