#1 - html5 overview
DESCRIPTION
- How "internet" works - HTML5 overview - Browser support - Tools - Shims and Polyfills - Semantic tagsTRANSCRIPT
Tecniche di animazionedigitale I
Michele BertoliFounder / Lead Software Engineer at Igloo
Basic 1November 21, 2012
How "internet" works
HTML5 overview
Browser support
Tools
Shims and Polyfills
Semantic tags
Agenda
Basic / Agenda
4
7
23
30
35
42
5
How "internet" works
Basic / HTML5 overview
How "internet" works
6
HTML5 overview
Basic / HTML5 overview
HyperText Markup Language is the core
technology of the World Wide Web.
With HTML, authors describe the structure of
Web pages using markup tags.
Introduction
8
• Web applications oriented.
• Improves interoperability.
• Adds syntactic and semantic
features.
Basic / HTML5 overview
9
Introduction
History
Basic / HTML5 overview
10
• 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.
History
Basic / HTML5 overview
11
• 2012 Candidate recommendation.
• 2013 Last call for review.
• 2014 Recommendation.
Future
Basic / HTML5 overview
12
<!DOCTYPE html>
HTML 5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
Doctype
Features
Basic / HTML5 overview
13
<header>
<nav>
<section>
<article>
<aside>
<footer>
Basic / HTML5 overview
14
Features
Semantic tags
<video>
<audio>
Media elements
Features
Basic / HTML5 overview
15
Geolocation
Features
Basic / HTML5 overview
16
jobberone.com
Features
Basic / HTML5 overview
17
Canvas
A world of HyperlinkTweets
Input types
Features
• color
• date
• datetime
• datetime-local
• month
• number
• range
• search
• tel
• time
• url
• week
Form validation
3Basic / HTML5 overview
18
Features
Draggable & FileReader
jQuery HTML5 Uploader
Basic / HTML5 overview
19
• LocalStorage
• Appcache
Features
Offline applications
Basic / HTML5 overview
20
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!"); };
Features
Basic / HTML5 overview
21
Web Sockets
Samples
• http://www.apple.com/html5
• http://www.youtube.com/html5
• https://developers.facebook.com/html5
Basic / HTML5 overview
22
Browser support
Browser compatibility
The ability of a Web browser to effectively
display the HTML code and execute the scripts
on Web pages.
Introduction
Basic / Browser support
24
• 1992 Mosaic.
• 1994 NetScape and Opera.
• 1995 Internet Explorer.
• 2002 Safari.
• 2004 Firefox.
• 2008 Chrome.
History
The Evolution of Web Browsers
Basic / Browser support
25
Today
StatCounter
Basic / Browser support
26
HTML5 Support
HTML5 & CSS3 Support
Basic / Browser support
27
Samples
• http://browsershots.org
• https://browserlab.adobe.com
• http://www.browserstack.com
Basic / Browser support
28
15 MINUTI DI PAUSA
Tools
Compatibility tables for support of HTML5,
CSS3, SVG and more in desktop and mobile
browsers.
http://caniuse.com
Can I Use
Basic / Tools
31
http://caniuse.com/#feat=offline-apps
Samples
Basic / Tools
32
Modernizr is a JavaScript library that detects
HTML5 and CSS3 features in the user’sbrowser.
http://modernizr.com/
Modernizr
Basic / Tools
33
if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for local storage :( // maybe try Gears or another third-party solution }
Usage
Samples
Modernizr.addTest('localstorage', function() { var mod = 'modernizr'; try { localStorage.setItem(mod, mod); localStorage.removeItem(mod); return true; } catch(e) { return false; } });
Implementation
Basic / Tools
34
Shims and polyfills
A shim is a library that brings a new API to an
older environment, using only the means of that
environment.
Shims
Basic / Shims and polyfills
36
<!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]-->
HTML5Shiv
Samples
Basic / Shims and polyfills
37
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.
Polyfills
Basic / Tools
38
Samples
Basic / Tools
39
• http://lea.verou.me/polyfills/progress/
Yepnope is an asynchronous conditional
resource loader that's super-fast, and allows
you to load only the scripts that your users
need.
Yeponope
Basic / Tools
40
yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] });
Samples
Basic / Shims and polyfills
41
Semantic tags
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.
<article>
Basic / Semantic tags
43
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.
<section>
Basic / Semantic tags
44
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.
<nav>
Basic / Semantic tags
45
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.
<aside>
Basic / Semantic tags
46
The header element represents a group of
introductory or navigational aids.
<header>
Basic / Semantic tags
47
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.
<footer>
Basic / Semantic tags
48
