playing with HTML5

author: franck cuny <franck@lumberjaph.net> 2010-09-20 15:55:36 +0200
committer: franck cuny <franck@lumberjaph.net> 2010-09-20 15:55:36 +0200
commit: 2b38daafc25ff39a86821993c4aedcf2c327bc37 (patch)
tree: 739c009030ca5440c48b180fc058be30c42c8bb5
parent: update links (diff)
download: lumberjaph-2b38daafc25ff39a86821993c4aedcf2c327bc37.tar.gz
6 files changed, 127 insertions, 112 deletions
diff --git a/_includes/disqus.html b/_includes/disqus.html
new file mode 100644
index 0000000..8b07c75
--- /dev/null
+++ b/_includes/disqus.html
@@ -0,0 +1,23 @@
+<div id="disqus">
+  <div id="disqus_thread"></div>
+  <script type="text/javascript">
+    /**
+    * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] 
+    */
+    (function() {
+    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+    dsq.src = 'http://lumberjaph.disqus.com/embed.js';
+    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=lumberjaph">comments powered by Disqus.</a></noscript>
+  <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+  <script type="text/javascript">
+    var disqus_shortname = 'lumberjaph';
+    (function () {
+    var s = document.createElement('script'); s.async = true;
+    s.src = 'http://disqus.com/forums/lumberjaph/count.js';
+    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+    }());
+  </script>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 0bff272..283b40c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-   <meta content="en-us" http-equiv="Content-Language" />
+   <meta charset="utf-8" />
    <title>{{ page.title }}</title>
    <meta name="author" content="franck cuny" />
    <link href="http://feeds.feedburner.com/ImALumberjaph" rel="alternate" title="I'm a lumberjaph" type="application/atom+xml" />
 
-   <!-- syntax highlighting CSS -->
-   <link rel="stylesheet" href="/static/css/syntax.css" type="text/css" />
+   <!--syntax highlighting CSS-->
+   <link rel="stylesheet" href="/static/css/syntax.css" />
 
-   <!-- Homepage CSS -->
-   <link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen, projection" />
+   <!--Homepage CSS-->
+   <link rel="stylesheet" href="/static/css/screen.css" media="screen, projection" />
 
-   <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+   <link href="/favicon.ico" rel="shortcut icon" />
    <link rel="openid.server" href="http://franckcuny.myopenid.com/" /> 
    <link rel="openid2.provider" href="http://franckcuny.myopenid.com/" /> 
    {% include analytics.html %}
@@ -21,17 +20,20 @@
 <body>
 
 <div class="site">
-  <div class="title">
-    <a href="/">I'm a lumberjaph</a>
-    <a class="extra" href="/">home</a>
-    <a class="extra" href="/archives.html">archives</a>
-    <a class="extra" href="/about/">about</a>
-    <a class="extra" href="/talks/">talks</a>
-    <a class="extra" href="/contact/">contact</a>
-  </div>
-  
+  <nav>
+    <div class="title">
+      <a href="/">I'm a lumberjaph</a>
+      <a class="extra" href="/">home</a>
+      <a class="extra" rel="archives" href="/archives.html">archives</a>
+      <a class="extra" rel="author" href="/about/">about</a>
+      <a class="extra" href="/talks/">talks</a>
+      <a class="extra" href="/contact/">contact</a>
+    </div>
+  </nav>
+
   {{ content }}
-  
+
+  <footer>
   <div class="footer">
     <div class="contact">
       <p>
@@ -46,11 +48,12 @@
       </p>
     </div>
     <div class="rss">
-      <a href="http://lumberjaph.net/index.atom">
+      <a href="http://feeds.feedburner.com/ImALumberjaph">
         <img src="/static/imgs/rss.png" alt="Subscribe to RSS Feed" />
       </a>
     </div>
   </div>
+  </footer>
 </div>
 
 </body>
diff --git a/_layouts/post.html b/_layouts/post.html
index c79b965..1760051 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,34 +2,11 @@
 layout: default
 ---
 <div id="post">
-  <h2><a href="{{ page.url }}">
-    {{ page.title }}
-  </a></h2>
-  <div id="date">published {{ page.date | date_to_string }}</div>
-  {{ content }}
+  <h2><a href="{{ page.url }}" rel="bookmark" title="{{ page.title }}">{{ page.title }}</a></h2>
+  <article>
+    <div id="date">published <time datetime="{{ page.date }}" pubdate>{{ page.date | date_to_string }}</time></div>
+    {{ content }}
+  </article>
   <hr />
-  <div id="disqus">
-<div id="disqus_thread"></div>
-<script type="text/javascript">
-  /**
-    * var disqus_identifier; [Optional but recommended: Define a unique identifier (e.g. post id or slug) for this thread] 
-    */
-  (function() {
-   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-   dsq.src = 'http://lumberjaph.disqus.com/embed.js';
-   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-  })();
-</script>
-<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript=lumberjaph">comments powered by Disqus.</a></noscript>
-<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
-<script type="text/javascript">
-var disqus_shortname = 'lumberjaph';
-(function () {
-  var s = document.createElement('script'); s.async = true;
-  s.src = 'http://disqus.com/forums/lumberjaph/count.js';
-  (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
-}());
-</script>
-
-  </div>
-</div>
-\ No newline at end of file
+  {% include disqus.html %}
+</div>
diff --git a/about/index.html b/about/index.html
index d39bf8a..90448dd 100644
--- a/about/index.html
+++ b/about/index.html
@@ -1,24 +1,29 @@
 ---
 layout: default
 ---
-<h2>About</h2>
-<p>
-<img src="/static/imgs/me.jpg" class="right" />
-<br /><br />
+<section itemscope itemtype="http://data-vocabulary.org/Person">
+  <h2>About</h2>
+  <p>
+    <img itemprop="photo" src="/static/imgs/me.jpg" class="right" />
 
-My name is franck cuny, and I'm just another Perl hacker. I'm passionate about <a href="/graph/2010/03/25/github-explorer.html">graphs</a>, code, and the web.<br />
+    <br /><br />
 
-<br /><br />
-I'm a software engineer at <a href="http://linkfluence.net/">Linkfluence</a>,
-where I work mainly on our feed aggregator, data collecting, and the scalability of our
-infrastructure.
-<br /><br />
-Other places where you can find me:
-<ul>
-    <li><a href="http://github.com/franckcuny">github/franckcuny</a></li>
-    <li><a href="http://twitter.com/franckcuny">twitter/franckcuny</a></li>
-    <li><a href="http://search.cpan.org/~franckc/">CPAN</a></li>
-    <li><a href="http://delicious.com/franck">delicious</a></li>
-    <li><a href="http://fr.linkedin.com/pub/franck-cuny/1a/362/506">linkedin</a></li>
-</ul>
-</p>
+    My name is <span itemprop="name">franck cuny</span>, and I'm just another Perl hacker. I'm passionate about <a href="/graph/2010/03/25/github-explorer.html">graphs</a>, code, and the web.<br />
+
+    <br />
+
+    I'm a <span itemprop="title">software engineer</span> working at <a href="http://linkfluence.net/"><span itemprop="affiliation">Linkfluence</span></a>, where I work mainly on our feed aggregator, data collecting, and the scalability of our infrastructure.
+
+    <br />
+
+    Other places where you can find me:
+
+    <ul>
+      <li><a itemprop="url" href="http://github.com/franckcuny">github/franckcuny</a></li>
+      <li><a itemprop="url" href="http://twitter.com/franckcuny">twitter/franckcuny</a></li>
+      <li><a itemprop="url" href="http://search.cpan.org/~franckc/">CPAN</a></li>
+      <li><a itemprop="url" href="http://delicious.com/franck">delicious</a></li>
+      <li><a itemprop="url" href="http://fr.linkedin.com/pub/franck-cuny/1a/362/506">linkedin</a></li>
+    </ul>
+  </p>
+</section>
diff --git a/static/css/screen.css b/static/css/screen.css
index 9130e89..c01c5e1 100644
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -140,7 +140,7 @@ ul.posts {
     color: #aaa;
   }
 
-  .site .footer {
+  .site footer {
     font-size: 80%;
     color: #666;
     border-top: 4px solid #eee;
@@ -148,22 +148,22 @@ ul.posts {
     overflow: hidden;
   }
 
-    .site .footer .contact {
+    .site footer .contact {
       float: left;
       margin-right: 3em;
     }
 
-      .site .footer .contact a {
+      .site footer .contact a {
         color: #8085C1;
       }
 
-    .site .footer .rss {
+    .site footer .rss {
       margin-top: 1.1em;
       margin-right: -.2em;
       float: right;
     }
 
-      .site .footer .rss img {
+      .site footer .rss img {
         border: 0;
       }
 
diff --git a/talks/index.html b/talks/index.html
index 5a07b0e..0430263 100644
--- a/talks/index.html
+++ b/talks/index.html
@@ -2,48 +2,55 @@
 layout: default
 ---
 <h2>Previous and Upcoming Talks</h2>
+
 <h3>2010</h3>
-<ul>
-    <li>
-        <em>June 2010, FPW 2010</em> &#8212; Github Explorer
-        <br />
-        <small>Presentation de github-explorer</small>
-        <br />
-        <a href="http://www.slideshare.net/franckcuny/github-explorer">Slides</a> - <a href="http://franck.lumberjaph.net/slides/github-explorer.pdf">PDF</a>
-    </li> 
-    <li>
-        <em>June 2010, FPW 2010</em> &#8212; Introduction à Plack
-        <br />
-        <small>Introductoin à Plack: PSGI, les Handlers, les Middlewares, ...</small>
-        <br />
-        <a href="http://www.slideshare.net/franckcuny/introduction-a-plack">Slides</a> - <a href="http://franck.lumberjaph.net/slides/introduction_a_plack.pdf">PDF</a>
-    </li>
-</ul>
+
+<article itemscope itemtype="http://data-vocabulary.org/Event">
+  <em itemprop="summary">June 2010, FPW 2010 &#8212; Github Explorer</em>
+  <p itemprop="description">
+    <small>Presentation de github-explorer</small>
+    <br />
+    <a href="http://www.slideshare.net/franckcuny/github-explorer">Slides</a> - <a href="http://franck.lumberjaph.net/slides/github-explorer.pdf">PDF</a>
+  </p>
+</article>
+
+<article itemscope itemtype="http://data-vocabulary.org/Event">
+  <em itemprop="summary">June 2010, FPW 2010 &#8212; Introduction à Plack</em>
+  <p itemprop="description">
+    <small>Introductoin à Plack: PSGI, les Handlers, les Middlewares, ...</small>
+    <br />
+    <a href="http://www.slideshare.net/franckcuny/introduction-a-plack">Slides</a> - <a href="http://franck.lumberjaph.net/slides/introduction_a_plack.pdf">PDF</a>
+</article>
 
 <h3>2009</h3>
-<ul>
-    <li>
-        <em>October 2009, OSDC.fr</em> &#8212; Introduction à Moose
-        <br /> 
-        <small>Introduction à Moose: survol rapide des roles, du MOP, ...</small>
-        <br />
-        <a href="http://www.slideshare.net/franckcuny/introduction-a-moose">Slides</a> - <a href="http://labs.linkfluence.net/osdcfr09/Introduction_a_Moose.pdf">PDF</a>
-    </li>
-    <li>
-        <em>August 2009, YAPC::EU 2009</em> &#8212; CPAN Explorer
-        <br /> 
-        <small>A talk about the shape of the CPAN, and a map of his community. </small>
-        <br />
-        <a href="http://www.slideshare.net/franckcuny/map-of-the-perl-and-cpan-community">Slides</a> - <a href="http://labs.linkfluence.net/yapceu09/talk.pdf">PDF</a>
-    </li>
-    <li>
-        <em>June 2009, FPW 2009</em> &#8212; CPAN Explorer
-        <br />
-        <small>Présentation réalisée au FPW09, sur la communauté des developpeurs Perl via le CPAN et le web.</small>
-        <br />
-        <a href="http://www.slideshare.net/franckcuny/cartographie-du-cpan-et-de-sa-communaut">Slides</a> - <a href="http://labs.linkfluence.net/fpw09/resources/slides/">PDF</a>
-    </li>
-</ul>
+
+<article itemscope itemtype="http://data-vocabulary.org/Event">
+  <em itemprop="summary">October 2009, OSDC.fr &#8212; Introduction à Moose</em>
+  <p itemprop="description">
+    <small>Introduction à Moose: survol rapide des roles, du MOP, ...</small>
+    <br />
+    <a href="http://www.slideshare.net/franckcuny/introduction-a-moose">Slides</a> - <a href="http://labs.linkfluence.net/osdcfr09/Introduction_a_Moose.pdf">PDF</a>
+  </p>
+</article>
+
+<article itemscope itemtype="http://data-vocabulary.org/Event">
+  <em itemprop="summary">August 2009, YAPC::EU 2009 &#8212; CPAN Explorer</em>
+  <p itemprop="description">
+    <small>A talk about the shape of the CPAN, and a map of his community. </small>
+    <br />
+    <a href="http://www.slideshare.net/franckcuny/map-of-the-perl-and-cpan-community">Slides</a> - <a href="http://labs.linkfluence.net/yapceu09/talk.pdf">PDF</a>
+  </p>
+</article>
+
+<article itemscope itemtype="http://data-vocabulary.org/Event">
+  <em itemprop="summary">June 2009, FPW 2009 &#8212; CPAN Explorer</em>
+  <p itemprop="description">
+    <small>Présentation réalisée au FPW09, sur la communauté des developpeurs Perl via le CPAN et le web.</small>
+    <br />
+    <a href="http://www.slideshare.net/franckcuny/cartographie-du-cpan-et-de-sa-communaut">Slides</a> - <a href="http://labs.linkfluence.net/fpw09/resources/slides/">PDF</a>
+  </p>
+</article>
+
 <h3>Articles</h3>
 <ul> 
     <li>
author	franck cuny <franck@lumberjaph.net>	2010-09-20 15:55:36 +0200
committer	franck cuny <franck@lumberjaph.net>	2010-09-20 15:55:36 +0200
commit	2b38daafc25ff39a86821993c4aedcf2c327bc37 (patch)
tree	739c009030ca5440c48b180fc058be30c42c8bb5
parent	update links (diff)
download	lumberjaph-2b38daafc25ff39a86821993c4aedcf2c327bc37.tar.gz