11 tips to ...
learn about
Like @AGConsult and @Wolfr_ did totheir presentations, I added some ofthese sticky notes to give extrameaning to some slid...
Hi! I’m Thomas
I work at
HTML5 isn’t just anotherbuzzword                 I notice that the term HTML5 is often                 being used as an ar...
but it won’t replace Flash either         But I also want to make sure that people aren’t         thinking that HTML5 is t...
What do you need to know?‣   extension HTML4       I guess the most important thing you should know       is that HTML5 is...
What do you need to know?‣   extension HTML4‣   browser support
What do you need to know?‣   extension HTML4‣   browser support‣   semantics
What do you need to know?‣   extension HTML4‣   browser support‣   semantics‣   input type attributes
What do you need to know?‣   extension HTML4‣   browser support‣   semantics‣   input type attributes‣   media
What do you need to know?‣   extension HTML4‣   browser support‣   semantics‣   input type attributes‣   media‣   canvas
Browser support
Browser support
Browser support<!--[if lt IE 9]>    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->     ...
Semantics‣   article   ‣   header‣   section   ‣   footer‣   aside     ‣   time‣   nav       ‣   summary‣   figure
Semanticsdiveintohtml5.info/semantics.html          Some of the new tags are listed on the previous          slide, which ...
Input type attributes‣   tel             Another interesting aspect of HTML5 are the             new input type attributes...
Media‣   audio‣   video   HTML5 provides the new audio and video tag            which give native browser implementations ...
CanvasUses JavaScript to make drawingson a web page           The new canvas element is a fun way           to play with d...
We live in a world where everything becomes digital.        Still, I grew up with getting to know both books and        th...
Books        Another really cool one is “Hardboiled        web design” by Andy Clarke.        It has awesome graphics and ...
Books        If you want to get familiar with        HTML5 in specific, here’s a great        book to get an “Introduction ...
Social networks
Social networks
Social networks                                  ‣   @adactio                                  ‣   @jina                  ...
Blog‣   html5doctor.com‣   alistapart.com      If you prefer online reading over                        books, here are so...
View source
Inspector tools   In my opinion, an underestimated                  way of learning about the web: use                  th...
Inspector tools
If you ask me, the best tip I can give you: get toknow the Fronteers organisation. They organizethis fantastic annual conf...
Frameworks             Best practical tip: get your hands on             HTML5 with the HTML5 Boilerplate.             Dow...
Experiment
QUESTIONS?
twitter.com/decthomasthomas@fork-cms.comwww.netlash.com
11 tips for HTML5
Upcoming SlideShare
Loading in...5
×

11 tips for HTML5

5,535

Published on

Presentation by Thomas Deceuninck for FeWeb, on HTML5.

Published in: Technology, Design
3 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,535
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
187
Comments
3
Likes
14
Embeds 0
No embeds

No notes for slide

11 tips for HTML5

  1. 1. 11 tips to ...
  2. 2. learn about
  3. 3. Like @AGConsult and @Wolfr_ did totheir presentations, I added some ofthese sticky notes to give extrameaning to some slides since theymostly contain a few words orimages.
  4. 4. Hi! I’m Thomas
  5. 5. I work at
  6. 6. HTML5 isn’t just anotherbuzzword 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. 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. 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. 9. What do you need to know?‣ extension HTML4‣ browser support
  10. 10. What do you need to know?‣ extension HTML4‣ browser support‣ semantics
  11. 11. What do you need to know?‣ extension HTML4‣ browser support‣ semantics‣ input type attributes
  12. 12. What do you need to know?‣ extension HTML4‣ browser support‣ semantics‣ input type attributes‣ media
  13. 13. What do you need to know?‣ extension HTML4‣ browser support‣ semantics‣ input type attributes‣ media‣ canvas
  14. 14. Browser support
  15. 15. Browser support
  16. 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. 17. Semantics‣ article ‣ header‣ section ‣ footer‣ aside ‣ time‣ nav ‣ summary‣ figure
  18. 18. Semanticsdiveintohtml5.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. 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. 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. 21. CanvasUses JavaScript to make drawingson 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. 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 considerBooks 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. 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. 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. 25. Social networks
  26. 26. Social networks
  27. 27. Social networks ‣ @adactio ‣ @jina ‣ @leaverouI guess we all know Twitter, so ‣ @codepo8why not follow a few people whocan teach you a thing or twoabout HTML5 and other new coolstuff? ‣ @necolas
  28. 28. 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
  29. 29. View source
  30. 30. 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.
  31. 31. Inspector tools
  32. 32. If you ask me, the best tip I can give you: get toknow the Fronteers organisation. They organizethis fantastic annual conference in Amsterdamwith a ton of international speakers.If you don’t want to wait a whole year to get intouch (and you shouldn’t), you should attend oneof the (free) meetings which are organizedmonthly throughout Belgium and the Netherlands.Just visit fronteers.nl and follow @fronteersbe onTwitter. Hope to see you at the next meeting inBelgium!
  33. 33. 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.
  34. 34. Experiment
  35. 35. QUESTIONS?
  36. 36. twitter.com/decthomasthomas@fork-cms.comwww.netlash.com
  1. A particular slide catching your eye?

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

×