檢視資訊基礎應用筆記/曲汝川的原始碼

[[分類:資訊基礎應用]]
<mwdetails><summary>電腦與網路資源</summary>
*知識：
*#什麼是 UTF-8？ 萬國碼。
*#區分客戶端與伺服器端。伺服器端是遠程伺服器，運行結果是由伺服器產生的；客戶端就是網友的電腦。
*#怎麼線上解壓縮 zip 檔？ https://apps.apple.com/tw/app/the-unarchiver/id425424353?mt=12。
*#何謂 CC 授權？
#*#無特定對象授權，只要遵守規則都可用
#*#可設定期間
#*#姓名表示/人物授權(著作人格權)
#*#創作者可決定是否能營利(斜槓$=不可)
#*#不准修改(=)(ex.宣言)
#*#相同方式分享(倒C/循環符號)，需允許後面的人繼續改
#*#無任何標章則可修改
#*#作者亡故/發表50年以上，著作權開放
#*#最常見：姓名表示+相同方式分享
*#何謂綠色軟體？指一類小型軟體，多數為免費軟體，最大特點是軟體無需安裝便可使用，可存放於快閃記憶體中（因此稱為可攜式軟件），移除後也不會將任何紀錄（登錄檔訊息等）留在本機電腦上。

 
*#解釋十六進位與十進位的差別 它們之間區別在於數運算時是逢幾進一位。
*#解釋「色碼」色碼是以十六進位值來代表不同色彩模式中的顏色的一種方式。 十六進位色碼的格式為#RRGGBB，其中RR是紅色，GG是綠色，而BB則是藍色。 這些十六進位整數可以落在00到FF的範圍內以指定顏色的強度。
*#解釋 ASCII ASCII最初基於英文字母表，將 128 個指定字符編碼為 7 位整數。九十五個編碼字符是可打印的：包括數字0到9、小寫字母a到z、大寫字母A到Z和標點符號。
*技能：
*#顯示或隱藏檔案副檔名 在Mac 上選取檔案，然後選擇「檔案」>「取得資訊」或按下Command + I。 請按一下「名稱與副檔名」旁的箭頭 來展開此區域。 若要顯示或隱藏檔案副檔名，請勾選或取消勾選「隱藏副檔名」。
*#用 google 找圖照 搜尋「普丁騎熊」當網頁跳出來之後點images
*#找圖的網址 瘋狂點你要的圖點到出現類似這樣的網址https://cdn2.ettoday.net/images/3157/d3157950.jpg
*#怎麼複製出含中文的網址 把除了中文以外的網址先複製貼上 然後再把中文的部分複製貼上
*#找出綠色軟體市集 https://www.azofreeware.com/search?q=阿榮 可以去這裡找綠色軟體
*範例：<img src='https://stickershop.line-scdn.net/stickershop/v1/product/8210942/LINEStorePC/main.png'width=500 height=*/>

*英文：
**阿榮福利味＝azofreeware
**圖片＝images
</mwdetails>

<mwdetails><summary>維基共享資源</summary>
*知識：
*#維基共享資源大約有多少資源？ 截至2018年，維基共享資源擁有超過4400萬個多媒體檔案。
*技能：
*#註解 註解指令 < !--(不表現)-->
*#找圖照 
**搜尋「維基共享資源」
**打開維基共享資源網頁
**在「搜尋」打自己要的圖片
**點進去就對了！
*#找縮圖網址
**重複上述動作
**打開圖片後複製網址就好了
*#縮圖網址的格式
**https://upload.wikimedia.org/wikipedia/commons/6/6c/【桃園市。美食】老咩~彩虹蛋糕_%2832580407673%29.jpg
*#找某張圖被哪些 wiki 頁使用
**圖片介紹頁
**檔案全域使用
*#找某人上傳的縮圖
**打開維基共享資源
**在網頁左邊找「特殊頁面」
**到「媒體報導和上傳」點「文件清單」
**在搜尋匡打入用戶名
**大功告成！
*#用分類找圖
**打開維基共享資源網頁
**找「內容」
*範例：
*英文：
</mwdetails>

