發表文章

目前顯示的是 五月, 2012的文章

讀書心得 : 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

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

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

圖片
好久沒發文章了,自從去台北之後...

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


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

網頁照相的好工具

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


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





















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

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 圓餅圖

TQC project 302

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

TQC project 301

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

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

TQC+ Flash cs4 202

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

TQC+ Flash cs4 203

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

TQC project 210

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

TQC project 205

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

TQC project 204

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

TQC project 203

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

TQC project 202

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

TQC project 110

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

TQC project 109

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

TQC project 107

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

TQC project 104

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