Vine

上次看到這篇Google 採用 HTML5 製作手機應用程式（老新聞）文章後,就覺得Yahoo Pipes實作應該不是太難! (當然是不考慮畫面的部分XD)

但是要如何畫出優美的線條呢? 直覺告訴我應該可以使用貝茲曲線來畫出漂亮的曲線

Read more…

Squall Javascript, Web Programming, web, 技術文件 Canvas, HTML5, Yahoo Pipes

已經好久沒有遇到類似的問題了:P 現在都改用UTF-8了啊!

不過既然遇到了就來說明一下我的解決方法,個人覺得處理的有點怪

我是透過php去讀取Windows下的資料夾,但是當路徑中有 “許” 的字樣時竟然會出現錯誤

後來發現是多了一條斜線,因此無法正常開啟資料夾

許\錯誤

因此利用取代的方式,把\取代掉就好囉!

$address = iconv("utf-8","big-5",str_replace("\\","",iconv("big5","utf-8",$address)));

不過因為網頁是UTF-8,讀取檔案總管是BIG-5,所以才要這樣轉來轉去的!

感覺有點蠢

Squall php, 技術文件

參考自deepakssn : Send email using PHP with Gmail

1. 首先下載 PHPMailer ( http://phpmailer.sourceforge.net )
2. 解壓縮至 phpmailer 資料夾 (自己找的到就好)
3. 新建一個 PHP ( ex: email.php)
4. 修改email.php
Read more…

Squall php gmail, php, smtp

最近把之前比賽的程式拿出來用,結果發現竟然不能正常work了!

後來發現是因為YUI所始使用的Library會跟Yahoo Map所使用的Library衝突導致

Joseph 教我使用 Anonymous function + YUI Get 的方式載入

function() {
 　　YAHOO.util.Get.Script('<YUI script url>');
}();
function() {
　　YAHOO.util.Get.Script('<Map script url>');
}();

不過後來在網路上找到另外一篇文章,就是獨立載入Yahoo! MAP AJAX API的JS

這樣也不會發生重複載入的問題囉! 參考網站Using YUI with the Yahoo! Maps AJAX API

1. 不要使用原本Maps AJAX API’s 所引用的檔案 (如：http://tw.api.maps.yahoo.com/ajaxymap?v=3.8&appid=YourAppId). 底下將會使用YUI的Library.

2. 接著把Maps AJAX API所會使用到YUI的檔案引用進來：

* Yahoo Global Object
* Dom Collection
* Event Utility
* Drag & Drop Utility
* Animation Utility

3. 接著把Yahoo! Maps AJAX的基本js引用進來即可!
http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231

程式碼：

<!–load YUI from your own install folder if possible; otherwise:–>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"> </script>
<!–set your application ID variable:–>
<script type="text/javascript">
var YMAPPID = "YourAppId";
</script>
<!–Include core Maps AJAX API script:–>
<script type="text/javascript"
src="http://l.yimg.com/f/i/tw/map/api/ymapapi_3_8_0_6_twopen.js?081231">
</script>

這樣就可以正常使用囉

Squall AJAX, YUI AJAX, Yahoo Maps, YUI

YUI 3 上手更容易,光是動態載入library就方便很多了

只要載入基本的js就可以囉! 真的是一大福音啊~

加上可以直接對網頁上的物件直接進行操作,直接使用Javascript操作物件的方式
YUI 2.x:YAHOO.util.DOM. addClass(div, ‘demoClass’);
YUI 3.x:div.addClass(‘demoClass’);

這邊提供一個簡單的範例參考

Include:

<link type="text/css" rel="stylesheet" href="/yui/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="/yui/build/yui/yui-min.js"></script>


HTML:

<div id="demo">測試測試</div>


JS:

YUI().use("node",
function(Y) {
var node = Y.get('#demo'); //div id的名稱
node.setStyle('backgroundColor', '#fcfcfc'); //設定背景色
node.setStyle('width', '300');
node.setStyle('opacity', '0.5');
node.set('innerHTML', 'demo test!!');
}


要加入事件(Event)的話也是非常的方便唷!


//use event
node.on('click', function(e){
e.preventDefault();
alert('event: ' + e.type + ' target: ' + e.target.get('tagName'));
});


參考網址:YUI 3 Node

Squall Javascript, YUI node, YUI3

原文參考自：Example YUI Image upload with YUI 2.6.0

今天簡單用了一下YUI的Uploader跟Rich Text Editor發現真的很方便!

不過後來發現Rich Text Editor的照片只能貼網路上的圖片連結

所以想要做個合併囉! 上網一查發現已經有人做好啦~XD

其實用法很簡單,先來一個快速上手的教學吧!

Include file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/skin.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/editor/editor-min.js"></script>
<script src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="yui-image-uploader26.js"></script>

這邊比較特別的就是yui-image-uploader26.js,這個檔案是由allmybrain.com所撰寫的,網站中還有舊版本的可以使用:)

HTML:

<form method="POST" action="#">
<textarea name="editor" id="editor"></textarea>
</form>


Javascript:

(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
var myConfig = { //設定Rich Text Editor
height: '300px',
width: '800px',
dompath: true,
focusAtStart: true
};
myEditor = new YAHOO.widget.Editor('editor', myConfig);
yuiImgUploader(myEditor, 'editor', 'forumUpload.php','image');
myEditor.render();
})();


這樣就完成囉!

Squall Javascript, YUI

很久沒有貢獻了,最近總是提不起勁 :p

相信很人跟我一樣,對於Yahoo提供的YUI很有興趣

雖然官方網站的文件寫的很詳細,不過沒有中文文件就是讓人覺得不貼心

所以打算把我用過的東西,寫上來分享囉! (不過可能還是上官網比較多資源)

以下轉貼自 http://tw.developer.yahoo.com/yui.html

何謂YUI呢？ Yahoo! 使用者介面函示庫 (YUI)

Yahoo! 使用者介面 (YUI) 函示庫是一組使用 JavaScript 所製作出的工具和控制項組合，用來建立豐富且具有互動性，並且以 DOM 程式、DHTML 和 Ajax 等技術為基礎的網站應用程式。 YUI 函示庫還包含了一些核心的 CSS 資源。YUI 函示庫中的所有組件都基於 BSD 條款以開放原始碼的形式公開發佈，並且提供給所有網友免費使用。

[從 Sourceforge 下載 YUI 函示庫] 從 Sourceforge下載 YUI 2.3.1 版， 包含完整的 API 文件和more >超過 200 個實際的範例。

開始使用

1. 立即觀看 YUI 的範例。 我們建議從Event 工具和 Dom 集合 的範例開始；Event 和 Dom 是 YUI 核心的一部分 (還有 YAHOO Global Object) 提供 JavaScript 開發人員在使用 YUI 時重要的基礎。一旦您查閱過這些基礎的部分之後，請繼瀏覽像是 Drag and Drop 和 Animation 或是 UI 控制項 Button、 Calendar 和 TabView 等工具。 如果您對 YUI CSS 組件有興趣，請依照順序閱讀 Reset、Base、Fonts 和 Grids 的範例。
2. 請記得我們有提供完整的使用說明給對這個網站中的每一個組件。 如果您在測試範例時對某個組件有疑問，請查閱這個組件的使用說明 (只要按下頁面左方的任何一個連結) 或是可供搜尋的 API 文件。
3. 還有速查表位於每一個組件的主頁面供您查閱，也可以下載所有的速查表。 這些文件能夠輔助線上使用說明，針對 YUI 組件提供了方便列印出來的簡潔格式。
4. 開始製作。您可以從下載後的 YUI 檔案 (在 /build資料夾內) 或 直接從 YUI 伺服器載入函示庫和 CSS。 YUI Loader 工具是一個客戶端的載入方式，不論是使用您自己或我們的伺服器，都能讓您在需要時才載入相關的 YUI 函示庫。
5. 成為 YUI 社群的一員。 YUI 開發人員和製作者在我們的討論區分享想法和解決方案，並且也會提供幫助。 YUI 開發人員也同時提供 YUIBlog，在這裡您可以找到關於 YUI 較深入的文章、影片和其他不錯的內容， 以及網站前端工程師的世界。

台灣官方網站 (只有第一頁是中文的) 美國官方網站

Squall Y!OS

簡單又好用的Prototype Window

該如何使用呢? 首先要引用下列幾個js及css (選擇你要的樣板)


<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/window.js"> </script>
<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"/>
<!-- Add this to have a specific theme-->
<link href="themes/mac_os_x.css" rel="stylesheet" type="text/css"/>


使用的方法如下,宣告一個新的視窗!


win = new Window({className: "mac_os_x", title: "Sample", width:200, height:150,
destroyOnClose: true, recenterAuto:false}); win.getContent().update("<h1>Hello
world !!</h1>");
win.showCenter();


非常簡單吧!

原文出處：prototype-window 官方網站

Squall Javascript, 技術文件 Javascript, prototype

當你計算依些數值的時候,有些時候會想要取到小數點第二位之類的

就可以使用number_format囉! 之前我都是使用printf(“%.2f”,$num);

最近發現 number_format 也很好用喔!!

而且還可以設定自己想要的格式,如果我要取到小數點第二位的話

number_format($num,2);

其他相關用法：



$number = 1234.56;

?>


更多bumber_format相關教學

Squall php, 技術文件 php, 數值處理

CSS:

div.RoundedCorner {background: #F0F0F0}
b.rtop, b.rbottom {display:block;background: #FFF}
b.rtop b, b.rbottom b {display:block;height: 1px;overflow: hidden;
background: #F0F0F0}
b.r1{margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px;height: 2px}


HTML:

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b>
<b class="r4"></b></b>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>


Squall CSS, 網頁設計

網站或blog裡除了眼花繚亂的語法很重要之外
空間整體的配色也很重要喔! 顏色搭配得宜是很吸引人的!
到底要怎樣配色才能富有個人風格又不必擔心顏色過於衝突呢?
這裡有幾個很棒的配色網站可以替大家搞定配色問題!

１、收錄了很多主題配色的方案

http://www.print100.com/hk/html/csi.aspx

２、選定你的主題色，輕輕一按就能幫你搭配合適的顏色，還能調節亮度與飽和度，非常專業喔

http://wellstyled.com/tools/colorscheme/index-en.html

３、只要輸入一個物品名稱（例如tree）就能產生相關顏色

http://colr.org/

４、選擇你的基調色，馬上給你16種配色

http://www.colorschemer.com/online.html

註：今天整理文章的時候發現的，已經找不到原作者了，如果您是原作者歡迎跟我說一聲,我會補上您的網址的

Squall 網頁設計 網頁配色

這幾天再研究如何寫php extension..

可惜忙了三~四天都沒有一個結果..XD

今天終於找到問題所在…

原來是我visuall c++在compile的時候選錯了模式

Win32_Release_TS and Win32_Debug_TS ,之前一直都用debug

導致php無法使用dll檔~ (雖然在網站上有看到說明,可是卻沒有特別留意)

不過用了之後,在把他丟到php\extencsion就可以用啦!!

Squall php, 工作紀錄, 技術文件 php extension

今天把uniserver3.2升級成uniserver3.5囉!
大致上似乎沒有太大的差別,不過我是為了要使用JSON這個功能 (PHP 5.2以上才有支援的樣子)
www跟mysql\data資料全部複製過去就可以啟動囉 (所以我猜測資料庫版本沒有變動)
唯一遇到的錯誤訊息就是,session_start出現錯誤~~

cannot send session cache limiter-headers already sent

通常遇到這問題,是在用session之前,你已經先將其他資料印出來了~
不過後來發現其實還有其他原因也會造成這個問題~~

[引用了UTF-8格式的文件]
有些UTF-8格式的文件會在文件的開始放入判斷字元(BOM)，可以啟用PHP.INI的設定
output_buffering = 4096 或是採用類似SMARTY樣版的方式來避免類似問題發生

不過我卻發現舊版的php.ini中裡面已經存在這行囉! (所以我之前當然可以用囉)

原文:台灣PHP聯盟

Squall php, web

告訴我為什麼要使用Ruby on Rails?

2007年Computer World排名第一名!

開發速度比以往的PHP要快5~10倍?

參考網站:
阿修的部落格-Ruby on Rails簡介
Ruby on Rails 中文網站

自己對於Ruby on Rails也不是很熟悉,所以要來接觸一下,體會一下他的魔力

Squall Ruby on Rails, 技術文件

在blogger上面要讓圖片自動加上邊框,非常簡單..

CSS的部分加上這段程式碼就可以囉!

Squall CSS