29 views
<style> .main{ } .main img{ border-radius:10px; } .main h1{ text-align: center; border: none; color:4B4B4B; letter-spacing: 3px; } .main h6{ text-align:right; color:#F4AA14; font-size:18px; } .main code{ background-color:#FFF0D1; padding: 8px 10px; border-radius: 20px; margin-right:7px; } .main h2{ background-color:#0B8D97; color:#fff; width: max-content; padding: 7px 25px 7px 17px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; border-bottom: none; margin-top:46px; margin-bottom: 25px; } .main h2 img{ padding-bottom: 4px; border-radius:0; } .main p,li{ font-size: 18px; line-height: 29px; letter-spacing: 0.15em; color:#525252; } .main .result{ background-color:#0B8D97; padding:0.8rem 1rem 1rem 1rem; border-radius: 10px; } .main .result h3{ text-align:center; color:#fff; margin-bottom:3rem; } .main .result h3 img{ margin-bottom:0.5rem } .main .result .pic img{ border: 5px solid #FFFFFF; } .main .pic{ text-align:center; width: 84%; margin: auto; margin-top: 2rem; } .pic p{ color:#fff; text-align:left; font-size:1.8rem; line-height:4rem } </style> <div class="main"> ![](/uploads/upload_46c4005a8d54f3ab8926d4361d9bf53d.png) # 網頁技術的逆襲 ###### `初階` 2 小時 ## ![](/uploads/upload_65f1b457e95d6f8fc94beeeaa45d15e7.svg) 課程目的 你知道嗎?只要打開網頁,就可以用即時通跟家裡的電器聊天! 你知道嗎?只要用門禁卡或悠遊卡,就可以控制 Youtube 影片! 你知道嗎?只要在網頁前面穿紅衣服,紅色的電燈就會亮起! 也許你覺得不可思議,但是當網頁技術開始逆襲螢幕外的世界, 只要會做網頁 ( 就算不會寫程式 ),透過 Webduino,就能輕鬆成為物聯網的高手高高手! ## ![](/uploads/upload_549a9523108383e3c48e23dd52a8ad6c.svg) 課程目標 十二月份的 Webduino 社團活動,將會帶領大家參與一場互動設計的饗宴,實際體驗「語音聲控」、「聊天室」、「影像追蹤」、「RFID」...等各種新穎的控制方法,不論是個人開發、學生專題、裝置與互動藝術創作, 透過這次的活動課程,Webduino 能讓你認識用網頁技術實現互動設計的妙方,能幫你輕鬆實現不可能的夢想,更能燃燒埋藏在你心中的創客小宇宙!透過網頁技術的超強逆襲,寫下你我極速實現創意的偉大傳奇! ## ![](/uploads/upload_76d8af8406b9c435bc83c72c5e5cdab1.svg) 課程內容 1. 簡介 - 網頁技術與互動設計發展的糾葛 1. 語音聲控 1. 影像追蹤 1. 即時通訊 1. 超音波互動 1. RFID ( RFID 是一種無線通訊技術,常見於悠遊卡、門禁卡 ) 1. 真正的「多人」超級瑪莉 <div class="result"> ### ![](/uploads/upload_1a73c2d77753895360c738bfc31b8c16.svg) 成果展示 <div class="pic"> ![](/uploads/upload_3b309a4978ed8c3e48ba90d0a5c9b8a8.png) </div> <div class="pic"> ![](/uploads/upload_b697745e387a2eb9a206aa0c17c0602c.png) </div> </div>