The document provides tips for learning about HTML5, including that it is an extension of HTML4, the importance of browser support through plugins, using semantic tags, new input type attributes, native audio and video support through the media tags, drawing with the canvas tag, following experts on social media, reading blogs and books on the topic, viewing the source of other websites, getting involved with the Fronteers community, using frameworks like HTML5 Boilerplate, and experimenting to learn.
What exactly is HTML5 and why is it such a big deal? Will it make a big difference to your business, and is it worth the investment?
HTML5 gives your website new interactive capabilities that allow your visitors to engage with you like never before. Instead of constant page reloads, cumbersome, slow scripts and crash-causing plugins on your site, your website will flow with the technological efficiency of HTML5 and your brand will look much more professional because of it.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
What exactly is HTML5 and why is it such a big deal? Will it make a big difference to your business, and is it worth the investment?
HTML5 gives your website new interactive capabilities that allow your visitors to engage with you like never before. Instead of constant page reloads, cumbersome, slow scripts and crash-causing plugins on your site, your website will flow with the technological efficiency of HTML5 and your brand will look much more professional because of it.
The Death of Lorem Ipsum & Pixel Perfect ContentDave Olsen
A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
An introduction to accessibility: definition, concepts, some requirements from WCAG, checking the accessibility conformance, recommendations and curiosities.
Whether you have a bit of experience or you're brand new to code, this webinar is right for you. Walk away with:
Valuable resources that will save you time during the holiday season
The ability to update your email design like a veteran developer
Tips on how to to update your HTML more efficiently
A decrease in daily frustrations when making web updates and more!
An introduction to accessibility: definition, concepts, some requirements from WCAG, checking the accessibility conformance, recommendations and curiosities.
Whether you have a bit of experience or you're brand new to code, this webinar is right for you. Walk away with:
Valuable resources that will save you time during the holiday season
The ability to update your email design like a veteran developer
Tips on how to to update your HTML more efficiently
A decrease in daily frustrations when making web updates and more!
HTML5 is here and we should use it right now. It is fun and interesting to look at cool CSS3, Canvas and Video demos but our main goal should be to make our day-to-day life easier by using the cool things browsers offer us right now. Learn about local storage, simplifying interfaces and using HTML5 right now!
HTML5 has arrived! The W3C published a new editor's draft at the start of 2011, and many of the new features detailed within have widespread support across all the latest major browsers. But what does it mean to you, the web developer on the street? Should you embrace it right now, and start using it to implement your own futuristic unicorns and rainbows? In this talk Chris Mills from the Opera web browser looks at some HTML5 history, how it improves upon HTML4, the basics of some of the major new features, such as new structural elements, new form controls, <video> and <canvas>, and how to produce an HTML5 site that will also function in older browsers.
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.
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
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.
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
28.
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
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.
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.