Few updates I did on the plane. Still need to fix things pointed out by

@Wilto and  @anselmh

presentations/TPAC2012/index.html

@@ -48,6 +48,10 @@
 td.no{
 	color: red;
 }
+
+tr.unimportant{
+	opacity: .5;
+}
 </style>
 </head>
 
@@ -57,25 +61,46 @@
 
     <article class="slides">
       <section>
-        <h1><img style="background-color: white" src=
+        <h1><img style="background-color: #aaa" src=
         "images/RICG_Logo_Red.png" alt=
         "Responsive Images Community Group"></h1>
+
+        <h2>Marcos Caceres & Yoav Weiss</h2>
+        <h3> <a href="https://twitter.com/marcosc">@marcosc</a> | <a href="https://twitter.com/yoavweiss">@yoavweiss</a> | <a href="www.w3.org/community/respimg/">@respimg</a></h3> 
       </section>
 
       <section>
-        <h2>Rocky start</h2>
-
-        <p><img src="images/community-group.jpg" alt=
-        "They told us to make CG group!"></p>
+		<section>        
+        	<h1>Rocky start</h1>
+        	<p><img src="images/community-group.jpg" alt=
+        	"They told us to make CG group!"></p>
+        </section>
+        <section>
+         	<h2>Perseverance</h2>
+            <ol>
+                 <li class="fragment">Working through WHATWG feedback</li>
+                 <li class="fragment">Explored alternatives</li>
+                 <li class="fragment">Defined use cases</li> 
+            </ol>            
+        </section>
       </section>
 
 <section>
-	<h2>So we made...</h2>
-    <p><img src="images/site_v3.png" alt="The RICG website"></p>
+	<h1>So we did...</h1>
+    <section><p><a href="http://responsiveimages.org"><img src="images/site_v3.png" alt="The RICG website"></a></p>
+    </section>
+    <section>
+    <ol>
+    	 <li class="fragment">~170 participants and growing</li>
+    	 <li class="fragment">Second largest CG at W3C</li>
+         <li class="fragment">Open source community</li>
+    </ol>
+    </section>
 </section>
+
+
       <section>
         <h1>Use cases</h1>
-
         <p><img src="images/standards_process.jpg" alt=""></p>
       </section>
 
@@ -86,31 +111,52 @@ <h2>Art Direction</h2>
       </section>
 
       <section>
-        <h2>Design breakpoints</h2>
+<section>        <h2>Design breakpoints</h2>
         <pre>
-<code contenteditable="">
-@media all and (max-width: 16em) { … }
-@media all and (max-width: 32em) { … }
-@media all and (max-width: 41em) { … }
-        </code>
-</pre>
+<code contenteditable="">@media all and (max-width: 16em) { … }
+@media all and (max-width: 32em) { … }</code></pre>
+	<video controls  autoplay="autoplay" poster="index_test.files/html5video/screenrmx4.jpg" width="934" height="350"  onclick="if(/Android/.test(navigator.userAgent))this.play();">
+<source src="index_test.files/html5video/screenrmx4.m4v" type="video/mp4" />
+<source src="index_test.files/html5video/screenrmx4.webm" type="video/webm" />
+<object type="application/x-shockwave-flash" data="index_test.files/html5video/flashfox.swf" width="934" height="350" style="position:relative;">
+<param name="movie" value="index_test.files/html5video/flashfox.swf" />
+<param name="allowFullScreen" value="true" />
+<param name="flashVars" value="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;loop=false&amp;poster=index_test.files/html5video/screenrmx4.jpg&amp;src=screenrmx4.m4v" />
+ <embed src="index_test.files/html5video/flashfox.swf" width="934" height="350" style="position:relative;"  flashVars="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;loop=false&amp;poster=index_test.files/html5video/screenrmx4.jpg&amp;src=screenrmx4.m4v"	allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
+<img alt="breakpoints" src="index_test.files/html5video/screenrmx4.jpg" style="position:absolute;left:0;" width="934" height="350" title="Video playback is not supported by your browser" />
+</object>
+</video>
+</section>
+<section>
+	 <h2>Design breakpoints</h2>
+	<ul>
+    	<li class="fragment">Right image for right dimensions.</li>
+        <li class="fragment">Avoid resizing image (loss of detail/quality)</li>
+        <li class="fragment">Potentially save bandwidth.</li>
+    </ul>
+</section>
       </section>
 
       <section>
-        <section>
-          <h2>Matching media features and media types</h2>
-        </section>
-
+          <h2>Media types and features</h2>
         <section>
           <h3>Print</h3>
-
           <p><img src="images/printed_image.jpg"></p>
+          <ul>
+             <li>Half-tone/low-quality image</li>
+             <li>Crisp text</li>
+          </ul>
         </section>
 
         <section>
           <h3>Monochrome</h3>
-
+		  	
           <p><img src="images/color_and_bw_graph.png"></p>
+
+          <ul>
+		    <li>Communication with color is meanigless</li>	
+          </ul>
+
         </section>
 
         <section>
