聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

三月 28, 2014

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» html5-boilerplate 打算不支援 IE8 瀏覽器

html5 boilerplate 是一套免費前端 Html5 模板,裡面支援 Normalize.cssjQuery (透過 Google CDN 或本地端讀取) 及 Modernizr,目前支援 IE 8 以上瀏覽器,但是最近看到官方正在討論是否該拿掉 IE 8 支援,原因是 Microsoft 今年宣佈 2014 年 4 月 8 日以後將不再支援 Windows XP,討論中也提到目前 IE 8 的市占率,其實還不小,雖然大部分使用者可能來自亞洲

討論列也有人提到,是否可以跟 [Google 一樣直接捨棄 IE8 及 IE9],可以看到

As previously announced, Internet Explorer 11 launched on October 17, 2013, and as a result, we’ve discontinued support for Internet Explorer 9.

Google 的做法相當棒

At Google, we’re committed to developing web applications that go beyond the limits of traditional software. Our engineering teams make use of new capabilities available in modern, up-to-date browsers. That’s why we made the decision last year to support only modern browsers, which also provide improved security and performance.

十一月 12, 2013

Yuren's Info Area
yurinfore
Yuren's Info Area is about »

tag cloud

» Mozart - HTML5 音樂指揮家遊戲

今年我們在 Node Knockout 2013 上面做了一個音樂指揮家的遊戲,可以用手機瀏覽器控制電腦瀏覽器播放音樂的節奏,並且實驗性的支持不同電腦發出不同聲部的音樂,就像交響樂團一樣!下面是我們的 DEMO 影片:



製作這個遊戲用到了以下技術:

  • Device Motion event: 用來偵測手機的加速度,[按這邊]偵測你的手機跟瀏覽器有沒有支援
  • WebSocket: 用來把手機的加速度資訊從手機傳到 node.js server 再傳到電腦端的網頁
  • MIDI.js: 播放 midi檔案,據我所知我們應該進行了大量的 patch XD
  • Audio API: 這邊不是我做的所以不是很清楚,不過就我所知有把 midi 音樂切分成不同聲部並且在不同的電腦播放。
  • Canvas: 在電腦端繪出加速度曲線,並且偵測到超過門檻值記錄時間來找到節拍
 晚點我們整理好後會釋出 source code,請拭目以待 :-)

另外如果覺得我們的點子很有趣,請到 [這個網址] 玩遊戲,並且按下左上角的 [VoteKO] 投給我們一票!


二月 13, 2013

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» HTML5 Boilerplate 不再支援 legacy browser

HTML5 Boilerplate 在 V5.0 版本將不支援舊有瀏覽器,包含 IE6/7. Firefox 3.6 (Mozilla 已經不再維護) 及 Safari 4,詳細資料可以參考 V5.0 的 Milestone (Drop legacy browser support) 下一版本會有哪些改變呢?

  • html tag 將不會出現 conditional comments
  • normalize.css 升級到 2.1.x
  • main.css 移除 IE6/7 Hacks 部份

此次重大改變包含移除 IE conditional classes,因為 IE 10+ 將不再支援 conditional comments,至於 normalize.css 轉換到 2.1.x 版本,如果有用 Sass 的朋友們,可以參考我改的 normalize.scss,非常期待 Version 5 出來,會拿掉很多 legacy code。

十月 18, 2012

Yuren's Info Area
yurinfore
Yuren's Info Area is about »

tag cloud

» HTML5 mobile app 練習

這幾天在練習 HTML5 mobile app,決定找一個 Android 底下的 app 來重刻成 HTML5 版本,我挑的是 News & Weather 的天氣部分。



這是一個可以根據你現在地點給你當地天氣的 app,按下右邊靠近上面的驚歎號圖示可以看今天一整天的溼度以及溫度變化,在圖形上面用手指滑動可以看指定時間的溼度。

我找了一下如果要每個小時的溼度與溫度的 Weather API 大多都要錢的,所以最後我接了 World Weather Online 的 API, 但是圖表就換成接下來五天的天氣氣溫變化,當作練習就是了。

成果如下,他只能跑在 Firefox for Android 上面,我沒有針對 Chrome/Safari 等 webkit 系列調整。

  


作完之後有一些感想...

  1. 如果不考慮相容性,現在的 CSS3 真的很強大,以前很詭異的排版方法現在都變得好排多了,我連右上角驚歎號圖示按下去顯示另外一頁都是用 CSS3 完成的,不需要 javascript。
  2. CORS 我還是沒搞定,最後用比較醜的 JSONP 解決。
  3. SVG 雖然好用,不過看起來效能在 mobile 上面還無法接受,目前應該還是用 Canvas  比較好。
  4. CSS/SVG 的漸層效果在 Firefox For Android 上面看起來很差,不知道爲什麼。
