兒童題材「打包」一下也可以輕鬆開網站，每月成長20%？

周末看到一篇文章提到一間叫「KidZui」的兩歲的網路公司，這間網路公司專門做一些給3~13歲小孩用的「上網軟體」。這篇文章是宣布，這個月此公司即將推出新產品「ZuiTube」，從名字就知道，這個「ZuiTube」和YouTube應該會有一點點關係，ZuiTube就是一個專門給3~13歲的小孩子看的視頻影片網站。

聽起來，這似乎不是一般可以做的？
而且，這應該不是第一個專給兒童看的YouTube吧？

嗯。這個ZuiTube網站值得創業家參考的是，它走了一條創業捷徑。猜猜它怎麼做？ZuiTube只整理一下YouTube目前的影片，將其中「普通級」的適合小童觀賞的篩選出來，全部集合在他們網站上，然後再將它的表皮換得很像小孩的兒童樂園，裡面嵌全是YouTube的電視小螢幕！它是「Web 1.0」而非Web 2.0，說實在，這裡頭並沒有什麼技術難度，只要將YouTube現有的影片整理一下，「打包」好放在一個網站，讓小朋友來這個網站慢慢觀賞……這，就是ZuiTube了！
目前ZuiTube已經收集了6萬片適合小朋友看的YouTube影片。Web 2.0顯然就沒必要了，因為這6萬則精選影片，小朋友就算再不寫功課整天看每天看，大概也得花上一年才看得完吧！

這，就讓我們學了一課。原來創業可以這樣做的？
但，這樣的做法，真的有人會來嗎？

有的！這就是今天的重點了兩年來，這間母網站「KidZui」，也是用一樣的手法，目前已經確定有點成功了。這篇文章提到一個不錯的成績，雖然KidZui網站還沒開始賺錢，但從去年七月開始，集團網站每個月都成長了20%，照他們這樣講，今天和當時比，保守來算都已經成長10倍了！創辦人說，這中間，幾乎都沒有花到任何行銷費用。這數字因為KidZui是下載產品不容易考證，但就先假設這數字是真的，然後我們來探究一下──這個「KidZui」的旗艦產品是什麼呢？
它又是怎麼一樣的「手法」？

原來，KidZui就是一個「小孩專用的瀏覽器」。這個KidZui，就和他們ZuiTube的方法雷同，一開站就和其他像PBSkids、Webkinz、Nickelodeon、Club Penguin不同，以上全都是自己開發的遊戲、社群，裝上父母監測系統，但KidZui則讓孩子們自由自在的在網路上悠遊、玩耍，不過，它只讓孩子們看某些特定的網站。這是一個擁有類似Hinet的「色情守門員」功能的瀏覽器！
你說，那很難做耶！那可是要能夠篩選網站，甚至在某個網站突然從普通級變成限制級的時候，即時察覺、即時停止！但，KidZui把麻煩的事都自己刪掉了。它，完全不自己開發「內容」，它仰賴所謂Web 1.0而不是Web 2.0，它基本上就只是拿來一堆「普通級的網址」，「打包」成一個60萬個網站的「頻道」。父母只要下載、安裝了KidZui的Firefox火狐瀏覽器外掛插件，它讓孩子們觀賞這60萬個「安全網站」，也會隨時推薦這60萬個網站其中的幾個網站供孩子們看看、玩玩，這60萬個網站應有盡有，有遊戲網站、影片網站。KidZui說，在這些網站裡，小孩們可以自由的練習他們上網的技巧，不會被限在一個迪士尼樂園，永遠不知道外面的世界！他們為了審查這60萬個網站，還請來了高達200位父母與老師充當「評審團」。除了這個以外KidZui還是有些自己的功能，譬如讓使用者製造一個他們稱作「Zui」的自己的虛擬形象，但基本上，KidZui最基本的功能，只是「打包」起來就完成了。

他們賺錢的模式為「Freemium」，一開始免費就可使用，若要更多的功能則必須付以$7.90美元的月費，或$39.95美元的年費。雖然現在目前養25名員工，還沒到打平的狀態，但，還好這間公司就是因為做的非常清楚的對象，因此一些策略資金也非常容易找到。創辦人一開始充當自己的天使，自己出了50萬的天使資金，後來就成功的找到幾家創投，還包括Starbucks執行長Howard Schultz自己的創投公司的資金，還有出版「哈利波特」系列童書的Scholastic出版公司的資金，一共募到了高達1200萬美元（4億台幣）的資金。KidZui說，目前他們以此模式已經進入了50萬戶美國家庭，這50萬戶家庭的使用模式是，平均每周上網4次，每次平均會看40個網站。而這市場應該有1500萬戶，也就是說現在只有挖到3.3%而已，而且和龍頭「企鵝俱樂部」兩年前的上千萬會員還有很大的成長空間，若它再繼續成長下去，應該可以對投資人有些交待。

KidZui以「打包」來開網站，不必有太多人過來，單單坐擁6萬則影片、60萬個網站，就有一些價值了。而「打包」來開網站，開發成本低很多，這是創業家「投機」的好機會。你能想到哪個族群？先從小孩開始，小學生喜歡看、看得懂、可以看的網站是哪些？中學生喜歡看、看得懂、可以看的網站是哪些？高中生喜歡看、看得懂、可以看的網站是哪些？這些學生都是被父母所禁看的族群，但隨著年齡增長，父母也會變得寬鬆；現在我一看到拿著槍啊、大砲的動畫片就連忙遮住孩子的眼睛，但等他上小學我就不會這麼無聊了。將這些適合某一年齡的網站集合在一起，開一個YouTube集合站、開一個超連結集合站，成為某一個族群之王，等於敲進了一塊非常強壯的基石！

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

圖像替換新技術：狀態域方法

熟悉CSS的開發者一定知道圖像替換技術，也深知它的意義，Dave Shea 曾在他的一篇文章對此做了詳細的總結，參看 Dave Shea's excellent summary ，Paul Young 在分析現存的所有方法的優缺點之後，提出了一種新的方法，並將其命名為「狀態域方法」（The State Method），本文將詳細介紹該方法的原理：

現存方法的缺點：

1.容易失效，例如：圖像禁用或者替換圖像含有透明區域；
2.過於複雜不能迅速可靠的執行；
3.通過js遍歷文檔樹，在頁面加載時出現的閃動不盡人意；
4.可能與一些瀏覽器不兼容

新的圖像替換方法：

新的圖像替換技術需要借助於js來實現，但很容易執行，只需要將一小段js引入到頭部即可。一旦js執行，響應的規則前將附加「.image-on」，只要客戶端的圖片未被禁用，規則就會生效，下面是一條應用到h1「狀態域方法」的聲明：


程序代碼
h1 {
width: 100px;
height: 50px;
}

@media screen {
.images-on h1 {
text-indent: -10000px;
background-image: url(image.png);
overflow: hidden;
}
}


第一條規則總是生效，第二條只有在image未被禁用時生效。「text-indent」使文字偏移於屏幕之外，「overflow:hidden」主要用來在FF下放置錨點在被點擊時其焦點偏移於屏幕之外。

第二條規則包繞在@media screen中，主要用來保證圖像替換只發生在屏幕閱讀器中，而不是在打印狀態下執行。如果不這樣處理，頁面打印時，多數用戶將看到一個很大的空隙而不是有意義的文本。

該項技術執行起來很快。因為文本偏移於屏幕之外，圖像可以包含透明元素，透過圖像本身，你看不到任何文本。Js執行很快，幾乎是瞬時的，它充分利用瀏覽器本身的特性。

方法解析

「狀態域方法」是在一種假定的狀態下，快速使css規則生效的方法，其上下文背景為document，這樣避免了瀏覽器遍歷DOM樹。應用「狀態域方法」有兩個理由：

1.針對用戶的反應，頁面部分內容再格式化；
2.基於客戶端瀏覽器、設備、和其它狀況而附加額外的樣式。

「狀態域方法」通過使用下面的script給html附加一個class。


程序代碼
document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp("\\b" + scope + "\\b"), "");
};

這段js有一點小問題，在示例頁中切換功能並不生效，我重新修改了一下，代碼如下：


程序代碼
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s^)'+cls+'(\\s$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s^)'+cls+'(\\s$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};


上面的hasClass、addClass、removeClass方法借用的是《Pro JavaScript Techniques》提供的方法。如果你使用過jquery，方法將更簡單。

「狀態域」可以通過下面的方法來切換：


程序代碼
if (condition == true) {
document.enableStateScope("myScope", true);
}

