Revision 347519 of Preguntas frecuentes sobre aplicaciones

  • Revision slug: Apps/FAQs/Sobre_aplicaciones
  • Revision title: Preguntas frecuentes sobre aplicaciones
  • Revision id: 347519
  • Created:
  • Creator: MPoli
  • Is current revision? No
  • Comment

Revision Content

¿Qué es una aplicación de web abierta técnicamente?

Una aplicación de web abierta es mucho más que una aplicación HTML. Hay que pensar que las "Open Web Apps" (OWA) son aplicaciones construidas sobre estándares web o aplicaciones "Web Run Time" (WebRT).

Una aplicación WebRT se ejecuta fuera del navegador normal y puede iniciarse desde el escritorio (o el equivalente del dispositivo) en cualquiera de los dispositivos populares conectados a internet. Por supuesto, las aplicaciones WebRT también pueden ejecutarse dentro del navegador si el usuario lo prefiere.

Aunque HTML5 es una evolución de la especificación de sintaxis de HTML, en la práctica es una ola de tecnologías nuevas o mejoradas.

Para una aplicación de web abierta, puede usar:

  • HTML5 como la sintaxis declarativa para definir la estructura de la interface de usuario de la aplicación.
  • CSS3 como la sintaxis declarativa para definir el diseño, la estética visual y porciones del comportamiento de la UI. Usando CSS3, puede dejar a medida la experiencia visual de cualquier dispositivo que necesite una presentación específica sin tener que reimplementar la estructura o la lógica de programación.
  • JavaScript como la sintaxis imperativa para implementar la lógica a ser ejecutada en el dispositivo del cliente.
  • Nuevas tecnologías que son parte de la ola aunque no están en la especificación de markup de HTML5 como AppCache, WebStorage, WebSockets, WebWorkers, Server-Sent Events, Crypto API, etc.

Cuando sea apropiado, puede aumentar las aplicaciones WebRT con lógica del lado del servidor, para usar cuando el dispositivo del usuario esté conectado. Aunque las aplicaciones WebRT pueden ejecutarse estén o no conectadas a internet, se puede ofrecer una experiencia mejorada cuando esté conectado. Puede elegir cualquier platafoma o tecnología de lado del servidor que prefiera, ya que la aplicación y el servidor se comunican sobre HTTP/S usando mecanismos estándares como JSON y XML.

Portabilidad

Las aplicaciones de la web abierta se llaman abiertas porque deberían funcionar en cualquier plataforma web, ya sea Firefox, Chrome o la que sea en cualquier dispositivo ya sea un equipo de escritorio, laptop, teléfono, lo que sea. Así que teóricamente cuando desarrolla una OWA funcionará en cualquier parte. Prácticamente, ya que algunos fabricantes no apuntan completamente en la dirección de la estandarización, hacer que una OWA funcione de una plataforma web a otra puede requerir algún trabajo de adaptación que debería disminuir con el paso del tiempo.

Ya he hecho una aplicación web. ¿Cómo la transformo en una aplicación instalable?

{{ page("/en-US/docs/Apps/For_Web_developers", "Minimum requirements") }}

En la práctia, hay mucho más que necesita hacerse. Para más información, ver Desarrollo de aplicaciones para desarrolladores web.

¿Cuál es la diferencia entre una aplicación y un sitio web?

Una aplicación puede:

  • Ejecutarse fuera de un navegador normal
  • Ejecutarse si el dispositivo está conectado a internet o no
  • Ser iniciada de la misma forma en que una aplicación nativa se inicia

Como mínimo, una aplicación es un sitio web que puede "instalarse" en un dispositivo móvil o equipo para que parezca una aplicación nativa al usuario. Se puede distribuir ya sea en su propio sitio web o a través de una tienda de aplicaciones. Ambos puede hacerse usando estándares web abiertos como HTML5. Puede controlar el acceso a la aplicación web para que solamente accedan a ella los usuarios que pagan.

Un sitio que es una aplicación debería diseñarse para trabajar cuando el dispositivo no esté en internet, o al menos fallar sin generar problemas. Construir aplicaciones HTML5 Web runtime (a diferencia de construir sitios que siempre serán visitados desde internet en un navegador) requiere alguno agregados a la arquitectura para manejar estados como "a veces conectado," etc.

Construir sitios HTML5 (en vez de aplicaciones) tiende a hacer foco en implementar la estructura de la página usando la nueva semántica de HTML5.

