1.jpg
jQuery分類過濾和排序佈局插件-Isotope,jquery-isotope

Isotope是一款效果非常神奇的元素分類過濾和排序佈局jQuery插件。Isotope是Masonry佈局的作者David DeSandro的一款力作,該分類過濾和排序插件允許你以非常簡單和炫酷的方式來隱藏和顯示元素,以及對元素按照指定的規則進行排序。

Isotope可以設置多種佈局方式:masonry佈局、水平佈局、垂直佈局、適合行佈局、適合列佈局等等。

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()




1.png


展示網站





發現了個不錯的jQuery幻燈片插件flexslider,有接近3000 Star,應該說是很靠譜的,下面是簡單使用教程。



引入代碼



所有代碼都可以在flexlslider的Github上獲得。



引入css 文件和js 文件和jQuery 核心代碼:





  1. <link rel="stylesheet" href="flexslider.css">

  2. <script src="jquery.min.js"></script>

  3. <script src="jquery.flexslider-min.js"></script>



複製代碼





HTML 代碼:



  1. <!-- Place somewhere in the <body> of your page -->

  2. <div class="flexslider">

  3.   <ul class="slides">

  4.     <li>

  5.       <img src="slide1.jpg" />

  6.     </li>

  7.     <li>

  8.       <img src="slide2.jpg" />

  9.     </li>

  10.     <li>

  11.       <img src="slide3.jpg" />

  12.     </li>

  13.     <li>

  14.       <img src="slide4.jpg" />

  15.     </li>

  16.   </ul>

  17. </div>



複製代碼







JavaScript 代碼:



  1. $(window).load(function() {

  2.     $('.flexslider').flexslider({

  3.         animation: 'slide',                 // 必備參數,自動滑動

  4.         animationLoop: true,             // 是否循環滑動,默認為true

  5.          itemWidth: 500,                   // 定義每個item寬度,單位為px,默認為100%

  6.          itemMargin: 0,                     // 定義每個item margin,默認為0

  7.          controlNav: false,                 // 是否顯示滑動控制小圓點,默認為true

  8.         directionNav: false,                // 是否顯示左右滑動控制控件,默認為true

  9.         slideshowSpeed: 2000,           // 每次自動滑動間隔時間,默認為7000,單位為ms

  10.          animationSpeed: 500            // 手動點擊滑動時間,默認為600,單位為ms

  11.      });

  12. });



複製代碼



文章出處

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

1.png
測試框架
昨天有寫出一些陽春的測試程式。雖然夠用,但如果要做進階的測試方法或是分析測試過程,顯然要實作出更多功能才能符合需求。但不用擔心,開源的世界裡有非常多前輩,實作出專為測試使用的框架,讓我們寫測試可以輕鬆很多。

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

1.png
有在使用Google Maps的人,多多少少一定都有使用到Google地圖找附近景點餐廳。
 

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

1.png
很多網站成立初期,利用YAHOO或GOOGLE搜尋引擎搜尋自己網站,卻發現在YAHOO或GOOGLE搜尋引擎輸入網站名找不到自己網站,花了大把銀子請網頁設計公司作網站,卻無法達到曝光的效果,下面介紹如何利用免費網站 SiteTag:http://sitetag.us/ 來讓自己網站提升排名及曝光。
首先,先進入到 SiteTag:http://sitetag.us/ 官方網站

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

1.jpg

您的網站為何老是排名在後面呢?除了買廣告之外,有沒有什麼撇步呢?網店日報來告訴您,有哪些基本的SEO優化技巧,做好這6個步驟,您的網站SEO就能事半功倍!
想像一下,「蒐尋引擎」就像爬行的機器蜘蛛,你要餵牠習慣吃的、喜歡吃的食物(內容、結構),牠就能很快地了解你這個網站。我們可以先從以下6個步驟做起。

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()


