迪蘭帝的聊天室

【Ubuntu/Linux】文字檔編碼轉換

noreply@blogger.com (Anonymous) — Fri, 24 Jan 2014 17:06:00 +0000

相信很多人在開啟一些「來路不明」的文字檔的時候，常常會有編碼錯誤，造成的亂碼現象，而要解決這樣的問題也很簡單，我們只需要先辨識出原本的編碼，再使用相對應的編碼進行開啟就行了，或是，為了方便以後的開啟使用，辨識編碼以後，使用將文件使用另外一種編碼進行重新儲存也是另外一種不錯的作法。

對於未知編碼的檔案，開啟亂碼

偵測編碼

一般我們可以使用 "file" 這個程式來檢查目標檔案的編碼為何，但是當目標對象是中文的時候，問題就便得很複雜了。

我們得到了 "Non-ISO extended-ASCII text, with CRLF line terminators" ，意思為：非 ISO 規範的延伸 ASCII 文字，我們可以如此翻譯「這個文字的編碼超過 8 位元，其他的我不知道，不認識。」那這樣怎麼辦，此路不通，只好換條路來走。
推薦大家使用另一個可以偵測編碼的程式 "enca" 這個程式在 Ubuntu 中預設是沒有安裝的，請輸入
sudo apt-get install enca 進行安裝。

我們可以看到 enca 順利的找到字型了。

開啟及更改編碼

開啟終端機輸入 gedit --encoding=gb2312 test.srt，若是仍舊會亂碼，則將 gb2312 改成 gbk，就可以了

成功開啟檔案以後，就可以另存新檔，將目前的編碼改成 "UTF-8"(預設) ，方便以後使用。

在 Ubuntu 下透過 RVM 安裝 Ruby on Rails

noreply@blogger.com (Anonymous) — Fri, 08 Nov 2013 17:28:00 +0000

做個筆記，每次要裝都跑去別人那邊看（掩面）

Ruby on Rails 是一個好用的網路應用程式開發框架，透過 Ruby 程式語言的直覺性，讓網路應用程式的開發相對於傳統的程式語言，如 php 、Java ...等，能夠有較好的開發效率，使用 MVC 架構為概念，讓開發者在開發網路應用程式上更能專注在邏輯的撰寫上，不會有太過複雜的界面與邏輯的交織。

廢話一大堆，下面我們開始說明怎麼在 Ubuntu 上透過 RVM 安裝 Ruby on Rails 吧。

第一步驟 - 使用 RVM 安裝 Ruby

先將我們的軟體來源列表更新，確保我們待會下載的程式都是最新版的，也把可以更新的程式都先更新一下吧。

sudo apt-get update

sudo apt-get upgrade

更新完成以後，我們就能開始安裝 RVM ( Ruby Version Manager )，這個程式可以很方便的讓我們在不同的 Ruby 版本間作切換，以下我們只會安裝最新的版本，如果想要安裝其他的版本，可以參考這個文章。
我們會需要用到 curl 這個工具來幫助我們安裝 RVM ，所以還沒安裝過curl 的朋友請先安裝curl 。

sudo apt-get install curl

安裝 RVM，請輸入：

\curl -L https://get.rvm.io | bash -s stable

當安裝完成以後，載入 RVM。或許你需要將目前所處於的 shell 關閉，並重開一個新的 shell。

source ~/.rvm/scripts/rvm

RVM 還有一些需要的依賴程式需要安裝，輸入下面這個指令可以自動安裝 RVM 所需的相關程式

rvm requirements

你或許需要在安裝這些相依程式的時候需要輸入密碼。
在某些偶然的情況下，有可能 zlib 會回報 miss。RVM 的官方網站提供了此問題的解法，如果出現類似的問題的話，請詳閱。

第二步驟 - 安裝 Ruby

已經安裝好 RVM 的話，那麼安裝 Ruby 就變得很簡單了。

rvm install ruby

我們已經安裝好最新版的 Ruby 了，但是因為我們是透過一個管理不同版本的程式來使用 Ruby 的，我們需要告訴系統我們現在想要使用哪一個版本的 Ruby 當作預設值。

rvm use ruby --default

第三步驟 - 安裝 RubyGems

這個步驟是為了確保我們有正確安裝 Ruby on Rails 所需的所有 Gems ，如此一來 Rails 才能正確執行。我們可以透過 RVM 來繼續安裝 RubyGems 。

rvm rubygems current

第四步驟 - 安裝 Rails

當上面步驟都完成以後，現在我們可以安裝 Rails 了。

gem install rails

Rails 的安裝會需要一段時間，當完成以後，你的電腦上就有完整的 Ruby on Rails 摟。

參考資料

Etel Sverdlov - How To Install Ruby on Rails on Ubuntu 12.04 LTS (Precise Pangolin) with RVM

【Ubuntu / Linux】使用 Chrome 時 Flash 字體出錯問體解決

noreply@blogger.com (Anonymous) — Mon, 07 Oct 2013 06:19:00 +0000

嘛，這篇文章很久以前就想寫了，但是想說或許會有更好的解法，所以就一直放著，但是看到現在好像 Google 官方沒有給答案，那麼就只好把原本的解法寫出來給大家參考吧。

http://ppt.cc/TMrj

相信在用 Linux 的朋友們一定會感到困惑，為什麼明明用 Firefox 的時候 Flash 所顯示的 UTF-8 字體就很正常，但是在 chrome 下卻會有問題，而在 chromium 下卻奇蹟似的又沒有問題，這到底是有什麼玄機呢？其實跟有沒有這個字型沒什麼關係，相信各位使用中文 Linux 的大家，電腦裏面應該都已經裝了文泉譯...之類的中文字型，而程式在使用這些字型的相關設定一般都存放在系統的 /etc/fonts/config.d，一般是不會去這邊設定的，網路上真有人跑去設定這個orz，不要設定的比較好，萬一出事了，麻煩可就大了。

嘛，解決方式其實很簡單，在 chrome 的網址列輸入 chrome://plugins

可以進入插入元件的設定頁面，頁面開啟以後，將右上角的[+] 詳細資訊開啟

找到 Flash Player 的部份，我們可以找到有兩個不同的 Flash Player，分別的路徑為：

/opt/google/chrome/PepperFlash/libpepflashplayer.so

及 /usr/lib/flashplugin-installer/libflashplayer.so，其中，PepperFlash 為 chrome 內建的 Flash Player 和我們自己所安裝的 Flash Player 有所不同，這個 Flash Player 在指定字型的時候路徑方面出了點問題，而且透過 Google 搜尋，我們可以發現，這個 Flash Player 對字型的處理比原生的 Flash Player 還要來的差了一點，在字體寬度、介面處理上，渲染的有些偏差，所以透過停用這個插件，我們就可以使用我們所安裝的原生 Flash Player 了。

結果：

【Ubuntu 13.04】使用 cron 進行批次作業

noreply@blogger.com (Anonymous) — Fri, 06 Sep 2013 17:58:00 +0000

許多人在使用電腦的時候都會有這樣的想法：這台我花了這麼多錢買來的電腦，能不能讓它在一天 24 小時都全力的工作，將資源的利用度提高到最高，這樣花的錢才值得。所以很多人開始觀察使用者如何使用電腦，嘗試著去從使用者的角度來改善資源利用率，喔，我們發現，在白天上班時間，電腦會被大多數人所使用，資源的利用度很不錯，電腦很繁忙，但是當下班以後，因為公司的人都回家了，雖然電腦還是持續在運作，但是實際上他並沒有進行產出，若是我們能讓他做些什麼東西，就可以改善、提高資源的利用度，增加產出，在以前使用 windows 平台的經驗，許多人可能會使用 bat 批次檔來進行處理，然後寫個小程式讓這個批次檔能在準確的時間運作，而在轉到 Linux 平台以後，有些人也會惜慣性的使用類似的方法使用 shell script 加上一個定時執行的小程式來進行批次作業的處理。事實上，Unix-like 平台提供了一個更方便的方法，讓我們來管理批次作業，那就是cron。

因為小弟我是使用 Ubuntu 作為常用的系統，本篇會以 Ubuntu 的角度來討論如何使用 cron 這個服務。 cron 的使用其實很簡單，只要遵守以下的規則，就能將自己的程式批次處理了。 cron 的設定檔一般放在/etc 資料夾下，檔名為 crontab，因為是系統相關設定，所以我們需要使用系統管理員身份執行。
相關格式：

        

        #  ——分鍾 (0 - 59) 

        # |  ——小時 (0 - 23) 

        # | |  ——日   (1 - 31) 

        # | | |  ——月   (1 - 12) 

        # | | | |  ——星期 (0 - 7)（星期日=0或7）

        # | | | | | 

        # * * * * * 被執行的命令

