摘要： 日期：2011/11/16 來(lái)源：GBin1.com 記 得幾年前如果你需要添加一些互動(dòng)元素到你的網(wǎng)站中用來(lái)改善用戶體驗(yàn)？ 是不是立刻就想到了flash實(shí)現(xiàn)？這彷佛年代久遠(yuǎn)的事了。使用現(xiàn)在最流行的web技術(shù) HTML5，CSS3和jQuery，同樣也可以實(shí)現(xiàn)類似的用戶體驗(yàn)。而且使用這些特性將會(huì)比使用flash更加有效。也許你可能剛知道Adobe停止開 發(fā)移動(dòng)版flash的消息，雖然在桌面中我們還擁有大量的flash的應(yīng)用，但是隨著HTML標(biāo)準(zhǔn)的完善，可能flash也要退出歷史舞臺(tái)了。在今天這篇 文章中，我們 將介紹一些非常實(shí)用的教程，技巧和資源來(lái)幫助大家構(gòu)建一個(gè)更加豐富的用戶界面。請(qǐng)大家給積極 閱讀全文

摘要： 日期：2011/11/15 來(lái)源：GBin1.com 毫無(wú)疑問，圖形領(lǐng)域的私有軟件使得剛起步的一些其它軟件需要更多時(shí)間來(lái)適應(yīng)。但是這里仍舊有一些非常棒的圖形軟件值得大家關(guān)注。當(dāng)然他們可能無(wú)法取代已經(jīng)被我們耳熟能詳?shù)拇笃放栖浖Ｎ覀円矝]有辦法比較孰優(yōu)孰劣。所有這些都在于我們究竟要用它做什么。這 些軟件是由社區(qū)開發(fā)的，因此我們不能指望它能像Photoshop那樣變化。 這不代表它好或者差。 只是有些區(qū)別。 當(dāng)然可能對(duì)于一個(gè)項(xiàng)目來(lái)說(shuō)我們需要使用不同的平臺(tái)和許可。所以你不得不使用多個(gè)工具完成一個(gè)項(xiàng)目，這也是為什么大家選擇知名軟件例如,photoshop 的原因。GIMPGIMP 是必須要提的軟件， 名 閱讀全文

摘要： 日期：2011/11/15 來(lái)源：GBin1.com 使用程序或者某些工具自動(dòng)生成的Javascript格式有時(shí)候可能會(huì)非常糟糕，這個(gè)時(shí)候如果我們擁有一個(gè)可以自動(dòng)幫助你美化代碼的工具將會(huì)非常的給力！今天我們介紹使用Beautify.js來(lái)幫助你自動(dòng)規(guī)整jQuery代碼。在線工具地址：http://jsbeautifier.org/在線下載地址：https://github.com/einars/js-beautify在線演示 Javascript代碼：$(document).ready(function() { $('.beautify').each(function() { 閱讀全文

摘要： 日期：2011/11/14 來(lái)源：TerryjQuery sparklines是一個(gè)jQuery的圖表插件，可以幫助你快速構(gòu)建行內(nèi)的小圖表，今天我們將使用Sparklines開發(fā)一個(gè)動(dòng)態(tài)監(jiān)視首頁(yè)P(yáng)V變化 的應(yīng)用。希望大家能喜歡，并且多多留言！請(qǐng)點(diǎn)擊演示中的"Click ME!!!"，查看動(dòng)態(tài)PV變化效果。在線演示如果你不知道什么是jQuery sparklines，請(qǐng)查看如下資源：jQuery sparklines官方網(wǎng)站5個(gè)最頂級(jí)jQuery圖表類庫(kù)插件-Charting pluginHTML代碼：<div id="container"> 閱讀全文

摘要： 日期：2011/11/12在線演示Topup是一個(gè)使用非常簡(jiǎn)單的javascript類庫(kù)用來(lái)使用web2.0的彈出方式展示圖片。這個(gè)類庫(kù)基于jQuery和jQuery UI以保證跨瀏覽器的兼容性。提供如下特性：主要特性：絕對(duì)免費(fèi)，甚至對(duì)于商業(yè)使用也同樣免費(fèi)配置非常簡(jiǎn)單，只需要包括一個(gè)include語(yǔ)句，沒有其它更多配置使用Topup能保持你的HTML代碼簡(jiǎn)單清晰，不需要添加多余的代碼能夠顯示圖片，flash，電影(Quicktime, windows media和realplay),iframe, DOM元素和純HTML可以和prototype一起使用能夠使用Yahoo！YUI Compres 閱讀全文

