13. On
<div class="itemtemplate">
<link> and
+ <script> with
WinJS API
reference
</div>
@media screen and (-ms-view-state:
fullscreen-portrait)
@media screen and (-ms-view-state:
snapped)
Responsive App Design
15. Responsive Application
Presentation User Control Backend
Windows 8 / HTML5 Performance
Building Blocks
+
+
Don Norman’s
Design of Everyday Things
16. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?
18. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?
20. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?
22. Don Norman’s Design
Principles
Visibility – Can I see it?
Feedback – What have I done?
Affordance – How do I to use it?
Mapping – Where am I and where can I
go?
Constraint – What can I not do?
Consistency– Have I seen this before?
26. Responsive Application
Presentation User Control Backend
Windows 8 Performance
Building Blocks
+
+
Don Norman’s Design of JavaScript
Everyday Things
28. Generic Concepts in HTML5
3. Process in background
1. Minimize connections
2. Decrease bandwidth
4. Store locally
Existing performance features in HTML5 works in Windows 8
29. Tricks on Existing HTML5 + JavaScript
1. Minimize number of connections
HTTP caching
Reuse Connection (connection:close)
Use CDN
2. Decrease data bandwidth
bit.ly/HTML5Performance
Compression via encoding
Minification
3. Move Processes to background
Web Worker
Async Callback
4. Store resources locally
Local storage
30. Tricks on Windows 8 HTML5 + JavaScript
1.Use Windows 8 ListView
2.Use Windows Animation Library
over
CSS Animation and Transition
31. ListView Control
}
Built on top of
JavaScript
and
CSS3
Animation &
Transitions
35. Windows Animation Library
App navigation
Animate content within a view
Revealing or hiding supplemental UI
Collections
Selection
36. Responsive App Design
Presentation User Control Backend
Windows 8 Performance
Building Blocks
+
+
Don Norman’s JavaScript
Design of Everyday Things
37. Windows 8 Hands-On Lab
Dates: 12 May(Sat) 18 May (Fri) and 26 May
(Sat)
Time: 9:30am to 5:00pm
Location: NTUC Trade Union House
Register: bit.ly/win8handsonlabs