Hay que notar que aplicaciones versus sitios HTML5 no es una proposición o la otra. Puede construir "aplicaciones" HTML5 que se ejecuten tanto dentro del navegador como afuera y puede diseñarlas para que provean una experiencia de usuario mejorada cuando el dispositivo del usuario está conectado a  Internet.

Ver también:

Should I build a website or an app?

Of course, it depends on your goals. In both cases, you can deliver your site on multiple device platforms by using the standard "Web stack" of technologies (HTML/CSS/JavaScript). However, an advantage of a Web app is that it looks like a native application to users — they can launch it from their home screen or desktop, without having to find a bookmark or remember a URL. This means they are more likely to use it and keep returning to it than a website.

What is the difference between an app and an add-on?

Add-ons (such as built with JetPack) are extensions to your Firefox browser. Add-ons provide little or no UI component at all, and only extend the capabilities/behavior of the browser in specific ways. For example add-ons can provide new buttons to the UI (for example by adding a button near the address bar to block ads, or new menu items to change some options), or change internal functions (for example by improving your privacy through the processing of the Web browser in-and-out net traffic).

Apps (theoretically) run in any modern Web browser (both on desktop as well as mobile) and are not browser specific. Apps are complete applications such as office applications, productivity applications, image processing applications, games, etc.

Finally, add-ons are usually in effect across all websites (for example ads can be blocked on all websites, network privacy improved while visiting all websites), even if some add-ons are designed to interact with specific web sites/services. Apps on the other side don’t combine with other apps in this way; they run standalone, like any regular website.

Comparison

Add-on:

  • is browser specific
  • extends the browser default capabilities
  • is effective on all visited web sites
  • can be active in the browser with unlimited other add-ons

Open Web App:

  • is web platform neutral (theoretically)
  • is tied to a specific business case or use case
  • runs outside of a normal browser, is "a kind of website" by itself
  • is only one web app at the time (obviously)
  • might install a link/icon in the menus/desktop of the host system to get started

What tools should I use to build Open Web Apps?

Use the same tool set you would choose for Web development on your platform of choice. Most "current" editors and IDEs for Web development support HTML5 syntax.

Can my app access device-level APIs?

The Web Run Time has access to necessary device APIs like Camera and Vibration. The Mozilla Web API project is working on expanding this list.

Hows does an Open Web App work across platforms? Form factors?

Unlike proprietary languages or runtimes, HTML, CSS and JavaScript have already been implemented on all popular modern devices where customers want to use applications.

There are, however, unavoidable differences in form factor between disparate devices. A carefully designed and well developed application can implement one set of HTML and JavaScript for an application and then form-factor specific CSS files to adapt layout and other aesthetic attributes as desired.

If you wish to provide the richest possible experience, you can also write code to detect the presence of "optional devices" like a camera, and leverage them as appropriate for the application.

How can my app detect that it is in the Web runtime?

One way to do this is to use the navigator.mozApps.getSelf() function.

A way to detect that an app is running in chromeless mode (no URL bar and so on) is to check the window.locationbar.visible property. If the app is in the Web runtime, window.locationbar.visible will be false. For example, if the following check returns true, the app is in a chromeless window:

window.locationbar && !window.locationbar.visiblentas 

Revision Source

<h2 id="What_is_an_Open_Web_App.2C_technically.3F">¿Qué es una aplicación de web abierta técnicamente?</h2>
<p>Una aplicación de web abierta es mucho más que una aplicación HTML. Hay que pensar que las "Open Web Apps" (OWA) son aplicaciones construidas sobre estándares web o aplicaciones "Web Run Time" (WebRT).</p>
<p>Una aplicación WebRT se ejecuta fuera del navegador normal y puede iniciarse desde el escritorio (o el equivalente del dispositivo) en cualquiera de los dispositivos populares conectados a internet. Por supuesto, las aplicaciones WebRT también pueden ejecutarse dentro del navegador si el usuario lo prefiere.</p>
<p>Aunque HTML5 es una evolución de la especificación de sintaxis de HTML, en la práctica es una ola de tecnologías nuevas o mejoradas.</p>
<p>Para una aplicación de web abierta, puede usar:</p>
<ul>
  <li><a href="/es/docs/HTML/HTML5"><strong>HTML5</strong></a> como la sintaxis declarativa para definir la estructura de la interface de usuario de la aplicación.</li>
  <li><a href="/es/docs/CSS/CSS3"><strong>CSS3</strong></a> como la sintaxis declarativa para definir el diseño, la estética visual y porciones del comportamiento de la UI. Usando CSS3, puede dejar a medida la experiencia visual de cualquier dispositivo que necesite una presentación específica sin tener que reimplementar la estructura o la lógica de programación.</li>
  <li><a href="/es/docs/JavaScript"><strong>JavaScript</strong></a> como la sintaxis imperativa para implementar la lógica a ser ejecutada en el dispositivo del cliente.</li>
  <li>Nuevas tecnologías que son parte de la ola aunque no están en la especificación de <em>markup</em> de HTML5 como <a href="/en-US/docs/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Storage">WebStorage</a>, <a href="/en-US/docs/WebSockets">WebSockets</a>, <a href="/en-US/docs/DOM/Using_web_workers">WebWorkers</a>, <a href="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/DOM/window.crypto">Crypto API,</a> etc.</li>