Google的地圖相當的方便,不但圖資完整,因此也有不少店家,會將Google地圖嵌到網頁中,讓消費者方便找尋,但Google改版後,許多朋友已找到地點,卻不知要如何嵌到網頁中,這個嵌入鈕,還相當的不明顯,所以筆者就花點時間,將它整理,需要的朋友,就操作看看吧!



嵌入Google地圖:



Step1

首先,進到https://www.google.com.tw/maps/,接著在左上角輸入要查尋的地址。



Step2

當找到後,點左上的共享圖示,再點分享和嵌入地圖選項。







Step3

當設定好後,將下方的語法複製起來。



Step4

再貼到網頁中。





Step5

這樣就會出現在網頁中顯示。

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()




1.jpg


 

以下將逐一條列說明SEO優化技巧:

1. 每個網頁的關鍵字最好不要超過4個,最重要的核心關鍵字要提早曝光,如標題。

2. 網站內的描述簡潔。標題盡量以不超過25個字為佳,內容以文繞圖展開,千萬不要發布與內容無關敘述,應以簡潔、內容豐富呈現。自然的將關鍵字安排在開始和結尾的部份,再用最自然的方法將關鍵字合理的分布在內文。

3. 搜索引擎會對圖片分析,網站內的圖片最好是原創,再適當添加alt標籤,如有與標題無關的內容可用成JS或圖片呈現。

4. 網站代碼設計精簡,利於加快網頁讀取的速度,讓搜索引擎蜘蛛spider迅速爬行。

5. 網頁優化seo 每個頁至少出現一次H標籤。

6. 網站空間要穩定。

7. 最好找外部的網站來做為友情連結。

8. 網站外連要秀網址,如:美食類、購物類等等皆可,安排出現在首頁最好,切忌垃圾連結。首頁是網站外連的最關鍵位置,關鍵字應該出現在前3頁。

9. 設計融入div+CSS佈局。與主題相關的JS與框架做兼容優化。

10. 慎選網域名字,最好選用網域名稱的核心的關鍵字。如果新申請的網域名稱,一定要公佈聯絡人訊息。

11 搜索引擎喜歡收錄有XML和HTML的網站。

12. 網站內容應常常更新,勿長時間不更新或大幅度改變。

13. 將網站內連做適當的安排,關鍵字應指到關鍵字頁面。

14. 網頁內容的關鍵字應避免加連結。

15. 製作網站404頁面。與主題無關的頁面,運用Robots.txt禁止。

16. 網站的各式文件,如PDF、doc等檔案提供下載,註明來源。

 
文章出處:NetYea  新竹網頁設計



NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()


很多人架好網站後卻發現YAHOOGOOGLE搜尋不到自己網站
卻不知道哪裡出了問題?其實是因為新建置的網站並沒有被各大搜尋引擎收錄
所以必須由網站主自行到各大網站登錄自己的網站,就像是申請門牌地址一樣
所以到YAHOO的網站登錄,目前是跟BING註冊
所以到該登錄: http://www.bing.com/toolbox/webmaster/

 
註冊完後,進入BING網站填入該網站網址
如: www.xxx.com 並壓 "新增" 提交
2.png

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

1.png
因搜尋引擎改版,網站不得不改https

當網站安裝了SSL後,如何把網址自動轉成https?



在網頁目錄-public_html,有一個檔案叫 .htaccess,編輯檔案內容,然後將以下轉向的規則寫在裡面:



寫法1:

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()



web gzip 測試網站



