![Page 1: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/1.jpg)
Introduction to Web DesignFor Literary Theorists
Third Workshop:Machines Read, Too (just not well)
30 May 2014Patrick Mooney
Co-Lead TA, 2013-2015Department of English
UC Santa Barbara
![Page 2: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/2.jpg)
Objectives for this workshop series
● To learn the basic skills involved in building a small website for a course or section.
● To actually build such a web site, and to do a good job of it.
● To engage in practices that minimize the labor required to do so.
● To make your teaching practices more visible on the web.
● To be able to read various versions of HTML and CSS in other places on the web.
![Page 3: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/3.jpg)
Objectives for today’s workshop
● In the last two workshops, I’ve argued that your markup for your site should be semantic (indicating the structure of your document) rather than presentational (because HTML is not a word-processing application).
● In the last workshop, we talked about how to control the presentation of your documents with CSS.
● Today will present the other half of that argument: semantic markup makes your pages intelligible to machines as well as humans.
![Page 4: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/4.jpg)
More specifically …
● Today we will be talking about:– Additional HTML tags (especially in the <head>)
– Microformats (http://microformats.org)
– Sitemaps (http://sitemaps.org)
– OpenGraph (http://ogp.me)
– Some things Google likes
![Page 5: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/5.jpg)
Details, details ...
● I’m going to be moving over a lot of details rather quickly today.
● You don’t need to memorize them all.– There are great references on the web, of course.– This presentation will be online in a few days.
– What’s important is that you pick up major concepts and work along with them.
– Come talk to me in my Lead TA office hours if you have questions!
● A collection of useful links is online at http://is.gd/todoho.
![Page 6: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/6.jpg)
Reminders from previous workshops
● HTML is the standard language for displaying content on web sites.
● An HTML document (“web page”) is a plain text file with markup (“tags”) that indicate the structure of the document to machines that render or otherwise interpret it.
● Your HTML should focus on describing the document’s structure, rather than its appearance.– To put it another way, you should separate content from
information about its presentation.
– Describing the appearance of well-structured content is the function of CSS.
![Page 7: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/7.jpg)
A minimally acceptable XHTML document
● The <!DOCTYPE> declaration is (to you) a string of gibberish whose purpose is to tell the browser what flavor of HTML you’re using.
● The xmlns= attribute on the <html> tag tells XML parsers how to parse the HTML.● You can just look up these values, or (even better) use existing documents as
templates.
![Page 8: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/8.jpg)
Caddy came to the door and stood there, looking at Father and Mother. Her eyes flew at me, and away. I began to cry. It went loud and I got up. Caddy came in and stood with her back to the wall, looking at me. I went toward her, crying, and she shrank against the wall and I saw her but I pulled at her dress. Her eyes ran.
Versh said, Your name Benjamin now. You know how come your name Benjamin now. They making a bluegum out of you.
— William Faulkner, The Sound and the Fury (page 44 in the Norton Critical Edition)
So how do machines see text?
![Page 9: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/9.jpg)
Why be nice to machines?
1. It’s helpful to your users in various ways, especially the tech-savvy ones.
2. It can enhance the visual appeal of your information when it’s been processed by machines:– Search engine results
– Shares on Facebook, Google+, etc.
3. Like any constituency, machines appreciate it when you pander to their preferences.
![Page 10: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/10.jpg)
Some additional <head> contents
● <link> – indicates that the HTML file depends on (in some sense) another file to be properly rendered or otherwise processed.
● An example you saw in workshop two:<head> <link rel="stylesheet" type="text/css" href="styles.css"> <title>Some Books I've Read</title></head><body>[...]
● But there are other ways for HTML documents to depend on other documents. We’ll talk about some of these later today.
![Page 11: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/11.jpg)
The <meta> tag
● Always goes in the <head> section of the document.
● As you might expect, encodes meta-information about the document.
● This information is not directly visible to the viewer, but is meaningful to various types of automatic processing.
● There is no authoritative and definitive vocabulary for meta-information, but there are very common vocabularies.
![Page 12: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/12.jpg)
Some examples<meta name="generator" content="Bluefish 2.2.3" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Patrick Mooney" />
<meta name="copyright" content="Copyright © 2014 Patrick Mooney" />
<meta name="keywords" content="Southern literature, UCSB, spring 2014, Faulkner, Eudora Welty" />
<meta name="description" content="Notes for my discussion section in English 133SO, Spring 2014, at UC Santa Barbara." />
<meta name="date" content="2014-05-29T03:47:45-0700" />
![Page 13: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/13.jpg)
Indicating the (natural) language of your text
● You can add the lang= attribute to any HTML tag:
<body lang="en"><p lang="en-US">In J.M. Synge’s <cite>The Playboy of the Western World</cite>, Christy Mahon refers to a shovel as a <q lang="en-IE">loy</q>.</p></body>
● You should generally be only as specific as you need to be.– jp means “Japanese”; jp-JP means “Japanese as
spoken in Japan.”
![Page 14: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/14.jpg)
Microformats
● Are a way of easily indicating certain types of information to automatic processors while remaining invisible to users in browsers:– Identity information (name, address, phone
number, website, etc.)
– Calendar information (event times, locations, etc.)
– Relationships
– Recipes
– Etc.
● Think of them as a way of pointing and yelling “Here it is!” at parsing software.
![Page 15: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/15.jpg)
Attributes for any tag
● <tag id="something">– Attaches a unique ID to an individual tag for some
purpose of your own.
● <tag class="something something_else">– Indicates that the tag belongs to one or more
groups that you yourself designate for some purpose of your own.
● One of these “purposes of your own” involves marking content for styling.
● There are other purposes …
![Page 16: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/16.jpg)
Marking up personal information with hCard
● Find the HTML tag that encloses all of the relevant information or, if there isn’t one, surround the information with <span> ... </span> or <div> ... </div>. Give this element the class vcard.
● Mark up whatever relevant information is there with class names from the hCard vocabulary.– The only required piece of information is fn
(“formatted name”), but you can provide a lot of other information if you’d like: email, telephone, web page, address, birthday, photo, etc.
![Page 17: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/17.jpg)
Example:An “about me” web page on your site.
Also:Why bother?
![Page 18: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/18.jpg)
Some more notes
● If you have full control over your page’s code, you should add the hCard profile to your document’s <head>:
<link rel="profile" href="http://microformats.org/profile/hcard" />
● Remember that all you’re really doing is pointing out to non-browser parsers where a certain type of information is.
● You can wind up with a lot of extra <div>s and <span>s. Remember that HTML rendering collapses whitespace, and you can take advantage of this.
![Page 19: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/19.jpg)
Another microformat: hCalendar
● Used for describing events in a machine-readable way.
● If you can, add the profile to your document’s <head>:
<link rel="profile" href="http://microformats.org/profile/hcalendar">
● Mark up the element containing all of the information as class="vevent".
● Required information: when the event starts (dtstart) and its description (summary).
![Page 20: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/20.jpg)
Other considerations
● What if the human-readable information is not machine-friendly?– Use the <abbr> (abbreviation) tag to encode a
machine-friendly version in the tag’s title attribute:<p class="vevent"><span class="summary"> First paper due</span> at <abbr class="dtstart" title="2014-05-19T12:00">noon on May 19</abbr>.</p>
● If you have multiple events on a web page, you can be polite to the parser by giving an element that contains all of them (perhaps <div> or <body>) the class vcalendar.
![Page 21: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/21.jpg)
Examples
Marking up events on a section guidelines handout.
Validating your semantic markup.
![Page 22: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/22.jpg)
A final microformat: XFN
● Used for indicating relationships between people.
● If you can, add the profile to your document’s <head>:
<link rel="profile" href="http://gmpg.org/xfn/11">
● Really simple: just add rel="[something meaningful]" to your <a href> links.
● Theoretically, you should use this to talk about your relationship to a real human when you like to a web page representing them: a blog, a Facebook or LinkedIn profile.
![Page 23: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/23.jpg)
What you can put in rel= values
relationship category
XFN values
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
● The only one I myself use with any regularity is rel="me", which means “The page I’m pointing to also represents me.”
● There are plenty of other things you can do with rel= values, though we’re not discussing them.
![Page 24: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/24.jpg)
Be nice to Google
● One of the reasons for using microformats: Google leverages them for deciding how to display search results.– If you know them, you can also use RDF or microdata.
● Indicate to Google that your content belongs to you with rel="author" markup:– <a href="[your Google+ profile URL]?
rel=author">, or – <link rel="author" href="[your Google+ profile URL]"> in your document’s <head>.
– Also link back to your website from your G+ profile.
![Page 25: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/25.jpg)
Sitemaps
● A way of providing hints to search engines:– Where are files they might not otherwise find?
– How should various documents on your own website be ranked relative to each other?
– How often should search engines check for document updates?
● An XML file, called sitemap.xml, at the root of the site’s directory.– XML is just another markup language, conceptually
similar to HTML, without a completely fixed vocabulary. XML vocabularies depend on context.
![Page 26: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/26.jpg)
A sample
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://patrickbrianmooney.nfshost.com/~patrick/</loc> <changefreq>weekly</changefreq> <priority>0.9</priority> </url>
<url> <loc>http://patrickbrianmooney.nfshost.com/~patrick/credits.html</loc> <changefreq>weekly</changefreq> <priority>0.1</priority> </url></urlset>
● xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" just specifies the location of a machine-intelligible document that explains the XML vocabulary to parsers.
![Page 27: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/27.jpg)
Some considerations
● Sitemaps are understood by Google, Bing, Yahoo!, and other search engines.
● Information in your sitemap that points to a domain name other than the one on which your sitemap is hosted will be ignored.
● As in so many other ways, if a search engine can tell that you’re trying to deceive it somehow, this actually hurts your search engine ranking.
● You can sign up for Google Webmaster Tools (there’s one for Bing, too) to see stats about your website and make sure that your sitemap is understood.
![Page 28: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/28.jpg)
Open Graph
● A way of providing basic information that controls how social networks display your web pages.
● Facebook-originated, but also understood by LinkedIn and Google+ (and others).
● Consists of a set of tags you put in your document’s <head>.
● If you omit it, social networks will try to guess based on other page information.
● Twitter and Pinterest understand it but prefer that you use their own metadata vocabularies.
![Page 29: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/29.jpg)
● Add a bit of verbiage to your root <html> element:<html prefix="og: http://ogp.me/ns#">
● Alas, this is technically invalid in any version of HTML other than HTML5.
● However, even if it’s technically invalid, it still works fine.
● Four characteristics are mandatory to be minimally compliant:
<meta property="og:title" content="Discussion Notes for George Eliot's Middlemarch" />
<meta property="og:type" content="website" />
<meta property="og:url" content="[the document’s actual URL]" />
<meta property="og:image" content="[an image URL]" />
● There are other properties you can specify for more control.
![Page 30: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/30.jpg)
Increasing your search engine ranking
● Write valid HTML.● Engage in good semantic markup practices so
that search engines understand the structure of your document.– Put meaningful values in <h1>, <h2>, etc.
– Use microformats (or microdata or RDF).
– Check the validity of your documents using validators. There are good ones available free on the Internet.
● Never ever try to deceive search engines.
![Page 31: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/31.jpg)
● Treat your own home page as a central hub for your online presence.– Link to it from your other online presences.
– Link back to your other online presences from it.
– This process of reciprocal linking helps search engines to determine that your identity hub is, in fact, your identity hub.
● Hope for links to your content from other places.
● Use good metadata to describe your site.
![Page 32: Web Design for Literary Theorists III: Machines Read, Too (just not well) (v 1.0)](https://reader034.vdocument.in/reader034/viewer/2022051817/548249665806b501058b4660/html5/thumbnails/32.jpg)
How much of this is worthwhile?
● Admittedly, doing all of this for every HTML document that you write would be an awful lot of work, especially at first.
● The short answer: you should do whatever you feel comfortable doing and have time to do. Each of the techniques we’ve talked about today will benefit you in some ways.
● As with any skill, it gets easier as you do it more often.