奮鬥吧！網頁工程師 2: 網頁設計

顯示具有 網頁設計 標籤的文章。顯示所有文章

2012年5月3日

Web Developer 最大的敵人：IE，也有好用的 Debugger

前情提要： IE Sucks
所以，在這邊我要教大家如何使用 IE 的 debugger 讓你更快速的解決 IE only bug。
首先，我們可以看到，該死的 IE 亂跳錯誤，明明其他瀏覽器都沒錯

2011年4月28日

在 Firefox 中使用 video tag 播放 webm 影片

這是一個非常神秘的… 呃，應該算問題而不算 bug…

理論上來說，在支援 HTML5 的 browser 中，可以直接用 video tag 來播放 webm、ogv、mp4 的影片（當然實際的 codec support 狀況還是要看各家瀏覽器啦），不過我自己主要在用的 Firefox Nightly 和 Chrome 都可以正常撥 webm、ogv，~~IE 的話我沒有測試~~。（後來補充測試了 IE9，我把結果列在底下）

但是今天實做上的時候發現了一個容易漏掉的地方。我先把網路上隨便的 avi 檔案，用 WebmProject 建議的轉檔軟體：Miro Video Converter 來轉成 webm 的格式，接著丟到我自己的 server 上去，但無論怎麼測試，Firefox 就是無法正確播放我轉出來的影片，chrome 卻可以正常播放… 可是我用 Firefox 到 youtube 開啟 html5 mode 之後，是可以正常播放 webm 影片的… 而直接把 source 改去別人的 webm 影片，Firefox 卻又可以正常播放… 完全猜不透問題在哪裡…

我測試過 video tag、換用 mac os 來轉檔、換一套轉檔軟體等等的方法，就是沒辦法在我的 server 上播放我轉出來的 webm 影片… 好，現在就來解答…

答案就是 apache 設定裡面要加上

AddType video/webm webm

就這麼簡單…加上了之後我的 Firefox 就可以正常播放 webm 影片了…

Chrome 裡面似乎有特別做 webm 的判斷，所以即使我 server 沒有加入這個 mime type 還是可以正常播放… 也就是因為 Chrome 作弊… 害我完全沒想到問題出在 server 端… 總之，就是這麼簡單…

另外下面附上 Firefox 6.0a1、Chrome 13.0.749.0、IE9、IE10pp2、Safari 5、Opera 11 與 webm、ogv、mp4 的支援…

\	webm	ogv	mp4
Chrome 13.0.749.0	●	●	●
Firefox 6.0a1	●	●	○
Opera 11	●	●	○
Safari 5	○	○	●
IE 10 pp2	○	○	●
IE 9	○	○	●

總之，最保險的就是全放上去

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>

<video id="movie" width="640" height="352" preload controls>
 <source src="test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
 <source src="test.webm" type='video/webm; codecs="vp8, vorbis"' />
 <source src="test.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

</body>
</html>

考慮空間的話就是 webm/ogv 擇一，然後再補 mp4 囉～

2011年4月27日

Google Chrome 現在可以刪除 Flash 的 cookie 了

其實這個消息是從 InstantFundas 的 RSS 中看到的，看了一下手邊的 Canary Build 似乎早就加入了這個功能。（廢話，因為最近才加到 dev channel 中…）

稍微看了一下 Nightly，好像還是提供一般以網站為主的 cookie 列表來讓使用者選擇是否要刪除，不知道這有沒有包涵 plugin 的 cookie…

2011年4月26日

Firefox channel

Mozilla 在 Firefox 4 beta 的時候釋出了未來 Firefox 的 roadmap。簡單來說就是把 Firefox 的開發模式轉換成類似 Chrome 的 Channel 模式。分為 Nightly、Aurora、Beta、Final Release 四個 channel，對照到 Chrome 的話大概就等於 Canary、Dev、Beta、Stable。

以下是 Firefox 各個 Channel 的 icon：（Channel 的介紹可以看 Mozilla 的官網）

