討論:資訊基礎應用/張又懿：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎HTML與HTTP）
（→‎wiki）
第 184 行： 第 184 行：
 
*wiki 語法
 
*wiki 語法
 
*wiki 的 word 適應。
 
*wiki 的 word 適應。
 +
*前端與後端
 +
**因為網頁分成前端與後端，所以有可以拆開的特性。如果一開始先接觸前端，也可以接一般網站的案子過生活，或者做做產品的 UI，跟後端工程師作銜接即可。如果單獨學後端，也可以找到不錯的工作，或者開發產品功能面。有時間再接觸另一端的技術，讓自己成為全端的時候，幾乎什麼事都能做了。
 +
***前端工程師：
 +
***#HTML
 +
***#CSS
 +
***#Javascript
 +
***前端進階一點：
 +
***#CSS Framework （Bootstrap）
 +
***#JavaScript framework （如Angularjs、Reactjs、Vuejs）
 +
***#CSS processor（sass，less，stylus）
 +
***#RWD Design
 +
***#Grunt、Gulp（自動化工具）
 +
***後端工程師：
 +
***#主要開發語言（PHP、Ruby、C#）
 +
***#資料庫語法（MySQL、SQL Server）
 +
***#伺服器設定（apache、nginx）
 +
***#基本的資安防範（xss、sql injection）
 +
***很多求職網站都會簡易的要會LAMP架構，意思是：
 +
****(L)inux、(A)pache、(M)ysql、(P)HP
 +
***後端進階一點：
 +
***#Framework（框架）
 +
***#PHP：Laravel、Codeigniter、yii …
 +
***#Ruby：Lotus …
 +
***#C#.NET：MVC5 …
 +
***#串第三方API（金流、簡訊寄送服務 ..）
 +
***#API設計（以目前形態來說，多數公司會讓後端工程師從資料庫取出資料撰寫成json格式提供給前台去呈現資料）
 +
***#Cloud(雲端操作) （Google Cloud、Microsoft Azure、Amazon Web Services (AWS)）
 +
***另外還有兩者皆必備的：
 +
***#MVC架構 – MVC架構則是因為對於一個團隊而言，每個人負責的區塊被切割好才是最理想的情況。
 +
***#Git（版本控制例如GitHub）- 這個網站我覺得非常適合新手了解Git – 猴子都能懂的Git
 +
 
==CSS==
 
==CSS==
 
*何謂 CSS
 
*何謂 CSS

2018年1月16日 (二) 10:56的修訂版本

環境與工具

一、環境

  • 伺服器與域名
    • 65536 物聯網 一切人造物接上網路，得失相兼 福禍相依 連結夠大，連結夠大就有智慧 域名伺服器 hosts ds216區網的位置
    • 伺服器（Server）指：
      • 一個管理資源並為用戶提供服務的電腦軟體，通常分為檔案伺服器（能使用戶在其它電腦存取檔案），資料庫伺服器和應用程式伺服器。
      • 執行以上軟體的電腦，或稱為網路主機（Host）。

一般來說，伺服器通過網路對外提供服務。可以通過Internet對內網提供服務，也可以通過Internet對外提供服務。伺服器的最大特點，就是運算能力須非常強大，在短時間內就要完成所有運算工作，即使是一部簡單的伺服器系統，至少就要有兩顆中央處理器同時工作。

