Magento 2交易信件的Footer要怎麼更改呢? 讓我們歐斯瑞告訴你如何在Magento 2 的後台，簡單的更改交易信件的footer！   Step 1: 在 Magento 2 後台進入 Marketing > Email Template 中點選右上角 “新增一個模板”   Step 2: 選擇你 Footer 模板，接著按下 Load Template，並設定你新建這個模板的名稱，接著在 Template Content 中，編寫成你需要的模板樣式。 完成後按下右上角的儲存按鈕。     接著，回到後台路徑 Content > Configuration 中   Step 3: 選擇你所要的範圍做編輯   Step 4: 點選 Transaction Email   Step 5: 並在其中找到 Footer Template，選擇套用你剛剛新增的模板名稱。 最後按下右上角的儲存就完成了。   簡單的5個步驟讓你能輕鬆操作 Magento！ 若想掌握更多 Magento 的相關教學資訊，追蹤我們的Facebook粉絲專頁或官網都可以有進一步的了解喔！ ...

2017年12月14日，W3C（World Wide Web Consortium）發布 HTML 5.2 正式標準版，取代 HTML 5.1 成為官方推薦版本。HTML5.2 是對 HTML5 規範的第二次重大修訂，它遵循了 2014年 W3C 所承诺的大致每年公布一次版本修訂。本次更動中包括大量的清理和錯誤修復、主要的安全更新、其他委員會的進展整合以及其他用以保持規範以符合最新網路廣泛使用方式之更新。   下面將部分主要的更新做簡要的介绍，全部的更新可以直接閱讀 W3C 上的英文版https://www.w3.org/TR/html52/changes.html。   新增原生的 <dialog> 標籤 在 HTML5.2 之前，對話框在網頁上已經非常流行，但因為未统一標準化，每個瀏覽器的實現或多或少都存在著差異性。另一方面，執行一個支持無障礙化的對話框是有難度的，實際上，現在網路上使用的大多數對話框對於視覺障礙人士來說大多難以使用。而 HTML5.2 引入 <dialog> 標籤的目標就是要改變此一現狀！   如何使用 <dialog> 標籤 基本的彈窗對話框標記 <dialog open>  Hello This is a new  Dialog Tag! </dialog> Open 屬性：使對話框默認打開，若未使用，除非利用 JavaSript ，整個對話框將隱藏。 在添加樣式之前，對話框渲染如下圖所示： 由圖中可知它在頁面中採絕對定位，因此對話框會出現在其他內容前面，並且水平居中。默認情況下，和內容等寬。   使用 JavaScript 基本操作 JavaScript 有幾個方法和屬性可以方便地處理 <dialog> 標籤。最需要的兩個方法是 showModal() 和 close() 。   const modal = document.querySelector('dialog'); // 使對話框出現（添加 `open` 屬性） modal.showModal(); // 隱藏對話框（移除 `open` 屬性） modal.close();   showModal()：使用此方法時和 open 屬性不能同時並存，以showModal() 打開對話框時，會出現與 open 不同的效果。     最大的不同在於頁面會添加一層背景（ background: rgba(0, 0, 0, 0.1) ），阻止用户與對話框之外的內容交互。位置的呈現也是採絕對定位，除了水平置中，垂直也相對置中。按 Esc 鍵則會關閉對話框！   close()：也可以提供一個關閉按鈕來觸發 close()！ show()：也會讓對話框出現，但不會伴隨背景層。用户仍可以和對話框之外的可見的元素進行交互。   支持 目前，只有 Chrome 支持 <dialog> ， Firefox 需要在 about:config 裡允許 dom.dialog_element.enabled 才能正常使用。 那在下一篇我們將會介紹其他重要的 HTML5.2 更新！ ...

