webapprentice

<h2>Geocode</h2>
<p>Enter Address <input type='text' id='address_in' size='50'> and hit Return</p>
<p>e.g. The White House, Washington DC</p>
<p>Latitude : <span id='latitude'></span></p>
<p>Longitude : <span id='longitude'></span></p>

<br>
<h2>Reverse Geocode</h2>
<p>Enter Latitude, Longitude Pair <input type='text' id='coordinates' size='50'> and hit Return</p>
<p>e.g. 38.897847,-77.036499</p>

webapprentice

<p>Web Apprentice Gravatar</p>
<pre>http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80</pre>
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80" alt='gravatar for Web Apprentice' />
<br> <br>
<p>Default Gravatar</p>
<pre>http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80</pre>
<img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80" alt='default gravatar'/>
<br> <br>
<p>Specific Default Gravatar - 'mm'</p>

webapprentice

<!-- depends on gems: sinatra/rack and useragent -->

<style>
th {
  white-space: nowrap;
  text-align: left;
  vertical-align: baseline;
  font-weight: normal;
  color: darkred;
}

webapprentice

  <style>
    .spinner {
      position: fixed;
      top: 50%;
      left: 50%;
    }
  </style>

  <script src="/javascripts/spin.js"></script>
  <script>

webapprentice

webapprentice

webapprentice

<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>OGRGeoJSON</name>
  <Placemark>
        <name>Seattle Space Needle</name>
      <Point><coordinates>-122.3491667,47.6202333</coordinates></Point>
  </Placemark>
  <Placemark>
        <name>Set of Lines</name>
        <Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>

webapprentice

  <!-- Code is derived from http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 by TheCodePlayer -->

  <p style='text-align: center'>The image used was taken by the NASA Cassini spacecraft and shows the moon
     <a href="http://www.nasa.gov/mission_pages/cassini/multimedia/pia12568.html">Mimas of planet Saturn</a>
  </p>
  <br>

  <div id="container">
    <!-- This is the magnifying glass which will contain the original/large version as a background image -->
    <div class="magnifier"></div>

webapprentice

<canvas id="canvas" width="800" height="256" ></canvas>

<p id="controls">
  <input type="button" id="start_button" value="Start">
  &nbsp; &nbsp;
  <input type="button" id="stop_button" value="Stop">
</p>

<!-- ----------------------------------------------------- -->

webapprentice

<!-- depends on jQuery which must have been loaded before these lines -->
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js"></script>

<script>
  jQuery(document).ready(function($) {
    $('a[rel*=facebox]').facebox({
          loadingImage : '/facebox/loading.gif',
          closeImage   : '/facebox/closelabel.png'
    });