Presentation with tips to learn about HTML5 for FeWeb.

1. 11 tips to ...

2. learn about

3. Like @AGConsult and @Wolfr_ did to
their presentations, I added some of
these sticky notes to give extra
meaning to some slides since they
mostly contain a few words or
images.

4. Hi! I’m Thomas

5. I work at

6. HTML5 isn’t just another
buzzword
I notice that the term HTML5 is often
being used as an argument by sales,
which is a good thing because it’s not
just another buzzword and there’s a
lot to it.

7. but it won’t replace Flash either
But I also want to make sure that people aren’t
thinking that HTML5 is the new Flash because of
it’s possibilities concerning animations and such.
They are two, totally different ways of
approaching the web. They both have their
qualities as well as shortcomings.

8. What do you need to know?
‣ extension HTML4
I guess the most important thing you should know
is that HTML5 is just an extension of it’s
predecessor HTML4. I often get the impression that
some are talking about this topic as if it were a
whole new invention.
In short, HTML5 is an improved version of the
previous versions with great eye for semantics and
native browser support for elements such as video
and audio (where you often were in need of flash
embeds in the past).

9. What do you need to know?
‣ extension HTML4
‣ browser support

10. What do you need to know?
‣ extension HTML4
‣ browser support
‣ semantics

11. What do you need to know?
‣ extension HTML4
‣ browser support
‣ semantics
‣ input type attributes

12. What do you need to know?
‣ extension HTML4
‣ browser support
‣ semantics
‣ input type attributes
‣ media

13. What do you need to know?
‣ extension HTML4
‣ browser support
‣ semantics
‣ input type attributes
‣ media
‣ canvas

14. Browser support

15. Browser support

16. Browser support
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
HTML5 degrades gracefully. In practice this means that
older browsers can handle these new tags perfectly,
except for IE6, IE7 and IE8.
To enable the use of the new HTML5 tags, you need to
load this simple piece of JavaScript which creates these
new elements for you so the browser would recognize
them.
Important note: you should use a CSS reset for every
browser to define the new tags as block level elements.

17. Semantics
‣ article ‣ header
‣ section ‣ footer
‣ aside ‣ time
‣ nav ‣ summary
‣ figure

18. Semantics
diveintohtml5.info/semantics.html
Some of the new tags are listed on the previous
slide, which I think contribute most to the
semantics of a web page.
If you want more information about those tags
or other new ones, I suggest you to visit the
website mentioned above which was made by
Mark Pilgrim.

19. Input type attributes
‣ tel
Another interesting aspect of HTML5 are the
new input type attributes. They provide
‣ search great usability improvements with little
effort.
For example: when specifying an email type
attribute on an input field, the keyboard on
‣ email an iPhone shows slight changes with the
default one when this input field is focussed.
This way the @-symbol is directly accessible
without having to tap the special characters
button.
‣ number
‣ range

20. Media
‣ audio
‣ video HTML5 provides the new audio and video tag
which give native browser implementations of
music and video fragments.
The problem so far is that there is no agreement
amongst browsers which format to use for these
files.
At this point, you have to specify each format for
audio and video to get this to work cross browser.
This way, the browser will just pick the format it
supports and ignore the others.

21. Canvas
Uses JavaScript to make drawings
on a web page
The new canvas element is a fun way
to play with drawings on the web
without having to use Flash. You can
use this for a variety of things from
showing the rhythm and beats from a
song to plain old graphs which
represent the finances of your
company.

22. We live in a world where everything becomes digital.
Still, I grew up with getting to know both books and
the web.
What I’m trying to say is that you should consider
Books buying some books and start reading again.
Some books I definitely recommend are the ones
from “A book apart” on different web-related topics.

23. Books
Another really cool one is “Hardboiled
web design” by Andy Clarke.
It has awesome graphics and
interesting practical tips and tricks on
HTML5 and related topics.

24. Books
If you want to get familiar with
HTML5 in specific, here’s a great
book to get an “Introduction to
HTML5” by Bruce Lawson.

25. Social networks

26. Social networks

27. Social networks
‣ @adactio
‣ @jina
‣ @leaverou
I guess we all know Twitter, so
‣ @codepo8
why not follow a few people who
can teach you a thing or two
about HTML5 and other new cool
stuff?
‣ @necolas

29. Blog
‣ html5doctor.com
‣ alistapart.com If you prefer online reading over
books, here are some blogs you
should read to learn about the web.
Especially html5doctor.com is
‣ adactio.com interesting because they answer
questions from their readers.
‣ hacks.mozilla.com
‣ nicolasgallagher.com

30. View source

31. Inspector tools In my opinion, an underestimated
way of learning about the web: use
the inspector tools to see how
other people have built websites or
certain parts in them.
The same goes for the view source
tip actually.

32. Inspector tools

33. If you ask me, the best tip I can give you: get to
know the Fronteers organisation. They organize
this fantastic annual conference in Amsterdam
with a ton of international speakers.
If you don’t want to wait a whole year to get in
touch (and you shouldn’t), you should attend one
of the (free) meetings which are organized
monthly throughout Belgium and the Netherlands.
Just visit fronteers.nl and follow @fronteersbe on
Twitter. Hope to see you at the next meeting in
Belgium!

34. Frameworks
Best practical tip: get your hands on
HTML5 with the HTML5 Boilerplate.
Download it, check it out and strip what
you don’t want to use.
A great way to learn this stuff in practice
and I’m sure there’s some stuff in there
you won’t easily read about on the web if
you’re not familiar with this topic.

35. Experiment

36. QUESTIONS?

37. twitter.com/decthomas
thomas@fork-cms.com
www.netlash.com