<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Idea Grapes &#187; bookmarklet</title>
	<atom:link href="http://blog.yoren.info/tag/bookmarklet/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.yoren.info</link>
	<description>Think Different</description>
	<lastBuildDate>Sat, 15 May 2010 13:17:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>quietube 讓你靜靜看影片</title>
		<link>http://blog.yoren.info/2009/04/quietube-%e8%ae%93%e4%bd%a0%e9%9d%9c%e9%9d%9c%e7%9c%8b%e5%bd%b1%e7%89%87/</link>
		<comments>http://blog.yoren.info/2009/04/quietube-%e8%ae%93%e4%bd%a0%e9%9d%9c%e9%9d%9c%e7%9c%8b%e5%bd%b1%e7%89%87/#comments</comments>
		<pubDate>Mon, 20 Apr 2009 18:26:41 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Stuff]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[youtube]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/?p=661</guid>
		<description><![CDATA[
quietube 給你一個不受打擾的 VIP 包廂，讓你靜靜看完 YouTube 影片（目前還支援 Viddler 和 Vimeo 這兩個網站）。
這裡的安靜指的是一個極簡的頁面，拿掉了視頻網站頁面內常見的其他元素：評分、回應、相關影片、廣告等等。
使用時需將 quietube 首頁的按鈕拖曳到瀏覽器的工具列中，然後在觀賞 YouTube （或其他兩個網站）的影片時，按下這個 bookmarklet，即會導向 quietube 所產生的網頁。 [via Google Blogoscoped]
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.quietube.com/"><img src="http://blog.yoren.info/wp-content/uploads/2009/04/picture-11-499x385.png" alt="quietube" title="quietube" width="499" height="385" class="alignnone size-large wp-image-662" /></a><br />
<a href="http://www.quietube.com/">quietube</a> 給你一個不受打擾的 VIP 包廂，讓你靜靜看完 <span class='bm_keywordlink'><a href="http://www.youtube.com">YouTube</a></span> 影片（目前還支援 <span class='bm_keywordlink'><a href="http://viddler.com/">Viddler</a></span> 和 <span class='bm_keywordlink'><a href="http://vimeo.com/">Vimeo</a></span> 這兩個網站）。</p>
<p>這裡的安靜指的是一個<a href="http://quietube.com/v.php/http://www.youtube.com/watch?v=YNZAs2BNlZY&#038;feature=related">極簡的頁面</a>，拿掉了視頻網站頁面內常見的其他元素：評分、回應、相關影片、廣告等等。</p>
<p>使用時需將 <a href="http://www.quietube.com/">quietube</a> 首頁的按鈕拖曳到瀏覽器的工具列中，然後在觀賞 <span class='bm_keywordlink'><a href="http://www.youtube.com">YouTube</a></span> （或其他兩個網站）的影片時，按下這個 bookmarklet，即會導向 <a href="http://www.quietube.com/">quietube</a> 所產生的網頁。 [via <a href="http://blogoscoped.com/archive/2009-03-21-n11.html">Google Blogoscoped</a>]</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2009/04/quietube-%e8%ae%93%e4%bd%a0%e9%9d%9c%e9%9d%9c%e7%9c%8b%e5%bd%b1%e7%89%87/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Design Bookmarklet</title>
		<link>http://blog.yoren.info/2007/12/design-bookmarklet/</link>
		<comments>http://blog.yoren.info/2007/12/design-bookmarklet/#comments</comments>
		<pubDate>Fri, 21 Dec 2007 11:13:37 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[bookmarklet]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/2007/12/21/486/</guid>
		<description><![CDATA[
雖然Web Developer Toolbar這個套件已經非常好用了，但是很多時候，能夠直接按一下就啟用的bookmarklet（書籤工具）還是稍稍方便一些，並且也兼具了跨瀏覽器的優點。
Allen Jardine製作的Design Bookmarklet一共有四種功能，如果你和我一樣，做網頁時，有非得把各種元素對齊不可的強迫症，那麼這個工具將非常實用：

Grid：可依需求直接輸入數據（尺寸、欄位數和列數、邊距等）在頁面中產生格線。
Rule：在上方和左側顯示尺規，並且可以拖曳出準線（guides）。
Unit：在頁面中測量任意兩點間的距離。
Crosshair：隨滑鼠游標出現的十字瞄準線，並提示座標。

上述的四項功能可以同時使用，介面也很美觀。這個小工具目前支援的瀏覽器有：Internet Explorer 7、Firefox 2+、Safari 2.0.4+、Opera 9.2+。至於為什麼沒有支援IE 6呢？Allen說，因為這是給開發人員和設計師用的呀。
]]></description>
			<content:encoded><![CDATA[<p><img src="http://img529.imageshack.us/img529/1625/designsmallhw1.jpg" alt="Design Bookmarklet" /></p>
<p>雖然Web Developer Toolbar這個套件已經非常好用了，但是很多時候，能夠直接按一下就啟用的bookmarklet（書籤工具）還是稍稍方便一些，並且也兼具了跨瀏覽器的優點。</p>
<p>Allen Jardine製作的<a href="http://www.sprymedia.co.uk/article/Design">Design Bookmarklet</a>一共有四種功能，如果你和我一樣，做網頁時，有非得把各種元素對齊不可的強迫症，那麼這個工具將非常實用：
<ol>
<li>Grid：可依需求直接輸入數據（尺寸、欄位數和列數、邊距等）在頁面中產生格線。</li>
<li>Rule：在上方和左側顯示尺規，並且可以拖曳出準線（guides）。</li>
<li>Unit：在頁面中測量任意兩點間的距離。</li>
<li>Crosshair：隨滑鼠游標出現的十字瞄準線，並提示座標。</li>
</ol>
<p>上述的四項功能可以同時使用，介面也很美觀。這個小工具目前支援的瀏覽器有：Internet Explorer 7、Firefox 2+、Safari 2.0.4+、Opera 9.2+。至於為什麼沒有支援IE 6呢？Allen說，因為這是給開發人員和設計師用的呀。</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2007/12/design-bookmarklet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>XRAY Bookmarklet：檢視網頁元素的Box Model資訊</title>
		<link>http://blog.yoren.info/2007/08/xray-bookmarklet%ef%bc%9a%e6%aa%a2%e8%a6%96%e7%b6%b2%e9%a0%81%e5%85%83%e7%b4%a0%e7%9a%84box-model%e8%b3%87%e8%a8%8a/</link>
		<comments>http://blog.yoren.info/2007/08/xray-bookmarklet%ef%bc%9a%e6%aa%a2%e8%a6%96%e7%b6%b2%e9%a0%81%e5%85%83%e7%b4%a0%e7%9a%84box-model%e8%b3%87%e8%a8%8a/#comments</comments>
		<pubDate>Thu, 02 Aug 2007 11:31:34 +0000</pubDate>
		<dc:creator>yoren</dc:creator>
				<category><![CDATA[Webdev]]></category>
		<category><![CDATA[bookmarklet]]></category>
		<category><![CDATA[box-model]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://blog.yoren.info/2007/08/02/472/</guid>
		<description><![CDATA[
XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet（書籤小程式，IE版本尚在開發中），使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。
只要在原始網頁中，將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列，便安裝完成了。之後點一下Xray書籤即可進入檢視模式，網頁中會出現一個黑色半透明的視窗，此後只要在網頁的任意元素上面點一下，其box model資訊（元素、id、class名稱、hierarchy關係、position、margin、padding等值）便可在該視窗中一覽無遺。
雖然上次介紹過Web Developer Toolbar裡面也有這個功能，但是XRAY的顯示介面除了較精美外，還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕，讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍，遇到較複雜的box model，常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]
相關套件：
CSSViewer
Aardvark
]]></description>
			<content:encoded><![CDATA[<p><img src="http://img256.imageshack.us/img256/1861/xrayexamplefd8.png" alt="XRAY Bookmarklet" /></p>
<p><a href="http://westciv.com/xray/">XRAY</a>是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet（書籤小程式，IE版本尚在開發中），使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。</p>
<p>只要在<a href="http://westciv.com/xray/">原始網頁</a>中，將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列，便安裝完成了。之後點一下Xray書籤即可進入檢視模式，網頁中會出現一個黑色半透明的視窗，此後只要在網頁的任意元素上面點一下，其box model資訊（元素、id、class名稱、hierarchy關係、position、margin、padding等值）便可在該視窗中一覽無遺。</p>
<p>雖然上次介紹過<a href="http://blog.yoren.info/2007/07/12/465/">Web Developer Toolbar</a>裡面也有這個功能，但是XRAY的顯示介面除了較精美外，還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕，讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍，遇到較複雜的box model，常要點個幾次才能正確找到自己要看的元素。[via <a href="http://www.zeldman.com/2007/07/30/web-design-development-iphone-ipod-links/">Zeldman.com</a>]</p>
<blockquote><p>相關套件：<br />
<a href="https://addons.mozilla.org/en-US/firefox/addon/2104">CSSViewer</a><br />
<a href="http://blog.yoren.info/2005/12/21/282/">Aardvark</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://blog.yoren.info/2007/08/xray-bookmarklet%ef%bc%9a%e6%aa%a2%e8%a6%96%e7%b6%b2%e9%a0%81%e5%85%83%e7%b4%a0%e7%9a%84box-model%e8%b3%87%e8%a8%8a/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
