HTML5 (Mid-Technical)

HTML5 (Mid-Technical)

Presented by:

Christophe SaxeISITEDesign.com

HTML5 What is it?

Why the new specification?

When can we start using it?

History of HTMLDesigned to share and

markup scientific documents.

New uses were applied, and HTML evolved.

Demands ChangedAs the web matured, more

sites became dynamic applications. Static sites

have become less common.

What's new?HTML5 has been architected

to fit the way the web is being used. Applications are

the main focus.

What’s new?– Tags

• Video• Audio• Canvas

Tags– Video Tag

• Show Video on webpage without other application

• Renders on an iPhone/ iPad • IE6-IE8 does not support the tag

Tags– Audio Tag

• Just like video, its an object on the page controlled with JavaScript.

Tags– Canvas Tag– 2D drawing and animations– Can draw on it using

JavaScript

Browsers– IE is 60% of all browsers– IE8 is 25% of all browsers (The

single most used IE browser)– Adoption of new browser

versions will improve.

Other Tags– Header– Footer– Article– Section– Navigation

Other Tags– Improve Indexing and

Accessibility by improving semantics of page elements

Tags– Form Tags

• Email• Calendar• Phone Numbers• Many more

Application Elements

– Progress Bar– Editable Areas

Application Awareness

– New APIs– Storage– Offline applications

DOM(Document Object Model)

– Version of site that lives in CPU Memory, and determines page interaction.

DOM

– HTML 4 DOM was an add-on, HTML5 DOM is inherent in the script with outlined functionality

Application Awareness

– New APIs– Storage– Offline applications

StorageSave a file and database

on users client. Enables offline applications w/out

secondary technology

Offline Applications

Think about email, calendars, or even lightweight games.

WebkitLayout engine for Safari and

Chrome Browsers.

It is portable to many other computing platforms.

Role of HTML5Not a Flash ReplacementNot CSS3 Not AJAX

HTML5 SitesAppleGoogleNewsweek

Have all changed DocType to HTML5

HTML5 DocTypeWill work in all browsers

MobileSmartphone browsers

(almost) across the board use WebKit, the most HTML5 ready browser at this time.

MobileIdeal target for offline

applications.HTML5 enables one

application to operate in the browser with saved state (offline).

MobileVideo tag supports the

decision to use HTML5 for mobile sub-sites.

Form TagNew form tags allow you to

serve the appropriate keypad based on form field. (phone format, .com for URL, etc.)

Form TagBrowsers are still catching up:

Firefox4 and IE9 should be supporting form tags.

LandscapeBrowsers will catch up, and

start to unlock the opportunities provided by HTML5

FrameworksFrameworks and CMS are

(mostly) not there to support the new tags, but developers are at work as we speak.

SummaryFor new web projects, you

will be “future proofing” your website.

Find Us:

ISITEDesign.com

@ISITE_Design

Thank youThank you to the entire ISITE

Design Front End Development team, specifically Christoph for putting this event together

QuestionsThe next 12 min. will be

dedicated to QA.

Q/A Schedule– 21:00 Preserved State: Native vs.

web app. debate – 23:50 Encoding types and

Streaming Support – 24:45 Audio/Video File Reference

Find Us:

ISITEDesign.com

@ISITE_Design

Q/A Schedule– 21:00 Preserved State: Native vs.

web app. debate – 23:50 Encoding types and

Streaming Support – 24:45 Audio/Video File Reference

Find Us:

ISITEDesign.com

@ISITE_Design