Webtoepassingen verpakken

Webtoepassingen verpakken als systeemeigen mobiele toepassingen (CS5.5)

Dankzij de integratie van Dreamweaver met jQuery Mobile en PhoneGap kunt u webtoepassingen maken en verpakken voor distributie op Android™- en iOS-apparaten. Dreamweaver gebruikt PhoneGap SDK's om het pakket te maken (bestand .apk voor Android en bestand .xcodeproj voor iPhone/iPad)

Nadat u een mobiele toepassing hebt verpakt met Dreamweaver, kunt u de toepassing weergeven in een apparaatemulator of de toepassing naar uw eigen apparaat distribueren.

Opmerking:

De mobiele toepassing die u verpakt met Dreamweaver, is alleen bedoeld voor foutopsporing. De toepassing kan worden uitgevoerd in de Android- en iOS-emulators, of op uw eigen mobiele apparaat als u de toepassing overdraagt, maar u kunt deze mobiele toepassingen voor foutopsporing niet uploaden naar de onlinewinkels van Apple en Android. U kunt uw iOS- of Android-toepassingen alleen uploaden als u ze ook nog ondertekent buiten Dreamweaver. Raadpleeg de Android-documentatie of het programmahandboek op de Apple iOS Provisioning Portal voor meer informatie over het uploaden van toepassingen naar de onlinewinkels van Apple en Android. (Voordat u toegang krijgt tot de Apple iOS Provisioning Portal moet u zich aanmelden bij het Apple Developer Program [gratis] en u inschrijven voor het iOS Developer Program [jaarlijkse betaling].)

Een webtoepassing maken met de startpagina

U kunt elke startpagina gebruiken om uw webtoepassing te maken. Als uw webtoepassing echter systeemeigen functies van mobiele apparaten gebruikt wanneer de toepassing wordt gedistribueerd als mobiele toepassing, moet u de pagina jQuery Mobile (PhoneGap) gebruiken.

De startpagina jQuery Mobile (PhoneGap) bevat het bestand phonegap.js en de overige jQuery Mobile-bestanden. Het bestand phonegap.js bevat de API's die vereist zijn voor de samenwerking met de systeemeigen functies van mobiele apparaten, zoals een GPS, versnellingsmeter, camera enzovoort.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (PhoneGap).

  3. Klik op Maken.

  4. Selecteer jQuery Mobile in het deelvenster Invoegen (Venster > Invoegen). De onderdelen die u kunt toevoegen aan de webtoepassing, worden weergegeven.

  5. Plaats de cursor in de ontwerpweergave op de plaats waar u het onderdeel wilt invoegen en klik op het onderdeel in het deelvenster Invoegen. Pas de onderdelen aan met de opties in het dialoogvenster dat verschijnt.

    Opmerking:

    Als u het bestand PhoneGap.js wilt bewerken, moet u het toepassingsframework en de toepassingsinstellingen configureren. Zie de onderwerpen over het maken van toepassingspakketten voor meer informatie.

Bekijk een voorvertoning van de pagina weer in Live View. Bepaalde CSS-klassen worden alleen toegepast in Live View.

Systeemvereisten voor verpakken van toepassingen

Zorg dat uw systeem voldoet aan de volgende vereisten voordat u begint met het verpakken van een toepassing.

MAC OS - iOS

  • Mac OS X Snow Leopard 10.6.x of hoger

  • Xcode 3.2.x met de iOS SDK (installatie-instructies verderop).

MAC OS - Android

  • Mac OS X 10.5.8 of hoger (alleen x86)

  • Android SDK (installatie-instructies verderop).

Windows - iOS

  • iOS is alleen beschikbaar voor gebruikers met een Apple-computer

Windows - Android

  • Windows XP (32-bits), Vista (32- of 64-bits) of Windows 7 (32- of 64-bits)

  • Android SDK (installatie-instructies verderop).

Een toepassingspakket maken (Windows)

