<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-1551918663074177083</id><updated>2025-10-18T11:48:54.527-06:00</updated><category term="Tutorial"/><category term="Cultura Hacker"/><category term="Seguridad"/><category term="Hacker"/><category term="OffTopic"/><category term="Pensamientos"/><category term="Taller"/><category term="Css"/><category term="Frontend"/><category term="JavaScript"/><category term="html"/><category term="Apuntes"/><category term="CPJS"/><category term="Git"/><category term="GitHub"/><category term="Bitacora Del Capitan"/><category term="Linux"/><category term="webdev"/><category term="API"/><category term="Blockchain"/><category term="Code"/><category term="Criptomoneda"/><category term="Css Grid"/><category term="DIrección de Proyectos"/><category term="Daniel Kahneman"/><category term="Desarrollo Profesional"/><category term="Libros Recomendados"/><category term="Liderazgo"/><category term="PensamientoCrítico"/><category term="Pensar Rápido Pensar Despacio"/><category term="Productividad"/><category term="Psicología Cognitiva"/><category term="Sesgos Cognitivos"/><category term="Terminal"/><category term="Toma De Decisiones"/><category term="diseño"/><title type='text'>Soter Ramirez</title><subtitle type='html'>Si no lo consigues a la primera, llámalo versión 1.0</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default?max-results=5&amp;redirect=false'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default?start-index=6&amp;max-results=5&amp;redirect=false'/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>65</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>5</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-1551918663074177083.post-199671462491014953</id><published>2025-02-19T22:18:00.001-06:00</published><updated>2025-02-19T22:21:38.694-06:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Daniel Kahneman"/><category scheme="http://www.blogger.com/atom/ns#" term="Desarrollo Profesional"/><category scheme="http://www.blogger.com/atom/ns#" term="Libros Recomendados"/><category scheme="http://www.blogger.com/atom/ns#" term="Liderazgo"/><category scheme="http://www.blogger.com/atom/ns#" term="PensamientoCrítico"/><category scheme="http://www.blogger.com/atom/ns#" term="Pensar Rápido Pensar Despacio"/><category scheme="http://www.blogger.com/atom/ns#" term="Productividad"/><category scheme="http://www.blogger.com/atom/ns#" term="Psicología Cognitiva"/><category scheme="http://www.blogger.com/atom/ns#" term="Sesgos Cognitivos"/><category scheme="http://www.blogger.com/atom/ns#" term="Toma De Decisiones"/><title type='text'>Descifrando &quot;Pensar Rápido, Pensar Despacio&quot;: Claves para Potenciar la Toma de Decisiones</title><content type='html'>&lt;p data-end=&quot;647&quot; data-start=&quot;94&quot;&gt;&lt;strong data-end=&quot;245&quot; data-start=&quot;94&quot;&gt;¿Por qué en ocasiones tomamos decisiones brillantes con rapidez y, en otros momentos, cometemos errores evidentes a pesar de pensar cuidadosamente?&lt;/strong&gt;&lt;/p&gt;&lt;p data-end=&quot;647&quot; data-start=&quot;94&quot;&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5B1H9scJ_mKrbBsWOpWNI5lZNO33DMZ8bZt7TiXREHQzKycUkcHZZJnjx7dSw1sH53fDxkxD-gNtxnPK0UFCx2HzMDkhzAcirUvs6BriO20PA9Crz4XqPOCpDJcEXlCTL4mM59CHmAjAakXjvw4fgvWFBxjKhYeWLPax2CDUk7VQjOU6RVA6cZiEjgFE/s1024/DALL%C2%B7E%202025-02-19%2022.16.51%20-%20Two%20human%20profile%20silhouettes%20facing%20each%20other.%20The%20silhouette%20on%20the%20left%20is%20in%20warm%20tones%20(yellow,%20orange),%20symbolizing%20fast,%20intuitive%20thinking.%20T.webp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;1024&quot; data-original-width=&quot;1024&quot; height=&quot;400&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5B1H9scJ_mKrbBsWOpWNI5lZNO33DMZ8bZt7TiXREHQzKycUkcHZZJnjx7dSw1sH53fDxkxD-gNtxnPK0UFCx2HzMDkhzAcirUvs6BriO20PA9Crz4XqPOCpDJcEXlCTL4mM59CHmAjAakXjvw4fgvWFBxjKhYeWLPax2CDUk7VQjOU6RVA6cZiEjgFE/w400-h400/DALL%C2%B7E%202025-02-19%2022.16.51%20-%20Two%20human%20profile%20silhouettes%20facing%20each%20other.%20The%20silhouette%20on%20the%20left%20is%20in%20warm%20tones%20(yellow,%20orange),%20symbolizing%20fast,%20intuitive%20thinking.%20T.webp&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;b&gt;&lt;br data-end=&quot;248&quot; data-start=&quot;245&quot; /&gt;&lt;/b&gt;Esta es la gran pregunta que aborda Daniel Kahneman, psicólogo y Premio Nobel de Economía, en su influyente libro &lt;em data-end=&quot;387&quot; data-start=&quot;362&quot;&gt;Thinking, Fast and Slow&lt;/em&gt; (en español, &lt;em data-end=&quot;433&quot; data-start=&quot;401&quot;&gt;Pensar Rápido, Pensar Despacio&lt;/em&gt;). Sus hallazgos revelan cómo se divide nuestro razonamiento en dos sistemas: uno rápido, intuitivo y en gran medida automático (el denominado “Sistema 1”), y otro más reflexivo, lento y analítico (el “Sistema 2”).&lt;span&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;h3 data-end=&quot;713&quot; data-start=&quot;654&quot;&gt;Sistema 1 vs. Sistema 2: Dos Velocidades de Pensamiento&lt;/h3&gt;&lt;ul data-end=&quot;1269&quot; data-start=&quot;715&quot;&gt;&lt;li data-end=&quot;968&quot; data-start=&quot;715&quot;&gt;&lt;p data-end=&quot;756&quot; data-start=&quot;717&quot;&gt;&lt;strong data-end=&quot;754&quot; data-start=&quot;717&quot;&gt;Sistema 1 (Intuitivo y Emocional)&lt;/strong&gt;&lt;/p&gt;&lt;ul data-end=&quot;968&quot; data-start=&quot;759&quot;&gt;&lt;li data-end=&quot;809&quot; data-start=&quot;759&quot;&gt;Opera de manera automática, casi sin esfuerzo.&lt;/li&gt;&lt;li data-end=&quot;893&quot; data-start=&quot;812&quot;&gt;Emplea atajos mentales —o heurísticos— para llegar a conclusiones inmediatas.&lt;/li&gt;&lt;li data-end=&quot;968&quot; data-start=&quot;896&quot;&gt;Resulta muy útil en tareas cotidianas, pues ahorra tiempo y energía.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li data-end=&quot;1269&quot; data-start=&quot;970&quot;&gt;&lt;p data-end=&quot;1012&quot; data-start=&quot;972&quot;&gt;&lt;strong data-end=&quot;1010&quot; data-start=&quot;972&quot;&gt;Sistema 2 (Deliberado y Analítico)&lt;/strong&gt;&lt;/p&gt;&lt;ul data-end=&quot;1269&quot; data-start=&quot;1015&quot;&gt;&lt;li data-end=&quot;1078&quot; data-start=&quot;1015&quot;&gt;Es consciente, reflexivo y requiere de mayor concentración.&lt;/li&gt;&lt;li data-end=&quot;1181&quot; data-start=&quot;1081&quot;&gt;Se activa principalmente en problemas complejos o situaciones que demandan un análisis profundo.&lt;/li&gt;&lt;li data-end=&quot;1269&quot; data-start=&quot;1184&quot;&gt;Controla y corrige los impulsos del Sistema 1, pero consume mucha energía mental.&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p data-end=&quot;1468&quot; data-start=&quot;1271&quot;&gt;Kahneman describe cómo el cerebro prioriza la eficiencia y, por ello, solemos tomar decisiones intuitivas (Sistema 1), incluso en asuntos que podrían requerir un análisis más detallado (Sistema 2).&lt;/p&gt;&lt;hr data-end=&quot;1473&quot; data-start=&quot;1470&quot; /&gt;&lt;h3 data-end=&quot;1512&quot; data-start=&quot;1475&quot;&gt;El Poder de los Sesgos Cognitivos&lt;/h3&gt;&lt;p data-end=&quot;1664&quot; data-start=&quot;1514&quot;&gt;Cuando el Sistema 1 toma atajos mentales, inevitablemente caemos en sesgos o distorsiones que alteran nuestro juicio. Aquí algunos de los más comunes:&lt;/p&gt;&lt;ol data-end=&quot;2534&quot; data-start=&quot;1666&quot;&gt;&lt;li data-end=&quot;1938&quot; data-start=&quot;1666&quot;&gt;&lt;p data-end=&quot;1938&quot; data-start=&quot;1669&quot;&gt;&lt;strong data-end=&quot;1694&quot; data-start=&quot;1669&quot;&gt;Sesgo de Confirmación&lt;/strong&gt;&lt;br data-end=&quot;1697&quot; data-start=&quot;1694&quot; /&gt;Tendemos a buscar, valorar y recordar de manera selectiva solo aquella información que confirma nuestras creencias previas. En el ámbito laboral, esto puede llevar a subestimar riesgos o a ignorar datos que indiquen un problema inminente.&lt;/p&gt;&lt;/li&gt;&lt;li data-end=&quot;2205&quot; data-start=&quot;1940&quot;&gt;&lt;p data-end=&quot;2205&quot; data-start=&quot;1943&quot;&gt;&lt;strong data-end=&quot;1963&quot; data-start=&quot;1943&quot;&gt;Sesgo de Anclaje&lt;/strong&gt;&lt;br data-end=&quot;1966&quot; data-start=&quot;1963&quot; /&gt;Nos aferramos con demasiada fuerza a la primera información que recibimos. Por ejemplo, en una negociación salarial, la primera cifra que se mencione (aunque sea arbitraria) puede influir desproporcionadamente en la discusión posterior.&lt;/p&gt;&lt;/li&gt;&lt;li data-end=&quot;2534&quot; data-start=&quot;2207&quot;&gt;&lt;p data-end=&quot;2534&quot; data-start=&quot;2210&quot;&gt;&lt;strong data-end=&quot;2251&quot; data-start=&quot;2210&quot;&gt;Efecto de Arrastre (Bandwagon Effect)&lt;/strong&gt;&lt;br data-end=&quot;2254&quot; data-start=&quot;2251&quot; /&gt;Nos dejamos llevar por la opinión de la mayoría o por las tendencias del momento, aun cuando la evidencia sugiera otra cosa. En marketing y finanzas, esto puede manifestarse en “modas” que atraen multitud de inversores o consumidores, aunque no siempre con fundamentos sólidos.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;hr data-end=&quot;2539&quot; data-start=&quot;2536&quot; /&gt;&lt;h3 data-end=&quot;2580&quot; data-start=&quot;2541&quot;&gt;“WYSIATI”: La Coherencia que Engaña&lt;/h3&gt;&lt;p data-end=&quot;3046&quot; data-start=&quot;2582&quot;&gt;Kahneman introduce el concepto de “What You See Is All There Is” (WYSIATI), que describe nuestra tendencia a basar juicios y decisiones únicamente en la información que tenemos a mano, asumiendo que esa pequeña parte es todo lo que existe o todo lo que importa. Este sesgo de disponibilidad puede resultar especialmente peligroso en la resolución de problemas empresariales, ya que pasamos por alto variables o datos que no están fácilmente visibles en el momento.&lt;/p&gt;&lt;p data-end=&quot;3373&quot; data-start=&quot;3048&quot;&gt;&lt;strong data-end=&quot;3069&quot; data-start=&quot;3048&quot;&gt;Ejemplo práctico:&lt;/strong&gt;&lt;br data-end=&quot;3072&quot; data-start=&quot;3069&quot; /&gt;Si un equipo de ventas logra cifras de crecimiento notables en un trimestre, el directivo podría asumir que todo está funcionando perfectamente. Sin embargo, tal vez existan factores externos —como una tendencia de mercado temporal— que expliquen ese rendimiento, y que no se mantendrán a largo plazo.&lt;/p&gt;&lt;hr data-end=&quot;3378&quot; data-start=&quot;3375&quot; /&gt;&lt;h3 data-end=&quot;3422&quot; data-start=&quot;3380&quot;&gt;Consecuencias en la Toma de Decisiones&lt;/h3&gt;&lt;ol data-end=&quot;3780&quot; data-start=&quot;3424&quot;&gt;&lt;li data-end=&quot;3606&quot; data-start=&quot;3424&quot;&gt;&lt;strong data-end=&quot;3460&quot; data-start=&quot;3427&quot;&gt;Impulso a la Acción Imprecisa&lt;/strong&gt;&lt;br data-end=&quot;3463&quot; data-start=&quot;3460&quot; /&gt;Cuando utilizamos el Sistema 1 en situaciones que ameritan análisis, podemos tomar decisiones apresuradas o dejar pasar señales de alerta.&lt;/li&gt;&lt;li data-end=&quot;3780&quot; data-start=&quot;3607&quot;&gt;&lt;strong data-end=&quot;3645&quot; data-start=&quot;3610&quot;&gt;Sobrecarga Mental del Sistema 2&lt;/strong&gt;&lt;br data-end=&quot;3648&quot; data-start=&quot;3645&quot; /&gt;Si lo usamos en exceso, corremos el riesgo de un agotamiento cognitivo que podría mermar la capacidad de juicio y la creatividad.&lt;/li&gt;&lt;/ol&gt;&lt;p data-end=&quot;4045&quot; data-start=&quot;3782&quot;&gt;Por ello, la clave es saber reconocer cuándo vale la pena “activar” el Sistema 2. Del mismo modo que un experto conductor cambia de marcha según las condiciones de la carretera, un buen decisor alterna estratégicamente entre el pensamiento rápido y el deliberado.&lt;/p&gt;&lt;hr data-end=&quot;4050&quot; data-start=&quot;4047&quot; /&gt;&lt;h3 data-end=&quot;4109&quot; data-start=&quot;4052&quot;&gt;Estrategias para Mejorar la Calidad de las Decisiones&lt;/h3&gt;&lt;ul data-end=&quot;5079&quot; data-start=&quot;4111&quot;&gt;&lt;li data-end=&quot;4329&quot; data-start=&quot;4111&quot;&gt;&lt;p data-end=&quot;4329&quot; data-start=&quot;4113&quot;&gt;&lt;strong data-end=&quot;4148&quot; data-start=&quot;4113&quot;&gt;Formalizar Procesos de Análisis&lt;/strong&gt;&lt;br data-end=&quot;4151&quot; data-start=&quot;4148&quot; /&gt;Crear procedimientos estandarizados para recopilar información y evaluar alternativas, reduciendo el margen de error que provoca la toma de decisiones intuitivas sin contraste.&lt;/p&gt;&lt;/li&gt;&lt;li data-end=&quot;4576&quot; data-start=&quot;4331&quot;&gt;&lt;p data-end=&quot;4576&quot; data-start=&quot;4333&quot;&gt;&lt;strong data-end=&quot;4366&quot; data-start=&quot;4333&quot;&gt;Invitar Perspectivas Externas&lt;/strong&gt;&lt;br data-end=&quot;4369&quot; data-start=&quot;4366&quot; /&gt;Consultar a colegas, expertos u otras partes interesadas para obtener una visión más amplia de un problema. El debate y la retroalimentación pueden revelar puntos ciegos originados por sesgos individuales.&lt;/p&gt;&lt;/li&gt;&lt;li data-end=&quot;4823&quot; data-start=&quot;4578&quot;&gt;&lt;p data-end=&quot;4823&quot; data-start=&quot;4580&quot;&gt;&lt;strong data-end=&quot;4618&quot; data-start=&quot;4580&quot;&gt;Practicar el &quot;Pensamiento Crítico&quot;&lt;/strong&gt;&lt;br data-end=&quot;4621&quot; data-start=&quot;4618&quot; /&gt;Antes de llegar a una conclusión, pregúntate: “¿Qué información no estoy considerando?”, “¿Estoy aferrándome a un dato inicial de forma excesiva?”, “¿Qué pasaría si mis suposiciones fueran erróneas?”.&lt;/p&gt;&lt;/li&gt;&lt;li data-end=&quot;5079&quot; data-start=&quot;4825&quot;&gt;&lt;p data-end=&quot;5079&quot; data-start=&quot;4827&quot;&gt;&lt;strong data-end=&quot;4861&quot; data-start=&quot;4827&quot;&gt;Diseñar Escenarios Hipotéticos&lt;/strong&gt;&lt;br data-end=&quot;4864&quot; data-start=&quot;4861&quot; /&gt;Examina posibles variantes de un plan o proyecto, contemplando factores externos y datos futuros que no sean evidentes en el presente. El uso de simulaciones o análisis de riesgos puede ayudar a anticipar errores.&lt;/p&gt;&lt;/li&gt;&lt;/ul&gt;&lt;hr data-end=&quot;5084&quot; data-start=&quot;5081&quot; /&gt;&lt;h3 data-end=&quot;5100&quot; data-start=&quot;5086&quot;&gt;Conclusión&lt;/h3&gt;&lt;p data-end=&quot;5505&quot; data-start=&quot;5102&quot;&gt;La obra de Kahneman nos recuerda que &lt;strong data-end=&quot;5228&quot; data-start=&quot;5139&quot;&gt;la eficiencia y la intuición no siempre van de la mano con la precisión y el análisis&lt;/strong&gt;. Aunque nuestro Sistema 1 es esencial para navegar con agilidad el día a día, es importante reconocer sus limitaciones. Cuando la situación lo amerite —especialmente en decisiones estratégicas de gran impacto— debemos invocar el pensamiento más lento y deliberado (Sistema 2).&lt;/p&gt;&lt;p data-end=&quot;5938&quot; data-is-last-node=&quot;&quot; data-is-only-node=&quot;&quot; data-start=&quot;5507&quot;&gt;Al estar conscientes de nuestros sesgos y al diseñar mecanismos para mitigar sus efectos, nos convertimos en profesionales y líderes más efectivos. En un mundo donde la información crece de manera exponencial y la competitividad exige un análisis constante, aplicar los principios de &lt;em data-end=&quot;5823&quot; data-start=&quot;5791&quot;&gt;Pensar Rápido, Pensar Despacio&lt;/em&gt; puede marcar la diferencia entre el éxito y el fracaso de un proyecto, una inversión o incluso una carrera entera.&lt;/p&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Saludos amigos lectores!!! &lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/199671462491014953/comments/default' title='Comentarios de la entrada'/><link rel='replies' type='text/html' href='http://blog.soterramirez.dev/2025/02/descifrando-pensar-rapido-pensar.html#comment-form' title='0 Comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/199671462491014953'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/199671462491014953'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/2025/02/descifrando-pensar-rapido-pensar.html' title='Descifrando &quot;Pensar Rápido, Pensar Despacio&quot;: Claves para Potenciar la Toma de Decisiones'/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5B1H9scJ_mKrbBsWOpWNI5lZNO33DMZ8bZt7TiXREHQzKycUkcHZZJnjx7dSw1sH53fDxkxD-gNtxnPK0UFCx2HzMDkhzAcirUvs6BriO20PA9Crz4XqPOCpDJcEXlCTL4mM59CHmAjAakXjvw4fgvWFBxjKhYeWLPax2CDUk7VQjOU6RVA6cZiEjgFE/s72-w400-h400-c/DALL%C2%B7E%202025-02-19%2022.16.51%20-%20Two%20human%20profile%20silhouettes%20facing%20each%20other.%20The%20silhouette%20on%20the%20left%20is%20in%20warm%20tones%20(yellow,%20orange),%20symbolizing%20fast,%20intuitive%20thinking.%20T.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1551918663074177083.post-9136530078372628692</id><published>2022-06-15T11:18:00.388-05:00</published><updated>2022-06-15T11:18:00.185-05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Apuntes"/><category scheme="http://www.blogger.com/atom/ns#" term="CPJS"/><category scheme="http://www.blogger.com/atom/ns#" term="Frontend"/><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>CPJS: Scope</title><content type='html'>&lt;div style=&quot;text-align: center;&quot;&gt;
  &lt;a href=&quot;#&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EC_ZtsE5x2Kaw8RUZZ0IICyS4CLDLaS9CAMwR_z-9OXTtXz2n0Ri_eFaiEVQCLJmzr9FTNn6ZQMHJt0-TZSVmmRVoFd--guTB4o8ctsw4o370VvdFIn2hUkjTH3Ju6rcQZ-m2xjKgjDeUOQWZbYD9LHp_mPv1einOABYYT3TiY3ujKXYIcWpfisN/w640-h360/blog.soterramirez.dev%20(2).png&quot; /&gt;&lt;/a&gt;
