Picture and RTCDataChannel tweaks

samdutton · Jan 4, 2015 · c3eb946 · c3eb946
1 parent f3c45ac
commit c3eb946
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 134 deletions.
diff --git a/index.html b/index.html
@@ -91,8 +91,8 @@ <h1>simpl.info</h1>
   <a href="useragent" title="navigator.userAgent">navigator.userAgent</a>
   <a href="notification" title="Notification API example">Notification</a>
   <a href="pagevisibility" title="Page Visibility API example">Page Visibility API</a>
-  <a href="pictureartdirection" title="Picture element art direction example">&lt;picture&gt; for art direction</a>
-  <a href="picturesources" title="Picture element alternative sources example">&lt;picture&gt; with alternative sources</a>
+  <a href="pictureart" title="Picture element art direction example">&lt;picture&gt; for art direction</a>
+  <a href="picturetype" title="Picture element alternative sources example">&lt;picture&gt; with alternative file types</a>
 
   <a href="postmessage" title="postMessage() example">postMessage()</a>
   <a href="promises" title="Promises example">promises</a>
@@ -102,7 +102,7 @@ <h1>simpl.info</h1>
   <a href="rtcpeerconnection" title="RTCPeerConnection">RTCPeerConnection (WebRTC)</a>
   <a href="eventsource" title="EventSource (Server-Sent Events) example">Server-Sent Events (aka EventSource)</a>
   <a href="serviceworker" title="sessionStorage example">ServiceWorker</a>
-  <a href="sizeswvalues" title="sizes element with srcset using w values">&lt;sizes&gt; with srcset using w values</a>
+  <a href="sizeswvalues" title="img element: sizes attribute with srcset using w values">sizes attribute with srcset using w values</a>
   <a href="sessionstorage" title="sessionStorage example">sessionStorage</a>
   <a href="srcsetwvalues" title="img element with srcset attribute using w values">srcset: using w values with &lt;img&gt;</a>
   <a href="srcsetxvalues" title="img element with srcset attribute using x values">srcset: using x values with &lt;img&gt;</a>

diff --git a/pictureartdirection/horses_large.jpg b/pictureartdirection/horses_large.jpg
diff --git a/pictureartdirection/horses_medium.jpg b/pictureartdirection/horses_medium.jpg
diff --git a/pictureartdirection/horses_small.jpg b/pictureartdirection/horses_small.jpg
diff --git a/pictureartdirection/index.html b/pictureartdirection/index.html
diff --git a/picturesources/index.html b/picturesources/index.html
diff --git a/picturesources/js/main.js b/picturesources/js/main.js
diff --git a/picturesources/kittens.jpg b/picturesources/kittens.jpg
diff --git a/picturesources/kittens.webp b/picturesources/kittens.webp
diff --git a/rtcdatachannel/js/main.js b/rtcdatachannel/js/main.js
@@ -16,8 +16,8 @@ startButton.onclick = createConnection;
 sendButton.onclick = sendData;
 closeButton.onclick = closeDataChannels;
 
