網頁

搜尋此網誌

2013年8月26日 星期一

102學年技專校院一覽

利用政府資料開放平臺取得大專校院名錄,再利用程式處理就可以得到技專校院的清單,102學年技專校院的名稱與網址如下:

科技大學 (共55所)

  1. 國立臺灣科技大學:www.ntust.edu.tw
  2. 國立雲林科技大學:www.yuntech.edu.tw
  3. 國立屏東科技大學:www.npust.edu.tw
  4. 國立臺北科技大學:www.ntut.edu.tw
  5. 國立高雄第一科技大學:www.nkfust.edu.tw
  6. 國立高雄應用科技大學:www.kuas.edu.tw
  7. 國立虎尾科技大學:www.nfu.edu.tw
  8. 國立高雄海洋科技大學:www.nkmu.edu.tw
  9. 國立澎湖科技大學:www.npu.edu.tw
  10. 國立勤益科技大學:www.ncut.edu.tw
  11. 國立臺北護理健康大學:www.ntunhs.edu.tw
  12. 國立高雄餐旅大學:www.nkuht.edu.tw
  13. 國立臺中科技大學:www.nutc.edu.tw
  14. 朝陽科技大學:www.cyut.edu.tw
  15. 南臺科技大學:www.stust.edu.tw
  16. 崑山科技大學:www.ksu.edu.tw
  17. 嘉南藥理科技大學:www.chna.edu.tw
  18. 樹德科技大學:www.stu.edu.tw
  19. 龍華科技大學:www.lhu.edu.tw
  20. 輔英科技大學:www.fy.edu.tw
  21. 明新科技大學:www.must.edu.tw
  22. 弘光科技大學:www.hk.edu.tw
  23. 健行科技大學:www.uch.edu.tw
  24. 正修科技大學:www.csu.edu.tw
  25. 萬能科技大學:www.vnu.edu.tw
  26. 建國科技大學:www.ctu.edu.tw
  27. 明志科技大學:www.mcut.edu.tw
  28. 高苑科技大學:www.kyu.edu.tw
  29. 大仁科技大學:www.tajen.edu.tw
  30. 聖約翰科技大學:www.sju.edu.tw
  31. 嶺東科技大學:www.ltu.edu.tw
  32. 中國科技大學:www.cute.edu.tw
  33. 中臺科技大學:www.ctust.edu.tw
  34. 台南應用科技大學:www.tut.edu.tw
  35. 遠東科技大學:www.feu.edu.tw
  36. 元培科技大學:www.ypu.edu.tw
  37. 景文科技大學:www.just.edu.tw
  38. 中華醫事科技大學:www.hwai.edu.tw
  39. 東南科技大學:www.tnu.edu.tw
  40. 德明財經科技大學:www.takming.edu.tw
  41. 南開科技大學:www.nkut.edu.tw
  42. 中華科技大學:www.cust.edu.tw
  43. 僑光科技大學:www.ocu.edu.tw
  44. 育達科技大學:www.ydu.edu.tw
  45. 美和科技大學:www.meiho.edu.tw
  46. 吳鳳科技大學:www.wfu.edu.tw
  47. 環球科技大學:www.twu.edu.tw
  48. 中州科技大學:www.ccut.edu.tw
  49. 修平科技大學:www.hust.edu.tw
  50. 長庚科技大學:new.cgust.edu.tw
  51. 台北城市科技大學:www.tpcu.edu.tw
  52. 大華科技大學:www.tust.edu.tw
  53. 醒吾科技大學:www.hwu.edu.tw
  54. 南榮科技大學:www.njtc.edu.tw
  55. 文藻外語大學:www.wtuc.edu.tw

