2013年1月28日 星期一

[appserv]設定自己的apache server的Not Found 頁面


我想大家對這個畫面應該很熟悉,這就是常常看到的Not Found頁面,
最近我用自己的電腦當server學做後台,輸錯網址就是這個錯誤,突然想到網路上很多人自製好看Not Found page, 所以我也來看看怎麼設定自己的not found頁面。

因為我的apache是用appserv去安裝的,所以設定上可能不能符合一般大眾。
這次要設定的是server根目錄的404 not found page,如果你是要針對各個資料夾(或說自己server底下各個網站的not found,可能要搜尋一下怎麼設定.htaccess檔案,這個我還沒做)

所以呢,首先先設定httpd.conf裡面的404 page的頁面

step 1 :
若跟我一樣是安裝在C槽,請找到這個路徑的httpd.conf這個檔案
C:\AppServ\Apache2.2\conf\httpd.conf,接著請以編輯器打開



step 2 :
找到512行(或者搜尋 ErrorDocument)
如果你移除註解了,那就會將missing.html的頁面當作404的頁面
(你也可以自製頁面,不一定檔名也是要missing.html)

所以step3就是移除這個註解(移除#號),然後到www/目錄底下建立missing.html



step 3 :
移除註解後存檔。


step 4 :
在www/目錄底下建立missing.html(是要手動建立)。


step 5 :
編輯missing.html檔案,你可以美化它...




step 6 :
然後,重點,重啟apache


step7:

 在瀏覽器輸入一個不存在的網頁畫面,來看看這個not found畫面有無誤
(裡面文字是我亂打測試用)


美化後。。。。(很沒意義的美化XD 其實使用者並不會知道甚麼是404 page><)
應該要做一些說明或是解釋/轉頁等功能的畫面比較好一點XD

接下來可以好好美化自己的not found page

網路上有很多參考:

404页面最佳实践

30多个很酷的404错误页面设计




2013年1月22日 星期二

apache設定-網站目錄不要被看到

恩,這標題還真難下耶,其實我沒有很懂apache,如果有錯敬請拍磚(<<-是這樣用嘛!?xd
簡單來講呢,就是說,如果網站的目錄裡,沒有index.html/.htm/或.php
像這樣的目錄會很麻煩的就是,當輸入那個網址,目錄裡的東西會被一覽無疑。
說方便也是有點方便,唯一不好的就是安全性,
所以要靠一些設定使目錄底下的東西不要被看見。


這是我的apache的某個目錄:
一進來就被發現我有兩張png圖檔,還可以點。..
apache裝好之後預設就是可以看到目錄底下的東西,所以要自己設定...

修改apache目錄底下httpd.conf這支檔案(我用的是XAMPP)
(\xampp\apache\conf\httpd.conf)約略223行,或關鍵字尋找indexes。
(Hint:看你裝的是哪種apache,或是放在什麼作業系統,可能要找一下httpd.conf這個檔案)

找到Options Indexes FollowSymLinks Includes ExecCGI
將這行註解 #Options Indexes FollowSymLinks Includes ExecCGI
或者不用註解,移除Indexes字樣。
重啟apache。


重啟後再回到那個目錄看一下,就會變成access forbidden了
完成 !
以前我一直覺得apache就一個server而以,沒想到有這麼多設定可以研究!
有時間的話也可以看看HTTP403的錯誤原因是什麼。

2013年1月14日 星期一

關於github的README.md怎麼寫呢?

自從上個月開始用github for window的介面之後,然後又有一次看到某個表單驗證的github的README.md檔寫的超正,圖文並茂排版有序,到底是怎麼辦到的?!
後來查了一下才知道是有一定的格式可以把README.md檔寫得很漂亮

如果想知道README.md怎麼寫:

1. 下載別人的README.md ,看別人怎麼寫,對照github上的畫面
    我自己是覺得看別人寫最快
2. 直接看規格

我自己是首先,新增README.md檔
第二,用編輯器打開他,(如用notepad++的話,如要寫中文內容,記得使用UTF-8編碼<檔首無BOM>)
第三,開始寫內容
第四,上傳到github之後,可在github的介面上編輯README.md檔,順便preview,就可以慢慢知道怎麼寫了,原來....其實也沒有很複雜

不過我後來發現,按下github的RAW,可以看到README.md完整的寫法,
連下載都不用下載,真棒...



按了RAW之後會轉到下一頁,看到完整README.md格式





2013年1月9日 星期三

PHP - 點擊率的MySQL

在該筆文章或該筆資料的詳細頁面寫入:

 <?php  
 if(isset($_GET['id']) && $_GET['id']!==""){  
   $news_id = $_GET['id'];  
      //點擊次數+1  
   $add_rate_sql = "UPDATE `news` SET `click_rate` = click_rate+1 WHERE id='$news_id'";       
   $result = mysql_query($add_rate_sql);  
 ?>            
 <h3>熱門消息 Pop News</h3>  
 <?php  
      $show_rate_num_sql="SELECT * FROM `news` WHERE `show_in_front`=1 ORDER BY `click_rate` DESC LIMIT 8";  
      //這裡的show_in_front的資料會是0或1,用來代表該文章是否要顯示於前台
      $result=mysql_query($show_rate_num_sql);  
      if(mysql_num_rows($result)>0)  
      {  
           $num=mysql_num_rows($result);  
           for($i=0;$i<$num;$i++){  
           $row=mysql_fetch_array($result);  
           ?>  
           <a href="news_detail.php?id=<?php echo $row['id'];?>"><?php echo $row['title'];?>(<?php echo $row['click_rate']?>)     </a>   
           <?php  
      }  
      }  
 ?>  

google analytics筆記(二)-Tracking Basics

參考網址來源:Event Tracking - Web Tracking (ga.js)

google analytics筆記(二)-關於事件
我第一次看這份文件,都是英文有點麻煩,三番兩次去拜訪這個網站就要再理解一次,所以暫時先用自己看得懂得文字做個筆記,說是翻譯也很奇怪,因為我翻得也不是很好....,我很抱歉...google分析不是我的專業....,如果錯誤敬請煩請糾正or直接看英文版,謝謝。另外asynchronous這個單字,曾經在網路上看到有人翻"異步",但此文我是翻"非同步"。

事件追蹤是一種有用的方法,你可以用他來紀錄使用者跟網站元素之間的互動,例如flash驅動的導航/menu/下拉選單。事件追蹤,採用了面向對象(object-oriented model)的模型,你可以用它來收集和分類不同類型的網頁互動對象。


只要你有嵌入ga.js檔,您將常用的事件追蹤有:
  • Any Flash-driven element, like a Flash website, or a Flash Movie player
    任何Flash驅動的元素,像一個Flash網站,Flash影片播放器
  • Embedded AJAX page elements嵌入式AJAX頁面元素
  • Page gadgets 網頁小工具
  • File downloads文件下載
  • Load times for data加載時間數據

另外你可以....
# 預先確定的所有你要追蹤的元素。
# 採用一貫和明確的命名約定。


設定事件追蹤

在你要查看事件跟蹤結果之前,你必須在你的網站上執行以下的步驟:

1.在您的網站上設置追蹤代碼。請確保您已設置追蹤代碼在你的網站上。有關這方面的設定,請看Tracking Sites
2.在頁面中的要被追蹤的物件,或是widget,或是flash,呼叫_trackEvent()方法。

_trackEvent()的參數有:
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

*category (必填)
The name you supply for the group of objects you want to track.
你要追蹤的對象群組名稱

*action (必填)
A string that is uniquely paired with each category, and commonly used to define the type of user
 interaction for the web object.
一個字串,與每個類別成對。

*label (可選)
An optional string to provide additional dimensions to the event data.
可選的字串符,以提供額外的事件數據尺寸。

*value (可選)
一個整數(int),你可以利用它提供的用戶事件的數值數據。
An integer that you can use to provide numerical data about the user event.

*non-interaction (可選)
一個bool值,當設為true時,表示事件點擊將不會被使用在反彈率計算。(the event hit will not be used in bounce-rate calculation.)


3.查看報告。一旦事件追蹤已成立並在您的網站上一天後,可到報告的內容部分並查。


剖析事件追蹤

事件追蹤的數據直接映射到Analytics(分析)報告中的介面,具有以下組件:
  • categories
  • actions
  • labels
  • values
  • implicit count

一個簡單的例子說明如何使用事件追蹤的方法在您的網頁上的視頻播放連結來記錄用戶的互動: <a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>



2013年1月8日 星期二

google analytics筆記(一)-Tracking Basics


原文網址來源:Tracking Basics (Asynchronous Syntax)

 Google Analytics的追蹤基礎教學(非同步語法) 
 && 如何架設追蹤代碼在自己的網站 

我第一次看這份文件,都是英文有點麻煩,三番兩次去拜訪這個網站就要再理解一次, 所以暫時先用自己看得懂得文字做個筆記,說是翻譯也很奇怪, 因為我翻得也不是很好....,我很抱歉...google分析不是我的專業....,如果錯誤敬請煩請糾正or直接看英文版,謝謝。

另外asynchronous這個單字,曾經在網路上看到有人翻"異步",但此文我是翻"非同步"。

這份文件(上面的網址來源)包含了如何使用google分析的追蹤語法(非同步追蹤語法)在自己的網站上(主要使用在"Web" Tracking),以及包含了最新的語法。

有了這份版本的追蹤語法,您也可以將Analytics(分析)代碼放在網頁頁面中(他並不會延遲後續頁面內容的渲染),而這些代碼幾乎都是javascript語法。

另外,官方文件也寫道,你可以從 Migration Examples 這個頁面中比較每個步驟的傳統語法(traditional)以及非同步語法(asynchronous syntaxes)的不同。
[恩..雖然我不太懂traditional是指什麼...第一次看這份文件]

內容大綱:
  • 快速開始Tracking Code - Tracking Code Quickstart 
  • 告訴你這個非同步語法是什麼運作的 ? -How the Asynchronous Syntax Works 
  • 追蹤HTML的事件 -Tracking with HTML Event Handlers 
  • 將函數(function)推到佇列-Pushing Functions onto the Queue 
  • 一次push好幾個令命 -One Push, Multiple Commands 
  • 分割的代碼片段 -Splitting the Snippet 
  • 告訴你幾個要避免的陷阱 -Avoiding Common Pitfalls 
  • 禁用/停止追蹤 -Disabling Tracking

快速開始Tracking Code 
google分析的代碼是一段一段小小的js代碼並且複製貼上到你的頁面code,另外你如果要讓你的網站被google分析追蹤到的話,首要任務是你必須埋ga.js這個javascript在你的網站代碼裡面,請複製下面的code,將'UA-XXXXX-X'的字樣換成你的web property ID
(這個需要替換web property ID的地方在很多小範例都會遇到,有些地方就不再贅述,知道要換成自己的web property ID就好了)。 並且把這段放在網頁html標籤的
head標籤結尾之前 before the closing tag。 如果你需要做多其他的追蹤跟方法,你可以參考其他的API或者是看Usage Guide。

 <script type="text/javascript">  
  var _gaq = _gaq || [];  
  _gaq.push(['_setAccount', 'UA-XXXXX-X'/*->這裡要換成你的web property ID*/]);  
  _gaq.push(['_trackPageview']);  
  (function() {  
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
  })();  
 </script>  

上面的代碼使用_setAccount去設定你的網站web property ID,然後調用_trackPageview送出追蹤的資料到google分析的伺服器。

 [官方網站的重要提示] 如果你是從traditional的代碼改用asynchronous的代碼,你應該先刪掉你現有的追蹤代碼。google不建議這兩種代碼一次使用在同一個頁面, 如果你有這方面的困擾,你可參考Migrating to Async.

告訴你這個非同步語法是什麼運作的 ?
[這一段簡單解說如何運作]
 這個 _gaq 的物件(object)是讓整個非同步語法能夠運做的最大可能what makes the asynchronous syntax possible(可以說一定要有建立這個物件,你才有辦法做追蹤),他所表現的行為是ㄧ個佇列(可上網搜尋什麼是堆疊(Stack)與佇列(Queue)=>簡單來說佇列是一種先進先出(First In first Out)的資料儲存結構),集合API的調用,直到的ga.js準備執行他們時。

想像你要加入一個東西到一列隊伍中,使用_gaq.push這個方法(method)就是這種感覺。 
當你要push一個API呼叫到佇列,你必須將它從傳統的JavaScript語法轉換成命令陣列(Command arrays)。 這個命令陣列(Command arrays)只是一個符合一定格式的javascript的陣列,在這個命令數組(Command arrays)的第一個元素(element) 是你要呼叫的追蹤對象的方法(the tracker object method you want to call),他的型別必須是ㄧ個字串(String),剩下的元素是你想傳遞給追蹤對象方法的參數,這些可以是任意的javascript值。 The following code calls _trackPageview() using the traditional syntax: 下面的代碼採用傳統的語法調用_trackPageview():

 var pageTracker = _gat._getTracker('UA-XXXXX-X'/*這裡要換成你的web property ID*/);  
 pageTracker._trackPageview();  

The equivalent code in the asynchronous syntax requires two calls to _gaq.push. 在非同步語法的代碼必須要呼叫兩個_gaq.push :
 _gaq.push(['_setAccount', 'UA-XXXXX-X'/*這裡要換成你的web property ID*/]);  
 _gaq.push(['_trackPageview']);  

在這個非同步語法,跟踪對象的創建是隱含的(implied),但我們仍需要一個方法去設定我們的web property ID給這個tracker(追蹤器),所以呢~_setAccount這個方法就是提供這種功能,所有其他的追蹤對象方法在傳統與非同步的tracker都是一樣的,只是語法不同

追蹤HTML的事件

非同步的追蹤語法也可以用於DOM事件處理程序,下面就示範了當一個按鈕被點擊(click)時他產生了一個事件。

 <button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"/>i am button</button><!--這裡官網寫<button>-->  
即使按一下這個按鈕,瀏覽器完成加載ga.js程式(the browser has finished loading ga.js),該事件將被捕獲並最終執行。 如果是使用傳統的追蹤語法,在這種情況下,瀏覽器可能會拋出一個異常。

Pushing Functions onto the Queue- 將函式(function)推到佇列
除了命令陣列(command arrays),你還可以將函式對象(物件)push到_gaq這個佇列上,這個函式可以包含像command arrays的任意javascript, 他們的執行順序會被壓入到_gaq,這種技術是調用(call)追蹤代碼API的返回值(This technique is useful for calling the tracking APIs that return values),比方說下面的語法建立一個連結url而且設置href屬性給連結的結果。
 _gaq.push(function() {  
  var pageTracker = _gat._getTracker('UA-XXXXX-X');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  

上面的例子使用_gaq創見一個追蹤的對象,但是因為它被分配到一個局部變量,在函數外的代碼不能使用它。如果你想要建立一個可以用在很多地方被訪問的對象,您可以使用_gat._createTracker的方法來創建一個永久的,全局可訪問的對象。下面的代碼演示了如何實現這一點。
 _gaq.push(function() {  
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  
 _gaq.push(['myTracker._trackPageview']);  

The example above creates an asynchronous tracker inside the function and then references it later by name in the command array. 上面的例子創建一個非同步的追蹤在函數內部,然後引用它的名字在命令陣列。 The opposite use case is also possible. For example, if you need to use an asynchronous tracker object created via a previously pushed command array, use the _gat._getTrackerByName method. The following code demonstrates how it works. 相反的使用情況下也是可能的(語法順序反過來寫的話)。 例如,如果你需要使用非同步語法追蹤透過之前push的命令陣列創建的對象,使用_gat._getTrackerByName方法。下面的代碼演示它是如何工作的。
 _gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);  
 _gaq.push(function() {  
  var pageTracker = _gat._getTrackerByName('myTracker');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  

一次push好幾個令命 -One Push, Multiple Commands
你可以用以下的方法,取而代之每次調用就要再寫入_gaq.push(...)
 _gaq.push(  
  ['_setAccount', 'UA-XXXXX-X'],  
  ['_setDomainName', 'example.com'],  
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],  
  ['_trackPageview']  
 );  

這個過程是因為_gaq.push方法模仿Array.push的方法,它允許調用一次推進多個項目。 推到多個追蹤器的命令也是可以運作。Pushing commands to multiple trackers also works.
 _gaq.push(  
  ['_setAccount', 'UA-XXXXX-1'],  
  ['_trackPageview'],  
  ['b._setAccount', 'UA-XXXXX-2'],  
  ['b._trackPageview']  
 );  

分割的代碼片段 
如果你喜歡把Analytics(分析)的語法放在頁面的底部,你應該知道,你不必把所有的片段都放到頁面的底部。 非同步代碼段劈成兩半的頁面可能看起來像這樣:
 <html>  
 <head>  
  <script type="text/javascript">  
   var _gaq = _gaq || [];  
   _gaq.push(['_setAccount', 'UA-XXXXX-X']);  
   _gaq.push(['_trackPageview']);  
  </script>  
 </head>  
 <body>  
  <p>Page Content</p>  
  <script src="some_random_script.js"></script>  
  <p>Page Content</p>  
  <script type="text/javascript"> (function() {  
   var ga = document.createElement('script');   ga.type = 'text/javascript'; ga.async = true;  
   ga.src = ('https:'  == document.location.protocol ? 'https://ssl'  : 'http://www') + '.google-analytics.com/ga.js';  
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
   })();  
   </script>  
 </body>  
 </html>  


告訴你幾個要避免的陷阱
當使用的非同步或傳統的語法,請記住以下幾點:
方法名稱區分大小寫 
 _gaq.push(['_trackpageview']);  // 不行  
 _gaq.push(['_trackPageview']);  // good  

使用正確的方法名稱 :
 _gaq.push(['_setDomain', 'example.com']);    // 不行  
 _gaq.push(['_setDomainName', 'example.com']);  // good  

只有字串才能放在''(引號)之內
只要傳遞的值不是ㄧ個字串,如一個bool,object literals,functions,arrays(陣列),不能帶引號。 當你傳遞的東西是要被解釋為字串,只能使用引號。
 _gaq.push(['_setAllowLinker', 'false']);  // 不行  
 _gaq.push(['_setAllowLinker', false]);   // good  

確保字串不包含前導或尾隨的空白
 _gaq.push(['_setAccount', ' UA-65432-1']);  // 不行  
 _gaq.push(['_setAccount', 'UA-65432-1']);   // good  

禁用/停止追蹤 Disabling Tracking

在某些情況下,可能需要禁用頁面上的google 分析的追蹤代碼,而無需刪除程式碼片段。例如,你可以這樣做,如果你的網站的隱私政策包括訪問者選擇退出的google分析的追蹤。

ga.js 追蹤程式碼片段包括一個window property屬性,當設置他為true時,禁用將數據發送到google 分析。當谷歌Analytics(分析)設置了一個cookie,或將數據發送回Google 分析服務器,它會檢查是否該屬性設置為true。如果是的話,它會產生同樣的效果如果訪問者在google分析停用瀏覽器安裝插件。 要禁用追蹤,下面的window屬性設置為true:
 window['ga-disable-UA-XXXXXX-Y'] = true;  

這個window屬性必須設定在追蹤代碼被呼叫之前(before the tracking code is called.)。 此屬性必須被設置在每一頁你想禁用google分析的追蹤頁面上。如果屬性未設置或設置為false,那麼就會照常追蹤。


END.(終於看完...

2013年1月7日 星期一

[練習]insert data into Table by javascript

練習由JavaScript塞資料到table


 <!DOCTYPE HTML>  
 <html>  
 <head>  
 <title>Example:insert data into Table by javascript</title>  
 <script src="http://code.jquery.com/jquery-latest.js"></script>  
 </head>  
 <body>  
      <style>  
      thead{background:#999}  
      th,td{border:1px solid #999;padding:2px}  
      </style>  
      <h1>Example:Insert data into Table by Javascript</h1>  
      <table>  
           <thead><th>ID</th><th>Author</th><th>Cat</th><th>title</th><th>Has_image</th><th>Date</th></thead>  
           <tbody><!--Insert data by Javascript這裡要用下面的js塞資料--></tbody>  
           <tfoot></tfoot>  
      </table>  
 <footer>  
 <script>  
 /*  
 *Subject:Insert data into Table by Javascript  
 *Date  : 2012-12-28  
 *Author : Win  
 */  
 $(function(){  
 /* 簡單的資料結構 
 *id       |  String  
 *author   |  String  
 *cat      |  String  
 *title    |  String       
 *has_img  |  String  0=>no images 1=>has  
 *date     |  String   
 */  
 var tbody_cnt_ary = [  
 /*fake data*/ /*tbody_cnt_ary means the content for tbody*/  
 {id:"1",author:"WinWu",cat:"Life",title:"Happy New Year!",has_img:"0",date:'03:47:22'},  
 {id:"2",author:"TestWu",cat:"Life",title:"How to Clean Your..?",has_img:"0",date:'03:47:22'},  
 {id:"3",author:"FriWu",cat:"Career",title:"Hust Try to Jump to...",has_img:"0",date:'03:47:22'},  
 {id:"4",author:"Yi Wu",cat:"Life",title:"Is your work...",has_img:"1",date:'03:47:22'},  
 {id:"5",author:"YingWu",cat:"News",title:"Sometimes we...",has_img:"1",date:'03:47:22'},  
 {id:"6",author:"Anny",cat:"Career",title:"Frontend is only?...",has_img:"0",date:'03:47:22'},  
 {id:"7",author:"Irene",cat:"Skill",title:"Why server-side ?...",has_img:"1",date:'03:47:22'},  
 ];  
 var num = tbody_cnt_ary.length;  
 if(num>0)  
 {  
      for(i=0; i<num; i++){  
           $('table'/*select the element*/).find('tbody').append(  
           '<tr class="y1"><td class="x1">'+tbody_cnt_ary[i].id+  
           '</td><td class="x2">'+tbody_cnt_ary[i].author+  
           '</td><td class="x3">'+tbody_cnt_ary[i].cat+  
           '</td><td class="x4">'+tbody_cnt_ary[i].title+  
           '</td><td class="x5">'+tbody_cnt_ary[i].has_img+  
           '</td><td class="x6">'+tbody_cnt_ary[i].date+  
           '</td></tr>');  
      };  
 }  
 });  
 </script>  
 </footer>  
 </body>  
 </html>  

[note]尋找課程/演講/聚會的資源

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...