プログラミング 設計資料 メンバー：.

Presentation on theme: "プログラミング 設計資料 メンバー：."— Presentation transcript:

1 プログラミング 設計資料 メンバー：

2 ウェブサイトの目的とターゲット ウェブサイトで解決すべき課題 ウェブサイトのメインターゲット
基本的には、「名城公園キャンパスの学食の案内」を目的とし、「名城公園キャンパスをはじめて利用する人」をターゲットにする より具体的に記載しても良い 最終成果は、当然ながら、サイトやコンテンツなど、充実していないものより、より充実したものを高く評価する

3 ウェブページ設計（１）トップページ 適宜ここに説明
○○ ○○ MKCメシ （メインビジュアル領域、幅900ピクセル、高さ300ピクセル、学食の外観写真を背景に設定、文字は中央寄せ、サイズ24ピクセル、文字色黄色、枠線なし） トップ 学食 メニュー アクセス このサイトでは、愛知学院大学の名城公園キャンパスを利用する人のために、学食を紹介しています。 学食の利用方法やオススメメニューなどを紹介します。・・・・・・・・・・・・・・ 新着情報 これと同じ構造にする必要はないが、メインビジュアル領域、ナビゲーション領域、コンテンツ領域、フッター領域は必ず含めること 必要な情報を見やすく配置することを考えて、上記サンプルの枠の大きさや位置、色、枠、文字などを変えてデザインすること コンテンツ領域以外は、他のページと共通にすること できるだけ具体的な情報（表示情報＋構築情報）を、できるだけ詳細に入力していく（文字が入りきらない場合は文字サイズを縮小するなど工夫する） チームメンバーひとり最低1ページを担当して開発することになるため、以下、このスライドの図や、スライド全体をコピーペーストするなどして追加作成 最低でも人数分の画面を設計する ○○ ○○ ○○ ○○ ○○

4 ウェブページ設計（２）○○ページ 以後、画面の図や、スライドをコピーペーストして作成していく
最低、チーム人数分のページを作る（ひとりが1ページ以上担当できるようにする）

5 サイト全体・ページ遷移設計 必要があればこ こに補足説明 トップ ページ ○○ページ ○○ページ ○○ページ ○○ページ
枠の数や矢印、位置などを変えてデザイン これと同じにする必要はなく、必要に応じて、ページや矢印を追加したり、変更する

6 サイト全体の共通事項 ページ幅：960px 文字色:000033 文字サイズ：18px 背景色:AFEEEE
背景画像:haikei.jpg（なければ○○の画像など） ウェブサイトの基本的な色や背景、サイズなどを決める 上記を適宜修正する これについては、作って見ないとわからない部分もあるため、後で修正することを見越して、とりあえず決めておく。

7 ディレクトリ設計（１） gakushoku（公開ディレクトリ） index.html（トップページ） design.css（全体のCSS）
imgフォルダ（トップや全体の画像ファイル） menuフォルダ（メニューページのファイルを入れる） menu.html imgフォルダ（メニューページのみで使う画像ファイル） accessフォルダ（アクセスページのファイルを入れる） access.html imgフォルダ（アクセスページのみで使う画像ファイル） 　　： Webkisoフォルダに新規にフォルダを作成し、そのフォルダを公開ディレクトリとする 上記サンプルの書き方は 　●フォルダA 　　　・ファイル1 　　　・フォルダx と書いてある場合、フォルダAの中に、ファイル1とフォルダxがあることを示す。 上記サンプルは、適当に名前を付けているためこれに従う必要はない。 チーム毎に、内容をよく表すフォルダ名やファイル名を名付ける(いずれも半角アルファベットを使うこと）

8 ディレクトリ設計（２） 1ページに入りきらない場合に使用する、不要なら削除する 2ページに入りきらない場合は適宜スライドを追加する

9 WBSと役割分担 作業 担当者 予定等 ひな形ファイル・共通CSS作成 全員 最終2回目のミッション トップページ作成
最終3回目以降のミッション ○○ページ作成 メインビジュアル画像準備 最終2回までに準備 各ページの画像等準備 最終3回までに準備 コンテンツ用取材 WBS(ワーク・ブレークダウン・ストラクチャ）：作業をそれ以上に分割するとかえって非効率になる単位に分割し、実施の前後関係をまとめた図表（上記は簡略版） 最後の発表で「私が作ったページはこのページです・・」と報告できるように、ひとり1ページ以上を担当する その他の作業や、共通部分の構築、写真などコンテンツ収集などは協力して行う 他に必要な作業があれば追加すること 最終成果は、当然ながら、サイトやコンテンツなど、充実していないものより、より充実したものを高く評価する