Application Development with HTML5Chris Ching and Nathaniel BagnellInteractive DevelopersDigiflare

a bit about us www.digiflare.com chris.ching@digiflare.com nathaniel.bagnell@digiflare.com 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• chris.ching@digiflare.com and

nathaniel.bagnell@digiflare.com• 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 td_can@microsoft.com 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.