上面是在 crontab 裏面所使用到的時間格式，需要注意的是，使用*表示任何可能的值，如果在小時的區域裡填入，則代表每個小時執行一次。
特別小心：時間間格需要比程式執行的時間還要長，以免發生資料衝突的問題。

以下為 Ubuntu 預設的 crontab 設定，會進行一些更新方面的確認，以及系統的問題回報。
你可以自由的加入自己的程式，只要依照格式撰寫，並注意時間的部份，就可以了，最後在編輯好這個檔案以後，請重開 cron 服務。
到 /etc/init.d 輸入sudo service cron restart 將服務重開，即可更新你剛剛編輯的 crontab 檔案了。

啟動 Gnome Shell 3.8 應用程式分類

noreply@blogger.com (Anonymous) — Tue, 27 Aug 2013 18:10:00 +0000

最近因為對Ubuntu 的 Unity 感到有點厭倦了，太多的 bug 、需要大量的資源...種種的問題導致了我產生了想要轉其他的桌面環境的念頭，因為以前的使用習慣的關係，所以目前暫時轉移到 Gnome 桌面環境，Gnome 相對於 unity 更為輕巧，動畫方面也很優雅，不像是 Unity 有些動畫給人的感覺有點多餘，整體上給我的感覺是很正向的，有關於 Gnome Shell 的 preview 我會在不久的未來寫一篇新的文章，還請大家多多捧場。

用了 Gnome 以後，各項方面感受相對於 Unity 都很有蠻正向的回饋，但是一直以來，有個問題困擾著我，那就是在 Gnome Shell 3.8 的簡介裏面，他們新增資料夾的功能，讓使用者可以把應用程式做分類，但是真的很悲劇，我怎麼試都試不出來 Orz
或許是因為可以自訂資料夾的原因，Gnome 3.8 也預設把應用程式分類關閉，所以在這樣前提下，使用上要找應用程式都要透過搜尋來找，說真的，也不是不方便啦，就是有點麻煩就是了。

下面將說明怎麼將預設關閉的應用程式分類開啟 ~~終於要進入正題了~~

Step1：在搜尋框輸入「dconf」，啟動 dconf editor 來編輯一些相關的設定

Step2：在 dconf 中沿著 org > gnome > shell 的順序可以得到如下的畫面

Step3：在右手邊的地方，我們需要修改的欄位是 app-folder-categories，而預設的內容是：['Utilities', 'Sundry'] ，我們將其修改為 ['Utilities', 'Games', 'Sundry', 'Office', 'Network', 'Internet', 'Graphics', 'Multimedia', 'System', 'Development', 'Accessories', 'System Settings', 'Other']，如此一來，幾乎所有的程式都會被分類到這裏面了，以下是分類過後的 Gnome Shell 樣子，產生許多的資料夾，讓我恍然大悟的了解到，原來介紹上所提到的資料夾是這麼一回事。

以下為 Gnome 3.8 的宣傳影片

網頁程式學習 -- CSS選擇器

noreply@blogger.com (Anonymous) — Thu, 22 Aug 2013 02:28:00 +0000

上一次我們談到了如何簡單的生成一個網頁文件，但是我們卻只能單調的對這個文件進行打字，以往我們在編輯文件的時候，常常有許多的格式設定需要我們去煩惱，這些格式的設定在網頁上即是使用 CSS 來進行設定，為了對某個我們已經生成的物件進行設定，我們需要先了解到如何對物件進行選擇，即是學習 CSS 選擇器。

在學習選擇器之前先聊聊幾個基本概念，如果有學過物件導向程式設計的朋友們應該對於「class」和「id」並不陌生，「class」和「id」的概念在 CSS 的應用上是非常常見的，若是我們想要對於一群物件進行設定，而這些物件卻是不連續的出現在我們整份文件中，那麼我們可以對這些我們欲設定的物件使用相同的「class」名稱，我們只要對這個「class」進行設定即可；相對於「class」的多個物件共用屬性，「id」就是個別的一種屬性設定，我們在使用「id」的時候只能在同一份文件中出現一次，如果出現多次會造成混淆的現象。

舉例來說明 class 和 id 的關係就像是在每個人身上貼上標籤，台灣有 200 多萬個台北人，但是台北人中卻只有一個人的身份證字號跟你一樣，那個人就是你自己。

【註】class 以小數點「.」為開頭； id 以 Hash Tag 「#」為開頭

以下就要來一個一個的講解有關於 CSS 選擇器的內容了，上面廢話有點多orz

根據 w3c 的 css selector syntex，我們可以知道 CSS 選擇器大約有 10 種

Universal Selector 通用選擇器

使用 * 作為篩檢對象，代表此網頁下所有的物件都遵守 *{} 裡的規則。

Type Selector 屬性選擇器

使用 Html Tag 作為篩檢對象的方法，稱作為屬性選擇器，屬性選擇器會把這份 HTML 文件中所有被選擇到的那種標籤都加上所設定的規則。

          h4{
            font-size:20px;
           }

          div{
             background-color:black;
           }

Descendant Selector後代選擇器

當兩個選擇器並排呈現的時候，瀏覽器會從外面往裏面選擇，可以當作是被限制範圍的其他選擇器，相同的只要符合選擇器所篩選的內容都會被套用這些規則。
例如：

住在台北市的人男生

這兩個篩選條件下的交集，會有很多的結果，這些結果都會套用我們所下的規則。

          div a{
            color:yellow;
          }
          nav li{
            color:red;
          }

Child Selector 子選擇器

子選擇器的意味和後代選擇器很類似，但是後代選擇器是對每個後代都作用，但是子選擇器只對緊緊跟在前一個選擇器後面那個作用，若是中間有其他的物件在中間，那麼就不會套用選擇器的屬性，所以範圍更小了。
例如：

坐在我附近的人 > 男生

在這個條件下，坐在我附近的人中可能有很多個男生，但是坐在我旁邊的男生可能只有兩個人，那麼這個選擇器的條件就是選擇到這兩個男生，並對他們進行屬性上的設定。

           div > a{
              color:yellow;
           }

Adjacent sibling selectors 相鄰選擇器

相鄰選擇器，應該是目前很少用到的一種選擇器，因為尚有部份瀏覽器不支援，我們都知道 HTML 的具有巢狀結構，而前面所提到的後代選擇器和子代選擇器，都是針對巢狀結構的內層作用，而相鄰選擇器，則是針對同一層的其他元素進行作用，其中使用 + 來進行連接。

            h1+h1{
             color:red;
            }
            /*同層的的第二個 h1 會顯示紅色*/
            h1+h1+h1{
             color:blue;
            }
            /*同層的第三個 h1 會顯示藍色*/

Attribute selectors 屬性選擇器

屬性選擇器，是針對標籤裡頭的屬性做更進一步的修改。這個比較難解釋，直接看 code。

            h1[class]{
                color:red;
            }
           /*所有含有 class 屬性的 h1 都會受到影響*/
            h1[class=title]{
               color:red;
            }
           /*所有 class 屬性為 title 這個 class 者都會受到影響*/
           h1[class~=title]{
               color:red;
           }
           /*所有 class 屬性有 title 者都會受到影響*/
           h1[class|=title]{
               color:red;
           }
           /*class 的第一個為 title 者會受到影響*/

Class Selector

顧名思義，針對某個 class 進行定義屬性的方式，以 . 為開頭進行定義。

            .box{
               background-color:black;
            }

ID Selector

和 Class 選擇器類似，但是指針對某個特定的 ID 進行定義，使用 # 為開頭進行定義。

            #key{
              color:white;
            }

Pseudo-classes 偽類

這個東西嘛，其實就是常見的 :hover :active :visited :link 除了常見的這些之外，還有其他三個 :first-child :focus :lang

          p:first-child{
            color:red
          }
         /*first-child 是第一個使用 p 這個標籤者會被設定屬性*/
         p:lang(fr){
           color:red;
         }
        /*符合屬性為 lang(fr) 的標籤才會被套用這個屬性*/

Pseudo-elements 偽元素

偽元素的使用和偽類的使用方法類似，皆是使用冒號接上元素名稱。目前偽元素有兩個 :first-letter :first-line。

          p:first-line{
            color:red;
          }
          /*第1行 p 會成為紅色*/

          p:first-letter{
            color:red;
          }
          /*只有第一個字母會變成紅色*/

以上就是 CSS 選擇器的教學，如果有任何問題的話，歡迎提出問題一起討論。

網頁程式學習 - HTML 基本上手

noreply@blogger.com (Anonymous) — Mon, 04 Feb 2013 08:00:00 +0000

