LogoMarkWhite.png

季卓芸/WorkLog のバックアップソース(No.35)

#author("2021-06-10T23:17:48+09:00","default:art-gs","art-gs")
#setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8)
#image(16.png,left,10%)
*[[季卓芸]]
研究経過報告
~


***CONTENTS
#contents2_1
~
~
**2021.06.04~06.11
~
***1.LOGO
#image(21.png)
~
***2.アンケート
#settableborder(none)
|33|33|33|c
|#image(19.png)|#image(20.png)|
~
***3.卒研プレゼン
-予備審査の発表は 30分 〜 45分
-[[季卓芸/卒研プレゼン]]
- https://vision.ip.kyusan-u.ac.jp/art-gs/?季卓芸/卒研プレゼン
#iframe( https://vision.ip.kyusan-u.ac.jp/art-gs/?季卓芸/卒研プレゼン)
//***&color(red){Ver.4};
//''Home page''
//- https://ki0722.github.io/BeijingChangyangPark11home/
//#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
~
~
***更新ウェブサイトlogoと「BeijingChangyangPark」比例で拡大すると縮小自動的に変更します。
天気予報が調整します。
***4.&color(blue){更新ウェブサイトlogoと背景色と天気予報場所とlogo、メニュー位置};

~
*** &color(red){Ver.3};
''本の感じでページを動かします。''
-インターフェイスに「ページめくり」のプラグインを追加しました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
~
*** &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
~
***&color(red){Ver.1};
''-メニューの機能強化と天気予報のプラグインを追加しました。。''
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
***参考天気予報
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
***参考色CSS
-https://color.uisdc.com/
~
"参考MENU："
2-https://ki0722.github.io/BeijingChangyangPark2/
~
~
**2021.05.29~6.4
~
***1. アンケート
~
#settableborder(none)
|33|33|33|c
|#image(17.png)|#image(18.png)|
このアンケートを公園来場者100人を目標に6月末までに実施。
~

***2.ウェブサイト
***新しいウェブサイト &color(red){Ver.4};
''Home page''
- https://ki0722.github.io/BeijingChangyangPark11home/
#iframe( https://ki0722.github.io/BeijingChangyangPark11home/)
~
'' page''
-質問1
上の空白が多すぎます 
~
-質問2
ページ比例で拡大する ことができますが、ページ比例で縮小できません。
~
~
"参考" 
-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/
~
~
''更新''
***更新ウェブサイト &color(red){Ver.3};
''本の感じでページを動かします。''
-インターフェイスに「ページめくり」のプラグインを追加しました。
ホームページと"更新&color(blue){Spring page　と Winter page};"
//-https://ki0722.github.io/BeijingChangyangParkPage/
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~
''問題''
Webページに動画リンクのhtmlを書く方法 です。
-https://v.douyin.com/euU5qfW/ 
 -<embed src=" https://v.douyin.com/euU5qfW/ " rel="external nofollow"  width="480" height="400" type="application/x-shockwave-flash"> </embed>

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

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


**2021.05.22~5.28
***１.公園ホームページ作る理由（公園季節）
#image(11.png)
~

***2. 公園をウェブページにする必要がある理由/調査：
#image(12.png)
~

***3. アンケート
#image(10.png)
~

***4. logoの制作（継続）
~
#settableborder(none)
|33|33|33|c
|#image(7.png)|#image(8.png)|
|LOGO|logo|
#settableborder(none)
|33|33|33|c
|#image(14.png)|#image(15.png)|
|LOGO|logo|

''logoの説明''
#image(9.png)
~
~

***5. ウェブサイト &color(red){Ver.3};
''本の感じでページを動かします。''
ホームページとspringページだけでサンプルを作りました。
#iframe(https://ki0722.github.io/BeijingChangyangPark9/)
9-https://ki0722.github.io/BeijingChangyangPark9/
~

''作品説明''
-1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。
-2.本は重いですが、本を覗き込んでいるような感覚があります。
-3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。
4-.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。
~
~
***6. 更新ウェブサイト &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.すべての写真と情報が一目でわかります。
~
~
***7.ウェブサイト &color(red){Ver.1};
''メニューの機能と天気予報を増えています.''
''下部分で写真もメニューの機能です。''
#iframe(https://ki0722.github.io/BeijingChangyangPark10/)
10-https://ki0722.github.io/BeijingChangyangPark10/
~
#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
8-https://ki0722.github.io/BeijingChangyangPark8/
~
''作品説明''
-1.通常のウェブページと比較して、写真は一目でより明確なウェブページに配置されます。
-2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな効果がよりよく反映され、個人的な経験の感覚が反映されます。
~

