是否已寫 CSS 一段時間，但想要把你在這方面拉到新的水平？ 是否對於像 CSS 繼承、特異性或串聯等 CSS 的術語感到混淆？

從這 21 小時的課程，你會學到

1. 創造驚人的設計和效果的許多現代 CSS 技術

2. 進階的 CSS 動畫與 @keyframes、動畫和過場效果

3. CSS 如何在幕後工作：串聯 ( cascade )、特異性 ( specificity )、繼承 ( inheritance ) 等

4. CSS 架構：基於元件的設計、BEM、編寫可重用的程式碼等

5. 在實際專案中使用 Sass：全域變數、架構 CSS、管理媒體查詢等

6. 先進的響應式設計：媒體查詢、手機優先 vs 桌面優先、em vs rem 單位等

7. 讓 HTML 和 CSS 響應式圖像更快地在頁面呈現

8. Flexbox 佈局：用 flexbox 建構一個龐大的實戰的專案

9. SVG 圖像和影片在 HTML 和 CSS：建立一個背景影片效果

10. NPM 生態系統：發展工作流程和建置過程

11. 在課程問答中獲得友善和快速的支持

12 所有專案都有可下載的講義、程式碼和設計資產

>英文字幕：有

https://softnshare.wordpress.com/…/advanced-css-saas-new-l…/

17.5 小時的課程，從 JavaScript 初級到高級開發，涵蓋了ES6 ，而且附有 30 道練習題用來檢測自己是否真的理解 Javascript

課程內容涵蓋：

1. 所有的JavaScript和程式設計基礎知識：變數、資料型別，布林邏輯、if / else 語法、迴圈、函數、物件、陣列…等等。
2. 深入了解 JavaScript 在背後工作情況所需知道的一切：執行的背景狀況 、hoisting、範圍界定、“this”關鍵字…等。
3. 如何使用 JavaScript 程式碼與網頁進行互動：DOM操作。了解如何選擇和更改網頁元素、建新元素並處理 DOM 事件。
4. 複雜的JavaScript功能，如函數構造(function constructors)、原型繼承(prototypal inheritance)、一級函數、closures、綁定和應用方法…等。
5. 我們要編寫兩個漂亮的真實世界的應用程式來應用我們的知識並學習新的概念（課程會提供這些專案的初始 HTML 和CSS 程式碼）。
6. 了解如何使用模組和功能來組織和建構程式碼、如何建立資料隱私和封裝，以及為什麼這麼重要。
7. 最現代版本的JavaScript新功能：ES6 / ES2015的新功能。

>課程有英文字幕，網頁中附有將英文字幕自動轉換為中文字幕 how-to

https://softnshare.wordpress.com/…/completejavascriptcourse/

