#author("2021-11-19T11:47:56+09:00","default:inoue.ko","inoue.ko") #author("2021-12-02T22:43:57+09:00","default:art-gs","art-gs") #setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8) #image(2.png,left,10%) *Beijing Changyang Park 北京長陽公園の日常を記録するフォトギャラリーサイト -'''Keywords：季節,映像 , 風景, 人物,その他''' -GitHub：https://github.com/ki0722?tab=repositories -[[季卓芸/sample]] ~ ~ //#iframe(https://jzy722.wordpress.com) //-https://jzy722.wordpress.com **予備審査指摘事項 ***作品について -SNSとの連動 --Instagram に写真をアップして連動させるなど -ターゲットを明確に --主たる使用言語を定めるとともに、多言語対応も要検討 -３つのサイトの位置付けを明確に --Aboutのページに、サイトの主旨を記載 -３つのサイトを三部作とするために --ヘッダー・フッターのデザインを統一 ~ ***レポートについて -基本的な章構成を見直し -サイトマップとワイヤーフレームについては、サイトごとにそれぞれ必要 ~ ~ ~ ~ ***CONTENTS #contents2_1 ~ ~ **研究成果（制作物の現状） 4つのWebサイトをシリーズで制作しています。 ~ ***Type 1 -メニューの機能強化と天気予報のプラグインを追加しました。 //下部分で写真もメニューの機能です。 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark12/) -https://ki0722.github.io/BeijingChangyangPark12/ #iframe(https://ki0722.github.io/BeijingChangyangParkType1/) -https://ki0722.github.io/BeijingChangyangParkType1/ #qrcode(https://ki0722.github.io/BeijingChangyangPark12/) #qrcode(https://ki0722.github.io/BeijingChangyangParkType1/) ~ //#iframe(https://ki0722.github.io/BeijingChangyangPark8/) //-https://ki0722.github.io/BeijingChangyangPark8/ //~ ***Type 2 -ホームページ：写真の spring、summer などの文字から それぞれのページへリンクしています。 -その他のページ：通常のメニュー動作です。 -ページの演出 --spring：チューリップ花 --summer：雨とハスの花 --autumn：葉 --winter：雪の花 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark4/) -https://ki0722.github.io/BeijingChangyangPark4/ #iframe(https://ki0722.github.io/BeijingChangyangParkType2/) -https://ki0722.github.io/BeijingChangyangParkType2/ ~ ~ ***Type 3 -インターフェイスに「ページめくり」のプラグインを追加しました。 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark9/) -https://ki0722.github.io/BeijingChangyangPark9/ #iframe(https://ki0722.github.io/BeijingChangyangParkType3/) -https://ki0722.github.io/BeijingChangyangParkType3/ ~ ~ ***Type 4 "mouse更新" #iframe( https://ki0722.github.io/BeijingChangyangPark11home/) - https://ki0722.github.io/BeijingChangyangPark11home/ ~ "SUMMER" #iframe( https://ki0722.github.io/BeijingChangyangPark11summer/) -https://ki0722.github.io/BeijingChangyangPark11summer/ "参考1" -https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/WebGL_Ripples ~ ~ ~ **概要 ***研究の背景 北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。 春、夏、秋、冬、四季の景色が美しい場所です。 フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。 長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植：53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。 全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。 一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。 ~ ***目的・主旨 目指すサイトの特徴は以下のとおりです。 -誰もが容易に使えるインターフェイス -クールな視覚効果 -“動感”が強いもの ~ ***ターゲット -北京への観光を検討中の日本人 -北京市民 ~ ***ハイライト -闲庭信步 散歩 "闲庭信步"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。 -寧夏の秋の風景 「寧夏の秋の風景」のレジャーとエンターテイメントの景勝地には、白州広場、観音流水遊歩道、サクラダンス、空飛ぶ森、子供たちの楽しい広場、フィットネストレイル、その他の景勝地があります。この部分は色とりどりの葉が多く、秋には晩秋に太陽が沈み、空は赤い雲でいっぱいで、赤いカエデの葉は空と共通です。 -春华秋实 「春华秋实」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。 ~ ~ **サイトの仕様 ***サイトマップ #image(sitemap.jpg) ~ ***ワイヤーフレーム #image(wire frame1.jpg) ~ ***携帯ワイヤーフレーム #image(wire frame2.jpg) ~ **研究方法（制作方法） ***制作方法（言語・技術） //(多做一些动画网页小样，问卷调查，选出好的网页) //(如何查阅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 ~ ~ **研究 サンプル成果物 -https://jzy722.wordpress.com -https://ki0722.github.io/BeijingChangyangPark/ -https://ki0722.github.io/BeijingChangyangPark/ -https://ki0722.github.io/BeijingChangyangPark2/ -https://ki0722.github.io/BeijingChangyangPark3/ -https://ki0722.github.io/BeijingChangyangPark4/ -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/ ~ ~ #iframe(https://ki0722.github.io/BeijingChangyangPark/) 1-https://ki0722.github.io/BeijingChangyangPark/ ~ ~ -メニューの機能と天気予報を増えています. #iframe(https://ki0722.github.io/BeijingChangyangPark2/) 2-https://ki0722.github.io/BeijingChangyangPark2/ ~ ~ -youtubeの映像を使います。 #iframe(https://ki0722.github.io/BeijingChangyangPark3/) 3-https://ki0722.github.io/BeijingChangyangPark3/ ~ ~ -ホームページ：写真の spring、summerなどをクリックしてspringページになります。 他のページはメニューが普通メニューです。 springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。 #iframe(https://ki0722.github.io/BeijingChangyangPark4/) 4-https://ki0722.github.io/BeijingChangyangPark4/ ~ ~ -メニューの機能です。 #iframe(https://ki0722.github.io/BeijingChangyangPark5/) 5-https://ki0722.github.io/BeijingChangyangPark5/ ~ ~ -本の感じでページを動きいます。 #iframe(https://ki0722.github.io/BeijingChangyangPark6/) 6-https://ki0722.github.io/BeijingChangyangPark6/ ~ ~ -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/ ~ ~ -本の感じでページを動きいます。 #iframe(https://ki0722.github.io/BeijingChangyangPark9/) 9-https://ki0722.github.io/BeijingChangyangPark9/ ~ ~ -メニューの機能と天気予報を増えています. -下部分で写真もメニューの機能です。 #iframe(https://ki0722.github.io/BeijingChangyangPark10/) 10-https://ki0722.github.io/BeijingChangyangPark10/ ~ ~ **考察（まとめ） ~ ~ **参考資料 ~ ***参考文献 1.Generative Design with P5.js 2.Webデザイン良質見本帳 3.すべての人に知っておいてほしいJavaScriptの基本原則 4.jQuery仕事の現場でサッと使える！デザイン教科書 5.Web前端开发入门与实战 6.计算机网络 自项下方法 7.深入理解计算机系统 ~ ~ ***参考サイト｜技法 -http://babeltheking.com/eng -http://mike-tucker.com/13/ -https://www.nike-react.com/ -https://run.mockplus.cn/bXjHi8XasvtPbcaA/index.html?to=C0D6B533-1BE3-E811-9D33-D4619D08F0A4 -https://monyssb.com/ -https://faits-marquants.inra.fr ***参考サイト｜公園 -http://www.hanakoen.com -http://kanatakenosato.jp -https://www.17sucai.com/pins/demo-show?id=37923 桜 春 -https://www.17sucai.com/pins/demo-show?id=7609 落葉 秋 -https://www.17sucai.com/pins/demo-show?id=27371 雪 冬 -https://www.17sucai.com/pins/demo-show?id=36013 雪 冬 -https://www.17sucai.com/pins/demo-show?id=8465 雪 冬 -https://www.17sucai.com/pins/tag/6584.html 全部 ***参考サイト｜サイトデザイン -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 ~ ~ **Project Management ***Schedule [[&image(スクリーンショット.png);>https://docs.google.com/spreadsheets/d/11b_3atpqIAoyMCADDhex8ReZGgPlR0uZXVoTZjqOaA4/edit?usp=sharing]] ~ ***ToDo &color(red){やるべきこと（タスク）を箇条書きにします。}; &color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; ~ ~ ~ **worklog ＞ [[季卓芸/WorkLog]] ~ ~ ~