Jax 的工作紀錄

2010-01-27 02:34

將無名的備份檔匯入 Blogger

之前幫 fred 寫了一個搬家的格式轉換器
最近將標籤的解析加進去
原本想將留言的解析也加進去
但 Blogger 一直匯不進去
還出現了格式錯誤的問題
所以並沒有支援留言的轉換

這是用 JavaScript 寫出來的
為了增加效率
我將原本用正規標示式的解析方式
改成以 DOM 的方式解析
但很遺憾的捨棄 IE 的支援

格式轉換器：wretch_to_atom.html

2010-01-26 22:12

[JavaScript] 解析 XML 字串(IE / FF)

String.prototype.toXmlDom=function(){
    var dom=null;
    if (window.DOMParser){
        dom = (new DOMParser()).parseFromString(this, "text/xml");
    }else{
        dom=new ActiveXObject("microsoft.XMLDOM");
        dom.async=false;
        dom.loadXML(this);
    } 
    return dom;
}

xmlDom = xmlStr.toXmlDom();

我做了一些測試，在 Firefox 中就像一般的 DOM Element 一樣操作就可以了。

但在 IE 中所解析出來的 XML 是以 Object 的方式處理，只能使用 IE 所提供的方法操作，而且有些 tag node 會無法取得，如 <date>。

參考來源：
javascript读取xml(firefox与ie兼容)
XML DOM Parser

2009-12-22 14:40

HTML 與 CSS 觀念上的區別

HTML：在定義網頁的結構跟語意

h1：第一標題
h2：第二標題
p：段落
li：清單條目
em：強調
strong：更強調
blockquote：引言

CSS：在定義網頁的呈現樣式

color：文字顏色
text：文字
font：字體
margin：邊界距離
padding：內緣距離
background：背景底色

2009-12-21 15:11

Blogger 文章匯入的格式

Blogger 可以接受 Atom 的格式匯入
至於 RSS 的格式就要去找轉換器轉成 Atom 才可以匯入

以下是 Blogeer 匯入時的最簡化的格式


<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet 
    href="http://www.blogger.com/styles/atom.css" 
    type="text/css"?
>
<feed xmlns='http://www.w3.org/2005/Atom' 
    xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' 
    xmlns:georss='http://www.georss.org/georss'
>
  <id>tag:blogger.com,1999:blog-4</id>
  <generator version='7.00' uri='http://www.blogger.com'>Blogger</generator>

  <entry>
    <id>tag:blogger.com,1999:blog-4.post-2</id>
    <published>2009-12-19T23:39:20.281+08:00</published>
    <title type='text'>標題</title>
    <content type='html'>文章內容</content>
    <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
    <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
  </entry>

  <entry>
    <id>tag:blogger.com,1999:blog-4.post-2</id>
    <published>2009-12-19T23:39:20.281+08:00</published>
    <title type='text'>標題</title>
    <content type='html'>文章內容</content>
    <category scheme='http://www.blogger.com/atom/ns#' term='標籤1'/>
    <category scheme='http://www.blogger.com/atom/ns#' term='標籤2'/>
  </entry>

</feed>

generator：產生器識別，Blogger 只接受自己的標示
id：可以重複，但必須符合格式
published：發佈時間，格式為 ISO8601
title：文章標題
content：文章內文，可以允許換行符號"\n"，內文的 HTML 必須實體逸出
category：標籤

2009-12-18 16:50

之前在玩 Firefox 的外掛時，在 XUL 的定義中學到其他屬性設定，當中有些定義還蠻常用到的
如：empty, emptytext, max, min...等

這裡我只是要說明一個簡化開發的 solution，並沒有完整的應用規劃，為了瞭解這個 solution 可以先看看一個簡單的範例 html_extension.zip。

其實最近看到 HTML5 已經將很多常見的介面應用加入定義中，但還是可以將系統架構中常用的功能做成延伸屬性，在 HTML5 普及之前這是一個很好的 solution。

在之前的專案中，我做了一下的規劃：

element [延伸屬性]{所有元素共用}

removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}
pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}

input,textarea [延伸屬性]

emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}

form > tr [延伸樣式]

class="NotNull" {檢查區塊內的元素是否有選項值}

form > input [延伸屬性]

format="" {表單送出前的格式檢查,但不會檢查是否為空}

'tel':電話
'mobile':行動電話
'email':電子信箱
'url':網路連結

