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

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訂閱功能嗎?

2016年6月7日

五家防毒廠商提供的免費解密勒索軟體(Anti-Ransomware)

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

更新日期越近的應該可以解的越多

Malwarebytes  Anti-Ransomware
針對哪種類型的勒索軟體 : CryptoLocker, CryptoWall, CTBLocker, TeslaCrypt
Real-time Protection : 可
移除病毒(Disinfection) : 無

Bitdefender Anti-Ransomware
針對哪種類型的勒索軟體 :  CyrptoWall, CryptoLocker, CTBLocker, Locky, TeslaCrypt
* CryptXXX Version 1,2 只能偵測 
Real-time Protection : 可
移除病毒(Disinfection) : 無

Trendmicro 趨勢  Anti-Ransomware
針對哪種類型的勒索軟體 : Lock Screen
Real-time Protection : 無
移除病毒(Disinfection) : 可

Kaspersky Anti-Ransomware
https://noransom.kaspersky.com/  (目前更新日期: ???)
針對哪種類型的勒索軟體 : Coinvault, Bitcryptor, Rannoh, AutoIt, Fury, Crybola, Cryakl, akhni, Agent.iih, Aura, Autoit,Pletor,Rotor,Lamer,Lortok,Cryptokluchen,Democry,Bitman (TeslaCrypt)
* CryptXXX Version 1,2 只能偵測 
Real-time Protection :  未知
移除病毒(Disinfection) :  未知

FoolishIT CryptoPrevent
針對哪種類型的勒索軟體 :  CryberLocker
Real-time Protection : 免費版無
移除病毒(Disinfection) :  未知

2016年3月2日

Java基本資料型別轉換

原始發文日 :2005/7/1 , 修訂: 2011/11/3, 2016/3/2 作者 : Fred Wang

這是一些簡單常用的Java基本資料型別轉換
1.數字轉字串
1.1 整數轉字串 integer to String 
int i = 20;
String str = Integer.toString(i);
String str = String.valueOf(i);
String str = "" + i

1.2 雙精度數字轉字串 double to String :
double d = ...;
String str = Double.toString(d);
String str = String.valueOf(d);

1.3 長型態數字轉字串 long to String :
String str = Long.toString(l);
String str = String.valueOf(l);

1.4 浮點型態數字轉字串 float to String :
String str = Float.toString(f);
String str = String.valueOf(f);

2.字串轉數字
2.1 字串轉整數 String to integer :
String str = "20";
int i = Integer.valueOf(str).intValue();  //第一種方法, ValueOf會傳回一個Integer物件

int j = new Integer(str).intValue(); //第二種方法

int k = Integer.parseInt(str);  //第三種方法

2.2 字串轉雙精度數字 String to double :
double d = Double.valueOf(str).doubleValue()
or
double d = Integer.parseDouble(str);  


2.3 字串轉長型態數字 String to long :
long l = Long.valueOf(str).longValue();
or
long l = Long.parseLong(str);

2.4 字串轉浮點型態數字 String to float :
float f = Float.valueOf(str).floatValue();
or
float f = Float.parseFloat(str);

3.十進位,二進位與十六進位數字的轉換
3.1 十進位轉二進位 decimal to binary :
int i = 20;
String binstr = Integer.toBinaryString(i);

3.2 十進位轉十六進位 decimal to hexadecimal :
int i = 20;
String hexstr = Integer.toString(i, 16);
or
String hexstr = Integer.toHexString(i);
or (含前置零與大寫 with leading zeroes and uppercase)
public class Hex {
  public static void main(String args[]){
  int i = 20;
  System.out.print(Integer.toHexString( 0x10000 | i).substring(1).toUpperCase());
  }
}

3.3 十六進位轉整數 hexadecimal (String) to integer :
int i = Integer.valueOf("B8DA3", 16).intValue();
or
int i = Integer.parseInt("B8DA3", 16);


4. ASCII Code的轉換
4.1 ASCII碼轉字串 ASCII code to String
int i = 64;
String aChar = new Character((char)i).toString();

4.2 整數轉ASCII碼 integer to ASCII code (byte)
char c = 'A';
int i = (int) c; // i will have the value 65 decimal

4.3 從字串擷取ASCII碼 To extract Ascii codes from a String
String test = "ABCD";
for ( int i = 0; i < test.length(); ++i ) { char c = test.charAt( i ); int i = (int) c; System.out.println(i); }  

5.布林(Boolean)值的轉換
5.1 整數轉布林值 integer to boolean
b = (i != 0);

5.2 布林值轉整數 boolean to integer
i = (b)?1:0;

5.3 布林值轉字串 boolean to string
String str = String.valueOf(b);


6.數字轉換的錯誤處理

使用try/catch來捕捉轉換過程的錯誤
try{
       i = Integer.parseInt(aString);
}  catch(NumberFormatException e) {

}

7.日期與字串的轉換 
7.1 日期時間轉字串 : 顯示預設完整的日期時間格式, 例如 Wed Nov 05 12:05:06 EST 2003


Date dNow = new Date(); 
String sNow = dNow.toString();
 
7.2 日期轉字串 Date to String : 顯示特定的日期格式

方法一日期轉成指定格式的StringBuffer, 再將StringBuffer轉成String
Date dNow = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
StringBuffer sbNow = new StringBuffer();
// 將日期dNow以"yyyy-MM-dd"的格式轉存到StringBuffer sbNow中
sbNow = formatter.format(dNow, sbNow, new FieldPosition(0));
// 將StringBuffer轉成String
String sNow = sbNow.toString();

方法二 日期直接轉成指定格式的字串(String) --比較簡單
Date dNow = new Date(); 

SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
String sNow = formatter.format(dNow)

7.3 字串轉日期 String to Date
String sDate = "2005-01-01";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
Date dDate = formatter.parse(sDate,new ParsePosition(0));

8.數字型態間的轉換
8.1 由短數字型態轉換成長數字型態 (擴大轉換)
如byte 轉成 short, int, long, float, 或 double,short轉成int, long, float, or double, char轉成int, long, float, or double, int 轉成 long, float, or double, long轉成float or double, float轉成double
(數字型態由短至長的順序為 byte, short or char, int, long, float, double)

直接指定就可以自動轉換!
例 :
int a = 50;
long b = a; // widening conversion

8.2 由長數字型態轉換成短數字型態 (縮小轉換,又稱為Casting)
例 :
long a = 100000000L;
int b = (int) a; // narrowing conversion

但是長數字型態的內容長度如果超過較短數字型態可容納的長度,雖然編譯與執行都不有錯誤訊息,但是會造成資料loss的現象。(這種隱含的錯誤,不容易debug,要特別留意)