Diseño web

Click here to load reader

  • date post

    20-May-2015
  • Category

    Documents

  • view

    216
  • download

    0

Embed Size (px)

Transcript of Diseño web

  • 1. DISEOWEB

2. TWITTER Idioma: ingles Tipo: general Facilidad de uso: sencillo URL: http://twitter.com/ Descripcin: Aplicacin de red social y microblogging que permiteal usuario escribir mensajes de hasta 140 caracteres que sepublican en una pgina web personal Twitter y que otros usuariospueden seguir a travs de un link o una suscripcin.Necesidades de negocio de la empresa que puede cubrir:Comunicacin interna:Especialmente los empleados que viajan amenudo, pueden twittear desde cualquier lugar a su pginapersonal.Comunicacin externa:La empresa puede recibir en tiempo reallo que los usuarios piensan de sus productos y servicios.Promocin:Es posible utilizar la herramienta para promocionar laempresa. 3. WEB 2.0 Cuenta la historia que la primera web fue publicada enel ao 1991 por Tim Berners-Lee. El padre de la WorldWide Web elabor un documento informtico querompa con lo anterior porque contena hipervnculos, esdecir, ofreca posibilidad de ir a otro texto al pulsarsobre una palabra.Diseo y Web 2.0 La llegada de la Web 2.0 ha supuesto una revolucin enel diseo, tanto en lo que se refiere a la concepcinartstica como en las interfaces. El usuario adquiere unnuevo papel dentro del soporte, ya que deja de ser unescaneador de contenidos para ser el que elige, el queparticipa e incluso el que crea esos contenidos. Graciasa esta demanda el diseo 2.0 se ha visto obligado a incluir como disciplina no slola eleccin de formas y colores, sino tambin a pensaren el individuo que va a interaccionar. As nace laUsabilidad, un trmino que tambin surgi cuandoalguien le puso nombre, en concreto fue Jacob Nielsen 4. ESTILO 2.0 La Web 2.0 ha supuesto la creacin de una serie declichs de diseo, de elementos comunes, queconfiguran un estilo propio, hasta el punto de que a lahora de abordar el diseo de una pgina se habla delgrado de aplicacin del arquetipo 2.0 que debe tener.Caractersticas Colores vibrantes y contrastados Badges. Brillos, destellos y reflejos. Bordes redondeados. Degradados. Lneas diagonales. Desenfoques. Logotipos reflejados. 5. CONCEPTOS DE DISEO GENERAL Simplicidad: en igualdad de condiciones la solucinms sencilla es probablemente la correcta. Diseo centrado: mientras en la web 1.0 todo elcontenido se alineaba a la izquierda, las pginas 2.0siempre estn centradas, mejorando la visualizacin delos contenidos en cualquier tipo de resolucin deescritorio. Menos columnas: antes la pginas se estructuraban enun mayor nmero de columnas, imitando tal vez el estilode los peridicos. Separar la navegacin: aunque siempre fueron distintasla zona superior y la inferior, ahora se marca msvisualmente. 6. Navegacin simple: Organizar la pgina para queel usuario navegue intuitivamente y sepa para qusirve cada elemento y con cules puede interactua Tipografas ms grandes: consigue que lasfuentes grandes tambin sean visualmenteatractivas Leads en negrita: en general, la negrita se haconvertido en el modo ms eficiente de destacar lainformacin sin recurrir a colores que ensucien laidentidad corporativa de la pgina Iconos atractivos: han dejado de ser un elementoauxiliar del diseo para convertirse en uncomponente prioritario. 7. FUTURO DEL DISEO 2.0 Hablar de diseo implica en general referirse a unaestandarizacin, hablar de escuelas, detendencias, de modos de actuar generalizados,pero, al mismo tiempo, de ruptura y originalidad.Todos los movimientos artsticos se caracterizanporque mucha gente hace lo mismo, hasta quealguien lo rompe y crea algo ms innovador. Poresta razn la Web 2.0 est generando unmovimiento en contra de estos estndares. 8. EVOLUCIN TECNOLGICA (Y SU USO) Navegadores webUn navegador es un programa que se utiliza paraacceder a la web. Desde el primer explorador,llamado NCSA Mosaic de principio de los noventahasta hoy, la evolucin ha sido espectacular. otros navegadores :Hoy en da existen otras aplicaciones que estnganando importancia como son los navegadorespara mviles y para PDA, los navegadores de slotexto. 9. FLASH Flash si se ha convertido en el gran protagonista deotro campo del diseo web: los vdeos en lnea.Las principales plataformas de vdeo, comoYoutube, Metacafe o Dailymotion, utilizan losvdeos codificados en Flash Video, debido a lopoco que pesan los archivos 10. AJAX El trmino AJAX (Asynchronous JavaScript AndXML), al igual que el de Web 2.0, no es ningninvento, ni un gran avance tecnolgico, es elnombre que se le puso a una serie de tcnicas ycombinacin de tecnologas ya existentes. El uso de Ajax ha supuesto una revolucin en elconcepto de interaccin del usuario con la pginaweb. Ya podemos mover las ventanas a nuestrogusto y ponerlas en donde nos apetezca,eliminarlas de la vista o aadir nuevas ventanascon nuestras RSS favoritas en servicios comoNetvives o Igoogle 11. EL 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 pginas 5. Genera informacin: Blogs, pginaspersonales 6. Publica contenido, lo ordena 12. PRINCIPIOS DE LA USABILIDAD Anticipacin, el sitio web debe anticiparse a lasnecesidades del usuario. Autonoma, los usuarios deben tener el control sobre elsitio web. Los usuarios sienten que controlan un sitioweb si conocen su situacin en un entorno abarcable yno infinito.Los colores han de utilizarse con precaucin para nodificultar el acceso a los usuarios con problemas dedistincin de colores (aprox. un 15% del total). Consistencia, las aplicaciones deben ser consistentescon las expectativas de los usuarios, es decir, con suaprendizaje previo. Eficiencia del usuario, los sitios web se deben centraren la productividad del usuario, no en la del propio sitioweb. Por ejemplo, en ocasiones tareas con mayornmero de pasos son ms rpidas de realizar para unapersona que otras tareas con menos pasos, pero mscomplejas. 13. Los usuarios son ms exigentes. Hasta la llegada dela Web 2.0 el internauta acceda a una pgina, laexploraba, valoraba si algn contenido le interesaba y,si no, se iba. - Los usuarios saben dnde est o debera estarcada botn. Los mens estn en la parte superior y/oen la izquierda, y el logo que abre la pantalla es unenlace a la pgina de inicio. - Los usuarios no quieren disear. Hasta hace pococuando alguien diseaba una pgina web era porqueabra un programa de retoque fotogrfico, de diseovectorial o de programacin - Los usuarios quieren participar: la Web 2.0 es amenudo considerada como la web colaborativa ya quesu base es que los usuarios empiezan a opinar, a juzgary a decir lo que les gusta y lo que no. - Los usuarios quieren crear: este el objetivo ltimode la Web 2.0. Un internauta que crea contenidos y que,por lo tanto, no se encuentra ante una pgina diseadacon mejor o peor resultado, sino ante una interface 14. INTERFACES PARA UN INTERNAUTA 2.0 Usabilidad :Se trata en una disciplina cuyo objetivo esfacilitar la interaccin del usuario y, por esta razn, es lgicoque naciera o, ms bien, cobrara fuerza, con la llegada de laWeb 2.0. Si el mundo web se sustenta en que los internautasparticipen, es necesario estudiar qu es lo que los estimula componentes- Aprendizaje: es fcil para los usuarios emplear las utilidades bsicas de una web la primera vez que se encuentran con ella?- Eficacia: una vez que el diseo ya les es familiar, cunto tardan en aprender a realizar las tareas?- Memorizacin: cundo los usuarios vuelven al diseo despus de un perodo sin utilizarlo, cunto tardan en reestablecer la habilidad?- Errores: cuntos errores cometen los usuarios, cmo de graves son, y cunto tardan en reponerse de estos errores?- Satisfaccin: es agradable interactuar con el diseo? 15. Reversibilidad, un sitio web ha de permitir deshacerlas acciones realizadas Ley de Fitts indica que el tiempo para alcanzar unobjetivo con el ratn esta en funcin de la distanciay el tamao del objetivo. A menor distancia y mayortamao ms facilidad para usar un mecanismo deinteraccin. Reduccin del tiempo de latencia. Hace posibleoptimizar el tiempo de espera del usuario,permitiendo la realizacin de otras tareas mientrasse completa la previa e informando al usuario deltiempo pendiente para la finalizacin de la tarea. Aprendizaje, los sitios web deben requerir unmnimo proceso de aprendizaje y deben poder serutilizados desde el primer momento 16. El uso adecuado de metforas facilita el aprendizaje deun sitio web, pero un uso inadecuado de estas puededificultar enormemente el aprendizaje. La proteccin del trabajo de los usuarios es prioritario,se debe asegurar que los usuarios nunca pierden sutrabajo como consecuencia de un error. Legibilidad, el color de los textos debe contrastar con eldel fondo, y el tamao de fuente debe sersuficientemente grande. Seguimiento de las acciones del usuario. Conociendo yalmacenando informacin sobre su comportamientoprevio se ha de permitir al usuario realizar operacionesfrecuentes de manera ms rpida. Interfaz visible. Se deben evitar elementos invisibles denavegacin que han de ser inferidos por los usuarios,mens desplegables, indicaciones ocultas, etc. 17. USABILIDAD FRENTE AL DISEO La Usabilidad se desarrolla con la parte izquierdadel cerebro y representa la razn y la accin lgica;por lo tanto se corresponde con Marte. Por suparte, el Diseo reside en la parte derecha delcerebro y se identifica con lo emocional y la accinintuitiva, as que se corresponde con Venus. Estateora, desarrollada por Curt Cloninger en suartculo Usability experts are from Mars, graphicdesigners are from Venus es una muestra de lalucha aparentemente existente entre diseo yUsabilidad. 18. ARQUITECTURA DE LA INFORMACINPasos necesarios para una arquitectura de la informacinacertada: Entender el contenido de la web, determinar losservicios que se ofrecen y a quin est dirigida la web. Realizar estudios de card sorting. Se trata de unejercicio que consiste en utilizar a usuarios potencialesde nuestra para web para que organicen el contenido atravs de fichas, ordenndolo segn sus esquemasmentales. Esto hace que la estructura resultante seadece ms a lo que el internauta espera encontrarse. Elaborar un borrador del rbol de la web, agrupando lainformacin y estableciendo jerarquas. Evaluar la correspondencia entre nuestro rbol y losresultados del card sorting. 19. Evaluar la correspondencia entre nuestro rbol ylos resultados del card sorting. Crear el mapa del sitio. Definir las funcionalidades de la pgina y cmo sellega a ellas. Contrastar la organizacin de la informacin quehemos propuesto con el resto de miembros delequipo. 20. BENEFICIOS - Los clientes pasarn ms tiempo navegando - Mejorar la imagen de marca, ya que percibirn lapgina positivamente y no se frustrarn por noencontrar lo que buscan. - Aumenta su fidelidad, es ms probable quevuelvan. 21. ESTNDARES El verdadero triunfo de la Web 2.0 ha sido el triunfo delos estndares web, un trmino a veces poco conocidoentre los internautas pero con una importancia vital parael desarrollo web. Se define como el conjunto derecomendaciones dadas por el World Wide WebConsortium (W3C) y otras organizacionesinternacionales acerca de cmo crear e interpretardocumentos basados en el Web (Alexis Bellido)1 El poder de la web est en su universalidad. El accesoa la web para todos, independientemente de sudiscapacidad, es un aspecto esencial. Esta frase deTim Berners-Lee representa a la perfeccin lo quesuponen los estndares web: que la red no supongauna brecha con ningn colectivo por no disponer al cienpor cien de sus sentidos, ni por navegar en un soportedistinto a un plasma de 17 22. CCSLas principales ventajas Es ms sencillo realizar cambios globales: si queremosrealizar un cambio en el diseo, como puede ser la distanciaentre las fotos el texto, el color de los hipervnculos o eltamao de los titulares, ser ms sencillo hacerlo en las CSSya que bastar con modificar un archivo y no pgina porpgina. El estilo del site se mantiene en toda su extensin: salvo quemarquemos lo contrario, todas las pginas tendrn el titular ylos prrafos en el mismo formato, los mismo mrgenes entrelos elementos, etc. El site es ms accesible, ya que pueden definirse estilos paracada tipo de navegador. Pueden crearse distintos formatospara que cada navegador lo interprete como le sealemos. Rpida descarga: en general las pginas son ms ligeras, yaque toda la informacin de estilo est en los archivos CSS,que cargamos al acceder al site, y no hay que cargar unosestilos cada vez que cambiamos de pgina. 23. Separacin del diseo y la programacin. Los dospueden trabajar en la web sin interferir uno en eltrabajo del otro. Est optimizado para buscadores: hay menoscdigo en los archivos y resulta ms fcil para elbuscador encontrar palabras clave. El usuario puede usar sus propias normas deestilo: algunos navegadores de Internet permitenpersonalizar las CSS de las pginas, por lo que sonellos quienes eligen cmo visionarlas. Una mayor libertad en la maquetacin: en relacincon el anterior modo de maquetar, las tablas, lasposibilidades son infinitamente mayores. Mientraslas tablas se basan en filas, las CSS se basan enposiciones 24. XHTMLLas principales ventajas que aportan son: La compatibilidad con navegadores antiguos La independencia del diseo. Pudiendo adoptarpresentaciones distintas segn el dispositivo. Facilidad de edicin del cdigo y su mantenimiento Mejoras de rendimiento. 25. CONCLUSIONES Podemos resumir todo lo expuesto hasta ahora enque el diseo Web 2.0 pronto estar pasado demoda. Cuando las normas de un estilo estn tanclaras, es porque el siguiente paso ser suredefinicin. El diseo supone en gran medidaromper los cnones, as que debemos estarpreparados para la llegada de la prximatendencia. Un nuevo modo de hacer webs, donde se impongaunos nuevos hbitos de navegacin por parte delos usuarios y que nos obligue a redefinir lausabilidad, el aspecto visual y, en conjunto, lainteraccin.