資訊基礎應用：修訂版本之間的差異

2017年10月17日 (二) 08:32的修訂版本

概述

一、課程目標

1. 培養會使用 wiki,html,GIS,SVG 做事的人
2. 協助全民科學平台的「動手做科學」活動上架

二、選修說明

• 修課同學：蕭卉均、李彥廷、張又懿(妹)、張鈞祺(兄)、黃柏實(子)、陳洹霈(母)、盧星瑜、紀詠恩、谌卫军(遠距學習)、吳文瀚(未到課)、吳亞蓁(未到課)
• 地點：新埔國中信義樓 517
• 時間：週二早上 9:15~12:00
• 費用：無
• 選課優先順位：有參與全民科學平台數位編輯意願者優先
• 教師：丁志仁
• 助教：柯智懷
• 上課規範：學員須自行攜帶筆電上課。上課注意聽，作業按時交。
• 成績以作業為主，通過者得 3 學分

三、課程內容組成

1. 雲端空間使用
2. 維基共享資源利用
3. wiki,html 語法
4. 點陣圖處理
5. 向量圖處理(SVG)
6. GIS

四、重要參考資料

• HTML入門
• wiki 語法
  1. Wiki_入門語法
  2. Wiki_基本語法與條目發展
  3. 維基語法及範例(詳版)
• 71個單字

各次上課內容

2017.9.5

• 工具與環境，看見伺服器與VDSL
  1. 區網 wifi ：jendod與jendoa，密碼現場說明
  2. 伺服器 DS216，網址 6years.jendo.org
  3. 調整 C:\Windows\System32\drivers\etc\hosts，新增一行「192.168.4.2 6years.jendo.org」，下課前註解掉
  4. 瀏覽器：firefox 優先於 chrome ，避免使用 IE
  5. filezilla
     • 打開 filezilla ，並新增一個站台叫「DS216+(共用)」
     • 上述站台的設為：
       1. 主機:6years.jendo.org；
       2. 協定:SFTP
       3. 使用者:共用
       4. 密碼:
       5. 字碼集:UTF-8
     • 連線，然後到「/home/www」
     • 關閉 filezilla 。
     • 建自己帳號的連線
  6. 可用的文字編輯器，如 emeditor
  7. 連結 filezilla 和慣用的文字編輯器：「編輯/設定/檔案編輯」，選用「使用自訂編輯器」與「總是使用預設的編輯器」，並指定編輯器的路徑。

2017.9.12

• 建造每一個人的筆記頁：「資訊基礎應用/○○○」，要登入才有辦法編寫
  1. 其中須有一段，列出已記得的單字，老師沒列到的單字要跟丁丁講
• 第一份作業：本班通訊錄
• 第二份作業：HTML 與 wiki 語法對照表
• 第三份作業：個人履歷，參考 http://6years.jendo.org/~共用/丁禾履歷表.doc
• 表格邊框美化的範例一

<table style='border:1px solid black;border-collapse:collapse;'>
<tr><th style='border:1px solid black;border-collapse:collapse;'>一</th><td style='border:1px solid black;border-collapse:collapse;'>三</td></tr>
<tr><th style='border:1px solid black;border-collapse:collapse;'>二</th><td style='border:1px solid black;border-collapse:collapse;'>四</td></tr>
</table>

• 表格邊框美化的範例二

<style>
.nicetable {border:1px solid black;border-collapse:collapse;}
</style>
<table class='nicetable'>
<tr><th class='nicetable'>一</th><td class='nicetable'>三</td></tr>
<tr><th class='nicetable'>二</th><td class='nicetable'>四</td></tr>
</table>

2017.9.19

• 交代樣式(外觀)的三種方式：
  1. 行內：
  2. 通篇：
  3. 跨多篇：

     <link rel='stylesheet' type='text/css' href='./pa.css'  />

• 樣式作用的三種對象：
  1. 標籤：
  2. 類別(class)：
  3. 指定專一的標籤(id)：
• 多條件交代樣式的作用對象：

2017.9.26

• 筆記中建立 wiki 與 HTML 對照表
  1. 等號
  2. 星號
  3. 井號
  4. 中括號(連結)
  5. 雙層中括號(圖照)
  6. 文字的拉斜與加粗
  7. 冒號及分號
  8. 水平線
• 角括號的寫法：
  1. &lt;：<
  2. &gt;：>
  3. 表格的示例
• Mediawiki_簡介
  1. 柏納李發明 html 及 http 。
  2. 由HTML速記到共筆再到維基百科。
  3. 分享式合作與共享經濟
• CC授權
• Wiki_基本語法與條目發展
• 取用圖照：
  1. 找到 google 翻譯，找出食人魚的英文。
  2. 由 google 找到「維資基共享源」的網址「commons.wikimedia.org」
  3. 到「維資基共享源」在蒐尋框蒐「File:Piranha」
  4. 開一張食人魚的圖，了解頁中各種尺寸的連結，並選擇想要的尺寸。
  5. 用雙層中括號將圖照帶入 wiki 頁
  6. 用 img 標籤帶入 wiki 頁
  7. 比照兩的速度有何不同
  8. 找到食人魚的分類「Category:Pygocentrus nattereri」
  9. 由 google 的照片蒐尋，使用「工具/使用權限」來找到可以用的圖。
  10. 蒐「File:Piranha svg」，並看 svg 檔無段放大不毛邊的效果。
  11. 看 svg 圖檔的原始碼，知道它是由指示組成。
• 圖檔格式(點陣與向量)，SVG特性，著作權保護期的長短。
  1. 由蒐「file:animal cell svg」說明 svg 檔可輕易改作。但仍要尊重原作者的貢獻。

2017.10.03

• 下載 http://6years.jendo.org/~共用/丁禾履歷表.doc
• 以 word 打開
  1. 找到「尺規」開關並打開
  2. 取消「檔案/選項/進階/顯示字元寬度單位」核取方塊
  3. 找出長寬
  4. 每 inch 2.54公分，72pt
• 開「履歷表.html」
• 頁
  1. 在樣式定義中以「@page 某值{…}」設定 css
  2. 在顯示區中以「<div style='page:某值;'>」
  3. 可用的定義：

     size:寬 長;

     margin:天 右 地 左

     mso-page-orientation:landscape 橫放

     mso-header-margin:頁首大小

     mso-footer-margin:頁尾大小

• 跳頁的用法：「<br style='page-break-before:always' />」
• 表格寬度用「style='width:xxx'」表達寬度，xxx可以用百分比、公分、pt、無單位數字，無單位數字由「控制台/顯示器/設定/一般/字型大小」控制，如96dpi(100%)則96個寬度單位為1英吋；120dpi(125%)則120個寬度單位為1英吋。
• 表格高度在 tr 中設，
  1. <tr style='height:數字'/>時無單位數字、cm、pt三種單位均有效，百分比無效。
  2. <tr height=數字/>只對無單位數字有效。
• 圖的寬度：
  1. style='width:數字;height:數字;' 對無單位、百分比、pt、cm 皆無效
  2. width=數字 height=數字 對百分比、pt、cm 皆無效，對無單位有效，但不可使用auto。無單位長度定義同上段。

2017.10.17

• 去看 http://6years.jendo.org/~共用/履歷表.html
• 用 filezilla 下載回來
• 以 word 打開，看完之後，關閉此檔
• 用 emeditor 打開下載檔案
• 解說 xml (Extensible Markup Language)
• 解說 xmlns (xml namespace)
• 看HTML/適應word
• 仿做自己的履歷表