The WinOps Blog

Pour ceux qui le ne sauraient pas encore, une WebApp (Web Application, Application Web en français) est un site internet qui peut être utilisé comme une application, en l’ajoutant à l’écran d’accueil. Ca peut être utile pour créer une application sans forcément maîtriser l’Objective-C (langage de programmation de l’iPhone) et surtout sans payer la licence de développeur. Grâce à iWebKit, vous pourrez créer votre propre application web sans aucune connaissance (c’est aussi simple qu’un copier/coller !), moyennant tout de même un domaine (gratuit ou non) pour héberger votre application.

Comme vous pouvez le voir sur l’image ci-dessus, iWebKit est extrèmement complet, et permet de (re)créer tous les contrôles disponibles dans une vraie application (excepté la barre du bas, comme dans Cydia ou l’App Store). C’est pour cela que je ne vais pas tout vous expliquer ici, mais seulement un guide sur l’installation d’iWebKit ainsi que quelques notions et fonctionnalités de bases. Ne vous en faites pas, un manuel complet et détaillé est disponible dans l’archive d’iWebKit (en anglais). Je vais également vous donner une liste de quelques hébergeurs gratuits.

Pour effectuer ce tutoriel, vous aurez besoin de :

• Un hébergeur quelconque (voir liste à la suite du tutoriel si vous n’en avez pas)
• Un client FTP tel que FileZilla (l’Explorateur Windows fonctionne aussi, mais moins pratique)
• Un éditeur multi-language tel que Notepad++ (le Bloc-Notes fonctionne aussi, mais (beaucoup) moins pratique)
• L’archive d’iWebKit, disponible ici (site officiel)

Voici la fameuse (et malheureusement courte) liste d’hébergeurs gratuits (et de qualité !) :

• ByeThost
• Redby
• Pages Persos Free (nécessite un abonnement Freebox)
• Libertux
• Les Cigales.org

Pour vous mettre l’eau à la bouche, voici ce que iWebKit permet de faire :

• Une barre de titre (en haut)
• Des boutons sur la barre de titre
• Des boutons en forme de flèches (Retour par exemple) sur la barre de titre qui peuvent s’emboîter
• Des boutons sous la barre de titre (catégories)
• Du texte
• Des menus (avec image ou non)
• Des checkboxes (choix 1/0)
• Des listes d’éléments
• Des listes d’éléments type App Store
• Des listes d’éléments type iPod (qui peut lire de la musique !)
• Lancer un appel vers un numéro prédéfini ou non
• Ecrire un SMS (pour l’envoyer) vers un numéro prédéfini ou non
• Ecrire un Mail (pour l’envoyer) vers une adresse prédéfinie ou non
• Et beaucoup d’autres choses…

Commençons !

Normalement, si vous êtes à ce stade du tutoriel, c’est que vous vous êtes inscrit sur un des nombreux hébergeurs web, gratuit ou non. Pour commencer, récupérez les informations FTP correspondant à votre compte depuis le menu de votre hébergeur (hôte, nom de compte et mot de passe). Vous allez maintenant vous connecter sur ce qui va être l’espace de stockage de votre WebApp.

Depuis FileZilla

Pour vous connecter à votre espace de stockage FTP depuis FileZilla, vous devez tout simplement renseigner les informations récupérées ci-dessus dans les espaces prévus à cet effet, puis cliquer sur Connexion Rapide.

L’interface de FileZilla est très simple. En haut, vous avez la console. C’est ici que s’afficheront toutes les éventuelles erreurs. Dans les deux parties de gauche, vous avez accès aux fichiers présents sur votre PC/Mac, et à droite vous pouvez accéder à l’espace FTP auquel vous êtes connecté. En bas se trouve le gestionnaire de transferts, qui affichera toutes les opérations d’envoi/téléchargements de fichiers.

Depuis l’Explorateur Windows

L’Explorateur Windows est utile pour ceux qui ne souhaitent pas installer un « vrai » client FTP, mais est beaucoup moins pratique et (souvent) buggé.

Pour ouvrir l’Explorateur Windows, faites la combinaison de touches Windows+E. Une fois ce dernier ouvert, modifiez le contenu de la barre d’adresse comme ci-dessous (en remplaçant les valeurs par les vôtres), puis appuyez sur la touche Entrée :

