Third web design workshop:
Machines Read, Too (with a little help from their human friends)
PatrickMooney, Co-Lead TA, Department of English Office Hours this spring (for TAs): Th 1:30-2:30 (& by appt), in Nicoletti's. Email:patrickmooney AT umail DOT ucsb DOT edu Voicemail: (805) 272-0069
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-04-02T13:30–2015-04-02T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-04-09T13:30–2015-04-09T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-04-16T13:30–2015-04-16T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-04-23T13:30–2015-04-23T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-04-30T13:30–2015-04-30T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-05-07T13:30–2015-05-07T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-05-14T13:30–2015-05-14T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-05-21T13:30–2015-05-21T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-05-28T13:30–2015-05-28T14:30
Patrick Mooney's Co-Lead TA office hours: Nicoletti's, in the UCen, 2015-06-04T13:30–2015-06-04T14:30
During the first two workshops in this series, our focus was on writing web pages in such a way that the information was visible, intelligible, and attractive to humans viewing the web pages. But web pages aren't just viewed by humans; they're also read in various ways by machines. Of course, one of these has been touched on briefly already: HTML files are read by web browsers and rendered to produce the visible web pages that all of us interact with all the time. But there are some other more or less obvious examples of web pages being read by machines that we should consider:
Web pages are parsed and indexed by search engines.
Web pages are parsed by social networks when content is shared over those networks.
Web pages can be parsed by browser extensions and other pieces of software in order to extract structured data about from the human-readable text that is encoded in the page.
There are other applications that we won't be focusing on today, though following the principles in today's lecture will help set you up to take care of these concerns, too.
This workshop focuses on how information that's represented in human-readable web pages can be made more machine-readable. We're primarily talking about:
additional HTML elements, especially those in the <head> section, which encode metadata.
microformats, a set of community-driven standards for exposing certain types of information to machines so that it can be automatically processed. (For instance, you can use microformats to mark up information about people so that they can easily be added to an address book, or to mark up information about events so that they can be easily added to a user's calendar, or to tell software about your relationship to another person to whose information you link.)
There are plenty of other microformats (such as microformats for outlines and resumes or CVs), as well as non-microformat based ways to do this (such as microdata and RDFa).
However, we're focusing on these three microformats today because they introduce the relevant concepts in a comparatively simple, yet genuinely useful, manner, and because they provide an immediately useful foundation upon which new web designers can build.
ways of pointing out information to Google (and other search engines) so that Google can display more relevant and attractive snippets of your pages when they turn up in search results.
sitemaps, a way of providing hints to search engines about such things as the relative importance of pages on your web site and about where to look for pages they might not find just by crawling the web.
OpenGraph, a system for providing metadata that's directly leveraged by Facebook and other social networks to control how a page looks when it's shared in a social-network setting.
some additional search-engine related topics.
Software we're using
I recommend that you install the Operator Firefox extension and set up at least a minimalist Google+ profile, if you haven't already. (You are also welcome to connect to me on G+, if you'd like.) More details can be found here.
Recommended preparation
Homework (which you can adapt in scope to your own schedule): As I said in the first workshop, you won't actually be learning these skills unless you practice them. My recommendation is that you produce a short "about me" HTML document that includes your name, a photo, and several links to you on other web sites (social networks, the English department's profile for you, etc.). I also recommend that your markup be semantic rather than presentational, and we'll talk in even more detail about why I recommend this than we did in the second workshop. (If you need more information about what I mean when I say this, you might want to watch the screencast or view the slideshow from the first workshop.)
Recommended background reading
Feel free to peruse any of the links in the sections outlined below. You may find, if you are pressed for time (and who among us isn't?), that a good set of quick background reading would be skimming one or more articles in the conceptual background section, plus looking at the descriptions of the hCard and/or XFN microformats. (If the technical descriptions seem difficult, don't let that deter you from coming: I'll go over the important bits in layperson's terms.)
Useful links
Available here, and divided into these categories: