基本情報/Basic Information

開講科目名 ／Course	ウェブデザイン論b／WEB DESIGN THEORY(B)
開講所属 ／Course Offered by	経済学部経営学科／ECONOMICS MANAGEMENT
ターム・学期 ／Term・Semester	2022年度／2022 Academic Year　　秋学期／FALL SEMESTER
曜限 ／Day, Period	木1／Thu 1
開講区分 ／semester offered	秋学期／Fall
単位数 ／Credits	2.0
学年 ／Year	3,4
主担当教員 ／Main Instructor	李　凱／LI Kai

担当教員情報/Instructor Information

教員名 ／Instructor	教員所属名 ／Affiliation
李　凱／LI Kai	経営学科／MANAGEMENT

授業の目的・内容 ／Course Objectives	この授業は、春学期で学んだ基礎知識を基本に、より高度な動的、インタラクティブなWebデザイン・制作方法を学ぶ。JQueryを使った動的表現手法、及びD3.jsを使ったデータの可視化、Bootstrapを使ったポピュラーWebページの作成など実践的制作手法を学ぶ。また、サーバーサイドのプログラミング言語PythonとMySQLを使って、データベースとの連携手法、データの検索方法を学ぶ。その他、オープンソースを利用したCMSの構築についても演習を含めて講義する。 この授業はWebサイトの設計に関する技術だけでなく、インターネット利用者に使いやすさを意識したサイト構成及び将来ビジネスでWebデザインする際に知っておくと便利な知識や実践に役立つノウハウと注意点についても講義中紹介する。 この講義は、経済学部の学科専門科目として、「データベース、プログラミング、サーバー構築」などウェブデザインに関する専門知識を習得し、コンピュータを利用した実践的な技能、問題解決につなげる能力を身につけます。履修後、発展的に履修系統図が示す３年次以降の学科専門科目、教職関連科目、演習科目の履修を円滑に進めることができます。
授業の形式・方法と履修上の注意 ／Teaching method and Attention the course	１）授業の形態：対面授業を基本とする。新型コロナウイルス感染症など諸事情により、Manabaを利用したオンデマンド型遠隔授業も実施する。対面と遠隔の内容は若干異なる。 ２）授業参加に必要なソフト（無料）：     Visual Studio Code：https://code.visualstudio.com/ Xampp：https://www.apachefriends.org/jp/index.html ３）質疑応答や意見交換の方法：Manabaの質問コーナーに直接に質問を共有するか、或いは先生にメールで個別に質問してください。 ４）レポートの提出方法：毎回に簡単なレポート（やアンケート）が設けられている。対面でも遠隔でもレポート（やアンケート）をManabaに提出して下さい。 ５）レポートの解説は、次回の授業で行う。 履修者は、事前にオンライン授業に提供される参考ウェブサイト、マニュアルを参考し、基本概念、利用方法を理解することが要求される。また積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識、活用事例を検索することが要求される。授業中に提供される参考講義資料を使い、実践的にウェブページの作成を実習する。完成したウェブページをレポートとしてオンラインにアップロードする。
事前・事後学修の内容 ／Before After Study	履修者は講義の理解を深めるために、事前に関連サイト、マニュアルを読んでおく。授業後は、インターネット資源を活用し、関連ウェブサイトの解析、ウェブページの作成を通し、技能を進化させる。質問などは教員にeメールやManabaにある質疑コーナーに質疑して下さい。 講義1回の事前予習に2時間、レポート作成を含む事後学習に2時間程度をかけて予習・復習を行うことが望ましい。 事前学修として、関連ホームページをインターネットから検索、作成方法を考える。 事後学修として、同じデザインが自分で作成できるかを確かめる。
テキスト1 ／Textbooks1	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other 各回に資料を配ります
テキスト2 ／Textbooks2	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other
テキスト3 ／Textbooks3	書籍名 ／Title 著者 ／Author name 出版社 ／Publisher ISBN ／ISBN その他（任意） ／other
参考文献等1 ／References1	書籍名/ｻｲﾄ名 ／Title jQuery標準デザイン講座 (日本語) 大型本 著者 ／Author name 神田 幸恵 出版社/URL ／Publisher 翔泳社 ISBN ／ISBN 4798136220 その他（任意） ／other
参考文献等2 ／References2	書籍名/ｻｲﾄ名 ／Title 著者 ／Author name 出版社/URL ／Publisher ISBN ／ISBN その他（任意） ／other
参考文献等3 ／References3	書籍名/ｻｲﾄ名 ／Title 著者 ／Author name 出版社/URL ／Publisher ISBN ／ISBN その他（任意） ／other
評価方法 ／Evaluation	理解度テスト（60%)：試験による授業内容に関する知識の理解度を評価する。 演習課題（40%)：授業中に提出した個々のウェブページにより、ウェブデザインに関する技能の達成度を評価する。
関連科目 ／Related Subjects	コンピュータ・アーキテクチャ、情報通信ネットワーク、アルゴリズム論、プログラミング論、情報システム論、データベース論、マルチメディ論、データマイニング論、ウェブデザイン論など
備考 ／Notes	積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識・事例を検索・真似する テキストは特になし。各回に関連資料を配布します。
到達目標 ／Learning Goal	ウェブデザインに関する専門知識を習得し、ウェブサイトやウェブページを管理者、利用者それぞれに適した形で設計できるようにする。

