HTML Dog: 身兼教學、技巧、範例、查閱於一身的網頁前端教學站

HTML Dog: http://goo.gl/5fB8S
本篇FB網址： https://goo.gl/jMJUW3
#HTML #CSS #JavaScript

說到「網頁前端程式設計語言」，一般人應該馬上會想到「HTML, CSS, JavaScript」這三大天王。今天要介紹給大家的，也是關於學習網頁前端語言設計的好網站，叫做「HTML Dog」（為何跟「狗」扯上關係就請饒了小弟、別問我直接去問作者了 :-D ）。

這個網站的特色，就是它針對「HTML, CSS, JavaScript」這三大主題，有很詳盡的教學介紹，每個主題還分為「入門、進階、高階」三個層次。您只要點擊首頁「Tutorials」字樣，往下捲，就可以看到「HTML/CSS/JavaScript x 入門/進階/高階」這九個超連結了！這讓讀者能自行掌控想學到什麼程度！我覺得這種設計很好，加上它的版面排得蠻清爽的（沒辦法，小弟視覺系囉～ XD），於是就迫不及待地分享給各位了！

至於首頁的其它三個連結：「Techniques」是介紹網頁前端的一些小技巧。如：自訂文字底線、 下拉式功能表...等這些不方便排入教學的主題。「Examples」則是提供大量的範例，讓您看完後瞭解如何應用學到的技巧。至於「References」則是把 HTML 標籤與屬性、CSS 選擇器與屬性、JavaScript 指令...按照 ABC 排列，方便您查閱的地方。

今天介紹的這個網站希望大家喜歡！還請各位老爺夫人不吝按讚轉發囉！老樣子，有任何疑問，或想打屁聊天都行，點擊上方「本篇 FB 網址」，然後直接留言在下方囉！週末再撐一兩天就到了，加油！（握拳）

[好站推薦] 15 個學習 Angular.js 的網站

在上個禮拜四，我曾貼出一篇「JavaScript 免費學習資源」（鏈結在此： http://on.fb.me/1B7AYVh ）的文章，得到不錯的迴響（5342 人看過、179 個讚）。當時我就曾提及，JavaScript 近年來的發展，早已非吳下阿蒙。用 JavaScript 開發出來的框架，早已多如過江之鯽。其中最出名的，應該非下列三大框架莫屬了：

1. jQuery
- 著重在網頁前端（負責繪製使用者介面那一端）。
- 號稱一行程式碼可以做出 JavaScript 百行程式碼才做得出來的效果。

2. Angular.js:
- 也是著重在網頁前端。
- 特色是能透過 MVC (Modal, View, Controller) 架構，把 HTML/CSS 碼，與 JavaScript/Angular.js 分離。

3. Node.js:
- 著重在網頁後端（接取資料庫的那一端）
- 特色為「效能」。
- 希望透過「事件」傳遞，做到「非同步呼叫」，讓瀏覽器不必等伺服器完成工作後，才能著手進行下一個工作。

今天要跟大家介紹的，是 Angular.js 的學習網站。原文網址如下：

http://designpotato.com/15-top-websites-to-learn-angularjs/

照慣例幫大家介紹一下。如果您英文不錯，可以直接看原文即可。以下文章是寫給英文不太熟的朋友看的。

==============

1. Recipes with Angular.js
-------------------------------------
用一篇篇短短的文章，來介紹介紹 Angular.js 的功能。每篇文章一定會舉個小範例讓你能捲起袖子實作，就像做菜看食譜（Recipes）一樣。

2. Tutorials Point
------------------------
其實該網站提供的免費學習文章，不止 Angular.js。而是包含 Java, Node.js, Angular.js, Android, Ruby...等眾多語言的教學文。原文連結通往首頁，為了避免您在首頁找不到 Angular.js，我幫您準備了直達 Angular.js 大門口的連結：

http://www.tutorialspoint.com/angularjs/index.htm

當然其它語言您有興趣，也可以看一下。收穫應該不少。

3. GitHub
--------------
作者該打屁股 XD！ GitHub 只是個讓您把原始碼或文件放在此處，並提供「版本管理」功能給您的網站而已。作者卻把超連結直接指向 GitHub 首頁。這樣能找到跟 Angular.js 相關的教學文才有鬼！！不過，紀老師不會讓這種事情發生的，對吧？呵呵！以下是正確頁面的傳送門，請服用：

