顯示具有 網頁 標籤的文章。 顯示所有文章
顯示具有 網頁 標籤的文章。 顯示所有文章

2020年5月5日 星期二

ⓒURL Shortener Boxy



服務名稱：URL Shortener Boxy
服務類型：線上縮網址工具
服務網址：https://src6.blogspot.com/

使用方法：
  1. 在 URL 填入長網址
  2. 按下 Shorten 按鈕
  3. 複製 Short 短網址
貼到你喜歡的地方吧！

後記：
這是站長自己簡單撰寫的縮網址服務，
沒有多餘的廣告或是複雜的驗證，
核心縮網址編碼函數也開放原始碼了，
採用 MD5 碰撞機率極低的寫法，
就算真的碰撞了也只是覆蓋了網址。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2017年10月2日 星期一

ⓒThree.js Stl 3D Viewer

軟體名稱：Stl模型3D檢視器
軟體類型：Web工具
軟體作者：QQBoxy
軟體網址：https://qqboxy.blogspot.com/p/3dviewer.html
軟體說明：
這是站長自己寫的一個Stl模型的3D檢視器，
支援一般的平移、旋轉、縮放功能，
選完檔案後會自動將模型移動並縮放到適當的位置，
此程式純粹前台讀檔沒有伺服器。

後記：
由於某些案子要用到，
所以建了一下這個功能這樣。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2017年7月13日 星期四

ⓒAlways on Top 擴充功能

擴充功能名稱：Always on Top
擴充功能類型：瀏覽器最上層顯示分頁
擴充功能平台：Google Chrome
擴充功能性質：免費
擴充功能網址：

主軟體：
https://chrome.google.com/webstore/detail/always-on-top/amclpcgcmdkdaichklckjepcjjdcmcii?utm_source=chrome-app-launcher-info-dialog

副軟體：
https://chrome.google.com/webstore/detail/always-on-top-app/oppldakpkfhiglmfehedjgideggjhcle?utm_source=chrome-app-launcher-info-dialog

擴充功能安裝說明：
1. 以上兩套軟體都必須安裝。
2. 主軟體為Chrome快捷選單
3. 副軟體為Chrome應用程式
4. 主軟體選單輸入網址，按下APP後，會自動透過副軟體打開網站，如下圖：


後記：
自從Picture in Picture Viewer因為Chrome策略而不支援，
網路上一直沒有找到可以取代的擴充元件，
直到這套Always on Top的擴充元件出現，
它同樣也是無功能表邊框的設計，
讓我再度可以將Youtube獨自開啟一個視窗並在最上層顯示了。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2014年2月1日 星期六

ⓒSublime Text 2 文字編輯器


軟體名稱：Sublime Text 2
軟體類型：文字編輯器
軟體授權：商用永久免費鑑賞
軟體平台：Windows、Linux、Mac
軟體官方：http://www.sublimetext.com/
Sublime Text 台灣：http://docs.sublimetext.tw/

好用工具推薦：
好用必裝的Package Control，點選『View > Show Console』進入Console介面，貼上語法執行：


判斷語法錯誤的工具，點選『Tools > Command Palette』進入Command命令列，輸入『install package』等候網路取得Package資訊，接著輸入『SublimeLinter』查詢，點選項目後即可安裝。

使用Node.js在Console執行JavaScript的方法，以Portable版本為例：
1. 在『Sublime Text 2.0.2 x64』根目錄下放置node.exe執行檔。
2. 在『Sublime Text 2.0.2 x64\Data\Packages\User』目錄下，增加一個文字檔『JavaScript.sublime-build』，內容如下：

3. 按下Ctrl+B就能對目前開啟的JS腳本執行囉

後記：
站長很喜歡建構免安裝的開發環境，在EmEditor後發現的這套Sublime Text也有Portable版本，還有不同平台的版本可供使用，而且具有許多功能強大的Package作為後盾，除了因永久免費鑑賞而偶爾會跳出請購買訊息外，的確是一個非常好用的軟體。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2013年10月18日 星期五

ⓒGoogle I/O style animated Countdown clock

首先這原先是在Google I/O發表會上所放置的倒數計時器，
後經由以下原文之作者所重新整理發布的。

原文來源：http://nijinnarayanan.wordpress.com/2011/01/26/google-io-style-animated-countdown-clock/
原作範例：http://myskrachpad.appspot.com/

這是站長由該網站原始碼再精簡過後的原始碼，
貼到您的網站內之<body></body>內就能運作，
請記得把base.js、box2d.js、io.js下載重新上傳自您自己的空間。

後記：
站長覺得這時鐘真是太炫了，
所以忍不住就去找了一下XD

