techdays 2012 - développement web mobile avec microsoft
DESCRIPTION
TRANSCRIPT
![Page 1: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/1.jpg)
palais des congrès Paris
7, 8 et 9 février 2012
![Page 2: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/2.jpg)
Aurélien VerlaDirecteur TechniqueWygwam
Développement Web pour Mobiles (RIA217)
Giovanni ClémentExpert .NET
Wygwam
![Page 3: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/3.jpg)
Vous êtes dans l’AMPHI BLEU
![Page 4: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/4.jpg)
Slides Wygwam
![Page 5: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/5.jpg)
International Telecommunication Union 20115,981,000,000 téléphones mobiles1,186,000,000 d’abonnements « datas »
Source: http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html
Quelques chiffres
![Page 6: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/6.jpg)
S’adapter aux différents type de « devices »
Atteindre une productivité maximale en s’adaptant à chaque « device »
Tendre vers un « Layout » unique
Enjeux techniques
![Page 7: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/7.jpg)
Exposer les problématiquesPas de souris, clavier etc (conf W3C)Taille de l’écran CSS3
Capacité à moduler en fonction du device MVC4Home.mobile.cshtmlHome.iphone.cshtml
Uniformisation du Layout jQueryMobile
Slides a plus tard
![Page 8: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/8.jpg)
DEMO
« Old School »
![Page 9: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/9.jpg)
Compatible WebForms, MVC 2, MCV 3
Request.Browser.IsMobileDevice
51Degrees.mobihttp://51degrees.codeplex.com
WURFL Devices Databasehttp://wurfl.sourceforge.net/
« Old School »
![Page 10: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/10.jpg)
Image WP7 + iPhone (taille connue)Images reste du monde (bordel)Texte niveau 1
Texte niveau 2Texte niveau 3
Texte niveau 4Texte niveau 5
ADAPTER
![Page 11: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/11.jpg)
DEMO
CSS 3.0 Media Queries
![Page 12: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/12.jpg)
CSS 3.0 Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
Capacité de faire des règles de styles conditionnelles
Permet d’adapter la mise en page en fonction de la taille d’affichage et/ou de son orientation
ADAPTER
![Page 13: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/13.jpg)
Image WP7 + iPhone (taille connue)Images reste du monde (bordel)Texte niveau 1
Texte niveau 2Texte niveau 3
Texte niveau 4Texte niveau 5
PRODUCTIVITE
![Page 14: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/14.jpg)
DEMO
ASP.NET MVC 4.0 Preview
![Page 15: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/15.jpg)
Créer facilement des vues dites « mobile »*.mobile.cshtml
Gestion du DisplayMode pour du spécifique*.ipad.cshtml
Nouveaux Templates Visual Studio
PRODUCTIVITE
![Page 16: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/16.jpg)
Bla bla uniformisation*.mobile.cshtml
Gestion du DisplayMode pour du spécifique*.ipad.cshtml
LAYOUT
![Page 17: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/17.jpg)
Intégration de JQuery Mobile Template de site MobileNuget package : jQuery.Mobile.MVC
User interface Framework
Progressive Enchancement ?
http://jquerymobile.com
LAYOUT
![Page 18: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/18.jpg)
DEMO
jQuery Mobile
![Page 19: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/19.jpg)
Support de jQuery Mobile par Microsoft
Template Visual Studio « Mobile Compliant »
Theming Framework
http://jquerymobile.com
LAYOUT
![Page 20: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/20.jpg)
Support des derniers navigateurs « NextGen »
LAYOUT
![Page 21: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/21.jpg)
System.Web.Optimization .NET 4.5
Javascript Combining BundleTable.Bundles.EnableDefaultBundles(); Dynamic custom bundle => Site Mobile
Minification JSMinify CSSMinify
PERFORMANCES
![Page 22: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/22.jpg)
DEMO
UN PEU DE FUN
![Page 23: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/23.jpg)
Vous êtes dans l’AMPHI BLEU
![Page 24: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/24.jpg)
Texte niveau 1Texte niveau 2
Texte niveau 3Texte niveau 4
Texte niveau 5
![Page 25: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/25.jpg)
![Page 26: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/26.jpg)
![Page 27: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/27.jpg)
![Page 28: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/28.jpg)
VIDEO
![Page 29: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/29.jpg)
ANNONCE
![Page 30: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/30.jpg)
DEMO
![Page 31: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/31.jpg)
Couleurs
#1fa9f0 RVB 31 169 240 #f16c00 RVB 241 108 0 #39c40e RVB 57 196 14
#ffd200 RVB 255 210 0 #ff0000 RVB 255 0 0 #ffffff RVB 255 255 255
#1d89dd RVB 29 137 221 #b85200 RVB 184 82 0 #4d840f RVB 77 132 15
#680091 RVB 104 0 145 #cd0000 RVB 205 0 0 #001f45 RVB 0 31 69
Pour fond blanc et bleu :
#4a0067 RVB 74 0 103
#e4008c RVB 228 0 140
#a0007b RVB 160 0 123
#d3ae00 RVB 211 174 0
Lien : http://www.microsoft.com (#e4008c RVB 208 0 140)Puces :
![Page 32: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/32.jpg)
Layout
GridsGrid systems help to create meaningful, consistent organization of information and elements to tell rich stories.
More than grids, structured information.
Reductive designFewer, carefully used elements help to reflect the innovative, modern look of our brand. Using our colors, type, logos, grid, the right image(s), and simple clean approach you can build almost anything. Product derived images – icons, screen shots, help to communicate the way in which Microsoft software can help improve peoples lives.
![Page 33: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/33.jpg)
Type and transparencyUniform design elements create well-structured, balanced designs.
33
![Page 34: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/34.jpg)
Icônes 1/5
Agenda/Plan Hire Checklist Transition Roles Building Organization Moving Up
Problem Solving Precise Search Solutions Observe Love Connect The Dots Boxed In
Timing Build A Plan Don’ts Align Capabilities\Tools Announce Negotiate
Outside The Box Passing Along Direction Management At The Door Difficult Road Decisions
Strengths Chemistry Give and Take Broadcast Support Cloud At Home Entertainment
![Page 35: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/35.jpg)
Icônes 2/5
WiFi Storage Hubs Computing Database Data Transfer Data Download
IT Infrastructure IT Infrastructure IT Infrastructure Caution Organize Synergy Debug
Positioning The Target Strategy Growth Footprint Marketplace Security/Privacy
Virtualization Innovation Data Security Telepresence Social Search Basic Devices Share
Balance ID Payment Email Global Places Phone
![Page 36: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/36.jpg)
Icônes 3/5
Cloud Devices NUI Time Animation Games Gaming Strategy
Timing Brain Innovation Strategy Cafe Vacation Merge/Vise
Tools Fix In Process Remake Drive/Nail Plumbing/Root Build/Wall
Home Travel TV Office Xbox Plug In Caution
Cut Leak Calendar Cloud Comp Passion Role/Position
I have a quotefor you, I think...
![Page 37: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/37.jpg)
Icônes 4/5
Facebook PC Tweet Message Mail Photos Messenger
Video Like Devices Outlook TV Txt Devices
RSS Feeds Voicemail
“ ”
![Page 38: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/38.jpg)
Icônes 5/5
![Page 39: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/39.jpg)
![Page 40: Techdays 2012 - Développement Web Mobile avec Microsoft](https://reader036.vdocuments.mx/reader036/viewer/2022081413/547e357db4af9fc7388b479f/html5/thumbnails/40.jpg)
Graphiques
Category 1 Category 2 Category 3 Category 4
4,2
2.53.5
4.5
2.4
4.4
1.82.8
2 23
5
Titre du graphiqueSeries 1 Series 2 Series 3