文章專區

最新網頁設計文章

 就在今年 2018 年的5月份,Google  在官方網站上正式發布了 HTTPS 的基本安全指標化,明確的說明了將在今年的九月份依照 HTTPS 安全協定實施為基本指標化認定。本站先前分享過 Google 優先收錄 HTTPS 的安全網站特性,其中也提到了 Chrome 瀏覽器針對網站連線的協定分成了:安全、不安全、危險,3種明確標示來提醒使用者應用。   在 Google 官方發布這項公告前,Chrome 瀏覽器都只是額外將有使用 HTTPS 加密連線的網站標示為安全網站,但這次的公告中卻明白的告知了大眾,以往額外標註的 HTTPS 安全標示將會剔除使用!取而代之的是直接認定 HTTPS 為網站連線安全的「基本傳輸協定」,如果不是使用 HTTPS 加密連線技術的網站,將直接標示為「不安全性」來提醒使用者應用,算是很明確認定了 HTTPS 在網站基礎應用的必要性。   從2017年開始 Google 便開始推廣了網連線由原本的 HTTP 升級為 HTTPS ,從這樣的推廣過程中,站台設計、維護技術的應用也持續的提升進步,由 Google 統計在Windows 瀏覽器中 HTTPS 推廣至現今的普及率達到了 80% 以上,從這樣的成效上來看,Google 本次的公告也將帶領網站安全傳輸技術進入新的指標,讓所有的使用者能夠得到跟多安全的使用保障,面對 HTTPS 全面化應用的來臨,您的網站是否準備好了呢? 如果有您 HTTPS 申請、設定、應用上的疑問,歡迎盡速與本站連絡,本站將會誠摯地為您打造全面性的安全服務。  
當滑鼠移到圖片上會有放大的效果,這在網頁設計上是很常見的,而這效果用CSS就可以做出來了??! transform可以設定圖片放大的倍率,   transition可以做出圖片緩慢放大的效果, 而滑鼠移入所產生的變化要用:hover來實現。  外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分, transform: scale(1.1)為圖片放大的倍率 transition:all 0.5s ease 0s為圖片放大所需的時間和特效 範例: See the Pen gKQjOy by Ya (@bok770) on CodePen.
在網站長期經營的情況中,管理人員們常會遇到網站內容的擴編、新增、重新排列或頁面移除等調整,本站先前針對了更換網址及網站改版等多種情況,簡單歸類出了「永久性轉址」和「暫時性轉址」,當中所包含的技術,如:301轉址(永久)、302轉址(暫時)、IIS轉址(進階)、DNS轉址(網域)。都能夠有效協助頁面達成「一對一」及網站「開發後應用」性質的轉址功能;而本次將為大家再介紹一項較為獨樹一格的轉址功能,就是允許相同頁面內容同時並存在的「多對一」集中性「Canonical 轉址」。    「Canonical 轉址」是在2009年12月Google與其他搜尋引擎共同發表"整合重複的網址"來解決過多重複性內容頁面的判別標籤,也屬於永久性轉址的歸類,其「多對一」及「開發前應用」的轉址特性卻有別於先前所有介紹的多項轉址技術,以往的轉址模式通常用於網站開發完成後,需要協助改版、更換網址、更換協定等應用,但「Canonical 轉址」特別的「開發前應用」則可以解決在網站設計時,透過程式動態產生的網頁,同一個頁面往往會產生許多不同的網址的重複頁面問題,這種因單項產品細部規格或規範差異所以產生的多項網址參數,能方便快速的達到使用者良好瀏覽體驗,但過程所產生的重複性頁面很可能被搜尋引擎判定為過度重複內容,導致頁面遭排除收錄,甚至降低相關頁面權重收錄應用,為此「Canonical 轉址」的導向就能派上用場,將多項相似或相同內容頁面同時指向至指標的頁面來告知搜尋引擎緩解排除動作,甚至達到多個頁面加權累積頁面分數的效果。   Canonical 轉址應用:   將所有相同或近似的頁面標頭內加入canonical標籤,指向到主要的 "指標頁面"達到集中權重轉址的效果。   <link rel="canonical" href="指標的頁面(必須是絕對路徑包含hhttp或https的連結)" />   範例Ex: 同樣面頁擁有靜態化網址 與動態化網址 當頁面有兩種或以上的網址呈現,我們就能根據 canonical 標籤的應用,將動態化的網址指向靜態化的頁面,告知搜尋引擎累積權重
 在先前「淺談 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 在搜尋結果上也提供了知識圖譜、商家使用者評比的相關功能,好讓搜尋結果能因為使用者的地緣與累積使用評比呈現最佳的排名,所以網際網路雖然廣大,但扎實的在地化經營也能有效、明確的幫助站台發展,更能從在地使用者服務商譽上累積拓展至世界各地。  
  • 看看吧,朝鲜怎么会相信美国?!除非是傻子。欧洲也不会相信美国,如果欧洲相信美国,欧洲就是傻子。 2018-12-11
  • 默克尔:欧洲要联合自强并与中国等国密切合作 2018-12-11
  • 第十届中国国际公益慈善论坛 2018-08-06
  • 新疆额敏县:“社区影院”助推文化惠民 2018-08-06
  • 914| 689| 408| 262| 705| 70| 983| 912| 130| 486|