網頁

搜尋此網誌

2013年11月23日 星期六

Knockout JavaScript Library

Knockout 是一個 JavaScript 的程式庫,簡稱 KO ,Knockout 是基於 MVVM (Model-View-View Model) 的設計模式,主要是提供資料繫結 (data-binding) 的功能,讓 UI 與資料模型之間能夠自動地動態更新。

MVVM 設計模式將 Web Application 分成下列三個部分:
  • Model
    模型是指 Web App處理的資料本身,與 UI 沒有任何關係,通常是伺服端資料庫儲存的資料,瀏覽器透過 Ajax 方式取得。
  • View Model
    檢視模型是指 UI 上資料 (data) 與操作 (operations) 的部分,在 Web App 中是一個 JavaScript 物件,物件的屬性對應至 UI 上的資料,而物件的方法則是操作的部分。
  • View
    檢視是檢視模型中可見的 (visible)、互動的部分,在 Web App 中是 HTML 文件,檢視顯示 View Model 的資訊,將命令傳送給 View Model ,並依據 View Model 的狀態更新顯示內容。
使用 KO 開發  Web App 時,我們通常會在前端(用戶端)撰寫 JavaScript 程式,做為 View Model,並設計  HTML 做為 View 的顯示,在 HTML 中使用 data-bind 屬性繫結 View Model。另一方面,後端(伺服端)則是以 Python 或 PHP 等提供資料庫存取的功能,接收或傳送Model 的 JSON 資料。

Knockout 中最重要的是物件「observable」,當 View Model 物件的屬性是 observable 物件時,KO 將自動提供雙向的資料繫結,在 KO 中有 3 種 observable:
  • ko.observable
  • ko.computed
  • ko.observableArray
一般最常使用的是 ko.observable,提供最基本的資料繫結,適合單一個物件的繫結,而 ko.observableArray 則是多個物件的繫結,KO 用的是陣列方式處理物件集合。最後 ko.computed 則提供將 observable 物件計算出新的 observable 物件,例如姓氏是 ko.observable,而名子是另一個  ko.observable,我們則可以利用 ko.computed 計算出姓名。

有了 MVVM 和 observable 的概念,已經可以著手開發以 KO 為基礎的 Web App 了,剩下只是認識 KO 提供的語彙,所幸內容不多很容易快速上手。如果你常常開發 CRUD 類型的 Web App,可以考慮採用 Knockout 程式庫。

###

2013年11月21日 星期四

JavaScript: The Definitive Guide

溫故知新:複習已經學過的知識,也能有新的認識和體會,這是我閱讀「JavaScript 大全」這本書的心得。不論你是 JavaScript 的初學者,或是已經熟悉 JavaScript 的使用者,這本書都能讓你學習並精通 JavaScript 。

David Flanagan著,黃銘偉譯,JavaScript大全,台北:碁峯資訊,2012。(共1080頁,定價  NT$1200 )
譯自:JavaScript: The Definitive Guide, O'Reilly Media, 1100 pages

「JavaScript 大全」總共分成四個部分,實際上內容只有兩個主幹,分別是核心 JavaScript 與客戶端 JavaScript。前兩部分說明核心與客戶端 JavaScript,後兩部分則是參考資料,因此這本書兼具學習手冊與參考手冊兩種用途。

核心 JavaScript (Core JavaScript) 這一部分主要講述 JavaScript 程式語言本身,包含程式語言的語彙結構、型別、運算式、運算子、陳述式、物件、陣列、函式等,一切有關程式語言的基本要素。

客戶端 JavaScript (Client-Side JavaScript)這部分則是介紹運行 JavaScript 的環境,包含瀏覽器和 HTML5 所提供的 API,其中一章介紹 jQuery 程式庫,讓開發 Web App更加方便,大致上已經涵蓋客戶端所需的相關知識。

我認為這本「JavaScript 大全」是 JavaScript 的聖經本,厚度與價格都是第一名,建議每位  Web 開發人員都必須擁有一本。
###

2013年11月4日 星期一

Development Environment 開發環境

在 Ubuntu 上面開發 Python 應用程式時,需要準備開發環境 (Development Environment),包含編輯器與 Python 相關套件,過去我常常手動逐一安裝,雖然一一安裝並不麻煩,但卻需要花費時間等待,於是寫了一個 Python Script 讓開發環境完全自動化安裝如下。

這個 Script 會安裝 JRE 用於執行 Eclipse IDE,並且安裝 Web Tools Platform 和 PyDev Eclipse Plugin,還有安裝 bpython 便於操作 Python Interpreter,以及 Python 套件管理程式 (pip)。其他 Git 版本管理工具和 Vim 編輯器也一併安裝。

執行 Eclipse 的參數可以參考 Provisioning platform (p2) 或 Running Eclipse。

