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

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

on

  • 389 views

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.

Statistics

Views

Total Views
389
Views on SlideShare
383
Embed Views
6

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 6

http://www.linkedin.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Jasper Moelkerfrontend developerDe Voorhoedevoorhoede.nljasper@voorhoede.nl+31 (0)6 4458 4074Design for people - Code for computers
  • <h2 itemprop=”name”> Jasper Moelker</h2>,<span itemprop=”jobTitle”>frontenddeveloper</span><h2 itemprop=”affiliation”>De Voorhoede</h2>voorhoede.nl<a href=”mailto:jasper@voorhoede.nl” item-prop=”email”>jasper@voorhoede.nl</a><a href=”tel:0031644584074” itemprop=”tele-phone”>+31 (0)6 4458 4074</a><div itemtype=”http://schema.org/Person”></div><h1>Design for people - Code for computers</h1>
  • All about the metadata• basic metadata• device icons• structured data• open graph• open search• rss feeds• xml sitemaps• robots & humans.txt
  • It starts in your headexample project:atelierPRO.nl• doctype• lang• charset• title• description• keywords• viewport
  • 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: modern.ie)
  • Structured data: HTML5dev.w3.org/html5/markup• <article>• <aside>• <details>• <dialog>• <summary>• <figure>• <figcaption>• <footer>• <header>• <hgroup>• <nav>• <section>• <time>• ...
  • Structured data: WAI-ARIAwww.w3.org/TR/wai-aria+aria-atomic+aria-busy+aria-controls+aria-describedby+aria-disabled+aria-dropeffect+aria-flowto+aria-grabbed+aria-haspopup+aria-hidden+aria-invalid+aria-label+aria-labelledby+aria-live+aria-owns+aria-relevantroletype+aria-activedescendantcomposite+aria-activedescendantgroup+aria-activedescendant+aria-autocomplete+aria-multiline+aria-readonly+aria-requiredtextboxmenuitemcheckbox+aria-multiselectable+aria-requiredtree+aria-multiselectable+aria-requiredlistbox+aria-level+aria-multiselectable+aria-readonlygrid+aria-autocomplete+aria-requiredcombobox 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 athttp://www.w3.org/TR/wai-aria/rdf_model.html.role 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: developer.mozilla.org/en-US/docs/Accessibility ) (source: www.w3.org/TR/wai-aria/roles )
  • Structured data: examples<- example author<- example app<- example eventmetadata formats• schema.org• microformats• microdata• RDFa(source: http://support.google.com/webmasters /bin/answer.py?hl=en&answer=2650907 )(source: google.com/webmasters/tools/richsnippets )
  • Structured data: WebPageschema.orginclude protocol:<html lang=”nl” xmlns:og=”http://opengraph-protocol.org/schema/”>markup example:<body itemscope itemtype=”http://schema.org/WebPage”><h1 itemprop=”name”> Gemeentehuis Bronckhorst</h1><h2 itemprop=”headline”> <em>Uitzonderlijk duurzaam</em> en poëtische eenvoud</h2>
  • Structured data: Person & Organizationschema.orgexample:<h5>projectarchitect</h5><a itemprop=”author” itemscope itemtype=”http://schema.org/Person” href=”/nl/projects/filter?person_id=2”> <span itemprop=”name”> Dorte Kristensen </span></a><h5>bouwkundig aannemer</h5><a itemprop=”author” itemscope itemtype=”http://schema.org/http://schema.org /Organization” href=”/nl/projects /filter?partner_id=2&amp;archive=0”> <span itemprop=”name”> Bam Utiliteitsbouw </span></a>
  • Structured data: Postal Addressschema.orgexample:<h4>Locatie</h4><div itemprop=”contentLocation” itemscope itemtype=”http://schema.org /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>
  • Share on Social Mediastatic share url example:<a href=”http://www.linkedin.com/shareArticle?mini=true &url={articleUrl}&title={articleTitle} &summary={articleSummary}&source={articleSource}”> Share on LinkedIn</a>(source: developer.linkedin.com/documents/share-linkedin )
  • Open Graphogp.meog metadata example:<!DOCTYPE html><html xmlns:og=”http://opengraphprotocol.org/schema/” lang=”nl”><!-- ...basic metadata... --><!-- open graph: --><meta property=”og:site_name” content=”atelier PRO”><meta property=”og:url” content=”http://www.atelierpro.nl/nl/ 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=”http://atelierpro.nl/images/ project/gemeentehuis-bronckhorst.png”><meta property=”og:image:width” content=”135”><meta property=”og:image:height” content=”90”><!-- ... -->(source: www.atelierpro.nl/nl/projects/1/gemeentehuis-bronckhorst )
  • Open Searchopensearch.orgautodiscovery example:<link rel=”search” type=”application/opensearchdescription+xml” href=”http://z-ecx.images-amazon.com/images/ G/01/imdb/images/imdbsearch-3349468880._ V398722001_.xml” title=”IMDb” />(source: www.imdb.com/find?s=all&q=reservoir )
  • Open Searchopensearch.orgdescription document example:<OpenSearchDescription xmlns=”http://a9.com/-/spec/opensearch/1.1/””> <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: www.atelierpro.nl/nl/projects/filter?keywords=bronckhorst )
  • RSS feedxml file example:<?xml version=”1.0” encoding=”utf-8”?> <feed xmlns=”http://www.w3.org/2005/Atom”> <title>atelier PRO News</title> <link href=”http://atelierpro.nl/nl/blog/feed” rel=”self”/> <updated>2013-04-18T11:18:04Z</updated> <entry> <title>Eerste paal Damlaan</title> <link href=”http://atelierpro.nl/nl/blog/106/eerste-paal-damlaan” /><id>http://atelierpro.nl/nl/blog/106/eerste-paal-damlaan</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>
  • XML Sitemapssitemaps.orgexample:<?xml version=”1.0” encoding=”UTF-8”?><urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9”> <url> <loc>http://atelierpro.nl/nl/blog/102</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: google.com/webmasters/tools )
  • Robots.txtwww.robotstxt.orgdisallow example:User-agent: *Disallow: /cgi-bin/Disallow: /tmp/Disallow: /~joe/sitemap index example: # http://www.sitemaps.org/protocol.html#submit_robotsSitemap: http://atelierpro.nl/nl/blog/sitemapSitemap: http://atelierpro.nl/en/blog/sitemapSitemap: http://atelierpro.nl/nl/office/sitemapSitemap: http://atelierpro.nl/en/office/sitemapSitemap: http://atelierpro.nl/nl/projects/sitemapSitemap: http://atelierpro.nl/en/projects/sitemap
  • 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