Your SlideShare is downloading. ×
0
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
HTML5勉強会@福岡
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

HTML5勉強会@福岡

1,285

Published on

2009/9/18に福岡で行われたHTML5の勉強会で話したスライド。

2009/9/18に福岡で行われたHTML5の勉強会で話したスライド。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,285
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
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にいくための準備<br />KOUSUKE (seven) INAMOTO<br />Generalasahi<br />
  2. Hello!<br />稲本浩介(稲本せぶん)<br />30ちゃい<br />株式会社ゼネラルアサヒwww.generalasahi.co.jp<br />Webディレクター、マークアップエンジニア<br />IA (9/14より)<br />@sevenina<br />sevenstyleweb.com/blog<br />
  3. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  4. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  5. &lt;canvas&gt;<br />Webページ内に埋め込むことのできるグラフィック要素で、<br />JavaScriptを用いて自由に図形や画像の描画を行える。<br />(【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 マイコミジャーナル)<br />
  6. &lt;canvas&gt;<br />javascript<br />
  7. HTML5  ≠ Expression<br />HTML5  =  Structure<br />
  8. HTML<br />=<br />Hyper Text Markup Language<br />
  9. Markup Language<br />
  10. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  11. &lt;article&gt; 内容が単体で完結しているセクションを表す<br />&lt;aside&gt; 補足的な説明を表す<br />&lt;nav&gt; Webサイトのナビゲーションリンクを配置するためのセクション<br />&lt;section&gt; 汎用的なセクション<br />&lt;hgroup&gt; 複数の見出しをひとまとまりにする<br />&lt;header&gt; セクションのヘッダ<br />&lt;footer&gt; セクションのフッタ<br />&lt;address&gt;article/bodyに関する問い合わせ先アドレス<br />
  12. &lt;article&gt;<br />&lt;aside&gt;<br />&lt;nav&gt;<br />&lt;section&gt;<br />&lt;hgroup&gt;<br />&lt;header&gt;<br />&lt;footer&gt;<br />&lt;address&gt;<br />Design<br />document<br />HTML<br />
  13. Sample<br />
  14. &lt;h1&gt;<br />&lt;header&gt;<br />&lt;nav&gt;<br />
  15. &lt;div&gt;<br />&lt;div&gt;<br />&lt;section&gt;<br />&lt;section&gt;<br />&lt;header&gt;<br />
  16. &lt;footer&gt;<br />&lt;div&gt;<br />
  17. ?<br />&lt;section&gt; OR &lt;div&gt; <br />&lt;section&gt; = structure.<br />&lt;div&gt; = for css.<br />
  18. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  19. Markup Engineer ≠ Coder<br />
  20. &lt;article&gt;<br />&lt;aside&gt;<br />&lt;nav&gt;<br />&lt;section&gt;<br />&lt;hgroup&gt;<br />&lt;header&gt;<br />&lt;footer&gt;<br />&lt;address&gt;<br />Design<br />document<br />HTML<br />Think about the structure.<br />
  21. Think about the structure.<br />Coder -> Markup Engineer  <br />
  22. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  23. IA = Information Architecture  <br />+<br />micro?<br />
  24. micro-IA<br />Think about the structure.<br />Coder -> Markup Engineer  <br />HTML5 master<br />
  25. コーダーが気持よくHTML5にいくための準備<br />HTML5 -> HTML5 = Markup Language<br />Tags -> structure<br />ME -> think about the structure<br />micro-IA -> HTML5 master<br />
  26. sevenstyleweb.com/blog/html5<br />@sevenina<br />
  27. Thank you!<br />

×