From 736a30ee289bbc04fd9dcae0e55b8b3783ed27c3 Mon Sep 17 00:00:00 2001 From: Masataka Yakura Date: Sat, 3 Mar 2012 05:30:54 +0900 Subject: [PATCH] diveintohtml5.org -> diveintohtml5.info --- canvas.html | 2 +- examples/event.html | 4 ++-- examples/person-plus-microdata.html | 2 +- examples/person.html | 2 +- extensibility.html | 26 +++++++++++++------------- history.html | 18 +++++++++--------- past.html | 2 +- video.html | 2 +- 8 files changed, 29 insertions(+), 29 deletions(-) diff --git a/canvas.html b/canvas.html index 43ad070..f76431e 100644 --- a/canvas.html +++ b/canvas.html @@ -577,7 +577,7 @@

A Complete, Live Example

Moves: 0 -

How does it work? I’m so glad you asked. I won’t show all the code here. (You can see it at diveintohtml5.org/examples/halma.js.) I’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. +

How does it work? I’m so glad you asked. I won’t show all the code here. (You can see it at diveintohtml5.info/examples/halma.js.) I’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.

During page load, we initialize the game by setting the dimensions of the <canvas> itself and storing a reference to its drawing context. diff --git a/examples/event.html b/examples/event.html index aba87ee..c0751e2 100644 --- a/examples/event.html +++ b/examples/event.html @@ -17,7 +17,7 @@

Hear Mark speak. Speak, Mark, speak.

Google Developer Day 2009

[Mark Pilgrim at podium]

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 Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.

@@ -37,7 +37,7 @@

Google Developer Day 2009

ConFoo.ca 2010

[clenched fist with 'HTML5' on knuckles]

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.

2010 March 10–12

diff --git a/examples/person-plus-microdata.html b/examples/person-plus-microdata.html index 6971a51..e75146a 100644 --- a/examples/person-plus-microdata.html +++ b/examples/person-plus-microdata.html @@ -24,7 +24,7 @@

A lot of effort went into making this effortless.

[Mark Pilgrim, circa 2000]

Contact Information

diff --git a/examples/person.html b/examples/person.html index 0123761..60b4da3 100644 --- a/examples/person.html +++ b/examples/person.html @@ -24,7 +24,7 @@

A lot of effort went into making this effortless.

[Mark Pilgrim, circa 2000]

Contact Information

diff --git a/extensibility.html b/extensibility.html index ff671c4..783219b 100644 --- a/extensibility.html +++ b/extensibility.html @@ -163,7 +163,7 @@

Marking Up People

<section>
   <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]">
 
   <h1>Contact Information</h1>
@@ -218,7 +218,7 @@ 

Marking Up People

The first thing in this sample “about” page is a picture of me. Naturally, it’s marked up with an <img> element. To declare that this <img> element is my profile picture, all we need to do is add itemprop="photo" to the <img> element.

  <img itemprop="photo" 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]">

Marking Up People

This person [explicit, from <section itemscope itemtype="...">]

is pictured at [explicit, from <img itemprop="photo">] -

http://diveintohtml5.org/examples/2000_05_mark.jpg [implicit, from <img src> attribute] +

http://diveintohtml5.info/examples/2000_05_mark.jpg [implicit, from <img src> attribute]

The subject only needs to be defined once, by putting itemscope and itemtype attributes on the outermost <section> element. The verb is defined by putting the itemprop="photo" attribute on the <img> element. The object of the sentence doesn’t need any special markup at all, because the HTML5 microdata data model says that the property value of an <img> element is its src attribute. @@ -372,7 +372,7 @@

Introducing Google Rich Snippets

Item
   Type: 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. 
@@ -399,7 +399,7 @@ 

Introducing Google Rich Snippets

Anytown PA - Developer advocate - Google, Inc.
Excerpt from the page will show up here.
Excerpt from the page will show up here.

-diveintohtml5.org/examples/person-plus-microdata.html - Cached - Similar pages +diveintohtml5.info/examples/person-plus-microdata.html - Cached - Similar pages

The first line, “About Mark Pilgrim,” is actually the title of the page, given in the <title> element. That’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. “Anytown PA” was part of the mailing address, marked up with the http://data-vocabulary.org/Address vocabulary. “Developer advocate” and “Google, Inc.” were two properties from the http://data-vocabulary.org/Person vocabulary (title and affiliation, respectively). @@ -553,7 +553,7 @@

