一些平鋪直敘技術相關文: 6月 2012

2012年6月29日星期五

note:array_fill()

fill 就是填滿的意思

array_fill( 開始鍵值，次數，'填滿內容' );

比方說:

<?php
$a = array_fill(3,10,'canon');
print_r($a);
?>

這個$a就會從第3個鍵值(包含3)開始往後數10次的鍵值內容都是填滿canon
顯示結果 :

那如果是 :

<?php
$a = array_fill(1,4,'nikon');
print_r($a);
?>

這個$a就會從鍵值1(包含1)開始往後數4次鍵值都是填滿nikon
顯示結果 :

注意 : array_fill( 開始鍵值，次數，'填滿內容' );
次數不得填入0
否則出現錯誤

<?php
$a = array_fill(1,0,'nikon');
print_r($a);
?>

note:array_chunk()

這是array_chunk()的筆記
所謂chunk，中文解釋就是區塊
所以array_chunk()，顧名思義就是類似將array分成好幾個區塊

ex:

//array_chunk將陣列分割成多個陣列 陣列單元數目由size決定

//簡單來說就是將全班的名單放到一個array，size可以決定幾個人分成一組

$testarray = array('a0971501','a0971502','a0971503','a0971504','a0971505');

print_r(array_chunk($testarray,2));
//顯示結果會變成01跟02一組 03跟04一組 05自己一組

更多內容請參考:
http://por.tw/Website_Design/PHP5/function.array-chunk.html

2012年6月28日星期四

2012年6月20日星期三

此篇文章引用自 :
三木聊網頁前端設計 - 網頁前端設計師的等級表
看了一下，我大概只有.... 3顆吧...好low~
害我好緊張開始研究一下css framework..

一顆星：

1、網頁佈局為TABLE+CSS，僅以頁面排版順利為考量，沒有考慮程式套版邏輯，且沒有下注解供程式設計師參考。
2、CSS都寫在HTML的局部元素裡面。
3、過度依賴網頁編輯軟體，導致對於HTML語法一知半解。
4、Javascript是什麼？能吃嗎？
5、不曉得圖片格式的差異與使用時機(jpg、gif、png)。
6、相容瀏覽器僅符合單一瀏覽器。

二顆星

1、網頁佈局為TABLE+CSS，TABLE的數量也變得較少，且有和程式設計師合作經驗。
2、CSS寫在HTML裡的head的style標籤裡面。
3、對於HTML已有一定的認知，並了解H1、2、3標題、ul li序列等等的實際運用。
4、了解Javascript是網頁腳本的一種，且會用網頁編輯器的內建程式碼來做圖片變換與上網查詢小程式(線上流量、跑馬燈、禁右鍵)後，將功能程式碼貼到自己的網頁裡。
5、了解什麼時候該使用gif、png等透明背景的圖片，且會用圖片處理軟體來將圖片大小壓到最低但畫面仍不失真。
6、可相容大部分的瀏覽器，但不曉得該如何針對各瀏覽器來做細微的調整。

三顆星

1、網頁佈局為DIV+CSS，但對於清除浮動、DIV定位、某些特定瀏覽器的常見BUG仍處於似懂非懂的理解狀態。
2、了解該如何由外部匯入CSS來修改，而不是寫在HTML裡面。但對於該如何優化縮減自己的CSS數量仍還在逐步學習的階段。
3、在HTML上已有相當的水平，可藉由CSS來讓HTML元素擁有更多變化。
4、已些微看得懂Javascript碼，了解基本的dom操作。
5、因了解css 的background的語法操作，故在切圖時，了解哪些圖片可使用重覆背景來呈現畫面。
6、會使用css hack來解決特定瀏覽器的bug，且逐步學習該如何排版才能夠避免寫過多的css hack。

四顆星

1、網頁佈局為DIV+CSS，對於BOX概念、清除浮動、各瀏覽器常見bug等等擁有相當的水準。
2、了解該如何將css優化，在其排列與註解的整理上已相當成熟。並至少懂得一個以上的css framework的概念(960 Grid、Blueprint)。
3、了解該如何使用最少的HTML+CSS碼來達成畫面的需求。
4、至少懂得一個以上的Javascript framework的概念，並達成前端動態操作的網頁需求。 (yui、jquery)。
5、了解Css sprites的概念，降低Http圖片請求數量。
6、除了常見IE與Firefox瀏覽器外，對於其他台灣市佔率偏低的瀏覽器也可相容(google、safari、opera)，且開始逐步學習其他前端裝置的CSS相容。例：mobile、pda。

