1. JQUERY MOBILE
VS
TWITTER BOOTSTRAP
RÉALISÉ PAR :
NESRINE MAAOUIA

2. PLAN :
2

3. 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

4. 2. RESPONSIVE WEB DESIGN (RWD)
Un site qui pourra s'auto-adapter en fonction de la taille d'un écran.
4

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.
5

6. 3.1. QUELQUES COMPOSANTS
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.
6

7. 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

8. 3.3. EXEMPLE(1):
8

9. 3.3. EXEMPLE(2):
9

10. 3.4. EXEMPLE(3):
10

11. 3.5. THÈME JQUERY MOBILE:
11

12. 3.6. LES INCONVÉNIENTS DU JQUERY MOBILE:
 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

13. 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

14. 4.1. LES AVANTAGES DE BOOTSTRAP :
 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

15. 4.2. BOOTSTRAP: EXEMPLE
15

16. 4.3. BOOTSTRAP: EXEMPLE (2)
16

17. 4.2. LES COMPOSANTS DU BOOTSTRAP
17

18. 4.2. LES COMPOSANTS DU BOOTSTRAP
18

19. 19

20. 4.3. EXEMPLE DE GRID PERSONNALISÉE
20

21. 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

22. 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

23. 23