#author("2021-06-18T11:14:21+09:00","default:inoue.ko","inoue.ko") #setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8) #image(16.png,left,10%) *[[季卓芸]] 研究経過報告 ~ ***CONTENTS #contents2_1 ~ ~ **2021.06.11~06.18 ''更新'' ***1. ウェブサイト &color(red){Ver.2}; #iframe(https://ki0722.github.io/BeijingChangyangPark4/) -https://ki0722.github.io/BeijingChangyangPark4/ メニューを変更します。 文章の位置を調整することができます。でも、 ***&color(blue){問題1:スマホとノートパソコンについて、ダメになりました。 前天気予報の位置大丈夫でしたが、現在も問題になっています。}; はじめに、HTMLファイルの<head>内に<meta>タグを使って、 以下の記述を追加します。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ~ ***&color(blue){問題2:buttonの場所でSpring.htmlページに移動したいです。}; -"button" --https://jajaaan.co.jp/css/button/ button作る原因は見にやすいです。 ~ ~ ~ ***2. ウェブサイト&color(red){Ver.4}; ''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){問題3: 動く感じが説明のようにやってみますが、まだできません。}; "ホームページ" #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 ~ ~ ***参考 --[[スマホとパソコン画面自動的調整参考>https://design.kyusan-u.ac.jp/OpenSquareJP/?ResponsiveDesign]] --[[マウスのデザインです。>https://weekend.jp/aroma-diffuser/]] --マウスhttps://design.kyusan-u.ac.jp/OpenSquareJP/?CSS/Tips --https://www.museum-kawakyu.jp --http://robinmastromarino.com/ "https://chordbook.com/guitar-scales/" --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/ -"button" --https://jajaaan.co.jp/css/button/ -"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/" --https://www.curtainsjs.com/examples/simple-plane/index.html https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/simple-plane/js/simple.plane.setup.js --https://www.curtainsjs.com/examples/asynchronous-textures/index.html https://github.com/martinlaxenaire/curtainsjs/blob/master/examples/asynchronous-textures/js/async.textures.setup.js ~ ***curtain.js -普通の画像がまるでカーテンのようにふりふりと風になびくアニメーションをつけたり、画像を水面に見立て、ブヨブヨとマウスカーソルに合わせて動いたり…。curtain.jsを使うと簡単に画像に対して様々な目新しいアニメーションをつけることができます。 -curtain.jsとは curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。 HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。 ~ ~ ***3.ウェブサイト調査(まだ考え中です。) -公園について: JAPAN --1.http://www.hanakoen.com/ --2.http://kanatakenosato.jp --3.https://www.showakinen-koen.jp/ --4.https://hitachikaihin.jp/ --5.https://tsumugiweb.com/2020/06/01/minnanokouen-hp/ --6.https://www.shinrinkoen.jp/ --7.https://uminaka-park.jp/ --8.https://www.tokyo-park.or.jp/ --9.https://www.huistenbosch.co.jp/ CHINA --10.http://www.capg.org.cn/ --11.http://www.bjjspark.com/index.jhtml --12.https://www.beihaipark.com.cn/ --13.http://www.tiantanpark.com/ --14. --15. ~ -動く、機能性について: --1.https://www.17sucai.com/pins/demo-show?id=7609 ~ ~ **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分 #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 ***1.公園ホームページ作る理由(公園季節) #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 公園 ~ ~