Conception d'applications mobiles / Navigation dans les bâtiments de développement avec jQuery

Les smartphones sont maintenant équipés de navigateurs Web très efficaces. JavaScript est plus puissant que jamais et peut être étendu à l'aide de bibliothèques de code telles que jQuery. Lorsque vous ajoutez les dernières spécifications HTML5 / CSS3, il est possible de créer des applications Web mobiles très rapides avec du code frontal simple..

Dans ce tutoriel, nous montrerons comment créer un site Web / une application Web mobile. Nous utiliserons les requêtes de média CSS3 pour cibler des périphériques et des résolutions d'écran spécifiques. De plus, un peu de jQuery aide à animer le menu et à charger le contenu de la page externe à l'aide d'appels Ajax. Mieux encore, la mise en page peut même s'étendre pour s'afficher correctement dans les navigateurs de bureau classiques tels que Chrome ou Firefox..

Démo en direct
Code source

Définir la structure de la page

Commençons par examiner d'abord la page HTML et la styler à l'aide de règles CSS. Je vais ignorer la plupart des balises méta inhabituelles dans l'en-tête, car elles n'affectent pas directement l'application Web. Cependant, il y en a quelques-uns que je devrais mentionner, à savoir l'extrait ci-dessous:

Compatible X-UA est utilisé pour décrire le rendu de votre document dans certains navigateurs. C'est un scénario intéressant lors du codage en HTML5, donc je ne m'inquiéterais pas trop à ce sujet. Cependant la méta fenêtre d'affichage La balise est très importante. Il définit la fenêtre du navigateur mobile sur 100% au lieu de l’effet zoomé standard.

Il est également possible de désactiver le zoom utilisateur avec la valeur de contenu modulable par l'utilisateur = non. Mais dans ce cas, nous souhaitons simplement que la largeur de l'écran soit la même que celle de notre périphérique. Les balises des applications Web Apple permettent d’enregistrer le site Web sous forme d’icône d’écran d’accueil sur votre iPhone ou votre iPod Touch. Pas tout à fait nécessaire, mais certainement utile d'avoir.

Contenu du corps intérieur

À l'intérieur de la balise body, j'ai créé une div wrapper avec l'ID #w. À l'intérieur, j'ai brisé la présentation en deux autres divs utilisant des identifiants #pagebody et #navmenu. La largeur totale de la page est limitée à 640px par choix, de sorte que la mise en page soit réduite à un nombre strict.

   HK Mobile
 
  Bienvenue sur le site mobile!
 
 
   Liens du menu
 
  Accueil
 À propos de nous
 Afficher
 Écrivez pour nous
 Contacts
 Politique de confidentialité

Le menu de navigation se voit attribuer une valeur z-index inférieure, de sorte que #pagebody est toujours au top. Ceci est crucial car le code JavaScript va glisser sur le corps de la page un certain nombre de pixels pour révéler la navigation en dessous..

J'ai utilisé un symbole de hachage (#) devant chaque page .html pour mettre fin à un comportement médiocre dans Mobile Safari. Chaque fois que vous cliquez sur un lien, la barre d'URL apparaît et abaisse le contenu. Mais lors du référencement d'un identifiant, rien n'est rechargé sauf par le biais d'appels JavaScript.

Positionnement CSS

Il n'y a pas beaucoup de contenu déroutant dans notre code CSS. La majeure partie du positionnement est effectuée manuellement, puis manipulée via jQuery. Mais il y a quelques morceaux intéressants dans notre document.

/ ** @group core body ** / #w #pagebody position: relative; gauche: 0; largeur maximale: 640px; largeur minimale: 320px; z-index: 99999;  #w #navmenu background: # 475566; hauteur: 100%; bloc de visualisation; position: fixe; largeur: 300px; gauche: 0px; en haut: 0px; z-index: 0;

Ce segment supérieur définit les styles pour les deux sections de la page. Notre menu de navigation ne fait que 300 pixels de large, ce qui laisse un peu de place pour que le contenu de la page reste visible. Le bouton de menu Ouvrir / Fermer est également situé directement sur le côté gauche et toujours accessible. La pièce importante ici est la valeur de la propriété z-index et en utilisant position: fixe; sur notre navmenu.

