HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers. If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions: What is HTML5? How does HTML 4.01/ XHTML 1.0 compare with the new HTML5? What are the new HTML5 structural elements? What do you need to do to build a Drupal 7 theme in HTML5? What is CSS3? What are the new CSS3 properties and techniques? What CSS3 techniques should be used in Drupal? What are some advanced CSS3 techniques? About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.

2. INTRODUCTION TO
HTML5/CSS3
In Drupal 7
@thememaster

4. BROUGHT TO YOU BY
THE GOOD FOLKS AT
DO DRUPAL RIGHT

5. Bachelor of Fine Arts in Graphic
Design from Savannah College
of Art & Design (SCAD)
Creative Director at
Mediacurrent
Working in the web space for
about 12 years
Working with Drupal sense
version 4.7
Favorite Drupal Install is
WatchGMC.com

6. ABOUT ME
DANTÉ TAYLOR
Bachelor of Fine Arts in Graphic
Design from Savannah College
of Art & Design (SCAD)
Creative Director at
Mediacurrent
Working in the web space for
about 12 years
Working with Drupal sense
version 4.7
Favorite Drupal Install is
WatchGMC.com

7. BASIC ASSUMPTIONS
Basic understanding of HTML
& CSS markup
Basic understating about
Drupal & Theming.
Familiar with modern
browsers such as Firefox,
Safari, Chrome & Internet
Explorer

8. BASIC ASSUMPTIONS
Basic understanding of HTML
& CSS markup
Basic understating about
Drupal & Theming.
Familiar with modern
browsers such as Firefox,
Safari, Chrome & Internet
Explorer

9. HELPFUL BOOKS

10. IN THE NEXT
45 MINUTES
What’s NEW in HTML5 & CSS3
How both technologies will effect the way you develop,
work & experience the Web
Why HTML5 & CSS3 is important, who is interested in it
and what you should be doing.

12. GUESS WHO
CARES?
ABOUT HTML5 & CSS3

13. HOW WILL IT EFFECT YOU

14. HOW WILL IT EFFECT YOU

15. WHO CARES ABOUT
HTML5 & CSS3
First of all, just as he did during his time on stage, Taylor
made it very clear that there are two key high-level
focuses for Facebook in 2011 from a technology
perspective: HTML5 and mobile. And actually, as he sees
them, those are both very much related as well.
"over the next couple of years, a large percentage [of development teams] will be
working on mobile primarily," ~ Facebook's CTO, Bret Taylor
Source: Tech Crunch
Facebook CTO Bret Taylor On HTML5, Mobile As The Future, And Yes, FriendFeed : Posted June 3, 2011 : By MG Siegler

16. HOW WILL IT EFFECT YOU

17. HOW WILL IT EFFECT YOU

18. WHO CARES ABOUT
HTML5 & CSS3
Apple is one of the biggest supporters of HTML5, and
Steve Jobs clearly thinks this new standard is the future of
the web. To show why Flash is no longer
necessary, Apple has launched a HTML5 showcase
displaying what an HTML5-capable browser can do
without the need of additional plugins.
Source: Mashable
Apple Shows Us What HTML5 Can Do : Posted June 4, 2010 : Stan Schroeder

21. WHO CARES ABOUT
HTML5 & CSS3
The software giant shared the new interface with
WinRumors earlier this week in preparation for
improvements the company is planning across its
Windows Phone operating system. Microsoft
is overhauling the user interface of SkyDrive. The new
interface will include a HTML5 version of its image
viewer, alongside a refreshed interface to view documents
and files uploaded to the free service.
Source: WinRumors
Microsoft reveals HTML5 overhaul of Windows Live SkyDrive : Posted May 24, 2011 : Tom Warren