【修了一下午的魔法之後的介紹】
　
我總覺得：對今天的人來說，學會至少一種程式語言，應該就像二十年前說是會使用Word文件一樣的意思。不分什麼科系背景的人。
　
但起碼連我自己也一直在徘徊。
　
這一方面是因為市面上太多介紹程式語言的入門書，都太生硬，看來還是以所謂資訊相關科系背景的讀者為對象而寫。
　
另一方面也是因為學程式語言和學任何其他一種語言一樣，決心是最重要的。就像學其他語言經常三天打漁兩天曬網，在原地打轉，學程式語言也是。
而這兩個問題又相互影響。
　
所以去年我就想，一定要先解決一個問題，請一個人來先打破過去的種種限制，寫出一本即使非資訊科系背景的人，讀起來也簡明易懂，甚至可以津津有趣的書，讓大家願意往學習程式語言跨出第一步。
　
剛出版的《普格瑪島的法師》，正是唐宗浩寫出來的這麼一本書。
　
去年我和他第一次在淡水捷運站見面，來談這個構想。今天下午，我在家開始享用了。
　
從最初和唐宗浩討論，就相信這是一本可以滿足我想像的書。因為他很快就提出把不同的程式語言分火系、水系、風系、土系及中央大石系，然後將之擬人化成為魔法師，在一個叫作普格瑪（program）的島上來說故事的構想。
　
現在實際閱讀起來，他講故事的文字風格，搭配上相呼應的配圖，真成了一本可以當小說來讀的書了。
　
試摘一段：
　
『旅人拿著望遠鏡，從普格碼島外遠遠看著火之森林。在落日的餘暉中，滿天的晚霞 映 照 著 大 地，這 時 可 以 看 到 島 上 有 許 多 火 把 堆，只 見 火 焰 忽 高 忽 低，冒 出 各 種 顏色的煙，把星空渲染成一片金黃色。
　
『有四位法師正用各種法術讓火焰產生不同的變化。火焰之間相互交錯，一下子分開，一下子又重疊，還不斷發出各種炫目的效果，像活生生的一樣。
　
『旅人觀察許久，漸漸地，終於可以清楚看出法師們手中的法寶了。
　
『第一位法師的法杖上畫著一隻黃色小貓，第二位法師色彩斑斕的法杖上刻著「CSS」，第三位法師的法杖持續發出一閃一閃的亮光，第四位法師的法杖上則是一座藏有各式圖案的圖書館。
　
『緊 接 著 又 是 一 陣 陣 的 火 光 交 會 ， 炫 目 的 光 彩 看 久 了， 只 覺 眼 睛 有 點 刺 痛 。 旅 人 放 下望遠鏡，看得到他眼中還殘留著許多光影，仍不斷的變幻著。
　
『嗯，火系法師滿擅長創造「效果」的，旅人對自己下了結論。』
　
這就是唐宗浩介紹Scratch 這種程式語言的開場白。
　
我想，半年一年之後，如果我再不會寫程式語言的話，最少我知道一定是我自己的決心不夠，而不再是沒有適當的書可以入門了。
　
如果你也是想學程式語言的人，請不要錯過這本《普格瑪島的法師》。
　
明天下午兩點半，有這本書的新書發表會。 唐宗浩 和批踢踢創辦人 戴志洋 會介紹4大類7種程式語言，讓大家知道可以如何一起修練入門魔法！歡迎參加。
　
時間：2017/8/6 Sun. 14:30-16:30
地點：水牛書店 瑞安街（台北市大安區瑞安街222巷2號1樓）

OBS的用途真的很多，可以螢幕錄影也可以直播，甚至還能轉場跟放入一些文字圖片等等，今天要來分享如何利用它在Youtube上面進行直播！

重要資訊：
由於OBS版本更新的關係，串流服務的部分請改選 Youtube - HLS 這個選項喔！

CSS下載：https://drive.google.com/file/d/1VI0w8wW9hmIYBPNSbXJJ1oCi6jCLz022/view

00:00 影片簡介
00:23 如何在Youtube建立直播
03:19 OBS如何串流Youtube
04:01 如何把聊天室內容放到直播螢幕上
06:18 如何把聊天室的底色變成透明的
08:22 如何開始直播
09:26 補充說明

👉訂閱分享家-羽的頻道 https://tinyurl.com/subshareryu
👉前往分享家-羽的副頻道【羽倫同樂日常】https://tinyurl.com/yulenvlog
👉前往分享家-羽的粉專 https://www.facebook.com/HappySharerYu/
======================================================
其他分享家-羽的影片系列：

💡知識技巧系列
分享3C或生活中實用的知識、技巧與經驗。
https://tinyurl.com/sg3w25o

🔎開箱評測與使用心得系列
分享各種商品的開箱、評測以及使用心得等影片。
https://tinyurl.com/tqjpv75

🚗旅遊與食記系列
分享旅遊或食記相關Vlog以及旅遊相關的知識、技巧或資訊等等。
https://tinyurl.com/rtpc4a3

📢就是要分享系列
分享我覺得有價值但又不知道如何歸類的影片。
https://tinyurl.com/rp3h47r

🏨羽的住宿經驗系列
分享各種自己住過的飯店、旅社、民宿等等。
https://tinyurl.com/uto3ngh

📜全部播放清單列表
其他沒有列出來的清單都在這邊！
https://tinyurl.com/s8rmtk8
======================================================
✉合作邀約請洽粉專或來信 singiamagic@gmail.com

#OBS #EP4 #直播

元智實用化課程用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教學