2013.10.18補充：
由於原始版本程式有小錯誤，
導致時間計算錯誤的問題，
以下是站長稍微修改後的版本：
https://sites.google.com/site/qqboxy/other/GoogleCountdown.rar?attredirects=0&d=1
╔張貼者╦ QQBoxy 1 人回應主題╗
分享至 ：

2013年7月24日 星期三

ⓒPortable Node.JS+npm+express Windows開發環境建置



必要官方網站套件：
Node.JS(node.exe)：http://nodejs.org/dist/latest/
NPM(npm-1.3.4.zip)：http://nodejs.org/dist/npm/

建置環境：
1. 在任意位置解壓縮npm-1.3.4.zip及放置node.exe於相同目錄。


2. 以目錄『C:\NodeJS』為例安裝Express套件，執行cmd視窗，鍵入『cd /d C:\NodeJS』移動到該目錄，再鍵入『npm install express』開始自動下載Express套件。


3. 建立一腳本『main.js』放置於『C:\NodeJS』目錄，內容如下：


4. 建立一啟動檔『Start.bat』放置於『C:\NodeJS』目錄，內容如下：


5. 執行『Start.bat』即可啟動伺服器，鍵入『http://localhost:1337/』即可瀏覽網頁，如首圖為結果。

參考文獻：
http://book.nodejs.tw/zh-tw/node_express.html

後記：
Node.JS為一具有良好前瞻性之技術，
此乃提供學子基礎學習建置之用，
若有任何疑問歡迎留言指教。
╔張貼者╦ QQBoxy 4 人回應主題╗
分享至 ：

2012年12月15日 星期六

☆簡單實用的愛情時計



寫程式不只是用來賺錢的也能應用在生活中的唷，
站長與閃光在一起後也寫了些簡單小程式來提升彼此的戀愛分數，
其中一個就是『愛情時計』，它是個非常簡單的時間累加器，
用來計算您與戀人共渡了多少的時光，
是不是非常的簡單又能提升彼此的感覺呢ˊˇˋ

如果您也跟站長一樣使用Blogger來撰寫部落格，
可以在版面配置增加一個『HTML/JavaScript』小工具：


先將程式碼中的『2011/11/11 11:11:11』改成您相戀的時間點，
再把程式碼貼上去，並填上您想要的標題即可：


程式碼如下：


很簡單，卻實用，
聽到閃光說我們已經在一起了多久，
是不是會感覺到非常的甜蜜呢ˊˇˋ
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2012年11月28日 星期三

ⓒBlogger空白HTML頁面



舊版：
http://blankhtml.blogspot.com/

新版：
http://newblankhtml.blogspot.com/

後記：
在站長的許多Blogger都使用了這樣的技術，
但都是採舊版空白網頁的修改方式，
而這次的範例是參考了這篇文章的新版範例後，
稍微修改了些問題以後所釋放出來的Code，
用法不解釋，會用到的人應該也略懂HTML吧...。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2012年8月27日 星期一

ⓒSyntaxHighLighter 3.0.83 高亮程式碼


軟體名稱：SyntaxHighlighter 3.0.83 高亮程式碼
軟體類型：網頁高亮工具包
軟體性質：免費軟體
軟體大小：無
官方網站：http://alexgorbatchev.com/SyntaxHighlighter/
原始碼站：https://github.com/alexgorbatchev/SyntaxHighlighter
GoogleCode：http://code.google.com/p/syntaxhighlighter/
軟體簡介：
SyntaxHighlighter是一個使用JavaScript撰寫的網頁高亮程式碼工具。

使用範例：
http://codeboxy.blogspot.com/

以下是在Google Blogger的使用方法 ~

1. 登入後台，進入『設計』的『修改 HTML』在Head之中放入：


2. 在『網頁元素』新增一個『HTML/JavaScript』工具，
標題請空白，並放在網頁下方以方便讀取完網頁後再執行。

3. 在此工具內容填入：


後記：
新版已經出很久了，
但最近站長發現在複製程式碼時，
有著嚴重特殊字元空白或問號亂碼問題的BUG，
而這個問題在官方論壇已經有人提供解答，
上面提供的都是修正好BUG的教學碼，
有需要的朋友請自取。

2012.8.8更新：
今天修正一個在Chrome底下行號距離的問題 :)
FYI

2012.8.27更新：
修正行號距離在長程式碼下的問題 :D
╔張貼者╦ QQBoxy 7 人回應主題╗
分享至 ：

2012年1月31日 星期二

ⓒYoutube內嵌白色iframe播放器


Youtube預設嵌入播放器是黑色的風格，
在白色系的部落格上難免會感覺不是很搭，
那該怎麼辦呢?

這是從Youtube的>分享>嵌入 所得到的語法：
<iframe src="http://www.youtube.com/embed/ojW0Bpm1TJ8" width="640" height="360" frameborder="0" allowfullscreen></iframe>

