Merge pull request #10 from OpenTechSchool/new-methods-in-tech

The State of Tech
OpenTechSchool · May 20, 2013 · 37988be · 37988be
2 parents 67478e2 + eb4a01a
commit 37988be
Show file tree

Hide file tree

Showing 28 changed files with 373 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -67,6 +67,7 @@ <h2>Current</h2>
   	<section id="archive">
   		<h2>Archive</h2>
   		<ul>
+        <li>Berlin, 2013/05/10 - <a href="presentations/the-state-of-tech-education/">The state of Tech Education</a> as given by <a href="berlin.codemotionworld.com/talk-page/?talk_name=new-methods-in-tech-education">by Amélie Anglade and Benjamin Kampmann at the Codemotion Berlin</a></li>
   			<li>Berlin, 2012/11/12 - <a href="presentations/opencurriuculum-github-for-the-win/">Opencurriculum - Github for the Win</a> as hold by <a href="http://open-strategies.de/sessions/opencurriculum-github-for-the-win">by Benjamin Kampmann at the Summit of New Thinking</a></li>
   		</ul>
   	</div>

diff --git a/presentations/the-state-of-tech-education/assets/android_workshop.jpg b/presentations/the-state-of-tech-education/assets/android_workshop.jpg
diff --git a/presentations/the-state-of-tech-education/assets/because_it_needs_to_be_done.jpg b/presentations/the-state-of-tech-education/assets/because_it_needs_to_be_done.jpg
diff --git a/presentations/the-state-of-tech-education/assets/beercoin_code.jpg b/presentations/the-state-of-tech-education/assets/beercoin_code.jpg
diff --git a/presentations/the-state-of-tech-education/assets/blueprint.jpg b/presentations/the-state-of-tech-education/assets/blueprint.jpg
diff --git a/presentations/the-state-of-tech-education/assets/bridge.jpg b/presentations/the-state-of-tech-education/assets/bridge.jpg
diff --git a/presentations/the-state-of-tech-education/assets/campus_party.jpg b/presentations/the-state-of-tech-education/assets/campus_party.jpg
diff --git a/presentations/the-state-of-tech-education/assets/coding_training_schools.jpg b/presentations/the-state-of-tech-education/assets/coding_training_schools.jpg
diff --git a/presentations/the-state-of-tech-education/assets/empowerment.jpg b/presentations/the-state-of-tech-education/assets/empowerment.jpg
diff --git a/presentations/the-state-of-tech-education/assets/environment.jpg b/presentations/the-state-of-tech-education/assets/environment.jpg
diff --git a/presentations/the-state-of-tech-education/assets/github_workshop.jpg b/presentations/the-state-of-tech-education/assets/github_workshop.jpg
diff --git a/presentations/the-state-of-tech-education/assets/js_workshop.jpg b/presentations/the-state-of-tech-education/assets/js_workshop.jpg
diff --git a/presentations/the-state-of-tech-education/assets/kids_hackathon.png b/presentations/the-state-of-tech-education/assets/kids_hackathon.png
diff --git a/presentations/the-state-of-tech-education/assets/learners_meetup.jpg b/presentations/the-state-of-tech-education/assets/learners_meetup.jpg
diff --git a/presentations/the-state-of-tech-education/assets/learning_experience.png b/presentations/the-state-of-tech-education/assets/learning_experience.png
diff --git a/presentations/the-state-of-tech-education/assets/learning_space.jpg b/presentations/the-state-of-tech-education/assets/learning_space.jpg
diff --git a/presentations/the-state-of-tech-education/assets/moocs.jpg b/presentations/the-state-of-tech-education/assets/moocs.jpg
diff --git a/presentations/the-state-of-tech-education/assets/not-for-profit.jpg b/presentations/the-state-of-tech-education/assets/not-for-profit.jpg
diff --git a/presentations/the-state-of-tech-education/assets/online_hands-on.jpg b/presentations/the-state-of-tech-education/assets/online_hands-on.jpg
diff --git a/presentations/the-state-of-tech-education/assets/openness.jpg b/presentations/the-state-of-tech-education/assets/openness.jpg
diff --git a/presentations/the-state-of-tech-education/assets/p2pu.png b/presentations/the-state-of-tech-education/assets/p2pu.png
diff --git a/presentations/the-state-of-tech-education/assets/python_workshop.jpg b/presentations/the-state-of-tech-education/assets/python_workshop.jpg
diff --git a/presentations/the-state-of-tech-education/assets/railsgirls.jpg b/presentations/the-state-of-tech-education/assets/railsgirls.jpg
diff --git a/presentations/the-state-of-tech-education/assets/transparency.jpg b/presentations/the-state-of-tech-education/assets/transparency.jpg
diff --git a/presentations/the-state-of-tech-education/assets/trooper_flowers.jpg b/presentations/the-state-of-tech-education/assets/trooper_flowers.jpg
diff --git a/presentations/the-state-of-tech-education/assets/university_hall.jpg b/presentations/the-state-of-tech-education/assets/university_hall.jpg
diff --git a/presentations/the-state-of-tech-education/index.html b/presentations/the-state-of-tech-education/index.html
@@ -0,0 +1,348 @@
+<!DOCTYPE HTML>
+
+<html lang="en">
+
+<head>
+	<title>OpenTechSchool</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=1274, user-scalable=no">
+	<link rel="stylesheet" href="../../theme/style.css">
+  <script type="text/javascript" src="//use.typekit.net/ayv2sls.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>	
+</head>
+
+<body class="list">
+
+  <nav class="meta">
+    <div class="container">
+      <a class="logo" href="http://opentechschool.org">OpenTechSchool</a>
+    </div>
+  </nav>
+
+  	<header class="caption">
+  		<h1>The state of Tech Education</h1>
+  		<p>A presentation on the state of tech education and OTS.</p>
+  	</header>
+
+    <section class="slides">
+
+  	<div class="slide cover shout" id="Cover"><div>
+  		<section>
+  			<header>
+  				<h2>The state of<br>
+            Tech Education<br>
+          </h2>
+  			</header>
+  		</section>
+  	</div></div>
+
+    <div class="slide cover shout" id="speakers_intro"><div>
+      <section>
+        <header>
+          <h2>Hello,<br>
+            we are Ben and Amélie<br>
+          </h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout-louder" id="tech_education"><div>
+      <section>
+        <header>
+          <h2>Tech Education</h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="university"><div>
+      <section>
+        <header class="with-bg">
+          <h2>University</h2>
+        </header>
+        <img src="assets/university_hall.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="moocs"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Massive Open Online Courses</h2>
+        </header>
+        <img src="assets/moocs.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="online_hands-on_coding_classes"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Online hands-on coding classes</h2>
+        </header>
+        <img src="assets/online_hands-on.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="P2PU"><div>
+      <section>
+        <img src="assets/p2pu.png" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="coding_training_schools"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Coding training schools</h2>
+        </header>
+        <img src="assets/coding_training_schools.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="hands-on_real-life"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Community-run<br>
+            hands-on<br>
+            real-life learning<br>
+          </h2>
+        </header>
+        <img src="assets/railsgirls.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout" id="opentechschool"><div>
+      <section>
+        <header>
+          <h2>OpenTechSchool</h2>
+        </header>
+      </section>
+    </div></div>
+
+  	<div class="slide cover shout w" id="open"><div>
+  		<section>
+  			<header class="with-bg">
+  				<h2>Open</h2>
+  			</header>
+  			<img src="assets/openness.jpg" alt="">
+  		</section>
+  	</div></div>
+
+    <div class="slide cover shout w" id="empowering"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Empowering</h2>
+        </header>
+        <img src="assets/empowerment.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="welcoming"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Welcoming</h2>
+        </header>
+        <img src="assets/environment.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="hands-on"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Hands-on</h2>
+        </header>
+        <img src="assets/learning_experience.png" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="not-for-profit"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Not for profit</h2>
+        </header>
+        <img src="assets/not-for-profit.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout" id="workshops"><div>
+      <section>
+        <header>
+          <h2>Workshops</h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="js-beginners"><div>
+      <section>
+        <header class="with-bg">
+          <h2>JavaScript For Absolute Beginners</h2>
+        </header>
+        <img src="assets/js_workshop.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="python-workshops"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Python Workshops</h2>
+        </header>
+        <img src="assets/python_workshop.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="github-workshops"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Social Coding with GitHub</h2>
+        </header>
+        <img src="assets/github_workshop.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="android-workshops"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Android for Beginners</h2>
+        </header>
+        <img src="assets/android_workshop.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="learners-meetup"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Learners Meetup</h2>
+        </header>
+        <img src="assets/learners_meetup.jpg" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout w" id="kids-hackathon"><div>
+      <section>
+        <header class="with-bg">
+          <h2>Kids Hackathon</h2>
+        </header>
+        <img src="assets/kids_hackathon.png" alt="">
+      </section>
+    </div></div>
+
+    <div class="slide cover shout" id="upcoming-workshops-title"><div>
+      <section>
+        <header>
+          <h2>Upcoming Workshops</h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout" id="upcoming-workshops"><div>
+      <section>
+        <header>
+          <h2>Arduino<br>
+            Advanced Git<br>
+            Repairing Hardware<br>
+            Games Development<br>
+            App Summer Camp<br>
+            Making and curating Video<br>
+          </h2>
+        </header>
+      </section>
+    </div></div>
+    <div class="slide cover shout" id="further-involvements-title"><div>
+      <section>
+        <header>
+          <h2>Further Involvements</h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout" id="further-involvements"><div>
+      <section>
+        <header>
+          <h2>StudentLabs<br>
+            Tech Library project<br>
+            OTS Camp package<br>
+            Mentorshipping<br>
+            Female Tech Speakers<br>
+            Less privileged Program<br>
+          </h2>
+        </header>
+      </section>
+    </div></div>
+
+    <div class="slide cover shout-louder" id="not-enough"><div>
+      <section>
+        <header>
+          <h2>Not enough</h2>
+        </header>
+      </section>
+    </div></div>
+
+
+    <div class="slide cover shout w" id="one-day-to-code"><div>
+      <section>
+        <header class="with-bg">
+          <h2>You can't learn <br>to code in a day</h2>
+        </header>
+        <img src="assets/beercoin_code.jpg" alt="">
+      </section>
+    </div>
+  </div>
+
+    <div class="slide cover shout w" id="longer-in-depth"><div>
+      <section>
+        <header class="with-bg">
+          <h2>longer in-depth programs</h2>
+        </header>
+        <img src="assets/bridge.jpg" alt="">
+        <p class="attribution">Image by <a href="http://www.flickr.com/photos/baltimoredave/4576476817/sizes/l/in/photostream/">Baltimoredave on flickr</a></p>
+      </section>
+    </div>
+  </div>
+
+    <div class="slide cover shout w" id="learning-space"><div>
+      <section>
+        <header class="with-bg">
+          <h2>in a dedicated <br>Learning Space</h2>
+        </header>
+        <img src="assets/learning_space.jpg" alt="">
+
+      </section>
+    </div>
+  </div>
+
+    <div class="slide cover shout" id="bleuprint"><div>
+      <section>
+        <header class="with-bg">
+          <h2>copy-left blueprint</h2>
+        </header>
+        <img src="assets/blueprint.jpg" alt="">
+
+      </section>
+    </div>
+  </div>
+  	<div class="slide cover w" id="ThankYou"><div>
+  		<section class="with-bg">
+        <img src="assets/trooper_flowers.jpg" alt="">
+        <div class="bottomed" style="color:white">
+          <h2>Thanks</h2>
+          <p>
+              Amélie Anglade: <a href="mailto:[email protected]">[email protected]</a> || <a href="https://twitter.com/utstitkar">@utstitkar</a><br>
+              Benjamin Kampmann: <a href="mailto:[email protected]">[email protected]</a> || <a href="https://twitter.com/amasoean">@amasoean</a><br>
+
+          <p>
+          <h2>More OpenTechSchool</h2>
+           <a href="http://facebook.com/opentechschool">fb.com/opentechschool</a> || <a href="http://twitter.com/opentechschool">@opentechschool</a> <br>
+           <a href="http://blog.opentechschool.org">blog.opentechschool.org</a> || <a href="http://opentechschool.org">opentechschool.org</a> 
+        </p>
+        <p class="attribution">Image by <a href="http://www.flickr.com/photos/jdhancock/sets/72157618524893239/">jdhancock on flickr</a></p>
+  		</section>
+  	</div></div>
+
+  	<!--
+  		To hide progress bar from entire presentation
+  		just remove “progress” element.
+  		-->
+  	<div class="progress"><div></div></div>
+
+  </section>
+
+	<script src="../../lib/shower/scripts/script.js"></script>
+</body>
+</html>
diff --git a/theme/style.css b/theme/style.css
@@ -448,6 +448,30 @@ h1, h2, h3 {
 	content: '';
 }
 
+.bottomed {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #286d99;
+	background-color: rgba(0,0,0,0.5);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
+	/* For IE 8*/
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
+
+	padding: 1em 0 0 2em;
+	border-top: solid 1px #666;
+}
+
+.attribution {
+	position: absolute;
+	right: 30px;
+	bottom: 0.1em;
+	font-size: 0.5em;
+	color: white;
+	opacity: 0.6;
+}
+
 /* Medium sized viewports */
 @media all and (max-width:1060px) {