Jacine Luisi, profile picture
Uploaded byJacine Luisi
4,411 views

Drupal 8 HTML5 Initiative

The document discusses plans to implement HTML5 in Drupal 8. It describes how Drupal 8 will support new HTML5 elements, forms, and semantics which will improve accessibility and usability. It encourages front end developers to get involved by joining the HTML5 working group, attending meetings, reviewing code, and helping with the ongoing work towards the HTML5 initiative's goals.

Embed presentation

Downloaded 108 times
DRUPAL + HTML5 JACINE LUISI @jacine
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/html5 http://groups.drupal.org/html5/drupal-8
DRUPAL 8 IS GOING HTML5! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
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/html5 http://groups.drupal.org/html5/drupal-8
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
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
EXAMPLE <input type="tel" required="required" placeholder="2125551212" name="tel" id="tel"> EASY PLACEHOLDER TEXT DIFFERENT KEYPAD CLIENT-SIDE VALIDATION http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
AND MORE AWESOMENESS! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
SO... WHAT’S THE PLAN? http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
PHASE 1 Implement a JavaScript fallback for non-supported browsers SUMMARY ISSUE #1179520 #1077878 Implement new input types and form elements in Forms API SUMMARY ISSUE #1183606 #675348 Use new HTML5 elements in templates and theme functions SUMMARY ISSUE #1193054 #1077510 Add WAI-ARIA roles to markup SUMMARY ISSUE #1179668 #966396 Convert <head> contents to HTML5 SUMMARY ISSUE N/A #1174756 Ensure filter functions accept HTML5 elements SUMMARY ISSUE N/A #732992 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
PHASE 2 POSSIBILITIES... Rich media handling with <video> and <audio> SUMMARY ISSUE #1174734 #1174892 Ability to select wrapper elements in the User Interface SUMMARY ISSUE TBD TBD WYSIWYG editor that uses contenteditable. SUMMARY ISSUE TBD TBD http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
A HUGE OPPORTUNITY FOR FRONT END DEVELOPERS WITH DRUPAL http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
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/html5 http://groups.drupal.org/html5/drupal-8
THIS IS YOUR CHANCE TO GET INVOLVED 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. http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
HERE’S HOW YOU CAN GET INVOLVED... http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
JOIN THE WORKING GROUP http://groups.drupal.org/html5/drupal-8 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
ATTEND THE INITIATIVE MEETINGS JOIN #DRUPAL-HTML5 in IRC 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. https://www.google.com/calendar/embed?src=drupal8html5%40gmail.com&ctz=UTC http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
FOLLOW US ON TWITTER http://twitter.com/drupal8html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
READ ABOUT THE INITIATIVE http://drupal.org/html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
READ THE ROADMAP SUMMARIES http://drupal.org/html5#roadmap http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
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
HTML5 RESOURCES Dive 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/html5 http://groups.drupal.org/html5/drupal-8
THANKS FOR WATCHING! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8

More Related Content

PDF
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
byDrupalCamp Kyiv
 
PDF
Building mobile applications with DrupalGap
byAlex S
 
PDF
The Outcome Economy
byHelge Tennø
 
KEY
5 ways to embrace HTML5 today
byDaniel Ryan
 
PPT
Html5 drupal7 with mandakini kumari(1)
byMandakini Kumari
 
PPTX
Enhancing SharePoint 2010 for the iPad
byMichael Greene
 
PDF
Basics of HTML5 for Phonegap
byRakesh Jha
 
KEY
Theming with Skinr
byJacine Luisi
 
"Paragraphs are more powerful than you can expect" from Vasily Jaremchuk for ...
byDrupalCamp Kyiv
 
Building mobile applications with DrupalGap
byAlex S
 
The Outcome Economy
byHelge Tennø
 
5 ways to embrace HTML5 today
byDaniel Ryan
 
Html5 drupal7 with mandakini kumari(1)
byMandakini Kumari
 
Enhancing SharePoint 2010 for the iPad
byMichael Greene
 
Basics of HTML5 for Phonegap
byRakesh Jha
 
Theming with Skinr
byJacine Luisi
 

Similar to Drupal 8 HTML5 Initiative

PPT
The State of Drupal 8
bynyccamp
 
PDF
HTML5
bySanjeev Kumar Jaiswal
 
KEY
HTML5: what's new?
byChris Mills
 
PDF
HTML5 & CSS3 in Drupal (on the Bayou)
byMediacurrent
 