只要在語法中加入紅色這一段就可以改成白色風格囉！
<iframe src="http://www.youtube.com/embed/ojW0Bpm1TJ8?theme=light" width="640" height="360" frameborder="0" allowfullscreen></iframe>

範例：
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年11月6日 星期日

☆ChatBoxy - 閒聊方盒子

中文名稱：閒聊方盒子
英文名稱：ChatBoxy
目前版本：2.3
軟體作者：QQBoxy (Hoi)
軟體類型：網站小工具
軟體性質：免費軟體
軟體支援：IE6、IE7、IE8、Firefox、Google Chrome
開放原碼：http://codeboxy.blogspot.com/2011/11/chatboxy.html
官方網站：http://qqboxy.blogspot.com/
使用範例：http://qqboxy.blogspot.com/p/chat.html
授權使用：創用CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款
軟體特色：
『 ChatBoxy 』是一個免架設資料庫伺服器的簡易JS即時匿名留言板，具有基本修改暱稱、變更暱稱顏色、發送留言、留言時間、更新留言內容、鍵盤發送留言...等功能，還能夠辨識網址自動轉換超連結、Youtube、圖片，並能依圖片大小自動縮放顯示之尺寸。相容於市面上各大瀏覽器，採用純JavaScript前端語言撰寫，免外掛函式庫輕巧不佔空間，搭配Google試算表做為資料庫使用，適合小型網站或部落格作為公開留言討論的網頁小工具。

使用說明：
1. 點擊Ghost文字可修改暱稱。
2. 點擊顏色方塊可修改暱稱顏色。
3. 輸入FPS可改變留言即時刷新速度，
建議設置為1000以上即1秒鐘掃描1次清單，
當您網路負荷過重時請調高此數值。
4. 在訊息中網址前後空格將自動轉換網址為超連結、Youtube、圖片。
5. 網址為Youtube會自動產生播放按鈕及縮址。
6. 圖片小於200x200將直接顯示圖片。
7. 圖片介於200x200 ~ 800x600之間會自動換行。
8. 圖片大於800x600會自動縮圖並換行。

安裝說明：
1. 動態教學→點我
2. 試算表六格語法：
工作表1 -
n


t


c


工作表2 -
n


t


c


3. 設定完畢後即可開始使用。

參考文獻：
1. [貳夢の弦] 邪門Google運用 - JavaScript 留言板
2. [P2PU] Embed Google Form, Spreadsheet and Templated Report
3. [ACC文藝青年創譯站] 使用Google Docs製作留言板

致謝網友：
1. gaekeamql(U-tao芋頭)
2. Mesak
3. 蒼時弦や
4. RISK
5. 洞洞君
6. 長頸鹿

後記：
慣例的後記，
嘛...搞了很久才弄完教學...
有需要的朋友就拿去用吧，

未來估計還會開發3.0版本，
會改採留言訊息序號設計以刪除舊訊息插入新訊息的方式，
應該會更有效應付長訊息清單，並提昇整體執行效率，
反正只要Google不改變試算表單設計這個留言板就是永存不滅的這樣，
唯一限制大概就是40萬個儲存格吧...(很遙遠!?

2015.06.08 - 拿掉了concatenate，解決Google試算表的Bug問題。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年10月29日 星期六

ⓒGoogle Blogger Navbar CSS3 淡出


前年站長有寫過一篇關於『隱藏Bolgspot部落格上排的navbar』的文章，
近來來CSS技術發展非常快速，
CSS3的出現也為網頁帶來更全新的面貌，
那我們的Navbar也該來個小小的升級，
也許我們可以應用一下CSS3的Animations技術，
讓這個Navbar有個淡出的效果啦。

現在就在你的部落格貼上以下的CSS3語法：


說明：
如果你不清楚要貼在哪裡，
請先進到部落格後台畫面(如圖)
點選『範本』 > 『 修改HTML』後(修改之前請記得先備份)，
試著搜尋找到這行『]]></b:skin>』然後貼在它的上面(不保證每一款風格貼法都相同)。

PS：支援Google Chrome、Firefox，但不支援Internet Explorer。

關鍵字：Blogger、navbar-iframe、Hide、Google部落格、隱藏、淡出、上排、導覽列、CSS3、Animations。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年10月20日 星期四

ⓒSyntaxHighlighter 3.0.83 增加 Lisp 語言支援


由於SyntaxHighlighter 3.0並沒有支援Lisp，
所以站長在網路轉了一圈找到有份由 Haugen 所製作2.0版的腳本，
增加方法很簡單的請把下面原始碼代回去存成『shBrushLisp.js』放到『scripts』目錄底下即可，
使用時brush請指定為lisp就能使用了。

╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年8月21日 星期日

☆噗浪透明CSS - Part2


CSS樣式：


背景圖片『plurk_background.jpg』請各位自行更換。

