# 1131 NTUST WebDev & Design Course

:::info

後續有什麼資源或公告，會盡量往這裡塞，也歡迎大家貢獻。

:::

## 重要連結

[學員](https://reurl.cc/8XDxzM)
[分組名單](https://reurl.cc/VMYVAZ)
[媒體資源（中文）](https://hackmd.io/bjvcTBw8RX-CXjLV-aVttg?view)
[課堂群組](https://line.me/ti/g/sR_a4aBwX8)

:::spoiler 小提示

 群組中的 `@Chiao` 是我們的老師

:::

:::spoiler 2024-09-13 內容
## 2024-09-13

>課堂練習與回家作業相同，以下幾點需注意:
> 1. 2024-09-13 第四節上課分組討論，自行決定要在課堂上看 Step2 的那六個影片還是要直接把作業幹出來。
> 2. 練習連結每個人都要繳交，繳交的位置請參考 Step3。做不出來沒關係，**老師不會把你吃掉。**

### Links

[Get started](https://p5js.org/tutorials/get-started/)
[thecodingtrain](https://thecodingtrain.com/tracks/code-programming-with-p5-js)

▴ on the side, you can see the topic of the video.

### 課堂練習 & 回家作業

根據分組做座位練習，組別自行決定要直接把目標做出來或是看完影片再做。
啊不知道怎麼做也沒關係，反正下個禮拜老師不會咬你就對了。

#### Step1

overview this link -> [Get started](https://p5js.org/tutorials/get-started/)

#### Step2

看這六個影片，可以決定回家看或是在課堂上看。[連結點我](https://thecodingtrain.com/tracks/code-programming-with-p5-js)

#### Step3

目標在這，把下圖的東西做出來，把連結貼到[這裡](https://docs.google.com/spreadsheets/d/1eLyZlUGuCJbRVNgozBozMybfXJ4a2K86vzxQYQupTR4/edit?gid=181955774#gid=181955774)

:::

::: spoiler 2024-09-20 內容
## 2024-09-20

### 連結

[作業繳交連結](https://docs.google.com/spreadsheets/d/1eLyZlUGuCJbRVNgozBozMybfXJ4a2K86vzxQYQupTR4/edit?gid=1203855775#gid=1203855775)

[Tutorial comment version from TA 助教的註解版本](https://editor.p5js.org/kuokc/sketches/qjPVDimIo)
可搭配 Variable and changes 的章節閱讀（但請不要編輯

### 本週的要學的技能

[Variable and changes](https://p5js.org/tutorials/variables-and-change/)

試著學習以下這些影片中的內容：

### 作業


1. 選一個 Ellsworth Kelly 的作品，盡量是有圓形的元素
2. 學習這週的 p5.js 課程內容，並試著利用你學到的東西去做出你想要做的東西。
3. 記得在你的程式碼裡面加入適當的註解，讓別人能夠理解你的程式碼。

:::

::: spoiler 2024-09-27 內容
## 2024-09-27

### 課程內容

[p5.js創始人 Lauren Lee McCarthy](https://lauren-mccarthy.com/)
[電影推薦：2001太空漫遊 (2001: A Space Odyssey)](https://youtu.be/oR_e9y-bka0?si=mzry_bQR8dMzP0-d)

<iframe width="560" height="315" src="https://www.youtube.com/embed/oR_e9y-bka0?si=mzry_bQR8dMzP0-d" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

[Stefan Sagmeister](https://sagmeister.com)
[Stefan Sagmeister: 休假的力量 - TED Talk](https://youtu.be/MNuOmTQdFjA?si=o4CyBn8NEbEKXSez)
[Yugo Nakamura | 中村勇吾](https://tha.jp/)
[Rafael Lozano-Hemmer](https://www.lozano-hemmer.com/)
[THE NATURE OF CODE BY DANIEL SHIFFMAN](https://natureofcode.com/random/)

### 本週作業

[Reading: How Computer Code Became a Modern Design Medium—an Oral History](https://eyeondesign.aiga.org/how-an-mit-research-group-turned-computer-code-into-a-modern-design-medium/)
:::

:::spoiler 2024-10-04 內容
## 2024-10-04

### 課程內容
[Patatap](https://patatap.com/)
[三宅一生 Miyake Issei](https://zh.wikipedia.org/zh-tw/%E4%B8%89%E5%AE%85%E4%B8%80%E7%94%9F)
[池田亮司 Ryoji Ikeda](https://www.ryojiikeda.com/)
[Vera Molnar](https://ropac.net/zh/artists/231-/)
</br>

### Homework
p5.js, please watch conditinals and functions.
[Conditionals and Interactivity](https://p5js.org/tutorials/conditionals-and-interactivity/)
[Organizing Code with Functions](https://p5js.org/tutorials/organizing-code-with-functions/)

[CodingTrain](https://thecodingtrain.com/tracks/code-programming-with-p5-js), please watch CONDITIONAL LOGIC and LOOPS

#### [OPTIONAL]
Try to find some information and works about [Vera Molnar](https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r).
:::

:::spoiler 2024-10-11 內容

遠端視訊公告

親愛的同學們，
本週五將進行遠端視訊會議，特別邀請在紐約的黃端亭學姊作為主講人。請各位提前準備好必要的設備並確保網絡暢通。以下是相關細節：
* 日期：2024 年 10 月 11 日（週五）
* 時間：早上 9:00 至 11:00
* 點名時間：9:00 至 9:10
* 平台：請使用Google Meet
* 會議連結：https://meet.google.com/wfi-vztm-rqh
會議期間將由端亭學姊分享她的創意編碼作品及NYU ITP的求學經驗，請務必準時參加，點名未到視同缺席。如有任何問題或技術上的疑問，請提前聯絡我。

謝謝大家的配合！

>10/11 講師(學姊)的聯絡資料：
[e-mail]
website: tuan-h.com
IG: @desktop.tuan

:::

:::spoiler 2024-10-18 內容

## 2024-10-18

### 重要

請於上課前了解下方 Notification 中的 Proposal of Web Development Final Project 執行原則並滿足達成條件。

### 本週自學作業(self-study assignments)

[the-coding-train: functions](https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/5-functions/1-basics)

[p5.js: loops](https://p5js.org/tutorials/repeating-with-loops/)

:::

:::spoiler 2024-10-25 內容

## 2024-10-25

### 課堂案例分享
[酷酷文字效果：SpaceTypeGenerator](https://spacetypegenerator.com/)
[一但開始工作，星期五就變得很重要](https://www.workweek.info/)
[cspan-5 by Sam Lavigne](https://lav.io/projects/cspan-5/)
[Super Mario Clouds](https://youtu.be/fCmAD0TwGcQ?si=0rEAYOWfLSx12jF1)
[Cory Arcangel's Working on My Novel: 他把推特上面所有「我應該寫我的小說」的字眼的資料全部拉下來，寫成這本書](https://www.theparisreview.org/blog/2014/07/28/working-on-my-novel/)
[這個人不存在](https://thispersondoesnotexist.com/)

### 本週作業
[CodingTrain | Objects](https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/5-functions/1-basics)
[p5.js | Data Structure Garden](https://p5js.org/tutorials/data-structure-garden/)

:::

:::spoiler 2024-11-01 內容

### 上課提到的東西

- Net Art
- 互動性
- 數位媒介
- 去中心化
- 社群參與
- [Piet Mondrian](https://www.moma.org/collection/works/78682)
- [Dutch Artist - Rafaël Rozendaal](https://www.newrafael.com/space/)
- [I am very very sorry](https://iamveryverysorry.com/)
- [Aestheticecho](https://aestheticecho.com/)
- [slowempty.com](https://slowempty.com/)
- [Internet art web](https://www.newrafael.com/internet/)
- [英國塗鴉藝術家 Banksy](https://artouch.com/artcobooks/content-220316.html)
- [滑動滑鼠來打臉](https://eelslap.com/)
- [檢測今天是不是聖誕節的網站](https://isitchristmas.com/)
- [50 個奇怪網站](https://www.hostinger.com/tutorials/weird-websites)
- [Amazon 把10美分成很多小的部分，邀請大家畫->每個人都在做這件事情，但沒有人知道自己在幹嘛](https://vimeo.com/873019)

### 本週作業

[the codeing train: Arrays](https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/7-arrays/1-arrays)
[Animating with Media Objects(如何把影片與圖像植入到p5.js)](https://p5js.org/tutorials/animating-with-media-objects/)
[Web Design: Creating and Styling HTML](https://p5js.org/tutorials/creating-styling-html/)
[Web Design: Loading and Selecting Fonts](https://p5js.org/tutorials/loading-and-selecting-fonts/)
[Web Design: Responding to Inputs](https://p5js.org/tutorials/responding-to-inputs/)
:::

:::spoiler 2024-11-08 內容
## 2024-11-08
下週五 11/15，老師會提早半小時離開，有需要找助教討論的人可以利用那 30 分鐘。

### 課程內容

[Yugo Nakamura 中村勇吾](tps://designcommittee.jp/member/nakamura_yugo.html)
[Taku Satoh 佐藤卓](https://www.wowlavie.com/article/ae2300042)

### HW
[OPTIONAL | Creating and Styling HTML](https://p5js.org/tutorials/creating-styling-html/)

:::

:::spoiler 2024-11-15 內容

## 2024-11-15
[Designing Interactions | Bill Moggridge](https://www.books.com.tw/products/F010746055)
[佐藤可士和](https://www.tdri.org.tw/16768/)
[Haptic | 原研哉](https://www.mottimes.com/article/detail/5234)

:::

## 2024-11-22

### 課堂上講到的東西

#### pppp


Plausible futures: Possibilities that could happen given the bounds of uncertainty
Probable futures: Scenarios and possibilities that are likely to happen
Possible futures: The widest range of scenarios, including all possibilities
Preferred future: The vision we have for possibilities we want to see come true

令人信服的可能 vs 不令人信服的可能

[講到這個連結裡面的東西](https://medium.com/@winshanokprasith/speculative-design-thinking-about-the-future-in-times-of-uncertainty-b593e2ca11b6)

[如果你把你的寵物當做醫療器材](https://www.cohenvanbalen.com/work/life-support#)

[當一隻山羊](https://www.thomasthwaites.com/a-holiday-from-being-human-goatman/)

## Notification

:::spoiler 已經過期的公告

### Next Class

Next class 10/11 will start at 9:00 AM and will be live. Teacher will provide the google meet link in LINE.

### Proposal of Web Development Final Project

#### 執行原則

每組人數: 1 至 3 人
每組提案時間: 3 - 5 分鐘
時間: 2024/10/18

#### 達成條件

1. 文件
- 1 至 2 頁, pdf 文件
- FileName: 主題名稱
- 內容
- 主題：清楚說明你的網頁設計主題。
- 論述：闡述你們的設計概念與目標，說明為什麼選擇這個主題及其價值。
- 視覺風格版（Moodboard）：以圖片展示設計的風格方向，呈現你們期望傳達的視覺感受。
- 上傳至：https://drive.google.com/drive/folders/1ZdbT7tzgGo4Ky3TIdiDxh8qnd-ETqaN1?usp=sharing
2. 前提
- 目標無論是在程式實作還是設計上，都在你們的能力範圍內，可以順利完成。
- 最終作品必須是能運作的網頁設計

#### English

Web Development Final Project Proposal Announcement

The proposal presentation will take place on Friday, October 18, 2024. Each group may consist of 1 to 3 members. Please prepare a 1 to 2-page presentation in PDF format and upload it to the Google Drive link below.

The proposal topic is your final web design project, which must include the following three components:

Topic: Clearly state your web design topic.
Discussion: Elaborate on your design concept and goals, explaining why you chose this topic and its value.
Visual Moodboard: Use images to showcase the design direction, conveying the visual feel you wish to express.
Each group's presentation time will be approximately 3 to 5 minutes, and the specific duration will be adjusted based on the number of groups. Please ensure that the selected topic is feasible within your capabilities, both technically and design-wise, so that you can successfully complete it.

The final project must be a functioning web design.

Google Drive link: https://drive.google.com/drive/folders/1ZdbT7tzgGo4Ky3TIdiDxh8qnd-ETqaN1?usp=sharing

#### 中文原始描述

Web Development Final Project Proposal 公告

提案時間為 2024 年 10 月 18 日（週五），每組成員可為 1 至 3 人，請準備 1 至 2 頁的簡報，內容需以 PDF 格式呈現，並上傳至下面的 Google Drive。
提案主題為期末的網頁設計專案，內容需包含以下三個部分：
1. 主題：清楚說明你的網頁設計主題。
2. 論述：闡述你們的設計概念與目標，說明為什麼選擇這個主題及其價值。
3. 視覺風格版（Moodboard）：以圖片展示設計的風格方向，呈現你們期望傳達的視覺感受。
每組提案時間大約為 3 至 5 分鐘，具體時長將視組別數量進行調整。請務必確保選定的主題，無論是在程式實作還是設計上，都在你們的能力範圍內，可以順利完成。
最終作品必須是能運作的網頁設計。

Google Drive連結：https://drive.google.com/drive/folders/1ZdbT7tzgGo4Ky3TIdiDxh8qnd-ETqaN1?usp=sharing

:::

### Absence Policy Reminder

Any unexcused absences will be considered as cut classes, leading to a one-grade drop in your final score (e.g., A to A-).
Kindly request absences in advance or reach out if you have any special circumstances.

## 其他

[對 Live Code 有興趣的人，可以看這個網站](https://blog.toplap.org/add-node)
[Strudel REPL 官方網站](https://strudel.cc/)