archived all the stuff from freelancing for wired

4 files changed, 306 insertions, 0 deletions

diff --git a/old/published/Webmonkey/Microformats/hCal.txt b/old/published/Webmonkey/Microformats/hCal.txt
new file mode 100644
index 0000000..f79bd07
--- /dev/null
+++ b/old/published/Webmonkey/Microformats/hCal.txt
@@ -0,0 +1,83 @@
+Calendar and event information is one of the most common chunks of data on the web -- it answers the age old question, what are you doing? Given the prevalence of event announcements and scheduling applications, it makes sense to have a standard format that all sorts of programs can exchange.
+
+That's exactly what the [http://www.ietf.org/rfc/rfc2445.txt iCalendar standard] does for apps like Apple's iCal or Mozilla's Sunbird; but what about web pages?
+
+The answer is the hCalendar microformat, which provides an open, distributed means of marking up calendar and event information on your pages. Once your data is marked up in hCalendar format it's easy for search engine spiders and browsers to detect, understand and even convert it back to iCalendar format for importing into desktop applications.
+
+##Overview##
+
+If you have a blog, chances are you've mentioned an event at some point -- a conference you're planning to attend or just a get together at a local pub. Using hCalender when you write about upcoming events allows applications to retrieve the details of the event directly from your page without having to reference a separate iCalendar file. 
+
+And that makes it easier for your friends to get the info into their own calendar apps, making them more likely to show up and buy you a round at that pub meet up.
+
+##The Basics of hCalendar##
+
+Let's say your blog displays a calendar widget with all your upcoming events in a table, something like this:
+
+<code>
+<tr>
+	<td>Sat March 14</td>
+	<td>6pm</td>
+	<td>Meet up at Enid's</td>
+</tr>
+</code>
+
+That's fine, but just adding a few extra detail enriches the data and makes it easy for the spiders and apps to pull it out and do something useful -- like adding the event to a calendar app.
+
+Here's the same data marked up with the hCalendar syntax
+
+<code>
+<tr class="vevent">
+	<td><abbr title="20080314T1800-0500" class="dtstart">March 14th 6pm</abbr></td>
+	<td><abbr title="20080315T200-0500" class="dtend"> 2am 2008</abbr></td>
+	<td><span class="location">Enid's Bar, Williamsburg, NY</span></td>
+	<td class="summary">Meetup at Enid's</td>
+</tr>
+</code>
+
+The two main things we've done here are add date-time stamps around our human readable dates and added a few class names to define the data.
+
+##More Complex exampes##
+
+As with other microformats, hCalendar data is wrapped in tags and the class names used in those tags define what the data relates to. For instance, the <code>dtstart</code> property let's you know that the text in that HTML element is the starting time for the event. 
+
+The only things required for a hCalendar definition are a <code>dtstart</code> class with the date and time of the event and a <code>summary</code> that gives a brief description of the event.
+
+Other properties you can define include:
+
+# location
+# url
+# dtend (ISO date), duration (ISO date duration)
+# rdate, rrule
+# category, description
+# uid
+# geo (latitude, longitude) 
+
+Here's a more complex example:
+
+<code>
+<div class="vevent">
+  <h5 class="summary">I am eating bananas</h5>
+  <div>Posted on: <abbr class="dtstamp" title="20080314T1300Z">March 14, 2008</abbr></div>
+  <div>Dates: <abbr class="dtstart" title="20080314T1300Z">March 14, 2008, 16:30 UTC</abbr>-
+    <abbr class="dtend" title="1920080316T1300Z">March 16, 2008 01:00 UTC</abbr></div>
+  <div>Banana eating is a <span class="class">public</span> and <span class="transp">transparent</span> event.</div>
+  <div>Filed under:</div>
+    <ul>
+      <li class="category">Business</li>
+    </ul>
+</div>
+</code>
+
+Here we have a couple of additional class definitions. The <code>transp</code> class maps to a similar class in the iCalendar format and tells anything searching through our schedule to not include this event. In other words it won't show up when people search to see when we're busy.
+
+For some even more complex examples, check out the [http://microformats.org/wiki/hcalendar-examples microformats wiki page].
+
+But of course there's no need to write hCalendar info out by hand. There's a handy [http://microformats.org/code/hcalendar/creator hCalendar creator], and even better are the [http://structuredblogging.org/formats.php plugins for Wordpress and Movable Type] that make it easy to add hCalendar markup to events you're writing about.
+
+##Conclusion## 
+
+Although perhaps the most complex of the microformats, hCalendar is also one of the more useful ones. Sure, you can publish your schedule as an iCalendar feed, but unless all your friends are tech savvy nerds, they might not know what to do with the iCalendar feed address. 
+
+Keep in mind that hCalendar is still a work in progress, if you have ideas or suggestions, head over to the Microformats site and [http://microformats.org/wiki/hcalendar-brainstorming let them know].
+
diff --git a/old/published/Webmonkey/Microformats/hCard.txt b/old/published/Webmonkey/Microformats/hCard.txt
new file mode 100644
index 0000000..b088bb0
--- /dev/null
+++ b/old/published/Webmonkey/Microformats/hCard.txt
@@ -0,0 +1,82 @@
+VCards are a common format for exchanging address information, business locations, place data and more. But on the web vCards become invisible to search engine spiders and webmail apps often can't import them straight from a download link, which is why the [http://microformats.org/wiki/hcard hCard microformat] was created.
+
+Designed to be a simple, open and distributed format, hCards are an extension of (X)HTML that makes it easy to represent people, companies, organizations, and places. All the data encapsulated in hCard maps directly to the [http://www.ietf.org/rfc/rfc2426.txt vCard specification] so programs that can handle vCards can easily add hCard support as well (whether or not they do is up the creators).
+
+##Overview##
+
+As with other microformats, hCard uses semantic HTML or XHTML to add more meaning to your address data. Using a series of pre-defined class definitions, hCard creates a consistent format that spiders and people alike can easily recognize.
+
+The root class name for hCard is "vcard," so the standard definition starts like this:
+
+<div class="vcard">
+ <a class="url fn" href="http://yoursite.com/">Your Name</a>
+</div>
+
+As you can see the definition is wrapped in a <code><div></code> tag with the root class of vcard. The next line is an ordinary link to your website with your name as the link text. Note however the class definitions, <code>url</code> and <code>fn</code>. Obviously url denotes the fact that this chunk of data is a url, but what about that <code>fn</code> class.
+
+It gets a little bit complicated, do some contradictions in the vCard spec, but generally you can think of fn as short for formal name. There is also an <code>n</code> property that can be used, though <code>n</code> can be assumed to be the same as <code>fn</code> in most cases.
+
+##Full Example##
+
+So far all we have is a name leading to a website. For many that's all the contact info they're willing to give, but for the sake of example let's consider Joe Monkey, an employee of ACME Banana company. In this case we might create an hCard that looks like this:
+
+<code>
+<div id="hcard-Joe-Monkey" class="vcard">
+ <span class="fn">Joe Monkey</span>
+ <div class="org">ACME Banana</div>
+  <div class="adr">
+    <span class="type">Work</span>:
+    <div class="street-address">314 Monkey Avenue</div>
+    <span class="locality">Monkey Island</span>,  
+    <abbr class="region" title="California">CA</abbr>  
+    <span class="postal-code">94301</span>
+    <div class="country-name">USA</div>
+  </div>
+  <div class="tel">
+   <span class="type">Work</span> +1-555-555-5555
+  </div>
+  <div class="tel">
+    <span class="type">Fax</span> +1-555-555-5555
+  </div>
+  <div>Email: 
+   <span class="email">joe@acmebanana.com</span>
+  </div>
+  
+  <a class="url" href="aim:goim?screenname=monkeybites">AIM</a>
+</code>
+
+Most of the class names here should be self-evident, save perhaps locality, which just means the city of municipal area.
+
+Note that in this case we're making a card for an individual at a company so we've used separate definitions for <code>fn</code> and <code>org</code>. However, when dealing with a company listing it would be perfectly acceptable to combine the two into one line, like so:
+
+<code>
+<span class="fn org">ACME Banana</span>
+</code>
+
+The various class properties are as follows:
+
+Required:
+
+# fn
+# n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix) 
+
+Optional:
+
+# nickname, sort-string
+# url, email (type, value), tel2 (type, value)
+# adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value), label
+# geo (latitude, longitude), tz
+# photo, logo, sound, bday
+# title, role, org (organization-name, organization-unit)
+# category, note
+# class, key, mailer, uid, rev 
+
+##The hCard Creator##
+
+There's no need to write out all your hCard markup by hand. The very handy [http://microformats.org/code/hcard/creator hCard creator] can handle the grunt work for you, generating some nice cut and paste code. 
+
+If you're displaying hCards dynamically (say as part of your hot new social network's profile page), just whip up a skeleton like the one above and replace the fake data with the variables from your database.
+
+It's also worth noting that contact or profile pages aren't the only place you can use hCard. HCard markup works well inside a <code><cite></code> block, for instance when you're citing another blog and want to provide some basic contact info for the author of the blog. 
+
+Once you've got a basic handle on hCards, go ahead and put them in the wild and add your site to list of example on the Microformats Wiki. If you're feeling extra frisky have a read through the [http://microformats.org/wiki/hcard hCard specification] for all the gritty details.
\ No newline at end of file
diff --git a/old/published/Webmonkey/Microformats/overview.txt b/old/published/Webmonkey/Microformats/overview.txt
new file mode 100644
index 0000000..1505b3f
--- /dev/null
+++ b/old/published/Webmonkey/Microformats/overview.txt
@@ -0,0 +1,86 @@
+Thus far the promise of the semantic web remains unfulfilled. Machines still aren't very good at understanding the code they're rendering, but Microformats are changing that.
+
+Perhaps the most difficult part of microformats is explaining what they actually are. The short answer is that microformats are a way of adding semantic meaning to HTML tags. First and foremost, microformats were designed to be easy for humans to read and write. If you know HTML, you know microformats.
+
+Tantek Çelik, chief Technology Officer at Technorati and creator of microformats, describes them as a way of "making web pages both more useful and more usable to the average person."
+
+The real power of microformats is in the way they refine data that already exists. 
+
+##What Microformats Do##
+
+
+Right now your data is spread across the internet, photos on Flickr, friends on Facebook, bookmarks at ma.gnolia, calendar on Google Calendar and so on. Microformats can make it easier to track and aggregate that data into one centralized space -- your own domain, a blog or perhaps your personalized homepage.
+
+In many ways microformats have the potential to replace web-based APIs and make data that was once only available to those with programming skills, available to anyone who knows a bit of HTML.
+
+And it isn't just people, search engines can use microformats to provide better results. "By marking up contacts with hCard, events with hCalendar, reviews with hReview, listings with hListing, search engines will be (and are) able to find that information on those sites better," Çelik says.
+
+Instead of guessing what information is on the page, microformats can tell search engines exactly what data they are looking at. For instance, as Çelik points out, "rel-license, the microformat for license links, is parsed and supported by Google and Yahoo's license/CC search." And rel-tag is supported by Technorati and others for browsing tagged blog posts.
+
+##Usage Overview##
+
+The basic example used to illustrate the power of microformats is the hCard format. An hCard accomplishes the same thing a vCard does -- click on an hCard on somebody's web page and you can add that person to your address book in an instant. 
+
+The hCard format is probably the most widespread of all microformats, the hCard standard is already in use on contact and profile pages around the web, heck even [http://microformats.org/blog/2006/07/28/steve-martin-has-an-hcard/ Steve Martin] has one -- yes, that Steve Martin.
+
+Another excellent example of the way microformats can make your life easier is the [http://microformats.org/wiki/hcalendar hCalendar] format. The popular social networking site Facebook is one of many sites that encode calendar events in hCalendar format making it easy to add events to your calendar. 
+
+Click on an event and it gets added to your hCalendar-compatible calendaring application. Most web calendars and desktop calendars have support for these microformats.
+
+Another, arguably more powerful, application of microformats is the [http://microformats.org/wiki/hlisting-proposal hListing] microformat. Imagine you want to sell something on the web; you could head to an auction site, create an account, list your item and post the information. But why bother with all that when you could just post your item on your blog using the hListing format? 
+
+Sites like [http://www.edgeio.com/ Edgeio] can scrap hListing data and aggregate it to a larger community which can then bid to you directly, without the hassle of creating and listing an item on multiple sites.
+
+A complete list of microformats can be found on the [http://microformats.org/wiki/Main_Page microformats wiki].
+
+##Real World Example##
+
+To get started with microformats let's consider the most basic example, the rel="tag" format. Many people are probably already using this without even realizing it's a microformat. The syntax is simple, start with an ordinary link tag like this:
+
+	<a href="http://mysite.com/wine/" title="my thoughts on wine">wine</a>
+	
+Now if we just add one additional attribute we'll have a microformat that tells search engine spiders that our link is to a page (at least partly) about wine.
+
+	<code><a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">wine</a></code>
+	
+The only thing to note is that the url determines to tag, not the link text. in other words:
+
+	<code><a href="http://mysite.com/wine/" title="my thoughts on wine" rel="tag">beer</a></code>
+	
+would be read as a link to the tag wine, **not** beer.
+
+So far so good, how about something more sophisticated. Let's give hCard a try. Here's some example code:
+
+<code>
+	<div id="hcard-Scott-Gilbertson" class="vcard">
+		<a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
+		<div class="org">Wired News</div>
+		<a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
+		<div class="adr">
+			<div class="street-address">3rd Floor, 520 Third Street</div>
+			<span class="locality">San Francisco</span>, 
+			<span class="region">CA</span>, 
+			<span class="postal-code">94107</span>
+			<span class="country-name">USA</span>
+		</div>
+	</div>
+</code>
+
+And here's what it would look like rendered in a browser:
+
+<div id="hcard-Scott-Gilbertson" class="vcard">
+<a class="url fn" href="http://blog.wired.com/monkeybites/">Scott Gilbertson</a>
+<div class="org">Wired News</div>
+<a class="email" href="mailto:scott_gilbertson@wired.com">scott_gilbertson@wired.com</a>
+<div class="adr">
+<div class="street-address">3rd Floor, 520 Third Street</div>
+<span class="locality">San Francisco</span>, 
+<span class="region">CA</span>, 
+<span class="postal-code">94107</span>
+<span class="country-name">USA</span>
+</div>
+</div>
+
+If the writing the code yourself is too laborious there's always the [http://microformats.org/code/hcard/creator  hCard creator]. In fact nearly all of the more complicated microformats have code creators that take your input and spit out some cut-and-paste code you can drop into your site.
+
+For more examples and an in-depth look at various microformats see our more detailed tutorials on [link hCard], [link XFN], [link hCal] and [link hListing].
\ No newline at end of file
diff --git a/old/published/Webmonkey/Microformats/xfn.txt b/old/published/Webmonkey/Microformats/xfn.txt
new file mode 100644
index 0000000..b6c7c4c
--- /dev/null
+++ b/old/published/Webmonkey/Microformats/xfn.txt
@@ -0,0 +1,55 @@
+Tracking social relationships on the web has thus far primarily been something that happens on specific sites like MySpace, Facebook or Friendster. Within those sites you can meet and define relationships with other sites members.
+
+But what about the larger web? If you have a blog you may keep a "blog roll" or list of sites that you like, in the a sidebar. Some of those sites may be written by your friends; surely there's a way to define relationships between people without joining the latest fad social network?
+
+And in fact there is, it's known as XFN or the XHTML Friends Network. Using a series of different <code>rel</code> tags in your markup you can indicate who your friends are what the nature of your relationship is.
+
+While not officially part of Microformats, XNF uses some microformats to define relationships and the two groups share similar goals.
+
+##XFN Overview##
+
+You have blog. Your best friend has a blog. Your blog links to your friend's blog, but beyond that there's no way to indicate that that person is your friend. Let's say you link to your friend's blog like so:
+
+<code><a href="http://yourfriendsblog.net/">Bill</a> </code>
+
+And here's what the same link would look like after we drop in some XFN markup:
+
+<code><a href="http://yourfriendsblog.net/" rel="friend met">Dave</a> </code>
+
+As you can see we've just added a rel tag and defined Dave as a friend that we've met. The XFN specification has a fairly complete range of options for defining various types of relationship. Some of the more common attributes are:
+
+
+# friendship (at most one): friend acquaintance contact
+# physical: met
+# professional: co-worker colleague
+# geographical (at most one): co-resident neighbor
+# family (at most one): child parent sibling spouse kin
+# romantic: muse crush date sweetheart
+# identity: me
+
+##What XFN Does##
+
+The primary benefit of XFN is that page scraping tools like spiders can crawl through your code and pick out various relationships you've defined. It gets even more interesting when those spiders follow your links, crawl your friend's site and find a similar link leading back to you.
+
+The spider then knows that the relations is symmetrical. In other words, you call Dave a friend and Dave calls you a friend and that relationship is confirmed. When symmetry is established page crawlers can give the relationship added validity.
+
+Symmetry is also useful with the <code>rel="me"</code> tag since it allows you to claim all the various pages you may have. Sites like Flickr allow you to enter your blog on your profile page and then mark that up with a <code>rel="me"</code> tag.
+
+If you then link to that same page from your blog, the relationship is symmetrical and a claim of ownership can be assumed. If someone else points to your blog from their Flickr page trying to claim your blog as their own, the lack of a reciprocating link tells a web crawler that the claim is suspect and indexing services will ignore it.
+
+##Using XFN##
+
+Hand coding your XFN links isn't that hard, but there is a JavaScript widget that can [http://gmpg.org/xfn/creator generate the links for you] if you like.
+
+So far the primary consumers of XFN have been search engine spiders and some attempts at open social networks like the [http://code.google.com/p/diso/ DiSo project], but Google recently released an oft overlooked [http://code.google.com/support/bin/topic.py?topic=13821 Social Graph API] that relies heavily on XFN data.
+
+The Social Graph API is somewhat limited at the moment, but there are some interesting tools you can use to see what sort of relationships you might already have defined. To see what sort of things are possible, have a look at the [http://code.google.com/apis/socialgraph/docs/examples.html example applications].
+
+
+##Limitations##
+
+While there are reasonably wide range of options for defining relationships there is one common sort of relationship in the web that XFN doesn't account for -- being a fan of someone. That is, while I have never met Ze Frank, for example, I am a fan of his work and XFN doesn't offer a way to define that relationship.
+
+However there is a proposed solution, though for the time being it only allows the reverse. For instance if someone is a fan of you, you can add a <code>rel="fan"</code> tag to your outbound link. Unfortunately the reverse isn't possible.
+
+There are of course further fringe cases which also can't be defined (one particular instance, a child with legal guardians rather than parents has been accepted and will be implemented in the future), but the XFN group has does a good job of preventing the list of definitions from getting too out of hand. If you have a compelling argument for including something, you can always join the group and [http://microformats.org/wiki/xfn-issues add your suggestions].
\ No newline at end of file