1 / 29

Building beautiful and interactive apps with HTML5 & CSS3

PLAT-381T. Building beautiful and interactive apps with HTML5 & CSS3. Ted Johnson Partner Program Manager Lead, Internet Explorer Microsoft Corporation. Beautiful w eb → Beautiful apps. Agenda. What’s new for graphics in Windows 8 web platform Metro style apps using HTML

niesha
Download Presentation

Building beautiful and interactive apps with HTML5 & CSS3

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. PLAT-381T Building beautiful and interactive apps with HTML5 & CSS3 Ted Johnson Partner Program Manager Lead, Internet Explorer Microsoft Corporation

  2. Beautiful web → Beautiful apps

  3. Agenda What’s new for graphics in Windows 8 web platform • Metro style apps using HTML • Internet Explorer 10 Demo “hands-on” examples of • CSS3 features • SVG filter effects • HTML5 canvas

  4. Windows 8 Metro style Apps Desktop Apps HTML JavaScript HTML / CSS XAML View JavaScript (Chakra) C C++ C# VB Model Controller C C++ C# VB WinRT APIs Devices & Printing Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

  5. These features work identically inInternet Explorer 10 andMetro style apps using HTML.

  6. CSS3 Features

  7. CSS3 graphics effects • Transparency • color specification with alpha, opacity property • Round corners • border-radius • Shadows • box-shadow, text-shadow • Background gradients • linear, radial • Typography • Web Open Font Format (WOFF) fonts

  8. demo CSS3 Graphics Effects

  9. CSS3 2D & 3D transforms • Display-time transformations of any HTML content • transforms do not affect layout • 2D Transforms • translate, scale, rotate, skew • 3D Transforms • translate, scale, rotate, skew in X, Y & Z • perspective

  10. demo CSS3 2D & 3D Transforms

  11. CSS3 transitions & animations • Transitions • smooth animation of CSS properties from old to new value • can be used with CSS pseudo-classes such as :hover • Animations • keyframe-based definition of a set of CSS property changes • allows richer animations than CSS Transitions • event model allows complex use in combination with script

  12. demo CSS3 Transitions & Animations

  13. CSS3 multi-column layout • Any HTML block element can be made multi-column • controls for number of columns, column width, column gaps, … • break-before, no-break control • Hyphenation • needed when columns get narrow • Full justification

  14. demo CSS3 Multi-column Layout

  15. SVG Features

  16. SVG filter effects • Collection of pre-defined image filters • Apply to any SVG content • SVG content can be embedded in HTML5 • Hardware-accelerated implementation

  17. demo SVG Filter Effects

  18. HTML5 <canvas>

  19. HTML5 <canvas> • HTML5 <canvas> is a bitmap with an API • think “GDI drawing to a bitmap DC” • Drawing capabilities • line, rectangle, text string, image, path • fill style, line style, line cap, gradients • opacity, shadow, and composition mode • 2D transformation matrix • direct pixel-manipulation • Hardware-accelerated implementation

  20. demo HTML5 <canvas>

  21. Putting It Together

  22. Putting it together

  23. Making it beautiful • Transparency • Border-radius • Box-shadow • Text-shadow • Gradients • Web fonts • 2D Transforms • 3D Transforms • Transitions & Animations • Multi-column Layout • SVG Filter Effects • HTML5 Canvas

  24. These features work identically inInternet Explorer 10 andMetro style apps using HTML.

  25. Related sessions • [PLAT-382T] What's new with HTML5, Javascript, and CSS3 • [PLAT-873T] Designing Metro style apps using CSS3 • [PLAT-376T] Building offline access in Metro style apps and websites using HTML5 • [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster • [PLAT-770T] Create cool image effects with Direct2D

  26. Further reading and documentation • Internet Explorer Test Drive site http://ietestdrive.com/ • Internet Explorer Engineering Team Blog http://blogs.msdn.com/b/ie/ • W3C CSS Specifications and Drafts http://www.w3.org/Style/CSS/ • How to draw on an HTML5 Canvas http://go.microsoft.com/fwlink/?LinkId=227692&clcid=0x409 • Building your first Metro style app with JavaScript http://go.microsoft.com/fwlink/?LinkId=227644&clcid=0x409

  27. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  28. © 2011 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