Browse by Tags

Google Maps API地址轉換

將地址轉換成地理座標的程序被稱為 地理編碼 (Geocoding)，Google Maps API亦支援地理編碼服務(注意: 有每天查詢次數不可超過2,500次的限制，申請Google Maps API Premier可以提高到100,000次)，呼叫方法很簡單，使用URL "http: //maps.googleapis.com/maps/api/geocode/json?address=要轉換的地址&sensor=ture或false"，便可得到一份JSON格式的地址座標資訊...

Posted 15 June 2012 08:09 AM 由 Jeffrey | 8 comment(s) 123,140

Filed under: jQuery, HTML5

筆記-網頁內嵌Google地圖與地理位置模擬

終於有機會開始玩HTML5中行動裝置GPS整合應用。 我的第一步是希望能在網頁整合Google地圖，即便實際需求不一定需要顯示地圖，但在開發測試階段，要求開發人員直接由25.1234, 121.5678之類數字判斷結果是否正確未免太不人道，因此用地圖方式呈現特定經緯度資料是絕對必要的。第一個練習題就來試試在網頁中顯示特定經緯度的地圖吧! Google地圖Javascript API已經發展到了V3，整合應用起來相當方便省事，而官方的 說明文件 寫得頗為詳細(甚至有中文)，要上手一點也不困難。以下便是我寫的超簡單的入門範例...

Posted 13 June 2012 07:22 AM 由 Jeffrey | 1 comment(s) 34,112

Filed under: HTML5

小心IMG SRC空字串效應

