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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
• 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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
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
Capítol 2 Introducció
◦ 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
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
Capítol 3 Objectius del projecte
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
Capítol 3 Objectius del projecte
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
Capítol 3 Objectius del projecte
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
Capítol 4 Especificacions del projecte
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
Capítol 4 Especificacions del projecte
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
Capítol 4 Especificacions del projecte
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
Figura 5.1.4 Pantalla principal amb la capa “Google Hybrid” seleccionada.
Figura 5.1.5 Pantalla principal amb la capa “OpenStreetMap” seleccionada.
27
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
5.2 Diagrames
5.2.1 Esquema TOP DOWN del projecte
Figura 5.2.1.1 Diagrama TOP-DOWN de l'aplicació.
30
Capítol 5 Decisions de disseny
5.2.2 Diagrama de la BBDD
Figura 5.2.2.1 Diagrama de la base de dades
31
Capítol 5 Decisions de disseny
A continuació es detalla el llistat i una breu descripció de taules de la base de dades:
Taula: `mercats_i_Fires`.`inserirEsdeveniments`
Descripció: Taula temporal que guarda els registres importats des del fitxer de fulla de
càlcul ODS.
Taula: `mercats_i_Fires`.`Esdeveniment`
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`.`Imatge`
Descripció: Imatge associada a alguna altra entitat, tal com esdeveniment, etiqueta,
subCategoria o lloc de celebració.
Taula: `mercats_i_Fires`.`Etiquetes`
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
Capítol 5 Decisions de disseny
Taula: `mercats_i_Fires`.`Ubicacio`
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`.`Esdeveniment_te_Serveis`
Descripció: Taula auxiliar per relació n..m entre esdeveniment i serveis.
Taula: `mercats_i_Fires`.`Etiquetes_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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
5.2.3 Diagrama de flux
Figura 5.2.3.1 Diagrama de flux de l'aplicació.
36
Capítol 5 Decisions de disseny
5.3 Arquitectura de sistema
Figura 5.3.1 Arquitectura del sistema per capes.
37
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
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
Capítol 5 Decisions de disseny
• 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
Capítol 5 Decisions de disseny
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
Capítol 6 Desenvolupament
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ó.
• Paràmetres: CAP
• 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
Capítol 6 Desenvolupament
• 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.
• Paràmetres: CAP
• 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.
• Paràmetres: CAP
• 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ó
• Paràmetres: CAP
• 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.
• Paràmetres: CAP
• Retorna: CAP
•
51
Capítol 6 Desenvolupament
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.
• Paràmetres: CAP
• 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
Capítol 6 Desenvolupament
idCategoria: "1",
nomCategoria: "Mercat",
descripcioCategoria: "",
iconaCategoria: ""
},
{
idCategoria: "2",
nomCategoria: "Fira",
descripcioCategoria: "",
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: {
timestamp: 1378133412,
executionTime: 0,
params: {
conte: "erc",
debug: "true"
},
StringSQL: " SELECT * FROM `Esdeveniment` WHERE
nomEsdeveniment LIKE "%erc%" ; ",
processtime: -0.676802
53
Capítol 6 Desenvolupament
},
data: [
{
idEsdeveniment: "1",
nomEsdeveniment: "Mercat del Guinardó "
},
{
idEsdeveniment: "2",
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:
debug: si debug=true retorna la informació de debug.
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: {
timestamp: 1378134081,
executionTime: 0,
params: {
ID: "2",
debug: "true"
},
StringSQL: " SELECT * FROM `Esdeveniment` WHERE
idEsdeveniment = 2 ; ",
processtime: 0.002084
},
54
Capítol 6 Desenvolupament
data: [
{
idEsdeveniment: "2",
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"
}
]
}
Codi 6.4.2.3 Cadena JSON generada per el php
• 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:
debug: si debug=true retorna la informació de debug.
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: {
timestamp: 1378135032,
executionTime: 0,
params: {
ID: "2",
55
Capítol 6 Desenvolupament
debug: "true"
},
StringSQL: [
" SELECT * FROM `Esdeveniment` WHERE
idEsdeveniment = 2 ; ",
" SELECT `idContacte`, `url`, `email`,
`telefon`, `fax`, `skype`, `xarxesSocials` FROM
`mercats_i_Fires`.`Contacte`,
`mercats_i_Fires`.`Contacte_te_Esdeveniment` WHERE
`Esdeveniment_idEsdeveniment`= 2 AND `idContacte`=`Contacte_idContacte`
",
" SELECT `idTemps`, `tempsInici`, `tempsFi`
FROM `mercats_i_Fires`.`Temps` WHERE `Esdeveniment_idEsdeveniment`= 2 ",
" SELECT `idservei`, `nomServei`,
`descripcioServei`, `iconaServei` FROM `mercats_i_Fires`.`Serveis`,
`mercats_i_Fires`.`Esdeveniment_te_Serveis` WHERE `idservei` =
`Serveis_idservei` AND `Esdeveniment_idEsdeveniment`= 2 ",
" SELECT `idCategoria`, `nomCategoria`,
`descripcioCategoria`, `iconaCategoria`, `idSubCategoria`,
`nomSubCategoria`, `descripcioSubCategoria`, `iconaSubCategoria` FROM
`mercats_i_Fires`.`Categoria`, `mercats_i_Fires`.`SubCategoria`,
`mercats_i_Fires`.`Esdeveniment` WHERE `Categoria`.`idCategoria` =
`SubCategoria`.`Categoria_idCategoria` AND
`SubCategoria`.`idSubCategoria`=
`Esdeveniment`.`SubCategoria_idSubCategoria` AND
`Esdeveniment`.`idEsdeveniment`= 2 ",
" SELECT `municipi`, `comarca`,
`provincia`, `comunitatAutonoma`, `estat`, `nomLocalitat`, `latitud`,
`longitud`, `alcada`, `nomLlocCelebracio`, `adreca`, `codiPostal`,
`comArribar` FROM `mercats_i_Fires`.`LlocCelebracio_te_Esdeveniment`,
`mercats_i_Fires`.`LlocCelebracio`, `mercats_i_Fires`.`Ubicacio`,
`mercats_i_Fires`.`Localitat`, `mercats_i_Fires`.`Municipi` WHERE
`Esdeveniment_idEsdeveniment` = 2 AND `LlocCelebracio_idLlocCelebracio` =
`idLlocCelebracio` AND `idUbicacio` = `Ubicacio_idUbicacio` AND
`idLocalitat` = `Localitat_idLocalitat` AND `idMunicipi` =
`Municipi_idMunicipi` ; ",
" SELECT `idEtiquetes`, `nomEtiqueta`,
`descripcioEtiqueta`, `iconaEtiqueta` FROM `mercats_i_Fires`.`Etiquetes`,
56
Capítol 6 Desenvolupament
`mercats_i_Fires`.`Etiquetes_te_Esdeveniment` WHERE
`Esdeveniment_idEsdeveniment`= 2 AND
`Etiquetes_idEtiquetes`=`idEtiquetes` ; ",
" SELECT `idImatge`, `pathFitxer` FROM
`mercats_i_Fires`.`Imatge`, `mercats_i_Fires`.`Esdeveniment_te_Imatge`
WHERE `Esdeveniment_idEsdeveniment`= 2 AND `idImatge`=`Imatge_idImatge` ;
"
],
processtime: 0.244572
},
data: {
Esdeveniment: [
{
idEsdeveniment: "2",
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
Capítol 6 Desenvolupament
}
],
temps: [
{
tempsInici: "DIARI",
tempsFi: "DIARI"
}
],
Serveis: [
{
nomServei: "Aparcament, lliurament a
domicili, pagament a",
descripcioServei: "",
iconaServei: ""
}
],
categoria: [
{
idCategoria: "1",
nomCategoria: "Mercat",
descripcioCategoria: "",
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
Capítol 6 Desenvolupament
alcada: "0",
nomLlocCelebracio: "C/Llobregos",
adreca: "C/Llobregos, 149",
codiPostal: "8032",
comArribar: ""
}
],
Etiquetes: [
{
idEtiquetes: "1",
nomEtiqueta: "Variat",
descripcioEtiqueta: "",
iconaEtiqueta: ""
}
],
imatges: [
{
pathFitxer: "CAP"
}
]
}
}
Codi 6.4.2.4 Cadena JSON generada per el php
• Fitxer: ./php2json/imatges_subCategoria.php
• Descripció: Fitxer que retorna un array de imatges associades a una subCategoria
donada per la seva ID.
• Paràmetres:
debug: si debug=true retorna la informació de debug.
ID: id de la subCategoria a cercar.
• Retorna: Objecte JSON amb Array de noms de fitxer d'imatges dintre de data i
informació de debug a trace.
• Exemple d'us: ./php2json/imatges_subCategoria.php?ID=1. On es retorna el que es
mostra tot seguit:
{
59
Capítol 6 Desenvolupament
trace: {
timestamp: 1378136584,
executionTime: 0,
params: {
ID: "1",
debug: "true"
},
StringSQL: [
" SELECT `Imatge`.`idImatge`,
`Imatge`.`pathFitxer`,
`SubCategoria_te_Imatge`.`SubCategoria_idSubCategoria`,
`SubCategoria_te_Imatge`.`Imatge_idImatge` FROM
`mercats_i_Fires`.`SubCategoria_te_Imatge`, `mercats_i_Fires`.`Imatge`
WHERE `SubCategoria_te_Imatge`.`Imatge_idImatge` = `Imatge`.`idImatge`
AND `SubCategoria_te_Imatge`.`SubCategoria_idSubCategoria`= 1 ; "
],
processtime: 0.001363
},
data: [
{
idImatge: "1",
pathFitxer: "./Imatge1.png",
SubCategoria_idSubCategoria: "1",
Imatge_idImatge: "1"
}
]
}
Codi 6.4.2.5 Cadena JSON generada per el php
• 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:
debug: si debug=true retorna la informació de debug.
ID: id del lloc de celebració a cercar.
60
Capítol 6 Desenvolupament
• Retorna: Objecte JSON amb Array de noms de fitxer d'imatges dintre de data i
informació de debug a trace.
• Exemple d'us: ./php2json/imatges_lloc.php?ID=1&debug=true. On es retorna el
que es mostra tot seguit:
{
trace: {
timestamp: 1378136821,
executionTime: 0,
params: {
ID: "1",
debug: "true"
},
StringSQL: [
" SELECT `Imatge`.`idImatge`,
`Imatge`.`pathFitxer`,
`LlocCelebracio_te_Imatge`.`LlocCelebracio_idLlocCelebracio`,
`LlocCelebracio_te_Imatge`.`Imatge_idImatge` FROM
`mercats_i_Fires`.`LlocCelebracio_te_Imatge`, `mercats_i_Fires`.`Imatge`
WHERE `LlocCelebracio_te_Imatge`.`Imatge_idImatge` = `Imatge`.`idImatge`
AND `LlocCelebracio_te_Imatge`.`LlocCelebracio_idLlocCelebracio`=1 "
],
processtime: 0.111948
},
data: [
{
idImatge: "1",
pathFitxer: "./Imatge1.png",
LlocCelebracio_idLlocCelebracio: "1",
Imatge_idImatge: "1"
}
]
}
Codi 6.4.2.6 Cadena JSON generada per el php
61
Capítol 6 Desenvolupament
• Fitxer: ./php2json/imatges_etiqueta.php
• Descripció: Fitxer que retorna un array de imatges associades a una etiqueta donada
per la seva ID.
• Paràmetres:
debug: si debug=true retorna la informació de debug.
ID:id de la etiqueta a cercar.
• Retorna: Objecte JSON amb Array de noms de fitxer d'imatges dintre de data i
informació de debug a trace.
• Exemple d'us: ./php2json/imatges_etiqueta.php?ID=1&debug=true . On es retorna
el que es mostra tot seguit:
{
trace: {
timestamp: 1378137478,
executionTime: 0,
params: {
ID: "1",
debug: "true"
},
StringSQL: [
" SELECT `Imatge`.`idImatge`,
`Imatge`.`pathFitxer`, `Etiquetes_te_Imatge`.`Etiquetes_idEtiquetes`,
`Etiquetes_te_Imatge`.`Imatge_idImatge` FROM
`mercats_i_Fires`.`Etiquetes_te_Imatge`, `mercats_i_Fires`.`Imatge` WHERE
`Etiquetes_te_Imatge`.`Imatge_idImatge` = `Imatge`.`idImatge` AND
`Etiquetes_te_Imatge`.`Etiquetes_idEtiquetes`=1 "
],
processtime: -0.694732
},
data: [
{
idImatge: "1",
pathFitxer: "./Imatge1.png",
Etiquetes_idEtiquetes: "1",
Imatge_idImatge: "1"
}
62
Capítol 6 Desenvolupament
]
}
Codi 6.4.2.7 Cadena JSON generada per el php
• 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 <nobr>Mercat del Guinardó </nobr> Adossat a un altre
edifici. Consta de dues pu</br><a style="color:green"
href="detall_mercat.html?ID=1" >Veure mes Detalls</a> <br/> 200,80
41.447873 2.155724 features/icons/viewpoint.png 32,32
0,-32 <nobr>Mercat del Carmel</nobr> Adossat a un altre
edifici. Consta de quatre </br><a style="color:green"
href="detall_mercat.html?ID=2" >Veure mes Detalls</a> <br/> 200,80
41.381124 2.150359 features/icons/viewpoint.png 32,32
0,-32 <nobr>Mercat de la Boqueria </nobr> Edifici aïllat. Consta de
trenta punts d'accé</br><a style="color:green" href="detall_mercat.html?
ID=3" >Veure mes Detalls</a> <br/> 200,80
41.37961 2.161946 features/icons/viewpoint.png 32,32
0,-32 <nobr>Mercat de Sant Antoni</nobr> Edifici aïllat. Consta de
vuit punts d'accés</br><a style="color:green" href="detall_mercat.html?
ID=4" >Veure mes Detalls</a> <br/> 200,80
Codi 6.4.2.8 Cadena TSV generada per el php
63
Capítol 6 Desenvolupament
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
Capítol 6 Desenvolupament
• 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
Capítol 6 Desenvolupament
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
Capítol 8 Estudi econòmic
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
Capítol 8 Estudi econòmic
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
Capítol 8 Estudi econòmic
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
Capítol 8 Estudi econòmic
• 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
Capítol 8 Estudi econòmic
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
Capítol 9 Conclusions
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
Capítol 9 Conclusions
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
Capítol 9 Conclusions
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
Capítol 9 Conclusions
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
Capítol 9 Conclusions
• 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
Capítol 9 Conclusions
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
Capítol 9 Conclusions
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
Capítol 11 Bibliografia
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
Capítol 11 Bibliografia
• 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
Editorial: O’Reilly
ISBN: 978-0-596-52068-7
Any: 2009
Format: PDF
• Títol: JavaScript & jQuery: The Missing Manual, Second Edition
Autor: David Sawyer McFarland
Editorial: O’Reilly
ISBN: 978-1-449-3-9902-3
Any: 2012
Format: PDF
87
Capítol 11 Bibliografia
• 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
Editorial: O’Reilly
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
Capítol 11 Bibliografia
• 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
Capítol 11 Bibliografia
• 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
Capítol 11 Bibliografia
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
• Google Chrome Linux 24.0.1312.70
• GIMP 2.6
• Dia 0.97.2
• Gantt project 2.6.1
• xMind 2012 SE ( v3.3.1.201212250029)
91
Capítol 11 Bibliografia
• 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
• Google Chrome Linux 24.0.1312.70
• 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
Capítol 11 Bibliografia
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
Capítol 11 Bibliografia
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
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("<nobr>$title</nobr>\t");
# description
print("$description <br/>");
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();
if ($debug == "true") {
$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
`Ubicacio`.`latitud`,
`Ubicacio`.`longitud`,
`Esdeveniment`.idEsdeveniment,
`Esdeveniment`.nomEsdeveniment,
`Esdeveniment`.descripcioEsdeveniment,
-- `Categoria`.`nomCategoria`,
`Categoria`.`iconaCategoria`,
`Categoria`.`iconaMida`,
`Categoria`.`iconaOffset`
FROM
`" . $DB_schema . "`.`Esdeveniment`,
`" . $DB_schema . "`.`Categoria`,
`" . $DB_schema . "`.`SubCategoria`,
`" . $DB_schema . "`.`LlocCelebracio_te_Esdeveniment`,
`" . $DB_schema . "`.`LlocCelebracio`,
`" . $DB_schema . "`.`Ubicacio`
WHERE
`LlocCelebracio_te_Esdeveniment`.`Esdeveniment_idEsdeveniment` =
`Esdeveniment`.idEsdeveniment
AND `Categoria`.`idCategoria` =
`SubCategoria`.`Categoria_idCategoria`
AND `SubCategoria`.`idSubCategoria`=
`Esdeveniment`.`SubCategoria_idSubCategoria`
AND
`LlocCelebracio_te_Esdeveniment`.`LlocCelebracio_idLlocCelebracio` =
`LlocCelebracio`.`idLlocCelebracio`
107
Capítol 12 Annexos
AND `Ubicacio`.`idUbicacio` =
`LlocCelebracio`.`Ubicacio_idUbicacio`
$filtreIdCategoria
;
";
//Se inserta la consulta en formato JSON si debug==true
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) {
//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 . '</br><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
if ($debug == "true") {
//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