討論:資訊基礎應用/蕭卉均

出自六年制學程
跳轉到： 導覽、 搜尋

ღ完整筆記ღ

♡環境&工具♡

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&慣用的文字編輯器：♕編輯/設定/檔案編輯♕，選用♕使用自訂編輯器♕&♕總是使用預設的編輯器♕，並指定編輯器的路徑
  • 課後重點筆記:
    1. table是開始,/table是結束
    2. IP:IP4,最多表達到255字,IPV4一般網頁使用,IP6,物聯網用
    3. 物聯網:簡單說一切事物,得失相兼
    4. 域名:域名伺服器(HOSTS)
    5. AI(人工智慧)
    6. big5,早期,只有繁體中文
    7. 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）是一種標記式語言,標記指電腦所能理解的資訊符號,通過此種標記,電腦之間可以處理包含各種資訊的文章等
  • 課後筆記:
    1. 筆記網頁建設:登入後搜尋{資訊基礎應用/蕭卉均}→點一下，開始編輯→編輯完點儲存頁面
    2. 色碼表: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>
蕭卉均0939912983suzy92126@gmail.com

♡ wiki ♡

♡CSS♡

  • 何謂CSS:層疊樣式表（英語：Cascading Style Sheets,簡寫CSS）又稱串樣式列表&級聯樣式表&串接樣式表&層疊樣式表&階層式樣式表,一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言,由W3C定義和維護,目前最新版本是CSS2.1，為W3C的推薦標準,CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中
  • 用法:限制者才有標章,不限制者沒有標章
  • 重要語法:
    1. Attribution(BY):姓名標示,您（使用者）可以複製&發行&展覽&表演&放映&廣播或通過資訊網路傳播本作品；您必須按照作者或者授權人指定的方式對作品進行姓名標示
    2. NonCommercial(NC):非商業性使用,您可以自由複製&散布&展示及演出本作品；您不得為商業目的而使用本作品
    3. NoDerivs(ND):禁止改作,您可以自由複製&散布&展示及演出本作品；您不得改變&轉變或更改本作品
    4. ShareAlike(SA):相同方式分享,您可以自由複製&散布&展示及演出本作品；若您改變&轉變或更改本作品,僅在遵守與本作品相同的授權條款下,您才能散布由本作品產生的衍生作品

♡SVG♡

1.♪概述♪

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

2.♪基本架構♪

  • 基本架構:SVG允許3種圖形物件類型：向量圖形,柵格圖像以及文字,圖形物件——包括PNG&JPEG這些柵格圖像——能夠被編組&設計&轉換及整合進先前的彩現物件中,文字可以在任何適用於應用程式的XML命名空間之內,從而提高SVG圖形的搜尋能力和無障礙性,SVG提供的功能集涵蓋了巢狀轉換&裁剪路徑&Alpha通道&濾鏡效果&模板物件以及可延伸性,SVG嚴格遵從XML語法,並用文字格式的描述性語言來描述圖像內容,因此是一種和圖像解析度無關的向量圖形格式,SVG可以實現動態和互動功能,在DOM模型的基礎上,SVG開發設計人員可以利用ECMAScript或者SMIL來進行時序控制或物件的操縱,SVG雖然是文字格式,但是SVG支援利用gzip壓縮演算法減少檔案尺寸,壓縮後的檔案通常用被稱為「SVGZ檔案」
  • SVG主要支援以下幾種顯示物件：
    1. 向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等
    2. 嵌入式外部圖像,包括PNG&JPEG&SVG等
    3. 文字物件
  • 基本樣式: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
    1. 在「text」標籤開始與結束之間夾字,可用中英文,而使用「屬性」來規定文字的表現,所有的屬性都可以改用樣式來表達
    2. 可用中文字形：
      1. 屬性dx和dy基於前一個字的位置去做變化：值可為'10,20,30,40'，字的距離一個比一個更遠
      2. 屬性x和y標示字的起點：值可為'10,20,30,40'，表示每個字的x或y座標
      3. 屬性fill控制填入字的顏色,預設黑色
      4. 屬性stroke控制字描框的顏色,預設 none
      5. 屬性rotate='30'順時鐘轉30°。rotate='30,60,90,120,150,180,210'指定每個字的轉動角度
      6. 用style控制字體&字形&尺寸,但顏色是用fill不是用color
  • http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/text.svg

