Notes on SF W3Conf
Upcoming SlideShare
Loading in...5
×
 

Notes on SF W3Conf

on

  • 482 views

By Edy Dawson

By Edy Dawson

Feb. 21-22, 2013
San Francisco

Statistics

Views

Total Views
482
Views on SlideShare
387
Embed Views
95

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 95

http://edydawsonwebdev.wordpress.com 94
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Notes on SF W3Conf Notes on SF W3Conf Presentation Transcript

    • San FranciscoFebruary 21-22, 2013
    • About the W3Conference• Website: http://www.w3.org/conf/2013sf/• Twitter: https://twitter.com/w3cconf• Twitter: https://twitter.com/search/realtime?q=%23w3conf• Lanyard: http://lanyrd.com/2013/w3conf/• Video: http://www.w3.org/conf/2013sf/video.html
    • Concentrations• Client-side storage options• Security• Ebooks• HTML5 capabilities• CSS advances• Mobile• Accessibility• Open source collaboration• JavaScript (EcmaScript) advances
    • Client-side Storage Options• Cookies• Web Storage• Web SQL (being discontinued in favor of IndexedDB)• IndexedDB• File APIs• Frameworks (such as Backbone.js)
    • Why Use Client-side Storage?• Mobile applications• Disconnected applications (To Do Lists, Image Processors)• Partially disconnected applications (Mail Clients, Calendar, Field Devices)• Faster web sites with offline storage (Offline Catalogs, User Preferences)• Reduce network traffic• Significantly speed up display times• Save temporary state• Richer UI experience with user-updated data• Prevent work loss from network disconnects
    • caniuse.com – Web Storage
    • caniuse.com - IndexedDB
    • Cookies• Included in every http request• Data is sent unencrypted over the internet• Restricted to 4KB storage on client-side• Stores only strings• Used for: - shopping carts - user login - personalization - ad tracking - analytics
    • Web Storage• W3C Web Storage Recommendation Defines an API for persistent data storage of key-value pair data in Web Clients• localStorage and sessionStorage• Data is stored as string, or objects using JSON.stringify, have to convert other types such as ints, floats, objects, and booleans• Limited to approx. 2.5 - 5MB per application• Can hook into browser events, such as offline, online, storage change• Can be disabled by the user or system administrator• Don’t store sensitive data, as like cookies, vulnerable to cross site scripting attacks• Example: localStorage.setItem(‘favoriteFish’, ‘herring’); $(‘#demo’).html(‘My fav fish is: ‘ + localStorage.getItem(‘favoriteFish’));
    • HTML5 sessionStorage• User carrying out single transaction, but could have multiple transactions in different windows at the same time. Cookies don’t handle this case well. Session ends when browser closed• Each page has own copy of the session storage object• Example: Two page interaction Page 1: <label> <input type=“checkbox” onchange=“sessionStorage.insurance=checked ? ‘true’ : ‘’ “> I want insurance this trip. </label> Page 2: if (sessionStorage.insurance) { your code here }
    • HTML5 localStorage• Spans multiple windows, and lasts beyond current session• Is not transmitted with every request like cookies• Example: Storing user data <p> You have viewed this page <span id=“count”> number of </span> time(s). </p> <script> if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById(‘count’).textContent = localStorage.pageLoadCount; </script>
    • IndexedDB• Indexed Data API W3C Working Draft: In-browser database with key-value pairs and basic indexing• Available in Synchronous API & Asynchronous API• Stores most JS Objects• Temporary: up to 20% of available space per app• Permanent: can request up to 100% of available space• Example: function createDB() { var openRequest = webkitIndexedDB.open(‘Favorites’, ‘2’); openRequest.onerror = errorHandler; openRequest.onsuccess = function(e) { db = openRequest.result; createStore(db); } }
    • File APIs• Stores text and binary• FileReader API and FileWriter API• Example: function fetchImage() { var xhr = new XMLHttpRequest(); xhr.open(‘GET’, ‘/img/childhood.png’, true); xhr.responseType = ‘arraybuffer’; xhr.onload = function(e) { saveImage(xhr.response); }; xhr.send(); }
    • Fall-back StrategyFor browsers that don’t supportWeb Storage or IndexedDB:• Cookies• Backbone.js• PersistJS• Amplify.js• Store.js• And many more…
    • Chrome Web StorageParashuram Narasimhan Demos
    • Chrome Web Storage
    • Chrome Web StorageChrome Preferences > Show Advanced Settings >Privacy: Content settings… > All cookies and site data…
    • Parashuram Narasimhan Demos
    • Parashuram Narasimhan Demos
    • Security of IndexedDB• Mozilla info: IndexedDB uses the same-origin principle, which ties the store to the origin that creates it (typically, it is the site domain or subdomain), so it can’t be accessed by any other origin• Doesn’t work for content loaded from another site (either <frame> or <iframe>)• Not recommended for sensitive data• More on security in another meeting…
    • Presenters• •• •• •• •• •• •• •• •• •
    • Helpful Sites• Canisue.com: browser and device support for features• Html5rocks.com: Google project about HTML5• HTML5 & CSS3 Readiness: Browser support tool• HTML Living Standard: Web Storage specifics• My Web Store: Example of IndexedDB by Parashuram• Using IndexedDB: Mozilla Developer Network How-To• Client-side Storage: Interesting comparison• WebPlatform.org: W3C standards and resources
    • Further Research• There was so much information, and so many great resources to investigate.• Thank you!