13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/htm/video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | # 程式人文集
17 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/source/article3.md:
--------------------------------------------------------------------------------
1 | ## Random variable of normal distribution (作者：Bridan)
2 |
3 | 發表 [亂數產生器](http://4rdp.blogspot.com/2008/06/blog-post_14.html) 一文後，吸引不少讀者參考，近日發現網友 [PeiLingLiu 的部落格](http://blog.pixnet.net/PeiLingLiu/post/16013748) ，分析她的筆記， [Box-Muller transform](http://en.wikipedia.org/wiki/Box-Muller_transform) 這方法也不錯。簡單的說， *將兩獨立均勻分佈變數，經變換計算與極座標轉換可產出常態分佈變數* 。於 [嵌入式系統](http://zh.wikipedia.org/w/index.php?title=%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%B3%BB%E7%BB%9F&variant=zh-tw) ，除非 MCU (Micro Control Unit) 的速度夠快，不然 [中央極限定理](http://zh.wikipedia.org/w/index.php?title=%E4%B8%AD%E5%BF%83%E6%9E%81%E9%99%90%E5%AE%9A%E7%90%86&variant=zh-tw) 的方法， *計算時間較短* 。亂數分佈情形，請參考 [EXCEL 檔](http://4rdp.googlegroups.com/web/Random2.xls?hl=zh-TW&gda=WlxnhT8AAAD2KwrkKIeO6bMyd5uLjj5txtGxgudbQk3qV1mzw7u0vRcwy3dI2CgZTioxnYaX_ECcpGes9sfYrOvkdmCVag2c) 內容。
4 |
5 | 
6 |
7 | 
8 |
9 | 
10 |
11 | 
12 |
13 | (本文來自「研發養成所」 Bridan 的網誌，原文網址為 # 影音頻道
17 |
13 |
15 |
23 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/htm/focus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
13 |
15 |
23 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/htm/discuss.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
13 |
15 |
23 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/htm/video1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
23 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/code/muxmap/muxmap.qpf:
--------------------------------------------------------------------------------
1 | # -------------------------------------------------------------------------- #
2 | #
3 | # Copyright (C) 1991-2012 Altera Corporation
4 | # Your use of Altera Corporation's design tools, logic functions
5 | # and other software and tools, and its AMPP partner logic
6 | # functions, and any output files from any of the foregoing
7 | # (including device programming or simulation files), and any
8 | # associated documentation or information are expressly subject
9 | # to the terms and conditions of the Altera Program License
10 | # Subscription Agreement, Altera MegaCore Function License
11 | # Agreement, or other applicable license agreement, including,
12 | # without limitation, that your use is for the sole purpose of
13 | # programming logic devices manufactured by Altera and sold by
14 | # Altera or its authorized distributors. Please refer to the
15 | # applicable agreement for further details.
16 | #
17 | # -------------------------------------------------------------------------- #
18 | #
19 | # Quartus II 64-Bit
20 | # Version 12.1 Build 177 11/07/2012 SJ Web Edition
21 | # Date created = 11:25:44 September 01, 2014
22 | #
23 | # -------------------------------------------------------------------------- #
24 |
25 | QUARTUS_VERSION = "12.1"
26 | DATE = "11:25:44 September 01, 2014"
27 |
28 | # Revisions
29 |
30 | PROJECT_REVISION = "mux"
31 |
--------------------------------------------------------------------------------
/htm/title.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
17 |
21 | -
18 |
- 看影片學 FPGA 設計 19 |
看影片學 FPGA 設計
22 |
14 |
16 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
15 |
17 |
22 |
23 |
24 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/source/home.md:
--------------------------------------------------------------------------------
1 | ### 關於程式人雜誌
2 |
3 | 程式人雜誌是一個結合「開放原始碼與公益捐款活動」的雜誌，簡稱「開放公益雜誌」。開放公益雜誌本著「讀書做善事、寫書做公益」的精神，我們非常歡迎程式人認養專欄、或者捐出您的網誌。
4 |
5 | ### 雜誌下載
6 |
7 | 出刊年月 epub ipad:PDF A4:PDF 單頁 HTM 原始碼 全部下載
8 | ------------ ---------- ----------- -------- ----------- ---------- -------------
9 | 2014年9月 [epub] [ipad.pdf] [A4.pdf] [pmag.html] [code.zip] [github]
10 |
11 | ### 本期內容 (焦點：從 CSS, LESS/SASS 到 Bootstrap)
12 | * 前言
13 | * [編輯小語](editor.html)
14 | * [授權聲明](license.html)
15 | * 本期焦點
16 | * [CSS 網頁排版語言](focus1.html)
17 | * [CSS 的變種： LESS 與 SASS](focus2.html)
18 | * [Bootstrap 網頁排版框架](focus3.html)
19 | * 程式人文集
20 | * [從 Arduino 到 AVR 晶片(4) -- Blink with Timer (作者：Cooper Maa)](article1.html)
21 | * [Verilog 的電路合成研究 -- 以 MUX 多工器為例 (作者：陳鍾誠)](article1.html)
22 | * [Random variable of normal distribution (作者：Bridan)](article3.html)
23 | * [Visual Basic 6.0: 奇數魔術方塊(Odd Magic Square) 詳細解法 (作者：廖憲得 0xde)](article4.html)
24 | * [雜誌訊息](info.html)
25 |
26 | ### 雜誌取得
27 |
28 | 程式人雜誌預定於每個月 1 日出刊，您可以從下列網址取得程式人雜誌的所有內容 (包含當月最新出刊的雜誌)。
29 |
30 | *
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
28 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/code/muxmap/db/mux.rpp.qmsg:
--------------------------------------------------------------------------------
1 | { "Info" "IQEXE_SEPARATOR" "" "*******************************************************************" { } { } 3 0 "*******************************************************************" 0 0 "" 0 -1 1409542253446 ""}
2 | { "Info" "IQEXE_START_BANNER_PRODUCT" "Netlist Viewers Preprocess Quartus II 64-Bit " "Running Quartus II 64-Bit Netlist Viewers Preprocess" { { "Info" "IQEXE_START_BANNER_VERSION" "Version 12.1 Build 177 11/07/2012 SJ Web Edition " "Version 12.1 Build 177 11/07/2012 SJ Web Edition" { } { } 0 0 "%1!s!" 0 0 "" 0 -1 1409542253447 ""} { "Info" "IQEXE_START_BANNER_TIME" "Mon Sep 01 11:30:53 2014 " "Processing started: Mon Sep 01 11:30:53 2014" { } { } 0 0 "Processing started: %1!s!" 0 0 "" 0 -1 1409542253447 ""} } { } 4 0 "Running %2!s! %1!s!" 0 0 "" 0 -1 1409542253447 ""}
3 | { "Info" "IQEXE_START_BANNER_COMMANDLINE" "quartus_rpp muxmap -c mux --netlist_type=sgate " "Command: quartus_rpp muxmap -c mux --netlist_type=sgate" { } { } 0 0 "Command: %1!s!" 0 0 "" 0 -1 1409542253447 ""}
4 | { "Info" "IQEXE_ERROR_COUNT" "Netlist Viewers Preprocess 0 s 0 s Quartus II 64-Bit " "Quartus II 64-Bit Netlist Viewers Preprocess was successful. 0 errors, 0 warnings" { { "Info" "IQEXE_END_PEAK_VSIZE_MEMORY" "284 " "Peak virtual memory: 284 megabytes" { } { } 0 0 "Peak virtual memory: %1!s! megabytes" 0 0 "" 0 -1 1409542253534 ""} { "Info" "IQEXE_END_BANNER_TIME" "Mon Sep 01 11:30:53 2014 " "Processing ended: Mon Sep 01 11:30:53 2014" { } { } 0 0 "Processing ended: %1!s!" 0 0 "" 0 -1 1409542253534 ""} { "Info" "IQEXE_ELAPSED_TIME" "00:00:00 " "Elapsed time: 00:00:00" { } { } 0 0 "Elapsed time: %1!s!" 0 0 "" 0 -1 1409542253534 ""} { "Info" "IQEXE_ELAPSED_CPU_TIME" "00:00:00 " "Total CPU time (on all processors): 00:00:00" { } { } 0 0 "Total CPU time (on all processors): %1!s!" 0 0 "" 0 -1 1409542253534 ""} } { } 0 0 "%6!s! %1!s! was successful. %2!d! error%3!s!, %4!d! warning%5!s!" 0 0 "" 0 -1 1409542253534 ""}
5 |
--------------------------------------------------------------------------------
/htm/license.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
21 | -
18 |
- 編輯小語 19 |
編輯小語
22 |在本期的「程式人雜誌」中，聚焦的主題是「網頁排版語言」。
23 |雖然網頁的排版並不是「程式」，但在網站技術發達的今天，程式人不懂排版語言恐怕也是不行的！
24 |CSS 是個標準的網頁排版語言，而 LESS 與 SASS 則是從 CSS 延伸而來，功能較強大的排版語言，至於 Bootstrap 則是由 Twitter 所示出的一組網頁排版框架，Bootstrap 包含一組用 LESS 所撰寫的排版語言，以及 jQuery 所建構的互動機制，可以讓您輕易的做出在電腦和手機上都能美觀呈現的網頁。
25 |有了 Bootstrap，程式人就不怕做出來的網頁太醜而難登大雅之堂了！
26 |---- （程式人雜誌編輯 - 陳鍾誠）
27 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
31 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/source/article4.md:
--------------------------------------------------------------------------------
1 | ## Visual Basic 6.0: 奇數魔術方塊(Odd Magic Square) 詳細解法 (作者：廖憲得 0xde)
2 |
3 | 什麼是奇數魔術方陣 (?)
4 |
5 | > 魔術方塊是許多人想要解決的一個古老的數學問題，您可能在一些雜誌上看過，也可能您的老師有介紹過。一個魔術方塊是在於安排數字在一矩陣 `[n*n]` 中，從 1 到 n^2, 每一數字僅出現一次,而且，任一列、任一行或任一對角線的總和都相同。求總和的公式要證明為 `n*[ ( n^2 + 1) / 2]` ，並不是很困難，若我們利用這個公式，對 `[5*5]` 矩陣而言，其總和為 `5*[ ( 5^2 + 1 ) / 2 ] = 65` ，其對應的魔術方塊輸出如下：
6 |
7 | 
8 |
9 | 
10 |
11 | ```monobasic
12 | '# [Visual Basic 6.0] 奇數魔術方塊(Odd Magic Square)
13 | '# 0xDe
14 | Dim InputN
15 | Dim Squate()
16 | Private Sub Form_Activate()
17 | '------------------------------
18 | InputN = 3 ' 輸入 (必須為奇數)
19 | '------------------------------
20 |
21 |
22 | '------------------------------
23 | If InputN Mod 2 = 0 Then Exit Sub ' 判斷是否為奇數
24 | '------------------------------
25 | ReDim Square(InputN - 1, InputN - 1)
26 | '------------------------------
27 | Print "N= " & InputN & "的奇數魔術方陣" & vbCrLf
28 | Randomize Timer ' 亂數產生
29 | TempX = Int(Rnd * InputN) ' 隨機起始 X
30 | TempY = Int(Rnd * InputN) ' 隨機起始 Y
31 | '------------------------------
32 | Do Until N = (InputN ^ 2) ' 直到放滿
33 | If Square(TempX, TempY) = "" Then
34 | N = N + 1
35 | Square(TempX, TempY) = N
36 |
37 | TempX = TempX - 1 ' 向上移
38 | If TempX < 0 Then TempX = InputN - 1
39 | TempY = TempY + 1 ' 向右移
40 | If TempY > InputN - 1 Then TempY = 0
41 | Else
42 | ' 恢復原本的狀態往下
43 | TempX = TempX + 1
44 | If TempX > InputN - 1 Then TempX = 0
45 | TempY = TempY - 1
46 | If TempY < 0 Then TempY = InputN - 1
47 | ' 往下
48 | TempX = TempX + 1
49 | If TempX > InputN - 1 Then TempX = 0
50 | End If
51 | Loop
52 | '------------------------------
53 | For I = 0 To InputN - 1 ' 將結果輸出
54 | For J = 0 To InputN - 1
55 | Print Square(I, J);
56 | Next J
57 | Print
58 | Next I
59 | '------------------------------
60 | End Sub
61 | ```
62 |
63 | * 檔案下載：[Visual Basic 6.0:奇數魔術方塊(Odd Magic Square).rar](http://files.dotblogs.com.tw/0xde/1311/20131113153918434.rar)
64 |
65 | 【本文作者為「廖憲得」，原文網址為：
17 |
21 | -
18 |
- 授權聲明 19 |
授權聲明
22 |本雜誌許多資料修改自維基百科，採用 創作共用：姓名標示、相同方式分享 授權，若您想要修改本書產生衍生著作時，至少應該遵守下列授權條件：
23 |-
24 |
- 標示原作者姓名 (包含該文章作者，若有來自維基百科的部份也請一併標示)。 25 |
- 採用 創作共用：姓名標示、相同方式分享 的方式公開衍生著作。 26 |
另外、當本雜誌中有文章或素材並非採用 姓名標示、相同方式分享 時，將會在該文章或素材後面標示其授權，此時該文章將以該標示的方式授權釋出，請修改者注意這些授權標示，以避免產生侵權糾紛。
28 |例如有些文章可能不希望被作為「商業性使用」，此時就可能會採用創作共用：姓名標示、非商業性、相同方式分享 的授權，此時您就不應當將該文章用於商業用途上。
29 |最後、懇請勿移除公益捐贈的相關描述，以便讓愛心得以持續散播！
30 |顱顏患者 銀行：009彰化銀行民生分行
33 |
(如唇顎裂、小耳症或其他罕見顱顏缺陷） 帳號：5234-01-41778-800 34 | 02-27190408分機 232 35 | 36 | 社團法人台灣省兒童少年成長協會
單親、隔代教養.弱勢及一般家庭之兒童青少年 銀行：新光銀行
37 |
戶名：台灣省兒童少年成長協會
38 | 04-23058005 帳號：103-0912-10-000212-0 39 | ------------------------------- ----------------------------- ----------------------------------------- ------------------------------------------- 40 | 41 | [看影片學 markdown 編輯出版流程]:https://dl.dropboxusercontent.com/u/101584453/pmag/201304/htm/video1.html 42 | -------------------------------------------------------------------------------- /htm/discuss1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
41 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/htm/article3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
21 | -
18 |
- 討論：本月討論精選 19 |
討論：本月討論精選
22 |-
23 |
- 簡單的圖表說明各種不同的開放原始碼授權 -- https://www.facebook.com/groups/programmerMagazine/permalink/779281538755231/ 24 | 28 |
- 直接用JavaScript對網頁圖片裡的英文字做文字辨識(OCR),需要插入一個大約1mb大小的JavaScript檔案在網頁裡,有demo,不過效果沒很好. 29 | 32 |
- 不錯的雜誌：编程狂人 - 推酷 -- https://www.facebook.com/groups/programmerMagazine/permalink/775421112474607/
33 |
-
34 |
- http://www.tuicool.com/mags/ 35 |
36 | 機器語言,是由什麼語言寫的? -- https://www.facebook.com/groups/programmerMagazine/permalink/780470388636346/
37 | 是否有文章介紹如何做出一個程式語言?一個程式語言設計的極限是什麼? -- https://www.facebook.com/groups/programmerMagazine/permalink/780457841970934/
38 |
參考文獻
40 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/code/muxmap/mux.qsf:
--------------------------------------------------------------------------------
1 | # -------------------------------------------------------------------------- #
2 | #
3 | # Copyright (C) 1991-2012 Altera Corporation
4 | # Your use of Altera Corporation's design tools, logic functions
5 | # and other software and tools, and its AMPP partner logic
6 | # functions, and any output files from any of the foregoing
7 | # (including device programming or simulation files), and any
8 | # associated documentation or information are expressly subject
9 | # to the terms and conditions of the Altera Program License
10 | # Subscription Agreement, Altera MegaCore Function License
11 | # Agreement, or other applicable license agreement, including,
12 | # without limitation, that your use is for the sole purpose of
13 | # programming logic devices manufactured by Altera and sold by
14 | # Altera or its authorized distributors. Please refer to the
15 | # applicable agreement for further details.
16 | #
17 | # -------------------------------------------------------------------------- #
18 | #
19 | # Quartus II 64-Bit
20 | # Version 12.1 Build 177 11/07/2012 SJ Web Edition
21 | # Date created = 11:25:44 September 01, 2014
22 | #
23 | # -------------------------------------------------------------------------- #
24 | #
25 | # Notes:
26 | #
27 | # 1) The default values for assignments are stored in the file:
28 | # mux_assignment_defaults.qdf
29 | # If this file doesn't exist, see file:
30 | # assignment_defaults.qdf
31 | #
32 | # 2) Altera recommends that you do not modify this file. This
33 | # file is updated automatically by the Quartus II software
34 | # and any changes you make may be lost or overwritten.
35 | #
36 | # -------------------------------------------------------------------------- #
37 |
38 |
39 | set_global_assignment -name FAMILY "Cyclone IV E"
40 | set_global_assignment -name DEVICE EP4CE6E22C6
41 | set_global_assignment -name TOP_LEVEL_ENTITY mux_if1_no_default
42 | set_global_assignment -name ORIGINAL_QUARTUS_VERSION 12.1
43 | set_global_assignment -name PROJECT_CREATION_TIME_DATE "11:25:44 SEPTEMBER 01, 2014"
44 | set_global_assignment -name LAST_QUARTUS_VERSION 12.1
45 | set_global_assignment -name VERILOG_FILE mux_if1_no_default.v
46 | set_global_assignment -name VERILOG_FILE mux_if1.v
47 | set_global_assignment -name VERILOG_FILE mux_case_no_default.v
48 | set_global_assignment -name VERILOG_FILE mux_case.v
49 | set_global_assignment -name PROJECT_OUTPUT_DIRECTORY output_files
50 | set_global_assignment -name MIN_CORE_JUNCTION_TEMP 0
51 | set_global_assignment -name MAX_CORE_JUNCTION_TEMP 85
52 | set_global_assignment -name ERROR_CHECK_FREQUENCY_DIVISOR 1
53 | set_global_assignment -name NOMINAL_CORE_SUPPLY_VOLTAGE 1.2V
54 | set_global_assignment -name PARTITION_NETLIST_TYPE SOURCE -section_id Top
55 | set_global_assignment -name PARTITION_FITTER_PRESERVATION_LEVEL PLACEMENT_AND_ROUTING -section_id Top
56 | set_global_assignment -name PARTITION_COLOR 16764057 -section_id Top
57 | set_instance_assignment -name PARTITION_HIERARCHY root_partition -to | -section_id Top
--------------------------------------------------------------------------------
/htm/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
20 |
21 | Random variable of normal distribution (作者：Bridan)
22 |發表 亂數產生器 一文後，吸引不少讀者參考，近日發現網友 PeiLingLiu 的部落格 ，分析她的筆記， Box-Muller transform 這方法也不錯。簡單的說， 將兩獨立均勻分佈變數，經變換計算與極座標轉換可產出常態分佈變數 。於 嵌入式系統 ，除非 MCU (Micro Control Unit) 的速度夠快，不然 中央極限定理 的方法， 計算時間較短 。亂數分佈情形，請參考 EXCEL 檔 內容。
23 |
24 | 
25 |
26 |
25 |
27 | 
28 |
29 |
28 |
30 | 
31 |
32 |
31 |
33 | 
34 |
35 |
34 | (本文來自「研發養成所」 Bridan 的網誌，原文網址為 http://4rdp.blogspot.tw/2008/06/random-variable-of-normal-distribution.html ，由陳鍾誠編輯後刊登於程式人雜誌)
36 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
20 |
21 |
43 |
79 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/source/article2.md:
--------------------------------------------------------------------------------
1 | ## Verilog 的電路合成研究 -- 以 MUX 多工器為例 (作者：陳鍾誠)
2 |
3 | 雖然 Verilog 描述的是硬體，但對於沒有硬體背景的我而言，總是把它當成 C 語言來寫。但是、有時候就是會踢到鐵板，像是我設計的某幾個 CPU 在合成的時候跑超久的，放到 Altera Quartus II 裏合成，跑上半個小時都還出不來。而且有時候用 icarus 模擬都正常，但是放上 FPGA 之後執行結果就錯了。
4 |
5 | 對於這個現像，我總是百思不解，直到有人告訴我這可能和 if 有關，因為當 if 的條件沒有列完，或者沒有加上完整的 else 時，就會有 Latch 產生。
6 |
7 | 對、就是 Latch，這在「組合電路設計」上是一個很不好的情況。因為「組合電路」不應該會有內部狀態，但是當 if 或 case 語句沒有完整的「被封閉」時，就會留下某些「開放」的情況。這時候「電路合成工具」為了讓電路仍然可以運作，會加入 Latch 來處理這種「開放案例」，結果原本應該沒有狀態的組合電路就變成了「有狀態的循序電路」，這可能會造成很多奇怪的問題產生。
8 |
9 | 為了解釋何謂「未封閉的 if 會產生 Latch，我們用 Altera Quartus II 的『Tools/Netlist Viewers/RTL Viewer』合成電路檢視工具來觀察一個多工器 (MUX) 的不同寫法，並試著分析看看「未封閉的 if/case 語句會產生甚麼問題？」
10 |
11 | ### 良好案例： mux_case.v
12 |
13 | 首先、讓我們看看用 case 語法設計的多工器，程式如下所示：
14 |
15 | 檔案： mux_case.v
16 |
17 | ```verilog
18 | module mux_case(input i0, i1, i2, i3, input [1:0] sel, output reg o);
19 | always@(i0 or i1 or i2 or i3 or sel) begin
20 | case (sel)
21 | 2'b00 : o = i0;
22 | 2'b01 : o = i1;
23 | 2'b10 : o = i2;
24 | default : o = i3;
25 | endcase
26 | end
27 | endmodule
28 | ```
29 |
30 | 此時若用 RTL Viewer 去檢視，會看到下列的電路圖。
31 |
32 | 
33 |
34 |
35 | ### 不良案例： mux_case_no_default.v
36 |
37 | 接著、讓我們把 case 裏的 default 拿掉，形成一個有「空洞」的程式，如下所示：
38 |
39 | ```verilog
40 | module mux_case_no_default(input i0, i1, i2, i3, input [1:0] sel, output reg o);
41 | always@(i0 or i1 or i2 or i3 or sel) begin
42 | case (sel)
43 | 2'b00 : o = i0;
44 | 2'b01 : o = i1;
45 | 2'b10 : o = i2;
46 | // default : o = i3;
47 | endcase
48 | end
49 | endmodule
50 | ```
51 |
52 | 結果、按下 Start Compilation 的按鈕後，訊息框中就多出了下列的警告訊息。
53 |
54 | ```
55 | ...
56 | Warning (10270): Verilog HDL Case Statement warning at mux_case_no_default.v(3): incomplete case statement has no default case item
57 |
58 | Warning (10240): Verilog HDL Always Construct warning at mux_case_no_default.v(2): inferring latch(es) for variable "o", which holds its previous value in one or more paths through the always construct
59 | Info (10041): Inferred latch for "o" at mux_case_no_default.v(2)
60 |
61 | Warning (13012): Latch mux_case_no_default:mux1|o has unsafe behavior
62 |
63 | Warning (13013): Ports D and ENA on the latch are fed by the same signal sel[0]
64 | ...
65 | ```
66 |
67 | 此時若用 RTL Viewer 去檢視，會看到下列的電路圖。
68 |
69 | 
70 |
71 | ### 良好案例： mux_if1.v
72 |
73 | 檔案：mux_if1.v
74 |
75 | ```verilog
76 | module mux_if1(input i0, i1, i2, i3, input [1:0] sel, output reg o);
77 | always@(i0 or i1 or i2 or i3 or sel) begin
78 | if (sel == 2'b00)
79 | o = i0;
80 | else if (sel == 2'b01)
81 | o = i1;
82 | else if (sel == 2'b10)
83 | o = i2;
84 | else
85 | o = i3;
86 | end
87 | endmodule
88 | ```
89 |
90 | 
91 |
92 |
93 | ### 不良案例： mux_if1_no_default.v
94 |
95 | 檔案： mux_if1_no_default.v
96 |
97 | ```verilog
98 | module mux_if1_no_default(input i0, i1, i2, i3,
99 | input [1:0] sel, output reg o);
100 | always@(i0 or i1 or i2 or i3 or sel) begin
101 | if (sel == 2'b00)
102 | o = i0;
103 | else if (sel == 2'b01)
104 | o = i1;
105 | else if (sel == 2'b10)
106 | o = i2;
107 | else if (sel == 2'b11)
108 | o = i3;
109 | end
110 | endmodule
111 | ```
112 |
113 | 此時若用 RTL Viewer 去檢視，會看到下列的電路圖。
114 |
115 | 
116 |
117 | ### 示範影片
118 |
119 | 筆者用 Altera Quartus II 建立的一個專案，並將上述四個範例放入，一個一個用 Quartus II 分析後並用 RTL Viewer 檢視電路圖，以下是完整的教學錄影，請讀者參考。
120 |
121 | * [YouTube : Verilog 的電路合成研究-以 MUX 多工器為例 (使用 Altera Quartus II / RTL Viewer 檢視)](http://youtu.be/8r4Ac4xueb4)
122 |
123 | ### 結語
124 |
125 | 所以、當您用 Verilog 「寫程式」的時候，請務必對 case 語法加上 default，然後對每個 if 語法都要加上 else ，這樣才能形成「封閉性良好」的程式。
126 |
127 | 當 Verilog 程式的「封閉性良好」時，合成工具才不會產生 Latch 去試圖彌補開放性的情況，也才不會讓你的組合電路變成「狀態電路」，造成電路的浪費。
128 |
129 | 更重要的是，這樣的 Verilog 程式才比較不容易出現「執行時期錯誤」或者「合成電路非常緩慢」的情況。
130 |
131 | 這是我個人慘痛經驗所換取的教訓，希望讀者不會重蹈覆轍啊！
132 |
133 | ### 參考文獻
134 | * [真 OO无双 - 博客园: (原創) 多工器MUX coding style整理 (SOC) (Verilog) (Quartus II)](http://www.cnblogs.com/oomusou/archive/2010/09/05/verilog_mux2.html)
135 | * [Stack Exchange : Why are inferred latches bad?](http://electronics.stackexchange.com/questions/38645/why-are-inferred-latches-bad)
136 |
137 | 【本文由陳鍾誠取材並修改自 [維基百科]，採用創作共用的 [姓名標示、相同方式分享] 授權】
138 |
139 |
--------------------------------------------------------------------------------
/htm/info.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 關於程式人雜誌
17 |程式人雜誌是一個結合「開放原始碼與公益捐款活動」的雜誌，簡稱「開放公益雜誌」。開放公益雜誌本著「讀書做善事、寫書做公益」的精神，我們非常歡迎程式人認養專欄、或者捐出您的網誌。
18 |雜誌下載
19 || 出刊年月 | 23 |epub | 24 |ipad:PDF | 25 |A4:PDF | 26 |單頁 HTM | 27 |原始碼 | 28 |全部下載 | 29 |
|---|---|---|---|---|---|---|
| 2014年9月 | 34 |epub | 35 |ipad.pdf | 36 |A4.pdf | 37 |pmag.html | 38 |code.zip | 39 |github | 40 |
本期內容 (焦點：從 CSS, LESS/SASS 到 Bootstrap)
44 |-
45 |
- 前言 46 | 50 |
- 本期焦點
51 |
-
52 |
- CSS 網頁排版語言 53 |
- CSS 的變種： LESS 與 SASS 54 |
- Bootstrap 網頁排版框架 55 |
56 | - 程式人文集 57 | 63 |
- 雜誌訊息 64 |
雜誌取得
66 |程式人雜誌預定於每個月 1 日出刊，您可以從下列網址取得程式人雜誌的所有內容 (包含當月最新出刊的雜誌)。
67 | 70 |連絡我們
71 |竭誠歡迎程式人投稿，或者成為本雜誌的專欄作家，現在就可以加入 程式人雜誌社團 一同共襄盛舉。
72 |本雜誌編輯為「陳鍾誠 (@ccckmit)」，若要聯絡編輯，請寄信到 。
78 |
13 |
15 | 程式人雜誌 -- 2014 年 9 月號 (開放公益出版品)
14 |
16 |
26 |
41 |
78 |
79 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/source/focus2.md:
--------------------------------------------------------------------------------
1 | ## CSS 的變種： LESS 與 SASS
2 |
3 | 瀏覽器所認識的語言，不外乎是 HTML/CSS/JavaScript 這些 W3C 所規定的官方語言。因此像 LESS 與 SASS 這些語言，當然就屬於「非官方語言」，也就是「變種」。
4 |
5 | LESS 與 SASS 都是 CSS 的變種，語法和 CSS 有點像，但卻又不太一樣。這類變種語言通常提供了更強大的功能，更簡潔的語法，而且最後會被轉換成 CSS 語言之後，才能放到瀏覽器上使用。
6 |
7 | ### 變種 1 : LESS
8 |
9 | LESS 是由 Alexis Sellier 所設計的工具，原本是用 Ruby 實作，用來將 LESS 語法轉換成 CSS 語言。後來改用 JavaScript 設計後，就能內嵌到瀏覽器中，動態的將 LESS 轉為 CSS 後立刻呈現。
10 |
11 | 舉例而言、 LESS 擁有變數的慨念，例如以下範例中的 `@color` 就是一個變數。
12 |
13 | ```CSS
14 | @color: #4D926F;
15 |
16 | #header {
17 | color: @color;
18 | }
19 | h2 {
20 | color: @color;
21 | }
22 | ```
23 |
24 | 上述 LESS 文件被轉換成 CSS 之後，會變成下列形式。
25 |
26 | ```CSS
27 | #header {
28 | color: #4D926F;
29 | }
30 | h2 {
31 | color: #4D926F;
32 | }
33 | ```
34 |
35 | 當然、LESS 還支援更強大的語法，例如 Mixin 就是個經典的功能，以下是一個簡單的範例。
36 |
37 | ```CSS
38 | .rounded-corners (@radius: 5px) {
39 | border-radius: @radius;
40 | -webkit-border-radius: @radius;
41 | -moz-border-radius: @radius;
42 | }
43 |
44 | #header {
45 | .rounded-corners;
46 | }
47 | #footer {
48 | .rounded-corners(10px);
49 | }
50 | ```
51 |
52 | 上述文件被轉換成 CSS 之後會變成下列形式。
53 |
54 | ```CSS
55 | #header {
56 | border-radius: 5px;
57 | -webkit-border-radius: 5px;
58 | -moz-border-radius: 5px;
59 | }
60 | #footer {
61 | border-radius: 10px;
62 | -webkit-border-radius: 10px;
63 | -moz-border-radius: 10px;
64 | }
65 | ```
66 |
67 | LESS 可以提供層次結構的套嵌語法，以下是一個範例。
68 |
69 | ```CSS
70 | #header {
71 | h1 {
72 | font-size: 26px;
73 | font-weight: bold;
74 | }
75 | p { font-size: 12px;
76 | a { text-decoration: none;
77 | &:hover { border-width: 1px }
78 | }
79 | }
80 | }
81 | ```
82 |
83 | 上述範例被轉換成 CSS 之後如下所示。
84 |
85 | ```CSS
86 | #header h1 {
87 | font-size: 26px;
88 | font-weight: bold;
89 | }
90 | #header p {
91 | font-size: 12px;
92 | }
93 | #header p a {
94 | text-decoration: none;
95 | }
96 | #header p a:hover {
97 | border-width: 1px;
98 | }
99 | ```
100 |
101 | 另外、 LESS 還提供了「運算式與函數呼叫」等功能，請看以下範例。
102 |
103 | ```CSS
104 | @the-border: 1px;
105 | @base-color: #111;
106 | @red: #842210;
107 |
108 | #header {
109 | color: @base-color * 3;
110 | border-left: @the-border;
111 | border-right: @the-border * 2;
112 | }
113 | #footer {
114 | color: @base-color + #003300;
115 | border-color: desaturate(@red, 10%);
116 | }
117 | ```
118 |
119 | 上述範例轉換成 CSS 之後，應該會像下面文件這樣。
120 |
121 | ```CSS
122 | #header {
123 | color: #333;
124 | border-left: 1px;
125 | border-right: 2px;
126 | }
127 | #footer {
128 | color: #114411;
129 | border-color: #7d2717;
130 | }
131 | ```
132 |
133 | ### 變種 2 : SASS
134 |
135 | SASS (Syntactically Awesome Stylesheets) 是由 Hampton Catlin 設計，然後由 Natalie Weizenbaum 實作的一種樣式語言。
136 |
137 | 如果您瞭解 JavaScript 與 Python 的差別，或許就能輕易理解 LESS 與 SASS 的差別了。
138 |
139 | LESS 與 JavaScript 一樣，有用 {...} 的大括號框起來，而 SASS 則像 Python 一樣，沒有用大括號，而是透過換行與縮排來表現這種層次結構。
140 |
141 | 事實上，SASS 還有一個變種，就是加上大括號的版本，稱為 SCSS，這兩種風格可以互相轉換，您可以依照習慣挑選使用。
142 |
143 | 舉例而言，以下是一個 SASS 與 SCSS 的對照範例。
144 |
145 | ```html
146 | 雜誌訊息
27 |讀者訂閱
28 |程式人雜誌是一個結合「開放原始碼與公益捐款活動」的雜誌，簡稱「開放公益雜誌」。開放公益雜誌本著「讀書做善事、寫書做公益」的精神，我們非常歡迎程式人認養專欄、或者捐出您的網誌，如果您願意成為本雜誌的專欄作家，請加入 程式人雜誌社團 一同共襄盛舉。
29 |我們透過發行這本雜誌，希望讓大家可以讀到想讀的書，學到想學的技術，同時也讓寫作的朋友的作品能產生良好價值 – 那就是讓讀者根據雜誌的價值捐款給慈善團體。 讀雜誌做公益也不需要有壓力，您不需要每讀一本就急著去捐款，您可以讀了十本再捐，或者使用固定的月捐款方式，當成是雜誌訂閱費，或者是季捐款、一年捐一次等都 OK ! 甚至是單純當個讀者我們也都很歡迎！
30 |本雜誌每期參考價：NT 50 元，如果您喜歡本雜誌，請將書款捐贈公益團體。例如可捐贈給「羅慧夫顱顏基金會 彰化銀行(009) 帳號：5234-01-41778-800」。(若匯款要加註可用「程式人雜誌」五個字)
31 |投稿須知
32 |給專欄寫作者： 做公益不需要有壓力。如果您願意撰寫專欄，您可以輕鬆的寫，如果當月的稿件出不來，我們會安排其他稿件上場。
33 |給網誌捐贈者： 如果您沒時間寫專欄或投稿，沒關係，只要將您的網誌以 [創作共用的「姓名標示、非商業性、相同方式分享」授權] 並通知我們，我們會自動從中選取需要的文章進行編輯，放入適當的雜誌當中出刊。
34 |給文章投稿者： 程式人雜誌非常歡迎您加入作者的行列，如果您想撰寫任何文章或投稿，請用 markdown 或 LibreOffice 編輯好您的稿件，並於每個月 25 日前投稿到程式人雜誌社團 的檔案區，我們會盡可能將稿件編入隔月1號出版程式人雜誌當中，也歡迎您到社團中與我們一同討論。
35 |如果您要投稿給程式人雜誌，我們最希望的格式是採用 markdown 的格式撰寫，然後將所有檔按壓縮為 zip 上傳到社團檔案區給我們， 如您想學習 markdown 的撰寫出版方式，可以參考 看影片學 markdown 編輯出版流程 一文。
36 |如果您無法採用 markdown 的方式撰寫，也可以直接給我們您的稿件，像是 MS. Word 的 doc 檔或 LibreOffice 的 odt 檔都可以，我們 會將這些稿件改寫為 markdown 之後編入雜誌當中。
37 |參與編輯
38 |您也可以擔任程式人雜誌的編輯，甚至創造一個全新的公益雜誌，我們誠摯的邀請您加入「開放公益出版」的行列，如果您想擔任編輯或創造新雜誌，也歡迎到 程式人雜誌社團 來與我們討論相關事宜。
39 |公益資訊
40 || 公益團體 | 48 |聯絡資訊 | 49 |服務對象 | 50 |捐款帳號 | 51 |
|---|---|---|---|
| 財團法人羅慧夫顱顏基金會 | 56 |http://www.nncf.org/ 02-27190408分機 232 |
62 | 顱顏患者 (如唇顎裂、小耳症或其他罕見顱顏缺陷） | 63 |銀行：009彰化銀行民生分行 帳號：5234-01-41778-800 |
64 |
| 社團法人台灣省兒童少年成長協會 | 67 |http://www.cyga.org/ 04-23058005 |
73 | 單親、隔代教養.弱勢及一般家庭之兒童青少年 | 74 |銀行：新光銀行 戶名：台灣省兒童少年成長協會 帳號：103-0912-10-000212-0 |
75 |
| SASS | SCSS |
|---|---|
| 148 | $blue: #3bbfce 149 | $margin: 16px 150 | 151 | .content-navigation 152 | border-color: $blue 153 | color: darken($blue, 9%) 154 | 155 | .border 156 | padding: $margin/2 157 | margin: $margin/2 158 | border-color: $blue 159 | | 160 | $blue: #3bbfce; 161 | $margin: 16px; 162 | 163 | .content-navigation { 164 | border-color: $blue; 165 | color: darken($blue, 20%); 166 | } 167 | 168 | .border { 169 | padding: $margin / 2; 170 | margin: $margin / 2; 171 | border-color: $blue; 172 | } 173 | |