Re-factor templates and theme functions to use new HTML5 elements

Overview

HTML5 brings a number of new elements to enhance the semantics of our web pages. The table below lists these new elements along with links to the spec and relevant articles on each.

New HTML5 Elements

Element	Spec	Articles
article	WHATWG | W3C	HTML5 Doctor, Dive into HTML5
aside	WHATWG | W3C	HTML5 Doctor
audio	WHATWG | W3C	HTML5 Doctor
bdi	WHATWG | W3C	HTML5 Doctor
canvas	WHATWG | W3C	HTML5 Doctor
command	WHATWG | W3C
datalist	WHATWG | W3C
details	WHATWG | W3C
embed	WHATWG | W3C
figcaption	WHATWG | W3C	HTML5 Doctor
figure	WHATWG | W3C	HTML5 Doctor
footer	WHATWG | W3C	HTML5 Doctor, Dive into HTML5
header	WHATWG | W3C	HTML5 Doctor, Dive into HTML5
hgroup	WHATWG | W3C	HTML5 Doctor
keygen	WHATWG | W3C
mark	WHATWG | W3C	HTML5 Doctor
meter	WHATWG | W3C
menu	WHATWG | W3C
nav	WHATWG | W3C	HTML5 Doctor, Dive into HTML5
output	WHATWG | W3C
progress	WHATWG | W3C
section	WHATWG | W3C	HTML5 Doctor
source	WHATWG | W3C
summary	WHATWG | W3C
time	WHATWG | W3C	HTML5 Doctor, Dive into HTML5
track	WHATWG | W3C	HTML5 Doctor
video	WHATWG | W3C	HTML5 Doctor
wbr	WHATWG | W3C

Related Issues/Discussions

#1077510: Convert core templates and theme functions to HTML5 - Meta Issue
#1085590: Update jQuery UI to the latest in the git repository

Templates

Template	Issue(s)
aggregator-feed-source.tpl.php	#1189804: Convert aggregator-feed-source.tpl.php to HTML5
aggregator-item.tpl.php	#1189806: Convert aggregator-item.tpl.php to HTML5
aggregator-summary-item.tpl.php	#1221710: Convert aggregator-summary-item.tpl.php to HTML5
aggregator-summary-items.tpl.php	#1189810: Convert aggregator-summary-items.tpl.php to HTML5
aggregator-wrapper.tpl.php	#1221712: Convert aggregator-wrapper.tpl.php to HTML5
block.tpl.php	#1077610: Convert block.tpl.php to HTML5
block-admin-display-form.tpl.php	#1221718: Refactor block-admin-display-form.tpl.php
book-all-books-block.tpl.php	#1189832: Convert book-all-books-block.tpl.php to HTML5
book-export-html.tpl.php	#1189834: Convert book-export-html.tpl.php to HTML5
book-navigation.tpl.php	#1189828: Convert book-navigation.tpl.php to HTML5
book-node-export-html.tpl.php	#1221724: Convert book-node-export-html.tpl.php to HTML5
comment.tpl.php	#1189816: Convert comment.tpl.php to HTML5
comment-wrapper.tpl.php	#1229434: Convert comment-wrapper.tpl.php to HTML5
forum-submitted.tpl.php	#1189850: Convert forum-submitted.tpl.php to HTML5
html.tpl.php	#1077566: Convert html.tpl.php to HTML5
maintenance-page.tpl.php	#1189822: Convert maintenance-page.tpl.php to HTML5
node.tpl.php	#1077602: Convert node.tpl.php to HTML5
poll-bar--block.tpl.php	#1229440: Convert poll-bar--block.tpl.php to HTML5
poll-bar.tpl.php	#1229442: Convert poll tpls and markup to HTML5
poll-results--block.tpl.php	#1190172: Convert poll-results--block.tpl.php to HTML5
poll-results.tpl.php	#1229444: Convert poll-results.tpl.php to HTML5
poll-vote.tpl.php	#1190176: Convert poll-vote.tpl.php to HTML5
profile-block.tpl.php	#1229450: Convert profile-block.tpl.php to HTML5
profile-listing.tpl.php	#1190202: Convert profile-listing.tpl.php to HTML5
page.tpl.php	#1077578: Convert page.tpl.php to HTML5
taxonomy-term.tpl.php	#1190206: Convert taxonomy-term.tpl.php to HTML5
toolbar.tpl.php	#1190210: Convert toolbar.tpl.php to HTML5
user-profile.tpl.php	#1190214: Convert user-profile.tpl.php to HTML5
user-profile-category.tpl.php	#1190218: Convert user-profile-category.tpl.php to HTML5

