sonofbluerobotFront-End Engineering With Standards

Archive for the ‘link’ Category

Using Dublin Core HTML Markup for Increased Accessibility

Posted on: by j.albert.bowden.iiNo Comments

Dublin Core is a set of metadata elements that provide a fundamental group of text elements through which most resources can be described and catalogued. A Dublin Core metadata record is intended to be used for cross-domain information resource description and have become standards in the fields of library science and computer science.

Dublin Core Metadata Initiative (dcmi) was incorporated as in independent entity, providing an open forum for developing interoperable metadata standards ecompassing a broad range of purposes and business models.

The Dublin Core standard includes two levels: Simple and Qualified. Simple Dublin Core comprises 15 elements, while Qualified Dublin Core includes three additional elements and qualifiers that refine the semantics of the elements so they are useful in resource discovery. The context of this blog post will focuses on the Simple Dublin Core Metadata Element Set in conjunction with a related link element.

Utilizing Dublin Core meta elements provides ways for a document to be indexed using several distinct, searchable fields. Thus, the document can be searched by said fields meaning it can be located more specifically than documents not using Dublin Core, therefore increasing findability, searchability and locatability.

Simple Dublin Core Metadata Element Set

The Simple Dublin Core Metadata Element Set (DCMES) consists of 15 metadata elements, listed below:

Title Markup Description

Each Dublin Core element is optional and may be repeated. The DCMI has established standard ways to refine elements and encourage the use of encoding and vocabulary schemes. There is no prescribed order in Dublin Core for presenting or using the elements.
Contributor meta name="DC.Contributor" content="publisher-name" / An entity responsible for making contributions to the resource. Examples include a person, organization or service. Typically, the name of a Contributor should be used to indicate the entity.
Coverage meta name="DC.Coverage" content="World" / Spatial or temporal topic of the resource, spacial applicability of the resource or the jurisdiction under which the resource is relevant. Spatial topic and spatial applicability may be a named place or a location specified by geographic coordinates. Temporal topic may be a name period, date or date range. Jurisdiction may be a named administrative entity or a geographic place to which the resource applies. Best practice here is to used a controlled vocabulary such as the tgn. If appropriate, named places or time periods can be used in preference to numeric identifiers (such as sets of coordinates or date ranges).
Creator meta name="DC.Creator" content="Administrator" / An entity primarily responsible for making the resource, like a person, organization or service. Typically, the name of a Creator should be used to indicate the entity.
Date meta name="DC.Date" scheme="W3CDTF" content="2004-01-01"/ Point or period of time associated with an event in the lifecycle of a resource. May be used to express temporal information at any level of granularity. Best practice is to use an encoding scheme for Date.
Description meta name="DC.Description" lang="en" content="publisher-name" / Account of the resource; may include (but not limited to) an abstract, a table of contents, graphical representation, or a free-text account of the resource.
Format meta name="DC.Format" scheme="IMT" content="text/html" / File format, physical medium or dimensions of the resource. Examples of dimensions include size and duration. Best practice is to use a controlled vocabulary, as in this example using mime types.
Identifier meta name="DC.Identifier" scheme="uri" content="http://catalog.loc.gov/67-26020" / An unambiguous reference to the resource within a given context. Best practice is to identify said resource by means of a string conforming to a formal identification system.
Language meta name="DC.Language" content="en" / Language of the resource. Best practice is to use a controlled vocabulary.
Publisher meta name="DC.Publisher" content="publisher-name" / Entity responsible for making the resource available, including a person, service or organization. Typically the name of a Publisher should be used to indicate the entity.
Relation meta name="DC.Relation" content="publisher-name" / Related resource; best practice is to identify by means of a string conforming to a formal identification system.
Rights meta name="DC.Rights" content="http://example.org/legal-terms-of-use.html" / Information about rights held in and over the resource, typically including various property rights (including intellectual property rights) associated with the resource.
Source meta name="DC.Source" content="/meta-tags/" / Related resource from which described resource is derived; may be derived from the related resource in whole or in part. Best practice is to identify the related resource by means of a string conforming to a formal identification system.
Subject meta name="DC.Subject" lang="en" content="Heart Attack" / Topic of the resource, typically represented by keywords, key phrases or classification codes. Best practice is to use a controlled vocabulary. To describe the spatial or temporal topic of the resource use the Coverage element.
Title meta name="DC.Title" lang="en" content="Hamlet in Iceland; being the Icelandic romantic Ambales saga" / Resources given name, typically the name by which a resource is formally known.
Type meta name="DC.Type" scheme="DCMIType" content="Text" / Nature or genre of the resource, best practice is to use a controlled vocabulary, this example uses the dcmi Type Vocabulary. To describe file format, physical medium or the resources dimensions, use the Format element.

