Michael Kordahi delicategeniusblog.com

2. Michael Kordahi • delicategeniusblog.com

3. From Rich to ReachSilverlight 2 and IE8

4. dedicated hardware+software desktop app (WPF/XBAP) browser enriched(silverlight) ASP.NET AJAX HTML + JavaScript

5. The Rich Silverlight 2

8. Media: Supported Media File Formats Video Formats WMV (VC-1, v.7, v.8, and v.9) Audio Formats WMA (v.7, v.8, and v.9), MP3 WMA 10 Pro (new in SL2)

9. More Media Adaptive Streaming • Encode multiple bitrates • Silverlight switches based on CPU and Network load • Extensible (BYO algorithm) DRM • DRM9/10 • PlayReady Server side playlists

10. Media: Bitrate Throttling • No bandwidth control with traditional HTTP downloads • Drop-off point in videos: • Microsoft.com ~ 40% • Typical video site < 20%

11. Media: Bitrate Throttling

12. Controls: Built-In

13. Controls: Silverlight Toolkit AutoCompleteBox NumericUpDown Viewbox Expander • ImplicitStyleManager • Charting • TreeView • DockPanel • WrapPanel • Label • HeaderedContentControl • HeaderedItemsControl • http://www.codeplex.com/Silverlight/

14. UI Customization • Silverlight is designed for UI flexibility • Customize the look of an applicationwithout changing it’s behavior • 2 levels of customization: • Styling: Small visual changes on an element (Font, background color, etc) • Skinning: Replacing an element’s entire visual tree

15. Theming: Silverlight Toolkit • http://www.codeplex.com/Silverlight/

16. Layout Controls • Layout containers • Canvas, Grid, StackPanel, Border • Layout properties • Width, MinWidth, MaxWidth, ActualWidth • Height, MinHeight, MaxHeight, ActualHeight • Margin and Padding

17. Network • Cross Domain Policy Support (Silverlight and Flash policy files) • Socket Support • Background network treading (asynchronous data) • Socket and HTTP • Duplex Communication (ServerPush) • Using WCF • Instant Apps, Monitoring, Chat etc • ADO.NET Data Services • ADO.NET Data Services ships in .NET 3.5 SP1 • Silverlight has client access bits (REST)

18. Asynchronous Support Asynchronous web services supported Start the async web service call proxy.BeginGetTransactionList( newAsyncCallback(OnTransactionDataLoaded), null); Handle the web service completion event private void OnTransactionDataLoaded(IAsyncResultiar) { transactionList = proxy.EndGetTransactionList(iar).ToList(); }

19. XmlReader & XmlWriter • Core XML reading & writing capabilities • LINQ to XML Initialisethe reader XmlReaderxr = XmlReader.Create(newStringReader(RawResponse)); Find a node and read its value xr.ReadToFollowing("Item"); stringplayerNodeText = xr.Value; stringplayerNameAttribute = xr.GetAttribute("Name");

20. LINQ • LINQ = Language INtegratedQuery • Allows query expressions to benefit from compile-time syntax checking, static typing & Intellisense • Works on any IEnumerable<T>-based source • Supports querying of in-memory data sources Return all players with more than twenty home runs, sorted varfilteredPlayers = from p in players wherep.HomeRuns > 20 orderbyp.HomeRunsdescending select p;

21. Data Binding Data Template: Data (.NET Object): {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}} Bind using ItemsControl (List Control):

22. Silverlight Sandbox • Silverlight lives in the browser Sandbox • Developers cannot extend the sandbox • Silverlight extends in a secure way • Local storage (isolated storage) • Cookies on roids • 1 MB • Extendable by user initiation • FileOpen dialog …

23. Access the HTML DOM from Managed Code HTML access available in new namespace usingSystem.Windows.Browser; Static HtmlPage class provides entry point HtmlPage.Navigate("http://www.microsoft.com"); String server = HtmlPage.DocumentUri.Host; Hookup events, call methods, or access properties HtmlElementmyButton = HtmlPage.Document.GetElementByID("myButtonID"); myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked)); privatevoidmyButtonClicked(object sender, EventArgs e) { ... }

24. Access Managed Code from JavaScript Mark a property, method or event as [Scriptable] [Scriptable] publicvoidSearch(stringName) { ... } Register a scriptable object WebApplication.Current.RegisterScriptableObject ("EntryPoint", this); Access the managed object from script var control = document.getElementById("SilverlightControl"); control.Content.EntryPoint.Search(input.value);

25. Deep Zoom • Provides seamless viewing & zooming of huge images • Loads only the data necessary to show the part of an image the user is viewing • Effectively turns a large image into an efficiently scaling vector

