[閒聊] 未來三年程式設計的學習方向

常常有人問我：「老師，我想學程式設計。但是我不知道該學什麼？」通常我會再追問：「為什麼你想學程式設計呢？」如果答案是：「可以賺大錢」，那我會勸他趕快回火星去，地球是很危險的...

如果是：「興趣」，那我勉強還可以聊一下。根據我非～～常個人的觀察，未來三年比較流行的程式設計領域有下列四個：

(1) 網頁程式設計：

就是 HTML5/CSS3/JavaScript 這些東西。這些技術夾著跨平台之賜，可以拿來做網頁，可以拿來寫手機 App，還可以拿來寫遊戲、讓人彼此偷菜... XD。加上入門門檻又不高，進可攻、退可守。實在很適合完全不會程式設計的人，當成敲門磚。

(2) 手機 App

這個不用我再強調了...憤怒鳥、轉來轉去的糖果...都跟這個領域有關。如果你本身已經會 C 語言，建議您走 iOS，因為 iOS 的官方語言 Objective-C，語法跟 C 語言很像。學起來會很輕鬆。如果您會的是 Java，建議您走 Android。因為 Android 背後的官方語言就是 Java。

如果拿「賺不賺錢」這件事來考量，手機 App 能賺錢的不到 1%，賠錢的是大多數。所以抱著「做 App 賺大錢」的人，我會勸你去買張獎券還比較有希望。如果真要說賺錢，根據統計，iOS 雖然市佔率沒有 Android 高，但是 iOS 的使用者很習慣掏錢買軟體。而 Android 使用者比較偏好「免費軟體」。所以，如果要賺錢的話，您可以走 iOS 試試看。

(3) 嵌入式系統（自動控制、機器人）

如果您跟我一樣不怕死、不是硬體出身的卻對控制硬體有莫大興趣，還願意常常掏錢買不同的開發板、齒輪、電料...（這些可沒有免費的可以「下載」... XD），那歡迎您加入嵌入式系統這個煉獄...呃...錢坑...也不對！「樂園」;-) ...。如果您是從軟體跨過來的，我會建議您先買一塊 Raspberry Pi 來玩。如果您是硬體過來的，那麼買塊 Arduino UNO 來玩，您一定會覺得如魚得水的。

這一行要能閱讀大量的原文，因為能寫「硬體+軟體」的書籍作者不多。此外，C 語言是一定要學的。不過學成後，您可以自己做個自走車、機器手臂什麼的，現給人家看，很有成就感喔！

(4) 海量資料（Big Data）、分散式運算（Distributed Computing）、雲端運算（Cloud Computing）

上面這三個名詞事實上都是一件事的不同面向而已，對我來說是同一件事。這也是這一兩年新興的領域，我十分看好！所謂「海量資料」，是由想分析 Internet 時代收集而來的巨大資料，並從中算出某種趨勢而來。舉例來說，每天有上萬人在 Amazon 買書。你怎麼從這些人的購買資料，得知他/她的喜好？

海量資料有三樣東西要考量：(1) 怎麼儲存這些海量資料？ （海量資料）(2) 怎麼平行運算這些資料、以便在最短的時間內得到結果？ （分散式/雲端運算）(3) 怎麼用最清晰的圖表，讓人一看就了解趨勢，而非只是條列式呈現算出來的結果？國外是以「Store、Compute、Present」三個字來代表。

說到如何「儲存」海量資料，目前最流行的就是 NoSQL 家族。包含 MangoDB、HBase、CouchDB...等。這些資料庫與傳統資料庫不同的是，您可以將資料庫「分屍」放在上百台機器，然後它們還能彼此運作得起來。這點傳統資料庫就做不到！能將資料「分屍」還能運作，才能獲得「叢集運算（Cluster Computing）」的好處。

MangoDB: http://zh.wikipedia.org/wiki/MongoDB
HBase: https://zh.wikipedia.org/wiki/HBase

第二點是「分散式運算」，也就是談怎麼把本來由一台電腦做的事情，分散到上百台電腦做好，然後把成果收集回來。這點，Hadoop、Scala 是目前箇中翹楚。