HTML被發明出來的時候，主要是為了傳輸文件，而為了表現這些文件，所以在早期發明出來的HTML 標籤有許多類似個功能，像是標題、內文、圖片、連結、表格、列表...都可以透過 HTML 標籤輕易的完成一份文件，以下我會先透過這些部份來創討論各種不同標籤的使用時機。

在創建一份文件的時候，我們要先了解到，HTML 他到底是怎麼去組成的，一份 HTML 文件可以分成兩個部份：

頭（head）
身體(body)

讓我們從「頭」開始討論吧，在瀏覽器開始載入一份文件之前，我們可以在文件的內容之前先宣告一些這份文件的初始資料，例如：

文件編碼
網頁資訊
網頁標題
層疊樣式表（CSS）
網頁程式（script）

首先我們先列出比較常出現在 head 裏面的標籤，在逐一了解他們的使用方法：

< title >
< meta >
< style >
< script >

我們先從 title 標籤來看看，title 是讓我們可以自由的建立文件標題的標籤，在這個標籤內所輸入的內容會被顯示在瀏覽器分頁上方，類似 Email 裏面的主旨，用法很簡單直接輸入：

<title> 標題內容 </title>

看完了比較簡單的 title 標籤以後，讓我們來看看比較複雜的幾個標籤吧。

首先從 meta 標籤開始，meta 在英文裏面的意思即為「原」的意思，所以 meta-data 即為原資料，或者初始資料，而在 html 裏面，我們也會需要一些這樣的資料，來幫助我們建立一份網頁，好的初始資料可以讓使用者在閱讀這份文件的時候較為輕鬆，不容易出現問題（如編碼不同產生亂碼），甚至，我們可以透過 meta 標籤的撰寫，讓使用者在搜尋引擎尋找資料的時候，更容易找到我們的網頁，因為我們已經先把網頁的內容告訴搜尋引擎，跟他說我們的網頁有什麼樣的東西，這樣提供資訊會更為方便及語意化。

<meta>

在 meta 資訊裏面，有以下幾項參數可以做設定，我們可以透過這些參數來增加文件的內容、作者姓名、文字編碼...的設定：

keywords // 用來定義搜尋引擎的關鍵字：讓使用者在搜尋引擎上輸入這個關鍵字的時候，可以找到這個文件。
description // 描述這份文件包含了什麼樣的東西，可以讓程式設計師快速的有整體的概念。
author // 宣告這份文件的作者名字
charset // 設定文件的文字編碼
http-equiv // 每幾秒鐘重新更新文件一次

使用 meta 的時候，要將上述的引數存放在 name 參數內，而設定值，需放在 content 裏面，例如：
<meta name="keywords" content = "slide" />

注意！

因為瀏覽這個文件的使用者可能使用各種不同的作業系統，而不同的作業系統對於預設的文字編碼略有不同，例如：微軟的 Windows 使用 Big5 為中文做編碼，但是 Linux 系統則是使用 UTF-8 來作為預設的字形編碼，若是我們沒有設定字形編碼的話，那麼可能我們使用 Windows 編輯的文件在 Linux 上會呈現亂碼的現象，而在 Linux 上編輯的文件到了 Windows 上也會呈現亂碼的現象，這樣的狀況是我們不樂見的，所以設定文件編碼，讓瀏覽器可以正常的將文件顯示出來就變得很重要了，而預設文件編碼的方式也是在 meta 裏面進行設定，請特別注意，他的使用方法和其他的參數不同，直接給值，不需使用 name 、 content 來處理：

<meta charset="utf-8" />

※一般而言我們使用 utf-8 來作為預設編碼，因為 Big5 編碼因為字數限制的關係，有些較為罕見的字並不能顯示。

<style>

在載入文件的時候我們也會先把這份文件的樣式表（CSS）一起載入，這樣在後面建立 HTML 文件的時候就有樣式可以依尋，我們使用 style 標籤來載入 CSS 的程式碼，透過 CSS 我們可以賦與個別 HTML 元素做排版、變色、變形，甚至是動畫之類的功能，使用方法如下：


<style>

    div{

      color:red;

      font-size:20px;

     }

</style>

<script>

在網頁裏面我們常常會需要用到一些本機端的程式碼，這些程式碼可以幫助我們做出許多的功能，如將右鍵上鎖，讓使用者不能對網頁進行存取，或是讓網頁有漂亮的動畫，抑或是使用程式，讓網頁和使用者互動，而這些程式碼一般我們會在網頁本體載入之前先將他載入進來，而載入的方法，即是透過 script 標籤：


<script>

    var input = Javascript 範例;

    document.write(input);

</script>

上面我們把一些 Heading 的部份做簡單的說明，到這裡，大家已經可以寫出類似下面這樣的程式碼了。

接下來我們要繼續進入 body 的部份，將基本的 HTML 元素及文件的建立方式進行說明。

從觀察一份文件我們可以發現幾件事情：

文件是有標題的
文件的標題有分層級，是巢狀的結構
文件裏面的文字有分粗體、斜體，甚至有些有刪除線
文件裏面有圖片
文件裏面有時候還有表格
有時候在撰寫文件的時候會需要條列式的舉例

讓我們一步一步的走下去，首先，我們在看一個文件的時候，我們會發現，每一份文件都是有標題的，大標題、小標題，各種不同的標題，而標題又有分層級，根據不同的層級有不同的大小和格式需要去遵守，所以，我們要怎麼建立標題呢？從英文裏面我們可以知道，標題稱為 Heading 所以，在 Html 裏面如果要使用標題的話，只要用 h 以及他的層數組合的標籤即可。

<h1>大標題</h1>

<h2>中標題</h2>

<h3>小標題</h3>

接下來我們進入正文的部份，在正文的部份，有些格式是我們常用到的，像是對文字加粗體、對文字設定斜體、~~想藏些奇奇怪怪的梗~~，這些東西要怎麼做呢？首先我們要先了解到，HTML 其實是可以直接輸入文字，不需要透過任何標籤都可以輸入文字的，而這些文字就會被當作內文來處理，在 HTML 剛創造出來時常常會使用這樣的方式來進行文件的編輯，但是隨著網頁技術的進步，這樣的方式已經不被推荐，因為我們並不能對他進行許多不同的格式設定，直接寫在 HTML 上的文字是死的，我們不能移動他，這樣會讓網頁變得相當靜態，所以一般我們會將內文寫在一些容器之中，這些容器，我們可以對這些容器進行格式的設定，如此一來，網站才容易動態排版。

一般我們在裝文字的時候會使用的容器有以下幾種，分別有 div 、span 及 p 這三種不同的標籤，這3個標籤的皆為一個區塊容器，他可以讓我們在這個區塊內使用任何的東西，而區別在於 div 的範圍為和內容物一樣高，寬度和頁面一樣寬、 span 的範圍為高度和內容物一樣高，寬度也和內容物一樣寬，與前後元素間的距離為一行的距離、而 p 元素的範圍和 span 相同，但是 p 元素和前後元素間的距離為兩行的距離，這是需要特別注意到的地方，如果使用不當的話，在排版上、在編輯 CSS 上，會造成蠻大的困擾。

確定文件內文的撰寫方式以後，我們開始會注意到文件內的文字格式要做設定，如何做設定呢？首先是粗體，在英文裡，粗體為 bold ，所以在 HTML 裡使用 b 作為對文字加粗的標籤，再來是斜體，英文中斜體的英文為 italic ，故在 HTML 內用 i 當作斜體的方法，而為了藏梗或是一些金融的修改紀錄常常需要用到刪除線，~~來讓文字若隱若現~~來表示這些文字被刪除過了的時候，我們可以使用 del 標籤來增加刪除線。


<b>這裡會變粗體</b>

這裡會變粗體


<i>這裡會變斜體</i>

這裡會變斜體


<del>這裡會有刪除線</del>

~~這裡會有刪除線~~

除了這些之外，我們也常常在文件裏面看到表格，表格是一個很方便的東西，我們可以拿來整理許多的數據，或是作為一個整理的空間，將文字轉換成圖像化的呈現，讓觀眾更容易接收到我們所要傳達的資訊，而在網頁的應用上，過去曾經流行過使用表格來進行排版，我們只要在表格的格子裏面填上我們所需要的圖形或文字，就可以很輕鬆的對網頁進行排版，這樣的想法看似很不錯，實際上這樣的作法會讓網頁的彈性變得很差，我們不能任意的對網頁的元素進行更動，不能動態的依據使用者的需求呈現出最適合使用者的網頁內容，除了不人性化的影響之外，若是一個公司的網站不能貼近使用者的使用習慣，那麼可能對公司來說是非常的賠錢，少去許多因為體貼的客製化所增加的收入。

