Web Develop分類文章　顯示方式：簡文 | 列表

June 29,2006

2006.06網摘 -- 很讚的無線網路咖啡館列表


[ 生活篇 : ]

[ 網路篇 : ]

[ 技術學習篇 : ]

[ Google篇 : ]

...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 9:17 │ 回應(0) │ 引用(0)

March 13,2006

select在IE中永遠顯示在最上層的問題

在網頁上，如果有某個layer剛好蓋在<select> element之上，照理說，<select>這個選單應該要被layer蓋住才是。這在firefox中是沒有問題的，然而在IE中，無論你怎麼去設它的z-index屬性值，<select>都會直接穿透layer，出現在網頁的最上層。

這是一個已知的IE bug，據說IE 7會修正這個問題 :
IEBlog : For the SELECT few...

當然啦~ 靠IE 7去解，還不曉得要等到什麼時候，網頁程式設計師還是要自己找法子解啦!!~
這邊有篇相關文章，還有一個純CSS的解法可參考，許多熱心的網友也提供了其他的workaround解法，相關的討論請看這裡。
　
...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 16:41 │ 回應(0) │ 引用(0)

March 6,2006

js - Virtual Keyboard


因為有客戶想要一個javaScript寫的浮動式小鍵盤，所以偶這幾天都在找相關的資料。本來以為網路上現成的script應該很好找的說，哎呀~ 沒想到找半天都沒合用的。所以後來乾脆參考別人的，自己改寫了一個螢幕小鍵盤程式。

偶主要是拿這個作品來改版，把原來固定在頁面上的鍵盤改成浮動式，按鍵的style改成比較小巧的，而且使用者可將小鍵盤隨意拖放在頁面上想要的地方。另外，預設平常小鍵盤不會出現，使用者需要的時候，才點選小鍵盤的圖示，來顯示/隱藏小鍵盤。

Screenshot :

有興趣的請自行下載 : Keyboard.zip

參考資料:
Virtaul keyboard :

Drag & drop :

...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 17:38 │ 回應(0) │ 引用(0)

March 2,2006

AJAX初試 - 建立第一個AJAX app

從去年開始，AJAX在網路上就爆紅。其實偶對AJAX流口水流很久了，看了Web上很多新的有趣的應用，也用了不少Ajax based的網路服務，今天終於提起勁，開始來試著實做Ajax based的app看看。

推薦一篇IBM developerWorks上的教學文章 (註1)- Build apps using Asynchronous JavaScript with XML (AJAX)

他有教學範例 (註2) 可以下載，如果你有基礎的java跟HTML/ javaScript skill，看懂這篇文章應該不是難事 (ㄜ...當然還要看的懂英文..^^ )，所以偶在這就只重點提醒一下啦：
  • 一開始在javaScript中要create XMLHttpRequest時，需要注意IE和其他Browsers的create方法不同。
  • 要指定一個callback handler來處理XMLHttpReques的onreadystatechange event。
  • 在Servlet中，需要透過HttpServletResponse，設定HTTP header的 Cache-Control為"no-cache"，這樣Browser才不會cache response output。
  • JavaScript負責整個串場的動作，要知道動作導到那個servlet，負責送該送的資料；要設定收到response的xml後，由那個callback handler處理；還要透過DOM refresh網頁。
  • XMLHttpRequest提供了xml的send / parse / recieve等方法。

引用該文的總結 ==>

AJAX has come a long way since its inception. We believe AJAX can be applied as more than just a design pattern, though AJAX still has some issues:

  • Browser support for the XMLHttpRequest object can be constraining. Most browsers do support the XMLHttpRequest object, but a few do not (usually the older version of browsers).
  • AJAX is best suited for displaying a small set of data. If you deal with large volumes of data for a real time display of lists, then AJAX might not be the right solution.
  • AJAX is quite dependent on JavaScript. If a browser doesn't support JavaScript or if a user disables the scripting option, then you cannot leverage AJAX at all.
  • The asynchronous nature of AJAX will not guarantee synchronous request processing for multiple requests. If you need to prioritize your validation or refreshes, then design your application accordingly.

Even with these potential hiccups, AJAX still stands as the best solution to enhance your Web pages and resolve page-reload issues.

應用AJAX技術應該要有一個心態，它很炫也很好用，可是並不是所有web app的萬靈丹。而且因為它的資料不同步性，又可及時更新網頁，在頁面設計跟process-flow上更必須考慮周詳。此外還必須考慮到如果沒辦法用javaScript時，應用程式主要功能是不是還是可用。個人覺得可以局部用，但是不適合整個網站狂用，用的過頭會給使用者很花的感覺。^^

