Skip to content

Commit

Permalink
diveintohtml5.org -> diveintohtml5.info
Browse files Browse the repository at this point in the history
  • Loading branch information
@myakura
myakura committed Mar 2, 2012
1 parent 2af632c commit 736a30e
Show file tree
Hide file tree
Showing 8 changed files with 29 additions and 29 deletions.
2 changes: 1 addition & 1 deletion canvas.html
View file
Expand Up @@ -577,7 +577,7 @@ <h2 id=halma>A Complete, Live Example</h2>

<p style="margin-top:0;font-style:normal" class="legend">Moves: <span id=halmamovecount>0</span>

<p>How does it work? I&#8217;m so glad you asked. I won&#8217;t show <em>all</em> the code here. (You can see it at <a href=examples/halma.js>diveintohtml5.org/examples/halma.js</a>.) I&#8217;ll skip over most of the gameplay code itself, but I want to highlight a few parts of the code that deal with actually drawing on the canvas and responding to mouse clicks on the canvas element.
<p>How does it work? I&#8217;m so glad you asked. I won&#8217;t show <em>all</em> the code here. (You can see it at <a href=examples/halma.js>diveintohtml5.info/examples/halma.js</a>.) I&#8217;ll skip over most of the gameplay code itself, but I want to highlight a few parts of the code that deal with actually drawing on the canvas and responding to mouse clicks on the canvas element.

<p>During page load, we initialize the game by setting the dimensions of the <code>&lt;canvas></code> itself and storing a reference to its drawing context.

Expand Down
4 changes: 2 additions & 2 deletions examples/event.html
View file
Expand Up @@ -17,7 +17,7 @@ <h2>Hear Mark speak. Speak, Mark, speak.</h2>
<article>
<h1>Google Developer Day 2009</h1>
<img class="me" width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
<p>Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and &#8220;office hours&#8221; on web technologies like Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.</p>
<p>
Expand All @@ -37,7 +37,7 @@ <h1>Google Developer Day 2009</h1>
<article>
<h1>ConFoo.ca 2010</h1>
<img class="me" width="256" height="256"
src="http://diveintohtml5.org/examples/html5-fist.png"
src="http://diveintohtml5.info/examples/html5-fist.png"
alt="[clenched fist with 'HTML5' on knuckles]">
<p>PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal are proud to announce the first edition of the Confoo.ca conference. International experts in Java, .Net, PHP, Python and Ruby will present solutions for developers and project managers.</p>
<p>2010 March 10&ndash;12</p>
Expand Down
2 changes: 1 addition & 1 deletion examples/person-plus-microdata.html
View file
Expand Up @@ -24,7 +24,7 @@ <h2>A lot of effort went into making this effortless.</h2>
</header>
<section itemscope itemtype="http://data-vocabulary.org/Person">
<img itemprop="photo" class="me" width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">

<h1>Contact Information</h1>
Expand Down
2 changes: 1 addition & 1 deletion examples/person.html
View file
Expand Up @@ -24,7 +24,7 @@ <h2>A lot of effort went into making this effortless.</h2>
</header>
<section>
<img class="me" width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">

<h1>Contact Information</h1>
Expand Down
26 changes: 13 additions & 13 deletions extensibility.html
View file
Expand Up @@ -163,7 +163,7 @@ <h2 id=person>Marking Up People</h2>

<pre><code>&lt;section>
&lt;img width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">

&lt;h1>Contact Information&lt;/h1>
Expand Down Expand Up @@ -218,7 +218,7 @@ <h2 id=person>Marking Up People</h2>
<p>The first thing in <a href=examples/person-plus-microdata.html>this sample &#8220;about&#8221; page</a> is a picture of me. Naturally, it&#8217;s marked up with an <code>&lt;img></code> element. To declare that this <code>&lt;img></code> element is my profile picture, all we need to do is add <code>itemprop="photo"</code> to the <code>&lt;img></code> element.

<pre><code> &lt;img <mark>itemprop="photo"</mark> width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]"></code></pre>

