HTML5+WebService

教育訓練

Why HTML5?

跨裝置：電腦、手機、平板、電視
強大的模組
- APIs：GPS,陀螺儀,NFC,相機...
- 媒體：音效,影片,圖形,動畫
- 可用性：支援所有語言
2014/10/28 W3C宣佈HTML 5標準制訂完成

最重要的是

跨平臺, 免安裝, 資訊滲透快

手機也能瀏覽這份簡報

http://ppt.cc/eT4V

HTML5 History

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

HTML5 ~= HTML + Javascript + CSS3

HTML5

HTML - 負責頁面內容 (內在)
CSS - 負責頁面樣式(外觀)
JAVASCRIPT - 負責頁面互動

What HTML5

語意和標記

HTML4

HTML5

新的輸入框

type="text"

type="number"

type="email"

type="tel"

離線與儲存

本地儲存

localStorage['abc'] = 123;
alert(localStorage['abc']);//123

永久儲存資料，不會像Cookie有Timeout問題
限制因瀏覽器而異：Chrome,Firefox 5MB;IE 10MB

離線瀏覽 (IE 10+)

<html manifest="cache.appcache">

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache();
    if (confirm('A new version of this site is available. Load it?')) {
      window.location.reload();
    }
  }
}, false);

CACHE MANIFEST
# version 1.0.0

CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

NETWORK:
*

cache.appcache:

http://ppt.cc/ZbHb

PJAX(Pushstatus and Ajax)

http://ppt.cc/MCSG

裝置存取

你的筆電正在看著你...

多媒體、繪圖、連結

CSS3

更多CSS3 DEMO：http://slides.html5rocks.com/#css3-title

<style>
/*全部的使用者都會載入這裡的 CSS。*/

@media screen and (min-width: 1200px) {
    /* 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。*/
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    /* 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。    */
}

@media screen and (max-width: 767px) {
    /* 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。   */ 
}

@media screen and (max-device-width: 480px) {
    /* 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。 */
}
</style>
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">

Can I use

讓IE認識HTML5新元素

<!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
<![endif]-->

<html>
    <head>
        <style>blah { color: red; }</style>
        <script>document.createElement("blah")</script>
    </head>
    <body>
        <blah>Hello!</blah>
    </body>
</html>

html5shiv.js

原理

Navite VS HTML5

我們以LINE來舉例

開發者表示哭哭...

比較

手機版網頁的兩種寫法

完全不同的網站結構
EX : 電腦版的faecbook : www.facebook.com
　　手機版的faecbook : m.facebook.com
RWD設計(自適應網頁設計)
EX : bootstrap : http://twitter.github.io/bootstrap/

什麼時候該 HTML5 ?

當使用者不需要下載你的APP。
當你的資訊內容更新很迅速。
你不想被Apple、google綁住時。

EX : 新聞網頁

什麼時候該 NATIVE ?

當你需要好的UX。
當你需要動到手機硬體功能時。

EX : 要用到藍芽的APP

桌面書籤

不用上架，直接將網頁加到桌面

IOS Safari：http://slides.com/gannasai/configuringwebapplications
Chrome：https://developer.chrome.com/multidevice/android/installtohomescreen

有個折衷的辦法...

HYBIRD(混合)

只需要維護一套程式碼，就能發佈到多個平台

運作原理 - TITANIUM

TITANIUM-大部份程式碼可共用

運作原理 - PHONEGAP

PHONEGAP

無邊框瀏覽器、將HTML包裝成APP、
提供API存取裝置功能

Web Service(REST API)

CRUD

Create　　　　　<<---->>
Read　　　　　　<<---->>
Upadte　　　　　<<---->>
Delete　　　　　<<---->>

Method

POST
GET
PUT
DELETE

HTTP Method

相容性

並不是所有瀏覽器都支援PUT跟DELETE

<input type="hidden" name="_method" value="PUT" />

資料格式

JSON(JavaScript Object Notation)
XML
HTML
CSV

JSON：目前主流：格式簡單,相容性高,可讀性高

PHP for JSON處理

<?php
//記得送檔案格式、編碼
header('Content-Type: application/json; charset=utf-8');
//允許跨網域
header('Access-Control-Allow-Origin: *');
$data = array(
　　　　'Contacts' => array(
　　　　　　　　array(
　　　　　　　　　　　　'FirstName'　=>　'lai',
　　　　　　　　　　　　'Name'　　　　=>　'jackai',
　　　　　　　　　　　　'age'　　　　　=>　18
　　　　　　　　),
　　　　　　　　array(
　　　　　　　　　　　　'FirstName'　=>　"</script><script>alert('hacked');//'",
　　　　　　　　　　　　'Name'　　　　=>　'def',
　　　　　　　　　　　　'age'　　　　　=>　15
　　　　　　　　)
　　　　)
);

//編碼輸出，轉換特殊字元成16進制
echo json_encode( $data ,JSON_HEX_TAG);

//{"Contacts":[{"FirstName":"lai","Name":"jackai","age":18},{"FirstName":"\u003C\/script\u003E\u003Cscript\u003Ealert('hacked');\/\/'","Name":"def","age":15}]}

Javascript

PHP

複雜資料結構處理方法：先包成JSON

var object = {"key":"value","array":[1,2,3]};
$.ajax({
　url:"xxxx",
　data:{
　　"object":JSON.stringify(object)
　},
　onSuccess: function(data){
　
　},
　error: function(data){
　
　}
});

