文章彙整

"March, 2018" 有32篇文章

首頁  /  2018  /  March

Chrome 推出 Lighthouse 前端稽核功能 – 為了更好的 SEO 與使用者體驗

Chrome 開發團隊不斷開發與改進瀏覽和最佳化體驗功能。在 Google I/O ’17 開發者大會上向外界展示了很多重要的演化,其中一部分是有關 Chrome DevTool,因此作為前端開發者自然也受其影響。Chrome 60 在 DevTool 中加入了很多新的項目,而最令人驚喜的是全新的 Audits 面板。 新的 Audits 面板基於 Lighthouse ,它提供了一整套全面的測試環境来评估網頁的品質。稽核類別分別是 網站的效能、無障礙程度、漸進式網路應用程式相容性等等,並提供改善網站品質的明確方法。“ 這款工具正如其名 ( Lighthouse

電商創業第一步 – 商業模式 (下)

在上一篇電商創業第一步-商業模式(上)文章中,我們介紹了電子商務的基本商業模式,在這篇文章中,我們將會提出在創業初期會遇到的每一個與商業模式習習相關的問題,讓你可以面對這些答案時,更了解那些決定更適合自己的創業,進而來架構出正確的商業模式。   我的顧客是? 你的創業的目標顧客是?是企業還是一般消費者?這將會影響商業模式最關鍵的答案,介紹基本的商業模式之後,我們知道基本的電商平台有B2B(企業對企業)、B2C(企業對消費者)及C2C(消費者對消費者),而決定你的顧客是企業(Business)或是一般消費者(Customer)都是建立商業模式的基石。   我的商品是?

電商創業第一步 – 商業模式 (上)

當你準備建立自己的網站創業的時候,你將會需要做出許多大大小小的決定,而這些決定都攸關了你是否選擇了正確的商業模式, 進而影響創業的未來。   在電商創業第一步-商業模式(上)中,我們將介紹電子商務的基本商業模式,而在電商創業第一步-商業模式(下)中,我們將會介紹在創業初期會遇到的每一個與商業模式相關的選擇,讓你可以面對這些抉擇點時,考慮其優缺點,來架構出正確的商業模式。   電子商務基本的商業模式   B2B (Business to business/ 企業對企業)  

在移動裝置上贏過你的競爭對手 – Google 官方檢測工具

根據全世界最龐大的數據資料庫Google統計,網頁延遲1秒將造成轉化率下將20%! 在消費重心越來越仰賴移動裝置的現在,設計網站時更需要針對移動裝置去進行速度測試,確保移動裝置上的用戶體驗品質,Think with Google 在二月份推出了一套工具,用來檢測移動裝置讀取網頁的速度,包含十二個國家及3G/4G的網路環境,讓你可以使用不同的條件去檢測自己的網站,同時也提供了收益預估計算器,讓商家了解改善自家網站的速度,將會帶來多少收益,現在就讓歐斯瑞帶領你來看看吧!   步驟一:進入工具頁面

運用Odrive增強檔案管理的效能

當您的公司有所成長,有更多的團隊成員或客戶需要進行交流時,檔案管理是一個主要面臨的課題。沒有適當的檔案管理有可能將會丟失文件,傳錯副本版本以及當你需要專注於工作時結果一團亂的風險。   以下有一些重點問題 客戶與團隊成員用不同的檔案儲存方法 原始文件隨著時間堆積變成多個版本(線上及電腦裡的檔案皆是) 檔案流失或存檔不正確   企業拓展也許需要時間,但我們可以試著從改善項目中的流程以加速改進。這次我們向大家介紹這款工具,是一些我們成員自身使用過多種線上存儲服務,並因成功管理檔案進而提升了他們的工作流程的。  

Photoshop教學【影像修圖】動畫風格

今天astralweb要與大家分享眾多動畫風格中其中一種風格的修圖,一起來看看如何製作吧! ※本教學需先對工具使用有基本認識 ※本教學需先熟知基本技法,如去背、選取工具、色調調整   Step 1. 置入要修改的照片 Step 2. 先複製一個相同圖層 Step 3. 本範例我們要將天空和地面要做不同層度的處理,因此要分開做 使用選取工具,將天空取下 Step 4. 取下並貼上 Step 5. 我們針對天空部分做繪畫效果 選擇 濾鏡 > 濾鏡收藏館 Step 6. 我們使用乾性筆刷並調整至需要的數值 Step 7. 接著做色調的調整 選擇  濾鏡 > Camera

Magento 1 與 Magento 2設定位置大比較

先前Astral Web分別撰寫過有關 Magento 1(M1) 與 Magento 2 (M2)的文章,但你知道Magento 1 與 Magento 2 的管理界面其實有很大的差異嗎? Magento 1 管理界面較混亂,對非技術用戶管理來說有難度,例如有關商店配置的設定,而Magento 2 則是將界面簡化重組,讓界面看起來更簡潔、乾淨,在管理界面(UX)有很大的改進,大大降低管理困難度。   Magento 1 與 Magento 2 設定位置差在哪裡呢 1. 配置

網站測試工具-Selenium教學

網路越來越發達,大家對網頁的要求也越來越高,不只要美觀、功能強大還要獨特性高。在這種要求下,測試網站就變成很重要的一件事。網路上可以找到許多強大的測試網站的軟體工具,但如果能以簡單快速的方式來測試網站,是否更加容易上手呢? 今天歐斯瑞就為大家來介紹一個測試工具-”Selenium”。一起來看看吧!   Selenium是什麼? Selenium

Ubuntu如何手動新增虛擬記憶體(swap)

虛擬記憶體,虛擬,簡而言之,就不是真的記憶體,是取用硬碟的一部分空間來當作記憶體使用,記憶體不敷使用時才輪到他,所以另一種說法是”備用”的記憶體;在以往傳統硬碟的速度都較實體記憶體要慢,使用虛擬記憶體速度也不如一般記憶體,充其量只是在偶爾使用超過記憶體容量時,暫時借用一下硬碟讓工作可以繼續(如果經常不足,電腦該多加條記憶體了)。   不過在技術進步的現代,硬體的成本大量降低,虛擬記憶體的使用機會已經幾近於零,一般電腦已經鮮少在設定虛擬記憶體,所以很多人都會跟你說不需要使用這功能多佔用硬碟空間,因為做為虛擬記憶體會將空間扣除,保留給系統使用。  

Magento 2 – 更改配置使後台用戶登入不受限制

  會特別單獨提到這個設定項目是因為,這個項目的功能在Magento 1是沒有的。 這個設定的作用是,舉例來說,我們持有一個後台帳號為admin,有很多人打開網站後台並同時登入admin帳號的話,後登入的會踢掉前面登入的(同時只能有一人使用此帳號)。 這個設定在Magento2網站架設好時就預設啟用,有時難免造成困擾,那麼如何將此限制停用呢?請參考下面設定步驟進行。   1.進入後台後,選擇左側選單STORES->Configuration。   2.進入Configuration頁面後,左側分類ADVANCED->Admin。

Magento 2 System Config Data

Magento 內部有一張資料表是用來儲存系統參數,但常常不知道怎麼新增自定義的欄位進去。 今天,我們就來介紹資料設定欄位的方法吧!   1. 資料表 Database (1) Table Name: core_config_data   這張就是我們今天要介紹的主要資料表,它負責了幾乎一切 Magento 系統變數的儲存,我們透過以下表格來看看他有哪些欄位吧!   欄位名稱 型別 長度 說明 config_id int 10 Entity Id scope_id varchar 8 n/a scope_id int 11 n/a path varchar

如何改善使用者體驗以提高顧客忠誠度

一個高水準網站除了擁有好的商品外,另一個主要原因便是使用者體驗。   Why? 在這個資訊與技術蓬勃發展與進步的時代,現代人們大多透過網站或商店門市與商家、公司進行互動。 不管是一般形象網站、電商網站,更甚是響應式網站,都逐漸顯示出使用者體驗的重要性。   使用者體驗 = 顧客忠誠度 使用者體驗的好壞將呈現出您網站的離開率或轉換率是否有所增加。   不友善的設計 一個網站為了滿足網上顧客,都會建立一套完善的系統與流暢的動線;因此不友善的設計可是會損害彼此之間的關係,進而流失顧客。   顧客反饋的好壞 

Magento2 客製化模組製作

本篇要介紹如何在Magento2上製造一個客製化模組(Extension),我們會介紹一個模組必要的xml配置檔,和建置controller和view,呈現它們是如何溝通傳遞資料。 適用版本: Magento2.0以上   首先我們先決定好模組名稱為AstralWeb_HelloWorld,然後依照此模組名稱在app/code資料夾裡底下建立新的路徑app/code/AstralWeb/HelloWorld,一個模組必需要有registration.php和module.xml檔案,模組才能在Magento2底下運行,這兩個檔案我們建置的位置及內容如下: 檔案路徑:

Magento 2 事件處理 (上)

Magento 內建有許多的事件,其實使用起來非常方便,設定上也不會太過於繁瑣,又可以取得想要的參數,今天我們就來看一下事件的呼叫是如何使用的。   1. 什麼是事件 ( Event ) 事件 ( Event ) 是一種在 Magento 內實踐設計模式(Design Pattern)中觀察者模式(Observer Pattern)的一種實作方法。 而根據維基百科對於 觀察者模式 (Observer Pattern) 的定義:

介紹建立 API 的方法 – 2 前台會員權限

繼上一篇介紹了訪客權限後 這次繼續介紹如何建立 API – 前台會員權限 權限為  需有 前台登入權限 才能存取   取得 token (每次取得的 token 皆不同) url : http://{domain_name}/index.php/rest/V1/integration/customer/token   get token by postman 注意: 若要用 curl 取得 token 須確定 domain_name 可由server 端連上   get token by crul <?php $url =

介紹建立 API 的方法 – 1 訪客權限

如何建立 API 關於API 權限等級 依身分不同有三種不同存取權限 1.訪客(未登入狀態) 2.前台會員 3.後台管理者 我們會依序跟大家各別介紹 今天先簡單介紹如何建立訪客權限的 API 權限設為  所有人皆可存取   在 module Astralweb_Tech 建立以下檔案 \app\code\Astralweb\Tech\etc\di.xml \app\code\Astralweb\Tech\etc\webapi.xml \app\code\Astralweb\Tech\Api\HelloInterface.php

如何在Magento2中 新增Newsletter 模板

當你的商店有銷活動時,該如何快速告知你的客戶? 透過Newslwtter 讓你的們隨時掌握你的商店吧!無論是推出新產品、促銷優惠、或是有任何想告訴客戶的新聞等等。   新增一個新的Newsletter Template 首先進入後台 Marketing>Newsletter Template   在這裡可以管理所有的Newsletter Template ,如果你還沒新增過任何模板,這裡是空白的。 接著 ,點擊右上角的新增模板按鈕。   在表格中填寫模版名稱、模板主題、發送newslwtter要顯示的發件名稱、要顯示的發送電子郵件 、模板內容等。

Magento2 如何更換交易信件logo

magneto2內有許多交易信件提示的原生功能相當方便,那我們要如何讓每一封的交易信件附上公司的LOGO呢?   首先,進入後台操作進入content>Configuration   接著選取希望更改主題!   拉到最下方找到Transactonal Emails ,並點擊展開。   接著如下圖第一步驟,點擊upload,並選擇公司圖片,在步驟2的中會顯示圖片預覽。接著下方alt欄位可以編輯若是圖片無法顯示的資料。   最後,別忘了按右上角的儲存就大功告成了!  

解決 Magento 2 新增 Product Attribute 自動新增至 Default AttributeSet 問題

當 Magento 使用上有時候需要多個 AttributeSet 來管理多種類的 Product,但是使用內建的 addAttribute 方法帶入 group 參數的時候,會自動新增至每一個 AttributeSet, 可是偏偏不是每一個 AttributeSet 都需要此屬性。我們今天就來看看到底是怎麼回事!   1. 新增 Attribute 通常會寫在 InstallData.php 內,今天我們就不特別說明新增的部分但是在新增的時候,我們首先要把 group 選項移除掉,並且加上 user_defined 選項,並給予 true 值。

歐盟個人資料保護法規GDPR對電子商務的規範

 歐盟個人資料保護法規GDPR對電子商務的規範 大綱: 1) 總覽 2) 數據/資料 收集 3) 數據/資料 存儲   總覽:   什麼是歐盟個人資料保護法規 (GDPR)? 基本資料保護法規 (GDPR) 是歐盟於2016年通過的法律,旨在為歐盟公民提供更強大的數據管控,如數據收集、存儲以及再應用,同樣的,GDPR也為提供企業商家更清晰的法律架構。   為什麼我要關心GDPR? 2018年5月25日開始時,違反GDPR相關法律規定的行為,可能導致相關單位被裁罰 (200萬歐元或營業額4%的收入),並依法處理因個人數據規法所提起的相關訴訟。  