4.♪位移&旋轉&縮放&歪斜♪

  • 相關屬性說明：
    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，作等比例縮放
    4. 歪斜變換(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.♪群組♪

6.♪定義一次,引用多次♪

7.♪漸層♪

  • 漸層和濾鏡如果取中文名稱,瀏覽器還認得,但Inkscape和線上轉檔軟體就會不認得
  • 「漸層」工具可以在多種顏色之間建立漸層混合,您可以從預設漸層填色中選擇,或是建立自己的漸層填色
  • 線性漸層沿著直線從起點到終點建立陰影
  • 放射性漸層沿著圓形圖樣從起點到終點建立陰影
  • 尖角漸層繞著起點以逆時針掃射的方式建立陰影
  • 反射性漸層在起點的一側建立相同的鏡像線性漸層
  • 菱形漸層從菱形圖樣的中央往外建立陰影

(1)☆線性漸層☆

(2)☆放射漸層☆

  • radialGradient 放設漸層定義語法說明:
    1. 漸層範圍：由cx,cy,r三個屬性決定,三個屬性都以百分比表示,漸層範圍是一個圓或橢圓
      1. cx表示範圍中心在圖寬百分之幾的位置
      2. cy表示範圍中心在圖高百分之幾的位置
      3. r如果圖形寬&高相等則範圍為圓,r代表範圍圓半俓除以圖形寬或高；如果圖形寬&高不相等則範圍為橢圓,r代表範圍橢圓的長短軸半長除以圖形寬或高；注意：r為50%,範圍圓直徑恰等於圖的寬或高
    2. 設色中心：由fx,fy兩個屬性決定的位置,就是設色為0%的地方,兩個屬性都以百分比表示
      1. fx表示設色中心在圖寬百分之幾的位置
      2. fy表示設色中心在圖高百分之幾的位置
      3. 設色100%的地方在範圍圓或範圍橢圓的圓周上
    3. 設色標籤stop,漸層標籤包住數個stop標籤,每種顏色通過一個stop標籤來規定
      1. offset屬性用來定義漸層的開始和結束位置,其100%是指整個漸層範圍
      2. stop-color屬性用來定義顏色,也可以做為style的樣式
      3. stop-opacity屬性決定透明度,也可以做為style的樣式
    4. 以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.♪柔焦濾鏡♪

9.♪path♪

10.♪動畫♪

  • 四標籤：
    1. set(開關)
    2. animate(屬性連續改變)
    3. animateTransform(平移,旋轉,縮放)
    4. animateMotion(循跡運動)
  • 共通語法：將母圖形分拆成開始和結束兩標籤,中間插入動畫標籤
  • 共通屬性：
    1. attributeName：
      1. set,animate為某一個母圖形的屬性,from和to就是這個屬性的值將由多少變到多少
      2. animateTransform為'transform'另搭配type屬性
      3. animateMotion免設此屬性
    2. type屬性之值(animateTransform專用)：
      1. rotate旋轉,影響屬性from='起始角度,旋轉軸心x座標,旋轉軸心y座標'、to='結束角度,旋轉軸心x座標,旋轉軸心y座標'
      2. scale縮放,影響屬性from='x起始倍率,y起始倍率'、to='x結束倍率,y結束倍率'，倍率是自左上原點開始算,如果同組x,y倍率相同,可以只寫一個值
      3. translate平移,影響屬性from='起始原點x座標,起始原點y座標'、to='結束原點x座標,結束原點y座標'
      4. skewX X軸不動,X軸下方向右歪斜,影響屬性from='起始歪斜角度'、to='結束歪斜角度'
      5. 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專用)圖形隨路徑曲度而轉折
  • http://jendo.org/~admin/path5.svg
  • http://jendo.org/~admin/path6.svg
  • https://msdn.microsoft.com/zh-tw/library/gg193979(v=vs.85).aspx

♡Inkscape♡