&lt;/div&gt;&lt;div style=&quot;text-align: center;&quot;&gt;&lt;blockquote&gt;El Scope o ámbito es lo que define el tiempo de vida de una variable, en qué partes de nuestro código pueden ser usadas.&lt;span&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;/span&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;h1&gt;Scope&lt;/h1&gt;
&lt;p&gt;
  &lt;i&gt;Scope o ámbito de una variable&lt;/i&gt; representa el tiempo de vida en el que
  esta existe, puede ser una variable que hayamos definido o el argumento a un
  función. Eso es muy importante por que evite que reescribamos el valor de una
  variable que ya habíamos definido. Por desgracia JavaScript no siempre tuve el
  mejor sistema de scope de variables, en el libro JavaScript: The Good Parts de
  Douglas Crockford se dice que el scope y variables globales son de las cosas
  más horrible que tiene el lenguaje. Por suerte esto a mejorado muchísimo,
  ahora tenemos a let y const que nos ayuda a evitar estos problemas.
&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
&lt;h2&gt;Scope global&lt;/h2&gt;
&lt;p&gt;
  Vamos a hacer algunas pruebas en el código para experimentar con estas
  variables.
&lt;/p&gt;
&lt;p&gt;
  Si declaramos un var de la siguiente forma lo estaríamos haciendo globalmente.