技術學院 (共22所)

  1. 國立屏東商業技術學院:www.npic.edu.tw
  2. 國立臺北商業技術學院:www.ntcb.edu.tw
  3. 國立臺灣戲曲學院:www.tcpa.edu.tw
  4. 大漢技術學院:www.dahan.edu.tw
  5. 慈濟技術學院:www.tccn.edu.tw
  6. 永達技術學院:www.ytit.edu.tw
  7. 和春技術學院:www.fotech.edu.tw
  8. 致理技術學院:www.chihlee.edu.tw
  9. 亞東技術學院:www.oit.edu.tw
  10. 桃園創新技術學院:www.nanya.edu.tw
  11. 德霖技術學院:www.dlit.edu.tw
  12. 蘭陽技術學院:www.fit.edu.tw
  13. 黎明技術學院:www.lit.edu.tw
  14. 東方設計學院:www.tf.edu.tw
  15. 經國管理暨健康學院:www.cku.edu.tw
  16. 崇右技術學院:www.cit.edu.tw
  17. 大同技術學院:www.ttc.edu.tw
  18. 亞太創意技術學院:w2.apic.edu.tw
  19. 高鳳數位內容學院:www.kfcdc.edu.tw
  20. 華夏技術學院:www.hwh.edu.tw
  21. 臺灣觀光學院:www.tht.edu.tw
  22. 台北海洋技術學院:www.tcmt.edu.tw

專科學校 (共14所)

  1. 國立臺南護理專科學校:www.ntin.edu.tw
  2. 國立臺東專科學校:www.ntc.edu.tw
  3. 康寧醫護暨管理專科學校:www.knjc.edu.tw
  4. 馬偕醫護管理專科學校:www.mkc.edu.tw
  5. 仁德醫護管理專科學校:www.jente.edu.tw
  6. 樹人醫護管理專科學校:www.szmc.edu.tw
  7. 慈惠醫護管理專科學校:www.tzuhui.edu.tw
  8. 耕莘健康管理專科學校:www.ctcn.edu.tw
  9. 敏惠醫護管理專科學校:www.mhchcm.edu.tw
  10. 高美醫護管理專科學校:www.kmvs.khc.edu.tw
  11. 育英醫護管理專科學校:www.yuhing.edu.tw
  12. 崇仁醫護管理專科學校:www.cjc.edu.tw
  13. 聖母醫護管理專科學校:www.smc.edu.tw
  14. 新生醫護管理專科學校:www.web.hsc.edu.tw

Python 的程式碼如下:

#! /usr/bin/env python
# -*- coding: utf-8 -*-
# 技專校院清單
# list of technological and vocational college
import urllib2
import urlparse

def export_html(category, schools):
    print '<div>'
    print '<h3>%s</h3>' % category
    print '<ol>'
    for school in schools:
        print '<li>%s:<a href="http://%s" target="_blank">%s<a></li>' % \
         (school['name'], school['netloc'], school['netloc'])
    print '</ol>'
    print '</div>'

if __name__ == '__main__':
    req = urllib2.Request('https://stats.moe.gov.tw/files/school/102/u1_new.txt')
    
    f = urllib2.urlopen(req)
    data = f.read().decode('utf-16')
    f.close()
    rows = data.split('\r\n')[3:]
    
    university = []
    institute = []
    college = []
    
    for row in rows:
        cols = row.split('\t')        
        if len(cols) == 7 and cols[6] == '[2]技職':
            name = cols[1]
            o = urlparse.urlparse(cols[5])            
            school = {'name': name, 'netloc': o.netloc}
            
            if name[-2:] == '大學':
                university.append(school)
            elif name[-2:] == '學院':
                institute.append(school)
            elif name[-2:] == '學校':
                college.append(school)
    
    export_html('科技大學', university)
    export_html('技術學院', institute)
    export_html('專科學校', college)


###

2013年8月21日 星期三

Raspberry Pi 樹莓派

Raspberry Pi (樹莓派)是一台價格便宜的電腦 (35美元),而且體積小 (一張信用卡大),你可以用它做很多事情,例如編輯文書或程式、機上盒、家電控制等等。不過開始之前,這台 Raspberry Pi 和一般 PC 不太一樣,它是使用 Linux 的作業系統,而且系統是運行在 SD 記憶卡上,相信對於一般使用者而言有些陌生,這裡推薦一本書給大家。

Maik Schmidt (梅克‧施密特)著,周均健、謝瑩霖譯,Raspberry Pi 快速上手指南,台北:馥林文化,2013。

