blog.Ring.idv.tw

Articles

Smart App Banner

Smart App Banner是iOS6的新特色之一,它的功能主要是應用在當使用者瀏覽到某網頁時,在該網頁的上方會出現一個App介紹的橫幅版面,透過這樣的方式可以讓使用者方便快速的連結下載此App,而它的用法也相當簡單:

Smart App Banner

下述語法即呈現Angry Birds的Smart App Banner在某網頁中,主要的用法在於「app-id=343200656」,後面的數字換成你的App ID即可。

<meta name="apple-itunes-app" content="app-id=343200656">

P.S. 上述測試裝置使用iPad3/iOS6 beta1, 奇怪的是iPod Touch4/iOS6 beta1尚未支援。

Web Application Title

另外在iOS6也新增了此meta tag,它的作用在於當我們想要將某網頁「加入主畫面」時,基本上預設會採用網頁上的<title>文字內容,然而透過下述的簡單設定即可以區隔一般網頁的<title>和「加入主畫面」的title:

<meta name="apple-mobile-web-app-title" content="My App">

2012-06-19 08:46:01 | Add Comment

Web Application for iOS

隨著iOS6開始支援更多的HTML5 related APIs和相關規格,如:requestAnimationFrameWeb Audio APIWebSocket (RFC 6455),下述是一些針對iOS平台開發Web Application可參考的相關組態設定:

Viewport Meta Tag

Viewport組態設定可以說是Mobile Web Application最重要的設定之一,因為它是直接用來控制瀏覽器是如何呈現你的網頁內容:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

width=device-width: 表示用來適應各個不同裝置的寬度大小

initial-scale: 1.0 用以初始化的scale

maximum-scale: 1.0 由於初始化的scale為1.0,所以此行等同於讓使用者無法縮放

詳細的設定細節與圖文說明可參考:Configuring the Viewport

Full-Screen Mode

設定Web Application是否採用full-screen mode來運作

<meta name="apple-mobile-web-app-capable" content="yes" />

另一方面,開發者也可以使用JavaScript去取得「window.navigator.standalone」property來判斷目前是否運作在full-screen mode。

Status Bar Appearance

設定狀態列的樣式,分別有「default」、「block」和「black-translucent」可以使用,若採用full-screen mode運作可以採用「black-translucent」

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

Format Detection

由於Safari預設會自動偵測可能的電話格式字串並主動加入連結,所以下述設定可以將此功能關閉

<meta name="format-detection" content="telephone=no">

Webpage Icon for Web Clip

此設定為當Web Application加入主畫面螢幕之後,在螢幕上要呈現的圖示:

<!-- iPhone/iPod -->
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/>
<!-- iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/>
<!-- iPhone/iPod Retina -->
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/>
<!-- iPad Retina -->
<link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/>

Startup Image

Web Application啟動後要顯示的初始畫面,預設為320x460 (20px保留狀態列使用)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png">
<!-- iPad Landscape -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone Landscape Retina -->
<link rel="apple-touch-startup-image" sizes="960x600" href="img/splash-screen-960x600.png" /> 
<!-- iPhone Portrait Retina -->
<link rel="apple-touch-startup-image" sizes="600x960" href="img/splash-screen-600x960.png" /> 

Add to Home Screen

上圖是iPhone瀏覽Yahoo!行動版首頁所出現的「Add to Home Screen」提示,原本想說自己來寫一個好了~ 後來想想這東西應該有早已有人作出來了,找了一下發現網路上有位Matteo Spinelli作者開發了ADD TO HOME SCREEN元件,有興趣的話可以參考它的作法。

Cancelling Default Touchmove Event

防止使用者移動頁面,直接通知Browser不要執行預設的touchmove事件。

window.onload = function()
{
	document.addEventListener("touchmove", function(e){
		e.preventDefault();
	}, false);
}

參考資源

iPhone 4 Retina “apple-touch-startup-image” for Web-apps

Supported Meta Tags

Configuring Web Applications

2012-06-18 16:42:37 | Add Comment

~倒數百日~

上圖是二個月前去日本東京拍的櫻花~ 時間過的挺快地~

從今天開始倒數~ 離退伍剩下100天了,差不多可以開始打算下一步...

import java.util.Calendar;

public class Main
{
   public static void main(String[] args)
   {
       Calendar ec = Calendar.getInstance();
       ec.set(2012, Calendar.SEPTEMBER,11);
       Calendar bc = Calendar.getInstance();
       bc.set(2012, Calendar.JUNE,3);
       long t = ec.getTimeInMillis() - bc.getTimeInMillis();
       long days = t/60/60/1000/24;
       System.out.println(days);
   }
}
100