是一個「伺候、服務」的東西。例如：你用電腦架設了網站、提供服務(讓訪客蒞臨瀏覽網頁)、這一台電腦就稱之為伺服器。不論什麼電腦都可以安裝系統來提供服務，但必須全天候開機，提供服務。家用/辦公室電腦也許不到一個星期就當機了。伺服器電腦：必須要具備有足夠的耐用度和穩定度。

  • wifi
    • 並不是每樣符合IEEE 802.11的產品都申請Wi-Fi聯盟的認證，相對地缺少Wi-Fi認證的產品並不一定意味著不相容Wi-Fi裝置。IEEE 802.11的裝置已安裝在市面上的許多產品，如：個人電腦、遊戲機、MP3播放器、智慧型手機、平板電腦、印表機、筆記型電腦以及其他週邊裝置。Wi-Fi聯盟成立於1999年，當時的名稱叫做Wireless Ethernet Compatibility Alliance（WECA）。在2002年10月，正式改名為Wi-Fi Alliance。
    • Wi-Fi這個術語被人們普遍誤以為是指無線傳真（Wireless Fidelity），類似歷史悠久的音響裝置分類：高傳真（1930年開始採用）或Hi-Fi（1950年開始採用）。即使Wi-Fi聯盟本身也經常在新聞稿和檔案中使用「Wireless Fidelity」這個詞，Wi-Fi還是出現在ITAA的一個論文中。事實上，Wi-Fi一詞是沒有任何意義，也沒有全寫的。
    • IEEE 802.11第一個版本發表於1997年，其中定義了媒體存取控制和實體層。實體層定義了在2.4GHz的ISM頻段上的兩種無線調頻方式和一種紅外線傳輸的方式，總資料傳輸速率設計為2Mbit/s。兩個裝置之間的通訊可以自由直接（ad hoc）的方式進行，也可以在基站（Base Station，BS）或者存取點（Access Point，AP）的協調下進行。1999年加上了兩個補充版本：802.11a定義了一個在5GHz ISM頻段上的資料傳輸速率可達54Mbit/s的實體層，802.11b定義了一個在2.4GHz的ISM頻段上但資料傳輸速率高達11Mbit/s的實體層。
    • 2.4GHz的ISM頻段為世界上絕大多數國家通用，因此802.11b得到了最為廣泛的應用。蘋果公司把自己開發的802.11標準起名叫AirPort。1999年工業界成立了Wi-Fi聯盟，致力解決符合802.11標準的產品的生產和裝置相容性問題。Wi-Fi為制定802.11無線網路的組織，並非代表無線網路。
    • 區域網路
      • 所謂「區域網路」即在一有限的地區內將數部PC或其他週邊設備以某種網路架構連接起來，以達到彼此連通、互相傳遞資料或共用資源等目的，故我們又稱區域網路」為PC LAN。通常我們說區域性網路大多指在一辦公室或一棟建築物內的短距離網路連線而言，例如在一棟辦公大樓內架設一套網路將各部門的PC連接起來即屬之，另像校園內將各科系辦公室、圖書館等數十部或百部以上的PC連接在一網路上以達資源共享的目的都是典型區域網路的例子。
    • 廣域網路
      • 「廣域網路」是「區域網路」的延伸，其範圍已不再挶限於某一區域了，它可能跨越了數百里或數千里的距離，通常需利用公共的通訊設施（如電信局的交換機與數據線路）或衛星通訊來當作通訊的媒體。例如一企業有台北、高雄兩家分公司，兩地均建立有區域網路，該公司為了能即時掌握兩分公司的業務，遂租用電信局的數據線路及網路連接設備將台北、高雄兩地之區域網路連接起來，這樣的網路我們即可稱之為「廣域網路」。

在一「區域網路」中所連接的電腦系統架構多為相似（如PC LAN與PC LAN的連接）；而「廣域網路」中則往往連接不同架構的電腦系統（如PC LAN與電腦主機的連接），故後者較前者在網路的通訊上更為複雜。

  • 電腦網址
    • 連上網路後，你有許多機會尋找其他電腦。可是全世界的電腦這麼多，要上那兒去找呢？和找人一樣，每個人都有一個地址，我們便可以依據這個地址去 找人。網路上的每一台電腦也需要地址，如此我們才能依地址連上所要的電腦。通常電腦的地址我們會把它叫做『 位址 』或是『 網址 』。電腦的地址有兩種寫法，一個是『 IP位址 』，另一個是『 領域名稱 』。
    1. IP位址:這是電腦地址的最原始寫法，是用四個數字表示， 而每個數字都不可以超過256 。例如『192.83.187.1』。
    2. 領域名稱:可是IP 位址的表示方式並不是很好記，都是一堆數字，所以電腦的地址有了另外一種的表示方式：領域名稱系統（Domain Name System），簡稱DNS 。這種位址表示方式是利用有意義的英文縮寫來表示，所以比較清楚，也容易記憶。
  • 各縮寫
