LogoMarkWhite.png

季卓芸/WorkLog のバックアップ(No.60)


16.png

季卓芸

研究経過報告

CONTENTS




予備審査の発表は 30分 〜 45分

31.png




2021.10.15~10.21

論文構成

季卓芸/論文構成

1 1.背景

1.1.5.北京房山長陽公園への行き方
1.1.6.公園ルート紹介


2 4.webサイトについて

4.1. 公園ホームページのコンセプト
4.2. 公園をウェブページにする理由
4.3.    ウェブサイトについて分析
4.4.    ネットユーザーの評価


3 第5章まとめ

北京長陽公園紹介と感想


4 7.2. ウェブサイト作品紹介

7.2.1. Type1 
7.2.2. Type2
7.2.3. Type3 

書いています。



2021.10.08~10.14

1.webサイト編集

ウェブサイト TYPE2

2.1拡大する ことが編集。

原因探しました。

横ずっと拡大している原因 

flower.js/ rain.js/ leaves.js/のJS部分で

 /* Position the leaf at a random location along the screen
   将叶沿屏幕随机放置  写真のサイズ  例えば1024px(0,1024)*/
   leafDiv.style.left = pixelValue(randomInteger(0, 1024));

前の「2056」は「1024」に変わって、横は大丈夫になります。 

質問:

縦ずっと拡大している原因 

  でも、高さの数値を変更する位置が見つかりませんでした。



2.webサイト編集

ウェブサイト TYPE1

質問:

メニュー : 画面が小さくなり、メニューが自動的に出ますが、

ボタンをクリックしてメニューが出て欲しいです。

スマホ画面について写真サイズ

スマホになったとき、画面のデザイン自動的にパソコン同じデザインようにします。

3.webサイト編集

ウェブサイト TYPE3






2021.10.01~10.07

1.作品レポート

Indesignで
1.背景
2.ウェブサイトについて分析
3.ネットユーザーの評価
書いています。

季卓芸/論文構成



2.webサイト編集

ウェブサイト TYPE1

1.1aside場所下になりましたが、画面の右に欲しいです。

29.png
28.png


1.2スマホについてメニューのサイズ大きくなりたいです。画面に合わせるようにします。

30.png




3.webサイト編集

ウェブサイト TYPE2

2.1拡大する ことが編集。




4.webサイト編集

ウェブサイト TYPE3

2021.09.24~09.30

1.作品レポート

第四章 考察 について

Webサイトの調査と説明
Indesignで

2.レイアウトの編集Indesignで




2021.09.17~

2021.07.17~

1.作品レポート

季卓芸/論文構成


2.Type 3 インターフェイスに「ページめくり」のプラグインを追加しました。 ページ増えています。

3.TYPE4についてページJump

"参考"

3.TYPE4についてページJump


3.TYPE4sample(記録だけです)

"summer page OK"

全部sample

季卓芸/sample




2021.07.10~07.16

1.作品レポート

目次

22.png
23.png



  質問:公園ホームページ作る理由(公園季節)と 公園をウェブページにする必要がある理由/調査: メニューどの部分に入ったらいいですか。
"公園ホームページ作る理由(公園季節)"

11.png


"公園をウェブページにする必要がある理由/調査:"

12.png


24.png


季卓芸/論文構成

2.アンケート結果

"アンケート"

19.png
20.png



"アンケート結果"

25.png


参考

2021.07.02~07.09

"TYPE4"

HOME

SUMMER

更新ウェブサイト Ver.2

aboutページ作って、新しい映像を作った、入りました。

2021.06.19~07.01

更新

1. ウェブサイト Ver.2

2.sample

2021.06.11~06.18

更新

1. ウェブサイト Ver.2

問題1:スマホとノートパソコンについて、ダメになりました。 前天気予報の位置大丈夫でしたが、現在も問題になっています。

はじめに、HTMLファイルの<head>内に<meta>タグを使って、
以下の記述を追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">


問題2:buttonの場所でSpring.htmlページに移動したいです。

