Posts Tagged ‘HTML’

HTML5學習筆記

Wednesday, November 24th, 2010

以下內容是根據讀完”Professional JavaScript for Web Developers 2nd Edition“這本書的心得而來。

持續更新中…

querySelector() & querySelectorAll()
提供像CSS selector一般的方式來取得element物件,jQuery framework已經改以這兩個method來實作取得element的方法。速度上比自己用JavaScript去寫一個CSS selector parser快很多。

// get first element with a class of 'selected'
var elm = document.querySelector('.selected');

// get all <strong> elements inside of <p> elements
var elmList = document.querySelectorAll('p strong');
classList property
存在於element,可用來對element做class屬性的操作。有add, remove, has, toggle四個methods。
// add 'selected' class name
elm.classList.add('selected');

// remove 'selected' class name
elm.classList.remove('selected');

// check the element has 'selected' class name?
if( elm.classList.has('selected') ) {
    // do something...
}

// switch the 'selected' class name on target element when user click trigger button (if target element has the class name then remove it, otherwise, add it)
$('triggerBtn').click(function() {
    elm.classList.toggle('selected');
});
postMessage()
可用來做Cross-Document(iframe)之間的溝通。在HTML4,兩個不同的document之間是完全無法做溝通的。而HTML5提供了這個比較安全的做法,來達到資料交換的目的。來源document可以call這個method代入要傳送的資料及來源domain、port資訊等等。而接收方document會收到一個”message” event,可根據來源資訊來決定。

<iframe id="inner_page" src="http://test.domain/inner.html"></iframe>
// in main page
var innerWin = document.getElementById('inner_page').contentWindow;

// send a message, parameters: data, origin
innerWin.postMessage('Thank you!', 'http://test.doamin');
// in inner.html
EventUtil.addHandler(document, 'message', function(event) {
    if( event.origin.indexOf('test.domain') >= 0 ) {
        // display the data
        alert(event.data);

        // send a message back
        event.source.postMessage('You are welcome!', 'http://test.domain');
    }
});
<video> & <audio>
用來做影片、音樂的播放。提供許多property及event可對影片及音樂播放做細微控制。

<!-- embed a video -->
<video src="movie.mpg" id="myVideo">Video player not available</video>

<!-- embed a audio -->
<audio src="song.mp3" id="myAudio">Audio player not available</audio>
<canvas>
可用來在Web Page上繪圖,包括fillRect, lineTo, fillText, drawImage…etc.等。目前除了IE外,其他Browser均有支援。詳見這裡
offline & online event
HTML5新增了offline和online兩個event,可以用來偵測目前的網路連線狀態,而對使用者做不同的UI回應。開發者可以access navigator.online這個boolean值用來做判斷,true代表連線中,false代表連線失敗。

EventUtil.addHandler(window, 'offline', function() {
    // some codes to handle offline status
});

EventUtil.addHandler(window, 'online', function() {
    // some codes to handle online status
});

// make different response by online stauts when user click a trigger button
$('triggerBtn').click(function() {
    if( navigator.online ) {
        // do something...
    } else {
        alert('The connection is lost, please check your network status.');
    }
});
pushState()
這個method可以讓一個AJAX Web Application在某一個時間點塞入一個state object到history queue裡,讓使用者也可以按Back返回鍵回到上一步的狀態。

// add state to history stack
history.pushState({mode: 'edit'}, 'Editing');

// listen for a chance in state
EventUtil.addHandler(window, 'popstate', function(event) {
    var state = event.state;

    if( mode == 'edit' ) {
        // restore page to 'edit' state
    }
});
Database Storage
HTML5提供了client端的database空間讓JavaScript code可自由存取使用,Web App因此可以做出更接近OS Native App般更豐富的功能。

// create database
var db = window.openDatabase('TestDB', '1.0', 'My Test Database', 200000);
// create table
db.transcation(function(tract) {
    var queryStr = 'CREATE TABLE Messages (id REAL UNIQUE, msg TEXT)';
    // parameters: query string, query parameter, success callback, fail callback
    tract.executeSql(queryStr, [],
        function(tract, results) {
            // table create successfully, do something...
        }, function(tract, error) {
            // table create failed, do something...
        }
    );
});
// query data
db.transcation(function(tract) {
    var queryStr = 'SELECT id, msg FROM Messages WHERE id=? and msg=?';
    // parameters: query string, query parameter, success callback, fail callback
    tract.executeSql(queryStr, [queryId, queryMsg],
        function(tract, results) {
            for( var i=0; i<results.rows.length; i++ ) {
                var row = results.rows.item(i);
                alert(row.id + '=' + row.msg);
            }
        }, function(tract, error) {
            alert('the query cannot be done!');
        }
    );
});
Drag & Drop
HTML5提供預設的drag and drop UI支援,所有的element均有一個draggable屬性來決定是否可被拖曳。而image, text和link這三種element的預設draggable值為true,其他為false,也可以手動去更改這個屬性值。而要被drop的element可以去監聽event: dragenter, dragover, dragleave, drop。也可以設定或取得event裡的dataTransfer object資料,和指定其dropEffect及effectAllowed兩個屬性。
var dropElm = document.getElementById('my_drop_panel');

// listen dragenter
EventUtil.addHandler(dropElm, 'dragenter', function(event) {
    // do something...
});
WebSocket
可以在Browser和Server之間打開一條Socket通道,做即時的資料傳輸。用以取代類似像Comet的技術。某些應用如: WebIM, 即時股票指數更新…等,就可以改用這個方式來實現。