區域名稱 代表意義
Gov 官方政府單位
Org 財團法人等非官方機構
Edu 教育機構
Mili 國防軍事機構
Com 商業機構
Net 網路機構
Int 國際性機構
國家代碼 如tw：台灣，cn:中國，jp:日本等
  • 網站空間
    • 在 C:\Windows\System32\drivers\etc中打開hosts的檔案。可以修改在哪些區域能上線使用伺服器。加上一行「192.168.4.26 years.jendo.org」
    • 要在http://6years.jendo.org有網路空間，才能架設網頁(可使用filezilla連上)
  • wiki上的個人頁
    • 建立"筆記頁"，要注意有沒有登入自己的帳號才能建立。
    • Wiki是一種在全球資訊網上開放且可供多人協同創作的超文字系統，由沃德·坎寧安於1995年首先開發。沃德·坎寧安將wiki定義為「一種允許一群用戶用簡單的描述來建立和連線一組網頁的社會計算系統」。
    • 有些人認為，Wiki系統屬於一種人類知識的網路系統，我們可以在web的基礎上對Wiki文字進行瀏覽、創建和更改，而且這種創建、更改及發布的代價遠比HTML文字小；與此同時，Wiki系統還支援那些面向社群的協作式寫作，為協作式寫作提供了必要的幫助；最後Wiki的寫作者自然構成了一個社群，Wiki系統為這個社群提供了簡單的交流工具。與其它超文字系統相比，Wiki有使用簡便且開放的特點，可以幫助我們在一個社群內共享某個領域的知識。
    • wiki有點像一個大型的Google雲端硬碟，每一個文件都開啟了，知道網址就可以檢視的權限，登錄帳號等於Google的特定權限者，就可以編輯資料了。

二、工具與設定

  • Mozilla Firefox或Google Chrome
    • 這兩個瀏覽器，主要的功能都用於，預視結果或查詢資料。
    • 但是兩者還是略有不同，Mozilla Firefox比Google Chrome安全性還要高，用Mozilla Firefox來瀏覽網頁比較不容易中毒。相對Internet Explorer的安全性就沒有那麼高，所以最好避免使用Internet Explorer。
    • Firefox最初是Mozilla Application Suite的一個實驗性分支，由戴夫·海厄特、喬·休伊特及布雷克·羅斯建立。他們認為原贊助者網景公司的商業要求及其開發者導向的特徵蔓延特色會降低瀏覽器的可用性，為了解決這個問題，他們開始以Mozilla Suite為基礎，建立了一個獨立的瀏覽器，目的是取代功能複雜的Mozilla Suite。2003年4月3日，Mozilla宣布他們將把開發目標由Mozilla Suite轉移到Firefox和Thunderbird上。之後形成了由社群開發維護的SeaMonkey，並最終於2005年取代了Mozilla Application Suite。
  • filezilla
    • 在https://filezilla-project.org/點選Download，下載「filezilla」
    • 檔案(F) ＞ 站台管理員(S) ＞ 連線(C)　連接上自己的站台
    • 右鍵 ＞ 檢視/編輯(V)　開啟檔案進行編輯
    • 注意：在檢視/編輯之前，需要先在編輯(E) ＞ 設定(S) ＞ 檔案編輯 ＞ 使用自訂編輯器 選取慣用編輯器
    • FileZilla是一種快速、可信賴的FTP用戶端以及伺服器端開放原始碼程式，具有多種特色、直覺的介面。FileZilla在2003年11月獲選為SourceForge.net當月最佳推薦專案。
    • FileZilla的功能
      • 可以斷點續傳進行上傳、下載（需要伺服器支援）
      • 自訂命令
      • 可進行站點管理
      • 防發呆功能（有的FTP伺服器會將發呆過久的用戶趕出，這樣發呆的用戶就得重複登入）
      • 超時偵測
      • 支援防火牆
      • 支援SOCKS4/5、HTTP1.1代理
      • 可進行SSL加密連線
      • 支援SFTP（Secure FTP）
      • 可以排隊進行上傳、下載
      • 支援拖放
      • 多國語言支援，包括簡體、繁體中文（Linux平台需額外安裝「filezilla-locales」套件）
      • 可通過Kerberos進行GSS驗證與加密
  • EmEditor
    • EmEditor是江村軟體公司（Emurasoft，坐落於美國華盛頓州）所開發的一款在Windows平台上運行的文字編輯程式。EmEditor以運作輕巧、敏捷而又功能強大、豐富著稱而得到許多用戶的好評。Windows內建的記事本程式由於功能太過單薄，所以有不少高階用戶直接以EmEditor等第三方文字編輯程式取代。
    • EmEditor的發行最早始於1997年，迄今仍在持續發展中。自16.6版起，大幅提高了「移除新行」，「全部取代」，「合併 CSV」，「移除換行符號」以及「插入換行符號」等功能操作的速度。
    • 如果要在EmEditor當中更改編碼就得另存新檔，在編碼中把預設的big5，改為utf-8才能支援萬國碼
    • EmEditor功能
      • 支援超大檔案
      • 支援外掛程式
      • 支援正規表示式
      • 支援書籤功能
      • 支援篩選功能
      • 索引標籤式設計
      • 可編輯的巨集
      • 大綱顯示功能
      • 支援萬國碼
      • 支援CSV,TSV格式編輯
      • 自動標記功能
      • 批次取代功能
      • 多檔搜尋與取代功能
      • 檔案比較與同步捲動功能
      • 亮顯語法包含20多種程式語言
      • 有提供功能精簡的免費版
      • 有提供可攜式版本
    • 編碼
      • Unicode(這是萬國碼，每一國的文字都可以使用，我們基本要用這個編碼)
        • Unicode
        • UTF-7
        • UTF-8
        • UTF-16
        • UTF-32
      • 在Firefox的選單 > 更多 > 文字編碼 >點選Unicode
      • Chrome則需要新增擴充功能Set Character Encoding，然後按右鍵出現選單以後才能更改
    • 其它免費編譯器
      • Notepad++
      • PSPad

