Comment utiliser ajax de faire une application pour HTML5 et CSS3 programmation

Tout le monde veut faire des applications mobiles ces jours. Voici le grand secret. De nombreuses applications sont vraiment écrites en HTML5, CSS et javascript. Vous savez déjà tout ce dont vous avez besoin pour faire des applications qui fonctionnent sur les appareils mobiles. Mieux encore, vous ne pas besoin d'apprendre une nouvelle langue ou obtenir la permission de l'App Store ou acheter une licence, comme vous le faites pour les applications natives.

Il ya une couple de trucs merveilleux que vous pouvez faire pour les utilisateurs iOS. Vous pouvez concevoir votre programme afin que l'utilisateur peut ajouter une icône directement sur le bureau. L'utilisateur peut alors lancer le programme comme toute autre application. Vous pouvez également faire le navigateur cacher le navigateur normale accoutrements afin que votre programme ne ressemble pas il fonctionne dans un navigateur!

Il se trouve que ces effets sont assez facile à faire.

Ajouter une icône à votre programme

Les versions modernes de iOS (le système d'exploitation iPhone / iPad) ont déjà la possibilité de stocker une page Web sur le bureau. Juste voir la page web dans Safari et cliquez sur le bouton Partager. Vous trouverez une option pour enregistrer la page Web sur le bureau. Vous pouvez demander à vos utilisateurs de faire cela, et ils vont être en mesure de lancer votre programme comme une application normale.

Cependant, l'icône par défaut pour une application enregistrée est assez laid. Si vous voulez un joli icône, vous pouvez économiser une petite image en tant que fichier .jpg et le mettre dans le même répertoire que votre programme. Ensuite, vous pouvez ajouter cette ligne à votre page (dans la tête) et que l'image apparaîtra sur le bureau lorsque l'utilisateur enregistre votre programme:

Comme un bonus supplémentaire, l'iPhone ou l'iPad ajustent automatiquement l'image pour ressembler à une icône d'Apple, en ajoutant les effets propres à la version installée d'iOS (arrondis et vitreux dans iOS6, plat dans iOS7.)

Bien sûr, cette icône astuce est un Apple-seul mécanisme. Avec la plupart des versions d'Android, un signet que vous avez désigné votre navigateur principal peut être ajoutée sur le bureau, mais il n'y a pas d'option d'icône personnalisée. La apple-touch-icon directive sera tout simplement ignoré si vous utilisez un autre OS.

Retirer la barre d'outils de Safari

Bien que votre programme ressemble bien à partir de l'écran principal, lorsque l'utilisateur active le programme, il est encore évident que le programme fait partie du navigateur Web. Vous pouvez facilement masquer la barre d'outils du navigateur avec une autre ligne dans l'en-tête:

Ce code va pas faire quelque chose de différent à moins que le programme est appelé à partir du bureau. Cependant, dans ce cas, il cache la barre d'outils, ce qui rend l'apparence du programme et se sentir comme une application à part entière. Comme un bonus supplémentaire, lance le programme dans un mode plein écran, vous donnant un peu plus de place pour le jeu.

Encore une fois, ceci est une solution Apple spécifique. Il n'y a pas un moyen facile d'obtenir le même effet sur les appareils Android.

Rangez votre programme hors ligne

Maintenant, votre programme est à la recherche un peu comme une application, sauf qu'il ne fonctionne que lorsque vous êtes connecté à l'Internet. HTML5 a une caractéristique merveilleuse qui vous permet de stocker localement une page Web entière la première fois qu'il est exécuté.

Ensuite, si l'utilisateur tente d'accéder au programme et le système ne peut pas obtenir en ligne, la copie locale du jeu est exécuté à la place. En substance, le programme est téléchargé la première fois qu'il est activé et reste sur le périphérique local.

Ceci est un effet relativement facile à réaliser:

• Faites votre programme stable: Avant de pouvoir utiliser le mécanisme de stockage hors connexion, vous aurez envie de vous assurer que votre programme est proche de libérer prêt. Au minimum, vous aurez besoin pour vous assurer que vous connaissez tous les fichiers externes nécessaires par le jeu.

• Utilisez uniquement des ressources locales: Pour ce type de projet, vous ne pouvez pas compter sur l'Internet externe, de sorte que vous aurez besoin d'avoir tous vos fichiers locaux. Cela signifie que vous ne pouvez pas vraiment utiliser PHP ou fichiers externes. Vous aurez besoin d'avoir une copie locale de tout sur le serveur.

• Construire un fichier cahce.manifest: Regardez le répertoire contenant votre jeu, et de créer un nouveau fichier texte nommé.

• Ecrire la première ligne: La première ligne du fichier cache.manifest ne doit contenir que le texte Manifeste de cache (tout en majuscules).

• Faites une liste de tous les fichiers dans le répertoire: Écrivez le nom de chaque fichier dans le répertoire, un fichier par ligne. Soyez prudent avec votre capitalisation et l'orthographe.

• Ajoutez l'attribut manifeste: La tag a un nouvel attribut appelé manifeste. Utilisez cette option pour décrire le serveur où le manifeste de cache peut être trouvé:

• Chargez la page normalement: Vous aurez besoin de charger la page web une fois dans la façon normale. Si tout est configuré correctement, le navigateur va tranquillement faire une copie du fichier.

• Déconnecté de test: La meilleure façon de tester le stockage hors ligne est de désactiver temporairement l'accès sans fil sur votre machine et puis essayez d'accéder au fichier. Si les choses se sont, vous devriez être en mesure de voir votre page comme si vous étiez encore en ligne.

• Vérifiez les paramètres du serveur: Si le stockage hors connexion ne fonctionne pas, vous pourriez avoir besoin de vérifier avec votre administration du serveur. Le / manifeste type MIME texte doit être configuré sur le serveur. Vous pourriez avoir à demander à votre administrateur de serveur pour définir cette option dans le fichier .htaccess pour votre compte:

  AddType text / .manifest de cache-manifest

Notez que cela peut prendre le mécanisme de cache-manifest plusieurs heures de reconnaître les changements, donc quand vous apportez des modifications à votre page, ces changements ne sont pas automatiquement mis à jour pour le navigateur local. Voilà pourquoi il est préférable de sauvegarder l'archivage hors ligne pour près de la fin de votre cycle de développement du projet.