2012年12月25日 星期二

MySQL鎖表(Lock Table)Table-level與Row-level比較

沒有留言:

定義

鎖表(Lock Table)

在要更新資料表的資料時,MySQL會將表資料鎖定無法讀取,直到資料異動完畢,MyISAM預設支援Table-level lock,而InnoDB預設支援Row-level lock

Table-level lock

資料表資料異動時,將「整個資料表(Table)」都鎖定住無法讀取

Row-level lock

資料表資料異動時,將「要更新的資料列(row)」都鎖定住無法讀取


注意事項

在使用Row-level lock時必需要明確指定要異動資料的主鍵(Primary Key),否則將會改用Table-level lock去做資料表的異動

範例

假設有user資料表,裡面有id與name的欄位,id是主鍵

SQL Table lock Row lock No lock 備註
SELECT *
FROM user
WHERE id='1'
FOR UPDATE;

v

明確指定主鍵,並且有此筆資料,row lock
SELECT *
FROM user
WHERE id='-1'
FOR UPDATE;

v
明確指定主鍵,若查無此筆資料,無 lock
SELECT *
FROM user
WHERE name='KeJyun'
FOR UPDATE;
v


無主鍵,table lock
SELECT *
FROM user
WHERE id<>'1'
FOR UPDATE;
v


主鍵不明確,table lock
SELECT *
FROM user
WHERE id LIKE '3'
FOR UPDATE;
v


主鍵不明確,table lock

備註

FOR UPDATE 僅適用於 InnoDB,且必須在交易區塊(BEGIN/COMMIT)中才能生效。

參考資料

提高存取MySQL效率小技巧

沒有留言:
資料庫的存取效率,永遠是網站存取速度很重要的瓶頸,所以能在資料庫存取時提高效率,可以讓網站的存取速度增加很多,在這裡紀錄一下一些常用的小技巧





2012年12月24日 星期一

Node.js學習資源與套件

沒有留言:

文字文章


初階

影片





套件


測試除錯

node-inspector

  • 安裝
npm -g install node-inspector
  • 開啟指令
C:\>node-inspector
  • Debug JS檔案
C:\>node --debug-brk debug.js

2012年12月22日 星期六

在MySQL中MyISAM與InnoDB資料庫引擎比較

沒有留言:

定義

MyISAM:MySQL Indexed Sequential Access Method(有索引的順序存取方法)
InnoDB

比較表


項目/資料表類型 MyISAM InnoDB 備註
效能 較佳 較差
  • InnoDB需要處理資料異動時的交易紀錄檔(Transaction Log),每次有交易產生時,仍至少須寫入硬碟一次,因此對於某些硬碟或磁碟陣列,會造成每秒200次的交易處理上限。若希望達到更高的效能且保持交易的完整性,就必使用軟碟快取與電池備援。當然 InnoDB 也提供數種對效能衝擊較低的模式,但相對的也會降低交易的完整性。
  • MyISAM不需要處理資料異動時的交易紀錄檔,所以在資料異動及存取上速度會較InnoDB快,且無磁碟存取問題,但這並非因為它比較先進,這只是因為MyISAM不支援交易。。
交易
(Transaction)
X(不支援)O(支援) InnoDB在進行連續的資料異動(交易),如果發生錯誤的話可以還原至錯誤交易發生前的正常狀態,MyISAM因不支援交易,所以沒辦法進行還原
錯誤處理 較差 較佳
  • MyISAM則必需要重新「完整」掃描後才能重新建立索引,所以修復的時間與資料亮多寡成正比
  • InnoDB可以藉由交易紀錄檔快速恢復成未出錯前的資料,修復時間大略固定
穩定性 較差 較佳 因為InnoDB發生錯誤時的處理較MyISAM好,所以穩定性較佳
讀/寫/快取 較差 較佳 InnoDB有自己的讀寫快取管理機制,MyISAM則必須依靠作業系統來管理讀取與寫入的快取
記憶體使用 較佳 較差 InnoDB目前並不支援MyISAM所提供的壓縮與 terse row formats,所以對硬碟與快取記憶體的使用量較大。因此MySQL從5.0版開始,提供另一個負載較輕的格式,他可減少約略 20% 的系統負載,而壓縮功能已計畫於未來的新版中推出。
外來鍵
(Foreign Key)
X(不支援) O(支援)
主鍵
(Primary Key)
依需求 必須要有 InnoDB如果沒有設定主鍵或者非空唯一索引,就會自動生成一個6字元的主鍵(不可見)
count(*)
(From All Table)
較佳 較差
  • MyISAM撈取預存的總行數
  • InnoDB重新撈取整個表做計算
  • 若有加WHERE條件則,兩者從取效率相同
全文檢索
(Full Text Search)
O(支援) 5.6.4+支援
DELETE FROM Table 較佳 較差
  • MyISAM會丟掉原本的表後,重新建立一個新的表
  • InnoDB會一筆一筆的刪資料,可以使用TRUNCATE Table去進行所有資料的刪除(要有Drop權限)
索引保存 表格名稱.MYI的檔案 與資料一起保存
鎖表
(Lock Table)
Tabel-level Row-level
  • MyISAM
    • 當資料表有寫入時,其他人無法讀取 (有少數例外,像是 bulk insert)
  • InnoDB
    • 只有「明確」的指定主鍵,MySQL 才會執行 Row lock (只鎖住被選取的資料例) ,否則 MySQL 將會執行 Table Lock (將整個資料表單給鎖住),還是有很大機會還是可以讀取。