#!/usr/bin/env python
import subprocess
import sys

# JRE
subprocess.call(['wget',
                 '--no-cookies',
                 '--no-check-certificate',
                 '--header', 'Cookie: gpw_e24=http%3A%2F%2Fwww.oracle.com%2F',
                 'http://download.oracle.com/otn-pub/java/jdk/7u45-b18/jre-7u45-linux-x64.tar.gz'])
subprocess.call(['mkdir', '/usr/java'])
subprocess.call(['tar', 'xzvf', 'jre-7u45-linux-x64.tar.gz', '-C', '/usr/java', '--no-same-owner'])
subprocess.call(['update-alternatives', '--install', '/usr/bin/java', 'java', '/usr/java/jre1.7.0_45/bin/java', '1'])
subprocess.call(['java', '-version'])

# Eclipse
subprocess.call(['wget', 'http://eclipse.stu.edu.tw/technology/epp/downloads/release/kepler/SR1/eclipse-standard-kepler-SR1-linux-gtk-x86_64.tar.gz'])
subprocess.call(['tar', 'xzvf', 'eclipse-standard-kepler-SR1-linux-gtk-x86_64.tar.gz', '-C', '/opt', '--no-same-owner'])
subprocess.call(['chgrp', '-R', 'sudo', '/opt/eclipse/'])
subprocess.call(['/opt/eclipse/eclipse',
                 '-application', 'org.eclipse.equinox.p2.director',
                 '-repository', 'http://download.eclipse.org/releases/kepler',
                 '-destination', '/opt/eclipse',
                 '-installIU', 'org.eclipse.wst.web_ui.feature.feature.group'])
subprocess.call(['/opt/eclipse/eclipse',
                 '-application', 'org.eclipse.equinox.p2.director',
                 '-repository', 'http://pydev.org/updates',
                 '-destination', '/opt/eclipse',
                 '-installIU', 'org.python.pydev.feature.feature.group'])
subprocess.call(['chmod', '-R', '775', '/opt/eclipse'])

# APT package
subprocess.call(['apt-get', 'update'])
subprocess.call(['apt-get', '-y', 'install', 'vim'])
subprocess.call(['apt-get', '-y', 'install', 'bpython'])
subprocess.call(['apt-get', '-y', 'install', 'git'])
subprocess.call(['apt-get', '-y', 'install', 'python-pip'])

# Desktop Menu
f=open('/usr/share/applications/eclipse.desktop','w')
f.write('''[Desktop Entry]
Type=Application
Name=Eclipse
Exec=/opt/eclipse/eclipse
Icon=/opt/eclipse/icon.xpm
Terminal=false
''')
f.close()

# exit
sys.exit()

歡迎大家參考利用。
###

2013年11月1日 星期五

Multiple Instances of Apache2 多網頁伺服器實體

這篇文章記錄如何將 Apache 設定成多個實體執行。所謂的實體 (instance) 指的是一個完整的執行環境,由多個程序 (process) 或執行緒 (thread),與一個設定組態 (configuration) 所組成。一個主機 (host) 上可以同時擁有多個執行實體,但為何需要多個 Apache 實體呢?

如果需要在一台主機上提供多個網站,使用虛擬主機 (virtual host) 的方式就可以達成,其實不需要多個 Apache 實體。不過採用虛擬主機的前提是:這些虛擬主機都是用相同的模組  (module) 的情況,例如所有的虛擬主機都是執行 PHP 而使用 php5_module 模組,或是為了執行 Python 而使用 mod_wsgi 模組。

當然,你也可以一起載入所有的模組,只是這樣不太好,明明我的虛擬主機只要執行 PHP,卻要載入其他 mod_wsgi 、 mod_perl 之類的模組,造成記憶體的浪費,對於電腦資源的利用不是很有效率。因此,面對這種「多語言」的使用情境,我們就有可能需要多個 Apache 實體。

在 Ubuntu 上建立多個 Apache 實體其實不難,先利用 apt-get install apache2 安裝完 Apache 之後,我們可以在範例中找到建立多個 Apache 實體的 script 程式碼,這個 script 基本上就是建立一組全新的設定組態和 daemon 啟動程式。使用語法如下:

usage: /usr/share/doc/apache2/examples/setup-instance <suffix>

例如:bash /usr/share/doc/apache2/examples/setup-instance mysite,就會建立一個新的mysite實體,原本常用的 apache2ctl 指令會變成 apache2ctl-mysite,其他設定檔也會多了「 -mysite」的字尾。

如果你要啟動新的 Apache 實體,記得去利用 Listen 指令修改伺服器的埠號,不然會與原本的 Apache 發生衝突。以上面例子來說,修改 /etc/apache2-mysite/ports.conf 設定檔,然後執行 sudo service apache2-mysite start 就能啟動新的 Apache 實體。

