Vous voulez créer un site Internet pour téléphone portable ? Figurez-vous que je me suis poser la question, il y a quelques jours et en piochant sur le web, j’ai trouvé pas mal d’aide, du style : Créer facilement votre site Internet pour téléphone portable, Comment créer un site pour mobile Android ou création d’une application iphone, bref pas mal d’infos mais rien de concret et surtout d’assez simple. En effet je n’avais pas envie et surtout pas le temps d’apprendre à coder pour mobile. Au final j’ai trouvé un super tuto sur le site d’Adobe, grâce auquel j’ai moi aussi créer mon  site pour téléphone mobile. C’est ce tutoriel que je vous propose aujourd’hui, dans une traduction personnelle.

Vous aurez besoin de :
Dreamweaver 5.5 (version d’essai ici)
Fichier rar ci-joint

Créez facilement votre site Internet pour téléphone portable…

Dreamweaver CS5.5 inclut désormais l’intégration de PhoneGap un framework de développement open-source pour la création d’applications mobiles. L’intégration entre les deux est parfaite, et vous n’avez pas besoin de savoir quelque chose sur PhoneGap de profiter de ses fonctionnalités. De plus Jquery Mobile est disponible dans la version 5.5 de Dreamweaver et vous permet aussi de créer votre site Internet pour téléphone portable.

L’intégration de Dreamweaver avec PhoneGap vous permet de rapidement déployer vos applications web comme des applications natives pour Android et iOS basé sur les appareils mobiles. (Une application native est écrite pour fonctionner sur un système d’exploitation spécifique / périphérique.) Le framework PhoneGap agit comme un pont entre les API des applications web et les terminaux mobiles. Il vous aide à adapter des applications Web au sein des applications mobiles, même si vous n’êtes pas familier avec les langages de codage, comme Objective-C ou Cacao.

Ce tutoriel vous montre comment créer un site pour téléphone portable, à partir d’un modèle dans Dreamweaver. Pour l’instant le tuto ne vous montre pas comment construire l’application de A à Z, ni comment la déployée sur un appareil mobile. Ces sujets seront abordés dans d’autres tutoriels, prévus prochainement.

Note: L’application mobile présentée/crée avec Dreamweaver est une application à des fins de débogage. L’application s’exécutera dans les émulateurs Android et iOS, ou sur votre appareil mobile personnel si vous effectuez le transfert, mais vous ne pouvez pas télécharger les applications mobiles de débogage dans les magasins Apple et Android. Afin de télécharger iOS ou applications Android, vous devez passer à l’étape supplémentaire de leur signature en dehors de Dreamweaver. Pour plus d’informations sur les applications télécharger sur AppleStore et Android Market, consultez la documentation d’Android et d’Apple

Mettre en place le site
Ce tutoriel utilise un modèle basé sur l’application Méridien 24/7, une application fictive qui vous permet de localiser les restaurants locaux sur votre appareil mobile.

Avant de commencer à créer votre premier site sur téléphone portable, vous devez installer les fichiers d’exemple et mettre en place un site Dreamweaver.

• 1-Télécharger le zip de l’échantillon, meridien_mobile.zip, décompressez le fichier et l’enregistrer quelque part sur ​​votre ordinateur.

De mon coté j’aime bien installer/sauvegarder tous mes sites de Dreamweaver dans un seul et même dossier : Par exemple : Sites

• 2-Lancez Dreamweaver, et choisissez Site> Nouveau site
• 3-Dans la boîte de texte Nom du site de la boîte de dialogue Configuration du site, entrez le nom pour le nouveau site: Ex : site-mobile
• 4-Dans la zone de texte du site Dossier local, entrez le chemin vers le dossier ou vous avez décompresser l’archive téléchargée.à l’étape 1. Vous pouvez cliquer sur l’icône du dossier à la droite de la zone de texte pour naviguer vers le dossier.
• 4-Lorsque vous avez terminé, cliquez sur Enregistrer pour fermer la boîte de dialogue Configuration du site. Le panneau Fichiers de Dreamweaver se remplit alors avec les fichiers de votre nouveau site (voir Figure 1).

Figure 1. Le panneau Fichiers de Dreamweaver avec des fichiers exemple du site.

Le dossier contient tous les fichiers pour l’application Web, y compris les fichiers JavaScript, CSS et les image.

• 6-Double-cliquez sur le fichier index.html dans le panneau Fichiers de Dreamweaver pour l’ouvrir dans la fenêtre de document. Vous n’avez pas réellement besoin d’ouvrir ce fichier, il s’agit juste ici pour voir à quoi l’application ressemble, et comment elle fonctionne.
• 7-D’ailleurs, vous ne verrez pas beaucoup dans la fenêtre Document de Dreamweaver (ou alors du noir), mais passer en affichage en direct et vous aurez alors le site mobile qui apparait.
• 8-Vous pouvez jouer avec des tailles de fenêtre différentes pour l’application en sélectionnant différentes options dans le menu « Taille de Fenêtre » dans la barre d’état (en bas à droite de la fenêtre de document).
• Le menu « Taille de Fenêtre » vous permet de voir à quoi la page actuelle va ressembler dans différents dispositifs (tels que les téléphones mobiles et les tablettes).

