#1 - HTML5 Overview

Tecniche di animazione
digitale I

Michele Bertoli
Founder / Lead Software Engineer at Igloo

igloolab.com
michele.bertoli@accademiasantagiulia.it

Agenda

How "internet" works 5

HTML5 overview 7

Browser support 23

Tools 30

Shims and Polyfills 35

Semantic tags 42

4
Basic / Agenda

How "internet" works

6
Basic / HTML5 overview

Introduction

HyperText Markup Language is the core
technology of the World Wide Web.

With HTML, authors describe the structure of
Web pages using markup tags.

8

Introduction

• Web applications oriented.
• Improves interoperability.
• Adds syntactic and semantic
features.

9

History

10

History

• 2004 WHATWG is born (with members fro Apple, the Mozilla
Foundation and Opera Software).
• 2007 W3C announces it will work with WHATWG.
• 2008 First version of HTML5 is published.
• 2008 Firefox 3 becomes HTML5 compatible.
• 2010 Youtube offers HTML5 video player.
• 2010 Steve Jobs "trashes" Flash in an open letter.

11

Future

• 2012 Candidate recommendation.
• 2013 Last call for review.
• 2014 Recommendation.

12

Features

Doctype
HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 5

<!DOCTYPE html>

13

Features
Semantic tags

<header>

<nav>

<section> <aside>

<article>

<footer>

14

Features

Media elements

<audio>

<video>

15

Features
Geolocation

jobberone.com

16

Features
Canvas

A world of HyperlinkTweets

17

Features

Input types Form validation
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

3
18

Features

Draggable & FileReader

jQuery HTML5 Uploader

19

Features

Offline applications

• LocalStorage
• Appcache

20

Features

Web Sockets
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
exampleSocket.onopen = function (event) {
exampleSocket.send("Here's some text that the server is urgently awaiting!");
};

21

Samples

• http://www.apple.com/html5
• http://www.youtube.com/html5
• https://developers.facebook.com/html5

22

Introduction

Browser compatibility
The ability of a Web browser to effectively
display the HTML code and execute the scripts
on Web pages.

24
Basic / Browser support

History

The Evolution of Web Browsers

• 1992 Mosaic.
• 1994 NetScape and Opera.
• 1995 Internet Explorer.
• 2002 Safari.
• 2004 Firefox.
• 2008 Chrome.

25

Today

StatCounter

26

HTML5 Support

HTML5 & CSS3 Support

27

Samples

• http://browsershots.org
• https://browserlab.adobe.com
• http://www.browserstack.com

28

Can I Use

Compatibility tables for support of HTML5,
CSS3, SVG and more in desktop and mobile
browsers.

http://caniuse.com

31
Basic / Tools

Samples

http://caniuse.com/#feat=offline-apps

32
Basic / Tools

Modernizr

Modernizr is a JavaScript library that detects
HTML5 and CSS3 features in the user’s
browser.

http://modernizr.com/

33
Basic / Tools

Samples

Usage Implementation

if (Modernizr.localstorage) { Modernizr.addTest('localstorage', function() {
// window.localStorage is available! var mod = 'modernizr';
} else { try {
// no native support for local storage :( localStorage.setItem(mod, mod);
// maybe try Gears or another third-party localStorage.removeItem(mod);
solution return true;
} } catch(e) {
return false;
}
});

34
Basic / Tools

Shims

A shim is a library that brings a new API to an
older environment, using only the means of that
environment.

36
Basic / Shims and polyfills

Samples

HTML5Shiv



37

Polyfills

A polyfill is a piece of code (or plugin) that
provides the technology that you, the
developer, expect the browser to provide
natively. Flattening the API landscape if you
will.

38
Basic / Tools

Samples

• http://lea.verou.me/polyfills/progress/

39
Basic / Tools

Yeponope

Yepnope is an asynchronous conditional
resource loader that's super-fast, and allows
you to load only the scripts that your users
need.

40
Basic / Tools

Samples

yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyﬁll.js', 'wrapper.js']
});

41

<article>
The article element represents a self-contained
composition in a document, page, application,
or site and that is, in principle, independently
distributable or reusable, e.g. in syndication.
This could be a forum post, a magazine or
newspaper article, a blog entry, a usersubmitted
comment, an interactive widget or
gadget, or any other independent item of
content.

43
Basic / Semantic tags

<section>

The section element represents a generic
section of a document or application.
A section, in this context, is a thematic grouping
of content, typically with a heading.

44

<nav>

The nav element represents a section of a
page that links to other pages or to parts within
the page: a section with navigation links.

45

<aside>

The aside element represents a section of a
page that consists of content that is tangentially
related to the content around the aside
element, and which could be considered
separate from that content.
Such sections are often represented as
sidebars in printed typography.

46

<header>

The header element represents a group of
introductory or navigational aids.

47

<footer>

The footer element represents a footer for its
nearest ancestor sectioning content or
sectioning root element.
A footer typically contains information about its
section such as who wrote it, links to related
documents, copyright data, and the like.

48

Thank you

igloolab.com
michele.bertoli@accademiasantagiulia.it

#1 - HTML5 Overview

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to #1 - HTML5 Overview

Similar to #1 - HTML5 Overview (20)

Recently uploaded

Recently uploaded (20)

#1 - HTML5 Overview