aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/progressive_web_apps/developer_guide
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/progressive_web_apps/developer_guide
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/progressive_web_apps/developer_guide')
-rw-r--r--files/es/web/progressive_web_apps/developer_guide/index.html79
-rw-r--r--files/es/web/progressive_web_apps/developer_guide/instalar/index.html96
2 files changed, 175 insertions, 0 deletions
diff --git a/files/es/web/progressive_web_apps/developer_guide/index.html b/files/es/web/progressive_web_apps/developer_guide/index.html
new file mode 100644
index 0000000000..79d2859352
--- /dev/null
+++ b/files/es/web/progressive_web_apps/developer_guide/index.html
@@ -0,0 +1,79 @@
+---
+title: PWA developer guide
+slug: Web/Progressive_web_apps/Developer_guide
+tags:
+ - Applications
+ - Apps
+ - Developer Guide
+ - Landing
+ - NeedsTranslation
+ - Offline
+ - PWA
+ - Persistent
+ - Progressive web apps
+ - TopicStub
+ - Web
+ - progressive
+translation_of: Web/Progressive_web_apps/Developer_guide
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">In the articles listed here, you'll find guides about every aspect of development specific to the creation of progressive web applications (PWAs).</span> For all other documentation about web development, which generally pertains to PWAs as well, see our primary <a href="/en-US/docs/Web">web development documentation</a>.</p>
+
+<p><strong>---&gt;&gt;&gt; Titles below are just for the list; give articles good SEO names and feel free to tweak those and this as needed... &lt;&lt;&lt;---</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Basics" id="Web_app_basics">Web app basics</h2>
+
+<dl>
+ <dt>Introduction and getting started with PWA development</dt>
+ <dd>some description</dd>
+ <dt><a href="/en-US/docs/Web/Progressive_web_apps/Developer_guide/Installing">Installing and uninstalling web apps</a></dt>
+ <dd>An introductory guide to how a web app can be installed on the user's device...</dd>
+ <dt>Using service workers to run offline</dt>
+ <dd>description</dd>
+ <dt>Alerting the user using notifications</dt>
+ <dd>description</dd>
+ <dt>Creating a web app from an existing site</dt>
+ <dd>description</dd>
+</dl>
+
+<h2 id="Advanced_topics">Advanced topics</h2>
+
+<dl>
+ <dt>Pushing data from the server to your web application</dt>
+ <dd>some description</dd>
+ <dt>Resource management</dt>
+ <dd>description</dd>
+ <dt>Integration with the host device</dt>
+ <dd>description</dd>
+ <dt>Security and privacy</dt>
+ <dd>description</dd>
+ <dt>Gaming topics for web app developers</dt>
+ <dd>description</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Polishing" id="Polishing_web_apps">Polishing web apps</h2>
+
+<dl>
+ <dt>Web API equivalents for common native APIs</dt>
+ <dd>some description</dd>
+ <dt>Platform-specific tips and issues</dt>
+ <dd>description</dd>
+ <dt>Web application performance guide</dt>
+ <dd>description</dd>
+ <dt>Ensuring a good user experience</dt>
+ <dd>description</dd>
+</dl>
+
+<h2 class="landingPageList" id="Related_topics">Related topics</h2>
+
+<dl>
+ <dt>some topic</dt>
+ <dd>some description</dd>
+</dl>
+</div>
+</div>
diff --git a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html
new file mode 100644
index 0000000000..ef54a3b24c
--- /dev/null
+++ b/files/es/web/progressive_web_apps/developer_guide/instalar/index.html
@@ -0,0 +1,96 @@
+---
+title: Instalar y desinstalar aplicaciones web
+slug: Web/Progressive_web_apps/Developer_guide/Instalar
+tags:
+ - Android
+ - Apps
+ - Chrome
+ - Desinstalar
+ - Firefox
+ - Guía
+ - Lanzar
+ - PWA
+ - Pantalla de inicio
+ - Principiante
+ - Samsung
+ - Web
+ - aplicaciones
+ - aplicaciones web progresivas
+ - instalar
+translation_of: Web/Progressive_web_apps/Developer_guide/Installing
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">La instalación de aplicaciones web es una función disponible en los navegadores modernos que permite a los usuarios elegir "instalar" fácil y cómodamente una aplicación web en su dispositivo para que puedan acceder a ella de la misma manera que lo harían con cualquier otra aplicación.</span> Dependiendo del dispositivo y las características del sistema operativo y el navegador, esto puede resultar en lo que esencialmente es una aplicación con todas las funciones (por ejemplo, usando <a href="https://developers.google.com/web/fundamentals/integration/webapks">WebAPK</a> en Android) o como un acceso directo agregado a la pantalla de tu dispositivo. Esta guía explica cómo se realiza la instalación, qué significa y qué debes hacer como desarrollador para que los usuarios la aprovechen.</p>
+
+<h2 id="¿Por_qué_la_instalación">¿Por qué la instalación?</h2>
+
+<p>La opción de instalar una aplicación web es parte de la filosofía {{web.link("/es/docs/Web/Progressive_web_apps", "Aplicación web progresiva")}}, que proporciona a las aplicaciones web las mismas ventajas de experiencia de usuario que las aplicaciones nativas para que puedan ser competitivas. Las aplicaciones instaladas se invocan de manera más conveniente ya que tienen presencia en la pantalla de inicio de un dispositivo o en la lista o barra de aplicaciones. Esto facilita que un usuario utilice un gesto para acceder a una aplicación tocando o haciendo clic en su icono. La aplicación en sí misma, se puede manifestar como en una vista sin bordes (sin el navegador Chrome completo) pero, no obstante, se está ejecutando de manera efectiva como una pestaña dentro del navegador.</p>
+
+<p>Para los usuarios, la experiencia de una PWA aparentemente nativa es más cómoda y conveniente que un sitio web típico. Al reducir la diferencia de experiencia del usuario entre la aplicación web y las aplicaciones nativas en el dispositivo del usuario, reduce tanto la pérdida de cualquier memoria muscular que tenga relacionada con la interfaz nativa del dispositivo como la sensación de que "algo no va del todo bien" que los usuarios pueden experimentar al cambiar entre aplicaciones nativas y basadas en web.</p>
+
+<h2 id="¿Qué_navegadores_admiten_la_instalación">¿Qué navegadores admiten la instalación?</h2>
+
+<p>La instalación es compatible con Chrome para Android y Android WebView versión 31 y posteriores, Opera para Android 32 en adelante, Samsung Internet a partir de la versión 4 y Firefox para Android {{web.link("/es/docs/Mozilla/Firefox/Releases/58", "versión 58")}} y posteriores.</p>
+
+<p>Safari en iOS es un poco diferente. Algunas partes del ecosistema de PWA son compatibles, mientras que otras no. iOS 13 introdujo una experiencia de instalación mucho más comparable, que también se describe aquí.</p>
+
+<h2 id="La_instalación_en_la_experiencia_del_usuario">La instalación en la experiencia del usuario</h2>
+
+<p>Hemos escrito un sitio web de ejemplo muy simple (<a href="https://mdn.github.io/pwa-examples/a2hs/">ve nuestra demostración en vivo</a>, y también <a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">ve el código fuente</a>) que no hace mucho, pero fue desarrollado con el código necesario para permitir su instalación, así como un servicio <em>worker&gt; para permitir su uso sin conexión. El ejemplo muestra una serie de imágenes de zorros. Si tienes un dispositivo compatible con la aplicación web disponible, utilízalo para navegar a nuestra demostración en <code>https://mdn.github.io/pwa-examples/a2hs/</code>. Verás imágenes de zorros, pero lo que es más importante, habrá alguna forma de interfaz de usuario disponible para permitirte instalar el sitio como una aplicación web.</em></p>
+
+<p><em>La interfaz de usuario para esto varía de un navegador a otro, pero la idea general es la misma. Desafortunadamente, no existe un estándar para los iconos y símbolos utilizados para operaciones como esta.</em></p>
+
+<h3 id="Firefox_para_Android"><em>Firefox para Android</em></h3>
+
+<p><em>En un dispositivo Android que usa Firefox, verás un ícono de "inicio" con un ícono más (+) en su interior; este es el ícono "Agregar a la pantalla de inicio" que se muestra para cualquier sitio que tenga las características necesarias en su lugar.</em></p>
+
+<p><em><strong id="docs-internal-guid-7d1a3d87-7fff-4a7b-6728-ae4999c46dd4"><img alt="Una captura de pantalla de un navegador web que muestra el ícono Agregar a la pantalla de inicio en la parte superior" src="https://mdn.mozillademos.org/files/17158/android-a2hs-icon.png " style="height: 64px; width: 500px;"></strong></em></p>
+
+<p><em>Al tocar este, se mostrará un pasquín de confirmación; al presionar el botón grande "+ AGREGAR A LA PANTALLA DE INICIO", se completa la acción y se agrega la aplicación a la pantalla de inicio. Ten en cuenta que en Android 8 y versiones posteriores, se mostrará primero un cuadro de diálogo de permiso "Agregar a la pantalla de inicio" a nivel del sistema.</em></p>
+
+<p><em><img alt="Una captura de pantalla de Firefox para Android que solicita confirmación antes de instalar una aplicación web" src="https://mdn.mozillademos.org/files/17160/fx-a2hs-banner.png" style="height: 301px; width: 500px;"></em></p>
+
+<h3 id="Navegador_de_Internet_Samsung"><em>Navegador de Internet Samsung</em></h3>
+
+<p><em>Si tiene Samsung Internet en tu dispositivo móvil, verás un icono diferente.</em></p>
+
+<p><em><img alt="Una captura de pantalla del navegador de Internet de Samsung que muestra su icono Agregar a la pantalla de inicio" src="https://mdn.mozillademos.org/files/17161/samsung-internet-add-app.png" style="height: 247px; width: 500px;"></em></p>
+
+<p><em>Tocar ese ícono debería llevarte al mismo pasquín de confirmación que se muestra en Firefox arriba.</em></p>
+
+<h3 id="Google_Chrome_para_Android"><em>Google Chrome para Android</em></h3>
+
+<p><em>Si tienes Google Chrome para Android disponible, la experiencia es ligeramente diferente; al cargar nuestro sitio, verás un pasquín de instalación emergente que te preguntará si deseas agregar esta aplicación a tu pantalla de inicio.</em></p>
+
+<p><em><img alt="Captura de pantalla de un pasquín de Chrome que solicita permiso para instalar la aplicación de muestra Foxes" src="https://mdn.mozillademos.org/files/17159/chrome-a2hs-banner.png" style="height: 301px; width: 500px;"></em></p>
+
+<div class="blockIndicator note">
+<p><em><strong>Nota</strong>: Puedes obtener más información sobre los paquínes de instalación de Chrome en el artículo <a href="https://developers.google.com/web/fundamentals/app-install-banners/">Pasquínes de instalación de aplicaciones web</a>.</em></p>
+</div>
+
+<p><em>Si eliges no agregarlo a tu pantalla de inicio en este momento, los puedes hacer más tarde usando el ícono "Agregar a la pantalla de inicio" en el menú principal de Chrome.</em></p>
+
+<h3 id="Safari_para_iOSiPhoneOSiPadOS"><em>Safari para iOS/iPhoneOS/iPadOS</em></h3>
+
+<p><em>En iOS de Apple (incluidos iPhoneOS y iPadOS), el navegador Safari integrado en el dispositivo tiene cierto soporte para aplicaciones web, incluido el soporte para agregar a la función de pantalla de inicio. Para agregar una aplicación web a la pantalla de inicio (también conocida como lanzador o trampolín), toca el botón para compartir (<img alt="Icono de compartir cuadrado y flecha desde iOS y macOS" src="https://mdn.mozillademos.org/files/17156/square.svg" style="height: 18px; width: 14px;">) en la parte inferior de la pantalla:</em></p>
+
+<p><em><img alt="Captura de pantalla que muestra la ubicación del botón Compartir en Safari en iOS 13" src="https://mdn.mozillademos.org/files/17163/safari-ios-a2hs-icon.png" style="height: 617px; width: 500px;"></em></p>
+
+<p><em>Esto llama al panel para compartir. Entre las opciones debe estar la opción "Agregar a la pantalla de inicio", a menos que el usuario la haya eliminado específicamente de la lista al editar las opciones mostradas:</em></p>
+
+<p><em><img alt="Captura de pantalla del panel para compartir de Safari iOS, que muestra la opción" src="https://mdn.mozillademos.org/files/17165/safari-ios-share-menu.png" style="height: 551px; width: 500px;"></em></p>
+
+<p><em>Al elegir "Agregar a la pantalla de inicio" aquí se presenta el cuadro de diálogo de confirmación, que no solo confirma que el usuario desea agregar la aplicación a la pantalla de inicio, sino que también le permite personalizar su nombre.</em></p>
+
+<p><em><img alt='Una captura de pantalla de iOS Safari que muestra su panel de configuración y confirmación "Agregar a la pantalla de inicio"' src="https://mdn.mozillademos.org/files/17167/safari-ios-a2hs-banner.png" style="height: 439px; width: 500px;"></em></p>
+
+<p><em>Al hacer clic en "Agregar", la aplicación se incluye en la pantalla de inicio.</em></p>
+
+<h3 id="La_aplicación_web_instalada"><em>La aplicación web instalada</em></h3>
+
+<p><em>Independientemente del navegador y el dispositivo que estés utilizando, cuando eliges agregar la aplicación a tu pantalla de inicio o al iniciador de aplicaciones, aparecerá allí con el mismo aspecto que cualquier aplicación. Normalmente, esto significa que verás el icono de la aplicación junto con un título corto.</em></p>
+
+<p><em><img alt='Captura de pantalla de una pantalla de inicio de Android con la aplicación "Foxes" mostrada' src="https://mdn.mozillademos.org/files/17157/a2hs-on-home-screen.png" style="height: 304px; width: 500px;"></em></p>
+
+<p><em>Cuando tocas el icono de la aplicación web en la pantalla de inicio, se abre en un entorno web de pantalla completa, sin la interfaz de usuario del navegador a su alrededor.</em></p>