情報デザイン演習IIIA/2019
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン応用演習/2020
情報デザイン演習IIIA/2020
情報デザイン研究II/2020
卒業研究I,II
情報デザイン概論/地域共創
Webデザイン基礎B/短大
デザイン総合研究
特定演習｜情報デザインB
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機管理
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Whiteboard
[[情報デザイン演習IIIA]]｜情報デザイン専攻｜&small(木曜１...
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（ 133.17.4....
ローカルホスト：http://localhost:8888/
~
**第15回
***プロジェクト情報のまとめ
-学科サイトの個人ページにプロジェクトの概要をまとめて下さ...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
-ページのまとめ方については、３・４年生のプロジェクトペー...
~
***成果発表
-10:10〜
-内容
--プロジェクトの概要（再確認）
--成果物
--プロジェクトの今後について
~
~
**第11-14回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***ルートアドレスからpukiwikiディレクトリへ自動転送する方法
以下のようなファイルを作って、index.html としてルートに置...
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;URL=http://exa...
<title>SamleSite</title>
</head>
<body>
</body>
</html>
-content="0;URL=http://example.com/pukiwiki/"
--0 は自動転送までの時間です。速攻移動であれば 0 です。
--URL= の部分に移動先のアドレスを記載します。
~
***補足講義
-Wiki の導入に必要な事項
--参加者の情報共有に対するモチベーションを上げる
--初動チームの立ち上げ（スキルを持つ人材の養成）
--参加者全員が楽しめる「個人ページ」の準備
--初心者が執筆に迷わないよう、パターン別の「雛形」を作成
--編集ガイド等のマニュアルの整備
-ナビゲーションのデザインについて
参考記事：[[NavigationDesign]]
-PukiWikiのカスタマイズにおけるフォーマットチェックについて
参考ページ：[[FormatCheck]]
-Wiki で使われる Markdown 記法について
参考記事：[[Markdown]]
-CSSの書き方について
参考記事：[[CSS/CodingRule]]
-「追加のCSS」という発想について
参考記事：[[PukiWiki/Customize]]
-レスポンシブデザインのブレイクポイントについて
参考記事：[[ResponsiveDesign]]
-GitHub を利用したWebサイトの公開について
参考記事：[[GitHubPages]]
注）ソースをまるごと簡単にDLできるようになります。それは...
~
~
**第10回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***情報科学研究科プロジェクトの方へ
-10:00以降、成先生が来室されます。現状報告の準備をお願い...
--サイト制作の目的・趣旨の確認
--サイトマップ
--ワイヤーフレーム
--サイトのカラーサンプル、ロゴマークのサンプル等（方向性...
--今後のスケジュール
~
**第９回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***PukiWiki サイトの開発について
-PukiWiki はデータベースサーバーを使わないアプリケーショ...
-また利用者による記事の更新とサイトのデザイン（SKIN）の更...
[[PukiWiki サイトの開発イメージ（Made with Draw.io）>http...
-参考：[[Draw.io>Google:Draw.io]] について
~
~
**第８回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***中間報告 10:10 -
-取り組みテーマ、現状（要求）分析、サイトマップ等、現状の...
~
~
**第７回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***事務連絡
-10:00-10:30 情報科学研究科との打合せ。メンバーとともに一...
-急ぎの連絡があれば LINE 18AS にてお知らせ下さい。
~
***PukiWiki 補足
-HTML構造（ワイヤーフレーム）のカスタマイズについて
[[PukiWiki/Customize]]
~
***プロジェクトチーム用のページ
-[[特設/九州産業大学文芸部サイト開発>https://design.kyusa...
-[[特設/ArtSpaceリニューアル>https://design.kyusan-u.ac.j...
-[[特設/情報科学研究科公式サイト開発>https://design.kyusa...
~
~
**第６回
***プロジェクトの遂行
-各自、テーマに沿って作業を開始して下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***プロジェクトの立ち上げに関連して
-[[Project]]
-[[DesignThinking]]
~
***Webプロジェクトのワークフロー
-[[WebDesign/Workflow]]
以下の２つは、必ず個人ページの記録として作成・アップして...
--サイトマップ
--ワイヤーフレーム
~
~
**第５回
***プロジェクトのテーマ設定
-各自、本演習におけるプロジェクトのテーマを設定して下さい。
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
-現在、依頼を受けている事項（希望者募集中）
--九州産業大学 大学院 情報科学研究科 公式サイト（PukiWiki）
現状１：https://www.kyusan-u.ac.jp/faculty/daigakuin/joho/
現状２：http://www.kyusan-u.ac.jp/daigakuin/jyoho_kagaku/...
--九州産業大学 ArtSpace+50 サイトリニューアル（PukiWiki）
現状：http://art.kyusan-u.ac.jp/artspace/
~
***PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要がありま...
-以下のような機能については、PukiWikiのプラグインを活用す...
--検索機能：＃search プラグイン
--投稿機能：＃article、 ＃comment プラグイン
--最新の更新の表示：＃recent プラグイン
--他のページの読み読み込み機能：＃include プラグイン
--部分的な文字色の変更：＆color(red){・・・・}; プラグイン
--部分的な文字サイズの変更：＆size(12){・・・・}; プラグ...
--表組み：｜ (縦ストロークの利用)
--囲み表示(整形済みテキスト)：行頭に半角スペース
--左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：[[EditGuide]]
-PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知...
|33|33|34|c
|要素|Wikiの記法|HTMLタグ|h
|ページ名|Wikiページ名 |''h1''|
|大見出し|''*'' |''h2''|
|中見出し|''**'' |''h3''|
|小見出し|''***'' |''h4''|
|箇条書き レベル１|''-'' |''ul.list1 li''|
|箇条書き第 レベル２|''--'' |''ul.list2 li''|
|段落|記述+改行 |''p''|
|整形済みテキスト|''行頭半角空白'' |''pre''|
|引用|''行頭に ＞'' |''blockquote p.quotation''|
|リンク|''[ [ ] ]'' |''a''|
|強調|''’’''文字列''’’'' |''strong''|
|斜体|''’’’''文字列''’’’'' |''em''|
|取消線|''％％''文字列''％％'' |''del''|
学科サイトの個人ページで、プラグインの活用を含め、様々な...
~
~
**第４回
***PukiWiki のカスタマイズ
-[[PukiWiki]] ファイル構成と初期設定情報の確認
-[[PukiWiki/Customize]] カスタマイズ（サンプルスキンの提...
-各自 SubMenuに PukiWikiサイトへのリンクを張って下さい。
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
~
**第３回
***はじめに
-前回の復習：各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート（htdocs）に .html、.php などを置く
--ブラウザからアクセス
http://localhost:8888/
~
***続・PHP入門
サーバーに置かれたファイルの操作を体験します。
-[[PHP/Sample02]] 事例５の簡易アクセスカウンタを体験
サーバーがファイルを書き換える（更新する）プログラムを作...
-[[FilePermission]] とは
~
***PukiWiki 導入
オープンソースの[[CMS]]、[[PukiWiki]] の導入について解説...
-公式サイト：https://pukiwiki.osdn.jp/
ここから、pukiwiki 本体 をダウンロードしてください
-[[CMS]]
-[[PukiWiki]] 概要とインストールについて
~
~
**第２回
***はじめに
-前回の復習：各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート（htdocs）にHTMLファイルを置く
--ブラウザからアクセス
http://localhost:8888/
~
***PHP入門
-PHPとは何か ＞ [[PHP]]
-初歩のサンプルプログラム ＞ [[PHP/Sample01]]
-サンプルは、前期の Webデザイン実習と同様に WWW-KSU/sampl...
-また前期同様に、[[各自のWebサンプル集のページ [ 氏名/Web...
~
**第１回
***ガイダンス
-演習の目的と概要 > [[情報デザイン演習IIIA]]
-課題への取り組み方について
-成果物の発表 ＞ [[学科サイト/情報デザイン演習IIIA>http...
-事務連絡：StarFree サーバーをお持ちの方、更新手続きをお...
https://www.star.ne.jp/free/
~
***演習の主テーマ Webプロジェクト
本演習では、前期のWebデザイン実習で修得した技術をベースに...
-ソーシャルデザインの体験を目的とした無償の取り組みです。
-地域を活性化する「面白い」仕組みを提案することが前提です...
-商取引き、決済関係の仕組みにはタッチしません。
-数人でチーム、あるいは個人プロジェクト、いずれでも構いま...
//-次週までに、各自の方針（取り組み対象候補）を決めて下さ...
~
***知識・技術に関する補足講義
クライアントからの要求が [[CMS]] となることが多いため、前...
-Webサーバー入門
--ネットワークに関する基礎知識 ＞ [[Network]]
--開発環境（ローカルサーバー）について ＞ [[WebServer]]
--レンタルサーバーについて ＞ [[RentalServer]]
-PHP入門
PHPを用いたサーバーサイドのプログラミングを体験します。
--[[PHP]]
--[[PHP/Sample01]]
-[[CMS]]入門
PHPの技術をもとに、地域プロジェクトで需要の多いCMSのカス...
--[[PukiWiki]]
--[[WordPress]]
~
~
終了行:
*Whiteboard
[[情報デザイン演習IIIA]]｜情報デザイン専攻｜&small(木曜１...
学園サーバーFTP接続先：ftp.ip.kyusan-u.ac.jp（ 133.17.4....
ローカルホスト：http://localhost:8888/
~
**第15回
***プロジェクト情報のまとめ
-学科サイトの個人ページにプロジェクトの概要をまとめて下さ...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
-ページのまとめ方については、３・４年生のプロジェクトペー...
~
***成果発表
-10:10〜
-内容
--プロジェクトの概要（再確認）
--成果物
--プロジェクトの今後について
~
~
**第11-14回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***ルートアドレスからpukiwikiディレクトリへ自動転送する方法
以下のようなファイルを作って、index.html としてルートに置...
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;URL=http://exa...
<title>SamleSite</title>
</head>
<body>
</body>
</html>
-content="0;URL=http://example.com/pukiwiki/"
--0 は自動転送までの時間です。速攻移動であれば 0 です。
--URL= の部分に移動先のアドレスを記載します。
~
***補足講義
-Wiki の導入に必要な事項
--参加者の情報共有に対するモチベーションを上げる
--初動チームの立ち上げ（スキルを持つ人材の養成）
--参加者全員が楽しめる「個人ページ」の準備
--初心者が執筆に迷わないよう、パターン別の「雛形」を作成
--編集ガイド等のマニュアルの整備
-ナビゲーションのデザインについて
参考記事：[[NavigationDesign]]
-PukiWikiのカスタマイズにおけるフォーマットチェックについて
参考ページ：[[FormatCheck]]
-Wiki で使われる Markdown 記法について
参考記事：[[Markdown]]
-CSSの書き方について
参考記事：[[CSS/CodingRule]]
-「追加のCSS」という発想について
参考記事：[[PukiWiki/Customize]]
-レスポンシブデザインのブレイクポイントについて
参考記事：[[ResponsiveDesign]]
-GitHub を利用したWebサイトの公開について
参考記事：[[GitHubPages]]
注）ソースをまるごと簡単にDLできるようになります。それは...
~
~
**第10回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***情報科学研究科プロジェクトの方へ
-10:00以降、成先生が来室されます。現状報告の準備をお願い...
--サイト制作の目的・趣旨の確認
--サイトマップ
--ワイヤーフレーム
--サイトのカラーサンプル、ロゴマークのサンプル等（方向性...
--今後のスケジュール
~
**第９回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***PukiWiki サイトの開発について
-PukiWiki はデータベースサーバーを使わないアプリケーショ...
-また利用者による記事の更新とサイトのデザイン（SKIN）の更...
[[PukiWiki サイトの開発イメージ（Made with Draw.io）>http...
-参考：[[Draw.io>Google:Draw.io]] について
~
~
**第８回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***中間報告 10:10 -
-取り組みテーマ、現状（要求）分析、サイトマップ等、現状の...
~
~
**第７回
***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***事務連絡
-10:00-10:30 情報科学研究科との打合せ。メンバーとともに一...
-急ぎの連絡があれば LINE 18AS にてお知らせ下さい。
~
***PukiWiki 補足
-HTML構造（ワイヤーフレーム）のカスタマイズについて
[[PukiWiki/Customize]]
~
***プロジェクトチーム用のページ
-[[特設/九州産業大学文芸部サイト開発>https://design.kyusa...
-[[特設/ArtSpaceリニューアル>https://design.kyusan-u.ac.j...
-[[特設/情報科学研究科公式サイト開発>https://design.kyusa...
~
~
**第６回
***プロジェクトの遂行
-各自、テーマに沿って作業を開始して下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下...
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
***プロジェクトの立ち上げに関連して
-[[Project]]
-[[DesignThinking]]
~
***Webプロジェクトのワークフロー
-[[WebDesign/Workflow]]
以下の２つは、必ず個人ページの記録として作成・アップして...
--サイトマップ
--ワイヤーフレーム
~
~
**第５回
***プロジェクトのテーマ設定
-各自、本演習におけるプロジェクトのテーマを設定して下さい。
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
-現在、依頼を受けている事項（希望者募集中）
--九州産業大学 大学院 情報科学研究科 公式サイト（PukiWiki）
現状１：https://www.kyusan-u.ac.jp/faculty/daigakuin/joho/
現状２：http://www.kyusan-u.ac.jp/daigakuin/jyoho_kagaku/...
--九州産業大学 ArtSpace+50 サイトリニューアル（PukiWiki）
現状：http://art.kyusan-u.ac.jp/artspace/
~
***PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要がありま...
-以下のような機能については、PukiWikiのプラグインを活用す...
--検索機能：＃search プラグイン
--投稿機能：＃article、 ＃comment プラグイン
--最新の更新の表示：＃recent プラグイン
--他のページの読み読み込み機能：＃include プラグイン
--部分的な文字色の変更：＆color(red){・・・・}; プラグイン
--部分的な文字サイズの変更：＆size(12){・・・・}; プラグ...
--表組み：｜ (縦ストロークの利用)
--囲み表示(整形済みテキスト)：行頭に半角スペース
--左寄せ・センタリング・右寄せ：LEFT：、CENTER：、RIGHT：
参考：[[EditGuide]]
-PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知...
|33|33|34|c
|要素|Wikiの記法|HTMLタグ|h
|ページ名|Wikiページ名 |''h1''|
|大見出し|''*'' |''h2''|
|中見出し|''**'' |''h3''|
|小見出し|''***'' |''h4''|
|箇条書き レベル１|''-'' |''ul.list1 li''|
|箇条書き第 レベル２|''--'' |''ul.list2 li''|
|段落|記述+改行 |''p''|
|整形済みテキスト|''行頭半角空白'' |''pre''|
|引用|''行頭に ＞'' |''blockquote p.quotation''|
|リンク|''[ [ ] ]'' |''a''|
|強調|''’’''文字列''’’'' |''strong''|
|斜体|''’’’''文字列''’’’'' |''em''|
|取消線|''％％''文字列''％％'' |''del''|
学科サイトの個人ページで、プラグインの活用を含め、様々な...
~
~
**第４回
***PukiWiki のカスタマイズ
-[[PukiWiki]] ファイル構成と初期設定情報の確認
-[[PukiWiki/Customize]] カスタマイズ（サンプルスキンの提...
-各自 SubMenuに PukiWikiサイトへのリンクを張って下さい。
[[学科サイト＞情報デザイン演習IIIA>https://design.kyusan-...
~
~
**第３回
***はじめに
-前回の復習：各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート（htdocs）に .html、.php などを置く
--ブラウザからアクセス
http://localhost:8888/
~
***続・PHP入門
サーバーに置かれたファイルの操作を体験します。
-[[PHP/Sample02]] 事例５の簡易アクセスカウンタを体験
サーバーがファイルを書き換える（更新する）プログラムを作...
-[[FilePermission]] とは
~
***PukiWiki 導入
オープンソースの[[CMS]]、[[PukiWiki]] の導入について解説...
-公式サイト：https://pukiwiki.osdn.jp/
ここから、pukiwiki 本体 をダウンロードしてください
-[[CMS]]
-[[PukiWiki]] 概要とインストールについて
~
~
**第２回
***はじめに
-前回の復習：各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート（htdocs）にHTMLファイルを置く
--ブラウザからアクセス
http://localhost:8888/
~
***PHP入門
-PHPとは何か ＞ [[PHP]]
-初歩のサンプルプログラム ＞ [[PHP/Sample01]]
-サンプルは、前期の Webデザイン実習と同様に WWW-KSU/sampl...
-また前期同様に、[[各自のWebサンプル集のページ [ 氏名/Web...
~
**第１回
***ガイダンス
-演習の目的と概要 > [[情報デザイン演習IIIA]]
-課題への取り組み方について
-成果物の発表 ＞ [[学科サイト/情報デザイン演習IIIA>http...
-事務連絡：StarFree サーバーをお持ちの方、更新手続きをお...
https://www.star.ne.jp/free/
~
***演習の主テーマ Webプロジェクト
本演習では、前期のWebデザイン実習で修得した技術をベースに...
-ソーシャルデザインの体験を目的とした無償の取り組みです。
-地域を活性化する「面白い」仕組みを提案することが前提です...
-商取引き、決済関係の仕組みにはタッチしません。
-数人でチーム、あるいは個人プロジェクト、いずれでも構いま...
//-次週までに、各自の方針（取り組み対象候補）を決めて下さ...
~
***知識・技術に関する補足講義
クライアントからの要求が [[CMS]] となることが多いため、前...
-Webサーバー入門
--ネットワークに関する基礎知識 ＞ [[Network]]
--開発環境（ローカルサーバー）について ＞ [[WebServer]]
--レンタルサーバーについて ＞ [[RentalServer]]
-PHP入門
PHPを用いたサーバーサイドのプログラミングを体験します。
--[[PHP]]
--[[PHP/Sample01]]
-[[CMS]]入門
PHPの技術をもとに、地域プロジェクトで需要の多いCMSのカス...
--[[PukiWiki]]
--[[WordPress]]
~
~
ページ名:
