LogoMark.png

井上貢一/情報デザインA の変更点


#author("2021-07-13T10:04:10+09:00","default:inoue.ko","inoue.ko")
#author("2021-10-01T09:59:56+09:00;2021-07-13T10:04:10+09:00","default:inoue.ko","inoue.ko")
*造形表現特定演習|情報デザインA
芸術研究科 博士前期課程|&small(火曜2限 ゼミ室611|2021年開講);
&small(この科目は隔年開講です。);
~

***受講生
***2021年度受講生
-[[伊藤 晃生>伊藤晃生]]|[[情報デザインA>伊藤晃生/情報デザインA]]
-[[王 淑嬋>王淑嬋]]|[[情報デザインA>王淑嬋/情報デザインA]]
-[[諸 琳>諸琳]]|[[情報デザインA>諸琳/情報デザインA]]
-[[濵﨑 皓心>濵﨑皓心]]|[[情報デザインA>濵﨑皓心/情報デザインA]]
-[[季 卓芸>季卓芸]]|[[デザイン応用演習>季卓芸/デザイン応用演習]]

~

**第14回|2021.07.13|遠隔 / 対面
それぞれの希望に応じて、Zoom参加、ゼミ室に参加、自由選択とします。
~

***最終確認
-この授業は、初回を金曜にスタートしているので、他の科目より1週間早い最終回となります。
-今回は、冒頭の事務連絡の後を、個別の質疑応答の時間とし、その後、12:00ごろから、各自の最終進捗確認を行います。
-単位認定に関わる、成果物の確認は、前期試験期間中に行います。よって 7月23日までに、一応の体裁が整うように作業を進めて下さい。
-本日の授業後の質問はメール等で受け付けます。問題点とソースコードが確認できるよう、サイトは随時 GitHub にアップするようにして下さい。

~

