drupal 8 html5 initiative

23
DRUPAL + HTML5 JACINE LUISI @jacine

Upload: jacine-luisi

Post on 27-Jan-2015

117 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Drupal 8 HTML5 Initiative

DRUPAL + HTML5JACINE LUISI @jacine

Page 2: Drupal 8 HTML5 Initiative

HI THERE!

Front end developer @ Gravitek Labs

Co-maintainer for Markup and CSS for Drupal 7

Drupal 8 HTML5 Initiative Owner

Co-author “The Definitive Guide to Drupal 7”

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 3: Drupal 8 HTML5 Initiative

DRUPAL 8 IS GOING

HTML5!

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 4: Drupal 8 HTML5 Initiative

HTML5 WILL BRING...

Better and more semantic markup

Better accessibility out of the box with ARIA roles

More intuitive and usable forms

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 5: Drupal 8 HTML5 Initiative

NEW HTML5 ELEMENTS

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

<article> <details> <hgroup> <progress>

<aside> <summary> <keygen> <section>

<audio> <embed> <mark> <time>

<bdi> <figure> <menu> <track>

<canvas> <figcaption> <meter> <video>

<command> <footer> <nav> <source>

<datalist> <header> <output> <wbr>

Page 6: Drupal 8 HTML5 Initiative

NEW FORM ELEMENTS & INPUT TYPES

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

<keygen>

<meter>

<output>

<progress>

<input type="color">

<input type="email">

<input type="date"> + more variations

<input type="number">

<input type="range">

<input type="search">

<input type="tel">

<input type="url">

Lots of new attributes too...http://wufoo.com/html5/

Page 7: Drupal 8 HTML5 Initiative

EASYPLACEHOLDER TEXT

EXAMPLE

<input type="tel" required="required" placeholder="2125551212" name="tel" id="tel">

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

DIFFERENT KEYPAD

CLIENT-SIDEVALIDATION

Page 8: Drupal 8 HTML5 Initiative

AND MORE AWESOMENESS!

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 9: Drupal 8 HTML5 Initiative

SO... WHAT’S THE

PLAN?

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 10: Drupal 8 HTML5 Initiative

PHASE 1

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

ISSUE

#1077878

SUMMARY

#1179520

Implement a JavaScript fallback for non-supported browsers

ISSUE

#675348

SUMMARY

#1183606

Implement new input types and form elements in Forms API

ISSUE

#1077510

SUMMARY

#1193054

Use new HTML5 elements in templates and theme functions

ISSUE

#966396

SUMMARY

#1179668

Add WAI-ARIA roles to markup

ISSUE

#1174756

SUMMARY

N/A

Convert <head> contents to HTML5

ISSUE

#732992

SUMMARY

N/A

Ensure filter functions accept HTML5 elements

Page 11: Drupal 8 HTML5 Initiative

PHASE 2 POSSIBILITIES...

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

ISSUE

#1174892

SUMMARY

#1174734

Rich media handling with <video> and <audio>

ISSUE

TBD

SUMMARY

TBD

Ability to select wrapper elements in the User Interface

ISSUE

TBD

SUMMARY

TBD

WYSIWYG editor that uses contenteditable.

Page 12: Drupal 8 HTML5 Initiative

A HUGE OPPORTUNITYFOR FRONT END DEVELOPERS WITH

DRUPAL

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 13: Drupal 8 HTML5 Initiative

SOUND FAMILIAR?

You are frustrated with HATE Drupal’s markup

You are frustrated with HATE Drupal’s CSS

You know you can do it better

You want to get involved with core development

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 14: Drupal 8 HTML5 Initiative

Developers are paying attention!

Markup and CSS will finally get the focus needed for us to get the job done.

... IF we all come together and make it happen.

THIS IS YOUR CHANCE TO

GET INVOLVED

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 15: Drupal 8 HTML5 Initiative

HERE’S HOWYOU CAN

GET INVOLVED...

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 16: Drupal 8 HTML5 Initiative

JOIN THE WORKING GROUP http://groups.drupal.org/html5/drupal-8

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 17: Drupal 8 HTML5 Initiative

ATTEND THE INITIATIVE MEETINGSJOIN #DRUPAL-HTML5 in IRC

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

https://www.google.com/calendar/embed?src=drupal8html5%40gmail.com&ctz=UTC

We have meetings every other Tuesday at 16:00 EST to discuss issues/progress.

Events are posted here: http://groups.drupal.org/html5

The chat room is always full of people involved with the initiative. Use it.

Page 18: Drupal 8 HTML5 Initiative

FOLLOW US ON TWITTER http://twitter.com/drupal8html5

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 19: Drupal 8 HTML5 Initiative

READ ABOUT THE INITIATIVE http://drupal.org/html5

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 20: Drupal 8 HTML5 Initiative

READ THE ROADMAP SUMMARIES http://drupal.org/html5#roadmap

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 21: Drupal 8 HTML5 Initiative

WRITE CODE. REVIEW PATCHES. drupal.org/project/issues/search/drupal?status[]=Open&version[]=8.x&issue_tags=html5

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 22: Drupal 8 HTML5 Initiative

HTML5 RESOURCESDive into HTML5 http://diveintohtml5.org/

HTML5 Doctor http://html5doctor.com/

HTML5 technical specification for web developers http://developers.whatwg.org/

When can I use... http://caniuse.com/

HTML5 Accessibility http://html5accessibility.com/index-aria.html

HTML5 Security Cheat sheet http://html5sec.org/

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8

Page 23: Drupal 8 HTML5 Initiative

THANKS FOR WATCHING!

http://drupal.org/html5http://groups.drupal.org/html5/drupal-8