Wordpress 參考資料

架站-新手

1. Alannah Moore 著、Muki Wu 譯, WordPress 七天速成班－打造吸睛的風格化網站與部落格 (Create Your Own Website Using WordPress in a Weekend)
2. Pseric, WordPress Plugins 百大外掛精選, 博碩, 2014
3. 直接使用 wordpress 架站 https://zh-tw.wordpress.com/
4. Wordpress 新手  (codex.wordpress.org)

網站維護

1. 安裝 plugin 時不使用  FTP  (http://stackoverflow.com/questions/640409/can-i-install-update-wordpress-plugins-without-providing-ftp-access)

WP 網站功能擴充

頁面編輯 Live Composer Page Builder plug-in 

1. 一般介紹
2. Live Composer: How to add blog posts carousel (Youtube)
3. Live Composer: Post Template (livecomposerplugin.com)
4. Live Composer 試玩區
5. 說明文件
6. Image 元素的 Lightbox 功能，讓你點選圖片後，以 Overlay 的方式顯示圖片。(https://livecomposer.help/article/204-how-to-open-an-image-in-a-lightbox)

多語系頁面  The WordPress Multilingual Plugin

電子商務 WooCommerce

社群分享 Super Socializer 

自定 CSS WP Add Custom CSS

流量追蹤碼埋設 Tracking Code Manager by IntellyWP

圖片尺寸最佳化 EWWW Image Optimizer

為 Menu 加上 icon Menu Icons by Dzikri Aziz and joshuairl.

網站設計&規劃

一般規劃

1. Ethan Watrall , Jeff Siarto 著、莊惠淳 譯, 深入淺出網站設計 (Head First Web Design)

HTML/CSS/JavaScript

1. Elisabeth Robson, Eric Freeman 著、莊惠淳 譯, 深入淺出 HTML and CSS(第二版) (Head First HTML and CSS, 2/e). [書籍介紹]
2. Eric T. Freeman, Elisabeth Robson 著、蔣大偉 譯, 深入淺出 JavaScript 程式設計 (Head First JavaScript Programming) [書籍介紹]

Mockups

1. 9 Excellent Tools for Design Mockups
2. Balsamiq Mockups: Desktop and online mock-up.
3. Moqups.com : Online mock-up.
4. Responsive Design with Mockups (balsamiq.com)

Style Guide

1. Web Style Guide from Western University (pdf) 
2. Page Structure and Site Design  (Excerpted from Web Style Guide)

網站易用性設計

1. Janice (Ginny) Redish, Letting Go of the Words, Second Edition: Writing Web Content that Works (Interactive Technologies) 
2. Steve Krug 著、胡為君 譯, 如何設計好網站 (Don't Make Me Think: A Common Sense Approach to Web Usability, 2/e)
3. Steve Krug 著、陳亦苓 譯，深度測試－提高網站效益 (ROCKET SURGERY MADE EASY: The Do-It-Yourself Guide to Finding and Fixing Usability Problems) (DIY 一次搞定網站易用性問題), 上奇資訊
4. UX Design: An Introduction with Scout Stevenson (youtube, 58:06)
5. Example Usability Test with a Paper Prototype (youtube)
6. Usability.gov (提倡網站易用性的組織)
7. Garrett, Jesse James (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders Press. ISBN 978-0321683687. 
8. Jeff Johnson, 2014. Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines, 2nd edition, Morgan Kaufmann.

Color Palettes

1. Color Palettes Color Schemes (www.color-hex.com): 利用 keyword 找到 color palette.
2. Adobe Color CC
3. Color Palette FX: 上傳圖片產生圖片的 color palette. 

CSS

CSS box model

素材

1.  CC0免費圖庫搜尋引擎
2. 免授權圖庫整理，下載使用無顧慮！

其它

Word to html: 想把 Word 的內容變成網頁, 但是直接 copy & paste 又太多的奇怪 html code, 可以試試此網址的方案。轉出文字後，圖片還是要手動貼. 

Nested Blocks in PL/SQL

PL/SQL 中提供 Nested Blocks 的功能, 其目的為:
* Use to handle exception locally (Codes from Tony Andrews):

begin
   for emp_rec in (select * from emp) loop
      begin
         my_proc (emp_rec);
      exception
         when some_exception then
            log_error('Failed to process employee '||emp_rec.empno);
      end;
   end loop;
end;

* Declare local variables that have limited scopes (Codes from Tony Andrews);

declare
    l_var1 integer;
    -- lots of variables
begin
   -- lots of lines of code
   ...
   for emp_rec in (select * from emp) loop
      declare
         l_localvar integer := 0;
      begin
         -- Use l_localvar
         ...
      end
   end loop;

end;

Reference:
When should I nest PL/SQL BEGIN…END blocks? (http://stackoverflow.com/questions/2334659/when-should-i-nest-pl-sql-begin-end-blocks)

PL/SQL interview question 001

Uri Lukach 提供了以下的 PL/SQL interview question[1]:

答案是 C.

使用 case-when expression 時有兩種方式, 一為 simple-case-expression, 另一為 searched-case-expression. 使用 searched-case-express 時, 若在 condition 中沒有使用 relational operator 便會產生 ORA-00920 invalid relational operator 的例外[2]。

但是, 我們不能將問題中的 condition 改成 v_input = TRUE, 因為此 case-when expression 是在 SELECT SQL statement 中使用，SQL engine 中沒有 boolean data type (只有在 pl/sql 中才有 boolean data type)。

以下正確執行的版本供參考:

 set serveroutput on  
 DECLARE  
 v_input boolean :=true;  
 v_result varchar2(10);  
 BEGIN  
 v_result := case   
    when v_input=true then 'TRUE'  
    when (v_input <>true) then 'FALSE'  
    else null  
    end;  
 DBMS_OUTPUT.PUT_LINE(v_result);  
 END;  
 /  

UI Elements in the Wordpress

常用的 WordPress UI 元素

Slider

Wonder Plugin (https://www.wonderplugin.com/wordpress-slider/)

Accordion

According-Wp Plugin (https://wordpress.org/plugins/accordions/screenshots/)

Separator 

Separator widget (https://wordpress.org/plugins/separator-widget/)

Social 

Social share buttons by Supsystic (https://wordpress.org/plugins/social-share-buttons-by-supsystic/)

Notification

Push notification for WordPress (Lite):Send push notifications to iOS, Android, and Fire OS devices when you publish a new post  (https://wordpress.org/plugins/push-notifications-for-wp/(

InfoBar Top Notification: A easy and quick way to add top notification bar and call to action for your site. (https://wordpress.org/plugins/infobar/)

Buttons

MaxButtons Plugin: WordPress button plugin so powerful and easy to use anyone to create beautiful buttons and social share icons. (https://wordpress.org/plugins/maxbuttons/)

Images

Image Widget: A simple image widget that uses the native WordPress media manager to add image widgets to your site. (https://wordpress.org/plugins/image-widget/)

Tabs

Tabby Responsive Tabs: Create responsive tabs inside your posts, pages or custom post content by adding simple shortcodes inside the post editor. (https://wordpress.org/plugins/tabby-responsive-tabs/)
Simple Side Tab: Display a side tab that you can easily link to any page. Customize the tab text, font and colors. It's that simple. That's Simple Side Tab. (https://wordpress.org/plugins/simple-side-tab/)

Progress Bar

Progreaa Bar: A simple progress bar shortcode that can be styled with CSS (https://wordpress.org/plugins/progress-bar/)

Info/Message Box

WP Fancy Message Box: Display Fancy CSS Message Box in Page/Post via short code (https://wordpress.org/plugins/wp-fancy-message-box/)

Icon

WP SVGA Icon: Quickly and effortlessly enable 490+ beautifully designed SVG font icons, available on the frontend and backend of your site. (https://wordpress.org/plugins/svg-vector-icon-plugin/)

Font Awesome (http://fortawesome.github.io/Font-Awesome/)

Navigation Menu

Fixed Circular Navigation Menu: Fixed fancy navigation, perfect as an extra or mobile auxiliar menu. Circular shaped with a modern look that opens when menu button is clicked. (https://wordpress.org/plugins/fixed-circular-navigation-menu/)

匯入 UTF-8 編碼的中文檔案並在 R-Studion Console中顯示中文字

環境: Win7, RStudio Version 0.99.491

原理:
1. 先在 Single Byte Character Set 環境中讀入 UTF-8 編碼的中文字
2. 再轉成 Double Byte Character Set 環境顯示內容

1:  setwd("d:/R-Workshop/CaseStudy")  
2:  # Change to single byte character set to read UTF-8 encoded characters  
3:  Sys.setlocale("LC_CTYPE", "us")  
4:  l10n_info()  
5:  # Read the csv file encoded with UTF-8   
6:  my.data <- read.csv(file="UV_20151116152215.csv", header = TRUE, encoding="UTF-8")  
7:  # Show content with the single byte character set  
8:  # The RStudio Console cannot display the Chinese characters correctly in   
9:  # the Single-Byte-Character-Set environment.  
10:  head(my.data)  
11:  # Change to Double-Byte-Character-Set environment  
12:  Sys.setlocale("LC_CTYPE", "cht")  
13:  # Now your console can display Chinese characters correctly.  
14:  head(my.data)  
15:  rm(my.data)