開發 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> ...
2014年4月27日 星期日
2014年4月6日 星期日
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...
2014年4月5日 星期六
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....
訂閱：
文章 (Atom)
