2006-03-30

當Flash不再酷

已經很久沒看過讓我覺得「酷」的flash了,這幾年用flash的網站太多,已經看膩了,更不會耐心地看完整段flash。

其實用flash的網站那麼多,假若自己用得不好,訪客很容易就看出分別。在這個年代,Flash跟酷不再是等號了。

P.S.CSS+JavaScript所做出來的效果更讓我覺得酷

當肉醬貓遇上「請登入」

每當我遇到網站要求註冊才能看到內容,都不禁想說:「大佬啊,唔睇過你入面咩料,我註冊黎托炮呀?!」

假若我還是註冊了,都定必會在「會員資料」填寫貓BLOG(貓網)的網址以提高Page Rank,務求做到有借有還。

2006-03-29

討厭的遊戲場景

不管是那個遊戲,我都很怕遇上叢林地帶。在叢林地帶很容易迷失方向,又難以確定敵人位置。

你也有討厭的遊戲場景嗎?

2006-03-28

肉醬貓的生態(2)

肉醬貓是一種神秘的生物,除了偶然耍帥,閒時扮貓之外,更有以下特徵:
  • 很懶,不是懶到死,而是連死都懶。
  • 經常性無心情,不是無心情到死,而是連死的心情也沒有。
  • 不用表情符號就沒法表達自己的情感。

相關連結:
肉醬貓的生態(1) - 網路笨貓 Journey of Blog

2006-03-27

視覺化效果真的那麼重要嗎?

以上是Firefox的擴充套件(推薦度由上至下),它們的賣點都是分頁縮圖。有模仿Opera的,也有模仿IE7的,更有自成一格的,不過我是用不著的。

相關連結:
Mozilla Taiwan 討論區: Mozilla宣佈最佳擴充套件得主

剪毛

自小就不喜歡剪髮,除了覺得費時外,「電動剪髮器」還會令我背腰敏感起來,使我不由自主地擺動。據說在我小時候,頭髮曾經和貞子一樣長。

至今,只有表哥才剪出我滿意的髮型,這亦顯示出我的問題。

2006-03-25

停留了的網站廣告

不少網站都會利用廣告來幫補,但隨著瀏覽器的進步,懂得擋廣告的人愈來愈多,彈出式廣告更將成為歷史。

然而,除了Google AdSense之外,其餘的網站廣告都好像沒進步過般,假若等到人們開始極端地擋掉所有廣告才開始改善,就為時已晚了。

人們想擋掉廣告是出於討厭,但他們為何討厭廣告呢?原因如下
  • Flash類型廣告會增加瀏覽器的佔用記憶體和CPU使用量。
  • Flash、圖片類型廣告會增加使用頻寬,而很多地方的頻寬都不是免費的。
  • 部份網站會在頁頂放置大量廣告,每瀏覽一頁都必須移動捲動軸才能看到內容。
  • 部份網站會隨便將廣告放上網站,除了影響美觀,更影響了可視範圍。
防止別人擋廣告的有效方法,就是解決以上問題。記住一點,當別人想擋掉你網站的廣告時,就表示你的產品存在缺憾。因為廣告是網站的一部份,而網站就是你的產品。若要以此為生,就必須做好這些。

IE6的雄霸不僅停住了web standard的發展,更停住了網站廣告的發展。(因為主流瀏覽器沒有阻擋彈出式廣告,所以不需改善廣告也能生存。)

相關連結:
停留的web standard? - 網絡暴民 Jacky’s Blog
Effective Banner Advertising - Newt Edge
未來寫網需要注意的 - 網路笨貓 Journey of Blog
以無擴充套件的Firefox擋廣告 - 網路笨貓 Journey of Blog

量產型名字

很奇怪,真的很奇怪,為何香港會那樣多「欣」的呢?
或者應該問,為何那麼多父母都會替孩子起這個名呢?

又一個世界未解之謎

2006-03-23

Gmail的搜尋也是個人化搜尋

漸漸發現自己經常使用Gmail的搜尋功能,目的主要是找些看過的文章。我的Gmail主要保存我所訂閱的Google Groups內容,由於Google Groups根本是個自訂分區的論壇,內容自然合我口味。而且當我看到有趣的網頁或文章就會用E-mail send給朋友。(其實這就是之前的網摘,都是一些不想加到書籤或del.icio.us卻又想記下來的網頁)

另外,雖然Google Talk能利用PSI使用其他IM軟件的協定,繼而把交談記錄保存在Gmail,但我更希望有個Miranda IMGaim的插件能將交談記錄保存在Gmail。

P.S.真希望瀏覽器的「瀏覽記錄」不是保存在本機呢...
P.S.2.更希望Bloglines的搜尋做好一些!

