如果引用或轉貼,麻煩註明出處與本網誌連結,否則視為侵權。

2017年1月15日

2016年9月20日

CSS線上開發工具整理

作者: Fred Wang (FW知識瑣記) 日期: 2016/9/20

語法檢查
1. Online CSS Validator (CodeBeautify.org)  http://codebeautify.org/cssvalidate
2. CSSLint http://csslint.net/

線上執行/測試
1. CSS Desk - Online CSS Sandbox http://www.cssdesk.com/

程式碼壓縮/解壓縮工具
1. CSS Beautify and Minify http://codebeautify.org/css-beautify-minify
4. CSS Drive Gallery- CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor/

程式格式調整/美化
2. CSS Organizer http://www.styleneat.com/
3. ProCSSor - Advanced CSS Prettifier http://tools.maxcdn.com/procssor/

CSS產生器
2. Free CSS Form Layout code generator http://www.maketemplate.com/form/ 
3. CSS Button Generator http://css3buttongenerator.com/
4. CSS Button Generator: Create HTML and CSS Button Styles http://www.bestcssbuttongenerator.com/
5. Ultimate CSS Gradient Generator - ColorZilla.com http://www.colorzilla.com/gradient-editor/
6.  Patternify | A CSS Pattern Generator http://www.patternify.com/
7. Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS http://enjoycss.com/
8. CSS3 Generator http://css3generator.com/
9. The ultimate CSS tools for web designers | CSSmatic http://www.cssmatic.com/
10. CSS Type Set http://csstypeset.com/

Javascript 線上開發工具整理

作者: Fred Wang (FW知識瑣記) 日期: 20160920

語法檢查
1. Javascript Validator (PiliApp.com) http://www.piliapp.com/javascript-validator/
2. Online Javascript Validator (CodeBeautify.org) http://codebeautify.org/jsvalidate
3. JSCodeSniffer Online - Check your JavaScript code style online  http://dsheiko.github.io/jscodesniffer/
5. JSLint,The JavaScript Code Quality Tool http://www.jslint.com/

線上執行/測試
1. JSFiddle http://jsfiddle.net/
2. JS Bin -  Collaborative JavaScript Debugging http://jsbin.com/guyogigehi/edit?css,js,output
3. JavaScript Viewer  (CodeBeautify.org) http://codebeautify.org/jsviewer
4. Online regex tester and debugger - Javascript https://regex101.com/#javascript
5. Compile Javascript online http://rextester.com/l/js_online_compiler

程式碼壓縮/解壓縮工具
1. Online JavaScript unminify http://unminify.appspot.com/
2. JavaScript Viewer  (CodeBeautify.org) http://codebeautify.org/jsviewer
3. ifreesite js-html formatting http://www.ifreesite.com/js-html-formatting/

程式格式調整 /美化
1. Online Javascript Beautifier http://jsbeautifier.org/
2. ifreesite js-html formatting http://www.ifreesite.com/js-html-formatting/

2016年6月23日

第一次使用Drupal平台架設專業網站前要學習的五件事

作者: Fred Wang (FW知識瑣記) 日期: 2013/6/16 修訂:2016/6/23

當您已經決定使用Drupal平台, 您應該已經思考過您的網站"為甚麼要使用網站內容管理平台?",也評估過"為什麼選擇使用Drupal平台?",當然您應該也知道Drupal能作甚麼,適合做甚麼,這些問題,不在本文探討範圍。

筆者針對需要或想要用Drupal平台建立專業的網站的入門者,提出建議在使用前要學習或學會的五件事。

1. 了解Druapl網頁組成基本元件,如區域(region),區塊(block),內容型態(content type),內容(content),View等
   a.這是最基本的,一些對Drupal的批評者,通常還不熟悉如何有效運用這些基本元件,就認為Drupal太過複雜,不容易開發等等的。
   b.不妨趕快架設一個,大膽地使用看看,使用Drupal 7架站的12堂課這本書可以作為您入門的教戰指引。

2. 蒐集評估與學習使用外掛與內建模組,我將重要模組區分下面幾大類,並推薦一些好用的模組。
   a. 核心模組 : 這類模組是系統內建的模組,可以選擇開啟或關閉,如投票(Poll)模組, 分類(Taxonomy)模組, 資訊推播(RSS)模組, Blog模組等

   b. 基本模組 : 這類模組是很多模組依賴的模組, 如Ctools, Context, Entity, Libraries, Token, Views等

   c. 管理與開發模組 : 這類模組是讓網站管理員便於維護與管理網站,如Admin menu,Backup and Migrate, Devel, Module Filter等

   d. 安全, 認證與權限模組 :
       d.1 真人驗證(Captcha)
       d.2 帳號整合的LDAP與Janrain Engage
       d.3 存取權限控制的Content Access, Node View Permissions, Nodeaccess, Custom Menu Permissions
       d.4 網站安全的Ban, Mollom, Secure Page等

   e.多國語言模組 : 
      e.1 翻譯用的Content Translation, Entity Translation, Interface Translation, i18n, i18n View, Local...等
      e.2 語言切換的Language Icons, Language Switcher, Title等
  
   f.外觀顯示模組 : 
       f.1 CSS客製 CSS Injectior, Display Suite
       f.2 錯誤網頁 CustomError, Redirect 403 to User Login等

   g.架構擴充模組 :  
       g.1 區塊相關的Copyright Block, News Ticker, Node Blocks, Menu Block等
       g.2 選單相關的Menu UI, Menu Target, Special Menu, Menu Item Visibility等
       g.3 Breadcrumb相關的Custom Breadcrumbs, Path Breadcrumbs, Disable Breadcrumbs, Menu Breadcrumbs等
       g.4 網站導引相關的Sitemap, XML Site Map, Footer sitemap等

   h. 內容編輯相關模組 : 
       h1. 如CKEditor, Wysiwyg, Webform, Contact等
       h2. 擴增的欄位型態,如Address Field, Chinese Address Field, Computed Field, Date, Datetime, Email Field, Field Collection, Field Readonly, Money Field, Link, Telephone等 
       h3. 欄位控制 : Arrange Field, Conditional Fields, , Filefield Target, Field Group等
       h4. 標題顯示控制 : Exclude Node Title, Automatic Node Titles等
       h5. 內容關聯 : Entity Reference, References, Relation等

   其他還有圖片與檔案管理相關,客製化搜尋相關,郵件通知相關,搜尋引擎優化與流量分析相關,電子報相關,論壇相關,社交網路相關,地圖相關,電子商務相關,工作流程相關等。

