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

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
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
 
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
 
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?
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
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
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 

HTML5 - Yeah!