「Angular.js Learning」
英文版： https://goo.gl/86V7k
繁中版： https://goo.gl/iXPyvw
簡中版： https://goo.gl/s219kC

4. Thinkster.io
-------------------
這也是一個混合了 Angular.js、MEAN (MongoDB, Express.js, Angular.js, Node.js，詳見此連結： http://on.fb.me/1dxXqfv )、Ionic、Swift 四種技術的教學網站。如果您只想看 Angular.js，只要點擊原文連結進去後，再點下方有個「AngularJS」的按鈕，按下去就可以過濾出所有跟 Angular.js 有關的文章了。

5. Year of Moo
---------------------
收集許多 Angular.js 的文章。其實比較不像有順序的教學文。不過看看還是不錯的！

6. Angular.js Tutorial by Todd Motto
------------------------------------------------
這位 Todd Motto 仁兄太神了！他寫了一篇一萬多字的文章，來介紹 Angular.js。讓您看完後，就可以「屁」Angular.js 給別人聽然後不太會露餡。號稱可以「一天學會 Angular.js」的文章。

7. NG Book
----------------
很棒的一本電子書！但原文提供的鏈結不是免費的....不過呢～～咳咳～嗯...傳送門在此 XD：
http://goo.gl/7EhLNd

8. NG Newsletter
-----------------------
一份高品質的 Angular.js 電子週報！由人工挑選的文章，每週定期推送給所有訂戶。免費！

9. Egghead
----------------
「蛋頭先生」的學習網站。其實這也是個收費的綜合性網站，並非只給 Angular.js。點擊進去後，點擊下方的 Angular.js 圖示，或者直接點擊我提供給您的超連結：

https://egghead.io/technologies/angularjs

就可以抵達 Angular.js 的頁面了。它的特色是影音教學。不過有些標示為「Pro」的部分，得付錢才能看。但免費的影音教學也很夠看了！

10. W3 Schools
-----------------------
很老牌的 HTML/CSS/JavaScript 教學網站！近年來也加入 jQuery、Angular.js...等主題。原文很不負責任的指向首頁。如果不想花時間找 Angular.js 在哪裡的朋友，可以直接點擊我提供的連結：

http://www.w3schools.com/angular/

11. Angular.js on Codeacademy
-------------------------------------------
Codeacademy 是一個以「互動學習」出名的網站。強調「做中學」。我非常推薦！原文連結直接點，就能抵達 Angular.js 的頁面。

12. Code School
-----------------------
另一個強調「做中學」的網站。有部分課程開放免費，但有些就得付費了。原文連結指向一個不存在的頁面，我幫各位修正好了。直接點下面這個連結，就能看到「JavaScript 系列」之下的兩個 Angular.js 課程了。一個免費、一個付費。有興趣大家可以試試看：

https://goo.gl/0vcYbY

13. Angular.js in 60 minutes
--------------------------------------
這是一本大約 100 頁的 PDF 電子書，內容不多，不過要 60 分鐘學完我是不太相信啦～ XD 。兩三個小時內看完、有心得，倒是有可能的！想快速瀏覽一下「Angular.js 到底能做什麼」，直接點擊原文提供的連結，就可以下載到這本電子書了。

14. Medialoot
-------------------
其實就是一篇 Angular.js 的長文而已。原文鏈結又很不負責的指向首頁，不管我從主選單找，或者用站內搜尋找「Angular」這個關鍵字，都找不到原文說的那篇文章。後來就求助 Google 大神，要求它把搜尋範圍限制在「medialoot.com」這個網站內，才找到原作者說的那篇文章。我幫大家補上連結在此：

http://goo.gl/xR8CYq

15. Medium.com
------------------------
又來了！作者又不負責任地指向首頁、而非他說的那篇文章了（翻桌）！這樣的作者真的很不負責任耶！不知道他是否來騙稿費的？不管，反正我又請 Google 大神故技重施、找到他說的那篇文章在下面：

https://goo.gl/7GUFv1

===============

今天幫大家介紹的 Angular.js，還滿意嗎？希望大家能有收穫喔！
也麻煩大家不吝按讚鼓勵，或分享給您 Facebook 的朋友喔！

10 本網頁設計電子書，免費送給你！

今天介紹的，是跟網頁設計相關的十本電子書。由於原作者並沒考慮網站設計包含了「前台」、「後台」、「視覺設計」等類人的需求、把這十本書分門別類，小弟就幫忙「稍微」（其實這篇寫了快 3 小時...喘～）分類了一下，希望方便大家快速找到自己喜歡的書。

原文連結：
http://designposts.net/free-ebooks-for-web-designers-and-developers/

1. 在成為網站設計師之前 -----------------

"Essential Career Advice for Developers"
翻成中文就是「給開發者的生涯建議」。這本書介紹如何在成為開發者前，先寫一些小程式掛在網路上讓人認識你，也方便你求職。並參與「開放原始碼社群」磨練功力。如何與合作者溝通、共同完成專案...然後，不要一天到晚宅在家裡...等等建議。連封面封底只有 28 頁，下載到手機等車時看一點看一點剛剛好～ :-)