ftp://nom_utilisateur:mot_passe@hôte/

Exemple :

ftp://natinusala:12340@ftp.iphone4.fr/

Pensez bien à ajouter les deux points ( : ) entre le nom de compte et le mot de passe !

Une fois la connexion établie, vous devriez normalement accéder à l’espace de stockage FTP :

Sur certains hébergeurs gratuits, l’espace FTP réel se trouve dans le dossier « www » ou « public_html », faites bien attention.

Une fois l’espace FTP ouvert et accessible, nous pouvons passer à la suite.

Récupérez l’archive d’iWebKit, puis extrayez-la dans un dossier sur votre bureau, par exemple. Ouvrez ce dossier, allez dans Framework, puis copiez tout les fichiers présents. Retournez dans votre espace FTP, et collez.

Récupérez le fichier index.html présent dans la racine de votre espace FTP, téléchargez-le vers le Bureau puis ouvrez le avec Notepad++. Supprimez tout son contenu, et remplacez-le par ceci :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN  » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd « >

<html xmlns= « http://www.w3.org/1999/xhtml « >

<!– Meta–>

<head>

<meta content= « yes  » name= « apple-mobile-web-app-capable  » />

<meta content= « text/html; charset=utf-8  » http-equiv= « Content-Type  » />

<meta content= « minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no  » name= « viewport  » />

<link href= « css/style.css  » rel= « stylesheet  » media= « screen  » type= « text/css  » />

<script src= « javascript/functions.js  » type= « text/javascript « ></script>

<title>Titre de votre WebApp</title>

<meta content= « motclé1,motclé2,motclé3  » name= « keywords  » />

<meta content= « Description de votre WebApp  » name= « description  » />

</head>

<!–Fin Meta–>

<body>

<!– La TopBar–>

<div id= « topbar « ><div id= « title « >Texte de la TopBar</div></div>

<!–Fin TopBar–>

<!– Le contenu–>

<div id= « content « >

<ul class= « pageitem>

</ul>

</div>

<!–Fin du contenu–>

<!– Footer–>

<div id= « footer « >

Copyright © 2011 Votre Nom

Powered by iWebkit

</div>

<!– Fin Footer–>

</body>

</html>

Vous n’avez pas à vous faire de souci si vous ne comprenez pas tout ce qui est écrit, c’est justement l’intérêt d’iWebKit.

Modifiez ensuite les valeurs suivantes par ce que vous souhaitez :

• Titre de votre WebApp
• motclé1
• motclé2
• motclé3
• Description de votre WebApp
• Texte de la TopBar
• Votre Nom

Enregistrez le fichier, et (re)placez-le dans votre espace FTP. Si il vous demande si vous voulez écraser/remplacer le fichier, acceptez (écrasez/remplacez-le). Rendez-vous ensuite sur votre WebApp depuis votre iPhone, et admirez… Il est vrai que pour l’instant vous n’avez qu’un titre, mais ne vous en faîtes pas, je vais détailler ici tous les boutons/contrôles de base.

A cause d’un bug de WordPress, et étant-donné qu’il est impossible que je le fasse partout à la main, je vous conseille de remplacer les « et les » par des « pour le bon fonctionnement de votre WebApp, veuillez m’en excuser.

Outils de base (textes, liens, images, paragraphes…)

Tout ce qui est mentionné ici peut être utilisé n’importe-où dans le code. Vous pouvez bien-évidemment utiliser plusieurs balises sur un même texte, pour avoir par exemple une phrase en gras-italique (<strong><em>une pharse en gras-italique</strong></em>).

• Ecrire du texte : vous n’avez qu’à l’écrire normalement dans le code
• Gras : Mettez simplement votre texte entre les balises <strong> et </strong>
• Italique : Idem pour le texte en gras, sauf qu’il faut utiliser les balises <em> et </em>
• Mettre une image : <img src= « mon_image  » alt= « description_brève « />
• Appliquer un lien : <a href= « cible_du_lien « >texte_du_lien</a>
• Centrer un élément : Placez l’élément à centrer entre les balises <p class= « center « > et </p>
• Faire un retour à la ligne : Pour faire un retour à la ligne, n’utilisez pas la méthode habituelle (touche Entrée). Ajoutez simplement la balise
  où vous voulez que le retour à la ligne s’effectue. Si vous mettez deux
  a la suite, le résultat sera un saut de ligne.

