Le Web mobile avec ASP.Net
MVC et jQuery Mobile
Guillaume Leborgne
MVP Client dev
MCNEXT

François Guillot
Consultant
MCNE...
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !...
#mstechdays

ASP.NET MVC et jQuery Mobile
LE WEB

#mstechdays

ASP.NET MVC et jQuery Mobile
L’informatique & le web
• Il y a 5 ans

#mstechdays

ASP.NET MVC et jQuery Mobile
L’informatique & le web
• Aujourd’hui

#mstechdays

ASP.NET MVC et jQuery Mobile
Diversité des terminaux
–
–
–
–
–
–
–
–
–
#mstechdays

Desktop
Smartphones
Tablettes
Liseuses
Bornes
TV connectées
Montres...
Les navigateurs

Google
Chrome
Nokia
Blackberry
Bada
WebOS

#mstechdays

Mozilla
Firefox

Opera
OperaMini
NetFront
Myriad
...
Les navigateurs
Au total, environ 400 navigateurs ou versions différentes…

#mstechdays

ASP.NET MVC et jQuery Mobile
APPROCHES POUR DU WEB
MULTI-CANAL

#mstechdays

ASP.NET MVC et jQuery Mobile
Choix de fonctionnement
• Application multi-support
– Exploite le responsive web design
(bootstrap)
• S’adapte au périphér...
Choix de fonctionnement
• Sites dédiés
– Redirection gérée par le
serveur web
– Liberté totale de
fonctionnement
– Tout es...
Choix de fonctionnement
• Logique commune,
affichage dédié
– Ergonomie adaptée à
chaque appareil
– Utilise le DisplayMode ...
RÉALISER SON APPLICATION
WEB MOBILE AVEC ASP.NET

#mstechdays

ASP.NET MVC et jQuery Mobile
CRÉER UN PROJET MOBILE
AVEC VISUAL STUDIO 2013

#mstechdays

ASP.NET MVC et jQuery Mobile
Les outils de Visual Studio
•
•
•
•
•

Packages NuGet
Le module de bundling
WebEssentials
DisplayMode
ASP.NET Web API

#ms...
JQUERY MOBILE

#mstechdays

ASP.NET MVC et jQuery Mobile
Principe
•
•

jQuery: Abstraction du navigateur
jQuery Mobile: Widgets &
abstraction de l’interface

•

jQuery Mobile n’es...
Fonctionnement
•
•
•

•
•

Un themeroller
Des widgets imbriqués
Code par markup (data…)
La gestion des différences
d’implé...
Avantages
•
•
•
•

Pensé pour le mobile (cross devices)
Responsive web design
Amélioration progressive
Accessibilité

•

-...
Défauts
•
•
•
•

À partir d’Internet Explorer 8
Design parfois uniforme
Parfois lent sur les smartphones bas de gamme
Peut...
WEB APP ASP.NET MVC
UTILISANT JQUERY MOBILE

#mstechdays

ASP.NET MVC et jQuery Mobile
Les bonnes pratiques
• Attention aux sous-requêtes et à la consommation réseau
– Minifier, concaténer et compresser (GZIP)...
Digital is
business
Le Web mobile avec ASP.Net MVC et jQuery Mobile
Prochain SlideShare
Chargement dans…5
×

Le Web mobile avec ASP.Net MVC et jQuery Mobile

1 244 vues

Publié le

ASP.Net MVC introduit des briques pour le développement d'applications web pour terminaux mobiles, et propose de tirer parti de jQuery Mobile pour accélérer vos développements. Durant cette session, nous aborderons les nouveautés de ASP.Net MVC4 pour les applications web mobiles, et nous présenterons les concepts fondamentaux de jQuery Mobile. Nous verrons comment ces deux outils se complémentent pour dopper vos développements !