1 1 1 1
建議 搜尋資料 異動資料
  • MyISAM
    • 大量SELECT與INSERT
    • 資料量小
    • 全文檢索
  • InnoDB
    • 大量UPDATE與INSERT
    • 需要使用Foreign Key
    • 資料量大
    • 交易
    • InnoDB預設是開啟自動提交(Auto Commit)的,如果你按照MyISAM的方法來編寫程式不會存在錯誤,只是性能會很低,可以使用Begin及Commit將多個異動語法綁在同一個交易中。
  • 共同
    • 有使用WHERE的欄位要使用索引


參考資料

MySQL效率調校

沒有留言:

索引(index)

語法(SQL)

2012年12月20日 星期四

在MySQL使用Explain做SQL SELECT語法效能測試

沒有留言:

在MySQL我們在使用SELECT做撈取資料的時候,有時候常常會效能低落,撈取資料需要很長的時間,有時候是SQL語法下得不好導致沒有使用到正確的索引去撈資料,我們這個時候就必須要檢查我們下的SQL語法到底有哪些地方需要改善,我建立的comment的資料表並新增幾筆假資料去做示範





解釋MySQL語法效能:撈取留言資料





解釋MySQL語法效能:撈取留言資料







2012年12月18日 星期二

在Sublime使用Node.js及時編譯執行JS檔案

沒有留言:
在開發JavaScript時,總是要把JS程式在瀏覽器Run,才能看到執行的結果,有一些程式其實我們只是想要看他跑的資料流程有沒有正確,而沒有動到整個DOM文件或是需要跟Server存取資料,這樣的話我們可以用Sublime的Build System結合Node.js去執行我們的JS檔案就可以了

效果如下:



2012年12月17日 星期一

JavaScript正規表示式整理

沒有留言:
常用JavaScript正規表示式整理

引用後使用RegCheck.METHOD()即可檢測



2012年12月13日 星期四

Facebook PHP SDK在Windows發生SSL certificate problem解決方式

沒有留言:
在Windows環境使用Facebook PHP SDK的時候,會發現找不到SSL Cert的問題,Facebook的API有設定如果找不到的話會再重讀一次SSL Cert,可是還是沒有什麼用

Fatal error: Uncaught CurlException: 60: SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed thrown in D:\xampp\htdocs\facebook_api\facebook-php-sdk\src\base_facebook.php on line 823

所以索性我就把SSL驗證的功能關掉,在src/base_facebook.php找到判斷SSL Cert的地方,照下面將before改成after這樣就可以了,畢竟在Linux環境底下還是可以正常使用SSL Cert,所以在找不到Cert的時候再關掉驗證比較好


參考資料


facebook api(php)使用預設範例時,出現伺服器錯誤解決方式

沒有留言:
在使用facebook api提供的facebook-php-sdk內建的範例的時候,在丟到Ubuntu去執行的時候發現,一直跑出「伺服器錯誤」的訊息,也沒有出現什麼錯誤訊息,我也不曉得到底是哪一個環節出錯



一直trace整個examples範例的時候,發現它跑到base_facebook.php中的判斷curl函式不存在的if判斷式裡面了(function_exists('curl_init')),它裡面也有丟出例外(throw new Exception('Facebook needs the CURL PHP extension.');),可是就是沒有看到錯誤訊息,搞了好久原來是我沒有安裝curl的lib

所以使用指令apt-get install curl libcurl3 libcurl3-dev php5-curl去安裝curl的lib,之後就可以正常運作了


參考連結


在PHP使用Google API(V3)取得使用者的Gmail通訊錄清單

沒有留言:
在新網站上線的時候,常常會需要使用者幫忙推廣網站給他的朋友,而在Google最常取用的就是使用者在Gmail的通訊錄清單,讓使用者通知他通訊錄清單的朋友有關網站的資訊,達到推廣的效果,所以我們就需要透過Google  API提供的功能去達到我們要完成的效果。









2012年12月11日 星期二

日劇Change第5集總理的話觸動人心

沒有留言:

影片為日劇Change第5集影片片段

我以前是做小學老師的,去年還負責小學五年級,總之他們就是經常吵架,當然其中有些陰暗的東西,也有欺負的事件,遇到這些問題的時候,我就會像這樣給孩子們說教,你們好好思考思考,既然都是同學,有看不過去的地方,不能苟同的地方的話,就把自己想說的好好告訴給對方,好好聽對方想說的,然後都好好的去思考,這樣做的話就會注意到對方和自己的不同之處,正因為都視對方為同樣的人,即使是稍稍被否定,也會很生氣,如果有誰單獨行動,就會想那傢伙算什麼啊,這樣就開始吵架欺凌,但是世界上是不存在同樣的人的,大家都是思維方式情況各不相同的人,所以我希望孩子們理解自己和對方是不同的,在這基礎上才能考慮使用什麼樣的語言,能把自己的心意傳達給對方,怎樣才能說服對方,我一直在教育他們思考這一點,我認為外交也是一樣,正如剛剛賓加姆先生所說,我們是同盟國,但是日本和美國畢竟還是有所不同的,所以賓加姆先生所想的,有什麼想說的請全部說出來,我也會這樣做的

