29
01 SIGWEB 12-13/UOC I.T. Informática de Sistemas Alumno: Pío Sierra Rodríguez Consultor: Víctor Velarde Gutiérrez Trabajo de fin de carrera

Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

01

SIGWEB

12-13/UOC

I.T. Informática de Sistemas

Alumno: Pío Sierra Rodríguez

Consultor: Víctor Velarde Gutiérrez

Trabajo de fin de carrera

Page 2: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

00 1. Introducción

2. Análisis del dominio

3. SIG y Cloud

4. Diseño del SIG Web

5. Finalización

APLICACIÓN WEB

PARA EL INVENTARIO

DE PRESIONES EN RÍOS

CON CARTODB

guía contenidos

Page 3: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

01 • Conocer los fundamentos básicos de los SIG y las nuevas

herramientas geoespaciales en Internet.

• Aplicar los conocimientos adquiridos en SIG al desarrollo

de una aplicación web para la gestión de información

ambiental.

• Reflexionar sobre el concepto de computación en la nube

aplicado a la información geográfica y sus implicaciones

en las organizaciones actuales.

• Analizar los servicios web de una plataforma y desarrollar

software sobre su API con solvencia.

OBJETIVOS

GENERALES introducción

Page 4: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

01 • Aprender el manejo de CartoDB como usuario y de sus

APIs como programador.

• Introducirse en el uso de una librería de mapas para

JavaScript, tal como GoogleMaps, Leaflet u OpenLayers.

• Desarrollar una aplicación web mediante el uso de

JavaScript y técnicas como AJAX con JSON.

• Diseñar un interfaz adecuado de consulta e interacción

con los datos mediante HTML, JavaScript y CSS.

OBJETIVOS

ESPECÍFICOS introducción

Page 5: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

01 PLANIFICACIÓN

introducción GanttProject

Page 6: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

02 PRESIONES

análisis dominio

• Presión: toda acción humana

que afecta de manera

significativa al estado de las

aguas, ya sea directa o

indirectamente.

• El inventario de presiones es

exigido por normativa de la

Unión Europea.

Page 7: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

02 PRESIONES

análisis dominio

Page 8: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

02 CONFEDERACIÓN

HIDROGRÁFICA

análisis dominio

www.chtajo.es

> Inicio

> Servicios

> Descarga de

capas

Page 9: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 • Información

georreferenciada

– Crear

– Modificar

– Analizar

– Mostrar

SISTEMAS DE

INFORMACIÓN

GEOGRÁFICA sig & cloud

Page 10: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 • Software como Servicio

– SaaS

• Plataforma como Servicio

– PaaS

• Infraestructura como Servicio

– IaaS

CLOUD

COMPUTING sig & cloud

Page 11: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 ARCGIS SERVER

EN AMAZON EC2 sig & cloud

Page 12: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 CLOUD SIG

sig & cloud

www.pearltrees.com

> Barry Dyer

Page 13: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las
Page 14: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 CARTODB

sig & cloud

• Mapas y

visualizaciones

• Tecnología

OpenSource

• CartoDB.js

• SQL API

• Cuatro planes

de uso

Page 15: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las
Page 16: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

03 CARTODB

sig & cloud

cartodb.com

github.com/CartoDB/cartodb20

Page 17: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 REQUISITOS • Pantalla/s para la gestión del inventario de presiones: alta, baja, modificación

y consulta básica. Se podrá definir la componente alfanumérica y espacial de

las entidades, mediante formulario/s y el dibujado sobre un mapa.

• Controles básicos de navegación (cambio de mapa base, zoom,

desplazamiento...).

• Representación de las entidades con una simbología clara que permita

diferenciar su tipo.

• Identificación interactiva de entidades sobre el mapa, que muestre una

ventana emergente con sus datos (popup).

• Visualización de los límites de la demarcación hidrográfica.

DISEÑO DEL

SIG WEB diseño sigweb

Page 18: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04

CASOS

DE USO

diseño sigweb

Page 19: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 MODELO

E/R diseño sigweb

esDeTipo

Presión

Tipo Grupo 1

N

1

N

pertenece

A

Page 20: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 SELECIÓN DE UNA

LIBRERÍA DE MAPAS

PARA JAVASCRIPT diseño sigweb

• Google Maps API

• OpenLayers

• Leaftlet

> Tipo de licencia

> Requisitos funcionales

> Integración con CartoDB

> Documentación

Page 21: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 SELECIÓN DE UNA

LIBRERÍA DE MAPAS

PARA JAVASCRIPT diseño sigweb

Page 22: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 LIBRERÍAS

UTILIZADAS diseño sigweb

• Leaflet: funcionalidad básica de Leaflet.

• Wax: funciones de interactividad para Leaflet.

• jQuery: simplificar tareas en JavaScript.

• CartoDB-leaflet: para cargar capas de CartoDB en

Leaflet.

• CartoDB-popup: para crear pop-ups informativos de

las presiones.

• Leaflet.draw: añade controles de dibujo a Leaflet.

Page 23: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 APTANA

STUDIO 3 diseño sigweb

Page 24: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

CartoDB MapBox Esri

Leaflet

Leaflet.draw

Capas vectoriales (presiones, límites) Capas base

Mapa

Registro de nuevas presiones

jQuery

Mostrar/Ocultar

límites

Consultar

información de

presión

Seleccionar

tipos de

presiones

Añadir nueva

presión

SIG WEB 1.0

Page 25: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04 SIGWEB

DEMO diseño sigweb labrujula.org/sigweb

Page 26: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

05 • CartoDB es un servicio estable.

• Leaflet es una librería sencilla, elegante y tiene una

impronta pequeña, pero aún carece de algunas funciones

que se existen en Google Maps u OpenLayers.

• Utilizar librerías y tecnologías inmaduras tiene sus

riesgos.

• Proyectos que involucran muchas tecnologías distintas

suponen un reto exponencial si no se conocen con

anterioridad.

finalización

CONCLUSIONES

1)

Page 27: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

05 Ventajas

• Elasticidad/Escalabilidad

• Coste total de propiedad

reducido

• Facilidad para compartir

la información

• Alta disponibilidad

• Interconexión con otros

servicios

CONCLUSIONES

2) finalización

Inconvenientes

• Seguridad/Privacidad

• Control sobre el servicio

SIG &

CLOUD

Page 28: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

05 • Crear una nueva versión utilizando

CartoDB.js

• Incorporar algunas de las funciones

opcionales:

(Integración con otros servicios externos)

FUTURAS

LÍNEAS DE

TRABAJO finalización

Page 29: Aplicación web para el inventario de presiones en ríos con ...openaccess.uoc.edu/webapps/o2/bitstream/10609/18970/5... · 01 • Conocer los fundamentos básicos de los SIG y las

04

GRACIAS

Este TFC no habría sido posible sin

la ayuda de Víctor Velarde

¿Más preguntas? [email protected]