Started adding slides showing media types and features

presentations/TPAC2012/index.html

@@ -40,12 +40,6 @@ <h2>Rocky start</h2>
         <p><img src="images/community-group.jpg"></p>
       </section>
 
-      <section>
-        <h2>...and leasons learned...</h2>
-
-        <p><img src="images/mqall.jpg" alt=""></p>
-      </section>
-
       <section>
         <h1>Use cases</h1>
 
@@ -60,25 +54,58 @@ <h2>Art Direction</h2>
       <section>
         <h2>Design breakpoints</h2>
         <pre><code contenteditable>
-
+@media all and (max-width: 16em) { &hellip; }
+@media all and (max-width: 32em) { &hellip; }
+@media all and (max-width: 41em) { &hellip; }
         </code></pre>
       </section>
 
       <section>
+      	<section>
         <h2>Matching media features and media types</h2>
+        </section>
+
+        <section>
+    	    <h3>Print</h3>
+            <p><img src="images/printed_image.jpg"></p>
+        </section>
+
+        <section>
+	        <h3>Monochrome</h3>
+            <p><img src="images/color_and_bw_graph.png"></p>
+        </section>
+
+        <section>
+	        <h3>Orientation</h3>
+            <video controls  poster="videos/screenrmx1.jpg" width="652" height="389"  onclick="if(/Android/.test(navigator.userAgent))this.play();">
+    <source src="videos/screenrmx1.m4v" type="video/mp4">
+    <source src="videos/screenrmx1.webm" type="video/webm">
+    <source src="videos/screenrmx1.ogv" type="video/ogg">
+    <source src="videos/screenrmx1.mp4">
+    <object type="application/x-shockwave-flash" data="videos/flashfox.swf" width="652" height="389" style="position:relative;">
+      <param name="movie" value="videos/flashfox.swf">
+      <param name="allowFullScreen" value="true">
+      <param name="flashVars" value="autoplay=false&amp;controls=true&amp;fullScreenEnabled=true&amp;loop=false&amp;poster=videos/screenrmx1.jpg&amp;src=screenrmx1.m4v">
+      <embed src="videos/flashfox.swf" width="652" height="389" style="position:relative;"  flashVars="autoplay=false&amp;controls=true&amp;fullScreenEnabled=true&amp;loop=false&amp;poster=videos/screenrmx1.jpg&amp;src=screenrmx1.m4v"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en"> 
+      <img alt="Responsive images on Meego website" src="videos/screenrmx1.jpg" style="position:absolute;left:0;" width="652" height="389" title="Video playback is not supported by your browser">
+    </object>
+  </video>
+        </section>
 
       </section>
 
       <section>
-        <h1>Relative units</h1>
+        <h2>Relative units</h2>
+      	<p><img src="images/em_mq_labelled.png"></p>
       </section>
 
       <section>
-        <h1>API to manipulate sources</h1>
+        <h2>API to manipulate sources</h2>
       </section>
 
       <section>
-        <h1>Image formats</h1>
+        <h2>Image formats</h2>
+
       </section>
 
 

presentations/TPAC2012/videos/.htaccess

@@ -0,0 +1,5 @@
+AddType video/ogg .ogv
+AddType video/mp4 .mp4
+AddType video/mp4 .m4v
+AddType video/webm .webm
+SetEnvIfNoCase Request_URI \.(ogv|mp4|m4v|webm)$ no-gzip dont-vary