爲何要最佳化圖片？ 一言以蔽之，速度決定一切。這裡指的速度，是網頁讀取的速度。你只有幾秒鐘的機會抓住和留住使用者，所以會影響網站載入的時間的任何元素都是不可放過的。無論你只是在網路上經營一個部落格，或在網路上販售商品、提供服務。如果你的網站很慢，你將失去大量的訪客、流量、以及收入。一般來說，如果你的網站載入需要超過一秒，就可能已經需要進行優化了。 「圖片」算是影響網頁載入速度的首要因素，因為圖檔是所有網頁需要傳輸的檔案中體積最大的，從 “圖片瘦身” 下手，絕對能帶來 “有感” 的速度提升。根據 HTTP Archive, 2017年12月的資料， 光是圖片就佔了整個網頁組成比54%。因此，只要將圖片最佳化，就能節省大量下載，並提升網站的效能：瀏覽器要下載的位元組愈少，瀏覽器下載速度就可提升，並在螢幕上顯示使用者想知道的內容。 圖片最佳化與網站自身絕對有關，首先您的目標羣體也會是非常重要的一環。如果本身是以提供內容爲主，那麼怎麼圖片的解析度就相對不是那麼重要。   如何最佳化? 1. 清除及取代圖片 消除不必要的圖片資源 使用網路字型(font icon)，避免在圖片中將文字編碼 請先問自己一個問題：這張圖片真的能達成預期的效果嗎？ 良好的設計通常都很簡單，而且能產生最佳的效能。 接下來，您應該考量是否有替代技術可以更經濟有效率的方式，達成您預期的結果： CSS 效果 (漸層、陰影等) 和 CSS 動畫可用來產生不受解析度限制的資產。無論解析度高低或縮放大小為何，這類資產都能常保清晰，而且所需的位元組遠比圖片檔案少。 網路字型不僅可呈現美觀的字型，也保留了選取、搜尋及調整文字大小的功能，大幅提升使用上的便利性。 如果您採用了將文字編碼嵌入圖片的方式，請立即停下來重新考慮。就良好的設計、品牌宣傳和可讀性來說，優美的字型自然是關鍵的要素。但是嵌入圖片的文字卻會導致負面的使用者體驗，因為這類文字無法搜尋、縮放、無法剖析，而且在高 DPI 裝置上顯示的效果也不好。雖然使用網路字型時必須遵循專屬的最佳化流程，但是網路字型解決了所有的疑問，絕對是顯示文字的最佳選擇。   2. 選擇正確的圖片格式 請先選取通用的格式：GIF、PNG、JPEG 除了不同的失真壓縮演算法和無失真壓縮演算法之外，不同的圖片格式支援不同的功能，例如動畫和透明度 。 因此，為特定圖片選擇「正確的格式」時，必須同時考量預期視覺效果和功能兩方面的要求。 格式 透明度 動畫 瀏覽器 GIF 支援 支援 所有 PNG 支援 不支援 所有 JPEG 不支援 不支援 所有 最普遍廣受支援的三種格式分別是：GIF、PNG 和 JPEG。除了這些格式之外，某些瀏覽器還支援 WebP 和 JPEG XR 等較新的格式，可以提供更好的整體壓縮效果以及更多的功能。那麼，您應該使用哪種格式呢？ 1. 是否需要動畫？ 如果需要，GIF 是唯一的通用選擇。GIF 限制最多為 256 色，這對於大多數圖片都不是好選擇。 2. 是否需要使用最高的解析度保留精細的細節？ 請使用 PNG。 3. 如果圖片資產包含由幾何圖形組成的圖片，請考慮將其轉換成向量 (SVG) 格式！ 4. 是否需要最佳化照片體驗？ 請使用 JPEG。 我們可以透過利用失真最佳化(Lossy)和無失真最佳化(Lossless)，縮減圖片資產的檔案大小。請嘗試幾種 JPEG 品質水準，為圖片資產找到品質和檔案大小的最佳平衡點。     ...