"So You Want To Be A Freelancer?"
如果您不知道什麼是 Freelancer，可以先看這篇中文說明： http://goo.gl/zGa9CN 。一般而言，做網站的人很容易變成「自由工作者」。這是因為中小企業的老闆們認為網站並非常常需要更新，養一個網頁設計不划算，所以常常找外包。最後網頁設計師就成了到處接案的「自由工作者」（望向小弟家裡的老婆... XD）。這是一本只有 26 頁的小書，裡面講了自由工作者該有的理念、行程安排、如何自打品牌、溝通、收款、結案...等細節。有心成為自由工作者的人，不妨一讀。

2. 給網頁視覺設計師專書 ----------------

"A Practical Guide to Designing for the Web"
視覺設計師其實比較專注在「議題表達」、「版型」、「顏色」、「易用性」...等這幾樣事情上，他/她們常用的工具可能是 Photoshop, Illustrator...等，而非寫程式碼。打個比方，「網站程式師」比較像「建築師」，專注在結構。「視覺設計師」比較像「裝潢師」，專注在感受。國外很重視「視覺設計師」，可惜國內在這個部分，大多還是認為「網站能動就好」，導致有很多好網站，因為「不好用」而被廢棄。這本書說明了「文字編排（Typography）」、「顏色（Color）」、與「版型（Layout）」的重要性。如果您想走網頁、但不想寫程式，或許這條路可以試試看。

"10 Keys to Great Landing Pages"
所謂「Landing Page」，直譯為「登陸頁面」，其實就是客戶從搜尋引擎、或其它管道，點入 URL 後看到的第一頁。根據國外研究，這第一印象決定了大部分人是否「深耕挖掘」此網站更詳細內容的意願。這也是視覺設計師的職責所在之一。這本書只有 24 頁，就講 10 個「登陸頁面」的「必備」與「死穴」。值得視覺設計師參考。

"27 Page Type Classification eBook"
這本書專注在「文字編排（Typography）」上，也是一本 29 頁的小書。它就挑了幾種「常用字型」（如：Times New Roman），排版給大家看。也不多做解釋。不過一般人很容易從不同字型排出來的版面，感受到不一樣的感覺。是只需感受、不用細讀，在搖晃的車廂也能看懂（其實不用怎麼看 :-p ）的書。

3. 前台語言：HTML, CSS, JavaScript -----------

"Pocket Guide to Writing SVG"
SVG 是 HTML5 才新增的東西。它可以用 的方式，用程式碼「畫」出一幅畫來。也就是說，它的「畫」，是動態產生的，並非死板板的「照片」，直接貼在網頁上。想學 HTML5 這部份新功能的，可以參考這本書。

"HTML Canvas Deep Dive"
「Canvas」直譯就是「畫布」，也是 HTML5 新推出的功能。它可以在網頁上造就一塊方框，然後你可以在裡面放圖、表、動畫等。不少人拿 Canvas 來做「HTML5 遊戲」。那些「僅需瀏覽器就能玩」的遊戲，有些就是得力於 Canvas 功能的輔助。

"The Magic of CSS"
很棒的一本 CSS 小書！它會用非常視覺的方式，告訴你「這段程式碼」做出來「就是長這樣」。免除長篇大論的文字描述。點進去後，記得往下捲，下面列了一些如「1. The Box...2. Layout...」的超連結，點下去就能看到相關章節。

