Permalink
Browse files

Starting diesel presentation slides

  • Loading branch information...
1 parent b59a4bf commit 53ed47dbc1df404789757ba0bdce7453665de97f Paul Bergeron committed Mar 12, 2012
Showing with 17 additions and 139 deletions.
  1. +3 −0 css/impress-demo.css
  2. +14 −139 index.html
View
@@ -507,3 +507,6 @@ body { pointer-events: none; }
display: block;
}
+q.slide_title {
+ font-size: 250%;
+}
View
@@ -44,34 +44,12 @@
-->
-<!--
-
- So you'd like to know how to use impress.js?
-
- You've made the first, very important step -- you're reading the source code.
- And that's how impress.js presentations are built -- with HTML and CSS code.
-
- Believe me, you need quite decent HTML and CSS skills to be able to use impress.js effectively.
- And what is even more important, you need to be a designer, too, because there are no default
- styles for impress.js presentations, there is no default or automatic layout for them.
-
- You need to design and build it by hand.
-
- So...
-
- Would you still like to know how to use impress.js?
-
--->
-
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
- <title>impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz</title>
-
- <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
- <meta name="author" content="Bartek Szopka" />
+ <title>API Service Framework AKA Diesel</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
@@ -151,127 +129,24 @@
It will not be rotated or scaled.
-->
- <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
- <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q>
+ <div id="title" class="step slide" data-x="-1000" data-y="-1500">
+ <center><q class="slide_title">APIService Framework</q></center>
+ <center><q>AKA Diesel / Distil / Dyslexic</q></center>
</div>
- <!--
-
- The `id` attribute of the step element is used to identify it in the URL, but it's optional.
- If it is not defined, it will get a default value of `step-N` where N is a number of slide.
-
- So in the example below it'll be `step-2`.
-
- The hash part of the url when this step is active will be `#/step-2`.
-
- You can also use `#step-2` in a link, to point directly to this particular step.
-
- Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
- Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
-
- -->
<div class="step slide" data-x="0" data-y="-1500">
- <q>Don't you think that presentations given <strong>in modern browsers</strong> shouldn't <strong>copy the limits</strong> of 'classic' slide decks?</q>
- </div>
-
- <div class="step slide" data-x="1000" data-y="-1500">
- <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
- </div>
-
- <!--
-
- This is an example of step element being scaled.
-
- Again, we use a `data-` attribute, this time it's `data-scale="4"`, so it means that this
- element will be 4 times larger than the others.
- From presentation and transitions point of view it means, that it will have to be scaled
- down (4 times) to make it back to it's correct size.
-
- -->
- <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
- <span class="try">then you should try</span>
- <h1>impress.js<sup>*</sup></h1>
- <span class="footnote"><sup>*</sup> no rhyme intended</span>
+ <center><q class="slide_title">What is it? </q></center>
+ <q>A DSL for request routing and parameter validation. Also: Racktivesupport1 web framework.</q>
</div>
- <!--
-
- This element introduces rotation.
-
- Notation shouldn't be a surprise. We use `data-rotate="90"` attribute, meaning that this
- element should be rotated by 90 degrees clockwise.
-
- -->
- <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
- <p>It's a <strong>presentation tool</strong> <br/>
- inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
- and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
- </div>
-
- <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
- <p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
- </div>
-
- <!--
-
- And now it gets really exiting! We move into third dimension!
-
- Along with `data-x` and `data-y`, you can define the position on third (Z) axis, with
- `data-z`. In the example below we use `data-z="-3000"` meaning that element should be
- positioned far away from us (by 3000px).
-
- -->
- <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
- <p>and <b>tiny</b> ideas</p>
- </div>
-
- <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
- <p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
- </div>
-
- <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
- <p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
- </div>
-
- <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
- <p>want to know more?</p>
- <q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
- </div>
-
- <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
- <p>one more thing...</p>
- </div>
-
- <!--
-
- And the last one shows full power and flexibility of impress.js.
-
- You can not only position element in 3D, but also rotate it around any axis.
- So this one here will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and
- 10 degrees (clockwise) around Y axis.
-
- You can of course rotate it around Z axis with `data-rotate-z` - it has exactly the same effect
- as `data-rotate` (these two are basically aliases).
-
- -->
- <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
- <p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it's</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
- <span class="footnote">* beat that, prezi ;)</span>
- </div>
-
- <!--
-
- So to make a summary of all the possible attributes used to position presentation steps, we have:
-
- * `data-x`, `data-y`, `data-z` -- they define the position of **the center** of step element on
- the canvas in pixels; their default value is 0;
- * `data-rotate-x`, `data-rotate-y`, 'data-rotate-z`, `data-rotate` -- they define the rotation of
- the element around given axis in degrees; their default value is 0; `data-rotate` and `data-rotate-z`
- are exactly the same;
- * `data-scale` -- defines the scale of step element; default value is 1
-
- -->
- <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
+ <div class="step slide" data-x="1000", data-y="-1500">
+ <q>Features:</q>
+ <ul>
+ <li>Sinatra-ish DSL</li>
+ <li>Completely describes valid requests</li>
+ <li>Generates API documentation</li>
+ <li>Super fast</li>
+ </ul>
</div>
</div>

0 comments on commit 53ed47d

Please sign in to comment.