Bekijk deze zelfstudie op Dreamweaver Developer Center voor met informatie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.

  1. Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.

    Opmerking:

    Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.

  2. Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.

  3. Klik op Eenvoudig installeren om de Android-SDK te installeren.

    Opmerking:

    Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.

  4. Selecteer een locatie waar u de SDK-bestanden wilt installeren en klik op Selecteren. Klik op Opslaan nadat de installatie is voltooid.

  5. Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.

  6. Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.

  7. Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.

  8. Geef desgewenst het volgende op:

    1. Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.

    2. Geef een doelpad voor het pakket op.

    3. Klik op AVD's beheren om de nieuwste SDK-onderdelen van Google te downloaden en installeren. Gebruik Android SDK and AVD Manager om de Android SDK bij te werken. Zie http://developer.android.com/sdk/adding-components.html voor meer informatie over het gebruik van de Manager.

      Opmerking:

      Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.

  9. Voer een van de volgende handelingen uit:

    • Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.

    • Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.

Een toepassingspakket maken (Mac OS)

Lees dit artikel op Dreamweaver Developer Center voor een zelfstudie, inclusief voorbeeldbestanden, over het maken van een webtoepassing.

  1. Open de webtoepassing die u wilt converteren naar een mobiele toepassing. Zorg dat uw webtoepassing is ingesteld als een site in Dreamweaver en dat de site kleiner is dan 25 MB.

    Opmerking:

    Controleer of de toepassing alleen HTML5-, CSS- en JavaScript-bestanden bevat.

  2. Selecteer Site > Mobiele toepassingen > Toepassingsframework configureren.

  3. Installeer de SDK voor iOS of Android, afhankelijk van uw vereisten:

    • Klik op de koppeling Apple iOS Dev Center om de xcode- en iOS-SDK te downloaden en installeren. De toepassing wordt standaard geïnstalleerd in de map OS <versienummer>/developer.

      Meld u aan bij Dev Center met uw Apple-id. De registratie is gratis. Maak een account als u nog geen geregistreerde gebruiker bent.

    Opmerking:

    Het SDK-pakket dat u downloadt van Apple Dev Center kunt u gebruiken om te testen. Als u uw toepassing echter uploadt naar de Apple Store, moet u zich registreren als Apple-ontwikkelaar nadat u de vereiste kosten hebt betaald.  

    • Klik op Eenvoudig installeren om de Android-SDK te installeren.
    Opmerking:

    Raadpleeg Tech Note 90408 als u niet kunt installeren met Eenvoudig installeren.

  4. Klik op Opslaan.

  5. Selecteer Site > Mobiele toepassingen > Toepassingsinstellingen.

  6. Gebruik de informatie in het dialoogvenster om een naam voor het pakket op te geven bij Bundel-id.

  7. Geef een naam voor de toepassing op, en de naam van de persoon die de toepassing heeft ontworpen.

  8. Voer desgewenst de volgende handelingen uit:

    • (Android) Geef bij PNG van toepassingspictogram een PNG-bestand op dat wordt gebruikt als pictogram voor de Android-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.

    • (Mac® OS 10.6.x) Geef bij PNG van startpagina een PNG-bestand op dat wordt gebruikt als pictogram voor de iOS-toepassing. Dreamweaver wijzigt het pictogramformaat in het standaardformaat als u het formaat nog niet hebt aangepast.

    • (Mac OS 10.6.x) Selecteer een versie van de iPhone/iPod Touch/iPad waarvoor u het pakket maakt.

    • Geef een ander doelpad voor het pakket op.

    Opmerking:

    Wanneer u op Opslaan klikt, wordt het bestand phonegap.js naar de hoofdmap van de site gekopieerd.

  9. Voer een van de volgende handelingen uit:

    • Selecteer Site > Mobiele toepassingen > Samenstellen als u uw toepassing rechtstreeks naar een apparaat distribueert. Selecteer een platform/apparaat voor de build.

    • Selecteer Site > Mobiele toepassingen > Samenstellen en emuleren als u wilt controleren hoe de build eruit ziet in een emulator voordat u de build gaat samenstellen.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online