How to refine your website with XML/XSL+pipeline (#001). For more information, please visit our website: http://docmgt.xoxxox.net/

1. 2014.01 / アゼロス
概要（このプレゼンの趣旨）
制作の現場で起こる、ＨＴＭＬコーダーの適性とキャリアパスのミスマッチ
ＨＴＭＬコーダーの仕事は、ＨＴＭＬ⽂文書のセマンティクスを実装すること
ＨＴＭＬコーダーからセマンティクスを設計するウェブの構造エンジニアへ
１．
２．
３．
※ ウェブの構造エンジニア……ウェブサイト内部の意味（セマンティクス）構造を設計（デザイン）するエンジニア。フロントエン
ドの情報アーキテクトに対⽐比される、バックエンドの重要な職種。
ＨＴＭＬコーダーから
ウェブの構造エンジニアへ

2. 2014.01 / アゼロス
⽣生き抜くためのマークアップ技術
〜～ キャリアパス編 〜～
<vox:src>get:simple.xml</vox:src><!--
内容を読む
-->
<vox:via>app:simple.xsl</vox:via><!--
体裁を適用
-->
<vox:dst>set:simple.htm</vox:dst><!--
結果を生成
-->
⼿手順（フロー）：simple.xml

3. 2014.01 / アゼロス
問題
いわゆる「フロントエンドエンジニア」／「マークアップエ
ンジニア」のキャリアパスは、ひとくくりに考えられがち：
ＨＴＭＬコーダー
ＣＳＳコーダー？／ＪＳプログラマ？
※ ほんらい「フロントエンドエンジニア」はクライアントサイドのプログラミングに重きをおく職種。また「マークアップエンジニ
ア」は（この造語の発案者の意図からは）ＩＡをふくむＵＩよりのデザイナという位置づけ。
ＨＴＭＬコーダーのキャリアパスには不不⾃自然な⾯面も

4. 2014.01 / アゼロス
問題
フロントエンドの３つの職種は指向が異異なり、適性とのミス
マッチを起こす可能性：
ＨＴＭＬコーダー セマンティクス（意味）の実装（ＨＴＭＬ⽂文書）
ＣＳＳコーダー グラフィック（視覚）の実装
ＪＳプログラマ インタラクション（作⽤用）の実装（クライアントサイド）
不不⽤用意な選択が、適性とのミスマッチを引き起こす

5. 2014.01 / アゼロス
対策
それぞれの職種の指向に沿ったキャリアパスの⼀一例例：
ＨＴＭＬコーダー セマンティクス（意味）の実装（ＨＴＭＬ⽂文書）
ＣＳＳコーダー グラフィック（視覚）の実装
ＪＳプログラマ インタラクション（作⽤用）の実装（クライアントサイド）
インタラクション（作⽤用）の設計（サーバサイドふくむ）
グラフィック（視覚）の設計
システムエンジニア？
エディトリアルデザイナ？
？ セマンティクス（意味）の設計（サイトの全体）
セマンティクス設計にステップアップするなら……

6. 2014.01 / アゼロス
対策
コンテンツ制作の最前線にいるＨＴＭＬコーダーが、サイト
全体のセマンティクス設計を主導してもよい：
ＨＴＭＬコーダー
ウェブの構造エンジニア
・ 業務：セマンティクスの実装
・ 使⽤用技術：ＨＴＭＬ
・ 管理理範囲：ＨＴＭＬ⽂文書
・ 業務：セマンティクスの設計
・ 使⽤用技術：ＸＭＬ／ＸＳＬ
・ 管理理範囲：サイトの全体
※ サーバサイドのプログラマも、ＸＭＬ／ＸＳＬＴ／ＤＯＭなどの技術をうまくあつかうことができる。しかしプログラマはコンテ
ンツへの関⼼心が薄くなりがちで、これがウェブ⽂文書のライブラリ化が進まない要因にもなっている。
ＨＴＭＬコーダーからウェブの構造エンジニアへ