文章專區

最新網頁設計文章

  前篇介紹"結構化標籤的常見種類"時,我們提到了 MicroData - 是應用在 HTML5 的常見技術,雖然 HTML5 新規格中提出了許多語意標籤,如:      aside:網頁的側欄、附加內容。      article:單篇文章內容。      section:自訂的區塊,如多篇摘要組成的空間。      mark:強調小區塊內容。    來提供搜尋引擎或是其他軟體工具,可以更清楚的了解網頁中每個區塊的設計目的。     但針對不斷創新的主流搜尋引擎來說,它們將需求更多詳細的資訊來貼近符合呈現使用者所搜尋的目標,因此語意標籤原有的資訊就顯得較為薄弱,也為此 Yahoo、Google、Bing 等公司,一同合作規範 MicroData 的標準格式 Schema.org ,主要希望能引進幫助機器更精細判讀的共同格式。   以下是 Microdata 主要使用屬性 :     itemscope : 將html內的attribute定義為item,指定這個項目是代表什麼的時候就是加入itemscope 這個屬性,此屬性是用來告知這個標籤的內容是跟某個項目有關的。     itemtype : 定義item的種類(在schema.org中有各種類的介紹),在設定完itemscope 項目後,必須再加上 itemtype 這個屬性,並且將值指定為 schema.org 網站上關於這個類型的 URL 。     itemprop : 描述item的屬性,完成前兩項定義與連結動作後,便可以開始針對要標記項目的相關屬性加上標記。使用方法為,在標籤上加上 itemprop 屬性,而其值則指定為「屬性的名稱」,例如 itemprop="name" 便是用來告知項目的「名稱」。                 本站在"網頁結構化資料-實際應用範例說明"中也提出了相關使用例子提供參考。   瞭解了 Microdata 主要使用屬性後,該如何使用對應類型的屬性,應該是較多人的疑問,在 schema.org 中文站當中,也詳細的說明了對應資訊,如:   常用的類型:      創造性工作:創意工作,書書,電影電影,音樂錄音,食譜食譜,電視劇TVSeries ...      嵌入式非文本對象:音頻AudioObject,圖像ImageObject,視頻VideoObject      事件 Event      醫藥和健康類型:MedicalEntity 詞彙。      組織機構      人物      地點Place,本地商戶LocalBusiness,餐館Restaurant ...      產品Product,售價Offer,均價AggregateOffer      評論評論,綜合評論AggregateRating  等資訊,也定義了一系列原始數據類型,比如數字,文本等等。    在建置網站時,先根據對應的類別進行結構化標籤設定,資料設定的愈加詳細, 搜尋引擎可以查證、解析、收錄出來的「基因關係圖」就會愈加完整, 自然也能有效提升SEO的效益。  
WINDOW RESIZER為chrome瀏覽器的擴充外掛套件,可以模擬各種螢幕的寬度及高度,而如今的手機螢幕長寬比琳瑯滿目,除了提供幾款常見的尺寸(1080X768、640X480等等)以外,若要特地針對某個機型做數值設定的話,WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。   首先到chrome套件安裝畫面,加到CHROME     之後便可在右邊看到外掛安裝的圖示,點開會看到預設的一些基本尺寸。     點選上面想要預覽的尺寸,視窗即可跟著縮放到指定的長寬。     若要自定義螢幕大小,首先點擊右邊齒輪圖示(setting)     接著便會跳到設定畫面,點選presets     會列出目前可以選擇的尺寸,按右上角的加號圖示即可新增   如此便可以使用新增的尺寸了唷! 
  由網頁結構化資料-實際應用範例說明中,我們能明白一個網站中可能同時存在著不同種類的結構化標籤,而不同種類的結構化標籤所代表的功能性也不進盡相同,本次也將針對於常見的結構化標籤種類及應用進行簡單的說明。   結構化標籤種類主要可分為"行內撰寫"與"外嵌引入"兩種形式,   常見行內撰寫的標籤種類為:   MicroFormat - 主要應用在(X)HTML中的 class(CSS) 名稱設定,逐漸少人使用。   MicroData - 可以應用在 HTML5 的常見技術,主要提供搜尋引擎查證、解析、收錄,因為受到各家搜尋引擎公司認同,因此Yahoo、Google、Bing等公司,一同合作規範 MicroData 的標準格式 Schema.org ,是較為主流的標籤格式。   RDFa - 是由 W3C 所制訂推薦的標籤格式,同樣支援 HTML5,可以擴充(X)HTML的屬性,也是較為主流的標籤格式。   Open Graph Protocol - 是 Facebook 制定的 HTML Meta 標籤格式,主要提供網頁的標題、縮圖、描述等資訊,Facebook 也藉由讀取其中的資訊將網頁內容摘要的型態轉載應用,也陸續有許多網路平台將其加入支援,因此是近年來較為重要必須的標籤格式。     外嵌引入:    JSON LD - 是以 JavaScript 語法為基礎,可由原有的 JSON 格式解析外嵌型的標記方式,結構較為簡易好維護,可與 MicroData 共通 Schema.or 格式,逐漸有許多主流搜尋企業推從,是未來可能取代其他格式的趨勢標籤格式。  