近期臉書洩漏個資事件鬧得滿城風雨，WhatsApp共同創辦人艾克頓（Brian Acton）發起Delete Facebook的活動獲得熱烈迴響，就連Space X與特斯拉的創辦人——伊隆・馬斯克也毫不戀棧，將旗下公司的臉書粉絲團全數刪除。   那麼臉書究竟收集了哪些用戶資訊呢？   紀錄幾乎所有的訊息 Facebook紀錄所有你發出的訊息、你在行動裝置上的聯絡人、傳送過的多媒體（例如照片或影片），幾乎無所不記。 想要打包檢視你的紀錄嗎？請看這裡：https://www.facebook.com/help/131112897028467   紀錄所有登入活動並推測個人喜好 在你登入Facebook時，他會紀錄你登入的時間、位置、使用裝置，此外還會紀錄所有你按讚的貼文以及跟Facebook有所關聯的應用程式，這些資料可以讓Facebook分析你的所在位置、性格、喜好等個人資訊，以便於推薦適合的個人化訊息給用戶。   但你知道嗎，許多線上平台為了提供精準的個人化服務，多多少少都會收集使用者的資料。今天我們以用戶最多的Google為例子，揭露6大項Google所收集的個人數據，準備好大吃一驚了嗎？    1. Google能夠知道你去過的每個地方。 若你的行動裝置有開啟允許追蹤，在你每一次開啟行動裝置時，Google都會加以記錄，並且儲存在你的時間軸裡。 快來看看自己是不是被追蹤了：https://www.google.com/maps/timeline?pb    2. Google會紀錄你搜尋歷史——即便你已將它刪除 在所有你所使用的裝置上，不論你搜尋過什麼、造訪過什麼網站、甚至是Youtube的瀏覽歷史，都會被一一記錄下來。 快來看看你被紀錄哪些項目：https://myactivity.google.com/myactivity     3. Google為每個用戶紀錄廣告偏好 你是否常常覺得Google怎麼這麼神奇，顯示的廣告都剛好是想要購買的產品或服務呢？這是因為Google會記下每個用戶的活動足跡，再根據這些線索推算出用戶可能會喜歡的廣告訊息。 快來看看Google為你打造的廣告偏好：https://adssettings.google.com/authenticated     4. Google知道你使用的每一個App 由於Google使用者眾多，大部分的線上第三方應用程式都允許使用Google帳號註冊登入，每一次Google都會將其記錄下來，並且標明這個應用程式會取得什麼樣的資訊。 來看看你使用過哪些應用程式：https://myaccount.google.com/permissions     5. Google會記錄你在Youtube的每一個行為 Google會記錄所有用戶在Youtube上的行為，包含搜尋字串、看過的影片、留言或是社群分享，這些都能讓Google分析你的喜好、性格、甚至是政治立場。 來看看你的Youtube足跡：https://www.youtube.com/feed/history     6. Google儲存幾乎所有關於用戶的資料 Google提供他的用戶將所有收集過的數據打包下載，它包含了書籤、E-mail、聯絡人、Google Drive檔案、Youtube影片、日曆活動、相片、向Google購買商品或服務的紀錄等等….，是不是相當驚人呢？ 快來看看你的數據：https://takeout.google.com/settings/takeout   在這個數據為王的時代，用戶真的很難避免被搜集個人資料，而平台商為了提供更好的服務或追求更大的利益，往往也容易忽略掉個人的隱私權的重要性，這些平台服務已經是我們生活的一部分了，要完全從中抽離相當困難，因此我們需要特別留意被搜集的資料是否有安全疑慮，並關閉不必要的追蹤或紀錄，保護好帳戶資訊，重視自身隱私的權益。 ...

Chrome 開發團隊不斷開發與改進瀏覽和最佳化體驗功能。在 Google I/O ’17 開發者大會上向外界展示了很多重要的演化，其中一部分是有關 Chrome DevTool，因此作為前端開發者自然也受其影響。Chrome 60 在 DevTool 中加入了很多新的項目，而最令人驚喜的是全新的 Audits 面板。 新的 Audits 面板基於 Lighthouse ，它提供了一整套全面的測試環境来评估網頁的品質。稽核類別分別是 網站的效能、無障礙程度、漸進式網路應用程式相容性等等，並提供改善網站品質的明確方法。“ 這款工具正如其名 ( Lighthouse 代表「燈塔」)，可以「協助您避免觸礁」。” – 截至google 中文網站管理員 – 中文網誌 在本文中，我們將研究一下 Lighthouse ，簡單說明它的架構！   另外提供 Google I/O ’17 開發者大會有關 Lighthouse 的一段演講： Staying off the Rocks: Using Lighthouse to Build Seaworthy Progressive Web Apps (Google I/O ’17)   使用入門 執行 Lighthouse 有三種方式： 1. 使用開發者工具（Devtools）的Audits (Chrome版本需 60 或更高) – 圖片截至google 中文網站管理員 – 中文網誌   2. 或安裝 Lighthouse Chrome 擴充功能 後，進入希望稽核的網站後， 點選 Lighthouse 擴充功能圖示，按下 Generate report 便可以開始檢查，簡單又直覺   3. 或直接進入 https://developers.google.com/web/tools/lighthouse/run 輸入想要稽核的網站 URL   執行後會跑出報表顯示各個項目的結果與分析，一共有五大類別   Performance ： 網站的效能 網頁在瀏覽器上下載和顯示的速度。性能優化是提高網頁效能的技術領域。   Progressive Web App：Web App 分析項目 （PWA） 為了幫助團隊創造最好的體驗，Lighthouse 整理了一份詳細的清單，列舉出想要 創建一個 Baseline PWA 需要滿足的條件。   Accessiblity：網頁無障礙（非典型使用者體驗） 某些使用者以不同於預期的方式拜訪網頁或進行交互，而網頁無障礙類別則測試於屏幕閱讀器能力和其他輔助技術是否能在頁面中正常運作。   Best Practices：網站最佳實踐 最佳實踐類別提供一些建議，使頁面現代化，並避免性能陷阱。 例如 應用程序缓存，HTTPS 使用，不推薦使用的API， 用户權限請求 等等。這部 分包含 “ 失敗和通過的測試列表 ”。   SEO：網頁搜尋引擎最佳化 使搜尋引擎能夠更容易找到網站，適當調整網站內容讓引擎更容易建檔。   報告頂部的分數是每個類別的總分。其餘部分是決定得分的每一測試項目的具體描述。每個類别分析结果都會以適當的结構展示在指定的面板中。而這些評分標準和優化項目可以視為Google的網頁最佳實踐建議！   參考網站： https://webmaster-tcn.googleblog.com/2018/02/lighthouse-chrome-seo.html https://developers.google.com/web/tools/lighthouse/ ...