HTML與HTTP

  • 發有者及發明年代
    • 1980年，物理學家提姆·柏內茲-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用並共享文件，他提出並建立原型系統ENQUIRE。1989年，柏內茲-李在一份備忘錄中提出一個基於網際網路的超文字系統。
    • HTML的首個公開描述出現於一個名為「HTML標籤」的檔案中，由提姆·柏內茲-李於1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超連結標籤外，其他設計都深受CERN內部一個以標準通用標示語言（SGML）為基礎的檔案格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
    • 在IETF的主持下，HTML標準的進一步發展因競爭利益而遭受停滯。自1996年起，HTML規範一直由全球資訊網協會（W3C）維護，並由商業軟體廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01於1999年末發布，進一步的勘誤版本於2001年發布。2004年，網頁超文字應用技術工作小組（WHATWG）開始開發HTML5，並在2008年與W3C共同交付，2014年10月28日完成標準化。
  • HTML
    • HTML是一種網頁使用的語言，文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程式以及行動應用程式的使用者介面。網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML描述了一個網站的結構語意隨著線索的呈現，使之成為一種標示語言而非程式語言。(維基)
    • 是一種描述超文件的註記語言SGML(Standard Generalized Markup Language)所制訂出的一種網頁語言，基本上現行的瀏覽器都可以讀取HTML，使用HTML可以編輯設計出網頁，也可以在網頁中加入所有HTML語言可支援的方式，例如表格、表單、圖片、文字、連結、程式等等。
    • 無論架設部落格，想學習網頁程式設計，學會使用HTML才能真正了解網頁的運作，進而做到更精細的設定，使網頁更加完美。
    • 動態網頁
      • 網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部都尚未決定。只有在使用者向網頁伺服器要求網頁時，網頁的最後內容才會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都不同，所以這種網頁便稱為動態網頁。
      • 建立網路應用程式時，必須考慮到各種需要和問題。
    • 靜態網頁
      • 靜態的網站是由一組相關的 HTML 網頁和檔案 (存放在執行網頁伺服器的電腦上) 所組成。
      • 網頁伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。當使用者在網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入 URL 時，便會產生網頁要求。
      • 靜態網頁的最後內容是由網頁設計師決定，不會在要求網頁時變更。以下是一個範例： 
   <!DOCTYPE html>
   <meta charset = utf-8>
   <html> 
       <head> 
           <title>分頁標題</title> 
       </head> 
       <body>   
       </body> 
   </html>
      • 這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫，然後才被放到伺服器上。因為 HTML 一旦放到伺服器上後就不會變更，所以這類網頁又稱為靜態網頁。
      • 註解：
        • 嚴格說來，「靜態」網頁並不是靜態。例如，滑鼠變換影像或 Flash 內容 (SWF 檔案) 都會使靜態網頁變得活靈活現。不過，只要是在傳送到瀏覽器時沒有經過修改的網頁，這本手冊便將它稱為靜態網頁。
      • 當網頁伺服器接到靜態網頁的要求時，伺服器會讀取要求、找到網頁，然後將它傳送到要求的瀏覽器。
  • HTTP
    • 超文本傳輸協定（英文：HyperText Transfer Protocol，縮寫：HTTP）是一種用於分佈式、協作式和超媒體資訊系統的應用層協議。HTTP是全球資訊網的資料通訊的基礎。
    • 設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。通過HTTP或者HTTPS協定請求的資源由統一資源識別元（Uniform Resource Identifiers，URI）來標識。
    • HTTP的發展是由提姆·柏內茲-李於1989年在歐洲核子研究組織（CERN）所發起。HTTP的標準制定由全球資訊網協會（World Wide Web Consortium，W3C）和網際網路工程任務組（Internet Engineering Task Force，IETF）進行協調，最終發布了一系列的RFC，其中最著名的是1999年6月公布的 RFC 2616，定義了HTTP協議中現今廣泛使用的一個版本——HTTP 1.1。
  • xml
    • 而XML是由W3C所發展出的一種網頁語言規格，是SGML的精簡版本，特別用來設計網頁文件，XML可以讓使用者自己定義所需要的標籤，並且任意啟動定義、轉換、驗證等工作，同時可以在網頁和應用程式間讀取資料和傳遞資料。
    • 所以HTML與XML的差別在於HTML無法自訂標籤，但是基本上全世界的瀏覽器都可以看到他寫出來的網頁，而XML則是一種可以自由轉換資訊以及定義標籤的方式，可以讓其他網頁自己去轉換分享者的標籤，並轉為自己的標籤，進而直接讀取跟引用。

