Commits

David Chambers committed 998329f

Added slide show on the importance of URLs.

Comments (0)

Files changed (2)

urls-matter/index.html

+<!doctype html>
+
+<!--
+  Google HTML5 slide template
+
+  Authors: Luke Mahé (code)
+           Marcin Wichary (code and design)
+           
+           Dominic Mazzoni (browser compatibility)
+           Charles Chen (ChromeVox support)
+
+  URL: http://code.google.com/p/html5slides/
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Presentation</title>
+    <link rel="stylesheet" href="slides.css" />
+    <script src="http://html5slides.googlecode.com/svn/trunk/slides.js"></script>
+    <script src="http://use.typekit.com/iqr8qet.js"></script>
+    <script>try{Typekit.load();}catch(e){}</script>
+  </head>
+  <body style="display:none">
+    <section class="slides layout-regular template-default">
+
+      <article>
+        <h1>What is the most significant difference between native apps and web apps?</h1>
+        <ul class="build">
+          <li>Accessibility?</li>
+          <li>Performance?</li>
+          <li>Development speed?</li>
+          <li>Openness?</li>
+        </ul>
+      </article>
+
+      <article class="standalone">
+        <h1>URLs</h1>
+        <p class="build"><em>seriously</em></p>
+      </article>
+
+      <article>
+        <p>Any app can use HTTP.</p>
+        <p class="build"><span>But only <em>web</em> apps have URLs.</span></p>
+      </article>
+
+      <article>
+        <h1>Why are URLs important?</h1>
+        <p class="build"><span>URLs…</span></p>
+        <ul class="build">
+          <li>uniquely identify resources</li>
+          <li>describe content</li>
+          <li>suggest relationships</li>
+          <li>provide a means of navigation</li>
+        </ul>
+      </article>
+
+      <article>
+        <p>But most important of all…</p>
+        <div class="build">
+          <p>URLs make it possible to link <em>into</em><span class="block"> a web application.</span></p>
+        </div>
+      </article>
+
+      <article>
+        <p><a href="http://benward.me/blog/understand-the-web">Ben Ward described the web</a> as…</p>
+        <blockquote>[…] the beautiful interconnection of navigable content. If your website locks content away in a container, outside the reach of hyperlinks, you’re not building any kind of ‘web’ app. You’re doing something else.</blockquote>
+      </article>
+
+      <article>
+        <h1>Qualities of great URLs</h1>
+        <ul class="build">
+          <li>Permanence</li>
+          <li>Canonicalness</li>
+          <li>Descriptiveness</li>
+          <li>Hackability</li>
+          <li>Elegance</li>
+        </ul>
+      </article>
+
+      <article>
+        <h1>Good</h1>
+        <a class="url" href="https://github.com/jashkenas/docco">
+          <span>https://github.com/</span><span>jashkenas/docco</span>
+        </a>
+      </article>
+
+      <article>
+        <h1>Bad</h1>
+        <a class="bad url" href="http://www.amazon.com/Freakonomics-Rev-Ed-Riddles-ebook/dp/B000MAH66Y/ref=pd_ys_qtk_general_recs_3?pf_rd_p=1286318242&pf_rd_s=center-1&pf_rd_t=1501&pf_rd_i=home&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=026JKHG8WK2THRHPAFNG">
+          <span
+          >http://www.amazon.com/</span><span
+          >Freakonomics-Rev-Ed-Riddles-ebook/</span><span
+          >dp/B000MAH66Y/ref=pd_ys_qtk_general_recs_3</span><span
+          >?pf_rd_p=1286318242&pf_rd_s=center-1&pf_rd_t=1501</span><span
+          >&pf_rd_i=home&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=026JKHG8WK2THRHPAFNG</span>
+        </a>
+        <p class="caption">not canonical, not hackable, inelegant</p>
+      </article>
+
+      <article>
+        <h1>Ugly</h1>
+        <a href="http://t.co/icswhTD">http://t.co/icswhTD</a>
+        <p class="caption">not descriptive, not hackable, inelegant</p>
+      </article>
+
+      <article class="smaller">
+        <h1><a href="http://mango.io/">Mango</a></h1>
+        <p>File-based blogging app written in Django.</p>
+        <p>No coupling between slugs and titles.</p>
+        <p>A document's name determines its slug.</p>
+        <p>A document named <b>89=decorators-in-javascript.text</b>, for example, would exist at <b>/decorators-in-javascript/</b>.</p>
+        <p>Additionally, <b>/89/</b> would redirect to the document's canonical location.</p>
+      </article>
+
+      <article class="smaller">
+        <h1>Meaningful short URLs</h1>
+        <p>I got this idea from John Gruber.</p>
+        <p>Obtain a short domain name and simply redirect all requests to the canonical domain.</p>
+        <p><span class="block">In conjunction with Mango's short URLs,</span> this enables <b>http://dċd.ws/89/</b> to redirect to <b>http://davidchambersdesign.com/decorators-in-javascript/</b>.</p>
+      </article>
+
+      <article>
+        <h1><a href="http://bit.ly/dXYxGU">Hashify</a></h1>
+        <blockquote style="font-style:normal">Hashify does not solve a problem, it poses a question: <i>what becomes possible when one is able to store <strong>entire documents</strong> in URLs?</i></blockquote>
+      </article>
+
+      <article id="background-color">
+        <h1>background-color.info</h1>
+        <p class="url"><a href="http://background-color.info/#BADA55">http://background-color.info/#BADA55</a></p>
+        <p class="url"><a href="http://background-color.info/rgba(0,102,102,0.75)">http://background-color.info/rgba(0,102,102,0.75)</a></p>
+        <p class="url"><a href="http://background-color.info/url(http://twitter.com/phoenix/favicon.ico)"><span>http://background-color.info/</span><span>url(http://twitter.com/phoenix/favicon.ico)</span></a></p>
+      </article>
+
+      <article>
+        <h1>Relevant links</h1>
+        <ul>
+          <li><a href="http://www.w3.org/Provider/Style/URI.html">Cool URIs don't change</a></li>
+          <li><a href="http://benward.me/blog/understand-the-web">Understand The Web</a></li>
+          <li><a href="http://adactio.com/journal/4346/">Going Postel</a></li>
+          <li><a href="http://davidchambersdesign.com/shockingly-simple-url-shortening/">Shockingly simple URL shortening</a></li>
+        </ul>
+      </article>
+
+      <article>
+        <h1>Me</h1>
+        <ul>
+          <li><a href="https://bitbucket.org/davidchambers">bitbucket.org/davidchambers</a></li>
+          <li><a href="https://github.com/davidchambers">github.com/davidchambers</a></li>
+          <li><a href="http://twitter.com/davidchambers">twitter.com/davidchambers</a></li>
+        </ul>
+      </article>
+
+      <article class="standalone">
+        <p><i>thank you</i></p>
+      </article>
+
+    </section>
+  </body>
+</html>

