Added more slides, and potential images to use… still lots to be done

ResponsiveImagesCG · Oct 28, 2012 · f422697 · f422697
1 parent 658ee4a
commit f422697
Show file tree

Hide file tree

Showing 12 changed files with 408 additions and 95 deletions.
diff --git a/presentations/TPAC2012/images/art_direction.png b/presentations/TPAC2012/images/art_direction.png
diff --git a/presentations/TPAC2012/images/choose-meego320.png b/presentations/TPAC2012/images/choose-meego320.png
diff --git a/presentations/TPAC2012/images/color_and_bw_graph.png b/presentations/TPAC2012/images/color_and_bw_graph.png
diff --git a/presentations/TPAC2012/images/em_mq_labelled.png b/presentations/TPAC2012/images/em_mq_labelled.png
diff --git a/presentations/TPAC2012/images/em_query.png b/presentations/TPAC2012/images/em_query.png
diff --git a/presentations/TPAC2012/images/home-feature.png b/presentations/TPAC2012/images/home-feature.png
diff --git a/presentations/TPAC2012/images/obama_crop.png b/presentations/TPAC2012/images/obama_crop.png
diff --git a/presentations/TPAC2012/images/obama_scaled.png b/presentations/TPAC2012/images/obama_scaled.png
diff --git a/presentations/TPAC2012/images/obama_small.jpg b/presentations/TPAC2012/images/obama_small.jpg
diff --git a/presentations/TPAC2012/images/printed_image.jpg b/presentations/TPAC2012/images/printed_image.jpg
diff --git a/presentations/TPAC2012/index.clean.html b/presentations/TPAC2012/index.clean.html
@@ -0,0 +1,186 @@
+<!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]-->
+</head>
+
+<body>
+  <div class="reveal">
+    <!-- Any section element inside of this container is displayed as a slide -->
+
+    <article class="slides">
+      <section>
+        <p><img src="images/RICG_Logo_Reverse.png"></p>
+      </section>
+
+      <section>
+        <h2>Rocky start</h2>
+
+        <p><img src="images/community-group.jpg"></p>
+      </section>
+
+      <section>
+        <h2>...and leasons learned...</h2><img src=
+        "images/mqall.jpg">
+      </section>
+
+      <section>
+        <h2>Use cases</h2><img src="images/standards_process.jpg">
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST afford developers the ability to
+          match image sources with particular media features and/or
+          media types - and have the user agent update the source
+          of an image as the media features and media types of the
+          browser environment change dynamically.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST degrade gracefully on legacy user
+          agents by, for example, relying on HTML's built-in
+          fallback mechanisms and legacy elements.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST afford developers with the ability
+          to include content that is accessible to assistive
+          technologies.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST NOT require server-side processing
+          to work. However, if required, server-side adaptation can
+          still occur through content negotiation or similar
+          techniques (i.e., they are not mutually exclusive).</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST provide developers with a means to
+          programmatically interface with image resources, as well
+          as access relevant attributes and methods that make the
+          solution practical to work with (i.e., it shouldn't
+          require complicated Regex or nested loops to manipulate
+          values). In addition, the solution MUST provide means to
+          hook into relevant events (e.g., loading, errors, etc.).
+          In any case, an API SHOULD provide a means to: Determine
+          the current source of the image. Determine what
+          environmental condition caused the current source to be
+          selected (reflected as, for example, a CSS Media Query).
+          Add, remove, and update image sources.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST afford developers the ability to
+          explicitly define different image versions as opposed to
+          only different resolutions of the same image.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST afford developers the ability to
+          define the breakpoints for images as either minimum
+          values (mobile first) or maximum values (desktop first)
+          to match the media queries used in their design.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MUST function in such a way that is
+          responsive to environmental changes in relative units
+          (e.g., when the user increases the base font size of the
+          browser by pressing ctrl+ or ctrl-).</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>The solution MAY allow developers to specify images in
+          different formats (or specify the format of a set of
+          image sources).</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <blockquote>
+          <p>To provide compatibility with legacy user agents, it
+          SHOULD be possible for developers to polyfill the
+          solution.</p>
+        </blockquote>
+      </section>
+
+      <section>
+        <h2>Photo Attributions</h2>
+
+        <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>
+      </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>