HTML5勉強会@福岡
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5勉強会@福岡

on

  • 1,993 views

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

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

Statistics

Views

Total Views
1,993
Views on SlideShare
1,915
Embed Views
78

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 78

http://sevenstyleweb.com 72
http://www.slideshare.net 5
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5勉強会@福岡 Presentation 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!