LogoMark.png

山口佳奈/情報デザイン研究II の変更点

#author("2021-08-09T23:21:41+09:00;2020-12-01T14:26:47+09:00","default:member","member")
*情報デザイン研究II
~
本文はコメントアウトしています。

//*Revised Campus Map
//学内マップに載っていない場所を紹介するサイト

//#image(山口佳奈/情報デザイン演習IIA/main.jpg,center,100%)
 
//host：sv1.php.starfree.ne.jp
//username：synthesis.starfree.jp

//mamp：http://localhost:8888/
//mamp：http://localhost:80/   
//~
//-''山口 佳奈''
//-'''Keywords：WebDesign(HTML,CSS,PukiWiki) / Atom '''
//-[[制作物>https://editor.p5js.org/pusachichanconabe/present/XRilzFix9]]
//http://synthesis.starfree.jp/revisedmap

//-[[過去の進捗報告>山口佳奈/情報デザイン研究I]]
//~




//**Overview
//~

//***Introduction
//&color(red){これは何か？ 簡潔に};
//学内マップに載っていない大学の施設等を紹介するWebサイト。
//~

//***Background and Purpose
//自分が学校生活を過ごす中で、九州産業大学のマップには載っていない施設が多くあると感じた。既存のマップは外部の人向けに作られたもので学生が学校生活を送るにあたっては情報が足りないと感じたため、学内の施設を全て知ることができるサイトを制作したいと考えた。
//~
//&color(red){プロジェクトの背景と目的};
//-九州産業大学の施設を紹介する。
//-九州産業大学学生の情報共有の場を構築する。
//~

//***Survey
//[[【KSU】九州産業大学>https://apps.apple.com/jp/app/ksu-%E4%B9%9D%E5%B7%9E%E7%94%A3%E6%A5%AD%E5%A4%A7%E5%AD%A6/id702774515]]
//九州産業大学が提供する公式のスマートフォンアプリ。九州産業大学関連のWebページや新着ニュースなどが閲覧できる。また、主要な施設の検索や施設までのルート案内などの機能がある。

//公式アプリとRevised Campus Mapは機能が異なるため棲み分けは可能である。
~

//***Concept
//学内の施設を有効活用できていないと感じる人も学内のことは大体知っていると思っている人も、キャンパスに対してより魅力を感じられるサイト。
//~

//***Target
//&color(red){誰のために};
//-九州産業大学の学生
//-外部の人
//~
//~

//***Output
//&color(red){成果物の形式・サイズ};
//#iframe(https://editor.p5js.org/pusachichanconabe/present/XRilzFix9,100%,58%)
//[[Revised Campus Map>https://editor.p5js.org/pusachichanconabe/present/XRilzFix9]]
//~
//~

//***Member
//&color(red){共同プロジェクトの場合は、メンバーと作業分担を明記};
//~

//***Tools
//&color(red){使用する機材・ソフトウエア};
//-Atom
//-FileZilla
//-PukiWiki
//~

//***Term
//&color(red){プロジェクトの期間};
//9月~12月
//~
//~

//調査
//-先行事例 / 類似作品の紹介
//（h3）
//-先行事例 / 類似作品の傾向
//（h3）
//~


//**CurrentStatus
//''サイト全体''
//使い、マップページはオンラインエディタである[[Glitch>https://glitch.com/]]を
//施設の情報は変化するためRevised Campus Mapでは、ブラウザ上で情報を更新//できる仕組みを利用した。施設紹介ページでCMSである//[[PukiWiki>https://pukiwiki.osdn.jp/]]を使用した。
//~
//''トップページ''
//一番最初に表示されるページ。このサイトの簡単な説明と、マップページと施設の紹介ページへのリンクを表示。
//~
//''施設紹介ページ''
//や大学関連のWebページのリンクなど
//学内の施設の情報を掲載。各ページにコメント欄を設けることで、施設情報の充実及び情報価値の向上を図る。
//~
//''マップページ''
//主に屋外にある施設を紹介。施設の位置情報とその施設を紹介するページを表示する。
//~
//~

//**Summary
//予定していた機能は概ね実装したが、マップページや施設紹介ページにはユーザビリティへの配慮が足りない部分があるため、今後はユーザビリティに配慮した制作をしていきたい。
//~
//~
//~