@@ -138,9 +184,10 @@ <h3>Orientation</h3><video controls poster=
             "videos/screenrmx1.jpg" style=
             "position:absolute;left:0;" width="652" height="389"
             title=
-            "Video playback is not supported by your browser">
+            "Video playback is not supported by your browser"></embed>
           </object></video>
         </section>
+
       </section>
 
       <section>
@@ -151,15 +198,19 @@ <h2>Relative units</h2>
 
       <section>
         <h2>API to manipulate sources</h2>
-
-        <ol>
+		 <section><p>
+         <img src="images/dynamic_capture.png" width="498" height="509"> 
+         <img src="images/dynamic_capture.png">
+         <img src="images/dynamic_capture.png">
+         </p></section>
+        <section><ol>
           <li class="fragment">Canvas</li>
 
           <li class="fragment"><code>getUserMedia()</code></li>
 
           <li class="fragment">Media Capture</li>
         </ol>
-      </section>
+</section>      </section>
 
       <section>
         <h2>Image formats</h2>
@@ -249,7 +300,7 @@ <h2>8</h2>
         <section>
         <h2>9</h2>
           <blockquote>
-            Polyfillable.
+            Poly-fill-able.
           </blockquote>
         </section>
 
@@ -286,25 +337,18 @@ <h2>What about the <code>srcset</code> attribute?</h2>
       <img src="images/dr_strangepicture.png">
 	  </section>
       <section>
+      <h2>Round 1 - FIGHT!</h2>
         <table>
-        <caption>
           <tr>
             <th>Requirement</th>
 
-            <th>Picture</th>
+            <th><code>&lt;picture&gt;</code></th>
 
-            <th>srcset</th>
+            <th><code>srcset</code></th>
           </tr>
 
-          <tr>
-            <td>Match MQ &amp; Update dynamically</td>
-
-            <td class="yes">✓</td>
 
-            <td class="no">✗</td>
-          </tr>
-
-          <tr>
+          <tr  class="unimportant">
 
 
             <td>Degrade gracefully</td>
@@ -314,69 +358,80 @@ <h2>What about the <code>srcset</code> attribute?</h2>
             <td class="yes">✓</td>
           </tr>
 
-          <tr>
-            <td>Accessible.</td>
+          <tr  class="unimportant">
+            <td>Accessible</td>
 
             <td class="yes">✓</td>
 
             <td class="yes">✓</td>
           </tr>
 
-          <tr>
-      
-
-            <td>No server-side processing</td>
+
+ 		
+          <tr  class="unimportant">
+            <td>Support art direction</td>
 
             <td class="yes">✓</td>
 
-            <td class="no">✗</td>
+            <td class="yes">✓</td>
           </tr>
+           <tr class="unimportant">
+            <td>Polyfillable</td>
 
-          <tr>
-
+            <td class="yes">✓</td>
 
-            <td>Simple API</td>
+            <td class="yes">✓</td>
+          </tr>
+
+          <tr>
+            <td>Match MQ &amp; update dynamically</td>
 
             <td class="yes">✓</td>
 
             <td class="no">✗</td>
           </tr>
-
+          
           <tr>
-            <td>Support art direction</td>
+
 
-            <td class="yes">✓</td>
+            <td>No server-side processing</td>
 
             <td class="yes">✓</td>
-          </tr>
 
+            <td class="no">✗</td>
+          </tr>
           <tr>
-            <td>Breakpoint friendly</td>
+
+            <td>Simple API</td>
 
             <td class="yes">✓</td>
 
             <td class="no">✗</td>
           </tr>
 
+
+
           <tr>
-            <td>Greacefully support new formats</td>
+            <td>Breakpoint friendly</td>
 
             <td class="yes">✓</td>
 
             <td class="no">✗</td>
           </tr>
 
           <tr>
-            <td>Polyfillable</td>
+            <td>Support different formats</td>
 
             <td class="yes">✓</td>
 
-            <td class="yes">✓</td>
+            <td class="no">✗</td>
           </tr>
+
+
         </table>
       </section>
 	  <section>
-      	<h2>Lets merge them!</h2>
+      	<h2><span style="color: red" class="love">♥</span>Let's merge them!<span style="color: red" class="love">♥</span></h2>
         <section>
         <img src="images/double_rainbow.jpg">
         </section>
@@ -400,7 +455,10 @@ <h2>Lets merge them!</h2>
         </section>
       </section>
       <section>
-        <h2>Photo Attributions</h2>
+        <h1>Thanks! Questions?</h1>
+
+        <small>
+        <p>Photos from:</p>
         <ul>
           <li>
             <a href="http://w3cmemes.tumblr.com/">W3C memes</a>
@@ -410,6 +468,7 @@ <h2>Photo Attributions</h2>
           "http://www.flickr.com/photos/megpig/">meganjo</a>
           </li>
         </ul>
+        </small>
       </section>
     </article>
   </div><script src="lib/js/head.min.js">

presentations/TPAC2012/index_test.files/html5video/.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