摘要： 這個(gè)文章是適合真正想去做HTML5應(yīng)用的設(shè)計(jì)人員和開發(fā)人員閱讀。這里我將不再重復(fù)HTML5開發(fā)的重要性。因?yàn)榇蠹叶家呀?jīng)知道這點(diǎn)。這里我收集了10個(gè)HTML5的工具幫助你在不同的方面簡(jiǎn)化你的開發(fā)和設(shè)計(jì)。如果你也喜歡這個(gè)文章，請(qǐng)?jiān)谖覀兊木W(wǎng)站GBin1留言支持！1. FindmebyIP一個(gè)列出了所有瀏覽器對(duì)于HTML5支持細(xì)節(jié)的網(wǎng)站。特別適合對(duì)于瀏覽器的兼容有問題的朋友。優(yōu)點(diǎn)是在線，可以方便大家查看。類似的網(wǎng)站還有這個(gè)：Caniuse.com2. Video JS一個(gè)基于javascript的HTML5視頻播放器。擁有三個(gè)部分：一段嵌入代碼，一個(gè)javascript類庫(kù)以及HTML/CSS的皮膚。 閱讀全文

摘要： 日期：2011/11/10 所有的開發(fā)人員都應(yīng)該注意了，你們絕對(duì)應(yīng)該看看這篇文章，幫助你快速創(chuàng)建HTML5/CSS3的開發(fā)框架。可能你也看到過其它的框架，但是你應(yīng)該看看這些框架，因?yàn)槟阋郧翱赡軟]用過他們中的大部分。 看看最新的實(shí)用HTML5和CSS3框架吧！希望你們喜歡！1. HTML5boilerplateH5BP 帶給你非常漂亮的文檔，一個(gè)網(wǎng)站優(yōu)化的編譯腳本，還有一個(gè)自定義的boilerplate編譯器。除此之外，我們還支持lighttd，Google App Engine和NodeJS以及優(yōu)化的服務(wù)器配置（包括Apache， Nginx，和IIS），并且已經(jīng)把boilerplate的大小 閱讀全文

摘要： 日期：2011/11/10 來(lái)源：GBin1Javascript沒有任何內(nèi)建的格式化函數(shù)，這里我們通過Google收集了5個(gè)javascript的數(shù)字格式化函數(shù)，希望對(duì)于大家的web開發(fā)能夠帶來(lái)方便。十進(jìn)制四舍五入這兩段代碼幫助你做到四舍五入，對(duì)于你顯示價(jià)格或者訂單比較有用：代碼1：function CurrencyFormatted(amount) { var i = parseFloat(amount); if(isNaN(i)) { i = 0.00; } var minus = ''; if(i < 0) { minus = '-'; } i = 閱讀全文

摘要： 日期：2011/11/10 來(lái)源：GBin1.com 介紹約 束和創(chuàng)新是一對(duì)天生的冤家，為了更好的提升其中一個(gè)方面你不得不需要犧牲另外一個(gè)方面。同樣的原因造成了設(shè)計(jì)者仍然在黑暗中摸索如果有效的結(jié)合SEO和設(shè) 計(jì)理念。SEO往往遵循著特定的原則，但是偉大的設(shè)計(jì)往往超越了傳統(tǒng)，可能帶來(lái)了互相沖突的地方。但是我們都知道，一個(gè)好的設(shè)計(jì)應(yīng)該是沒有意義的，除非它 能得到在線的關(guān)注。因此，我們將開辟一個(gè)前人沒有嘗試過的方式，來(lái)處理這些令人沮喪的麻煩。下面的這些步驟能幫助你使得“具有SEO意識(shí)的網(wǎng)站設(shè)計(jì)”更加 的具體和明了。敏感性實(shí)驗(yàn)我 研究過不同的網(wǎng)站發(fā)現(xiàn)雖然他們看起來(lái)非常的炫酷但是對(duì)于初次訪問的用戶來(lái)說(shuō)幾 閱讀全文

摘要： Iphone5如此的流行，我覺得我們有必要為我們的讀者收集一套時(shí)尚的iphone墻紙。 知道設(shè)計(jì)和開發(fā)社區(qū)是多么喜歡裝飾他們的移動(dòng)設(shè)備，我們收集了各大社區(qū)最好的iphone墻紙，幫助你更好的裝飾你的iphone設(shè)備。 因?yàn)橛腥绱硕嗟膲堅(jiān)O(shè)計(jì)，我們專注于比較知名的網(wǎng)站和設(shè)計(jì)人員。Veerle’s Blog Download Download Download Download DownloadI Love Typography Download Download Download Download DownloadVlad Studio Download Download Download Do 閱讀全文

