-
Notifications
You must be signed in to change notification settings - Fork 994
Expand file tree
/
Copy pathbasics.html
More file actions
120 lines (116 loc) · 8.47 KB
/
basics.html
File metadata and controls
120 lines (116 loc) · 8.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sheetsee.js</title>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='description' content='sheetsee.js, google, spreadsheet, visualize, data, javascript'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" href="../favicon.png">
<script type='text/javascript' src='../assets/highlight.js'></script>
<link rel='stylesheet' href='../assets/highlight.css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='../assets/style.css'>
<link rel="shortcut icon" href=''/>
</head>
<body class="basics">
<div class="container">
<h1 id="spreadsheets-as-databases">Spreadsheets as Databases</h1>
<p>Spreadsheets are a great <em>lightweight</em> databases. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database setups. That being said, traditional databases are great for bigger, more secure jobs. If you're storing lots and lots and lots of information, or storing sensitive or complex information—the spreadsheet is not for you. But if you're working on small to medium sized personal or community projects, try a spreadsheet!</p>
<h2 id="the-short-sweet">The Short & Sweet</h2>
<ol>
<li>Link to Sheetsee.js and <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> in your HTML head.</li>
<li>Link to sheetsee's default stylesheet, <code>sss.css</code>.</li>
<li>Create a place holder <code><div></code>, with <code>id</code>, in your HTML the map or table you want.</li>
<li>Create templates for tables in <code><script></code> tags with an <code>id</code> matching the <code><div></code> plus <code>_template</code>.</li>
<li>Inside of another <code><script></code> tag initialize <a href="https://github.com/jsoma/tabletop">Tabletop.js</a>. Once it fetches your spreadsheet data, pass it onto Sheetsee.<pre><code class="lang-JS">document.addEventListener('DOMContentLoaded', function() {
var URL = 'YOURSPREADSHEETSKEYHERE'
Tabletop.init({key: URL, callback: callback, simpleSheet: true})
})
</code></pre>
</li>
<li>Define the function that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.<pre><code class="lang-JS">function callback (data) {
// All the Sheetsee things you want to do!
}
</code></pre>
</li>
<li>Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.</li>
</ol>
<h2 id="bare-minimum-setup">Bare Minimum Setup</h2>
<p>Ignoring some HTML things to conserve space, you get the point. This is a basic setup:</p>
<pre><code class="lang-HTML"><html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/tabletop.js"></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<link rel="stylesheet" type="text/css" href="css/sss.css">
</head>
<body>
<div id="placeholder"></div>
<script id="placeholder" type="text/html">
// template if you so desire!
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var URL = 'YOURSPREADSHEETSKEYHERE'
Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
})
function myData (data) {
// All the sheetsee things you want to do!
}
</script>
</body>
</html>
</code></pre>
<h2 id="your-data">Your Data</h2>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/spreadsheettodata.png" alt="sheetsee"></p>
<p>Your Google Spreadsheet should be set up with row one as your column headers. Row two and beyond should be your data. Each header and row becomes an object in the final array that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> delivers of your data.</p>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/nonos.png" alt="sheetsee"></p>
<p>There shouldn't be any breaks or horizontal organization in the spreadsheet. But, feel free to format the style of your spreadsheet as you wish; borders, fonts and colors and such do not transfer or affect your data exporting.</p>
<pre><code>[{"name":"Coco","breed":"Teacup Maltese","kind":"Dog","cuddlability":"5","lat":"37.74832","long":"-122.402158","picurl":"http://distilleryimage8.s3.amazonaws.com/98580826813011e2bbe622000a9f1270_7.jpg","hexcolor":"#ECECEC","rowNumber":1}...]
</code></pre><h3 id="hexcolor">Hexcolor</h3>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/hexcolors.png" alt="sheetsee"></p>
<p>You can add a column to your spreadsheet with the heading <em>hexcolor</em> (case insensitive) and add colors to be used in maps. The color scheme is up to you, all you need to do is fill the column with hexidecimal color values. This <a href="http://color.hailpixel.com/">color picker</a> by <a href="https://twitter.com/hailpixel">Devin Hunt</a> is really nice. #Funtip: Coloring the background of the cell it's hexcolor brings delight!</p>
<h3 id="geocoding">Geocoding</h3>
<p>If you intend to map your data and only have addresses you'll need to geocode the addresses into lat/long coordinates. Mapbox built a <a href="http://mapbox.com/tilemill/docs/guides/google-docs/#geocoding">plugin</a> that does this for you in Google Docs. You can also use websites like <a href="http://www.latlong.net">latlong.net</a> to get the coordinates and paste them into rows with column headers <em>lat</em> and <em>long</em>.</p>
<h3 id="publishing-your-spreadsheet">Publishing Your Spreadsheet</h3>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/publish.png" alt="sheetsee"></p>
<p>You need to do this in order to generate a unique key for your spreadsheet, which <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> will use to get your spreadsheet data. In your Google Spreadsheet, click <em>File</em> > <em>Publish to the Web</em>. Then in the next window click <em>Start Publishing</em>; it will then turn into a <em>Stop Publishing</em> button.</p>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/key.png" alt="sheetsee"></p>
<p>You should have an address in a box at the bottom, your key is the portion between the = and the &. You'll retrieve this later when you hook up your site to the spreadsheet. <em>Actually, you technically can use the whole URL, but it's so long...</em></p>
<h3 id="css">CSS</h3>
<p>Sheetsee.js comes with a bare minimum stylesheet, <code>sss.css</code>, which contains elements you'll want to style when using the feature they correspond to. Use it if you want, or as a starting off point to create your own styles.</p>
<footer>
<h4 id="getting-started">Getting Started</h4>
<ul>
<li><a href="./about.html">About Sheetsee</a></li>
<li><a href="./building.html">Building Sheetsee</a></li>
<li><a href="./basics.html">Basics</a></li>
</ul>
<h4 id="ideas">Ideas</h4>
<ul>
<li><a href="./fork-n-go.html">Fork-n-Go</a></li>
<li><a href="./tips.html">Tips!</a></li>
</ul>
<h4>Demos</h4>
<ul>
<li><a href="../demos/demo-table.html">Table Demo</a></li>
<li><a href="../demos/demo-map.html">Map Demo</a></li>
</ul>
<h4 id="use">Use</h4>
<ul>
<li><a href="./sheetsee-core.html">Sheetsee-core</a></li>
<li><a href="./sheetsee-tables.html">Sheetsee-tables</a></li>
<li><a href="./sheetsee-maps.html">Sheetsee-maps</a></li>
</ul>
<h4 id="use">Contact</h4>
<ul>
<li><a href="http://www.twitter.com/jllord">@jllord</a></li>
<li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
</ul>
<h4><a class="home-link" href="../index.html">Home</a></h4>
</footer>
</div>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>