這本「Raspberry Pi 快速上手指南」寫的詳細而清楚,附錄還包含 Linux 入門的使用方法,雖然薄薄一本,然而內容涵蓋基礎知識和操作步驟說明,個人非常這本書推薦給初學者學習參考,若是你已經瞭解 Linux 的操與安裝,則直接參閱官方網站或 Google 搜尋的方式學習吧。

Raspberry Pi, Model-B 的樣子與包裝外盒,從天瓏書店購得。

###

2013年8月20日 星期二

HTML4 第一講

最新的 HTML 規範是第5版,稱為 HTML5 。在此,我想先介紹 HTML 第4版,而不是 HTML5 ,原因在於 HTML4 已經廣泛使用、規格已確定,而且學習 HTML4 之後瞭解 HTML5 也不難,所以我認為比較適合初學者優先學習。

認識 HTML

網頁是一個 HTML 文件,由 HTML 語言所撰寫而成的檔案,HTML全名為 HyperText Markup Language ,稱為超文字標記語言,是屬於一種標準通用標記語言 (Standard Generalized Markup Language, SGML) ,所謂標記語言指的是用標示 (mark up) 表示內容的結構、顯示和語意的資訊。

HTML 標記語言主要有兩個概念:元素 (element)屬性 (attribute),這些都定義在文件宣告定義 (Document Type Definition, DTD)裡面,每個元素具有多個屬性,元素由起始標籤、內容、結束標籤3個部分組成。元素名稱和屬性名稱都是不區分大小寫 (case-insensitive)

不過注意到,HTML 元素和標籤是不一樣的概念,元素不一定需要起始標籤結束標籤,例如 body, head, html, tbody這四個就允許完全不需要起始和結束標籤,但這些元素依舊存在於 HTML 文件中,有些元素則允許忽略結束標籤。另外,有一部分元素是不需要結束標籤,而且內容要為空。

HTML 文件是由 HTML 元素所組成,HTML4 總共有91個元素,我們可以依據不同用途分成四大類:基礎元素、結構元素、外觀元素與互動元素。這裡我們會先介紹 HTML 文件和基礎元素。

一個 HTML 文件可以分成三部分:版本資訊、文件標頭 (document head) 與文件主體 (document body) 。版本資訊是 HTML 文件的第一列,目前有三種文件類型宣告 (document type declaration) 指定版本資訊,分別是:

嚴謹的 (strict) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

過渡的 (transitional) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

框架組的 (frameset) 宣告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

這三個版本資訊的差異在於 HTML 元素支援的數量不同,參閱下表所述:
stricttransitionalframeset
支援元素數量778891

接著版本資訊是 html 元素,代表 HTML 文件, html 元素內包括 head 與 body 兩個區塊。head 區塊由 head 元素組成文件標頭,是用來儲存文件的資訊,通常不會顯示給使用者看,所以只要不屬於內容的資料都應該在 head 區塊中。而 body 區塊則由 body 元素組成文件主體,這部分是文件的內容本身,寫網頁絕大多數都是在編輯 body 區塊,使用者看的網頁也就是 body 元素的內容。

一個 HTML 文件會像下面這樣的結構:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <!-- head 區塊:文件標頭 -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>這是標題</title>
  </head>

  <body>
    <!-- body 區塊:文件主體 -->
  </body>
</html>

注意,DTD中定義 html 元素中必須包含一個 head 元素與 body 元素,如果你在 HTML 文件中差入多個 head 標籤內容,還是只會有一個 head 元素, body 元素也是相同的行為,這其實說明 HTML 元素和標籤是不一樣的概念。

HTML 基礎元素如下表所示,加上 html 元素自己總共有 14 個基礎元素。
文件標頭文件主體
組成的元素headbody
所屬的元素title
meta
群集:div, span
標題:h1, h2, h3, h4, h5, h6
address

這裡還必須介紹一個觀念,文件主體內的元素可以分成兩大類,區塊 (block-level) 元素行內  (inline ,或稱 text-level) 元素。區塊元素中可以包含行內元素和其他區塊元素,而行內元素只能包含行內元素或資料,兩類的內容模型 (content model) 不太一樣。區塊元素通常從新的一列開始放置,而行內元素則會在同一列中延續放置,所以才稱為「行內」。這兩類元素對於語言方向性的行為也有所不同,這部分將另外說明。

