Browse files

make io2011 into s9 template

  • Loading branch information...
1 parent 3fffd1b commit 81e5214aef13f500f3ad40b2c2bfea5cab02479a @geraldb geraldb committed Sep 21, 2012
Showing with 420 additions and 332 deletions.
  1. +27 −0 NOTES.markdown
  2. +388 −0 io2011/sample.markdown
  3. +5 −332 io2011/slides.html.erb
View
27 NOTES.markdown
@@ -23,3 +23,30 @@ Copied Files from -> to:
trunk/template/images/example-graph.jpg -> io2011/images/example-graph.jpg
+### slides.html.erb Changes
+
+Change
+
+ <script src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
+
+to
+
+ <script src='js/slides.js'></script>
+
+
+Change
+
+ <title>Presentation</title>
+
+to
+
+ <title><%= @headers['title'] %></title>
+
+
+### js/slides.js Changes
+
+Change
+
+ var PERMANENT_URL_PREFIX = 'http://html5slides.googlecode.com/svn/trunk/';
+
+TBD
View
388 io2011/sample.markdown
@@ -0,0 +1,388 @@
+%%%%
+%% Sample slides converted to markdown
+
+%%%%%%%%%%%%%%%%%
+% <article class='biglogo'>
+% </article>
+
+
+!SLIDE biglogo
+
+%%%%%%%%%%%%%%%%%
+% <article>
+% <h1>
+% Title Goes Here Up
+% <br>
+% To Two Lines
+% </h1>
+% <p>
+% Sergey Brin
+% <br>
+% May 10, 2011
+% </p>
+% </article>
+
+TODO
+
+TODO - how to create heading with break in markdown - possible? works like in paragraph???
+
+%%%%%%%%%%%%%%%%%%
+% <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>
+
+!SLIDE
+
+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.
+
+There is more text just underneath.
+
+%%%%%%%%%%%%%%%%%%
+% <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>
+
+!SLIDE
+
+### Simple slide with header and 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. This is a slide with just text.
+
+There is more text just underneath with a `code sample: 5px`.
+
+
+%%%%%%%%%%%%%%%%%%%%%%%
+% <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>
+
+!SLIDE smaller
+
+### Simple slide with header and text (small font)
+
+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.
+
+There is more text just underneath with a `code sample: 5px`.
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%
+% <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>
+
+!SLIDE
+
+### Slide with bullet points and a longer title, just because we can make it longer
+
+- Use this template to create your presentation
+- Use the provided color palette, box and arrow graphics, and chart styles
+- Instructions are provided to assist you in using this presentation template effectively
+- At all times strive to maintain Google's corporate look and feel
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% <article>
+% <h3>
+% Slide with bullet points that builds
+% </h3>
+% <ul class="build">
+% <li>
+% This is an example of a list
+% </li>
+% <li>
+% The list items fade in
+% </li>
+% <li>
+% Last one!
+% </li>
+% </ul>
+%
+% <div class="build">
+% <p>Any element with child nodes can build.</p>
+% <p>It doesn't have to be a list.</p>
+% </div>
+% </article>
+
+
+TBD
+
+
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% <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>
+&lt;script type='text/javascript'&gt;
+ // Say hello world until the user starts questioning
+ // the meaningfulness of their existence.
+ function helloWorld(world) {
+ for (var i = 42; --i &gt;= 0;) {
+ alert('Hello ' + String(world));
+ }
+ }
+&lt;/script&gt;
+&lt;style&gt;
+ p { color: pink }
+ b { color: blue }
+ u { color: 'umber' }
+&lt;/style&gt;
+</pre>
+ </section>
+ </article>
+
+ <article class='smaller'>
+ <h3>
+ This slide has some code (small font)
+ </h3>
+ <section>
+ <pre>
+&lt;script type='text/javascript'&gt;
+ // Say hello world until the user starts questioning
+ // the meaningfulness of their existence.
+ function helloWorld(world) {
+ for (var i = 42; --i &gt;= 0;) {
+ alert('Hello ' + String(world));
+ }
+ }
+&lt;/script&gt;
+&lt;style&gt;
+ p { color: pink }
+ b { color: blue }
+ u { color: 'umber' }
+&lt;/style&gt;
+</pre>
+ </section>
+ </article>
+
+ <article>
+ <q>
+ The best way to predict the future is to invent it.
+ </q>
+ <div class='author'>
+ Alan Kay
+ </div>
+ </article>
+
+ <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>
View
337 io2011/slides.html.erb
@@ -14,18 +14,17 @@
<html>
<head>
- <title>Presentation</title>
-
<meta charset='utf-8'>
- <script
- src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
+ <title><%= @headers['title'] %></title>
+
+ <script src='js/slides.js'></script>
</head>
<style>
/* Your individual styles here, or just use inline styles if that’s
what you want. */
-
+ <%= content_for :css %>
</style>
<body style='display: none'>
@@ -36,333 +35,7 @@
slides below. -->
-
- <article class='biglogo'>
- </article>
-
- <article>
- <h1>
- Title Goes Here Up
- <br>
- To Two Lines
- </h1>
- <p>
- Sergey Brin
- <br>
- May 10, 2011
- </p>
- </article>
-
- <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>
- <ul class="build">
- <li>
- This is an example of a list
- </li>
- <li>
- The list items fade in
- </li>
- <li>
- Last one!
- </li>
- </ul>
-
- <div class="build">
- <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>
-&lt;script type='text/javascript'&gt;
- // Say hello world until the user starts questioning
- // the meaningfulness of their existence.
- function helloWorld(world) {
- for (var i = 42; --i &gt;= 0;) {
- alert('Hello ' + String(world));
- }
- }
-&lt;/script&gt;
-&lt;style&gt;
- p { color: pink }
- b { color: blue }
- u { color: 'umber' }
-&lt;/style&gt;
-</pre>
- </section>
- </article>
-
- <article class='smaller'>
- <h3>
- This slide has some code (small font)
- </h3>
- <section>
- <pre>
-&lt;script type='text/javascript'&gt;
- // Say hello world until the user starts questioning
- // the meaningfulness of their existence.
- function helloWorld(world) {
- for (var i = 42; --i &gt;= 0;) {
- alert('Hello ' + String(world));
- }
- }
-&lt;/script&gt;
-&lt;style&gt;
- p { color: pink }
- b { color: blue }
- u { color: 'umber' }
-&lt;/style&gt;
-</pre>
- </section>
- </article>
-
- <article>
- <q>
- The best way to predict the future is to invent it.
- </q>
- <div class='author'>
- Alan Kay
- </div>
- </article>
-
- <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>
+ <!-- todo: add content builder using erb template -->
</section>

0 comments on commit 81e5214

Please sign in to comment.