如果「狀態域」為「on」，狀態域的名字將附加到規則的選擇器之前，下面這條規則在條件為真時會將錨點的顏色變成blue。


程序代碼
a { color: red; }
.myScope a { color: blue; }

正如你所預想的那樣，狀態域圖像替代技術是通過檢查圖像是否被禁用而工作的。如果未被禁用，將激活「image-on」狀態域，這很直接了當。

檢查圖片是否禁用

該方法檢查圖片是否禁用，並不是請求服務器上的圖片，因為那樣會導致一次額外的http請求。作者創建了一個巧妙的方法。

在大多數瀏覽器中，Image對象可以實例化並追溯到一個無效的URL（http：//0），這樣很容易檢測Image的狀態。如果禁用，onerror事件將觸發，在js文件的開頭，j建立一個新的圖像對像：


程序代碼
var img = new Image();

但是，有兩個古怪的瀏覽器對此方法並不兼容。在Gecko瀏覽器中，不論Image是否被禁用。Onerror事件總是被觸發。所幸的是，另外一種可行的方案可以解決此問題－－給html元素附加一個無效的背景圖片，然後通過getComputedStyle方法獲得style屬性。如果Image禁用，其屬性為none或url( invalid-url:):


程序代碼
if (img.style.MozBinding != null)
{
img.style.backgroundImage = "url(" + document.location.protocol + "//0)";
var bg = window.getComputedStyle(img, '').backgroundImage;

if (bg != "none" && bg != "url(invalid-url:)" document.URL.substr(0, 2) == "fi")
{
document.enableStateScope("images-on", true);
}
}

另外一個富有挑戰性的瀏覽器是safari，如果請求是一個無效的URL，safari的狀態欄將出現錯誤提示，但頁面佈局不受任何影響。如果用戶的狀態欄處於開啟狀態，報錯將一直持續，這很不專業，同樣，作者研究了另外一種可行的方案。如果Image來自於1*1的gif圖像，且被數據編碼。如果Image禁用，其寬度將為0，以下為在safari中測試的情況：


程序代碼
else
{
img.style.cssText = "-webkit-opacity:0";
if (img.style.webkitOpacity == 0)
{
img.onload = function()
{
document.enableStateScope("images-on", img.width > 0);
}
img.src =
"data:image/gif;base64," +
"R0lGODlhAQABAIAAAP///wAAACH5BAE" +
"AAAAALAAAAAABAAEAAAICRAEAOw==";
}
}

最後，對於其它瀏覽器，在開始初始化Image對像時，僅僅需要測試onerror觸發事件。


程序代碼
else
{
img.onerror = function(e)
{
document.enableStateScope("images-on", true);
}
img.src = "about:blank";
}


狀態域是可以切換的

可以創建一個系統讓用戶在文本和替代圖像之間切換。

查看示例

class屬性添加到html之上而不是body或其它子元素之上，主要原因在於在圖像替換之前，body需要全面加載。如果「image-on」不添加到html之上。當狀態域啟用時，將會出現閃動。

圖像替換技術是css中相當重要的一部分。鑒於現存圖像替換技術的缺點，作者花大量時間另闢蹊徑，方法獨到，值得借鑒。

示例下載：tate-scope-image-replacement.zip
翻譯原文：http://www.denisdeng.com/?p=235
英文原文：http://www.sitepoint.com/article/image-replacement-state-scope/

文章來自BLUEIDEA
文章提供BAYSTARS DESIGN網頁設計公司

50個各種各樣的flash加載條

