CSS 部屬經驗-圖文列表樣式

樣式



HTML 結構

<ul class="Img2HList ClearIt">
  <li class="List Odd">
    <div class="Container">
      <strong class="Title">
        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
      </strong>
      
      <!--其他相關資訊-->
      <p class="Info">描述文字</p>
      <div class="Meta">文字</div>
      <blockquote>文字</blockquote>
    </div>
  </li>
  <li class="List">
    <div class="Container">
      <strong class="Title">
        <a><span class="Image"><img src="圖片網址" /></span>標題文字</a>
      </strong>
      
      <!--其他相關資訊-->
      <p class="Info">描述文字</p>
      <div class="Meta">文字</div>
      <blockquote>文字</blockquote>
    </div>
  </li>
</ul>

CSS 設定

ul.Img2HList {
    margin: 1em 0;
    overflow: hidden;
}
ul.Img2HList li.List {
 position:relative;
    display: block;
    float: left;
    width: 49%;
    margin: 0 0 30px 0;
    font-size: 11px;
}
ul.Img2HList .Container {
    padding: 0 0 0 79px;
}
ul.Img2HList li.Odd {
    clear: left;
}
ul.Img2HList li.Odd .Container{
    margin-right: 30px;
}
ul.Img2HList strong.Title {
    display: block;
 font-size:1.1em;
    border-bottom: 1px solid #ccc;
}
ul.Img2HList strong.Title span.Image {
    float: left;
    margin: 0 0 0 -79px;
    cursor: pointer;
}

參考頁面：
Last.fm
Wacanai.com

HTML 與 CSS 觀念上的區別

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

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

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

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

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：標籤
  

[HTML] 規劃延生屬性

之前在玩 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>

在 Prologic 設計的系統架構

[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

今天終於見識到了

今天去一家公司面試
見到一個令我驚訝的事

那就是用 JavaScript 寫 application
整個架構都是 Object-Oriented
光這點還不足已驚訝
架構上幾乎是跟 Java 的 Swing 差不多
所有的 HTML 都是 Object 再控制
整體的顯示效果跟 flash 差不多
真是給他妙的說

不過聽 engineer 說有一個嚴重問題
就是 memory 會用掉 500 Mbyte
engineer 是想利用回收 Object 的方式來減少 memory 的用量
但至於要如何減少 memory 的用量
還真是個大問題

雖然方法很多
但要不影響當前的架構去處理
能用的方法就很有限了

[PHP] 利用檔案作資料快取

當沒辦法架設好用的快取機制時
又想利用快取的方式降低 DB 負荷時
不妨使用檔案的方式處理

這裡使用 serialize() 這個函數將變數轉成字串
然後存到文件裡做快取存放
這個函數跟 $_SEEION 用的是一樣的函數

<?php
class Cache { 
    private static $_savePath = '.';
    private static $_cached = true;

    /**初始化
     * @param string $savePath 暫存檔的存放路徑
     * @param bool $cached 是否啟用暫存，這個設定可以快速關閉所有暫存的使用
     */
    public static function start($savePath='.', $cached=true ) {
        self::$_savePath = $savePath.'/';
        self::$_cached = (bool)$cached;
    }
    
    
    /**取得暫存資料
     * @param string $index 暫存檔的名稱
     * @return var 所暫存的資料，當暫存不存在時回傳 null
     */
    public static function load($index) {
        if(!self::$_cached){ return null; }
        
        $filePath = self::$_savePath.$index.'.cache';
        if(file_exists($filePath)){
            $value = file_get_contents($filePath);
            return unserialize($value);        
        
        }else{
            return null; 
        }
    }


    /**儲存暫存資料
     * @param string $index 暫存檔的名稱
     * @param var $value 需要暫存的資料
     */
    public static function save($index, $value) {
        $filePath = self::$_savePath.$index.'.cache';
        $value = serialize($value);

        try {
            file_put_contents($filePath ,$value);
        } catch (Exception $e) {
            /*檔案讀取失敗*/
            throw $e;
        }
    }
    
    /**清除暫存資料
     * @param string $index 暫存檔的名稱，當設定為 null 時清除所有 Cache
     */
    public static function remove($index=null) {
        /*清除所有 Cache*/
        if($index===null){
            $dir = opendir(self::$_savePath);
            while (false !== ($fileName = readdir($dir))) {
                if(strpos($fileName,'.cache')===false) {
                    continue;
                }elseif(file_exists($filePath = self::$_savePath.$fileName)){
                    unlink($filePath);
                }
            }
            closedir($dir);
        
        
        /*清除指定 Cache*/
        }elseif(file_exists($filePath = self::$_savePath.$index.'.cache')){
                unlink($filePath);
        }
    }
}

使用範例：

<?php
/**(初始化)變數快取類別，設定存放的目錄*/ 
Cache::start('/www/cache');


if(!$sysSetting = Cache::load('sysSetting')){
    /*取得資料*/
    $sysSetting = $dbAdapter->query("
        SELECT `Group`, `Name`, `Value` 
        FROM `system_setting`
    ")->fetchAll();
    
        
    /*快取資料*/
    Cache::save('sysSetting', $sysSetting);
}