SlideShare a Scribd company logo
1 of 39
Download to read offline
HTML5 vs XHTML 2
The Future of Web Development




Ben MacNeill
User Interface Designer, eXtension
NC State University

May 26, 2010
http://www.slideshare.net/chillnc/
Spoiler: XHTML 2 Loses




            http://www.flickr.com/photos/21402026@N05/3714619072/
No really, it’s dead.
“Today the Director announces that
when the XHTML 2 Working Group
charter expires as scheduled at the
end of 2009, the charter will not be
renewed.”


               - www.w3.org, July 2nd, 2009
HTML 2.0 (IETF)
IETF => W3C
HTML 4.01 (W3C)
HTML 4.01                   XHTML 1.0
   tag-for-tag identical, different syntax
Why XHTML
                (in 1999)


• Emergence of web standards
• Browsers starting supporting CSS
• More structured markup was welcomed
• Easier to parse
• Extensible (SVG, MathML)
mime
                     type



http://www.flickr.com/photos/janlewandowski/3210986710/
content=
     "text/html"

          VS

       content=
"application/xhtml+xml"
XHTML 1.1 (real XML)




            http://www.flickr.com/photos/indi/132659074/
Draconian Error Handling




(all because there's a missing <p> tag)
XHTML 2.0 (W3C)
http://www.flickr.com/photos/samjudson/47940677/
WHATWG




Web Hypertext Application Technology Working Group
Web Forms 2.0
Web Apps 1.0
Meanwhile, XHTML 2
 is doing just fine




         http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
HTML5
(WHATWG => W3C)
XHTML 2 is still doing fine
                http://www.flickr.com/photos/lstcaress/1451618395/
HTML5 features
 showing up
Er...




        http://www.flickr.com/photos/smailtronic/2817629219/
Nothing to be
      scared of
“If you are currently creating
websites with any version of HTML,
you’re already using HTML5”



                   - Jeremy Keith
So What is HTML5?

• New form elements
• New semantic elements
• Video and canvas elements
• Offline caching
• Local database API
Start Today


<!DOCTYPE html>
Already support many
   HTML5 features




                       9
New Semantic
  Elements
  <section>
   <header>
   <footer>
    <nav>
  <article>
IE: Never Fails
         to Disappoint
<style type="text/css">
  article {display:block; border:1px solid red;}
</style>
...
<article>
<h1>Welcome to Initech</h1>
<p>This is your <span>first day</span>.</p>
</article>



  • no styles, empty node
                            http://diveintohtml5.org/semantics.html#unknown-elements
The Hack
<script>
document.createElement("article");
</script>


  • HTML5 enabling script:
    http://remysharp.com/2009/01/07/html5-enabling-script/

  • Works all the back to IE6
  • just create it, don't have to insert into DOM
                                     http://diveintohtml5.org/semantics.html#unknown-elements
Awesome New Form Elements
 <input type="search">   for search boxes
 <input type="number">   for spinboxes
 <input type="range">    for sliders
 <input type="color">    for color pickers
 <input type="tel">      for phone numbers
 <input type="url">      for web addresses
 <input type="email">    for email addresses
 <input type="date">     for calendar date pickers
 <input type="time">     for timestamps
type="email"
= Contextual Keyboards
Other form goodies

• placeholder text (FF, S, C, Op)
• automatic input validation (O)
• autofocus fields (S,C,O)
<video>
*not really Apple's response
   source: http://yfrog.com/83n4fp
Offer HTML5 <video>
• CNN              • NPR
• Reuters          • The White House
• New York Times   • Sports Illustrated
• Vimeo            • Flickr
• Time             • CBS
• ESPN             • MSNBC
                     http://www.apple.com/ipad/ready-for-ipad/
<canvas>
http://mrdoob.com/projects/harmony/
Writing to Canvas
function draw_b() {
  var b_canvas = document.getElementById("b");
  var b_context = b_canvas.getContext("2d");
  b_context.fillRect(50, 25, 150, 100);
}




                                http://diveintohtml5.org/canvas.html#shapes
Offline Web Apps
  • Offline caching
  • Local database API
<html manifest="/cache.manifest">

            localStorage or
              SQL engine
Further Reading
•   Dive into HTML5 http://diveintohtml5.org/
    (hopefully coming out in June. Looks great!)

•   http://www.alistapart.com/articles/a-brief-history-of-markup/

•   http://dev.w3.org/html5/markup/spec.html

•   http://www.alistapart.com/articles/previewofhtml5



    Thanks!
    http://www.slideshare.net/chillnc/
    http://delicious.com/chillnc/html5

More Related Content

What's hot

III - Better angularjs
III - Better angularjsIII - Better angularjs
III - Better angularjsWebF
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.jsWebF
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architectureWebF
 
Untangling spring week9
Untangling spring week9Untangling spring week9
Untangling spring week9Derek Jacoby
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 
Fast Slim Correct: The History and Evolution of JavaScript.
Fast Slim Correct: The History and Evolution of JavaScript.Fast Slim Correct: The History and Evolution of JavaScript.
Fast Slim Correct: The History and Evolution of JavaScript.John Dalziel
 
I - Front-end Spectrum
I - Front-end SpectrumI - Front-end Spectrum
I - Front-end SpectrumWebF
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerErik Isaksen
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingVlad Filippov
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFu Cheng
 
Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015Alja Isakovic
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developerHsuan Fu Lien
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Derek Jacoby
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10Derek Jacoby
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePointmikehuguet
 

What's hot (20)

III - Better angularjs
III - Better angularjsIII - Better angularjs
III - Better angularjs
 
2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js2015 - Introduction to building enterprise web applications using Angular.js
2015 - Introduction to building enterprise web applications using Angular.js
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architecture
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Untangling spring week9
Untangling spring week9Untangling spring week9
Untangling spring week9
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
Fast Slim Correct: The History and Evolution of JavaScript.
Fast Slim Correct: The History and Evolution of JavaScript.Fast Slim Correct: The History and Evolution of JavaScript.
Fast Slim Correct: The History and Evolution of JavaScript.
 
I - Front-end Spectrum
I - Front-end SpectrumI - Front-end Spectrum
I - Front-end Spectrum
 
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & PolymerLevent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015Git your Jekyll on - WebCamp Ljubljana 2015
Git your Jekyll on - WebCamp Ljubljana 2015
 
Understand front end developer
Understand front end developerUnderstand front end developer
Understand front end developer
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
HTML Resources
HTML ResourcesHTML Resources
HTML Resources
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
 
Untangling7
Untangling7Untangling7
Untangling7
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10
 
Web Components
Web ComponentsWeb Components
Web Components
 
No Feature Solutions with SharePoint
No Feature Solutions with SharePointNo Feature Solutions with SharePoint
No Feature Solutions with SharePoint
 

Viewers also liked

Evaluate Content with Google Analytics (Oct 2009)
Evaluate Content with Google Analytics (Oct 2009)Evaluate Content with Google Analytics (Oct 2009)
Evaluate Content with Google Analytics (Oct 2009)Ben MacNeill
 
Google Analytics: Q&A
Google Analytics: Q&AGoogle Analytics: Q&A
Google Analytics: Q&ABen MacNeill
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Data-driven parenting - Trixie Tracker
Data-driven parenting - Trixie TrackerData-driven parenting - Trixie Tracker
Data-driven parenting - Trixie TrackerBen MacNeill
 
Advanced Google Analytics Techniques
Advanced Google Analytics Techniques Advanced Google Analytics Techniques
Advanced Google Analytics Techniques Ben MacNeill
 
Presenting For Feedback
Presenting For FeedbackPresenting For Feedback
Presenting For FeedbackBen MacNeill
 
Style Your Site Part 2
Style Your Site Part 2Style Your Site Part 2
Style Your Site Part 2Ben MacNeill
 
CSS Frameworks for Rapid Site Designs
CSS Frameworks for Rapid Site DesignsCSS Frameworks for Rapid Site Designs
CSS Frameworks for Rapid Site DesignsBen MacNeill
 
Subversion Clients for the Mac - svnX
Subversion Clients  for the Mac - svnXSubversion Clients  for the Mac - svnX
Subversion Clients for the Mac - svnXBen MacNeill
 
Presenting Visual Information(Notes)
Presenting Visual Information(Notes)Presenting Visual Information(Notes)
Presenting Visual Information(Notes)Ben MacNeill
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1Ben MacNeill
 
Best Practices for Structuring Your Web Content
Best Practices for Structuring Your  Web ContentBest Practices for Structuring Your  Web Content
Best Practices for Structuring Your Web ContentBen MacNeill
 
Πεπτικό Σύστημα
Πεπτικό ΣύστημαΠεπτικό Σύστημα
Πεπτικό ΣύστημαPetros Karapetros
 

Viewers also liked (18)

Evaluate Content with Google Analytics (Oct 2009)
Evaluate Content with Google Analytics (Oct 2009)Evaluate Content with Google Analytics (Oct 2009)
Evaluate Content with Google Analytics (Oct 2009)
 
Grooving with Perl
Grooving with PerlGrooving with Perl
Grooving with Perl
 
Google Analytics: Q&A
Google Analytics: Q&AGoogle Analytics: Q&A
Google Analytics: Q&A
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Data-driven parenting - Trixie Tracker
Data-driven parenting - Trixie TrackerData-driven parenting - Trixie Tracker
Data-driven parenting - Trixie Tracker
 
Advanced Google Analytics Techniques
Advanced Google Analytics Techniques Advanced Google Analytics Techniques
Advanced Google Analytics Techniques
 
Oceans
OceansOceans
Oceans
 
Animals
AnimalsAnimals
Animals
 
Presenting For Feedback
Presenting For FeedbackPresenting For Feedback
Presenting For Feedback
 
Style Your Site Part 2
Style Your Site Part 2Style Your Site Part 2
Style Your Site Part 2
 
CSS Frameworks for Rapid Site Designs
CSS Frameworks for Rapid Site DesignsCSS Frameworks for Rapid Site Designs
CSS Frameworks for Rapid Site Designs
 
Subversion Clients for the Mac - svnX
Subversion Clients  for the Mac - svnXSubversion Clients  for the Mac - svnX
Subversion Clients for the Mac - svnX
 
Ask an Expert 2.0
Ask an Expert 2.0Ask an Expert 2.0
Ask an Expert 2.0
 
Presenting Visual Information(Notes)
Presenting Visual Information(Notes)Presenting Visual Information(Notes)
Presenting Visual Information(Notes)
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1
 
Best Practices for Structuring Your Web Content
Best Practices for Structuring Your  Web ContentBest Practices for Structuring Your  Web Content
Best Practices for Structuring Your Web Content
 
Πεπτικό Σύστημα
Πεπτικό ΣύστημαΠεπτικό Σύστημα
Πεπτικό Σύστημα
 
Lean Six-Sigma 101
Lean Six-Sigma 101Lean Six-Sigma 101
Lean Six-Sigma 101
 

Similar to Html5

Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's dayAnkur Mishra
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereWeb Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereJohn Riviello
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Mandakini Kumari
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereWeb Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereJohn Riviello
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markupChris Mills
 

Similar to Html5 (20)

State of the Web
State of the WebState of the Web
State of the Web
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 TemplateHTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
HTML5
HTML5HTML5
HTML5
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
HTML 5
HTML 5HTML 5
HTML 5
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereWeb Components: The Future of Web Development is Here
Web Components: The Future of Web Development is Here
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is HereWeb Components: The Future of Web Development is Here
Web Components: The Future of Web Development is Here
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
 

Recently uploaded

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...Wes McKinney
 

Recently uploaded (20)

So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
 

Html5

  • 1. HTML5 vs XHTML 2 The Future of Web Development Ben MacNeill User Interface Designer, eXtension NC State University May 26, 2010 http://www.slideshare.net/chillnc/
  • 2. Spoiler: XHTML 2 Loses http://www.flickr.com/photos/21402026@N05/3714619072/
  • 3. No really, it’s dead. “Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed.” - www.w3.org, July 2nd, 2009
  • 7. HTML 4.01 XHTML 1.0 tag-for-tag identical, different syntax
  • 8. Why XHTML (in 1999) • Emergence of web standards • Browsers starting supporting CSS • More structured markup was welcomed • Easier to parse • Extensible (SVG, MathML)
  • 9. mime type http://www.flickr.com/photos/janlewandowski/3210986710/
  • 10. content= "text/html" VS content= "application/xhtml+xml"
  • 11. XHTML 1.1 (real XML) http://www.flickr.com/photos/indi/132659074/
  • 12. Draconian Error Handling (all because there's a missing <p> tag)
  • 15. WHATWG Web Hypertext Application Technology Working Group
  • 16. Web Forms 2.0 Web Apps 1.0
  • 17. Meanwhile, XHTML 2 is doing just fine http://www.flickr.com/photos/cheltenhamboroughcouncil/1321299695/
  • 19. XHTML 2 is still doing fine http://www.flickr.com/photos/lstcaress/1451618395/
  • 21. Er... http://www.flickr.com/photos/smailtronic/2817629219/
  • 22.
  • 23. Nothing to be scared of “If you are currently creating websites with any version of HTML, you’re already using HTML5” - Jeremy Keith
  • 24. So What is HTML5? • New form elements • New semantic elements • Video and canvas elements • Offline caching • Local database API
  • 26. Already support many HTML5 features 9
  • 27. New Semantic Elements <section> <header> <footer> <nav> <article>
  • 28. IE: Never Fails to Disappoint <style type="text/css"> article {display:block; border:1px solid red;} </style> ... <article> <h1>Welcome to Initech</h1> <p>This is your <span>first day</span>.</p> </article> • no styles, empty node http://diveintohtml5.org/semantics.html#unknown-elements
  • 29. The Hack <script> document.createElement("article"); </script> • HTML5 enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/ • Works all the back to IE6 • just create it, don't have to insert into DOM http://diveintohtml5.org/semantics.html#unknown-elements
  • 30. Awesome New Form Elements <input type="search"> for search boxes <input type="number"> for spinboxes <input type="range"> for sliders <input type="color"> for color pickers <input type="tel"> for phone numbers <input type="url"> for web addresses <input type="email"> for email addresses <input type="date"> for calendar date pickers <input type="time"> for timestamps
  • 32. Other form goodies • placeholder text (FF, S, C, Op) • automatic input validation (O) • autofocus fields (S,C,O)
  • 34. *not really Apple's response source: http://yfrog.com/83n4fp
  • 35. Offer HTML5 <video> • CNN • NPR • Reuters • The White House • New York Times • Sports Illustrated • Vimeo • Flickr • Time • CBS • ESPN • MSNBC http://www.apple.com/ipad/ready-for-ipad/
  • 37. Writing to Canvas function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100); } http://diveintohtml5.org/canvas.html#shapes
  • 38. Offline Web Apps • Offline caching • Local database API <html manifest="/cache.manifest"> localStorage or SQL engine
  • 39. Further Reading • Dive into HTML5 http://diveintohtml5.org/ (hopefully coming out in June. Looks great!) • http://www.alistapart.com/articles/a-brief-history-of-markup/ • http://dev.w3.org/html5/markup/spec.html • http://www.alistapart.com/articles/previewofhtml5 Thanks! http://www.slideshare.net/chillnc/ http://delicious.com/chillnc/html5