Theme Functions

Theme Function	Issue(s)
theme_field()	#1189842: Convert theme_field() to HTML5
theme_datetime()	#1183250: Add a theme_datetime() function to consistently theme dates and datetimes
theme_book_title_link()	#1222248: Remove theme_book_title_link()
theme_task_list()	#1222254: theme_task_list() should be replaced with theme_item_list() in all instances
theme_filter_tips_more_info()	#1222260: theme_filter_tips_more_info() should be replaced with the l() function
drupal_placeholder()	#1447678: Fix strings with broken semantics caused by using %variable placeholder incorrectly

Upgrade Theme Functions to support the render system

For D8, all theme functions should support the render system. This provides support for HTML content to be passed to any theme function with the expectation that the HTML content will be render as DOM and not text.

We will start with theme_datetime and use this as the model for existing theme functions that do not support the render system (to be listed) and new theme functions (see above).

Drupal 8 User Experience

We want to radically improve our content creation and sitebuilder tools for Drupal 8, we have laid out a UX strategy . Below we have outlined the most important topics we want to improve in Drupal 8.

How can you help out?

• Discussion on the various design proposals in the Usability group
• Help implementing ideas in the Usability issue queue.
• Chat with us in #drupal-usability on IRC.

For most of this to happen, we need your help!

______________________________________________________________________

Content creation

Node/add page improvements
The content creation experience is at the center of Drupal, its one of those screens that we want to keep improving. For Drupal 8 we want to drastically improve the design of the content creation page. We have done research and now in the process of brainstorming ideas.

• Research on a interaction model for the content creation page.

Content listing
The current content listing is very basic and often isn't very useful for content creators. We intend to iteratively improve this page and add features such as searching.

• Search on the content listing.

WYSIWYG
A WYSIWYG editor has been the number one requested feature for Drupal core in the past few years. We are currently working towards a candidate in a sandbox project.

• Discussion on WYSIWYG candidates.
• Evaluate the accessibility of WYSIWYG candidates.

______________________________________________________________________

Site builder

Layout/context
Contextual blocks that can be rearranged and organized into flexible layouts through a drag and drop interface. This initiative needs major involvement of contributors both in terms of design as development to redesign the way we currently handle blocks. We currently are still researching how to make this all happen.

• Discussion in Drupal 8 Blocks & Layouts everywhere initiative group.
• Research on pages & components.
• Research on context usecases.
• Technical prototyping is happening in sandbox of EclipseGc.

Field UI
The Field UI has fundamental issues that cannot be solved by tweaking the existing interface. This needs a major overhaul along the lines of form builder field UI, which will tie in heavily with the layout/context initiative.

• Technical prototyping is happening in a sandbox of swentel.
• Accessibility review and development, to make this interface truly accessible.

Menu UI
The Ui while managing menu items in drupal is not very comfortable to use once you have say 300 items in a list. It becomes a tough job to manage when you have multiple level of menu items and you really want to re-organise them or say bulk edit them.

Someone may please add issues or discussions in this regard if exists of drupal.org.

Extending Drupal
Extending Drupal core is a hard task, users struggle to understand that you can extend Drupal and than how to find and install the right project.

• Discussion on understanding that you can extend Drupal.
• Research on how people use the module page.
• Technical prototype of Project browser.
• Deployment of Drupal.org project browser server.
• Streamline the install/update UX, by tackling update manager issues.

Mobile
Design Drupal 8's UX for devices with small screens and touch screens.

• Strategy for the Mobile Initiative
• Re-thinking the Drupal admin interface through HTML prototyping.
• Optimizing core for mobile, by following mobile issues.

Focused install profile
Drupal core lacks focus in any of its core install profiles. The Snowman initiative plans to change this and provide a profile focussed on building a small community website.

• Research and discuss usecases for snowman.

______________________________________________________________________

Community

Research activities
We have done a lot of research this cycle, to understand the problems that users run into and how our new improvements perform.

• Google UX Study 2012 Detailed Results.
• University of Minesota UX Study Results.
• UX Study on creating content types.

Growing the UX-Team
The UX-team is very small and we want to educate more developers and engage more designers.

• Feedback sessions for initiatives
• Bi-weekly UX meetings in #drupal-usability in IRC on Mondays at UTC 8PM (4PM EST)
• Close collaborations with designers, researchers and developers on (contrib) projects.
• Drupal event sessions on Drupal 8UX, pattern library, user experience and design in opensource

Building a pattern library
We are in the process of building a pattern library, which will contain the majority of standardized UI patterns within Drupal Core. The goal is to improve this library further, add missing patterns and add useful tutorials to make your contrib project more usable.

