#author("2021-10-10T16:53:55+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 ~ ~ #hr CENTER:''第I部'' #hr ~ *第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. 制作環境 ***2.3.1. ハードウエア --iMac、Mac、Windows、デジタルカメラ ~ ***2.3.2. ソフトウエア --Atom Editor --Adobe Photoshop --Adobe Illustrator --GitHub ~ ~ ~ *第三章 アンケート調査 **3.1. アンケートの方法 #settableborder(none) |33|33|33|c |#image(3.png)|#image(4.png)| ~ ~ **3.2. アンケートの結果 #image(7.png) ~ "中国ではみんなスマートフォンとコンピュータ持っています。" ~ ~ ~ *第四章 webサイトについて **4.1. 公園ホームページのコンセプト "公園ホームページのコンセプト:四季" #image(5.png) ~ 视频,图片会更直接感受到公园氛围。 最在意公园四季变化 春天的郁金香(3月底)花开,牡丹花(4月底,5月初开)花开 夏天的雨天与荷花(6,7月)开。 秋天的落叶与薰衣草开。 冬天下雪的雪花。 公园四季鲜明。 所以网页做出根据季节飘落的动态感,使用户更加直观,身临其境。 ~ ビデオや写真は、公園の雰囲気をより直接的に感じるでしょう。 公園の季節の移り変わりが一番気になる 春にはチューリップ(3月末)が咲き、牡丹(4月末、5月上旬)は咲きます 蓮は夏の雨の日(6月と7月)に咲きます。 紅葉とラベンダーが咲きます。 冬の雪の雪。 公園には四季があります。 そのため、季節に応じてダイナミックに落ちていく感覚で、より直感的で没入感のあるウェブページになっています。 ~ ~ **4.2. 公園をウェブページにする理由: #image(6.png) ~ 1.日本案内,都是纸质版,有时拿到家里了,想要再看时,查找不方便,会出现忘记放哪儿了的情况。 2.只能到了公园才可以拿到,不方便。 如果做成了网站,随时随地就可以看到,方便查阅。 把天气预报放上,好知道是否有利出行 现在新冠疫情,会出行不方便,但是如果看到了网页后,也可以得到最新情报,也可以身临其境(视觉上感知)。 ~ 1.日本語の場合、すべて紙版です。家に持ち帰ることもあります。もう一度読みたいときは、見つけるのが面倒で、どこに置いたらいいのか忘れてしまうかもしれません。 2.公園でしか入手できないので不便です。 ウェブサイトを作ると、いつでもどこでも見ることができ、確認も簡単です。 天気予報を載せて、旅行が有益かどうかを確認しましょう 新しい王冠の流行により、旅行は不便になりましたが、Webページを見ると、最新の情報を入手でき、その場で(視覚)することもできます。 ~ ~ ウェブサイト調査 -公園について: 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. -結論: ~ ~ ~ *第五章 考察(まとめ) **結論 ~ ~ ~ #hr CENTER:''第II部'' #hr ~ ~ *第六章 研究成果(制作物の現状) ** 6.1. 作品 4つのWebサイトをシリーズで制作しています。 ~ ***6.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/ //~ ***6.1.2. Type 2 -ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。 -その他のページ:通常のメニュー動作です。 -ページの演出 --spring:チューリップ花 --summer:雨とハスの花 --autumn:葉 --winter:雪の花 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark4/) -https://ki0722.github.io/BeijingChangyangPark4/ ~ ~ ***6.1.3. Type 3 -インターフェイスに「ページめくり」のプラグインを追加しました。 ~ #iframe(https://ki0722.github.io/BeijingChangyangPark9/) -https://ki0722.github.io/BeijingChangyangPark9/ ~ ~ ***6.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/ ~ ~ **6.2. LOGO #image(2.png) ~ ~ ~ *第七章 作品概要 **7.1. コンセプト ~ ~ **7.2. ウェブサイト作品紹介 ~ ***7.2.1. Type1 -メニューの機能強化と天気予報のプラグインを追加しました。 ~ 第一个作品 1.相对普通网页,图片放在一个网页上,更一目了然。 2.每个图片的 水波纹,落花,叶,雪 。动态效果,更好体现,身历其境感。 ~ 1番目の作品 1.通常のウェブページと比較して、写真は一目でより明確なウェブページに配置されます。 2.各写真の水の波紋、落ちてくる花、葉、雪。ダイナミックな効果がよりよく反映され、個人的な経験の感覚が反映されます。 ~ ***7.2.2. Type2 -ホームページ:写真の spring、summer などの文字から それぞれのページへリンクしています。 -その他のページ:通常のメニュー動作です。 -ページの演出 --spring:チューリップ花 --summer:雨とハスの花 --autumn:葉 --winter:雪の花 ~ 第二个作品 1.全面根据季节主题,飘落郁金香,荷花,雨滴,落叶,雪花。 2.所有照片及信息,一目了然。 ~ 2番目の作品 1.季節のテーマに応じて、落ちてくるチューリップ、蓮、雨滴、落ち葉、雪片。 2.すべての写真と情報が一目でわかります。 ~ ~ ***7.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| ~ 第三个作品 1.现在电子时代,看纸质书的人少了,所以想做出书的质感。 2.书带的比较沉重,但是有想要书的翻阅感。 3.就像拿着案内简介的感觉,网页可以做到实时更新。 4.不想让杂志,书籍所遗忘。所以网页做出书的感觉。 ~ 3番目の作品 1.電子時代では、紙の本を読む人が少ないので、本の質感を作りたいです。 2.本は重いですが、本を覗き込んでいるような感覚があります。 3.ケースの簡単な紹介を持っているような気がします、ウェブページはリアルタイムで更新することができます。 4.雑誌や本を忘れてほしくない。つまり、ウェブは本のような感覚を与えます。 ~ ***7.2.4. Type4 "mouse更新" "背景画像に波紋をつくる jQuery WebGL Ripples " "jQuery Slider / Carousel スライダー(カルーセル)の活用事例" ~ ~ ~ *参考資料 ~ **参考文献 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/ ~ ~ ~