SlideShare une entreprise Scribd logo
Communauté .NET Montréal
  www.dotnetmontreal.com
          3 Octobre 2011
Frédéric HARPER                                      Laurent DUVEAU
                                                         RunAtServer
fredh@microsoft.com                          laurent@runatserver.com
http://blogs.msdn.com/b/cdndevsfr/   http://weblogs.asp.net/lduveau/
@fharper                                             @LaurentDuveau
SILVERLIGHT EN 10S
Développer pour le web en langage managed (.NET) sur
 Windows/Mac OS
 Tous les principaux navigateurs du marché
 Windows Phone
Nécessite un plugin
Taux de déploiement : 77%
Première version : 2007
• 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écent
    ordinateurs
    tablettes
    téléphones intelligents
 En « développement » depuis 2009
 En brouillon, mais déjà fort utilisé
• Angry Birds
• Never Mind The Bullets
• Double Rainbow
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…
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
ÉVOLUTION DE SILVERLIGHT

Silverlight    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
ÉVOLUTION DE HTML

HTML 2.0: 1995
HTML 3.2: 1997
HTML 4.0: 1997
HTML 5: Version finale estimée pour 2014
 Spécifications en progression
 Déjà un support partiel des principaux navigateurs
HTML 5, C’EST QUOI?
HTML 5, C’EST QUOI?

Performance   Sémantiques        Styles      Multimédia




 Effets 3D     Hors ligne &   Connectivité   Accès appareils
                stockage
STATUT DE HTML 5
STATUT DE HTML 5




                                                                    Candidat à la
Premier brouillon public   Brouillon de travail   Dernier appel                     Recommendation
                                                                  recommendation
NOUVELLES FONCTIONNALITÉS HTML5
 Video/audio
 Canvas/SVG
 Mode hors ligne
 CSS3 Media Queries
 WOFF
 Éléments sémantiques
 Web Sockets
 Web Workers
…
SUPPORT DE HTML5 ?
http://caniuse.com/
http://doesmybrowsersupportwebgl.com
http://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                   VS 2011 & Blend 5
    Sketchflow               WebMatrix
                              Notepad…
   XAML
   C# ou VB                  HTML         CSS
                              JavaScript
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…
SILVERLIGHT TEMPLATED CONTROLS
UI du contrôle (XAML) séparé de son comportement (C# ou VB)
Excellent support dans Blend (Control Template, Visual State Manager, …)
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 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}"/>
•   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 (utiliser nuget pour VS)
• http://knockoutjs.com/exampl
  es/twitter.html
SILVERLIGHT
Vectoriel
 •Transformations et animations

Deep Zoom

Pixel Shader

Audio
 •WMA, MP3, AAC

Vidéo
 •H.264, WMV, VC-1 (accélération matérielle)
 •Trick-play
 •Smooth Streaming
 •DRM (on/offline)
 •Support de la télécommande
3D API

Texte
 •OpenType, Text Clarity, Pixel Snapping, Text Overflow
• 3D
• Bouncing Plane (Animation,
  Perspective 3D, Video HD, Pixel
  Shader)
HTML

Graphique
•Canvas
•SVG
Médias
•Video (MPEG-4/H.264, WebM VP8, OGG Theora)
•Audio (MP3, WAV PCM, OGG/Theora, ACC)
3D
•WebGL

Texte
•Web Open Font Format (aka WOFF)
• Destruction vidéo
• La fille SVG
• Google Body *
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
• System Font dialog (P/Invoke)
• USB drive
• Fenêtres natives
HTML
   Hors-ligne        HTML5 App Cache
   stockage          Local Storage
                     Indexed DB
                     Spécifications File API




Accès appareils      API de géolocation
                     Accès au microphone (en cours)
                     Accès à la caméra (en cours)
                     …
• Foursquare Playground
• Local storage boring demo
• File API image *
SILVERLIGHT 5 VS HTML 5
                            Silverlight 5           HTML 5
Data Binding    Puissant!                   JavaScript & 3rd party
                                            framework
Local Storage   Isolated Storage            Web Storage
Video           H264, Smooth Streaming,     MPEG-4/H.264,
                DRM                         WebM/VP8,
                                            OGG/Theora
Networking      Sockets TCP                 WebSockets
Web requests    WebClient, HttpWebRequest   XMLHtpRequest
Web Services    WCF, ASMX, RSS              Need AJAX Framework
3D              3D API                      WebGL
SILVERLIGHT 5 VS HTML 5
Beaucoup de fonctionalités arrivent à parité (ou très bientôt)
=> Comparons les performances!
Benchmark:
 Row performance
 Vector manipulation
 Bitmap manipulation
