Avant d'entrer dans le vif du sujet avec le Framework jQuery Mobile, voici 10 bonnes pratiques intgrer dans votre dveloppement pour les priphriques mobiles. Vous allez aussi connaitreune astuce trs pratique... Tout est dans la formation ci-dessous.

jQLeadBrite("#leadplayer_video_element_53B90A6B05F5D").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTNCOTBBNkIwNUY1RCIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IjEwIGJvbm5lcyBwcmF0aXF1ZXMgZHUgZFx1MDBlOXZlbG9wcGVtZW50IHdlYiBtb2JpbGUgYXZlYyB1bmUgYXN0dWNlIiwiZGVzY3JpcHRpb24iOiIxMCBib25uZXMgcHJhdGlxdWVzIGR1IGRcdTAwZTl2ZWxvcHBlbWVudCB3ZWIgbW9iaWxlIGF2ZWMgdW5lIGFzdHVjZSIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiQ2xpcXVleiBpY2kgcG91ciBQcm9maXRlciBkZSBsYSBQdWlzc2FuY2UgZGVzIEZyYW1ld29ya3MgalF1ZXJ5IGV0IERvam8gISIsInVybCI6Imh0dHA6XC9cL3d3dy5wcm9ncmFtbWF0aW9uLWZhY2lsZS5jb21cL2Zvcm1hdGlvbi1qcXVlcnktZG9qb1wvIiwiYXV0b19mb2xsb3ciOmZhbHNlLCJuZXdfd2luZG93IjpmYWxzZX0sInltIjoiTTJjeEVCbDgwSTAifQ==");

Afficher le texte de la vido10 bonnes pratiques du dveloppement web mobile avec une astuce Bonjour tous etbienvenu sur Dveloppement Facile. On continue ensemble la srie de cours ddie jQueryMobile, avant d'aborder le Framework jQuery Mobile, je vous enseigne les bases pour l'utilisercorrectement, surtout avec le Web mobile o il y a des contraintes connatre et il fauts'adapter, il est ncessaire de s'adapter.Les bonnes pratiques du Web mobile C'est ce quevous allez dcouvrir dans ce cours les bonnes pratiques du Web mobile, comme je vous aimontr dans le cours prcdent, vous pouvez aller trs loin dans la mise en forme d'un site webavec le Medias Queries CSS c'est assez puissant, je vous remontre un autre exemple pourchanger une mise en page d'un site Web directement avec les Medias Queries, au lieu dechanger juste le fond d'cran, l on va carrment changer la position des lments, il faut savoirque vous comme moi, en tant que dveloppeurs, on est habitus concevoir des lmentspour une interface en 16:9, les grands crans d'ordinateurs de bureau. Et avec l'arrive dessmartphones, il faut s'adapter et rflchir sur des crans plus petits que nos sites Internet, ilss'affichent de manire optimale sur des crans plus petits. Le contenu est trs important, doncvoici plusieurs recommandations. Utilisez peu de contenu de texte, allez droit l'essentiel, pas

1 / 4

besoin de raconter un roman sur le priphrique mobile, de toute faon l'cran est petit, lapolice de caractre est petite, l'utilisateur ne va pas s'amuser lire un pav de texte, il estpress, il veut de l'information tout de suite. Ne surchargez pas l'cran avec des images, descouleurs, librez de la place autour des lments utilisables de faon tactile, il faut savoir queles utilisateurs on les doigts gros par rapport la taille de l'cran, quand il clique, il ne faut pasqu'il clique sur deux boutons la fois quand ils veulent cliquer sur un avec leur doigt en modetactile. Prvoyez toujours l'espacement sur les boutons, sur les zones cliquables, fractionnez,dcouper votre contenu en portions logiques, bien dlimit, n'hsitez pas sparer votrecontenu en plusieurs pages, les caractres, pensez qu'on est sur des crans petits pourl'utilisateur, ils doivent tres bien lisibles, plus grands que les applications de bureau, il fautadapter la taille de votre police, bien videmment, et limiter la manipulation de la page parl'utilisateur, il ne faut pas qu'il est trop dfiler, faut vraiment que vos applications mobilessoient simples. Pensez toujours prendre en compte les avantages du mobile et cescontraintes, lorsque vous crez un site web pour les mobiles. Le secret de la russite d'un siteweb mobile rside tout simplement dans une navigation simple, intuitive, et efficace, simplifiez,liminez, pour avoir un site Internet simple et agrable pour votre utilisateur. Voici d'autresrecommandations, le menu de navigation doit tre adapt pour une installation tactile, il doittre trs intuitif, choisissez des termes qui parlent l'utilisateur, vraiment et des gros boutonspour que l'utilisateur puisse cliquer dessus facilement. Il doit tre accessible tout moment dela navigation, vous avez avec jQuery Mobile, la possibilit de bloquer, le menu reste toujours enhaut visible pour l'utilisateur, et n'hsitez pas regrouper plusieurs lments dans une barre denavigation horizontale, on va voir a dans les cours suivants. Une autre solution a consiste prsenter tous les lments de faon verticale avec des boutons sur la page d'accueil et toutesles autres pages proposent une icne pour revenir la page d'accueil, au bouton navigation,vous avez votre page avec la navigation quand vous cliquez sur un bouton vous changez depage mais toutes vos pages ont une icone accueil qui permet de revenir sur l'accueil. Je vousconseille d'avoir un menu, je l'ai mis dans tous les exemples, je l'ai mis dans le bas de la page,quand on dfile on voit toujours le menu affich, a permet de cliquer chaque fois, quel quesoit la page, de revenir l o on veut sur le site internet. Vous pouvez le mettre soit en bas, soiten haut votre menu et qu'il soit bien fixe. Je vous ai mis une adresse d'un site qui vous proposede remplacer le menu classique par une liste droulante en fonction de la taille de l'cran del'utilisateur, je vais vous montrer un exemple, tout de suite, on passe l'exemple.Exempled'application Alors il y a plusieurs exemples de code source, le premier celui que vous voyezs'afficher sur votre cran, l juste derrire, utilisation standard 16:9 sur le ct, et qu'est-cequ'on va faire ? On dfinit, du CSS, si vous ne savez pas quoi a sert le CSS je vous renvoie,il y a une vingtaine de cours sur CSS 3, comment l'utiliser avec HTML5, je vous invite consulter tous ces cours, je crois qu'il y en a 40, ils sont gratuits, et vous expliquent, avec descodes sources l'appui, comment fonctionne le CSS, comment vous pouvez utiliser toutes lespossibilits de CSS. N'hsitez pas, naviguez sur Dveloppement Facile, dveloppement-facile.com, on utilise les Medias Queries avec les diffrentes tailles, je vous renvoie au coursprcdent, l je vais passer assez vite sur les Medias Queries parce que je vous ai djexpliqu cela dans le cours prcdent, on dfinit diffrentes tailles, avec diffrentes positionsdes lments en fonction de la taille de l'cran de l'utilisateur, tout simplement. On va utiliserune technique qui est ici, a va permettre, en fonction de la taille de l'utilisateur, de positionnertous les lments de la page, ne faites pas attention, a je sais que c'est moche, ce n'est pasconseill de l'utiliser, on est dans des exemples, le but c'est de vous montrer comment la page

