Html5 drupal7 with mandakini kumari(1)

In The Next

30 Minutes
1.What's new in HTML5
2.HTML5 with Drupal7
3.Why HTML5 and CSS3
4.Difference between HTML 4.0x,
XHTML, HTML5
5.HTML5 Form

BASIC ASSUMPTIONS
•Should know HTML & CSS markup
Basic
•Understating of Drupal & Theming
•Familiar with modern browsers e.g.
Firefox,Safari, Chrome & IE

HTML5 with Drupal Ref.
HTML5 TOOLS:http://drupal.org/project/html5_tools

HTML5 Base Theme: http://drupal.org/project/boron
http://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.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-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[//><!]]>
</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>

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 Applications
With 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 & Effects
With 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


(source:w3c.org)

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="ﬁle.js"></script>
<link rel="stylesheet" href="ﬁle.css" />

(source:w3c.org)

4.7 HTML5 HEADER CODE

4.8 HTML5 NAV CODE
<header>

<nav>
<a href=”home.html”>Home</a>
<a href=”about.html”>About</a>
</nav>
<!-- end: primary nav →
</header>

4.9 NEW HTML5 ELEMENT

5.1 New Input Type
color date
datetime datetime-local
email
month number
range search
tel time
url week

4.2 HTML5 New Form Attributes
New attributes for <form>:
Autocomplete Novalidate

New attributes for <input>:
Autocomplete autofocus
Form formaction
Formenctype formmethod
Formnovalidate formtarget
height and width list
min and max multiple
pattern (regexp) placeholder
Required step

5.3 HTML5 Other APIs

Geolocation
Communication APIs
Websockets
Web Workers
Web Storage
Offine 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

Thank you

CONTACT ME @
MANDAKINI@AYUSHIINFOTECH.COM
GTALK:PKUMAR125

Html5 drupal7 with mandakini kumari(1)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Html5 drupal7 with mandakini kumari(1)

Similar a Html5 drupal7 with mandakini kumari(1) (20)

Más de Mandakini Kumari

Más de Mandakini Kumari (8)

Último

Último (20)

Html5 drupal7 with mandakini kumari(1)