五顆星

1、網頁佈局為DIV+CSS，擁有自身經驗培養出來的framework概念流程，以增進其開發效率。
2、CSS架構語義完善，(X)HTML+CSS可通過W3C標準。
3、了解該如何架構自己的HTML，才可在SEO網頁排名更加優化。
4、可降低Javascript數量，並視專案開發撰寫相關代碼。

利用ThemeRoller改變你行動裝置的外觀

截圖自 : http://jquerymobile.com/
*利用ThemeRoller改變你行動裝置的外觀，其實我也不曉得為甚麼標題會這樣打，只是上去google翻譯了一下，Theme Roller的功能就是希望讓您打造屬於看起更有區別性的手機網頁，而不是像一般所看到那種標準版的風格，他可以透過有點像應用程式的方式，你去套用你想要套用哪個區塊的顏色，(可以改變色相跟飽和度)，然後匯出成zip檔，
zip檔包含一個index.html : 介紹你如何將匯出的css檔加到自己的網頁裡，還有一個themes資料夾，包含2個css檔，一個是min過的，一個是一般的。

可以看一下他的英文介紹:

We believe that your web site or app should feel like your brand, not any particular OS. To make building highly customized themes easy, we've created ThemeRoller for Mobile to make it easy to drag and drop colors and download a custom theme. For polished visuals without the bloat, we leverage CSS3 properties like text-shadow, box-shadow, and gradients.

*但記住，他最後是給你一個css樣式檔，去匯入到你網頁裡。

到jquerymobile官網後，找到ThemeRoller，或者直接超連結到ThemeRoller
http://jquerymobile.com/themeroller

這是載入畫面，他非常像應用程式，像非常高級的小畫家

然後他有一個welcome的對話視窗，

這段可以看一下，他主要是告訴你他的功能
然後告訴你，版本不要選錯他有分10 跟1.1，然後主題(themes)建議最少3個所以他畫面進去後預設是A~C三種

點圖可以放大，

按下上個步驟的get rolling後
分為左選單，上選單，跟內容
左選單可以切換整體設定，或者跟對A~C的版型分別設定
上選單分別是選擇版本，復原跟重作，等等 Download是你做完之後匯出zip檔的動作

import功能可以讓他匯入Default Theme，也就是匯入jquerymobile預設的幾種配色方式

像背景顏色是要將上方的色票用拖曳的方式拖到你要改變顏色的地方，按鈕等等也可以改變顏色~

設定好之後按下上面選單的Download
會下在一個zip檔，將之解壓縮

解壓縮之後有這些檔案:

這裡的index.html打開後是告訴你如何匯入你的css方法

index.html打開後的內容
其中要匯入的項目主要是你的css檔

匯入前:

匯入後:

CSS Sprites圖片整合，加速網頁載入速度

今天在網路上看一些如何讓網頁加速的一些法則
突然想到前陣子在看一些關於jquery Mobile的書，提到了這個部分
說到CSS Sprites ，或許有些CSS排版的工具書有用到類似的概念，
只是我們用過了，卻不知道他是甚麼，
說實在當初知道這種圖片整合的概念的確有讓我驚艷了一下xd
心裡常會OS說，埃，早知道就這樣弄了

到底什麼是CSS Sprites呢?

根據wiki的解釋是說:

(透過google翻譯簡單的說是...)
為了減少瀏覽器對http請求的數量，一些網頁設計師結合了眾多的小圖片或圖標進入一個較大的圖像稱為一個sprite表或title set。[21] CSS被用來選擇複合圖像顯示部分在頁面的不同點。
如果一個頁面有10個1 KB的圖像，它們可以組合成一個10 KB的圖像，下載一個HTTP請求，然後用CSS定位，減少HTTP請求的數量，可以使網頁加載更快。

蛤 ? 所以呢，甚麼意思?
是的，光看解釋好像有那麼一丁點的不是很了解，我舉個例子好了，比方說我前陣子在看的jquery mobile的書(我看書都不實作的，我只是看他怎麼做...)，我們都知道手機網頁的介面有好多種icon，比方說:

像這張圖呢，是從jquery mobile下載下來的zip檔的demo，他的demo很完整，就是一個完整的index.html檔，好~這個不重要，我們在使用手機頁面的時候，像照片裡面被我框起來的部分，都是屬於icon，由於手機會用到的icon大小都差不多，因此在研究jquery mobile時，你會發現會用到icon的圖片其實都是來自同一張，重點取決於它的定位點，

