/ IE10

[黑客松] IE Hackathon 心得

其實這是第一次參加黑客松的活動,以往對於寫程式這件事情,其實都只是抱持著相當的興趣去作。這次因為 上官大人 的邀請,所以想說來體驗一下整天 吃喝玩樂 寫程式的感覺是什麼。

是說,我好像也沒有做出什麼好玩的東西就是了(蹲牆角

IE 10

這次的主題是 IE10,所以只要是 IE10 能夠運行的東西都可以實作。現場也準備了一本小冊子,讓你知道 IE9/IE10 的一些特性這樣。雖然我平常是反 IE 那一派的,不過 IE10 對我來說,也真是讓人驚豔的一次。

主要的目標有

  • touch-friendly
  • interactive webapp/game
  • html5-based OOO slideshow

其實對於 IE 這件事情,如果要回朔到以前的 document.all 也太過於悲情了點。這次的 IE10 真的是有用心專注在新技術的支援與發展上,對於 CSS3/HTML5 的支援度也很亮眼。只是相較於 IE9 就很尷尬了,所以這樣說起來,以後寫網頁標明 IE10+ 也是很合理的(喂

Demo

黑客松最有趣的大概就是最後的 Demo 了吧!雖然我沒有照片,不過現場的氣氛真的是有夠歡樂的。這裡有官方發布的照片可以看看,除了整天都有食物可以餵食之外,剩下的就是努力完成自己想要的東西。

這樣的 Demo 型態其實我還蠻喜歡的,時限內的腦力激盪,並且在結束後馬上展示自己的成果,無論如何都是一件很刺激的事情。不過,大概是人老了體力不支,所以下午在解一些 IE10 平板觸控問題的時候,有點力不從心的感覺。

Issue

我這次的實作,是用自己開發的 jQuery iPhone Slider 來作一個相片展示。但是因為完全沒接觸過 Windows 8 平板的裝置,所以在這上面遇到了不少問題。所以,幾乎整個下午都是在改 plugin 讓他可以在 IE10 上面正確的運作。

當天所遇到的情況大致上有,

  • 觸控狀態在 IE10 叫做 MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOut
  • 另外還有 MSGesture object
  • MSPointerMove 我當天無法連續取得手指拖曳的點,用 MSGestureChange 才解決
  • -ms-touch-action: none; 利用 CSS 停用特定區域的指標與手勢操作
  • dropdragover 要同時 preventDefault()stopPropagation() 才能拖曳檔案進來
  • jQuery 取得 touch Event 取出方式與 Chrome, Firefox, Opera 都不同
  • IE10 的 event.originalEvent 本身就是觸控 Event Object,其他還得加上 .touches
  • 上述的元件 IE10 與其他家瀏覽器略有不同
  • 原生 Canvas 的操作方法在 IE10 上面可以正確使用

其實,我對於 Windows 8 的平板還蠻感興趣的,只是說平板上面要操作 Desktop 環境,對一般人來說可能會覺得很彆扭。不過,如果是單純的以 App 的環境來看,他的確是不錯的一個操作體驗。雖然虛擬鍵盤感覺蠻悲劇的,但,我想其實每一家的平板,虛擬鍵盤其實都很難操作就是。

小結

這次感謝上官的邀約,第一次黑客松的處女秀就給了上官大人了(羞

這是 我的 Demo,也沒什麼哏就是了。你可以用 Drag&Drop 拖曳多個圖檔放進去,他會填滿 slider 這樣而已,然後為了怕瀏覽器爆炸,所以圖檔有限制 500KB 的大小這樣 XD

最後放一下 當天 Demo 的照片