SlideShare a Scribd company logo
1 of 101
html5
medianet vlaanderen




      VRT-medialab

                  1
html5 an introduction
html5 an introduction
html5 an introduction
no specs
html5 an introduction
html5 an introduction
“In three years
time, desktops will
be irrelevant”




                      7
html5 an introduction
html5 an introduction
html5 an introduction
html5 an introduction
html5 an introduction
no jihad
˜




html5 in 5 minutes




  13
<!-- HTML 4.01 / XHTML doctype and
meta -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<head>
 <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8">
 <meta http-equiv="content-language"
 content="nl">
<!-- HTML5 doctype and meta -->



<!DOCTYPE html>
<html lang='nl'>
<head>
 <meta charset='utf-8'>
<!-- #haml -->




  !!! 5
  %html{:lang => "nl"}
    %head
      %meta{:charset => "utf-8"}




tutorial
<!-- HTML 4.01 / XHTML type
attributes -->



<link rel="stylesheet" type="text/css"
href="style.css">
<!-- HTML5 type attributes -->




<link rel="stylesheet" href="style.css">
<!-- HTML 4.01 / XHTML -->
<script type="text/javascript"
src="application.js"></script>

<!-- HTML5 -->
<script src="application.js"></script>
<!-- HTML 4.01 / XHTML Mandatory
solidus (/>) -->




<img src="EddyVanHalen.jpg"
alt="Eddie!" />
<!-- HTML5 Optional solidus (/>) -->




<img src="EddyVanHalen.jpg"
alt="Eddie!">
<!-- HTML5 Simplified syntax -->


• !DOCTYPE
• Character encoding
• type attributes
• Optional solidus (/>)
<!-- HTML5 links on steroids -->



<a href="/programs/
deSlimsteMens/">
 <h1>De Slimste mens</h1>
 <p>met Hendrik Dacquin</p>
</a>
But who can read this?



          24
Compatible
  100%




      25
http://ishtml5readyyet.com/
html5 an introduction
Incompatible          Compatible




                              Compatible
                                46%
         Incompatible
             54%




source                   28
46% of the pie is eaten
HTML5 incompatible browsers         HTML5 compatible browsers


             FF < 3.5
               7%
                                                         chrome
                         IE6                               26%
                         16%
    IE8                               FF 3.5+
    47%                                46%


                        IE7                             Safari 3+
                        29%                     Opera     24%
                                                 4%




                               29
source
<!-- HTML5 input elements -->




<input type="email" placeholder="Jouw E-
mail adres" >
<input type="search" autofocus>
<!-- HTML5 input elements -->

<input
type="search"> for search boxes
<input
type="number"> for spinboxes
<input
type="range"> for sliders
<input
type="color"> for color pickers
<input
type="tel"> for telephone numbers
<input
type="url"> for web addresses
<input
type="email"> for email addresses
<input
type="date"> for calendar date pickers
<input
type="month"> for months
<input
type="week"> for weeks
<input
type="time"> for timestamps
<input
type="datetime"> for precise, absolute date+time stamps
html5 an introduction
<!-- HTML5 sectioning elements -->
<!-- HTML5 sectioning elements -->

<header> - <footer> - <nav>
<!-- HTML5 sectioning elements -->

<header> - <footer> - <nav>

<section> - <article> - <aside>
<!-- HTML5 sectioning elements -->

<header> - <footer> - <nav>

<section> - <article> - <aside>
…
<!-- HTML5 sectioning elements -->

<header> - <footer> - <nav>

<section> - <article> - <aside>
…

→ Semantic alternatives to divs in HTML 4.01
<!-- HTML5 sectioning elements -->

<header> - <footer> - <nav>

<section> - <article> - <aside>
…

→ Semantic alternatives to divs in HTML 4.01
<!-- HTML5 new inline elements -->
<!-- HTML5 new inline elements -->


<mark>
<!-- HTML5 new inline elements -->


<mark>
<time>
<!-- HTML5 new inline elements -->


<mark>
<time>

…
<!-- HTML5 new inline elements -->


<mark>
<time>

…

→ Semantic alternatives to spans in HTML 4.01
<!-- HTML5 new inline elements -->


<mark>
<time>

…

