yoppa.org


Webデザイン演習

  • 東京藝術大学芸術情報センター2012年度
  • 木曜4限

授業のテーマ

表現のメディアとしてのWeb。

現在、Webを通して、日々膨大な情報がやりとりされています。情報を伝達するための手段として、Webは欠かすことのできないメディアとなっています。しかし、Webは単純な情報の伝達手段を越えた表現のためのメディアとしての大きな可能性を秘めています。Webブラウザの進化、Webに関連する様々なテクノロジーの進歩によって、Webを用いた表現の幅は日々拡張されています。

HTMLにまつわる技術は現在大きく変化しつつあります。これまでのWebはハイパーリンクされた「書類」という概念がベースになっていました。しかし、HTML5やJavaScriptのAPIの発達によって、Web自身が「アプリケーション」として動作することが可能となってきました。また、FacebookやGoogle+などに代表されるような、実社会とリンクしたソーシャルなネットワークを活用も、これからのWebで欠かすことのできない知識となります。この講義ではこうしたWebの変化にも考慮しながら、新しい技術を積極的に紹介していきます。

この授業では、Webを表現のためのメディアと捉え、様々な技術を学びながらその可能性を探っていきます。

講義ノート

HTML5テンプレート

Dreamweaverを使用せずにHTMLを作成する場合は、下記のテンプレートを活用してください。

授業計画及び内容

  1. オリエンテーション:Webをめぐるここ数年の状況
  2. HTML、CSSの基礎についての確認
  3. HTML5 (1):文書の構造化のための新要素
  4. HTML5 (2):音声、動画などマルチメディアのための新要素
  5. CSS 3 (1):CSS3によるWebデザイン1
  6. CSS 3 (2):CSS3によるWebデザイン2
  7. 中間課題「HTML5とCSS3によるWebデザイン」講評
  8. SNSとの連携(1):ソーシャルグラフとは、OGPについて
  9. SNSとの連携(2):SNSと連携を実践 (Facebook, Twitter, Google+)
  10. jQuery (1):jQueryとは、簡単なアニメーションを作成
  11. jQuery (2):jQueryのプラグインの活用
  12. サイト制作実践(1):「Webによる表現」企画立案と調査、実例紹介
  13. サイト制作実践(2):「Webによる表現」設計、コーディング
  14. サイト制作実践(3):「Webによる表現」制作実習
  15. 最終課題講評会

参考図書:

  • 羽田野 太巳、徹底解説 HTML5マークアップガイドブック 最終草案対応版―全要素・全属性完全収録、秀和システム
  • 西畑 一馬、Web制作の現場で使う jQueryデザイン入門、アスキー・メディアワークス

成績評価の方法

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

履修上の指示事項

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