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

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

5. These features work identically in Internet Explorer 10 and Metro style apps using HTML.

6. CSS3 Features

7. CSS3 graphics effects Transparency Round corners Shadows
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/14/2018 12:08 AM
© 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.

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 9/14/2018 12:08 AM
© 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.

11. CSS3 transitions & animations
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. CSS3 Transitions & Animations
9/14/ :08 AM
demo
CSS3 Transitions & Animations
© 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.

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. CSS3 Multi-column Layout
9/14/ :08 AM
demo
CSS3 Multi-column Layout
© 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.

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 9/14/2018 12:08 AM
© 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.

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> 9/14/2018 12:08 AM
© 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.

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 in Internet Explorer 10 and Metro 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
Internet Explorer Engineering Team Blog
W3C CSS Specifications and Drafts
How to draw on an HTML5 Canvas
Building your first Metro style app with JavaScript

27. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

28. 9/14/ :08 AM
© 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.
© 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.