相關連結:
將 GMail 當 Forum 用 - 網絡暴民 Jacky’s Blog
利用PSI,把你的MSN、Yahoo、Icq好友全部加到你的Gtalk里面!

2006-03-22

給我一點安寧,好嗎?

有些網頁會自動播放音樂,其實這些網頁並沒有問題,只是會影響瀏覽器速度和響起多重奏而已。但如果戴著耳筒的話,後果就嚴重很多了。很多播放器的音量選項跟系統上那個是不同的,而網頁上的音樂卻是根據系統那個的...(準備地說,網頁所指定的播放器的音量往往是系統那個)

現在戴起耳筒後,即使設定好系統音量都還是會起雞皮。
唉,又多一個心理障礙了!

相關連結:
愛:設計 - 如果可以令網頁嘈音收聲…就天下太平了!

2006-03-20

改標題

你知道上排網頁的內容嗎?
早幾天更改了這個BLOG的標題排序,改為跟()貓網的一樣,站名放在最後。

即是將「網路笨貓 Journey of Blog - 次世代書本」改為「次世代書本 - 網路笨貓 Journey of Blog」。理由是這樣較直觀,假若標題以站名為開頭,在分頁、工具列上很可能只看見站名而分不清頁面。

另外,Google的搜尋結果對標題有長度限制。

update:還可以方便瀏覽「側邊欄/瀏覽器列」的書籤和歷史記錄。

相關連結:
第八天:建立有意義的網頁標題 - Dive Into Accessibility
Xiao Yao - Notes - Titles returned.

2006-03-19

foobar2000 0.9釋出!

距離上次更新已經是年多前的事了,有不少地方都要重新適應呢...

相關連結:
foobar2000官方網站

雞肉腸火拚芝士腸

相信大家都有食過香腸,香港市面上主要有兩種香腸,分別是雞肉腸和芝士腸。

我個人不太喜歡芝士腸,原因是它外皮厚、油膩、烹調方式貧乏,這些問題都是它的特點所做成的。為防止芝士汁輕易流出,所以外皮要厚;為避免芝士汁在烹調時流出,使烹調時間和方式受到限制;由於芝士腸的芝士汁是油的關係,所以很油膩。

反觀雞肉腸就沒那麼多問題了,它可以用來切片、切粒也沒損失。所以我比較喜歡雞肉腸。

2006-03-18

次世代書本

早幾天看了PALE COCOON,一部個人製作的動畫。故事很有意思,畫面亦稱得上是高水準,歌曲更是十分動聽,不過最有趣的都不是這些。

由於以未來世界為背景,少不免會有「未來電腦」的出現。PALE COCOON裡其中一種電腦是書本,這種「電腦書」完全取代了紙製的書。從劇情中更能得知,「電腦書」與「電腦書」之間能夠交換資料;具有播放影片功能。

感覺「電腦書」比很多「未來電腦」還要實在。

索你明索你

大約在兩年前,從老味口中得知「鑽石山」那兒買了SONY的LCD顯示器,我說了三上真司的一句:SONY是專門推出次貨的。

「怎會啊?像這樣的大公司」老味帶著無法相信的語氣說了這番話。
事實上,現在的SONY就是依靠消費者的這種心態生存的了。

給五月姨:這就是NDSL了。

相關連結
talkonly推介精華版:我們都是這樣討厭SOXY的

2006-03-17

三人

當屋裡是三人時,彼此間的說話竟然變多了
彷如放進缺少了的齒輪,使兩個不同位置的齒輪連起來
然後,曾經名為「家」的機器稍微動了一下

回想起來,確實很多事情都是從二人開始的

然而,這不會做成任何改變

被留下來的人

迎接覺醒的寂靜和漆黑,總是令我感到恐懼

「世界只剩下我一人嗎?」恐懼就是因這種想法而生(的吧)

有時開著燈或電腦才睡,都是想避免這種情況(吧)

2006-03-16

化解月經帖之「以Audacity消除人聲」

何謂月經帖?

「月經帖」是指每隔一段時間就會出現的帖子,由於像有週期般,所以被比喻為女性的經期。不過這只是其中一種說法,有興趣的可在各搜尋器找找。

前言

總會有人在論壇上問:「怎樣去除歌曲中的歌聲,只餘下純音樂呢?」

本文就是要解答這個問題。但需要注意一點,利用軟件消除人聲的效果是有限的,所以不要抱太大期望。

本文選用Audacity是由於它是個開放源代碼及跨平臺的軟件,這使得以下這個skill不需要金錢便能使用(硬件除外)。

我同時將本文放在貓網裡頭,該版本或許會較易閱讀,以 Audacity 消除人聲(貓網版)

