インターネットコンテンツ演習（Exercises in Internet Contents）[2E28]

＜授業のねらい＞

インターネットコンテンツ作成の基礎を学び、情報の選別と表現だけではなく、ユーザビリティとアクセシビリティを考慮した上で、以下の目標を達成する。
１．HTML5・CSS・JavaScriptを正しい構造でプログラミングできる。
２．JavaScriptのライブラリやフレームワークを用いて動的なインタフェースを作成できる。
３．リッチコンテンツの制作技法の基礎を理解できる。
４．ユーザを想定し、ユーザビリティとアクセシビリティを配慮できる。

＜受講にあたっての前提条件＞

１．HTMLの基礎を有すること。
２．Adobe系のソフトを駆使して、簡単な画像処理やコンテンツ作成ができること。

＜具体的な到達目標＞

１．HTML5を理解し、DOMツリー構造を正しく編成できる。
２．CSS3を用いて、ページのレイアウトとナビケーションを編成できる。
３．JavaScriptを学び、動的インタフェースの作成や、リッチコンテンツの挿入を編成できる。
４．ライブラリとフレームワークを活用して、ユーザビリティとアクセシビリティを考慮するより高度のインタフェースデザインを設計できる。

＜授業計画及び準備学習＞

1．演習内容に対する説明、HTMLの復習
全体の演習内容と流を説明し、HTMLの課題を用いて復習する。
準備学習：HTMLを用いて、ページの基本要素を編成する。

2．HTML5の特徴とタグの付け方
HTML5の特徴を説明し、正しいHTML構造の書き方を解説していく。
準備学習：HTML5の文法・構造を理解する。

3．CSS基礎
CSSの文法を説明し、実例と課題を用いて単独要素のプロパティ設定をCSSによって行う。
準備学習：CSSによる設定できる要素、プロパティを記憶する。

4．CSSによるレイアウト１
ID、クラスの概念を説明し、実例と課題を用いて2カラムのページを編成していく。
準備学習：ID、クラス、擬似クラスの概念を理解する。

5．CSSによるレイアウト２
親子、継承などを理解し、ページ構成に関わる視覚要素整形プロパティを重点的に説明していく。
準備学習：3カラムなどより複雑のページを編成する。

6．CSSによるレイアウト３
ナビケーションのインタラクションの制作方法を説明し、動的なインタフェースを編成していく
準備学習：ナビケーションの編成を復習する。

7．総合練習
提示される完成ページの画像とCSS設定表を元に、各自でページを編成していく。
追加課題がある。
準備学習：今まで学んだCSSをHTMLと結合して総合的にページを編成する。

8．JavaScript基礎
JSの文法、HTMLに導入する方法など基礎知識を説明していく。
準備学習：JSの文法に従いコードを編成する。

10．JavaScript応用例１
計算、情報表示、配列など基礎応用を説明していく。
準備学習：基本な書き方を熟練する。

11．JavaScript応用例２
基礎型のナビケーションの作成を解説していく。
準備学習：条件分岐、イベント喚起のプログラミングを編成する。

12．JavaScriptのライブラリjQueryの利用１（データ交信）
Ajaxクラスの利用について説明していく。
準備学習：非同期通信データ取得できるようなページを編成する。

13. JavaScriptのライブラリjQueryの利用２（ナビ生成）
ライブラリとワークフレームの利用について説明していく。
準備学習：ライブラリを利用して高度なナビケーションを編成する。

14．学習内容の振り返り
準備学習：前回までの総復習を行う。

＜成績評価方法＞

演習中の課題と最終課題による100点評価を行う。60点以上合格とする。
１．講義中の規定課題を80％以上完成することを、最終課題採点の前提条件とする。
２．最終課題は100点満点で採点する。

＜教科書＞

指定教科書なし

＜参考書＞

よくわかるHTML5+CSS3の教科書　（大藤幹、マイナビ）
JavaScript 第6版 (David Flanagan,村上列、オライリージャパン)

＜オフィスアワー＞

新宿キャンパスA1575、金曜日16：00−17：00