Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5勉強会@福岡

1,569 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5勉強会@福岡

  1. 1. コーダーが気持よくHTML5にいくための準備<br />KOUSUKE (seven) INAMOTO<br />Generalasahi<br />
  2. 2. Hello!<br />稲本浩介(稲本せぶん)<br />30ちゃい<br />株式会社ゼネラルアサヒwww.generalasahi.co.jp<br />Webディレクター、マークアップエンジニア<br />IA (9/14より)<br />@sevenina<br />sevenstyleweb.com/blog<br />
  3. 3. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  4. 4. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  5. 5.
  6. 6. &lt;canvas&gt;<br />Webページ内に埋め込むことのできるグラフィック要素で、<br />JavaScriptを用いて自由に図形や画像の描画を行える。<br />(【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 マイコミジャーナル)<br />
  7. 7. &lt;canvas&gt;<br />javascript<br />
  8. 8. HTML5  ≠ Expression<br />HTML5  =  Structure<br />
  9. 9. HTML<br />=<br />Hyper Text Markup Language<br />
  10. 10. Markup Language<br />
  11. 11. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  12. 12. &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 />
  13. 13. &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 />
  14. 14. Sample<br />
  15. 15.
  16. 16. &lt;h1&gt;<br />&lt;header&gt;<br />&lt;nav&gt;<br />
  17. 17. &lt;div&gt;<br />&lt;div&gt;<br />&lt;section&gt;<br />&lt;section&gt;<br />&lt;header&gt;<br />
  18. 18. &lt;footer&gt;<br />&lt;div&gt;<br />
  19. 19. ?<br />&lt;section&gt; OR &lt;div&gt; <br />&lt;section&gt; = structure.<br />&lt;div&gt; = for css.<br />
  20. 20. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  21. 21. Markup Engineer ≠ Coder<br />
  22. 22. &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 />
  23. 23. Think about the structure.<br />Coder -> Markup Engineer  <br />
  24. 24. Agenda<br />HTML5<br />Tags<br />ME<br />micro-IA<br />
  25. 25. IA = Information Architecture  <br />+<br />micro?<br />
  26. 26.
  27. 27. micro-IA<br />Think about the structure.<br />Coder -> Markup Engineer  <br />HTML5 master<br />
  28. 28. コーダーが気持よくHTML5にいくための準備<br />HTML5 -> HTML5 = Markup Language<br />Tags -> structure<br />ME -> think about the structure<br />micro-IA -> HTML5 master<br />
  29. 29. sevenstyleweb.com/blog/html5<br />@sevenina<br />
  30. 30. Thank you!<br />

×