經典背景音樂

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-教育系統平台

教育雲

新北親師生平台

新北市雲端知識博物館

各縣市國教輔導團

宜蘭教網部落格

台南班網

均一教育平台

學習吧

DeltaMOOCx

發現美麗新世界 - 國中線上教學計畫

心怡老師理化錄影檔

FunLearn

PHET自由線上物理化學(錄影教學)

Flash 互動教具研究室

資訊科技

新北資訊教育入口網

新北教師網路學院

新北呂聰賢老師

新北E學園自由軟體

高雄微學習

其他雲端應用

Weebly


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 區塊的語法
<div id="" class="" style="">區塊內容</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 屬性 (透明效果)

 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 屬性的不透明度處理
測試 CSS3 opacity 屬性的不透明度處理
測試 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 表格背景顏色的設計方式應該有所認識,不過要從哪裡挑選不同的顏色呢?本站提供的《色碼表》有超過四百種以上的十六進位色碼,讓您輕鬆選擇不同的顏色,來設計表格的背景顏色。