content review until smart citizen article

assets/css/styles.css

@@ -1,9 +1,35 @@
 /* Custom styles */
 
+:root {
+  --primary-color: #4682b4;
+}
+
 article {
     color: rgb(65, 65, 65);
 }
 
+figure.centered {
+    margin:  0 auto;
+    text-align: center;
+}
+
+figure figcaption p {
+    margin-top: 5px;
+    font-size: smaller;
+    font-style: italic;
+}
+
+blockquote {
+    color:  rgb(90, 90, 90);
+    border-left: 5px solid var(--primary-color);
+    padding-left:  15px;
+    margin-left:  0px;
+}
+
+iframe.borderless {
+    border:  0 solid;
+}
+
 .old-posts {
     padding: 20px 10px;
     background-color: rgb(226, 226, 226);
@@ -97,7 +123,7 @@ article {
 .u-clickable, article a {
     font-weight: inherit;
     text-decoration: none;
-    color: #4682b4;
+    color: var(--primary-color);
 }
 
 .Banner-link, .Tags-link{
@@ -108,4 +134,8 @@ article {
 
 .Banner-item--title a{
     font-size: 1.7rem;
+}
+
+.twitter-tweet-rendered {
+    margin:  0 auto;
 }

content/authors/_index.md

@@ -3,4 +3,4 @@ title: About us
 ---
 
 
-[geomatic blog](http://geomaticblog.net) started in 2006. Our first year was lost on one of the earliest migrations but is still available at the [wayback machine](http://web.archive.org/web/*/http://geomaticblog.net)). This was an idea from three university mates but over the years new friends have joined the effort and actually everyone is welcomed. If you have anything interesting to write about just contact us!! Most of the content of the blog is in Spanish but we are moving to English, and even we write here seldom, at least we'll try to maximize our audience. Thanks for visiting us!
+[geomatic blog](http://geomaticblog.net) started in 2006. Our first year was lost on one of the earliest migrations but is still available at the [wayback machine](http://web.archive.org/web/*/http://geomaticblog.net)). This was an idea from three university mates but over the years new friends have joined the effort and actually everyone is welcomed. If you have anything interesting to write about just contact us!! Most of the content of the blog is in Spanish but we are moving to English, and even we write here seldom, at least we'll try to maximize our audience. Thanks for visiting us!

content/posts/2007/10/2007-10-23-nokia_810_gps_y_java/index.md

@@ -10,7 +10,7 @@ authors: ["jorge-sanz"]
 
 Acabo de leer en el blog de [Ove](http://ovenordstrom.blogspot.com/2007/10/nokia-n810-internet-tablet-really-cool.html)que Nokia va a sacar una nueva Internet Tablet con GPS, teclado duro y,atención, soporte para Java ME/[CDC](http://java.sun.com/products/cdc/overview.html)!!! (ver nota)Y la mayoría diréis ¿eso qué es lo que es?... Pues justo la plataformaJava para la que estamos desarrollando en [Prodevelop](http://www.prodevelop.es) [gvSIGMobile](http://www.foss4g2007.org/presentations/view.php?abstract_id=124). Un cacharrín **SIN Windows Mobile**,con pantalla de **800 por 480**, **GPS**integrado,.... va a ser LA PLATAFORMA del mundo libre para desarrollaraplicaciones móviles, al menos la primera. Y si no, ¿cómo es que laprimera foto que vemos del bicho es justo **con un mapa**?
 
-![Nokia 810](images/n810_02_web_440-low.jpg)
+![Nokia 810](/imgs/2007/n810_02_web_440-low.jpg)
 
 Espero que [PhoneMEAdvanced](https://phoneme.dev.java.net/) (el proyecto de máquina virtual **libre**de Sun) tenga un buen rendimiento y no nos cueste mucho adaptar lorealizado hasta el momento porque creo que puede ser un **verdaderopuntazo**.
 
@@ -20,8 +20,4 @@ NOTA: Movido por el sensacionalismo entusiasmo blogger, metí la pata. No tiene
 
 Más info en [engadget](http://www.engadget.com/2007/10/17/nokias-n810-makes-first-appearance-drops-jaws/).
 
-El vídeo de promoción y una _review_ si pinchas en el _[leer más](/gb2/es/2007-10-23-nokia_810%2C_gps_y_java%21%21%21)_.
-
-[](http://www.youtube.com/v/JVZ6E9EnJ3I&rel=1&border=0 "Click here to block this object with Adblock Plus")
-
-[](http://www.youtube.com/v/wDe1gd-pBRo&rel=1&border=0 "Click here to block this object with Adblock Plus")
+{{< youtube JVZ6E9EnJ3I >}}

content/posts/2013/06/primeras-impresiones-de-smart-citizen/index.md

@@ -6,6 +6,7 @@ categories:
   - "hardware"
   - "osm"
 authors: ["jorge-sanz"]
+coverImage: "mapa.png?"
 ---
 
 [Smart Citizen](http://smartcitizen.me) es un proyecto que apareció en [goteo](http://goteo.org/project/smart-citizen-sensores-ciudadanos) hace un año. Goteo es una web de _crowdfunding_ al estilo de Kickstarter. Apareció poco después del [Air Quality Egg](http://airqualityegg.com/), al cual llegué tarde para participar. Así que nada, cuando vi una idea similar me apunté sin pensármelo mucho. ¿Cuál es la idea? Bien es sencillo, imaginad una red **completamente voluntaria** para la medición de variables medioambientales, sobre todo aquellas relacionadas con la contaminación tanto acústica como de cualquier otro tipo. Esa red no estaría controlada por ningún organismo, realmente es una red porque existe una forma común de acceder a todos los datos, pero los miembros ni se conocen, ni tienen por qué tener los mismos objetivos, ni las mismas motivaciones. ¿A que recuerda a otras actividades similares? Efectivamente, se trata al igual que en [OSM](http://osm.org) por ejemplo, de _«mapear»_ el territorio solo que de una forma diferente, un paso más allá de la representación estática de la realidad, hacia un conocimiento **más profundo** de nuestro entorno al entrar en el mundo de los sensores en tiempo real, de la famosa Internet de las Cosas.
@@ -14,15 +15,23 @@ Tanto [Smart Citizen](http://smartcitizen.me) como [AQE](http://airqualityegg.co
 
 En fin, volviendo al caso concreto de Smart Citizen, hace poco me llegó la placa. Básicamente es una placa [Arduino](http://arduino.cc/) con una placa superior de sensores (_shield_ en el argot Arduino) y una batería. La placa ya viene con el software precargado aunque ciertamente van a ir saliendo actualizaciones del mismo que hay que cargar con el entorno de desarrollo estándar de Arduino, sin mucho más misterio.
 
-[![SCK](images/9060074052_8fc963cb78.jpg)](http://www.flickr.com/photos/xurxosanz/9060074052/ "SCK by XuRxO, on Flickr")
+{{< figure
+  src="images/sck.jpg"
+  caption="SCK"
+>}}
 
 Para poner en marcha la placa solo hay que configurar la red wifi a la que se conectará. Esto se hace a través de la web mediante un _applet_ java que realiza todo el proceso. El único problema que tuve es que en mi caso, cuando se genera el puerto para el dispositivo no tengo permisos para usarlo por lo que tuve que ejecutar un sencillo sudo chmod 777 /dev/ttyACM0 para que fuera capaz de cargar la configuración. Una vez cargada, se reinicia la placa y empieza a enviar datos sin mayor inconveniente, quedando publicados de forma automática en [la web](http://test.smartcitizen.me/devices/view/139).
 
 La web todavía está en desarrollo, bueno **TODO** está aún en desarrollo, incluyendo el _firmware_ que ciertamente aún no presenta los datos de los sensores todo lo bien que debiera. Por ejemplo los valores de calidad de aire vienen en Ohmios, en lugar de las más típicas «partes por millón». Todo esto estoy seguro que se irá puliendo y aún cuando algún sensor no vaya del todo fino (me temo que el de sonido, por ejemplo), solo como primera aproximación a lo que puede ser el disponer de una red de sensores publicando en tiempo real toda esta información es más que interesante.
 
 La red [Smart Citizen](http://smartcitizen.me) está sobre todo (de momento) enfocada en Barcelona, de hecho la mía es la única placa hasta la fecha activada en la provincia de Valencia.
 
-[![Smart CItizen en Barcelona](/imgs/2013/06/2013-06-16-192707-seleccic3b3n.png?w=300)](http://test.smartcitizen.me/)
+
+{{< figure
+  src="images/mapa.png"
+  link="http://test.smartcitizen.me/"
+  caption="Smart CItizen en Barcelona"
+>}}
 
 Por otro lado todavía hay mucho que hacer en cuanto a la presentación de los datos que se van subiendo a su plataforma. Además de [la web del sensor](http://test.smartcitizen.me/devices/view/139) hay algún [punto de acceso](http://data.smartcitizen.me/testjson?device=139) para descargar en formato JSON todos los registros y también [una web](http://data.smartcitizen.me/test?device=139) para ver datos más antiguos que los escasos 20 minutos que se pueden ver desde la web oficial.
 

content/posts/2013/11/cartografiando-para-filipinas-en-osm/index.md

@@ -14,7 +14,7 @@ Por un lado la [increíble respuesta](http://resultmaps.neis-one.org/osm-typhoon
 
 De hecho se nos desbordó un poco el asunto y tuvimos que prometer que repetiremos la actividad la semana que viene en la universidad con ellos para que no vinieran todos hoy. Y menos mal porque hemos casi llenado las instalaciones que tan amablemente nos han cedido la gente de [beCode](http://becodemyfriend.com/). Creo que vamos a seguir contando con ellos para hacer cosas juntos, ya que casi sin conocernos nos han abierto sus puertas y nos ofrecido de forma desinteresada su local para que hagamos allí lo que se nos ocurra. ¿Mola no?
 
-https://twitter.com/beCodeMyFriend/status/401377619549372416
+{{< twitter user="beCodeMyFriend" id="401377619549372416" >}}
 
 Al final hemos sido algo más de veinte personas, prácticamente todas noveles en OSM. Tras una [charla ultra rápida](http://slid.es/jorgesanz/yolandaph-hotosm) sobre qué es OSM y qué íbamos a hacer hoy, la gente se ha puesto primero a pillarle en tranquillo a [JOSM](http://slid.es/jorgesanz/yolandaph-hotosm), y después ya a trabajar. Y la tarea no era para nada sencilla, ya que había que comparar datos anteriores al tifón (la imagen proporcionada por [Bing](http://binged.it/1jaiIf9)) con la imagen del satélite Pleiades que Esri ha [servido](http://bit.ly/1adric3) para que la comunidad pueda identificar los daños del tifón. Imágenes desplazadas, usuarios que no habían sido muy cuidadosos con la creación de cartografía y algunas nubes más o menos densas han sido los mayores problemas que ha tenido la gente para poder dar de alta nuevos edificios y carreteras y marcar aquellos que han quedado destruidos por el paso de Haiyan.
 

content/posts/2014/09/mapping-for-the-busy-cartographer-today-moving-dots/index.md

@@ -38,7 +38,7 @@ After uploading the [dataset](https://xurxosanz.cartodb.com/tables/paseo/public/
 
 Load the layer `paseo` and customise the SQL. The SQL is quite self-explanatory, first we filter the points over the line and then we use the `ST_MakeLine` aggregated function to rebuild our original line.
 
-```
+{{< highlight sql>}}
 WITH route AS (
   SELECT *
   FROM paseo
@@ -49,25 +49,28 @@ SELECT
   ST_MakeLine(the_geom_webmercator) as the_geom_webmercator
 FROM route
 GROUP BY lap
-```
+{{< /highlight >}}
+
 
 The styling of this layer is a simple CartoCSS rule with the only trick of a heavy blur filter.
 
-```
+
+{{< highlight css>}}
 #paseo[cartodb_id=1]{
     line-color: #A53ED5;
     line-width: 8;
     line-opacity: 0.7;
     line-comp-op: lighten;
     image-filters: agg-stack-blur(10,10);
 }
-```
+{{< /highlight >}}
 
 ### Moving dots
 
 This is the most important part of the map, of course. I have a path of points ordered and what I want is to show a more or less crowded ring of people moving. To do it, I've created a UNION of ten SELECTs to the table offsetting the id over the full range of id's. To acieve that I've used this long SQL:
 
-```
+
+{{< highlight sql>}}
 WITH route AS (
     SELECT * FROM paseo WHERE lap>0 AND route = 1
 ),
@@ -116,14 +119,15 @@ laps AS (
 SELECT
     cartodb_id, the_geom_webmercator,
     ((random()*10-10) + id) id
-FROM laps
-```
+FROM laps;
+{{< /highlight >}}
 
 The first with subquery filters the points of the path for this route that feed the next subquery: 10 unions with an `id` offset separation of 25 points. This subquery is passed to the main query that finally randomizes the `id` by +-5 positions, that is the order, so the moving dots are not regular, giving a more interesting (anarchic?) effect.
 
 Using the wizard, the main aspects of the Torque animation are set up. It's important to use a proper resolution, duration and frame count to adjust the rendering to a nice motion. Afterwards some last touches to the CSS to adjust the compositing operation and specially the trails, leaving just one more rendering of a similar point, instead of the default bigger and more transparent feature.
 
-```
+
+{{< highlight css>}}
 Map {
 -torque-frame-count:64;
 -torque-animation-duration:30;
@@ -146,19 +150,21 @@ Map {
 #paseo[frame-offset=2] {
  marker-width:6;
 }
-```
+{{< /highlight >}}
 
 ## Meeting point
 
 To add a feature to the map to render the meeting point, I manually added a new feature to the layer using the CartoDB editor. This feature will have the property `lap=0` so it won't be on the other layers. The SQL for this layer is just a
 
-```
-SELECT * FROM paseo WHERE route = 1 and lap = 0
-```
+{{< highlight sql>}}
+SELECT * 
+  FROM paseo
+ WHERE route = 1 and lap = 0
+{{< /highlight >}}
 
 And the CartoCSS is quite simple with the only important trick to use an external SVG. I've used directly the `town-hall` marker from the [Mapbox Maki repository](https://github.com/mapbox/maki).
 
-```
+{{< highlight css>}}
 #paseo{
   marker-fill-opacity: 0.9;
   marker-line-color: #FFF;
@@ -171,7 +177,7 @@ And the CartoCSS is quite simple with the only important trick to use an externa
   marker-allow-overlap: true;
 
   marker-file: url(https://raw.githubusercontent.com/mapbox/maki/mb-pages/src/town-hall-24.svg);
-```
+{{< /highlight >}}
 
 ![Fixed info window](/imgs/2014/09/2014-09-20-193927-seleccic3b3n.png?w=300)
 
@@ -195,18 +201,22 @@ What do you think about this visualization. What do you like and what do you hat
 
 This morning Pedro-Juan asked my, _why so many UNIONs? why not using just one long CASE?_. After accepting the challenge I did something with CASEs but then realized that I wast just looping over a smaller set of id values, so I could use the modulo function. So the long UNION SQL could be reduced to this easy and simple SQL:
 
-```
-SELECT
-    cartodb_id, the_geom_webmercator, 
-    ((random()*10-10) + id%3) id
-FROM paseo WHERE lap>0 AND route = 1
-```
+
+{{< highlight sql>}}
+SELECT cartodb_id,
+       the_geom_webmercator, 
+       ((random()*10-10) + id%3) id
+   FROM paseo
+  WHERE lap>0
+    AND route = 1;
+{{< /highlight >}}
 
 Wow, that's so concise compared with the huge SQL above!! Using this id%3 I forced all the values to be just 1,2,3 but with the afterwards random the moving effect is achieved.
 
 The CartoCSS would need also some changes to allow to "fill" the rendering over all the animation time. Check the differences with the above code, specially the number of offsets added:
 
-```
+
+{{< highlight css>}}
 Map {
 -torque-frame-count:50;
 -torque-animation-duration:8;
@@ -234,6 +244,6 @@ Map {
 #paseo[frame-offset=18] {}
 #paseo[frame-offset=20] {}
 #paseo[frame-offset=22] {}
-```
+{{< /highlight >}}
 
 The resultant visualization can be accessed [here](http://cdb.io/1ymwAzS). Which one do you like more? Do you think it's worth the simplicity over the (in my opinion) slightly worse effect?

content/posts/2014/12/the-null-island-algorithm/index.md

@@ -10,9 +10,12 @@ We geomaticians like to gather around a mythical place called [Null Island](http
 
 But earlier this year, some geonerds such as [@mizmay](http://twitter.com/mizmay) and [@schuyler](http://twitter.com/schuyler) realized that there is no one Null Island, but one Null Island per datum / coordinate system (depending on who you ask). And [@smathermather](http://twitter.com/smathermather) had the spare time to find out [how the "Null Archipielago" looks like](http://smathermather.wordpress.com/2014/09/10/null-archipelago-null-islands-for-all-coordinate-reference-systems/):
 
-\[embed\]https://smathermather.files.wordpress.com/2014/09/null\_archipelago.png\[/embed\]
 
-(Null archipielago image by [@smathermather](http://twitter.com/smathermather), containing Map tiles by [Stamen Design](http://stamen.com), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org), under [CC BY SA](http://creativecommons.org/licenses/by-sa/3.0))
+{{< figure
+ src="https://smathermather.files.wordpress.com/2014/09/null_archipelago.png"
+ caption="Null archipielago image by [@smathermather](http://twitter.com/smathermather), containing Map tiles by [Stamen Design](http://stamen.com), under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0). Data by [OpenStreetMap](http://openstreetmap.org), under [CC BY SA](http://creativecommons.org/licenses/by-sa/3.0)"
+>}}
+
 
 Fast forward a few months. I received an e-mail from one of my university peers, asking for help with a puzzle:
 
@@ -26,28 +29,63 @@ And I realized this is the Null Archipielago problem, all over again; but instea
 
 Cue PostGIS. We can create a point in every CRS like so:
 
-\[code\] select srid, ST\_GeomFromText('POINT(861126.41 941711.64)',srid) as geom from spatial\_ref\_sys; \[/code\]
+{{< highlight sql>}}
+ select srid, 
+        ST_GeomFromText(
+          'POINT(861126.41 941711.64)',
+          srid
+        ) as geom 
+   from spatial_ref_sys; 
+ {{< /highlight >}}
 
 Note the complete absence of PL/SQL in there.
 
 But it will be much easier to work with the data if all the points are in our beloved EPSG:4326 latitude-longitude coordinate system. And while we're at it, let's materialize that data into a table:
 
-\[code\] select srid, ST\_Transform(ST\_GeomFromText('POINT(861126.41 941711.64)',srid),4326) as geom from spatial\_ref\_sys; \[/code\]
+{{< highlight sql>}}
+ select srid, 
+        ST_Transform(
+          ST_GeomFromText(
+            'POINT(861126.41 941711.64)',
+            srid
+          ),
+          4326
+        ) as geom
+   from spatial_ref_sys; 
+{{< /highlight >}}
 
 But there is a problem with this - the PostGIS query will crash due to some CRSs having an empty Proj4 string. This took me a while to trace and fix:
 
-\[code\] select srid, ST\_Transform(ST\_GeomFromText('POINT(861126.41 941711.64)',srid),4326) as geom from spatial\_ref\_sys where proj4text!=''; \[/code\]
+{{< highlight sql>}}
+ select srid, 
+        ST_Transform(
+          ST_GeomFromText(
+            'POINT(861126.41 941711.64)',
+            srid
+          ),
+          4326
+        ) as geom 
+   from spatial_ref_sys 
+  where proj4text!=''; 
+{{< /highlight >}}
 
 And now we can take this data out into a file... but once again, there's a catch: some of the coordinates are out of bounds and represented by (∞, ∞) coordinate pair. Even though file formats can handle ∞/-∞ values (good thing we know how IEEE floating point format works, right folks?), some mapping software can not accommodate for these values. And I'm looking at you, CartoDB upload page.
 
 In this particular case, there are only points for (∞, ∞) so the data can be cleaned up in just one pass:
 
-\[code\]delete from archipielago where ST\_X(geom)>180;\[/code\]
+{{< highlight sql>}}
+delete from archipielago where ST_X(geom)>180;
+{{< /highlight >}}
 
 Then just add a tiny bit of CartoDB magic, and publish a map:
 
-[![nullarchipielago](/imgs/2014/12/nullarchipielago.png?w=285)](/imgs/2014/12/nullarchipielago.png)
 
-[https://ivansanchez.cartodb.com/viz/1ac4a786-805a-11e4-bc48-0e853d047bba/public\_map](https://ivansanchez.cartodb.com/viz/1ac4a786-805a-11e4-bc48-0e853d047bba/public_map)
+{{< figure
+src="/imgs/2014/12/nullarchipielago.png?w=285)](/imgs/2014/12/nullarchipielago.png"
+link="https://ivansanchez.cartodb.com/viz/1ac4a786-805a-11e4-bc48-0e853d047bba/public_map"
+caption="CartoDB archipielago map"
+>}}
+
+<https://ivansanchez.cartodb.com/viz/1ac4a786-805a-11e4-bc48-0e853d047bba/public_map>
 
 I still don't know if the original puzzle has anything to do with any obscure used-in-the-real-world CRS, but at least it's worth a try.