Dans ce tuto nous allons voir comment réaliser un site internet adapté au mobile (iOS, Android, BlackBerry, Windows Mobile...) avec le framework Jquery Mobile.

Nous réaliserons une intégration complète de site en nous basant sur un exemple concret de site existant. Nous réaliserons la page d’accueil contenant les derniers articles, une page article avec les commentaires et le formulaire d’ajout de commentaire, une page à propos et la page contact. Au cours de ce tuto vous apprendrez à :

  • Installer et comprendre le fonctionnement de Jquery Mobile
  • Utiliser les data-role présents avec html5
  • Adapter le shortcut icon pour différents os.
  • Réaliser un site web mobile

Ce tutoriel est accessible aux débutants.

Jetez un oeil à ces autres tuto jQuery 1.5

Création d'un formulaire web 2.0Création d'un formulaire…
Dans ce tuto jQuery nous allons apprendre à nous servir de…

Animer un backgroundAnimer un background
Dans ce tuto jQuery, nous allons voir ensemble comment créer…

Menu avec effet élastiqueMenu avec effet élastique
Dans ce tuto nous allons voir ensemble comment creer un menu…

Menu avec images animéesMenu avec images animées
Dans ce tuto jQuery nous allons voir ensemble comment créer…

Création d'un formulaire web 2.0Création d'un formulaire…
Dans ce tuto jQuery nous allons apprendre à nous servir de…

Menu avec effet élastiqueMenu avec effet élastique
Dans ce tuto nous allons voir ensemble comment creer un menu…

Menu animé fluideMenu animé fluide
Dans ce tuto jQuery, nous allons voir qu'il est de créer un…

Menu ultra-simpleMenu ultra-simple
Dans ce tutoriel, nous allons voir une manière très rapide…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.5 de 26 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

Developpeur , Formateur

Je m’appelle Thibaut Baille, actuellement expert front-end à MFG Labs et auteur aux éditions Eyrolles. http://thibaut-baillet.com

Toutes les formations de Developpeur


Témoignage des clients de Developpeur

developpeur c'est un Très bon formateur!!!

Très bon formateur, précis et clair dans ses explications.

Bravo très bon formateur, vive les futurs tuto !

Enfin un moteur de recherche qui trouve ce qu'on lui demande ! Bon tuto bien expliqué Merci.

 

D'autres tuto de Developpeur

Réaliser un moteur de recherche pertinentRéaliser un moteur de recherche pertinent
Dans ce tuto nous allons voir comment réaliser un moteur de recherche pertinent avec…

Installer et configurer votre serveur webInstaller et configurer votre serveur web
Dans ce tuto nous allons voir comment installer un serveur web Apache sous Mac. Apache…

Coder plus rapidement avec le plug-in Zen CodingCoder plus rapidement avec le plug-in Zen Coding
Dans ce tuto nous allons apprendre à utiliser le plug-in Zen-coding. Zen-coding permet…

voir tous les tuto de Developpeur

