Mercats i fires al teu abast. - Departament d'Enginyeria...

Departament d’Enginyeria Informàtica i Matemàtiques

Mercats i fires al teu abast.

TITULACIÓ: Enginyeria Tècnica en Informàtica de Sistemes

DIRECTOR: Carlos Molina

AUTOR: Ángel Navas Díaz

DATA: Setembre / 2013

Resum:

Aplicació web per la localització i dinamització de mercats i fires.

Aplicació web multi-plataforma per la localització geogràfica, temporal i sectorial, de mercats i fires. Així com la seva

dinamització amb contacte directe entre clients i organitzadors/venedors.

Implementació (amb HTML, JavaScript i CSS) d'una aplicació web que permeti el seu funcionament com aplicació

nativa ( fent us de llibreries d'accés al hardware ) i com a aplicació web Online.

Amb suport per sistemes d'escriptori i smart-phones.

Les plataformes possibles (depenent dels requisits del mercat) son totes aquelles amb suport de HTML5, tal como

Google Chrome, Firefox, Opera o Internet Explorer en el cas d'escriptori, tenint en compte que aquestos poden ser de

diverses plataformes como Windows, MAC OS o Linux.

En el cas de dispositius mòbils es poden suportar Android, iOS, Blackberry i Windows Phone, que son el gruix del

mercat de smart-phones.

Resumen:

Aplicación web para la localización y dinamización de mercados y ferias.

Aplicación web multi-plataforma para la localización geográfica, temporal y sectorial, de mercados y ferias. Así como su

dinamización con contacto directo entre clientes y organizadores/vendedores.

Implementación (con HTML, JavaScript y CSS) de una aplicación web que permita su funcionamiento como

aplicación nativa ( haciendo uso de librerías de acceso al hardware ) y como aplicación web Online.

Con soporte para sistemas de escritorio y smart-phones.

Las plataformas posibles (dependiendo de los requisitos del mercado) son todas aquellas con soporte de HTML5, tal

como Google Chrome, Firefox, Opera o Internet Explorer en el caso de escritorio, teniendo en cuenta que estos pueden

ser de diversas plataformas como Windows, MAC OS o Linux.

En el caso de dispositivos móviles se pueden soportar Android, iOS, Blackberry y Windows Phone, que son el grueso

del mercado de smart-phones.

Abstract:

Web application for localization and dynamization of markets and fairs.

Multi-platform web application for geographical, temporal and sectoral location of markets and Tradeshows. Just as his

dynamization with direct contact between customers and organizers / sellers.

Implementation (with HTML, JavaScript and CSS) of a web application that allows its functioning as a native application

(using hardware access libraries) and as web application on-line.

With support for desktop systems and smart-phones.

The possible platforms (depending on market requirements) are all those with HTML5 support, such as Google

Chrome, Firefox, Opera or Internet Explorer in the desktop case, keeping in mind that these can be of different platforms

such as Windows, MAC OS or Linux.

For mobile devices can support Android, iOS, Blackberry and Windows Phone, who are the majority of the smart-

phone market.

Agraïments:

Agraïments especials a:

A la meva parella, per la seva inestimable ajuda e infinita paciència.

Al meu germà, per el seus valuosos consells i nous punts de vista.

Als meus pares, per tots el esforços que han fet per que pugui arribar a aquest punt.

Al meu tutor, Carlos Molina, per permetrem portar a terme, sota la seva tutoria, aquesta

petita cursa de fons anomenada Projecte Final de Carrera.

I en general a tots aquells familiars, amics, professors i companys de feina, que en el

transcurs d'aquest projecte han escoltat els meus dubtes i animat a continuar.

Mil gracies a tots.

Capítol 1 Index

1. Index

ResumAgraïments

2. Introducció . . . . . . . . 12.1 Mercats, fires i mercats periòdics o itinerants . . . 12.2 Ubiqüitat. . . . . . . . 42.3 La web com a plataforma. . . . . . 62.4. Frameworks multiplataforma . . . . . 7

2.4.1 Multiplataforma. . . . . . 72.4.2 Plataforma . . . . . . 7

2.5 Tecnologies i eines disponibles. . . . . 92.5.1 Tecnologies de client . . . . . 92.5.2 Tecnologies de servidor. . . . . 11

2.6 Mapes i topografia digital. Estat de l'art . . . 112.6.1 Historia . . . . . . . 112.6.2 La cartografia al segle XX . . . . 132.6.3 APIs, llibreries i fonts de dades. . . . 15

3 Objectius del projecte . . . . . . . 173.1 Objectiu principal . . . . . . 173.2 Objectius secundaris . . . . . . 17

3.2.1 Primer objectiu . . . . . . 173.2.2 Segon objectiu . . . . . . 183.2.3 Tercer objectiu . . . . . . 18

4. Especificacions del projecte . . . . . . 214.1 Anàlisis de requisits . . . . . . 214.2 Fonts de dades. Open Data . . . . . 214.3 Mapes i fonts de dades cartogràfiques . . . . 224.4 Internacionalització i localització ( i18n, L10n) . . 224.5 Esdeveniments i els seus tipus . . . . . 224.6 Gestió d'esdeveniments . . . . . . 234.7 Compatibilitat . . . . . . . 23

4.7.1 Compatibilitat web . . . . . 234.7.2 Compatibilitat nativa (Phonegap) . . . 23

5. Decisions de disseny . . . . . . . 255.1 Plantilles . . . . . . . 255.2 Diagrames . . . . . . . 30

5.2.1 Esquema TOP DOWN del projecte . . . 305.2.2 Diagrama de la BBDD . . . . . 315.2.3 Diagrama de flux . . . . . 36

5.3 Arquitectura del sistema . . . . . 375.4 Elecció de tecnologies . . . . . . 38

Capítol 1 Index

5.4.1 PhoneGap . . . . . . 385.4.2 HTML5, CSS3, JAVASCRIPT, AJAX . . 385.4.3 jQuery . . . . . . . 385.4.4 jQuery Mobile . . . . . . 385.4.5 OpenLayers v2 . . . . . . 395.4.6 PHP . . . . . . . 395.4.7 JSON . . . . . . . 395.4.8 TSV . . . . . . . 405.4.9 MySQL . . . . . . . 40

5.5 Clients suportats . . . . . . 405.6 Esdeveniments . . . . . . . 405.7 Importació i mineria de dades d'esdeveniments . . 41

5.7.1 Importació amb CSV i MySQL (Erroni) . . 425.7.2 Importació amb PHPMyAdmin (Correcte) . . 43

5.8 Fonts de mapes . . . . . . . 445.9 Categories . . . . . . . 455.10 Geolocalització d'esdeveniments (per BBDD . . 465.11 Elements gràfics . . . . . . 46

5.11.1 Layouts . . . . . . 465.11.2 CSS . . . . . . . 465.11.3 Logo e icona de programa . . . . 475.11.4 UI e icones . . . . . . 475.11.5 Fotografies . . . . . . 48

6. Desenvolupament . . . . . . . 496.1 Frontend. . . . . . . . 496.2 Backend . . . . . . . . 496.3 Comunicació entre el Frontend i el Backend . . . 506.4 Fitxers . . . . . . . . 50

6.4.1 Frontend. . . . . . . 506.4.2 Backend . . . . . . . 52

7. Avaluacions (relació de les proves realitzades per avaluar cada part) . 677.1 Entorn de proves i compatibilitat . . . . 677.2 Proves d'estres . . . . . . . 67

8. Estudi econòmic . . . . . . . . 698.1 Mercat . . . . . . . . 698.2 Radi d’actuació . . . . . . . 698.3 Recursos humans . . . . . . 708.4 Cost econòmic del projecte . . . . . 71

8.4.1 Costos fixos . . . . . . 718.4.2 Costos variables. . . . . . 718.4.3.Cost del personal . . . . . 728.4.4.Cost total del projecte . . . . . 72

8.5 Promoció . . . . . . . 72

Capítol 1 Index

8.6 Distribució . . . . . . . 738.6.1 Visualització des de plana web. . . . 738.6.2 Mercats d'aplicacions . . . . . 74

9. Conclusions . . . . . . . . 759.1 Estat final de l'aplicació . . . . . 759.2 Coneixements adquirits . . . . . . 75

9.2.1 OpenLayers . . . . . . 759.2.2 Tractament automàtic de dades i mineria . . . 759.2.3 HTML – CSS – Javascript . . . . 769.2.4 jQuery Mobile . . . . . . 769.2.5 MySQL . . . . . . . 769.2.6 PHP . . . . . . . 769.2.7 PhoneGap . . . . . . 77

9.3 Possibles Millores . . . . . . 779.3.1 Mineria de dades . . . . . 779.3.2 Expresions temporals . . . . . 779.3.3 PhoneGap . . . . . . 789.3.4 Internacionalització i localització ( i18n, L10n ) . 799.3.5 Autentificació i perfils d'usuaris . . . 799.3.6 Mapes del Institut Cartogràfic de Catalunya. (ICC) . 809.3.7 Cerca per toponímia (nom de pobles e indrets) . 809.3.8 Splash image . . . . . . 809.3.9 SCSS -SASS . . . . . . 819.3.10 Repositori de codi . . . . . 819.3.11 Recopilació de dades d'us . . . . 81

10. Planificació temporal . . . . . . . 8310.1 Diagrama de Gantt . . . . . . 83

11. Bibliografia . . . . . . . . 8511.1 Llibres en format físic . . . . . . 8511.2 Llibres en format electrònic . . . . . 8611.3 Congressos i conferencies . . . . . 8811.4 Pagines web . . . . . . . 8911.5 Aplicacions . . . . . . . 9011.6 Fonts de dades . . . . . . . 9111.7 Fonts de cartografia . . . . . . 9111.8 Software emprat . . . . . . 91

11.8.1 Desenvolupament . . . . . 9211.8.2 Proves . . . . . . . 9211.8.3 Producció . . . . . . 92

11.9 Hardware . . . . . . . 9211.9.1 Desenvolupament . . . . . 9211.9.2 Proves . . . . . . . 9311.9.3 Producció . . . . . . 93

Capítol 1 Index

12. Annexes . . . . . . . . 9512.1 Manual d'Instal·lació a servidor . . . . 9512.2 Manual de super-usuari . . . . . 9512.3 Manual d'administrador d'esdeveniments . . . 9712.4 Manual d'usuari . . . . . . 9712.5 Requeriments mínims al servidor . . . . 9912.6 Requeriments mínims al client . . . . 10012.7 Codi font . . . . . . . 101

13. Glossari . . . . . . . . 113

Capítol 2 Introducció

2. Introducció

2.1 Mercats, fires i mercats periòdics o itinerants

Els mercats han sigut des de l'antiguitat el centre de la vida comercial del principals

nuclis de població a tota la mediterrània.

Trobem els primer exemples documentats als Fòrums romans on es comerciava

amb tota mena de matèries i eren el centre de la vida comercial de les diferents Polis

Romanes repartides per tot el mediterrani ( Mare Nostrum ).

Figura 2.1.1. Il·lustració d'un fòrum romà.

A l'edat mitjana aquests fòrums van donar pas als mercats a l'àrea de la

mediterrània europea, i als basars a l'àrea d'influència àrab. Tot i mantindre la essència de

lloc de comerç, trobada e intercanvi. Aquests mercats solien fer-se un dia a la setmana,

coincidint amb festivitats religioses com la missa dels diumenges o la festivitat dels

patrons locals.

Tanmateix a l'entrada de l'era moderna aquests mateixos mercats es van anar

modernitzant i diversificant, i van aparèixer els mercats fixes coberts, aixi com els mercats

municipals o centrals, diferenciant-se dels mercats de paradistes, també anomenats

itinerants, marxants o setmanals.

1


En el cas dels mercats moderns, cal recordar que Barcelona és la ciutat del món

amb més mercats municipals permanents i amb un projecte de modernització que està

donant grans resultats. I que és objecte d'estudi arreu del mon.

Es el anomenat “Model Mercat Barcelona”, que té el seu màxim exponent al mercat

de La Boqueria amb més de 11 mil·lions de visites anuals, moltes d'elles de turistes.

El interes per el model ha arribat arreu del mon, des de Melbourne o Medellín fins a

Moscou, passant per altres mercats d'arreu de Catalunya o Espanya.

Figura 2.1.2. Mercat de la boqueria. Barcelona

Com hem vist, els mercats han sigut el centre de la vida comercial de moltes viles a

Catalunya i gran part del mediterrani. I tot i que en passades dècades han perdut part de la

influencia, gracies a l'aparició dels supermercats e hipermercats als anys 70, segueixen ben

vius i s'estàn modernitzant per competir amb un gran potencial amb la resta d'actors del

comerç local i global.

En el cas dels mercats majoristes. Tot i que sortir de l'abast d'aquest projecte tenen

una importància cabdal a l'economia de les nostres contrades. Un cas de mercat, que està

competint amb un gran nivell d'èxit arreu del mon, és Mercabarna, que mou unes grans

xifres anuals de vendes i d'exportació, abasteix a uns 10 milions de persones i un radi

d'acció d'uns mil kilòmetres.

I per últim cal nombrar les fires, que són presents des de l'època medieval,

generalment amb una temàtica més o menys concreta. Pe: Fires del bestiar, fires d'oficis,

fires de terrissa, etc...

2


Aquestes fires són i han sigut punt de trobada de productors i clients, i serveixen

per vertebrar, dinamitzar i donar a conèixer la producció local a la clientela potencial.

En les últimes dècades també s'ha observat un creixent nombre de fires temàtiques

orientades a recreacions històriques, cultura i arts, gastronomia o promoció turística de

cadascuna de les poblacions en el seu entorn. Podem esmenar alguns casos d'èxit que han

esdevingut un referent i un punt d'atracció turística i comercial, com poden ser la fira de

Santa Llúcia o la Diada de Sant Jordi a tots els països catalans, la Fira de Circ Trapezzi que

és itinerant, la fira de Teatre al Carrer de Tàrrega, la setmana medieval de Montblanc, la

Tarraco Romana a Tarragona i el Temps de flors de Girona entre molts altres.

Figura 2.1.3. Fira de Santa Llúcia. Barcelona.

Molts d'aquests esdeveniments, en el proces de modernització esmentat abans,

tenen presencia a Internet amb més o menys èxit. Uns ho fan mitjançant webs, aplicacions

pròpies i promocions online, i d'altres amb agendes d'esdeveniments online temàtiques o

més genèriques.

Tanmateix tota aquesta informació, tot i estar recollida en part per les dades obertes

de la Generalitat de Catalunya i els diferents ens locals, en alguns casos, com el cas dels

mercats de paradistes i les fires locals anuals, és troba molt fragmentada, i és força

dinàmica.

3


Per el que, s'ha detectat la necessitat de renovar la formula i construir una agenda,

directori o un punt trobada, d'accés universal i neutral. Que es pugui accedir des d'arreu, i

en qualsevol moment a la informació de tots els esdeveniments, de manera rapida i gratuïta

( o força econòmica ).

Això permetria aglutinar i potenciar tota una comunitat de ens públics i privats,

organitzadors i usuaris que permetes dinamitzar, i en un moment donat, decidir a on es va a

comprar certs articles al comerç de proximitat o participar en les activitats que es

promouen arreu del nostre territori en tot moment.

2.2 Ubiqüitat

Segons el diccionari de la llengua catalana la ubiqüitat té la següent definició.

Ubiqüitat: f. [RE] [FS] [LC] Fet d’estar present pertot.

Aquest fet, aplicat a les Tecnologies de a Informació i comunicació (TIC),

compleix el principi de les tres A “Anytime, Anywhere, Any device”. (En qualsevol

moment, en qualsevol lloc, en qualsevol dispositiu).

Figura 2.2.1“Anytime, Anywhere, Any device”

Tot i que pot semblar quelcom impossible de complir, o com a mínim d'una

dificultat enorme.

4


L' entorn tecnològic actual, l'evolució dels sistemes de computació portàtils, la

millora de les xarxes de telecomunicacions i la lògica evolució dels llenguatges orientats a

la presentació de documents. Pe: HTML5 han propiciat que a dia d'avui sigui totalment

possible disposar d'una plataforma gairebé universal on executar algunes aplicacions i que

aquestes siguin accessibles en tot moment des de qualsevol punt amb un mínim equip i

connectivitat, i fins i tot sense ella.

Aquesta plataforma pot estar present tant a dispositius mòbils com a dispositius

modestos, dispositius dedicats (incrustats com punts de consulta a la via publica),

ordinadors d'escriptori, estacions de treball, aixi com grans servidors i sistemes distribuïts

com clústers i cloud computing.

Alguns dels exemples més clars d'aquest funcionament els emprem a diari i són

alguns com els següents:

• Google Maps.

• Google Docs.

• Office 365.

• Line / whatsapp.

• Twitter.

• Facebook.

Hi han molts més exemples, alguns dedicats a entorns més especialitzats, com

poden sers entorns mercantils, industrials o científics, però tots ells tenen en comú la seva

ubiqüitat.

5


2.3 La web com a plataforma

El creixent suport al HTML5, amb totes les tecnologies derivades com JavaScript,

ha propiciat que els navegadors hagin passat de ser uns simples clients que mostren

documents per pantalla, cap a un entorn d'execució on es poden executar programes

complexes, manipular gràfics i multimèdia, enviar i rebre comandes i peticions de sistemes

remots i accedir a una quantitat i varietat de dades i serveis més que considerables.

També amb la rapida adopció per part dels diferents navegadors de les diferents

plataformes, tant mòbils com d'escriptori, dels estàndards inclosos a HTML5 es crea una

plataforma d'execució present a la majoria d'equips informàtics i de comunicacions.

Figura 2.3.1 Navegadors suportats

També la gran penetració dels telèfons mòbils intel·ligents ( smartphones ) ha

propiciat que aquests navegadors estiguin disponibles a tota hora i tot moment. Això dona

una plataforma d'execució present a milers de milions de maquines i el numero no fa més

que créixer any rere any.

A finals del 2012 es calcula que al món hi havien 1700 milions d'ordinadors en

funcionament, així com 1100 milions de dispositius mòbils ( entre IOS, Android i altres...)

això dona un mercat potencial de aproximadament 2800 milions de dispositius a nivell

global. I gairebé tots tenen suport per HTML5. Això fa més de 2800 milions de

dispositius potencialment compatibles.

6


Com tot, té els seus desavantatges, com que és un format jove, ja que el estàndard

definitiu s'aprovara al 2014 i encara presenta alguns problemes. També presenta problemes

en quant a eficiència, tot i que millora ràpidament, però tot i això és una plataforma amb

una penetració de mercat com mai hi ha hagut cap.

2.4 Frameworks multiplataforma

2.4.1 Multiplataforma

En informàtica, multi-plataforma és un adjectiu que s'aplica a aplicacions que

s'executen a múltiples plataformes amb el mateix codi font, o amb mínimes diferencies.

Existeixen dos tipus de softwares multi-plataforma, el primer tipus és el que requereix

d'una compilació especifica per cada plataforma i el segon és pot executar directament en

les diferents plataformes sense passos addicionals.

2.4.2 Plataforma

Tradicionalment una plataforma és una combinació de hardware i software. Es pot

descriure simplement com un plataforma de maquinari o de Sistema operatiu on ha

d'executar-se, però amb l'evolució de Java, les tecnologies web i els llenguatges de Script

es va crear una nova categoria, les plataformes de programari.

Una plataforma de programari per definició és un entorn de programació i

execució, aquesta categoria inclou casos tan variats com Java, amb les seves variants i la

seva maquina virtual (Java VM), també estàn inclosos llenguatges de script que funcionen

sobre més d'un plataforma de maquinari o sistema operatiu, com poden ser Bash, Perl,

PHP, LUA, Python, Ruby i Tcl.

I per últim les tecnologies web, que es poden accedir des de qualsevol dels diferents

navegadors web de cadascuna de las plataformes hardware o SO.

7


Aquestes aplicacions web, que generalment segueixen una arquitectura client

servidor depenen en última instancia de les capacitats de cadascun dels navegadors en que

s'ha d'executar. Tanmateix esmenar que amb la rapida introducció de HTML5 i totes les

tecnologies incloses i derivades, inclosos tot un seguit de frameworks i metodologies, està

reduint considerablement la problemàtica d'aquest tipus d'aplicacions. També cal recordar

que el entorn HTML5 tot i ser de recent creació i no estar previst el seu estàndard definitiu

fins 2014, està present en multitud de dispositius de tota indole i capacitats a finals de 2012

tenia una base de dispositius estimada de 2800 milions de dispositius.

Tot i tindre uns enormes avantatges, el software multiplataforma presenta encara

alguns inconvenients com poden ser:

• Entorn de proves complexe degut a la varietat de dispositius i les seves capacitats,

així com petites diferencies de comportament en diferents entorns.

• Es pot minimitzar al mínim comú el conjunt de característiques disponibles,

afectant al rendiment, o funcions disponibles.

• Diferents interfícies d'usuari ( UI ) i mètode d'interacció que dificulten una

interfície homogènia, a la vegada que efectiva i simple.

• Sobrecarrega del processador al convertir codi no nadiu a codi executable. Tot i que

s'han efectuat millores considerables és un factor a tindre en compte per aplicacions

que requereixen una certa potencia de calcul o agilitat.

• Diferents formats de fitxers, paquets i codificacions. Encara que hi han solucions al

respecte.

• Fallades de seguretat en l'entorn multiplataforma, que poden, al ser el entorn

d'execució més heterogeni i el ecosistema menys variat del habitual, un greu

problema de seguretat.

8


2.5 Tecnologies i eines disponibles

El conjunt de tecnologies disponibles es podria dividir en dos categories:

Tecnologies de servidor i tecnologies a client.

Moltes parts d'un programa es poden implementar a qualsevol de les dues bandes,

però és important ressaltar que el fet de fer-ho en local o remot pot comportar canvis

substancials de rendiment, velocitat de resposta o consum de dades. Per el que cal definir

be quins requisits de velocitat, disponibilitat i possibles costos per tal de distribuir cada

fragment de l'aplicació en servidor o en client

També pot ser interessant externalitzar serveis i dades a tercers per tal d'estalviar

costos de connexió i manteniment. Pe: mapes, publicitat, etc. Les úniques parts

imprescindibles d'implantar al client són el frontend ( exceptuant entorns com escriptoris

remots VNC o Citrix ) i l'accés al hardware.

