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

授業のテーマ

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

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

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

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

講義ノート

• 2012.04.12 : 第１回：ガイダンス・HTML5とは何か?
• 2012.04.19 : 第２回：jQuery入門
• 2012.04.26 : 第３回：jQuery入門 – イベント
• 2012.05.10 : 第４回：jQuery プラグイン – フォトギャラリーを作成する1
• 2012.05.17 : 第５回：jQueryのプラグインを使用してフォトギャラリーをつくる(実習)
• 2012.05.24 : 第６回：中間課題講評回 – jQueryのプラグインを使用してフォトギャラリーをつくる
• 2012.05.31 : 第７回：HTML5実践1 – Canvas + Javascriptで図形を描く
• 2012.06.07 : 第８回：HTML5実践２ – jsdo.itを使ってみる
• 2012.06.14 : 第９回：HTML5実践３ – Three.jsで3Dプログラミング
• 2012.06.21 : 第10回：HTML5実践 Three.js ２ – アニメーション
• 2012.06.27 : 第11回：HTML5実践 Three.js ３ – パーティクルシステム
• 2012.07.05 : 第12回：HTML5実践 表現のための様々なJavaScriptライブラリ、最終課題発表

HTML5テンプレート

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

• HTML5テンプレート(Zip)

授業計画及び内容

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