Ayer por la noche estaba programando, y estaba grabando posiciones simuladas desde casa. Como en casa no me muevo, tuve que simular cierto movimiento. Los datos se graban en una base de datos MongoDB.
Hoy estaba continuando un rato, desde el instituto, y voilà, hay un salto desce casa al instituto. Lógico pero divertido.
Este es mi blog que utilizo desde el año 2009, y en la categoría MOOC-ABP iré construyendo el diario de aprendizaje de este curso online de metodologías activas. De momento aquí va mi presentación, i todo lo que esté relacionado con este curso irá en la categoría de MOOC ABP.
Trabajo en INS Jaume Balmes de Barcelona como profesor dels ciclos de Desarrollo de Aplicacions Web (DAW) y Desarrollo de Aplicaciones Multiplataforma (DAM), y mis ámbitos preferidos son el desarrollo Full Stack y bases de datos.
Referencias:
Este año hago en 1º de DAM la M02, Bases de Datos. Siempre he trabajado con bases de datos, con los alumnos, pero esta asignatura hacía mucho tiempo que no la hacía.
En verano me animé a hacer una herramienta web para que los alumnos pudiesen testear sus sentencias SQL de forma automática, y que también fuese un recurso para evaluar y auto-evaluar. Esta aplicación es BDQuest, el nombre no es muy original, pero a estas alturas ya no me atrevo a cambiarlo.
Empezamos el curso y en la UF1 no se hace nada de SQL. Pero en la UF2, que es la troncal del curso y que ya estamos acabando, los alumnos han estado utilizando la herramienta, y así poder practicar selects básicas, inserts, updates, deletes, create, alter y drop tables, create y drop views, selects complejas, etc.
Los alumnos han hecho de conejitos de indies y la versión 10, que es la actual, la he ido actualizando a lo largo del trimestre. ¡Y funciona muy bien!
Y ahora que estamos acabando la UF2 y no falta nada para empezar la UF3, he adaptado la aplicación para poder hacer create y drop users, grant privilegios, etc; y también create procedures, etc. Y los triggers ya vendrán. Es decir, que el objetivo inicial de que no sólo sirviese para hacer selects se habrá cumplido de sobras.
Hasta ahora no había escrito nada ni aquí ni en la wiki. Ya es hora de documentar un poco el proyecto y darlo a conocer. A ver si alguien le puede sacar provecho.
A la aplicación todavía le faltan muchas cosas, pero lo importante es que este año ha sido funcional. Es una típica aplicación web con mucho de Javascript y PHP-MySQL, y con un diseño de momento minimalista. La aplicación tendría que crecer por aquí: mejorar el diseño; y utilitzar algún framework en el lado del cliente y del servidor. Y también alguna refactoritzación del código y mejora de unas cuantas cosas.
Hemos cogido del IDESCAT los datos de los municipios de más de 20.000 habitantes de Cataluña (una setantena de municipios), y los hemos geolocalizado.
En esta ocasión se quería practicar la selección de capas, y lo quería hacer todo con módulos (imports) de Javascript, y el código los más limpio posible.
Se puede ver el resultado en este video.
Se ha publicado la web de la Cataluña Mágica: demonios, infierno, brujas y diablos, con información extraída de OpenStreetMap.
Hemos utiltzado OpenLayers 6.5.0 (con el paradigma de imports), y los tiles estandard de OSM y también TRESC, una capa de visualización que me gusta mucho. Los datos que se obtienen pueden ser nodos o vías, y ha habido un trabajo previo de limpiar un poco los datos, pero todo ha sido un proceso muy rápido.
Referencias:
Ahora que ya he empezado a hacer pruebas con Jupyter Notebook, el siguiente paso que quiero probar es hacer gráficos interactivos. Pues ha resultado ser más fácil y rápido de lo que pensaba.
Partimos de un script python que simula los datos experimentales de una trayectoria parabólica, y calcula la parábola que mejor se ajusta (regresión cuadrática). A partir de la ecuación de la parábola se puede deducir la constante g (=9,81 m/s2). Simulamos los datos experimentales introduciendo un error de ruido en los datos teóricos. Pues bien, con mi gráfico interactivo puedo jugar con el nivel de ruido y con el número de puntos del muestreo, tal com se ve en el video. El código queda de la siguiente forma:
%matplotlib inline
from ipywidgets import interactive
import numpy as np
import pylab as plt
from IPython.display import display, Math, Latex
# tir parabòlic: y = vy*t - .5gt^2
vy = 10 # 10m/s
g = 9.81 # m/s^2
t_max = 2*vy/g
def f(nivell_soroll, num_punts):
t = np.linspace(0, t_max, num_punts)
y_or = vy*t - .5*g*t**2
noise = np.random.normal(0, nivell_soroll, num_punts) # simulem dades experimentals
y = y_or + noise
# ajustament a una paràbola
z = np.polyfit(t, y, 2)
g_exp = 2.0*z[0]
t_ = np.linspace(0, t_max, 100)
y_ = z[0]*t_**2 + z[1]*t_ + z[2]
fig, ax = plt.subplots()
plt.plot(t_, y_, t, y, 'bo')
plt.suptitle("Tir parabòlic. Regressió quadràtica")
plt.title("y = " + str(round(z[0],3)) + "t^2 + " + str(round(z[1],3)) + "t + " + str(round(z[2],3)) + " -> g exp = " + str(round(g_exp,3)) + " m/s^2")
ax.set(xlabel='temps (s)', ylabel='y (m)')
ax.grid()
plt.show()
interactive_plot = interactive(f, nivell_soroll=(0.0, 2.0), num_punts=(10, 50))
interactive_plot
Otra cosa que me interesa es la manera de exportar estos Jupyter Notebooks a una web, conservando las gráficas y las fórmulas en format Latex (aunque se pierda la interacció con las gráficas). Esto se consigue directamente exportando el Notebook a html:
$ jupyter nbconvert --execute tir_parabolic.ipynb --to html
e integrando este código en una web donde haya más texto y explicaciones, y con la librería Bootstrap.
Durante este tiempo de confinamiento se ha trabajado mucho en casa con el teletrabajo, cosas del instituto y cosas mías. Haciendo una consulta mysql a la wiki y al wordpress se puede saber fácilmente en qué he estado trabajando durante estos días.
En la wiki, wiki.joanillo.org:
mysql> select distinct page_title 'COVID-19 editons' from page, revision where page_id=rev_page and rev_timestamp >= '20200313%' and page_namespace=0; +--------------------------------------------------------------------+ | COVID-19 editons | +--------------------------------------------------------------------+ | Llibres_electrònics_i_l'editor_Sublime_Text2._Convertir_pdf_a_txt | | Esglésies_romàniques_de_Catalunya | | Aplicació_web_amb_motor_Python | | Pàgina_principal | | Mapes_medievals,_mapes_ficticis,_mapes_de_fantasia | | Fusionar_GeoJSON | | Opendata-barcelona | | Openlayers:_ol_package._Exemple_Casa_de_Papel | | DAW-M06-WEC | | React:_A_JavaScript_library_for_building_user_interfaces | | JQuery:_Tablesorter | | React_Native | | Github_pràctic:_control_de_versions | | Desplegar_un_projecte_web_amb_Express_i_Heroku | | Aplicació_Reactjs_a_través_del_servidor_web_Express | | Openlayers_amb_ReactJS | | ReactJS._Curs_EdX._Introduction_to_ReactJS._Microsoft:_DEV281x | | Curriculum_Vitae_Joan_Quintana_Compte | | Introducció_als_frameworks_de_Javascript | | React_CRUD_tutorial | | Exemples_Openlayers_(ol_package) | +--------------------------------------------------------------------+ 21 rows in set (0.00 sec)
En el blog, a www.joanillo.org:
select post_title from wp_posts where post_modified >= '2020-03-13%' and post_type='post' and post_parent=0 Geovisualització de la COVID-19 Esglésies romàniques Vegueries/regions de Catalunya. Densitat de població La Casa de Papel: aplicació web John H. Conway. Joc de la Vida Introducció a ReactJS: DEV281x
De momento es esto, porque desgraciadamente el confinamiento continúa.
Este es un ejemplo que he hecho mano a mano con Pere, ahora que estamos confinados por la COVID-19 y vamos por la mitad de la 3a temporada de La Casa de Papel.
Para mi también ha servido para hacer una aplicación OpenLayers con código Node, que es la tendencia actual. Todo está explicado en la wiki y en los enlaces a los que se hace referencia.
La renderización que se ha hecho del mapa en blanco y negro es el estilo toner de Stamen. A mí particularmente me gusta mucho, y creo que hemos conseguido una buena integración con el diseño propio de la serie, que juega con los colores negro y rojo.
Enlaces:
Tenía un tema pendiente con la visualización de mapas: programar aquellos mapas en que se ven las fronteras (ya sean países, regiones, comarcas, municipios), y donde podamos asignar un color o podamos clicar en cada una de las regiones.
En la API de Overpass se pueden hacer consultas de las relaciones a nivel administrativo, y normalmente se obtiene las ways que representan líneas de frontera administrativa. Esto ya va bien para pintar el contorno de un municipio, por ejemplo. Ahora bien, para sombrear toea una área necesitamos un polígono cerrado. Lo mejor es buscar una fuente de datos con formato GeoJSON de los datos que necesitamos, por ejemplo las comarcas. Buscando un poco puedes encontrar datos de todo: países, comunidades autónomas, provincias, etc. Combinando estos datos con la información que nos interesa (por ejemplo, la densidad de población por comarca), podemos hacer una aplicación como la que se muestra en la imagen.
Para hacerlo, está explicado en la wiki. Ahora que me he puesto con el GeoJSON, ahora veo que hay otro formato interesante que es el TopoJSON. Esto es un no parar!
Participo en la edición de este año del World Data Viz Challenge 2018 Barcelona-Kobe. Entre el catálogo de datos abiertos que publica el Ayuntamiento de Barcelona, he escogido los datos de paro en el periodo 2011-2018. Mi aplicación de visualización la puedes ver en http://aturbcn.joanillo.org/. Se presentan los datos desglosados por barrios y por distritos, y se puede ver la evolución del paro a través de los años, o a través de los meses.
He utilizado la API de Open Street Map, que es una novedad para mi pues siempre había utilizado la API de Google Maps. Los datos originales estaban en formato xls, y se han introducido a una base de datos MySQL para poder explotar los datos directamente con SQL.
La idea de participar vino porque, de hecho, en el instituto queremos participar en otra convocatoria: Repte Barcelona Dades Obertes, segona edició 2019 (http://opendata-ajuntament.barcelona.cat/ca/repte-barcelona-dades-obertes). Hay que ver cómo, dentro de la asignatura de Javascript (Ciclo Formativo de Desarrollo de Aplicaciones Web), podemos hacer alguna visualización para presentarla en esta convocatoria.
Referencias: