presentations/TPAC2012/index.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta name="generator" content=
  "HTML Tidy for HTML5 (experimental) for Mac OS X https://github.com/w3c/tidy-html5/tree/68a9e74">
  <meta charset="utf-8">

  <title>TPAC 2012 - Responsive Images</title>
  <meta name="description" content="Presentation for TPAC 2012">
  <meta name="author" content="Marcos Cáceres">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content=
  "black-translucent">
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/default.css" id="theme">
  <!-- For syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">
  <!-- If the query includes 'print-pdf', use the PDF print sheet -->

  <script>
  document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
  </script><!--[if lt IE 9]>
                <script src="lib/js/html5shiv.js"></script>
                <![endif]-->
<style>
table { 
	width: 100%; 
	border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
	background: #222; 
}
th { 
	background: #333; 
	color: white; 
	font-weight: bold; 
}
td, th { 
	padding: 1em; 
	border: 1px solid #ccc; 
}
td.yes{
	color: green;
	text-align:center;
}
td.no{
	color: red;
}

tr.unimportant{
	opacity: .5;
}
</style>
</head>

<body>
  <div class="reveal">
    <!-- Any section element inside of this container is displayed as a slide -->

    <article class="slides">
      <section>
        <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>
		<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>
	<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>

      <section>
        <h2>Art Direction</h2>

        <p><img src="images/art_direction.png"></p>
  		<ul>
        	<li class="">different crops</li>
        </ul>
      </section>

      <section>
<section>        <h2>Design breakpoints</h2>
        <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>
          <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>
          <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"></embed>
          </object></video>
        </section>
        
      </section>

      <section>
        <h2>Relative units</h2>

        <p><img src="images/em_mq_labelled.png"></p>
      </section>

      <section>
        <h2>API to manipulate sources</h2>
		 <section><p>
         <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>
        <h2>Image formats</h2>

        <ol>
          <li class="fragment">JPEG2000</li>
          <li class="fragment">WebP</li>

          <li class="fragment">JPEG-XR</li>

          <li class="fragment">Future Format</li>
        </ol>
      </section>

      <section>
        <section>
        <h1>9 Requirements</h1>
		</section>
        <section>
        <h2>1</h2> 
          <blockquote>
            Match image sources with media queries - update the
            source of an image dynamically.
          </blockquote>
        </section>

        <section>
        <h2>2</h2>
          <blockquote>
            Degrade gracefully.
          </blockquote>
        </section>

        <section>
        <h2>3</h2>
          <blockquote>
            Be accessible <br> (text fallback, ARIA-compatible).
          </blockquote>
        </section>

        <section>
        <h2>4</h2>
          <blockquote>
            No server-side processing. But can still work with
            content negotiation.
          </blockquote>
        </section>

        <section>
        <h2>5</h2>
          <blockquote>
            Simple API.
          </blockquote>

          <ul>
            <li class="fragment">What's the current source?</li>

            <li class="fragment">What media matched?</li>

            <li class="fragment">Add, remove, and update image
            sources.</li>

            <li class="fragment">Events.</li>
          </ul>
        </section>

        <section>
        <h2>6</h2>
          <blockquote>
            Support art direction<br> (not just resolution switching).
          </blockquote>
          
        </section>

        <section>
        <h2>7</h2>
          <blockquote>
            Breakpoint friendly.
          </blockquote>
        </section>

        <section>
        <h2>8</h2>
          <blockquote>
            Support emerging formats.
          </blockquote>
        </section>

        <section>
        <h2>9</h2>
          <blockquote>
            Poly-fill-able.
          </blockquote>
        </section>
    
	  </section>
      <section>
        <h2>The &lt;picture&gt; Element</h2>
        <section><pre>
<code contenteditable="" class=
"xml">&lt;picture width="500" height="500"&gt;
     &lt;source media="(min-width: 45em)" 
                src="large.jpg"&gt;
   
     &lt;source media="(min-width: 18em)" 
                src="med.jpg"&gt;
   
     &lt;source src="small.jpg"&gt;
   
     &lt;img src="small.jpg" alt=""&gt;
   
     &lt;p&gt;Accessible text&lt;/p&gt; 