噗浪台灣圖示來源：這裡

後記：
這次改的比較不一樣，
河道上的噗沒有隱藏而是顯示的，
時間軸也保留了框線與文字，
這樣應該會比先前改的還要實用些，
比較容易讓人觀看。

本次應該還是僅支援Chrome、Firefox不支援IE，
站長對CSS僅略懂，還不足以對抗IE，
Karma字樣不曉得怎樣消掉...(汗"

相關連結：
噗浪透明CSS - Part1
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年7月28日 星期四

☆噗浪透明CSS - Part1




如果你愛台灣可以再加上這幾行(來源)：


後記：
因為剛剛改了噗浪風格所以把它貼了出來，
這次是稍微有仔細看過後從頭到尾一行一行去改的，
不像以前都是先捉別人的再去用修改的方式，
雖然那樣省時間但是都不知道對方到底改了啥，
我改的方法是非常原始的，
幾乎沒有去動到其他的樣式元素，
僅僅是做alpha透明而已~

注意：
我只在Chrome上測試，
IE6並不支援...


相關連結：
噗浪透明CSS - Part2
╔張貼者╦ QQBoxy 7 人回應主題╗
分享至 ：

2011年7月7日 星期四

ⓒ使用MathJax在網頁顯示LaTeX方程式

官方網站：http://www.mathjax.org/
官方下載：http://www.mathjax.org/download/
語法範例：
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>
<script type="text/javascript" src="../MathJax.js"></script>
<p>
\begin{align}
\dot{x} & = \sigma(y-x)
\end{align}
</p>
後記：
當您處於區域網路環境下，
如何在網頁上顯示LaTeX方程式，
MathJax也許是一個不錯的方法，
介紹給各位參考，
若僅需在網際環境下顯示可參考這套更簡單的。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年5月4日 星期三

ⓒPHPFreeChat 1.3 語系個人修正版


軟體名稱：PHPFreeChat 1.3
軟體性質：免費開源
軟體類型：線上聊天室系統
軟體功能：聊天打屁
軟體語系：多國語言
軟體下載：Google Site
修正內容：
修改官方版本語系檔以解決繁體中文化語系顯示錯誤問題，以及修正日文語系顯示錯誤問題。

後記：
總之就是站長討厭讓使用者看英文，又裝了以後發現官方中日文語系有點問題，所以自己修改了語系檔如此而已，其它都跟官方一樣，可以僅把語系檔拷貝過去覆蓋您原有相同版本之聊天室系統:)

關鍵字：PHPFreeChat、1.3、台灣、繁體、中文、日文、語系、語言、修正。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年4月13日 星期三

ⓒ回到舊式Google beta版字典的方法


從下面的網址進去就可以回到那熟悉的舊版畫面了...

網址：http://www.google.com.tw/dictionary?langpair=en|zh-TW

後記：
站長也是突然間超不熟悉的，
很高興終於可以用回舊版了。

關鍵字：Google、dictionary、beta、字典、習慣、新版、舊版、舊式、恢復、改回、回歸、修改。
╔張貼者╦ QQBoxy 2 人回應主題╗
分享至 ：

2011年4月12日 星期二

ⓒClosure Compiler 網頁js壓縮工具

工具名稱：Closure Compiler
工具類型：壓縮工具
工具性質：免費軟體
工具下載：
線上版 - http://closure-compiler.appspot.com/home
下載版 - http://code.google.com/p/closure-compiler/downloads/list

工具說明：
Closure Compiler是一個JavaScript最佳化編譯器。它分析你的JavaScript，消除重複或無效的code。還能檢查語法、變數引用和類型，並警告有關常見的JavaScript的陷阱。應用在許多Google的JavaScript程式，包括Gmail、搜尋引擎、地圖和文件。

後記：
站長許多網站都使用著js來讓網頁檔更乾淨，
但是這些js檔內都會有自己做的註解，
有了Google這個工具不僅能夠讓這些註解消失，
還可以有效提升整體讀取的效率，
可以讓網站有更好的競爭力唷。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：

2011年3月27日 星期日

ⓒPHP dirLIST 0.3.0 繁體中文化


軟體名稱：PHP dirLIST
軟體性質：免費軟體
軟體類型：PHP目錄管理工具
軟體官方：dir-list.sourceforge.net
軟體譯者：QQBoxy
總集清單：Google site
軟體載點：Google site

注意：
本軟體可能不支援中文目錄，
雖然一般情況也不會用到中文...。

後記：
這套軟體是昨天無意間發現的，
站長覺得還不錯用就把它繁體中文化了，
有需要的朋友就把它帶回家吧^-^

關鍵字：PHP、dir、list、directory、清單、目錄、資料夾、管理、工具、個人、中文化。
╔張貼者╦ QQBoxy 0 人回應主題╗
分享至 ：