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

二月 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。

Related View

by appleboy at 12:22 PM under boilerplate , html5 , www (Comments)
十月 18, 2012

Yuren's Info Area
yurinfore
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 上面，有興趣的參考參考。

by Yuren Ju at 3:52 PM under css3 , firefox , html5
十一月 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

by appleboy at 7:38 AM under html5 , javascript , jquery (Comments)
四月 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

by appleboy at 8:54 AM under android , c , c++ , css , embedded system , git , html5 , javascript , linux , php , 好站連結 (Comments)
八月 23, 2010

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

tag cloud

» Html5 模板架構(Boilerplate)

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

by appleboy at 2:53 PM under apache , css , html5 , javascript , jquery (Comments)
七月 6, 2009

拜python教之django光明會支部
timchen119
拜Python教之Django光明會支部 [ 使徒提姆@Python ] is about »

tag cloud

» 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格式後再上傳。

by 使徒提姆 !? at 2:20 PM under firefox , html5 , tips
A Feedjack powered Planet
• A Django site. •
• •