SlideShare a Scribd company logo
1 of 77
Download to read offline
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.
Hello there...



                 Chris Heilmann
                      @codepo8
                  wait-till-i.com
                         #html5
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
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.
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?
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.
When did we stop dreaming of
awesome computers?
Minority Report
Iron Man 2
Iron Man 2
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.
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.
“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/
“I come from the
future and I
know you don’t
like to be
dragged into it.”
Let’s chill a bit about this...
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.
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.
Change can be a scary thing - especially when you've been disappointed in the past.
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.
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.
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.
Flash, Silverlight, Flex, Air and others
are great examples of what the web
can be...
Starting the open tech revolution
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.
http://www.whatwg.org/mailing-list
And as everything is open there is no ambiguity as to where things are going in the future - instead
of making people wait for upgrades their requests and needs drive them.
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.
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.
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).
Web sites can be applications that break the concept of a text document.
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.
2) Use what the client offers
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.
e end of cookies




Go on then, use local storage to make your interfaces much simpler by storing some of the
information.
Offline Storage




Take a look at offline storage - not only for mobile interfaces.
Geolocation




Play with geolocation to tell a user where they are or to prefill forms.
Screencast of Oprah’s web site




                        http://www.oprah.com/own
Use native video and audio instead of yet another Flash movie.
http://mbostock.github.com/d3/
Use Canvas and SVG for charting and a fallback image linking to a browser upgrade page.
Play with touch events and even with device orientation.
If..




                                                                         ...then...
 A lot more than you think is already possible and can be used once you put it in a simple if
statement.
http://webowonder.org
Use new technologies to build beautiful things. Check Mozilla’s Web-o-wonder web site for some
great examples how we can move ahead.
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.
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.
Forms especially were too simple in what we needed to do with them to build enjoyable interfaces.
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.
The HTML5 spec is a step in the right direction, and we should use these wonderful new constructs
to tell a better story.
<sec
       tion
            > <n
      <asid      av>
 <hea       e> <       <art
      der>       hgro       icle>
<ma        <foo         up>
    rk> <        ter>
          deta          <tim
     <figc      ils> <        e>
          aptio       figur
                 n> ..      e>
                      .
Non-meaningful DIVs should be replaced with SECTION, ASIDE or ARTICLE...
form elements should not be a type of text but a phone number, a URL, a number or even an email.
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>
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.
Lost in Translation...




We should not be the translator for HTML to the browser - this can only lead to telephone-esque
misunderstandings.
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.
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.
https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-browser-Polyfills
Yes, we can simulate almost all of the new things in HTML5 for legacy browsers...
Adding extra code for legacy browers?




...but if we do that we also need to test on them to see that everything works smoothly.
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.
Stop wasting 90% of your testing time
on 10 year old technology!
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.
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.
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.
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.
This is what we should thrive for - find issues and build systems to work around them - this is how
money is made.
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.
We can also not expect everybody who builds things for the web or writes content for it to write
everything by hand.
The editors we use right now do not create HTML5 - most actually create XHTML instead.
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.
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.
http://butterapp.org | http://popcorn.js
  http://www.aviary.com/html5editor
http://www.aloha-editor.org
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.
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.
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.
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.
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.
We can and should supercharge the web
- right now!
Godspeed, my friends, let’s do this!




Still waiting for the closed
technology revolution
anks!
Chris Heilmann
     @codepo8
       #mozilla
#html5/freenet

More Related Content

What's hot

EG5523 - Web 2.0 Technology
EG5523 - Web 2.0 TechnologyEG5523 - Web 2.0 Technology
EG5523 - Web 2.0 Technologykruisengak
 
Government ICT 2.0 London 2014 – Open Source Drupal Empowering Government
Government ICT 2.0 London 2014 – Open Source Drupal Empowering GovernmentGovernment ICT 2.0 London 2014 – Open Source Drupal Empowering Government
Government ICT 2.0 London 2014 – Open Source Drupal Empowering GovernmentJeffrey McGuire
 
Selling Responsive Webdesign - webtech Conference 2013
Selling Responsive Webdesign - webtech Conference 2013Selling Responsive Webdesign - webtech Conference 2013
Selling Responsive Webdesign - webtech Conference 2013die.agilen GmbH
 
Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...hanitaha10
 
Offline Strategy for an Online World
Offline Strategy for an Online WorldOffline Strategy for an Online World
Offline Strategy for an Online WorldSoCal UX Camp
 
Truly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsTruly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsJohn Eckman
 
20 Year Personal Marketing Plans
 20 Year Personal Marketing Plans 20 Year Personal Marketing Plans
20 Year Personal Marketing PlansOamar Gianan
 
Creating a Great Portfolio Site
Creating a Great Portfolio SiteCreating a Great Portfolio Site
Creating a Great Portfolio SiteMel Choyce
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Brett Bumeter
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design ProcessStacy Kvernmo
 
Wordpress Websites
Wordpress WebsitesWordpress Websites
Wordpress Websitespaddyo
 