→ Semantic alternatives to spans in HTML 4.01
<!-- HTML5 interactive elements -->


<details>
 <summary>Angelina Ballerina</summary>
 <p>Tekenfilmreeks over een kleine muis die
graag prima ballerina wil worden.</p>
</details>
<!-- HTML5 interactive elements -->


<details open>
 <summary>Angelina Ballerina</summary>
 <p>Tekenfilmreeks over een kleine muis die
graag prima ballerina wil worden.</p>
</details>
<!-- Modernizr -->




Modernizr is a small JavaScript
library that detects the
availability of CSS3 and HTML5
˜




               html5
                 ~=
HTML + JS api + CSS3




   39
˜
                                        HTML
1.Semantics
(New tags, Link Relations, Microdata)


2.Accessibility
(ARIA roles)


3.Web Forms 2.0
(Input Fields)


4.Multimedia
(Audio Tag, Video Tag)


5.2D and 3D Drawing
(Canvas, WebGL, SVG)
                           40
˜
                                        HTML
1.Semantics
(New tags, Link Relations, Microdata)


2.Accessibility
(ARIA roles)


3.Web Forms 2.0
(Input Fields)


4.Multimedia
(Audio Tag, Video Tag)


5.2D and 3D Drawing
(Canvas, WebGL, SVG)
                           41
˜
                                             JS api
1.Client Side Storage
(Web SQL Database, App Cache, Web Storage)


2.Realtime Communication
(Web Sockets, Worker Workers)


3.Richer Experiences
(Notifications, Drag and Drop API)


4.Geolocation


                           42
˜
                                             JS api
1.Client Side Storage
(Web SQL Database, App Cache, Web Storage)


2.Realtime Communication
(Web Sockets, Worker Workers)


3.Richer Experiences
(Notifications, Drag and Drop API)


4.Geolocation


                           43
˜
                             CSS3
1.Typography
2.Visuals
3.Transitions, transforms and animations




                 44
˜
                             CSS3
1.Typography
2.Visuals
3.Transitions, transforms and animations




                 45
˜




     1. multimedia




46
<!-- HTML5 audio -->




<audio src="lamaSounds.mp3" autoplay>
</audio>
<!-- HTML5 audio -->




<audio src="lamaSounds.mp3" autoplay loop>
</audio>
<!-- HTML5 audio -->




<audio src="lamaSounds.mp3" autoplay loop
controls></audio>
<!-- HTML5 audio -->




<audio src="lamaSounds.mp3" id="player"
autoplay loop >
</audio>
<button
onclick="document.getElementById('player').pl
ay()">Play</button>
<!-- HTML5 audio -->




<audio src="lamaSounds.mp3" autoplay loop
preload="none">
</audio>
<!-- HTML5 audio formats -->




<audio controls>
 <source src="lamaSounds.ogg">
 <source src="lamaSounds.mp3">
</audio>
<!-- HTML5 audio fail back -->

<audio controls>

  <source src="lamaSounds.ogg" type="audio/ogg">

  <source src="lamaSounds.mp3" type="audio/mpeg">

  <object type="application/x-shockwave-flash"

  data="player.swf?soundFile=lamaSounds.mp3">

    <param name="movie"

    value="player.swf?soundFile=lamaSounds.mp3">

  </object>

  <p>Een lama babbelt (maar u hoort dit niet)</p>

</audio>
<!-- HTML5 video -->




<video src="lamaTheMovie.mp4" controls
width="360" height="240">
</video>
<!-- HTML5 video to be continued---
http://people.mozilla.com/~prouget/demos/
˜




2. 2D and 3D Drawing




  57
canvas

• 2D and 3D drawing platform within the browser
• Uses nothing more than JavaScript and HTML – no plugins
• Created by Apple for dashboard widgets
• Now part of the W3C spec
<!-- HTML5 canvas -->
html5 an introduction
html5 an introduction
source
source
source
source: http://localhost:8080/GwtQuake.html
canvas versus SVG



• Canvas is a bitmap system
  • Everything is drawn as a single, flat, picture
  • Changes require the whole picture to be redrawn
• SVG is a vector system
  • Elements to be drawn are separate DOM objects. They can
     be manipulated individually

  • not a part of HTML5
˜




