{"id":80281,"date":"2022-04-27T17:46:22","date_gmt":"2022-04-27T17:46:22","guid":{"rendered":"https:\/\/proyectos.comunicaciondigital.es\/introduccin-a-javascript-copy\/"},"modified":"2022-04-28T16:00:11","modified_gmt":"2022-04-28T16:00:11","slug":"utilizacion-javascript-mip","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/utilizacion-javascript-mip\/","title":{"rendered":"Utilizaci\u00f3n lenguajes script &#8211; MIP"},"content":{"rendered":"[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.16&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row _builder_version=\u00bb4.16&#8243; background_size=\u00bbinitial\u00bb background_position=\u00bbtop_left\u00bb background_repeat=\u00bbrepeat\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; custom_padding=\u00bb|||\u00bb global_colors_info=\u00bb{}\u00bb custom_padding__hover=\u00bb|||\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text admin_label=\u00bbConociendo etiqueta\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb text_font_size=\u00bb16px\u00bb header_2_text_color=\u00bb#0C71C3&#8243; text_orientation=\u00bbcenter\u00bb height=\u00bb39px\u00bb custom_margin=\u00bb0px||||false|false\u00bb custom_padding=\u00bb6px||3px||false|false\u00bb box_shadow_style=\u00bbpreset1&#8243; box_shadow_horizontal=\u00bb1px\u00bb box_shadow_blur=\u00bb4px\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><a href=\"#1\">Conociendo JavaScript\u00a0<\/a> |\u00a0 <a href=\"#2\">Google Maps<\/a>\u00a0 |\u00a0 <a href=\"#3\">Otras librer\u00edas de mapas<\/a>\u00a0 |\u00a0 <a href=\"#5\">DataViz<\/a>\u00a0 |\u00a0 <a href=\"#6\">Datos3D\u00a0<\/a> | <a href=\"#4\">Profundizar<\/a><\/p>[\/et_pb_text][et_pb_text admin_label=\u00bbConociendo etiqueta\u00bb module_id=\u00bb1&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb header_2_text_color=\u00bb#0C71C3&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<h2>Conociendo JavaScript<\/h2>[\/et_pb_text][et_pb_accordion _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;][et_pb_accordion_item title=\u00bb\u00bfA qu\u00e9 nos referimos con un script?\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/guion-movies.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/guion-movies-300x225.jpeg\" width=\"579\" height=\"434\" alt=\"\" class=\"wp-image-80275 alignnone size-medium\" style=\"display: block; margin-left: auto; margin-right: auto;\" \/><\/a><\/p>\n<p>Cuando hablamos de un <strong>script<\/strong>, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) <strong>programa<\/strong> que sirve para \u00abrutinizar\u00bb o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto m\u00e1s complejo.<\/p>\n<p> <\/p>\n<p>En nuestro \u00e1mbito, nos interesan los scripts que permiten, como veremos, dotar de interactividad a visualizaciones de informaci\u00f3n o gestionar datos asociados a estas.<\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbJavascript en acci\u00f3n\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<h3>Visualizaci\u00f3n de datos. Ejemplo de diagrama Sankey<\/h3>\n<iframe loading=\"lazy\" width=\"100%\" height=\"450\" src=\"\/\/jsfiddle.net\/gertrudix\/rfvegumj\/1\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe>\n<h3>Visualizaci\u00f3n de <a href=\"https:\/\/observablehq.com\/@kerryrodden\/sequences-sunburst\" target=\"_blank\" rel=\"noopener\">secuencias sunburts<\/a><\/h3>\n<iframe loading=\"lazy\" width=\"100%\" height=\"724\" frameborder=\"0\" src=\"https:\/\/observablehq.com\/embed\/@kerryrodden\/sequences-sunburst?cells=viewof+sunburst\"><\/iframe>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbPresentando a JavaScript\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb sticky_enabled=\u00bb0&#8243;]<p><strong>JavaScript<\/strong> es el lenguaje de script nativo de la web.<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d3de1-js1-1533890338-46.png\" alt=\"\" \/><\/figure>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/645b4-js2-1533890439-37.jpg\" alt=\"\" style=\"margin-left: auto; margin-right: auto;\" \/><\/figure>\n<\/div>\n<p>&nbsp;<\/p>\n<blockquote>\n<p>Su aprendizaje supone introducirse en un lenguaje de programaci\u00f3n, y aunque pueda parecer complicado de entrada, luego nos permitir\u00e1 saber c\u00f3mo modificar c\u00f3digo ya escrito o realizar visualizaciones muy atractivas mediante el uso de librer\u00edas y API que se basan en JavaScript.<\/p>\n<\/blockquote>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/0e98e-js3-1533890711-78.png\" alt=\"\" \/><\/figure>\n<p><b>\u00bfPara qu\u00e9 nos sirve JavaScript en un proyecto period\u00edstico?<\/b><\/p>\n<ul>\n<li>Para tener unas nociones generales sobre la programaci\u00f3n con scripts.<\/li>\n<li>Para saber c\u00f3mo funciona, de forma global, la interactividad en la manipulaci\u00f3n de datos y de las visualizaciones.<\/li>\n<li>Para comprender el c\u00f3digo resultante de los sistemas de datos y visualizaci\u00f3n, y saber manipular determinados par\u00e1metros.<\/li>\n<li>Para comenzar a adentrarnos en la creaci\u00f3n de visualizaciones basadas en librer\u00edas JS como jQuery<\/li>\n<li>Para hacer <a href=\"https:\/\/geekflare.com\/web-scraping-in-javascript\/\" target=\"_blank\" rel=\"noopener\">scraping de datos con Javascript<\/a> (Node.js)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>\u00bfC\u00f3mo vamos a trabajar?<\/strong><\/p>\n<p>Para trabajar con JavaScript utilizaremos editores de c\u00f3digo online como <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JsFiddle.net<\/a>. Podr\u00e1s acceder a los ejemplos y ejercicios de dos maneras:<\/p>\n<p><strong>A) A trav\u00e9s de los enlaces que encontrar\u00e1s en cada ejercicio<\/strong> y que te dar\u00e1n acceso al entorno online de edici\u00f3n:<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4c615-js4-1533891129-19.png\" alt=\"\" \/><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>B) Manipular los ejemplos de manera directa a trav\u00e9s de objetos embebidos<\/strong>, en el que podr\u00e1s trabajar en las diferentes partes del c\u00f3digo accediendo a las diferentes pesta\u00f1as disponibles.<\/p>\n<p>&nbsp;<\/p>\n<blockquote>\n<p>Las cuestiones que vamos a tratar en esta sesi\u00f3n de introducci\u00f3n son conceptos generales que, aunque se ejemplifican con Javascript, son generales que nos sirven para la mayor\u00eda de los lenguajes de scripts, as\u00ed que os sonar\u00e1n de lo trabajado con Phyton.<\/p>\n<\/blockquote>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bb\u00bfQu\u00e9 es JavaScript?\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb sticky_enabled=\u00bb0&#8243;]<h3>\u00bfQu\u00e9 es?<\/h3>\n<p>Un <b>lenguaje<\/b> de programaci\u00f3n <b>interpretado<\/b> por los navegadores en tiempo real.<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c2ba4-js5-1533893491-16.jpg\" alt=\"Lenguajes compilados vs Lenguajes interpretados\" \/><lt-highlighter contenteditable=\"false\" class=\"lt--mac-os\" style=\"display: none;\"><lt-div spellcheck=\"false\" class=\"lt-highlighter__wrapper\" style=\"width: 1372px !important; height: 24px !important; transform: none !important; transform-origin: 686px 12px !important; zoom: 1 !important; margin-top: 812px !important;\"><lt-div class=\"lt-highlighter__scroll-element\" style=\"top: 0px !important; left: 0px !important; width: 1372px !important; height: 24px !important;\"><canvas class=\"lt-highlighter__canvas\" width=\"17\" height=\"20\" style=\"display: none; top: 2px !important; left: 220px !important;\"><\/canvas><\/lt-div><\/lt-div><\/lt-highlighter><\/p>\n<figcaption data-gramm=\"false\" data-lt-tmp-id=\"lt-516821\" spellcheck=\"false\"><em>Figura. Lenguajes compilados vs Lenguajes interpretados<\/em><\/figcaption>\n<\/figure>\n<p><strong><\/strong><\/p>\n<p><strong>Javascript es un dialecto del est\u00e1ndar <a href=\"https:\/\/www.w3schools.com\/js\/js_es6.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ECMAScript<\/a> (versi\u00f3n 6)<\/strong><\/p>\n<p>Responde al modelo de <a href=\"https:\/\/www.desarrolloweb.com\/articulos\/499.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Programaci\u00f3n orientada a objetos (POO)<\/a>. Aunque sigue el paradigma de programaci\u00f3n basado en objetos, trabaja con prototipos, aunque las versiones actuales permiten el manejo de <a href=\"https:\/\/medium.com\/@jmz12\/usando-clases-en-javascript-e07f0e25c67d\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">clases (class)<\/a>. Al trabajar bajo el modelo de POO usa t\u00e9cnicas que le dan una importante versatilidad como, por ejemplo:<\/p>\n<ul>\n<li><b>Modularidad<\/b>. Las aplicaciones se pueden subdividir en partes, conocidas como m\u00f3dulos.<\/li>\n<li><b>Encapsulamiento<\/b>. Los datos se \u00abencapsulan\u00bb o aislan para evitar que puedan ser manipulados o cambiados de estado.<\/li>\n<li><b>Control del DOM<\/b>. Permite interactuar con la p\u00e1gina web mediante <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Glossary\/DOM\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">DOM<\/a><\/li>\n<\/ul>\n<p>Puede funcionar tanto:<\/p>\n<ul>\n<li>En el lado cliente (client-side) como parte del navegador web<\/li>\n<li>En el lado servidor (vg. <a href=\"https:\/\/nodejs.org\/es\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>)<\/li>\n<\/ul>\n<p>Aunque el nombre es similar a\u00a0JAVA, tiene que ver poco con este otro lenguaje de programaci\u00f3n, tanto en las\u00a0sem\u00e1nticas como en sus\u00a0prop\u00f3sitos, que son\u00a0diferentes, as\u00ed que debemos no confundirlos.<\/p>\n<p>&nbsp;<\/p>\n<h3>Ejercicio<\/h3>\n<ol>\n<li><i>Abre el editor de c\u00f3digo en <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JSFiddle<\/a> con <a href=\"https:\/\/jsfiddle.net\/gertrudix\/k9mgd2hL\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">el ejercicio<\/a>.<\/i><\/li>\n<li><i>Revisa el c\u00f3digo html. F\u00edjate que el c\u00f3digo JS aparece en el fichero HTML. Prueba el resultado que produce el bot\u00f3n. \u00bfC\u00f3mo crees que funciona comprobando el c\u00f3digo?<\/i><\/li>\n<\/ol>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gertrudix\/k9mgd2hL\/2\/embedded\/js,html,result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbDepurando. Consola del navegador\u00bb _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>La <strong>consola del navegador<\/strong> nos permite revisar y depurar los errores de c\u00f3digo.<\/p>\n<p>Todos los navegadores actuales disponen de ella. Para abrirla:<\/p>\n<ul>\n<li>En Chrome: Ctrl+Shift+J (Windows) o Cmd+Alt+I (Mac)<\/li>\n<li>En Firefox: Control + \u21e7 + J (Windows)<\/li>\n<\/ul>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/210d9-js7-1533899311-62.png\" alt=\"Consola del navegador en Chrome\" \/>\u00a0<\/p>\n<figcaption>Consola del navegador en Chrome<\/figcaption>\n<\/figure>\n<h3><\/h3>\n<h3><\/h3>\n<h3>Ejercicio<\/h3>\n<p>Vamos a comprobar, a trav\u00e9s de la consola de Chrome, d\u00f3nde aparece JavaScript.<\/p>\n<ol>\n<li><i>Carga una p\u00e1gina, por ejemplo de un peri\u00f3dico como El Mundo o El Pa\u00eds. Abre la Consola mediante las funciones r\u00e1pidas que hemos visto anteriormente. Otra opci\u00f3n es buscar en el men\u00fa del navegador. En el caso de Chrome: M\u00e1s herramientas &gt; Herramientas para desarrolladores <\/i><\/li>\n<li><i>F\u00edjate en la pesta\u00f1a Elements -d\u00f3nde aparece las etiquetas de script. Localiza las etiquetas de script, la etiqueta <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Elemento\/noscript\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">noscript<\/a>, etc.<\/i><\/li>\n<\/ol>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/25b5a-js8-1533899520-76.png\" alt=\"Ejemplo de c\u00f3digo en la consola del navegador\" \/>\u00a0<\/p>\n<figcaption>Ejemplo de c\u00f3digo en la consola del navegador<\/figcaption>\n<\/figure>\n<h2><\/h2>\n<h2><\/h2>\n<h2>Utilidad de la consola. Para qu\u00e9 sirve.<\/h2>\n<p>La consola nos sirve para probar el funcionamiento de una p\u00e1gina o una aplicaci\u00f3n de forma que: a) podamos detectar errores de c\u00f3digo; y b) hacer pruebas con JS<\/p>\n<p>Permite:<\/p>\n<ul>\n<li>Revisar informaci\u00f3n sobre errores o alertas<\/li>\n<li>Utilizar el inspector de c\u00f3digo para depurarlo<\/li>\n<li>Ejecutar expresiones o comandos de JS<\/li>\n<\/ul>\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/19e41-js9-1533899790-35.png\" alt=\"\" \/><\/figure>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bb\u00bfD\u00f3nde aparece?\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb body_link_text_color=\u00bb#8c1f13&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/55de3-js6-1533898857-79.png\" alt=\"\" \/><\/figure>\n<p>JavaScript puede cargarse en la p\u00e1gina web a trav\u00e9s de diferentes opciones.<\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bb\u00bfPara qu\u00e9 lo utilizamos?\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Es un lenguaje que permite <b>dotar de interactividad<\/b> a las p\u00e1ginas web. Algunas de las tareas b\u00e1sicas que puede realizar son:<\/p>\n<ol>\n<li>Escribir en HTML<\/li>\n<li>Reaccionar a eventos<\/li>\n<li>Modificar elementos HTML<\/li>\n<li>Validar entrada de datos<\/li>\n<li>Cambiar o modificar atributos<\/li>\n<\/ol>\n<p>Adem\u00e1s, mediante la <a href=\"http:\/\/html5index.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">API JS de HTML5 <\/a>podemos acceder a recursos adicionales: c\u00e1mara, almacenamiento de datos, creaci\u00f3n de gr\u00e1ficos, flujo de datos con servidores\u2026)<\/p>\n<figure class=\"wp-block-image alignfull\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/29104-jsapi-1573491833-95.png\" alt=\"\" \/><\/figure>\n<p>&nbsp;<\/p>\n<p>Permite acceder a informaci\u00f3n en internet: por ejemplo, buscar y obtener las palabras m\u00e1s populares en Twitter de un tema, o para hacer scraping de web utilizando soluciones como <a href=\"https:\/\/scotch.io\/tutorials\/scraping-the-web-with-node-js\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>, <a href=\"https:\/\/medialab.github.io\/artoo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Artoo.js<\/a> \u00a0o <a href=\"http:\/\/nrabinowitz.github.io\/pjscrape\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">pjscrape<\/a>)<\/p>\n<p>Tambi\u00e9n permite organizar y presentar datos como, por ejemplo, automatizar el trabajo de las hojas de c\u00e1lculo; o la visualizaci\u00f3n de datos.<\/p>\n<h3><\/h3>\n<h3>Ejercicio<\/h3>\n<p>Veamos c\u00f3mo JS aporta interactividad a una web,<\/p>\n<ol>\n<li>Accede a la web de <a href=\"https:\/\/civio.es\/espana-en-llamas\/mapa-de-incendios-forestales\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Espa\u00f1a en Llamas<\/a>. Navega por el mapa, usa los filtros, etc.<\/li>\n<li>Ahora deshabilita Javascript desde las <a href=\"https:\/\/es.ccm.net\/faq\/26408-como-desactivar-javascript-en-google-chrome\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">opciones del navegador<\/a> o utilizando alguna herramienta como <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WebDevelopper Toolbar<\/a>. Comprueba qu\u00e9 sucede. \u00bfPuedes navegar el mapa? \u00bfCompartir en redes sociales?<\/li>\n<\/ol>\n<p>Revisemos ahora, en detalle, alguna de estas funciones.<\/p>\n<p>&nbsp;<\/p>\n<h2>1. Escribir en HTML<\/h2>\n<p>Una de las cosas que puede hacer JS es escribir contenido en HTML. Observemos <a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a>.<\/p>\n<h3><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d95a1-js11-1533900998-81.png\" alt=\"\" \/><\/h3>\n<p>&nbsp;<\/p>\n<h3>Ejercicio<\/h3>\n<p>1. Sobre el ejemplo anterior, a\u00f1ade un enlace a la web de Maldita.es\u00a0 (<a href=\"https:\/\/maldita.es\/\">maldita.es<\/a>)<\/p>\n<p>2. Prueba a incluir otro enlace a otra web distinta.<\/p>\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/137\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<h2><\/h2>\n<h2>2. Reaccionar a eventos<\/h2>\n<div class=\"wp-block-image\">\n<figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1f0aa-js12-1533902831-33.png\" alt=\"\" \/><\/figure>\n<\/div>\n<p>Otra funci\u00f3n es reaccionar a eventos creados por el usuario (hacer clic, pasar por encima de una zona&#8230;), por el propio navegador (cargar la p\u00e1gina), etc. como sucede en <a href=\"https:\/\/jsfiddle.net\/gertrudix\/vpevk15L\/\" target=\"_blank\" rel=\"noopener\">este ejemplo.<\/a><\/p>\n<div class=\"wp-block-group atavist-embed\"><\/div>\n<h4>Ejercicio<\/h4>\n<p>1. Modifica el ejemplo anterior para que el mensaje de alerta muestre tu nombre.<\/p>\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/vpevk15L\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<h2><\/h2>\n<h2>3. Modificar contenido en HTML<\/h2>\n<p>Otra funci\u00f3n es modificar contenido que ya <a href=\"https:\/\/jsfiddle.net\/yiqingli\/3s9k2vtc\" target=\"_blank\" rel=\"noopener\">est\u00e1 cargado en el html<\/a>.<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b228a-js13-1533903052-31.png\" alt=\"\" \/><\/figure>\n<div class=\"wp-block-group atavist-embed\"><\/div>\n<p><b>Ejercicio<\/b><\/p>\n<p>En este ejemplo hay algo que no funciona. Rev\u00edsalo y ajusta lo que est\u00e9 mal para que funcione el cambio de contenido.<\/p>\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/3s9k2vtc\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<div class=\"wp-block-group atavist-embed\">\n<p class=\"has-small-font-size\">El id no es correcto. Deben de tener el mismo nombre.<\/p>\n<\/div>\n<h2><\/h2>\n<h2>4. Validar la entrada de datos<\/h2>\n<figure class=\"alignright\">\n<figcaption><\/figcaption>\n<\/figure>\n<p>JavaScript es muy \u00fatil para validar si la entrada de datos en los campos de un formulario son los adecuados, aquellos que por formato o tipo se esperan recibir.<\/p>\n<p><a href=\"https:\/\/jsfiddle.net\/lingcheng\/2k97b5wt\" target=\"_blank\" rel=\"noopener\">En este ejemplo<\/a>, podemos comprobar si los datos que se introducen est\u00e1n comprendidos dentro de un rango. En caso contrario, saltar\u00e1 una alerta indicando que no son correctos.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b3437-js14-1533931261-10.png\" alt=\"isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero\" \/><\/p>\n<p>isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero<\/p>\n<div class=\"wp-block-group atavist-embed\"><\/div>\n<p><b>Ejercicio<\/b><\/p>\n<p>Modifica el ejemplo anterior para que la validaci\u00f3n sea para n\u00fameros comprendidos entre 10 y 20.<\/p>\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2k97b5wt\/16\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<div class=\"wp-block-group atavist-embed\"><\/div>\n<h2>5. Cambiar o modificar atributos<\/h2>\n<p>En <a href=\"https:\/\/jsfiddle.net\/gertrudix\/9397suo0\" target=\"_blank\" rel=\"noopener\">este ejemplo<\/a> generamos un efecto de sustituci\u00f3n modificando el atributo src de una imagen.<\/p>\n<p>Otra posibilidad es cambiar determinados atributos de los elementos html. Aqu\u00ed las posibilidades son muy amplias, dado que podemos modificar los valores de cualquier atributo, desde el color de un texto, el tipo de fuente, etc.<\/p>\n<div class=\"wp-block-group atavist-embed\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4236a-js15-1533935333-52.png\" alt=\"\" \/><\/div>\n<h4><\/h4>\n<h4>Ejercicio<\/h4>\n<p>Modifica el valor del atributo src con estas im\u00e1genes que realizan un efecto de sustituci\u00f3n similar<\/p>\n<ul>\n<li><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lighton.png<\/a><\/li>\n<li><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png<\/a><\/li>\n<\/ul>\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2nwru4pe\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<div class=\"wp-block-group atavist-embed\">\n<p class=\"has-small-font-size\">Enciende o apaga la luz (la primera imagen es el primer bot\u00f3n), la segunda es para img y el segundo bot\u00f3n<\/p>\n<\/div>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbTipos de datos\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Javascript puede almacenar los siguientes <strong>tipos de datos<\/strong>:<\/p>\n<ul>\n<li>string (cadenas)<\/li>\n<li>number (n\u00fameros)<\/li>\n<li>boolean (booleanos)<\/li>\n<li>function (funciones)<\/li>\n<li>array (arreglo)<\/li>\n<li>object (objetos)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos-1024x685.png\" width=\"1024\" height=\"685\" alt=\"tipos-datos\" class=\"wp-image-80292 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos-1024x685.png 1024w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos-980x655.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos-480x321.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos2-1024x819.png\" width=\"1024\" height=\"819\" alt=\"tipos-datos\" class=\"wp-image-80293 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos2-1024x819.png 1024w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos2-980x784.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-datos2-480x384.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbVariables en Javascript\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Una variable es un elemento que<span>\u00a0<\/span><b>contiene informaci\u00f3n<span>\u00a0<\/span><\/b>(datos) que puede ser ejecutada por el c\u00f3digo.<\/p>\n<p>Las variables sirven para<span>\u00a0<\/span><b>guardar<\/b><span>\u00a0<\/span>informaci\u00f3n que ser\u00e1 utilizada posteriormente. En JavaScript, los usuarios pueden declarar una variable usando 3 palabras clave que son <strong>var<\/strong>, <strong>let<\/strong> y <strong>const<\/strong>.<\/p>\n<p>En<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/2gqf548z\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a><span>\u00a0<\/span>x se define como una variable. Luego, asignamos a x el valor de 6:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gertrudix\/2gqf548z\/embedded\/html,css,result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbConceptos de POO\u00bb content_last_edited=\u00bboff|desktop\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>La<span>\u00a0<\/span><b>POO (Programaci\u00f3n Orientada a Objetos)<\/b><span>\u00a0<\/span>es un paradigma de programaci\u00f3n que permite optimizar los procesos de programaci\u00f3n y los resultados que se obtienen con ellos. Permite pre-dise\u00f1ar objetos que son almacenados en librer\u00edas o bibliotecas para que puedan ser reutilizados por los programas sin necesidad de tener que volver a escribir las funciones necesarias cada vez que se quiere hacer uso de ellas.<\/p>\n<p>Los elementos fundamentales de la POO incorporan un n\u00famero amplio de componentes (clase, herencia, objeto, m\u00e9todo..), pero nos centraremos solo en los que resultan fundamentales para manejarnos en el entorno de trabajo de un proyecto period\u00edstico<\/p>\n<ul>\n<li>Objetos<\/li>\n<li>Eventos<\/li>\n<li>Funciones<\/li>\n<li>M\u00e9todos<\/li>\n<\/ul>\n<h3>Objetos<\/h3>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos1-1024x604.png\" width=\"1024\" height=\"604\" alt=\"objetos1\" class=\"wp-image-80296 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos1-980x578.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos1-480x283.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos2-1024x397.png\" width=\"1024\" height=\"397\" alt=\"objetos2\" class=\"wp-image-80297 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos2-980x380.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/objetos2-480x186.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>\n<h3><b>Eventos<\/b><\/h3>\n<p>Los eventos son<span>\u00a0<\/span><b>sucesos<\/b>, producidos normalmente por una acci\u00f3n del usuario, que<span>\u00a0<\/span><b>producen alg\u00fan efecto<\/b>. Por ejemplo, cuando un usuario pulsa un bot\u00f3n o hace clic sobre un enlace.<\/p>\n<p>Los eventos se producen sobre alguno de los elementos del <strong>DOM (Document Object Model)<\/strong><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom.png\" width=\"880\" height=\"896\" alt=\"\" class=\"wp-image-80299 alignnone size-full\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom.png 880w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom-480x489.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 880px, 100vw\" \/><\/a><\/p>\n<p>Algunos de los eventos DOM m\u00e1s habituales son:<\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom1-1024x370.png\" width=\"1024\" height=\"370\" alt=\"\" class=\"wp-image-80300 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom1-1024x370.png 1024w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom1-980x354.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/dom1-480x174.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbFunciones\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Todo evento lleva asociado, normalmente, una<span>\u00a0<\/span><b>funci\u00f3n<\/b>.<\/p>\n<p>Una funci\u00f3n es un<span>\u00a0<\/span><b>bloque de c\u00f3digo que puede ser ejecutado<\/b><span>\u00a0<\/span>cuando es llamada por un evento<\/p>\n<p>Son muy \u00fatiles porque es muy habitual reutilizar c\u00f3digo con diferentes argumentos a lo largo de un programa, por lo que podemos utilizar la funci\u00f3n sin tener que escribir de nuevo el c\u00f3digo, solo<span>\u00a0<\/span><b>invoc\u00e1ndola.<\/b><\/p>\n<p>Para<span>\u00a0<\/span><b>llamar a una funci\u00f3n<\/b><span>\u00a0<\/span>hay que invocarla en cualquier parte de la p\u00e1gina web.<\/p>\n<p>Cuando se invoca una funci\u00f3n, todo el c\u00f3digo que contenga entre<span>\u00a0<\/span><b>llaves {}<span>\u00a0<\/span><\/b>se ejecuta<\/p>\n<p>Para invocarla, basta con escribir su nombre seguido de par\u00e9ntesis<\/p>\n<p><b><i><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/marker-clustering\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ejemplo con Google Maps<\/a><\/i><\/b>. En este caso, se emplea la API de Google Maps para crear un mapa que agrupa (cluster) marcadores en funci\u00f3n del nivel de zoom.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/marker-clustering\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/mapa-cluster.png\" width=\"861\" height=\"406\" alt=\"\" class=\"wp-image-80303 alignnone size-full\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/mapa-cluster.png 861w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/mapa-cluster-480x226.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 861px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbLibrer\u00edas y APIs\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Estos dos conceptos est\u00e1n directamente vinculados.<\/p>\n<p>T\u00e9cnicamente, una<span>\u00a0<\/span><a href=\"http:\/\/www.4rsoluciones.com\/blog\/framework-sdk-biblioteca-api-cuales-son-las-diferencias-2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>librer\u00eda o biblioteca<\/b><\/a><span>\u00a0<\/span>(library) es una colecci\u00f3n de implementaciones de comportamiento, pero lo entenderemos mejor si decimos que es una larga lista de c\u00f3digo de programaci\u00f3n que incluye un amplio n\u00famero de funciones que podemos utilizar desde nuestro programa con un esfuerzo limitado.<\/p>\n<p>Por su parte, una<span>\u00a0<\/span><b><a href=\"http:\/\/blogginzenith.zenithmedia.es\/que-es-y-como-funciona-una-api-diczionario\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">API<\/a><span>\u00a0<\/span>(<i>Aplication Programming Interface<\/i>)<\/b><span>\u00a0<\/span>es una especificaci\u00f3n formal que permite comunicar componentes de software de dos sistemas distintos. Para entendernos, es una especie de \u201csubcontrataci\u00f3n\u201d de funciones.<\/p>\n<p>Una API es el libro de instrucciones que nos permite conocer c\u00f3mo trabajar con el<span>\u00a0<\/span><b>conjunto de funciones<\/b>, procedimientos y objetos contenidos en la librer\u00eda o biblioteca con la que vamos a trabajar.<\/p>\n<p>Como se\u00f1ala de forma gr\u00e1fica<span>\u00a0<\/span><a href=\"https:\/\/diegolaballos.com\/podcast\/49-que-son-las-librerias-y-las-apis\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Diego Ceballos<\/a>, en un ejemplo cotidiano, una cafetera Nespresso ser\u00eda una librer\u00eda para hacer caf\u00e9 de forma r\u00e1pida, y su libro de instrucciones ser\u00eda la API.<\/p>\n<p><b>API Keys<\/b><\/p>\n<p>Para usar una API normalmente se requiere una API Key de autenticaci\u00f3n para conectarse con el servicio. Ello permite establecer los l\u00edmites de cuota por Key y no por IP. Adem\u00e1s, esto permite comunicar al servicio con la aplicaci\u00f3n solicitante. Actualmente, por ejemplo, para las APIs en Google Maps y el resto de aplicaciones de Google, se gestionan a trav\u00e9s de la <a href=\"https:\/\/console.cloud.google.com\/google\/maps-apis\/new\" target=\"_blank\" rel=\"noopener\">Google Maps Platform<\/a> de la Google Cloud Platform.<\/p>\n<p><a href=\"https:\/\/console.cloud.google.com\/google\/maps-apis\/new\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-key-1024x576.png\" width=\"1024\" height=\"576\" alt=\"api-key\" class=\"wp-image-80305 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-key-980x551.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-key-480x270.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbTipos de librer\u00edas y apis\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Podemos clasificar las APIs en base a la funcionalidad que aportan. Siguiendo este criterio podemos considerar, desde el punto de vista de la utilidad en proyectos period\u00edsticos, las siguientes:<\/p>\n<ul>\n<li>Para crear mapas<\/li>\n<li>Parar incorporar animaciones<\/li>\n<li>Para desarrollar aplicaciones<\/li>\n<li>Para acceder y manipular los elementos del DOM de forma sencilla<\/li>\n<li>Para trabajar con im\u00e1genes y gr\u00e1ficos<\/li>\n<li>Para visualizar datos<\/li>\n<\/ul>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-apis.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-apis.jpeg\" width=\"1000\" height=\"416\" alt=\"tipos-apis\" class=\"wp-image-80307 alignnone size-full\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-apis.jpeg 1000w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-apis-980x408.jpeg 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/tipos-apis-480x200.jpeg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/a><\/p>\n<p><span>En este enlace puede verse una\u00a0<\/span><a href=\"http:\/\/socialcompare.com\/en\/comparison\/javascript-graphs-and-charts-libraries\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">amplia comparativa de librer\u00edas<\/a><span>.<\/span><\/p>[\/et_pb_accordion_item][\/et_pb_accordion][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text module_id=\u00bb2&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb header_2_text_color=\u00bb#0C71C3&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<h2>API de Google Maps<\/h2>[\/et_pb_text][et_pb_accordion _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_accordion_item title=\u00bbGoogle Maps API\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><span>Veamos todos estos elementos de JavaScript de forma pr\u00e1ctica. Para ello, vamos a trabajar con la\u00a0<\/span><a href=\"https:\/\/mapsplatform.google.com\/intl\/es_ALL\/products\/#maps\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">API de Google Maps<\/a><span>\u00a0que es una amplia librer\u00eda dirigida a la creaci\u00f3n de complejas aplicaciones de mapas.<\/span><\/p>\n<p><span>Actualmente, es gratuito su uso hasta 28.500 llamadas o cargas mensuales (equivalente a unos 200 d\u00f3lares). A partir de esa cantidad, esta es la <a href=\"https:\/\/mapsplatform.google.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">relaci\u00f3n de precios<\/a>.<\/span><\/p>\n<p><a href=\"https:\/\/mapsplatform.google.com\/intl\/es_ALL\/products\/#maps\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/google-maps.png\" width=\"1000\" height=\"781\" alt=\"\" class=\"wp-image-80309 alignnone size-full\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/google-maps.png 1000w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/google-maps-980x765.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/google-maps-480x375.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbCrear un mapa simple incluyendo un marcador\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>La elaboraci\u00f3n de este mapa nos permitir\u00e1 comprender mejor c\u00f3mo operan las funciones.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gertrudix\/m5fbzhde\/51\/embedded\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><br \/>Vamos a elaborar un<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/m5fbzhde\/51\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>mapa sencillo en el que incluiremos un marcador<\/b><\/a>:<\/p>\n<ol>\n<li><b>Creamos el c\u00f3digo html<\/b>. F\u00edjate que en el head se hace la llamada a la API. El par\u00e1metro callback ejecuta la funci\u00f3n initMap cuando se ha cargado la API. Los atributos async y defer permiten que se siga renderizando la p\u00e1gina mientras se carga la API. La key hace la llamada mediante la API Key para acceder al servicio.<\/li>\n<li><b>Dibujamos el mapa y el marcador en el fichero JS<\/b>. Creamos una funci\u00f3n que inicializa y a\u00f1ade el mapa, con los siguientes elementos: a) Una variable que inicializamos con las coordenadas que centrar\u00e1n el mapa. b) Una variable que crea el objeto mapa, utiliza el m\u00e9todo getElemenById y le pasa dos propiedades: center y zoom (escala: cuanto m\u00e1s bajo, m\u00e1s general). Creamos una variable para incluir el marcador, inicializ\u00e1ndola con el objeto marcador, y dos propiedades: position y map<\/li>\n<\/ol>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbVersi\u00f3n actual de la API\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>La nueva versi\u00f3n de la API ha introducido cambios en algunos aspectos, simplificando el c\u00f3digo necesario, incluyendo tambi\u00e9n la codificaci\u00f3n en <a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a>, o usando constantes.<strong><\/strong><\/p>\n<p>Veamos <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/webgl\/threejs-overlay-simple\">algunas de sus m\u00faltiples opciones<\/a>.<\/p>\n<p><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/webgl\/threejs-overlay-simple\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-maps-actual-1024x639.png\" width=\"1024\" height=\"639\" alt=\"\" class=\"wp-image-80313 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-maps-actual-1024x639.png 1024w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-maps-actual-980x612.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/api-maps-actual-480x300.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbJSON y GeoJSON\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p><\/p>\n<p>JSON es el acr\u00f3nimo de <b>J<\/b>avaScript <b>O<\/b>bject <b>N<\/b>otation.<\/p>\n<p> <\/p>\n<p>Es un lenguaje independiente con una sintaxis basada en Javascript para <i>almacenamiento e intercambio de datos.<\/i><\/p>\n<p> <\/p>\n<p>Se utiliza en aplicaciones AJAX y es una alternativa a XML <b>m\u00e1s sencilla<\/b> de usar.<\/p>\n<p><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/json-xml.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/json-xml-1024x271.jpeg\" width=\"1024\" height=\"271\" alt=\"\" class=\"wp-image-80316 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/json-xml-980x259.jpeg 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/json-xml-480x127.jpeg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 nos interesa JSON?<\/h2>\n<p> <\/p>\n<p>JSON resulta relevante por:<\/p>\n<p> <\/p>\n<ul class=\"wp-block-list\">\n<li>Es la respuesta de datos que devuelven la mayor\u00eda de las APIs web\u00a0\u00a0<\/li>\n<li>Muchos portales de datos abiertos ofrecen la informaci\u00f3n en este formato<\/li>\n<li>Porque facilita la integraci\u00f3n y visualizaci\u00f3n de inform<\/li>\n<\/ul>\n<p><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/datos-gob.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/datos-gob-1024x335.jpeg\" width=\"1024\" height=\"335\" alt=\"\" class=\"wp-image-80317 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/datos-gob-980x321.jpeg 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/datos-gob-480x157.jpeg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>\n<p><span>En <\/span><a class=\"regular-link\" rel=\"noopener\" href=\"https:\/\/jsfiddle.net\/gertrudix\/ojwofxh6\/\" target=\"_blank\" data-rich-text-format-boundary=\"true\">este ejemplo<\/a><span> vemos c\u00f3mo creamos un objeto JSON en Javascript.<\/span><\/p>\n<h2>GeoJSON<\/h2>\n<p><a href=\"https:\/\/tools.ietf.org\/html\/rfc7946\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">GeoJSON<\/a><span>\u00a0<\/span>es un formato para el intercambio de<span>\u00a0<\/span><b>datos geoespaciales<\/b><span>\u00a0<\/span><i>basado en JSON<\/i>.<\/p>\n<p>Permite informar<span>\u00a0<\/span><b>diferentes tipos de geometr\u00edas<\/b>: puntos, multipuntos, l\u00edneas, multil\u00edneas, pol\u00edgonos, m\u00faltiples pol\u00edgonos, y colecciones de geometr\u00edas\u00a0\u00a0<\/p>\n<p><b>Uso de GeoJSON para cargar datos masivos<\/b><\/p>\n<p>Vamos a trabajar con ejemplo de un mapa creado con la API de Google Maps. Vamos a<span>\u00a0<\/span><b>cargar ficheros GeoJSON<span>\u00a0<\/span><\/b>con miles de datos<b><span>\u00a0<\/span><\/b>y customizar los resultados del mapa convirtiendo los marcadores en c\u00edrculos.<\/p>\n<p>Los datos los obtenemos, para este ejemplo, del sistema de feeds del USGS que ofrece datos en varios formatos, entre ellos GeoJSON, sobre diferentes<span>\u00a0<\/span><a href=\"https:\/\/earthquake.usgs.gov\/earthquakes\/feed\/v1.0\/geojson.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">sucesos naturales, en este caso, terremotos<\/a>.<\/p>\n<p>Como su sistema no permite directamente hacer llamadas de manera gratuita, tenemos que descargarnos el fichero que queramos y<span>\u00a0<\/span><a href=\"https:\/\/proyectos.comunicaciondigital.es\/files\/md\/demo2_GeoJSONP.js\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ubicarlo en servidor propio<\/a>.<\/p>\n<p>Una vez que tenemos el fichero en nuestro servidor, con una URL p\u00fablica, podemos cargarlo y<span>\u00a0<\/span><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/earthquakes\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">customizar el mapa<\/a><span>\u00a0<\/span>obteniendo<span>\u00a0<\/span><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/earthquakes#\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este resultado<\/a>.<\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/geojson-resultado.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/geojson-resultado-1024x491.png\" width=\"1024\" height=\"491\" alt=\"\" class=\"wp-image-80318 alignnone size-large\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/geojson-resultado-980x470.png 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/geojson-resultado-480x230.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/a><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbUso de JSON para personalizar mapas\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>&nbsp;<\/p>\n<figure class=\"wp-block-image alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/06a5c-js831534196-1545672020-68.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\n<p>Otra de las utilidades de JSON es la personalizaci\u00f3n de estilos. La API de Google Maps facilita un c<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/styling?hl=es-419#styling_the_default_ma\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ompleto sistema de estilos para customizar<\/a><span>\u00a0<\/span>el mapa a voluntad, algo que con otras soluciones de Google como Mymaps es m\u00e1s limitada.<\/p>\n<p><a href=\"https:\/\/console.cloud.google.com\/google\/maps-apis\/studio\/styles\" target=\"_blank\" rel=\"noopener\"><b>Asistente de mapa de Google Maps<\/b><\/a><\/p>\n<p>En todo caso, configurar estilos complejos creando escribiendo directamente el c\u00f3digo de los estilos lleva tiempo. As\u00ed que muchas veces lo m\u00e1s eficaz es usar el<span>\u00a0<\/span><a href=\"https:\/\/mapstyle.withgoogle.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\"><b>asistente de estilos de mapa<\/b><\/a><span>\u00a0<\/span>de la API de Google Maps.<\/p>\n<p>Los<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/43eezm2s\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">pasos para hacerlo<\/a><span>\u00a0<\/span>son:<\/p>\n<ol>\n<li><a href=\"https:\/\/mapstyle.withgoogle.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Accedemos al asistente<\/a>.\u00a0 \u00a0<\/li>\n<li>Configuramos el estilo bien con las features b\u00e1sicas, bien con las avanzadas que nos permiten modificar y acceder a cualquiera de las funciones y par\u00e1metros de estilo.<\/li>\n<li>Finalizamos el estilo y copiamos el codigo JSON del array de estilos (ser\u00e1 muy largo)<\/li>\n<li>Vamos en el mapa al objeto google.maps.StyledMapType y copiamos el array con todo el contenido entre [ ] incluidos estos.<\/li>\n<\/ol>[\/et_pb_accordion_item][\/et_pb_accordion][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text module_id=\u00bb3&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb header_2_text_color=\u00bb#0C71C3&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<h2>Otras librer\u00edas de mapas<\/h2>[\/et_pb_text][et_pb_accordion _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_accordion_item title=\u00bbLeafLeft\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><a href=\"http:\/\/leafletjs.com\/examples.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Leaflet<\/a><span>\u00a0<\/span>es una librer\u00eda especializada para la creaci\u00f3n de<span>\u00a0<\/span><b>mapas interactivos.<\/b><\/p>\n<p>Tiene una amplia<span>\u00a0<\/span><a href=\"http:\/\/leafletjs.com\/reference-1.3.0.html\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">documentaci\u00f3n<\/a><span>\u00a0<\/span>y una<span>\u00a0<\/span><a href=\"https:\/\/www.mapbox.com\/api-documentation\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">galer\u00eda de estilos de mapa<\/a><span>\u00a0<\/span>(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<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/leafleft.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/leafleft.jpeg\" width=\"1000\" height=\"396\" alt=\"\" class=\"wp-image-80323 alignnone size-full\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/leafleft.jpeg 1000w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/leafleft-980x388.jpeg 980w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/leafleft-480x190.jpeg 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw\" \/><\/a><\/p>\n<p>Vamos a crear un<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/b4kaptvm\/53\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">mapa b\u00e1sico con LeafleftJs<\/a>:<\/p>\n<ol>\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<span>\u00a0<\/span><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<\/li>\n<\/ol>\n<div class=\"wp-container-16 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<p>En este<span>\u00a0<\/span><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<span>\u00a0<\/span><a href=\"http:\/\/leafletjs.com\/examples\/custom-icons\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">marcador personalizado usando las opciones que LeafLeft<\/a><span>\u00a0<\/span>tiene para ello.<\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbMapbox\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p><a href=\"https:\/\/www.mapbox.com%20\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Mapbox<\/a><span>\u00a0<\/span>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<span>\u00a0<\/span><a href=\"https:\/\/www.mapbox.com\/mapbox-gl-js\/example\/heatmap-layer\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">documentaci\u00f3n muy amplia,<\/a><span>\u00a0<\/span>lo que facilita trabajar con ella.<\/p>\n<p>De manera similar a lo que sucede con Google Maps, existe la posibilidad de<span>\u00a0<\/span><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><span>\u00a0<\/span>o hacerlo mediante el<span>\u00a0<\/span><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<h4>Ejemplo de mapa con imagen georeferenciada<\/h4>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gertrudix\/hjonb085\/embedded\/html,result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe>En <a href=\"https:\/\/docs.mapbox.com\/mapbox-gl-js\/example\/georeference-imagery\/\" target=\"_blank\" rel=\"noopener\">este enlace<\/a> se encuentra la documentaci\u00f3n completa del ejemplo<\/p>\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<p><strong>Ejemplo de mapa de terreno 3D con efecto niebla<\/strong><\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/jsfiddle.net\/gertrudix\/zpdemaf4\/3\/embedded\/html,result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest=\"\" frameborder=\"0\"><\/iframe><br \/><a href=\"https:\/\/docs.mapbox.com\/mapbox-gl-js\/example\/add-fog\/\" target=\"_blank\" rel=\"noopener\">Documentaci\u00f3n completa<\/a>.<\/p>\n<h3>Ejemplos de mapas que podemos crear<\/h3>\n<p>En este<span>\u00a0<\/span><a href=\"https:\/\/docs.mapbox.com\/mapbox-gl-js\/example\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">apartado de la documentaci\u00f3n<\/a><span>\u00a0<\/span>podemos revisar todas las posibilidades que ofrece esta librer\u00eda.<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/13c5f-screenshot2-1615159923-41.png\" alt=\"\" scale=\"0\" \/><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>Una completa galer\u00eda de estilos de mapa<\/strong><\/p>\n<p>Otro aspecto interesante es la <a href=\"https:\/\/www.mapbox.com\/gallery\/\" target=\"_blank\" rel=\"noopener\">amplia galer\u00eda de estilos de mapa<\/a> de la que dispone, as\u00ed como de un editor (<a href=\"https:\/\/studio.mapbox.com\/\" target=\"_blank\" rel=\"noopener\">mapbox studio<\/a>) que permite realizar cualquier edici\u00f3n de estilo que se precise, lo que ofrece enormes posibilidades de personalizaci\u00f3n del mapa.<\/p>\n<p>&nbsp;<\/p>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_text module_id=\u00bb5&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb header_2_text_color=\u00bb#0C71C3&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<h2>Google Chart<\/h2>[\/et_pb_text][et_pb_accordion _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_accordion_item title=\u00bbGoogle Chart\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><b><a href=\"https:\/\/developers.google.com\/chart\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Google Chart<\/a><\/b><span>\u00a0es una librer\u00eda orientada a la creaci\u00f3n de una\u00a0<\/span><a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">amplia variedad de gr\u00e1ficos din\u00e1micos<\/a><span>.<\/span><\/p>\n<p><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/chart-google.jpeg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/chart-google.jpeg\" width=\"438\" height=\"349\" alt=\"\" class=\"wp-image-80341 alignnone size-full\" style=\"display: block; margin-left: auto; margin-right: auto;\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/chart-google.jpeg 438w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2022\/04\/chart-google-300x239.jpeg 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><\/a><\/p>\n<h2>Creaci\u00f3n de Chart b\u00e1sicos<\/h2>\n<figure class=\"wp-block-image alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/241ad-js99-1534327681-91-1.png\" alt=\"\" scale=\"0\" \/><\/figure>\n<p>La creaci\u00f3n de Chart requiere\u00a0 que los datos sean incluidos mediante una clase de JavaScript:<span>\u00a0<\/span><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.<\/p>\n<p>Veamos los pasos para crear<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/9uyzyxoe\/7\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">nuestro primer ejemplo<\/a>:<\/p>\n<ol>\n<li>Cargamos la API de visualizaci\u00f3n del paquete que nos interesa, en este caso \u201ccorechart\u201d<\/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<\/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.<\/li>\n<li>Creamos la tabla de datos<\/li>\n<li>Configuramos las opciones del chart<\/li>\n<li>Instanciamos y dibujamos el chart pas\u00e1ndole la configuraci\u00f3n de las opciones<\/li>\n<\/ol>\n<div class=\"wp-container-23 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<h2>Personalizaci\u00f3n del Chart<\/h2>\n<p>Para cada Chart<span>\u00a0<\/span><a href=\"https:\/\/jsfiddle.net\/gertrudix\/9uyzyxoe\/5\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">podemos personalizar<\/a><span>\u00a0<\/span>diferentes elementos como:<\/p>\n<ul>\n<li>T\u00edtulo, Color, grosor de l\u00ednea, relleno de fondo, etc.<\/li>\n<li>Incluir elementos: t\u00edtulos de los ejes, etc.<\/li>\n<\/ul>\n<p>Las opciones se presentan como pares<span>\u00a0<\/span><i><b>name.value<\/b><\/i><\/p>\n<figure class=\"wp-block-image alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1dc76-js100-1534327964-91-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\n<ul>\n<li>Las opciones pasan los valores al chart mediante el m\u00e9todo<span>\u00a0<\/span><i>draw()<\/i><\/li>\n<li>Cada chart posee los pares adecuados para la customizaci\u00f3n de ese tipo de visualizaci\u00f3n<\/li>\n<\/ul>\n<div class=\"wp-container-24 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\">\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<\/p>\n<\/div>\n<\/div>\n<p>Las<span>\u00a0<\/span><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<p><span><\/span><\/p>\n<p><span><\/span><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbOtras librer\u00edas de DataViz\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<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>D3.js<\/h2>\n<p><a href=\"https:\/\/d3js.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">D3.js<\/a><span>\u00a0<\/span>es una librer\u00eda JS para manipular documentos basados en datos. Se utiliza para realizar<span>\u00a0<\/span><a href=\"http:\/\/bl.ocks.org\/mbostock\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">visualizaciones complejas<\/a>. Cuenta con una<span>\u00a0<\/span><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>\n<li><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><a href=\"http:\/\/projects.flowingdata.com\/tut\/interactive_network_demo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Similar song Networks<\/a><\/li>\n<\/ul>\n<p>En este enlace puedes seguir un<span>\u00a0<\/span><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>Funcionalidad<\/h3>\n<figure class=\"wp-block-image alignright\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4fa31-js102-1534330105-37-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\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>\n<li>Crear una tabla<\/li>\n<li>Generar un gr\u00e1fico interactivo en SVG<\/li>\n<\/ul>\n<p>Y de una manera muy flexible y r\u00e1pida.<\/p>\n<p><b>Sintaxis<\/b><\/p>\n<p>Utiliza una sintaxis simplificada de JS para acceder a los selectores del DOM:<span>\u00a0<\/span><a href=\"http:\/\/www.w3.org\/TR\/selectors-api\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">W3C Selectors API<\/a><\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b8387-js103-1534330184-87-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\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<span>\u00a0<\/span><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<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c0a80-js104-1534330990-5-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\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.<\/p>\n<h2>ZinkChart<\/h2>\n<p><a href=\"https:\/\/www.zingchart.com\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ZinkChart<\/a><span>\u00a0<\/span>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<div class=\"wp-container-33 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\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<div class=\"wp-container-34 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<h2><a href=\"https:\/\/www.amcharts.com%20\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AmCharts<\/a><\/h2>\n<p><a href=\"https:\/\/www.amcharts.com%20\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AmCharts<\/a><span>\u00a0<\/span>es otra buena librer\u00eda para crear<span>\u00a0<\/span><a href=\"https:\/\/www.amcharts.com\/demos\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">gr\u00e1ficos<\/a><span>\u00a0<\/span>y<span>\u00a0<\/span><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<span>\u00a0<\/span><a href=\"https:\/\/live.amcharts.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">online live AmCharts<\/a>.<\/p>\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/ada9b-js105-1534346475-8-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\n<p><b>Ejemplo de mapa<\/b><\/p>\n<div class=\"wp-container-35 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<p><b>Ejemplo de gr\u00e1fico<\/b><\/p>\n<div class=\"wp-container-36 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<h2>Highcharts<\/h2>\n<p><a href=\"https:\/\/www.highcharts.com\/demo\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Highcharts<\/a><span>\u00a0<\/span>es una buena librer\u00eda de gr\u00e1ficos interactivos que cuenta tambi\u00e9n con una<span>\u00a0<\/span><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<div class=\"wp-container-37 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<h2>AnyCharts<\/h2>\n<p><a href=\"http:\/\/www.anychart.com\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">AnyChart.JS<\/a><span>\u00a0<\/span>es una completa librer\u00eda para el desarrollo de:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.anychart.com\/products\/anychart\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Charts<\/a><\/li>\n<li><a href=\"http:\/\/www.anychart.com\/products\/anystock\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Stocks<\/a><\/li>\n<li><a href=\"http:\/\/www.anychart.com\/products\/anymap\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Maps<\/a><\/li>\n<li><a href=\"http:\/\/www.anychart.com\/products\/anygantt\/gallery\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Gantt<\/a><\/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<div class=\"wp-container-38 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<p>Tambi\u00e9n resulta \u00fatil para generar<span>\u00a0<\/span><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>Otras librer\u00edas<\/h2>\n<h3>Chart.js<\/h3>\n<p><a href=\"http:\/\/www.chartjs.org\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Chart.js<\/a><span>\u00a0<\/span>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>Sigma.js<\/h3>\n<p><a href=\"http:\/\/sigmajs.org\/%20\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Sigma.JS<\/a><span>\u00a0<\/span>es una librer\u00eda para crear dibujo gr\u00e1fico, y est\u00e1 especializado en creaci\u00f3n de gr\u00e1ficos de redes.<\/p>\n<h3>Listados de librer\u00edas<\/h3>\n<p><a href=\"https:\/\/www.javascripting.com%20\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Javascripting<\/a><span>\u00a0<\/span>es un directorio de librer\u00edas que colecta cientos de soluciones para problemas muy diversos basados en javascript.<\/p>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/f2d90-js106-1534350072-69-1.jpg\" alt=\"\" scale=\"0\" \/><\/figure>\n<div class=\"wp-container-39 wp-block-group atavist-title-design cover-text-simple\">\n<div class=\"wp-block-group__inner-container\">\n<h2 class=\"aligncenter has-text-align-left atavist-title-h2\">Librer\u00edas Mapas<\/h2>\n<\/div>\n<\/div>\n<h2>Cesium.js<\/h2>\n<p><a href=\"https:\/\/cesiumjs.org\/about\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">CesiumJS<\/a><span>\u00a0<\/span>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<div class=\"wp-container-40 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\"><\/div>\n<\/div>\n<p>Tambi\u00e9n permite levantar edificios sobre superficies.<\/p>\n<div class=\"wp-container-41 wp-block-group atavist-embed\">\n<div class=\"wp-block-group__inner-container\">\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><\/p>\n<\/div>\n<\/div>\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><span>\u00a0<\/span>que incluye algunas de las principales funciones de la librer\u00eda.<\/p>\n<p>Dispone de un<span>\u00a0<\/span><a href=\"https:\/\/cesiumjs.org\/tutorials\/cesium-up-and-running\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">completo tutorial<\/a><span>\u00a0<\/span>para conocer c\u00f3mo trabajar con ella.<\/p>\n<h2>OpenLayers<\/h2>\n<p><a href=\"http:\/\/openlayers.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">OpenLayers<\/a><span>\u00a0<\/span>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<span>\u00a0<\/span><a href=\"http:\/\/openlayers.org\/en\/latest\/doc\/tutorials\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">tutorial<\/a>, y una<span>\u00a0<\/span><a href=\"http:\/\/openlayers.org\/en\/latest\/examples\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">librer\u00eda de ejemplos<\/a>.<\/p>[\/et_pb_accordion_item][\/et_pb_accordion][et_pb_accordion module_id=\u00bb6&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_accordion_item title=\u00bbFrameworks para representar datos en entornos 3D\u00bb open=\u00bbon\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p>El desarrollo de entornos de visualizaci\u00f3n inmersivos ofrece una nueva oportunidad para explorar las posibilidades de visualizar datos.<\/p>\n<p>Actualmente, el <a href=\"https:\/\/aframe.io\/\" target=\"_blank\" rel=\"noopener\">framework A-FRAME<\/a>, usando\u00a0 tecnolog\u00eda de WebGL, HTML, CSS y JavaScript, permite representar <a href=\"https:\/\/aframe.io\/examples\/showcase\/helloworld\/\" target=\"_blank\" rel=\"noopener\">modelos 3D directamente en el navegador<\/a>.<br \/><iframe loading=\"lazy\" src=\"https:\/\/aframe.io\/examples\/showcase\/helloworld\/\" width=\"100%\" height=\"550px\"><\/iframe><\/p>[\/et_pb_accordion_item][et_pb_accordion_item title=\u00bbBabiaXR\u00bb _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb open=\u00bboff\u00bb]<p>Usando A-FRAME como base, <a href=\"https:\/\/babiaxr.gitlab.io\/\" target=\"_blank\" rel=\"noopener\">BabiaXR<\/a> es una librer\u00eda en desarrollo orientada a la visualizaci\u00f3n de datos en entornos 3D.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/babiaxr.gitlab.io\/aframe-babia-components\/examples\/demos\/1.0.11\/index.html\" width=\"100%\" height=\"650px\"><\/iframe><\/p>[\/et_pb_accordion_item][\/et_pb_accordion][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text module_id=\u00bb4&#8243; _builder_version=\u00bb4.17.3&#8243; _module_preset=\u00bbdefault\u00bb header_2_text_color=\u00bb#0C71C3&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<h2>Para profundizar<\/h2>[\/et_pb_text][et_pb_toggle title=\u00bbRecursos para profundizar\u00bb _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><a href=\"https:\/\/sarahdrasnerdesign.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Sarah Drasner<\/a><\/p>\n<p>Web de Sarah Drasner, desarrolladora frontend y divulgadora que escribe art\u00edculos y libros sobre temas como JavaScript o animaciones SVG.<\/p>\n<p><a href=\"https:\/\/seb.ly\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Seb Lee<\/a><br \/>Web de Seb Lee, artista digital de Reino Unido que practica lo que se llama \u00abcreative coding\u00bb, es decir, la fusi\u00f3n de la programaci\u00f3n con el arte.<\/p>\n<p><a href=\"https:\/\/lea.verou.me\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Lea Verou<\/a><br \/>Web de Lea Verou, divulgadora y desarrolladora frontend griega que es investigadora en el MIT, y lleva a\u00f1os realizando proyectos alrededor de CSS y JavaScript.<\/p>\n<p><a href=\"https:\/\/remysharp.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Remy Sharp<\/a><br \/>Web de Remy Sharp, desarrollador frontend de Reino Unido especializado en JavaScript.<\/p>\n<p><a href=\"https:\/\/jennmoney.biz\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Jenn Schiffer<\/a><br \/>Web de Jenn Schiffer, desarrolladora de web apps e ilustradora de pixel art que trabaja en Glitch.com, una comunidad de desarrollo de aplicaciones web.<\/p>\n<p><a href=\"http:\/\/sachagreif.com\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Web de Sacha Grief<\/a><br \/>Web de Sacha Grief, dise\u00f1ador y desarrollador nacido en Par\u00eds, que vive en Osaka y que escribe art\u00edculos y graba podcasts de desarrollo.<\/p>[\/et_pb_toggle][et_pb_toggle title=\u00bbEjemplos\u00bb _builder_version=\u00bb4.16&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb]<p><a href=\"https:\/\/codepen.io\/sdras\/embed\/RZGqxR?default-tab=html%2Cresult\" target=\"_blank\" rel=\"noopener\">Ejemplo de visualizaci\u00f3n<\/a><\/p>\n<p><\/p>\n<p>See the Pen <a href=\"https:\/\/codepen.io\/sdras\/pen\/RZGqxR\"><\/p>\n<p>Vue Time Comparison<\/a> by Sarah Drasner (<a href=\"https:\/\/codepen.io\/sdras\">@sdras<\/a>)<\/p>\n<p>on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><\/p>[\/et_pb_toggle][\/et_pb_column][\/et_pb_row][\/et_pb_section]<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/80281?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>Conociendo JavaScript\u00a0 |\u00a0 Google Maps\u00a0 |\u00a0 Otras librer\u00edas de mapas\u00a0 |\u00a0 DataViz\u00a0 |\u00a0 Datos3D\u00a0 | ProfundizarConociendo JavaScript Cuando hablamos de un script, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) programa que sirve para \u00abrutinizar\u00bb o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/utilizacion-javascript-mip\/\">Continua leyendo<span> Utilizaci\u00f3n lenguajes script &#8211; MIP<\/span><\/a><\/p>","protected":false},"author":4,"featured_media":77513,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Gu\u00eda inicial<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Javascript es el lenguaje de script nativo de la web. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d3de1-js1-1533890338-46.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:image {\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/645b4-js2-1533890439-37.jpg\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Su aprendizaje supone introducirse en un lenguaje de programaci\u00f3n, y aunque pueda parecer complicado de entrada, luego nos permitir\u00e1 saber c\u00f3mo modificar c\u00f3digo ya escrito o realizar visualizaciones muy atractivas mediante el uso de librer\u00edas y APIs que se basan en Javascript.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/0e98e-js3-1533890711-78.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><b>\u00bfPara qu\u00e9 nos sirve Javascript en un proyecto period\u00edstico?<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Para tener unas nociones generales sobre la programaci\u00f3n con scripts. <\/li><li>Para saber c\u00f3mo funciona, de forma global, la interactividad en la manipulaci\u00f3n de datos y de las visualizaciones.<\/li><li>Para comprender el c\u00f3digo resultante de los sistemas de datos y visualizaci\u00f3n, y saber manipular determinados par\u00e1metros. <\/li><li>Para comenzar a adentrarnos en la creaci\u00f3n de visualizaciones basadas en librer\u00edas JS como jQuery <\/li><li>Para hacer scraping de datos con Javascript (Jquery)&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Para trabajar con Javascript utilizaremos editores de c\u00f3digo online como <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JsFiddle.net<\/a>. Podr\u00e1s acceder a los ejemplos y ejercicios de dos formas: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A) A trav\u00e9s de los enlaces que encontrar\u00e1s en cada ejercicio y que te dar\u00e1n acceso al entorno online de edici\u00f3n:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4c615-js4-1533891129-19.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p> B) Manipular los ejemplos de forma directa a trav\u00e9s de objetos embebidos como este, en el que podr\u00e1s trabajar en las diferentes partes del c\u00f3digo accediendo a las diferentes pesta\u00f1as disponibles. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfQu\u00e9 es Javascript?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>\u00bfQu\u00e9 es?<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Un <b>lenguaje<\/b> de programaci\u00f3n <b>interpretado<\/b> por los navegadores en tiempo real. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c2ba4-js5-1533893491-16.jpg\" alt=\"Lenguajes compilados vs Lenguajes interpretados\"\/><figcaption>Lenguajes compilados vs Lenguajes interpretados<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Es un dialecto del est\u00e1ndar <a href=\"https:\/\/www.w3schools.com\/js\/js_es6.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ECMAScript<\/a> (versi\u00f3n 6)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Responde al modelo de P<a href=\"https:\/\/www.desarrolloweb.com\/articulos\/499.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">rogramaci\u00f3n orientada a objetos (POO)<\/a>. Aunque sigue el paradigma de programaci\u00f3n basado en objetos, trabaja con prototipos, aunque las versiones actuales permiten el manejo de <a href=\"https:\/\/medium.com\/@jmz12\/usando-clases-en-javascript-e07f0e25c67d\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">clases (class)<\/a>. Al trabajar bajo el modelo de POO usa t\u00e9cnicas que le dan una importante versatilidad como, por ejemplo:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>\n<b>Modularidad<\/b>. Las aplicaciones se pueden subdividir en partes, conocidas como m\u00f3dulos.<\/li><li>\n<b>Encapsulamiento<\/b>. Los datos se \"encapsulan\" o aislan para evitar que puedan ser manipulados o cambiados de estado.<\/li><li>\n<b>Control del DOM<\/b>. Permite interactuar con la p\u00e1gina web mediante <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Glossary\/DOM\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">DOM<\/a>\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Puede funcionar tanto: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>En el lado cliente (client-side) como parte del navegador web<\/li><li>En el lado servidor (vg. <a href=\"https:\/\/nodejs.org\/es\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>)<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"align\":\"center\",\"className\":\"aligncenter is-style-border\"} -->\n<div class=\"wp-block-group aligncenter is-style-border\"><!-- wp:paragraph -->\n<p>Aunque el nombre es similar a&nbsp;JAVA, tiene que ver poco con este otro lenguaje de programaci\u00f3n, tanto en las&nbsp;sem\u00e1nticas como en sus&nbsp;prop\u00f3sitos, que son&nbsp;diferentes, as\u00ed que debemos no confundirlos.&nbsp;&nbsp;<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ol>\n<li><i>Abre el editor de c\u00f3digo en <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JSFiddle<\/a> con <a href=\"https:\/\/jsfiddle.net\/gertrudix\/k9mgd2hL\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">el ejercicio<\/a>.<\/i><\/li>\n<li>\n<i>Revisa el c\u00f3digo html. F\u00edjate que el c\u00f3digo JS aparece en el fichero HTML. Prueba el resultado que produce el bot\u00f3n. \u00bfC\u00f3mo crees que funciona revisando el c\u00f3digo?<\/i>\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfD\u00f3nde aparece?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/55de3-js6-1533898857-79.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Javascript puede cargarse en la p\u00e1gina web a trav\u00e9s de diferentes opciones.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ol><li>\n<i>Abre el ejercicio en JSFiddle y f\u00edjate en las diferentes cajas para entender d\u00f3nde puede ubicarse el c\u00f3digo JS.<\/i>\n<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Depurando. Consola del navegador.<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>La consola del navegador nos permite revisar y depurar los errores de c\u00f3digo. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Todos los navegadores actuales disponen de ella. Para abrirla:&nbsp;&nbsp;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>En Chrome: Ctrl+Shift+J (Windows) o Cmd+Alt+I (Mac) <\/li><li>En Firefox: Control + \u21e7 + J (Windows)&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/210d9-js7-1533899311-62.png\" alt=\"Consola del navegador en Chrome\"\/><figcaption>Consola del navegador en Chrome<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Vamos a comprobar, a trav\u00e9s de la consola de Chrome, d\u00f3nde aparece Javascript.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li><i>Carga una p\u00e1gina, por ejemplo de un peri\u00f3dico como El Mundo o El Pa\u00eds. Abre la Consola mediante las funciones r\u00e1pidas que hemos visto anteriormente. Otra opci\u00f3n, es buscar en el men\u00fa del navegador. En el caso de Chrome: M\u00e1s herrramientas &gt; Herramientas para desarrolladores <\/i><\/li>\n<li>\n<i>F\u00edjate en la pesta\u00f1a Elements   -d\u00f3nde aparece las etiquetas de script. Localiza las etiquetas de script, la etiqueta <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Elemento\/noscript\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">noscript<\/a>, etc.<\/i>\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/25b5a-js8-1533899520-76.png\" alt=\"Ejemplo de c\u00f3digo en la consola del navegador\"\/><figcaption>Ejemplo de c\u00f3digo en la consola del navegador<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2>Utilidad de la consola. Para qu\u00e9 sirve.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>         <!--StartFragment-->La consola nos sirve para probar el funcionamiento de una p\u00e1gina o una aplicaci\u00f3n de forma que: a) podamos detectar errores de c\u00f3digo; y b) hacer pruebas con JS <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Permite: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Comprobar informaci\u00f3n sobre errores o alertas\n<\/li><li>Utilizar el inspector de c\u00f3digo para depurarlo\n<\/li><li>Ejecutar expresiones o comandos de JS&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/19e41-js9-1533899790-35.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfPara qu\u00e9 sirve Javascript?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Es un lenguaje que permite <b>dotar de interactividad<\/b> a las p\u00e1ginas web. Algunas de las tareas b\u00e1sicas que puede realizar son:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li>Escribir en HTML<\/li>\n<li>Reaccionar a eventos<\/li>\n<li>Modificar elementos HTML<\/li>\n<li>Validar entrada de datos<\/li>\n<li>Cambiar o modificar atributos\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Adem\u00e1s, mediante la <a href=\"http:\/\/html5index.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">API JS de HTML5 <\/a>podemos acceder a recursos adicionales: c\u00e1mara, almacenamiento de datos, creaci\u00f3n de gr\u00e1ficos, flujo de datos con servidores\u2026) <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"full\"} -->\n<figure class=\"wp-block-image alignfull\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/29104-jsapi-1573491833-95.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Permite acceder a informaci\u00f3n en internet: por ejemplo, buscar y obtener las palabras m\u00e1s populares en Twitter de un tema, o para hacer scraping de web utilizando soluciones como <a href=\"https:\/\/scotch.io\/tutorials\/scraping-the-web-with-node-js\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>, <a href=\"https:\/\/medialab.github.io\/artoo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Artoo.js<\/a> &nbsp;o <a href=\"http:\/\/nrabinowitz.github.io\/pjscrape\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">pjscrape<\/a>)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Tambi\u00e9n permite organizar y presentar datos como, por ejemplo, automatizar el trabajo de las hojas de c\u00e1lculo; o la visualizaci\u00f3n de datos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Veamos c\u00f3mo JS aporta interactividad a una web, <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li>Accede a la web de <a href=\"https:\/\/civio.es\/espana-en-llamas\/mapa-de-incendios-forestales\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Espa\u00f1a en Llamas<\/a>. Navega por el mapa, usa los filtros, etc. <\/li>\n<li>Ahora deshabilita Javascript desde las <a href=\"https:\/\/es.ccm.net\/faq\/26408-como-desactivar-javascript-en-google-chrome\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">opciones del navegador<\/a> o usando alguna herramienta como <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WebDevelopper Toolbar<\/a>. Comprueba qu\u00e9 sucede. \u00bfPuedes navegar el mapa? \u00bfCompartir en redes sociales? <\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Veremos ahora, en detalle, alguna de estas funciones.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>1. Escribir en HTML<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d95a1-js11-1533900998-81.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Una de las cosas que puede hacer JS es escribir contenido en HTML. Veamos <a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>1. Sobre el ejemplo anterior, a\u00f1ade un enlace a la home del peri\u00f3dico El Mundo (www.elmundo.es)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>2. Prueba a incluir otro enlace a otra web distinta.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>2. Reaccionar a eventos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1f0aa-js12-1533902831-33.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Otra funci\u00f3n es reaccionar a eventos creados por el usuario (hacer clic, pasar por encima de una zona...), por el propio navegador (cargar la p\u00e1gina), etc. como sucede en este ejemplo. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>1. Modifica el ejemplo anterior para que el mensaje de alerta muestre tu nombre.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/vpevk15L\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>3. Modificar contenido en HTML<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Otra funci\u00f3n es modificar contenido que ya est\u00e1 cargado en el html. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b228a-js13-1533903052-31.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p><b>Ejercicio<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo hay algo que no funciona. Rev\u00edsalo y ajusta lo que est\u00e9 mal para que funcione el cambio de contenido.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/3s9k2vtc\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/-->\n\n<!-- wp:paragraph {\"fontSize\":\"small\"} -->\n<p class=\"has-small-font-size\">El id no es correcto. Deben de tener el mismo nombre.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>4. Validar la entrada de datos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b3437-js14-1533931261-10.png\" alt=\"isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero\"\/><figcaption>isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero<\/figcaption><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Javascript es muy \u00fatil para validar si la entrada de datos en los campos de un formulario son los adecuados, aquellos que por formato o tipo se esperan recibir.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo, podemos comprobar si los datos que se introducen est\u00e1n comprendidos dentro de un rango. En caso contrario, saltar\u00e1 una alerta indicando que no son correctos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p><b>Ejercicio<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Modifica el ejemplo anterior para que la validaci\u00f3n sea para n\u00fameros comprendidos entre 10 y 20.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2k97b5wt\/16\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>5. Cambiar o modificar atributos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4236a-js15-1533935333-52.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Otra posibilidad es cambiar determinados atributos de los elementos html. Aqu\u00ed las posibilidades son muy amplias, dado que podemos modificar los valores de cualquier atributo, desde el color de un texto, el tipo de fuente, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo generamos un efecto de sustituci\u00f3n modificando el atributo src de una imagen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Modifica el valor del atributo src con estas im\u00e1genes que realizan un efecto de sustituci\u00f3n similar<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><p><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lighton.png<\/a><\/p><\/li><li><p><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png<\/a><\/p><\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2nwru4pe\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/-->\n\n<!-- wp:paragraph {\"fontSize\":\"small\"} -->\n<p class=\"has-small-font-size\">Enciende o apaga la luz (la primera imagen es el primer bot\u00f3n), la segunda es para img y el segundo bot\u00f3n<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfQu\u00e9 resultados produce?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Javascript utiliza varios procedimientos o displays de escritura:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Caja de alerta - <i>window.alert() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/kzf8grbg\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Salida html - <i>document.write() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/55eL53bx\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Elemento html - <i>inner.html() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/vLn56ddr\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Consola de navegador - <i>console.log() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/ov7vdpzf\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c98b4-js16-1533936074-39.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->","_et_gb_content_width":"1080","footnotes":""},"categories":[221],"tags":[],"class_list":["post-80281","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.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Utilizaci\u00f3n lenguajes script - MIP - 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\/utilizacion-javascript-mip\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilizaci\u00f3n lenguajes script - MIP - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"Conociendo JavaScript\u00a0 |\u00a0 Google Maps\u00a0 |\u00a0 Otras librer\u00edas de mapas\u00a0 |\u00a0 DataViz\u00a0 |\u00a0 Datos3D\u00a0 | ProfundizarConociendo JavaScript Cuando hablamos de un script, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) programa que sirve para &quot;rutinizar&quot; o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto&hellip; Continua leyendo Utilizaci\u00f3n lenguajes script &#8211; MIP\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/utilizacion-javascript-mip\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-27T17:46:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-28T16:00:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"539\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/utilizacion-javascript-mip\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/\"},\"author\":{\"name\":\"Manuel Gertrudix Barrio\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337\"},\"headline\":\"Utilizaci\u00f3n lenguajes script &#8211; MIP\",\"datePublished\":\"2022-04-27T17:46:22+00:00\",\"dateModified\":\"2022-04-28T16:00:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/\"},\"wordCount\":5724,\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg\",\"articleSection\":[\"banco-conocimiento\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/\",\"name\":\"Utilizaci\u00f3n lenguajes script - MIP - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg\",\"datePublished\":\"2022-04-27T17:46:22+00:00\",\"dateModified\":\"2022-04-28T16:00:11+00:00\",\"author\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337\"},\"breadcrumb\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg\",\"width\":1000,\"height\":539,\"caption\":\"JavaScript code in text editor. Coding cyberspace concept. Screen of web developing javascript code. Implementing SEO concepts for better SERP. HTML markup language closeup. Website design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/proyectos.comunicaciondigital.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Utilizaci\u00f3n lenguajes script &#8211; MIP\"}]},{\"@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=1774885201\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1774885201\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1774885201\",\"caption\":\"Manuel Gertrudix Barrio\"},\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/gertrudix\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Utilizaci\u00f3n lenguajes script - MIP - 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\/utilizacion-javascript-mip\/","og_locale":"en_GB","og_type":"article","og_title":"Utilizaci\u00f3n lenguajes script - MIP - Portal de proyectos multimedia","og_description":"Conociendo JavaScript\u00a0 |\u00a0 Google Maps\u00a0 |\u00a0 Otras librer\u00edas de mapas\u00a0 |\u00a0 DataViz\u00a0 |\u00a0 Datos3D\u00a0 | ProfundizarConociendo JavaScript Cuando hablamos de un script, un guion o una secuencia de comandos es un peque\u00f1o (a veces no tanto) programa que sirve para \"rutinizar\" o automatizar ciertas tareas, habitualmente repetitivas, que se precisan para que funcione un proyecto&hellip; Continua leyendo Utilizaci\u00f3n lenguajes script &#8211; MIP","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/utilizacion-javascript-mip\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2022-04-27T17:46:22+00:00","article_modified_time":"2022-04-28T16:00:11+00:00","og_image":[{"width":1000,"height":539,"url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg","type":"image\/jpeg"}],"author":"Manuel Gertrudix Barrio","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/"},"author":{"name":"Manuel Gertrudix Barrio","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"headline":"Utilizaci\u00f3n lenguajes script &#8211; MIP","datePublished":"2022-04-27T17:46:22+00:00","dateModified":"2022-04-28T16:00:11+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/"},"wordCount":5724,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg","articleSection":["banco-conocimiento"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/","url":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/","name":"Utilizaci\u00f3n lenguajes script - MIP - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg","datePublished":"2022-04-27T17:46:22+00:00","dateModified":"2022-04-28T16:00:11+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/4699e2d8a8c19b218ae2f96940a3c337"},"breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#primaryimage","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2018\/08\/intro-js.jpg","width":1000,"height":539,"caption":"JavaScript code in text editor. Coding cyberspace concept. Screen of web developing javascript code. Implementing SEO concepts for better SERP. HTML markup language closeup. Website design"},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/utilizacion-javascript-mip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"Utilizaci\u00f3n lenguajes script &#8211; MIP"}]},{"@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=1774885201","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1774885201","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/f3575d3bb447e8a94fb03b29e11fe081.jpg?ver=1774885201","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\/80281","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=80281"}],"version-history":[{"count":38,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/80281\/revisions"}],"predecessor-version":[{"id":80350,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/80281\/revisions\/80350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media\/77513"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=80281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=80281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=80281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}