AMP是什麼? AMP的好與壞報你知

大家都知道在這個速度優先的互聯網時代,速度就是王道。 你有這樣的經驗嗎?正在等待捷運進站,捷運也許都進站開走了,手上的手機網頁都還沒加載成功。據統計,將近一半比例的人,在瀏覽網頁時如果加載時間超過3秒,通常都會選擇放棄閱讀。因此讓讀者錯失閱讀好文的機會。Google為了改善這個問題,開發了AMP這項專案,讓閱讀者擁有流暢的閱讀體驗。   網頁速度優化Google AMP項目 Google

網站速度,影響你的行動搜尋排名?

網站速度的重要性,2018大事件 Google 在2018一開春就宣告,從 2018年7月起,網頁的讀取速度將做為行動搜尋結果的排序條件之一。也就是,除了傳統我們所熟知的,網頁內容的相關性、外站的連結品質、是否使用AMP、使用者體驗,新加入網頁讀取速度。這項更新只會影響使用體驗非常緩慢的網頁,網頁的相關性還是影響搜尋排名的關鍵指標。   Google稱這項網頁速度指標為Speed Update (速度更新),相信對於Google搜尋不陌生的人,應該都知道網頁速度不早就是Google排名演算法的影響因素之一嗎?

SVG邊框動畫提升網頁質感 (下)

