現代化行動網頁設計入門基礎班 (Mobile Web Dev Basic) DAY 1 - 課程介紹

隨著智慧型裝置的起飛，現在幾乎已是人手一支智慧型手機，根據統計今年全球智慧型手機出貨量已達10億支，由於大量的需求，開發Mobile Web也成為原生（Native App）外另一種較低成本的選擇。因此本課程將著重在網頁開發基礎介紹以及如何運用HTML5/CSS3（Bootstrap）/JavaScript（jQuery）來開發Mobile Web App。希望讓沒有基礎（或有基礎）的學員能在學習完課程後具備自學能力未來能持續進修，進而開發出搭配Facebook API、Google Map API的Mobile Web App

課程網站：http://kdchang.cc/mobile-web-dev/

Transcript

1. 講師：張凱迪 ( KD.Chang ) 課程介紹 現代化行動網頁設計入門基礎班 DAY 1  Copyright © 2013 All rights reserved
2. Copyright © 2013 All rights reserved About Me 臺大資管所，1年+ Web 相關開發經驗 服務過電子商務公司和活動入口網站 曾參與數個組織的創辦 研究領域：Web Data Mining （網路資料探勘） Front-end： HTML / CSS (less) / JavaScript / jQuery／Backbone Back-end： node.js、PHP、Python - 半路出家的工程師 張凱迪 （KD.Chang）
3. 教學⼤大綱 SYLLABUS  1. 網路發展簡介、網站設計流程介紹、HTML5基礎介紹與實務 2. CSS基礎介紹（選擇器、Basic Box Model、排版、CSS3特⾊色、media query） 3. Javascript 基礎語法、流程控制、函式、物件特性、基礎 DOM API操作 4. jQuery基礎與應⽤用、事件處理、Ajax應⽤用（HTTP 簡介）、YQL簡介 5. Twitter Bootstrap CSS Framework實戰、Mobile Web特性與Framework簡介 6. Facebook API、Google Map API簡介與應⽤用 7. 專案開發 *課程規劃將視學員程度和時間做調整 Copyright © 2013 All rights reserved
4. 上課時間、地點 A班：10/3（四）開始，每週四8:30pm-10:30pm上課，共20小時 台大大一女宿舍學習中心（若大一女大教室十月底完工將調整地點） B班：10/7（一）開始，每週一7:00pm-9:00pm上課，共20小時 台大男一宿舍學習中心（台大男一舍正對面） Copyright © 2013 All rights reserved
5. 作業繳交 實踐是檢驗真理的唯一標準！ 每次上課都有練習，回家練習作業預計共有10 次 作業請於每次上課前寄到講師電子信箱 若缺交未超過兩次，缺席未超過兩次全額退保證金，並頒發結業證書 課程網站：http://kdchang.cc/mobile-web-dev/ 電子信箱：ibelieveicaner[at]gmail.com Copyright © 2013 All rights reserved
7. 使用工具 http://static.ithome.com.tw/
8. 參考書籍 http://www.heatbook.com.hk/ ＆http://www.silkbook.com/
9. 課程遠大目標 (!?) Copyright © 2013 All rights reserved
10. 課程助教 Copyright © 2013 All rights reserved
11. 特別感謝 Copyright © 2013 All rights reserved 台灣大學學務處住宿組 台大資管系、台大經濟系、台大政治系、HackNTU團隊 @ tureki （烏龜） @ Rex Chen @ Mr. Orz @ 大澤木小鐵 @ josephj
12. Ｑ＆Ａ Copyright © 2013 All rights reserved
13. 全球資訊網是一種社會創 新，而非科技的創新。 http://mrfabiansclass.wikispaces.com/ Tim Berners-Lee，全球資訊網的發明者
14. Copyright © 2013 All rights reserved 何謂『現代化』網頁？ 在回答這個問題前，先看看什麼是『傳統網頁』
15. 何謂『現代化』網頁？ http://code.divshot.com/geo-bootstrap/
16. Copyright © 2013 All rights reserved 何謂『現代化』網頁？ 跨平台 使用新的開發工具和標準開發  跨瀏覽器
17. http://cs7010.vk.me/c7006/v7006317/25e7/Uf6_j97QSiE.jpg
18. http://www.mymodernmet.com/profiles/blogs/
19. http://www.teqarazzi.com/
21. Copyright © 2013 All rights reserved 開發現代化網站簡單又不簡單 跨平台 跨瀏覽器 前端工程(Front-end) 正夯 ！
22. Copyright © 2013 All rights reserved 網站開發流程 1.  網站企畫 2. 介面設計 （設計師 ＋前端工程師） 3. 程式開發 （前端 ＋後端工程師） 4. 上線測試 5. 內容維護 網站建置不是件簡單的事 @ 打造網站的步驟 by保哥
23. Copyright © 2013 All rights reserved 靜態網站 VS. 動態網站 誤解：不是有用Flash就是動態網站 靜態網站：HTML / CSS / JavaScript 動態網站：串連資料庫 (PHP、node.js、RoR、Python、JSP)
24. 圖片來源：從HTML5/CSS3/JavaScript 到 jQuery/PhoneGap Android 程式設計 靜態網站 
25. 動態網站 圖片來源：從HTML5/CSS3/JavaScript 到 jQuery/PhoneGap Android 程式設計
26. Native App vs. Mobile Web App: A Quick Comparison NATIVE APP VS. MOBILE WEB APP  Native App Mobile Web App 根據各平台不同使用不同語言 （Objective-C、Java、.NET） 使用HTML5/CSS3/JS開發 執行效能優 執行效能較差 多需上App 市集下載安裝 使用瀏覽器，不用安裝 開發成本較高 開發週期短、成本較低 只能在特定平台運行 號稱跨平台 可以操作手機硬體API 無法操縱手機硬體
27. http://static.oschina.net/
28. http://renaun.com/html5/introphonegap/assets/phonegap%20build.png 另一種選擇…HYBRID
29. http://cdn.business2community.com/ 夢想彼岸…FIREFOX OS
30. Copyright © 2013 All rights reserved 優雅降級與漸進增強 優雅降級 (Graceful Degradation) 以新版本瀏覽器為中心，然後提供舊版本變通方法或修復，相對開發成 本較低 漸進增強 (Progressive Enhancement) 以舊版本瀏覽器為中心，從最基本功能出發，確保系統可以在任何環境 下正確使用，再為新版本增添功能提高使用者經驗
31. Copyright © 2013 All rights reserved 數據才是真實世界 使用者測試、實機測試、上線測試！ Ａ／B Test Funnel Test 眼球追蹤 ＋ 熱點圖研究 Google Analytics
32. Copyright © 2013 All rights reserved 建構網站前端三要素 基礎架構 - HTML 外觀樣式 – CSS 行為動作 – JavaScript
33. Copyright © 2013 All rights reserved 檢視原始碼
34. Copyright © 2013 All rights reserved 除錯工具 Firefox – Firebug Chrome – 開發者工具 IE – 開發者工具(F12) Safari – 開發者工具 Opera – Dragonfly
35. Copyright © 2013 All rights reserved 靜態網頁空間 臺⼤大師⽣生個⼈人網⾴頁空間 Google Drive 公開資料夾 Dropbox 公開資料夾 Github Pages
36. http://news.bfyx.com/ 新手村從記事本開始
37. Ｑ＆Ａ Copyright © 2013 All rights reserved