假內文產生工具(網站)

http://www.lipsum.com/ (上圖截圖自http://www.lipsum.com/網站)
這個網站挺有趣的，
可以用在.... 做網站的prototype,需要塞一段看起來很像真實文章的文字
可以用這個網站來產生很多的文章段落，
雖然是沒有什麼意義的內文，
但是看來有是有幾分逼真，
(總比用手key出一堆奇奇怪怪世界上不存在的單字，還要來的真實)
我覺得這挺實用的，還多國語系~

[分享]給設計師的jQuery教學

http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
給設計師的jQuery教學
這個網站很不錯，非常實用，顯淺易懂，而且幾乎常見的效果都有。
總共有10種效果的教學。

[資料蒐集] 台灣有Frontend 職稱的公司

Front-end Web Developer = 前端工程師
以下是我個人的資料蒐集，並不代表全部
台灣有Frontend 職稱的公司 :

• 美商謀智（Mozilla）
• 美商網碩科技
• 春樹科技股份有限公司
• 網勁科技股份有限公司
• 願境網訊股份有限公司(KKBOX)
• 華碩電腦股份有限公司
• 香港商雅虎資訊股份有限公司(Yahoo!奇摩)
• 英屬維京群島商台灣集購城有限公司台灣分公司
• 阿碼科技股份有限公司 
• 口袋資訊股份有限公司
• 紅谷資訊股份有限公司
• 鑫箱創意有限公司
• 雲永科技股份有限公司
• 我在資訊股份有限公司 
• 曼克斯數位娛樂有限公司(籌備處)
• 飛迅設計有限公司

比例上來看，北部有此職稱的工作較多，南部少。
其實這份清單早在我畢業前就準備好了，今天早上整理Google文件時想說來發篇文章好了，順便把放在google的文件給刪了。
在台灣，有這個職稱的公司不多，而在很多其他國家，前端已經殺出成為一個專門的職稱了。一直到我快要畢業，想要開始準備找工作時，才聽過這個職稱，但當時，很多技能，我已經來不及學了，大三到大四兩年的努力，仍然不及資工資管的二分之一吧.....
尤其當我第一次打開人力銀行搜尋"前端"這個職稱的時候，筆數不超過20筆，真是嚇傻了眼...
說實話那時候很擔心找不到工作。現在只一直希望自己可以當個...好厲害的前端 > < ，但路還很長，前端要學的東西，遠遠超乎我的想像。但我不想要自己20出頭"只有這樣"，現在只能努力了

提供介面設計草圖範本的網站-interfacesketch.tumblr.com

上圖截圖自: http://interfacesketch.tumblr.com/ 

今天收到Smashing的電子報，介紹了這不錯的網站http://interfacesketch.tumblr.com/
這個網站提供了各種平台的設計草稿圖，方便設計者，或是UX使用，設計/規劃出模板，簡單的規畫等等。前提是，可能要印出來。
網站所提供的格式是PDF，分為A4大小或是US-letter。
enjoy it.

如何看到自己html的Outliner(大綱)

-有條不紊的網頁的大綱對於SEO是很有幫助的，像寫企劃書的目錄一樣，可以讓用戶對於這個網站有很清楚的概覽。
-過去編輯html應該常使用h1~h6來編輯自己的網頁大鋼，即便不是使用h1~h2，也會用一些比較有別於div或span或p的標籤來顯示大鋼，如dl,dt,dd等;ul,li...等等。但過去的我並不是這樣，但我也忘記我以前怎麼做的了，自從看了這篇HTML大綱算法對結構的影響(<-很推薦)，我覺得幫助很大。

工具在此請參考 :

---

0) HTML大綱算法對結構的影響

1) Chrome Web Store - HTML5 Outliner   作者：Dominykas Blyžė

2) http://gsnedders.html5.org/outliner/

但這個使用後會出現亂碼，建議不要先不要用中文貼過去，而使用英文。

沒有Loading用的gif圖檔嗎? 可使用 Ajaxload - Ajax loading gif generator