//**Project Management
//***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
//~

//***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
//-サイト全体のデザイン
//-マップページのブラッシュアップ
//-施設情報の更新
//~
//~
//~

//#hr
//CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
//#hr
//~
//~
//最新
//**2020.12.16
//***施設紹介ページ
//-ページ追加
//-施設情報の追加
//~

//**2020.12.01
//***施設紹介ページのデザイン
//-メニューを追加
//--レスポンシブに対応させる
//~

//**2020.11.24
//***マップページについて
//マップページも内容を変更できるように、マップページは共同編集可のオンラインエディタ[[Glitch>https://glitch.com/]]を使って制作することを検討中
//~
//~

//**2020.11.17
//***施設紹介ページのデザイン
//-footer/articleのデザイン変更
//-SideBar削除
//~
//***検索ボックス
//-[[フォームにカーソルを合わせるとカテゴリ選択アイコンが表示される>https://webdesignfacts.net/entry/searchform-css/#CSS-6&gsc.tab=0]]
//-[[Font Awesome 5 / Animating Icons>https://www.webdesignleaves.com/pr/plugins/fontawesome_01.html]]
//~
//~

//**2020.11.11
//-[[フルスクリーンナビゲーション>https://webdesignday.jp/inspiration/technique/html/4763/]]
//-[[フルスクリーンナビゲーションサンプル>https://webdesignday.jp/samples/p4763/]]
//-[[タブ切り替えを実装>https://techacademy.jp/magazine/45091]]
//-[[切り替えで表示が変わる>https://www.google.com/search?sxsrf=ALeKk03DhBZFC-WLRrGOCxKaZlg3iSSkhw%3A1605057091937&ei=QzqrX8niOOPRmAW0zovQBA&q=%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%A4%89%E3%82%8F%E3%82%8B%E3%80%80html&oq=%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%A4%89%E3%82%8F%E3%82%8B%E3%80%80html&gs_lcp=CgZwc3ktYWIQAzoECCMQJ1D5FlinJ2CNKmgAcAB4AIAB8AOIAbYHkgEHNC4xLjQtMZgBAKABAaoBB2d3cy13aXrAAQE&sclient=psy-ab&ved=0ahUKEwiJkLzOp_nsAhXjKKYKHTTnAkoQ4dUDCA0&uact=5]]
//~
//~

//**2020.11.10
//***マップページ
//-[[iframe>https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13183205203]]
//-[[ポイント時に画像を切りかえる>https://www.tagindex.com/javascript/link/change3.html]]
//-[[マップページ編集>https://glitch.com/edit/#!/join/e44837fa-b3dd-49c8-87f2-0afdea9d79a1]]
//~
//~

//**2020.11.09
//***コメント機能
//-[[PHPとAjaxでいいねボタン>https://qiita.com/kanasann1106/items/4ea0675afde639e6d540]]
//-[[「名無しさん」を実現する>http://ugokay01.wpblog.jp/comment-form-default-author-name/]]

//~
//***PukiWikiパスワード
//-[[編集制限>https://pukiwiki.osdn.jp/?Q%EF%BC%86A/%E9%81%8B%E5%96%B6]]
//-[[ファイル添付時のパスワード認証>https://pukiwiki.osdn.jp/?Q%EF%BC%86A/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/attach%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3#z4e2af32]]
//-[[XSS脆弱性対策>https://wikiwiki.jp/wikisa-bisu/XSS%E8%84%86%E5%BC%B1%E6%80%A7%E5%AF%BE%E7%AD%96%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6]]
//-[[サニタイジング>https://cybersecurity-jp.com/security-measures/33684#i-3]]
//-[[サニタイジングサンプル>https://www.javadrive.jp/php/string/index4.html]]
//~
//~

//**2020.11.04
//***トップページ
//PukiWikiを使っていないトップページは編集不可であるため、編集する必要のない情報を載せる。
//-トップに載せる情報
//--メインビジュアル　
//--サイトの説明
//--マップ/施設紹介ページへのリンク
//~