這時候就可以看一下網站跟目錄的images的資料夾:

這時候我們會就發現，真的所有的icon都是同一張圖，
檔案還有分black跟white
比如說 icons-18 -blcak.png這個檔案來說

這張圖包含18個icon，
因此在網頁上我們只需要匯入這張圖片，利用css去調整他的水平位置就可以了。

舉個寫法的例子:
比方說現在有張圖叫做nav.png
他是一張選單的圖案，把四個選單的圖片整合成同一張圖
因此在 background 的設定上
除了指定背景圖片都是同一張nav.png之外，後面還必須去指定他的位子
意思就是這樣。

#navigation li#home      {
  background: url(../images/nav.png) no-repeat 0 0;
}
#navigation li#about    {
  background: url(../images/nav.png) no-repeat -236px -43px;
}
#navigation li#works  {
  background: url(../images/nav.png) no-repeat 0 -86px;
}
#navigation li#contact {
  background: url(../images/nav.png) no-repeat 0 -129px;
}

結論:
CSS sprites以背景定位的方式來顯示
可以減少瀏覽器下載圖片的次數
大部分的瀏覽器可以支援。

缺點 :
製作費時，定位必須非常精準。

延伸連結 :
CSS sprites產生器 http://csssprites.com/

會員管理畫面設計(前台)

其實我原本只是想練習一下php工具書的範例而已
這個範例很單純真的就只是做會員管理的模組
想說要自己弄個好看的畫面再開始做這個模組，順便當作一個經驗，因為書本是用pear的auth去做會員管理，這個我超有興趣的想說要好好地做出來。
結果一用起photoshop就high了xdd
花了些許的時間只畫了前台的部分，看來這個練習可能會花蠻久的時間
好吧....希望我順利把它做完..

這是首頁

忘記密碼頁面

註冊會員

註冊中

帳號已被註冊

註冊成功

登入成功

登入失敗

2012年6月19日星期二

TQC Dreamweaver cs4 305

此播放清單為準備TQC Dreamweaver cs4的考試，純粹練習的過程紀錄，可供參考。
若有侵權，煩請告知，謝謝!。若覺解析度不夠請調整影片至720p 會有更好的品質

詳細考試的內容，詳看TQC網站 http://www.tqc.org.tw/TQC/index.asp

TQC Dreamweaver cs4 304

TQC Dreamweaver cs4 303

TQC Dreamweaver cs4 302

此播放清單為準備TQC Dreamweaver cs4的考試，純粹練習的過程紀錄，可供參考。若有侵權，煩請告知，謝謝!。若覺解析度不夠請調整影片至720p 會有更好的品質

詳細考試的內容，詳看TQC網站 http://www.tqc.org.tw/TQC/index.asp

TQC Dreamweaver cs4 301

TQC Dreamweaver cs4 210

TQC Dreamweaver cs4 209

TQC Dreamweaver cs4 208

TQC Dreamweaver cs4 205

TQC Dreamweaver cs4 204

TQC Dreamweaver cs4 203

TQC Dreamweaver cs4 202

TQC Dreamweaver cs4 201

TQC Dreamweaver cs4 110

TQC Dreamweaver cs4 108

TQC Dreamweaver cs4 106

TQC Dreamweaver cs4 105

TQC Dreamweaver cs4 104

TQC Dreamweaver cs4 103

TQC Dreamweaver cs4 102

TQC Dreamweaver cs4 101

今天是颱風天，夾帶著西南氣流攻擊著高雄
整天在家實在很悶，一點事都不想做，想看康熙網路還一直斷線，埃
所以我開始整理以前電腦的光碟資料
想說，順道把之前前年準備TQC dreamweaver考試過程的影片放上來
希望給努力準備的人一點分享，這是第一篇所以當然是101題搂

這些影片其實在我錄完過後我自己都沒有看過
但是做的速度可能有點快....因為我是在練習了好幾次之後才錄的，請見諒了
所以如果有甚麼問題，也歡迎來信指教~(雖然我應該不會再回去做這些題目了，除非有新版本的考試，但是我會附註哪邊是有問題的)
基本上出錯率應該不會很高，我記得我考了97分的樣子，所以大致上應該不太會有問題啦
如果有什麼問題，我也很推薦準備考試的人去看看
http://123.205.192.177/uc/bbs/index.php 溫馨考場論壇
之前我有很多問題也是在那裏得到解答的:)
還有影片清單可能有遺漏其中幾題，我算一算我只有36個檔案，也就是有些我沒錄到:P

