Permalink
Browse files

Iniciando a insercao dos primeiros slides, customização do layout da …

…apresentação e inserindo as primeira imagens.
  • Loading branch information...
1 parent 9a9a54f commit b6e1f6c4295873c35b6c37b2b0aaab149a828c33 @gilsondev committed Mar 24, 2012
View
BIN css/.apresentacao.css.swp
Binary file not shown.
View
544 css/apresentacao.css
@@ -0,0 +1,544 @@
+/**
+ * This is a stylesheet for a demo presentation for impress.js
+ *
+ * It is not meant to be a part of impress.js and is not required by impress.js.
+ * I expect that anyone creating a presentation for impress.js would create their own
+ * set of styles.
+ */
+
+
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+body {
+ font-family: 'PT Sans', sans-serif;
+
+ min-height: 740px;
+
+ background-image: linear-gradient(bottom, rgb(17,71,9) 0%, rgb(31,130,16) 50%);
+ background-image: -o-linear-gradient(bottom, rgb(17,71,9) 0%, rgb(31,130,16) 50%);
+ background-image: -moz-linear-gradient(bottom, rgb(17,71,9) 0%, rgb(31,130,16) 50%);
+ background-image: -webkit-linear-gradient(bottom, rgb(17,71,9) 0%, rgb(31,130,16) 50%);
+ background-image: -ms-linear-gradient(bottom, rgb(17,71,9) 0%, rgb(31,130,16) 50%);
+ background-color: #075901;
+ -webkit-font-smoothing: antialiased;
+
+ color: #FFF;
+ text-shadow: 1px 1px 2px #000;
+}
+
+b, strong { font-weight: bold }
+i, em { font-style: italic}
+
+a {
+ color: inherit;
+ text-decoration: none;
+ padding: 0 0.1em;
+ background: rgba(255,255,255,0.5);
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
+ border-radius: 0.2em;
+
+ -webkit-transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
+}
+
+a:hover {
+ background: rgba(255,255,255,1);
+ text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
+}
+
+p {
+ line-height: 1.5em;
+ margin: 0 0 10px 30px;
+}
+
+ul {
+ margin: 30px 0 0 40px;
+}
+
+ul li {
+ font-size: 35px;
+ margin: 20px 0;
+}
+
+/* enable clicking on elements 'hiding' behind body in 3D */
+body { pointer-events: none; }
+#impress { pointer-events: auto; }
+
+/* COMMON STEP STYLES */
+
+.step {
+ width: 900px;
+ padding: 40px;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+
+ font-family: 'PT Serif', georgia, serif;
+
+ font-size: 48px;
+ line-height: 1.5;
+}
+
+/* fade out inactive slides */
+
+.step {
+ -webkit-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ transition: opacity 1s;
+}
+
+.step:not(.active) {
+ opacity: 0.3;
+}
+
+.step h1 {
+ font-size: 90px;
+}
+
+/* STEP SPECIFIC STYLES */
+
+/* hint on the first slide */
+
+.hint {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 200px;
+
+ background: rgba(0,0,0,0.5);
+ color: #EEE;
+ text-align: center;
+
+ font-size: 50px;
+ padding: 20px;
+
+ z-index: 100;
+
+ opacity: 0;
+
+ -webkit-transform: translateY(400px);
+ -moz-transform: translateY(400px);
+ -ms-transform: translateY(400px);
+ -o-transform: translateY(400px);
+ transform: translateY(400px);
+
+ -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
+ -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
+ -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
+ -o-transition: opacity 1s, -o-transform 0.5s 1s;
+ transition: opacity 1s, transform 0.5s 1s;
+}
+
+.step-bored + .hint {
+ opacity: 1;
+
+ -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
+ -moz-transition: opacity 1s 5s, -moz-transform 0.5s;
+ -ms-transition: opacity 1s 5s, -ms-transform 0.5s;
+ -o-transition: opacity 1s 5s, -o-transform 0.5s;
+ transition: opacity 1s 5s, transform 0.5s;
+
+ -webkit-transform: translateY(0px);
+ -moz-transform: translateY(0px);
+ -ms-transform: translateY(0px);
+ -o-transform: translateY(0px);
+ transform: translateY(0px);
+}
+
+/* impress.js title */
+
+#title {
+ padding: 0;
+}
+
+#title .try {
+ font-size: 64px;
+ position: absolute;
+ top: -0.5em;
+ left: 1.5em;
+
+ -webkit-transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -ms-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
+}
+
+#title h1 {
+ font-size: 80px;
+
+ -webkit-transform: translateZ(50px);
+ -moz-transform: translateZ(50px);
+ -ms-transform: translateZ(50px);
+ -o-transform: translateZ(50px);
+ transform: translateZ(50px);
+}
+
+#title .footnote {
+ font-size: 32px;
+}
+
+/* big thoughts */
+
+#big {
+ width: 600px;
+ text-align: center;
+ font-size: 60px;
+ line-height: 1;
+}
+
+#big b {
+ display: block;
+ font-size: 250px;
+ line-height: 250px;
+}
+
+#big .thoughts {
+ font-size: 90px;
+ line-height: 150px;
+}
+
+/* tiny ideas */
+
+#tiny {
+ width: 500px;
+ text-align: center;
+}
+
+#ing {
+ width: 500px;
+}
+
+#ing b {
+ display: inline-block;
+ -webkit-transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
+}
+
+#ing.active .positioning {
+ -webkit-transform: translateY(-10px);
+ -moz-transform: translateY(-10px);
+ -ms-transform: translateY(-10px);
+ -o-transform: translateY(-10px);
+ transform: translateY(-10px);
+
+ -webkit-transition-delay: 1.5s;
+ -moz-transition-delay: 1.5s;
+ -ms-transition-delay: 1.5s;
+ -o-transition-delay: 1.5s;
+ transition-delay: 1.5s;
+}
+
+#ing.active .rotating {
+ -webkit-transform: rotate(-10deg);
+ -moz-transform: rotate(-10deg);
+ -ms-transform: rotate(-10deg);
+ -o-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+
+ -webkit-transition-delay: 1.75s;
+ -moz-transition-delay: 1.75s;
+ -ms-transition-delay: 1.75s;
+ -o-transition-delay: 1.75s;
+ transition-delay: 1.75s;
+}
+
+#ing.active .scaling {
+ -webkit-transform: scale(0.7);
+ -moz-transform: scale(0.7);
+ -ms-transform: scale(0.7);
+ -o-transform: scale(0.7);
+ transform: scale(0.7);
+
+ -webkit-transition-delay: 2s;
+ -moz-transition-delay: 2s;
+ -ms-transition-delay: 2s;
+ -o-transition-delay: 2s;
+ transition-delay: 2s;
+
+}
+
+/* imagination */
+
+#imagination {
+ width: 600px;
+}
+
+#imagination .imagination {
+ font-size: 78px;
+}
+
+/* use the source, Luke */
+
+#source {
+ width: 700px;
+ padding-bottom: 300px;
+
+ /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
+ background-position: bottom right;
+ background-repeat: no-repeat;
+}
+
+#source q {
+ font-size: 60px;
+}
+
+/* it's in 3D */
+
+#its-in-3d p {
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+
+#its-in-3d span,
+#its-in-3d b {
+ display: inline-block;
+ -webkit-transform: translateZ(40px);
+ -moz-transform: translateZ(40px);
+ -ms-transform: translateZ(40px);
+ -o-transform: translateZ(40px);
+ transform: translateZ(40px);
+
+ -webkit-transition: 0.5s;
+ -moz-transition: 0.5s;
+ -ms-transition: 0.5s;
+ -o-transition: 0.5s;
+ transition: 0.5s;
+}
+
+#its-in-3d .have {
+ -webkit-transform: translateZ(-40px);
+ -moz-transform: translateZ(-40px);
+ -ms-transform: translateZ(-40px);
+ -o-transform: translateZ(-40px);
+ transform: translateZ(-40px);
+}
+
+#its-in-3d .you {
+ -webkit-transform: translateZ(20px);
+ -moz-transform: translateZ(20px);
+ -ms-transform: translateZ(20px);
+ -o-transform: translateZ(20px);
+ transform: translateZ(20px);
+}
+
+#its-in-3d .noticed {
+ -webkit-transform: translateZ(-40px);
+ -moz-transform: translateZ(-40px);
+ -ms-transform: translateZ(-40px);
+ -o-transform: translateZ(-40px);
+ transform: translateZ(-40px);
+}
+
+#its-in-3d .its {
+ -webkit-transform: translateZ(60px);
+ -moz-transform: translateZ(60px);
+ -ms-transform: translateZ(60px);
+ -o-transform: translateZ(60px);
+ transform: translateZ(60px);
+}
+
+#its-in-3d .in {
+ -webkit-transform: translateZ(-10px);
+ -moz-transform: translateZ(-10px);
+ -ms-transform: translateZ(-10px);
+ -o-transform: translateZ(-10px);
+ transform: translateZ(-10px);
+}
+
+#its-in-3d .footnote {
+ font-size: 32px;
+
+ -webkit-transform: translateZ(-10px);
+ -moz-transform: translateZ(-10px);
+ -ms-transform: translateZ(-10px);
+ -o-transform: translateZ(-10px);
+ transform: translateZ(-10px);
+}
+
+#its-in-3d.active span,
+#its-in-3d.active b {
+ -webkit-transform: translateZ(0px);
+ -moz-transform: translateZ(0px);
+ -ms-transform: translateZ(0px);
+ -o-transform: translateZ(0px);
+ transform: translateZ(0px);
+
+ -webkit-transition-delay: 1s;
+ -moz-transition-delay: 1s;
+ -ms-transition-delay: 1s;
+ -o-transition-delay: 1s;
+ transition-delay: 1s;
+}
+
+/* overview step */
+
+#overview {
+ z-index: -1;
+ padding: 0;
+}
+
+/* on overview step everything is visible */
+
+#impress.step-overview .step {
+ opacity: 1;
+ cursor: pointer;
+}
+
+/*
+ * SLIDE STEP STYLES
+ *
+ * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
+ *
+ * ;)
+ */
+
+.slide {
+ display: block;
+
+ width: 900px;
+ height: 700px;
+
+ margin: 5px 0;
+ padding: 50px 60px;
+
+ line-height: 36px;
+
+ letter-spacing: -1px;
+}
+
+.slide q {
+ display: block;
+ font-size: 50px;
+ line-height: 72px;
+
+ margin-top: 100px;
+}
+
+.slide q strong {
+ white-space: nowrap;
+}
+
+.slide h1 {
+ margin-bottom: 60px;
+}
+
+
+/* IMPRESS NOT SUPPORTED STYLES */
+
+.fallback-message {
+ font-family: sans-serif;
+ line-height: 1.3;
+
+ display: none;
+ width: 780px;
+ padding: 10px 10px 0;
+ margin: 20px auto;
+
+ border-radius: 10px;
+ border: 1px solid #E4C652;
+ background: #EEDC94;
+}
+
+.fallback-message p {
+ margin-bottom: 10px;
+}
+
+.impress-not-supported .step {
+ position: relative;
+ opacity: 1;
+ margin: 20px auto;
+}
+
+.impress-not-supported .fallback-message {
+ display: block;
+}
+
+/* SOCIAL NETWORK */
+.twitter {
+ background: url("../images/twitter.png") no-repeat;
+ padding-left: 48px;
+}
+
+.twitter a {
+ background: none;
+}
+
+.twitter a:hover {
+ color: #7fbfff;
+}
+
+
+/* ABOUT ME */
+#its2 ul {
+ margin: 30px 0 0 40px;
+}
+
+#its2 ul li {
+ margin: 40px 0;
+}
View
BIN images/stop.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/twitter.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/vi_editor.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/vim_logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/why_vim.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
160 index.html
@@ -11,95 +11,114 @@
<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" />
- <!--
- Impress.js doesn't depend on any external stylesheet. Script adds all styles it needs for
- presentation to work.
- This style below contains styles only for demo presentation. Browse it to see how impress.js
- classes are used to style presentation steps, or how to apply fallback styles, but I don't want
- you to use them directly in your presentation.
- Be creative, build your own. We don't really want all impress.js presentations to look the same,
- do we?
- When creating your own presentation get rid of this file. Start from scratch, it's fun!
- -->
- <link href="impress.js/css/impress-demo.css" rel="stylesheet" />
+ <link href="css/apresentacao.css" rel="stylesheet" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body>
-<!--
- That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
- It doesn't have to be a `<div>`. Only `id` is important here as that's how the script find it.
- It's worth to notice the `impress-not-supported` class. This class means, that browser doesn't
- support features required by impress.js, so you can apply some fallback styles in your CSS.
- It's not necessary to add it manually on this element. If the script detects that browser is not
- good enough it will add this class, but keeping it in HTML means that users without JavaScript
- will also get fallback styles.
- The class name on this element also depends on currently active presentation step. More details about
- it can be found below, when `hint` element is being described.
--->
<div id="impress" class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser. Upcoming version 10 of Internet Explorer <i>should</i> also handle it.</p>
</div>
- <!--
- Here is where interesting thing start to happen.
- Each step of the presentation should be an element inside the `#impress` with a class name
- of `step`. These step elements are positioned, rotated and scaled by impress.js, and
- the 'camera' shows them on each step of the presentation.
- Positioning information is passed through data attributes.
- In the example below we only specify x and y position of the step element with `data-x="-1000"`
- and `data-y="-1500` attributes. This means that **the center** of the element (yes, the center)
- will be positioned in point x = -1000px and y = -1500px of the presentation 'canvas'.
- 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" data-x="0" data-y="0" data-scale="4">
+ <h1>Seja produtivo com </h1>
+ <img src="images/vim_logo.png" alt="Logo Vim" width="256" height="256" style="margin-left: 440px;"/>
+ <br />
+ <span class="footnote twitter">
+ <a href="http://www.twitter.com/gilsonfilho">gilsonfilho</a>
+ </span>
</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.
+ 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 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 id="its" class="step " data-x="350" data-y="4000" data-rotate="90" data-scale="5">
+ <h1>Quem é você?</h1>
</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 id="its2" class="step slide" data-x="3050" data-y="9000" data-rotate="90" data-scale="6">
+ <h1>Gilson Filho</h1>
+ <br />
+ <ul>
+ <li>Programo há 5 anos</li>
+ <li>Desenvolvedor web há 4 anos</li>
+ <li>Python, Java e ASP</li>
+ <li>Moderador do GruPy-DF</li>
+ <li>Usuário linux há 4 anos</li>
+ </ul>
</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>
+ <div class="step" id="stop" data-x="7350" data-y="9800" data-rotate="120" data-scale="4">
+ <h1>Vamos por partes</h1>
+ <center><img src="images/stop.png" alt="Pare!" width="256"/></center>
+ </div>
+
+ <div class="step" id="firstvi" data-x="9350" data-y="17900" data-rotate="120" data-scale="4">
+ <h1>Primeiro vamos aprender o </h1>
+ <img src="images/vi_editor.png" alt="" style="margin-left: 450px; margin-top: -300px;"/>
+ </div>
+
+ <div class="step slide" id="vieditor" data-x="2350" data-y="17900" data-rotate="120" data-scale="4">
+ <h1>O que é o Vi?</h1>
+ <p>Ele é um editor de texto que foi feito para ser simples e prático</p>
+ <p>
+ Ele foi criado para ser usado no UNIX e na época em que tudo era nos terminais, ou seja, sem
+ interface gráfica.
+ </p>
+ </div>
+
+ <div class="step slide" id="negativesvim" data-x="13350" data-y="18000" data-rotate="90" data-scale="9">
+ <h1>Pontos negativos</h1>
+ <ul>
+ <li>Interface 100% texto</li>
+ <li>Não pode-se utilizar o mouse</li>
+ <li>Não é NADA amigável</li>
+ <li>Não é possível mover com facilidade o cursor pelo texto</li>
+ </ul>
+ </div>
+
+ <div class="step slide" id="strengthsvim" data-x="21350" data-y="-1000" data-rotate="90" data-scale="9">
+ <h1>Pontos positivos</h1>
+ <ul>
+ <li></li>
+ <li>Vi é o único editor padrão em qualquer sabor Unix</li>
+ <li>É pequeno, então carrega rapidamente e não ocupa memória</li>
+ <li>Pode ser usado em qualquer layout de teclado;</li>
+ <li>Por ser 100% texto, sua dependência de configurações é mínima</li>
+ <li>Seus comandos aceitam expressões regulares tornando versátil e poderoso</li>
+ <li>Muito mais</li>
+ </ul>
</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 class="step" id="whatisvim" data-x="7350" data-y="9800" data-rotate="120" data-scale="7">
+ <h1>O que é </h1>
+ <img src="images/vim_logo.png" alt="Logo Vim" width="256" height="256" style="margin-left: 340px;"/>
</div>
+ <div class="step slide" id="vimeditor" data-x="10350" data-y="12800" data-rotate="180" data-scale="8">
+ <h1>O que é o Vim?</h1>
+ <p>
+ Editor de texto multiplataforma criado por Bram Moolenaar e que
+ foi baseado no editor Vi do Unix.
+ </p>
+ <p>Atualmente ele tem <strong>20 anos</strong> de idade :)</p>
+ </div>
+
+ <div class="step" id="whyvim" data-x="17350" data-y="9800" data-rotate="90" data-scale="9">
+ <h1>Mas porque o Vim?</h1>
+ <center>
+ <img src="images/why_vim.jpg" alt="" />
+ </center>
+ </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>
@@ -144,16 +163,7 @@
<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 id="overview" class="step" data-x="0" data-y="0" data-scale="3">
</div>
</div>

0 comments on commit b6e1f6c

Please sign in to comment.