Hadoop: http://zh.wikipedia.org/wiki/Apache_Hadoop
Scala: http://zh.wikipedia.org/wiki/Scala

第三點就是怎麼用最清晰的圖表，動態呈現這些海量資料運算結果了。目前我看到 Tableau 這家公司非常投入這塊。他們也在昨天掛牌上櫃，股票首日大漲 64%，前景一片看好。

Tableau 官網： http://www.tableausoftware.com/
Tableau 新聞： http://www.bnext.com.tw/Article/view/cid/103/id/27875

閒聊至此！如果您不知道想往哪個方向走，或者您還有問題想問，歡迎留言在下面喔！我會儘快回覆您的！

在網頁上，用 HTML5 與 CSS3 設計自我風格強烈的影片播放器

厭倦 YouTube 內嵌影片那個一成不變的風格嗎？要不要自己寫個自我風格強烈的「影片播放器」呢（如本帖下方預覽圖片那樣）？其實非常簡單！就算你沒看懂全部也沒關係！把本文提供的 HTML5 與 CSS3 拷貝貼上後，改一下重點原始碼，您就擁有一份自我風格強烈的影片播放器了！心動了嗎？點進去看就可以知道囉！

http://mrbool.com/how-to-style-the-html-5-video-element-with-javascript-and-css/27683

[網友來信 2] 我會網頁設計，請問我下一步要怎麼走比較好？

今天網友的熱情實在跟台北炎熱的天氣有得比啊！害我的小宇宙燃燒起來了！我其實很喜歡跟大家聊聊天，奈何台灣人都跟我一樣，本性害羞啊！（笑）剛剛收到另一位網友的來信，我也是將個人相關資訊移除後，原文照登。其實我雖然在資訊界打滾 20 年，但還是提醒各位別把我的話當聖經。如果您實行之後，發覺更好的方法，或是產業走向跟我原先預測的不同，您可以隨機應變，或再來信聊聊，我隨時都很歡迎的！

那就請各位參考一下我跟另一位網友之間的對談！

-----------------------------------

紀老師您好：

我是您以前的學生。現在我漸漸的走向網頁設計的路，學了 Photoshop, Illustrator, InDesign, ActionScript, CSS, JavaScript，也學了 PHP, MySQL 等技能。將來想走向設計網站的網頁軟體設計工程的 SOHO 人員 (架站+網頁設計)。試問依老師的專業見解，我還需要再學哪些東西？作品數要達到多少數量？希望 1 年內能獨立門戶。麻煩老師不吝指教，謝謝。

---

您好：

依照您學習的背景，加上現在市場上的趨勢，我建議您可以朝「電子書」這個方向前進。 iPad 與 Amazon 興起，出版業界面臨作者直接跳過出版社，去跟平台商（Apple, Amazon）打交道的恐慌。因為作者出紙本書，頂多拿到 15% 稿費。直接用 Apple iTune 或是 Amazon Kindle 系統出版，作者可以拿到 70% 的稿費。在利之所趨的誘因下，一定有很多作者會棄出版社，直接跟平台做生意。

但是原來出版社所肩負的任務（排版、行銷），一下子就會全數丟給作者本身。我預測將來應該會有不少外包族，幫忙這些作者搞定「美術排版」與「網路行銷」這兩塊。電子書去年產生了一個通用格式「.epub」檔，Amazon、Apple 這些「大咖」，也都高舉支援大旗，紛紛加入 ePub 陣營。所謂 ePub 檔，講穿了就是把書籍內容使用「HTML5, CSS3, JavaScript」表現，然後用 Zip 將它與一些特殊的檔頭（Header）壓縮後，把附加名改成 .epub 而已。您本身已經會 HTML, CSS, JavaScript, Photoshop, Illustrator...等技能，已經是站在「電子書」這波浪潮的「制高點」了，不可不把握！將來您自立門戶，可以幫那些只想寫書、不想搞美術排版與網路行銷的作者，搞定這些大小雜事。