L'en-tête de la barre d'outils supérieure est également une section intéressante. Ceci est réglé sur une position fixe afin qu'il défile avec le contenu de la page. Cela reproduit un effet similaire à celui que vous retrouvez dans n'importe quelle barre de titre d'application iOS.

/ ** @group header ** / #w #pagebody header # toolbarnav display: block; position: fixe; gauche: 0px; en haut: 0px; z-index: 9999; background: # 0b1851 url ('img / tabbar-solid-bg.png') en haut à gauche no-repeat; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bas-rayon-droit: 0; rayon en bas à gauche: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; hauteur: 44px; largeur: 100%; largeur maximale: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; rembourrage en haut: 10px; rembourrage à droite: 40px; couleur: # e6e8f2; poids de police: gras; taille de police: 2.1em; text-shadow: 1px 1px 0px # 313131;

Règles mobiles

Il est facile de remarquer que j'utilise également une image d'arrière-plan pour la texture de la barre d'en-tête bleue. Cette taille est de 640 × 44 pixels pour rester cohérente avec la structure de présentation. Mais j'ai aussi développé une image @ 2x pour les écrans Retina iPhone / iPad. Vous pouvez voir les deux images ci-dessous ou les extraire de mon code source de démonstration.

System/demo/img/[email protected]
System/demo/img/[email protected]

J'installe le CSS mobile pour cette fonctionnalité dans un autre fichier nommé responsive.css. Il contient deux requêtes multimédia qui remplacent la barre de titre bg et l’icône du bouton de menu pour les dispositifs de rétine..

/ ** retina display ** / @media uniquement écran et (-webkit-min-device-pixel-ratio: 2), uniquement écran et (min - moz-device-pixel-ratio: 1,5), uniquement écran et ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') en haut à gauche no-repeat; taille du fond: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') non répétée taille de l'arrière-plan: 53px 30px;

Concevoir des flèches de menu

Dans la zone de navigation, j'ai également inséré une petite flèche sur le côté droit de chaque lien de menu. Cela peut facilement être remplacé par une image de toute illustration Creative Commons. Mais la plupart des amateurs de CSS3 adoreront tester cette méthode.

#w #navmenu ul li a :: after content: "; display: block; width: 6px; height: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; position: absolute; right : 30px; haut: 45%; -webkit-transformation: rotation (45deg); -moz-transformation: rotation (45deg); -o-transformation: rotation (45deg); transformation: rotation (45deg); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Nous utilisons le transformer propriété pour créer une petite bordure après le contenu. J'ai aussi mis en place position: absolue; afin que nous puissions déplacer librement ces frontières autour de l'élément de lien interne. Il est très facile de changer la couleur de la bordure en vol stationnaire, ce qui procure un sentiment plus dynamique. C'est assez incroyable ce que vous pouvez accomplir en utilisant simplement les règles de base HTML5 et CSS3.

Mais passons maintenant aux morceaux de code JavaScript. Rappelez-vous que cela nécessite une inclusion à la bibliothèque jQuery pour que mon code fonctionne correctement.

jQuery Animated