&lt;/p&gt;
&lt;code&gt; 1 var message = &quot;¡Hello, Soter!&quot;; &lt;/code&gt;&lt;br /&gt;
&lt;p&gt;
  Si vamos a la consola y escribimos windows.message no da el mensaje que
  guardamos en la consola. Windows es nuestro ámbito global.
&lt;/p&gt;
&lt;p&gt;
  Si agregamos una CDN externo como jQuery podremos acceder a ese código
  globalmente. El peligro está en cambiar alguna característica del CDN global
  que trajimos.
&lt;/p&gt;
&lt;code&gt;1 var message = &quot;¡Hello, Soter!&quot;;&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;2 var $ = function(message) {     &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;3 console.log(&quot;Say: &quot; + message); &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;4}                                &lt;/code&gt;&lt;br /&gt;
&lt;p&gt;Si escribimos en la consola lo siguiente nos dará el resultado...&lt;/p&gt;
&lt;code&gt;1 $(&#39;Hola&#39;)   &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;2// Say: Hola &lt;/code&gt;&lt;br /&gt;
&lt;p&gt;Vimos que cambiamos por completo el acceso a elementos de jQuery, pero también nos dimos cuenta de que el message no era:
&lt;code&gt;¡Hello, Soter!&lt;/code&gt; si no Hola, a esto se le llama: &lt;b&gt;Scope definition&lt;/b&gt;.&lt;/p&gt;
&lt;br /&gt;
&lt;p&gt;Ahora hagamos otro ejemplo,una función que imprimirá números.&lt;/p&gt;
&lt;code&gt;1 function printNumbers(params) { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;2 for (var i = 0; i &amp;lt; 10; i++) { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;3 setTimeout(() =&amp;gt; { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;4 console.log(i) &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;5 }, 100);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;6 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;7 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;8&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;9 printNumbers() &lt;/code&gt;&lt;br /&gt;
&lt;p&gt;Crea un ciclo de 10 número del 0 al 9 y va a tener un retardo de 100ms, pero si ejecutamos este código pasa algo extraño:&lt;/p&gt;
  &lt;code&gt;1 // (10) 10&lt;/code&gt;&lt;br /&gt;
  &lt;p&gt;Se imprime 10 veces 10 y eso no es lo que queremos.&lt;/p&gt;
&lt;p&gt;Esto pasa por function scope, algo pasa con la variables var, pasa que el lenguaje lo declara
como variable global y cuando llega el turno de imprimir el valor de i resulta
que ya tiene 10. Se soluciona llamando a una función en el ciclo que ejecute el
  setTimeOut.&lt;/p&gt;
&lt;code&gt;1 function printNumbers(params) {&lt;/code&gt;&lt;br /&gt; 
&lt;code&gt;2 for (var i = 0; i &amp;lt; 10; i++) { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;3 function eventuallyPrintNumbers(n) {&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;4 setTimeout(() =&amp;gt; {&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;5 console.log(n)&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;6 }, 100);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;7 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;8 eventuallyPrintNumbers(i)&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;9 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;10 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;11&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;12 printNumbers()&lt;/code&gt;&lt;br /&gt;
&lt;p&gt;Haciéndolo así var conserva su valor real por cada ciclo. El valor i paso a un
  scope n totalmente nuevo.&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
  &lt;h2&gt;Block scope&lt;/h2&gt;
  &lt;p&gt;Con las nuevas actualizaciones tenemos acceso a una variable que trabaja en el bloque de ejecución, siempre recordando su valor.&lt;/p&gt;
&lt;code&gt;1 function printNumbers(params) {&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;2 for (let i = 0; i &amp;lt; 10; i++) {&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;3 setTimeout(() =&amp;gt; {&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;4 console.log(i);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;5 }, 100);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;6 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;7 }&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;8&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;9 printNumbers();&lt;/code&gt;&lt;br /&gt;
  &lt;h2&gt;&lt;br /&gt;&lt;/h2&gt;&lt;h2&gt;Module scope&lt;/h2&gt;
 &lt;p&gt; Es probable que lo hayamos usado en Node o en React usando herramientas como Babel. Lo que hace es que el scope de esa variable se limite al archivo donde está definido.&lt;/p&gt;
&lt;code&gt;1 script type=&quot;module&quot; src=&quot;./assets/index.js&quot; &lt;/code&gt;&lt;br /&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt; El &lt;code&gt;type=&quot;module&quot;&lt;/code&gt; declara que el archivo es un módulo. Esto no está en
todos los navegadores pero sí en los más modernos. Ya no podemos acceder a las
  variables globales de este archivo desde la consola.&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
  &lt;h2&gt;Importar y exportar&lt;/h2&gt;
  &lt;p&gt;Podemos separar código que esté en un archivo js usando export e import. En nuestro archivo &lt;code&gt;./assets/index.js&lt;/code&gt; separaremos el código que usar nuestro media player en otro archivo llamado MediaPlayer.&lt;/p&gt;
  &lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;Nuestro archivo &lt;code&gt;index.js&lt;/code&gt; tendrá:&lt;/p&gt;
&lt;code&gt;  1 import MediaPlayer from &quot;./MediaPlayer.js&quot;;&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  2 const video = document.querySelector(&quot;video&quot;);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  3 const button = document.querySelector(&quot;button&quot;);&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  4&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  5 &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  6 const player = new MediaPlayer({ el:video }); &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  7 &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  8 button.onclick = () =&amp;gt; player.play();&lt;/code&gt;&lt;br /&gt;
  &lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt; Y el archivo MediaPlayer.js:&lt;/p&gt;
&lt;code&gt;  1 function MediaPlayer(config) { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  2 this.media = config.el; &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  3 } &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  4&lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  5 MediaPlayer.prototype.play = function() { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  6 // if(this.media.paused){ &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  7 //this.media.play(); &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  8 // } else { &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  9 // this.media.pause() &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  10 // } &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  11 // o podemos usar lo siguiente: &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  12 this.media.paused ? this.media.play() : this.media.pause(); &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  13 }; &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  14 &lt;/code&gt;&lt;br /&gt;
&lt;code&gt;  15 export default MediaPlayer;&lt;/code&gt;&lt;br /&gt;
 &lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt; Si exportamos una variable del archivo importado, ejemplo: &lt;code&gt;export const foo = &quot;hi&quot;&lt;/code&gt;,
   entonces tendríamos que importarlo de la siguiente forma:&lt;/p&gt;&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
  &lt;code&gt;1 import MediaPlayer,  { foo } from &quot;./MediaPlayer.js&quot;;&lt;/code&gt;&lt;br /&gt;
  &lt;p&gt;Entre llaves.&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&lt;/p&gt;&lt;p&gt;El scope es el lugar de vida de una variable y nos evita sobrescribir el valor de esta. En JavaScript tenemos cuatro:&lt;/p&gt;
  &lt;ul&gt;1. &lt;b&gt;Global scope&lt;/b&gt;:&amp;nbsp;Variables disponibles de forma global se usa la palabra var, son accesibles por todos los scripts que se cargan en la página. Aquí hay mucho riesgo de sobreescritura&lt;/ul&gt;
  &lt;ul&gt;2. &lt;b&gt;Function scope&lt;/b&gt;:&amp;nbsp;Variables declaradas dentro de una función sólo visibles dentro de ella misma (incluyendo los argumentos que se pasan a la función).&lt;/ul&gt; 
  &lt;ul&gt;3. &lt;b&gt;Block scope&lt;/b&gt;:&amp;nbsp;Variables definidas dentro de un bloque, por ejemplo variables declaradas dentro un loop while o for. Se usa let y const para declarar este tipo de variables.&lt;/ul&gt;
  &lt;ul&gt;4. &lt;b&gt;Module scope&lt;/b&gt;:&amp;nbsp;cuándo se denota un script de tipo module con el atributo type=&quot;module las variables son limitadas al archivo en el que están declaradas.&lt;/ul&gt;&lt;div&gt;Esto va a declarar que este archivo es un módulo. Esto no está en todos los navegadores pero sí en los más modernos. Los valores que teníamos escritos ahora no los vamos a poder leer en consola porque el module scope está limitando el alcance&lt;/div&gt;
&lt;div class=&quot;blogger-post-footer&quot;&gt;Saludos amigos lectores!!! &lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/9136530078372628692/comments/default' title='Comentarios de la entrada'/><link rel='replies' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-scope.html#comment-form' title='0 Comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/9136530078372628692'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/9136530078372628692'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-scope.html' title='CPJS: Scope'/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EC_ZtsE5x2Kaw8RUZZ0IICyS4CLDLaS9CAMwR_z-9OXTtXz2n0Ri_eFaiEVQCLJmzr9FTNn6ZQMHJt0-TZSVmmRVoFd--guTB4o8ctsw4o370VvdFIn2hUkjTH3Ju6rcQZ-m2xjKgjDeUOQWZbYD9LHp_mPv1einOABYYT3TiY3ujKXYIcWpfisN/s72-w640-h360-c/blog.soterramirez.dev%20(2).png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1551918663074177083.post-254273441388576639</id><published>2022-06-14T12:21:00.000-05:00</published><updated>2022-06-14T12:21:17.045-05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Apuntes"/><category scheme="http://www.blogger.com/atom/ns#" term="CPJS"/><category scheme="http://www.blogger.com/atom/ns#" term="Frontend"/><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>CPJS: ¿Cómo llega el script al navegador?</title><content type='html'>&lt;p&gt;&lt;/p&gt;&lt;p style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOW_gXuUdrk0vkZI2SN3EbhktUNxoulcS8TAOXenPRYMtjRb5cVr3TezNhheF5fJdXJTAooMY1nrIBvDCrIVOJU_X--AhN7PRT7gvvL5w2dXHbEjoJ1np6xfQ1cIwNomKWJtZTpJjfMdWGbtsS32fpwNlfx0kdZefhDj0zJOHYPhycthQrjg8T51oH/s2240/blog.soterramirez.dev.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;1260&quot; data-original-width=&quot;2240&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOW_gXuUdrk0vkZI2SN3EbhktUNxoulcS8TAOXenPRYMtjRb5cVr3TezNhheF5fJdXJTAooMY1nrIBvDCrIVOJU_X--AhN7PRT7gvvL5w2dXHbEjoJ1np6xfQ1cIwNomKWJtZTpJjfMdWGbtsS32fpwNlfx0kdZefhDj0zJOHYPhycthQrjg8T51oH/w640-h360/blog.soterramirez.dev.png&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;h1 style=&quot;clear: both; text-align: center;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;DOM&lt;/span&gt;&lt;/h1&gt;&lt;div style=&quot;text-align: left;&quot;&gt;DOM = Document object model&lt;/div&gt;&lt;span&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;/span&gt;&lt;div style=&quot;text-align: left;&quot;&gt;Es la representación que hace el &lt;b&gt;navegador&lt;/b&gt;&amp;nbsp;de un documento &lt;b&gt;HTML&lt;/b&gt;.&lt;/div&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;br /&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;/p&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;label style=&quot;background: 0px 0px; border: 0px; margin: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;index.html&lt;/span&gt;&lt;/label&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
   &amp;lt;head&amp;gt;
      &amp;lt;title&amp;gt;DOOM&amp;lt;/title&amp;gt;
   &amp;lt;/head&amp;gt;
   &amp;lt;body&amp;gt;
         &amp;lt;h1&amp;gt;DOM&amp;lt;/h1&amp;gt;
         &amp;lt;p&amp;gt;Cuando llega el HTML al navegador (browser), este lo empieza a&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;a pasar: va leyendo cada etiqueta y va creando el DOM.&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Cuando este proceso termina por completo es cuando obtenemos el evento&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;code&amp;gt;DOMContentLoaded&amp;lt;/code&amp;gt;&amp;lt;/p&amp;gt;
   &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-html&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;div style=&quot;text-align: left;&quot;&gt;&lt;/div&gt;&lt;p style=&quot;text-align: left;&quot;&gt;Cuando el navegador recibe este archivo &lt;b&gt;lo tiene que convertir&lt;/b&gt;&amp;nbsp;en una estructura parecida a un &lt;b&gt;árbol&lt;/b&gt;.&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQSqLzhHyl09CufcqfRN31Ly7PUie3hSktt3o8dKru7GL9f19T7yc4zi5dS0lw368c9jKv8p1O0U9KXnc-1LAeS9Q7mVydKn-cKhAg5spz1o-eGMSpjqFV3MDIKIJM67G9gSlbQ6FhFquE_Zoiyp7hM-bHSwu6egbEwsIS0E9TIQgoafIiM8hksMT/s1024/Esto%20es%20lo%20que%20se%20conoce%20como%20DOM.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;768&quot; data-original-width=&quot;1024&quot; height=&quot;480&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQSqLzhHyl09CufcqfRN31Ly7PUie3hSktt3o8dKru7GL9f19T7yc4zi5dS0lw368c9jKv8p1O0U9KXnc-1LAeS9Q7mVydKn-cKhAg5spz1o-eGMSpjqFV3MDIKIJM67G9gSlbQ6FhFquE_Zoiyp7hM-bHSwu6egbEwsIS0E9TIQgoafIiM8hksMT/w640-h480/Esto%20es%20lo%20que%20se%20conoce%20como%20DOM.png&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;p&gt;&lt;br /&gt;Cuando termina el navegador de convertirlo al DOM, ocurre el evento: DOMContentLoaded, a partir de este punto tenemos la garantía de que todo nuestro documento se ha cargado.&lt;/p&gt;EN RESUMEN: DOMContentLoaded – el navegador HTML está completamente cargado y el árbol DOM está construido, pero es posible que los recursos externos como &amp;lt;img&amp;gt; y hojas de estilo aún no se hayan cargado. load – no solo se cargó el HTML, sino también todos los recursos externos: imágenes, estilos, etc. &lt;br /&gt;&lt;br /&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLZ1BYVPMY09vLaKYKSaPNkuZyV8kx_LIJWsLakpIElD-5tBYbGmrwtzXxr2531miLV0aXOLsYruG89j_VKJ_2iioPEog13ia4A34uN_iGMzw-3sJHMyyFQ6uA-oR2Rjxga_Ot-z8DCKtoU2SFMYyPIWdYQ6nVJa5uxYnU4KMsmg34FtAwEQ1_JoY/s1920/SCRIPTS%20EXTERNOS%20O%20EMBEBIDOS.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;480&quot; data-original-width=&quot;1920&quot; height=&quot;160&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLZ1BYVPMY09vLaKYKSaPNkuZyV8kx_LIJWsLakpIElD-5tBYbGmrwtzXxr2531miLV0aXOLsYruG89j_VKJ_2iioPEog13ia4A34uN_iGMzw-3sJHMyyFQ6uA-oR2Rjxga_Ot-z8DCKtoU2SFMYyPIWdYQ6nVJa5uxYnU4KMsmg34FtAwEQ1_JoY/w640-h160/SCRIPTS%20EXTERNOS%20O%20EMBEBIDOS.png&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;p style=&quot;text-align: center;&quot;&gt;&lt;span&gt;SCRIPTS EXTERNOS O EMBEBIDOS&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;Todo script que carguemos en nuestra página tiene un llamado y una ejecución. Cuando el DOM se está procesando va a detener todo el procesamiento, siempre y cuando se encuentre la etiqueta &lt;b&gt;&amp;lt;script&amp;gt;&lt;/b&gt;&lt;/p&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;label style=&quot;background: 0px 0px; border: 0px; margin: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Por ejemplo&lt;/span&gt;&lt;/label&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;Estos script pueden ser externos o internos&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;/*Cuando esto ocurre no se va a leer ningún otro tipo de elementos*&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;**del HTML, hasta que acabemos con el script.                     */&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;p&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;Soy un párrafo que no se puede ejecutar, hasta que acabe&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;el script de arriba.&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;Por lo tanto es muy importante en qué lugar colocamos nuestros scripts.&lt;/span&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;H1&amp;gt;Hola que hace, cargando rapido&amp;lt;/H1&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;p&amp;gt;&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;Soy un párrafo que si se puede ejecutar, porque&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;el script está abajo.&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;nbsp;El mejor lugar para colocar cualquier script, antes del cierre del body&lt;br /&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;nbsp;&amp;nbsp; &amp;nbsp;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;code style=&quot;background: 0px 0px rgb(249, 242, 244); border-radius: 4px; border: 0px; color: #c7254e; margin: 0px; outline: 0px; padding: 2px 4px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;...&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; color: #222222; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; text-align: left; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;font-size: small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span&gt;Tanto con async como defer podemos hacer llamados asíncronos, pero tiene sus&lt;br /&gt;&lt;/span&gt;&lt;span&gt;diferencias:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;async. Con async podemos hacer la petición de forma asíncrona y no vamos a
&lt;/span&gt;detener la carga del DOM hasta que se haga la ejecución del código.&lt;/li&gt;&lt;/ul&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;defer. La petición es igual, asíncrona como en el async pero va a diferir la&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;ejecución del Javascript hasta el final de que se cargue todo el documento.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;scripts embebidos: el navegador carga línea a línea el HTML y cuando se&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;encuentra un código entre scripts va a detener su ejecución hasta que haya&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul style=&quot;text-align: left;&quot;&gt;&lt;li style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;procesado todo el script.&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;p style=&quot;text-align: left;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span&gt;&lt;span&gt;Hay que tener en cuenta que, cuando carga una página y se encuentra un script a&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;ejecutar, toda la carga se detiene. Por eso se recomienda agregar tus scripts justo&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;span&gt;antes de cerrar el body para que todo el documento &lt;/span&gt;esté&lt;span&gt; disponible.&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;/pre&gt;&lt;/pre&gt;&lt;pre class=&quot;code code-javascript&quot; style=&quot;background: 0px 0px rgb(255, 255, 255); border: 0px; margin-bottom: 0px; margin-top: 0px; outline: 0px; padding: 0px; transition: all 0.3s ease 0s; vertical-align: baseline;&quot;&gt;&lt;/pre&gt;&lt;/pre&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Saludos amigos lectores!!! &lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/254273441388576639/comments/default' title='Comentarios de la entrada'/><link rel='replies' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-como-llega-el-script-al-navegador.html#comment-form' title='0 Comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/254273441388576639'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/254273441388576639'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-como-llega-el-script-al-navegador.html' title='CPJS: ¿Cómo llega el script al navegador?'/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOW_gXuUdrk0vkZI2SN3EbhktUNxoulcS8TAOXenPRYMtjRb5cVr3TezNhheF5fJdXJTAooMY1nrIBvDCrIVOJU_X--AhN7PRT7gvvL5w2dXHbEjoJ1np6xfQ1cIwNomKWJtZTpJjfMdWGbtsS32fpwNlfx0kdZefhDj0zJOHYPhycthQrjg8T51oH/s72-w640-h360-c/blog.soterramirez.dev.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1551918663074177083.post-4223716242811067726</id><published>2022-06-13T13:25:00.000-05:00</published><updated>2022-06-13T13:25:03.688-05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Apuntes"/><category scheme="http://www.blogger.com/atom/ns#" term="CPJS"/><category scheme="http://www.blogger.com/atom/ns#" term="Frontend"/><category scheme="http://www.blogger.com/atom/ns#" term="JavaScript"/><title type='text'>CPJS: ¿Qué significa ser un profesional de JavaScript?</title><content type='html'>&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimU5Iq_Pm5_SavK4WrqXsN_ZrEjhGgwQQH7lemDW9c_Oi6KrtQTAB3q5m4pFvTjuit08DppiBYiI-vaH56BxFjZHKhSYyqtKwPNPrDYh05Q3UdETUEa8vkvRkgzRvaKbOIZylLNUpYScHysi3cMRMS2v8XX0NZGF__X2bZIJLPgQlHmFZqDhSLC3Nw/s1398/meme_js.webp&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; data-original-height=&quot;1398&quot; data-original-width=&quot;1080&quot; height=&quot;640&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimU5Iq_Pm5_SavK4WrqXsN_ZrEjhGgwQQH7lemDW9c_Oi6KrtQTAB3q5m4pFvTjuit08DppiBYiI-vaH56BxFjZHKhSYyqtKwPNPrDYh05Q3UdETUEa8vkvRkgzRvaKbOIZylLNUpYScHysi3cMRMS2v8XX0NZGF__X2bZIJLPgQlHmFZqDhSLC3Nw/w494-h640/meme_js.webp&quot; width=&quot;494&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;p&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere; text-align: justify;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;El camino para llegar a ser profesional es largo y duro, no es fácil. Todos necesitamos que nos guíen para saber qué hacer y qué no. Este camino es conocido como la ruta de pasar de&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Junior&lt;/span&gt;&amp;nbsp;a&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Senior&lt;/span&gt;,&amp;nbsp;&lt;em style=&quot;margin: 0px;&quot;&gt;este es un duro camino lleno de experiencia&lt;/em&gt;.&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;p&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;¿Qué forma a un profesional?&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Te presento una lista de estas cosas que lo forman:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ol style=&quot;font-size: 14px; margin: 0px;&quot;&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Conocimiento del lenguaje.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Conocimiento de entornos de programación.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Mejores prácticas.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Versado en código.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Herramientas.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Ética / Profesionalismo.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Experiencia.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;El lenguaje: JavaScript&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Debemos tener muy claro cuales son los&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;fundamentos&lt;/span&gt;&amp;nbsp;de JavaScript antes de comenzar con esto. Existen&amp;nbsp;&lt;em style=&quot;margin: 0px;&quot;&gt;features&lt;/em&gt;&amp;nbsp;muy raros y hay que estudiarlos. Tenemos que saber cómo&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;funcionan las cosas&lt;/span&gt;&amp;nbsp;en JavaScript.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;No fundamentos&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Los&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;no fundamentos&lt;/span&gt;&quot; representan las siguientes características del lenguaje:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ol style=&quot;font-size: 14px; margin: 0px;&quot;&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Promesas (nivel pro)&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Getters, setters&lt;/span&gt;: son formas de obtener valor de una variable sin tener que poner&amp;nbsp;&lt;code style=&quot;display: inline-block; font-size: 1em; margin: 0px; padding: 0px 8px;&quot;&gt;this.name&lt;/code&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Proxies&lt;/span&gt;: es un&amp;nbsp;&lt;em style=&quot;margin: 0px;&quot;&gt;feature&lt;/em&gt;&amp;nbsp;muy raro, pero que más adelante veremos a profundidad. Sirve para interceptar a una función antes de que se ejecute.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Generadores&lt;/span&gt;: esto es raro, pero vamos a ver que sí es eficiente.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;¿Cómo funciona?&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere; text-align: justify;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Este lenguaje corre sobre un motor. JavaScript no contiene clases como otros lenguajes de programación, esto es algo que vuela mucho la cabeza, es muy difícil de entender. Otro&amp;nbsp;&lt;em style=&quot;margin: 0px;&quot;&gt;feature&lt;/em&gt;&amp;nbsp;muy&amp;nbsp;&lt;em style=&quot;margin: 0px;&quot;&gt;cool&lt;/em&gt;&amp;nbsp;que vamos a aprender es&amp;nbsp;&lt;code style=&quot;display: inline-block; font-size: 1em; margin: 0px; padding: 0px 8px;&quot;&gt;event loop&lt;/code&gt;, es lo que permite que pueda correr muchos procesos a la vez.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Entornos de programación&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Cuando estamos desarrollando lo hacemos para la&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;WEB&lt;/span&gt;, para un celular, para seguidores. Existen diferentes entornos que nos ofrecen&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;APIS&lt;/span&gt;, tenemos que conocer todo esto.&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Versado en código&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere; text-align: justify;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Esto quiere decir que tenemos que leer mucho código, un lugar hermoso para ponernos a leer código es&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;GitHub&lt;/span&gt;. Debemos leer mucho y hacerlo de forma muy constante.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Mejores prácticas&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;No vamos a reinventar la rueda, hay muchas personas que ya han solucionado los problemas más comunes, tenemos que usar estas soluciones, a estas soluciones se les llama:&amp;nbsp;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;patrones de diseño&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Ética&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere; text-align: justify;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Esta es la parte más importante de ser un profesional. Un buen profesional cumple con los siguientes valores:&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;ol style=&quot;font-size: 14px; margin: 0px;&quot;&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Es responsable&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Entrega a tiempo sus trabajos&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;Sabe decir que no&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;li style=&quot;margin: 0px; padding-left: 10px;&quot;&gt;&lt;p style=&quot;line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-weight: bolder; margin: 0px;&quot;&gt;No hace daño&lt;/span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;h2 style=&quot;margin: 0px;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Experiencia&lt;/span&gt;&lt;/span&gt;&lt;/h2&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;‌&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;p style=&quot;font-size: 14px; line-height: 1.5; margin: 0px; overflow-wrap: anywhere; text-align: justify;&quot;&gt;&lt;span style=&quot;background-color: white;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;La experiencia no es algo que se pueda enseñar, tenemos que encontrarla nosotros mismos en el camino a ser profesionales. Todo está en nosotros, tenemos que estudiar y practicar mucho.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Saludos amigos lectores!!! &lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/4223716242811067726/comments/default' title='Comentarios de la entrada'/><link rel='replies' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-que-significa-ser-un-profesional.html#comment-form' title='0 Comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/4223716242811067726'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/4223716242811067726'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/2022/06/cpjs-que-significa-ser-un-profesional.html' title='CPJS: ¿Qué significa ser un profesional de JavaScript?'/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimU5Iq_Pm5_SavK4WrqXsN_ZrEjhGgwQQH7lemDW9c_Oi6KrtQTAB3q5m4pFvTjuit08DppiBYiI-vaH56BxFjZHKhSYyqtKwPNPrDYh05Q3UdETUEa8vkvRkgzRvaKbOIZylLNUpYScHysi3cMRMS2v8XX0NZGF__X2bZIJLPgQlHmFZqDhSLC3Nw/s72-w494-h640-c/meme_js.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1551918663074177083.post-1631580834885525250</id><published>2021-08-20T22:12:00.002-05:00</published><updated>2021-08-21T18:34:07.011-05:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="API"/><category scheme="http://www.blogger.com/atom/ns#" term="Frontend"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><title type='text'>API´s Públicas para seguir jugando </title><content type='html'>&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;/p&gt;&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7CsyApLjnDaDv2JPhnVQA0OKQWcGYNol3MJmvCEcgFEtkInNG7q9R3wA8HqEe7Br13NxAJisdq-Ef5hy4XPgM7hoJrNLZmekZW1CWK44OBuqYxP6q20XvhyphenhyphenltVKzhfHaicNBeOxRDx0/s2048/APIS.png&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img alt=&quot;API´s Públicas para seguir jugando&quot; border=&quot;0&quot; data-original-height=&quot;1152&quot; data-original-width=&quot;2048&quot; height=&quot;360&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7CsyApLjnDaDv2JPhnVQA0OKQWcGYNol3MJmvCEcgFEtkInNG7q9R3wA8HqEe7Br13NxAJisdq-Ef5hy4XPgM7hoJrNLZmekZW1CWK44OBuqYxP6q20XvhyphenhyphenltVKzhfHaicNBeOxRDx0/w640-h360/APIS.png&quot; title=&quot;#SoterRamirez&quot; width=&quot;640&quot; /&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;p style=&quot;text-align: justify;&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Buenos días, tardes o noches, segun sea la hora perfecta para leer esta entrada, siempre es bueno desempolvar algunos post y esta vez que andaba buscando unas API´s para realizar algunos ejercicios así que listare algunos, si alguien más conoce de otros favor de comentarlos para después enlistarlos en el blog. Así que sin más por el momento y tanto texto, les enlisto algunas y que es lo que hace.&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;&lt;a name=&#39;more&#39;&gt;&lt;/a&gt;&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;/p&gt;&lt;ol style=&quot;text-align: left;&quot;&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;New York Times&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Proporciona noticias&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;https://developer.nytimes.com/&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;https://developer.nytimes.com/&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Datos sobre gatos&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Datos diarios sobre gatos&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;https://alexwohlbruck.github.io/cat-facts/&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;https://alexwohlbruck.github.io/cat-facts/&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;API de GeoName&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;La base de datos geográfica cubre todos los países y contiene más de once millones de nombres de lugares que están disponibles para descargar de forma gratuita.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;http://www.geonames.org/export/&quot;&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;http://www.geonames.org/export/&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;API de alimentos&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Te permite acceder a más de 330.000 recetas y 80.000 productos alimenticios.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://spoonacular.com/food-api&quot;&gt;https://spoonacular.com/food-api&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Fijador. io&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Tipos de cambio y conversión de moneda&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;https://fixer.io/&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Cazador de divisas&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Tipos de cambio y conversión de moneda&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://currencylayer.com/documentation&quot;&gt;https://currencylayer.com/documentation&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Avatares adorables&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Genera avatares de dibujos animados aleatorios&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://adorable.io/&quot;&gt;https://adorable.io/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Ipstack&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Localizar e identificar a los visitantes del sitio web por dirección IP&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://ipstack.com/&quot;&gt;https://ipstack.com/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;API de hechos aleatorios&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Obtenga datos aleatorios sobre diferentes temas&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://fungenerators.com/api/facts/&quot;&gt;https://fungenerators.com/api/facts/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;API de superhéroe&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Obtenga todos los datos de SuperHéroes y Villanos de todos los universos bajo una sola API&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://superheroapi.com/&quot;&gt;https://superheroapi.com/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Star Wars&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Todos los datos de Star Wars que siempre quisiste: Planetas, naves espaciales, vehículos, personas, películas y especies De las SIETE películas de Star Wars ¡Ahora con los datos de The Force Awakens!&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;https://swapi.dev/ &quot; rel=&quot;nofollow&quot; style=&quot;background-color: white; box-sizing: border-box; outline: none;&quot;&gt;&lt;span style=&quot;box-sizing: border-box; font-family: inherit; vertical-align: inherit;&quot;&gt;swapi.dev/&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;PokéAPI&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Todos los datos de Pokémon que necesitarás en un solo lugar, fácilmente accesible a través de una API RESTful moderna.&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://pokeapi.co/&quot;&gt;https://pokeapi.co/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Themoviedb&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;La base de datos de películas debe estar en la lista (TMDB)&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://www.themoviedb.org/documentation/api&quot;&gt;https://www.themoviedb.org/documentation/api&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;The Rick and Morty API&lt;/span&gt;&lt;/li&gt;&lt;ul&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;¿Tengo que decir de qué trata?&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;a href=&quot;https://rickandmortyapi.com/&quot;&gt;https://rickandmortyapi.com/&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/ol&gt;&lt;div&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Después de publicar encontré una lista&lt;/span&gt;&amp;nbsp;colectiva de API gratuitas para su uso en software y desarrollo web.&lt;/div&gt;&lt;div&gt;&lt;div style=&quot;background-color: white; border-bottom: 1px solid var(--color-border-secondary); box-sizing: border-box; color: #24292f; font-family: -apple-system, system-ui, &amp;quot;Segoe UI&amp;quot;, Helvetica, Arial, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; padding-bottom: 0.3em; text-align: left;&quot;&gt;&lt;span style=&quot;box-sizing: border-box; vertical-align: inherit;&quot;&gt;Índice&amp;nbsp;&lt;a href=&quot;https://github.com/public-apis/public-apis&quot;&gt;https://github.com/public-apis/public-apis&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;ul style=&quot;background-color: white; box-sizing: border-box; color: #24292f; font-family: -apple-system, system-ui, &amp;quot;Segoe UI&amp;quot;, Helvetica, Arial, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;; font-size: 16px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;&quot;&gt;&lt;li style=&quot;box-sizing: border-box;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#animals&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Animales&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#anime&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Anime&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#anti-malware&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Anti-malware&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#art--design&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Diseño artístico&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#authentication&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Autenticación&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#books&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Libros&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#business&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Negocio&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#calendar&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Calendario&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#cloud-storage--file-sharing&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Almacenamiento en la nube y uso compartido de archivos&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#continuous-integration&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Integración continua&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#cryptocurrency&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Criptomoneda&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#currency-exchange&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Cambio de divisas&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#data-validation&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Validación de datos&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#development&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Desarrollo&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#dictionaries&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Diccionarios&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#documents--productivity&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Documentos y productividad&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#environment&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Medio ambiente&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#events&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Eventos&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#finance&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Finanzas&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#food--drink&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Comida y bebida&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#games--comics&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Juegos y cómics&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#geocoding&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Codificación geográfica&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#government&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Gobierno&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#health&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Salud&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#jobs&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Trabajos&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#machine-learning&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Aprendizaje automático&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#music&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Música&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#news&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Noticias&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#open-data&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Información abierta&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#open-source-projects&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Proyectos de código abierto&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#patent&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Patentar&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#personality&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Personalidad&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#phone&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Teléfono&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#photography&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Fotografía&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#science--math&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Ciencia matemática&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#security&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Seguridad&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#shopping&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Compras&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#social&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Social&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#sports--fitness&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Deportes y Fitness&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#test-data&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Datos de prueba&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#text-analysis&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Análisis de texto&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#tracking&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Seguimiento&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#transportation&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Transporte&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#url-shorteners&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Acortadores de URL&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#vehicle&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Vehículo&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#video&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Video&lt;/a&gt;&lt;/li&gt;&lt;li style=&quot;box-sizing: border-box; margin-top: 0.25em;&quot;&gt;&lt;a href=&quot;https://github.com/public-apis/public-apis#weather&quot; style=&quot;background-color: transparent; box-sizing: border-box; text-decoration-line: none;&quot;&gt;Clima&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;Eso es todo amigos, no olviden usar sus superpoderes para seguir haciendo el bien y sigan aprendiendo&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;blogger-post-footer&quot;&gt;Saludos amigos lectores!!! &lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://blog.soterramirez.dev/feeds/1631580834885525250/comments/default' title='Comentarios de la entrada'/><link rel='replies' type='text/html' href='http://blog.soterramirez.dev/2021/08/apis-publicas-para-seguir-jugando.html#comment-form' title='0 Comentarios'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/1631580834885525250'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1551918663074177083/posts/default/1631580834885525250'/><link rel='alternate' type='text/html' href='http://blog.soterramirez.dev/2021/08/apis-publicas-para-seguir-jugando.html' title='API´s Públicas para seguir jugando '/><author><name>Soter Ramírez</name><uri>http://www.blogger.com/profile/11621424679454573873</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03h_iFsGLZ9xgnchfrHcCW3iRLtCh42MqLULezYTMf02s70d3vDNJoGV7yZLdccQnmf1IiRh787ENlKHwErsdzoriai30-SPj3Py5rru793ViBC9lGgAC6qFbf2ON6rY/s113/face.jpg'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7CsyApLjnDaDv2JPhnVQA0OKQWcGYNol3MJmvCEcgFEtkInNG7q9R3wA8HqEe7Br13NxAJisdq-Ef5hy4XPgM7hoJrNLZmekZW1CWK44OBuqYxP6q20XvhyphenhyphenltVKzhfHaicNBeOxRDx0/s72-w640-h360-c/APIS.png" height="72" width="72"/><thr:total>0</thr:total></entry></feed>