<?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>mr.mu &#187; 好用工具</title> <atom:link href="http://www.mrmu.com.tw/category/webdesign/%e5%a5%bd%e7%94%a8%e5%b7%a5%e5%85%b7/feed/" rel="self" type="application/rss+xml" /><link>http://www.mrmu.com.tw</link> <description>WordPress 網站架設、軟體設計、互動介面研究</description> <lastBuildDate>Wed, 08 Feb 2012 08:24:17 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.1.2</generator> <item><title>Adobe Edge: HTML5、CSS3、JS的動畫特效整合開發工具</title><link>http://www.mrmu.com.tw/2011/08/02/adobe-edg/</link> <comments>http://www.mrmu.com.tw/2011/08/02/adobe-edg/#comments</comments> <pubDate>Tue, 02 Aug 2011 04:57:47 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[adobe edge]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[html5]]></category> <category><![CDATA[javascript]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1719</guid> <description><![CDATA[HTML5問世後帶給軟體開發者不少驚奇，尤其在相關產業的大力支持下，相關的應用工具也爭相出現。Adobe在日前推出Edge，就是為了要整合新一代的HTML5、CSS3及Javascript的動畫製作能力，提供給多媒體設計師一個便利的動畫製作工具，讓設計師不必額外學習相關程式碼的撰寫，可以將心力放在設計上。 Adobe Edge的第一個版本稱為 Preview 1 ，在昨天(8/1)推出了。目前 Adobe Edge下載使用是免費的，想玩玩看的話，必須先在Adobe註冊會員帳號，才可以下載。 你可以在這裡下載 Edge，而這裡有一些 Edge做出來的實例。 下載安裝時會發現有預留輸入序號的頁籤，不過Preview版的安裝會直接跳過這個頁籤，在同意規章後就直接進行下載了。 安裝後的Adobe Edge畫面如下。 Edge的UI十分簡單，最上方左邊是工具列，內有四個工具項目，分別是選取工具(Selection Tool)、矩形工具(Rectangle Tool)、圓角矩形工具(Rounded Rectangle Tool)、文字工具(Text Tool)。 正中央是動畫呈現的舞台(Stage)，我們可以從工具列裡點選矩形或文字，然後在舞台中拉出這些元素。 左方是元素們的屬性設定(Properties)，像是位置、大小、旋轉角度、縮放等；右方是所有在舞台裡的元素列表(Elements)，方便選定。 最下方的區塊是時間軸(Timeline)，就是用來賦于元素們動畫特效的地方。 目前看來，Edge的動畫製作方式與 Flash 的 Motion 動畫操作非常相似，也是以類似制定關鍵影格(key frame)的方式來定義每個階段元素改變的形式來生成動畫。例如，一開始時間軸的第1格key frame畫面，A元素位置在左上方，在時間軸第20格我們建立一個新的key frame (在Edge裡，只要點一下第20格就好)，然後改變A元素的位置，把它移動到右下方 (或甚至改變一下它的旋轉角度及透明度)，此時我們的時間軸裡就有兩個key frame了，而Edge會自動幫你完成第1格到第20格之間的動畫。 完成動畫後，Edge也沒什麼匯出功能，直接就是存成一個html檔、一個js檔，另外還生成了一個edge_includes目錄，裡頭放了一些js檔。 直接以瀏覽器打開此html檔，就可以觀看到動畫效果了。 當然不可能只透過html檔就能產生動畫，我們可以先觀察這個html檔的內容： 可以發現html檔是html5的格式外，它還包進了jQuery及edge自身的javascript檔，而這些javascript檔，就是扮演著讓動畫實現的關鍵角色。 這裡是我做的一個DEMO，動畫效果在Chrome看起來非常流暢。 目前我使用 win7 安裝並測試 Adobe Edge，發現操作上好像沒有很順暢，尤其有一些畫面Refresh的問題，重繪的觸發時間點很怪。另外我比較想看到可以整合頁面互動的效果，目前也還沒有見到，但整體來說，這個工具還是一個蠻有前瞻性的應用，期待日後Adobe能好好發揮Edge的潛力。]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/08/02/adobe-edg/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>Google Storage for Developers 費用計算說明</title><link>http://www.mrmu.com.tw/2011/05/15/google-storage-for-developers-billing/</link> <comments>http://www.mrmu.com.tw/2011/05/15/google-storage-for-developers-billing/#comments</comments> <pubDate>Sun, 15 May 2011 14:00:44 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[Google]]></category> <category><![CDATA[Google Storage]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1670</guid> <description><![CDATA[Google I/O 2011 在日前宣佈了許多好消息，其中關於 Google Storage for Developers 的好消息是它開放註冊了 (不再需要邀請)，但是Google提出新的試用計畫，卻不是個好消息&#8211;至少對先前申請免費100GB的人來說不是，因為100GB的免費配額很快將被取消了XD。 有興趣的人可以看一下原文版的Google Storage for Developers的計價方式，首先可以看一下新的試用計畫內容，我大致翻譯相關說明如下： Google Storage for Developers 的計價方式是「依使用量」計價，而儲存用量及頻寬用量是以gigabytes(GB)為單位計算。 請注意：在任何帳號開始使用Google Storage服務前，Google Storage都需要用戶的帳單資訊。要註冊帳單資訊，請登入Google APIs console 並點擊Billing頁籤。 免費試用(Free Trial Usage) Google Storage提供免費試用的配額方案直到2011年12月31日為止。此方案只適用於你第一個使用Google Storage的專案並提供你如下的免費資源使用： 5 GB的儲存空間 25 GB的下載資料量 (20GB為歐美、中東及非洲地區；5GB 為亞太地區) 25 GB的上載資料量 (同下載) 25,000次 GET,HEAD請求 (requests) 2,500次 PUT,POST,LIST 請求 (requests) 是的，免費使用的配額縮水很多XD，而就算是免費的試用方案，也只到今年底。那之前申請的100GB用戶呢？ 註：若您是在2011年5月10號前註冊GSD帳號，請閱讀FAQ以了解試用計畫會如何影響到你的GSD使用。 相關的資訊翻譯如下： 新的試用計畫會如何影響2011年5月10號前註冊的用戶？ 若你在2011/5/10前註冊並且取得100GB的免費儲存量，你將可以持續保有100GB的免費儲存服務、免費頻寬、免費請求直到 2011年6月30日。在6月30日後，你的帳號將會被搬進新的試用計畫。 唉~ 只能好好珍惜與100GB 剩餘相處的時間了&#8230;.XD [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/05/15/google-storage-for-developers-billing/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Git教學：Git的遠端操作及利用Dropbox建立Server進行協同開發(Windows)</title><link>http://www.mrmu.com.tw/2011/05/06/git-using-dropbox-as-server/</link> <comments>http://www.mrmu.com.tw/2011/05/06/git-using-dropbox-as-server/#comments</comments> <pubDate>Fri, 06 May 2011 14:09:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[dropbox]]></category> <category><![CDATA[git]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1625</guid> <description><![CDATA[上一篇Git教學介紹了基本的Git操作，如果是一人開發還好，要是多人開發，那要怎麼一起play呢？ 如果要跟其他人一起開發專案，就需要架Git server，讓多位開發者可以透過存取遠端Server的Repo來進行協同開發，共同維護同一個專案。 順帶一提，每位老手大大都建議先去Github.com開一個免費帳號練習一下。Github提供Git server，也就是遠端的Repo，但是免費的限制是你的Repo都是開放的，如果不想讓他人看到你的程式碼，就必須付費。 你也許會因為工作的關係，所以不能公開專案的程式碼，若是一個人開發那還好，多人開發的情況下也許又覺得要自架Git server有點麻煩，有沒有經濟簡單的解決方案呢？ 在此提供一個簡單的方式，就是使用Dropbox作為Git server。 *什麼是Dropbox？ 先在此大致簡介一下Dropbox：Dropbox是一個非常棒的雲端檔案儲存服務，把它安裝好後，你就可以指定本機端的任一目錄 (預設名叫My Dropbox)成為有雲端儲存功能的目錄，從此就可以在任何有安裝Dropbox的電腦存取該目錄內的檔案 (當然你要先登入自己的帳密)，所以如果你有一台以上的電腦，或有iphone、android手機等(皆有dropbox app可下載)，共享檔案就變得非常方便。 除此之外，你還可以在dropbox的目錄裡開設公開分享的目錄，邀請其他朋友共同使用該目錄，如此該目錄也就成為了一個公槽。(還沒有dropbox帳號？按此申請dropbox帳號) *到底Git+Dropbox要怎麼玩？ 因為dropbox可以開公用目錄，因此我們可以開一個共用的目錄並邀請開發團隊所有成員一起共用此目錄，然後把git server放在這個目錄。在此假設這個共用的目錄叫OurProject。 說是git server，其實就只是一個共用的Repo存在這裡。為OurPeoject目錄建立一個repo，請注意，記得使用加上bare參數： git init &#8211;bare 如此這個目錄就會變成Repo了，而因為加了bare，這個目錄不會有.git目錄，而是把原先.git目錄中的東西都放進來，而且你日後在這個目錄中不會看到你的程式檔案。 對，不會看到你專案的程式檔案哦，就是大家把最新進度從遠端Repo拿下來、更新、放回去，這個目錄裡都看不到專案的程式檔案。但是其實它已經記錄了最新進度，只是需要你「拿回家」才看得到。 好，所以現在你的狀況應該是：專案的程式碼已經先放在一個Repo了(內有程式檔案)，而dropbox也有一個Repo，但是用bare的方式建立的(只有git相關檔案，沒有你的程式檔案)，dropbox的Repo我們就先稱之為「遠端Repo」。 在dropbox目錄建好遠端Repo後(說是遠端，但其實位在我們本機的dropbox目錄，但也能說是遠端，因為跟其他人同步共用中)，進入你專案所在的Repo目錄，並執行： git remote add origin Dropbox的目錄/OurProject 如此就會在你專案Repo中建立一個遠端Repo的位址，然後把這個位址取名為origin，日後就可以把你的進度放進遠端Repo了。(通常本地端的Repo預設名是master，而遠端的Repo預設名就是origin) 接著要把你專案Repo的進度放進遠端Repo中，供其他人取用，所以要在專案Repo目錄執行Push的指令： git push origin master 如果push有成功，你在遠端Repo (dropbox目錄裡的OurProject目錄) 看不到你的程式檔案(剛剛有提過)，要確定是不是真的有push進最新進度，我們需要再Pull回來看看，看現在遠端Repo裡是不是最新進度： git pull origin master *一下本機一下遠端，操作很複雜？ 簡單來說，add、commit、branch、checkout等這些都是你自己在本機跟自己玩，都是操作本機的Repo，當你要跟其他人一起玩時，你就要用push、pull，把別人的成果從遠端Repo拿下來(pull)，自己玩一玩(先commit進自己的Repo，再修改、再commit&#8230;)，再丟上遠端Repo(push)，讓其他人也能抓最新進度去玩。 通常我們從遠端Repo拿東西下來，可以用Clone、Pull、Fetch等方法，其差異 (就我的理解) 說明如下： Clone: 會把遠端的repo整個專案抓下來，放在目前路徑下的新目錄中。(所以不需要先把新目錄建立成Repo，就可以整包抓下來，隨包附上.git目錄) Pull: 會把遠端的repo整個專案抓下來，跟你目前所在的Repo及所用的Branch作合併(Merge)，此指令等同Fetch+Merge。 [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/05/06/git-using-dropbox-as-server/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Git教學：初學者使用心得分享(Windows)</title><link>http://www.mrmu.com.tw/2011/05/06/git-tutorial-for-beginner/</link> <comments>http://www.mrmu.com.tw/2011/05/06/git-tutorial-for-beginner/#comments</comments> <pubDate>Fri, 06 May 2011 12:00:52 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[git]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1612</guid> <description><![CDATA[前陣子剛接觸git時，網路上很多git文章都很零散，針對windows平台的教學也不多 (也有發現一些文章像是寫給鬼看的XD)，讓身為初學者的我痛苦指數一直上升，在使用一陣子後就想試試看整理一篇目前理解的使用心得。 先說明我的環境是 windows 7，目前專案寫的是php。之前使用版本控制軟體的經驗是有用過SVN，且是在windows下用TortoiseSVN，做一些簡單的操作，並且沒架過SVN server。先假設您不太了解什麼是版本控制，然後最近聽說Git很火紅，也想玩看看。 *什麼是版本控制？ 開發專案時，開發者會一直寫入新的程式碼，或放進新檔案。如果有天出事了，某個功能以前明明可以跑，但突然掛點了，通常我們會回頭去看相關的程式碼，試著找出問題並修復。但如果專案規模不小或者是由很多人一起開發的專案，就會大大增加debug的難度。 版本控制軟體讓我們可以儲存專案不同時期的版本，如果每次有修改就存下一個版本(有些叫check-in，有些叫commit)，出事時就可以回溯到之前還能正常執行的版本，並且比較兩個版本間有何不同，找出引起問題的程式碼。 另外有一些情況是：如果你想開發新功能，我們可以利用版本控制軟體，在專案中開一個分支(branch)來發展看看，或實驗看看，如果成功了，又能合併(merge)回原來的開發主線。 而目前版本控制做得最棒的聽說是Git，所以我們就要來試玩看看。 *Git是什麼？ Git就是一套版本控制軟體，相對於subversion(SVN)的中心式版本控制，git是分散式版本控制，幾乎什麼事都在本機進行，設計上「只會增加資料」，因此不要太怕出事，東西都可輕鬆復原。每個開發者的本機端都會有完整的程式庫，都能獨立作業，不受開發主線的拘束，不需網路連線也能工作。(這些描述都是參考本文最後附的參考資料，有個超棒的Git教學投影片，請一定要連過去看看) *安裝Git 要在windows上安裝Git，目前並沒有太多選擇。我是安裝msysgit，網路上找都有安裝說明，你在安裝上應該不會有太多困難。記得勾bash(命令列)和gui，bash就是命令列操作模式，gui是圖形操作介面，但個人感覺git gui不太好用，如果真的不想用命令列，不如安裝TortoiseGit(著名的烏龜系列&#8230;)，它的ui相比之下好用很多。 安裝完後，你可以試著在本機任一目錄上按右鍵，然後應該能在選單上看到 Git GUI here 及 Git Bash here 這兩個選項。後面文章若提到要執行Git命令，就是在目錄上按右鍵，選擇 Git Bash here，它就會跳出Dos視窗，你就可以針對這個目錄執行Git命令。 *每個開發者都擁有自己的倉庫(Repo) 接下來介紹安裝完後，我們如何利用Git「自己跟自己玩」。白話來說，就是在自己的電腦上，自己寫code後把變更提交(commit)到自己本機的倉庫(Repo)裡。 Repo是repository的簡稱，指的是倉庫、程式庫、版本庫&#8230;，簡單來說，Repo就是一個受Git版本控制的目錄。你可以先找一個空資料夾執行git init來建立新的Repo，若你有裝TortoiseGit，就可在空資料夾按右鍵，選擇Git create repository here，意思一樣。 當然若你有現成的程式專案目錄，也可以直接把它建成Repo，操作跟上述相同。 執行git init後這個資料夾就變成一個Repo了，裡頭會多一個名叫.git的目錄，而Repo在日後進行版本控制時所需的相關資訊都會存放在這個.git資料夾中。(.git目錄若砍掉了，這個目錄就不再是一個Repo了) 現在Repo目錄裡啥都沒有，所以可以先隨便新增一個README來試玩看看，執行： touch README 執行後就會多一個空白的檔案叫README，如果要你放進其他的檔案試試看也行，就直接copy放進來吧。 這時我們的repo已經有新檔案了，但都還沒受到版本控制(untracked)，不在版本控制清單中的檔案，就不會受到git控制，也就是你要把程式碼提交變更(commit)至repo時，這些untracked的檔案都不會被放進去。所以要執行add，讓檔案們進入所謂的staged狀態，才能接著把它們commit進Repo中。 要把所有檔案都加入staged狀態，執行： git add -A 或 git add . 要把個別的檔案加入staged，執行： git add 主檔名.副檔名 [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/05/06/git-tutorial-for-beginner/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Wirify 將網頁轉換為線框(wireframe)的小工具</title><link>http://www.mrmu.com.tw/2011/02/09/wirify-%e5%b0%87%e7%b6%b2%e9%a0%81%e8%bd%89%e6%8f%9b%e7%82%ba%e7%b7%9a%e6%a1%86wireframe%e7%9a%84%e5%b0%8f%e5%b7%a5%e5%85%b7/</link> <comments>http://www.mrmu.com.tw/2011/02/09/wirify-%e5%b0%87%e7%b6%b2%e9%a0%81%e8%bd%89%e6%8f%9b%e7%82%ba%e7%b7%9a%e6%a1%86wireframe%e7%9a%84%e5%b0%8f%e5%b7%a5%e5%85%b7/#comments</comments> <pubDate>Wed, 09 Feb 2011 02:17:11 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[wirify]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1462</guid> <description><![CDATA[Wirify是個方便的小工具，只要將Wirify連結拉到書籤列，從此只要按下Wirify連結，就能快速的將我們正在瀏覽的網頁轉換為線框(wireframe)頁面，即是把影片、圖片、文字、廣告…等區塊，轉化為不同形式的淡灰色塊，藉以觀察網頁的排版(Layout)設計。 參考來源： http://www.volkside.com/tools/wirify/]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/02/09/wirify-%e5%b0%87%e7%b6%b2%e9%a0%81%e8%bd%89%e6%8f%9b%e7%82%ba%e7%b7%9a%e6%a1%86wireframe%e7%9a%84%e5%b0%8f%e5%b7%a5%e5%85%b7/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>如何用電腦看模擬手機上網的網站？</title><link>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/</link> <comments>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/#comments</comments> <pubDate>Mon, 14 Dec 2009 14:54:04 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[好用工具]]></category> <category><![CDATA[Opera Mini]]></category> <category><![CDATA[手機上網]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1294</guid> <description><![CDATA[這是今天一位朋友突然問我的一個問題，其實有很多種simulator，但可能要先安裝特定的手機OS模擬器，才能使用它內建的browser吧，因為我的經驗也不是非常多，我只接觸過windows mobile，但一下要搞到wm的模擬器，其實也很麻煩，又非常大。 如果想要知道自己的網站在手機上瀏覽會是什麼樣子，可以參考一下Opera Mini的線上Demo程式，這是目前我能找到最簡單的solution了~ 它的Demo程式就是下方這樣的介面，你可以試玩看看，看自己的網站在手機上看會是什麼樣子：(如果畫面出不來，或者有疑似當掉的情形，請按Ctrl + F5來重讀，再試試看。) Opera Mini的線上模擬器需要安裝最新的JRE: Java Runtime Environment. 官方網站：http://www.opera.com/mini/demo/]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>無名文字繪－得知無名小站好友對你的稱呼</title><link>http://www.mrmu.com.tw/2009/08/13/%e7%84%a1%e5%90%8d%e6%96%87%e5%ad%97%e7%b9%aa%ef%bc%8d%e5%be%97%e7%9f%a5%e7%84%a1%e5%90%8d%e5%b0%8f%e7%ab%99%e5%a5%bd%e5%8f%8b%e5%b0%8d%e4%bd%a0%e7%9a%84%e7%a8%b1%e5%91%bc/</link> <comments>http://www.mrmu.com.tw/2009/08/13/%e7%84%a1%e5%90%8d%e6%96%87%e5%ad%97%e7%b9%aa%ef%bc%8d%e5%be%97%e7%9f%a5%e7%84%a1%e5%90%8d%e5%b0%8f%e7%ab%99%e5%a5%bd%e5%8f%8b%e5%b0%8d%e4%bd%a0%e7%9a%84%e7%a8%b1%e5%91%bc/#comments</comments> <pubDate>Thu, 13 Aug 2009 13:10:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[創意]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/2009/08/13/%e7%84%a1%e5%90%8d%e6%96%87%e5%ad%97%e7%b9%aa%ef%bc%8d%e5%be%97%e7%9f%a5%e7%84%a1%e5%90%8d%e5%b0%8f%e7%ab%99%e5%a5%bd%e5%8f%8b%e5%b0%8d%e4%bd%a0%e7%9a%84%e7%a8%b1%e5%91%bc/</guid> <description><![CDATA[其實我有無名帳號，但幾乎沒在用，申請來的原因是因為有些朋友用無名，而且需要登入才能看文章XD。這個無名文字繪似乎是中研院開發的(看網址)，覺得還蠻有趣的，因為輸入無名的帳號就可以看到你的朋友們在無名是怎麼稱呼你的&#8230; 無名文字繪]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/08/13/%e7%84%a1%e5%90%8d%e6%96%87%e5%ad%97%e7%b9%aa%ef%bc%8d%e5%be%97%e7%9f%a5%e7%84%a1%e5%90%8d%e5%b0%8f%e7%ab%99%e5%a5%bd%e5%8f%8b%e5%b0%8d%e4%bd%a0%e7%9a%84%e7%a8%b1%e5%91%bc/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>IE網站介面設計除錯 &#8211; IE Tester, Multiple IE</title><link>http://www.mrmu.com.tw/2009/02/26/multiple-ie/</link> <comments>http://www.mrmu.com.tw/2009/02/26/multiple-ie/#comments</comments> <pubDate>Thu, 26 Feb 2009 05:38:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[IE Tester]]></category> <category><![CDATA[Multiple IE]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/2009/02/26/css-%e8%a8%ad%e8%a8%88%e4%b8%8d%e5%8f%af%e5%b0%91-multiple-ie/</guid> <description><![CDATA[自 從用了Firefox，常常會忽略IE的視覺&#8230;寫自己的東西是還沒關係，但如果是接案的網站就麻煩了，尤其很多客戶還是用舊版的IE6，版面會變得非常奇怪&#8230;Orz.. 唉~ 救救網頁設計師吧~ 快更新不然就改用Firefox吧!!~XDD 今天發現的工具是Multiple IE，故名思義就是很多版本的IE都幫你打包好了，勾選你要的版本後，就會裝好，此時就能方便的知道IE部份的視覺如何了~ 後來發現更好用的IE測試工具，IE Tester (by 阿榮福利味)! 就延用至今了!]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/02/26/multiple-ie/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>黃金價格顯示小工具(Widget)-目前暫停使用!</title><link>http://www.mrmu.com.tw/2008/11/06/goldprice-widget/</link> <comments>http://www.mrmu.com.tw/2008/11/06/goldprice-widget/#comments</comments> <pubDate>Thu, 06 Nov 2008 04:43:29 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[widget]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[黃金價格]]></category><guid
isPermaLink="false">http://mrmu.twbbs.org/?p=613</guid> <description><![CDATA[最近對widget程式蠻有興趣的，於是重捨了之前的想法，就是寫一個方便取得黃金價格與匯率的小工具，並且進一步計算成台灣金價的慣用表示法，也就是「每錢黃金的新台幣價格」。如果您的部落格也有顯示金價的需求，那麼這個小工具對您來說應該算是「堪用」的&#8230;什麼？為什麼只是堪用？且聽我慢慢說來&#8230; 如果您對程式不了解也沒興趣，但是想把這個小工具(widget)放到自己的部落格上，那麼請複製下列程式碼，貼到您部落格想顯示的位置就可以了： &#60;script type="text/javascript" src = "http://mrmu.twbbs.org/lookmine/twgoldprice.php"&#62; &#60;/script&#62; 好的，之所以只是「堪用」的原因在於，資料更新大約會有一天的誤差。因為程式是去國外取得金價資料，因此可能會有慢半天至一天的情況。但對於只是想要大致了解現在黃金價格的朋友們，我相信這個小工具還是很有用的。接下來分享程式方面的實作心得，沒興趣的朋友就在此停住吧~ 除非您需要一些助眠效果。 =_= 為了要計算出每台錢的黃金價格，於是我上網尋找有沒有即時提供資料的網站，結果只找到http://ansuz.sooke.bc.ca這個網站有提供RSS可以抓取 (http://ansuz.sooke.bc.ca/rippy/comm-prices/?cnames=AuPM&#38;mode=rss)，附代一提，這裡抓到的是每盎司的黃金價格，不過是美金，所以我還要找到即時的美金匯率才能換算&#8230; 皇天不負苦心人，在http://xurrency.com找到美金匯率的RSS Feed (http://xurrency.com/usd/feed)。於是，材料都到齊了，可喜可賀~ 要把抓來的RSS拿來亂玩有很多種方式，我找到的是magpierss這個opensource 的RSS Parser，於是用php寫了一下簡單的計算方式，便大功告成了。 其實二、三個月前我還不太會用PHP，就想用javascript來寫。後來生出來了，不過因為code需要使用Microsoft.XMLDOM元件，firefox就不能看了，只支援IE&#8230;因此憤而作罷! XD 今天總算可以分享出都支援的解決方案了。 如果還有更好的製作方式，也希望高手不吝賜教!! XD]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2008/11/06/goldprice-widget/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>將自訂的即時新聞widget放進部落格</title><link>http://www.mrmu.com.tw/2008/08/07/news_widget/</link> <comments>http://www.mrmu.com.tw/2008/08/07/news_widget/#comments</comments> <pubDate>Thu, 07 Aug 2008 22:18:51 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[widget]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[網路應用]]></category><guid
isPermaLink="false">http://mrmu.twbbs.org/?p=61</guid> <description><![CDATA[圖1 把自訂內容的即時新聞widget，放進自己的部落格區塊 因為最近想觀察黃金價格的動向，直覺就想把即時新聞放進Blog裡。於是我就開始想「如何把自訂的即時新聞做成widget放在部落格」呢？想著想著就用現成的工具來做應用，效果大概就像上面圖1那樣子。 這是幾天前研究的小技巧，不過沒什麼新東西，是把很多先進介紹過的工具組合起來應用的。另外這樣的應用，也許有更方便的工具可以實現了，不過目前我手邊能用的就是這些工具，所以也沒再研究是不是有新工具能做到這樣的效果了。 首先我找到的小工具是Grazr，也就是這個widget的名字，我們主要是把部落格的RSS或OPML餵給它，就可以即時看到該部落格的文章了，網路上已經有很多Grazr的說明了，這邊我大致再復習一下下，其實很簡單，只要上它的網站，直接給它Feed的網址就好，像下面圖2，在1的部份打上Feed網址，再按2的Update就會生出widget了： 圖2 下面的選項，可以讓你對widget的外觀稍作修改，調整後，下方就出現HTML碼了，真是簡單又快樂。不過我們主要的重點是新聞內容怎麼餵給它？我們到Google新聞取材吧，如下面圖3： 圖3 到了Google新聞，看你想注意哪方面的新聞，就打上關鍵字查詢吧，這個例子我是打上&#34;金價&#34;，查出所有跟金價有關的新聞。這邊要注意了! 如果直接把查詢後上面的網址貼進Grzar的第一欄，就會出現像下圖4亂碼的問題： 圖4 要解決這個問題，我是利用Firefox的外掛元件－Sage來做，我把我要觀察三個關鍵字在Google新聞查詢後，分別將這三個網址加入Sage (直接按圖3網址列後面那個RSS按鈕，再選擇加入Sage)，如果先前已有使用Sage了，就另建一個書籤目錄(此例為&#34;黃金相關&#34;)，要記得進入Sage設定，把資料夾指向該目錄(如圖5.)： 圖5 現在Sage側邊欄只留下要做即時新聞的書籤了，現在選擇Sage的 &#34;選項／OPML匯入匯出／OPML匯出&#34;再按下一步，把OPML 這個xml檔匯出來，開始編輯它(用文字編輯器開它)，它的內容如圖6： 圖6 首先第一行黃色部份是title，就是整個widget的標題列，可以改成自己想顯示的文字。再來看到的紅色部份，是主要的目錄(根目錄，第一層)，我希望讀者一開始看到的就是「黃金」、「金價」、「金飾」這三個目錄，所以我把紅色部份刪除了。再來看到的三組成雙成對的黃標，分別代表&#34;目錄名稱&#34;與&#34;目錄標題&#34;，就直接改成自己要的吧。 再來請將改好的OPML檔 (預設名稱是export.opml)放上網路空間，我是使用Google Page Creator的空間(好用又免錢)放置的。接著把這個檔案在網路空間上的路徑，copy貼進圖2的第一個區塊，按下Update，成功了!!(如圖7)： 圖7 最後只要把HTML碼放進你自訂的Blog區塊就ok了! 來試試看吧!~]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2008/08/07/news_widget/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching 2/60 queries in 0.258 seconds using disk
Object Caching 695/816 objects using disk

Served from: www.mrmu.com.tw @ 2012-02-12 08:40:12 -->
