シラバス参照

基本情報／Basic Information
詳細情報／Detailed Information
授業計画詳細情報／Class Schedule Details

基本情報/Basic Information

遠隔授業（授業回数全体の半分以上）の場合は、科目名の先頭に◆が付加されています（2023年度以降）

開講科目名
／Course

ウェブデザイン演習Ｂ／Exercises in Web Design B

時間割コード
／Course Code

S1407410_S1

開講所属
／Course Offered by

システム工学部／Faculty of Systems Engineering

ターム・学期
／Term・Semester

2024年度／Academic Year　　第2クォーター／2Q

曜限
／Day, Period

木／Thu　1,　木／Thu　2

開講区分
／Semester offered

第2クォーター／2Q

単位数
／Credits

1.0

学年
／Year

2,3,4

主担当教員
／Main Instructor

陳　金輝

科目区分
／Course Group

授業形態
／Lecture Form

演習

教室
／Classroom

北１号館Ａ１０１, 北１号館Ａ６０１／北１号館Ａ１０１, 北１号館Ａ６０１

開講形態
／Course Format

ディプロマポリシー情報
／Diploma Policy

要件年度／Required Year	要件所属／Course Name	ディプロマポリシー／Diploma Policy	DP値／DP Point
2020/04 ～2022/04	システム工学部	2.専門的知識や技能	6
2020/04 ～2022/04	システム工学部	3.課題解決力と自己学修能力	4
2023/04 ～9999/04	システム工学部	2.専門的知識や技能	6
2023/04 ～9999/04	システム工学部	3.課題解決力と自己学修能力	4

担当教員情報/Instructor Information

教員名／Instructor	教員所属名／Affiliation
陳　金輝	システム工学部（教員）

授業の概要・ねらい／Course Aims	本授業はWeb開発に入門するための演習科目である．演習ではHTMLを使って，はじめから順を追って，HTML基礎知識の学習，演習問題に取り組むことにより，Webページを作成するための基礎技術を習得する．また，現在はWebページの見栄えについてはCSSで制御することが一般的になっている．そのため，演習ではHTMLに加えて，一部CSS知識も学んで演習問題で理解を高める．本科目は，教学書とディジタル教材（スライド・サンプルコード等）を併用し，VS Code開発環境によりWebページの作成を行う．学習単元ごとに演習課題が課されてレポートを期間内提出する義務が付けられる．それに加えて，最終回では自由テーマ課題の取り組みとその成果発表により，各回演習で学んだ技術，普段自分から調べた知識が活用できるとともに，自分で開発したWebページとその技術を明快に説明できるように目指す．ウェブデザイン演習Bでは演習Aから学んだ技術を発展させて，Webページのパーツごとについデザインの改善を行う．毎回の演習では１つのパーツを完成させていきます．
到達目標／Course Objectives	ウェブを基盤とした様々なシステム開発に利用されるサーバサイドの基礎技術について，実践的な活用ができるとともに，その体系を正しく説明できる．
成績評価の方法・基準／Grading Policies/Criteria	課題への取り組み状況と演習レポートの内容・作品発表，及び学習態度により評価される
教科書／Textbook	・さわだえり，「書きながら覚える HTML＆CSS 入門ワークブック」，技術評論社,2018 ・作って学ぶhtml&cssモダンコーディング, エビスコム，マイナビ，2021
参考書・参考文献／Reference Book	記載事項なし
履修上の注意・メッセージ／Notice for Students	制作系の演習科目であるため，手を動かすのは極めて重要：演習課題等への積極的な対応はS/A成績の前提条件とする
履修する上で必要な事項／Prerequisite	教学書及びPCの持参，各自のPCを使用する演習である．PCを準備できない場合やバッテリー切れ等で演習ができない場合も配慮はしない．担当教員の指示に従ってHTMLの制作，演習課題への対応，レポート等の提出が必須である．
履修を推奨する関連科目／Related Courses	記載事項なし
授業時間外学修についての指示／Instructions for studying outside class hours	演習計画に沿って計15時間の授業時間外学修（予習・復習など）を行うことが必要である．また，演習内容に関連する課題の調査・考察を含めた自主的学修を求める．
その他連絡事項／Other messages	資料，演習の目標と説明などはMoodleに掲載する．
授業理解を深める方法／How to deepen your understanding of classes	この授業は，本学アクティブラーニング実施要項の以下の項目に該当する ⑥⑦
オフィスアワー／Office Hours	月曜日1限　A715室（事前にメールで連絡してください）
科目ナンバリング／Course Numbering	S62022J01100J202，S62022J01100K231，S62022J01100S232，S62022J01100U242，K62022J01101P283

