圖書館數位學習中心

2023年3月21日星期二

資二專題製作-物聯網

資處二專題製作週三第3、4節上課！

3/22第3節進度：
1、分組組合蜘蛛機器人
2、安裝uPyCraft IDE，撰寫程式
下載uPyCraft_V0.30.exe：https://github.com/DFRobot/uPyCraft/blob/master/uPyCraft_V0.30.exe

3、下載ESP8266韌體
http://webftp.nkut.edu.tw/~091338/esp8266

4、開始撰寫物聯網Python程控
物聯網程控應用：(蜘蛛機人、泡泡水車)
注意：
(2)serial port, 可至裝置管理員，檢視ch340是否有正常驅動，若無請安裝CH340晶片程式
https://www.taiwaniot.com.tw/%E6%8A%80%E8%A1%93%E6%96%87%E4%BB%B6/%E5%A6%82%E4%BD%95%E5%AE%89%E8%A3%9Dch340%E6%99%B6%E7%89%87%E7%A8%8B%E5%BC%8F/
燒錄下列3支程式至ESP8266
1、點選及下載umqttsimple.py,

2 、點選及下載boot.py

3、點選及下載main.py,

第4節進度：
1、MQTT協定物聯網教學影片，請點選如下附件連結！
　 2 、MQTT協定物聯網實測，請點選如下附件連結！
　　　說明：
(1)可安裝電腦版與手機版APP
(2) MQTT物聯網課程：泡泡水車與蜘蛛機器人　　　
遠端控制網址：http://www.hivemq.com/demos/websocket-client/

broker.hivemq.com(可不改)
8000
連線Connect(注意綠燈亮)
Topic 輸入訊息：notification， Mwssages輸入訊息： on(開啟1個馬達) on2(開啟另1個馬達 ) 或 down(關閉)
按Publish 送出訊息

2022年12月12日星期一

2022年3月13日星期日

雲端資源工具平台的應用

擁抱改變-觀念轉換

■數位移民

「數位移民」使用email及電話，使用文字溝通、喜歡人群，雖然也使用網路，但大部分接觸的都還是實體。

■數位原住民

「數位原住民」出生年代大致以1980年代為分水嶺，一出生就活在有電腦、有網路的環境中，學習用google .交友用facebook....，他們有新的思維及行為模式，成為新一代的「人種」，跟屬於「數位移民」的老師和父母，有著不一樣的價值觀和道德觀。當「數位移民」的老師遇上「數位原住民」的學生，如何把網路科技運用在教育？要考驗老師是否能熱情擁抱改變

■數位工具的迷思

「我認為我們不能依靠任何數位、網路工具」，或者說，不是我（們）依靠數位工具，而是「數位工具依靠我（們）」。是我們賦予這些工具靈魂，讓他們成為實用，沒有我（們），這些數位工具完全沒有意義，但沒有這些（某些）工具，我（們）依然可以找到完成事情的方法。

工具，用的順手就好，工具的選擇並非是絕對的，工具只是工具，其作用只是輔助，瞭解自己的需求，選擇用的順手才是該注意的，因為並不是是每個人拿到神器都可有如神助，講者千萬不要有工具迷思。

引用資料

數位時代 http://www.bnext.com.tw/article/view/id/31547

網路時代作業系統-瀏覽器

■瀏覽器的發展歷史及趨勢

http://technews.tw/2016/05/07/browser-wars/

http://evolutionofweb.appspot.com/

雲端

■雲端應用程式

實作1-課本範例-雲端應用程式

線上轉檔

將PDF轉成DOCX檔案格式：https://www.online-convert.com/

影音轉檔：https://www.online-convert.com/

線上掃毒：

Google公司旗下的掃毒服務網站：https://www.virustotal.com/gui/home/upload

Hybrid Analysis：https://www.hybrid-analysis.com/

線上繪圖：

(1)draw.io：https://app.diagrams.net/

(2)Sketchpad：https://sketch.io/sketchpad/

線上排版：

(1)FotoJet：https://www.fotojet.com/tw/

(2)Canva：https://www.canva.com/zh_tw/create/posters/

實作2-雲端應用程式-影像處理

http://xiuxiu.web.meitu.com/

http://ms2.ctjh.ntpc.edu.tw/~luti/104-2-mulmedia-week009-1.htm

實作3-雲端應用程式-影音處理

https://www.youtube.com/?hl=zh-TW&gl=TW

http://kej.tw/flvretriever/

http://www.youtube-mp3.org/zh

https://support.google.com/youtube/answer/183851?hl=zh-Hant

實作4-其他雲端應用程式

免費螢幕錄影神器！推薦這款比軟體好用 Chrome 套件

比軟體更強悍 33 種文書繪圖免費線上工具

