Commits

Kaique Silva  committed 24836d9

todo: tquery

  • Participants
  • Parent commits 9e76232

Comments (0)

Files changed (6)

+*.sw*
+run:
+	python -m SimpleHTTPServer 4000
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-	<title>Titanium Mobile</title>
+	<title>WebGL + Mind</title>
 	<meta name="description" content="Make web presentations using web standarts.">
 	<meta name="author" content="kaique.developer@gmail.com">
 
 <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
     <div class="application container">
     	<header>
-    		<h1 class="main-stamp title light">Titanium Mobile</h1>
-                <nav>
-                    <ul class="navigation">
-                        <li>
-                            <a href="#anterior" class="back">Anterior</a>
-                        </li>
-                        <li>
-                            <a href="#proximo" class="next">Proximo</a>
-                        </li>
-                    </ul>
-                </nav>
+            <h1 class="main-stamp title light">WebGL</h1>
+            <nav>
+                <ul class="navigation">
+                    <li>
+                        <a href="#anterior" class="back">Anterior</a>
+                    </li>
+                    <li>
+                        <a href="#proximo" class="next">Proximo</a>
+                    </li>
+                </ul>
+            </nav>
     		<hr />
     	</header>
 		
     		<div class="press">
           <div class="mask">
             <div class="slide">
-              <header>
-                  <h1 class="stamp">Olá, vamos falar sobre Titanium?</h1>
-                  <hr>
-              </header>
+                <header>
+                    <h1 class="stamp">OpenGL e OpenGL ES</h1>
+                    <br />
+                </header>
+
                 <div>
-                  <p>
-                    Meu nome é Kaique da Silva, sou desenvolvedor na empresa Phoenix Comunicação Integrada. <br>
-                    Coordeno a área de desenvolvimento para web e mobile. E lá utilizamos Titanium Mobile.
-                  </p>
-                  <br>
-                  <p>
-                    Porque escolher Titanium?
-                  </p>
-                  <br>
-                  <p>
-                    Quer saber? Então vamos começar.
-                  </p>
+                    <p>O que eles são?</p>
+                    <p>E qual é a relação deles, com o WebGL?</p>
+                    <p>Você pode falar um pouco sobre o nucleo do Open GL?</p>
                 </div>
+
                 <footer>
-                  
                 </footer>
             </div>
+
             <div class="slide">
-              <header>
-                  <h1 class="stamp">Como tudo começou?</h1>
-                  <hr>
-              </header>
+                <header>
+                    <h1 class="stamp">Khronos Group</h1>
+                    <br />
+                </header>
+
                 <div>
-                  <div>
-                    <img src="img/titanium-logo.png" width="50%" style="margin: 50px 25%"/>
-                  </div>
+                    <p>Eles são os responsaveis?</p>
                 </div>
+
                 <footer>
-                  
                 </footer>
             </div>
+
             <div class="slide">
-              <header>
-                <h1 class="stamp">Como funciona?</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Com Titanium Mobile, você utiliza padrões web para criar aplicações nativas.
-                </p>
-                
+                <header>
+                    <h1 class="stamp">WebGL</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/engine.jpg" width="50%" style="margin: 50px 25%" />
+                    <p>O que é?</p>
+                    <p>Como funciona?</p>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Quem esta utilizando?</h1>
-                <hr>
-              </header>
-              <div>
+                <header>
+                    <h1 class="stamp">WebGL definição de um contexto</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-apps.png" width="100%" style="margin: 25px 0" />
+                   <p>Como é feito?</p>
+                   <br />
+
+                   <script src="https://gist.github.com/3999138.js?file=webgl1.js"></script>
                 </div>
-              </div>
-              <footer>
-                <p class="center">
-                    <a href="http://www.builtwithtitanium.com" target="_new">Built With Titanium</a>
-                </p>
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Como começar a utilizar o titanium?</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Para começar a desenvolver aplicativos utilizando o Titanium basta fazer o download da SDK,
-                  e começar a brincar.
-                </p>
-                
+                <header>
+                    <h1 class="stamp">Three.js uma breve intro</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-sdk.png" width="100%" style="margin: 25px 0" />
+                    <p>O que é o Three.js?</p>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Plataformas suportadas</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Com Titanium Mobile você, cria aplicações nativas para iOS, Android e aplicações baseadas em HTML5.
-                </p>
- 
+                <header>
+                    <h1 class="stamp">Three.js uma breve intro</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-platform.png" width="70%" style="margin: 50px 15%" />
+                   <p>HTML!</p>
+                   <br />
+
+                   <script src="https://gist.github.com/3999272.js?file=threejs1.html"></script>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Quais são as possibilidades?</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Com Titanium Mobile, as pissibilidades são infinitas, porque alem de utilizar os padrões web, você pode criar modulos que extendem funções nativas de uma plataforma em espessifico.
-                </p>
+                <header>
+                    <h1 class="stamp">Three.js uma breve intro</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-pi.jpg" width="50%" style="margin: 50px 25%" />
+                   <p>Definindo uma cena!</p>
+                   <br />
+
+                   <script src="https://gist.github.com/3999296.js?file=threejs2.js"></script>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Alguns truques</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Não é magica, é simplesmente JS
-                </p>
+                <header>
+                    <h1 class="stamp">Three.js uma breve intro</h1>
+                    <br />
+                </header>
 
                 <div>
