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!
Presentation on the Basics of Writing. Writing a Paragraph
HTML5 - Moving from hacks to solutions
1. HTML5 - Moving from hacks
to solutions
Chris Heilmann - Confoo, March 2011
Today, we'll talk about HTML5 - moving from hacks to solutions. This is a topic that I've covered a
lot lately but funnily enough - I am not getting tired of it.
2. Hello there...
Chris Heilmann
@codepo8
wait-till-i.com
#html5
3. First of all, it is good to be back in Canada - I like Canada a lot, Wolverine is from here and all the
people I met so far in our small world are amazingly crafty developers
4. We are the new media!
I've seen the worst of the web and I see HTML5 as a chance to make us move forward in our
evolution of the internet as the media that works, is available for everyone and makes us more
efficient rather than turning us into couch potatoes and forget our day to day worries in exchange
to watching artificial people live the life we would love to have.
5. HTML5 is tech evolution in action.
So what is all that HTML5 stuff about? To me, it is about moving forward and letting go of ideas we
consider to be the best solution but really only use because we are familiar with them. Better the
devil you know, right?
6. A more exible internet experience
I think as developers we owe it to the world to build a better internet experience. Computers are
very versatile things and connectivity allows us to keep things up-to-date, react to change and
access systems on-demand rather than having all of them hoarded somewhere.
7. When did we stop dreaming of
awesome computers?
12. If you look at the movies of the last few decades you will find that we more and more moved away
from computers of awesome that react to voice recognition and have unlimited potential to product
placements of the currently newest smartphone or system.
13. e future is apps, not the web?
The same seems to happen to the web - a lot of people already see the web as boring interlinked
texts and web sites that don't help you fulfil a task. Instead people see small apps for smartphones,
tablets and other mobile systems as the future. I think the web as a concept is big and clever
enough to allow for both.
14. “Nothing matters in this world more than
apps. Write that on your forehead. Write that
on the mirror on your bathroom wall. Write
that on your car windshield. Whatever it will
take so you remember it.
HP execs know this. Google’s execs know
this. Everyone in Silicon Valley knows this.
Apps are the ONLY thing that matters now.”
Robert Scoble
http://scobleizer.com/2011/02/11/dear-nokia-fans-youre-nuts/
15. “I come from the
future and I
know you don’t
like to be
dragged into it.”
17. Upgrading is a good thing
Not many people complain when they get upgrades in real life. A better seat on the plane is a nice
thing to have. A faster computer makes you work better as you don't have to wait for the bloody
thing to load and finish the tasks you have to achieve using it.
18. Staying in the comfort zone
When it comes to web technology though, you find a lot of people who are unhappy about change
and don't trust HTML5 and related technologies yet.
19. Change can be a scary thing - especially when you've been disappointed in the past.
20. It is tricky to trust browsers to do things right for us and it is very tempting to stick with what we
know and say this is all we have - this is how good the web can be.
21. Waiting for the closed tech revolution
Over my career I've seen many attempts to make the web a better and richer experience. A lot of
plugins came and went. Java applets, VRML, Real Player, Quicktime, iPix, Shockwave and many more
promised to make a browser more interesting and a richer experience.
22. Flash and with it Air and Flex went furthest out with it and their success and adoption rate shows
that we need a richer web. However, pure Flash solutions are still a rarity on the web. When it comes
to complex forms, huge data systems and web based applications you are more likely to find
hybrids or slow and annoying server-driven systems than slick Flash interfaces.
25. Extending existing infrastructure
The great thing about HTML5 as an idea is that we don't ask people to buy software or understand
and start to trust new technology - instead we innovate on already existing necessary
infrastructure. You use a browser to surf the web - all we have to make people do is upgrade their
browser.
27. A few steps towards a better web
We have the technology and we have the ideas to make the web much, much better. What we need
to do is think the right way.
28. 1) Stop thinking in limits
If we want the web as it is now - easy to access, open for everyone and simple to upgrade - to
survive we have to stop thinking in a limited way.
29. e web is not print - it is much more
exible than that.
Web sites do not have to be multiple columns of text or follow the same principles as print design
does (plain psychology and aesthetics for humans are a barrier to this, but shift can happen).
30. Web sites can be applications that break the concept of a text document.
31. Screencast of Nikebetterworld
http://nikebetterworld.com/
Web sites can be independent of the size of the browser viewport - either by adapting and showing
more or less according to how much space is available or by just telling the user they can move in
any direction.
33. To the future - using what you have
It is time we thank the browser vendors for supporting new technologies by using them. We're right
now in a Catch-22 situation were some people want browsers to support tech but the companies
making browsers don't add them yet as there is no demand. Time to break this cycle.
34. e end of cookies
Go on then, use local storage to make your interfaces much simpler by storing some of the
information.
42. 3) Increase your vocabulary
Communication is about vocabulary. Sure, you can make sense with a few simple words and a set of
simple instructions but to make a sentence engage and spark the theatre in the head of the reader
or listener you need to be able to play with language and the more pieces you have the nicer the
mosaic will get.
43. HTML 3.2 - HTML 4.01
On the web we right now grunt and point when it comes to speaking to browsers. The old HTML
vocabulary has become an anachronism hailing back to the times where all we had to do is mark up
academic papers.
44. Forms especially were too simple in what we needed to do with them to build enjoyable interfaces.
45. XHTML
3) Increase your vocabulary
In order to make the browsers do the things our apps natively should do we need more, intelligent
HTML elements.
46. The HTML5 spec is a step in the right direction, and we should use these wonderful new constructs
to tell a better story.
48. form elements should not be a type of text but a phone number, a URL, a number or even an email.
49. Autofocus:
<input autofocus name="name">
Default content:
<input placeholder="please enter your name" name="name">
Autocomplete:
<input autocomplete name="name">
Limits and steps:
<input min="0" max="360" step="5" name="angle"
type="number">
Multiple:
<input multiple type="email">
<input multiple type="file">
Related elements:
<output> <meter> <progress>
50. All of these words are at our disposal, but we don't use them in day to day conversation yet which is
why there is not much happening in terms of support.
51. Lost in Translation...
We should not be the translator for HTML to the browser - this can only lead to telephone-esque
misunderstandings.
52. 4) Allow technology to retire
This is a tricky topic right now. A lot of HTML5 is not being used as there are old and outdated
browsers still in use and for reasons beyond our control are not being upgraded. Here's an idea:
let's allow old and tired browsers to retire.
53. Let's give them a working version of our web site that is plain HTML with reloads and the content
available and let's concentrate our efforts in supporting the web that is around the corner and
needs us to become mainstream.
55. Adding extra code for legacy browers?
...but if we do that we also need to test on them to see that everything works smoothly.
56. Stop wasting 90% of your testing time
on 10 year old technology!
We should not spend our time testing for old browsers when there is new stuff to be tested.
57. Stop wasting 90% of your testing time
on 10 year old technology!
58. Progressive enhancement works!
There is nothing wrong with delivering an old school experience to old technology and increase the
enjoyment when and if the environment allows for it.
59. 5) Build systems that automate
annoying tasks
Of course there are some annoyances in HTML5 - it is a young technology. The biggest issues
however are not technical issues but licensing and IP related problems.
60. Encoding worries...
For example to embed a video as HTML5 you have to provide it in three different formats to cover
all browsers. That's why we need to make it easy for people to make the switch.
61. http://vid.ly
Vid.ly for example is a service that converts videos in dozens of formats and redirects the client in
use to the correct format automatically.
62. This is what we should thrive for - find issues and build systems to work around them - this is how
money is made.
63. 6) Build tools that help others build
with new technology
http://www.flickr.com/photos/iain/369031227/sizes/l/in/photostream/
We have specs for the technologies and examples how to use them. We can, however, not expect
everybody to be as excited about the things we are getting high on right now.
64. We can also not expect everybody who builds things for the web or writes content for it to write
everything by hand.
65. The editors we use right now do not create HTML5 - most actually create XHTML instead.
66. We now need to ask the companies who say HTML5 is the future to build systems that allow
maintainers of the web to build it.
67. http://butterapp.org | http://popcorn.js
One cool example of that is <a href="http://butterapp.org">Butter</a> which is a visual interface
on top of the <a href="http://popcornjs.org/">Popcorn</a> JavaScript framework that allows you
to build interactive presentations with HTML5 video. We need more of that.
70. 7) Be part of the discussion
Nobody likes mimes! Nobody!
Last but not least we need you to take part in the conversation around HTML5. If you stay out of it,
you can't complain about mistakes being made - all the processes are open and you can be part of
the mailing list.
71. Popularity doesn’t mean quality...
It is not a popularity contents - sure, known people working in big companies are very likely to
come up with good ideas, but anyone can have those and sometimes it is important not to look at
an issue from a professional day-to-day perspective but see what people really need to have fixed.
72. Listen in and listen well...
We need you to listen to what people are saying and validate it from your point of view. The earlier
mistakes can be spotted, the easier they are to avoid.
73. No more secrets...
As we are dealing with open technology, there are no secrets and there shouldn't be a reason for
people not answering your questions.
74. Keep your eyes peeled...
It is also important to look out for upcoming problems that are not yet in the specifications. Right
now for example this would be the device API which will allow you to use cameras and microphones
as input devices.
75. We can and should supercharge the web
- right now!
76. Godspeed, my friends, let’s do this!
Still waiting for the closed
technology revolution