En écrivant ces codes personnalisés, j'ai créé un nouveau document intitulé script.js. N'hésitez pas à les écrire directement en > tags, ou téléchargez mon exemple à partir du code source de la démonstration.

 $ (document) .ready (fonction () var pagebody = $ ("# pagebody"); var menu = $ ("# navmenu"); var topbar = $ ("# # toolbarnav"); var content = $ (" #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // récupère les variables sous la forme // viewport.width / viewport.height 
 Pour commencer, j'ai configuré des variables de page permettant de référencer des éléments du document beaucoup plus rapidement. La valeur de la fenêtre d'affichage n'est jamais utilisée, mais elle peut être utile si vous souhaitez ajuster les étapes d'animation. Par exemple, vous pouvez vérifier la largeur actuelle du navigateur et ouvrir votre menu plus petit ou plus large en conséquence.
 function openme () $ (function () topbar.animate (left: "290px", durée: 300, file d'attente: false); pagebody.animate (left: "290px", durée: 300 , file d'attente: false););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px", durée: 180, file d'attente: false);); 
 Ensuite, j'ai défini deux fonctions importantes pour ouvrir et fermer le menu. Celles-ci auraient pu être effectuées en une seule fonction et en une bascule de rappel - sauf que nous devons en fait animer deux éléments distincts en même temps. Malheureusement, ce n'est pas le comportement par défaut de jQuery, nous devons donc utiliser une syntaxe alternative..
 Les deux éléments que nous ciblons sont nommés barre du haut et pagebody. La zone de contenu interne avec un arrière-plan blanc correspond au corps de page complet. Cependant, la position de la barre de titre est fixée en haut de la page. Cela signifie que la page ne s'animera pas naturellement et que nous devons utiliser un appel séparé. L’ouverture est configurée pour pousser à 290 pixels à gauche (presque toute la largeur de navigation de 300 pixels) et la fonction de fermeture le rétracte..
 Chargement de contenu dynamique
 Le code ci-dessus est assez simple pour prendre en charge l'animation. Et théoriquement, c’est tout ce dont vous avez besoin pour créer un site Web mobile aussi simple, mais j’en veux un peu plus..
 Chaque fois que l'utilisateur clique sur un lien de menu, nous souhaitons fermer la navigation actuelle et afficher un gif de chargement pendant la recherche du contenu de la page. Ensuite, une fois que nous avons terminé, nous supprimons l’image gif et la chargeons à l’intérieur. C'est fantastique car nous pouvons même utiliser des pages statiques .html pour le contenu. Pas de PHP, ni Ruby, ni Perl, ni aucun autre langage de base pour compliquer les choses.
 Gestion des clics
 Tout d'abord, nous voulons tester lorsque nos utilisateurs cliquent sur les boutons de navigation. Cela arrêtera le chargement de la valeur href normale et nous pouvons utiliser nos propres fonctions pour afficher du contenu externe..
 // chargement du contenu de la page pour la navigation $ ("a.navlink"). live ("clic", fonction (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Nous ouvrons maintenant un sélecteur pour n'importe quelle ancre de la classe navlink. Chaque fois qu'un utilisateur clique sur l'un de ces liens, nous l'empêchons de charger et configurons une variable pour l'URL complète. J'ai également configuré une variable pour le contenu HTML afin d'inclure un chargeur d'images standard. Si vous voulez personnaliser le vôtre, je recommande fortement Ajaxload.
 Ajax .load ()
 Il y a deux pièces différentes à cet effet que j'ai soigneusement divisées. Le code ci-dessous est notre premier bit qui ferme le menu de navigation et fait glisser la fenêtre du document total jusqu'en haut. Nous voulons remplacer le contenu du corps interne par une petite animation de chargeur, et les utilisateurs ne peuvent pas le voir s’ils regardaient le bas de la page..
 closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Enfin, nous souhaitons enfin remplacer le contenu du corps interne par notre image et récupérer la page externe à charger. Normalement, cela ne prend que quelques centaines de millisecondes, voire plus vite. J'ai donc défini une fonction de délai d'attente..
 content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * pas de rappel * /), 1200);
 Cela mettra en pause 1200 millisecondes avant de charger le nouveau contenu. Pour ma démo, cela a l'air beaucoup mieux et vous donne une idée de la façon dont l'application se comporterait sur des connexions Internet plus lentes.
 
 Conclusion
 J'encourage tous les développeurs Web à télécharger le code source du didacticiel et à jouer seul. Voici un exemple de base de ce qui peut être accompli avec HTML / CSS3 et une touche d’effets JavaScript. Construire pour les écrans mobiles est plus facile que jamais avec des requêtes multimédia et des navigateurs Web plus extensibles.
 Voyez si vous pouvez appliquer ce code dans vos futurs projets Web. La création d'applications mobiles est un art, un peu comme la conception Web, et nécessite beaucoup de dévouement et de pratique. J'espère que ce tutoriel peut être un bon point de départ pour quelques développeurs enthousiastes. Si vous avez des questions ou des réflexions sur le code, n'hésitez pas à les partager dans l'espace de discussion.