-var dataChannelSend = document.getElementById('#dataChannelSend');
-var dataChannelReceive = document.getElementById('#dataChannelReceive');
+var dataChannelSend = document.getElementById('dataChannelSend');
+var dataChannelReceive = document.getElementById('dataChannelReceive');
 
 
 function trace(text) {

diff --git a/sizeswvalues/index.html b/sizeswvalues/index.html
@@ -12,7 +12,7 @@
 
     <base target="_blank">
 
-    <title>img with sizes attribute</title>
+    <title>img with srcset and sizes</title>
 
     <link rel="stylesheet" href="../css/main.css" />
 
@@ -28,12 +28,15 @@
 
     <div id="container">
 
-      <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with sizes attribute</h1>
+      <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with srcset and sizes</h1>
 
+      <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="50vw" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
 
-      <img src="kittens_small.jpg" srcset="kittens_small.jpg 750w, kittens_large.jpg 1500w" sizes="50vw" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
+      <p>The sizes attribute enables the browser to choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the image display width (set to be 50% of viewport width) and screen resolution.</p>
 
-      <p>A browser that supports the srcset and sizes attributes will request <a href="kittens_small.jpg" title="750px wide image file">kittens_small.jpg</a> for smaller viewport sizes or <a href="kittens_large.jpg" title="1500px wide image file">kittens_large.jpg</a> for larger viewport sizes, depending on the pixel density of the display.</p>
+      <p><a href="../srcsetwvalues" title="img element with srcset using w values, but no sizes attribute">Without the sizes attribute</a> the browser can only take into account <strong>viewport</strong> width, not image <strong>display</strong> width.</p>
+
+      <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
 
       <a href="//github.com/samdutton/simpl/blob/master/sizeswvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
 

diff --git a/sizeswvalues/kittens_large.jpg b/sizeswvalues/kittens_large.jpg
diff --git a/sizeswvalues/kittens_small.jpg b/sizeswvalues/kittens_small.jpg
diff --git a/srcsetwvalues/index.html b/srcsetwvalues/index.html
@@ -1,27 +1,48 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>Udacity RI: srcset w values</title>
+  <!DOCTYPE html>
+  <html>
+  <head>
 
-  <style>
-    body {
-      align-items: center;
-      display: flex;
-      height: 100vh;
-      justify-content: center;
-    }
-    img {
-      width: 100vw;
-    }
-  </style>
+    <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
+    <meta name="author" content="//samdutton.com">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
+    <meta itemprop="image" content="/icon_192x192.png">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta id="theme-color" name="theme-color" content="#fff">
 
-</head>
+    <base target="_blank">
 
-<body>
+    <title>img with srcset using w values</title>
 
-  <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Wallaby" />
+    <link rel="stylesheet" href="../css/main.css" />
 
-</body>
+    <style>
+      img {
+        width: 50vw;
+      }
+    </style>
 
-</html>
+  </head>
+
+  <body>
+
+    <div id="container">
+
+      <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with srcset using w&nbsp;values</h1>
+
+      <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
+
+      <p>A browser that supports the srcset attribute will choose <a href="small.jpg" title="500px wide image file">small.jpg</a>, <a href="medium.jpg" title="1000px wide image file">medium.jpg</a> or <a href="large.jpg" title="1500px wide image file">large.jpg</a>, depending on the viewport width and the screen resolution.</p>
+
+      <p>Only the <strong>viewport</strong> width is taken into account by the browser when choosing which image file to request. The <a href="../sizeswvalues" title="img element with srcset and sizes attributes">sizes example</a> enables the browser to choose the appropriate file given the <strong>display</strong> width of the image.</p>
+
+      <p>The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
+
+      <a href="//github.com/samdutton/simpl/blob/master/srcsetwvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+
+    </div>
+
+    <script src="../js/lib/ga.js"></script>
+
+  </body>
+  </html>
diff --git a/srcsetwvalues/large.jpg b/srcsetwvalues/large.jpg
diff --git a/srcsetwvalues/medium.jpg b/srcsetwvalues/medium.jpg
diff --git a/srcsetwvalues/small.jpg b/srcsetwvalues/small.jpg
diff --git a/srcsetxvalues/index.html b/srcsetxvalues/index.html
@@ -2,37 +2,39 @@
 <html>
 <head>
 
-<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
-<meta name="author" content="//samdutton.com">
-<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
-<meta itemprop="image" content="/icon_192x192.png">
-<meta name="mobile-web-app-capable" content="yes">
-<meta id="theme-color" name="theme-color" content="#fff">
+  <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
+  <meta name="author" content="//samdutton.com">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
+  <meta itemprop="image" content="/icon_192x192.png">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta id="theme-color" name="theme-color" content="#fff">
 
-<base target="_blank">
+  <base target="_blank">
 
-<title>img using srcset with x values</title>
+  <title>img with srcset using x values</title>
 
-<link rel="stylesheet" href="../css/main.css" />
+  <link rel="stylesheet" href="../css/main.css" />
 
 </head>
 
 <body>
 
-<div id="container">
+  <div id="container">
 
-<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; using srcset with x values</h1>
+    <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> &lt;img&gt; with srcset using x values</h1>
 
-  <img src="kittens_1x.jpg" srcset="kittens_1x.jpg 1x, kittens_2x.jpg 2x" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
+    <img src="kittens_1x.jpg" srcset="kittens_1x.jpg 1x, kittens_2x.jpg 2x" alt="Lias and Little Puss: two ten week old grey tabby kittens" />
 
-  <p>A browser that supports srcset will request <a href="kittens_1x.jpg" title="1x image file">kittens_1x.jpg</a> on a 1x display or <a href="kittens_2x.jpg" title="2x image file">kittens_2x.jpg</a> on a 2x display.</p>
+    <p>A browser that supports srcset will request <a href="kittens_1x.jpg" title="1x image file">kittens_1x.jpg</a> on a 1x display or <a href="kittens_2x.jpg" title="2x image file">kittens_2x.jpg</a> on a 2x display.</p>
 
-<a href="//github.com/samdutton/simpl/blob/master/srcsetxvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+    <p>The <a href="../sizeswvalues" title="Using the srcset and sizes">sizes example</a> shows how to use srcset with w values and the sizes attribute. The <a href="../pictureart" title="Using the picture element for art direction">art direction</a> and <a href="../picturetype" title="Using the picture element with alternative sources">file types</a> examples show ways to use the picture element.</p>
 
-</div>
+    <a href="//github.com/samdutton/simpl/blob/master/srcsetxvalues/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
 
-<script src="../js/lib/ga.js"></script>
+  </div>
+
+  <script src="../js/lib/ga.js"></script>
 
 </body>
 </html>