2.5.1 Tecnologies de client

Dins de les tecnologies de client n'hi ha de diferents tipus, tal i com s'esmenta tot

seguit:

• Aplicacions natives:

Òbviament les aplicacions natives són una bona opció per fer aplicacions potents, ja

que la seva eficiència és adaptada al hardware on corren, tanmateix NO són

multiplataforma en el sentit estricte de la paraula donat, que més enllà del format de les

dades i les peticions cap al servidor o APIs. El programa ha de ser especific per a cada

plataforma. O com a mínim compilat per la plataforma. Requereixen instal·lar la aplicació

a la maquina client.

9


• Scripts:

Pot ser una opció molt bona per cert tipus de programes, i ser multiplataforma,

no està orientat per al seu ús en dispositius mòbils. I generalment necessita de la

instal·lació de software addicional per tal de poder emprar-los. Això limita

considerablement el seu ús en programes que requereixen NO estar instal·lats. PHP, Ruby i

Bash són bons exemples.

• Java:

Java és una bona opció per les aplicacions multiplataforma donat que és un

llenguatge amb presencia a la majoria de plataformes (incloses les mòbils) i s'executa sobre

una maquina virtual (JAVA VM), també permet accés al hardware, així com a les crides de

xarxa, tanmateix presenta problemes importants en quant a fragmentació de les APIs

especifiques de cada entorn. Als entorns que estàn més implantats són Android i els SO

d'escriptori, tals com Windows, MAC OS i Linux. Requereix la instal·lació en cas que la

plataforma no el tingui de serie del seu runtime ( o SDK ). També presenta el problema del

seu escàs rendiment donat que és codi interpretat.

• HTML5 + CSS3 + JavaScript:

Aquesta opció està guanyant força en els últims temps. La gran penetració dels

navegadors, presents, per defecte, a totes les plataformes, amb un compliment cada cop

major del estàndards. La base de personal qualificat per treballar amb tecnologies web és

enorme i creix any rere any. En quant al rendiment, tot i ser inferior a una aplicació nativa,

cada cop és més eficient i presenta llibreries més complexes i professionals. De fet es

l'opció escollida per moltes de les companyies que tenen serveis ubiquus com Google.

S'executa com a plana web. No requereix d'instal·lació. Presenta l'inconvenient de no tindre

accés, en la majoria de casos, al hardware de la maquina client.

• Framework multiplataforma + HTML5 + CSS3 + JavaScript:

Per aprofitar el millor de la aplicació nativa i el millor de la tecnologia web

existeixen tot un seguit de frameworks mutiplataforma que possibiliten que la aplicació

10


funcioni com a aplicació nativa tot i que la seva programació és d'aplicació web. Permet

accés al hardware i crides de sistema.

Multiplataforma real, permet la execució en múltiples plataformes amb el mateix

codi web. Permet la distribució per APP store. Funciona com a aplicació nativa, tot i que el

codi es pot preparar per funcionar com a web. Permeten accés a les funcions de dispositius

mòbils tals com trucades, geolocalització, càmeres, etc... Tot i no ser tan eficients com una

aplicació nativa, el compromís entre eficiència i portabilitat és més que satisfactori per la

majoria d'aplicacions. Pe: Apache Cordova ( PhoneGap ), Sencha Touch, Rhodes,

Appcelerator Titanium.

2.5.2 Tecnologies de servidor

La tendència actual en entorns multiplataforma és que el servidor serveixi com a

centre de calcul i emmagatzematge (backend) en major o menor mesura. Les tecnologies

implicades són diverses tot i que el resultat final és similar, que és nodrir de dades

l'aplicació client a la velocitat demanada i evitant càlculs costosos o l'ús de gran quantitat

de memòria o espai a disc. Les tecnologies més habituals són Java, .NET, HTML5, PHP i

JavaScript ( Rhino ) entre d'altres.

L'elecció de cadascuna de les plataformes ve donada per la interconnexió amb la

font de dades ( pe: base de dades o servidor de cartografia digital ) i sistemes d'adquisició

de dades, aixi com la integració amb algun sistema ja existent o heretat.

2.6 Mapes i topografia digital. Estat de l'art

2.6.1 Historia

Des de l'antiguitat la humanitat ha tingut la necessitat de representar l'espai i

transmetre la informació associada a rutes, traçats, àrees i punts concrets. El mapa més

11


antic conegut data del 5000 a.c., i és una petita tauleta babilònica d'argila. Tal i com és pot

observar a la Figura 2.6.1.1 que és mostra a continuació

Figura 2.6.1.1 Tauleta d'argila de Ga-sur (Irak). 3800 a.c.

Tanmateix, encara que amb grans diferencies en execució i informació representada

gairebé tots els pobles antics han fet ús de mapes o “protomapes”, de vegades essent

simples dibuixos a la sorra amb una fletxa marcant una direcció. Des de llavors, encara que

el suport, tècniques i medis de representació ha variat considerablement, el seu motiu

principal, que és transmetre informació geogràfica, continua invariable. A dia d'avui el seu

ús s'ha generalitzat fins a ser una eina quotidiana a la vida de moltes persones.

En l'actualitat i amb la introducció de la fotografia aèria i per satèl·lit. La cartografia

ha tingut una serie de grans innovacions tècniques, i un augment considerable de la

precisió i qualitat, deixant de ser mapes manuscrits o obres d'artesania a ser un producte

industrial de més o menys qualitat, però força precís.

Existeixen infinitat de tipus de mapes, amb diferents característiques i projeccions

segons al ús al que van destinats, però els més comuns en l'actualitat són els anomenats

mapes amb projecció mercator, en totes les seves variants. Aquestes variants poden ser,

entre moltes altres, mapes de carreteres, polítics, geogràfics, geològics, cadastral, etc...

La projecció mercator és un tipus de projecció cartogràfica cilíndrica, creada per

Gerardus Mercator en 1569, en la qual és pretén representar la superfície esfèrica terrestre

12

http://www.minerva.unito.it/storia/StoriaScienzeSperimentali/Cartografia/Carto03.htm


sobre una superfície cilíndrica, tangent a l'equador, que al desplegar-se genera un mapa

terrestre pla. Tal i com es pot observar a la Figura 2.6.1.2 que es mostra a continuació

Figura 2.6.1.2 Mapa de Mercator de 1569.

La projecció Mercator no conserva las relacions entre àrees per a valors diferents de

latitud. Per això es mostra exagerada la superfície aparent de las terres situades prop dels

pols nord i sud.

2.6.2 La cartografia al segle XX

A l'últim segle, la cartografia ha experimentat una sèrie d'importants avenços. La

fotografia àrea, anomenada també ortofotomapa, es va emprar en l'elaboració de mapes

durant la II Guerra Mundial. A la dècada dels 60 i amb la invenció i ús dels satèl·lits

artificials es van començar a fer estudis geodèsics complets de la superfície terrestre per

mitjà d'equips fotogràfics d'alta resolució. Aconseguint l'exploració de pràcticament la

totalitat de la superfície de Terra.

13


Per a la cartografia moderna s'empren instruments d'alta precisió que permeten

relacionar les fotografies aèries, de satèl·lit i mesures reals del terreny. Augmentant

considerablement la precisió i abast dintre de la regió desitjada.

Amb la introducció de la visió estereoscòpica de la fotogrametria o aerotopografía,

així com l'ús extensiu de sistemes de gravimetria, sonar, laser i radar dóna un elevat nivell

de detall, que permet comprovar les condicions dels sòls, usos i possibles canvis, encara

que siguin minúsculs.

Tanmateix l'aparició dels Sistemes d'Informació Geogràfica ( SIG ) a la dècada del

1970, i la seva popularització per ús civil en els 90, han revolucionat la manera de crear i

emprar cartografia a través d'aquestes eines informàtiques que associen elements espacials

amb bases de dades.

Figura 2.6.2.1 Representació artística del sistema de posicionament global GPS.

Els SIG permeten l'anàlisi i la gestió del territori a través de cartografia digital d'una

manera ràpida, efectiva i a l'abast del gruix de la població. Tanmateix tot i que sembla que

la cartografia a la terra comença a estar completa (tret de les corresponents revisions

temporals) s'estàn duent a terme estudis per portar-la a terme en altres cossos del sistema

solar.

14


A l'actualitat i amb el gran abast i repercussió d'Internet i dels dispositius mòbils,

amb o sense connexió a la xarxa, el ventall de possibilitats per fer ús de sistemes

d'informació geogràfica de manera simple i econòmica ha permès un autentica revolució,

ja que permet a qualsevol usuari, conèixer la seva posició, rutes més adequades, així com

punts d'interès o serveis i comerços més propers, entre molts d'altres.

Figura 2.6.2.2 Aplicació web de Google Maps.

Emprant la informació disponible a qualsevol àmbit de la seva vida, com pot ser

transport, negocis, oci, etc... En qualsevol lloc i qualsevol moment.

2.6.3 APIs, llibreries i fonts de dades

Existeix una infinitat de software per editar, tractar i fer ús de informació

geogràfica, en multitud de plataformes, i amb possibilitat de treball en línia o desconnectat,

així com orientats a àmbits diferents. Tanmateix, i donat que el projecte en questió està

orientat a l'ús d'eines que funcionin en línia, sobre HTML i que siguin disponibles de

manera gratuïta i universal ( amb algunes excepcions en quant a volum de transit ) i siguin

genèriques, (no orientades a un ús professional o especific) en centrarem en aquestes.

Els serveis de cartografia d'accés lliure, amb suport per HTML, i d'ús general més

emprats són:

15


◦ Google maps - http://www.google.es/maps

◦ Bing Maps - http://www.bing.com/maps/

◦ OpenStreetMap - http://www.openstreetmap.org

També existeixen repositoris de mapes locals, amb un gran grau d'integració i

precisió, com és el servei de l'Institut Català de Cartografia, per a Catalunya (ICC).

Aquests serveis es poden emprar amb les seves pròpies APIs, amb APIs de tercers o amb

capes d'abstracció que permeten combinar-los, com pot ser OpenLayers.

