Share
Vous voulez apprendre à utiliser PhoneGap, mais vous ne savez pas par où commencer? Rejoignez-nous lors de la création de "Sculder", un hommage non seulement à une excellente série télévisée de science-fiction, mais également à une application mobile native à part entière pour les croyants en vous!
Dans les deux dernières parties, nous avons installé Phonegap, lancé un bonjour le monde, puis examiné certaines des fonctionnalités qu’offre Phonegap. Au cours des deux prochaines parties, nous construirons notre application et examinerons certains des défis qui pourraient en découler..
Avant de passer au code, nous allons devoir faire un peu de planification. De cette façon, nous savons exactement ce que nous voulons que l’application réalise et pouvons avoir une bonne idée de l’expérience utilisateur. Vous pouvez faire du bon travail en touchant immédiatement le code (ce que je fais tout le temps), mais même un peu de planification à l’avance peut aller très loin. Réfléchir à des scénarios dans votre tête vous permettra de régler les problèmes rapidement.
Premièrement, nous devons savoir quelles seront les principales fonctionnalités de l’application, comment elles seront utilisées et comment elles seront utilisées. L'application que nous allons créer aura les caractéristiques suivantes:
Si vous souhaitez créer des structures filaires pour vos projets, il est toujours bon de savoir ce que vous voulez que votre application fasse et aussi à peu près à quoi vous voulez ressembler. Si l'application doit être volumineuse et avoir beaucoup de fonctionnalités, je ferais des wireframes, mais dans ce cas, je pense que l'application est petite et que nous pouvons donc trier les fonctionnalités assez basiques lorsque nous construisons l'application..
Si vous voulez créer des structures filaires, il existe de très bons outils pour vous aider..
Oiseau moqueur est un outil en ligne où vous pouvez créer des structures filaires dans le navigateur. Vous pouvez l'essayer ici
Balsamiq est une application Adobe Air avec une multitude de modèles et d’éléments. Il a un style fragmentaire, un peu comme Mockingbird. Vous pouvez le télécharger ici.
Omnigraffle est une application Mac uniquement pour laquelle vous pouvez obtenir un essai gratuit de 14 jours ici. Omnigraffle est mon préféré et de nombreux modèles sur Graffletopia sont à votre disposition..
Le look and feel est un aspect important de toute application. En ce qui concerne les applications mobiles, c'est un domaine dans lequel beaucoup se trompent souvent (principalement en raison d'un manque de compréhension). Je ne suis pas un designer, et je ne prétends pas en être un. Par conséquent, si je n'ai pas de designer en charge de la conception, je créerai simplement dans le navigateur au format I (ou sur l'appareil). ce cas).
Si vous voulez vous assurer que votre application a l'air agréable et qu'elle est agréable à utiliser (et que vous n'en êtes pas un), louez-en une! Comme un développeur, les bons designers coûtent de l'argent. Bien que vous ne souhaitiez peut-être pas faire quelque chose que vous puissiez faire vous-même, il est préférable de faire appel à quelqu'un qui comprend le design pour le faire à votre place. Votre application sera cent fois meilleure pour le faire!
Sur Mobiletuts +, il y a eu d'excellents didacticiels sur la conception, qui vous permettront de mieux comprendre ce qui est nécessaire pour plonger dans la conception pour mobile..
L'une des considérations les plus importantes pour votre conception est la quantité d'images que vous utilisez. Si votre conception doit vous obliger à découper des fichiers PSD et à utiliser un grand nombre d'images - quelque chose ne va pas -, nous souhaitons faire autant que possible avec CSS et, comme nous le construisons pour les navigateurs assez modernes, nous pouvons exploiter le pouvoir de nombreux nouvelles techniques CSS3 pour la sortie désirée. Lorsque vous commencez à utiliser de nombreuses images, cela commence à affecter les performances de l'application. Lorsque nous devons utiliser des images, ce qui est probable, nous devons créer un sprite (un fichier image contenant l’ensemble de nos images) pour enregistrer les requêtes HTTP. Il est également possible de mettre en cache des images sur le périphérique ou d'utiliser également le stockage local.
Il est maintenant temps de commencer à coder HTML, CSS et Javascript pour notre application..
Nous allons commencer avec du HTML assez basique.
Sculder
Le support CSS sur mobile est bon, mais pas génial. Bien que beaucoup de styles courants soient supportés, il existe également des "gotcha's". Une de mes ressources préférées pour vérifier le support est caniuse.com. Bien que le site n'inclue pas tous les navigateurs pour mobiles, il constitue une référence utile..
Allez-y, créez une nouvelle feuille de style vierge et incluez-la dans l'en-tête de votre code HTML. Comme vous le faites peut-être déjà avec les applications du navigateur de votre ordinateur de bureau, définissez des styles de réinitialisation de base..
html, body margin: 0; rembourrage: 0; bordure: 0; body font-family: Arial, sans-serif; hauteur de ligne: 1,5; taille de police: 16px; background: #fff; rembourrage: 5px; couleur: # 000; word-wrap: mot de rupture; -webkit-text-size-ajuster: aucun; h1, h2, h3, h4, h5, h6 poids de la police: normal; p img float: left; marge: 0 10px 5px 0; rembourrage: 0; img border: 0; largeur maximale: 100%;
Ensuite, nous allons ajouter du HTML de base - un en-tête et des contrôles de tabulation.
Sculder
Tout d'abord, je vais donner une couleur à l'arrière-plan, puis styliser l'en-tête et le pied de page. Je vais les poser de manière assez moyenne, en les fixant en haut et en bas de l'écran et en utilisant iScroll pour nous donner la possibilité de surmonter le manque de soutien pour position: fixe dans la plupart des appareils.
/ * Styles principaux * / body background: # 222; en-tête top: 0; gauche: 0; hauteur: 45px; footer bottom: 0; gauche: 0; hauteur: 48px; couleur de fond: # c27b00; border-top: 1px solid #eee; en-tête, pied de page background-color: # deb500; rembourrage: 0; position: absolue; z-index: 2; taille de police: 20px; largeur: 100%; text-align: center; couleur: # f3f3f3; poids de police: gras; ombre du texte: 0 -1px 0 rgba (0,0,0,0,5); hauteur de ligne: 45px; h1 margin: 0; text-transform: majuscule; #wrapper position: absolute; z-index: 1; en haut: 45px; en bas: 48px; gauche: 0; largeur: 100%; débordement: auto; # main-content position: absolute; z-index: 1; largeur: 100%; rembourrage: 0;
Ensuite, nous allons télécharger iScroll 4 à partir d’ici, et inclure le iscroll-lite.js fichier. Cela nous donne les fonctionnalités de base dont nous aurons besoin. Nous ferons aussi un app.js fichier pour gérer toutes nos fonctionnalités JavaScript. Inclure ces fichiers dans la tête de votre index.html.
Dans notre fichier Javascript, nous devons lancer iscroll.
Accentsconagua
var theScroll; function scroll () theScroll = new iScroll ('wrapper'); document.addEventListener ('DOMContentLoaded', scroll, false); Maintenant, nous allons ajouter notre barre d’onglet dans notre pied de page..
Nous allons styliser notre barre d'onglets pour que chaque élément occupe un tiers de l'espace disponible.
# tab-bar margin: 0; rembourrage: 0; # tab-bar li display: inline; float: gauche; largeur: 33,333%; # tab-bar a color: #cdcdcd; bloc de visualisation; poids de police: gras; débordement caché; position: relative; text-align: center; texte-décoration: aucun; -webkit-touch-callout: aucun;
Tout cela est un CSS assez moyen que vous pourriez utiliser dans une page Web. Le seul qui pourrait être l'intrus pour vous est le -webkit-touch-callout: aucun. Cette règle consiste à arrêter l'action par défaut lorsqu'un utilisateur bloque un lien..
C’est tout ce que nous allons faire avec la barre d’onglet, mais vous voudrez peut-être ajouter des icônes, tout comme la plupart des applications. N'oubliez pas de vous assurer que vous utilisez des images-objets pour vos images afin de minimiser l'impact sur les performances..
Maintenant que le squelette de notre application est prêt, nous pouvons examiner la pagination via notre application. Il y a un bon nombre de bonnes manières de faire ceci La première consiste à tout charger à l’avance, puis à masquer les pages que nous ne souhaitons pas afficher au début, puis, d’un clic sur un lien, nous pouvons utiliser CSS pour afficher un nouveau conteneur. Une autre option consiste à utiliser Ajax et à faire une demande Ajax pour un fichier HTML, puis à le glisser dans la vue. Comme il s'agit d'une application relativement petite, il n'y a pas de mal à tout charger à l'avance et à utiliser CSS pour le gros du traitement de la page, un peu comme le fait jQuery Mobile..
Nous allons d’abord configurer quelques pages dans notre conteneur principal.
Ensuite, assurez-vous que les liens href correspond à ces.
Maintenant, nous allons masquer toutes les pages et juste afficher la page avec le actuel classe.
#pages> div display: none; #pages> div.current display: block;
Ensuite, nous devons plonger dans du JavaScript. Je vais aller de l'avant et utiliser jQuery pour le reste du projet (pas jQuery mobile). Si vous le souhaitez, vous pouvez jQuerifier l’initiation iScroll (ou non). Assurez-vous de déposer également la version simplifiée de jQuery dans votre répertoire JS..
Premièrement, je vais lier un clic aux ancres de la barre de tabulation, car nous utilisons jQuery 1.7, nous pouvons utiliser le nouveau .sur() une fonction. Nous allons ensuite empêcher l'action par défaut d'un lien, stocker le href du lien cliqué dans un page suivante variable, retirez le actuel classe de la page en cours et enfin ajouter la classe à la page cliquée.
$ ('# tab-bar a'). on ('click', fonction (e) e.preventDefault (); var nextPage = $ (e.target.hash); $ ("# pages .current"). removeClass ("current"); nextPage.addClass ("current");); Vous allez maintenant avoir une pagination très basique comme contenu divs va maintenant cacher et montrer quand les liens sont cliqués.
Cela fonctionne et fonctionnera parfaitement, mais pour ajouter un peu plus à la pagination, nous allons utiliser du CSS et rendre la transition entre les pages un peu plus agréable avec un fondu en entrée, un fondu en sortie.
Premièrement, nous devons nous assurer que nos pages sont positionnées de manière à nous permettre de contrôler leur affichage. Ajouter le CSS suivant.
#pages position: relative; / * Mettre à jour ce style * / #pages> div display: none; position: absolue; en haut: 0; à gauche: 0; largeur: 100%;
Nous allons maintenant utiliser l'animation CSS pour animer la transition de page. Nous commençons d’abord par quelques réglages génériques pour la fonction d’animation et le timing.
.in, .out -webkit-animation-timing-function: fonction d’accélération; -webkit-animation-duration: 400ms;
La nous définissons les images clés pour l'animation des images clés.
@ -webkit-keyframes fade-in from opacity: 0; à opacité: 1;
Enfin, nous définissons l'index Z pour nous assurer que la page dans laquelle nous venons de fondre est en haut..
.fade.in -webkit-animation-name: fade-in; z-index: 5; .fade.out z-index: 0;
Nous devons maintenant ajouter un peu plus de JavaScript pour ajouter et supprimer les classes CSS au clic. Nous avons d’abord besoin d’une fonction qui prendra un paramètre, qui sera la page vers laquelle naviguer, puis elle ajoutera les classes nécessaires pour afficher la nouvelle page en fondu et lier une fonction à webkitAnimationEnd, cela supprimera ensuite les classes nécessaires. La fonction ressemble à ceci.
fonction page (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); toPage.addClass ("fondu actuel"). one ("webkitAnimationEnd", function () fromPage.removeClass ("fondu actuel" "; toPage.removeClass (" fondu ")); fromPage.addClass ("fade out"); Si vous n'avez jamais vu la méthode jQuery .un() avant, consultez la documentation, c'est juste un moyen de relier puis de relier.
Si vous testez maintenant sur votre appareil, vous remarquerez que si vous cliquez sur le lien de la page actuelle, celui-ci disparaîtra progressivement. Nous devons mettre dans un si déclaration avant de lancer notre fonction de page pour nous assurer que nous ne sommes pas déjà sur la page en cours - si nous le sommes, nous pouvons simplement sortir de la fonction.
fonction page (toPage) var toPage = $ (toPage), fromPage = $ ("# pages .current"); if (toPage.hasClass ("current") || toPage === fromPage) return; ; toPage.addClass ("fondu actuel"). one ("webkitAnimationEnd", function () fromPage.removeClass ("fondu actuel" "; toPage.removeClass (" fondu ")); fromPage.addClass ("fade out"); Vous pouvez maintenant importer du texte dans chaque conteneur de page et effectuer un test sur un périphérique..
Nous avons maintenant commencé à créer une application Web et à faire fonctionner notre mise en page et notre pagination. Dans la prochaine partie, nous commencerons à construire nos pages, à déboguer sur le mobile et à lancer notre intégration Phonegap..