一、什麼是gzip         

        gzip是一種數據格式,默認且目前僅使用deflate算法壓縮data部分;


        Gzip是一種流行的文件壓縮算法,現在的應用十分廣泛,尤其是在Linux平台。當應用Gzip壓縮到一個純文本文件時,效果是非常明顯的,大約可以減少70%以上的文件大小。這取決於文件​​中的內容。


      利用Apache中的Gzip模塊,我們可以使用Gzip壓縮算法來對Apache服務器發布的網頁內容進行壓縮後再傳輸到客戶端瀏覽器。這樣經過壓縮後實際上降低了網絡傳輸的字節數,最明顯的好處就是可以加快網頁加載的速度。


      網頁加載速度加快的好處不言而喻,除了節省流量,改善用戶的瀏覽體驗外,另一個潛在的好處是Gzip與搜索引擎的抓取工具有著更好的關係。例如Google就可以通過直接讀取gzip文件來比普通手工抓取更快地檢索網頁。在Google網站管理員工具(Google Webmaster Tools)中你可以看到,sitemap.xml.gz 是直接作為Sitemap被提交的。


      而這些好處並不僅僅限於靜態內容,PHP動態頁面和其他動態生成的內容均可以通過使用Apache壓縮模塊壓縮,加上其他的性能調整機制和相應的服務器端緩存規則,這可以大大提高網站的性能。因此,對於部署在Linux服務器上的PHP程序,在服務器支持的情況下,我們建議你開啟使用Gzip Web壓縮。


 

PS:詳情參考:http://baike.baidu.com/item/gzip?fr=aladdin



二、什麼是deflate

        DEFLATE是同時使用了LZ77算法與哈夫曼編碼(Huffman Coding)的一個無損數據壓縮算法。


        它最初是由Phil Katz為他的PKZIP歸檔工具第二版所定義的,後來定義在RFC 1951規範中。


        人們普遍認為DEFLATE不受任何專利所製約,並且在LZW(GIF文件格式使用)相關的專利失效之前,這種格式除了在ZIP文件格式中得到應用之外也在gzip壓縮文件以及PNG圖像文件中得到了應用。


        DEFLATE壓縮與解壓的源代碼可以在自由、通用的壓縮庫zlib上找到。


        更高壓縮率的DEFLATE是7-zip所實現的。AdvanceCOMP也使用這種實現,它可以對gzip、PNG、MNG以及ZIP文件進行壓縮從而得到比zlib更小的文件大小。在Ken Silverman的KZIP與PNGOUT中使用了一種更加高效同時要求更多用戶輸入的DEFLATE程序。


        deflate是一種壓縮算法,是huffman編碼的一種加強。


        deflate與gzip解壓的代碼幾乎相同,可以合成一塊代碼。



三、web服務器處理http壓縮的過程

    1. Web服務器接收到瀏覽器的HTTP請求後,檢查瀏覽器是否支持HTTP壓縮(Accept-Encoding 信息);


    2. 如果瀏覽器支持HTTP壓縮,Web服務器檢查請求文件的後綴名;


    3. 如果請求文件是HTML、CSS等靜態文件,Web服務器到壓縮緩衝目錄中檢查是否已經存在請求文件的最新壓縮文件;


    4. 如果請求文件的壓縮文件不存在,Web服務器向瀏覽器返回未壓縮的請求文件,並在壓縮緩衝目錄中存放請求文件的壓縮文件;


    5. 如果請求文件的最新壓縮文件已經存在,則直接返回請求文件的壓縮文件;


    6. 如果請求文件是動態文件,Web服務器動態壓縮內容並返回瀏覽器,壓縮內容不存放到壓縮緩存目錄中。


下面是兩個演示圖:


未使用Gzip:


1.png

 

開啟使用Gzip後:


 


2.png



 

