WHAT'S NEW?
Loading...

[免費截圖] PicPick 加入浮水印

你曾經煩惱自己圖片被盜用嗎?

最普遍的方法是在圖片加入浮水印。然而,當你做電腦軟體教學時,截圖後手動加浮水印,若每次重複這件事,慢慢在無形中浪費你的時間。PicPick這套軟體不但加入截圖後自動浮水印的功能。另一方面,這次我使用PicPick製作教學圖片,它的數字圖章功能不但具有編號功能(如圖二),而且提供多種樣式讓你輕鬆製作漂亮圖片。因此,在部落格製作軟體教學是不錯的工具,而且它也沒有惱人的廣告。

作業環境

  • Windows 7 64bits
  • PicPick
  • 特色
    • 擴充小畫家的功能
    • 可螢幕截取,並且可選擇類型(i.e. 視窗或全螢幕)
    • 可自訂喜歡快速鍵
    • 無廣告
    • 提供數位圖章,尤其在數字圖章,讓使用者更輕易撰寫軟體操作流程
    • 提供截圖時,自動加入浮水印
若官網連結下載位置失效,請使用備用載點下載可攜式版。

    教學影片


    教程

    1. 首先,請執行PicPick程式,在開始畫面選擇『開新檔案』。

    2. 圖一. PicPick 開新檔案


    3. 接下來,在Tab『常用』中,選擇『特效』後點擊『浮水印』,進入浮水印設定視窗
    4.  
      圖二. 下載Qt 5.4 MinGW 離線安裝


    5. 接著,在浮水印視窗先『開啟你的浮水印圖片』,再設定它『在圖片的位置』,然後在點選『截取圖片時自動加入浮水印』,按下『確定』完成設定。
    6.  
      圖三.浮水印設定視窗


    7. 設定完成後,請試著使用PicPick截取螢幕後,圖片將出現妳的浮水印。

    8. 圖四.PicPick截取螢幕後結果


    Reference:

    1. PicPick,all-in-one design tool for everyone, The NTeWORKS Company 
    2. http://www.picpick.org/en/

    UML類別圖: 傳遞參數和Dependency

    Dependency

    圖一. 類別圖: Dependency關係

    如上圖所示,當類別Student相依另一個類別Course,並且在成員函數將類別Course被用來傳遞參數或區域變數時,這兩者關係稱為『Dependency (相依性)』。『Class Student uses class Course』則是圖一英文的描述式,而它的動詞關鍵字就是『Uses (使用)』。

    在程式開發者眼中,它經常被稱作『Coupling (耦合)』。換句話說,我們可以由類別圖關係線(dependency, aggregation, composition...)知道模組間的耦合度,當類別的關係線越多,它的耦合度就越高。

    在UML,傳遞參數主要有以下三種:
    • in :輸入參數的內容不能被修改  
      • 唯讀
      • StarUML不顯示在圖上
    • inout :輸入參數的內容可以被修改
      • 此參數被你當輸入和輸出
      • 建議使用Pass by reference,不會呼叫Copy Constructor
    • out:與inout 大略相同,此參數只當作輸出

    以下將圖一的類別圖轉換C++的程式碼,並且增加成員函數Enrolled區分實作唯讀的方法。

    圖二. Dependency範例。左邊:類別圖 右邊:原始碼


    如下圖所示,在C++實作UML的IN主要有兩種方式:『Pass by Value』 和『Pass by Const Reference』。然而,Pass by Value主要的缺點是『當類別過於龐大,花太多時間複製物件的內容到新物件』,甚至影響程式的性能。另一方面,若在Pass by Reference加入修飾字const,不但編譯器會出現警告訊息當他人修改參數內容,而且防止不預期的結果,尤其當程式者未在自己的類別實作Copy Constructor。


    圖三. 成員函數Enrolled和isEnrolled的比較表

    Reference:

    1. Understanding this UML diagram?, cplusplus.com
    2. http://www.cplusplus.com/forum/general/62927/
    3. in,out,inout,return parameter direction in UML, stackoverflow
    4. http://goo.gl/uZvgsl
    5. Applying UML and Patterns: UML Class Diagrams, Craig Larman
    6. http://goo.gl/6TYb2q

    UML類別圖:Aggregation vs. Composition

    Composition

    圖一. Composition範例。左邊:類別圖 右邊:原始碼


    在真實世界中,我們喜歡DIY將許多簡單零件組裝成更複雜機器,而且每一零件都缺一不可,因為零件的缺失會造成機器無法運作。這樣過程我們稱為『Composition』, 而這兩者關係的動詞關鍵字是『Owns a (擁有)』。圖一所舉的例子是電腦,一台電腦就必須有一顆CPU,而且CPU壞掉就會造成電腦無法運作,以下列出它的特性:
    • class Laptop own a class CPU_I7
      • 筆電擁有一個CPU
      • 沒有CPU,筆電無法運作
    • 類別負責產生和消滅附屬的類別
      • 變數與擁有者生命週期相同
      • 當物件Laptop被消滅,CPU也被消滅

    如下圖所示,CPU_I7被Laptop控制生命週期,有趣的是它們建構和解構的順序彼此相反。這是因為建構時會放入堆疊,而解構時會從推疊頂端拿出資料,因此解構順序會與建構順序完全相反。


    圖二. Composition執行結果。上圖:執行Demo程式瑪 下圖:輸出


     Aggregation


    圖三. Aggregation範例。左邊:類別圖 右邊:原始碼


    在C++中,當類別的資料成員含有指標物件變數,代表兩類別之間關係是『Aggregation』,並且它的關鍵字是『has a ()』。這種是一種比較弱的關係,兩物件的生命週期各自獨立,也就是說物件並不負責另一個的產生和刪除。例如:當搭乘計程車時,司機在乎車子裡有多少乘客,他是否要尋找客人,然而他無法自動化產生乘客,而且乘客不會因計程車銷毀而消失,下面以圖三為例總結它的特性:
    • class Car has a class Passenger
      • 車子裡面多少乘客
      • 車子可以沒有乘客
    • 類別並不負責新增或消滅附屬的類別
      • 指標變數自己的生命週期(lifecycle)
      • 當物件Car被消滅時,物件Passenger仍然存在

    如圖四所示,我在物件Car範圍外新增物件Passenger後,再將它的記憶體位址放入物件Car向量容器裡,然後程式結束時刪除物件Car,物件Passenger仍然存在,然而這樣情況會造成memory leak。因此,使用Aggregation要小心,程式結束前要記得刪除指標變數
    圖四. Aggregation執行結果。上圖:執行Demo程式瑪 下圖:輸出

    [Windows 7 64-bit] 安裝Qt 5.4 MinGW

    2014年12月Qt正式發佈5.4版,這次不但增加支援WinRT和Windows手機而且新增相對應的模組。

    這次也將軟體分成以下四個版本:

    1. 社區版(Community)
      • 用於PC端,嵌入式和手機應用程式開發
    2. 獨立移動版(Indie Mobile)
      • 用於手機應用程式開發
    3. 專業版(Professional)
      • 用於PC端和手機應用程式開發
    4. 企業版(Enterprise)
      • 用於PC端,嵌入式,RTOS系統和手機應用程式開發
    以下的Change log是根據官方進行部分翻譯,他主要針對網路瀏覽器相關進行功能改善。至於,安裝教學分成兩種版本:
    1. 影片版
      • 教你如何在官方網站下載最新版本
    2. 文字版
      • 教你如何在Qt安裝檔備份區下載你所要的版本


    Qt 5.4.0 Change log

    • 新特色
      • Qt WebEngine
        • 基於Chromium增加新的網頁引模組
      • Qt WebKit
        • WebKitWidget 加入OpenGL 2D 畫布加速
        • OpenGL 加速也適用於QOpenGLWidget
        • Qt WebKit 模組算是完成。它在未來將被Qt WebEngine所取代。這也會應用在QML API的Qt WebKit模組。
      • Qt Web Channel
        • 對QtWebKit和其他瀏覽器引,縮小QML/C++和HTML/JavaScript之間差距
    • 平台
      • 支援WinRT(Windows Runtime)的平台
      • 最低支援Windows Phone 8.1版本
      • iOS
        • 改善iPhone6/6的支援
        • QtQuick Controls現在可使用 native 文字選擇和彈出(popup )選單
    • 棄用特色
      • Qt OpenGL
        • QGLWidget 被QOpenGLWidget被取代
        • QGLWidget 已不能使用

    作業環境

    • Windows 7 64bits
    • Qt 5.4.0 for Windows 32-bit
    若官網連結下載位置失效,請使用備用載點2進行下載。

    教學影片


    教程

    1. 首先,請到以下網址選擇你所要安裝Qt版本,這裡將以『5.4』為例子。
    2. http://download.qt.io/archive/qt/
      圖一. Qt所有版本的下載位置


    3. 接下來,請依據你的作業系統並選擇你所要的編譯器,本範例的環境為Windows和MinGW,因此選擇以下的檔名下載 .
    4. qt-opensource-windows-x86-mingw491_opengl-5.4.0.exe

      圖二. 下載Qt 5.4 MinGW 離線安裝


    5. 接著,執行Qt 5.4安裝程式並選擇安裝位置後,再依據下圖選擇你要安裝的元件,按下『Next』參考影片安裝Qt程序。
    6.  
      圖三.執行Qt安裝程式


    7. 安裝完成後,請執行『Qt Creator (Community)』,即可開始寫程式。

    8. 圖四.Qt Creator 開始畫面


    Reference:

    1. Download Qt, The Qt Company
      http://www.qt.io/download/
    2. Qt older versions in the Archive
      http://download.qt.io/archive/qt/
    3. What is new in Qt 5.4
      http://qt-project.org/wiki/New-Features-in-Qt-5.4

    UML類別圖:基本概念篇


    上一篇簡略介紹軟體開發流程,正確商業軟體先使用使用者案例圖定義產品走向,然後底下工程師根據軟體需求進入軟體開發流程,然而團隊成員的能力參差不齊,因此"如何讓所有成員如何都能進入狀況?"成為軟體開發重大議題,而類別圖就是其中關鍵因子。

    為何需要畫類別圖(Class Diagram)?

    之前有提過是否畫類別圖是一個爭議性問題,他主要有以下的問題:

    • 沒有足夠時間更新文件---(等bug解完再說)
    • 很難精準描述高手的程式碼  i.e.template進階用法--(好強~!E04看不懂)
    • 幫新鮮人惡補物件導向和UML,甚至Design Pattern ----(身兼老師 = =)
    • 爛程式碼和架構  i.e.類別過於冗長和兼任多個角色 ---(不知道什麼是Clean Code嗎)

    的確,畫類別圖對工程師是一大挑戰,然而它能有效率地分割功能給底下的工程師,並且降低工作之間的相依性,使得每一個工程師開發時程能獨立運作。有一天,我與面試主管討論此問題,他說:『對他而言,用UML畫系統架構圖能幫助自己溝通,並且規劃好的架構後清楚地分割任務給底下工程師,時間久了難免文件失去存在意義。』當下,我深深反省並重新思考如何正確使用它幫助團隊?

    例子1:在大型商業軟體下,如何讓新人有能力維護系統?

    最沒效率方法是叫新人看哪一段程式碼,而是簡略描述系統架構後,縮小範圍到改的類別進行詳細描述。然而,當你要改類別過於龐大時,千萬不要詳細劃出全部,而是列出有關的類別成員即可,一方面新人根據關鍵字抓出大略修改方向,另一方面新人也能慢慢消化與吸收剛剛講解。

    例子2:如何讓團隊開發速度加快?

    開發每個功能必須先規劃好軟體架構,並且根據PM的需求畫出介面雛形,在實作前確認工作走向是正確的。最重要的是不要因趕專案時程,沒有留下任何文件,不但延長開發時程(i.e. 新人適應期),而且促使了團隊內的衝突增加。文件的存在目的是減少被打擾的時間,工程師最忌諱打斷自己開發思緒,甚至新人問題抓不到重點,然而有時必須檢討有沒有給新人足夠資源?  

    目的

    類別圖主要定義此類別角色和責任,不但降低系統重複功能,而且告知他人如何使用此類別.

    符號說明

    圖一.類別的構成(source: IBM developerWorks)
    • 描述類別成員時,不像程式語言在前面宣告資料型別,而是在後面加上冒號和資料型別,以下為類別圖表示方式: (橘色代表可選擇不加)
      • 資料成員(attribute or data member ) 
      • name:type = default value
      • 成員函數(operation or member function)
      • function(parameter list) : return type of value

    • 若我們在類別中定義靜態不能改變常數變數,我們需要此資料成員後面加上{frozen},代表此成員是不可變動。
      • 『static const double pi=3.14;』→『db: double=3.14 {frozen}

    • 處理的定義符( access specifiers)在UML所代表的符號
      • private::『-
      • public:『+
      • protected:『#
      • package:『~
    • 關係
      • Containment 
        • 通常用來描述鏈結串列,二元樹,關係陣列 
      • Association (knows a)
        • 兩個類別彼此都有著直接的關係 
      • Dependency(is a)
        • class A uses a class B→類別A使用類別B
      • Aggregation (has a)
        • class A has a class B→類別A資料成員包含類別B 
      • Composition (own a)
        • class A own a class B→類別A擁有類別B 
      • Inheritance  (is extended by)
        • class A is extended by class B→類別B在類別A基礎下進行功能擴展

    • 多重性(Multiplicity)
      • 主要描述類別擁有實體數目
      indicator 指示符 意思
      0....1
      零或一個
      1
      一個
      0....*
      零或多個
      1....*
      一或多個
      *
      多個

    範例

    1. 資料庫存取範例
    圖一. 類別示意圖
    1. 連結串列範例
      1. 圖二.  類別示意圖

    延伸閱讀

    [1]IBM developerWorks, UML basics: The class diagram
        http://www.ibm.com/developerworks/rational/library/content/RationalEdge/sep04/bell/
    [2]UML Class Diagram
        http://www.tutorialspoint.com/uml/uml_class_diagram.htm