Your SlideShare is downloading. ×
Design for people, Code for computers - Jasper Moelker (18 apr 2013)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Design for people, Code for computers - Jasper Moelker (18 apr 2013)


Published on

As web developers we commonly create a presentation of content using html and css styles to make it more appealing and readable for people. With a little extra effort we can make the same content just …

As web developers we commonly create a presentation of content using html and css styles to make it more appealing and readable for people. With a little extra effort we can make the same content just as accessible to computers and applications. This can be achieved by including a variety of metadata within the markup and by linking external metadata files. This presentation looks at these different metadata at a glance, including: basic metadata, device icons, structured data, open graph, open search, rss feeds, xml sitemaps, robots.txt & humans.txt.

This presentation was first presented during the Pecha Kucha meeting of Fronteers at de Voorhoede, Amsterdam, 18 April 2013.

Published in: Design, Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Jasper Moelkerfrontend developerDe (0)6 4458 4074Design for people - Code for computers
  • 2. <h2 itemprop=”name”> Jasper Moelker</h2>,<span itemprop=”jobTitle”>frontenddeveloper</span><h2 itemprop=”affiliation”>De Voorhoede</h2><a href=”” item-prop=”email”></a><a href=”tel:0031644584074” itemprop=”tele-phone”>+31 (0)6 4458 4074</a><div itemtype=””></div><h1>Design for people - Code for computers</h1>
  • 3. All about the metadata• basic metadata• device icons• structured data• open graph• open search• rss feeds• xml sitemaps• robots & humans.txt
  • 4. It starts in your headexample• doctype• lang• charset• title• description• keywords• viewport
  • 5. Device iconsfavicon<linkrel=”shortcut icon”href=”/favicon.ico”>touch iconswin8 tile<meta name=”msappli cation-TileColor” content=”#0099DA”/><meta name=”msappli cation-TileImage” content=”logo.png”/>(source:
  • 6. Structured data:• <article>• <aside>• <details>• <dialog>• <summary>• <figure>• <figcaption>• <footer>• <header>• <hgroup>• <nav>• <section>• <time>• ...
  • 7. Structured data: complementarymenuitemradio+aria-orientationslider+aria-expanded+aria-orientationseparator+aria-expandedsection+aria-pressed+aria-expandedbutton+aria-expandedlink+aria-valuenow+aria-valuemin+aria-valuemax+aria-valuetextrange+aria-expandeddocumentpresentationprogressbar+aria-level+aria-selectedrow+aria-posinset+aria-setsize+aria-levellistitem+aria-checked+aria-posinset+aria-selected+aria-setsizeoption+aria-requiredradiogroup+aria-requiredspinbuttoncontentinfoapplicationmenuitemnavigationrowgroupcheckbox+aria-leveltablistcommanddefinitionmenubarlandmarkmarqueedirectoryscrollbartreeitemstructuretabpaneltreegridtoolbarbanner searchregionstattooltipwidgetarticleselectmenu timerimgform mainlognotelistinputradiomathRoles with a pale background and name initalics are abstract and cannot be used incontent.Concrete roles have a yellow background andname in boldface.Access instructions at data model (excerpt):role markup example:<ul id=”fontMenu” class=”menu” role=”menu”aria-hidden=”true”><li id=”sans-serif”class=”menu-item”role=”menuitemradio”tabindex=”-1”aria-controls=”st1”aria-checked=”true”>Sans-serif</li><li id=”serif”class=”menu-item”role=”menuitemradio”tabindex=”-1”aria-controls=”st1”aria-checked=”false”>Serif</li>...(source: ) (source: )
  • 8. Structured data: examples<- example author<- example app<- example eventmetadata formats•• microformats• microdata• RDFa(source: /bin/ )(source: )
  • 9. Structured data: WebPageschema.orginclude protocol:<html lang=”nl” xmlns:og=””>markup example:<body itemscope itemtype=””><h1 itemprop=”name”> Gemeentehuis Bronckhorst</h1><h2 itemprop=”headline”> <em>Uitzonderlijk duurzaam</em> en poëtische eenvoud</h2>
  • 10. Structured data: Person & Organizationschema.orgexample:<h5>projectarchitect</h5><a itemprop=”author” itemscope itemtype=”” href=”/nl/projects/filter?person_id=2”> <span itemprop=”name”> Dorte Kristensen </span></a><h5>bouwkundig aannemer</h5><a itemprop=”author” itemscope itemtype=” /Organization” href=”/nl/projects /filter?partner_id=2&amp;archive=0”> <span itemprop=”name”> Bam Utiliteitsbouw </span></a>
  • 11. Structured data: Postal Addressschema.orgexample:<h4>Locatie</h4><div itemprop=”contentLocation” itemscope itemtype=” /PostalAddress”> <a href=”/nl/projects/filter?archive=0 &amp;keywords=%22Hengelo%22”> <span itemprop=”streetAddress”> Elderinkweg 2 </span><br /> <span itemprop=”addressLocality”> Hengelo </span><br /> <span itemprop=”addressCountry”> Nederland </span></a></div>
  • 12. Share on Social Mediastatic share url example:<a href=” &url={articleUrl}&title={articleTitle} &summary={articleSummary}&source={articleSource}”> Share on LinkedIn</a>(source: )
  • 13. Open Graphogp.meog metadata example:<!DOCTYPE html><html xmlns:og=”” lang=”nl”><!-- ...basic metadata... --><!-- open graph: --><meta property=”og:site_name” content=”atelier PRO”><meta property=”og:url” content=” projects/1/gemeentehuis-bronckhorst”><meta property=”og:title” content=”Gemeentehuis Bronckhorst”><meta property=”og:description” content=”Gemeentehuis Bronckhorst is uitzonderlijk duurzaam en poetisch eenvoudig...”><meta property=”og:type” content=”website”><meta property=”og:image” content=” project/gemeentehuis-bronckhorst.png”><meta property=”og:image:width” content=”135”><meta property=”og:image:height” content=”90”><!-- ... -->(source: )
  • 14. Open Searchopensearch.orgautodiscovery example:<link rel=”search” type=”application/opensearchdescription+xml” href=” G/01/imdb/images/imdbsearch-3349468880._ V398722001_.xml” title=”IMDb” />(source: )
  • 15. Open Searchopensearch.orgdescription document example:<OpenSearchDescription xmlns=”””> <ShortName>PRO search (nl)</ShortName> <Language>nl</Language> <Url type=”text/html” method=”get” template=”http://atelierpro.local/nl/ projects/filter?keywords={searchTerms}”/></OpenSearchDescription>response elements example:<meta name=”totalResults” content=”4”/><meta name=”startIndex” content=”1”/><meta name=”itemsPerPage” content=”10”/>(source: )
  • 16. RSS feedxml file example:<?xml version=”1.0” encoding=”utf-8”?> <feed xmlns=””> <title>atelier PRO News</title> <link href=”” rel=”self”/> <updated>2013-04-18T11:18:04Z</updated> <entry> <title>Eerste paal Damlaan</title> <link href=”” /><id></id><updated>2013-04-12T00:00:00Z</updated><summary>Op woensdag 10 april 2013 is op feestelijke wijze de eerstepaal geslagen van het Kindcentrum Nieuwe Damlaan in Schiedam. gaan samen-wonen in &eacute;&eacute;n gebouw en gaan vol vertrouwen de nieuwe samenw-erking tegemoet.</summary><author><name>atelier PRO</name></author></entry>
  • 17. XML Sitemapssitemaps.orgexample:<?xml version=”1.0” encoding=”UTF-8”?><urlset xmlns=””> <url> <loc></loc> <lastmod>2013-04-03T14:37:53+01:00</lastmod> <changefreq>monthly</changefreq> <priority>0.5</priority> </url>upload to Google & Bing Webmaster Toolsand reference in robots.txt(source: )
  • 18. Robots.txtwww.robotstxt.orgdisallow example:User-agent: *Disallow: /cgi-bin/Disallow: /tmp/Disallow: /~joe/sitemap index example: #
  • 19. Humans.txtwww.humanstxt.orgreference in head example:<link type=”text/plain” rel=”author” href=”http://domain/humans.txt” />content: Presenter: Jasper Moelker Twitter @jbmoelker/* Special thanks to: */ Host: Wilfred Nas Twitter: @wnas Platform: fronteers Twitter: @fronteers