HTML5, Meet Drupal 8!

Malcolm van Delst Profile Photo
Malcolm van Delst

on

June 5, 2011

HTML5, Meet Drupal 8!

HTML5 LogoHTML5. If you haven't heard of it, perhaps you've seen the 50's superhero inspired logo (left) which is popping up all over? On May 18, 2011, Drupal creator, Dries Buytaert, announced that HTML5 is not only going to be one of the top five initiatives for Drupal 8, but that the default doctype for Drupal will switch from XHTML to HTML5. What's this mean to you, a Drupal dev or Drupul user? Let's find out.

1. First of All, What is HTML5?

A couple years ago, at Google I/O, HTML5 was described as a convergence of HTML, CSS and JavaScript. Since then, it seems, CSS has wandered off to become it's own entity: “CSS 3”, while the HTML and JS elements are gelling into HTML5.

Basically, HTML5 allows website builders – or perhaps, “web builders” since with HTML5, a single site will become much more hooked into the larger World Wide Web network of sites, interfaces and functions – to embed and manipulate video and audio elements, as well as to draw and/or create graphics through scripts (or “code”), that they will then be able to animate, through scripts. The “hook” into the WWW comes through structural tags being added to the language. Tags like “<header>”, “<nav>” and “<article>” will connect your web page elements to similar elements on other sites. This will allow for more intelligent linking via search engines, and will open up new possibilities for cataloguing the World Wide Web and for communication and/or interfacing across sites. These tags are part of the Semantic Web initiative.

APIs and DOMs

Dog, what's up with the APIs and DOMs? Application Programming Interfaces are “sets of rules and specs” that software programs follow to communicate with each other. Microsoft's DirectX is a collection of APIs that allow multimedia and game software to communicate with Windows, for example. Document Object Model is, mainly, the set of conventions that allows JavaScript to interact with HTML, or XML. With tags like “<video>” and “<audio>” these conventions become integral to HTML, instead of the add-ons they currently are: say “goodbye” to the “<embed>” tag!

Graphics

“<canvas>” is a new HTML tag that lets you create and animate 2D images using JavaScripts. Integration of Scalable Vectors Graphics (SVG), a type of graphic defined by XML code, is also part of HTML5.

In essence, a whole bunch more tools just got dumped into the web developer's toolbox; tools that will allow you to make browser-based games, interactions and animations – or web sites that behave like games, interactions and animations. Using a Chrome browser, check out Angry Birds in the browser, and RO.ME, music video-game-website hybrid, for examples of what's possible.

2. Why HTML5?

Take it away, Dries: “simply put, (HTML5) can provide a much better user experience on both desktop and mobile devices, and could lead to a convergence between native applications and the mobile web.

In other words, lots more interaction, animation, video and audio on web sites, as they evolve into much more fluid entities, morphing in size and functionality to display and be used across a plethora of screens and devices, while simultaneously becoming more integrated with other sites, libraries and functions, across the World Wide Web. Think of a tree, pushing down roots and pushing out branches; flowering, bearing the fruit of rich media, and cross-pollinating.

3. How HTML5?

"Ohhhh, no. Oh, no, oh, no, oh, no. I have to learn a whole bunch more tags and processes now, right?" Sort of – but not really.

Firstly, HTML5 is not difficult to learn. You're probably already using CSS3 to add dropshadows to images and round corners on your boxes. Using HTML5 is not going to be anymore difficult than that. One day, you are using “<embed>” to add your video; next, BAM! You are using “<video>” (and of course, stretching, colouring and enhancing your video through HTML5, just because you can).

Drupal? Drupal, a GUI for HTML, PHP and JS, is not going to stop being that. Imagine HTML5 goodness rolled into the Drupal CMS, with added functionality to allow you to add your own HTML5 tags when and where you wish. You will, in fact, be HTML5'ing before you know you are HTML5'ing.

Drupal Integration, High Level

The plan to integrate HTML5 is still being hashed out. Jacine Luisi (or, as she refers to herself, simply, “Jacine”), the initiative leader, describes the main goals thus:

  • implement HTML5 elements that will offer the most benefits to end users,
  • help contributed modules and themes, both existing and new, incorporate HTML5 elements, and
  • allow theme developers to use, or opt out of use of, HTML5's semantic elements,

These goals will be implemented by:

Many HTML5 APIs, she cautions, “including audio, video, drag and drop, offline web applications, storage, (and) geolocation” will not be implemented in core by default, but will be considered on a case by case basis.

Drupal Integration, Mid-Level

If you'd like to get involved in integrating HTML5 into Drupal 8, your help is not only welcome, but requested! Here are the main pages to visit, to see what's happening and where you can help:

Remember, you don't need to code. Documentation, marketing, testing and user interface are just some of the areas in which you can contribute, aside from code.

The HTML5 Issue queue is a list of tasks that need to be addressed to implement HTML5 in Drupal 8's core.

At the HTML5 Working Group page you will find discussions, projects, documentation, events and even a job board.

Discussions include:

  • implementing HTML5 markup and APIs in Drupal
  • adding HTML5 support to Drupal 7
  • getting HTML5 native markup and form elements into Drupal 8 core.

Projects include:

Documentation includes HTML5 Myths and the wiki.

I highly encourage you to read the myths. Here's an example:

Myth: HTML5 is not done, we should wait until it's done before implementing it in Drupal.

Fact: Most of HTML5 is dividable in 3 different groups: "it just works", "degrades by default", and "some effort required". See http://mathiasbynens.be/notes/html5-levels for additional information.

Also, the WHATWG, the driving force behind HTML5, has dubbed it a "living standard" that is constantly evolving. As such, the version number is less of an issue. The "2022" release date is nullified, and they instead will measure progress in feature milestones. HTML5 will still be documented by the W3C as an official spec, but the WHATWG will keep driving forward progress, simply calling it "HTML". More here...

http://blog.whatwg.org/html-is-the-new-html5
http://www.zeldman.com/2011/01/27/html5-vs-html/

Events include many IRC meetings, that you can attend without leaving your computer.

Lastly, here's a list of resources, largely courtesy of Jacine, to help you get started with HTML5:

That's it in a nutshell. HTML5 is going to make the web come alive with graphics, movement and communication. Drupal 8 is gearing up to seamlessly bring all of this life into the world's best CMS. Dig in, folks – and get involved!

 

Share it!

I truly believe you are kidding right here. HTML5 is far more superior than the combination of HTML, JavaScript and Flash in some cases. The use of workers and threading in the language itself, the offline storage DBs, drag&drop, cross document messaging etc are few of the features. Most people find HTML5 in only changing few divs with header/footer tags, using sections and probably embedding some HTML5 video instead of Flash. The rest is hardcore programming and no more 'markup' as it used to be up to HTML 4.01.