SlideShare a Scribd company logo
1 of 44
Download to read offline
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
PAGE 7
PAGE 8
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
demo
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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
PAGE
PAGE
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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
demo
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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
What Web Developers Need to Know to Develop Native HTML5/JS Apps
PAGE
PAGE
What Web Developers Need to Know to Develop Native HTML5/JS Apps
The development tools are FREE!
If you use a higher SKU, it just works!
What Web Developers Need to Know to Develop Native HTML5/JS Apps
PAGE
demo
xhr
//access a web service, cloud service, local resource
http://www.example.org/somedata.json
What Web Developers Need to Know to Develop Native HTML5/JS Apps
PAGE
What Web Developers Need to Know to Develop Native HTML5/JS Apps
"Code for touch, get mouse and pen for free!"
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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);
}
...
}
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
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
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
http://bit.ly/win8OnePage

http://bit.ly/HTML5Wins8Camp

http://bit.ly/CampInBox

http://Aka.ms/brockschmidtbook
PAGE
 http:/dev.windows.com
• 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/
What Web Developers Need to Know to Develop Native HTML5/JS Apps

More Related Content

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

Matthew H Adams Resume
Matthew H Adams ResumeMatthew H Adams Resume
Matthew H Adams Resumemattiemobile
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Ganesh k v my resume
Ganesh k v my resumeGanesh k v my resume
Ganesh k v my resumeGanesh KV
 
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en AzureGapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en AzureAlberto Diaz Martin
 
EuroIA 2009 Designing Exploding Websites Smit Boersma
EuroIA 2009 Designing Exploding Websites Smit BoersmaEuroIA 2009 Designing Exploding Websites Smit Boersma
EuroIA 2009 Designing Exploding Websites Smit BoersmaIskander Smit
 
Designing Exploding Websites (Euro IA 2009)
Designing Exploding Websites (Euro IA 2009)Designing Exploding Websites (Euro IA 2009)
Designing Exploding Websites (Euro IA 2009)Peter Boersma
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumAxway Appcelerator
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAJeff Haynie
 
Final Year Project Presentation
Final Year Project PresentationFinal Year Project Presentation
Final Year Project PresentationSyed Absar
 
Introduction to the Windows Live Platform
Introduction to the Windows Live PlatformIntroduction to the Windows Live Platform
Introduction to the Windows Live PlatformClint Edmonson
 
Amol Bhawar Resume 2016
Amol Bhawar Resume 2016Amol Bhawar Resume 2016
Amol Bhawar Resume 2016Amol Bhawar
 
Atl elevate programmatic developer slides
Atl elevate programmatic developer slidesAtl elevate programmatic developer slides
Atl elevate programmatic developer slidesDavid Scruggs
 
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...DataLeader.io
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersSarah Dutkiewicz
 
API Workshop Series Part 2: The Future of Intelligent User Interactions
API Workshop Series Part 2: The Future of Intelligent User InteractionsAPI Workshop Series Part 2: The Future of Intelligent User Interactions
API Workshop Series Part 2: The Future of Intelligent User InteractionsCaitlin Zucal
 
Big Event Looping Deck
Big Event Looping DeckBig Event Looping Deck
Big Event Looping DeckSteve Lange
 

Similar to What Web Developers Need to Know to Develop Native HTML5/JS Apps (20)

Matthew H Adams Resume
Matthew H Adams ResumeMatthew H Adams Resume
Matthew H Adams Resume
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
Ganesh k v my resume
Ganesh k v my resumeGanesh k v my resume
Ganesh k v my resume
 
Xamarin y MS Azure | Cognitive Services
Xamarin y MS Azure | Cognitive ServicesXamarin y MS Azure | Cognitive Services
Xamarin y MS Azure | Cognitive Services
 
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en AzureGapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
 
EuroIA 2009 Designing Exploding Websites Smit Boersma
EuroIA 2009 Designing Exploding Websites Smit BoersmaEuroIA 2009 Designing Exploding Websites Smit Boersma
EuroIA 2009 Designing Exploding Websites Smit Boersma
 
Designing Exploding Websites (Euro IA 2009)
Designing Exploding Websites (Euro IA 2009)Designing Exploding Websites (Euro IA 2009)
Designing Exploding Websites (Euro IA 2009)
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
 
Final Year Project Presentation
Final Year Project PresentationFinal Year Project Presentation
Final Year Project Presentation
 
Jared Glass CV
Jared Glass CVJared Glass CV
Jared Glass CV
 
Introduction to the Windows Live Platform
Introduction to the Windows Live PlatformIntroduction to the Windows Live Platform
Introduction to the Windows Live Platform
 
Amol Bhawar Resume 2016
Amol Bhawar Resume 2016Amol Bhawar Resume 2016
Amol Bhawar Resume 2016
 
ProstoDiary presentation
ProstoDiary presentationProstoDiary presentation
ProstoDiary presentation
 
Atl elevate programmatic developer slides
Atl elevate programmatic developer slidesAtl elevate programmatic developer slides
Atl elevate programmatic developer slides
 
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
A Microsoft Silverlight User Group Starter Kit Made Available for Everyone to...
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
Starwest 2008
Starwest 2008Starwest 2008
Starwest 2008
 
API Workshop Series Part 2: The Future of Intelligent User Interactions
API Workshop Series Part 2: The Future of Intelligent User InteractionsAPI Workshop Series Part 2: The Future of Intelligent User Interactions
API Workshop Series Part 2: The Future of Intelligent User Interactions
 
Big Event Looping Deck
Big Event Looping DeckBig Event Looping Deck
Big Event Looping Deck
 

More from Doris Chen

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work EverywhereDoris Chen
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_uDoris Chen
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Doris Chen
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...Doris Chen
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterDoris Chen
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Doris Chen
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 OpportunityDoris Chen
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluentDoris Chen
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Doris Chen
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It TodayDoris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It TodayDoris Chen
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopDoris Chen
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesDoris Chen
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
 

More from Doris Chen (20)

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and Desktop
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 

Recently uploaded

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 

Recently uploaded (20)

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 

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

  • 2. 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
  • 11. 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
  • 12. PAGE
  • 13. PAGE
  • 15. 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
  • 16. demo
  • 19. Windows 8 Windows app app WinJS 1.0 HTML5 WinJS WinRT
  • 20. Windows 8 app Windows 8.1 app WinJS 1.0 WinJS 2.0
  • 22. PAGE
  • 23. PAGE
  • 25. The development tools are FREE! If you use a higher SKU, it just works!
  • 27. PAGE
  • 28. demo
  • 29. xhr //access a web service, cloud service, local resource http://www.example.org/somedata.json
  • 31. PAGE
  • 33. "Code for touch, get mouse and pen for free!"
  • 36. 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); } ... }
  • 39. 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
  • 43. • 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/