diff --git a/public/assets/styles.css b/public/assets/styles.css index c372ecd..9f841c5 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -64,6 +64,10 @@ section .card-header { font-weight: bold } +.card-footer { + margin-bottom: 0; +} + section .card { margin-bottom: 2rem } diff --git a/public/index.html b/public/index.html index 5ded2fa..aaa3d9e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,6 @@ + @@ -14,14 +15,13 @@ -
- -
+
- +
@@ -30,323 +30,354 @@

Microformats

-
+
+
-
-
-

What are Microformats?

- -

Microformats are a simple way to add more meaning to your HTML.

-
- - -
-

How do you use Microformats?

-

It's easy! You probably already know how. It's just classes.

- -

- Example: - Contact Information -

+
+
+

What are Microformats?

-
+

Microformats are a simple way to add more meaning to your HTML.

+
-
-
-
Plain HTML
- -
- 
<div>
-      Emma Goldman<br>
-      123 Main St<br>
-      Some Town, CA<br>
-      90210
-
-      <a href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
-      <a href="https://twitter.com/emmagoldman">@emmagoldman</a>
-    </div>
-
- -
- This snippet of HTML is very common. - While you as a human can recognize that is contact information, - computers could use a few hints to understand it. -
-
-
- -
-
-
HTML + Microformats
- -
- 
<div class="h-card">
-      <span class="p-name">Emma Goldman</span>
-      <span class="p-street-address">123 Main St</span>
-      <span class="p-locality">Some Town</span>, <span class="p-region">CA</span>
-      <span class="p-postal-code">90210</span>
-
-      <a class="u-email" href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
-      <a class="u-url" rel="me" href="https://twitter.com/emmagoldman">@emmagoldman</a>
-    </div>
-
- -
- By adding just a few HTML classes, you can turn this generic markup into - much more meaningful and semantic HTML. -
-
-
+
+

How do you use Microformats?

+

It's easy! You probably already know how. It's just classes.

-
+

+ Example: + Contact Information +

-

- Example: - Link to Person -

+
-
-
-
-
Plain HTML
+
+
+
Plain HTML
+ +
+ 
<div>
+    Emma Goldman<br>
+    123 Main St<br>
+    Some Town, CA<br>
+    90210
+
+    <a href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
+    <a href="https://twitter.com/emmagoldman">@emmagoldman</a>
+</div>
+
+ +

+ This snippet of HTML is very common. + While you as a human can recognize that is contact information, + computers could use a few hints to understand it. +

+
+
+ +
+
+
HTML + Microformats
+ +
+ 
<div class="h-card">
+    <span class="p-name">Emma Goldman</span>
+    <span class="p-street-address">123 Main St</span>
+    <span class="p-locality">Some Town</span>, <span class="p-region">CA</span>
+    <span class="p-postal-code">90210</span>
+
+    <a class="u-email" href="mailto:emma.goldman@example.com">emma.goldman@example.com</a><br>
+    <a class="u-url" rel="me" href="https://twitter.com/emmagoldman">@emmagoldman</a>
+</div>
+
+ +

+ By adding just a few HTML classes, you can turn this generic markup into + much more meaningful and semantic HTML. +

+
+
+ +
+ +

+ Example: + Link to Person +

-
- 
<a href="https://twitter.com/emmagoldman">@emmagoldman</a>
-
+
+
+
+
Plain HTML
+ +
+ 
<a href="https://twitter.com/emmagoldman">@emmagoldman</a>
+
+ +

+ Or an even simpler example is just link. +

+
+
+ +
+
+
HTML + Microformats
+ +
+ 
<a class="h-card" href="https://twitter.com/emmagoldman">@emmagoldman</a>
+
+ +

+ All it needs is one h-card class on the link tag. +

+
+
+ +
+
+ +
+

Why use Microformats?

+ +

+ By adding Microformats to your HTML, your website becomes more + understandable to various kinds of computers. +

+ +
    +
  • + Search engines can make sense of your HTML which allows them to display a better version + in their search results. +
    • +
  • + Browser extensions can enable your readers to download information to their contacts, + calendar, and maps apps. +
    • +
  • + Feed readers can be used to subscribe to your website's feeds (blog posts, bookmarks, + checkins, etc). +
    • +
  • + You can even use your website (with Microformats) to sign into other websites. +
    • +
+
+ +
+

What else are they good for?

+ +

+ In addition to people and organizations, + Microformats can be used for: + feeds, + blog posts, + events, + locations, + reviews, + recipes, + resumes, + and products. +

+
+ +
+

Examples in the wild

-
- Or an even simpler example is just link. +
+
+ + Mastodon + +
+
+ + IndieWebCamp + +
+
+ + micro.blog + +
+
+
+ +
+

Developers

+ +

+ Microformats are fully specced with a + comprehensive test suite + and are licensed as Public Domain allowing you to freely use them however you want. +

+
+ +
+

Parsing Microformats

+ +

