Techdays 2012 - Développement Web Mobile avec Microsoft
40
palais des congrès Paris 7, 8 et 9 février 2012
description
Transcript of Techdays 2012 - Développement Web Mobile avec Microsoft
palais des congrès Paris
7, 8 et 9 février 2012
Aurélien VerlaDirecteur TechniqueWygwam
Développement Web pour Mobiles (RIA217)
Giovanni ClémentExpert .NET
Wygwam
Vous êtes dans l’AMPHI BLEU
Slides Wygwam
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
S’adapter aux différents type de « devices »
Atteindre une productivité maximale en s’adaptant à chaque « device »
Tendre vers un « Layout » unique
Enjeux techniques
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
DEMO
« Old School »
Compatible WebForms, MVC 2, MCV 3
Request.Browser.IsMobileDevice
51Degrees.mobihttp://51degrees.codeplex.com
WURFL Devices Databasehttp://wurfl.sourceforge.net/
« Old School »
Image WP7 + iPhone (taille connue)Images reste du monde (bordel)Texte niveau 1
Texte niveau 2Texte niveau 3
Texte niveau 4Texte niveau 5
ADAPTER
DEMO
CSS 3.0 Media Queries
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
Image WP7 + iPhone (taille connue)Images reste du monde (bordel)Texte niveau 1
Texte niveau 2Texte niveau 3
Texte niveau 4Texte niveau 5
PRODUCTIVITE
DEMO
ASP.NET MVC 4.0 Preview
Créer facilement des vues dites « mobile »*.mobile.cshtml
Gestion du DisplayMode pour du spécifique*.ipad.cshtml
Nouveaux Templates Visual Studio
PRODUCTIVITE
Bla bla uniformisation*.mobile.cshtml
Gestion du DisplayMode pour du spécifique*.ipad.cshtml
LAYOUT
Intégration de JQuery Mobile Template de site MobileNuget package : jQuery.Mobile.MVC
User interface Framework
Progressive Enchancement ?
http://jquerymobile.com
LAYOUT
DEMO
jQuery Mobile
Support de jQuery Mobile par Microsoft
Template Visual Studio « Mobile Compliant »
Theming Framework
http://jquerymobile.com
LAYOUT
Support des derniers navigateurs « NextGen »
LAYOUT
System.Web.Optimization .NET 4.5
Javascript Combining BundleTable.Bundles.EnableDefaultBundles(); Dynamic custom bundle => Site Mobile
Minification JSMinify CSSMinify
PERFORMANCES
DEMO
UN PEU DE FUN
Vous êtes dans l’AMPHI BLEU
Texte niveau 1Texte niveau 2
Texte niveau 3Texte niveau 4
Texte niveau 5
VIDEO
ANNONCE
DEMO
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 :
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.
Type and transparencyUniform design elements create well-structured, balanced designs.
33
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
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
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...
Icônes 4/5
Facebook PC Tweet Message Mail Photos Messenger
Video Like Devices Outlook TV Txt Devices
RSS Feeds Voicemail
“ ”
Icônes 5/5
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
