Compactar aplicativos da Web

Pesquisar
Dreamweaver

Dreamweaver

Abrir aplicativo

Compactar aplicativos da Web como aplicativos móveis nativos (CS5.5)

A integração do Dreamweaver com o jQuery Mobile e o PhoneGap ajuda na criação e no empacotamento de aplicativos da Web para implantação no Android™ e em dispositivos baseados em iOS. O Dreamweaver usa SDKs do PhoneGap para criar o pacote (arquivo .apk para Android/.xcodeproj para iPhone/iPad)

Uma vez que empacotou um aplicativo móvel com o Dreamweaver, você poderá exibi-lo em um emulador de dispositivo ou implantá-lo em seu próprio dispositivo.

Observação:

O aplicativo móvel que você empacotou com Dreamweaver é um aplicativo somente para fins de depuração. O aplicativo será executado no Android e em emuladores de iOS, ou no seu dispositivo móvel pessoal se você fizer a transferência, mas não é possível carregar os aplicativos móveis de depuração nas lojas da Apple e do Android. Para carregar aplicativos para iOS ou Android, você deverá executar a etapa adicional de assiná-los fora do Dreamweaver. Para obter mais informações sobre o carregamento de aplicativos nas lojas da Apple e do Android, consulte a documentação do Android ou o Guia do usuário do programa no Portal de fornecimento do Apple iOS. (Antes de poder acessar o Portal de fornecimento do Apple iOS Fornecimento você deverá se registrar no Programa de Desenvolvedor de Apple [gratuito] e se inscrever no Programa de Desenvolvedor iOS [taxa anual].)

Crie um aplicativo da Web usando a página inicial

Você pode usar qualquer página inicial para criar seu aplicativo da Web. Entretanto, se o seu aplicativo da Web, quando implantado como um aplicativo móvel, acessar recursos nativos em dispositivos móveis, use a página do jQuery Mobile (PhoneGap).

A página inicial do jQuery Mobile (PhoneGap) contém o arquivo phonegap.js além de outros arquivos do jQuery Mobile. O arquivo phonegap.js contém as APIs necessárias para funcionar com recursos móveis nativos, tais como GPS, acelerômetro, câmera, etc.

  1. Selecione Arquivo > Novo.

  2. Selecione Página da Amostra > Iniciais do Mobile > jQuery Mobile (PhoneGap).

  3. Clique em Criar.

  4. No painel Inserir (Janela > Inserir), selecione jQuery Mobile. Os componentes que podem ser adicionados ao aplicativo da Web são exibidos.

  5. Na Visualização de design, posicione o cursor onde deseja inserir o componente e clique no componente no painel Inserir. Na caixa de diálogo exibida, personalize os componentes usando as opções.

    Observação:

    Para editar o arquivo PhoneGap.js, defina a estrutura e as configurações do aplicativo. Para obter mais informações, consulte os tópicos sobre como criar pacotes de aplicativos.

Visualize a página na Visualização dinâmica. Algumas classes de CSS são aplicadas somente na Visualização dinâmica.

Requisitos do sistema para empacotar aplicativos

Você deve garantir que atende aos seguintes requisitos do sistema antes que possa prosseguir com o empacotamento de um aplicativo.

MAC OS - iOS

  • Mac OS X Snow Leopard versão 10.6.x ou posterior

  • Xcode 3.2.x com SDK do iOS (instruções de instalação abaixo.)

MAC OS - Android

  • Mac OS X 10.5.8 ou posterior (somente x86)

  • SDK do Android (instruções de instalação abaixo.)

Windows - iOS

  • O iOS só está disponível para usuários com um computador Apple

Windows - Android

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

  • SDK do Android (instruções de instalação abaixo).

Criar um pacote de programas do aplicativo(Windows)

