Empaquetado de aplicaciones web

Buscar
Adobe Dreamweaver Guía del usuario
Se aplica a: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Empaquetado de aplicaciones web como aplicaciones móviles nativas (CS5.5)

La integración de Dreamweaver con jQuery Mobile y PhoneGap le ayuda a crear y empaquetar aplicaciones web para la implementación en dispositivos basados en Android™ e iOS. Dreamweaver utiliza SDK de PhoneGap para crear el paquete (archivo .apk para Android/.xcodeproj para iPhone/iPad)

Una vez que haya empaquetado una aplicación móvil con Dreamweaver, podrá verla en un emulador de dispositivo o implementarla en el propio dispositivo.

Nota:

La aplicación móvil que se empaquete con Dreamweaver es una aplicación para fines de depuración solamente. La aplicación se ejecutará en los emuladores de Android y iOS, o en su dispositivo móvil personal si realiza la transferencia, pero no podrá cargar las aplicaciones móviles de depuración en las tiendas de Apple y Android. Para poder cargar aplicaciones iOS o Android, es preciso firmarlas fuera de Dreamweaver. Para obtener más información sobre cómo cargar aplicaciones en las tiendas de Apple y Android, consulte la documentación de Android o la Program User Guide (guía del usuario del programa) del Apple iOS Provisioning Portal (portal de desarrollo iOS de Apple). (Para acceder a Apple iOS Provisioning Portal, debe registrarse en el Apple Developer Program [gratuito] e inscribirse en el iOS Developer Program [cuota anual]).

Creación de una aplicación Web mediante la página de inicio

Se puede utilizar cualquiera de las páginas de inicio para crear la aplicación Web. Sin embargo, si su aplicación Web, cuando se despliega como aplicación móvil, accede a funciones nativas de dispositivos móviles, utilice la página jQuery Mobile (PhoneGap).

La página de inicio de jQuery Mobile (PhoneGap) contiene el archivo phonegap.js, además del resto de archivos de jQuery Mobile. El archivo phonegap.js contiene las API necesarias para trabajar con las funciones nativas de móviles como GPS, acelerómetro, cámara, etc.

  1. Seleccione Archivo > Nuevo.

  2. Seleccione Página de muestra > Mobile Starters > jQuery Mobile (PhoneGap).

  3. Haga clic en Crear.

  4. En el panel Insertar (Ventana > Insertar), seleccione jQuery Mobile. Se muestran los componentes que se pueden añadir a la aplicación Web.

  5. En la vista de Diseño, coloque el cursor en el lugar en el que desea insertar el componente y haga clic en el componente en el panel Insertar. En el cuadro de diálogo que aparece, personalice los componentes empleando las opciones.

    Nota:

    Para editar el archivo PhoneGap.js, configure el framework de aplicación y la configuración de la aplicación. Para obtener más información, consulte los temas sobre la creación de paquetes de aplicaciones.

Obtenga una vista previa de la página en la Vista en vivo. Algunas de las clases CSS sólo se aplican en la Vista en vivo.

Requisitos del sistema para empaquetar aplicaciones

Debe asegurarse de que se cumplen los siguientes requisitos del sistema antes de empaquetar una aplicación.

MAC OS: iOS

  • Mac OS X Snow Leopard versión 10.6.x o posterior

  • Xcode 3.2.x con SDK de iOS (instrucciones de instalación incluidas a continuación).

MAC OS: Android

  • Mac OS X 10.5.8 o posterior (x86 solamente)

  • SDK de Android (instrucciones de instalación incluidas a continuación).

Windows: iOS

  • iOS solo se encuentra disponible para los usuarios que disponen de un equipo Apple

Windows: Android

  • Windows XP (32 bits), Vista (32 o 64 bits) o Windows 7 (32 o 64 bits)

  • SDK de Android (instrucciones de instalación incluidas a continuación).

Creación de un paquete de aplicación (Windows)