26. Silverlight 2 <Demo />

27. Hot off the press H.264 support GPU Hardware Acceleration 3D 3

28. The Reach IE8

29. Internet Explorer 8 Standards Interoperability Improvements • CSS 2.1, HTML 4.01, HTML 5 DOM Storage, etc. • Multiple rendering modes support, Acid2 test passes! New Features • Accelerators (The artist formerly known as Activities) • WebSlices • Visual Search • Favorites bar • AJAX Improvements • Automatic crash recovery • Security Features Platform Enhancements • Performance improvements • Developer tools

30. Versioning and IE Modes Compatibility Modes • IE8 Standard (default) – CSS 2.1-compliant • IE7 Emulation – backward compatibility with IE7 • IE5 Compatible – IE5 rendering behavior Mode Switches (Opt-in) • HTTP header: X-UA-Compatible: IE=7 • For example, Web.Config in IIS7: <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=7" /> </customHeaders> </httpProtocol> • JavaScript: document.documentMode • Meta tag: <meta http-equiv="X-UA-Compatible" content="IE=7">

31. Compatibility View

32. Accelerators Contextual Menu Options • Based on content selection • “look up” & “send to” external services • In-place content preview Implementation • OpenService Activity XML descriptor http://www.microsoft.com/schemas/openservicedescription/1.0 • HTTP GET/POST • JavaScript integration window.external.AddService() & IsServiceInstalled()

33. OpenService Format <?xml version="1.0" encoding="utf-8" ?> <os:openServiceDescriptionxmlns:os="http://www.microsoft.com/schemas/openservicedescription/1.0"> <os:homepageUrl>http://maps.live.com</os:homepageUrl> <os:display> <os:name>Map with Live Maps</os:name> <os:icon>http://maps.live.com/favicon.ico</os:icon> </os:display> <os:activity category="Map"> <os:activityAction context="selection"> <os:execute method="get“ action="http://maps.live.com/default.aspx?where1={selection}" /> <os:preview method="get" action="http://maps.live.com/geotager.aspx"> <os:parameter name="b" value="{selection}" /> <os:parameter name="clean" value="true" /> <os:parameter name="w" value="320" /> <os:parameter name="h" value="240" /> <os:parameter name="format" value="full" /> </os:preview> </os:activityAction> </os:activity> </os:openServiceDescription>

34. Web Slices Page Content Subscription • RSS-based subscriptions to portions of a Web page • Favorites Bar with update notification • Content-hover discovery • In-place content preview Implementation • Enabled by adding HTML annotations • hAtomMicroformat and Web Slice format • Refresh interval configurable Sample HTML Annotations …

35. Add Web Slice delicategeniusblog.com <div id="dg_recent_comments"> <abbr></abbr> <?php if (function_exists('get_recent_comments')) { ?> <li><h2 class="entry-title"><?php _e('Recent Comments:'); ?></h2> <ul><?phpget_recent_comments(); ?></ul> </li> <?php } ?> </div> • <div class="hslice" id="dg_recent_comments"> • <abbrclass="ttl" title="60"></abbr> • <?php if (function_exists('get_recent_comments')) { ?> • <liclass="entry-content"><h2 class="entry-title"><?php _e('Recent Comments:'); ?></h2> • <ul><?phpget_recent_comments(); ?></ul> • </li> • <?php } ?> • </div>

36. Web Slice Format • hAtomMicroformat describes a feed & items • Web Slice builds on hAtom • hAtom can represent static content • Web Slice is dynamic content • Web Slice reuses properties on hAtom • Adds optional properties for subscribing • ttl – time-to-live value • feedurl – alternative path to get updates • endtime – When the feed item is no longer relevant • Can be applied to an hAtom

37. Developer Tools Built-In Developer Tools • Dynamic toggling of rendering modes • 3 modes – HTML, CSS, JavaScript HTML & CSS Explorer • Exposes internal representation of DOM tree and CSS styles • Real-time editing and rendering • Element-based style explorer • CSS file-based view in CSS mode

38. Developer Tools JavaScript Debugger Execution control • line and context-based breakpoints • Step into, over, out, continue; break all (pause) Variable Inspection • Scope sensitive (local, global, etc.) • Set watch variables Call Stack Manipulation • Dynamic call stack traversal Custom Script Execution • Immediate tab

39. The Gallery http://www.ieaddons.com

40. Plug Stuff Artists in Residence IE8 Accelerator and Web Slice Competition Sponsor High profile Accelerators and Web Slices • Michael Kordahi • michael.kordahi@microsoft.com • delicategeniusblog.com

42. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.