課程簡介

網頁前端設計在現代越來越重要，是許多程式設計師的第一門課程、青壯年轉換職業跑道的門路、平面設計師的必修。此課程會一步一步帶者你走，讓你能夠從頭開始架設屬於你自己的網頁!你不需要有任何的程式設計經驗，也不需要有相關的背景知識。開始學習網頁前端技術，讓你學會一技之長，能夠開啟網頁技術的大門。

在這堂課程結束之後，你將能夠使用:

1 前端網頁技術開發
2 VS Code 操作技巧以及實用熱門Extension
3 HTML5 – HTML5 – 超文件標記語言
4 CSS3 – CSS3 – 階層式樣式表
5 JavaScript – 網頁前端後端程式語言
6 了解DOM, Hoisting, Scope, Closure, Prototype Inheritance, execution context, callbacks, this keyword, bind call apply functions等進階JS觀念與運用
7 Bootstrap
8 Git and GitHub, Source Tree 版本控制
9 Figma – UI/UX設計工具
10 打造有形網站，架構出自己的現代風格網頁
11 將網站架構到雲端主機，讓大家看到你的作品
12 Flexbox開發技術，讓你做RWD事半功倍
13 學習進階前端開發技術，解決你對前端網頁排版的諸多疑惑

https://softnshare.com/html5-css3-z/

🌳 文章標題：Netflix Web 效能提升案例研究

Netflix 無疑是目前最受歡迎的串流網路電視提供業者，這篇文章描述了他們如何提升 Netflix 的使用者 Logout/Sign up , Landing Page 的效能，這篇文章主要關注在以下幾個部分

1. 載入和互動時間減少了50％ (針對 Netflix .com 的桌面 logged-out 網頁 )

裡面有提到他們是使用什麼工具來度量網頁效能 - 使用Chrome的DevTools和Lighthouse來模擬在3G連接上載入 log-out 頁面

解決方案 : 原本使用 React , 現在改用少於 300 行的 vanilla JavaScript 來取代

2. 通過從 React 和其他客戶端程式庫切換到vanilla JavaScript，JavaScript 套件大小減少了200kB。React仍在伺服器端使用。

有些前端程式採用 vanilla JavaScript ，有些則採用 Server side React ，這要看你如何 trade-off ，這篇文章有提到因為優化了使用者註冊頁面，提升了 Netflix 的使用者註冊率，想一下你是不是因為使用者註冊流程太過繁瑣或是緩慢而離開那個頁面？

3. 預取 HTML，CSS和JavaScript（React）可將未來瀏覽時間縮短30％

解決方案 - 內建的 瀏覽器 API 和 XHR prefetching. 但是內建的瀏覽器 API 只有部分瀏覽器有支援， XHR 支援度比較高

這裡面也有提到，雖然 Netflix 沒有在主頁上使用React，但他們為後續頁面預載入了它。

文章最後面的注釋也值得關注，提到了

1. 為何沒有使用 preact - Fast 3kB alternative to React with the same modern API.

2. 評估 Service Worker 做靜態資源的快取

3. 登陸網頁的 A/B testing - 要支援全世界 200 個以上的國家動態登入頁面 A/B testesting ... Orz

✍ 相關電子書與線上課程

1. 電子書 – Web Performance in Action http://bit.ly/2KdGtce

2. 對於 Server Side React 有興趣可以參考相關線上課程 - 使用 React 與 Redux 在伺服器端排版構圖 http://bit.ly/2KdXumA

3. vanilla JavaScript - Wes Bos免費 JavaScript 30 課程 http://bit.ly/2KdXLG8

https://medium.com/…/a-netflix-web-performance-case-study-c…

我們 PaGamO/BoniO 最近開始新的產品開發，目前開始有新的工作機會（新進前端工程師、資深前端工程師），歡迎對改變教育有熱忱，對前端開發工作有專長的朋友加入我們。我們一同開發幫助大家提升學習動機的教育科技產品！

（歡迎分享）
---------

職稱：Junior FrontEnd工程師

