html5 & css3 in drupal (on the bayou)
DESCRIPTION
HTML5 and CSS3 are a part of the new Web 3.0 toolbox! This session will walk you through easy ways to use some of the more advanced features in HTML5. We will explain the uses for HTML5 and CSS3 that will enhance your design and create a better user experience for your audience. If you are familiar with the basics, but want to know the best practices for integrating HTML5 features into your Drupal site now, this is the session for you.Who’s this for:Themers who are familiar with basic CSS3 concepts and want to take it to the next levelPractical uses of both HTML5 and CSS3 for intermediate developersWhat you’ll learn:Real Life applications to start using CSS3 and HTML5 todayTactics to bring older browsers up to speed and enhance compatibilityUse HTML5 and CSS3 to Enhance UXHow HTML5 and CSS3 can help you design for mobileHTML5Microformats, Form API, Semantic captions for imagesHow to Enhance Adaptive Theme (D7 theme that uses HTML5)HTML5 Themes and ModulesCSS3Text in ColumnsTransitions (& animation?)CSS only BackgroundsUsing SVGThe Future of CSSTRANSCRIPT
![Page 1: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/1.jpg)
Beginner & Intermediate Guide to HTML5/CSS3 In Drupal
By Kendall Totten @starryeyez024
#HTML5CSS3
http://t.co/VssZle71
1Thursday, December 8, 2011
![Page 2: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/2.jpg)
2Thursday, December 8, 2011
![Page 3: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/3.jpg)
BROUGHT TO YOU BY
THE GOOD FOLKS AT
DO DRUPAL RIGHT
2Thursday, December 8, 2011
![Page 4: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/4.jpg)
• Bachelors in Communication Technology & Graphic Design from Eastern Michigan University
• Drupal Designer & Theme Specialist at Mediacurrent
• Working in the Drupal space for about 3 years
• Working with Drupal since version 5
About Me
Kendall Totten
3Thursday, December 8, 2011
![Page 5: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/5.jpg)
• Bachelors in Communication Technology & Graphic Design from Eastern Michigan University
• Drupal Designer & Theme Specialist at Mediacurrent
• Working in the Drupal space for about 3 years
• Working with Drupal since version 5
About Me
Kendall Totten
3Thursday, December 8, 2011
![Page 6: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/6.jpg)
What will you learn?
4Thursday, December 8, 2011
![Page 7: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/7.jpg)
What will you learn?HTML5• Semantic Web• Microformats• Real Life applications• Tactics to enhance
compatibility • Enhance UX • Semantic image captions• The Omega Theme• HTML5 Themes and
Modules• How to start using
HTML5 Today!
CSS3• Text in Columns• Transitions • CSS3Pie• Using SVG• The future of CSS• How CSS3 can help you
design for mobile
4Thursday, December 8, 2011
![Page 8: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/8.jpg)
5Thursday, December 8, 2011
![Page 9: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/9.jpg)
HTML5?What is
5Thursday, December 8, 2011
![Page 10: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/10.jpg)
6Thursday, December 8, 2011
![Page 11: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/11.jpg)
6Thursday, December 8, 2011
![Page 12: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/12.jpg)
Web
6Thursday, December 8, 2011
![Page 13: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/13.jpg)
Help
Web
BrowserSupport
HTML4.01
Flash
Plugins
6Thursday, December 8, 2011
![Page 14: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/14.jpg)
Help
Web HTML5
BrowserSupport
HTML4.01
Flash
Plugins
6Thursday, December 8, 2011
![Page 15: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/15.jpg)
Next generation of HTMLThe latest version of HTML known as HTML5, a set of capabilities that gives web designers and developers the ability to create the next generation of great online applications.
“Upgrading” to HTML5 can be as simple as changing your doctype.
<!DOCTYPE html>and resetting your stylesheet:
http://html5doctor.comhtml-5-reset-stylesheet
7Thursday, December 8, 2011
![Page 16: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/16.jpg)
A Better Blend
8Thursday, December 8, 2011
![Page 17: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/17.jpg)
A Better Blend
HTML5 CSS3 JS
8Thursday, December 8, 2011
![Page 18: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/18.jpg)
Who Cares?
9Thursday, December 8, 2011
![Page 19: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/19.jpg)
Who Cares?
9Thursday, December 8, 2011
![Page 20: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/20.jpg)
From Dries"I believe in HTML5 enough that I wanted to make it one of the top 5 initiatives for Drupal 8; and switch Drupal's default doctype from XHTML to HTML5. This is the fifth official Drupal 8 initiative after the Configuration Management, Design,Web Services and Multilingual initiatives."
— Dries Buytaert
10Thursday, December 8, 2011
![Page 21: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/21.jpg)
HTML5 Fallout• Change Doctype• Start using Outliner• Use Header, Section,
Footer, and Nav Tags• Start thinking about
Semantics Markup
11Thursday, December 8, 2011
![Page 22: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/22.jpg)
HTML5 Fallout• Change Doctype• Start using Outliner• Use Header, Section,
Footer, and Nav Tags• Start thinking about
Semantics Markup
11Thursday, December 8, 2011
![Page 23: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/23.jpg)
HTML5 Elements
12Thursday, December 8, 2011
![Page 24: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/24.jpg)
HTML5 ElementsHeaddoctypehtmlheadtitlebaselinkmetastylescriptnoscript
Sectionsbodyarticlenavasidesectionheaderfooterh1-h6hgroupaddress
Groupingphrpreblockquoteolullidl, dt, ddfigurefigcaptiondiv
Tablestablecaptiontheadtbodytfoottrthtdcolcolgroup
12Thursday, December 8, 2011
![Page 25: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/25.jpg)
http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdf
13Thursday, December 8, 2011
![Page 26: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/26.jpg)
http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdf
13Thursday, December 8, 2011
![Page 27: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/27.jpg)
HTML5 Elements
14Thursday, December 8, 2011
![Page 28: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/28.jpg)
HTML5 ElementsFormsformfieldsetlegendlabelinputbuttonselectdatalistoptgroupoptiontextareakeygenoutputprogressmeter
Embeddedimgiframeembedobjectparamvideoaudiosourcecanvastrackmaparea
Text-levelaemstrongi, bussmallabbrqcitedfnsub, suptimecodekbdsampwbr
varmarkbdibdoruby, rt, rpspanbr
Interactivedetailssummarycommandmenu
Editsdel, ins
14Thursday, December 8, 2011
![Page 29: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/29.jpg)
15Thursday, December 8, 2011
![Page 30: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/30.jpg)
SemanticsHTML5
15Thursday, December 8, 2011
![Page 31: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/31.jpg)
Getting information off the Internet is like taking a drink from a fire hydrant.
—Mitchell Kapor
16Thursday, December 8, 2011
![Page 32: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/32.jpg)
The Missing Link
17Thursday, December 8, 2011
![Page 33: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/33.jpg)
The Missing Link
17Thursday, December 8, 2011
![Page 34: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/34.jpg)
What is Semantic Web?
"The Semantic Web is a web that is able to describe things in a way that
computers can understand."
Source: http://www.w3schools.com/semweb/default.asp
18Thursday, December 8, 2011
![Page 35: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/35.jpg)
Semantic BenefitsBy making the web understandable to machines:• Programs and web sites can exchange information• Search engines can return more relevant information in results• Data compilers can combine data from different datasets to
find new and astounding things, like weather data or stock market info.
19Thursday, December 8, 2011
![Page 36: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/36.jpg)
Semantic BenefitsBy making the web understandable to machines:• Programs and web sites can exchange information• Search engines can return more relevant information in results• Data compilers can combine data from different datasets to
find new and astounding things, like weather data or stock market info.
I love Drupal.
19Thursday, December 8, 2011
![Page 37: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/37.jpg)
Semantic BenefitsBy making the web understandable to machines:• Programs and web sites can exchange information• Search engines can return more relevant information in results• Data compilers can combine data from different datasets to
find new and astounding things, like weather data or stock market info.
I love Drupal.
19Thursday, December 8, 2011
![Page 38: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/38.jpg)
20Thursday, December 8, 2011
![Page 39: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/39.jpg)
StructureHTML5
20Thursday, December 8, 2011
![Page 40: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/40.jpg)
HTML5 Structure
21Thursday, December 8, 2011
![Page 41: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/41.jpg)
HTML5 Structure
<footer>
<aside>
<section>
<article>
<article>
<header>
<nav>
21Thursday, December 8, 2011
![Page 42: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/42.jpg)
<header> </hgroup> <article> <header> <h1>My best blog post</h1> </header></article>
OR
<header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header>
Wrong Way
22Thursday, December 8, 2011
![Page 43: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/43.jpg)
<header></hgroup> <header> <hgroup> <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> </hgroup> <p>By Richard Clark</p> <p><time datetime="2011-03-20"> March 20th, 2011</time></p></header>
<article> <header> <h1>Title of this article</h1> <p>By Richard Clark</p> </header> <p>...Lorem Ipsum dolor set amet...</p></article>
Right Way
23Thursday, December 8, 2011
![Page 44: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/44.jpg)
<section> <section id="wrapper"> <header> <h1>My super duper page</h1> </header>
<section id="main"> Section Content </section>
<section id="secondary"> Secondary Content </section>
<section id="footer"> <footer> Footer Content </footer></section>
Wrong Way
24Thursday, December 8, 2011
![Page 45: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/45.jpg)
<section> <div id="wrapper"> <article>
<header> <h1>Document Outlines</h1> Header Content </header> <section id="what-are-outlines">
<h2>What are document outlines?</h2>...content
</section><section id="outlines-in-html4"><h2>Outlines in HTML4</h2>
...content</section>
</article> <footer> Footer Content </footer></div>
Right Way
25Thursday, December 8, 2011
![Page 46: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/46.jpg)
Use An Outliner Tool• Use to group content into logical category or
sections
• With very few exceptions, section should not be used if there is no natural heading for it.
• Section should not be used like aside or nav containers just to position content
• Check your work in a HTML5 Outliner Tool
26Thursday, December 8, 2011
![Page 47: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/47.jpg)
Outliner Outputhttp://gsnedders.html5.org/outliner
27Thursday, December 8, 2011
![Page 48: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/48.jpg)
Quick Tip• “<body>” is already a wrapper and can be
hacked to achieve some pretty remarkable layout and clean code! It can have a height, width, border, drop-shadow; you name it.
• HTML5 Does not require you to actually include the “<body>” tag.
28Thursday, December 8, 2011
![Page 49: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/49.jpg)
<nav>The following shouldnʼt be enclosed by <nav> • Pagination controls• Social links • Tags on a blog post• Categories on a blog post• Tertiary navigation• Fat footers
Wrong Way
29Thursday, December 8, 2011
![Page 50: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/50.jpg)
Semantic CaptionsA caption is the definition of an image
Use Figure to enclose the image and the Figure Caption, and use some CSS3 to add a nice slide in effect.http://css-tricks.com/examples/SlideinCaptions/
<figure> <img src="yay.jpg" alt=""> <figcaption class="from-left"> yay!!! </figcaption></figure>
30Thursday, December 8, 2011
![Page 51: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/51.jpg)
<figure>
<img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelican stood on the beach"> <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a> </figcaption>
</figure>
Code Sample
31Thursday, December 8, 2011
![Page 52: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/52.jpg)
<figure>
<img src="/kookaburra.jpg" alt="Kooaburra"> <img src="/pelican.jpg" alt="Pelican stood on the beach"> <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
<figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a> </figcaption>
</figure>
Code Sample
31Thursday, December 8, 2011
![Page 53: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/53.jpg)
32Thursday, December 8, 2011
![Page 54: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/54.jpg)
MicroformatsMicrodata vs.
32Thursday, December 8, 2011
![Page 55: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/55.jpg)
33Thursday, December 8, 2011
![Page 56: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/56.jpg)
33Thursday, December 8, 2011
![Page 57: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/57.jpg)
Microdata & Microformats• Your web pages have an underlying meaning that people understand
when they read the web pages.
• But search engines have a limited understanding of what is being discussed on those pages.
• Microdata is a set of tags, introduced with HTML5, that allows you to do this.
http://schema.org
34Thursday, December 8, 2011
![Page 58: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/58.jpg)
Microdata & Microformats• Your web pages have an underlying meaning that people understand
when they read the web pages.
• But search engines have a limited understanding of what is being discussed on those pages.
• Microdata is a set of tags, introduced with HTML5, that allows you to do this.
http://schema.org
34Thursday, December 8, 2011
![Page 59: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/59.jpg)
35Thursday, December 8, 2011
![Page 60: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/60.jpg)
MicrodataHTML5 &
35Thursday, December 8, 2011
![Page 61: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/61.jpg)
MicrodataGlobal Attributes:• itemscope – Creates the Item and indicates that descendants of this
element contain information about it.
• itemprop – Indicates that its containing tag holds the value of the specified item property. The properties name and value context are described by the items vocabulary.
• itemtype – A valid URL of a vocabulary that describes the item and its properties context.
• itemid – Indicates a unique identifier of the item.
• itemref – Properties that are not descendants of the element with the itemscope attribute can be associated with the item using this attribute. Provides a list of id's of elements with additional properties elsewhere in the document.
36Thursday, December 8, 2011
![Page 62: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/62.jpg)
Microdata<div itemscope itemtype="http://data-vocabulary.org/Event">
<a itemprop="url" href="http://www.example.com/events/spinaltap" > <span itemprop="summary" >Spinal Tap</span> </a> <img itemprop="photo" src="spinal_tap.jpg" /> <span itemprop="description" > After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour. </span> When: <time itemprop="startDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 7:00PM </time>— <time itemprop="endDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 9:00PM </time> Where: <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name" >Warfield Theatre</span> <span itemprop="ocality" >San Francisco</span> </div>
http://schema.org/Event
37Thursday, December 8, 2011
![Page 63: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/63.jpg)
Microdata<div itemscope itemtype="http://data-vocabulary.org/Event">
<a itemprop="url" href="http://www.example.com/events/spinaltap" > <span itemprop="summary" >Spinal Tap</span> </a> <img itemprop="photo" src="spinal_tap.jpg" /> <span itemprop="description" > After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour. </span> When: <time itemprop="startDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 7:00PM </time>— <time itemprop="endDate" datetime="2015-10-15T19:00-08:00"> Oct 15, 9:00PM </time> Where: <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization"> <span itemprop="name" >Warfield Theatre</span> <span itemprop="ocality" >San Francisco</span> </div>
http://schema.org/Event
37Thursday, December 8, 2011
![Page 64: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/64.jpg)
Microdata Module
Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets
38Thursday, December 8, 2011
![Page 65: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/65.jpg)
Microdata Module
Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets
38Thursday, December 8, 2011
![Page 66: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/66.jpg)
39Thursday, December 8, 2011
![Page 67: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/67.jpg)
MicroformatsHTML5 &
39Thursday, December 8, 2011
![Page 68: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/68.jpg)
Microformats• Used on web pages to describe a specific type of information —for
example, a review, an event, a product, a business, or a person.
• In general, microformats use the class attribute in HTML tags (often <span> or <div>) to assign brief and descriptive names to entities and their properties.
40Thursday, December 8, 2011
![Page 69: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/69.jpg)
Microformats• Used on web pages to describe a specific type of information —for
example, a review, an event, a product, a business, or a person.
• In general, microformats use the class attribute in HTML tags (often <span> or <div>) to assign brief and descriptive names to entities and their properties.
40Thursday, December 8, 2011
![Page 70: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/70.jpg)
Code Sample<div> <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a> <img src="spinal_tap.jpg" class="photo" /> <span class="description"> After their highly-publicized search for a new drummer, Spinal Tap kicks off their latest comeback tour with a San Francisco show. </span> When: <span class="dtstart"> Oct 15, 7:00PM<span class="value-title" title="2015-10-15T19:00-08:00"></span> <span class="dtend"> 9:00PM<span class="value-title" title="2015-10-15T21:00-08:00"></span> </span> Where: <div class="location vcard"> <span class="fn org">Warfield Theatre</span>, <span class="adr"> <span class="street-address">982 Market St</span>, <span class="locality">San Francisco</span>, <span class="region">CA</span> </span> <span class="geo"> <span class="latitude"> <span class="value-title" title="37.774929" ></span> </span> </span> </div></div>
41Thursday, December 8, 2011
![Page 71: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/71.jpg)
hCard• hCard uses a class of fn (meaning Full Name) to identify a
name. As is this case there’s no element surrounding my name, we can just use a span.
• <div class="bio vcard"> <h3>About the author</h3> <p><span class="fn">Kendall Totten</span> is a web developer...
• At <a class="org" href="http://www.mediacurrent.com/"> Mediacurrent</a> she works on Drupal Theming and Front-End Development. Kendall keeps a <a class="url" href="http://www.kendallsdesign.com/">personal weblog</a> covering web development issues and themes.</p> </div>
42Thursday, December 8, 2011
![Page 72: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/72.jpg)
43Thursday, December 8, 2011
![Page 73: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/73.jpg)
43Thursday, December 8, 2011
![Page 74: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/74.jpg)
Microformat Tools• Microformat biz card creator:
http://microformats.org/code/hcard/creator
• hReview Creatorhttp://microformats.org/code/hreview/creator
• hCalendar Creatorhttp://microformats.org/code/hcalendar/creator
44Thursday, December 8, 2011
![Page 75: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/75.jpg)
45Thursday, December 8, 2011
![Page 76: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/76.jpg)
ThemesHTML5
45Thursday, December 8, 2011
![Page 77: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/77.jpg)
Drupal Themes• AdaptiveTheme
• Genesis
• Omega
• Gamma (Omega sub theme)
• HTML5 Base
• Beta (Omega sub theme)
• Boron
• Zentropy
• Plink
http://www.qemist.us/content/acquiacom-and-omega-theme-getting-down-brass-tacks
46Thursday, December 8, 2011
![Page 78: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/78.jpg)
Drupal Themes• AdaptiveTheme
• Genesis
• Omega
• Gamma (Omega sub theme)
• HTML5 Base
• Beta (Omega sub theme)
• Boron
• Zentropy
• Plink
http://www.qemist.us/content/acquiacom-and-omega-theme-getting-down-brass-tacks
46Thursday, December 8, 2011
![Page 79: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/79.jpg)
The Winners Table
http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7
47Thursday, December 8, 2011
![Page 80: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/80.jpg)
The Winners Table
http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7
47Thursday, December 8, 2011
![Page 81: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/81.jpg)
Delta Module
•Delta allows you, via the Context module to make duplicates of your theme settings (templates) for any context on your site.
•This gives you the ability to use these templates as a reaction in Context.</awesomesauce>
48Thursday, December 8, 2011
![Page 82: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/82.jpg)
JS for your Theme
• Modernizr - modernizr-1.6.min.js
• Download from: http://www.modernizr.com/
• IE6 ping fix - dd_belatedpng.js
• Download from: http://www.dillerdesign.com/experiment/DD_belatedPNG/
• HTML5 Shim -html5.js (comes included with Omega!)
• Download from: http://code.google.com/p/html5shim/
• Media-size responsive images - respond.js
• Download from: https://github.com/scottjehl/Respond#readme
49Thursday, December 8, 2011
![Page 83: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/83.jpg)
50Thursday, December 8, 2011
![Page 84: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/84.jpg)
ModulesHTML5
50Thursday, December 8, 2011
![Page 85: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/85.jpg)
Drupal ModulesThere are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development.• HTML5 Tools (your secret weapon!)
• Elements
• Video - most popular HTML5 based modulefor both Drupal 6 and 7
• VideoJS
• Media: Vimeo
• Media: Archive
• Aloha HTML5 Editor
• Plupload Integration
• MediaFront
• JPlayer
51Thursday, December 8, 2011
![Page 86: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/86.jpg)
Drupal ModulesThere are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development.• HTML5 Tools (your secret weapon!)
• Elements
• Video - most popular HTML5 based modulefor both Drupal 6 and 7
• VideoJS
• Media: Vimeo
• Media: Archive
• Aloha HTML5 Editor
• Plupload Integration
• MediaFront
• JPlayer
51Thursday, December 8, 2011
![Page 87: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/87.jpg)
Video ModuleVideo module allows you to upload video in any format, play video in any format, transcode video to h246, Theora, VP8 using FFMPEG , automatically creates video thumbnails, use video thumbnails in video node teaser, Very reliable API for converting videos and auto thumbnailing, can be used as an all-in-one video solution for Drupal.
http://drupal.org/project/video
52Thursday, December 8, 2011
![Page 88: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/88.jpg)
More HTML5 ToolsFeatures you can find in the Drupal 7 version:• Support for the html5shiv plugin (for older
browsers)
• Support for the innershiv plugin
• Support for Google Chrome Frame
• Adds new elements for use in the Views module
• Support for the html5 doctype with or without RDF.
• Make new Elements available in the Views UI
• Tons of other forms and markup changes.
53Thursday, December 8, 2011
![Page 89: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/89.jpg)
More HTML5 ToolsFeatures you can find in the Drupal 7 version:• Support for the html5shiv plugin (for older
browsers)
• Support for the innershiv plugin
• Support for Google Chrome Frame
• Adds new elements for use in the Views module
• Support for the html5 doctype with or without RDF.
• Make new Elements available in the Views UI
• Tons of other forms and markup changes.
53Thursday, December 8, 2011
![Page 90: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/90.jpg)
HTML5 Tools ModuleOverride Drupal's Forms with HTML5 markup• Site information
• Search block
• Search form
• User registration: url, email, telephone
• Contact forms
• Table select widget
yoursite.com/admin/config/markup/html5-tools
54Thursday, December 8, 2011
![Page 91: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/91.jpg)
HTML5 Tools ModuleSimplify <HEAD> Markup• Simplify doctype and add html5shiv
• Simplify style tags
• Simplify javascript tags
• Simplify meta tags
• Add Google Chrome Frame headers
• Adds the X-UA-Compatible: IE=Edge,chrome=1 headers for IE browsers. This will not prompt the user to install Google Chrome Frame, it will just use it if available.
yoursite.com/admin/config/markup/html5-tools
55Thursday, December 8, 2011
![Page 92: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/92.jpg)
HTML5 Tools ModuleHTML5 Tools: Convert other variables• Alter publication date markup
• If one of these is not working, it might be because your theme is overriding what is specified here. Themes always get the last say in how something is outputted. Check your theme's template.php file.
yoursite.com/admin/config/markup/html5-tools
56Thursday, December 8, 2011
![Page 93: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/93.jpg)
57Thursday, December 8, 2011
![Page 94: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/94.jpg)
Code Sample<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule></IfModule>
58Thursday, December 8, 2011
![Page 95: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/95.jpg)
Seamless Integration
59Thursday, December 8, 2011
![Page 96: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/96.jpg)
60Thursday, December 8, 2011
![Page 97: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/97.jpg)
SVGHTML5 &
60Thursday, December 8, 2011
![Page 98: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/98.jpg)
SVGScalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.
http://svg-wow.org/camera/camera.xhtml
61Thursday, December 8, 2011
![Page 99: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/99.jpg)
SVGScalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.
http://svg-wow.org/camera/camera.xhtml
61Thursday, December 8, 2011
![Page 100: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/100.jpg)
SVG Benefits• Compatibility
SVG is text based and works seamlessly with current Web technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, and JavaScript.
• QualityGraphics created in SVG can be scaled without loss of quality across various platforms and devices. SVG can be used on the Web, in print and even on portable devices while retaining full quality.
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_animatemotion2
62Thursday, December 8, 2011
![Page 101: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/101.jpg)
SVG Links• Change stylesheets: http://svg-wow.org/alternate-stylesheet/
alternate-stylesheet.xhtml
• Punchout: http://webtypographyforthelonely.com/punchout
• Colinate: http://webtypographyforthelonely.com/coolinate
• SVG JS helper: http://raphaeljs.com/
• http://svg-wow.org/
• http://svg-wow.org/camera/camera.xhtml
63Thursday, December 8, 2011
![Page 102: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/102.jpg)
SVG Links• Change stylesheets: http://svg-wow.org/alternate-stylesheet/
alternate-stylesheet.xhtml
• Punchout: http://webtypographyforthelonely.com/punchout
• Colinate: http://webtypographyforthelonely.com/coolinate
• SVG JS helper: http://raphaeljs.com/
• http://svg-wow.org/
• http://svg-wow.org/camera/camera.xhtml
63Thursday, December 8, 2011
![Page 103: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/103.jpg)
HTML5 Links• http://diveintohtml5.org/
• http://html5doctor.com
• http://code.google.com/p/html5shiv/
• http://www.google.com/chromeframe?prefersystemlevel=true
• HTML5 Quick Reference Guide PDF: http://bit.ly/1WaBME
• http://groups.drupal.org/html5
• http://html5gallery.com/
• http://code.google.com/chrome/chromeframe/
• http://html5test.com/
• http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/
• http://html5demos.com
• http://woork.blogspot.com/2009/09/html-5-visual-cheat-sheet-by-woork.html
• http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/
64Thursday, December 8, 2011
![Page 104: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/104.jpg)
65Thursday, December 8, 2011
![Page 105: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/105.jpg)
CSS3Theme With
65Thursday, December 8, 2011
![Page 106: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/106.jpg)
66Thursday, December 8, 2011
![Page 107: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/107.jpg)
The Compatibility Battle
66Thursday, December 8, 2011
![Page 108: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/108.jpg)
CSS WarriorPIE (progressive internet explorer) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features:• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
http://drupal.org/project/css3pie
67Thursday, December 8, 2011
![Page 109: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/109.jpg)
CSS WarriorPIE (progressive internet explorer) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features:• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image
http://drupal.org/project/css3pie
67Thursday, December 8, 2011
![Page 110: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/110.jpg)
Are We There Yet?
http://caniuse.com
68Thursday, December 8, 2011
![Page 111: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/111.jpg)
Are We There Yet?
http://caniuse.com
68Thursday, December 8, 2011
![Page 112: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/112.jpg)
69Thursday, December 8, 2011
![Page 113: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/113.jpg)
LookDo Websites
need to
Exactlythe Samein EveryBrowser
69Thursday, December 8, 2011
![Page 114: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/114.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/70Thursday, December 8, 2011
![Page 115: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/115.jpg)
NOhttp://dowebsitesneedtolookexactlythesameineverybrowser.com/
70Thursday, December 8, 2011
![Page 116: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/116.jpg)
Modernizr• Better yet, use Irish's modernizr, “an open source, MIT-
licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html)
• If you prefer, you can build your own modernizr script,choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your theme's page template files with:<script src="(path-to)modernizr.min.js"></script>
• In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here.
71Thursday, December 8, 2011
![Page 117: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/117.jpg)
Modernizr FeaturesWhat does Modernizr do?• It will replace that class with the class “js” which allows you to
know, in your CSS, whether or not JavaScript is enabled.
<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage no-webworkers no-applicationcache fontface">
http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr
72Thursday, December 8, 2011
![Page 118: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/118.jpg)
Modernizr Features• applicationCache
• border-image:
• border-radius:
• box-shadow:
• Canvas
• Canvas Text
• CSS 2D Transforms
• CSS 3D Transforms
• CSS Animations
• CSS Columns
• CSS Gradients
• CSS Reflections
• CSS Transitions
• @font-face
• Geolocation API
• hsla()
• HTML5 Audio
• HTML5 Video
• Input Attributes
• Input Types
• localStorage
• Multiple backgrounds
• opacity:
• rgba()
• sessionStorage
• Web Workers
73Thursday, December 8, 2011
![Page 119: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/119.jpg)
Modernizr Features• applicationCache
• border-image:
• border-radius:
• box-shadow:
• Canvas
• Canvas Text
• CSS 2D Transforms
• CSS 3D Transforms
• CSS Animations
• CSS Columns
• CSS Gradients
• CSS Reflections
• CSS Transitions
• @font-face
• Geolocation API
• hsla()
• HTML5 Audio
• HTML5 Video
• Input Attributes
• Input Types
• localStorage
• Multiple backgrounds
• opacity:
• rgba()
• sessionStorage
• Web Workers
73Thursday, December 8, 2011
![Page 120: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/120.jpg)
Modernizr Example.borderradius #content { border: 1px solid #141414; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; }
.boxshadow #content { border: none; -webkit-box-shadow: #141414 3px 3px 6px; -moz-box-shadow: #141414 3px 3px 6px; box-shadow: #141414 3px 3px 6px; }
http://css-tricks.com/6731-css-media-queries
74Thursday, December 8, 2011
![Page 121: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/121.jpg)
75Thursday, December 8, 2011
![Page 122: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/122.jpg)
Media QueriesCSS3
75Thursday, December 8, 2011
![Page 123: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/123.jpg)
76Thursday, December 8, 2011
![Page 124: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/124.jpg)
76Thursday, December 8, 2011
![Page 125: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/125.jpg)
CSS Media Queries
77Thursday, December 8, 2011
![Page 126: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/126.jpg)
CSS Media Queries
http://css-tricks.com/6731-css-media-queries
78Thursday, December 8, 2011
![Page 127: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/127.jpg)
CSS Media Queries
http://css-tricks.com/6731-css-media-queries
78Thursday, December 8, 2011
![Page 128: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/128.jpg)
http://css-tricks.com/6731-css-media-queries
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Resolution Dependent Layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"> <link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css"> <link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">
</head><body> <div id="page-wrap"> <div id="header">Header</div> <div id="main-content">Content</div> <div id="secondary-one">Secondary</div> <div id="secondary-two">Extra</div> </div> </body></html>
Code Sample
http://css-tricks.com/6206-resolution-specific-stylesheets
79Thursday, December 8, 2011
![Page 129: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/129.jpg)
http://css-tricks.com/6731-css-media-queries
@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }
Code Sample
http://css-tricks.com/6206-resolution-specific-stylesheets
80Thursday, December 8, 2011
![Page 130: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/130.jpg)
81Thursday, December 8, 2011
![Page 131: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/131.jpg)
FontsCSS3
81Thursday, December 8, 2011
![Page 132: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/132.jpg)
CSS3 @Fonts
http://css-tricks.com/6731-css-media-queries
• Import directly from the Google Webfonts API:
@import url(http://fonts.googleapis.com/css?family=Alike+Angular);
82Thursday, December 8, 2011
![Page 133: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/133.jpg)
CSS3 @Fonts• Hinting (for IE)
• Font hinting is the use of instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, hinting is critical for producing clear, legible text for human readers.
http://readableweb.com/font-hinting-explained-by-a-font-design-master/
83Thursday, December 8, 2011
![Page 134: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/134.jpg)
84Thursday, December 8, 2011
![Page 135: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/135.jpg)
BackgroundsCSS3
84Thursday, December 8, 2011
![Page 136: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/136.jpg)
http://leaverou.me/css3patterns/#tartan
85Thursday, December 8, 2011
![Page 137: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/137.jpg)
Tablecloth
http://leaverou.me/css3patterns/#tartan
85Thursday, December 8, 2011
![Page 138: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/138.jpg)
http://leaverou.me/css3patterns/#carbon-fibre
86Thursday, December 8, 2011
![Page 139: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/139.jpg)
Carbon Fiber
http://leaverou.me/css3patterns/#carbon-fibre
86Thursday, December 8, 2011
![Page 140: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/140.jpg)
http://leaverou.me/css3patterns/#tartan
87Thursday, December 8, 2011
![Page 141: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/141.jpg)
Tartan
http://leaverou.me/css3patterns/#tartan
87Thursday, December 8, 2011
![Page 142: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/142.jpg)
http://css-tricks.com/6731-css-media-queries
#tablecloth { background-color:white; background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size:50px 50px;}
#carbon-fiber { radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px;}
#tartan { background-color: hsl(2, 57%, 40%); background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba (0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px), repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba (0,0,0,.2) 5px);}
Code Sample
http://leaverou.me/css3patterns
88Thursday, December 8, 2011
![Page 143: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/143.jpg)
CSS Columns
http://www.netmagazine.com/features/future-css-layoutshttp://www.makeuseof.com/dir/csstextwrap
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
Accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
89Thursday, December 8, 2011
![Page 144: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/144.jpg)
http://css-tricks.com/6731-css-media-queries
.newspaper{ -webkit-columns: 100px 2; /* Safari and Chrome */ -moz-column-gap: 40px; /* Firefox */ -webkit-column-gap: 40px; /* Safari and Chrome */ columns: 200px 4; column-gap: 40px;}
Code Sample
90Thursday, December 8, 2011
![Page 145: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/145.jpg)
CSS Layouts
http://www.netmagazine.com/features/future-css-layoutshttp://www.makeuseof.com/dir/csstextwrap
91Thursday, December 8, 2011
![Page 146: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/146.jpg)
CSS Layouts
http://www.netmagazine.com/features/future-css-layoutshttp://www.makeuseof.com/dir/csstextwrap
91Thursday, December 8, 2011
![Page 147: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/147.jpg)
CSS3 Links• http://adaptive-images.com/
• http://htmlref.labs.oreilly.com/beta/#elements
• http://css3pie.com
• http://www.modernizr.com
• http://html5readiness.com/
• http://caniuse.com/
• http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
• http://css-tricks.com/
92Thursday, December 8, 2011
![Page 148: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/148.jpg)
93Thursday, December 8, 2011
![Page 149: HTML5 & CSS3 in Drupal (on the Bayou)](https://reader034.vdocuments.us/reader034/viewer/2022042601/554bb1c8b4c905b8618b5a97/html5/thumbnails/149.jpg)
Thank You!
93Thursday, December 8, 2011