</ul>
<p>Cuando sea apropiado, puede aumentar las aplicaciones WebRT con lógica del lado del servidor, para usar cuando el dispositivo del usuario esté conectado. Aunque las aplicaciones WebRT pueden ejecutarse estén o no conectadas a internet, se puede ofrecer una experiencia mejorada cuando esté conectado. Puede elegir cualquier platafoma o tecnología de lado del servidor que prefiera, ya que la aplicación y el servidor se comunican sobre <a href="/es/docs/HTTP">HTTP/S</a> usando mecanismos estándares como <a href="/es/docs/JSON">JSON</a> y <a href="/es/docs/XML">XML</a>.</p>
<h2 id="Portability">Portabilidad</h2>
<p>Las aplicaciones de la web abierta se llaman <em>abiertas</em> porque deberían funcionar en cualquier plataforma web, ya sea Firefox, Chrome o la que sea en cualquier dispositivo ya sea un equipo de escritorio, laptop, teléfono, lo que sea. Así que teóricamente cuando desarrolla una OWA funcionará en cualquier parte. Prácticamente, ya que algunos fabricantes no apuntan completamente en la dirección de la estandarización, hacer que una OWA funcione de una plataforma web a otra puede requerir algún trabajo de adaptación que debería disminuir con el paso del tiempo.</p>
<h2 id="I've_already_built_a_Web_application._How_do_I_make_it_into_an_installable_app.3F">Ya he hecho una aplicación web. ¿Cómo la transformo en una aplicación instalable?</h2>
<p>{{ page("/en-US/docs/Apps/For_Web_developers", "Minimum requirements") }}</p>
<p>En la práctia, hay mucho más que necesita hacerse. Para más información, ver <a href="/es/docs/Aplicaciones/Para_desarrolladores_web">Desarrollo de aplicaciones para desarrolladores web</a>.</p>
<h2 id="What_is_the_difference_between_an_app_and_a_website.3F">¿Cuál es la diferencia entre una aplicación y un sitio web?</h2>
<p>Una aplicación puede:</p>
<ul>
  <li>Ejecutarse fuera de un navegador normal</li>
  <li>Ejecutarse si el dispositivo está conectado a internet o no</li>
  <li>Ser iniciada de la misma forma en que una aplicación nativa se inicia</li>
</ul>
<p>Como mínimo, una aplicación es un sitio web que puede "instalarse" en un dispositivo móvil o equipo para que parezca una aplicación nativa al usuario. Se puede distribuir ya sea en su propio sitio web o a través de una tienda de aplicaciones. Ambos puede hacerse usando estándares web abiertos como HTML5. Puede controlar el acceso a la aplicación web para que solamente accedan a ella los usuarios que pagan.</p>
<p>Un sitio que es una aplicación debería diseñarse para trabajar cuando el dispositivo no esté en internet, o al menos fallar sin generar problemas. Construir aplicaciones HTML5 Web runtime (a diferencia de construir sitios que siempre serán visitados desde internet en un navegador) requiere alguno agregados a la arquitectura para manejar estados como "a veces conectado," etc.</p>
<p>Construir sitios HTML5 (en vez de aplicaciones) tiende a hacer foco en implementar la estructura de la página usando la nueva semántica de HTML5.</p>
<p>Hay que notar que aplicaciones versus sitios HTML5 no es una proposición o la otra. Puede construir "aplicaciones" HTML5 que se ejecuten tanto dentro del navegador como afuera y puede diseñarlas para que provean una experiencia de usuario mejorada cuando el dispositivo del usuario está conectado a&nbsp; Internet.</p>
<p>Ver también:</p>
<ul>
  <li><a href="/en-US/docs/Apps/Using_apps_offline">Using apps offline</a></li>
  <li><a class="external" href="http://www.misfitgeek.com/2011/11/html5-app-versus-html5-page/">HTML5 App Vs. HTML5 Page — What's the Difference?</a></li>