<?php
$obj = json_decode($_POST["object"]);

API URL Define

http://example.com/API/Module/Method/

方式1

/API/Message/Add
/API/Message/List
/API/Message/Update
/API/Message/Delete

方式2

/API/Message/Add
/API/Message/List/sort/asc
/API/Message/Update/1234
/API/Message/Delete

方式1 會比較簡單，不用記住多種格式

INPUT

OUTPUT

var object = {
　title : "this is a title",
　data : "<div>xxxx</div>"
　user_id : 123
};

{
　id : 1000,
　title : "this is a title",
　data : "<div>xxxx</div>"
　user_id : 123,
　code : "success"
};

http://example.com/API/Message/Add

INPUT

OUTPUT

var object = {
　id:1000
};

{
　id : 1000,
　title : "this is a title",
　data : "<div>xxxx</div>"
　user_id : 123,
　code : "success"
};

http://example.com/API/Message/Read

INPUT

OUTPUT

var object = {
　q : "查詢字串"
};

{
　datas : [
　　{
　　　"id" : 1000,
　　　"title" : "xxxxxxxx"
　　},
　　{
　　　"id" : 1001,
　　　"title" : "xxxxxxxx"
　　}
　]
　code : "success"
};

http://example.com/API/Message/Search

INPUT

OUTPUT

var object = {
　id : 1000,
　title : "this is a title",
　data : "<div>xxxx</div>"
　user_id : 123
};

{
　id : 1000,
　title : "this is a title",
　data : "<div>xxxx</div>"
　user_id : 123,
　code : "success"
};

http://example.com/API/Message/Update

INPUT

OUTPUT

var object = {
　ids : [1000,1001,1002],
　user_id : 123
};

{
　id : 1000,
　code : "success"
};

http://example.com/API/Message/Delete

API大改版？

http://example.com/v1/API/Message/Add

透過 mod_rewrite去實現

Web Service

(REST API)實做範例

準備工作

HTTP Server (需有URL Rewrite模組)
支援Javascript的瀏覽器

Rewrite模組設定

RewriteEngine on
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule /?(.*) index.php?action=$1 [L,QSA]

.htaccess

如果是用IIS應該會是在web.config檔內設定

HTML

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="button" onclick="ajax_data();" value="查詢資料" />
    <table id="data_output" border="1">
        <thead>
            <tr>
                <th>英文名字</th>
                <th>中文名字</th>
                <th>性別</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

Javascript

function ajax_data(){
  $.ajax({
      url:'/user/list',
      data:{
          "data":$("#data_input").val()
      },
      type:"POST",
      dataType:"json",
      success: function(data){
          console.log(data);
          $("#data_output tbody").html('');
          for(var i in data.items){
              var html = '<tr><td>' + data.items[i].eng_name + '</td>';
                  html += '<td>' + data.items[i].chinese_name + '</td>';
                  html += '<td>' + data.items[i].sex + '</td></tr>';
	      $("#data_output tbody").append(html);
	  }
      }
  });
}

PHP

<?php
$data = array();

if(isset($_GET['action']))
switch ($_GET['action']) {
	case 'user/list':
		$data = get_user_list();
		# code...
		break;
	
	default:
		# code...
		break;
}

//送檔案格式、編碼
header('Content-Type: application/json; charset=utf-8');
//允許跨網域
header('Access-Control-Allow-Origin: *');
//編碼輸出，轉換特殊字元成16進制
echo json_encode( $data ,JSON_HEX_TAG);

PHP#2

<?php
function get_user_list(){
	return array(
	    'items' => array(
	        array(
	            'eng_name' => 'Jack',
	            'chinese_name' => '捷克',
	            'sex' => '男'
	        ),
	        array(
	            'eng_name' => 'Rose',
	            'chinese_name' => '羅絲',
	            'sex' => '女'
	        )
	    ),
	    'code' => 'success'
	);
}

HTML5+WebService

教育訓練

Why HTML5?

最重要的是

跨平臺, 免安裝, 資訊滲透快

手機也能瀏覽這份簡報

HTML5 History

HTML5

What HTML5

語意和標記

更多有意義的元素

HTML4

HTML5

新的輸入框

離線與儲存

本地儲存

離線瀏覽 (IE 10+)

PJAX(Pushstatus and Ajax)

裝置存取

多媒體、繪圖、連結

CSS3

Can I use

讓IE認識HTML5新元素

Navite VS HTML5

我們以LINE來舉例

開發者表示哭哭...

比較

手機版網頁的兩種寫法

什麼時候該 HTML5 ?

什麼時候該 NATIVE ?

桌面書籤

不用上架，直接將網頁加到桌面

有個折衷的辦法...

HYBIRD(混合)

運作原理 - TITANIUM

TITANIUM-大部份程式碼可共用

運作原理 - PHONEGAP

PHONEGAP

Web Service(REST API)

CRUD

Method

相容性

並不是所有瀏覽器都支援PUT跟DELETE

資料格式

PHP for JSON處理

Javascript

PHP

API URL Define

方式1

方式2

INPUT

OUTPUT

INPUT

OUTPUT

INPUT

OUTPUT

INPUT

OUTPUT

INPUT

OUTPUT

API大改版？

http://example.com/v1/API/Message/Add

Web Service

(REST API)實做範例

準備工作

Rewrite模組設定

HTML

Javascript

PHP

PHP#2

Thanks

Q & A

HTML5+WebService教育訓練

More from jackai