シラバス情報
|
教員名 ： 北原 俊一
|
科目名
Webページ作成応用
担当教員名
北原 俊一
ナンバリング
SAi3004
学科
2021年度 大学 社情デザイン学部 社情デザイン学科 2年
学年
2年
開講期
2023年度後期
授業形態
演習
単位数
2.00単位
実務経験の有無
無
実務経験および科目との関連性
無
ねらい
①科目の性格
本科目は、社会情報デザイン学科専門科目「情報領域」の選択科目である。情報伝達手段やインターフェース技術として広く使われるWebページの作成技術，特に動きのあるWebページの作成技術について学ぶ。さらに,イベント処理ー特定要素をクリックをきっかけとしてアニメーションを実行するなどーを通じて，双方向性を取り入れる。
②科目の概要
Webページに動きをつけるための代表的な3つの技術を学ぶ。
1.CSSアニメーション 2.JavaScript言語によるアニメーションとイベント処理 3.Canvas+JavaScriptによる動きのあるグラフィックス ③授業の方法（ALを含む）
・授業前に資料をよく読んでおく。また、必要に応じてそれ以前の内容にも目を通す。
・資料を参照しながら、PC上で演習を行う。 ・操作した成果をファイルの形にまとめて提出する。 ・授業後に資料を改めて読み、内容を再確認する。 リアクションペーパー／実技、実験／レポート
④到達目標
1.CSSアニメーションのしくみを理解する
2. JavaScriptのプログラムを記述して，動きのあるWebページを作ることができる 3. JavaScriptを利用してイベント処理ができる 4. HTMLのCanvas要素をJavaScriptで制御できる ⑤ディプロマ・ポリシーとの関係（右の資質・能力を育成することを目的とする）
SA①-2 情報活用技術の修得
第１回
事前学習
事前に配布される資料を読み、理解が難しいところを把握しておく。
90分
授業内容
オリエンテーション，制作ツールに慣れること，HTMLとCSSの復習
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第２回
授業内容
CSSアニメーション：キーフレームの設定【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第３回
授業内容
CSSアニメーション：アニメーションの順序設定【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第４回
授業内容
CSSアニメーション：HTML要素の重なりを利用したアニメーション【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第５回
授業内容
CSSアニメーション：アニメーションのタイミング制御【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
次回自由制作に備え，そのような創作をするか考えておく 180分
第６回
授業内容
CSSアニメーションを用いた自由制作，まとめ【実技】【創作】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第７回
授業内容
JavaScript：イベントとWebページの表示変更【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第８回
授業内容
JavaScript：イベントとWebページのデザイン変更【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第９回
授業内容
JavaScript：ボタンクリックイベントとWebページのデザイン切り替え【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第１０回
授業内容
JavaScript: アニメーションのタイミング制御【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第１１回
授業内容
JavaScript: フォーム入力データのチェック【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
次回自由制作について，どのような作品を創作するか考えておく 180分
第１２回
授業内容
JavaScriptを利用した自由制作，まとめ【実技】【創作】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第１３回
授業内容
Canvas＋JavaScritpによるグラフィックス：図形描画からアニメーションまで【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
配布資料を読み、理解が難しいところを把握しておく。 180分
第１４回
授業内容
Canvas＋JavaScritpによるグラフィックス：ゲーム性のあるスクリプト【実技】
事後学習・次回事前学習
操作した成果をファイルの形にまとめて提出する。さらに資料を改めて読み，内容を再確認する。
次回自由制作でどのような制作をするか考えをまとめておく 180分
第１５回
授業内容
Canvas＋JavaScriptを利用した自由制作，まとめ【実技】【創作】
事後学習
これまでの作業について，内容と提出状況を再確認する。
90分
フィードバック
成果物についてフィードバックを行う。
評価方法および評価の基準
到達目標1. 2-6回目の提出物より課題への取り組みを評価(25点)
到達目標2. および 3. 7-11回目の提出物より課題への取り組みを評価(各25点) 到達目標4. 12-15回目の提出物より課題への取り組みを評価(25点) ファイル形式で成果物の提出を求め、得点化し、100点満点で60点以上を合格とする 教科書
書名
著者
出版社
ISBN
備考
使用しない。授業前に資料を配布する。
推薦書・参考文献
履修上の助言、教員からのメッセージ
|
