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 表格背景顏色的設計方式應該有所認識，不過要從哪裡挑選不同的顏色呢？本站提供的《色碼表》有超過四百種以上的十六進位色碼，讓您輕鬆選擇不同的顏色，來設計表格的背景顏色。

2022年2月28日星期一

Google雲端硬碟架設HTML網頁空間

利用 Google Drive 雲端硬碟架設 HTML 網頁 | 操作教學

DriveToWeb

支援空間：Google Drive、Microsoft One Drive

網站連結：Google 雲端硬碟架設網頁空間

步驟一：登入Google雲端硬碟並建立一個存放網頁的資料夾，點擊《新增》→ 《資料夾》。P.S 雲端資料夾名稱使用者可自行定義，範例將其命名為 Myweb。

步驟二：將網頁的HTML & JavaScript…等檔案上傳至此雲端資料夾內，並對資料夾點擊滑鼠右鍵，接著在出現的選單中選擇「共用」→「變更」。

步驟三：將權限由「限制」更改為「知道連結的使用者」。

步驟四：前往 DriveToWeb 並選擇 Google Driver 或 One Driver 的雲端硬碟來當作網頁空間使用。以下將使用 Google Drive 雲端空間來當作教學範例。

步驟五：登入剛剛有上傳 HTML 網頁資料到雲端的 Google 帳號。

步驟六：點擊「允許」並授權給 DriveToWeb。

步驟七：完成授權後就能在頁面中看到網頁空間的超連結網址，只要將這個連結分享給親朋好友或客戶，他們就可以看到剛剛您所製作的網頁了。備註：如果網頁中沒有出現超連結，有可能是您雲端共用的權限沒有開啟成功，請返回到第二步驟來開啟共用。

觀看利用雲端硬碟架設的網頁

前往觀看 → 架設HTML網站使用Google Drive雲端硬碟

2022年2月23日星期三

什麼是 HTML5?

一、什麼是 HTML5?

詳細說明網址：https://www.fooish.com/html/what-is-html5.html

二、如何在瀏覽器帳中查看網頁的HTML原始碼？

原文網址：https://kknews.cc/code/25ok2oy.html

HTML5 是 HTML 最新的修訂版本，由全球資訊網協會 (W3C) 於 2014 年 10 月完成標準制定，HTML5 在目前主流的瀏覽器幾乎都有支援了。

常聽到的 HTML5 其實是廣義的包括 HTML、JavaScript 和 CSS 在內的一套新技術組合！

HTML5 帶來很多新的應用：

新的 HTML 語意標籤 (semantic elements)，讓網頁建立更語意化的結構，幫助搜尋引擎和開發者可以更清楚的了解網頁結構，例如 <section>、<article>、<nav>、<header>、<footer>、<main>、<aside> 這些新標籤。
過去網頁常有的功能也有新的 HTML 標籤對應這些功能，讓瀏覽器原生 (native) 就直接支援這些功能，像是影音播放的 <audio> 和 <video>；更豐富的表單應用 - 驗證 API 及新增 <input> 的輸入類型如 tel, number, date, time 等。
圖形處理方面也有新的 API，例如 <canvas>，讓瀏覽器可以支援像遊戲開發需求的複雜視覺和互動效果。
更好的離線 (offline) 支援，像是 Application Cache 和 online / offline events 等。
更好的瀏覽器本地資料存儲機制，像是 Web Storage API 和 IndexedDB API 等。
新的 DOM 功能，新的 getElementsByClassName、瀏覽器原生支援的拖曳功能 (drag and drop) 等。

HTML5 還有很多面向的新功能，這邊只給大家一個大方向概念，本篇文章目的並不是要詳細介紹完整的 HTML5 喔。

訂閱：文章 (Atom)

經典背景音樂

2022年12月12日星期一

學校子網頁管理

2022年3月13日星期日

雲端資源工具平台的應用

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

2022年3月12日星期六

如何替 HTML DIV 增加背景顏色

CSS3 opacity 屬性 (透明效果)

HTML Table 表格背景顏色

2022年2月28日星期一

Google雲端硬碟架設HTML網頁空間

2022年2月23日星期三

什麼是 HTML5?

一、什麼是 HTML5?

著作人

經典背景音樂

2022年12月12日 星期一

2022年3月13日 星期日

2022年3月12日 星期六

2022年2月28日 星期一

2022年2月23日 星期三

一、什麼是 HTML5?

2022年12月12日星期一

2022年3月13日星期日

2022年3月12日星期六

2022年2月28日星期一

2022年2月23日星期三