看完這一段類似訓話的東西 ,真的是狠狠地敲醒了我的腦袋,每個人每個團體彼此之間都是不同的,在遇到有不同意見的時候,要能夠好好了解彼此的說出這段話的緣由,而不是像腦神經斷裂似的,霹靂啪啦的一直說對方的不是,了解事情的來龍去脈之後,才會知道彼此的立足點是多麼的不同,才知道彼此為什麼要這樣的思考,如果大家都能夠冷靜的理解彼此,相信在遇到有不同意見時,也能夠找到對彼此都能夠接受的解決方式,世界就會少了很多衝突的怒氣,多了很多理解的笑容了。

2012年12月5日 星期三

Chrome Developer Tools使用技巧

沒有留言:




RESTful學習資源

沒有留言:

概念


開發工具

Chrome外掛

範例

在Win7右鍵選單加入使用Sublime Text開啟的功能

沒有留言:
Sublime編輯器很好用,但是如果能夠在想要用Sublime開啟的檔案案右鍵就能直接用Sublime開啟的話那就更好了,所以拜讀了Google大神一下,搜尋到一篇簡體的「win7下將Sublime Text2 加入右鍵菜單」文章,但有些名詞跟繁體的Win7有點不同,所以我就將步驟用繁體Win7版本看得懂的字在這裡做紀錄一下

  • 在開始功能表下方輸入regedit(登錄檔編輯器)搜尋,在regedit.ext上面點右鍵,選取以系統管理者身份執行




  • 在regedit中選取路徑電腦 > HKEY_CLASSES_ROOT > * > shell,在shell上面點選右鍵新增 > 機碼,輸入SublimeText的機碼(這裡可以隨意命名你要的名稱)




  • 一樣在剛剛新增的機碼SublimeText上按右鍵新增 > 機碼,輸入Command的機碼(這裡一定要輸入Command的機碼名稱)




  • Command中的機碼中點選預設的字串值(預設值),點選右鍵修改它




  • 在數值資料裡面輸入你Sublime Text執行檔放置的路徑,並在後面加上%1(在這裡是D:\Sublime Text 2.0.1 x64\sublime_text.exe %1),根據「win7下將Sublime Text2 加入右鍵菜單」這篇的說法,%1代表是用tab的方式開啟文件,我在這邊試過不加的話好像沒辦法正常開啟,修改好後按下確定




  • 好了之後就可以隨便找一個文件點選右鍵來試看看,就會看到你剛剛新增的SublimeText的機碼,點選後就可以使用Sublime開啟這份文件摟




2012年12月3日 星期一

產品規劃注意事項

沒有留言:
產品設計的原則


  • 從舊有的經驗出發:創業公司很忌諱處在「尋找問題」的階段,不要去憑空設想一個問題,想想過去你曾經思考過的,在這些領域你有更多的了解。
  • 知道自己有什麼不同之處:明白自己的創業公司跟別人有什麼不同,弄清為什麼現在是一個特殊的機會。
  • 先畫草圖再寫程式:Instagram的另一名創始人Systrom經常會拿著iPhone設計紙板,去咖啡館坐著,然後一起討論哪些功能要保留、哪些要刪掉。也許你會浪費掉幾張設計紙板,但是不會浪費幾週時間去寫代碼。
  • 每週進步一點:我們一直在問自己這些問題,「使用者會喜歡行動分享照片嗎?我們可以做出一些看起來不錯的濾鏡嗎?」花上一周時間調查,週五有了結論之後,下週繼續。
  • 在日常生活場景中驗證功能:Krieger稱之為「酒吧檢測」,將某個功能解釋給酒吧裡的陌生人聽,如果對方聽不懂,那就表明需要簡化。不要只是找你周圍的技術咖測試新功能。
  • 知道何時應該轉型:雖然現在Pivot(轉型)已經不是什麼好詞了,但是當你發現已經沒有什麼問題可以解決,那就是該轉型的時候到了。
  • 社群原型測試:沒必要一開始就寫出所有的程式,你可以隱藏在幕後做人工測試。Instagram的早期版本中曾考慮加入這樣的一個功能:當你的朋友加入時給你提醒。Krieger沒有直接把這個功能做出來然後測試,而是用人工方式手動給使用者發送通知,結果會員的反應不理想,於是這個功能就沒有做了。「我們一行程式都沒寫,所以一行程式也不用刪了。」
  • 與你的使用者保持順暢的溝通:不要用幾個月時間埋頭做產品,卻不知道這個功能到底是不是使用者需要的。

即時同步git repository資料到網頁資料夾(DocumentRoot)

沒有留言:
為了能夠開發比較方便,在我將程式碼push到git server時候,能夠同時將我的程式碼,同步到Apache預設網頁讀取的資料夾(DocumentRoot:/var/www),這樣就不用一直需要到伺服器的網頁資料夾一直使用git pull origin master去讓程式碼保持在最新的版本,這樣不僅浪費自己的時間,也降低自己在開發上的效率。

PS:這個辦法在權限上沒有考慮較詳盡,在正式要上線的伺服器,建議不要這樣做,避免伺服器安全出現漏洞


首先在git server自己的repository(這裡以kejyun.git為例)中,開啟config的檔案,將設定值改成下面的範例,主要是bare設定為falseworktree設定為你要同步的資料夾(/var/www),denycurrentbranch設為ignore



如下圖


2012年11月30日 星期五

在ubuntu設定命令列git branch提示訊息

沒有留言:

效果



程式碼

