MandakiniAyushi Infotech
In The Next    30 Minutes1.Whats new in HTML52.HTML5 with Drupal73.Why HTML5 and CSS34.Difference between HTML 4.0x,  XHTM...
BASIC ASSUMPTIONS•Should know HTML & CSS markupBasic•Understating of Drupal & Theming•Familiar with modern browsers e.g.Fi...
HTML5 with Drupal Ref.HTML5 TOOLS:http://drupal.org/project/html5_toolsHTML5 Base Theme: http://drupal.org/project/boronht...
1.1 Whats new in HTML5•   New Elements•   New Attributes•   Full CSS3 Support•   Video and Audio•   2D/3D Graphics•   Loca...
2.1 Drupal 7 Theme with HTML5html.tpl.phppage.tpl.phpnode.tpl.phptemplate.phpstyle.cssHeader.incFooter.inc
2.2 html.tpl.php(After – HTML5)<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /> <meta http-equiv="x-ua-compat...
2.3 Template.php(Before – XHTML)<link rel="stylesheet" href="" type="text/css" media="all" /><style type="text/css" media=...
2.4 Template.php(After – HTML5)<link rel="stylesheet" href="..." /><style> /* Code here. */ </style><script> /* Code here....
2.5 node.tpl.php(After – HTML5)<article id="node-title" class="node clearfix" ><header><h1 class="title"><a href="xxx">My ...
3.1.Responsive web design:Fit in all mobile deviceCompatible for allbrowser e.g. Firefox,IE,safari and chrome
3.2.SEMANTICSNew elements for headers,footers, menus, sectionsand articles.                 (source:http://www.w3.org/html...
3.3 HTML5 Forms•New form elements, newattributes, new input types,automatic validation.
3.4. HTML5 ApplicationsWith HTML5, web application development iseasier than ever.•   Local data storage•   Local file acc...
3.5. MultimediaWith HTML5, playing videoand audio is easier than ever.  HTML5 <video>  HTML5 <audio>           (source:w3c...
3.6. Graphics & EffectsWith HTML5, drawing graphics is easierthan ever:  Using the <canvas> element  Using inline SVG  Usi...
3.7. Performance &IntegrationMake your Web Apps and dynamic webcontent faster with a variety oftechniques and technologies...
3.8. HTML5 Uses CSS3•   New Selectors•   New Properties•   Animations•   2D/3D Transformations•   Rounded Corners•   Shado...
4.1 NEW HTML5 ELEMENTS<section> <figcaption> <bdi><article> <video> <wbr><aside> <track> <canvas><header> <embed> <command...
4.2 IE & HTML5<!--[if lt IE 9]><scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->      ...
4.3 Old HTML Page Structure
4.4 New HTML5 Page Structure
4.5 OLD HTML DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr...
4.6 New HTML5 DOCTYPE CODE SAMPLE<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="styleshee...
4.7 HTML5 HEADER CODE<!-- begin: page header →<header><hgroup><h1>Header</h1><h2>Sub-Header</h2></hgroup><p>Some more head...
4.8 HTML5 NAV CODE<header><!-- begin: primary nav --><nav><a href=”home.html”>Home</a><a href=”about.html”>About</a></nav>...
4.9 NEW HTML5 ELEMENT<!-- begin: science section →<section id=”science”><header><hgroup> <h2>Science</h2> </hgroup></heade...
4.10 NEW HTML5 ELEMENT
4.11 NEW HTML5 ELEMENT<!-- begin: science section →<section id=”science”><article><header> <h2>Science</h2> </header><p>Sp...
4.12 NEW HTML5 ELEMENT <!-- begin: video →<video id="vid1"poster="http://v.com/video.jpg><source type="video/webm"src="htt...
5.1 New Input Type color      date datetime   datetime-local email month      number range      search tel        time url...
4.2 HTML5 New Form AttributesNew attributes for <form>:Autocomplete         NovalidateNew attributes for <input>:Autocompl...
5.3 HTML5 Other APIsGeolocationCommunication APIsWebsocketsWeb WorkersWeb StorageOffine Applications
5.4 New Form Element<datalist><keygen><output>
5.5 Form Element <datalist>Pre-defined values<datalist id="browsers"> <option value="Internet Explorer"> <option value="Fi...
5.6 Form Element <Keygen>A form with a keygen field<form action="demo_keygen.asp"method="get">Username: <input type="text"...
5.7 Form Element <output>Perform a calculation and show the resultin an <output> element<form oninput= "x.value=parseInt(a...
5.8 CSS3 PROPERTIESnot                     filter::lang                   opacity::first-child        media:first-of-type ...
Thank youCONTACT ME @MANDAKINI@AYUSHIINFOTECH.COMGTALK:PKUMAR125
Upcoming SlideShare
Loading in...5
×

Html5 drupal7 with mandakini kumari(1)

1,255

Published on

rupal Meet 2013 on 19th January

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,255
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 drupal7 with mandakini kumari(1)

  1. 1. MandakiniAyushi Infotech
  2. 2. In The Next 30 Minutes1.Whats new in HTML52.HTML5 with Drupal73.Why HTML5 and CSS34.Difference between HTML 4.0x, XHTML, HTML55.HTML5 Form
  3. 3. BASIC ASSUMPTIONS•Should know HTML & CSS markupBasic•Understating of Drupal & Theming•Familiar with modern browsers e.g.Firefox,Safari, Chrome & IE
  4. 4. HTML5 with Drupal Ref.HTML5 TOOLS:http://drupal.org/project/html5_toolsHTML5 Base Theme: http://drupal.org/project/boronhttp://drupal.org/project/adaptivethemeElements: http://drupal.org/project/elementsGeolocation:http://drupal.org/project/html5_user_geolocationIRC #drupal-html5(http://groups.drupal.org/html5)w3schools.com
  5. 5. 1.1 Whats new in HTML5• New Elements• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Local Storage• Local SQL Database• Web Applications
  6. 6. 2.1 Drupal 7 Theme with HTML5html.tpl.phppage.tpl.phpnode.tpl.phptemplate.phpstyle.cssHeader.incFooter.inc
  7. 7. 2.2 html.tpl.php(After – HTML5)<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
  8. 8. 2.3 Template.php(Before – XHTML)<link rel="stylesheet" href="" type="text/css" media="all" /><style type="text/css" media="all">/* Code here. */ </style><script type="text/javascript"><!--//--><![CDATA[//><!-- /* Code here. */ //--><!]]></script>
  9. 9. 2.4 Template.php(After – HTML5)<link rel="stylesheet" href="..." /><style> /* Code here. */ </style><script> /* Code here. */ </script>
  10. 10. 2.5 node.tpl.php(After – HTML5)<article id="node-title" class="node clearfix" ><header><h1 class="title"><a href="xxx">My First Node</a></h2</header><footer>Published on <time datetime=2011-01-22 pubdate>Jan22</time></footer><p>Blah blah blah</p><footer><div class="taxonomy"><ul><li><a>HTML5</a></li></ul></div></footer></article> <!-- /node-->
  11. 11. 3.1.Responsive web design:Fit in all mobile deviceCompatible for allbrowser e.g. Firefox,IE,safari and chrome
  12. 12. 3.2.SEMANTICSNew elements for headers,footers, menus, sectionsand articles. (source:http://www.w3.org/html/logo/)
  13. 13. 3.3 HTML5 Forms•New form elements, newattributes, new input types,automatic validation.
  14. 14. 3.4. HTML5 ApplicationsWith HTML5, web application development iseasier than ever.• Local data storage• Local file access• Local SQL database• Application cache• Javascript workers• XHTMLHttpRequest 2. (source:w3c.org)
  15. 15. 3.5. MultimediaWith HTML5, playing videoand audio is easier than ever. HTML5 <video> HTML5 <audio> (source:w3c.org)
  16. 16. 3.6. Graphics & EffectsWith HTML5, drawing graphics is easierthan ever: Using the <canvas> element Using inline SVG Using CSS3 2D/3D (source:w3c.org)
  17. 17. 3.7. Performance &IntegrationMake your Web Apps and dynamic webcontent faster with a variety oftechniques and technologies such asWeb Workers and XMLHttpRequest 2.No user should ever wait on your watch. (source:w3c.org)
  18. 18. 3.8. HTML5 Uses CSS3• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts (source:w3c.org)
  19. 19. 4.1 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>
  20. 20. 4.2 IE & HTML5<!--[if lt IE 9]><scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> (source:w3c.org)
  21. 21. 4.3 Old HTML Page Structure
  22. 22. 4.4 New HTML5 Page Structure
  23. 23. 4.5 OLD HTML DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style type="text/css" media="all"> </style><script type="text/javascript"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  24. 24. 4.6 New HTML5 DOCTYPE CODE SAMPLE<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="stylesheet" href="file.css" /> (source:w3c.org)
  25. 25. 4.7 HTML5 HEADER CODE<!-- begin: page header →<header><hgroup><h1>Header</h1><h2>Sub-Header</h2></hgroup><p>Some more header content</p></header><!-- end: page header -->
  26. 26. 4.8 HTML5 NAV CODE<header><!-- begin: primary nav --><nav><a href=”home.html”>Home</a><a href=”about.html”>About</a></nav><!-- end: primary nav →</header>
  27. 27. 4.9 NEW HTML5 ELEMENT<!-- begin: science section →<section id=”science”><header><hgroup> <h2>Science</h2> </hgroup></header><p>Space Matter And Time (SMAT)</p></section><!-- end: science section -->
  28. 28. 4.10 NEW HTML5 ELEMENT
  29. 29. 4.11 NEW HTML5 ELEMENT<!-- 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 -->
  30. 30. 4.12 NEW HTML5 ELEMENT <!-- 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 -->
  31. 31. 5.1 New Input Type color date datetime datetime-local email month number range search tel time url week
  32. 32. 4.2 HTML5 New Form AttributesNew attributes for <form>:Autocomplete NovalidateNew attributes for <input>:Autocomplete autofocusForm formactionFormenctype formmethodFormnovalidate formtargetheight and width listmin and max multiplepattern (regexp) placeholderRequired step
  33. 33. 5.3 HTML5 Other APIsGeolocationCommunication APIsWebsocketsWeb WorkersWeb StorageOffine Applications
  34. 34. 5.4 New Form Element<datalist><keygen><output>
  35. 35. 5.5 Form Element <datalist>Pre-defined values<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>
  36. 36. 5.6 Form Element <Keygen>A form with a keygen field<form action="demo_keygen.asp"method="get">Username: <input type="text"name="usr_name">Encryption:<keygen name="security"><input type="submit"></form>
  37. 37. 5.7 Form Element <output>Perform a calculation and show the resultin an <output> element<form oninput= "x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" name="a" value="50">100+<input type="number" name="b" value="50"> =<output name="x" for="a b"></output></form>
  38. 38. 5.8 CSS3 PROPERTIESnot 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-typetransform-orgin hsl & hsla transition
  39. 39. Thank youCONTACT ME @MANDAKINI@AYUSHIINFOTECH.COMGTALK:PKUMAR125
  1. A particular slide catching your eye?

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

×