html5 drupal7 with mandakini kumari(1)
DESCRIPTION
rupal Meet 2013 on 19th JanuaryTRANSCRIPT
MandakiniAyushi Infotech
In The Next
30 Minutes1.What's new in HTML52.HTML5 with Drupal73.Why HTML5 and CSS34.Difference between HTML 4.0x, XHTML, HTML5
5.HTML5 Form
•Should know HTML & CSS markup Basic•Understating of Drupal & Theming•Familiar with modern browsers e.g. Firefox,Safari, Chrome & IE
BASIC ASSUMPTIONS
HTML5 with Drupal Ref.HTML5 TOOLS:http://drupal.org/project/html5_tools
HTML5 Base Theme: http://drupal.org/project/boronhttp://drupal.org/project/adaptivetheme
Elements: http://drupal.org/project/elements
Geolocation: http://drupal.org/project/html5_user_geolocation
IRC #drupal-html5(http://groups.drupal.org/html5)w3schools.com
1.1 What's 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.phppage.tpl.php node.tpl.phptemplate.phpstyle.cssHeader.incFooter.inc
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>Jan 22</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 all browser e.g. Firefox,IE, safari and chrome
3.2.SEMANTICS
New elements for headers, footers, menus, sections and articles.
(source:http://www.w3.org/html/logo/)
3.3 HTML5 Forms
•New form elements, new attributes, new input types, automatic validation.
3.4. HTML5 ApplicationsWith HTML5, web application development is easier than ever.• Local data storage• Local file access• Local SQL database• Application cache• Javascript workers• XHTMLHttpRequest 2.
(source:w3c.org)
3.5. Multimedia
With HTML5, playing video and audio is easier than ever.
HTML5 <video> HTML5 <audio>
(source:w3c.org)
3.6. Graphics & EffectsWith HTML5, drawing graphics is easier than ever:
Using the <canvas> element Using inline SVG Using CSS3 2D/3D
(source:w3c.org)
3.7. Performance & Integration
Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
(source:w3c.org)
3.8. HTML5 Uses CSS3• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts
(source:w3c.org)
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]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
(source:w3c.org)
4.3 Old HTML Page Structure
4.4 New HTML5 Page Structure
4.5 OLD HTML DOCTYPE <!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"> <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" />
(source:w3c.org)
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="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 -->
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 Novalidate
New attributes for <input>:Autocomplete autofocusForm formactionFormenctype formmethodFormnovalidate formtargetheight and width listmin and max multiplepattern (regexp) placeholderRequired step
5.3 HTML5 Other APIs
GeolocationCommunication 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 result in 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 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
