Your SlideShare is downloading. ×
0
Beginner & Intermediate Guide                                  to HTML5/CSS3 In Drupal                                    ...
Thursday, December 8, 2011   2
BROUGHT TO YOU BY                             THE GOOD FOLKS AT                                 DO DRUPAL RIGHTThursday, D...
About Me     • Bachelors in Communication           Technology & Graphic Design           from Eastern Michigan           ...
About Me     • Bachelors in Communication           Technology & Graphic Design           from Eastern Michigan           ...
What will you learn?Thursday, December 8, 2011      4
What will you learn?        HTML5                       CSS3        • Semantic Web              • Text in Columns        •...
Thursday, December 8, 2011   5
What is                             HTML5?Thursday, December 8, 2011              5
Thursday, December 8, 2011   6
Thursday, December 8, 2011   6
WebThursday, December 8, 2011   6
Web                                         HTML                                          4.01                            ...
Web                                              HTML5                                         HTML                       ...
Next generation of HTML           The latest version of HTML known as           HTML5, a set of capabilities that gives   ...
A Better BlendThursday, December 8, 2011   8
A Better Blend                             HTML5   CSS3   JSThursday, December 8, 2011                       8
Who Cares?Thursday, December 8, 2011   9
Who Cares?Thursday, December 8, 2011   9
From Dries      "I believe in HTML5 enough that I wanted to make it one of the      top 5 initiatives for Drupal 8; and sw...
HTML5 Fallout      • Change Doctype      • Start using Outliner      • Use Header, Section,        Footer, and Nav Tags   ...
HTML5 Fallout      • Change Doctype      • Start using Outliner      • Use Header, Section,        Footer, and Nav Tags   ...
HTML5 ElementsThursday, December 8, 2011   12
HTML5 Elements     Head                    Sections   Grouping     Tables     doctype                 body       p        ...
http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdfThursday, December 8, 2011                   ...
http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdfThursday, December 8, 2011                   ...
HTML5 ElementsThursday, December 8, 2011   14
HTML5 Elements     Forms                   Embedded   Text-level     form                    img        a            var  ...
Thursday, December 8, 2011   15
HTML5                       SemanticsThursday, December 8, 2011           15
Getting information off the Internet is                             like taking a drink from a fire hydrant.               ...
The Missing LinkThursday, December 8, 2011   17
The Missing LinkThursday, December 8, 2011   17
What is Semantic Web?               "The Semantic Web is a web that is               able to describe things in a way that...
Semantic Benefits      By making the web understandable to machines:      • Programs and web sites can exchange information...
Semantic Benefits      By making the web understandable to machines:      • Programs and web sites can exchange information...
Semantic Benefits      By making the web understandable to machines:      • Programs and web sites can exchange information...
Thursday, December 8, 2011   20
HTML5                             StructureThursday, December 8, 2011               20
HTML5 StructureThursday, December 8, 2011   21
HTML5 Structure                                    <header>                                     <nav>                     ...
<header> </hgroup>       <article>         <header>                         Wrong Way             <h1>My best blog post</h...
<header></hgroup>      <header>        <hgroup>                         <h1>The reality dysfunction</h1>           <h2>Spa...
<section>      <section id="wrapper">        <header>          <h1>My super duper page</h1>        </header>              ...
<section>        <div id="wrapper">         <article>             <header>                <h1>Document Outlines</h1>      ...
Use An Outliner Tool    • Use to group content into logical category or         sections    • With very few exceptions, se...
Outliner Output       http://gsnedders.html5.org/outlinerThursday, December 8, 2011                   27
Quick Tip         • “<body>” is already a wrapper and can be                hacked to achieve some pretty remarkable layou...
<nav>      The following shouldnʼt be      enclosed by <nav>       • Pagination controls                                  ...
Semantic Captions    A caption is the definition of an image    Use Figure to enclose the image and the    Figure Caption, ...
Code Sample    <figure>        <img src="/kookaburra.jpg" alt="Kooaburra">        <img src="/pelican.jpg" alt="Pelican stoo...
Code Sample    <figure>        <img src="/kookaburra.jpg" alt="Kooaburra">        <img src="/pelican.jpg" alt="Pelican stoo...
Thursday, December 8, 2011   32
Microdata vs.               MicroformatsThursday, December 8, 2011                   32
Thursday, December 8, 2011   33
Thursday, December 8, 2011   33
Microdata & Microformats      •      Your web pages have an underlying meaning that people understand             when the...
Microdata & Microformats      •      Your web pages have an underlying meaning that people understand             when the...
Thursday, December 8, 2011   35
HTML5 &                             MicrodataThursday, December 8, 2011               35
Microdata     Global Attributes:     •      itemscope – Creates the Item and indicates that descendants of this           ...
Microdata           <div itemscope itemtype="http://data-vocabulary.org/Event">        <a itemprop="url" href="http://www....
Microdata           <div itemscope itemtype="http://data-vocabulary.org/Event">        <a itemprop="url" href="http://www....
Microdata Module                                         Rich Snippets Testing Tool                             http://www...
Microdata Module                                         Rich Snippets Testing Tool                             http://www...
Thursday, December 8, 2011   39
HTML5 &               MicroformatsThursday, December 8, 2011             39
Microformats         •      Used on web pages to describe a specific type of information —for                example, a rev...
Microformats         •      Used on web pages to describe a specific type of information —for                example, a rev...
Code Sample     <div>       <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a>          ...
hCard       • hCard uses a class of fn (meaning Full Name) to identify a             name. As is this case there’s no elem...
Thursday, December 8, 2011   43
Thursday, December 8, 2011   43
Microformat Tools      • Microformat biz card creator:             http://microformats.org/code/hcard/creator      • hRevi...
Thursday, December 8, 2011   45
HTML5                             ThemesThursday, December 8, 2011            45
Drupal Themes         • AdaptiveTheme         • Genesis         • Omega         • Gamma (Omega sub theme)         • HTML5 ...
Drupal Themes         • AdaptiveTheme         • Genesis         • Omega         • Gamma (Omega sub theme)         • HTML5 ...
The Winners Table                             http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7Thur...
The Winners Table                             http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7Thur...
Delta Module     • Delta allows you, via the Context module to make           duplicates of your theme settings (templates...
JS for your Theme     •     Modernizr - modernizr-1.6.min.js               •     Download from: http://www.modernizr.com/ ...
Thursday, December 8, 2011   50
HTML5                             ModulesThursday, December 8, 2011             50
Drupal Modules     There are 26 HTML5 based modules for Drupal 6 and 22 for     Drupal 7. Some of them are still in develo...
Drupal Modules     There are 26 HTML5 based modules for Drupal 6 and 22 for     Drupal 7. Some of them are still in develo...
Video Module     Video module allows you to upload video in any format, play video in any     format, transcode video to h...
More HTML5 Tools     Features you can find in the     Drupal 7 version:     •     Support for the html5shiv plugin (for old...
More HTML5 Tools     Features you can find in the     Drupal 7 version:     •     Support for the html5shiv plugin (for old...
HTML5 Tools Module     Override Drupals Forms with HTML5 markup     •     Site information     •     Search block     •   ...
HTML5 Tools Module     Simplify <HEAD> Markup     •     Simplify doctype and add html5shiv     •     Simplify style tags  ...
HTML5 Tools Module     HTML5 Tools: Convert other variables     •     Alter publication date markup     •     If one of th...
Thursday, December 8, 2011   57
Code Sample       <meta http-equiv="X-UA-Compatible" content="chrome=1" />       <IfModule mod_setenvif.c>           <IfMo...
Seamless IntegrationThursday, December 8, 2011   59
Thursday, December 8, 2011   60
HTML5 &                              SVGThursday, December 8, 2011             60
SVG     Scalable Vector Graphics     (SVG) is a new graphics file     format and Web development     language based on XML....
SVG     Scalable Vector Graphics     (SVG) is a new graphics file     format and Web development     language based on XML....
SVG Benefits     •     Compatibility           SVG is text based and works seamlessly with current Web           technologi...
SVG Links     •      Change stylesheets: http://svg-wow.org/alternate-stylesheet/            alternate-stylesheet.xhtml   ...
SVG Links     •      Change stylesheets: http://svg-wow.org/alternate-stylesheet/            alternate-stylesheet.xhtml   ...
HTML5 Links     •     http://diveintohtml5.org/     •     http://html5doctor.com     •     http://code.google.com/p/html5s...
Thursday, December 8, 2011   65
Theme With                             CSS3Thursday, December 8, 2011                65
Thursday, December 8, 2011   66
The Compatibility BattleThursday, December 8, 2011                          66
CSS Warrior     PIE (progressive internet explorer) makes Internet     Explorer 6-9 capable of rendering several of the mo...
CSS Warrior     PIE (progressive internet explorer) makes Internet     Explorer 6-9 capable of rendering several of the mo...
Are We There Yet?                             http://caniuse.comThursday, December 8, 2011                        68
Are We There Yet?                             http://caniuse.comThursday, December 8, 2011                        68
Thursday, December 8, 2011   69
Do Websites                          Look                             need to              Exactlythe Same               i...
http://dowebsitesneedtolookexactlythesameineverybrowser.com/Thursday, December 8, 2011                                    ...
NO                             http://dowebsitesneedtolookexactlythesameineverybrowser.com/Thursday, December 8, 2011     ...
Modernizr     •     Better yet, use Irishs modernizr, “an open source, MIT-           licensed JavaScript library that det...
Modernizr Features     What does Modernizr do?     •      It will replace that class with the class “js” which allows you ...
Modernizr Features     •     applicationCache    •   @font-face     •     border-image:       •   Geolocation API     •   ...
Modernizr Features     •     applicationCache    •   @font-face     •     border-image:       •   Geolocation API     •   ...
Modernizr Example           .borderradius #content {           border: 1px solid #141414;           -webkit-border-radius:...
Thursday, December 8, 2011   75
CSS3         Media QueriesThursday, December 8, 2011          75
Thursday, December 8, 2011   76
Thursday, December 8, 2011   76
CSS Media QueriesThursday, December 8, 2011   77
CSS Media Queries                             http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011      ...
CSS Media Queries                             http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011      ...
Code Sample      <!DOCTYPE html>      <html>      <head>          <meta http-equiv="Content-Type" content="text/html; char...
Code Sample      @media print {         body { font-size: 10pt }       }       @media screen {         body { font-size: 1...
Thursday, December 8, 2011   81
CSS3                             FontsThursday, December 8, 2011           81
CSS3 @Fonts       •     Import directly from the Google Webfonts API:       @import url(http://fonts.googleapis.com/css?fa...
CSS3 @Fonts       • Hinting (for IE)       • Font hinting is the use of instructions to adjust the display of an          ...
Thursday, December 8, 2011   84
CSS3            BackgroundsThursday, December 8, 2011          84
http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011                                             85
Tablecloth                              http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011                 ...
http://leaverou.me/css3patterns/#carbon-fibreThursday, December 8, 2011                                                  86
Carbon Fiber                               http://leaverou.me/css3patterns/#carbon-fibreThursday, December 8, 2011         ...
http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011                                             87
Tartan                             http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011                      ...
Code Sample      #tablecloth {        background-color:white;        background-image: linear-gradient(0, rgba(200,0,0,.5)...
CSS Columns       Lorem ipsum dolor sit      Duis autem vel eum          luptatum zzril delenit     Investigationes       ...
Code Sample      .newspaper      {          -webkit-columns: 100px 2; /* Safari and Chrome */          -moz-column-gap: 40...
CSS Layouts                             http://www.netmagazine.com/features/future-css-layouts                            ...
CSS Layouts                             http://www.netmagazine.com/features/future-css-layouts                            ...
CSS3 Links     •     http://adaptive-images.com/     •     http://htmlref.labs.oreilly.com/beta/#elements     •     http:/...
Thursday, December 8, 2011   93
Thank You!Thursday, December 8, 2011      93
Upcoming SlideShare
Loading in...5
×

HTML5 & CSS3 in Drupal (on the Bayou)

7,773

Published on

HTML5 and CSS3 are a part of the new Web 3.0 toolbox! This session will walk you through easy ways to use some of the more advanced features in HTML5. We will explain the uses for HTML5 and CSS3 that will enhance your design and create a better user experience for your audience. If you are familiar with the basics, but want to know the best practices for integrating HTML5 features into your Drupal site now, this is the session for you.

Who’s this for:

Themers who are familiar with basic CSS3 concepts and want to take it to the next level
Practical uses of both HTML5 and CSS3 for intermediate developers
What you’ll learn:

Real Life applications to start using CSS3 and HTML5 today
Tactics to bring older browsers up to speed and enhance compatibility
Use HTML5 and CSS3 to Enhance UX
How HTML5 and CSS3 can help you design for mobile
HTML5

Microformats, Form API, Semantic captions for images
How to Enhance Adaptive Theme (D7 theme that uses HTML5)
HTML5 Themes and Modules
CSS3

Text in Columns
Transitions (& animation?)
CSS only Backgrounds
Using SVG
The Future of CSS

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,773
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
108
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 & CSS3 in Drupal (on the Bayou)"

  1. 1. Beginner & Intermediate Guide to HTML5/CSS3 In Drupal By Kendall Totten @starryeyez024 #HTML5CSS3 http://t.co/VssZle71Thursday, December 8, 2011 1
  2. 2. Thursday, December 8, 2011 2
  3. 3. BROUGHT TO YOU BY THE GOOD FOLKS AT DO DRUPAL RIGHTThursday, December 8, 2011 2
  4. 4. About Me • 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 Kendall TottenThursday, December 8, 2011 3
  5. 5. About Me • 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 Kendall TottenThursday, December 8, 2011 3
  6. 6. What will you learn?Thursday, December 8, 2011 4
  7. 7. What will you learn? HTML5 CSS3 • Semantic Web • Text in Columns • Microformats • Transitions  • Real Life applications • CSS3Pie • Tactics to enhance • Using SVG compatibility  • The future of CSS • Enhance UX  • How CSS3 can help you • Semantic image captions design for mobile • The Omega Theme • HTML5 Themes and Modules • How to start using HTML5 Today!Thursday, December 8, 2011 4
  8. 8. Thursday, December 8, 2011 5
  9. 9. What is HTML5?Thursday, December 8, 2011 5
  10. 10. Thursday, December 8, 2011 6
  11. 11. Thursday, December 8, 2011 6
  12. 12. WebThursday, December 8, 2011 6
  13. 13. Web HTML 4.01 Flash Help Browser Support PluginsThursday, December 8, 2011 6
  14. 14. Web HTML5 HTML 4.01 Flash Help Browser Support PluginsThursday, December 8, 2011 6
  15. 15. Next generation of HTML The 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.com html-5-reset-stylesheetThursday, December 8, 2011 7
  16. 16. A Better BlendThursday, December 8, 2011 8
  17. 17. A Better Blend HTML5 CSS3 JSThursday, December 8, 2011 8
  18. 18. Who Cares?Thursday, December 8, 2011 9
  19. 19. Who Cares?Thursday, December 8, 2011 9
  20. 20. From Dries "I believe in HTML5 enough that I wanted to make it one of the top 5 initiatives for Drupal 8; and switch Drupals 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 BuytaertThursday, December 8, 2011 10
  21. 21. HTML5 Fallout • Change Doctype • Start using Outliner • Use Header, Section, Footer, and Nav Tags • Start thinking about Semantics MarkupThursday, December 8, 2011 11
  22. 22. HTML5 Fallout • Change Doctype • Start using Outliner • Use Header, Section, Footer, and Nav Tags • Start thinking about Semantics MarkupThursday, December 8, 2011 11
  23. 23. HTML5 ElementsThursday, December 8, 2011 12
  24. 24. HTML5 Elements Head Sections Grouping Tables doctype body p table html article hr caption head nav pre thead title blockquote tbody aside base ol tfoot section ul tr link meta header li th style footer dl, dt, dd td script h1-h6 figure col noscript hgroup figcaption colgroup address divThursday, December 8, 2011 12
  25. 25. http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdfThursday, December 8, 2011 13
  26. 26. http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdfThursday, December 8, 2011 13
  27. 27. HTML5 ElementsThursday, December 8, 2011 14
  28. 28. HTML5 Elements Forms Embedded Text-level form img a var fieldset iframe em legend embed strong mark label object i, b bdi input param u bdo button video s ruby, rt, rp select audio small span datalist abbr br source optgroup q canvas cite Interactive option track dfn details textarea map sub, sup summary keygen area time command output code menu progress meter kbd Edits samp del, ins wbrThursday, December 8, 2011 14
  29. 29. Thursday, December 8, 2011 15
  30. 30. HTML5 SemanticsThursday, December 8, 2011 15
  31. 31. Getting information off the Internet is like taking a drink from a fire hydrant.  —Mitchell KaporThursday, December 8, 2011 16
  32. 32. The Missing LinkThursday, December 8, 2011 17
  33. 33. The Missing LinkThursday, December 8, 2011 17
  34. 34. 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.aspThursday, December 8, 2011 18
  35. 35. Semantic Benefits By 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.Thursday, December 8, 2011 19
  36. 36. Semantic Benefits By 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. I love Drupal.Thursday, December 8, 2011 19
  37. 37. Semantic Benefits By 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. I love Drupal.Thursday, December 8, 2011 19
  38. 38. Thursday, December 8, 2011 20
  39. 39. HTML5 StructureThursday, December 8, 2011 20
  40. 40. HTML5 StructureThursday, December 8, 2011 21
  41. 41. HTML5 Structure <header> <nav> <section> <article> <aside> <article> <footer>Thursday, December 8, 2011 21
  42. 42. <header> </hgroup> <article> <header> Wrong Way <h1>My best blog post</h1> </header> </article> OR <header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p> </header>Thursday, December 8, 2011 22
  43. 43. <header></hgroup> <header> <hgroup>     <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> Right Way </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>Thursday, December 8, 2011 23
  44. 44. <section> <section id="wrapper"> <header> <h1>My super duper page</h1> </header> Wrong Way <section id="main"> Section Content </section> <section id="secondary"> Secondary Content </section> <section id="footer"> <footer> Footer Content </footer> </section>Thursday, December 8, 2011 24
  45. 45. <section> <div id="wrapper"> <article> <header> <h1>Document Outlines</h1> Right Way 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>Thursday, December 8, 2011 25
  46. 46. 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 ToolThursday, December 8, 2011 26
  47. 47. Outliner Output http://gsnedders.html5.org/outlinerThursday, December 8, 2011 27
  48. 48. 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.Thursday, December 8, 2011 28
  49. 49. <nav> The following shouldnʼt be enclosed by <nav> • Pagination controls Wrong Way • Social links • Tags on a blog post • Categories on a blog post • Tertiary navigation • Fat footersThursday, December 8, 2011 29
  50. 50. Semantic Captions A 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>Thursday, December 8, 2011 30
  51. 51. Code Sample <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>Thursday, December 8, 2011 31
  52. 52. Code Sample <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>Thursday, December 8, 2011 31
  53. 53. Thursday, December 8, 2011 32
  54. 54. Microdata vs. MicroformatsThursday, December 8, 2011 32
  55. 55. Thursday, December 8, 2011 33
  56. 56. Thursday, December 8, 2011 33
  57. 57. Microdata & Microformats • 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 do this. http://schema.orgThursday, December 8, 2011 34
  58. 58. Microdata & Microformats • 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 do this. http://schema.orgThursday, December 8, 2011 34
  59. 59. Thursday, December 8, 2011 35
  60. 60. HTML5 & MicrodataThursday, December 8, 2011 35
  61. 61. Microdata Global 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 ids of elements with additional properties elsewhere in the document.Thursday, December 8, 2011 36
  62. 62. 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/EventThursday, December 8, 2011 37
  63. 63. 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/EventThursday, December 8, 2011 37
  64. 64. Microdata Module Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippetsThursday, December 8, 2011 38
  65. 65. Microdata Module Rich Snippets Testing Tool http://www.google.com/webmasters/tools/richsnippetsThursday, December 8, 2011 38
  66. 66. Thursday, December 8, 2011 39
  67. 67. HTML5 & MicroformatsThursday, December 8, 2011 39
  68. 68. 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.Thursday, December 8, 2011 40
  69. 69. 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.Thursday, December 8, 2011 40
  70. 70. 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>Thursday, December 8, 2011 41
  71. 71. 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>Thursday, December 8, 2011 42
  72. 72. Thursday, December 8, 2011 43
  73. 73. Thursday, December 8, 2011 43
  74. 74. Microformat Tools • Microformat biz card creator: http://microformats.org/code/hcard/creator • hReview Creator http://microformats.org/code/hreview/creator • hCalendar Creator http://microformats.org/code/hcalendar/creatorThursday, December 8, 2011 44
  75. 75. Thursday, December 8, 2011 45
  76. 76. HTML5 ThemesThursday, December 8, 2011 45
  77. 77. 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-tacksThursday, December 8, 2011 46
  78. 78. 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-tacksThursday, December 8, 2011 46
  79. 79. The Winners Table http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7Thursday, December 8, 2011 47
  80. 80. The Winners Table http://www.digett.com/blog/06/29/2011/html5-base-starter-themes-drupal-7Thursday, December 8, 2011 47
  81. 81. Delta Module • Delta allows you, via the Context module to make duplicates of your theme settings (templates) for any context on your site. • This gives you the ability to use these templates as a reaction in Context. </awesomesauce>Thursday, December 8, 2011 48
  82. 82. JS for your Theme • Modernizr - modernizr-1.6.min.js • Download from: http://www.modernizr.com/ • IE6 ping fix - dd_belatedpng.js • Download from: http://www.dillerdesign.com/experiment/ DD_belatedPNG/ • HTML5 Shim -html5.js (comes included with Omega!) • Download from: http://code.google.com/p/html5shim/ • Media-size responsive images - respond.js • Download from: https://github.com/scottjehl/Respond#readmeThursday, December 8, 2011 49
  83. 83. Thursday, December 8, 2011 50
  84. 84. HTML5 ModulesThursday, December 8, 2011 50
  85. 85. Drupal Modules There are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development. • HTML5 Tools (your secret weapon!) • Elements • Video - most popular HTML5 based module for both Drupal 6 and 7 • VideoJS • Media: Vimeo • Media: Archive • Aloha HTML5 Editor • Plupload Integration • MediaFront • JPlayerThursday, December 8, 2011 51
  86. 86. Drupal Modules There are 26 HTML5 based modules for Drupal 6 and 22 for Drupal 7. Some of them are still in development. • HTML5 Tools (your secret weapon!) • Elements • Video - most popular HTML5 based module for both Drupal 6 and 7 • VideoJS • Media: Vimeo • Media: Archive • Aloha HTML5 Editor • Plupload Integration • MediaFront • JPlayerThursday, December 8, 2011 51
  87. 87. Video Module Video 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/videoThursday, December 8, 2011 52
  88. 88. More HTML5 Tools Features 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. • Make new Elements available in the Views UI • Tons of other forms and markup changes.Thursday, December 8, 2011 53
  89. 89. More HTML5 Tools Features 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. • Make new Elements available in the Views UI • Tons of other forms and markup changes.Thursday, December 8, 2011 53
  90. 90. HTML5 Tools Module Override Drupals Forms with HTML5 markup • Site information • Search block • Search form • User registration: url, email, telephone • Contact forms • Table select widget yoursite.com/admin/config/markup/html5-toolsThursday, December 8, 2011 54
  91. 91. HTML5 Tools Module Simplify <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. yoursite.com/admin/config/markup/html5-toolsThursday, December 8, 2011 55
  92. 92. HTML5 Tools Module HTML5 Tools: Convert other variables • Alter publication date markup • 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 themes template.php file. yoursite.com/admin/config/markup/html5-toolsThursday, December 8, 2011 56
  93. 93. Thursday, December 8, 2011 57
  94. 94. 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>Thursday, December 8, 2011 58
  95. 95. Seamless IntegrationThursday, December 8, 2011 59
  96. 96. Thursday, December 8, 2011 60
  97. 97. HTML5 & SVGThursday, December 8, 2011 60
  98. 98. SVG Scalable 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.xhtmlThursday, December 8, 2011 61
  99. 99. SVG Scalable 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.xhtmlThursday, December 8, 2011 61
  100. 100. SVG Benefits • Compatibility SVG is text based and works seamlessly with current Web technologies like HTML, GIF, JPEG, PNG, SMIL, ASP, JSP, and JavaScript. • Quality Graphics 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_animatemotion2Thursday, December 8, 2011 62
  101. 101. 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.xhtmlThursday, December 8, 2011 63
  102. 102. 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.xhtmlThursday, December 8, 2011 63
  103. 103. HTML5 Links • http://diveintohtml5.org/ • http://html5doctor.com • 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://html5test.com/ • 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/Thursday, December 8, 2011 64
  104. 104. Thursday, December 8, 2011 65
  105. 105. Theme With CSS3Thursday, December 8, 2011 65
  106. 106. Thursday, December 8, 2011 66
  107. 107. The Compatibility BattleThursday, December 8, 2011 66
  108. 108. CSS Warrior PIE (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/css3pieThursday, December 8, 2011 67
  109. 109. CSS Warrior PIE (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/css3pieThursday, December 8, 2011 67
  110. 110. Are We There Yet? http://caniuse.comThursday, December 8, 2011 68
  111. 111. Are We There Yet? http://caniuse.comThursday, December 8, 2011 68
  112. 112. Thursday, December 8, 2011 69
  113. 113. Do Websites Look need to Exactlythe Same in Every BrowserThursday, December 8, 2011 69
  114. 114. http://dowebsitesneedtolookexactlythesameineverybrowser.com/Thursday, December 8, 2011 70
  115. 115. NO http://dowebsitesneedtolookexactlythesameineverybrowser.com/Thursday, December 8, 2011 70
  116. 116. Modernizr • Better yet, use Irishs 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 themes 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.Thursday, December 8, 2011 71
  117. 117. Modernizr Features What 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-modernizrThursday, December 8, 2011 72
  118. 118. Modernizr Features • applicationCache • @font-face • border-image: • Geolocation API • border-radius: • hsla() • box-shadow: • HTML5 Audio • Canvas • HTML5 Video • Canvas Text • Input Attributes • CSS 2D Transforms • Input Types • CSS 3D Transforms • localStorage • CSS Animations • Multiple backgrounds • CSS Columns • opacity: • CSS Gradients • rgba() • CSS Reflections • sessionStorage • CSS Transitions • Web WorkersThursday, December 8, 2011 73
  119. 119. Modernizr Features • applicationCache • @font-face • border-image: • Geolocation API • border-radius: • hsla() • box-shadow: • HTML5 Audio • Canvas • HTML5 Video • Canvas Text • Input Attributes • CSS 2D Transforms • Input Types • CSS 3D Transforms • localStorage • CSS Animations • Multiple backgrounds • CSS Columns • opacity: • CSS Gradients • rgba() • CSS Reflections • sessionStorage • CSS Transitions • Web WorkersThursday, December 8, 2011 73
  120. 120. 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-queriesThursday, December 8, 2011 74
  121. 121. Thursday, December 8, 2011 75
  122. 122. CSS3 Media QueriesThursday, December 8, 2011 75
  123. 123. Thursday, December 8, 2011 76
  124. 124. Thursday, December 8, 2011 76
  125. 125. CSS Media QueriesThursday, December 8, 2011 77
  126. 126. CSS Media Queries http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 78
  127. 127. CSS Media Queries http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 78
  128. 128. Code Sample <!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> http://css-tricks.com/6206-resolution-specific-stylesheets http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 79
  129. 129. Code Sample @media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } http://css-tricks.com/6206-resolution-specific-stylesheets http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 80
  130. 130. Thursday, December 8, 2011 81
  131. 131. CSS3 FontsThursday, December 8, 2011 81
  132. 132. CSS3 @Fonts • Import directly from the Google Webfonts API: @import url(http://fonts.googleapis.com/css?family=Alike+Angular); http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 82
  133. 133. 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/Thursday, December 8, 2011 83
  134. 134. Thursday, December 8, 2011 84
  135. 135. CSS3 BackgroundsThursday, December 8, 2011 84
  136. 136. http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011 85
  137. 137. Tablecloth http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011 85
  138. 138. http://leaverou.me/css3patterns/#carbon-fibreThursday, December 8, 2011 86
  139. 139. Carbon Fiber http://leaverou.me/css3patterns/#carbon-fibreThursday, December 8, 2011 86
  140. 140. http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011 87
  141. 141. Tartan http://leaverou.me/css3patterns/#tartanThursday, December 8, 2011 87
  142. 142. Code Sample #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); } http://css-tricks.com/6731-css-media-queries http://leaverou.me/css3patternsThursday, December 8, 2011 88
  143. 143. CSS Columns Lorem ipsum dolor sit Duis autem vel eum luptatum zzril delenit Investigationes amet, consectetuer iriure dolor in augue duis dolore te demonstraverunt adipiscing elit, sed hendrerit in vulputate feugait nulla facilisi. lectores legere me diam nonummy nibh velit esse molestie Nam liber tempor cum lius quod ii legunt euismod tincidunt ut consequat, vel illum soluta nobis eleifend saepius. laoreet dolore magna dolore eu feugiat nulla option congue nihil aliquam erat volutpat. facilisis at vero eros et imperdiet doming id Ut wisi enim ad minim accumsan et iusto quod mazim placerat veniam, quis nostrud odio dignissim qui facer possim assum. exerci tation blandit praesent  ullamcorper suscipit Typi non habent lobortis nisl ut aliquip Accumsan et iusto claritatem insitam; est ex ea commodo odio dignissim qui usus legentis in iis qui consequat. blandit praesent facit eorum claritatem. http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrapThursday, December 8, 2011 89
  144. 144. Code Sample .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; } http://css-tricks.com/6731-css-media-queriesThursday, December 8, 2011 90
  145. 145. CSS Layouts http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrapThursday, December 8, 2011 91
  146. 146. CSS Layouts http://www.netmagazine.com/features/future-css-layouts http://www.makeuseof.com/dir/csstextwrapThursday, December 8, 2011 91
  147. 147. 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/Thursday, December 8, 2011 92
  148. 148. Thursday, December 8, 2011 93
  149. 149. Thank You!Thursday, December 8, 2011 93
  1. A particular slide catching your eye?

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

×