HTML5: what's new?

1,247 views

Published on

This talk covers new features of HTML5, such as semantic elements, forms, video, canvas, and offline applications. I discuss what the features allow you to do, why they are worth knowing about and how you can use them today. I delivered this to a class at Oxford Brookes university on the 25th March 2011.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,247
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5: what's new?

    1. 1. HTML5: Whats new? Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    2. 2. Who the hell am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web education‣ Drinking beer & saving the world before morning‣ Drumming in a heavy metal band
    3. 3. What is HTML5?A new HTML spec that defines:‣ New semantic elements‣ New features such as native video, more powerful forms, web sockets‣ New APIs for controlling such features‣ Error handling, and other such useful things
    4. 4. There’s nothing wrong withHTML4... http://www.flickr.com/photos/birdfarm/519230710/
    5. 5. But HTML5 has more bling As if! Not publishing this one...
    6. 6. HTML5 does not replaceHTML4‣ It’s backwards compatible‣ It fills up holes‣ It adds new markup and APIs‣ It competes with proprietary/plug-in technology
    7. 7. New syntax: bettersemantics http://www.flickr.com/photos/zscheyge/49012397/
    8. 8. HTML5 doctype<!doctype
html>
    9. 9. Typical website structure<div
id="header"></div><div
id="nav"></div><div
id="main">

<div
class="article"></div>

<div
class="article"></div>



...</div><div
id="footer"></div>
    10. 10. HTML5 update<header></header><nav></nav><section
id="main">

<article></article>

<article></article>



...</section><footer></footer>
    11. 11. <aside><aside>

<h2>About
the
author</h2>
 

<p>Chris
Mills
is
a
front‐end
bling
junkie




working
for
Opera
Software...</p></aside>
    12. 12. <time><p>Article
published
on
the


<time
datetime="2011‐03‐12T09:48">



12th
March
2011,
at
9:48am

</time></p>
    13. 13. <hgroup><hgroup>

<h1>Top
level
heading</h1>

<h2>This
is
a
really
descriptive
subtitle</h2></hgroup>
    14. 14. <figure> and <figcaption><figure>

<img
src="bear.jpg"






alt="this
is
the
bear
that
I
wrestled"
/>

<figcaption>This
is
the
bear
that
I

wrestled.</figcaption></figure>
    15. 15. Where does this leave thehumble <div>?Use it for anything that isn’t covered by other newelements, and is just a general grouping, e.g. forstyling purposes, for which you don’t want tocreate a new section. An intro <div>, perhaps?
    16. 16. Browsers don’t ACTUALLYsupport these ... yetBut we can get them displaying ok‣ You can style any element with CSS, even if the browser doesn’t recognise it‣ Give all the structural elements display:
block;‣ IE also needs some scripting: createElement(‘article’);‣ HTML5Shiv sorts it all out
    17. 17. New forms! http://www.flickr.com/photos/zscheyge/49012397/
    18. 18. HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation
    19. 19. New input types<input
type=range><input
type=date><input
type=number><input
type=color><input
type=search><input
type=email><input
type=url><input
type=tel>
    20. 20. Datalist<input
type="text"
list="mydata"><datalist
id="mydata">

<option
label="Mr"
value="Mister">

<option
label="Mrs"
value="Mistress">

<option
label="Ms"
value="Miss"></datalist>
    21. 21. ValidationForm validation used to be horrendous
    22. 22. 
var
elements
=
document.getElementsByTagName(input);



//
loop
through
all
input
elements
in
form

Who the hell wants to write
for(var
i
=
0;
i
<
elements.length;
i++)
{





//
check
if
element
is
mandatory;
ie
has
a
pattern





var
pattern
=
elements.item(i).getAttribute(pattern);

this??


if
(pattern
!=
null)
{






var
value
=
elements.item(i).value;







//
validate
the
value
of
this
element,
using
its
defined
pattern






var
offendingChar
=
value.match(pattern);







//
if
an
invalid
character
is
found
or
the
element
was
left
empty






if(offendingChar
!=
null
||
value.length
==
0)
{









//
add
up
all
error
messages








str
+=
elements.item(i).getAttribute(errorMsg)
+
"n"
+















"Found
this
illegal
value:
"
+
offendingChar
+
"
n";









//
notify
user
by
changing
background
color,
in
this
case
to
red








elements.item(i).style.background
=
"red";







}




}


}




