2d:null 2e:["$","title",null,{"children":"Inventar Colombia: Bitácora | bejuco | Observable"}] 33:T5f7,## 20.01.23 - Revisé varios _foundries_ y colecciones de fuentes como [Use & Modify](https://usemodify.com/), [Velvetyne](https://velvetyne.fr/) y [Libre Fonts by Womxn](https://www.design-research.be/by-womxn/) para encontrar una familia tipográfica para el proyecto. Finalmente se seleccionó [Cormorant](https://github.com/CatharsisFonts/Cormorant) para seguir con la línea de las fuentes utilizadas en los mapas encontrados en el material de referencia gráfica. Es una fuente serifada, hecha a mano, muy estilizada pero con detalles extravagantes. Tiene varios estilos y pesos lo que la hace perfecta para la web. - Extraje 6 paletas de color de los mapas de referencia. - Luego de revisar un montón de referentes planteé la posibilidad de: - Hacer una página de inicio en donde los elementos estén dispuestos sobre un mapa que las personas puedan navegar. Un buen referentes de usabilidad es la página de archivo del diseñador Ilja van Eck: https://www.iljavaneck.com/archives - Usar una estructura horizontal, de dos columnas principalmente, siguiendo la línea de los mapas de referencia y de páginas como [Mapeando Colombia](https://bibliotecanacional.gov.co/es-co/colecciones/biblioteca-digital/mapeando/Paginas/home.html) y [Voices from the Frontline](https://africa.climatemobility.org/) - Se revisaron varias opciones para el desarrollo de la página como [Webflow](https://webflow.com/) y [CollectionBuilder](https://collectionbuilder.github.io/). Queda discutir los pros y contras de cada uno. 34:T45a,--- ## 23.01.23 Revisando lo planteado con Maria José definimos: - Es interesante encontrar formas en que no sólo los datos del proyecto se puedan mantener en el tiempo. También hay que revisar que la interfáz gráfica se pueda mantener, que sea posible hacer las actualizaciones necesarias regularmente y que no sea muy complicado. - Por ahora está bien hacer un desarrollo a mano (sin CMS ni website-builders) para tener más libertad y control sobre el material y la interfáz gráfica pero entendiendo que se pueden usar diferentes soluciones para cada sección de la página dependiendo de las necesidades. - Se debe revisar opciones y referentes de navegación con material cartográfico para definir si en la página de inicio es mejor usar un mapa histórico georeferenciado o si es mejor hacer una iteración (un estilo de mapa) inspirado en los mismos pero con un lenguaje propio y con herramientas nuevas. - Durante el desarrollo de la página hay que tener muy presente que la combinación de imagen-texto-datos sea atractiva para que las personas se enganchen y se interesen por el contenido. ---35:T96e,## 24.01.23 Busqué opciones para el mapa interactivo de la página de inicio (y posiblemente para las demás visualizaciones de la página): - **Leaflet + Mapbox:** Originalmente pensé en usar [Popups](https://leafletjs.com/reference.html#popup) de Leaflet y un estilo creado en [Mapbox](https://docs.mapbox.com/studio-manual/guides/), u [otro proveedor](https://leaflet-extras.github.io/leaflet-providers/preview/), servido con raster-tiles. - **Leaflet + Maputnik:** Con Leaflet se puede utilizar un estilo creado en [Maputnik](https://maputnik.github.io/) pero hay que usar un [_binding_](https://github.com/maplibre/maplibre-gl-leaflet) para vector tiles. - **MapLibre + Maputnik:** Luego de que Mapbox cambiara sus tipos de licencia, se creó un [fork open-source](https://github.com/maplibre/maplibre-gl-js) de su librería [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js). MapLibre también tiene la posibilidad de crear [Popups](https://maplibre.org/maplibre-gl-js-docs/api/markers/#popup) con contenido HTML. Para la decisión tuve en cuenta: 1. ¿Usar solo OSS o una combinación de software abierto y [_semi-abierto_](https://github.com/mapbox/mapbox-gl-js/blob/main/LICENSE.txt)? - Decidí no usar Mapbox para seguir probando solo OSS. 2. ¿Usar [vector tiles o raster tiles](https://en.wikipedia.org/wiki/Tiled_web_map)? - Ambos proyectos (Leaflet o MapLibre) son robustos y están siendo actualizados. Hay muchos artículos por ahí que hacen comparaciones entre las dos formas de _baldosas_: [aquí uno](https://www.geoapify.com/raster-vs-vector-map-tiles), [aquí otro](https://carto.com/blog/raster-vs-vector-whats-the-difference-which-is-best). El mejor material que encontré al respecto fue el estudio de 2020 _'[Evaluating the Performance of Three Popular Web Mapping Libraries: A Case Study Using Argentina’s Life Quality Index](https://doi.org/10.3390/ijgi9100563)'_. >> ***"This result is a clear indication that vector-based maps are a safe bet for new Web mapping applications, since performance is on par with raster maps, but consume much less network bandwidth."*** - Usando vector-tiles también es posible estilizar los mapas de forma más clara y eficiente (y hasta sin conexión) ya que se puede editar directamente el archivo .json. **Con todo esto y tendiendo en cuenta que MapLibre usa este tipo de tiles de forma nativa decidí probar esta herramienta.** ---36:T6d8,## 26.01.23 ### Vector Tiles Para utilizar vector tiles existen varias opciones. Algunas son: - [La API de Maptiler](https://docs.maptiler.com/cloud/api/tiles/) - [La API de Mapbox](https://docs.mapbox.com/api/maps/vector-tiles/) - Servir los tiles localmente. Intenté buscar como usar la última. Como referencia tuve [este tutorial](https://blog.kleunen.nl/blog/tilemaker-generate-map) pero resultó más complejo de lo que esperaba ya que los datasets pueden llegar a ser bastante grandes y procesarlos también requiere de una buena máquina y buen conocimiento de backend. Estos fueron los pasos: 1. Obtener datos [.pbf](https://protobuf.dev/) de OpenStreetMap desde la página de [Geofabrik](https://download.geofabrik.de/) - Descargué los datos correspondientes a Colombia, Venezuela y Sur América. 2. Generar archivos [.mbtiles](https://docs.mapbox.com/help/glossary/mbtiles/) usando [tilemaker](https://tilemaker.org/). - Pude crear los archivos de Colombia y Venezuela. El archivo .pbf correspondiente a Sur América requiere de una máquina con mayor capacidad que la mía que tiene 16GB RAM. 3. Servir los archivos .mbtiles usando [tileserver-php](https://github.com/maptiler/tileserver-php) - Esto requiere usar un servidor como [apache](https://www.apachefriends.org/). No olvidar instalar php y php-sqlite. 4. Agregar la fuente en el archivo .json de estilo: >>`{"sources": { "source1": { "type": "vector", "url": "ruta/a/tileserver-php/archivo.json" }}}` - **Aquí el nombre _archivo.json_ corresponde al mismo nombre del _archivo.mbtiles_ que debe encontrarse en la carpeta de tileserver-php.** Si todo sale bien y uno entra a _localhost/ruta/a/tileserver-php/tileserver.php_ se pueden visualizar los archivos .mbtiles: 37:T478,**Pero no logré hacer funcionar correctamente el mapa principal con los vector tiles servidos por tileserver-php**. Muchos errores de CORS y de rutas que daban errores 404 y 500. Seguí buscando y **terminé usando [tileserver-gl](https://github.com/maptiler/tileserver-gl) (la versión *light*) que es mucho más sencillo y rápido de utilizar**. >>PS: otra opción es seguir [este tutorial ](https://scrapbox.io/yuiseki/How_to_create_your_own_vector_tile_web_maps) que además de los pasos anteriores, requiere convertir los archivos .mbtiles a .pbf usando [tippecanoe](https://github.com/mapbox/tippecanoe) y a TileJson usando [mbtiles2tilejson](https://scrapbox.io/yuiseki/mbtiles2tilejson). Sin embargo todo esto no es práctico si se necesita estar cambiando el estilo (la conexión con Maputnik también fue todo un problema) o subir a un sitio como Github Pages o Glitch para que otra persona revise los adelantos. **Decidí usar la API de Maptiler que tiene un plan gratuito bastante amplio y funciona sin problemas. Solo hay crear una cuenta en Maptiler para obtener una API Key y añadir la fuente en el archivo .json de estilo:**38:T457,--- ## 06.02.23 - El **03.02.23** terminé una primera versión de la página de inicio. Incluí una interacción secncilla con los popups de las secciones para revelar una imagen y un botón para regresar a la posición inicial. - Con Maria José quedamos en que se mostraría a algunas personas para recibir feedback y así seguir iterando. Ademaś quedó pendiente revisar: - La forma de los popups - La jerarquía de las secciones. En este momento solo se utiliza color, hay que ver si se puede usar tamaño u otra propiedad. - Qué pistas se le da al usuario para que sepa qué hacer - ¿Un texto sencillo al pasar el mouse sobre el título principal? - ¿Una introducción? - Se decidió iniciar con la sección de *Curaduría de fragmentos*. Para esto hay que revisar referentes/herramientas sobre como: - Mostrar fragmentos seleccionados de una fuente bibiográfica. - Navegar un libro de muchos temas pero por categorías y de forma no lineal. - Ver los metadatos de los fragmentos. - Hoy terminé una primera versión de la base para las secciones de la página con dos columnas. 39:Tb36,--- ## 10.02.23 Hoy tuvimos una reunión bastante productiva con Maria José. Hablamos y discutimos sobre las páginas de: ### Inicio Luego de mostrar la página a algunas personas y de pensar sobre el uso y la información que se muestra, llegamos a la conclusión de que en la página de inicio hace falta: - Que el mapa se use de manera más *conciente*. Que no esté porque si y que los elementos no estén simplemente flotando en él. - La hermana de MJ sugirió hacer un recorrido por el mapa siguiendo una narrativa. Esto puede funcionar para mostrar diferentes elementos según el punto del recorrido donde se encuentre y para darle un sentido y un valor especial al uso del mapa. - MapLibre tiene el método [flyto()](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#flyto) que está perfecto para eso. Incluso hay [un ejemplo](https://maplibre.org/maplibre-gl-js-docs/example/scroll-fly-to/) que muestra como usarlo haciendo scroll sobre un elemento HTML. - Un menú más tradicional (topbar o sidebar) que permita al usuario ver rápidamente la estructura del sitio y entrar a una sección. - Un posible desplazamiento hacia abajo que permita ver más información sobre el sitio y el proyecto. - Un referente que recordé fue ***[el mapa interactivo del documental Solace](https://www.solacedocumentary.com/#map)*** que muestra los pasos del viaje. Además, la página tiene más elementos que muestran de qué trata el sitio y tiene un menú tradicional sencillo pero efectivo. ### Curaduría de Fragmentos La primera versión de la página nos permitió entender que: - Las macrocategorías de los fragmentos son las que mejor pueden funcionar para filtrarlos en vez de las etiquetas ya que estas pueden llegar a ser demasiadas. - Tal vez es buena idea incluir una página (o un texto inicial) que dé contexto sobre las obras que se citan, información/uso de la herramienta, metodología, etc. - La idea de la página es mostrar ciertas citas y su ubicación dentro de un cuerpo de texto para encontrar extractos claves sin tener que leer o revisar el material completo (que es enorme). - Una opción es incluir el texto completo del cual se extrajeron los fragmentos. Esto con el fin de ubicar los fragmentos dentro del cuerpo de texto. *Mostrar las coordenadas del fragmento dentro del texto original*. - Esto me hizo pensar que tal vez no hay que tratar las citas simplemente como objetos (datos) que se manipulan (filtran, ordenan). - Hay que pensar en papel a ver qué formas podemos idear para esta sección. - Algunas herramientas que encontré posiblemente útiles (en una búsqueda rápida) son: - [Annotate](https://molly.github.io/annotate/) de Molly White. - [Pagemap](https://larsjung.de/pagemap/) de Lars Jung. - [BookReader](https://openlibrary.org/dev/docs/bookreader) de The Internet Archive. ---3a:T445,## 13.02.23 Hoy realicé cambios a la página de inicio: - Agregué el mismo menú lateral que saldrá en las otras secciones. La estructura está por definirse. - **Cambié el comportamiento del mapa:** - Cuando el usuario haga scroll el mapa irá a cada punto donde se encuentre un popup. Esto permitirá hacer un recorrido según la narrativa y el contenido que se desee. Esto lo hice con la librería [Scrollama](https://github.com/russellsamora/scrollama). - Eliminé las imágenes al pasar el mouse sobre el nombre del popup ya que era una interacción que ni agregaba ni quitaba. Además en mobile no funcionaba (ya que no se puede hacer hover). Creo que es mejor concentrarse en el contenido mismo del popup que depronto pueden tomar inspiración en los elementos de los mapas de referencia (como las cartelas de los [mapas de Codazzi](https://commons.wikimedia.org/wiki/Atlas_Geogr%C3%A1fico_e_Hist%C3%B3rico_de_la_Rep%C3%BAblica_de_Colombia_%281890%29)). - Agregué algunos elementos abajo del mapa que tendrán información sobre el proyecto, el equipo y cómo citar el proyecto.3b:T563,--- ## 16.02.23 Cambios en: ### Estructura Tuve que cambiar la estructura de la carpeta para que funcionara tanto en local como en GitHub Pages: todos los archivos .html quedarán en el *root* (había que cambiar todos los links relativos de las subpáginas o hacer dos menús distintos). ### Menú - Cambié la palabra *Menú* por el símbolo ☰ (U+2630 - *Trigram For Heaven*). - Agregué la estructura base que tenemos en este momento para estilizar el texto y la disposición. Seguramente el contenido cambiará cuando la estructura final se decida. El menú se construye en un archivo de Markdown para que se pueda editar en un solo lugar y no en cada página. Para esto se usó [md-block](https://md-block.verou.me/). ### Curaduría de Fragmentos - Trabajé en una nueva forma de filtrar las citas de los textos usando las macrocategorías y el texto al cual hace parte. - Incluí el cuerpo de texto completo usando también [md-block](https://md-block.verou.me/). Se puede utilizar un dropdown para seleccionar el texto que se desea. - Incluí un minimap del cuerpo de texto usando [pagemap](https://larsjung.de/pagemap/) Esto solo para escritorio y pantallas grandes ya que en celular interrumpe la lectura. Con todo esto queda una nueva versión de la página que permite explorar las citas en contexto y entendiendo *las coordenadas* dentro del cuerpo de texto: 3c:T61a,--- ## 24.02.23 Con MJ pensamos que aguanta empezar a crear elementos gráficos que alimenten y den vida a la página. Los referentes visuales del siglo XVIII tienen un montón de ornamentos y recursos gráficos ricos en detalles. Estos pueden funcionar para los popups del inicio, los títulos, el menú y otros detalles del sitio. Para empezar utilicé como base la [Cartela](https://bit.ly/3KyTJJy) de los mapas de Agustín Codazzi. Utilicé los arreglos de arriba y abajo como punto en común y cambié los arreglos de los lados. Encontré varios libros que usaré para crear nuevos ornamentos y elementos del sitio: - [Repertoire des artistes de Charles-Antoine Jombert (1765)](https://archive.org/details/repertoiredesart02jomb_0): Tiene una gran sección de dibujos y ornamentos *grotesques & arabesques* que se salen un poco del común del rococó refinado. - [Fleures baroque de Jean Pillement (1770)](https://archive.org/details/gri_33125007503705): Unas flores barrocas casi extraterrestres. - [Livre de desseins de Alexandre Lambert (1700)](https://archive.org/details/livrededesseinsd00lamb): Una gran colección de patrones y tramas. - [A new book of designs for girandoles and glass frames in the present taste de Benedetto Pastorini (1775)](https://archive.org/details/newbookofdesigns00past): 'Coronas' y 'bases' que se asemejan a los de la cartela de los mapas de Codazzi. Decidí usar la herramienta de vectorizado de [Inkscape](https://inkscape.org/). Es bastante flexible y permite obtener *paths* que son fáciles de editar al ser.svg.3d:T6b3,--- ## 16.03.23 Esta semana van cambios en: ### General - Siguiendo el curso de JS que estoy tomando, actualicé todos los archivos a estándares más recientes. Cambié las funciones a [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) y empecé a utilizar métodos como [map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) y [forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). - Agregué las páginas de *II. El Orinoco*, *III. Epílogo* y *IV. Investigación* y los links correspondientes en el menú. Están vacias. ### Inicio: - Se eliminó la sección de información abajo del mapa y se agregaron dos nuevos popups con la información resumida del equipo y los créditos del sitio. - Se agregaron botones de control en la parte inferior derecha para ir al popup específico que se desee. ### Curaduría: - Con los botones de las categorías ahora se puede controlar el resaltado de las citas dentro del texto. El minimap se actualiza una vez se hace scroll. - Agregué una primera versión del segundo tomo de *El Orinoco Ilustrado* que se encuentra [aquí](https://repositorio.unal.edu.co/bitstream/handle/unal/2227/orinoco_ilustrado_t._II.html?sequence=1&isAllowed=y). Hizo falta editar un poco el archivo html ya que estaba lleno de *` `* y *\n+*. Hay que revisar si se deja el texto tal cual o se parte en fragmentos más pequeños ya que el minimap se vuelve imposible de ver al ser una obra muy extensa. ### Introducción: - Al hacer scroll no solo cambia el título del texto, también van a apareciendo los párrafos uno a uno.3e:T6bc,--- ## 20.05.23 Se han hecho los siguientes cambios en la página: - **General**: - Se agregó una [navegación breadcrumb](https://www.smashingmagazine.com/2022/04/breadcrumbs-ux-design/) en la parte superior izquierda de cada página o debajo del título de la página si lo hay. - Maria José también ha estado actualizando algunos textos como la introducción y el Acerca de. - **Inicio**: Creé unas nuevas cartelas más sencillas y pequeñas que todavía usan material del libro *Floriated Ornament*. - **El Orinoco**: - Se agregó una nueva página llamada **Mapas y Datos**. - En la **Curaduría de Fragmentos** se agregó un nuevo dialog que explica qué es la herramienta. Este se abre cada vez que se entra a la página. También se hicieron cambios en los colores de las categorías. Se pensaron para ser usados de manera uniforme en la página. - Se agregó una nueva página de la **Narrativa Cartográfica** con tres subsecciones. - En la sección de Biodiversidad de la Narrativa se agregaron los primeros textos y animaciones. Me demoré un poco adecuando el archivo de JS para que el scroll se sintiera como un [*stack*](https://vinceumo.github.io/devNotes/CSS/slide-stacking-effect-using-position-sticky/) y que además fuera cambiando los contenidos de texto e imagen. Esto sigue en proceso. - Las animaciones se están haciendo con SVG y CSS. [Aquí](https://css-tricks.com/svg-line-animation-works/) hay un buen artículo que explica como hacerlo. Ha sido un buen experimento para aprender. Las primeras animaciones tienen como referencia algunos petroglifos encontrados en el Orinoco y que se muestran en el libro *Mitos de creación de la cuenca del Orinoco* de Ronny Velázquez.3f:T62e,--- ## 25.05.23 Durante estos días he hecho algunos arreglos en el archivo CSS y ajustes del sitio para la versión móvil. ### Narrativa Cartográfica Estoy trabajando en los cambios de los mapas que van apareciendo a medida que se hace scroll. Algunas funciones de MapLibre que he usado son: - [setLayoutProperty](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#setlayoutproperty) para cambiar la visibilidad de alguna capa en el mapa como los ríos o los nombres de los países. - [flyTo](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#flyto) para ir de un punto a otro en el mapa. Ya se había usado en la página de inicio. - [setPaintProperty](https://maplibre.org/maplibre-gl-js-docs/api/map/#map#setpaintproperty) para cambiar el estilo de alguna capa como por ejemplo una linea rayada. Para agregar elementos animados usé [el ejemplo de Mapbox](https://docs.mapbox.com/mapbox-gl-js/example/animate-ant-path/). Como la API es la misma o casi la misma, también sirve en MapLibre. Para algunos tooltips que se van a necesitar durante la narrativa voy a usar [tippy.js](https://atomiks.github.io/tippyjs/). Es sencilla y ligera. Algunas cosas de la documentación no son tan claras y hay que buscar ayuda en StackOverflow. Por ejemplo, [aquí](https://stackoverflow.com/a/52382125/10102175) entendí que para elementos creados de forma dinámica hay que usar [event delegation](https://atomiks.github.io/tippyjs/v5/addons/#event-delegation). ### Mapas y datos En esta página se va a incluir una versión del mapa *Orinoco Multiétnico* creado por Santiago.40:T5ce,--- ## 07.06.23 Agregando los ríos a la primera parte de la narrativa me encontré con que no era posible controlar fácilmente la velocidad o el tamaño de la linea rayada. Aunque [la lógica detrás de la función para agregar la linea rayada](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash#some_common_patterns) es clara, para animarla no tanto. O por lo menos no es tan rápida de prototipar, hay que hacer pruebas con diferentes valores en el array. Sin embargo, encontré [esta respuesta](https://stackoverflow.com/a/43079655/10102175) en StackOverflow de Lucas Wojciechowski que creó una función mucho más flexible para este tipo de animaciones. Permite cambiar el tamaño de las lineas y la velocidad. Como dice uno de los comentarios de la respuesta, cambié el [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) por [requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). Al parecer [es mejor para el rendimiento](https://dev.opera.com/articles/better-performance-with-requestanimationframe/). También encontré que la función que se llama con requestAnimationFrame no acepta argumentos por lo que hay que [hacer un pequeño ajuste usando una función anónima](https://livefiredev.com/requestanimationframe-how-to-add-arguments-a-simple-guide/). Todavía hace falta agregar algunos ajustes de estilo y buscar como mejorar el rendimeinto de la página.41:T6a1,--- ## 23.06.23 Esta semana agregué seguí trabajando en detalles de la narrativa de Biodiversidad y subí la primera parte de Sociodiversidad. En esta parte la lógica fue un poco distinta. Es posible que solo se tenga que utilizar un solo mapa y un solo archivo geoJSON por lo que, hasta ahora, lo construí agregando todas las capas de una sola vez. Luego, según la parte de la narrativa en que se encuentre, se muestran u ocultan las diferentes capas usando setLayoutProperty() o setPaintProperty(). Tuve que hacer un cambio en [el archivo geoJSON](https://observablehq.com/@bejuco/inventar-colombia#map) realizado por Santiago. Al estar compuesto por MultiLineStrings, cuando se coloca un texto para cada feature usando [symbols y text-field](https://maplibre.org/maplibre-style-spec/layers/#layout-symbol-text-field), MapLibre muestra un texto para cada uno de las lineas que lo componen: ![image_error](https://camo.githubusercontent.com/c60bd5d98861fb7a3f6cc2e849e45d01efd3bdc00c829bb8ac2868b0fa82cd01/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f5957324d642e6a7067) Traté de buscar formas de filtrar a qué elementos se le colocan etiquetas y abrí una [discusión en GitHub](https://github.com/maplibre/maplibre-gl-js/discussions/2704) a ver si alguien podía ayudarme a que solo se dibujara un texto por cada MultiLineString pero no ha sido posible. Mi solución fue crear un punto por cada feature en el geoJSON original y agregar las propiedades. La edición del [archivo final](https://github.com/bejucoo/inventar-colombia/blob/master/resources/geojson/narrativa/sociodiversidad/HabitatsRibere%C3%B1osOrinoco.geojson) fue larga pero quedó bastante bien y organizado: 42:[{"id":"45288a9fcfb6a28ea01ee27585b26558b2f6029abd9e75e1aa906c0c5e4b9dc97769422dd39db2914d9f6f6c6ffa234a365e062bed1cdbdafc2c4ce934879606","href":"https://static.observableusercontent.com/files/45288a9fcfb6a28ea01ee27585b26558b2f6029abd9e75e1aa906c0c5e4b9dc97769422dd39db2914d9f6f6c6ffa234a365e062bed1cdbdafc2c4ce934879606","name":"Screenshot_20230216_174607.png","type":"image/png","lastModified":1676587424508.707,"size":402481},{"id":"76f15c7c16e33d2c92ba1f1992405e30b9a2dd06c3c5dddacb1d9c1cb5489fd45ee6509b9842cbe4985f6ba544a7e2e2d07002ebb1dc32ddfff7e87adb26ae07","href":"https://static.observableusercontent.com/files/76f15c7c16e33d2c92ba1f1992405e30b9a2dd06c3c5dddacb1d9c1cb5489fd45ee6509b9842cbe4985f6ba544a7e2e2d07002ebb1dc32ddfff7e87adb26ae07","name":"Screenshot_20230224_112005.png","type":"image/png","lastModified":1677255810050.921,"size":441163},{"id":"3e0cc295b3928245711947d6fce4a91922a81362033fd54f54836b096c63d614300956d268706abf61cdc4cba8fe54cf46ec40503e2ca8f1e39a2ddb85a6ab4e","href":"https://static.observableusercontent.com/files/3e0cc295b3928245711947d6fce4a91922a81362033fd54f54836b096c63d614300956d268706abf61cdc4cba8fe54cf46ec40503e2ca8f1e39a2ddb85a6ab4e","name":"Screenshot_20230210_150032.png","type":"image/png","lastModified":1676059106951.728,"size":311497},{"id":"a4a1ec6affd6bdaf449381b9e26e23416f9ca3e668dfb53ec91b49ae3f4a9377425af4e6cdb59ba66ed908e6ccd70875e1ef78cb9bf5af8fac851c3f42e9f00b","href":"https://static.observableusercontent.com/files/a4a1ec6affd6bdaf449381b9e26e23416f9ca3e668dfb53ec91b49ae3f4a9377425af4e6cdb59ba66ed908e6ccd70875e1ef78cb9bf5af8fac851c3f42e9f00b","name":"popup_1.svg","type":"image/svg+xml","lastModified":1677847688478.754,"size":153068},{"id":"c41486be821d723535a6ec6ed09e505a7f8e7115e00157d3b4f08ae39ea45d884e8eaa571f83614c50a3017350a7230086cd208d853609d7e350c9f74909ba14","href":"https://static.observableusercontent.com/files/c41486be821d723535a6ec6ed09e505a7f8e7115e00157d3b4f08ae39ea45d884e8eaa571f83614c50a3017350a7230086cd208d853609d7e350c9f74909ba14","name":"popup_1@1.svg","type":"image/svg+xml","lastModified":1677847745012.544,"size":407966},{"id":"0b9a8465236373f7dc0efe352ef9de126011190a34251d4dced3b63dc6dcd5b53eeb303cacb993064d773a5260a4e7345d12772a53e468850440278899089ee5","href":"https://static.observableusercontent.com/files/0b9a8465236373f7dc0efe352ef9de126011190a34251d4dced3b63dc6dcd5b53eeb303cacb993064d773a5260a4e7345d12772a53e468850440278899089ee5","name":"fragmentos.json","type":"application/json","lastModified":1676061270205.121,"size":3887},{"id":"4aa5bbe991a872d75d96e7bea1cdc77b1803806d3eee4e1f60cf11564d4f7a427627cbcd81a76c39778d07636f8ed2a8d6e8a2966e9812c3f0a0931fff0947b6","href":"https://static.observableusercontent.com/files/4aa5bbe991a872d75d96e7bea1cdc77b1803806d3eee4e1f60cf11564d4f7a427627cbcd81a76c39778d07636f8ed2a8d6e8a2966e9812c3f0a0931fff0947b6","name":"Screenshot_20230303_080727.png","type":"image/png","lastModified":1677848699007.029,"size":384670},{"id":"55b843486eeac7c8819a803de994eabf5388f368f1f5594ab60fde761a4b70041e4eca22579e900e870eda98e88e59c6bf501dca6746cccb4bc4fac0a773aae0","href":"https://static.observableusercontent.com/files/55b843486eeac7c8819a803de994eabf5388f368f1f5594ab60fde761a4b70041e4eca22579e900e870eda98e88e59c6bf501dca6746cccb4bc4fac0a773aae0","name":"Screenshot_20230303_081341.png","type":"image/png","lastModified":1677849071511.008,"size":1469151},{"id":"1d7eb36fccd4ebaefbe4601eeb2a6f8efb9c9a4f5eb0dc17fa777707dc93b27dc89812cde2d45febfa2b08a99ff5cdb52c6d9aeea5dec10d1addb4182255f1ba","href":"https://static.observableusercontent.com/files/1d7eb36fccd4ebaefbe4601eeb2a6f8efb9c9a4f5eb0dc17fa777707dc93b27dc89812cde2d45febfa2b08a99ff5cdb52c6d9aeea5dec10d1addb4182255f1ba","name":"39026644.JPG","type":"image/jpeg","lastModified":1674664281217.487,"size":662342},{"id":"c2ac37292dc42d3cc633d2f312be7a1e65923b7a65f988e521f769d6f586c97a2e169a724d4840ab92b0f4265843d98b88da99e10777038c948d228709b59d4d","href":"https://static.observableusercontent.com/files/c2ac37292dc42d3cc633d2f312be7a1e65923b7a65f988e521f769d6f586c97a2e169a724d4840ab92b0f4265843d98b88da99e10777038c948d228709b59d4d","name":"Screenshot_20230126_194224.png","type":"image/png","lastModified":1674832273909.634,"size":1623088},{"id":"d4409bb825fac429742a3633a61098d6e32a21555519494f720c402c3746cc397b90df35d5111ba1eac992341435c90c53b700a1596208dfd6648ce7c32e7005","href":"https://static.observableusercontent.com/files/d4409bb825fac429742a3633a61098d6e32a21555519494f720c402c3746cc397b90df35d5111ba1eac992341435c90c53b700a1596208dfd6648ce7c32e7005","name":"Screenshot_20230131_211326.png","type":"image/png","lastModified":1675217712681.912,"size":600241},{"id":"a5400511aed2889359ea982cf572c4d62ea4083645629932146ce6351f9b12b63714c8d18acc704a9e55aa87455480f8fc747e252ffbf6a6049cb62ea8c0d861","href":"https://static.observableusercontent.com/files/a5400511aed2889359ea982cf572c4d62ea4083645629932146ce6351f9b12b63714c8d18acc704a9e55aa87455480f8fc747e252ffbf6a6049cb62ea8c0d861","name":"Screenshot_20230206_193538.png","type":"image/png","lastModified":1675730036510.752,"size":515220},{"id":"22866e9b60b4d57c6a52cb9096458b4fe4ba53023e7c77c5731e48190a5c2361a4fae658a391455399046b5b3b6f6466e58bf3815bdb2c449ed989cbefa9e66f","href":"https://static.observableusercontent.com/files/22866e9b60b4d57c6a52cb9096458b4fe4ba53023e7c77c5731e48190a5c2361a4fae658a391455399046b5b3b6f6466e58bf3815bdb2c449ed989cbefa9e66f","name":"Screenshot_20230206_194820.png","type":"image/png","lastModified":1675730782214.099,"size":322248},{"id":"a06505fc8e1a45ccc3f68e6f9c12f1c1f282e300ac7cdeda7a7afc7bf9cdb5f4597432e4dc65c7eb6d744b2638eaecc1a027009a2da4214e37fcae696bf3b255","href":"https://static.observableusercontent.com/files/a06505fc8e1a45ccc3f68e6f9c12f1c1f282e300ac7cdeda7a7afc7bf9cdb5f4597432e4dc65c7eb6d744b2638eaecc1a027009a2da4214e37fcae696bf3b255","name":"HabitatsRibereñosOS.geojson","type":"application/geo+json","lastModified":1685779736766.867,"size":4661856},{"id":"b68260648f46ea1698f9b00b5f390ca2afe82cbf1ce72b1d90a24f255f9633ddf6c7531e5b6050d480e1b5230e6d3fd4370dd5655de7bf0599ecd5f95f08fad7","href":"https://static.observableusercontent.com/files/b68260648f46ea1698f9b00b5f390ca2afe82cbf1ce72b1d90a24f255f9633ddf6c7531e5b6050d480e1b5230e6d3fd4370dd5655de7bf0599ecd5f95f08fad7","name":"HabitatsRibereñosOrinoco.geojson","type":"application/geo+json","lastModified":1687553933434.838,"size":4132402}] 31:{"id":"496ae75cd08e3bc7","slug":"inventar-colombia","title":"Inventar Colombia: Bitácora","thumbnail":"dd21d6465392682ebbab7c076961e6945289d05917161c825b4e8599bb06b912","access_level":"public","create_time":"$D2023-01-25T15:57:28.773Z","update_time":"$D2025-01-08T16:31:08.590Z","view_time":null,"first_public_time":"$D2023-01-25T15:57:28.773Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"727fc91cd128c957","login":"bejuco","name":"bejuco","avatar_url":"https://avatars-next.observableusercontent.com/42ea759fcf97fb4815d7fa7efc0b8896b601182e4a50256ecfb66854d8f7892c","tier":"starter_2024"},"version":775,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dedaedf5a8fc40fc","login":"bejuco","name":"bejuco","avatar_url":"https://avatars-next.observableusercontent.com/42ea759fcf97fb4815d7fa7efc0b8896b601182e4a50256ecfb66854d8f7892c","tier":null}],"members":[{"type":"individual","id":"dedaedf5a8fc40fc","login":"bejuco","name":"bejuco","avatar_url":"https://avatars-next.observableusercontent.com/42ea759fcf97fb4815d7fa7efc0b8896b601182e4a50256ecfb66854d8f7892c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Inventar Colombia: Bitácora","cells":[{"id":130,"value":"# Inventar Colombia: Bitácora\n## Sobre la construcción de [esta página web](http://inventarcolombia.uniandes.edu.co/). Por Pierre Puentes.\n\nÚltima entrada: [08.07.23](#cell-767)\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"## 13.01.23\nDefinición de plan de trabajo:\n\n- Revisar material de referencia gráfica: mapas, documentos\n- Revisar referentes en https://reviewsindh.pubpub.org/\n- Revisar herramientas de desarrollo: mapas, CMS, collectionBuilder\n- Desarrollar línea gráfica: fuentes, colores, símbolos\n- Desarrollar estructura y navegación del sitio\n- Buscar una herramienta de prototipado y trabajo colaborativo\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"## 16.01.23\nSe escogió [Penpot](https://penpot.app/) como herramienta de prototipado para probar una plataforma equivalente a [Figma](https://www.figma.com/pricing/) pero gratis y open-source. Tiene las mismas funcionalidades básicas y ha resultado bastante estable.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"untitled = FileAttachment(\"39026644.JPG\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":213,"value":"## 25.01.23\nEmpecé a usar MapLibre GL JS. Para esto se deben seguir [los pasos indicados en el repositorio](https://github.com/maplibre/maplibre-gl-js):\n\n- Referenciar los archivos de la librería en el HTML:\n\n>>``\n>>\n>>``\n\n- Agregar un div en el body:\n\n>>`