-                    <iframe width="700" height="430" src="http://www.youtube.com/embed/s4u4wwk7AVI" frameborder="0" allowfullscreen></iframe>
+                   <p>Adicionando um cubo!</p>
+                   <br />
+
+                   <script src="https://gist.github.com/3999317.js?file=threejs3.js"></script>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Publicação de uma aplicação</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  É muito simples, publicar a sua aplicação. Principalmente utilizando as lojas padrões ou a loja da Appcelerator.
-                </p>
+                <header>
+                    <h1 class="stamp">Three.js uma breve intro</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-deploy.jpg" width="70%" style="margin: 25px 18%" />
+                   <p>Renderizando uma cena!</p>
+                   <br />
+
+            <script src="https://gist.github.com/3999327.js?file=threejs4.js"></script>
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
-              <header>
-                <h1 class="stamp">Quer ajudar?</h1>
-                <hr>
-              </header>
-              <div>
-                <p>
-                  Simples, o projeto é open source e o melhor escrito em python.
-                </p>
-                
+                <header>
+                    <h1 class="stamp">tQuery</h1>
+                    <br />
+                </header>
+
                 <div>
-                    <img src="img/ti-contribute.png" width="100%" style="margin: 25px 0" />
+                   <p>O que é o tQuery?</p>
+                   <br />
                 </div>
-              </div>
-              <footer>
-                
-              </footer>
+
+                <footer>
+                </footer>
             </div>
 
             <div class="slide">
         </div>
     	</div>
 
-    	<hr />
-
 		<footer>
-		<p class="stamp quote center light">CC by kaique.developer@gmail.com</p>
 		</footer>
     </div> <!-- /container -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

File js/script.js

 			height: '600px',
 		},
 		slide: { 
-			width: '700px',
+			width: '960px',
 			height: '550px',
-			spaceBetween: 225,
+			spaceBetween: 90,
 		}
 	});
 });

File less/style.less

 @import "bootstrap/bootstrap.less";
-
-
-
 @import "bootstrap/responsive.less";
 
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 
-/* ===== Primary Styles =====================================================
-   Author: kaique.developer@gmail.com
-   ========================================================================== */
+* {
+    font-family: 'Open Sans', sans-serif;    
+}
 
 .bg {
-    background: #f2f2f2;
+    background: #f7f7f7;
 }
 
 .border( @border ) {
 	.bg();
 	
 	margin: 0;
-	padding: 25px 0;
+	padding: 10px 0;
 	width: 100%;
 	height: 100%;
 	color: #9C2D38+10;
 
 .main-stamp {
     float: left;    
+
+    font-size: 42px;
 }
 
 hr {
 	line-height: 130%;
 	letter-spacing: 0.5px;
 
-	font-size: 18px;
+	font-size: 26px;
 	color: #000+75;
 }
 
 	color: #9C2D38;
 }
 
+pre {
+    font-size: 20px;    
+    padding: 0;
+    line-height: 145%;
+}
+
 .quote {
 	font-size: 14px;
 }
 }
 
 .press {
-   padding: 30px 0; 
+   padding: 10px 0; 
 }
 
 .mask {
-    padding: 15px 0;
+    padding: 10px 0;
 }
 
 .slide {
 	padding: 15px;
-	//background: #ccc;
-
-	.border( 20px );
-    border: 1px solid #c2c2c2;
 }
 
 a {
+# OpenGL ES
+
+- falar sobre a especificação
+
+# OpenGL
+
+- falar sobre a especificação 
+
+# WebGL
+
+- falar sobre o webGL
+- mostrar como funciona a API
+
+# Three.js
+
+- aprensentar o framework
+- apresentar alguns exemplos
+- mostrar algumas features
+
+# tQuery
+
+- falar sobre o tQuery
+- apresentar alguns exemplos
+- mostrar algumas features
+
+    + Audio
+    + Video
+    + Realidade aumentada
+    
+    # Collada
+
+    - apresentar o esquema
+    - mostrar uma lib