desenvolupament de visor web per a …ligit0.uab.es/mtig/presentacions/master15/abella.pdf ·...

of 28/28
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

Post on 06-Feb-2018

223 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • DESENVOLUPAMENT DE VISOR WEB PER A CONSULTA DE GUIA URBANA NICA DELS MUNICIPIS DE MALLORCA

    MSTER EN TECNOLOGIES DE LA INFORMACI GEOGRFICA. 15 edici.

    TUTORS:IGNACIO FERRERO. MTIG.JOSU DAZ. TIC Mallorca.

    GENER 2014.ESTER ABELL MASDEU

  • NDEX

    1. INTRODUCCI

    MARC INSTITUCIONAL i ANTECEDENTS

    2. OBJECTIUS

    3. MARC TECNOLGIC

    4. DISSENY DE LA INTERFCIE

    5. DESENVOLUPAMENT

    6. CONCLUSIONS

    mtig15 TICMallorca ester abell

  • 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 tcnic a l'administracilocal en el camp de recursos informtics.

    Ofereix assessorament per a adquisici, gesti,actualitzaci i manteniment de les implantacionsd'informtica local, aix com producci idesenvolupament daplicacions.

    Aporta tamb la formaci necessria al personaldels ens consorciats en ls i manteniment del'equipament i de les aplicacions informtiques.

    mtig15 TICMallorca ester abell

  • FORMACI, presencial, virtual, telefnica.

    SUPORT, SISTEMES i COMUNICACI, hostalatge imanteniment daplicacions, webmail, connexiremota, hosting, etc...

    GESTI MUNICIPAL, aplicacions de gesti:registre, recaptaci comptabilitat,administraci.

    WEB, disseny, creaci i manteniment de pginesweb, gestor de continguts.

    TERRITORI, cartografia, geomtica, sistemes degesti de dades espacials com sitmun o ides.

    TIC MALLORCA

    5 REES DE SERVEIS TCNICS:

    mtig15 TICMallorca ester abell

  • Donant resposta a la necessitat i demanda creixent

    de la publicaci de dades espacials degudament

    normalitzades, ja a lany 2002 simplementa el

    projecte EdiGuia, basat en tecnologia flash.

    TIC MALLORCA

    Funcions dedici Microstation .

    Mapa client MapInfo.

    Programa propietari encara implementat en la majoria de webs municipals, sense suport de lempresa desenvolupadora.

    TERRITORI, 2002

    mtig15 TICMallorca ester abell

  • Noves alternatives, implementaci dalgunes

    guies urbanes basades en SITMUN.

    TIC MALLORCA

    TERRITORI, 2008

    mtig15 TICMallorca ester abell

  • Noves alternatives, desenvolupament dun visor

    propi seguint noves tendncies de navegaci i

    software lliure.

    TIC MALLORCA

    TERRITORI, 2012

    mtig15 TICMallorca ester abell

  • Obj.1. Aplicaci web lleugera senzilla.

    Obj.2. Interfcie dusuari innovadora i impactant visualment, a la vegada que simple, amena i funcional. Trencar amb laspecte tcnic de la majoria de visors actuals.

    Obj.3. Desenvolupament amb software lliure.

    Obj.4. Base de dades cartogrfica segons directrius del projecte CARTOCIUDAD.

    Obj.5. Visualitzaci de Punts dinters a disposici de lusuari. Icones amb imatges vectorials.

    OBJECTIUS PRINCIPALS

    mtig15 TICMallorca ester abell

  • Obj.6. Funcions bsiques de navegaci i visualitzaci (zoom, pan, etc)

    Obj.7. Funcions addicionals com:

    Eina de mesura (lnia i/o rea).

    Eina informaci de punt seleccionat.

    Impressi del mapa

    Compartir mapa amb xarxes socials

    Cerca predictiva de geolocalitzaci a partir de text introdut per lusuari

    Obj.8. Altres funcions com : Suggeriment de ruta entre punts dinters.(descartat i ajornat a properes fases)

    FUNCIONALITATS

    mtig15 TICMallorca ester abell

  • REQUERIMENTS TECNOLGICS

    Gestor de bases de dades espacials

    Servidor web http.

    Servidor web de dades espacials.

    Entorn de desenvolupament de laplicaci.

    Tecnologies de codi obert en tots els mbits.

    mtig15 TICMallorca ester abell

  • TECNOLOGIES EXISTENTS A TIC MALLORCA

    OpenGeo Suite

    Gesti de bases de dades espacials

    Servidor web de dades espacials.

    Entorn de desenvolupament de laplicaci.

    Servidor web http.ApacheTomcat

    Tecnologies de codi obert.

    PostGis QGIS GeoServer

    OpenLayers

    mtig15 TICMallorca ester abell

  • MARC TECNOLGIC

    BASEDEDADESBASEDEDADES

    SERVIDORWEBDEDADESESPACIALS

    SERVIDORWEBDEDADESESPACIALS

    SERVIDORTICMALLORCASERVIDOR

    TICMALLORCA

    PostGis

    Geoserver

    pgAdmin IIIPostgreSQL

    INTERFCIEDUSUARIclient

    INTERFCIEDUSUARIclient

    SERVIDORWEB(HTTP)SERVIDORWEB(HTTP)

    /*CSS*/OpenLayers

    GeoExtExt JS3.4Sencha Doc

  • BASE DE DADES

    No existeix una BBDD PostGis especfica per als de laplicaci. Les dades origen estan en

    producci (PROJECTE CARTOCIUDAD).

    Dades completades: municipi Santa Eugnia----> BBDD PostGis pilot. GUIUM.

    El desenvolupament i la implementaci delaplicaci sn parallels a la producci de

    la BBDD PostGis.

    Caldr preveure en el codi de laplicaciparmetres i variables genriques.

    mtig15 TICMallorca ester abell

  • DISSENY DE LA INTERFCIE

    Editor grfic Corel Draw X3

  • DISSENY DE LA INTERFCIE

    Editor grfic Corel Draw X3

  • DISSENY DE LA INTERFCIE

    Editor grfic Corel Draw X3

  • DISSENY DE LA INTERFCIE

    Editor grfic Corel Draw X3

  • DISSENY DE LA INTERFCIE

    Editor grfic Corel Draw X3

  • DESENVOLUPAMENT

    Vista general (regions)

    Capalera, peu de pgina, barra men (botons)

    Ext.Viewport

    /*CSS*/

    Botons Eines

    OpenLayers

    Control.Panel

    Mapa Guia

    Control.OverviewMap

    mtig15 TICMallorca ester abell

    Ext JS3.4

  • DESENVOLUPAMENT

    Botons Eines

    OpenLayers

    Control.Panel

    Mapa Guia

    Control.OverviewMap

    Panell dimpressi i compartir xarxes socials

    Ext.Container

    mtig15 TICMallorca ester abell

    GeoExt

  • DESENVOLUPAMENT

    Mdul de cerca predictiva

    jquery.js

    mtig15 TICMallorca ester abell

  • DESENVOLUPAMENT

    Mdul de cerca predictiva

    jquery.js

    mtig15 TICMallorca ester abell

  • CONNEXI A DADES I CRREGA DE CAPES

    Codi PHP connexi a dades.

    Programaci JS variables per als noms de capes.

    mtig15 TICMallorca ester abell

  • CONNEXI A DADES I CRREGA 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 TICMallorca ester abell

  • SIMBOLITZACI DE CAPES

    mtig15 TICMallorca ester abell

  • RESULTAT VISUALITZACI APLICACI GUIUM

    mtig15 TICMallorca ester abell

  • CONCLUSIONS

    Assolits objectius plantejats per

    TIC Mallorca.

    Perode de prctiques enriquidor que mha

    perms desenvolupar, practicar i augmentar

    mpliament els coneixements assolits durant

    les classes teriques del mster.

    Millorar estils de linterfcie en relaci

    al disseny grfic inicial.

    Test de compatibilitat a la resta de

    navegadors. Actualment: Mozilla Firefox.

    mtig15 TICMallorca esterabell

  • mtig15 TICMallorca ester abell