Articles

上圖是HTML的Parsing Model，從圖中來看較值得注意的即為「Tree Construction」至「Script Execution」這一段，這段的意思是當HTML Parser在剖析HTML syntax並建構DOM (Document Object Model)的時候，若遇到「<script>」時會先暫停手邊的工作，等待執行完該Script之後再繼續Parsing，但是若遇到「<script src="external.js"></script>」時，它則需要等待下載該Script檔案完成後並執行該Script。

根據上述的HTML Parsing Model，我們就不難知道為何有些網頁總是會出現部份內容(或空白)，然後可能需要等待一些時間後才會完整呈現，這時候除了調整Script的位置之外，我們還有更好的方式，那就是藉由Script element的「async」或「defer」屬性來加以改善。

Normal execution

<script src="external.js"></script>

這是一般常見的用法，但大多數的時候其實我們並不需要採用此同步的方式來執行

P.S. 一般的內嵌外部廣告仍需要採用此方式，因為它需要同步對DOM進行一些操作，如：document.write()。

Deffered execution

<script defer src="external.js"></script>

採用「defer」的作法，HTML Parser仍會持續進行剖析並建構DOM，但會在背景同時下載external.js，待檔案下載完成且DOM也建構完成之後，按照Script的先後順序依序執行，並發生在DOMContentLoaded事件執行之前，。

Asynchronous execution

<script async src="external.js"></script>

採用「async」的作法和「defer」有點類似，兩者皆不會影響到HTML Parser的進行，但兩者最大的差別在於「async」並不保證Script的執行順序，而是採用先下載完成就先執行的模式，並發生在window's load event執行之前。

參考資源

‧Running scripts in WebKit

‧Asynchronous and deferred JavaScript execution explained

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">

隨著iOS6開始支援更多的HTML5 related APIs和相關規格，如：requestAnimationFrame、Web Audio API和WebSocket (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

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

從今天開始倒數~ 離退伍剩下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

(圖片來源：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