jQuery mobile vs Twitter bootstrap
-
Upload
odc-orange-developer-center -
Category
Documents
-
view
2.619 -
download
1
Transcript of jQuery mobile vs Twitter bootstrap
![Page 1: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/1.jpg)
JQUERY MOBILE VS
TWITTER BOOTSTRAP
R É A L I S É P A R :
N E S R I N E M A A O U I A
![Page 2: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/2.jpg)
PLAN :
Introduction
Introduction1
Responsive web design
Responsive web design22
Jquery Mobile
Jquery Mobile33
Twitter Bootstrap
Twitter Bootstrap4
Conclusion
Conclusion5
2
![Page 3: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/3.jpg)
1. INTRODUCTION
Construire plusieurs sites Web qui peuvent avoir un rendu fluide sur mobile.
Le principe de base est de construire une seule application qui fonctionne sur plusieurs plateforme
3
![Page 4: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/4.jpg)
2. RESPONSIVE WEB DESIGN (RWD)
Un site qui pourra s'auto-adapter en fonction de la taille d'un écran.
4
![Page 5: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/5.jpg)
5
3. QU'EST-CE QUE JQUERY MOBILE
jQuery Mobile est un framework d'interface utilisateur tactile conviviale bâtie sur le Core jQuery qui fonctionne sur tous les populaires mobile, tablette et les plateformes de bureau.
![Page 6: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/6.jpg)
6
JQuery Mobile est un Framework complémentaire à la librairie jQuery, qui permet de créer facilement des applications Web cross-plateforme qui auront un look and feelmobile.
3.1. QUELQUES COMPOSANTS
![Page 7: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/7.jpg)
3.2. LES AVANTAGES DU JQUERY MOBILE:
Un Framework pour développer sur différentes plates-formes :
iOs, Android, Windows Mobile, BlackBerry, mais également navigateurs desktop et Phonegap.
Facile à utiliser :Un système basé sur l’attribut HTML5 data- qui sera automatiquement récupéré et transformé par jQuery Mobile.
Un design personnalisable
Des modules personnalisables
7
![Page 8: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/8.jpg)
8
3.3. EXEMPLE(1):
![Page 9: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/9.jpg)
9
3.3. EXEMPLE(2):
![Page 10: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/10.jpg)
10
3.4. EXEMPLE(3):
![Page 11: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/11.jpg)
11
3.5. THÈME JQUERY MOBILE:
![Page 12: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/12.jpg)
Son « look and feel » de base laisse peu de place à l’image de marque de votre client
Très gros travail sur le CSS
Le poids de la librairie est également un paramètre non négligeable : 24KB pour le script minifié, 7KB pour la feuille de style de base minifiée elle aussi. Sans oublier qu’il faut inclure la librairie jQuery !
12
3.6. LES INCONVÉNIENTS DU JQUERY MOBILE:
![Page 13: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/13.jpg)
4. QU'EST-CE QUE BOOTSTRAP ?
Un Framework HTML, CSS & JavaScript
Fonctionnant sur n'importe quelle technologie
serveur ou environnement serveur.
Avec une dizaine de composants, et plugin JavaScript
Son concept : Création et maintenance rapide d'un site internet avec rendu correct, et interface complète
13
![Page 14: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/14.jpg)
Facilité & Accessibilité Structure & Méthodologie Vitesse de développement accrue Framework porté vers le futur Grille fixe ou fluide Personnalisable & Modulable Compatibilité sur les différents browsers
(amélioration visible sur IE7, et 8)
14
4.1. LES AVANTAGES DE BOOTSTRAP :
![Page 15: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/15.jpg)
15
4.2. BOOTSTRAP: EXEMPLE
![Page 16: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/16.jpg)
16
4.3. BOOTSTRAP: EXEMPLE (2)
![Page 17: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/17.jpg)
4.2. LES COMPOSANTS DU BOOTSTRAP
17
![Page 18: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/18.jpg)
18
4.2. LES COMPOSANTS DU BOOTSTRAP
![Page 19: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/19.jpg)
19
![Page 20: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/20.jpg)
20
4.3. EXEMPLE DE GRID PERSONNALISÉE
![Page 21: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/21.jpg)
4.4. LES INCONVÉNIENTS DU BOOTSTRAP
Rendu des composants parfois limites sous IE
L'héritage de classes peut devenir lourd
Contrainte au niveau du design suite à l'utilisation de la grille
Peut prendre un certain temps pour qu'un site ait un rendu unique
21
![Page 22: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/22.jpg)
5. CONCLUSION
Chaque projet étant différent, cela va dépendre du contexte, du projet, du client, etc.
The right tool, for the right job.
22
![Page 23: jQuery mobile vs Twitter bootstrap](https://reader035.fdocuments.net/reader035/viewer/2022062419/5583e0c2d8b42aaa5a8b4a69/html5/thumbnails/23.jpg)
Merci pour votre attention
23