今天在網路上看到一個還不錯用的網站 http://ajaxload.info/

可自動產生gif的loading動畫

若download下來是一個gif動畫檔

可選擇 loading的效果樣式 等... 

-end 

好用的程式碼編輯器Sublime Text

Sublime Text
昨天同事介紹給我的這個編輯器，試了一下真的很好用呢。
真的是繼notepad++之後名列第二個我最愛的編輯器了，介面好看也比較不傷眼睛，
folder資料夾管理也很好用，
用起來就很想學好東西(開玩笑的，沒這麼誇張xd)。

-推薦給正在尋找好用文字編輯器的朋友們。

超實用的css漸層"按鈕"產生器->css3pie

快速連結到css3pie http://css3pie.com/

超實用的css漸層產生器

廢話不多說之超實用的css漸層產生器連結網址(go!): http://www.colorzilla.com/gradient-editor/

網路演進的教學網站

這是昨天上網時的新發現
這個網站提供了網路演進的時間圖表  http://evolutionofweb.appspot.com/?hl=zh-tw
非常明瞭的網路演進圖，算是很好的教學網站
他總共分為兩大項 分別為"瀏覽器與技術" ''網路發展史'
真的很受用，可以看一下

製作群Google Chrome 小組的部分成員2011 與 2012 版作者：Hyperakt 和 Vizzuality2010 版作者：mgmt design 和 GOOD資源Wikipedia、CanIUse.com、W3C、HTML5rocks.com 及 Mozilla Developer Network資訊圖表中的瀏覽器螢幕擷取畫面全都是網路社群的心血結晶。

Zen coding for notepad++ Download

Zen coding 是一套極速的css與html開發工具
常使用notepad++開發的人或許會很需要他
第一次接觸到這個zen coding的時候深覺他實在太重要了
zen coding提供很多文件編輯器的外掛安裝
其中notepad++的zen coding外掛網址如下 :

下載網址: http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Notepad%2B%2B.v0.7.zip

Zen Coding cheat sheet (PDF)下載網址:http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf

安裝方式解壓縮後裡面有個.txt檔會說明
其實只是搬資料到notepad++根目錄裡面的plugins資料夾而已

• 參考文件 : 

Zen Coding - 極速開發HTML最重要的利器之一

http://code.google.com/p/zen-coding/

[引用] 網頁前端設計師的等級表

此篇文章引用自 :
三木聊網頁前端設計 - 網頁前端設計師的等級表
看了一下，我大概只有.... 3顆吧...好low~
害我好緊張開始研究一下css framework..

一顆星：

1、網頁佈局為TABLE+CSS，僅以頁面排版順利為考量，沒有考慮程式套版邏輯，且沒有下注解供程式設計師參考。
2、CSS都寫在HTML的局部元素裡面。
3、過度依賴網頁編輯軟體，導致對於HTML語法一知半解。
4、Javascript是什麼？能吃嗎？
5、不曉得圖片格式的差異與使用時機(jpg、gif、png)。
6、相容瀏覽器僅符合單一瀏覽器。

二顆星

1、網頁佈局為TABLE+CSS，TABLE的數量也變得較少，且有和程式設計師合作經驗。
2、CSS寫在HTML裡的head的style標籤裡面。
3、對於HTML已有一定的認知，並了解H1、2、3標題、ul li序列等等的實際運用。
4、了解Javascript是網頁腳本的一種，且會用網頁編輯器的內建程式碼來做圖片變換與上網查詢小程式(線上流量、跑馬燈、禁右鍵)後，將功能程式碼貼到自己的網頁裡。
5、了解什麼時候該使用gif、png等透明背景的圖片，且會用圖片處理軟體來將圖片大小壓到最低但畫面仍不失真。
6、可相容大部分的瀏覽器，但不曉得該如何針對各瀏覽器來做細微的調整。

三顆星

