Rundown1091

jQuery overall

• jQuery的三個部件, e.g., media query

  • 用jQuery取得頁面元素的特徵

  • 用jQuery修改頁面元素

  • （視需要）用Listener監聽頁面的變化

• 用if-else監測捲動是否超過指定位置，

• 將捲動換算為操作元素的數據，數學！數學！數學 e.g., status bar, move object, move div horizontally

• 用class來反覆運用jQuery的Code

• 用data attribute結合class來指定不同參數給不同物件

0106

• 3_7_bs_scrollspy.html modified from the bootstrap scrollspy example

• 7_4_generating.html

• 5_6_scroll_change_image.html

• 5_7_scroll_change_imgs_sticky_top.html

Call-for-help

若到報告前還有問題，請跟老師約下面時間

• 01/08 11:00-12:30 14:30-15:00

• 01/11 12:30-13:20

• 01/12 10:30-14:20

Demo Day: DataRock

• 時間：1/14 THU 12:10~14:00 （每組至少留守一員進行海報說明）。

• 地點：社科院一樓川堂

• 餐點：12:10開始可領便當。

• 布展：11:00~12:00可以場佈，務必提早至報到處確認海報架位置。

• 製作：海報規格為寬60cm的直立Size，可用PPT或你熟悉的軟體製作，但要把檔案給影印店要給pdf檔

• 範本：為節省製作時間，可參考以下海報範本，注意要修改課名，字體需要自行轉為非襯線體海報會看得比較清楚https://www.dropbox.com/s/vuu41ld12jn9o8g/poster1081_web.pptx?dl=0
• 印刷：請至辛亥路後門外「華新影印社」輸出。華新已開好帳戶名稱為UFO-DSSI，或是報謝吉隆、謝舒凱、鄧志松三位老師名字即可。海報印製通常需要時間，建議最晚三天前01/11去印製，避免來不及。

• 展期：海報展期為1/14至1/20，1/20 12:00後可開始拆海報，如15:00前未拆，將由計畫辦公室協助拆除。

1230

• https://web.cw.com.tw/solar-2020/index.html
• 6_9_scroll_opacity1.html
• 6_9_scroll_opacity2.html
• 6_9_scroll_opacity3.html

1223

d3.js for map

• d3: scrolling map
• d3_3: areamap for population density
• d3_4: areamap for population density by index (Better))

Combinations

• 8_6 Parallax comprehensive
• 12_5 animate storytelling 5(Graphic Novel)
• 13_4 Scrolling to trigger animation from different directions: Comic players

1216

• Free digital storytelling tools

  • Knightlab: https://knightlab.northwestern.edu/ See 莫拉克十年：雨停之後，台灣日漸改變的臉 - 端傳媒
  • 《報導者》新聞小工具上線公測part 1：橫著滾吧照片！你的好故事可以有更多元的敘事選擇！
  • 《報導者》新聞小工具上線公測part 2：「大事記」圖表產生器你的好故事可以有更方便的敘事選擇！
  • 《報導者》新聞小工具上線公測part 3：左右互搏版型為了提升使用者體驗，報導者嘗試過不少以「圖」為主，以「文」為輔的說故事方式，最終收斂出「報導者／左右互搏版型」
• Parallax Scrolling by multiplying speed on scrolling (Using data- attribute)

  • 8_1 Using id to assign different speed
  • 8_1p Using id to assign different speed
  • 8_2 Using class and each to assign different speed
  • 8_3 Using data- to assign position
  • 8_4 Using data- to assign position and speed
  • 8_5 Parallax scrolling with a leading div
  • 8_6 Parallax comprehensive
  • 8_7 Parallax scrolling with vh
• Parallax Scrolling in a specific area: Detecting parent div (Using data- attribute)

  • 12_1 animate storytelling
  • 12_2 animate storytelling 2
  • 12_3 animate storytelling 3
  • 12_4 animate storytelling 4
  • 12_5 animate storytelling 5(Graphic Novel)
  • 12_6 animate storytelling 6 by transform?

1209

• Scroll to change (Review) (Slide) Web05. Scrolling

  • 6_1_scroll_statusbar.html
  • 6_2_scroll_move_horizontal.html (<-Assignment)
  • 6_3_scroll_move_horizontal_scroll.html
  • 6_3p_scroll_move_horizontal_scroll_with_banner.html
• Scroll to trigger (Using class, each, and this) (Slide) Web05. Scrolling

  • 5_2_scroll_trigger_to_animate_keyframe.html
  • 5_2p_scroll_trigger_animate_keyframe.html (Special case)
  • 5_3_scroll_trigger_animate_fullpage.html (Good example)
  • 5_4_scroll_trigger_section_mov.html (Optional)
  • 5_5_scroll_trigger_text_bg.html (New)
• Animating chart (Online): 用data attribute結合class來指定不同參數給不同物件

  • 7_1 Animating chart: the simplest method
  • 7_2 Animate_chart_keyframe
  • 7_3_animate_chart_js

