顯示具有 網站設計 標籤的文章。 顯示所有文章
顯示具有 網站設計 標籤的文章。 顯示所有文章

2014年1月23日 星期四

瀏覽器版本、顯示裝置解析度的市佔率分佈

在現在處處都是顯示裝置的時代,網頁設計師最常碰到的議題就是螢幕解析度以及瀏覽器相容性的問題,尤其後者,最讓人頭痛的就是微軟的Internet Explorer ,受限於作業系統的相容性,從IE6~IE11這麼多版本根本無法統一,例如 windows xp 最多只能更新到 IE8...
設計人員往往為了要讓絕大多數的訪客有好的瀏覽體驗,就需要花大把的時間解決CSS相容性問題...完全不敷成本

有鑑於此,筆者特地找了不同瀏覽器以及螢幕解析度的市佔率,就讓我們把時間花在刀口上吧!

首先是螢幕解析度的市佔率分佈(2013-10 ~ 2013-12)

接著是瀏覽器版本的市佔率分佈(2013-10 ~ 2013-12)
Source: StatCounter Global Stats - Browser Version Market Share
由數據看起來,IE8 還有8.39%的市佔率,假設加上未列入的榜上的IE6,IE7,算10%好了,需不需要為10%的人付出時間金錢來解決瀏覽器相容性問題,就考驗大家的智慧了^^

2013年5月17日 星期五

HTML 在

2013年5月16日 星期四

Chorme 開發者工具 ─ 模擬各種裝置的瀏覽器

現在行動裝置眾多,且每個尺寸都不一樣...

在開發設計網頁時,就必須考慮到不同的瀏覽裝置的檢視狀況,
以前都傻傻的直接在裝置上瀏覽,結果後來發現原來google大神早就幫我們準備好了工具,而且還內建在Chrome瀏覽器裡面。
可以模擬的裝置包括 IE7~9 , Firefox, iOS, Anddroid , BlackBerry...
而在行動裝置的模擬上,還加上了螢幕解析度模擬、地理位置模擬、陀螺儀三軸模擬...
真的是佛心來的!!

廢話不多說,以下說明如何找到這個功能,以及如何使用:

開啟Chrome瀏覽器後,點擊上圖箭頭方向的按鈕
工具=>開發者工具

再點擊右下角的齒輪按鈕
點選左方Overrides,開始進行相關設定

2013年2月19日 星期二

在Blogger中讓程式碼自動產生格式─SyntaxHighlighter

SyntaxHighlighter 官方網站
  1. 首先要讓blogger認識SyntaxHighlighter
    如下圖,進入blogger管理頁面=>範本=>編輯HTML


    會看到以下畫面
  2. 接著在...之間貼上以下程式碼後儲存即可
    
    
    
    
    
    
    
    
    
    
    
    
    

  3. 以上動作完成後,只要在編輯文章時切換至HTML模式,然後在以下的tag之間貼上程式碼即可:

    <pre class="brush:brush別名">...</pre>

    其中brush別名,可查閱如下表格
語言名稱brush別名檔名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


2011年7月7日 星期四

Open Source 的各種系統

企業入口網站 (Enterprise Information Portal)

Drupal
Drupal 是一個彈性高,模組化強的內容管理系統,不管是想建立部落格 (Blogger),網站架設,電子商務平台,都可完成。
http://tw-drupal.info/
e107
e107 是一套知名的 CMS ( 內容管理系統 ),其架構是由 MySQL 與 PHP 組成。
http://e107.org/

eXo platform
eXo platform 是一套企業入口網站系統 (Portal),適合用來架設公司網站(對外)以及個別員工的資訊平台(對內)。
http://www.exoplatform.com/
Jahia
提供完整的 Portal (又名 EIP)解決方案。
http://www.jahia.org/jahia/Jahia
Joomla
一套由 Mambo 4.5.2 版衍生出來的入口網站軟體。
http://www.joomla.org/
Liferay
Liferay Portal 是一套相當成熟的Java/J2EE portal system,遵循 Portlet API JSR168 的標準。 http://www.liferay.com/
Mambo
用 PHP 來撰寫的架站軟體。
http://www.mamboserver.com/
PHP-Nuke
使用php+MySQL建立一個入口網站
http://www.phpnuke.org/
Plone
一套以 Zope來開發的網站內容管理系統,適合以群組合作方式來建立網站內容。
http://plone.org/
Xoops
用 PHP 來撰寫的架站軟體。
http://www.xoops.org/

員工入口網站 (Employee Portal) /協同作業平台 (Collaboration Platform)

eGroupware
在同一個網站應用程式裡包含許多實用的群組軟體。適合一般辦公室團隊作內部使用,提供辦公室或專案工作小組資源分享、資訊交換的協同平台。
http://www.egroupware.org/
PHPfileNavigator
PHPfileNavigator 是一套線上檔案管理系統,可方便的將文件資訊,共享與傳送,並可支援不同的作業系統。使用簡便,是線上檔案管理系統中一個好的選擇。
http://pfn.sourceforge.net/
Timeclock
Timeclock 是一套簡單容易上手的網頁打卡鍾系統,可以輕易實現網路線上即時打卡,取代傳統打卡簽到。
http://timeclock.sourceforge.net/
Tutos
一套功能不錯的群組軟體,適合一般中小企業的工作團隊內部使用。
http://www.tutos.org/
WebCalendar
提供一個個人或群組使用的行事曆,具備如安排會議、郵件通知、分享行事曆等功能。
http://webcalendar.sourceforge.net/