urls-matter/slides.css

+body .slides article {
+  width: 820px;
+  height: 620px;
+  background: #fff !important;
+  padding: 80px 100px;
+  font: 42px/49px ff-tisa-web-pro, Georgia, serif;
+  color: #000;
+}
+
+body .slides article.standalone {
+  padding-top: 240px;
+  text-align: center;
+}
+
+body .slides article.standalone h1 {
+  margin-bottom: -0.25em;
+}
+
+body h1 {
+  margin: 0 0 0.75em;
+  padding-right: 8px;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: -1px;
+  color: #000;
+}
+
+body p {
+  margin-bottom: 20px;
+}
+
+body ul {
+  margin: 0;
+}
+
+body li {
+  margin: 0.25em 0;
+}
+
+body li::before {
+  margin: 3px 0 0 -1em;
+  content: "■";
+  font-size: 36px;
+  line-height: 49px;
+  color: #ccc;
+}
+
+body a,
+body a:-webkit-any-link {
+  text-decoration: none;
+}
+
+body article.smaller p {
+  font-size: 24px;
+  line-height: 28px;
+}
+
+blockquote {
+  margin: 36px 0 0;
+  font-style: italic;
+}
+
+.block {
+  display: block;
+}
+
+.caption {
+  font-style: italic;
+  font-size: 27px;
+}
+
+.url span {
+  display: block;
+  line-height: 1.2;
+}
+
+.url span+span:before {
+  position: relative;
+  content: "↳ ";
+  font-size: 36px;
+  color: #ccc;
+}
+
+.bad.url span+span {
+  font-size: 36px;
+  line-height: 42px;
+}
+
+.bad.url span+span:before {
+  top: 2px;
+}
+
+.bad.url span+span+span {
+  font-size: 27px;
+  line-height: 32px;
+}
+
+.bad.url span+span+span:before {
+  top: 6px;
+}
+
+.bad.url span+span+span+span {
+  font-size: 21px;
+  line-height: 30px;
+}
+
+.bad.url span+span+span+span:before {
+  top: 8px;
+}
+
+.bad.url span+span+span+span+span {
+  font-size: 15px;
+  line-height: 18px;
+}
+
+#background-color .url {
+  font-size: 27px;
+  line-height: 32px;
+}
+
+#background-color .url span+span {
+  line-height: 27px;
+}
+
+#background-color .url span+span:before {
+  top: 6px;
+}