{"id":2021,"date":"2023-11-27T18:31:08","date_gmt":"2023-11-27T21:31:08","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=2021"},"modified":"2023-11-27T18:31:09","modified_gmt":"2023-11-27T21:31:09","slug":"capitulo-9-desarrollo-avanzado","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-9-desarrollo-avanzado\/","title":{"rendered":"Cap\u00edtulo 9: Desarrollo Avanzado"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.1: Canvas en HTML5<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El elemento <code>&lt;canvas&gt;<\/code> de HTML5 es una poderosa herramienta para crear gr\u00e1ficos, dibujos y animaciones en tiempo real en tu sitio web. Aqu\u00ed se detallan algunos conceptos clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elemento <\/strong><code><strong>&lt;canvas&gt;<\/strong><\/code><strong>:<\/strong> Permite dibujar gr\u00e1ficos y contenido en tiempo real utilizando JavaScript. Es esencial para crear gr\u00e1ficos personalizados.<\/li>\n\n\n\n<li><strong>Contexto 2D:<\/strong> El contexto 2D (<code>2d<\/code>) es el entorno en el que puedes dibujar en el elemento&nbsp;<code>&lt;canvas&gt;<\/code>. Proporciona una serie de m\u00e9todos para dibujar l\u00edneas, formas, texto y m\u00e1s.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.2: Dibujar en el Canvas<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para dibujar en el canvas, debes utilizar JavaScript para acceder al contexto 2D y utilizar sus m\u00e9todos. Algunas de las funciones esenciales son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>getContext(\"2d\")<\/code>: Este m\u00e9todo se utiliza para obtener el contexto 2D del elemento <code>&lt;canvas&gt;<\/code>, lo que te permite dibujar en \u00e9l.<\/li>\n\n\n\n<li><code>beginPath()<\/code>: Inicia un nuevo trazo para dibujar.<\/li>\n\n\n\n<li><code>moveTo(x, y)<\/code>: Mueve el l\u00e1piz a una posici\u00f3n espec\u00edfica sin dibujar una l\u00ednea.<\/li>\n\n\n\n<li><code>lineTo(x, y)<\/code>: Dibuja una l\u00ednea desde la posici\u00f3n actual hasta una nueva posici\u00f3n.<\/li>\n\n\n\n<li><code>stroke()<\/code>: Dibuja el trazo actual.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.3: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Dibujar una L\u00ednea:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Supongamos que deseas dibujar una l\u00ednea en el <code>&lt;canvas&gt;<\/code>. Aqu\u00ed hay un ejemplo de c\u00f3mo hacerlo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Dibujar una L\u00ednea en Canvas&lt;\/title>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;canvas id=\"myCanvas\" width=\"400\" height=\"200\">&lt;\/canvas>\r\n    &lt;script>\r\n        const canvas = document.getElementById('myCanvas');\r\n        const context = canvas.getContext('2d');\r\n        \r\n        context.beginPath();\r\n        context.moveTo(50, 50);\r\n        context.lineTo(350, 150);\r\n        context.stroke();\r\n    &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Dibujar una Forma Geom\u00e9trica<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un ejercicio en el que los lectores deban dibujar una forma geom\u00e9trica simple, como un rect\u00e1ngulo o un tri\u00e1ngulo, en un <code>&lt;canvas&gt; <\/code>utilizando las funciones <code>beginPath()<\/code>, <code>moveTo()<\/code>, <code>lineTo() <\/code>y <code>stroke()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Dibujar una Forma Geom\u00e9trica en Canvas&lt;\/title>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;canvas id=\"myCanvas\" width=\"400\" height=\"200\">&lt;\/canvas>\r\n    &lt;script>\r\n        const canvas = document.getElementById('myCanvas');\r\n        const context = canvas.getContext('2d');\r\n        \r\n        context.beginPath();\r\n        context.moveTo(50, 50);\r\n        context.lineTo(100, 50);\r\n        context.lineTo(75, 100);\r\n        context.closePath();\r\n        context.stroke();\r\n    &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Crear una Peque\u00f1a Animaci\u00f3n<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desarrolla un ejercicio que anime un objeto en el <code>&lt;canvas&gt;<\/code>, como un c\u00edrculo que se mueve de un lado a otro. Los lectores deber\u00e1n utilizar JavaScript para lograr esta animaci\u00f3n simple.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Animaci\u00f3n en Canvas&lt;\/title>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;canvas id=\"myCanvas\" width=\"400\" height=\"200\">&lt;\/canvas>\r\n    &lt;script>\r\n        const canvas = document.getElementById('myCanvas');\r\n        const context = canvas.getContext('2d');\r\n        let x = 50;\r\n        let direction = 1;\r\n\r\n        function animate() {\r\n            context.clearRect(0, 0, canvas.width, canvas.height);\r\n            context.beginPath();\r\n            context.arc(x, 100, 20, 0, 2 * Math.PI);\r\n            context.fill();\r\n\r\n            if (x + 20 >= canvas.width || x - 20 &lt;= 0) {\r\n                direction *= -1;\r\n            }\r\n            x += 5 * direction;\r\n\r\n            requestAnimationFrame(animate);\r\n        }\r\n\r\n        animate();\r\n    &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios ayudar\u00e1n a los lectores a comprender c\u00f3mo utilizar el elemento <code>&lt;canvas&gt;<\/code> y el contexto 2D en HTML5 para crear gr\u00e1ficos y animaciones personalizadas en sus sitios web. El canvas es una herramienta vers\u00e1til que puede dar vida a tus proyectos web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.4: Drag and Drop en HTML5<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El \u00abdrag and drop\u00bb (arrastrar y soltar) es una caracter\u00edstica valiosa en una aplicaci\u00f3n web que permite a los usuarios arrastrar elementos y soltarlos en una ubicaci\u00f3n espec\u00edfica. Algunos conceptos clave incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Elementos Arrastrables:<\/strong> Los elementos HTML se pueden hacer arrastrables utilizando el atributo&nbsp;<code>draggable<\/code>.<\/li>\n\n\n\n<li><strong>Eventos Drag and Drop:<\/strong> Los eventos como <code>dragstart<\/code>, <code>dragover<\/code>, <code>dragenter<\/code>, <code>dragleave<\/code>, <code>drop<\/code> y <code>dragend<\/code> se utilizan para controlar el proceso de arrastrar y soltar.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.5: Geolocalizaci\u00f3n y Notificaciones en HTML5<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La geolocalizaci\u00f3n permite a una aplicaci\u00f3n web conocer la ubicaci\u00f3n f\u00edsica del dispositivo del usuario. Las notificaciones permiten a una aplicaci\u00f3n web enviar mensajes al usuario. Aqu\u00ed est\u00e1n los conceptos clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>API de Geolocalizaci\u00f3n: <\/strong>Utiliza la API de geolocalizaci\u00f3n para obtener la ubicaci\u00f3n del usuario a trav\u00e9s de su dispositivo, lo que es \u00fatil para servicios basados en la ubicaci\u00f3n.<\/li>\n\n\n\n<li><strong>API de Notificaciones:<\/strong> La API de notificaciones permite que tu aplicaci\u00f3n web env\u00ede notificaciones al usuario, incluso cuando la aplicaci\u00f3n no est\u00e1 abierta.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.6: Aplicaciones Web Progresivas (PWA)<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las Aplicaciones Web Progresivas (PWA) son sitios web que ofrecen una experiencia similar a la de las aplicaciones m\u00f3viles nativas. Estas aplicaciones pueden instalarse en el dispositivo del usuario y funcionan sin conexi\u00f3n. Algunos aspectos clave incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Service Workers: <\/strong>Los service workers son scripts que se ejecutan en segundo plano y permiten a las PWAs funcionar sin conexi\u00f3n y realizar notificaciones push.<\/li>\n\n\n\n<li><strong>Manifesto de Aplicaci\u00f3n: <\/strong>El archivo manifesto de aplicaci\u00f3n describe la aplicaci\u00f3n y c\u00f3mo se debe comportar cuando se instala en un dispositivo.<\/li>\n\n\n\n<li><strong>Instalaci\u00f3n en el Hogar:<\/strong> Las PWAs pueden ser instaladas en la pantalla de inicio del dispositivo y funcionar como aplicaciones nativas.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 9.7: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Drag and Drop:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Supongamos que deseas implementar la funcionalidad de arrastrar y soltar para reorganizar elementos en una lista. Aqu\u00ed hay un ejemplo de c\u00f3mo hacerlo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Arrastrar y Soltar Elementos&lt;\/title>\r\n    &lt;style>\r\n        .draggable {\r\n            width: 100px;\r\n            height: 100px;\r\n            background-color: #3498db;\r\n            color: #fff;\r\n            text-align: center;\r\n            line-height: 100px;\r\n            margin: 10px;\r\n        }\r\n    &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;div class=\"draggable\" draggable=\"true\">Elemento 1&lt;\/div>\r\n    &lt;div class=\"draggable\" draggable=\"true\">Elemento 2&lt;\/div>\r\n    &lt;div class=\"draggable\" draggable=\"true\">Elemento 3&lt;\/div>\r\n    &lt;script>\r\n        const elementosArrastrables = document.querySelectorAll('.draggable');\r\n        \r\n        elementosArrastrables.forEach(elemento => {\r\n            elemento.addEventListener('dragstart', (e) => {\r\n                e.dataTransfer.setData('text\/plain', elemento.textContent);\r\n            });\r\n            \r\n            elemento.addEventListener('dragover', (e) => {\r\n                e.preventDefault();\r\n            });\r\n            \r\n            elemento.addEventListener('drop', (e) => {\r\n                e.preventDefault();\r\n                const data = e.dataTransfer.getData('text\/plain');\r\n                elemento.textContent = data;\r\n            });\r\n        });\r\n    &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Geolocalizaci\u00f3n y Notificaciones<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un ejercicio en el que los lectores deban utilizar la geolocalizaci\u00f3n para obtener la ubicaci\u00f3n del usuario y luego mostrar una notificaci\u00f3n basada en la ubicaci\u00f3n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n    &lt;title>Geolocalizaci\u00f3n y Notificaciones&lt;\/title>\r\n&lt;\/head>\r\n&lt;body>\r\n    &lt;button id=\"obtenerUbicacion\">Obtener Ubicaci\u00f3n&lt;\/button>\r\n    &lt;script>\r\n        const obtenerUbicacion = document.getElementById('obtenerUbicacion');\r\n        \r\n        obtenerUbicacion.addEventListener('click', () => {\r\n            if (\"geolocation\" in navigator) {\r\n                navigator.geolocation.getCurrentPosition((position) => {\r\n                    const latitude = position.coords.latitude;\r\n                    const longitude = position.coords.longitude;\r\n                    \r\n                    const ubicacion = `Latitud: ${latitude}, Longitud: ${longitude}`;\r\n                    \r\n                    \/\/ Notificaci\u00f3n\r\n                    if (\"Notification\" in window &amp;&amp; Notification.permission === \"granted\") {\r\n                        new Notification(\"Ubicaci\u00f3n Obtenida\", {\r\n                            body: ubicacion\r\n                        });\r\n                    }\r\n                });\r\n            } else {\r\n                alert(\"Geolocalizaci\u00f3n no es compatible en este navegador.\");\r\n            }\r\n        });\r\n    &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Crear una Aplicaci\u00f3n Web Progresiva Simple<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Desarrolla un ejercicio en el que los lectores conviertan una aplicaci\u00f3n web existente en una Aplicaci\u00f3n Web Progresiva. Esto implica agregar un service worker y un manifesto de aplicaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Convertir una aplicaci\u00f3n web en una PWA implica la configuraci\u00f3n del service worker y la creaci\u00f3n de un manifesto de aplicaci\u00f3n, lo que puede requerir una gu\u00eda detallada debido a la complejidad. Puedes proporcionar a los lectores los recursos y la gu\u00eda necesaria para realizar esta conversi\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios ayudar\u00e1n a los lectores a comprender c\u00f3mo implementar funcionalidades avanzadas, como el drag and drop, la geolocalizaci\u00f3n, las notificaciones y las Aplicaciones Web Progresivas (PWA), en sus proyectos de desarrollo web. Las PWA son una forma emocionante de brindar experiencias de usuario mejoradas en la web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Secci\u00f3n 9.1: Canvas en HTML5 El elemento &lt;canvas&gt; de HTML5 es una poderosa herramienta para crear gr\u00e1ficos, dibujos y animaciones en tiempo real en tu sitio web. Aqu\u00ed se detallan algunos conceptos clave: Secci\u00f3n 9.2: Dibujar en el Canvas Para dibujar en el canvas, debes utilizar JavaScript para acceder al contexto 2D y utilizar sus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado.jpg",1280,792,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado-300x186.jpg",300,186,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado-768x475.jpg",768,475,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado-1024x634.jpg",1024,634,true],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado.jpg",1280,792,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Desarrollo-Avanzado.jpg",1280,792,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Secci\u00f3n 9.1: Canvas en HTML5 El elemento &lt;canvas&gt; de HTML5 es una poderosa herramienta para crear gr\u00e1ficos, dibujos y animaciones en tiempo real en tu sitio web. Aqu\u00ed se detallan algunos conceptos clave: Secci\u00f3n 9.2: Dibujar en el Canvas Para dibujar en el canvas, debes utilizar JavaScript para acceder al contexto 2D y utilizar sus&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=2021"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2021\/revisions"}],"predecessor-version":[{"id":2023,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2021\/revisions\/2023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2022"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=2021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=2021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=2021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}