<mwdetails><summary>wiki</summary>
*知識：
*#什麼是 wiki？ wiki是一種可通過瀏覽器存取並由使用者協同編輯其內容的網站。沃德·坎寧安於1995年開發了最初的wiki。他將wiki定義為「一種允許一群使用者用簡單的描述來建立和連接一組網頁的社會計算系統」。
*技能：
*#怎麼打出角括號：&lt; &gt; &amp;
**將語言轉為英文
**按shift 
**按上面有角括號畫的鍵
*#註解 註解指令 < !--(不表現)-->
*#下段標 ==段落名稱==
*#有序列點 #
*#無序列點 **
*#外部連結 [       ]
*#內部連結 [[      ]]
*#連續文字分段 用空白行分段
*#嵌入圖照 < img src='' width=500 height=*/>
*#嵌入 youtube 影片 < videoflash>youtub影片id< /videoflas>
*#嵌入非 youtube 影片 < videoflash src='網址放這' type=html5 width='500'>< /videoflash> 
*#嵌入 wiki 頁 {{網站前置字:名字空間:頁名}} 或 {{:頁名}}
*範例：<img src='https://stickershop.line-scdn.net/stickershop/v1/product/8210942/LINEStorePC/main.png'width=500 height=*/>

</mwdetails>
<mwdetails><summary>HTML</summary>
*知識：
*#什麼是 HTML ？HTML，中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。
*#什麼是 http ？HTTP的全名為「超文本傳輸協定」是一種用於分佈式、協作式和超媒體資訊系統的應用層協議，也是是全球資訊網Internet的資料通訊的基礎。
*#http 和 https 的差別？https有傳輸過程加密保護http則沒有
*#分辨顯示與原始碼 顯示＝原始碼解讀之後
*技能：
*#看原始碼 按 option+command+u
*#註解 註解指令 < !--(不表現)-->
*#使用 html,head,body 三標籤
*#用 titl 標籤，改變頁籤文字
*#指定 HTML 為 UTF-8 編碼
*#p 標籤，font-size,font-family,text-align 三樣式
*#有序列點 #
*#無序列點 **
*#span 標籤
*#做表格
<table class=nicetable align=center style='border:solid 10px #D7BDE2;border-collapse:collapse;'>

<tr><th>                     </th><th>                   </th><th>                     </th><th>                     </th></tr>
<tr><td >                     </td><td>                     </td><td>                     </td><td>                   </td></tr> 
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td/>                     </td><td/>  </td><td/>  </td><td/>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>   </td></tr>
<tr><td>                                        </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
<tr><td>                     </td><td>  </td><td>  </td><td>  </td></tr>
</table>


*##border-collapse 樣式
*##表格調中
*#超連結 <a href="https://en.wikipedia.org/wiki/Feces">大便</a> 
*#連續文字分段 用空白行分段
*#嵌入圖照 < img src='' width=500 height=*/>
*#嵌入影片 < videoflash src='網址放這' type=html5 width='500'>< /videoflash> 
*#水平線 <hr> 标签
*#標題一級到六級
=大標=
==中標==
===小標===
====小小標====
=====加粗標=====
======超小標======
*#區塊
*範例：
*#全班通訊
<table class=nicetable align=center style='border:solid 10px #D7BDE2;border-collapse:collapse;'>

<tr><th>姓名</th><th>line</th><th>email</th><th>備註</th></tr>
<tr><td >曲汝川</td><td>Ruru</td><td>karunaschuyler@gmail.com</td><td>學生</td></tr> 
<tr><td>亣騭</td><td>Rio</td><td>williamyang300@gmail.com</td><td>yes</td></tr>
<tr><td/>藍寧</td><td/>賽特咩</td><td/>Ninellampe@gmail.com</td><td/>神明</td></tr>
<tr><td>黃顯淳</td><td></td><td>burt961007@gmail.com</td><td>備註</td></tr>
<tr><td>吳亞飛</td><td>亞飛(豆子)</td><td>yafei071020@gmail.com</td><td>學生</td></tr>
<tr><td>徐恕禾</td><td>恕</td><td>i61021221@gmail.com</td><td>Studentessa</td></tr>
<tr><td>李昀蓁</td><td>兔紙</td><td>alikayuen921@gmail.com</td><td>"buona" compagna</td></tr>
<tr><td>黃稚博</td><td>自拔</td><td>burtfook@gmail.com</td><td>"buona" compagna</td></tr>
<tr><td>鄭云禎</td><td>YUN</td><td>lola20040427@gmail.com</td><td>"buona" compagna</td></tr>
<tr><td>徐慕禾</td><td>慕哥</td><td>momo020219@gmail.com</td><td>Studente</td></tr>
<tr><td>張棨翔</td><td>翔❤</td><td>su20125012@gmail.com</td><td>學生</td></tr>
<tr><td>丁志仁</td><td>丁志仁</td><td>aledu2@gmail.com</td><td>老師</td></tr>
</table>



