目前日期文章:201404 (9)

瀏覽方式: 標題列表 簡短摘要

CSS3線上開發預覽網站

1.  CSS3 Pie

 

 
 

 
 

 

4.  Cascader

 

 
 

 

6.  Button Maker

 

 

 

 

8.  Modernizr

 

 

 

 

 

 

9.  HTML5 & CSS3 Support

 

 

 

 

 

 

10.  CSS3 Gradient Generator

 

 

 

 

 

 

11.  CSS3 Please

 

 

 

 

 

 

12.  CSS3 Cheat Sheet

 

 

 

 

 

 

13.  Ultimate CSS Gradient Generator

 

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

你們中有許多人可能已經聽到過有關CSS3的不少傳言,但是我們現在能真正用到的CSS3技巧又有哪些呢?本文,我將向你展示一些與眾不同的CSS3技巧,這些技巧在一些主要的流覽器中表現良好(如FirefoxChromeSafariOpera流覽器)。這些效果會在不支持的流覽器中降級渲染(如IE流覽器)。使用流覽器特定的聲明,許多提議的CSS3樣式都可以馬上拿來使用。

如果你不知道流覽器的特定聲明是什麼,你只需要記住它們都是CSS樣式屬性前與內核提供商有關的特定首碼。因為CSS3目前還沒得到全面的支援,所以我們需要使用這些特定聲明。具體的形式如下:

Mozilla/Firefox/Gecko流覽器的首碼: -moz-
Webkit (Safari/Chrome)流覽器的首碼: -webkit- (注意:一些Wbkit的首碼只能在Safari下使用,Chrome不支援。)
你可能已經看到了,使用這些聲明的有一個缺點,那就是如果我們想在FirefoxSafariChrome中都得到CSS3的效果,我們需要使用到上面所有這些首碼。也不用驚訝,IE流覽器不支持CSS3,因此也就不像其他主要流覽器有一個特定的首碼聲明。

好了,我們已經講的夠多了,我們馬上嘗試一下。注意:樣式聲明去掉這些首碼就是W3標準的實際規範提議。

關於這個頁面的Demo(實例)說明
所有這些例子都是在這個頁面裡面,如果你不能正常查看實例的效果(或者只能查看部分),那說明你正在使用的流覽器並不支持這些CSS3效果

陰影效果
陰影效果接受多個參數值。第一個是陰影的顏色,它還接受另外四個長度(lenght)值,前兩的長度值分辨是X(水準)偏移量和Y(垂直)偏移量。接下一個參數是反映模糊度的數值。第四也是最後一個值是用來定義模糊的散佈程度。

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

漸變效果
CSS3的漸變樣式剛開始很容易讓人混淆,尤其-moz -webkit的漸變之間還存在不同。在-moz中,你首先需要定義漸變的方向,然後定義起始和終止的顏色。而-webkit的漸變則稍稍複雜一些,首先你需要定義漸變的類型,然後接下來兩個值定義方向,最後兩個值定義了漸變的起始顏色和終止顏色。

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

RGBA顏色模式
RGBA的顏色定義實際用起來沒有給人的感覺那麼複雜,它接受四個參數值,以此是:紅色值,綠色值,藍色值,以及透明度。我們不用hex#16進制值的顏色,我們以RGB的模式來設置顏色,其中,透明度可以設置顏色的透明效果。透明度的取值範圍在01之間,0是完全不透明,1是顏色完全透明。下面這些演示例子的透明度都是0.5,元素的透明度是50%rgba不需要附加任何特定的流覽器首碼聲明。

background-color: rgba(0, 54, 105, .5);

HSL色彩模式(色調H,飽和度S ,亮度L
除了RGBACSS3也支援HSL顏色模式。這給我們在顏色和色調的選擇上提供了充足的餘地。在HSL這種色彩模式中的H代表色調,S代表色度,L代表亮度。色調是色盤上角度值  ,而保飽和度和亮度則是顏色的百分比值。
 
background-color: hsl(209,41.2%, 20.6%);

邊框顏色
要使用這一CSS樣式,你需要分別定義border-top, border-right, border-bottom, border-left 才能獲得下面的效果。你注意到定義一個8圖元的邊框,然後邊框又定義了8種不同的顏色。這因為邊框的顏色數量必須與邊框的圖元寬度值相對應。

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 
文本選擇顏色設置
我不得不要說文本選擇顏色的定義是一個相當激動人心的新功能。當我第一次在CSS技巧上看到這個是,我在覺得它非常貼心。有了::selection這對偽物件(pseudo-element),你可以在使用者選一段文本元素時改變顏色和背景。如果你問的看法,我會覺得這非常漂亮。雖然::selection已經從目前的CSS3草案中移除鳥,但是我們希望稍後它在添加進來。
 
::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}