wiki

  • 何謂 wiki
  • CC 授權
  • wiki 語法
  • wiki 的 word 適應。
  • 前端與後端
    • 因為網頁分成前端與後端，所以有可以拆開的特性。如果一開始先接觸前端，也可以接一般網站的案子過生活，或者做做產品的 UI，跟後端工程師作銜接即可。如果單獨學後端，也可以找到不錯的工作，或者開發產品功能面。有時間再接觸另一端的技術，讓自己成為全端的時候，幾乎什麼事都能做了。
      • 前端工程師：
        1. HTML
        2. CSS
        3. Javascript
      • 前端進階一點：
        1. CSS Framework （Bootstrap）
        2. JavaScript framework （如Angularjs、Reactjs、Vuejs）
        3. CSS processor（sass，less，stylus）
        4. RWD Design
        5. Grunt、Gulp（自動化工具）
      • 後端工程師：
        1. 主要開發語言（PHP、Ruby、C#）
        2. 資料庫語法（MySQL、SQL Server）
        3. 伺服器設定（apache、nginx）
        4. 基本的資安防範（xss、sql injection）
      • 很多求職網站都會簡易的要會LAMP架構，意思是：
        • (L)inux、(A)pache、(M)ysql、(P)HP
      • 後端進階一點：
        1. Framework（框架）
        2. PHP：Laravel、Codeigniter、yii …
        3. Ruby：Lotus …
        4. C#.NET：MVC5 …
        5. 串第三方API（金流、簡訊寄送服務 ..）
        6. API設計（以目前形態來說，多數公司會讓後端工程師從資料庫取出資料撰寫成json格式提供給前台去呈現資料）
        7. Cloud(雲端操作) （Google Cloud、Microsoft Azure、Amazon Web Services (AWS)）
      • 另外還有兩者皆必備的：
        1. MVC架構 – MVC架構則是因為對於一個團隊而言，每個人負責的區塊被切割好才是最理想的情況。
        2. Git（版本控制例如GitHub）- 這個網站我覺得非常適合新手了解Git – 猴子都能懂的Git

CSS

  • 何謂 CSS
  • 用法
  • 重要語法

SVG

一、概述

  • 何謂 SVG 。
  • 點陣圖與向量圖的比較(含附檔名)

二、基本架構

  • 基本架構
  • 基本樣式
  • 基本圖形

三、文字

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

五、群組

六、定義一次，引用多次

七、漸層

(一)線性漸層

(二)放射漸層

八、柔焦濾鏡

九、path

十、動畫

Inkscape

GIS

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

圖形計算機

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