• Row perf
• Vector Graphics
• Bitmap Graphics
RECOMMANDATIONS
LES BONNES ADRESSES
Silverlight
http://tinyurl.com/3mojwy2
http://riastats.com
HTML5
http://beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/
http://diveintohtml5.org/
POUR EN SAVOIR PLUS ET APPROFONDIR

TechDays 2011
 A Lap around Microsoft Silverlight 5
 Application Development with HTML5
 HTML5 and CSS3 Techniques You Can Use Today
Et plus…



http://techdays.ca
QUESTIONS ?
QUI N’AURAIENT BIEN SÛR PAS DE RAPPORT AVEC LE
F U T U R D E S I LV E R L I G H T ; )

Contenu connexe

Tendances

Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Microsoft
 
Outillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLOutillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLMicrosoft
 
ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6Microsoft
 
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexPrésentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexCynapsys It Hotspot
 
Principes De Base De Asp .Net
Principes De Base De Asp .NetPrincipes De Base De Asp .Net
Principes De Base De Asp .NetGregory Renard
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Microsoft
 
Active Server Pages (ASP)
Active Server Pages (ASP)Active Server Pages (ASP)
Active Server Pages (ASP)Saïd Radhouani
 
Comment choisir son cms
Comment choisir son cmsComment choisir son cms
Comment choisir son cmsStrasWeb
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Microsoft
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web componentsFrancois ANDRE
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Nazih Heni
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office Planner
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office PlannerNicolas Georgeault: Nouveaux Scenarios Hybrides et Office Planner
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office PlannerMSDEVMTL
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to HeroCellenza
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 eechdalel
 

Tendances (20)

Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5Quoi de neuf dans ASP.NET 4.5
Quoi de neuf dans ASP.NET 4.5
 
Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0Initiation à ASP.NET 4.0
Initiation à ASP.NET 4.0
 
Outillage pour Windows 8 XAML
Outillage pour Windows 8 XAMLOutillage pour Windows 8 XAML
Outillage pour Windows 8 XAML
 
ASP.NET MVC 6
ASP.NET MVC 6ASP.NET MVC 6
ASP.NET MVC 6
 
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexPrésentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
 
Comparatif CMS
Comparatif CMSComparatif CMS
Comparatif CMS
 
Principes De Base De Asp .Net
Principes De Base De Asp .NetPrincipes De Base De Asp .Net
Principes De Base De Asp .Net
 
Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?Fichier, Nouveau projet… Et après ?
Fichier, Nouveau projet… Et après ?
 
Active Server Pages (ASP)
Active Server Pages (ASP)Active Server Pages (ASP)
Active Server Pages (ASP)
 
Comment choisir son cms
Comment choisir son cmsComment choisir son cms
Comment choisir son cms
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
Introduction aux web components
Introduction aux web componentsIntroduction aux web components
Introduction aux web components
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office Planner
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office PlannerNicolas Georgeault: Nouveaux Scenarios Hybrides et Office Planner
Nicolas Georgeault: Nouveaux Scenarios Hybrides et Office Planner
 
ASP.NET from Zero to Hero
ASP.NET from Zero to HeroASP.NET from Zero to Hero
ASP.NET from Zero to Hero
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 ee
 

Similaire à HTML5 & SilverLight 5

L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopFrédéric Harper
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightChristophe Lauer
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Frédéric Queudret
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesGaëtan LAVENU
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Microsoft
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsFlorent Dupont
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesTristan Nitot
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4Wygwam
 

Similaire à HTML5 & SilverLight 5 (20)

L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
CLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et SilverlightCLaueR - AFUP PHP et Silverlight
CLaueR - AFUP PHP et Silverlight
 
Silverlight 4
Silverlight 4Silverlight 4
Silverlight 4
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!Compatibilité Internet Explorer : pour le meilleur et pour le pire!
Compatibilité Internet Explorer : pour le meilleur et pour le pire!
 
Flex4.5 air3.0
Flex4.5 air3.0Flex4.5 air3.0
Flex4.5 air3.0
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome apps
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
 
Silverlight
SilverlightSilverlight
Silverlight
 

Plus de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Frédéric Harper
 

Plus de Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

