Carlos Fernández Durán Manuel Molina Menéndez Tutor: Miguel Gea Megías

FINALIDAD DEL PROYECTO

Estudio sobre el desarrollo de aplicaciones en redes sociales, orientadas a la creación de un servicio de valor añadido: la geolocalización social. FINALIDAD DEL PROYECTO

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

1.INTRODUCCIÓN ÍNDICE 1.1 Objetivos planteados 1.2 Situación actual 1.1 Objetivos planteados 1.2 Situación actual

Entorno de programación bajo un modelo social, en concreto, Facebook. 1. INTRODUCCIÓN 1.1 Objetivos planteados

Estudio del desarrollo de aplicaciones sobre APIs y SDKs propias de Facebook. 1. INTRODUCCIÓN 1.1 Objetivos planteados

Desarrollo servicio valor añadido para esta comunidad: Geolocalización social Complementada con la API de Google Maps. 1. INTRODUCCIÓN 1.1 Objetivos planteados

Web 2.0 y Redes Sociales El uso de internet Geolocalización Social 1. INTRODUCCIÓN 1.2 Situación actual

Web 2.0 y Redes Sociales El uso de internet Geolocalización Social 1. INTRODUCCIÓN 1.2 Situación actual

Web 2.0 y Redes Sociales El uso de internet Geolocalización Social 1. INTRODUCCIÓN 1.2 Situación actual

Web 2.0 y Redes Sociales El uso de internet Geolocalización Social 1. INTRODUCCIÓN 1.2 Situación actual

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

2. DESARROLLO APLICACIONES EN FACEBOOK ÍNDICE 2.1 Social Graph: el núcleo de Facebook 2.2 Graph API: Acceso a los datos 2.3 Herramientas y SDKs 2.1 Social Graph: el núcleo de Facebook 2.2 Graph API: Acceso a los datos 2.3 Herramientas y SDKs

2. DESARROLLO APLICACIONES EN FACEBOOK 2.1 Social Graph: el núcleo de Facebook Red de elementos de facebook conectados entre relaciones. Elementos:  Usuarios  Páginas  Imágenes y Vídeos  Aplicaciones Relaciones:  Amigo  Me gusta  Etiqueta  Permisos

2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Interfaz de conexión entre una aplicación y los datos de facebook.