將此段程式設定到家目錄的.bash_profile裡面(/home/kejyun/.bash_profile),設定完後重新登入,或者輸入source ~/.bash_profile即可重新讀取到新的設定值



參考連結



讓putty、pietty、git在ubuntu設定ssh達到免密碼登入功能

沒有留言:

1 ) ssh設定

使用puttygen

  • 產生ssh key


開啟puttygen,點選generate按鈕,然後用滑鼠在puttygen的視窗隨意的滑動,產生專屬於你自己的ssh key,然後再點選Save private key按鈕儲存密鑰(不要輸入key passphrase跟confirm passphrase,不然你再登入的時候還是要輸入你的密鑰密碼,這樣就沒有達到免密碼登入的意義了),我這裡是存成kejyun.ppk的檔名



ubuntu12.04 apache網址重寫引擎(rewrite engine)啟用

沒有留言:
在apache安裝好後,rewrite預設沒有開啟,所以必須要手動開啟它,所以輸入下列兩行指令去開啟


$ sudo a2enmod rewrite
Enabling module rewrite.
To activate the new configuration, you need to run:
  service apache2 restart

$ sudo /etc/init.d/apache2 restart
* Restarting web server apache2

這樣rewrite engine就可以使用了

但必須要注意,如果你要使用.htaccess的檔案去設定的話,要確認在apache的設定檔中(/etc/apache2/sites-available/default),是否有將AllowOverride設定為All,否則無法讀取到.htaccess的設定


2012年11月29日 星期四

ubuntu12.04安裝ngnix、php、mysql套件

沒有留言:
更新apt-get並安裝nginx、php5、mysql及php-mysql套件



設定開機自訂執行的PHP FastCGI,將下列程式碼建立於/etc/init.d/php-fcgi(若沒有此檔案則自行建立)



建立完成後將php-fcgi這個檔案設定為可執行檔,開啟PHP FastCGI,並設定開機自動執行




開啟/etc/nginx/sites-available/default,設定nginx預設執行的程式為index.php,並設定在nginx在遇到php副檔名的時候,執行PHP FastCGI



設定完成後執行「/etc/init.d/nginx restart」重新啟動nginx,即可在nginx執行php

2012年11月27日 星期二

在ubuntu安裝Git Server

沒有留言:

  • 使用「sudo apt-get update」更新套件清單
  • 輸入「sudo apt-get install git-core」安裝GitServer
  • 在你的home目錄建立git資源要放置的目錄(例如mkdir gitRepository)

  • 進入建立的「gitRepository」資料夾,輸入「git init --bare」建立一個空的git專案

  • 輸入「mkdir gitFileStore」建立一個存取git專案檔案的資料夾






這樣就完成了Git Server的建置與抓取專案的步驟了



Linux CLI 提示字元的設定

沒有留言:
提示字元變數名稱:PS1(1為數字1)

參數(鳥哥:認識與學習 BASH):


  • \d :可顯示出『星期 月 日』的日期格式,如:"Mon Feb 2"
  • \H :完整的主機名稱。舉例來說,鳥哥的練習機為『www.vbird.tsai』
  • \h :僅取主機名稱在第一個小數點之前的名字,如鳥哥主機則為『www』後面省略
  • \t :顯示時間,為 24 小時格式的『HH:MM:SS』
  • \T :顯示時間,為 12 小時格式的『HH:MM:SS』
  • \A :顯示時間,為 24 小時格式的『HH:MM』
  • \@ :顯示時間,為 12 小時格式的『am/pm』樣式
  • \u :目前使用者的帳號名稱,如『root』;
  • \v :BASH 的版本資訊,如鳥哥的測試主機版本為 3.2.25(1),僅取『3.2』顯示
  • \w :完整的工作目錄名稱,由根目錄寫起的目錄名稱。但家目錄會以 ~ 取代;
  • \W :利用 basename 函數取得工作目錄名稱,所以僅會列出最後一個目錄名。
  • \# :下達的第幾個指令。
  • \$ :提示字元,如果是 root 時,提示字元為 # ,否則就是 $ 囉~


顏色(Color Bash Prompt):



  • txtblk='\e[0;30m' # Black - Regular
  • txtred='\e[0;31m' # Red
  • txtgrn='\e[0;32m' # Green
  • txtylw='\e[0;33m' # Yellow
  • txtblu='\e[0;34m' # Blue
  • txtpur='\e[0;35m' # Purple
  • txtcyn='\e[0;36m' # Cyan
  • txtwht='\e[0;37m' # White
  • bldblk='\e[1;30m' # Black - Bold
  • bldred='\e[1;31m' # Red
  • bldgrn='\e[1;32m' # Green
  • bldylw='\e[1;33m' # Yellow
  • bldblu='\e[1;34m' # Blue
  • bldpur='\e[1;35m' # Purple
  • bldcyn='\e[1;36m' # Cyan
  • bldwht='\e[1;37m' # White
  • unkblk='\e[4;30m' # Black - Underline
  • undred='\e[4;31m' # Red
  • undgrn='\e[4;32m' # Green
  • undylw='\e[4;33m' # Yellow
  • undblu='\e[4;34m' # Blue
  • undpur='\e[4;35m' # Purple
  • undcyn='\e[4;36m' # Cyan
  • undwht='\e[4;37m' # White
  • bakblk='\e[40m'   # Black - Background
  • bakred='\e[41m'   # Red
  • bakgrn='\e[42m'   # Green
  • bakylw='\e[43m'   # Yellow
  • bakblu='\e[44m'   # Blue
  • bakpur='\e[45m'   # Purple
  • bakcyn='\e[46m'   # Cyan
  • bakwht='\e[47m'   # White
  • txtrst='\e[0m'    # Text Reset