(http://openlayers.org/ ).

Aquesta última permet l'ús de diferents serveis i fonts de dades simultàniament

tractant-los com a capes i tenint el gran avantatge de no dependre de cap proveïdor de

cartografia en concret, així com superposar dades pròpies amb força facilitat.

Figura 2.6.3.1 Exemple de software que empra OpenLayers amb superposició de capes.

16

http://openlayers.org/

http://www.openstreetmap.org/

http://www.bing.com/maps/

http://www.google.es/maps

Capítol 3 Objectius del projecte

3 Objectius del projecte

3.1 Objectiu principal

El objectiu principal del projecte és crear una aplicació multi-plataforma basada en

tecnologies web que permeti una ràpida consulta i vertebració dels diferents espais i

esdeveniments en qualsevol moment, lloc i dispositiu.

Ha de permetre una localització, dinamització i promoció, ràpida i efectiva, per el

bé de l'usuari. Consultant per temàtica i localització tant geogràfica com temporal.

També ha de permetre l'administració per part dels administradors d'esdeveniments i la

promoció per part dels ens implicats com podrien ser, per exemple: la Generalitat de

Catalunya, el Institut de Mercats de Barcelona, les diferents diputacions o consells

Comarcals, així com els ajuntaments, entitats de gestió, organitzadors i associacions de

paradistes.

Aquesta aplicació ha de complir l'objectiu principal de la globalització, el anomenat

“pensa global, actua local”. Augmentant la visibilitat d'un bé intangible com el model de

negoci tradicional a la resta del mon.

3.2 Objectius secundaris

3.2.1 Primer objectiu

És fer un assaig general del que seria tot el cicle de vida d'una aplicació. Des del

plantejament inicial.

Començant per la idea d'un servei que pot tindre utilitat, la detecció d'una

necessitat puntual o una innovació en un cert camp aplicable com a producte finalitzat.

Passant per les etapes de investigació de metodologies i tecnologies útils. Continuant amb

la etapa de disseny, on el producte final va agafant forma. Millorant amb els estudis de

17


costos, promoció i rendibilitat. Implementant l'aplicació o projecte en un producte físic real

i funcional.

I per últim fent la seva sortida a mercat i veient els resultats que s'obtenen amb la

corresponent promoció.

Tot això amb una planificació i metodologia estructurada que asseguri un producte

amb uns mínims requisits de qualitat i fiabilitat, així com una seguretat de complir amb els

objectius establerts.

3.2.2 Segon objectiu

És demostrar la viabilitat de crear aplicacions multi-plataforma que funcionin tant a

sistemes mòbils, web i sistemes d'escriptori, entre d'altres.

El principal avantatge d'aquest plantejament és el cost pràcticament nul de

l'adaptació a un nou entorn o plataforma. Aquestes aplicacions han de poder funcionar en

un entorn heterogeni com a aplicació nativa i com a aplicació web remota. Així

aconseguim que l'aplicació sigui ubiqua.

Aquesta aplicació pot tindre accés a determinats recursos hardware, com la

geolocalització, amb les tecnologies actuals.

3.2.3 Tercer objectiu

Es el domini de certs recursos de gran actualitat i demanda, com les eines de

cartografia digital ( Google Maps o similars) i les dades obertes.

Això comporta un aprenentatge en l'ús d'aquestes eines i l'aplicació en múltiples

camps. Donat que la cartografia digital i les dades obertes són d'aplicació transversal en el

18


conjunt de àmbits implicats. Totes aquestes dades es regeixen per un conjunt de normatives

que cal tindre en compte per realitzar una explotació comercial de les mateixes.

Amb tots aquests objectius complerts es pot concloure que una aplicació seguint

aquesta metodologia, encara que hi han camps on no és aplicable, per temes de rendiment,

memòria o fiabilitat, segueix tenint un àmbit d'aplicació enorme, amb un percentatge de

possibles plataformes i clients potencials molt elevat i per tant incrementen el valor com a

professional del desenvolupador que les domina.

19


20

Capítol 4 Especificacions del projecte

4. Especificacions del projecte

4.1 Anàlisis de requisits

En la creació d’una aplicació web per a la localització i dinamització de mercats i

fires, els trets més importants seran:

• Geolocalització de mercats fixes, setmanals i fires periòdiques.

• Interfície web HTML5 multi-plataforma.

• Adaptable a entorns mòbils i d'escriptori.

• Facilitat d'ús per l'usuari final.

• Ús de “responsive design”.

• Accés al hardware del dispositiu per tal de determinar la seva ubicació.

• Possibilitat de funcionar, en un futur, com a aplicació nativa instal·lada.

• Possibilitat de una futura distribució per APP Store.

El comportament de l'aplicació i les seves comunicacions ha de respectuós amb

l'usuari complint amb el seu propòsit amb la màxima simplicitat possible, sense

estridències, ni interfícies sobrecarregades.

4.2 Fonts de dades. Open data

El programa, dintre del possible, ha de nodrir-se de dades obertes. Això simplifica

l'actualització de les dades ja que són públiques i amb un format definit.

21


4.3 Mapes i fonts de dades cartogràfiques

Les dades es geolocalitzaran mitjançant una API HTML de cartografia. Tot i que

els mapes més acurats de Catalunya són els ortofotomapes escala 1:5000 i el topomapes

escala 1:5000 del Institut Català de Cartografia.

S'optara per altres fonts com Google Maps, Bing Maps o Open Street Map, ja que

presenten una millor compatibilitat en els sistemes de coordenades. S'emprarà una capa

d'abstracció com OpenLayers que eviti la dependència d'un proveïdor concret i la selecció

en temps real de la cartografia visualitzada.

4.4 Internacionalització i localització ( i18n, L10n)

El programa, per tal de poder evolucionar, ha de tindre de base, suport per diversos

idiomes, per el que la codificació de caràcters per tal de proveir-ho serà UTF-8.

4.5 Esdeveniments i els seus tipus

L'esdeveniment és l'element central d'aquest programa i per el qual té sentit. No s'ha

de confondre l'esdeveniment amb un punt d'interès (POI), ja que l'esdeveniment, a

diferencia del punt d'interès, té sempre associat un lloc, així com un temps d'inici.

Es podria tindre, tanmateix, múltiples llocs simultanis, o una ruta, però de moment per el

tipus d'esdeveniment a tractar no és necessari.

Tot esdeveniment tindrà un temps d'inici i un temps de fi, podent ser aquest un

esdeveniment puntual ( un sol cop ), un esdeveniment regular ( un cop cada cert període )

o un esdeveniment regular de data flexible ( per exemple el primer cap de setmana de

setembre ).

22


4.6 Gestió d'esdeveniments

La gestió d'esdeveniments la durà a terme l'administrador de l'aplicació mitjançant

la manipulació o carrega des d'un fitxer extern del conjunt de dades disponibles a la base

de dades.

Es proporcionarà un fitxer de fulla de calcul .ODS com a plantilla, així com

mètodes per efectuar-ho. Veure apartat corresponent a importació de dades.

4.7 Compatibilitat

S'ha d'intentar que l'aplicació funcioni en el màxim nombre de terminals possibles.

Donat que d'aquesta manera, s'accedeix a una possible clientela i difusió molt més amplia.

4.7.1 Compatibilitat web

Per l'aplicació s'ha decidit l'ús de : HTML5, CSS, JavaScript i AJAX entre altres.

Això permet el funcionament de l'aplicació en qualsevol plataforma mòbil o d'escriptori

que tingui suport per aquest estàndard. Tanmateix cal recordar que el document definitiu

del mateix es publicarà al 2014 i s'esta treballant amb propostes més o menys avançades.

4.7.2 Compatibilitat nativa (Phonegap)

S'estudia la futura implantació amb un entorn com “PhoneGap”, Dojo o similar que

permeti l'execució, accés al hardware i distribució mitjançant “APP Store” a la

plataforma corresponent. Definint una arquitectura d'aplicació que sigui adequada per

aquesta futura ampliació.

23


24

Capítol 5 Decisions de disseny

5. Decisions de disseny

5.1 Pantalles

Destacar que les pantalles són adaptables a la mida de pantalla i “responsive

design”. Això implica que el mapa i controls es redimensionen automàticament al variar la

resolució de pantalla. Els botons inferiors en cas de passar d'una certa mida mostren només

la icona. Provat des de resolucions de 320x480 fins a 5120x3548 píxels.

Tot seguit a la Figura 5.1.1 es mostra la pantalla principal de l'aplicació, que

s'observa al iniciar l'aplicació, en posició vertical:

Figura 5.1.1 Pantalla principal aplicació en vertical.

Per altra banda, i tal com s'ha comentat a l'inici d'aquest capítol, les pantalles s'han

programat per tal de que siguin adaptables, fet que es mostra clarament en la Figura 5.1.2

on es presenta la pantalla principal de l'aplicació, en posició vertical.

25


Figura 5.1.2 Pantalla principal aplicació en horitzontal

En les dos següents figures es mostra el selector de capes de OpenLayers. Aquesta

eina, proporcionada per OpenLayers permet seleccionar la capa Base ( “Base Layer” ), el

que podem considerar el mapa, i les capes superposades (“Overlays”) com són en aquest

cas el indicador de ubicació i les capes de cadascuna de les categories.

En aquest cas es pot observar que el selector s'adapta a diferents mides de pantalla,

també permet una gran flexibilitat i llibertat en la elecció del proveïdor de cartografia ja

que canviar d'un a altre proveïdor de mapes és tan fàcil com fer dos clics. També permet un

filtre ràpid i senzill per el tipus de esdeveniments a cercar, ja que simplement activant o

desactivant les capes superposades de categoria es mostren el punt o no.

Figura 5.1.3 Pantalla principal amb el selector de capes obert amb la capa “Google Physical”.

26


Figura 5.1.4 Pantalla principal amb la capa “Google Hybrid” seleccionada.

Figura 5.1.5 Pantalla principal amb la capa “OpenStreetMap” seleccionada.

27


El Tooltip d'esdeveniment es mostra quan es polsa sobre la icona de

l'esdeveniment i s'oculta al polsar de nou sobre la icona o una altra icona.

Figura 5.1.7 Pantalla principal un “tooltip” d'esdeveniment obert.

Cerca per nom. Al escriure un text en el camp de cerca de la part inferior esquerra

(a la barra de control) es busca en temps real les coincidències amb els noms

d'esdeveniment presents a la base de dades, realitzant un seguit de suggerències. Es pot

polsar sobre elles per anar a la vista de detall de esdeveniment.

Figura 5.1.8 Pantalla principal amb llistat de cerca per nom visible.

28


Detall de l'esdeveniment, al que s'ha accedit polsant des del tooltip o des del camp

de cerca. Permet el retorn al punt inicial on es va polsar. Es mostra tota la informació de la

que es disposa de l'esdeveniment demanat per mitjà d'una crida AJAX ( crida asíncrona )

cap al servidor web ( PHP ).

Com es pot observar la pantalla està estructurada a mode de taula amb etiqueta i

valor i suporta “scroll” vertical per tal de adaptar-se a diferent mides de pantalla amb

l'estètica de cadascuna de les plataformes emprades.

Tot i que actualment no mostra les imatges, carrega el seu nom. Per el que mostrar-les és

relativament simple.

Aquí es pot realitzar una feina de disseny extensa, incloent imatges e icones, ja que

actualment no mostren cap de les dues, però si el nom del fitxer a emprar, per el que

mostrar-les es relativament simple i com més agradable a a vista sigui, més còmode estarà

l'usuari amb l'aplicació. Es coneixen molts casos de bones aplicacions, que per el fet de no

ser agradables a la vista, no criden l'atenció del usuari. Per el que és un tema a millorar,

amb l'ajuda d'algú especialitzat en usabilitat, gràfics i disseny.

Figura 5.1.9 Pantalla de detalls de l'esdeveniment.

29


5.2 Diagrames

5.2.1 Esquema TOP DOWN del projecte

Figura 5.2.1.1 Diagrama TOP-DOWN de l'aplicació.

30


5.2.2 Diagrama de la BBDD

Figura 5.2.2.1 Diagrama de la base de dades

31


A continuació es detalla el llistat i una breu descripció de taules de la base de dades:

Taula: `mercats_i_Fires`.ìnserirEsdeveniments`

Descripció: Taula temporal que guarda els registres importats des del fitxer de fulla de

càlcul ODS.

Taula: `mercats_i_Fires`.Èsdeveniment`

Descripció: Taula de Esdeveniment, amb informació com nom, descripció, preu

d'entrada i superfície, entre d'altres.

Taula: `mercats_i_Fires`.`Contacte`

Descripció: Taula de contactes de l'esdeveniment.

Taula: `mercats_i_Fires`.`Serveis`

Descripció: Serveis de l'esdeveniment.

Taula: `mercats_i_Fires`.Ìmatge`

Descripció: Imatge associada a alguna altra entitat, tal com esdeveniment, etiqueta,

subCategoria o lloc de celebració.

Taula: `mercats_i_Fires`.Ètiquetes`

Descripció: Etiquetes de l'esdeveniment.

Taula: `mercats_i_Fires`.`Categoria`

Descripció: Categoria de l'esdeveniment.

Taula: `mercats_i_Fires`.`SubCategoria`

Descripció: Subcategoria de l'esdeveniment.

Taula: `mercats_i_Fires`.`Temps`

Descripció: Temps de l'esdeveniment, en futures ampliacions una expressió regular.

32


Taula: `mercats_i_Fires`.Ùbicacio`

Descripció: Ubicació de l'esdeveniment. Latitud, longitud i alçada.

Taula: `mercats_i_Fires`.`Localitat`

Descripció: Localitat de l'esdeveniment. Cal notar que una població pot tindre diverses

localitats.

Taula: `mercats_i_Fires`.`Municipi`

Descripció: Municipi de l'esdeveniment i divisions territorials en les que està inclòs.

Taula: `mercats_i_Fires`.`LlocCelebracio`

Descripció: Lloc de celebració, amb adreça i instruccions per arribar.

Taula: `mercats_i_Fires`.`Contacte_te_Esdeveniment`

Descripció: Taula auxiliar per relació n..m entre esdeveniment i contacte.

Taula: `mercats_i_Fires`.`LlocCelebracio_te_Esdeveniment`

Descripció: Taula auxiliar per relació n..m entre esdeveniment i lloc de celebració.

Taula: `mercats_i_Fires`.Èsdeveniment_te_Serveis`

Descripció: Taula auxiliar per relació n..m entre esdeveniment i serveis.

Taula: `mercats_i_Fires`.Ètiquetes_te_Esdeveniment`

Descripció: Taula auxiliar per relació n..m entre esdeveniment i etiquetes.

Taula: `mercats_i_Fires`.`LlocCelebracio_te_Imatge`

Descripció: Taula auxiliar per relació n..m entre imatge i lloc de celebració.

Taula: `mercats_i_Fires`.`SubCategoria_te_Imatge`

Descripció: Taula auxiliar per relació n..m entre imatge i subCategoria.

33


Taula: `mercats_i_Fires`.`Esdeveniment_te_Imatge`

Descripció: Taula auxiliar per relació n..m entre imatge i Esdeveniment.

Taula: `mercats_i_Fires`.`Etiquetes_te_Imatge`

Descripció: Taula auxiliar per relació n..m entre imatge i etiquetes.

Com s'observa per la seva estructura, la base de dades controla els esdeveniments i

la seva informació relacionada. Aquesta informació inclou el seu lloc de celebració

( ubicació amb coordenades, localitat, municipi, etc ... ) podent-se celebrar un

esdeveniment en múltiples llocs.

També ofereix l'accés als serveis de l'esdeveniment, com ara lavabos, consigna,

aparcament, etc... La informació de contacte pública. url , email , telèfon , fax , skype ....

(Poden existir diversos contactes per esdeveniment i diversos esdeveniments per contacte )

La categoria són Fires , mercats municipals i mercats periòdics , però es crea

dinàmicament a partir del ODS importat .

La subcategoria és per a les fires o mercats més especialitzades . Cada categoria té

com a mínim un subcategoria genèrica idèntica per simplificar les consultes ( per a casos

que no s'ajusten a una subcategoria concreta ) Les subcategoria poden ser per exemple Fira

multisectorial , mercat medieval , fira de circ , etc ....

Etiquetes és les diferents temàtiques que toca la fira / mercat ( pe : Artesania ,

restauració , etc ... )

La Imatge, és l'accés als fitxers de fotografies o cartells des de cada un dels punts

necessaris. Relaciona les fotografies enllaçades d'una taula amb el seu fitxer corresponent .

34


Com poden ser Esdeveniment, lloc de celebració Etiqueta o subCategoria. Això

inclourà cartells a part de fotografies.

El tipus de dades en les columnes MySQL de la taula Ubicació anomenats alçada ,

longitud i latitud s'introdueixen com VARCHAR, en lloc de FLOAT. El tipus FLOAT fa

més difícil la seva comparació exacta per saber si és exactament aquest mateix punt .

FLOAT fa una aproximació per mitjà de coma flotant i no és igual al seu equivalent en text

de VARCHAR.

Així mateix, els noms de columnes de MySQL no han de contenir caràcters no

ASCII. Pe: alçada , adreça - > alcada , adreca...

A la taula Esdeveniment el camp "preu" pot ser null o 0 en alguns casos , ja que en

altres tipus de fires o esdeveniments pot ser útil . Serà una cadena ( multilínia ) . Ja que així

es pot posar com a text els diferents preus , general , jubilats , estudiants , grups ....

La taula " Esdeveniment " presenta el camp " horari ". Aquest horari encara que ja

estarà cobert per les expressions temporals , en cas de requerir pot mostrar els horaris d'una

manera més amigable a l'usuari ( text redactat) sense necessitat de gaire programació.

35


5.2.3 Diagrama de flux

Figura 5.2.3.1 Diagrama de flux de l'aplicació.

36


5.3 Arquitectura de sistema

Figura 5.3.1 Arquitectura del sistema per capes.

37


5.4 Elecció de tecnologies

5.4.1 PhoneGap

Encara que no s'ha implementat, s'han escollit la resta de tecnologies pensant en fer

ús de PhoneGap, o alguna llibreria d'abstracció de hardware similar, en un futur. Això

facilitaria la seva distribució com aplicació nativa.

5.4.2 HTML5, CSS3, JAVASCRIPT, AJAX

S'ha escollit fer ús de tecnologies web com HTML5, CSS3, JavaScript i AJAX per

la quantitat de dispositius suportats, el mercat potencial i gran la disponibilitat d'eines de

desenvolupament. És una aposta de futur, que encara que té costos en quant a rendiment,

corba d'aprenentatge de gran quantitat de tecnologies implicades i dificultat

d'implementació i optimització.

5.4.3 jQuery

S'ha escollit la llibreria jQuery, per tres raons principals, la primera la seva facilitat

d'us, segona que està molt estesa a totes les plataformes, i això possibilita una

compatibilitat amb terceres llibreries molt gran i tercera, serveix de base a jQuery UI i a

jQuery Mobile que tenen molt bons acabats d'interfície gràfica amb relativament poca

programació.

5.4.4 jQuery Mobile

Donat que un dels punts principals era tindre el màxim de compatibilitat amb totes

les plataformes possibles jQuery Mobile era una molt bona opció.

38


Presenta compatibilitat amb gairebé tots els navegadors del mercat, i presenta una

gran compatibilitat amb llibreries de tercers.

5.4.5 OpenLayers v2

L'elecció d'OpenLayers era obvia, donat que no es vol dependre de cap proveïdor

de mapes en concret, i es vol inserir dades pròpies fàcilment. OpenLayers proporciona

diverses opcions de càrrega de punts d'interès (POI), però potser la més simple i eficient és

el que anomenen punts dinàmics per fitxer TSV, que és la que emprarem.

5.4.6 PHP

Per la comunicació entre client i servidor s'ha escollit PHP, principalment per les

facilitats que dona en quant a entorn de desenvolupament, la seva fiabilitat i al mateix

temps és un entorn molt estès, estàndard i multiplataforma. També té bones

implementacions per accés a bases de dades com MySQL i eines per facilitar les

comunicacions com les eines per retornar JSON. A més presenta característiques que el fan

adequat per fer un debug i monitorització del seu funcionament.

5.4.7 JSON

El format JSON ( JavaScript Object Notation ) és un subconjunt de la notació literal

d'objectes de JavaScript amb un format lleuger per l'intercanvi de dades. És una bona

alternativa molt estesa, simple i versàtil respecte a XML. Proporciona una bona relació

entre robustesa, facilitat d'ús i legibilitat. I és molt adequat per fer-lo servir en crides des de

JavaScript ja que la carrega és directa sense conversions de tipus. S'ha emprat per totes les

peticions d'informació a servidor (PHP), exceptuant les de punts d'interès(POI) per raons

tècniques.

39


5.4.8 TSV

S'ha emprat el format de fitxer TSV, generat a partir d'un PHP per retornar POI cap

a OpenLayers. Aquest últim suporta infinitat de formats, però el més simple d'ells que

complia amb les nostres necessitats era aquest. És important, dintre del possible, mantenir

la simplicitat, ja que accelera el desenvolupament.

5.49 MySQL

Com a base de dades s'ha emprat MySQL, principalment degut a que és una base de

dades multi-plataforma, amb llicencia GPL dual, per el que si no es treu profit comercial és

“gratis”, té integritat referencial si s'empra amb el motor InnoDB i molt bones interfícies

amb PHP.

5.5 Clients suportats

En principi hauria de funcionar a qualsevol navegador web amb compatibilitat amb

HTML5, CSS3 i JavaScript activat, ja que s'ha buscat que sigui simple i estàndard.

Tanmateix s'ha provat en els següents navegadors:

◦ Google Chrome Linux 24.0.1312.70

◦ Mozilla Firefox Linux 21.0

◦ Google Chrome Beta Android

5.6 Esdeveniments

Tal com s'ha vist a la estructura de la base de dades, el programa sencer s'estructura

al voltant de la figura de l'esdeveniment.

40


Aquest esdeveniment es defineix per un ID numèric que no es pot repetir, però tota

la resta de camps, al no ser claus primaries ni foranies poden repetir-se. Això proporciona

molta potencia ja que ens podem trobar amb fires que es diguin igual a diferents indrets

( pe: Fira Medieval ), però cal vigilar molt amb les consultes i les condicions per tal de no

repetir elements. Això ha condicionat també la elecció de InnoDB com a motor de

MySQL, ja que permet una seguretat en les dades important.

5.7 Importació i mineria de dades d'esdeveniments

Un dels punts més interessants del programa es la importació de dades. Aquestes

dades, en el cas de Catalunya, a dia d'avui es troben molt disperses, distribuïdes a les

Dades Obertes de la Generalitat de Catalunya en el cas de mercats fixes, i algunes fires, a

les diputacions de cadascuna de les províncies (i exceptuant la de Barcelona ) molt poc

visibles, i a les webs de cada ajuntament els diferents mercats setmanals i fires. A això cal

sumar les webs temàtiques, que recopilen tot un seguit d'esdeveniments més o menys

actualitzats.

Això presenta la problemàtica de que no es pot agafar uns pocs llocs com a

referencia ja que són incomplets, per el que s'ha de recórrer a mètodes nous.

Una opció era l'anomenada mineria de dades, aquesta és una opció molt vàlida, tanmateix a

un entorn web depèn molt de l'estructura de les webs d'on s'ha de fer la mineria i d'un

mateix esdeveniment, a dos llocs diferents pots trobar discordances. Amb el que un mètode

automàtic teòricament ràpid acaba resultant lent i pesat.

L'altra opció, és emprar eines d'ofimàtica. Són potents, estan àmpliament adoptades

i permeten un tractament ràpid i simple de gran quantitat de dades. Això representa un

avantatge, donat que a Catalunya molts d'aquests esdeveniments depenen de organismes

oficials, empreses o particulars i si es proporcionen una serie d'eines gratuïtes, multi-

plataforma i ja conegudes, com LibreOffice, és relativament fàcil aconseguir dades fiables

i actualitzades.

41


Mitjançant una plantilla de fulla de càlcul (.ods) creada per aquest propòsit, on cada

esdeveniment té una fila i cada fila un seguit de columnes que defineixen els detalls de

l'esdeveniment. També s'han afegit comentaris a les capçaleres de cadascuna de les

columnes del full de càlcul per simplificar la seva comprensió. Com que aquest entorn està

estès, és té l'avantatge que qualsevol, sense més coneixement que el de les eines de

ofimàtica, pot editar les dades dels esdeveniments.

Fins i tot, en cas de no col·laboració dels organitzadors, és una bona opció, ja que

gran part de la població en actiu té coneixements per editar-ho. És feina del

desenvolupador fer una carrega simple i rapida d'aquestes dades.

Aquesta importació a partir de fulla de càlcul es pot fer amb dos alternatives, que ha

de realitzar l'administrador del sistema, ja que es treballa directament sobre la base de

dades i és delicat. Per sort el mètode que s'ha desenvolupat és ràpid i simple, es pot fer una

importació de centenars d'esdeveniments en pocs segons.

5.7.1 Importació amb CSV i MySQL (Erroni).

Des del terminal de Linux executar les següents comandes per transformar el ODS

a CSV:

soffice --headless --convert-to csv ./*.ods

Acte seguit executar des d'una consola SQL com PHPMyAdmin o

MySQLWorkbench el següent:

LOAD DATA INFILE 'mycsvfile.csv' INTO TABLE inserirEsdeveniments IGNORE 1

LINES;

Aquest mètode té el gran avantatge de que és fàcilment automatitzable. Peró

presenta un gran defecte: Si la taula no té el mateix ordre de columnes, i al no emprar

capçaleres pot provocar importacions errònies amb molta facilitat.

42


Si li afegim que no tots els servidors webs econòmics permeten accés al terminal

d'usuari i encara menys l'execució de certes comandes, és un mètode, que tot i presenta

potencial potencial no és factible.

5.7.2 Importació amb PHPMyAdmin (Correcte)

La segona es basa en l'ús de les utilitats de phpmyadmin, present a gairebé la

totalitat de servidors web.

Encara que té un parell de passos manuals, la creació i importació de la taula és

extremadament ràpida i proporciona una flexibilitat que resulta sorprenent. Es poden

importar noves dades des de cero en qüestió de pocs segons. Tal i com es mostra al

esquema següent:

Figura 5.7.2.1 Diagrama d'importació de ods amb PHPMyAdmin

43


El primer pas és executar l'script “create_DDBB.sql” proporcionat. Això crea

l'estructura de la base de dades buida, amb la taula temporal i les Foreign Key. Obrir

phpMyAdmin (disponible a molts servidors web del mercat) i dins de la base de dades

"mercats_i_Fires", ja creada, clicar a la pestanya d'importar i seleccionar el següent fitxer

ODS: "BBDD camps interessants per la bbdd_v1.ods"

Aquest ja té els camps adequats amb els noms de capçaleres corresponents per a la

importació i el nom de fulla adequat per importar a la taula temporal. És important

assegurar-se de marcar els següents “checkbox”:

• La primera línia de l'arxiu conté els noms de columna de la taula (si no està activat

la primera línia serà part de les dades)

• No importar files buides

Això pobla la taula temporal amb les dades del ODS. Tot seguit, executar el

següent script: “insercions amb fk.sql”. Aquest tracta les dades de la taula temporal i

població la resta de taules generant les relacions i foreign keys automàticament (generant

les relacions de fora a dins).

En uns pocs passos hem pogut importat la base de dades de tots els esdeveniments

de Catalunya ( segons dades actuals són uns 1300 ) i podem fer-los servir immediatament a

l'aplicació. En un futur, per automatitzar completament es pot fer enginyeria inversa de les

eines de PHPMyAdmin, per tal usar i/o emular amb programació PHP pròpia.

5.8 Fonts de mapes

Existeixen molts servidors de cartografia de diversos tipus i àmbits però s'ha optat

per implementar els més amplis, genèrics fiables, compatibles amb HTML i d'ús lliure.

44


Cal esmentar que els mapes del Institut Cartogràfic de Catalunya, en les seves

diverses variants, com poden ser els anomenats topomapa i ortofotomapa són un dels

recursos lliures de major qualitat en quant a precisió, geografia i toponímia.

Tanmateix estan en projecció WGS84, que si bé és compatible amb OpenLayers, no

pot coexistir amb els mapes mercator sense un intens treball d'adaptació de les llibreries

per una conversió de coordenades sense problemes, i s'han descartat única i exclusivament

per aquesta raó. Deixant-los per possibles futures millores. Dels altres mapes cal destacar

el següents:

• Google maps – Ús lliure, molt extens i complert, amb tres tipus de mapes diferents.

Físic, de carrer(fotogràfic) e hibrid (fotogràfic) amb toponímia.

• Bing – Similar a Google Maps, amb un nivell de qualitat similar. Oferint dos tipus

de mapes. De carreteres i aeri amb etiquetes.

• OpenStreetMap – Mapa col·laboratori i lliure, fruit de la feina de gairebé 20 anys,

permet modificar la seva aparença per adaptar-lo a diversos usos. (veure

http://maps.stamen.com). Emprat com alternativa plenament lliure del mapes

esmenats abans. Tanmateix no disposa de mapa fotogràfic, tot el mapa és edició de

símbols i vectors, però té el gran avantatge que presenta més tipus de vies i

elements que els altres, tals com carrils bici, senders de gran recorregut, coves,

llocs de culte, benzineres, i un llarg llistat.

5.9 Categories

Cadascuna de les categories, encara que la idea és tindre les tres inicials ( Mercats,

Mercats setmanals i fires) es genera a partir de les dades importades des del fitxer ODS.

El mateix passa amb les subcategories, etiquetes i serveis. Això proporciona una flexibilitat

enorme a l'aplicació, que simplement amb modificar el conjunt de dades es mostra una

nova categoria fàcilment.

45

http://maps.stamen.com/


5.10 Geolocalització d'esdeveniments (per BBDD)

Cadascun dels esdeveniment que es mostren al mapa han d'estar geolocalitzats, en

principi amb una sola localització per esdeveniment.

La localització encara que al mapa només té en compte les coordenades en

projecció Mercator, també conté informació de lloc, adreça, localitat i municipi, donant

una gran riquesa i flexibilitat a la informació continguda.

5.11 Elements gràfics

5.11.1 Layouts

La disposició d'elements, al ser una aplicació multi-plataforma, ha de ser neutral per

les guies d'estil de cadascuna de les plataformes, per el que s'ha optat per aprofitar la

interfície de OpenLayers i afegir-li una barra de controls inferior, presentant dos

avantatges:

• L'usuari no ha d'aprendre el seu funcionament ja que és d'ús relativament habitual

en aplicacions de tot tipus.

• Donat que s'emprarà amb dispositius mòbils està en una posició adequada per

polsar els controls inferiors amb els dits polzes, augmentant així la seva usabilitat.

5.11.2 CSS

Els CSS s'han intentat conservar i respectar dintre del possible, ja que tant els de

jQuery Mobile com els de OpenLayers són de gran qualitat, i vistositat i podrien conviure

sense massa modificacions. S'empren diversos CSS per donar l'aspecte final a l'aplicació,

per ordre de més a menys prioritat són els següents:

46


• Temes CSS propis.

• Temes CSS de OpenLayers

• Temes CSS de jQuery

5.11.3 Logo e icona de programa

La icona del programa està representada per la silueta d'una persona amb un carro

de la compra, en color en negre amb un fons transparent.

Figura 5.11.3 Logo de l'aplicació

5.11.4 UI e icones

Per la interfície d'usuari (UI) s'ha optat per uns colors neutres i propers als colors de

la interfície de OpenLayers. Sent aquests un colors blaus clars. Per al usuari són colors

agradables i relaxants que contribueixen a millorar l'experiència d'usuari. Les icones

emprades són les pròpies de la interfície de OpenLayers per el controls propis de

OpenLayers, i les pròpies de jQuery Mobile per la barra inferior i les pantalles de “Quant

a” i dels detalls d'esdeveniment.

A la base de dades es poden definir també les icones per cadascuna de les

categories, subcategories, etiquetes i serveis, encara que al mapa només es mostren les de

categoria, però això aporta una gran flexibilitat per possibles ampliacions.

47


Tanmateix al fitxer de configuració ./php2json/config/config.php s'han definit uns

valor per efecte per les icones de categoria, en cas de no haver-hi definida per la categoria

actual, així com unes mides i offset per tal de posicionar la icona al mapa apuntant al lloc

adequat.

5.11.5 Fotografies

Per tal de representar visualment els esdeveniments, les seves subcategories, el lloc

de celebració i les etiquetes, i millorar la seva estètica, s'ha preparat la base de dades per

enllaçar a diversos fitxers gràfics per cadascun d'aquests elements. Aquests fitxers poden

ser fotografies o cartells amb format png o jpg. Que són el “estàndard de facto” suportat

per tots els navegadors.

Tanmateix des de el fitxer de importació .ods només permet carregar un sol fitxer

gràfic per esdeveniment. Sense poder afegir per la resta d'elements. Des de la base de

dades es poden afegir la resta, o en cas de considerar-ho necessari, en un futura ampliació,

programar un mètode d'inserció més còmode.

48

Capítol 6 Desenvolupament

6. Desenvolupament

6.1 Frontend

Com ja s'ha comentat tot el desenvolupament es basa en HTML5, CSS3 i

JavaScript al costat client. (Navegador web). Es fa ús de les llibreries jQuery, jQuery

Mobile i OpenLayers.

jQuery és una llibreria que proporciona eines i funcions extra a JavaScript per

accelerar i facilitar el desenvolupament. Entre aquestes hi han les peticions emprades.

jQuery Mobile proporciona un entorn visual multi-plataforma adaptat tant a

dispositius mòbils com de sobretaula, útil per a creació de la barra de control inferior.

OpenLayers proporciona el mapes, el control i carrega de les capes, localització,

així com els controls per pantalla e interfície d'usuari dels mapes.

6.2 Backend

Al costat servidor es tracten les peticions que arriben al PHP i després de consultar-

les a la base de dades MySQL prèviament creada, configurada i tractada, es retornen les

dades demanades. Totes les peticions es retornen amb format JSON per simplicitat,

exceptuant la de dynamic markers que retorna TSV per demanda de OpenLayers. Cada

funció rep el seu propis paràmetres.

Tanmateix totes les funcions tenen un paràmetre anomenat debug que quan és cert

( ?debug=true ) retorna informació útil per debugueig, tal com el temps emprat, la petició

que s'ha fet al MySQL, entre altres. Cada fitxer PHP crida al mateix fitxer de configuració

( config.php ) on consta entre d'altres els paràmetres d'accés a la base de dades, així com

alguns paràmetres per defecte. Cada fitxer PHP inclou la seva pròpia consulta MySQL com

a cadena de text.

49


6.3 Comunicació entre el Frontend i el Backend

Tota la comunicació es realitza per mitja de crides asíncrones des de jQuery cap als

fitxers PHP, retornant aquestos les dades en format JSON i TSV quan estan disponibles

sense obstaculitzar la correcta execució de la resta de l''aplicació.

6.4 Fitxers

6.4.1 Frontend

Encara que al frontend hi han infinitat de fitxers implicats entre CSS, JavaScript i

recursos gràfics, ens centrarem en els de creació pròpia, ja que les llibreries no s'han

modificat i estan tal com es van descarregar.

• Fitxer: ./html/favicon.ico i ./html/favicon.png

• Descripció: Fitxers de la icona de la aplicació web. El .ico per Internet Explorer i

.png per la resta.

• Paràmetres: CAP

• Retorna: CAP

• Fitxer: ./html/todas_capas.html

• Descripció: Fitxer de la Pantalla principal del programa. Mostra el mapa i a barra

inferior d'eines, així com carregar les capes dinàmiques al mapa i gestionar la

ubicació.


• Retorna: CAP

• Fitxer: ./html/detall_mercat.html

• Descripció: Fitxer de la fitxa detalla del mercat. Efectua la petició per mostrar tots

el detalls d'un esdeveniment per AJAX. Mostra el botó de tornar enrere.

50


• Paràmetres:

ID: Identificador numèric del mercat de que es vol informació. Ve

proporcionat de de totes_capes.html

• Retorna: CAP

• Fitxer: ./html/about.html

• Descripció: Fitxer de la fitxa de l aplicació. També mostra el botó de tornar enrere.


• Retorna: CAP

•

• Fitxer: ./html/css/styles.css

• Descripció: Fitxer de fulla d'estils propi de l'aplicació. Aquí es controla el

“responsive design” del botons, la estètica de la barra inferior i la llista de la cerca,

així com la mida del mapa.


• Retorna: CAP

• Fitxer: ./html/css/openlayers.examples.style.css

• Descripció: Fitxer de fulla d'estils propi de l'aplicació. Aquí es reseteja el CSS, i

controla la integració de OpenLayers amb la resta de l'aplicació


• Retorna: CAP

• Fitxer: ./html/js/hacks.js

• Descripció: Fitxer de recursos i funcions comú entre les pantalles d'execució. Es

detecta a quina pantalla s'esta i gestiona el comportament de la mateixa.


• Retorna: CAP

•

51


6.4.2 Backend

PHP

• Fitxer: ./php2json/config/config.php

• Descripció: Fitxer de configuració que carrega les dades de connexió a la base de

dades, tant per debug com per producció, aixi com variables per defecte del mapa.

S'empra en tots els fitxer php, amb include. Les variables carregades són

$DB_server, $DB_user, $DB_pass, $DB_schema per la connexió. I

$default_map_icons_size, $default_map_icons_Offset, $default_map_popup_size,

$default_Categoria_icon per als mapes.


• Retorna: CAP

• Fitxer: ./php2json/categories_totes.php

• Descripció: Fitxer que retorna totes les categories creades a la base de dades.

• Paràmetres: debug - si debug=true retorna la informació de debug.

• Retorna: Objecte JSON amb Array de categories dintre de data i informació de

debug a trace.

• Exemple d'us: ./php2json/categories_totes.php?debug=true. On es retorna el que es

mostra tot seguit:

{

trace: {

timestamp: 1378132819,

executionTime: 0,

params: {

debug: "true"

},

StringSQL: "SELECT * FROM `Categoria`;",

processtime: 0.284352

},

data: [

{

52


idCategoria: "1",

nomCategoria: "Mercat",

descripcioCategoria: "",

iconaCategoria: ""

},

{

idCategoria: "2",

nomCategoria: "Fira",


iconaCategoria: ""

}

]

}

Codi 6.4.2.1 Cadena JSON generada per categories_totes.php?debug=true

• Fitxer: ./php2json/esdeveniment_nom_conte.php

• Descripció: Fitxer que retorna un llistat de esdeveniments que contenen el

contingut del paràmetre conté al seu nom.

• Paràmetres: conte: string a cercar al nom d'esdeveniment.

debug: si debug=true retorna la informació de debug.

• Retorna: Objecte JSON amb Array de esdeveniments (ID i nom) dintre de data i

informació de debug a trace.

• Exemple d'us: ./php2json/esdeveniment_nom_conte.php?conte=erc&debug=true.

On es retorna el que es mostra tot seguit:

{

trace: {


executionTime: 0,

params: {

conte: "erc",

debug: "true"

},

StringSQL: " SELECT * FROM `Esdeveniment` WHERE

nomEsdeveniment LIKE "%erc%" ; ",

processtime: -0.676802

53


},

data: [

{

idEsdeveniment: "1",

nomEsdeveniment: "Mercat del Guinardó "

},

{


nomEsdeveniment: "Mercat del Carmel"

}

]

}

Codi 6.4.2.2 Cadena JSON generada per el php

• Fitxer: /php2json/esdeveniment_detalls_per_ID.php

• Descripció: Fitxer que retorna els detalls d'un esdeveniment donat per el seu ID.

• Paràmetres:


ID: id del esdeveniment a cercar.

• Retorna: Objecte JSON amb el objecte Esdeveniment dintre de data i informació de

debug a trace.

• Exemple d'us: ./php2json/esdeveniment_detalls_per_ID.php?ID=2&debug=true.

On es retorna el que es mostra tot seguit:

{

trace: {


executionTime: 0,

params: {

ID: "2",

debug: "true"

},

StringSQL: " SELECT * FROM `Esdeveniment` WHERE

idEsdeveniment = 2 ; ",


},

54


data: [

{


nomEsdeveniment: "Mercat del Carmel",

descripcioEsdeveniment: "Adossat a un altre

edifici. Consta de quatre ",

horariEsdeveniment: "Dill Dij 7:00 � �

14:00, Div-Diss 7:00 15:0", �

preuEntrada: "Gratuït",

numVisites: "0",

dataCreacio: "0000-00-00 00:00:00",

numParades: "73",

superficie: "9465",

observacionsEsdeveniment: "CAP"

}

]

}


• Fitxer: ./php2json/esdeveniment_per_ID_tot.php

• Descripció: Fitxer que retorna tota la informació relacionada amb un esdeveniment

donat per el seu ID.

• Paràmetres:


ID: id del esdeveniment a cercar.

• Retorna: Objecte JSON un objecte que conté tota la informació relacionada amb un

id de esdeveniment dintre de data i informació de debug a trace.

• Exemple d'us: ./php2json/esdeveniment_per_ID_tot.php?ID=2&debug=true. On es

retorna el que es mostra tot seguit:

{

trace: {


executionTime: 0,

params: {

ID: "2",

55


debug: "true"

},

StringSQL: [

" SELECT * FROM Èsdeveniment` WHERE

idEsdeveniment = 2 ; ",

" SELECT ìdContacte`, ùrl`, èmail`,

`telefon`, `fax`, `skype`, `xarxesSocials` FROM

`mercats_i_Fires`.`Contacte`,

`mercats_i_Fires`.`Contacte_te_Esdeveniment` WHERE

Èsdeveniment_idEsdeveniment`= 2 AND ìdContacte`=`Contacte_idContacte`

",

" SELECT ìdTemps`, `tempsInici`, `tempsFi`

FROM `mercats_i_Fires`.`Temps` WHERE Èsdeveniment_idEsdeveniment`= 2 ",

" SELECT ìdservei`, `nomServei`,

`descripcioServei`, ìconaServei` FROM `mercats_i_Fires`.`Serveis`,

`mercats_i_Fires`.Èsdeveniment_te_Serveis` WHERE ìdservei` =

`Serveis_idservei` AND Èsdeveniment_idEsdeveniment`= 2 ",

" SELECT ìdCategoria`, `nomCategoria`,

`descripcioCategoria`, ìconaCategoria`, ìdSubCategoria`,

`nomSubCategoria`, `descripcioSubCategoria`, ìconaSubCategoria` FROM

`mercats_i_Fires`.`Categoria`, `mercats_i_Fires`.`SubCategoria`,

`mercats_i_Fires`.Èsdeveniment` WHERE `Categoria`.ìdCategoria` =

`SubCategoria`.`Categoria_idCategoria` AND

`SubCategoria`.ìdSubCategoria`=

Èsdeveniment`.`SubCategoria_idSubCategoria` AND

Èsdeveniment`.ìdEsdeveniment`= 2 ",

" SELECT `municipi`, `comarca`,

`provincia`, `comunitatAutonoma`, èstat`, `nomLocalitat`, `latitud`,

`longitud`, àlcada`, `nomLlocCelebracio`, àdreca`, `codiPostal`,

`comArribar` FROM `mercats_i_Fires`.`LlocCelebracio_te_Esdeveniment`,

`mercats_i_Fires`.`LlocCelebracio`, `mercats_i_Fires`.Ùbicacio`,

`mercats_i_Fires`.`Localitat`, `mercats_i_Fires`.`Municipi` WHERE

Èsdeveniment_idEsdeveniment` = 2 AND `LlocCelebracio_idLlocCelebracio` =

ìdLlocCelebracio` AND ìdUbicacio` = Ùbicacio_idUbicacio` AND

ìdLocalitat` = `Localitat_idLocalitat` AND ìdMunicipi` =

`Municipi_idMunicipi` ; ",

" SELECT ìdEtiquetes`, `nomEtiqueta`,

`descripcioEtiqueta`, ìconaEtiqueta` FROM `mercats_i_Fires`.Ètiquetes`,

56


`mercats_i_Fires`.Ètiquetes_te_Esdeveniment` WHERE

Èsdeveniment_idEsdeveniment`= 2 AND

Ètiquetes_idEtiquetes`=ìdEtiquetes` ; ",

" SELECT ìdImatge`, `pathFitxer` FROM

`mercats_i_Fires`.Ìmatge`, `mercats_i_Fires`.Èsdeveniment_te_Imatge`

WHERE Èsdeveniment_idEsdeveniment`= 2 AND ìdImatge`=Ìmatge_idImatge` ;

"

],


},

data: {

Esdeveniment: [

{


nomEsdeveniment: "Mercat del Carmel",

descripcioEsdeveniment: "Adossat a un

altre edifici. Consta de quatre ",

horariEsdeveniment: "Dill Dij 7:00 � �

14:00, Div-Diss 7:00 15:0", �

preuEntrada: "Gratuït",

numVisites: "0",

dataCreacio: "0000-00-00 00:00:00",

numParades: "73",

superficie: "9465",

observacionsEsdeveniment: "CAP"

}

],

contacte: [

{

url:

"http://www.mercatdelcarmel.com/",

email: "[email protected]

",

telefon: "934204638",

fax: "NO",

skype: "NO",

xarxesSocials:

"https://www.facebook.com/mercat.delcarmel?ref"

57


}

],

temps: [

{

tempsInici: "DIARI",

tempsFi: "DIARI"

}

],

Serveis: [

{

nomServei: "Aparcament, lliurament a

domicili, pagament a",

descripcioServei: "",

iconaServei: ""

}

],

categoria: [

{

idCategoria: "1",

nomCategoria: "Mercat",


iconaCategoria: "",

idSubCategoria: "1",

nomSubCategoria: "Municipal",

descripcioSubCategoria: "",

iconaSubCategoria: ""

}

],

ubicacio: [

{

municipi: "Barcelona",

comarca: "Barcelonès",

provincia: "Barcelona",

comunitatAutonoma: "Catalunya",

estat: "Espanya",

nomLocalitat: "Barcelona",

latitud: "41.447873",

longitud: "2.155724",

58


alcada: "0",

nomLlocCelebracio: "C/Llobregos",

adreca: "C/Llobregos, 149",

codiPostal: "8032",

comArribar: ""

}

],

Etiquetes: [

{

idEtiquetes: "1",

nomEtiqueta: "Variat",

descripcioEtiqueta: "",

iconaEtiqueta: ""

}

],

imatges: [

{

pathFitxer: "CAP"

}

]

}

}


• Fitxer: ./php2json/imatges_subCategoria.php

• Descripció: Fitxer que retorna un array de imatges associades a una subCategoria

donada per la seva ID.

• Paràmetres:


ID: id de la subCategoria a cercar.

• Retorna: Objecte JSON amb Array de noms de fitxer d'imatges dintre de data i


• Exemple d'us: ./php2json/imatges_subCategoria.php?ID=1. On es retorna el que es

mostra tot seguit:

{

59


trace: {


executionTime: 0,

params: {

ID: "1",

debug: "true"

},

StringSQL: [

" SELECT Ìmatge`.ìdImatge`,

Ìmatge`.`pathFitxer`,

`SubCategoria_te_Imatge`.`SubCategoria_idSubCategoria`,

`SubCategoria_te_Imatge`.Ìmatge_idImatge` FROM

`mercats_i_Fires`.`SubCategoria_te_Imatge`, `mercats_i_Fires`.Ìmatge`

WHERE `SubCategoria_te_Imatge`.Ìmatge_idImatge` = Ìmatge`.ìdImatge`

AND `SubCategoria_te_Imatge`.`SubCategoria_idSubCategoria`= 1 ; "

],


},

data: [

{

idImatge: "1",

pathFitxer: "./Imatge1.png",

SubCategoria_idSubCategoria: "1",

Imatge_idImatge: "1"

}

]

}


• Fitxer: /php2json/imatges_lloc.php

• Descripció: Fitxer que retorna un array de imatges associades a una lloc de

celebració donada per la seva ID.

• Paràmetres:


ID: id del lloc de celebració a cercar.

60




• Exemple d'us: ./php2json/imatges_lloc.php?ID=1&debug=true. On es retorna el

que es mostra tot seguit:

{

trace: {


executionTime: 0,

params: {

ID: "1",

debug: "true"

},

StringSQL: [


Ìmatge`.`pathFitxer`,

`LlocCelebracio_te_Imatge`.`LlocCelebracio_idLlocCelebracio`,

`LlocCelebracio_te_Imatge`.Ìmatge_idImatge` FROM

`mercats_i_Fires`.`LlocCelebracio_te_Imatge`, `mercats_i_Fires`.Ìmatge`

WHERE `LlocCelebracio_te_Imatge`.Ìmatge_idImatge` = Ìmatge`.ìdImatge`

AND `LlocCelebracio_te_Imatge`.`LlocCelebracio_idLlocCelebracio`=1 "

],


},

data: [

{

idImatge: "1",


LlocCelebracio_idLlocCelebracio: "1",


}

]

}


61


• Fitxer: ./php2json/imatges_etiqueta.php

• Descripció: Fitxer que retorna un array de imatges associades a una etiqueta donada

per la seva ID.

• Paràmetres:


ID:id de la etiqueta a cercar.



• Exemple d'us: ./php2json/imatges_etiqueta.php?ID=1&debug=true . On es retorna

el que es mostra tot seguit:

{

trace: {


executionTime: 0,

params: {

ID: "1",

debug: "true"

},

StringSQL: [


Ìmatge`.`pathFitxer`, Ètiquetes_te_Imatge`.Ètiquetes_idEtiquetes`,

Ètiquetes_te_Imatge`.Ìmatge_idImatge` FROM

`mercats_i_Fires`.Ètiquetes_te_Imatge`, `mercats_i_Fires`.Ìmatge` WHERE

Ètiquetes_te_Imatge`.Ìmatge_idImatge` = Ìmatge`.ìdImatge` AND

Ètiquetes_te_Imatge`.Ètiquetes_idEtiquetes`=1 "

],

