Communauté .NET Montréal  www.dotnetmontreal.com          3 Octobre 2011
Frédéric HARPER                                      Laurent DUVEAU                                                       ...
SILVERLIGHT EN 10SDévelopper pour le web en langage managed (.NET) sur Windows/Mac OS Tous les principaux navigateurs du...
• SilverDiagram• House Builder 3D• Tou.TV
HTML 5 EN 10S Disponible dans le core des principaux navigateurs Accessible sur tout appareil munis d’un navigateurs réc...
• Angry Birds• Never Mind The Bullets• Double Rainbow
ONCE UPON A TIME…                    Hello!                      Silverlight is a cross-browser,                      cros...
AGENDA Évolution de HTML et Silverlight Outils et langages Contrôles DataBinding Graphique, média, 3D et texte Intég...
ÉVOLUTION DE SILVERLIGHTSilverlight    Silverlight    Silverlight   Silverlight    Silverlight    1.0             2       ...
ÉVOLUTION DE HTMLHTML 2.0: 1995HTML 3.2: 1997HTML 4.0: 1997HTML 5: Version finale estimée pour 2014 Spécifications en pro...
HTML 5, C’EST QUOI?
HTML 5, C’EST QUOI?Performance   Sémantiques        Styles      Multimédia Effets 3D     Hors ligne &   Connectivité   Acc...
STATUT DE HTML 5
STATUT DE HTML 5                                                                    Candidat à laPremier brouillon public ...
NOUVELLES FONCTIONNALITÉS HTML5 Video/audio Canvas/SVG Mode hors ligne CSS3 Media Queries WOFF Éléments sémantiques...
SUPPORT DE HTML5 ?http://caniuse.com/http://doesmybrowsersupportwebgl.comhttp://www.modernizr.com/
OUTILS ET LANGAGES     S I LV E R L I G H T 5        HTML 5   VS 2010 SP1               VS 2010 + Web upd.   Blend 5   ...
SILVERLIGHT      S I LV E R L I G H T 5               HTML5   Silverlight 5               HTML5                         ...
SILVERLIGHT TEMPLATED CONTROLSUI du contrôle (XAML) séparé de son comportement (C# ou VB)Excellent support dans Blend (Con...
http://silverlight.codeplex.com/
• Exemple Modernizr• Exemple super site Web
SILVERLIGHT: BINDING ET XAML     Modèle simple et puissant     Binding bi-directionnel (TwoWay) avec support des notific...
•   Style Binding•   Ancestor Binding•   DataBinding Debugging•   Implicit Data Template
HTML Pas de “data binding” directement dans HTML Utilisation du JavaScript jQuery, Backbones.js ou Knockout.js (utilise...
• http://knockoutjs.com/exampl  es/twitter.html
SILVERLIGHTVectoriel •Transformations et animationsDeep ZoomPixel ShaderAudio •WMA, MP3, AACVidéo •H.264, WMV, VC-1 (accél...
• 3D• Bouncing Plane (Animation,  Perspective 3D, Video HD, Pixel  Shader)
HTMLGraphique•Canvas•SVGMédias•Video (MPEG-4/H.264, WebM VP8, OGG Theora)•Audio (MP3, WAV PCM, OGG/Theora, ACC)3D•WebGLTex...
• Destruction vidéo• La fille SVG• Google Body *
SILVERLIGHT      Silverlight 3             Silverlight 4               Silverlight 5• Isolated Storage       • Webcam et M...
• System Font dialog (P/Invoke)• USB drive• Fenêtres natives
HTML   Hors-ligne        HTML5 App Cache   stockage          Local Storage                     Indexed DB              ...
• Foursquare Playground• Local storage boring demo• File API image *
SILVERLIGHT 5 VS HTML 5                            Silverlight 5           HTML 5Data Binding    Puissant!                ...
SILVERLIGHT 5 VS HTML 5Beaucoup de fonctionalités arrivent à parité (ou très bientôt)=> Comparons les performances!Benchma...
• Row perf• Vector Graphics• Bitmap Graphics
RECOMMANDATIONS
LES BONNES ADRESSESSilverlighthttp://tinyurl.com/3mojwy2http://riastats.comHTML5http://beautyoftheweb.comhttp://html5labs....
POUR EN SAVOIR PLUS ET APPROFONDIRTechDays 2011 A Lap around Microsoft Silverlight 5 Application Development with HTML5...
QUESTIONS ?QUI N’AURAIENT BIEN SÛR PAS DE RAPPORT AVEC LEF U T U R D E S I LV E R L I G H T ; )
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
HTML5 & SilverLight 5
Upcoming SlideShare
Loading in …5
×

HTML5 & SilverLight 5

1,801 views

Published on

Une présentation que j'ai fait avec Laurent Duveau au groupe d'utilisateurs .NET de Montréal

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,801
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 & SilverLight 5

  1. 1. Communauté .NET Montréal www.dotnetmontreal.com 3 Octobre 2011
  2. 2. Frédéric HARPER Laurent DUVEAU RunAtServerfredh@microsoft.com laurent@runatserver.comhttp://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/@fharper @LaurentDuveau
  3. 3. SILVERLIGHT EN 10SDévelopper pour le web en langage managed (.NET) sur Windows/Mac OS Tous les principaux navigateurs du marché Windows PhoneNécessite un pluginTaux de déploiement : 77%Première version : 2007
  4. 4. • SilverDiagram• House Builder 3D• Tou.TV
  5. 5. HTML 5 EN 10S Disponible dans le core des principaux navigateurs Accessible sur tout appareil munis d’un navigateurs récent  ordinateurs  tablettes  téléphones intelligents En « développement » depuis 2009 En brouillon, mais déjà fort utilisé
  6. 6. • Angry Birds• Never Mind The Bullets• Double Rainbow
  7. 7. ONCE UPON A TIME… Hello! Silverlight is a cross-browser, cross-platform web client runtime for building rich interactive applications on the web Life is good…
  8. 8. AGENDA Évolution de HTML et Silverlight Outils et langages Contrôles DataBinding Graphique, média, 3D et texte Intégration avec le système Performances
  9. 9. ÉVOLUTION DE SILVERLIGHTSilverlight Silverlight Silverlight Silverlight Silverlight 1.0 2 3 4 5 XAML + XAML + CLR XAML + CLR XAML + CLR XAML + CLR JScript Released in Released in Released in Released in In RC 2007 2008 2009 2010 VS 2005 VS 2008 VS VS2010 VS2010 Support Required 2008/2010 Required Required
  10. 10. ÉVOLUTION DE HTMLHTML 2.0: 1995HTML 3.2: 1997HTML 4.0: 1997HTML 5: Version finale estimée pour 2014 Spécifications en progression Déjà un support partiel des principaux navigateurs
  11. 11. HTML 5, C’EST QUOI?
  12. 12. HTML 5, C’EST QUOI?Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
  13. 13. STATUT DE HTML 5
  14. 14. STATUT DE HTML 5 Candidat à laPremier brouillon public Brouillon de travail Dernier appel Recommendation recommendation
  15. 15. NOUVELLES FONCTIONNALITÉS HTML5 Video/audio Canvas/SVG Mode hors ligne CSS3 Media Queries WOFF Éléments sémantiques Web Sockets Web Workers…
  16. 16. SUPPORT DE HTML5 ?http://caniuse.com/http://doesmybrowsersupportwebgl.comhttp://www.modernizr.com/
  17. 17. OUTILS ET LANGAGES S I LV E R L I G H T 5 HTML 5 VS 2010 SP1 VS 2010 + Web upd. Blend 5 VS 2011 & Blend 5 Sketchflow WebMatrix Notepad… XAML C# ou VB HTML CSS JavaScript
  18. 18. SILVERLIGHT S I LV E R L I G H T 5 HTML5  Silverlight 5  HTML5  HTML4  ~38 contrôles  16 éléments  Silverlight Toolkit  9 tag de structure  13 nouveau type d’input  ~40 contrôles  …  Open source  Third Party  PhoneGap, KendoUI…  Codeplex, …  JavaScript  Third party  jQuery, Modernizr, Knockoutjs, ..  Telerik, DevExpress, …  CSS  Less Framework, 52framework…
  19. 19. SILVERLIGHT TEMPLATED CONTROLSUI du contrôle (XAML) séparé de son comportement (C# ou VB)Excellent support dans Blend (Control Template, Visual State Manager, …)
  20. 20. http://silverlight.codeplex.com/
  21. 21. • Exemple Modernizr• Exemple super site Web
  22. 22. SILVERLIGHT: BINDING ET XAML  Modèle simple et puissant  Binding bi-directionnel (TwoWay) avec support des notifications (INotifyPropertyChanged)  Formattage, converters, …  DataTemplate  Command  Silverlight 5  Binding au niveau de la propriété Setter des styles  DataTemplate implicites  DataBinding debugging!  Ancestor Binding via RelativeSource  Nouvel événement : DataContextChanged  Support du mode PropertyChanged pour la mise à jour de la source:<TextBlock Text="{Binding ElementName=lst, Path=SelectedItem.Text,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
  23. 23. • Style Binding• Ancestor Binding• DataBinding Debugging• Implicit Data Template
  24. 24. HTML Pas de “data binding” directement dans HTML Utilisation du JavaScript jQuery, Backbones.js ou Knockout.js (utiliser nuget pour VS)
  25. 25. • http://knockoutjs.com/exampl es/twitter.html
  26. 26. SILVERLIGHTVectoriel •Transformations et animationsDeep ZoomPixel ShaderAudio •WMA, MP3, AACVidéo •H.264, WMV, VC-1 (accélération matérielle) •Trick-play •Smooth Streaming •DRM (on/offline) •Support de la télécommande3D APITexte •OpenType, Text Clarity, Pixel Snapping, Text Overflow
  27. 27. • 3D• Bouncing Plane (Animation, Perspective 3D, Video HD, Pixel Shader)
  28. 28. HTMLGraphique•Canvas•SVGMédias•Video (MPEG-4/H.264, WebM VP8, OGG Theora)•Audio (MP3, WAV PCM, OGG/Theora, ACC)3D•WebGLTexte•Web Open Font Format (aka WOFF)
  29. 29. • Destruction vidéo• La fille SVG• Google Body *
  30. 30. SILVERLIGHT Silverlight 3 Silverlight 4 Silverlight 5• Isolated Storage • Webcam et Microphone • intéropérabilité via• OpenFileDialog et • Out Of Browser Elevated P/Invoke SaveFileDialog Trust (OOBE): interop • Fenêtres natives• Out Of Browser (OOB) COM (Office, …), • Accès complet au• Détection de Notifications système de fichiers en connection • OOBE: Accès au mode Elevated Trust• Full screen système de fichiers: • Possibilité d’être répertoires My* Elevated Trust dans le • Clipboard navigateur! • Print API • Remote Control Support • Drag and drop • Pinned full screen
  31. 31. • System Font dialog (P/Invoke)• USB drive• Fenêtres natives
  32. 32. HTML Hors-ligne  HTML5 App Cache stockage  Local Storage  Indexed DB  Spécifications File APIAccès appareils  API de géolocation  Accès au microphone (en cours)  Accès à la caméra (en cours)  …
  33. 33. • Foursquare Playground• Local storage boring demo• File API image *
  34. 34. SILVERLIGHT 5 VS HTML 5 Silverlight 5 HTML 5Data Binding Puissant! JavaScript & 3rd party frameworkLocal Storage Isolated Storage Web StorageVideo H264, Smooth Streaming, MPEG-4/H.264, DRM WebM/VP8, OGG/TheoraNetworking Sockets TCP WebSocketsWeb requests WebClient, HttpWebRequest XMLHtpRequestWeb Services WCF, ASMX, RSS Need AJAX Framework3D 3D API WebGL
  35. 35. SILVERLIGHT 5 VS HTML 5Beaucoup de fonctionalités arrivent à parité (ou très bientôt)=> Comparons les performances!Benchmark: Row performance Vector manipulation Bitmap manipulation
  36. 36. • Row perf• Vector Graphics• Bitmap Graphics
  37. 37. RECOMMANDATIONS
  38. 38. LES BONNES ADRESSESSilverlighthttp://tinyurl.com/3mojwy2http://riastats.comHTML5http://beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/http://diveintohtml5.org/
  39. 39. POUR EN SAVOIR PLUS ET APPROFONDIRTechDays 2011 A Lap around Microsoft Silverlight 5 Application Development with HTML5 HTML5 and CSS3 Techniques You Can Use TodayEt plus…http://techdays.ca
  40. 40. QUESTIONS ?QUI N’AURAIENT BIEN SÛR PAS DE RAPPORT AVEC LEF U T U R D E S I LV E R L I G H T ; )

×