Successfully reported this slideshow.

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

1

Share

1 of 32
1 of 32

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

1

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

(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 replace HTML4 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 new features 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 forms Previously 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. Validation Form validation used to be horrendous Who wants to spend the time coding something like...
  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 audio and 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 good again? 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

Editor's Notes

  • \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
  • ×