24. WHO CARES ABOUT
HTML5 & CSS3
As a result, come August 1, Google Apps will no longer
provide support for Firefox 3.5, IE7, Safari 3, or previous
versions of those browsers. At first, on these browsers,
Google features like Gmail, Google Calendar, Google
Talk, and Google Docs may not work properly, but
eventually they may completely stop functioning.
"Older browsers just don't have the chops to provide you with the same
high-quality experience…" ~ Google's vice president of engineering,
Venkat Panchapakesan
Source: PC Magazine
Google Apps Giving Older Browsers the Boot : Posted June 3, 2011 : By Hillary Scott

27. WHO CARES ABOUT
HTML5 & CSS3
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.
"HTML5 is about to rock our world" ~ Dries Buytaert
Source: Bries Buytaert Blog
HTML5 in Drupal 8 : Posted May 18, 2011 : By Dries Buytaert

29. HMMM! WHATS SO
SPECIAL ABOUT
HTML5
DIFFERENCES BETWEEN
HTML 4.01, XHTML, HTML5

33. HTML5
HTML 4.01
& XHTML

34. HTML5 KEY FEATURE
BETTER BLEND

35. HTML5 KEY FEATURE
BETTER BLEND
HTML5 CSS3 JS

36. HTML5
SEMANTICS
Giving meaning to structure,
semantics are front and
center with HTML5. A richer
set of tags, along with RDFa,
microdata, and microformats,
are enabling a more useful,
data driven web for both
programs and your users.
Source: w3c.org

37. HTML5
OFFLINE & STORAGE
Web Apps can start faster
and work even if there is no
internet connection, thanks to
the HTML5 App Cache, as
well as the Local Storage,
Indexed DB, and the File API
specifications.
Source: w3c.org

38. HTML5
DEVICE ACCESS
Beginning with the
Geolocation API, Web
Applications can present rich,
device-aware features and
experiences. Incredible device
access innovations are being
developed and implemented,
from audio/video input access
to microphones and cameras,
to local data such as contacts
& events, and even tilt
orientation.
Source: w3c.org

39. HTML5
CONNECTIVITY
More efficient connectivity
means more real-time chats,
faster games, and better
communication. Web Sockets
and Server-Sent Events are
pushing (pun intended) data
between client and server
more efficiently than ever
before.
Source: w3c.org

40. Source: w3c.org

41. HTML5
GOOD BYE COOKIES
Source: w3c.org

42. HTML5
MULTIMEDIA
Audio and video are first class
citizens in the HTML5 web,
living in harmony with your
apps and sites. Lights, camera,
action!
Source: w3c.org

43. HTML5
3D, GRAPHICS, EFFECTS
Between SVG, Canvas,
WebGL, and CSS3 3D
features, you're sure to amaze
your users with stunning
visuals natively rendered in
the browser.
Source: w3c.org

44. HTML5
PERFORMANCE &
INTEGRATION
Make your Web Apps and
dynamic web content faster
with a variety of techniques
and technologies such as Web
Workers & XMLHttpRequest
2. No user should ever wait
on your watch.
Source: w3c.org

45. HTML5
PERFORMANCE &
INTEGRATION
CSS3 delivers a wide range of
stylization and effects,
enhancing the web app
without sacrificing your
semantic structure or
performance. Additionally
Web Open Font Format
(WOFF) provides typographic
flexibility and control far
beyond anything the web has
offered before.
Source: w3c.org

47. NEW ELEMENTS
HTML5

48. NEW HTML5
ELEMENTS
Source: w3.org

49. NEW HTML5
ELEMENTS
<section> <figcaption> <bdi>
<article> <video> <wbr>
<aside> <track> <canvas>
<header> <embed> <command>
<hgroup> <mark> <details>
<footer> <progress> <datalist>
<nav> <meter> <keygen>
<figure> <time> <output>
<section> <ruby> <svg>
Source: w3.org

50. IE & HTML5
Source: Remy Sharp

51. IE & HTML5
<!--[if lt IE 9]>
<script src="http://
html5shim.googlecode.com/svn/
trunk/html5.js"></script>
<![endif]-->
Source: Remy Sharp

52. OLD HTML/XHTML
PAGE STRUCTURE

