2012年5月30日星期三

讀書心得 : CSS版面設計應用精選

我這兩天看了這本CSS版面設計應用精選

http://www.books.com.tw/exep/prod/booksfile.php?item=0010335358

這本書是2006年的書，算是有點年紀的書了
為了稍稍了解別種方式的css排版方式，還要特地將所有的charset改成@charset "utf-8";
因為那個時候好像還在盛行@charset "BIG5";
雖然我覺得看這種全部都是css跟html的書有點乏味
但是耐心地看完還是頗有收穫的
覺得自己以前排版多排了很多不必要的div
其實很多標籤都可以加id跟class 我常忘記所以以前的做法多些了一些不必要的項目
善用兩者的特性，再加上css的運用
善用，就是省時。
然後後面兩個章節是我覺得很有用的
就是表單跟table的排版
有種得救的感覺從我學網頁以來最討厭表單的排版了
table也是，但是網頁越來越走向table-less的趨勢，table越來越少用了
主要都是以div排版
然後中間有一個章節有介紹到如何在網頁增加文字放大與縮小的功能
這個功能就類似於 yahoo新聞頁面可以看到的字體放大縮小
通常這個功能我所知道的方式是透過javascript來控制你點按的項目
然後去觸發改變css樣式的font-size大小
我自己覺得這個功能非常的不錯啦
因為也要盡量讓網站可以無障礙，雖然有些人覺得大部分的網站不用做的這麼囉嗦，
學會把瀏覽器顯示的百分比放大就好。
(但是書本介紹的這個套件好像只有剛好在網頁顯示100%的時候操作才會正常...)
這個套件的網址在這裡
http://www.alistapart.com/articles/alternate/
他下方可以下載js檔
Download styleswitcher.js
用法與說明也是非常簡單
如果對於文字放大與縮小的功能有興趣的
這本書也有介紹到
接案我最行!javascript & Ajax 商業範例必殺技
這本我是還沒有看過但是我知道裡面有這樣的sample

好吧，總之會看這本書也是剛好有這個時間可以慢慢看
多了解別人的寫法也蠻有用的

2012年5月27日星期日

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

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

一般的網頁在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看到他有預設尺寸可以選擇

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

2012年5月14日星期一

網頁照相的好工具

如果我沒記錯的話我明天應該是要上班。

但是現在精神有點好，來發個文好了。這個工具非常適合網頁工作者，不管是設計師還是工程師，我們都會需要把網頁的畫面擷取下來，如果用瀏覽器放大縮小，畫面可能會因為字體的比例而很難看(圖還好)，然後就要很辛苦地先截一部分的圖，再截令一部分的圖，然後再接起來，然後再轉存成jpg還是png等等，總之，過程就是麻煩兩字的可以形容相信任何再做網頁作品還有做畫面demo的人應該都會用到。廢話不多說，就是這個網站 :

http://www.webpagescreenshot.info/

(因為我沒有其他瀏覽器... 所以不是使用google chrome的可以試試看?)
按下下載後會先到google webstore 線上應用程式商店
然後再選擇加到chrome
成功加入後你的瀏覽器就會跟我一樣出現這個小icon

操作很簡單就不多說明，
網站跟google webstore都會說明。
不過這個工具可能要使用google chrome瀏覽器的樣子

2012年5月13日星期日

PHP 的脫逸(跳脫)字元

這個嘛
所謂的脫逸字元就是不能直接放在雙引號裡面的字元
如果你要顯示 echo "hello 我是"win"" ;
這樣是會被警告語法錯誤的，為什麼呢?
也就是要在雙引號裡面再顯示雙引號，你必須要用\來跳脫他原本的規則，顯示正常的"win" 字樣。
通常在網頁顯示用的，比較常用到的都是\" 拖逸雙引號或是\\ 反斜線

拖曳字元	用途
\n	換行
\r	歸位跳回行首
\"	雙引號
\\	反斜線
\$	$符號
\v	垂直tab
\t	水平tab
\{	左括弧
\}	右括弧
\[	左方括弧
\]	右方括弧

PHP 的圓餅圖是怎麼畫的?

說到這個網頁上的圓餅圖
好像很少聽到有人是自己畫的

因為這樣實在有點麻煩，現在網路上這麼多別人寫好的API或是javascript可以畫得真的很多
只要會用就能產生美美的圖。
像google Chart https://developers.google.com/chart/
還有highcharts http://www.highcharts.com/
highcharts做出來非常的漂亮，但是當遇到不同瀏覽器使用他的圖下拉選單就被擋了 xd 這是過去聽說過的經驗xd
所以...要美 ? 要穩定 ? 選一個是嗎xd

但是google chart api好像有限制每天使用的次數，如果你一天使用太多次(約略上萬)，google可能會寄信給你xd

google chart的用法我個人很喜歡，設定很好理解，應該之後會再寫一篇怎麼用去google chart api的筆記。

不管了，我曾經看過一本很久以前的php書，它裡面有提到圓餅圖是怎麼畫的
大概的流程像這樣 :

這個我不知道是不是有一定的流程才能畫出圓餅圖。

但是我知道先定圓心，然後要知道這個扇形的角度，另外還要把角度轉換成弳度
弳度 = (角度*3.14)/180 應該是這樣沒錯

還要取得另外兩端的座標 (X1,Y1) (X2,Y2)

後面的處理，其實都是用物件導向的方式去做，可能還要會GD，
要定義一些function

然後類別

這樣說起來有點攏統。但是其實我只是想知道方法，並沒有要去實作的意思。
畢竟我是覺得用之前，還是要先懂一點。

提供一下關於圓餅圖還不錯的文章:

http://my-web-design.blogspot.com/2009/07/phppie-chart.html

在PHP中繪製圓餅圖(pie chart)

http://blog.jsdan.com/2683?doing_wp_cron=1336838906

只有 PHP 才能做圓餅圖? Google 說他也行!

https://sites.google.com/site/rprojectnotes/examples/basic_graphics/pie_charts
2D 圓餅圖

2012年5月6日星期日

TQC project 302

此播放清單為準備TQC project2007的考試，純粹練習的過程紀錄，可供參考。若有侵權，煩請告知，謝謝!。若覺解析度不夠請調整影片至720p 會有更好的品質

TQC project 301

2012年5月5日星期六

W3C的標記驗證服務

(=>就是這個標籤! )

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