2011-05-03 23:40:50 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
Google I/O 2011 HTML slides template
|
|
|
|
|
|
|
|
|
|
Authors: Luke Mahé (code)
|
|
|
|
|
Marcin Wichary (code and design)
|
|
|
|
|
Dominic Mazzoni (browser compatibility)
|
|
|
|
|
Charles Chen (ChromeVox support)
|
|
|
|
|
|
|
|
|
|
URL: http://code.google.com/p/io-2011-slides/
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Camlistore</title>
|
|
|
|
|
|
|
|
|
|
<meta charset='utf-8' />
|
|
|
|
|
<script src='slides.js'></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
/* Your individual styles here, or just use inline styles if that’s
|
|
|
|
|
what you want. */
|
2011-05-04 23:11:51 +00:00
|
|
|
|
.smaller {
|
|
|
|
|
font-size: 80%;
|
|
|
|
|
}
|
2011-05-03 23:40:50 +00:00
|
|
|
|
|
2011-05-04 23:11:51 +00:00
|
|
|
|
ul li ul {
|
|
|
|
|
margin-top: 1.5em;
|
|
|
|
|
margin-bottom: 1em;
|
|
|
|
|
}
|
|
|
|
|
ul li ul li {
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
font-size: 80%;
|
|
|
|
|
}
|
|
|
|
|
ul li ul.dense li {
|
|
|
|
|
margin-top: 0em;
|
|
|
|
|
margin-bottom: 0em;
|
|
|
|
|
font-size: 80%;
|
|
|
|
|
}
|
|
|
|
|
h1.center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
2011-05-03 23:40:50 +00:00
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<body style='display: none'>
|
|
|
|
|
|
|
|
|
|
<section class='slides layout-regular'>
|
|
|
|
|
|
|
|
|
|
<!-- Your slides (<article>s) go here. Delete or comment out the
|
|
|
|
|
slides below. -->
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h1>
|
|
|
|
|
Camlistore
|
|
|
|
|
</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Brad Fitzpatrick
|
|
|
|
|
<br>
|
|
|
|
|
2011-05-07
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Who am I?
|
|
|
|
|
</h3>
|
|
|
|
|
<ul class='nobuild'>
|
|
|
|
|
<li>
|
|
|
|
|
Brad Fitzpatrick <brad@danga.com>
|
|
|
|
|
</li>
|
|
|
|
|
<li>Perl Hacker since 1994</li>
|
|
|
|
|
<li>Projects:
|
|
|
|
|
<table><tr valign='top'>
|
|
|
|
|
<th>Danga / 6A (Perl)</th>
|
|
|
|
|
<th>Google</th>
|
|
|
|
|
</tr>
|
|
|
|
|
<td class='nobuild'>
|
|
|
|
|
<div>LiveJournal</div>
|
|
|
|
|
<div>memcached</div>
|
|
|
|
|
<div>Perlbal</div>
|
|
|
|
|
<div>MogileFS</div>
|
|
|
|
|
<div class='blue'>OpenID</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td class='nobuild'>
|
|
|
|
|
<div><nobr>Social Graph API (<span class='blue'>XFN / FOAF</a>)</nobr></div>
|
|
|
|
|
<div class='blue'>WebFinger</div>
|
|
|
|
|
<div class='blue'>PubSubHubbub</div>
|
|
|
|
|
<div>Android</div>
|
|
|
|
|
<div>Go</div>
|
|
|
|
|
</td>
|
|
|
|
|
</table>
|
|
|
|
|
<div style='font-size: 70%; margin-top: 1em'>* <span class='blue'>decentralized social</span></div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
But why am I in Brazil?
|
|
|
|
|
</h3>
|
|
|
|
|
<ul class='nobuild'>
|
|
|
|
|
<li>
|
|
|
|
|
<i>"Hey, want to come speak at a Perl conference in Brazil?"</i>
|
|
|
|
|
</li>
|
|
|
|
|
<li>"Yes, totally, but... I don't write much Perl these days. :-("</li> <!-- " -->
|
|
|
|
|
<li style="margin-top: 2em"><i>"You could speak on memcached."</i></li>
|
|
|
|
|
<li>"But that's an old topic, no?"</li>
|
|
|
|
|
<li style="margin-top: 2em"><i>"You have any new project you're excited about?"</i></li>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h1 align='center'>
|
|
|
|
|
Camlistore!
|
|
|
|
|
</h1>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Camlistore
|
|
|
|
|
</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>New open source project</li>
|
|
|
|
|
<li>Almost a year old</li>
|
|
|
|
|
<li>Still in development</li>
|
|
|
|
|
<li>Starting to be useful :-)</li>
|
|
|
|
|
<li>Hard to easily describe...</li>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<q>
|
|
|
|
|
Camlistore is a way to store, sync, share, model and back up content
|
|
|
|
|
</q>
|
|
|
|
|
<div class='author'>
|
|
|
|
|
camlistore.org
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Motivation
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>I've written too many Content Management Systems
|
|
|
|
|
<ul>
|
|
|
|
|
<li>blogs, comments, photos, emails, backups, scanned paperwork, ...</li>
|
|
|
|
|
<li>is a scanned photo a scan, a photo, or a blog post? who cares.</li>
|
|
|
|
|
<li>write <b>one CMS to rule them all</b></li>
|
|
|
|
|
<li>... or at least a good framework for higher-level CMSes</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Motivation (cont)
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>I still want to solve the Decentralized Social Network Problem
|
|
|
|
|
<ul>
|
|
|
|
|
<li>protocols, not companies</li>
|
|
|
|
|
<li>gmail, hotmail: hosted versions of SMTP, IMAP</li>
|
|
|
|
|
<li>... but I can run my own SMTP/IMAP server if I want.</li>
|
|
|
|
|
<li>... or change my SMTP/IMAP provider</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Motivation (cont)
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>I wanted something conceptually simple.</li>
|
|
|
|
|
<li>HTTP interfaces, not language-specific</li>
|
|
|
|
|
<li>I use lots of machines; don't want to think about sync or conflicts.</li>
|
|
|
|
|
<li>Data archaeology: should be easy and obvious to
|
|
|
|
|
reconstruct in 20 or 100 years</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
2011-05-04 23:43:50 +00:00
|
|
|
|
The Product
|
2011-05-04 23:11:51 +00:00
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>one private dumping ground to store anything</li>
|
2011-05-04 23:43:50 +00:00
|
|
|
|
<li><i><b>your</b></i> private repo, for life</li>
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<li>backups, filesystems, objects, my website, ...</li>
|
|
|
|
|
<li>live backup my phone</li>
|
|
|
|
|
<li>live replicate / sync my dumping group between my house & laptop & Amazon & Google</li>
|
|
|
|
|
<li>give out access to / sub-trees to friends or the world</li>
|
|
|
|
|
<li>web UI (ala gmail, docs.google.com, etc) or FUSE filesystem</li>
|
2011-05-04 23:43:50 +00:00
|
|
|
|
<li>Easy for end-users; powerful for dorks</li>
|
2011-05-04 23:11:51 +00:00
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h1 class='center'>
|
|
|
|
|
So what's with the silly name?
|
|
|
|
|
</h1>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Camlistore
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Content-</li>
|
|
|
|
|
<li>Addressable</li>
|
|
|
|
|
<li>Multi-</li>
|
|
|
|
|
<li>Layer-</li>
|
|
|
|
|
<li>Indexed</li>
|
|
|
|
|
<li>Storage</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
2011-05-03 23:40:50 +00:00
|
|
|
|
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Content-Addressable
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>At the core, everything is stored & addressed by its digest (e.g. SHA1, MD5, etc)</li>
|
|
|
|
|
<li>e.g. <tt class='smaller'>"sha1-0beec7b5ea3f0fdbc95d0dd47f3c5bc275da8a33"</tt> for the blob <tt class='smaller'>"foo"</tt></li>
|
|
|
|
|
<li>Great properties:
|
|
|
|
|
<ul>
|
|
|
|
|
<li>no versions of content: change it changes the new digest too</li>
|
|
|
|
|
<li>no versions: no sync conflicts</li>
|
|
|
|
|
<li>no versions: perfect caching (have it or don't)</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
2011-05-03 23:40:50 +00:00
|
|
|
|
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Multi-Layer, Indexed
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Unix philosophy: small pieces with well-defined interfaces that can be chained or composed</li>
|
|
|
|
|
<li>Camlistore pieces include:
|
|
|
|
|
<ul class='dense'>
|
|
|
|
|
<li style='margin-top: 1em'>Blob storage: memory, disk, S3, Google, MySQL index, etc</li>
|
|
|
|
|
<li>Schema</li>
|
|
|
|
|
<li>Signing</li>
|
|
|
|
|
<li>Replication</li>
|
|
|
|
|
<li>Indexing: (e.g. replicate from disk to MySQL index)</li>
|
|
|
|
|
<li>Search</li>
|
|
|
|
|
<li>HTML UI</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
2011-05-03 23:40:50 +00:00
|
|
|
|
<!-- END -->
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<p>
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
There is more text just underneath.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Simple slide with header and text
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='smaller'>
|
|
|
|
|
<h3>
|
|
|
|
|
Simple slide with header and text (small font)
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
This is a slide with just text. This is a slide with just text.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
There is more text just underneath with a <code>code sample: 5px</code>.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with bullet points and a longer title, just because we
|
|
|
|
|
can make it longer
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
Use this template to create your presentation
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
Use the provided color palette, box and arrow graphics, and
|
|
|
|
|
chart styles
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
Instructions are provided to assist you in using this
|
|
|
|
|
presentation template effectively
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
At all times strive to maintain Google's corporate look and feel
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with bullet points that builds
|
|
|
|
|
</h3>
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<ul class="nobuild">
|
2011-05-03 23:40:50 +00:00
|
|
|
|
<li>
|
|
|
|
|
This is an example of a list
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
The list items fade in
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
Last one!
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
2011-05-04 23:11:51 +00:00
|
|
|
|
<div class="nobuild">
|
2011-05-03 23:40:50 +00:00
|
|
|
|
<p>Any element with child nodes can build.</p>
|
|
|
|
|
<p>It doesn't have to be a list.</p>
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='smaller'>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with bullet points (small font)
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
Use this template to create your presentation
|
|
|
|
|
<li>
|
|
|
|
|
Use the provided color palette, box and arrow graphics, and
|
|
|
|
|
chart styles
|
|
|
|
|
<li>
|
|
|
|
|
Instructions are provided to assist you in using this
|
|
|
|
|
presentation template effectively
|
|
|
|
|
<li>
|
|
|
|
|
At all times strive to maintain Google's corporate look and feel
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with a table
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>
|
|
|
|
|
Name
|
|
|
|
|
<th>
|
|
|
|
|
Occupation
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Luke Mahé
|
|
|
|
|
<td>
|
|
|
|
|
V.P. of Keepin’ It Real
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Marcin Wichary
|
|
|
|
|
<td>
|
|
|
|
|
The Michael Bay of Doodles
|
|
|
|
|
</table>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='smaller'>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with a table (smaller text)
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>
|
|
|
|
|
Name
|
|
|
|
|
<th>
|
|
|
|
|
Occupation
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Luke Mahé
|
|
|
|
|
<td>
|
|
|
|
|
V.P. of Keepin’ It Real
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
Marcin Wichary
|
|
|
|
|
<td>
|
|
|
|
|
The Michael Bay of Doodles
|
|
|
|
|
</table>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Styles
|
|
|
|
|
</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='red'>class="red"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='blue'>class="blue"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='green'>class="green"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='yellow'>class="yellow"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='black'>class="black"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<span class='white'>class="white"</span>
|
|
|
|
|
<li>
|
|
|
|
|
<b>bold</b> and <i>italic</i>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h2>
|
|
|
|
|
Segue slide
|
|
|
|
|
</h2>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with an image
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
<img style='height: 500px' src='images/example-graph.png'>
|
|
|
|
|
</p>
|
|
|
|
|
<div class='source'>
|
|
|
|
|
Source: Sergey Brin
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Slide with an image (centered)
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
<img class='centered' style='height: 500px' src='images/example-graph.png'>
|
|
|
|
|
</p>
|
|
|
|
|
<div class='source'>
|
|
|
|
|
Source: Larry Page
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='fill'>
|
|
|
|
|
<h3>
|
|
|
|
|
Image filling the slide (with optional header)
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
<img src='images/example-cat.jpg'>
|
|
|
|
|
</p>
|
|
|
|
|
<div class='source white'>
|
|
|
|
|
Source: Eric Schmidt
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
This slide has some code
|
|
|
|
|
</h3>
|
|
|
|
|
<section>
|
|
|
|
|
<pre>
|
|
|
|
|
<script type='text/javascript'>
|
|
|
|
|
// Say hello world until the user starts questioning
|
|
|
|
|
// the meaningfulness of their existence.
|
|
|
|
|
function helloWorld(world) {
|
|
|
|
|
for (var i = 42; --i >= 0;) {
|
|
|
|
|
alert('Hello ' + String(world));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
p { color: pink }
|
|
|
|
|
b { color: blue }
|
|
|
|
|
u { color: 'umber' }
|
|
|
|
|
</style>
|
|
|
|
|
</pre>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='smaller'>
|
|
|
|
|
<h3>
|
|
|
|
|
This slide has some code (small font)
|
|
|
|
|
</h3>
|
|
|
|
|
<section>
|
|
|
|
|
<pre>
|
|
|
|
|
<script type='text/javascript'>
|
|
|
|
|
// Say hello world until the user starts questioning
|
|
|
|
|
// the meaningfulness of their existence.
|
|
|
|
|
function helloWorld(world) {
|
|
|
|
|
for (var i = 42; --i >= 0;) {
|
|
|
|
|
alert('Hello ' + String(world));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
p { color: pink }
|
|
|
|
|
b { color: blue }
|
|
|
|
|
u { color: 'umber' }
|
|
|
|
|
</style>
|
|
|
|
|
</pre>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<q>
|
|
|
|
|
The best way to predict the future is to invent it.
|
|
|
|
|
</q>
|
|
|
|
|
<div class='author'>
|
|
|
|
|
Alan Kay
|
|
|
|
|
</div>
|
2011-05-04 23:11:51 +00:00
|
|
|
|
</article>
|
|
|
|
|
|
2011-05-03 23:40:50 +00:00
|
|
|
|
<article class='smaller'>
|
|
|
|
|
<q>
|
|
|
|
|
A distributed system is one in which the failure of a computer
|
|
|
|
|
you didn’t even know existed can render your own computer unusable.
|
|
|
|
|
</q>
|
|
|
|
|
<div class='author'>
|
|
|
|
|
Leslie Lamport
|
|
|
|
|
</div>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='nobackground'>
|
|
|
|
|
<h3>
|
|
|
|
|
A slide with an embed + title
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='nobackground'>
|
|
|
|
|
<iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article class='fill'>
|
|
|
|
|
<h3>
|
|
|
|
|
Full-slide embed with (optional) slide title on top
|
|
|
|
|
</h3>
|
|
|
|
|
<iframe src='http://www.google.com/doodle4google/history.html'></iframe>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<article>
|
|
|
|
|
<h3>
|
|
|
|
|
Thank you!
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<a href='http://www.google.com'>google.com</a>
|
|
|
|
|
</ul>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|