Télécharger en tant que PDF, PPTX
Téléchargé parFrédéric Harper
HTML5 & SilverLight 5
Le document présente une comparaison entre Silverlight et HTML5 pour le développement d'applications web. Il aborde l'évolution et les fonctionnalités de Silverlight et HTML5, ainsi que les outils et langages associés. Les performances et les capacités des deux technologies sont également discutées, avec des recommandations pour approfondir le sujet.
Contenu connexe
Similaire à HTML5 & SilverLight 5
HTML5 & SilverLight 5
- 1. Communauté .NET Montréal www.dotnetmontreal.com 3 Octobre 2011
- 2. Frédéric HARPER Laurent DUVEAU RunAtServer [email protected] [email protected] http://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/ @fharper @LaurentDuveau
- 4. SILVERLIGHT EN 10S Développerpour 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 • HouseBuilder 3D • Tou.TV
- 6. HTML 5 EN10S 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 ATIME… 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 deHTML et Silverlight Outils et langages Contrôles DataBinding Graphique, média, 3D et texte Intégration avec le système Performances
- 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 HTML2.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
- 13. HTML 5, C’ESTQUOI?
- 14. HTML 5, C’ESTQUOI? Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
- 15.
- 16. STATUT DE HTML5 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/
- 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
- 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 UIdu contrôle (XAML) séparé de son comportement (C# ou VB) Excellent support dans Blend (Control Template, Visual State Manager, …)
- 25.
- 26. • Exemple Modernizr •Exemple super site Web
- 28. SILVERLIGHT: BINDING ETXAML 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)
- 31.
- 33. SILVERLIGHT Vectoriel •Transformations etanimations 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 • BouncingPlane (Animation, Perspective 3D, Video HD, Pixel Shader)
- 35. HTML Graphique •Canvas •SVG Médias •Video (MPEG-4/H.264, WebMVP8, 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 *
- 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 Fontdialog (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 VSHTML 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 VSHTML 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
- 45.
- 46.
- 47. POUR EN SAVOIRPLUS 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’AURAIENTBIEN SÛR PAS DE RAPPORT AVEC LE F U T U R D E S I LV E R L I G H T ; )