檢視教育再公共化聯盟/實習/新手課表的原始碼

[[分類:教育再公共化聯盟]]
#自備資料儲存空間
#*Nas：<br/>網路附加儲存是一種用於在區域網內共享資料的裝置。它通常以硬碟驅動器的形式提供儲存空間，並透過網路連接與其他裝置通訊。NAS可用於個人、家庭或企業，用於共享檔案、備份資料和多媒體串流等。
#*路由器：<br/>可串連多個裝置的網路設備，使它們可以共享網際網路連接，並根據特定規則將數據導引到正確的目的地。
#*異地備份：<br/>將數據備份至地理位置不同的儲存介質或伺服器，以保障在主要數據損毀或災害發生時能恢復資料。這有助於防止單一地點的風險。
#*不斷電系統(UPS)：<br/>用於在電源中斷或電壓異常時提供臨時電力供應，以保護連接的電子設備免受意外關機或數據損失的影響。
#*網路惡意攻擊
#MediaWiki與Html
#*MediaWiki：<br/>一種開源的維基軟體平台。它提供了一個協作編輯環境，使多個用戶可以共同編寫和編輯文章、文檔和內容，由維基社群志工組織在共同維護。
#*Html：<br/>一種開源的標記語言，用於建立網頁。它使用標籤(Tags)來描述網頁上的內容結構和元素，如文本、圖片、鏈接等。開發人員透過結合不同的標籤和屬性，可以創建出各種視覺和功能豐富的網頁，網頁瀏覽器解讀HTML代碼，將其轉換成人們能夠看到和互動的網頁，由「World Wide Web Consortium」(簡稱 W3C) 的社群組織在維護。
#*以上兩種程式語言皆為「Open source(開源)」是一種軟體開發和授權模式，意味著軟體的原始程式碼是公開的，任何人都可以查看、使用、修改和分發該程式碼。開源軟體的核心理念是促進協作、透明度和共享，以促進技術的發展和創新，且有龐大的志工和組織在維護。所以會有以下的優勢：
#*不斷頭
#*公益使用
#*維基共享資源-免費圖庫
#Html 與 SVG
#*原始碼-算圖-使用者介面
#*如何觀看原始碼
#*SVG的優點
#剪報系統 與 上傳檔案櫃使用說明

<table class=nicetable width=80%>
<tr><th></th><th>分類</th><th>功能</th></tr>
<tr><th>HTML</th><th>網頁工具</th><th>前端網頁設計</th></tr>
<tr><th>網路檔案櫃</th><th>圖牀</th><th>建目錄、放圖案、提供網址</th></tr>
<tr><th>MediaWiki</th><th>網頁工具</th><th>提供線上編輯的開源軟體</th></tr>
<tr><th>SVG</th><th>網頁工具</th><th>向量圖形的編輯</th></tr>
<tr><th>Etherpad</th><th>協作工具</th><th>線上即時文字協作開源軟體</th></tr>
<tr><th>Jit.si Meet</th><th>協作工具</th><th>線上視訊平台</th></tr>
<tr><th>MySQL</th><th>資料庫</th><th>儲存資料的開源資料庫系統</th></tr>
</table>

==HTML==
*http超文件傳輸協定(HyperText Transfer Protocol)，其文件格式稱為HTML(HyperText Markup Language)。
*HTML是一種超文本標記語言，用於建立網頁結構和內容的標記語言。使用不同的標籤、元素和樣式，可以組合成一個網頁。

===一、瀏覽器選擇與看原始碼===

====(一)Firefox瀏覽器====
*Mozilla Firefox為開源的網頁瀏覽器。
*其中的閱讀網頁原始碼功能較Google Chrome更為完整。
*電腦下載Firefox瀏覽器
**免安裝版本 https://www.azofreeware.com/2016/02/firefox-portable.html
**Windows版本 https://www.mozilla.org/zh-TW/firefox/new/
**Mac版本 https://www.mozilla.org/zh-TW/firefox/mac/

====(二)中文網址的編碼====
*網址列中的網址若為中文，複製在貼上會出現以%表示的編碼。
*每個中文字都會變成三個碼。

====(三)清除快取====
*當瀏覽器無法正常顯示出網頁最新的版本時，需要清除快取。
*清除快取的步驟如下：
=====Mozilla Firefox=====
#開啟 Firefox 瀏覽器。
#按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除最近的歷史記錄" 選項。
#在 "時間範圍" 選項中選擇 "全部"。
#勾選 "快取" 選項。
#點擊 "清除" 按鈕。
=====Microsoft Edge=====
#開啟 Edge 瀏覽器。
#按下 Ctrl + Shift + Delete 鍵，打開 "清除瀏覽數據" 選項。
#確保 "時間範圍" 選項設定為 "始終"。
#勾選 "快取數據和檔案" 選項。
#點擊 "清除" 按鈕，確認清除快取。
#請注意，不同的瀏覽器版本可能會有些許差異，但基本步驟應該是類似的。清除網頁快取後，您可能需要重新載入網頁才能看到最新的內容。
=====Google Chrome=====
#開啟 Chrome 瀏覽器。
#按下 Ctrl + Shift + Delete（Windows/Linux）或 Command + Shift + Delete（macOS），打開 "清除瀏覽數據" 選項。
#在彈出的視窗中，選擇要清除的時間範圍（建議選擇 "全部"）。
#勾選 "快取圖像和檔案" 選項。
#點擊 "清除數據" 按鈕，確認清除快取。