♡GIS♡

  • 何謂GIS:地理資訊系統（英語：Geographic Information System,縮寫：GIS）是指在地圖上加上數據或訊息,結合地理學與地圖學,已經廣泛的應用在不同的領域,是用於輸入&儲存&查詢&分析和顯示地理資料的電腦系統,GIS屬於資訊系統的一類,不同在於它能運作和處理地理參照資料,地理參照資料描述地球表面（包括大氣層和較淺的地表下空間）空間要素的位置和屬性,在GIS中的兩種地理資料成分：空間資料,與空間要素幾何特性有關；屬性資料,提供空間要素的資訊
  • 兩種主要的GIS:
    1. google map：google釋出的地圖庫,公布了API使得用戶能夠建立自訂的應用,公開格式,但非公共版權內容
    2. OpenStreetMap：(開放街圖，簡稱OSM),於2004年由英國的Steve Coast發起,採用類似Wiki的協作編輯以及開放的授權與格式
  • 基本框架:比較出名的GIS底層數據框架GDAL
    1. 地圖的需求:
      1. 點擊地物,顯示地物的屬性信息和關聯的數據
      2. 單值&分段專題圖
      3. 連接業務數據庫獲取最新數據
      4. 疊加不同地圖
  • marks:標點
  • overlays:標區域
  • 課後重點:
    1. 經緯度,1度=60分,1分=60秒
    2. 先南北,後東西
    3. 括號&引號必須成對:
      1. 所有字和符號都用「英數」&「半形」符號,不可以用全形符號
      2. 所有的小括號&中括號&大括號&單引號&雙引號都要成對
      3. 每一對大括號代表一個東西(物件),東西裡面可以包進去更小的東西,東西不一定要取名字,例如：
        1. 一張地圖
        2. 一個覆蓋物
        3. 一個經緯度座標點
        4. 一個地點標示
        5. 一個html指示
      4. 每一對中括號裡面包一群相同的東西,例如：
        1. 一群marker包成一組,名字叫markers；
        2. 一群overlay包成一組,名字叫overlays；
        3. 一群coord(經緯度座標)包成一組,名字叫coords
      5. 每一對小括號中代表「函式」要作用的對象,現在先不必記它
    4. 整張圖的性質:
      1. 調整比例尺的性質：zoom:1~20,1比例尺最大,20比例尺最小
      2. 標定整張地圖中心點位置的性質：
        1. latitude:緯度,十進位
        2. longitude:經度,十進位
        3. address:地址,如：土耳其
      3. 地圖種類：maptype:值加引號有四種選擇：
        1. ROADMAP：道路地圖
        2. SATELLITE：衛星空照圖
        3. HYBRID：道路與空照圖相疊加
        4. TERRAIN：地形圖
      4. markers：各個地點標示
      5. overlays：各個覆蓋物
    5. 標點:
      1. 性質的名稱和性質的「值」用「:」連接
      2. 同一級或同一組的東西並列時,用「,」分開,但是最後一個性質或東西後面不可以加「,」,因為後面沒有東西了
      3. HTML中的樣式語法有點像GIS中性質語法,但前者是用「;」間隔開兩組樣式,後者是用「,」間隔開兩組性質或東西
    6. markers內參數:
      1. 整個markers:後面用一個中括號把所有的點包起來,中括號裡面,每一組大括號是一個點
      2. 第一個marker為整張圖的中心點,優先於整張圖的中心點
      3. 每一個點內,諸參數如下：
        1. address:值為字串,故加引號,可用國名如「台灣」或地址如「台灣新北市三重區捷運路」
        2. html:放物件,內含：
          1. content:HTML碼
          2. popup:false不主動彈出；true主動彈出
        3. title:游標停住會顯示
        4. draggable:true代表可拖動
        5. icon:字串,代表圖檔
    7. overlays內參數:
      1. 每一個覆蓋物用大括號包起來,所有的覆蓋物用中括號包起來
      2. 每一個覆蓋物共有的性質有：type&color&fillColor
      3. 四種覆蓋物各自的參數：
        1. circle圓：latitude&longitude&radius
        2. polyline線：coords
        3. polygon多邊形：coords
        4. rectangle方形(矩形)：ne&sw
    8. 地圖:
      1. hl=zh-TW：主機語言
      2. ie=UTF8：指定輸入的字符編碼
      3. oe=UTF8：指定輸出的字符編碼
      4. t=h：地圖類型,m為常規地圖,k為衛星地圖,h為混合地圖,p為地域地圖
      5. ll=24.945655,121.454673：地圖中心點經緯度
      6. z=16：放大縮小,值範圍1~20,1比例尺最大,20比例尺最小
      7. source=embed：原始碼嵌入
      8. dg=feature：自動產生,不必下命令
      9. GIS←kml←google 我的地圖
  • google我的地圖:
    1. http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/gis1.html
    2. http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/GIS2.HTML
    3. http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/google.html
  • 結合我的地圖與GIS:
    1. http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E4%BB%A5%E8%89%B2%E5%88%97.HTML
    2. http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/%E6%97%A5%E6%9C%88%E6%BD%AD.html
  • https://www.google.com/maps/d/

♡圖形計算機♡

  • 課後重點:
    1. 基本圖紙：
      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';
    2. 基本圖：$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);
    3. 多項式：
      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,
  • 取得svgdraw.php:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo0.php
  • 基本框架:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo00.php
  • 繪製基本圖形:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo03.php
  • 函式繪圖:http://6years.jendo.org/~%E8%95%AD%E5%8D%89%E5%9D%87/SVG/demo3.php
取自「http://jendo.org/wiki1231/index.php?title=討論:資訊基礎應用/蕭卉均&oldid=37932」