<img src="https://i.imgur.com/x5KhJ0q.jpg" style="background:none; border:none; box-shadow:none;" width="300px"> <audio src="https://open.spotify.com/embed/track/7hWkpX57FVw6VfpWG6VucC" autoplay> 遇到不支援的瀏覽器會出現這行字 </audio> <h2>Unleash the power!</h2> <!-- Put the link to this slide here so people can follow --> <small>slide:https://hackmd.io/@sarahcheng/%E8%B6%85%E5%A5%BD%E7%94%A8%E5%85%B1%E7%B7%A8#/</small> 電遊學程 程鈺涵 Sarah 🐘Vegelephant 🐘 蔬食-環保-愛地球 ---- 學習筆記,班級互動,演講共筆 筆電x手機x平板 ---- <!-- .slide: data-transition="fade" --> OUTLINE - <span class="fragment highlight-blue">HACKMD</span> - <strong class="fragment highlight-red">Notion</strong> - <span class="fragment highlight-green">Slido</span> --- ## WHY * Realtime<!-- .element: class="fragment fade-in-then-semi-out"--> * collaborative <!-- .element: class="fragment fade-in-then-semi-out"--> * markdown notes <!-- .element: class="fragment fade-in-then-semi-out"--> * on all platforms <!-- .element: class="fragment fade-in-then-semi-out"--> * ... and more<!-- .element: class="fragment"--> ---- ## [HACKMD](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw) - [簡報模式](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-slide-deck-tw#%E8%AC%9B%E8%80%85%E6%A8%A1%E5%BC%8F) - [書本模式](https://hackmd.io/@sarahcheng/book) :heart: - 編輯模式 :cat: Note: 可以有備忘搞 --- ### Usage 簡易<span style="color:yellow">優雅</span>共享 ---- <!-- .slide: data-transition="concave" --> #### 架構圖 ```graphviz digraph { compound=true rankdir=RL graph [ fontname="Source Sans Pro", fontsize=20 ]; node [ fontname="Source Sans Pro", fontsize=18]; edge [ fontname="Source Sans Pro", fontsize=12 ]; subgraph core { c [label="Hackmd-it \ncore"] [shape=box] } c -> sync [ltail=session lhead=session] subgraph cluster1 { concentrate=true a [label="Text source\nGithub, Gitlab, ..."] [shape=box] b [label="HackMD Editor"] [shape=box] sync [label="sync" shape=plaintext ] b -> sync [dir="both"] sync -> a [dir="both"] label="An edit session" } } ``` ---- <!-- .slide: data-background="#2479B6" --> #### PDF {%pdf https://docs.arduino.cc/static/ef764280ab465fc515a92e515b02545f/A000066-datasheet.pdf %} > 請問第2頁的ATMega328P和 ATMega16U2差異 [name=sarah] ---- <!-- .slide: data-transition="concave" --> #### 影片 版本同步 {%youtube EOAPMhaCtuw %} - :100: :muscle: :tada: ---- <!-- .slide: data-transition="concave" --> <!-- .slide: data-background-iframe="https://www.youtube.com/embed/-Q0q38Pjkn0" data-background-interactive="true" --> ---- <!-- .slide: data-transition="concave" --> #### 表格 | 開放 | | | | | 限制 | | :----: | ---- | ---- | ---- | ---- | :----: | | <!-- .element: class="fragment"--> | <!-- .element: class="fragment"--> | <!-- .element: class="fragment"--> | <!-- .element: class="fragment"--> | <!-- .element: class="fragment"--> | <!-- .element: class="fragment"--> | ---- <!-- .slide: data-transition="convex" --> #### 程式碼 <style> code.blue { color: #337AB7 !important; } code.orange { color: #F7A004 !important; } </style> - <code class="orange">嵌入</code>: Register event listener - <code class="blue">sendMessage('event')</code>: Trigger event ```typescript // in background script const fakeLogin = async () => true channel.answer('isLogin', async () => { return await fakeLogin() }) ``` ---- <!-- .slide: data-transition="concave data-background="#BF3819" --> #### 流程圖 ```flow st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com para=>parallel: parallel tasks io=>inputoutput: catch something... st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 ``` ---- <!-- .slide: data-background="#2479B6" --> ```mermaid gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d ``` ---- ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` - [用文字畫圖](http://mermaid-js.github.io/mermaid/#/) ---- <!-- .slide: class="principles" data-background="#616E77" data-transition="slide" data-background-transition="none"--> #### 樂譜 ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 ccc| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` --- <!-- .slide: data-transition="convex" --> ### 版控  ---- <!-- .slide: data-transition="convex" -->  --- Yourturn: https://hackmd.io/@sarahcheng/yourturn/edit  --- # Notion 圖像介面筆記 筆電x手機x平板 ---- <!-- .slide: data-transition="zoom-in" --> {%youtube Q_PfYlAtvHc %} ---- <!-- .slide: data-transition="zoom-out" --> 為什麼用Notion?   ---- <!-- .slide: data-transition="convex" --> -  Note: 學生繳交作業方便,老師方便批改後打成績,學生隨時掌握自己的學期成績,較隱私(可只開放給老師),方便知道學生已補交 ---- <!-- .slide: data-transition="concave" --> 可以收到筆記被更新的通知  --- # Slido  ---- 免費版本只能設定3個民調,1個腦力激盪  ---- <!-- .slide: data-transition="convex" --> * 手機畫面  [簡爆DEMO](https://docs.google.com/presentation/d/15cdAPI_A2XZfOjEgm9wooCe7yZAKaoTUdiHEV5Mui7U/edit?usp=sharing) Note: 像kahoot一樣 ---- 喔不..沒有口袋怎麼辦  ---- [讓 slido 自動以發問者分類問題](https://eri24816.github.io/Blog/2021/11/12/slido-%E8%87%AA%E5%8B%95%E6%95%B4%E7%90%86%E6%AF%8F%E5%80%8B%E7%99%BC%E5%95%8F%E8%80%85%E7%9A%84%E5%95%8F%E9%A1%8C.html)  參考資料- https://hackmd.io/yBgAAHfZQXyLUq2py_nTOA?edit