顯示具有 Web Design 標籤的文章。 顯示所有文章
顯示具有 Web Design 標籤的文章。 顯示所有文章

星期五, 4月 01, 2011

讓CSS正確顯示中文字體

即使網頁已經是用UTF-8編碼,有時候還是會遇到亂碼的問題…例如在CSS中使用中文字體:微軟正黑體、新細明體…等,這問題真的很無奈!每次遇到都還是要想辦法把它變成unicode!雖然javascript可以讓中文字體變成UTF-8的功能:
<script type="text/javascript">
var uri="微軟正黑體";
document.write(encodeURIComponent(uri));
</script>

但CSS本身無法使用javascript…
這時候FireBug的指令列(Show Command Line > Command Line)就變成了我們的小幫手,可以幫我們達成中文字轉成unicode編碼的要求!只要在指令列使用「escape()」功能:

假設我們要CSS正確顯示「font-family:微軟正黑體;」,
在指令列用escape指令輸入「微軟正黑體」:
escape('微軟正黑體')
可以得到底下的回應:
%u5FAE%u8EDF%u6B63%u9ED1%u9AD4
再把所有的「%u」全取代成「/」(反斜線)就得到:
\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4
上面一串奇怪的數字加英文,就是我們要的unicode編碼!
將它取代原本的「微軟正黑體」:
font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;
瀏覽器就可以正確顯示CSS中的「微軟正黑體」了!
另外,在Chrome、IE以及Safari的「開發人員工具」中,都有「主控台(Console)」可以使用「escape('中文字')」的功能,我覺得還滿不錯用的!

星期六, 2月 26, 2011

AS3: 用Flash播放YouTube裡的影片

今天遇到了一個用Flash播放youtube影片的問題,雖然有提供「可能」可以用的網站連結參考,但短時間還是試不出個所以然,所以回家後就google了一下,看看是否有別的方法…結果,還真的有方法!…

其實Google有針對自己的Player提出控制方法,請參考:YouTube ActionScript 3.0 Player API Reference ( http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html )

方法其實非常簡單!只是…不知道的人冤枉路就會走得很久遠…

首先,先找到你的youtube分享連結,例如孫燕姿的新歌:「世說心語」MV完整版,它的分享連結是:http://www.youtube.com/watch?v=pgdgaDdNgwo,「v=」後面就是它的影片ID(video id),也就是「pgdgaDdNgwo」;這個ID很重要,因為我們它關係著我們要播的是哪支影片。

接下來把底下的ActionScript 3.0的語法貼到時間軸裡,並且將紅色的video id取代成你的youtube影片id就OK了:
// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=pgdgaDdNgwo")); //換成你的video_id

function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange",
onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);

// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player = loader.content;
// Set appropriate player dimensions for your application
player.setSize(640, 390);//指定影片大小
player.playVideo(); //讓影片立刻播放
}

function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
}

function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}

星期四, 2月 11, 2010

直接分享網頁內容到Facebook/Plurk/Twitter

現在有很多網站可以直接將網頁的摘要與網址分享到Facebook或Plurk、Twitter等微網誌上,雖然乍看之下是很方便的事情,但這樣的分享常常不見得會讓網友「買單」、真的去分享到他的微網誌上。然而,有的客戶還是會希望能提供這樣的「貼心功能」;於是,我們還是得「乖乖聽話」,畢竟付錢的是老大,還是加上了這個功能。

我們可以運用「呼叫外部javascript」的方法,將javascript程式碼寫到一個外部檔案中,例如一個名字是「shareWithFriends.js」的javascript,它全部的內容可能只寫成這樣子:
<!--
function Facebook() {
 void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));
}
function Plurk() {
 void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('(') .concat(encodeURIComponent(document.title)) .concat(')')));
}
function Twitter() {
 void(window.open('http://twitter.com/home/?status=' .concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));
}
//-->

未來,我們只要把這個javascript存在網站的某個特定位置,就可以讓它一直被重覆使用,非常方便!畢竟這支javascript都在做同樣的事情:「把你看的網頁網址存成一個字串,然後再送給Facebook/Plurk/Twitter讓它們為你發佈新的微網誌。」換言之,我們會在特定的按鈕上呼叫javascript功能來自動抓取目前網頁的標題等內容,並發佈成一篇新的微網誌文章。

我們若要呼叫上面的javascript,得先在目前的網頁的<head>底下加入的網頁程式碼:
<script type="text/javascript" src="shareWithFriends.js"></script>

