2015年12月27日 星期日

免費的繪圖、網頁開發軟體及教學網站介紹

因工作關係,好久都沒寫網誌了,最近閒暇了一下,剛好找到svg動畫相關的網站,就整理一下寫點免費網頁動畫相關的工具及介紹。
繪圖軟體
點陣圖繪圖軟體:GIMP:https://www.gimp.org/
這套點陣圖繪圖軟體能生出大部分圖形檔,功能非常完整,最重要的是,他可以對「單一個」像素做繪圖動作,這是PhotoShop或PhotoImage等不願做的(做嵌入式點陣字檔非常需要)
 向量繪圖軟體:Inkscape:https://inkscape.org/
這是專門畫SVG的網頁向量圖軟體,同樣也是免費,可以畫出很細緻的向量圖,不用擔心縮圖時失真,HTML5後的動態網頁都是SVG做的(尤其是GOOGLE主頁的動畫圖),但目前還沒試出如何畫出的圖事後加入變成動態(理論上可行)。
 網頁編輯軟體
 KmopoZer:http://www.kompozer.net/
 這款當入門還OK,不過寫Script有時會亂插入一些東西,但小心使用沒啥問題。
Sublimetext:http://www.sublimetext.com/
這個當網頁設計的軟體工程師最愛,主要是他的自動完成很完整,本身不算免費,但不在乎存檔時跳出視窗吵你就算是免費的了,此外要入門需要學習一段時間,不建議安裝中文化。

Sublimetext教學網站:http://blog.miniasp.com/post/2014/01/07/Useful-tool-Sublime-Text-3-Quick-Start.aspx
這個教Sublimetext很夠用了。

 AJAX工具的網站
Jquery:https://jquery.com/
AJAX中無人不知,無人不曉。
d3.js:http://d3js.org/
這是一個用Javascript建SVG圖並支持動態以及有許多優於Jquery功能的javaScript,下面有專門教這個元件的網站,網頁中Documentation有中文使用手冊,非常推薦

教學SVG和動畫設計的網站
 w3school:http://www.w3school.com.cn/
只要你能耐心研究這個網站,他能將你變成網頁神人,網頁所有相關資料都能在上面找到,雖然是簡體,但是當百科查資料最齊全了。
Jqyery教學網站:http://webdesign.kerthis.com/jquery/
入門夠用了。
SVG D3.js - 起手式:http://www.oxxostudio.tw/articles/201410/svg-d3-info.html
我很喜歡這個網站的排版和動畫,色系也很不錯,尤其獨愛這頁的標題,推薦點進去看,很好玩的。這個網站主要教D3和SVG。 

2015年8月6日 星期四

QT5.5 編譯

QT4和QT5有幾項重大的改變
  1. QT5目錄用GIT的子模組模式,清除source 資料夾已無法用make 呼叫指令的方式,如果要編譯跨平台且版本相同者,請用GIT下載QT Source 編譯,清除資料夾時則用GIT指令清除。(QT5 git會花半天以上時間,請注意)
  2. QT5捨棄2D繪圖方式而使用OpenGL的3D引擎,故Windows 建議開啟OPENGL 編譯,且建議編譯Angle,但目前已知Mingw-w64無法編譯X86的Angle,所以X86我使用Desktop模式。
  3. QT5使用了ICU這是我最看好的,我可不想看到我的姓再次變成「?」或「 」,但...要編譯ICU。
 言規正傳,編譯ICU吧。
  1. 首先下載ICU 55.1(zip版)
  2. 下載Build.sh
  3. 修改Build.sh內第2行和第3行路徑,第2行為ICU Source路徑,第3行為你目前Build.sh檔案路徑,此外編譯出來的檔案會在Build.sh目錄下以X86、X64、Debug、Release建置。
  4. 選擇編譯X86還是X64,X86則用mingw32_shell.bat 開啟Msys2,X64則為mingw64_shell.bat
  5. 切到Build.sh的目錄
  6. 執行./Build.sh
PS:如果對這上段文章疑惑不知如何處理,請先學會使用MSYS2,及看懂Bash Shell Script,否則下段也別看了。

接下來,開始準備QT5編譯所需的材料。
  1. GIT(不會的人請先去惡補),windows推荐TortoiseGit+Git 
  2. Perl
  3. Python
  4. 上一篇MSYS2最後的各個軟體和模組
第2、3項裝完系統環境變數(PATH)有路徑即可。 

開始編譯QT5.5.0
  1. 首先下載編譯用的所有BAT檔到要建立QT5Lib的資料夾:QT5.5.0 BAT
  2. 修改MinGW.bat 中的第1行來指定QT5的Source路徑
  3. 修改MinGW.bat 中的第13行來指定ICU的來源路徑
  4.  MinGW.bat 中的第14行可以自行修改要編譯項目
  5.  用一般命令提示字元執行要編譯的類型如 X86 Debug就選MinGW_X86_debug.bat,由此而推。
  6.  如果要編譯VS2010版就不詳細寫了,難度不如MinGW,自行摸索可以提升自己解決問題的能力。   
