0
PAGE 2

Who am I?

 Developer Evangelist at Microsoft based in Silicon Valley, CA
 Blog: http://blogs.msdn.com/b/dorisch...
PAGE 7
PAGE 8
demo
Media Source Extensions
Navigation Timing
Screen Orientation API
Encrypted Media Extensions

Pointer Events

Layout Module...
PAGE
PAGE
CSS device adaptation and media queries
Use @-ms-viewport
to control page
scaling
Use media queries
flexbox, and other
ada...
demo
Windows app

WinJS

HTML5

WinRT
Windows 8 Windows app
app

WinJS 1.0 HTML5
WinJS

WinRT
Windows 8 app

Windows 8.1 app

WinJS 1.0

WinJS 2.0
PAGE
PAGE
The development tools are FREE!
If you use a higher SKU, it just works!
PAGE
demo
xhr
//access a web service, cloud service, local resource
http://www.example.org/somedata.json
PAGE
"Code for touch, get mouse and pen for free!"
function onLoad() {
...
var workSpaces = document.getElementsByClassName("workspace");
for (i = 0; i < workSpaces.length; ...
Join us for this Free, hands-on event and learn how to build a Windows 8.1
and/or Windows Phone game in record time. We’ll...
http://bit.ly/win8OnePage

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

http://Aka.ms/brockschmidtbook
PAGE
 ht...
• Responsive Web Design and CSS3
• http://bit.ly/CSS3Intro
• HTML5, CSS3 Free 1 Day Training
• http://bit.ly/HTML5DevCampD...
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
Upcoming SlideShare
Loading in...5
×

What Web Developers Need to Know to Develop Native HTML5/JS Apps

1,752

Published on

You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
This session will start with the introduction on new HTML5 and CSS3 features introduced in Internet Explorer. Internet Explorer is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 app development.
• You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
• You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,752
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "What Web Developers Need to Know to Develop Native HTML5/JS Apps"

  1. 1. PAGE 2 Who am I?  Developer Evangelist at Microsoft based in Silicon Valley, CA  Blog: http://blogs.msdn.com/b/dorischen/  Twitter @doristchen  Email: doris.chen@microsoft.com  Office Hours http://ohours.org/dorischen  Has over 15 years of experience in the software industry focusing on web technologies  Spoke and published widely at JavaOne, O'Reilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings  Doris received her Ph.D. from the University of California at Los Angeles (UCLA) Blog http://blogs.msdn.com/dorischen
  2. 2. PAGE 7
  3. 3. PAGE 8
  4. 4. demo
  5. 5. Media Source Extensions Navigation Timing Screen Orientation API Encrypted Media Extensions Pointer Events Layout Module Fullscreen API Tracking Preferences Expression (DNT) Web Cryptography API HTML5 Custom Data HTML5 Page Transition Events Device Orientation Events DOM4 Mutation Observers Web GL Web Video Text Tracks Format XMLHttpRequest (Level 3) Input Method Editor API
  6. 6. PAGE
  7. 7. PAGE
  8. 8. CSS device adaptation and media queries Use @-ms-viewport to control page scaling Use media queries flexbox, and other adaptive layout techniques Common sizes to consider: 320, 480, 640, 768, 1024px
  9. 9. demo
  10. 10. Windows app WinJS HTML5 WinRT
  11. 11. Windows 8 Windows app app WinJS 1.0 HTML5 WinJS WinRT
  12. 12. Windows 8 app Windows 8.1 app WinJS 1.0 WinJS 2.0
  13. 13. PAGE
  14. 14. PAGE
  15. 15. The development tools are FREE! If you use a higher SKU, it just works!
  16. 16. PAGE
  17. 17. demo
  18. 18. xhr //access a web service, cloud service, local resource http://www.example.org/somedata.json
  19. 19. PAGE
  20. 20. "Code for touch, get mouse and pen for free!"
  21. 21. function onLoad() { ... var workSpaces = document.getElementsByClassName("workspace"); for (i = 0; i < workSpaces.length; i++) { workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false); workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false); workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false); workSpaces[i].addEventListener("MSManipulationStateChanged", resetInteractions, false); } ... }
  22. 22. Join us for this Free, hands-on event and learn how to build a Windows 8.1 and/or Windows Phone game in record time. We’ll cover everything you need to create, upload and publish an amazing game. Expert developers will outline different game frameworks and give you the tools you need to start building. They’ll also explain how to add graphics, level and sound to game starter kits, while sharing other cool ways to make the game your own. In one jam-packed day of learning and coding, you can turn your idea into reality! Register today for a local Game On event. December 4, 2013 December 5, 2013 San Francisco, CA Mountain View, CA http://aka.ms/gameonsf http://aka.ms/gameonsvc
  23. 23. http://bit.ly/win8OnePage http://bit.ly/HTML5Wins8Camp http://bit.ly/CampInBox http://Aka.ms/brockschmidtbook PAGE  http:/dev.windows.com
  24. 24. • Responsive Web Design and CSS3 • http://bit.ly/CSS3Intro • HTML5, CSS3 Free 1 Day Training • http://bit.ly/HTML5DevCampDownload • Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid • http://bit.ly/HTML5onBlend2 • Using Blend to Design HTML5 Windows 8 Application (Part III): Style Game Board, Cards, Support Different Device, View States • http://bit.ly/HTML5onBlend3 • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos PAGE • http://www.beautyoftheweb.com/
  1. A particular slide catching your eye?

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

×