資訊基礎應用：修訂版本之間的差異

2017年11月13日 (一) 08:10的修訂版本

概述

一、課程目標

1. 培養會使用 wiki,html,GIS,SVG 做事的人
2. 協助全民科學平台的「動手做科學」活動上架

二、選修說明

• 修課同學：蕭卉均、李彥廷、張又懿(妹)、張鈞祺(兄)、黃柏實(子)、陳洹霈(母)、盧星瑜、紀詠恩、谌卫军(遠距學習)、吳文瀚(未到課)、吳亞蓁(未到課)
• 地點：新埔國中信義樓 517
• 時間：週二早上 9:15~12:00
• 費用：無
• 選課優先順位：有參與全民科學平台數位編輯意願者優先
• 教師：丁志仁
• 助教：柯智懷
• 上課規範：學員須自行攜帶筆電上課。上課注意聽，作業按時交。
• 成績以作業為主，通過者得 3 學分

三、課程內容組成

1. 雲端空間使用
2. 維基共享資源利用
3. wiki,html 語法
4. 點陣圖處理
5. 向量圖處理(SVG)
6. GIS

四、重要參考資料

• HTML入門
• wiki 語法
  1. Wiki_入門語法
  2. Wiki_基本語法與條目發展
  3. 維基語法及範例(詳版)
• 71個單字

各次上課內容

2017.9.5

• 工具與環境，看見伺服器與VDSL
  1. 區網 wifi ：jendod與jendoa，密碼現場說明
  2. 伺服器 DS216，網址 6years.jendo.org
  3. 調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2 6years.jendo.org」，下課前註解掉
  4. 瀏覽器：firefox 優先於 chrome ，避免使用 IE
  5. filezilla
     • 打開 filezilla ，並新增一個站台叫「DS216+(共用)」
     • 上述站台的設為：
       1. 主機:6years.jendo.org；
       2. 協定:SFTP
       3. 使用者:共用
       4. 密碼:
       5. 字碼集:UTF-8
     • 連線，然後到「/home/www」
     • 關閉 filezilla 。
     • 建自己帳號的連線
  6. 可用的文字編輯器，如 emeditor
  7. 連結 filezilla 和慣用的文字編輯器：「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑。

2017.9.12

• 建造每一個人的筆記頁：「資訊基礎應用/○○○」，要登入才有辦法編寫
  1. 其中須有一段，列出已記得的單字，老師沒列到的單字要跟丁丁講
• 第一份作業：本班通訊錄
• 第二份作業：HTML 與 wiki 語法對照表
• 第三份作業：個人履歷，參考 http://6years.jendo.org/~共用/丁禾履歷表.doc
• 表格邊框美化的範例一

<table style='border:1px solid black;border-collapse:collapse;'>
<tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr>
<tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr>
</table>

• 表格邊框美化的範例二

<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>

2017.9.19

• 交代樣式(外觀)的三種方式：
  1. 行內：
  2. 通篇：
  3. 跨多篇：

     <link rel='stylesheet' type='text/css' href='./pa.css'  />

• 樣式作用的三種對象：
  1. 標籤：
  2. 類別(class)：
  3. 指定專一的標籤(id)：
• 多條件交代樣式的作用對象：

2017.9.26

• 筆記中建立 wiki 與 HTML 對照表
  1. 等號
  2. 星號
  3. 井號
  4. 中括號(連結)
  5. 雙層中括號(圖照)
  6. 文字的拉斜與加粗
  7. 冒號及分號
  8. 水平線
• 角括號的寫法：
  1. &lt;：<
  2. &gt;：>
  3. 表格的示例
• Mediawiki_簡介
  1. 柏納李發明 html 及 http 。
  2. 由HTML速記到共筆再到維基百科。
  3. 分享式合作與共享經濟
• CC授權
• Wiki_基本語法與條目發展
• 取用圖照：
  1. 找到 google 翻譯，找出食人魚的英文。
  2. 由 google 找到「維資基共享源」的網址「commons.wikimedia.org」
  3. 到「維資基共享源」在蒐尋框蒐「File:Piranha」
  4. 開一張食人魚的圖，了解頁中各種尺寸的連結，並選擇想要的尺寸。
  5. 用雙層中括號將圖照帶入 wiki 頁
  6. 用 img 標籤帶入 wiki 頁
  7. 比照兩的速度有何不同
  8. 找到食人魚的分類「Category:Pygocentrus nattereri」
  9. 由 google 的照片蒐尋，使用「工具/使用權限」來找到可以用的圖。
  10. 蒐「File:Piranha svg」，並看 svg 檔無段放大不毛邊的效果。
  11. 看 svg 圖檔的原始碼，知道它是由指示組成。
• 圖檔格式(點陣與向量)，SVG特性，著作權保護期的長短。
  1. 由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。

2017.10.03

• 下載 http://6years.jendo.org/~共用/丁禾履歷表.doc
• 以 word 打開
  1. 找到「尺規」開關並打開
  2. 取消「檔案/選項/進階/顯示字元寬度單位」核取方塊
  3. 找出長寬
  4. 每 inch 2.54公分，72pt
• 開「履歷表.html」
• 頁
  1. 在樣式定義中以「@page 某值{…}」設定 css
  2. 在顯示區中以「<div style='page:某值;'>」
  3. 可用的定義：

     size:寬 長;

     margin:天 右 地 左

     mso-page-orientation:landscape 橫放

     mso-header-margin:頁首大小

     mso-footer-margin:頁尾大小

• 跳頁的用法：「<br style='page-break-before:always' />」
• 表格寬度用「style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字，無單位數字由「控制台/顯示器/設定/一般/字型大小」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
• 表格高度在 tr 中設，
  1. <tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。
  2. <tr height=數字/>只對無單位數字有效。
• 圖的寬度：
  1. style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
  2. width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。

2017.10.17

• 去看 http://6years.jendo.org/~共用/履歷表.html
• 用 filezilla 下載回來
• 以 word 打開，看完之後，關閉此檔
• 用 emeditor 打開下載檔案
• 解說 xml (Extensible Markup Language)
• 解說 xmlns (xml namespace)
• 看HTML/適應word
• 仿做自己的履歷表

2017.10.24

• Scalable Vector Graphics(可縮放向量圖形)
• 特性
  1. XML語法。
  2. 二維向量圖形格式。
  3. 由W3C制定，是開放標準。
• 看原始碼
  1. SVG空架子：http://jendo.org/~admin/base.svg
  2. 多邊形：http://jendo.org/~admin/polygon.svg
  3. 線性漸層：http://jendo.org/~admin/linearGradient.svg
  4. 放射漸層：
     • http://jendo.org/~admin/ball.svg
     • http://jendo.org/~admin/ball2.svg
     • http://jendo.org/~admin/ball3.svg
  5. 文字：http://jendo.org/~admin/text.svg
  6. 複製：http://jendo.org/~洪凌煙/flower3.svg
• 在教學上應用的例子：
  1. 轉動的齒輪
  2. 山脈的走向
  3. 現代智人走出非洲的可能路線
  4. 日本史
  5. 鄭氏大事紀
  6. 動物細胞
• 圖檔寫法：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>

</svg>

• HTML寫法：

<svg>

</svg>

• 畫一個小圓圈：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='12' height='12'>
  <circle cx='6' cy='6' r='4' style='fill:#fff;stroke:blue;stroke-width:2;fill-opacity:0'/>
</svg>

• 畫熊臉(bearFace.svg)，如：施馨檸畫的熊臉
• 共同約定：
  1. 開始與結束合一。
  2. 長度如省略單位，預設單位為 px。
  3. px可以使用小數點。
  4. 以左上為座標原點。
  5. 座標描述先 x 後 y 。
  6. stlye屬性中關於線條之樣式，也可以作為繪圖：
     • stroke (線條顏色)，
     • stroke-width (線條寬度)，
     • stroke-opacity (線條顏色的透明度，合法的範圍是：0 - 1，0最透明，預設1)，
     • stroke-linecap (線條端點形狀，預設butt端點切齊、round以端點為圓心線寬為直徑畫圓、square以端點為中心線寬為邊長畫方形)，
     • stroke-linejoin (線條轉彎處樣式，預設miter尖角、round圓角、bevel斜角)，
     • stroke-miterlimit (尖角內外距/線寬的最大值，不設限則尖角可以拉長至無限長，預設為 4 倍)，
     • stroke-dasharray (預設none，代表實線。若為數字其值為一陣列，陣列值為線段中實線段長度與虛線段長度的交錯數字，通常是兩個數字一組，如果是奇數，則最後面自動加補第一個數字)
  7. stlye屬性中關於面之樣式：
     • fill (填充顏色)，
     • fill-opacity (填充不透明，合法的範圍是：0 - 1，0最透明，預設1)。
     • fill-rule (polygon等標籤有時會將內部分割成不同的區域，填色方式，預設nonzero全部同色、evenodd相鄰區域內部填色與外部填色交互填充、inherit繼承)
  8. 選擇器 class,id 同 CSS 。
• 常見的簡易繪圖標籤：
  1. line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
  2. polyline(多點成線)，諸屬性如下：
     • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  3. polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
     • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  4. circle(圓)，諸屬性如下：
     • cx(圓心x座標)，cy(圓心y座標)，r(半徑)
  5. rect(矩形)，諸屬性如下：
     • width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
  6. ellipse(楕圓)，諸屬性如下：
     • cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。

2017.10.31

因老師父親骨折而停課

2017.11.7

(一)畫文字

• 範例一(text.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<text x='40' y='50' style='font-family:kaiti;fill:#666666'>羅馬</text>
</svg>

• 在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
• 可用中文字形：

• 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
• 屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
• 屬性 fill 控制填入字的顏色，預設黑色
• 屬性 stroke 控制字描框的顏色，預設 none
• 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
• 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

其他進階屬性：

• 作圖練習一：

(二)位移、旋轉、縮放

• 範例二(transform.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height='100' width='112.5' xmlns='http://www.w3.org/2000/svg' version='1.1'>
	<line x1='0' y1='50' x2='113' y2='50' style='stroke:#0f0;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#000;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#00f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f00;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
</svg>

• 注意：
  1. 四個圖形都圍繞凹尖處旋轉，此點是原始圖形的(0,0)點。因為 rotate 都只交代角度，沒有交代繞著哪個中心旋轉，所以就繞預設值(0,0)旋轉。
  2. 如果混合兩種以上操作，請先平移、再旋轉、再縮放。請看第二個箭頭(藍色)，先旋轉再平移，結果他的平移座標，是旋轉過後的 x 軸和 y 軸，不再是預設的 x 軸和 y 軸。
• 相關屬性說明：
  1. 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
  2. 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
  3. 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
• 作圖練習二(3petal0.svg)(三花瓣)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='600' height='600'>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

• 綁成群組(3petal1.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<g transform='translate(300,48) rotate(30) scale(1.7)'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

• 墊一張圖(3petal2.svg)：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='600' height='600'>
<image xlink:href='http://jendo.org/~admin/Image15.png' x='0' y='0' width='600' height='600'/>
<g>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(90 100 100)'/>
</g>
</svg>

(三)定義一次，引用多次

• 範例三(uses.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='201' height='201'>
<defs>
	<polygon id='petal' points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
</defs>
<g>
<use xlink:href='#petal'/>
<use xlink:href='#petal' transform='rotate(45 100 100)'/>
<use xlink:href='#petal' transform='rotate(90 100 100)'/>
<use xlink:href='#petal' transform='rotate(135 100 100)'/>
<use xlink:href='#petal' transform='rotate(180 100 100)'/>
<use xlink:href='#petal' transform='rotate(225 100 100)'/>
<use xlink:href='#petal' transform='rotate(270 100 100)'/>
<use xlink:href='#petal' transform='rotate(315 100 100)'/>
</g>
</svg>

• 步驟：
  1. 先添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有 href 屬性的定義
  2. 在 defs 段落中定義圖形，並賦予 id
  3. 用 <use xlink:href='#某id'/> 來引用既有的定義
• 作圖練習三：
• 參考：
  1. 花
  2. 花+笑臉
  3. (花+笑臉)拉斜
  4. 三朵花

2017.11.14

(四)線性漸層

• 範例四(linearGradient.svg)原始碼：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
<defs>
	<linearGradient id='LG' x1='30%' y1='0%' x2='70%' y2='0%'>
		<stop offset='0%' style='stop-color:#ffff00;stop-opacity:1' />
		<stop offset='100%' style='stop-color:#ff0000;stop-opacity:1' />
	</linearGradient>
</defs>
<rect width='130' height='90' x='0' y='0' stroke='red' fill='url(#LG)' />
</svg>

• 步驟：
  1. 不用添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到 href 屬性
  2. 在 defs 段落中定義漸層，並賦予 id
  3. 用 fill='url(#某id)' 屬性來引用既有的漸層定義
• linearGradient 線性漸層定義語法說明:
  1. 漸層標籤中的 100%，指的是整個圖形
  2. 其中的 id 屬性定出漸層名稱
  3. 由 x1,y1,x2,y2 四個屬性決定漸層範圍，以及水平，垂直或角形漸層，四個屬性都以百分比表示：
     • x1,y1,x2,y2 屬性決定漸層開始和結束位置，x1,x2以圖形的寬度為準，y1,y2以圖形的高度為準
     • 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸層
     • 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸層
     • 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸層
• 作圖練習四-1：做h.svg、v.svg兩個檔案，在h.svg裡做長寬各100px，由左到右、黃到紅的漸層；在v.svg裡長寬各100px，由上到下、藍到綠的漸層。
• 作圖練習四-2：參考箭頭(arrow.svg)的原始碼，做一個arrowUp.svg檔，做出寬:90、高:130，由上到下，白到紫色漸層的⇧。 arrow.svg 的原始碼如下：

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	<polygon points='0,30 100,30 100,0 130,45 100,90 100,60 0,60' stroke='black' fill='none' />
</svg>

(五)放射漸層

• 三個範例及其原始碼：

  ball1.svg

<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='150' height='150'>
<defs>
	<radialGradient id='r1' cx='30%' cy='30%' r='70%'>
		<stop offset='0%' stop-color='#fff'></stop>
		<stop offset='30%' stop-color='#9f9'></stop>
		<stop offset='70%' stop-color='#373'></stop>
		<stop offset='100%' stop-color='#000'></stop>
	</radialGradient>
</defs>
<circle cx='75' cy='75' r='75' fill='url(#r1)'/>
</svg>

• 以 SVG 放射漸層作出此圖： ，圓半徑 75px 。
• 請到jendo.org/~admin/waterfall0.svg複製原始碼到自己的www裡，新設檔名：waterfall1.svg，將太陽放到瀑布(waterfall1.svg)圖裡適當的位置
• 以 SVG 漸層作出夕陽圖如右圖： 山要蓋住一部分柔焦的太陽，天用矩形做，天的顏色是下紫紅上藍，夕陽天色剛好在山的輪廓線之上。檔名叫做 waterfall2.svg 。
• 以 SVG 漸層作出夕陽圖如右圖： 加入綠草地，是矩形，與天、山的左緣相接。檔名叫做 waterfall3.svg 。