關於您下一步應該要走的方向，我會建議您先學習「HTML5」與「CSS3」。因為這兩個部份跟它的前一代（HTML4 與 CSS2）差蠻多的。倒是 JavaScript 雖有變化，但差異不會太大。先學會 ePub 最底層的表示格式。接著，建議您學習 Adobe InDesign CS5.5 以上（InDesign CS6 更佳！支援更多電子書互動六大元素！），知道如何把作者提供的原稿，透過 InDesign 排版成 ePub 格式，並加上互動元素，如：超連結、簡易動畫、內嵌影片音效...等（這個原作者一定不會！）。之後，學一下「網路行銷」，主要有下列這幾項：

1. 怎麼幫作者還沒寫書前，透過關鍵字研究（Google 有提供「關鍵字工具」，上網搜尋此關鍵字就可找到），了解讀者想看什麼內容，確保書籍將來大賣的可能性。
2. 怎麼幫作者找到適合他書籍的關鍵字，並幫他架設網站，衝到該關鍵字的前幾名（這部份稱為「SEO」，Search Engine Optimization）。
3. 怎麼幫作者購買關鍵字廣告，讓他用最少的價格，買到最好的效果（這部份稱為「AdWords」，您可以上網找相關書籍或文章）。
4. 怎麼幫作者經營臉書、部落格...等社群媒體，達到自然擴散之效果。
5. 怎麼幫作者定價、辦理作者見面會、座談會...活動，加深作者與粉絲之間關係，並自己從中獲利。

當然還有別的，不過初期掌握這些應該夠了。所以我對您的研讀建議是：
1. HTML5 & CSS3
2. Adobe InDesign CS5.5 或 CS6，不然 Mac 出的 iBook Author 也勉強可以。
3. 網路行銷

希望這樣對您有幫助！

紀老師

元智實用化課程用DW將網站轉為APP(2015)

這是在元智大學的課程，主要是如何將之前學習用DW CS6所製作的網站，轉為APP的簡易流程，包含建立HTML頁面與導覽列等，
最後利用PHONEGAP網站協助將網站ZIP轉為APP，並產生QR碼，讓製作APP更為簡單，但是原版PHONEAGAP支援外部連結，
不過新的服務似乎取消外部連結，造成GOOGLE地圖等無法正常顯示問題，
也許可以再找其他方式，
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能，
也許在之後課程再來補充說明，

以下是上課的畫面：
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP

上課影片連結：
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl

教學相關連結：
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/

上課書目
用Dreamweaver CS6，我也會開發APP
作者： 鄧文淵 總監製/文淵閣工作室 編著

內容特色
用Dreamweaver CS6，你也會開發APP! 能快速完成作品、擁有視覺化的質感介面，更可以驅動手機的硬體設備，舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap，讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容，交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面，只要善用操作面板的設定。在Dreamweaver CS6一次開發，就能跨iOS、Android等多種不同平台，讓你的APP無遠弗屆！開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎，使用網頁技術開發應用程式，因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路，大幅降低設計行動裝置應用程式的門檻。

APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學

元智實用化課程用DW將網站轉為APP(2015)

這是在元智大學的課程，主要是如何將之前學習用DW CS6所製作的網站，轉為APP的簡易流程，包含建立HTML頁面與導覽列等，
最後利用PHONEGAP網站協助將網站ZIP轉為APP，並產生QR碼，讓製作APP更為簡單，但是原版PHONEAGAP支援外部連結，
不過新的服務似乎取消外部連結，造成GOOGLE地圖等無法正常顯示問題，
也許可以再找其他方式，
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能，
也許在之後課程再來補充說明，

以下是上課的畫面：
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP

上課影片連結：
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl

教學相關連結：
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/

上課書目
用Dreamweaver CS6，我也會開發APP
作者： 鄧文淵 總監製/文淵閣工作室 編著

內容特色
用Dreamweaver CS6，你也會開發APP! 能快速完成作品、擁有視覺化的質感介面，更可以驅動手機的硬體設備，舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap，讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容，交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面，只要善用操作面板的設定。在Dreamweaver CS6一次開發，就能跨iOS、Android等多種不同平台，讓你的APP無遠弗屆！開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎，使用網頁技術開發應用程式，因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路，大幅降低設計行動裝置應用程式的門檻。

APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學

