#author("2021-06-28T20:15:19+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 北京長陽公園の日常を記録するフォトギャラリーサイト #image(back.jpg,left,100%) -'''Keywords：季節,映像 , 風景, 人物,その他''' -[[季卓芸/sample]] -Repository：https://github.com/ki0722 -https://ki0722.github.io/BeijingChangyangPark/ 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/ -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内容) 研究開発に使用する言語は以下の_３つ_である。 -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.06.23~06.29 -[[季卓芸/sample]] ~ ~ **2021.06.16~06.22 #iframe(https://ki0722.github.io/BeijingChangyangPark4/) 4-https://ki0722.github.io/BeijingChangyangPark4/ ~ ~ **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 ~ ~ **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 -◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ -◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~