1、網頁佈局為DIV+CSS，但對於清除浮動、DIV定位、某些特定瀏覽器的常見BUG仍處於似懂非懂的理解狀態。
2、了解該如何由外部匯入CSS來修改，而不是寫在HTML裡面。但對於該如何優化縮減自己的CSS數量仍還在逐步學習的階段。
3、在HTML上已有相當的水平，可藉由CSS來讓HTML元素擁有更多變化。
4、已些微看得懂Javascript碼，了解基本的dom操作。
5、因了解css 的background的語法操作，故在切圖時，了解哪些圖片可使用重覆背景來呈現畫面。
6、會使用css hack來解決特定瀏覽器的bug，且逐步學習該如何排版才能夠避免寫過多的css hack。

四顆星

1、網頁佈局為DIV+CSS，對於BOX概念、清除浮動、各瀏覽器常見bug等等擁有相當的水準。
2、了解該如何將css優化，在其排列與註解的整理上已相當成熟。並至少懂得一個以上的css framework的概念(960 Grid、Blueprint)。
3、了解該如何使用最少的HTML+CSS碼來達成畫面的需求。
4、至少懂得一個以上的Javascript framework的概念，並達成前端動態操作的網頁需求。 (yui、jquery)。
5、了解Css sprites的概念，降低Http圖片請求數量。
6、除了常見IE與Firefox瀏覽器外，對於其他台灣市佔率偏低的瀏覽器也可相容(google、safari、opera)，且開始逐步學習其他前端裝置的CSS相容。例：mobile、pda。

五顆星

1、網頁佈局為DIV+CSS，擁有自身經驗培養出來的framework概念流程，以增進其開發效率。
2、CSS架構語義完善，(X)HTML+CSS可通過W3C標準。
3、了解該如何架構自己的HTML，才可在SEO網頁排名更加優化。
4、可降低Javascript數量，並視專案開發撰寫相關代碼。

fancybox如何使用

fancybox如何使用
首先請先到官網下載fancybox的壓縮檔
http://fancybox.net/
下載rar壓縮檔到你的網站目錄底下，
比方說我的網站叫做myweb，而這個壓縮檔就要放在myweb裡面

然後呢，將他解壓縮，只留下文件檔就好

接著打開這個jquery.fancybox-1.3.4資料夾 :

可以看到裡面有很多檔案
index.html 就是示範檔，點開後可以看到很多範例

可以看到總共有12張小圖，然後還有下面的範例，我們只需要留一種範例就可以知道其他的原理了，首先先以notepad++開啟index.html編輯這個檔案，我們刪掉<body>與</body>之間其他語法，只留下

<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>

另外<script type="javascript">與</script>之間只留下

<script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
</script>

修改完後的html檔如:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
    </script>
</head>
<body>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</body>
</html>

修改完後按下存檔在瀏覽一次，這時候只會剩一張圖片跟一種特效，

所以，一張圖片之所以可以套用的facnybox的原因有很2種:

第一，在<head>標籤裡要嵌入fancybox的css檔案與javascript檔案
這幾個是必遷入的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

第一個是jquery的套件
第二個是mouseweel效果的javascript套件
第三個是這個fancybox的效果套件
第四個是fancybox的css檔

第二，要套用效果的圖片要有<a id="一個名稱">
如這張圖是  <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
他的id是example4，那麼相對應的<script></script>標籤裡面也一定要有jquery去選取這個$example4，然後設定他的效果。
像這個範例中就是example4

$(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });

至於需要的甚麼樣的效果，或者是跳出來的長寬多少想要自己設定，網站上或是原本其他的example都多多少少可以看出他的設定方式，可以看他的api設定方式 http://fancybox.net/api

如何查詢自己的IP位置

開始==>執行==>輸入CMD==>再輸入ipconfig

測試SyntaxHighlighter

  alert('hello syntax');

測試SyntaxHighlighter
我也想要在部落格貼上一行一行的程式碼
所以去網路找了一下這個方法
教學請看這篇: [BH] 幫 Blogger 加上 "SyntaxHighlighter" 的功能
SyntaxHighlighter網站
FORMAT MY SOURCE CODE FOR BLOGGING  ->這個網站很好用，可以幫你轉javascript語法
注意貼上語法時要避開< > 這兩個符號，要用「&lt;」和「&gt;」替代。