<p class=follow>[Follow along! Before: <a href=examples/person.html>person.html</a>, after: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
Expand All @@ -230,7 +230,7 @@ <h2 id=person>Marking Up People</h2>
<blockquote>
<p>This person [explicit, from <code>&lt;section itemscope itemtype="..."></code>]
<p>is pictured at [explicit, from <code>&lt;img itemprop="photo"></code>]
<p><code>http://diveintohtml5.org/examples/2000_05_mark.jpg</code> [implicit, from <code>&lt;img src></code> attribute]
<p><code>http://diveintohtml5.info/examples/2000_05_mark.jpg</code> [implicit, from <code>&lt;img src></code> attribute]
</blockquote>

<p>The subject only needs to be defined once, by putting <code>itemscope</code> and <code>itemtype</code> attributes on the outermost <code>&lt;section></code> element. The verb is defined by putting the <code>itemprop="photo"</code> attribute on the <code>&lt;img></code> element. The object of the sentence doesn&#8217;t need any special markup at all, because the <a href=#property-values><abbr>HTML5</abbr> microdata data model</a> says that the property value of an <code>&lt;img></code> element is its <code>src</code> attribute.
Expand Down Expand Up @@ -372,7 +372,7 @@ <h3 id=rich-snippets>Introducing Google Rich Snippets</h3>

<pre><samp>Item
<b>Type</b>: http://data-vocabulary.org/person
photo = http://diveintohtml5.org/examples/2000_05_mark.jpg
photo = http://diveintohtml5.info/examples/2000_05_mark.jpg
name = Mark Pilgrim
title = Developer advocate
affiliation = Google, Inc.
Expand All @@ -399,7 +399,7 @@ <h3 id=rich-snippets>Introducing Google Rich Snippets</h3>
<span class=fakeinfo>Anytown PA - Developer advocate - Google, Inc.</span><br>
<span class=fakeexcerpt>Excerpt from the page will show up here.<br>
Excerpt from the page will show up here.</span><br>
<span class=fakeurl>diveintohtml5.org/examples/person-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
<span class=fakeurl>diveintohtml5.info/examples/person-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>

<p>The first line, &#8220;About Mark Pilgrim,&#8221; is actually the title of the page, given in the <code>&lt;title></code> element. That&#8217;s not terribly exciting; Google does that for every page. But the second line is full of information taken directly from the microdata annotations we added to the page. &#8220;Anytown PA&#8221; was part of the <a href=#address>mailing address</a>, marked up with the <code>http://data-vocabulary.org/Address</code> vocabulary. &#8220;Developer advocate&#8221; and &#8220;Google, Inc.&#8221; were two properties from the <code>http://data-vocabulary.org/Person</code> vocabulary (<code>title</code> and <code>affiliation</code>, respectively).
Expand Down Expand Up @@ -553,7 +553,7 @@ <h2 id=event>Marking Up Events</h2>
<pre><code>&lt;article>
&lt;h1>Google Developer Day 2009&lt;/h1>
&lt;img width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
&lt;p>
Google Developer Days are a chance to learn about Google
Expand Down Expand Up @@ -608,11 +608,11 @@ <h2 id=event>Marking Up Events</h2>
<p>This event listing has a photo, which can be marked up with the <code>photo</code> property. As you would expect, the photo is already marked up with an <code>&lt;img></code> element. Like <a href=#person-photo>the <code>photo</code> property in the Person vocabulary</a>, an Event photo is a <abbr>URL</abbr>. Since the <a href=#property-values><abbr>HTML5</abbr> microdata data model</a> says that the property value of an <code>&lt;img></code> element is its <code>src</code> attribute, the only thing we need to do is add the <code>itemprop</code> attribute to the <code>&lt;img></code> element.

<pre><code> &lt;img <mark>itemprop="photo"</mark> width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]"></code></pre>
<p class=follow>[Follow along! Before: <a href=examples/event.html>event.html</a>, after: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]

<p>In English, this says, &#8220;The photo for this event is at <code>http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg</code>.&#8221;
<p>In English, this says, &#8220;The photo for this event is at <code>http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg</code>.&#8221;

<p>Next up is a longer description of the event, which is just a pargaraph of freeform text.

Expand Down Expand Up @@ -701,13 +701,13 @@ <h2 id=event>Marking Up Events</h2>

<h3 id=event-rich-snippets>The Return of Google Rich Snippets</h3>

<p><a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/event-plus-microdata.html">According to Google&#8217;s Rich Snippets Testing Tool</a>, this is the information that Google&#8217;s crawlers will glean from <a href=examples/event-plus-microdata.html>our sample event listing page</a>:
<p><a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.info/examples/event-plus-microdata.html">According to Google&#8217;s Rich Snippets Testing Tool</a>, this is the information that Google&#8217;s crawlers will glean from <a href=examples/event-plus-microdata.html>our sample event listing page</a>:

