4月 2014 ~ { Huzi } UIUX・Design・Code

2014年4月27日星期日

Tagged under: html5, Outline

HTML5 sectioning 元素, 標題及文件大綱（Outline ）

開發 HTML5 網站時，有時只注重視覺的呈現或寫 code 的技巧，而忘了 HTML5 很重要的 Outline (大綱)。

Outline 是什麼？
以 yahoo 為例，Outline 為右邊的形式

為什麼開發網頁時要注重 Outline 呢？
除了讓瀏覽器快速解析網頁的主要架構，有助於 SEO 之外，讀取的速度還可以加快，所以開發 HTNL5 網頁時，了解並製作正確的 Outline 為首要且重要的一個課題。

如何得到解某網站的 Outliner ？
實用的小工具網站（HTML 5 Outliner）http://gsnedders.html5.org/outliner/

如何編寫正確的Outline？（以下正文開始）

Sectioning

使用新的 sectioning 元素時（article,section,nav,aside），更需要小心 outline 的結構算法
為了方便理解，先看html4的結構

uThe HTML 4.01 outline

<body>

    <header>Site title etc.</header>

    <nav>

        <ul>

            <li><a href="/">Nav item</a></li>

        </ul>

    </nav>

    <article id="main">

        <h1>Article title</h1>

        <p>Article content.</p>

        <h2>Article sub-heading</h2>

        <p>More content.</p>

        <h3>Article sub-sub-heading</h3>

        <p>More content.</p>

    </article>

    <aside>

        <h2>Sidebar heading</h2>

        <h3>Sidebar sub-heading</h3>

    </aside>

    <footer>

        <h2>Footer heading</h2>

        <p>Footer content.</p>

    </footer>

</body>

會得到這樣的 outline

Article title
1. Article sub-heading
  1. Article sub-sub-heading
2. Sidebar heading
  1. Sidebar sub-heading
3. Footer heading

再來用相同架構（只是換了 tag 寫法）來看看 html5 出現的 outline 結果

The HTML5 outline

<body>

    <header>Site title etc.</header>

    <nav>

        <ul>

            <li><a href="/">Nav item</a></li>

        </ul>

    </nav>

    <article id="main">

        <h1>Article title</h1>

        <p>Article content.</p>

        <h2>Article sub-heading</h2>

        <p>More content.</p>

        <h3>Article sub-sub-heading</h3>

        <p>More content.</p>

    </article>

    <aside>

        <h2>Sidebar heading</h2>

        <h3>Sidebar sub-heading</h3>

    </aside>

    <footer>

        <h2>Footer heading</h2>

        <p>Footer content.</p>

    </footer>

</body>

得到以下 Outline

Footer heading
1. Untitled NAV
2. Article title
  1. Article sub-heading
    1. Article sub-sub-heading
3. Sidebar heading
  1. Sidebar sub-heading

此時會發現原本應該在底下的 Footering header 跑到 top-level ?! 而且顯示 “Untited NAV” （未命名）?!!

為何現在 footer 變成了 header？

原因如下：

首先，footer 元素不是 sectioning ccontent ，所以 footer 沒有辦法創造新的 section，而以層級來說，<h2> Footer heading </h2>是唯一在 body 以下的 heading，所以瀏覽器直接讀取 heading 來當 top-level 。

如何避免 footer headering 變成 page heading ?

我們可以把 footer 元素內容包在 section 元素內，如下：

<footer>

     <section>

          <h2>Footer heading</h2>

          <p>Footer content.</p>

     </section>

</footer>

演算結果 ( Outline )：

Untitled BODY
1. Untitled NAV
2. Article title
  1. Article sub-heading
    1. Article sub-sub-heading
3. Sidebar heading
  1. Sidebar sub-heading
4. Footer heading

雖然感覺有點投機取巧，但輸出的結果的確把 footer heading 放置該有的位置，但現在的問題是 body 沒有 heading 了 ?!

NAV sectioning

現在我們有兩個未命名的 sections，先說明一下，為何 nav 有 “未命名” 的問題？
因為nav 是一個 sections 元素，所以依照 outlines 演算法來說，sections 會創造出自己新的 section 區塊。而依照 sections 元素預設應有 heading　的規則來說，nav 沒有輸入 heading 內容 )，所以這裡即顯示 “Untitled NAV” (未命名的標題）。

題外話：
不確定為什麼 nav 被歸列為 sectioning 元素。
導航列中的每個選單 li 都可以有一個標題來標簽他們，但因為這裡是一個 sectioning 元素，所以必須有一個 heading 放置在 nav 元素中去避免 “Untitled NAV” 的問題。

所以我們這麼做：

<nav>

     <h2>Main navigation</h2>

     <ul>

          <li><a href="/">Nav item</a></li>

     </ul>

</nav>

演算結果 ( Outline )：

Untitled Section
1. Main navigation
2. Article title
  1. Article sub-heading
    1. Article sub-sub-heading
3. Sidebar heading
  1. Sidebar sub-heading
4. Footer heading

避免未命名的 BODY

為了避免 body 元素也成為 “未命名” 區塊，必須放置 heading 在其他 section 區塊外。
但這樣做的問題是，他阻止你放置的實際文件內容在 article 元素裡，而同時他也必須成為此文件階層最高的 heading。

解釋一下：
這裡的意思應該是希望 article title 成為 body heading ，但該如何做才能不影響實際顯示的內容而又成為 body heading，使 outline 演算後變成以下結構：

Article title
1. Main navigation
2. Article sub-heading
  1. Article sub-sub-heading
3. Sidebar heading
  1. Sidebar sub-heading
4. Footer heading

但因為 article 只有在當你有多個 article 在同一頁面共享一個 heading 才有作用，而以這個例子來說，它可以是一個主頁或 blog 的頁面，所以一個頁面只放一個 article 是不合理的。

這裡想到幾種不同的解決方式：

a) 避免使用 sectioning 元素。