"Speaking JavaScript: An In-Depth Guide for Programmers"
很完整介紹 JavaScript 的一本好書！歐萊禮出版社出的（他們家的書封面都是一些動物）。想學 JavaScript 的人建議可以看看！

"Adaptive Web Design"
這是一本介於「視覺設計師」與「前台工程師」的書。講的是使用者感受，但得會 HTML, CSS, JavaScript 去做出這些感受來。個人覺得，前台設計師得有一點視覺設計師的素養，做出來的網站「易用性」才會高。所以我將這本書，排列在「前台語言」這一項上。視覺設計師如果願意學 HTML, CSS, JavaScript 的話，也可以看看。

4. 後台語言：PHP, Go ------------

"PHP: The Right Way"
這本書小弟知道有中文版！中文版叫「PHP 之道」。我幫大家補個連結： http://goo.gl/S3BcSi 。其實這本書已經包含 PHP 與 PHP 如何跟後端資料庫溝通的議題了！不過我個人認為，這一本書不是很適合初學者看。因為它講了一些「依賴注入」、「樣板」...等 PHP 中比較進階的議題，卻沒有好好地講到讓完全不懂的人變懂。當然啦～能學到後台語言的人，大概都有兩三把刷子，或許作者就是考量到這點，所以才沒有太多顧忌吧？

"Building Web Apps with Go"
Go 其實是 Google 於 2009 年正式推出的一個新語言。它能做的事情不只寫網頁，但這本書就只介紹用 Go 語言寫網頁的部份。如果真的很想學 Go，又討厭看英文的話，這裡倒是有中文的替代方案：「Go 程式設計導論 http://golang-zhtw.netdpi.net/ 」。

5. 用「架站軟體」快速架站：WordPress ----------

"11 Things to Do with Every New WordPress Install"
直譯就是「11 件你安裝 WordPress 後該做的事情」。15 頁的小書，適合剛安裝完 WordPress 之後的人看。

"Go Mobile With WordPress"
這本 39 頁的小書，告訴你如何修改 WordPress，好讓它適合被小螢幕的手機或平板閱讀。Google 目前修改了搜尋演算法，只要你的網站在小螢幕上不方便顯示的，排名會往後掉。有需要這方面知識的，不妨參考一下。

6. 網站營運 -----------------

"Book of Speed"
這本書其實還沒完成，不過前五章也夠我們看了。這是一本講「如何提高網站存取速度」的書。由於 Google 新演算法將「網站是否載入夠快」，也變成評分標準（另一個新標準就是之前說的，是否支援大小不同的螢幕），因此這個議題一下子熱了起來。點擊進去後，記得捲到最底部，有個「TOC（Table of Contents）」的超連結，點下去就能看到目錄了。

後記

今天幫大家整理的這幾本書，希望對大家有幫助！還請您不要吝嗇，分享給您的朋友，或按個讚鼓勵一下小弟我喔（虛榮心渴求中... XD）！

跨平台APP開發使用Visual Studio2015與PhoneGap(建立jQuery_Mobile應用程式&用DWCS6建立多頁面結構設定&建立超連結與回上頁按鈕&將超連結改為按鈕*增加三個頁面並用按鈕連結&改用ListView顯示連結)

上課內容：
01_建立jQuery_Mobile應用程式說明
02_用DWCS6建立多頁面結構設定說明
03_建立超連結與回上頁按鈕
04_將超連結改為按鈕
05_增加三個頁面並用按鈕連結
06_改用ListView顯示連結

完整影音
https://www.youtube.com/playlist?list=PLgzs-Q3byiYMJoL0_vk4SDQSdwyCGPLaj

教學論壇(之後課程會放論壇上課學員請自行加入)：
https://groups.google.com/forum/#!forum/labor_app_2016

懶人包：http://terry55wu.blogspot.com/p/android.html

課程理念與課程介紹：