Ego vs. Product Development
Ego vs. Product DevelopmentEgo vs. Product Development
Ego vs. Product DevelopmentBastian Gruber
 
Become a moodle developer marcus green - moodle moot global19
Become a moodle developer  marcus green - moodle moot global19Become a moodle developer  marcus green - moodle moot global19
Become a moodle developer marcus green - moodle moot global19Marcus Green
 
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009Advanced Internet Presence By Chad Barr for Pittsburgh January 2009
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009Chad Barr
 
Web 2.0 - implications for your library
Web 2.0 - implications for your libraryWeb 2.0 - implications for your library
Web 2.0 - implications for your librarySLA
 

What's hot (18)

EG5523 - Web 2.0 Technology
EG5523 - Web 2.0 TechnologyEG5523 - Web 2.0 Technology
EG5523 - Web 2.0 Technology
 
Web 2.0 Tools
Web 2.0 ToolsWeb 2.0 Tools
Web 2.0 Tools
 
Government ICT 2.0 London 2014 – Open Source Drupal Empowering Government
Government ICT 2.0 London 2014 – Open Source Drupal Empowering GovernmentGovernment ICT 2.0 London 2014 – Open Source Drupal Empowering Government
Government ICT 2.0 London 2014 – Open Source Drupal Empowering Government
 
Adv html
Adv htmlAdv html
Adv html
 
Selling Responsive Webdesign - webtech Conference 2013
Selling Responsive Webdesign - webtech Conference 2013Selling Responsive Webdesign - webtech Conference 2013
Selling Responsive Webdesign - webtech Conference 2013
 
Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...Word press to go how to build a wordpress website ( pdf drive )...
Word press to go how to build a wordpress website ( pdf drive )...
 
Offline Strategy for an Online World
Offline Strategy for an Online WorldOffline Strategy for an Online World
Offline Strategy for an Online World
 
Truly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User GoalsTruly Responsive Design Means Aligning to Business and User Goals
Truly Responsive Design Means Aligning to Business and User Goals
 
20 Year Personal Marketing Plans
 20 Year Personal Marketing Plans 20 Year Personal Marketing Plans
20 Year Personal Marketing Plans
 
Creating a Great Portfolio Site
Creating a Great Portfolio SiteCreating a Great Portfolio Site
Creating a Great Portfolio Site
 
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
Design Your First Word Press Theme In Minutes Word Camp Birmingham Brett Bume...
 
Exploring the Design Process
Exploring the Design ProcessExploring the Design Process
Exploring the Design Process
 
Wordpress Websites
Wordpress WebsitesWordpress Websites
Wordpress Websites
 
Ego vs. Product Development
Ego vs. Product DevelopmentEgo vs. Product Development
Ego vs. Product Development
 
The DiSo Project
The DiSo ProjectThe DiSo Project
The DiSo Project
 
Become a moodle developer marcus green - moodle moot global19
Become a moodle developer  marcus green - moodle moot global19Become a moodle developer  marcus green - moodle moot global19
Become a moodle developer marcus green - moodle moot global19
 
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009Advanced Internet Presence By Chad Barr for Pittsburgh January 2009
Advanced Internet Presence By Chad Barr for Pittsburgh January 2009
 
Web 2.0 - implications for your library
Web 2.0 - implications for your libraryWeb 2.0 - implications for your library
Web 2.0 - implications for your library
 

Similar to HTML5 - Moving from hacks to solutions

Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Christian Heilmann
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web developmentChristian Heilmann
 
Web designtrends
Web designtrendsWeb designtrends
Web designtrendsTafu Norido
 
iPad implementation
iPad implementationiPad implementation
iPad implementationryggj
 
2020 Top Web Development Trends
2020 Top Web Development Trends2020 Top Web Development Trends
2020 Top Web Development TrendsPencil Agency
 
HTML5: An Introduction
HTML5: An IntroductionHTML5: An Introduction
HTML5: An IntroductionClearPivot
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applicationsX.commerce
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Appsmalteubl
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with librariesChristian Heilmann
 
10 tips for a usable website
10 tips for a usable website10 tips for a usable website
10 tips for a usable websiteBart De Waele
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
 
Adaptive web-design-chapter-1
Adaptive web-design-chapter-1Adaptive web-design-chapter-1
Adaptive web-design-chapter-1Marcelo Graciolli
 
HTML5 and the future of the web (Dr. Seuss style)
HTML5 and the future of the web (Dr. Seuss style)HTML5 and the future of the web (Dr. Seuss style)
HTML5 and the future of the web (Dr. Seuss style)Christian Heilmann
 

Similar to HTML5 - Moving from hacks to solutions (20)

Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016Progressive Web Apps – the return of the web? Goto Berlin 2016
Progressive Web Apps – the return of the web? Goto Berlin 2016
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
Web designtrends
Web designtrendsWeb designtrends
Web designtrends
 
Web designtrends 1wd
Web designtrends 1wdWeb designtrends 1wd
Web designtrends 1wd
 
iPad implementation
iPad implementationiPad implementation
iPad implementation
 
