Post on 14-Oct-2020
gTweetMap,
una eina per a la localització dels moviments socials
Treball de recerca de Batxillerat
Pseudònim: Monsieur Cousteau
Índex
1. Introducció ............................................................................................... 3
2. Conceptes previs ..................................................................................... 6
2.1. La geolocalització ............................................................................ 6
2.2. Les xarxes socials ............................................................................ 7
2.2.1. API (Application Programming Interface) ........................................ 8
2.3. Els llenguatges de programació per a entorn web ........................... 9
3. Projecte ................................................................................................... 11
3.1. Estudi de mercat ............................................................................ 11
3.2. Disseny i arquitectura del sistema ................................................. 12
3.3. Implementació ................................................................................ 18
3.3.1. Obtenint la Search API de Twitter ................................................. 18
3.3.2. Mostrant el mapa ........................................................................... 21
3.3.3. Mostrant resultats al mapa ............................................................ 22
3.3.4. Guardant resultats a la base de dades .......................................... 26
3.4. Disseny gràfic ................................................................................ 26
3.4.1. Creant una pàgina d’inici ............................................................... 27
3.4.2. Ajustant les dues pàgines .............................................................. 29
3.4.3. Publicació de l’aplicació a Internet ................................................ 30
3.4.4. Cerca del logotip ........................................................................... 31
3.5. Exemples d’ús ................................................................................ 32
Cerca de missatges escrits per un usuari ...................................... 32
Cerca de hashtags de fenòmens socials ...................................... 32
Cerca de missatges mencionant un usuari concret ....................... 33
Cerca de trending topics a la xarxa social ..................................... 33
Cerca per qualsevol text ................................................................ 33
3.6. Possibles ampliacions .................................................................... 33
4. Conclusions ........................................................................................... 35
5. Referències bibliogràfiques .................................................................. 37
6. Annex: Projecte presentat a 52° North Innovation Prize 2012 ........... 39
7. Agraïments ............................................................................................. 53
3
1. Introducció
El món de la informació evoluciona cada vegada més ràpid i des de la creació
d’Internet aquesta evolució s’ha accelerat encara més. Com a conseqüència, la
quantitat d’informació generada diàriament és cada vegada més gran. Per fer-nos-
en una idea, la quantitat d’informació que cada dia es mou per la xarxa seria
equivalent a 168 milions de DVD.
Però si volem parlar d’Internet i la seva evolució, no podem obviar les xarxes
socials. Elles són les veritables culpables del seu boom, i les que han provocat que
el volum d’informació augmenti moltíssim en pocs anys. Aquestes xarxes socials
han apropat Internet al públic d’arreu del món i han donat les eines per tal de
comunicar-nos amb facilitat d’un extrem a l’altre del planeta. L’èxit ha estat tal, que
més de 200 milions de persones les utilitzen diàriament. Per tots aquests motius
podem dir que les xarxes socials han revolucionat Internet i el món.
Si ens hi fixem però, són eines que l’únic que van fer en el seu dia va ser aprofitar
les possibilitats que permetia Internet per oferir els serveis d’aquest, d’una manera
ordenada i intel·ligible. Degut a aquesta capacitat per ordenar les dades, i no
saturar la gent amb un excés d’informació, va fer possible que les xarxes socials
acabessin triomfant.
Ara però, fins i tot aquestes xarxes socials comencen a saturar-se. Per exemple, el
número de fotos diàries que s’envien al servidors de Facebook, la xarxa social més
utilitzada actualment, és de 250 milions. En el cas que les imprimíssim totes i les
apiléssim, superarien en alçada la torre Eiffel.
4
Dit això podem interpretar que la societat, cada cop més, utilitza Internet, però la
principal necessitat ara mateix és la de poder organitzar tota la informació que es
genera, i presentar-la d’una forma clara i entenedora.
Seguint en aquesta línia d’evolució actual, he cregut que era adequat ubicar el meu
treball de recerca dins d’aquest àmbit de millora en l’ordenació i presentació de la
informació.
L’objectiu d’aquest treball és elaborar una eina que permeti la ubicació
geogràfica de diferents fenòmens socials, mitjançant la geolocalització
d’informació de les xarxes socials a partir de la cerca d’un text qualsevol.
Sempre m’ha interessat el món de la tecnologia, dels ordinadors i, especialment,
d’Internet. La curiositat pel món de la informàtica és una de les meves debilitats i
alhora el meu punt més fort, ja que va ser gràcies a això que vaig decidir endinsar-
me en el món d’Internet. Una de les meves primeres incursions en aquest món va
ser la creació del meu primer bloc1, utilitzant una plataforma gratuïta, i a partir
d’aquí vaig començar a crear webs amb diverses temàtiques, aprofitant l’avinentesa
per provar diferents eines gratuïtes. Per seguir avançant vaig fer la traducció
d’alguna de les meves pàgines web a diversos idiomes (català, castellà i anglès).
Més endavant vaig crear un bloc que va servir per acollir uns treballs de l’escola i
vaig crear una pàgina web de jocs que actualment compta amb més de 150 visites
diàries (tot un èxit per a mi). Fins aquest moment sempre he estat utilitzant
plataformes de tercers per elaborar i publicar webs, per tal de facilitar-me la feina.
1 G-blog, reformat, sense actualitzacions recents: http://casassaez.wordpress.com
5
Quan em va sorgir la necessitat d’escollir un tema per fer el treball de recerca vaig
pensar que era l’ocasió idònia per començar a dissenyar aplicacions web des de
zero, aprenent a estructurar-les i programar-les adequadament.
Tenint en compte que una de les coses que més m’agraden d’Internet són les
xarxes socials, vaig plantejar a l’escola la possibilitat d’enfocar el meu treball en el
desenvolupament d’una eina que permetés la geolocalització d’informació que es
troba a les xarxes socials. Poder fer un projecte amb una tecnologia que mai abans
havia utilitzat, endinsant-me en el món del desenvolupament d’aplicacions web que
per a mi resultava totalment desconegut, era tot un repte, més tenint en compte que
hi afegíem el component geogràfic. Tot això, juntament amb la curiositat de saber
què hi havia al darrera d’Internet, és el que em va fer decidir a l’hora de triar el tema
d’aquest treball.
D’altra banda, un cop escollit i iniciat el treball, vaig assabentar-me que s’havia
realitzat una convocatòria de projectes basats en les tecnologies de la
geolocalització, adreçat a estudiants de tota Europa. Tot i que inicialment el premi
estava centrat en els projectes d’estudiants universitaris, vaig decidir presentar-
m’hi, ja que vaig considerar que era un altre repte i, sobretot, era una gran
oportunitat. El fet de presentar el projecte en aquesta convocatòria, va fer que
l’estructura del treball s’hi hagués d’adaptar, ja que hi havia uns apartats mínims
que s’havien de complir. També va influir el fet que s’hagués de redactar en anglès
o en alemany. En el meu cas vaig optar per l’anglès. El document va ser acceptat i
actualment està pendent de valoració. El text íntegre presentat, que porta de títol
“gTweet, a Tool for the Geolocation of Social Movements”, s’adjunta a l’annex
d’aquest document.
6
2. Conceptes previs
2.1. La geolocalització
La geolocalització és el procés mitjançant el qual atorguem unes coordenades de
posició a un objecte o persona per obtenir la seva situació exacta. Això es sol fer
mitjançant les coordenades geogràfiques, que usualment s’obtenen mitjançant els
satèl·lits GPS. Així doncs la geolocalització actualment s’utilitza per tal de poder
situar en un context real els missatges que circulen per Internet, i d’aquesta manera
poder-ne conèixer la procedència.
Com he dit abans, la geolocalització es serveix de les dades que s’obtenen
mitjançant el sistema GPS. Aquest sistema es basa en el funcionament de 21
satèl·lits, en que l’usuari rep amb molta precisió la seva situació geogràfica. Per tal
de realitzar la localització, el sistema consta de dues parts: una part al costat de
l’usuari, i una altra part que són els satèl·lits. El procés es realitza al dispositiu de
l’usuari, el qual utilitza els senyals emesos pels satèl·lits per tal de localitzar-se a si
mateix mitjançant complexos processos matemàtics de triangulació a partir de la
posició del satèl·lit.
En els últims anys, l’ús de la geolocalització ha augmentat, gràcies a la integració
directa amb les xarxes socials. Això, afegit a la integració d’aquestes als terminals
mòbils, ha fet que cada vegada la geolocalització sigui una eina més important en el
món actual. Els serveis que aprofiten aquesta tecnologia han proliferat ràpidament,
fet que ha propiciat que les dades geogràfiques siguin cada vegada més abundants
a Internet.
7
2.2. Les xarxes socials
Les xarxes socials són estructures socials que utilitzen Internet per tal de
connectar diferents individus entre si. Les seves funcions bàsiques són les de poder
crear un perfil que servirà com a imatge davant la resta d’individus que formen part
de la xarxa, la capacitat de relacionar les persones ja sigui mitjançant interessos o
activitats comunes i, per últim, la capacitat d’interacció per mitjà de diferents eines
entre els que formen la xarxa.
Les xarxes socials operen doncs en tres àmbits, els quals són anomenats les 3C:
Comunicació (ens ajuda a posar en comú coneixements)
Comunitat (ens ajuda a trobar i integrar-nos en comunitats)
Cooperació (ens ajuda a fer coses junts)
Les xarxes socials, tal i com he esmenat anteriorment, són les grans productores de
contingut a Internet a nivell mundial. Els usuaris d’aquestes xarxes intercanvien
continguts entre ells cada dia, això pot comportar un nivell de continguts excessius.
Aquest excés fa que sigui complex de trobar la informació que busquem, i com a
conseqüència fa molt difícil la possibilitat d’estudiar aquestes xarxes.
Aquestes xarxes les podem classificar en funció de diferents aspectes. Segons al
públic al que estan destinades, les podem distingir en dues tipologies:
Horitzontals: orientades a tot tipus d’usuari, i sense un objectiu molt definit
més enllà de comunicar i apropar als seus components. Facebook i Twitter
en són dos exemples.
8
Verticals: orientades a un públic més específic, aspiren a recollir un número
d’usuaris al voltant d’un tema més o menys concret. En són exemples
Last.fm LinkedIn i Pinterest.
Només ens centrarem en les horitzontals, aquelles que tenen un major ús
actualment per la societat moderna, i que tenen un ús de xarxa de comunicació,
dins la societat, més clara. És d’aquesta forma que podem afirmar que les xarxes
socials horitzontals, en tenir dins seu molts usuaris, pateixen un excés d’informació.
API (Application Programming Interface)
La majoria d’utilitats o aplicacions de mercat incorporen el que anomenem APIs,
que són llibreries de programació que permeten als desenvolupadors utilitzar
serveis de diferents proveïdors de forma fàcil. Hi ha APIs per al tractament de la
informació de les xarxes socials i també n’hi ha d’altres específiques pel tractament
de mapes. Per posar un exemple, una aplicació que realitzi una cerca dins la xarxa
social estarà utilitzant una API per accedir a la xarxa social i realitzar aquesta
consulta.
D’aquesta manera les aplicacions web controlen l’accés a la informació que s’obté
des de l’exterior. A més es simplifica la tasca que han de realitzar els programadors
externs que volen interaccionar amb la xarxa.
El funcionament d’aquestes APIs sol ser bastant simple. L’usuari realitza una
petició, aquesta interacciona amb les funcionalitats de l’aplicació a través de la
interfície de programació (API) i n’obté la informació necessària. Finalment
l’aplicació propietària mostra la informació obtinguda.
9
2.3. Els llenguatges de programació per a entorn web
Per tal d’accedir a una pàgina web necessitem dos components. Un és el servidor,
on la pàgina està guardada en forma de text base. Per altra banda hi ha l’usuari, on
el programa des del qual accedeix a Internet (navegadors), busca l’arxiu on es troba
el text, i l’interpreta.
Així doncs necessitem escriure les pagines web en un llenguatge que els diferents
navegadors puguin entendre i d’aquesta forma ens les mostrin de la forma que
volem. Per tant, els llenguatges web són els que ens permeten veure les pagines
web tal i com les veiem, i no com una successió de text sense sentit.
Dintre d’aquests llenguatges hi ha diverses tipologies:
Llenguatges de navegador: Són aquells llenguatges que són interpretats
directament des del navegador de l’usuari. Gairebé totes les pagines web
contenen fragments del llenguatge HTML. És un llenguatge molt freqüent, i
a la vegada bàsic, gairebé és un codi universal d’Internet. D’altres exemples
en són l’XML i el JavaScript. Aquests dos últims realitzen funcions més
avançades que el primer.
Llenguatges de servidor: Són llenguatges que s’interpreten al servidor, just
abans d’enviar el fitxer a l’usuari. Aquests llenguatges permeten una
interacció amb l’usuari molt gran, ja que permeten enviar fitxers
personalitzats en funció del que es demana. D’aquests llenguatges, un dels
més utilitzats és el PHP.
10
En el projecte he utilitzat diferents
llenguatges web. Per una banda
l’HTML, que és la base de totes les
webs, ja que sense base no
funcionaria. Per altre banda també
necessito utilitzar-ne d’altres per crear
la lògica de la programació. Dintre d’aquests, n’hi ha les dues tipologies ja
descrites.
Així doncs els llenguatges web serveixen per controlar el comportament d'una
màquina, el servidor o el navegador. Aquests llenguatges tenen una sèrie de regles
sintàctiques i semàntiques estrictes que cal seguir per escriure un programa
informàtic, i que en descriuen l'estructura i el significat respectivament. Per tant
podríem dir que el seu funcionament és similar al de qualsevol llengua.
Figura 1: Logotip del llenguatge PHP
11
3. Projecte
3.1. Estudi de mercat
A Internet hi ha milers d’idees que sorgeixen a
cada moment. Aquesta és una realitat que
dificulta l’originalitat dels projectes nous. Eines
que utilitzen xarxes socials, com per exemple
Twitter o Facebook, n’hi ha milers ja que
actualment són les que tenen més usuaris
actius. Si ens endinsem en el món més
específic de la geolocalització, aquest nombre
d’eines disminueix sensiblement. Un exemple d’eina que ens podem trobar es el
d’una aplicació capaç d’indicar-nos els països de procedència dels nostres
seguidors.
Després d’haver revisat les diferents aplicacions actualment disponibles, vaig
adonar-me que hi havia quelcom nou i diferent que mancava en aquest ventall
d’opcions que és Internet. El projecte que pretenc desenvolupar, es basa en la
cerca directa d’un text en una xarxa social. Aquesta cerca ens ha de permetre
incorporar marcadors per tal de fer-la més eficient. Això farà que l’aplicació sigui
més específica a l’hora de mostrar els resultats, i només ens mostrarà la informació
cercada, sense informació addicional innecessària. A més, el fet que aquests
resultats es presentin en un mapa mundi, ajudarà a que el resultat sigui molt més
net, fet que en facilitarà la lectura.
Figura 2: Logo de Twitter
12
L’eina pot tenir una bona sortida al mercat, ja que hi pot haver molts usuaris
potencials, derivat de l’interès de poder estudiar la localització dels fenòmens
socials més actuals. A més, ens pot ajudar a determinar els possibles orígens
d’aquests fenòmens, i alhora ens pot permetre estudiar la seva propagació o
l’organització social que se’n fa.
A tot això li hem d’afegir que fer la cerca directament a una xarxa social multiplica
les possibles aplicacions d’aquesta aplicació. Per posar un exemple, es poden fer
cerques de les posicions des d’on una persona ha enviat missatges, el que pot
servir com una cronologia de viatges d’una persona. També pot servir per situar les
ubicacions de la gent que envia missatges a algun usuari concret, el qual podria ser
útil per estudiar d’on són els seguidors d’una determinada persona. Així doncs, les
aplicacions que se’n deriven poden ser molt variades, ja que les opcions són
múltiples.
El que es pot arribar a qüestionar és la privacitat de les persones, però aquest fet
no ens hauria de preocupar especialment en aquest projecte, ja que la informació a
tractar ja està disponible a Internet i són els usuaris que decideixen posar-l’hi per
pròpia voluntat.
3.2. Disseny i arquitectura del sistema
En aquesta fase he realitzat el disseny i anàlisi del projecte per tal de determinar-ne
les funcionalitats i resultats. Alhora he estudiat les possibilitats en quant a eines i
llibreries a utilitzar, el qual acaba de fixar les funcionalitats que es poden dur a
terme durant el procés de desenvolupament.
13
Per realitzar aquest treball primer ha calgut prendre diferents decisions per tal de
concretar com fer-lo i quines eines de les moltes disponibles calia utilitzar, per tal
d’iniciar el període d’aprenentatge.
La primera decisió presa va ser en el moment de concretar si l’aplicació havia de
funcionar en el servidor o en el client. Si
el programa s’executa en el client
(ordinador des d’on ens connectem a
Internet), el funcionament s’ha de basar
en el que el navegador interpreta. Per
contra, si el programa s’executa en el
servidor, de manera que el programa treballa des del mateix lloc on està
emmagatzemat, l’ordinador client descarrega i ens mostra el resultat en forma de
pàgina web.
Després de valorar pros i contres, m’he decantat per un funcionament mixt (una
part al client i una altra al servidor), bàsicament derivat de les funcionalitats que vull
aconseguir. Inicialment em centraré de forma més extensa en el funcionament al
servidor ja que és on funcionarà la part més bàsica i important del programa.
He optat pel funcionament en el servidor per tot el que és la lògica del programa, ja
que en tractar-se d’un treball de recerca m’interessava estudiar i provar el màxim de
components. En aquest sentit, aquesta arquitectura sembla més complexa pel fet
d’haver de tenir en funcionament un servidor web instal·lat de forma local. També
m’he decantat pels llenguatges de servidor pel fet que, a més a més, el projecte
pretén emmagatzemar en una base de dades les cerques fetes, i així poder mostrar
més endavant les més utilitzades. Per tal d’aconseguir aquesta funcionalitat,
Figura 3: Logotip MySQL
14
necessitava una integració amb una aplicació de base de dades. Vaig escollir
MySQL ja que és la més estesa, gratuïta i una de les més utilitzades actualment.
Així doncs em vaig decantar per l’opció dels llenguatges de servidor per tal que
s’integressin perfectament a MySQL.
Dintre de la programació en el servidor he hagut de decidir quin llenguatge utilitzar.
Entre les múltiples opcions disponibles (Ruby, Perl, PHP, Phyton...) m’he decantat
per PHP en la seva versió 5, ja que és el més utilitzat actualment a nivell de
servidors i per ser el que és més usual de trobar instal·lat per defecte en els
servidors web.
Tal com he dit, el funcionament és mixt, ja que la vessant geogràfica, o sigui la part
de programació que ha de dibuixar el mapa i la geolocalització de la informació,
l’execució es fa en el propi client. En aquest cas, el llenguatge escollit és el
Javascript, un del llenguatges més utilitzats actualment en la programació web a
nivell de client.
Sortim de la vessant més tècnica per entrar en un aspecte d’àmbit social, però no
per això menys important. El treball ha d’utilitzar una xarxa social per extreure’n la
informació, i aquí sí que es pot dir que hi ha moltes opcions. Descartant les xarxes
socials més petites, pel fet de necessitar un flux de dades disponibles i
actualitzades en tot moment, ens queda decidir entre les que són les gran xarxes
socials del moment: Twitter i Facebook. La decisió s’ha vist influenciada pel tipus de
continguts que podem trobar en cada xarxa social. El fet que a Twitter puguem
trobar més continguts d’actualitat i se’n parli més, ha fet que aquesta xarxa
aparegui com a una molt bona opció. Però, si realment hi va haver una cosa que ha
fet decantar la balança a favor de Twitter, ha estat l’abundància de llibreries per a
15
desenvolupament que disposa, i especialment perquè conté una llibreria específica
per a la cerca, cosa que fa que sigui perfecte per donar compliment a l’objectiu que
es pretén desenvolupar.
Finalment, hi ha un últim apartat a considerar: l’aspecte geogràfic. En aquest
sentit em van informar de l’existència de les Infrastructures de Dades Espacials
(IDE), que ofereixen diferents recursos
a través de portals d’informació
geogràfica, entre els quals hi ha
diferents visors, però també serveis
web, que ofereixen informació
geogràfica. Endinsant-me en
aquest mon vaig descobrir que hi ha un marc normatiu que potser calia tenir en
compte. La legislació europea vigent (Directiva 2007/2/CE) preveu la creació d'una
Infrastructura de Dades Espacial que permet, entre d'altres, la visualització de
mapes (cartografia) de forma homogènia per a tota la Comunitat Europea a través
de serveis web, mitjançant WMS (Web Map Service), servei web estàndard de
l’Open Geospatial Consortium (OGC).
Aquesta normativa m’ha portat a esbrinar la tasca portada per l’OGC, organització
internacional sense ànim de lucre destinada a la definició d’especificacions en
l’àmbit geogràfic. Aquesta organització ha estat l’encarregada de definir uns
protocols únics per tal de facilitar la interoperabilitat entre els sistemes, aconseguint
posar la informació geogràfica a l’abast de tot el món, a través de serveis web
d’informació geogràfica (geoserveis).
Figura 4: Imatge logo Open geospatial consortium
16
El protocol més consolidat és el WMS (Web Map Service), a través del qual
s’aconsegueix la visualització de la informació geogràfica en format imatge. Però,
no obstant la bondat dels estàndards i els bons propòsits de la normativa vigent, no
he trobat cap servei WMS que ofereixi cobertura mundial. Per aquest motiu m’he
hagut de decantar per les opcions que ofereixen Google Maps i Open Street Map.
Tant Google Maps com Open
Street Map utilitzen el mateix
sistema de coordenades
cartogràfiques mundial WGS84
(projecció Mercator que pretén
representar la superfície esfèrica
terrestre sobre una superfície cilíndrica tangent a l’equador, que al desenganxar-se
genera un mapa terrestre pla). D’entre els dos serveis finalment m’he decidit per
Google Maps, donada la seva cobertura a tot el món, ja que Open Street Map, en
tractar-se d’un projecte col·laboratiu, sense ànim de lucre, avui per avui té menys
qualitat que Google Maps, no disposa de fotografies per satèl·lit i té problemes
de cobertura en algunes zones on no hi ha voluntaris per treballar en el projecte.
Malgrat Google Maps no és un projecte de dades obertes, cal tenir en compte que
utilitza i ha definit formats que estan dins els estàndards OGC, com és el cas de
kml. Per tant, crec que actualment Google Maps és la millor opció per aquest
projecte.
Un cop triades les eines a utilitzar, a continuació cal definir la seva arquitectura.
Com que el projecte es basa en una arquitectura client-servidor, això significa
que el client, des d’un navegador web, fa una petició al servidor. En el nostre cas el
client li envia la cerca que desitja visualitzar en un mapa.
Figura 5: Google Maps Logo
17
Figura 6: Diagrama del funcionament del programa
Quan aquesta petició arriba al servidor web, hi ha un programa PHP que realitza
una petició a Twitter utilitzant la Search API (Application Programming Interface)
d’aquesta xarxa, la qual respon amb un fitxer JSON que conté tots els resultats de
la cerca. Mentrestant també s’emmagatzema la cerca en una base de dades
MySQL. Llavors, el servidor interpreta el fitxer generat i descarta els textos no
geolocalitzats. Finalment transforma la resposta a llenguatge HTML i l’envia al
client. Aquest interpreta el codi rebut i realitza una petició a Google Maps mitjançant
la seva API, incloent en la petició el posicionament dels textos localitzats que ha
tractat el servidor. I per últim Google Maps retorna el mapa amb els resultats de la
cerca a Twitter inclosos, que finalment són mostrats al client a través del navegador
web.
Client
Servidor
18
3.3. Implementació
La implementació ha estat per a mi una de les parts més important del projecte,
donat que el desenvolupament d’aplicatius web se’m presentava com un gran repte,
ja que era totalment nou per a mi. Es tractava de fer la programació de l’eina
perquè realitzés les funcions que ja he especificat a l’apartat anterior.
Per tal d’afrontar aquesta fase, vaig haver de passar per una etapa de formació.
Primer de tot vaig fer un curs de PHP, on vaig aprendre les funcions bàsiques del
llenguatge. Durant un bon temps el vaig estar fent per tal d’aprendre a programar
en PHP de forma fluida, i així descobrir de quina forma podia realitzar l’aplicació.
Gràcies a aquest curs he aconseguit aprendre a programar en PHP, cosa que
anteriorment no sabia fer. Aquesta part va ser una de les més llargues del projecte
ja que el temps que hi vaig dedicar va ser molt extens.
En aquest apartat es farà un resum de com s’han dut a terme tant la programació,
com les proves de les llibreries de Twitter i Google Maps.
Per tal de realitzar les proves i penjar-ne els resultats a Internet, actualment disposo
d’un servidor web de prova. Després d’haver passat per la fase d’aprenentatge de
PHP, he realitzat diferents proves amb la Search API de Twitter i l’API de Google
Maps v3 que he utilitzat pel projecte. Posteriorment també em vaig dedicar a donar
una imatge gràfica a l’aplicació.
Obtenint la Search API de Twitter
Per tal de desenvolupar el projecte he hagut de treballar en diverses direccions per
tal de fer funcionar l’eina totalment.
19
Primer vaig començar desenvolupant un codi PHP capaç d’accedir a la Search API
de Twitter i retornar els seus resultats de forma que els entengués el mateix PHP.
Per tal de fer això vaig fer que el PHP obtingués un fitxer JSON de resultats i el
descodifiqués mitjançant dues funcions del mateix PHP.
Figura
7: Fragment de codi PHP que obté el JSON i el canvia de format
El format JSON es un estàndard obert, molt utilitzat per tal d’intercanviar dades de
forma llegible per humans. Pot contenir dades simples i llistes associatives,
anomenades objectes, la qual cosa el fa perfecte per tal d’obtenir informació i
transmetre-la per Internet. Deriva del Javascript.
Al principi no trobava la forma de realitzar aquest procés i per això vaig haver d’anar
provant diverses formes i combinacions d’ordres per tal d’aconseguir el que volia. A
partir d’aquí, un cop que els resultats estaven en un format que el PHP podia
interpretar, la següent part va estar dedicada a fer que els interpretés de forma
correcte. D’aquesta forma a partir d’aquesta base, el desenvolupament va continuar
en l’aspecte d’aconseguir descartar els textos sense coordenades.
Com a conseqüència vaig agilitar el procés, ja que inicialment s’obtenien una gran
quantitat de resultats. Això va ser gràcies a que ja només processava la informació
que necessitava. Per tal d’aconseguir-ho vaig fer un bucle per obtenir sols els textos
amb coordenades.
$page="http://search.twitter.com/search.json?q=".urlencode($search
)."&result_type=mixed&rpp=100&include_entities=true";
$resultat_json=@file_get_contents($page);
$twi_sch= json_decode ($resultat_json);
20
Figura 8 :Fragment de codi PHP obté les coordenades de tot els resultats geolocalitzats
Tal i com he comentat, fins aquí el codi només obtenia un sol fitxer, el qual conté
uns 100 resultats, el problema es que els tweets amb dades geogràfiques son pocs.
Per tant vaig haver d’escriure un codi que obtingués més fitxers i realitzés el bucle
altre cop per cada pàgina que obtingués. Per tal de cercar en la següent pàgina, el
PHP obtenia del JSON un enllaç que inclou i que porta al fitxer on continuen els
resultats.
Figura 9: Fragment de codi PHP en que s’obté el fitxer JSON en funció de si sap la pagina següent
Això va provocar que la pàgina funcionés més lenta degut a la gran quantitat de
resultats que havia d’analitzar (uns 5.000 aproximadament). Per tal de solucionar el
problema, vaig reduir el número de fitxers a analitzar a 8, per tant, vaig limitar-ho a
800 resultats com a màxim. Altrament, també hi havia un problema a l’hora
d’obtenir el JSON, ja que a vegades el document no podia ser obtingut, i la funció
donava un error. Tot i que sembla poca cosa, aquest error desfeia el codi sencer i
malmetia la interpretació dels codis correctes. Per resoldre-ho vaig haver d’anul·lar
l’error, de manera que si no aconseguia resultats en aquella cerca, continuava a la
següent. Per tant no es malmetia res, ja que si hi havia un error el programa
foreach ($twi_sch->results as $results){
if (empty($results->geo)==FALSE):
$geo_x=$results->geo->coordinates[0];
$geo_y=$results->geo->coordinates[1];
endif;
$next_page=$twi_sch->next_page;
if ($next_page==''):
$page="http://search.twitter.com/search.json?q=".urlencode($
search)."&result_type=mixed&rpp=100&include_entities=true";
else:
$page="http://search.twitter.com/search.json".$next_page;
endif;
21
tornava a començar la cerca des del principi, perquè no podia trobar la següent
pàgina.
Mostrant el mapa
El següent pas consistia doncs a mostrar el mapa, i situar-hi els marcadors. Tal i
com he explicat anteriorment, vaig decantar-me pel servei de Google Maps i la seva
API.
Primer de tot vaig dedicar-me a fer funcionar un mapa amb la Google Maps API v3.
Per tal de realitzar això vaig obtenir una clau en la pàgina de l’API, la qual em va
permetre demanar el mapa a Google des del codi. Vaig anar realitzant diferents
proves per tal de trobar la forma que em permetés crear un mapa que ocupés tot
l’espai possible de pantalla. Finalment vaig aconseguir mostrar en tota la pantalla
del navegador un mapa centrat a Sidney. Fet això, el següent pas consistia en
posar un marcador en un punt del mapa.
Figura 10: Primer mapa obtingut centrat a Sidney
22
Un marcador és un dibuix que assenyala unes coordenades del mapa. Google
Maps permet posar centenars de marcadors en un mapa. El problema però és que
el mapa només es mostra en una porció, per tant no deixa veure tots els punts en
detall, o simplement no els deixa veure perquè no estan dins de la porció de mapa
mostrada. Per sort el mateix mapa es pot moure un cop implementat, ja que és
interactiu. Això es deu a que el seu funcionament és basa en el llenguatge
Javascript.
Per tal de mostrar un marcador en el mapa, vaig posar que el mapa es mostrés al
voltant de les coordenades del punt, i vaig definir el marcador al mig d’Austràlia.
Així vaig aconseguir centrar el mapa a Austràlia i en ell vaig definir el marcador.
Posteriorment vaig posar més marcadors pel mateix procés.
Figura 11: Marcador al mig d’Austràlia
Mostrant resultats al mapa
El següent pas tracta d’ajuntar els dos serveis per tal de poder mostrar en un mapa
els resultats de la cerca en forma de marcadors. Per tal de fer això vaig fer que
23
els resultats de la cerca s’escrivissin dins de Javascript, combinant ambdós codis
font. El resultat no va ser ben bé l’esperat, ja que era molt lent, i tampoc no
mostrava el text del resultat. Aquest últim problema el vaig resoldre buscant la
forma de fer que es mostressin finestres amb informació, el qual la mateixa API de
Google Maps deixa fer mostrant el text en una espècie de finestra com en una
bafarada. El problema que em va sorgir va ser el fet que si tenia més d’un resultat
m’apareixien moltes finestres, les quals quedaven totes obertes superposant-se
entre elles i ocasionant que el mapa no es pogués veure correctament. Això ho vaig
resoldre fent que la finestra oberta es tanqués quan se n’obrís una altra.
Aquest però no va ser el major problema al qual em vaig haver d’enfrontar per tal
de poder unir ambdós llenguatges. El major problema era la comprensió, el fet de
barrejar dos llenguatges, Javascript i PHP, feia difícil evitar errors. Per solucionar
aquest problema, vaig separar els dos llenguatges en dos fitxers. Primer el PHP
obtenia les cerques i escrivia els resultats en una funció definida en el fitxer del
mapa que vaig anomenar “pinta_marker”. Posteriorment el Javascript obtenia
aquests resultats i, gràcies a la funció definida anteriorment, pintava els marcadors
amb les seves respectives finestres de text.
Figura 12: Text obtingut de Twitter i processat per l’aplicació http://gtwet.ibeji.cat/javascript.php?q=manlleu
pinta_marker(41.372977,1.50199,"@Hector_Duarte_M"," @Hector_Duarte_M Jaume i Marcela, de Cal Xullat, al Centru. @ El Pla de Manlleu
http://t.co/Vh orVhG");
pinta_marker(41.372977,1.50199,"@Hector_Duarte_M"," @Hector_Duarte_M El Centru! @ El Pla de Manlleu instagr.am/p/S5yjkFL75q/");
pinta_marker(41.996977,2.284853,"@Rafarenas"," @Rafarenas I'm at Pont de Manlleu 4sq.com/TGrAAh");
pinta_marker(41.87408,2.2876,"@taradellencs"," @taradellencs La Big Band Manlleu tanca diumenge el Cicle de Concerts de
Taradell bit.ly/UEW9Gz | @taradell");
24
I així va ser com després d’un llarg procés de proves vaig aconseguir mostrar un sol
resultat en el mapa. Posteriorment vaig aconseguir generar més marcadors, de
manera que repetint un procés semblant a l’anterior vaig arribar a mostrar tots els
resultats.
Arribats a aquest punt, vaig trobar-me amb un altre problema: quan apareixien els
marcadors, alguns quedaven fora de la imatge inicial. Al centrar el mapa en un sol
lloc feia que qualsevol resultat acabés centrat en el mateix lloc, i si hi havia sort
podia passar que algun punt estigués en el mapa, però no sempre era així.
D’aquesta forma tocava pensar un mètode que permetés centrar el mapa en funció
dels resultats, tenint en compte que aquests eren dinàmics i per tant totalment
canviants. Per resoldre aquest aspecte vaig haver d’afegir una nova funció al mapa,
per tal que un cop obtinguts tots els punts, centrés el mapa per aconseguir que tots
els punts apareguessin en ell. D’aquesta manera el mapa es veu més petit si els
resultats són a poca distancia entre ells, i més gran si els resultats estan més
repartits i espaiats.
Figura 13: Resultat de la cerca per la paraula “Barcelona” http://gtwet.ibeji.cat/map.php?q=barcelona
25
Per acabar el procés calia adaptar el text dels resultats per tal que es poguessin
veure correctament, i perquè tan el PHP com el Javascript ho interpretessin bé.
Això va ser un gran problema, degut a la gran varietat de possibles errors que es
podien ocasionar derivat de la varietat de tipologies de caràcters empleats
(idiomàtics o que provenen de diferents dispositius) que l’eina podia obtenir. Per tal
d’intentar solucionar això, em vaig endinsar de ple a la cerca d’un codificació que
acceptés tots els accents i símbols que hi havia. Vaig acabar decantant-me per la
utilització de UTF-8, un format de codificació de caràcters molt estès en el món dels
llenguatges web.
El primer pas va ser la substitució de tots els caràcters que podien causar confusió
(per exemple les cometes “ o les /). No obstant, es seguien produint errors a l’hora
d’interpretar el codi. Després de diverses proves vaig aconseguir acotar el
problema: era degut a que alguns resultats contenien salts de pàgina pel mig del
text, el qual era interpretat com a tal, provocant un salt de pàgina en el fitxer i en
conseqüència una mala transformació del fitxer JSON.
Figura 14: Text d’un resultat de la cerca anterior http://gtwet.ibeji.cat/map.php?q=barcelona
26
Guardant resultats a la base de dades
Un cop el mapa va donar els resultats correctament, vaig desenvolupar una eina
dins del codi PHP que permetés emmagatzemar la informació en una base de
dades. Per tal de fer això vaig utilitzar MySQL, un gestor de base de dades senzill.
MySQL és totalment compatible amb PHP. Es tractava de crear unes instruccions
que s’executessin cada cop que hi hagués una cerca, per tal d’afegir un camp dins
de la base de dades, de manera que cada vegada que hi hagués una cerca nova,
aquesta quedés registrada, i en cas que es repetís la cerca, que afegís un
comptador al paràmetre de la cerca repetida. Amb això podia aconseguir
assenyalar la freqüència de la cerca.
Entre els múltiples errors que vaig trobar a l’hora de realitzar aquesta part, cal
destacar la dificultat en la utilització del gestor, un altre mon totalment desconegut
per a mi. Em vaig haver d’enfrontar a la creació de registres, i l’actualització d’un
comptador en el cas de cerques repetides També vaig haver de detectar les
cerques que no donaven resultats, ja que aquesta informació no em va semblar
rellevant.
3.4. Disseny gràfic
Després d’haver aconseguit que la pàgina funcionés va tocar posar-se a la part del
disseny gràfic, i es que per molt bé que funcionés, també havia de tenir una
pàgina que servís per introduir la cerca. Per molt que sembli secundari, aquesta
part també té certa importància, ja que sense aquesta capa de disseny gràfic,
l’aplicació seria bastant incomprensible per alguna persona que no hi estigués
acostumada.
27
Així doncs la part del disseny serveix per facilitar la comprensió de la pàgina de
forma més ràpida.
Creant una pàgina d’inici
La pàgina d’inici havia de contenir un quadre de cerca. Aquest quadre de cerca
però, havia de ser especial, ja que la pàgina giraria entorn d’ell. Tot això ho vaig
anar realitzant amb el CSS, un llenguatge de fulls d’estil web, que s’encarrega
bàsicament del disseny de les pagines web. D’aquesta forma després de rebuscar
molt per Internet i anar provant diferents dissenys de quadres de cerques, vaig
decantar-me per un disseny de quadre que destacava pel seu minimalisme, però
també pel color blau, que és el color principal que vaig escollir per l’aplicació.
Figura 15: Quadre de cerca
El següent pas va ser posar-li el títol. Realment al principi, el títol de l’aplicació
havia de ser gTweet, ja que expressa el fet que són tweets geolocalitzats. El
problema que vaig trobar-me es que aquest nom ja havia estat agafat anteriorment,
per tant per evitar confusions vaig afegir-li el Map al darrera, d’aquesta forma en
una sola paraula quedava reflectit tot el programa: “g” de geolocalització, la base
del treball; “Tweet” de Twitter, la xarxa social escollida; i “Map” del mapa, la part
visible i final. Tot i que ja tenia clares les sigles “gTweetMap”, havia d’escollir la
tipografia i la mida dels caràcters. Vaig escollir una tipografia lliure de Google
Fonts pel títol, juntament amb una tipografia pels textos. La tipografia del títol
s’anomena “Love Ya Like a Sister”, mentre que la dels textos vaig escollir la “Droid
28
Sans”. D’aquesta forma vaig definir la grandària de les lletres i vaig posar-ho sobre
el quadre de cerca.
Figura 16: Aspecte del títol de l’aplicació
Vaig decidir fer el que s’anomena un disseny intel·ligent. En el disseny intel·ligent
es tracta d’aconseguir que la pàgina s’adapti a les dimensions de la pantalla, de
forma que sempre es mostra bé, ja sigui en un ordinador gros, una tauleta, o fins i
tot un mòbil. Per tal d’aconseguir aquest resultat vaig definir que tots els paràmetres
és mantinguessin al mig, amb el quadre de cerca sota del títol. A més, el menú de
navegació el vaig fixar a la cantonada inferior esquerra respecte de la pantalla, les
icones de les xarxes socials a la cantonada inferior dreta i a dalt a la dreta i vaig
posar els diferents idiomes previstos a l’eina.
Figura 17: Captura de pantalla de la pàgina inicial provisional de l’aplicació http://gtweetmap.ibeji.cat/search.php
29
Per tal de fer aquest disseny intel·ligent vaig definir dos formats, un per pantalles
grans (tauletes, ordinadors, portàtils...) i un per pantalles petites, bàsicament
mòbils. Així doncs en funció de la grandària de la pantalla es carrega un disseny o
l’altre. El disseny gran el vaig crear perquè sortís tot, mentre que en el petit, les
icones s’amaguen, mostrant un disseny de quadre de cerca diferent, amb un títol
més petit. Tot i les diferències aparents, l’estructura interna de la pàgina no canvia
gens. D’aquesta forma vaig aconseguir crear una pàgina amb un disseny intel·ligent
(mitjançant CSS), que s’adapta a qualsevol mida de pantalla.
Figura 18: Captura de pantalla de la versió mòbil provisional de l’aplicació http://gtweetmap.ibeji.cat/search.php
Ajustant les dues pàgines
També s’havia de donar un disseny a la pàgina del mapa, de forma que es
permetés fer cerques sense haver de tornar a la pàgina principal. Aquí també havia
30
de ser en forma de disseny intel·ligent, o sigui adaptant la pantalla segons el tipus
de dispositiu.
A més, vaig traduir la pàgina a tres llengües amb la intenció d’estendre’n el seu ús,
i que s’adapti a un idioma o altre, en funció del navegador des d’on es fa la
consulta. Actualment l’eina està traduïda a l’anglès, el castellà i el català; i aquesta
se’ns mostrarà en la llengua més convenient en funció de la llengua que tinguem
preestablerta al navegador. A més, sempre tenim la possibilitat d’escollir una
llengua diferent gràcies a que a la cantonada superior dreta hi vaig afegir les icones
de llengua.
Finalment calia preparar les dues pàgines per si hi havia algun error durant tot el
procés. Per exemple, si no apareixen resultats, el programa ha de redirigir a la
pàgina principal i mostrar un missatge on s’assenyali que no hi ha resultats, o bé, si
per alguna raó s’arriba a la pàgina de resultats sense haver fet cap cerca, doncs
també s’ha de redirigir a la pàgina principal.
Publicació de l’aplicació a Internet
Per tal de finalitzar el projecte calia publicar-lo a Internet. Per aconseguir això vaig
utilitzar un servidor extern, al qual, com ja he dit, em van donar accés. Altrament
també necessitava un domini que donés accés al projecte i que el representés. La
mateixa persona que em va deixar espai en el servidor, va ser la que em va
proporcionar un subdomini al domini que ell tenia (ibeji.cat). Així doncs vaig pujar el
meu projecte a http://gtweetmap.ibeji.cat
31
Finalment, també vaig donar-li visibilitat a les xarxes socials, creant un perfil a
Twitter, a Facebook , a Google+ i a Tumblr, les xarxes socials més utilitzades del
moment.
Cerca del logotip
D’altra banda, com a qualsevol projecte, calia buscar una imatge o logotip que el
representés i que identifiqués el treball de forma unitària. Havia de servir també per
crear una imatge a les xarxes socials perquè en el futur es pogués identificar amb
facilitat l’aplicació. El logotip havia de ser senzill, que tingués relació amb el projecte
i que no es confongués amb cap altre logotip existent. Per això havia de tenir certa
relació amb Google Maps, Twitter i la geolocalització.
Figures 19: Imatges de dissenys previs al logotip final
Finalment vaig acabar decantant-me per un model més representatiu de l’aplicació.
El logo elegit és una representació de la Terra, ja que l’aplicació es basa en la
geolocalització. En aquesta Terra hi trobem tres franges, una del color blau clar
utilitzat en el logo original de Twitter, una altra del color taronja que podem trobar a
l’aplicació de Google Maps i finalment una del color gris de l’aplicació objecte del
projecte. Aquesta última franja central simbolitza l’aplicació que uneix Google Maps
i Twitter per mostrar resultats en el món.
32
Figura 20: Disseny final del logotip
3.5. Exemples d’ús
En aquest apartat s’intenta exemplificar les possibilitats de l’eina mitjançant
exemples d’ús, capturant el comportament del sistema que es vol desenvolupar. Un
dels paràmetres a escollir és el tipus de missatges (els més recents o els més
populars), i un altre paràmetre és el text de cerca. A continuació es presenten
alguns exemples d’ús:
Cerca de missatges escrits per un usuari
A través de la cerca, escrivint “from:” i l’usuari amb l’@ incorporat al davant del
nom, ens mostra els missatges que ha escrit un mateix usuari. Aquesta opció ens
permet veure des d’on ha escrit missatges un usuari concret, i per tant permetrà
veure, per exemple, els llocs per on ha viatjat una persona.
Cerca de hashtags de fenòmens socials
Els hashtags són etiquetes que utilitzen els usuaris (incloent el caràcter “#” a
qualsevol paraula) per tal de poder parlar d’un mateix tema. Aquesta cerca és útil a
l’hora de facilitar fer estudis socials d’aquests fenòmens, ja que sovint són originats
33
per usuaris de Twitter. El fet de situar els missatges de la xarxa social en un mapa,
fa que es pugui veure on es generen més missatges d’un fenomen social concret.
Cerca de missatges mencionant un usuari concret
Si cerquem un nom d’usuari amb el caràcter “@” que utilitzen els usuaris per
mencionar-se entre si, obtindrem la gent que ha mencionat a un usuari i que per
tant s’hi ha adreçat. Això ens pot ser útil de cara a situar la gent que segueix a una
celebritat determinada, o per tal de conèixer des d’on la gent es preocupa més per
aquest usuari, de cara a poder orientar-se més a aquests mercats.
Cerca de trending topics a la xarxa social
Podem cercar també els textos més usats en el moment a la xarxa, que
s’anomenen trending topics. D’aquesta forma podem cercar aquests trending topics
per localitzar des d’on se’n parla.
Cerca per qualsevol text
A banda de totes les cerques especifiques que he esmenat fins al moment, també
es pot realitzar una cerca per qualsevol paraula, per tal de fer un seguiment d’un
tema determinat, o de la gent que menciona a un personatge públic.
3.6. Possibles ampliacions
En principi es podrien plantejar dues possibles ampliacions. Per un costat es
podria fer la cerca extensiva a altres xarxes socials, de manera que es pogués
ampliar el ventall de possibilitats de cerca. Per altra banda es podria desenvolupar
una aplicació mòbil per tal d’afegir visibilitat a l’aplicació i en conseqüència obrir-se
a nous mercats.
34
Dins la primera opció es podria portar a terme una extensió a Facebook, com a
xarxa també molt seguida en l’actualitat.
Dins la segona opció caldria determinar en quin sistema desenvolupar l’aplicació
mòbil. Entre les possibles opcions trobem les dues plataformes més utilitzades:
iOS i Android. Per una banda tenim iOS, la qual és una plataforma que funciona en
un sistema d’aplicacions molt tancat, amb una botiga d’aplicacions única, App
Store, controlada rigorosament pel fabricant i estancat a un sol model de mòbil d’un
sol fabricant: Apple, amb el seu iPhone. Per altra banda tenim Android, un sistema
més obert al desenvolupador, amb una botiga d’aplicacions pròpies com és Play
Store, i amb molts telèfons que utilitzen aquest sistema operatiu. Tot i això la quota
de mercat està repartida entre aquestes dues alternatives, encara que Android cada
cop guanya més terreny a l’iPhone. Per tant, crec que valdria la pena optar per fer
una ampliació a les dues plataformes de mòbil més esteses.
35
4. Conclusions
L’objectiu d’aquest treball era elaborar una eina que permetés la ubicació
geogràfica de diferents fenòmens socials, mitjançant la geolocalització d’informació
de les xarxes socials a partir de la cerca d’un text qualsevol. Per tal d’arribar a
aquest resultat, primer de tot vaig aprendre a utilitzar llenguatges web per tal de
crear una aplicació web real, la qual cosa m’ha servit per comprendre millor el
funcionament d’Internet. Per crear l’aplicació he hagut d’obtenir els resultats d’una
cerca feta en una xarxa social. He aconseguit que es mostrés un mapa. A més cal
afegir que també he dissenyat l’aparença externa de l’aplicació i l’he creat en un
entorn que permeti el funcionament en mòbils, ordinadors i tauletes. En resum, he
après a programar i a entendre Internet des de la seva base, he aconseguit
superar-me i crear quelcom que no havia fet fins al moment, i per últim he après a
realitzar tractaments de dades per tal de simplificar la informació.
Un cop acabada l’eina, crec que en el futur pot continuar creixent. Les possibilitats
de l’eina són molt grans, ja que és molt oberta. Algunes d’aquestes ampliacions ja
les tinc ideades, com la de mostrar les cerques més freqüents, ja que tot està
preparat perquè això sigui possible. De totes maneres l’àmbit en que crec que ha
d’evolucionar és el de les aplicacions per a mòbils, ja que cada vegada són més els
usuaris que naveguen per Internet només per mòbil o tauleta. Tot això està
directament lligat al meu treball, ja que aquesta evolució cap al sector ultra-portàtil
farà que la geolocalització cada cop sigui més utilitzada, la qual cosa farà que els
resultats de l’aplicació siguin cada cop més fidedignes.
Tot això també ens porta a reflexionar sobre la privacitat que realment tenim, ja que
cada cop és més senzill saber on està la gent. Després de desenvolupar la meva
36
aplicació vaig veure que és realment senzill poder veure des d’on s’envia la
informació. De fet en algunes ocasions es pot veure el carrer des d’on s’ha enviat.
És per això que en aquest món, cada cop més geolocalitzat, val la pena vigilar
quina informació publiquem i com la publiquem, ja que tot el que publiquem és
públic. Tot i que pot semblar redundant, sembla que cada cop sigui menys obvi pels
usuaris d’Internet. A l’hora de publicar alguna cosa cal tenir sempre en compte
aquest fet. Es pot veure clarament com cada cop hi ha menys gent que realment
està conscienciada de les conseqüències de la manca de privacitat actual. Crec
que en aquest sentit la meva aplicació pot ajudar a veure aquest risc i a
conscienciar als usuaris de les xarxes socials, ja que el fet que es vegi des d’on
s’ha publicat exactament alguna cosa fa que ens puguem plantejar aquestes
qüestions. De fet la meva aplicació no fa servir res que no estigui a l’abast de
tothom, ja que l’API de Twitter que conté aquesta informació és totalment pública i
de lliure accés. Espero doncs que amb això la gent realment reflexioni sobre la
privacitat actual, i vagi més en compte a l’hora de publicar qualsevol cosa.
Finalment vull comentar que ha estat un autèntic repte per a mi poder fer aquest
treball. M’ha representat un gran suport de cara a continuar aprenent en aquest
món que cada cop evoluciona més ràpid i em demostra que realment podem
aconseguir fer qualsevol cosa si ens ho proposem.
37
5. Referències bibliogràfiques
ÁLVAREZ GARCÍA, Joaquín, et alter. PHP en la Educación [CD-ROM]. Madrid:
Ministerio de Educación, Instituto de Tecnologías Educativas, 2011. NIPO: 820-
09-062-0. ISBN: 978-84-369-4740-3.
CALDEVILLA DOMÍNGUEZ, David. Las Redes Sociales. Tipología, uso y consumo
de las redes 2.0 en la sociedad digital actual.[en línia] Documentación de las
Ciencias de la Información, Norteamérica, 33, jul. 2010. [citat el 12 de gener de
2013] Disponible a:
<http://revistas.ucm.es/index.php/DCIN/article/view/DCIN1010110045A/18656>.
FDEZ. BURGUEÑO, Pablo. Clasificación de Redes Sociales [en línia]. Blog de
derecho – [citat el 12 de gener de 2013].
Disponible a: <http://www.pabloburgueno.com/2009/03/clasificacion-de-redes-
sociales>.
Directive 2007/2/CE (Inspire) [en línia] European Parliament [citat el 29 d’agost de
2012] Disponible a: <http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:
L:2007:108:0001:0014:es:PDF>.
GET Search-Twitter developers [en línea]. Twitter: Twitter developers, [citat el 20
d’agost de 2012]. Disponible a: <https://dev.twitter.com/docs/api/1/get/search>.
Google, Keyhole Markup Language (KML) Standard [en línia] OGC [citat el 29
d’agost de 2012] Disponible a: <http://www.opengeospatial.org/standards/kml>.
Google Maps API v3 [en línia]. Google Maps [citat el 20 d’agost de 2012] Disponible
a: <https://developers.google.com/maps/documentation/javascript/?hl=es>.
Open Street Map API v0.6 [en línia] Open Street Map: April 2009, March 2012 [citat
el 20 d’agost de 2012]. Disponible a:
<http://wiki.openstreetmap.org/wiki/API_v0.6>.
Open Geospatial Consortium (OGC) [en línia] OGC [citat el 29 d’agost de 2012]
Disponible a: <http://www.opengeospatial.org/>.
38
Using the Twitter Search API-Twitter Developers [en línia] Twitter: Twitter
developers [citat el 20 d’agost de 2012]. Disponible a:
<https://dev.twitter.com/docs/using-search>.
Web Map Services (WMS) Standard [en línia] OGC [citat el 29 d’agost de 2012]
Disponible a: <http://www.opengeospatial.org/standards/wms>.
Imatges
Figura 1 en el document: PHP logo [en línia] PHP: Download logos [vist el 12 de
gener de 2013]. Disponible a: <http://php.net/download-logos.php>.
Figura 2 en el document: Twitter logo [en línia] Twitter: Logo y marca [vist el 12 de
gener de 2013]. Disponible a: <https://twitter.com/logo>.
Figura 3 en el document: MySQL logo [en línia] MySQL: Logos [vist el 12 de gener
de 2013]. Disponible a: <http://www.mysql.com>.
Figura 4 en el document: OGC logo [en línia] OGC Logo in Articles [vist el 12 de
gener de 2013]. Disponible a: <http://www.opengeospatial.org/ogc/guidanceltr>.
Figura 5 en el document: Google Maps logo [en línia] Google Maps logo [vist el 12
de gener de 2013]. Disponible a:
<http://www.opengeospatial.org/ogc/guidanceltr>.
39
Annex: Projecte presentat a 52° North Innovation Prize 2012
Tal i com he comentat a la introducció, vaig presentar el treball a la convocatòria
52° North Innovation Prize 2012. Aquest premi a nivell internacional està destinat a
projectes sobre les tecnologies de la geolocalització i la informació. Després de
veure que el tema del meu treball s’assemblava a aquesta temàtica, vaig decidir
presentar-m’hi. El treball havia de ocupar unes 15 pàgines i, en principi, s’havia de
lliurar abans del 31 d’agost de 2012, tot i que al final la presentació es va prorrogar
fins el 15 de novembre de 2012.
Annex
40
gTweet, a Tool for the
Geolocation of Social Movements
Pseudònim: Monsieur Cousteau
Barcelona, August 2012
Annex
41
INDEX
1. Introduction ................................................................................................ 42
2. Description of idea ..................................................................................... 42
3. Motivation ................................................................................................... 42
4. Previous study ............................................................................................ 43
5. Market Research ......................................................................................... 43
6. Technical Feasibility and approach .......................................................... 44
7. System Architecture .................................................................................. 46
8. Road map for implementing the idea ....................................................... 46
9. Examples of use ......................................................................................... 48
10. Possible extensions ................................................................................. 49
11. Investment Plan for the prize money ...................................................... 49
12. Special Thanks ......................................................................................... 51
13. References ................................................................................................ 52
Annex
42
1. Introduction
I am 17 years old and this year I’m going to begin the second year of Bachelor (the last two
years of high school before university). One of the tasks I have been assigned for this year is
making a project called Treball de recerca.
The Treball de recerca is a research activity that all the Bachelor students have to do.
Preferably to be initiated and finished during the first year and to be given back during the
second year. Treball de recerca is appropriate to the level of education taken and is supervised
by a tutor. The educational purpose is to initiate the student in research, working
independently.2
In my case, the research project I'm working on is co-supervised by a teacher of the school
where I am studying (Santa Teresa de Lisieux school) and a web developer of the Polytechnic
University of Catalonia (UPC). The project is focused on the field of the information technologies
(IT), specialised in geolocation information from social networks.
I had seen that theme of my project could be submitted to this prize so I contacted Dr. Wytzisk
Andreas indirectly, to make sure that my presentation was possible. I decided to ask because it
seems that this award is more directed to college students. In light of the response, which
encourages me to present my project, I decided to send my project to the 52° North Innovation
Prize 2012.
2. Description of idea
The objective of my project is to develop a tool that allows locating of various social movements
via looking for geolocate text in social networks from any word searched.
3. Motivation
I have always liked the world of technology, especially computers and Internet. The curiosity for
the computing world is actually one of my weaknesses and also my strongest point, and
because of this that I decided to immerse myself in the world of Internet. : I started in this field
by creating my first blog using a free platform, and after this blog I began creating websites with
different themes, at the same time as I was trying free tools. I continued to advance in
translating some of my web pages at different languages (Catalan, Spanish and English). Also I
2 For more information in Catalan:
<http://phobos.xtec.cat/edubib/intranet/file.php?file=docs/Batxillerat/decret_batxillerat.pdf>
Annex
43
created a blog to host a virtual project of my high school and I made a web page of online
games that currently has more than 150 visits every day (a big success for me). Until now I
have always used Web applications from third companies, to get my work easier.
When I had to choose a topic for the project I thought it was the perfect time to start designing
web applications from scratch, learning how to structure them and programming them
appropriately.
Some things that I most like from Internet are social networks, so I asked in my school if I could
focus my work on the development of a tool that allows to geolocate information of social
networks. Making a project about technology that I had never used before and entering the
world of enveloping web applications that is totally unknown for me, all of this was like a
challenge for me, especially considering that we have to add the geographic component. This,
combined with the curiosity to know what is behind web pages, encouraged me to make up my
mind to choose this topic for my project.
4. Previous study
On the Internet there are thousands of ideas that become real from someone every minute. This
is the reason why it is so difficult to make an original project. Tools that use Twitter, Facebook ...
there are thousands, many as social networks that currently have a lot of users. If we enter into
the specific world of geolocation tools, this number decreases significantly. Some applications
that can be found are: an application which indicate the countries of origin of our Twitter
followers, or another that allows us to see in real time the positions of all the geolocated texts
that are sent to Twitter.
In my case, the project that I’m trying to develop is based on direct search from a social
network. This search will enable the incorpoation of markers to incorporate markers to make it
more efficient. This makes the application more specific when displaying results, so the tool will
only show the information that we want and not unnecessary information. Besides these results
are showed in a world map, will make the result much cleaner, what will facilitate the reading.
5. Market Research
Among the most important social networking market I has chosen Twitter, one of the most
widely used at the time, which makes it a pretty reliable tool when it comes to social and market
studies.
The tool could have a great release, as there are maybe many potential users of the tool
derived from the interest to study the location of current social movements. In addition the tool
Annex
44
can help to determine the possible origins of these movements as well as can help to study the
propagation of the social organization created.
To this I should add that searching directly on Twitter, multiplies the possible applications. For
example, you can search for positions from where a person has sent messages, which can
serve as a diary of travel of a person. Another possible use could be to show the locations of
the people who send messages to a specific user, which could be used to study where are the
followers of a user from. So the applications derived of the tool are as numerous as the many
options that there are.
What we could question is the privacy of this people, but this should not worry us especially in
this project, since the information is already available to deal with the Internet, that means that
they have decided to put it out of their free will.
6. Technical Feasibility and approach
To do this project I had to make some decisions to outline how to do it and what tools I will use
from the many available. The first decision was taken when I had to choose if the application
would work on the server or on the client. On the one hand if the program runs on the client's
computer, from where you get connected to the Internet, it is based on how the web browser
interprets it. On the other hand if the program runs on the server, so that the program works
from the same place as from where it is stored, the client computer will download and display
the result on a web page.
After evaluating the good and bad things, I opted for running the program in the server, as being
in research I am interested in studying and test as many types of components as I can. In that
case it seems more complex because I have to create a web server running on my local
computer.
After this, I had to decide which program language I should use. Among the many options
available (Ruby, Perl, PHP, Python ...) I have chosen PHP version 5, which is the most widely
used at the server level and it is also the most usually installed by default on web servers.
We leave the more technical side to get into a social, but not less important, aspect. The
project will have to use a social network to get the information, and here there are many
options. Dismissing smaller social networks, because it requires a data stream available and
updated at all times, we have to choose between the big social networks of the moment: Twitter
and Facebook. The decision has been influenced by the type of content that can be found in
every social network. The fact that in Twitter you can find more currently important content, has
made this network a very good option. But if there is really something that made me choose
Annex
45
Twitter, was the abundance of development API (Application Programming Interface) libraries,
especially because it has a Search API, which makes it perfect for the objective of the project.
Finally there is a final section to consider: the geographic sense. In this aspect someone told
me about the existence of Spatial Data Infrastructures (SDI), which offers different resources
across geographic information portals, including some viewers, but also some web services
which provide geographical information. Getting myself into this world I discovered that there is
a regulatory framework that should have been considered. The current European legislation
(Directive 2007/2/CE) provides the creation of an Spatial Data Infrastructure that allows the
same visualization of maps (cartography) for all the European Community through web services
by WMS (an OGC standard).
This legislation made me discover the work carried out by the Open Geospatial Consortium
(OGC), an international nonprofit organization devoted to the definition of specifications for the
entire geography world. This organization has been responsible for setting unique protocols to
facilitate the interoperability between systems, reaching to get geographic information available
for the entire world, through web services of geographic information (Geoservices).
This protocol is the most established is the WMS (Web Map Service), through which is
achieved the visualization of geographic information as an image. In despite of the kindness of
the good intentions of standards and regulations force, I have not found any WMS service that
provides global coverage. For this reason I had to choose the options offered by Google Maps
and Open Street Map.
Both Google Maps and Open Street Map are currently using the same mapping global
coordinate system WGS84 (Mercator projection that attempts to represent the surface land on a
spherical surface Cylindrical tangent equator, which generates a map unstuck ground plane).
Between the two services I have decided to use Google Maps one, for its worldwide coverage.
Open Street Maps is a collaborative project, nonprofit, but it actually has a lower quality than
Google Maps does. It doesn't have satellite photography and has some coverage problems in
some areas where there are no volunteers to work on the project. Although Google Maps is not
an open data project, we should consider that it uses formats that are defined in the OGC
standards, such as KML.
Annex
46
7. System Architecture
The project is based on a client-server architecture, in which the client, from a web browser,
makes a request to the server sending the search you want to see on a map.
In the server there is a PHP program that makes a request using the Twitter Search API, which
answers with a JSON file containing all the search results. The server interprets the file and
discards not geolocated results. After, the server creates an HTML code with the results to send
it to the client. Then the client receives it and interprets the code making a request to Google
Maps using its API, including in the request the position of the geolocated texts. This returns a
map with the search results from Twitter, which is finally showed to the client via the web
browser.
8. Road map for implementing the idea
Currently the project is in an embryonic stage, but the goal is to have the prototype finalized in
January 2013, where I present my research project (Treball de recerca). Actually I have a test
server, for the development and test of the project. I’m at the stage of learning PHP and more, I
have just started experimenting with the Twitter Search API that will use the project. This API is
the one that will allow me to analize the result that I will get and to determinate how to use this
information. I am still studying the possibilities of Google Maps API.
Following is the planning schedule:
Client
Server
Annex
47
Formation (June-August 2012)
During this time I've been learning to reach the necessary level to work in the project. I had to
learn how to use the PHP language and how to use the different API. In the case of PHP, I have
been doing a course to learn how to program in that language. Regarding the API, I have been
looking for information on the Internet.
Design of the project (August-September 2012)
This part consists of analyzing and designing the project, to determine the functionality and
results. At the same time studying the possibilities in terms of tools and libraries to use that will
finally set the functions that can be carried out during the development process.
Development of the project (September-December 2012)
In my opinion, this is the most important part of the project, given that the development of web
applications is for me a big challenge because it is completely new to me. Programming is to
make the tool perform the specified functions in the design stage. This section will bring out
both, the program and the tests of the API libraries of Twitter and Google Maps. The
development will be in my charge.
Presentation of the initial prototype (January 2013)
The prototype will be very similar than the final design, because I will present it for my school
project as the practical part. So it is expected to be completed in early January as a fully
functional prototype, which will perform the same functions provided in the design stage. This
prototype will be used to check any deficiencies that the system may have, as well as to check
all the bugs to be able to improve the final version. It will be installed on a test server with
external visibility, in order to show the results from another computer than mine, where I have
done the development and testing operations. To perform this action I will use the FTP protocol
for sending files to servers.
Testing phase (February 2013)
For a time the prototype will be in a trial period. During that period, the program is in beta, to be
able to find errors and improve the functionality and / or efficiency to the public on its final
release. Then it will be the time to valorate the viability of the possible extensions to make it
more competitive.
Releasing of gTweet (March 2013)
Having expanded and tested enough to know that the program is good enough, it will be the
time of releasing the final product and getting it installed on the final server. It will be necessary
Annex
48
to create a logo that identifies the tool gTweet, and of course to create an own domain that will
allow to find the tool in an easy way.
Diffusion of gTweet (March-June 2013)
This part will consist on making a diffusion of the project so that it reaches the public in general
and more professional public. Initially is expected to create a promotion through the Internet,
including advertising, and also presentational promotion.
9. Examples of use
This section attempts to exemplify the potential of the tool with some usage examples, and to
capture the behavior of the system that will be developed. A parameter to choose is the type of
messages (most recent or most popular), and the other parameter is the search text. Below
there are some examples of use:
Search hashtags social phenomena
Hashtags are labels used by users (including the # any word) in order to discuss the same
topic. This search can be used to make social studies of these phenomena, as they are often
caused by the same Twitter users. Seeing messages of the social network in a map, makes it
possible to see where the people generate more messages of this social phenomena.
Search messages written by users
Using the same search, adding only from: the user with the @ included, shows the messages
that one user wrote. This option allows us to see where the user wrote, and therefore able to
see, for example, the places where a person has traveled.
Search messages mentioning a specific user
If we seek a username with @ character, used to name each user, it gets people mentioning a
user. This can be useful in order to locate people who follow a celebrity, or to ascertain from
where people care more for the user, in order to direct more to those markets.
Search trending topics on the social network
We can also search the most used texts in Twitter, known as trending topics. This we can use
this to know where they are being talked about.
Search for any text
Apart from all that specific searches, you can also perform a search for any term in order to
track a specific subject, or people that mentions a public figure.
Annex
49
10. Possible extensions
In principle we could consider two possible extensions. On the one hand I can extend the
search to other social networks, so that it could expand the range of search possibilities. On the
other hand I can develop a mobile application in order to add visibility to the application and
consequently sequence to open new markets.
The first option could bring an extension to Facebook as much network also currently followed.
In the second option we would have to determine which system to develop the application in.
Possible options are the two more used platforms: iOS and Android. In iOS we have a platform
that runs on a system application very tight, with a unique application store, App Store,
rigorously controlled by a single manufacturer and stagnant mobile model from the same
manufacturer: Apple with his iPhone. Android on the other hand have a more open system, a
shop for its own applications Play Store, and many phones that use the operating system.
However the phones market is divided between these alternatives as due, although increasingly
Android is gaining ground to iPhone. Therefore think it worthwhile to opt for an extension to the
two most common mobile platforms.
11. Investment Plan for the prize money
The investment plan for this project is attached in the following table:
Tasks Budget
VPS (Virtual Private Server) 400,00 €
Domain 100,00 €
Formation 500,00 €
Design 1.500,00 €
Development 2.000,00 €
Diffusion 500,00 €
TOTAL 5.000,00 €
Annex
50
Virtual Private Server
This section provides rental space in a VPS, for a minimum period of one year. Services do not
require buying a server of my own, with virtual services is already enough, as for the tool, a
private server would be unnecessarily big with plenty of space left over.
Domain
To run the tool is expected to have its own domain. The decision of getting a domain of its own
is for the necessity of having a clear image of the tool, at the same time that it will make it more
easy to find. In this case, it also includes the payment of this domain for one year.
Formation
For adequate system development it is absolutely essential to know how to use all the
necessary languages to structure the program properly and correctly. Please note that I am not
yet at my university and I'm studying in high school where it is not contemplated the introduction
to programming.
Design
This section is intended as a detailed design and analysis of the capacity of the project. So here
I need to decide what the functional scopes in this work are, describing in detail the functions
that the tool will require. For the design of the application it is also essential to know the
technology in which It will be based. This will be my responsibility.
Development
This section includes programming, the tool and the expansions planned from the design that is
in the previous section. As a result of this part we will have a tool that will allow us to see in a
map some selected Twitter submitted texts based on a search. This will be under my
responsibility too.
Diffusion
This section is devoted to the diffusion of the tool to give it known to Internet users. To carry out
this work is expected a design of a communication plan. But this part will be realized later, it is
expected to introduce the tool through presentations at industry conferences, promotion in
social networks by creating its own profiles, inclusion of index of websites such as Delicious or
Stumbleupon, publishing the web page in the university one, and a advertising campaign in
Facebook or Twitter, as the specifically tool Google AdWords. Later with the expansion in
mobile technology it could also be considered a campaign on Google AdMob.
Annex
51
In addition also could be anticipate the realization of designing a logo to have an own image for
gTweet.
12. Special Thanks
I would really like to thanks both of my Research Project supervisors for all their support and the
time that they waste on me.
I would like to say thanks to all my family, and specially my mother, because she always
encouraged me. Without her support and insistence I probably wouldn’t have presented this
document to this contest.
Thanks also to Josep Casanovas, Jordi Constans, Alexander Shaffer, Ana Martinez and all the
people who encouraged me and helped in anything related to this proposal.
Annex
52
13. References
Using the Twitter Search API-Twitter Developers [online] Twitter: Twitter developers [cited 20
August 2012]. Avaliable from World Wide Web: <https://dev.twitter.com/docs/using-search>.
GET Search-Twitter developers [online]. Twitter: Twitter developers, [cited 20 August 2012].
Available from World Wide Web: <https://dev.twitter.com/docs/api/1/get/search>.
Google Maps API v3 [online]. Google Maps [cited 20 August 2012] Available from World Wide
Web: <https://developers.google.com/maps/documentation/javascript/?hl=es>.
Open Street Map API v0.6 [online] Open Street Map: April 2009, March 2012 [cited 20 August
2012]. Avaliable from World Wide Web: <http://wiki.openstreetmap.org/wiki/API_v0.6>.
Directive 2007/2/CE (Inspire) [online] European Parliament [cited 29 August 2012] Avaliable
from World Wide Web: <http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2007:
108:0001:0014:en:PDF>.
Open Geospatial Consortium (OGC) [online] OGC [cited 29 August 2012] Avaliable from World
Wide Web: <http://www.opengeospatial.org/>.
Web Map Services (WMS) Standard [online] OGC [cited 29 August 2012] Avaliable from World
Wide Web: <http://www.opengeospatial.org/standards/wms>.
Google, Keyhole Markup Language (KML) Standard [online] OGC [cited 29 August 2012]
Avaliable from World Wide Web: <http://www.opengeospatial.org/standards/kml>.
Álvarez García, Joaquín, et alter. PHP en la Educación [CD-ROM]. Madrid: Ministerio de
Educación, Instituto de Tecnologías Educativas, 2011. NIPO: 820-09-062-0. ISBN: 978-84-369-
4740-3.
53
6. Agraïments
[Text disponible a la versió original d’aquest treball de recerca presentat sota
pseudònim].