<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Event
summary = Google Developer Day 2009
eventType = conference
photo = http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg
photo = http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg
description = Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and office hours on web technologies like Goo...
startDate = 2009-11-06T08:30+01:00
endDate = 2009-11-06T20:30+01:00
Expand Down Expand Up @@ -747,7 +747,7 @@ <h3 id=event-rich-snippets>The Return of Google Rich Snippets</h3>
<tr><td class=padright><a href=http://code.google.com/intl/cs/events/developerday/2009/home.html>Google Developer Day 2009</a><td class="fakeinfo padright">Fri, Nov 6<td class=fakeinfo>Congress Center, Praha 4, Czech Republic
<tr><td class=padright><a href=http://confoo.ca/en>ConFoo.ca 2010</a><td class="fakeinfo padright">Wed, Mar 10<td class=fakeinfo>Hilton Montreal Bonaventure, Montréal, Québec, Canada
</table>
<p><span class=fakeurl>diveintohtml5.org/examples/event-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
<p><span class=fakeurl>diveintohtml5.info/examples/event-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>

<p>After the page title and auto-generated excerpt text, Google starts using the microdata markup we added to the page to display a little table of events. Note the date format: &#8220;Fri, Nov 6.&#8221; That is not a string that appeared anywhere in our <abbr>HTML</abbr> or microdata markup. We used two fully qualified <abbr>ISO</abbr>-formatted strings, <code>2009-11-06T08:30+01:00</code> and <code>2009-11-06T20:30+01:00</code>. Google took those two dates, figured out that they were on the same day, and decided to display a single date in a more friendly format.
Expand Down Expand Up @@ -865,7 +865,7 @@ <h2 id=review>Marking Up Reviews</h2>

<p>In English, this says &#8220;the product I&#8217;m reviewing has a rating value of 9 on a scale of 0&ndash;10.&#8221;

<p>Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the &#8220;raw data&#8221; that the <a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/review-plus-microdata.html">Google Rich Snippets tool extracted from my microdata-enhanced review</a>:
<p>Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the &#8220;raw data&#8221; that the <a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.info/examples/review-plus-microdata.html">Google Rich Snippets tool extracted from my microdata-enhanced review</a>:

<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Review
Expand Down Expand Up @@ -900,7 +900,7 @@ <h2 id=review>Marking Up Reviews</h2>
<span class=fakeinfo><span class=fakestar>&#x2605;&#x2605;&#x2605;&#x2605;&#x2606;</span> Review by Mark Pilgrim - Mar 31, 2010</span><br>
<span class=fakeexcerpt>Excerpt from the page will show up here.<br>
Excerpt from the page will show up here.</span><br>
<span class=fakeurl>diveintohtml5.org/examples/review-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
<span class=fakeurl>diveintohtml5.info/examples/review-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Similar pages</span>
</blockquote>

