網頁設計的專業首選

 GDPR( General Data Protection Regulation，歐盟通用資料保護規則），即將在2018年5月25日生效，面對全球化行銷的市場趨勢，網頁站台技術，帶領人們打破了時間、空間、距離的限制，在這樣無遠弗屆的全球化資訊技術當中，網頁站台們勢必是無法避免需要正視 GDPR 的，除了歐盟28個成員國對全球資訊網舉足輕重的規章，個資隱私保護同時也是全球網際網路發展長年以來備受重視的議題，因此瞭解其中定義與規則也成了網站營運、設計、管理的重要方針。    GDPR 詳細定義了資料保護規則的細節，由主要的目標「個資隱私保護」作為延伸立法，在此我們也將對網站營運較為直接關係的其中幾項進行舉例，如：   1.企業必須保障獲取的資料安全且須負起法律責任。   2.徵求使用者的同意才能對其個資行進行蒐集或應用。   3.個資外洩必須在 72 小時內通報相關保護主管機關。   4.增加被遺忘、刪除、調閱權權利，將不相關或過期的資訊移除相關連結應用。   5.個資保護系統預設隱私保護，如網站 https 加密連線。   6.提高相關保護罰則金額，警惕企業遵守法規。   從以上與站台較為直接的規定來看，或許現行許多網站未能達到相關標章，但永續經營、持續進步便是網站營運的準則，對於相關改善方法與實際應用，本站也將會持續分享提供給大家參考，若有針對相關議題需要說明與協助的地方，也歡迎透過語音通話或聯絡我們與本站聯繫協助。        

知識圖譜(Google Knowledge Graph)，是 Google 在搜尋體驗上獨創的資料串聯應用，大多數的搜尋引擎，在結果的呈現上都是只有透過爬蟲程式在公開網路的串聯資訊中組成表單條列，而 Google 圖譜則會在表單條列旁的頂端會額外幫助你針對搜尋目標列舉出相關的資訊題材，可能是國家資訊、景點位置、名人介紹、品牌商家等大方向相關資訊整合，呈現結果如：圖片、地點、簡介、著作、產品、使用者評論等相關細部資訊。     Google 知識圖譜資訊的來源除了本身的爬蟲串聯自動產生之外，也提供了商家、品牌等相關目標人員的管理功能和使用者實際體驗的評論功能，這樣經過 Goolge 官方串聯後與管理者、體驗雙方實際的資訊登錄所整合出來的資訊便能更正確、客觀的呈現在更多的使用搜尋結果上，重新定義了搜尋官方、管理官方、所有體驗者的搜尋共享關係。     在功能命名上就是針對「知識」的串聯與「圖譜」式的呈現來增強貼近人們語義搜尋體驗內容，目的在於提供使用者更詳盡、實用的搜尋資訊，透過這樣的功能，也能提升品牌、商家對使用者的知名與信賴度，所以經營站台的同時，一起建立好網頁結構化資料相關資訊提供 Google 確認與應用，也是一種擁有實值效益和必要的經營手法。  

 之前的文章Flexslider－－方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件，主要是以一張張圖片作輪播，而這次我們介紹另一套可以多組圖片輪播切換的套件，可應用於更多張圖片的展示。 此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案 可於slick官網下載，官網上更是陳列了許多項不同的輪播樣式，附上原始碼可以複製貼上。 詳細使用步驟如下： 首先到官網，點擊上方的「get it now」   頁面會滑到該對應位置，點擊「Download Now」即可下載壓縮檔，或是選擇直接複製外連網站的連結。   官網上展示了許多樣式，提供下方的原始碼複製貼上。   解壓後的檔案，只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了唷！放進自己的專案裡，依據自身需求修改檔案路徑和設定即可套用了。    

 科技始終來自於人性，這是大家朗朗上口，常被引用的一句名言。在科技發達，網路無遠弗屆的現今，越來越多的商家與企業加入了廣大數以萬計的網站市場上提供服務，而搜尋引擎也進步發展得越來越人性化，搜尋引擎龍頭 Google 從原本的站台資料查詢衍伸出了地圖商家服務，以往大家都認為網站是無遠弗屆，甚至跨國、跨區的無限服務，但隨著大量相同商家、產業廣泛的湧入，人們在網路世界的選擇逐漸變多，在地化的經營也變得逐漸重要!因此 Google 也人性化的結合地圖資訊開始透過行動定位或IP的判斷將搜尋結果在地化優先呈現。     從網站優化 SEO 的角度出發，商家與企業建置網站便是希望提高廣告曝光與通路的拓展，消費者自然也會選擇快速、方便、實惠的項目，網站在地化經營的重點也包含了許多潛在意義，面對眾多同業的競爭，地緣就近、資訊清楚、品牌顯著、商譽有佳、內容精確的網站便越能受到搜尋引擎和消費者的青睞。     因此 Google 在搜尋結果上也提供了知識圖譜、商家使用者評比的相關功能，好讓搜尋結果能因為使用者的地緣與累積使用評比呈現最佳的排名，所以網際網路雖然廣大，但扎實的在地化經營也能有效、明確的幫助站台發展，更能從在地使用者服務商譽上累積拓展至世界各地。  

 z-index可以設定元素的堆疊順序， 設定值越高越前面，可以為負數，例如：z-index: -1。 另外要注意的是z-index只能在有設定位（position）的元素上才會奏效。 可設定為position: static、absolute、relative、fixed。 如下圖範例1中所示，如果將色塊設成z-index: 1的話，就會將文字擋住了。 See the Pen NMQENQ by Ya (@bok770) on CodePen.   然而如果改成z-index:-1的話，因為色塊的順序為負的，所以會被放置在文字的後面。 See the Pen yjmRGB by Ya (@bok770) on CodePen.   範例2： See the Pen wjVEQq by Ya (@bok770) on CodePen. 如範例2所示，設定值越大的元素( z-index:3)，堆疊順序會越前面， 要注意設定值以免遮蓋到後方的元素。  

   Google-SERP-SEO常見優化項目，在先前分享初識搜尋引擎最佳化（SEO）時，提到過使用者在大多數搜尋引擎使用關鍵字查詢時都會呈現「關鍵字廣告」與「自然搜尋排序」兩種結果，但其實除了這兩項結果外，各家搜尋引擎在搜尋後的呈現頁面上還會根據使用者不同需求提供如：人物、商家、地點、產品等相關資訊，視使用者需求習慣的挑選介紹，然而並非所以有搜尋引擎所提供的資訊格式都相同，所以在這樣的呈現頁面上我們統稱為「 SERP 搜尋結果頁面」(Search Engine Results Page)，本次也將針對趨勢熱門的 Google SERP 進行常見SEO設定項目進行更進階的說明。      從畫面中我們能瞭解除了廣告與自然排序結果之外，常見對於 SEO 有幫助的部分為：網站的內部連結架構、Google知識圖譜。在以往形式中的自然排序結果都只會顯示網站的介紹敘述，值得注意的是在 Google 的呈現架構中，我們可以透過對網站程式的內部架構設定，將站內主要連結分類呈現在自然排序中，讓使用者能夠不必透過進入網站首頁便能更快速的精確到達站內想涉略資訊頁面，對於有更精確性的導向在選擇點擊上能有實質提升的效益。    Google知識圖譜，在架設網站的同時，我們能將站台相關資訊一併建入，在知識圖譜上的資訊能夠提供使用者有效的參考與瞭解該站台的各種詳盡訊息，常見的如：營業時間、地點、電話、評價等實用資訊。在建立這種簡單卻有實質參考價值性的訊息不僅可以提供使用者方便瞭解，更能增加站台與使用者在搜尋之間的資訊互動!  

Select option是下拉式選單，通常用在表單（form）裡，在網頁中很常看到，像是旅行社的網站會提供旅遊國家讓網友做選擇，或是購物網站提供各項商品項目等等。  基本語法為 < select name="選單名稱" > < option value="選項值" >< /option > < /select > 範例： See the Pen ZompYe by Ya (@bok770) on CodePen. 範例中的travel-form為此選單的名字，可以自己設定， 包在裡面的option是此選單的選項，每個項目都會有一個值（value）， 用來判斷所選擇的項目，不會顯示在頁面上， 而 < option >< /option > 之間的文字就是會看到的內容， 這樣一來簡單的下拉式選單就完成了。 可以配合一些JS特效或是使用CSS美觀選單樣式。

   .app頂級網域名稱(TLD，Top-Level Domain)，開放註冊申請囉!由 Google 在2015年2月以 TLD 史上最高金額2.5億萬美元所競標下的 .app 頂級網域名稱的經營權，在本月(2018/5/8)開始透過各家註冊機構對外開放申請註冊網址應用了!      Google 旗下網域名稱註冊管理機構 Google Registry 透過 Google 官方資訊對外宣布了.app頂級網域名稱開放應用的資訊，如同域名由英文單字「application」的簡寫.app 命名，主要是提供「行動應用程式、雲端程式、網路程式、瀏覽器程式」等開發人員所能加以學習、交流、運用的安全網域名稱。      其中也特別強調了.app 是 TLD 當中首例預設直接使用 HTTPS 加密的傳輸模式，讓開發人員能夠更安全的將應用程式推廣至全球普及，透過HTTPS的加密特性，可以避免連線傳輸途中受到惡意廣告程式和 ISP 的入侵或跟蹤，同時也保障在開放的 Wi-Fi 環境中確保傳輸安全。      在.app的開放中，我們明顯瞭解到了 Google 對行動應用趨勢及HTTPS加密傳輸有著十分的重視，因此它也將是Google 宣告帶領網路走向未來 HTTPS 全面化的領導趨勢，從2018/5/8開始只需要先透過get.app確認.app的域名使用狀況後，就能開始選擇合作的註冊商進行.app網址申請囉!

在網頁設計上，有時我們只要擷取圖片的一部分時，若是還要另外切圖片的話又會顯得累贅，這時我們可以用CSS的屬性來自由裁切圖片囉！ css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來，並利用margin來控制要顯示的部分。 範例： 原本的完整圖片 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   使用css裁切過後 See the Pen KRovqO by Ya (@bok770) on CodePen.   css的clip屬性 clip的屬性值僅有rect( 矩形 )，其值為 rect (top, right, bottom, left)，預設值為auto，而必須注意的是此屬性要有position:absolute才會生效，圖片顯示範圍的計算為top減掉bottom為顯示範圍的高，right減掉left為顯示範圍的寬。 範例： See the Pen LmdjJO by Ya (@bok770) on CodePen.

   本站先前由測量速工具 Page Speed Tools 禁止轉譯 JavaScript 和 CSS-改善網站速度提升介紹過的在行動裝置普及前，以往精美多樣化的網站所使用的JavaScript 和 CSS 特效程式較為複雜與龐大，因行動裝置的普及與限制載入，漸漸成了網站的弊端。     因而衍伸出了改善JavaScript 和 CSS 載入限制的"部分快速轉譯技術"，能夠在保留站台原始效果的情況下，調整網站在讀取瀏覽時的優先存取項目與技術，本次將針對實際細部改善技術進行介紹。   從範例的網站中，我們能瞭解 Page Speed Tools 明確的告知了我們網頁含有那 4 項禁止轉譯 CSS 資源，對網頁的轉譯作業造成延遲。 原本是方便連結、呼叫使用的特效卻造成了網站的連結延遲，所以，以下我們也將針對這部分項目進行改善範例說明。   以往大部分的設計師在開發網站的時候，會習慣將CSS打包成單一檔案，再根據頁面的使用需求進行外連來達到畫面乾淨並方便呼叫管理的應用，透過 Page Speed Tools 的告知，我們從範例網站的首頁載入程式碼確認了造成延遲的 CSS 外部連結位置。   以第一項 CSS：css/reset.css 為例，我們可以將原本外連的 CSS 資源進行"複製"加入首頁程式碼變成預設的風格設定。   將原先的 css/reset.css 的連結設定進行移除(本站為示範所以此部分使用隱藏方式呈現)，把前一步驟所"複製"的 CSS 風格以 <style>  </style> 包裹進行貼上設定後儲存。   經過以上更換設定的方式，我們再使用 Page Speed Tools 的分析，便能發現在轉譯作業造成的延遲有所改善。透過這樣的"部分快速轉譯技術"我們便能在保留站台原始效果的情況下改善延遲效果。