表格的使用方法：
先在要使用表格的地方使用 table 標籤宣告表格，表格內容的每一個格子則是用 td 標籤，而要換行進行下一行的編輯時要在這一列的末端加上 tr 標籤，使得我們可以從表格的下一行開頭進行編輯。


<table border ="1">

   <tr><td>第1行第一個元素</td><td>第1行第二個元素</td></tr>

   <tr><td>第2行第一個元素</td><td>第2行第二個元素</td></tr>

</table>

第1行第一個元素	第1行第二個元素
第2行第一個元素	第2行第二個元素

最後我們要看到的是，在敘述我們的想法、觀念的時候，常常需要條列式的把我們的想法寫出來，條列式分為兩種：

有順序性的條列
沒有順序性的條列

首先我們先從有順序性的條列開始，在英文中有順序性的條列稱為 order list ，故在 HTML 中被簡稱為 ol ，每個被條列的子項目被稱為 list ，需要用 li 這個標籤作為開頭，注意！不論是有序列表或是無序列表都提供巢狀結構功能，可以在一個 ol 裏面套用多個、多層的 ol 。


<ol>

   <li>第1項

   <li>第2項

   <li>第3項

</ol>

第一項
第二項
第三項

同樣的沒有順序的性的條列式，在英文中稱為 unordered list ，簡稱為 ul ，使用方法與 ol 相同，需要在每個子項目的前面加上 li 標籤，序列可以交叉混用，這是比較方便的功能。


<ul>

   <li>第一項

   <li>第二項

   <ol>

      <li>巢狀小項1

      <li>巢狀小項2

   </ol>

</ul>

第一項
第二項
1. 巢狀小項1
2. 巢狀小項2

學完這些基本的 HTML 標籤還有配置，我們已經可以撰寫簡單的 HTML 網頁了，甚至我們可以自行 Hack 別人做好的網頁，從 Hack 別人往頁的過程中學習別人在撰寫網頁的方法、技巧，及熟練自己對於 HTML 的熟悉度，下面有一個很方便的 HTML 5 簡報程式，我們可以使用簡單的 HTML 就進行修改成為自己的簡報，大家可以下載下來自行玩玩，自己撰寫 HTML 簡報，相信會非常有成就感的。

DZSlide -by Paul Rouget

【教學】從 C 語言的角度入門 PHP

noreply@blogger.com (Anonymous) — Mon, 28 Jan 2013 04:32:00 +0000

==================================================================

# 前言：

> 話說，我已經有一大段時間沒有碰 PHP 了，印象中是從大一的網際網路概論之後就沒有認真的

> 讀過與寫過 PHP所以趁此機會把 PHP 重新學習與掌握一下，也藉此分享一下心得，

> 希望各位也能從我的心得中學習到一些東西，如果有什麼不對的地方歡迎指正

> 記得大一的時候，剛看到 PHP 好像看到什麼毒蛇猛獸的感覺，喔天阿！這東西好困難、好可怕，

> 對於沒寫過程式的人來說，這樣的動態語言，真的是有點太過於抽象了，現在經過了一年多了時間，

> 回過頭來看 PHP 卻有種豁然開朗的感覺，要說簡單嗎？其實也不然，要說難嗎？其實也不然，

> 掌握了一些關鍵的要點以後，學習 PHP 變得輕鬆許多。

==================================================================

從 C 語言的角度入門 php from Dylandy Chang

先把以前學過 PHP 的經驗放在一邊，假設自己完全沒看過這個語言，第一次看到 PHP 程式碼的時候，會有什麼想法？

喔！他有標籤，那他一定是 HTML 的一部份吧，這充其量只能是腳本吧，不算是一門語言吧，寫不出什麼大東西。
唔，從語法上看起來跟 C 有點像，但是好像又有哪裡不一樣，得仔細研究一下。

沒錯，PHP 在剛創造出來的時候，的確是為了擴充 HTML 的不足，所發明的一種腳本語言，但是隨著時間的演進，PHP 不斷的在進步，

他已經可以作為一個普通的語言存在。

=================== 動態語言的介紹====================================

最近幾年的時間，動態語言在業界被重視的程度大大的提高，像是 Python 、Ruby 、JavaScript 甚至是 PHP ，都讓工程師們玩出了許多

不同的花樣，為什麼這些動態語言會有這麼大的魅力呢？首先，跨平台性，這些語言都有一個很大的特徵，不論在什麼樣的平台下基本上都可以

順利的運行，不論是最常見的微軟 Windows 也好、蘋果的 Mac 也好、工程師常用的 Linux 也好，甚至是行動裝置上都可以順利的運行，

豐富的跨平台性，讓這些語言獲得工程師的青睞，工程師只要把其中一個語言學的透徹，那麼他在職場上就會很有競爭力，那麼回過頭來看，

為什麼這些語言會有這麼強的跨平台性呢？說到跨平台性，我們不得不回過頭來看以往跨平台性高的老祖宗們，大家最熟悉的 C 語言、Java

這兩種語言分別用了兩種不同的方式實現了跨平台的效果，C 語言是透過在不同平台上的編譯器，每次都將原始碼重新編譯成適合這個平台的

程式執行檔，看起來似乎很方便，但是編譯的過程其實並不是哪麼的通用的，對於使用者來說，編譯程式是一個複雜又難懂的過程，所以 Java

使用了另外一種不同的方式來達到相同的效果，那就是虛擬機器 JVM，透過虛擬機器的使用，每個使用者只要將編譯過的程式透過虛擬機器就可以執行了，

而開發人再針對各個不同的平台撰寫不同的虛擬機器，這樣就可以確保程式在每個平台上跑起來會完全相同了，而這樣的想法，影響了後面許多程式的發展，

知名的圖形化開發程式 Python 以及近年因為 Rails 又重新被大家找回來的 Ruby 都是類似的例子，這樣的風潮持續了一段時間，工程師們突然把

目光放到了網路的程式語言上面，為什麼呢？如果從跨平台性上來看，顯然網頁的程式語言也有相當高的跨平台性，只要在平台上安裝了瀏覽器，那麼

就可以瀏覽到幾乎相同的結果，所以開始了最近的 HTML 5 網頁技術發展，JavaScript 和 PHP 又重新回到大家的目光，快速的增加內容和改版，讓

這兩個語言也進入了主流的動態語言的行列。

======================================================================

以下我會從 4 點來討論 C 語言和 PHP 之間的異與同，希望各位讀完這篇文章以後可以基本看的懂 PHP 的文件：

變數的宣告
函式宣告
陣列
物件導向程式設計概念

#變數宣告：

C 語言是一種強型別的語言，而 PHP 卻是一種弱型別的語言，用較為通俗的說法即是：

在 C 語言裏面，當我們想要宣告一個變數的時候，我們要考慮很多東西，這個變數在這個地方應該是什麼用法：

是數字呢？還是字元呢？
數字的話，是整數就好了呢？還是需要小數？

這樣的方式，讓編譯器在編譯程式的時候速度會快的多，而程式的執行效率理論上也會較為良好，但是近年來，許多的程式並不走這個方向

紛紛朝著弱型別來前進，為什麼呢？最近的程式語言都標榜著對開發者友善的開發，以往我們都非常的考慮機器如何，以機器的角度去編寫程式，

讓我們程式寫起來非常的痛苦，轉個角度思考，為什麼我們要這麼痛苦呢？在宣告變數的時候就告訴編譯器這東西是變數，那就好了阿，以下我舉一些例子，

大家就可以了解其中的差別了。

在 C 語言中宣告變數是這樣的：

int numb = 0;
char name = "John";

而同樣的變數在 PHP 中的宣告方式是這樣的：

$numb = 0;
$name = "John";

從上面的例子我們可以看出，在開發者的角度來看這兩個變數其實沒有那麼大的差別的，可能大家還沒辦法體會到那種概念，這麼說好了，

C 語言的變數宣告就像是用不同的容器裝不同的東西：水就是要用杯子裝，書本要放書櫃上，看似合理，實際上確很煩瑣，

而 PHP 的變數宣告概念則不同，他像是搬家時候的大箱子，我們可以把任何的東西都放到這個箱子裏面，當我們有需要的時候再從箱子裡拿出東西就好了

所以在效率上當然 C 語言會比較好，但是從開發人的角度上，喔，那差的可不是一星半點。

#函式宣告：

在以往我們撰寫 C 語言程式的時候，每當要定義一個函式的時候，我們有幾件事情需要去做的：