53. OLD HTML/XHTML
PAGE STRUCTURE
<id=”header”>
<id=”navigation”>
<id=”left”>
<id=”content-1”>
<id=”right”>
<id=”content-2”>
<id=”footer”>

54. NEW HTML5
PAGE STRUCTURE

55. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

56. NEW HTML5
ELEMENT
<!doctype
html>

57. OLD HTML DOCTYPE
CODE SAMPLE
Example: w3cschools.com

58. OLD HTML DOCTYPE
CODE SAMPLE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
...
</body>
</html>
Example: w3cschools.com

59. NEW HTML5 DOCTYPE
CODE SAMPLE
Source: w3.org

60. NEW HTML5 DOCTYPE
CODE SAMPLE
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Source: w3.org

61. HTML5 DOCTYPE
USE CASE
The HTML syntax of HTML5 requires a DOCTYPE to be specified
to ensure that the browser renders the page in standards mode. The
DOCTYPE has no other purpose and is therefore optional for
XML. Documents with an XML media type are always handled in
standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-
insensitive in the HTML syntax. DOCTYPEs from earlier versions of
HTML were longer because the HTML language was SGML-based
and therefore required a reference to a DTD. With HTML5 this is
no longer the case and the DOCTYPE is only needed to enable
standards mode for documents written using the HTML syntax.
Browsers already do this for <!DOCTYPE html>.
Source: w3.org

62. NEW HTML5
ELEMENT
<header>
<hgroup>

63. NEW HTML5
PAGE STRUCTURE

64. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

65. HTML5 HEADER
CODE SAMPLE
<!-- begin: page header -->
<header>
<hgroup>
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
<p>Some more header content</p>
</header>
<!-- end: page header -->
Example: www.essentaste.com

66. HTML5 HEADER
USE CASE
Ideal for use in defining global page structure.
Usually intended to contain sections headings h1- h6
& navigation.
This could also be used inside of section containers to help identify
the section purpose or relevancy.
Source: www.essentaste.com

67. NEW HTML5
ELEMENT
<nav>

68. NEW HTML5
PAGE STRUCTURE

69. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

70. HTML5 NAV
CODE SAMPLE
<header>
<!-- begin: primary nav -->
<nav>
<a href=”home.html”>Home</a>
<a href=”about.html”>About</a>
</nav>
<!-- end: primary nav -->
</header>
Example: www.essentaste.com

71. HTML5 NAV
USE CASE
Set primary navigation in header inside header tags.
Use to define secondary navigation in left and right
sidebar rails.
Use anywhere on side that requires navigation or site
toolbars functionality.
Source: www.essentaste.com

72. NEW HTML5
ELEMENT
<section>

73. NEW HTML5
PAGE STRUCTURE

74. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

75. HTML5 SECTION
CODE SAMPLE
<!-- begin: science section -->
<section id=”science”>
<header>
<hgroup>
<h2>Science</h2>
</hgroup>
</header>
<p>Space Matter And Time (SMAT)</p>
</section>
<!-- end: science section -->
Example: www.essentaste.com

76. HTML5 SECTION
USE CASE
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 work in a HTML5 Outliner Tool
Source: HTML5 Doctor

77. NEW HTML5
ELEMENT
<article>

78. NEW HTML5
PAGE STRUCTURE

79. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

80. HTML5 ARTICLE
CODE SAMPLE
<!-- begin: science section -->
<section id=”science”>
<article>
<header>
<h2>Science</h2>
</header>
<p>Space Matter And Time (SMAT)</p>
<footer>
<p>Creative Commons License</p>
</footer>
</article>
</section>
<!-- end: science section -->
Example: www.essentaste.com

81. HTML5 ARTICLE
USE CASE
The article element represents a component of a page
that consists of a self-contained composition in a
document, page, application, or site and that is intended to
be independently distributable or reusable, e.g. in
syndication.
This could be a forum post, a magazine or newspaper
article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent
item of content.
Source: HTML5 Doctor

82. NEW HTML5
ELEMENT
<video>

84. Good-bye
Flash Plug-ins
maybe
next year!

