授業概要

2014年度:名古屋市立大学芸術工学部:芸術工学実習D-5:インタラクティブ・WEBデザイン

本授業は2014年度のみの開催です

「インタラクティブWEBデザイン

 – データビジュアリゼーションを軸とした動的なWeb表現」

授業時間:13時-16時10分:授業場所:名古屋市立大学 芸術工学部 工場2Win

講師:松本典子


第1回授業 6/06    

基礎リテラシー

「Web表現を支える技術」

Webサーバーの仕組み、Webサイトを構築する技術

Webインターフェース、コンテンツを作る技術

-ブラウザネイティブ(HTML5,Javascript)とプラグイン型(FlashPlayer,unityPlayer)の違いについて

「情報デザイン、Web表現領域でのプログラミングの活用例」

-実習準備:HTML,CSS,Javascript,jqueryの準備を行う


第2回授業 6/13   

時計、秒数によって変化するWeb表現

ー javascript基礎、css基礎、html5基礎

ープログラミングによるキャラクターの自動複製、生成


第3回授業  6/20 

天気情報によって、背景色、表示する画像が変化するWebサイト

ー外部API、外部データの利用、XMLについて


第4回授業 6/27

javascript外部ライブラリについて:D3.jsライブラリの利用:地図の描画

2014 FIFA World Cupのオープンデータプロジェクトを利用し、 最新データを取得して、世界地図上に、参加国と勝利数を可視化する。

javascript外部ライブラリ、フレームワーク、プラグイン、bootstrapについて、

第5回授業 7/04

マウスインタラクション:キャラクターを生成し、マウスインタラクションで音を奏でてアニメーションさせるサイト

学習内容:キャラクターの生成:アニメーション、マウスインタラクション、音の再生について、インタラクションデザイン


第6回授業 7/11

サイト導線、レイアウトデザイン、配色設計を分析する

ヒートマップ解析を使ったカスタマエクスペリエンス分析、配色の設計、分析

レイアウトパターン、視線センサーを利用した視線導線分析について、

カンプデザイン、レイアウトルールについて


第7回授業 7/18

サーバーサイドのとの連動:投稿システムつくり、データ収集を行い、

結果を、それぞれ異なるサイトで共有データとして利用するWeb表現

サーバーサイドの仕組み、データ保存について、JavascriptとPHPの連動、データ共有、開発設計図(UML図)について