Nightly：是最新的 Channel，幾乎每三、四天就更新一次，也是我目前主要在用的版本，截稿為止的版本號為 6.0a1 (2011-04-25)。因為我從 Firefox 4 的時候就開始用 pre-release 的版本，所以當 Firefox 4 正式 release 的時候他就自動幫我 update 到 6.0，我當初還以為 Firefox 要跟其他瀏覽器一樣在追版本號勒… 原來只是自動更新到 Nightly Channel。
Aurora：目前的版本號為 5.0a2，基本上就是 Nightly 穩定的功能就會放到 Aurora 裡面。

Beta：目前官網還沒有釋出這個 channel 的資訊～

Final Release：就現在 stable 的 Firefox 4。

另外，roadmap 中也提到，2011年（也就是今年）Firefox 將會發到 7… 看來連 Firefox 也要跳入瀏覽器版本號之戰了…。

Chrome 自然不用說… 現在我在用的 Canary build 版本號是 12.0.747.0…
而隔壁棚的 IE 則是在四月中旬正式 Release IE9之後，馬上推出 IE10 Platform Preview 1… ~~（而且還不支援 Windows Vista，只支援 Windows 7 以上的系統。）~~
It doesn't matter, 身為一個 web developer，我只希望他們能夠支援 W3C 的標準…
另外就是 IE6、7、8 可以快點死死好嗎…

--
Firefox Nightly 可以從這邊下載到最新版
Firefox Aurora 可以從這邊下載到最新版

在 javascript 中取得 timestamp

起因是用 ajax 撈東西的時候 IE 會 cache 住，所以只好在 ajax 後面帶上 timestamp

$.get(url + new Date().getTime(), function(data){
 alert(data);
});

這問題其實超常遇到（因為IE一直活著 XD），可是每次都要 google 一次 -____- 所以寫下來看會不會加深印象…
做個備份… 現在越來越記不住東西了（哭）

2008年7月30日

繼續閱讀淡入淡出效果 on Blogger

這個效果主要是從 Kaie's Blog 看來的。剛好昨天歐蒐雷米歐問我這個效果，我就順手把這個效果也弄上了我的部落格。

注意
1. 此效果雖然跟 Kaie's Blog 很像，但除了 var fade 的效果啟動變數之外，其他都未參考他的程式碼。
2. 此效果採用了 jQuery 的 javascript Library，如果您已經採用其他 javascript Library 可能會因為衝突而無法正常顯示。
3. 部份語法由 Tony 提供。

步驟一：請先從 jQuery 下載 Download jQuery 1.2.6 (16kb, Minified and Gzipped)。步驟二：將這個檔案傳到您的網頁空間。（googlepage也可以）步驟三：在模板中加入這個 script 的連結。 <script src="http://yourwebsite/jquery-1.2.6.min.js" type="text/javascript"></script> 步驟四：將相關的 function 用下列的 function 取代


/* true 啟用淡入淡出效果，false 取消淡入淡出效果*/
var fade = true;

function showFull(id) {
 var par= $("#"+id);
 $("[id=hidelink]",par).css("display","inline");
 $("[id=showlink]",par).css("display","none");
 $("[id=fullpost]",par).fadeIn('slow');
 $("img",par).fadeIn('slow');
}


function hideFull(id) {

 var post = document.getElementById(id);

 var par= $("#"+id);
 $("[id=hidelink]",par).css("display","none");
 $("[id=showlink]",par).css("display","inline");
 $("[id=fullpost]",par).fadeOut('slow');
 $("img",par).fadeOut('slow');

 post.scrollIntoView(true);
}

2007年11月12日

小圖示生成器 - FavIcon Generator

介紹兩個網站，都是只要上傳一張小圖，可以自動生成FavIcon，不錯用！ Dynamic Drive - 只要按「瀏覽」選擇要上傳的小圖(1)，然後按下「Create Icon」的button就可以自動產生了，再按「Download Favicon」就可以下載另存。 FavIcon from Pics - 用法類似，但是多了可以製作動畫icon及Scrolling Text(2)的選項。 Favicon的安裝方法就是把Favicon上傳到網站的根目錄下，在＜head＞及＜/head＞間加入下面語法：


<link rel="shortcut icon" href="favicon.ico" />

1. 支援gif、jpg、png、bmp，必須15KB以下 [↩] 2. 不支援中文會自動轉為UTF8編碼文字 [↩] 相關連結是本篇文章的原始出處。