PDF
Dev.w3.org html5
byedenic_count
 
PDF
SW Drupal Summit: HTML5+Drupal
byJen Simmons
 
PDF
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
byMediacurrent
 
PPT
HTML5 Webinar - Mind Storm Software
byRomin Irani
 
PDF
Real solutions, no tricks
byJens Grochtdreis
 
PDF
Adaptive Web Design Workshop [Iceweb 2011]
byAaron Gustafson
 
PDF
Adaptive Web Design Workshop [inspire 2011]
byAaron Gustafson
 
PDF
Adaptive Web Design Workshop [WebVisions NYC 2012]
byAaron Gustafson
 
PPTX
Peter lubbers-html5-overview-sf-dev-conf-2011
byPeter Lubbers
 
PDF
Adaptive Web Design [WebVisions Portland 2012]
byAaron Gustafson
 
PPTX
Super quick introduction to html5
byWoody Pewitt
 
PPTX
Html5 and css3
byDeniss Platonov
 
PDF
Dev.w3.org html5
byedenic_count
 
PDF
Ajax and Accessibiity
byMark Meeker
 
PDF
Html5 coredevsummit
byJen Simmons
 
PDF
HTML5: The New html for the web
byelliando dias
 
The State of Drupal 8
bynyccamp
 
HTML5
bySanjeev Kumar Jaiswal
 
HTML5: what's new?
byChris Mills
 
HTML5 & CSS3 in Drupal (on the Bayou)
byMediacurrent
 
Dev.w3.org html5
byedenic_count
 
SW Drupal Summit: HTML5+Drupal
byJen Simmons
 
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
byMediacurrent
 
HTML5 Webinar - Mind Storm Software
byRomin Irani
 
Real solutions, no tricks
byJens Grochtdreis
 
Adaptive Web Design Workshop [Iceweb 2011]
byAaron Gustafson
 
Adaptive Web Design Workshop [inspire 2011]
byAaron Gustafson
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
byAaron Gustafson
 
Peter lubbers-html5-overview-sf-dev-conf-2011
byPeter Lubbers
 
Adaptive Web Design [WebVisions Portland 2012]
byAaron Gustafson
 
Super quick introduction to html5
byWoody Pewitt
 
Html5 and css3
byDeniss Platonov
 
Dev.w3.org html5
byedenic_count
 
Ajax and Accessibiity
byMark Meeker
 
Html5 coredevsummit
byJen Simmons
 
HTML5: The New html for the web
byelliando dias
 

Recently uploaded

PPTX
On-Device AI with Gemma 3n and PaliGemma 2 Session Slides - GDG VESIT
bygdgcodecellcmpn
 
PDF
DevOps GenAI_ How Generative AI Is Changing Software Delivery.pdf
byDevseccops.ai
 
PPTX
Lecture 05. API Security for DevSecOps Eng.pptx
byvinocol222
 
PDF
SEO in Charleston SC | Local SEO Strategies to Grow Your Business.pdf
bycustomdigitalsolutio1
 
PDF
Mobile Onboarding UX 11 Best Practices for Retention (2026).pdf
byDesign Studio UI UX
 
PPTX
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
PDF
How to Connect HP LaserJet MFP M234dwe to WiFi
byPrinter Tales
 
PDF
Best Bank Statement Converter Software - A Documentation-Based Meta-Analysis ...
bylewisconrada
 
PDF
Higgsfield AI: The New Way to Create Cinematic Video
bytechnologyupside
 
PDF
Chapter 1 Introduction to Computer Security.pdf
byGetnet Tigabie Askale -(GM)
 
PDF
Presentation on Four Stroke Engine of Ic engine
bySonam Sherpa
 
PDF
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
PDF
The Rise of AI Fashion Tools and Innovations in 2026
bymockitseo
 
PDF
Taxonomy Principles to Support Knowledge Management at a Not-for-Profit
byEnterprise Knowledge
 
PPTX
Lecture 04. about Black heads and Hackerss.pptx
byvinocol222
 
PPTX
Sensors-and-Actuators-in-IoT-Systems.pptx
byMuhammedNihal54
 
PPTX
Unit 1 Introduction of Computer Networks
bySuvarnaSharma5
 
PDF
The CISO_Transformation_Playbook From Cost Centre to Chief Trust Officer
bysajjasridhar1990
 
PDF
Strengthening cybern resilience for a leading indian Financial Services group
bypandeydevika621
 
