Html5 drupal7 with mandakini kumari(1)

1. Mandakini Ayushi Infotech

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

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. 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. 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>

9. 2.4 Template.php(After – HTML5) <link rel="stylesheet" href="..." /> <style> /* Code here. */ </style> <script> /* Code here. */ </script>

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>Jan 22</time> </footer> <p>Blah blah blah</p> <footer> <div class="taxonomy"><ul><li><a>HTML5</a></li></ul></div> </footer> </article>

11. 3.1.Responsive web design: Fit in all mobile device Compatible for all browser e.g. Firefox,IE, safari and chrome

12. 3.2.SEMANTICS New elements for headers, footers, menus, sections and articles. (source:http://www.w3.org/html/logo/)

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)

18. 3.8. HTML5 Uses CSS3 • New Selectors • New Properties • Animations • 2D/3D Transformations • Rounded Corners • Shadow Effects • Downloadable Fonts (source:w3c.org)

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. 4.2 IE & HTML5  (source:w3c.org)

21. 4.3 Old HTML Page Structure

22. 4.4 New HTML5 Page Structure

23. 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">

24. 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)

25. 4.7 HTML5 HEADER CODE

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

27. 4.9 NEW HTML5 ELEMENT

28. 4.10 NEW HTML5 ELEMENT

29. 4.11 NEW HTML5 ELEMENT

30. 4.12 NEW HTML5 ELEMENT

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>

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. 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>

38. 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

39. Thank you CONTACT ME @ MANDAKINI@AYUSHIINFOTECH.COM GTALK:PKUMAR125

Html5 drupal7 with mandakini kumari(1)

Html5 drupal7 with mandakini kumari(1)

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(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)