design-storyboard 1.1.0 → 1.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +182 -13
  3. data/design_storyboard.gemspec +2 -2
  4. data/lib/design_storyboard/version.rb +1 -1
  5. metadata +4 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 061072d80a85b9f7549a3f0c40e054a630c11684
4
- data.tar.gz: 3456b4c820cc4a9f12b3d60eae1b89a2041b8f28
3
+ metadata.gz: 1d81fc634a9956b15a84467c32e11834aec4290f
4
+ data.tar.gz: 06542b9c9c438e99b501638780d8c35cf88e9e0e
5
5
  SHA512:
6
- metadata.gz: 1d777dcb439ac70fe08bee8906826a2cb2d24acbc85167976d7af5a8290b43d5417e79c62682853d0521dad81a9e77ff2771cd2f9e626cd67709dbe9d6ae3af3
7
- data.tar.gz: f98875ad32b6af9ab87fd7a25267da40b0c487296b249053999741fb36661d7229c20e537dadd684b9653ddb6261d945f6c0be199f59ea87b2814d2dc33b65cb
6
+ metadata.gz: 654cf65baa09e91786a66961230678468a1f322bc8216b68a2603447278e3c05fde0fc6117d8a703cacfda3a05ec758048986aaabe8df665bc742d8d4efc0654
7
+ data.tar.gz: a3002e477cc92972a0107cc24bf569c00bbbe1e3c6d9e71dd9cf3a586a7348d351d4c27356e46b5cb99edbad23bb146d19c3977d2506cdcc262e63581212d5d4
data/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- # Design Storyboard
2
+ # Design Storyboard (1.1.x)
3
3
 
4
4
  Easy to building storyboard (for design software)
5
5
 
@@ -11,33 +11,202 @@ Easy to building storyboard (for design software)
11
11
 
12
12
  即可在彈指之間，將文件內的流程內容輸出成網頁
13
13
 
