Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding articles and Examples #2

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Adding articles and Examples #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8a306f4
Initial WebStorage Article
Feb 25, 2012
d57935d
1. added DBstorage example
benjah1 Feb 25, 2012
5094116
Merge pull request #2 from benjah1/examples
Feb 25, 2012
c5038dd
Adding some structure to the repo
Feb 25, 2012
094dbb4
Initial, HTML5 Local Storage using javascript classes.
Feb 25, 2012
ef9cb1d
add local storage canvas example
YangyangXu Feb 25, 2012
74800f2
Merge branch 'examples' of github.com:jeffheifetz/html5TO-website int…
siulm Feb 25, 2012
784f3c2
moved localstorage example
siulm Feb 25, 2012
51437b8
Merge branch 'examples' of github.com:jeffheifetz/html5TO-website int…
YangyangXu Feb 25, 2012
5db79f7
Added a canvas example
Feb 25, 2012
ee65d6b
initial commit
Feb 25, 2012
4b5a4a2
update DB local storage
benjah1 Feb 25, 2012
29cbf81
update DB local storage
benjah1 Feb 25, 2012
7b7e38c
Fixed bug
benjah1 Feb 26, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions articles/webstorage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<section>
<article>
<header>
<h1> Web Storage </h1>
</header>
Web Storage is SUPER AWESOME
<h2> Things you should know </h2>
<h3> How to detect WebStorage </h3>
<p> Here is some example code to detect if you have LocalStorage support </p>
<code><pre>
function checkLocalStoreageSupport () {
if (localStorage) {
return "Local Storage: Supported";
} else {
return "Local Storage: Unsupported";
}
}
</pre></code>

<h3> Setting and getting values from WebStorage </h3>
<p> Here is some example code to set and get values from Local Storage. Values can be any string INCLUDING JSON!!! </p>
<code><pre>
//Set the value of a key
localStorage.lastname="Smith";
localStorage["lastname"] ="Smith";
localStorage.setItem("lastname", "Smith");

//Get the value of a key
var lastname = localStorage.lastname;
var lastname = localStorage["lastname"]
var lastname = localStorage.getItem("lastname")

//Storing an object
localStorage.setItem('user', JSON.stringify({user: 'john', id: 10}));
var user = JSON.parse(localStorage.getItem('user'));
</pre></code>

<h3> WebStorage vs other offline storage </h3>
<p> WebStorage is a simple key value store in the browser which is supported across all new browsers. For a more powerful database, Web SQL is used which is an implementation of sqlite right in the browser, however cannot be used with Firefox and Internet explorer. Chrome, Firefox and Internet Explorer also support IndexedDB, another local storage database. </p>

<h3> Using LocalStorage with older browser or multiplatform</h3>
<p> One approach is to use a polyfill library to backport the localStorage interface. One example would be <a href="https://github.com/marcuswestin/store.js"> Store.js </a> </p>
<p> Another approach would be to use a multiplatform library that has a new interface on top of multiple sotrage platforms. Some examples could be: </p>
<ul>
<li> <a href="http://westcoastlogic.com/lawnchair/">Lawnchair</a> </li>
<li> <a href="http://persistencejs.org/">Persistence.js</a> </li>
<li> <a href="http://documentcloud.github.com/backbone/">BackBone</a> </li>
</ul>
</article>

<h3> Resources </h3>
<ul>
<li> http://www.html5rocks.com/en/features/storage </li>
<li> http://www.w3schools.com/html5/html5_webstorage.asp </li>
<li> http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx </li>
<li> https://bdsc.webapps.blackberry.com/html5/apis/localStorage.html </li>
</ul>

<h3> Examples </h3>
<ul>
<li> http://blog.darkcrimson.com/2010/05/local-databases/ </li>
<li> http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/ </li>
<li> http:// checkout the DB storage</li>
</ul>


<footer>
Written by the awesomest team at the hackathon - John Xu, Ben Huang, Luis Mediana, Ibrahim Muhammad, Terry Lin, Rick Seeenarine, Jeffrey Heifetz
</footer>

</section>

40 changes: 40 additions & 0 deletions examples/CanvasExample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,75,75);
for(i=0;i<1000;i++) {
addBox();
}
}

function addBox()
{
var height=Math.floor(Math.random()*100);
var width=Math.floor(Math.random()*100);
var left=Math.floor(Math.random()*(600-width));
var top=Math.floor(Math.random()*(600-height));

var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle=get_random_color();
ctx.fillRect(left,top,width,height);
}