此播放清單為準備TQC dreamweaver cs4 的考試，純粹練習的過程紀錄，可供參考。
若有侵權，煩請告知，謝謝!。若覺解析度不夠請調整影片至720p 會有更好的品質

詳細考試的內容，詳看TQC網站 http://www.tqc.org.tw/TQC/index.asp

2012年6月18日星期一

note :PEAR的Calendar練習

*沒甚麼用意純粹貼程式碼上來而已，怕哪一天會用到
http://pear.php.net/package/Calendar套件下載網址

calendar.php
利用calendar顯示前一天與後一天

<?php
//從PEAR網站下載Calendar套件 http://pear.php.net/package/Calendar ，放到網站目錄裡 
//這裡只匯入Day跟Minute
require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Day.php');
require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Minute.php');

$Day = new Calendar_Day(2012,6,18);
$Min = new Calendar_Minute(2012,6,18,12,22);

//取得日期的時間數字
echo $Day->thisDay();   //顯示18
echo $Day->thisYear();  //顯示2012
echo "
";

//呼叫thisXXX()可加上true參數  此方法相當於mktime()
echo $Day->thisHour(true); 



//this方法還有顯示上一" "或是下一" " 分別為prevXXX() 跟nextXXX()
$Day2 = new Calendar_Day(2012,6,18);
$prevDay = $Day2->PrevDay();
echo "
昨天是".$prevDay."號";

$nextDay = $Day2->nextDay();
echo "
明天是".$nextDay."號";


?>

顯示結果 :

182012
1339977600
昨天是17號
明天是19號

calendar2.php
利用calendar做日期的驗證，檢查日期的正確性

<?
header("Content-Type:text/html;charset=UTF-8");
/*calendar也可以用來驗證表單有關於日期的資料
 需使用isValid()來驗證，結果為true或false
 若結果為false可以只用adjust()來調整
*/
if(isset($_POST))
{
 require_once('C:\AppServ\www\pear_pd\Calendar-0.5.5\Day.php');
 $day = new Calendar_Day($_POST['year'],$_POST['month'],$_POST['day']);
 //檢查
 if($day->isValid())
 {
  echo "正確日期";
 }
 else
 {
  $validator = & $day->getValidator(); //取得驗證物件
  $error = $validator->fetch();
  echo $error->getMessage();           //取得錯誤的訊息
  
  $day->adjust();
  //echo "調整後日期:".$day->thisDay();
  echo "
調整後日期:".$day->thisYear()."年".$day->thisMonth()."月".$day->thisDay()."日";
 
 }
}
?>

<html>
<head>
<title>日期驗證</title>
</head>
<body>
<form name="form1" id="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
請輸入您的出生年月日<br/>
<input type="text" name="year" id="year" size="5">年 
<input type="text" name="month" id="month" size="2">月 
<input type="text" name="day" id="day" size="2">日
<br/>
<input type="submit" value="驗證日期"/>
</form>
</body>
</html>

顯示結果:
若日期是正確的

如果錯誤

怎麼在Outlook 2010收到自己gmail信箱的信

晚上突然心血來潮想要試試看怎麼設定outlook
畢竟outlook雖然在念書的時候很少用，但是在商業使用上好像很有他的市場，
感覺是不能不會的一環
因為也才來試試看
話說去年學校也有辦過outlook的研習，請一個微軟MVP的講師來介紹
不過由於時間的關係，也只是大概地介紹一下，回去後我只學會怎麼設定hotmail的連接而已
那時候還沒有嘗試去設定gmail
其實我還蠻喜歡Outlook的管理介面，而且有些功能的確很方便
只是還在念書的我沒甚麼機會弄到。
好吧~
首先最簡單的方式就是參考google的設定教學

第一個步驟是最重要的步驟，首先呢，請先到自己的gmail
在您的 Gmail 帳戶中啟用 POP。設定完成時請記得按一下 [儲存變更]。
此步驟極為重要。

再來請打開你的outlook

接著照著設定

下一步~

請按是

這個部分選手動就可以了，因為最後還是會到手動的畫面。然後下一步

選擇網際網路電子郵件，然後下一步

這個步驟可就容易出錯了，左邊的訊息請填入一樣的資訊

但是你的名稱.郵件地址使用者名稱跟密碼會跟我不一樣

伺服器資訊請選POP3

內送 pop.gmail.com

外送 smtp.gmail.com

