Skip to content

Commit 09686d6

Browse files
lambertalamberta
committed
Update index.html table of contents.
1 parent 0eb13f5 commit 09686d6

File tree

2 files changed

+84
-28
lines changed

2 files changed

+84
-28
lines changed

‎examples/include/style.css

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@ aside {
3434
*/
3535

3636
#index-body {
37-
background-color: #9497FF;
37+
background-color: #fdeba1;
3838
font-family: "Vollkorn", serif;
3939
color: #000;
4040
}
4141

4242
#index-body a {
4343
text-decoration: none;
44-
color: #0C2C9F
44+
color: #b30300;
4545
}
4646

4747
#index-body #description, #index-body #exercises {
4848
overflow: auto;
49-
max-width: 750px;
50-
margin: 20px auto 20px auto;
49+
max-width: 900px;
50+
margin: 0px auto 20px auto;
5151
padding-left: 15px;
5252
padding-bottom: 15px;
5353
background-color: #fff;
@@ -62,6 +62,10 @@ aside {
6262
color: #b30300;
6363
}
6464

65+
#index-body #description h2 {
66+
margin-bottom: 0;
67+
}
68+
6569
#index-body h1 a {
6670
text-decoration: underline;
6771
color: #b30300;
@@ -75,14 +79,37 @@ aside {
7579
margin-bottom: 0px;
7680
}
7781

78-
#description ul {
82+
#index-body #description ul {
7983
margin: 0;
80-
padding: 4px 20px 10px 20px;
84+
padding: 0;
85+
list-style-type: none;
8186
}
8287

83-
#description iframe {
88+
#index-body #description ul li {
89+
padding-bottom: 0.6em;
90+
}
91+
.container {
92+
display: table;
93+
width: 100%;
94+
height: auto;
95+
}
96+
.container .text {
97+
display:table-cell;
98+
height:100%;
99+
vertical-align:middle;
100+
}
101+
.container img {
102+
padding: 0 20px;
103+
display: block;
84104
float: right;
85-
margin: 15px 0 15px 15px;
105+
}
106+
.container .clear {
107+
clear: both;
108+
}
109+
110+
#exercises ul {
111+
margin: 0;
112+
padding: 4px 20px 10px 20px;
86113
}
87114

88115
#exercises ol {

‎index.html

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,70 @@
55
<title>Foundation HTML5 Animation with JavaScript</title>
66
<link rel="stylesheet" href="./examples/include/style.css">
77
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Vollkorn">
8-
<link rel="image_src" type="image/jpeg" href="http://lamberta.github.com/html5-animation/examples/include/book-thumb.jpg">
8+
<link rel="image_src" type="image/jpeg" href="http://lamberta.github.io/html5-animation/examples/include/book-thumb.jpg">
99
<meta name="author" content="Billy Lamberta, Keith Peters">
1010
<meta name="description" content="Foundation HTML5 Animation with JavaScript, by Billy Lamberta and Keith Peters, covers everything that you need to know to create dynamic, scripted animations using the HTML5 canvas.">
1111
</head>
1212
<body id="index-body">
1313

