{"id":75994,"date":"2018-08-10T04:28:14","date_gmt":"2018-08-10T04:28:14","guid":{"rendered":"http:\/\/librerias-js"},"modified":"2018-08-10T04:28:14","modified_gmt":"2018-08-10T04:28:14","slug":"librerias-js","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/","title":{"rendered":"Librer\u00edas JS"},"content":{"rendered":"    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Google Maps API<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<h2 class=\"wp-block-heading\">Google Maps API<\/h2>\n<p>Ya hemos visto muchas de las posibilidades que ofrece <a href=\"https:\/\/www.w3schools.com\/graphics\/google_maps_intro.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Maps API<\/a>.<\/p>\n<p>En este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas.<\/p>\n<h3 class=\"wp-block-heading\">Query Places<\/h3>\n\n\n      \n        <figure class=\"wp-block-image alignright\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/0406a-js93-1534324999-95.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Query Places nos permite hacer una b\u00fasqueda automatizada de lugares. <\/p>\n<p>Con la librer\u00eda places podemos ubicar de forma autom\u00e1tica lugares en un mapa.<\/p>\n<p>A trav\u00e9s de los par\u00e1metros de b\u00fasqueda del m\u00e9todo <i><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/places?hl=es-419\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">nearbySearch<\/a><\/i> podemos modificar la <i>query<\/i> que hace sobre los datos de places.<\/p>\n<p>Veamos <a href=\"https:\/\/jsfiddle.net\/gertrudix\/02uz6dzt\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">un ejemplo<\/a>:<\/p>\n<ul class=\"wp-block-list\">\n<li>Se declaran las variables map e infowindow\n<\/li>\n<li>Se inicializa el mapa mediante la funci\u00f3n\n<\/li>\n<li>Se define el valor del infowindow a trav\u00e9s de la clase google.maps.InfoWindow\n<\/li>\n<li>Se carga la biblioteca de sitios \u201cplaces\u201d, para el subconjunto PlacesService\n<\/li>\n<li>Con el m\u00e9todo nearbySearch se localizan aquellos servicios que cumplan los requisitos indicados en los par\u00e1metros de la b\u00fasqueda\n<\/li>\n<\/ul>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>         <!--StartFragment-->Y aqu\u00ed <a href=\"https:\/\/jsfiddle.net\/02uz6dzt\/7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">otro ejemplo ampliando la informaci\u00f3n<\/a> del infowindow: <!--EndFragment--><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p><b>Ejercicio<\/b><\/p>\n<p>Sobre e<a href=\"https:\/\/jsfiddle.net\/02uz6dzt\/7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">l ejercicio anterior<\/a> modifica los siguientes par\u00e1metros: <a href=\"https:\/\/developers.google.com\/places\/supported_types?hl=es-419\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Types<\/a> y Radius.<!--EndFragment--><\/p>\n<p>Nota: Puedes <a href=\"http:\/\/M%C3%A1s%20par%C3%A1metros%20de%20b%C3%BAsqueda:%20https:\/\/developers.google.com\/maps\/documentation\/javascript\/places?hl=es-419\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ver m\u00e1s par\u00e1metros de b\u00fasqueda en este enlace<\/a>.<\/p>\n<p class=\"has-text-align-center\"><i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/02uz6dzt\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a>] <\/i> <!--EndFragment--><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\">Gmaps.js<\/h2>\n<p>Si trabajar directamente con la API de Google Maps te resulta complejo, <a href=\"https:\/\/hpneo.github.io\/gmaps\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Gmaps.js<\/a> es una librer\u00eda desarrollada para simplificar el trabajo con la API.<\/p>\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">LeafLeft<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p><a href=\"http:\/\/leafletjs.com\/examples.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Leaflet<\/a> es una librer\u00eda especializada para la creaci\u00f3n de <b>mapas interactivos.<\/b><!--EndFragment--><\/p>\n<p>Tiene una amplia <a href=\"http:\/\/leafletjs.com\/reference-1.3.0.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">documentaci\u00f3n<\/a> y una <a href=\"https:\/\/www.mapbox.com\/api-documentation\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">galer\u00eda de estilos de mapa<\/a> (basados en Mapbox) para comenzar a trabajar r\u00e1pidamente con ella.<\/p>\n<p>Como toda librer\u00eda basada en JS, utiliza la base de este, pero simplifica la sintaxis para hacer m\u00e1s sencillo y \u00e1gil el desarrollo de los mapas.<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/7492b-js94-1534325590-81.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Vamos a crear un <a href=\"https:\/\/jsfiddle.net\/gertrudix\/b4kaptvm\/33\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">mapa b\u00e1sico con LeafleftJs<\/a>:<\/p>\n<ol class=\"wp-block-list\">\n<li>En el head de html, enlazamos la hoja de estilo de Leaftletjs y, detr\u00e1s, ponemos despu\u00e9s el enlace al js de Leaftletjs. <\/li>\n<li>En css Le damos un alto al div que contiene el mapa a trav\u00e9s del id <\/li>\n<li>En Js creamos el mapa y le asignamos las coordenadas decimales y el nivel de zoom <\/li>\n<li>Cargamos una capa de mapa (tile layer) desde Mapbox. Necesitaremos incluir el accessToken de mapbox. Si no tenemos uno, tendremos que crearlo (En id podemos incluir cualquiera de los <a href=\"https:\/\/www.mapbox.com\/api-documentation\/#maps\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">estilos de mapa base disponibles en Mapxbox<\/a>) <\/li>\n<li>Creamos un marcador <\/li>\n<li>Creamos un c\u00edrculo <\/li>\n<li>Creamos dos popup sobre el marcador y el c\u00edrculo <\/li>\n<li>Creamos una funci\u00f3n\n<\/li>\n<\/ol>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>En este <a href=\"https:\/\/jsfiddle.net\/gertrudix\/ps04off3\/6\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">otro mapa<\/a>, sobre la base del anterior hemos incorporado un <a href=\"http:\/\/leafletjs.com\/examples\/custom-icons\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">marcador personalizado usando las opciones que LeafLeft<\/a> tiene para ello.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Mapbox<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p><a href=\"https:\/\/www.mapbox.com%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Mapbox<\/a> es otra estupenda librer\u00eda para crear mapas. De hecho, tiene su propio sistema de mapas que es usado por otras librer\u00edas como base, tal como sucede como LeafLeft. <\/p>\n<p>Ofrece una <a href=\"https:\/\/www.mapbox.com\/mapbox-gl-js\/example\/heatmap-layer\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">documentaci\u00f3n muy amplia<\/a> lo que facilita trabajar con ella.<\/p>\n<p>De manera similar a lo que sucede con Google Maps, existe la posibilidad de <a href=\"https:\/\/www.mapbox.com\/mapbox.js\/api\/v2.2.4\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">trabajar directamente con la API<\/a> o hacerlo mediante el <a href=\"https:\/\/www.mapbox.com\/studio\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">editor de mapas (studio)<\/a>. Esto \u00faltimo simplifica a\u00fan m\u00e1s el desarrollo dado que, adem\u00e1s, luego podremos customizar o personalizar elementos accediendo al c\u00f3digo resultante.<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/77350-js95-1534326229-4.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Una de las aportaciones interesantes de esta librer\u00eda es que dispone de numerosos efectos que pueden darle un aspecto diferente a nuestras visualizaciones en mapas. La documentaci\u00f3n de la API incluye muchas, pero destacaremos aqu\u00ed algunas de ellas:<\/p>\n<h3 class=\"wp-block-heading\">Zooming<\/h3>\n<p>Transforma el puntero del rat\u00f3n en una lupa.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h3 class=\"wp-block-heading\">Animaci\u00f3n<\/h3>\n<p>Crea animaciones (l\u00edneas, superposiciones, etc.) sobre el mapa.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h3 class=\"wp-block-heading\">Video Tooltips<\/h3>\n<p>Incluye v\u00eddeo sobre el tooltip (o infowindow) de un marcador.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">ArcGIS online<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>ArcGIS online es una completa suite de aplicaciones y APIs. Dispone de un <a href=\"http:\/\/www.arcgis.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Gestor web<\/a> y de <a href=\"https:\/\/developers.arcgis.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">numerosas APIs <\/a>para interactuar y adaptar los resultados.<!--EndFragment--><\/p>\n<p>En este enlace puedes acceder a un <a href=\"https:\/\/manuelgertrudix.atavist.com\/3b-mapas-interactivos-arcgis\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">tutorial b\u00e1sico para empezar a crear mapas<\/a> 2D.<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/cf336-js96-1534326756-87.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Un aspecto diferencial de esta soluci\u00f3n, es que ofrece un editor de <b>escenas<\/b>. Esto facilita un modo de crear escenas 3D sobre la representaci\u00f3n de la esfera terrestre, como en este ejemplo:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>O sobre zonas concretas en las que pueden incluirse capas como edificios, etc:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Google Chart<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p><b><a href=\"https:\/\/developers.google.com\/chart\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Chart<\/a><\/b> es una librer\u00eda orientada a la creaci\u00f3n de una <a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">amplia variedad de gr\u00e1ficos din\u00e1micos<\/a>.<\/p>\n\n\n      \n        <figure class=\"wp-block-image aligncenter\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d5ed3-js101-1534329572-30.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<h2 class=\"wp-block-heading\">Creaci\u00f3n de Chart b\u00e1sicos<\/h2>\n\n\n      \n        <figure class=\"wp-block-image alignright\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/81cae-js99-1534327681-91.png\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>La creaci\u00f3n de Chart requiere\u00a0 que los datos sean incluidos mediante una clase de JavaScript: <i>google.visualization.DataTable<\/i> <\/p>\n<p>La clase est\u00e1 definida en la librer\u00eda de visualizaci\u00f3n de Google.<\/p>\n<p>La tabla de datos corresponde a una tabla similar a esta.<!--EndFragment--><\/p>\n<p>Veamos los pasos para crear <a href=\"https:\/\/jsfiddle.net\/gertrudix\/9uyzyxoe\/7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">nuestro primer ejemplo<\/a>:<\/p>\n<ol class=\"wp-block-list\">\n<li>Cargamos la API de visualizaci\u00f3n del paquete que nos interesa, en este caso \u201ccorechart\u201d\n<\/li>\n<li>Establecemos el callback para que se ejecute la funci\u00f3n cuando se haya cargado la API de visualizaci\u00f3n de Google y no antes\n<\/li>\n<li>La devoluci\u00f3n de llamada que crea y rellena una tabla de datos, crea una instancia del gr\u00e1fico circular, pasa los datos y los dibuja.\n<\/li>\n<li>Creamos la tabla de datos\n<\/li>\n<li>Configuramos las opciones del chart\n<\/li>\n<li>Instanciamos y dibujamos el chart pas\u00e1ndole la configuraci\u00f3n de las opciones\n<\/li>\n<\/ol>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\">Personalizaci\u00f3n del Chart<\/h2>\n<p>Para cada Chart <a href=\"https:\/\/jsfiddle.net\/gertrudix\/9uyzyxoe\/5\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">podemos personalizar<\/a> diferentes elementos como: <\/p>\n<ul class=\"wp-block-list\">\n<li>T\u00edtulo, Color, grosor de l\u00ednea, relleno de fondo, etc.\n<\/li>\n<li>Incluir elementos: t\u00edtulos de los ejes, etc.\n<\/li>\n<\/ul>\n<p>Las opciones se presentan como pares <i><b>name.value<\/b><\/i> <\/p>\n\n\n      \n        <figure class=\"wp-block-image alignright\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c48d6-js100-1534327964-91.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<ul class=\"wp-block-list\">\n<li>Las opciones pasan los valores al chart mediante el m\u00e9todo <i>draw()<\/i>\u00a0\u00a0<\/li>\n<li>Cada chart posee los pares adecuados para la customizaci\u00f3n de ese tipo de visualizaci\u00f3n\n<\/li>\n<\/ul>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n            <p class=\"has-small-font-size\">En este ejemplo vemos un Pie Chart en el que se han establecido las siguientes opciones: Ancho y alto  \u2022T\u00edtulo  \u2022Colores con un array de hexadecimales  \u2022is3D, para dar el aspecto 3D\u00a0\u00a0<\/p>\n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Las <a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/customizing_charts\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">opciones de customizaci\u00f3n son muy variadas<\/a>, lo que permite, y esta es su principal ventaja, adaptar los gr\u00e1ficos al estilo visual de nuestro proyecto.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n            <p class=\"has-small-font-size\">En este se modifican los atributos color, pieHole<\/p>\n\n          <\/div>\n        <\/div>\n      \n\n\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n            <p class=\"has-small-font-size\">Y en este otro: slices, pieHole, is3D&#8230;<\/p>\n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Otra de las opciones es incluir HTML en los tootilps:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>O incluir otros Charts dentro de los tooltips:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h3 class=\"wp-block-heading\">Combo Charts<\/h3>\n<p>Podemos tambi\u00e9n crear charts agrupados, lo que se conoce como Combo Charts. En este caso, vemos dos ejemplos: en el primero los resultados de dos procesos electorales sin customizar, y el segundo, en el que e incluyen los resultados de unas terceras elecciones, y se customizan algunos elementos.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\">Google Public Data Explorer<\/h2>\n<p>Aunque no pertenece a la API de Google Chart, <a href=\"https:\/\/www.google.com\/publicdata\/directory\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Public Data Explorer<\/a> es una interesante herramienta de Google que permite elaborar gr\u00e1ficos sencillos de forma r\u00e1pida, utilizando los datos p\u00fablicos abiertos ya cargados por las principales entidades internacionales (Eurostat, US. Census Bureau, Data.gob.uk, Banco Mundial&#8230;) o nacionales (INE&#8230;)<\/p>\n<p>Mediante un sistema de filtros se pueden crear visualizaciones tanto para realizar an\u00e1lisis como para crear gr\u00e1ficos que se vayan a insertar posteriormente en nuestro reportaje o web.<\/p>\n<p>         <!--StartFragment-->Tambi\u00e9n es posible <a href=\"http:\/\/www.google.com\/publicdata\/admin\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">cargar set de datos<\/a> propios en formato GPDE.<!--EndFragment--><\/p>\n<p>En este ejemplo, se usan datos del Banco Mundial para comparar la <a href=\"https:\/\/www.google.com\/publicdata\/explore?ds=d5bncppjof8f9_&amp;ctype=l&amp;strail=false&amp;bcs=d&amp;nselm=h&amp;met_y=children_out_of_school&amp;fdim_y=education_level:2&amp;scale_y=lin&amp;ind_y=false&amp;rdim=region&amp;idim=region:EAS:ECS:LCN:MEA:SSF:SAS:NAC&amp;ifdim=region&amp;hl=en_US&amp;dl=en_US&amp;ind=false\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">evoluci\u00f3n de la ratio de ni\u00f1os y ni\u00f1as fuera de la escuela<\/a> por regiones mundiales:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            [googlemaps https:\/\/www.google.com\/publicdata\/embed?ds=d5bncppjof8f9_&amp;ctype=l&amp;strail=false&amp;bcs=d&amp;nselm=h&amp;met_y=children_out_of_school&amp;fdim_y=education_level:2&amp;scale_y=lin&amp;ind_y=false&amp;rdim=region&amp;idim=region:EAS:ECS:LCN:MEA:SSF:SAS:NAC&amp;ifdim=region&amp;hl=en_US&amp;dl=en_US&amp;ind=false&amp;w=100%&amp;h=450]\n\n          <\/div>\n        <\/div>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Librer\u00edas DataViz (Datos)<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<p>Existen muchas alternativas actualmente para la visualizaci\u00f3n de datos. Muchas de las librer\u00edas tienen su propia sintaxis, basada o derivada de JS. La ventaja de disponer de esta variedad es que podemos tener un cat\u00e1logo muy amplio de soluciones que permitan elegir la mejor opci\u00f3n para cada caso e ir introduciendo cierta variedad en nuestros proyectos.<\/p>\n<p>Revisamos, a continuaci\u00f3n, algunas de las soluciones disponibles. Aunque no se entra en su detalle, permite hacerse una idea de las numerosas posibilidades existentes para continuar explorando por nuestra cuenta.<\/p>\n<h2 class=\"wp-block-heading\">D3.js<\/h2>\n<p><a href=\"https:\/\/d3js.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">D3.js<\/a> es una librer\u00eda JS para manipular documentos basados en datos. Se utiliza para realizar <a href=\"http:\/\/bl.ocks.org\/mbostock\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">visualizaciones complejas<\/a>. Cuenta con una <a href=\"https:\/\/github.com\/d3\/d3\/wiki\/Gallery\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">amplia galer\u00eda de visualizaciones<\/a>.<\/p>\n<p>Algunos ejemplos interesantes aplicados de esta librer\u00eda:<\/p>\n<ul class=\"wp-block-list\">\n<li>\n<a href=\"http:\/\/www.nytimes.com\/interactive\/2013\/04\/08\/business\/global\/asia-map.html?_r=0\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">China manufacture<\/a> <\/li>\n<li>\n<a href=\"http:\/\/projects.flowingdata.com\/tut\/interactive_network_demo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Similar song Networks<\/a>\n<\/li>\n<\/ul>\n<p>En este enlace puedes seguir un <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Tutorials\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">tutorial de esta librer\u00eda D3.js<\/a><\/p>\n<h3 class=\"wp-block-heading\">Funcionalidad<\/h3>\n\n\n      \n        <figure class=\"wp-block-image alignright\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d1930-js102-1534330105-37.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>Permite obtener datos de cualquier elemento del DOM y aplicarle transformaciones en el documento. <\/p>\n<p>Sobre un mismo conjunto de datos permite realizar varias transformaciones. Por ejemplo, sobre un array podemos: <\/p>\n<ul class=\"wp-block-list\">\n<li>Crear una tabla <\/li>\n<li>Generar un gr\u00e1fico interactivo en SVG\n<\/li>\n<\/ul>\n<p>Y de una manera muy flexible y r\u00e1pida.\u00a0\u00a0<!--EndFragment--><\/p>\n<p><b>Sintaxis<\/b><\/p>\n<p>         <!--StartFragment-->Utiliza una sintaxis simplificada de JS para acceder a los selectores del DOM: <a href=\"http:\/\/www.w3.org\/TR\/selectors-api\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">W3C Selectors API <\/a><!--EndFragment--><\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/be155-js103-1534330184-87.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p><b>Ejemplos<\/b><\/p>\n<p>En este primer ejemplo vemos un Diagrama de acorde, documentado en DJ3 (<a href=\"https:\/\/bl.ocks.org\/mbostock\/4062006\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">podemos reutilizar el c\u00f3digo<\/a>). En este caso, hemos reutizado el c\u00f3digo y lo hemos adaptado para crear esta versi\u00f3n sobre el <a href=\"http:\/\/comunicaciondigital.es\/files\/clases\/deuda.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">flujo de deuda entre pa\u00edses<\/a>:<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/86615-js104-1534330990-5.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p>El funcionamiento de las visualizaciones b\u00e1sicas es relativamente sencillo. Los datos se cargan en ficheros .csv que se llaman desde el html para cargarlos en la visualizaci\u00f3n. Veamos otros dos ejemplos:<\/p>\n<ul class=\"wp-block-list\">\n<li>Dendrograma: <a href=\"http:\/\/comunicaciondigital.es\/files\/clases\/flare.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Visualizaci\u00f3n<\/a> [<a href=\"http:\/\/comunicaciondigital.es\/files\/clases\/flare.csv\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Datos<\/a>]\n<\/li>\n<li>Histograma: <a href=\"http:\/\/comunicaciondigital.es\/files\/clases\/population.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Visualizaci\u00f3n<\/a> [<a href=\"http:\/\/comunicaciondigital.es\/files\/clases\/population.csv\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Datos<\/a>]<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">ZinkChart<\/h2>\n<p><a href=\"https:\/\/www.zingchart.com\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ZinkChart<\/a> es otra librer\u00eda interesante. Orientada a gr\u00e1ficos habituales (l\u00edneas, histogramas, sectores, etc.) ofrece un muy buen resultado visual, incluyendo animaci\u00f3n de los elementos y la incorporaci\u00f3n de elementos gr\u00e1ficos a\u00f1adidos que dan un aspecto muy completo.<\/p>\n<p><b><a href=\"https:\/\/jsfiddle.net\/gertrudix\/0r19fxh3\/11\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ejemplo: Barras <\/a><\/b><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p><a href=\"https:\/\/jsfiddle.net\/gertrudix\/4tkcmhst\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>Ejemplo. L\u00edneas<\/b><\/a><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/www.amcharts.com%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AmCharts<\/a><\/h2>\n<p>  <!--EndFragment-->    <a href=\"https:\/\/www.amcharts.com%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AmCharts<\/a> es otra buena librer\u00eda para crear <a href=\"https:\/\/www.amcharts.com\/demos\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">gr\u00e1ficos<\/a> y <a href=\"https:\/\/www.amcharts.com\/demos\/#javascript-maps\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">mapas<\/a>. Puede descargarse, enlazarse o trabajar con el editor <a href=\"https:\/\/live.amcharts.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">online live AmCharts<\/a>.<\/p>\n\n\n      \n        <figure class=\"wp-block-image alignwide\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1bbf1-js105-1534346475-8.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n<p><b>Ejemplo de mapa<\/b><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p><b>Ejemplo de gr\u00e1fico<\/b><\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\">Highcharts<\/h2>\n<p><a href=\"https:\/\/www.highcharts.com\/demo\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Highcharts<\/a> es una buena librer\u00eda de gr\u00e1ficos interactivos que cuenta tambi\u00e9n con una <a href=\"https:\/\/cloud.highcharts.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">versi\u00f3n de creaci\u00f3n online<\/a>. Est\u00e1 muy orientada a gr\u00e1ficos de l\u00ednea, columnas, barras para informaci\u00f3n econ\u00f3mica. <\/p>\n<p>En el editor online permite la carga de los datos en csv, lo que facilita la gesti\u00f3n de estos para la preparaci\u00f3n del gr\u00e1fico.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<h2 class=\"wp-block-heading\">AnyCharts<\/h2>\n<p><a href=\"http:\/\/www.anychart.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AnyChart.JS<\/a> es una completa librer\u00eda para el desarrollo de: <\/p>\n<ul class=\"wp-block-list\">\n<li>\n<a href=\"http:\/\/www.anychart.com\/products\/anychart\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Charts<\/a> <\/li>\n<li>\n<a href=\"http:\/\/www.anychart.com\/products\/anystock\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Stocks<\/a> <\/li>\n<li>\n<a href=\"http:\/\/www.anychart.com\/products\/anymap\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Maps<\/a> <\/li>\n<li>\n<a href=\"http:\/\/www.anychart.com\/products\/anygantt\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Gantt<\/a>\n<\/li>\n<\/ul>\n<p>Permite hacer algunas representaciones bastante singulares y diferentes, por lo que es una buena opci\u00f3n cuando se busca salirse de lo habitual.<\/p>\n<p>Este gr\u00e1fico es un buen ejemplo:<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Tambi\u00e9n resulta \u00fatil para generar <a href=\"http:\/\/jsbin.com\/yoruro\/1\/edit?html,css,js,output\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>paneles de gr\u00e1ficos, en formato dashboard.<\/b><\/a><\/p>\n<h2 class=\"wp-block-heading\">Otras librer\u00edas<\/h2>\n<h3 class=\"wp-block-heading\">Chart.js<\/h3>\n<p><a href=\"http:\/\/www.chartjs.org\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Chart.js<\/a> pertenece al grupo de librer\u00edas ligeras. No permite hacer muchas cosas, pero las visualizaciones de gr\u00e1ficas que hace son muy limpias y ligeras.<\/p>\n<h3 class=\"wp-block-heading\">Sigma.js<\/h3>\n<p><a href=\"http:\/\/sigmajs.org\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Sigma.JS<\/a> es una librer\u00eda para crear dibujo gr\u00e1fico, y est\u00e1 especializado en creaci\u00f3n de gr\u00e1ficos de redes.<!--EndFragment--><\/p>\n<h3 class=\"wp-block-heading\">Listados de librer\u00edas<\/h3>\n<p><a href=\"https:\/\/www.javascripting.com%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Javascripting<\/a> es un directorio de librer\u00edas que colecta cientos de soluciones para problemas muy diversos basados en javascript.<\/p>\n\n\n      \n        <figure class=\"wp-block-image aligncenter\">\n          <img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c5623-js106-1534350072-69.jpg\" alt=\"\">\n\n        <\/figure>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Librer\u00edas Mapas<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<h2 class=\"wp-block-heading\">Cesium.js<\/h2>\n<p><a href=\"https:\/\/cesiumjs.org\/about\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">CesiumJS<\/a> es una potente biblioteca de JavaScript de c\u00f3digo abierto para crear mapas y globlos terr\u00e1queos 3D de nivel internacional. Permite crear mapas tanto est\u00e1ticos como din\u00e1micos, y con la posibilidad de incluir l\u00edneas temporales que muestren la evoluci\u00f3n de un fen\u00f3meno. <\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n<p>Tambi\u00e9n permite levantar edificios sobre superficies.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n            <p class=\"has-small-font-size\"><a href=\"http:\/\/cesiumjs.org\/NewYork\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">\u00a0New York 3D Tiles<\/a><a href=\"http:\/\/cesiumjs.org\/NewYork\" class=\"regular-link\" target=\"_blank\" rel=\"noopener\">See over 1.1 million OpenStreetMap buildings in New York City.<\/a><br><\/p>\n\n          <\/div>\n        <\/div>\n      \n\n\n<p><b>Cesium ion!<\/b><\/p>\n<p><a href=\"https:\/\/cesium.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Cesium tambi\u00e9n dispone de una versi\u00f3n de escritorio<\/a> que incluye algunas de las principales funciones de la librer\u00eda.<\/p>\n<p>Dispone de un <a href=\"https:\/\/cesiumjs.org\/tutorials\/cesium-up-and-running\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">completo tutorial<\/a> para conocer c\u00f3mo trabajar con ella.<\/p>\n<h2 class=\"wp-block-heading\">OpenLayers<\/h2>\n<p><a href=\"http:\/\/openlayers.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">OpenLayers<\/a> facilita la creaci\u00f3n de mapas din\u00e1micos en cualquier p\u00e1gina web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de informaci\u00f3n geogr\u00e1fica de todo tipo. <\/p>\n<p>Dispone, tambi\u00e9n, de un <a href=\"http:\/\/openlayers.org\/en\/latest\/doc\/tutorials\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">tutorial<\/a>, y una <a href=\"http:\/\/openlayers.org\/en\/latest\/examples\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">librer\u00eda de ejemplos<\/a>.<\/p>\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n\n\n      \n        <div class=\"wp-block-group atavist-embed\">\n          <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n            \n\n          <\/div>\n        <\/div>\n      \n\n\n    \n      <div class=\"wp-block-group atavist-title-design cover-text-simple\">\n        <div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n\n    \n      <h2 class=\"aligncenter has-text-align-left atavist-title-h2 wp-block-heading\">Utilidades<\/h2>\n    \n\n\n\n\n        <\/div>\n      <\/div>\n    \n<h2 class=\"wp-block-heading\">Localizaci\u00f3n de coordenadas<\/h2>\n<p>Para localizar las coordenadas del lugar que necesitas: <a href=\"http:\/\/www.coordenadas-gps.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Coordenadas-GPS<\/a>  <\/p>\n<h2 class=\"wp-block-heading\">Datos cartogr\u00e1ficos<\/h2>\n<p><a href=\"http:\/\/www.gadm.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Global Administrative Areas<\/a> contiene un amplio bancos de ficheros de shapefiles: KML, vectoriales\u2026 gratuitos de la mayor\u00eda de los pa\u00edses del mundo, hasta cuatro niveles administrativos: pa\u00eds, regi\u00f3n, provincia y localidad.<!--EndFragment--><\/p>\n<h2 class=\"wp-block-heading\">Librer\u00edas pictogr\u00e1ficas<\/h2>\n<p>Las librer\u00edas pictogr\u00e1ficas web son colecciones de iconos que pueden cargarse v\u00eda web en nuestro proyecto mediante un enlace.  \u2022Las tres principales son: <\/p>\n<ul class=\"wp-block-list\">\n<li>\n<a href=\"http:\/\/www.w3schools.com\/icons\/fontawesome_icons_intro.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Font Awesome Icons<\/a>. Es una colecci\u00f3n libre de m\u00e1s de 600 iconos. Permite control CSS, sin manejo de JS. <\/li>\n<li>\n<a href=\"http:\/\/www.w3schools.com\/icons\/bootstrap_icons_glyphicons.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Bootstrap<\/a><a href=\"http:\/\/www.w3schools.com\/icons\/bootstrap_icons_glyphicons.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"> <\/a><a href=\"http:\/\/www.w3schools.com\/icons\/bootstrap_icons_glyphicons.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Icons<\/a>\n<\/li>\n<li>\n<a href=\"http:\/\/www.w3schools.com\/icons\/google_icons_intro.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google <\/a><a href=\"http:\/\/www.w3schools.com\/icons\/google_icons_intro.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Icons<\/a>\n<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Tutoriales<\/h2>\n<ul class=\"wp-block-list\">\n<li>\n<a href=\"https:\/\/datavizcatalogue.com\/ES\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Cat\u00e1logo de visualizaci\u00f3n de datos<\/a>. Extraordinario tutorial visual sobre las mejores formas para visualizar los datos.\n<\/li>\n<li>\n<a href=\"https:\/\/visual.ly\/blog\/wp-content\/uploads\/2014\/09\/image-6.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">The Graphic continuum<\/a>.<\/li>\n<\/ul>\n<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/75994?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Google Maps API Google Maps API Ya hemos visto muchas de las posibilidades que ofrece Google Maps API. En este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas. Query Places Query Places nos permite hacer una b\u00fasqueda automatizada de lugares. Con la librer\u00eda places podemos ubicar de forma&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/\">Continua leyendo<span> Librer\u00edas JS<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":75995,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[221],"tags":[],"class_list":["post-75994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-banco-conocimiento"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Librer\u00edas JS - Portal de proyectos multimedia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Librer\u00edas JS - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"Google Maps API Google Maps API Ya hemos visto muchas de las posibilidades que ofrece Google Maps API. En este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas. Query Places Query Places nos permite hacer una b\u00fasqueda automatizada de lugares. Con la librer\u00eda places podemos ubicar de forma&hellip; Continua leyendo Librer\u00edas JS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-10T04:28:14+00:00\" \/>\n<meta name=\"author\" content=\"Manuel Gertrudix Barrio\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/\"},\"author\":{\"name\":\"Manuel Gertrudix Barrio\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"headline\":\"Librer\u00edas JS\",\"datePublished\":\"2018-08-10T04:28:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/\"},\"wordCount\":2159,\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"articleSection\":[\"banco-conocimiento\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/\",\"name\":\"Librer\u00edas JS - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2018-08-10T04:28:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/librerias-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Librer\u00edas JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#website\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/#\\\/schema\\\/person\\\/4699e2d8a8c19b218ae2f96940a3c337\",\"name\":\"Manuel Gertrudix Barrio\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247\",\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247\",\"contentUrl\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/wp-content\\\/litespeed\\\/avatar\\\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247\",\"caption\":\"Manuel Gertrudix Barrio\"},\"url\":\"https:\\\/\\\/proyectos.comunicaciondigital.es\\\/en\\\/author\\\/gertrudix\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Librer\u00edas JS - Portal de proyectos multimedia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/","og_locale":"en_GB","og_type":"article","og_title":"Librer\u00edas JS - Portal de proyectos multimedia","og_description":"Google Maps API Google Maps API Ya hemos visto muchas de las posibilidades que ofrece Google Maps API. En este apartado, veremos algunas caracter\u00edsticas que nos pueden resultar \u00fatiles para la configuraci\u00f3n de nuestros mapas. Query Places Query Places nos permite hacer una b\u00fasqueda automatizada de lugares. Con la librer\u00eda places podemos ubicar de forma&hellip; Continua leyendo Librer\u00edas JS","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/librerias-js\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2018-08-10T04:28:14+00:00","author":"Manuel Gertrudix Barrio","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/"},"author":{"name":"Manuel Gertrudix Barrio","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"headline":"Librer\u00edas JS","datePublished":"2018-08-10T04:28:14+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/"},"wordCount":2159,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#primaryimage"},"thumbnailUrl":"","articleSection":["banco-conocimiento"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/","url":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/","name":"Librer\u00edas JS - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#primaryimage"},"thumbnailUrl":"","datePublished":"2018-08-10T04:28:14+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/librerias-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"Librer\u00edas JS"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337","name":"Manuel Gertrudix Barrio","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1779122247","caption":"Manuel Gertrudix Barrio"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/75994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=75994"}],"version-history":[{"count":0,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/75994\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=75994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=75994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=75994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}