<p>Angle brackets don&#8217;t impress me much, but I have to admit, that&#8217;s pretty cool.
Expand Down
18 changes: 9 additions & 9 deletions history.html
View file
Expand Up @@ -110,12 +110,12 @@ <h4>Professor Markup Says</h4>
<pre><code>function swapPhoto(href) {
var req = new XMLHttpRequest();
req.open("GET",
"http://diveintohtml5.org/examples/history/gallery/" +
"http://diveintohtml5.info/examples/history/gallery/" +
href.split("/").pop(),
false);
req.send(null);</code></pre>

<p>Here is a sample of the markup returned by <code><a href=http://diveintohtml5.org/examples/history/gallery/casey.html>http://diveintohtml5.org/examples/history/gallery/casey.html</a></code>. (You can verify this in your browser by visiting that <abbr>URL</abbr> directly.)
<p>Here is a sample of the markup returned by <code><a href=examples/history/gallery/casey.html>http://diveintohtml5.info/examples/history/gallery/casey.html</a></code>. (You can verify this in your browser by visiting that <abbr>URL</abbr> directly.)

<pre><code>&lt;p class="photonav">
&lt;a id="photonext" href="brandy.html">Next &amp;gt;&lt;/a>
Expand Down Expand Up @@ -170,16 +170,16 @@ <h4>Professor Markup Says</h4>
<p>To help you visualize this, let&#8217;s step through the entire illusion from the beginning to the end:

<ul>
<li>User loads <code><a href=http://diveintohtml5.org/examples/history/fer.html>http://diveintohtml5.org/examples/history/fer.html</a></code>, sees story and a photo of Fer.
<li>User clicks the link labeled &#8220;Next,&#8221; an <code>&lt;a></code> element whose <code>href</code> property is <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code>.
<li>Instead of navigating <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code> with a full page refresh, the custom <code>click</code> handler on the <code>&lt;a></code> element traps the click and executes its own code.
<li>Our custom <code>click</code> handler calls the <code>swapPhoto()</code> function, which creates an <code>XMLHttpRequest</code> object to synchronously download the <abbr>HTML</abbr> snippet located at <code><a href=http://diveintohtml5.org/examples/history/gallery/casey.html>http://diveintohtml5.org/examples/history/<strong>gallery</strong>/casey.html</a></code>.
<li>User loads <code><a href=examples/history/fer.html>http://diveintohtml5.info/examples/history/fer.html</a></code>, sees story and a photo of Fer.
<li>User clicks the link labeled &#8220;Next,&#8221; an <code>&lt;a></code> element whose <code>href</code> property is <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code>.
<li>Instead of navigating <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code> with a full page refresh, the custom <code>click</code> handler on the <code>&lt;a></code> element traps the click and executes its own code.
<li>Our custom <code>click</code> handler calls the <code>swapPhoto()</code> function, which creates an <code>XMLHttpRequest</code> object to synchronously download the <abbr>HTML</abbr> snippet located at <code><a href=examples/history/gallery/casey.html>http://diveintohtml5.info/examples/history/<strong>gallery</strong>/casey.html</a></code>.
<li>The <code>swapPhoto()</code> function sets the <code>innerHTML</code> property of the photo gallery wrapper (an <code>&lt;aside></code> element), thereby replacing the captioned photo of Fer with a captioned photo of Casey.
<li>Finally, our custom <code>click</code> handler calls the <code>history.pushState()</code> function to manually change the <abbr>URL</abbr> in the browser&#8217;s location bar to <code><a href=http://diveintohtml5.org/examples/history/casey.html>http://diveintohtml5.org/examples/history/casey.html</a></code>.
<li>Finally, our custom <code>click</code> handler calls the <code>history.pushState()</code> function to manually change the <abbr>URL</abbr> in the browser&#8217;s location bar to <code><a href=examples/history/casey.html>http://diveintohtml5.info/examples/history/casey.html</a></code>.
<li>User clicks the browser&#8217;s back button.
<li>The browser notices that a <abbr>URL</abbr> has been manually pushed onto the history stack (by the <code>history.pushState()</code> function). Instead of navigating to the previous <abbr>URL</abbr> and redrawing the entire page, the browser simply updates the location bar to the previous <abbr>URL</abbr> (<code><a href=http://diveintohtml5.org/examples/history/fer.html>http://diveintohtml5.org/examples/history/fer.html</a></code>) and fires a <code>popstate</code> event.
<li>The browser notices that a <abbr>URL</abbr> has been manually pushed onto the history stack (by the <code>history.pushState()</code> function). Instead of navigating to the previous <abbr>URL</abbr> and redrawing the entire page, the browser simply updates the location bar to the previous <abbr>URL</abbr> (<code><a href=examples/history/fer.html>http://diveintohtml5.info/examples/history/fer.html</a></code>) and fires a <code>popstate</code> event.
<li>Our custom <code>popstate</code> handler calls the <code>swapPhoto()</code> function again, this time with the previous <abbr>URL</abbr> that by now is already visible in the browser&#8217;s location bar.
<li>Again using <code>XMLHttpRequest</code>, the <code>swapPhoto()</code> function downloads a snippet of <abbr>HTML</abbr> located at <code><a href=http://diveintohtml5.org/examples/history/gallery/fer.html>http://diveintohtml5.org/examples/history/<strong>gallery</strong>/fer.html</a></code> and sets the <code>innerHTML</code> property of the <code>&lt;aside></code> wrapper element, thereby replacing the captioned photo of Casey with a captioned photo of Fer.
<li>Again using <code>XMLHttpRequest</code>, the <code>swapPhoto()</code> function downloads a snippet of <abbr>HTML</abbr> located at <code><a href=examples/history/gallery/fer.html>http://diveintohtml5.info/examples/history/<strong>gallery</strong>/fer.html</a></code> and sets the <code>innerHTML</code> property of the <code>&lt;aside></code> wrapper element, thereby replacing the captioned photo of Casey with a captioned photo of Fer.
</ul>

<p>The illusion is complete. All visible evidence (the content of the page, and the <abbr>URL</abbr> in the location bar) suggests to the user that they have navigated forward one page and backward one page. But no full page refresh ever occurred &mdash; it was all a meticulously executed illusion.
Expand Down

0 comments on commit 736a30e

Please sign in to comment.