`\n\n- Crear un script con lo siguiente:\n\n>>`var map = new maplibregl.Map({`\n>>\n>>`container: 'map',`\n>> \n>>`style: 'ruta/a/estilo.json',`\n>>\n>>`center: [-72.5, 4.6],`\n>>\n>>`zoom: 6 `\n>>\n>>});`\n\n\nEn este caso utilicé el estilo básico de Maputnik para trabajar encima.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"screenshot_20230126_194224 = FileAttachment(\"Screenshot_20230126_194224.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":">>`\"sources\": {\n \"source1\": {\n \"type\": \"vector\",\n \"url\": \"https://api.maptiler.com/tiles/v3/tiles.json?key={key}\"\n }\n}`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"### Tipografía\nNormalmente para las fuentes también se usa la API de Mapbox o de Maptiler. Estas se pueden subir y cambiar directamente en Mapbox Studio por ejemplo. Para usar una fuente local se debe crear el archivo .pbf correspondiente a cada estilo de la familia que se va a usar. La forma más sencilla es usando [font-maker](https://maplibre.org/font-maker/). Luego de crear el archivo se debe subir a una carpeta en el servidor y referenciar en el archivo .json de estilo: `\"glyphs\": \"ruta/a/fuentes/{fontstack}/{range}.pbf\"`\n\n>>> ### La página de pruebas queda en:\n>>> ### https://bejucoo.github.io/inventar-colombia/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"---\n## 27.01.23\nConclusiones de la reu con Maria José:\n- Incluir en el mapa alguna forma en que se resalte el Orinoco y sus afluentes. Es posible usar el material que creó Santiago González. Hay que revisar en qué formato está y en qué se puede usar en MapLibre, tal vez GeoJSON.\n- Que mapa de inicio muestre la región del Orinoco, puede ser en la mitad de Venezuela y Colombia (cuando en el centro está Puerto Carreño).\n- La próxima semana la destinaré a hacer una primera versión del inicio y una maqueta de una o dos secciones si es posible.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"## 31.01.03\nAlgunos avances de la página de inicio:\n- Se creó una primera versión del estilo.\n- Se usa la fuente Cormorant en los popups.\n- Creé un archivo .json para agregar los popups de forma automática. Esto permite limpiar el código .js y hacer cambios de manera más fácil y clara.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"screenshot_20230131_211326 = FileAttachment(\"Screenshot_20230131_211326.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":292,"value":"screenshot_20230206_193538 = FileAttachment(\"Screenshot_20230206_193538.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"screenshot_20230206_194820 = FileAttachment(\"Screenshot_20230206_194820.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"---\n## 09.02.23\nEsta semana finalicé una primera versión de la *Curaduría de Fragmentos* usando una librería llamada [filter.js](https://github.com/jiren/filter.js). Esta permite agregar, filtrar y ordenar objetos HTML usando un archivo .json (la muestra usada está más abajo). Otra opción similar es [MixItUp](https://www.kunkalabs.com/mixitup/).\n\nEl uso de la librería es sencillo, sin embargo, la documentación no está tan pulida y en algunos casos hay que usar de referencia [la página demo](eloquentstudio.github.io/filter.js). Por ejemplo, la sección de *Filter Criteria* es un poco confusa. Además, en GitHub el último release es la versión 1.5.2 pero en la página y en el código la versión es 2.1.\n\nLa nueva página se puede encontrar aquí: https://bejucoo.github.io/inventar-colombia/sections/fragmentos.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"fragmentos = FileAttachment(\"fragmentos.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"screenshot_20230210_150032 = FileAttachment(\"Screenshot_20230210_150032.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":408,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":425,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"screenshot_20230216_174607 = FileAttachment(\"Screenshot_20230216_174607.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"popups = FileAttachment(\"popup_1@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"Además agregué una forma de usar clases de CSS para cambiar los colores de las citas de la sección de Curaduría de Fragmentos. Así será más fácil reconocer las diferentes categorías dentro del cuerpo de texto y en los checkboxes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"screenshot_20230224_112005 = FileAttachment(\"Screenshot_20230224_112005.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"---\n## 03.03.23\n\nEsta semana adelanté cambios en:\n### Página de inicio:\n- Agregué la información general del proyecto y el equipo.\n- Creé nuevos elementos gráficos usando como material base el libro [*Floriated ornament: a series of thirty-one designs (1849)*](https://archive.org/details/floriatedornamen00pugi) de Augustus Welby Northmore Pugin.\n - Las planchas incluyen las especies utilizadas en cada ornamento. Aunque las plantas dibujadas seguramente son de origen europeo, si se desprende del nombre, en varios casos se pueden ver características de plantas nativas de América. Por ejemplo, [en la página 72](https://archive.org/details/floriatedornamen00pugi/page/n72/mode/1up), se pueden observar algunos elementos que recuerdan a la [flor del Giaviare](https://colombia.inaturalist.org/taxa/558378-Paepalanthus-chiquitensis/browse_photos?layout=grid).\n - Algunos ornamentos son simétricos, lo que permite que se usen en elementos tanto horizontales como verticales de la página.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"popup_1 = FileAttachment(\"popup_1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"### Menú y CSS:\n- Organicé el menú con la nueva estructura.\n- Hice varios arreglos al archivo CSS\n - Creé algunas clases generales que puedan ser usadas en todo el sitio.\n - Unifiqué la estructura del sitio usando [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) y [overflow: scroll](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Decidí usar siempre alguna de las siguientes configuraciones: fullwidth, 1:3 | 3:1 o 2:3 | 3:2.\n\n### Curaduría de Fragmentos:\n- Eliminé una de las columnas para simplificar la interfáz. La explicación de la herramienta será un elemento flotante o un slider que se pueda abrir la primera vez que se visite la página o en el momento que se desee (con un botón).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"screenshot_20230303_080727 = FileAttachment(\"Screenshot_20230303_080727.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"### Introducción\n- Cree la página de la introducción e hice una primera versión. Teniendo en cuenta el texto escrito por Maria José, tomé como referencia [esta página del portafolio de Yokuaidi](https://yokuaidi.com/think) y [esta página sobre retratos](https://www.portraet-julianlaballe.com/). El título y las imágenes irán cambiando mientras se hacer scroll:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"screenshot_20230303_081341 = FileAttachment(\"Screenshot_20230303_081341.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"---\n## 05.03.23\nCambios en:\n### Home:\n- Agregué un elemento para indicar al la persona que visite la página que debe hacer scroll para continuar.\n- Arreglé los links de los popups del mapa.\n- Optimicé los SVG del mapa usando [SVGO](https://github.com/svg/svgo).\n\n### About:\n- Creé la nueva página *Acerca del proyecto* que tendrá información adicional a la que hay en el home. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"---\n## 25.03.23\nCambios en:\n\n### Curaduría:\n- Se decidió dividir los tomos de Gumilla por capítulos ya que en partes más grandes el minimap queda muy pequeño y se vuelve inútil. Voy en el capítulo XVIII hasta el momento de escribir esta entrada.\n- Se agregó un botón que abre un [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) con las instrucciones para usar la herramienta.\n- Se agregaron contadores que muestran la cantidad de fragmentos por cada categoría en cada capítulo.\n- Se agregaron todas las categorías que hay hasta ahora (11).\n- Se cambió el estilo del elemento *select* del cuerpo de texto para que no fuera un dropdown sino una lista. Me parece que es más fácil, se hacen menos clicks.\n- Se agregó el atributo *selected* a una opción ya que en Chrome, si no hay nada seleccionado, no se carga ninguno de los archivos de los capítulos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"---\n\n## 19.04.23\n\nLuego de casi un mes vuelvo a la bitácora. Hubo algunos cambios en la página:\n\n### Orinoco:\n\n- En la página de introducción de la sección II se agregó con un texto y dos links a las sub-secciones de Curaduría de Fragmentos y Narrativa Cartográfica. Todavía hace falta edición.\n\n### Curaduría:\n- Se intentó hacer un filtro de los capítulos del tomo que tuvieran fragmentos dependiendo de la categoría seleccionada pero no encontré una manera de hacerlo con la librería que estamos utilizando. Se decidió volver más gris el nombre de los capítulos que no tengan fragmentos.\n- Se agregaron todos los fragmentos del tomo II de Gumilla.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"---\n## 28.04.23\n\nTanto el tomo 1 como el tomo 2 del Orinoco Ilustrado se encontraban en formato HTML antes de ser subidos al sitio. Los archivos no estaban tan limpios u organizados. Para limpiarlos, editarlos y convertirlos a Markdown se usaron las siguientes herramientas:\n\n- [Online HTML Code Beautify](https://htmlbeautify.com/)\n- [HTML to Markdown Coverter](https://codebeautify.org/html-to-markdown)\n- [Line Break Remover](https://www.textfixer.com/tools/remove-line-breaks.php)\n- [Convert Case](https://convertcase.net/)\n- [Google Drive](https://drive.google.com/): para revisar ortografía general.\n\nHoy terminé de agregar los capítulos y los fragmentos del tomo I. Se hará una revisión por el equipo para hacer las correcciones correspondientes.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":658,"value":"---\n## 03.06.23\n\nOtras funciones que he usado estos días en la narrativa son:\n\n- [setData](https://maplibre.org/maplibre-gl-js-docs/api/sources/#geojsonsource#setdata): para cambiar los elementos en el mapa usando archivos externos y así no alargar el archivo .js.\n- [switch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch): como alternativa a uan cadena *if...else*\npara cada step dentro de la narrativa.\n\nAunque Santiago ya generó unna primera tabla en QGIS del Orinoco sociodiverso con varios tributarios y grupos que los habitaban, además de otras features:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"habitatsriberenosos = FileAttachment(\"HabitatsRibereñosOS.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"map = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"las formas de algunos ríos son demasiado complejas para la primera parte de la narrativa en donde se deben animar las lineas. Es por esto que usaré [Geojson Creator Tool](https://geojsoncreator.com/) para crear una versión simplificada. No es abierta (no encontré el código por ninguna parte) pero permite crear lineas a mano alzada, una opción que no he visto en otros editores de geoJSON.\n\nEl mapa anterior será usado en la segunda parte de la narrativa.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"$40","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"$41","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"habitatsriberenosorinoco = FileAttachment(\"HabitatsRibereñosOrinoco.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"map2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"---\n## 08.07.23\n\nHoy subí los últimos cambios, detalles, comentarios, arreglos de la página. Durante las últimas dos semanas estuve trabajando en la narrativa cartográfica.\n- Se cambiaron los nombres de la sección a *Recorrer*. La sección de Curaduría también cambió de nombre a *Leer*.\n- Se cambiaron los nombres de los capítulos en la narrativa a *El río en el tiempo*, *El flujo de los pobladores* y *Los materiales de vida*.\n- Agregué una imágen de fondo sutil de grid en la sección de *El Orinoco* y *Recorrer* haciendo referencia a la cuadrícula de los mapas de Codazzi.\n- Cambié el fondo de las imágenes animadas de cada capítulo de la narrativa para generar contraste. También subí la versión final de cada ilustración.\n- En la sección de Datos se agregó una tabla para con información y un link de descarga de los datos y archivos usados en el proyecto.\n- Hubo más cambios en la introducción, el epílogo y la sección de investigación que realizó Maria José.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"---\n### Recursos:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"import { jsonInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"d3geo = require(\"d3-geo@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"height = Math.ceil(path.bounds(habitatsriberenosos)[1][1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"projection = d3\n .geoIdentity()\n .reflectY(true)\n .fitWidth(width, habitatsriberenosos)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 32:"$31:body"