processtime: -0.694732

},

data: [

{

idImatge: "1",


Etiquetes_idEtiquetes: "1",


}

62

]

}


• Fitxer: ./php2json/markers/textfile_dinamic_POI.php

• Descripció: Fitxer que retorna en format TSV un seguit de punt d'interès inclosos a

la categoria donada per la seva ID

• Paràmetres:

debug: si debug=true retorna la informació de debug, i tota la resta

d'informació amb JSON

ID: id de la categoria a cercar.

• Retorna: Fitxer de text amb format TSV (Tab Separated Values), on la primera línia

és el nom de columna i els següents els punts a col·locar al mapa.

• Exemple d'us: ./php2json/markers/textfile_dinamic_POI.php?idCategoria=1. On es

retorna el que es mostra tot seguit:

lat lon icon iconSize iconOffset title description

popupSize

41.418152 2.177162 features/icons/viewpoint.png 32,32

0,-32 Mercat del Guinardó Adossat a un altre

edifici. Consta de dues pu<a style="color:green"

href="detall_mercat.html?ID=1" >Veure mes Detalls</a> 200,80


0,-32 Mercat del Carmel Adossat a un altre

edifici. Consta de quatre <a style="color:green"

href="detall_mercat.html?ID=2" >Veure mes Detalls</a> 200,80