// create socket connection
var socket = new WebSocket('ws://test.domain/connect/');

// listen connection status as opened
socket.onopen = function(event) {
    alert('Connection is ready');
};

// listen connection status as closed
socket .onclose = function(event) {
    alert('Connection is closed');
};

// receive data from server
socket.onmessage = function() {
    var data = event.data;
    // do something...
};

// send data to server
socket.send('fp=1');

Web Page裡的三個維度

Monday, August 30th, 2010


看完這段介紹”什麼是Front-end Engineer及其重要性”的影片後,裡面有講到一些Web Page設計上的重點,在此記錄一下以免忘記。


Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

一般的Web Page都會包含HTML, CSS, JavaScript三個部份。彼此之間有些角色定位模糊的地方,究竟該怎麼切分工呢? 請看以下定義:

HTML – what

定義頁面的內容(Content)。Developer應該要避免使用過多的div或span,取而代之的,應該使用更有意義的tag去包裝。而一個好的設計,應該儘量避免在HTML裡寫JavaScript或CSS style的code,降低藕合度,可以增加程式的可維護性(maintainability)。

不好的寫法範例:
<a href=”test.html” onclick=”javascript:onClick(this);”>

上面這段code可以改用JavaScript動態綁定element event handler來達成

CSS – how

決定頁面文容該如何呈現(Appearance)。在不同Browser的呈現結果可能會相差很多,因此,Developer一定要在欲支援的Browser平台上實際測試過。通常IE系列的Browser會跟其它(Firefox, Chrome, Safari, Opera…etc.)差很多… :evil:

JavaScript – why

定義頁面的行為(Behavior)。例用動態綁定event去處理各種element UI行為,並且使用物件導向的設計,使程式碼更好維護與修改。儘量避免在JavaScript code裡去寫HTML或CSS Style的code,降低藕合度,可以增加程式的可維護性(maintainability)。有關物件導向的JavaScript設計,可以參考這幾篇:
http://msdn.microsoft.com/zh-tw/magazine/cc163419.aspx
http://fstoke.me/blog/?page_id=1610

HTML標準中不常用但對SEO有用的語法

Monday, August 30th, 2010

別人傳給我看的,覺得不錯把它記起來…

  1. h1的合理使用,<h1>到<h6>表示標題的6個級別-重要性從高到低,如果在設計網頁過程中,你覺得他的默認外觀不好看,可以通過css輕鬆設置你想要的樣式。依照W3C的規定,標題跳級不是好的做法,因為h1-h6就像是一個大綱,要保持各個級別的連貫順序。
  2. <table>裡面不常用的一些標籤:<caption>表格的標題,<table summary=”摘要”>表格摘要,<th>表頭,<td headers=”">表頭與數據的關係,< th abbr=”">改變語音合成器讀出的內容,<thead>表頭,<tfoot>表腳,<tbody>表體。
  3. 表格並非結構,在某些用途上是不可替代的,所以請不要絞盡腦汁用div代替table。
  4. <blockquote>表示引用文本,當引用外界文字時,盡量用該標記
  5. <lable>標籤標記,用來標註表單控件
  6. <dl><dt>來定義列表,在構建提交表單時,可以用該語法來代替<p>或者<table>等
  7. <input tabindex=1>讓用戶使用鍵盤來移動表單控件的當前焦點
  8. <lable for=”name” accesskey=”9″>Name:</lable><input type=”text” id=”name” name=”name”>用戶可以用Ctrl或者Alt鍵加上我們在代碼中設置的9鍵,來切換焦點到這個輸入框內。
  9. 在<form>中用<fieldset>將表單內容分組,當加上描述符<legend>之後,大多數瀏覽器上,都會在所分組的控件外圍顯示一條邊框。
  10. <strong>和<em>比<b>和<i>要好,因為前兩者是表達意義,而後兩者是表達外觀。em表示強調,strong表示更加強調。
  11. W3C 在Html4.01規範中還定義了下列短語元素:
    <cite>包含引用信息或者對其他來源的參考說明;
    <dfn>表示所包含的是術語的定義。
    <code>指名一段計算機程序代碼。
    <samp>指明一段程序或者腳本等的輸出。
    <kdb>表示由用戶輸入的文本。
    <var>表示一個變量或者程序參數的實例。
    <abbr>表示一種簡寫形式,例如 WWW。
    <acronym>表示只取首字母的縮寫形式,例如WAC。
  12. 更好的錨點方法
    <p><a href=”#oranges”>關於桔子</a></p>
    … 文字 …
    <a id=”oranges” name=”oranges”>桔子很可口</a>
    … 更多的文字 …
  13. 給錨點加上title屬性可以為這個鏈接所指向的目標提供豐富和明確的描述信息。
  14. 更多的列表,無序的列表使用<ul><li>,有序的列表使用<ol><li>,定義列表使用<dl><dt>(詞條)<dd>(解釋),你可以通過css中的list-style-type來改變它們的樣式,甚至做到自定義,decimal數字型,upper-alpha大寫字母型,lower-alpha小寫字母型,upper-roman大寫羅馬數字,lower- roman小寫羅馬數字,none不顯示。

精簡HTML:使用class來定義樣式;使用css的#來定義樣式;去掉不必要的<div>