回 ／Time	授業計画（主題の設定） ／Class schedule	授業の内容 ／Contents of class	事前・事後学修の内容 ／Before After Study
1	JQuery入門（１）Selector	JQueryの引用、構文を説明し、階層Selector、属性Selector、フィルター、データの操作方法を理解できるようにする。	授業前に、jQueryの利用方法について調べる。授業後、jQueryが正しく実行できたかを復習する。
2	JQuery入門（２）Event	マウス、キーボードに関連するイベントを説明し、インタラクティブなウェブページの作成ができるようにする。	授業前に、eventの種類について調べる。授業後、各eventが正しく実行できたかを復習する。
3	JQuery入門（３）Effect	Fade, Animate, Hide, Toggleなどエフェクトを理解できるようにする。	授業前に、effectの種類について調べる。授業後、各effectが正しく実行できたかを復習する。
4	JQuery UI	Menu, Accordion, Tab, Dialog, ToolTipなどWidgets UIを理解できるようにする。	授業前に、UIコンポーネントの種類について調べる。授業後、各UIが正しく表示できたかを復習する。
5	D3：データの可視化	強力なデータ視覚化ライブラリーD3を利用し、棒、円、折れ線などグラフを作成できるようにする。	授業前に、D3の使い方について調べる。授業後、各グラフが正しく表示できたかを復習する。
6	Bootstrap：ポピュラーWebページの作成	Carousel, Jumbotron, ParallaxなどポピュラーWebページの作成ができるようにする。	授業前に、Bootstrapの使い方について調べる。授業後、各ポピュラーページが正しく表示できたかを復習する。
7	Flask入門（１）基礎	サーバー側のプログラミング言語Pythonを利用したWebアプリケーションフレームワークFlaskを紹介しながら、Pythonの文法、基本構文を理解できるようにする。	授業前に、Flask環境を構築する。授業後、Pythonが正しく実行できたかを復習する。
8	Flask入門（２）演算、文字列処理	Pythonのデータ型、配列、演算子などの使い方を紹介し、条件、ループ、関数の処理方法を理解できるようにする。	授業前に、条件、ループの構文について調べる。授業後、各プログラムが正しく実行できたかを復習する。
9	MySQL入門（１）データの定義	database, tableの作成・削除、データ型を理解できるようにする。	授業前に、MySQLの構文について調べる。授業後、Database、Tableが正しく作成できたかを復習する。
10	MySQL入門（２）データの操作	データの挿入、削除、更新など命令を理解できるようにする。	授業前に、Tableに関する構文について調べる。授業後、データが正しく挿入・削除・更新されたかを復習する。
11	MySQL入門（３）データの検索	射影、選択、条件、グループを使って、データを検索できるようにする。	授業前に、データ検索の方法について調べる。授業後、データが正しく検索できたかを復習する。
12	MySQL入門（4）複数のテーブルからデータの検索	結合を利用した複数のテーブルから、指定されたデータを検索できるようにする。	授業前に、Tableの結合方法について調べる。授業後、複数Tableからデータを検索できたかを復習する。
13	FlaskとMySQLの連携	Formからのデータ入力、データベースに挿入・検索できるウェブページを作成できるようにする。	授業前に、PythonとMySQLの連携方法を調べる。授業後、プログラムが正しく実行できたかを復習する。
14	CMSの導入	オープンソースのCMSを利用し、ブログシステム、ネット・ショッピングウェブサイトを構築できるようにする。	授業前に、必要なCMSをダウンロードする。授業後、データベースとCMSが正しくインストールできたかを復習する。