29/04/2011
HTML 5 – Part I Introduction, structure and semantics
Laura Farinetti Dipartimento di Automatica e Informatica Politecnico di Torino [email protected]
1
HTML 5 HTML5 is the next major revision of the HTML standard, currently under development ◦ Working Draft, April 5th 2011 Work on the specifications started in June 2004 Currently being carried out in a joint effort between the W3C HTML WG and the WHATWG (Hypertext Application Technology Working Group ) Not jet standard (until 2022?), but parts are going to be implemented by browsers
2
1 29/04/2011
HTML 5
“HTML5 will reach the Proposed Recommendation stage sometime in 2022.” ◦ Ian Hickson, editor of the HTML5 specification However, parts of specification are going to be implemented by browsers ◦ The latest versions of Safari, Chrome, Firefox, and Opera support some HTML5 features ◦ Internet Explorer 9 supports some HTML5 features
3
Supported features
4
2 29/04/2011
The HTML5 test
How well does your browser support HTML5? ◦ http://html5test.com/
Mozilla Firefox 3.6.13
Opera 11.0
5
The HTML5 test
How well does your browser support HTML5? ◦ http://html5test.com/
Internet Explorer 8.0
6
3 29/04/2011
Rough timeline of web technologies
1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5
7
HTML 5
HTML5 ~= HTML + CSS + JS API
8
4 29/04/2011
Rationale
“This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. This specification is intended to replace (be a new version of) what was previously the HTML4, XHTML 1.0, and DOM2 HTML specifications.” Specifications in A4 format: 690 pages (~War and Peace by Leo Tolstoy) 9
Hand-made code?
NO Use a framework/library... ◦ SproutCore http://www.sproutcore.com/ ◦ Modernizr http://www.modernizr.com/ ◦ HTML5 shiv http://html5shiv.googlecode.com ◦ ExplorerCanvas http://excanvas.sourceforge.net/ ◦ More to come…
10
5 29/04/2011
New features
The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, email, url, search
11
New elements
HTML 4.01 obsolete or never used elements are deleted or re-written New elements for better structure, drawing, media content, and better form handling are included, to better reflect today‟s internet use
12
6 29/04/2011
What‟s new in HTML5
13
What‟s new in HTML5
Many pieces of the HTML5 effort (e.g. Local Storage, WebSocket, and Geolocation) were originally part of the HTML5 specification Moved to a separate standards document to keep the specification focused Industry still refers to the original set of features, including Web Sockets, as “HTML5”
14
7 29/04/2011
What‟s new in HTML5
Doctype Structural elements Web forms
15
Doctype and less header code
HTML 4
HTML 5
8 29/04/2011
New tags in HTML5
17
Removed tags in HTML5
18
9 29/04/2011
Structural elements
Layout ◦
19
Layout: more semantic HTML tags
HTML 4
20
10 29/04/2011
Layout: more semantic HTML tags
HTML 5
21
Structural elements
22
11 29/04/2011
Structural elements
Structural elements
24
12 29/04/2011
25
26
13 29/04/2011
Figure and figure caption
In listing 4 we see the primary core interface API declaration.
interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence<byte> data); void initSelfDestruct(); }Time and publishdate attribute
28
14 29/04/2011
Summary: new markup elements
29
Summary: new markup elements
30
15 29/04/2011
Ruby annotations
Short runs of text alongside the base text, typically used in East Asian documents to indicate pronunciation or to provide a short annotation
31
HTML5 forms
Formerly called Web Forms 2.0 Native functionality (no scripting for validation) ◦ Means less coding New form functionalities ◦ Date and color pickers ◦ Search, e-mail, web address input types ◦ Validation ◦ Spin boxes and sliders Backward compatible ◦ Features degrade gracefully (unknown input types are treated as text-type) input
32
16 29/04/2011
HTML5 forms
New input types
Date pickers
New elements New attributes 33
New input types
Allow for better input control and validation If not supported, they will behave as regular text fields
34
17 29/04/2011
email input type
Si prega di inserire un indirizzo email valido
The value of the email field is automatically validated when the form is submitted
35
url input type
Si prega di inserire un indirizzo web valido
The value of the url field is automatically validated when the form is submitted
36
18 29/04/2011
number input type
Restrictions on which numbers are accepted
37
Restrictions on type number
38
19 29/04/2011
range input type
Opera Firefox
39
Input type - date pickers
New input types for selecting date and time ◦ date - selects date, month and year ◦ month - selects month and year ◦ week - selects week and year ◦ time - selects time (hour and minute) ◦ datetime - selects time, date, month and year (UTC time) ◦ datetime-local - selects time, date, month and year (local time)
40
20 29/04/2011
Date pickers
41
color input type
42
21 29/04/2011
New form elements
Browser support
43
datalist element Specifies a list of options for an input field ◦ To bind a datalist to an input field, the list attribute of the input field refers to the id of the datalist
44
22 29/04/2011
keygen element
Purpose: to provide a secure way to authenticate users It is a key-pair generator ◦ When a form is submitted, two keys are generated, one private and one public The private key is stored on the client, and the public key is sent to the server The public key could be used to generate a client certificate to authenticate the user in the future Currently, the browser support for this element is not good enough to be a useful security standard
45
keygen element
46
23 29/04/2011
Public-key cryptography Widely used set of methods for transforming a written message into a form that can be read only by the intended recipient This cryptographic approach involves the use of asymmetric key algorithms ◦ The non-message information (the public key) needed to transform the message to a secure form is different from the information needed to reverse the process (the private key) An unpredictable (typically large and random) number is used to begin generation of an acceptable pair of keys suitable for use by an asymmetric key algorithm
47
Symmetric-key algorithm
Use trivially related, often identical, cryptographic keys for both decryption and encryption
48
24 29/04/2011
Public-key cryptography
In an asymmetric key encryption scheme, anyone can encrypt messages using the public key, but only the holder of the paired private key can decrypt Security depends on the secrecy of that private key
49
Public-key cryptography
In some related signature schemes, the private key is used to sign a message Anyone can check the signature using the public key
50
25 29/04/2011
Public-key cryptography
After obtaining an authentic copy of each other‟s public keys, Alice and Bob can compute a shared secret offline The shared secret can be used as the key for a symmetric cipher
51
output element Used for different types of output, like calculations or script output
Simple calculator using the output element:
5226 29/04/2011
New form attributes
53
New form attributes
autocomplete attribute
Fill in and submit the form, then reload the page to see how autocomplete works.
Notice that autocomplete is "on" for the form, but "off" for the e-mail field.
54
27 29/04/2011
New form attributes
autofocus attribute ◦ specifies that a field should automatically get focus when a page is loaded
55
New form attributes
form attribute ◦ specifies one or more forms the input field belongs to
The input field below is outside the form element, but still part of the form.
Last name:56
28 29/04/2011
New form attributes
multiple attribute ◦ specifies that multiple values can be selected for an input field form attribute
Try selecting more than one file when browsing for files.
57
New form attributes
required attribute ◦ specifies that an input field must be filled out before submitting
Questo campo è obbligatorio
58
29 29/04/2011
New form attributes
pattern attribute ◦ specifies a pattern used to validate an input field ◦ a pattern is a regular expression
Si prega di utilizzare il formato richiesto Three letters country code
59
Patterns Regular expressions E.g. valid e-mail address: ^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$ RFC 2822: official standard (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0- 9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e- \x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01- \x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9- ]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0- 9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0- 9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0- 9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e- \x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e- \x7f])+)\])
60
30 29/04/2011
Regular expressions
^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$
^[a-zA-Z0-9._-]+ ◦ The email address must begin with alpha-numeric characters (both lowercase and uppercase characters are allowed): it may have periods, underscores and hyphens @ ◦ There must be a „@‟ symbol after initial characters [a-zA-Z0-9.-]+ ◦ After the „@‟ sign there must be some alpha-numeric characters; it can also contain period and and hyphens \. ◦ After the second group of characters there must be a period („.‟); this is to separate domain and subdomain names. [a-zA-Z]{2,4}$ ◦ Finally, the email address must end with two to four alphabets; {2,4} indicates the minimum and maximum number of characters
61
Examples of e-mail patterns
[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+ (?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)* @(?:[a-zA-Z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+ [a-z0-9](?:[a-z0-9-]*[a-z0-9])?
[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+ (?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)* @(?:[a-zA-Z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+ (?:[a-zA-Z]{2}|com|org|net|edu|gov|mil|biz| info|mobi|name|aero|asia|jobs|museum)\b
62
31 29/04/2011
Regular expression basic syntax Characters
63
Regular expression basic syntax Character classes or character sets [abc]
64
32 29/04/2011
Regular expression basic syntax
Character classes or character sets [abc]
Dot
65
Regular expression basic syntax Anchors
66
33 29/04/2011
Regular expression basic syntax
Word boundaries
Alternation
67
Regular expression basic syntax Quantifiers
68
34 29/04/2011
Regular expression basic syntax Quantifiers
69
Summary of browser support
Mozilla Firefox 3.6.13 Opera
70
35