[補充@20130107] http://codeformatter.blogspot.tw/ 這個網站也是轉換程式碼的格式可以發佈在blogger，也是非常好用!

Adobe CS6出來了!

http://www.adobe.com/tw/downloads/

Adobe CS6已經出來了!
不過..我還沒試過 有點傻眼  5.5的dw我都還沒摸熟 6就出來了...
有興趣的話就先去下載試用版吧

前端工程師必備工具包

今天網路上看文章發現了不錯的資源
WEB前端开发工程师必备工具包(web frontend development tools)
哼哼~ 這篇  非常厲害
我覺得這已經不是只有前端開知道的事，是想做網頁的人都該知道的事
而且裡面還提到"不要告訴我你只知道使用firebug"....
我瞬間天打雷劈
我連firebug都沒用過 只用過ITtester (倒地) 而且還沒有中文化過...
這麼多工具我還沒用過幾樣
只是個參考  有興趣可以多嘗試~

另外這篇也很不錯:
如何成為一個好的前端工程師(Front-end Engineer)

網頁版面設計的大小尺寸參考

好久沒發文章了，自從去台北之後...

一般的網頁在photoshop設計的時候大家版面都開多大呢?
我通常都是開1024*768那個 不過為了好看 768我會再調高一點讓內容豐富
不過今天看書的時候看到了一段開版尺寸參考，也給大家參考看看，參考而已啦，畢竟這本書也有點年紀了

螢幕 800*600 (SVGA) 的  可以看到的網頁尺寸是 760*420 
(這個尺寸應該是很少用了，我剛剛開photoshop cs5已經沒看到這個預設的尺寸了)

螢幕 1024*768 (XGA)的 可以看到的網頁尺寸是 955*600  
(1024這也是我很常用的尺寸，因為還是要顧及不是寬螢幕的使用者)
也就是說如果再photoshop開版是1024*768的話，可以取中間955px的片段為內容
高度我倒是覺得600有點少了xd
寬度比較重要

螢幕 1280*1024 (SXGA) 的 可以看到的網頁尺寸是 1240*844

螢幕 1600*1200 (UXGA)的 可以看到的網頁尺寸是 1560*1020 

這四者的尺寸至今都很常用，還可以在photoshop看到他有預設尺寸可以選擇

 總之就盡量拿捏吧，版面大小不是重點，以使用者的最佳感受程度為標準，才是我覺得重要的事

W3C的標記驗證服務

(=>就是這個標籤! )

網址 :  http://validator.w3.org/
之前在網站偶爾會看到某些比較國際化一點的網站，下方的#footer或是左右側的連結列可以看到這樣的W3C的標誌，原來W3C也可以認證，有點類似無障礙網站那樣的驗證，反正就是檢測你有沒有通過那樣的標準，貼上你的網址他會就幫你解析你能不能通過了。



我好奇的貼上以前做的專題網址，竟然有29個error，別擔心下面會列出是哪29個error，他還會告訴你是那裡有問題。真不錯，接下來要不要用就看作的網站有沒有這個需要了。

網站版權的正確寫法

最近上網看文章竟然發現所謂的網站版權的正確寫法，
是有點大驚小怪，不過原來#footer的版權是有一定的寫法，
看來做網站可以的話也盡量往標準為主搂!

以下內容引用自 : 

http://injerry.pixnet.net/blog/post/41729527

正確的格式應該是：Copyright [dates] by [author/owner]

© 通常可以代替Copyright，但是不可以用(c)。 All Rights Reserved 在某些國家曾經是必須的，但是現在在大多數國家，都不是法律上必須有的字樣 參見下面幾個正確的格式： ©1995-2004 Macromedia, Inc. All rights reserved. ©2004 Microsoft Corporation. All rights reserved. Copyright © 2004 Adobe Systems Incorporated. All rights reserved. ©1995-2004 Eric A. and Kathryn S. Meyer. All Rights Reserved.

這篇也非常的詳細 :

http://blog.yam.com/laibear/article/40020064