Date post: | 07-Nov-2014 |
Category: |
Technology |
Upload: | steren-giannini |
View: | 1,371 times |
Download: | 4 times |
Windows 8 Metro Application Template
How we built it.How it will help you.
Steren Giannini Meetup Windows 82012-10-01
Windows 8 Metro Application Template
How we built it.How it will help you.
Steren Giannini Meetup Windows 82012-10-01
Windows StoreApplication Template
How we built it.How it will help you.
Steren Giannini Meetup Windows 82012-10-01
Windows Store app Template
to easily create content-based applications in Windows Store app stylesupports articles, videos and picturesfully integrated with Windows 8
Generated App Demo
http://vimeo.com/46828771
You know what the funniest thing about Windows 8 is?
It's the little differences. I mean, they got the same shit over there that we got here, but it's just...it's just, it's a
little different.
What?
"Little" differences.
AJAX calls: only using WinJS$.ajax() WinJS.xhr()
HTML insertion: nope, use DOM manipulation$().prepend() var logo = document.createElement('img');
element.querySelector("header").appendChild(logo);
Back to the roots!
EJS templates WinJS.Binding.Template()
but a little too much -like
use for Views, Data and Navigation(WinJS view widgets do all the work for you)
Use WinJS API
You will have to learn a new framework
well structured (Object Oriented, asynchronous)well documented
For every feature, look for examples and doc
http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
Visual Studio
Horrible:● DOM inspector● JS errors
○ Stacktrace is here but very often unreadable● CSS
○ change & reload, no live editing-> use Blend
Blend
Live CSS editing but...● heavy tool, too many buttons● generated CSS not very smart
(use the UI only for tweaks)
● still need to reload the app very often
Checklist for a great Windows Store app
● Design ● Touch, mouse, keyboard
● Offline● Snapview mode● Share sharm● Semantic Zoom● Search
Read about Windows 8 designUse SDK UI widgets
See exam
ples in SD
K
Think about Offline mode
Handle connection lostif(Windows.Networking.Connectivity.NetworkInformation
.getInternetConnectionProfile().getNetworkConnectivityLevel() === Windows.Networking.Connectivity.NetworkConnectivityLevel.internetAccess) {
Data.update();}
Windows.Networking.Connectivity.NetworkInformation.addEventListener("networkstatuschanged", checkInternet);
Do not assume images loaduse placeholders
Do not assume your data loadsdisplay a network warning message
IE10 vs Webkit or Geckop { width: 100%; height: 500px; -webkit-column-width:100px; column-width:100px;}
http://jsbin.com/oyajog/5
http://www.quirksmode.org/css/multicolumn.html#link5
For content-based apps, no need to reinvent the wheel.
You use to create
blogs and simple websites.
Use the and this
template to create content-based apps for you
or your clients.
Joshfire Factory Demo
http://factory.joshfire.com