+ If you're a developer working on an app or service, + you probably need JSON as your input format. + Don't worry. + There are several Microformats parsers written in multiple programming languages. + A parser will take a URL or a glob of HTML, understand it, + then convert it to JSON for your use. +

+ +

You can test your URL here (or HTML snippet on any of the parser sites).

+ +
+ + +
+
+ +
-
-
- -
-
-
HTML + Microformats
-
- 
<a class="h-card" href="https://twitter.com/emmagoldman">@emmagoldman</a>
-
- -
- All it needs is one h-card class on the link tag. +
+
-
-
- -
- - - -
-

Why use Microformats?

- -

- By adding Microformats to your HTML, your website becomes more - understandable to various kinds of computers. -

- -
    -
  • Search engines can make sense of your HTML which allows them to display a better version in their search results.
    • -
  • Browser extensions can enable your readers to download information to their contacts, calendar, and maps apps.
    • -
  • Feed readers can be used to subscribe to your website’s feeds (blog posts, bookmarks, checkins, etc).
    • -
  • You can even use your website (with Microformats) to sign into other websites.
    • -
-
- - -
-

What else are they good for?

- -

- In addition to people and organizations, - Microformats can be used for: - feeds, - blog posts, - events, - locations, - reviews, - recipes, - resumes, - and products. -

-
- - -
-

Examples in the wild

- -
-
- - Mastodon - -
-
- - IndieWebCamp - -
-
- - micro.blog - -
-
-
- - -
-

Developers

- -

- Microformats are fully specced with a - comprehensive test suite - and are licensed as Public Domain allowing you to freely use them however you want. -

-
- -
-

Parsing Microformats

- -

- If you’re a developer working on an app or service, - you probably need JSON as your input format. - Don’t worry. - There are several Microformats parsers written in multiple programming languages. - A parser will take a URL or a glob of HTML, understand it, - then convert it to JSON for your use. -

- -

You can test your URL here (or HTML snippet on any of the parser sites).

+
+ + +
+

Parser Libraries

-
- +

Production ready parsers are available for: Go, Node, PHP, Python, Ruby.

-
-
- - +
+
+ Website + Library + Go
- -
- +
+ Website + Library + Node +
+
+ Website + Library + php +
+
+ Website + Library + Python +
+
+ Website + Library + Ruby
- -
+

+ Other parsers are in-development for: + Erlang, Elixir, Haskell, Java, and more. +

-
-

Parser Libraries

+

+ Example: + Parsing Contact Information +

-

Production ready parsers are available for: Go, Node, PHP, Python, Ruby.

- -
-
- Website - Library - Go -
-
- Website - Library - Node -
-
- Website - Library - php -
-
- Website - Library - Python -
-
- Website - Library - Ruby -
-
+
-

Other parsers are in-development for: Erlang, Elixir, Haskell, Java, and more.

+
+
+
HTML + Microformats
+ +
+ 
<div class="h-card">
+    <a class="p-name u-url" href="http://blog.lizardwrangler.com/">Mitchell Baker</a>
+    (<a class="p-org h-card" href="http://mozilla.org/">Mozilla Foundation</a>)
+</div>
+
+ +

+ This is a simple h-card example. +

+
+
+ +
+ + +
+
HTML + Microformats
+ +
+ 
{
+  "items": [{
+    "type": ["h-card"],
+    "properties": {
+      "url": ["http://blog.lizardwrangler.com/"],
+      "name": ["Mitchell Baker"],
+      "org": [{
+        "value": "Mozilla Foundation",
+        "type": ["h-card"],
+        "properties": {
+          "name": ["Mozilla Foundation"],
+          "url": ["http://mozilla.org/"]
+        }
+      }]
+    }
+  }],
+  "rels": {},
+  "rel-urls": {}
+}
+
+ +

+ It will be converted into this JSON by a parser. +

+
+
+
+
+ +
+

More information

+ + +
+ + -

- Example: - Parsing Contact Information -

+
-
+
-
-
-
HTML + Microformats
- -
- 
<div class="h-card">
-      <a class="p-name u-url" href="http://blog.lizardwrangler.com/">Mitchell Baker</a>
-      (<a class="p-org h-card" href="http://mozilla.org/">Mozilla Foundation</a>)
-    </div>
-
- -
This is a simple h-card example.
-
-
- -
- - -
-
HTML + Microformats
- -
- 
{
-      "items": [{
-        "type": ["h-card"],
-        "properties": {
-          "url": ["http://blog.lizardwrangler.com/"],
-          "name": ["Mitchell Baker"],
-          "org": [{
-            "value": "Mozilla Foundation",
-            "type": ["h-card"],
-            "properties": {
-              "name": ["Mozilla Foundation"],
-              "url": ["http://mozilla.org/"]
-            }
-          }]
-        }
-      }],
-      "rels": {},
-      "rel-urls": {}
-    }
-
- -
It will be converted into this JSON by a parser.
-
-
-
- - - -
-

More information

- - -
- -
+ - - + + \ No newline at end of file