SlideShare a Scribd company logo
1 of 72
Download to read offline
Monday, August 8, 11
#remixhtml5
Monday, August 8, 11
Monday, August 8, 11
WHY?
Monday, August 8, 11
“ The Internet is a strange,
               huge beast. It is getting
               bigger, faster and more
               mobile each day.”

                       http://www.onlineschools.org/state-of-the-internet/soti.html
Monday, August 8, 11
4,835,049,149

Monday, August 8, 11
www.lingscars.com
Monday, August 8, 11
TIMELINE

Monday, August 8, 11
HTML 2
                       Nov. 1995


                           Coolio - Gangsta’s Paradise
Monday, August 8, 11
HTML 3.2
                                       Jan. 1997




                       Kenny G - Six of Hearts
Monday, August 8, 11
HTML 4
                       Dec. 1997




                           Eminem - The Slim Shady EP
Monday, August 8, 11
XHTML 1.0
                                      Jan. 2000
         The Presidents of the United States of America - Lump
Monday, August 8, 11
/>
Monday, August 8, 11
XHTML 1.1
                       May 2001


                         Janet Jackson - All For You
Monday, August 8, 11
HTML5
                                   Jun. 2004




                       Usher - Yeah!
Monday, August 8, 11
I’ll get
              you!                      HTML5
                                             Jun. 2004




                       apple.com/hotnews/thoughts-on-flash/
Monday, August 8, 11
apple.com/html5
Monday, August 8, 11
Web 2.0       Web 3.0
          Everything
    jQuery MooTools
     What it’s not:
    Games Flash Killer
        YUI Audio CSS3
       Silverlight Killer
     Animations Video
Monday, August 8, 11
...and it’s not

                       HTML 5
                            see that space?


Monday, August 8, 11
What it is.

Monday, August 8, 11
“ In the thinking of its
                     creators, HTML5 was
                     always just HTML.”
                                            ~ Jeffrey Zeldman


                       http://www.zeldman.com/2011/01/27/html5-vs-html/
Monday, August 8, 11
Natural evolution
                         HTML
                      of HTML.

                  http://blog.whatwg.org/html-is-the-new-html5
Monday, August 8, 11
Application
                        Platform

    SEMANTICS              CSS 3       GRAPHICS & 3D     MULTIMEDIA




        DEVICE                                          PERFORMANCE &
                       CONNECTIVITY   OFFLINE STORAGE    INTEGRATION
        ACCESS

Monday, August 8, 11
SEMANTICS

Monday, August 8, 11
/>     ==         >
                            but really


                       >       >         />
Monday, August 8, 11
<!DOCTYPE html>


Monday, August 8, 11
<meta charset=”utf-8”>




Monday, August 8, 11
<h2>
                <a href=”#”>Heading</a>
              </h2>
              <p>
                <a href=”#”>Text</a>
              </p>

                                Hat Tip: Jeremy Keith (@adactio)
Monday, August 8, 11
<a href=”#”>
                <h2>Heading</h2>
                <p>Text</p>
               </a>


                               Hat Tip: Jeremy Keith (@adactio)
Monday, August 8, 11
<header> <nav> <footer>
           <section> <article>
            <aside> <details>
          <summary> <figure>
            <video> <audio>
                 <canvas>
Monday, August 8, 11
<div class=”footer”>
    <div class=”nav”>
     <ul>
      <li><a href=”#”>This</a></li>
      <li><a href=”#”>That</a></li>
     </ul>
    </div>
   </div>
                        Hat Tip: Jeremy Keith (@adactio)
Monday, August 8, 11
<footer>
           <nav>
            <a href=”#”>This</a>
            <a href=”#”>That</a>
           </nav>
          </footer>

                             Hat Tip: Jeremy Keith (@adactio)
Monday, August 8, 11
<time>
     <input type=”email”>
               <input type=”url”>

Monday, August 8, 11
http://dev.opera.com/articles/view/new-form-features-in-HTML5/
Monday, August 8, 11
<section>
                       <article>


Monday, August 8, 11
http://andyrutledge.com/news-redux.php
Monday, August 8, 11
Section
                          or
                       Article?



                           http://andyrutledge.com/news-redux.php