if
(str
!=
"")
{




//
do
not
submit
the
form




alert("ERROR
ALERT!!n"
+str);





return
false;


    23. 23. HTML5 gives you this<input
type="text"
required>
    24. 24. And this<input
type="text"
required







pattern="[A‐z]{1,20}
[A‐z]{1,20}">
    25. 25. Other new attributesautofocusplaceholderminmaxstep
    26. 26. New output mechanisms<output><progress><meter>
    27. 27. <canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers
    28. 28. The basics<canvas
id="canvas"
width="400"
height="300">

...fallback...</canvas>
    29. 29. The basicsvar
ctx
=
document.getElementById(canvas).getContext(2d);ctx.fillStylectx.fillRect
    30. 30. <canvas> examples‣ http://dev.opera.com/articles/view/html-5- canvas-the-basics/‣ http://ejohn.org/blog/processingjs/‣ http://www.hakim.se/experiments/‣ http://www.canvasdemos.com/‣ http://people.opera.com/patrickl/experiments/ canvas/particle/3/
    31. 31. Video and audio! http://www.flickr.com/photos/zscheyge/49012397/
    32. 32. <video> and <audio>New elements, plus new API for controlling audioand video
    33. 33. The old school way<object
width="425"
height="344"><param
name="movie"

value="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"></param><param
name="allowFullScreen"
value="true"></param><embed
src="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"

type="application/x‐shockwave‐flash"

allowfullscreen="true"
width="425"
height="344"></embed></object>
    34. 34. The badass sexy new way<video
src="video.webm"






width="480px"






height="283px"






controls






poster="poster.png"></video>
    35. 35. Fallback<video
src="video.webm"






width="480px"






height="283px"






controls






poster="poster.png">

<p>Your
browser
doesn’t
support
HTML5
video.
<a
href="myVideo.webm">Download
the
video
instead</a>.</p></video>
    36. 36. Adding different formats<video
width="480px"






height="283px"






controls






poster="poster.png">

<source
src="video.mp4"
type="video/mp4">

<source
src="video.webm"
type="video/webm">

<p>Your
browser
doesn’t
support
HTML5
video.
<a
href="myVideo.webm">Download
the
video
instead</a>.</p></video>
    37. 37. Adding a Flash fallback<object
type="application/x‐shockwave‐flash"
data="player.swf"
width="480"
height="283">

<param
name="allowfullscreen"
value="true">

<param
name="allowscriptaccess"
value="always">

<param
name="flashvars"
value="file=video.mp4">


 


<!‐‐[if
IE]><param
name="movie"
value="player.swf"><![endif]‐‐>

<img
src="video.jpg"
width="480"
height="283"
alt="Video"></object>
    38. 38. Captioning advancements<track
src="sintel_en.srt"
kind="subtitles"
srclang="en"
label="English"
/><track
src="sintel_de.srt"
kind="subtitles"
srclang="de"
label="Deutsch"
/><track
src="sintel_es.srt"
kind="subtitles"
srclang="es"
label="Español"
/>
    39. 39. Going offline http://www.flickr.com/photos/zscheyge/49012397/
    40. 40. Offline apps!‣ Generally, the web doesnt work very well without a web connection!‣ What can we do about this?
    41. 41. Offline applications‣ AppCache: Save an offline version of your web page files and use those to display your web page when you lose network.‣ Web storage: Like cookies, but more powerful. Store things such as form data and user preferences‣ WebSQL: A fully-functioning database in your browser. Store a users data so they can continue working with it when the network goes down
    42. 42. Offline applications‣ For more information, check out http:// dev.opera.com/articles/view/taking-your-web- apps-offline-web-storage-appcache-websql/
    43. 43. And why is this all so goodagain? http://www.flickr.com/photos/zscheyge/49012397/
    44. 44. Better consistency‣ Better machine readability & interoperability: ‣ Easier syndication and reuse ‣ Less time worrying about design consistency ‣ Less time training up new team members‣ Defined error handling means things work more consistently, even if they are broken! ‣ Better cross browser apps ‣ Less time spent debugging
    45. 45. Better accessibility‣ For example, HTML5 video is keyboard accessible out of the box‣ New elements bringing consistency is also important here‣ Less time and money spent on accessibility‣ 1 in 5 people in the UK have some kind of disability - a market you can’t ignore
    46. 46. Less reliance on JavaScript‣ Less work for your developers to do, so faster implementation and prototyping‣ Less pain for designers and other less technical team members‣ Faster loading sites
    47. 47. Less reliance on Flash‣ Means less skills needed in the team‣ HTML5 plays nicer with the rest of the page; you can fill in any missing functionality with JS‣ Less Flash means better accessibility (note: there are some HTML5 accessibility gotchas, like Canvas)‣ Downloading a plugin breaks brand experience and can confuse users
    48. 48. HTML5 works on iDevices‣ Like iPad and iPhone‣ A crucial market to be in‣ Flash has not been allowed on these devices
    49. 49. Offline apps!‣ Never before possible...
    50. 50. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com

    ×