1 / 38

Best Practices for Creating Advanced Graphics

Best Practices for Creating Advanced Graphics . Leon Braginski Senior Program Manager Microsoft Corporation. Objectives. Learn about advanced graphics techniques in Internet Explorer 9 Understand best practices for creating high performance, graphically rich websites. Agenda.

pierrette
Download Presentation

Best Practices for Creating Advanced Graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Best Practices for Creating Advanced Graphics Leon Braginski Senior Program Manager Microsoft Corporation

  2. Objectives • Learn about advanced graphics techniques in Internet Explorer 9 • Understand best practices for creating high performance, graphically rich websites

  3. Agenda • How Internet Explorer 9 takes advantage of the GPU • Best practices for high performance canvas and SVG • Rich styling by using CSS3 • Best practices for high performance video

  4. Rich Web Applications Today

  5. GPU-Powered HTML 5 • All HTML5 is GPU-accelerated • Internet Explorer uses DirectX • Direct2D • DirectWrite GPUs GPU Architecture Multi-Core CPU

  6. Taking Advantage of the GPU

  7. Basic Technique for Animating Canvas with Images • Render the image on canvas • Clear canvas • Repeat

  8. Best Practice: Drawing an Image Cell • Consider using an image sprite as a high performance approach sY sX fishH fishW

  9. Drawing a Single Image Cell <img id="imageStrip" src="fishstrip.png" style="display: none" tabIndex="-1"> // get image strip imageStrip = document.getElementById('imageStrip'); ctx.drawImage ( // source image information FishImageStrip, // source fishW * cell, // sX of the fish cell fishH * species, // SY of the fish cell fishW, // cell width fishH, // cell height // Canvas Destination x, // X where to draw fish y, // Y where to draw fish on canvas fishW, // destination width fishH, // destination height );

  10. demo Fish Sprite, and Rendering a Fish from Sprite on Canvas

  11. Making it More Interesting: Canvas with Images • Load the background • Load the entire image sprite • Transform canvas (scale, translate) • Render the specific cell from the strip • Repeat steps 3-4

  12. Animating Canvas with Images varmyCanvas= document.getElementById('myCanvas'); varctx = myCanvas.getContext("2d"); … ctx.save(); ctx.translate(x, y); ctx.scale(scale, scale); ctx.transform(flip, 0, 0, 1, 0, 0); ctx.drawImage(imageStrip, fishW * cell, fishH * species, fishW, fishH, -fishW / 2, -fishH / 2, fishW, fishH); ... ctx.restore();

  13. demo Adding Background and Canvas Transforms

  14. Best Practice for Animating SVG

  15. Applying SVG Transforms

  16. Using SMIL to Create Declarative Animations in SVG

  17. demo SVG Simple and Complex Animations

  18. CSS3 Rich Styling

  19. CSS Visual Elements .bottomshade { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; background-color: rgba(0,0,0,0.5); border-radius: 25px; }

  20. CSS3 Multiple Backgrounds

  21. Implementing Multiple Backgrounds #demo { background-image: url('backgrounds/crosshair.svg'), url('backgrounds/ufo.svg'), url('backgrounds/clouds.svg'); background-position: 600px 500px, 300px 200px, 0px 0px; background-clip: padding-box, border-box, border-box; background-repeat: no-repeat, no-repeat, repeat; } <div id="demo"></div>

  22. demo Graphically Rich CSS3 Styles and Multiple Backgrounds

  23. Using Rich Fonts • Take advantage of DirectWrite sub-pixel positioning • Use Web Open Font Format (WOFF) fonts

  24. Using Fonts With WOFF Without WOFF <style type="text/css"> #myText { font-family: Gabriola, Georgia, Serif; text-align: center; font-size: 48pt; color: Black; line-height: 1.0em; padding-bottom: 0.3em; letter-spacing: 0em; } </style> <div id=“myText"> Web Font </div> <style type="text/css"> @font-face { font-family: FelbridgeOTSCondensed; src: url('FelbridgeOTS-Condensed.woff'); } #title{ font: 30pt FelbridgeOTSCondensed, sans-serif; letter-spacing: 0.01em; text-align:center; color:white; background-color:rgb(152,155,177); } </style> <div id="title"> WOFF Font </div>

  25. Getting or Creating WOFF Fonts • Convert open source and freeware fonts to WOFF • Read the license to ensure that conversion is allowed • Font conversion utilities and services are available at http://www.fontsquirrel.com/ • License fonts directly from a font vendor • Use font subscription services

  26. WOFF Font Subscription Services • Typekit: http://typekit.com • Ascender: http://ascenderfonts.com • Font Bureau: http://www.fontbureau.com/ • Monotype Imaging: http://fonts.com • Google Fonts API: http://code.google.com/apis/webfonts/

  27. demo Web and WOFF Fonts

  28. Video Encoding • Take advantage of various video encoding tools Microsoft Expression Encoder

  29. Video Encoding • You can use an open source encoder HandBrake

  30. Media Supported in Internet Explorer 9 • All H.264 encoding profiles are supported • Supported video codecs • avc1 (h.264) • vp8 (with appropriate software installed) • Supported audio codecs • MP4A • MP3

  31. Selecting the Encoding Profile • Balance the profile with computing and network needs: • High • Main • Base • High profile ~ 20-30% lower bandwidth usage for about the same quality playback • The baseline profile is a good all-around choice

  32. Video: Using Different Bit Rates • The browser buffers the content to start • Recommended minimum setting: 350Kbps • Recommended maximum setting: 2-3.5 Mbps

  33. Testing for Internet Explorer 9 Codec Support If ( (document.createElement("video"). canPlayType ('video/mp4; codecs="avc1,mp4a"') ) =="probably") { // The H.264 and AAC codecs are supported }

  34. demo Using Video Elements in Internet Explorer 9

  35. Call to Action • Don’t be afraid to use high resolution images • Design for the largest resolution, and let the GPU sample down as needed • Create beautiful graphics • Use alpha channels to create appealing compositions • Use stunning effects, such as rounded borders and shadows • Use rich fonts, including WOFF fonts • Fill out the evaluation form for this presentation

  36. Resources • FakeSMIL: http://leunen.d.free.fr/fakesmile/ • Handbrake for media encoding: http://handbrake.fr/ • Related Windows Summit sessions: • Internet Explorer 9 Overview • Internet Explorer 9 Overview (Update) • Easier Web Development Using Internet Explorer 9 Developer Tools • Internet Explorer 9 Desktop Integration Using Pinning • Getting Started with Canvas • Getting Started with SVG • Touch Support in Internet Explorer 9

  37. © 2010 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.

More Related