14
- ![Design Storyboard] (http://i.imgur.com/TJuW0gf.png)
14
+ ![Design Storyboard](http://i.imgur.com/TJuW0gf.png)
15
15
 
16
- 您更可以在文字敘述裡加入連結、圖片，甚至修改網頁輸出後的樣式
16
+ ## 特色 (feature)
17
17
 
18
- 此工具可避免您在維護 Office Word、Visio、Pages 大量複雜之文件困擾
18
+ 1. 用在文字敘述的方式，將複雜步驟流程，變成一個清楚易懂的網頁表格
19
19
 
20
- 另外，您只要使用 Mac OS X 的 Safari/Chrome 也可順利輸出成 PDF!
20
+ 2. 您可以在裡面加入連結、圖片
21
21
 
22
- ## Lastest version / 近期版本
22
+ 以及給您 網頁輸出後的樣式調整的空間
23
23
 
24
- 0.9.5
24
+ 3. 此工具可以協助您在設計 軟體程式的作業流程或想法時
25
25
 
26
- ## Install / 安裝方式
26
+ 可避免您在維護 Office Word、Visio、Pages 等各種複雜之文件困擾
27
+
28
+ 另外，您只要使用 Mac OS X 的 Safari/Chrome 也可順利輸出成 PDF 噢
29
+
30
+ ## 安裝方式 (install)
27
31
 
28
32
  ```shell
29
- # 推薦 Ruby 2.0 以上來使用這支程式，目前在 Mac OSX 10.10 運作正常
30
33
  gem install design-storyboard
31
34
  ```
32
35
 
33
- # 教學待補
36
+ 確定您的環境有安裝 ruby 2.0 以上，以及有安裝 design-storyboard
37
+
38
+ 最近釋出的穩定版本是 1.1.x 版本
39
+
40
+ ```shell
41
+ # ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin14]
42
+ ruby -v
43
+
44
+ # Successfully installed design-storyboard-1.1.0
45
+ gem install design-storyboard
46
+ ```
47
+
48
+ ## 使用指令 (how to use)
49
+
50
+ 用 Mac 可以用打這個指令，會自動開啟 Safari / Chrome 網頁 (Mac Only)
51
+
52
+ ```shell
53
+ story build [INPUT_FILE_PATH] --open
54
+ ```
55
+
56
+ 若不是 或不想預覽，可以用下列的方式來建立
57
+
58
+ ```shell
59
+ story build [INPUT_FILE_PATH]
60
+ ```
34
61
 
35
- # How to use? / 怎麼用
62
+ 若按照下列的範例教學，指定打起來會像是
36
63
 
37
64
  ```shell
38
- story build INPUT_FILE_PATH
65
+ story build example.txt --open
39
66
  ```
40
- or try 「story help」for more information.
67
+
68
+ ## 語法範例教學 (example)
69
+
70
+ 您可以用終端機 或 電腦上的 editor 來建立這份資料
71
+
72
+ 本教學先用終端機的 cat 指令來建立範本檔案
73
+
74
+ #### 1. 開啟終端機
75
+
76
+ ```shell
77
+ # 為了教學方便，先切到家目錄
78
+ cd ~
79
+
80
+ # 按下 cat 指令後，cat 會等您輸入資料，您就在這裡貼上資料
81
+ # 貼完後按下 Ctrl+C 離開，cat 指令會幫您存檔案
82
+ cat > example.txt
83
+ ```
84
+
85
+ #### 2. 將下列語法範例貼上
86
+
87
+ ```
88
+ ==== 前置作業 ====
89
+
90
+ Step 1:
91
+ 先將網頁上的語法範例複製下來
92
+
93
+ Step 1-2:
94
+ 開啟您的編輯器貼上
95
+
96
+ nOTe 1-2:
97
+ 這裡是備註，Step 跟 note 不分任何大小寫
98
+
99
+ Step 1-3:
100
+ 然後將檔案儲存起來
101
+
102
+ 由於本人希望
103
+ 您在編輯時的時候容易閱讀
104
+ 您可以盡情地使用縮排，讓大家看起來比較舒服
105
+
106
+ ^^^^ 1-3:
107
+ 這是 note 的另一種語法，只要用 ^^^^ 就可以出現東西
108
+
109
+ ==== Design-storyboard 語法說明 ====
110
+
111
+ Step 2:
112
+ 你看到的 Step 或是 note 都有一個編號，這組編號對應的是步驟，因此一定要打
113
+ 「Step 編號A」或「note 編號A」可以是數字跟連字號(-)
114
+
115
+ Step 3:
116
+ 而您到的 ==== 是 headline，表示您這個流程的重點，一個部分的段落只能有一組
117
+
118
+ ^^^^ 3:
119
+ 使用 headline 記得前後都要加入 ====，否則不會動
120
+
121
+ Step 4:
122
+ 我本人有設計兩種語法，方面再讓您建立 Storyboard 的時候可以使用一點連結或圖片
123
+
124
+ ^^^^ 4:
125
+ 本身有設計輕鬆打功能，所以語法的認定上很寬鬆
126
+
127
+ Step 4-1:
128
+ 所以，連結可以這樣打
129
+ url: http://google.com
130
+ url: http://google.com | title:google
131
+ url: 網址 | title: 連結的標題
132
+ link: 網址 | caption: 連結的標題
133
+ url: 網址
134
+
135
+ Step 4-2:
136
+ 而圖片可以這樣打
137
+ img: 網址
138
+ images: 網址
139
+ image: 網址
140
+ pic: 網址
141
+ picture: 網址
142
+
143
+ ^^^^ 4-2:
144
+ 以預設的樣式來說，圖片放在裡面，會自動放大到 100%
145
+ 因此您可以修改 CSS 樣式表
146
+ pic: https://help.github.com/assets/images/site/be-social.gif
147
+
148
+
149
+ ==== 最後，再補充一下這玩意的 CSS 支援設計 ====
150
+
151
+ Step 5:
152
+ 這個程式會自動生出 CSS 語法，放在「release/css/」下
153
+ 有一組「storyboard.css」檔案，此檔案可以讓您方便修改輸出後樣式
154
+
155
+ ^^^^ 5:
156
+ 建立過一次這份css後，就不會再建立
157
+
158
+ Step 5-2:
159
+ 接著你現在看到的網頁，會有幾樣東西會變色
160
+ 是因為我對括號做了記號，只要是（ 或 「 或 [ 都有它個別不同的色彩
161
+ 你可以自行開啟 css 修改顏色
162
+
163
+ ^^^^ 5-2:
164
+ 「我是藍色」、(我應該是綠色)、[我應該是紅色]
165
+
166
+
167
+ ==== 大致上的說明，差不多是這個樣子，謝謝您的瀏覽 ====
168
+
169
+ ```
170
+
171
+ 貼完後按下 Ctrl+C 離開，cat 指令會幫您存檔案
172
+
173
+ #### 3. 回到終端機，開始輸出 storyboard
174
+ ```shell
175
+ story build example.txt --open
176
+ ```
177
+
178
+ 大致上確定後，無論你有沒有加入「--open」參數，程式都會在所屬文件的資料夾下，建立一個 release 資料夾，在裡面放置一組 對應名稱 的網頁檔案
179
+
180
+
181
+ ## 簡單說，基本使用的流程像這樣
182
+
183
+ #### 打好您的流程文件
184
+
185
+ ![img](http://i.imgur.com/0dwEQBX.png)
186
+
187
+ #### 接著進入終端機，在你的資料夾目錄打指令
188
+
189
+ ![img](http://i.imgur.com/tu6h2VB.png)
190
+
191
+ #### 按下確定後，程式將會為您自動編譯
192
+
193
+ 系統會自動套上樣式，把畫面弄得美美的～ 這樣基本上就ＯＫ啦！
194
+
195
+ ![img](http://i.imgur.com/mPFjTbV.png)
196
+
197
+ ## Trick 小技巧
198
+
199
+ ### 將網頁輸出 PDF 檔案
200
+
201
+ 由於 Mac OSX 高度整合 PDF 輸出
202
+
203
+ 因此您可以用以下的方式順便將網頁輸出成 PDF
204
+
205
+ ![img](http://i.imgur.com/7CqEfXb.png)
206
+
207
+ 輸出後，是不是很方面又清楚呢？
208
+
209
+ ![img](http://i.imgur.com/8TsCMJA.png)
41
210
 
42
211
  # License
43
212
 
data/design_storyboard.gemspec CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
8
8
  spec.version = DesignStoryboard::VERSION
9
9
  spec.authors = ["Guanting Chen (guanting886)"]
10
10
  spec.email = ["cgt886@gmail.com"]
11
- spec.summary = %q{Easy to building storyboard (for design software)}
12
- spec.description = %q{這是一支，可以協助您用最簡單的方式製作 流程表、流程分鏡 的小工具，您只要新增一個 純文字檔案，用您喜歡的 Editor 書寫，無需複雜語法，即可在彈指之間，將文件內的流程內容輸出成網頁（詳細內容請參閱 Github Repo 上的 README 說明）}
11
+ spec.summary = %q{Easy to building design storyboard (for design/software work flow)}
12
+ spec.description = %q{Easy to building design storyboard (for design/software work flow) See: https://github.com/guanting886/design-storyboard/ }
13
13
  spec.homepage = "https://github.com/guanting886/design-storyboard"
14
14
  spec.license = "MIT"
15
15
 
data/lib/design_storyboard/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # encoding: utf-8
2
2
 
3
3
  module DesignStoryboard
4
- VERSION = "1.1.0"
4
+ VERSION = "1.1.1"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: design-storyboard
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.1.0
4
+ version: 1.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Guanting Chen (guanting886)
@@ -52,8 +52,8 @@ dependencies:
52
52
  - - "~>"
53
53
  - !ruby/object:Gem::Version
54
54
  version: '0.18'
55
- description: "這是一支，可以協助您用最簡單的方式製作 流程表、流程分鏡 的小工具，您只要新增一個 純文字檔案，用您喜歡的 Editor 書寫，無需複雜語法，即可在彈指之間，將文件內的流程內容輸出成網頁（詳細內容請參閱
56
- Github Repo 上的 README 說明）"
55
+ description: 'Easy to building design storyboard (for design/software work flow) See:
56
+ https://github.com/guanting886/design-storyboard/ '
57
57
  email:
58
58
  - cgt886@gmail.com
59
59
  executables:
@@ -110,5 +110,5 @@ rubyforge_project:
110
110
  rubygems_version: 2.4.5
111
111
  signing_key:
112
112
  specification_version: 4
113
- summary: Easy to building storyboard (for design software)
113
+ summary: Easy to building design storyboard (for design/software work flow)
114
114
  test_files: []