• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,030
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
102
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. DRUPAL + HTML5 JACINE LUISI @jacine
  • 2. HI THERE!Front end developer @ Gravitek LabsCo-maintainer for Markup and CSS for Drupal 7Drupal 8 HTML5 Initiative OwnerCo-author “The Definitive Guide to Drupal 7” http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 3. DRUPAL 8 IS GOINGHTML5! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 4. HTML5 WILL BRING...Better and more semantic markupBetter accessibility out of the box with ARIA rolesMore intuitive and usable forms http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 5. NEW HTML5 ELEMENTS<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> http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 6. NEW FORM ELEMENTS & INPUT TYPES <keygen> <input type="color"> <meter> <input type="email"> <output> <input type="date"> + more variations <progress> <input type="number"> <input type="range"> <input type="search">Lots of new attributes too...http://wufoo.com/html5/ <input type="tel"> <input type="url"> http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 7. EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> EASY PLACEHOLDER TEXTDIFFERENT KEYPAD CLIENT-SIDE VALIDATION http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 8. AND MORE AWESOMENESS! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 9. SO... WHAT’S THE PLAN? http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 10. PHASE 1Implement a JavaScript fallback for non-supported browsers SUMMARY ISSUE #1179520 #1077878Implement new input types and form elements in Forms API SUMMARY ISSUE #1183606 #675348Use new HTML5 elements in templates and theme functions SUMMARY ISSUE #1193054 #1077510Add WAI-ARIA roles to markup SUMMARY ISSUE #1179668 #966396Convert <head> contents to HTML5 SUMMARY ISSUE N/A #1174756Ensure filter functions accept HTML5 elements SUMMARY ISSUE N/A #732992 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 11. PHASE 2 POSSIBILITIES...Rich media handling with <video> and <audio> SUMMARY ISSUE #1174734 #1174892Ability to select wrapper elements in the User Interface SUMMARY ISSUE TBD TBDWYSIWYG editor that uses contenteditable. SUMMARY ISSUE TBD TBD http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 12. A HUGE OPPORTUNITY FOR FRONT END DEVELOPERS WITH DRUPAL http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 13. SOUND FAMILIAR?You are frustrated with HATE Drupal’s markupYou are frustrated with HATE Drupal’s CSSYou know you can do it betterYou want to get involved with core development http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 14. THIS IS YOUR CHANCE TO GET INVOLVEDDevelopers are paying attention!Markup and CSS will finally get the focus neededfor us to get the job done.... IF we all come together and make it happen. http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 15. HERE’S HOW YOU CANGET INVOLVED... http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 16. JOIN THE WORKING GROUP http://groups.drupal.org/html5/drupal-8 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 17. ATTEND THE INITIATIVE MEETINGS JOIN #DRUPAL-HTML5 in IRCWe have meetings everyother Tuesday at 16:00EST to discuss issues/progress.Events are posted here:http://groups.drupal.org/html5The chat room is alwaysfull of people involvedwith the initiative. Useit. https://www.google.com/calendar/embed?src=drupal8html5%40gmail.com&ctz=UTC http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 18. FOLLOW US ON TWITTER http://twitter.com/drupal8html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 19. READ ABOUT THE INITIATIVE http://drupal.org/html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 20. READ THE ROADMAP SUMMARIES http://drupal.org/html5#roadmap http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 21. WRITE CODE. REVIEW PATCHES.drupal.org/project/issues/search/drupal?status[]=Open&version[]=8.x&issue_tags=html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 22. HTML5 RESOURCESDive into HTML5http://diveintohtml5.org/HTML5 Doctorhttp://html5doctor.com/HTML5 technical specification for web developershttp://developers.whatwg.org/When can I use...http://caniuse.com/HTML5 Accessibilityhttp://html5accessibility.com/index-aria.htmlHTML5 Security Cheat sheethttp://html5sec.org/ http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 23. THANKS FOR WATCHING! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8