Updated slidesw

cykod · Aug 15, 2011 · 835b63e · 835b63e
1 parent f550829
commit 835b63e
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 24 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -109,7 +109,7 @@ body {
   margin-left: -450px;
   margin-top: -350px;
 
-  padding: 75px 150px;
+  padding: 20px 150px;
 
   box-sizing: border-box;
   -o-box-sizing: border-box;
@@ -143,15 +143,10 @@ body {
 }
 
 .slides.template-default > article:not(.nobackground):not(.biglogo) {
-  background: url(images/google-logo-small.png) 710px 625px no-repeat;  
-
   background-color: white;  
 } 
 
 .slides.template-io2011 > article:not(.nobackground):not(.biglogo) {
-  background: url(images/colorbar.png) 0 600px repeat-x,
-              url(images/googleio-logo.png) 640px 625px no-repeat;
-
   background-size: 100%, 225px;  
 
   background-color: white;  
@@ -162,6 +157,9 @@ body {
 }
 
 
+.slides > article.full-code {
+  padding:10px 30px;
+}
 
 /* Clickable/tappable areas */
 
@@ -186,10 +184,10 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 #prev-slide-area {
-  margin-left: -550px;
+  margin-left: -650px;
 }
 #next-slide-area {
-  margin-left: 400px;
+  margin-left: 500px;
 }
 .slides.layout-widescreen #prev-slide-area,
 .slides.layout-faux-widescreen #prev-slide-area {
@@ -351,16 +349,21 @@ p:first-child {
 	text-align:right;
 }
 
-
 h1 {
-  font-size: 60px;
+  font-size: 50px;
   text-transform:uppercase;
   line-height: 65px;
   margin-top: 130px;
   letter-spacing: -3px;
   color: #878787;
 }
 
