1

HTML5 technologies

Ework Stockholm 2012-03-15

Olle Olsson World Wide Web Consortium (W3C) Swedish Institute of Computer Science (SICS)

HTML5 technologies (Ework) 1/53 Olle Olsson

2

Contents ● Web platform: technology, standards, standardization ● CSS3 ● What's new? ● HTML5 ● What's new? ● Complementary technologies ● Examples

file:///C:/Documents%20and%20Settings/olleo/Skrivbord/G-processes/w3c/demos/%C3%ADndex.

HTML5 technologies (Ework) 2/53 Olle Olsson 3 What's the future? ● Web 1.0 – HTML & HTTP ● Access to contents; ... ● Web 2.0 – Ajax ● Create content; interactivity; ... ● Web X.0 {X > 2} – Web platform ● Devices; … ● Web of Data ● Web of Interaction ● Web of Applications

HTML5 technologies (Ework) 3/53 Olle Olsson

4 Web platform – main drivers ● Economic: infrastructure investment; cost-effective creation/construction; ... ● Reach: usable everywhere; ... ● Stable: works today and tomorrow; ... and ... ● New platforms: mobile; embedded; … ● Expectations: user experience; technology up-take ● Competition: technology control; proprietary, ...

HTML5 technologies (Ework) 4/53 Olle Olsson 5 The Next Open Web Platform

● HTML 5 ● Indexed Database ● CSS 2.1 ● Web Workers ● CSS 3 Selectors ● Web Sockets Protocol/API ● CSS 3 Media Queries ● Geolocation ● CSS 3 Text ● Server-Sent Events ● CSS 3 Backgrounds and Borders ● Element Traversal ● CSS 3 Colors ● DOM Level 3 Events ● CSS 3 2D Transformations ● Media Fragments ● CSS 3 3D Transformations ● XMLHttpRequest ● CSS 3 Transitions ● Selectors API ● CSS 3 Animations ● CSSOM View Module ● CSS 3 Multi-Columns ● File API ● CSS Namespaces ● RDFa ● SVG 1.1 ● Microdata ● WAI-ARIA 1.0 ● WOFF ● MathML 2.0 ● HTTP 1.1 part 1 to part 7 ● ECMAScript 5 ● TLS 1.2 (updated) ● 2D Context ● IRI (updated) ● WebGL ● ... ●

HTML5 technologies (Ework) 5/53 Olle Olsson

6 Web Platform and the HTML5 space ● HTML5 in the narrow sense ● The specification titled “HTML5” – HTML & XHTML ! ● HTML5 in the wider sense – “Open Web Platform” ● The HTML5 language as framework ● CSS2/CSS3, SVG, MathML ● Additional specialised technologies ● Storage, threads, fonts, geolocation, ... ● Perspectives from different roles: ● User ● Author ● Implementor ● Specifier

HTML5 technologies (Ework) 6/53 Olle Olsson 7

“A Word from our Sponsor”

HTML5 technologies (Ework) 7/53 Olle Olsson

8 World Wide Web Consortium (W3C) ● W3C (World Wide Web Consortium) ● The web standards organization Consortium

● Consortium 350 member organisations ● Founded 1994 ● Creating web standards (“W3C Recommendations”) ● HTML, CSS, SVG, RDF, PNG, MathML, XML, WCAG, EXI…

HTML5 technologies (Ework) 8/53 Olle Olsson 9 Open standardisation process ● Requirements driven and needs driven ● Use cases, business needs, … ● Proposals exposed to the world ● Comments and feedbacks incorporated ● HTML Working Group handles work on HTML5 ● … in collaboration with WHATWG ● Done as collaboration between IT companies ● Consensus in working group ● Stakeholders are driving it ● Drivers: market; use; and technology

HTML5 technologies (Ework) 9/53 Olle Olsson

10 Challenges to standardisation ● Compatibility between standards ● Combining web technologies ● Combining standards ● HTML + CSS; HTML + MathML; XHTML + Xquery; … ● Compatibility across generations of a standard ● Keep old stuff? How to shape new stuff? ● HTML 3 => HTML 4 => HTML 4.01 => HTML 5

● HTML5 defined to: ● integrate other standards ● be ”backwards compatible” & tolerant

HTML5 technologies (Ework) 10/53 Olle Olsson 11

CSS / CSS3

HTML5 technologies (Ework) 11/53 Olle Olsson

12 CSS – the big picture

HTML5 technologies (Ework) 12/53 Olle Olsson 13 CSS state: Stable & proven Stable & proven ● CSS level 1 ● Selectors ● ...