***Zoom接続情報 11:00 - 
__[[Zoomミーティングに参加する>https://zoom.us/j/91782890132?pwd=V1ROd0ZWVW5sYWFiNkdwdSt4UjVmdz09]]__
-ミーティングID: 917 8289 0132
-パスコード: 551198
~

***進捗確認
-[[伊藤晃生/情報デザインA]]
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~
~

**第13回|2021.07.06|遠隔 / 対面
***授業の形態について
それぞれの希望に応じて、Zoom参加、ゼミ室での作業、自由選択とします。
最初の説明は Zoomで行いますので、ゼミ室の場合は、ゼミ室のPCでZoomに接続して下さい。
~

***Zoom接続情報 11:00 - 
__[[Zoomミーティングに参加する>https://zoom.us/j/92769559763?pwd=eUxEb2llYi94WVo0WUo4SU12bnVSZz09]]__
-ミーティングID: 927 6955 9763
-パスコード: 533333
~

***サイトの制作手順(再確認)
-[[ポートフォリオサイトの仕様>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/Workflow#portfolio]]
~

***前期末課題制作
それぞれの Web制作について個別の質問に対応します。
-[[伊藤晃生/情報デザインA]]
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~
~

**第12回|2021.06.29|遠隔 / 対面
***授業の形態について
それぞれの希望に応じて、Zoom参加、ゼミ室での作業、自由選択とします。
最初の説明は Zoomで行いますので、ゼミ室の場合は、ゼミ室のPCでZoomに接続して下さい。
~

***Zoom接続情報 11:00 - 
%%Zoomミーティングに参加する%%
~

***前期末課題制作
それぞれの Web制作について個別の質問に対応します。
-[[伊藤晃生/情報デザインA]]
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~
~



**第11回|2021.06.22|遠隔
***Zoom接続情報 11:00 - 
__[[Zoomミーティングに参加する>https://zoom.us/j/93570267775?pwd=ZmFiVmhwVnQrNE1kY3hKMGE2UGc0QT09]]__
-ミーティングID: 935 7026 7775
-パスコード: 788848

~

***前期末制作課題
テーマ、サイトタイトル等について確認します。
-[[伊藤晃生/情報デザインA]]
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

***補足説明
-[[Web制作のワークフローについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/Workflow]]
-[[JavaScriptについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?JavaScript]]
-[[jQueryについて>https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery]]
-[[カルーセル(スライダー)の実装について>https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider]]


//***質疑・応答
//-後半は個別の質問に対応します。
//-授業時間中、会議室はオープンにしておきます。
//-全員一旦退出後、自由なタイミングで入室して質問して下さい。
//
//~
//
//***終了前確認
//-12:20 全員再入室して下さい。
//-本日のまとめの説明をします。

~
~

**第10回|2021.06.15|遠隔
***Zoom接続情報 11:00 - 
[[__Zoomミーティングに参加する__>https://zoom.us/j/96400050391?pwd=RU5rRjRkTHFCMlgvNXQwak1zRGtzUT09]]
-ミーティングID: 964 0005 0391
-パスコード: 749520
~

***1. 前期末制作課題について
-今期制作するWebサイトのテーマを設定し、制作準備に着手して下さい。
--Webサイトのテーマ > サイトタイトル(Web検索でユニークであること)
--サイトの形式の選定(マルチページ / シングルページ)
--サイトマップ(掲載情報の整理 > メニュー構成)
--ワイヤーフレーム(ページのレイアウト)
--HTML+CSS によるページの枠組み構築(次週以降)
--記事・画像の準備
--記事掲載(HTMLコーディング)

-公開先・提出期限等
--公開先:GitHubPages(リポジトリを作成|サイト名を反映)
--期限:2021.07.20(この授業の最終回は 2021.07.13 です)

-掲載ページの確認
--[[伊藤晃生/情報デザインA]]
--[[王淑嬋/情報デザインA]]
--[[諸琳/情報デザインA]]
--[[濵﨑皓心/情報デザインA]]
--[[季卓芸/デザイン応用演習]]
~

***2. CSS入門 5|SinglePage
-[[__レスポンシブデザイン__>https://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDesign]]

-各自のページのWorklog に以下を追加して下さい。
 **2021.06.15|CSS 5
 https://XXXXXXXXXX.github.io/ResponsiveDesign
 ~
~
~

**第9回|2021.06.08|遠隔
***Zoom接続情報 11:00 - 
[[__Zoomミーティングに参加する__>https://zoom.us/j/95161820744?pwd=NENWOEdFSFhHNDB0anBFZW81T3BDZz09]]
-ミーティングID: 951 6182 0744
-パスコード: 934014
~

***1. 進捗確認
更新状況を確認します。
-[[伊藤晃生/情報デザインA]]
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

前回演習に関する補足解説
-[[SampleFiles>https://design.kyusan-u.ac.jp/OpenSquareJP/?plugin=attach&refer=CSS&openfile=LayoutVariations.zip]]
~

***2. CSS入門 4|SinglePage
-[[__SinglePage__>https://design.kyusan-u.ac.jp/OpenSquareJP/?SinglePage]]

-各自のページのWorklog に以下を追加して下さい。
 **2021.06.08|CSS 4
 https://XXXXXXXXXX.github.io/SinglePage
 ~

-サンプルのダウンロードは以下から
https://github.com/koichi-inoue/SinglePage
-ダウンロードしたサンプル中 script.js は不要です。
-index.html の以下の2行は不要です。
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="script.js"></script>
~

''参考記事''
-[[__CSSの解説__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS]]
-[[__ブラウザの活用について__>https://design.kyusan-u.ac.jp/OpenSquareJP/?Browser]]
-[[__GitHubページの使い方__>https://design.kyusan-u.ac.jp/OpenSquareJP/?GitHubPages]]
~
~


**第8回|2021.06.01|遠隔
***Zoom接続情報 11:00 - 
%%Zoomミーティングに参加する%%
~

***1. プロジェクトの進捗報告
以下の2名の方は、進捗報告をお願いします。
-[[伊藤晃生/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

***2. GitHubページの進捗確認
SampleSiteの更新状況を確認します。
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
~

***3. CSS入門 3|様々なレイアウトパターン

-''基本形'' > SampleSite (全員作成済み)
 #container { header, nav, main { section, aside } , footer }

-''header の中に nav があるパターン'' > SampleSite02
 #container{ header{ nav } , main{ section, aside } , footer }

-''main の中に 3つのブロックがあるパターン(3カラム)''> SampleSite03
 #container{ header, main{ nav, section, aside } , footer }

-''header, footer が画面幅100%になるパターン'' > SampleSite04
 header{ nav } , main{ section, aside } , footer
~

''参考記事''
-[[__CSSの解説__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS]]
-[[__ブラウザの活用について__>https://design.kyusan-u.ac.jp/OpenSquareJP/?Browser]]
-[[__GitHubページの使い方__>https://design.kyusan-u.ac.jp/OpenSquareJP/?GitHubPages]]
~
~

**第7回|2021.05.25|遠隔
***Zoom接続情報 11:00 - 
%%Zoomミーティングに参加する%%
~

***1. プロジェクトの進捗報告
以下の2名の方は、進捗報告をお願いします。
-[[伊藤晃生/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

***2. GitHubページの進捗確認
SampleSiteの更新状況を確認します。
-[[王淑嬋/情報デザインA]]
-[[諸琳/情報デザインA]]
-[[濵﨑皓心/情報デザインA]]
~

***3. CSS入門 2|CSSによるページのレイアウト
-[[__CSSの解説__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS]]
--[[__Flexbox__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Flexbox]]
--[[__Position__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Position]]

~
~

**第6回|2021.05.18|遠隔
***Zoom接続情報 11:00 - 
%%Zoomミーティングに参加する%%
~

***プロジェクトの進捗報告
コーディングの知識のある以下の2名の方は、当演習にて作成するWebサイトの構想について先行して語って下さい。
-[[伊藤晃生/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

***CSS入門 1
-[[__CSSの解説__>https://design.kyusan-u.ac.jp/OpenSquareJP/?CSS]]
-[[__大学院生のための速習講座__>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/%E5%A4%A7%E5%AD%A6%E9%99%A2%E9%80%9F%E7%BF%92%E8%AC%9B%E5%BA%A7]]

-参考情報:[[学部Webデザイン演習 CSS 色・文字サイズ等>https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021/0511]]

~
~

**第5回|2021.05.11

***プロジェクトの進捗報告
コーディングの知識のある以下の2名の方は、当演習にて作成するWebサイトの構想について先行して語って下さい。
-[[伊藤晃生/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~

***HTML入門 2> [[__解説ページ__>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/%E5%A4%A7%E5%AD%A6%E9%99%A2%E9%80%9F%E7%BF%92%E8%AC%9B%E5%BA%A7]]
-画像の掲載(IMG)
-動画、地図等の埋め込み(IFRAME)
-表(TABLE)>  [[こちらにサンプル>https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021/0420]]
-フォーム(FORM)> [[こちらにサンプル>https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021/0427]]

~
~


**第4回|2021.04.27
***様々なWebの事例紹介
-[[伊藤晃生/情報デザインA]]
-[[季卓芸/デザイン応用演習]]
~


***HTML入門 1> [[__解説ページ__>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/%E5%A4%A7%E5%AD%A6%E9%99%A2%E9%80%9F%E7%BF%92%E8%AC%9B%E5%BA%A7]]
-HTML文書の基本構造
-セクションタグ
-見出し・文章段落・リスト
-内部リンク・外部リンク
~
~

**第3回|2021.04.20
***HTML+CSS サンプル体験
-[[サンプルのダウンロード>https://github.com/koichi-inoue/SampleSite]]

-[[大学院生のためのHTML+CSS速習講座>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign/%E5%A4%A7%E5%AD%A6%E9%99%A2%E9%80%9F%E7%BF%92%E8%AC%9B%E5%BA%A7]]
~

***GitHubの活用について
-[[GitHub Pages>https://design.kyusan-u.ac.jp/OpenSquareJP/?GitHubPages]]
~

***HTML+CSS 経験済みの方へ
応用レベルの方は、先行してWebサイトの作成準備に着手して下さい。テーマは自身の''ポートフォリオサイト''あるいは(すでにお持ちの方は)、''Webページを活用した新たな情報発信の可能性を探る実験的サイト''

-サイトの公開には GitHubPages を利用する前提です。
-各自のテーマに応じて、先行事例の調査を行って下さい。

-実験的なWebの活用事例
--例1)[[お弁当屋さんのライブ>https://www.youtube.com/watch?v=iyKrHbIc9TA]]
--例2)SPAM MUSEUM http://meiwaku.me/

~
~

**第2回|2021.04.13

***Wikiの活用方法(前回の続き)
-画像の掲載について> [[QuickGuide#images]]
-SubMenuについて > [[EditGuide#SubMenu]]
~

***HTML+CSSの基礎学習(参考)
学部の授業「Webデザイン演習」の授業情報を参考にして下さい。記事は遠隔学習に対応した書き方になっています。
[[Webデザイン演習/2021>https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021]]
~
~

**第1回|2021.04.09

***情報発信の準備
大学院のサイトで個人ページの存在を確認してください。芸術研究科では、大学院生の研究の成果を社会に還元する意味で、大学院サイトを用意して、そこからすべての学生に情報発信を行なっていただいています。

このサイトに、自身のページがあることを確認してください。
-芸術研究科 情報共有サイト &color(red){ブックマークしておいて下さい。};
https://vision.ip.kyusan-u.ac.jp/art-gs/

~

***Wikiの活用方法
以下のページに、当サイトの利用に関する説明があります。説明ページとあなたのページを同時に開いて作業を進めて下さい。
-[[QuickGuide]]
~


***個人ページの初期化を行なって下さい。
-氏名 ・課程・領域・研究室名
-研究テーマ
--研究題目
--研究概要
-受講科目一覧(学生相互の情報共有を目的としています)
--1年次前期受講科目
--1年次後期受講科目
-自己紹介
--あいさつ文
--趣味など(自由な見出し)
-その他(YouTube動画の掲載など)
~

***留意事項
-画像の掲載については、次回解説します。
-記事が見やすくなるよう、強制改行(~)で適宜余白を作って下さい。

~
~


**科目概要と授業の流れ
本演習では、Webの技術を基盤とした、情報の共有、情報の構築方法について学びます。はじめに Wiki の編集を通して、情報共有の意義について確認するとともに、情報発信における留意点等を確認します。その後、Web上での情報共有の原点である HTML および、その画面レイアウトに関わる CSS、さらに、インタラクティブな演出を可能とする JavaScript について学びます。なお演習では、すべてオープンソースのソフトウエアを使用します。   
~

***授業の進行

-1. ガイダンス
大学院 Wikiサイトの編集方法(見出し、本文、箇条書)について 

-2. Wikiを使った情報共有1
画像の掲載、動画の埋め込み 

-3. Wikiを使った情報共有2
様々なプラグインの活用

-4. HTML入門1
HTMLタグの基本 見出し、本文、箇条書き

-5. HTML入門2
HTMLによる画像の掲載、動画の埋め込み 

-6. HTML入門3
外部リンク、内部リンク、複数ページを統合するナビゲーション

-7. CSS入門1
CSSの記法、CSSによる要素の色、背景、サイズ等の制御 

-8. CSS入門2
CSSによるページレイアウト 

-9. CSS入門3
CSSアニメーション他、様々な手法の紹介 

-10. ファイルのアップロード
学園サーバーを使ったアップロード公開体験 

-11. JavaScript1
JavaScriptの記法、プログラミングの基礎 

-12. JavaScript2
jQueryを用いたページ要素の制御 

-13. 作品制作1
個人のポートフォリオサイトを制作する
注)元になるサンプルテンプレートを提供する 

-14. 作品制作2
個人のポートフォリオサイトを学園サーバーに公開
講評と意見交換を行う 
~
~