85. HTML5 VIDEO
CODE SAMPLE
<!-- begin: video -->
<video id="vid1" poster="http://v.com/video.jpg>
<source type="video/webm" src="http://v.com/vid.webm" />
<source
src="http://v.com/vid.m4v"/>
<source src="http://v.com/vid.ogv" />
</video>
<!-- end: video -->
Example: kaltura.org

86. HTML5 VIDEO
USE CASE
To make the video work in Internet Explorer, Safari and
future versions of Chrome, we must add a MPEG4 and
WebM file.
The video element allows multiple source elements.
Source elements can link to different video files. The
browser will use the first recognized format:
Tools for HTML5 Video (Kaltura & HTML)
Source: HTML5Video.org & w3school.org

87. NEW HTML5
ELEMENT
<aside>

88. NEW HTML5
PAGE STRUCTURE
<aside>

89. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

90. HTML5 ASIDE
CODE SAMPLE
<!-- begin: aside right -->
<aside id=”aside-right”>
<nav>
<ul>
<li><a href=”link.html”>noop</a></li>
<li><a href=”link.html”>zoop</a></li>
<li><a href=”link.html”>Link 3</a></li>
</ul>
</nav>
<p>Space Matter And Time (SMAT)</p>
</aside>
<!-- end: aside right -->
Example: www.essentaste.com

91. HTML5 ASIDE
USE CASE
Intended to be used to support surrounding elements
With the new definition of aside, it’s crucial to remain aware
of its context. When used within an article element, the
contents should be specifically related to that article (e.g., a
glossary).
When used outside of an article element, the contents
should be related to the site (e.g., a blogroll, groups of
additional navigation, and even advertising if that content is
related to the page).
Source: HTML5 Doctor

92. NEW HTML5
ELEMENT
<footer>

93. NEW HTML5
PAGE STRUCTURE

94. NEW HTML5
PAGE STRUCTURE
<header>
<nav>
<section>
<article> <aside>
<article>
<footer>

95. HTML5 FOOTER
CODE SAMPLE
<!-- begin: science section -->
<section id=”science”>
<article>
<header>
<h2>Science</h2>
</header>
<p>Space Matter And Time (SMAT)</p>
<footer>
<p>Creative Commons License</p>
</footer>
</article>
</section>
<!-- end: science section -->
Example: www.essentaste.com

96. HTML5 FOOTER
USE CASE
An important point to note is that you are not restricted
to use one <footer> element per site, you can use
multiple footers, each of which will then become the
<footer> for that section of the document.
You could therefore have a <footer> for a <section> or
an <article>.
Source: HTML5 Doctor

97. NEW HTML5
ELEMENT
<canvas>

98. HTML5 CANVAS
CODE SAMPLE
<!-- begin: canvas graphic -->
<canvas id="myCanvas">Browser Not Supported</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<!-- end: canvas graphic -->
Example: w3schooling.com

99. HTML5 CANVAS
USE CASE
The <canvas> tag is used to display drawn graphics.
The <canvas> tag is only a container for graphics, you
must use a script to actually paint graphics.
Any text inside the between <canvas> and </canvas>
will be displayed in browsers that does not support the
canvas element.
Canvas API
Example: w3schooling.com

102. “HAL” SHALL WE
PLAY A GAME

104. WHAT’S NEW
CSS3

106. CSS3
PROPERTIES
:not filter:
:lang opacity:
:first-child media
:first-of-type box-shadow
:nth-child text-shadow
:nth-of-type background-size
:nth-last-of-type background (gradients)
:last-child transform
:last-of-type transform-orgin
hsl & hsla transition

107. CSS3
PROPERTY
rgba(0,0,0,0.5)
The “a” property-name stands, for :alpha.
This new feature allows you to specify an
opacity value for a color.

108. CSS3
RGBA PROPERTY

109. CSS3
RGBA PROPERTY
1/100% 0.5/50%
0.8/80%

110. CSS3
PROPERTY
border-radius

111. CSS3
ROUNDED CORNERS