參考文件:
###

2013年9月25日 星期三

Ubuntu 上安裝與部署 Django

在很久以前曾經說明 Django 在 Windows 的安裝步驟,這篇文章將說明如何在 Ubuntu 上安裝 Django ,並且使用 mod_wsgi 部署在 Apache 伺服器上運行。

廢話不多說,直接提供 Shell Script 安裝部署,可以將下列程式碼儲存為檔案,利用 Bash 執行後將建立一個mysite的網站,你也可以修改 NAME 變數使用不同的網站名稱。

#! /bin/bash

#安裝 Apache HTTP Server, WSGI模組, Python套件安裝器
apt-get -y install apache2
apt-get -y install libapache2-mod-wsgi
apt-get -y install python-pip

#安裝Django web framework
pip install django

#網站名稱變數
NAME=mysite

cd /var/www

#新增一個名稱為NAME的Django專案
django-admin.py startproject $NAME

#新增虛擬主機的組態檔,最精簡的設定
(
cat <<EOF
<virtualhost *:80>
        WSGIScriptAlias / /var/www/$NAME/$NAME/wsgi.py
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</virtualhost>
EOF
) > /etc/apache2/sites-available/$NAME

#設定PYTHONPATH,Python執行時尋找程式庫的位置
(
cat <<EOF
import sys
PROJECT_PATH=os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.append(PROJECT_PATH)
EOF
) >> /var/www/$NAME/$NAME/wsgi.py

#啟用Django專案的虛擬主機,關閉預設的虛擬主機
a2ensite $NAME
a2dissite default

#使Apache伺服器重新載入設定檔
service apache2 reload