Figure 2. Le menu Taille de Fenêtre

Encore une fois, vous n’avez pas besoin de faire tout cela. C’est juste une étape pour voir à quoi l’application peut ressembler dans les différents dispositifs.

Configurez le cadre d’application

La mise en place d’une application web dans Dreamweaver nécessite le SDK iOS (pour les appareils iOS) et le SDK Android (pour appareils Android). Entre autres choses, l’iOS et Android SDK vous permettent d’exécuter des simulations de l’appareil. Le dispositif de simulateurs vous permettent de voir ce que votre application rend sur un appareil mobile, sans avoir à tester l’application sur un périphérique réel.

Juste pour être clair, vous n’avez pas besoin des deux SDK pour travailler les applications web. Vous avez besoin du SDK iOS si vous voulez créer des applications pour appareils iOS, et vous avez besoin du SDK Android, si vous voulez créer des applications pour appareils Android.

Pour Android

• 1-Choisissez Site> Applications mobiles> Configuration du cadre applicatif
• 2-Cliquez Easy Install, puis sélectionnez un emplacement pour l’installation du SDK Android. L’emplacement peut être n’importe où sur votre ordinateur (Par contre Adobe vous recommande de ne pas installer le SDK dans le même répertoire que votre site).

Note: L’installation prend un peu de temps, donc soyez patient.

Figure 3. La demande de dialogue « Configuration du cadre applicatif » montre le chemin vers le SDK Android (Windows).

• 3-Une fois l’installation terminée, cliquez sur Enregistrer pour fermer l’application de dialogue « Configuration du cadre applicatif ».

Pour iOS

L’installation d’iOS SDK est un peu plus compliqué que l’installation du SDK Android. Vous devez d’abord télécharger et installer manuellement le SDK à partir du Centre Apple iOS Dev. Ensuite, vous devez pointer vers le SDK à partir de Dreamweaver. Encore une fois cette fonction n’est supportée que sur Mac OS X 10.6. x et versions ultérieures.

• 1-Choisissez Site> Applications mobiles> Configuration du cadre applicatif
• 2-Cliquez sur le lien Apple iOS Dev Center dans la boîte de dialogue Configuration du cadre applicatif.
• 3-Sur le site d’Apple, cliquez sur le bouton Se connecter et utiliser votre identifiant Apple pour vous connecter au Centre d’Apple iOS Dev. Vous pouvez créer un compte gratuitement si vous n’êtes pas déjà un utilisateur enregistré.
• 4-Une fois que vous êtes connecté, cliquez sur Téléchargements. Le lien Téléchargements vous emmène au bas de la page.
• 5-Cliquez sur le bouton Télécharger Xcode 4 pour obtenir le SDK 4.3 de Xcode 4/iOS téléchargement.
• 6-Enfin, téléchargez la dernière version de Xcode et le SDK iOS. Vous avez juste besoin d’être sûr de télécharger les dernières versions des deux Xcode et le SDK iOS.
• 7-Une fois le téléchargement terminé, double-cliquez sur l’installeur sur votre ordinateur, et installer le SDK à l’emplacement par défaut: OS X 10.6. x Développeur>.
• 8-Lorsque l’installation est terminée, revenez à Dreamweaver. La demande de dialogue Configurer la boîte-cadre devrait encore être ouverte.
• 9-Cliquez sur l’icône du dossier à côté de la boîte de iOS Developer Tools texte Chemin, et accédez à l’OS X 10.6. x dossier Developer>.
• (Si vous avez installé le SDK iOS à un endroit autre que celui par défaut, vous aurez besoin de passer par l’installation personnalisée.)

Figure 4. La boîte de dialogue Configuration de l’application montrant les chemins à la fois SDK Android et iOS sur un ordinateur Macintosh.

• 10-Une fois que le chemin vers le SDK iOS est entré, cliquez sur Enregistrer pour fermer l’application de dialogue Configuration du cadre applicatif.

Spécifier les paramètres de l’application native

Vous devez maintenant spécifier les paramètres de votre application mobile. Ceci est la dernière étape avant les essais.

Remarque: Cette fonction ne prend pas en charge les caractères ASCII haute ou double-octet.

• 1-Assurez-vous que le site test est encore ouvert dans le panneau Fichiers.
• Remarque: les sites ne peuvent comporter que HTML5, CSS, JavaScript et fichiers image. Vous ne pouvez pas conditionner les sites avec des pages dynamiques basées sur serveur, telles que les pages PHP.
• 2-Choisissez Site> Applications mobiles> Paramètres de l’application.
• Notez que Dreamweaver remplit automatiquement les champs.
• 3-Dans la zone de texte Bundle ID de l’application boîte de dialogue Paramètres, spécifiez ID bundle de l’application. Ex: monsite.com

