網頁除錯觀察的Browser工具FireBug-開發者工具-開發人員工具

當程式人員或網頁設計師在開發網頁時都會遇到一個問題,就是debug不易,不過自從Firefox大行其道後,這個問題被FireBug解決了,使用FireBug可以很方便的知道網頁那裡出了問題,可以直接修改CSS及html dom內容,還可以知道整個網頁到底傳輸了什麼內容及資訊等等,可說是十分好用,Microsoft在其後釋出的Internet Explorer及Google的Browser也都支援了類似的功能,不過更新的頻率並不像FireBug那麼高。

首先介紹IE8的開發者工具

可以由上方工具列的工具->開發者工具 來啟動(或F12)

IE開發者工具1.png

使用開發者工具HTML tab裡的滑鼠指標可以直接取得網頁裡HTML的結構內容

而在這個HTML tab也可以直接修改文件內容或CSS,不過個人並不覺得比FireBug好用

Read More

在pixnet部落格裡增加facebook like 讚按鈕

facebook有需多的外掛元件,可以從facebook developers裡面找到設定並安裝,這裡介紹如何在pixnet blog裡安裝”讚”這個按鈕。

一般不另任設定時,pixnet blog只能固定在某一個區塊顯示"讚"按鈕,像是在公告區塊或是左右側欄,不過這樣子並不太好用,而且也不能自動變換要推薦的文章網址(如何取得like button可參考 [分享] 如何在部落格上放入Facebook的「讚」? ),就像下圖:(facebook plugin like button

pixnet公告版位加入讚

如果要放在其它地方要如何做呢?這裡示範在標題下方依每個標題連結自動產生一個讚的按鈕出來,結果會如下圖。

Read More

[Java]產生SVG向量圖形檔-xml圖形檔

SVG圖檔是一種利用xml及css來製作而成的一種向量圖形,放大或縮小均不會改變其品質,不過當圖形複雜到一定程式時,其檔案也會跟著變大很多,能夠設計SVG圖形作品的軟體工具包括Adobe Illustrator以及CorelDRAW等,要能查看svg檔案裡的圖形可以利用browser像是firefox、chrome都可以直接知道此向量圖形的內容。

Wiki SVG

在Java要輸出(產生)SVG檔很簡單,在Apache 套件裡有一個batik可以很簡單的就生成所要的SVG圖檔,只需要把原本在建立圖檔時使用的java.awt.Graphics2D變成使用org.apache.batik.svggen.SVGGraphics2D來繪製圖形就可以了。

產生的結果圖:

ToSVG.png

Read More