Archive for August, 2010

Web Page裡的三個維度

Monday, August 30th, 2010


看完這段介紹”什麼是Front-end Engineer及其重要性”的影片後,裡面有講到一些Web Page設計上的重點,在此記錄一下以免忘記。


Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

一般的Web Page都會包含HTML, CSS, JavaScript三個部份。彼此之間有些角色定位模糊的地方,究竟該怎麼切分工呢? 請看以下定義:

HTML – what

定義頁面的內容(Content)。Developer應該要避免使用過多的div或span,取而代之的,應該使用更有意義的tag去包裝。而一個好的設計,應該儘量避免在HTML裡寫JavaScript或CSS style的code,降低藕合度,可以增加程式的可維護性(maintainability)。

不好的寫法範例:
<a href=”test.html” onclick=”javascript:onClick(this);”>

上面這段code可以改用JavaScript動態綁定element event handler來達成

CSS – how

決定頁面文容該如何呈現(Appearance)。在不同Browser的呈現結果可能會相差很多,因此,Developer一定要在欲支援的Browser平台上實際測試過。通常IE系列的Browser會跟其它(Firefox, Chrome, Safari, Opera…etc.)差很多… :evil:

JavaScript – why

定義頁面的行為(Behavior)。例用動態綁定event去處理各種element UI行為,並且使用物件導向的設計,使程式碼更好維護與修改。儘量避免在JavaScript code裡去寫HTML或CSS Style的code,降低藕合度,可以增加程式的可維護性(maintainability)。有關物件導向的JavaScript設計,可以參考這幾篇:
http://msdn.microsoft.com/zh-tw/magazine/cc163419.aspx
http://fstoke.me/blog/?page_id=1610

HTML標準中不常用但對SEO有用的語法

Monday, August 30th, 2010

別人傳給我看的,覺得不錯把它記起來…

  1. h1的合理使用,<h1>到<h6>表示標題的6個級別-重要性從高到低,如果在設計網頁過程中,你覺得他的默認外觀不好看,可以通過css輕鬆設置你想要的樣式。依照W3C的規定,標題跳級不是好的做法,因為h1-h6就像是一個大綱,要保持各個級別的連貫順序。
  2. <table>裡面不常用的一些標籤:<caption>表格的標題,<table summary=”摘要”>表格摘要,<th>表頭,<td headers=”">表頭與數據的關係,< th abbr=”">改變語音合成器讀出的內容,<thead>表頭,<tfoot>表腳,<tbody>表體。
  3. 表格並非結構,在某些用途上是不可替代的,所以請不要絞盡腦汁用div代替table。
  4. <blockquote>表示引用文本,當引用外界文字時,盡量用該標記
  5. <lable>標籤標記,用來標註表單控件
  6. <dl><dt>來定義列表,在構建提交表單時,可以用該語法來代替<p>或者<table>等
  7. <input tabindex=1>讓用戶使用鍵盤來移動表單控件的當前焦點
  8. <lable for=”name” accesskey=”9″>Name:</lable><input type=”text” id=”name” name=”name”>用戶可以用Ctrl或者Alt鍵加上我們在代碼中設置的9鍵,來切換焦點到這個輸入框內。
  9. 在<form>中用<fieldset>將表單內容分組,當加上描述符<legend>之後,大多數瀏覽器上,都會在所分組的控件外圍顯示一條邊框。
  10. <strong>和<em>比<b>和<i>要好,因為前兩者是表達意義,而後兩者是表達外觀。em表示強調,strong表示更加強調。
  11. W3C 在Html4.01規範中還定義了下列短語元素:
    <cite>包含引用信息或者對其他來源的參考說明;
    <dfn>表示所包含的是術語的定義。
    <code>指名一段計算機程序代碼。
    <samp>指明一段程序或者腳本等的輸出。
    <kdb>表示由用戶輸入的文本。
    <var>表示一個變量或者程序參數的實例。
    <abbr>表示一種簡寫形式,例如 WWW。
    <acronym>表示只取首字母的縮寫形式,例如WAC。
  12. 更好的錨點方法
    <p><a href=”#oranges”>關於桔子</a></p>
    … 文字 …
    <a id=”oranges” name=”oranges”>桔子很可口</a>
    … 更多的文字 …
  13. 給錨點加上title屬性可以為這個鏈接所指向的目標提供豐富和明確的描述信息。
  14. 更多的列表,無序的列表使用<ul><li>,有序的列表使用<ol><li>,定義列表使用<dl><dt>(詞條)<dd>(解釋),你可以通過css中的list-style-type來改變它們的樣式,甚至做到自定義,decimal數字型,upper-alpha大寫字母型,lower-alpha小寫字母型,upper-roman大寫羅馬數字,lower- roman小寫羅馬數字,none不顯示。

精簡HTML:使用class來定義樣式;使用css的#來定義樣式;去掉不必要的<div>

【食記】1885 Burger Store

Friday, August 13th, 2010

這間店在師大附近的一個小巷子裡,在夜市的另一邊,比較安靜。這天我們同事找我一起去這家吃看看,因為有人要畢業了…:P 於是中午就提早10分鐘離開公司來這用餐….

用餐環境很悠閒,氣氛很輕鬆,很適合來發發呆、聊天打屁… :D

同事點的,隔太久才寫,有點忘了這是什麼堡了… 好像是蘑菇起司牛肉堡

我點的,也忘了… 隔太久才寫,都忘記吃下去的感覺了 XD 感覺不錯吃就是

把生菜、洋蔥都丟進去,側面特寫

紅茶,可以無限續杯

著條,份量頗多,蠻粗一根的,炸得挺脆,好吃!

跟附近的Evans Burger比起來,我是覺得差不多啦,不過我同事是說這家的漢堡比較有肉汁~ I dunno~ :roll: 不過價位好像是有比較便宜~

電話: 02-2367-8258
地址: 台北市大安區浦城街24之1號
地圖:

其它介紹:
介紹一