2. 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
3. BASIC ASSUMPTIONS
•Should know HTML & CSS markup
Basic
•Understating of Drupal & Theming
•Familiar with modern browsers e.g.
Firefox,Safari, Chrome & IE
4. 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
5. 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
13. 3.3 HTML5 Forms
•New form elements, new
attributes, new input types,
automatic validation.
14. 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)
15. 3.5. Multimedia
With HTML5, playing video
and audio is easier than ever.
HTML5 <video>
HTML5 <audio> (source:w3c.org)
16. 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)
17. 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)
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. 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. 5.1 New Input Type
color date
datetime datetime-local
email
month number
range search
tel time
url week
32. 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
33. 5.3 HTML5 Other APIs
Geolocation
Communication APIs
Websockets
Web Workers
Web Storage
Offine Applications
34. 5.4 New Form Element
<datalist>
<keygen>
<output>
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. 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>