PAGES

GUIDE

DATA

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回

プロジェクトの遂行

ルートアドレスから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
  • GitHub を利用したWebサイトの公開について
    参考記事:GitHubPages
    注)ソースをまるごと簡単にDLできるようになります。それは困る・・という場合は利用を控えてください(ただし、そもそもWebで公開したページの中身はブラウザからすべてダウンロード可能です。単に簡単にできるか、一手間いるか、それだけの違いです)。



第10回

プロジェクトの遂行

情報科学研究科プロジェクトの方へ

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

第9回

プロジェクトの遂行

PukiWiki サイトの開発について

  • PukiWiki はデータベースサーバーを使わないアプリケーションであるため、ローカルで開発したものを、そのままサーバーへアップするかたちで実運用へ移行することが可能です。
  • また利用者による記事の更新とサイトのデザイン(SKIN)の更新を同時進行で進めることも可能です。以下概念図をご覧ください。
    PukiWiki サイトの開発イメージ(Made with Draw.io)

第8回

プロジェクトの遂行

中間報告 10:10 -

  • 取り組みテーマ、現状(要求)分析、サイトマップ等、現状の報告。



第7回

プロジェクトの遂行

事務連絡

  • 10:00-10:30 情報科学研究科との打合せ。メンバーとともに一時退席します。
  • 急ぎの連絡があれば LINE 18AS にてお知らせ下さい。


PukiWiki 補足

  • HTML構造(ワイヤーフレーム)のカスタマイズについて
    PukiWiki/Customize

プロジェクトチーム用のページ

第6回

プロジェクトの遂行


プロジェクトの立ち上げに関連して


Webプロジェクトのワークフロー

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



第5回

プロジェクトのテーマ設定


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 カスタマイズ(サンプルスキンの提供)

第3回

はじめに

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

続・PHP入門

サーバーに置かれたファイルの操作を体験します。

  • PHP/Sample02 事例5の簡易アクセスカウンタを体験

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

PukiWiki 導入

オープンソースのCMSPukiWiki の導入について解説します。

  • CMS
  • PukiWiki 概要とインストールについて



第2回

はじめに

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

PHP入門

  • PHPとは何か > PHP
  • 初歩のサンプルプログラム > PHP/Sample01


第1回

ガイダンス

演習の主テーマ Webプロジェクト

本演習では、前期のWebデザイン実習で修得した技術をベースに、身近な方々や団体の情報共有を支援するWebサイトの構築に取り組みます。

  • ソーシャルデザインの体験を目的とした無償の取り組みです。
  • 地域を活性化する「面白い」仕組みを提案することが前提です。営利目的ページ作成は行いません。
  • 商取引き、決済関係の仕組みにはタッチしません。
  • 数人でチーム、あるいは個人プロジェクト、いずれでも構いません。

知識・技術に関する補足講義

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

  • Webサーバー入門
    • ネットワークに関する基礎知識 > Network
    • 開発環境(ローカルサーバー)について > WebServer
    • レンタルサーバーについて > RentalServer
  • PHP入門
    PHPを用いたサーバーサイドのプログラミングを体験します。
  • CMS入門
    PHPの技術をもとに、地域プロジェクトで需要の多いCMSのカスタマイズについて数回に渡って体験します。
Last-modified: 2020-02-07 (金) 15:25:26