下載、安裝

  1. 連上Audacity的官方網站,下載Audacity的穩定版本(不建議下載Beta版本)。
  2. 安裝Audacity。
啟動Audacity之後,可能會發現是個英文介面。但Audacity自1.2.4版本之後已內置中文語系,只要切換一下就會變成中文介面。(但2.0版好像未有中文語系?)
  1. 「Edit->Preferences->Interface->Language」,選擇「Chinese (Traditional)」之後「確定」。
  2. 關閉Audacity,再重新啟動Audacity就會變成中文介面。
你還需要下載Center Pan Remover外掛程式,下載並解壓縮後只需把「centerpanremover.ny」放到Audacity安裝目錄下的Plug-Ins目錄即可。引用官網上的一句在Mac OS X系統裡,Audacity的安裝目錄通常在Applications目錄下。在Windows系統,其安裝目錄一般會在Program Files目錄裡。

在解壓縮的時候,你可能需要WINZIP或WINRAR這類軟件。假若你沒有安裝同類型軟件,可考慮使用7-Zip,它同樣免費且開放源代碼。


現時該插件已內置於最新的穩定版本中,毋須另行下載及安裝

實行

  1. 「檔案->開啟舊檔」選擇你要消除人聲的檔案。
  2. 「編輯->選取->全選」。(這是為了選定要處理的範圍)
  3. 「效果->Center Pan Remover」,「確定」。
  4. 「檔案」->「匯出為(WAV/Ogg Vorbis/MP3)」。
如果你需要匯出檔案為MP3格式,你需要額外下載LAME。詳細流程請參照Audacity主頁上的教學

其實用Audacity消除人聲的方法並非只有一個,或許你能在搜尋器找到更適合你的方法。

相關連結

Audacity官網 - 我該如何從此錄音中移除人聲變成卡拉OK音軌?(連結已死)
Vocal Removal - Audacity Wiki(英文)
中山國中自由軟體講義 - 用Audacity消除歌曲中的人聲(doc檔) (下載後無法開啟?試試OpenOffice.org)(連結已死)
一些有關Audacity的教學
化解月經帖系列

2006-03-14

以標準方式重構Talkonly網站

目的

重構的目的就是為了加深大家對網絡標準CSS的認識,同時亦可訓練一下自己。

其實我對CSSXHTML都不算熟悉(精通),只算是略懂而已,畢竟這些太博大精深了。所以當你發現有更好的做法時請指教。

這個重構全屬我個人的行為,與Talkonly是沒關的。同時,我沒有通知Talkonly方面,我在此希望Talkonly方面諒解我的行為。

規則

  • 盡量符合標準。
  • 所有瀏覽器都能夠完整觀看。
  • 盡量重現網站原貌。
  • 要有改進。

以下的圖片截取自 Windows XP SP1 上官方的 Firefox 1.5.0.1 正(繁)體中文版。

XHTML部份

DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

以上這段稱為DTD,用來向瀏覽器宣告這個文件使用什麼格式(標準),方便在各瀏覽器上得出一致的結果。

網頁描述
<meta name="description" content="香港網上電台。節目內容包括電腦業界、時事,另設有PODCAST頻道。" />

用來描述這一頁,描述會在搜尋器的搜尋結果顯示出來。而且部份瀏覽器(Firefox、Opera)把網頁加到書籤時,描述會自動加進書籤的描述部份。

不少人都誤以為搜尋器不看這段,但搜尋器不看的是meta name="keywords"

RSS
<link rel="alternate" type="application/rss+xml" title="講台talkonly(精華版)" href="http://feeds.feedburner.com/talkonlypodcast" />

用來宣告RSS的網頁及標題。加上之後,Firefox這類較新的瀏覽器會出現那個RSS圖示。

Firefox的情況
頁頂

由於MSN跟Skype的地址跟頁頂內容沒關,所以沒有把它們寫進來。

節目推介部份

由於這部份一直都沒有固定格式,所以決定繼續使用圖片來顯示內容。

節目直播部份
<caption>直播連結</caption>

表格的標題。

<th><img src="winamp.gif" alt="Winamp" height="32" width="32" /></th>

<th>即Table Header,效果跟<td>(Table Data)相同,但語意是不同的。

<img>中的<alt>用途是代替無法顯示的圖片,彈出式提示應使用<tltle>,它能夠在<img>以外使用。

另外,<alt>並非只對純文字瀏覽器有用的,圖片載入中和無法載入時都會顯示出來。

節目重溫部份
<option value="0">其他重溫 (YY/MM/DD)</option>

加入「(YY/MM/DD)」,避免瀏覽者混淆年份、日期、月份。

