LogoMark.png

情報デザイン演習IIIA/2019 の変更点


#author("2020-02-07T15:25:26+09:00","default:inoue.ko","inoue.ko")
*Whiteboard
[[情報デザイン演習IIIA]]|情報デザイン専攻|&small(木曜1・2限 デジタルラボ 504);
学園サーバーFTP接続先:ftp.ip.kyusan-u.ac.jp( 133.17.4.74 )
ローカルホスト:http://localhost:8888/
~

**第15回
***プロジェクト情報のまとめ
-学科サイトの個人ページにプロジェクトの概要をまとめて下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
-ページのまとめ方については、3・4年生のプロジェクトページを参考にしてください。
~

***成果発表
-10:10〜
-内容
--プロジェクトの概要(再確認)
--成果物
--プロジェクトの今後について
~
~

**第11-14回

***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***ルートアドレスからpukiwikiディレクトリへ自動転送する方法
以下のようなファイルを作って、index.html としてルートに置くと、ルートへのアクセスから、pukiwikiディレクトリへ自動転送されます。
 <!DOCTYPE html>
 <html lang="jp">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="refresh" content="0;URL=http://example.com/pukiwiki/">
     <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できるようになります。それは困る・・という場合は利用を控えてください(ただし、そもそもWebで公開したページの中身はブラウザからすべてダウンロード可能です。単に簡単にできるか、一手間いるか、それだけの違いです)。
~
~

**第10回

***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***情報科学研究科プロジェクトの方へ
-10:00以降、成先生が来室されます。現状報告の準備をお願いします。
--サイト制作の目的・趣旨の確認
--サイトマップ
--ワイヤーフレーム
--サイトのカラーサンプル、ロゴマークのサンプル等(方向性の見極め)
--今後のスケジュール
~

**第9回

