檢視討論:資訊基礎應用/蕭卉均的原始碼

=ღ完整筆記ღ=
==♡環境&工具♡==
===1.♪環境♪===
*伺服器與域名,伺服器DS216,網址6years.jendo.org
*wifi,區網wifi：jendod&jendoa,密碼:jendo19690929
*網站空間,瀏覽器：firefox,優先於chrome,盡量不用IE
*wiki上的個人頁,filezilla→開啟filezilla,並新增一個站台叫♕DS216+(共用)♕→主機設定:6years.jendo.org→協定:SFTP→使用者:共用→字碼集:UTF-8→連線,然後到♕home/www♕→建自己帳號的連線→可用的文字編輯器,如emeditor→連結filezilla&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑
*課後重點筆記:
*#table是開始,/table是結束
*#IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用
*#物聯網:簡單說一切事物,得失相兼
*#域名:域名伺服器(HOSTS)
*#AI(人工智慧)
*#big5,早期,只有繁體中文
*#UTF-8,萬國碼

===2.♪工具與設定♪===
*firefox:Mozilla Firefox（簡稱Firefox）,中文俗稱火狐（中國大陸官方有使用但未註冊為商標）,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發
*filezilla:ileZilla是一種快速&可信賴的FTP用戶端以及伺服器端開放原始碼程式,具有多種特色&直覺的介面,FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案
*EmEditor:EmEditor是江村軟體公司（Emurasoft,坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式,EmEditor以運作輕巧&敏捷而又功能強大&豐富著稱而得到許多用戶的好評

==♡HTML&HTTP♡==
*發有者及發明年代:於西元1993年,W3C&WHATWG開發
*HTML:超文件標示語言（英語：HyperText Markup Language,簡稱：HTML）是一種用於建立網頁的標準標示語言,HTML是一種基礎技術常與CSS&JavaScript一起被眾多網站用於設計令人賞心悅目的網頁&網頁應用程式以及行動應用程式的使用者介面
*HTTP:超文本傳輸協定（英文：HyperText Transfer Protocol,縮寫：HTTP）是一種用於分佈式&協作式和超媒體資訊系統的應用層協議,HTTP是全球資訊網的資料通訊的基礎
*xml:可延伸標記式語言（英語：Extensible Markup Language,簡稱：XML）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等
*課後筆記:
*#筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面
*#色碼表:https://www.toodoo.com/db/color.html
*通訊錄:
*<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr>
<table class='nicetable'>
<tr><td class='nicetable'>蕭卉均</td><td class='nicetable'>0939912983</td><td class='nicetable'>suzy92126@gmail.com</td></tr>
</table>

==♡ wiki ♡==
*何謂wiki:Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統,由沃德·坎寧安於1995年首先開發,沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」
*CC授權:創用CC授權條款（英語：Creative Commons license,簡稱CC授權）是一種公共版權授權條款,其允許分發受版權保護的作品,一個創用CC授權用於一個作者想給他人分享&使用&甚至創作衍生作品的權利
*wiki語法:http://jendo.synology.me/wiki1231/index.php?title=Wiki_%E5%85%A5%E9%96%80%E8%AA%9E%E6%B3%95
*wiki的word適應:履歷表
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E5%B1%A5%E6%AD%B7%E8%A1%A8.html
==♡CSS♡==
*何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中
*用法:限制者才有標章,不限制者沒有標章
*重要語法:
*#Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示
*#NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品
*#NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品
*#ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品