2. ウェブサイトVer.4

Home page

問題3: 動く感じが説明のようにやってみますが、まだできません。

"ホームページ"

参考

curtain.js

curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。

HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることができます。



3.ウェブサイト調査(まだ考え中です。)





2021.06.04~06.11


1.LOGO

21.png


2.アンケート

19.png
20.png


3.卒研プレゼン




更新ウェブサイトlogoと「BeijingChangyangPark」比例で拡大すると縮小自動的に変更します。

天気予報が調整します。

4.更新ウェブサイトlogoと背景色と天気予報場所とlogo、メニュー位置


Ver.3

本の感じでページを動かします。

Ver.2


4-https://ki0722.github.io/BeijingChangyangPark4/
"参考:
ButtonAnimation

ハンバーガーアイコンをCSSでアニメーションさせています。"
DEMO:-https://koichi-inoue.github.io/Navi-ButtonAnimation/
CODE:-https://github.com/koichi-inoue/Navi-ButtonAnimation

Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/

参考天気予報

参考色CSS

2021.05.29~6.4


1. アンケート


17.png
18.png

このアンケートを公園来場者100人を目標に6月末までに実施。

2.ウェブサイト

新しいウェブサイト Ver.4

Home page

更新ウェブサイト Ver.3

本の感じでページを動かします。

作品説明

ウェブサイト Ver.2



作品説明

ウェブサイト Ver.1

-メニューの機能強化と天気予報のプラグインを追加しました。。

10-https://ki0722.github.io/BeijingChangyangPark10/


作品説明

2021.05.22~5.28

1.公園ホームページ作る理由(公園季節)

11.png


2. 公園をウェブページにする必要がある理由/調査:

12.png


3. アンケート

10.png


4. logoの制作(継続)


7.png
8.png
LOGOlogo
14.png
15.png
LOGOlogo

logoの説明

9.png




5. ウェブサイト Ver.3

本の感じでページを動かします。
ホームページとspringページだけでサンプルを作りました。

9-https://ki0722.github.io/BeijingChangyangPark9/

作品説明

6. 更新ウェブサイト Ver.2

springチューリップ花、summer雨とハスの花、autumn葉、 winter雪の花全面的に落ちる。

4-https://ki0722.github.io/BeijingChangyangPark4/

7.ウェブサイト Ver.1

メニューの機能と天気予報を増えています.
下部分で写真もメニューの機能です。

10-https://ki0722.github.io/BeijingChangyangPark10/

8-https://ki0722.github.io/BeijingChangyangPark8/


作品説明

8. 作品説明

13.png






2021.05.14~5.21

1. logoの制作(継続)


3.png
4.png
LOGO段組、説明



参考:https://participation.tokyo2020.jp/jp/data/subbrand-usage-guidelines.pdf



2. 研究報告作っています。

5.png




3. 新しいホームページを作ります。

メニューとページ動きを組み合わせる表現します。

下部分で写真もメニューの機能です。

8-https://ki0722.github.io/BeijingChangyangPark8/


問題

      <div class="BOX">
           <a href="spring_07.html">
             <img src="images/spring/spring_07.jpg">
           </a>
         </div>

この部分は消したいですが、消したら、aside部分白くなります。

6.png
bug





更新。
ホームページ、spring、autumn葉全面的落ちる、 winter雪の花全面的に落ちる。
ホームページ:写真の spring、summerなどをクリックしてspringページになります。

他のページはメニューが普通メニューです。

4-https://ki0722.github.io/BeijingChangyangPark4/



2021.05.07~5.13

logoを作って、ページめくりホームページ。

NavigationDesign

レスポンシブデザイン

MaterialDesign

https://design.kyusan-u.ac.jp/OpenSquareJP/?MaterialDesign

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション







2021.04.23

情報デザイン研究II

tianqi

薄い本の感じです。

2) 写真集の「ページめくり」を進化させたWeb特有のトランジション

2021.04.16

いくつかの作品の構想を多く設計します。

全部

1

2

3

4

5