![]()  | 
    
| 科目一覧へ戻る/Return to the Course List | 2021/08/23 現在/As of 2021/08/23 | 
| 
                  開講科目名 /Course  | 
                ウェブデザイン論a/WEB DESIGN THEORY(A) | 
|---|---|
| 
                  開講所属 /Course Offered by  | 
                経済学部経営学科/ECONOMICS MANAGEMENT | 
| 
                  ターム?学期 /Term?Semester  | 
                2021年度/2021 Academic Year 春学期/SPRING SEMESTER | 
| 
                  曜限 /Day, Period  | 
                木1/Thu 1 | 
| 
                  開講区分 /semester offered  | 
                春学期/Spring | 
| 
                  単位数 /Credits  | 
                2.0 | 
| 
                  学年 /Year  | 
                3,4 | 
| 
                  主担当教員 /Main Instructor  | 
                李 凱/LI Kai | 
| 
                    教員名 /Instructor  | 
                  
                    教員所属名 /Affiliation  | 
            
|---|---|
| 李 凱/LI Kai | 経営学科/MANAGEMENT | 
| 
授業の目的?内容                         /Course Objectives  | 
                      
新しいデバイスの登場でインターネットの世界が変わり始めている。従来は「見ること」を中心としたWebサイトは、今は「使うもの」として進化している。 この授業では、Webデザインに必要な知識を講義するとともに、デバイスの多様化に対応するWebサイトの制作手法について講義と演習を行う。主に今後の標準となるHTML5やCSS3を紹介しながら、Webデザインを深く理解した上で、Webページの制作手法を学ぶ。また動的Webページを作成できる代表的なプログラミング言語JavaScriptを用いて、動的Webページ、モーショングラフィックスを含む様々な技術を学ぶ。 この講義は、経済学部の学科専門科目として、「HTML、CSS、JavaScript」などウェブデザインに関する専門知識を習得し、コンピュータを利用した実践的な技能、問題解決につなげる能力を身につけます。履修後、発展的に履修系統図が示す3年次以降の学科専門科目、教職関連科目、演習科目の履修を円滑に進めることができます。  | 
                    ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 
授業の形式?方法と履修上の注意                         /Teaching method and Attention the course  | 
                      
1)遠隔授業の形態:Manabaを利用したオンデマンド型遠隔授業を実施する。 2)授業参加に必要なソフト(無料): Visual Studio Code:https://azure.microsoft.com/ja-jp/products/visual-studio-code/ 3)質疑応答や意見交換の方法:Manabaの質問コーナーに直接に質問を共有するか、或いは先生にメールで個別に質問してください。 4)学期末試験に替わるテストの実施方法:試験やテストを実施しません。提出したレポートで評価します。出席の代わりに毎回に簡単なレポート(やアンケート)が設けられています。必ずレポート(やアンケート)を提出して下さい。 履修者は、必ずパソコンに無料のVisual Studio Codeをインストールして下さい。事前にオンライン授業に提供される参考ウェブサイト、マニュアルを参考し、基本概念、利用方法を理解することが要求される。また積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識、活用事例を検索することが要求される。授業中に提供される参考講義資料を使い、実践的にウェブページの作成を実習する。完成したウェブページをレポートとしてオンラインにアップロードする。  | 
                    ||||||||||
| 
事前?事後学修の内容                         /Before After Study  | 
                      
履修者は講義の理解を深めるために、事前にオンライン授業にアップする参考サイト、マニュアルを読んでおく。授業後は、インターネット資源を活用し、関連ウェブサイトの解析、ウェブページの作成を通し、技能を進化させる。質問などは教員にeメールやManabaにある質疑コーナーに質疑して下さい。 講義1回の事前予習に100分、レポート作成を含む事後学習に100分程度をかけて予習?復習を行うことが望ましい。  | 
                    ||||||||||
| 
テキスト1                         /Textbooks1  | 
                      
                      
  | 
                    ||||||||||
| 
テキスト2                         /Textbooks2  | 
                      
                      
  | 
                    ||||||||||
| 
テキスト3                         /Textbooks3  | 
                      
                      
  | 
                    ||||||||||
| 
参考文献等1                         /References1  | 
                      
                      
  | 
                    ||||||||||
| 
参考文献等2                         /References2  | 
                      
                      
  | 
                    ||||||||||
| 
参考文献等3                         /References3  | 
                      
                      
  | 
                    ||||||||||
| 
評価方法                         /Evaluation  | 
                      
理解度テスト(60%):各回のレポート(アンケート、ミニテスト)や試験による授業内容に関する知識の理解度を評価する。 演習課題(40%):授業中に提出した個々のウェブページにより、ウェブデザインに関する技能の達成度を評価する。  | 
                    ||||||||||
| 
関連科目                         /Related Subjects  | 
                      コンピュータ?アーキテクチャ、情報通信ネットワーク、アルゴリズム論、プログラミング論、情報システム論、データベース論、マルチメディ論、データマイニング論、ウェブデザイン論など | ||||||||||
