2011年9月7日

臉書可以按"爛"了~~

無意間發現
過去的臉書只能按讚
但現在用了goolge的最新外掛
除了讚 (like)
也可以點爛了(dislike)

有機會可以來玩玩看

不過這是chrome獨有的功能
記得裝chrome喔(google瀏覽器)

測試一下 馬上就可以按 爛(like) 了

外掛下載網址如下~
http://www.fbdislikebutton.net/

2011年8月25日

Google自訂搜尋的限制條件

之前幫忙作網頁需要用到google自訂搜尋
不過對方要求希望呈現的結果只在他門的網域下
這時設定就可以這樣玩

在選擇的時候先選第二個
之後可以照以下的模式進行設定



找到單一網頁
www.example.com/



可以找到

www.example.com/

example.com/

找到所有以 www.example.com 或 example.com 開頭的網頁:
www.example.com/*

可以找到

www.example.com

www.example.com/stamps

找到所有在www.example.com/ or example.com/下並含有文字 "kites"
www.example.com/*kites


可以找到

www.example.com/kites.html

www.example.com/kites/page2.html




找到所有以www.example.com/product.asp 為開頭並有參數'cat=Elec'

www.example.com/product.asp*cat=Elec

可以找到

www.example.com/product.asp?sku=20283&cat=Elec


找到所有以www.example.com/開頭並包含 "kites" 與 "fly"的網頁


www.example.com/*kites*fly

可以找到
ww.example.com/kites/howto/fly.html
www.example.com/fly/howto/kites.html


找到在example.com子網域下的所有網頁
*.example.com/*

可以找到
www.example.com/stamps

host.parent.example.com/kites

2011年8月23日

Linux網頁上傳出現亂碼?可能是BOM搞的鬼

最近處理的問題,在windows下開發的網頁一上傳Suse後全部變成??與亂碼
一開始以為是語系設定的問題
仔細一追才發現是BOM的問題

BOM為Byte Order Mark的縮寫
會以字元的形式顯示在檔頭,他的作用是,告訴程式:林盃是UTF-8
,而在windows下的記事本,DW都會自動幫你加上去
問題來了
這種東西雖然方便
Linux卻不一定看得懂,結果一解析變成為亂碼

假如你寫的是php,想要送header會更慘,因為BOM會被當成顯示字元(header必須先於任何畫面呈現之前)
有BOM會造成Header無法作用的情形

client端解法是要存檔時使用無BOM的形式,有幾套軟體可以幫你去除BOM
我是推NotePad++

只要點一下,馬上把UTF-8的BOM去除


GG!!

全世界的IE8都在跑版,對於IE8跑版的速解


最近碰到的,一個網站好好的,不論在chrome或是firefox下都顯式正常

結果一到IE8下就跑版,這樣改也跑那樣改也跑

原來過去IE不鳥W3C標準,許多網站也不合標準

他們開始改標準後,才成為設計師的噩夢

目前現行IE至少有三種模式

Quirks模式 (IE6,對不合標準的網頁套用),IE7標準與IE8標準模式
雖然IE8有相容性的選項,但能讓網頁自動判斷是更好

解決這個問題的,便是IE的meta標籤
<meta http-equiv="X-UA-Compatible" content="IE=7" />
後面content可以接的內容如下,


以下適用server環境

  1. IE=EmulateIE8
  2. IE=EmulateIE7
其中server會根據Webserver( iis  or apache)的設定,判斷網頁是否符合標準決定是否自動執行模擬或套用Quirks模式,也就是自動判斷的意思

以下三者則適用單獨網頁

  1. IE=7
  2. IE=8
  3. IE=6
Hope it helpful

2011年8月11日

PHP-如何讓頁面自動下載

一般使用網頁時,若是預設,則除非是壓縮檔,不然瀏覽器通常會預設用瀏覽器開啟
但若要人下載,怎麼辦
因為工作上需要做到這個功能
上網survey了一下
原來是利用header的設定

設定-Content-disposition: attachment
即可
這樣程式看起來會像
<?php

header('Content-disposition: attachment; filename=名稱'); //存檔會出現的名稱
header('Content-type: MIME型態); //可參照前一篇的速查表
readfile(檔案位址); //
?>

像我是要讓他下載html,所以mime就設text/html

實際寫出來就像

.....
header('Content-disposition: attachment; filename=$title.html');
header('Content-type: text/html');
readfile('$url');
.....



Php- MIME Types速查表

最近寫PHP需要用到的
查了一張
附上來~~


附檔名MIME Type
323text/h323
*application/octet-stream
acxapplication/internet-property-stream
aiapplication/postscript
aifaudio/x-aiff
aifcaudio/x-aiff
aiffaudio/x-aiff
asfvideo/x-ms-asf
asrvideo/x-ms-asf
asxvideo/x-ms-asf
auaudio/basic
avivideo/x-msvideo
axsapplication/olescript
bastext/plain
bcpioapplication/x-bcpio
binapplication/octet-stream
bmpimage/bmp
ctext/plain
catapplication/vnd.ms-pkiseccat
cdfapplication/x-cdf
cdfapplication/x-netcdf
cerapplication/x-x509-ca-cert
classapplication/octet-stream
clpapplication/x-msclip
cmximage/x-cmx
codimage/cis-cod
cpioapplication/x-cpio
crdapplication/x-mscardfile
crlapplication/pkix-crl
crtapplication/x-x509-ca-cert
cshapplication/x-csh
csstext/css
dcrapplication/x-director
derapplication/x-x509-ca-cert
dirapplication/x-director
dllapplication/x-msdownload
dmsapplication/octet-stream
docapplication/msword
dotapplication/msword
dviapplication/x-dvi
dxrapplication/x-director
epsapplication/postscript
etxtext/x-setext
evyapplication/envoy
exeapplication/octet-stream
fifapplication/fractals
flrx-world/x-vrml
gifimage/gif
gtarapplication/x-gtar
gzapplication/x-gzip
htext/plain
hdfapplication/x-hdf
hlpapplication/winhlp
hqxapplication/mac-binhex40
htaapplication/hta
htctext/x-component
htmtext/html
htmltext/html
htttext/webviewhtml
icoimage/x-icon
iefimage/ief
iiiapplication/x-iphone
insapplication/x-internet-signup
ispapplication/x-internet-signup
jfifimage/pipeg
jpeimage/jpeg
jpegimage/jpeg
jpgimage/jpeg
jsapplication/x-javascript
latexapplication/x-latex
lhaapplication/octet-stream
lsfvideo/x-la-asf
lsxvideo/x-la-asf
lzhapplication/octet-stream
m13application/x-msmediaview
m14application/x-msmediaview
m3uaudio/x-mpegurl
manapplication/x-troff-man
mdbapplication/x-msaccess
meapplication/x-troff-me
mhtmessage/rfc822
mhtmlmessage/rfc822
midaudio/mid
mnyapplication/x-msmoney
movvideo/quicktime
movievideo/x-sgi-movie
mp2video/mpeg
mp3audio/mpeg
mpavideo/mpeg
mpevideo/mpeg
mpegvideo/mpeg
mpgvideo/mpeg
mppapplication/vnd.ms-project
mpv2video/mpeg
msapplication/x-troff-ms
msgapplication/vnd.ms-outlook
mvbapplication/x-msmediaview
ncapplication/x-netcdf
nwsmessage/rfc822
odaapplication/oda
p10application/pkcs10
p12application/x-pkcs12
p7bapplication/x-pkcs7-certificates
p7capplication/x-pkcs7-mime
p7mapplication/x-pkcs7-mime
p7rapplication/x-pkcs7-certreqresp
p7sapplication/x-pkcs7-signature
pbmimage/x-portable-bitmap
pdfapplication/pdf
pfxapplication/x-pkcs12
pgmimage/x-portable-graymap
pkoapplication/ynd.ms-pkipko
pmaapplication/x-perfmon
pmcapplication/x-perfmon
pmlapplication/x-perfmon
pmrapplication/x-perfmon
pmwapplication/x-perfmon
pnmimage/x-portable-anymap
potapplication/vnd.ms-powerpoint
ppmimage/x-portable-pixmap
ppsapplication/vnd.ms-powerpoint
pptapplication/vnd.ms-powerpoint
prfapplication/pics-rules
psapplication/postscript
pubapplication/x-mspublisher
qtvideo/quicktime
raaudio/x-pn-realaudio
ramaudio/x-pn-realaudio
rasimage/x-cmu-raster
rgbimage/x-rgb
rmiaudio/mid
roffapplication/x-troff
rtfapplication/rtf
rtxtext/richtext
scdapplication/x-msschedule
scttext/scriptlet
setpayapplication/set-payment-initiation
setregapplication/set-registration-initiation
shapplication/x-sh
sharapplication/x-shar
sitapplication/x-stuffit
sndaudio/basic
spcapplication/x-pkcs7-certificates
splapplication/futuresplash
srcapplication/x-wais-source
sstapplication/vnd.ms-pkicertstore
stlapplication/vnd.ms-pkistl
stmtext/html
sv4cpioapplication/x-sv4cpio
sv4crcapplication/x-sv4crc
svgimage/svg+xml
swfapplication/x-shockwave-flash
tapplication/x-troff
tarapplication/x-tar
tclapplication/x-tcl
texapplication/x-tex
texiapplication/x-texinfo
texinfoapplication/x-texinfo
tgzapplication/x-compressed
tifimage/tiff
tiffimage/tiff
trapplication/x-troff
trmapplication/x-msterminal
tsvtext/tab-separated-values
txttext/plain
ulstext/iuls
ustarapplication/x-ustar
vcftext/x-vcard
vrmlx-world/x-vrml
wavaudio/x-wav
wcmapplication/vnd.ms-works
wdbapplication/vnd.ms-works
wksapplication/vnd.ms-works
wmfapplication/x-msmetafile
wpsapplication/vnd.ms-works
wriapplication/x-mswrite
wrlx-world/x-vrml
wrzx-world/x-vrml
xafx-world/x-vrml
xbmimage/x-xbitmap
xlaapplication/vnd.ms-excel
xlcapplication/vnd.ms-excel
xlmapplication/vnd.ms-excel
xlsapplication/vnd.ms-excel
xltapplication/vnd.ms-excel
xlwapplication/vnd.ms-excel
xofx-world/x-vrml
xpmimage/x-xpixmap
xwdimage/x-xwindowdump
zapplication/x-compress
zipapplication/zip

2011年8月9日

活動-點三個讚 = google+邀請函

因為發現我可以發邀請函,所以特別開了一個活動來發~
不過因為要發,也請好朋友一起幫幫忙我最近實驗性的粉絲團~

1.先把三個讚依序點一次,不要怕,只是我的粉絲團而已= =,不會吃人的
(如果沒有出現要等一下,他要讀~~)







2.ok的話請在下面留言留下你的e-mail~我會寄邀請函給你,數量有限,發完就沒了

分享-chrome外掛幫你同步FB+plurk+推特+google +


https://chrome.google.com/webstore/detail/aamklbolfkledofgpbdllkangemkfdnb?ct=recommended#

最近開始整合自己的twitter+google plus+ plurk+facebook
事實上 plurk本身已經有整合twitter與fb的功能
但限制就是必須使用plurk
今天無意翻到一個可以雙向整合的套件
只要安裝chorme 就可以享受四個網站同步的快感
重要的是快速更新動態 省時間
不想一天到晚來回更新
有興趣的人可以玩玩看喔

成功後就可以選擇要同步的社群
剛試過~成功了
有興趣就試試吧


2011年8月8日

轉-假新聞:IE瀏覽器用戶智商低

雖然看到時我著實開心一下(IE是網頁開發人員的噩夢)
但想不到是假的~~
這故事告訴我們網路上的資料真是要非常謹慎對待呀

------------------------------------------

周三(8月3日),一條特搶眼的新聞「Internet Explorer瀏覽器用戶的智商更低」廣為流傳,誰也沒料到這是一條假新聞。
包括BBC,CNN, 《每日郵報》、《每日電訊報》和《福布斯》雜誌在內的各大主流媒體都被報道了這條假新聞。雖然不知道幕後主使和其意圖,但該條假新聞讓這些主流媒體面上無光。
假消息援引一家名為ApTiquant的加拿大心理測量公司的研究,稱他們邀請了10萬互聯網用戶參加智商測驗,並將這些檢測結果與他們所選的互聯網瀏覽器進行對比,從而堂而皇之得出「IE用戶智商更低」的檢測推斷。
事實證明,ApTiquant來路可疑,一些持懷疑態度的BBC讀者發現該公司只是在上個月才有了自己的網站。
此外,登陸該公司網站,點擊瀏覽其團隊介紹的內容,列出的一些成員的照片也是假的。這些照片都來自一家名為Central Test的法國公司,只是將人名更換了。
BBC當初在發表那則假新聞時,也曾試圖求證其它觀點,採訪了劍橋大學統計實驗室的教授戴維·斯皮格霍爾特(David Spiegelhalter),他當時說:「這些數據不大可信,而且是對IE瀏覽器用戶的侮辱。」
看來,生活在這個抓眼球、搶新聞的年代,孰是孰非,如何把握分寸,越來越難拿捏

雜記-最近在寫的

最近在學習ror,順便學著用ror+jquery寫一些ajax聊天室+留言版
似乎是快速的個性使我愛上這兩種快速的語言
習慣之後寫php真的有那麼點不習慣

最近應公司要求在學R語言,但我對死板生硬的東西真是興趣缺缺
我想我雖然是網頁程式設計師但骨子裡還是個藝術家

2011年8月4日

分享~跑HTML5 你的瀏覽器幾分?

HTML5推出已經一陣子了
除了很多過去網頁沒有的酷炫功能
甚至還想成為flash的勁敵

跟大家分享一個網站

http://html5test.com/

他會根據你的瀏覽器一一測試吃HTML5的功能

N實際測了一下最愛用的chrome 結果分數是...

450分的滿分,我得到328分

看起來不高
不過呢,看看他的統計資料

目前的分數是






Google Chrome12.0.74232713
Opera11.502967
Mozilla Firefox5.02869
Apple Safari5.0.52537
Microsoft Internet Explorer91415

顯然大家還是要加油才行
而最令網頁設計師髮指的IE家族則是


Google Chrome11.0.69632713
Mozilla Firefox4.0.12869
Opera11.112787
Mozilla Firefox3.6.181794
Mozilla Firefox3.5.161664
Mozilla Firefox3.0.10730
Microsoft Internet Explorer8.0410
Microsoft Internet Explorer7.0260
Microsoft Internet Explorer6.0250


喔...恩,看來還有得拼...
有機會大家去玩玩看喔

http://html5test.com/

2011年8月2日

轉:研究指使用IE瀏覽器用戶 平均智商較低

網路上看到的新聞
雖然對不起眾多的IE使用者
但還真是大快人心
畢竟身為網頁程式設計師與網頁設計師
IE真是大家共同的痛
而又有很多奇怪的客戶/使用者只會用IE
一下程式不能跑一下跑版
一下東西不能存
一下css不支援
為了IE可以一個小時弄完的東西搞不好要弄上一天
所有IE的bug都推到程式人員的身上了
所以 親愛的IE使用者

IE真的部是唯一的選擇
來試試chorme得寬敞與快速的流暢感
或是firefox 充滿有趣外掛的世界吧
你一定會愛上他們的
而且IE有嚴重的安全漏洞



〔本報訊〕美國市場調查公司AptiQuant最近針對瀏覽器做一項比較研究,卻有驚人發現,使用不同瀏覽器的人智商也有高低差異,其中Internet Exploer瀏覽器的使用者智商相較於使用其他例如Firefox、Chrome等瀏覽器的人還要低上許多。

AptiQuant分別針對2006年和2011年來做比較,發現2006年使用瀏覽器的人智商沒有太大差異,平均都在100上下,而當時的瀏覽器也僅有IE version 6、IE version 7、Firefox、Safari和Opera。

不過,有趣的是,到了2011年,卻開始顯現出不同的智商,其中以使用IE系列的人智商最低,使用Opera的人智商最高。智商第二高的則是使用Camino瀏覽器的人,第三高為使用Chrome框架的IE瀏覽器用戶(IE with a Chrome Frame)。

AptiQuant也提出分析,使用IE瀏覽器者智商偏低是因為用戶數量過於龐大,為其他瀏覽器的2倍,導致該群體智商更趨於人類平均值,另外,IE為「原始設定」的瀏覽器,其中高達95%的使用者不懂得如何下載和安裝一個新的瀏覽器,也因此將整體的平均值拉低



加拿大公司 AptiQuant 最新的一份調查報告,嘗試找出使用者的 IQ 與平常使用哪一家瀏覽器之間的關聯性。結果顯示,選用 Opera 的使用族群最聰明,緊接在後的為 Camino,以及在 IE 使用 Google Chrome Frame 插件的使用者。

Safari 、Chrome 、 Firefox 分別位居四、五、六名,所有 IE 使用者則敬陪末座。其中,平均 IQ 最低的是 IE6 的使用族群。

AptiQuant 認為,這份研究顯示了認知能力與選用瀏覽器之間的關聯性。或許也反映了聰明的人傾向勇於嘗試新事物?但也只是個參考。如果真的很在意調查結果,不妨趁此機會換個瀏覽器吧。


http://thenextweb.com/shareables/2011/07/28/study-proves-that-ie-users-are-dumber-than-those-who-use-opera-and-chrome/


 如果你想看又酷又炫的效果 不能用IE 因為CSS3有一半以上他不支援

http://css3.zxq.net/doraemon/doraemon_css3.html

這是日本人用CSS3畫的小叮噹,在chorme與opera下都會非常漂亮
但在IE下就...


這讓我想起網路上流傳的一首歌
IE對程式設計師真的很差






請大家勇於嘗試新瀏覽器!!

ror的部分模板

在ror中可以將重複的部分變為部分模版並用
render的方式引入

部分模板的名稱要以_開頭
如 _test.html.erb

而render則要用
<%= render :partial => "test" %>

有時候我們希望傳遞模板特定的資料
則可以使用:locals傳遞變數

<%= render :partial => "test", :locals => { :name => N, :gender => 2 } %>

local變數由locals[:變數名]讀取即可

在controller操作時
有時候我們不希望傳回的東西改到網頁,只抽換頁面
則在controller中我們可以不用render

改用
replace(id, *options_for_render)
replace_html(id, *options_for_render)
參數與render相同,但要指定物件ID
replace針對整個html抽換
replace_id則是抽換內容

2011年7月29日

Ror-Ror的路徑問題

ror下有很多helper可以幫你生成tag
但對於習慣html語法的人實在是不習慣
好在仍有能使用一般html的方式

關於圖片
在ror下
若要取得public資料夾下的東西
只要在路徑上用 /即可
比方若public路徑下面有一個目錄pic下有一張圖bg.jpg

則url 設定為 /pic/bg.jpg即可

若要取得特定controller的action
則以
/controller/action的形式
比方若不想要用form_tag
則可在form標籤的
action設 "/controller/action"
一樣有類似的效果

2011年7月26日

RoR-建立關聯(1) has_one,has_many & belong_to

ror的model利用 has_many和belong_to來建立關聯

假設有兩個物件boyfriend 和 girlfriend

我們今天正常是一對一關係,所以



class boyfriend < ActiveRecord::Base
has_one :girlfriend
end




class girlfriend < ActiveRecord::Base
belong_to :boyfriend
end


假設今天來個花心男player
他對女性是1對多關係
我們可以這樣設

class player < ActiveRecord::Base
 has_many:girlfriends
end


請注意ror對單複數的處理
has_one後面接單數
has_many後面接複數

當是1-1關係時,此時用的語法仍是has_one 與belong_to
一定有人會抗議,應該兩者都用belong_to或has_to
女人不是男人的附屬品,
其實呢
本來has_one 與belong_to的對應是與意化的
用途在決定外鍵的來源
foreign key便是,當A不存在時,B不應該存在
比方沒有班級就沒有學生
但男朋友死的 女朋友並沒有必要殉情
所以我們應該去砸雞蛋抗議嗎

其實ror沒那麼極端
參數 :dependent 可以決定一方消失 另一方何去何從
destroy=>相當於執行destory方法
delete=>delete但不執行destory 方法
nullify=>設為空 相當於 我沒男朋友

其差別可參考
http://hlee.iteye.com/blog/410000

延伸閱讀
http://ihower.tw/rails3/activerecord-relationships.html

RoR-model的建立與資料庫的結合

在ROR中,實踐orm是利用model與資料庫結合
要利用model與資料庫結合,可以照以下步驟


1.建立與編輯modle
2.rake db:migrate RAILS_ENV=環境

注意:因為rail的慣例,model名稱必須為單數 而其migration 則為複數

ex:
model名為BLog
migration會對應到blogs
另外若是特殊的字如woman
還是會自動對應到women

1.建立model
利用rail g model Blog建立model
此時會自動生出相關文件
其中之一為 create_

2.編輯migration

會在db的migration下出現一個有create_blog名稱的檔案
用文字編輯器進去
會出現

class Blog < ActiveRecord::Migration
  def self.up

    create_table do |t|
    t.timestamps   
    end

  end

  def self.down
  end
end


加入

create_table blogs do |t|
    t.string :name
    t.string :content
    t.timestamps
end



完成後打入
rake db:migrate RAILS_ENV=production
(如果是test環境則用test)

成功後即可在資料表用Blog.new直接操作

rails c
進到指令界面去操作
可以接觸資料庫後 就可以建立controller來讀取了

2011年7月25日

RoR -respond_to

respond_to 會根據使用者傳來的格式進行不同回應


格式為

respond_to do |format|

format.html {動作...}
format.xml {動作...}
format.附檔名3 {動作}

end

或有人有疑問format參數是怎麼來的,在系統預設他便是在路徑中傳遞
預設為.html

respond_to常用的搭配指令為

render 代表回傳訊息

redirect_to 代表導向頁面

因為render是系統預設回傳,在scaffold出來的程式,甚至可以看到

respond_to do |format|

format.html
end

的寫法,不是沒傳參數,而是此時系統會到預設的版模去抓(ror充滿這樣的預設)
如改成

format.html {render :text => "test"}

就會在顯示時出現
"test"

一般系統會輸出的格式html
要測試這樣的程式,不妨在視窗打入實際位址,比方
/msg/new.html
就會顯示出一般的畫面
msg/new.xml
就會顯示出系統對應的xml

比方輸入/msg/new.xml
會出現

<msg>
<name nil="true"/>
<created-at type="datetime" nil="true"/>
<updated-at type="datetime" nil="true"/>
<content nil="true"/>
</msg>


一些render能搭配的參數
:text  #傳文字
:xml   #傳xml
:json  #傳json
:nothing #不傳
:template #樣版的檔名
:action #針對某個action預設的回傳頁面(不執行動作)
:status 傳200(正常) 404 這樣的訊息

有空不妨玩玩看