PDF
From Compliance to Competitive Advantage Board-Level Cyber Governance Under D...
bySaraDavis91
 
On-Device AI with Gemma 3n and PaliGemma 2 Session Slides - GDG VESIT
bygdgcodecellcmpn
 
DevOps GenAI_ How Generative AI Is Changing Software Delivery.pdf
byDevseccops.ai
 
Lecture 05. API Security for DevSecOps Eng.pptx
byvinocol222
 
SEO in Charleston SC | Local SEO Strategies to Grow Your Business.pdf
bycustomdigitalsolutio1
 
Mobile Onboarding UX 11 Best Practices for Retention (2026).pdf
byDesign Studio UI UX
 
KTU-PEMET413 -MODULE 2-POLYMER MATRIX COMPOSITES - LECTURE 1.pptx
byVINAY B
 
How to Connect HP LaserJet MFP M234dwe to WiFi
byPrinter Tales
 
Best Bank Statement Converter Software - A Documentation-Based Meta-Analysis ...
bylewisconrada
 
Higgsfield AI: The New Way to Create Cinematic Video
bytechnologyupside
 
Chapter 1 Introduction to Computer Security.pdf
byGetnet Tigabie Askale -(GM)
 
Presentation on Four Stroke Engine of Ic engine
bySonam Sherpa
 
Josh Chu Boston - An Innovative Technology Executive
byJosh Chu Boston
 
The Rise of AI Fashion Tools and Innovations in 2026
bymockitseo
 
Taxonomy Principles to Support Knowledge Management at a Not-for-Profit
byEnterprise Knowledge
 
Lecture 04. about Black heads and Hackerss.pptx
byvinocol222
 
Sensors-and-Actuators-in-IoT-Systems.pptx
byMuhammedNihal54
 
Unit 1 Introduction of Computer Networks
bySuvarnaSharma5
 
The CISO_Transformation_Playbook From Cost Centre to Chief Trust Officer
bysajjasridhar1990
 
Strengthening cybern resilience for a leading indian Financial Services group
bypandeydevika621
 
From Compliance to Competitive Advantage Board-Level Cyber Governance Under D...
bySaraDavis91
 

Drupal 8 HTML5 Initiative

  • 1.
    DRUPAL + HTML5 JACINE LUISI @jacine
  • 2.
    HI THERE! Front enddeveloper @ 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/html5 http://groups.drupal.org/html5/drupal-8
  • 3.
    DRUPAL 8 IS GOING HTML5! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 4.
    HTML5 WILL BRING... Betterand more semantic markup Better accessibility out of the box with ARIA roles More 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 TEXT DIFFERENT 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 1 Implement aJavaScript fallback for non-supported browsers SUMMARY ISSUE #1179520 #1077878 Implement new input types and form elements in Forms API SUMMARY ISSUE #1183606 #675348 Use new HTML5 elements in templates and theme functions SUMMARY ISSUE #1193054 #1077510 Add WAI-ARIA roles to markup SUMMARY ISSUE #1179668 #966396 Convert <head> contents to HTML5 SUMMARY ISSUE N/A #1174756 Ensure 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... Richmedia handling with <video> and <audio> SUMMARY ISSUE #1174734 #1174892 Ability to select wrapper elements in the User Interface SUMMARY ISSUE TBD TBD WYSIWYG 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 arefrustrated 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/html5 http://groups.drupal.org/html5/drupal-8
  • 14.
    THIS IS YOURCHANCE TO GET INVOLVED 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. http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 15.
    HERE’S HOW YOU CAN GET INVOLVED... http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 16.
    JOIN THE WORKINGGROUP http://groups.drupal.org/html5/drupal-8 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 17.
    ATTEND THE INITIATIVEMEETINGS JOIN #DRUPAL-HTML5 in IRC 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. 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 ONTWITTER http://twitter.com/drupal8html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 19.
    READ ABOUT THEINITIATIVE http://drupal.org/html5 http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 20.
    READ THE ROADMAPSUMMARIES http://drupal.org/html5#roadmap http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8
  • 21.
    WRITE CODE. REVIEWPATCHES. 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 RESOURCES Dive intoHTML5 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/html5 http://groups.drupal.org/html5/drupal-8
  • 23.
    THANKS FOR WATCHING! http://drupal.org/html5 http://groups.drupal.org/html5/drupal-8

Editor's Notes