Your SlideShare is downloading. ×
0
HTML5: A richer web   for everyone   Chris Mills, Opera Software            Slides available on http://slideshare.net/chri...
Who am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web ...
What is HTML5?A new version of HTML that defines:‣ More consistent features‣ New features that compete with Flash‣ Easier ...
It’s not all rosy‣ Tooling more limited than say, Flash or HTML4‣ Cross browser support not quite as easy as  Flash‣ HTML5...
But things are getting better‣ All modern browsers support most of this stuff  now‣ Workarounds are perfectly possible‣ To...
HTML5 does not replaceHTML4  You are already using HTML5 by using HTML4.x‣ It’s backwards compatible‣ It fills up holes‣ I...
HTML5 isn’t...‣ CSS3, WOFF‣ SVG, SMIL, WebGL‣ Geolocation, WAC‣ Indexed DB, File API‣ Server-sent events‣ Web workers, XHR2
Let’s look at the newfeatures              http://www.flickr.com/photos/zscheyge/49012397/
Typical website structure<div
id=”header”></div><div
id=”nav”></div><div
id=”main”>

<div
class=”article”></div>

<div
cla...
HTML5 update<header></header><nav></nav><section
id=”main”>

<article></article>

<article></article>



...</section><foo...
<figure> and <figcaption><figure>

<img
src=”bear.jpg”






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

<figcaption>This
i...
HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation
Slider<input
type=”range”
/>
Date-time controls<input
type=”date”><input
type=”datetime”><input
type=”week”><input
type=”month”>
color<input
type=”color”>
Other new input types<input
type=”email”><input
type=”url”><input
type=”tel”>
ValidationForm validation used to be horrendousWho wants to spend the time coding somethinglike...
function
validate()
{


var
str
=
“”;


var
elements
=
document.getElementsByTagName(input);



//
loop
through
all
input
...
HTML5 gives you this<input
type=”text”
required>
And this<input
type=”text”
required







pattern=”[A‐z]{1,20}
[A‐z]{1,20}”>
<canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers
<canvas> examples‣ http://dev.opera.com/articles/view/html-5-  canvas-the-basics/‣ http://ejohn.org/blog/processingjs/‣ ht...
<video> and <audio>New elements, plus new API for controlling audioand video
Fallback<video
width=”480px”






height=”283px”






controls






poster=”poster.png”>

<source
src=”video.mp4”
type=...
And why is this all so goodagain?              http://www.flickr.com/photos/zscheyge/49012397/
Better consistency‣ Better machine readability & interoperability: ‣ Easier syndication and reuse ‣ Less time worrying abo...
Better accessibility‣ For example, HTML5 video is keyboard  accessible out of the box‣ New elements bringing consistency i...
Less reliance on JavaScript‣ Less work for your developers to do, so faster  implementation and prototyping‣ Less pain for...
Less reliance on Flash‣ Means less skills needed in the team‣ HTML5 plays nicer with the rest of the page‣ Less Flash mean...
HTML5 works on iDevices‣ Like iPad and iPhone‣ A crucial market to be in‣ Flash has not been allowed on these devices
Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com
(For non-developers) HTML5: A richer web for everyone
Upcoming SlideShare
Loading in...5
×

(For non-developers) HTML5: A richer web for everyone

1,608

Published on

This talk is designed to explain the advantages of HTML5 in a way that makes more sense to the non-developers involved in a web site project. It is therefore aimed at designers, brand managers, project managers and bosses, and talks about HTML5 with less code and tech specs, and more real world advantages of using it in your web project.

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

No Downloads
Views
Total Views
1,608
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
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
  • Transcript of "(For non-developers) HTML5: A richer web for everyone"

    1. 1. HTML5: A richer web for everyone Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    2. 2. Who am I?‣ Opera open standards evangelist and tech writer‣ Telling the world about open standards & Opera‣ Improving web education‣ Drumming in a heavy metal band
    3. 3. What is HTML5?A new version of HTML that defines:‣ More consistent features‣ New features that compete with Flash‣ Easier and quicker ways to implement things that were previously complicated‣ Error handling, and other such useful things
    4. 4. It’s not all rosy‣ Tooling more limited than say, Flash or HTML4‣ Cross browser support not quite as easy as Flash‣ HTML5 not much good if you have JavaScript disabled
    5. 5. But things are getting better‣ All modern browsers support most of this stuff now‣ Workarounds are perfectly possible‣ Tools are getting better (from HTML5boilerplate.com to Dreamweaver)
    6. 6. HTML5 does not replaceHTML4 You are already using HTML5 by using HTML4.x‣ It’s backwards compatible‣ It fills up holes‣ It competes with proprietary/plugin technology
    7. 7. HTML5 isn’t...‣ CSS3, WOFF‣ SVG, SMIL, WebGL‣ Geolocation, WAC‣ Indexed DB, File API‣ Server-sent events‣ Web workers, XHR2
    8. 8. Let’s look at the newfeatures http://www.flickr.com/photos/zscheyge/49012397/
    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. <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>
    12. 12. HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation
    13. 13. Slider<input
type=”range”
/>
    14. 14. Date-time controls<input
type=”date”><input
type=”datetime”><input
type=”week”><input
type=”month”>
    15. 15. color<input
type=”color”>
    16. 16. Other new input types<input
type=”email”><input
type=”url”><input
type=”tel”>
    17. 17. ValidationForm validation used to be horrendousWho wants to spend the time coding somethinglike...
    18. 18. function
validate()
{


var
str
=
“”;


var
elements
=
document.getElementsByTagName(input);



//
loop
through
all
input
elements
in
form

 ...this??
for(var
i
=
0;
i
<
elements.length;
i++)
{





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





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




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;


}
else
{




//
form
values
are
valid;
submit


    19. 19. HTML5 gives you this<input
type=”text”
required>
    20. 20. And this<input
type=”text”
required







pattern=”[A‐z]{1,20}
[A‐z]{1,20}”>
    21. 21. <canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers
    22. 22. <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/
    23. 23. <video> and <audio>New elements, plus new API for controlling audioand video
    24. 24. Fallback<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>
    25. 25. And why is this all so goodagain? http://www.flickr.com/photos/zscheyge/49012397/
    26. 26. 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
    27. 27. 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
    28. 28. 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
    29. 29. Less reliance on Flash‣ Means less skills needed in the team‣ HTML5 plays nicer with the rest of the page‣ Less Flash means better accessibility (note: there are some HTML5 accessibility gotchas, like Canvas)‣ Downloading a plugin breaks brand experience and can confuse users
    30. 30. HTML5 works on iDevices‣ Like iPad and iPhone‣ A crucial market to be in‣ Flash has not been allowed on these devices
    31. 31. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×