Buscador AJAX de imágenes en redes sociales

Sergio Rus Carrasco

http://www.flickr.com/photos/34201712@N02/3948254587

Evolución de la Web

http://www.flickr.com/photos/leecullivan/122271605/

Antes...

http://www.flickr.com/photos/visualpanic/253081627/

Antes...

Páginas web

Antes...

Páginas web

Contenidos estáticos y cerrados

Antes...

Páginas web

Contenidos estáticos y cerrados

Navegador = visor documentos

Ahora

Ahora

Aplicaciones web

Ahora

Aplicaciones web

Contenidos dinámicos (AJAX) y

abiertos (APIs)

Ahora

Aplicaciones web

Contenidos dinámicos (AJAX) y

abiertos (APIs)

Plataformas colaborativas

Ahora

Aplicaciones web

Contenidos dinámicos (AJAX) y

abiertos (APIs)

Plataformas colaborativas

Navegador = sistema operativo

Web 2.0

Blogs

Wikis

Aplicaciones web

Mashups

Social media

Web 2.0

Blogs

Wikis

Aplicaciones web

Mashups

Social media

Grafo social

http://goo.gl/z3GDm

http://www.flickr.com/photos/49503165485@N01/3976415352

Grandes generadores de contenidos

sobre todo imágenes

http://www.flickr.com/photos/generated/4994039025/

http://www.flickriver.com/photos/ansik/4425771596/

750+ millones de usuarios

30000 millones de contenidos

De media ~130 amigos

32+ millones de usuarios

6000 millones de fotografías

Acceder a esos contenidos

de una forma eficiente,

interactiva,

y proporcionando una buena

experiencia de usuario

Objetivo

http://www.flickr.com/photos/visualpanic/404347995/

Proyecto

http://www.flickr.com/photos/37803129@N00/2436481628

Frontend

APIs + AJAX + HTML5

Backend

Symfony: PHP + MySQL

http://www.extremadura21.es/?p=237

APIs usadas

Facebook Graph API

Flickr API

Google AJAX Search API

REST

http://www.flickr.com/photos/visualpanic/3192855619/

REST

Recursos

URL, HTTP

GET, POST, PUT, DELETE

HTML, XML, JSON

http://www.flickr.com/photos/visualpanic/3192855619/

REST

Recursos

URL, HTTP

GET, POST, PUT, DELETE

HTML, XML, JSON

http://www.flickr.com/photos/visualpanic/3192855619/

http://forum.lessthandot.com/viewtopic.php?f=100&t=6905

<person> <firstName>John</firstName> <lastName>Smith</lastName> <age>25</age> <address> <streetAddress>21 2nd Street</streetAddress> <city>New York</city> <state>NY</state> <postalCode>10021</postalCode> </address> <phoneNumber type="home">212 555-1234</phoneNumber> <phoneNumber type="fax">646 555-4567</phoneNumber></person>

XML

{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }

JSON

Facebook Graph API

Acceso al grafo social del usuario

Requiere autentificación

Requiere permisos de acceso

Oauth

Protocolo estándar de autorización

para acceder desde una web a los

recursos privados que un usuario tiene

en otra web

Oauth

http://www.flickr.com/photos/andivszf/4924031968/

Flickr API

Acceso a imágenes públicas

Motor de búsqueda

Flickr API

Acceso a imágenes públicas

Motor de búsqueda

Acceso a imágenes privadas

Requiere autentificación

Flickr API

Acceso a imágenes públicas

Motor de búsqueda

Acceso a imágenes privadas

Requiere autentificación

Google Search API

Acceso a imágenes indexadas por el

motor de búsqueda de Google

http://www.flickr.com/photos/daveynin/1672745911/

Web Storage API

Session History API

Almacenamiento masivo

Web Storage

Almacenamiento masivo

Entre 2 y 5 MB, según navegador

Web Storage

Almacenamiento masivo

Entre 2 y 5 MB, según navegador

Parejas clave-valor

Web Storage

Local Storage

Session Storage

Web Storage

Manipulación del historial

Session History

Manipulación del historial

Nuevo método PushState

Session History

Manipulación del historial

Nuevo método PushState

Nuevo evento PopState

Session History

Añade entradas al historial

Asocia estado (objeto) a la entrada

PushState

Disparado al cambiar historial

Devuelve el objeto almacenado

PopState

Permite modificar la URL actual sin

necesidad de recargar la página

Session History

Trabajo futuro

http://www.newmediadecisions.com/services-and-solutions

blog.sergiorus.com

twitter.com/sergiorus

linkedin.com/in/sergiorus

Contacto