ワークフローまとめ（課題1）

課題提出前夜なので、ちょっと振り返りつつ、自分が初めてのwebサイト制作でどんな手順を追ったのか振り返ってみる。


課題は花屋。幅は画面幅1024pxに収まるよう、ページ数は5ページ以上という課題設定だった。

コーディングに使ったのは、XHTML1.0TransitionalとCSS2.1。文字コードはUTF-8。
エディタはTerapad。画像編集はPhotoshop Elements 11と学校のFireWorks CS4。

----------------------------------------------------------

まずはコンセプトイメージを探った。
キーワードを列挙して、どんなサイトにしたいか漠然と書き出してみる。
↓
主要なコンテンツを考え、大まかな内容を決める。
この時の項目がグローバルナビゲーションになったり。
↓
項目別の内容をもう少し掘り下げ、どんな素材が必要になるかを洗い出す。
↓
サイトマップを考える（この辺りから素材集めを並行して行う）
↓
インターフェース設計
ラべリング項目名をわかりやすい単語にして決定
↓
ここで大まかなレイアウトを見るために、ためしにindex.htmlのみコーディングしてみる。
テキストなし、画像なし、各要素の幅・高さ、背景色をのみ設定した。
ここでなんとなくreset.cssの原型ができる。positionなどコーディングの大まかな流れをつかんだ。
↓
▲1：レイアウトテストしたものを元に、インターフェース設計のメモにposition数値やクラス、ID名などをメモしてレシピを作る。
↓
▲2：レシピを見つつコーディング。
並行してパーツのデザインなどを考えていく。コーディングするなかで画像のファイル名を決めてしまうことも。
↓
▲3：XHTML、CSSがあらかた出来上がってきたら、考えたパーツデザインのメモを元に怒涛の画像編集。
サイズもデザインもファイル名も決まっているのであとは作業！ 作業！ 作業！
↓
▲1～3を1ページごとに繰り返す。基本的に複数ページ同時進行はしない（頭悪くてできなかった）
但しレイアウトテストはindexのみ。他ページはレシピを元に書き出していった。
↓
前ページができたら、共通しているCSSはbase.cssに移すなどソースを整理する。
↓
チェッカーで採点してもらい、ソースの間違いや不足を修正していく。
↓
ブラウザ毎に確認する。
ブラウザハックを使い、デザインの崩れを手直しする。
↓
自分で借りているレンタルサーバに仮アップロード。
ローカルで見逃されていたファイル名の大文字小文字の間違いなどを確認。手直し。

---------------------------------------------------------------------------

ざばーっと書いたけど、大まかにこんな感じだったと思う。
今週はFireWorksでのデザインカンプの作成も始まったし、これからHTML5学ぶんだし、このワークフローはまたいろいろ増えたり減ったりするんだろな。
ま、今回はこんな流れだった。