到達目標
① 小規模なウェブコンテンツの企画・制作を自分自身で行えるようになる。
② 情報デザインという考え方を理解し、ユーザビリティ・アクセシビリティを含むコンテンツの質について配慮できるようになる。
③ メディアリテラシーという考え方を理解し、コンテンツの制作及び運用における倫理的問題について配慮できるようになる。
ルーブリック
| 理想的な到達レベルの目安 | 標準的な到達レベルの目安 | 最低限必要な
到達レベル（可） |
| 小規模なウェブコンテ
ンツの企画・制作を
自分自身で行える。 | jQueryの文法の3つ
のポイント「セレク
タ」、「メソッド」、「イベ
ント」について理解し
ており、正確に説明
でき、jQueryを利用し
て、リッチなWebコン
テンツを制作できる。 | HTML5、CSS3、
JQueryのWebページ
における役割につい
て理解しており、正確
に説明できる。 | 基礎的なHTML5のタ
グについて理解し、
文字データと画像
データをWebページ
内に適切に配置する
ことができ、かつ
CSS3の仕組みにつ
いて理解しており、ス
タイルシートによる
Webページのデザイ
ンができる。 |
| 情報デザインという
考え方を理解し、
ユーザビリティ・アク
セシビリティを含むコ
ンテンツの質につい
て配慮できるようになる。 | 情報デザインの概念
について理解し、作
品制作の中で効果的
に運用できる。 | 情報デザインの概念
について理解し、作
品制作の中で運用で
きる。
| 情報デザインの概念
について理解でき、
ウェブコンテンツの制
作プロセスと関連づ
けることができる。 |
| メディアリテラシーと
いう考え方を理解し、
コンテンツの制作及
び運用における倫理
的問題について配慮
できるようになる。 | メディアリテラシーに
ついて理解し、作品
制作の中で効果的に
運用できる。 | メディアリテラシーに
ついて理解し、作品
制作の中で運用でき
る。 | メディアリテラシーに
ついて理解でき、ウェ
ブコンテンツの制作
プロセスと関連づけ
ることができる。 |
学科の到達目標項目との関係
教育方法等
概要:
21世紀の現代、情報技術の急速な発展は社会の国際化をさらに加速させており、インターネット上にインタラクティブで魅力的なサイトを構築するために、ウェブページ作成に関する基礎知識が個人でも組織でも、またどの分野に於いても重要となってきている。この授業では、主にクライアントサイドにおけるウェブページ作成に必要な様々な基礎知識と技法を演習を通して修得する。例えば、HTML5、CSS3などである。受講生は、上記の技術を演習で確認しながら、ウェブページ作成に関する知識と技術を概観する。さらに、優れたWebサイトは、明確なテーマを持ったコンテンツで構成されており、訪れるユーザに対し、日々有意義な情報を提供している。Webを利用した情報発信を実践するためには、リッチコンテンツ（Rich Contents）、すなわち、動的な映像やアニメーション、CG、音声などを利用した表現豊かなコンテンツを構築する必要がある。この講義の後半では、HTML5とCSS3の知識を前提とし、jQueryを基礎から解説する。jQueryとはJavaScriptライブラリの1つで、JavaScriptでよく使用される機能を簡素化したライブラリファイルの名称である。受講生は、jQueryを利用した基礎的なWebページ作成演習を通して、模擬的なWebサイトを構築しながら、リッチなWebコンテンツ制作に関する知識と技術を習得する。
授業の進め方・方法:
注意点:
(1)デザインとは個々人の感覚や考え方を他者とのコミュニケーションの中で何らかの「かたち」として表現する作業であり、デザインの基礎は表現の方法のみならず、デザイナー自身の「感じる力」「考える力」「関わる力」にある。日常生活の中で、より多くの感動を得、より深く考え、より多くの人と関わりながら、学習を進めて欲しい。
(2) コンピュータを使った長時間の作業は身体への負担が大きいので、体調を整えて授業に参加してもらいたい。
授業計画
|
|
週 |
授業内容 |
週ごとの到達目標 |
| 前期 |
| 1stQ |
| 1週 |
オリエンテーション・下準備 |
シラバスの説明、ブラウザ・テキストエディタの準備等
|
| 2週 |
基本的なページの作成 |
HTMLファイルとスタイルシートファイルの作成等
|
| 3週 |
基本的なページの作成 |
文字デザイン等
|
| 4週 |
レイアウトとデザイン |
背景色等
|
| 5週 |
レイアウトとデザイン |
影を付ける等
|
| 6週 |
画像の表示 |
画像の表示等
|
| 7週 |
画像の表示 |
背景画像の表示等
|
| 8週 |
リンクとナビゲーション |
リンクの設定等
|
| 2ndQ |
| 9週 |
リンクとナビゲーション |
ナビゲーションメニューの設定等
|
| 10週 |
インデックスページの作成 |
記事の一覧ページの作成等
|
| 11週 |
インデックスページの作成 |
トップページの作成等
|
| 12週 |
テーブルとフォーム |
テーブルの作成等
|
| 13週 |
テーブルとフォーム |
投稿フォームの作成等
|
| 14週 |
仕上げとアレンジ |
文法チェック等
|
| 15週 |
作品の品評会 |
総括
|
| 16週 |
期末試験 |
|
| 後期 |
| 3rdQ |
| 1週 |
オリエンテーション・下準備 |
シラバスの説明、開発環境の準備等
|
| 2週 |
Webページの構成要素について |
jQueryとJavaScriptの違い／jQueryライブラリの準備
|
| 3週 |
jQueryの基礎知識 |
セレクタ／メソッド／イベント
|
| 4週 |
jQueryの文法 |
セレクタ
|
| 5週 |
jQueryの文法 |
メソッド（html／text／val／attr）
|
| 6週 |
jQueryの文法 |
メソッド（HTML要素・文字を追加・削除するメソッド／
|
| 7週 |
jQueryの文法 |
イベント（on／of／マウスから発生するイベント）
|
| 8週 |
jQueryの文法 |
イベント（change／その他のイベント）
|
| 4thQ |
| 9週 |
実践的なメソッド |
hide／show／fadeOut／fadeIn／slideUp／slideToggle／
|
| 10週 |
jQueryアニメーション |
animate
|
| 11週 |
jQueryプラグイン・ライブラリ |
スライドショー（bxSlider／slidr.js）
|
| 12週 |
jQueryプラグイン・ライブラリ |
ポップアップ（ColorBox）／アコーディオン（liteAccordion）
|
| 13週 |
Webコンテンツ制作Ⅰ |
作品の品評会に向けてWebコンテンツ作成を行う。
|
| 14週 |
Webコンテンツ制作Ⅱ |
作品の品評会に向けてWebコンテンツ作成を行う。
|
| 15週 |
作品の品評会 |
総括
|
| 16週 |
期末試験 |
|
評価割合
| 試験 | 発表 | 相互評価 | 態度 | レポート | その他（演習課題・発表・実技・成果物) | 合計 |
| 総合評価割合 | 0 | 0 | 0 | 0 | 20 | 80 | 100 |
| 基礎的能力 | 0 | 0 | 0 | 0 | 20 | 20 | 40 |
| 応用力（実践・専門・融合） | 0 | 0 | 0 | 0 | 0 | 30 | 30 |
| 社会性（プレゼン・コミュニケーション・PBL） | 0 | 0 | 0 | 0 | 0 | 20 | 20 |
| 主体的・継続的学修意欲 | 0 | 0 | 0 | 0 | 0 | 10 | 10 |