Monday, August 8, 11
<article>
 <header>
  <h2>Lauren Cheney Stan...</h2>
  <summary>Frankfurt...</summary>
  <details>by Shelly...</details>
 </header>
 <figure>
  <img src=”/photos/yay.jpg”>
  <figcaption>Laur...</figcaption>
 </figure>
 <section id=”content”>
  <p>When the 79th minute...</p>
  <p>...</p>
 </section>
 <aside>
  <a>Print</a> <a>Single Page</a>
  <ul><li>...</li><li>...</li></ul>
 </aside>
</article>
                       http://andyrutledge.com/news-redux.php
Monday, August 8, 11
Application
                        Platform

    SEMANTICS              CSS 3       GRAPHICS & 3D     MULTIMEDIA




        DEVICE                                          PERFORMANCE &
                       CONNECTIVITY   OFFLINE STORAGE    INTEGRATION
        ACCESS

Monday, August 8, 11
www.nikebetterworld.com
Monday, August 8, 11
www.thisshell.com
Monday, August 8, 11
http://mbostock.github.com/d3/ex/stack.html
Monday, August 8, 11
http://mbostock.github.com/d3/ex/bullet.html
Monday, August 8, 11
phonegap.com
Monday, August 8, 11
“ We realized we could do the full
                 Pandora experience without Flash.”
                            ~ Tom Conrad, CTO - Pandora

                       pandora.com/newpandora
Monday, August 8, 11
WHY?
Monday, August 8, 11
You already know it.




Monday, August 8, 11
What about browser support, man?


Monday, August 8, 11
Monday, August 8, 11
Browsers already
                         know it, too.



Monday, August 8, 11
document.createElement();



                       http://html5shiv.googlecode.com
Monday, August 8, 11
document.createElement(“header”);
                 document.createElement(“footer”);
                 document.createElement(“section”);
                 document.createElement(“nav”);
                 and so on...



                          http://html5shiv.googlecode.com
Monday, August 8, 11
Offline Storage




Monday, August 8, 11
Geolocation




Monday, August 8, 11
Because it’s already
                         all around you.



Monday, August 8, 11
Because of IE6.




Monday, August 8, 11
95% of the Web
                       doesn’t validate.


Monday, August 8, 11
Beyond the
                 Rendering Engine


Monday, August 8, 11
<b><i>Hi there</b></i>




                           http://labs.opera.com/news/2011/02/22/
Monday, August 8, 11
Internet Explorer 9, Safari 5

          <b><i>Hi there</i></b><i></i>

          Firefox, Opera, Chrome

          <b><i>Hi there</i></b>


                        http://labs.opera.com/news/2011/02/22/
Monday, August 8, 11
Because it’s cool.



Monday, August 8, 11
Resources




Monday, August 8, 11
vid.ly
Monday, August 8, 11
html5boilerplate.com   @boiler_plate
Monday, August 8, 11
modernizr.com   @modernizr
Monday, August 8, 11
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Monday, August 8, 11
MORE RESOURCES
                 - diveintohtml5.com
                 - html5doctor.com
                 - html5wow.com
                 - html5demos.com
                 - html5accessibility.com/HTML5ASS/
                 - html5labs.interoperabilitybridges.com


Monday, August 8, 11
4,835,049,149

                            400
                        New people come
                       online every minute

Monday, August 8, 11
www.lingscars.com
Monday, August 8, 11
nissanusa.com/leaf-electric-car
Monday, August 8, 11
“Do or do not.
                        There is no try.”
                                    ~ Yoda




Monday, August 8, 11
Thank you.
                         J. Cornelius
                          jcornelius.com



Monday, August 8, 11

More Related Content

Viewers also liked

Viewers also liked (9)

Creating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from ScratchCreating an In-Aisle Purchasing System from Scratch
Creating an In-Aisle Purchasing System from Scratch
 
Applications secure by default
Applications secure by defaultApplications secure by default
Applications secure by default
 
Node.js Authentication and Data Security
Node.js Authentication and Data SecurityNode.js Authentication and Data Security
Node.js Authentication and Data Security
 
The magic of passive web vulnerability analysis lava kumar
The magic of passive web vulnerability analysis   lava kumarThe magic of passive web vulnerability analysis   lava kumar
The magic of passive web vulnerability analysis lava kumar
 
Protecting the Future of Mobile Payments
Protecting the Future of Mobile PaymentsProtecting the Future of Mobile Payments
Protecting the Future of Mobile Payments
 
Attacking http2 implementations (1)
Attacking http2 implementations (1)Attacking http2 implementations (1)
Attacking http2 implementations (1)
 