| 
備考                         /Notes  | 
                      
積極的にGoogleやマニュアルなどインターネット資源を活用し、関連知識?事例を検索?真似する テキストは特になし。各回に関連資料を配布します。  | 
                    ||||||||||
| 
到達目標                   /Learning Goal  | 
                ウェブデザインに関する専門知識を習得し、ウェブサイトやウェブページを管理者、利用者それぞれに適した形で設計できるようにする。 | 
| 回 /Time  | 
          授業計画(主題の設定) /Class schedule  | 
          授業の内容 /Contents of class  | 
          事前?事後学修の内容 /Before After Study  | 
              
|---|---|---|---|
| 1 | Webデザイン概論 | Webデザインの歴史、変化、トレンドを紹介する。 | 授業前に、Webデザインのトレンドについて調べる。 授業後、Webデザインの変化を正しく理解しているか復習する。  | 
              
| 2 | インターネットとサーバーの概要 | IP、URL、クライアント、サーバー、TCP/IPなど概念を説明し、インターネットに関する基本概念を紹介する。 | 授業前に、IPアドレスの構成について調べる。 授業後、パケット通信を正しく理解しているかを復習する。  | 
              
| 3 | Webデザインスタイルガイド | ウェブサイトを鑑賞しながら、制作手順の説明、各プロセスに使われるソフトウェア、ナビゲーション、グレード、コンポーネントなどのデザインルールを紹介する。 | 授業前にウェブサイトの基本構成について調べる。 授業後、各コンポーネントの役割を復習する。  | 
              
| 4 | HTML入門(1)テキスト | HTML5の特徴、開発環境を紹介し、h, em, strong, listなどテキストの表示に関連するタグを利用できるようにする。 | 授業前に、必要なソフトウェアを正しくインストールできているかを確認する。 授業後、各タグの意味を正しく理解しているかを復習する。  | 
              
| 5 | HTML入門(2)ハイパーリンク、画像、テーブル | aタグ、imgタグ、Tableタグの使い方を理解できるようにする。 | 授業前に、Tableタグの構造について調べる。 授業後、Tableの行と列を正しく表示できたかを復習する。  | 
              
| 6 | Webデザインと色彩選択 | 色空間、RGB、HSVなど色彩に関する基礎知識を説明し、数値で決める色彩設計方法を理解できるようにする。 | 授業前に、色空間について調べる。 授業後、各色空間の各数字の意味を正しく理解したかを復習する。  | 
              
| 7 | CSS入門(1)ボックスモデル | CSS3の記入方法?箇所を説明し、margin, padding, borderを利用したボックスモデルを理解できるようにする。 | 授業前に、ボックスモデルの基本構造について調べる。 授業後、各数字の意味を正しく理解したかを復習する。  | 
              
| 8 | CSS入門(2)Floatを利用したレイアウト | left, right float, overflowを利用したレイアウト方法を理解できるようにする。 | 授業前にFloatレイアウトについて調べる。 授業後、図やテキストが正しくFloatしたかを復習する。  | 
              
| 9 | CSS入門(3)レスポンシブデザイン | マルチデバイスに対応するレスポンスデザインのCSS作成方法を理解できるようにする。 | 授業前に、レスポンシブデザインについて調べる。 授業後、PCとスマートフォンの表示の違いを復習する。  | 
              
| 10 | HTMLとCSSを利用したウェブデザイン実践 | 総合的にHTMLとCSSを用いて、モダンウェブサイトのデザインを実践する。 | 授業前に、必要な写真、デザインを考えておく。 授業後、各CSSがHTMLにどのように影響しているかを復習する。  | 
              
| 11 | JavaScript(1)変数と演算 | JavaScriptの記入方法?箇所を説明し、変数、演算、文字列の連結を利用し、簡単なプログラミングを作成できるようにする。 | 授業前に、JavaScriptの記入場所について調べる。 授業後、各プログラムが正しく実行できたかを復習する。  | 
              
| 12 | JavaScript(2)条件とループ | IF, Switch, While, Do While, Forを利用した条件分岐、繰り返し処理を理解し、制御プログラミングの作成ができるようにする。 | 授業前に、条件分岐とループの種類について調べる。 授業後、各プログラムを正しく理解しているかを復習する。  | 
              
| 13 | JavaScript(3)関数 | 引数、戻り値、グローバル変数、ローカル変数などを説明し、再帰、ソートなど古典的なアルゴリズムを理解できるようにする。 | 授業前に、関数の定義、引用方法などについて調べる。 授業後、定義した関数が正しく計算したかを復習する。  | 
              
| 14 | 動的ウェブデザインの実践 | 総合的にHTML、CSSとJavaScriptを用いて、動的ウェブサイトのデザインを実践する。 | 授業前に、動的ウェブサイトの事例を調べる。 授業後、JavaScriptが正しく実行できたかを復習する。  |