LogoMarkWhite.png

季卓芸/デザイン応用演習 のバックアップの現在との差分(No.12)


#author("2021-06-15T00:42:46+09:00","default:art-gs","art-gs")
#author("2021-06-29T11:19:25+09:00","default:inoue.ko","inoue.ko")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)
#image(2.png,left,10%)
*Beijing Changyang Park 
北京長陽公園の日常を記録するフォトギャラリーサイト
-'''Keywords:季節,映像 , 風景,  人物,その他'''
~

#image(back.jpg,left,100%)
~
-'''Keywords:季節,映像 , 風景,  人物,その他'''
-[[季卓芸/sample]]

~
-Repository:https://github.com/ki0722


***CONTENTS
#contents2_1
-https://ki0722.github.io/BeijingChangyangPark/
-https://ki0722.github.io/BeijingChangyangPark5/
-https://ki0722.github.io/BeijingChangyangPark6/
-https://ki0722.github.io/BeijingChangyangPark7/
-https://ki0722.github.io/BeijingChangyangPark8/
-https://ki0722.github.io/BeijingChangyangPark9/
-https://ki0722.github.io/BeijingChangyangPark10/
-https://ki0722.github.io/BeijingChangyangPark11home/
~
~


**概要
***研究の背景
北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。
春、夏、秋、冬、四季の景色が美しい場所です。

フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。

長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植:53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。
全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。

一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。
~

***目的・主旨
目指すサイトの特徴は以下のとおりです。
-誰もが容易に使えるインターフェイス
-クールな視覚効果
-“動感”が強いもの
~

***サイトの仕様
1-https://ki0722.github.io/BeijingChangyangPark/
2-https://ki0722.github.io/BeijingChangyangPark2/
3-https://ki0722.github.io/BeijingChangyangPark3/
4-https://ki0722.github.io/BeijingChangyangPark4/
5-https://ki0722.github.io/BeijingChangyangPark5/
6-https://ki0722.github.io/BeijingChangyangPark6/
7-https://ki0722.github.io/BeijingChangyangPark7/
8-https://ki0722.github.io/BeijingChangyangPark8/
9-https://ki0722.github.io/BeijingChangyangPark9/
10-https://ki0722.github.io/BeijingChangyangPark10/
11-https://ki0722.github.io/BeijingChangyangPark11home/
~

***研究方法(制作方法)
-調査方法
//(多做一些动画网页小样,问卷调查,选出好的网页)
//(如何查阅CSS,JS,JQ内容)
研究開発に使用する言語は以下の_3つ_である。
-1) HTML:ページの構造
-2) CSS:ページのビジュアルデザイン
-3) JavaScript(jQuery): ページの動的変更
インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。
~

-1) タッチ・クリックに反応して変化する「動的写真」の導入
-2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-3) ユーザーの動きに反応するパーティクル要素の導入
-4) インタラクティブに反応する「背景」要素の導入
-5) 電子媒体における「手触り感」の再現
~
~

-制作方法(技法)
-Photoshop:写真を調整
-Adobe Illustrator:logoのデザインを作成
-HTML:ページの構造
-CSS:ページのビジュアルデザイン
-JavaScript:ページの動的変更  
-jQuery:ページの動的変更  
-jQuery プラグイン:様々な表現機能
~

*** 制作環境
-ハードウエア
--iMac、Mac、Windows、デジタルカメラ
-ソフトウエア
--Atom Editor
--Adobe Photoshop
--Adobe Illustrator
--GitHub

~
~

**Project Management

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

***ToDo
&color(red){やるべきこと(タスク)を箇条書きにします。};
&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};

~
~
~

#hr
CENTER:''worklog''

~
***CONTENTS
#contents2_1
~
~

