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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

20110128 HTML5 Markup My Blog

1,110

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,110
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>

×