在點部落看到一篇有趣的文章: IMG SRC為空字串，可能會造成Session不見 引發我的好奇心，<img src="" />會與Session發生關聯實在是件吊詭的事，於是查了點資料，學會些新東西。 原來，<img src="" />在較早期瀏覽器版本上會觸發不同的反應: IE6-IE8會將src視為指向網頁所在目錄的URL、較舊版的Safari/Chrome/Firefox會將src指向網頁本身，新版本瀏覽器(IE要到IE9,...

Posted 16 November 2011 06:57 AM 由 Jeffrey | 3 comment(s) 16,815

Filed under: ASP.NET, HTML5

HTML5 Canvas的Origin-Clean安全原則

前幾天介紹了 如何利用 toDataURL()將canvas繪製結果轉為圖檔的做法，但實際應用時，卻發現常常會冒出奇怪的錯誤: 在IE, Chrome或Safari上出現: SECURITY_ERR: DOM Exception 18 在FireFox則是冒出: 0x805303e8 (NS_ERROR_DOM_SECURITY_ERR) 原來，跟Cross-Site Scripting的限制一樣，HTML canvas也有其 安全原則 ! 簡單來說，可想成每個canvas有個origin-clean旗標...

Posted 02 November 2011 06:47 AM 由 Jeffrey | with no comments 17,845

Filed under: ASP.NET, ASP.NET保安, HTML5

CODE-Canvas.toDataURL()另存檔案

在 HTML5 Canvas塗鴉板 裡，雖然提供了匯出圖檔功能，卻必須由使用者自行在網頁的圖檔上按右鍵另存檔案，只能算半自助的服務。理想做法應比照一般網頁下載操作，在按鈕後直接跳出存檔提示，讓使用者決定存檔位置及檔名等，較符合一般使用者期望。 我在網路上找到Jacob Seidelin實作的 cavas2imgage.js程式庫 ，追了一下程式碼發現是透過location.href = DataURI字串實現由Javascript觸發瀏覽器直接下載檔案，但我發現它有一些缺點: 一來無法指定檔案名...

Posted 01 November 2011 06:39 AM 由 Jeffrey | 3 comment(s) 26,799

Filed under: ASP.NET, jQuery, HTML5

用100行實現HTML5可存檔塗鴉版

這是開發工具程式時的副產品，整理成使用HTML5 Canvas實做手繪塗鴉板的範例(可適用IE9)。 程式結構分成四個主要部分: 第一部分在網頁加入八個不同背景顏色的20x20<div>，掛上click()事件當作點選後指定畫筆顏色的調色盤；第二部分則用同樣概念加入八個20x20的<div>，中央分別放入1x1, 2x2, 3x3, …, 8x8大小的具背景色<div>小方塊，供使用者點選指定畫筆粗細，當調色盤切換顏色時，也會連動變換筆劃粗細小方塊的顏色。 第三部分建立一個300x300的<canvas>物件...

Posted 30 October 2011 11:51 PM 由 Jeffrey | 29 comment(s) 73,094

Filed under: jQuery, HTML5

為網頁加入多點觸控功能

相信大家應該看過不少用HTML5做的繪圖板範例(例如: 這個 、 這個 、 這個 和 這個 )，事實上，只要一個canvas元素配合mousedown, mousemove, mouseup事件，加上幾行Code我們就可以自己寫一個陽春手繪板。不過，這種陽春寫法在iPad、iPhone、Android等觸控平台瀏覽器就吃不開了。 在觸控操作時，自然不會有mousedown、mousemove、mouseup這些事件(難道得抓一隻黃金鼠在螢幕上磨蹭嗎?)，而是另外定義了touchstart、touchmove...

Posted 02 October 2011 10:20 AM 由 Jeffrey | 8 comment(s) 44,323

Filed under: Mobile, HTML5

AJAX動態內容支援回上頁-HTML5篇

昨天提到 在AJAX情境支援回上頁 的做法，Ammon馬上補充重要資訊(再次感謝!!) --- 針對AJAX模式下記錄瀏覽歷程的需求，HTML5 history物件已增加了新功能。(詳情可參考 MDN文件 ) jQuery BBQ透過pushState(), getState()及hashchage事件實現AJAX變動歷程的記錄，而HTML5則是在既有history物件上增加了pushState()、replaceState()方法、state屬性，並在window物件新增onpopstate事件...

Posted 23 September 2011 09:21 AM 由 Jeffrey | 3 comment(s) 32,759

Filed under: Javascript, AJAX, HTML5

2011微軟開發者大會筆記

抽空去了 微軟開發者大會 ，但只來得及參加下午場次，"問導遊"(台語)式地橫跨HTML5、WP7及Silverlight 5三條路線聽了四個場子，即便之前對相關議題已多少有些了解，但還是學到些新東西，寫成筆記備忘: 註: 本文只摘要記載個人觀注的部分要點，並未涵蓋各議題之完整範圍；如各位有興趣深入了解，可期待官方提供的投影片跟現場錄影下載(有大台攝影機全程 蒐證 錄影，應該不是用來監控講師有沒有講錯或抓學員打瞌睡吧? 哈!) What’s New in HTML5 by ericsk...

Posted 22 June 2011 01:45 PM 由 Jeffrey | 2 comment(s) 9,160

Filed under: Silverlight, WP7, HTML5

HTML 5 INPUT新型別之瀏覽器支援概況

我的工作常聚焦於資料維護性質的網站專案，少不了新增修改刪除的CRUD作業，因此<form>與<input>、<select>是我的好朋友。HTML 5針對<input>提出了一些新型別如email、url、date、number... 等"提議"(依現況來看，瀏覽器支援度尚低，好像還稱不上規範)，打算讓瀏覽器針對特別性質的輸入欄位提供較豐富的內建UI支援，例如: 讓<input type=”date” />直接加上日曆選擇器...

Posted 03 June 2011 05:46 AM 由 Jeffrey | 3 comment(s) 11,598

Filed under: HTML5

小試HTML 5 audio

小閃光跟小木頭的英文向來是罩門，國語數學生活成績鮮少需要操心，小學低年級的難度拿八九十分不成問題，但英文總像扶不起的阿斗，即便已排了課後英文班補強，上個月期中考還是各自抱回了六十分跟七十三分，跟其他科目表現形成強烈對比，讓做爹的無法再坐視不管，決定採取行動強行介入。 其實小閃光在唸小二時，我就曾為了搶救她七零八落的英文字彙，擷取課本CD中的字彙朗讀語音轉成MP3，再從網路上找來關聯圖片，用jQuery UI配合Silverlight播放音效，做了簡單的字彙複習及測驗遊戲，希望多少能吸引她的興趣，多點練習聊勝於無...

Posted 15 May 2011 01:29 AM 由 Jeffrey | 11 comment(s) 35,301

Filed under: HTML5

搜尋