1202

• Scroll to change (Online)

  • 6_4_scroll_change_img_array.html See https://theinitium.com/project/20190812-taiwan-morak-ten-years/ by scrollMagic
  • 6_5_scrollspy_div.html (Rarely used)
  • 6_6_scrollspy_waypoints.html (Rarely used)
  • 6_7_scroll_move_large_bg.html (New and under-constructed)

1125

• Next week

  • Speech by READr

  • Find a suitable large background image for http://bunkai-kei.com/special/Elect-LO-nica/
• Group Pitching: https://docs.google.com/spreadsheets/d/1LpGaK35lDxI1pzcNxb--rIAl7LZHMvBHfPzQhzCKcLY/edit?usp=sharing
• Scroll to change

  • 6_2p_scroll_move_horizontal.html
• The Color issues

1118

• Reminding

  • course webpage for scrolling control: https://p4css.github.io/webScroll/
  • 3 mins report about selected topic or skills - next week

• jquery and scrolling https://p4css.github.io/webScroll/
• Scroll to change

  • 6_1_scroll_statusbar.html
  • 6_1p_scroll_video.html
  • 6_2_scroll_move_horizontal.html
  • 6_2p_scroll_move_horizontal.html
  • 6_3_scroll_change_status_play_videos.html See NYT's https://www.nytimes.com/interactive/2015/10/11/us/politics/2016-presidential-election-super-pac-donors.html

1111

• Final project and jointed exhibition @01/14 11:45~14:00

  • Top-down

    • https://www.newsaward.org/previous
  • Bottom-up

    • Horizontal Parallax scrolling
    • Animated storytelling
    • Comic player
    • See Skills for more examples
• Bootstrap: background-attachment: fixed

  • 3_2 twofixed: Fixed background of two adjacent divs
  • 3_3 fix_content: Fixed background with content over it
  • 3_p1 thinking: long or fixed background
  • 3_4_fixed.html
• Bootstrap: sticky-top

  • 3_5_stickyTop_bs4_stickTop.html
  • 3_6_stickyTop_section_bs4.html
• jquery basic

  • Reviewing essential components of jquery (jquery basic).
  • 4_1_why_document_ready.html
  • 4_2_jquery_media_query.html
  • 4_2demo_query_media_query.html"
  • 4_3_stickyTop_bs_affix.html
  • 4_3p_stickyTop__bs_affix.html
  • 4_4_stickyTop_jquery_addClass.html
  • 4_4demo_sticky_top_jquery_addClass.html

1104

• Video Tutorial updated

  • Deployment: github.io Deployment
  • Bootstrap01-Get stared Bootstrap
• Student reports

• jquery basic
• CSS - Media Query

1028

• Student reports

• Deployment

1021

• Case Studies: TW cases
• Using Bootstrap
• Reminding case study report by group

1007

• Reviewing hand-painting assignments

• Announcing case study group report

• The gitbook: CSS - decoration Tips
• The gitbook: Bootstrap
• Case Studies: TW cases

0930

• The gitbook: HTML and CSS - basic
• 全球華文永續報導獎 2020獲獎結果 （恭喜Web108 蘇彥誠、邱怡瑄、劉潔三位同學獲得榮媒體獎首獎）
• Installing Chrome Extension Stylebot

Taiwan 2019 Storytelling - Student Ranking

得票數

Rank	Title	Votes	Shortlisted
1	端：莫拉克10年	20	V
2	DailyView: 疫情下的社群傳染病	20	2020
3	P#: 裸照外流之痛	16
4	CW: 數據模擬全境感染30天	14	V
5	UDN: 天亮之後	14
6	P#: 選票變現金	12
7	READr: 通往悲劇之路：南方澳跨港大橋如何坍塌	12
8	UDN: 如果海有你	12
9	UDN: 來不及說再見	11
10	CW: 決戰2020	10	V
11	READr: 智慧政府還是全民監控？數位身分證	10	V
12	UDN: 無效預算	8
13	AppleDaily: 黑暗裡的數位障礙	7
14	Lenz: 上市櫃公司薪資中位數	7	V
15	UDN: 隱形農業大軍	7
16	AppleDaily: 武漢肺炎全球數據比較	6
17	P#: 總統大選	6
18	UDN: 日本福島的重生	5
19	P#: 武漢肺炎戰役實錄	4
20	READr: 看得見的病毒：武漢肺炎假訊息	4
21	READr: 五千篇事實查核報告分析	4
22	UDN: 108課綱審查	1

Consensus matched

Consensus	Name	Matches
1	蔡葉蓉	5
2	林綺薇	5
3	陸展	5
4	吳郁	5
5	周依蝶	5

Shortlist matched

Shortlisted	Name	Matches
1	李永霖	5
2	林婷舒	4
3	劉珉妤	4