時間多被重複的勞動浪費掉,希望這些flash素材能夠幫助你節約一些時間!
3款精緻汽車儀表加載條
http://www.flashye.com/uploads/txdown/loading/yibiao/001.rar
http://www.flashye.com/uploads/txdown/loading/yibiao/002.rar
http://www.flashye.com/uploads/txdown/loading/yibiao/003.rar
6款隨鼠標移動的加載條
http://www.flashye.com/uploads/txdown/loading/shubiao/001.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/002.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/003.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/004.rar
http://www.flashye.com/uploads/txdown/loading/shubiao/005.rar
12款創意flash加載條
http://www.flashye.com/uploads/txdown/loading/12/001.rar
http://www.flashye.com/uploads/txdown/loading/12/002.rar
http://www.flashye.com/uploads/txdown/loading/12/003.rar
http://www.flashye.com/uploads/txdown/loading/12/004.rar
http://www.flashye.com/uploads/txdown/loading/12/005.rar
http://www.flashye.com/uploads/txdown/loading/12/006.rar
http://www.flashye.com/uploads/txdown/loading/12/007.rar
http://www.flashye.com/uploads/txdown/loading/12/008.rar
http://www.flashye.com/uploads/txdown/loading/12/010.rar
http://www.flashye.com/uploads/txdown/loading/12/011.rar
http://www.flashye.com/uploads/txdown/loading/12/012.rar
26款常用圓形和長條形加載條
http://www.flashye.com/uploads/txdown/loading/yuan1/001.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/002.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/003.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/004.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/005.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/006.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/007.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/008.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/009.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/010.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/011.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/012.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/013.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/014.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/015.rar
http://www.flashye.com/uploads/txdown/loading/yuan1/016.rar
http://www.flashye.com/uploads/txdown/loading/chang1/001.rar
http://www.flashye.com/uploads/txdown/loading/chang1/002.rar
http://www.flashye.com/uploads/txdown/loading/chang1/003.rar
http://www.flashye.com/uploads/txdown/loading/chang1/004.rar
http://www.flashye.com/uploads/txdown/loading/chang1/005.rar
http://www.flashye.com/uploads/txdown/loading/chang1/006.rar
http://www.flashye.com/uploads/txdown/loading/chang1/007.rar
http://www.flashye.com/uploads/txdown/loading/chang1/008.rar
http://www.flashye.com/uploads/txdown/loading/chang1/009.rar
http://www.flashye.com/uploads/txdown/loading/chang1/010.rar
以上所有flash原文地址...

文章來自mr6
文章提供BAYSTARS DESIGN網頁設計公司

網頁設計師必備--企業網站常用中英文對照表

設計師設計網頁經常會為了美觀，在頁面設計中加入許多英文元素~這個文章就將企業網站中經常會出現的菜單和欄目做了一個中英文對照和羅列~對那些英文不太好的設計師來說，是不錯的參考資料~-----------------------------------------------------------------------------------------------------------

門戶網站 portals website
網站導航 site map
公司簡介 profile / company profile / company
公司設備 equipment
公司榮譽 glories
企業文化 culture
產品展示 product
資質認證 quality certification
企業規模 scale
營銷網絡 sales network
組織機構 organization
合作加盟 join in cooperation
技術力量 technology
經理致辭 manager`s oration
發展歷程 development history
工程案例 engineering projects
業務範圍 business scope
分支機構 branches
供求信息 supply & demand
經營理念 operation principle
產品銷售 sales
聯繫我們 contact us
信息發佈 information
返回首頁 homepage
產品定購 order
分類瀏覽 browse by category
電子商務 e-business
公司實力 strength
版權所有 copy right
友情連結 hot link
應用領域 application fields
人力資源 human resource / hr
領導致辭 leader`s oration
企業資質 enterprise qualification
行業新聞 trade news
行業動態 trends
客戶留言 customer message
客戶服務 customer service
新聞動態 news & trends
公司名稱 company name
銷售熱線 sales hot-line
聯繫人 contact person
您的要求 your requirements
建設中 in construction
證書 certificate
地址 address / add
郵編 postal code zipcode
電話 tel
傳真 fax
產品名稱 product name
產品說明 description
價格 price
品牌 brand
規格 specification
尺寸 size
生產廠家 manufacuturer
型號 model
產品標號 item no.
技術指標 technique data
產品描述 description
產地 production place
銷售信息 sales information
用途 application
論壇 forum
在線訂購 on-line order
招商 enterprise-establishing
招標 bid inviting
綜述 general
業績 achievements
招聘 join us
求賢納士 join us
大事 great event
動態 trends
服務 service
投資 investment
行業 industry
規劃 programming
環境 environment
發送 delivery
提交 submit
重寫 reset
登錄 enter
註冊 login
某公司技術支持 powered by skydesign.cn(改成你自己的)
社區 community
業務介紹 business introduction
在線調查 online inquiry / inquiry
下載中心 download
會員登陸 member entrance
意見反饋 feedback
常見問題 FAQ / Frequently Asked Questions
中心概況 general profile
教育培訓 education & training
遊樂園 amusement park
在線交流 online communication

文章來自WOWBOX
文章提供BAYSTARS DESIGN網頁設計公司