0,-32 Mercat de la Boqueria Edifici aïllat. Consta de

trenta punts d'accé<a style="color:green" href="detall_mercat.html?

ID=3" >Veure mes Detalls</a> 200,80


0,-32 Mercat de Sant Antoni Edifici aïllat. Consta de

vuit punts d'accés<a style="color:green" href="detall_mercat.html?

ID=4" >Veure mes Detalls</a> 200,80

Codi 6.4.2.8 Cadena TSV generada per el php

63


Fitxers SQL auxiliars

• Fitxer: ./sql/create_DDBB.sql

• Descripció: Fitxer emprat per crear una base de dades buida.

• Fitxer: ./sql/BBDD camps interessants per la bbdd_v1.ods

• Descripció: Fitxer de fulla de càlcul ods, que s'empra de plantilla per la introducció

d'esdeveniments.

• Fitxer: ./sql/insercions amb fk.sql

• Descripció: Fitxer que efectua e tractament e inserció a la base de dades a partir del

la taula temporal importada des del ODS.

• Fitxer: ./sql/truncate tables.sql

• Descripció: Fitxer que buida les taules de la base de dades amb integritat

referencial.

• Fitxer: ./sql/drop tables.sql

• Descripció: Fitxer que elimina les taules de la base de dades amb integritat

referencial.

• Fitxer: ./sql/inserts_taules_buits.sql

