Beginner & Intermediate Guide to HTML5/CSS3 In Drupal

Beginner & Intermediate Guide to HTML5/CSS3 In Drupal

By Kendall Totten (@starryeyez024) & Danté Taylor (@thememaster)

Mediacurrent Consultants

#drupalcampATL

1

BROUGHT TO YOU BY

THE GOOD FOLKS AT

DO DRUPAL RIGHT

2

• 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 since version 4.7

• Favorite Drupal Install is WatchGMC.com

About Me

Danté Taylor

3

• 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

4

What will you learn?HTML5• Semantic Web• Microformats• Form API• Real Life applications• Tactics to enhance

compatibility • Enhance UX • How HTML5 can help

you design for mobile • Semantic captions for

images

• What to look for in Drupal 8 • Enhancing Adaptive Theme• HTML5 Themes and

Modules

CSS3• Text in Columns• Transitions • CSS3Pie• Using SVG• The future of CSS

5

HTML5?What is

6

Help

Web HTML5

BrowserSupport

HTML4.01

Flash

Plugins

7

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

8

A Better Blend

HTML5 CSS3 JS

9

Who Cares?

10

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

11

HTML5 Fallout• Change Doctype• Start using Outliner• Use Header, Section,

Footer, and Nav Tags• Start thinking about

Semantics Markup

12

HTML5 ElementsHeaddoctypehtmlheadtitlebaselinkmetastylescriptnoscript

Sectionsbodyarticlenavasidesectionheaderfooterh1-h6hgroupaddress

Groupingphrpreblockquoteolullidl, dt, ddfigurefigcaptiondiv

Tablestablecaptiontheadtbodytfoottrthtdcolcolgroup

13

HTML5 ElementsFormsformfieldsetlegendlabelinputbuttonselectdatalistoptgroupoptiontextareakeygenoutputprogressmeter

Embeddedimgiframeembedobjectparamvideoaudiosourcecanvastrackmaparea

Text-levelaemstrongi, bussmallabbrqcitedfnsub, suptimecodekbdsampwbr

varmarkbdibdoruby, rt, rpspanbr

Interactivedetailssummarycommandmenu

Editsdel, ins

14

http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdf

15

SemanticsHTML5

16

Getting information off the Internet is like taking a drink from a fire hydrant.

—Mitchell Kapor

17

The Missing Link

18

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

19

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.

20

StructureHTML5

21

HTML5 Structure

<footer>

<aside>

<section>

<article>

<article>

<header>

<nav>

22

<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

23

<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

24

<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

25

<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

26

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

27

Outliner Outputhttp://gsnedders.html5.org/outliner

28

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.

29

<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

30

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>

31

<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

32

MicroformatsMicrodata vs.

33

34

Microdata & Microformats

• Microdata is similar to microformats, in that both extend markup to include machine-readable metadata that describes web content.

• As such, microdata has become the third contender in the "my semantic technology is better than yours" argument that has been waging among microformats and RDFa proponents.

35

MicrodataHTML5 &

36

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.

37

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

38

Microdata Module

Rich Snippets Testing Toolhttp://www.google.com/webmasters/tools/richsnippets

39

Microdata & Microdata• 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

http://schema.org

40

MicroformatsHTML5 &

41

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.

42

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>

43

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>

44

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

45

ThemesHTML5

46

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

47

The Winners Table

http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7

48

Delta Module•Delta allows you, via the Context module to make

duplicates of your theme settings for any context on your site. This gives you the ability for alternative layouts as a reaction in Context... </awesomesauce>

49

JS for your Theme

• modernizr-1.6.min.js

• Download from: http://www.modernizr.com/

• dd_belatedpng.js (IE6 ping fix)

• Download from: http://www.dillerdesign.com/experiment/DD_belatedPNG/

• html5.js (HTML5Shim)

• Download from: http://code.google.com/p/html5shim/

• respond.js (media-size responsive images)

• Download from: https://github.com/scottjehl/Respond#readme

50

ModulesHTML5

51

Drupal ModulesThere are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development.• HTML5 Tools

• Elements

• Video - most popular HTML5 based modulefor both Drupal 6 and 7

• VideoJS

• Media: Vimeo

• Media: Archive

• Aloha HTML5 Editor

• Plupload Integration

• MediaFront

• JPlayer

52

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

53

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.

• Tons of other forms and markup changes.

54

HTML5 Tools ModuleHTML5 Tools: Override Drupal's Forms with their HTML5 Counterparts• Site information

• Search block

• Search form

• User registration

• Contact forms

yoursite.com/admin/config/markup/html5-tools

55

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.


56

HTML5 Tools ModuleHTML5 Tools: Convert other variables• Alter publication date markup

• Make new Elements available in the Views UI

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


57

Google Chrome Frame

http://www.youtube.com/watch?v=sjW0Bchdj-w

58

59

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>

60

Seamless Integration

61

SVGHTML5 &

62

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

63

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

64

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

65

HTML5 Links• http://diveintohtml5.org/

• 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://molly.com/html5/html5-0709.html

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

66

CSS3Theme With

67

The Compatibility Battle

68

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

69

Are We There Yet?

http://caniuse.com

70

LookDo Websites

need to

Exactlythe Samein EveryBrowser

71

NOhttp://dowebsitesneedtolookexactlythesameineverybrowser.com/

72

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.

73

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

74

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

75

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

76

Media QueriesCSS3

77

78

CSS Media Queries

79

CSS Media Queries


80


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

81

@KeyframesCSS3

82

83

http://www.w3.org/TR/css3-animations/

@Keyframe

84


div.noc { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ text-indent: -99999px;}@keyframes mymove { from { top:0px; } to {left:200px;}}@-moz-keyframes mymove /* Firefox */{ from { top:0px; } to { left:200px; }}@-webkit-keyframes mymove /* Safari and Chrome */{ from { top:0px; } to { left:200px; }}

Code Sample

http://www.w3.org/TR/css3-animations

@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }

85

FontsCSS3

86

CSS3 @Fonts


• Import directly from the Google Webfonts API:

@import url(http://fonts.googleapis.com/css?family=Alike+Angular);

87

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/

88

BackgroundsCSS3

89

Tablecloth

http://leaverou.me/css3patterns/#tartan

90

Carbon Fiber

http://leaverou.me/css3patterns/#carbon-fibre

91

Tartan

http://leaverou.me/css3patterns/#tartan

92


#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

93

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.

94


.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

95

CSS Layouts

http://www.netmagazine.com/features/future-css-layoutshttp://www.makeuseof.com/dir/csstextwrap

96

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/

97

Thank You!

98