+article.editor-slide > h1  {
+  margin-top: 10px;
+}
+
+
+
 h2 {
   font-size: 45px;
   line-height: 48px;
@@ -418,13 +421,25 @@ ul {
   margin-top: 40px;
   margin-left: .75em;
 }
-
+ 
 ul ul {
-  margin-top: .5em;
+  margin-top: 10px;
+  margin-left: 2.5em;
+}
+
+article > ul > li {
+  font-size:1.4em;
+  line-height:1.1em;
+}
+
+article > ul > li > pre {
+  font-size:0.8em;
+  margin:5px 0px;
+  padding:5px;
 }
 
 li {
-  list-style-image: url(../images/bullet.gif);
+  list-style-type:disc;
   padding-top: 0;
   margin: 0;
   margin-bottom: .7em;
@@ -639,13 +654,27 @@ article.smaller q::after {
   color: rgb(127, 0, 127);
 }
 
+.code { 
+  position:absolute;
+  left:10px;
+  width:45%;
 
-.code {
-  position:relative;
-  height:600px;
-  width:500px;
+
 }
-
-.code .editor {  height:600px;
-  width:500px;
+.editor {  
+  left:0px;
+  height:500px;
+  width:100%;
  }
+
+
+.destination {
+  position:absolute;
+  right:10px;
+  width:45%;
+  border:1px solid #CCC;
+  height:500px;
+  margin-top:20px;
+
+  padding:1px;
+}
diff --git a/js/codedeck.js b/js/codedeck.js
@@ -1,9 +1,43 @@
 
+function runCode(element) {
+  iframe = document.createElement("IFRAME"); 
+   iframe.style.width = ($(element).width()-2) + "px";
+   iframe.style.height = ($(element).height()-2) + "px";
+   iframe.style.overflow = 'auto';
+   iframe.style.border ="none";
+
+   var dest = $(element).attr('data-target');
+   var destination = $("#" + dest );
+   $(destination).html("").append(iframe);
+
+   var editor = $(element).data('editor');
+   var code = editor.getSession().getValue();
+
+   var language = $(element).attr('data-language');
+
+   if(language == 'js') {
+     code = "<scr" + "ipt>\n" + code + "\n</scr" + "ipt>";
+   }
+
+   code = "<html><head><scr" + "ipt src='js/jquery.min.js'></scr" + "ipt></head><body>" + code + '</body></html>';
+
+   writeIFrame(iframe,code);
+}
+
+function writeIFrame(iframe,code) {
+  iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
+  iframe.document.open();
+  iframe.document.write(code);
+  iframe.document.close();
+}
+
+
 
 $(document).ready(function() {
 
   var JavaScriptMode = require("ace/mode/javascript").Mode;
 
+  $("a").attr('target','_blank');
 
  function focusCallback() {
    disableKeyboardEvents = true;
@@ -15,14 +49,19 @@ $(document).ready(function() {
 
   $(document).bind("slideenter",function(e) {
     var current = $(".current");
-    current.find(".code > .editor").each(function() {
+    current.find(".editor").each(function() {
       if(!$(this).hasClass('codeEditor')) {
+        var element = this;
         var editor = ace.edit(this.id);
         $(this).addClass('codeEditor');
         editor.getSession().setMode(new JavaScriptMode());
 
+        $(this).data('editor',editor);
         editor.on('focus', focusCallback);
         editor.on('blur', blurCallback);
+        $("<button>Run</button>").insertBefore(this).click(function() {
+          runCode(element);
+        });
       }
     });
 

diff --git a/js/jquery.tmpl.min.js b/js/jquery.tmpl.min.js
diff --git a/js/slides.js b/js/slides.js
@@ -11,7 +11,7 @@
   URL: http://code.google.com/p/html5slides/
 */
 
-var PERMANENT_URL_PREFIX = 'css/styles.css';
+var PERMANENT_URL_PREFIX = '';
 
 var SLIDE_CLASSES = ['far-past', 'past', 'current', 'next', 'far-next'];
 

diff --git a/sample.html b/sample.html
@@ -8,6 +8,7 @@
 	<script src="js/ace/mode-html.js" type="text/javascript" charset="utf-8"></script>
 	<script src="js/ace/mode-css.js" type="text/javascript" charset="utf-8"></script>
 	<script src='js/jquery.min.js'></script>
+	<script src='js/jqeury.tmpl.min.ks'></script>
 
 	<script src='js/slides.js'></script>
 	<script src='js/prettify.js'></script>
@@ -27,8 +28,122 @@
 	<h1>HTML5 Workshop #4<br/>jQuery, Ajax & Javascript</h1>
 	</article>
 
-	<article >
-	<div class='code'><div id='samplecode' class='editor'>This is atextarea</div></div>
+	<article>
+	<h1>HTML/CSS Are Static</h1>
+	<p>(Now only mostly true, as you can add interactivity via CSS Hover, Animation)</p>
+	</article>
+
+	<article>
+	<h1>Anything else dynamic is programmed</h1>
+	<ul>
+		<li>Animation effects</li>
+		<li>Sliders</li>
+		<li>Drag and Drop</li>
+		<li>Autocomplete</li>
+		<li>Ajax </li>
+
+	</ul>
+	</article>
+
+	<article>
+    <h1>And, unless it's flash..</h1>
+  	<p>It's programmed in Javascript<br/>"Lingua Franca" of the Web</p>
+	</article>
+
+  <article>
+    <h1>About Javascript</h1>
+    <ul>
+      <li>First created in '96</li>
+      <li>Nothing, whatsoever to do with Java. </li>
+      <li>People hated it for a long time. Now everyone loves it.</li>
+      <li>Atwood's Law: Anything that can be written in Javascript, eventually will.</li>
+      <li>Now can be used for:
+        <ul>
+          <li>Client Side (duh)</li>
+          <li>Server Side</li>
+          <li>Mobile (iPhone, Android)</li>
+          <li>Desktop</li>
+        </ul>
+      </li>
+    </ul>
+  </article>
+
+  <article>
+    <h1>Early Praise Javascript</h1>
+    <p>“I was convinced that we needed to build-in a programming language, but the developers, Tim ﬁrst, were very much opposed. It had to remain completely declarative. Maybe, but the net result is that the programming- vacuum ﬁlled itself with the most horrible kludge in the history of computing: Javascript.” -Robert Cailliau</p>
+  </article>
+
+  <article>
+    <h1>Why so much early hate for JavaScript?</h1>
+    <ul>
+      <li>Incompatible Implementations</li>
+      <li>OO, but not a classical inheritance</li>
+      <li>Initial Implementation were slow</li>
+      <li>It looked like a silly toy next to Flash</li>
+      <li>No AJAX to start with (while Flash did)</li>
+    </ul>
+  </article>
+
+
+  <article>
+    <h1>What Changed?</h1>
+    <ul>
+      <li>The "Gmail" and "Goole Maps Era" (2004-2005)</li>
+      <li>"Framework Era" (2005-Today)</li>
+      <li><a href='http://news.cnet.com/8301-1001_3-10030888-92.html'>"Chrome Era" (2008-Today)</a></li>
+    </ul>
+  </article>
+
+
+
+  <article class='full-code'>
+    <h2>Where does Javascript go?</h2>
+    <p>Similar to CSS - multiple options (notice: type='text/javascript' <em>NOT</em> required in HTML5):</p>
+    <ul>
+      <li>Include external .js file via:
+        <pre>&lt;script src='file.js'&gt;&lt;/script&gt;</pre>
+      </li>
+      <li>Include in the &lt;head&gt; tag
+       <pre>&lt;script&gt;
+// Our Javascript Code Goes Here
+&lt;/script&gt;</pre>
+      </li>
+      <li>Include in the &lt;body&gt; tag
+       <pre>&lt;script&gt;
+  document.write("Let's write some HTML right here!");
+&lt;/script&gt;</pre>
+      </li>
+      <li> Include as an event
+      <pre>&lt;a href='javascript:void(0);' onclick='alert("Hello World!");'&gt;</pre>
+      </li>
+    </ul>
+  </article>
+
+
+  <article >
+  <h2>Where do we prefer?</h2>
+  <p>Also Similar to CSS - the less 'inline' the better. (Generalization)</p>
+    <ul>
+      <li><b>Best:</b> Include external .js file</li>
+      <li><b>Less Good:</b> Include in the &lt;head&gt; tag</li>
+      <li><b>Even Less Good:</b> Include in the &lt;body&gt; tag</li>
+      <li><b>Downright Bad:</b> Include as an event</li>
+    </ul>
+  </article>
+
+
+
+	<article class='editor-slide' >
+	  <h1>Hello World</h1>
+  	<div class='code'>
+  		<div id='samplecode' class='editor' data-language='js' data-target='sampledest'>
+alert("Hello World!");
+      </div>
+    </div>
+
+    <div class='destination' id='sampledest'>
+
+    </div>
 	</article>
 
 </section>