• Requires additional patterns and descriptions in Listings, Form elements and Information Architecture
• Research on consistency across form errors, buttons and flow.

Drupal.org UX improvements

• Improving the Community/Support/Getting-involved landing pages.
• Developing a strategy for Drupal.org content improvements

Get a Drupal.org account

Why You Should Sign Up On Drupal.org

You came for the software, so be a part of the community!

Signing up for a user account on Drupal.org is the first step to participating in the Drupal community. There are many reasons why you should sign up for a Drupal.org account, but a very compelling reason is that you will be able to see and do the following things that you can not see or do prior to registering:

• Post questions in the Drupal.org Forum.
• Report a bug in a module or theme's issue queue.
• Request new features in a module or theme.
• Report documentation errors.
• Filter modules, themes and translations by Drupal version.

Not only does this help you, but every issue, bug, or error that is reported by you and gets fixed is a benefit to the entire Drupal community!

There is no need to worry - Drupal.org will not spam you or send you newsletters (unless you request them). So sign up today and be a part of the community. We would love to have you!

Please note: All user accounts are for individuals. Accounts created for more than one user or those using anonymous mail services will be blocked when discovered.

How To Register

1. Find the new account registration page, by either
   • Clicking on the "Login / Register" tab in the header of any page on the site, then click on "Create new account" or,
   • Going directly to the registration page.

2. Fill out the form.
   Username: (Required) Your username can be your full name or your nickname. You can use numbers or letters, but punctuation is not allowed except for periods, hyphens, and underscores.
   Email address: (Required) You have to provide a valid email address. This address isnot made public and will only be used by the system to send out new passwords, news, and notifications.
   Full name: (Optional) Include more than one forename if you have them.
   Country: (Required) Select the country you live in.
3. Wait for the confirmation email from info@drupal.org.
   If you filled out the form correctly you will receive an email with your initial password and a one-time login link. Now you can login.
   If you failed to get the email, check to make sure you didn't misspell your address, and that your spam filter didn't block the email.
4. Log in, using either the "Login / Register" tab, directly from the Login page, or by clicking on the one-time login link in the email you just received.
   If you entered the password directly, make sure you enter your password exactly as specified in the email. (The password is case sensitive.)
5. Change your password by entering a new password in the “Password” and “Confirm password” fields, and clicking “Submit” at the bottom of the page.
6. Optionally, edit your profile information by clicking the “Edit” tab just below your username. This allows you to customize your http://drupal.org/ account including time zone, email account, full name, etc.

HTML5 Initiative for Drupal

HTML5 is one of five major initiatives Dries has outlined for Drupal 8 development. You can read the initiative announcements here:

• HTML5 in Drupal 8 by Dries Buytaert
• Drupal 8 HTML5 Initiative by Jacine Luisi

Initiative Goals

The main goals of this initiative will be to implement HTML5 in Drupal core in a way that will:

• Have the most benefit for end users.
• Enable contributed modules and themes to evolve using HTML5.
• Allow theme developers to control where to use the new semantic elements, and opt out entirely if they so choose.

We want to ensure we're spending our time implementing features that will directly benefit Drupal's user base the most. As part of this initiative we'll focus mostly on:

• Adding support for the new form elements to Drupal's Form API.
• Adding new semantic elements in core templates in an appropriate way.
• Adding ARIA roles to markup to improve accessibility.
• Simplifying style and script elements.
• Ensuring input filters and functions accept HTML5 elements.

Proposals to implement other areas of HTML5 will be considered on a case by case basis.

Initiative Roadmap

Phase 1

1. Implement a JavaScript fallback for non-supported browsers.
2. Implement Form API support for new HTML elements.
3. Re-factor templates and theme functions to use new HTML5 elements.
4. Add WAI-ARIA roles where possible in markup.
5. #1174756: Convert <head> markup to HTML5
6. #732992: Allow filter_xss_admin() to accept HTML5 tags
7. #1280522: _filter_autop (line break converter) does not recognize html5 block level elements

Phase 2 Possibilities

1. Rich media handling with <video> and <audio>
2. Ability to select wrapper HTML tag in the UI for Drupal's building blocks.
3. Add your proposal here.

• Guiding Principles
• CSS Cleanup
• Contributing to the HTML5 Initiative
• Implement Form API support for new HTML5 elements
• JavaScript fallback for HTML5 elements in non-supported browsers
• Re-factor templates and theme functions to use new HTML5 elements
• Rich media handling with <video> and <audio>
• WAI-ARIA Roles
• HTML5 Fork [Sandbox] repository