2 / 4

est redimensionne en fonction de la taille de l'cran, et donc qu'est-ce qu'il se passe ? On estcomme a, et quand l'utilisateur redimensionne l'cran, on passe une taille rduite, vouspouvez rajouter des liens sur le menu, ce que je n'ai pas fait, et l on augmente, voil, aaugmente chaque fois, ici, petite taille, automatiquement rduit. On passe au deuximeexemple, a va utiliser le script jQuery, et on appelle des options de jQuery pour crer le menuen forme de liste. Vous avez votre menu classique ici, que vous voyez l, menu classique ilsuffit de cliquer dessus, vous choisissez vos zone, votre menu, et en fonction de la taille dunavigateur, regardez on bascule en taille droulante partir d'une certaine taille, avec jQuery,a va vous permettre automatiquement de crer votre liste droulante, regardez, rduction de lataille, taille, le menu est normal, l'utilisateur navigue sur un iPad, un iPhone, le menu setransforme automatiquement en liste droulante et tout a grce jQuery. C'est trs pratique, sivous ne comprenez pas ce code source, je vous renvoie, il y a galement une trentaine decours sur jQuery, mme plus maintenant, sur le Framework jQuery il y a des cours trscomplets qui vont vous permettre de comprendre ce code, je vous ai mis du commentaire, iln'est pas trs compliqu pour crer un menu avec les options select, la liste droulante et onajoute le texte donc l on rcupre les lments de Nav A ici, balise nav, balise A, on rcupretous les lments avec le href, les cibles, le texte et ont cr le menu.Votre plan d'actions !Maintenant, comme d'habitude, c'est vous de jouer, vous pouvez maintenant utiliser le menuautomatiquement sur vos priphriques mobiles en fonction de la taille de l'cran, soit un menuclassique, soit un menu sous forme de liste droulante, a se fait beaucoup sur les priphriquemobiles, une liste droulante, si vous avez des questions posez-les directement sous ce cours,vous avez galement le code source complet et si vous souhaitez aller plus loin, la fin decette vido il y a un lien, vous pouvez cliquer dessus, ou il y a une image juste au-dessus decette vido qui vous permet accder plusieurs cours professionnels pour connatre leFramework jQuery sur le bout des doigts, je vous invite cliquer la fin de cette vido sur lelien, pour dcouvrir ces nouveaux cours ddis jQuery, en attendant je vous dis trs bienttpour le prochain cours sur Dveloppement Facile.

Tlchargez l'exemple de code sourceEt voici le code source comment qui accompagne ce cours.

Downloads

Exemple de code source pour le web mobile

Code source comment pour un dveloppement pour le web mobile. Le fichier zipcontient galement jQuery Mobile version 1.4.2 et jQuery version 1.10.2

3 / 4

Le sitecss-tricks.com vous permet de remplacer automatiquement le menu classique par uneliste droulante de type sur les priphriques mobiles.

Choisissez les prochains thmes des cours jQuery MobileProfitez-en pour choisir les thmes des cours jQuery Mobile qui vous aideront le plus. Utilisezpour cela, la zone des commentaires.10 bonnes pratiques du dveloppement web mobile avecune astuce

Powered by TCPDF (www.tcpdf.org)

4 / 4