Remplacer entreprise par le nom de votre société, et donner le nom que vous voulez au nom de l’application, en faisant attention de ne pas supprimer accidentellement toutes les périodes. Ici aussi Dreamweaver remplit automatiquement le champ nom de l’application avec votre nom de site, mais vous pouvez changer si vous le souhaitez.

L’ID bundle n’est pas vu par les utilisateurs publics de l’application.

• 4-Ensuite, entrez un nom pour l’application (encore une fois, Dreamweaver remplit automatiquement pour vous avec le nom du site), le nom de l’auteur de l’application, et le numéro de version d’application.
• 5-Cliquez sur l’icône du dossier à côté du champ d’application du texte Icône PNG et naviguez vers le dossier img de votre dossier.
• 6-Sélectionnez le fichier icon.png et cliquez sur OK. C’est l’image que l’application va utiliser comme icône de l’application sur l’appareil mobile.
• Remarque: Il n’est pas strictement nécessaire d’avoir le fichier image source icône contenu dans la hiérarchie du site, vous pouvez choisir n’importe quelle image PNG sur votre système. Dreamweaver se chargera de mettre à l’échelle de l’image appropriée, de la nommée, et de copier le fichier.
• 7-Si vous êtes sur un Macintosh fonctionnant sous 10.6. x ou plus, vous avez également la possibilité de spécifier une image à l’écran de démarrage. Cliquez sur l’icône du dossier à côté de la boîte de texte à l’écran de démarrage PNG, naviguez vers le dossier img de votre dossier de site, sélectionnez le fichier splash.png, et cliquez sur OK.
• Remarque: Il n’est pas strictement nécessaire d’avoir le fichier image source icône contenu dans la hiérarchie du site, vous pouvez choisir n’importe quelle image PNG sur votre système. Dreamweaver se chargera de mettre à l’échelle de l’image appropriée, de la nomée, et de copier le fichier.
• 8-Dans la zone de texte Cible chemin, spécifiez l’emplacement où vous souhaitez enregistrer l’application. Pour ce tutoriel, je vais sauver la mienne sur mon bureau.
• 9-Sous Sélectionnez Target OS version, sélectionnez l’Android ou iOS (iPhone / iPod / iPad) suivant les versions pour lequelles vous souhaitez créer l’application. Pour ce tutoriel, vous pouvez simplement accepter les paramètres par défaut.

Remarque: Ces menus sont préremplis pour vous en fonction du contenu du SDK vous avez installé précédemment.

Figure 5. Capture de la boite de dialogue Paramètres de l’application (Windows) une fois remplie.

Figure 6. Capture de la boite de dialogue Paramètres de l’application (Mac) une fois remplie.

• 10-Cliquez sur Enregistrer pour enregistrer vos paramètres.

Remarque: Lorsque vous cliquez sur Enregistrer, Dreamweaver ajoute un fichier phonegap.js à votre site. Ce fichier est une partie essentielle de l’application mobile, et permet d’utiliser PhoneGap API. (Vous pourriez avoir besoin de cliquer sur le bouton Actualiser dans le panneau Fichiers pour voir ce nouveau fichier.)

Construire et émuler les applications mobiles

Maintenant vous êtes prêt à construire, créer, modifier votre site internet pour téléphone portable.
Les SDK Android et iOS fournissent des émulateurs de périphérique, de sorte que vous pouvez tester vos applications mobiles sur votre propre ordinateur.

• 1-Choisissez Site> Applications mobiles> Construire et Emuler> Android / iOS.

Note: Vous pouvez aussi simplement sélectionner les applications du site Mobile> Construire> Android / iOS si vous voulez construire l’application, sans émulation.

L’émulateur approprié se lance et vous montre ce dont à quoi votre application va ressembler sur le périphérique réel. Vous pouvez interagir avec l’application dans l’émulateur.
Remarque: L’émulateur Android peut prendre un temps extrêmement long à charger, donc soyez patient. Vous recevrez un message de réussite qui vous indique quand l’application a terminé la construction ou l’installation de l’émulateur. Si la construction ou le processus d’émulation échoue, Dreamweaver ajoute un journal de la construction au dossier cible de l’application. (Le dossier cible est le dossier que vous avez spécifié dans la zone de texte Cible chemin de l’application boîte de dialogue native Paramètres). Le journal de la construction peut fournir des informations pour lesquelles la construction pourrait avoir échoué.

Ce tuto est une traduction personnelle de la page :
http://www.adobe.com/devnet/dreamweaver/articles/packaging-web-applications-as-mobile-apps.html

Ici une petite vidéo  sur Jquery etDreamweaver

Je vous invite à visiter aussi ces sites :

http://jquerymobile.com/

http://phonegap.com/