Basics of html5, data_storage, css3

1,217 views

Published on

Basic intro to HTML5, its feature data storage and CSS3

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,217
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Basics of html5, data_storage, css3

  1. 1. Basics of HTML5,  Data Storage &  CSS3   Sreejith M Akhilraj N S Jones V Rajan Anurag R S POD 5
  2. 2. Basics Of HTML5
  3. 3. Basics of HTML5
  4. 4. Syntax   <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>   <head>   <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;   charset=utf-8&quot;> HTML 5: <!doctype html> <html>       <head>       <meta charset=&quot;utf-8&quot;> Basics of HTML5
  5. 5. Basics of HTML5 Semantic Tags
  6. 6. Basics of HTML5 New form types
  7. 7. Basics of HTML5 Markup for applications
  8. 8. Basics of HTML5 Native Drag & Drop
  9. 9. Basics of HTML5 Geolocation
  10. 10. Basics of HTML5 Audio & Video
  11. 11. Basics of HTML5 Canvas example
  12. 12. Basics of HTML5 Inline SVG
  13. 13. Client-side Data Storage
  14. 14. <ul><li>1. Web Storage </li></ul><ul><li>    Supported in all latest browsers </li></ul><ul><ul><li>sessionStorage </li></ul></ul><ul><ul><li>localStorage </li></ul></ul><ul><li>2. Web SQL Databases </li></ul><ul><li>    opera, chrome & safari </li></ul><ul><ul><li>client-side databases  </li></ul></ul>Client-side Data Storage
  15. 15. Javascript API common for localStorage and sessionStorage interface Storage {   readonly attribute unsigned long length;   getter DOMString key(in unsigned long index);   getter any getItem(in DOMString key);   setter creator void setItem(in DOMString key, in any value);   deleter void removeItem(in DOMString key);   void clear(); }; Client-side Data Storage Web Storage Note: For firefox web storage causes security warning and break out your js, if cookies aren't enabled
  16. 16. <ul><ul><li>temporary key/value pairs </li></ul></ul><ul><ul><li>one session per tab/window </li></ul></ul><ul><ul><li>replace cookies for session tracking </li></ul></ul><ul><ul><li>extensive Javascript methods & events </li></ul></ul>Client-side Data Storage sessionStorage
  17. 17. <ul><ul><li>sessionStorage.setItem('key','value'); </li></ul></ul><ul><ul><li>sessionStorage.getItem('key'); </li></ul></ul><ul><ul><li>sessionStorage.length; </li></ul></ul><ul><ul><li>sessionStorage.removeItem('key') </li></ul></ul>Client-side Data Storage sessionStorage - Methods
  18. 18. var videoDetails = {                            author: ‘bruce’,                            description: ‘how to leverage synergies’,                            rating: ‘-2’                              }; sessionStorage.setItem(‘videoDetails’, JSON.stringify(videoDetails) ); Client-side Data Storage sessionStorage - e.g. Storing Video information 
  19. 19. // later on, as in page reloads later, we can extract the stored data var videoDetails = JSON.parse(sessionStorage.getItem(‘videoDetails’)); Client-side Data Storage sessionStorage
  20. 20. <ul><ul><li>like sessionStorage, but </li></ul></ul><ul><ul><li>persistent </li></ul></ul><ul><ul><li>global </li></ul></ul>Client-side Data Storage localStorage
  21. 21. <ul><ul><li>same as sessionStorage </li></ul></ul><ul><li>e.g. localStorage.getItem('key'); </li></ul><ul><li>        localStorage.clear(); </li></ul>Client-side Data Storage localStorage - methods
  22. 22. <ul><ul><li>SQLite - lots of structured, relational data </li></ul></ul><ul><ul><li>asynchronous </li></ul></ul><ul><ul><li>callback based </li></ul></ul><ul><ul><li>fast </li></ul></ul>Client-side Data Storage client-side databases
  23. 23. Client-side Data Storage client-side databases Open / Create database Create table Insert
  24. 24. Client-side Data Storage client-side databases - Select
  25. 25. <ul><li>Code inspectors </li></ul><ul><ul><li>firebug (firefox) </li></ul></ul><ul><ul><li>dragonfly (opera) </li></ul></ul><ul><ul><li>webkit's (for safari and chrome) </li></ul></ul>Client-side Data Storage Inspecting Client-side Data Storage Value
  26. 26. Client-side Data Storage Inspecting Client-side Data Storage Value
  27. 27. Basics Of CSS3
  28. 28.   CSS level 1  CSS level 2  CSS level 2.1  CSS level 3 CSS, An Introduction
  29. 29. Whats new in CSS Level 3? <ul><ul><li>  Rounded Corners </li></ul></ul><ul><ul><li>  Box-Shadow </li></ul></ul><ul><ul><li>  Background Decoration </li></ul></ul><ul><ul><li>  Text Effects </li></ul></ul><ul><ul><li>  2D Transforms </li></ul></ul><ul><ul><li>  3D Transforms </li></ul></ul><ul><ul><li>  Transitions </li></ul></ul><ul><ul><li>  Animations </li></ul></ul>
  30. 30. CSS 3 CODE div { border-radius:25px; -moz-border-radius:25px; /* Firefox */ -webkit-border-radius:25px; /*  Safari and Chrome */ -o-border-radius:25px; /* Opera */ }
  31. 31. CSS 3 v/s CSS 2
  32. 32. Example 1 Design Demo
  33. 33. CSS 3 h1 {     text-shadow: -3px 2px 0px #514d46; } #nav {     -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);     -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);     box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);     background-image: -moz-linear-gradient(top, #5c5850, #48473e);     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5c5850),color-stop(1, #48473e));     background-image: -webkit-linear-gradient(#5c5850, #48473e);     background-image: linear-gradient(top, #5c5850, #48473e); } nav a {     -moz-border-radius: 12px;     -webkit-border-radius: 12px;     border-radius: 12px; } nav a:hover {     background-color: #3a3e38;     background-color: rgba(47, 54, 48, .7); } nav a.active {     background-color: #070807;     background-color: rgba(7, 8, 7, .7); } body {     background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0));     background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); }
  34. 34. CSS 3 #learn_more, #details img {     -moz-border-radius: 8px;     -webkit-border-radius: 8px;     border-radius: 8px;     -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2);     -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);     box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); } #learn_more a {     -moz-border-radius: 8px;     -webkit-border-radius: 8px;     border-radius: 8px;     background-color: #cc3b23;     background-image: -moz-linear-gradient(top, #cc3b23, #c00b00);     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #cc3b23),color-stop(1, #c00b00));     background-image: -webkit-linear-gradient(#cc3b23, #c00b00);     background-image: linear-gradient(top, #cc3b23, #c00b00); } a {     -moz-transition: all 0.3s ease-in;     -o-transition: all 0.3s ease-in;     -webkit-transition: all 0.3s ease-in;     transition: all 0.3s ease-in; } /*-----CSS3 Finished Total Time Taken (49 minutes) -----*/
  35. 35. CSS 2 #header {     background: url(../img/navbg.png) left top repeat-x; } body {     background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; } #nav {     background-color: transparent; } h1 {     background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent: -9999px; } #learn_more {     background-image: url(../img/learn_morebg.jpg);} #details img {     background-image: url(../img/detailsbg.jpg);} #learn_more a {     background: url(../img/learn_more_abg.jpg) no-repeat;} .css3 {     background: url(../img/css3_hover.png) no-repeat center top; }
  36. 36. CSS 2 .backend {     background: url(../img/smashing_hover.png) no-repeat center top; } .trent {     background: url(../img/trentwalton_hover.png) no-repeat center top;} .css3:hover {     background: url(../img/css3_hover.png) no-repeat center -20px;} .css:hover {     background: url(../img/css_hover.png) no-repeat center -20px;} .smashing:hover {     background: url(../img/smashing_hover.png) no-repeat center -20px;} .trent:hover {     background: url(../img/trentwalton_hover.png) no-repeat center -20px; } .css {     background: url(../img/css_hover.png) no-repeat center -50px; } /*-----CSS (the image-based approach) Total time taken (1 hour and 13 minutes)-----*/
  37. 37. Comparison
  38. 38. Thank You POD 5

×