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來舉例

開發者表示哭哭...

比較

手機版網頁的兩種寫法

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

什麼時候該 HTML5 ?

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

 

EX : 新聞網頁

什麼時候該 NATIVE ?

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


EX : 要用到藍芽的APP

桌面書籤

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

 

有個折衷的辦法...

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'
	);
}

Thanks

Q & A

Made with Slides.com