Garage4Hackers Ranchoddas Webcast Series - Bypassing Modern WAF's Exemplified...
Garage4Hackers Ranchoddas Webcast Series - Bypassing Modern WAF's Exemplified...Garage4Hackers Ranchoddas Webcast Series - Bypassing Modern WAF's Exemplified...
Garage4Hackers Ranchoddas Webcast Series - Bypassing Modern WAF's Exemplified...
 
Secure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication MediaSecure Payments Over Mixed Communication Media
Secure Payments Over Mixed Communication Media
 
Modern API Security with JSON Web Tokens
Modern API Security with JSON Web TokensModern API Security with JSON Web Tokens
Modern API Security with JSON Web Tokens
 

Similar to HTML5 - Yeah!

Mike hostetler - jQuery knowledge append to you
Mike hostetler - jQuery knowledge append to youMike hostetler - jQuery knowledge append to you
Mike hostetler - jQuery knowledge append to you
StarTech Conference
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
Zi Bin Cheah
 
Hiring & Managing a Developer
Hiring & Managing a DeveloperHiring & Managing a Developer
Hiring & Managing a Developer
Steve Zehngut
 
WebShell - confoo 2011 - sean coates
WebShell - confoo 2011 - sean coatesWebShell - confoo 2011 - sean coates
WebShell - confoo 2011 - sean coates
Bachkoutou Toutou
 
Sinsai.info と Crisis Mapping
Sinsai.info と Crisis Mapping Sinsai.info と Crisis Mapping
Sinsai.info と Crisis Mapping
Hal Seki
 

Similar to HTML5 - Yeah! (20)

In depth with html5 java2days 2010
In depth with html5 java2days 2010In depth with html5 java2days 2010
In depth with html5 java2days 2010
 
Mike hostetler - jQuery knowledge append to you
Mike hostetler - jQuery knowledge append to youMike hostetler - jQuery knowledge append to you
Mike hostetler - jQuery knowledge append to you
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Html基礎
Html基礎Html基礎
Html基礎
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
What's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James PearceWhat's new in HTML5, CSS3 and JavaScript, James Pearce
What's new in HTML5, CSS3 and JavaScript, James Pearce
 
Educause - Building a Responsive Website for the Presidential Debate
Educause - Building a Responsive Website for the Presidential DebateEducause - Building a Responsive Website for the Presidential Debate
Educause - Building a Responsive Website for the Presidential Debate
 
Oxente on Rails 2009
Oxente on Rails 2009Oxente on Rails 2009
Oxente on Rails 2009
 
Hiring & Managing a Developer
Hiring & Managing a DeveloperHiring & Managing a Developer
Hiring & Managing a Developer
 
Smart Networks
Smart NetworksSmart Networks
Smart Networks
 
WebShell - confoo 2011 - sean coates
WebShell - confoo 2011 - sean coatesWebShell - confoo 2011 - sean coates
WebShell - confoo 2011 - sean coates
 
Hackday sf 2011
Hackday sf 2011Hackday sf 2011
Hackday sf 2011
 
Sinsai.info と Crisis Mapping
Sinsai.info と Crisis Mapping Sinsai.info と Crisis Mapping
Sinsai.info と Crisis Mapping
 
Choosing the right Content Management System
Choosing the right Content Management SystemChoosing the right Content Management System
Choosing the right Content Management System
 
Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"Rendering Views in JavaScript - "The New Web Architecture"
Rendering Views in JavaScript - "The New Web Architecture"
 
Become Master of Your Own Universe - DIBI 2013
Become Master of Your Own Universe - DIBI 2013Become Master of Your Own Universe - DIBI 2013
Become Master of Your Own Universe - DIBI 2013
 
HTML5 Hell Yeah!
HTML5 Hell Yeah!HTML5 Hell Yeah!
HTML5 Hell Yeah!
 
Apache Stanbol 
and the Web of Data - ApacheCon 2011
Apache Stanbol 
and the Web of Data - ApacheCon 2011Apache Stanbol 
and the Web of Data - ApacheCon 2011
Apache Stanbol 
and the Web of Data - ApacheCon 2011
 
Apachecon 2011 stanbol_ogrisel
Apachecon 2011 stanbol_ogriselApachecon 2011 stanbol_ogrisel
Apachecon 2011 stanbol_ogrisel
 
Front end-performance
Front end-performanceFront end-performance
Front end-performance
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 

HTML5 - Yeah!