假如我們是使用Flash來呼叫的話,在Actionscript 3.0的前提下,可以用ExternalInterface.call的方法來達成;假設有三個對應於Facebook、Plurk、Twitter的Flash按鈕,應該要在時間軸上加入以下的Actionscript 3.0程式碼:
import flash.external.ExternalInterface;

//Facebook Button Setup
Facebook_btn.addEventListener(MouseEvent.CLICK, clickFacebook);
function clickFacebook(e:MouseEvent):void {
 ExternalInterface.call("Facebook");
}
//Plurk Button Setup
Plurk_btn.addEventListener(MouseEvent.CLICK, clickPlurk);
function clickPlurk(e:MouseEvent):void {
 ExternalInterface.call("Plurk");
}
//Twitter Button Setup
Twitter_btn.addEventListener(MouseEvent.CLICK, clickTwitter);
function clickTwitter(e:MouseEvent):void {
 ExternalInterface.call("Twitter");
}

要用Actionscript 2.0的getURL功能也沒問題,程式碼如下:
//Facebook
Facebook_btn.onRelease = function () {
 getURL("javascript:Facebook(); void(0);");
}
//Plurk
Plurk_btn.onRelease = function () {
 getURL("javascript:Plurk(); void(0);");
}
//Twitter
Twitter_btn.onRelease = function () {
 getURL("javascript:Twitter(); void(0);");
}

除此之外,Plurk和Twitter會在分享的時候,會自動將網頁的標題文字當成分享的連結字,例如:
<title>Perr的分享</title>,網頁的標題就是「Perr的分享」,而「Perr的分享」就會變在Plurk與Twitter自動的貼上的文章標題。

其中,Facebook和Plurk、Twitter有些不一樣的地方!因為Facebook原本就有提供公開分享的功能,只要按照它的格式即可:
http://www.facebook.com/sharer.php?u=要分享的網址&t=內容標題

但有趣的是,這方法似乎有些問題!因為Facebook沒有按照我給它的「內容標題」去貼出訊息,而是用連結到的「網頁標題(title)」來當作它的「文章標題」!

怎麼辦呢?

只要增加幾個meta資料在<head>之後就可以了,例如:
<meta name="title" content="Perr的分享" />
<meta name="description" content="直接分享網頁內容到Facebook/Plurk/Twitter" />

如此一來,Facebook會將「Perr的分享」當成新的文章標題,同時也把description的內容,也就是「直接分享網頁內容到Facebook/Plurk/Twitter」,當成新的文章內容了!

如果要提供網友的一些網站相關圖片的話,也可以在剛才上面的那段網頁程式碼後面再加上底下這段程式碼:
<link rel="image_src" href="網頁的相關縮圖網址" />

當然,縮圖並不限定只能放一個,所以我們也可以同時放置好幾個縮圖,讓網友可以「先睹為快」!

星期六, 6月 20, 2009

Acer Aspire的專屬時尚網


如果各位有注意奇摩首頁的話,會發現Acer也在上面下了新廣告,推出一款最新的長效輕薄型筆電:Acer Aspire(3810/4810/5810),一樣屬於Aspire系列,而時尚網也專門為它設計了一個Acer Aspire的專屬時尚網站(如上圖)。這款筆電不但輕薄,更重要的是它的電力可使用長達八小時!而且就算長時間使用也不會有過熱的情形!這兩點可勝出我的MacBook Pro不少!因為我的MacBook Pro大概只能用兩個小時,而且放在腳上用一陣子後就會非常熱!所以我對於長效與不會過熱的特點很有認同!(雖然Apple最近也推出新的MacBook Pro,一樣也有強調電池可長時間使用…)

我另外也受邀在STYLEblog寫了一篇小小的文章,說明了這款筆電更多的特點,有興趣的人可以去看看

星期二, 5月 05, 2009

修正舊版瀏覽器無法正常顯示PNG的問題

舊版的IE瀏覽器(6.0, 5.5, 或更早的版本)並不完全支援PNG格式圖片的顯示,因此會在透明PNG圖片的周圍產生一片淡藍色的區域;常更新軟體的人可能不會發現,但對於電腦「不過就是一個東西放在那邊」的人來說,他們可不管這麼多…雖然如此,我們還是得要照顧到他們,所以…底下是google到的一段程式碼,只要把它放進Head裡面,就可以讓舊版瀏覽器也能正常顯示透明PNG囉!
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText

if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
+ imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

星期四, 4月 16, 2009

ASP網頁的include