四、gzip與deflate區別

        deflate使用inflateInit(),而gzip使用inflateInit2()進行初始化,比inflateInit()多一個參數: -MAX_WBITS,表示處理raw deflate數據。因為gzip數據中的zlib壓縮數據塊沒有zlib header的兩個字節。使用inflateInit2時要求zlib庫忽略zlib header。在zlib手冊中要求windowBits為8..15,但是實際上其它範圍的數據有特殊作用,見zlib.h中的註釋,如負數表示raw deflate。        


        Apache的deflate變種可能也沒有zlib header,需要添加假頭後處理。即MS的錯誤deflate (raw deflate).zlib頭第1字節一般是0x78, 第2字節與第一字節合起來的雙字節應能被31整除,詳見rfc1950。例如Firefox的zlib假頭為0x7801,python zlib.compress()結果頭部為0x789c。        


        deflate 是最基礎的算法,gzip 在deflate 的raw data 前增加了10 個字節的gzheader,尾部添加了8 個字節的校驗字節(可選crc32 和adler32) 和長度標識字節。


        安裝它們的Apache Web服務器版本的差異。Apache 1.x系列沒有內建網頁壓縮技術,所以才去用額外的第三方mod_gzip 模塊來執行壓縮。而Apache 2.x官方在開發的時候,就把網頁壓縮考慮進去,內建了mod_deflate 這個模塊,用以取代mod_gzip。雖然兩者都是使用的Gzip壓縮算法,它們的運作原理是類似的。     


 

        壓縮質量。mod_deflate 壓縮速度略快而mod_gzip 的壓縮比略高。一般默認情況下,mod_gzip 會比mod_deflate 多出4%~6%的壓縮量。


        對服務器資源的佔用。一般來說mod_gzip對服務器CPU的佔用要高一些。mod_deflate是專門為確保服務器的性能而使用的一個壓縮模塊,mod_deflate需要較少的資源來壓縮文件。這意味著在高流量的服務器,使用mod_deflate可能會比mod_gzip加載速度更快。即在服務器性能足夠的情況下,使用mod_gzip,雖然會耗費服務器性能,但是值得(壓縮更快更好);在服務器性能不足的情況下,使用mod_deflate  確保性能。


 

        從Apache 2.0.45開始,mod_deflate 可使用DeflateCompressionLevel 指令來設置壓縮級別。該指令的值可為1(壓縮速度最快,最低的壓縮質量)至9(最慢的壓縮速度,壓縮率最高)之間的整數,其默認值為6(壓縮速度和壓縮質量較為平衡的值)。這個簡單的變化更是使得mod_deflate 可以輕鬆媲美mod_gzip 的壓縮。



五、開啟mod_gzip、mod_deflate

        Apache上利用Gzip壓縮算法進行壓縮的模塊有兩種:mod_gzip 和mod_deflate。要使用Gzip Web壓縮,請首先確定你的服務器開啟了對這兩個組件之一的支持。在Linux服務器上,現在已經有越來越多的空間商開放了對它們的支持,有的甚至是同時支持這兩個模塊的。例如目前Godaddy、Bluehost及DreamHosts等空間商的服務器都已同時支持mod_gzip 和mod_deflate。        


 

        通過查看HTTP頭,我們可以快速判斷使用的客戶端瀏覽器是否支持接受gzip壓縮。若發送的HTTP頭中出現以下信息,則表明你的瀏覽器支持接受相應的gzip壓縮:


    Accept-Encoding: gzip 支持mod_gzip    Accept-Encoding: deflate 支持mod_deflate     Accept-Encoding: gzip,deflate 同时支持mod_gzip 和mod_deflate

        mod_deflate 是apache自帶的模塊,當然是在apache 2後支持的,以前1的時候是mod_gzip,啟用mod_deflate可以很好的為節省網頁大小,只不過是佔用服務器的資源和內存.用戶看到頁面的速度會大大加快。在apache2.0以上(包括apache2.0)的版中gzip壓縮使用的是mod_deflate模塊


1.查看apache的安裝模式

apachectl -l


發現mod_so.c,ok可以動態加模塊,不用重新編譯。


2.安裝mod_deflate

找到原有的apache安裝包安裝mod_deflate

cd httpd-2.0.59/modules/filters

/usr/local/apache2/bin/apxs -i -c -a mod_deflate.c