在程式的開頭加上 prototype 表示我程式裏面這樣的函式，他長的樣子是這個樣子。
要注意這個函式是否要回傳值，如果要那麼回傳值的型別是什麼，傳入函式的引數要什麼樣類型的，需要什麼樣的型別。

和剛剛討論到的變數相同，PHP 把型別的判斷取消掉了，而且依據剛剛所提到的「讓開發者更容易開發程式」的觀念，PHP 把 prototype 取消掉了，

讓開發人專注的在函式本身的邏輯上，不需要為了語法和格式煩惱，以下我們看個例子：

C 語言的函式是這樣的：

prototype :

void PrintArray( int[ ] );

函式本體：

void PrintArray( int input[ ] ){
int i;

for( i = 0 ; i != '\n' ; i++ ){

printf( "%d" , input[ i ] );

}

而 PHP 的函式是這樣的：

function PrintArray( $input ){

for( $i = 0 ; $i != '\0' ; $i++ ){

echo $input[ $i ];

}

從這個簡短的例子，可以看出雖然架構上看起來差不多，但是整體來說，卻簡短很多，更容易理解函式的內容。

#陣列

陣列的部份有比較多的東西和 C 語言不同：

宣告時附值的方式：

C 語言中的宣告方式如下：

int Str01[ 5 ] = { '1' , '2' , '3' , '4' , '5' };

PHP 中的宣告方式比較特別：

$Str01 = array( '1' , '2' , '3' , '4' , '5' );

常常我們並不曉得我們需要的陣列有多大，而需要動態配置陣列的大小，C 語言中並沒有提供這樣的功能，如果我們仍然想要的話，可以硬幹出類似這樣的東西：

char* symbol = ( char* ) malloc ( input * sizeof ( char ) );

所以若是有要動態的使用連續的記憶體空間，使用C 語言的話，使用 Linked list 會是比較好的選擇

PHP 中有提供動態配置方式，我們在使用的時候非常的簡單：

$symbol = array( );
使用的時候就只要：

for( $i = 0 ; $i < 10 ; $i++ ){

$symbol[ $i ] = a;

}

>> $symbol[ 0 ] = a;

$symbol[ 1 ] = a;

...

除了動態配置陣列大小之外，PHP 也有一個有趣的陣列宣告方式，稱為：關聯式陣列

以往我們在 C 語言中陣列的 index 只能使用數字，而且一定得是大於或等於零的整數，這樣的限制雖然讓編寫程式變得簡單，
但是對於語義的了解，及程式為的維護、易讀性上就大大的打了折扣，所以 PHP 才會有關聯式陣列的產生。
想像一個表格，每一欄都有不同的名稱，我們只要將資料放到相關的位置就可以了：

$StuNum = array( 'Class01' => "40" ,

'Class02' => "41",

'Class03' => "30"

);

echo $StuNum[ Class01 ];

OUTPUT >> 40

多維陣列也是 PHP 有特色的地方，在 C 語言中我們宣告二維陣列，我們都知道是陣列的 entry 是陣列，但是我們用想像的方式去讓自己了解，

但是 PHP 就把這個概念給延伸到了程式碼之中：

C 語言：

int Str02[ 3 ][ 3 ];

PHP：

$Str02 = array(

array( '1' , '2' , '3' ),

array( '4' , '5' , '6' ),

array( '7' , '8' , '9' ) );

這樣的可以讓程式在讀的時候更為容易，我們可以更容易的用表格的方式來取得我們想要的 entry ，對於程式設計師來說，相對於 C 語言，那是友善的多了。

#物件導向程式設計的概念

在 C 語言中，其實並沒有物件導向的概念，所以我對於我們來說就是學習物件導向的概念：

我們為了更方便的撰寫程式，會把一些程式碼打包成為一個物件，透過和物件的互動，我們可以完成我們想要的任務。

可以想像一下，我們想要讓我們的產品音樂，所以我們去買了一台 CD 播放器（類別 Class），我們會需要 CD 來讓播放器有可播放內容（屬性 property），而我們為了聽音樂則需要

CD 播放器的播放功能（方法 Method），而我們想要開發新的功能時候，但是並不想要把原有的功能放棄，我們使用了原有的播放器，但是加上我們自己的功能成為新的播放器（繼承

extends），如此一來，我們在寫程式的時候就不用自己去建構大量的基礎，就好像程式書籍上有名的「自己造輪子」的提問。

下面是一個簡短的範例：

<?php

$object = new Son; //使用 new 這個關鍵字來宣告一個變數，而這個變數來使用 Son 這個物件

$object -> test( );

$object -> test2( );

Class Dad{ // 使用 Class 關鍵字宣告一個類別，以建立一個物件

function test( ){ //在 Class 裏面的 function 稱之為 Method

echo " [ Class Dad ] I am your father <br/>";

}

Class Son extends Dad{ // 使用 extends 關鍵字可以讓此 Class 繼承原 Class 的所有 Method 不需重新再寫

function test( ){

echo " [ Class Son ] I am Luke <br/>"; // 繼承後的子 Class 可以用同樣的名稱來改寫 Method

}

function test2( ){

parent::test;

// 若仍希望保留原本父 Class 的功能，可以用 parent 關鍵字將此功能賦與給自定義的新 Method

}

OUTPUT:

[ Class Son ] I am Luke

[ Class Dad ] I am your father

[閒聊] WebConf 2013 心得

noreply@blogger.com (Anonymous) — Mon, 14 Jan 2013 17:07:00 +0000

這次的活動，和以往的資訊類研討會有很大的不同，不只是因為有很多女性觀眾的參與，讓活動比較不會那們沉悶之外，主辦單位請到了前輩的現身說法，透過前輩的語言和文字，給予我們這些新進的後輩一些如何在這競爭激烈的環境下生存的方法，讓我們了解到在這樣高速變動的環境，我們如何與這個環境做出最適切的應應措施，是要順著潮流走呢？還是放開腳步走自己的路，這都讓我從中有許多的啟發。

與以往的 Keynote 就要請到很厲害的國際知名講者不同，兩天的 Keynote 都是從分享出發，第1天的前輩的經驗分享，第二天的 alvin 談噗浪錯過的機會及再起的可能，分享了創業上的經驗與波折，網路也是這十多年來創業的最短路徑之一，讓許多人在創業之初都會選擇從網路開始，有新的點子、好的點子，就會想辦法讓自己有機會打創出一片天，但是就像是其他的創業一樣，他所要承受的風險也是巨大的，失敗的例子比比皆是，就像是一個大戰場上，大家都看到了前方就是敵人的軍隊，打完這場就可以得到豐厚的獎勵，但卻沒看到地上那滿地的屍體，最後到達終點的往往不是那些表現最好的人，是那些看到地上的屍體，吸取他們的經驗所成功的那些人。

在 WebConf 這樣的場合，因為大家都還是年輕人，創業對於在場的每個人都有很多的觸動與啟發，已經創過業的人，不論成功或失敗，都是一種學習，學習如何在這樣不景氣的環境下生存；而想要創業的我們，則是另外一種學習，學習將來在創業的時候，我們有哪些是我們不足的，或哪些是我們需要去注意的，都是寶貴的無價之寶。

而這次的 WebConf 除了這些感性的部份之外，理性方面的實戰主題也非常的有內含，從 AllenOwn 大大的資訊安全到阿土伯大大的 xulrunner ^【註】本機端跨平台應用程式撰寫，都像是給我們這些資訊菜鳥開了一扇扇的窗，讓我們不只侷限在學校所學、書本所教的那些僵硬知識之中，從一個資訊菜鳥的角度來看，這次的活動對於我來說，真的學習到非常多、非常充實的知識和觀念，因為有許多不同的議程主題，我們可以根據自己的能力來挑選自己適合的方向來研究和學習，這些議程給了我一種在學習上的啟發，新的方向，這也是我喜歡參加各種不同的社群的原因，透過想法的刺激和撞擊，更好的想法和產品都有可能在討論中產生，無形中不只是我們這些新手在進步，那些強者大神們也可能因為我們不經意的一句話而有所啟發，進而創造出對於可以改變這個世界的程式。

這就是社群的最根本目的吧，我想。

圖片來源：http://i.imgur.com/rEHCq.jpg

最後推廣一下我共同創建的：WebConf 懶人包

此懶人包為不定期更新，請大家多多關注

【註】：

xulrunner 是一套由 Mozilla 公司所推出的工具，可以讓工程師透過 xulrunner ，就可以輕易的撰寫本機應用程式，多輕易呢？可以使用寫網頁的方式來撰寫程式，讓寫本機程式變得更簡單，xulrunner 包含著 firefox 3 的 Gecko 引擎，但是介面上去掉了網址列及工具列，所以對於開發者來說寫插件就是寫程式，可以大大的縮短寫程式的時間和所需的精力。

如何幫 ubuntu 的 LibreOffice 升級

noreply@blogger.com (Anonymous) — Fri, 11 Jan 2013 15:01:00 +0000

起因是這樣的，我的 Ubuntu 12.04 從安裝到現在，LibreOffice 從安裝好後都沒有更新過了，本來想說這樣就已經很夠用了，但是，剛剛在 Google plus 上看到某大大的發言表示：
LibreOffice 改朝換代，又加入了新的功能

喔喔！這讓我才熊熊的發現，原來我的 LibreOffice 並沒有隨著每次的軟體更新而更新，搜尋了一下資料發現，原來 Ubuntu 並沒有把 LibreOffice 的 PPA 加入到其更新表中，那麼事情就簡單啦：

找到 LibreOffice 的 PPA
加入 PPA 至更新列表
更新軟體列表
重新更新軟體

更新前，先確認我們的軟體版本 ( 12.04 預設的版本是 3.5.4.2 )

打開終端機，插入 LibreOffice 的 PPA：

sudo add-apt-repository ppa:libreoffice/ppa

插入完成以後，重新更新軟體列表：

sudo apt-get update

這時候更新管理員就會出現有新的更新，執行更新即可

這可能需要花上一點時間。

當當，更新完成，看起來 PPA 並沒有像官網那麼即時的進行更新，目前版本還是 3.6.0.2

雖然還不是最新的版本，但是總算是擺脫掉 LibreOffice 不會更新的問題了 ( wave )

網頁程式學習筆記 - 前情提要

noreply@blogger.com (Anonymous) — Thu, 06 Dec 2012 13:21:00 +0000

因為最近剛好同學間對於網頁的撰寫有學習的興趣，又剛好在專題要挑戰寫一個多功能的平台，剛好利用這段時間來整理一下之前所學習的網頁程式技巧，希望可以給同學一些啟發，可以更快的上手。

大家都知道前一段時間興起的 HTML 5 熱潮，為了趕上這個熱潮，許多人開始學習網際網路的程式設計，以期望可以在現在這股網路大熱潮中可以有更多的生存空間，在學習 HTML 5 之前，我們先想想為什麼 HTML 5 會紅起來，除了和以前比起來方便多了的標籤和使用 JavaScript 的 API 多了更多之外，到底主要的動機是什麼呢？了解了其中的動機，對於我們以後學習寫程式會很有幫助。

在網路剛被發明出來的時候，那時候的網頁只是單純的「文件」，為了表達文件的各項格式，HTML 的標籤主要都是在表達各種的格式方面，在以前的 Web 1.0 時代，在網路上傳播的資訊都是一些已經被寫好的文件，而使用者透過瀏覽器觀看這些文件給予我們的資訊，可能是一些文字或是圖片，甚至有可能是影片之類的資訊，但是這些資訊對於使用者來說，卻是只能觀看但卻不能互動的，使用者可能這樣反應：「我發現這個作者有些東西寫的不對，希望可以跟他說明那些不對之處，但是我發現這個網站沒辦法讓我回應和留言。」，隨著時代的演進，愈來愈多的使用者有與網頁的互動需求，各式各樣的技術被發明出來，為了表現使用者喜歡的炫麗特效，但是這些特效在原本的網頁技術中卻又沒有支援，有許多的外掛程式隨之產生，除了我們熟悉的 Flash plugin 之外 Java Servlet 也常常是我們常看到的外掛程式，而有些網站，他們可能為了自己的服務，而撰寫了自己的外掛程式，而這些許許多的外掛程式，架構起了我們現行的網際網路應用程式的核心，隨著這些外掛程式的技術愈來愈成熟，許多問題也隨著浮出水面，讓我們回過頭來重新思考，有沒有外掛程式之外的解決方案，回到根本的起點，這是 HTML 5 產生的其中一個關鍵。

以往我們需要安裝許多的外掛程式來協助我們正常的瀏覽網頁

思考為什麼HTML 5 會興起，可以從幾個角度來切入。

第一、

智慧型行動裝置的蓬勃發展，智慧型手機大約在最近4年蓬勃發展，以往手機就只是手機的功能，最多就是多個相機和隨身聽的功能，記得我高中時候的手機，每一款手機可能會有所差別，但是差別主要體現在於手機的外觀，而手機本身的內容上，並沒有太大的差別，每台機器的處理器、記憶體、以及可儲存的空間並不會差距太大。讓我印象很深刻的是，當時班上的同學有人買了一台現在看來很陽春的智慧型手機，但是這樣的規格在當時，幾乎是無法想像的超高級規格，當時可儲存空間平均落在 20 MB 左右的功能型手機，看到這樣的智慧型手機，可以說是潰不成軍。呃....扯遠了，回到正題，因為智慧型手機的興起，造成了網際網路從以前單純從電腦上使用的狀況被打破了，為了行動裝置的網頁瀏覽，網頁設計師，需要考慮的東西比以前更多了：使用者的網路不像是以前使用電腦的時候一樣，流量不用錢了，3G 上網的流量是要錢的，所以如果網頁常常需要更新，或是網頁裏面有需多大型的元件需要載入，那麼對於使用行動裝置的使用者來說這根本就是悲劇阿，你需要大量的載入，無形中就是在搶使用者的錢，這樣的情形，我想不會是每個網頁設計師希望看到的結果吧。而行動裝置免不了的就要思考到電池續航力的問題了，對於行動裝置來說除了流量的費用之外，最在意的大概就是電池續航力的問題了吧，畢竟大家都不希望出門帶了很多顆電池只為了一天的使用，這樣太不划算了，而網頁設計師也需要對使用者對電量的吝嗇做妥協，網頁的製作除了精美的外觀和精美的內容之外，也要思考如何才能更快的載入完成，怎麼說呢？因為載入時間愈長，需要和網路互動的時間愈長，對於行動裝置來說，除了流量大之外，更重要的是，這樣的舉動會消耗更多的電力。除了縮短載入時間，還有什麼方式可以為使用者解省電力嗎？我們如是思考，需要在開啟每個外掛程式的時候都提醒使用者你正在開啟外掛程式，而同時開啟更多的應用程式，就造成了需要更多的多功處理，處理器為了進行多功處理需要輸出更高的功率，而更高的功率意味著更高的能量消耗，所以電池的可使用時間就大幅度的縮短了。

電池續航力一直是我們所關注的焦點

第二、

在網際網路應用程式日益發展起來的今天，我們發現，各家廠商都各自推出自己的應用程式，而這些應用程式都需要安裝各自的外掛程式，諸如，蘋果公司的 QuickTime 、微軟公司的 Silverlight 、Adobe 公司的 Flash Player ... 族繁不及備載，這麼多的外掛程式，造成了使用者在瀏覽網頁的時候的諸多不方便，除了需要大量的硬碟空間在儲存這些外掛程式之外，更怕的是這麼多的外掛程式在下載的時候，是否會有有心人透過這樣的管道，把一些惡意軟體植入到使用者的電腦，無形之間造成了一個危險的存在，所以一個新的不需要外掛程式的解決方案油然而生，這也是 HTML 5 的一個里程碑。

透過以上的這些分析，想必大家對於網路技術的一些發展有了初步的認識，上面亂七八糟的一大堆東西，對於以後寫網頁很有用，可以讓我們在寫程式之前先檢驗我們自己的想法是否適合，有沒有什麼需要改善的地方，除了炫麗的特效，我還可以給使用者什麼樣的完美體驗？可以幫他在電力方面更加節省？還是可以在在性能方面更加優化？還是可以讓他用更少流量達到更好的應用程式體驗？這些都是我們需要去思考的部份，以後會有更多的討論有關於如何製作網頁和網頁邊寫的概念，希望這些雜亂的文字對大家有用。

各家視訊程式比較 -- 淺談 Google+ Hangout

noreply@blogger.com (Anonymous) — Tue, 20 Nov 2012 03:56:00 +0000

Google+ 是 Google 自己的社交網站，希望可以跟社群網站大老 Twitter 、Facebook 搶下一片天空，雖然 Google 有著世界上幾乎最好的一群工程師團隊，他們寫出的 Google + 也非常的出色，但是在較晚進入市場的劣勢之下，使用 Google + 的族群卻相對的少了許多，目前還是以工程師和相關技術類的工作人員為主要用戶。

在 Google + 裏面， Google 把許多他們自己的服務完整的整合到了其中，使得 Google + 在分享訊息上更為的方便與直覺，對於像小弟這樣的重度 Google 使用者來說真的是很方便的工具與社交的管道。

在眾多的 Google 服務裏面，以前我幾乎沒有用過的服務是 Google Talk ，畢竟認識的人都沒有用，那也沒辦法用的起來，真正開始利用這個服務是在 Google + 將 Google Talk 整合進來以後，並將它改名為 Google Hangout 並新增了許多適合視訊會議的功能，諸如：基本的視訊功能、即時文字訊息、螢幕分享、共同文件編輯、共同檔案管理。

簡單的介紹一下 Hangout 的使用方法，希望透過這個介紹可以讓新手快速上手：

首先開啟 Google + 頁面，在右上角可以找到「發起視訊會議」的按鈕，點下以後，就可以開始與朋友進視訊會議摟。

第一次開啟的時候會要求安裝一個 Google Talk 的插件，這個插件支援各種不同的系統，包括 Windows 、Mac 、和 Linux 都可以安裝使用。

在此插件安裝的過程中可以不需要關閉瀏覽器，也不需要關閉剛剛出現的這個 Hangout 視窗，在安裝完成後就可以直接進行視訊通訊，非常親民的設計。

安裝完插件以後，就可以進行一些對於此視訊會議的設定。

右手邊可以直接選擇想要跟誰進行視訊會議，或者在左手邊「新增使用者名稱、社交圈或電子郵件」裡直接打入朋友的 ID 進行選擇，也可以選擇直播此會議，這個功能可以在 YouTube 上分享這個會議，適合讓無法參與這個會議的人也能在網路上看到這個會議的紀錄，或者是因為 Hangout 限定在場的人數只能有 10 個人，那超過的那些人也可以在網路上一起收看，更或者，像是在一些聚會、演講...等活動，可以直接透過這個功能讓那些不能到場聽講的人們可以透過 YouTube 聽到他們想聽的活動內容。

在視訊會議的選項裏面有些其他的東西可以調整，如語言或是你們要討論一些兒童不宜的事情的話，Google 會讓小朋友不能進來這個討論。

在送出邀請以後，對方在 Google + 的視窗裡就會跳出一個對話方塊，並且顯示有人要跟你一起視訊通話的通知，點選加入視訊會議即可馬上進行視訊通話了。

進入視訊會議以後，可以看到右手邊有些按鍵，透過這些按鍵，可以啟用一些方便的會議功能，如邀請其他人、即時通訊、桌面分享、文件共同編輯、一起看 YouTube 影片之類的...

邀請其他人加入此視訊會議：

點選「邀請其他人」的選項，即可如開始的時候那樣加入其他的人員

點選「即時通訊」選項，可以在右手邊開啟文字的即時通訊功能

**注意** 這個文字訊息並不會儲存在你的電腦裏面，

所以如果不小心下線又上線的話，剛才的那些文字都會消失。

螢幕分享功能，可以透過螢幕分享功能讓所有的會議人員看到你目前的螢幕畫面，也可以是某個特定的視窗，讓會議的彈性更大了，以往需要傳輸整個檔案的事情，現在只要透過畫面即可，既省時，也省流量。

Google Effect 可以讓視訊會議的使用者用一些可愛的圖案，而這些圖案會貼在會議人員的臉上，透過人臉追蹤的技術，可以讓那些可愛的圖像貼在會議人員的臉上，讓會議可以更加的有趣，降低沉悶的氣氛。

Google Drive 的按鈕，可以開啟你自己的 Google Drive ，可以建立此次會議的會議記錄，也可以開啟以前的文件讓會議裡的成員都可以共同編輯這份文件。

也可以開啟 YouTube 共享的按鍵，在許多的討論中 YouTube 會是一個不錯的發想空間

以上為一些小小的介紹，如果有什麼不足的話，還請多多包含

補充：

在 Google 釋出新版的 Hangout 以後，這篇文章所寫到關於在 Linux 上螢幕分享會出現問題，已經解決。（根據 Whisky Max 大大表示，在 Chakara 上螢幕分享會回不了原本的視訊畫面）

解決 CrossOver 在 Ubuntu 12.04 下安裝 IE 無法啟動

noreply@blogger.com (Anonymous) — Thu, 01 Nov 2012 15:08:00 +0000

因為昨日(10/31) 萬聖節 CrossOver 大放送的關係，所以也去弄了一套來玩玩看，順便來把比較會需要的 Windows 程式裝起來，發現支援列表蠻完整的，對於在非 Windows 平台的使用者來說，這樣的程式量其實是蠻足夠的。

話說，小弟我現在用的系統是 Ubuntu 12.04 ，想說裝了 CrossOver 以後，一定要裝個 IE 來用，這樣才不會因為一個瀏覽器的原因就需要重新開一個虛擬機器或是重新開機成 Windows 來使用，所以就高興的裝了下去，而在 CrossOver 上則表示，目前他們所支援的版本，穩定版為 IE 7 ，可以透過他們的網站下載安裝包，不需自己手動下載，所以我就很高興的點了下去，讓他自己安裝了。

經過了一段時間的安裝之後，程式很成功的被安裝起來了，但是第一次開啟的時候，讓感到很挫折，IE 會自動下載一個不知道是什麼的檔案，然後就自動關閉了，本來我想，可能是安裝失敗的問題，結果不然，經過多次的反覆安裝之後，仍然還是遇到這個問題。

經過搜尋，發現，原來是 Ubuntu 12.04 的系統設定問題，只要透過一個簡單的指令，就可以使安裝好的 IE 正常運作了。

打開終端機，輸入：

echo 0 | sudo tee /proc/sys/kernel/yama/ptrace_scope

這可以把 0 這個參數暫時寫入到後面這個檔案裏面，但是在重新開機以後，這樣的設定就需要重新設定，而要確保重新開機以後此設定還可以正確執行，要修改 /etc/sysctl.d/10-ptrace.conf 這個檔案。

在終端機輸入：

sudo vim /etc/sysctl.d/10-ptrace.conf

找到 kernel.yama.ptrace_scope = 1 ，將值改成 0 ，儲存後關閉檔案。

如此一來 IE 就可以正常的運作摟！

市場主流視訊程式分析比較--簡述

noreply@blogger.com (Anonymous) — Thu, 01 Nov 2012 05:29:00 +0000

目前市面上有許多可以通過網路，來進行免費的視訊、通話之類的軟體，這裡將討論幾個目前市場上較為有名的幾個免費視訊通話，分析他們的優缺點與哪些族群適合這些產品。

例如：一對一視訊通話，普通的 MSN 、Skype、 Hangout 都是簡單好用的程式，而對於學生等，需要多方視訊，又需要便宜的通話費族群， Hangout 會是不錯的選擇。

Skype

Skype 在前幾年是一個蠻有名的一款視訊通話的程式，不錯的畫質，但是這並不是他主要的賣點，他最大的賣點在於，他可以讓使用者透過網路撥打普通的家用電話、行動電話等電信電話，而它的優點是在於撥打跨國電話時，有非常便宜的費率，讓許多在外的遊子們可以透過網路，便宜的連繫遙遠的家人。

Skype 可以同時 25 人同時通話，是一個蠻有亮點的功能，對於很多頻寬不大的使用者來說，像是 3G的使用者，他們希望能透過網路進行遠距會議，但是視訊對於頻寬的要求太高了，所以可以使用這個通話的功能，既可以滿足開會的需求，也可以有不錯的會議品質。

可惜的是，Skype 在視訊通訊上的努力並不是那麼的完善，目前只有一對一視訊通話是免費的，而多人視訊，則是需要付費的方案，並且最多也只能 10 個人，算是比較可惜的地方。

對於一些視訊上的輔助功能，像是「桌面分享」、「多人畫板」...等功能支援較為不足，像是在「桌面分享」方面，需要版本5.0以上的產品，但是對於 Linux 使用者卻只有 4.0 的版本可以提供下載，是較為可惜的地方，感覺他們對於 Linux 產品的開發比較不是那麼熱心。

Hangout

Hangout 是一個由 Google Talk 脫胎而來的線上即時通訊整合平台，既然是整合平台，他除了即時通訊之外，他也整合了許多的 Google 服務，可以讓視訊會議在進行中，也可以使用這些 Google 服務，共同的使用這些服務，可以減少無用的資訊傳輸，增加會議的效率。

Hangout 提供了最多 10 人的視訊會議，免費的多人視訊是一大亮點，除此之外，他也可以讓使用者透過 Hangout 讓使用們都可以分享目前的畫面，在進行許多會議的時候，是一個很方便的功能。

Hangout 也有提供線上直播功能，可以讓使用者輕易的直播出他們的會議內容，可以讓不能參與這場討論的人，也可以透過 YouTube 觀看這場會議，讓直播不再像以往那麼困難，每個人都可以輕易達成。

除了整合 Google 服務之外， Hangout 還有提供像是 Skype 一樣的電信電話通話功能，價錢也是非常的親民，透過這樣的功能， Hangout 漸漸的成為了許多公司和學生開會的選擇，在往後的文章會特別討論有關於 Google Hangout 的教學與功能介紹。

OpenMeetings

這是一款較為進階的程式，是由使用者自行架設伺服器，而使用者們透過連線到這個私人伺服器來進行會議的程式。

OpenMeetings 是一個開放原始碼的專案，是由 Flash 作為伺服器端的架構，客服端則是使用 Java 的執行環境，所以是一個高度跨平台的線上會議方案，對於公司內部的會議，或是對於使用者使用不同平台的會議環境來說，是比較適合的一種方式。

OpenMeetings 也有提供許多其他會議軟體會提供的功能，諸如多人視訊、共用畫板、共同編輯、桌面分享等會議功能，對於需要會議的公司來說可以說是一大福音。

後面幾篇文章會有 OpenMeetings 的安裝及功能的分享，請大家敬請期待。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝此篇文章會持續長大中＝＝＝＝＝＝＝＝＝＝＝＝＝＝

C 語言學習筆記 -- 內建排序函式

noreply@blogger.com (Anonymous) — Fri, 26 Oct 2012 07:03:00 +0000

一直以來想到排序，我大部份都是使用 Bubble sort 來做排序，並不是最好的，也不是最快的，但是很直觀。其實在 ANSI C 的標準函式庫裡面就自帶了一個更快、更高接的內建排序函式:Quick Sort 這裡簡介一下 Quick Sort 演算法：

Quick Sort 示意圖 <維基百科>

快速排序使用（Divide and conquer）策略來把一個（list）分為兩個（sub-lists）。
步驟為：

從數列中挑出一個元素，稱為 "基準"（pivot），
重新排序數列，所有元素比基準值小的擺放在基準前面，所有元素比基準值大的擺在基準的後面（相同的數可以到任一邊）。在這個分割結束之後，該基準就處於數列的中間位置。這個稱為分割（partition）操作。
遞迴地（recursive）把小於基准值元素的子數列和大於基准值元素的子數列排序。

運用Quick Sort 的演算法，時間複雜度在最差狀況，有O(n^2) ，但是這樣的狀況並不常見，平均狀況則有O(n log n)的效率。

以上資料出自<<維基百科>>

ANSI C 的標準函式庫裡有一個直接好用的函數，可以直接做快速排序，我們可以使用以下的作法來達成：

qsort( 需要排序的陣列 , 陣列的大小, sizeof(排序的物件), 比較的方法 );

這個函數需要傳入我們需要排序的陣列，陣列裡面的東西不論是什麼，只要能夠排序都可以傳給這個函數，不論是英文字、整數、浮點數、甚至中文字，都可以送進去給他排序蠻神奇的東西。

比較需要注意的是，我們要在函數的最後傳入一個如何比較的方法給 qsort ，畢竟什麼都可以排序的原因是，如何比較大小的規則是由我們程式設計師自行定義，例如我最近寫到的排大小的程式，程式碼如下：

qsort(student, counter, sizeof(int), cmp);

int cmp( const void *a, const void *b) {
return *((int*) a) - *((int*) b) ;
}

上面這個排序方法是為了將一組學生的陣列進行排序，比較大小的方法用自訂函式 cmp 來定義，而 cmp 裡面我們可以看到傳入的參數是用 void * 這個無型別指標來進行指向，因為就像上面所說，qsort 這個函數可以對任何類型的函數來進行排序，所以他必須要能對任何東西進行指向才可以，但是 return 的時候，我們必須能進行大小的比較，所以我們必須把 void * 轉換成我們原來資料的類型，像是上面我就是轉換成 int * 但是為了要進行大小的操控，所以又必須把指標轉換回原資料，所以在最外層要再包上另外一個 * ，最後用相減的方式，可以知道 a 和 b 之間的大小差別，從而可以進行大小的排序。

結論：
這個方法在程式語言比賽的時候是一個很實用的功能，但是對於新手來說可能不是那麼適合使用，畢竟多了解各種不同的排序演算法的建立方式，以及應用方式，更能增加對於寫作程式的經驗和想法。

各家雲端硬碟比較與簡易分析

noreply@blogger.com (Anonymous) — Tue, 16 Oct 2012 03:42:00 +0000

最近各家雲端硬碟業者百家爭鳴，都用大容量的免費空間來吸引使用者使用他們的平台，想說來整理一下這些雲端硬碟的比較和分析一下這些產品的特性吧：

微軟的 Skydrive，提供了免費7GB的線上儲存空間，而且對於Microsoft Office 的相容性相當良好，成為一些學生族群喜愛的作業集散地，並有著Windows 、Mac 和網路都能存取的多平台優勢。

最有發展雲端空間基礎的 Google 也不落人後的，相繼推出了 Google Drive ，提供了5GB的線上空間，因為 Google Drive 是從以往Google 令人稱讚的Google 文件發展而來，在許多有線上會議需求的族群，如工程師、學生...間有著很高的支持度，可惜的是，雖然有許多工程師使用者， Google 仍舊沒有打算推出 Linux 版本的 Google Drive ，但是在其他的平台，如Windows 、Mac 、iOS、Android 都有蠻好的支援。

蘋果在推出 OSX 10.7 Lion 的同時，也推出了 icloud 雲端硬碟，提供了5GB的空間可以儲存資料，但是這5GB卻是受限的存取，譬如只能存取相片，而想要存取iwork 所產生的檔案，必須先購買 iwork 應用程式，並且 icloud 只支援 Mac 和 iOS 的裝置，算是一個族群明顯的產品。

Dropbox 是最早，也是最有名的一個雲端平台，他們所創的在檔案管理員裡面新增專屬同步資料夾的作法，也在後來為各家產品學習的對象，可惜的是，相對於其他公司只能算是一間小公司的Dropbox 只能提供 2GB的免費空間提供給使用者，但是他優秀的跨平台性，除了Windows 、Mac 之外Linux 也有提供原生的程式，讓使用者可以無縫的同步自己的資料，是一個方便的雲端硬碟選擇。如果你是學生的話，可以透過 Dropbox 的這個方案，驗證你自己的.edu信箱，可以馬上獲得 5.5GB 的雲端空間，而推廣這個方案的話，可以快速累積到 25GB 的空間，使得 Dropbox 成為目前免費空間裡最大容量選擇。

最近一個剛崛起的新雲端空間 Minus ，一開始他是集中注意力在分享圖片上，是一個標準的圖庫區，簡單的使用方式，快速的蒐集到許多的使用者，並且讓他開始放寬上下傳的限制，並提供免登入 200MB檔案上傳，而註冊帳號的話，可以得到 10GB 的免費空間，而且也有提供上傳管理工具，在各平台上，如 Windows、Mac、Linux 及行動平台上都有提供支援，是一個新崛起的強勁新秀。

解決 linux 下 google+ hangout 螢幕分享bug 問題

noreply@blogger.com (Anonymous) — Mon, 15 Oct 2012 08:42:00 +0000

這個問題困擾我很久，之前因為這個問題讓我每次要開hangout 的時候都會想說乾脆開windows好了，這樣就不會有這個問題了，在google 的問題回報裡面也有列入這個選項，請使用者回報，他們會處理這個問題，大家可以上這個網站上去點選，希望google 可以在未來釋出新的更新的時候就能改善這個問題。

以往在linux 下 hangout 分享桌面的時候會造成視訊畫面都變成黑色的，而關閉分享按鍵以後，黑畫面的狀況也沒有辦法解決，所以只能很乾脆的重開 hangout了

現階段可以透過安裝補丁來解決這樣的問題：

Ubuntu：

sudo apt-get install libxrandr-dev

Fedora：

yum install libXrandr-devel

注意在 Fedora 上補丁的名稱不同，安裝完以後，重開瀏覽器，就可以正常分享桌面了。

Hello World！

noreply@blogger.com (Anonymous) — Mon, 03 Sep 2012 23:41:00 +0000

自從上了大學以後就很久沒有那個心情還有意願再繼續寫網誌，自從噗浪、臉書的使用之後，這個現象又更加的明顯了，這次重新提筆回來寫網址的動機，真的是最近發生了太多的事情了，參加了「台中自由軟體固定聚會」以後，學到了很多東西，這些都想讓我好好的寫下來，分享給網路上有需要的大家，希望我的網誌也可以像聚會裡的大大們一樣，有幫助到有需要幫助到的人，就像九把刀說的「希望可以因為我，而讓這個世界有一點小小的改變」那我就很滿足了。