2020 Top Web Development Trends
2020 Top Web Development Trends2020 Top Web Development Trends
2020 Top Web Development Trends
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
HTML5: An Introduction
HTML5: An IntroductionHTML5: An Introduction
HTML5: An Introduction
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Apps
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Professional web development with libraries
Professional web development with librariesProfessional web development with libraries
Professional web development with libraries
 
What’s Up, EDoc?!
What’s Up,EDoc?!What’s Up,EDoc?!
What’s Up, EDoc?!
 
11 tips to...
11 tips to...11 tips to...
11 tips to...
 
HTML tips
HTML tipsHTML tips
HTML tips
 
Let's face it.
Let's face it. Let's face it.
Let's face it.
 
10 tips for a usable website
10 tips for a usable website10 tips for a usable website
10 tips for a usable website
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
Adaptive web-design-chapter-1
Adaptive web-design-chapter-1Adaptive web-design-chapter-1
Adaptive web-design-chapter-1
 
HTML5 and the future of the web (Dr. Seuss style)
HTML5 and the future of the web (Dr. Seuss style)HTML5 and the future of the web (Dr. Seuss style)
HTML5 and the future of the web (Dr. Seuss style)
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 

Recently uploaded

REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptxmanishaJyala2
 
factors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxfactors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxSanjay Shekar
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesRased Khan
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointELaRue0
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Denish Jangid
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Celine George
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Celine George
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfaedhbteg
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Celine George
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryEugene Lysak
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdfVikramadityaRaj
 
The Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational ResourcesThe Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational Resourcesaileywriter
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTechSoup
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff17thcssbs2
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya - UEM Kolkata Quiz Club
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...Nguyen Thanh Tu Collection
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024CapitolTechU
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the lifeNitinDeodare
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文中 央社
 

Recently uploaded (20)

REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptxREPRODUCTIVE TOXICITY  STUDIE OF MALE AND FEMALEpptx
REPRODUCTIVE TOXICITY STUDIE OF MALE AND FEMALEpptx
 
factors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptxfactors influencing drug absorption-final-2.pptx
factors influencing drug absorption-final-2.pptx
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Word Stress rules esl .pptx
Word Stress rules esl               .pptxWord Stress rules esl               .pptx
Word Stress rules esl .pptx
 
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
Basic Civil Engineering notes on Transportation Engineering, Modes of Transpo...
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 
Behavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdfBehavioral-sciences-dr-mowadat rana (1).pdf
Behavioral-sciences-dr-mowadat rana (1).pdf
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf....................Muslim-Law notes.pdf
....................Muslim-Law notes.pdf
 
The Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational ResourcesThe Benefits and Challenges of Open Educational Resources
The Benefits and Challenges of Open Educational Resources
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
BỘ LUYỆN NGHE TIẾNG ANH 8 GLOBAL SUCCESS CẢ NĂM (GỒM 12 UNITS, MỖI UNIT GỒM 3...
 
Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024Capitol Tech Univ Doctoral Presentation -May 2024
Capitol Tech Univ Doctoral Presentation -May 2024
 
philosophy and it's principles based on the life
philosophy and it's principles based on the lifephilosophy and it's principles based on the life
philosophy and it's principles based on the life
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 

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?
  • 8.
  • 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.”
  • 16. Let’s chill a bit about this...
  • 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.
  • 23. Flash, Silverlight, Flex, Air and others are great examples of what the web can be...
  • 24. Starting the open tech revolution
  • 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.
  • 26. http://www.whatwg.org/mailing-list And as everything is open there is no ambiguity as to where things are going in the future - instead of making people wait for upgrades their requests and needs drive them.
  • 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.
  • 32. 2) Use what the client offers
  • 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.
  • 35. Offline Storage Take a look at offline storage - not only for mobile interfaces.
  • 36. Geolocation Play with geolocation to tell a user where they are or to prefill forms.
  • 37. Screencast of Oprah’s web site http://www.oprah.com/own Use native video and audio instead of yet another Flash movie.
  • 38. http://mbostock.github.com/d3/ Use Canvas and SVG for charting and a fallback image linking to a browser upgrade page.
  • 39. Play with touch events and even with device orientation.
  • 40. If.. ...then... A lot more than you think is already possible and can be used once you put it in a simple if statement.
  • 41. http://webowonder.org Use new technologies to build beautiful things. Check Mozilla’s Web-o-wonder web site for some great examples how we can move ahead.
  • 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.
  • 47. <sec tion > <n <asid av> <hea e> < <art der> hgro icle> <ma <foo up> rk> < ter> deta <tim <figc ils> < e> aptio figur n> .. e> . Non-meaningful DIVs should be replaced with SECTION, ASIDE or ARTICLE...
  • 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.
  • 54. https://github.com/Modernizr/Modernizr/wiki/HTML5- Cross-browser-Polyfills Yes, we can simulate almost all of the new things in HTML5 for legacy browsers...
  • 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.
  • 68. http://butterapp.org | http://popcorn.js http://www.aviary.com/html5editor
  • 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
  • 77. anks! Chris Heilmann @codepo8 #mozilla #html5/freenet