"網站設計與開發"共有158篇文章

首頁  /  新知分享  /  網站設計與開發

PhpStorm 開發 Magento 外掛工具介紹(一)

說到地表最強的 PHP 開發 IDE ,絕對是屬於 Jetbrains 公司所開發的 PhpStorm ,並且其支援大量的外掛套件提供給我們使用,而我們今天分享的是 PhpStorm 上兩個好用的外掛小工具,可以大幅度提升 Magento 的開發效率唷!   1.Magento 2  工具 顧名思義,這是專門為 Magento 2.0 以上設計的套件。Magento 在開發過程中會遇到不少的 xml 定義檔,而這個套件就是幫大家清楚的把 xml 定義檔設定好,如果有遇到錯誤的 Namespace ,會自動加註紅色毛毛蟲底線,這樣就能夠快速的知道 xml 的錯誤在哪邊。  

電商小知識 – 未完成結帳的秘辛

69.23%,這是多數電商網站的平均未完成結帳之購物車的比率。 很驚人嗎? 如此高的驚人的未完成結帳比率,在電子商務日漸發達的今天其實是個必然的結果。 為什麼會這麼說呢? 電商網站消除了傳統銷售方式的距離障礙,且購物途中沒有任何第三者會來打擾,大多數的人常常在電商網站上只看不買,甚至比價,又或者是先把商品加入購物車,等哪天想到了再來結帳,諸多原因導致未結帳完成比率居高不下。   根據量化統計,事實上在美國有58.6%的線上消費者在過去三個月都曾有未完成結帳的購物紀錄,理由大多是「我只是想先看看,並不是真的要買。」,且大多數在進行結帳程序前就中斷操作。

Axure RP 8版本-38個免費又實用的Widget Libraries

Axure RP 8 版本38個免費又實用的Widget Libraries Axure 的 widget libraries 在網路上是可以被應用的,包括免費及市售兩種,但隨著新的Axure RP 8版本更新,有些圖文庫似乎已經變得無法相容了。要他們相容並不是這麼地容易,需要找到一些方法。所以,這就是我們已經為你找到的方法。以下是我們最喜歡的38個免費widget程序列表(和幾個模板),似乎是進行的挺順的。由於某些Library已經不正式支持Axure RP 8,部分功能可能無法完全正常運行。 希望你找到你喜歡的東西!   由 Axemplate 提供的免費 Widget

如何解決Bootstrap 3和PrototypeJS之間的衝突

如何解決Bootstrap 3和PrototypeJS之間的衝突 當我們想要在Magento上使用bootstrap collapse.js時,會發現在展開的時候沒有問題,但是收合時卻是直接關閉、與Bootstrap網站上慢慢滑上的效果不同。這是因為Bootstrap 3和PrototypeJS之間產生了衝突。 解決的方法很簡單,只要照底下方式修改就可以了。   打開bootstrap.js,搜尋 hide.bs 字串,並將字串取代成 bshide.bs 存檔之後再到前台重整頁面 ( Ctrl + F5 ) 現在不論開啟或是收合的動作都很流暢了。 更多文章歡迎參考:

網站測試工具-JMeter教學

  隨著時代的進步,對於視覺上的美化越來越重視,使得網站整體架構也隨之變得更為龐大和複雜,如果能使用工具來協助測試人員進行測試,也可使整個專案能如期完成。那麼,該如何選擇工具來測試如此龐大又複雜的網站呢? 今天歐斯瑞就要為大家介紹一個測試網站的工具”JMeter”,一起來看看吧!   JMeter是什麼? JMeter是一套開源的測試軟體,主要是用來測試網站功能及系統負載較重的情形下是否能正常運作,或是在給定的負載量下其效能的表現結果是否符合預期。JMeter原本只用在測試客戶端與服務端結構的軟體,而現在已能支援不同的模塊。它的操作介面簡單,相信你也可以快速上手。

如何檢測網站SSL憑證安全等級?

  隨著網路的普及化,人們的食、衣、住、行、育、樂幾乎都離不開使用網路來下單購買,相對也衍生出網路資訊安全的問題。如果網站不夠安全,很可能導致資料外洩,特別是網站有會員登入、金流系統…等,或者是在購物網站進行線上交易時最容易發生信用卡資料被竊取等。那麼該如何檢測網站SSL憑證是否在安全等級呢?   現在一起跟著歐斯瑞來看看Qualys SSL LABS這個工具吧!   SSL憑證是什麼?

如何使用Zabbix Alert Scripts

建立Jabber Script 從終端測試 配置Zabbix使用Jabber script 建立Email Script 從終端測試 配置Zabbix使用phpmailer script 告訴Zabbix通知 翻轉伺服器以驗證操作   jabber.sh是Zabbix內置的Jabber / XMPP功能的替代品。 安裝前可能需要安裝“sendxmpp”。 這在Ubuntu Xenial伺服器安裝時是有效的,但CentOS / RHEL部署的路徑可能會有所不同。   Contents of /usr/lib/zabbix/alertscripts/jabber.sh:

優化網頁設計-將客戶導向重點頁面

明顯美觀的大橫幅   現代的網頁設計已經變得更加視覺化,讓使用者登進到全屏大橫幅時,可輕鬆查看選單選擇。 但是,所有重要內容發生了什麼事? 隱藏在詳細閱讀中? 超出到微型智能手機螢幕的邊界之外? 為什麼我們必須在大型視覺效果和文字之間進行選擇,或根本沒有視覺效果(或也許客戶是這樣要求,導致你得把全部壓縮在一個不美觀的小屏幕設計裡)。   今天本文的提示就是”如何在適當的時機運用簡單的文字引導客群至關鍵內容的頁面上,同時也保有明顯美觀的大標題及選單欄”   內容: 別把我藏起來!

版本控制與GitHub專案建立介紹

