文章專區

最新網頁設計文章

 在先前「淺談 GDPR 歐盟通用資料保護規則」時,我們瞭解到了由歐盟等地區從2018年5月25日,已經開始啟用實行相關的規範與法則,當中主要目標就是以「個資隱私保護」作為延伸保障,面對這樣全球化的趨勢,本次也將會針對大多數站台首要面臨的 Google Analytics 應用進行相關說明與範例調整。   如同本站原先所介紹 Google Analytics 是現行較為主流且完整的流量統計分析工具,相信大多數有持續經營的站台與站台管理人員對其皆不陌生,在 GDPR 還未宣告以前,Google Analytics 就一直扮演了網站經營分析的重要角色,提供了管理人員有效的站台經營報告,當中也包含了許多使用者的資訊、流量、行為、裝置、位置等數據分析統計,如今 GDPR 的推出,是否將會杜絕全球站台管理人員 Google Analytics 的應用呢? 答案是不會的! 因為 Google Analytics 根據 GDPR 列舉的相關條例提供了相關的改善的辦法,面對廣泛資料的統計進行了簡單卻實際的匿名化的辦法。   由 Google所發布的 IP Anonymization in Analytics 說明當中,能瞭解 IP 匿名化辦法主要是透過既有的資料追蹤編碼進行調整,經由遮蔽用戶IP末端定位碼來進行匿名化保護動作,在廣泛的追蹤項目中能持續統計也能兼備保障用戶的個人行為資訊,相關參考如下。   原先編碼:   <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script> <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());   gtag('config', 'GA_TRACKING_ID'); </script>     透過 IP Anonymization 的方式將原先指令進行調整:   <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script> <script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true }); </script>   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true });   window.dataLayer = window.dataLayer || [];   function gtag(){dataLayer.push(arguments);}   gtag('js', new Date());     gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true });
就像CSS的box-shadow可以幫區塊加上陰影一樣,CSS也有能用來幫文字上陰影的屬性-text-shadow。 可設定值如下: text-shadow:  h-shadow v-shadow blur spread color; h-shadow:水平位移距離 v-shadow:垂直位移距離 blur:模糊半徑 spread:擴散距離 color:顏色   範例: See the Pen gKoYLe by Ya (@bok770) on CodePen.    也可以運用此屬性達成以下效果:   光暈效果,只要將前兩個值(h-shadow、v-shadow)設為0即可。若要加強效果可多寫幾次。   See the Pen qKpWmR by Ya (@bok770) on CodePen.   文字輪廓 若有四個陰影,能夠為文字加一層輪廓。不過還可以用CSS另一個屬性text-stroke來呈現。   See the Pen NzXKyJ by Ya (@bok770) on CodePen.
 GDPR( General Data Protection Regulation,歐盟通用資料保護規則),即將在2018年5月25日生效,面對全球化行銷的市場趨勢,網頁站台技術,帶領人們打破了時間、空間、距離的限制,在這樣無遠弗屆的全球化資訊技術當中,網頁站台們勢必是無法避免需要正視 GDPR 的,除了歐盟28個成員國對全球資訊網舉足輕重的規章,個資隱私保護同時也是全球網際網路發展長年以來備受重視的議題,因此瞭解其中定義與規則也成了網站營運、設計、管理的重要方針。    GDPR 詳細定義了資料保護規則的細節,由主要的目標「個資隱私保護」作為延伸立法,在此我們也將對網站營運較為直接關係的其中幾項進行舉例,如:   1.企業必須保障獲取的資料安全且須負起法律責任。   2.徵求使用者的同意才能對其個資行進行蒐集或應用。   3.個資外洩必須在 72 小時內通報相關保護主管機關。   4.增加被遺忘、刪除、調閱權權利,將不相關或過期的資訊移除相關連結應用。   5.個資保護系統預設隱私保護,如網站 https 加密連線。   6.提高相關保護罰則金額,警惕企業遵守法規。   從以上與站台較為直接的規定來看,或許現行許多網站未能達到相關標章,但永續經營、持續進步便是網站營運的準則,對於相關改善方法與實際應用,本站也將會持續分享提供給大家參考,若有針對相關議題需要說明與協助的地方,也歡迎透過語音通話或聯絡我們與本站聯繫協助。        
 之前的文章Flexslider--方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件,主要是以一張張圖片作輪播,而這次我們介紹另一套可以多組圖片輪播切換的套件,可應用於更多張圖片的展示。 此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案 可於slick官網下載,官網上更是陳列了許多項不同的輪播樣式,附上原始碼可以複製貼上。 詳細使用步驟如下: 首先到官網,點擊上方的「get it now」   頁面會滑到該對應位置,點擊「Download Now」即可下載壓縮檔,或是選擇直接複製外連網站的連結。   官網上展示了許多樣式,提供下方的原始碼複製貼上。   解壓後的檔案,只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了唷!放進自己的專案裡,依據自身需求修改檔案路徑和設定即可套用了。    
知識圖譜(Google Knowledge Graph),是 Google 在搜尋體驗上獨創的資料串聯應用,大多數的搜尋引擎,在結果的呈現上都是只有透過爬蟲程式在公開網路的串聯資訊中組成表單條列,而 Google 圖譜則會在表單條列旁的頂端會額外幫助你針對搜尋目標列舉出相關的資訊題材,可能是國家資訊、景點位置、名人介紹、品牌商家等大方向相關資訊整合,呈現結果如:圖片、地點、簡介、著作、產品、使用者評論等相關細部資訊。     Google 知識圖譜資訊的來源除了本身的爬蟲串聯自動產生之外,也提供了商家、品牌等相關目標人員的管理功能和使用者實際體驗的評論功能,這樣經過 Goolge 官方串聯後與管理者、體驗雙方實際的資訊登錄所整合出來的資訊便能更正確、客觀的呈現在更多的使用搜尋結果上,重新定義了搜尋官方、管理官方、所有體驗者的搜尋共享關係。     在功能命名上就是針對「知識」的串聯與「圖譜」式的呈現來增強貼近人們語義搜尋體驗內容,目的在於提供使用者更詳盡、實用的搜尋資訊,透過這樣的功能,也能提升品牌、商家對使用者的知名與信賴度,所以經營站台的同時,一起建立好網頁結構化資料相關資訊提供 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 從原本的站台資料查詢衍伸出了地圖商家服務,以往大家都認為網站是無遠弗屆,甚至跨國、跨區的無限服務,但隨著大量相同商家、產業廣泛的湧入,人們在網路世界的選擇逐漸變多,在地化的經營也變得逐漸重要!因此 Google 也人性化的結合地圖資訊開始透過行動定位或IP的判斷將搜尋結果在地化優先呈現。     從網站優化 SEO 的角度出發,商家與企業建置網站便是希望提高廣告曝光與通路的拓展,消費者自然也會選擇快速、方便、實惠的項目,網站在地化經營的重點也包含了許多潛在意義,面對眾多同業的競爭,地緣就近、資訊清楚、品牌顯著、商譽有佳、內容精確的網站便越能受到搜尋引擎和消費者的青睞。     因此 Google 在搜尋結果上也提供了知識圖譜、商家使用者評比的相關功能,好讓搜尋結果能因為使用者的地緣與累積使用評比呈現最佳的排名,所以網際網路雖然廣大,但扎實的在地化經營也能有效、明確的幫助站台發展,更能從在地使用者服務商譽上累積拓展至世界各地。  
   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網址申請囉!