19
八月

下這主題實在讓我有點害羞(臉紅),但照慣例月底到了、那萬惡的讀書心得-You know…..

一個好的網頁除了功能性能契合使用者的需求外,美觀的界面和流暢的操作流程都是不可或缺的;野人獻曝一些個人常用的小技巧,也當作是自己的複習和備忘XD

飯粒:http://demo.saro.idv.tw/UI_Demo.php

【一】表格自動跳格

Windows網路設定畫面

以Windows的IP設定介面為例:

每個小欄位輸入到達三個字元游標會自動跳到下一小欄,不必用Tab跳格;假設我想設定的IP是123.123.123.123,那我實際要按的按鍵數是12次;如果這些輸入欄位不具備這種自動跳格的設定,那我的輸入流程就會變成:123[tab]123[tab]123[tab]123、或者123[左鍵click]123[左鍵click]123[左鍵click]123,也就是按鍵或動作次數會變成15次。

多這三個動作有差嗎?絕對有的,因為介面這種東西講求的--就是一個Feel啊(遠目)如果今天輸入的不是最多15動的IP位置、而是至少25動以上什麼鬼產品金鑰呢?這奇摩子的差異就很明顯了吧!(不過這種噁心長度的東西本來就是不太人性化的設計就是了…)這技巧主要運用在具備固定長度的輸入內,例如信用卡號碼(xxxx-xxxx-xxxx-xxxx)、日期(西元xxxx年xx月xx日)、有固定規則的編號(什麼鬼產品金鑰之類的)等

<input type="text" id="KeyNumb1" maxlength="4"
 onkeyup="if(this.value.length==4){document.getElementById('KeyNumb2').focus();}">
<input type="text" id="KeyNumb2">

原始的想法就長這樣,很簡單;落落長難看了點XD

More »

14
七月

好久沒更新了,因為鼻囊腫復發讓我生不如死、無心工作,決定來提早準備這個月的心得(痛打)

這次來玩Open Source的繪圖Class - Open Flash Chart

OpenFlashChart是我目前接觸過算很容易上手的圖表繪製Class了,目前更新到OpenFlashChart2,官網上提供的SourceCode也已經是2的版本,不過基於某些原因今天飯粒還是舊版的SourceCode;新舊版本引用的方式及部分檔名都不一樣,新版的Demo下次有空再寫。

舊版Source Code下載:OpenFlashChart_1.tgz (582K)

Demo Page:點我看飯粒

呈現頁面:Chart.php

<?
//引用Open Flash Chart,假設我把OFC的源碼檔案放在網站根目錄下的Inc資料夾內...
include_once('Inc/open-flash/php-ofc-library/open_flash_chart_object.php');

//open_flash_chart_object(寬,高,資料源,false,函式引用路徑(非必填))
//繪製圖表---Pie Chart
open_flash_chart_object(300,300,'Chart_Data.php?type=Pie',false,'Inc/open-flash/php-ofc-library/');
//繪製圖表---Bar Chart
open_flash_chart_object(350,300,'Chart_Data.php?type=Bar',false,'Inc/open-flash/php-ofc-library/');
?>

資料處理頁面:Chart_Data.php

<?
include_once( 'Inc/open-flash/php-ofc-library/open-flash-chart.php' );
$g = new graph();

switch($_GET['type']){
 case 'Pie':
 //產生統計資料(這邊不要抄不要抄不要抄!!!)
 $getvalue->clearsession();
 $query = "SELECT count(DT_Name) FROM Data_Table WHERE DT_Level = '80'";
 $getvalue->select($query);
 $ClassCountArr = $getvalue->getallrows();
 $L1Count = $ClassCountArr[0]['count(DT_Name)'];
 //$L2Count,$L3Count,$L4Count產生方式類似;省略...

 //產出資料陣列及各項資料所對應的標題陣列
 $CountData = array($L1Count,$L2Count,$L3Count,$L4Count);
 $NameData  = array('80級','79-60級','59-30級','30級以下');
 //Pie Chart設定 pie(色彩濃度(越高越深),隔線顏色,字體設定)
 $g->pie(70,'#505050','{font-size: 12px; color: #404040;');
 //餅的內容 pie(值,標題)
 $g->pie_values($CountData,$NameData);
 //值塊的顏色陣列,裡面的顏色會輪流填到餅內;這裡只用了紫色和白色兩種
 $g->pie_slice_colours( array('#9933CC','#FFFFFF') );
 //滑鼠移到值塊時的顯示訊息,#val#代表該值塊的值
 $g->set_tool_tip( '#val#人' );
 //圖表標題及標題字型設定
 $g->title( '等級分佈', '{font-size:12px; color: #d01f3c}' );
 break;

 case 'Bar':
 //柱狀圖設定(柱條顏色濃度,柱條顏色,柱條框線顏色)
 $bar = new bar_outline( 50, '#9933CC', '#8010A0' );
 //柱條標註訊息及字體大小
 $bar->key( '數量', 10 );
 //產生統計資料(這邊不要抄不要抄不要抄!!!)
 for($i=1;$i&lt;7;$i++){
  $getvalue->clearsession();
  $query="SELECT count(DT_Name) FROM Data_Table,Race_Option WHERE R_EN = DT_Race AND R_ID = '".$i."'";
  $getvalue->select($query);
  $ClassCountArr = $getvalue->getallrows();
  $ClassCount = $ClassCountArr[0]['count(DT_Name)'];
  if($ClassCount != 0){
    $getvalue->clearsession();
    $query = "SELECT R_TW FROM Data_Table,Race_Option WHERE R_ID = '".$i."'";
    $getvalue->select($query);
    $ClassName = $getvalue->getallrows();

  //產出資料陣列及各項資料所對應的標題陣列
  $bar->data[$i-1] = $ClassCount;
  $NameData[$i-1] = $ClassName[0]['R_TW'];
 }
}
//圖表標題及字型
$g->title( '種族人數統計', '{font-size:12px; color: #d01f3c}' );
//設定資料陣列
$g->data_sets[] = $bar;
//設定X軸標題陣列
$g->set_x_labels( $NameData );
//設定X軸字體大小、顏色、字體顯示方式(0:水平顯示|1:垂直顯示|2:傾斜45度顯示)、字體顯示
//間隔(設0則每個都顯示、如果設1則每隔一個顯示一次;依此類推)
$g->set_x_label_style( 12, '#9933CC', 0, 0 );
//Y軸最大值
$g->set_y_max( 6 );
//Y軸間隔數
$g->y_label_steps( 6 );
//Y軸訊息、字體大小、字體設定
$g->set_y_legend( '人數', 12, '#736AFF' );
}
//印出資料供Chart.php擷取
echo $g->render();
?>

