第一章 網頁自適應
1.1自適應的概念
十幾年前，著名的外國Ethan Marcotte教授提出了自己對網頁方面的一個論點就是“自適應網頁設計”(Responsive Web Design)這個專有名詞，可以在設計網頁的時候讓網頁在設備顯示的時候，自動識別屏幕的寬度、而且做出調整相應網頁的設計。 他本人做出了一個非常有意思實驗，就是把幾張主人公的頭像都進而製作設計成網頁中，當這些頭像圖片並排在一行時，說明屏幕的寬度大於1300像素。當這些頭像圖片分成兩行時，說明屏幕的寬度在600像素到1300像素之間。當導航欄有些偏移到網頁的頂部時，說明屏幕寬度在400像素到600像素之間。當這些頭像圖片分成三行，說明屏幕的寬度在400像素以下。
1.2自適應的發展方向與應用
現在為什麼需要自適應網頁設計？因為“科技時代已經來臨，一步一步的向前發展，不斷的有各種各樣的新型設備(手機/平板電腦/手環)、平臺和瀏覽器都需要各種網站的網頁能夠兼容顯示。自適應網頁設計決定了一種必然的設計趨勢,在現如今年所有的網站都將採用自適應網頁設計。那麼是誰在使用自適應網頁設計呢？其實不管是用在演示、還是流行設計和頁面美化中。而今大量的網站已經採用了自適應網頁設計。何時需要採用自適應網頁設計？當你需要考慮以下事情時：在時間上，金錢上，不同瀏覽器的支持，性能，內容的呈現，網站等等去跟移動應用相對比時，自然而然就需要採用自適應網頁的設計。
現在的互聯網已經發展到了移動網絡5G的時代，我們接觸互聯網的方式已經開始呈現出多元化方向發展，屏幕大小的展示有很大的不確定因素，假設現在的個人和企業等方面的網站要求每個顯示屏幕都去製作設計一個網站，很明顯就會會加大設計和管理網站的成本，同時還會涉及到未來的運營方面的不便和耗費大量的人力財力的成本來支撐其運營。自適應網站的設計的出現使的設計師在設計一個網站的時候，可以方便快捷的市網頁適應不同的終端系統，應用到不同的網絡載體上去，它具有非常好的的便捷性，同時也有利於減少企業設計開發網站的成本等。
老式的網站是固定的死網頁的寬度或者高度，在不同的客戶端所展現的頁面效果都是一樣的。所謂自適應網站設計是指在網頁前端展示的內容是活的，即筆記本電腦、臺式電腦、移動設備等不同的設備所看到的內容是不一樣的，有了這種技術，網頁就可以適應任何終端，在任何終端都能展示出最好的效果。對目前的自適應網頁設計的發展趨勢來講，無論是放在市場的角度，還是建設網站的角度，自適應網頁將會取代傳統建設網站的地位。互聯網日新月異，隨著更多的互聯網技術的誕生，會有更強大的技術出現。
1.3自適應與響應式區別
在我學習並設計製作自適應網頁的同時，響應式這個名詞會時不時出現在我的視線中那麼自適應與響應式是不是一回事呢？沒有做過前端開發的人自然對這兩個名詞的概念是不清楚不明白的，隨著現在網站設計扁平化的潮流，越來越多的客戶想要把原有的網站做成自適應或者響應式呈現。但很多人又不清楚這兩者的區別，甚至很多人會認為這兩者就是一個概念。其實響應式佈局大概的意思就是一個網頁放在不同適配分辨率下的呈現，這一概念在2010年5月由Ethan Marcotte提出的，簡單來說就是建立一個網頁，通過CSSMedia Queries，Content－Based Breakpoint（基於內容的斷點）等技術來改變網頁的大小以適應不同分辨率的屏幕。而自適應佈局大概的意思就是依據不同適配分辨率而選擇不同的頁面，為不同類別的設備建立不同的網頁，檢測到設備分辨率大小後調用相應的網頁。目前AWD網頁主要針對以下幾種分辨率（320，480，760，960，1200，1600）。製作和設計網站的時候，我們需要根據需求來判斷什麼樣的網站適合使用自適應佈局(固定斷點)，什麼樣的網站適合響應式佈局(流體網格)。
理論上來說，響應式佈局在任何情況下都比自適應佈局好一些，但在某些情況下自適應佈局更切合實際。自適應網頁設計的優勢就是適合固定斷點的網站。在網頁的實施上面代價成本更低，測試也比較容易。自適應佈局可以讓設計更加容易操作控制，因為它只需要考慮幾種狀態就行了。相反另一種對於響應式網頁設計優勢就是流體網格的網站。在網頁上表現出靈活性強，可適應不同分辨率的設備，方便快捷的解決多設備顯示適應的問題。下面客觀的來說自適應和響應式的區別：首先前者和後者解決的問題是不一樣的。自適應本身是去解決怎樣才能在不同大小的移動設備或者其他設備上表現出相同的網頁，寬度一般在600像素以下和在1000像素以上的時候，前者說明是手機小屏幕後者則是pc端。相同的內容，在大小不一的屏幕上，都表現出理想滿意的效果，不是一件易事。各式各樣的設計方式都能體現出自己的優缺勢，所以每位設計師都會去選擇最適合自己的製作方式。
第二章 Bootstrap全局CSS樣式
2.1概覽
為了網頁自適應的開發變得更好、更快、更強壯的體驗，學習了Bootstrap後深入瞭解其中的底層結構關鍵部分，在Bootstrap中用到的一些 HTML 元素與CSS 屬性都會是 HTML5 文檔類型。在編寫時可以參照以下代碼進一步設置。第1行<!DOCTYPE html>，第2行<html>，第3行...，第4行</html>。
在原來Bootstrap 2所屬的框架中，它的重要組織部分對移動設備友好的樣式增加了一些。在現在的Bootstrap 3 版本又中重新設計編寫了整個框架，那是因為把移動設備的優先級提升了。這個版本在編寫時能直接進入框架的中心，在操作上而且方便快捷的增加了對移動設備的樣式多樣性。在框架的每個角落中包括了設備的樣式，它不僅僅是增加額外的文件。設計者在移動設備上進行繪製和觸屏縮放時，需要在<head>之中間加入viewport元數據標籤，編寫代碼如下：<meta name="viewport" content="width=device-width, initial-scale=1">。瀏覽器在設備上使用時，使用視口（viewport）去設置 meta 屬性 user-scalable=no，用來對其禁止縮放，禁止縮放後，使用者只可以滾動屏幕。以上方法不適合全部的網站應用，還是需要看設計者的情況而定!此代碼:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">可以參考。
Bootstrap鏈接樣式、排版設置了基本的全局樣式。前者是為所有的鏈接設置了基本顏色 @link-color ，正是當鏈接處於:hover狀態時才可以添加下劃線。後者是為body元素設置background-color: #fff;設計師會用@line-height-base、@font-size-base和@font-family-base當變量作為排版的基本要求參數。Bootstrap 會為每一個頁面的內容和柵格系統包裹.container 容器。.container 是用於固定寬度和支持響應式佈局的容器。代碼如下:第1行<div>，第2行...，第3行</div>。其中.container-fluid 類用在100%寬度，佔所有視口的容器。
2.2柵格系統
Bootstrap 是已響應式和供移動設備的流式柵格系統，它共有12列不超過12列，它會跟隨視口或屏幕大小而增加。這裡包含了方便使用的預定義類和強大的mixin來編寫更具語義的佈局。柵格系統的原理是通過一系列的行（row）與列（column）的相結合去搭建頁面的佈局，本身的設計內容就可以放入這些搭建好的佈局中。Bootstrap 柵格系統中的“row”一定被 .container或 .container-fluid包含，簡單方便的賦予合適的排列和內補。在以“行（row）”在水平方向組建一組“列（column）”。“列”作為“行”的直接子元素時，搭建設計的內容需要放在“列”的裡面。在 .row 和 .col-xs-4 這種預定義的類，也能用來創建柵格佈局。Bootstrap 源代碼中定義的 mixin 也能用來創建佈局，在使用“列”去設置 padding 屬性，從而搭建列與列之間的間隔。通過 .row 元素定為負值 margin 用來抵消掉 .container 元素設置的 padding，它的功能就是側面的把“行”所包含的“列”消除掉了padding。柵格系統大多用在等於分界點大小或者大於屏幕所在寬度的設備上，對小屏幕設備覆蓋柵格類。在任何元素上的所有 .col-md-* 柵格類都用在與屏幕寬度大於或等於分界點大小的設備上，對小屏幕設備覆蓋柵格類。在元素上所有的.col-lg-*不存在的應用都會影響大尺寸屏幕的移動設備或這其他設備。
2.3排版
在HTML文檔中有六個級別的標題，分別是<h1>到<h6>元素來定義。其中<h1>表示最高級別的標題，然後依次類減，<h6>級別最低。<h1>是一級標題，表示的是最大的字號，<h6>是6級標題，表示的是最小的字號。在html文檔中的標題裡可以包含 <small> 標籤，可賦予 .small 類的元素，可用來標記副標題。<h1>h1. Bootstrap heading <small> Secondary text</small></h1>。整個文檔頁面的主體中Bootstrap 把全局 font-size 設置為14px，line-height 設置為 1.4左右。以上屬性可直接賦予 <body> 元素和全部段落元素。其次<p>（段落）元素設置了等於 1/2 行高（即 10px）的底部外邊距。中心內容可以通過 .lead 類的添加讓段落能明顯突出，要刪除的文本使用 <del> 標籤。沒用的文本使用 <s> 標籤。另外插入的文本使用 <ins> 標籤。帶下劃線的文本使用 <u> 標籤。
通過使用對齊類文本，可以將文字重新對齊，非常的簡單方便。
<p>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>
可以改變文本的大小寫的代碼如下：
<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>
通過最接近日常使用的格式呈現讓聯繫信息如下。在每行結尾添加 <br> 可以保留需要的樣式。
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
排列順序無關緊要的一列元素
<ul>
<li>...</li>
</ul>
順序至關重要的一組元素
<ol>
<li>...</li>
</ol>
2.4響應式工具
為了方便更高性能的開展在移動設備網頁頁面開發工作上，可以用媒體查詢功能，讓這些工具類的功能準確無誤的針對不同設備去隱藏或者展示網頁頁面的內容。為了充分考慮，其中包含對打印機顯示或隱藏內容的工具類。擁有了這些針對性的使用這類工具類，可以避免因為同一個網站創建完全不同的版本。反之，通過使用這些工具類可以在不同設備上提供不同的展現形式。
可用的類可以通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容。
打印類和常規的響應式類一樣，使用下面的類可以針對打印機隱藏或顯示某些內容。
測試用例可以在移動設備或者其他設備中調試瀏覽器的大小，當打開頁面，在大屏幕，中等屏幕和大屏幕，小屏幕和大屏幕，超小屏幕和大屏幕上瀏覽器視口（viewport）中是可見的。在大屏幕上，medium和large，小屏幕和大屏幕，超小屏幕和大屏幕瀏覽器視口（viewport）中是隱藏的，如圖2-2所示。
第三章 PHP和HTML5
3.1 PHP基本概念
HypertextPreprocessor縮寫為PHP，php是一中內嵌在HTML的腳本語言。PHP本身不一樣的語法包含了c,java和perl及PHP式的最新語法。它的用處就是讓網頁設計開發程序員能比現在更加快的寫出網頁。模式pattern，是用來解決某一種或者某一類問題的方法。框架framework，它是某些應用的半成品，也可以說是一組組件，讓設計師自主的去選擇自己想完成的系統。指的是使用別人搭好的舞臺進行表演。框架基本都是成型的，它在不斷的升級。PHP模板來自Perl的Template，模板這種東西能體現出非常方便快捷的把網站的結構改善,能很快的改變使用者的整個站點的外形;抽象程序的設計，無垃圾HTML代碼; 設計編寫人員不用關心全部的"模糊"代碼;，它運行的速度非常的快。
有一種保存到外部的一個引用資源，它是通過專門的函數用來建立的一種特殊變量。類是包含類本身的方法、名稱、屬性與事件，同樣也是包含有關對象動作方式的信息和某個對象的定義，其實它的本身不是對象，因為它不存在內存中。如果設計師引用類的代碼運行的時候，類的一個新的例子，就是對象，在內存中創建了，只有一個類，但能從類在內存中知道創建的多少，得知有多少個相同類型的對象。函數作為一種潮流程序，它為設計人員提供了便捷，在進行一個複雜的程序設計時，它可以根據網頁製作所需要完成的功能，把程序分為某些相對獨立的部分，每一個部分編寫一個函數，從而使各部分充分獨立，任務簡單，程序明瞭，能讀懂還方便維護。有一種對象方法，它是把面向對象的思想應用於軟件開發的過程的一種對象方法。指導開發活動系統的方法是搭建在“對象”概念基礎上的方法學。
3.2 HTML5基本概念
Hyper Text Markup Language是HTML的英文名字全稱,作為一種網頁超文本標記語言，html是不能直接顯示在瀏覽器中。標記語言通過瀏覽器的解釋和編譯，就可以正確地反映出HTML標記語言的內容。它在廣域網上的領域是空前的，它就是網頁內容和外觀的標準語言。HTML是網頁內容的一個載體，它用在網頁和手機端的編程語言上較多。
<head>表示內容的最開始信息，一般包括標題和主題信息。head標籤用在定義文檔內容的頂部，它是所有頂部元素的容器。頂部元素有<title>、<script>、<style>、<link>、<meta>等標籤，在head部分的內容是不能直接在網頁中顯示出來的。<title>作為網頁標題內容，每個網頁都是會有一個獨一無二的title，<meta>是定義頁面信息的說明或者關鍵字等。<meta>標籤沒有結束標記，因為在尖括號內就是meta內容。在html頁面中有很多meta元素。meta元素的屬性中有name和http-equiv兩者，其中name用於描述網頁多一些，它便於搜索引擎查找、分類。在<meta name=“keywords” content="輸入具體的關鍵字">這段代碼中，name為屬性名稱，keywords是屬性，也是設置網頁的關鍵字屬性，在content中則定義具體的關鍵字。在<meta name="description" content="設置頁面說明">這段代碼中，name為屬性名稱，description是屬性，它將元信息屬性設置為頁面說明，在content中定義具體的描述語言。定義編輯工具：<meta name="generator" content="編輯設計的名稱">。設置作者信息：<meta name="author" content="設計者的姓名">。設置網頁的語言和文字：<meta http-equiv="content-type" content="text/html"; charset="字符集類型">。http-equiv用於傳送http通信協議的標頭，而在content中才是具體的屬性值。charset用於設置網頁的內碼語系，也就是字符集的類型。
<body>表示文檔的主體區域，網頁的主體部分包括要在瀏覽器顯示處理的所有信息和在網頁的主體標記中有很多的屬性設置，還有網頁的背景設置、文字屬性設置和鏈接設置等。在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤。設置網頁背景色：<body blue=“背景顏色”> 。設置網頁背景圖片：<body background=“圖片的地址”> 。background屬性可以將圖片設置為背景，還可以設置背景圖片的平鋪方式、顯示方式等。圖片的地址可以是相對地址，也可以是絕對地址。設置文字的顏色：<body text="文字的顏色">。在沒有對文字的顏色進行單獨定義時，這一屬性可以對頁面中所有的文字起作用。text值可以是一個已命名的顏色，也可以是一個十六進制的顏色值，如“blue”或者“#FF99FF”。設置修改鏈接文字的顏色：<body link="顏色">。在默認情況下，瀏覽器以藍色作為超鏈接文字的顏色。link屬性的設置與前面幾個設置顏色的參數類似，都是與body標籤放置在一起，表明它對網頁中所有未單獨設置的元素起作用。<body link="顏色" alink=“顏色”>使用alink可以設置正在訪問的文字顏色，單擊鏈接的文字時，文字已經改變了顏色。<body link="顏色" alink="顏色" vlink="顏色">使用vlink可以設置訪問後的鏈接文字的顏色，單擊鏈接的文字後，文字變成vlink設置的顏色值。設置邊距值：<body topmargin="100" leftmargin="100">。margin用於設置邊距值，默認情況下，邊距的值以像素為單位。topmargin和leftmargin分別設置上邊距和左邊距。
3.3 PHP和HTML5區別
PHP以服務端開發為主，H5是前端開發。服務端主要與服務器（CPU、內存、磁盤、網絡）和數據庫打交道，性能是重點。服務端一般不直接與用戶打交道，而是與更接近用戶的應用及前端交換數據。前端主要與人打交道，重點是開發出用戶體驗良好的應用和網站。打個比方，如果說服務端開發像農業和重工業，那前端就是服務業和輕工業。再比如服務端是農民種糧食蔬菜，關注的是水肥、陽光、溫度，最終是追求每季產量高低。前端是廚師、麵點師，關注的是味道、色彩、外觀，最終是追求好吃又好看。服務端隱藏在背後不為人知，前端應用直接服務於人，人人皆知。服務端與前端有重疊，服務端開發不只是PHP一家，JavaWeb、.NET、Node.js等也佔有一定比例。服務端開發比前端開發更有技術水平，最終的薪資水平也遠遠高於前端開發。
這裡，順便要科普一下，行內所說的H5不只是HTML、CSS，而是以JS為主的前端和Web App開發最新技術的統稱。一個很鮮活的例子，以qq空間為例（大家都很熟悉），大家想要發表篇日誌，首先要在後臺頁面上進行圖文編輯，而PHP就是這份日誌的收納箱，它裡邊有很多編寫好的代碼（這就是PHP開發師做的工作），而當我們點擊發布時，這份代碼就在拼命運行，最終剛寫好的日誌就呈現在首頁裡了，也就是H5編輯好的頁面上。H5只會做好qq空間的頁面框架，比如日誌、圖片、動態等固定的大框架，而PHP則負責你需要更改的數據，如上傳圖片，更新日誌、動態等這些動作
第四章 網頁自適應佈局與實現
4.1 自適應輪番圖的原理和實現
當屏幕寬度大於等於768px時，圖片使用大圖，輪播圖裡的div高度固定，寬度為窗口的寬度(隨窗口寬度的變化而變化)，當屏幕寬度小於768px（手機）時，將圖片換為小圖，並在div裡生成img標籤，img的寬高隨窗口變化而變化，包裹img的div也隨之變化，html代碼如下：
<section id="main_ad" class="carousel slide" data-ride="carousel">
<!-- 活動指示器 -->
<ol>
<li data-target="#main_ad" data-slide-to="0"></li>
<li data-target="#main_ad" data-slide-to="1"></li>
<li data-target="#main_ad" data-slide-to="2"></li>
<li data-target="#main_ad" data-slide-to="3"></li>
</ol>
<!-- 輪播項 -->
<div role="listbox">
<div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div>
<div data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div>
<div data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div>
<div data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg"></div>
</div>
<!-- 控制按鈕 -->
<a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span>Previous</span>
</a>
<a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span>Next</span>
</a>
</section> CSS代碼如下：
#main_ad .carousel-inner .item{
background-size: cover; /*讓圖片全部顯示出來div*/
background-position: center,center; /*讓圖片在div裡水平垂直居中*/
background-repeat: no-repeat;
height: 410px;
}
@media (max-width:768px) {
#main_ad .carousel-inner .item {
height: auto;
}
#main_ad .carousel-inner .item img{
width: 100%;
}}
js代碼如下：
$(function() {
/**
* 根據屏幕寬度的變化決定輪播圖片應該展示什麼 5 */
function resize() {
// 獲取屏幕寬度
var windowWidth = $(window).width();
// 判斷屏幕是大還是小
var isSmallScreen = windowWidth < 768;
// 根據大小為界面上的每一張輪播圖設置背景
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
var $item = $(item);
// var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
var imgSrc =
isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');
// 設置背景圖片
$item.css('backgroundImage', 'url("' + imgSrc + '")');
//
// 因為我們需要小圖時 尺寸等比例變化，所以小圖時我們使用img方式
if (isSmallScreen) {
$item.html('<img src="' + imgSrc + '" alt="" />');
} else {
$item.empty();
}
});
}
// // 讓window對象立即觸發一下resize，初始化div的背景圖
// $(window).trigger('resize');
$(window).on('resize', resize).trigger('resize');
});
4.2 柵格式佈局實現
Container：顧名思義container是柵格系統最外層的class，直接被container包裹的只能是row這個class。需要注意的是container自帶左右各15px padding值，這樣container與瀏覽器窗口之間就存在一定距離，也可以給一個div設置兩個col- class，用來適應不同的屏幕。值得一提的是，row的前後是負的15px margin值，用處是row的 div 被約束在 container內邊界區域重疊不超過它。一定不能在container外用row，因為這樣是無效的。col在不同屏幕下行為不同，列(col)現在有15px的padding了，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，row用負margin值反的延伸回去，所以現在col的padding值與container的padding重疊，永遠不要在row外使用col,在row外使用col是無效的。row：row指container的一行，每行理想狀態包含12個col，這些col在不同屏幕大小時行為不同。
4.3 移動端響應式佈局
REM的定義：rem是相對於根元素<html>來設置字體大小的，簡單來說就是隻需要在根元素確定一個值，這個值作為參考，然後在根元素中設置什麼大小的字體，這完全可以根據使用者的需求。像素PX是一種單位，但不容易編寫響應式佈局，EM：以父節點font-size大小為參考點，標準不統一。在使用REM中html裡默認的 font-size:16px; 也就是 1rem = 16px，以設計寬度為750px為例，那麼定義 font-size:50px; 那麼 1rem = 50px，比例為：750/50=15。屏幕寬度為750px，則html設置的font-size為：750/15 = 50，設計稿中dom（20px）的尺寸為：20px/50=0.4rem，1rem = 50px，屏幕寬度為320px，則html設置的font-size為：320/15 = 21.33，設計稿中dom（20px）的尺寸依然為：20px/50=0.4rem，1rem = 320/750*50px。CSS固定樣式：以下代碼包含了移動端設備絕大多數屏幕尺寸。
html{font-size:50px;}
body{font-size:24px;}
@media screen and (min-width:320px){
html{font-size:21.333333333333332px;}
body{font-size:12px;}
}
@media screen and (min-width:360px){
html{font-size:24px;}
body{font-size:12px;}
}
@media screen and (min-width:375px){
html{font-size:25px;}
body{font-size:12px;}
}
@media screen and (min-width:384px){
html{font-size:25.6px;}
body{font-size:14px;}
}
@media screen and (min-width:400px){
html{font-size:26.666666666666668px;}
body{font-size:14px;}
}
@media screen and (min-width:414px){
html{font-size:27.6px;}
body{font-size:14px;}
}
@media screen and (min-width:424px){
html{font-size:28.266666666666667px;}
body{font-size:14px;}
}
@media screen and (min-width:480px){
html{font-size:32px;}
body{font-size:15.36px;}
}
@media screen and (min-width:540px){
html{font-size:36px;}
body{font-size:17.28px;}
}
@media screen and (min-width:720px){
html{font-size:48px;}
body{font-size:23.04px;}
}
@media screen and (min-width:750px){
html{font-size:50px;}
body{font-size:24px;}
}
第五章 研究方向和展望
5.1 移動互聯APP開發
PHP不適合開發客戶端，因為PHP是服務端腳本語言，負責 B/S或C/S 架構的S部分，即：Server端的開發。API（Application Programming Interface，應用程序接口）架構，已經成為目前互聯網產品開發中常見的軟件架構模式，並且誕生很多專門API服務的公司，如：聚合數據。一般的PHP框架都可以用來做app後臺服務器。因為原理上客戶端從你這邊拿的都是字符串數據，所以就算你不用框架也沒有問題，不過會引發後續的問題。PHP提供API給客戶端就好了，API描述方式有很多種：REST、SOAP等等均可。因為PHP是腳本語言，主要用於服務端的開發，是負責完成 B/S架構 或 C/S架構 的S部分，但是PHP可不僅僅只能在互聯網站上發展，一個PHP for Android(PFA)站點表示他們將可以發佈編程模型、工具盒文檔讓PHP在Android上實現應用。利用PHP框架語言開發手機APP和WEB開發一樣，首先需要一些相關的參數，這些參數，都會由客戶端傳過來，也許是 GET 也許是 POST，這個需要開發團隊相互之間約定好，或者制定統一規範。其次有了參數，根據應用需求，完成數據處理，例如：任務進度更新、APP內購、一局遊戲結束數據提交等等。再次數據邏輯處理完之後，返回客戶端所需要用到的相關數據，例如：任務狀態、內購結果、玩家信息等等。例如數據怎麼返給客戶端？直接輸出的形式，如：JSON、XML、TEXT 等等。然後客戶端獲取到你返回的數據後，在客戶端本地和用戶進行交互。
php不能編寫 app應用程序，主要用於B/S結構（Browser/Server，瀏覽器/服務器模式）開發使用。但是php可以作為服務器與app應用交換數據服務端API.
學習APP現在流行的有三種手機平臺，android、IOS，windows。他們都各有各自的編程語言，具體可以在百度搜索下各自平臺製作學習。移動後臺都是 PHP、Python，Java都重，更別說C++了。用協議http ,tcp/ip。nodejs 可以把路由，form表單驗證 寫成c++的模塊， 主要是提供接口給移動端APP調用，可以從成本、服務器資源的佔用、開發效率、運行效率，後臺複雜邏輯處理的能力等。利用PHP框架開發手機APP需要考慮兩種可能：一個是如果需要即時通訊，也就是需要手機客戶端與服務端保持TCP長連接，服務端需要向客戶端推送數據的時候可以隨時通過這個長連接發送數據給客戶端，這樣便能做到客戶端與服務端及時通訊甚至客戶端與客戶端及時通訊。做到這需要PHP能維持很多客戶端連接，並且需要多進程支持，支持自己的通訊協議。這樣的應用傳統的nginx+php-fpm + 傳統的php框架是做不到的。如果是長連接即時通訊類的服務器框架推薦一看下workerman，它是就是一個php的socket服務器框架，非常適合做手機後臺服務器框架。另一個是如果不需要即時通訊的話，可以考慮直接走http協議，用nginx+php-fpm搭建一個webserver就好了，php框架可以採用thinkphp、yii等等，客戶端需要與服務器通訊的時候向服務端get/post一個請求就好。如果是比較簡單的手機APP，例如新聞客戶端這樣的不會涉及到長連接的服務，那麼可以考慮直接使用http協議。因為該協議幾乎被所有可以上網的設備支持，手機客戶端那邊也有大量相關的庫可以調用，省掉不少麻煩，其實確定了這三個：協議（HTTP）、數據表示方法（JSON）、請求數據的方法（REST）之後，基本上就可以開發一個簡單地服務端接口了（業務邏輯得自己琢磨），再加上手機客戶端那邊配套的設置搭起來，那麼就可以了。
5.2目前Wex5、phonegap的應用對APP開發的衝擊
目前面臨著技術方案選型，框架選擇wex5還是phoneGap哪個更好，兩者區別是wex5：源於國內自主研發起步公司的軟件，主要進行app，微信端的開發，目前而言針對android和ios的比較多，是基於HTML5、CSS3的開發，是通過圖形化界面調用組件設計UI，後臺用requireJS來進行代碼編寫，適用範圍中等水平，是一款快速開發工具。而phoneGap:源於國外Adobe公司，主要進行移動端開發，目前針對蘋果的iOS，谷歌的Android，RIM的Blackberry，惠普的WebOS，微軟的Windows Phone，塞班公司的Symbian以及三星的bada等，基於HTML5，CSS3和JavaScript的開發，適用範圍較廣，是一款快速開發平臺。前者wex5：知名度不高，主要因為是國人自己研發的，很多東西不太到位，bug相對較多，書籍幾乎沒有，除了官網的視頻及Pdf文檔外，幾乎沒有其他書籍。而phoneGap:有書，有視頻，通過搜索即可找到相關資料。但在開發過程中有限制，如果是為BlackBerry、webOS、Windows Phone 7、Symbian或Bada設備做開發，則有些功能就不支持(例如，在Windows Phone 7上，就不支持攝像頭、羅盤或存儲功能。老版的BlackBerry型號支持地理定位、通知以及網絡的可達性)。後者相對比較實用，適合用戶量大的。
5.3跨平臺網站、系統應用
跨平臺泛指程序語言、軟件或硬件設備可以在多種作業系統或不同硬件架構的電腦上運作。廣義而言，一般的計算語言都可做到跨平臺，開發商只需要提供各種平臺下的Runtime/中間件環境即可。嚴格而言是指用某種計算機語言編制的程序只需要做小量的修改，編譯之後即可在另外一種平臺下運行，此時並不提供Runtime/中間件環境。例如Java是一種提供Runtime環境的跨平臺解決方案，而C是一種標準且嚴格的跨平臺語言。
php開發的程序可以不經修改運行在,windows.linux,unix等多個操作系統上，
補充:舉例說windows系統的軟件不可以在linux上運行,linux系統的軟件不可以在windows上運行.但是php的解釋器有多個操作系統的多個版本,多的偶都叫不出來名字,凡是有解釋器的操作系統你寫的php程序就可以運行,不論你是在windows還是linux下寫的。目前市面上主流的跨平臺應用程序和UI開發框架：QT是諾基亞的開源跨平臺開發工具。主要用於嵌入式開發，MeeGo平板和MeeGo手機開發。MicroGUI是國人自行研發的跨WinCE、Windows Mobile、MTK、QT、Symbian、iPhone、Android、Brew MP等多款平臺的UI開發框架。該產品正在產品研發階段。預計年底前會上市。MiniGUI也是一款國產的GUI系統，主要用於低端嵌入式領域開發。移動領域的開發，目前面臨不同操作系統需不同開發語言，同一操作系統存在不同版本，同一版本存在不同機型等難題，給移動開發增加了很大難度。
在移動開發領域，跨平臺開發技術成為很多企業和開發者的首選，可以有效解決不同操作系統不同機型終端的開發難題，為企業節省時間成本和人員成本。目前國內外知名的跨平臺開發技術有：PhoneGap（美國）、Titanium（美國）、SenCha（美國）、AppCan（中國）。AppCan是國內首個基於HTML5技術的跨平臺移動應用開發平臺，實現一次開發、多平臺適配，支持iOS、Android、Symbian、Windows Phone四大智能平臺，可以有效降低開發門檻，減少開發週期。愛碼哥作為第三代移動中間件採用(xml和JavaScript)的開發方式並內置了開發框架,可以實現用Javascript、Java、.Net、php或htlm5當中的任何一套開發語言寫一套代碼就可以生成Android和iOS的兩個系統的原生app可以有效降低開發門檻，減少開發週期。
相關推薦
