Web Teacher » microformats

Useful Links: Microformats are Hot, Accessibility Infographics, Nerd Words, Structure and Presentation

vdebolt — Wed, 25 Jan 2012 13:45:53 +0000

Web Data Commons Launches has data showing that about 89% of all structured data on the web is in the form of microformats.

5 Infographics on Web Accessibility for Designers is a nice compilation.

6 Made up Nerd Words that Made it to Common Usage, and 8 that Should.

The Separation of structure, presentation and behavior is dead. Must reading for anyone teaching anything in web education.

Useful links: Tech in ed, microformats on Facebook, App resource

vdebolt — Thu, 08 Sep 2011 13:08:10 +0000

The 7 Golden Rules of Using Technology in Schools. Don’t know how I missed this back in July, but I just found it.

Facebook Quietly Adds Microformats to “Download Your Info” Feature. A little slow of the uptake, wasn’t it?

For those of you in the business of making apps, a site you may learn a lot from is Moms with Apps. They concentrate on branding, marketing, and practical matters such as getting an app ready to put in the App Store.

Useful Links: Simple CSS, semantic web, EE

vdebolt — Fri, 22 Jul 2011 15:12:00 +0000

Chris at CSS Tricks has a great post in Little CSS Stuff Newcomers Get Confused About.

Bing Brings it On (RFDa, that is) at Semantic Web:

Bing webmaster help site that indicates Microsoft wants to play nice with whatever markup approach webmasters want to implement – microdata, microformats, or RDFa. The site mark-up overview on the page referenced says that Bing’s “crawlers do not prefer one specification over another. It’s entirely up to you to decide which of the supported specifications best fits your data.”

Contrast that with Google’s initial commentary about the schema.org structured data markup schema.

If Expression Engine is your thing, or if you want to learn it, check out this series of EE Podcasts from Emily Lewis and Lea Alcantara.

Useful links: captioning YouTube, HTML5, or not, Final Cut Pro X

vdebolt — Fri, 24 Jun 2011 12:54:15 +0000

YouTube’s instructions on how to add captions to your video.

How is HTML5 changing web development? An interview with Remy Sharp.

Stop Obsessing over HTML5 and CSS3. Paul Boag has some ideas about what we should be thinking about instead of merely worrying about learning HTML5 and CSS3. What I want to know is does Paul – or any web educator – think topics like those he suggests need to be part of a comprehensive web education curriculum?

Microformats 2 and RFDa Collaboration references where these two are heading and includes a mention of schema.org. [See also: Modifying an hReview to include HTML from schema.org.]

Final Cut Pro Reactions:

Modifying an hReview microformat to include HTML from schema.org

vdebolt — Fri, 03 Jun 2011 13:28:51 +0000

Google, Yahoo and Bing announced schema.org yesterday.

Many sites are generated from structured data, which is often stored in databases. When this data is formatted into HTML, it becomes very difficult to recover the original structured data. Many applications, especially search engines, can benefit greatly from direct access to this structured data. On-page markup enables search engines to understand the information on web pages and provide richer search results in order to make it easier for users to find relevant information on the web. Markup can also enable new tools and applications that make use of the structure.

A shared markup vocabulary makes easier for webmasters to decide on a markup schema and get the maximum benefit for their efforts. So, in the spirit of sitemaps.org, Bing, Google and Yahoo! have come together to provide a shared collection of schemas that webmasters can use.

I immediately began to think about how this would apply to my frequently used hReview microformat. I looked at the schema for books, and tried to see how I could incorporate that into a book review if I continue to use the hReview microformat to do book reviews.

Here’s what I came up with. I’d love comments. The additions to the hReview from the book schema are in red.

itemscope itemtype="http://schema.org/Book">
product
class="photo" src="image.jpg" alt="alt here">

class="description" itemprop="reviews">
class="fn url" itemprop="name url" href="link here"
title="affiliate link to Amazon">book title
here
by itemprop="author">author's name is from
 itemprop="publisher">publisher's