HTML5 & SilverLight 5

  • 1. Communauté .NET Montréal www.dotnetmontreal.com 3 Octobre 2011
  • 2. Frédéric HARPER Laurent DUVEAU RunAtServer fredh@microsoft.com laurent@runatserver.com http://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/ @fharper @LaurentDuveau
  • 3.
  • 4. SILVERLIGHT EN 10S Développer pour le web en langage managed (.NET) sur  Windows/Mac OS  Tous les principaux navigateurs du marché  Windows Phone Nécessite un plugin Taux de déploiement : 77% Première version : 2007
  • 5. • SilverDiagram • House Builder 3D • Tou.TV
  • 6. 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é
  • 7. • Angry Birds • Never Mind The Bullets • Double Rainbow
  • 8. 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…
  • 9. 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
  • 10.
  • 11. ÉVOLUTION DE SILVERLIGHT Silverlight 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
  • 12. ÉVOLUTION DE HTML HTML 2.0: 1995 HTML 3.2: 1997 HTML 4.0: 1997 HTML 5: Version finale estimée pour 2014  Spécifications en progression  Déjà un support partiel des principaux navigateurs
  • 14. HTML 5, C’EST QUOI? Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
  • 16. STATUT DE HTML 5 Candidat à la Premier brouillon public Brouillon de travail Dernier appel Recommendation recommendation
  • 17. NOUVELLES FONCTIONNALITÉS HTML5  Video/audio  Canvas/SVG  Mode hors ligne  CSS3 Media Queries  WOFF  Éléments sémantiques  Web Sockets  Web Workers …
  • 18. SUPPORT DE HTML5 ? http://caniuse.com/ http://doesmybrowsersupportwebgl.com http://www.modernizr.com/
  • 19.
  • 20.
  • 21. 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
  • 22.
  • 23. 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…
  • 24. SILVERLIGHT TEMPLATED CONTROLS UI du contrôle (XAML) séparé de son comportement (C# ou VB) Excellent support dans Blend (Control Template, Visual State Manager, …)
  • 26. • Exemple Modernizr • Exemple super site Web
  • 27.
  • 28. 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}"/>
  • 29. Style Binding • Ancestor Binding • DataBinding Debugging • Implicit Data Template
  • 30. HTML  Pas de “data binding” directement dans HTML  Utilisation du JavaScript  jQuery, Backbones.js ou Knockout.js (utiliser nuget pour VS)
  • 32.
  • 33. SILVERLIGHT Vectoriel •Transformations et animations Deep Zoom Pixel Shader Audio •WMA, MP3, AAC Vidéo •H.264, WMV, VC-1 (accélération matérielle) •Trick-play •Smooth Streaming •DRM (on/offline) •Support de la télécommande 3D API Texte •OpenType, Text Clarity, Pixel Snapping, Text Overflow
  • 34. • 3D • Bouncing Plane (Animation, Perspective 3D, Video HD, Pixel Shader)
  • 35. HTML Graphique •Canvas •SVG Médias •Video (MPEG-4/H.264, WebM VP8, OGG Theora) •Audio (MP3, WAV PCM, OGG/Theora, ACC) 3D •WebGL Texte •Web Open Font Format (aka WOFF)
  • 36. • Destruction vidéo • La fille SVG • Google Body *
  • 37.
  • 38. 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
  • 39. • System Font dialog (P/Invoke) • USB drive • Fenêtres natives
  • 40. HTML Hors-ligne  HTML5 App Cache stockage  Local Storage  Indexed DB  Spécifications File API Accès appareils  API de géolocation  Accès au microphone (en cours)  Accès à la caméra (en cours)  …
  • 41. • Foursquare Playground • Local storage boring demo • File API image *
  • 42. SILVERLIGHT 5 VS HTML 5 Silverlight 5 HTML 5 Data Binding Puissant! JavaScript & 3rd party framework Local Storage Isolated Storage Web Storage Video H264, Smooth Streaming, MPEG-4/H.264, DRM WebM/VP8, OGG/Theora Networking Sockets TCP WebSockets Web requests WebClient, HttpWebRequest XMLHtpRequest Web Services WCF, ASMX, RSS Need AJAX Framework 3D 3D API WebGL
  • 43. SILVERLIGHT 5 VS HTML 5 Beaucoup de fonctionalités arrivent à parité (ou très bientôt) => Comparons les performances! Benchmark:  Row performance  Vector manipulation  Bitmap manipulation
  • 44. • Row perf • Vector Graphics • Bitmap Graphics
  • 47. POUR EN SAVOIR PLUS ET APPROFONDIR TechDays 2011  A Lap around Microsoft Silverlight 5  Application Development with HTML5  HTML5 and CSS3 Techniques You Can Use Today Et plus… http://techdays.ca
  • 48. QUESTIONS ? QUI N’AURAIENT BIEN SÛR PAS DE RAPPORT AVEC LE F U T U R D E S I LV E R L I G H T ; )