Download - Html5 coredevsummit
![Page 1: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/1.jpg)
HTML5all your Drupal XHTML belong to us
Jen Simmonsaka: jensimmons
(creator of Bartik)
Sunday, August 22, 2010
![Page 3: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/3.jpg)
HTML5 for Web DesignersJeremy Keith
Sunday, August 22, 2010
![Page 4: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/4.jpg)
Bruce LawsonRemy Sharp
Introducing HTML5
Sunday, August 22, 2010
![Page 5: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/5.jpg)
HTML5 Awesomeness(That I’m not going to talk about)
• <audio>
• <video>
• <canvas>
• data storage
• applicationCache
• geolocation
• web workers
• messaging API
• web sockets
• javascript APIs
Sunday, August 22, 2010
![Page 6: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/6.jpg)
HTML5 Forms• <input type=text>
• <input type=email>
• <input type=url>
• <input type=date>
• <input type=time>
• <input type=range>
• <input type=color>
• <input type=text>
• <input type=tel>
• <input type=week>
Sunday, August 22, 2010
![Page 7: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/7.jpg)
HTML5 Form Attributes
• autocomplete, min, max, multiple, pattern, step, required, placeholder
• <input type=email required>
• <input type=range min=1 max=11 name=tap>
Sunday, August 22, 2010
![Page 8: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/8.jpg)
HTML5 Markup• <section>
• <aside>
• <article>
• <header>
• <hrgoup>
• <footer>
• <time>
• <nav>
• <small>
• <mark>
plus ARIA Roles
Sunday, August 22, 2010
![Page 9: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/9.jpg)
HTML5 Header
• <meta charset=“UTF-8”>
• <link rel=”stylesheet” href=“file.css”>
• <script src=“file.js”></script>
Sunday, August 22, 2010
![Page 10: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/10.jpg)
A Node in HTML5<article id="node-title" class="node clearfix" > <header> <h2 class="title"><a href="xxx">My First Node</a></h2> <small>Published on <time datetime=2010-08-22 pubdate>
August 22, 2010</time></small> </header> <p>Blah blah blah</p> <p>Blah blah blah</p> <p>Blah blah blah</p> <footer> <nav class="taxonomy"><ul><li><a>HTML5</a></li></ul> </nav> </footer></article> <!-- /node-->
Sunday, August 22, 2010
![Page 11: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/11.jpg)
HTML5: Pieces of Cake
• <! doctype html>; just change it in the theme
• marking up the page.tpl.php file with HTML5 elements, just do it. Also block.tpl, node.tpl…
Sunday, August 22, 2010
![Page 12: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/12.jpg)
Harder: HTML Deep in Drupal• $submitted
• menus
• $head
• $styles, $scripts
• input forms
• ??????
Sunday, August 22, 2010
![Page 13: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/13.jpg)
Sunday, August 22, 2010
![Page 14: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/14.jpg)
Solution: Short-termoverride everything Drupal does when it makes HTML
Sunday, August 22, 2010
![Page 15: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/15.jpg)
• Allow people developing Drupal sites to more-easily change the HTML markup
• Might mean putting Semantic Views, Semantic CCK, Semantic Menus, Semantic Everything —> into Core
• Or doing something else that’s pretty radical
Solution: Long-termWe may need to seriously rethink how Drupal makes HMTL
Sunday, August 22, 2010
![Page 16: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/16.jpg)
Bottom Line
• HTML5 is all about the markup being more semantic, and conveying information about the content and the context of that content.
• If Drupal gets a reputation of “yeah, but you can’t really do HMLT5 in Drupal without a whole lot of hard work” — we will be in trouble.
Sunday, August 22, 2010
![Page 17: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/17.jpg)
Bottom Line
• The time to get this right is Drupal 8.
• We need to change Drupal so it can do HTML5, well, and correctly.
• And we need to start now.
Sunday, August 22, 2010
![Page 18: Html5 coredevsummit](https://reader034.vdocuments.us/reader034/viewer/2022051412/54c83ccb4a795961498b45e9/html5/thumbnails/18.jpg)
MORE• http://groups.drupal.org/html5
• http://groups.drupal.org/node/82664
• HTML Tools http://drupal.org/project/html5_tools
• Elements http://drupal.org/project/elements
• HTML Base http://drupal.org/project/html5_base
Sunday, August 22, 2010