Prompt escapes



  • \a an ASCII bell character (07)
  • \d the date in "Weekday Month Date" format (e.g., "Tue May 26")
  • \D{format} the format is passed to strftime(3) and the result
  •  is inserted into the prompt string an empty format
  •  results in a locale-specific time representation.
  •  The braces are required
  • \e an ASCII escape character (033)
  • \h the hostname up to the first `.'
  • \H the hostname
  • \j the number of jobs currently managed by the shell
  • \l the basename of the shell's terminal device name
  • \n newline
  • \r carriage return
  • \s the name of the shell, the basename of $0 (the portion following
  •  the final slash)
  • \t the current time in 24-hour HH:MM:SS format
  • \T the current time in 12-hour HH:MM:SS format
  • \@ the current time in 12-hour am/pm format
  • \A the current time in 24-hour HH:MM format
  • \u the username of the current user
  • \v the version of bash (e.g., 2.00)
  • \V the release of bash, version + patch level (e.g., 2.00.0)
  • \w the current working directory, with $HOME abbreviated with a tilde
  • \W the basename of the current working directory, with $HOME
  • abbreviated with a tilde
  • \! the history number of this command
  • \# the command number of this command
  • \$ if the effective UID is 0, a #, otherwise a $
  • \nnn the character corresponding to the octal number nnn
  • \\ a backslash
  • \[ begin a sequence of non-printing characters, which could be used
  •  to embed a terminal control sequence into the prompt
  • \] end a sequence of non-printing characters



2012年11月10日 星期六

UI設計重點

沒有留言:

  • 一旦一個功能需要文字解釋,這個功能的設計已經失敗了 [1]
  • 如果能用一個按鈕來實現,絕對不會用兩個 [1]
  • 少就是多,簡單就是美 [1]
  • 如果誰一上來給我拿一個產品計劃的邏輯,我要花一個小時才能看懂,那一定不是好產品。 [1]




參考資料:
[1] 張小龍:如何把產品做簡單

2012年10月15日 星期一

使用者經驗設計讀後心得

沒有留言:
原文:
使用者經驗設計:(1)UX design 的過去
使用者經驗設計:(2)UX design 的極致挑戰
使用者經驗設計:(3)UX design 的理想與現實


原文轉錄:


「視覺與版面設計」的最基本要求是:讓使用者一眼就知道這一頁裡有哪些資訊?哪些是他要的?哪些是他不要的?

「路徑設計」的最基本要求是:讓使用者一眼就知道他可以往哪些網頁移動,而他下一步想讀的資訊剛好就在這些選項中(最小路徑設計)。但是要做好這工作,你必須了解使用者在每一個情境(網頁)裡可能會想要做哪些事。因此,你不能再止於視覺設計與認知心理學,你必須要知道「目標使用群」在你所預想到的「使用情境」裡可能會有的各種使用需求。

  我覺得「最小路徑設計」是UX一個很核心且重要的概念,在設計網頁的時候你都必需要去定義你在這個網頁,你想要給看網頁的使用者看到什麼樣的資訊,而且要猜測使用者來你的網頁,他想要看到什麼樣的資訊(他想要做哪些事情),設定義的情境與大部分使用者想看到的情境是非常類似的,那麼你網站的設計就算是成功了;如果網頁全部的資訊都是使用者想要看的,那麼不管你UI做的多爛,你的網站也算是成功的。

  只是要做的網頁中的所有資訊都是使用者想要的是非常困難的,你必需要知道每個使用者的喜好,且每個使用者的喜好都會不同,所以等於你要替每一位使用者去客製化他自己的網頁,只是這樣的成本太高了,所以才會讓網頁UI/UX的設計要求,能夠大部分都符合大多數人的需求,所以做UI/UX之前,要知道自己網站目標客群「使用情境」的需求,才不會讓自己的網站空有內容卻雜亂無章。

「使用者需求」是很古老的概念,業界用「市場調查」了解客戶想要的產品特性,也通過售後服務與調查瞭解客戶的抱怨,然後據此定義出一個新產品所需要擁有的正面特性和必須排除的負面特性。但是 UX 所面對的問題複雜度遠遠超過傳統電子產品或汽車等產品,只要想一想一個網站的規劃就可以知道。

想像你要規劃一個「台灣民宿入口網站」,你如何讓使用者一進入首頁都相信他要的資訊你這網站都有,而且很容易搜尋?或者,至少讓她隨便逛兩分鐘,試過數個網頁後就建立起信心?回憶一下你過去搜尋民宿的痛苦經驗,就知道所有相關的入口網站對使用者在各個搜尋階段的需要多麼地無知(或毫不關心)──它老是給你一大堆你不要的資訊,卻不給你妳要的資訊;你經常在一個網站裡浪費一整個小時,卻根本就不知道這網站裡有哪些資訊,沒哪些資訊。

  好的UI就是要能夠在短短的1~2分鐘之內,能夠引導使用者知道你的網站葫蘆裡是在賣什麼藥,而且要讓使用者很快的找到他想要買的藥,否則你的藥再怎麼適合他,他沒找到你沒賣出去,都是一個失敗的生意。現在網站那麼多使用者事沒辦法像以前一樣,那麼有耐心的一頁一頁慢慢的翻找網站找出他想要看到的資訊,所以現在好的UI/UX才會讓我們這麼的重視。

2012年10月10日 星期三

CSS3教學與作品

沒有留言:

及時教學動畫


時鐘


http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript






http://thecodeplayer.com/walkthrough/make-a-simple-cloud-in-css3




圓角標籤


http://thecodeplayer.com/walkthrough/navigation-tabs-with-rounded-out-borders-using-css3




作品分享


CG動畫



海賊王教我們的事

沒有留言:



夢想


魯夫的「我要成為海賊王」宣言給了我夢想,讓我知道要相信只要自己能夠堅持下去,自己也能夠完成偉大的事情

友情

 
魯夫視夥伴如己出,相信自己的夥伴,努力保護自己的夥伴,讓我學會要珍惜自己重視的每一段友誼,不只要知道如何珍惜它,也要讓自己能力變強到足夠去保護它

果決


魯夫對於事情都能果斷判斷的去執行,樂觀接受結果,讓我知道要果斷的把握每一次的機會,且不管結果好壞,都要有勇氣的去接受它

勇氣


魯夫到每個島嶼的每一段冒險給了我勇氣,讓我知道面對各種不同的困境,要試著努力去解決它,而不是逃避事情,沒有面對事情的勇氣,事情是不會被解決的。

樂觀


魯夫不管面對任何事情,即便是死亡,也能夠開心的去享受任何事情的結果,讓我知道面對任何不開心事情都要學會放下,否則自己會被後悔及自責吞噬,不要去想自己失去了什麼,而是要想自己擁有什麼。

自省


魯夫在頂上戰爭失敗後,與夥伴緩下腳步努力修練了兩年,讓我學會面對自己無法勝任的事情,就是要承認自己能力不足,才能知道自己要改善哪方面的能力,而不是不承認自己的失敗,活在自己的世界中,要跳高之前要學會如何蹲下,蹲得越低才能跳得越高

2012年10月5日 星期五

Sublime - 跨平台的文字編輯器

沒有留言:

官方資源

官方網站


Sublime Text 2 documentation index



Sublime Text Unofficial Documentation



Sublime Text 手冊


教學與介紹影片:

Perfect Workflow in Sublime Text 2


https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

jQuery網頁特效整理

沒有留言:

  • Roundabout
  • Carousel
  • accordion
  • Fisheye


Pad網頁事件設計

沒有留言:

手指點選事件(原文):touchstart


範例:



手指滑動事件:touchmove


範例:



手指結束滑動點選事件:touchend


範例:





綜合範例(手勢事件):





2012年9月22日 星期六

blogger自訂網址

沒有留言:
Blogger在自訂網址上面有做的一些變更

除了將你要自訂的網址CNAME要設定為「ghs.google.com」

現在blogger還要求要輸入驗證網址是不是真的屬於Blog作者的網址

所以每個人都有不同的驗證CNAME

驗證通過後才可以自訂自己的網址

沒有輸入驗證CNAME的話,你只能在畫面上看到下列的訊息一直鬼打牆

We have not been able to verify your authority to this domain. Error 12. Please follow the settings instructions.


 如下圖所示:






2012年9月17日 星期一

2012年9月16日 星期日

2012年8月27日 星期一

Windows7安裝Sass及Compass環境

沒有留言:

安裝Sass

  • 下載Ruby安裝檔,安裝過程中將ruby設為環境變數

  • 在windows的命令提示字元中輸入「 gem install sass 」進行安裝

C:\Users\kejyun>gem install sass
Fetching: sass-3.2.1.gem (100%)
Successfully installed sass-3.2.1
1 gem installed
Installing ri documentation for sass-3.2.1...
Installing RDoc documentation for sass-3.2.1...
C:\Users\KeJyun>


  • 安裝完畢後輸入命令「sass --watch 目標檔.sass:編譯檔.css」即可對「目標檔.sass」進行監控,並即時將結果輸出至「編譯檔.css」

安裝Compass


2012年8月26日 星期日

win7與virtualbox中的ubuntu系統共用資料夾

沒有留言:

  • 設定共用資料夾名稱

(這裡是設定為ubuntu)及路徑(這裡是設定為D:\ubuntu)



  • 安裝相關套件
sudo apt-get install virtualbox-ose-guest-utils
  • 掛載共用資料夾
sudo mount -t vboxsf ubuntu /home/kejyun/win7


紅色「 ubuntu 」為 VirtualBox 共用資料夾名稱

藍色「 /home/kejyun/win7 」為要掛載的目錄


掛載好之後就可以直接的共用檔案了



2012年8月18日 星期六

2012年8月15日 星期三

MySQL資料欄位變更

沒有留言:

ENUM

ALTER TABLE [資料表名稱]
MODIFY [欄位名稱]
ENUM('red','orange','yellow','green','blue','indigo','violet') DEFAULT NULL;


ALTER TABLE [資料表名稱]
CHANGE [欄位名稱][欄位名稱] 
ENUM('red','orange','yellow','green','blue','indigo','violet') DEFAULT NULL;

注意:變更後,所有的名稱會被清除再新增,不會保留原有的名稱值

2012年4月26日 星期四

chrome開啟Facebook顯示空白畫面

沒有留言:


解決方法1:

在chrome網址列輸入「chrome://settings/advanced」,最上面點選「清除瀏覽資料」

勾選「清空快取」及「刪除 Cookie、其他網站資料和外掛程式資料」

時間選擇「不限時間」 

清除完後,然後再重新登入試看看




解決方法2:

在網址列輸入「https://www.facebook.com/」手動使用加密連線登入Facebook

直接到Facebook畫面後,登出在登入後,「保護你的帳號,使用加密瀏覽 (https)」

這樣就可以直接使用了

2012年4月21日 星期六

VirtualBox免安裝版(Portable)網路連線

沒有留言:

在使用VirtualBox Portable架設好虛擬主機時想要使用pietty對安裝好的作業系統進行連線
但卻發現因為沒有透過安裝的方式去安裝VirtualBox
所以網路卡方面沒有替我們設定好,使得無法得知VirtualBox Portable的網路相關設定的資訊
我是透過以下方式解決VirtualBox外部連線問題:




VirtualBox Portable版本:4.1.2

【步驟1】:進到網路連線,滑鼠右鍵點選「區域連線」,再點選「內容」




2012年3月28日 星期三

使用git與PHP Fog雲端檔案連線教學

沒有留言:

要測試Facebook API時,想用臨時的網域測試是否api可以正確執行

所以就去PHP Fog申請了一個免費的帳號用來測試

然而他的檔案管理是用git的方式去存取

所以我們要建立git存取時所需要的ssh key

共有三個步驟 
  1. 產生ssh key
  2. 儲存產生的sshPHP Fog
  3. git連線測試

2012年2月9日 星期四

2012年2月8日 星期三

Facebook PHP SDK 3.0 Permissions參數說明(Facebook PHP SDK 3.0 Permissions Parameter Explanation)

沒有留言:

scope(存取範圍):https://developers.facebook.com/docs/reference/api/permissions/

(*)備註:預設存取(Default Value)

AWS PHP SDK缺少DOM套件解決辦法

沒有留言:
服務平台:Amazon Web Service(AWS)
環境:Amazon Elastic Compute Cloud (Amazon EC2)

工具:putty

在執行「/aws-sdk-for-php/_compatibility_test/sdk_compatibility_test.php」可以測得出使用AWS套件的最低需求為何,但把套件上傳至EC2時發現缺少的「DOM(What You Have:Disabled)」的套件,所以我們必須要在EC2安裝此套件

Minimum Requirements

Test Should Be What You Have
PHP 5.2 or newer 5.3.8
cURL 7.15.0 or newer, with SSL 7.21.7 (OpenSSL/1.0.0e)
SimpleXML Enabled Enabled
DOM Enabled Disabled
SPL Enabled Enabled
JSON Enabled Enabled
PCRE Enabled Enabled
File System Read/Write Enabled Enabled

AWS S3 PHP SDK說明

沒有留言:

S3 SERVER區域參數(S3 Server Region Parameter):

  • 北維吉尼亞州 & 華盛頓州:(US-Standard (Northern Virginia & Washington State) Region.)
    • REGION_US_E1
    • REGION_VIRGINIA
    • REGION_US_STANDARD
  • 北加州(US-West 1 (Northern California) Region.)
    • REGION_US_W1
    • REGION_CALIFORNIA
  • 俄勒岡州(US-West 2 (Oregon) Region.)
    • REGION_US_W2
    • REGION_OREGON
  • 愛爾蘭(EU (Ireland) Region.)
    • REGION_EU_W1
    • REGION_IRELAND
  • 新加坡(Asia Pacific (Singapore) Region.)
    • REGION_APAC_SE1
    • REGION_SINGAPORE
  • 日本(Asia Pacific (Japan) Region.)
    • REGION_APAC_NE1
    • REGION_TOKYO
  • 南非(South America (Sao Paulo) Region.)
    • REGION_SA_E1
    • REGION_SAO_PAULO
  • United States GovCloud Region.
    • REGION_US_GOV1
    • REGION_US_GOV1_FIPS

acl檔案權限控制參數(ACL File Privilege Control Parameter):

  • ACL_PRIVATE
    • 只有擁有者才可以讀取/寫入(Owner-only read/write.)
  • ACL_PUBLIC
    • 擁有者可以讀取/寫入,任何人皆可以讀取( Owner read/write, public read.)
  • ACL_OPEN
    • 任何人皆可以讀/寫(Public read/write.)
  • ACL_AUTH_READ
    • 擁有者可以讀取/寫入,授權者可以讀取(Owner read/write, authenticated read.)
  • ACL_OWNER_READ
    • 容器擁有者可以讀取(Bucket owner read.)
  • ACL_OWNER_FULL_CONTROL
    • 容器擁有者擁有完整控制權(Bucket owner full control.)

 儲存類型(Storage Type):

  • STORAGE_STANDARD
    • 標準(Standard storage redundancy.)
  • STORAGE_REDUCED
    • 減少冗餘(Reduced storage redundancy.)

支援檔案類型(Support File mime type:From AWS S3):


  • text/plain
  • image/jpeg
  • image/png
  • image/gif
  • image/bmp
  • image/tiff
  • text/rtf
  • application/msword
  • application/zip
  • audio/mpeg
  • application/pdf
  • application/x-gzip
  • application/x-compressed
  • application/zip

AWS相關連結(AWS Reference Link)

沒有留言:
工具(Tool)


文件(Document)

2012年2月7日 星期二

AWS PHP SDK:cURL error: SSL certificate problem解決方法

沒有留言:
日期:2012-02-07
AWS SDK for PHP 下載:http://aws.amazon.com/sdkforphp/
AWS SDK教學影片:http://aws.amazon.com/articles/SDKs/PHP/4262


參考「AWS SDK教學影片」寫了一個下列的程式去測試AWS SDK



但在測試時,一直遇到下列的錯誤訊息
Fatal error: Uncaught exception 'cURL_Exception' with message 'cURL resource: Resource id #10; cURL error: SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed (cURL error code 60). See http://curl.haxx.se/libcurl/c/libcurl-errors.html for an explanation of error codes.'

2012年2月6日 星期一

建立網站目錄出現「You don't have permission to access」解決方法

沒有留言:
服務平台:Amazon Web Service(AWS)
環境:Amazon Elastic Compute Cloud (Amazon EC2)
工具:putty


在建立新使用者帳號(假設帳號名稱為:NEWACCOUNT)時
Apache預設會將使用者的個人網頁資料夾放在該帳號下的「www」資料夾
但是在建立完「www」資料夾後瀏覽網站時發現出現了下面的訊息
----------------------------------------------------------------------------------------------------
Forbidden
  You don't have permission to access /~NEWACCOUNT/www on this server.
---------------------------------------------------------------------------------------------------- 
檢查了apache的error_log(vim /etc/httpd/logs/error_log)
出現了下列的訊息
[Mon Feb 06 04:29:46 2012] [crit] [client XXX.XXX.XXX.XXX] (13)Permission denied: /home/ NEWACCOUNT /.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable
經過Google大神的幫忙,發現需要改「www」資料夾執行權限
然後將 「www」 資料夾權限改為711後還是不能執行出現一樣Forbidden的訊息,就很納悶到底為什麼
在猜想是帳號權限的問題,還是帳號群組的問題
研究了整個資料夾的結構老半天,最後發現竟然是上層「/home/NEWACCOUNT」的資料夾權限為700
因為資料夾權限的節層關係,外部資料夾沒有權限,所以難怪內部資料夾權限再怎麼改還是沒辦法成功
然後將上層「/home/NEWACCOUNT」的資料夾權限改為711就可以正常執行了
權限設定太嚴謹就是會有這樣的問題,需要層層抽絲剝繭才找的到問題所在XD

2012年2月4日 星期六

TinyMCE編輯按鈕控制變數名稱

沒有留言:
TinyMCE在「example/index.html」範例程式中有列出所有TinyMCE可以使用的所見即所得功能,而下列是所有功能的參數說明,大家可以依照自己的需求,選擇自己需要的功能添加上去即可,而下面是所有功能的控制變數名稱,僅需要把控制變數加入javascript程式碼中的theme_advanced_buttons1~theme_advanced_buttons4變數裡即可






TinyMCE功能按鈕
第一列
  • save:存檔
  • newdocument:新文章
  • |:分隔線
  • bold:字加粗
  • italic:字變成斜體
  • underline:字加底線
  • strikethrough:刪除線
  • justifyleft:靠左對齊
  • justifycenter:置中對齊
  • justifyright:靠右對齊
  • justifyfull:分散對齊
  • styleselect:字體樣式
  • formatselect:段落樣式
  • fontselect:字型樣式
  • fontsizeselect:文字大小
第二列
  • cut:剪下
  • copy:複製
  • paste:貼上
  • pastetext:只貼上文字
  • pasteword:從Word貼上
  • search:搜尋
  • replace:搜尋取代
  • bullist:項目符號(只有符號)
  • numlist:項目符號(有數字)
  • outdent:縮排(減少)
  • indent:縮排(增加)
  • blockquote:引用
  • undo:復原
  • redo:取消復原
  • link:加入 / 編輯網址
  • unlink:取消連結
  • anchor:加入 / 編輯錨點(書籤)
  • image:加入 / 編輯圖片
  • cleanup:移除多餘的文字與程式碼
  • help:說明
  • code:編輯HTML語法
  • insertdate:日期
  • inserttime:時間
  • preview:預覽
  • forecolor:選擇文字顏色
  • backcolor:選擇文字背景顏色
第三列
  • tablecontrols:表格控制
    • 新增一個表格
    • 列的設定
    • 儲存格的設定
    • 在上方加入一列
    • 在下方加入一列
    • 在左邊加入一個欄位
    • 在右邊加入一個欄位
    • 移除表格欄位
    • 分割儲存格
    • 合併表格
  • hr:加入一個水平線
  • removeformat:移除文字上的樣式與格式
  • visualaid:顯示隱藏的東西
  • sub:下標字
  • sup:上標字
  • charmap:加入一個自己設定的文字符號
  • emotions:表情符號
  • iespell:檢查英文文法(IE)
  • media:加入嵌入語法
  • advhr:水平線
  • print:列印
  • ltr:從左邊到右邊
  • rtl:從右邊到左邊
  • fullscreen:放大到整個螢幕
第四列
  • insertlayer:新增網頁圖層
  • moveforward:排在前面
  • movebackward:放到後面
  • absolute:定位
  • styleprops:編輯 CSS 樣式
  • cite:引用
  • abbr:英文縮寫
  • acronym:頭字語 (非一般英文縮寫)
  • del:刪除
  • ins:新增
  • attribs:新增 / 編輯屬性
  • visualchars:顯示隱藏的字
  • nonbreaking:加入不斷行的符號
  • template:使用版型
  • pagebreak:加上分頁符號

ADS