Design for people, Code for computers - Jasper Moelker (18 apr 2013)
0 likes875 views
The document presents Jasper Moelker, a frontend developer at De Voorhoede, detailing essential metadata practices for web development. It covers various topics including structured data, accessibility roles, and metadata formats, providing examples and sources for implementation. The content emphasizes the importance of technical details such as XML sitemaps, RSS feeds, and Open Graph metadata in modern web development.
Design for people, Code for computers - Jasper Moelker (18 apr 2013)
- 1. Jasper Moelker frontend developer De Voorhoede voorhoede.nl [email protected] +31 (0)6 4458 4074 Design for people - Code for computers
- 2. <h2 itemprop=”name”> Jasper Moelker </h2>, <span itemprop=”jobTitle”>frontend developer</span> <h2 itemprop=”affiliation”>De Voorhoede</h2> voorhoede.nl <a href=”mailto:[email protected]” item- prop=”email”>[email protected]</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 head example project: atelierPRO.nl • doctype • lang • charset • title • description • keywords • viewport
- 5. Device icons favicon <link rel=”shortcut icon” href=”/favicon.ico”> touch icons win8 tile <meta name=”msappli cation-TileColor” content=”#0099DA”/> <meta name=”msappli cation-TileImage” content=”logo.png”/> (source: modern.ie)
- 7. Structured data: WAI-ARIA www.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-relevant roletype +aria-activedescendant composite +aria-activedescendant group +aria-activedescendant +aria-autocomplete +aria-multiline +aria-readonly +aria-required textbox menuitemcheckbox +aria-multiselectable +aria-required tree +aria-multiselectable +aria-required listbox +aria-level +aria-multiselectable +aria-readonly grid +aria-autocomplete +aria-required combobox complementarymenuitemradio +aria-orientation slider +aria-expanded +aria-orientation separator +aria-expanded section +aria-pressed +aria-expanded button +aria-expanded link +aria-valuenow +aria-valuemin +aria-valuemax +aria-valuetext range +aria-expanded documentpresentation progressbar +aria-level +aria-selected row +aria-posinset +aria-setsize +aria-level listitem +aria-checked +aria-posinset +aria-selected +aria-setsize option +aria-required radiogroup +aria-required spinbutton contentinfoapplication menuitem navigation rowgroup checkbox +aria-level tablist command definition menubar landmark marquee directory scrollbar treeitem structure tabpanel treegrid toolbar banner search region stat tooltip widget article select menu timer img form main log note list input radio math Roles with a pale background and name in italics are abstract and cannot be used in content. Concrete roles have a yellow background and name in boldface. Access instructions at http://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 event metadata 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: WebPage schema.org include 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 & Organization schema.org example: <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&archive=0”> <span itemprop=”name”> Bam Utiliteitsbouw </span></a>
- 11. Structured data: Postal Address schema.org example: <h4>Locatie</h4> <div itemprop=”contentLocation” itemscope itemtype=”http://schema.org /PostalAddress”> <a href=”/nl/projects/filter?archive=0 &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 Media static 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 Graph ogp.me og 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 Search opensearch.org autodiscovery 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 Search opensearch.org description 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 feed xml 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 eerste paal geslagen van het Kindcentrum Nieuwe Damlaan in Schiedam. gaan samen- wonen in één gebouw en gaan vol vertrouwen de nieuwe samenw- erking tegemoet. </summary> <author><name>atelier PRO</name></author> </entry>
- 17. XML Sitemaps sitemaps.org example: <?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 Tools and reference in robots.txt (source: google.com/webmasters/tools )
- 18. Robots.txt www.robotstxt.org disallow example: User-agent: * Disallow: /cgi-bin/ Disallow: /tmp/ Disallow: /~joe/ sitemap index example: # http://www.sitemaps.org/protocol.html#submit_robots Sitemap: http://atelierpro.nl/nl/blog/sitemap Sitemap: http://atelierpro.nl/en/blog/sitemap Sitemap: http://atelierpro.nl/nl/office/sitemap Sitemap: http://atelierpro.nl/en/office/sitemap Sitemap: http://atelierpro.nl/nl/projects/sitemap Sitemap: http://atelierpro.nl/en/projects/sitemap
- 19. Humans.txt www.humanstxt.org reference 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