雲端運算概念

■雲端運算的意義

"Cloud"是Ramnath K. Chellappa教授以抽象、簡單的方式比喻複雜的網路架構。電腦流程圖中，網際網路常以雲狀圖案來表示，因此形象類比演推為雲端運算。究竟什麼是雲端運算技術？「簡單的說，就是把所有的資料全部丟到網路上處理！」「雲」即是網際網路（Interent）；「端」則是指使用者端（Client）。

■雲端運算的特性

Google認為雲端運算具有以下的特性：

數據存在雲端：資料不放在單機。

軟體存在雲端：軟體的提供方式改變，連上internet即可使用，例如：Google Doc。

基於公開的標準協定：Open source project 例如：Linux、Ajax、LAMP。

任何裝置都可以連上雲端：例如：Mobile Device, Cellular phone、Pad、Notebook。

■雲端優點

同步.合作.分享

■雲端安全性

資料引用ICST

■參考網站

實作5-資訊安全概論

教育雲

■教育雲作法

「教育雲」的作法，是建立擴展性的雲端運算技術平台，初步做法是將課程、教學和評量相關資料存放在雲端，然後透過雲端存取技術，經網路連接到教室內電腦的一套系統，藉助雲端桌面服務的方式，協助教師教學和學生學習。(吳清山教授)

透過教育雲的使用，將會逐步朝向三端發展—即遠端教學、雲端資源與尖端學習。

■教育雲於教學現場之使用

教學者和學習者都使用終端設備，包括平板電腦和電子書包(或如即時反饋器、個人學習裝置等)；而雲的部分則負責連結學習者於不同時間點(包括課前、中、後)所需的學習素材與所產生的學習紀錄，以及教學者的教學內容。

教育雲於課程進行時之使用，從教學的角度來看，教育雲在課前可讓老師獲取教學所需資源。

行動學習

■行動學習意義

■行動學習目的

學的有動機
學的有興趣
學的有效率
學的有成效
願意花時間去學習

各種雲端服務

實作6-教育系統平台

資訊科技

其他雲端應用

2022年3月12日星期六

如何替 HTML DIV 增加背景顏色

HTML DIV 區塊除了可以用來排板之外，當然還可以用來美化，只要透過簡單的 CSS 樣式設定就能輕鬆變化出許多好看風格的 DIV 區塊，今天我們要來介紹如何替 HTML DIV 增加背景顏色，在這裡我們會使用到的是 CSS 的 background-color 屬性，這個屬性是 CSS 用來設計或修改網頁本身或網頁元素背景顏色用的標準屬性，先來看看基本的語法。

CSS background-color 屬性語法

background-color: 顏色參數;

其實 background-color 使用方式真的非常簡單，只需要填入想要的顏色參數就能讓網頁元素變更背景顏色，這裡的顏色參數可以是顏色的英文名稱、十六進位的色碼或 RGB 色碼，在這裡我們推薦使用十六進位的色碼，因為操作簡單且顏色變化豐富，想要隨時修改也很便利，Wibibi 提供的網頁色碼表查詢功能很容易上手，網址在這：色碼表 - Wibibi。

再來複習一下 HTML DIV 區塊的語法

有了以上的概念，只要把 background-color 屬性與 HTML DIV 區塊兩者融合在一起就能創造出替 HTML DIV 增加背景顏色的效果。

如何替 HTML DIV 增加背景顏色範例

<div style="background-color:purple;">紫色效果的 DIV 背景顏色</div>
<div style="background-color:#FFFF00;">黃色效果的 DIV 背景顏色</div>
<div style="background-color:#00FF00;">綠色效果的 DIV 背景顏色</div>

範例的實際效果

紫色效果的 DIV 背景顏色

黃色效果的 DIV 背景顏色

綠色效果的 DIV 背景顏色

我們寫了三個簡單的範例，全部都使用了 background-color 的效果，差別只在於選用不同的顏色參數，例如紫色（purple）、黃色（#FFFF00）、綠色（#00FF00），其中紫色是直接用英文單字，黃色與綠色都是使用十六進位的色碼來呈現，你也可以自己嘗試用不同的色碼來修改出自己想要的顏色，今天的主題＂如何替 HTML DIV 增加背景顏色＂就介紹到這邊。

延伸閱讀

CSS3 opacity 屬性的功能是用來控制網頁元素的透明效果（調整不透明度），早期網頁設計常常會用到許多的透明效果，通常都是透過 png 圖層來製作透明的感覺，現在網頁設計師可以使用 CSS3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整，CSS3 opacity 屬性的語法非常簡單，只需要透過數字的調整，就能呈現出不同的不透明度，進而設計出相當具有現代感的網頁風格，可應用在網頁圖片、DIV 區塊、span 區域、Table 表格 ... 等元素，所有新版的主流瀏覽器都支援 CSS3 opacity 屬性的效果。