No.	回（日時）／Time (date and time)	主題と位置付け／Subjects and instructor's position	学習方法と内容／Methods and contents
1	1	ガイダンスとフォームのデザイン演習	ガイダンスフォームのデザイン
2	2	ヘッダーのデザイン	ヘッダーの要素とその表現ゲッター見栄えの調整
3	3	ヒーロー	レイアウトの調整背景画像のデザインテキストのアクセシビリティ
4	4	アイテム一覧の作成	タイル状に並べるレイアウト動的調整レイアウト
5	5	フッターのデザイン	フッターの要素閲覧環境に応じる自動調整可能なフッターの制作
6	6	記事ページの作成	記事ページの制作プラン
7	7	ナビゲーション	オーバーレイ形のナビゲーションハンバーガーメニューのボンタン（アニメーション式）
8	8	まとめと自由課題演習	これまでに授業で行った演習や自分で調べたことを活用し，テーマにそったウェブアプリケーションを自由に作成する．

授業の概要・ねらい／Course Aims	本授業はWeb開発に入門するための演習科目である．演習ではHTMLを使って，はじめから順を追って，HTML基礎知識の学習，演習問題に取り組むことにより，Webページを作成するための基礎技術を習得する．また，現在はWebページの見栄えについてはCSSで制御することが一般的になっている．そのため，演習ではHTMLに加えて，一部CSS知識も学んで演習問題で理解を高める．本科目は，教学書とディジタル教材（スライド・サンプルコード等）を併用し，VS Code開発環境によりWebページの作成を行う．学習単元ごとに演習課題が課されてレポートを期間内提出する義務が付けられる．それに加えて，最終回では自由テーマ課題の取り組みとその成果発表により，各回演習で学んだ技術，普段自分から調べた知識が活用できるとともに，自分で開発したWebページとその技術を明快に説明できるように目指す．ウェブデザイン演習Bでは演習Aから学んだ技術を発展させて，Webページのパーツごとについデザインの改善を行う．毎回の演習では１つのパーツを完成させていきます．
到達目標／Course Objectives	ウェブを基盤とした様々なシステム開発に利用されるサーバサイドの基礎技術について，実践的な活用ができるとともに，その体系を正しく説明できる．
成績評価の方法・基準／Grading Policies/Criteria	課題への取り組み状況と演習レポートの内容・作品発表，及び学習態度により評価される
教科書／Textbook	・さわだえり，「書きながら覚える HTML＆CSS 入門ワークブック」，技術評論社,2018 ・作って学ぶhtml&cssモダンコーディング, エビスコム，マイナビ，2021
参考書・参考文献／Reference Book	記載事項なし
履修上の注意・メッセージ／Notice for Students	制作系の演習科目であるため，手を動かすのは極めて重要：演習課題等への積極的な対応はS/A成績の前提条件とする
履修する上で必要な事項／Prerequisite	教学書及びPCの持参，各自のPCを使用する演習である．PCを準備できない場合やバッテリー切れ等で演習ができない場合も配慮はしない．担当教員の指示に従ってHTMLの制作，演習課題への対応，レポート等の提出が必須である．
履修を推奨する関連科目／Related Courses	記載事項なし
授業時間外学修についての指示／Instructions for studying outside class hours	演習計画に沿って計15時間の授業時間外学修（予習・復習など）を行うことが必要である．また，演習内容に関連する課題の調査・考察を含めた自主的学修を求める．
その他連絡事項／Other messages	資料，演習の目標と説明などはMoodleに掲載する．
授業理解を深める方法／How to deepen your understanding of classes	この授業は，本学アクティブラーニング実施要項の以下の項目に該当する ⑥⑦
オフィスアワー／Office Hours	月曜日1限　A715室（事前にメールで連絡してください）
科目ナンバリング／Course Numbering	S62022J01100J202，S62022J01100K231，S62022J01100S232，S62022J01100U242，K62022J01101P283

No.	回（日時）／Time (date and time)	主題と位置付け／Subjects and instructor's position	学習方法と内容／Methods and contents
1	1	ガイダンスとフォームのデザイン演習	ガイダンスフォームのデザイン
2	2	ヘッダーのデザイン	ヘッダーの要素とその表現ゲッター見栄えの調整
3	3	ヒーロー	レイアウトの調整背景画像のデザインテキストのアクセシビリティ
4	4	アイテム一覧の作成	タイル状に並べるレイアウト動的調整レイアウト
5	5	フッターのデザイン	フッターの要素閲覧環境に応じる自動調整可能なフッターの制作
6	6	記事ページの作成	記事ページの制作プラン
7	7	ナビゲーション	オーバーレイ形のナビゲーションハンバーガーメニューのボンタン（アニメーション式）
8	8	まとめと自由課題演習	これまでに授業で行った演習や自分で調べたことを活用し，テーマにそったウェブアプリケーションを自由に作成する．

授業情報／Class Information

基本情報/Basic Information

担当教員情報/Instructor Information