yoppa.org


芸術情報演習デザイン (Web) 2013 – 東京藝術大学

HTMLとCSSで作る、Webサイト制作の基礎。

HTML(= Hyper Text Markup Language)は、Webの文書の構造を記述するための言語です。また、CSS(Cascading Style Sheet)はHTMLで構造化した文書の体裁やデザインを記述するための方式です。この授業はこの2つの仕組みを駆使して、Webサイトをデザインするための基礎技術の習得を目的とします。

HTMLとCSSは、現在も様々な機能を取り入れながら進化しています。この授業では、HTMLとCSSの基礎を押さえながら、今後の標準となっていくと思われる最新の機能(HTML5やCSS3)も紹介しながら、表面的な見た目だけのWebデザインではなく、その構造を深く理解した上でWebサイトを制作できるようになることを目標にしていきます。

講義の前半で、まずHTMLとCSSについて技術的な内容を理解します。後半は実践編として架空のイベント告知サイトの作成を通して、Webサイトを制作のためのプロジェクトの企画立案から設計、さらにソーシャルメディア(Twitter、Facebook、Google+など)との連携などを考慮しながら、実際にWebサイトを制作し公開します。

  • 東京藝術大学芸術情報センター 2013年度
  • 前・後期、火曜2限

授業計画及び内容

  • ガイダンス,Web概論
  • HTML(1):HTMLとは何か、HTMLの基本構造、段落、見出し
  • HTML(2):ハイパーリンク、インライン画像
  • HTML(3):リスト、テーブル、引用
  • CSS(1):CSS入門
  • CSS(2):セレクタ詳細、ボックスモデル
  • CSS(3):CSSレイアウト、CSSによるデザイン実践
  • 中間課題講評会:自己紹介のページをHTMLとCSSでつくる
  • Tumblr入門:Tumblrとは何か?
  • 実践:Tumblrでイベント告知Webサイトを作る – プロジェクト企画と設計
  • 実践:Tumblrイベント告知Webサイトを作る – ワイヤーフレームの制作、更新計画の策定
  • 実践:Tumblrイベント告知Webサイトを作る – Webサービスを利用、様々なメディアを扱う
  • 実践:Tumblrイベント告知Webサイトを作る – ソーシャルメディアとの連携、ソーシャルグラフ
  • 実践:サイト制作実習
  • 最終講評会

開講日時

木曜3限

教材・参考書

授業資料はWebサイト(http://yoppa.org/)に掲載します。

参考図書:

  • 「Webデザインメソッド」、矢野りん、ワークスコーポレーション
  • 「IA100-ユーザエクスペリエンスデザインのための情報アーキテクチャ設計」、長谷川敦士、ビー・エヌ・エヌ新社
  • 「Designing Tumblr デザイニング・タンブラー」古屋 蔵人 高岡 謙太郎、ビー・エヌ・エヌ新社

成績評価の方法

出席数、履修態度、課題提出(中間課題・最終課題)の内容を総合的に評価します。

履修上の指示事項

Macの基本操作(マウスの操作、文字の入力、ファイルやフォルダの操作)は理解している前提で授業を行います。