&lt;/picture&gt;  
     </code></section>
     <section>
  	 <h2>But can also suck :( </h2>
     <p>Yay! Vendor prefixes!</p> 
     <pre><code>&lt;picture width="500" height="500"&gt;
     &lt;source media="
(-webkit-min-device-pixel-ratio: 1.5), 
(min--moz-device-pixel-ratio: 1.5), 
(-o-min-device-pixel-ratio: 3/2), 
(min-device-pixel-ratio: 1.5), 
(min-resolution: 1.5dppx)">
&lt;/picture&gt;
     </code></pre>
     </section>
     
</pre>
      </section>

      <section>
        <h1>Live Demo</h1>
        <p><a href="https://github.com/yoavweiss/RespImg-WebCore/downloads"><img src="images/ricg_chromium.png" alt="Chromium build"></a>
        <p><a href="https://github.com/yoavweiss/RespImg-WebCore/downloads">Grab our Chromium build!</a></p>
      </section>
	
      <section>
      <h2>What about the <code>srcset</code> attribute?</h2>
      <img src="images/dr_strangepicture.png">
	  </section>
      <section>
      <h2>Round 1 - FIGHT!</h2>
        <table>
          <tr>
            <th>Requirement</th>

            <th><code>&lt;picture&gt;</code></th>

            <th><code>srcset</code></th>
          </tr>


          <tr  class="unimportant">
     

            <td>Degrade gracefully</td>

            <td class="yes">✓</td>

            <td class="yes">✓</td>
          </tr>

          <tr  class="unimportant">
            <td>Accessible</td>

            <td class="yes">✓</td>

            <td class="yes">✓</td>
          </tr>

          
          <tr  class="unimportant">
            <td>Support art direction</td>

            <td class="yes">✓</td>

            <td class="yes">✓</td>
          </tr>
           <tr class="unimportant">
            <td>Polyfillable</td>

            <td class="yes">✓</td>

            <td class="yes">✓</td>
          </tr>
      
          <tr>
            <td>Match Breakpoints &amp; update dynamically</td>

            <td class="yes">✓</td>

            <td class="no">✗ <span style="color: green">✓</span></td>
          </tr>
          
          <tr>
      

            <td>No server-side processing</td>

            <td class="yes">✓</td>

            <td class="no">✗</td>
          </tr>
          <tr>

            <td>Simple API</td>

            <td class="yes">✓</td>

            <td class="no">✗</td>
          </tr>

       
          <tr>
            <td>[CSS] Breakpoint friendly</td>

            <td class="yes">✓</td>

            <td class="no">✗</td>
          </tr>

          <tr>
            <td>Support different formats</td>

            <td class="yes">✓</td>

            <td class="no">✗</td>
          </tr>

      
        </table>
      </section>
	  <section>
      	<h2><span style="color: red" class="love">♥</span>Let's combine them!<span style="color: red" class="love">♥</span></h2>
        <section>
        <img src="images/double_rainbow.jpg">
        </section>
        
        <section>
          <pre><code contenteditable class="xml">&lt;picture&gt;
 &lt;source 
       media=&quot;(min-width: 45em)&quot; 
       srcset=&quot;large.jpg, large-hd.jpg 2x&quot;&gt;
    
 &lt;source 
       media=&quot;(min-width: 18em)&quot;
       srcset=&quot;med.jpg, med-hd.jpg 2x&quot;&gt;

 &lt;source 
        srcset=&quot;small.jpg, small-hd.jpg 2x&quot;&gt;
  
  &lt;img src=&quot;small.jpg&quot; alt=&quot;&quot;&gt;

&lt;/picture&gt;</code></pre>
        </section>
      </section>
      <section>
        <h1>Thanks! Questions?</h1>
        
        <p>Oh! ... can we have a mailing list?</p>
        
        <small>
        <p>Photos from:</p>
        <ul>
          <li>
            <a href="http://w3cmemes.tumblr.com/">W3C memes</a>
          </li>

          <li>Double rainbow, by <a href=
          "http://www.flickr.com/photos/megpig/">meganjo</a>
          </li>
        </ul>
        </small>
      </section>
    </article>
  </div><script src="lib/js/head.min.js">
</script> <script src="js/reveal.min.js">
</script> <script>

                        // Full list of configuration options available here:
                        // https://github.com/hakimel/reveal.js#configuration
                        Reveal.initialize({
                                controls: true,
                                progress: true,
                                history: true,

                                theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
                                transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none

                                // Optional libraries used to extend on reveal.js
                                dependencies: [
                                        { src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
                                        { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
                                        { src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                                        { src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                                        { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
                                        { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
                                ]
                        });
  </script>
</body>
</html>