忘掉 section 元素移除的問題，因為這樣 outlines 會變成跟原本的一樣，最明顯的缺點就是將會錯過任何使用 html5 元素的優勢，不理想。

b) 在任何 sectioning 元素外去重複的 article 標題。

重複的 article 標題，你有可能必須撰寫 css 去隱藏他們，只是為了它擺在 outline 正確的地方，可能不是一個好主意，無論視覺上或 SEO 優化上。

c) 把網站標題（site title）放置在階層最高的 heading。

有些人認為，網站名稱／Logo／組織名稱的 heading 應該放在最高階層，但我不同意這個看法，我覺得這是文件標題是最重要的，當你拜訪這個網站的時候。

d) 避免使用 article 元素在單一個 article 頁面上。

要如何使用 sectioning 元素，但不換行的把單一文章頁的 article 元素

操作如下：

<body>

    <header>

        Site title etc.

        <nav>

            <h2>Main navigation</h2>

            <ul>

                <li><a href="/">Nav item</a></li>

            </ul>

        </nav>

    </header>

    <div id="main">

        <h1>Article title</h1>

        <p>Article content.</p>

        <h2>Article sub-heading</h2>

        <p>More content.</p>

        <h3>Article sub-sub-heading</h3>

        <p>More content.</p>

    </div>

    <aside>

        <h2>Sidebar heading</h2>

        <h3>Sidebar sub-heading</h3>

    </aside>

    <footer>

        <h2>Footer heading</h2>

        <p>Footer content.</p>

    </footer>

</body>

演算結果 ( Outline )：

Article title
1. Main navigation
2. Article sub-heading
  1. Article sub-sub-heading
3. Sidebar heading
  1. Sidebar sub-heading
4. Footer heading

到這裡，已經越來越完整了，現在唯一的問題是到這裡， nav 沒有他適合的欄位區域（因為他並不屬於 Article title ) ，這裡很有可能會讓一些使用者感到困惑，解決辦法如下：

<header>

    <h1>Site title etc.</h1>

    <nav>

        <h2>Main navigation</h2>

        <ul>

            <li><a href="/">Nav item</a></li>

        </ul>

    </nav>

</header>

演算結果 ( Outline )：

Site title etc.
1. Main navigation
Article title
1. Article sub-heading
  1. Article sub-sub-heading
2. Sidebar heading
  1. Sidebar sub-heading
3. Footer heading

大概就這樣了，但我還是覺得 outline 沒有 site title 在裡面將無法更明白地表示出這是什麼網站，噗

via HTML5 sectioning elements, headings, and document outlines

Huzi 凌晨2:05 No comment

2014年4月6日星期日

Tagged under: compass, F2E, mac, sass, Sublime Text

Mac & Window 打造 Sass + Compass 環境（建立 Compass 專案）

Step1 : Ruby 環境

因為 Sass 是由 Ruby 程式語言寫成，所以必須從 Ruby 環境下安裝

Mac：

由於已經安裝好了Ruby，所以只要直接開啟終端機 Terminal 輸入

$ gem update --system" //先更新 gem

$ gem install compass" // 安裝 Compass

由於用 SASS 的都會搭配 Compass 使用，所以可以直接裝 Compass，電腦會自動安裝 Sass

如果出現錯誤訊息 : ERROR: While executing gem ... (Gem::FilePermissionError) 則改輸入：

$ sudo gem update --system"

用意為提高執行權限，此時會要求輸入電腦管理者密碼。

Window：

Windows 必須先安裝 Ruby，請至 RubyInstaller 下載安裝程式，跟著軟體指令安裝完成後，開啟 Ruby 的命令提示字元（以管理員的權限開啟），執行以下指令確定是否有安裝成功：

ruby -v

顯示結果會出現 Ruby 的版本，那就說明你成功了。

接下來可以下與 Mac 相同指令，先更新 gem 再安裝 Compass 。

$ gem update --system" //先更新 gem

$ gem install compass //安裝 Compass

由於用 SASS 的都會搭配 Compass 使用，所以這直接裝 Compass，電腦會自動安裝 Sass

Step2 : 建立 Compass 專案

