Le Web mobile avec ASP.Net MVC et jQuery Mobile
-
Upload
microsoft -
Category
Technology
-
view
790 -
download
5
description
Transcript of Le Web mobile avec ASP.Net MVC et jQuery Mobile
![Page 1: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/1.jpg)
![Page 2: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/2.jpg)
ASP.NET MVC et jQuery Mobile
Le Web mobile avec ASP.Net MVC et jQuery
MobileGuillaume Leborgne
MVP Client devMCNEXT
François Guillot
ConsultantMCNEXT
http://www.mcnext.com
![Page 3: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/3.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
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 !
Donnez votre avis !
![Page 4: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/4.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
![Page 5: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/5.jpg)
ASP.NET MVC et jQuery Mobile#mstechdays
LE WEB
![Page 6: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/6.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Il y a 5 ans
L’informatique & le web
![Page 7: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/7.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Aujourd’hui
L’informatique & le web
![Page 8: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/8.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
– Desktop– Smartphones– Tablettes– Liseuses– Bornes– TV connectées– Montres– Réfrigérateurs– …
Diversité des terminaux
![Page 9: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/9.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
Les navigateurs
NokiaBlackberryBadaWebOS
OperaMiniNetFrontMyriadPhantom
SkyFireAmazon Silk…
Google Chrome
Mozilla Firefox
OperaApple Safari
Microsoft Internet Explorer
![Page 10: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/10.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
Les navigateursAu total, environ 400 navigateurs ou versions différentes…
![Page 11: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/11.jpg)
ASP.NET MVC et jQuery Mobile#mstechdays
APPROCHES POUR DU WEB MULTI-CANAL
![Page 12: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/12.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Application multi-support– Exploite le responsive web
design (bootstrap)• S’adapte au périphérique
– Difficile à implementer sur des pages complexes
Choix de fonctionnement
![Page 13: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/13.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Sites dédiés– Redirection gérée par le
serveur web– Liberté totale de
fonctionnement– Tout est à faire en
double
Choix de fonctionnement
![Page 14: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/14.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Logique commune, affichage dédié– Ergonomie adaptée à
chaque appareil– Utilise le DisplayMode
de ASP.NET MVC– Le principe de
fonctionnement doit rester commun
Choix de fonctionnement
![Page 15: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/15.jpg)
ASP.NET MVC et jQuery Mobile#mstechdays
RÉALISER SON APPLICATIONWEB MOBILE AVEC ASP.NET
![Page 16: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/16.jpg)
démo
#mstechdaysASP.NET MVC et jQuery Mobile
CRÉER UN PROJET MOBILEAVEC VISUAL STUDIO 2013
![Page 17: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/17.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Packages NuGet• Le module de
bundling• WebEssentials• DisplayMode• ASP.NET Web API
Les outils de Visual Studio
![Page 18: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/18.jpg)
ASP.NET MVC et jQuery Mobile#mstechdays
JQUERY MOBILE
![Page 19: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/19.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• jQuery: Abstraction du navigateur
• jQuery Mobile: Widgets & abstraction de l’interface
• jQuery Mobile n’est PAS une librairie pour faire des Single Page Applications
Principe
![Page 20: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/20.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• 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 »
Fonctionnement
![Page 21: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/21.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• Pensé pour le mobile (cross devices)• Responsive web design• Amélioration progressive• Accessibilité
• -> Accélère beaucoup les développements
Avantages
![Page 22: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/22.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• À 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
Défauts
![Page 23: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/23.jpg)
démo
#mstechdaysASP.NET MVC et jQuery Mobile
WEB APP ASP.NET MVCUTILISANT JQUERY MOBILE
![Page 24: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/24.jpg)
#mstechdaysASP.NET MVC et jQuery Mobile
• 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, …)
Les bonnes pratiques
![Page 25: Le Web mobile avec ASP.Net MVC et jQuery Mobile](https://reader031.fdocument.pub/reader031/viewer/2022020105/5577f30dd8b42a24198b4be4/html5/thumbnails/25.jpg)
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Digital is business