Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 and friends
CONTEXTUALISING THE NEW TECHNOLOGIES




Patrick H. Lauke / Institutional Web Managers Workshop IWMW2010...
Web Evangelist at Opera
...should I use HTML5 today?
http://www.flickr.com/photos/24374884@N08/4603715307/
HTML5 … without the hype?
history of HTML5
● 1999 HTML 4.01, 2000 XHTML 1.0
●
  2003 XForms specification > XML based
●
  Opera proof of concept: We...
2004 W3C focus on XHTML 2.0 and beyond...

           http://www.flickr.com/photos/craiga/17071467/
WHATWG
Web Hypertext Application Technology Working Group
2007 W3C HTML5 WG
“...extending the language to better
support Web applications [...] This puts
HTML in direct competition with other
techno...
HTML5 does not replace HTML 4.01
HTML5 has more bling!
HTML5 specification aimed
          at browser developers
(defines how browsers handle markup/code – no reverse engineerin...
HTML5 standardises current browser and
         authoring behaviour
            (e.g. “relaxed” coding rules)
HTML5
<!DOCTYPE html>
HTML5 brings new
markup elements and JavaScript APIs
new elements for more accurate semantics
Top 20 class names
   1. footer                                       11. button
   2. menu                               ...
Top 20 id names
    1. footer                                        11. search
   2. content                             ...
unambiguous and machine readable
...but what about current screenreaders?
current and old browsers “support” these
(although some need a little extra help)

header, footer, … { display: block; }
Internet Explorer needs extra training wheels
document.createElement('header');
document.createElement('footer');
…

http:...
improved forms
making common UI needs native
rich form elements – without JavaScript
<input   type=”date”>
<input   type=”time”>
<input   type=”month”>
<input   type=”...
type and attributes for built-in validation
(of course you should still validate on the server)

<input             … requ...
<video>
Adobe Flash currently most common
    video delivery mechanism
<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>...
<video src="video.webm"
  controls
  autoplay
  poster="poster.jpg"
  width="320" height="240">
    <a href="video.webm">D...
video as native object
● “plays nice” with rest of the page
●
  keyboard accessibility built-in
●
  API for controls:
    ...
video formats
   the big debate
MP4 / H.264




ubiquitous, patent encumbered, licensing/royalties
Ogg Theora




“free and open”, no licensing/royalties
not many tools for it, not web optimised
WebM




  open and royalty-free, web optimised
support by software and hardware vendors
providing multiple sources
<video controls autoplay poster="…" width="…" height="…">
   <source src="movie.webm" type="vid...
audio exactly the same as video
<audio src=”music.mp3” controls autoplay></audio>

[...]

<audio controls autoplay>
   <so...
<canvas>
canvas = “scriptable images”

<canvas width="…" height="…"></canvas>
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPat...
Demos:
http://alteredqualia.com/canvasmol/
http://dwpe.googlecode.com/svn/trunk/charting/index.html
canvas accessibility concerns
video, audio and canvas on any device
           without plugins
         (Java / Flash / Silverlight not ubiquitous)
HTML5 (and friends) has
lots more APIs for developers
       (for powerful client-side apps)
isgeolocationpartofhtml5.com
geolocation
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, ...
offline detection...
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function...
is it all safe to use, right now?
don't do browser sniffing



      http://www.flickr.com/photos/timdorr/2096272747/
feature-detection
progressive enhancement, graceful degradation – or use shims
                   http://diveintohtml5.org...
HTML5 as Flashkiller?
not a question of HTML5 replacing Flash...
giving developers a choice!
...should I use HTML5 today?
www.opera.com/developer
people.opera.com/patrickl/presentations/iwmw2010_13.07.2010/iwmw2010_13.07.2010.pdf
              ...
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
<video src="video.webm" controls autoplay poster="poster.jpg"
Upcoming SlideShare
Loading in …5
×

<video src="video.webm" controls autoplay poster="poster.jpg" HTML5 and friends - Institutional Web Management Workshop 2010

8,967 views

Published on

<video src="video.webm"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.webm">Download movie</a>
</video>

Published in: Education, Technology
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×