網頁

搜尋此網誌

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) 的地方自動分行,中文段落則是每個字的地方都能自動分行。如果不想要在空白的地方分行,則可以使用 實體,如果要指定文字在何處分行,則在英文字中插入­實體。

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

###

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

###

2013年7月29日 星期一

National Taipei University of Technology 台北科技大學

今年(2013年)捐贈書籍的時間又到了。延續去年 Web 浪潮,今年對於 Web 與行動網頁開發的書籍非常多, HTML5 和 CSS3 方面的基礎書籍已經逐漸飽和(氾濫),出版社開始引進較進階的內容(吸引讀者),像是效能最佳化、大規模建置等議題。

另一方面,NoSQL 資料庫的風潮逐漸受到開發者注意,彈性而無 Schema 的方式讓生產力有所提升,目前也有些 NoSQL 資料庫的書籍翻譯發行。這種有別於關聯式資料庫 (RDBMS) 的開發使用方式還很新,值得各位開發人員學習並評估是否適用。



這次捐贈的書籍清單如下所述:
  • Kristina Chodorow, Michael Dirolf著,吳曜撰譯 ,MongoDB技術手冊,台北:歐萊禮,2012。
  • Christopher Schmitt, Kyle Simpson著,賴屹民譯 ,HTML5 錦囊妙計,台北:歐萊禮,2013。
  • Steve Souders著,楊仁和譯,高效能網站建置指南,台北:歐萊禮,2013。
  • Rachel Andrew著,羅友志譯,CSS3網頁設計師手札,台北:碁峰資訊,2013。
  • 郭欣,巨型網站大師親自指導-建立極速Web站台的祕密,台北:佳魁資訊,2013。
  •  Matt West著,林盈新譯,HTML5 新世代網頁建置-新手也可以快速設計出專業網站,台北:果禾文化,2013。
  • 郭家寶,Google 御用網頁語言 Node.js:一流程式設計師養成精華,台北:佳魁資訊,2013。
  • 高俊峰,網站平台全面換血+完美優化:Linux伺服器加速營運14大原則,台北:佳魁資訊,2013。
  • Pramod J. Sadalage、Martin Fowler著,吳曜撰譯,搞懂NoSQL的15堂課,台北,碁峰資訊,2013。
  • 張春曉等編著,王者歸來:UNIX 王者殿堂,台北:佳魁資訊,2013。
  • Ian Lunn著,陳亦苓譯,CSS3 網頁設計優化-新手也能快速建立跨平台網頁台北:果禾文化,2013。
  • 張宴,Nginx-完全取代Apache,超輕、快、強的Web伺服器,台北:佳魁資訊,2013。
###

2013年7月23日 星期二

NoSQL Distilled 搞懂 NoSQL 的15堂課

最近這一年以來,NoSQL 資料庫越來越熱門,一直缺少一本書籍好好介紹 NoSQL ,現在,「搞懂NoSQL的15堂課 (NoSQL Distilled 中文版)」是很好的基礎入門書,讓我們搞清楚什麼是 NoSQL 資料庫,作者不講各個資料庫的操作細節,而是站在一個高度下有系統的介紹 NoSQL 資料庫,讓我們清楚瞭解 NoSQL 資料庫,不管你是否正在使用 NoSQL ,這本搞懂 NoSQL 的15堂課都非常值得閱讀。

Pramod J. Sadalage、Martin Fowler 著,吳曜撰譯,搞懂 NoSQL 的15堂課,台北,碁峰資訊,2013。
譯自:NoSQL Distilled: A Brief Guide to the Emerging World of Polyglot Persistence

NoSQL 不是 Not Only SQL ,事實是來自 Twitter 的分類標籤 (hashtag) ,由 Johan Oskarsson 命名使用的。實際上, NoSQL 是對一種類型資料庫的統稱,這類資料庫有幾個特徵:聚集 (aggregate) 的資料模型、無綱要 (schemaless) 、使用叢集 (cluster) 執行等,目前世界上有的 NoSQL 清單可以參考這個網站:http://nosql-databases.org/

「搞懂 NoSQL 的15堂課」分成兩大部分共15章,第一部分介紹 NoSQL 的資料模型,主要讓我們瞭解 NoSQL 的特點,第二部分則針對實作進行說明,主要是說明鍵值資料庫 (Key-Value Databases)文件資料庫 (Document Databases)欄位群資料庫 (Column-Family Stores ) 圖形資料庫 (Graph Databases) 這四大資料模型的差異與特性。

NoSQL 由於無綱要的性質,使得程式設計師開發應用程式的生產力提高,加上叢集的實現方式, NoSQL 有利於大規模的資料量。相對的,這些看似優點的特性也產生另外一些問題,例如一致性 (consistency) 的議題,由於無綱要與叢集的性質,這讓資料必須分散在各主機上,加上聚集的資料模型,使資料庫在讀取與更新的一致性必須處理與注意。

書中最後提到不同的資料庫是設計用來解決不同的問題,我們面對 NoSQL 的同時,不應該完全放棄使用關聯式資料庫,針對不同應用場合使用特定的資料庫,或是採用多語言維持 (polyglot persistence) 的儲存方式,這些都值得我們進一步思考設計。

###

2013年7月21日 星期日

Go Programming Language

最近檢視一下Google開發的Go程式語言,這裡是一些學習筆記。
  • 發明者
    • Robert Griesemer
    • Rob Pike
    • Ken Thompson (B語言發明者)
  • 開發小組,總共有5人,除3位發明者外,還有
    • Ian Taylor
    • Russ Cox
Go程式語言的發展歷史,這部份可以參考常見問題,摘要如下:
Go程式語言的標準規範:http://golang.org/ref/spec

Go程式語言的簡介,參考『The Expressiveness of Go』投影片的內容
  • 發明原因:為了Google內部需要
    • 有效率大規模的編程
    • 加速編輯撰寫
    • 分散式系統
    • 多核心與網路硬體
  • 速度與安全,或容易使用,結合下列兩類語言的特質
    • C++, Java
    • Python, JavaScript
  • 設計4原則
    • 簡單(simple)
      • 概念是容易理解認識的
    • 正交(orthogonal)
      • 混合概念是清楚的
      • 容易理解和預測發生什麼行為
    • 簡潔(succint)
      • 不需要預先宣告任何意圖
    • 安全(safe)
      • 違反的行為應該被偵測到
  • 簡單原則可以從語言的關鍵字評比
    • Go語言:25個
    • Python 2.7:31
    • C (K&R):32
    • C++:48
    • C#:77
  • 著眼點
    • Go相信程式設計師所寫下的程式碼
    • 意思是,Go試著尊重程式設計師的意圖
    • 這將是安全(safe)而有趣(fun)
    • 用比喻來說,這是安全帶(seat belts)和輔助輪(training wheels)的差異
到這裡為止,對Go程式語言已有初步的認識,了解Go是為了大規模的分散式系統而發明的程式語言。目前工作上也沒有這類應用場合,所以也不會特別花心思去學習,但Go在大規模Web Application上的應用確實有潛力,值得留意Go程式語言的發展。

###

熱門文章