Esta asignatura de cinco semanas forma parte de la especialización en Programación de sistemas de información geográfica de la UOC.
Créditos totales de la especialización: 12 ECTS
Inicio especialización: 18 marzo 2015
Este repositorio complementa las actividades docentes de la asignatura. Aquí puedes encontrar ejemplos y ejercicios sencillos de programación de aplicaciones web de mapas con JavaScript. Todos los videos de la asignatura están disponibles en Vimeo.
Créditos totales de la asignatura: 4 ECTS (5 semanas)
Inicio asignatura: 30 Abril 2015
Fin asignatura: 3 Junio 2015
El objetivo principal es que los estudiantes conozcan buenas prácticas para la creación de aplicaciones web de mapas. No se trata de aprender programación en JavaScript (existen montones de tutoriales y recursos en línea para ello), sino de conocer una serie de pasos sencillos para diseñar una visualización, ya que los aplicaciones de mapas son visualizaciones de datos con el fin de informar a su audiencia.
No todo es diseño, porque los usuarios adoran las aplicaciones reales, y no sobre papel. Veremos qué herramientas de desarrollo web tenemos a nuestro alcance y sobre todo utlizaremos la librería JavaScript Leaflet.js para la creación de aplicaciones de ejemplo.
Videos:
- 1.1-intro (5:57): presentación curso y materiales docentes.
- 1.2-dev-tools (6:34): presentación videos JS y herramientas de desarrollo (Sublime Text 3, Chrome Dev Tools).
- Videos de JavaScript basico del canal YouTube ProgramaloTu - ProgramItYourself:
- Conceptos básicos: configuración navegador y la etiqueta script, declaraciones y comentarios, declaración de variables y tipos de variables, y operadores matemáticos y concatenación de cadenas (+).
- Funciones: function, parámetros, llamada a funciones, variables locales y globales.
- Condicionales if y if-else, y bucles for.
- Eventos: evento click (atributo onClick), y eventos onMouseOver, onMouseOut, OnLoad, onUnLoad).
- Listas (array): uso de new para crear objetos, inicializar una lista con elementos predefinidos, inicializar una lista con elementos dinámicos, iterar una lista con for, métodos y propiedades de las lista.
- 1.3-viz (6:07): un mapa es una visualización que cuenta una historia para educar, informar y/o explicar. Ejemplos: windytv, JurassicWorld, thingful
Videos:
- 2.1-intro (7:04): presentación y navegación por la web de ejemplos y ejercicios para las semanas 2 y 3.
- 2.2-leaflet (9:16): descripción ejemplo 01 de Leaflet "Carga y muestra un mapa base sobre un mapa".
- 2.3-leaflet (08:16): descripción ejemplo 04 de Leaflet "Carga datos (puntos) en csv desde un fichero".
- 2.4-leaflet (5:14): enunciado ejercicio semana 2.
Ejercicios:
Videos:
- 3.1-leaflet (6:24): descripción ejemplo 07 de Leaflet "Carga datos (puntos) en geojson desde un fichero local".
- 3.2-leaflet (6:00): enunciado ejercicios semana 3.
Ejercicios:
Videos:
- 4.1-intro (2:19): presentación y navegación por la web de ejemplos y ejercicios para la semana 4.
- 4.2-esri-leaflet (6:57): descripción ejemplo 03 de Esri Leaflet "Carga datos desde un servicio web ArcGIS".
- 4.3-esri-leaflet (5:06): descripción ejemplo 07 de Esri Leaflet "Agrupación (clustering) de geometrías de tipo punto".
- 4.4-esri-leaflet (4:01): descripción ejemplo 08 de Esri Leaflet "Mapas de calor (heatmaps) a partir de geometrias de tipo de punto".
- 4.5-esri-leaflet (8:16): enunciado ejercicios semana 4.
Ejercicios:
Videos:
- 5.1-intro (4:09): presentacion práctica
La Prueba de Evaluación Continua (PEC) consiste en la realización de 7 ejercicios cortos de programación marcados claramente en naranja.
Formato de entrega: Para cada ejercicio propuesto hay que capturar un pantallazo y copiarlo en un documento en formato doc, indicando brevemente de forma descriptiva (no código) lo que habéis hecho para realizar el ejercicio. Se deberá entregar un único fichero (doc, pdf) con la resolución (pantallazo + breve explicación) de los 7 ejercicios planteados.
Fecha de entrega: La fecha máxima de entrega será el ultimo día de la cuarta semana (27 Mayo 2015)
La Práctica o proyecto final, marcado claramente en rojo, consiste en la programación por parte de los estudiantes de una aplicación web de mapas como proyecto final de la asignatura. Los estudiantes podrán definir la temática del proyecto y deberán combinar varias funcionalidades vistas en las semanas previas en menos de 100 líneas de código. El proyecto final deberá incluir las siguientes características:
- Control de capas.
- Acceso a varias capas de datos.
- Simbología personalizada de los datos (puntos, líneas).
- Uso de popups para mostrar información asociada a la geometría (puntos, líneas).
- Uso de al menos una operación espacial (clustering, heatmap).
Formato de entrega: Un único fichero comprimido (zip) con el código fuente de la práctica (.html + .js, o .html si el código javascript va en la propia página html). No es necesario incluir en el fichero comprimido los ficheros javascript de leaflet o plugins adicionales que forman parte del proyecto, ni tampoco las hojas de estilo (css) utilizadas.
Fecha de entrega: Último día del curso (3 de junio 2015)
- Intervenciones en el aula: 10% de la nota final.
- PEC (7 ejercicios propuestos): 40% de la nota final.
- Práctica (proyecto final): 50% de la nota final.
- Página principal de Leaflet.js
- Leaflet API
- Pagina principal de ESRI Leaflet
- Ejemplos de ESRI Leaflet
- ESRI Leaflet API
- Eloquent JavaScript, Secodng Edition e sun libro abierto sobre JavaScript y la programación de JS.
Videos de JavaScript basico del canal YouTube ProgramaloTu - ProgramItYourself
Icons made by Freepik from www.flaticon.com is licensed by CC BY 3.0
Servicios ArcGIS proporcionados por UJI Smart Campus
Creative Commons Reconocimiento-CompartirIgual 3.0 España (CC BY-SA 3.0 ES)]