Tendencias en la Web

1
Tendencias en la Web
2
Agenda

• La Web tradicional o Web 1.0
• Problemáticas generales del diseño de UI
• La Web 2.0
• Cooperación IngenieroDiseñador Gráfico
• Web 2.0 en Argentina Flof

3
Web 1.0
4
Web 1.0

• Primera generación de sitios Web
• Experiencia de usuario pobre
• Información recopilada y catalogada por
  administradores de sitios
• No hay integración entre webs
• Auge boom de Internet año 2000

5
Problemáticas del diseño de UI
6
Interfaces de usuario en Web

• Cómo presentar la información al usuario?
• Cómo impacta la tecnología actual en las
  posibilidades existentes?
• Existen soluciones ya probadas con éxito?

7
Problemas de presentación

• Datos en grillas
• Cantidad de registros
• Grillas ordenables
• Grillas paginables
• Grillas editables
• Uso del scroll
• Uso de pop-ups

8
Datos en grillas

• Cuál es la cantidad de datos óptima a presentar
  al usuario?
• Listar 1000 items en una misma página no sirve.
• Navegar por 45 páginas de datos tampoco.
• Hacer eficiente el tráfico de información mejora
  la experiencia del usuario y la performance de un
  sistema.

9
Datos en grillas - Consejos

• Brindar mecanismos de búsqueda avanzados para
  retornar al usuario aquello que busca.
• Evitar el scroll fino.
• Utilizar paginado para navegar la información.
• Brindar opciones de ordenamiento sobre las
  grillas.

10
Accesibilidad

• Facilidad para
• Usar
• Visitar
• Acceder
• El objetivo
• Elevar al máximo la accesibilidad.
• Lograr captar la mayor cantidad de usuarios
  posibles.

11
Usabilidad

• Unidad de Medida
• Sobre la facilidad de uso de un producto o
  servicio
• Se define en términos de las necesidades de los
  usuarios. Ellos tienen que percibir que algo es
  usable
• A veces entran en conflicto directo con las
  intenciones de los diseñadores.

12
Web 2.0
13
Web 2.0

• Se trata de los servicios de 2da generación en
  Internet.
• Permite a las personas colaborar y compartir
  información online.
• Ofrecen una experiencia de usuario parecida a las
  típicas aplicaciones de escritorio (RIA Rich
  Internet Applications).

14
Web 1.0 vs Web 2.0

• Web 1.0
• Britannica Online
• Personal websites
• Domain name speculation
• CMS
• Directories (taxonomy)

• Web 2.0
• Wikipedia
• Blogging
• Search engine optimization
• Wikis
• Tagging ('folksonomy')

15
Buzzwords Web 2.0

• Folkosonomies
• Descripción conjunta de un material por parte de
  muchas persona que realizan una categorización
  colaborativa por medio de tags simples no
  jerárquicos, cuantas .más personas catalolguen un
  recurso surgirán las palabras clave más
  relevantes que son las que terminarán por
  describir dicho recurso.
• Blogs y wikis
• Sistemas de publicación automatizados que
  permiten la socialización de la información de
  manera sencilla sin necesidad de conocimientos
  tecnológicos especiales.
• AJAX (Asynchronous JavaScript and XML)
• Tecnología para presentación Web que permite
  crear aplicaciones que enriquecen la interacción
  del usuario, permitiendo refrescos parciales de
  las páginas.
• Feeds RSS/Atom
• Suministro de datos electrónicos. Permiten
  sindicar y agregar contenidos web por parte del
  usuario mediante subscripciones.

16
Taxonomy Vs. Folkosonomy

• Taxonomía
• Forma tradicional de catalogar
• Árbol de categorías y subcategorías
• Folksonomía
• Catalogar con palabras arbitrarias.
• Óptimo palabras claves.
• Etiquetas (también conocidos como labels o tags)
• Más natural al pensamiento humano.

17
Folksonomy

• Tag Cloud (en flof.com.ar)

18
Y dónde están las webs 2.0?

• flickr.com
• wikipedia.org
• upcoming.org
• flof.com.ar
• del.icio.us
• gmail.com
• maps.google.com

19
La cabeza de un diseñador (simplificada)
La estructura semántica no es importante
Alguien más debería preocuparse por la estructura
Lo que importa es la jerarquía visual, el resto
son detalles
20
La cabeza de un ingeniero(igual de simplificada)
Los diseñadores no entienden de documentos ricos
semánticamente
Los más importante es la semántica de los datos,
lo visual es anecdótico
Para hacer las cosas bien deberia hacer todo yo
Los diseñadores se preocupan por lo visual, ellos
deberían arreglar esos temas
21
Sinergizando...

• La idea detrás de todo esto es lograr que exista
  una correlación en el emisor y el receptor
• Lo que el autor (emisor) quiere decir
• Lo que el diseñador debe mostrar
• Lo que el ingeniero tiene que hacer
• Lo que el usuario (receptor) obtiene

22
Y entonces qué hay que hacer?

• Modelos consistentes
• El diseñador y el ingeniero (desarrollador) deben
  comprender al autor
• El usuario debe percibir lo que el autor quiso
  expresar
• Si el usario entiende, la tarea está cumplida
• Todo se trata de contenido, es decir semántica

23
Web 2.0 en Argentina
24
Web 2.0 en Argentina

• Flof (http//flof.com.ar) es la primer web 2.0 y
  el primer Google Maps Mashup de Argentina.
• Qué tiene de Web 2.0?
• Folksonomías (tag cloud)
• Geotagging mediante Google Maps
• Feeds RSS/Atom y Google Earth
• Redes sociales (red de contactos)

25
Folksonomías en flof.com.ar
26
Google Maps en flof.com.ar
27
Feeds RSS/Atom Google Earth
28
Agregación de Feeds flof.com.ar
29
Red de contactos en flof.com.ar
30
Red de contactos
31
Preguntas ?
32
Muchas Gracias!!

• Contacto
• gabriel_at_flof.com.ar
• martin_at_flof.com.ar