###

2013年8月16日 星期五

網站、網頁、網頁應用程式

網站、網頁、網頁應用程式

這裡將對一些術語進行解釋說明,因為網站 (website) 網頁 (web page) 很多人常常搞不清楚。

網頁

先說明什麼是網頁 (web page),一個網頁是你開啟網頁瀏覽器 (web browser) 所看到的那個畫面,而這個畫面實際上是一個 HTML 文件的檔案,就好像一本書裡的一「頁」內容,因此才稱為網頁。目前以技術上來說,網頁不一定是一個 HTML 文件,也有可能是一個程式,利用程式產生 HTML 文件,這種方式稱為網頁應用程式 (web application, Web App)

以內容來看,網頁分為動態網頁靜態網頁兩大類。動態網頁不是因為網頁有會動的內容,而是網頁依據用戶輸入而產生不同的內容,內容是「動態」的才稱為動態網頁,大多數網頁應用程式都是動態網頁。另一方面,靜態網頁則指的是 HTML 文件的檔案,任何用戶讀取都是固定不變的內容,所以這是「靜態」的。

網站

那網站 (website) 又是什麼?一個網站是由一個以上的網頁所構成,有一個明確的網址位置,讓我們能夠經由網路存取。在瀏覽器中輸入網址,我們將在畫面上看到一個網頁,對一個網站而言,通常會有一個主要的頁面作為入口,稱之為首頁 (home page) 。從電腦的角度來看,網頁就像是一個檔案,網站則像是一個資料夾,這樣思考是不是比較清楚了。

再更進一步說明,網站是一個虛擬概念,真正的網站是存在於一台電腦上,這種電腦稱為伺服器 (server) ,用作網站的主機 (host) 。實際的應用中,伺服器是一個很強大的電腦,通常會存放多個網站,這樣的主機稱為虛擬主機 (virtual host)

另外,也常聽到網路應用程式 (network application) 這個名詞,網路應用程式是指利用網路完成工作的應用程式,廣泛來說,只要有使用網路資源的程式都可稱為網路應用程式。換句話說,網頁應用程式也是一種網路應用程式。

我們用一些類似的東西比喻網站、網頁、網頁應用程式這些概念,如下表所述:
書頁網頁檔案
書本網站資料夾
書店(建築物)主機(伺服器)磁碟機(電腦)
地址網址路徑

###

學習網頁的心得分享

學習網頁的心得分享

學習網頁應該如何開始?

我認為有兩方面需要學習,一個是網頁本身的技術,另一方面是寫網頁的工具軟體。

寫網頁的工具軟體

我自己一開始是用微軟的 FrontPage 2003 編輯網頁, FrontPage 的優點在於操作簡單,如果你會使用 Word 編輯文件,那麼使用 FrontPage 不會太困難,兩者擁有類似的操作介面和使用觀念,即使沒有任何網頁技術基礎也可以做出一個網站,加上 FrontPage 提供所見及所得 (What You See Is What You Get, WYSIWYG) 的操作介面,基本上不會接觸任何程式碼,這對於新手而言是另一個優點。

不過當網站越做越複雜,想要更進一步的功能,這時候 FrontPage 的優點反而變成缺點,操作簡單代表軟體幫你做了一些事情,你只看到結果而不知道其中的原理,只用 WYSIWYG 的方式製作網頁讓你無法精確控制背後的程式碼,因而發覺真正需要瞭解網頁技術,於是開始認識網頁的程式碼。

第二個使用的軟體是 Macromedia Dreamweaver MX, Dreamweaver 在當時(2002年)是最熱門的網頁編輯軟體,本身除了是 WYSIWYG 的網頁編輯器,也提供很多強大的程式碼編輯功能,而且可以控制的選項比 FrontPage 更多,因此可以藉著修改選項去學習程式碼,經由這套軟體讓我學習到更進一步的網頁技術。

