Elvis Hsieh Blog

emscripten 是一個以 LLVM為基礎的系統，主要目的是將 C, C++ 開發的程式碼利用 LLVM 轉成 javascript 程式碼，讓 C, C++ 程式可以呈現 Website 中。要使用 C, C++ 開發 Web 程式碼，可以使用 emscripten SDK 來開發程式，如此可以省略許多不必要的環境設定過程。 在 emscripten 網站中提供各種不同平台的 emscripten SDK，在 Windows 平台，最直接的是使用 Installer 來安裝，但為了移植性，底下是採用 portable 版本： 下載 emscripten portable 版本，解壓縮到指定的目錄  切換到解壓縮目錄，開啟 Command Line，輸入 emsdk update  此時會下載 emscripten SDK 最新版的安裝檔，完成後，再輸入 emsdk install latest  安裝完成後，設定環境變數： emsdk activate latest --global  // --global option was env for all user Testing : compile hello.c : emcc hello.c  // output a.out.js  node a.out.js   # show "Hello World" in screen compile hello.cpp : em++ hello.cpp -o hello.html  // output .html file compile sdl.cpp from emscripten : em++ sdl.cpp -o sdl.html emscripten SDK 與 Wt C++ Web Toolkit 不同，emscripten 直接將 C, C++ 轉成 jascript or html 輸出， Wt 是一個 C++ Web Toolkit Library，要知道如何使用 Wt Library，但是， emscripten SDK 則不需要，不過，要執行較精確及效率是數學問題或程式，需要考慮是否適和使用 emscripten SDK...

因為 LLVM 官方網站所編譯好的 Windows 安裝檔，沒有 LLVM Toolchain 可以編譯成 llvm 的 bitcode(.bc) or native assembly(.s)，為了讓 Clang-cl 可以使用 LLVM Toolchain 來產生bitcode(.bc) or native assembly(.s)，安裝 emscripten SDK 套件，來使用 lli, llc, llvm-dis Toolchain 。 接觸 emscripten 後，從 emscripten文件 中得知 SPHINX 這個 Python 世界中的 Document 系統，大略看了一下它文件，可以使用簡單的 Text 文件作為基礎來產生不同的文件格式： html, TeX, pdf，也有網站的 theme 可以用來建立網站，emscripten 網站就是使用這個文件系統所建置，與 Docbook 比較，SPHINX 所使用的 reStructuredText 更容易讓初學者接受及適用。

安裝 Wt 花了許多時間，主要的問題是「在 cmake configure 時，會出現如下圖錯誤的訊息」，導致我一直認為這種問題，在按下「 Generate 」鍵之後，不會產出 Visual Studio Project 相關的檔案。因此，上網找了 解決方式 ，依照這個解決方式將 mspdb110.dll copy  C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\mspdb110.dll into  C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin or C:\Windows\System 這是不需要的，因為這個錯誤的動作，導致後續的 Compile 無法完成。而發現這個問題是來自：在清除 wt build 目錄之後，重新 cmake wt project 時，會產生 The C compiler "C:/Program Files (x86)/Microsoft Visual Studio 10.0/VC/bin/cl.exe" is not able to compile a simple test program. 由於之前都沒有這種現象的發生，測試了幾台電腦以後，出現相同的錯誤現象，才開始懷疑可能是將 mspdb110.dll copy into C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin or C:\Windows\System 所導致的錯誤。 果不其然，真的是 copy mspdb110.dll into C:\Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin or C:\Windows\System 所產生的問題。 所以，結論是：「不可以這樣做。如果在 Cmake 按下 Configure 時，出現上圖的錯誤訊息，不需要理會它，依然可以產生 vs 的 project 檔。」 首先說明我目前系統的環境及使用軟體的版本，接著再說明整個安裝的過程。目前所使用的作業系統是：  x64 bits Windows 8 的...

PHP長期以來都提供了良好的 Web Application 開發環境，目前流行的開發過程是採用 MVC or MVP or MVVM ，而 MVC 的開發環境是在 PHP Framework 最被使用的一種方式，在之前認為 YII 是一個不錯的 PPH Framework，主要是快速、輕巧，但是今天在 php master 中看到一位開發者是 Using Zend Framework with Symfony ，如果 Symfony 能與 Zend Framework 結合的很好，是乎可以考慮使用這樣的組合來開發 Web Application，而不需要使用到 Wt(a C++ library for developing web applications ) or Qt 5 的平台來開發 Web Application。

OR code 是 Quick Response Code 的簡稱，中文稱為二維條碼，與之前所知的二維條碼略有不同，不過，總是可以利用這個碼來做一些不一樣的事。   QR code 產生器 提供了一個產生各種不同需求的 OR code，在網站中也使用「文字」的選項來產生一個 OR code 來看看，文字的內容是如下： 這是中興大學註冊組提供的註冊證明，同學取的這個訊息，表示同學已經完成註冊程序。 中興大學  註冊組敬啟 真的可以產生一個 內含文字的 QR code ，結果存成 ORcode.png 檔。似乎要實作一個註冊成功的網站，讓註冊完成的學生來掃描並不難。

