Whiteboard
情報デザイン演習IIIA|情報デザイン専攻| 木曜1・2限 デジタルラボ 504
学園サーバーFTP接続先:ftp.ip.kyusan-u.ac.jp( 133.17.4.74 )
ローカルホスト:http://localhost:8888/
第15回
プロジェクト情報のまとめ
- 学科サイトの個人ページにプロジェクトの概要をまとめて下さい。
学科サイト>情報デザイン演習IIIA - ページのまとめ方については、3・4年生のプロジェクトページを参考にしてください。
成果発表
- 10:10〜
- 内容
- プロジェクトの概要(再確認)
- 成果物
- プロジェクトの今後について
第11-14回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト>情報デザイン演習IIIA
ルートアドレスから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
情報科学研究科プロジェクトの方へ
- 10:00以降、成先生が来室されます。現状報告の準備をお願いします。
- サイト制作の目的・趣旨の確認
- サイトマップ
- ワイヤーフレーム
- サイトのカラーサンプル、ロゴマークのサンプル等(方向性の見極め)
- 今後のスケジュール
第9回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト>情報デザイン演習IIIA
PukiWiki サイトの開発について
- PukiWiki はデータベースサーバーを使わないアプリケーションであるため、ローカルで開発したものを、そのままサーバーへアップするかたちで実運用へ移行することが可能です。
- また利用者による記事の更新とサイトのデザイン(SKIN)の更新を同時進行で進めることも可能です。以下概念図をご覧ください。
PukiWiki サイトの開発イメージ(Made with Draw.io)
- 参考:Draw.io について
第8回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト>情報デザイン演習IIIA
中間報告 10:10 -
- 取り組みテーマ、現状(要求)分析、サイトマップ等、現状の報告。
第7回
プロジェクトの遂行
- 各自、テーマに沿って作業を進めて下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト>情報デザイン演習IIIA
事務連絡
- 10:00-10:30 情報科学研究科との打合せ。メンバーとともに一時退席します。
- 急ぎの連絡があれば LINE 18AS にてお知らせ下さい。
PukiWiki 補足
- HTML構造(ワイヤーフレーム)のカスタマイズについて
PukiWiki/Customize
プロジェクトチーム用のページ
第6回
プロジェクトの遂行
- 各自、テーマに沿って作業を開始して下さい。
- 学科サイトの個人ページに本日の作業記録を詳細に記載して下さい。
学科サイト>情報デザイン演習IIIA
プロジェクトの立ち上げに関連して
Webプロジェクトのワークフロー
- WebDesign/Workflow
以下の2つは、必ず個人ページの記録として作成・アップして下さい。- サイトマップ
- ワイヤーフレーム
第5回
プロジェクトのテーマ設定
- 各自、本演習におけるプロジェクトのテーマを設定して下さい。
学科サイト>情報デザイン演習IIIA
- 現在、依頼を受けている事項(希望者募集中)
- 九州産業大学 大学院 情報科学研究科 公式サイト(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 の使い方を熟知しておく必要があります。
- 以下のような機能については、PukiWikiのプラグインを活用すれば解決します。自分でプログラムやCSSを作り込む必要はありません。
- 検索機能:#search プラグイン
- 投稿機能:#article、 #comment プラグイン
- 最新の更新の表示:#recent プラグイン
- 他のページの読み読み込み機能:#include プラグイン
- 部分的な文字色の変更:&color(red){・・・・}; プラグイン
- 部分的な文字サイズの変更:&size(12){・・・・}; プラグイン
- 表組み:| (縦ストロークの利用)
- 囲み表示(整形済みテキスト):行頭に半角スペース
- 左寄せ・センタリング・右寄せ:LEFT:、CENTER:、RIGHT:
参考:EditGuide
- PukiWikiの記法とHTMLタグの関係理解
Wikiの記法がどのHTMLタグに対応するのか、その対応関係を知っておくことが必要です。以下、主なものを挙げます。要素 Wikiの記法 HTMLタグ ページ名 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
第3回
はじめに
- 前回の復習:各自以下の操作を確認してください。
- ローカルでサーバーを起動
- ドキュメントルート(htdocs)に .html、.php などを置く
- ブラウザからアクセス
http://localhost:8888/
続・PHP入門
サーバーに置かれたファイルの操作を体験します。
- PHP/Sample02 事例5の簡易アクセスカウンタを体験
サーバーがファイルを書き換える(更新する)プログラムを作成する場合、ファイルのパーミッションを変更する必要があります。
PukiWiki 導入
オープンソースのCMS、PukiWiki の導入について解説します。
- 公式サイト:https://pukiwiki.osdn.jp/
ここから、pukiwiki 本体 をダウンロードしてください
第2回
はじめに
- 前回の復習:各自以下の操作を確認してください。
- ローカルでサーバーを起動
- ドキュメントルート(htdocs)にHTMLファイルを置く
- ブラウザからアクセス
http://localhost:8888/
PHP入門
- PHPとは何か > PHP
- 初歩のサンプルプログラム > PHP/Sample01
- サンプルは、前期の Webデザイン実習と同様に WWW-KSU/samples/直下にアップロードして下さい。
- また前期同様に、各自のWebサンプル集のページ [ 氏名/WebSample ] に、中見出し [ **PHP ] を付けた上でリンクを張って下さい。
第1回
ガイダンス
- 演習の目的と概要 > 情報デザイン演習IIIA
- 課題への取り組み方について
- 成果物の発表 > 学科サイト/情報デザイン演習IIIA
- 事務連絡:StarFree サーバーをお持ちの方、更新手続きをお忘れなく。
https://www.star.ne.jp/free/
演習の主テーマ Webプロジェクト
本演習では、前期のWebデザイン実習で修得した技術をベースに、身近な方々や団体の情報共有を支援するWebサイトの構築に取り組みます。
- ソーシャルデザインの体験を目的とした無償の取り組みです。
- 地域を活性化する「面白い」仕組みを提案することが前提です。営利目的ページ作成は行いません。
- 商取引き、決済関係の仕組みにはタッチしません。
- 数人でチーム、あるいは個人プロジェクト、いずれでも構いません。
知識・技術に関する補足講義
クライアントからの要求が CMS となることが多いため、前提となる知識や技術について、補足の講義を行います。
- Webサーバー入門
- ネットワークに関する基礎知識 > Network
- 開発環境(ローカルサーバー)について > WebServer
- レンタルサーバーについて > RentalServer
- PHP入門
PHPを用いたサーバーサイドのプログラミングを体験します。