Introduction to HTML5/CSS3 In Drupal 7

INTRODUCTION TOHTML5/CSS3 In Drupal 7 @thememaster

BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT

Bachelor of Fine Arts in GraphicDesign from Savannah Collegeof Art & Design (SCAD)Creative Director atMediacurrentWorking in the web space forabout 12 yearsWorking with Drupal senseversion 4.7Favorite Drupal Install isWatchGMC.com

ABOUT ME DANTÉ TAYLORBachelor of Fine Arts in GraphicDesign from Savannah Collegeof Art & Design (SCAD)Creative Director atMediacurrentWorking in the web space forabout 12 yearsWorking with Drupal senseversion 4.7Favorite Drupal Install isWatchGMC.com

BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrowsers such as Firefox,Safari, Chrome & InternetExplorer

HELPFUL BOOKS

IN THE NEXT 45 MINUTESWhat’s NEW in HTML5 & CSS3How both technologies will effect the way you develop,work & experience the WebWhy HTML5 & CSS3 is important, who is interested in itand what you should be doing.

GUESS WHOCARES? ABOUT HTML5 & CSS3

HOW WILL IT EFFECT YOU

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," ~ Facebooks CTO, Bret Taylor Source: Tech CrunchFacebook CTO Bret Taylor On HTML5, Mobile As The Future, And Yes, FriendFeed : Posted June 3, 2011 : By MG Siegler

HOW WILL IT EFFECT YOU

WHO CARES ABOUT HTML5 & CSS3Apple is one of the biggest supporters of HTML5, andSteve Jobs clearly thinks this new standard is the future ofthe web. To show why Flash is no longernecessary, Apple has launched a HTML5 showcasedisplaying what an HTML5-capable browser can dowithout the need of additional plugins. Source: Mashable Apple Shows Us What HTML5 Can Do : Posted June 4, 2010 : Stan Schroeder

WHO CARES ABOUT HTML5 & CSS3The software giant shared the new interface withWinRumors earlier this week in preparation forimprovements the company is planning across itsWindows Phone operating system. Microsoftis overhauling the user interface of SkyDrive. The newinterface will include a HTML5 version of its imageviewer, alongside a refreshed interface to view documentsand ﬁ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 & CSS3As a result, come August 1, Google Apps will no longerprovide support for Firefox 3.5, IE7, Safari 3, or previousversions of those browsers. At ﬁrst, on these browsers,Google features like Gmail, Google Calendar, GoogleTalk, and Google Docs may not work properly, buteventually they may completely stop functioning. "Older browsers just dont have the chops to provide you with the same high-quality experience…" ~ Googles 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 & CSS3I believe in HTML5 enough that I wanted to makeit one of the top 5 initiatives for Drupal 8; andswitch Drupals default doctype from XHTML to HTML5.This is the fifth official Drupal 8 initiative after theConfiguration Management, Design, Web Services andMultilingual 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 ABOUTHTML5 DIFFERENCES BETWEENHTML 4.01, XHTML, HTML5

HTML5HTML 4.01& XHTML

HTML5 KEY FEATUREBETTER BLEND

HTML5 KEY FEATUREBETTER BLENDHTML5 CSS3 JS

HTML5SEMANTICS 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

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

HTML5DEVICE 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

HTML5CONNECTIVITY 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

Source: w3c.org

HTML5GOOD BYE COOKIES Source: w3c.org

HTML5MULTIMEDIA 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

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

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

HTML5PERFORMANCE & 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 ELEMENTSHTML5

NEW HTML5ELEMENTS 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/XHTMLPAGE STRUCTURE

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

NEW HTML5PAGE STRUCTURE

NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>

NEW HTML5 ELEMENT<!doctype html>

OLD HTML DOCTYPECODE SAMPLE Example: w3cschools.com

OLD HTML DOCTYPE CODE SAMPLE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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 DOCTYPECODE 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 CASEThe HTML syntax of HTML5 requires a DOCTYPE to be speciﬁedto ensure that the browser renders the page in standards mode. TheDOCTYPE has no other purpose and is therefore optional forXML. Documents with an XML media type are always handled instandards mode. [DOCTYPE]The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions ofHTML were longer because the HTML language was SGML-basedand therefore required a reference to a DTD. With HTML5 this isno longer the case and the DOCTYPE is only needed to enablestandards 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 CASEIdeal 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 identifythe section purpose or relevancy. Source: www.essentaste.com

NEW HTML5ELEMENT<nav>

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

HTML5 NAV USE CASESet primary navigation in header inside header tags.Use to deﬁne secondary navigation in left and rightsidebar rails.Use anywhere on side that requires navigation or sitetoolbars 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> Example: www.essentaste.com