====(四)文書處理器====
*擇一下載適合編輯編碼的文書處理器。
*EmEditor
**免安裝版 https://www.azofreeware.com/2014/05/emeditor-1444.html
**Windows版本 https://www.emeditor.com/download/
*Notepad++
**免安裝版 https://www.azofreeware.com/2006/10/notepad-35.html
**Windows版本 https://notepad-plus-plus.org/downloads/

===二、標籤===
*HTML中所有的內容都被包在起始標籤(opening tag)與結束標籤(closing tag)之中。
*例如：
<pre>
<p>福留子孫</p>
</pre>
*「< p >」即為起始標籤；「< /p >」則為結束標籤。<br/>
*不同的標籤則對應到不同的顯示方式，HTML常見的標籤如下：
<pre>
html     超文件(HyperText Markup Language)
head     文件頭
meta     對自身的描述
title    標題
body     本文

h1~h6    標題一級到六級(head)
a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

style    宣告樣式(修飾一個超文件)
link     載入另一個檔，如 CSS 檔
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)
</pre>
HTML網頁由head、body標籤構成，如下所示：

<pre>

<!doctype html>

<html>
  <head>

    <meta charset="utf-8" /> <!-- 用於設置網頁的元數據，如編碼方式、作者、描述等 -->

    <title>網頁標題</title> <!-- 定義瀏覽器標籤中顯示的網頁標題 -->

    <style>

        <!-- 這裡是 CSS -->

    </style>

    <script>

        <!-- 這裡是 Java Script -->

    </script>

  </head>

  <body>

    <!-- 這裡是網頁的內容 -->

  </body>

</html>

</pre>

*head標籤用於放置與網頁相關的資源，並連結到外部資源的引用。這些資源不會在網頁上直接顯示給用戶，而是提供了網頁的描述和配置。
*body標籤用於放置實際顯示在網頁上的內容，這些內容將被瀏覽器解析和顯示給用戶。包括文本、圖片、影片、超連結、表格、表單等。

===三、屬性===

*HTML不同的標籤中可以加入不同的屬性，提供額外的資訊。
*例如：
<pre>
<a href="http://well-being-ng.net/">福留子孫超連結</a>
</pre>
*「href」即為a的屬性，提供連結的資訊。<br/>
*屬性名稱後應接著「=」，並且屬性值應使用引號包覆。
*不同的標籤有不同的屬性可以使用，但有些屬性可以通用，HTML常見的屬性如下：
<pre>
http-equiv= http項目
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度，可以用點(px,pt)或長度(cm)或百分比表示
height=   高度，可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。
align=    靠左或調中或靠右
class=    引用 CSS 類別
id=       賦予標籤惟一的名字
xmlns=    指出 xml 的名字空間
type=     指示檔案的類別
content=  指示 http-equiv 屬性代表項目的值
</pre>

===四、樣式===
*樣式(Style)使用於style屬性中，透過CSS來控制和美化網頁的外觀和佈局。
*兩組樣式指示以「;」間隔。
*名與值以「:」相連。
*例如：
<pre>
<p style="font-family:Arial; color:red;">福留子孫</p>
</pre>
*「font-family」與「color」為Style屬性的名；「Arial」與「red」分別為「font-family」與「color」的值，分別控制文字的字體與顏色。
*常見的Style屬性的樣式指示如下：
<pre>
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線
</pre>

==MediaWiki==
*Wiki是HTML的簡記法，一定會翻譯成HTML，所以可以從Wiki頁複製HTML段落。
*口訣
*#井號、星號、等號、中括號；
*#用空白行分段。