==♡SVG♡==
===1.♪概述♪===
*何謂SVG:可縮放向量圖形（英語：Scalable Vector Graphics,SVG）是一種基於可延伸標記式語言（XML）,用於描述二維向量圖形的圖形格式,SVG由W3C制定,是一個開放標準
*點陣圖與向量圖的比較(含附檔名):
*#SVG:又為向量圖,特色,放大不毛邊,https://upload.wikimedia.org/wikipedia/commons/5/53/Skull_and_crossbones.svg
*#JPG:又名JEPG,失真,壓縮,http://wportfolio.wzu.edu.tw/blog/attach/995/27995/89/bf_51402_8868906_99219_2yzUdJnLy0AsZ9VdwaKNCA.jpg
*#PNG:不失真,公開格式,https://s-media-cache-ak0.pinimg.com/originals/96/94/ef/9694ef6ecfd562c83e7a445ee9ee19ba.png
*#GIF:可動畫,256色,https://2.bp.blogspot.com/-Ra6UuzwDGQg/WDfdq3X1GjI/AAAAAAAD0gc/MfVErIwBENYRH_DvvFsnThfYp-zVxugEgCLcB/s1600/AS000946_02.gif
*SVG格式具有以下優點:
*#圖檔可讀,易於修改和編輯（理論上如此,但實際上卻是因為各種不同的SVG檔編輯器而可能儲存成不易解讀的SVG檔案）
*#與現有技術可以互動融合,例如,SVG技術本身的動態部分（包括時序控制和動畫）就是基於SMIL標準,另外,SVG檔案還可嵌入JavaScript（嚴格地說，應該是ECMAScript）指令碼來控制SVG物件
*#SVG圖形格式可以方便的建立文字索引,從而實現基於內容的圖像搜尋
*#SVG圖形格式支援多種濾鏡和特殊效果,在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果
*#SVG圖形格式可以用來動態生成圖形,例如,可用SVG動態生成具有互動功能的地圖,嵌入網頁中,並顯示給終端用戶
*SVG格式具有以下缺點：
*#如何和已經占有重要市場份額的向量圖形格式Adobe Animate競爭的問題,事實上,Adobe Animate在Flash CC 2014版及以後的版本就都支援直接匯出SVG檔案了
*#SVG的本地執行環境下的廠家支援程度
*#由於原始的SVG檔是遵從XML語法,導致資料採用未壓縮的方式存放,因此相較於其他的向量圖形格式,同樣的檔案內容會比其他的檔案格式稍大,Adobe因此使用gzip壓縮開發出壓縮的SVG檔格式,附檔名為 .svgz, 但此種檔案格式除了Adobe旗下的軟體以外,未被廣泛支援使用
*#舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形

===2.♪基本架構♪===
*基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」
*SVG主要支援以下幾種顯示物件：
*#向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等
*#嵌入式外部圖像,包括PNG&JPEG&SVG等
*#文字物件
*基本樣式:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg
*基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg

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

===4.♪位移&旋轉&縮放&歪斜♪===
*相關屬性說明：
*#平移變換(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軸歪斜的角度
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/transform.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/bearFace.svg

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

===6.♪定義一次,引用多次♪===
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/uses.svg

===7.♪漸層♪===
*漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得
*「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色
*線性漸層沿著直線從起點到終點建立陰影
*放射性漸層沿著圓形圖樣從起點到終點建立陰影
*尖角漸層繞著起點以逆時針掃射的方式建立陰影
*反射性漸層在起點的一側建立相同的鏡像線性漸層
*菱形漸層從菱形圖樣的中央往外建立陰影
====(1)☆線性漸層☆====
*步驟：
*#不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性
*#在defs段落中定義漸層,並賦予id
*#用fill='url(#某id)'屬性來引用既有的漸層定義
*linearGradient 線性漸層定義語法說明:
*#漸層標籤中的 100%，指的是整個圖形
*#其中的 id 屬性定出漸層名稱
*#由x1,y1,x2,y2四個屬性決定漸層範圍,以及水平,垂直或角形漸層,四個屬性都以百分比表示：
*##x1,y1,x2,y2屬性決定漸層開始和結束位置,x1,x2以圖形的寬度為準,y1,y2以圖形的高度為準
*##當y1和y2相等,而x1和x2不同時,可創建水平漸層
*##當x1和x2相等,而y1和y2不同時,可創建垂直漸層
*##當x1和x2不同,且y1和y2不同時,可創建角形漸層
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/h.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/v.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/arrow.svg

====(2)☆放射漸層☆====
*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%的顏色(黑色)
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball1.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball2.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/ball3.svg

===8.♪柔焦濾鏡♪===
*濾鏡標籤filter語法說明:
*#其中的id屬性定出濾鏡名稱
*#也可以設width,height,x,y去定濾鏡範圍和起點,如沒設以整個圖形為範圍
*#高斯模糊濾鏡feGaussianBlur：濾鏡標籤包住數種不同效果的濾鏡,高斯模糊濾鏡是最簡單的濾鏡
*#高斯模糊濾鏡主要只有一個參數：stdDeviation(標準差),用來控制模糊的程度,數字越大越模糊,數字為零則是圖片原本的狀態
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/sun.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall1.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall2.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/waterfall3.svg

===9.♪path♪===
*path
*#參數大寫代表絕對座標,小寫代表與前一個座標的相對座標
*#點與點之間&同點的x,y座標之間,用空白間開或用,間開兩者是等價的
*http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html
*http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path01.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path02.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path03.svg
*http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/path04.svg

===十、♪動畫♪===

==♡Inkscape♡==

==♡GIS♡==
*何謂 GIS ？
*兩種主要的 GIS 。
*基本框架。
*marks
*overlays
*google 我的地圖
*結合我的地圖與 GIS

==♡圖形計算機♡==
*取得 svgdraw.php
*基本框架
*繪製基本圖形
*函式繪圖
*google 圖形計算機