mozilla

Revision 347521 of Preguntas frecuentes sobre aplicaciones

  • Revision slug: Apps/FAQs/Sobre_aplicaciones
  • Revision title: Preguntas frecuentes sobre aplicaciones
  • Revision id: 347521
  • 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:

¿Deberia hacer un sitio web o una aplicacion?

Por supuesto, depende de sus metas. En ambos casos, puede entregar su sitio en plataformas multiples de dispositivos usando el "Web stack" estandar de tecnologias (HTML/CSS/JavaScript). Sin embargo, una ventaja de una aplicacion web es que se ve como una aplicacion nativa para los usuarios — pueden iniciarla desde la pantalla de inicio o el escritorio, sin tener que buscar un marcador o recordar una URL. Esto significa que es más probable que la usen y sigan haciéndolo que con un sitio web.

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

Los complementos (como los hechos con JetPack) son extensiones al navegador Firefox. Los complementos proveen muy poco componente de UI o ninguno y solamente extienden las capacidades/comportamiento del navegador en formas específicas. Por ejemplo, los complementos pueden proveer nuevos botones para la  UI (por ejemplo, agregando un botón cerca de la barra de direcciones para bloquear publicidades o nuevos ítems de menú para cambiar algunas opciones) o cambiar funciones internas (por ejemplo, mejorando la privacidad a través del procesamiento del tráfico de red del navegador).

Las aplicaciones (en teoría) se ejecutan en cualquier navegador moderno (tanto en escritorio como en dispositivos móviles) y no son específicas del navegador. Las aplicaciones están completas como las de oficina, productividad, procesamiento de imágenes, juegos, etc.

Finalmente, los complementos usualmente tienen efecto en todos los sitios web (por ejemplo, las publicidades pueden ser bloqueadas para todos los sitios y la privacidad de la red puede mejorarse al visitar todos los sitios), aunque algunos complementos están diseñados para interactuar con sitios/servicios web específicos. Las aplicaciones, por otro lado, no se combinan con otras aplicaciones en esta manera; se ejecutan solas, como cualquier sitio web regular.

Comparación

Complemento:

  • es específico del navegador
  • extiende las capacidades del navegador
  • es efectivo en todos los sitios web visitados
  • puede estar activo en el navegador con un númiero ilimitado de otros complementos

Aplicación de web abierta:

  • es neutral a la plataforma web (en teoría)
  • está atada a un caso de negocio o de uso específico
  • se ejecuta fuera de un navegador normal, es "un tipo de sitio web" en si misma
  • es solamente una aplicación web a la vez (obviamente)
  • podría instalar un enlace/ícono en los menúes/escritorio para iniciarse

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=".C2.BFQu.C3.A9_es_una_aplicaci.C3.B3n_de_web_abierta_t.C3.A9cnicamente.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="Portabilidad">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="Ya_he_hecho_una_aplicaci.C3.B3n_web._.C2.BFC.C3.B3mo_la_transformo_en_una_aplicaci.C3.B3n_instalable.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=".C2.BFCu.C3.A1l_es_la_diferencia_entre_una_aplicaci.C3.B3n_y_un_sitio_web.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">¿Deberia hacer un sitio web o una aplicacion?</h2>
<p>Por supuesto, depende de sus metas. En ambos casos, puede entregar su sitio en plataformas multiples de dispositivos usando el <em>"Web stack"</em> estandar de tecnologias (HTML/CSS/JavaScript). Sin embargo, una ventaja de una aplicacion web es que se ve como una aplicacion nativa para los usuarios — pueden iniciarla desde la pantalla de inicio o el escritorio, sin tener que buscar un marcador o recordar una URL. Esto significa que es más probable que la usen y sigan haciéndolo que con un sitio web.</p>
<h2 id="What_is_the_difference_between_an_app_and_an_add-on.3F">¿Cuál es la diferencia entre una aplicación y un complemento?</h2>
<p>Los complementos (como los hechos con <a href="/es/docs/Jetpack">JetPack</a>) son extensiones al navegador Firefox. Los complementos proveen muy poco componente de UI o ninguno y solamente extienden las capacidades/comportamiento del navegador en formas específicas. Por ejemplo, los complementos pueden proveer nuevos botones para la&nbsp; UI (por ejemplo, agregando un botón cerca de la barra de direcciones para bloquear publicidades o nuevos ítems de menú para cambiar algunas opciones) o cambiar funciones internas (por ejemplo, mejorando la privacidad a través del procesamiento del tráfico de red del navegador).</p>
<p>Las aplicaciones (en teoría) se ejecutan en cualquier navegador moderno (tanto en escritorio como en dispositivos móviles) y no son específicas del navegador. Las aplicaciones están completas como las de oficina, productividad, procesamiento de imágenes, juegos, etc.</p>
<p>Finalmente, los complementos usualmente tienen efecto en todos los sitios web (por ejemplo, las publicidades pueden ser bloqueadas para todos los sitios y la privacidad de la red puede mejorarse al visitar todos los sitios), aunque algunos complementos están diseñados para interactuar con sitios/servicios web específicos. Las aplicaciones, por otro lado, no se combinan con otras aplicaciones en esta manera; se ejecutan solas, como cualquier sitio web regular.</p>
<h3 id="Comparison">Comparación</h3>
<p>Complemento:</p>
<ul>
  <li>es específico del navegador</li>
  <li>extiende las capacidades del navegador</li>
  <li>es efectivo en todos los sitios web visitados</li>
  <li>puede estar activo en el navegador con un númiero ilimitado de otros complementos</li>
</ul>
<p>Aplicación de web abierta:</p>
<ul>
  <li>es neutral a la plataforma web (en teoría)</li>
  <li>está atada a un caso de negocio o de uso específico</li>
  <li>se ejecuta fuera de un navegador normal, es "un tipo de sitio web" en si misma</li>
  <li>es solamente una aplicación web a la vez (obviamente)</li>
  <li>podría instalar un enlace/ícono en los menúes/escritorio para iniciarse</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