3. real time communication




         67
web sockets

• Ajax - Timeout requests
• Comet - long polling
• Flash XMLSocket
• HTML5 web sockets
possible uses

• Realtime data - (charts, stocks, sports)
• Presence
• Collaboration
• Notifications
html5 an introduction
html5 an introduction
web sockets

• Part of html5
• Bi-directional communication between browser and server
• Works with proxies/firewalls
• low complexity, low latency
web sockets

• uses its own protocol (ws://)
• different headers
• Language support - libraries available for Ruby, Node.js,
   Erlang, PHP, Java, Python, etc.
<!-- HTML5 web sockets -->
browser support

• Chrome and WebKit support now
• Firefox 4.0 (released yesterday)
• Internet Explorer (partial support in IE 9)
• Fallback to Long polling
˜




         4. CSS3




76
CSS3
• rgba / hsla    • rounded corners
• gradients      • transitions
• shadows        • transforms
• multiple       • animation!
  backgrounds

• text strokes   • @font-face
                       77
<!-- CSS3 rgba   -->



div { background-color: rgb(255,0,0)}




div { background-color:
rgba(255,0,0,0.5);}
html5 an introduction
<!-- CSS3 fonts        -->



@font-face {
        font-family: 'MyFontFamily';
        src: url('Bebas.eot?') format('eot'),
             url('Bebas.woff') format('woff'),
             url('Bebas.ttf')  format('truetype'),
             url('Bebas.svg') format('svg');
}

h1 { font-family: bebas, sans-serif; }
<!-- CSS3 border radius/gradient -->

border-radius: 5px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #3475c4),
    color-stop(1, #3475c4)
    );
Browser Prefixes


Firefox: -moz-border-radius
Safari: -webkit-border-radius
Opera: -o-border-radius
IE: -ms-border-radius
html5 an introduction
better design tools
better design tools


             t e x t       s t r o k e s

             rounded corners
             transitions



                       transforms
better design tools

rgba / hsla
                           t e x t       s t r o k e s
gradients
                           rounded corners
shadows
                           transitions
multiple backgrounds
                                     transforms
  @font-face
questions?
• @studiomuscle
• hendrik.dacquin@vrtmedialab.be




                         85
resources
• http://apirocks.com/html5/
   html5.html#slide1

• http://html5doctor.com
• http://html5demos.com/
• http://diveintohtml5.org/
• http://validator.nu/?doc=http://
   blog.whatwg.org/whats-next-in-html-
   episode-

• http://html5watch.tumblr.com/
• http://dev.w3.org/html5/html-author/
• http://people.mozilla.com/~prouget/
   demos/


                                         86
demos
•   http://9elements.com/io/
    projects/html5/canvas/

•   http://html5demos.com/drag

•   http://bradshawenterprises.com/
    tests/formdemo.php

•   http://hummingbirdstats.com

•   http://pusherapp.com

•   http://speckyboy.com/
    2010/04/23/html5-video-
    libraries-toolkits-and-players/

                                      87

More Related Content

What's hot

Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Aaron Gustafson
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) betaKirk Yamamoto
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3Felipe Lavín
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sitesFelipe Lavín
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012steveheffernan
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 