<optgroup label="06/03/03">
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.0.mp3">節目重溫風波</option>
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.1.mp3">綜緩141</option>
<option value="http://listen.talkonly.net/LONG/LONG-20060303/long.060303.2.mp3">自由人珍藏</option>
</optgroup>

使用<optgroup label="06/03/03">分組後,選單變得更容易觀看。

分組前分組後
PODCAST頻道部份
<h3><a href="http://feeds.feedburner.com/talkonlypodcast">講台talkonly(精華版)</a></h3>
<ul>
<li><a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=77016318">以iTunes訂閱</a></li>
<li><a href="http://www.bloglines.com/sub/http://feeds.feedburner.com/talkonlypodcast">以Bloglines訂閱</a></li>
<li><a href="http://www.multirss.com/rss/http://feeds.feedburner.com/talkonlypodcast">MultiRSS</a></li>
</ul>

Podcast的RSS並非只有iTunes用戶使用,所以在此方便線上RSS Reader。由於Bloglines的用戶最多,所以其餘的由MultiRSS解決。

直接加上Podcast連結是為了方便RSS Reader的bookmarklets。

其餘

餘下的「id="poster"」、「id="im"」、「id="forum"」不放進「id="content"」內是有原因的,當這三個部份放於「id="content"」再以絕對定位固定,會在IE中消失,所以只好放出外面。

一點改進
  • 能夠以「podcast」在搜尋引擎搜尋得到。(原來的網頁是不能的)
可改進的地方
  • 節目重溫部份不能在停用Javascript下正常使用。
  • 曾試過加上Play Tagger,但播放時的速度會加快很多。
  • 可把討論區的搜尋器放進來,方便聽眾在收聽後尋找相關資料。但討論區的搜尋只供會員使用且僅搜索標題,搜尋引擎的cache又並非即時收錄。

CSS部份

CSS寫得比較亂,而且沒有加上註解,所以理解時需要多花一點時間。

字型

由於我不擅長設定字型,所以字型部份照搬了原本的設定。

重現虛線

雖然在「#podcast」加上border-left:1px dashed #999能夠重現虛線效果,但這會引申出一個小問題,由於border是從區塊的外面套上的,所以「Podcast頻道」跟上面的「節目直播」會有1px之差,所以我在「#live」加上border-left:1px solid #7CC576

重現圓角

由於只需要一個圓角,所以能夠在不修改XHTML下重現。把邊角的部份製成一張圖片,去除非白色部份再貼到右上角。

background-image:url('corners.gif');
background-repeat:no-repeat;
background-position:top right;
重現誠邀部份

在原本的網頁上這部份是一張圖,但XHTML的這部份連半張圖也沒用上,那到底如何重現呢?

根據原圖的大小來設定「#poster」的高和闊,然後用border:1px solid #000重現邊線。

position:absolute;top:450px;left:270px;定好位置。由於從開始到現在都以px單位設定距離,所以不需擔心在別的瀏覽器會走位,因為它們有同樣的偏差值。

background-image:url('ren.gif');
background-repeat:no-repeat;
background-position:center bottom;

以這段貼好圖後,就只差「talkonly wants you」這幾個字。雖然CSS2未能在同一元素貼多張圖,但還有h2這個元素可用。

letter-spacing:-999px;
background-image:url('wantsyou.gif');
background-repeat:no-repeat;
background-position:center top;
width:211px;
height:56px;

letter-spacing的用途是設定字距,當數值為負數時,部份瀏覽器會把文字弄不見,避免文字和圖片的內容重疊起來。由於有部份瀏覽器會繼續顯示該段文字,所以將文字的大小設為1px以減低影響。

成品

除了使用Windows XP下的Firefox 1.5.0.1、Internet Explorer 6.0、Opera8.53測試外,再以SafariTestBrowsershots粗略測試過。

圖片方面,由於沒有原圖的關係,所以圖片的質素會比較差。

使用工具

相關連結

起於:12/10/2005

2006-03-13

暴貓走了,笨貓來了

更名為「網路笨貓」的原因,就是希望跟網絡暴民有點區別,這能夠避免很多不必要的誤會。而且會有人用「網路暴貓」來稱呼我,加上我又真的有夠笨的,所以笨貓來了。

雖然跟原來只有一字之差,但把網絡暴民聯想起來的機會其實少了很多。另一方面,舊訪客也能認出「網路笨貓」就是「網路暴貓」,不怕舊訪客錯以為「摸錯門牌」。

P.S.網絡暴民回來了

相關連結:
網路暴貓 Journey of Blog: 網絡與網路,暴民與暴貓
網路暴貓 Journey of Blog: 網絡暴民暫停服務起於:3/05/2006