1 / 19

手持裝置網頁設計

手持裝置網頁設計. Web Design On Mobile Device. About Me…. 莊羽柔 才麗資產管理有限公司 負責人 / 網頁設計師 2012.1 台灣大學 資訊網路與多媒體研究所畢業 2009.6 大同大學 工業設計學系 媒體設計組畢業 ( 第一屆 ). 手持裝置？. 什麼是手持裝置？ 在這門課，我們針對的是 智慧型手機 的使用者. 手持裝置 - 互動設計 v.s 網頁設計. 我上學期開的課叫 手持裝置互動設計 在探討現今的智慧型手機上 APP(Applications) 的 開發流程 、與 使用者互動的模式 等等 …

cais
Download Presentation

手持裝置網頁設計

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 手持裝置網頁設計 Web Design On Mobile Device

  2. About Me… • 莊羽柔 • 才麗資產管理有限公司 負責人/網頁設計師 • 2012.1 • 台灣大學 資訊網路與多媒體研究所畢業 • 2009.6 • 大同大學 工業設計學系 媒體設計組畢業 (第一屆)

  3. 手持裝置？ • 什麼是手持裝置？ • 在這門課，我們針對的是智慧型手機的使用者

  4. 手持裝置- 互動設計 v.s網頁設計 • 我上學期開的課叫手持裝置互動設計 • 在探討現今的智慧型手機上APP(Applications)的開發流程、與使用者互動的模式等等… • 包含智慧型手機介面設計的要領、以及程式設計的部分 • 是以『設計』的角度為出發點來開發智慧型手機APP • 所完成的APP有實用性質取向、也有遊戲類的、或是教學類的 • 以後會改成： • 手持裝置程式設計(一)&手持裝置程式設計(二)

  5. Flash & Adobe Air

  6. 為什麼想要另開課程 • 大部分的設計系學生都很有想法而且有非常良好的畫面表面的能力 • 但並不是全部的人都能真正完整做出一個APP？ • 程式能力與邏輯概念不佳。 • 顧名思義，以程式來說，網頁設計當然是比互動設計要簡單的多，加上手機版的網頁是APP的始祖，至今尚未退燒，才會有這門課的誕生。 • 以後會改成： • 手持裝置程式設計(一)&手持裝置程式設計(二)

  7. 手持裝置網頁設計- 課程大綱

  8. 為什麼我要上這麼課？

  9. 主要教學的平台跟技術 • 平台： • Eclipse IDE for Java Developerswith Android SDK & PhoneGap • (Dreamwever5.5/6with PhoneGap) • PhoneGap • 技術： • HTML/HTML 5 • CSS • JavaScript/JQuery • PhoneGap Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Globalization InAppBrowser Media Notification Splashscreen Storage http://docs.phonegap.com/en/edge/guide_platforms_index.md.html

  10. Responsive Design • 也可稱作Responsive Web Design • 簡單來說，就是讓一個網頁在 PC、Mobile 上都可以有好的瀏覽效果，而這個我們就稱為 Responsive Web Design。 • 上面兩個顯示不同，但是卻是同一份 HTML 網頁，使用 CSS Media Query 做調整，就是 Responsive Web Design。

  11. 成績評量方式 • 作業x2 (一個期中之前、一個期中之後) 30% • 期中報告 25% • 期末Project (3至5人一組[未定案]) 35% • 平時成績 10%

  12. 有空請自行去安裝或下載 • Eclipse IDE for Java Developers http://www.eclipse.org/downloads/ • Android SDK http://developer.android.com/sdk/index.html • Xcode + iOS SDK(如果你是用mac電腦) https://developer.apple.com/devcenter/ios/index.action • DreamweverCS5.5、CS6(需要有PhoneGap) • PhoneGap http://phonegap.com/install/

  13. 手持裝置相關 • 任何3C產品，尤其是手機，發展速度很新很快！ • 最新技術、流行新知與新聞，也會不定時的在課堂上分享給大家知道；也歡迎大家互相討論。

  14. 比較 • iOSv.s. Androidv.sWindows

  15. 思考.. • Touch + Smart Phone • Sensor + Smart Phone • Cloud + Smart Phone • Image Recognition + Smart Phone ？

  16. http://www.youtube.com/watch?v=TJkmc8-eyvE

  17. If you have any question • E-MAIL: • evacyl5220@outlook.com

More Related