HTML5 & SilverLight 5

Communauté .NET Montréal www.dotnetmontreal.com 3 Octobre 2011

Frédéric HARPER Laurent DUVEAU RunAtServerfredh@microsoft.com laurent@runatserver.comhttp://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/@fharper @LaurentDuveau

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

• 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 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

É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

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 à laPremier 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.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 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 CONTROLSUI 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

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

• 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•WebGLTexte•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 APIAccè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 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

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

• Row perf• Vector Graphics• Bitmap Graphics

RECOMMANDATIONS

LES BONNES ADRESSESSilverlighthttp://tinyurl.com/3mojwy2http://riastats.comHTML5http://beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/http://diveintohtml5.org/

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

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

by Frédéric Harper on Oct 03, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML5 & SilverLight 5 Presentation Transcript