課題・授業概要」カテゴリーアーカイブ

課題提出について

講評が始まってからの提出になると時間もかかってしまうため,学科内のサーバーの指定の場所(授業で説明します.)に講評が始まる前までに提出するようにしてください.(作業が終わっていれば前日でも可.最低限講評当日のお昼休みまでには提出すること! 提出後は一度webページを確認すること!)

[提出のスタイル]
提出する場合は自分の作品をフォルダにまとめて提出すること.まとめかたは下記の画像を参考にして下さい.フォルダ名には「学籍番号 半角アンダーバー 氏名」としてください.※サーバーにアップした後はリンク切れがないかブラウザーでwebページを一度開いて画像やリンクを確認して下さい.リンク切れがある場合は修正すること.

CSS・画像・JavaScriptはフォルダ分けして作業していなければHTMLファイルと同一階層上に置いておけばOKです.提出のためにわざわざする必要はありません.

fig

カテゴリー: ALL, 課題・授業概要 | 課題提出について はコメントを受け付けていません

課題

[課題]

物語性のあるWeb サイトの制作を行う。


[提出日]
最終5週目(木曜日)の授業で各自プレゼンテーションを行う。
プレゼンテーションは各自2分程度とする。講評後,翌週までに指定の場所に最終版を提出すること。
講評後,翌週までに指定の場所に最終版を提出すること。

[発表の形式]
各自が作成した「作品」を使用しプレゼンテーションする。

[提出物]
制作した「作品」をデータとして提出する。
(講評前にはプレゼンテーションのため一時仮提出する)
講評後,翌週までに最終版のデータを提出すること。
詳しい提出方法(データの整理など)は後日伝える。

[条件]
最低条件としてインタラクションを含めること。また,
複数のリンクおよび複数の画像・任意のテキストを使用すること。
HTLM,CSS,Javascriptを使用すること。
サイト内に必ずサイトマップ(全体の構造)を含めること。

[スケジュール]

[ポイント]
物語性の定義は各自の判断に委ねる。例えばこれを時間軸と捉えても構わないし,
絵本・映画のような物語と捉えても構わない。(例えば自分自身のこれまでの制作の姿勢を
まとめるカタチでも良いし,プロフィール[自身の興味や紹介],これまでに作成してきた
作品画像を見せるギャラリー的な位置づけなど。)

閲覧者に分かりやすくかつ効果的に紹介するためのウェブサイトを制作すること。
(客観的な視点を持つこと)

各自で判断し適切な情報量と見せ方を考慮すること。
単純なリスト化されたサイトと考えずに,ウェブ特有のインタラクションやメディアの特性を発見し,
独自性のある表現手法で視覚化していくこと。

色彩・形態・構成・文字などは紙面のデザインと同様に捉え,デザインを行うこと。

カテゴリー: ALL, 課題・授業概要 | 課題 はコメントを受け付けていません

授業のスケジュール

【Aクラス】
1|9月10日    オリエンテーション|課題説明|講義・演習
2|9月17日    講義・演習
3|9月24日    講義・演習
4|10月1日    講義・演習・制作(作品のチェック)
5|10月8日    講評日  (作品データ事前提出)
※講評後,翌週までに最終版のデータを提出すること。

【Bクラス】
1|10月15日    オリエンテーション|課題説明|講義・演習
2|10月22日    講義・演習
3|10月29日    講義・演習
4|11月12日    講義・演習・制作(作品のチェック)
5|11月19日    講評日  (作品データ事前提出)
※講評後,翌週までに最終版のデータを提出すること。

【Cクラス】
1|11月26日    オリエンテーション|課題説明|講義・演習
2|12月3日    講義・演習
3|12月10日    講義・演習
4|12月17日    講義・演習・制作(作品のチェック)
5|1月7日    講評日  (作品データ事前提出)
※講評後,翌週までに最終版のデータを提出すること。

カテゴリー: ALL, 課題・授業概要 | 授業のスケジュール はコメントを受け付けていません

授業の展開計画


【第1週目】

[目標]
HTMLの基礎知識として,HTMLの役割とCSSの役割を理解する。
HTMLとCSSを利用し簡単なウェブページをコーディング出来るようになる。