現在,寫網頁都不用這些 WYSIWYG 的軟體,而是用 Eclipse 整合開發環境和網頁瀏覽器(web browser)。在  Eclipse 中編寫程式碼,接著用網頁瀏覽器(例如Chrome)查看執行結果,這樣的組合優點是精確控制網頁程式碼、在瀏覽器中完整呈現網頁結果,加上不用付任何費用就能取得軟體,而且 Eclipse 提供很多外掛可以擴充功能,不僅限於網頁開發使用,有助於降低爾後的學習門檻。我認為這樣的工具組合非常適合推薦給新手,因為這是自由又免費的工具軟體。

網頁本身的技術

綜括來說,網頁包含三種技術: HTML 、 CSS 與 JavaScript ,我稱之為「網頁三元素」,其中又以 HTML 為網頁最重要的基礎。 HTML 處理的是網頁結構, CSS 處理的是網頁的外觀樣式,而 JavaScript 則處理網頁的互動行為。學習的順序當然是以基礎為先,先學習 HTML ,接著是 CSS 或 JavaScript 。

如果你是設計人員,建議從 CSS 著手學習,因為 CSS 是控制網頁的版面和外觀,修改 CSS 可以在網頁畫面上看到結果,學起來會比較有感覺。

如果你是程式開發人員,則建議從 JavaScript 著手,因為 JavaScript 程式語言對任何一種程式開發人員都會是熟悉的,不像 CSS 是另一種概念。

不管是哪種學習路徑,最後三者都是必須完全學習接觸,這樣對於網頁才會有完整的認識。

網頁最重要的是「內容/服務」

說了這麼多,技術與工具都不是重點,網頁最重要的是「內容/服務」,所有的努力都是為了將內容和服務透過網路傳播,你可以利用很複雜的 HTML 、絢麗的 CSS 樣式、強大的 JavaScript 程式碼做出一個網站,但如果沒有豐富且實用的內容和服務,這一切都是沒有意義的。

我們將網頁技術比喻成身體,如下表所述, HTML 像骨骼架構起身體, CSS 如皮膚覆蓋身體, JavaScript 像神經控制身體,內容和服務則如同血肉構築整個身體。如果沒有血肉,人不就像是一個空殼,因此內容是網頁的主體。

HTMLCSSJavaScript內容/服務
骨骼皮膚神經血肉

###

2013年8月1日 星期四

Rework 工作大解放

這本書,「工作大解放 (Rework) 」應該列為禁書,強烈禁止所有軟體開發人員閱讀,足以顛覆所有工作常理,非常危險!在於多數公司文化根本不像書中所述那樣,看完後你真的想仿照書說的那樣做,心中充滿行動的熱情。作者10多年的業界經驗證實,他們就是如此執行,因而創造出一個不符合「常理」的軟體公司。

Teddy Chen在最近「還少一本書」也提到這本工作大解放,他說這本書充滿了 Agile 與 Lean 的精神,確實如此,特別適合新創公司和敏捷開發團隊閱讀,非常推薦。+1


福萊德 (Jason Fried ), 漢森 (David Heinemeier Hansson) 著,胡瑋珊譯,工作大解放:這樣做事反而更成功,台北:天下遠見,2010。
譯自:Rework

全書總共分成11章,總共88篇短文,文章不長很好閱讀,很適合利用休息時間閱讀一篇。以下幾篇是我認為非讀不可的文章,推薦給大家:
  • 從成功中學習
    當某件事成功了,你就會知道你做對了什麼,你以後可以再做一次,而下次可能做得更好。
  • 計畫是一種猜測
    沒有計畫地做事聽起來可能很可怕,但盲目的遵循與現實脫節的計畫更恐怖。
  • 騷到自己的癢處
    當你打造自己需要的事物時,便可直接且迅速地評估產品的品質,無須透過中間人。
  • 明確表明立場
    當你不清楚自己的信念,任何事物會產生爭議,每件事都是可以辯論的。
  • 從核心要點做起
    將注意力集中在讓它變得更美好,然後你所做的一切都要取決於這個基礎。
  • 忽略初期的細枝末節
    在你著手進行之前,你往往無法辨識哪些細節最重要。在你動手開始做時,你才會明白哪些地方要多加注意。
  • 有時放棄是對的
    不要把美好的時間浪費在不好的工作上。
適合放在工作桌上的一本書,提醒自己。

###

熱門文章