Application Development with HTML5Chris Ching and Nathaniel BagnellInteractive DevelopersDigiflare
a bit about us www.digiflare.com [email protected] [email protected] Web and mobile developers HTML5 usergroup (http://bit.ly/ncOoEh) Toronto, ON
agenda Defining HTML5 Utilizing HTML5 Technologies Spicing It Up With CSS3 Make Your Life Easier With Tools HTML5 and Beyond Getting Started
Defining HTML5
defining HTML5 What do people think when they hear
“HTML5”? A set of specifications A goal toward a more open web What is an “HTML5” application?
HTML5 applications
HTMLJavaScript
APIsCSS3
HTML5 technology areasPerformanc
e
3D Effects
Semantics
Offline & Storage
Styling
Connectivity
Multimedia
Device Access
CSS3 Border Radius Custom Fonts Box Shadow Multiple Backgrounds Selectors Media Queries & More…
JavaScript APIs Canvas Video & Audio Drag & Drop Geolocation Local Storage Offline Apps …& more
Utilizing HTML5 Technologies
HTML5 technologies Semantic elements Canvas Geolocation Local Storage Video & audio
semantic elements More descriptive markup Allows programs to extract data Header Article Time Nav Footer … & more
demoSemantic Markup
canvas A drawable surface to render graphs,
images, shapes dynamically via JavaScript Paths fillRect fillText createLinearGradient drawImage
canvas
<canvas id=“canvasArea” height=“300” width=“400”></canvas>
var context = document.getElementById("canvasArea").getContext("2d");
context.beginPath();context.moveTo(width/2, 0);context.lineTo(width, height); context.lineTo(0, height); context.closePath();
context.fillStyle = "#ffc821"; context.fill();
SVG<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 512 512'>
<path fill='#E34F26' d='M71,460 L30,0 481,0 440,460 255,512'/><path fill='#EF652A' d='M256,472 L405,431 440,37 256,37'/><path fill='#EBEBEB' d='M256,208 L181,208 176,150 256,150 256,94 114,94 129,265 256,265zM256,355 L192,338 188,293 132,293 139,382 256,414z'/><path fill='#FFF' d='M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 387,208zM255,94 L255,150 392,150 397,94z'/>
</svg>
demoCanvas & SVG
geolocation The user’s location is available via
JavaScript API Geolocation is opt-in The browser asks for permission
geolocationnavigator.geolocation.getCurrentPosition(located);
function located(position) {var latitude = position.coords.latitude;var longitue = position.coords.longitude;
}
demoGeolocation
local storage Key/Value store Up to 5mb No expiration Store string data Offline support for applications
local storage
window.localStorage.setItem(‘name’, ‘value’); window.localStorage.name = ‘value’;
var name = window.localStorage.getItem(‘name’); var name = window.localStorage.name;
window.localStorage.removeItem(‘name’);
demoLocal Storage
video & audio<video width=“320” height=“280” controls>
<source src=“video.webm” type=‘video/webm; codecs=“vp8, vorbis”’/>
<source src=“video.ogv” type=‘video/ogg; codecs=“theora, vorbis”’/>
<source src=“video.mp4” /></video>
demoVideo & Audio
Spicing It Up With CSS3
quick CSS primer CSS stands for
Cascading Style Sheets
CSS is used to apply styling to mark-up elements
With presentation separate from content, the pages become more flexible
CSS specification stages The CSS specification goes through
“stages” from the W3C.
CSS3 module’s stages varies significantly
Only three modules have reached recommendation status: Selectors Level 3, Colour, and Namespaces.
Progress is relatively quick; a little over a year ago there was no modules at the Recommendation stage; only Selectors Level 3 was a Proposed Recommendation
Recommendation(REC)
Working Draft(WD)
CSS milestones CSS1 became a W3C
Recommendation in December 1996
In the year 2000, Internet Explorer 5.0 for Mac was the first browser to fully support the CSS1 specification
CSS has been gradually building on top of each previous version, CSS3 is no different
where CSS is now: CSS3 CSS3 builds on top of CSS 2.1
CSS3 brings forth a lot of exciting new features, in a different approach than previous iterations
CSS3 and CSS moving forward, is organized into modules
Updates to the CSS specification will actually be updates to the respective module being updated
why CSS modules? CSS3 is being released in modules,
instead of one giant release
W3C can bring modules up to the Recommendation Level (REC) at different times, based on their priority
Priority is determined by feedback and real-world implementation of WD, CR, and PR specifications
Browser developers can implement CSS3 piece by piece, this helps speed up the overall adoption process
Low Priority
Medium Priority
High Priority
CSS Specification
BrowserRendering
Engine
Module X Already Supported
Module Y Support Soon
Module Z Support Later
Module
Module
Module
what CSS modules exist? There are many modules in the CSS
specification. As of October 2011, there are 52
modules
Each module is specific to it’s purpose i.e. the “Fonts” module will contain all
font-related functionality
Some modules come from entirely new functionality, while others come from previous features i.e. the “Animations” module is all new,
but the “Text” module contains both previous and new functionality related to text
implementing CSS3 today Build your site with the bare minimums first
All required functionality should be there Required structural and core visual elements implemented
Add on additional value afterward with Progressive Enhancement Alternatively, you can do it in reverse with graceful degradation
Using either method, have these value-add features subtly appear/disappear if the user agent does/does not support them
If your project requires the functionality regardless of native user agent support, implement fallbacks that either substitute or imitate the desired functionality
implementing CSS3 today Browser Fallbacks
Implement required functionality natively first Provide fallbacks to browsers that do not support the functionality natively
Fallbacks can be done with JavaScript alternatives (e.g. jQuery plug-ins that replicate features) Proprietary functionality (e.g. IE’s “Filter”) Pseudo effects (i.e. extra markup, images, etc.)
The need for a fallback can be determined by Tools like modernizr to determine native support General knowledge of what is/is not supported by your target browsers
quick jQuery primer We will use jQuery and several jQuery plug-ins to replicate CSS3
features that may not be supported in some of your target browsers
jQuery is a JavaScript library that allows you to quickly develop JavaScript solutions
It has great cross browser support including IE6+, FF2+, Safari 3+, and Opera 9+. So, let’s dive into some demos!
demoSpicing It Up With CSS3
Making Your Life Easier With Tools
tools HTML5test.com HTML5 Boilerplate HTML5 Animations Tools CSS3 Generators Visual Studio, Expression Adobe Tools Modernizr … increasingly more support for HTML5 in existing
toolsets
HTML5 and Beyond
First Published Working Draft Working Draft Last Call
Candidate Recommendati
on
Recommendati
on
future of HTML5 With each new browser release, support
for the HTML5 specification is growing A work in progress:
prototyping emerging standards
multi-platform/screen support• Increasing support for JavaScript and
HTML5 as a multi-platform technology• Develop rich applications for Mobile, Tablet,
Desktop screens with frameworks• Sencha Touch• jQuery• Windows 8
Getting Started
next steps• Implement some of the features we talked
about today on your own• Continue learning more about HTML5 and
then expand your knowledge on JavaScript and jQuery
• Identify opportunities around you to utilize HTML5 technologies
resources
• Diveintohtml5.org• Initializr.com• Css3please.com• Modernizr.com• Html5labs.com• [email protected] and
[email protected]• Twitter: nathaniel401, chriswching
related sessions
Breakouts• 26th October, DEV334 - HTML5 and CSS3
Techniques You Can Use Today, 10:30am• 26th October, WIN312 - Digging into an
HTML5 Line of Business Start Kit, 2:45pm
All sessions will be available online after the tour
Remember To Complete Your Evaluations!
You could WIN a Samsung Focus Windows Phone 7!Let us know what you liked & disliked!Remember, 1=Bad, 5=Good Please provide comments!
No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and ends on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15 th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation form contest begins on November 29 th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the contest close date; or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on November 21st, 2011. The draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be contacted by phone and/or e-mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away for each Tech·Days event in Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8 weeks. The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative.
You can email any additional comments directly to [email protected] at any
time.
Q & A
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this
presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.