Your SlideShare is downloading. ×
(For non-developers) HTML5: A richer web for everyone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,560
views

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, …

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,560
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. HTML5: A richer web for everyone Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills
    • 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. 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. 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. 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. 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. HTML5 isn’t...‣ CSS3, WOFF‣ SVG, SMIL, WebGL‣ Geolocation, WAC‣ Indexed DB, File API‣ Server-sent events‣ Web workers, XHR2
    • 8. Let’s look at the newfeatures http://www.flickr.com/photos/zscheyge/49012397/
    • 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. HTML5 update<header></header><nav></nav><section
id=”main”>

<article></article>

<article></article>



...</section><footer></footer>
    • 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. HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation
    • 13. Slider<input
type=”range”
/>
    • 14. Date-time controls<input
type=”date”><input
type=”datetime”><input
type=”week”><input
type=”month”>
    • 15. color<input
type=”color”>
    • 16. Other new input types<input
type=”email”><input
type=”url”><input
type=”tel”>
    • 17. ValidationForm validation used to be horrendousWho wants to spend the time coding somethinglike...
    • 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. HTML5 gives you this<input
type=”text”
required>
    • 20. And this<input
type=”text”
required







pattern=”[A‐z]{1,20}
[A‐z]{1,20}”>
    • 21. <canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers
    • 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. <video> and <audio>New elements, plus new API for controlling audioand video
    • 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. And why is this all so goodagain? http://www.flickr.com/photos/zscheyge/49012397/
    • 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. 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. 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. 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. HTML5 works on iDevices‣ Like iPad and iPhone‣ A crucial market to be in‣ Flash has not been allowed on these devices
    • 31. Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com