Speakers : François Guillot (MCNEXT), Guillaume Leborgne (MCNEXT)

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 244
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le Web mobile avec ASP.Net MVC et jQuery Mobile

  1. 1. Le Web mobile avec ASP.Net MVC et jQuery Mobile Guillaume Leborgne MVP Client dev MCNEXT François Guillot Consultant MCNEXT http://www.mcnext.com ASP.NET MVC et jQuery Mobile
  2. 2. Donnez votre avis ! Depuis votre smartphone sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les Techdays ! #mstechdays ASP.NET MVC et jQuery Mobile
  3. 3. #mstechdays ASP.NET MVC et jQuery Mobile
  4. 4. LE WEB #mstechdays ASP.NET MVC et jQuery Mobile
  5. 5. L’informatique & le web • Il y a 5 ans #mstechdays ASP.NET MVC et jQuery Mobile
  6. 6. L’informatique & le web • Aujourd’hui #mstechdays ASP.NET MVC et jQuery Mobile
  7. 7. Diversité des terminaux – – – – – – – – – #mstechdays Desktop Smartphones Tablettes Liseuses Bornes TV connectées Montres Réfrigérateurs … ASP.NET MVC et jQuery Mobile
  8. 8. Les navigateurs Google Chrome Nokia Blackberry Bada WebOS #mstechdays Mozilla Firefox Opera OperaMini NetFront Myriad Phantom ASP.NET MVC et jQuery Mobile Apple Safari Microsoft Internet Explorer SkyFire Amazon Silk …
  9. 9. Les navigateurs Au total, environ 400 navigateurs ou versions différentes… #mstechdays ASP.NET MVC et jQuery Mobile
  10. 10. APPROCHES POUR DU WEB MULTI-CANAL #mstechdays ASP.NET MVC et jQuery Mobile
  11. 11. Choix de fonctionnement • Application multi-support – Exploite le responsive web design (bootstrap) • S’adapte au périphérique – Difficile à implementer sur des pages complexes #mstechdays ASP.NET MVC et jQuery Mobile
  12. 12. Choix de fonctionnement • Sites dédiés – Redirection gérée par le serveur web – Liberté totale de fonctionnement – Tout est à faire en double #mstechdays ASP.NET MVC et jQuery Mobile
  13. 13. Choix de fonctionnement • Logique commune, affichage dédié – Ergonomie adaptée à chaque appareil – Utilise le DisplayMode de ASP.NET MVC – Le principe de fonctionnement doit rester commun #mstechdays ASP.NET MVC et jQuery Mobile
  14. 14. RÉALISER SON APPLICATION WEB MOBILE AVEC ASP.NET #mstechdays ASP.NET MVC et jQuery Mobile
  15. 15. CRÉER UN PROJET MOBILE AVEC VISUAL STUDIO 2013 #mstechdays ASP.NET MVC et jQuery Mobile
  16. 16. Les outils de Visual Studio • • • • • Packages NuGet Le module de bundling WebEssentials DisplayMode ASP.NET Web API #mstechdays ASP.NET MVC et jQuery Mobile
  17. 17. JQUERY MOBILE #mstechdays ASP.NET MVC et jQuery Mobile
  18. 18. Principe • • jQuery: Abstraction du navigateur jQuery Mobile: Widgets & abstraction de l’interface • jQuery Mobile n’est PAS une librairie pour faire des Single Page Applications #mstechdays ASP.NET MVC et jQuery Mobile
  19. 19. Fonctionnement • • • • • Un themeroller Des widgets imbriqués Code par markup (data…) La gestion des différences d’implémentation entre navigateurs (touch, …) Des classes CSS « clef en main » #mstechdays ASP.NET MVC et jQuery Mobile
  20. 20. Avantages • • • • Pensé pour le mobile (cross devices) Responsive web design Amélioration progressive Accessibilité • -> Accélère beaucoup les développements #mstechdays ASP.NET MVC et jQuery Mobile
  21. 21. Défauts • • • • À partir d’Internet Explorer 8 Design parfois uniforme Parfois lent sur les smartphones bas de gamme Peut devenir contraignant si on sort des dogmes d’ergonomie du framework #mstechdays ASP.NET MVC et jQuery Mobile
  22. 22. WEB APP ASP.NET MVC UTILISANT JQUERY MOBILE #mstechdays ASP.NET MVC et jQuery Mobile
  23. 23. Les bonnes pratiques • Attention aux sous-requêtes et à la consommation réseau – Minifier, concaténer et compresser (GZIP) les ressources – Optimiser les images, utiliser des sprites => Utilisez les bundles ASP.Net, Webgrease, etc • Tester sur des vrais terminaux, et si possible en condition réelles GSM • Amélioration progressive => Modernizr • Combiner jQuery mobile avec un framework SPA • Tirer parti de HTML5 (app cache, …) #mstechdays ASP.NET MVC et jQuery Mobile
  24. 24. Digital is business

×