**2021.6.08~6.15
**2021.06.23~06.29
-[[季卓芸/sample]]
~
''更新''
***1. ウェブサイト &color(red){Ver.2};
メニューを変更します。
文章の位置を調整することができます。
&color(blue){問題: 前天気予報の位置大丈夫でしたが、現在問題になっています。};
~
**2021.06.16~06.22
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
-https://ki0722.github.io/BeijingChangyangPark4/
4-https://ki0722.github.io/BeijingChangyangPark4/
~

***2. ウェブサイト&color(red){Ver.4};
~
**2021.6.08~6.15
~
''更新''
*** ウェブサイト&color(red){Ver.4};mouse更新
''Home page''
--mouse更新
#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
- https://ki0722.github.io/BeijingChangyangPark11home/
~
-"mouse参考"
--https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/mouse-cursor-css-jquery/
--https://wemo.tech/3229
~
~

-"画像に簡単にアニメーションをつけるcurtain.js"
https://bagelee.com/design/javascript/add_animation_to_images_using_curtain_js/

~
~
***&color(blue){問題: 動く感じが説明のようにやってみますが、まだできません。};

"ホームページ"
#iframe( https://www.curtainsjs.com/examples/simple-plane/index.html)
--https://www.curtainsjs.com/examples/simple-plane/index.html
https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/simple-plane/js/simple.plane.setup.js
~
"ホーム以外ページ"
#iframe( https://www.curtainsjs.com/examples/multiple-textures/index.html)
-- https://www.curtainsjs.com/examples/multiple-textures/index.html

#iframe( https://www.curtainsjs.com/examples/asynchronous-textures/index.html)
--https://www.curtainsjs.com/examples/asynchronous-textures/index.html
~
~
**2021.6.03~6.07
***メニュー
"質問1"
 logo比例で拡大すると縮小できません。

"参考:"
-https://design.kyusan-u.ac.jp/OpenSquareJP/?cmd=read&page=NavigationDesign&word=Navi#content_1_6
*** &color(red){Ver.3};
''本の感じでページを動かします。''
-インターフェイスに「ページめくり」のプラグインを追加しました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
"質問2":
 メニューの位置は右に移動します。
~
*** &color(red){Ver.2};
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation

ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation

~
~
**2021.05.29~6.2
***新しいウェブサイト &color(red){Ver.4};
''Home page''
- https://ki0722.github.io/BeijingChangyangPark11home/
#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
~
'' page''
~
~
"参考" 
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ModalWindow
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples
-https://www.museum-kawakyu.jp/
~
~
**2021.05.23~5.28
''更新''
***1. ウェブサイト &color(red){Ver.3};
''本の感じでページを動かします。''
ホームページとspringページだけでサンプルを作りました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~

''作品説明''
-1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。
-2.本は重いですが、本を覗き込んでいるような感覚があります。
-3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。
4-.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。
~
~
***2. ウェブサイト &color(red){Ver.2};
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/

-ホームページ:写真の spring、summerなどをクリックしてspringページになります。
-他のページはメニューが普通メニューです。
~
''作品説明''
-1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴、落ち葉、雪片。
-2.すべての写真と情報が一目でわかります。
~
~
***3.ウェブサイト &color(red){Ver.1};
''メニューの機能と天気予報を増えています.''
''下部分で写真もメニューの機能です。''
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
''作品説明''
-1.通常のウェブページと比較して、写真は一目でより明確なウェブページに配置されます。
-2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな効果がよりよく反映され、個人的な経験の感覚が反映されます。
~
~

~
~
**2021.05.14~5.22
~
**更新
springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
***ホームページ:写真の spring、summerなどをクリックしてspringページになります。
他のページはメニューが普通メニューです。
~
~


**2021.04.20|調査
***面白サイト・面白アイデアのリンク
-https://y-n10.com
-https://all.cast-er.com
-https://www.seed-recruit.com
-https://www.pola.co.jp/wecaremore/
-https://www.utopiaagriculture.com
-https://www.m-chemical.co.jp/saiyo/
-https://quoitworks.com
-https://www.aircord.co.jp/careers
-https://www.m-trust.co.jp さくら動き感じ
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
~
~
~