摘要： 整合jQuery的全景圖片展示插件，能幫助你的網(wǎng)站訪客更好的瀏覽你的網(wǎng)站圖片。幫助你構(gòu)建虛擬旅程，全景展示和滾動(dòng)，無(wú)限的圖片幻燈，希望大家喜歡！相關(guān)的插件：分享8個(gè)圖片360度旋轉(zhuǎn)展示的jQuery插件1. 360° panoramic view plugin for jQuery一個(gè)全景圖由一系列圖片經(jīng)過軟件合成的一個(gè)廣視角效果。它給予訪客一個(gè)身臨其境的感受。2. jQuery 360* Panorama非常小的一個(gè)用來(lái)生成全景效果的jQuery插件（4Kb）。非常容易自定義，只需要全景圖片，一個(gè)DIV，還有些CSS定義，最后再來(lái)點(diǎn)兒javascript。3. jQuery sph 閱讀全文

摘要： 感謝設(shè)計(jì)社區(qū)的開放性，我們可以讓web設(shè)計(jì)人員，圖形設(shè)計(jì)人員擁有無(wú)數(shù)的網(wǎng)絡(luò)資源。社交網(wǎng)站的發(fā)展使得我們可以擁有一個(gè)展現(xiàn)自己的平臺(tái)，用來(lái)和不同的人分享自己的設(shè)計(jì)和概念。許多人都使用它來(lái)展示自己的作品，更多的人通過它來(lái)發(fā)現(xiàn)自己作品的問題。這里我們發(fā)現(xiàn)了和很多有趣的設(shè)計(jì)和靈感，幫助你拍拖設(shè)計(jì)上頸瓶。希望能幫助你擴(kuò)展你設(shè)計(jì)的思路。個(gè)人來(lái)說(shuō)，我喜歡抽象設(shè)計(jì)，所以這里有很多抽象的設(shè)計(jì)。希望大家喜歡！Simple Desktop一些抽象設(shè)計(jì)的墻紙，我發(fā)現(xiàn)非常有創(chuàng)意，簡(jiǎn)單然后非常具有靈感Subtle Pattern你可以得到所有平鋪的背景，有些可能你很熟悉。一個(gè)非常好的尋找背景的網(wǎng)站PatternTap你可以 閱讀全文

摘要： 昨天介紹了javascript的開發(fā)工具sublime 2 edit，今天我們將介紹如何10分鐘快速配置sublime2支持jQuery開發(fā)。希望大家能喜歡著款jQuery開發(fā)工具。相關(guān)介紹：使用sublime text 2開發(fā)Javacript和jQuery安裝Sublime 2Sublime2下載地址：http://www.sublimetext.com/download 安裝jQuery插件jQuery插件下載地址：https://github.com/mrmartineau/jQuery 安裝配置jQuery插件包以上倆個(gè)都是zip包。先解壓sublime2的壓縮包，因?yàn)槲沂褂肳IN7 閱讀全文

摘要： 來(lái)源：GBin1.com 經(jīng)常聽見大家抱怨javascript開發(fā)沒有好的IDE，當(dāng)然我也同意。但是如果你嘗試sublime text 2后估計(jì)你可能改變這個(gè)觀點(diǎn)。下載地址：http://www.sublimetext.com/download 主要特性：jQuery功能版本：絕對(duì)是我這個(gè)jQuery堅(jiān)決支持者的最愛！你只需要簡(jiǎn)單的輸入$.ajax，然后按Tab鍵，自動(dòng)加載模板。對(duì)于jQuery方法同樣適用。運(yùn)行速度快：快速代碼編輯器，你可以快速查詢，替換代碼中字符串平臺(tái)無(wú)關(guān)：你可以在Mac和windows上使用可定制：你可以自己定制自己喜歡的編碼方式自動(dòng)補(bǔ)齊括號(hào)：這個(gè)非常實(shí)用代碼長(zhǎng)度方便瀏覽 閱讀全文

摘要： 今天繼續(xù)給大家介紹HTML5和jQuery插件結(jié)合使用生成的圖形特效，這里我繼續(xù)使用星際爭(zhēng)霸2的圖片元素給大家介紹一個(gè)360度全景預(yù)覽兵種的特效實(shí)現(xiàn)，希望大家喜歡！請(qǐng)大家多多留言！在線演示 在線下載友情提示：以上演示中圖片使用較大，如果加載不流暢，請(qǐng)下載到本地運(yùn)行。如果你不清楚什么是360度全景預(yù)覽或者不明白R(shí)eel是什么插件的話，請(qǐng)參考這篇文章：分享8個(gè)圖片360度旋轉(zhuǎn)展示的jQuery插件如果你沒有用過jQuery插件Reel的話，請(qǐng)你訪問官方網(wǎng)站：Reel 1.1.3HTML代碼<header> <h1>Starcraft 2 Unit Animation Dem 閱讀全文