Note: as a general rule, element names may be mixed-case but should always have a lower-case first letter, commonly called camelCased.

Note: the value of the content attribute is defined to be cdata.

Authors need to use the link element to reference the definitions comprised by the element schema, like so:


<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/">

Authors can express Dublin Core metadata using simple meta and link elements, which describe how a Dublin Core metadata description set can be encoded in (x)html, which is also an html meta data profile as defined by the html specification. Utilizing Dublin Core is an extremly easy and extensible way for authors to make their content more findable, searchable, and locatable, thus increasing their content’s overall accessibility.

Prerendering in Chrome for Instant Pages and Continued User Experience

Posted on: by j.albert.bowden.iiNo Comments

Instant Pages is a new feature by Google which enables prerendering, where the browser grabs and caches most (if not all) likely documents required where the user goes next.

In Chrome 13+, Prerendering allows author’s to dictate which assets/resources are most likely to be necessary for the continued ux.

Prerendering is actually an extension of Firefox’s prefetching; Prerendering fetches all of the necessary resources of the next document.

Note: unlike Firefox, Chrome does not support meta-http and http header triggering methods.

As noted, Firefox supports prefetching via link element which instructs user agents to begin fetching the top-level resource at the url. There are comments about prefetching‘s weaknesses, but I’m going to chalk that up to the cadre of markup illiterate developers and their awesome enterprise code. When used properly, prefetching can lead to a continued ux too.

How to Trigger Prerendering

Trigger prerendering is apparently not so easy to do; it’s only useful to a site with a high degree of certainty of where their users will click next. Trigger prerendering incorrectly can cause the user’s selection load times to actually increase.

Authors can trigger prerendering by simply dropping an link rel="prerender" element into the markup and Chrome follows it, like so:


<link rel="prerender" href="http://example.org/index.html" />

Detecting When Your Site is Being Prerendered

even if you do not proactively trigger prerendering yourself, it is still possible that another site will instruct Chrome to prerender your site.

Prerender Documentation

I’m kind of speechless at that statement. How is that possible? Since it is, I’m going to assume “sites” that practice the black arts will be able to sabatoge your determined prerendering strategy by “telling Chrome” to prerender the wrong documents. That is completely speculative and with no proof, however, the documentation’s explanation is so vague, it leaves me to wonder.

Authors can detect prerendering via the Page Visibility api and/or test individual pages.

Authors can also use Chrome’s Task Manager to detect prerendering:

  • From Task Manager, load the desired test page
  • Look for Prerender in the Task Manager, which looks like so:
  • Prerender Detection via Chrome Task Manager

Refrences

Using OpenID With Your Domain(s)

Posted on: by j.albert.bowden.iiNo Comments
myOpenID

Setting up OpenID to work with your own domains is super easy. Add the following markup to your documents head.


<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://youraccount.myopenid.com/" />
<link rel="openid2.local_id" href="http://youraccount.myopenid.com" />
<link rel="openid2.provider" href="http://www.myopenid.com/server" />
<meta http-equiv="X-XRDS-Location" content="http://www.myopenid.com/xrds?username=youraccount.myopenid.com" />

That’s it….now you can log into OpenID enabled sites with myOpenID as your OpenID server.

link rel="prefetch" Element

Posted on: by j.albert.bowden.iiNo Comments

Prefetch Your Content for a Primed Cache Experience

By Anticipated Preloading and explicitly pre-loading files, docs, resources that are not immediately in use, you give users a primed cache experience.


<link rel="prefetch" href="http://domain.com/pix/of-your-moms/at-my-house.png" />

link rel="prefetch" directs the browser to begin loading the image specified by href="" once the current document has completely loaded. When the user directs to the page (hopefully it’s next, but not necessarily) that has prefetched images, you have one less request necessary to make that page load.