標籤:HTML5

「免費的喘息」網站改版,「OutLine」佈景上線

這幾天大家又發現香腸開始懶惰不新增文章,但其實香腸是在為網站改版做準備。這次放了六天的假期,有一半以上的時間都是在寫佈景,總共改了三個網站,一個喘息、一個香腸自己使用的公版,一個藍藍路網站改HTML5,第一次覺得自己這麼有效率的在四天內做了這麼多事情,結果文章一篇也沒寫到,實在是有點愧疚。既然香腸寫了新佈景,就順便拿來當文章發表介紹一下囉!

這次的新佈景「OutLine」,是針對免費的喘息論壇轉型成WordPress所設計的版型,基本上並不適合一般部落格來套用,因為很多東西都屬於客製化的,所以,扣除掉這些客製化的東西,其實「OutLine」真的是outline。雖說看起來很普通,但是越普通的佈景越是難以調整,很多小細節要注意,就算加入個小圖片也要調整超多次,讓網站達到最佳效果。

在網站上加個 「語音輸入」搜尋吧! (HTML5 Speech Input )

最近逛到一個WordPress網站,發現它的搜尋框上竟然有一支麥克風!這,不是Google的語音輸入法嗎?只要對著麥克風講話就會將您所說的字句轉成文章,這實在是太貼心了。那,我該怎麼加入到自己的網站呢?事實上這是HTML5的一項技術(Speech Input),目前這個功能只有在webkit核心瀏覽器才可以實現,例如Google Chrome上就可以使用這個語音搜尋。

一開始以為想要加入這個語音搜尋要使用很多語法,沒想到只要短短一個小語法就可以讓網站的搜尋框額外增加了語音輸入的功能,未來想要搜尋卻不想用手打字就可以這樣直接輸入了,是不是很方便呢?至於它的Text to Speech精準度,可以辨識中文和英文,只是不知道是麥克風?發音不標準?辨識能力太差?講不常見或者是太複雜的字句,辨識出來都怪怪的…

Breadcrumb 在Google搜尋結果中加入自訂麵包屑

網站上如果有一個導覽列(Breadcrumb,麵包屑),可以幫助訪客在閱讀文章時,不容易迷失方向,也可以很迅速地知道自己目前所在位置,同時也可以根據導覽列查看其他文章,如果這樣的效果可以搬到Google搜尋結果中,是不是非常棒呢?現在我們可以透過一些可行的規則,在網站加入導覽列之外,同時也可以在Google搜尋結果中,擁有相同的成效。

一般大家都應該會稱網站主內容上方,header下方的那個有大於符號的叫做導覽列,但是他真正的名稱是叫做Breadcrumb(中文翻譯叫做麵包屑)。在查資料的時後,用導覽列名稱去查詢,應該查不到自己想要的,但是用Breadcrumb去查,可以翻到許多資源。那該如何做好麵包屑的優化,才會讓Google搜尋遵循你的設定,乖乖在搜尋引擎上也出現呢?

檢查網站是否通過HTML5驗證?

製作網頁的門檻其實不高,但是想要通過W3C標準驗證那就不容易了。雖然說沒有通過驗證也不會讓網站不能看,或是搜尋引擎搜尋不到,但是既然有一個標準規則,有能力的話倒是可以嘗試挑戰自己,試著去遵守標準規範,未來網頁後續維護、或是轉接給別人,也比較好做調整,不會標準不一,讓後續維護或是接手的人感到許多困擾。

一直以來,網頁標準就好幾版,現在又多出了一個新規格HTML5,不過這規格是未來的趨勢走向,因為越來越多的瀏覽器都開始支援,因此網站打造成HTML5是遲早的事情。如果現在有時間,倒是可以自我挑戰,把網站改成HTML5的架構,並搭配W3C的規範,讓網頁符合未來標準,先做這些動作,並不會比較吃虧,而是以後就不用忙著轉換規格了。

WordPress佈景改寫成HTML5的前置步驟

最近已經將自己的WordPress佈景主題改寫成HTML5架構(imXD5),不過中途倒是遇到許多小問題,因為HTML5是屬於語意標籤,如果用錯標籤,可能會讓網站的SEO出問題,所以改到一半的時候有點退卻,不過睡一覺後,又是一條好漢,所以爬了許多相關的HTML5資料,首先必須先做好前置步驟,讓所有瀏覽器都可以吃HTML5標籤。

目前可支援HTML5的瀏覽器有Google ChromeFirefox、Safari、Opera以及IE9,那舊版IE呢?那只需要加上一個小小的hack,就可以讓他懂得HTML5標籤了。除此之外,在WordPress環境下,為了讓網頁規範符合HTML5,可以讓網站通過檢測,還必須變更rel所帶的參數,因為WordPress自己產生的rel屬性並不符合HTML5標準規範

imXD5 以HTML5為架構的WordPress佈景主題

又到了換佈景的季節了,這回突然心血來潮想要挑戰一下HTML5的架構。雖說這個架構要到2022年才會完全落實,不過現在開始動其實也不嫌早,畢竟這是未來的趨勢,使用語意標籤去架構整個網站,未來維護也會比較方便,新標籤也多了一些額外功能,對於搜尋引擎來講,似乎有一些小小的加分(?),在這樣的迷思下,不小心就把網站給改好了。

像是上一版的imXD只有一張RSS圖感覺非常單調,所以這次加了許多的小圖案(雖然也不是很明顯..)來點綴一下網站。不過主要的變化還是對整體的網站架構有了新的變動,也把許多功能function化,讓佈景主題程式碼乾淨一點,只是functions.php倒是增肥了不少,至於CSS也用了一些CSS3的語法來達到一些小小的特效。

「HTML5 test 」測試你的瀏覽器對HTML5支援度有多高

HTML5是未來的網頁架構趨勢,市面上的瀏覽器對HTML5的支援度越來越棒,就連IE也從IE9開始支援HTML5。那HTML5有什麼好?它主要是語意標籤,讓程式開發者可以更好了解各個區塊,對於網頁開發者來講有一定的幫助,另外也有許多HTML5的API,可讓使用者的網路體驗更好,最常見的就是Gmail內的附加檔案拖拉方式,這就是其中一項的應用。

講到了網頁開發,有一個「HTML5 test」網站可以幫我們檢測每一家瀏覽器對於HTML5的支援程度,這網站所偵測出來的數據也常常被大家拿來比較各家瀏覽器對於HTML5的支援程度,這網站會針對HTML5的12大類別進行偵測並且給予評分。