• Descripció: Fitxer SQL de plantilla amb els inserts simples de cadascuna de les

taules. Ajuda a accelerar el desenvolupament de futures funcions.

• Fitxer: ./sql/select per inserir.sql

• Descripció: Fitxer SQL de plantilla amb els selects de la taula temporal per tal de

fer el insert a cadascuna de les taules. Ajuda a accelerar el desenvolupament la

funció de "inserts amb fk.sql".

•

64


• Fitxer: ./sql/Select tablas.sql

• Descripció: Fitxer SQL de plantilla amb els selects simples de cadascuna de les

taules. Ajuda a accelerar el desenvolupament de futures funcions.

• Fitxer: ./sql/Select tablas a partir de idEsdeveniment.sql

• Descripcio: Fitxer SQL de plantilla amb els selects de cadascuna de les taules que

estan relacionades amb un id d'esdeveniment. Ajuda a accelerar el

desenvolupament de futures funcions.

65


66

Capítol 7 Avaluacions

7. Avaluacions (relació de les proves realitzades per avaluar cada part)

7.1 Entorn de proves i compatibilitat

L'aplicació s'ha provat satisfactòriament en els navegadors que s'esmenten a

continuació:

• Google Chrome Linux 24.0.1312.70

• Mozilla Firefox Linux 21.0

• Google Chrome Beta Android

Cal esmentar que en cas del navegador “stock” d'Android 4.0 té un problema amb

les capes del mapa que impedeix emprar els mapes amb normalitat. Probablement amb “z-

index” al CSS es pot solucionar.

7.2 Proves d'estres

Donat que a les peticions PHP s'ha implementat un paràmetre debug que estima el

temps d'execució de la funció i combinant amb les eines de debugueig de google Chromme

es pot realitzar fàcilment les proves adients per optimitzar aquestes consultes, i el codi que

les empra. Les proves realitzades a petita escala han sigut més que satisfactòries.

Tanmateix, degut a la dificultat de escriure a mà un conjunt molt gran de dades, no

s'ha pogut provar amb més d'unes desenes d'esdeveniments. És molt probable que, arribat

al punt de mostrar tots els esdeveniments de Catalunya en un any (uns 1300

aproximadament), hi hauran problemes de rendiment, per el que caldrà optimitzar la

informació i com es mostra.

67

Capítol 7 Avaluacions

68

Capítol 8 Estudi econòmic

8. Estudi econòmic

8.1 Mercat

En l'actualitat l'Institut Municipal de Mercats de Barcelona, és la única institució

que ha desenvolupat una aplicació web per a localitzar mercats. Aquesta però es centra

únicament en Mercats Municipals de la ciutat de Barcelona.

Aquest fet suposa, que actualment no es troba a la xarxa cap aplicació d'aquest tipus

que abarqui tot el territori català. I per altra banda, tampoc presenta la capacitat de

localitzar al mateix temps mercats municipals, mercats itinerants i fires.

L'aplicació web “mercatsifires.com” en primera instancia, va dirigida a aquell

usuari consumidor habitual de productes de proximitat i qualitat. Així com els diversos

propietaris de les parades, que poden trobar en l'aplicació una via ràpida i fàcil per

publicitar el seu lloc de treball.

En segona instancia, està també enfocada a fomentar el turisme gastronòmic per les

nostres terres, apropant el món dels mercats a la gent, ja sigui a traves de institucions

publiques o particulars.

8.2 Radi d’actuació

En una primera etapa, “mercatsifires.com” està orientat a donar resposta a les

necessitats de l’àmbit territorial de Catalunya.

Es pot realitzar una quantificació orientativa del radi d’actuació en funció de les

dades publicades en el portal web de la Generalitat de Catalunya, entre altres, referents a

l'any 2012, sobre el nombre total de mercats municipals, itinerants i fires presents al

territori. S’observa a traves de la representació gràfica que es mostra tot seguit:

69


Figura 8.2.1 Numero de Fires, mercats fixes i mercats setmanals a Catalunya.

En el cas dels mercats fixes, cadascun dels esdeveniments de una periodicitat diària, en els

mercats itinerants habitualment és setmanal, i en les fires hi han de periodicitat setmanal,

mensual, i fins i tot anual i bianual. Per el que el nombre real d'apertures al public, arreu de

Catalunya, pot ser força superior.

8.3 Recursos humans

El personal necessari, és aquell professional que posseeix coneixements i habilitats

en el àmbit de la informàtica, aplicada a programació d'aplicacions web. Amb

coneixements de HTML 5, CSS3, Javascript, PHP i MySQL. Aquests coneixements li

permetran entendre i comprendre el sentit i la finalitat del treball a desenvolupar, així com

els nivells de qualitat exigits.

70

Numero d'esdeveniments anual0

100

200

300

400

500

600

700

Mercats fixes

Mercats itinerants

Fires


8.4 Cost econòmic del projecte

8.4.1 Costos fixos

En quant als costos fixos de la realització del projecte, tenim principalment la

compra del material informàtic, concretament un ordenador amb un processador i5, quatre

Gb de RAM, 750 Gb HDD i pantalla de 15” ( HP pavillion DV6 ), així com un smartphone

amb Android 4.0 (BQ Aquaris 4.5). El seu preu és de 450 euros i 189 euros

respectivament.

Per altre banda també és necessari un “Hosting web” per tal de poder tenir

presencia a Internet. Aquest ha de tenir PHP5 i MySQL5. El seu preu és de 5,95€/mes.

No és té en compte el cost derivat dels programes que s'han utilitzat per

desenvolupar el projecte, ja que en tot moment s'ha utilitzat programari lliure, i per tant no

ha suposat cap cost addicional.

8.4.2 Costos variables

A l'apartat de costos variables, tenim el pagament de la connexió ADSL de 30Mb.

Aquesta s'ha fet servir des del mes d'abril (inici del projecte) fins el dia de la seva entrega

(presentació del projecte). Això fa un total de sis mesos, i el seu cost és de 45€/mes.

Per altre banda també s'ha de tenir en compte el consum d'elèctric, per poder dur a

terme una quantificació s'ha dut a terme una estimació en funció de la potencia consumida,

la qual és de 0,19kW. Sabent el nombre d'hores dedicades i el preu actual que fixa la

companyia elèctrica que ronda els 0,1389€kWh . El seu preu de l'electricitat és de 16,124

€/mes.

71


8.4.3.Cost del personal

En aquest projecte, tant sols ha intervingut un programador, tenint en compte el

temps dedicat de 611 hores, i el preu de mercat actual d'un programador, que es situa en

20€/hora. El cost del personal és de 12.120€.

8.4.4.Cost total del projecte

Es calcula el cost total del projecte, com la suma de tots els costos abans descrits:

Cost total = Costos fixos + Costos variables + Cost de personal = (450 + 189) + (270 +

16,124) + 12.120 = 13.045 €.

8.5 Promoció

Per tal de maximitzar els beneficis s'ha d'arribar al màxim de public possible.

Hi ha tota una varietat de accions a realitzar. En els primers passos potser el més adequat

és generar noticia i expectació. És un producte nou per a un public determinat i si es tracta

correctament, es pot aconseguir repercussió a medis del sector sense haver de pagar

publicitat. Tals com:

• Portals de mercats

• Portals viatges

• Revistes de mercats

• Revistes viatges

• Revistes fires i congressos

En un segon punt, ja passada l'expectació inicial es pot tractar de fer màrqueting de

baix cost. Això comporta una serie d'accions fora dels canals de publicitat habituals, sovint

implica ser físicament al lloc. Tals com:

72


• Codis QR pegats a l'entrada de mercats importants

• Màrqueting de guerrilla

• Promoció en persona a esdeveniments importants

• Ponències i Conferencies

I per últim, un cop que es té un bon producte i una base mínima d'usuaris que

demostra la seva viabilitat, es pot passar al tercer punt, que és passar a negociar la

promoció del comerç de proximitat a gran escala. Aquest és un camp força delicat, per el

que pot ser necessària l'ajuda d'algú amb experiència en el sector. Els passos serien:

• Acords amb associacions i promocions a mercats.

• Acords amb la Generalitat o Diputacions.

8.6 Distribució

Donada la natura oberta i multi-plataforma de l'aplicació es presenten múltiples

possibilitats de distribució, encara que de moment només s'ha explotat la de la visualització

per plana web, però existeixen eines per ampliar els mercats i formes de distribució.

8.6.1 Visualització des de plana web

Aquesta opció ja està en funcionament actualment com a demo a

http://mercatsifires.com

Donat que la aplicació està basada en tecnologia web és fàcil penjar i fer servir des

d'un servidor web. Cal tenir en compte que s'ha treballat al voltant del concepte

esdeveniment, no limitant-se sols a mercats sinó que pot englobar molts tipus de

esdeveniments i llocs d'interès, per el que és aplicable a altres àmbits.

73

http://mercatsifires.com/


Aquesta flexibilitat també permet desenvolupar un portal propi amb el seu model de

negoci, i amb petites modificacions crear una serie de portals temàtics, per necessitats més

especifiques.

8.6.2 Mercats d'aplicacions

En un futur, si s'implementa la integració amb PhoneGap o web “embedida”, es

podria fer distribució per mitja de tendes d'aplicacions online. Tals com:

• Google Chrome web Store.

• Apple Store.

• Google Play.

• Windows Store.

• Windows phone Store.

• Amazon APP Store.

• Samsung APP Store.

• “Markets” Android alternatius.

Això implica un accés immediat i a un cost relativament baix a un seguit de clients i

plataformes, que encara que són molt competitives donen alhora grans oportunitats i

visibilitat a nivell mundial. És un tema a estudiar en profunditat, ja que és un entorn molt

competitiu i canviant i les estratègies per afrontar-ho poden variar ràpidament.

74

Capítol 9 Conclusions

9. Conclusions

9.1 Estat final de l'aplicació

L'aplicació, encara que simple, és una eina prou madura per complir amb el seu

propòsit. És un bon exemple de eina amb utilitat per la societat i que compleix amb el seu

propòsit amb eficiència i en un entorn multiplataforma de gran futur. Per el que el seu

funcionament correcte dintre del marc de tecnologies actuals està assegurat per anys.

9.2 Coneixements adquirits

El coneixements adquirits, durant la realització d'aquest projecte, es poden resumir

en els següents:

9.2.1 OpenLayers

Coneixements adquirits en la API de OpenLayers, que permet una gran flexibilitat

en el tractament d'informació geogràfica en un entorn de desenvolupament web i aplicable

a un ampli rang de sectors. Sigui com a plana web, aplicació web, aplicació embedida o

aplicació nativa amb framework. Es pot considerar una tecnologia transversal i de gran

valor afegit.

9.2.2 Tractament automàtic de dades i mineria de les mateixes.

Coneixements de mineria automàtica de dades a partir de fonts externes, això junt amb el

tractament d'aquestes i la curació per part d'humans porta a un augment significatiu de

l'eficiència i qualitat de les dades exposades.

75


9.2.3 HTML – CSS – Javascript

Coneixements adquirits en la maquetació, muntatge i programació de la que es pot

considerar a dia d'avui la tecnologia més estesa i ubiqua de publicació de contingut en línia

al dispositiu client. És una tecnologia transversal i de gran valor afegit.

9.2.4 jQuery Mobile

Coneixements adquirits en un dels frameworks de desenvolupament JavaScript més

estesos i suportat per infinitat de dispositius i programes. És una eina imprescindible per un

desenvolupador web.

9.2.5 MySQL

Coneixements adquirits en modelització, creació, administració, i consulta d'una de

les bases de dades més emprades al món. També i gracies al ús de InnoDB com a motor de

base de dades, coneixements adquirits en quan a ús i administració de bases de dades

referencials amb regles d'integritat.

9.2.6 PHP

Coneixements adquirits a un dels llenguatges per excel·lència en el costat de

servidor a Internet. Una eina molt útil per generar planes web, respostes a consultes i accés

a hardware des del servidor. Així com un seguit de millores per tal d'efectuar una

parametrització i debug adequat de les consultes.

76


9.2.7 PhoneGap

Tot i no emprar-se, per tal d'assegurar la futura compatibilitat s'ha hagut d'aprendre

sobre el seu comportament, eines de desenvolupament així com la seva API. És una eina

que encara que presenta problemes de rendiment té un gran potencial i transversalitat.

9.3 Possibles Millores

Tota aplicació, tot i complir amb els seus objectius, és millorable. Hi han una serie

de millores que serien aplicables a diversos aspectes i que serien crucials per diferenciar-se

d'altres aplicacions al mercat. Son les següents:

9.3.1 Mineria de dades

Integrar mineria automàtica de dades des d'altres fonts, això simplificaria

enormement la gestió d'esdeveniments, amb relativament poca intervenció humana.

Millorant així la productivitat. La carrega de dades ja s'ha fet per ods, per tal de poder

implementar fàcilment aquesta millora.

En un futur, per automatitzar completament, es pot fer enginyeria inversa de les

eines de PHPMyAdmin per tal d'usar i/o emular amb programació PHP pròpia la carrega

de la fulla de càlcul .ODS, integrada amb la mineria de dades.

9.3.2 Expressions temporals.

Integrar tant al frontend com a les consultes de backend diferents tipus

d'expressions temporals.

77


La base de dades ja està preparada per aquest propòsit amb un camp de temps

d'inici i un de temps de fi de tipus VARCHAR. Això permetria definir períodes de validesa