What's hot (14)

Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]Web Standards: Fueling Innovation [Web Design World Boston '08]
Web Standards: Fueling Innovation [Web Design World Boston '08]
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
Ie9 dev overview (300) beta
Ie9 dev overview (300) betaIe9 dev overview (300) beta
Ie9 dev overview (300) beta
 
HTML 5 & CSS 3
HTML 5 & CSS 3HTML 5 & CSS 3
HTML 5 & CSS 3
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Even faster web sites presentation 3
Even faster web sites presentation 3Even faster web sites presentation 3
Even faster web sites presentation 3
 
Even faster web sites
Even faster web sitesEven faster web sites
Even faster web sites
 
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
 

Viewers also liked

Viewers also liked (7)

HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive DesignHTML5, CSS3 & Responsive Design
HTML5, CSS3 & Responsive Design
 
Migrate Your E-learning Courses to HTML5 The Right Way!
Migrate Your E-learning Courses to HTML5 The Right Way!Migrate Your E-learning Courses to HTML5 The Right Way!
Migrate Your E-learning Courses to HTML5 The Right Way!
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 

Similar to html5 an introduction

Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Brian Moon
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyonddynamis
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5dynamis
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Mandakini Kumari
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介yoshikawa_t
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 RefresherIvano Malavolta
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 

Similar to html5 an introduction (20)

Ease into HTML5 and CSS3
Ease into HTML5 and CSS3Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Html5 and css3
Html5 and css3Html5 and css3
Html5 and css3
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
HTML5 and Beyond
HTML5 and BeyondHTML5 and Beyond
HTML5 and Beyond
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Html 5
Html 5Html 5
Html 5
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 

More from vrt-medialab

Multischermenonderzoek
MultischermenonderzoekMultischermenonderzoek
Multischermenonderzoekvrt-medialab
 
Browser as a broadcast medium
Browser as a broadcast mediumBrowser as a broadcast medium
Browser as a broadcast mediumvrt-medialab
 
Taming your media chaos
Taming your media chaosTaming your media chaos
Taming your media chaosvrt-medialab
 
Presentatie iMinds MediaCRM
Presentatie iMinds MediaCRMPresentatie iMinds MediaCRM
Presentatie iMinds MediaCRMvrt-medialab
 
Evaluatiestudie VillaSquare
 Evaluatiestudie VillaSquare Evaluatiestudie VillaSquare
Evaluatiestudie VillaSquarevrt-medialab
 
iMinds VillaSquare evaluation IBBT-SMIT
iMinds VillaSquare evaluation IBBT-SMITiMinds VillaSquare evaluation IBBT-SMIT
iMinds VillaSquare evaluation IBBT-SMITvrt-medialab
 
Building second screen TV apps
Building second screen TV appsBuilding second screen TV apps
Building second screen TV appsvrt-medialab
 
Multischermenonderzoek
MultischermenonderzoekMultischermenonderzoek
Multischermenonderzoekvrt-medialab
 
Exploring your media with the Semantic Web
Exploring your media with the Semantic WebExploring your media with the Semantic Web
Exploring your media with the Semantic Webvrt-medialab
 
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRM
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRMBDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRM
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRMvrt-medialab
 
Champ belgian broadcast_days
Champ belgian broadcast_daysChamp belgian broadcast_days
Champ belgian broadcast_daysvrt-medialab
 
Champ Pitch Celtic-Plus Event 2011
Champ Pitch Celtic-Plus Event 2011Champ Pitch Celtic-Plus Event 2011
Champ Pitch Celtic-Plus Event 2011vrt-medialab
 
Boost your search with semantic technology
Boost your search with semantic technologyBoost your search with semantic technology
Boost your search with semantic technologyvrt-medialab
 
Media Square : platform for second screen experiences
Media Square : platform for second screen experiencesMedia Square : platform for second screen experiences
Media Square : platform for second screen experiencesvrt-medialab
 
MediaSquare - Check into your favourite media
MediaSquare - Check into your favourite mediaMediaSquare - Check into your favourite media
MediaSquare - Check into your favourite mediavrt-medialab
 
The media consumer
The media consumer The media consumer
The media consumer vrt-medialab
 

More from vrt-medialab (20)

Multischermenonderzoek
MultischermenonderzoekMultischermenonderzoek
Multischermenonderzoek
 
Browser as a broadcast medium
Browser as a broadcast mediumBrowser as a broadcast medium
Browser as a broadcast medium
 
Champ iMinds
Champ iMindsChamp iMinds
Champ iMinds
 
Taming your media chaos
Taming your media chaosTaming your media chaos
Taming your media chaos
 
Presentatie iMinds MediaCRM
Presentatie iMinds MediaCRMPresentatie iMinds MediaCRM
Presentatie iMinds MediaCRM
 
Evaluatiestudie VillaSquare
 Evaluatiestudie VillaSquare Evaluatiestudie VillaSquare
Evaluatiestudie VillaSquare
 
iMinds VillaSquare evaluation IBBT-SMIT
iMinds VillaSquare evaluation IBBT-SMITiMinds VillaSquare evaluation IBBT-SMIT
iMinds VillaSquare evaluation IBBT-SMIT
 
Building second screen TV apps
Building second screen TV appsBuilding second screen TV apps
Building second screen TV apps
 
Multischermenonderzoek
MultischermenonderzoekMultischermenonderzoek
Multischermenonderzoek
 
Exploring your media with the Semantic Web
Exploring your media with the Semantic WebExploring your media with the Semantic Web
Exploring your media with the Semantic Web
 
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRM
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRMBDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRM
BDMA workshop presentation - Using the Second Screen - MediaSquare - MediaCRM
 
Champ belgian broadcast_days
Champ belgian broadcast_daysChamp belgian broadcast_days
Champ belgian broadcast_days
 
Champ Pitch Celtic-Plus Event 2011
Champ Pitch Celtic-Plus Event 2011Champ Pitch Celtic-Plus Event 2011
Champ Pitch Celtic-Plus Event 2011
 
medialoep
medialoepmedialoep
medialoep
 
video for html5
video for html5video for html5
video for html5
 
Boost your search with semantic technology
Boost your search with semantic technologyBoost your search with semantic technology
Boost your search with semantic technology
 
Media Square : platform for second screen experiences
Media Square : platform for second screen experiencesMedia Square : platform for second screen experiences
Media Square : platform for second screen experiences
 
MediaSquare - Check into your favourite media
MediaSquare - Check into your favourite mediaMediaSquare - Check into your favourite media
MediaSquare - Check into your favourite media
 
Transmedia
TransmediaTransmedia
Transmedia
 
The media consumer
The media consumer The media consumer
The media consumer
 

Recently uploaded

AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 

Recently uploaded (20)

AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 

html5 an introduction

  • 1. html5 medianet vlaanderen VRT-medialab 1
  • 8. “In three years time, desktops will be irrelevant” 7
  • 15. ˜ html5 in 5 minutes 13
  • 16. <!-- HTML 4.01 / XHTML doctype and meta --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="nl">
  • 17. <!-- HTML5 doctype and meta --> <!DOCTYPE html> <html lang='nl'> <head> <meta charset='utf-8'>
  • 18. <!-- #haml --> !!! 5 %html{:lang => "nl"} %head %meta{:charset => "utf-8"} tutorial
  • 19. <!-- HTML 4.01 / XHTML type attributes --> <link rel="stylesheet" type="text/css" href="style.css">
  • 20. <!-- HTML5 type attributes --> <link rel="stylesheet" href="style.css">
  • 21. <!-- HTML 4.01 / XHTML --> <script type="text/javascript" src="application.js"></script> <!-- HTML5 --> <script src="application.js"></script>
  • 22. <!-- HTML 4.01 / XHTML Mandatory solidus (/>) --> <img src="EddyVanHalen.jpg" alt="Eddie!" />
  • 23. <!-- HTML5 Optional solidus (/>) --> <img src="EddyVanHalen.jpg" alt="Eddie!">
  • 24. <!-- HTML5 Simplified syntax --> • !DOCTYPE • Character encoding • type attributes • Optional solidus (/>)
  • 25. <!-- HTML5 links on steroids --> <a href="/programs/ deSlimsteMens/">  <h1>De Slimste mens</h1>  <p>met Hendrik Dacquin</p> </a>
  • 26. But who can read this? 24
  • 30. Incompatible Compatible Compatible 46% Incompatible 54% source 28
  • 31. 46% of the pie is eaten HTML5 incompatible browsers HTML5 compatible browsers FF < 3.5 7% chrome IE6 26% 16% IE8 FF 3.5+ 47% 46% IE7 Safari 3+ 29% Opera 24% 4% 29
  • 33. <!-- HTML5 input elements --> <input type="email" placeholder="Jouw E- mail adres" > <input type="search" autofocus>
  • 34. <!-- HTML5 input elements --> <input
type="search"> for search boxes <input
type="number"> for spinboxes <input
type="range"> for sliders <input
type="color"> for color pickers <input
type="tel"> for telephone numbers <input
type="url"> for web addresses <input
type="email"> for email addresses <input
type="date"> for calendar date pickers <input
type="month"> for months <input
type="week"> for weeks <input
type="time"> for timestamps <input
type="datetime"> for precise, absolute date+time stamps
  • 36. <!-- HTML5 sectioning elements -->
  • 37. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav>
  • 38. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside>
  • 39. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> …
  • 40. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
  • 41. <!-- HTML5 sectioning elements --> <header> - <footer> - <nav> <section> - <article> - <aside> … → Semantic alternatives to divs in HTML 4.01
  • 42. <!-- HTML5 new inline elements -->
  • 43. <!-- HTML5 new inline elements --> <mark>
  • 44. <!-- HTML5 new inline elements --> <mark> <time>
  • 45. <!-- HTML5 new inline elements --> <mark> <time> …
  • 46. <!-- HTML5 new inline elements --> <mark> <time> … → Semantic alternatives to spans in HTML 4.01
  • 47. <!-- HTML5 new inline elements --> <mark> <time> … → Semantic alternatives to spans in HTML 4.01
  • 48. <!-- HTML5 interactive elements --> <details> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
  • 49. <!-- HTML5 interactive elements --> <details open> <summary>Angelina Ballerina</summary> <p>Tekenfilmreeks over een kleine muis die graag prima ballerina wil worden.</p> </details>
  • 50. <!-- Modernizr --> Modernizr is a small JavaScript library that detects the availability of CSS3 and HTML5
  • 51. ˜ html5 ~= HTML + JS api + CSS3 39
  • 52. ˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 40
  • 53. ˜ HTML 1.Semantics (New tags, Link Relations, Microdata) 2.Accessibility (ARIA roles) 3.Web Forms 2.0 (Input Fields) 4.Multimedia (Audio Tag, Video Tag) 5.2D and 3D Drawing (Canvas, WebGL, SVG) 41
  • 54. ˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 42
  • 55. ˜ JS api 1.Client Side Storage (Web SQL Database, App Cache, Web Storage) 2.Realtime Communication (Web Sockets, Worker Workers) 3.Richer Experiences (Notifications, Drag and Drop API) 4.Geolocation 43
  • 56. ˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 44
  • 57. ˜ CSS3 1.Typography 2.Visuals 3.Transitions, transforms and animations 45
  • 58. ˜ 1. multimedia 46
  • 59. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay> </audio>
  • 60. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop> </audio>
  • 61. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop controls></audio>
  • 62. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" id="player" autoplay loop > </audio> <button onclick="document.getElementById('player').pl ay()">Play</button>
  • 63. <!-- HTML5 audio --> <audio src="lamaSounds.mp3" autoplay loop preload="none"> </audio>
  • 64. <!-- HTML5 audio formats --> <audio controls> <source src="lamaSounds.ogg"> <source src="lamaSounds.mp3"> </audio>
  • 65. <!-- HTML5 audio fail back --> <audio controls> <source src="lamaSounds.ogg" type="audio/ogg"> <source src="lamaSounds.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=lamaSounds.mp3"> <param name="movie" value="player.swf?soundFile=lamaSounds.mp3"> </object> <p>Een lama babbelt (maar u hoort dit niet)</p> </audio>
  • 66. <!-- HTML5 video --> <video src="lamaTheMovie.mp4" controls width="360" height="240"> </video>
  • 67. <!-- HTML5 video to be continued---
  • 69. ˜ 2. 2D and 3D Drawing 57
  • 70. canvas • 2D and 3D drawing platform within the browser • Uses nothing more than JavaScript and HTML – no plugins • Created by Apple for dashboard widgets • Now part of the W3C spec
  • 78. canvas versus SVG • Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn • SVG is a vector system • Elements to be drawn are separate DOM objects. They can be manipulated individually • not a part of HTML5
  • 79. ˜ 3. real time communication 67
  • 80. web sockets • Ajax - Timeout requests • Comet - long polling • Flash XMLSocket • HTML5 web sockets
  • 81. possible uses • Realtime data - (charts, stocks, sports) • Presence • Collaboration • Notifications
  • 84. web sockets • Part of html5 • Bi-directional communication between browser and server • Works with proxies/firewalls • low complexity, low latency
  • 85. web sockets • uses its own protocol (ws://) • different headers • Language support - libraries available for Ruby, Node.js, Erlang, PHP, Java, Python, etc.
  • 86. <!-- HTML5 web sockets -->
  • 87. browser support • Chrome and WebKit support now • Firefox 4.0 (released yesterday) • Internet Explorer (partial support in IE 9) • Fallback to Long polling
  • 88. ˜ 4. CSS3 76
  • 89. CSS3 • rgba / hsla • rounded corners • gradients • transitions • shadows • transforms • multiple • animation! backgrounds • text strokes • @font-face 77
  • 90. <!-- CSS3 rgba --> div { background-color: rgb(255,0,0)} div { background-color: rgba(255,0,0,0.5);}
  • 92. <!-- CSS3 fonts --> @font-face {         font-family: 'MyFontFamily';         src: url('Bebas.eot?') format('eot'),              url('Bebas.woff') format('woff'),              url('Bebas.ttf')  format('truetype'),              url('Bebas.svg') format('svg'); } h1 { font-family: bebas, sans-serif; }
  • 93. <!-- CSS3 border radius/gradient --> border-radius: 5px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #3475c4), color-stop(1, #3475c4) );
  • 94. Browser Prefixes Firefox: -moz-border-radius Safari: -webkit-border-radius Opera: -o-border-radius IE: -ms-border-radius
  • 97. better design tools t e x t s t r o k e s rounded corners transitions transforms
  • 98. better design tools rgba / hsla t e x t s t r o k e s gradients rounded corners shadows transitions multiple backgrounds transforms @font-face
  • 100. resources • http://apirocks.com/html5/ html5.html#slide1 • http://html5doctor.com • http://html5demos.com/ • http://diveintohtml5.org/ • http://validator.nu/?doc=http:// blog.whatwg.org/whats-next-in-html- episode- • http://html5watch.tumblr.com/ • http://dev.w3.org/html5/html-author/ • http://people.mozilla.com/~prouget/ demos/ 86
  • 101. demos • http://9elements.com/io/ projects/html5/canvas/ • http://html5demos.com/drag • http://bradshawenterprises.com/ tests/formdemo.php • http://hummingbirdstats.com • http://pusherapp.com • http://speckyboy.com/ 2010/04/23/html5-video- libraries-toolkits-and-players/ 87

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. t&amp;#x2019;s just not true. The 2022 date is for two complete implementations, something that has still not happened for HTML 4, XHTML 1.0 or XHTML 1.1. The dates to worry about are 2012 for a completed draft, and October 2009 for a working draftAlso as stated above, browser makers are already implementing some of the new parts of HTML 5, and the rest is backwards compatible.\n
  27. t&amp;#x2019;s just not true. The 2022 date is for two complete implementations, something that has still not happened for HTML 4, XHTML 1.0 or XHTML 1.1. The dates to worry about are 2012 for a completed draft, and October 2009 for a working draftAlso as stated above, browser makers are already implementing some of the new parts of HTML 5, and the rest is backwards compatible.\n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  35. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  36. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  37. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  38. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media\n
  39. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  40. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  41. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  42. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  43. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation\n
  44. The actual contents are hidden by default. You can use the open attribute to override this\n
  45. The actual contents are hidden by default. You can use the open attribute to override this\n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. The actual contents are hidden by default. You can use the open attribute to override this\n
  56. The actual contents are hidden by default. You can use the open attribute to override this\n
  57. The actual contents are hidden by default. You can use the open attribute to override this\n
  58. The actual contents are hidden by default. You can use the open attribute to override this\n
  59. The actual contents are hidden by default. You can use the open attribute to override this\n
  60. The actual contents are hidden by default. You can use the open attribute to override this\n
  61. The actual contents are hidden by default. You can use the open attribute to override this\n
  62. The actual contents are hidden by default. You can use the open attribute to override this\n
  63. The actual contents are hidden by default. You can use the open attribute to override this\n
  64. \n
  65. \n
  66. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  75. \n
  76. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  77. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  78. \n
  79. \n
  80. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  81. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  82. \n
  83. Long polling is a variation of the traditional polling technique and allows emulation of an information push from a server to a client. With long polling, the client requests information from the server in a similar way to a normal poll. However, if the server does not have any information available for the client, instead of sending an empty response, the server holds the request and waits for some information to be available. Once the information becomes available (or after a suitable timeout), a complete response is sent to the client.\n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. The actual contents are hidden by default. You can use the open attribute to override this\n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n