理工学部Faculty of Science and Engineering
COT300XE（計算基盤 / Computing technologies 300）ＷｅｂデザインWeb design
百田 潤子Junko MOMOTA
授業コードなどClass code etc
| 学部・研究科Faculty/Graduate school | 理工学部Faculty of Science and Engineering |
| 添付ファイル名Attached documents | |
| 年度Year | 2022 |
| 授業コードClass code | H6062 |
| 旧授業コードPrevious Class code | |
| 旧科目名Previous Class title | |
| 開講時期Term | 秋学期授業/Fall |
| 曜日・時限Day/Period | 水3/Wed.3 |
| 科目種別Class Type | |
| キャンパスCampus | 小金井 |
| 教室名称Classroom name | 各学部・研究科等の時間割等で確認 |
| 配当年次Grade | |
| 単位数Credit(s) | |
| 備考（履修条件等）Notes | |
| 他学部公開科目Open Program | |
| 他学部公開（履修条件等）Open Program (Notes) | |
| グローバル・オープン科目Global Open Program | |
| 成績優秀者の他学部科目履修制度対象Interdepartmental class taking system for Academic Achievers | |
| 成績優秀者の他学部科目履修（履修条件等）Interdepartmental class taking system for Academic Achievers (Notes) | |
| 実務経験のある教員による授業科目Class taught by instructors with practical experience | |
| SDGsCPSDGs CP | |
| アーバンデザインCPUrban Design CP | |
| ダイバーシティCPDiversity CP | |
| 未来教室CPLearning for the Future CP | |
| カーボンニュートラルCPCarbon Neutral CP | |
| 千代田コンソ単位互換提供（他大学向け）Chiyoda Campus Consortium | |
| カテゴリー＜理工学部＞Category |
応用情報工学科 学科専門科目 |
すべて開くShow all
すべて閉じるHide All
Outline (in English)
We learn implementation がを based on the structure of the latest Web site and visual design and the information design for communication designs and a standard technical specification.
Based on this concept, we learn an implementation technology to embody information structure design and it in Web site construction.
授業で使用する言語Default language used in class
日本語 / Japanese
授業の概要と目的（何を学ぶか）Outline and objectives
Webメディアは急速に変化しWebサイトのビジュアルデザインと同等に、コミュニケーションデザインのための情報設計や標準技術仕様に基づいた実装が重視されています。その概念をベースに、現状Webサイト構築において特に重要度が増している情報構造設計とそれを具現化する実装技術を習得します。
到達目標Goal
自身のオリジナリティを養うとともにそれを具現する技術を身につける。
この授業を履修することで学部等のディプロマポリシーに示されたどの能力を習得することができるか（該当授業科目と学位授与方針に明示された学習成果との関連）Which item of the diploma policy will be obtained by taking this class?
ディプロマポリシーのうち、「DP1」と「DP2」と「DP4」に関連
授業で使用する言語Default language used in class
日本語 / Japanese
授業の進め方と方法Method(s)（学期の途中で変更になる場合には、別途提示します。 /If the Method(s) is changed, we will announce the details of any changes. ）
ユーザーを惹きつけるためのビジュアルデザインの技術から、検索エンジンや音声ブラウザなど幅広くアクセシビリティに対応するための（X）HTMLやCSSの書式・基本設計、理解しておくべきクライアント/サーバーサイドのプログラミングやFlashおよび映像・Web3Dまでの実習を織りまぜながら、Web構築を実体験します。感染症対策のためにオンラインを併用する場合がある。
感染対策のためにオンラインとの併用を考えています。環境が変わったら変更する場合もあります。
また、課題などのフィードバックは学習支援システムや授業などで行います。
アクティブラーニング（グループディスカッション、ディベート等）の実施Active learning in class (Group discussion, Debate.etc.)
なし / No
フィールドワーク（学外での実習等）の実施Fieldwork in class
なし / No
授業計画Schedule
授業形態/methods of teaching：対面/face to face
※各回の授業形態は予定です。教員の指示に従ってください。
1[対面/face to face]：コンテンツ構成概要
講義計画と演習方法の概略を説明。採点の配分や目標とする構成すべきサイトの指示をします。
2[対面/face to face]：Webプランニング
実際に仕立てるWebのプランニング構成のルールを決定していきます。
3[未定/undecided]：Webプランニング2
前回の概要を元に各人が発展的に構成をプランニングしてゆきます。
4[未定/undecided]：Web標準XHTML＋CSS 1
Webを構成するXHTMLのリファレンスとCSSのリファレンスを参照にしてEditorを使って構成していく演習です。
5[未定/undecided]：Web標準XHTML＋CSS 2
前回に続くXHTMLとCSSの演習。
6[対面/face to face]：中間プレゼンテーション
各自、プランニングした制作サイトについての中間時点での発表会。
7[対面/face to face]：Webサイト制作演習
プレゼンテーションでディスカッションされたことを元にCSSによるレイアウト構成などを再構成してゆきます。
8[未定/undecided]：リッチコンテンツの活用例
動的な仕掛けを活用して魅力あるサイトのデザイン構成を学び、活用する技術を学びます。
9[未定/undecided]：Webサイト制作演習
引き続き、前回講義で学んだ知識をプラスして各人のサイトを発展させる演習。
10[未定/undecided]：RIA・基本演習
注目されるコンテンツを重点にインパクトを与える効果をプランニングに加えていきます。
11[未定/undecided]：RIA・応用演習
前回のプランニングを具現化していくためにどのような技術を利用して配していくか、各人単位で発展的にデザインしてゆく演習。
12[対面/face to face]：Webサイト制作演習
前回演習の続きを予定。
13[対面/face to face]：Webサイト制作演習
公開を目標として仕立ててきたサイトの最後調整をします。ここで完成を目指します。
14[対面/face to face]：講評
各人の公開してきたサイトについての講評会を予定しています。
授業時間外の学習（準備学習・復習・宿題等）Work to be done outside of class (preparation, etc.)
【本授業の準備・復習等の授業時間外学習は、4時間を標準とする】基本、講義内での演習はその時間内に提出することを目標にしますが、内容によって修正を求めて再提出する場合や課題を追加する場合もあります。
テキスト（教科書）Textbooks
特定の教科書は用ません。
参考書References
必要に応じて講義中に紹介します。
成績評価の方法と基準Grading criteria
講義内での進捗確認と演習の成果のみで評価します（100％）
学生の意見等からの気づきChanges following student comments
特にありません。
学生が準備すべき機器他Equipment student needs to prepare
大学から貸与されたノートPCを授業で使用するので持参すること。