Jquery Mobile vs Twitter Bootstrap

24
JQUERY MOBILE VS TWITTER BOOTSTRAP PRÉSENTÉE PAR : NESRINE MAAOUIA

description

Jquery Mobile vs Twitter Bootstrap

Transcript of Jquery Mobile vs Twitter Bootstrap

Page 1: Jquery Mobile vs Twitter Bootstrap

JQUERY MOBILE

VS

TWITTER BOOTSTRAP

P R É S E N T É E P A R :

N E S R I N E M A A O U I A

Page 2: Jquery Mobile vs Twitter Bootstrap

PLAN :

2

Page 3: Jquery Mobile vs Twitter Bootstrap

PRÉSENTATION

Développement Web mobile

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

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

5

Qu'est-ce que Jquery Mobile

Page 6: Jquery Mobile vs Twitter Bootstrap

6

Page 7: Jquery Mobile vs Twitter Bootstrap

7

Page 8: Jquery Mobile vs Twitter Bootstrap

JQUERY MOBILE: AVANTAGES

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

8

Page 9: Jquery Mobile vs Twitter Bootstrap

9

Page 10: Jquery Mobile vs Twitter Bootstrap

10

Page 11: Jquery Mobile vs Twitter Bootstrap

11

Page 12: Jquery Mobile vs Twitter Bootstrap

12

Page 13: Jquery Mobile vs Twitter Bootstrap

JQUERY MOBILE: INCONVÉNIENTS

Son look and feel de base laisse peu de place à l’image de marque

de votre client

Très grand 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 !

13

Page 14: Jquery Mobile vs Twitter Bootstrap

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

14

Page 15: Jquery Mobile vs Twitter Bootstrap

BOOTSTRAP : AVANTAGES

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 progressive sur IE7, et IE8)

15

Page 16: Jquery Mobile vs Twitter Bootstrap

BOOTSTRAP: EXEMPLE

16

Page 17: Jquery Mobile vs Twitter Bootstrap

17

Bootstrap : Composants

Page 18: Jquery Mobile vs Twitter Bootstrap

18

Page 19: Jquery Mobile vs Twitter Bootstrap

19

Page 20: Jquery Mobile vs Twitter Bootstrap

20

Page 21: Jquery Mobile vs Twitter Bootstrap

PERSONNALISATION

21

Page 22: Jquery Mobile vs Twitter Bootstrap

BOOTSTRAP : INCONVÉNIENTS

Rendu des composants parfois limité 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

22

Page 23: Jquery Mobile vs Twitter Bootstrap

CONCLUSION

Chaque projet étant différent, cela va dépendre du

contexte, du projet, du client, etc.

The right tool, for the right job.

23

Page 24: Jquery Mobile vs Twitter Bootstrap

MERCI POUR VOTRE ATTENTION

24