3. 蒐集評估與使用Theme
   a. 跟外掛模組一樣,Drupal有許多人貢獻設計良好的外觀樣板(Themes), 供大家免費套用。您可以找到一個與您要建立的網站風格相近的Theme,以此為基礎,經過一些修改與修飾,可以更快速地建立您的專業網站。
   b. 善用Theme,不是美工科班出身的人,也可以建立一個令人賞心悅目的網站。

4. 徹底了解Theme程式的內容,包含*.info, page.tpl.php與各種css檔案
   a.找一些網路上介紹Drupal Theme設計的文章,了解Drupal Theme組成元件它們之間的關係
   b.熟悉CSS的設計,好的平台都善用CSS達到美觀排版的效果,這是成為專業網站設計師必備的
   c.了解PHP程式設計,Drupal已經讓您少寫很多PHP程式了,不過要設計專業網站,不免要深度客製,例如對page.tpl.php的修改,來符合使用端需求
   d.了解Drupal系統變數的內容,與處理與呈現Drupal內容元件的邏輯

5. 熟悉Firefox或Google Chrome 的檢視元素功能,以及一些網站效能檢測工具
   a.這是我用來檢視網站設計問題與學習別人的網站最重要的工具
   b.網站檢測工具包含錯誤檢查,效能檢測等協助您診斷網站的問題,進而提供您改善的建議

2016年6月8日

架設網站前要蒐集哪些需求

作者: Fred Wang (FW知識瑣記) 日期: 2016/6/8

要架設網站前要先將客戶的需求了解清楚,一般客戶只會給您主要功能與網頁上的需求,有很多架站上需要的元素通常不會說得很清楚,作為一個專業的網站設計師,必須要主動向客戶詢問,以避免後續上的困擾與爭議。
以下是筆者整理十多年架設網站的經驗,列出下面的問題 :

. 語言
     a. 需要多國語言嗎? 需要安裝哪些語言?
     b. 語言的切換方式? 預設語言?
     c. 根據瀏覽器來預設語言或系統預設語言?

. 外觀
     a. 標準字型
     b. 內文字型大小,標題字型大小,選單字型大小
     c. 前景與背景顏色 
     d. 網站小圖示(favicon)
     e. 網站布局(layout), 框架(framework),可以提出幾個templates讓客戶選擇
     f. 需要行動設備上面可以瀏覽嗎?
     g.需要網頁路徑 breadcrumbs     

. 使用者角色
     a. 除了管理員外,還有其它角色嗎? 例如不同內容的提供者,聯絡人,客戶等
     b. 需要圖形的真人驗證功能嗎? 複雜度(多長? 文數字夾雜? 含大小寫? 扭曲? 雜訊?)
     c. 帳號由特定管理員建立,或者可以由客戶自行註冊?
     d. 客戶資訊需要填寫哪些資訊? 哪些是必填?
     e. 如果客戶自行註冊? 需要怎樣的生效程序? 點擊郵件通知的連結認證或由管理員確認才生效?  需要生效通知嗎? 生效通知信的內容?
     f. 客戶可以自行取消帳號嗎? 取消的程序? 取消的通知信內容?     
    g. 使用者註冊時, 需要先同意使用條款(Terms of Use)嗎?      

. 帳號整合
     a. 需要企業帳號整合 (AD or LDAP),或其他帳號系統整合嗎?
     b. 需要提供整合外部帳號註冊,例如Facebook帳號

. 通用網頁
     a. 聯絡我們網頁 : 包含地圖連結, 需要嗎?
     b. 網站地圖(Sitemap)網頁, 底部Site map?
     c. 網站側邊Feedback功能     
     d. 需要底部版權Copyright區塊? 與版權說明網頁嗎?

. 信件
     a. 系統收發信件的郵件信箱?
     b. 發送會員通知信?

. 社交網路
     a. 需要與社交網路整合?

流量分析
     a. 需要連結Google Analytics做流量分析 ?

. 社群功能
     a. 需要論壇, 電子報, 投票等社群功能嗎?
     b. 需要提供RSS訂閱功能嗎?