Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | doris-chen |
View: | 10,839 times |
Download: | 2 times |
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
Who am I? Developer Evangelist at Microsoft based in Silicon Valley, CA
Blog: http://blogs.msdn.com/b/dorischen/
Twitter @doristchen
Email: [email protected]
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)
PAGE 2
Blog http://blogs.msdn.com/dorischen
As of March 2012, IDC
http://bit.ly/win8cards
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 8
Blog http://blogs.msdn.com/dorischen
demo
Blog http://blogs.msdn.com/dorischen PAGE
13
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 14
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 15
/* Re-arrange and hide/show content */
/* */
/* …*/
/* …*/
Full screen
Snap
Fill
Portrait
PAGE 18
demo
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 22
twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen PAGE 23
The development tools are FREE!
If you use a higher SKU, it just works!
demo
Blog http://blogs.msdn.com/dorischen PAGE
28
demo
There are ways to communicate across contexts, ways to give websites access to some web standards
features and ways to skip automatic filtering within a function.
Feature Local context Web context
Windows Runtime Yes No
Windows Library for JavaScript Yes Partial
JavaScript
URIs(attribute="javascript:code") No Yes
Data URIs ("data:" ) for fonts No Yes
External script references
(<script src="http://*" /> ) No Yes
window.close Yes No
Cross-domain XHR requests Yes No
http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspx
http://github.com/appendto/jquery-win8
http://channel9.msdn.com/Events/Build/2012/3-130
http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx
twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen PAGE 33
xhr//access a web service, cloud service, local resource
http://www.example.org/somedata.json
Blog http://blogs.msdn.com/dorischen PAGE
36
"Code for touch, get mouse and pen for free!"
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);
}
...
}
this.MSPointerDown = function(evt)
{
context.beginPath();
context.moveTo(evt.offsetX, evt.offsetY);
x = evt.offsetX;
y = evt.offsetY;
brush.started = true;
};
this.MSPointerUp = function(evt)
{
if (brush.started)
{
brush.MSPointerMove(evt);
context.closePath();
brush.started = false;
}
};
demo
// Application manifest capabilities required to access camera and microphone <Capabilities> <DeviceCapability Name="webcam" /> <DeviceCapability Name="microphone" /> </Capabilities>
id="message"
id="imagedisplay"
type="text/javascript">
// Step 1: Invoke the camera capture UI for snapping a photo
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).
then(function (capturedItem) {
if (capturedItem) {
// Step 2: Display the photo
document.getElementById("imagedisplay").src = URL.createObjectURL(capturedItem);
} else {
document.getElementById("message").innerHTML = "User didn’t capture a photo";
}
});
id="message"
id="videoplayback"
type="text/javascript">
// Step 1: Invoke the camera capture UI for record a video
var dialog = new Windows.Media.Capture.CameraCaptureUI();
dialog.videoSettings.format = Windows.Media.Capture.CameraCaptureUIVideoFormat.mp4;
dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.video).done(function (file) {
if (file) {
var videoBlobUrl = URL.createObjectURL(file, {oneTimeOnly: true});
document.getElementById("capturedVideo").src = videoBlobUrl;
}
});
demo
document.getElementById("pin").addEventListener("click", function (e) {
var uri = new Windows.Foundation.Uri("ms-appx:///" + item.tileImage);
var tile = new start.SecondaryTile(
item.key, // Tile ID
item.shortTitle, // Tile short name
item.title, // Tile display name
JSON.stringify(Data.getItemReference(item)), // Activation argument
start.TileOptions.showNameOnLogo, // Tile options
uri // Tile logo URI
);
})
return nav.navigate("/pages/itemDetail/itemDetail.html", { item: JSON.parse(args.detail.arguments) });
default.js:
// Register for push notifications var profile = net.NetworkInformation.getInternetConnectionProfile();
if (profile.getNetworkConnectivityLevel() === net.NetworkConnectivityLevel.internetAccess) { push.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync().then(function (channel) {
var buffer = wsc.CryptographicBuffer.convertStringToBinary(channel.uri, wsc.BinaryStringEncoding.utf8);
var uri = wsc.CryptographicBuffer.encodeToBase64String(buffer);
WinJS.xhr({ url: "http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile" }).then(function (xhr) {
… }…
// Handle click events from the Reminder command
document.getElementById("remind").addEventListener("click", function (e) {
// Create a toast notifier
var notifier = notify.ToastNotificationManager.createToastNotifier();
// Make sure notifications are enabled
if (notifier.setting != notify.NotificationSetting.enabled) {…}
// Get a toast template and insert a text node containing a message
var template = notify.ToastNotificationManager.getTemplateContent(notify.ToastTemplateType.toastText01);
var element = template.getElementsByTagName("text")[0];element.appendChild(template.createTextNode("Reminder!"));
// Schedule the toast to appear 10 seconds from now
var date = new Date(new Date().getTime() + 10000);
var stn = notify.ScheduledToastNotification(template, date);
notifier.addToSchedule(stn); });
• Free open source cross platform framework for apps on mobile devices
• Renders UI using HTML5 and CSS; Web browser encased in a native app for each platform
• Build for Windows Phone and Port to Windows 8
HTML5/JS developers
HTML5/JS developers (Game): Construct 2 (Game)
Construct2 - cross platform game development for beginners
HTML5/JS developers (Game) GameMaker - family of products that caters to entry-level developers and seasoned game development professionals to create cross platform games
HTML5/JS developers (Game) GameSalad – create cross platform games rapidly with no code
Blog http://blogs.msdn.com/dorischen
http://bit.ly/2000Cash
Publish your app to the Windows Store and/or Windows Phone Store March 8, 2013 through June 30, 2013
Submit up to 10 published apps per Store and get a $100 Virtual Visa®
More: http://bit.ly/2000Cash
YOUR IDEA.
YOUR APP.
30 DAYS.
You can develop a Windows 8 app in 30 days—
and we’re here to help.
Week 1 App design
Week 2 Coding your app
Week 3 Making your app shine
Week 4 Get published
• Insider tips and tricks on Windows 8 application development.
• Personal on-the-phone access to a Windows 8 architect*.
• An exclusive one-on-one Metro style design consultation*.
• An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab.
Sign Up http://bit.ly/Win8GenApp
http://bit.ly/HTML5Wins8Camp
http://bit.ly/CampInBox
http://bit.ly/Wins8Download
http://Aka.ms/brockschmidtbook
http:/dev.windows.com PAGE
80
PAGE
81
• 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 • http://www.beautyoftheweb.com/