Every Web Developer is a Win8 developer

882 views

Published on

Multimania session on how you can use your webskills to build awesome metro applications

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

  • Be the first to like this

No Downloads
Views
Total views
882
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Every Web Developer is a Win8 developer

  1. 1. @kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-guidelines.be
  2. 2. Goal of this session  Download and play with Windows 8 and VS11  If you know web technologies, you are ready to build amazing Metro style apps  Understand what you need to add upon your HTML5 skills to build Win8 Metro apps
  3. 3. HTML5 Page
  4. 4. CSS3 Grid
  5. 5. CSS3 Media Queries
  6. 6. Tiles
  7. 7. Metro Application != Web Application Dieter is quite serious on this
  8. 8. Building Metro Style Applications Windows Core OS Services
  9. 9. Popular HTML features in Windows 8
  10. 10. Popular CSS features in Windows 8 Transforms Motion Layout 2D & 3D transforms Animations Grid Transitions Flexbox Graphics Motion Gradients Multi-column, Filter Effects hyphenation Text-shadow Pagination Position float Windows hardware acceleration makes these beautiful and fast
  11. 11. Controls
  12. 12. WinJSLibrary for building Metro Style apps using JavaScript  Make your apps look and feel great Matches the Windows Metro design style Controls for common user experiences Designed for touch as well as traditional input  Build your apps fast and with high quality
  13. 13. Windows Library for JavaScript (WinJS)
  14. 14. or use your favourite JavaScript library
  15. 15. So far, so good
  16. 16. Thank you ListView
  17. 17. Void
  18. 18. Different states == Different UI UI always in CSS
  19. 19. MEDIA QUERY Type Query or Expression@media all and (-ms-view-state: fullscreen-portrait){ Feature Value}
  20. 20. Run 2 applications next to each other Snapped app Main app
  21. 21. @media screen and (-ms-view-state: snapped){}
  22. 22. Search Users often search to find the content they care about, be it on the web, local machine, network, or in an app.
  23. 23. Search Apps have rich content, but users have to find and launch the app before searching in it.
  24. 24. Search Search is universally accessible, contextual to your app and always just a single swipe away.
  25. 25. Tiles are the “front door” to you app, Treat it as an extension of your app
  26. 26. Basic Tiles  Tap on tile to launch or switch to an app  Static default tile specified in manifest of the app  Two sizes: Square (1x1) Wide (2x1)

×