正確執行後,打開瀏覽器,輸入主機IP或本機位置 (http://127.0.0.1),將可以看到 Django 的歡迎畫面:



其他參考資料

###

2013年9月23日 星期一

NetworkManager 網路管理員

Ubuntu Desktop 的網路設定是由 NetworkManager 管理,NetworkManager 簡稱 NM,目前最新的版本是 0.9.8.x, NM 提供圖形化介面讓使用者設定網路連線,使用者不用去修改 /etc/network/interfaces 這個設定檔,這裡將介紹 NetworkManager 的相關資料與PPPoE的設定方式。

相關資料

設定資訊

  • NetworkManager 的組態檔資料夾位置
    /etc/NetworkManager
  • NetworkManager 的系統組態檔
    /etc/NetworkManager/NetworkManager.conf
  • 系統組態檔的設定意義
    參考:https://wiki.gnome.org/NetworkManager/SystemSettings
    或是:man NetworkManager.conf

預設系統組態檔內容:
[main]
plugins=ifupdown,keyfile
dns=dnsmasq

[ifupdown]
managed=false

意思是使用 ifupdown 和 keyfile 兩個外掛,dns使用dnsmasq這個DNS快取。
ifupdown 從 /etc/network/interfaces 讀取連線,managed=false 是指 /etc/network/interfaces 中的連線不受管理,會被 NetworkManager 忽略。

其他指令

  • 重新啟動 NetworkManager:
    sudo service network-manager restart
  • NetworkManager 完整的使用說明:
    man NetworkManager
  • 命令列工具:
    nmcli
  • 列出連線狀態與裝置資訊(實用!)
    nm-tool

PPPoE

有關PPPoE的設定不建議使用 NetworkManager ,因為經過測試發現,開機後不會自動連線,需要手動點選連線實在不方便,我建議使用pppoeconf這項工具程式,在terminal中輸入pppoeconf會出現對話視窗,輸入使用者帳號和密碼,完成設定後輸入pon dsl-provider手動連線。重新開機後,一樣會自動建立PPPoE連線。

參考資料:https://help.ubuntu.com/community/ADSLPPPoE

###

2013年9月22日 星期日

HTML4 第二講

結構 (structure) 元素是 HTML 最重要的一個部份,數量也是最多的一類,結構元素將網頁內容組織成有系統的結構,用來標示那些內容是文字、清單或表格等等。結構元素包括5大項目:文字、清單、表格、連結與物件,如下表總共有 46 個元素。

分類文字(text)清單 (list)表格 (table)連結 (link)物件 (object)
數量1981036
元素名稱
em
strong
dfn
code
samp
kbd
var
cite
abbr
acronym
blockquote
q
sub
sup
p
br
pre
ins
del

ul
ol
li
dl
dt
dd
dir
menu

table
caption
thead
tbody
tfoot
colgroup
col
tr
th
td

a
link
base

img
object
param
applet
map
area

接著我將概略介紹各類結構元素,詳細內容請參閱 HTML 的規範。

文字類

最常使用的大就是 p 元素,代表的是段落 (paragraph) ,一個段落代表的是作者的思想或論點,與文字如何呈現沒有任何關係,可以是左右對齊 (double-justified) 或是靠左對齊 (left-justified) ,結構上都是相同的。

如果要強制在段落中的文字分行 (line break) ,則是使用 br 元素。不然瀏覽器會在英文段落中空白或連字符號 (hyphen) 的地方自動分行,中文段落則是每個字的地方都能自動分行。如果不想要在空白的地方分行,則可以使用&nbsp;實體,如果要指定文字在何處分行,則在英文字中插入&shy;實體。

另外,HTML 文件中的 Carriage Return (\r) 和 Line Feed (\n) 控制字元都會變成空白字元,如果想讓這些控制字元原汁原味呈現,那麼就要使用 pre 元素,pre 是指預先編排 (preformatted)的

意思。

對於內容的變動,使用 ins 元素標示新增的內容,使用 del 元素標示刪除的內容。對於引用的內容,HTML 提供兩個元素標示引用資料, blockquote 元素用於區塊元素,q 元素則用於行內元素。

文字上若需要下標 (subscript) 與上標 (superscript) 的文字標示,使用 sub 元素標示下標符號,上標符號則使用 sup 元素。

最後介紹文字類中的詞組元素 (phrase elements),這些都是用來組織文字片段的結構,總共有10個。
  • em:強調
  • strong:比em更強調
  • dfn:定義
  • code:程式碼片段
  • samp:程式碼的輸出結果
  • kbd:使用者的輸入
  • var:變數或引數
  • cite:引用或參考
  • abbr:縮寫詞
  • acronym:首字母縮略字

清單類

HTML 提供三種清單結構,分別是無次序 (unordered)、有次序 (ordered) 與定義 (definition) 。無次序清單使用 ul 元素,而有次序清單使用 ol 元素,不論有無次序,這兩種元素都要包含一個以上的清單項目,也就是 li 元素。

定義的清單結構是使用 dl 元素,dl 元素中不是包含 li 元素,而是使用名稱 (term) 與描述 (description) 的組合當作清單項目,名稱和描述個別使用的是 dt 元素和 dd 元素。

在清單類中還有兩個 dir 元素和 menu 元素,dir 使用來做路徑清單,而 menu 則用來做選單清單,這兩個元素 HTML 規格已經標示為棄用 (deprecated),建議改用 ul 元素取代。

表格類

表格類元素的使用大概是僅次於文字類,表格除了可以呈現資料外,也可以用來做排版設計。一個表格由 table 元素組成, table 元素內有 cpation 元素顯示表格標題,表格的每列 (row) 是由 tr 元素組成,表格中最小的單位則是單元格 (cell),單元格使用的是 td 或 th 元素。

一個表格中包含多列,我們可以群組這些列, HTML 中有三種元素可以使用,thead 元素是表頭 (table header),tbody 是表體 (table body) ,thead是表尾 (table footer)。這些群組元素的用途在於,如果有一個很多列的表格,表體的內容會橫跨多個頁面,但表頭和表尾則會固定在頁面上顯示欄 (column) 資訊。

除了表格列群組,欄也可以群組,使用 colgroup 和 col 元素,這些用途是在設定欄的寬度和樣式,平常很少使用。

連結類

一個連結包含兩個部分,錨點 (anchor)和方向 (direction),連結的方向是從來源錨點 (source anchor) 指向目標錨點 (destination anchor)。

在文件標頭設定連結是使用 link 元素,不會顯示給使用者,而在文件主體中使用連結則是用 a 元素。 link 元素通常是設定外部樣式表,或是設定個網頁之間的關係。 一般在頁面上看到的超連結都是指 a 元素,將頁面上的資訊連結至目標錨點。

另外還有一個 base 元素, base 元素是用來設定路徑資訊,當使用相對路徑時,利用 base 元素指定參考的基礎路徑位置,這個元素必須放在文件標頭裡面。

物件類

物件類的元素是用來組織多媒體資訊,如圖像、媒體播放器、Java Applet等,最常使用的是 img 元素,img 元素用來插入圖像到 HTML 文件之中。此外,插入圖像也可以使用 object 元素,object 元素是通用類型的物件,通常是用來嵌入媒體播放器,物件執行時期的參數設定使用 param 元素。目前,applet 標示為棄用 (deprecated),建議 Java Applet 使用 object 元素。

在使用圖像的時候, HTML 提供影像地圖的功能,利用 map 和 area 元素設定圖像上特定區域的動作,通常是用來設定圖像上的超連結。

###

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) 不太一樣。區塊元素通常從新的一列開始放置,而行內元素則會在同一列中延續放置,所以才稱為「行內」。這兩類元素對於語言方向性的行為也有所不同,這部分將另外說明。

###

熱門文章