HTML5 SECTION USE CASEUse to group content into logical category or sectionsWith very few exceptions, section should not be used ifthere is no natural heading for it.Section should not be used like aside or nav containersjust to position contentCheck work in a HTML5 Outliner Tool Source: HTML5 Doctor

NEW HTML5 ELEMENT<article>

HTML5 ARTICLE CODE SAMPLE<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> Example: www.essentaste.com

HTML5 ARTICLE USE CASEThe article element represents a component of a pagethat consists of a self-contained composition in adocument, page, application, or site and that is intended tobe independently distributable or reusable, e.g. insyndication.This could be a forum post, a magazine or newspaperarticle, a blog entry, a user-submitted comment, aninteractive widget or gadget, or any other independentitem of content. Source: HTML5 Doctor

NEW HTML5 ELEMENT<video>

Good-byeFlash 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" /> <sourcesrc="http://v.com/vid.m4v"/> <source src="http://v.com/vid.ogv" /></video> Example: kaltura.org

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

NEW HTML5 ELEMENT<aside>

NEW HTML5PAGE STRUCTURE <aside>

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

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> <p>Space Matter And Time (SMAT)</p></aside> Example: www.essentaste.com

HTML5 ASIDE USE CASEIntended to be used to support surrounding elementsWith the new deﬁnition of aside, it’s crucial to remain awareof its context. When used within an article element, thecontents should be speciﬁcally related to that article (e.g., aglossary).When used outside of an article element, the contentsshould be related to the site (e.g., a blogroll, groups ofadditional navigation, and even advertising if that content isrelated to the page). Source: HTML5 Doctor

NEW HTML5 ELEMENT<footer>

HTML5 FOOTER CODE SAMPLE<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> Example: www.essentaste.com

HTML5 FOOTER USE CASEAn important point to note is that you are not restrictedto use one <footer> element per site, you can usemultiple footers, each of which will then become the<footer> for that section of the document.You could therefore have a <footer> for a <section> oran <article>. Source: HTML5 Doctor

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 CASEThe <canvas> tag is used to display drawn graphics.The <canvas> tag is only a container for graphics, youmust use a script to actually paint graphics.Any text inside the between <canvas> and </canvas>will be displayed in browsers that does not support thecanvas element.Canvas API Example: w3schooling.com

“HAL” SHALL WEPLAY A GAME

WHAT’S NEWCSS3

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 PROPERTYrgba(0,0,0,0.5)The “a” property-name stands, for :alpha.This new feature allows you to specify anopacity value for a color.

CSS3RGBA PROPERTY

CSS3RGBA PROPERTY1/100% 0.5/50% 0.8/80%

CSS3 PROPERTYborder-radius

CSS3ROUNDED CORNERS

CSS3ROUNDED 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 PROPERTYbox-shadow

CSS3BOX SHADOW

CSS3BOX SHADOW Shadow

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

CSS3 TEXT SHADOWDrupal

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

CSS3 METHOD@font-face

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 PROPERTYtransform

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

CSS3 IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser

HTML5 & CSS3 WITHDRUPAL 7

MAKE A DRUPAL 7 THEMEhtml.tpl.php page.tpl.php node.tpl.php template.phpstyle.css

DRUPAL HTML5 THEMEtemplate.php

DRUPAL HTML5 THEME CODE SAMPLE// Preprocess variables for html.tpl.php.// template_preprocess_htmlfunction 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 THEMEhtml.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 THEMESOmega By Jake Strawnhttp://drupal.org/project/omegaZentropy By Alex Weberhttp://drupal.org/project/zentropy960gs By Jake Strawnhttp://drupal.org/project/panels_960gsAdaptiveThemes By Jeff Burnzhttp://drupal.org/project/adaptivetheme

GOOD RESOURCESIntroductin HTML5 by Burce Lawson & Remy SharpPro HTML5 Programming by Peter Lubbers, Brian Albers & Frank SalimVisual Quickstart Guide CSS3 by Jason Cranford TeaguePro Drupal 7 Development by Tood Tomlinson and John K. VanDyk

THANKYOU @thememaster

http://www.rgracia.com	2058
http://www.scoop.it	737
http://www.technonj.com	35
http://technology-beta.asu.edu	35
http://translate.googleusercontent.com	6
http://webcache.googleusercontent.com	6
https://si0.twimg.com	4
http://odeonwebsitedesign.com	3
http://paper.li	1
http://localhost	1
http://painchaudhtml.webnode.com	1
http://cms.painchaudhtml.webnode.com	1
http://technonj.com	1
http://www.basspain.com	1

Introduction to HTML5/CSS3 In Drupal 7

by Mediacurrent

Accessibility

Categories

Upload Details

Usage Rights

14 Embeds 2,890

Statistics

Introduction to HTML5/CSS3 In Drupal 7 Presentation Transcript