從基礎、進階到雲端資料庫整合與行動網頁的全面運用，打造最強、最新、最實用的全方位商業級互動網站!
並延伸到APP開發，並將之結合，用JAVA程式設計APP對一般人來說太難，這門課就是用網站觀念做APP，利用PhoneGap服務見可以快速將Web轉成APP。
並使用Visual Studio 2015 X Cordova跨平台應用程式設計，環境建置 X 開發入門 X 介面設計 X 各種應用元件App實務開發的完全整合學習！
最簡單！開發及維護成本低，直接整合應用HTML、CSS及JavaScript進行App開發，學習曲線最短，效率最高！

超跨界！一次開發，即可發佈Android、iOS、Windows不同平台的App，免除學習多種開發工具的煩惱。
神開發！應用HTML即可直接控制智慧手機照相攝影、錄音放音、GPS羅盤、無線網路等眾多硬體感測器！
極直覺！搭配Visual Studio 2015即可簡化專案佈置與程式碼輸入流程，提高開發效率！
不藏私！全新的版本、最全面的解說，引領全方位的App應用程式開發學習。重實例！以小範例入門，到整合的App實例，深入行動應用，範例全面涵蓋：系統醫生、聯絡簿管理、音樂播放器、定位地圖、自我介紹、QRCode掃瞄器、中英文語音合成、檔案上傳下載、簡易照相機、數位羅盤…

參考書目

跨平台 Android．iPhone 程式開發：使用 Visual Studio Community＋Cordova/PhoneGap＋jQuery Mobile作者：陳會安ISBN：9789863123217出版社：旗標出版日期：2016/01/21
Visual Studio 2015 X Cordova跨平台App實戰訓班(附近120分鐘關鍵影音教學/全書範例程式)鄧文淵 總監製/文淵閣工作室 編著出版商: 碁峰出版日期： 2016-03-29
HTML5+CSS3+jQuery Mobile輕鬆打造App與行動網站(第二版)
作者： 數位新知, 陳婉凌
出版社：博碩 出版日期：2016/01/08

吳老師教學部落格：
http://terry55wu.blogspot.com/

android 開發教學,android 程式教學,android 使用教學,android app教學,android sdk,android eclipse,android 開發,android studio 開發教學,android studio tutorial,app開發教學,Visual Studio2015,PhoneGap

跨平台APP開發使用Visual Studio2015與PhoneGap(建立jQuery_Mobile應用程式&用DWCS6建立多頁面結構設定&建立超連結與回上頁按鈕&將超連結改為按鈕*增加三個頁面並用按鈕連結&改用ListView顯示連結)

上課內容：
01_建立jQuery_Mobile應用程式說明
02_用DWCS6建立多頁面結構設定說明
03_建立超連結與回上頁按鈕
04_將超連結改為按鈕
05_增加三個頁面並用按鈕連結
06_改用ListView顯示連結

完整影音
https://www.youtube.com/playlist?list=PLgzs-Q3byiYMJoL0_vk4SDQSdwyCGPLaj

教學論壇(之後課程會放論壇上課學員請自行加入)：
https://groups.google.com/forum/#!forum/labor_app_2016

懶人包：http://terry55wu.blogspot.com/p/android.html

課程理念與課程介紹：

從基礎、進階到雲端資料庫整合與行動網頁的全面運用，打造最強、最新、最實用的全方位商業級互動網站!
並延伸到APP開發，並將之結合，用JAVA程式設計APP對一般人來說太難，這門課就是用網站觀念做APP，利用PhoneGap服務見可以快速將Web轉成APP。
並使用Visual Studio 2015 X Cordova跨平台應用程式設計，環境建置 X 開發入門 X 介面設計 X 各種應用元件App實務開發的完全整合學習！
最簡單！開發及維護成本低，直接整合應用HTML、CSS及JavaScript進行App開發，學習曲線最短，效率最高！

超跨界！一次開發，即可發佈Android、iOS、Windows不同平台的App，免除學習多種開發工具的煩惱。
神開發！應用HTML即可直接控制智慧手機照相攝影、錄音放音、GPS羅盤、無線網路等眾多硬體感測器！
極直覺！搭配Visual Studio 2015即可簡化專案佈置與程式碼輸入流程，提高開發效率！
不藏私！全新的版本、最全面的解說，引領全方位的App應用程式開發學習。重實例！以小範例入門，到整合的App實例，深入行動應用，範例全面涵蓋：系統醫生、聯絡簿管理、音樂播放器、定位地圖、自我介紹、QRCode掃瞄器、中英文語音合成、檔案上傳下載、簡易照相機、數位羅盤…

