DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf ·...
Transcript of DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf ·...
![Page 1: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/1.jpg)
DESENVOLUPAMENT DE VISOR WEB PER A CONSULTA DE GUIA URBANA ÚNICA DELS MUNICIPIS DE MALLORCA
MÀSTER EN TECNOLOGIES DE LA INFORMACIÓ GEOGRÀFICA. 15ª edició.
TUTORS:IGNACIO FERRERO. MTIG.JOSUÉ DÍAZ. TIC Mallorca.
GENER 2014.ESTER ABELLÀ MASDEU
![Page 2: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/2.jpg)
ÍNDEX
1. INTRODUCCIÓ
MARC INSTITUCIONAL i ANTECEDENTS
2. OBJECTIUS
3. MARC TECNOLÒGIC
4. DISSENY DE LA INTERFÍCIE
5. DESENVOLUPAMENT
6. CONCLUSIONS
mtig15 – TIC Mallorca ester abellà
![Page 3: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/3.jpg)
TIC MALLORCA
Fundat el juny de 1992 per un total de 23ajuntaments, seguint la iniciativa del ConsellInsular de Mallorca fundaren TIC Mallorca.
És un òrgan de suport tècnic a l'administraciólocal en el camp de recursos informàtics.
Ofereix assessorament per a adquisició, gestió,actualització i manteniment de les implantacionsd'informàtica local, així com producció idesenvolupament d’aplicacions.
Aporta també la formació necessària al personaldels ens consorciats en l’ús i manteniment del'equipament i de les aplicacions informàtiques.
mtig15 – TIC Mallorca ester abellà
![Page 4: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/4.jpg)
• FORMACIÓ, presencial, virtual, telefònica.
• SUPORT, SISTEMES i COMUNICACIÓ, hostalatge imanteniment d’aplicacions, webmail, connexióremota, “hosting”, etc...
• GESTIÓ MUNICIPAL, aplicacions de gestió:registre, recaptació comptabilitat,administració.
• WEB, disseny, creació i manteniment de pàginesweb, gestor de continguts.
• TERRITORI, cartografia, geomàtica, sistemes degestió de dades espacials com sitmun o ides.
TIC MALLORCA
5 ÀREES DE SERVEIS TÈCNICS:
mtig15 – TIC Mallorca ester abellà
![Page 5: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/5.jpg)
Donant resposta a la necessitat i demanda creixent
de la publicació de dades espacials degudament
normalitzades, ja a l’any 2002 s’implementa el
projecte EdiGuia, basat en tecnologia flash.
TIC MALLORCA
Funcions d’edició Microstation .
Mapa client MapInfo.
Programa propietari encara implementat en la majoria de webs municipals, sense suport de l’empresa desenvolupadora.
TERRITORI, 2002
mtig15 – TIC Mallorca ester abellà
![Page 6: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/6.jpg)
Noves alternatives, implementació d’algunes
guies urbanes basades en SITMUN.
TIC MALLORCA
TERRITORI, 2008
mtig15 – TIC Mallorca ester abellà
![Page 7: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/7.jpg)
Noves alternatives, desenvolupament d’un visor
propi seguint noves tendències de navegació i
software lliure.
TIC MALLORCA
TERRITORI, 2012
mtig15 – TIC Mallorca ester abellà
![Page 8: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/8.jpg)
Obj.1. Aplicació web lleugera senzilla.
Obj.2. Interfície d’usuari innovadora i impactant visualment, a la vegada que simple, amena i funcional. Trencar amb l’aspecte tècnic de la majoria de visors actuals.
Obj.3. Desenvolupament amb software lliure.
Obj.4. Base de dades cartogràfica segons directrius del projecte CARTOCIUDAD.
Obj.5. Visualització de Punts d’interès a disposició de l’usuari. Icones amb imatges vectorials.
OBJECTIUS PRINCIPALS
mtig15 – TIC Mallorca ester abellà
![Page 9: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/9.jpg)
Obj.6. Funcions bàsiques de navegació i visualització (zoom, pan, etc)
Obj.7. Funcions addicionals com:
Eina de mesura (línia i/o àrea).
Eina “informació de punt seleccionat”.
Impressió del mapa
Compartir mapa amb xarxes socials
Cerca predictiva de geolocalització a partir de text introduït per l’usuari
Obj.8. Altres funcions com : Suggeriment de ruta entre punts d’interès.(descartat i ajornat a properes fases)
FUNCIONALITATS
mtig15 – TIC Mallorca ester abellà
![Page 10: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/10.jpg)
REQUERIMENTS TECNOLÒGICS
• Gestor de bases de dades espacials
• Servidor web http.
• Servidor web de dades espacials.
• Entorn de desenvolupament de l’aplicació.
• Tecnologies de codi obert en tots els àmbits.
mtig15 – TIC Mallorca ester abellà
![Page 11: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/11.jpg)
TECNOLOGIES EXISTENTS A TIC MALLORCA
OpenGeo Suite
• Gestió de bases de dades espacials
• Servidor web de dades espacials.
• Entorn de desenvolupament de l’aplicació.
• Servidor web http.Apache Tomcat
• Tecnologies de codi obert.
PostGis QGIS GeoServer
OpenLayers
mtig15 – TIC Mallorca ester abellà
![Page 12: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/12.jpg)
MARC TECNOLÒGIC
BASE DE DADESBASE DE DADES
SERVIDOR WEBDE DADES ESPACIALS
SERVIDOR WEBDE DADES ESPACIALS
SERVIDOR TIC MALLORCASERVIDOR
TIC MALLORCA
PostGis
Geoserver
pgAdmin IIIPostgreSQL
INTERFÍCIE D’USUARIclient
INTERFÍCIE D’USUARIclient
SERVIDOR WEB (HTTP)SERVIDOR WEB (HTTP)
<!--HTML-->
/*CSS*/OpenLayers
GeoExtExt JS 3.4Sencha Doc
![Page 13: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/13.jpg)
BASE DE DADES
• No existeix una BBDD PostGis específica per a
l’ús de l’aplicació. Les dades origen estan en
producció (PROJECTE CARTOCIUDAD).
• Dades completades: municipi Santa Eugènia
----> BBDD PostGis pilot. GUIUM.
• El desenvolupament i la implementació de
l’aplicació són paral·lels a la producció de
la BBDD PostGis.
• Caldrà preveure en el codi de l’aplicació
paràmetres i variables genèriques.
mtig15 – TIC Mallorca ester abellà
![Page 14: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/14.jpg)
DISSENY DE LA INTERFÍCIE
Editor gràfic Corel Draw X3
![Page 15: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/15.jpg)
DISSENY DE LA INTERFÍCIE
Editor gràfic Corel Draw X3
![Page 16: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/16.jpg)
DISSENY DE LA INTERFÍCIE
Editor gràfic Corel Draw X3
![Page 17: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/17.jpg)
DISSENY DE LA INTERFÍCIE
Editor gràfic Corel Draw X3
![Page 18: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/18.jpg)
DISSENY DE LA INTERFÍCIE
Editor gràfic Corel Draw X3
![Page 19: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/19.jpg)
DESENVOLUPAMENT
Vista general (regions)
Capçalera, peu de pàgina, barra menú (botons)
Ext.Viewport
<!--HTML-->/*CSS*/
Botons Eines
OpenLayers
Control.Panel
Mapa Guia
Control.OverviewMap
mtig15 – TIC Mallorca ester abellà
Ext JS 3.4
![Page 20: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/20.jpg)
DESENVOLUPAMENT
Botons Eines
OpenLayers
Control.Panel
Mapa Guia
Control.OverviewMap
Panell d’impressió i compartir xarxes socials
Ext.Container
mtig15 – TIC Mallorca ester abellà
GeoExt
![Page 21: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/21.jpg)
DESENVOLUPAMENT
Mòdul de cerca predictiva
jquery.js
mtig15 – TIC Mallorca ester abellà
![Page 22: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/22.jpg)
DESENVOLUPAMENT
Mòdul de cerca predictiva
jquery.js
mtig15 – TIC Mallorca ester abellà
![Page 23: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/23.jpg)
CONNEXIÓ A DADES I CÀRREGA DE CAPES
Codi PHP connexió a dades.
Programació JS variables per als noms de capes.
mtig15 – TIC Mallorca ester abellà
![Page 24: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/24.jpg)
CONNEXIÓ A DADES I CÀRREGA DE CAPES
Creació de capes en la iteració JS
VARIABILITAT PER A CADA CAPA:
NOM : cada capa correspon determinats POIs
ESTIL : hi haurà una ICONA per cada capa.
OpenLayers.Layer.WMS
NOM DE CADA CAPA ---> ARRAY JS
ESTIL DE CADA CAPA ---> CQL_FILTER
[idtpoi]
mtig15 – TIC Mallorca ester abellà
![Page 25: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/25.jpg)
SIMBOLITZACIÓ DE CAPES
mtig15 – TIC Mallorca ester abellà
![Page 26: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/26.jpg)
RESULTAT VISUALITZACIÓ APLICACIÓ GUIUM
mtig15 – TIC Mallorca ester abellà
![Page 27: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/27.jpg)
CONCLUSIONS
Assolits objectius plantejats per
TIC Mallorca.
Període de pràctiques enriquidor que m’ha
permès desenvolupar, practicar i augmentar
àmpliament els coneixements assolits durant
les classes teòriques del màster.
Millorar estils de l’interfície en relació
al disseny gràfic inicial.
Test de compatibilitat a la resta de
navegadors. Actualment: Mozilla Firefox.
mtig15 – TIC Mallorca ester abellà
![Page 28: DESENVOLUPAMENT DE VISOR WEB PER A …ligit0.uab.es/mtig/presentacions/master15/abella.pdf · Editor gràfic Corel Draw X3 . DISSENY DE LA INTERFÍCIE Editor gràfic Corel Draw X3](https://reader038.fdocument.pub/reader038/viewer/2022102715/5a78d6557f8b9a83238d2aec/html5/thumbnails/28.jpg)
mtig15 – TIC Mallorca ester abellà