Html5 drupal7 with mandakini kumari(1)
Upcoming SlideShare
Loading in...5

Html5 drupal7 with mandakini kumari(1)



rupal Meet 2013 on 19th January

rupal Meet 2013 on 19th January



Total Views
Views on SlideShare
Embed Views



1 Embed 1 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Html5 drupal7 with mandakini kumari(1) Html5 drupal7 with mandakini kumari(1) Presentation Transcript

    • MandakiniAyushi Infotech
    • 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
    • BASIC ASSUMPTIONS•Should know HTML & CSS markupBasic•Understating of Drupal & Theming•Familiar with modern browsers e.g.Firefox,Safari, Chrome & IE
    • HTML5 with Drupal Ref.HTML5 TOOLS: Base Theme: #drupal-html5(
    • 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
    • 2.1 Drupal 7 Theme with HTML5html.tpl.phppage.tpl.phpnode.tpl.phptemplate.phpstyle.css
    • 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" />
    • 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>
    • 2.4 Template.php(After – HTML5)<link rel="stylesheet" href="..." /><style> /* Code here. */ </style><script> /* Code here. */ </script>
    • 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-->
    • 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:
    • 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 access• Local SQL database• Application cache• Javascript workers• XHTMLHttpRequest 2. (
    • 3.5. MultimediaWith HTML5, playing videoand audio is easier than ever. HTML5 <video> HTML5 <audio> (
    • 3.6. Graphics & EffectsWith HTML5, drawing graphics is easierthan ever: Using the <canvas> element Using inline SVG Using CSS3 2D/3D (
    • 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. (
    • 3.8. HTML5 Uses CSS3• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts (
    • 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>
    • 4.2 IE & HTML5<!--[if lt IE 9]><scriptsrc=""></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"""><html xmlns=""><style type="text/css" media="all"> </style><script type="text/javascript"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    • 4.6 New HTML5 DOCTYPE CODE SAMPLE<!DOCTYPE html><meta charset="utf-8" /><script src="file.js"></script><link rel="stylesheet" href="file.css" /> (
    • 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 -->
    • 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>
    • 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 -->
    • 4.10 NEW HTML5 ELEMENT
    • 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 -->
    • 4.12 NEW HTML5 ELEMENT <!-- begin: video →<video id="vid1"poster="><source type="video/webm"src="" /><sourcesrc=""/><source src="" /></video><!-- end: video -->
    • 5.1 New Input Type color date datetime datetime-local email month number range search tel time url week
    • 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
    • 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="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>
    • 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>
    • 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>
    • 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