變形
有了變形樣式,你可以讓元素的外觀在滑鼠懸停時變大。給Scale(比例)值設置一個大於1的數值,元素就會便打。反過來或,如果值小於1,元素的大小就會縮小。除了Scale比例,它還有其他許多不同的變形方式可用。你可以訪問Firefox的開發者頁面,查看它們所能實現的效果

-moz-transform: scale(1.15);-webkit-transform: scale(1.15);

多欄佈局
有了這個新的多欄佈局樣式,你可以給文本呈現類似”報紙“排版的效果。跟在CSS2中的實現方法相比,CSS3中,我們實現這類效果要簡單的多。下面,我指定鳥所需要的列數量,以及分離的規則類型,欄與欄之間的空隙有多大。用起來很簡單是吧
 
-moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;

總結
我希望跟我一樣,對CSS3的這些特性感到激動。他給網頁設計師和開發者更多的力量,並且讓許多方面都簡化不少。現在,我們只需等待所有流覽器支持它。當然,我這裡演示的知識CSS3新功能的冰山一角。如果你想瞭解更多資訊,技巧和説明,我建議你訪問下面這些網站學習。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

我們的網頁因為CSS而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活,只要你發揮創意就能實現很多比人想像不到的效果。特別是隨著CSS3的廣泛使用,更多新奇的CSS作品湧現出來。這篇文章給大家帶來的是純CSS繪製五角星、六角形、五邊形、六邊形、心形等等。


Star (6-points)


#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}


Star (5-points)




#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}


Pentagon



#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}




Hexagon



#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}


Octagon



#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}


Heart



#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

joomla網站多語系簡繁設定

鼎益盛獨家開發的joomla元件功能

通常多語系網站上都會有一個切換的語系的控制區或選項

或是用IP地區來判定語系

但是這些做法對鼎益盛來說都已經落伍的古老方式了

你怎麼能確定在大陸的華人就一定是簡體使用者呢?

相對的,在香港或馬來西亞的華人就一定是繁體嗎?

因應 鼎益盛許多國際客戶的需求,我們將網站的UX技術精進的更符合使用者習慣

 

鼎益盛獨家開發了joomla自動轉跳語系的外掛功能

讓簡體使用者一打開網站就直接顯示簡體

不需要再多一個手動切換的動作

測試方式-->將瀏覽器更改語系開啟網站後便會自動顯示語系

joomla簡繁語系切換多語系網站2

 

joomla簡繁語系切換多語系網站  

 

 

 

 

joomla簡繁語系切換多語系網站4  

 

joomla簡繁語系切換多語系網站  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

人人都知道上網的人對於網站的速度耐性有限,所以你的網站的效能和顯示速度,是網站的可用性,甚至成功與否的關鍵。Jacob Gube 在他的網誌分享了 20 個線上測試網站速度的工具,可以用來測試網站的速度,和找出哪裡是效能的瓶頸,他建議你同時運用其中數個工具 (沒有一個工具具備所有功能),作為恆常性的測試手段。

1. Page Speed Online

Google Page Speed Online

Google 的 Page Speed Online 是瀏覽器 Chrome 網站開發擴展元件 Page Speed 的網上版,它根據 Google 「網頁效能最佳做法」(Web Performance Best Practices) 來分析網站的效能,這是一組 Google 建議的優化前端效能的規則,你可從這個方便的工具得到大量的資訊,其中包括一個流動裝置最佳效能的最佳做法分析。

2. Pingdom Tools

Pingdom Tools

Pingdom 是一間提供伺服器、網絡、和網站的檢查服務的公司,它的免費線上網站速度測試工具,提供幾個頗有用的報告,包括網頁中每一個物件的下載時間 (如圖像、樣式表、和 JavaScript 程式庫),和流覽器還存的效能級別等,還有一個很有用的網頁分析報告,提供諸如下載時間、網頁大小和請求訊息等。

3. Free Website Performance Test(BrowserMob)

 

