Your SlideShare is downloading. ×
20110128 HTML5 Markup My Blog
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

20110128 HTML5 Markup My Blog

1,096
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,096
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Rimpei Ogawa <ogawa@tejimaya.com> 2011/1/28 Fri.
  • 2. HTML5• http://rimpei.org/blog/ • Symfony2 + BalibaliBlogBundle • GitHub• • Firefox 3.6 (Mac), Google Chrome (Mac), MobileSafari (iPhone)
  • 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. 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. • article• section• header• footer• time
  • 6. (before)<body>  <div  id=”container”>    <div  id=”header”>      <div  class="site-­‐name"> </div>    </div>    ...    <div  id=”footer”>...</div>  </div></body>
  • 7. (after)<body>  <div  id=”container”>    <header>      <h1> </h1>    </header>    ...  (secHon,  arHcle)  ...    <footer>...</footer>  </div></body>
  • 8. • div 3 • div#header → header • div#footer → footer • div.site-name → h1 • h1 h1 article section
  • 9. (before)<div  class=”post”>    <h1>{{  Htle  }}</h1>    <div  class=”date”>{{  pubdate  }}</div>    <div  class=”body”>{{  body  }}</div></div>
  • 10. (after)<arHcle>    <header>        <h1>{{  Htle  }}</h1>        <p  class=”date”><Hme  pubdate  dateHme=”{{  pubdate  }}”>{{  pubdate  }}</Hme></p>    </header>    {{  body  }}</arHcle>
  • 11. • div • div.post → article • div.date → p time • div.body →• header div• pubdate
  • 12. (before)<ul>{%  for  post  in  posts  %}    <li>{{  pubdate  }}        <a  href=”{{  path(‘show’)  }}”>{{  Htle  }}</a></li>{%  endfor  %}</ul>
  • 13. (after)<ul>{%  for  post  in  posts  %}    <li><Hme  dateHme=”{{  pubdate  }}”>{{  pubdate  }}</Hme>        <a  href=”{{  path(‘show’)  }}”>{{  Htle  }}</a></li>{%  endfor  %}</ul>
  • 14. • time• time pubdate article
  • 15. • footer hCard• hCard 1.0 Microformats Wiki <http://microformats.org/wiki/hcard-ja>
  • 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>