#author("2021-09-08T18:37:23+09:00","default:art-gs","art-gs") #setheadercolor(white,"linear-gradient(to top, #209cff 0%, #68e0cf 100%)",0.8) #image(1.png,left,12%) *Beijing Changyang Park 北京長陽公園の日常を記録するフォトギャラリーサイト -'''Keywords:季節,映像 , 風景, 人物,その他''' -GitHub:https://github.com/ki0722?tab=repositories ~ ***CONTENTS #contents2_1 ~ ~ **第I部 **第1章 序論 **1.1. 概要 ***1.1.1. 研究の背景 北京長陽公園は、自宅の近くにある公園のひとつで、時々散歩に出かけます。 春、夏、秋、冬、四季の景色が美しい場所です。 フィットネスとエンターテイメント、落ち着いたムード、素晴らしい場所です。 長陽公園は、房山区長陽町にあります。北京で建設中の11万エーカーの新しい公園の1つです。最大の陸地、地理的な場所、最も完全な緑化樹種、および最も完全なインフラストラクチャを備えた公園です。庭園では、人工の風景と元の生態学的な風景が組み合わさって、カラフルな園芸植物のコミュニティを形成し、都市の森の風景を作り出し、市民がリラックス、レクリエーション、フィットネスするのに理想的な場所を提供します。この庭園は、2013年に北京庭園を受賞しました緑化局は市の「質の高い公園」として評価されました。共植:53550本の木、19920本の灌木、717952年生の花、105743 105芝生、668914㎡地被。 全体的な自然条件によれば、長陽公園は「2つの川と2つの庭園」の生態学的なウォーターフロントの景観を形成しています。 一部の情報はインターネットで確認できますが、公式のWebサイトは存在していないので、私がデザインしたいと考えました。 ~ ***1.1.2. 目的・主旨 目指すサイトの特徴は以下のとおりです。 -誰もが容易に使えるインターフェイス -クールな視覚効果 -“動感”が強いもの ~ ***1.1.3. ターゲット -北京への観光を検討中の日本人 -北京市民 ~ ***1.1.4. ハイライト -闲庭信步 散歩 "闲庭信步"スポットには、松云台、浣溪叠、枫舞清韵、涵秋叠影などのスポットがあります。全体的なテーマは木です。中庭をのんびり歩くなど、ゆったりとくつろげる場所を提供します。 -寧夏の秋の風景 「寧夏の秋の風景」のレジャーとエンターテイメントの景勝地には、白州広場、観音流水遊歩道、サクラダンス、空飛ぶ森、子供たちの楽しい広場、フィットネストレイル、その他の景勝地があります。この部分は色とりどりの葉が多く、秋には晩秋に太陽が沈み、空は赤い雲でいっぱいで、赤いカエデの葉は空と共通です。 -春华秋实 「春华秋实」のシーンには、主に梨花の春の雪、ベゴニアフラワーストリーム、サクラダンスフライング、秀逸台、陳西広場などの景勝地があります。この地域は、「春に開花し、秋に果物を広げる」植物、したがって「春の花と秋の果物」が優勢です。 ~ ~ **1.2. サイトの仕様 ***1.2.1.サイトマップ #image(sitemap.jpg) ~ ***1.2.2.ワイヤーフレーム #image(wire frame1.jpg) ~ ***1.2.3.携帯ワイヤーフレーム #image(wire frame2.jpg) ~ **第二章 方法 ***2.1. 制作方法(言語・技術) //(多做一些动画网页小样,问卷调查,选出好的网页) //(如何查阅CSS,JS,JQ内容) 研究開発に使用する言語は以下の_3つ_である。 -1) HTML:ページの構造 -2) CSS:ページのビジュアルデザイン -3) JavaScript(jQuery): ページの動的変更 インタラクティブな仕組みの実現には、主に JavaScript と、そのライブラリーである jQueryプラグインを使用する。具体的には、以下のような「動き」や「触感」を実現する手法を開発する。 ~ -1) タッチ・クリックに反応して変化する「動的写真」の導入 -2) 写真集の「ページめくり」を進化させたWeb特有のトランジション -3) ユーザーの動きに反応するパーティクル要素の導入 -4) インタラクティブに反応する「背景」要素の導入 -5) 電子媒体における「手触り感」の再現 ~ ~ ***2.2. 制作方法(技法) -Photoshop:写真を調整 -Adobe Illustrator:logoのデザインを作成 -HTML:ページの構造 -CSS:ページのビジュアルデザイン -JavaScript:ページの動的変更 -jQuery:ページの動的変更 -jQuery プラグイン:様々な表現機能 ~ ***2.3. 制作環境 -ハードウエア --iMac、Mac、Windows、デジタルカメラ -ソフトウエア --Atom Editor --Adobe Photoshop --Adobe Illustrator --GitHub ~ ~ **第三章 結果 ***3.1. アンケート ***3.1.1. アンケート #settableborder(none) |33|33|33|c |#image(3.png)|#image(4.png)| ~ ***3.1.2. アンケート結果 #image(7.png) ~ "中国ではみんなスマートフォンとコンピュータ持っています。" ~ **第四章 考察 ***4.1. 公園ホームページ作る理由(公園季節) "公園ホームページ作る理由(公園季節)" #image(5.png) ~ ***4.2. 公園をウェブページにする必要がある理由/調査: #image(6.png) ***4.2.1. ウェブサイト調査 -公園について: 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. -結論: ~ ~ ~ **第五章 考察(まとめ) *** 5.1. 結論 ~ ~ **参考資料 ~ ***参考文献 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 ~ ***参考天気予報 -https://blog.csdn.net/qq_39019822/article/details/85248755 -https://www.tianqi.com/plugin/ ~ ***参考色CSS -https://color.uisdc.com/ ~ -動く、機能性について: --1.https://www.17sucai.com/pins/demo-show?id=7609 ~ ***参考 --[[マウスのデザインです。>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/ **第II部 **第一章 研究成果(制作物の現状) **1.1. 作品 4つのWebサイトをシリーズで制作しています。 ~ ***1.1.1 Type 1 -メニューの機能強化と天気予報のプラグインを追加しました。 //下部分で写真もメニューの機能です。 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark10/) -https://ki0722.github.io/BeijingChangyangPark10/ ~ //#iframe(https://ki0722.github.io/BeijingChangyangPark8/) //-https://ki0722.github.io/BeijingChangyangPark8/ //~ ***1.1.2. Type 2 -ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。 -その他のページ:通常のメニュー動作です。 -ページの演出 --spring:チューリップ花 --summer:雨とハスの花 --autumn:葉 --winter:雪の花 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark4/) -https://ki0722.github.io/BeijingChangyangPark4/ ~ ~ ***1.1.3. Type 3 -インターフェイスに「ページめくり」のプラグインを追加しました。 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark9/) -https://ki0722.github.io/BeijingChangyangPark9/ ~ ~ ~ ***1.1.4. Type4 "mouse更新" #iframe( https://ki0722.github.io/BeijingChangyangPark11home/) - https://ki0722.github.io/BeijingChangyangPark11home/ ~ #iframe( https://ki0722.github.io/BeijingChangyangPark11summer/) - https://ki0722.github.io/BeijingChangyangPark11summer/ ~ #iframe( https://ki0722.github.io/Beijingcangyangpark11summer2/) -https://ki0722.github.io/Beijingcangyangpark11summer2/ ~ ~ **1.2. LOGO #image(2.png) ~ ~ **第二章 作品概要 ***2.1. コンセプト ~ ***2.2. ウェブサイト作品紹介 ~ ***2.2.1. Type1 -メニューの機能強化と天気予報のプラグインを追加しました。 ~ ***2.2.2. Type2 -ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。 -その他のページ:通常のメニュー動作です。 -ページの演出 --spring:チューリップ花 --summer:雨とハスの花 --autumn:葉 --winter:雪の花 ~ ~ ***2.2.3. Type3 "写真集の「ページめくり」を進化させたWeb特有のトランジション" #settableborder(none) |33|33|33|33|c |#image(8.jpg)|#image(9.jpg)|#image(10.jpg)| |Spring|Spring|Summer| |#image(11.jpg)|#image(12.jpg)|#image(13.jpg)| |Autumn|Winter|Other| ~ ***2.2.4. Type4 "mouse更新" "背景画像に波紋をつくる jQuery WebGL Ripples " "jQuery Slider / Carousel スライダー(カルーセル)の活用事例" ~ ~ ~