這項免費的網站速度和性能測試工具由 BrowserMob 提供,這是一家提供網站負載測試和監察服務的公司,這項工局提供大量有關網頁速度的資訊,包括平均下載時間、網頁總大小、及網頁物件的數量。它從四個不同的地方連接到你的伺服器,讓你可以得到網站性能的全局視野。

4. Which Loads Faster?

 

這個有趣的工具直接比較兩個網站的下載速度,例如你可以測試一下 Google 是否比 Bing 下載得更快,你可以用它來測試你的網站是否比同類的網站有更好的表現。必須一提,這項工具是一個開源的專案,程式碼存放在 GitHub

5. WebPagetest

WebPagetest

這個漂亮的線上工具測試網頁在真實瀏覽器的渲染速度 (Chrome、Firefox 和 IE),並讓你選擇來自世界各地的數個地點進行測試,它還可以模擬不同的互聯網連接速度 (例如 DSL 及 56K 撥號上網),更可以選擇性地攔截廣告,使你知道那些廣告對網頁的效能負擔有多大。

6. Web Page Analyzer

Web Page Analyzer

這個簡單的網頁速度分析器的第一個版本在 2003 年發佈,可能是最歷史悠久的工具之一,它告訴你網頁的大小、物件和下載時間,它還給你改善效能的建議。

7. Show Slow

 

這是基於同名稱的開源網站應用程式 (Show Slow) 的網上版本,Show Slow 容許你同時監察多個網址,並定期從三個測試工具取得結果:YSlow、Page Speed 和 dynaTrace。順帶一提,使用這項工具需要註冊的。

8. Site-Perf Site-Perf

這個網上的網站速度測試工具體工很多有關網頁渲染時間的數據,例如總下載時間、連接的數量、請求的數量等等。它也有一些附加功能,例如它可以測試一些需要登入的頁面 (你只須提供網頁所需的密碼),也可以模擬不同的互聯網連接速度。

9. Load Impact

Load Impact

Load Impact 的免費線上負在測試和效能工具,給你大量網站處理流量的能力的數據,這個網站效能評估工具可以提供多樣化的圖表,包括用戶下載時間 (由一個自動化的虛擬機器進行)及每秒處理請求的數量。

10. OctaGate SiteTimer

OctaGate SiteTimer是一個相當簡單的線上工具:輸入要測試的網址,它便會輸出一個條形圖,顯示了網頁內所有物件的資訊,包括下載的開始、結束和持續的時間,這項工具對於找出做成網頁下載瓶頸的物件特別有幫助。

其它網站速度測試工具

  • Web Site Performance Test (Gomez) – 實時的網站效能工具,顯示一些如查找 DNS 的時間和連接時間等資訊。
  • Webslug – 它與前面介紹的 Which Loads Faster 相似,這個網上工具會比較兩個網站的效能。
  • WebWait – 一個基本的網站速度計時器,你可以自定發出請求的數量和間隔 (例如在 10 秒內發出 5 個請求)。
  • Website Speed Test (Searchmetrics) – 提供大量網頁速度的數據,包括在各種類型的互聯網連接下的估計下載時間。
  • GTmetrix – 一個使用 YSlow 和 PageSpeed 的線上工具,評估網站前端的效能,提供容易理解的資訊。
  • Website Speed Test (WebToolHub) – 一個相當基本的線上工具,提供諸如如網頁大小、下載時間,下載速度和平均速度等資訊,以表格顯示數據。
  • Yottaa Site Speed Optimizer – 這個網站效能分析器輸出漂亮的報告,使用此工具需要註冊。
  • Zoompf Free Web Performance Scan – 此工具會掃描網頁,並收集有關的網頁效能的數據。你需要提供並驗證你的電郵地址才可以進行測試。
  • Site speed checker – 這個網站速度工具容許你同時測試 10 個網址。
  • Free web site speed test (Self SEO) – 這個簡單的網站速度測試工具讓你選擇輸入 10 個網址同時進行測試。

原文網址:http://www.hkpug.net/2012/03/16/20-20個線上測試網站的工具

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(1) 人氣()

Joomla講師經歷簡介:

joomla講師 aj lin 林玉潔健行大學演講  

i love joomla 講師aj 介紹  

joomla講師簡介  

joomla講師經歷簡介  

joomla講師學校教學  

joomla講師教學演講  

joomla講師介紹 aj lin 林玉潔

鼎益盛網頁設計有限公司經歷優勢:


◆joomla!Taiwan唯一邀請主講客製化應用的網頁設計廠商。


◆全台十場以上joomla客製化程式應用主講。


