作者: tim

Tamper Data-好用的Firefox Debug工具

在 Firefox 中, 之前已經介紹過許多好用的工具(對開發及除錯應用), 像是

Firebug – https://diary.tw/archives/245, https://diary.tw/archives/485

Web Developer – https://diary.tw/archives/227

LiveHTTPHeaders – https://diary.tw/archives/565

User Agent Switcher – https://diary.tw/archives/926

這裡要介紹的是除了可以觀察每個 http 連線狀況外, 還能修改傳送資料的功能, 這個 AddOn 稱之為 Tamper Data, 光看字面上就很清楚是一個改資料的 AddOn, 但是是在執行網頁訪問的狀況下可以用插入式的方式操作, 這對於在沒有開發工具下, 要快速地進行傳送資料的調整(header, postdata), 如此一來, 可以容易地進行除錯及測試驗證.

先安裝 tamper data 這個 Firefox 的 AddOn – https://addons.mozilla.org/en-us/firefox/addon/tamper-data/

接下來可以在 Tools (工具) 選單下出來一個 Tamper Data 選項, 點選出來後, 就會出現 Tamper Data 視窗, 接下來, 就可以正常訪問一般的網站, 例如 yahoo, 會看到畫面上有一堆 request 及 response time 的 list, 如下:

這樣對於訪問 yahoo 的結果可以一目暸然, 對任一筆資料按下右鍵, 選 [Graph All] 會出現一個有時間序的清單並圖象化, 如下:

閱讀全文

標籤 AddOns, Firefox, get, post, Tamper Data

如何對遠端web主機取出部分文字內容

這篇文章很單純的一個應用需求, 就是要取遠端文字檔內容, 但該文字檔內容是個 log file, 會隨時間愈來愈大, 如何能只取出部分最後的內容呢? 否則隨時間愈長, 每次取回來都會愈久, 而且其實需要的內容只有最後一部分, 也就是要像 tail 的功能.

若不在遠端主機上寫程式, 就得思考一下 http header 方式如何設定 request, 馬上想到一個續傳的應用, 也就是指定 Range header 的方式來對遠端的 web 主機下達只取出某個部分, 可以參考這裡對 Range header 的說明:

http://www.aslibra.com/blog/post/http_header_detail.php

若依這次的需求, 可以指定只要最後的 50k 的話, 可以利用 Range: bytes=-51200 若用 asp 程式實作可以這樣寫:

Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.Open "GET", "http://webserver/data.log", False
xmlhttp.setRequestHeader "Range", "bytes=-51200"
xmlhttp.Send
xmlData = xmlhttp.ResponseTEXT
Set xmlhttp = Nothing
Response.Write xmlData

這樣一樣可以不用在遠端的 web server 上實作程式, 又能快速地取出最後 50k 的資料內容, 實在非常方便, 又能節能減碳, 利用 Request Header 來解決, 真是快速啊!

標籤 asp, header, Range, request, Web, XML

好用軟體

利用YQL對flickr單一相片取出對應網址

這個是繼之前 flickrset 取出整本相簿工具後的另一個小小的 flickr 應用.

一般利用 flickr 來當 blog 圖床應用很多, 不過常常看到圖, 但想要找出來在原來 flickr 的哪裡, 所屬哪個 user 或哪個相簿的查找不是很容易, 利用 YQL 的 flickr.photos.info 這個 table 可以查找出來 photo_id 對應的 url, 進而找出來圖片的來源, 及原來所屬的上傳者, 例如:

http://farm4.static.flickr.com/3542/35450735270_82b8e9945c_z.jpg

這張相片, 上面的 photo_id 為 35450735270, 帶入 YQL 利用這個查詢指令:

select urls from flickr.photos.info where photo_id=’3545073570′

後, 可以查出以下結果:

http://developer.yahoo.com/yql/console/#h=select%20urls%20from%20flickr.photos.info%20where%20photo_id%3D%273545073570%27

<span style="font-family: monospace;">
<?xml version="1.0" encoding="UTF-8"?>
<query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="1" yahoo:created="2011-03-07T13:55:56Z" yahoo:lang="en-US">
    <results>
        <photo>
            <urls>
                <url type="photopage">http://www.flickr.com/photos/okilyt/3545073570/</url>
            </urls>
        </photo>
    </results>
</query>
</span>

其中的 http://www.flickr.com/photos/okilyt/3545073570/ 就是原來的相片在 flickr 內的 url 了, 連回去看, 就能找出上傳者及對應相簿了, 方便大家使用.

已實作好的工具 url 在這裡: http://sample.diary.tw/flickrphoto/ , 只需要填入圖片連結, 無論是大圖小圖縮圖都可以, 程式自動會判定 photo_id, 並帶入 YQL 後查詢出來在 flickr 內的連結, 大家可以試看看.

[2011/10/6 15:00]已改為使用 flickr api 了, 因為 YQL 直接提供資料輸出, 請參考這篇: https://diary.tw/archives/1134

標籤 flickr, info, photo, YQL