===一、Wiki基礎語法===
<table class=nicetable>
<tr><th>語法</th><th>顯示</th><th>說明</th></tr>
<tr>
<th><pre>
#AAA
#BBB
#CCC
</pre></th>
<th>
#AAA
#BBB
#CCC
</th>
<th>井號</th>
</tr>
<tr>
<th><pre>
*AAA
*BBB
*CCC
</pre></th>
<th>
*AAA
*BBB
*CCC
</th>
<th>星號</th>
</tr>
<tr>
<td><pre>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</pre></td>
<td>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</td>
<th>先星後井</th>
</tr>
<tr>
<td><pre>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</pre></td>
<td>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</td>
<th>先井後星</th>
</tr><tr>
<td><pre>
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======
</pre></td>
<td>
<p style='font-size:150%;border-bottom:1px solid #aaa;'>中標</p>
<p style='font-size:132%;font-weight:bold;'>小標</p>
<p style='font-size:116%;font-weight:bold;'>小小標</p>
<p style='font-size:100%;font-weight:bold;'>加粗標</p>
<p style='font-size:80%;font-weight:bold;'>超小標</p>
</td>
<th>段落標題，等號多標題小</th>
</tr>
<tr>
<td><pre>
=大標=
</pre></td>
<td>
<p style='font-size:188%;border-bottom:1px solid #aaa;'>大標</p>
</td>
<th>請不要使用最大標</th>
</tr>
<tr>
<td><pre>
[http://well-being-ng.net/ 福留子孫網站]
格式：[URL 連結說明]
</pre></td>
<th>
[http://well-being-ng.net/ 福留子孫網站]
</th>
<th>外部連結：一層中<br/>括號包著 URL，空<br/>白後放連結說明。</th>
</tr>
<tr>
<td>
<pre>[[首頁|這是首頁]]
格式：[[頁面名稱|連結說明]]
中括號內也可只寫頁面名稱
不可以連向本身這一頁
</pre></td>
<th>
[[首頁|這是首頁]]
</th>
<th>內部連結：兩層中括<br/>號包著「頁名」，豎<br/>槓（|）後放連結說明。</th>
</tr>

<tr>
<td><pre>
[[檔案:Go top.gif]]
格式：[[檔案:檔名|圖長|圖寬|…]]
</pre></td>
<th>
[[檔案:Go top.gif]]
</th>
<th>
插入圖照也是內部連結。<br/>
所以請先上傳圖照。<br/>
</th>
</tr>
<tr>
<td><pre>
<img src='網址' width='數字px' height='數字px' >
</pre></td>
<th>
<img src='https://upload.wikimedia.org/wikipedia/commons/3/3e/WaterPhaseDiagram1atm.svg' width='50px' height='50px' />
</th>
<th>插入外部圖片
</th>
</tr>
</table>

===二、畫表格===
創建表格：使用「{|」開始表格、「|}」結束表格。
<pre>
{| class="wikitable"
| Header1 || Header2 || Header3
|-
| 單元格1 || 單元格2 || 單元格3
|-
| 單元格4 || 單元格5 || 單元格6
|}
</pre>

===三、嵌入===
當有經常需要重覆使用的內容時，使用崁入的方式直接將其他頁面的內容置於編輯頁面。
<pre>
{{:欲崁入之頁面名稱}}
</pre>
如下所示：<br/>
<pre>
{{:教育再公共化聯盟/前言}}
</pre>
{{:教育再公共化聯盟/前言}}

===四、插入圖照===
====(一)本地圖檔====
插入本地圖照時，應先上傳檔案。
<pre>
[[檔案:檔案名稱|替換文字]]
</pre>
====(二)外部圖檔====
可使用img標籤以圖片連結插入。
<pre>
<img src='圖片連結' width='寬度' height='高度'/>
</pre>
如下所示：<br/>
<pre>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/終身學習公共化三區塊示意圖.svg' width='320' height='160' style='margin-left:10pt;'/>
</pre>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/終身學習公共化三區塊示意圖.svg' width='320' height='160' style='margin-left:10pt;'/>

===五、插入影片===
使用videoflash標籤插入YouTube影片。
<pre>
<videoflash>YouTube影片ID</videoflash>
</pre>
如下所示：
<pre>
<videoflash>HhmxECQliyg</videoflash>
</pre>
<videoflash>HhmxECQliyg</videoflash>

===六、輸出 HTML 讓 word 讀===
#在欲輸出頁面之網址列插入print.php。
#按右鍵，點擊另存新檔。
#選擇.html格式並儲存。
#在檔案總管，以word打開下載之檔案。


===七、收納與展開===
使用HTML的detail標籤，製作收納、展開的功能。
<pre>
<mwdetails><summary>點擊展開摺疊</summary>
這是摺疊內容的文字。
</mwdetails>
</pre>
如下所示：<br/>
{{:教育再公共化聯盟/五大議題}}

===八、加入分類===
將頁面加入分類，該頁面可以在分類頁被找到。
<pre>
[[分類:分類名稱]]
</pre>

===九、去除 TOC===
目錄(Table of Contents，TOC)可透過下列語法關閉顯示：
<pre>
__NOTOC__
</pre>

==SVG==

*SVG是一種用於描述二維向量圖形的XML基礎的語言。它使用數學公式來定義圖形，因此可以無損地縮放和變換。
*主要特點是可縮放性。不同於像素圖像，SVG圖形可以根據不同的螢幕尺寸和解析度進行無損放大或縮小，並且保持清晰。
*可以將SVG代碼嵌入HTML文件中，或將SVG保存為獨立的檔案。
*[http://jendo.org/wiki1231/index.php?title=SVG SVG完整參考頁面]

===一、創建SVG檔案===
<pre>
<svg width="200" height="200">
    <!-- 這裡放你的 SVG 圖形內容 -->
</svg>
</pre>
*width、height屬性定義SVG圖形的寬度和高度，單位可以是像素或其他單位。

===二、畫基本圖形===

====(一)線====
<pre>
<line x1="20" y1="30" x2="160" y2="180" stroke="green" stroke-width="2" />
</pre>
*x、y定義起始與結束點的坐標。
*stroke為邊框顏色。
*stroke-width為邊框寬度。

====(二)矩形====
<pre>
<rect x="50" y="50" width="100" height="80" fill="blue" />
</pre>
*x、y定義起始點的坐標。
*width、height定義寬度和高度。
*fill為填充顏色。

====(三)圓====
<pre>
<circle cx="100" cy="100" r="50" fill="red" />
</pre>
*cx、cy定義圓心的坐標。
*r定義圓的半徑。
*fill為填充顏色。

==檔案櫃==
{{jendo::上傳檔案櫃/使用}}

==Etherpad==

*Etherpad是一個協作式的即時文本編輯器，它允許多個用戶在同一份文檔上進行同時編輯，並即時看到其他用戶的編輯內容。
*下圖為Etherpad電腦介面：
<img src='https://i.imgur.com/MfB610A.png' width='800'>

===一、輸入身分===
#點擊介面右上方的圖示。
#輸入使用者資訊。
#則使用該設備編輯的內容即會標註使用者資訊。

===二、文字編輯===
*文字編輯的操作在介面的左上方。
*輸入文本或一段文字後，即可選取部分文字，套用粗體、斜體、底線及刪除線樣式。

===三、即時訊息===
*點擊介面右下方的「Chat」。
*得與同一頁面的協作者以文字進行溝通。

==Jit.si Meet==
*Jitsi Meet 是一個開源的視訊會議平台，提供即時的視訊和聲音通話功能，使用者可以透過瀏覽器或移動設備參與視訊會議。
*Jit.si Meet可以使用網頁進入會議室，使用手機需下載APP。
**Google Play: https://play.google.com/store/apps/details?id=org.jitsi.meet
**Apple Store: https://apps.apple.com/us/app/jitsi-meet/id1165103905
*下圖為Jit.si Meet電腦網頁介面：
<img src='https://i.imgur.com/L8AKc9p.png' width='800'>

===一、控制麥克風與鏡頭===
*下方工具列的最左方為開、關麥克風的按鈕。
*麥克風右方為開、關鏡頭的按鈕。
*若無法有效開啟麥克風收音或視訊鏡頭，可以嘗試點選圖示右上方的箭頭，可以調整輸入來源。

===二、螢幕分享===
*下方工具列左方第三個按鈕即為分享螢幕的功能。
*點選該按鈕後，可以選擇分享「分頁」、「視窗」或「螢幕」。
**若選擇分享「分頁」，則畫面僅會停留在瀏覽器特定的分頁上；若切換分頁則需要在重新分享。
**若選擇分享「視窗」，則畫面僅會停留在瀏覽器的視窗中；若切換電腦的軟體，則畫面不會跟進。
**若選擇分享「螢幕」，則與會者會看到分享人的整個螢幕畫面。
*若要開啟PPT投影片進行簡報，建議分享「螢幕」。

==MySQL==

===一、資料庫、表、列和行的定義===

====(一)資料庫====
資料庫(Database)是一個包含有組織的數據集合，用於存儲和管理相關數據。

====(二)資料表====
資料表(Table)是數據庫中的結構化數據集合，類似於Excel表格，用於存儲相同類型的數據。

====(三)列====
列(Column)是表中的一個垂直數據元素，也稱為字段或屬性。

====(四)行====
行(Row)是表中的一個水平數據元素，包含了一個或多個列的值。

===二、SQL常見指令===

====(一)查詢====
<pre>
SELECT "欄位(列)名"
FROM "資料表";
</pre>

====(二)加入條件的查詢====
<pre>
SELECT "欄位(列)名"
FROM "資料表"
WHERE "條件";
</pre>

====(三)排序查詢的資料====
<pre>
SELECT "欄位(列)名"
FROM "資料表"
ORDER BY "欄位(列)名" [ASC, DESC];
</pre>

====(三)分組查詢的資料====
<pre>
SELECT "欄位(列)名", COUNT(*)
FROM "資料表"
GROUP BY "欄位(列)名";
</pre>