Add microdata schema to example applications

Use WebApplication schema to provide feature rich
description to Marionette example applications:
- schema based on https://schema.org/WebApplication
- all required field are provided
- the changes do not change layout at all
- the changes provides better description under readers

src/sections/_examples.jade

@@ -1,47 +1,56 @@
 section.example-apps.column-contain
   h2 Example Apps
   .row
-    .example.col-3.left
+    .example.col-3.left(itemscope, itemtype="http://schema.org/WebApplication")
       header
-        h3 Marionette Wires
-        a.link(href="http://www.marionettewires.com", target= "_blank")
-          img(src="images/screenshots/wires.png", alt="Marionette Wires")
-      p.description.
+        h3(itemprop="name") Marionette Wires
+        link(itemprop="applicationCategory", href="http://schema.org/WebApplication")
+        a.link(href="http://www.marionettewires.com", itemprop="url", target= "_blank")
+          img(src="images/screenshots/wires.png", alt="Marionette Wires", itemprop="screenshot")
+      p.description(itemprop="description").
         An opinionated Marionette starter app.
-      ul
+      small.hidden-visually(itemprop="operatingSystem").
+        Requirements: modern web browsers
+      ul(itemprop="featureList")
         li Browserify
         li Babel (ES6)
         li Handlebars
         li Gulp
       .cl
       .btn-wrapper
-        a.btn.btn-action(href = "https://github.com/thejameskyle/marionette-wires", target= "_blank") View Source
+        a.btn.btn-action(href="https://github.com/thejameskyle/marionette-wires", itemoprop="sameAs", target= "_blank") View Source
 
-    .example.col-3.left
+    .example.col-3.left(itemscope, itemtype="http://schema.org/WebApplication")
       header
-        h3 Gistbook
-        a.link(href="http://www.gistbook.io", target= "_blank")
-          img(src="images/screenshots/gistbook.png", alt="Gistbook")
-      p.description.
-        An app to write about technical subjects.
-      ul
+        h3(itemprop="name") Gistbook
+        link(itemprop="applicationCategory", href="http://schema.org/WebApplication")
+        a.link(href="http://www.gistbook.io", itemprop="url", target= "_blank")
+          img(src="images/screenshots/gistbook.png", itemprop="screenshot", alt="Gistbook")
+      p.description(itemprop="description").
+        An app to write about technical subjects
+      small.hidden-visually(itemprop="operatingSystem").
+        Requirements: modern web browsers
+      ul(itemprop="featureList")
         li Webpack
         li Babel (ES6)
         li Handlebars
         li Grunt
       .cl
       .btn-wrapper
-        a.btn.btn-action(href = "https://github.com/jmeas/gistbook", target= "_blank") View Source
+        a.btn.btn-action(href="https://github.com/jmeas/gistbook", itemprop="sameAs", target= "_blank") View Source
 
-    .example.col-3.left
+    .example.col-3.left(itemscope, itemtype="http://schema.org/WebApplication")
       header
-        h3 Edit
-        a.link(href="http://www.edit.sx", target= "_blank")
-          img(src="images/screenshots/edit.png", alt="Edit")
-      p.description.
+        h3(itemprop="name") Edit
+        link(itemprop="applicationCategory", href="http://schema.org/WebApplication")
+        a.link(href="http://www.edit.sx", itemprop="url", target= "_blank")
+          img(src="images/screenshots/edit.png", itemprop="screenshot", alt="Edit")
+      p.description(itemprop="description").
         A collaborative tool to share photographs.
-      ul
+      small.hidden-visually(itemprop="operatingSystem").
+        Requirements: modern web browsers
+      ul(itemprop="featureList")
         li CoffeeScript
       .cl
       .btn-wrapper
-        a.btn.btn-action(href = "https://github.com/samccone/edit.sx-frontend", target= "_blank") View Source
+        a.btn.btn-action(href="https://github.com/samccone/edit.sx-frontend", itemprop="sameAs", target= "_blank") View Source