PS:apxs命令參數說明:

        -i此選項表示需要執行安裝操作,以安裝一個或多個動態共享對像到服務器的modules目錄中。

        -a此選項自動增加一個LoadModule行到httpd.conf文件中,以激活此模塊,或者,如果此行已經存在,則啟用之。

        -A與-a選項類似,但是它增加的LoadModule命令有一個井號前綴(#),即此模塊已經準備就緒但尚未啟用。

        -c此選項表示需要執行編譯操作。它首先會編譯C源程序(.c)files為對應的目標代碼文件(.o),然後連接這些目標代碼和files中其餘的目標代碼文件(.o和.a),以生成動態共享對象dsofile 。如果沒有指定-o選項,則此輸出文件名由files中的第一個文件名推測得到,也就是默認為mod_name.so 。


 

3、修改Apache的http.conf文件,去除mod_deflate.so前面的註釋


在您的主機下建立下列敘述:





  1. <IfModule mod_deflate.c>

  2.   AddOutputFilterByType DEFLATE text/html

  3.   AddOutputFilterByType DEFLATE text/css

  4.   AddOutputFilterByType DEFLATE text/javascript

  5.   AddOutputFilterByType DEFLATE text/xml

  6.   AddOutputFilterByType DEFLATE text/plain

  7.   AddOutputFilterByType DEFLATE image/x-icon

  8.   AddOutputFilterByType DEFLATE image/svg+xml

  9.   AddOutputFilterByType DEFLATE application/rss+xml

  10.   AddOutputFilterByType DEFLATE application/javascript

  11.   AddOutputFilterByType DEFLATE application/x-javascript

  12.   AddOutputFilterByType DEFLATE application/xml

  13.   AddOutputFilterByType DEFLATE application/xhtml+xml

  14.   AddOutputFilterByType DEFLATE application/x-font

  15.   AddOutputFilterByType DEFLATE application/x-font-truetype

  16.   AddOutputFilterByType DEFLATE application/x-font-ttf

  17.   AddOutputFilterByType DEFLATE application/x-font-otf

  18.   AddOutputFilterByType DEFLATE application/x-font-opentype

  19.   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

  20.   AddOutputFilterByType DEFLATE font/ttf

  21.   AddOutputFilterByType DEFLATE font/otf

  22.   AddOutputFilterByType DEFLATE font/opentype

  23.  

  24. # For Olders Browsers Which Can't Handle Compression

  25.   BrowserMatch ^Mozilla/4 gzip-only-text/html

  26.   BrowserMatch ^Mozilla/4\.0[678] no-gzip

  27.   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

  28. </IfModule>



複製代碼



或是在.htaccess檔案建立敘述



  1. #GZIP压缩模块配置<ifmodule mod_deflate.c>

  2. #启用对特定MIME类型内容的压缩

  3. SetOutputFilter DEFLATESetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|exe|t?gz|zip|bz2|sit|rar|pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary #设置不对压缩的文件AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript #设置对压缩的文件</ifmodule>



複製代碼



如要增加檔案期限加入代碼



  1. <IfModule mod_expires.c>

  2.     ExpiresActive on

  3.     ExpiresByType image/jpg "access plus 1 month"

  4.     ExpiresByType image/jpeg "access plus 1 month"

  5.     ExpiresByType image/gif "access plus 1 month"

  6.     ExpiresByType image/png "access plus 1 month"

  7.     ExpiresByType text/javascript "access plus 1 month"

  8.     ExpiresByType application/javascript "access plus 1 month"

  9.     ExpiresByType text/css "access plus 1 month"

  10. </IfModule>



複製代碼







5、對指定的文件配置緩存的生存時間,去除mod_headers.so模塊前面的註釋
Apache配置文件路徑是:/usr/local/apache/conf/httpd.conf

 

打開此文件查找如下兩行代碼:




  1. LoadModule deflate_module modules/mod_deflate.so

  2. LoadModule headers_module modules/mod_headers.so



複製代碼

前面沒有#符號即為正常的,若是有#符號則表示被註釋掉了,刪除前面的#符號即可。

在Apache 配置文件/usr/local/apache/conf/httpd.conf 的最後添加:




  1. <IfModule deflate_module>

  2. SetOutputFilter DEFLATE

  3. SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

  4. SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary

  5. SetEnvIfNoCase Request_URI .(?:pdf|doc|avi|mov|mp3|rm)$ no-gzip dont-vary

  6. AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

  7. AddOutputFilterByType DEFLATE application/x-javascript

  8. </IfModule>



複製代碼

註解:

IfModule deflate_module是判斷如果deflate_module模塊加載的話,執行里面的配置。

SetOutputFilter DEFLATE是設置輸出為deflate壓縮算法。

SetEnvIfNoCase Request_URI是排除一些常見的圖片,影音,文檔等類型的後綴,不壓縮。

AddOutputFilterByType DEFLATE是對常見的文本類型,如html,txt,xml,css,js做壓縮處理。

6、在根目錄中新建.htaccess文件,定制壓縮規則

 



  1. #文件缓存时间配置

  2. <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css)[        DISCUZ_CODE_2        ]quot;>

  3. Header set Cache-Control "max-age=2592000"

  4. </FilesMatch>