Notes attribuées par les utilisateurs (22 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (34)

par karimdehouchea voté :
(a acheté ce tuto - 18 juin 2013)

" J'aurais aimé voir ce que cela donnait sur iPad.
Mais le tuto donne de bonnes bases pour se lancer dans jQuery Mobile. "

par genesiana voté :
(a acheté ce tuto - 23 septembre 2012)

" Le son n'est pas extra. Le formateur mange un peu les mots. Mais le tuto est assez clair. "

par Developpeur
(auteur de ce tuto - 02 septembre 2012)

" @joselito la liste des navigateurs supportés est listée sur le site de jquery mobile : http://jquerymobile.com/gbs/ "

par joselitoa voté :
(a acheté ce tuto - 28 août 2012)

" Tuto facile à suivre et qui ne sera utile ... mais il ne fonctionne pas sur HTC radar équipé de windows phone 7.5 alors que ce n'est pas le cas sur un Iphone 3GS .... Est-ce normal ?
Merci "

par maissouma voté :
(a acheté ce tuto - 01 août 2012)

" Merci beaucoup ^^ "

par Developpeur
(auteur de ce tuto - 31 juillet 2012)

" Le seul que j'ai testé et qui marche plutôt bien est "Mobile Theme Switcher" "

par maissouma voté :
(a acheté ce tuto - 31 juillet 2012)

" Merci pour votre réponse, puis-je connaître ces plugins qui permettent de sélectionner un thème si l'internaute visite le site via un mobile ? Cela m'arrangerai beaucoup vu que j'ai pas mal avancé sur mon site en wp. Ces plugins sont sur wordpress ? Merci d'avance. "

par Developpeur
(auteur de ce tuto - 31 juillet 2012)

" @maissoumà il faut créer votre thème Wordpress avec jQuery Mobile. Ensuite, il existe des plug-ins qui sélectionnent un thème spécifique si l'internaute vient depuis un mobile. "

par maissouma voté :
(a acheté ce tuto - 26 juillet 2012)

" Superbe tuto, exactement ce que je recherchais. Une petite question toutefois ^^ : J'aimerai que lorsqu'un internaute visite mon site (qui est sous wordpress) sur une plateforme mobile,qu'automatiquement que mon site bascule en version mobile de ce tuto (jquery mobile). Comment dois-je procéder selon vous ? je ne sais pas si je suis clair ^^. Merci d'avance. si vous voulez mon email : ii18@live.fr "

par Happycleana voté :
(a acheté ce tuto - 11 juillet 2012)

" Très bon tuto pour une vue d'ensemble des fonctionnalités primaires de Jquery mobile. "

par Developpeur
(auteur de ce tuto - 11 janvier 2012)

" de rien :) "

par Pixelorda voté :
(a acheté ce tuto - 11 janvier 2012)

" Yes! Merci , +1 Star pour la réactivité ;) "

par Developpeur
(auteur de ce tuto - 11 janvier 2012)

" @Pixelord Il faut ajouter le viewport avec <meta name="viewport" content="width=device-width, initial-scale=1"> dans ta balise head "

par Pixelorda voté :
(a acheté ce tuto - 11 janvier 2012)

" Tuto clair et précis où l'ont voit ce que l'on doit voir uniquement ;)

J'ai par contre juste une question mais qui est peut etre due à la version de jquery qui est maintenant en V1 a priori : L'affichage se fais de beaucoup plus loin personnelement...ça ne zoom par comme sur le tuto , la page prend automatiquement du "recul".une idée?Je cherche dans les docs mais je trouve pas pour l'instant ^^ "

par Reikia voté :
(a acheté ce tuto - 06 décembre 2011)

" Vraiment sympa pour pouvoir apprendre les bases ! "

par stephaneturquaya voté :
(a acheté ce tuto - 25 novembre 2011)

" Très agréable à suivre. Très bonne qualité.
Par contre, j'aimerai savoir en faire encore plus :) "

par BlaCkMaRe90a voté :
(a acheté ce tuto - 06 novembre 2011)

" Sa ma aider pas mal pour faire ma version mobile de mon site "

par Developpeur
(auteur de ce tuto - 16 octobre 2011)

" @ jbv078 regarde dans l'historique de tes tutos télécharger ou contact le support de tuto.com "

par jbv078
(a acheté ce tuto - 26 septembre 2011)

" Bonjour,
Est ce normale que le lien pour télécharger les fichiers sources n'apparait pas ?

Merci "

par Developpeur
(auteur de ce tuto - 02 juillet 2011)

" @Jasse29 si tu as un mac utilise le simulateur fourni avec le SDK iOS, tu peux t'inscrire sur le site apple developper et le dl.
Sinon tu le mets sur un serveur et tu accèdes au site depuis ton propre iPhone. "

par Jasse29a voté :
(a acheté ce tuto - 01 juillet 2011)

" Bonsoir,

Le tutoriel est intéressant et instructif. Mais j'aimerais savoir comment faire pour avoir un aperçu comme toi avec un iPhone ?

Merci "

par Developpeur
(auteur de ce tuto - 06 juin 2011)

" @zouzou3000 php n'a rien à voir avec le tuto sur jquery mobile, il y a juste un include de fichier, si cela te gêne copie/colle le contenu du fichier à la place de la ligne où est présent l'include. "

par zouzou3000
(a acheté ce tuto - 05 juin 2011)

" sa serais bien de monte montre comment tu as fait fonction ton petit programme parce que php et appache n'est pas active obligatoirment
"

par zouzou3000
(a acheté ce tuto - 05 juin 2011)

" est ce qu'il faut un server php sur sa machine "

par Developpeur
(auteur de ce tuto - 04 mai 2011)

" @JCMdu18 Bien sûr, tu as juste à mettre les infos dans ta base de données puis à les afficher avec PHP. "

par JCMdu18a voté :
(a acheté ce tuto - 03 mai 2011)

" Bonjour
est-il possible de remplir le listview avec mySql
Merci pour votre réponse
JC MANSION "

par Developpeur
(auteur de ce tuto - 30 avril 2011)

" Je vous remercie, je suis actuellement disponible en freelance.
Vous pouvez me contacter via mon formulaire de contact sur http://thibaut-baillet.com "

par PIM62
(a acheté ce tuto - 29 avril 2011)

" bon tutoriel, on va surement vous appeler pour créer notre site web-phone si vous etes dispo.
Pierre Malengé (pierre@malenge.com) "

par Developpeur
(auteur de ce tuto - 24 avril 2011)

" Bonjour JC, tu peux utiliser n'importe quel éditeur HTML pour ce tuto. Personnellement j'utilise Espresso. "

par JCMdu18a voté :
(a acheté ce tuto - 18 avril 2011)

" Bonjour

Est-il possible de savoir quel éditeur pour réaliser l'exemple de votre tuto.
Merci
JC MANSION "

par IDvirtuellea voté :
(a acheté ce tuto - 12 avril 2011)

" Merci pour ce tuto.
Il permet rapidement de prendre en main jQuery Mobile. "

par Developpeur
(auteur de ce tuto - 09 avril 2011)

" Merci de vos commentaires :) je vais tout faire pour continuer ainsi ! "

par toma1618a voté :
(a acheté ce tuto - 09 avril 2011)

" Tuto clair et efficace qui permet de bien comprendre les bases de JQuery Mobile.
Merci à l'auteur! "

par supernicoa voté :
(a acheté ce tuto - 03 avril 2011)

" Très bon tuto, clair et efficace.
"

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto jQuery 1.5 d’une durée de 26 minutes a été acheté 473 fois et a reçu une note moyenne de 4/5.

Ce tuto a été publié le 31 mars 2011 par Developpeur, contributeur, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !