Diseño de web.03
-
Upload
divinajannette -
Category
Documents
-
view
96 -
download
3
Transcript of Diseño de web.03
![Page 1: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/1.jpg)
DISEÑO DE WEB
![Page 2: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/2.jpg)
La primera web fue publicada en el año 1991 por TIM BERNERS –LEE
El padre de la WORLD WIDE WEB Elaboro un documento informativo Ofrecía posibilidad de ir a otro texto
al pulsar una palabra
![Page 3: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/3.jpg)
DISEÑO Y WEB 2.0
Ha supuesto una revolución en el diseño tanto en lo que se refiere a la concepción artística y interfaces
Las paginas han evolucionado, pero los usuarios mas
Diseño 2.0 se ha obligado a incluir formas y colores
Incluso también piensan en el individuo que va a interaccionar
![Page 4: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/4.jpg)
ESTILO
Es 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
![Page 5: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/5.jpg)
artículo “How to destroy the Web 2.0 look”3,
de Elliot Jay Stocks, podemos definir las siguientes características:
![Page 6: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/6.jpg)
colores vibrantes y contrastados
la Web 2.0 se caracteriza por el uso colores con mucho contraste que facilitan la jerarquización de la información
los diseñadores seleccionan los colores y los aplican a todos los elementos de la web: iconos, menús, efectos de los enlaces, etc.
Badges
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
![Page 7: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/7.jpg)
los logotipos las barras de menú los distintos elementos de las composiciones cuentan con destellos de luz y pequeñas
zonas sobreexpuestas, que aportan volumen a los diseños
Brillos, destellos y reflejos
Bordes redondeados
nuevo arquetipo en el que todos los bordes son redohan surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros.
![Page 8: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/8.jpg)
Degradados técnicas visuales que más han
calado entre dos diseñadores de Web 2.0.
Líneas diagonales
se emplean especialmente en los fondos de las páginas y en los de los titulares
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.
![Page 9: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/9.jpg)
Desenfoques se hacen especialmente patentes en las
sombras. En lugar de ser sombras duras, los
diseñadores utilizan leves desenfoques. 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. A estos
![Page 10: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/10.jpg)
conceptos de diseño general
Simplicidad Diseño centrado Menos columnas Navegación simple ar la
navegación Separar la navegación Tipografías más grandes Leads en negrita Iconos atractivos
![Page 11: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/11.jpg)
Futuro del diseño 2.0
Hablar de diseño implica en general referirse a una estandarización
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
Evolución tecnológica
![Page 12: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/12.jpg)
Navegador
Navegadores web 3.4. Evolución tecnológica (y su uso) 3.4.1 Navegador Un navegador es un programa que se utiliza para
acceder a la web
Los otros navegadores Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los navegadores de sólo texto
Flash
la solución definitiva cuando deseamos hacer una web visualmente atractiva, a una posición mucho más discreta. También estuvo de moda crear impresionantes introducciones en Flash para recibir a los internautas, algo que está prácticamente erradicado de todas las webs 2.0.
![Page 13: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/13.jpg)
AJAX (Asynchronous JavaScript And XML) serie de técnicas y combinación de tecnol 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 ogías ya existentes
El internauta 2.0
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. Manuel
![Page 14: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/14.jpg)
internauta 1.0
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
internauta 2.0
1. Utiliza IE, Firefox, Opera, Safari… 2. Accede desde su PC, PDA, Blackberry, TV, WII… 3. Se conecta por GPRS, ADSL, Cable… 4. Busca la operativa en las páginas 5. Genera información: Blogs, páginas personales… 6. Publica contenido, lo ordena…
![Page 15: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/15.jpg)
Interfaces para un internauta 2.0
Usabilidad Se trata en una disciplina cuyo objetivo es facilitar la interacción del usuario
![Page 16: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/16.jpg)
Principios de la Usabilidad
Anticipación Autonomía Los colores han de utilizarse con
precaución para no dificultar el acceso a los usuarios
ConsistenciaReversibilidadReducción del tiempo de latenciaAprendizaje
![Page 17: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/17.jpg)
protección del trabajo de los usuarios es prioritario
Legibilidad Seguimiento de las acciones del
usuario Interfaz visible. uso adecuado de metáforas facilita
el aprendizaje de un sitio web Ley de Fitts indica que el tiempo
para alcanzar un objetivo
![Page 18: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/18.jpg)
Usabilidad frente al diseño
se desarrolla con la parte izquierda del cerebro y representa la razón y la acción lógica
es una muestra de la lucha aparentemente existente entre diseño y Usabilidad
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 contenidos y, en conjunto, a mejorar el producto.
![Page 19: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/19.jpg)
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”
pasos necesarios : Entender el contenido de la web Realizar estudios de card sorting Elaborar un borrador del árbol de la
web, agrupando la información
![Page 20: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/20.jpg)
Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.
Crear el mapa del sitio. Definir las funcionalidades de la
página y cómo se llega a ellas. Contrastar la organización de la
información que hemos propuesto con el resto de miembros del equipo.
Elaborar el wireframe
![Page 21: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/21.jpg)
Estándares
El verdadero triunfo de la Web 2.0 ha sido el triunfo de los estándares web
Se define como el “conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web
![Page 22: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/22.jpg)
“El poder de la web está en su universalidad. El acceso a la web para todos, independientemente de su discapacidad, es un aspecto esencial.” Esta frase de Tim Berners-Lee representa a la perfecció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 soporte distinto a un plasma de 17”.
![Page 23: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/23.jpg)
CCS (Cascading Style Sheets, CSS)
son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.
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.
![Page 24: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/24.jpg)
principales ventajas para usar CCS son: Es más sencillo realizar cambios
globales El estilo del site se mantiene en toda
su extensión El site es más accesible Rápida descarga Separación del diseño y la
programación Está optimizado para buscadores El usuario puede usar sus propias
normas de estilo Una mayor libertad en la maquetación
![Page 25: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/25.jpg)
XHTML (Lenguaje de Marcado de Hipertexto Extensible)
es el lenguaje de marcado pensado para sustituir al HTML
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.
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
![Page 26: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/26.jpg)
Las principales ventajas
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
![Page 27: Diseño de web.03](https://reader036.fdocuments.ec/reader036/viewer/2022062319/557bc6ebd8b42a1c1f8b547a/html5/thumbnails/27.jpg)
Conclusiones
No está claro de donde provino el estilo 2.0 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 conclusión, podemos resumir todo lo expuesto hasta ahora en que el diseño Web 2.0 pronto estará pasado de moda.
El diseño supone en gran medida romper los cánones, así que debemos estar preparados para la llegada de la próxima tendencia.