Foundation is front-end framework for website, 提供網頁設計者設計各種不同 devices 的網頁，它是使用 Sass, Compass 這兩種 CSS framework 發展而成的。整個專案是採用 Ruby 的套件管理方式來運作，安裝它相當容易，使用 Ruby 的 gem install zurb-foundation 來安裝，若要調整 Foundation 的內容，需要再安裝 Sass, Compass, 網路上有介紹 Sass, Compass 的書籍，使用這兩種 CSS framework 對於寫 CSS 則更具有彈性[1]。   在安裝這些套件時，看見 Ruby 有安裝這些套件的文件，只是不知道如何從 Ruby 系統中讀出這些文件? 目前對於 Ruby 的系統不熟悉，需要找些資料來了解。在尋找資料時，找到一個不錯的教學網站，名為 Programming tutorials and source code examples 有許多教學文件及原始程式碼，其中包括 C++, HTML, Ruby, GIMP, etc ...，也有許多 free HTML templates 可以下載，可以做為做為教學時的教材。   另外， jQurey EasyUI 是另外一種開發 Website 的 framework, 是基於 jQuery UI 的基礎上，讓使用者不需要寫 Javascript 就可以容易的建立 jQuery 的 UI 介面。 --------------------------------------------------------------- [1] http://www.slideshare.net/kurotanshi/compass-sass

雖然 Apache, php, MySQL, phpMyAdmin 這種組合在網路上已經有人將它打包成 WAMP 套件，不需要太多的技術背景的使用者也可以輕鬆的架站。但是還是自己手動安裝來的 Free，另外，再次分別下載各個軟體手動安裝，主要是想測試 Maria DB , eyeOS 的支援情形。 在這次安裝的過程中，遇到一些與2001年安裝在 windows 98 時不同的設定及問題，先描述如下： 1. Apache virtual-host 的設定 ： 設定檔在 conf/extra/httpd-vhosts，主要是讓主機有另一個 virtual host name 可以使用，可以參考檔案內的範例來設定。 另外需要注意的是：C:\Windows\System32\drivers\etc\hosts 也需要加入 virtual host 的 ip 才可以找得到 Apache 所設定的 virtual host。 2. Apache httpd.conf 的設定： 這個與之前的設定相同，主要是設定 php 要使用的 modules, index.php，但不需要PHPIniDir "J:/Server/php5/" LoadModule php5_module "J:/Server/php5/php5apache2_2.dll" ，因為 php5 的安裝程式就會要求指定 Apache 設定檔的路徑，並且設定好這個模組。 3. Apache manual.conf 的設定：Apache 的 manual 設定檔是 conf/extra/httpd-manual.conf, 設定以後就可以不用連到 Apache 網站。但是不需要在 Alias modules 中特別設定路徑。 4. php 的安裝與設定：php 有許多種版本，要下載 Thread Safe 的版本，並且要注意安裝時要下載 php 5.3.8 的版本，因為當時 php 5.4.0 版本是新版本，在安裝 phpMyAdmin 時，會造成無法登入 Maria DB，還一直以為 phpMyAdmin 或者 Maria DB 的問題，弄了很久才在網路上找到問題出在 php 版本的問題。 5. eyeOS 安裝： 安裝 eyeOS 以後會出現...

在無意中找到了一個 Connexions 網站[1]，網站首頁寫著： Connexions is: a place to view and share educational material made of small knowledge chunks called modules that can be organized as courses, books, reports, etc .  用 "css3" keyword 去 search，有一個介紹 css3 的教材[2]，在他的參考資料中列出 useful coding techniques 的連結[3]，連結中有需多 css3 的範例可以參照，特別是 slide 的範例。 在[3] 的 slide 範例限制，對於 IE 的使用者無法顯示 slide 的效果，而在 [4] 中提供了一個 slide.js 的 library 讓網頁可以顯示各種 slide show 的效果。 ------------------------------------------------------------------------------------------ [1] http://cnx.org/ [2] http://cnx.org/content/m36730/latest/ [3]  useful coding technique [4] http://greweb.fr/slider/

2011.02.28 才知道已經有人寫許多 javascript library 讓人使用，2007年使用最多的是 prototype 這個 javascript framework，可以在 jsgear.com 論壇中的一篇文章[1]看得出來；另外一個 UI 介面較美觀的是 Ext4 js，網路上有許多文件可以參考。 再次上網查詢的一下， jQueue library 是目前使用人數較多的一個 library，我想不管何種 light weigh 的 library，重要的還是在於自己要使用到一些 function，以及對於這個 library 的熟悉程度。 在未來可能是以 Web OS 的時代，Javascript 是一個重要且必學的一個 language。 --------------------------------------------------------------- [1] http://jsgears.com/thread-50-1-1.html [2]  http://subocheng.blogspot.com/2007/11/javascript-framework.html [3] http://jsgears.com/thread-63-1-1.html

HTML 中的一些 Esacpe Code List [1]， Character Escape Code SPACE        %20 <                %3C >                %3E #                %23 %                %25 {                %7B }                %7D |                %7C \                %5C ^                %5E ~                %7E Character Escape Code [                %5B ]                %5D `                %60 ;           ...