專案管理系統 (Project Management)

DotProject
一套專案管理系統,讓專案管理員儲存專案產生的各種相關資料。
http://www.dotproject.net/

購物網站 (Shopping Mall)

OSCommerce
快速地建立一個含購物車、線上管理台等網上購物站。
http://www.oscommerce.com/
XTCommerce
快速地建立一個含購物車、線上管理台等網上購物站 。
http://www.xtcommerce.com/

企業資源規劃(ERP)/財務會計(Accounting)

Compiere
以 Java 來開發的 ERP 系統,深受國外歡迎。
http://www.compiere.org/
TurboCASH
TurboCASH 是一套相當簡潔的進銷存以及會計軟體,適合小型的企業使用。
http://www.turbocashuk.com/
webERP
webERP 是一套 web-base 的 ERP 系統,主要功能為財務會計的管理,以及庫存管理的應用。
http://www.weberp.org/

客戶關係管理 (CRM)

SugarCRM
以 PHP 來開發的 CRM 系統,讓工作人員透過網頁瀏覽器查尋客人相關的資料。
http://www.sugarcrm.com/
vtiger CRM
Vtiger CRM 是一套 100% 開放原始碼客戶關係系統,主要協助企業建立與客戶之間業務往來互動資訊。
http://www.vtiger.com/index.php?option=com_content&task=view

線上教學系統 (e-learning)

Atutor
提供一個支援線上教學的網站。
http://www.atutor.ca/
Moodle
一套功能強大、版面簡潔的線上教學系統。
http://www.moodle.org/

流量訪客資料分析

AWStats
AWStats 是一個免費的功能強大的服務器日誌分析工具,它可以告訴你所有的Web統計數據,包括訪問量、訪問者數量、頁面、點擊、高峰時段等等。
phpMyVisites
這是一套免費的PHP + MySQL的網站訪客分析軟體,支援多站台管理及多國語言轉換
http://www.phpmyvisites.us/
Cacti
可以取代MRTG的一套軟體,結合SNMP及RRDTool工具,並使用php+MySQL去做有效管理也可外掛 Scripts 及加上 Templates 來作出各式各樣的監控圖
http://www.cacti.net/

其他

Care2x
Care2x 主要是一套以 PHP 撰寫的醫療資訊管理系統。
http://care2x.com/
Enhydra Shark
支援標準的商業流程引擎格式及提供流程設計介面。
http://shark.objectweb.org/
Knowledge Tree
這是一套知識管理系統 (KM),幫助企業快速搜尋及版本控管各類如 Word、HTML、TXT、PDF 等文件檔案。
http://kt-dms.sourceforge.net/
Phplist
是一個管理通訊名單(mailing list)及電子快訊(Newsletter)的網上應用程式。
http://tincan.co.uk/phplist
phpMyTicket
phpMyTicket 是一套線上訂位系統,適合用來線上訂票與選位(如購買電影票或上課券)。
http://www.phpmyticket.com/
PhpMyAdmin
一套全能功的 MySQL 管理及應用程式。讓使用者透過網頁瀏覽器去檢視、建立或修改資料庫的大小事務。
http://www.phpmyadmin.net/
Webmin
一套強大的 Linux 管理工具,讓管理員能夠透過網頁瀏覽器去管理 Linux 系統及設定各種伺服器。
http://www.webmin.com/

2010年2月22日 星期一

視覺介面設計的利器 -「Balsamiq Mockups」

    最近開始了SOHO族的生活,接了幾個網站設計的case,真的覺得當老闆本身也不是什麼輕鬆的事情...啊!離題了!總之在跟客戶溝通的過程中,發現談及視覺設計的部分時,沒有在實際的畫面下,很難讓彼此有共識,來來回回總需要耗費許多時間。
    很偶然的機會裡,在搜尋一些網頁設計的技術文章的時候,突然發現了一個好玩的軟體─「Balsamiq Mockups」。以前玩過線上版,不過因為當時作的行業跟現在幾乎八竿子打不著,所以也沒有很用心去玩。當時就覺得這套軟體很有創意,只是線上版好像每5分鐘會有跳出詢問視窗,關來關去有點麻煩,Desktop版又要$$...
    先來看看介面吧!

既然是視覺介面設計的工具,Balsamiq Mockups 當然是以圖形開發為主,所以介面中包含很完整的圖形化介面,大致上也涵蓋了網頁設計以及一般程式設計,可以方便的利用拖拉的方式進行視覺化設計。
以下是小弟隨手製作的一個簡單網站簡圖範例,(大概花不到五分鐘就完成了):


想要嗎?請Google搜尋「Balsamiq Monckups」^^