◆全台灣joomla大型購物網站最多作品集,連同非購物車joomla作品超過100件以上。


◆joomlataiwan2012年度推廣北中南巡迴演講主講電子商務及購物車運用。


◆joomla!Taiwan2010唯一邀請主講客製化應用的網頁設計廠商。


◆joomla2.5素人架站作者 郭順能在書中介紹指名推薦廠商。

◆受邀為Joomla!素人架站計畫Power Pack一書寫推薦序。

◆受邀為資策會app開發課程,手機介面設計講師。

◆受邀為資策會中區joomla架站講師。

◆公家單位企業內訓配合講師。

◆受南開科技大學邀請為業界講師主講joomla架站。


◆受健行科技大學邀請,為四系聯合演講新世代網路行銷。


◆受南臺科技大學邀請為業界講師主講新世代的電子商務。全不懂開始到最後一天能發表joomla成果展。


◆受邀樹人護專主講電子商務應用及joomla架站應用。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

鼎益盛獨家開發joomla電子書ebook套件,利用joomla文章自動產生成電子書之外,也兼具了SEO mata 搜尋優化功能。

讓公家機關及學校單位能發布定期期刊,也能應用在各種屬性行業的電子型錄運用。

簡化了目前市面上電子書製作的不便,只要新增文章就能產生電子書。

joomla電子書ebook套件  

joomla電子書元件joomla線上型錄線上目錄元件  

 

joomla電子書中文套件  

joomla電子書政府機關學校單位期刊電子書製作  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

鼎益盛獨家開發技術

將k2的附件上傳下載功能做二次開發成支援中文檔名,讓公家機關及學校單位能更有效的管理文件及活動。

 

joomla中文檔名joomlak2中文檔名上傳下載  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

宜蘭佛光大學實務實習計劃-joomla架站三天研習營

 

教育部寒暑假實習計畫概念: 讓學生從完全不懂HTML,CSS到最後一天架出一個完整網站並發表創作理念

 

藉由工作職位角色扮演讓同學能夠更了解業界實際運作方式

 

學習與不同部門窗口做溝通協調來完成一個實際的專案

 

本實習計畫強調互動性及訓練學生的邏輯思考與表達溝通的能力

 

研習營的途中會視情況給予學生不同的問題,狀況劇,

 

例如:專案進行的過程中,客戶突然要求改設計該如何處理? 誰要負責協調,工程師IT或網管人員該如何應對

 

讓學生實際了解每個職位的各個執掌分別為何? 在寒暑假實務研習營結束後對於將來的自我生涯規劃也能更有概念

 

幫助學生與社會業界做無縫接軌。

 

 

 

參加對象:資訊應用系 不限年級

 

第一天:理論概念介紹,組別分組討論

 

第二天:實際上機操作

 

第三天:早上做微調,下午開始發表成果

 

活動照片相簿

https://www.facebook.com/media/set/?set=a.10202977620993031.1073741838.1579232949&type=1&l=cb0e308e2d

學生分組joomla作品集成果展網站

http://se.ai.fgu.edu.tw/~s1011227/
http://se.ai.fgu.edu.tw/~s1011179/
http://se.ai.fgu.edu.tw/~s1021814/
http://se.ai.fgu.edu.tw/~s1021226/
http://se.ai.fgu.edu.tw/~s1011222/
http://se.ai.fgu.edu.tw/~s1021811/
http://se.ai.fgu.edu.tw/~s1011207/
http://se.ai.fgu.edu.tw/~s1011181/ 
http://se.ai.fgu.edu.tw/~s1011203/
http://se.ai.fgu.edu.tw/~s1011162/
http://se.ai.fgu.edu.tw/~s1011171/
http://se.ai.fgu.edu.tw/~s1011199/
http://se.ai.fgu.edu.tw/~s1001581/
http://se.ai.fgu.edu.tw/~s1001576/

 

DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_147.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_151.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_153.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_155.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_157.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_194.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_239.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_250.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_255.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_273.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_277.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_10.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_14.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_70.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_80.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_127.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_130.JPG DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_132.JPGDES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_145.JPGDES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_138.JPG   DES鼎益盛_佛光大學joomla成果發表joomla學生教學研習營_289.JPG  1978775_10202993971881793_4464083118655007103_n 10155447_10202993971921794_5202781687220200472_n 10177182_10202977607232687_1729466087_o  

 

 

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

找更多相關文章與討論