複製代碼



裡面的文件MIME類型可以根據自己情況添加,至於PDF 、圖片、音樂文檔之類的這些本身都已經高度壓縮格式,重複壓縮的作用不大,反而可能會因為增加CPU的處理時間及瀏覽器的渲染問題而降低性能。所以就沒必要再通過Gzip壓縮。通過以上設置後再查看返回的HTTP頭,出現以下信息則表明返回的數據已經過壓縮。即網站程序所配置的Gzip壓縮已生效。



Content-Encoding: gzip

注:不管使用mod_gzip 還是mod_deflate,此處返回的信息都一樣。因為它們都是實現的gzip壓縮方式。








遇到的問題以及解決:



1:apach2 安裝mod_deflate後restart,直接



load /opt/apache/modules/mod_deflate.so into server: /opt/apache/modules/mod_deflate.so: undefined symbol: deflate 異常的痛苦



什麼ldd mod_deflate.so後再export LIB_LIBRARY_PATH呀,都試了N次,google也go了N天



終於在google上go出來一篇文章,終於解決,方法如下: vi /usr/local/apache2/bin/apr-config 修改LDFLAGS=" " 為LDFLAGS="-lz" 然後再apxs -ica mod_deflate.c 就OK了.



2:apach2安裝mod_deflate後restart,直接



module deflate_module is built-in and can't be loaded ...



這說明該模塊已經安裝,不必再LoadModule deflate_module啟用它。



只需做<ifmodule mod_deflate.c>配置




參考文章

https://my.oschina.net/rasine/blog/343769

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()


在上篇 如何利用google adwords 做關鍵字廣告



這篇介紹串接 google analytics監看adwords廣告轉換成效



影片說明





點選 Adwords 右上角 工具與設定 -> google analytics(分析)





點選左下側 設定

如沒有帳戶請先建立帳戶

有帳戶點 建立資源





點擊 網站 (評估您的網站)





填入 名稱及網址





這時會給 全域網站代碼 (gtag.js)

把這段代碼放入你的網站每頁的底部







追蹤代碼設定好以後

點選 目標->新增目標









拉到最下面->自訂





填入 目標名稱

選擇 目標網址







實際連結目標(網址不用填,填目標頁面名稱就好)

如:http://www.sinpipe.com/appointment.html 管乾淨 線上預約 這網址

只要填 /appointment.html

儲存即可





再產生一個目標監控停留時間(客戶停留在網站的時間)

填入名稱

類型:時間長度





時間選4分鐘





這時已經產出兩個目標了





回到Adwords 點選 工具與設定->轉換





點選 +





選擇 匯入->google analytics





選擇剛剛建立的目標 線上預約(剛剛不是建立兩個目標?怎麼只有一個)

如果要選另一個,請 等待幾分鐘同步後 重複匯入的動作 即可





這時已經匯入目標了





重複匯入的動作 即可看見另一個目標

點選 ˋ轉換動作 線上預約





編輯設定





計算方式 -> 每次

點閱後轉換回溯期 -> 60天

歸因模式 -> 線性

儲存







現在可監測廣告轉換的結果了

以下是之前建立的目標轉換來說明結果





數據轉換需要時間(從一個禮拜到一個月不等才會有結果)

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。