在上篇"網頁結構化資料是什麼"中,我們說明了設定網頁結構化資料主要是為了提供搜尋引擎正確歸類收錄、顯示資訊為用途,瞭解了網頁結構化資料主要的用途後,本次將以實際範例作為說明希望讓大家能更簡單且清楚的方式來理解。   由網頁原始碼中可以先瞭解,基礎的頁面設定,在基礎設定中 Og meta tag 是由現今主流的Facebook 所制定解析專用的結構化標記,用途便是有利於Facebook 搜尋引擎收錄及插件(分享、轉貼)時能自動對應格式應用的結構化標記。    在基礎頁面 meta 之外,現今較常應用的 Microdata 結構化標記,主要應用在頁面與網站的階層結構上,有利於搜尋引擎對網站整體的階層瞭解與收錄。  
 我們在作視覺設計時,在字型的選用上,若想要嘗試平常不用的字型,可能會需要一個個試,相當麻煩,尤其如果安裝的字型一多,會顯得浪費時間和心力,如果可以一次看到所有字型顯示的樣子,就方便許多了,而現在線上就有提供預覽字型的網站唷!只要打上文字,按下Enter,網站就會直接顯示你電腦裡所安裝的所有字型,十分快速! 以下介紹兩個:MyFontbook 與 wordmark   MyFontbook是線上字型檢視器,不僅可以預覽字型,而且可以根據個人的使用習慣分類和加標籤,甚至能夠替字型評分!不過加標籤和評分等這些功能,都必須註冊帳號才可以使用,註冊步驟很簡單,只要有電子信箱與密碼即可唷。   進入首頁後按「Launch Viewer」     網站會請你登入或註冊,如果還不想註冊的話可以按右邊的「Demo」,但要注意的是Demo版有些功能無法使用唷。      wordmark (https://wordmark.it/) 比起MyFontbook更加直覺方便,但功能方面跟MyFontbook相較之下,就較簡陋了,只提供預覽字型,而沒有加標籤等功能。 而字型又分成個人電腦擁有的以及Google Fonts。 到首頁,輸入你想檢視的文字,按下「Enter」,即可顯示唷!          
在網頁上的區塊是依照html的書寫順序排列,但如果換成設計RWD自適應網頁時,有時為了閱覽方便或其他需求,會需要將原本的區塊順序作更動,雖然可以用float浮動或是position定位來設定,在調整上較為麻煩,這時我們可以使用flexbox(詳細介紹請看: CSS3的flexbox版面配置-flex container(容器)可用的屬性和CSS3的flexbox版面配置-flex items(子項目)可用的屬性) 裡的order屬性,此屬性可以直接以數字設定區塊的前後順序,非常快速!   首先寫一個html框架,內有四個div區塊,為方便區分設定order的前後差異,依照html裡的順序分別設001、002、003、004。 將最外圍的div的class命名為container,設display:flex   顯示出的如下圖   然後設order屬性,此範例設定四個div的順序為反過來,在html碼裡排列第一的div(001)設為order:4,以此類推。   為方便看出差異,另外加上每個div的order數值   可以清楚地發現,div的排列會跟著order的數值作更動。
  網頁結構化資料是什麼?相信大多數人都有使用過搜尋引擎尋找過資料,搜尋結果列表出來的資訊會盡量貼近符合搜尋的關鍵字,而搜尋引擎又是靠什麼資訊去歸類排序網際網路廣大多元的資訊呢?其中最主要的歸類方向便是"網頁結構化資料",網頁結構化資料簡單來說就是網頁最基礎的編輯資訊,也是我們在搜尋排名常看見的網站說明資訊,這些說明資訊不僅提供了搜尋者閱讀查證資料是否符合之外,更提供了搜尋引擎進行歸類排序等用途。    一般人可能會認為大多數搜尋引擎都會自動收錄基礎閱讀資訊,又為什麼需要額外在結構化資料著墨呢?原因在於大多數搜尋引擎在收錄時只會針對簡單的基礎資訊進行收錄,而大部分網站若沒有將進階資訊設定到正確對應的收錄位置時,就少掉許多貼近關鍵字訊息的資料,自然在歸類與排名上會顯得較為模糊薄弱。      從圖片資訊中能發現,搜尋較為明確方向的關鍵字時,搜尋引擎也會把結構化資料顯示得更加符合貼近,因此"網頁結構化資料"在 SEO 上算是最基礎的頁面資訊,卻也是極為重要的關鍵資訊。
網頁設計上時常需要各式各樣的icon,網路上也有許多資源可以使用,像是知名的Font-Awesome(可看此介紹Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用!) 若想嘗試不一樣風格的話,不妨來試試這款線稿風格的icon,讓整體畫面看起來更清爽! 首先到下載網址 按「Clone or Download」即可下載   下載回來將檔案解壓縮後,有個「fonts資料夾」和「style.css」,只要將這兩者放到你的檔案目錄裡即可   打開index.html就可以看到圖示和各自對應的class名稱一覽表   先將style.css置入連結,然後複製要使用的圖示名稱,貼到class裡去,就可以使用了唷!   比如說我要用icon-documents這個icon,便將它加進class裡。   還可以根據自己的需求更改圖示大小唷,相當實用。
  本站先前介紹過Google Analytics分析-看見網站績效的說明,從 Analytics 追蹤分析當中,我們瞭解到訪客在網站當中的操作喜好與閱讀效率等詳細資訊,可以進而作為網站營運優化的指標,因此對於網站管理人員是有著極大的幫助分析工具,而本次將進階推薦介紹由 Google Analytics 延伸的 Page Analytics 單頁網站流量分析擴充功能。    Page Analytics 是由 Google Analytics 原本的追蹤權限資訊做為延伸的擴充工具,主要是應用在網站"單頁畫面"進行流量與連結的統計與說明,讓管理人員能夠在網站每個畫面中一目瞭然的清楚知道連結應用資訊,得達精確的訪客應用效率,所以網站在原本申請並置入過追蹤碼後,便能透過安裝工具直接做使用(若尚未安裝過追蹤碼可參考文章開頭連結進行設定),擴充工具可以從 Google Chrome 瀏覽器的"線上應用程式商店"搜尋 Page analytics 找到申裝資訊。   在安裝擴充工具後,可以透過瀏覽器左上方的開關圖示進行快速開關查看頁面資訊。
雖然電腦有內建截圖工具,但是大部分只能截取全螢幕,如果需要截整條頁面時,就必須滑動滾輪分段截,然後再用修圖工具拼起來,相當麻煩。不過現在有個chrome外掛套件可以輕鬆截取整個網頁唷!讓你不用再特地分好幾次截圖了!   首先到外掛頁面選取,點選「加到chrome」。 下圖因為已安裝外掛,所以上面直接顯示的是「已加到chrome」   FireShot安裝外掛請點此   在想截取的頁面上按右鍵,移到「捕捉網頁截圖 -捕捉FireShot的」,選擇「捕捉整個頁面」,或是依自己需求也可以選擇「捕捉可見部分」,也就是全螢幕。   如此就可以另存為圖片囉,圖檔為PNG,也可以保存成PDF檔。   如此便可以存到完整的頁面了喔!