Ming Apps

Archive for the ‘Javascript’ Category

HTML5 canvas提供了一個很好的機會,

讓大家可以在canvas上畫畫(如筆者在右手邊展示的Chinese Calligraphy 毛筆字 )。

但在iPad/iPhone/Android等智能手機上,

在熒幕上用手指點移的時候,

通常只會向上向下移動整個頁面,

結果在mobile畫不了畫。

那怎辦呢?

就是加入以下的source code,

便可以停止手機瀏覽器本身的移動(Elastic scolling),

並進行你想要的動作。

// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body:touchmove

rewardjs-header

Link: http://rewardjs.com/

過了一年的實習,

結果就Debug了一年哈~

可惜,

Debug的能力看來在這一年返回學習生涯浪費了~

今次為大家介紹的是,

Debug可以贏大獎!

iPad2, Xbox, 好多好多獎品!

暫時要大家懂得為jQuery UI debug~

一至五每日debug最多的,

一星期debug最多的,

一個月內debug最多的

各有各獎品~

是誰想到這個debug大計的呢?

很有趣的concept~

加油啊各位~

jQuery logo

為何1.6會出得這樣快呢?

Google CDN: http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js

這次的Version最明顯的更新,

莫過於Data, Attr和Val三個functions的速度快了許多,

其中Attr的function快了近兩倍!

.

令外對我較吸引的更新是Relative CSS,

意思是可以在不同的style attribut上直接加上你所需要的數值,

例如:


$("div").css("right", "+=28px");

還有更多的效果,Performance Improvements和Bug Fixed,

jQuery, 教人如何不愛你? :P

NOWJS!

Posted on: 2011/04/25

網址: http://nowjs.com/

ming apps nowjs logo

今天一口氣出了三篇Blog!

這個nowjs 是以Javascript(又是Javascript!)的技術,

設計不同的WebApps~

最重要的是Server Side和Client Side的處理都變得更輕鬆了~

看到以下的Create a chatroom in 12 lines of javascript的影片更是嚇倒了筆者哈~

筆者朋友曾經說過在一個Project中,

可以只需利用JS,不用在Web server開Socket,

便可以處理到兩個Browser之間的同步互動!

但做法很奇怪呢,

還是HTML5 websocket好吧?

噢看來筆者的Programming Language Study List上又多了個JS Framework了~

標籤: ,

網址:  http://jquerymobile.com/

jQuery logo

大家對jQuery的名字應該不陌生,

今早介紹的都是jQuery,

不過是jQuery Mobile!

jQuery Mobile顧名思義就是以jQuery技術建立Mobile Apps了~

大家可以利用Web的技術設計Mobile Web Apps的介面,

即是不用學過另一種Language,

已相應學懂了Mobile Apps吧!

最厲害的是他是Cross Platform的!

能在iPhone, Android, Blackberry, Symbian, Windows Phone…

哇,全部兼容!

大家有Mobile上網的即管試一下她的Demo Site!

是因為網頁技術的兼容大家已經處理得太多,

在jQuery Mobile才做得如此快吧~ :P

令人震驚的是,

Mozilla, Nokia 同 Adobe重有唔少公司都係jQuery Mobile既贊助者!

Adobe早前推出左html5 support既Dreamweaver,

如果連mobile apps都support既Dreamweaver真係唔講得笑!

試想一下將來不用再利用objective-c寫介面

全程利用網頁技術便能寫Program,

世界將會發生巨變,因為寫網頁實在太方便了!

當然大家仍需要處理每個UI的設計如何有效針對User Experience了~

學好UI Design Pattern吧~


HTML5 Powered with CSS3 / Styling

CSS3加埋HTML5同Javascript,

效果千變萬化,

令你的網站毫不一樣!

Buttons 按鈕!

Sweet CSS3 Buttons
Ming Apps Sweet CSS3 buttons example

CSS3 Toggle Button Without JavaScript
Ming Apps CSS3 Toggle Button Example

Pure CSS3 Download Button
Ming Apps Pure CSS3 Buttons Example

CSS3 Button Maker
CSS3 Button Makers

CSS3 Gradient Button Generator
CSS3 Gradient Buttons Generator Screenshot

Switchs 開關制!

CSS3 jQuery Switcher
Ming Apps CSS3 jQuery Switcher Screenshot

iOS Style Sliders
Ming Apps CSS3 iOS Slider Screenshot

Links and Menu 超連結及選單 !

CSS3 popup links
Ming Apps CSS3 popup links screenshots

CSS3 Dropdown Menu
CSS3 Drop down menu screenshot

CSS3 Menu Creator
CSS3 Menu Creator

Maps 地圖!

Worldview
Ming Apps WorldView Screenshots

Map Pins
Ming Apps Map Pins Screenshot

希望對大家有用~

學習更多css3的實用功能吧!

原網站: http://www.google.com/webfonts

Step 1: Choose the font you like!

請大家click入上面的網址,然後選擇你想要的字體!

Ming Apps Google Web Fonts - Selection

Step 2: Click on “Use this fonts" tab

Ming Apps Google Web Fonts - Step 2

Step 3: Copy the CSS codes to websites’ <head> tag

Ming Apps Google Web Fonts - Step 3

FINISH!

Google Web Fonts Demo示範網頁!

大家可以自己選擇自己喜歡的字體吧!

Google Web Fonts,

顧名思義,

就是可以選擇自己想要的字體!

大家通常在網頁的字體選擇方面,

擔心其他的電腦並沒有這一種字體,

不同的瀏覽器和電腦所顯示的效果都有不同,

因此在Font的選擇都少了吧?

用了Google Web Fonts字體的選擇便多了!

不用就考慮將字體變圖了吧?


%d 位部落客按了讚: