討論:資訊基礎應用/李彥廷

環境與工具

一、環境

區網 wifi ：jendod與jendoa，密碼現場說明
伺服器:DS216,網址:6years.jendo.org
wiki個人頁:資訊基礎應用/李彥廷

二、工具與設定

firefox:因為它比chrome好用，功能精細和繁多。
filezilla:
1. 在filezilla新增站台叫「DS216+(共用)」
  - 主機:6years.jendo.org
  - 協定:SFTP
  - 使用者:共用和李彥廷
  - 密碼:common和我自己個人的密碼
  - 字碼集:UTF-8
  - 在home/www裡面做做作業和練習(路徑就是網址)
  - 把EmEditor設為預設的編輯器。
EmEditor，一款文字編輯器。
- 在fillezilla的「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑，把EmEditor和filezilla連結，每次要編輯都會自動開啟EmEditor。

HTML與HTTP

發有者及發明年代
- 柏納李：HTTP 的發明人，在 1990年12月25日實現第一次的 HTTP 傳輸，1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的，不申請專利權，不徵收專利費，因此，人人都能輕易用上全球資訊網。
HTML
- HTML，超文件標示語言(HyperText Transfer Protocol)，一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。
- HTML元素是構建網站的基石。HTML允許嵌入圖像與物件，並且可以用於建立互動式表單，它被用來結構化資訊——例如標題、段落和列表等等，也可用來在一定程度上描述文件的外觀和語意。HTML的語言形式為尖括弧包圍的HTML元素（如<html>），瀏覽器使用HTML標籤和指令碼來詮釋網頁內容，但不會將它們顯示在頁面上。
- HTML可以嵌入如JavaScript的手稿語言，它們會影響HTML網頁的行為。網頁瀏覽器也可以參照階層式樣式表（CSS）來定義文字和其它元素的外觀與布局。維護HTML和CSS標準的組織全球資訊網協會（W3C）鼓勵人們使用CSS替代一些用於表現的HTML元素。
HTTP
- 超文本傳輸協定（英文：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分佈式、協作式和超媒體資訊系統的應用層協議。HTTP是全球資訊網的資料通訊的基礎。
- 設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。通過HTTP或者HTTPS協定請求的資源由統一資源識別元（Uniform Resource Identifiers，URI）來標識。
- HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起。HTTP的標準制定由全球資訊網協會（World Wide Web Consortium，W3C）和網際網路工程任務組（Internet Engineering Task Force，IETF）進行協調，最終發布了一系列的RFC，其中最著名的是1999年6月公布的，定義了HTTP協議中現今廣泛使用的一個版本——HTTP 1.1。
- 2014年12月，網際網路工程任務組（IETF）的Hypertext Transfer Protocol Bis（httpbis）工作小組將HTTP/2標準提議遞交至IESG進行討論，於2015年2月17日被批准。HTTP/2標準於2015年5月正式發表，取代HTTP 1.1成為HTTP的實現標準。
xml
- 可延伸標記式語言（英語：Extensible Markup Language，簡稱：XML），是一種標記式語言。標記指電腦所能理解的資訊符號，通過此種標記，電腦之間可以處理包含各種資訊的文章等。如何定義這些標記，既可以選擇國際通用的標記式語言，比如HTML，也可以使用像XML這樣由相關人士自由決定的標記式語言，這就是語言的可延伸性。XML是從標準通用標記式語言（SGML）中簡化修改出來的。它主要用到的有可延伸標記式語言、可延伸樣式語言（XSL）、XBRL和XPath等。

wiki

何謂 wiki
- Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統，由沃德·坎寧安於1995年首先開發。沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」。有些人認為，Wiki系統屬於一種人類知識的網路系統，我們可以在web的基礎上對Wiki文字進行瀏覽、創建和更改，而且這種創建、更改及發布的代價遠比HTML文字小；與此同時，Wiki系統還支援那些面向社群的協作式寫作，為協作式寫作提供了必要的幫助；最後Wiki的寫作者自然構成了一個社群，Wiki系統為這個社群提供了簡單的交流工具。與其它超文字系統相比，Wiki有使用簡便且開放的特點，可以幫助我們在一個社群內共享某個領域的知識。
1. 分享式合作
2. Wikipeida是Alexa流量統計前幾名唯一屬於公益性質的網站，其他皆是商業性的公司。
CC 授權
- CC授權(Creative Commons，簡稱CC)
- 諸標章：CC授權、姓名標示、非商業性、禁止改作、相同方式分享。
- 限制者才有標章，不限制者沒有標章。
- 六種核心授權：1(必須姓名標示)×2(商業、非商業)×3(可改作、不可改作、相同方式分享)。
wiki 語法
口訣：
- 井號、星號、等號、中括號；
- 用空白行分段。
- 例如：

語法	顯示	說明
#AAA #BBB #CCC	AAA BBB CCC	井號
AAA BBB *CCC	AAA BBB CCC	星號
AA #AA1 #AA2 BB #BB1 #BB2	AA AA1 AA2 BB BB1 BB2	先星後井
#AA #AA1 #AA2 #BB #BB1 #BB2	AA AA1 AA2 BB BB1 BB2	先井後星
==中標== ===小標=== ====小小標==== =====加粗標===== ======超小標======	中標小標小小標加粗標超小標	段落標題，等號多標題小
=大標=	大標	請不要用，這是留給議程題目用的。
[http://jendo.org 振鐸網站] 格式：[URL 連結說明]	振鐸網站	外部連結：一層中括號包著 URL，空白後放連結說明。
[[首頁\|這是首頁]] 格式：[[頁面名稱\|連結說明]] 中括號內也可只寫頁面名稱	這是首頁	內部連結：兩層中括號包著「頁名」，豎槓(\|)後放連結說明。
[[檔案:Go top.gif]] 格式：[[檔案:檔名\|圖長\|圖寬\|…]]		插入圖照也是內部連結。所以請先上傳圖照。請勿非法上傳圖照。

- 重點:
  1. 連續文字中，空行為分段。
  2. 起一新段落之段落標題：在行首使用「== … ==」(或H標籤)，等號 = 越少(或H越少)字越大。
  3. 請不要只使用一個等號(=Heading=)，這是留給頁名(title)用的段落標題。
  4. 如使用者有編輯權限，每段都會出現編輯連結。
  5. 當段落數多於等於4時(含子段落)，自動生成「目錄」區塊。要抑制目錄區塊生成可在頁首下「__NOTOC__」指示。
  6. 「*」開頭代表無序列表
  7. 「#」開頭代表有序列表
  8. 外部連結：[URL 連結說明](一層中括號包著 URL，空白後放連結說明)。
  9. 內部連結：「[[名字空間:頁面名稱|連結說明]]」(兩層中括號包著「頁名」，豎槓(|)後放連結說明)。
  10. 指向條目的內部連結，名字空間可省略，直接用「[[頁面名稱]]」。
wiki 的 word 適應。

CSS

何謂 CSS
- 層疊樣式表（Cascading Style Sheets, CSS），是用來描述HTML 或XML（包含SVG 或 XHTML 等各種XML 變形）文件外觀的樣式表語言。
有什麼用?
- 網頁的讀者和作者都可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的內容與顯示分隔開來。這有許多好處：
  1. 檔案的可讀性加強
  2. 檔案的結構更加靈活
  3. 作者和讀者可以自己決定檔案的顯示
  4. 檔案的結構簡化了
- 另外，在HTML中：
  1. 一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方，要改變它們很方便
  2. 不同的讀者可以有不同的樣式，比如有的讀者需要字型比較大
  3. HTML檔案本身的範圍變小了，它的結構簡單了，它不需要包含顯示的資訊
CSS還可以控制其他參數，例如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。
重要語法
屬性:
1. border 1px(邊框的屬性)
2. style(樣式的屬性)
solid:實線
collapse:崩塌
style三層用:等號.空格.冒號。
配色
1. red:#f00
2. green:#0f0
3. blue:#00f
4. white:#fff
5. black:#000
6. 淺灰色:#aaa
7. 深灰色:#444
16進為法:,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
border = " "px
style(樣式) = " "(屬性名 = 屬性值)

SVG

一、概述

何謂 SVG ?
- 可縮放向量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可延伸標記式語言（XML），用於描述二維向量圖形的圖形格式。SVG由W3C制定，是一個開放標準。
點陣圖與向量圖的比較(含附檔名)
- SVG:向量圖，放大不會毛邊。連結:https://commons.wikimedia.org/wiki/File:SVG_logo.svg
- JPG:會失真。連結:https://commons.wikimedia.org/wiki/Category:JPG#/media/File:Simon_Leicester_(Earl).jpg
- PNG:不會失真，是公開格式。連結:https://upload.wikimedia.org/wikipedia/commons/8/82/Conaleche_RD.png
- GIF:可動畫，有256色。連結:https://upload.wikimedia.org/wikipedia/commons/f/fd/Partial_Solar_Eclipse_GIF.gif

二、基本架構

<?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>

三、文字

在「text」標籤開始與結束之間夾字，可用中英文。而使用「屬性」來規定文字的表現，所有的屬性都可以改用樣式來表達。
可用中文字形：
1. 屬性 x 和 y 標示字的起點：值可為'10,20,30,40'，表示每個字的 x 或 y 座標。
2. 屬性 dx 和 dy 基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠。
3. 屬性 fill 控制填入字的顏色，預設黑色
4. 屬性 stroke 控制字描框的顏色，預設 none
5. 屬性 rotate='30' 順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度。
6. 用 style 控制字體、字形、尺寸，但顏色是用 fill 不是用 color 。

四、位移、旋轉、縮放、歪斜

相關屬性:
- 平移變換(translate)：transform="translate(x,y)"，即新坐標系的原點在原坐標系的(x,y)處。坐標軸的方向不變。
- 旋轉變換(rotate)：transform="rotate(angle cx,cy)"。angle代表旋轉角度，預設單位是「度」，順時針為正，逆時針為負。(cx,cy)是旋轉中心所在的坐標。若省略旋轉中心坐標，則預設值是(0,0)。
- 伸縮變換(scale)：transform="scale(sx,sy)"，sx,sy分別代表x軸方向和y方向拉伸或縮小的比例因子。拉伸：大於1；縮小：小於1。若省略sy，即sy=sx，作等比例縮放。
- 歪斜變換(skew)：transform='skewX(x-angle)'或transform='skewY(y-angle)'，x-angle,y-angle分別代表沿x軸和y軸歪斜的角度。

五、群組

六、定義一次，引用多次

步驟：
- 先添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，其中才有 href 屬性的定義
- 在 defs 段落中定義圖形，並賦予 id
- 用 <use xlink:href='#某id'/> 來引用既有的定義

七、漸層

漸層和濾鏡如果取中文名稱，瀏覽器還認得，但 Inkscape 和線上轉檔軟體就會不認得。

(一)線性漸層

步驟：
- 不用添加 svg 標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到 href 屬性
- 在 defs 段落中定義漸層，並賦予 id
- 用 fill='url(#某id)' 屬性來引用既有的漸層定義
linearGradient 線性漸層定義語法說明:
1. 漸層標籤中的 100%，指的是整個圖形
2. 其中的 id 屬性定出漸層名稱
3. 由 x1,y1,x2,y2 四個屬性決定漸層範圍，以及水平，垂直或角形漸層，四個屬性都以百分比表示：
  1. x1,y1,x2,y2 屬性決定漸層開始和結束位置，x1,x2以圖形的寬度為準，y1,y2以圖形的高度為準
  2. 當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸層
  3. 當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸層
  4. 當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸層

(二)放射漸層

radialGradient 放設漸層定義語法說明:

漸層範圍：由 cx,cy,r 三個屬性決定，三個屬性都以百分比表示，漸層範圍是一個圓或橢圓
- cx 表示範圍中心在圖寬百分之幾的位置
- cy 表示範圍中心在圖高百分之幾的位置
- r 如果圖形寬、高相等則範圍為圓，r代表範圍圓半俓除以圖形寬或高；如果圖形寬、高不相等則範圍為橢圓，r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%，範圍圓直徑恰等於圖的寬或高。
設色中心：由 fx,fy 兩個屬性決定的位置，就是設色為 0% 的地方，兩個屬性都以百分比表示
- fx表示設色中心在圖寬百分之幾的位置
- fy表示設色中心在圖高百分之幾的位置
- 設色 100% 的地方在範圍圓或範圍橢圓的圓周上
設色標籤 stop，漸層標籤包住數個 stop 標籤，每種顏色通過一個 stop 標籤來規定。
- offset屬性用來定義漸層的開始和結束位置，其 100% 是指整個漸層範圍。
- stop-color 屬性用來定義顏色，也可以做為 style 的樣式。
- stop-opacity 屬性決定透明度，也可以做為 style 的樣式。
以 ball3.svg 為例：漸層範圍為整個圓，因為 cx,cy,r 都是 50% ，而設色中心在中間下方，因為 fx='50%' fy='100%' ，此處是 stop 設為 0% 的顏色(白色)，而範圍圓週邊是 stop 設為 100% 的顏色(黑色)

八、柔焦濾鏡

濾鏡標籤 filter 語法說明:
1. 其中的 id 屬性定出濾鏡名稱
2. 也可以設 width,height,x,y 去定濾鏡範圍和起點，如沒設以整個圖形為範圍。
3. 高斯模糊濾鏡 feGaussianBlur ：濾鏡標籤包住數種不同效果的濾鏡，高斯模糊濾鏡是最簡單的濾鏡。
4. 高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差)，用來控制模糊的程度，數字越大越模糊，數字為零則是圖片原本的狀態。

九、path

參數大寫代表絕對座標，小寫代表與前一個座標的相對座標
點與點之間、同點的 x , y 座標之間，用空白間開或用,間開兩者是等價的。

十、動畫

四標籤：

set(開關)
- 只用attributeName,to,begin三屬性
animate(屬性連續改變)
animateTransform(平移,旋轉,縮放)
animateMotion(循跡運動)

共通語法：將母圖形分拆成開始和結束兩標籤，中間插入動畫標籤。
共通屬性：
1. attributeName：
  - set,animate為某一個母圖形的屬性。from 和 to 就是這個屬性的值將由多少變到多少。
  - animateTransform為'transform'另搭配 type 屬性
  - animateMotion免設此屬性
2. type屬性之值(animateTransform專用)：
  - rotate旋轉，影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'。
  - scale縮放，影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算，如果同組x,y倍率相同，可以只寫一個值。
  - translate平移，影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'。
  - skewX X軸不動，X軸下方向右歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
  - skewY Y軸不動，Y軸右方向下歪斜，影響屬性from='起始歪斜角度'、to='結束歪斜角度'
3. begin='幾s'：幾秒開始跑，通常設為 0s 。
4. dur='幾s'：跑一輪要幾秒，可以設為 indefinite 。
5. repeatCount='幾'：要跑幾輪，indefinite代表無限多輪，預設值為1。
6. from 開始狀態(animate,animateTransform有)。
7. to 結束狀態(set,animate,animateTransform有)。
8. path(animateMotion專用) 屬性為移動路徑：由 m 開始
9. rotate='auto'(animateMotion專用) 圖形隨路徑曲度而轉折。

Inkscape

.org是網際網路的通用頂級域之一，「org」是英文「organization」的縮寫，在創立時主要供不屬於當時其他5個通用頂級域類別的組織使用，包括非營利機構、國際組織等。現在已經沒有任何限制，它和頂級域.com一樣可以用於任何場合，包括盈利和非營利組織、機構、團體。
com是網際網路之DNS上的一個通用頂級域。它的名稱源自英文單詞「commercial」，表明由商業組織註冊此域名的原始意圖。然而，隨著.com、.org及.net開放無限制註冊，最終便無有差別。 .com最初由美國國防部管理，現在則由VeriSign管理。
Vector/animals
- 下載 ai 檔，解散群組。
- 調整紙張，匯出點陣圖。

GIS

何謂 GIS ？
- GIS (Geographic Information System,地理資訊系統)，是指在地圖上加上數據或訊息。
兩種主要的 GIS 。
- google map：google釋出的地圖庫，公布了API使得用戶能夠建立自訂的應用。公開格式，但非公共版權內容。
- OpenStreetMap：(開放街圖，簡稱OSM)，於2004年由英國的 Steve Coast 發起，採用類似 Wiki 的協作編輯以及開放的授權與格式。
基本框架。
- 基本 DIV

<meta content='text/html;charset=utf-8' http-equiv='Content-Type'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script type='text/javascript' src='http://www.pittss.lv/jquery/gomap/js/jquery.gomap-1.3.3.min.js'></script>
<script>
$(function(){
	$('#map').goMap({
………
	}); 
});
</script>
<div align=center id='map' style='height:550px; width:900px;'>六年制學程</div>

marks:標點
overlays:標區域
筆記
- 括號、引號必須成對
  - 所有字和符號都用「英數」、「半形」符號，不可以用全形符號。
  - 所有的小括號、中括號、大括號、單引號、雙引號都要成對。
  - 每一對大括號代表一個東西(物件)，東西裡面可以包進去更小的東西，東西不一定要取名字。例如：
    1. 一張地圖。
    2. 一個覆蓋物。
    3. 一個經緯度座標點。
    4. 一個地點標示。
    5. 一個html指示。
  - 每一對中括號裡面包一群相同的東西。例如：
    1. 一群 marker 包成一組，名字叫 markers ；
    2. 一群 overlay 包成一組，名字叫 overlays ；
    3. 一群 coord(經緯度座標)包成一組，名字叫 coords 。
  - 每一對小括號中代表「函式」要作用的對象。
- 整張圖的性質
  1. 調整比例尺的性質：zoom:1~20。1比例尺最大，20比例尺最小。
  2. 標定整張地圖中心點位置的性質：
    - latitude:緯度，十進位。
    - longitude:經度，十進位。
    - address:地址。如：以色列。
  3. 地圖種類：maptype:值加引號有四種選擇：
    - ROADMAP：道路地圖
    - SATELLITE：衛星空照圖
    - HYBRID：道路與空照圖相疊加。
  4. TERRAIN：地形圖
  5. markers：各個地點標示
  6. overlays：各個覆蓋物
google 我的地圖
連結:http://6years.jendo.org/~%E6%9D%8E%E5%BD%A5%E5%BB%B7/gis1.html
結合我的地圖與 GIS

圖形計算機

基本圖紙
1. 圖寬：$draw->W，預設601。
2. 圖高：$draw->H，預設401。
3. 原點距左上角：$draw->x0,$draw->y0，預設(200,200)。
4. x每單位幾點：$draw->xu，預設15。
5. y每單位幾點：$draw->yu，預設15。
6. x每幾單位畫一個刻度：$draw->xGraduate，預設1。
7. y每幾單位畫一個刻度：$draw->yGraduate，預設1。
8. x每幾刻度標示一數字：$draw->xScale，預設1。
9. y每幾刻度標示一數字：$draw->yScale，預設1。
10. 秀出直角座標系：$draw->coordinate，預設1。
11. 函式描點密度：$draw->pointDensity，預設20。
12. 函式取樣點：$draw->xs，預設'-1;0;1';
基本圖:$draw->圖形[]=array(array(…),其他屬性);
1. 多邊形：$draw->polygons[]=array('points'=>array(array(×,×),array(×,×),array(×,×)),'width'=>'線寬');
2. 線段：$draw->lineSegments[]=array(array(×,×),array(×,×),'color'=>'顏色','dash'=>'5 5');
3. 字：$draw->alnums[]=array(array(×,×),'word'=>'字');
4. 圓：$draw->circles[]=array(array(×,×),'radius'=>半徑,'fill'=>'顏色','fill-opacity'=>'1');，預設半徑3。
5. 楕圓：$draw->ellipses[]=array(array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色');
6. 弧：$draw->arcs[]=array(array(×,×),array(×,×),'rx'=>x半軸,'ry'=>y半軸,'color'=>'顏色','arrowEnd'=>1);
多項式語法:
1. draw->functions[]=array('functionName'=>'polynomialEquation','argument'=>array(×,×,×,…),'color'=>'red');
2. $draw->xs='×;×;×;…';：各點 x 值。
3. 標y值：在functions[]中加'xToy'=>$draw->xs,
4. 標點：在functions[]中加'x2y'=>$draw->xs,
5. 斜率：在functions[]中加'tangentPoint'=>$draw->xs,
6. 面積：在functions[]中加'area'=>$draw->xs,

討論:資訊基礎應用/李彥廷

目錄

環境與工具

一、環境

二、工具與設定

HTML與HTTP

wiki

CSS

SVG

一、概述

二、基本架構

三、文字

四、位移、旋轉、縮放、歪斜

五、群組

六、定義一次，引用多次

七、漸層

(一)線性漸層

(二)放射漸層

八、柔焦濾鏡

九、path

十、動畫

Inkscape

GIS

圖形計算機

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