112. CSS3
ROUNDED CORNERS
Round Corners

113. CSS3
CODE SAMPLE
.selector {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari and chrome */
-khtml-border-radius: 10px; /* Linux browsers */
behavior:url(border-radius.htc) /* IE6+IE7+IE8 */
border-radius: 10px; /* CSS3 */
}
Source: IE Fix For Curved Corners

114. CSS3
PROPERTY
box-shadow

115. CSS3
BOX SHADOW

116. CSS3
BOX SHADOW
Shadow

117. CSS3
CODE SAMPLE
.selector {
/* Firefox */
-moz-box-shadow: 1px 1px 3px #292929;
/* Safari and chrome */
-webkit-box-shadow: 1px 1px 3px #292929;
/* CSS3 */
box-shadow: 1px 1px 3px #292929;
}

118. CSS3
PROPERTY
text-shadow

119. CSS3
TEXT SHADOW
Drupal

120. CSS3
CODE SAMPLE
.shadow {
/* CSS3 */
text-shadow: 1px 1px 3px #292929;
}

121. CSS3
METHOD
@font-face

124. CSS3
CODE SAMPLE
@font-face {
font-family: "your FontName";
/* IE */
src: url(/location/of/font/FontFileName.eot);
/* non-IE */
src: local("real FontName"), url(FontFileName.ttf)
format("truetype");
}
/* THEN use like you would any other font */
.element {
font-family:"your FontName", helvetica, sans-serif;
}

125. CSS3
PROPERTY
transform

126. CSS3
CODE SAMPLE
.selector {
-webkit-transform: rotate(-9deg) scale(1.05);
-moz-transform: rotate(-9deg) scale(1.05);
transform: rotate(180deg) scale(1.05);
}
Example: font-face-guide

128. CSS3
ANIMATION
Rocket
Space UX

129. CSS3
IE FIXES
10 Ways To Make Internet Explorer
Act Like A Modern Browser

130. CSS3
IE FIXES
10 Ways To Make Internet Explorer
Act Like A Modern Browser

132. HTML5 & CSS3 WITH
DRUPAL
7

136. MAKE A DRUPAL 7
THEME
html.tpl.php
page.tpl.php
node.tpl.php
template.php
style.css

137. DRUPAL HTML5
THEME
template.php

138. DRUPAL HTML5 THEME
CODE SAMPLE
// Preprocess variables for html.tpl.php.
// template_preprocess_html
function theme_name_preprocess_html(&$vars) {
if (module_exists('rdf')) {
$vars['doctype'] = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">' . "n";
$vars['rdf']->version = ' version="HTML+RDFa 1.1"';
$vars['rdf']->namespaces = $vars['rdf_namespaces'];
$vars['rdf']->profile = ' profile="' . $vars['grddl_profile'] . '"';
} else {
$vars['doctype'] = '<!DOCTYPE html>' . "n";
$vars['rdf']->version = '';
$vars['rdf']->namespaces = '';
$vars['rdf']->profile = '';
}
}

139. DRUPAL HTML5
THEME
html.tpl.php

140. DRUPAL HTML5 THEME
CODE SAMPLE
<?php print $doctype; ?>
<html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"
<?php print $rdf->version . $rdf->namespaces; ?>>
<head<?php print $rdf->profile; ?>>
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>

142. DRUPAL HTML5
CONTRIBUTED THEMES
Omega By Jake Strawn
http://drupal.org/project/omega
Zentropy By Alex Weber
http://drupal.org/project/zentropy
960gs By Jake Strawn
http://drupal.org/project/panels_960gs
AdaptiveThemes By Jeff Burnz
http://drupal.org/project/adaptivetheme

144. GOOD
RESOURCES
Introductin HTML5 by Burce Lawson & Remy Sharp
Pro HTML5 Programming by Peter Lubbers, Brian Albers & Frank Salim
Visual Quickstart Guide CSS3 by Jason Cranford Teague
Pro Drupal 7 Development by Tood Tomlinson and John K. VanDyk

146. THANK
YOU
@thememaster