1414
<section id="description">
15-
<p>This is table of contents and exercises from <em><a href="http://amzn.com/1430236655?tag=html5anim-20">Foundation HTML5 Animation with JavaScript</a></em>, which can be found at <a href="http://amzn.com/1430236655?tag=html5anim-20">Amazon</a>, <a href="http://www.barnesandnoble.com/w/foundation-html5-animation-with-javascript-billy-lamberta/1102622225">Barnes & Noble</a>, and other booksellers.<br/>
16-
The <a href="https://github.com/lamberta/html5-animation">source code</a> of the book examples is available online. For a detailed explanation of each exercise, or if you find these listings helpful and would like to support our work, please consider buying the book. The <a href="https://github.com/lamberta/html5-animation/blob/master/errata.md">errata page</a> contains the latest updates and corrections.<br/>
17-
And if you enjoy the book, please spread the word and <a href="http://www.amazon.com/review/create-review?ie=UTF8&asin=1430236655&store=books">write a review</a>.</p>
18-
<iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=FFFFFF&IS2=1&npa=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=html5anim-20&o=1&p=8&l=as1&m=amazon&f=ifr&ref=tf_til&asins=1430236655" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
15+
16+
<p>
17+
This page contains all the samples, excercises, and demo code from
18+
</p>
1919
<h1><a href="http://amzn.com/1430236655?tag=html5anim-20">Foundation HTML5 Animation with JavaScript</a></h1>
20+
<p>
21+
Everything you need to know about moving things around in the web browser using JavaScript.
22+
This is <em>the</em> starting place for creating HTML5 games, animations, and UX effects.
23+
24+
Check out the <a href="http://www.amazon.com/Foundation-HTML5-Animation-JavaScript-Lamberta/product-reviews/1430236655?tag=html5anim-20">Amazon reviews</a>, I promise I didn't make these up :)
25+
<ul>
26+
<li><em>“One of the best programming books I've read in a long time. Writing is clear, straightforward, and interesting.” <span style="white-space: nowrap;">—David Kroenke</span></em></li>
27+
<li><em>“It has been 35 years since I had to even spell sine or cosine yet this book makes perfect sense and has really opened my eyes to what is possible.” <span style="white-space: nowrap;">—Peter Hoyt</span></em></li>
28+
<li><em>“MUST OWN for any HTML5 game developer.” <span style="white-space: nowrap;">—Amazon Customer<span></em></li>
29+
</ul>
30+
</p>
31+
32+
<h2>Buy the Book!</h2>
33+
34+
<div class="container">
35+
<div class="text">
36+
My <a href="http://www.apress.com/9781430236658">publisher</a> has graciously allowed me to post <em>all</em>
37+
the sample code and exercises below to make it easier to browse and incorporate in your own work.
38+
Each example is explained in detail within the book, so check it out if you really want to <em>understand</em> how all this code works.
39+
If you're just browsing around and looking to solve a problem, that's cool, but if it helps you out of a jam, please consider
40+
buying the <a href="http://amzn.com/1430236655?tag=html5anim-20">book (or ebook)</a> so that
41+
I can continue publishing. I promise, it's good!<br>
42+
And if you enjoy the book, please spread the word and <a href="http://www.amazon.com/review/create-review?ie=UTF8&asin=1430236655&store=books">write a review</a>.
43+
</div>
44+
<a href="http://www.amazon.com/dp/1430236655?tag=html5anim-20" target="_blank"><img src="./examples/include/book-thumb.jpg" alt="HTML5 Animation with JavaScript"></a>
45+
<div class="clear"></div>
46+
</div>
47+
48+
<h2>The Blurb</h2>
2049
<p><em>Foundation HTML5 Animation with JavaScript</em>, by <a href="http://lamberta.org">Billy Lamberta</a> and <a href="http://www.bit-101.com">Keith Peters</a>, covers everything that you need to know to create dynamic, scripted animations using the HTML5 canvas. It provides information on all the relevant math you'll need, before moving on to physics concepts like acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics. <em>Foundation HTML5 Animation with JavaScript</em> is a fantastic resource for all web developers working in HTML5 or switching over from Flash to create standards-compliant games, applications, and animations that will work across all modern browsers and most mobile devices, including iPhones, iPads, and Android devices.</p>
21-
<em>What you'll have fun learning:</em>
50+
51+
</section>
52+
53+
<section id="exercises">
54+
<h1>Table of Contents and Exercises</h1>
55+
<p>
56+
This is table of contents and exercises from <em><a href="http://amzn.com/1430236655?tag=html5anim-20">Foundation HTML5 Animation with JavaScript</a></em>,
57+
which can be found at <a href="http://amzn.com/1430236655?tag=html5anim-20">Amazon</a>, <a href="http://www.barnesandnoble.com/w/foundation-html5-animation-with-javascript-billy-lamberta/1102622225">Barnes & Noble</a>,
58+
and other booksellers.<br/>
59+
The <a href="https://github.com/lamberta/html5-animation">source code</a> for each excercise is available online, and for a detailed explanation, please consult the book.
60+
Check the <a href="https://github.com/lamberta/html5-animation/blob/master/errata.md">errata page</a> for the latest updates and corrections.
61+
</p>
62+
<p>
63+
The examples below cover the following:
2264
<ul>
2365
<li>All the JavaScript and HTML5 code (including math and trigonometry functions) you'll need to start animating with code.</li>
2466
<li>Basic motion principles like velocity, acceleration, friction, easing, and bouncing.</li>
2567
<li>How to handle user interactions via the keyboard, mouse, and touchscreen.</li>
2668
<li>Advanced motion techniques like springs, coordinate rotation, conservation of momentum, and forward and inverse kinematics.</li>
2769
<li>All the basic 3D concepts you'll need for 3D in HTML5 (without WebGL)—from simple perspective to full 3D solids, complete with backface culling and dynamic lighting.</li>
2870
</ul>
29-
</section>
30-
31-
<section id="exercises">
32-
<h1>Table of Contents and Exercises</h1>
71+
</p>
3372
<ol>
3473
<li>
3574
<h2>Part One: JavaScript Animation Basics</h2>
@@ -897,18 +936,8 @@ <h2>Extras</h2>
897936
</li>
898937
</ol>
899938
</li>
900-
901-
<li>
902-
<h2>Ports</h2>
903-
<p>One of the great things about this book is that many of the concepts apply not only to JavaScript, but to computer animation in general. All you need is support for a drawing surface and a few simple commands, and you can apply these ideas using whatever programming language you want! And if you do, please send me a message and I'll list it here.</p>
904-
<ol>
905-
<li><a href="https://github.com/financeCoding/dart-html5-animation">Dart</a> (Mike Coding)</li>
906-
</ol>
907-
</li>
908939
</ol>
909940
</section>
910-
911-
<a href="https://github.com/lamberta/html5-animation"><img style="position:absolute; top:0; right:0; border:0;" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
912941

913942
<script>
914943
var _gaq = _gaq || [];

0 commit comments

Comments
 (0)