diff options
Diffstat (limited to 'files/es/archive/b2g_os/quickstart')
5 files changed, 0 insertions, 520 deletions
diff --git a/files/es/archive/b2g_os/quickstart/app_tools/index.html b/files/es/archive/b2g_os/quickstart/app_tools/index.html deleted file mode 100644 index a179d64a23..0000000000 --- a/files/es/archive/b2g_os/quickstart/app_tools/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: App tools -slug: Archive/B2G_OS/Quickstart/App_tools -translation_of: Archive/B2G_OS/Quickstart/App_tools ---- -<div class="summary"> - <p>What do you use to build Open Web Apps? The answer is "anything you would normally use to build for the web." The following is a list of tools and resources to help you get started making Open Web Apps. They can be easily integrated into your existing web development workflow, if you have one, or you can build a new workflow around them.</p> -</div> -<h2 id="App_Validator">App Validator</h2> -<p>Is your app ready for the Firefox Marketplace? The <a href="https://marketplace.firefox.com/developers/validator">App validator</a> will check your manifest and show you any errors it may have, or warnings you should consider.</p> -<h2 id="Firefox_OS_Simulator">Firefox OS Simulator</h2> -<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!</p> -<h2 id="App_Manager">App Manager</h2> -<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> -<h2 id="Firefox_Developer_Tools">Firefox Developer Tools</h2> -<p>Firefox now ships with a default set of developer tools built from the ground up to ensure a great development experience that is both snappy and efficient. To find out more about how these tools work, and see a detailed list of what else Mozilla has to offer, head on over to our <a href="/en-US/docs/Tools">Tools zone</a>.</p> diff --git a/files/es/archive/b2g_os/quickstart/index.html b/files/es/archive/b2g_os/quickstart/index.html deleted file mode 100644 index ebe1f7c220..0000000000 --- a/files/es/archive/b2g_os/quickstart/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Build -slug: Archive/B2G_OS/Quickstart -tags: - - NeedsTranslation - - TopicStub -translation_of: Archive/B2G_OS/Quickstart ---- -<div class="summary"> - <p>Quickstart information on coding open web apps.</p> -</div> -<dl> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduction to open web apps</a></dt> - <dd> - What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Your_first_app">Your first app</a></dt> - <dd> - This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduction to Firefox OS</a></dt> - <dd> - An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduction to manifests</a></dt> - <dd> - An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_Web_developers">App development for web developers</a></dt> - <dd> - If you're a web developer, how do open web apps differ from what you're used to? This article explains all.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/For_mobile_developers">App development for mobile developers</a></dt> - <dd> - If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Developing app functionality</a></dt> - <dd> - This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/Payments">Payments</a></dt> - <dd> - How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.</dd> - <dt> - <a href="/en-US/docs/Web/Apps/Quickstart/Build/App_tools">App tools</a></dt> - <dd> - Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.</dd> -</dl> diff --git a/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html b/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html deleted file mode 100644 index 84ab7f30d9..0000000000 --- a/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Introducción al manifest -slug: Archive/B2G_OS/Quickstart/Intro_to_manifests -translation_of: Archive/B2G_OS/Quickstart/Intro_to_manifests ---- -<div class="summary"> - <p>Este articulo proporciona toda la información básica que usted necesita saber a cerca de trabajar con archivos de manifiesto open web app.</p> -</div> -<dl> - <dt> - ¿Por qué mi aplicación necesita un app manifest?</dt> - <dd> - La aplicación manifest proporciona útil información a cerca de una aplicación (tal como nombre, autor, icono y descripción) es un simple documento usado por los usuarios y las tiendas de aplicacion. Lo mas importante, está contendra una lista de <a href="//developer.mozilla.org/docs/WebAPI">Web APIs</a> (Tal como <a href="//developer.mozilla.org/docs/Using_geolocation">geolocation</a>) que su aplicación necesita. Esto permite a usuarios tomar decisiones informadas a cerca de aplicaciones antes de instalarla.</dd> - <dt> - Es la Open Web app manifest la misma cosa como el manifest usado por la extensión de Google Chrome y las web app instalables? o el W3C Widgets manifest? o el HTML5 <a href="//developer.mozilla.org/docs/Using_Application_Cache">cache manifest</a>?</dt> - <dd> - No a todos ellos. . La open web app manifest es probablemente la mas similar a google manifest, pero no son identicos. Es esperado que el Open web apps manifest llegará a ser un estandar.</dd> - <dt> - ¿Qué es un origen?</dt> - <dd> - El origen de una aplicación es el protocolo, dominio y puerto de la url junto. Cada una de las siguientes urls son diferentes a la original: - <ul> - <li><code>http://example.com</code></li> - <li><code>http://example.com:8080</code> (diferente puerto)</li> - <li><code>https://example.com</code> (diferente protocolo)</li> - <li><code>http://www.example.com</code></li> - <li><code>http://myapp.example.com</code> (subdominio)</li> - </ul> - </dd> - <dd> - Las siguientes urls son la misma original: - <ul> - <li><code>http://Example.com:80</code></li> - <li><code>http://example.com</code></li> - </ul> - </dd> -</dl> -<dl> - <dd> - Las siguientes urls son la misma original: - <ul> - <li><code>http://example.com/drawingApp</code></li> - <li><code>http://example.com/notesApp</code></li> - </ul> - </dd> -</dl> -<dl> - <dt> - ¿Por qué tengo que hospedar el app manifest en el mismo origen que mi aplicación?</dt> - <dd> - Asumimos que solo usted puede alojar una aplicación manifest en el mismo origen que su aplicación. Esto significa que los usuarios pueden instalar su aplicación con confianza, sabiendo que la instalación es basada en su aplicación manifiesto y no en alguien más. Los usuarios deberían tener esta confianza si están instalando su aplicación para Firefox OS Marketplace, para alguna otra tienda de aplicaciones o para su propio sitio web si es auto-publicada su aplicación.</dd> - <dd> - Si la aplicación manifest no fué hospedada en el mismo origen que la aplicación misma, allí no habría nada para prevenir que terceros hagan directamente aplicaciones fuera de el contenido alojado en su origen.Incluso empeora, terceros podrían crear una aplicación manifiest usando su marca eso sería engañar a los usuarios para que instalen una aplicación que es una fachada para un robo de contraseñas u otros comportamientos imprevistos .</dd> - <dt> - ¿hacer esto significa que no puedo incrusptar imagenes o javascript de otros origenes?</dt> - <dd> - No. La restricción de origen es sobre solo contenido (paginas HTML) . imagenes y otros recursos embebidos pueden ser localizados en otras partes (por ejemplo, en una red de entrega de contenido), excepto por el icono de la aplicación.</dd> - <dt> - Puedo tener mas de una aplicación en mi origen?</dt> - <dd> - No, allí solo puede estar una aplicación por origen. Si se permitiera multiples aplicaciones de un solo origen, ellos podrian vivir en una simple web sandbox — examinarían cada localStorage del otro , hace solicitud ajax a cada APIS del otro, o incluso roba acceso a las APIS privilegiadas que deberían de haber tenido concebida solo una de las aplicaciones. Esto sería especialmente peligroso para dominios públicos que públican contenido generado por usuario para muchos usuarios.</dd> - <dd> - Nosotros recomendamos que use una separación de subdominios para cada una de sus aplicaciones. Por ejemplo, <code>spreadsheet.mycoolapps.com</code> por una aplicación y <code>texteditor.mycoolapps.com</code> por otro. Para mas información, ver <a href="/en-US/docs/Web/Apps/Adding_a_subdomain">Añadiendo un subdominio por una aplicación</a>.</dd> - <dd> - Muchos recursos y permisos en la web ya están en el ambito de un solo origen. por definición una aplicación y un origen como la misma cosa que usamos la misma restrinción que son usados en otra parte de la web y en HTML5.</dd> - <dt> - ¿Porqué no subir el manifiesto directamente al Firefox Os Marketplace?</dt> - <dd> - Hay varios beneficios de alojas el manifiesto en su dominio y proporcionando la url de la aplicación manifest a el Marketplace: - <ul> - <li>Nosotros pretendiamos que el Marketplace (y otras tiendas de aplicaciones) revisarían periodicamente todo el manifiesto en la URL proporcionada y verifique actualizaciones en ellos. Esto evita la necesidad de que vuelva a subir su aplicación manifiesto por cada actualización .</li> - <li>El marketplace pasará tanto el original contenido de la aplicación manifiesto como la URL para el dispositivo del usuario. esto permite al dispositivo verificar por bajos costos en la aplicación manifiesto que podría indicar la manipulación. Este será especialmente importante para aplicaciones que usen APIS web(por ejemplo geolocalización).</li> - </ul> - <strong>Nota:</strong> A partir de este escrito, nosotros estamos todavía diseñando un proceso por el cual el Marketplace pasará una actualizada aplicación manifiesto a el dispositivo del usuario.</dd> - <dt> - <br> - ¿Por qué mi servidor Web tiene que utilizar la cabecera Content-Type de HTTP adecuada al servir mi aplicación manifiesta?</dt> - <dd> - Esta restricción previene a usuarios de un sitio web que permite contenido de usuarios generados (por ejemplo, un sitio pastebin) para inadvertidamente o inapropiadamente reclamando que todo sitio web como su aplicación.</dd> - <dt> - Debería usar HTTPS para servir mi aplicación ?</dt> - <dd> - Si, es una buena idea. Nosotros anticipamos que el firefox Os Marketplace requerirá cualquier aplicación usando APIS web (Tal como geolocación) para servir a su aplicación manifesto a través de HTTPS como una defensa adicional contra ataques hombre-en-el-medio. Si usas HTTPS para su manifiesto, usted necesita también usarla para todas las páginas en su sitio.</dd> - <dt> - Qué pasa si alguien más entrega mi aplicación a el Markeplace de Firefox OS?</dt> - <dd> - En el afortunado evento que alguien adivine la url de su aplicación manifiesto y lo entrega a el Marketplace de Firefox Os antes que usted,<span id="result_box" lang="es"><span class="hps"> por favor</span> <span class="hps">presentar una queja con</span> <span class="hps">el equipo de apoyo</span> <span class="hps">del mercado</span><span>.</span></span></dd> -</dl> -<h2 id="Vease_también">Vease también</h2> -<p><a href="/en-US/docs/Web/Apps/Manifest">App manifest</a></p> diff --git a/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html b/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html deleted file mode 100644 index 37caf3ab16..0000000000 --- a/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Introducción a las Open Web Apps -slug: Archive/B2G_OS/Quickstart/Introduccion_a_las_open_web_apps -tags: - - Apps - - Web Open App -translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps ---- -<p><img alt="Multi devices" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p> - -<div class="summary"> -<p>Este artículo está diseñado para actuar como un buen punto de partida para cualquiera que desee aprender más sobre Open Web Apps, si usted es un desarrollador o administrador del proyecto, o tiene otro rol relevante en el desarrollo de aplicaciones o en la distribución. Aquí te ofrecemos un panorama claro de las Open Web Apps y la filosofía detrás de ellas.</p> -</div> - -<p>Las Open Web Apps son esencialmente diferentes de sitios web estándar o páginas Web. Se construyen utilizando tecnologías web abiertas estándar - HTML, CSS, JavaScript, etc - y se pueden acceder mediante un navegador Web. Las principales diferencias radican en su capacidad para ser instaladas en un dispositivo, trabajar sin conexión y tener acceso a API's avanzadas que permiten la interacción con las características del dispositivo, como la cámara, agenda, y otras cosas. Además, se basan en tecnologías abiertas tanto como sea posible. Cuando las diferencias radican en la implementación de tecnología entre las plataformas, se deben hacer esfuerzos para asegurar que ambos son compatibles, a través de una combinación de detección de características y código apropiado para diferentes plataformas, y la degradación agraciada.</p> - -<h2 id="Ventajas_de_las_Open_Web_Apps">Ventajas de las Open Web Apps</h2> - -<p>Echemos un vistazo a las ventajas de Open Web Apps con más de detalle:</p> - -<ul> - <li><strong>Instalación local y de almacenamiento fuera de línea:</strong> Las Open Web Apps se pueden instalar en el dispositivo <span id="result_box" lang="es"><span class="hps">y aprovechar</span> <span class="hps">las API</span> <span class="hps">de almacenamiento</span> <span class="hps">local y</span> <span class="hps">IndexedDB</span> <span class="hps">para proporcionar</span> <span class="hps">capacidades de almacenamiento de</span> <span class="hps">datos local</span></span>. Además, las tecnologías Open Web tienden a tener un tamaño mucho más pequeño que las aplicaciones nativas y por lo general se pueden actualizar automáticamente en lugar de tener que instalar un nuevo paquete completo cada vez que hay una actualización. (una excepción a esto son los paquetes de aplicaciones, que requieren un paquete completamente nuevo cuando se actualiza.) Las aplicaciones son por lo tanto menos dependientes de una conexión a Internet siempre activa, y más útiles cuando las redes son irregulares.</li> - <li> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><strong><span class="hps">Acceso</span> <span class="hps">Hardware:</span> </strong><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">metadatos proporcionados</span> <span class="hps">con</span> <span class="hps">las Open Web Apps</span> <span class="hps">pueden utilizarse para</span> <span class="hps">conceder permisos de</span> <span class="hps">aplicación</span> <span class="hps">a las API</span> <span class="hps">privilegiadas que</span> <span class="hps">permite</span>n <span class="hps">el uso</span> <span class="hps">de</span> <span class="hps">las características de hardware</span> <span class="hps">del dispositivo</span><span>, algo que la</span> <span class="hps">plataforma</span> <span class="hps">Web</span> <span class="hps">no tenia</span><span class="hps"> tradicionalmente</span><span>.</span></span></span></div> - </div> - </li> - <li> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><strong><span class="hps">Rompiendo</span> <span class="hps">los walled gardens</span><span>:</span></strong> <span class="hps">La norma para</span> <span class="hps">las plataformas móviles es que</span> <span class="hps">tienden a</span> <span class="hps">ser</span> <span class="hps">cerradas y escritas </span><span class="hps">con tecnologías</span> <span class="hps">propietarias</span><span>, por lo que</span> <span class="hps">las aplicaciones</span> <span class="hps">están</span> <span class="hps">encerradas en</span> <span class="hps">sus plataformas.</span> <span class="hps">Y</span> <span class="hps">los teléfonos inteligentes</span> <span class="hps">tienden a ser caros</span><span>,</span> <span class="hps">y requieren</span> <span class="hps">tarjetas de crédito para</span> <span class="hps">las compras de aplicaciones</span><span>.</span> Las Open Web Apps <span class="hps">tienden a ser</span> <span class="hps">capaces de ejecutarse</span> <span class="hps">en un hardware</span> <span class="hps">mucho más barato</span><span>, sobre todo</span> <span class="hps">en el caso</span> <span class="hps">de los dispositivos que portan</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">dónde</span><span> literalmente</span> <span class="hps">Firefox</span> se <span class="hps">ejecuta encima</span> <span class="hps">de un</span> <span class="hps">kernel</span> <span class="hps">Linux</span> <span class="hps">muy ligero.</span> <span class="hps">Y están</span> <span class="hps">escritas usando</span> <span class="hps">tecnologías web</span> <span class="hps">abiertas</span><span>, que es</span> <span class="hps">la plataforma más</span> <span class="hps">distribuida</span> <span class="hps">alrededor del mundo.</span> <span class="hps">Además, los dispositivos</span> <span class="hps">de Firefox</span> <span class="hps">OS</span> <span class="hps">cuentan con</span> <span class="hps">sistemas de pago</span> <span class="hps">donde se puede simplemente</span> <span class="hps">pagar por adelantado para</span> <span class="hps">comprar aplicaciones</span> <span class="hps">o agregar</span> <span class="hps">el costo</span> <span class="hps">a</span> <span class="hps">su factura de</span> <span class="hps">teléfono.</span></span></div> - </div> - </li> - <li><strong>Tienda de Open Web Apps</strong>: <span id="result_box" lang="es"><span class="hps">Siguiendo con</span> <span class="hps">el punto anterior,</span> <span class="hps">se puede optar por</span> <span class="hps">alojar sus</span> <span class="hps">aplicaciones</span> <span class="hps">en un mercado</span> <span class="hps">existente </span></span>(como el <a href="https://marketplace.firefox.com/" title="https://marketplace.firefox.com/">Firefox Marketplace</a>), <span id="result_box" lang="es"><span class="hps">o alojarlas</span> <span class="hps">en algún lugar</span> <span class="hps">completamente distinto.</span> <span class="hps">Todo depende de</span> <span class="hps">usted.</span> <span class="hps">Mozilla</span> <span class="hps">tiene como objetivo poner</span> <span class="hps">de vuelta al desarrollador d</span><span class="hps">e nuevo en el control</span> <span class="hps">de cada aspecto </span><span class="hps">de las aplicaciones</span><span class="hps"> para una facil</span><span class="hps"> distribución y </span><span class="hps">la gestión directa</span> de <span class="hps">la relación con el cliente</span><span>.</span><span class="hps"> Y las</span> <span class="hps">aplicaciones</span> <span class="hps">se pueden buscar</span> <span class="hps">al igual que cualquier</span> <span class="hps">otra experiencia</span> <span class="hps">basada en la Web</span><span>.</span></span></li> -</ul> - -<p><span id="result_box" lang="es"><span class="hps">El siguiente video</span> <span class="hps">también se ve en</span> <span class="hps">las ventajas</span> <span class="hps">generales de las Open Web Apps</span><span>, y el desarrollo</span> <span class="hps">para la plataforma</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>:</span></span></p> - -<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/RJJkFshnnVc?rel=0&html5=1"></iframe></div></div><p></p> - -<h2 id="La_Web_es_la_plataforma">La Web es la plataforma</h2> - -<p><span id="result_box" lang="es"><span class="hps">Una Open Web App</span><span>, como tal existe</span> <span class="hps">instalada en</span> <span class="hps">una plataforma como</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">no es un</span> <span class="hps">bookmark</span> <span class="hps">- es</span> <span class="hps">una parte</span><span class="hps"> propia del sistema</span><span>.</span><span class="hps"> Las Open Web Apps</span> son <span class="hps">una gran promesa</span><span>.</span> <span class="hps">Se trata de</span> <span class="hps">una oportunidad</span> <span class="hps">que no hay que</span> <span class="hps">perderse</span><span>,</span> <span class="hps">de lo contrario la</span> <span class="hps">web puede</span> <span class="hps">llegar a ser</span> <span class="hps">una vez más</span><span class="hps"> dividida</span><span>.</span> <span class="hps">Con</span> <span class="hps">esto en mente,</span> <span class="hps">debe</span> <span class="hps">quedar claro</span> <span class="hps">que las Open Web Apps </span><span class="hps atn">(</span><span>OWA</span><span>)</span> <span class="hps">están destinadas a</span> <span class="hps">ser estandarizadas y</span> <span class="hps">de formar parte de</span> <span class="hps atn">"</span><span>la</span> <span class="hps">Web"</span><span>.</span> <span class="hps">Si tiene éxito</span><span>, OWA</span> <span class="hps">debería</span> <span class="hps">eventualmente</span> <span class="hps">trabajar en todos los</span> <span class="hps">navegadores,</span> <span class="hps">sistemas</span> <span class="hps">operativos y dispositivos.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">Mozilla</span> <span class="hps">estamos trabajando duro</span> <span class="hps">para crear esta</span> <span class="hps">plataforma de</span> <span class="hps">aplicaciones</span> <span class="hps">que está respaldada</span> <span class="hps">en su totalidad por</span> <span class="hps">la</span> open <span class="hps">Web</span><span class="hps">.</span> <span class="hps">No es</span> <span class="hps">la intención de ser</span> la <span class="hps">"plataforma </span><span class="hps">Mozilla</span><span class="atn">" o la "</span><span>plataforma </span><span class="hps">Firefox"</span><span>.</span> <strong><span class="hps">La</span> <span class="hps">Web</span> <span class="hps">es la plataforma</span></strong><span>.</span> <span class="hps">Estamos creando</span> <span class="hps">un conjunto de</span> <span class="hps">APIs abiertas</span> <span class="hps">y las implementaciones</span> <span class="hps">para demostrar cómo</span> <span class="hps">pueden existir</span> <span class="hps">aplicaciones portátiles</span> <span class="hps">en la web sin</span> <span class="hps">dependencia de un proveedor</span><span>.</span> <span class="hps">Otros grupos</span><span>, como Facebook y</span> <span class="hps">Google</span> <span class="hps">Chrome</span> <span class="hps">también están trabajando</span> <span class="hps">en las plataformas de</span> <span class="hps">aplicaciones</span> <span class="hps">soportadas</span> <span class="hps">por la</span> <span class="hps">Web.</span></span> <a href="https://developers.facebook.com/docs/guides/canvas/">Facebook apps</a> estan hechas para encajar en Facebook y <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">Chrome apps</a> estan diseñadas para dispositivos Chrome OS y servidores de Google. Las Chrome apps son las más similares a las Open Web Apps. <span id="result_box" lang="es"><span class="hps">Seguimos colaborando</span> <span class="hps">con el equipo de</span> <span class="hps">Google</span> <span class="hps">Chrome</span> <span class="hps">como las normas de las apps</span> <span class="hps">evolucionan y</span> <span class="hps">que sin duda</span> <span class="hps">compartimos </span>nuestra<span class="hps"> visión en gran parte.</span> <span class="hps">Existe</span> <span class="hps">un enorme potencial para</span> <span class="hps">todas las plataformas</span> <span class="hps">de apps</span> <span class="hps">basadas en la</span> <span class="hps">Web</span> <span class="hps">para converger</span> <span class="hps">e invitamos a</span> <span class="hps">todos los proveedores</span> <span class="hps">a ayudarnos</span> <span class="hps">a construir</span> las correctas <span class="hps">Open Web </span><span class="hps">App</span> <span class="hps">APIs.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">A pesar de que</span> <span class="hps">actualmente</span> <span class="hps">se debe tener</span> <span class="hps">un motor</span> <span class="hps">basado en Firefox</span> <span class="hps">Mozilla </span></span>("Web runtime") para usar las Open Web Apps, <span id="result_box" lang="es"><span>no</span> <span class="hps">se pretende que</span> <span class="hps">este</span> <span class="hps">será siempre el</span> <span class="hps">caso</span></span>. <span id="result_box" lang="es"><span class="hps">Muchas partes del</span> <span class="hps">proyecto de</span> <span class="hps">aplicaciones</span> <span class="hps">Web</span> <span class="hps">abiertas</span> <span class="hps">aún</span> <span class="hps">se están elaborando</span> <span class="hps">y no es</span> <span class="hps">posible implementar</span> <span class="hps">todo</span> <span class="hps">en todos los navegadores</span> <span class="hps">a la vez</span></span>. <span id="result_box" lang="es"><span class="hps">Aunque</span> <span class="hps">muchas partes de</span> las Open Web Apps <span class="hps">ya</span> <span class="hps">están estandarizadas,</span> <span class="hps">muchas otras partes</span> <span class="hps">todavía están</span> <span class="hps">en proceso de cambio</span><span>.</span> <span class="hps">Se pretende</span> <span class="hps">y se espera</span> <span class="hps">que las Open Web Apps </span><span class="hps">serán</span> <span class="hps">una </span><span class="hps">estándar que</span> <span class="hps">estará disponible en</span> <span class="hps">los principales navegadores</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Por lo tanto</span><span>, cuando usted lee</span> <span class="hps">las páginas</span> de <span class="hps">MDN</span> <span class="hps">que tienen que ver</span> <span class="hps">con</span> <span class="hps">las</span> <span class="hps">Open Web</span><span> Apps,</span> <span class="hps">por favor, tenga</span> <span class="hps">en cuenta que</span> <span class="hps">a pesar de que</span> <span class="hps">mucha de la información</span> <span class="hps">es específica para</span> <span class="hps">Firefox</span> <span class="hps">en este momento,</span> <span class="hps">es de esperar que</span> <span class="hps">se permitirá desarrollar</span> <span class="hps">Open Web Apps</span> <span class="hps">para todos los navegadores</span> <span class="hps">en el futuro.</span></span></p> - -<h2 id="Estándares_Web">Estándares Web</h2> - -<p><span id="result_box" lang="es"><span class="hps">La tecnología de</span> <span class="hps">OWA</span> <span class="hps">no es una</span> <span class="hps">sola pieza</span><span>, es</span> <span class="hps">un paraguas</span> <span class="hps">que agrupa a</span> <span class="hps">muchas tecnologías</span> <span class="hps">diferentes</span> <span class="hps">y algunas</span> <span class="hps">de ellas</span> <span class="hps">son muy nuevas</span><span>.</span> <span class="hps">Por el momento</span><span>, partes de</span> <span class="hps">OWA</span> <span class="hps">están estandarizadas</span> <span class="hps">(HTML5</span><span>, CSS</span><span>, JavaScript,</span> <span class="hps">IndexedDB</span><span>, etc.)</span></span>. <span id="result_box" lang="es"><span class="hps">Otras partes</span> <span class="hps">aún no</span> <span class="hps">están estandarizadas y</span> <span class="hps">la implementación</span><span class="hps"> Mozilla</span> <span class="hps">es</span> solo <span class="hps">específica</span> <span class="hps">para</span> <span class="hps">Firefox o</span> <span class="hps">a alguna otra</span> <span class="hps">tecnología de Mozilla</span><span>.</span> <span class="hps">Como</span> <span class="hps">la misión de</span> <span class="hps">Mozilla</span> <span class="hps">es</span> <span class="hps">de compartir y</span> <span class="hps">potenciar a</span> <span class="hps">todos,</span> <span class="hps">esta situación</span> <span class="hps">es sólo temporal.</span> <span class="hps">Es por eso que</span> <span class="hps">en la documentación</span> <span class="hps">OWA</span> <span class="hps">vamos a tratar de</span> <span class="hps">identificar claramente las</span> <span class="hps">partes de</span> <span class="hps">OWA</span> <span class="hps">que no están</span> <span class="hps">todavía</span> <span class="hps">estandarizadas.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Tenga en cuenta también</span> <span class="hps">que puede haber</span> <span class="hps">algunas propuestas</span> <span class="hps">relacionadas con</span> <span class="hps">OWA</span> <span class="hps">y normas</span> <span class="hps">potenciales que</span> <span class="hps">no son utilizadas por</span> <span class="hps">Mozilla.</span></span></p> - -<h3 id="Normas_eventualmente_previstas.">Normas eventualmente previstas.</h3> - -<p><span id="result_box" lang="es"><span class="hps">Así que aquí están</span> <span class="hps">las piezas no</span> <span class="hps">estandarizadas</span> <span class="hps">aún</span> <span class="hps">a través de las</span> <span class="hps">distintas plataformas</span> <span class="hps">web y</span> <span class="hps">que aún</span> <span class="hps">son</span> <span class="hps">Firefox</span><span>, sólo</span> <span class="hps">por el momento</span><span>:</span></span></p> - -<ul> - <li><a href="/en-US/docs/Web/Apps/Manifest">OWA manifest</a> para definir la app.</li> - <li><a href="/en-US/docs/Web/Apps/JavaScript_API">The Complete OWA API</a> para trabajar con apps.</li> - <li><a href="https://wiki.mozilla.org/WebAPI">Web APIs</a> para acceder a cosas como el tel<b>é</b>fono, geolocalización, etc. Tambien puedes ver <a href="http://arewemobileyet.com/">arewemobileyet.com</a> para un reporte de status.</li> - <li><a href="/en-US/docs/Mozilla/Persona">Identity (Persona)</a> para trabajar con los datos de usuario.</li> - <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">WebPayment API</a> para facilitar los pagos en apps y las compras de apps para cualquier Marketplace.</li> - <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">OWA Receipts</a> para verificar el pago de apps en cualquier dispositivo y vender apps para cualquier Marketplace.</li> -</ul> - -<h3 id="Marketplace">Marketplace</h3> - -<h4 id="Compra_una_vez_Ejecuta_donde_sea">Compra una vez, Ejecuta donde sea</h4> - -<p><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">el principio</span> <span class="hps">Mozilla</span> <span class="hps">ha</span> construido <span class="hps">un sistema de</span> <span class="hps">aplicaciones</span> <span class="hps">que permite a</span> <span class="hps">los usuarios comprar</span> <span class="hps">una aplicación</span> <span class="hps">una vez</span> <span class="hps">y ejecutarla en</span> <span class="hps">todos sus dispositivos</span> <span class="hps">HTML5</span><span>.</span> <span class="hps">Muy</span> <span class="hps">pronto</span> <span class="hps">Mozilla</span></span> <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">lanzara el smartphone FirefoxOS</a> <span id="result_box" lang="es"><span class="hps">pero eso será</span> <span class="hps">sólo un</span> <span class="hps">dispositivo en el que</span> <span class="hps">se ejecuten</span> <span class="hps">sus aplicaciones</span><span>.</span> <span class="hps">Cuando usted compra</span> <span class="hps">una aplicación</span> <span class="hps">a través de la</span></span> <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, <span class="short_text" id="result_box" lang="es"><span class="hps">el sistema instala</span> <span class="hps">un recibo</span> <span class="hps">en su dispositivo</span></span>. El <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">recibo</a> es un JSON Web Token con metadata <span id="result_box" lang="es"><span class="hps">que enlaza con</span> <span class="hps">la clave pública del</span> <span class="hps">mercado</span> <span class="hps">y su</span> <span class="hps">dirección URL del servicio</span> <span class="hps">de verificación</span></span>. <span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">una aplicación</span> <span class="hps">se inicia</span><span>, puede</span> <span class="hps">verificar</span> el recibo <span class="hps">pero</span> el recibo <span class="hps">en el dispositivo no</span> <span class="hps">está</span> <span class="hps">atado al</span> <span class="hps">Firefox MarketPlace.</span> <span class="hps">El recibo es</span> <span class="hps">sólo una prueba</span> <span class="hps">criptográficamente</span> <span class="hps">verificable</span> <span class="hps">de compra.</span> <span class="hps">Cualquiera puede</span> <span class="hps">vender</span> <span class="hps">Open Web Apps</span> <span class="hps">si siguen las</span> <span class="hps">especificaciones del</span> <span class="hps">recibo</span><span>.</span> <strong><span class="hps">Cuando usted compra</span> <span class="hps">una aplicación</span><span>, se</span> <span class="hps">pretende que sea</span> <span class="hps">portable a través de</span> <span class="hps">cualquier dispositivo compatible con</span> <span class="hps">el sistema de</span> Open Web Apps<span>.</span></strong></span></p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Mozilla</span> <span class="hps">está construyendo</span> <span class="hps">la infraestructura necesaria</span> <span class="hps">para ejecutar</span> <span class="hps">Open Web Apps</span> <span class="hps">en cualquier dispositivo</span> <span class="hps">HTML5.</span> <span class="hps">Firefox</span> <span class="hps">para Android</span> <span class="hps">le permitirá instalar</span> <span class="hps">y ejecutar</span> <span class="hps">aplicaciones</span> <span class="hps atn">(</span><span>se puede probar</span> <span class="hps">hoy</span><span>)</span><span>.</span> <span class="hps">Los iconos de las apps instaladas estarán en tu pantalla principal justo como en las aplicaciones normales de Android. También se puede</span> <span class="hps">instalar y ejecutar</span> <span class="hps">Open Web Apps </span><span class="hps">en el escritorio</span> <span class="hps">de Windows</span><span>, Mac</span> <span class="hps">o</span> <span class="hps">Linux</span> <span class="hps">usando</span> <span class="hps">Firefox</span> <span class="hps">(esto funciona</span> <span class="hps">actualmente</span><span>)</span><span>.</span> <span class="hps">Actualmente</span> <span class="hps">se requiere</span> <span class="hps">alguna versión de</span> <span class="hps">Firefox</span><span>, pero</span> <span class="hps">está previsto que</span> <span class="hps">el sistema de</span> <span class="hps">Open Web</span> <span class="hps">finalmente</span> <span class="hps">reciba el apoyo de</span> <span class="hps">todos los navegadores</span> <span class="hps">principales con</span> <span class="hps">un conjunto de normas</span><span>.</span> <span class="hps">Desde el primer día</span> <span class="hps">Mozilla</span> <span class="hps">ha</span> <span class="hps">incluido todos</span> <span class="hps">los navegadores</span> <span class="hps">compatibles con</span> <span class="hps">HTML5</span> <span class="hps">en su</span> <span class="hps">prueba de</span> <span class="hps">conceptos</span><span>, se puede</span> <span class="hps">echar un vistazo a</span> <span class="hps">esta</span> <span class="hps">shim alojada en</span> <span class="hps">JavaScript</span> <span class="hps">para obtener ideas sobre</span> <span class="hps">cómo apoyar a</span> <span class="hps">la plataforma de</span> <span class="hps">aplicaciones</span> <span class="hps">en un navegador</span> <span class="hps">que no sea Firefox</span><span>.</span></span></div> - -<div dir="ltr" style="zoom: 1;"> </div> -</div> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">el futuro, el</span> <span class="hps">sistema de</span> Open Web Apps <span class="hps">apoyará </span></span><a href="http://docs.services.mozilla.com/aitc/">sinconizando tus apps instaladas</a> entre dispositivos. <span id="result_box" lang="es"><span class="hps">Dado que</span> <span class="hps">los recibos</span> <span class="hps">son portátiles</span> <span class="hps">sólo podrías</span> <span class="hps">sincronizarlos</span> <span class="hps">tú mismo</span> <span class="hps">si quieres</span><span>.</span> <span class="hps">En caso de que</span> <span class="hps">no, es obvio</span><span> que siempre se puede</span> <span class="hps">ejecutar una</span> <span class="hps">Open Web App</span><span class="hps"> gratis</span> <span class="hps">en cualquier navegador</span><span>, ya que</span> <span class="hps">no</span> <span class="hps">es diferente de</span> <span class="hps">un sitio web</span></span>. </p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="es"><span class="hps">Se podría</span><span>, sin embargo</span><span>,</span> <span class="hps">utilizar las nuevas</span></span><a href="https://wiki.mozilla.org/WebAPI/"> APIs especificas para mobiles</a> <span class="short_text" id="result_box" lang="es"><span class="hps">que no</span> <span class="hps">se aplican</span> <span class="hps">en todas las plataformas</span><span>.</span></span></div> - -<div dir="ltr" style="zoom: 1;"> </div> -</div> - -<p><span id="result_box" lang="es"><span class="hps">El video a continuación</span> <span class="hps">ofrece</span> <span class="hps">un panorama útil de</span> <span class="hps">las ventajas de</span> <span class="hps">los MarketPlace</span> <span class="hps">abiertos</span> <span class="hps">y un enfoque</span> para el descubrimiento de las Open Apps<span>:</span></span></p> - -<p></p><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/QCH_ncCrZfE?rel=0&html5=1"></iframe></div></div><p></p> - -<h3 id="WebPayment_API">WebPayment API</h3> - -<h4 id="Comercio_para_Apps">Comercio para Apps</h4> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Parte del éxito</span> <span class="hps">de las</span> <span class="hps">plataformas de aplicaciones</span> <span class="hps">móviles como</span> <span class="hps">iOS</span> <span class="hps">y Android</span> <span class="hps">es que hacen</span> <span class="hps">que sea muy fácil</span> <span class="hps">de probar</span> <span class="hps">nuevos modelos de negocio</span> <span class="hps">a través de</span> <span class="hps">los pagos móviles</span><span>.</span> <span class="hps">Estos modelos</span> <span class="hps">todavía</span> <span class="hps">están evolucionando</span> <span class="hps">pero el comercio</span> <span class="hps">es</span> <span class="hps">sin duda</span> <span class="hps">algo que</span><span>,</span> <span class="hps">en el momento</span><span>,</span> <span class="hps">es</span> <span class="hps">incómodo</span> <span class="hps">en la Web</span> <span class="hps">de escritorio</span> <span class="hps">y</span> <span class="hps">más natural</span> <span class="hps">en el móvil</span><span>.</span> <span class="hps">En concreto</span><span>, es muy</span> <span class="hps">conveniente para cargar</span> <span class="hps">algo a su</span> <span class="hps">factura de teléfono</span> <span class="hps">cuando</span> <span class="hps">usted ya está</span> <span class="hps">accediendo a ella</span> <span class="hps">desde el teléfono</span> <span class="hps">de todos modos.</span></span> <span id="result_box" lang="es"><span class="hps">Con el lanzamiento de</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>, el entorno de</span> <span class="hps">aplicaciones</span> <span class="hps">apoyará</span> <span class="hps">compras de aplicaciones</span> <span class="hps">y los pagos</span> <span class="hps">dentro de la aplicación</span> <span class="hps">a través de la</span></span> <a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="">WebPayment API</a>.<span id="result_box" lang="es"><span class="hps"> Apoyar</span> <span class="hps">el comercio</span> <span class="hps">es crucial</span> <span class="hps">para el crecimiento de</span> <span class="hps">una plataforma de</span> <span class="hps">aplicaciones</span><span>.</span> <strong><span class="hps">El</span> <span class="hps">uso de</span> <span class="hps">la API de</span> <span class="hps">pago propuesto</span> <span class="hps">es</span> <span class="hps">completamente opcional</span><span>.</span> </strong><span class="hps">Mozilla</span> <span class="hps">no impedirá que</span> <span class="hps">cualquier aplicación</span><span class="hps"> utilice su</span> <span class="hps">propio</span> <span class="hps"><span id="result_box" lang="es"><span class="hps">sistema de pago independiente</span></span></span><span>.</span></span></div> - -<div dir="ltr" style="zoom: 1;"> </div> -</div> - -<h2 id="Véase_también">V<span class="short_text" id="result_box" lang="es"><span class="hps">éase también</span></span></h2> - -<ul> - <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, por Kumar McMillan (el blog publica <span id="result_box" lang="es"><span class="hps">mucho</span> <span class="hps">de los contenidos</span> <span class="hps">de este artículo</span><span>)</span></span></li> - <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, por Paul Irish</li> -</ul> diff --git a/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html b/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html deleted file mode 100644 index a1f58175e8..0000000000 --- a/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Tu primera Aplicación -slug: Archive/B2G_OS/Quickstart/tu_primera_aplicacion -translation_of: Archive/B2G_OS/Quickstart/Your_first_app ---- -<article class="brush: js"> -<div class="summary"> -<p>Las aplicaciones de la web abierta le dan a los desarrolladores lo que justamente han querido por años: un entorno multiplataforma dedicado a la construccion de aplicaciones con HTML, CSS y Javascript, con Firefox OS siendo la primera plataforma dedicada a las aplicaciones web. Esta guía tiene como objetivo iniciarte y orientarte rápidamente en una estructura básica e instrucciones de construcción, ¡de tal manera que tú puedas crear la siguiente generación de aplicaciones!</p> -</div> - -<p>Si deseas continuar con esta guía, puedes descargar nuestro<span style="line-height: 21px;"> </span><a href="https://github.com/chrisdavidmills/mdn-app-template" style="line-height: 21px;">quick start app template</a>. Encuentra más provechoso el contenido leyendo la guía <span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template" style="line-height: 21px;">Apps template</a><span style="line-height: 21px;">.</span></p> - -<h2 id="Estructura_de_la_Aplicación">Estructura de la Aplicación</h2> - -<h3 id="Aplicaciones_Empaquetadas_vs._Aplicaciones_Alojadas">Aplicaciones Empaquetadas vs. Aplicaciones Alojadas</h3> - -<p>Hay dos tipos de aplicaciones web abiertas: <code>empaquetadas </code>y <code>alojadas. </code>Las aplicaciones empaquetadas son esencialmente archivos <code>zip</code> conteniendo todos los archivos necesarios: HTML, CSS, JavaScript, imágenes, manifest, etc. Las aplicaciones alojadas están corriendo desde un servidor en un dominio dado, como un sitio web estandard. Ambos tipos de aplicaciones requieren un manifest válido. Cuando llega el momento de listar tu aplicación en el Firefox Marketplace, ya sea que tu subas tu aplicación como un archivo zip o la URL del servidor donde está tu aplicación.</p> - -<div><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/Q7x-B13y33Q?rel=0&html5=1"></iframe></div></div> -<div class="video-caption"> -<p>Hecho en colaboración con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> -</div> -</div> - -<p>A los efectos de esta guía, crearás una aplicación alojada que vivirá en tu dirección <code>localhost</code>. Una vez que tu aplicación esté lista para ser publicada en el Firefox Marketplace, podras tomar la decisión de agruparla como una aplicación empaquetada o lanzarla como una aplicación alojada.</p> - -<h3 id="Manifest_de_la_Aplicación">Manifest de la Aplicación</h3> - -<p>Cada aplicación de Firefox requiere un archivo manifest.webapp en la raíz de la aplicación. El archivo <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> proporciona información importante sobre la aplicación, como la versión, nombre, descripción, localización de íconos, strings locales, dominios donde la aplicación puede ser instalada, y mucho más. Sólo el nombre y la descripción son obligatorios. Una plantilla simple dentro de la aplicación es similar a lo que sigue:</p> - -<pre class="brush: js">{ - "version": "0.1", - "name": "Open Web App", - "description": "Your new awesome Open Web App", - "launch_path": "/app-template/index.html", - "icons": { - "16": "/app-template/app-icons/icon-16.png", - "48": "/app-template/app-icons/icon-48.png", - "128": "/app-template/app-icons/icon-128.png" - }, - "developer": { - "name": "Your Name", - "url": "http://yourawesomeapp.com" - }, - "locales": { - "es": { - "description": "Su nueva aplicación impresionante Open Web", - "developer": { - "url": "http://yourawesomeapp.com" - } - }, - "it": { - "description": "Il vostro nuovo fantastico Open Web App", - "developer": { - "url": "http://yourawesomeapp.com" - } - } - }, - "default_locale": "en" -}</pre> - -<div><div class="intrinsic-wrapper"><div class="intrinsic-container "><iframe src="https://www.youtube.com/embed/dgAUgHQOm8M#t?rel=0&html5=1"></iframe></div></div> -<div class="video-caption"> -<p>Hecho en colaboración con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">Check them out!</a></p> -</div> -</div> - -<p> </p> - -<p>Un manifiesto básico es todo lo que necesitas para empezar. Para más detalles sobre los manifiestos, lee <a href="/en-US/docs/Web/Apps/Manifest">App Manifest</a>.</p> - -<h2 id="App_Layout_Design">App Layout & Design</h2> - -<p>El <em>responsive design</em> (diseño adaptativo) se ha convertido cada vez más importante a medida que más resoluciones de pantalla en diferentes dispositivos se convierten en la norma. Aunque el principal objetivo de tu aplicación sean las plataformas móviles como Firefox OS, otros dispositivos probablemente también tengan acceso a ella. Las <a href="//developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a> permiten adaptar el diseño al dispositivo, como se muestra en este ejemplo de esqueleto en CSS:</p> - -<pre class="brush: css">/* The following are examples of different CSS media queries */ - -/* Basic desktop/screen width sniff */ -@media only screen and (min-width : 1224px) { - /* styles */ -} - -/* Traditional iPhone width */ -@media - only screen and (-webkit-min-device-pixel-ratio : 1.5), - only screen and (min-device-pixel-ratio : 1.5) { - /* styles */ -} - -/* Device settings at different orientations */ -@media screen and (orientation:portrait) { - /* styles */ -} -@media screen and (orientation:landscape) { - /* styles */ -}</pre> - -<p>Hay muchos <em>frameworks</em> JavaScript y CSS disponibles para ayudar en el diseño adaptativo y el desarrollo de aplicaciones móviles (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.). Elige el <em>frameworks(s)</em> que mejor se adapte a tu aplicación y estilo de desarrollo.</p> - -<h2 id="Web_APIs">Web APIs</h2> - -<p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. JavaScript feature detection is still the best practice, as shown in the following example:</p> - -<pre class="brush: js">// If this device supports the vibrate API... -if('vibrate' in navigator) { - // ... vibrate for a second - navigator.vibrate(1000); -}</pre> - -<p>In the following example, the display style of a <code><div></code> is modified based on changes in the battery state of the device:</p> - -<pre class="brush: java">// Create the battery indicator listeners -(function() { - var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, - indicator, indicatorPercentage; - - if(battery) { - indicator = document.getElementById('indicator'), - indicatorPercentage = document.getElementById('indicator-percentage'); - - // Set listeners for changes - battery.addEventListener('chargingchange', updateBattery); - battery.addEventListener('levelchange', updateBattery); - - // Update immediately - updateBattery(); - } - - function updateBattery() { - // Update percentage width and text - var level = (battery.level * 100) + '%'; - indicatorPercentage.style.width = level; - indicatorPercentage.innerHTML = 'Battery: ' + level; - // Update charging status - indicator.className = battery.charging ? 'charging' : ''; - } -})();</pre> - -<p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> - -<p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses.</p> - -<h3 id="Install_API_functionality">Install API functionality</h3> - -<p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> - -<pre class="brush: html"><button id="install-btn">Install app</button></pre> - -<p>This button's functionality is implemented using the Install API (see install.js):</p> - -<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; - -function install(ev) { - ev.preventDefault(); - // define the manifest URL - // install the app - var installLocFind = navigator.mozApps.install(manifest_url); - installLocFind.onsuccess = function(data) { - // App is installed, do something - }; - installLocFind.onerror = function() { - // App wasn't installed, info is in - // installapp.error.name - alert(installLocFind.error.name); - }; -}; - -// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. -var button = document.getElementById('install-btn'); - -var installCheck = navigator.mozApps.checkInstalled(manifest_url); - -installCheck.onsuccess = function() { - if(installCheck.result) { - button.style.display = "none"; - } else { - button.addEventListener('click', install, false); - }; -}; -</pre> - -<p>Let's run through briefly what is going on:</p> - -<ol> - <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> - <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> - <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> - <li>We then test for the existence of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> - <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> - <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.</li> -</ol> - -<p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> - -<div class="note"> -<p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> -</div> - -<h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> - -<p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> - -<pre class="brush: js">// New key in the manifest: "permissions" -// Request access to any number of APIs -// Here we request permissions to the systemXHR API -"permissions": { - "systemXHR": {} -}</pre> - -<p>The three levels of permission are as follows:</p> - -<ul> - <li>Normal — APIs that don't need any kind of special access permissions.</li> - <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> - <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> -</ul> - -<p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> - -<div class="note"> -<p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> -</div> - -<h2 id="Tools_Testing">Tools & Testing</h2> - -<p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.</p> - -<h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> - -<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.</p> - -<h3 id="App_Manager">App Manager</h3> - -<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> - -<h3 id="Unit_Testing">Unit Testing</h3> - -<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> - -<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> - -<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> - -<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> - -<h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> - -<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.</p> - -<h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> - -<ol> - <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> - <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> - <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> -</ol> -</article> |