マークアップの夜明けぜよ from FutureSync 2011/07/28
-
Upload
kousuke-inamoto -
Category
Technology
-
view
785 -
download
0
description
Transcript of マークアップの夜明けぜよ from FutureSync 2011/07/28
![Page 1: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/1.jpg)
マークアップの夜明けぜよ~僕の思うこれからのマークアップ~
Kousuke (seven)Inamoto
![Page 2: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/2.jpg)
Hello!
• 稲本浩介(稲本せぶん)• 32歳(子持ち)• 株式会社ゼネラルアサヒ
www.generalasahi.co.jp• Webディレクター、マークアップエンジニア• IA• @sevenina• http://www.facebook.com/kousuke.inamoto• sevenstyleweb.com/blog
![Page 3: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/3.jpg)
Agenda
• タグの話
• これからのマークアップ
![Page 4: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/4.jpg)
Tagタグとは、荷札、付箋といった意味の英単語。
あらかじめ定められた特殊な記法により文書に埋め込む形で記述される付加情報。地の文とは別のレベルで解釈され、
付加情報を埋め込む特殊な文字列などのことをタグと言う。
![Page 5: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/5.jpg)
タグには“意味”がある
![Page 6: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/6.jpg)
HTML5になってその“意味”が増えた
![Page 7: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/7.jpg)
<hx> 見出しであることを表す
<p> 段落であることを表す<img> 画像であることを表す<ul> 順不同のリストであることを表す<ol> 順序リストであることを表す<li> リストであることを表す<a> アンカーリンクであることを表す
![Page 8: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/8.jpg)
<article> 内容が単体で完結しているセクションを表す<aside> 補足的な説明を表す<nav> Webサイトのナビゲーションリンクを配置するためのセクション
<section> 汎用的なセクション<hgroup> 複数の見出しをひとまとまりにする<header> セクションのヘッダ<footer> セクションのフッタ<address> article/bodyに関する問い合わせ先アドレス
![Page 9: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/9.jpg)
<article>
<aside>
<nav>
<section>
<hgroup>
<header>
<footer>
<address>
![Page 10: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/10.jpg)
<article>
<aside>
<nav>
<section>
<hgroup>
<header>
<footer>
<address>
“ 見た目の”デザインをマークアップするのではない
![Page 11: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/11.jpg)
<article>
<aside>
<nav>
<section>
<hgroup>
<header>
<footer>
<address>
文書構造を、情報デザインをマークアップする
![Page 12: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/12.jpg)
NO ANSWER
![Page 13: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/13.jpg)
Sample
![Page 14: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/14.jpg)
![Page 15: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/15.jpg)
<header> <h1> <nav>
![Page 16: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/16.jpg)
<section> <header> <section><div> <div>
![Page 17: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/17.jpg)
<footer><div>
![Page 18: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/18.jpg)
NO ANSWER
![Page 19: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/19.jpg)
THINK
![Page 20: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/20.jpg)
Agenda
• タグの話
• これからのマークアップ
![Page 21: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/21.jpg)
![Page 22: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/22.jpg)
![Page 23: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/23.jpg)
http://developers.facebook.com/docs/opengraph/
![Page 24: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/24.jpg)
http://developers.facebook.com/docs/opengraph/
OGPは今後重要
![Page 25: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/25.jpg)
http://developers.facebook.com/docs/opengraph/
ですが・・・
![Page 26: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/26.jpg)
http://developers.facebook.com/docs/opengraph/
OGPだけじゃあ、だめ
![Page 27: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/27.jpg)
HTML5になってその“意味”が増えた
![Page 28: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/28.jpg)
セマンティックWeb
![Page 29: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/29.jpg)
2009年 TEDにて “ Linked Data” を提唱
“これまではウェブに文書を置いていた。 これからはウェブにデータを置いてもらいたい“
![Page 30: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/30.jpg)
人にとってシェアする対象はコンテンツやデータだが、
システムにとってはシェアする対象はソースコード
![Page 31: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/31.jpg)
考えられたソースコードがコンテンツを導く
![Page 32: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/32.jpg)
本領発揮! マークアップの夜明けぜよ
![Page 33: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/33.jpg)
• @sevenina• http://www.facebook.com/kousuke.inamoto
![Page 34: マークアップの夜明けぜよ from FutureSync 2011/07/28](https://reader034.fdocuments.net/reader034/viewer/2022051818/54953f0cb47959a1708b4582/html5/thumbnails/34.jpg)