Your SlideShare is downloading. ×
0
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Basics of html5, data_storage, css3

915

Published on

Basic intro to HTML5, its feature data storage and CSS3

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
915
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Basics of HTML5,  Data Storage &  CSS3   Sreejith M Akhilraj N S Jones V Rajan Anurag R S POD 5
  • 2. Basics Of HTML5
  • 3. Basics of HTML5
  • 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. Basics of HTML5 Semantic Tags
  • 6. Basics of HTML5 New form types
  • 7. Basics of HTML5 Markup for applications
  • 8. Basics of HTML5 Native Drag & Drop
  • 9. Basics of HTML5 Geolocation
  • 10. Basics of HTML5 Audio & Video
  • 11. Basics of HTML5 Canvas example
  • 12. Basics of HTML5 Inline SVG
  • 13. Client-side Data Storage
  • 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. 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. <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. <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. 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. // 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. <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. <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. <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. Client-side Data Storage client-side databases Open / Create database Create table Insert
  • 24. Client-side Data Storage client-side databases - Select
  • 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. Client-side Data Storage Inspecting Client-side Data Storage Value
  • 27. Basics Of CSS3
  • 28.   CSS level 1  CSS level 2  CSS level 2.1  CSS level 3 CSS, An Introduction
  • 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. 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. CSS 3 v/s CSS 2
  • 32. Example 1 Design Demo
  • 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. 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. 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. 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. Comparison
  • 38. Thank You POD 5

×