2012-06-03 12:43:02 | Comments (2)

探討requestAnimationFrame

(圖片來源:source)

#2012-06-12  iOS 6 開始支援requestAnimationFrame

理論上「requestAnimationFrame」函式是用來處理動畫更新較好的作法,但一般來說在Canvas上要控制動畫更新的方式,大多數常用的方法不外乎透過JavaScript函式「setInterval」或「setTimeout」,基本上透過這兩個函式去控制動畫更新並不會有啥大問題,但問題是這兩個函式本質上並不是為控制動畫更新所專門設計的,我們只是藉由「setInterval」和「setTimeout」的特性將它應用在動畫更新上,所以我們需要有一個新的作法,而它就是「requestAnimationFrame」函式。所以重點就在於,為何控制動畫更新需要有「requestAnimationFrame」函式來取代「setInterval」和「setTimeout」?

理由

1. 當瀏覽器的頁面是處於最小化,或是隱藏在分頁/背景中的狀態,此時瀏覽器可能仍在執行動畫更新的動作,如此便會浪費CPU資源(demo)。

2. 大多數客戶端的螢幕更新頻率多設為60Hz,意指為平均每間隔約「16.7ms」的時間會更新一次螢幕畫面,然而重點就在於我們並不曉得客戶端的螢幕更新頻率為多少?所以若欲透過「setInterval」或「setTimeout」函式來控制,我們也無法得知理想上的動畫更新間隔時間該設為多少?而此時就可以交由「requestAnimationFrame」函式來幫我們處理,以達到同步動畫更新和螢幕更新頻率。

「requestAnimationFrame」函式被規範在「Timing control for script-based animations」標準之下,該標準最初的Working Draft是在去年六月份由Web Performance Working Group所發佈的。

參考資源

IEBLOG: USING PC HARDWARE MORE EFFICIENTLY IN HTML5, PART 1

What the requestAnimationFrame API Should Have Looked Like

requestAnimationFrame API: now with sub-millisecond precision

2012-05-14 14:58:06 | Add Comment

目前的Web Audio API

#2012-06-12 update - iOS6支援Web Audio API

Web Audio API是一個提供你方便處理或合成聲音的JavaScript API,它是最近這一年內才逐漸開始發展的標準,主要負責推動此標準的是W3C Audio Working Group,該組識是在去年3月25日才成立的,根據他們預期的規劃來看~ 2011年第2季會發佈初步的工作草案(Working Draft),並預計在2012年第3季成為正式標準,不過直到去年2011年12月15日該組識才發佈初步的Web Audio API - Working Draft,談到這邊.. 那為何需要有此標準呢?HTML5不是已經定義好<audio>標籤了嗎?我想應該這麼說~ HTML5 <audio> Tag的主要目的是用於Media Playback,所以它允許你可以將聲音檔放在網路上,並透過瀏覽器直接播放而不需要仰賴其它的Plugin(如:Flash Player),但...如果我們想動態製造些混音或聲音特效時該怎麼處理?為何當初Angry Birds Chrome的聲音功能還需要仰賴Flash呢?而這也就是為何需要有Web Audio API存在的原因。

P.S. Angry Birds Chrome開發人員使用Web Audio API後的心得

玩玩看吧! 改一下下述程式你也能很快的做出一些混音或聲音特效。

var audioContext;
var audioBuffer;

window.addEventListener('load', init, false);
function init() 
{
	try 
	{
		audioContext = new webkitAudioContext();	
		loadSound("music.mp3");
	}	
	catch(e) {
		alert(e);
	}
}
function loadSound(url)
{
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = "arraybuffer";
	xhr.onload = function() 
	{
		audioContext.decodeAudioData(xhr.response, function(buffer) 
			{
				audioBuffer = buffer;
				playSound();
			}, function(e){alert(e);}
		);
	};
	xhr.send();
}
function playSound()
{
	var source = audioContext.createBufferSource();
	var gainNode = audioContext.createGainNode();
	var filter = audioContext.createBiquadFilter();
	source.connect(filter);
	source.buffer = audioBuffer;
	
	filter.connect(gainNode);
	filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
	filter.frequency.value = 500; // Set cutoff to 500 HZ
	
	gainNode.gain.value = 1.0;
	gainNode.connect(audioContext.destination);		
	source.noteOn(0);
}

相關資源

GETTING STARTED WITH WEB AUDIO API

DEVELOPING GAME AUDIO WITH THE WEB AUDIO API

2012-04-24 16:29:36 | Add Comment

Next Posts~:::~Previous Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment

::: 人氣指數 :::

今日人氣:60

累積人氣:3192862


::: 線上人數 :::

counter