在上一篇電商創業第一步-商業模式(上)文章中，我們介紹了電子商務的基本商業模式，在這篇文章中，我們將會提出在創業初期會遇到的每一個與商業模式習習相關的問題，讓你可以面對這些答案時，更了解那些決定更適合自己的創業，進而來架構出正確的商業模式。   我的顧客是? 你的創業的目標顧客是?是企業還是一般消費者?這將會影響商業模式最關鍵的答案，介紹基本的商業模式之後，我們知道基本的電商平台有B2B(企業對企業)、B2C(企業對消費者)及C2C(消費者對消費者)，而決定你的顧客是企業(Business)或是一般消費者(Customer)都是建立商業模式的基石。   我的商品是? 接下來你必須要回到創業的核心-你的商品，電子商務所銷售的產品大致上能分為三種類型，分別是實體商品、數位化商品及服務。 實體商品: 實體商品是大家最常見的電商產品類型，例如電子3C產品、化妝品、服飾商品等等，然而，要販售實體商品其實是具有挑戰的，包括倉儲、商品運送及保險等。 數位化商品: 此類商品也可以在電子商務平台上普遍見到，例如音樂、電子書、影像、影片及軟體等，值得注意的是販售這類商品的缺點是隱私權，然而，數位化商品在電商產品類別中被視為利潤最高，且不需要考慮倉儲及運送。 服務: 販售服務也是電商平台可見的一種產品類別，例如翻譯服務、行銷服務等等，透過網際網路販售服務是一個好方法可以提高可見度。   了解自己的目標顧客以及商品類別之後，你才可以去架構出你的商業模式，並利用電商平台開始創業的第一步。   我的商品來源是? 定義出顧客及 產品之後，商品來源也是在電商創業時期非常重要的選擇，而產品的來源大致上可分為製作生產、批發及上游直送。 製作生產 (Making and Manufacture): 製作生產自己的商品是非常常見的方式，不管是自行生產，或是找到工廠為你製造生產，都是一種商品來源的方式。 批發 (Wholesale): 向上游廠商批發商品，可能是最簡單的一個商品來源模式，向廠商或是中盤購買你的存貨，相較於製作生產，批發是一個風險較低的方式，因為向批發商購買商品，代表產品在市場上相對成熟，你不需要花費多餘的時間調查市場需求，另外，相較於請工廠製造，批發所需要承擔的成本較低。 廠家直送 (Dropshipping):  廠家直送的概念是販售你所不擁有的商品，廠家直送不只是一個商品來源模式，更是一種物流模式，顧客透過電商平台下單後，你再將需求轉給廠家，而最終是由廠家直接寄送給顧客，所以具體而言，整個過程你不實際上地擁有商品，而這種方式最大的優點是不需要花費太多的成本，就可以提供顧客更多的選擇。   我的競爭優勢是? 最後，當商業模式逐漸被架構起來之後，你需要思考的是你要如何在市場中展現你的優勢? 展現優勢的方式不外乎有價格、品質、商品多樣性、附加價值及服務等。   價格: 對小商家而言，利用價格作為競爭優勢並不是一個好方法，因為大型企業較容易談到更低的進價，而有更好的利潤空間，然而，利用壓低價格作為競爭策略也很容易將市場帶向削價競爭，進而降低所有商家的利潤。 品質:  利用優化品質做為策略對整個市場而言是件好事，不僅代表了市場將會更注重產品的品質，更會喚醒消費者對產品優劣的意識。 商品多樣性: 增加商品多樣性也是一個常見的競爭優勢，利用商品的多樣性來吸引更多消費者，以此立足於市場，然而，其背後所要承擔的倉儲及進貨成本也是需要多加考量的。 附加價值/服務: 附加價值/服務是一個強化消費者購買慾望非常好的方式，例如:購買商品附上的教學影片或售後保固期等等，不僅僅讓消費者的購買經驗更美好，以達到口碑行銷，是一個強化消費者購物慾非常好的方式。   經過仔細思量後的這四個問題的答案，將會是你電商創業建立商業模式非常重要的關鍵，當然，這些問題的答案都並非唯一，在創業初期你可以伺機調整，以靈活的思考建立穩固的商業模式以發展未來。   或欲更深入了解電子商務，可以點選下列文章更進一步認識做出對自己更加的決策： 社群策略是電子商務成功的關鍵 電商策略-增加電子商務銷售的最快方法 ...