First commit

Apress · Oct 16, 2016 · f2e9db3 · f2e9db3
commit f2e9db3
Show file tree

Hide file tree

Showing 198 changed files with 21,678 additions and 0 deletions.
diff --git a/9781430240389.jpg b/9781430240389.jpg
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,27 @@
+Freeware License, some rights reserved
+
+Copyright (c) 2012 Scott Preston
+
+Permission is hereby granted, free of charge, to anyone obtaining a copy 
+of this software and associated documentation files (the "Software"), 
+to work with the Software within the limits of freeware distribution and fair use. 
+This includes the rights to use, copy, and modify the Software for personal use. 
+Users are also allowed and encouraged to submit corrections and modifications 
+to the Software for the benefit of other users.
+
+It is not allowed to reuse,  modify, or redistribute the Software for 
+commercial use in any way, or for a user�s educational materials such as books 
+or blog articles without prior permission from the copyright holder. 
+
+The above copyright notice and this permission notice need to be included 
+in all copies or substantial portions of the software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS OR APRESS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+#Apress Source Code
+
+This repository accompanies [*Learn HTML5 and JavaScript for iOS*](http://www.apress.com/9781430240389) by Scott Preston (Apress, 2012).
+
+![Cover image](9781430240389.jpg)
+
+Download the files as a zip using the green button, or clone the repository to your machine using Git.
+
+##Releases
+
+Release v1.0 corresponds to the code in the published book, without corrections or updates.
+
+##Contributions
+
+See the file Contributing.md for more information on how you can contribute to this repository.
diff --git a/__MACOSX/._index.html b/__MACOSX/._index.html
diff --git a/__MACOSX/chapter1/._index.html b/__MACOSX/chapter1/._index.html
diff --git a/__MACOSX/chapter11/._index.html b/__MACOSX/chapter11/._index.html
diff --git a/__MACOSX/chapter13/._abtest.html b/__MACOSX/chapter13/._abtest.html
diff --git a/__MACOSX/chapter13/._benchmark.html b/__MACOSX/chapter13/._benchmark.html
diff --git a/__MACOSX/chapter13/._index.html b/__MACOSX/chapter13/._index.html
diff --git a/__MACOSX/chapter13/._jasmine.html b/__MACOSX/chapter13/._jasmine.html
diff --git a/__MACOSX/chapter13/._network.html b/__MACOSX/chapter13/._network.html
diff --git a/__MACOSX/chapter13/._pag1.html b/__MACOSX/chapter13/._pag1.html
diff --git a/__MACOSX/chapter13/._tdd.html b/__MACOSX/chapter13/._tdd.html
diff --git a/__MACOSX/chapter13/._watir.html b/__MACOSX/chapter13/._watir.html
diff --git a/__MACOSX/chapter2/._index.html b/__MACOSX/chapter2/._index.html
diff --git a/__MACOSX/chapter2/._structure.html b/__MACOSX/chapter2/._structure.html
diff --git a/__MACOSX/chapter3/._basics1.html b/__MACOSX/chapter3/._basics1.html
diff --git a/__MACOSX/chapter3/._basics2.html b/__MACOSX/chapter3/._basics2.html
diff --git a/__MACOSX/chapter3/._index.html b/__MACOSX/chapter3/._index.html
diff --git a/__MACOSX/chapter3/._iosselect.html b/__MACOSX/chapter3/._iosselect.html
diff --git a/__MACOSX/chapter3/._ipad.html b/__MACOSX/chapter3/._ipad.html
diff --git a/__MACOSX/chapter3/._orient.html b/__MACOSX/chapter3/._orient.html
diff --git a/__MACOSX/chapter3/._pag2.html b/__MACOSX/chapter3/._pag2.html
diff --git a/__MACOSX/chapter3/._retina.html b/__MACOSX/chapter3/._retina.html
diff --git a/__MACOSX/chapter3/._sample_buttons.html b/__MACOSX/chapter3/._sample_buttons.html
diff --git a/__MACOSX/chapter3/._sample_header.html b/__MACOSX/chapter3/._sample_header.html
diff --git a/__MACOSX/chapter3/._sample_list.html b/__MACOSX/chapter3/._sample_list.html
diff --git a/__MACOSX/chapter3/._sample_list2.html b/__MACOSX/chapter3/._sample_list2.html
diff --git a/__MACOSX/chapter3/._sample_list3.html b/__MACOSX/chapter3/._sample_list3.html
diff --git a/__MACOSX/chapter3/css/._basic.css b/__MACOSX/chapter3/css/._basic.css
diff --git a/__MACOSX/chapter4/._index.html b/__MACOSX/chapter4/._index.html
diff --git a/__MACOSX/chapter6/._events.html b/__MACOSX/chapter6/._events.html
diff --git a/__MACOSX/chapter6/._events2.html b/__MACOSX/chapter6/._events2.html
diff --git a/__MACOSX/chapter6/._index.html b/__MACOSX/chapter6/._index.html
diff --git a/__MACOSX/chapter9/._index.html b/__MACOSX/chapter9/._index.html
diff --git a/chapter1/fullscreen.html b/chapter1/fullscreen.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chapter 1 - Full Screen Example</title>
+</head>
+<body>
+<h1>Chapter 1 - Full Screen Example</h1>
+<hr>
+<h1>No Viewport Setting</h1>
+
+<p>This is an example of a page with no viewport &lt;META&gt; tag.</p>
+
+<div><img src="images/sample_300.png"/></div>
+
+</body>
+</html>
diff --git a/chapter1/images/sample_300.png b/chapter1/images/sample_300.png
diff --git a/chapter1/index.html b/chapter1/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chapter 1 - Getting Started</title>
+</head>
+<body>
+<h1>Chapter 1 - Examples</h1>
+<ol>
+    <li><a href="redirect.html">Redirect</a> - Ways to redirect to your mobile site.</li>
+    <li><a href="fullscreen.html">FullScreen</a> - Example of a website desktop version.</li>
+    <li><a href="viewport.html">Viewport</a> - Fullscreen example with &lt;meta&gt; tag viewport.</li>
+    <li><a href="samplehome.html">Sample Home</a> Sample home page of GrandviewAve.com</li>
+</ol>
+<h4>Putting It All Together</h4>
+<ul>
+    <li>The example web site is <a href="http://www.grandviewave.com">www.grandviewave.com</a></li>
+    <li>The example mobile site is <a href="http://www.grandviewave.com/m">www.grandviewave.com/m</a></li>
+</ul>
+</body>
+</html>
diff --git a/chapter1/redirect.html b/chapter1/redirect.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chapter 1 - Browser Redirect Example</title>
+</head>
+<body>
+<h1>Chapter 1 - Browser Redirect Example</h1>
+<hr>
+<h1>Apache Redirect (Domain)</h1>
+<pre>
+//This code for redirecting user to the mobile site unless there is a cookie
+RewriteEngine On
+RewriteCond %{HTTP_USER_AGENT} "iphone|ipod|ipad|googlebot-mobile" [NC]
+RewriteCond %{HTTP_COOKIE} !^.*nomobile=true.*$
+RewriteRule ^.*$ https://m.domain.com [R=301]
+</pre>
+<h1>Apache Redirect (Directory)</h1>
+<pre>
+RewriteCond %{REQUEST_URI} !^/m/.*$
+RewriteCond %{HTTP_USER_AGENT} "iphone|ipod|ipad|googlebot-mobile" [NC]
+RewriteCond %{HTTP_COOKIE} !^.*nomobile=true.*$
+RewriteRule ^(.*)$ /m/ [L,R=301]
+</pre>
+
+<h1>JavaScript Redirect</h1>
+
+<p>This is an example of redirecting based on your device.</p>
+<script type="text/javascript">
+
+    var isiPhone = navigator.userAgent.match(/iPhone/i);
+    var isiPod = navigator.userAgent.match(/iPod/i);
+    var isiPad = navigator.userAgent.match(/iPad/i);
+
+    // check for mobile iOS device
+    if (isiPhone || isiPod || isiPad) {
+        if (!bypassRedirect()) {
+            alert("redirecting user here");
+            //	window.location = '/m';
+        } else {
+            alert("user bypass message is true");
+        }
+    } else {
+        alert("not a mobile device");
+    }
+
+    function bypassRedirect() {
+        return false;
+        // this logic will be added later in Chapter 12.
+    }
+
+</script>
+
+</body>
+<html>
diff --git a/chapter1/samplehome.html b/chapter1/samplehome.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Sample Header?</title>
+    <meta name="viewport" content="width=device-width"/>
+</head>
+<body>
+<h1>Sample Header?</h1>
+<hr>
+<div><img src="images/sample_300.png"/></div>
+<p>Navigation?</p>
+<ul>
+    <li>Businesses</li>
+    <li>Near Me</li>
+    <li>Sales &amp; Specials</li>
+    <li>Parking</li>
+    <li>The Avenue Hunt</li>
+    <li>Audio &amp; Video</li>
+    <li>About</li>
+    <li>Contact</li>
+</ul>
+</body>
+</html>
diff --git a/chapter1/viewport.html b/chapter1/viewport.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+    <title>Chapter 1 - ViewPort Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width"/>
+</head>
+<body>
+<h1>Chapter 1 - ViewPort Example</h1>
+<hr>
+<h1>With Viewport Setting</h1>
+
+<p>This is an example of a page with the viewport &lt;META&gt; tag set to:</p>
+<pre>
+&lt;meta name="viewport" content="width=device-width"&gt;
+</pre>
+<div><img src="images/sample_300.png"/></div>
+
+</body>
+</html>
diff --git a/chapter10/audio.html b/chapter10/audio.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+    <title>Chapter 10 - Audio Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width"/>
+</head>
+<body>
+<h1><a href="index.html">Chapter 10 - Audio Example</a></h1>
+<hr>
+<h2>Audio Test</h2>
+
+<p>The example below will play an audio file.</p>
+<audio src="media/audio-test-1.m4a" controls="controls"/>
+</body>
+</html>
diff --git a/chapter10/index.html b/chapter10/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chapter 10 - Audio &amp; Video</title>
+    <link rel="stylesheet" href="/css/base.css" type="text/css"/>
+    <script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
+</head>
+<body>
+
+<h1 class="title">Chapter 10 - Audio &amp; Video</h1>
+<ol>
+    <li><a href="audio.html">Audio</a> - A basic example of the audio element.</li>
+    <li><a href="video.html">Video</a> - A basic example of the video element.</li>
+</ol>
+<h4>Putting It All Together</h4>
+
+<p>For the best example of how this HTML fit's together goto <a href="http://www.grandviewave.com/m">http://www.grandviewave.com/m</a>,
+    click on more, then tours and view source.</p>
+
+<p>Here's an example of some of the JavaScript I referenced in the book <a href="pag1.html">example</a>. Just make sure
+    you view it with an editor otherwise it will look strange.</p></p>
+
+</body>
+</html>
diff --git a/chapter10/pag1.html b/chapter10/pag1.html
@@ -0,0 +1,59 @@
+<h3>Audio & Video Tours</h3>
+<p style="font-size:10px;padding-bottom:10px;">Click below to take a tour of The Avenue.</p>
+<ul data-role="listview" data-theme="c" data-dividertheme="a">
+    <li>
+    <a href="atours.php" rel="external">
+    <img src="/m/images/music-icon.png" class="ui-li-thumb" style="padding:10px;">
+    <h3 class="ui-li-heading">Audio Tours</h3>
+    <p>Five audio tours of Grandview <br>Avenue either sequencial <br>or by nearest location.</p>
+    </a></li>
+    <li>
+    <a href="vtours.php" rel="external">
+    <img src="/m/images/video-icon.png" class="ui-li-thumb" style="padding:10px;">
+    <h3 class="ui-li-heading">Video Tours</h3>
+    <p class="ui-li-desc">Three video tours of Grandview <br>Avenue either sequencial <br>or by nearest location.</p>
+    </a></li>
+</ul>
+---
+<li>
+<a href="amap.php#1" rel="external">
+<img src="/m/images/music-icon.png" class="ui-li-thumb" style="padding:10px;">
+<h3 class="ui-li-heading">South Avenue</h3>
+<p class="ui-li-desc">A short description of <br>Grandview Avenue looking <br>north from First Avenue.</p>
+</a></li>
+<script>
+//---
+addMarker(new google.maps.LatLng(39.98213, -83.0451)); // South Gradview
+addMarker(new google.maps.LatLng(39.983769,-83.044948)); // Staufs Coffee
+addMarker(new google.maps.LatLng(39.985027,-83.044707)); // Grandview Cafe
+addMarker(new google.maps.LatLng(39.986901,-83.044939)); // Caribou Coffee
+addMarker(new google.maps.LatLng(39.988613,-83.044334)); // North Grandview
+//---
+var markerCount = 1;
+function addMarker(latlon) {
+  var marker = new google.maps.Marker({
+    position : latlon,
+    map : map,
+    icon : "http://www.google.com/mapfiles/markerA.png",
+    title : "Audio Spot",
+    clickable: true
+  });
+
+  google.maps.event.addListener(marker, 'click', function() {
+    playAudio(markerCount);
+  });
+  markerCount++;
+ }
+
+ function playAudio(audioFile) {
+    var audioControl = document.querySelector("#audio_control");
+    audioControl.src = 'media/tour_' + audioFile + '.m4a';
+    audioControl.play();
+  }
+  //---
+$(document).ready(function() {
+  loadMap();
+  playAudio(location.hash);
+   });
+
+</script>
diff --git a/chapter10/video.html b/chapter10/video.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+    <title>Chapter 10 - Video Examples</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
+</head>
+<body>
+<h1><a href="index.html">Chapter 10 - Video Examples</a></h1>
+<hr><video width="300" controls="controls" id="myvid">
+<source src="media/grandviewave-test.m4v" type="video/mp4;" >
+</video>
+
+<script type="text/javascript">
+var v = document.querySelector('#myvid');
+v.play();
+</script>
+</body>
+</html>
diff --git a/chapter11/index.html b/chapter11/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Chapter 11 - Native Services</title>
+    <link rel="stylesheet" href="/css/base.css" type="text/css"/>
+    <script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
+</head>
+<body>
+<h1 class="title">Chapter 11 - Native Services</h1>
+<ol>
+    <li><a href="orientation.html">Orientation</a> - These examples show you how to use the orientation sensor to get
+        readings from the compass and the device's orientation in space.
+    </li>
+    <li><a href="motion.html">Motion</a> - These examples show you how to use the accelerometer in your iOS device to
+        detect motion.
+    </li>
+    <li><a href="links.html">Links</a> - These examples show you how to use custom links to integrate with other apps
+        already installed on your iOS device.
+    </li>
+</ol>
+<p>To view the code for this example go here: <a href="http://www.grandviewave.com/m/egg.php">http://www.grandviewave.com/m/egg.php</a>.
+</p>
+
+<p>Otherwise here's <a href="pag1.html">all the code</a> referenced so you can build your own Easter Egg. Make sure you
+    view it in your editor.</p>
+
+</body>
+</html>
diff --git a/chapter11/links.html b/chapter11/links.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+    <title>Chapter 11 - Links</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width" />
+</head>
+<body>
+<h1><a href="index.html">Chapter 11 - Links</a></h1>
+<hr><p><a href="mailto:info@learnhtml5book.com">mailto:</a></p>
+<p><a href="sms:1-614-555-1212">sms:</a></p>
+<p><a href="mms:1-614-555-1212">mms:</a></p>
+<p><a href="http://maps.google.com?q=43212">maps.google.com</a></p>
+<p><a href="http://www.youtube.com/v/video">www.youtube.com</a></p>
+<p><a href="itms://itunes.apple.com/us/app/grandview-ave/id393904245?mt=8">iTunes</a></p>
+<p><a href="tel:1-614-555-1212">tel:</a></p>
+<p><a href="javascript:window.print()">print</a></p>
+<p><a href="twitter://user?screen_name=scottpreston">Twitter</a></p>
+<p><a href="fb://friends">Facebook</a></p>
+<p><a href="music://">Music</a></p>
+
+<script type="text/javascript">
+
+</script>
+</body>
+</html>