Introduction to HTML5/CSS3 In Drupal 7

INTRODUCTION TO

HTML5/CSS3
In Drupal 7

@thememaster

BROUGHT TO YOU BY
THE GOOD FOLKS AT

DO DRUPAL RIGHT

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

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

BASIC ASSUMPTIONS
Basic understanding of HTML
& CSS markup

Basic understating about
Drupal & Theming.

Familiar with modern
browsers such as Firefox,
Safari, Chrome & Internet
Explorer

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.

GUESS WHO
CARES?
ABOUT HTML5 & CSS3

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

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

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 ﬁles uploaded to the free service.

Source: WinRumors
Microsoft reveals HTML5 overhaul of Windows Live SkyDrive : Posted May 24, 2011 : Tom Warren

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 ﬁrst, 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

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

HMMM! WHATS SO
SPECIAL ABOUT

HTML5
DIFFERENCES BETWEEN
HTML 4.01, XHTML, HTML5

HTML5 KEY FEATURE

BETTER BLEND

HTML5 KEY FEATURE

BETTER BLEND

HTML5 CSS3 JS

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

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
speciﬁcations.

Source: w3c.org

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

HTML5

CONNECTIVITY
More efﬁcient 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 efﬁciently than ever
before.

Source: w3c.org

HTML5

GOOD BYE COOKIES

Source: w3c.org

HTML5

MULTIMEDIA
Audio and video are ﬁrst class
citizens in the HTML5 web,
living in harmony with your
apps and sites. Lights, camera,
action!

Source: w3c.org

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

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

HTML5

PERFORMANCE &
INTEGRATION
CSS3 delivers a wide range of
stylization and effects,
enhancing the web app
without sacriﬁcing your
semantic structure or
performance. Additionally
Web Open Font Format
(WOFF) provides typographic
ﬂexibility and control far
beyond anything the web has
offered before.

Source: w3c.org

NEW HTML5

ELEMENTS

Source: w3.org

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

IE & HTML5

Source: Remy Sharp

IE & HTML5



Source: Remy Sharp

OLD HTML/XHTML

PAGE STRUCTURE

OLD HTML/XHTML

PAGE STRUCTURE
<id=”header”>
<id=”navigation”>
<id=”left”>

<id=”content-1”>
<id=”right”>
<id=”content-2”>

<id=”footer”>

NEW HTML5

PAGE STRUCTURE
<header>
<nav>

<section>
<article> <aside>
<article>

<footer>

NEW HTML5

ELEMENT

<!doctype
html>

OLD HTML DOCTYPE

CODE SAMPLE

Example: w3cschools.com

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

NEW HTML5 DOCTYPE

CODE SAMPLE

Source: w3.org

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

HTML5 DOCTYPE

USE CASE
The HTML syntax of HTML5 requires a DOCTYPE to be speciﬁed
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

NEW HTML5

ELEMENT

<header>
<hgroup>

HTML5 HEADER

CODE SAMPLE

<header>
<hgroup>
<h1>Header</h1>
<h2>Sub-Header</h2>
</hgroup>
<p>Some more header content</p>
</header>


Example: www.essentaste.com

HTML5 HEADER

USE CASE
Ideal for use in deﬁning 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

HTML5 NAV

CODE SAMPLE
<header>

<nav>
<a href=”home.html”>Home</a>
<a href=”about.html”>About</a>
</nav>

</header>

HTML5 NAV

USE CASE
Set primary navigation in header inside header tags.

Use to deﬁne secondary navigation in left and right
sidebar rails.

Use anywhere on side that requires navigation or site
toolbars functionality.

Source: www.essentaste.com

NEW HTML5

ELEMENT

<section>

HTML5 SECTION

CODE SAMPLE

<section id=”science”>
<header>
<hgroup>
<h2>Science</h2>
</hgroup>
</header>
<p>Space Matter And Time (SMAT)</p>
</section>

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

NEW HTML5

ELEMENT

<article>

HTML5 ARTICLE

CODE SAMPLE
<article>
<header>
<h2>Science</h2>
</header>
<footer>
<p>Creative Commons License</p>
</footer>
</article>
</section>

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.


Good-bye
Flash Plug-ins
maybe
next year!

HTML5 VIDEO

CODE SAMPLE

<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>


Example: kaltura.org

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

NEW HTML5

PAGE STRUCTURE

<aside>

HTML5 ASIDE

CODE SAMPLE

<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>
</aside>

HTML5 ASIDE

USE CASE
Intended to be used to support surrounding elements

With the new deﬁnition of aside, it’s crucial to remain aware
of its context. When used within an article element, the
contents should be speciﬁcally 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).


NEW HTML5

ELEMENT

<footer>

HTML5 FOOTER

CODE SAMPLE
<article>
<header>
<h2>Science</h2>
</header>
<footer>
<p>Creative Commons License</p>
</footer>
</article>
</section>

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>.


NEW HTML5

ELEMENT

<canvas>

HTML5 CANVAS

CODE SAMPLE

<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>


Example: w3schooling.com

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

“HAL” SHALL WE

PLAY A GAME

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

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.

CSS3

RGBA PROPERTY

1/100% 0.5/50%

0.8/80%

CSS3

PROPERTY

border-radius

CSS3

ROUNDED CORNERS

Round Corners

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

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;
}

CSS3

PROPERTY

text-shadow

CSS3

CODE SAMPLE

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

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;
}

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

CSS3

ANIMATION
Rocket
Space UX

CSS3

IE FIXES

10 Ways To Make Internet Explorer
Act Like A Modern Browser

HTML5 & CSS3 WITH

DRUPAL
7

MAKE A DRUPAL 7

THEME
html.tpl.php
page.tpl.php
node.tpl.php
template.php

style.css

DRUPAL HTML5

THEME

template.php

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 = '';
}
}

DRUPAL HTML5

THEME

html.tpl.php

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; ?>

</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>

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

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

Introduction to HTML5/CSS3 In Drupal 7

Recommended

More Related Content

What's hot (19)

Similar to Introduction to HTML5/CSS3 In Drupal 7 (20)

More from Mediacurrent (20)

Recently uploaded (20)

Introduction to HTML5/CSS3 In Drupal 7

Editor's Notes