2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Consultas de datos Consultas sobre elementos (objetos) Todos los elementos en facebook tienen un ID único { "id": "220439", "name": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": " "username": "btaylor", "gender": "male", "locale": "en_US" } { "id": "220439", "name": "Bret Taylor", "first_name": "Bret", "last_name": "Taylor", "link": " "username": "btaylor", "gender": "male", "locale": "en_US" }

2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Consultas de datos Consultas sobre elementos relacionados { "data": [ { "name": "Demo Geolocaliza", "id": " " }, { "name": "Manu Molina", "id": " " }, { "name": "Carlos Fern\u00e1ndez", "id": " " }] } { "data": [ { "name": "Demo Geolocaliza", "id": " " }, { "name": "Manu Molina", "id": " " }, { "name": "Carlos Fern\u00e1ndez", "id": " " }] }

2. DESARROLLO APLICACIONES EN FACEBOOK 2.2 Graph API: Acceso a los datos Autenticación Facebook utiliza el protocolo oAuth 2.0 para la autenticación y autorización. Para que una aplicación acceda a los datos de un usuario necesita un token de acceso, previa confirmación del usuario.

2. DESARROLLO APLICACIONES EN FACEBOOK 2.3 Herramientas y SDKs Sitios WebAplicaciones Aplicaciones Móviles JavaScript SDK PHP SDK Social Plugins Android SDK iOS SDK

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

3. GEOLOCALIZACIÓN Y GOOGLE MAPS ÍNDICE 3.1 Geolocalización 3.2 Métodos de geolocalización 3.3 Utilidades de Google Maps 3.4 Desarrollo sobre API Google Maps 3.1 Geolocalización 3.2 Métodos de geolocalización 3.3 Utilidades de Google Maps 3.4 Desarrollo sobre API Google Maps

Determina el posicionamiento de un objeto en un sistema de coordenadas. En la actualidad además de en dispositivos móviles, podemos geolocalizar un equipo a través de su navegador html5: API de geolocalización W3C 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.1 Geolocalización

3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización

3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización Gelolocalización sin GPS: servidores de localización wifi Base de datos con información de ubicación de redes wifi, identificadas por la dirección MAC del punto de acceso (skyhook). Origen de los datos:  Recorrido en coche por zonas (streetview).  Auto actualización a través de cada conexión.

3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización Gelolocalización sin GPS: servidores de localización wifi

W3C Geolocation: 1. Permiso del navegador para georreferenciar Navigatior.geolocation() 2. Obtiene las coordenadas de ubicación navigator.geolocation.getCurrentPosition() 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.2 Métodos de geolocalización

3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.3 Utilidades de Google Maps -Visualización y manipulación de mapas. -Superposición de marcas e información sobre los mapas. -Código libre. -Permite trabajar con coordenadas geográficas obtenidas en la geolocalización. -Forma intuitiva de representar ubicaciones.

MAPS JAVASCRIPT API -Librería para la visualización de mapas en páginas web. -Rápido y eficiente para su ejecución en navegadores. -Proporciona utilidades para la manipulación de mapas y para añadir contenido al mismo. 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.4 Desarrollo sobre API Google Maps

MAPS JAVASCRIPT API 3. GEOLOCALIZACIÓN Y GOOGLE MAPS 3.4 Desarrollo sobre API Google Maps CARGA API EN NAVEGADOR DIBUJAR MAPA SUPERPONER MARCAS DE UBICACIÓN

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

4. APLICACIÓN DEMOSTRATIVA ÍNDICE 4.1 Objetivos y requisitos 4.2 Arquitectura del sistema 4.3 Objetos básicos 4.4 Funcionalidades 4.1 Objetivos y requisitos 4.2 Arquitectura del sistema 4.3 Objetos básicos 4.4 Funcionalidades

Objetivo: Desarrollo de una aplicación integrada en facebook que haga uso de la geolocalización como valor añadido utilizando las APIs y herramientas estudiadas. Requisitos: -Integración en Facebook. -Georreferenciar ubicación del usuario. -Georreferenciar amigos del usuario. -Compartir ubicación a través de facebook. -Mostrar información contenida en facebook. -Mostrar todos los datos a través de mapas. 4. APLICACIÓN DEMOSTRATIVA 4.1 Objetivos y requisitos

Modelo cliente / servidor: (esquema) 4. APLICACIÓN DEMOSTRATIVA 4.2 Arquitectura del sistema CLIENTE SERVIDOR

Checkin (Visitas): Representa una visita del usuario a una localización de Facebook Places. El usuario y la página están conectados por una relación denominada también checkin. Información contenida: -Usuarios que hacen el checkin o están etiquetados. -Nombre y geolocalización del lugar. -Aplicación con la que se hizo. 4. APLICACIÓN DEMOSTRATIVA 4.3 Objetos básicos

Marcas de posición:  Objeto con información de geolocalización.  Se muestra con un icono dibujado sobre el mapa en la ubicación que indica.  Icono personalizable.  Se vincula a una ventana de información extra en contenido html. 4. APLICACIÓN DEMOSTRATIVA 4.3 Objetos básicos

Solicitud de permisos / autenticación: Comprueba si un usuario está conectado a Facebook y conectado a la aplicación. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades FB.getLoginStatus(function(response) { if (response.authResponse) { // Está conectado, se inicia la aplicación } else { // No está logeado o conectado a la aplicación //Redirigir a inicio sesión/solicitud de permisos } }); FB.getLoginStatus(function(response) { if (response.authResponse) { // Está conectado, se inicia la aplicación } else { // No está logeado o conectado a la aplicación //Redirigir a inicio sesión/solicitud de permisos } });

Mi ubicación: -Obtención de la posición del usuario mediante la API de geolocallización W3C. -Añadir icono de usuario al mapa en su posición. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades if (navigator.geolocation) {// Intenta la geolocalización W3C navigator.geolocation.getCurrentPosition(function(position){ //Crear y posicionar marca de usuario}); } else if (google.gears) {//Si no, intenta mediante google gears geo.getCurrentPosition(function(position) { //Crear y posicionar marca de usuario}); } else {//No se encuentra la ubicación del usuario} if (navigator.geolocation) {// Intenta la geolocalización W3C navigator.geolocation.getCurrentPosition(function(position){ //Crear y posicionar marca de usuario}); } else if (google.gears) {//Si no, intenta mediante google gears geo.getCurrentPosition(function(position) { //Crear y posicionar marca de usuario}); } else {//No se encuentra la ubicación del usuario}

Compartir mi ubicación: -El usuario elige entre los sitios registrados en Facebook places más cercanos. -Crea una entrada de visita (checkin) en Facebook con el lugar seleccionado. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades function viewPlaces() { // llamada a Graph API con una búsqueda de lugares centrados en la ubicación actual FB.api('search?type=place&center=' + initialLocation.lat() + ','+ initialLocation.lng(), function(response) { //Crear marca para cada lugar obtenido }}); } function publishCheck(placeID) { // POST a Graph API con los datos del checkin FB.api('/me/checkins', 'post', { place : placeID, coordinates : { //lat y long}}); } function viewPlaces() { // llamada a Graph API con una búsqueda de lugares centrados en la ubicación actual FB.api('search?type=place&center=' + initialLocation.lat() + ','+ initialLocation.lng(), function(response) { //Crear marca para cada lugar obtenido }}); } function publishCheck(placeID) { // POST a Graph API con los datos del checkin FB.api('/me/checkins', 'post', { place : placeID, coordinates : { //lat y long}}); }

Mis amigos: -Muestra marcas de la última ubicación chequeada por cada uno de nuestros amigos. -Cada marca muestra dónde, cuándo, con quién y con qué aplicación se realizó el checkin. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades function getFriendsCheckins() { // Obtenemos el listado de amigos FB.api('me/friends', function(response) { //Para cada amigo se crea una marca en el mapa de su último checkin }); } function getFriendsCheckins() { // Obtenemos el listado de amigos FB.api('me/friends', function(response) { //Para cada amigo se crea una marca en el mapa de su último checkin }); }

Cercanos: -Igual que en Mis Amigos mostrando sólo las marcas más cercanas a la posición del usuario. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades //Cálculo de la distancia google.maps.geometry.spherical.computeDistanceBetween(initialLocation, posicion); //Cálculo de la distancia google.maps.geometry.spherical.computeDistanceBetween(initialLocation, posicion);

Historial: -Muestra marcas de todos los checkins realizados por el usuario. -Cada marca muestra dónde, cuándo, con quién y con qué aplicación se realizó el checkin. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades function getMeCheckins() { // Llamada a Graph API para obtener los checkins del usuario activo (me) FB.api('me/checkins', function(response) { //Para cada lugar se crea una marca. }; } function getMeCheckins() { // Llamada a Graph API para obtener los checkins del usuario activo (me) FB.api('me/checkins', function(response) { //Para cada lugar se crea una marca. }; }

Invitar: -Permite enviar solicitudes de aplicación de Facebook a los amigos seleccionados. 4. APLICACIÓN DEMOSTRATIVA 4.4 Funcionalidades function inviteFriends() { FB.ui({ method : 'apprequests', message : ‘xxx', data : ‘xxx' }); } function inviteFriends() { FB.ui({ method : 'apprequests', message : ‘xxx', data : ‘xxx' }); }

1.INTRODUCCIÓN 2.DESARROLLO APLICACIONES EN FACEBOOK 3.GEOLOCALIZACIÓN Y GOOGLE MAPS 4.APLICACIÓN DEMOSTRATIVA 5.CONCLUSIONES ÍNDICE

5. CONCLUSIONES  Redes sociales -Rápida difusión de la información. -Gran “base de datos” en continua actualización. -Aplicaciones personalizadas.  Desarrollo sobre APIs y utilización de SDKs. -Reducción en tiempo de desarrollo. -Continuo crecimiento de las funcionalidades ofrecidas.  Geolocalización. -Crecimiento del uso de la georreferencia, extendiéndose a equipos de escritorio. -Múltiples aplicaciones personales y comerciales.