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.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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