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 ...
ABOUT ME         DANTÉ TAYLORBachelor of Fine Arts in GraphicDesign from Savannah Collegeof Art & Design (SCAD)Creative Di...
BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrows...
BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrows...
HELPFUL BOOKS
IN THE NEXT               45 MINUTESWhat’s NEW in HTML5 & CSS3How both technologies will effect the way you develop,work &...
GUESS WHOCARES? ABOUT HTML5 & CSS3
HOW WILL IT EFFECT YOU
HOW WILL IT EFFECT YOU
WHO CARES ABOUT                           HTML5 & CSS3 First of all, just as he did during his time on stage, Taylor made ...
HOW WILL IT EFFECT YOU
HOW WILL IT EFFECT YOU
WHO CARES ABOUT                HTML5 & CSS3Apple is one of the biggest supporters of HTML5, andSteve Jobs clearly thinks t...
WHO CARES ABOUT                     HTML5 & CSS3The software giant shared the new interface withWinRumors earlier this wee...
WHO CARES ABOUT                  HTML5 & CSS3As a result, come August 1, Google Apps will no longerprovide support for Fir...
WHO CARES ABOUT             HTML5 & CSS3I believe in HTML5 enough that I wanted to makeit one of the top 5 initiatives for...
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                 ...
HTML5OFFLINE & STORAGE                        Web Apps can start faster                        and work even if there is n...
HTML5DEVICE ACCESS                      Beginning with the                      Geolocation API, Web                      ...
HTML5CONNECTIVITY                      More efficient connectivity                      means more real-time chats,        ...
Source: w3c.org
HTML5GOOD BYE COOKIES      Source: w3c.org
HTML5MULTIMEDIA                     Audio and video are first class                     citizens in the HTML5 web,         ...
HTML53D, GRAPHICS, EFFECTS                          Between SVG, Canvas,                          WebGL, and CSS3 3D      ...
HTML5PERFORMANCE & INTEGRATION                      Make your Web Apps and                      dynamic web content faster...
HTML5PERFORMANCE & INTEGRATION                      CSS3 delivers a wide range of                      stylization and eff...
NEW ELEMENTSHTML5
NEW HTML5ELEMENTS  Source: w3.org
NEW HTML5            ELEMENTS<section>   <figcaption>           <bdi><article>      <video>             <wbr>  <aside>    ...
IE & HTML5  Source: Remy Sharp
IE & HTML5<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->    Sourc...
OLD HTML/XHTMLPAGE STRUCTURE
OLD HTML/XHTML PAGE STRUCTURE        <id=”header”>      <id=”navigation”>  <id=”left”><id=”content-1”>                   <...
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/T...
NEW HTML5 DOCTYPECODE SAMPLE      Source: w3.org
NEW HTML5 DOCTYPE         CODE SAMPLE<!doctype html><html>  <head>    <meta charset="UTF-8">    <title>Example document</t...
HTML5 DOCTYPE                   USE CASEThe HTML syntax of HTML5 requires a DOCTYPE to be specifiedto ensure that the brows...
NEW HTML5  ELEMENT<header> <hgroup>
NEW HTML5PAGE STRUCTURE
NEW HTML5PAGE STRUCTURE       <header>        <nav><section><article>         <aside><article>      <footer>
HTML5 HEADER         CODE SAMPLE<!-- begin: page header --><header>  <hgroup>    <h1>Header</h1>    <h2>Sub-Header</h2>  <...
HTML5 HEADER                     USE CASEIdeal for use in defining global page structure.Usually intended to contain sectio...
NEW HTML5ELEMENT<nav>
NEW HTML5PAGE STRUCTURE
NEW HTML5PAGE STRUCTURE       <header>        <nav><section><article>         <aside><article>      <footer>
HTML5 NAV         CODE SAMPLE<header>  <!-- begin: primary nav -->  <nav>    <a href=”home.html”>Home</a>    <a href=”abou...
HTML5 NAV                 USE CASESet primary navigation in header inside header tags.Use to define secondary navigation in...
NEW HTML5  ELEMENT<section>
NEW HTML5PAGE STRUCTURE
NEW HTML5PAGE STRUCTURE       <header>        <nav><section><article>         <aside><article>      <footer>
HTML5 SECTION         CODE SAMPLE<!-- begin: science section --><section id=”science”> <header>  <hgroup>   <h2>Science</h...
HTML5 SECTION                 USE CASEUse to group content into logical category or sectionsWith very few exceptions, sect...
NEW HTML5  ELEMENT<article>
NEW HTML5PAGE STRUCTURE
NEW HTML5PAGE STRUCTURE       <header>        <nav><section><article>         <aside><article>      <footer>
HTML5 ARTICLE         CODE SAMPLE<!-- begin: science section --><section id=”science”> <article>  <header>   <h2>Science</...
HTML5 ARTICLE                 USE CASEThe article element represents a component of a pagethat consists of a self-containe...
NEW HTML5 ELEMENT<video>
Good-byeFlash Plug-ins    maybe  next year!
HTML5 VIDEO               CODE SAMPLE<!-- begin: video --><video id="vid1" poster="http://v.com/video.jpg> <source type="v...
HTML5 VIDEO                 USE CASETo make the video work in Internet Explorer, Safari andfuture versions of Chrome, we m...
NEW HTML5 ELEMENT<aside>
NEW HTML5PAGE STRUCTURE            <aside>
NEW HTML5 PAGE STRUCTURE            <header>             <nav>   <section><article>              <aside><article>         ...
HTML5 ASIDE         CODE SAMPLE<!-- begin: aside right --><aside id=”aside-right”> <nav>  <ul>   <li><a href=”link.html”>n...
HTML5 ASIDE                    USE CASEIntended to be used to support surrounding elementsWith the new definition of aside,...
NEW HTML5  ELEMENT<footer>
NEW HTML5PAGE STRUCTURE
NEW HTML5PAGE STRUCTURE       <header>        <nav><section><article>         <aside><article>      <footer>
HTML5 FOOTER         CODE SAMPLE<!-- begin: science section --><section id=”science”> <article>  <header>   <h2>Science</h...
HTML5 FOOTER                 USE CASEAn important point to note is that you are not restrictedto use one <footer> element ...
NEW HTML5  ELEMENT<canvas>
HTML5 CANVAS              CODE SAMPLE<!-- begin: canvas graphic --><canvas id="myCanvas">Browser Not Supported</canvas><sc...
HTML5 CANVAS                USE CASEThe <canvas> tag is used to display drawn graphics.The <canvas> tag is only a containe...
“HAL” SHALL WEPLAY A GAME
WHAT’S NEWCSS3
CSS3              PROPERTIES      :not                        filter:      :lang                       opacity:  :first-ch...
CSS3            PROPERTYrgba(0,0,0,0.5)The “a” property-name stands, for :alpha.This new feature allows you to specify ano...
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; /* Safar...
CSS3  PROPERTYbox-shadow
CSS3BOX SHADOW
CSS3BOX SHADOW    Shadow
CSS3            CODE SAMPLE.selector {  /* Firefox */   -moz-box-shadow: 1px 1px 3px #292929;    /* Safari and chrome */  ...
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.e...
CSS3  PROPERTYtransform
CSS3             CODE SAMPLE.selector {  -webkit-transform: rotate(-9deg) scale(1.05);  -moz-transform: rotate(-9deg) scal...
CSS3        ANIMATION          RocketSpace               UX
CSS3   IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser
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....
DRUPAL HTML5    THEMEtemplate.php
DRUPAL HTML5 THEME                       CODE SAMPLE// Preprocess variables for html.tpl.php.// template_preprocess_htmlfu...
DRUPAL HTML5    THEMEhtml.tpl.php
DRUPAL HTML5 THEME                       CODE SAMPLE<?php print $doctype; ?><html lang="<?php print $language->language; ?...
DRUPAL HTML5  CONTRIBUTED THEMESOmega By Jake Strawnhttp://drupal.org/project/omegaZentropy By Alex Weberhttp://drupal.org...
GOOD                    RESOURCESIntroductin HTML5 by Burce Lawson & Remy SharpPro HTML5 Programming by Peter Lubbers, Bri...
THANKYOU @thememaster
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Upcoming SlideShare
Loading in...5
×

Introduction to HTML5/CSS3 In Drupal 7

23,308

Published on

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.

Published in: Technology
3 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
23,308
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
505
Comments
3
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduction to HTML5/CSS3 In Drupal 7

    1. 1. INTRODUCTION TOHTML5/CSS3 In Drupal 7 @thememaster
    2. 2. BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT
    3. 3. 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  
    4. 4. 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  
    5. 5. BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrowsers such as Firefox,Safari, Chrome & InternetExplorer
    6. 6. BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrowsers such as Firefox,Safari, Chrome & InternetExplorer
    7. 7. HELPFUL BOOKS
    8. 8. 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.
    9. 9. GUESS WHOCARES? ABOUT HTML5 & CSS3
    10. 10. HOW WILL IT EFFECT YOU
    11. 11. HOW WILL IT EFFECT YOU
    12. 12. 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
    13. 13. HOW WILL IT EFFECT YOU
    14. 14. HOW WILL IT EFFECT YOU
    15. 15. 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
    16. 16. 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 files uploaded to the free service. Source: WinRumors Microsoft reveals HTML5 overhaul of Windows Live SkyDrive : Posted May 24, 2011 : Tom Warren
    17. 17. 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 first, 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
    18. 18. 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
    19. 19. HMMM! WHATS SO SPECIAL ABOUTHTML5 DIFFERENCES BETWEENHTML 4.01, XHTML, HTML5
    20. 20. HTML5HTML 4.01& XHTML
    21. 21. HTML5 KEY FEATUREBETTER BLEND
    22. 22. HTML5 KEY FEATUREBETTER BLENDHTML5 CSS3 JS
    23. 23. 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
    24. 24. 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 specifications. Source: w3c.org
    25. 25. 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
    26. 26. HTML5CONNECTIVITY 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
    27. 27. Source: w3c.org
    28. 28. HTML5GOOD BYE COOKIES Source: w3c.org
    29. 29. HTML5MULTIMEDIA 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
    30. 30. 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
    31. 31. 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
    32. 32. HTML5PERFORMANCE & 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
    33. 33. NEW ELEMENTSHTML5
    34. 34. NEW HTML5ELEMENTS Source: w3.org
    35. 35. 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
    36. 36. IE & HTML5 Source: Remy Sharp
    37. 37. IE & HTML5<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Source: Remy Sharp
    38. 38. OLD HTML/XHTMLPAGE STRUCTURE
    39. 39. OLD HTML/XHTML PAGE STRUCTURE <id=”header”> <id=”navigation”> <id=”left”><id=”content-1”> <id=”right”><id=”content-2”> <id=”footer”>
    40. 40. NEW HTML5PAGE STRUCTURE
    41. 41. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    42. 42. NEW HTML5 ELEMENT<!doctype html>
    43. 43. OLD HTML DOCTYPECODE SAMPLE Example: w3cschools.com
    44. 44. 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
    45. 45. NEW HTML5 DOCTYPECODE SAMPLE Source: w3.org
    46. 46. 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
    47. 47. HTML5 DOCTYPE USE CASEThe HTML syntax of HTML5 requires a DOCTYPE to be specifiedto 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
    48. 48. NEW HTML5 ELEMENT<header> <hgroup>
    49. 49. NEW HTML5PAGE STRUCTURE
    50. 50. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    51. 51. 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
    52. 52. HTML5 HEADER USE CASEIdeal 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 identifythe section purpose or relevancy. Source: www.essentaste.com
    53. 53. NEW HTML5ELEMENT<nav>
    54. 54. NEW HTML5PAGE STRUCTURE
    55. 55. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    56. 56. 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
    57. 57. HTML5 NAV USE CASESet primary navigation in header inside header tags.Use to define secondary navigation in left and rightsidebar rails.Use anywhere on side that requires navigation or sitetoolbars functionality. Source: www.essentaste.com
    58. 58. NEW HTML5 ELEMENT<section>
    59. 59. NEW HTML5PAGE STRUCTURE
    60. 60. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    61. 61. 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
    62. 62. 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
    63. 63. NEW HTML5 ELEMENT<article>
    64. 64. NEW HTML5PAGE STRUCTURE
    65. 65. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    66. 66. 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
    67. 67. 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
    68. 68. NEW HTML5 ELEMENT<video>
    69. 69. Good-byeFlash Plug-ins maybe next year!
    70. 70. 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" /> <sourcesrc="http://v.com/vid.m4v"/> <source src="http://v.com/vid.ogv" /></video><!-- end: video --> Example: kaltura.org
    71. 71. 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
    72. 72. NEW HTML5 ELEMENT<aside>
    73. 73. NEW HTML5PAGE STRUCTURE <aside>
    74. 74. NEW HTML5 PAGE STRUCTURE <header> <nav> <section><article> <aside><article> <footer>
    75. 75. 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
    76. 76. HTML5 ASIDE USE CASEIntended to be used to support surrounding elementsWith the new definition of aside, it’s crucial to remain awareof its context. When used within an article element, thecontents should be specifically 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
    77. 77. NEW HTML5 ELEMENT<footer>
    78. 78. NEW HTML5PAGE STRUCTURE
    79. 79. NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
    80. 80. 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
    81. 81. 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
    82. 82. NEW HTML5 ELEMENT<canvas>
    83. 83. 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
    84. 84. 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
    85. 85. “HAL” SHALL WEPLAY A GAME
    86. 86. WHAT’S NEWCSS3
    87. 87. 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
    88. 88. 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.
    89. 89. CSS3RGBA PROPERTY
    90. 90. CSS3RGBA PROPERTY1/100% 0.5/50% 0.8/80%
    91. 91. CSS3 PROPERTYborder-radius
    92. 92. CSS3ROUNDED CORNERS
    93. 93. CSS3ROUNDED CORNERS Round Corners
    94. 94. 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
    95. 95. CSS3 PROPERTYbox-shadow
    96. 96. CSS3BOX SHADOW
    97. 97. CSS3BOX SHADOW Shadow
    98. 98. 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;}
    99. 99. CSS3 PROPERTYtext-shadow
    100. 100. CSS3 TEXT SHADOWDrupal
    101. 101. CSS3 CODE SAMPLE.shadow { /* CSS3 */ text-shadow: 1px 1px 3px #292929;}
    102. 102. CSS3 METHOD@font-face
    103. 103. 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;}
    104. 104. CSS3 PROPERTYtransform
    105. 105. 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
    106. 106. CSS3 ANIMATION RocketSpace UX
    107. 107. CSS3 IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser
    108. 108. CSS3 IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser
    109. 109. HTML5 & CSS3 WITHDRUPAL 7
    110. 110. MAKE A DRUPAL 7 THEMEhtml.tpl.php page.tpl.php node.tpl.php template.phpstyle.css
    111. 111. DRUPAL HTML5 THEMEtemplate.php
    112. 112. 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 = ; }}
    113. 113. DRUPAL HTML5 THEMEhtml.tpl.php
    114. 114. 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>
    115. 115. 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
    116. 116. 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
    117. 117. THANKYOU @thememaster
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×