Les flèches/boutons de navigation

Pour intégrer des flèches et/ou des boutons de navigation sur/sous la barre du haut, vous devez ajouter le code suivant entre <div id= « topbar « > et le second </div> :

• Flèche vers la gauche : <div id= « leftnav « ><a href= « cible_de_la_flèche « >texte_de_la_flèche</a></div>
• Flèche vers la droite : <div id= « rightnav « ><a href= « cible_de_la_flèche « >texte_de_la_flèche</a></div>
• Bouton de gauche : <div id= « leftbutton « ><a href= « cible_du_bouton « >texte_du_bouton</a></div>
• Bouton de droite : <div id= « rightbutton « ><a href= « cible_du_bouton « >texte_du_bouton</a></div>
• Deux catégories (sous la barre du haut) : <div id= « duoselectionbuttons « ><a href= « cible_du_premier_bouton « >texte_du_premier_bouton</a><a href= « cible_du_second_bouton « >texte_du_second_bouton</a></div>
• Trois catégories (sous la barre du haut) : <div id= « duoselectionbuttons « ><a href= « cible_du_premier_bouton « >texte_du_premier_bouton</a><a href= « cible_du_second_bouton « >texte_du_second_bouton</a></div><a href= « cible_du_troisième_bouton « >texte_du_troisième_bouton</a></div>

Le contenu

Tout le contenu de la WebApp (texte, menus…) en dehors de la barre du haut et des titres doit se trouver entre les balises <div id= « content « ><ul class= « pageitem « > et </ul></div>.

• Faire un titre (en dehors de <div id= « content « >) : <span class= « graytitle « >texte_du_titre</span>
• Zone de texte : <li class= « textbox « >votre_texte</li>
• Titre dans la zone de texte (séparation) : <span class= « header « >texte_du_titre</span>
• Faire une option de menu : <li class= « menu « ><a href= « cible_option « ><span class= « name « >nom_option</span><span class= « arrow « > </span></a></li>
• Appeler quelqu’un : Pour lancer la composition d’un numéro, utilisez tel: en cible d’un bouton quelconque
• Ecrire un SMS : Idem qu’au dessus, mais avec le code sms:
• Ecrire un Mail : (encore) Idem qu’au dessus, mais avec le code mailto:
• Ouvrir l’App Store : Utilisez http://itunes.apple.com/fr/app/ comme cible d’un bouton
• Ouvrir l’iTunes Store : Idem qu’au dessus, mais avec l’adresse http://itunes.apple.com/fr/album/

Faire plusieurs pages

Comme vous l’aviez sûrement remarqué, il est ci-dessus beaucoup question de cible du lien, cible du bouton, cible de l’option… Il s’agit de l’endroit où l’utilisateur arrive quand il touche le contrôle concerné. Cela peut être une page internet externe (http://ma_page/), ou une autre page dans la WebApp. Mais comment faire ? Vous n’avez qu’à copier/coller le fichier index.html et renommer sa copie, en credits.html par exemple. Pour y accéder, mettez simplement credits.html en cible du lien/bouton/option. Pour retourner à la page d’accueil, mettez index.html en cible.

Ne renommez/supprimez pas le fichier index.html, sinon la WebApp sera inaccessible !

Le plein-écran

Au début de ce tutoriel, je vous parlais d’un moyen pour remplacer de véritables application. Vous me direz (et c’est vrai) que pour l’instant, ça a plutôt l’air d’être un site internet ressemblant à une application. Et bien vous n’avez qu’à ajouter la page d’accueil de votre WebApp à l’écran d’accueil de votre iPhone (bouton + depuis Safari en étant sur la page). Safari va se quitter, et une icône portant le nom de votre WebApp va apparaître. Ouvrez-là, et surprise ! Aucune trace de Safari ! Et si vous n’êtes pas connecté à internet, l’iPhone vous dira que l’application (et non pas le site internet) ne peut pas accéder au web, et doit donc se fermer. Conquis ?

Et voilà, vous savez a peu-près toutes les notions de base sur l’utilisation d’iWebKit, si vous voulez en savoir plus n’hésitez pas à consulter Userguide.pdf disponible dans l’archive d’iWebKit !

source: http://www.iphone4.fr/tutoriel-creez-votre-webapp-tres-facilement-avec-iwebkit/