name, itemprop="datePublished">date
here.
Text of the review here.

Text of the review here.
Text of the review here.
class="summary">Summary: text of the summary

class="reviewer vcard">A review by
Virginia
DeBolt of itemprop="name">
book title here
itemprop="rating">
(rating: n stars)


What I’m wondering.

Is the hReview microformat even needed since there is so much overlap between the book schema and the hReview microformat. It’s redundant. Should reviewers switch to the schema and abandon the microformat?
I’m wondering about putting an itemprop in the cite element, since most of the schema HTML is added with span tags. It seems more semantic to me.

What do you think? Are schemas going to replace microformats completely?

© vdebolt for Web Teacher, 2011. |
Permalink |
6 comments |



Foundational HTML talk from Emily Lewis
vdebolt — Fri, 18 Feb 2011 15:27:08 +0000
Get to know Emily Lewis, who will be on a panel at SXSW Interactive this year. This is a recent talk she gave to a local tech group called Webuquerque. She talks about the basics of good markup, semantics, and new concepts in markup. It’s about an hour long.
I think it would make a good resource or assignment for web education students.

A text summary and the slide deck are available on the Webuquerque site.
Other speakers and talks from Webuquerque meetings are available on Vimeo.

© vdebolt for Web Teacher, 2011. |
Permalink |
One comment |




Useful Links: PowerPoint, Microformats in HTML5, dConstruct audio
vdebolt — Tue, 07 Sep 2010 11:55:26 +0000
PowerPoint Accessibilty at WebAIM tells you how to create an accessible PowerPoint presentation. The news for Mac users is not good.
Extending HTML5 – Microformats at HTML5 Doctor is a must read and explains the “wrinkles.”
As most microformats use only class and/or rel — basic parts of HTML that remain unchanged in HTML5 — these microformats are completely fine in HTML5. Yay! However there are a few wrinkles to keep us on our toes.
While you’re there, be sure to read the comments, too. They are important.
dConstruct 2010 is Jeremy Keith’s report on the recent conference. Included are links to the talks from the event and links to other bloggers reports on the event.

© vdebolt for Web Teacher, 2010. |
Permalink |
2 comments |




Useful Links: Microformats, HTML5 Mess, gender issues, accessibility conference, CSS spirites, Twitter in class
vdebolt — Fri, 22 Jan 2010 13:55:06 +0000
Microformats Workshop is the slides by Emily Lewis from the Workshop Summits event. Outstanding presentation, excellent slides.
SitePoint Podcast #44: HTML5 is a (Beautiful) Mess is a discussion about HTML5 and related issues among Sitepoint’s Kevin Yank, Opera Software’s Bruce Lawson, author Ian Lloyd, and Kyle Weems  of the CSSquirrel web comic.
whose voice do you hear? gender issues and success from apophenia is a response to Clay Shirky’s Rant About Women. Read the rant and all the comments before you read what apophenia said.
California Web Accessibility Conference in February is a Knowbility event. That means it will provide you with the best possible accessibility training available anywhere.
CSS Sprites is an online app that will take your images and generate a sprite and the code to make it work. Nice time saver.
Using Twitter to Facilitate Classroom Discussion is about a history class. How could it be used in a web dev or web design class?

© vdebolt for Web Teacher, 2010. |
Permalink |
No comment |




