1 / 41

行動裝置網站開發與 PHP

行動裝置網站開發與 PHP. 教材. 陳會安 著（ 2013 ）， PHP+MySQL 與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900 ） 楊仁和 譯（ 2012 ）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310 ）

solomon-henson
Download Presentation

行動裝置網站開發與 PHP

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. 行動裝置網站開發與PHP

  2. 教材 陳會安 著（2013）， PHP+MySQL與 jQuery Mobile 跨行動裝置網站開發， 碁峰資訊股份有限公司， ISBN 9789862768563 （書號 ACL037900） 楊仁和 譯（2012）， 深入淺出行動網站開發， 碁峰資訊股份有限公司， ISBN 9789862765005 （書號 A310） 榮欽科技、陳婉凌(2012)， 網頁設計必學的程式實作技術-HTML5+CSS3+JavaScript， 博碩文化， ISBN: 978-986-201-664-0 （書號 PG31237 ）

  3. 大綱 Web應用程式與Web服務 Mobile應用程式與行動裝置網站 客戶端相關網頁技術 PHP伺服端網頁技術

  4. Web應用程式與Web服務 • Web 應用程式 • Web Applications • Web 服務 • Web Services • REST 與 RESTful • REST: Representational State Transfer

  5. Web 應用程式 • Web Applications • 以 Web 作為使用者界面建立應用程式 • Server 端技術： • PHP • ASP.NET • JSP/Servlet • Ruby • Python

  6. Web 應用程式 • 資訊傳遞模型（Information Delivery Model）

  7. Web應用程式 • 資訊處理模型（Information Processing Model） http://www.ywdeng.idv.tw/?q=node/4

  8. Web 服務 • Web Services • 以 Web 作為 API 提供遠端副程式調用（Remote Procedure Call, RPC） • Server 端技術：SOAP, WCF, … • Client 端技術：XML, JavaScript

  9. Web 服務 SOAP: Simple Object Access Protocol

  10. REST 與 RESTful • Representational State Transfer • Representation • 一份文件，內容描述某項資源目前的狀態 • 資源 • Resource • 任何可以用 URI 定址的物件 • 不使用 SOAP • 輕量級的Web服務 • 資料格式為XML, JASON

  11. REST 與 RESTful • RESTfulWeb Services 也稱為 RESTfulWeb API

  12. RESTful Uniform Interface 一致的界面 Stateless 沒有狀態 Cacheable 可以快取 Client-Server 主從式架構 Layered System 分層式系統 Code on Demand 依需求增加程式功能

  13. RESTful Web API • RESTful API • Google、Facebook、Twitter、MySpace、Flickr、Picasa http://www.programmableweb.com/apis/directory 列出各種 RESTFul Web API

  14. 練習 • 參考 Google Map 的 Simple Map 範例，在網頁內插入顯示中正紀念堂的地圖 • 座標： 25.035197,121.521943 • 參考 Google Maps JavaScript API

  15. Mobile 應用程式與行動裝置網站 • Mobile 應用程式 • Mobile Applications • 也稱為 Mobile Apps • 精簡！ • 原生應用程式 • Native Application • Mobile Web 應用程式 • Mobile Web Application

  16. 原生應用程式 • Native Apps • 預先安裝在行動裝置內 • 使用者自行從網路的軟體商店下載安裝 • Android：Google Play • iOS：Apple Store • 微軟：微軟巿集 • 使用各平台專屬的開發工具和程式語言進行開發原生的應用程式

  17. 原生應用程式 • 獨立的Mobile應用程式： • 不需要Internet連線 • 可以獨立執行 • 例如：電話簿、撥號、計算機、離線遊戲,… • 基於Web服務的Mobile應用程式： • 需要Internet連線 • 重要的資料與計算功能放在雲端 • 行事曆、電子郵件、Facebook、Twitter、連線遊戲, …

  18. Mobile Web 應用程式 • 技術：HTML5、CSS3、JavaScript、伺服端網頁 • 必須透過Internet才能執行 • 和一般 Web Application 不同 • 自動調適各種螢幕與解析度 • 支援離線瀏覽 • 支援觸控功能 • 支援 GPS 定位

  19. Mobile Web 應用程式 • 設計上的挑戰 • 螢幕尺寸小 • 適合觸控的輸入方式 • 適合手機的瀏覽方式 • 在各種瀏覽器上呈現相同的效果 • 網路頻寬小、連線品質不穩定

  20. 客戶端相關網頁技術 • HTML5 • CSS3 • JavaScript • DOM文件物件模型 • Ajax • jQuery • jQuery Mobile

  21. 客戶端網頁技術的基礎 • 程式在瀏覽器中執行！

  22. 客戶端網頁技術的基礎 • 瀏覽器種類 • 個人電腦瀏覽器：在PC或筆電上執行的瀏覽器 • Internet Explorer (IE)、Firefox、Safari、Opera、Google Chrome、Maxthon（傲遊雲瀏覽器） • 行動網路瀏覽器：在Mobile平台執行的瀏覽器 • 核心大部分都是 WebKit • IE 用 Trident • Firefox 用 Gecko

  23. HTML5 • 不只是一種編排內容的標記語言 • 支援語意標籤 • 最新多媒體技術 • 擴充、改進 HTML 標籤和 API • 低耗電 • 跨平台 • 各家瀏覽器對 HTML5 的相容性： • http://html5test.com/results/desktop.html • http://html5test.com/results/mobile.html

  24. HTML5 • 多媒體支援 • <video>、<audio>、<canvas> • 統一的 API • 不需安裝Flash外掛程式 • 語意標籤 • <section>、<article>、<header>、<aside>

  25. CSS3 • Cascading Style Sheets • 層級式樣式表 • 描述標示語言的顯示外觀和格式 • 1996年12月公佈CSS Level 1 • 1998年5月推出Level 2 • 1999年開始制訂Level 3 • 2011年6月7日才成為W3C的建議規格

  26. JavaScript • JavaScript 是 Netscape 開發的一種腳本語言，目前是甲骨文公司的註冊商標 • 使用淺顯的程式語法，只需初學程式設計者即可運用自如，在網頁上建立互動效果 • Jscript 為微軟推出相容 JavaScript 的腳本語言

  27. DOM 文件物件模型 • Document Object Model • 存取 HTML 元素、樣式或程式碼的機制 • 將 HTML 元素、樣式和程式碼都視為物件

  28. DOM 物件模型 • 將 HTML 元素轉換成一棵樹（Tree），每一個標籤和文字內容是一個一個節點（Nodes） • 走訪節點以存取 HTML 元素。 • DOM 提供一組標準程式介面 • 存取物件的屬性和方法 • 可以新增、刪除和修改節點資料

  29. DOM 物件模型的組成 • DOM Core：提供HTML網頁或XML文件瀏覽、處理和維護階層架構，主要提供兩種功能 • 瀏覽（Navigator）：在網頁樹狀結構中走訪 • 參考（Reference）：存取節點的集合物件 • DOM HTML：HTML網頁專屬的DOM API介面，將網頁元素都視為物件，以便 JavaScript 存取元素，建立動態網頁內容

  30. DOM 範例

  31. Ajax • Asynchronous JavaScript And XML • 非同步 JavaScript 和 XML 技術 • 最早由 Jesse James Garrett 提出 • 並不是全新的網頁技術 • 整合多種網頁技術的新方法 • 被大量使用在 Google 網頁設計後，才受到重視 • 可以讓 Web 應用程式在瀏覽器建立如同桌上型 Windows 應用程式一般的使用介面

  32. Ajax 技術組成 • HTML/XHTML 和 CSS • 在瀏覽器顯示使用者介面和呈現相關資料 • XML • Extensible Markup Language 可擴展標示語言 • SGML的子集 • 開放的資料格式 • XML DOM • 取得 XML 資料後，使用 JavaScript 和 XML DOM 取出所需資訊 • XMLHttpRequest物件 • JavaScript 藉此建立非同步 HTTP 請求

  33. jQuery • jQuery是一個 JavaScript 函式庫 • 以簡潔方式撰寫 JavaScript • 擴充 JavaScript 的功能 • 以簡潔程式碼處理 DOM，走訪網頁元素更改外觀 • 新增特效、事件處理、動畫、支援 Ajax • 以更彈性方式寫出最少程式碼

  34. jQuery Mobile • jQuery Mobile 是基於 jQuery建立的框架（Framework） • 由 jQuery專案小組開發 • 2011年11月推出 1.0 正式版 • 觸控最佳化 • 提供許多最佳化觸控操作的使用介面元素 • 建立跨行動裝置的 Mobile 網頁應用程式 • 建立外觀佈景一致的使用介面

  35. PHP 伺服端網頁技術 • 在Web 伺服器上執行的應用程式

  36. Web 伺服端網頁技術基礎 • CGI（Common Gateway Interface） • 共通匣道介面 • 提供 Web 伺服器執行外部程式的管道 • 常見以 C、C++、Perl 程式語言開發，編譯成執行檔案 • ASP（Active Server Pages） • 微軟早期的伺服器端網頁技術 • Script 語言，直接內嵌在 HTML 網頁中，語法類似 VB • 以直譯方式執行 • ASP.NET： • 繼 ASP 3.0 之後，微軟開發的伺服端網頁技術 • CLR（Common Language Runtime）架構 .NET 平台

  37. Web 伺服端網頁技術基礎 • PHP（PHP: Hypertext Preprocessor） • 開放原始碼（Open Source） • 可以直接內嵌於 HTML 網頁 • Linux/Unix 作業系統的伺服端網頁技術 • JSP（Java Server Pages） • Java 語言 • JSP直接內嵌於 HTML 網頁 • Servlet 是編譯後的類別，可在伺服端執行

  38. PHP 的基礎 • PHP 最初只是一套使用 Perl 語言撰寫的工具程式，主要是用來追蹤線上履歷表的存取 • 已經成為主要的腳本語言之一，市占率超過 50% • 可以內嵌於 HTML 網頁，也可獨立執行 • PHP 4.0 版支援更多平台和種類的Web伺服器、HTTP 的 Sessions 管理、輸出緩衝區、更多保密方式取得使用者輸入資料、全新語言架構 • PHP 5.0 版改進 PHP 4.0 的弱點，提供新版資料庫函式、整合 XML 功能 • Zend Engine 2.0 讓 PHP 成為真正的物件導向程式語言

More Related