20110128 HTML5 Markup My Blog

1,263 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,263
On SlideShare
0
From Embeds
0
Number of Embeds
190
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20110128 HTML5 Markup My Blog

  1. 1. HTML5 Rimpei Ogawa <ogawa@tejimaya.com> 2011/1/28 Fri.
  2. 2. HTML5• http://rimpei.org/blog/ • Symfony2 + BalibaliBlogBundle • GitHub• • Firefox 3.6 (Mac), Google Chrome (Mac), MobileSafari (iPhone)
  3. 3. HTML<!doctype  html><html>  <head>    <meta  charset="UTF-­‐8">    ...    <link  rel="stylesheet"  href="/bundles/balibaliblog/syntaxhighlighter.css">    <script  src="/bundles/balibaliblog/syntaxhighlighter.js"></script>    ...  </head>
  4. 4. HTML• • DOCTYPE : <!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> • Content-Type : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />•
  5. 5. • article• section• header• footer• time
  6. 6. (before)<body>  <div  id=”container”>    <div  id=”header”>      <div  class="site-­‐name"> </div>    </div>    ...    <div  id=”footer”>...</div>  </div></body>
  7. 7. (after)<body>  <div  id=”container”>    <header>      <h1> </h1>    </header>    ...  (secHon,  arHcle)  ...    <footer>...</footer>  </div></body>
  8. 8. • div 3 • div#header → header • div#footer → footer • div.site-name → h1 • h1 h1 article section
  9. 9. (before)<div  class=”post”>    <h1>{{  Htle  }}</h1>    <div  class=”date”>{{  pubdate  }}</div>    <div  class=”body”>{{  body  }}</div></div>
  10. 10. (after)<arHcle>    <header>        <h1>{{  Htle  }}</h1>        <p  class=”date”><Hme  pubdate  dateHme=”{{  pubdate  }}”>{{  pubdate  }}</Hme></p>    </header>    {{  body  }}</arHcle>
  11. 11. • div • div.post → article • div.date → p time • div.body →• header div• pubdate
  12. 12. (before)<ul>{%  for  post  in  posts  %}    <li>{{  pubdate  }}        <a  href=”{{  path(‘show’)  }}”>{{  Htle  }}</a></li>{%  endfor  %}</ul>
  13. 13. (after)<ul>{%  for  post  in  posts  %}    <li><Hme  dateHme=”{{  pubdate  }}”>{{  pubdate  }}</Hme>        <a  href=”{{  path(‘show’)  }}”>{{  Htle  }}</a></li>{%  endfor  %}</ul>
  14. 14. • time• time pubdate article
  15. 15. • footer hCard• hCard 1.0 Microformats Wiki <http://microformats.org/wiki/hcard-ja>
  16. 16. hCard  <p  class="vcard">    <img  src="..."  alt=""><span  class="fn">Rimpei  Ogawa</span>(@<span  class="nickname">balibali</span>)    <a  class="url"  href="..."><img  src="..."  alt="">TwiTer</a>    <a  class="url"  href="...">GitHub</a>    <a  class="url"  href="...">Utasuki</a>  </p>

×