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

出自六年制學程
< 討論:資訊基礎應用
在2018年1月16日 (二) 17:11由蕭卉均（對話 | 貢獻）所做的修訂版本

跳轉到： 導覽、 搜尋

ღ完整筆記ღ

♡環境&工具♡

1.環境

  • 伺服器與域名,伺服器DS216,網址6years.jendo.org
  • wifi,區網wifi：jendod&jendoa
  • 網站空間,瀏覽器：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檔案」
  • 基本樣式: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
  • SVG主要支援以下幾種顯示物件：
    1. 向量顯示物件,基本向量顯示物件包括矩形&圓&橢圓&多邊形&直線&任意曲線等
    2. 嵌入式外部圖像,包括PNG&JPEG&SVG等
    3. 文字物件

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

5.群組

6.定義一次,引用多次

7.漸層

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

(1)線性漸層

  • 步驟：
    1. 不用添加svg標籤的屬性：xmlns:xlink='http://www.w3.org/1999/xlink'，不會用到href屬性
    2. 在defs段落中定義漸層,並賦予id
    3. 用fill='url(#某id)'屬性來引用既有的漸層定義
  • linearGradient 線性漸層定義語法說明:
    1. 漸層標籤中的 100%，指的是整個圖形
    2. 其中的 id 屬性定出漸層名稱

(2)放射漸層

八、柔焦濾鏡

九、path

十、動畫

Inkscape

GIS

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

圖形計算機

  • 取得 svgdraw.php
  • 基本框架
  • 繪製基本圖形
  • 函式繪圖
  • google 圖形計算機
取自「http://jendo.org/wiki1231/index.php?title=討論:資訊基礎應用/蕭卉均&oldid=37890」