Your SlideShare is downloading. ×
  • Like
HTML5勉強会@福岡
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5勉強会@福岡

  • 1,244 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,244
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

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