Para obter informações sobre como criar um aplicativo da web, incluindo arquivos de exemplo, consulte este tutorial no Dreamweaver Developer Center.

  1. Abra o aplicativo da Web que deseja converter para um aplicativo móvel. Assegure-se de que seu aplicativo da Web esteja configurado como um site no Dreamweaver e que o tamanho do site seja menor que 25 MB.

    Observação:

    Assegure-se de que o aplicativo contenha somente arquivos HTML5, CSS e JavaScript.

  2. Selecione Site > Aplicativos móveis > Configurar estrutura de aplicativo.

  3. Clique em Instalação fácil para instalar o Android SDK.

    Observação:

    Se a Instalação fácil falhar, consulte tech note 90408.

  4. Selecione um local para instalar arquivos SDK e clique em Selecionar. Após a conclusão da instalação, clique em Salvar.

  5. Selecione Site > Aplicativos móveis > Configurações do aplicativo.

  6. Na ID de compactação, digite um nome para o pacote usando as informações na caixa de diálogo.

  7. Digite um nome para o aplicativo e o nome da pessoa que o criou.

  8. Opcionalmente, especifique:

    1. No PNG do ícone do aplicativo, especifique um arquivo PNG para ser usado como ícone do aplicativo. O Dreamweaver redimensionará o ícone no tamanho padrão se você ainda não o tiver redimensionado.

    2. Especifique um caminho de destino para o pacote.

    3. Para baixar e instalar os componentes SDK mais recentes do Google, clique em Gerenciar AVDs. Use o Android SDK and AVD Manager para atualizar o Android SDK. Para obter informações sobre como usar o gerenciador, consulte http://developer.android.com/sdk/adding-components.html.

      Observação:

      Quando você clica em Salvar, o arquivo phonegap.js é copiado na raiz do site.

  9. Siga um destes procedimentos:

    • Se estiver implantando seu aplicativo diretamente em um dispositivo, selecione Site > Aplicativos móveis > Versão. Selecione uma plataforma/dispositivo para a versão.

    • Se deseja ver a aparência da versão em um emulador antes de criá-la, selecione Site > Aplicativos móveis > Criar e emular.

Criar um pacote de programas do aplicativo (Mac OS)

Para obter informações sobre como criar um aplicativo da Web, incluindo arquivos de exemplo, consulte este artigo no Dreamweaver Developer Center.

  1. Abra o aplicativo da Web que deseja converter para um aplicativo móvel. Assegure-se de que seu aplicativo da Web esteja configurado como um site no Dreamweaver e que o tamanho do site seja inferior a 25 MB.

    Observação:

    Assegure-se de que o aplicativo contenha somente arquivos HTML5, CSS e JavaScript.

  2. Selecione Site > Aplicativos móveis > Configurar estrutura de aplicativo.

  3. Instale o SDK para iOS ou Android com base em seus requisitos:

    • Clique no link do Apple iOS Dev Center para baixar e instalar o xcode e o iOS SDK. O aplicativo é, por padrão, instalado em OS <número da versão>/developer directory.

      Faça login no Dev Center usando sua ID da Apple. O registro é gratuito. Crie uma conta se não for um usuário registrado.

    Observação:

    Você pode usar o pacote SDK do Apple Dev Center como teste. Entretanto, para carregar o aplicativo na Loja da Apple, registre-se como um desenvolvedor da Apple após o pagamento da taxa obrigatória.  

    • Clique em Instalação fácil para instalar o Android SDK.
    Observação:

    Se a Instalação fácil falhar, consulte tech note 90408.

  4. Clique em Salvar.

  5. Selecione Site > Aplicativos móveis > Configurações do aplicativo.

  6. Na ID de compactação, digite um nome para o pacote usando as informações na caixa de diálogo.

  7. Digite um nome para o aplicativo e o nome da pessoa que o criou.

  8. Opcionalmente, faça o seguinte:

    • (Android) No ícone do aplicativo PNG, especifique um arquivo PNG para ser usado como ícone do aplicativo de Android. O Dreamweaver redimensionará o ícone no tamanho padrão se você ainda não o tiver redimensionado.

    • (Mac® OS 10.6.x) No PNG da tela de inicialização, especifique um arquivo PNG para ser usado como ícone do aplicativo iOS. O Dreamweaver redimensionará o ícone no tamanho padrão se você ainda não o tiver redimensionado.

    • (Mac OS 10.6.x) Selecione uma versão do iPhone/iPod Touch/iPad para a criação do pacote.

    • Defina um caminho de destino diferente para o pacote.

    Observação:

    Quando você clica em Salvar, o arquivo phonegap.js é copiado na raiz do site.

  9. Siga um destes procedimentos:

    • Se estiver implantando seu aplicativo diretamente em um dispositivo, selecione Site > Aplicativos móveis > Versão. Selecione uma plataforma/dispositivo para a versão.

    • Se deseja ver a aparência da versão em um emulador antes de criá-la, selecione Site > Aplicativos móveis > Criar e emular.

Artigos relacionados

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais    |    Política de privacidade online