</ul>
<h2 id="Should_I_build_a_website_or_an_app.3F">Should I build a website or an app?</h2>
<p>Of course, it depends on your goals. In both cases, you can deliver your site on multiple device platforms by using the standard "Web stack" of technologies (HTML/CSS/JavaScript). However, an advantage of a Web app is that it looks like a native application to users — they can launch it from their home screen or desktop, without having to find a bookmark or remember a URL. This means they are more likely to use it and keep returning to it than a website.</p>
<h2 id="What_is_the_difference_between_an_app_and_an_add-on.3F">What is the difference between an app and an add-on?</h2>
<p>Add-ons (such as built with <a href="/en-US/docs/Jetpack">JetPack</a>) are extensions to your Firefox browser. Add-ons provide little or no UI component at all, and only extend the capabilities/behavior of the browser in specific ways. For example add-ons can provide new buttons to the UI (for example by adding a button near the address bar to block ads, or new menu items to change some options), or change internal functions (for example by improving your privacy through the processing of the Web browser in-and-out net traffic).</p>
<p>Apps (theoretically) run in any modern Web browser (both on desktop as well as mobile) and are not browser specific. Apps are complete applications such as office applications, productivity applications, image processing applications, games, etc.</p>
<p>Finally, add-ons are usually in effect across all websites (for example ads can be blocked on all websites, network privacy improved while visiting all websites), even if some add-ons are designed to interact with specific web sites/services. Apps on the other side don’t combine with other apps in this way; they run standalone, like any regular website.</p>
<h3 id="Comparison">Comparison</h3>
<p>Add-on:</p>
<ul>
  <li>is browser specific</li>
  <li>extends the browser default capabilities</li>
  <li>is effective on all visited web sites</li>
  <li>can be active in the browser with unlimited other add-ons</li>
</ul>
<p>Open Web App:</p>
<ul>
  <li>is web platform neutral (theoretically)</li>
  <li>is tied to a specific business case or use case</li>
  <li>runs outside of a normal browser, is "a kind of website" by itself</li>
  <li>is only one web app at the time (obviously)</li>
  <li>might install a link/icon in the menus/desktop of the host system to get started</li>
</ul>
<h2 id="What_tools_should_I_use_to_build_Open_Web_Apps.3F">What tools should I use to build Open Web Apps?</h2>
<p>Use the same tool set you would choose for Web development on your platform of choice. Most "current" editors and IDEs for Web development support HTML5 syntax.</p>
<h2 id="Can_my_app_access_device-level_APIs.3F">Can my app access device-level APIs?</h2>
<p>The Web Run Time has access to necessary <a href="/en-US/docs/WebAPI">device APIs</a> like <a href="/en-US/docs/DOM/Using_the_Camera_API">Camera</a> and <a href="/en-US/docs/DOM/window.navigator.vibrate">Vibration</a>. The <a class="link-https" href="https://wiki.mozilla.org/WebAPI">Mozilla Web API project</a> is working on expanding this list.</p>
<h2 id="Hows_does_an_Open_Web_App_work_across_platforms.3F_Form_factors.3F">Hows does an Open Web App work across platforms? Form factors?</h2>
<p>Unlike proprietary languages or runtimes, HTML, CSS and JavaScript have already been implemented on all popular modern devices where customers want to use applications.</p>
<p>There are, however, unavoidable differences in form factor between disparate devices. A carefully designed and well developed application can implement one set of HTML and JavaScript for an application and then form-factor specific CSS files to adapt layout and other aesthetic attributes as desired.</p>
<p>If you wish to provide the richest possible experience, you can also write code to detect the presence of "optional devices" like a camera, and leverage them as appropriate for the application.</p>
<h2 id="How_can_my_app_detect_that_it_is_in_the_Web_runtime.3F">How can my app detect that it is in the Web runtime?</h2>
<p>One way to do this is to use the <a href="/en-US/docs/DOM/Apps.getSelf"><code>navigator.mozApps.getSelf()</code></a> function.</p>
<p>A way to detect that an app is running in chromeless mode (no URL bar and so on) is to check the <code>window.locationbar.visible</code> property. If the app is in the Web runtime, <code>window.locationbar.visible</code> will be <code>false</code>. For example, if the following check returns <code>true</code>, the app is in a chromeless window:</p>
<pre class="brush: js">
window.locationbar &amp;&amp; !window.locationbar.visiblentas </pre>
Revert to this revision