//***参考
//-[[サイトデザイン>https://muuuuu.org/]]
//-[[サブ項目>https://sekainoowari.jp/info/]]
//-[[メニューとサイト下>https://www.kinran.ac.jp/cheer/letstalk/]]
//-[[ダークモード>https://www.webcreatorbox.com/tech/dark-mode]]
//~
//~

//**2020.11.03
//***施設紹介ページの追加
//~
//***参考
//-[[SVG透明度>https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/fill-opacity]]
//-[[背景画像の表示位置を指定する>https://gray-code.com/html_css/setting-position-for-background-image/]]
//-[[img { width: 100%; }>https://allabout.co.jp/gm/gc/400630/]]
//-[[ランダムで異なる背景色・背景画像>https://since-inc.jp/blog/4765]]
//~
//~

//**2020.10.28
//***参考
//-[[BackgroundCheck>https://coliss.com/articles/build-websites/operation/javascript/js-background-check.html]]
//-[[背景の明度を自動的に判別し要素の色を最適化>https://creatormemo.com/2013/11/jquery_backgroundcheck/]]
//~
//~

//**2020.10.27
//***リンク集
//九州産業大学に関連するサイトをまとめたページを作成
//メニューから飛べるようにする
//参考: https://125naroom.com/web/3028
//参考: https://getbootstrap.jp/docs/4.3/examples/
//~
//***編集ガイド
//新規ページの作り方、コメントやページの編集のやり方を記載したページを作成
//~
//~

//**2020.10.20
//***ドロップダウンメニュー
//[[HTMLで多階層メニューを作る>https://techacademy.jp/magazine/32138]]
//[[CSSだけでドロップダウンメニュー>https://www.webdlab.com/labs/dropdownmenu-3/]]
//~
//***記事の表示
//[[Card全体をリンクにする>https://qiita.com/s10aim_tana/items/c0abf3fcf2430659e8e9]]
//~
//~

//**2020.10.13
//***トップページ試作
//https://editor.p5js.org/pusachichanconabe/present/XRilzFix9
//~
//***トップページの記事一覧
//-トップページに最新記事をサムネイル付きで載せる
//参考：[[PHPでブログの最新記事を自動取得する際に画像も取得したい>https://manablog.org/php_rss_get/]]

//-pukiwikiで実装できるか
//参考：[[淡水魚図鑑>https://aqwiki.net/index.php?%E6%B7%A1%E6%B0%B4%E9%AD%9A%E5%9B%B3%E9%91%91]]
//　　　[[ホームページのつくり方>https://web.syumichuu.com/]]

//~
//~

//**2020.10.07
//***Survey
//このページ（山口佳奈/情報デザイン研究II）にSurveyの項目を追加
//~
//~
//~

//**2020.10.06
//***SVGアニメーション試作
//https://editor.p5js.org/pusachichanconabe/present/ZNtbD3QKu
//SVGを使った、フェードアウトするアニメーション
//~
//参考
//-[[LoadingAnimation>https://www.webcreatorbox.com/tech/loading-animation]]
//-[[SVGAnimation>https://techblog.raccoon.ne.jp/archives/1569826832.html]]
//~
//~

//**2020.09.29
//***サイトの構成
//一番最初に表示されるページをマップページにするのではなく、トップページを設けてそこからマップや施設の紹介ページに飛ぶように検討中。
//トップページのレイアウト試作
//トップページにサイトの概要やサイト内の情報をまとめて分かりやすくする。
//参考: https://bagelee.com/
//~
//***Pukiwikiプラグインの導入
//-[[コメントプラグイン>https://www.kyusan-u.ac.jp/guide/summary/campus.html]]
//-[[タグプラグイン>http://pukiwiki.sonots.com/?Manual%2FPlugin%2Ftag.inc.php%2Frev201]]
//~
//***SVGアニメーション
//-[[アニメーションライブラリ>https://www.nxworld.net/services-resource/css-animation-libraries.html]]
//-[[HTMLスニペット>http://photoshopvip.net/113215]]
//~
//~
//**2020.09.23
//***マップページの調整
//-[[クリッカブルなSVG>https://sezaki-design.com/blog/236/]]
//-[[SVGアニメーション>https://designsupply-web.com/media/knowledgeside/3211/]]
//~
//***Pukiwiki
//http://design.kyusan-u.ac.jp/OpenSquareJP/?PukiWiki/Memo