接下來 Mac 皆與 Window 皆輸入同樣的指令

先指定到要建立專案的目錄，例如已在 D:\ 開了一個資料夾稱 Text 放專案

$ cd d:/Text //先把位置指定到目錄下

再建立專案文件

$ compass creat project    //建立專案，“project” 是自訂的專案名稱 

接下來就可以看見 Text 資料夾下已建立以下檔案

為了使SASS順利編譯成CSS，則必須在終端機再輸入

$ compass watch

接下來就可以開始編輯SASS檔案了，記得每次要求編譯時，要先指定到該資料然後 watch。如果自行多建立 SASS 文件，則在編譯時，css資料夾會自動產生該文件css檔。

Step3 : config.rb 設定

可以在 config.rb 檔內做 css、sass、images 等資料夾設定

說明1: [ output_style ] CSS碼有下述四種編譯方式：
expanded = 一般。每行 CSS 皆會斷行
nested = 有縮進。較好閱讀。
compact = 簡潔。匯出來的 CSS 檔案大小比較小。
compressed = 壓縮。壓縮過的CSS。

以上是比較常用的，更詳細可以看官方教學

Huzi 清晨7:22 No comment

2014年4月5日星期六

Tagged under: Sublime Text

Sublime Text 3 安裝設定

Sublime Text 3 的好處就不多加介紹，這裡主要簡單說明設定，順便幫自己做一下筆記。

先到官網下載 Sublime Text 3

每個編輯器都有很多好用的 plugin ，當然 Sublime 也不例外，首先先安裝 Package Control，之後許多好用的套件就從此下載。

1. 安裝 Package Control ：

Ctrl + ` 組合鍵開啟，直接複製以下安裝程式碼到命令列中，並直接按下 Enter 及安裝完畢：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

注意：此段成式碼只適用於 Sublime Text 3 。Sublime Text 2 程式碼看這。

安裝完畢後再按一次 Ctrl + ` 關閉控制台視窗，或直接重開 Sublime Text 3 。

2. Sublime Text 套件管理：

之後安裝的套件都可以在 [ Preferences ] ＞ [ Package Control] Sublime Text 套件管理員做管理，包含安裝、移除、設定等

3. 開始安裝套件：

呼叫 Install Package，可以從 [ Preferences ] ＞ [ Package Control] 選擇，也可以輸入快速鍵：Ctrl+Shift+P
接著在輸入框內，輸入 inst 後會自動跑出下拉式選單，選取 Install Package 按 Enter

等待幾秒後會出現以下視窗，此時就可以開始輸入你要安裝的套件名稱。

4. 各別管理套件

所有安裝的套件都可以從 [ Preferences ] ＞ [ Package Settings ] 各別做設定

5. 其他設定 - 呼叫側欄

[ View ] ＞ [ Side Bar ]

6. 其他設定 - 調大字體

這樣大致上就完成，為了怕工作久了變成鬥雞眼（誤），我會把字體調大，像老人一樣...

差不多完成，
所謂工欲善其事，必先利其器，
接下來就要分享有哪些好用的 Plugins。

Huzi 凌晨2:10 No comment

{ Huzi } UIUX・Design・Code

300x250 AD TOP

網誌存檔

2014年4月27日星期日

HTML5 sectioning 元素, 標題及文件大綱（Outline ）

Sectioning

uThe HTML 4.01 outline

The HTML5 outline

2014年4月6日星期日

Mac & Window 打造 Sass + Compass 環境（建立 Compass 專案）

Step1 : Ruby 環境

Mac：

Window：

Step2 : 建立 Compass 專案

Step3 : config.rb 設定

2014年4月5日星期六

Sublime Text 3 安裝設定

1. 安裝 Package Control ：

2. Sublime Text 套件管理：

3. 開始安裝套件：

4. 各別管理套件

5. 其他設定 - 呼叫側欄

6. 其他設定 - 調大字體

Labels

Whats Hot This Week

Follow

About

{ Huzi } UIUX・Design・Code

300x250 AD TOP

網誌存檔

2014年4月27日 星期日

HTML5 sectioning 元素, 標題 及文件大綱（Outline ）

Sectioning

uThe HTML 4.01 outline

The HTML5 outline

2014年4月6日 星期日

Mac & Window 打造 Sass + Compass 環境（ 建立 Compass 專案）

Step1 : Ruby 環境

Mac：

Window：

Step2 : 建立 Compass 專案

Step3 : config.rb 設定

2014年4月5日 星期六

Sublime Text 3 安裝設定

1. 安裝 Package Control ：

2. Sublime Text 套件管理：

3. 開始安裝套件：

4. 各別管理套件

5. 其他設定 - 呼叫側欄

6. 其他設定 - 調大字體

Labels

Whats Hot This Week

Follow

About

2014年4月27日星期日

HTML5 sectioning 元素, 標題及文件大綱（Outline ）

2014年4月6日星期日

Mac & Window 打造 Sass + Compass 環境（建立 Compass 專案）

2014年4月5日星期六