PS:此編譯無法編譯Webkit因為網路上說他太複雜了,所以先忽略跳過不編譯。

2015年7月20日 星期一

MSYS2 + MinGW-w64安裝教程(以QT5.5開發環境為目標)

QT5.5開發環境比QT4來的難的多,主要原因是QT5.X的原始碼中各模組路徑已經不一樣了,所以當專案從4升到5,折疼了我幾個月,加上編譯器用mingw-w64,且32位元和64位元都得成功,大概沒幾個人像我這麼有自虐情節,回歸正題馬上開始吧。

  1. 首先下載MSYS2(X86_64):MSYS2-20150512(x86—64)
  2.  安裝MSYS2,這個部份沒啥困難,略
  3.  安裝完請到MSYS2安裝目錄下,請看下圖
  4.  由畫面所見MSYS2的主要執行檔有3個,
    1.msys2_shell.bat、
    2.mingw32_shell.bat、
    3.mingw64_shell.bat
    ,這3個的差別在於,mingw32_shell.bat 和mingw64_shell.bat分別是MinGW-w64編譯器專用的執行檔,分別編譯32位元及64位元的應用程式,msys2_shell則是建議當成無編譯器的專用平台。
  5.  執行msys2_shell.bat
  6.  跳出一個終端視窗如下:
  7. 鍵入
    pacman -Sy
    更新pacman
  8. 鍵入
    pacman —needed -S bash pacman pacman-mirrors msys2-runtime
    更新msys2主要核心
  9.  關掉重新執行msys2_shell.bat
  10.  鍵入
    pacman -Su
    進行更新 
  11.  之後介紹一個指令
    pacman -Sl
    此指令顯示所有可以安裝的軟體或模組
    進階:pacman -Sl | grep XXX
    XXX 請換成要搜尋的字串,這樣只會顯示有XXX名稱的軟體或模組
  12. 安裝軟體指令
    pacman -S XXX
    XXX 請換成要安裝的軟體名稱
  13. 以下是我編譯成功QT5.5後的所安裝的所有軟體
    mingw32 mingw-w64-i686-binutils 2.25-4 [已安裝]
    mingw32 mingw-w64-i686-bzip2 1.0.6-3 [已安裝]
    mingw32 mingw-w64-i686-cloog 0.18.1-3 [已安裝]
    mingw32 mingw-w64-i686-crt-git 5.0.0.4506.413d55f-1 [已安裝: 5.0.0.4501.4421b4a-1]
    mingw32 mingw-w64-i686-dlfcn-svn r37-1 [已安裝]
    mingw32 mingw-w64-i686-expat 2.1.0-5 [已安裝]
    mingw32 mingw-w64-i686-gcc 4.9.2-5 [已安裝]
    mingw32 mingw-w64-i686-gcc-libs 4.9.2-5 [已安裝]
    mingw32 mingw-w64-i686-gdb 7.9.1-1 [已安裝]

    mingw32 mingw-w64-i686-gdbm 1.11-2 [已安裝]
    mingw32 mingw-w64-i686-gettext 0.19.4-2 [已安裝]
    mingw32 mingw-w64-i686-gmp 6.0.0-2 [已安裝]
    mingw32 mingw-w64-i686-headers-git 5.0.0.4506.413d55f-1 [已安裝: 5.0.0.4501.4421b4a-1]
    mingw32 mingw-w64-i686-isl 0.13-1 [已安裝]
    mingw32 mingw-w64-i686-libffi 3.2.1-2 [已安裝]
    mingw32 mingw-w64-i686-libiconv 1.14-4 [已安裝]
    mingw32 mingw-w64-i686-libsystre 1.0.1-1 [已安裝]
    mingw32 mingw-w64-i686-libtool 2.4.6-1 [已安裝]
    mingw32 mingw-w64-i686-libtre-git r122.c2f5d13-3 [已安裝]
    mingw32 mingw-w64-i686-libwinpthread-git 5.0.0.4497.4254261-1 [已安裝]
    mingw32 mingw-w64-i686-lz4 1.7.0.r590-1 [已安裝]
    mingw32 mingw-w64-i686-make 4.0.2289.432cb65-1 [已安裝]
    mingw32 mingw-w64-i686-mpc 1.0.3-1 [已安裝]
    mingw32 mingw-w64-i686-mpfr 3.1.2.p11-1 [已安裝]
    mingw32 mingw-w64-i686-ncurses 5.9.20150321-1 [已安裝]
    mingw32 mingw-w64-i686-openssl 1.0.2.a-1 [已安裝]
    mingw32 mingw-w64-i686-pkg-config 0.28-3 [已安裝]
    mingw32 mingw-w64-i686-python2 2.7.10-1 [已安裝]
    mingw32 mingw-w64-i686-readline 6.2.005-3 [已安裝]
    mingw32 mingw-w64-i686-tcl 8.6.4-1 [已安裝]
    mingw32 mingw-w64-i686-termcap 1.3.1-1 [已安裝]
    mingw32 mingw-w64-i686-tk 8.6.4-1 [已安裝]
    mingw32 mingw-w64-i686-winpthreads-git 5.0.0.4497.4254261-1 [已安裝]
    mingw32 mingw-w64-i686-yasm 1.3.0-1 [已安裝]
    mingw32 mingw-w64-i686-zlib 1.2.8-7 [已安裝]
    mingw64 mingw-w64-x86_64-binutils 2.25-4 [已安裝]
    mingw64 mingw-w64-x86_64-bzip2 1.0.6-3 [已安裝]
    mingw64 mingw-w64-x86_64-cloog 0.18.1-3 [已安裝]
    mingw64 mingw-w64-x86_64-crt-git 5.0.0.4506.413d55f-1 [已安裝: 5.0.0.4501.4421b4a-1]
    mingw64 mingw-w64-x86_64-dlfcn-svn r37-1 [已安裝]
    mingw64 mingw-w64-x86_64-expat 2.1.0-5 [已安裝]
    mingw64 mingw-w64-x86_64-gcc 4.9.2-5 [已安裝]
    mingw64 mingw-w64-x86_64-gcc-libs 4.9.2-5 [已安裝]

    mingw64 mingw-w64-x86_64-gdb 7.9.1-1 [已安裝]
    mingw64 mingw-w64-x86_64-gdbm 1.11-2 [已安裝]
    mingw64 mingw-w64-x86_64-gettext 0.19.4-2 [已安裝]
    mingw64 mingw-w64-x86_64-gmp 6.0.0-2 [已安裝]
    mingw64 mingw-w64-x86_64-headers-git 5.0.0.4506.413d55f-1 [已安裝: 5.0.0.4501.4421b4a-1]
    mingw64 mingw-w64-x86_64-isl 0.13-1 [已安裝]
    mingw64 mingw-w64-x86_64-libffi 3.2.1-2 [已安裝]
    mingw64 mingw-w64-x86_64-libiconv 1.14-4 [已安裝]
    mingw64 mingw-w64-x86_64-libsystre 1.0.1-1 [已安裝]
    mingw64 mingw-w64-x86_64-libtool 2.4.6-1 [已安裝]
    mingw64 mingw-w64-x86_64-libtre-git r122.c2f5d13-3 [已安裝]
    mingw64 mingw-w64-x86_64-libwinpthread-git 5.0.0.4497.4254261-1 [已安裝]
    mingw64 mingw-w64-x86_64-lz4 1.7.0.r590-1 [已安裝]
    mingw64 mingw-w64-x86_64-make 4.0.2289.432cb65-1 [已安裝]
    mingw64 mingw-w64-x86_64-mpc 1.0.3-1 [已安裝]
    mingw64 mingw-w64-x86_64-mpfr 3.1.2.p11-1 [已安裝]
    mingw64 mingw-w64-x86_64-ncurses 5.9.20150321-1 [已安裝]
    mingw64 mingw-w64-x86_64-openssl 1.0.2.a-1 [已安裝]
    mingw64 mingw-w64-x86_64-pkg-config 0.28-3 [已安裝]
    mingw64 mingw-w64-x86_64-python2 2.7.10-1 [已安裝]
    mingw64 mingw-w64-x86_64-readline 6.2.005-3 [已安裝]
    mingw64 mingw-w64-x86_64-tcl 8.6.4-1 [已安裝]
    mingw64 mingw-w64-x86_64-termcap 1.3.1-1 [已安裝]
    mingw64 mingw-w64-x86_64-tk 8.6.4-1 [已安裝]
    mingw64 mingw-w64-x86_64-winpthreads-git 5.0.0.4497.4254261-1 [已安裝]
    mingw64 mingw-w64-x86_64-yasm 1.3.0-1 [已安裝]
    mingw64 mingw-w64-x86_64-zlib 1.2.8-7 [已安裝]
    msys bash 4.3.039-1 [已安裝]
    msys bash-completion 2.1-5 [已安裝]
    msys bsdcpio 3.1.2-5 [已安裝]
    msys bsdtar 3.1.2-5 [已安裝]
    msys bzip2 1.0.6-2 [已安裝]
    msys ca-certificates 20141019-2 [已安裝]
    msys catgets 1.1-2 [已安裝]
    msys coreutils 8.23-4 [已安裝]
    msys crypt 1.1-6 [已安裝]
    msys curl 7.42.1-1 [已安裝]
    msys dash 0.5.8-1 [已安裝]
    msys diffutils 3.3-3 [已安裝]
    msys file 5.22-2 [已安裝]
    msys filesystem 2015.04-3 [已安裝]
    msys findutils 4.5.14-4 [已安裝]
    msys flex 2.5.39-4 [已安裝]
    msys gawk 4.1.3-1 [已安裝]
    msys gcc-libs 4.9.2-4 [已安裝]
    msys gettext 0.19.4-1 [已安裝]
    msys gmp 6.0.0-3 [已安裝]
    msys gnupg 1.4.19-1 [已安裝]
    msys grep 2.21-1 [已安裝]
    msys gzip 1.6-1 [已安裝]
    msys inetutils 1.9.2-1 [已安裝]
    msys info 5.2-5 [已安裝]
    msys less 471-1 [已安裝]
    msys libarchive 3.1.2-5 [已安裝]
    msys libasprintf 0.19.4-1 [已安裝]
    msys libassuan 2.2.0-2 [已安裝]
    msys libbz2 1.0.6-2 [已安裝]
    msys libcatgets 1.1-2 [已安裝]
    msys libcrypt 1.1-6 [已安裝]
    msys libcurl 7.42.1-1 [已安裝]
    msys libexpat 2.1.0-2 [已安裝]
    msys libffi 3.2.1-1 [已安裝]
    msys libgettextpo 0.19.4-1 [已安裝]
    msys libgpg-error 1.19-1 [已安裝]
    msys libgpgme 1.5.4-1 [已安裝]
    msys libiconv 1.14-2 [已安裝]
    msys libidn 1.30-1 [已安裝]
    msys libintl 0.19.4-1 [已安裝]
    msys liblzma 5.2.1-1 [已安裝]
    msys liblzo2 2.09-1 [已安裝]
    msys libmetalink 0.1.2-2 [已安裝]
    msys libnettle 3.1-1 [已安裝]
    msys libopenssl 1.0.2.a-1 [已安裝]
    msys libp11-kit 0.23.1-1 [已安裝]
    msys libpcre 8.36-2 [已安裝]
    msys libpcre16 8.36-2 [已安裝]
    msys libpcre32 8.36-2 [已安裝]
    msys libpcrecpp 8.36-2 [已安裝]
    msys libpcreposix 8.36-2 [已安裝]
    msys libreadline 6.3.008-4 [已安裝]
    msys libssh2 1.4.3-3 [已安裝]
    msys libtasn1 4.5-1 [已安裝]
    msys libutil-linux 2.26.2-1 [已安裝]
    msys libxml2 2.9.2-2 [已安裝]
    msys lndir 1.0.3-1 [已安裝]
    msys m4 1.4.17-4 [已安裝]
    msys mintty 1322-2 [已安裝]
    msys mpfr 3.1.2.p11-1 [已安裝]
    msys msys2-keyring r8.3864337-1 [已安裝]
    msys msys2-runtime 2.1.0.16359.acadff9-1 [已安裝]
    msys ncurses 5.9.20150530-1 [已安裝: 5.9.20150110-1]
    msys openssl 1.0.2.a-1 [已安裝]
    msys p11-kit 0.23.1-1 [已安裝]
    msys pacman 4.2.1.6157.6e6093b-1 [已安裝]
    msys pacman-mirrors 20141223-1 [已安裝]
    msys pcre 8.36-2 [已安裝]
    msys pkgfile 15-1 [已安裝]
    msys rebase 4.4.1-6 [已安裝]
    msys repman-git r23.87bf865-1 [已安裝]
    msys sed 4.2.2-2 [已安裝]
    msys tftp-hpa 5.2-1 [已安裝]
    msys time 1.7-1 [已安裝]
    msys tzcode 2015.b-1 [已安裝]
    msys util-linux 2.26.2-1 [已安裝]
    msys which 2.21-1 [已安裝]
    msys xz 5.2.1-1 [已安裝]
    msys zlib 1.2.8-3 [已安裝]
     
  14.  以上黃色的是記憶中要編譯QT5.5必須的軟體(畢竟到成功花了好幾天,也記不住所有了)
  15. PS:上面每行開頭有mingw32mingw64、msys指各個shell.bat下才會獨有的軟體、但msys為共有,如執行mingw32_shell.bat 則能使用mingw32和msys執行mingw64_shell.bat 則能使用mingw64msys,執行msys2_shell.bat則只有msys。

2015年7月13日 星期一

終於寫出了第一個螢幕擷取軟體,目前輸出檔是mp4,用GUI擷取看以下結果吧!


有興趣可以瀏覽此網址:
螢幕擷取軟體專案