[授業の流れ]
● オリエンテーション及び課題説明
● Webページとは
最小限のHTMLファイルのサンプルを確認,ブラウザ上の表示とコードの確認
【サンプル】01_helloworld
● HTMLタグの役割と文章の構造化について
プレーンテキストで配布したレシピを使用しテンプレートをベースにマークアップ
【サンプル】03_markup
● CSSとは
HTMLとCSSの関係の説明。CSSのリンクを切り換えて表示の変化を確認
【サンプル】03_css
● 画像を追加する
タグの紹介─タグを利用して画像を表示する
【サンプル】05_img
● ハイパーリンク01─異なる文章同士のリンク
レシピのページから,作者紹介のページにリンクを貼る
【サンプル】06_hyperlink_01
● ハイパーリンク02─同じページ内へのリンク
【サンプル】06_hyperlink_02
● ページ内のオートスクロール
構想する上で可能な表現として早めに紹介。詳細は後日。
【サンプル】07_scroll_js


【第2週目】
[目標]
CSSを利用したレイアウトの基礎(フローレイアウト)を理解する

[授業の流れ]
● CSSを利用したレイアウト
「ボックスモデル」の説明および「フローレイアウト」による背初期紹介ページの作成。
【サンプル】01_box_model
● 背景画像
表現手法のひとつとして配付・紹介。詳細は省く。
【サンプル】02_bgimage
● ウェブフォント
技術のひとつとして配付・紹介。詳細は省く。
【サンプル】03_webfont


【第3週目】
[目標]
フローレイアウトによりヘッダーとフッターをもつ2カラムのウェブページが作れるようになる。
ポジションレイアウトの紹介と習得

[授業の流れ]
● CSSによるフローレイアウトの復習・ポジションレイアウトの紹介と習得
postion: absolute(絶対), postion: fixed(固定), postion: relative(相対)
【サンプル】CSS_Layout


【第4週目】
[制作日]
課題に対する個別の相談に対応する。


[第5週目】
[講評]
事前提出した作品を各自が操作しプレゼンテーションする。

カテゴリー: ALL, 課題・授業概要 | 授業の展開計画 はコメントを受け付けていません

基礎デザインII-Web

【授業概要】
この授業では,モニター上におけるインタラクティブな情報の伝達効果を理解し,
この構成と視覚化の手法を学ぶ。具体的には演習を通じてウェブサイトにおける
情報伝達のための基礎的な考え方および技術を学び,ウェブサイト上での効果的な
プレゼンテーションや表現手法を習得することを目的とする。

【学習ポイント】
色彩・形態・構成・文字に関する造形理念はウェブサイトなどのモニター上の視覚表現でも同様に捉えて制作のプロセスを辿っていくこと。下記はキーワードとして頭に入れておく。

編集:    適切な視覚化を行うための情報の調査・収集・整理
技術:    ウェブ制作に必要なコーディング技術(HTML, CSS, Javascriptなど)
色彩:    紙面・モニターでは色再現が異なるため,適した色彩を使用する
形態:    紙面同様,モニター上で伝達すべき情報内容のために使用する形
構成:    モニタ上での可変性を視野に入れた情報構成や紙面同様の美しいレイアウト
文字:    ウェブサイトに適した可読性を含んだタイポグラフィ
表現:    色彩・形態・構成など自らのスタイルにあった独自性のある表現

※各自が習うだけでなく,さまざまな作品・技術・手法などの視覚化(見せ方)を探り,    適切な情報伝達と独自性のあるスタイルを発見していくように努める

【評価方法】
最終作品(提出物)および講評の内容,出席,授業の習得度を総合的に判断し評価対象とする。

【提出について】
提出物の条件および詳細,具体的な提出方法については別途伝える。

【注意事項】
毎回,技術的な演習を行うので授業には必ず出席すること。
他の授業とは制作日の日程が異なるので注意すること。
特に事情がなく授業に欠席した場合の質問には答えられません。

【ウェブサイトに関して参考URL】
→ 1. [Awwwards − Website Awards − Best Web Design Trends]
→ 2. [FWA]
→ 3. [WebDesign Bookmark S5-Style]
→ 4. [WebDesignClip]
→ 5. [Best Web Gallery]
→ 6. [straightline™_bookmark]
→ 7. [muuuuu.org]

カテゴリー: ALL, 課題・授業概要 | コメントする