什麼是版本控制? 版本控制是一個能夠記錄一個或一組檔案在某一段時間的變更,使得使用者以後能取回特定版本的系統。   版本控制最常用的架構又分為集中式版控和分散式版控   集中式版本控制系統   集中式版本控制系統(Centralized Version Control Systems,簡稱CVCSs),是具備單一伺服器,記錄所有版本的檔案,且有多個客戶端從伺服器從伺服器取出檔案。     分散式版本控制系統   分散式版本控制系統(Distributed Version Control Systems,

如何評估您的網站處於優勢或劣勢?

隨著網頁開發技術不斷進步,相對地檢測網站的分析工具也得跟進,才足以因應不斷變化的開發技術。歐斯瑞要介紹這款屬於初階入門的檢測網站分析工具Website Grader,好讓您的網站不論是在開發或維護過程中,都能清楚地知道您網站的優勢與劣勢,以便進一步改善您網站的弱點。   Website Grader是款檢測網站的分析工具,它主要是根據效能、行動裝置、SEO、安全性等來評估您的網站在哪個部分需要做調整或是進一步改善(例如:網頁加載時間、SEO的核心元素),

安裝與設定ftp使用者,禁止ssh與sftp登入(以Ubuntu為例)

  在linux伺服器上因為是開源環境,所以能選擇的FTP軟體很多,今天介紹的是以vsftp為例,因為他的管理算是比較簡單的,想要調整權限或是使用者路徑也只要再多費一點工就可以做到。   既然是以Ubuntu為例,如何安裝軟體就不用太多作介紹了。   系統指令 sudo apt-get install vsftpd       安裝好後,我們這次的目的有以下兩點: 限制使用者帳號,讓使用者帳號不會看到其他目錄,或是有機會切換到其他目錄。 設定針對FTP帳號,因此關閉帳號的SSH連線(SFTP)。 更改使用者的登入路徑。  

原型設計AXURE RP 8 專為企劃提案人員而設計的網頁模擬工具

  一個新的原型標準 紙、筆、圖形編輯器和智慧原型應用程式。 隨著不斷發展的設計標準,客戶對網站和應用程序要求更先進、更複雜的界面設計。 現在有許多工具可以幫助加速設計過程,以滿足這些需求。 Axure RP可在OSX和Windows上使用,強大的快速線框和原型設計工具的範例,多為界面設計人員所使用。 Axure RP允許設計人員建立動態內容、使用數據、條件和動畫,向團隊和客戶端顯示高度準確和功能性的原型,而無需編寫單行代碼。 沒有code意指的是嚴格的原型設計。   從草圖到有信心的編碼(並且分享到任何地方!) 你是如何設計原型?

響應式網頁開發測試工具Sizzy介紹

相信許多前端工程師在開發響應試網頁時,常常會使用一些輔助工具來測試在不同尺寸的行動裝置上所顯示出來的網頁效果是否正常,像Chrome瀏覽器內建的開發人員工具裡就有兼具模擬各種裝置尺寸的功能,對大部分前端開發者而言也是較方便與使用的。   但如果你想要在同個頁面可以看到不同尺寸所呈現出來的網頁效果,以現在前端開發者所選擇使用的工具普遍都是一次只能顯示一種,無法同時預覽多種尺寸。   所以,今天歐斯瑞就和大家介紹Sizzy這款工具,好讓前端開發者能有更多選擇,一起來看看吧!    

WEB API測試工具介紹-Postman

Postman是一款Web API測試工具,原本只是在Chrome上的plug-in的軟體而已,但現今已有在不同平台的版本可以下載使用,讓想使用此測試工具的使用者有更多不同的選擇! 如何安裝 Postman官網提供了許多不同平台的App版本可下載。 https://www.getpostman.com/ 你也可以使用Chrome瀏覽器到線上應用程式商店去搜尋安裝Postman https://chrome.google.com/webstore?utm_source=chrome-ntp-icon 新增成功後你可以在 chrome://apps/ 頁面看到Postman

MYSQL Replication教學

在資料庫的建置會有一個很大的問題,就是要做平行延伸及Fail over的問題,如果是Mysq或Mariadb的使用者,就可以透過Relication解決掉資料庫層的這個問題。       * 這個架構我們稱為Master/Slave的架構,我們現在來實際以下的架構圖。 目前,我們先實作一個master跟一個slave就好,接下來要延申第二台或第三台做法都是一樣的。    先到master裡面設定這一個檔案/etc/mysql/my.cnf,我們要能讓master能listen其它的IP      拿掉或注解 bind-address = 127.0.0.1  

SSL安裝教學

  Apache :   確認申請完憑證、並且已經有Crt跟Private Key 到Apache的目錄去設定ssl,通常路徑會是在/etc/apache2/etc/apache2/sites-available/default-ssl.conf 如果結果跟小編一樣的話,請記得要再檢查sites-enabled有沒有這一個設定檔,如果沒有話請做一個link過去 ln -s  /etc/apache2/etc/apache2/sites-available/default-ssl.conf /etc/apache2/etc/apache2/sites-enabled/

使用Google PageSpeed Insights檢測網站速度是否需要改善!

一個優質的網站,除了整體介面、功能與商品外,也應該注意網站的速度(不含額外因素,如:網站所在位置),因為它除了會反應在使用者體驗外,也可能影響到網站SEO排名。畢竟現在已是人手一機,使用者隨時都能上網,倘若使用者因載入速度太慢放棄等待而離開網站(特別是購物網站),起不錯失了成交的機會。 相關文章:SEO優化指南 那麼該如何幫自己的網站做健檢,以進一步了解網站需不需要改善或該朝哪個方向改善,進而加以優化?   今天歐斯瑞介紹以Google所提供的檢測工具PageSpeed Insights來做介紹。Page Speed

打造PHP7與PHP5共存環境(Ubuntu)

現在處於PHP5跟PHP7的交換時代,所以很多人在煩腦不想要裝二個系統,一個是給php5使用一個是給php7使用,當然docker或是vmware可以很解決這些問題,那有沒有更簡便的方式呢,那就是小編現在介紹的方式,請照下面的指定做,就可以無腦處理這個問題了。          新增repository :         sudo add-apt-repository ppa:ondrej/php   更新套件資訊 :        sudo apt-get update      安裝PHP :      sudo apt-get install

PHP程式實作Word轉PDF

我們常常在工作中,都會碰到套表的需求,客戶常常都會提供一個word範本,然後要透過程式去填這個範本,最後還要再轉PDF寄送,格式比較不會跑掉,以下就介紹該如何達成這個困難的需求   安裝unoconv :   先安裝這個件套件在linux上,以ubuntu為例 apt-get install unoconv 接下來下這一個命令就可以讓demo的doc轉pdf了 /usr/bin/unoconv -f pdf demo.docx   套用資料到文件 :   先下載這個大大寫的library,使用這個可以輕易把資料套到word裡面

如何檢測Magento客户訂單的流程

  隨著時代的變遷,網路購物已成為人們在繁忙的生活中取得最方便、最快速的購物方法,不管是食品、服飾、娛樂等都能在網上購買到。 然而,一個購物網站的好壞與成敗,在在都取決於網站本身的設計是否貼近使用者操作習慣以及功能是否正常。特別是當客戶在您的網站下了訂單並完成付款,卻因為某個因素導致系統沒有接收到這筆訂單或是收到的訂單資訊與客戶實際下單的資訊不符造成誤出商品,而讓客戶感到不愉悅或是有了很糟糕的購物體驗,那麼該如何避免發生這種情況呢? 今天歐斯瑞就來談談在檢測客戶訂單時有哪些流程?本範例以使用Magento為網站來檢測客戶訂單(不包含POS訂單系統整合),一起來看看吧!  

2017年QA測試裝置清單

  2016年已畫下句點迎向2017年了,在2016年裡部分舊機型也逐漸被淘汰掉,而新款智慧型手機與平板仍舊不斷地推出,那麼在新的一年裡不管是形象網站或電商網站所要測試的裝置、瀏覽器或系統又有哪些變動呢? 在這裡歐斯瑞整理出2017年QA測試裝置清單圖表(圖表所列為大眾常用的設備、系統、瀏覽器…等,實際還是請以供應商提供的為準)。   桌機 系統 瀏覽器 & 版本 解析度 Windows 10 Chrome Firefox Explorer Edge Safari 1. 1920×1080 2. 1600×900 3.

使用Google Fonts 向 “新細明體” 說再見

  想讓網站看起來不一樣嗎,其中文字就佔了很大的比例。不想再用預設的字型,但搜尋出來的結果卻多到不知所措。亦或是還在開wold一個一個試嗎?使用Google Fonts簡單的解決這個問題! Google貼心地準備了很多有趣及具特色的字體提供大家使用。透過Google Fonts不但能使網站更加美觀、加速,且簡化網站開發;經過135種以上的語言測試與整理,由Google把關嚴審的設計師們,提供最新的字體,甚至會依照地區、熱門程度、發展趨勢去做排序。 Google

使用sass定製你的bootstrap css

  本篇文章要跟大家分享如何使用sass定製你的bootstrap css。 取得bootstrap sass檔案   首先取得bootstrap sass檔案。你可以: 到bootstrap 官網下載bootstrap-sass 檔案並解壓縮下載下來的檔案。(http://getbootstrap.com/getting-started/) 到github去克隆bootstrap-sass (https://github.com/twbs/bootstrap-sass)   解壓縮之後的資料夾結構如下: bootstrap-sass/ ├── assets/

讓你的Bootstrap下拉選單可以支援多層選單

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支 bootstrap-submenu.js   Step 1: 載入必要的CSS和JS <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet"

如何使用軟體工具測試網站問題

相信現在有很多人都有架設網站的經驗吧?不論是部落客,自己架設網站伺服器,使用網路服務開站,不過問題來了,很多時候網站出問題時,不是技術人員的你,是否有辦法透過一些工具協助做初期問題判斷呢?今天就3個方向的問題介紹3個免費的工具軟體給各位。   1.網站壞了,打開瀏覽器說找不到網頁。   就像你用電腦工作時,電腦會當機;網站伺服器他也有可能當機(流量太大,太多人看你的網站,伺服器等級不夠…等等),但是連不到網站可不一定是他當機了,也有可能是你的網路問題,該如何判斷?  

使用Letsencrypt時的注意事項

  以下內容以伺服器主機作業系統為Linux,使用Nginx為前提來進行設定,這邊說明的是在已完成https的設定,若是如何在伺服器使用Letsencrypt簽署SSL,請參考讓網頁連線加密(https)!如何讓網頁伺服器取得免費SSL憑證(Let’sencrypt)。   以下的範例設定若字體為藍色,請參考您自己的設定檔檔名或路徑修改。   如何保護隱藏資料夾,但不影響auto renew。  

如何製作阿拉伯語、希伯來語等由右向左的網頁

如果您需要製作阿拉伯語、希伯來語、印度語等這些由右向左的網頁、底下是必備的基本資訊。   修改文字方向   首先 在html標記中添加dir屬性,以設置為 rtl (right-to-left)。 <html dir=”rtl”> 這樣子已經完成了由右向左的設定了。   你也可以使用CSS來修改文字方向 * { direction:rtl; } 調整版面配置   假設你製作的是多語系的網站,除了文字方向之向、版面配置的方向也要跟著調整。例如在英文版網頁中原本為 float: left 的設定、在阿拉伯語版中則修改為 float:

何謂Sitemap?

不管是企業形象網站、購物網站或是個人網站,都會在製作網站前先規劃出整體網站架構,或是依據客戶所提出的需求來構想整體網站架構,包含網站內所置放的資訊內容、層級分類等等。當整體網站架構規劃好後,進而去設計頁面與開發。那這是Sitemap嗎?   今天就來簡單說明一下吧!   Sitemap是什麼? 一般Sitemap有兩種形式

提升MySQL大數據效能(Partition)

隨著使用的時間、資料庫的資料會日漸提升,慢慢的效能就會變的很差,所以我們要將大數據的資料表做分割,讓每一個資料表變的小一些、去提升資料庫的查尋效率。   目前分割資料有分二種方式,一種是水平分割(Horizontal Partitioning)、另一種是垂直分割(Vertical Partitioning)。   水平分割(Horizontal Partitioning): 透過資料量做分割,舉個例子,如果現在會員資料有1千萬筆,我們可以透過會員生日的月份資料進行拆分,可以把資切成12個資料表依照會員的生日。   垂直分割(Vertical

MYSQL vs MariaDB

  相信在做技術的選擇的時候、應該會碰上類似的問題,到底要選那一種技術才符合目前的專案需求呢,所以在這邊做一個簡單的分析,希望可以幫助選用適合的技術。   自從MYSQL被Oracle 接手之後、每況愈下、其原因有許多,像是Enterprise 版封閉了source code 、未能快速傳達或修復安全問題…等等,所以Michael Widenius 決定fork一套出一套用他女兒命名的資料庫,叫 MariaDB。   以下提供幾個簡單的比較表   MYSQL MariaDB Storage Engines MyISAM InnoDB

WordPress 如何解決分頁套件(WP-PageNavi)與多語言功能衝突

今天介紹的是Wordpress的一個提供分頁功能的套件,在有些必要狀況下,我們必須讓他還原設定到預設(透過語法),例如多語言環境,而且部分功能會變為無法使用,底下會細部說明。   WP-PageNavi是一個很好用的分頁套件,他提供後台介面供管理者簡單的設定分頁功能想要顯示甚麼字。 呈現的畫面如下 當然今天的重點不是在介紹套件的功能,而是在以上的設定欄位就會發現; 如果我有多國語言版本,沒辦法個別設定,甚至會出現在英文頁面依然顯示”第一頁

無線投影與串流媒體接收器Reflector 2使用介紹

先前在「Windows內建的錄影工具-步驟收錄程式」文章裡談到了遇到求救問題或是不知道該如何表達才能讓技術人員馬上明白問題所在的情況時,可以利用步驟收錄程式將操作畫面錄製下來,以便提供給技術人員能快速了解與解決問題。   但如果是使用者在使用實體行動裝置或是測試人員在實體行動裝置上進行測試時發生問題,就沒辦法使用步驟收錄程式了,這時該如何將在實體行動裝置上的操作畫面錄製下來呢?   所以,今天Astralweb要為大家介紹Reflector 2這個工具,一起來看看吧!   Reflector

不受平台與瀏覽器限制的測試工具BrowserStack

當網站建置完成後,便是要開始進入測試階段。而在進入測試階段過程裡多少都會在不同平台、瀏覽器上測試,但其實這是件滿困難的事(特別是網站有響應式設計),畢竟不太可能在同一台電腦上安裝不同版本的作業系統與瀏覽器,或是買入各廠牌不同型號的智慧型手機及平板來逐一進行測試。   所以今天Astralweb就為大家介紹BrowserStack這個測試工具,在這裡分成桌機和行動裝置來做介紹,一起來看看吧!   桌機 本範例所選用的作業系統及瀏覽器分別是Windows 10和Chrome

購物網站設計趨勢(四):輕鬆找到商品,選單就是篩選器!

歐斯瑞今天要與大家談談有關網頁選單結合篩選器,並分享一些案例,看看他們快速找到商品的方式,一起來看看吧! 當商品到達一定數量或商品類型不同時,就會需要將商品作分類,讓使用者可以依照分類來選擇,商品篩選器可以幫使用者繼續過濾當下不想要的商品,也就是透過一層層分類,來選出想要的商品。根據不同的商品數量、類型和客戶群等,所制定的分類方式與所使用的篩選器也就有所不同,要注意讓使用者的操作過程越輕鬆,越能讓你的商品賣出去!我們在前面文章中提過關於選單設計趨勢的多樣性,以設計的角度來看,選單的選擇方式其實就是一種篩選機制,今天先從幾個選單與篩選結合的案例作分享,看看這些品牌利用選單達到篩選的效果。

如何使用 Sass 開發專案

今天來談談如何用Sass來開發專案,包含開發前的安裝作業。 開發前我們大概了解一下為什麼要用Sass開發 Sass是一套生成CSS的工具,支援變數、函數、繼承等功能,讓我們更輕鬆地組織及維護CSS樣式表。比起用傳統的CSS慢慢撰寫,用SCSS開發真的可以節省掉很多時間。   Sass開發前要先安裝以下工具 Ruby Sass Compass   步驟1.安裝Ruby Windows使用者,直接到http://rubyinstaller.org/downloads/下載RubyInstaller,64位元的使用者、記得要將add ruby executables to

使用SelectBoxIt.js自訂你的下拉選單

CSS無法影響下拉選單展開的選項,如果希望自訂選項的樣式,我們需要使用一些外掛來改變下拉選單的結構,SelectBoxIt.js就是其中的一個選擇。 SelectBoxIt.js 的使用非常簡單、只要跟著底下的步驟就可以了。   引入 CSS files 底下是SelectBoxIt.js 的四個樣式、只要挑一個來用就可以了。當然您也可以使用您自己的CSS樣式。 預設CSS <link type="text/css" rel="stylesheet"

Windows內建的錄影工具-步驟收錄程式

相信大家都有過遇到求救問題時,該如何表達才能讓技術人員馬上明白問題所在的情況吧!!不管是身為一名QA測試人員,要將所測到的Bug陳述出來,但有些卻很難用文字描述就能表達清楚。又或者是使用者碰到問題時,需要尋求協助解決,比如說在操作過程中不知道哪個環節操作錯誤,導致無法得到所想要的結果等等,這些都不是幾個字或幾句話就能解釋清楚的。 此時如果有實際的操作畫面可以提供給技術人員,那麼技術人員就可以很清楚地知道問題點並加以解決,所以歐斯瑞要為大家介紹Windows內建的錄影工具-步驟收錄程式。步驟收錄程式(Problem Steps

2016下半年QA必測清單

2016年已悄悄地過一半了,在這段時間歐斯瑞也測試了許多不同的網站,每個網站所想要的需求也都不太相同,再加上現在智慧型手機、平板不斷的推陳出新,各家規格與系統都一直在做更新與改變,相對的所要測試的範圍就變得非常的廣。歐斯瑞在這裡為大家整理出2016年下半年QA必測清單(表中所列為較普遍常用的,系統部分請以各廠商所提供之版本為主),提供給大家作參考。 上表僅是提供大家一個QA必測裝置、解析度等等的參考方向,當然,您也可以依據客戶要求或是該網站中較多使用者使用的系統、瀏覽器…等來進行測試。   以上是2016年下半年度QA必測清單,如果您有任何問題,歡迎您與我們聯絡!

HTTPS 跨時代的網路資安新方法

在數位世界中,如何確保個人隱私的保密及安全一直是大家都非常關注的議題。同時,電商經營者也希望藉由安全性能的提升,確保他們的客戶能享有最安全的瀏覽及購物經驗。 從過去的一年到最近,有幾起關於保護個人數位資訊隱私的新聞值得讓我們留意:FBI要求Apple提供破解iPhone的程式但遭到後者拒絕、知名通訊軟體WhatsApp將所有通訊內容改為使用加密連線傳輸、極受歡迎的部落格平台wordpress.com將所有註冊在其網域下的部落格改為HTTPS連線、甚至搜尋引擎巨擘Google也宣布將會對全站採用HTTPS連線的網站提升排名。這些全球知名企業對於資訊傳輸安全性的重視實質上反應了使用者的需求。

行銷好幫手!Chrome GA Debug插件

  相信不少剛接觸Google Analytic的朋友,常常遇到設置完追蹤事件,卻無法在報表中看到數據的情形,想要Debug卻又不知如何著手,尤其是當追蹤事件非常多的時候,要找到錯誤點更是令人頭痛萬分啊! 今天我們就要來介紹一款簡單好用的Chrome小插件——GA Debug! 首先,你要: 1.  進入Chrome線上應用程式商店:https://chrome.google.com/webstore/category/apps 2. 在搜尋欄位打上“GA Analytics Debugger”,並且將它加到Chrome。 3.

購物網站設計趨勢(三)-手機版網頁首頁設計

我們之前談過手機購物網頁設計的趨勢與重要性,今天歐斯瑞要談談手機版的購物網站首頁設計,並分享一些案例,一起來看看吧! 現今設計趨勢   頁首高度縮小,並將頁首或選單保持在畫面上方 由於手機版的空間較狹小,使用者在瀏覽網站時,當下會花較多時間在於網站內容,而不是頁首,我們要盡量空出空間來呈現內容,但頁首確是相當重要基本元素,它是你的招牌、也是引導客戶的工具列,使用者會很需要它,但不能變成影響瀏覽的阻礙,因此設計的高度不宜太高,且保持在畫面上,讓使用者可以隨時操作頁首的選單與功能。   標誌、選單、購物車、搜尋是必要元素

幫你的sass專案加上Autoprefixer功能

  Autoprefixer是一個自動幫CSS加上前輟詞的工具,如果你習慣使用compass 來watch你的sass專案,你可以用底下的方式來幫你的sass專案加上Autoprefixer功能。 Step 1: 開啟命令字元,在專案的路徑底下輸入底下命令列: gem install autoprefixer-rails Step 2: 開啟sass專案設定檔config.rb,加上底下設定: Encoding.default_external = "UTF-8" require 'autoprefixer-rails' on_stylesheet_saved do |file|

購物網站設計趨勢(二)-電腦網頁選單設計

電腦網頁選單設計 購物網站選單的呈現方式不盡其數,透過之前分享的內容,我們了解手機購物網頁選單設計的趨勢,今天歐斯瑞要談談電腦版的購物網站選單設計,了解一些大品牌是如何呈現的, 一起來看看吧!   之前我們談過關於手機網頁選單設計,從中我們知道導航/導覽對選單的重要性,也提到了螢幕尺寸改變的趨勢,而在電腦版較大的空間,選單功能、樣式也越來越多,但購物網站卻要以導航為重,雖然在這限制下,我們還是可以有著很多的變化方式。   結構是選單設計最重要的因素

防止網站被嵌入別人家的網站裡(使用iframe內嵌)

  今天歐斯瑞要跟大家分享二種防止網站被別人使用iframe內嵌的方法。 Javascript 如果不想要網站內容被人使用iframe「拿走」、以往的作法是使用javascript判斷網頁如果位在frame 標籤裡、就直接跳轉到原始的網頁。 <script> if (top.location !== self.location) { top.location = self.location; } </script> http-equiv=”X-Frame-Options”

響應式網頁測試工具-Resizer使用介紹

現今使用智慧型手機與平板電腦已非常普遍化了,而響應式網頁設計(互動式網頁設計)儼然已成為網站設計的主潮流。比方說購物網站重視操作簡單的購物流程,其目的是為了讓使用者在使用或操作上能更便利,而響應式網頁設計則是能讓整體購物流程在行動裝置上更具便利性。 所以在設計響應式網頁時,要測試電腦與行動裝置,因為這兩種的螢幕有所落差,為了讓網頁適用於不同裝置上,對於很多網頁設計師或是QA人員來說,在測試響應式網頁時都會使用瀏覽器本身提供的模擬響應式設計工具,比方說Google的Toggle device mode、Firefox的適應試設計模式…等,以測試在不同裝置上是不是都能夠完整呈現出來。

快速上手色碼寫法,丟掉你的色碼表吧!

關鍵字:網頁設計、色碼表、16進位   相信大家在寫CSS時,都曾使用過網頁色碼表查詢顏色的代碼,但是否有些時候會遇到某些顏色想調淡或調深,卻不知道該如何下手呢?因此本篇就要教大家該怎麼理解並應用那串英數混雜的代碼囉!     一般大家看到的16進位色碼通常是由一個#字號加上三個或六個英文及數字所組成(如圖),而這組數字同時也代表了顏色的R(紅)G(綠)B(藍)三原色,透過這三色的疊加就能顯示出各種不同的色彩。   16進位代表裡面的英數會由 0.1.2.3.4.5.6.7.8.9.A.B.C.D.E.F 所組成,16進位與色碼的關係如下圖所示:

SASS的二種註解方式 /* */ 與 //

SASS的註解方式有二種:多行註解及單行註解   多行註解 使用多行註解時,註解起來的訊息會在一併輸出在CSS上     SASS @import "compass/css3"; .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));

購物網站設計趨勢(一):手機網頁選單設計

軟硬體發展快速,網頁的設計方式必須不斷更新,網頁設計中有許多設計元素會影響使用者操作,其中選單是引導消費者到達產品頁面很重要的媒介,歐斯瑞今天要先從選單設計談起,現今選單的設計趨勢,並透過幾個知名品牌網站與大家分享,這些品牌他們是怎麼讓消費者更容易找到想要的產品,一起來看看吧!   為什麼網頁設計方式必須一直求新?

手機網頁選單設計-購物網站設計趨勢(一)

軟硬體發展快速,網頁的設計方式必須不斷更新,網頁設計中有許多設計元素會影響使用者操作,其中選單是引導消費者到達產品頁面很重要的媒介,歐斯瑞今天要先從選單設計談起,現今選單的設計趨勢,並透過幾個知名品牌網站與大家分享,這些品牌他們是怎麼讓消費者更容易找到想要的產品,一起來看看吧!   手機網頁設計方式必須一直求新?

如何購買與安裝SSL憑證

SSL憑證是由可信度高的簽證單位,經過資料審核後用來認證網域(DN)為可信任的網站的一種機制,所以電商網站幾乎都會申請此憑證用來加強自己網站的安全性與信任度,擁有SSL憑證的網站就可以經過設定https加密瀏覽。沒有憑證也不是不能設定,只是會出現警告訊息,所以錯誤的設定可能就會讓使用者離開網站。  

Photoshop教學【CC 影片編輯】儲存循環播放GIF

今天astralweb要與大家分享使用Photoshop CC 2015來做簡單的影片編輯,再將它儲存成連續GIF,一起來看看如何製作吧! ※本教學使用版本Adobe Photoshop CC 2015 ※本教學需先對工具使用有基本認識 1.開啟動態介面     2.然後置入影片     3.在時間軸上可以勾選重複播放,方便我們即時預視效果     4.選擇 檔案>轉存>儲存為網頁用     5.將檔案格式選擇GIF     6.在下方的重複播放選項選擇永遠  

電商網站常見錯誤Top 10

在前幾篇分享文章裡和大家分享了一些有關在測試電商網站時,可能會偵錯到或是較常見到的各種錯誤,不管是畫面或功能方面,或者是所使用的設備與瀏覽器…等等。特別是當一個電商網站有做響應式網頁時更應該要小心謹慎地測試,以避免在其他行動裝置上瀏覽網頁時發生跑版或是功能有問題的情況。那麼到底有哪些是很容易不被注意與被忽略的呢? 今天歐斯瑞的測試人員J整理了在測試電商網站時,十大常見的錯誤給大家參考 下面例舉幾個最常犯的錯誤,並提供範例圖與說明讓大家了解   TOP 1  位置 位置往往是在測試時很常見到的錯誤,舉凡文字、圖片、按鈕位置…等,以下圖為例。

電商網站的整合測試

系統整合主要是把在不同系統和設備上的不同功能串連起來,形成一個資料往來的交流管道。簡單來說就好比從A山到B山,勢必要有一座橋樑來連接兩座山以便往來。就連現在大部分的購物網站也不例外,舉凡ERP系統整合、金流系統整合、物流系統整合…等,都會將所要使用的系統整合串接起來。 所以今天就以Magento與金流系統做整合為例,那麼該如何檢測呢?流程畫面如下:   簡易流程示意圖         成功案例: 假設測試電商網站A選好商品並按下”前往付款”按鈕,如下圖。      

掌握開發無障礙網頁的基本原則

無障礙網頁的立意是讓身障者也能瀏覽閱讀網站內容,並與網頁互動。除了對身障者友好之外,無障礙網頁設計的重要原則就是:讓使用者在各種不利的情況之下,都能自由地瀏覽並閱讀網站內容,並且充份地理解而無任何阻礙。舉例來說:讓視力退化的老年人也能輕鬆閱讀網站文章;在網路頻寬受限的地區也能瀏覽及閱讀網站內容;即使裝置不支援javascript也不會錯失網站的內容。   國家通訊傳播委員會提出了底下14點規範,是目前國內開發無障礙網頁的原則與方向 對於聽覺及視覺內容要提供相等的替代文字內容 不要單獨靠色彩來提供特殊資訊 適當地使用標記語言和樣式表單 闡明自然語言的使用 建立編排良好的表格

網頁版面快速調整工具:快速移動瀏覽器物件

今天astralweb要與大家分享快速更改網頁上物件的位置,可以省去PS的時間,也很快速,一起來看看如何使用吧!   在某些情況下,我們只需要對網頁上的物件位置做調整時,但我們只是想要看看結果如何時,不仿考慮使用這種方式來節省時間吧。但僅限運用在物件位置移動,而縮放、刪除、裁切等,它是做不到的喔! 對於一般民眾不需要使用影像處理軟體,即可做修改,對於網頁設計師來說,省去捕捉畫面、開啟PS、去背、裁切、存檔等步驟,快速做修改。     1. 首先到 staticresource.com/dragon.js,去複製程式碼      

如何設計有效的網頁按鈕

我們大致可將網頁按鈕區分成一般按鈕、文字連結與圖標,而網頁按鈕是引導使用者連結至其它頁面的重要關鍵,良好視覺、精準的文字說明都相當重要,按鈕在網頁中扮演著很重要的互動角色,因此我們要來探討如何設計良好的按鈕,並提供幾個範例與大家分享。 範例來源   TESLA 資料取得日期:2016.01.30       NIKE 資料取得日期:2016.01.30       Skinny Ties 資料取得日期:2016.01.30       Bonobos 資料取得日期:2016.01.30

Sass的註解功能,讓除錯工作變得更簡單

如果Sass生成的CSS檔案、不如你所預期的,你要怎麼知道是哪邊出問題了呢?Sass有一個註解功能、這個註解功能的預設狀態是開啟的。 在註解功能開啟的情況下、生成的CSS檔會長得像這樣: /* line 1, ../sass/screen.scss */ .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }  

如何修改Sass的輸出樣式

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔,現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。   Sass 共有四種輸出樣式 :nested :compact :expanded :compressed   底下我們直接以一段代碼做示範。 SCSS .well { min-height: 20px; padding: 19px; margin-bottom: 20px;

【歐斯瑞新年大紅包】免費新年圖標/套件下載

又來到喜氣洋洋的農曆新年囉! 歐斯瑞特別提供EPS向量圖標與CSS特效開放大家下載使用,歡迎大家自由運用,歐斯瑞祝您新年快樂! eps檔下載       了解更多       附加說明: 本文提供歐斯瑞創作之圖檔與網頁特效可供下載使用,並根據創用CC(Creative Commons)的授權條款規範: 姓名標示 – 您可以複製、發行、展覽、表演、放映、廣播或通過資訊網路傳播本作品,您必須對作品進行來源標示為歐斯瑞有限公司。 相同方式分享 –

網頁錯誤排名大拼比!(網站測試)

當完成一個電商網站後,最主要的便是測試網頁內容是否一致、功能是否正常運作,以及測試在使用不同的作業系統和不同的瀏覽器進行網頁瀏覽時,其網頁是否有發生跑版、文字設定或者是發生圖形不符合原設計(即客戶確認定稿)…等等的情況產生。   在開始例舉示範說明之前,在資訊分享裡有一篇QA人員你做對了嗎?- QA 測試表單大解析的文章,在文章內談到了該往哪個方向開始進行測試?要先從哪種設備開始呢?是畫面還是功能呢?所以今天就以整體網頁來說,不管是畫面還是功能;而是以花最多時間在偵錯的網頁錯誤這部分來提供幾個範例給大家參考。

使用Tag Assistant幫您驗證GA追蹤碼是否正確安裝。

當您在網頁上安裝好Google追蹤碼之後,要怎麼確認是否正確安裝。你可以試試這個工具:Tag Assistant Tag Assistant是一個Chrome擴展功能,可以自動驗證網頁上的Google追蹤碼是否正常運作。目前,它可以驗證的有: Google Analytics (ga.js) Google Analytics (dc.js) AdWords Conversion Tracking AdWords Remarketing (legacy) AdWords Remarketing (new remarketing tag) Doubleclick Floodlight

如何使用CSS(border-radius)畫出圓角DIV

在使用CSS排版時,div預設的形狀都是方形,因此今天就要教大家如何使用border-radius將div的直角變成圓角。 首先我們先在html準備一個展示效果的div,程式碼如下: 程式碼 <body> <div></div> </body> 預覽後畫面沒有東西嗎?不要緊張,我們接著把CSS加上它就會出現囉! 先準備好裝CSS程式碼的區域: 程式碼 <style type="text/css"> CSS的撰寫區域 </style>  

如何確認結帳流程的QA測試

當一個電商網站完成時,勢必都一定要測試整體結帳流程是否有問題產生,從挑選商品一直到完成結帳這一整個流程,都是身為一名QA工程師或QA測試人員必須一而再地重複並使用各種不同付款方式來進行測試,以確保消費者能順利完成結帳,進而順利購得所買的商品,這才能達到一個電商網站的最終目標,那麼又該如何確認呢。 在前幾篇的文章有和大家分享一篇電子商務網站的基本測試,在文章裡談到了結帳時可能會有兩種情況產生,一種是以訪客身分(不需要登入/註冊)進行付款,另一種則是以會員身分(需要登入/註冊)進行付款,如下圖。 然而不管是用哪種身分進行結帳流程,都會有結帳成功或發生結帳失敗的情況,如下圖:

重要快訊:微軟將停止支援舊版IE

微軟繼2014年中宣布全面停止支援Windows XP之後,最近再度宣布將在2016年1月12日將停止支援舊版的IE瀏覽器(Internet Explorer);這也意味著繼續使用舊版IE的用戶將會暴露在未知的安全性風險之下。   這次的宣布代表只有微軟宣布支援的作業系統以及IE才能繼續獲得更新,根據微軟IE支援週期網頁(https://support.microsoft.com/zh-tw/lifecycle#gp/Microsoft-Internet-Explorer)的說明,以下組合的作業系統及對應的IE版本才能在今年1月12日之後繼續享有技術支援以及安全更新的服務。

電商網站實戰測試篇—基本功能幾大常見錯誤

在上一篇電商網站實戰測試篇—版型幾大常見錯誤,談到了版型就好比是房子的基底,那麼功能可以說是房子的隔間與設備了。而功能的好壞與便利性也很可能會間接影響使用者對該網站的使用體感。所以今天要和大家分享『電商網站基本功能常見的幾大錯誤』。   常見的幾個基本功能錯誤,大部分應該有以下幾個: 未設搜索條件 未設連結 未顯示提醒或警示訊息 圖片沒有連結到正確位置或圖片讀取錯誤 網頁語系設定 (使用轉換套件或直接用google翻譯除外) 現在我們來看看阿凱所經營的電商網站凱子の店有哪些常見的基本功能錯誤呢?

不是畫圖就好!網站設計人員與客戶之協調流程SOP

(設計在專案中的問題) 在網頁設計專案進行中,設計師是屬於前端部份與客戶較密切聯繫的角色,僅次於專案管理人員,並透過專案管理所提供資料,依網站架構與在合約規範內,去設計符合客戶需求之網站視覺,所畫的內容都會與網站功能息息相關。在設計階段中修改是免不了的問題,但多次的修改會不斷增加專案時程以及公司的成本,在理解問題前,我們先了解設計公司與客戶之間的關係,我們簡單歸納出以下不同公司規模的案主與設計公司。 不同規模的設計公司(了解設計公司相互關係)

網站測試-功能篇(下)

當一個電商網站完成後,並不是完成就好。對網站而言,每個元素及功能都是需要不斷被測試與驗證的。而功能測試則是對每個獨立的功能進行驗證,以確保功能可以正常地使用。然而,這些種種測試與驗證其最終目的都是為了提供使用者一個優質的電商使用經驗。   之前跟大家分享了網站測試-功能篇(上)後,今天Astralweb要來與大家分享的是功能測試的最後一部分,分別是連結與表單測試。   在這裡我們將連結功能與表單功能分開說明與示範   什麼是連結? 連結是在網站內不可缺少的主要功能之一,主要是用在各個頁面之間的切換和引導使用者到一些未知頁面的網址。  

視訊影像新革命!720度全景錄影新技術

什麼是360影片? 利用全景錄影機以一個位置錄下周圍環境的所有角度後,將影片透過程式編碼,產生可以隨意轉動方向或是產生虛擬實境效果的技術。今年年初Youtube開始支援360影片格式,接者Facebook也提供了360影片的支援。透過這樣的軟、硬體技術,讓觀者有如身歷其境於影片之中。 如何觀看360影片? 電腦觀看 透過滑鼠拖曳影片畫面來控制方向,但目前有部份瀏覽器尚未支援此項技術。 行動裝置觀看 只要轉動行動裝置的方向就能控制方向,也可以使用手指點擊拖曳來控制方向,目前ios與 android都已支援此項技術。   全景、360度與720度全景差異

如何設定Google 分析內容分組的條件規則

  當您網站的內容愈來愈多、查看網站分析數據就變成一件很累人的事,這時候我們可以利用Google分析中的”內容分類”功能,來將頁面做一個分類整理。利用”內容分類”功能、我們可以自訂分類的規則、只查看某個分類底下的分析數據。   一般的情況下我們可以使用網頁(Url網址)或是網頁標題名稱來排序頁面分析的資料,但是如果您的網站內容比較多的話、要在這個列表清單中找到您想要的頁面資料、也是一件相當累人的事。在這篇文章中、我們要為大家介紹如何設定Google分析中的”內容分類”。   *在google

匯出CSV的0都不見了? 三個步驟找回來!

許多系統、程式、平台等,在匯出資料時的原始檔都為CSV格式,可以整齊的匯出資料讓使用者方便去預覽,但你有過曾經打開匯出的CSV檔案,發現欄位內容的許多0都消失了嗎?像是原本產品編號為”00234″,但打開CSV卻顯示”234″的經驗? 不用擔心!下面三步驟就能帶您找回來!下面我們以台灣較多人使用的Excel為示範: 第一步:以文字檔案匯入CSV   將CSV檔案以文字檔案匯入Excel,你可以在下列步驟找到匯入選項:   打開Excel > 資料 > 從文字檔 > 選擇要匯入的CSV檔

電商網站實戰測試篇—版型幾大常見錯誤

撰寫一個電商網站,就好比是在蓋房子一樣,要先蓋好基底,基底蓋穩了,才能搭配水泥與磚頭或是其他相關建材元素混合使用,接著一層一層往上蓋。所以版型就好比是房子的基底,它會間接影響使用者在瀏覽網站時的體驗度。所以今天Astralweb要來跟大家分享『電商網站版型常見幾大錯誤』。   常見的版型錯誤,大部分應該都是落在以下幾點: 文字:字型、顏色、大小是否一致(含英文大小寫部分) 版型色彩配置 位置是否跑版 破圖   什麼是破圖? 所謂的破圖就是指圖沒有連貫以及在圖的邊邊還有界線。容易發生破圖的情況大部分是在大螢幕的時候,很容易會出現瑕疵,所以需要留意這部分。  

使用字型製作網頁圖標【SVG匯出篇】

今天Aastralweb與大家分享使用AI儲存SVG向量檔案格式的圖標,將它轉成網頁字型檔,應用於網站之中的ICON,一起看看如何製作吧! 1.開啟我們需要的尺寸 由於最後產出是向量的不需要將尺寸開得太大 2.繪製出我們的Icon 3.將所有物件合併 4.合併後刪除多餘的物件 可以試著改變顏色看看有沒有將所有多餘物件刪除 5.選擇另存新檔,儲存SVG檔案 6.開啟更多選項 7.依需求設定每個項目     製作圖標時要避免以下情況產生: 圖標超出範圍會導致範圍外的部份被切掉 使用遮罩完成後要合併物件 物件完成後,要將多餘物件刪除 不可使用線條,需要將線條展開

網站測試-功能篇(上)

當完成電商網站時,要如何預防使用者在使用的過程中在某個階段發生錯誤導致失敗,而失去繼續使用該網站的耐心呢?又該如何去預防這些錯誤的發生呢?測試電商網站內的各種功能便是例行且必須要實行的。   繼之前與大家分享的網站測試-單元篇後,今天Astralweb要來跟大家分享的是功能測試中的輸入框與搜索功能測試。   什麼是輸入框與搜索功能? 輸入框是讓使用者輸入字符,不管是文字還是數字。比方說搜索、姓名、電話、訂閱電子報、優惠券…等等,這些都是普遍會使用到輸入框。而搜索則是使用者在輸入框輸入關鍵字後,搜索出符合關鍵字的相關資料,如下圖所展示。

HTTP2的好處

HTTP2已經釋出有一段時間了(今年2015年的5月正式釋出RFC 7540),新的HTTP2協議增加了很多改良的項目,那麼與舊版本的比較差異在哪?讓我們來看看HTTP2可以帶來甚麼好處。 向下相容於現在的網路環境 這點相信是大多數工程師聽到最高興的,至少不用因為版本更新修正程式碼或是問題,而且大部份所知的規則都延用HTTP,例如狀態碼(500,404一類)。 以二進位格式來傳輸 以二進位傳輸資料可以加快處理速度,省去編碼再轉碼的效能。 這是為甚麼?因為電腦處理資料時是以二進位在執行。

QA人員你做對了嗎?- QA 測試表單大解析

當工程師完成一個電商網站時,身為一名QA工程師,可能都會經歷過相同的問題。那就是該往哪個方向開始進行測試?要先從哪種設備開始呢?到底是先測畫面,還是功能,亦或是同時進行呢?想必這是一個很令QA工程師傷腦筋的問題吧!! 今天Astralweb跟大家分享如何規劃出一個QA測試表單範本。   假設今天QA工程師張小碩第一次被分配到測試電商網站的工作,可是他不知道該從哪裡開始著手進行,正在為此大傷腦筋呢?現在我們就來幫他規劃出一個QA測試表單範本,以便以後不管遇到哪種電商網站,都能直接套用這個範本。

隔行如隔山,B2B與B2C網站設計大不同

Business To Customer Electronic commerce 企業對消費者的電子商務,簡稱B2C Business To Business Electronic commerce  企業對企業的電子商務,簡稱B2B 在規劃網站建置的過程中,必須完整的將商業模式考量進來,即便是同類型的商品但對應的客戶不同,在設計網頁的時候就會有非常大的差異存在,提供客戶的資訊必須符合客戶的需求,避免沒有價值的頁面產生,才能優化您的電子商務網站。   以下來說明幾點B2C與B2B電子商務網站上的主要差異: 1.產品描述資訊  

如何使用XENU查找網站的失效連結

  當您需要檢查網站失效連結的時候,可以使用免費工具 – XENU。 XENU官網:http://home.snafu.de/tilman/xenulink.html   首頁請到XENU官網去下載連結、安裝完XENU之後開始執行。 STEP 1: 開始專案 STEP 2: 專案設定 填入要檢查的網站。 這裡要填入”根網址”,假設你的網站的首頁是http://www.yoursite.com/index.html,那你應該要填http://www.yoursite.com/ 填入要包含的網址。這裡通常是填入外部的網址,填在這裡外部連結會被當成內部網址來檢查。

電子商務網站內需要被QA測試的元素

首先,我們先來簡單介紹一下電商 什麼是電子商務? 電子商務又可簡稱為電商,它能廣泛地在各個地方透過網路從事各種商業活動或服務。而電子商務又可分為哪幾種呢?簡單來說它可以分成以下幾種類型,分別是企業對企業(B2B)、企業對消費者(B2C)與消費者與消費者之間(C2C)。 然而構成電子商務的基本元素又有哪些呢? 一般來說,我們可以簡單將它可分成以下四大類: 一、版型 一般電子商務會有的主要版型大致上包涵了以下幾種: a. 首頁 b. 目錄頁 c. 商品頁 d. 最新消息 e. 聯絡我們頁面 f. 登入/註冊頁面 g. 會員帳戶頁面 h. 其他CMS頁面      

解決Nginx與php-fpm發生504 Gateway Time-out問題

會發生504 Gateway Time-out的問題,如果是非程式錯誤的情況下(例:無窮迴圈),通常是發生在有些需要長時間運算的頁面,這時我們的選擇就只有兩個,買更好的主機,或是延長504判斷的時間。 實際上,504的問題並不只會發生在Nginx+php-fpm的環境,任何伺服器環境都有可能發生,今天只是舉Nginx+php-fpm的設定檔修改為例子。 今天這個問題會在Nginx+php環境發生的原因,是因為php執行程式碼的時間預設是無限的,運算到結果出來為止;但Nginx不能無限的等下去,所以時間過長時,Nginx就告訴使用者”504″的錯誤。

網站測試-單元篇(下)

上次跟大家分享了測試網站的字型大小、顏色、圖形、拼字、位置…等的測試範例 欲了解網站測試小撇步可參考「網站測試-單元篇(上)」 今天跟大家分享網站測試的單元測試最後一部分,測試範圍包含了圖片、導覽路徑、按鈕、網頁標題(Title Tag)…等。   在這裡示範幾個例子 圖片較常見也最容易發生問題的地方有以下2種:   1.缺少圖片:從左圖來看,很明顯的就是缺少了商品圖片,才會導致只有商品名稱及價錢,所以這時候我們應該明顯的將問題點指出來,以便前端工程師修正。   2.

Mysql 設定綁定IP

今天要介紹的是在Mysql設定檔中,bind-address的設定,通常在安裝完成時,預設值是localhost或是127.0.0.1,意思是這個資料庫只允許這台主機上的連線。 但是有些時候如果我們有需要分開主機,主機間需要互相進行資料庫連線時,就必須要修改這個設定了,否則會無法連線。   1.通常設定檔位置在,/etc/mysql/my.cnf,假設安裝位置有不同,可以用搜尋尋找my.cnf設定檔來開始修改。   2.修改設定檔的bind-address,指定允許連線的ip。  

如何確認您的網站是否適合行動裝置瀏覽

當使用者透過行動裝置瀏覽您的網站時,他們能否輕鬆閱讀網頁內容並找到需要的資訊,或是會覺得難以使用? 當您找了網頁設計公司來設計公司網站,要如何確認您的網站適合行動裝置瀏覽呢?底下我們列了三個基本要點,幫助您檢視自己的網站是否適合行動裝置瀏覽。 banner /Mobile Friendly系列文章 (轉載來自google的圖)   1.確認使用者不需要左右滑動或是縮放螢幕才能閱讀網站內容   google 提供了”Mobile-Friendly Test“” 這個測試工具讓我們輕鬆完成這個檢測。 進到網站之後…只要在欄位中輸入要檢視的網址,google

啟用Google兩步驟驗證,加強您的Google帳戶安全性。

如果您使用Android手機,您一定會使用Google帳戶登入您的手機。如果您在Google Play上消費,您的Google帳戶就有可能留有您的信用卡資料。當我們愈來愈依賴Google的服務時,Google帳戶的安全性就愈來愈顯得重要。 為了加強Google帳戶的安全性,我們要開啟Google兩步驟驗證;接下來我們要與您分享:如何啟用Google兩步驟驗證,加強您的Google帳戶安全性。   進入Google兩步驟驗證網頁(https://www.google.com/intl/zh-TW/landing/2step/) 選擇開始使用。首先Google會向您要求建立備援電話號碼

幫Contact Form 7(WordPress外掛)聯絡表單 加上 Google event事件追蹤碼

Contact  Form 7 是一個相當愛歡迎的 WordPress 的表單外掛,這篇文章要教您如何幫Contact  Form 7 的表單加上 Google event事件追蹤碼     Step 1 首先準備好您的Google analytics 分析碼。   javascript <script> (function(i,s,o,g,r,a,m){i=r;i=i||function(){ (i.q=i.q||).push(arguments)},i.l=1*new Date();a=s.createElement(o),

網站測試-單元篇(上)

先前用行動裝置來簡單跟大家分享了基本的測試範例   欲了解相關電子商務網站基本測試可參考「電子商務網站的基本測試」   今天來跟大家分享網站測試的單元測試其中一部分,測試範圍包含了字型、字型大小、顏色、圖形、拼字、位置等(較為顯著的錯誤)。 首先,開始測試前應該先確定要從何處開始著手進行,才不會像無頭蒼蠅一樣盲目的測試,在這裡提供幾個測試順序的小撇步給大家參考。 1. 可由上到下、左到右的順序做測試 2. 查看所有頁面的Title名稱是否正確 3. 檢查所有頁面Logo是不是顯示正確,有沒有位移等 4. 檢查所有頁面是否有亂碼或是程式碼顯示出來 5.

電子商務網站的基本測試

當我們完成一個電子商務網站時,就能馬上啟用上線嗎?答案是否。 因為當電子商務網站完成後,並不能馬上就啟用上線,而是需要經過測試的過程。   為什麼需要測試呢? 測試的目的是為了找出錯誤。藉由測試的過程找出錯誤並加以修正防範,有助於預防錯誤的發生,同時也能更進一步符合使用者需求,而提高整體網站的品質,這就是為什麼需要測試的原因了。 下圖為在使用電子商務網站時正常無錯誤情況下的流程示意圖 因此上圖僅是簡述,實際流程所涵蓋的範圍是非常廣的。  

修改設定,隱藏版本提高伺服器安全性

之前有提到有關如何設定META TAG,管理你的網站可見度,今天要再跟大家介紹的是一些簡單的伺服器軟體設定來隱藏軟體版本資訊,防止針對釋出版本漏洞的攻擊,針對Apache與Nginx。 何謂釋出版本漏洞攻擊?   這是指,不論是免費還是付費軟體程式,都可能會有後期發現的漏洞,而因為舊版會引發安全性問題,發送版本更新的訊息給客戶或使用者。 然而這種方式會被某些不肖人士利用,例如如果我今天知道你的伺服器舊版本是2.3.0,Apache推出了新版本2.3.1的更新,這時Apache就會列出release

自訂您的網頁圖示字型(icon font)

像Font Awesome 這一類的圖示字型的確是滿方便的工具,不過Font Awesome裡有幾百個圖示我們不可能每個都會用到。如果您需要一個專屬於自己的圖示字型,可以試試Fontastic這個線上圖示字型產生器。 如果您沒有fontastic的帳號,只要在首頁Create your Icon Font的左邊欄位填入email及密碼就可以快速註冊。如果您已經是fontastic的會員的話,那就直接從右上角的Login登入,登入之後會直接轉到製作icon font的畫面。

使用adapt.js快速將您的網站變成響應式網站

響應式網站是目前建站的趨勢,但如果您原本已經有個網站了,又暫時還不打算另外建立新站,您可以考慮使用adapt.js快速將您的網站轉換成響應式的網站。 adapt.js 的作用是依據螢幕的寬度載入不同的CSS檔案,藉此讓網站達到響應式的效果。原理與media queries相同,都是依螢幕寬度判斷使用不同的樣式(CSS),不同的地方在於:adapt.js將不同的設定寫在不同的檔案內,再依螢幕寬度載入不同的CSS檔案;media queries是將CSS寫在同一個檔案內,依螢幕的寬度決定使用某一段特定的CSS設定。   adapt.js的優點

調整系統設定,再進一步增進Magento效能

之前提到的Magento設定優化,是在Magento系統中已整合好的設定功能,因此我們可以簡單的通過後台設定的改變,輕鬆的做到校能的優化。   如果今天網站的規模龐大,那些設定已經不足以負荷時,還有別的方式可以調整設定,只是建議大家在進行此類的設定變更前,務必進行設定檔案的備份,不小心改壞了設定還可以還原。 1.Enhancing the expiration date 設定資源的失效時間 expiration

Centos-PHP環境下設定Mssql連線功能與啟用

  在預設的PHP環境下,是沒有對microsoft sql server支援連線功能的,因此我們需要進行套件的安裝與啟用。   但是在Centos環境下,預設是無法安裝mssql套件的,因此我們需要擴充套件庫來支援,例如Epel。如果安裝Epel,可以參考這篇文章(連結)。 1.安裝php-mssql套件 sudo yum install php-mssql 2.修改php.ini vim /etc/php.ini 3.在php.ini設定檔中,啟用mssql設定 … //如果有此行,將前方註解取消;沒有則新增此行 extension=mssql.so …

利用htaccess設定301 redirect

有時網站會有舊站翻新、舊的內容移除,想要讓使用者轉移去瀏覽新的內容。 這時我們可以簡單的透過設定.htaccess檔案,告訴Apache幫你轉移網址到想要的網頁。 程式碼(.htaccess檔案) ... <IfModule mod_rewrite.c> RewriteEngine On //想要設定redirect,要先設為啟用(On) RewriteRule aaa_123.html /aaa_abc.php RewriteRule bbb_456.html /bbb_def.php RewriteRule “ccc 789.html” /ccc_789.php

Centos環境下,安裝Epel擴充資源庫

在介紹Epel之前,要先來解釋一下為甚麼要安裝擴充資源庫。 在Linux系統上有所謂的資源庫(repository),這就像是一份清單,清單上紀錄著甚麼資源可以去哪邊下載更新(例如各種不同版的Linux應用程式),所以今天為甚麼要擴充呢?   主要原因有兩個: 一、作業系統通常不會頻繁更新,想要安裝新版的軟體時; 二、軟體太新了,相比較起來舊版的作業系統不一定支援,但依然想要測試

如何設計優良的行動網站 Part 2 – 網站搜尋功能

想要幫助行動網站的使用者快速找到他們想要的內容、網站的搜尋功能就變得非常重要。 將網站的搜尋功能放在明顯的地方 當使用者想要找尋某些特定內容的時候,通常會直接使用搜尋功能,因此我們應該將搜尋功能儘量放在使用者能第一眼看見的地方。 在下圖中,左側的設計使用者無法在第一時間知道搜尋功能的所在,必須在點開功能選單之後才能驚覺:哦!原來在這兒呀! 右側的設計則讓使用者可以直接看見搜尋框,並且使用搜尋功能。 (圖片轉載來自google developers) 如果您不希望搜尋框佔去太多版面的話,也可以先將搜尋框隱藏起來,並且利用明顯的圖示告知使用者搜尋框的位置。  

如何設計優良的行動網站 Part 1 – 首頁和網站導覽

行動裝置與一般桌機最大的不同點在於螢幕尺寸的大小、行動裝置因為螢幕尺寸較小,能夠呈現的資訊有限,因此在內容的規劃上必須更為精簡。目前市面上常見的行動裝置最小的螢幕寬度是320px,iPhone 4 及 Sony Ericsson Xperia Mini 都是這個尺寸。因此,我們在設計網站時,通常會把考慮的螢幕尺寸下限定在320px,我們將為您列出規劃行動網站需注意的重點: 首頁的內容規劃

2015上半年網站功能回顧

今年年度也邁入了第四季,歐斯瑞在前幾季設計了許多大大小小網站,根據每一位客戶的需求而建置了許多網站功能,這邊就讓我們來回顧一下歐斯瑞今年上半年的設計網頁有哪些好玩的功能吧! 360度產品展示:   在網路上購買產品時,您是否有過從不同角度去觀察產品的需求? 商家為了提高消費者的意願往往會放上許多不同角度的商品圖,儘管如此,還是會有消費者想看的地方卻沒法看到的時候,為了能夠在網路上完整的展示商品,我們在這個網頁上設計了 “360度展示商品”的功能!  

如何設計響應式的電子郵件

響應式的電子郵件在編碼上比響應式的網頁更加麻煩,因為我們必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、又或者會強制剝除我們的css設定,因此在響應式的電子郵件在設計上往往限制更多。   以下我們整理出設計響應式的電子郵件一些簡單技巧   使用行內CSS 使用行內css是最保險的作法,因為部份郵件平台會強制剝除我們的<style>設定   行距及段落間距 光是<p>的間距設定、Google Mail與 Yahoo!

手機版電子郵件廣告(EDM)設計分享

從之前與大家分享如何設計良好的手機網頁文章中,可以知道手機使用者的重要性,Yesmail於2014年與2015年調查研究指出,有響應式的郵件廣告比沒有響應式的郵件廣告,使用者的點擊率成長了75%,也就是說符合手機介面的郵件廣告,能提升使用者點擊意願。要建構有效的郵件廣告,與產品、行銷、介面設計和程式製作方式息息相關,今天要與大家分享從設計角度去探討電子郵件廣告介面,如何給予使用者更良好的瀏覽方式。 EDM型態改變  

如何規劃網站測試流程

做為一個測試者該如何著手進行測試,又該如何規劃出一套較完善的流程呢!若測試到問題時又該如何記錄與管理呢? 一般來說,測試不外乎是兼容性、功能性、可用性等等(在此就不詳細列舉);在開始測試之前先了解架構,擬定出一個大方向,如此一來才好畫分成區段來逐一測試,同時也較好記錄與管理。   以下簡約做一個測試範例示意圖給大家參考 當一個流程擬定好時,就可以開始依序照著擬定好的方向去做測試了 今天以 Asana平台為範例來教大家如何規劃網站測試流程,同時又能記錄與管理 (欲了解基本常用功能可閱讀本站「運用ASANA時間管理提升工作效率」文章)   1.

利用Javascript,自製清理網頁元素工具

相信不少的網頁工作者,都會有類似的經驗,尤其是在需要重新整理網頁內容,或是重構網站時,看到一堆過去的網頁程式碼,元素其中不乏各種css,class,id,甚至是bgcolor,width一類的行內屬性,這時就可以利用這個工具來清理掉這些元素屬性,還原成最乾淨的html網頁程式碼。 不過,先提醒一下,此工具並沒有特別處理例外,例如說img的src屬性也是一併會被清除的。 直接來看程式碼(重點執行清除功能的是藍字的程式部分): <html> <head> <title></title> <style type="text/css">

設定Meta tag,管理你的網站可見度

當我們做好一個網站,且讓他上線時,如果我們的網站並不想要被搜尋引擎收集資訊,我們可以透過設定Meta tag的robots,告訴搜尋引擎哪些資料不要蒐集,來管理網站的可見度。 例如說,比較常見到的: <meta name="robots" content="noindex,nofollow"> noindex,nofollow是甚麼意思? noindex:防止搜尋引擎為網頁建立索引。   這是告訴搜尋引擎,不要來搜集與整理我的資料。因為搜尋引擎在提供人搜尋之前,會先到各個網站去搜集資料,整理完成後,提供給使用者搜尋。  

歐斯瑞的工具百寶箱大解密

  網頁設計百寶箱 歐斯瑞的有許多夥伴們都是網頁製作高手,一個一個吸引人駐足逗遛的網站就在在他們的巧思跟精湛的技術下誕生出來。 工欲善其事,必先利其器;這些亮眼的網站當然不是設計師跟工程師們變魔術變出來的,而是歐斯瑞的夥伴們依照設計跟製作的流程、使用各種適合的工具製作出來的。我們依照設計跟程式製作的流程把這些好用的工具分類好;接下來,就為各位歐斯瑞的好朋友介紹這些工具。 網頁設計 行銷 專案管理 設計、色彩管理 行銷 任務管理 電子商務、Magento附加原件 商務 測試 網站管理、網頁測速、網站地圖、DNS SEO、關鍵字 圖形設計 主機管理、主機測試、CDN 電子報系統 需求收集

使用CSS自動設定單偶數背景色

在還沒有CSS3以前,CSS是無法加入判斷功能的,例如說今天要做的單數行背景顏色X色,偶數行背景顏色Y色,以前必須要靠別的程式輔助,例如PHP或是Javascript。 現在就介紹一個CSS3的新選擇器(Selector):nth-child()。 例如:我們今天想要做,單數行的背景顏色綠色,偶數行的背景顏色橘色。 先來準備一些文字段落(p): <p>aaa</p> <p>bbb</p> <p>ccc</p> <p>ddd</p> <p>eee</p>

實作前端購物車或資源回收桶效果

JQueryUI相信是很多人開發網頁時都使用過的js套件,只要能結合JQuery UI其中的Draggable與Droppable功能,就可以透過少少幾行的javascript程式碼,做到拖曳與移除html物件的效果。 首先,要在網頁中先載入jQuery與jQueryUI。 在html的head中,可引用google cdn的方式來直接載入。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script

純CSS的下拉式選單

以往我們要實現下拉式選單大多會使用Javascript或者是Flash,不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。 首先我們先把第一層的按鈕做出來。 HTML <ul class="drop-down-menu"> <li><a href="#">關於我們</a> </li> <li><a href="#">Magento</a> </li> <li><a

網頁使用者互動設計(interactive design)與視差設計(parallax design)分享

行動裝置發展快速與HTML5技術攀升,也影響網頁設計的形態改變,以往會使用Flash來製作網頁動態效果,但由於支援性、SEO等問題,讓多數企業都走向新形態的設計方式,HTML5越來越成為一種趨勢,現今沒有酷炫的Flash動態效果,網頁總不能死版版的,HTML5難道就不能做出酷炫效果嗎?其實是可以的,今天要與大家分享幾個範例,以及運用這些技術該注意的事。 KFC Kentucky Fried Chicken   WWF Tiger Challenge    ANA Flight Connections

CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具,我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。 本文將為您介紹CSS的濾鏡效果及用法。   CSS 濾鏡共有十種特效,分別是: grayscale灰階 sepia懷舊 saturate飽和 hue-rotate色相旋轉 invert負片 opacity不透明 brightness亮度 contrast對比 blur模糊 drop-shadow下拉陰影 grayscale灰階 讓圖片變成黑白圖片。可以使用0 – 1或是0% – 100%做為屬性值。 <img src="image.jpg"

在wordpress中嵌入Facebook臉書動態貼文

Facebook「嵌入貼文」的功能主要就是讓我們把看得到的任何公開訊息以程式碼的方式轉貼到自己的部落格、網站等地方。底下我們將與你分享在wordpress中嵌入Facebook貼文的方法。 取得貼文的網址 在貼文的發布時間上點擊右鍵、選擇複製連結網址。就可以得到這篇貼文的獨立網址。   載入Facebook SDK 在 <body> 標籤之後、載入底下的代碼。這段代碼只要載入一次就好。 <script>window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v2.3' });

使用Mobile Detect套件檢測行動裝置

  Mobile Detect Mobile Detect 是一個檢測行動裝置的輕量級php套件,我們可以利用它來達成RESS(響應式設計+伺服器端組件)。 一般我們在設計響應式網站時,大多是載入相同的內容,再依螢幕寬度決定顯示或隱藏哪些網頁元素,以及網頁元素的排列方式。但是這種作法對性能較差的手執裝置來說,是一種相當耗資源的方式,如果可以依裝置載入相對應的內容,當然是一種比較聰明的方法囉。 這裡我們列舉了使用的方法,歡迎取用唷!   // Include and instantiate the class. require_once

如何使用CSS製作逐格動畫

一般我們在應用CSS動畫屬性時最常用到的效果不外乎改變顏色、形狀及移動位置等。但是,你知道嗎?其實CSS也可以做到傳統的逐格動畫,今天我們就要跟大家分享如何用CSS製作一個逐格動畫出來。 所謂的逐格動畫就是把動畫的動作細分成小影格,將這些小影格快速播放,就可以讓影格裡的圖像動起來。 準備圖片 將我們會用到的影格圖片拼成一張大圖,橫向或是縱向都可以,但是只能有一行或是一列。你可以選擇直接用photoshop拼接這張大圖,或是使用線上CSS Sprites工具,將所有的影格小圖拼成一張大圖。 準備好的圖片就像這個樣子,在這個動畫裡我們共有12個影格。 CSS設定

如何設計良好的手機網頁

【手機購物趨勢】 行動購物已成為未來趨勢 Google與模範市場研究機構(Consumer Barometer)合作的報告指出,國內行動購買力達54%高居全球之冠,其中69%的消費者會先使用行動裝置上網研究產品後再購買。資策會於2014年報告指出,國內有62.5%民眾使用過手機購物,59.8%的消費者習慣使用智慧型手機來購物,消費者行動購物中有68%透過行動版網頁,而有32%是透過應用程式。由此可知,手機購物網站儼然成為一種趨勢,不僅提供消費者一個新的購物管道,也提供商家全新的產品曝光管道。

滿版背景圖的製作方法- CSS & jQuery

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求: 圖片必須剛好填滿瀏覽器不能留有縫細,也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。 圖片必須保持長寬比,不能變形。 要達成上面的需求,我們有以下的方法可以使用 使用CSS3 background-size 屬性 background-size 是css3

自訂您的網站在搜尋結果中呈現的樣子

Google 提供了幾個方法,讓我們可以自訂網站在搜尋結果中出現的樣子。 在搜尋結果中顯示麵包屑導覽。 在搜尋結果中顯示Sitelinks搜尋框。 在搜尋結果中顯示網站名稱。 接下來我們將一一為您做介紹。 breadcrumbs 麵包屑 麵包屑是一組連結、可以幫助使用者了解目前所在頁面的位置及網站的結構。 一個網頁可以同時擁有二組以上的麵包屑。例如: Books › Authors › Stephen King Books › Fiction › Horror 當我們幫麵包屑加上結構化標記後,搜尋結果就會如下圖所示: 底下的範例是一組服飾網站的麵包屑導覽 <a

8個免費工具幫助簡化前端開發的工作

在前端開發的世界裡,有許多工具可以幫助我們簡化開發的工作、加快開發的速度。在這篇文章中,我們要跟大家分享我們常用的工具,分別有: Chrome 開發人員工具 Brackets Sublime Text 3 Koala Online CSS prefix tools CSS Sprite Generator Picpick Just Color Picker Chrome 開發人員工具 Chrome 開發人員工具是Chrome瀏覽器內建的工具。開啟的方式有: 1.  按下右上角的功能按鈕,選擇更多工具 > 開發人員工具。 2.  按下F12或 Ctrl+Shift+I

12個結帳頁面的設計技巧

  網路購物是個在現代社會裡絕佳的購物模式,不必離開家裡便能快速比較、瀏覽所有商品,當你要挑選購買的商品時,如果網站設計的並不理想,在商品下單介面你可能不覺得更方便,反而有了一次很糟的購物體驗。 我們來看看普遍在購物網站結帳頁面上設計的詬病: 結帳前要先填寫表單,然後再告知您此商品已缺貨,還要等上數天→回覆→再次下訂,又一次循環…。其實只需要花些時間對你的結帳過程做一點點的調整和研究使用者的體驗,網站就會獲得更多滿意的回饋,並且有效的增加銷售額;小編在這裡提供了12個技巧來幫助購物網站做到這一點: 1. 不強迫使用者購物前先註冊

用Marvel App讓你的數位點子活起來

  在每個網站誕生之前,規劃人員為了提供使用者最親切以及最有效率的操作流程,在建立網站或是APP之前,客戶與業主需要對於畫面的設計進行多方的討論;然而,如何以”真實”的呈現效果在網頁、APP以及各式裝置中,總是一直困擾著無數的網頁設計師、UI設計師以及業主。 若在預算及時間充足的網站專案中,會在網頁的設計完成之後,由網頁工程師依設計圖製作含有Javascript效果的Html檔案,提供業主及系統分析人員確認需求;反之,當預算不足以支援前者做法,或是專案有急迫的時間壓力時,難道沒有其他更經濟、更快速的方法來實現理想的溝通嗎?

優化你的網站在Facebook, Google+…分享的顯示內容

你有沒有想過,當有人在Facebook分享你的文章時,你的文章顯示方式是否如你所想。當Facebook在抓取我們的網頁內容的時候,如果沒有其他的輔助資訊,它只能猜測哪些內容是重點,哪些不是重點。 這時候我們可以使用Open Graph來優化我們的文章在社群網站的顯示內容。 Open Graph 上圖是我們使用Open Graph前Facebook抓取出來的分享內容。 這一張是使用Open Graph優化之後的顯示內容。底下是我們所使用的原始碼 <!--作者--> <meta name="author" content="Astralweb">

在您的網頁中新增 Google+ 追蹤按鈕

Google+ 追蹤按鈕可在您的網頁上新增一個簡單小型的條件按鈕,讓訪客可將您的個人資料或專頁快速加到他們的社交圈中。如要在您的網站上顯示 Google+ 追蹤按鈕,只要加入一行 JavaScript 程式碼和追蹤按鈕標記即可,例如: 首先進到Google+ Platform的頁面   遵照網頁的步驟,依序完成設定,得到程式碼如下: <!– 將這個標記放在標頭中,或放在內文結尾標記前面。 –> <script src="https://apis.google.com/js/platform.js" async defer>

jQuery特效:Parallax Scrolling 視差滾動

視差滾動(Parallax scrolling)是電腦圖學中一種特別的滑動特效技巧,原理是把背景圖片的移動速度放慢,讓前景圖片移動較快,藉由前後不同移動速度的圖片、讓2D畫面產生多層次的景深效果,藉此來模擬3D效果。早期的遊樂器畫面和2D動畫都可以看到這種效果。把視差滾動應用在網頁設計上,也有不錯的視覺效果。方法非常方便簡單,只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有視差滾動效果的網頁了! Scrolling Parallax jQuery Plugin 就是一套非常容易使用的 jQuery外掛。 Step 1: 引入jQuery及Scrolling Parallax

響應式圖片的解決方案:利用html5 標籤在不同裝置載入不同解析度圖片

常用的響應式圖片解決方案在製作響應式網頁使用圖片時,一般作法有二種 一張圖片設定 max-width: 100%;以確保圖片不會超出畫面。 或是同時載入多張圖片,並在不同的解析度的裝置底下利用display的屬性來控制圖片的顯示與否。 這種方式的好處是可以針對不同的裝置設計不同的圖片,以期達到更好的視覺效果。 缺點就是資料量大增,載入的時間加長,對行動裝置的用戶來說更可能增加行動數據傳輸的費用。 <picture> 現在 html5 有了新的標籤可以使用、可以針對不同解析度的裝置、設定載入不同的圖片。既可以更符合設計、又可以節省載入的時間。 <picture>

【教學】Google Code Prettify 幫您的程式碼上個色吧!

Google Code Prettify 是一個好用的語法上色工具、用法相當簡單 下載解壓縮後,引用他的 CSS 和 JavaScript: <link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> 把要上色的程式碼用 class=”prettyprint” 的 pre 標籤包起來: <pre class="prettyprint">

基礎攝影教學:光圈大小差異篇

很多人剛開始使用單眼相機時,不曉得如何使用相機上的繁多功能,今天歐斯瑞要教大家設定「光圈」,利用單眼相機基礎中的光圈設定,拍出背景模糊,人像(主體)清楚的相片。 首先先來了解簡單的光圈概念,光圈是指相機在曝光時所打開的範圍大小,數值越小,光圈就越大(F2.8);數值越大,光圈就越小(如F22)。 拍照時,光圈大光線就會比較充足,自動的快門速度可以比較快;相反地,使用小光圈拍照時,自動的快門速度又比較慢,拍出來時還有可能晃到,甚至要用到腳架。接者,我們來看看拍出來效果的差異。 使用大光圈: 背景與主體會有較大落差,可以使用在拍攝小花、人物等。 使用小光圈:

兩種方法,教你停止WordPress猜測網址功能!

WordPress 有一個猜測網址的功能,假設一位訪客要存取 “http://www.astralweb.com.tw//hello”,但這個頁面並不存在時,WordPress可能會把使用者重新導向至 “http://www.astralweb.com.tw/hello-world”。不過這個功能出錯的機率相當大,尤其隨著網站內容愈來愈多的時候,出錯的機率也相對提升。 如果您希望停用Wordpress 猜測網址功能,改以404網頁來代替,只要在functions.php加入以下程式碼即可:

新手必看─6個改善網站速度的技巧(含WordPress / Magento)

隨著網站提供內容越來越詳細、豐富,網站需要傳送的資料也逐漸擴增,這些都會影響網路傳輸資料的速度,增加載入時間。在這分秒必爭的資訊時代,我們必須確保自己的網站使用快速、流暢,加強使用者經驗;所以今天要和大家分享的主題就是如何提升你的網站速度。 1.主機 主機是網站所有的基礎,基礎的CPU處理速度、記憶體大小、硬碟的種類等,詳細的有網路上傳及下載速度、主機限制的流量、主機系統的環境,使用合適的主機對網站速度來說是很重要的。 2.圖片壓縮 因為網頁內容越來越豐富,使用的圖片也越來越多,導致容量不斷地增加,所以選用正確尺寸的圖片,以及適當的壓縮圖片可以改善網站速度。 3.使用語法取代Flash與圖片

如何在網頁中新增Google+ 徽章?

將您的 Google+專頁連到相關網站,可在 Google 搜尋結果中,為您的網站爭取更多推薦,吸引更多訪客瀏覽您的 Google+ 內容。 首先進到Google+ Platform的頁面: https://developers.google.com/+/web/badge/ 遵照網頁的步驟,依序完成設定,得到程式碼如下: <!– 將這個標記放在標頭中,或放在內文結尾標記前面。 –> <script src=”https://apis.google.com/js/platform.js” async defer>

手機網頁設計新取向─台灣五大案例分析!

一、手機版網頁的重要性 1.1 智慧型手機普及率逐年上升 在智慧型手機發展盛行趨勢下,在全球擁有智慧型手機的普及率逐年上升,在國內2011至2013年智慧型手機普及率在各個年齡層上都是呈現上升趨勢,特別是在2013年時,18歲至44歲之使用者上升至六成以上,而25歲至34歲高達七成五,可以顯示智慧型手機已經是普遍性的產品,對於使用者具有相當的重要性。 資料來源: ThinkWithGoogle 1.2 使用智慧型手機上網頻率

圖騰的力量─極度乾燥設計師Richy Baldwin的設計之路

  您是否曾對極度乾燥(Superdry)如何設計圖案T恤跟連帽外套感到好奇呢?平面設計師李奇鮑德恩(Richy Baldwin)從公司草創之初就效力於極度乾燥了,我們來聽聽他怎麼說這些背後的設計故事。 「每個人都好奇地問過我是怎麼得到靈感的,其實我的腦袋裡一直塞滿各式各樣混合的設計元素,尤其是50年代的美式風格。這二十年來,我一直去美國旅行,並且進行質量並重的收集。我總是拍許多照片、收集舊標誌跟舊包裝。美式車庫文化尤其激發我的靈感,像是有關車子、摩托車、加油站入口、加油機等種種標誌;這些各式各樣的Logo就是讓我設計出復古T圖案的最佳靈感來源。

如何利用jQuery來讓錨點連結有滑動的效果?

一般網頁文章太長的時候,我們會利用錨點來協助網友找到他要的資料。 錨點就像書籤一樣,當單一網頁的內容很多的時候,我們可以將內容分成數個段落,在每一段內容前面插入一個錨點,利用錨點超連結的功能,讓網頁在閱讀上好像分成數個獨立的章節一樣,方便網友閱讀。 範例: <a href=”#section1”>前往第一段</a> <a href=”#section2”>前往第二段</a> <a href=”#section3”>前往第三段</a> <a id=”section1”></a>

新一代多螢電商解決方案:響應式設計(RWD)

電子商務瞬息萬變,要如何搶攻多螢幕電商市場,掌握桌機、平板電腦和智慧型手機的網購商機呢?根據Google 2014年的調查,台灣有54%的人上次購物是使用智慧型手機,其比率高於韓國38%、美國26%和日本15%等,位居世界第一,可見台灣人的行動商機不容小覷。為了把握這廣大的行動商機,許多電商業者常做的方式是開發行動購物APP(例:MOMO購物網、Yahoo超級商城),或者另外架設行動網站(例:Lativ網站)。 其實,還有一個台灣尚未普及,但在國外相當流行的Responsive Web Design(RWD),稱為響應式設計(或稱互動式、回應式設計),國外使用範例如知名品牌Tommy

利用Google的Structured Data Testing Tool檢查schema標記是否正確

繼上篇文章善用SCHEMA 標記,讓搜尋引擎更容易了解你的內容!後,我們針對Schema做了延伸文章,希望可以提供正在學習的朋友一些幫助。 寫好schema 標記之後,我們可以利用Google提供的Structured Data Testing Tool結構化資料測試工具來檢查。 進入Structured Data Testing Tool之後,可以選擇檢查網址或是網頁原始碼。我們可以利用這個工具來檢查schema標記的設置是否正確。在這裡我們使用HTML檢查的方式,選擇HTML標籤之後,貼上我們剛寫的原始碼,再按下PREVIEW預覽,出現底下的結果:

如何使用Brackets 擴充功能 “Extract for Brackets (Preview)”,直接從psd檔取出設計資訊?

本篇文章將介紹如何使用Brackets擴充功能 “Extract for Brackets (Preview)”直接從psd檔取出文字、圖片、位置和間距等設計資訊。 你可以直接從 http://brackets.io/ 下載內含 “Extract for Brackets (Preview)”的版本、也可以另外從擴充功能管理員安裝 “Extract for Brackets (Preview)”。 STEP 1: 點擊右側圖示開啟Extract for Brackets (Preview) STEP 2: 上傳PSD檔案 第一次使用,“Extract for Brackets

Merry Christmas!來自歐斯瑞最誠摯的祝福!

Merry Christmas! 在這個充滿異國風情的節日,Astral

Photoshop教學:【基礎篇】製作lomo風格

Lomo特效是很常見的修圖方式,其特徵就是暗角的變化,以及不同色調呈現的感覺,復古、絢麗各有不同。今天我們要介紹如何用Photoshop後製,將照片改成Lomo風格。目前有許多應用程式能套用Lomo特效,但色調、風格不一,使用Photoshop可以進行微調,改成你想要的樣式。接下來請先準備一張圖片,改成你想要的Lomo風格吧! 1. 開啟檔案。 2. 置入欲修改的照片。 3. 選擇 影像>調整>色相/飽和度 4. 在色相的地方向左調,改變原有色彩。 5. 選擇 調整>亮度/對比 6. 加強照片的亮度、對比度。 7. 接著,複製一個新圖層來做邊緣暗角的部分。 8. 選擇

善用schema 標記,讓搜尋引擎更容易了解你的內容!

什麼是schema? schema是一種microdata,目的是要讓搜尋引擎可以順利解析網頁內容,進而精準的提供符合搜尋引擎使用者的需求內容,加強在地SEO。 schema的使用很簡單,詳見敘述: <h1>歐斯瑞手工蛋捲</h1> <p>歐斯瑞手工蛋捲用料實在,紮實酥脆的,保證一吃上癮</p> <p>335 桃園縣大溪鎮文化路193巷24號</p> <p>聯絡電話:(03) 388-3887 </p> <p>營業時間:週一至週五  上午8點半-下午5點半</p>

網頁設計教學:【工具篇】批次處理的好工具ViewNX 2

在協助客戶處理產品頁面的照片時,通常照片檔案太大或尺寸不一,一張一張修改又相當耗時,有個簡單的方法分享給大家,只要使用免費軟體批次處理照片,就能一次搞定所有照片!我們使用的是Nikon提供的免費照片處理軟體「ViewNX 2」,接下來就跟著下列步驟進行吧! 1. 請先至官網免費下載ViewNX 2軟體。 2. 在修改前照片像素大於3千多。 3. 開啟軟體後在左邊資料夾視窗,可選擇電腦上存放照片的資料夾,右邊視窗便會顯示此資料夾的圖檔。 4. 接著選取想要更改的尺寸。 5. 然後點選轉換。 6. 會彈跳出一個視窗。 7. 在此視窗可以選擇: 壓縮品質 改變影像的尺寸像素 指定轉換檔案的存放位置

如何設計購物網站的地址欄位?

購物網站具備送貨到家門口的方便性,因此逐漸受到各地消費者的喜愛。許多將市場放眼全世界的公司也希望利用網路無遠弗界的優勢,達到將自家產品銷售到全球各個角落的目標。以滿足這一趨勢為目標,市面上有一些功能強大的網路商店系統(如: Magento)提供了支援多語系及多種貨幣計價的功能。為了快速送達消費者的購買商品,在建置購物網站時,不同國家的地址格式也需要做出調整,以免商品送達延遲產生消費糾紛。 我們研究了一些知名購物網站,並針對台灣及美國的地址格式做出整理,希望能幫助正在設計購物網站地址欄位的朋友。 零售業巨人亞馬遜的美國網站,在地址欄位只要求客戶填寫七個欄位,分別是: 地址欄位(Address

網頁設計教學:【概念篇】台灣網頁常用的字型

選擇合適的網站字型可以為網站加分,我們針對台灣字型進行分析研究,發現台灣TOP 10網站中,最常使用的是Arial字型,其次是微軟正黑體;而在台灣TOP10購物網站中,優先使用字型也是Arial字型,其次是helvetica。可見Arial字型是最常使用的字型。而在字級部分,除了特別的字體會用到3~40px字級較大字體,或20px左右,最小字體不會低於12px。也有研究指出12級字體大小是最好閱讀的字級,所以網站字級盡量不要小於12級字體。 台灣TOP 10網站(截至2014/12/1): 1. Yahoo!奇摩 使用字型:Arial 最大字級:15px 最小字級:12px 2.

網頁設計【認知篇】:網頁美工、設計師如何協助SEO搜尋引擎優化?

設計往往會追求美感,具有美感的東西容易吸引大眾注目,卻不見得會是「合適、友善」的設計。因此,我們通常會把設計美感當作基礎,將強化網頁、提升SEO搜尋引擎優化為首要目標。為了在美感與SEO中間找到平衡點,Astral Web要和大家分享網頁設計的經驗,希望能幫助大家找到方向! 在製作客戶網站時,「導航功能」是最重要的設計項目,最好要有清楚的視覺圖文設計,以加強網站導航,方便使用者瀏覽。美感的設計可以給予使用者較好的視覺形象。 有些網站會藉由發表文章增加瀏覽人次,設計師可協助製作文章圖片吸引使用者,還能將繁雜的文字變成淺顯易懂的資訊圖表(例如:說明圖、流程圖),幫助讀者了解內容。

如何用CSS自訂網站反白文字?

如果來到Astral Web歐斯瑞的網站,按下左鍵選取文字(反白)時,出現的不是預設的背景色,而是鐵灰色,讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見,今天我們就來和大家介紹如何設定! 方法很簡單,只要利用css3 的selection選擇器就可以了! ::-moz-selection { /* Code for Firefox */ css 設定值 } ::selection { css 設定值 }   Astral web的設定:   ::selection { color: #fff; background-color:#333; }  

如何使用css來隱藏placeholder文字?

設計表單的輸入欄位時、常用placeholder來做提示文字,在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後,placeholder的文字會立即消失,一般常用的方法就是利用 onfocus 和 onblurl來達成。 <input type="text" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" />

塑造網站視覺風格,應該注意什麼?

架設網站需要考量的地方相當多,包括版面配置、是否使用響應式設計,功能操作有沒有符合使用者經驗等;其中最易影響使用者對網站的第一印象,就是網站的整體視覺風格。當使用者第一次造訪網站,最先看到的就是網站呈現的視覺形象,是清新的藍色、綠色系,還是甜美的粉色系。每種色系根據其訴求的形象又大不相同,例如主色調為黑色的網站,有可能是搖滾風格,也可設計成時尚、質感的網站。在塑造網站的視覺形象時,往往需要商家與設計公司良好的溝通,才能達成符合公司形象又帶有美感的網站。 今天Astral Web想和大家分享在設計網站視覺風格時,應該注意什麼地方,讓商家在個人喜好與使用者觀感中,找到最適合網站的形象。

使用響應式網頁設計的優點是什麼?

由於行動裝置的發展迅速,越來越多人注意到響應式設計的重要性,尤其是注重轉換率的購物網站。可能會有人想問:為什麼同樣的網站在不同裝置上,要有不同版面大小、編排呢?理由很簡單─為了改善使用者經驗(User Experience)。讓我們想像一下,假設今天你在手機上收到A網站正在特價某產品,正好就是你想要買的東西,於是你進入A網站想要了解產品內容,卻發現網頁跑版、難以瀏覽,必須試著放大、縮小來看清楚內容,想點選購物卻無法正確選到選項,在難以操作的環境下你還會想立即購買嗎?

如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

設計版面時,為了讓網頁更整齊,常需要限制文字的字數,當文字超過限制時會自動顯示”…”的刪節號。今天Astral Web要介紹如何限制字數,讓版面更整齊順眼;但這部分會用到程式碼較為複雜,需要有程式背景的人進行操作。 首先,單純使用CSS時,我們可以利用text-overflow: ellipsis; 這個屬性達到這個效果。 STEP 1: 先準備HTML <div class="box"> <p class="ellipsis">Astral

PhotoShop教學導覽,幫助使用者快速找到相關教學!

為了方便學習PhotoShop的朋友,Astral Web整理了一系列的教學導覽,希望能讓大家快速找到相關教學。教學導覽以修圖效果分門別類,可根據學習需求參考。 我們會陸續更新在點這裡→New!Photoshop 教學導覽 (每周更新)歡迎需要的朋友善加利用喔! 基本去背: PHOTOSHOP教學:【入門篇】使用筆型工具標準去背 PHOTOSHOP教學:【入門篇】使用魔術棒工具快速去背與限制 美化修飾: PHOTOSHOP教學:【入門篇】使用汙點修復筆刷工具快速修圖 PHOTOSHOP教學:【入門篇】讓你年輕20歲的除皺修圖技巧! PHOTOSHOP教學:【基礎篇】如何修飾張嘴的照片?

如何應用Google Analytics,得知是否需要製作響應式設計網站?

Google Analytics可以詳細分析網站相關數據,幫助管理者進行決策,以及了解網站的優缺點。今天Astral Web要和大家介紹如何從Google Analytics中,得知使用者是透過何種裝置瀏覽網站。了解使用者使用的裝置,可以幫助商家決定是否有必要製作符合手機、平板電腦的響應式設計,並了解使用者在使用電腦、手機或平板電腦瀏覽網站時,可能會有什麼問題導致障礙,進而改善網站增加使用者經驗。 教學影片: 請先登入Google Analytics帳戶,接著點選左方選單的「目標對象」>「行動裝置」>「總覽」進入介面,會看到網站流量曲線圖。

好的商標設計應該包含什麼元素?

商標是給予使用者辨識的圖像,也是企業的形象代表,由商標所衍生的視覺形象,不僅能讓使用者立即聯想到品牌,還兼具美化作用;在塑造公司整體視覺形象時,更是延伸的主軸。 通常設計師在進行公司名片、網站等設計時,都會先以公司商標做主題發想,進而發展出符合公司形象、貼切的設計。舉例而言,Astral Web的商標在上方加了圓弧造型,來象徵活力與熱情源源不絕的圍繞;並使用活潑的橘色,希望給人充滿活力的感覺;在我們進行網站改版時,也沿用橘色作為主色調,讓整體版面在視覺上更為融洽。 因此,商標設計並非一勞永逸,還需考量多方層面,才能創出兼具特色與美觀的商標。那麼,好的商標設計應該包含什麼元素呢?

歐斯瑞玩創意─跳脫傳統,讓「找不到頁面」更有趣

如果你在Astral Web歐斯瑞網站,發現「網頁已不存在」的頁面,會看到我們歐斯瑞的小幫手莉莉喔!繼網站全新改版、煥然一新後,除了加強網站內容的品質,我們樂於製作創意、有趣的設計,像是此次的「網頁已不存在」,即票選歐斯瑞最艷麗的莉莉作為網站小幫手。 莉莉真有其犬,是歐斯瑞最年輕的同事,以下為莉莉的個人簡介: 創意當道,一個簡單的想法就能讓網站大不同,增加樂趣、吸引人潮。在「網頁不存在」的地方加點巧思,可安撫使用者「找不到網頁」的情緒,進行下一步的查詢。Astral Web樂於嘗試各種創新的點子,如果您有任何網站需求,歡迎聯絡我們! Astral

使用響應式網頁設計,可提升使用者經驗!

Astral Web歷年來已幫許多客戶製作響應式設計的網站,效果良好;若想了解更多響應式網頁設計的資訊,歡迎聯絡我們! Astral Web編寫製作

Astral Web祝您中秋佳節愉快!

一年一度的中秋佳節即將來臨,Astral Web獻上最誠摯的祝福, 願大家中秋節快樂,月圓人團圓!

開啟WordPress多站點功能,成為網誌站長吧!

今天Astral Web要教大家開啟WordPress的多站點功能,可成為網誌站長,讓他人可以在您的Wordpress申請帳號,使用網誌(部落格)功能! 由於開啟這項功能稍嫌複雜,請大家仔細操作以免出錯,建議您在開始前先備份wp-config和htaccess這兩個檔案,較為保險! 請先登入您的Wordpress網站。 接著,請到您所安裝Wordpress目錄,進行編輯檔案wp-config.php.   搜尋 //define(‘WP_ALLOW_MULTISITE’, false);

M-Commerce時代來臨,開發APP有技巧!

根據聯合國的國際電信聯盟(International Telecommunication Union,ITU)研究調查,去年全球約71億之人口,有68億的人口註冊手機號碼,約有21億人使用3G或3G加行動寬頻,幾乎佔了總人口數的3成。行動網路使用人口越多,代表人們在網路作業方面,不再侷限於桌上型電腦,而傾向方便、輕巧的行動裝置。

穿新衣可以帶來好心情,網站改版也能帶來新氣象!

網站改版可以讓版面煥然一新,帶來新氣象, 今天就讓大家來看看一些知名網站歷年來的變化吧! 104人力銀行網站 ● 1996年 ●1998年 ●2002年 ●2003年 ●2004年 ●2008年 ●2010年  ●2013年 ●2014年   1111人力銀行網站 ● 1999年 ● 2001年 ● 2002年 ● 2003年 ● 2004年 ● 2006年 ● 2007年 ● 2008年 ● 2010年 ● 2011年 ● 2013年 ● 2014年 Mobile 01網站 ● 2003年 ● 2004年 ● 2005年 ● 2006年 ● 2007年 ● 2013年 ●

利用指令優化MySQL資料庫,網頁載入更快速!

不知道您是否有這種經驗? 瀏覽購物網站時,看到喜歡的商品立即點選後,卻發現一秒、兩秒…..十秒過去了,網頁卻還未載入完全,這段時間在別的網站可能已經看了三項商品了。 如果您是消費者,請問您會繼續等待網頁載入,或是直接關掉看別項商品呢? 在網路世界,要抓住客戶的視線需要分秒必爭的速度效率。 因此,若您的網頁有載入速度過慢的問題,不必擔心,今天Astral Web就要和您分享優化MySQL資料庫的方法,讓網頁載入速度更快,消費者瀏覽更順暢! 此次介紹的方法是適用於MyISAM類型的資料表,藉由Check table(檢查表)、Repair table(修復表)、Optimize

利用優化壓縮工具,壓縮圖檔事半功倍,網站載入更快速!

導致網站速度緩慢的原因有許多種,網站流量過大、同一時間參訪的人數過多等,都會影響網站的載入速度。其實,圖檔過大也是主因之一。尤其對購物網站來說,圖片是消費者參考商品的主要依據,圖片豐富度是購物網站的訴求之一。 然而,為了避免圖檔過大造成網速緩慢,我們建議各位商家可將圖片的大小控制在1MB以下,如此一來,即使圖片過多也不易造成網站速度過慢。 但是圖片大小不一,要如何才能一次完成圖檔壓縮,讓檔案變小呢? 今天Astral Web就要和大家分享實用的圖檔優化壓縮工具,可以去除網頁不必要的資訊,以不破壞圖片為原則進行壓縮。 考量到PC及Mac的系統不同,我們分別推薦了兩款工具,供大家參考。

在WordPress W3設定Amazon Cloudfront CDN快取,加快網站速度!

網站載入速度的問題,時常會被大眾忽略,但網路速度的快慢卻和使用者息息相關。現代人講求效率,網站速度過慢可能會導致使用者失去耐心,減少網站流量。可以的話,最好讓網站在2秒內載入完全,才能在第一時間抓住客戶,讓更多人願意瀏覽您的網站! Astral Web相當重視客戶網站速度的問題,在此提供設定CDN快取的方法,加快您的網站速度! 步驟 1:安裝W3 的緩存套件 登入到WordPress 尋找“套件(Plugins)”選項,點選“新增(Add New)”,並搜尋W3 的總緩存套件然後開始安裝。   步驟 2:註冊Amazon Cloudfront CDN 快取

WordPress 快速安裝教學!

這篇文章將會為您介紹如何安裝WordPress 3.6/3.7 版本,並教您如何設置主題。 以下是我們的教學影片,但旁白為英文對大家來說較為困難,因此我們用中文詳述了安裝步驟,希望能幫助大家順利安裝成功! 教學影片:安裝WordPress 3.6/3.7 版本(英文版) 在伺服器上安裝WordPress 步驟 1:下載WordPress 請先到wordpress.org點擊下載,取得最新版本的WordPress安裝文件。 步驟 2:上傳WordPress到伺服器 使用你最喜愛的FTP軟體,上傳安裝文件到你的伺服器。 如果你下載是一個壓縮文件(Zip),記得要先解壓縮。 步驟