[HTML] 大圖縮小圖是行不通的

昨日因為要做一個簡單的logo,所以做了以下這張圖,大小為144px正方形,我用PS製作:
(原圖144px正方形)
apple-touch-icon-144                   

再來我想改成其它尺吋,以再特定用途時,可以切換不同尺吋的圖,所以從原圖(144px正方形)直接用更改圖片大小的方式,改成分別是114px正方形、72px正方形、57px正方形各自的圖檔來輸出:以下依序

(114px正方形)                                      (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-114                                  apple-touch-icon-114

(72px正方形)                                        (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-72                                             apple-touch-icon-72

(57px正方形)                                         (將左圖直接設定寬度至144px來顯示:方便觀查對照)
apple-touch-icon-57                                                  apple-touch-icon-57

發現:
1、字母、四周圓角在直接使用圖片縮尺吋的方式,開始有模糊、鋸齒狀出現。
2、色差上精緻度也被破壞掉。

所以我想還是要先設定好尺吋再重新製作才行、或者使用向量式類型的軟體來製作。
我不是視覺設計師,只是一些心得,分享給客倌們。

[CSS] box model

css icon

相信會寫CSS的同好們,一定對CSS不陌生,但box model在CSS的角色裡扮演著非常垂要的地位,如果你是初學者,務必搞懂:全部的html元素,都是box model概念。學會之後,未來在css對html的調效中,都將非常有幫助。

box model圖示:
box model
所有的html標籤裡除了內文之外,都還包含了padding(內距)、border(邊框)、邊距(margin)。

另外值得注意的:
一、css裡的width屬性指的是包含了哪部份:僅包含段落(即白色區域)。所以其實整個元素的總寬度=width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

二、當兩個html元素碰在一起時,邊距該如何算呢:

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <style>
      .para{
        border:50px solid black;
        width:50px;
        padding:50px;
        margin:50px;
      }
      </style>
    </head>
    
    <body>
      <p class="para">段落1</p>
      <p class="para">段落2</p>
    </body>
  </html>

以上html及css原始碼顯示結果如下圖:會發現上下兩個的margin會被合併成只有50px,而不是100px。事實上是會取較大一個margin數值。
邊距上下差50px

但如果將.para這個css改成以下:

.para{
  border:50px solid black;
  width:50px;
  padding:50px;
  margin:50px;
  display:inline-block;
}

即將.para兩個<p>元素改成行內區塊(display:inline-block;)元素,顯示結果如下:中間的margin會變成100px(50px + 50px),瞭解其差異性了嗎?
邊距差100px

三、行內元素(例:<span>):如果是行內元素(display:inline;),設定margin-topmargin-bottompadding-toppadding-bottom會無效。後續會另開專文撰寫關於display屬性。

定型化契約

何謂定型化契約?

凡以定型化條款所訂立的契約,均稱為定型化契約(法國稱為附合契約, 英國稱為標準契約),目前各行各業使用情形日益普遍,儼然已成為現代交易的基本型態。惟消費者護法所稱的定型化契約,依該法第二條第七款規定:「指企業經營者為與不特定多數人訂定契約之用而單方預先擬定 之契約。」其擬定契約的當事人限為企業經營者,而締約的相對人又限為消費者的情形,較一般認為只要是由契約一方當事人預先擬定的交易條款 即為定型化契約,其適用範圍為狹。消費者保護法所規定的定型化契約,其特徵如下: 

一、契約條款方面:契約條款由一方當事人之企業經營者單方面所擬定。定型化契約的根本問題,在於企業經營者經常利用其優越的經濟地位,訂定有利於己而不利於消費者的契約條款,造成締約雙方當事人地位不平等所致。 

二、締約目的方面:其目的在於以此條款與多數相對人〈消費者〉締結契約。定型化契約具有降低交易成本,提高經濟效率,加速交易過程的功能,有其存在的必要。

參考資料:台灣法律網


本益比?

2013使用者經驗國際菁英高峰會

時間:
地點:台大醫院國際會議中心

最近這一、兩年,UI/UX如火如荼地展開,也在很短的時間,網路、相關產業也都紛紛探討此一議題,甚至其實從完全不懂,到略微所知,也證明了此一議題已漸漸被大家所重視,但在執行面來看,多數中小企業也不知該如何進行,更由其UX(User Experience)乃一抽象概念,從無制式標準做法,要落實在整個企業、文化,實在需要花費不少時間來導入。不過也正因為如此,相關議題,諸如各大研討會、小型讀書會,甚至公司內部,如火如荼展開,期許大家重視使用者經驗議題,目的最終還是希望在最短的時間、人力,將產品做到最符合使用者/消費者的需求,進而降低成本。

前兩日很有幸地參與了由 經濟部工作局智慧生活應用推動計畫辦公室工業技術研究院 主辦的”使用者經驗國際菁英高峰會”,講者包含了

  • 英特爾實驗室互動與經驗研究博士Melissa Gregg博士
  • IBM華生實驗室博士 張書平
  • 趨勢科技股份有限公司協理 游欣
  • 仁寶電腦工業股份有限公司副總經理 陳禧冠
  • 和碩聯合科技股份有限公司總經理 王炳欽
  • 微軟Office亞太產品設計中心 高級UX研究員 Takeshi Tanaka
  • 工業技術研究院 巨量資料科技中心 經理 林慶達
  • Google亞太區用戶體驗經理 唐絢

接下來稍微分享一下,我印象較深刻的幾個key point:

一、趨勢科技游協理:(個人覺得游經理講得非常之好。)講述了自己非常幸運過去剛好有機會接觸UX使用者經驗,在趨勢內部其實叫做HIE部門(Human Interface Engineer)。也剛好這一兩年,UX開始被世人所重視。游經理也提到,非常強調需求及設計,因為一般的waterfall(瀑布式):需求→設計→開發→測試→維護,如果草草就進入開發階段的話,未來只會花更多的時間修改、調整罷了。也提到在台灣的HIE部門,總人數大約是50多位,在整個台灣上千人的團隊之中,其實所佔的比例還是非常的小。最後有一位觀眾提了一個問題:好像是關於Personna的迷思,會不會所設想出來的人其實並非是符合期望的;游經理回:其實這很簡單,Personna不應該是一個員工或一個主管在電腦或紙本上自己設計完成,應該是跨部門去溝通,由其它同仁共同參與,就不會陷入這樣的迷思。

二、仁寶陳副總:(他的聲音好低沉,其實有點恐怖,哈哈)。我只記得最後有一位觀眾(是位學校老師,教互動設計)問說該如何陪養學生以利未來求職?陳副總回:在hard skiil的部份其實在公司內部不缺,而且對岸一大堆,應該多陪養學生一些文化、市場方面的軟知識。

三、微軟Takeshi Tanaka:(我不得不說,他滿有喜感的,哈)。他是日本人,全程英文演講。比較好笑的是,最後有一位觀眾問:(大意,算是issue feedback)windows 8好像什麼東西一直找不到,很難用,很睏惑。Takeshi回:我會回去報告我主管,謝謝(笑笑的用英文回,全場也跟著笑)。

四、Google大神唐經理:最重要的是:UX不是一個Team、一個人或幾個人的事,而是全公司:PM、設計師、工程師、全部的人都有責任。要將UX融入公司文化、環境,而不是公司內部幾個人每天在喊UX,其實不會有人理你。另外舉了很棒的誠品、鼎泰豐的例子,重點在告訴我們:第一線面對消費者。例外最後有人問Design thinking和Designer的差別?唐經理回:Design thinking是比較策略面的,而Designer是專業性質。

以上大概是個人還記得,及一點點心得,如有出入,僅供參考。

最後就分享幾張在現場有拍的照片吧:

第一天早上的講台:
第1天早上的講台

活動議程:
活動議程

趨勢科技游協理
趨勢科技游協理

微軟Takeshi Tanaka
微軟Takeshi Tanaka

工研院林經理
工研院林經理

Google唐經理
Google唐經理

[jQuery] $(document).ready(fn)與$(window).load(fn)的差別

在使用jQuery時,有時會看到$(document).ready(fn)$(window).load(fn),那兩者有何分別呢?
$(document).ready(fn)會發生在html全部下載完成時,才會去執行fn或相關程式碼。
$(window).load(fn)會發生在html標籤中所引用的圖檔、內嵌物件(如:flash)、iframe等都載入完成後,才會執行fn或相關程式碼。
 

[JS] getDir() 取得目前目錄的完整路徑

使用javascript來取得目前所在目錄的完整路徑:

function getDir(){
  var locHref = location.href;      //取得完整路徑,包含檔案名稱
  var locArr = locHref.split("/");  //用"/"切分,並存至locArr陣列
  delete locArr[locArr.length - 1];//刪除locArr陣列的最後一個元素,即檔案名稱
  return locArr.join("/");      //用"/"毀locArr陣列中的元素合併,傳回字串值
}

 

2016台北世界設計之都

2013/06/19世界工作設計日@台北【Design+ OPEN 行動吧!熱血城市設計家】

前幾天去聽這個座談,尤其在”友善”台北這樣的議題上,非常的有意義及省思,
不論是開發者還是設計師,都顯少能夠將對象針對肢體不便人士而設計,
而這次的演講議題,全圍繞在”友善”一詞,將設計的元素導入友善,讓肢體不便人士更能感受到這座城市的溫暖,與他人平等。

舉凡道路坡道、餐廳結帳、點餐流程、APP設計、Web設計等眾多環境,都是很棒的思考點。

幾張當天演講活動的照片:
2013世界工業設計日@臺北

2016臺北世界設計之都

松山文創園區一號倉庫

很有意義的活動,附上連結:
2016世界設計之都(http://www.taipeidesign.org.tw)

[HTML] viewport 元標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">

什麼是Viewport?

桌上型Safari瀏覽器與iOS上Safari瀏覽器對於viewport的定義是有點不同的。

桌上型Safari的viewport Safari on desktop viewport viewport在桌上型的Safari瀏覽器來說,其實指的就是可視區域(visible area)。無論使用者拉大或縮小視窗,viewport指的都是可視區域。
iOS上Safari的viewport

#1網頁放了一張320 x 356 pixels的圖,預設的情況下,viewport width會是980pixels,顯示如下:viewport default width 980 pixels

#2同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為1.0,顯示如下(佔滿):
viewport with width set to 320 pixels

#3同樣網頁有一張320 x x356 pixels的圖,將viewport width設為320pixels、scale設為1.5,顯示如下(放大1.5倍):
Viewport with width set to 320 and scale set to 150%

#4同樣網頁有一張320 x 356 pixels的圖,將viewport width設為320pixels、scale設為0.5,顯示如下(縮小0.5倍,並以白色填滿):
Viewport with width set to 320 and scale set to 50%

#5使用者在做任何zoom in或zoom out等操作手勢時,會改變的是viewport的scale,並不會改變viewport的size:如下顯示:
Viewport with arbitrary user scale

viewport在ios Safari瀏覽器上可能會大於或小於可視區域(visible area),而iPhone及iPod touch的可視區域直擺為320 x 356pixels、橫擺為480 x 208pixels。如左圖各種狀況顯示。

 

使用Viewport Meta Tag

<!-- 設定viewport width等於device的寬度 -->
<meta name="viewport" content="width=device-width">
<!-- 設定初始縮放(scale)為1.0 -->
<meta name="viewport" content="initial-scale=1.0">
<!-- 設定初始縮放(scale)為2.3,且關閉使用者的縮放功能 -->
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">

改變Viewport width

如果設計的網頁寬度是590pixels,則左圖在iOS的Safari看起來就會較窄,所以最好將viewport width設為590pixels,就會像右圖一樣看起來符合版面:

<meta name="viewport" content="width=590">

Webpage is too narrow for default settings

 

也可將viewport width設為device-width

<meta name="viewport" content="width=device-width">

Web application page is too small for default settings

參考資料:
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

[HTML] <article>與<section>

<article>元素用來組織一個獨立的內容區域,例如部落格文章、雜誌頁面的每篇文章。

原文:The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
​Potential sources for the <article> element:Forum post、Blog post、News story、Comment. (資料來源)


<section>元素代表一般性的區域,例如部落格文章分成好幾個一般區域、網站也可分成好幾個一般性的組成區域。

原文:The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. (資料來源)


#1:將一個網頁分成好幾個一般性的組成區域(但不是很好的方式)

section排版

#2:將範例1改成較好的方式,並結合<article>

article與其它標籤的結合

以上有比較瞭解差異了嗎?<article>想像成是一篇部落格文章的話,裡面也可分成各一般性的區域(<section>即可派上用場)。

參考資料:
http://www.htmldog.com/guides/html/intermediate/sectioning/
http://www.w3schools.com/tags/tag_section.asp
http://www.w3schools.com/tags/tag_article.asp