***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***PukiWiki サイトの開発について
-PukiWiki はデータベースサーバーを使わないアプリケーションであるため、ローカルで開発したものを、そのままサーバーへアップするかたちで実運用へ移行することが可能です。
-また利用者による記事の更新とサイトのデザイン(SKIN)の更新を同時進行で進めることも可能です。以下概念図をご覧ください。
[[PukiWiki サイトの開発イメージ(Made with Draw.io)>https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=PukiWikiDevWorks.html#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1dnUXhc5gvDH3AXvqGSVXbq-0HjxIZjZb%26export%3Ddownload]]

-参考:[[Draw.io>Google:Draw.io]] について
~
~


**第8回

***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~

***中間報告 10:10 -
-取り組みテーマ、現状(要求)分析、サイトマップ等、現状の報告。
~
~

**第7回

***プロジェクトの遂行
-各自、テーマに沿って作業を進めて下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~
***事務連絡
-10:00-10:30 情報科学研究科との打合せ。メンバーとともに一時退席します。
-急ぎの連絡があれば LINE 18AS にてお知らせ下さい。

~

***PukiWiki 補足
-HTML構造(ワイヤーフレーム)のカスタマイズについて
[[PukiWiki/Customize]]
~

***プロジェクトチーム用のページ
-[[特設/九州産業大学文芸部サイト開発>https://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/%E4%B9%9D%E5%B7%9E%E7%94%A3%E6%A5%AD%E5%A4%A7%E5%AD%A6%E6%96%87%E8%8A%B8%E9%83%A8%E3%82%B5%E3%82%A4%E3%83%88%E9%96%8B%E7%99%BA]]
-[[特設/ArtSpaceリニューアル>https://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/ArtSpace%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB]]
-[[特設/情報科学研究科公式サイト開発>https://design.kyusan-u.ac.jp/socialdesign/?%E7%89%B9%E8%A8%AD/%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E7%A0%94%E7%A9%B6%E7%A7%91%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E9%96%8B%E7%99%BA]]
~
~

**第6回

***プロジェクトの遂行
-各自、テーマに沿って作業を開始して下さい。
-学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]

~
***プロジェクトの立ち上げに関連して
-[[Project]]
-[[DesignThinking]]

~
***Webプロジェクトのワークフロー
-[[WebDesign/Workflow]]
以下の2つは、必ず個人ページの記録として作成・アップして下さい。
--サイトマップ
--ワイヤーフレーム
~
~

**第5回

***プロジェクトのテーマ設定
-各自、本演習におけるプロジェクトのテーマを設定して下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]

-現在、依頼を受けている事項(希望者募集中)
--九州産業大学 大学院 情報科学研究科 公式サイト(PukiWiki)
現状1:https://www.kyusan-u.ac.jp/faculty/daigakuin/joho/
現状2:http://www.kyusan-u.ac.jp/daigakuin/jyoho_kagaku/index.html
--九州産業大学 ArtSpace+50 サイトリニューアル(PukiWiki)
現状:http://art.kyusan-u.ac.jp/artspace/

~

***PukiWiki サイト開発の前提
開発者自身が PukiWiki の使い方を熟知しておく必要があります。

-以下のような機能については、PukiWikiのプラグインを活用すれば解決します。自分でプログラムやCSSを作り込む必要はありません。
--検索機能:#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''|
|箇条書き レベル1|''-'' |''ul.list1 li''|
|箇条書き第 レベル2|''--'' |''ul.list2 li''|
|段落|記述+改行 |''p''|
|整形済みテキスト|''行頭半角空白'' |''pre''|
|引用|''行頭に >'' |''blockquote p.quotation''|
|リンク|''[ [ ] ]'' |''a''|
|強調|''’’''文字列''’’'' |''strong''|
|斜体|''’’’''文字列''’’’'' |''em''|
|取消線|''%%''文字列''%%'' |''del''|

学科サイトの個人ページで、プラグインの活用を含め、様々な書き方を試して下さい。また、ブラウザの分析ツールで、それぞれどのようなタグに置き換わっているか確認して下さい。
~
~


**第4回

***PukiWiki のカスタマイズ
-[[PukiWiki]] ファイル構成と初期設定情報の確認
-[[PukiWiki/Customize]] カスタマイズ(サンプルスキンの提供)

-各自 SubMenuに PukiWikiサイトへのリンクを張って下さい。
[[学科サイト>情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]
~
~


**第3回
***はじめに
-前回の復習:各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート(htdocs)に .html、.php などを置く
--ブラウザからアクセス
http://localhost:8888/
~

***続・PHP入門
サーバーに置かれたファイルの操作を体験します。
-[[PHP/Sample02]] 事例5の簡易アクセスカウンタを体験

サーバーがファイルを書き換える(更新する)プログラムを作成する場合、ファイルのパーミッションを変更する必要があります。
-[[FilePermission]] とは
~

***PukiWiki 導入
オープンソースの[[CMS]]、[[PukiWiki]] の導入について解説します。
-公式サイト:https://pukiwiki.osdn.jp/
ここから、pukiwiki 本体 をダウンロードしてください

-[[CMS]]
-[[PukiWiki]] 概要とインストールについて
~
~


**第2回
***はじめに
-前回の復習:各自以下の操作を確認してください。
--ローカルでサーバーを起動
--ドキュメントルート(htdocs)にHTMLファイルを置く
--ブラウザからアクセス
http://localhost:8888/
~

***PHP入門
-PHPとは何か > [[PHP]]
-初歩のサンプルプログラム > [[PHP/Sample01]]

-サンプルは、前期の Webデザイン実習と同様に WWW-KSU/samples/直下にアップロードして下さい。
-また前期同様に、[[各自のWebサンプル集のページ [ 氏名/WebSample ] >https://design.kyusan-u.ac.jp/socialdesign/index.php?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%AE%9F%E7%BF%92]]に、中見出し [ **PHP ] を付けた上でリンクを張って下さい。

~


**第1回

***ガイダンス
-演習の目的と概要 > [[情報デザイン演習IIIA]]
-課題への取り組み方について
-成果物の発表 > [[学科サイト/情報デザイン演習IIIA>https://design.kyusan-u.ac.jp/socialdesign/index.php?%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92IIIA]]

-事務連絡:StarFree サーバーをお持ちの方、更新手続きをお忘れなく。
https://www.star.ne.jp/free/
~

***演習の主テーマ Webプロジェクト
本演習では、前期のWebデザイン実習で修得した技術をベースに、身近な方々や団体の情報共有を支援するWebサイトの構築に取り組みます。
-ソーシャルデザインの体験を目的とした無償の取り組みです。
-地域を活性化する「面白い」仕組みを提案することが前提です。営利目的ページ作成は行いません。
-商取引き、決済関係の仕組みにはタッチしません。
-数人でチーム、あるいは個人プロジェクト、いずれでも構いません。
//-次週までに、各自の方針(取り組み対象候補)を決めて下さい。
~

***知識・技術に関する補足講義
クライアントからの要求が [[CMS]] となることが多いため、前提となる知識や技術について、補足の講義を行います。


-Webサーバー入門
--ネットワークに関する基礎知識 > [[Network]]
--開発環境(ローカルサーバー)について > [[WebServer]]
--レンタルサーバーについて > [[RentalServer]]

-PHP入門
PHPを用いたサーバーサイドのプログラミングを体験します。
--[[PHP]]
--[[PHP/Sample01]]

-[[CMS]]入門
PHPの技術をもとに、地域プロジェクトで需要の多いCMSのカスタマイズについて数回に渡って体験します。
--[[PukiWiki]]
--[[WordPress]]
~
~