DanielChou @咖啡座．山很綠．天氣晴: 網頁設計

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

用GoogleMap看核武毀滅範圍

假若有核武攻擊到台灣，你認為影響範圍有多大?
http://www.carloslabs.com/projects/200712B/GroundZero.html
這個網址可以讓你試看看在任何地方若遭遇核武攻擊後，你可以選擇地圖上的某個地點、武器規模大小，從最小的從二次大戰廣島的原子彈到有史以來人類建造威力最強大的核武器Tsar Bomda，紅色部分是高溫毀滅的範圍，你可以想像毀滅的面積有多大。

當然，再怎樣也比不上小行星撞擊，你可以試試看，簡直是上帝的憤怒。

雖不知道該網站的計算理論是否正確，有些人覺得該網站蠻病態的，不過我倒覺得該類應用頗具教育價值，可讓人想像核武的可怕威力，更讓人可省思動用核武會讓地球與人類需要付出無法彌補的慘動代價。

由購物車改寫的電池網站

電池網站終於完成，由購物車網站改寫，客戶所需要的規格表與小常識等都有對應的後台可維護，由於在網路上找不到合適的圖片，上面分類的六個小ICON最後是我用PPT親自設計完成的，沒有太多的美工效果，不過USER將電池資料給更新上去。

開發網頁時常用的圖庫網

Free Icons Web 超過15000個透空PNG檔
famfamfam 超過1000個 16x16 PNG（含各國的國旗）
User Interface Icons 140種 PNG（各4種Size透空的PNG，80x80, 48x48, 32x32, 24x24）
Free Icons 220個國旗的PNG（4種SIze 16x16, 24x24, 32x32, 48x48.）
超過300個ASP.NET網頁用的小ICON
Ajaxload - Ajax loading gif generator（動態GIF檔）
網頁圖標 / 網頁小圖標 / 網頁常用圖標素材 - 模板天下（個別圖檔自行另存檔案，無法打包下載）

這是一個用GAE(Google App Engine)製作出來的一個應用程式，為什麼要介紹它?因為這個工具解決了我長久以來的困擾。

每當我要列印網頁的時候會很討厭邊框內容或文字，那些是我不需要的，可是卻偏偏要一起把它列印出來，既浪費墨水又浪費紙張，看的時候又不美觀，非常不環保。好在有個聰明的人就想到這樣的需求，它寫了一個簡單的網頁工具，把我們要的網頁重新依照自己的需求重新排列或刪除過，列印出自己想要的網頁。千萬別小看這個工夫，有時候可能會讓你省掉很多紙張跟墨水喔。...

這個工具真的很簡單，畢竟還是有些美中不足的地方。
通常我們操作都是選取(我們要的內容)->刪除(不要的內容)->Widen(放寬我們的列印內容，這樣才可節省紙張)，但當我按下[列印]鈕後出來後會發現資料有重疊的現象，該工具把自己最右邊的工具列也一起列印出來了，可能是放寬的內容是100%滿版，結果就造成了內容重疊的問題，不過好在我測試過後還是有可以解決的方法，就是當你編輯好你要的頁印網頁後，去按下瀏覽器的[預覽列印]按鈕，而不要使用該工具的[列印]鈕，這樣還是可以列印出我們要的。

我發覺這個IDEA相當好，技術上也相當簡單，也許改天也可以自己實作一個看看...

以下就是詳細的操作步驟：

1.在該網站中輸入你要列印的網址

2.黃色的是我要列印的區塊，用滑鼠把它選起來。

3.按下[Isolate]把其他的內容刪除掉..

4.將要列印的區塊放寬，按下[Widen]。

5.按下瀏覽器的預覽列印->列印。
大功告成，恭喜你替地球又節省了很多資源。

Google Site 實際應用成果- 企管顧問公司網站建置

很久之前我在GooglePager上建構我自己很簡單的網站，簡單幾個字、放上自己的照片的那種...後來隔了很長一段時間都沒去理它，印象中只能做出很陽春的網頁，後來就把它當成網頁空間放些檔案。

最近在去看那個產品發現變成了Google Site，且後來發現取了一個很特別的中文名字"協作平台"，顧名思義，這跟過去單純的做出自己的網站有很大的差別，它強調協同創作，你可以邀你朋友一起來製作這個網站，填上妳朋友的EMAIL甚至給他適當的權限，大家就可以一起編輯網頁，我認為這是一個可以應用在企業上很不錯的工具，因為你幾乎不需要寫程式就可以實作出網頁，會寫WORD吧?會製作PowerPoint吧?(不要跟我說這些OFFICE你都不會，那我也沒輒了...)。

Google Site讓你所見即所得，一切憑直覺的用力給他寫網頁下去，流暢的操作介面，幾乎沒兩下子就把網站做出來了，以下就是我幫一位親戚製作的網頁 http://sites.google.com/site/ceshiwangyexiaoyizhang/ ...花的幾乎全是打字的時間，其他調整版面或是網站架構的設計變的輕而易舉。

當然囉，..能讓你這麼方便也不是說沒有限制，我發現他不能夠支援JavaScript，更別提可以在這邊用上Jquery，且所有容量限制100MB。

不過這還是可以看個人功力啦，強的人就是可以做出很不錯的效果，再加上它可以支援Google所有產品線(月曆、地圖、線上Office等等、檔案櫃、條列式資料、照片、影片、甚至問卷調查等...)有了這些我相信你的網站內容可以相當豐富了，可以更加期待未來還會有新功能可以加入。

版面配置設計介面

先設計好頁面後，再到後台的版面設計中
選定該頁應該穿插在網站中的哪個位置上

我的Blogger標籤雲設計 - jQuery應用 - Tag Cloud

Blogger內預設的標籤通常都是如下表示：括號內的數字就代表文章的篇數，雖很清楚但覺得很凌亂很醜...

標籤雲(Tag Cloud)就是把括號跟數字都拿掉，將數字化為標籤字型的大小，如下圖所示，你可以看到字體越大的代表文章越多，是不是既直覺又美觀?

因為正在學習使用jQuery，於是就把這個當題目來練習了一下，你可以在Blogger的版面配置上開個JavaScript組件，將下面的程式碼複製貼上使用，雖不是太炫不過也有七分像了，請大家多指教。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a ~ span").map(function(){
var w=$(this).html().replace("(","").replace(")","");
$(this).prev().css("font-size",12+parseInt(w)*1.5+"px");
$(this).html("");
});
});
</script>

P.S. 只適用於Blogger喔!! 其他部落格不支援....

Google Lab內的聲音搜尋檢索!?

這是再GoogleLab內發現的新實驗-Audio Indexing，聲音檢索功能。看來真的Google想要無所不搜，連影片中你講過什麼話"字"都可以做出檢索出來，這種技術可能要橫跨好幾個領域才能達成，不過目前測試階段，只有英文、且也只針對些美國較知名的政治人物所講的話作檢索，不過這個構想看來技術是可達成的，只是需要更多更多的運算比對。