註1 : 免費註冊一個使用者ID，就可以進去看IBM developerWorks上的文章了，裡面resource很多，不看可惜喔。 : )
註2 : 要注意下載的範例檔案，原先檔名是wa-ajax-Library.war，下載完必須先改檔名為Library.war，再deploy到Tomcat上，這樣範例才能正常跑起來。 ...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 18:02 │ 回應(0) │ 引用(0)

February 13,2006

IE Developer Toolbar Beta2


燒喔~ Developer Toolbar Beta2開放下載囉!~
由此下載 ==> Download details: Internet Explorer Developer Toolbar Beta

新版有以下的更新 :

  • You can now selectively enable and disable CSS parsing.
  • The Misc menu contains a color picker.
  • Several link reports are available.
  • When you select an element in the DOM element tree list, the
    selected element scrolls into view if it is not already visible in the
    browser window.
這工具對偶來說還蠻有用的，尤其是他的DOM explorer有個"Find Element by Click"的功能，可以很有效率的找到網頁上某個element，直接看他對應的程式碼, css等，就不用自己很辛苦的去看source code囉。推薦給web developer用~ : )

...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 11:28 │ 回應(0) │ 引用(0)

January 17,2006

javaScript - 去除換行字元

今天同事問偶一個js問題 -- 要怎麼去除textarea中的換行字元。

底下是一個很簡單的方法，用String的replace method搭配regular expression，把\r\n, \r或\n這三個換行字元改成一個空格：
FAQTs - Knowledge Base - View Entry - How can I filter out line breaks from a TEXTAREA before submitting?
...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 11:15 │ 回應(0) │ 引用(0)

October 4,2005

IE的Developer toolbar beta

IE跟Developers之間的距離會越來越近ㄇ? ^^..

之前曾經在這邊介紹過一個IE的Accessibility Toolbar，最近又出現了一個IE的開發工具 -- developer toolbar。看他的功能介紹跟Firefox的web developer其實差不了多少，YA~~ 終於可以在IE裡面看DOM structure了!!~~他還提供了一個尺規工具可以量網頁元件的長度，應該挺實用的。

偶這邊把這三種工具的screenshot列出來如下 :

IE的Developer Toolbar --

IE的Accessibility Toolbar --

Firefox的Web developer --


Posted by lunabsb at 樂多Roodo!│ 0:12 │ 回應(0) │ 引用(0)

August 6,2005

IE的Accessibility Toolbar

Firefox有一個Web Developer的擴充套件，對網站開發者來說，功能蠻多蠻實用的，其中一個功能是可以直接在Browser裡面標示出各個element，在看網頁的layout時真的很方便。
可是有些Web Application，就是只能用IE開啟，所以沒辦法用Firefox的 Web Developer，殘念阿~~

=.=....偏偏偶案子上做的Web Application就是這一型的。害偶只能鼻子摸摸，有需要看別人網頁的design時，就只好把那一個網頁另存新檔，然後再由IDE去開啟 (例如WSAD的Page Designer)，這樣一來，至少不用從source code裡的一堆<tr><td>去對呈現出來的的layout。

現在有個這個Web Accessibility Toolbar (網頁親和力工具列)，雖然toolbar的重點是在改進accessibility上，不過有許多其他的功能，在看這些只支援IE的web app應該會有幫助。

用用看吧!~ : )

...繼續閱讀

Posted by lunabsb at 樂多Roodo!│ 14:50 │ 回應(1) │ 引用(0)

Tips to Migrate apps from Internet Explorer to Mozilla

推薦一篇好文 - Migrate apps from Internet Explorer to Mozilla

網站的開發人員應該很了解這種困擾吧~~ 在開發網站時，Browser的相容性其實是個很頭痛的問題。因為各家Browser的behavior都不相同，就算你都follow standard去開發，哈！就是有的browser不支援。
到底要怎麼做才能兼顧到Browser相容性，Code又不至於太醜呢？

這篇文章從以下幾個方面去探討：

  • Differences between Mozilla and Internet Explorer
  • DOM differences
  • JavaScript differences
  • CSS differences
  • Quirks versus standards mode
  • Event differences
  • Rich text editing
  • XML differences

Posted by lunabsb at 樂多Roodo!│ 0:20 │ 回應(0) │ 引用(0)
 [1] 
回頁首▲