(這些設定都是有原因的請看

http://support.google.com/mail/bin/answer.py?hl=zh-Hant&answer=13287)

填完左邊資訊後請按右邊其他設定

其他設定請先切換"外寄伺服器"的頁籤

勾選跟我一樣的設定

接著切換到"進階"頁籤

上面的設定都要一模一樣

記住POP3要勾選加密連線SSL

外送伺服器加密類型選擇TLS 587

設定完後請按確定，接著在繼續點選下一步

按下下一步之後也就會開始測試帳戶設定，都顯示"已完成"之後就會自動開啟outlook

接著點選左方你的信箱後，就會開始慢慢更新你的信箱內容

使用PHPMailer

今天稍微一看了一下有關PEAR的書
聽說這個挺紅的，所以就研究了一下

PEAR的全名是PHP Extension and Application Repository

PEAR不知道能不能說是一種PHP的套件，一種package的概念，簡單來說只要匯入或是安裝，然後知道怎麼使用，可以減少很多開發的時間，

PEAR的特色就是它是一種物件導向的寫法

所有的套件都是以類別的形式使用

關於Mail這種寄信的PEAR，他能夠做到的比PHP的mail()函式多很多，所以才會這麼的有名氣。最需要安裝的就是Mail跟Mail_Mime
如果需要下載請前往 http://pear.php.net/

Mail 主要提供寄信的功能
Mail_Mime 可以讓郵件包含附件檔案. 使用HTML格式

如果是使用appserv的安裝環境，安裝PEAR蠻方便的，

安裝說明請看

[Windows] Appserv 安裝 pear 套件

至於如何使用MAIL，埃，這個我試了很多次，目前還沒有成功

我是使用gmail的SMTP

總是出現這樣的錯誤:

Failed to connect to ssl://smtp.gmail.com:465 [SMTP: Failed to connect socket: Unable to find the socket transport "ssl" - did you forget to enable it when you configured PHP? (code: -1, response: )]

但是呢，如果錯誤跟我一樣的人，是因為我沒有去設定php.ini有關openssl的設定

要將C:\下WINDOWS的 php.ini 中的 extension=php_openssl.dll 前面的分號(;)拿掉

啟動他才可以，雖然我啟動他了，但是還是沒有寄成功

後來改式phpMailer，卻成功了，我也很費解呢...

如果是使用phpMailer的話請看這邊教學

[PHP] 使用Gmail的SMTP送信

這篇教學我一試就成功
但是如果跟我一樣寄出去有亂碼的問題
可以將約略第10行的地方改成

$mail->CharSet = "UTF-8";

另外補充有關gmail的SMTP與POP3的設定說明 :

Gmail說明

2012年6月12日星期二

fancybox如何使用

fancybox如何使用
首先請先到官網下載fancybox的壓縮檔
http://fancybox.net/
下載rar壓縮檔到你的網站目錄底下，
比方說我的網站叫做myweb，而這個壓縮檔就要放在myweb裡面

然後呢，將他解壓縮，只留下文件檔就好

接著打開這個jquery.fancybox-1.3.4資料夾 :

可以看到裡面有很多檔案
index.html 就是示範檔，點開後可以看到很多範例

可以看到總共有12張小圖，然後還有下面的範例，我們只需要留一種範例就可以知道其他的原理了，首先先以notepad++開啟index.html編輯這個檔案，我們刪掉<body>與</body>之間其他語法，只留下

<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>

另外<script type="javascript">與</script>之間只留下

<script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
</script>

修改完後的html檔如:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
    </script>
</head>
<body>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</body>
</html>

修改完後按下存檔在瀏覽一次，這時候只會剩一張圖片跟一種特效，

所以，一張圖片之所以可以套用的facnybox的原因有很2種:

第一，在<head>標籤裡要嵌入fancybox的css檔案與javascript檔案
這幾個是必遷入的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

第一個是jquery的套件
第二個是mouseweel效果的javascript套件
第三個是這個fancybox的效果套件
第四個是fancybox的css檔

第二，要套用效果的圖片要有<a id="一個名稱">
如這張圖是 <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
他的id是example4，那麼相對應的<script></script>標籤裡面也一定要有jquery去選取這個$example4，然後設定他的效果。
像這個範例中就是example4

$(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });

至於需要的甚麼樣的效果，或者是跳出來的長寬多少想要自己設定，網站上或是原本其他的example都多多少少可以看出他的設定方式，可以看他的api設定方式 http://fancybox.net/api

訂閱：文章 (Atom)

2012年6月29日 星期五

2012年6月28日 星期四

2012年6月20日 星期三

2012年6月19日 星期二

2012年6月18日 星期一

2012年6月12日 星期二