*英文：
</mwdetails>

<mwdetails><summary>CSS</summary>
*知識：
*#什麼是 CSS ？CSS（是 「層疊樣式表單」的意思，也可以叫作「層疊樣式表」，實際上CSS語言是一組樣式，是一個用於網頁排版的標記性語言。它是由W3C協會制定並發布的一個網頁排版式標準，是對HTML語言功能的補充。

*技能：
*#style 屬性格式語法< style type="text/css">p {color: #7d7a00;}
</style>
*#如何樣式定義一次，引用多次
{{#css:
.nicetable {color:#2d5391;border:2pt solid #7d7a00;border-collapse:collapse;}
.nicetable td {color:#2d5391;border:1pt solid #7d7a00;border-collapse:collapse;}
.nicetable th {color:#2d5391;border:1pt solid #7d7a00;border-collapse:collapse;}
}}

*範例：
*英文：
style=屬性 border=邊界 collapse=下拉式選單
</mwdetails>
<mwdetails><summary>SVG</summary>
*知識：
*#什麼是 SVG ？SVG 代表可縮放矢量圖形。
*#什麼是 XML ？可延伸標記式語言是一種標記式語言。標記指電腦所能理解的資訊符號，通過此種標記，電腦之間可以處理包含各種資訊的文章等。
*#做一個 XML、HTML、SVG 三者的關係簡圖。
<img src='https://oreillymedia.github.io/Using_SVG/ch02-bigpicture-files/webplatform-venndiagram.svg'width=500 height=*/>
*#說明 SVG 的三個特性
#XML語法，用書寫指示來畫圖。
#二維向量圖形格式，不是點陣圖，無段縮放不會毛邊。
#由W3C制定，是開放標準。

*#寫出 直線、多點成線、多邊形、圓、矩形 在 SVG 中的標籤名稱
line(直線) polyline(多點成線) polygon(多邊形) circle(圓) rect(矩形) ellipse(楕圓)
*#找一張能用在教學上，維基共享資源的 SAG 圖，說明可以用來教什麼主題。
<img src='https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg'width=500 height=*/>
可用於教學生香蕉對身體的好處(健康)
*#Windows 上 SVG 楷書的名稱，或蘋果 kaiti
*技能：
*#用 SVG 畫一個圓。
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='300' height='200'>
<defs>
<radialGradient id='r4' cx='35%' cy='35%' r='50%' >
<stop style='stop-color:#ffffff' offset='0%' />
<stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' />
<stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' />
</radialGradient>
</defs>
<circle cx='90' cy='90' r='75' style="fill:url(#r4);" />
</svg>
*#用 SVG 畫一個熊臉<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='400'> 
<circle cx='224' cy='120' r='60' style='fill:#000000;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='380' cy='120' r='60' style='fill:#000000;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='300' cy='200' r='150' style='fill:#CD853F;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='250' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='350' cy='180' r='12' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='300' cy='240' r='50' style='fill:#FFD39B;stroke:black;stroke-width:2;fill-opacity:1'/>
<circle cx='300' cy='215' r='10' style='fill:black;stroke:black;stroke-width:2;fill-opacity:1'/>
</svg>
*#用 SVG 畫出「羅馬」兩個字
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='3000' height='900'>
<text x='40' y='90' dx='50,70,90,110,130'  style='font-family:STKaiti;fill:#BFAF26;font-size:90;'>黃顯淳是...</text>
</svg>
*#用 SVG 畫出「羅馬不是一天造成的」九個字，並用旋轉拉斜
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='500' height='400'> 
<text x='40' y='90' style='fill:#BFAF26' transform='rotate(-30,40,90)'>
<tspan dy='65' x='40'>黃</tspan>
<tspan dy='65' x='40'>顯</tspan>
<tspan dy='65' x='40'>淳</tspan>
<tspan dy='65' x='40'>是</tspan>
<tspan dy='65' x='40'>.</tspan>
<tspan dy='65' x='40'>.</tspan>
<tspan dy='65' x='40'>.</tspan>
</text>
</svg>
*#transform 屬性可以有四種操作：位移、旋轉、大小縮放、拉斜，寫出前三種操作(位移、旋轉、大小)的語法 translate(x,y) rotate(幾度) scale(縮放)
*#在 SVG 原始碼中怎麼把一堆東西打包成群？
*#用 SVG 畫出一朵花，有三個花瓣一個花梗
<?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='600' height='600'>
<defs>
<g id='flower'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(-45 100 100)'/>
<rect x='95' y='100'  width='10' height='200' style='stroke:none;fill:#2B5810;'/>
</g>
</defs>
<use xlink:href='#flower' transform='rotate(-10) scale(0.5)' x='-70' y='210'/>
</svg>
*#用 SVG 畫出三朵花，每朵花都有三個花瓣一個花梗
<?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='600' height='600'>
<defs>
<g id='flower'>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(45 100 100)'/>
<polygon points='100,100 120,20 100,0 80,20' style='stroke:none;stroke-width:0;fill:yellow;' transform='rotate(-45 100 100)'/>
<rect x='95' y='100'  width='10' height='200' style='stroke:none;fill:#2B5810;'/>
</g>
</defs>
<use xlink:href='#flower' transform='rotate(-10) scale(0.5)' x='-70' y='210'/>
<use xlink:href='#flower' transform='rotate(8) scale(0.8)' x='31'/>
<use xlink:href='#flower' transform='rotate(35) scale(0.7)' x='205' y='-60'/>
</svg>
*#用 SVG 畫出一個帶漸層色的方塊
<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="#D3D3D3"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
</defs>
<rect x="20" y="20" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
*#用 SVG 畫一個用放射漸層表示的太陽
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='300' height='200'>
<defs>
<radialGradient id='r4' cx='50%' cy='50%' r='50%' >
<stop style='stop-color:#fff100' offset='0%' />
<stop style='stop-color:#ff9900;stop-opacity:.98' offset='50%' />
<stop style='stop-color:#ff1700;stop-opacity:.98' offset='100%' />
</radialGradient>
<filter id='f1' >
<feGaussianBlur stdDeviation='8' />
</filter>
</defs>
<circle cx='90' cy='90' r='75' style="fill:url(#r4);filter:url(#f1);" />
</svg>
*#怎麼將紙上的手繪圖拍下來，並展開為平整的電子檔？微軟鏡頭microsoft lens
*#怎麼使用 inkscape 將電子圖檔轉 SVG 向量圖？先按path再到trace bit map調整後按ok
*#怎麼使用 inkscape 將 SVG 圖多餘的邊切除？按file再到 document properties之後按 resize page to drawing or selection
*#怎麼對一張點陣圖進行「去背」？(png 檔可去背，jpg 檔無法去背) 按file再到 document properties之後按background color調到透明
*#怎麼找一張適合的 ICON ，並且是 SVG 格式的圖？去 http://urclass.net/files/tools/icons.php
*#怎麼縮小一張 SVG 圖的大小？scale
*#怎麼改變一張 SVG ICON 圖的顏色？style可以改變色碼或是顏色名稱
*#怎麼將自己修改的 SVG ICON 圖，可以有網址，能讓 HTML 與 Wiki 頁引用？用html:{content:"要的東西放這",popup:false}
*範例：http://jendo.org/uploadFiles/嘉禾書院/曲汝川/100.html
http://jendo.org/uploadFiles/嘉禾書院/曲汝川/玉璧切齊邊框.svg
*英文：
</mwdetails>



<mwdetails><summary>GIS</summary>
*知識： 
*#什麼是 GIS ？「地理資訊系統」 geographic information system是用來儲存、顯示、查詢、分析地理資訊的電腦系統 
*技能：
*範例：http://jendo.org/uploadFiles/嘉禾書院/曲汝川/gismap0.html
*英文：
</mwdetails>

<!--<mwdetails><summary></summary>

</mwdetails>-->