好用軟體

產生任意大小的貓圖片

從這裡看來的: 產生任意大小的貓圖片…

有意思的這個網站: http://placekitten.com/ 提供了任意尺寸的貓圖片可供臨時要一些不同尺寸的圖片用來排版時, 方便隨時取用, 用來做網站排版的”佔位”.

例如:

http://placekitten.com/320/240

http://placekitten.com/g/352/288

看出來了嗎? 其中的 http://placekitten.com/寬/高, 而外多一個 g 的就是用灰階的方式呈現, 不過每一個 size 的圖片似乎不會改變, 也就是都是一個圖案, 雖然如此, 在不同的尺寸應用上還是很方便啦, 可以讓 developer 很容易地預覽一些網站上的初步設計使用.

標籤 gallery, gray, photo, placekitten, size

Javascript

VideoJS-HTML5的影片播放器

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!

標籤 css, html5, video, videojs

好用軟體

方便好用的線上函數繪圖-graphr.org

這個網站(http://graphr.org/)利用了 html5 的 canvas 特性, 製作了一個方便的函數繪圖功能, 也將一些常用的尋解功能放在上面, 例如二元一次方程式如下:

y=x-1
y=3x-4

把資料輸入後(預設只有一個方程式, 按下[Evaluate]旁的[+]可以再多添加一個方程式), 點 [Evaluate] 後, 會把函數圖繪製出來, 再按下 [Intersect] 鈕, 把滑鼠移到交叉點附近後, 就會出現交點的解, 如下圖:

如此一來便能方便地利用圖示函數應用來解一些方程式. 上圖找出 (x, y)=(1.5, 0.5)為解.

再來看看3次函數的局部最大/最小值, 例如以下三次方程式:

y=x^3-3x^2+2

一樣的方式先輸入後, 按下 [Evaluate] 繪出圖形後, 再利用 [Local Minima/Maxima] 鈕, 找局部最大/最小值, 如下圖:

上圖找出 x=2, y=-2 的局部極小值.

很方便的函數繪圖工具.

標籤 canvas, function, graph, html5, intersect, mathematics

Javascript

JW Player for Silverlight

文章作者作者: tim
文章發佈日期 2011-02-18
在〈JW Player for Silverlight〉中尚無留言

由於要播放 WMV 或是 Windows Media Service 的影音串流, 使用原來的 embedded windows media player 的方式, 比較難跨不同瀏覽器及作業系統, 自從 silverlight 出來之後, 方便的跨瀏覽器和作業系統的特性, 方便讓原來使用Windows Media 格式的影音及串流在不同瀏覽器及作業系統間可以播放.

接下來看看這個很方便的影音播放器, JW Player, http://www.longtailvideo.com/players/, 最早期他是提供了 Flash Player 供應用, 後來有了 Silverlight 及 HTML5 支援影音後, 也陸續推出了 Silverlight 及 HTML5 的播放器.

我們今天要看的是 JW Player for Silverlight 的這個播放器, 其實使用上非常簡單, 可以到這裡下載: http://www.longtailvideo.com/players/jw-wmv-player/ 下載的程式碼內容就有簡單的範例可供應用, 例如要生成一個播放器可以在網頁上播放, 只需要以下的程式碼:

<div name="mediaspace" id="mediaspace"></div>
<script type='text/javascript' src="silverlight.js"></script>
<script type='text/javascript' src="wmvplayer.js"></script>
<script type="text/javascript">
    var cnt = document.getElementById("mediaspace");
    var src = 'wmvplayer.xaml';
    var cfg = {
        file:'video.wmv',
        image:'preview.jpg',
        height:'240',
        width:'440'
    };
    var ply = new jeroenwijering.Player(cnt,src,cfg);
</script>

閱讀全文

標籤 event handler, jw player, silverlight, streaming, wmv

hotmail的分身帳號(alias)

大家應該都知道 gmail 信箱可以利用 [+], 和 [.] 來將原來是 [email protected] 的 email 變身成為: [email protected] 或 [email protected] 或是 [email protected] , 也就是 [+] 後面加字或是在原帳號內加上 [.] 來做分身帳號, 不過這樣的作法, 也還是很容易被看出來原來的信箱就是 [email protected]

這裡要介紹的是在 hotmail 信箱, 也就是微軟的 live.com 信箱, 有個不錯用的信箱分身(alias)功能可以供應用, 而且是完全看不出來原來的帳號.

來看看怎麼操作吧. 先登入到原本的 hotmail 信箱或是 live.com, 然後在收信介面上, 把滑鼠移到[收信匣]右邊會出現一個齒輪的符號, 移動滑鼠到齒輪上就會出現這個功能了, 如下圖:

其中的[建立Hotmail別名]就是建立一個分身帳號, 目前可供選擇的域名也是目前 live.com 上可供申請的域名, 如下:
共計有 hotmail.com.tw, hotmail.com, livemail.tw 這三個, 再自行輸入一個要分身的帳號就可以了, 完成後, 這個新的分身信箱就可以用了.