然後我很懶惰的沒有做 SVG path 的圓角,看起來好像沒有像是 rect 的 rx,ry 可以直接設定...

Source code 我放在 github 上面,有興趣的參考參考。

十一月 1, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» HTML5 placeholder attribute 在 IE 上顯示

程式設計師在網頁表單上通常會設計很多提示的功能,而在 Html5 提供了 placeholder attribute 這功能,目前 FireFox Safari Google Chrome 都沒有顯示上的問題,唯獨 IE8(含以下)都沒辦法顯示這功能,所以必須透過 javascript 來解決這部份問題了,網路上找到這篇解決方式,底下是原始碼

<!--[if IE]>
<script type="text/javascript">
// A no-dependancy quick and dirty method of adding basic
// placeholder functionality to Internet Explorer 5.5+
// Author: Jay Williams <myd3.com>
// License: MIT License
// Link: https://gist.github.com/1105055

function add_placeholder (id, placeholder)
{
    var el = document.getElementById(id);
    el.placeholder = placeholder;

    el.onfocus = function ()
    {
        if(this.value == this.placeholder)
        {
            this.value = '';
            el.style.cssText  = '';
        }
    };

    el.onblur = function ()
    {
        if(this.value.length == 0)
        {
            this.value = this.placeholder;
            el.style.cssText = 'color:#A9A9A9;';
        }
    };

    el.onblur();
}

// Add right before </body> or inside a DOMReady wrapper
add_placeholder('myInputField', 'IE Placeholder Text');

</script>
<![endif]-->

解決原理其實很簡單,那就先將 placeholder 寫入到 input value 裡面,在 focus event 當下比對 input value 是否等於 placeholder 的值,如果是就清空,反之透過 onblur event 來寫回原先的 placeholder 值,缺點就是如果當 input type = password 的時候會很麻煩。底下提供轉成 CoffeeScript 的程式碼:

add_placeholder = (id, placeholder) ->
    el = document.getElementById(id)
    el.placeholder = placeholder

    el.onfocus = () ->
        if(this.value == this.placeholder)
            this.value = ''
            el.style.cssText  = ''

    el.onblur = () ->
        if(this.value.length == 0)
            this.value = this.placeholder
            el.style.cssText = 'color:#A9A9A9;'

    el.onblur()

# Login Form
add_placeholder('myInputField', 'IE Placeholder Text')

如果有用 jQuery 的話,可以把第二個參數改寫成

$("#input_id").attr("placeholder")

Related View

四月 2, 2011

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» [網站] 好站連結 (八) Android, javascript, CSS, PHP, Perl, FreeBSD, Linux

PHP

CSS

Html5

Git:

Javascript:

FreeBSD:

C/C++

Linux

Python

Android

CodeIgniter

Embedded System

Related View

八月 23, 2010

小惡魔AppleBOY
AppleBOY
小惡魔 - 電腦技術 - 工作筆記 - AppleBOY is about »

tag cloud

» Html5 模板架構(Boilerplate)

今年在 COSCUP 大會上最主流的議題就是 Html5,今天看到一個網站 HTML5 Boilerplate,這網站提一個全新 html 5 模板,自從離開 Dreamweaver 樣板軟體,利用 Pspad 手動撰寫 html,此網站就發揮非常大的用處,提供全新 html,CSS 以及 javascript,支援了底下很多功能: ...詳全文(共366字)

七月 6, 2009
» HTML 5 tag for firefox 3.5

firefox 3.5日前已經release了
最重要的一個新功能我認為是原生支援了HTML 5的Video tag,
也就是未來的瀏覽器不再需要flash就可以直接播放ogg Theora/Vorbis編碼的影片。

測試的方法:

1. 首先先用youtube-dl這隻程式隨便抓一個youtube的flv檔案下來
http://bitbucket.org/rg3/youtube-dl/

2. 透過ffmpeg2theora將flv轉成ogg
http://www.v2v.cc/~j/ffmpeg2theora/index.html

3. 寫一個html檔

<html>
<body>

html5 video test!

<div>
<video controls source src="sample2.ogg" type="video/ogg;codecs=theora,vorbis" autoplay >
your browser does not support the video tag

</video>
</div>

</body>
</html>


網路上也有其他人做了一些fallback to flash/java applet player的方法, 例如這個 http://www.dailymotion.com/openvideodemo 還有一隻 firefox的plugin firefogg http://firefogg.org/ 可以直接在firefox將影片即時編碼+mux成Theora/Vorbis ogg格式後再上傳。

support:

一頁

A Django site.