HTML5 in Drupal

Scott Reynen, Lead Developer, Aten Design Group

Twitter: scottr
Email: scott@atendesigngroup.com
IRC: sreynen

What is HTML5?

XHTML is dead.

Long live XHTML.

What is HTML5?

What is HTML5?

  1. What content is.
    <p> means "this is a paragraph."

What is HTML5?

  1. What content is.
    <p> means "this is a paragraph."
  2. What interface does.
    <input type="submit"> means "this submits the form."

What is HTML5?

  • A little more is.
  • A lot more does.

HTML5 Structural Elements

  • <!DOCTYPE html> — was <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <meta charset="utf-8" /> — was <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <section> — was <div>
  • <nav> — was <div id="nav">
  • <article> — was <div class="hatom">

More HTML5 Structural Elements

  • <aside> — was <div style="float: left;">
  • <hgroup> — was ... not possible
  • <header> — was <div id="header">
  • <footer> — was <div id="footer">
  • <time> — was <span class="dtstart">
  • <mark> — was <em>
  • <ruby> — was ... not possible

HTML5 Media Elements

  • <audio> — <audio src="skullcrusher_mountain.mp3" controls></audio>
  • <video> — <video src="charliebitme.mp4" controls></video>

HTML5 Form Elements

  • <input type="range" min="0" max="50" value="0" />
  • <input type="search" results="10" />
  • <input type="text" placeholder="Your Name" />

More HTML5 Form Elements

  • <input type="number" />
  • <input type="color" />
  • <input type="email" />

Canvas

<canvas id="japan"></canvas>
<script type="javascript">
  var context = document.getElementById('japan').getContext('2d');
  context.fillStyle = '#ffffff';
  context.fillRect(0,0,200,300);
  context.fillStyle = '#cc0000';
  context.beginPath();
  context.arc(100,75,35,0,Math.PI*2,true);
  context.closePath();
  context.fill();
</script>

HTML5 JavaScript

localStorage

var wall = window.localStorage.getItem('bottles');
wall--;
window.localStorage.setItem('bottles', wall);

HTML5 JavaScript

Web SQL

var db = openDatabase("wall", "1.0", "bottles", 99);
db.transaction(function(tx) {
  tx.executeSql(
    "SELECT * FROM beer WHERE quality = ?",
    ['good'],
    function(tx, result) {
      ...
    });
});

HTML5 JavaScript

geolocation

navigator.geolocation.getCurrentPosition(onSuccess, onError);

CSS3 Isn’t Really HTML5

Nonetheless, some cool stuff in CSS3:

  • Rounded corners
  • Web fonts
  • Transitions
  • Gradients
  • Columns

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a nisi nisi. Phasellus varius aliquet eros, in viverra felis tincidunt eget. Donec nec elit vestibulum nibh blandit ultricies nec eu justo. Vivamus sollicitudin, urna quis tempor semper, leo nisi vulputate arcu, vel porta risus justo ac justo. Curabitur est mauris, vehicula ac congue a, blandit eget tortor. Integer id leo id sapien mattis feugiat eu vel lectus. Morbi faucibus luctus lacus, sit amet laoreet nulla convallis nec. Donec vitae purus vel augue eleifend volutpat sed at orci. Donec venenatis ornare accumsan. Integer et semper nibh. Morbi a mauris vitae tellus posuere vehicula vitae ut felis. Aliquam gravida sagittis risus, eget dapibus erat congue eget. Mauris pellentesque semper nibh, quis ullamcorper sapien dignissim eget.

    Maecenas vel dolor vitae velit blandit tempor ut ac dui. Quisque commodo turpis eget enim ornare commodo. Aliquam sed nibh neque, vel suscipit turpis. Ut ut eros eros. In ac est vitae massa euismod pulvinar ac id est. Nullam congue, quam vel interdum eleifend, magna tellus mollis erat, in tincidunt augue ante in justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis cursus lectus urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dignissim porta dapibus. Mauris arcu justo, auctor quis vehicula sollicitudin, sollicitudin commodo arcu. Fusce eleifend semper felis, non blandit sapien malesuada a. Nam quis luctus elit. Nulla lacus dui, pharetra eu ultricies sed, consequat molestie eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nunc metus.

    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ornare semper leo, a tempus ligula ullamcorper bibendum. Curabitur nec auctor tortor. Sed aliquam volutpat augue, at placerat nulla sagittis vel. Mauris vel lacus ante. Fusce ac quam eu tellus hendrerit scelerisque et ut mauris. Nullam fermentum bibendum risus fermentum vulputate. Aliquam suscipit ligula nec erat dapibus rutrum. Mauris elementum, dolor sit amet fermentum pellentesque, elit neque adipiscing purus, ut sodales nibh diam nec dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent vehicula vulputate quam, id pellentesque velit faucibus ultricies. Mauris dignissim ipsum in ante congue et adipiscing nisl lacinia. Mauris et aliquet est. Aenean tincidunt dui at velit aliquet mattis. Ut lobortis egestas tellus, eget dictum arcu facilisis sed. In molestie fermentum leo, et varius tortor tincidunt placerat.

    Donec eu metus id felis tristique accumsan nec at purus. Nam orci diam, fermentum eu tincidunt at, fringilla et lacus. Nulla lorem sem, malesuada suscipit semper nec, placerat in velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis posuere sapien ante. Cras nibh tellus, hendrerit id tempor ac, vestibulum vel mi. Curabitur pretium tristique orci, eu feugiat neque vulputate eu. Maecenas vehicula pretium enim quis varius. Praesent id est eu mauris fermentum ornare. Integer vestibulum cursus dolor, id dapibus ligula ornare ac.

    In hac habitasse platea dictumst. Praesent quis risus tempus erat faucibus pulvinar. Vestibulum molestie dapibus enim, in venenatis augue consequat in. Sed dapibus iaculis porta. Mauris et sem arcu. Aenean massa ante, ullamcorper nec vestibulum ut, lacinia eget lorem. Donec lobortis vulputate orci vitae varius. Aliquam quis accumsan justo. Aliquam malesuada sem ut est faucibus rhoncus ut ac lacus. Maecenas rutrum, leo eu pellentesque pellentesque, odio enim cursus nisi, at condimentum nulla est at orci. Suspendisse quam magna, ornare non imperdiet quis, iaculis non libero. Sed nisl neque, pharetra sit amet iaculis vitae, elementum vel tellus. Donec vehicula tempus adipiscing. Duis tortor turpis, tempus sit amet eleifend et, iaculis imperdiet urna.

Using HTML5 Today

Totally Safe:

  • New DOCTYPE (doesn’t matter at all)
  • New form elements (auto-fallback to type="text")
  • Most new CSS3 (auto-fallback to less styling)

Using HTML5 Today

Safe with Fallbacks:

  • New media elements — fallback to Flash
  • New structural elements — need JS to style in IE
  • Canvas — simple stuff can fallback to SVG in IE

Using HTML5 Today

Use with Caution:

See also:

Using HTML5 Today

Big sites are using it:

Using HTML5 in Drupal

Using HTML5 in Drupal

Create your own HTML5 theme in 3 easy steps:

  1. Set your DOCTYPE to <!DOCTYPE html>
    in page.tpl.php (html.tpl.php in D7)
  2. ???
  3. Profit

Questions?