Should your blog have an hCard?
vdebolt — Tue, 24 Nov 2009 13:44:47 +0000
What’s an hCard, you ask? It’s a digital version of a business card. You put it on your blog or website and it provides your name, your contact information and other information you want people to know. Because it’s digital, it can be exported from your web page to an address book and synched to a mobile phone. Google and Yahoo! both index information in hCards, so it gives you some search engine clout as well as providing portable contact information to your blog’s users.
You can provide only your name in an hCard, or you can give a physical address and phone number. If you are running a brick and mortar business, letting your customers have your phone number and address on their mobile phones might be a smart move. If you aren’t selling something at a physical location, you might just want to include your name, perhaps your URLs or an email contact.
Before you learn how to make an hCard, look at some in action. hCards are a particular type of HTML code called a microformat. A Blog Not Limited is the home of the queen of microformats, Emily Lewis. Scroll to the bottom of her page and look at that material where is says, “The Coolest Person I Know.” That information, which includes Emily’s name, email, and location is wrapped up in HTML behind the scenes that makes it an hCard. The hCard can be exported from her web page and saved as a contact. Emily wrote a book about microformats—Microformats Made Simple—and numerous blog posts on the topic. Here’s her post describing everything you’d ever need to know about hCard.
Here’s another blog with an hCard: New England Living. This blog uses the hCard in the footer of each post, and identifies only the post author’s full name as Alyson (New England Living). This isn’t the only blog I’ve seen with an hCard microformat in the post footers. It makes sense in each post footer if the blog has more than one author. If your blog has a single author, I think it would be much better placed on the page’s footer for each page of the blog. I have an hCard in the footer of my blog that simply provides my real name and a link to my sadly neglected site at vdebolt.com
Look at New Parent’s About Us page. Here is all the business information you would put in a full-blown hCard, but it isn’t in one. This is a place where an hCard would be very valuable. Or here, at the Austin Real Estate News and Advice Blog. The realtor’s name and phone number is given right there in the blog’s header, but there’s no downloadable hCard with the info that can be synched with a mobile phone. A realtor’s blog is a perfect spot for an hCard.
Ready to make one? The easiest way is to go to Microformats.org hCard Creator and fill in the form. As you add your information to the form fields, the HTML is generated beside it. Only fill in the fields for the information you want to share. Copy and paste the HTML into your blog in an appropriate place. An appropriate place might be the page footer or an About page. (Feel free to leave out that last line about the hCard Creator when you use the code.)
When you examine the code, you see that most of the magic is done by using various classes to define your data. You don’t really need to know why the microformat class is called “vcard” instead of “hcard,” but if you are interested in the reason, the article I mentioned by Emily Lewis tells you all about it. If you are geeky enough to make your own hCard by hand instead of using the hCard Creator, Emily’s article is the place to learn all the details.
How do you find and download hCards that are on web pages? The easiest way is to use the Operator Add-on in Firefox. When an hCard (or several other types of microformats) are on a web page, the Operator toolbar lets you know and has a menu option to view or export the information.
If you visit this page at A Blog Not Limited with the Operator Toolbar working in Firefox, you see three contacts.

One or all of the contacts can be exported to your address book and synched to your mobile phone.
The Operator toolbar also shows other microformats on the page. The image above shows: Events(2). hEvents can be exported, too, and added to your calendar. Microformats have many handy uses besides contact information via hCards.
If you are running a business with your blog, I think you need an hCard. If you are using your blog for other reasons, you need to decide for yourself how important having your contact information in an hCard format is to you.
Cross posted at BlogHer.

© vdebolt for Web Teacher, 2009. |
Permalink |
No comment |




Useful Links: Intro to HTML5, Univ. Web survey, paid to tweet
vdebolt — Mon, 23 Nov 2009 15:43:18 +0000
Introduction to HTML5, microformats and CSS3 is a screencast showing the building of a web page in HTML5.
State of the University Web Department Survey results are available at eduGuru. The survey included all sorts of interesting questions such as university size, CMS used, technology used, department size, decision makers, frequency of redesign and more.
What do you think of A Friend’s Tweet Could be an Ad? I find the idea offensive and have started to unfollow people who use their twitter stream to collect ad revenue. You may have ads on your blog, which is fine: the choice whether to read the ads is mine. But when an ad comes through your twitter stream like it’s normal content it’s no longer my choice. Web users have developed visual skills to filter past ads on web pages. There’s no visual cue on Twitter that would let you scan past a paid tweet. It’s deceptive.

© vdebolt for Web Teacher, 2009. |
Permalink |
No comment |