Marking Up Events

<article>
   <h1>Google Developer Day 2009</h1>
   <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]">
   <p>
     Google Developer Days are a chance to learn about Google
@@ -608,11 +608,11 @@ 

Marking Up Events

This event listing has a photo, which can be marked up with the photo property. As you would expect, the photo is already marked up with an <img> element. Like the photo property in the Person vocabulary, an Event photo is a URL. Since the HTML5 microdata data model says that the property value of an <img> element is its src attribute, the only thing we need to do is add the itemprop attribute to the <img> element.

  <img itemprop="photo" 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]">

In English, this says, “The photo for this event is at http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg.” +

In English, this says, “The photo for this event is at http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg.”

Next up is a longer description of the event, which is just a pargaraph of freeform text. @@ -701,13 +701,13 @@

Marking Up Events

The Return of Google Rich Snippets

-

According to Google’s Rich Snippets Testing Tool, this is the information that Google’s crawlers will glean from our sample event listing page: +

According to Google’s Rich Snippets Testing Tool, this is the information that Google’s crawlers will glean from our sample event listing page:

Item
     Type: 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 
@@ -747,7 +747,7 @@ 

The Return of Google Rich Snippets

Google Developer Day 2009Fri, Nov 6Congress Center, Praha 4, Czech Republic ConFoo.ca 2010Wed, Mar 10Hilton Montreal Bonaventure, Montréal, Québec, Canada -

diveintohtml5.org/examples/event-plus-microdata.html - Cached - Similar pages +

diveintohtml5.info/examples/event-plus-microdata.html - Cached - Similar pages

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: “Fri, Nov 6.” That is not a string that appeared anywhere in our HTML or microdata markup. We used two fully qualified ISO-formatted strings, 2009-11-06T08:30+01:00 and 2009-11-06T20:30+01:00. 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. @@ -865,7 +865,7 @@

Marking Up Reviews

In English, this says “the product I’m reviewing has a rating value of 9 on a scale of 0–10.” -

Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the “raw data” that the Google Rich Snippets tool extracted from my microdata-enhanced review: +

Did I mention that review microdata could affect search result listings? Oh yes, it can. Here is the “raw data” that the Google Rich Snippets tool extracted from my microdata-enhanced review:

Item
   Type: http://data-vocabulary.org/Review
@@ -900,7 +900,7 @@ 

Marking Up Reviews

★★★★☆ Review by Mark Pilgrim - Mar 31, 2010
Excerpt from the page will show up here.
Excerpt from the page will show up here.

-diveintohtml5.org/examples/review-plus-microdata.html - Cached - Similar pages +diveintohtml5.info/examples/review-plus-microdata.html - Cached - Similar pages

Angle brackets don’t impress me much, but I have to admit, that’s pretty cool. diff --git a/history.html b/history.html index 7e168e6..40b6e21 100644 --- a/history.html +++ b/history.html @@ -110,12 +110,12 @@

Professor Markup Says

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);
-

Here is a sample of the markup returned by http://diveintohtml5.org/examples/history/gallery/casey.html. (You can verify this in your browser by visiting that URL directly.) +

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

<p class="photonav">
   <a id="photonext" href="brandy.html">Next &gt;</a>
@@ -170,16 +170,16 @@ 

Professor Markup Says

To help you visualize this, let’s step through the entire illusion from the beginning to the end:

The illusion is complete. All visible evidence (the content of the page, and the URL 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 — it was all a meticulously executed illusion. diff --git a/past.html b/past.html index 9229478..52ab7bb 100644 --- a/past.html +++ b/past.html @@ -117,7 +117,7 @@

A long digression into how standards are made<

[I] see that using this as a method for selectable icons means nesting anchors. Hmmm. But I hadn’t wanted a special tag. -

This proposal was never implemented, but the rel attribute is still around. +

This proposal was never implemented, but the rel attribute is still around.

Jim Davis added: diff --git a/video.html b/video.html index a0fe261..e9ab7c1 100644 --- a/video.html +++ b/video.html @@ -755,7 +755,7 @@

A Complete, Live Example

data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> - +

Download video as MP4, WebM, or Ogg.