Vivus 是一個輕量級的JS庫,用來執行 SVG 路徑動畫,在上集我們有先提到如何使用CSS製作 SVG 線條繪製基本效果,而 vivus 就是基於 strokeDashoffset 屬性来進行動畫的呈現。使用 vivus 前有幾個要點必須注意: 所有的元素都必須含有 stroke 屬性而且不能為填充圖形。 避免創造隱藏的 SVG 元素。 不允许使用 text 元素,因為它們不能被轉換為 path 元素。   使用方法 1. 安裝 (官網:https://github.com/maxwellito/vivus) NPM: npm install vivus Bower:

Magento 訂單項目狀態解說

今天小編要來為各位講解一個我們在Magento中不常用但是卻很重要的功能與觀念_Order Item Status(產品項目狀態),什麼是產品項目狀態?產品項目狀態是在每筆訂單中,針對訂單中每個項目處理狀態的描述,我們比較常用到的主要有三個- Ordered/ Invoiced/ Shipped,而其實Magento 針對產品項目狀態提供了多達8種的選擇,因此本篇文章將針對個狀態的特性提供解說。   另外,假如對我們於Magento常用到的是Order status的概念還不是很清楚的讀者,可以參閱 Magento2 訂單管理   , 小編於此不再贅述。   

Magento 2 商品排序方式設定教學

商品排序順序對於購物網站固然重要,管理者希望讓客戶在商品列表,優先觀看到哪些項目,將對於銷售商品有極大影響,所以此篇文章我們要來分享如何在Magento 2 設定商品排序。     1.首先進入Magento  2  管理後台,點選Product→ Categories 2.點選Display Settings下拉選單,展開後即可看到相關商品排序設定欄位。         Available Product Listing Sort By : 這邊代表提供給客戶Sort

Magento應用 – 使用社群登入前的必做小步驟!

社群媒體已成為民眾日常作息中的一部分,許多人喜歡在像是臉書、Twitter等社群平台上分享自己的生活點滴,尤其在台灣,不論男女老少幾乎人人都擁有臉書帳號,越來越多的應用程式或是網站也都開放用戶可以使用臉書或其它社群帳號登入,這次我們就要以臉書為範例,來介紹在撰寫社群登入功能前,必須先執行的小步驟。   首先登入你的Facebook帳號,接著在瀏覽器輸入網址 https://developers.facebook.com ,將會看到以下畫面:  

如何在Adwords中停用自動應用廣告的建議

在Adwords中停用自動接受的建議 前往設定 點選”帳戶設定”標籤 選擇”不要自動採用廣告建議”     管理員帳戶或代理員帳戶可以使用以下表單選擇通通退出: https://services.google.com/fb/forms/adsuggestionsmccoptoutform/   去年年底,Google開始默默的將AdWords帳戶改為預設值“在14天後自動採用廣告建議”的設定。 他們形容這是“對大多數廣告客戶的理想設定”,並積極地勸阻退出。

解決 Magento 2 後台無法顯示 Datetime 欄位

Magento 2 中,後台可以透過 ui conponent 產生 layout 跟 grid,欄位也有多種選擇,像是 Text、Textarea、Select 等等,但是 Datetime 欄位顯示的時候僅有日期選擇器的部分,沒有時間,導致實務應用上的不便。這也是 Magento 的 Issue 之一,今天我們就來看看怎麼解決吧!   1. 新增 Attribute 通常會寫在 InstallData.php 內,今天我們就不特別說明新增的部分 但是在新增的時候,需要 給予 input_renderer 選項,裡面填寫自定義的 Class。  

電商網站優化-電子商務平台該避免的錯誤!

電子商務行銷有四個基本目標,引導>轉換>追售>回購。首先,您需要將新的訪客引導到網站,接者將這些新訪客轉換成客戶;進而計畫如何增加每位客戶的平均購買金額;最後,激發客戶以創造未來回購的機會。   電子商務平台應避免的錯誤 除了規劃為您的商店帶來新訪客之外,任何行銷目標都會直接受到網站轉換策略的影響。轉換率優化(簡稱CRO)是電子商務行銷成功的關鍵要素之一。然而,許多企業仍然犯下可能影響購物網站轉換率的嚴重錯誤。

Magento  SUPEE-10570安全性修補通知

SUPEE-10570, Magento企業版1.14.3.8和社群版1.9.3.8包含多個安全增強功能,可以幫助關閉遠端執行代碼查詢(RCE),跨網站指令碼(XSS)等功能,以及解決其他問題。此版本同時包含多項小功能的修復程序,詳情請參閱以下資訊。   有關1.14.3.8和1.9.3.8版本中所有更改的信息,請參閱Magento企業版和Magento社群版發行說明。   修補程序和升級可用於以下Magento版本:   Magento企業版 1.9.0.0-1.14.3.7: SUPEE-10570或升級為Magento 企業版1.14.3.8。

MAGENTO 2.2.3, 2.1.12和2.0.18 安全性更新

Magento企業版和社群版2.2.3, 2.1.12, 2.0.18包含多個安全增強功能,可以幫助關閉跨網站指令碼(XSS)、經驗證管理用戶身分的遠程代碼執行(RCE)以及其他漏洞。   這些版本也包含了其他的修補程序,想要了解更多功能修復的相關訊息,可參閱Magento 2.0.18, 2.1.12, 2.2.3版本的發行說明。   之前尚未下載過Magento 2版本的使用者請直接進入Magento企業版或社群版2.2.3進行操作。 有關如何保護您網站的其他相關信息,請參閱最佳安全做法

選擇探索新圖片,是該避免使用攝影圖庫了!

提供圖庫的攝影網站正在不斷增加。但是當您瀏覽這些網站的同時,您會發現要從幾個關鍵字中找到合適的照片是多麼的困難,而且大多都可以在眾多不同的網站上找到相同的圖片。即使找到合適的照片,它們往往也被大量重複使用過,使用這些看似熟悉的照片很難讓您的網站突顯企業特色。   舉例來說,假設我們正在尋找一個漂亮的模特兒在網站上展示我們的新的化妝品,以下是在Adobe 圖庫使用關鍵字“beautiful”搜尋所得到的圖像結果。我們可以看到由Icongenic提供的這張 “Happy Beautiful Woman”看起來是一個不錯的選擇。   截圖來自Adobe 圖庫網站