元智實用化課程用DW將網站轉為APP(2015)

這是在元智大學的課程，主要是如何將之前學習用DW CS6所製作的網站，轉為APP的簡易流程，包含建立HTML頁面與導覽列等，
最後利用PHONEGAP網站協助將網站ZIP轉為APP，並產生QR碼，讓製作APP更為簡單，但是原版PHONEAGAP支援外部連結，
不過新的服務似乎取消外部連結，造成GOOGLE地圖等無法正常顯示問題，
也許可以再找其他方式，
目前找到EZOAPP網站(https://ezoui.com/app/zh-tw/)有提供類似功能，
也許在之後課程再來補充說明，

以下是上課的畫面：
01_APP應用與註冊PHONEGAP帳號
02_如何建立第1個APP(多頁面瀏覽)
03_如何加上超連結與按鈕
04_如何更改按鈕技巧與變化顏色
05_將資料加入並上傳到PHONEGAP網站轉APP
06_相關網站介紹與102APP說明
07_如何新增網站與HTML5網頁並產生4個頁面
08_製作頁首圖檔與導覽列
09_如何設定導覽列的背景顏色
10_如何設計ListView清單檢視效果
11_如何增加回上頁按鈕(1增加2顏色3文字)
12_如何增加下一頁按鈕與變換顏色圖示
13_如何刪除舊APP與上傳新的APP
14_上星期102APP重點與106APP說明
15_如何建立106APP與新增五個頁面
16_如何將項目清單改為ListView
17_如何在頁尾增加導覽列與ICON與變更顏色
18_如何將導覽列固定在下方
19_如何將入回首頁與下一頁的頁首按鈕
20_如何將按鈕複製到其他頁面
21_106APP重點回顧
22_如何更改佈景設定與自訂新的佈景色
23_如何利用官網ThemeRoller做佈景並下載
24_增加ThemeRoller佈景並再次下載與嵌入綠島地圖
25_如何上傳APP

上課影片連結：
https://www.youtube.com/playlist?list=PLgzs-Q3byiYPqPq4yAXbcH4tRXHmlIPJl

教學相關連結：
PhoneGap APP教學研習懶人包 http://terry55wu.blogspot.tw/p/phonegapappjquery-mobile.html
EZoApp 中文教學手冊 http://ezoapp.gitbooks.io/ezoapp-tutorials/
EZoApp 教學影片 https://www.youtube.com/user/EZoService/videos
EZoApp gallery http://ezoui.com/gallery/index.html
HTML 教程 http://www.w3schools.com/html/
CSS 教程 http://www.w3schools.com/css/
JavaScript 教程 http://www.w3schools.com/js/
jQuery 教程 http://www.w3schools.com/jquery/default.asp
jQuery Mobile 教程 http://www.w3schools.com/jquerymobile/

上課書目
用Dreamweaver CS6，我也會開發APP
作者： 鄧文淵 總監製/文淵閣工作室 編著

內容特色
用Dreamweaver CS6，你也會開發APP! 能快速完成作品、擁有視覺化的質感介面，更可以驅動手機的硬體設備，舉凡照相錄影、錄音放音、GPS定位、無線網路、語音導覽全都沒問題!
結合HTML5、CSS3、PhoneGap，讓你的網頁瞬間昇華為跨平台的APP應用程式。不用擔心HTML5、CSS3與PhoneGap的內容，交給Dreamweaver CS6一次就搞定!利用jQuery Mobile快速打造專業手機使用者介面，只要善用操作面板的設定。在Dreamweaver CS6一次開發，就能跨iOS、Android等多種不同平台，讓你的APP無遠弗屆！開發 APP 的新領域混合式應用程式是以 Web 應用程式做為基礎，使用網頁技術開發應用程式，因此絕大多數網頁設計者可以踏入行動裝置應用程式開發者之路，大幅降低設計行動裝置應用程式的門檻。

APP開發, Dreamweaver, JavaScript, PhoneGap, 吳老師, 網站設計理論與實務, 網站轉APP,jquery mobile tutorial,dreamweaver jquery mobile教學,phonegap jquery mobile教學,jquery mobile php教學