function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
</script>
</head>
<body>
<canvas id="myCanvas" height="600" width="600"></canvas>
</body>
</html>
147 changes: 147 additions & 0 deletions examples/DBstorage/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
$(function($){
var TestDB;
var currentID=0;
initDatabase();

updateRestore();

// Button and link actions
$('#btnSave').click(function(){ saveCurrent(); return false;});
$('#btnDel').click(function(){ delCurrent(); return false;});
$('#btnRun').click(function(){ runCode(currentID); return false;});
$('#restore').change(function(){restoreTo($(this).find('option:selected').val()); });


function runCode(id){
//$('#canvasFrame').attr('src', function ( i, val ) { return 'iframe.html?id='+currentID; });
window.open('iframe.html?id='+currentID, "Run","status=0,toolbar=0,width=600px,height=600px");
}

function initDatabase() {
try {
if (!window.openDatabase) {
alert('Local Databases are not supported by your browser. Please use a Webkit browser for this demo');
} else {
var shortName = 'TestDB';
var version = '1.0';
var displayName = 'TestDB';
var maxSize = 100000; // in bytes
TestDB = openDatabase(shortName, version, displayName, maxSize);
createTables();
updateRestore();
}
} catch(e) {
if (e == 2) {
// Version mismatch.
console.log("Invalid database version.");
} else {
console.log("Unknown error "+ e +".");
}
return;
}
}

function updateRestore(){
TestDB.transaction(
function (transaction) {
transaction.executeSql("SELECT id FROM codeFarm;", [], function(transaction, results){
$('#restore option').remove();
$('#restore').append('<option value="0">New</option>');
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
id = row.id;
if(id==currentID){
$('#restore').append('<option value="'+id+'" selected>'+id+'</option>');
}else{
$('#restore').append('<option value="'+id+'">'+id+'</option>');
}
}
});
}
);
}

function restoreTo(id){
if(id==0){
$('#editor').val('');
currentID=0;
console.log('restore to 0');
}else{
TestDB.transaction(
function (transaction) {
transaction.executeSql("SELECT code FROM codeFarm where id = ?;", [id], function(transaction, results){
var row = results.rows.item(0);
var code = row.code;
$('#editor').val(code);
currentID=id;
console.log('restore to '+id+' with '+code);
});
}
);
}
}

function createTables(){
TestDB.transaction(
function (transaction) {
transaction.executeSql(
'CREATE TABLE IF NOT EXISTS codeFarm('+
'id INTEGER NOT NULL PRIMARY KEY, '+
'code TEXT NOT NULL'+
');', [], function(){
console.log("done.");
}, function(){
console.log("query count errot.");
});
}
);
}

function saveCurrent(){
TestDB.transaction(
function (transaction) {
var code = $('#editor').val();

console.log('about to save to:'+currentID+' with '+code);
if(currentID==0){
var newid=0;
transaction.executeSql("SELECT id FROM codeFarm;", [], function(transaction, results){
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
console.log(row.id);
if(parseInt(row.id)>=newid){
newid = parseInt(row.id);
}
}
newid = newid+1;

transaction.executeSql("INSERT INTO codeFarm(id, code) VALUES (?, ?)", [newid,code]);
currentID = newid;
updateRestore();
}, function(){
transaction.executeSql("INSERT INTO codeFarm(id, code) VALUES (?, ?)", [newid,code]);
currentID = newid;
updateRestore();
});

}else{
console.log('update:'+currentID+' with '+code);
transaction.executeSql("UPDATE codeFarm SET code = ? WHERE id = ?", [code, currentID]);
}
}
);
}
function delCurrent(){
TestDB.transaction(
function (transaction) {
if(currentID!=0){
transaction.executeSql("Delete from codeFarm where id = ?", [currentID]);
currentID=0;
$('#editor').val('');
updateRestore();
}else{
$('#editor').val('');
}
});
}
});
51 changes: 51 additions & 0 deletions examples/DBstorage/iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function($){
var id = getParameterByName('id');
console.log(id);
if(id == null || id ==0) return;

var shortName = 'TestDB';
var version = '1.0';
var displayName = 'TestDB';
var maxSize = 100000;
TestDB = openDatabase(shortName, version, displayName, maxSize);
restoreTo(id);

// console.log(theCode);
var s = 'script';

function restoreTo(id){
//console.log(theCode);
TestDB.transaction(function (transaction) {
transaction.executeSql("SELECT code FROM codeFarm where id = ?;", [id], function(transaction, results){
var row = results.rows.item(0);
theCode = row.code;
$('body').append('<'+s+'>(function(){'+ theCode+'})();</'+s+'>');
});
});
}


function getParameterByName( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ){
return "";
}else{
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
}
});
</script>
</head>

<body>
<canvas id="myCanvas" height="600" width="600"></canvas>
</body>
</html>
Loading