Para obtener más información sobre cómo crear una aplicación web, incluidos los archivos de ejemplo, consulte este tutorial en el Centro de desarrollo de Dreamweaver.

  1. Abra la aplicación Web que desea convertir en una aplicación móvil. Asegúrese de que la aplicación Web está configurada como un sitio en Dreamweaver y que el tamaño del sitio es inferior a 25 MB.

    Nota:

    Asegúrese de que la aplicación sólo contiene archivos HTML5, CSS y JavaScript.

  2. Seleccione Sitio > Aplicaciones móviles > Configurar framework de aplicación.

  3. Haga clic en Instalación sencilla para instalar el SDK de Android.

    Nota:

    En caso de error en la Instalación sencilla, consulte la nota técnica 90408.

  4. Seleccione una ubicación para instalar los archivos del SDK y haga clic en Seleccionar. Después de la instalación, haga clic en Guardar.

  5. Seleccione Sitio > Aplicaciones móviles > Configuración de aplicación.

  6. Para ID de paquete, introduzca un nombre para el paquete empleando la información del cuadro de diálogo.

  7. Escriba un nombre para la aplicación y el nombre de la persona que la ha diseñado.

  8. Opcionalmente, especifique lo siguiente:

    1. En PNG del icono de aplicación, especifique el archivo PNG que debe utilizarse como icono de la aplicación. Si no ha cambiado todavía el tamaño del icono, Dreamweaver lo cambiará al tamaño estándar.

    2. Especifique una ruta de destino para el paquete.

    3. Para descargar e instalar los componentes de SDK más recientes de Google, haga clic en Administrar AVD. Utilice Android SDK and AVD Manager para actualizar el SDK de Android. Para obtener más información sobre el uso del administrador, consulte http://developer.android.com/sdk/adding-components.html.

      Nota:

      Al hacer clic en Guardar, el archivo phonegap.js se copia en la raíz del sitio.

  9. Siga uno de estos procedimientos:

    • Si está implementando la aplicación directamente en un dispositivo, seleccione Sitio > Aplicaciones móviles > Crear. Seleccione una plataforma/un dispositivo para el build.

    • Si desea comprobar el aspecto del build en un emulador antes de crearlo, seleccione Sitio > Aplicaciones móviles > Crear y emular.

Creación de un paquete de aplicación (Mac OS)

Para ver un tutorial sobre la creación de una aplicación web, incluidos los archivos de ejemplo, consulte este artículo en el Centro de desarrollo de Dreamweaver.

  1. Abra la aplicación Web que desea convertir en una aplicación móvil. Asegúrese de que la aplicación Web está configurada como un sitio en Dreamweaver y que el tamaño del sitio es inferior a 25 MB.

    Nota:

    Asegúrese de que la aplicación sólo contiene archivos HTML5, CSS y JavaScript.

  2. Seleccione Sitio > Aplicaciones móviles > Configurar framework de aplicación.

  3. Instale el SDK para iOS o Android en función de sus necesidades:

    • Haga clic en el vínculo de Apple iOS Dev Center para descargar e instalar el SDK xcode e iOS. La aplicación se instala de manera predeterminada en el directorio OS <número de versión>/developer.

      Inicie una sesión en el Dev Center empleando su ID de Apple. El registro es gratuito. Cree una cuenta si no está registrado como usuario.

    Nota:

    Puede utilizar el paquete de SDK descargado de Apple Dev Center para realizar pruebas. Sin embargo, para cargar la aplicación en Apple Store, regístrese como desarrollador de Apple una vez que haya abonado la tarifa exigida.  

    • Haga clic en Instalación sencilla para instalar el SDK de Android.

    Nota:

    En caso de error en la Instalación sencilla, consulte la nota técnica 90408.

  4. Haga clic en Guardar.

  5. Seleccione Sitio > Aplicaciones móviles > Configuración de aplicación.

  6. Para ID de paquete, introduzca un nombre para el paquete empleando la información del cuadro de diálogo.

  7. Escriba un nombre para la aplicación y el nombre de la persona que la ha diseñado.

  8. Opcionalmente, proceda del siguiente modo:

    • (Android) En PNG del icono de aplicación, especifique el archivo PNG que debe utilizarse como icono de la aplicación Android. Si no ha cambiado todavía el tamaño del icono, Dreamweaver lo cambiará al tamaño estándar.

    • (Mac®. OS 10,6.x) En PNG de pantalla inicial, especifique el archivo PNG que debe usarse como icono para la aplicación iOS. Si no ha cambiado todavía el tamaño del icono, Dreamweaver lo cambiará al tamaño estándar.

    • (Mac OS 10.6.x) Seleccione una versión del iPhone/iPod Touch/iPad para el que está creando el paquete.

    • Defina otra ruta de destino para el paquete.

    Nota:

    Al hacer clic en Guardar, el archivo phonegap.js se copia en la raíz del sitio.

  9. Siga uno de estos procedimientos:

    • Si está implementando la aplicación directamente en un dispositivo, seleccione Sitio > Aplicaciones móviles > Crear. Seleccione una plataforma/un dispositivo para el build.

    • Si desea comprobar el aspecto del build en un emulador antes de crearlo, seleccione Sitio > Aplicaciones móviles > Crear y emular.