de cadascun dels períodes (pe: horaris d'apertura) o buscar esdeveniments en un cert

període (pe: el cap de setmana més pròxim). Les expressions poden tindre les següents

components:

• Temps Absolut: Timestamp ( Dia i hora concret, també anomenat temps base )

• Relatiu: Moment respecte al temps actual. Compost per temps base i desplaçament.

Pe: * +1M (un mes després del moment actual)

• Modular: Esdeveniment que es repeteix cíclicament. Compost per un temps base i

un modul. pe: 21/08/2013 %1Y ( Cada 21 d'agost a partir del 2013 )

Aquestes expressions es podrien combinar amb una semàntica adequada per

complir qualsevol combinació possible.

Tenint un component de temps base, un desplaçament i un modul. Com per

exemple podem definir una fira el primer cap de setmana de setembre, amb periodicitat

anual, però de data variable depenent de en quins dies estigui el cap de setmana

corresponent. Això podria cobrir amb força comoditat per la administració tant

esdeveniments puntuals, esdeveniments fixes i esdeveniments periòdics.

9.3.3 PhoneGap

És molt interessant, aprofitant la versatilitat e ubiqüitat de l'entorn de programació

amb HTML5, CSS i JavaScript, la implantació amb un entorn com “PhoneGap”, que

permeti l'execució, accés al hardware i distribució mitjançant “APP Store” a la

plataforma nativa corresponent. Guanyant visibilitat i accedint a uns mercats de gran

potencial. El numero de plataformes suportades per PhoneGap és molt gran i creix dia a

dia.

78


9.3.4 Internacionalització i localització ( i18n, L10n )

L'aplicació tot i suportar diferents idiomes, per l'ús de la codificació UTF8, ho fa

d'un en un. Tenint que modificar cadenes per les diferents versions. Es pot millorar amb

l'ús de fitxers de recursos estàndards de recursos lingüístics com el fitxers .po o similars.

Tanmateix se li pot integrar la traducció automàtica del idiomes no suportats.

9.3.5 Autentificació i perfils d'usuaris

Actualment la aplicació no gestiona usuaris i tot accés és anònim. Seria interessant

implementar perfils, tals com els que es mostren tot seguit:

• El usuaris anònims son usuaris, puntuals que només fan una consulta sense

guardar ni perfil ni preferències. Tampoc poden fer comentaris o vots dels

esdeveniments.

• Els usuaris registrats son usuaris identificats i autentificats per correu electrònic o

nom d'usuari. Aquests poden fer consultes, fer comentaris, votar, recomanar

esdeveniments i enviar-los a altres usuaris per enllaç web, correu o xarxa social.

• Els administradors d'esdeveniments son super-usuaris que tenen drets

d'administració sobre els esdeveniments que administren. Poden afegir, modificar o

eliminar esdeveniments.

• Els administradors d'usuaris son super-usuaris que tenen drets d'administració

sobre els usuaris, vetllant per evitar abusos del sistema o incompliments de la llei.

Poden afegir, modificar o eliminar usuaris, així com eliminar o delimitar les seves

accions.

79


• El super-administrador té el permís de modificar el comportament de l'aplicació

online, penjar actualitzacions a la APP Store, així com tenir drets d'administració

totals sobre aplicació online, offline, esdeveniments, usuaris i administradors.

9.3.6 Mapes del Institut Cartogràfic de Catalunya. (ICC)

Els mapes del Institut Cartogràfic de Catalunya, en les seves diverses variants, com

poden ser els anomenats topomapa i ortofotomapa son un dels recursos lliures de major

qualitat en quant a precisió, geografia i toponímia. Tanmateix estan en projecció WGS84,

que si be és compatible amb OpenLayers, no pot coexistir amb els mapes Mercator sense

un intensa treball de conversió de coordenades.

9.3.7 Cerca per toponímia (nom de pobles e indrets)

Implementar la cerca per mitja d'algun dels serveis de toponímia existent. Això

permetria cercar esdeveniments prop d'un lloc concret sense necessitat de conèixer

prèviament on es troba la mapa, optimitzant les cerques i poguent definir un radi al voltant

del punt.

9.3.8 Splash image

Integració d'una imatge lleugera de carrega, així es millora la estètica, i es guanya

visibilitat amb imatge de marca. Millora de recursos gràfics e interfície. Múltiples millores

en quant a icones e interfície gràfica. Els desenvolupadors, generalment no son bons

dissenyadors gràfics i enfoquen més esforços a l'estabilitat i usabilitat, més que no pas fer

una interfície gràfica agradable per l'usuari.

80


9.3.9 SCSS -SASS

Implementació d'una capa de abstracció d'estils. Això permetria, en cas de

necessitat modificar la estètica de l'aplicació d'una manera àgil i fiable.

9.3.10 Repositori de codi

Implementar un repositori de codi, SVN, GIT o similar per tal de portar un control

de versions robust. Això permetria un desenvolupament per diversos desenvolupadors, així

com un seguiment de millores i errors.

9.3.11 Recopilació de dades d'ús

Recopilar dades d'ús per tal d'optimitzar recursos i veure tendències, preferències

de cerca i ús per usuari, optimitzar la monetització per àmbits professionals i territorials. I

fins i tot, ús i venda de dades anònimes. Tot això complint escrupolosament amb la

legislació en matèria de protecció de dades.

81


82

Capítol 10 Planificació temporal

10. Planificació temporal

10.1 Diagrama de Gantt

Figura 10.1.1 Diagrama de Gantt.

83

Capítol 10 Planificació temporal

84

Capítol 11 Bibliografia

11. Bibliografia

11.1 Llibres en format físic

• Títol: Developing large web applications / Kyle Loudon

Autor: Loudon, Kyle

Editorial: O'Reilly/Yahoo! Press, 2010

ISBN: 9780596803025 / 0596803028

Any: 2010

• Títol: HTML5, CSS3 y JavaScript

Autor: Meloni, Julie C.

Editorial: Anaya Multimedia, DL 2012

ISBN: 9788441531932

Any: 2012

• Títol: PhoneGap

Autor: Myer, Thomas

Editorial: Anaya Multimedia, DL 2012

ISBN: 9788441531420

Any: 2012

• Títol: l Proyecto fin de carrera en ingeniería informática : una guía para el

estudiante / Christian W. Dawson, Gregorio Martín Quetglás

Autor: awson, Christian W.

Editorial: Prentice Hall, cop. 2002

ISBN: 8420535605

Any: 2012

85


11.2 Llibres en format electrònic

• Títol: OpenLayers Cookbook

Autor: Antonio Santiago Perez

Editorial: Packt Publishing

ISBN: 978-1-84951-784-3

Any: 2012

Format: PDF

• Títol: OpenLayers 2.10 Beginner's Guide

Autor: Erik Hazzard

Editorial: Packt Publishing

ISBN: 978-1-849514-12-5

Any: 2011

Format: PDF

• Títol: Map Scripting 101. An Example-Driven Guide to Building Interactive Maps

with Bing, Yahoo!, and Google Maps.

Autor: Adam DuVander

Editorial: No Starch Press

ISBN: 978-1-59327-271-5

Any: 2010

Format: PDF

• Títol: Converting Websites into Native Apps using PhoneGap

Autor: Matthew David

Editorial: Focal Press - Elsevier

ISBN: 978-0-240-81910-5

Any: 2011

Format: PDF

86


• Títol: PhoneGap Mobile Application Development Cookbook

Autor: Matt Gifford

Editorial: Packt Publishing Ltd.

ISBN: 978-1-84951-858-1

Any: 2012

Format: PDF

• Títol: 20 Recipes for Programming PhoneGap

Autor: Jamie Munro

Editorial: O’Reilly

ISBN: 78-1-449-31954-0

Any: 2012

Format: PDF

• Títol: Regular Expressions Cookbook

Autor: an Goyvaerts and Steven Levithan


ISBN: 978-0-596-52068-7

Any: 2009

Format: PDF

• Títol: JavaScript & jQuery: The Missing Manual, Second Edition

Autor: David Sawyer McFarland


ISBN: 978-1-449-3-9902-3

Any: 2012

Format: PDF

87


• Títol: Professional JavaScript for Web Developers, Third Edition

Autor: Nicholas C. Zakas

Editorial: Wiley

ISBN: 978-1-118-02669-4

Any: 2012

Format: PDF

• Títol: JavaScript: The Good Parts

Autor: Douglas Crockford


ISBN: 978-0-596-51774-8

Any: 2008

Format: PDF

• Títol: Disseny de bases de dades

Autor: Dolors Costal Costa

Editorial: UOC

Any: 2007

Format: PDF

11.3 Congressos i conferencies

• Títol: Google IO 2013: Keynote.

Ponent: Varis Ponents.

Congres: Google IO 2013

Url: http://www.youtube.com/watch?v=9pmPa_KxsAM

Data: 5 Maig 2013

88

http://www.youtube.com/watch?v=9pmPa_KxsAM


• Títol: El Sector Público como fuente de datos de valor para el Sector Privado en un

entorno tecnológico.

Ponent: Serafín Casamayor

Congres: Google IO Extended Reus 2013

Lloc: Palau de Fires i Congressos, Reus

Data: 16 Maig 2013

• Títol: Monetización en Android

Ponent: Jordi Vaca

Congres: Google IO Extended Reus 2013

Lloc: Palau de Fires i Congressos, Reus

Data: 17 Maig 2013

11.4 Pagines web

• http://w3schools.com

• http://phonegap.com

• http://coenraets.org/blog/

• http://openlayers.org/

• http://www.icc.cat/cat/Home-ICC/Geoinformacio-digital/Serveis-en-linia-

Geoserveis/Cartografia-ICC-a-OpenLayers

• http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework

• http://en.wikipedia.org/wiki/List_of_rich_Internet_application_frameworks

• http://es.wikipedia.org/wiki/Mapa

• http://developer.android.com/guide/practices/ui_guidelines/index.html

• http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/

MobileHIG/Introduction/Introduction.html

• http://es.costabrava.org/categories/subcategory.aspx?t=ferias-y-

mercados&com=QwBhAHQAZQBnAG8AcgB5AEkARABcADEAMgA3AFwA

• http://paisdevins.com/FIRA_DEL_VI_1T/FIRES_I_FESTES_DEL_VI_2013.html

89

http://paisdevins.com/FIRA_DEL_VI_1T/FIRES_I_FESTES_DEL_VI_2013.html

http://es.costabrava.org/categories/subcategory.aspx?t=ferias-y-mercados&com=QwBhAHQAZQBnAG8AcgB5AEkARABcADEAMgA3AFwA

http://es.costabrava.org/categories/subcategory.aspx?t=ferias-y-mercados&com=QwBhAHQAZQBnAG8AcgB5AEkARABcADEAMgA3AFwA

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

http://developer.android.com/guide/practices/ui_guidelines/index.html

http://es.wikipedia.org/wiki/Mapa

http://en.wikipedia.org/wiki/List_of_rich_Internet_application_frameworks

http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework

http://www.icc.cat/cat/Home-ICC/Geoinformacio-digital/Serveis-en-linia-Geoserveis/Cartografia-ICC-a-OpenLayers

http://www.icc.cat/cat/Home-ICC/Geoinformacio-digital/Serveis-en-linia-Geoserveis/Cartografia-ICC-a-OpenLayers

http://openlayers.org/

http://coenraets.org/blog/

http://phonegap.com/

http://w3schools.com/


• http://www.similarsites.com

• htts://github.com/bunkat/later

11.5 Aplicacions

• Planol.info:

http://www.planol.info

• InfoFires:

http://www.moga.cat/fires/

https://play.google.com/store/apps/details?id=com.moga.infofires&hl=es

• Mercats de Barcelona:

( Android ):https://play.google.com/store/apps/detailsid=cat.bcn.mercats&feature=s

earch_result#?t=W251bGwsMSwxLDEsImNhdC5iY24ubWVyY2F0cyJd

• Gencat( Android ):

https://play.google.com/store/apps/detailsid=cat.gencat.mobi.home&feature=search

_result#?t=W251bGwsMSwxLDEsImNhdC5nZW5jYXQubW9iaS5ob21lIl0

• Field Trip (Androd):

https://play.google.com/store/apps/detailsid=com.nianticproject.scout&feature=sear

ch_result#t=W251bGwsMSwxLDEsImNvbS5uaWFudGljcHJvamVjdC5zY291dCJ

d

• PhoneGap API Demo by MDS ( Android )

https://play.google.com/store/apps/detailsid=com.mds.phonegapapi&feature=searc

h_result#?t=W251bGwsMSwxLDEsImNvbS5tZHMucGhvbmVnYXBhcGkiXQ..

90

https://play.google.com/store/apps/details?id=cat.bcn.mercats&feature=search_result#?t=W251bGwsMSwxLDEsImNhdC5iY24ubWVyY2F0cyJd

https://play.google.com/store/apps/details?id=cat.bcn.mercats&feature=search_result#?t=W251bGwsMSwxLDEsImNhdC5iY24ubWVyY2F0cyJd

https://play.google.com/store/apps/details?id=com.moga.infofires&hl=es

http://www.moga.cat/fires/

http://www.planol.info/

https://github.com/bunkat/later

http://www.similarsites.com/


11.6 Fonts de dades

• Institut cartogràfic de Catalunya:

http://www.icc.cat

• Infraestructura de Datos Espaciales de España:

http://www.idee.es

• Cercador IDEC Catalunya:

http://catalegidec.icc.cat/SDIExplorer/cercaCataleg.jsp

• Dades Obertes Gencat:

http://www20.gencat.cat/portal/site/dadesobertes

11.7 Fonts de cartografia

• Google maps: http://www.google.es/maps• Bing Maps: http://www.bing.com/maps/• OpenStreetMap: http://www.openstreetmap.org

11.8 Software emprat

11.8.1 Desenvolupament

• Ubuntu Linux 12.04 LTS x64


• GIMP 2.6

• Dia 0.97.2

• Gantt project 2.6.1

• xMind 2012 SE ( v3.3.1.201212250029)

91

http://www20.gencat.cat/portal/site/dadesobertes

http://catalegidec.icc.cat/SDIExplorer/cercaCataleg.jsp

http://www.idee.es/

http://www.icc.cat/


• OpenOffice 3.5.7.2

• Eclipse Juno 4.2.2

• jQuery 1.10.2

• jQuery mobile 1.3.2

• Web developer 0.4.3 (extensió de chromme)

• Manual Geolocation1.0.1 (extensió de chromme)

11.8.2 Proves


• Mozilla Firefox Linux 21.0

• Google Chrome Beta android

11.8.3 Producció

• Apache 2.2.22 Ubuntu x64

• PHP 5.3.10 ubuntu x64

• MySQL 5.5.32 ubuntu x64

11.9 Hardware

11.9.1 Desenvolupament

• HP Pavilion dv6 ( portatil )

92


11.9.2 Proves

• HP Pavilion dv6 ( portatil )

• BQ Platón ( tablet )

• BQ aquaris ( smartphone )

11.9.3 Producció

No hi ha requisits de Hardware, ja que no es necessari un servidor dedicat. Amb un

servidor web amb PHP5 i MySQL 5.5 hi ha prou, depenent el hardware de la velocitat i

usuaris concurrents desitjats.

93


94

Capítol 12 Annexos

12. Annexos

12.1 Manual d'Instal·lació a servidor

Per instal·lar el software a un servidor s'ha de seguir el procediment que es detalla a

continuació:

• Comprovar que es disposi d'un servidor web els requeriments mínims esmentats.

• S'ha de copiar les carpetes “html” i “json2php” a una carpeta que sigui publicada

per Apache com a plana web. La primera és per el frontend i la segona per el

backend.

• Assegurar que el permisos siguin el correctes per tal d'executar se. Habitualment a

Linux l'usuari ha de ser www amb permisos 700 a tots el fitxers.

• Crear un fitxer .htaccess amb el contingut adient en cas que es desitgin uns

permisos d'execució diferents al que estan configurats per defecte.

• Modificar el contingut del fitxer ./php2json/config/config.php per tal de tindre el

usuari i contrasenya adequat tant per desenvolupament com per producció.

• Crear la base de dades i les taules executant el fitxer ./consultas bbdd i carrega

dades/create_DDBB.sql assegurant-nos de que el nom de la base de dades (schema)

definit és el correcte. ( Alguns servidors no dedicats obliguen a tindre un cert nom

d'esquema que no és pot modificar.)

12.2 Manual de super-usuari

La manera més simple de carregar un nou conjunt de dades (eliminant l'anterior) és

de la manera que es detalla a continuació:

95

Capítol 12 Annexos

• Efectuar la importació del fitxer de fulla de càlcul de LibreOffice (ODS)

subministrat ./consultas bbdd i carrega dades/BBDD camps interessants per la

bbdd_v1.ods sense modificar el nom de fulla ja que és el nom de taula al que es

carregaran les dades.

• Per tal de fer-ho s'ha d'efectuar des del panell de control de phpmyadmin, amb la

taula temporal “inserirEsdeveniments” ja creada i completament buida, s'ha de

seleccionar la mateixa i polsar a importar.

• Un cop a la pestanya seleccionar la fulla de càlcul ODS a importar, en aquest cas

“./consultas bbdd i carrega dades/BBDD camps interessants per la bbdd_v1.ods”,

activar els checkbox de “La primera linea de archivo contiene los nombres de

columna de tabla” i de “No importar filas vacías”.

• Polsar a continuar i esperar a la confirmació. Si el fitxer és molt gran pot trigar uns

segons.

• Acte seguit executar el contingut del fitxer “./consultas bbdd i carrega

dades/insercions amb fk.sql” això tractara el contingut de la taula temporal per tal

de repartir cadascuna de les columnes a les taules adequades.

Cal tenir en compte que per motius de simplificar al màxim la introducció de dades

i que no siguin necessaris coneixements especials a part de una mica OpenOffice /

LibreOffice no s'ha inclòs informació relativa a les icones de categoria, subcategoria,

etiquetes, així com les imatges de cadascuna de les taules exceptuant el propi

esdeveniment. Per el que s'hauran d'introduir per un altre medi. O bé amb un altre ODS,

amb SQL o per manipulació directa de la base de dades.

Tanmateix cal fer notar que es disposen de fitxers SQL per efectuar operacions

auxiliars com esborrar la base de dades (ja inserit a create_DDBB.sql), buidar les taules

(truncate tables.sql) o esborrar les taules ( drop tables.sql ) al mateix directori.

96

Capítol 12 Annexos

També es proporcionen els “select” e “inserts” originals per cadascuna de les taules.

12.3 Manual d'administrador d'esdeveniments

La feina del administrador d'esdeveniments, encara que força manual és

relativament simple. Omplir el contingut del fitxer ods ( BBDD camps interessants per la

bbdd_v1.ods ) intentant omplir com més camps millor.

És important mencionar que les categories i subcategories es creen a partir de la

l'especificat a la columna en questio, per el que cal omplir-les ja que sinó no sortiran al

menú de selecció de capes i no es mostraran. Tanmateix és important que les coordenades

s'expressin en format Mercator ( com les de Google Maps ) amb un punt per separar

decimals i amb un valor entre -90.0 i +90.0 tant per longitud com per latitud.

En cas de no conèixer l'alçada, deixar a 0 (nivell del mar). Aquest fitxer un cop

omplert s'ha d'enviar al super-usuari (administrador) per tal que el carregui a la base de

dades.

12.4 Manual d'usuari

L'ús per al usuari final resulta força simple. El procediment es detalla a continuació:

• Obrir amb un navegador web la direcció del servidor web configurada. Pe:

http://mercatsifires.com. Es veurà per defecte un mapa amb totes les categories actives,

amb les seves icones representades al punt del mapa corresponent. Si es desitja,

permetre que el navegador tingui accés a la ubicació actual. Això ajudara a veure

quins mercats i fires es fan a prop de la ubicació actual.

97

http://mercatsifires.com/

Capítol 12 Annexos

• Amb el boto + de la part superior dreta de la pantalla s'obre el panell de selecció de

mapes i capes. Aquí es mostren els diferents servidors de cartografia (mapes) així

com les categories carregades des de la base de dades, i la pròpia ubicació. Es pot

polsar per seleccionar els elements desitjats i automàticament s'actualitzara la

informació representada per pantalla.

• També es pot observar uns controls a la part superior esquerra, són els controls de

zoom, i permeten (polsant al + o – ) observar una àrea més gran o més petita. Es pot

seleccionar també a la barra el nivell de zoom desitjat. Al propi mapa es pot

realitzar zoom amb la roda del ratolí o bé polsant i apropant o allunyant amb dos

dits alhora ( “pinch” i “spread” ) en el cas de dispositius tàctils, com poden ser

mòbils o tauletes.

• En cas de estar connectat i compartint ubicació, però sense un GPS físic actiu al

dispositiu, s'observarà un cercle ombrejat al voltant de la ubicació, és el radi on pot

estar físicament ja que la ubicació no és exacta i es mostra la ubicació donada per la

xarxa a la qual està connectat, podent ser WIFI, GPS-A o d'altres.

• Es pot arrastrar el mapa per moure's a una altra ubicació, presentant una certa

inèrcia ( llançament cap a una posició ) per desplaçaments llargs.

• Es pot polsar sobre les icones d'esdeveniment que es mostren per pantalla, això

obrira un tooltip amb informació de l'esdeveniment. Es pot tancar polsant un altre

cop sobre la icona. En cas de polsar una altra icona es tanca el tooltip de la primera.

• Dintre del tooltip existeix un enllaç per accedir a la informació detallada del

esdeveniment. La informació detallada de l'esdeveniment mostra tots els camps

relacionats amb un esdeveniment donat. La estètica és millorable, però és

plenament funcional. Amb el botó de tornar es pot tornar al punt de partida.

98

Capítol 12 Annexos

• A la part inferior de la pantalla existeixen tres controls:

▪ El camp de cerca, el primer començant per la esquerra, és un camp de text

on conforme es va escrivint mostra una llista de suggerències en que el nom

de l'esdeveniment conté el text introduït. El camp no té en compte ni

majúscules ni signes d'accentuació, però si els espais. A la llista que mostra

el camp es mostra el nom de l'esdeveniment suggerit, i si es polsa sobre

porta a la plana de informació de esdeveniment.

▪ El botó “Ubicació” mou les coordenades del mapa ( sense modificar el

zoom) a la ubicació actual, si es que existeix.

▪ El boto “Quant a” mostra una petita pantalla amb informació del programa,

així com un botó per tornar al punt de partida.

12.5 Requeriments mínims al servidor

Els Requeriments mínims del servidors s'enumeren tot seguit:

▪ Apache 2.2

▪ PHP5.3

▪ MySQL 5.5

▪ PhpMyAdmin 3.4.10

El numero de versió de cadascun dels programes ha de ser com a mínim igual o

superior al indicat.

99

Capítol 12 Annexos

1.1 12.6 Requeriments mínims al client

Els Requeriments mínims del client s'enumeren tot seguit:

• Navegador web amb compatibilitat amb HTML5, CSS3 i JavaScript activat.

Existeix al document un llistat de dispositius provats, però és molt probable que

sigui suportat per altres versions de software no provades, ja que s'ha buscat que

sigui simple i estàndard

• Accés a Internet. La cartografia es descarrega de servidors d'accés public.

100

Capítol 12 Annexos

12.7 Codi font

Encara que al codi (sobretot al frontend) hi han infinitat de fitxers implicats entre CSS,

JavaScript i recursos gràfics, i donat que ocuparien un espai considerable al informe, ens

centrem en tres dels més rellevants per el funcionament de l'aplicació. La resta de fitxers es

poden consultar al medi d'emmagatzematge físic adjunt a aquest projecte.

• Fitxer: ./php2json/categories_totes.php

• Descripció: Fitxer que retorna totes les categories creades a la base de dades.

• Paràmetres: debug - si debug=true retorna la informació de debug.

• Retorna: Objecte JSON amb Array de categories dintre de data i informació de

debug a trace.

• Exemple d'us: ./php2json/categories_totes.php?debug=true

<?php

//comienza timestamp

$start = microtime();

//cabecera JSON

header("Content-type: application/json");

//Datos de acceso a la BBDD

include "./config/config.php";

//Conexion a la BBDD

$conexion = mysql_connect($DB_server, $DB_user, $DB_pass);

mysql_select_db($DB_schema, $conexion);

//Inicializacion de parametros

$debug=false;

$tablas="Categoria";

//Catura de parametros

101

Capítol 12 Annexos

if ($_GET['debug']!=""){

$debug = $_GET['debug'];

}

//Inicilizacion de datos de salida

$datos = array();

if ($debug=="true"){

$datos[trace][timestamp]=time();

$datos[trace][executionTime]=0;

$datos[trace][params]=$_GET;

}

$datos[data]=array();

// Consulta mysql

$consulta = "SELECT * FROM `".$tablas."`;";

//si debug esta activo se muestra la consulta

if ($debug=="true"){ $datos[trace][StringSQL]=$consulta; }

//Se efectua la consulta

$resultados = mysql_query($consulta, $conexion) or

die(mysql_error());

//Y se guarda el numero de filas

$filas = mysql_num_rows($resultados);

//Si hay resultados ( filas > 0 )

if ($filas> 0) {

//Para cada resultado

while ($filaResultados = mysql_fetch_assoc($resultados)) {

//se guarda la informacion en variables

$idCategoria=

(string)utf8_encode($filaResultados['idCategoria']);

$nomCategoria=

(string)utf8_encode($filaResultados['nomCategoria']);

$descripcioCategoria=

(string)utf8_encode($filaResultados[`descripcioCategoria`]);

$iconaCategoria=

(string)utf8_encode($filaResultados[`iconaCategoria`]);

102

Capítol 12 Annexos

//Y se llena la estructura de resultados

$datos[data][] = array(

idCategoria => $idCategoria,

nomCategoria => $nomCategoria,

descripcioCategoria => $descripcioCategoria,

iconaCategoria => $iconaCategoria

);

}

}

//finaliza timestamp

$finish = microtime();

//Si debug es true Se calcula el tiempo de ejecucion para retornarlo

if ($debug=="true"){ $datos[trace][processtime]=$finish - $start; }

// se codifica a json y es devuelto al cliente

echo json_encode($datos);

?>

Codi 12.7.1 ./php2json/categories_totes.php

103

Capítol 12 Annexos

• Fitxer: ./php2json/markers/textfile_dinamic_POI.php

• Descripció: Fitxer que retorna en format TSV un seguit de punt d'interès inclosos a

la categoria donada per la seva ID

• Paràmetres:

debug: si debug=true retorna la informació de debug, i tota la resta

d'informació amb JSON

ID: id de la categoria a cercar.

• Retorna: Fitxer de text amb format TSV ( Tab Separated Values), on la primera

línia és el nom de columna i els següents els punts a col·locar al mapa.

• Exemple d'us: ./php2json/markers/textfile_dinamic_POI.php?idCategoria=1

<?php

//comienza timestamp

$start = microtime();

/**

* Funcion que escribe la cabecera con el formato de

Openlayers.Markers.Textfile

**/

function write_header() {

# lat lon icon iconSize iconOffset title description

popupsize

print("lat\tlon\ticon\ticonSize\ticonOffset\ttitle\tdescription\tpopu

pSize\n");

}

/**

* Funcion que escribe una entrada con el formato de

Openlayers.Markers.Textfile

**/

function write_line($lat, $lon, $icon, $iconSize, $iconOffset, $title,

$description, $popupSize) {

# lat lon

print("$lat\t$lon\t");

104

Capítol 12 Annexos

# icon

print("$icon\t");

# iconSize

print("$iconSize\t");

# iconOffset

print("$iconOffset\t");

# title

print("$title\t");

# description

print("$description ");

print("\t");

# popup size

print("$popupSize");

print("\n");

}

//Datos de acceso a la BBDD

include "../config/config.php";

//Conexion a la BBDD

$conexion = mysql_connect($DB_server, $DB_user, $DB_pass);

mysql_select_db($DB_schema, $conexion);

//Inicializacion de parametros

$debug = false;

$tablas = "Esdeveniment";

$cadenaCerca = "1";

$idCategoria = "";

$filtreIdCategoria = "";

//Catura de parametros

if ($_GET['debug'] != "") {

105

Capítol 12 Annexos

$debug = $_GET['debug'];

}

if ($_GET['ID'] != "") {

$cadenaCerca = $_GET['ID'];

}

if ($_GET['idCategoria'] != "") {

$idCategoria = $_GET['idCategoria'];

}

if ($debug == "true") {

header("Content-type: application/json");

} else {

header("Content-type: text/plain; charset=UTF-8");

}

//Inicilizacion de datos de salida

$datos = array();


$datos[trace][timestamp] = time();

$datos[trace][executionTime] = 0;

$datos[trace][params] = $_GET;

}

$datos[data] = array();

// /////////////////////////////////

// Inici consulta Esdeveniment

// /////////////////////////////////

// filtro de categoria (solo se crea si es necesario)

if ($idCategoria != "") {

$filtreIdCategoria = "

AND `Categoria`.`idCategoria` = $idCategoria

";

}

106

Capítol 12 Annexos

//Consulta que retorna los puntos de interes POI

$consulta = "

SELECT

Ùbicacio`.`latitud`,

Ùbicacio`.`longitud`,

Èsdeveniment`.idEsdeveniment,

Èsdeveniment`.nomEsdeveniment,

Èsdeveniment`.descripcioEsdeveniment,

-- `Categoria`.`nomCategoria`,

`Categoria`.ìconaCategoria`,

`Categoria`.ìconaMida`,

`Categoria`.ìconaOffset`

FROM

`" . $DB_schema . "`.Èsdeveniment`,

`" . $DB_schema . "`.`Categoria`,

`" . $DB_schema . "`.`SubCategoria`,

`" . $DB_schema . "`.`LlocCelebracio_te_Esdeveniment`,

`" . $DB_schema . "`.`LlocCelebracio`,

`" . $DB_schema . "`.Ùbicacio`

WHERE

`LlocCelebracio_te_Esdeveniment`.Èsdeveniment_idEsdeveniment` =

Èsdeveniment`.idEsdeveniment

AND `Categoria`.ìdCategoria` =

`SubCategoria`.`Categoria_idCategoria`

AND `SubCategoria`.ìdSubCategoria`=

Èsdeveniment`.`SubCategoria_idSubCategoria`

AND

`LlocCelebracio_te_Esdeveniment`.`LlocCelebracio_idLlocCelebracio` =

`LlocCelebracio`.ìdLlocCelebracio`

107

Capítol 12 Annexos

AND Ùbicacio`.ìdUbicacio` =

`LlocCelebracio`.Ùbicacio_idUbicacio`

$filtreIdCategoria

;

";

//Se inserta la consulta en formato JSON si debug==true


$datos[trace][StringSQL][] = $consulta;

}

//Se efectua la consulta

$resultados = mysql_query($consulta, $conexion) or die(mysql_error());

//Y se guarda el numero de filas

$filas = mysql_num_rows($resultados);

//Si hay resultados ( filas > 0 )

if ($filas > 0) {

//Se inserta la cabecera en formato TSV si debug!=true

if ($debug != "true") {

write_header();

}

//Para cada resultado

while ($filaResultados = mysql_fetch_assoc($resultados)) {

//se guarda la informacion en variables

$latitud = (string) utf8_encode($filaResultados['latitud']);

$longitud = (string) utf8_encode($filaResultados['longitud']);

$idEsdeveniment = (string)

utf8_encode($filaResultados['idEsdeveniment']);

$nomEsdeveniment = (string)

utf8_encode($filaResultados['nomEsdeveniment']);

//@todo hacer enlaces mas faciles de usar y que vuelvan al punto

de origen

$descripcioEsdeveniment = (string)

utf8_encode($filaResultados['descripcioEsdeveniment']);

$descripcioEsdeveniment = $descripcioEsdeveniment . '<a

style="color:green" href="detall_mercat.html?ID=' . $idEsdeveniment . '"

>Veure mes Detalls</a>';

108

Capítol 12 Annexos

$iconaCategoria = (string)

utf8_encode($filaResultados['iconaCategoria']);

$iconaMida = (string) utf8_encode($filaResultados['iconaMida']);

$iconaOffset = (string)

utf8_encode($filaResultados['iconaOffset']);

$popupMida = (string) utf8_encode($filaResultados['popupMida']);

//Si alguna categoria, o alguno de sus elementos graficos, esta

vacia de fuerzan sus parametros al default. (ver config.php)

if (($iconaCategoria == null) || ($iconaMida == null)) {

$iconaMida = $default_map_icons_size;

}

if (($iconaCategoria == null) || ($iconaOffset == null)) {

$iconaOffset = $default_map_icons_Offset;

}

if ($iconaCategoria == null) {

$iconaCategoria = $default_Categoria_icon;

}

$popupMida = $default_map_popup_size;

//Y se llena la estructura de resultados

$datos[data][Esdeveniment][] = array(

latitud => $latitud,

longitud => $longitud,

nomEsdeveniment => $nomEsdeveniment,

descripcioEsdeveniment => $descripcioEsdeveniment,

iconaCategoria => $iconaCategoria,

iconaMida => $iconaMida,

iconaOffset => $iconaOffset,

popupMida => $popupMida

);

109

Capítol 12 Annexos

//Si debug!=true se genera el fichero de POI habitual de

layer.text

if ($debug != "true") {

write_line($latitud, $longitud, $iconaCategoria, $iconaMida,

$iconaOffset, $nomEsdeveniment, $descripcioEsdeveniment, $popupMida);

}

}

}

//finaliza timestamp

$finish = microtime();

//Si debug!=true se genera el fichero de POI habitual de layer.text


//Se calcula el tiempo de ejecucion para retornarlo

$datos[trace][processtime] = $finish - $start;

// se codifica a json y es devuelto al cliente

echo json_encode($datos);

}

?>

Codi 12.7.2 ./php2json/markers/textfile_dinamic_POI.php

110

Capítol 12 Annexos

• Fitxer: ./sql/BBDD camps interessants per la bbdd_v1.ods

• Descripció: Fitxer de fulla de càlcul ODS, que s'empra de plantilla per la

introducció d'esdeveniments. (S'ha inclòs un petit exemple en text pla a mode

il·lustratiu)

nomEsdeveniment descripcioEsdeveniment dataCreacio numParades

superficie observacionsEsdeveniment preuEntrada

horariEsdeveniment nomCategoria nomSubCategoria

nomEtiqueta nomLocalitat municipi comarca provincia

comunitatAutonoma estat nomLlocCelebracio adreça codiPostal

latitud longitud alçada comArribar nomServei

tempsInici tempsFi FitxersImatges url email telefon

fax skype xarxes socials

Mercat Central descr1 1915 par1 2516 obs1 Gratuit1 Dill –

Diss 7:00 – 14:00 i Div 17:30 – 20:30 Mercat Setmanal Carn Carn

Tarragona Tarragona Tarragones Tarragona Catalunya Espanya

Plaça Corsini Plaça Corsini s/n 43003 41.11553229713526

1.2496304512023926 1 com1 Aparcament, lliurament a

domicili, pagament amb tarjeta tini1 tfi1 fitxer1 url1

[email protected] 977231551 fax1 skype1 xarxa1

Mercat de Torreforta descr2 1981 par2 1094,8 obs2 Gratuit2

Dill – Diss 7:00 – 14:00 i Div 17:30 – 20:30 Mercat

Municipal Variat Tarragona Tarragona Tarragones

Tarragona Catalunya Espanya C/ Amposta C/ Amposta 43003

41.116563 1.216425 2 com2 Aparcament tini2 tfi2 fitxer2

url2 [email protected] 977231551 fax2 skype2 xarxa2

Mercat del Fòrum descr3 1984 par3 122 obs3 Gratuit3 Dill –

Dij 7:00 – 14:00, Div 6:00 – 14:00 i 17:30 – 20:30 i Diss 5:30 – 15:00

Fira Peix Peix Tarragona Tarragona Tarragones Tarragona

Catalunya Espanya Plaça del Fòrum Plaça del Fòrum 43003

41.1179248055018 1.2587016820907593 3 com3 No disposa de

aparcament propi tini3 tfi3 fitxer3 url3 [email protected]

977231551 fax3 skype3 xarxa3

111

Capítol 12 Annexos

112

Capítol 13 Glossari

13. Glossari

API (Application Programming Interface) Interfície de programació de aplicacions.

Bugs (Incidencies del sistema)

ETRS89 ( European Terrestrial Reference System 1989 ) Sistema geodèsic lligat a la placa

continental europea i compatible amb els sistemes de GPS comercials. Contempla la deriva

tectònica per augmentar la precisió.

HTML (hypertext Markup Language) Llenguatge de Marcat de Hipertext.

ICC (Institut Cartogràfic de Catalunya)

JS (Arxiu JavaScript)

JSON ( JavaScript Object Notation ) Subconjunt de la notació literal de objectes de

JavaScript amb un format lleuger per l'intercanvi de dades. Una bona alternativa molt

estesa, simple i versàtil respecte a XML.

KML (Keyhole Markup Language) Llenguatge de marques Keyhole.

PHP (Hypertext Pre-processor)

POI ( Point of interest ) Punt d'interès.

TSV (Tab Separated Values) Valors separats per tabulacions. Format similar a CSV però

emprant com a separador el tabulador. Molt simple, però útil.

XML (Extensible Markup Language) Llenguatge de marques extensible.

WGS84 (World Geodesic System 84) Sistema Geodèsic Mundial 1984. El sistema GPS es

basa en aquest sistema de coordenades.

WMS ( Web Map Service ) Servei de mapes web

113

Capítol 13 Glossari

114

Mercats i fires al teu abast. - Departament d'Enginyeria...

Documents

Transcript of Mercats i fires al teu abast. - Departament d'Enginyeria...