jtype="" {資料輸入時的輔助}
(基本格式輸入)

'uint':無符號整數
'int':整數
'float':浮點數
'id':帳號格式
'alnum':保留字母和数字及底線

(輔助日期輸入)

'date':選擇日期
'start_date':選擇起始日期
'end_date':選擇結束日期

(輔助時間輸入)

'time':選擇時間
'start_time':選擇起始時間
'end_time':選擇結束時間

在下面的 HTML 中可以看到程式碼都便得很簡單


<!--動態效果-->
<div pulsate="4">4秒閃爍</div>
<div removeDelay="10">10秒後消失</div>
<div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div>


<!--表單-->
<form class="FormWidget" method="post" action="">
<table class="FormList" border="0">
  <caption>輸入限制</caption>

  <tr class="NotNull">
    <th><label for="data_1">無符號整數 :</label></th>
    <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_2">整數 :</label></th>
    <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_3">浮點數 :</label></th>
    <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td>
  </tr>
   
  <tr>
    <th><label for="data_4">帳號格式 :</label></th>
    <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_5">英數及底線 :</label></th>
    <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>時間 & 日期</caption>

  <tr>
    <th><label for="data_6">日期 :</label></th>
    <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td>
  </tr>

  <tr>
    <th><label>日期區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label>
        -
        <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label>
      </div>
    </td>
  </tr>
    
  <tr>
    <th><label for="data_7">時間 :</label></th>
    <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td>
  </tr>
    
  <tr>
    <th><label>時間區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label>
        -
        <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label>
      </div>
    </td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>格式檢查</caption>

  <tr>
    <th><label for="data_8">電話格式 :</label></th>
    <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td>
  </tr>
        
  <tr class="NotNull">
    <th><label for="data_9">行動電話格式 :</label></th>
    <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td>
  </tr>
            
  <tr class="NotNull">
    <th><label for="data_10">E-mail 格式 :</label></th>
    <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td>
  </tr>
                                
  <tr>
    <th><label for="data_11">連結格式 :</label></th>
    <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td>
  </tr>
</table>

<div class="Buttons">
  <input type="submit" class="Button" value="儲存"/>
</div>
</form>

2009-11-26 21:55

在 Prologic 設計的系統架構

2009-11-25 16:00

[PHP] 取得 Google Analytics 的統計資料

這裡我使用GAPI(google-analytics-php-interface)這個工具來取得 Google Analytics 的統計資料

如果不想使用這個工具取得資料，Google Analytics 也有 Protocol 的連接教學 Data Export API - Protocol

在取得資料的過程中，我在一個觀念上問題花了不少時間，主要是下面這兩個參數上的設定：

dimensions : 特性類似 SQL 的 GROUP BY
metrics : 類似 SQL SELECT 的資料欄位

其他的資料欄位：Dimensions & Metrics Reference

工具的連結範例：

<?php
require_once('gapi.class.php');

/*建立與帳戶的連結*/
$ga = new gapi('email@yourdomain.com','password');


/*取得統計報告*/
$ga->requestReportData(
    145141242,
    array('browser','browserVersion'),
    array('pageviews','visits')
);

foreach($ga->getResults() as $result){
    echo $result;
    echo 'Pageviews:',$result->getPageviews();
    echo 'Visits:',$result->getVisits();
}

echo 'Total pageviews:',$ga->getPageviews(); 
echo 'total visits:',$ga->getVisits();

函數的參數說明：

<?php
requestReportData(
    $report_id,
    $dimensions,
    $metrics,
    $sort_metric=null,
    $filter=null,
    $start_date=null,
    $end_date=null,
    $start_index=1,
    $max_results=30
)

屬性	型態	描述	範例
$report_id	String	統計報告的ID	1892302
$dimensions	Array	尺寸欄位，類似 SQL 的群組	array('browser')
$metrics	Array	結果欄位，類似 SQL 的顯示欄位	array('pageviews')
$sort_metric	Array(選擇性)	資料排序依據，"visits" 為 ASC，"-visits" 為 DESC	array('-visits')
$filter	String(選擇性)	過濾的邏輯條件
$start_date	String(選擇性)	報告的起始時間'YYYY-MM-DD'	'2009-04-30'
$end_date	String(選擇性)	報告的起始時間'YYYY-MM-DD'	'2009-06-30'
$start_index	Int(選擇性)	資料的起始指標	1
$max_results	Int(選擇性)	資料的起始指標.最大 1000 筆	30