***8. 作品説明
#image(13.png)
~
~
~
**2021.05.14~5.21
***1. logoの制作（継続）
~
#settableborder(none)
|33|33|33|c
|#image(3.png)|#image(4.png)|
|LOGO|段組、説明|

~
参考：https://participation.tokyo2020.jp/jp/data/subbrand-usage-guidelines.pdf
~
~
***2. 研究報告作っています。
#image(5.png)
~
~
***3. 新しいホームページを作ります。
''メニューとページ動きを組み合わせる表現します。''
#iframe(https://ki0722.github.io/6-JQ_TurnJS-main/)
-https://ki0722.github.io/6-JQ_TurnJS-main/
~
~
''homeとspring（写真自動的動きます）だけです。''
#iframe(https://ki0722.github.io/BeijingChangyangPark7/)
7-https://ki0722.github.io/BeijingChangyangPark7/
~

''下部分で写真もメニューの機能です。''
#iframe(https://ki0722.github.io/BeijingChangyangPark8/)
8-https://ki0722.github.io/BeijingChangyangPark8/
~
''問題''
       <div class="BOX">
            <a href="spring_07.html">
              <img src="images/spring/spring_07.jpg">
            </a>
          </div>
%%この部分は消したいですが、消したら、aside部分白くなります。%%
~
#image(6.png)|
|bug|
~
~
''更新。''
ホームページ、spring、autumn葉全面的落ちる、 winter雪の花全面的に落ちる。
ホームページ：写真の　spring、summerなどをクリックしてspringページになります。

他のページはメニューが普通メニューです。
#iframe(https://ki0722.github.io/BeijingChangyangPark4/)
4-https://ki0722.github.io/BeijingChangyangPark4/
~
~

**2021.05.07~5.13
logoを作って、ページめくりホームページ。
~

***NavigationDesign
-https://design.kyusan-u.ac.jp/OpenSquareJP/?NavigationDesign
-https://koichi-inoue.github.io/Navi-ToggleBasic2/#
-https://koichi-inoue.github.io/Navi-Drawer/#
~

***レスポンシブデザイン
-https://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDesign
-https://formstone.it/components/navigation/demo/#
~

***MaterialDesign
https://design.kyusan-u.ac.jp/OpenSquareJP/?MaterialDesign
~

***薄い本の感じです。
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-https://www.kyusan-u.ac.jp/nyushi/ebook/pamph/001/HTML5/pc.html#/page/10
eg：
-https://www.17sucai.com/pins/demo-show?id=8502（重要）

-https://www.17sucai.com/pins/tag/1006.html
-https://www.17sucai.com/pins/demo-show?id=7294

~
~
-https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021/0427
-http://www.turnjs.com/

~
~

**2021.04.23
***情報デザイン研究II 
-https://p5js.org/examples/dom-input-and-button.html
-https://p5js.org/examples/drawing-continous-lines.html
-https://p5js.org/examples/objects-objects-2.html
-https://p5js.org/examples/input-mouse-2d.html
-https://p5js.org/examples/input-clock.html
-https://p5js.org/examples/input-easing.html
~
-https://design.kyusan-u.ac.jp/SampleSite/p5js_animation3/
-http://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/UI_Draggable
~
***tianqi
-https://blog.csdn.net/qq_39019822/article/details/85248755
-https://www.tianqi.com/plugin/
~
&color(red){サンプルの例：};
-https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Slider
-2https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/OKZoom
-3https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Tubular
-4https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/Parallax
~

***薄い本の感じです。
2) 写真集の「ページめくり」を進化させたWeb特有のトランジション
-https://www.kyusan-u.ac.jp/nyushi/ebook/pamph/001/HTML5/pc.html#/page/10
//-https://design.kyusan-u.ac.jp/OpenSquareJP/?Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%BC%94%E7%BF%92/2021/0427
#image(2.png)
~
~
**2021.04.16
~ いくつかの作品の構想を多く設計します。
~

*** 全部
-https://www.ikesai.com/cat/travel/
~
*** 1
-https://nisekohakuunso.com/ja/
-https://hoshinoya.com    
-https://studio-has.jp
~
***2
-https://www.museum-kawakyu.jp  
~
***3
-http://robinmastromarino.com
#image(1.png,,80%)
~
~

***4
-https://www.utopiaagriculture.com
-https://www.m-chemical.co.jp/saiyo/
-https://quoitworks.com
~
***5
-https://www.aircord.co.jp/careers
-https://www.m-trust.co.jp　さくら動き感じ
-https://scramble-stadium.tokyo　公園


~
~