jQuery mobile vs Twitter bootstrap
-
Upload
odc-orange-developer-center -
Category
Documents
-
view
2.602 -
download
1
Transcript of jQuery mobile vs Twitter bootstrap
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
PLAN :
Introduction
Introduction1
Responsive web design
Responsive web design22
Jquery Mobile
Jquery Mobile33
Twitter Bootstrap
Twitter Bootstrap4
Conclusion
Conclusion5
2
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
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.
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
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):
9
3.3. EXEMPLE(2):
10
3.4. EXEMPLE(3):
11
3.5. THÈME 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
3.6. LES INCONVÉNIENTS DU JQUERY MOBILE:
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
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 :
15
4.2. BOOTSTRAP: EXEMPLE
16
4.3. BOOTSTRAP: EXEMPLE (2)
4.2. LES COMPOSANTS DU BOOTSTRAP
17
18
4.2. LES COMPOSANTS DU BOOTSTRAP
19
20
4.3. EXEMPLE DE GRID PERSONNALISÉE
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
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
Merci pour votre attention
23