0
An Introduction to Microsoft Silverlight<br />Glen Gordon<br />Developer Evangelist – Microsoft Corporation<br />http://ww...
Agenda<br />A brief history of time (I mean the Web)<br />What is this Silverlight thing?<br />Who’s using it?<br />How do...
History of UX on the Web<br />Early 90’s – Blue & purple Links on a gray background<br />
History of UX on the Web<br />Mid 90’s – DHTML introduced - <blink> tags and other annoying JavaScript tricks<br />
History of UX on the Web<br />Late 90’s/Early 00’s – Dynamic Server Driven Web Apps<br />
History of UX on the Web<br />2002 – Mozilla implements XmlHttpRequest (5 years AFTER Microsoft did in IE 5. )<br />2005 ...
JavaScript?  Really?!<br />Which version?<br />
Have you programmed in JavaScript lately?<br />You might recognize this:<br />   if (Netscape) {//tell the user they’re a ...
Have you programmed in JavaScript lately?<br />Wait… there’s more!<br />   else if (IE8) {//Decide to act like FF & Safari...
Introducing Silverlight <br />Cross-Platform, Cross Browser RIA<br />Mac, Windows, Linux*<br />Firefox, IE, Safari, Chrome...
Rich Media Experiences<br />Quality<br />Streaming video quality up to HD (1080p)<br />DVD-like interactivity and overlays...
Timeline<br />Silverlight 1<br />Beta December 2006<br />RTM September 5, 2007<br />Silverlight 2<br />Beta March 2008<br ...
Silverlight and the Web<br />
Silverlight Market Penetration<br />http://riastats.com/<br />
demos<br />Microsoft Silverlight<br />
Silverlight "Transparency"No black box here!<br />XAML is text-based & SEO friendly<br />XAP is a ZIP – Open up and “view ...
Developers<br />Designers<br />Create<br />Implement<br />Artistic<br />Functional<br />JPG<br />TIFF<br />PSD<br />GIF<br...
Introducing XAML<br />Defines the User Interface<br />Communication Between Designers and Developers<br />No Translation R...
What was Silverlight 2?<br />Capable<br />Media, Animation, Graphics, Text<br />HTML controls for data capture<br />Cross-...
What's New in Silverlight 3<br />Navigation Application Template<br />Themes<br />Richer Databinding<br />Perspective Tran...
Building your Silverlight UI<br />Controls<br />Events<br />Data Binding<br />Custom Control Model<br />Animations<br />St...
Tools<br />Presentation Title |  PP |   DD Month YYYY<br />
Silverlight Developer's Toolkit<br />
Silverlight Developer's Toolkit<br />
Expression Blend - SketchFlow<br />Mock up your site<br />Establish navigation and general layout<br />“Wiggly” styles hel...
Silverlight Developer's Toolkit<br />
11/19/2006<br /><ul><li>http://www.eclipse4sl.org/
Silverlight Integration with other Web Application Platforms
PHP
JSP/Servlets
Groovy
Upcoming SlideShare
Loading in...5
×

Introduction to Microsoft Silverlight

1,908

Published on

An overview of Microsoft Silverlight and related technologies.

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,908
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
103
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Microsoft Silverlight"

  1. 1. An Introduction to Microsoft Silverlight<br />Glen Gordon<br />Developer Evangelist – Microsoft Corporation<br />http://www.glengordon.name<br />glen.gordon@microsoft.com<br />http://twitter.com/glengordon <br />
  2. 2. Agenda<br />A brief history of time (I mean the Web)<br />What is this Silverlight thing?<br />Who’s using it?<br />How do you code it?<br />Designer/Developer interaction<br />Summary<br />Presentation Title | PP | DD Month YYYY<br />
  3. 3. History of UX on the Web<br />Early 90’s – Blue & purple Links on a gray background<br />
  4. 4. History of UX on the Web<br />Mid 90’s – DHTML introduced - <blink> tags and other annoying JavaScript tricks<br />
  5. 5.
  6. 6. History of UX on the Web<br />Late 90’s/Early 00’s – Dynamic Server Driven Web Apps<br />
  7. 7. History of UX on the Web<br />2002 – Mozilla implements XmlHttpRequest (5 years AFTER Microsoft did in IE 5. )<br />2005 – AJAX is the new ‘Hotness’!<br />Note:Ajax = DHTML revisited, just done cooler!<br />
  8. 8. JavaScript? Really?!<br />Which version?<br />
  9. 9. Have you programmed in JavaScript lately?<br />You might recognize this:<br /> if (Netscape) {//tell the user they’re a dinosaur! }<br /> else if (Firefox) {//do something interactive }<br /> else if (Safari) {//do something interactive slightly differently }<br /> else if (IE) {<br />if (IE7) { //do it almost like FF } <br />else if (IE6) { //do it in a crazy way you’ll spend all night on Google trying to figure out how to. }<br />else if (IE5) { //just give up! } }<br />
  10. 10. Have you programmed in JavaScript lately?<br />Wait… there’s more!<br /> else if (IE8) {//Decide to act like FF & Safari or IE7 }<br /> else if (Chrome) {//What?! Another browser to support! }<br /> else if (Mobile Device) {//#$^&%^*&*$%%&*!!!!! }<br />
  11. 11. Introducing Silverlight <br />Cross-Platform, Cross Browser RIA<br />Mac, Windows, Linux*<br />Firefox, IE, Safari, Chrome<br />Code + Markup<br />XAML + (CLR | DLR)<br />Managed Silverlight: .NET<br />Cross-platform Version of .NET Framework<br />No external dependencies<br />Fully Supports VB and C# in the Browser<br />
  12. 12. Rich Media Experiences<br />Quality<br />Streaming video quality up to HD (1080p)<br />DVD-like interactivity and overlays<br />Markers and Events<br />IIS 7 Smooth Streaming<br />Flexible Development<br />Integrate existing AJAX frameworks<br />SMPTE standard VC-1, WMV and MP3<br />H.264, AAC<br />Delivery<br />Live Streaming or On-Demand<br />
  13. 13. Timeline<br />Silverlight 1<br />Beta December 2006<br />RTM September 5, 2007<br />Silverlight 2<br />Beta March 2008<br />RTM October 14th 2008<br />Silverlight 3 <br />Beta March 2009<br />RTM – July 12th, 2009<br />Silverlight 4<br />Beta November 2009<br />RTM - ???<br />
  14. 14. Silverlight and the Web<br />
  15. 15. Silverlight Market Penetration<br />http://riastats.com/<br />
  16. 16. demos<br />Microsoft Silverlight<br />
  17. 17. Silverlight "Transparency"No black box here!<br />XAML is text-based & SEO friendly<br />XAP is a ZIP – Open up and “view source” if you wish<br />XAML DOM and HTML DOM are first class citizens<br />HTML Bridge lets C# code manipulate DOM<br />JavaScript code can manipulate XAML<br />Presentation Title | PP | DD Month YYYY<br />
  18. 18. Developers<br />Designers<br />Create<br />Implement<br />Artistic<br />Functional<br />JPG<br />TIFF<br />PSD<br />GIF<br />HTML<br />ASPX<br />ASCX<br />ASMX<br />C#<br />VB.NET<br />XAML<br />Traditional Web Development<br />Silverlight Development<br />
  19. 19. Introducing XAML<br />Defines the User Interface<br />Communication Between Designers and Developers<br />No Translation Required<br />Toolable, Readable<br />Represents Code<br />eXtensible Application Markup Language<br />Shared with WPF, WF<br />Represents .NET Objects<br />Based on XML<br />True Separation of UI and Logic<br />
  20. 20. What was Silverlight 2?<br />Capable<br />Media, Animation, Graphics, Text<br />HTML controls for data capture<br />Cross-Platform .NET 3.5 CLR<br />Windows, Mac, Linux <br />Trimmed for size, but very capable<br />Approximately 4.5mb download<br />Controls<br />Real Networking Stack<br />Sockets, SOAP, REST, more<br />Binding, Templates, UserControls<br />LINQ<br />Dynamic Languages (DLR)<br />and more…<br />
  21. 21. What's New in Silverlight 3<br />Navigation Application Template<br />Themes<br />Richer Databinding<br />Perspective Transforms & Effects<br />Behaviors<br />Out-of-Browser<br />Network API<br />Smooth Streaming<br />SketchFlow<br />
  22. 22. Building your Silverlight UI<br />Controls<br />Events<br />Data Binding<br />Custom Control Model<br />Animations<br />Storyboards, not tweening<br />Styling<br />Out of Browser<br />Toolkit & Community<br />
  23. 23. Tools<br />Presentation Title | PP | DD Month YYYY<br />
  24. 24. Silverlight Developer's Toolkit<br />
  25. 25. Silverlight Developer's Toolkit<br />
  26. 26.
  27. 27. Expression Blend - SketchFlow<br />Mock up your site<br />Establish navigation and general layout<br />“Wiggly” styles help clients understand sketch nature<br />Realistic looking sample data<br />Real events<br />Convert sketch app to real app with ease<br />
  28. 28. Silverlight Developer's Toolkit<br />
  29. 29. 11/19/2006<br /><ul><li>http://www.eclipse4sl.org/
  30. 30. Silverlight Integration with other Web Application Platforms
  31. 31. PHP
  32. 32. JSP/Servlets
  33. 33. Groovy
  34. 34. Spring MVC
  35. 35. JSF
  36. 36. Struts
  37. 37. Etc.</li></li></ul><li>Announced @ MIX 09<br />Tech Preview of Mac Compatible Version<br />http://www.eclipse4sl.org/update/mac<br />
  38. 38. demo<br />Silverlight Tools<br />
  39. 39. Silverlight Chess in the Major Browsers<br />Presentation Title | PP | DD Month YYYY<br />
  40. 40. Configuring Apache for Silverlight<br />Need to add two MIME types for Silverlight content:<br />.xaml – application/xaml+xml<br />.xab – application/x-silverlight-app<br />Failure to set MIME types will result in 404.3 errors and prompts to download the files in the browser<br />Presentation Title | PP | DD Month YYYY<br />Tim Sneath & Jorkeo have blog posts covering this. Links provided in the speaker notes.<br />
  41. 41. Configuring Apache for Silverlight<br />Alternative HACK if these settings are not available in a shared hosting environment:<br />A .XAP is a ZIP, right?<br />Rename your .XAP files to .ZIP <br />Deploy to the server<br />Modify the source param of the <object> tag in the HTML file to reference the new .ZIP file name<br />One catch: This won’t work if your app references .XAML files outside of the .XAP package!<br />Presentation Title | PP | DD Month YYYY<br />
  42. 42. Getting Silverlight Connected<br />Silverlight talks many formats<br />SOAP services<br />XML<br />RSS<br />AtomPub<br />REST<br />Sockets<br />Built in networking stack<br />Not subject to limitations of browser stack<br />Full HTTP verb support<br />Independent security model<br />Full visibility of request/response headers, codes, etc<br />
  43. 43. Deep Zoom<br />Implementation of the Seadragontechnology<br />Allows users to pan around and zoom in a large, high resolution image or a large collection of images. <br />Reduces the time required for initial load<br />Downloads only the region being viewed and/or only at the resolution it is displayed at<br />As user pans or zooms, subsequent regions are downloaded<br />Animations hide any jerkiness in the transition<br />Supported in iPhone as Seadragon Mobile<br />Use Deep Zoom Composer to build and publish<br />
  44. 44. Smooth Streaming<br />HTTP-based adaptive streaming<br />Support in IIS 7 with Media Services extension<br />Expression Encoder multi-stream generation<br />Specs released under the Community Promise Initiative<br />Support for iPhone<br />
  45. 45. Data Binding<br />Data Binding<br />One way – any CLR object w/ INotifyPropertyChanged<br />Two way<br />Value Converters for converting/formatting<br />Core Validation Hooks<br />Collection Binding<br />A full & growing set of controls<br />Data Template based customization<br />
  46. 46. Conclusion - Silverlight<br />Great choice for RIA solutions<br />Powerful media platform<br />Comprehensive tooling<br />Designer/developer collaboration<br />Vibrant ecosystem<br />Continually evolving<br />Adoption is huge<br />
  47. 47. Resources<br />MIX conference: http://live.visitmix.com<br />Community Site: http://silverlight.net<br />Main Product Site: http://www.microsoft.com/silverlight<br />MSDN Center: http://msdn.microsoft.com/silverlight<br />Smooth Streaming: <br />Online SDK: http://msdn2.microsoft.com/bb188266.aspx<br />Top Silverlight Blogs<br />Shawn Wildermuth: http://wildermuth.com<br />Tim Heuer: http://www.timheuer.com<br />Tim Sneath: http://blogs.msdn.com/tims<br />Mike Harsh: http://blogs.msdn.com/mharsh<br />Joe Stegman: http://blogs.msdn.com/jstegman<br />Laurence Moroney: http://blogs.msdn.com/webnext<br />Ernie Booth: http://blogs.msdn.com/ebooth<br />
  48. 48. 41<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×