參考書目

跨平台 Android．iPhone 程式開發：使用 Visual Studio Community＋Cordova/PhoneGap＋jQuery Mobile作者：陳會安ISBN：9789863123217出版社：旗標出版日期：2016/01/21
Visual Studio 2015 X Cordova跨平台App實戰訓班(附近120分鐘關鍵影音教學/全書範例程式)鄧文淵 總監製/文淵閣工作室 編著出版商: 碁峰出版日期： 2016-03-29
HTML5+CSS3+jQuery Mobile輕鬆打造App與行動網站(第二版)
作者： 數位新知, 陳婉凌
出版社：博碩 出版日期：2016/01/08

吳老師教學部落格：
http://terry55wu.blogspot.com/

android 開發教學,android 程式教學,android 使用教學,android app教學,android sdk,android eclipse,android 開發,android studio 開發教學,android studio tutorial,app開發教學,Visual Studio2015,PhoneGap

跨平台APP開發使用Visual Studio2015與PhoneGap(建立jQuery_Mobile應用程式&用DWCS6建立多頁面結構設定&建立超連結與回上頁按鈕&將超連結改為按鈕*增加三個頁面並用按鈕連結&改用ListView顯示連結)

上課內容：
01_建立jQuery_Mobile應用程式說明
02_用DWCS6建立多頁面結構設定說明
03_建立超連結與回上頁按鈕
04_將超連結改為按鈕
05_增加三個頁面並用按鈕連結
06_改用ListView顯示連結

完整影音
https://www.youtube.com/playlist?list=PLgzs-Q3byiYMJoL0_vk4SDQSdwyCGPLaj

教學論壇(之後課程會放論壇上課學員請自行加入)：
https://groups.google.com/forum/#!forum/labor_app_2016

懶人包：http://terry55wu.blogspot.com/p/android.html

課程理念與課程介紹：

從基礎、進階到雲端資料庫整合與行動網頁的全面運用，打造最強、最新、最實用的全方位商業級互動網站!
並延伸到APP開發，並將之結合，用JAVA程式設計APP對一般人來說太難，這門課就是用網站觀念做APP，利用PhoneGap服務見可以快速將Web轉成APP。
並使用Visual Studio 2015 X Cordova跨平台應用程式設計，環境建置 X 開發入門 X 介面設計 X 各種應用元件App實務開發的完全整合學習！
最簡單！開發及維護成本低，直接整合應用HTML、CSS及JavaScript進行App開發，學習曲線最短，效率最高！

超跨界！一次開發，即可發佈Android、iOS、Windows不同平台的App，免除學習多種開發工具的煩惱。
神開發！應用HTML即可直接控制智慧手機照相攝影、錄音放音、GPS羅盤、無線網路等眾多硬體感測器！
極直覺！搭配Visual Studio 2015即可簡化專案佈置與程式碼輸入流程，提高開發效率！
不藏私！全新的版本、最全面的解說，引領全方位的App應用程式開發學習。重實例！以小範例入門，到整合的App實例，深入行動應用，範例全面涵蓋：系統醫生、聯絡簿管理、音樂播放器、定位地圖、自我介紹、QRCode掃瞄器、中英文語音合成、檔案上傳下載、簡易照相機、數位羅盤…

參考書目

跨平台 Android．iPhone 程式開發：使用 Visual Studio Community＋Cordova/PhoneGap＋jQuery Mobile作者：陳會安ISBN：9789863123217出版社：旗標出版日期：2016/01/21
Visual Studio 2015 X Cordova跨平台App實戰訓班(附近120分鐘關鍵影音教學/全書範例程式)鄧文淵 總監製/文淵閣工作室 編著出版商: 碁峰出版日期： 2016-03-29
HTML5+CSS3+jQuery Mobile輕鬆打造App與行動網站(第二版)
作者： 數位新知, 陳婉凌
出版社：博碩 出版日期：2016/01/08

吳老師教學部落格：
http://terry55wu.blogspot.com/

android 開發教學,android 程式教學,android 使用教學,android app教學,android sdk,android eclipse,android 開發,android studio 開發教學,android studio tutorial,app開發教學,Visual Studio2015,PhoneGap