【技能要求】
1.必備：
a. 有能力撰寫簡潔且高效的Javascript程式碼
b. 熟悉git操作以及有與其他開發者、設計師和產品經理共事的經驗
c. 熟悉HTML/CSS切版，可以依照設計文件做出準確的樣式排版

2.加分：
a. 有過任一前端框架（React、Angular、Vue等）實作的經驗
b. 有過撰寫前端單元或E2E測試的經驗

【工作內容】
1. 與產品經理和設計師溝通，進行雲端產品開發
2. 進行日常程式除錯，並根據市場回饋改善使用者經驗
3. 定期更新開發進度，與團隊匯報產品開發狀（Redmine）
4. 撰寫單元測試以及自動化Acceptance測試（Selenium等）

【其他】
1.有GitHub作品請在履歷附上。 履歷請mail至hr@bonio.com.tw

----------

職稱：Senior FrontEnd工程師

【技能要求】
1.必備：
a. 有一年以上撰寫Javascript的經驗，有解讀開源專案程式碼的能力
b. 熟悉git操作以及有與其他開發者、設計師和產品經理共事的經驗
c. 熟悉Javascript ES6語法，並且有React和Redux的實作經驗

2.加分：
a. 有過帶領開發團隊的經驗（Scrum尤佳）
b. 有過後端（e.g. Node.js）以及Real Time App的開發經驗
c. 有過導入前端自動化工具（e.g. Webpack）以及測試工具（e.g. Mocha、　
　　　　Enzyme、Nightwatch）的經驗

【工作內容】
1. 與產品經理和設計師溝通，進行雲端產品開發
2. 進行日常程式除錯，並根據市場回饋改善使用者經驗
3. 定期更新開發進度，與團隊匯報產品開發狀（Redmine）
4. 撰寫單元測試以及自動化Acceptance測試（Selenium等）

【其他】
　1.有GitHub作品請在履歷附上。履歷請mail至hr@bonio.com.tw

跨平台APP開發使用Visual Studio2015與PhoneGap(第11次01_將JAVASRIPT改為表單元件(九九乘法表)&在DIV中產生九九乘法表結果&判斷個位數補空白讓乘法表排版整齊&用文字區域配合CSS排版與剪刀石頭布範例&用選項按鈕修改剪刀石頭布範例)

上課內容：
01_將JAVASRIPT改為表單元件(九九乘法表)
02_在DIV中產生九九乘法表結果
03_判斷個位數補空白讓乘法表排版整齊
04_用文字區域配合CSS排版與剪刀石頭布範例
05_用選項按鈕修改剪刀石頭布範例

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

教學論壇(之後課程會放論壇上課學員請自行加入)：
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(第11次01_將JAVASRIPT改為表單元件(九九乘法表)&在DIV中產生九九乘法表結果&判斷個位數補空白讓乘法表排版整齊&用文字區域配合CSS排版與剪刀石頭布範例&用選項按鈕修改剪刀石頭布範例)

上課內容：
01_將JAVASRIPT改為表單元件(九九乘法表)
02_在DIV中產生九九乘法表結果
03_判斷個位數補空白讓乘法表排版整齊
04_用文字區域配合CSS排版與剪刀石頭布範例
05_用選項按鈕修改剪刀石頭布範例

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

教學論壇(之後課程會放論壇上課學員請自行加入)：
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(第11次01_將JAVASRIPT改為表單元件(九九乘法表)&在DIV中產生九九乘法表結果&判斷個位數補空白讓乘法表排版整齊&用文字區域配合CSS排版與剪刀石頭布範例&用選項按鈕修改剪刀石頭布範例)

上課內容：
01_將JAVASRIPT改為表單元件(九九乘法表)
02_在DIV中產生九九乘法表結果
03_判斷個位數補空白讓乘法表排版整齊
04_用文字區域配合CSS排版與剪刀石頭布範例
05_用選項按鈕修改剪刀石頭布範例

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

教學論壇(之後課程會放論壇上課學員請自行加入)：
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