HTML5 technologies (Ework) 13/53 Olle Olsson

14 CSS state: Stable & implementing Stable & being implemented – examples ● CSS level 2 ● CSS Namespaces ● CSS Backgrounds and Borders ● CSS Multicolumn Layout ● Paged Media ● Color ● Media Queries ● Mobile Profile

HTML5 technologies (Ework) 14/53 Olle Olsson 15 CSS state: Almost stable Almost stable – examples ● Template Layout ● 2D Transformations ● Transitions ● ...

HTML5 technologies (Ework) 15/53 Olle Olsson

16 CSS state: Not stable Not stable ● Tables, Lists, Positioning, Generated & Replaced Content, Image Values, 3D Transformations, Fonts, Text Layout…

… apart from the properties that already in level 2

HTML5 technologies (Ework) 16/53 Olle Olsson 17 CSS 3 Selectors ● :first-child, :last-child, :nth-child(3), :nth-child(odd)

Date Description Depositption Transfer Withdrawal Balance 10/08/2004 Restaurant Expenses:Foods 38.14 440.67 10/10/2004 Market Expenses:Groceries 123.14 317.53

10/11/2004 Gas Expenses:Car 40.00 277.53 10/12/2004 Payroll Income:Salary 2,000.00 2277.53

10/12/2004 Home depot Expenses:House 41.14 2236.39 Supplies 10/14/2004 Dentist Expenses:Medical 166.20 2070.19 10/15/2004 Electricity Expenses:Utilities 27.88 2042.31 10/16/2004 Filene's Expenses:Grooming 31.93 2010.38 Basement

HTML5 technologies (Ework) 17/53 Olle Olsson

18 CSS3 Borders

HTML5 technologies (Ework) 18/53 Olle Olsson 19 CSS Media Queries

css" />

HTML5 technologies (Ework) 19/53 Olle Olsson

20 CSS Examples Simple illustrations ● Background, borders … visual decorations ● Media queries … adapting to screen ● Transitions/hover ... dynamic behavior

HTML5 technologies (Ework) 20/53 Olle Olsson 21

HTML5

HTML5 technologies (Ework) 21/53 Olle Olsson

22 HTML 5: Quick history ● 2004: ● , , and Apple creates the WHAT WG (Web Hypertext Application Technology Working Group) ● 2007: ● W3C restarts the HTML Working Group ● 2008: ● January: First Public Working Draft ● 2010: ● Apple, Google, Mozilla, Microsoft, and Opera (and others) are implementing, or are committed to, HTML 5 ● 2014 ● Q2: Plan for publication as W3C Recommendation

HTML5 technologies (Ework) 22/53 Olle Olsson 23 HTML5 – approach ● Principle: correct HTML4 pages remain correct ● Goal: many incorrect pages still work, too ● New elements ● New attributes

HTML5 technologies (Ework) 23/53 Olle Olsson

24 HTML 5: HTML or XML? ● Two serializations ● HTML serialization (text/html) ● XML serialization (application/+) ● Incorporates SVG and MathML ● Incorporates DOM Core and DOM HTML

HTML5 technologies (Ework) 24/53 Olle Olsson 25 The HTML5 specification

HTML5 technologies (Ework) 25/53 Olle Olsson

26 New elements - structure

● section: generic document or application section.

● article: independent piece of content of a document.

● aside: content that is only slightly related to the rest of the page.

● hgroup: header of a section.

● header: group of introductory or navigational aids.

● footer: footer for a section.

● nav: section of the document intended for navigation.

● figure self-contained flow content.

● figcaption: caption´..

HTML5 technologies (Ework) 26/53 Olle Olsson 27 New elements – other 1/2

● video and audio

● track: text tracks for the video element.

● embed: plugin content.

● mark: marked or highlighted text.

● progress: completion of a task (downloading, ...).

● meter: measurement (disk usage, ...).

● time: date and/or time.

● ruby, rt, rp: ruby annotations.

● bdi: bidirectional text formatting.

HTML5 technologies (Ework) 27/53 Olle Olsson

28 New elements – other 2/2

● wbr: line break opportunity.

● canvas: dynamic bitmap graphics.

● command: command the user can invoke.

● details: additional information to user.

● datalist: data for comboboxes.

● keygen: key pair generation.

● output: output data (from scripts, ...).

HTML5 technologies (Ework) 28/53 Olle Olsson 29 New attributes … examples 1/2 ● ● – hint shown inside an empty input ● – allows to put element outside form ● ● – constraints ●

    – count down

    HTML5 technologies (Ework) 29/53 Olle Olsson

    30 New attributes … examples 2/2 ●