檢視討論:資訊基礎應用/張鈞祺的原始碼



==1 環境以工具==
====1.1 一、環境====
====1.2 二、工具與設定====
'''firefox

firefox優點  

 1. 不容易中毒
 
 2. 有精選網站功能


firefox缺點
 
 1. 沒有自己的搜尋引擎
 
 2. 歷史紀錄資料不好找'''

filezilla

FileZilla是一種快速、可信賴的FTP用戶端以及伺服器端開放原始碼程式，具有多種特色、直覺的介面。

FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案。

EmEditor

==2 HTML與HTTP==

標籤
====
html     超文件(HyperText Markup Language)
head     文件頭
title    標題
body     本文

a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       表內之格(table diamond)
th       表內之格(table head diamond)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

style    宣告樣式(修飾一個超文件)
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單

屬性(用=連等號兩邊)
====
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡，預設值為本頁的本窗框，值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度，可以用點(px,pt)或長度(cm)或百分比表示
height=   高度，可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。

樣式(用:連冒號兩邊)
====
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線

'''HTTP

HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起

HTML

HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及'''

==3 wiki==
<table class=nicetable>
<tr><th>語法</th><th>顯示</th><th>說明</th></tr>
<tr>
<th><pre>
#AAA
#BBB
#CCC
</pre></th>
<th>
#AAA
#BBB
#CCC
</th>
<th>井號</th>
</tr>
<tr>
<th><pre>
*AAA
*BBB
*CCC
</pre></th>
<th>
*AAA
*BBB
*CCC
</th>
<th>星號</th>
</tr>
<tr>
<td><pre>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</pre></td>
<td>
*AA
*#AA1
*#AA2
*BB
*#BB1
*#BB2
</td>
<th>先星後井</th>
</tr>
<tr>
<td><pre>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</pre></td>
<td>
#AA
#*AA1
#*AA2
#BB
#*BB1
#*BB2
</td>
<th>先井後星</th>
</tr><tr>
<td><pre>
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======
</pre></td>
<td>
<p style='font-size:150%;border-bottom:1px solid #aaa;'>中標</p>
<p style='font-size:132%;font-weight:bold;'>小標</p>
<p style='font-size:116%;font-weight:bold;'>小小標</p>
<p style='font-size:100%;font-weight:bold;'>加粗標</p>
<p style='font-size:80%;font-weight:bold;'>超小標</p>
</td>
<th>段落標題，等號多標題小</th>
</tr>
<tr>
<td><pre>
=大標=
</pre></td>
<td>
<p style='font-size:188%;border-bottom:1px solid #aaa;'>大標</p>
</td>
<th>請不要用，這是留<br/>給議程題目用的。</th>
</tr>
<tr>
<td><pre>
[http://jendo.org 振鐸網站]
格式：[URL 連結說明]
</pre></td>
<th>
[http://jendo.org 振鐸網站]
</th>
<th>外部連結：一層中<br/>括號包著 URL，空<br/>白後放連結說明。</th>
</tr>
<tr>
<td><pre>
[[首頁|這是首頁]]
格式：[[頁面名稱|連結說明]]
中括號內也可只寫頁面名稱
</pre></td>
<th>
[[首頁|這是首頁]]
</th>
<th>內部連結：兩層中括<br/>號包著「頁名」，豎<br/>槓(|)後放連結說明。</th>
</tr>
<tr>
<td><pre>
[[檔案:Go top.gif]]
格式：[[檔案:檔名|圖長|圖寬|…]]
</pre></td>
<th>
[[檔案:Go top.gif]]
</th>
<th>
插入圖照也是內部連結<br/>
。所以請先上傳圖照。<br/>
請勿非法上傳圖照。</th>
</tr>
</table>
<!--
<tr>
<th><pre>
</pre></th>
<th>
</th>
<th></th>
</tr>
</table>
-->

==4 CSS==
==5 SVG==
====5.1 一、概述====

'''SVG格式具有以下優點：'''

放大不會毛邊

圖檔可轉為程式碼，易於修改和編輯  

SVG圖形格式可以方便的建立文字索引。

SVG圖形格式支援多種濾鏡和特殊效果，在不改變圖像內容的前提下可以實現點陣圖格式中類似文字陰影的效果。


'''SVG格式具有以下缺點：'''

由於原始的SVG檔是遵從XML語法，導致資料採用未壓縮的方式存放，因此相較於其他的向量圖形格式，同樣的檔案內容會比其他的檔案格式稍大。

舊版的SVG Viewer無法正確顯示出使用新版SVG格式的向量圖形。


'''1：開啟fielzilla，連線至自己的站台管理員''' 

'''2：home>www>SVG，在這個資料夾中，建立新檔案。'''

'''3：命名，然後記得要加入副檔名.svg'''

'''4：寫入程式碼。'''

====5.2 二、基本架構====


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


&lt;</svg></pre>

====5.3 三、文字====

<div class='mw-collapsible mw-collapsed' style='width:100%'>
*#Monospace：等寬字型(非調和字)
*#Sans：無襯線體(黑體，哥德體)
*#Serif：襯線體(筆畫末端的裝飾細節，白體，羅馬體)
*#KaiTi：楷體
*#MingLiU：明體
*#PMingLiU：明體
*#MingLiU_HKSCS：明體
*#FangSong：仿宋
*#NSimSun：新宋
*#SimHei：新黑
*#Microsoft YaHei：微軟雅黑體
*#Microsoft JhengHei：微軟正黑體
*#Arial Unicode MS：微軟 Arial 體
*#DFBiaoKaiShu-B5：華康楷書體
*#DFHKStdKai-B5：華康標楷體
*#DFHKStdSong-B5：華康標宋體
*#DFBiaoSong-B5：華康宋體
*#DFHeiUBlod-B5：華康特粗黑體
*#DFHeiBlod-B5：華康粗黑體
*#DFHeiMedium-B5：華康中黑體
*#DFHeiLight-B5：華康細黑體
*#DFBiaoKaiShu-B5：華康楷書體
*#…：華康眾字體，族繁不及備載
*#Segoe UI：微軟 Segoe UI 字形
*#Tahoma：微軟 Tahoma 字形
*#Meiruo：日文明瞭體
*#Meiruo UI：日文明瞭體
*#MS Gothic：微軟日文哥德體
*#MS Mincho：微軟日文明朝體
*#MS PGothic：微軟日文哥德體
*#MS PMincho：微軟日文明朝體
*#MS UI Gothic：微軟日文哥德體
*#MS Mincho：微軟日文明朝體
</div>

svg文字範例

<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E5%BC%B5%E9%88%9E%E7%A5%BA.svg">

內碼

<pre><?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='130' height='90'>
	&lt;<text x='40' y='50' style='font-family:kaiti;fill:#00ff00'>張</text>
        &lt;<text x='55' y='50' style='font-family:kaiti;fill:#ff0000'>鈞</text>
        &lt;<text x='70' y='50' style='font-family:kaiti;fill:#0000ff'>祺</text>

&lt;</svg></pre>

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


<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E7%82%BA%E4%B8%80.svg">

<pre><?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:#000;stroke-dasharray:2 2;stroke-width:0.5pt;' />
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#0ff;fill:none;stroke-width:1pt;' transform='translate(25,50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f0f;fill:none;stroke-width:1pt;' transform='rotate(90) translate(50,-50)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#f0f;fill:none;stroke-width:1pt;' transform='translate(75,50) rotate(90)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#ff0;fill:none;stroke-width:1pt;' transform='translate(100,50) rotate(180) scale(0.8)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#ff0;fill:none;stroke-width:1pt;' transform='translate(125,50) rotate(180) scale(0.8) skewX(30)'/>
	<polygon points='0,0 5,-5 -12.5,0 5,5' style='stroke:#ff0;fill:none;stroke-width:1pt;' transform='translate(150,50) rotate(180) scale(0.8) skewY(30)'/>
&lt;</svg></pre>


====5.5 五、群組====
====5.6 六、定義一次，引用多次====

<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E8%8A%B1%E8%8A%B1.svg">



<pre><?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:blue;'/>
</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>
&lt;</svg></pre>




====5.7 七、漸層====
====5.7.1 (一)線性漸層====

<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E8%97%8D%E7%B6%A0.svg">

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

&lt;</svg></pre>

====5.7.2 (二)放射漸層====
<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E7%B1%83%E7%90%83.svg">


<pre><?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='750' height='750'>
<defs>
	<radialGradient id='r2' cx='50%' cy='50%' r='50%'>
		<stop offset='0%' stop-color='#99FFFF'></stop>
		<stop offset='30%' stop-color='#66FFFF'></stop>
		<stop offset='70%' stop-color=' #5599FF '></stop>
		<stop offset='100%' stop-color='#0000FF'></stop>
	</radialGradient>
</defs>
<circle cx='200' cy='200' r='200' fill='url(#r2)'/>

&lt;</svg></pre>

====5.8 八、柔焦濾鏡====
<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E5%98%8D%E5%90%88%E7%8E%87%E8%BF%91.svg">


<pre>&lt;?xml version='1.0' encoding='UTF-8' standalone='no'?&gt;

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='160' height='160'>
<defs>
	<radialGradient id='r4' cx='50%' cy='50%' r='50%' >
		<stop style='stop-color:#33CCFF ' offset='0%' />
		<stop style='stop-color:#00BBFF ;stop-opacity:.98' offset='50%' />
		<stop style='stop-color:#009FCC;stop-opacity:.98' offset='100%' />
	</radialGradient>		
	<filter id='f1' >
		<feGaussianBlur stdDeviation='3' />
	</filter>
</defs>
<circle cx='79' cy='79' r='75' style="fill:url(#r4);filter:url(#f1);" />

&lt;/svg&gt;</pre>

====5.9 九、path====
'''線性貝茲曲線''' 
給定點'''P'''<sub>0</sub>、'''P'''<sub>1</sub>，線性貝茲曲線只是一條兩點之間的直線。這條線由下式給出：

:<math>\mathbf{B}(t)=\mathbf{P}_0 + (\mathbf{P}_1-\mathbf{P}_0)t=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]</math>
且其等同於線性插值。
#一次：<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/B%C3%A9zier_1_big.gif' width='240px' height='*' />

'''二次方貝茲曲線'''
二次方貝茲曲線的路徑由給定點'''P'''<sub>0</sub>、'''P'''<sub>1</sub>、'''P'''<sub>2</sub>的函數'''B'''（''t''）追蹤：
: <math>\mathbf{B}(t) = (1 - t)^{2}\mathbf{P}_0 + 2t(1 - t)\mathbf{P}_1 + t^{2}\mathbf{P}_2 \mbox{ , } t \in [0,1]</math>。

TrueType字型就運用了以貝茲樣條組成的二次貝茲曲線。

#二次：<img src='https://upload.wikimedia.org/wikipedia/commons/3/3d/B%C3%A9zier_2_big.gif' width='240px' height='*' />　<img src='https://upload.wikimedia.org/wikipedia/commons/6/6b/B%C3%A9zier_2_big.svg' width='240px' height='*' />

'''三次方貝茲曲線'''
'''P'''<sub>0</sub>、'''P'''<sub>1</sub>、'''P'''<sub>2</sub>、'''P'''<sub>3</sub>四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始於'''P'''<sub>0</sub>走向'''P'''<sub>1</sub>，並從'''P'''<sub>2</sub>的方向來到'''P'''<sub>3</sub>。一般不會經過'''P'''<sub>1</sub>或'''P'''<sub>2</sub>；這兩個點只是在那裡提供方向資訊。'''P'''<sub>0</sub>和'''P'''<sub>1</sub>之間的間距，決定了曲線在轉而趨進'''P'''<sub>2</sub>之前，走向'''P'''<sub>1</sub>方向的「長度有多長」。

#三次：<img src='https://upload.wikimedia.org/wikipedia/commons/d/db/B%C3%A9zier_3_big.gif' width='240px' height='*' />　<img src='https://upload.wikimedia.org/wikipedia/commons/8/89/B%C3%A9zier_3_big.svg' width='240px' height='*' />

'''四次方貝茲曲線''' 
#四次：<img src='https://upload.wikimedia.org/wikipedia/commons/a/a4/B%C3%A9zier_4_big.gif' width='240px' height='*' />　<img src='https://upload.wikimedia.org/wikipedia/commons/b/bf/B%C3%A9zier_4_big.svg' width='240px' height='*' />

'''五次方貝茲曲線''' 
#五次：<img src='https://upload.wikimedia.org/wikipedia/commons/0/0b/BezierCurve.gif' width='240px' height='*' />

====5.10 十、動畫====

==6 Inkscape==
Inkscape是一套向量圖形編輯器，以自由軟體授權發布與使用。該軟體的開發目標是成為一套強力的繪圖軟體，且能完全遵循與支援XML、SVG及CSS等開放性的標準格式。Inkscape是一套跨平台性的應用程式，Windows、Mac OS X、Linux及類UNIX版等作業系統。

<img src ="http://6years.jendo.org/~%E5%BC%B5%E9%88%9E%E7%A5%BA/%E6%81%90%E9%BE%8D.svg">

==7 GIS==

地理資訊系統是一套
可以進行
蒐集 、儲存  、管理  ，更新  、轉換  、分析  以及展示
地理 現象與其相關的資
訊整合系統
，能幫助我們處理地理資料與空間決策
，主要透過疊圖及空間分析
等功能  ，將原始地
理資
料轉變為能支援空間決策的資訊
。 


'''GIS基本指令'''

<pre><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({
		zoom:17,
		markers:[

		],
	}); 
});
</script>
&lt;<div align=center id='map' style='height:550px; width:900px;'>239新北市鶯歌區永明街58號</div></pre>

==8 圖形計算機PHP==
PHP是一種開源的通用電腦手稿語言，尤其適用於網路開發並可嵌入HTML中使用。PHP的語法借鑑吸收C語言、Java和Perl等流行電腦語言的特點，易於一般程式設計師學習。PHP的主要目標是允許網路開發人員快速編寫動態頁面，但PHP也被用於其他很多領域。
PHP最初是由勒多夫在1995年開始開發的；現在PHP的標準由the PHP Group維護。PHP以PHP License作為許可協議，不過因為這個協議限制了PHP名稱的使用，所以和開放原始碼許可協議GPL不相容