27
五月

正式到研發課也已經快一個月了,每天都很精實的工作著(放下妳手中的雞排再說);還真有點剛進公司時的感覺,Ken老大會不定時丟點專案過來,除了練習基本功外也會有新東西可以摸、整體來說滿快樂的 XD 一直想找時間把學到的東西整理出來,不然越堆越多哪天真的要整理鐵定是一團亂…絕對不是因為月底到了我要寫讀書心得的關係!

咳、首先YUI就是指 Yahoo! 佛心來的提供的介面工具庫;裡面包含許多現成的常用介面模組、函式庫,讓你可以更簡單的做出美觀又具互動性的網頁介面;不必再為了畫 Table、弄欄位排序、滑鼠指標上色這類鳥事搞得火大發飆(好吧、這種事對我來說真的很煩)更多介紹可以直接到YUI官網查看,有英文閱讀障礙的話【小正正教室】這邊說明得挺不錯的。易用性的部分,要說難也還好、但也不算太簡單就是了(對我來說,可能我跟Javascript還不太熟的關係)端看你用的是哪個模組;看過有人把每個模組和 Lib 都實際拿來練習一遍,有機會真應該效仿一下 Orz

目前YUI版本已經到YUI3了,不過我煮的飯粒還是以YUI2為主;兩個版本的差異就等我有空再研究吧(我幹嘛挖坑給自己啊…)DataTable是目前我用得最多的模組了,拿來做一些報表介面或管理介面真的很好用(姆指)。

More »

28
四月

這陣子一直在玩弄我的 VirtualBox,結果某次更新完 Ports Tree 後莫名其妙不能 make 了;

操作步驟 & 錯誤訊息:

cd /usr/ports/xxx/xxx/
make
X11BASE is now deprecated. unset X11BASE in make.conf and try again...

Google了很多文章,也試過在 make.conf 裡面加入 WITHOUT_X11=yes 或 X11BASE="" ;無奈還是出現同樣的錯誤…

意外的發現剛換好OS時備份的原始 make.conf ,用裡面的設定土法煉鋼居然排除了:

vi /etc/make.conf
X11BASE=${LOCALBASE}   //加入這行

所以說設定檔留備份真的是很重要的習慣(笑)

04
三月

首先容許我碎碎唸一下,該死的快遞居然放我鴿子、到現在都還沒來啊啊啊 !!! 搞毛啊 (氣)

因為等不到包裹我就沒辦法出門,所以繼續補一些最近在幹的事。

話說自從過年前Yunan老大推薦我一款很好很強大的虛擬化軟體 — Sun VirtualBox 之後,我就時不時的裝一些奇怪的東西進去測試。

加上最近找到一款屬性也是很好很強大的螢幕擷取軟體,就一邊玩一邊抓圖作記錄 XD (真的要說這玩意超好用啊 !! 拿來做 SOP 很棒)

以下是最近用 VirtualBox 灌 FreeBSD 的過程,留個 Log 以後可以參考。

More »

,

30
一月

Bravo – Google Chrome !

chrome

More »

25
十一月

Windows7設定route

因為公司網路開始針對部落格(如無名、Xuite 等)和某些特定網站做阻擋,工作時發現透過搜尋引擎查資料,結果有些分享在部落格上的文章通通都看不到了;為了避免這種點了搜尋結果卻出現[您所瀏覽的網頁已被公司禁止…]的情況,只好自備 3.5G 網卡來偷吃步了。

所以我的筆電除了連公司的無線網路之外,還有自備的 3.5G 網卡同時連線。問題來了,雖然透過3.5G網卡可以正常看到那些封鎖的網站,但那些只允許公司 IP 連線的 Server 和放在公司內網的網頁和設備該怎麼辦 囧?!所以還需要對電腦的 route 做點調教:

(1)以系統管理員身分執行命令提示字元

(2)使用指令 route print 確認目前網卡及路由狀態,會Print 出下列資訊:

route1

開頭的數字就是網卡編號,請記下想設定的那張網卡的編號。

(3)所以我希望那些鎖定公司 IP 和公司內網的網站及設備,都優先透過公司內部無線網路連線;而其他網站就用 3.5G 網卡連接,就可以用下列方法設定:

route add 192.168.0.0 mask 255.255.0.0 192.168.2.11 metric 20 if 12

依序是:指令route add、接指定網段、mask 網段遮罩、Gateway IP、metric 規則優先順序(數字越小越優先,可任意設定也可省略不填;如果設了很多規則再用吧)、if 網卡編號(是針對公司無線網路設定的,所以填入步驟2查到的編號 12)

備註:這些設定在電腦重開機後就會清除,如果要永久保存可以用 route -p add … 來永久保存。
備註二:也可以用 route delete、route change 來刪除、修改現設定的路由規則,route -h 內都有說明及範例。