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

  • 185 views
Uploaded 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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
185
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Jasper Moelkerfrontend developerDe Voorhoedevoorhoede.nljasper@voorhoede.nl+31 (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>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>
  • 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 project:atelierPRO.nl• 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: modern.ie)
  • 6. Structured data: HTML5dev.w3.org/html5/markup• <article>• <aside>• <details>• <dialog>• <summary>• <figure>• <figcaption>• <footer>• <header>• <hgroup>• <nav>• <section>• <time>• ...
  • 7. 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 )
  • 8. 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 )
  • 9. 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>
  • 10. 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>
  • 11. 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>
  • 12. 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 )
  • 13. 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 )
  • 14. 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 )
  • 15. 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 )
  • 16. 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>
  • 17. 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 )
  • 18. 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
  • 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