雖然我不寫ASP類型的網頁,但公司伺服器卻使用微軟的系統來搭建並採用ASP作為伺服器互動的機制。正因為如此,我莫名其怪的學會了「Include(將外部程式包進來)」方法;當然,前提是你得有ASP伺服器才行。

之所以會有include方法,就是因為我們常會發現部份網頁的特定區域或程式是一模一樣的;如果客戶要求我們修改這些特定區域的時候,我們可能得一頁頁的修改這些一模一樣的網頁原始碼,會很費時費力!ASP的include則提供了另一個聰明的方法,就是把這些一樣的網頁原始碼的「片段」存放到另外一個不同的小檔案中(類似載入外部CSS檔);之後我們只要修改這個外部的小檔案,ASP伺服器就會自動更新修改過的檔案的程式片段。當網頁很多的時候,這方法就會變成一個很有力的方法!

Include的方式其實不難!只要將網頁原始碼的程式片段「剪下」再「貼」到一個新的文字檔裡(ex: sample.txt),並將文字檔的副檔名由原來的txt更改為inc,變成.inc的include檔(ex: sample.inc)。此時,在原來被剪下的程式片段位置改為底下的程式碼,ASP伺服器就會知道這是include,於是ASP伺服器會將這個外部的程式片段自動載入,然後才顯示組合後真正完整的網頁原始碼:
<!-- #include file="sample.inc" -->

換言之,ASP伺服器只要看到上面的程式碼,就會自動載入程式碼所指定的檔案(ex: sample.inc),並完全的取代掉上面的程式碼。

值得注意的是,這個include檔的路徑不能是「絕對路徑(absolute URL)」,只能是「相對路徑(relative URL)」,否則會沒有作用。

另外一點就是,當你的程式使用了太多的include之後,你會發現…這網頁很容易變成只能用ASP伺服器修改,因為太多的include檔早已讓你看不清網頁原來的樣子!所以include還是要謹慎使用呀!

星期三, 12月 10, 2008

HSBC Authentication


這幾天幫HSBC做一個乾淨簡單的持卡人授權登入頁面(Authentication Page)。畫面明顯的分成上下兩半,上面是白底的HSBC信用卡以及它的Logo;下面則是一隻拿著鑰匙的手,象徵性的要把某個東西打開的樣子。而鑰匙上面有一個讓持卡人輸入卡號的空白欄位,如果是正確的,那持卡人當然就等於是有這把鑰匙可以到專屬的折扣頁面。

Play The Lucky Draw & Win Your Phuket Holidays!


上面是octopustravel.com十二月份的活動:Play The Lucky Draw & Win Your Phuket Holidays! 中文為「現在去HMV購物,就有機會贏取octopustravel提供的新年大獎」。
因為是用摸彩的方式,所以在畫面的前面有人手拿著一張單子,後面則是有一位美麗的女士很高興得獎的樣子,背景當然就是中獎才能去的普吉島囉!

星期三, 11月 19, 2008

Have Your X'mas & New Year In Japan


這個是十二月份的電子報版型設計。原來是放日本的都市照片,但「日本感」似乎不夠;於是又放上了左邊的藝妓與右邊和室的半扇門。同時為了讓畫面有多一點聖誕節的感覺,在門外也加了一顆聖誕樹。但這個設計的文字內容過多,導致讓畫面太擁擠…看圖說故事的效果被扣了一些分數,而且看起來有點複雜!

星期四, 11月 06, 2008

你也可以當CSS的按鈕設計師


一個小有趣的網站:CSS Button Designer,專門做按鈕的…CSS的按鈕。

用Javascript確保網頁在IE6看起來跟IE7一樣


很多人都遇到過網頁在IE7看的時候是正常的,但在IE6或其它舊版IE上看卻很怪的情形。或者,剛好相反…

所以Dean Edwards編寫一個javascript庫,加強舊版IE(IE6、IE5),讓它們看起來就相容於標準瀏覽器,它同時修復了舊版IE(IE5、IE6)許多的CSS問題,也讓透明png能正常使用。

目前這個javascript放在google伺服器上,所以Dean會幫我們更新。

更棒的是,他允許我們用"hot-link"的方式,直接連到google伺服器(http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js)。

星期一, 11月 03, 2008

Happy Hour Around Asia


目前在幫OctopusTravel泰國做的一個版型,主題是:「Happy Hour Around Asia」。Amm說這個圖很可愛!不過我還沒拿到酒店的照片,所以沒辦法再把Hotel和人物的影像有更緊密的結合;假使真的沒有照片的話,可能就真的只能長這個樣子了…。