CSS3 opacity 屬性基本語法

opacity: 不透明度;

CSS3 opacity 屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

CSS3 opacity 屬性實際範例

<div style="padding:10px;background-color:green;opacity:0.1;">
測試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.5;">
測試 CSS3 opacity 屬性的不透明度處理
</div>
<div style="padding:10px;background-color:green;opacity:0.8;">
測試 CSS3 opacity 屬性的不透明度處理
</div>

範例的輸出效果

測試 CSS3 opacity 屬性的不透明度處理

範例共準備了三個加入 opacity 效果的 DIV 區塊，各位可以注意到從最上面開始的第一個區塊，不透明度為 0.1（opacity:0.1）所以整個區塊變成幾乎快看不到顏色與文字，第二個區塊不透明度設為 0.5（opacity:0.5），所以比第一個區塊清楚多了，第三個區塊再度降低不透明度到 0.8，文字與背景顏色都越更加明顯，這就是 CSS3 opacity 屬性的實際效果，由範例可以很清楚的看到，一個 DIV 區塊內的文字內容與背景顏色（background-color）都會受到 opacity 屬性的不透明度影響。

補充：目前新版的主流瀏覽器均有支援 CSS3 opacity 屬性，但需要注意的是 IE8 以即更早版本的 IE 瀏覽器必須使用替代語法來實做，所謂的替代語法是利用 filter 屬性，寫法如「filter:Alpha(opacity=50);」，效果等於「opacity:0.5」。

➤將 CSS3 opacity 不透明度效果應用在圖片上的技巧，請參閱：CSS3 Image Opacity 圖片透明效果。

更多 CSS3 設計技巧

HTML Table 表格背景顏色

HTML Table 表格背景顏色可以用 HTML 傳統的 bgcolor 來設計，有興趣的讀者請參閱《HTML 背景顏色》內容的介紹，另外一種現在比較流行的表格背景顏色設計方式，是採用 CSS 的 background-color 屬性來設計，用法與傳統的 HTML bgcolor 其實很類似，而且可以與整體 css 語法有更好的整合度，新一代的網頁設計主流，為了讓各位能夠看到 HTML bgcolor 的用法以及 CSS background-color 的設計方式，本篇內容將使用這兩種技巧分別做為範例，替 HTML 設計表格背景顏色，若您未來要使用 HTML5 做網頁設計，建議使用 CSS 語法。

範例一、用 HTML bgcolor 設計表格背景顏色

<table bgcolor="black" cellpadding="5" border="0">
<tr>
　<td bgcolor="red">紅色的表格欄位背景顏色</td>
　<td bgcolor="yellow">黃色的表格欄位背景顏色</td>
　<td bgcolor="blue">藍色的表格欄位背景顏色</td>
</tr>
</table>

呈現結果

紅色的表格欄位背景顏色

黃色的表格欄位背景顏色

藍色的表格欄位背景顏色

範例一的表格開頭 table 標籤內使用了「bgcolor="black"」這樣的寫法，代表整個表格的背景顏色都是黑色，那為什麼三個欄位的背景顏色都不一樣呢？因為範例中的每個欄位（td）也都使用了 bgcolor 的背景顏色屬性，並分別設計了不同的顏色，所以最終的呈現效果就會看到像這樣有黑框線的表格，如果欄位沒有使用 bgcolor 的話，就會整個都是黑色的一塊，因為表格背景顏色是黑色的。

備註、表格設計基礎語法請參閱：HTML table 表格。

範例二、用 css background-color 設計表格背景顏色

<table style="background-color:black;" cellpadding="5" border="0">
<tr>
　<td style="background-color:red">紅色的表格欄位背景顏色</td>
　<td style="background-color:yellow">黃色的表格欄位背景顏色</td>
　<td style="background-color:blue">藍色的表格欄位背景顏色</td>
</tr>
</table>

呈現結果

紅色的表格欄位背景顏色

黃色的表格欄位背景顏色

藍色的表格欄位背景顏色

範例二的表格呈現效果與範例一完全一樣，但語法已經改用 CSS 的 background-color 來設計，範例中的程式碼 style 開始的地方就是 CSS 的語法宣告，其他的部分都與範例一相同，若想進一步研究 CSS 的背景顏色或背景圖片設計方式，請參閱這兩篇。

看完以上兩個範例，對於 HTML 表格背景顏色的設計方式應該有所認識，不過要從哪裡挑選不同的顏色呢？本站提供的《色碼表》有超過四百種以上的十六進位色碼，讓您輕鬆選擇不同的顏色，來設計表格的背景顏色。