發計有三種

發計有三種：

一是單向而發；

二是雙方互發；

第三種，是融會貫通。

軟體也分三種。

一是單向操作
像是古早的terminal，dos，user輸入指令，電腦因應user的指令得出結果，最佳範例就是現在菜市場隨處可見的計算機，這種方式的軟體易操作，只要背熟各個指令的輸入語法，就可以輕鬆學會。但操作過程煩悶無聊。這類軟體是為了需要而存在，但他無法創造需要。


二是雙向操作
你輸入名字，軟體跟你說，[HI~XXX 您好]，這就有了雙向操作的基本要求。進階點是當user輸入越多資料，電腦紀錄越多資料後，能夠根據你的資料判斷你的需求，例如單機遊戲結局往往不只一種，遊戲會根據你遊玩的過程去判斷，例如你常常跟某個女主角講話，或是你每次都選擇做壞事，這些資料會在後面默默地儲存下來，最後導向不同的結局。又或是一個人常常在購物網站上搜尋與寵物有關的資料，久而久之資料累積越多，電腦再經過軟體研判後，下次你打開購物網站，首頁就會是大多數與寵物有關的商品，現行pchome線上購物就有這種功能。這類型軟體使user在操作冷冰冰的電腦上多了一份樂趣，但他還是無法創造需要，但至少他大大提升人們願意使用軟體的機率(或說是購買你產品的機率)。


第三種，是人機互動
初階的人機互動是人類藉由機器去互動，例如線上遊戲永遠沒有結局，因為user其實在玩的不是遊戲，user在玩的是與人們互動的樂趣，又或說是facebook，要是你身邊朋友都沒在用facebook，就算facebook功能在強大，相信我，你也不會感興趣。
進階的人機互動讓人們對機器產生感情，最佳例子，就是機器人：哆啦A夢，雖然他是21世紀機器人，但他有感情，看到老鼠會怕，看到銅鑼燒會開心，看到靜香洗澡會興奮，於是大雄跟他產生情感，每天晚上一起睡，洗澡一起洗，肥皂掉了一起...
這類型軟體設計不該以user在使用機器為原則出發，而是要以user在與"人"互動為設計起點。也就是說，這型軟體不能在user面前表現出他完美的一面，而是要讓user知道他會學習，他會越來越聰明，並且讓user覺得他不是機器，他是人因為他有感情，像是電子雞那樣讓人覺得他有感情，做人才會有的反應，使user黏在他身上，讓user覺得他買到的不是一台機器，他得到的是一個朋友，產生信賴感。於是產品就創造了需求，創造了人們自己都不知道的需求。

寫這篇文章是因為近期我看了一篇我與Siri的一週. My Week with Siri (圖多)，這篇文章末端處解釋人與智慧車互動時寫了幾句話讓我沉思了很久...

電腦程式的設計者，如果沒有將智慧車設計成「會讓使用者把它當人看」，使用者就不會問出「問人 的問題」，而是「問機器的問題」，這麼一來，無論機器再厲害，它可能也只能用機器的角度來回答問機器的問題。

根據自身多年程式設計經驗，我們總是習慣把機器當成機器，程式當成程式，你問我A我就答你A，你問B我就答B，完全沒有考慮到使用者到底是把這程式當成甚麼?使用者真正要的到底是甚麼?或許使用者真的不需要完美的產品，他們要的只是一種感覺，一種與人心靈互動的飽食感。從現在開始，我們應該改變我們設計程式的習慣，留一點點缺陷，留一點點不完美，就算他人嘲笑、諷刺，都應當試試看以人的角度去設計程式，而且其曲彌高，其和彌寡，當他人都在嘲笑你時，或許你已經完全超越了他們，畫出你自己嶄新的一頁。

設計師們，共勉之。

Kai

Taiwanese girls are easy?

有過憤世忌俗經驗的人一定知道這個有名的google關鍵字搜尋結果，為此曾經還鬧上新聞過，記者的論點是：「既然關鍵字自動跳出這個搜尋結果，表示這一定是事實」。雖然台灣新聞素養是爛的世界聞名，但為了深入了解網路業，我還是稍微研究了一下這個有趣的關鍵字結果。

要知道為甚麼關鍵字提示會出現這個結果，就要先知道GOOGLE關鍵字提示的運算邏輯是甚麼。

1. 因為居然已經有380萬人次，上網搜尋這個句子

新聞中的這段話是個錯誤的敘述，記者所謂的380萬人次是從 約有 3,760,032 項結果 (搜尋時間：0.10 秒)  這個地方引述而來，但這個數字3,760,032並不是實際上有這麼多人搜尋了 "Taiwanese girls are easy"這串字，而是所有包含了"Taiwan"、"girls"、"easy" 搜尋結果的字串，那麼實際上搜尋"Taiwanese girls are easy"這串字的人到底有多少呢? 我們可以利用Google關鍵字工具來查看結果。我們可以得知 :

實際上搜尋這個句子的人數在全球每月只有2900人次，跟記者的380萬有非常大的出入，而從下面的統計表可以看出來，Taiwanese girls 至個字串遠比Taiwanese girls are easy 來的熱門一點

如果我把句子替換成Japanese，可以得到下面的結果 : 

Japanese girls 竟然有著驚人的183萬筆搜尋量，可見這世界上的男人對於日本女孩子還是有比台灣高出很多的興趣的，同理可証只要把國家名稱代換之後，得到的結果都是差不多的，並沒有記者所謂Taiwanese Girls are easy特別熱門的狀況發生，硬要比的話，事實是這樣

Japanese>Chinese>Taiwanese      ......還蠻正常的，不是嗎

2. 關鍵字為何會出現.......are easey ? 

這是因為Taiwanese girls ......的搜尋量在比起Japanese girls 等句子偏低，而其中平均每月搜尋量2900次的"Taiwanese girls are easy"這個衍生句占了相對多數，於是就被GOOGLE搜尋引擎拿出來放在搜尋列表了。也可以說，Taiwanese girls這個字串實在不是很熱門的啦! 

我改用American girls一查，也出現了這種結果，難道要說American girls也真的很easy囉? 當然不是，所以我歸納出了兩個感想

媒體亂象

台灣媒體真的很神，自己的新聞還可以說本台播報內容不代表本台立場，那到底甚麼東西代表你們立場呀?碰巧今天Jamie的文章也講到了這件事情，總的來說這不是一個可以一夕之間改變的議題，欣慰的是現在已經有人默默的開始了改革，他們是WeReport調查平台。網站營運方式是由資深媒體工作人或是個體發起新聞議題，再由募款的方式籌足深度採訪經費，雖然不知道是不是個好模式，但還是為他們加油!有興趣的也可以看這篇文章

知的權力
資訊爆炸時代每個人都能很輕易得到資訊，但越來越不容易分辨資訊對錯，所以現代人除了必備"收集資訊"的能力以外，還要訓練"分辨資訊"的能力，所謂知的權力並不是單純的接收→知道，而是接收→消化→知道。尤其是對於時下這種速成又缺乏驗證的新聞，更不能以全盤接收的角度去看它，合理的懷疑、冷靜的分析、大膽的實現，創業家們要讓腦子隨時都在轉動。

HTML：Internet Developer的第一步

 

身為一個網路開發工程師，你首先必須要知道的就是：HTML。

就算你職位不是工程師，但若是你對網路產業有興趣，我也建議你稍微弄懂HTML在幹什麼？就連最近在網路業很夯的知名創投家 - Mr.Jamie，他也懂HTML，略懂。（甚至他還略懂Ruby on Rail，這連我也都還不熟）

今天在這裡，我們只談技術，對於HTML歷史發展有興趣的人，可以去HTML-wiki逛逛。

看到“技術”兩個字請不要害怕，其實網頁技術不過就等同“巫師放直火的走位，姜維先電再冰然後瞬過去冥天大絕”一般，沒什麼可怕的，熟能生巧罷了，況且這篇文章是給完全沒看過code的人所寫，所以請不用擔心會太複雜。

HTML的架構

HTML由<head>與<body>所組成。

而這兩個東西都被<html>所包圍著。 

• <head>：專門負責處理網頁的重要事項，例如link檔案，提供關鍵字給搜尋引擎，sitemap，展示網頁title等，簡單一點想其實他就是“大頭”，你頭腦裡的東西平常是不會隨便給別人看到的吧？而重要事項都是裝在你腦裡對吧。（不要跟我說你都裝...ㄕ.....）
• <body>：專門show出你想給使用者看到的東西，網頁的基礎模型從這裡開始建設，例如表格，footer（就是一般網頁底下的那一塊），左方的功能表，內文等等。其實稍微想像一下也知道，它叫做“body”，身體主要就是給人看的對吧？像是你也常常會去看蒼井空的...而不會只看他頭吧？
• <html>：告訴網頁這是由html語法所寫，不是xml等其他語法。

所以一般網頁的架構會是長得像這樣：

<html>
    <head>
        頭腦
    </head>
    <body>
        身體
    </body>
</html>

在html裡，"<"與">"夾起來的東西我們稱作"tag"。所有東西都會用開始tag: <sth> 和結束tag: </sth>（sth: something）包起來。（有些情況下為了code的整齊乾淨，會省略後面的結束tag: </sth>，只寫開始tag: <sth />，並在後面加個"/"代表結束。）


<head>在想什麼？
通常我們會在<head>裡放入一些我們不想讓使用者看到的資料，但這些資料又是必須要在網頁讀取完成前先載入好的，這裡舉幾個簡單例子：

CSS：美工檔案，底下代表連結到這個美工檔案。

<link href="test.css" rel="stylesheet" type="text/css" />

<title>：標頭資訊，就是你在瀏覽器上方顯示出的名稱。底下例子若寫在網頁裡，那此網頁上方就不會顯示“StartUp114:...”，而會顯示“This is a title”。

<title>
    This is a title
</title>

<body>想表達什麼？
表達所有我們想告訴使用者的事物。

1. 字形大小：<h1>, <h2>, ~ <h6>，數字越小代表字型會越大。
   

   <h1>大</h1>      
   <h6>小</h6>
   

2. 字體：<b>代表粗體，<i>代表斜體。
   

   <b>我好粗</b>
   <i>我好斜</i>
   

3. 分隔線：<hr>。
   

   <hr/> //分隔線
   

4. 按鈕：<button>。
   

   <button name="button" value="button" />    //value代表按鈕上所顯示的值
   

5. 輸入欄位：<input>。這裡分幾種型態(type)：
   

   <input type="text" />    //純文字輸入
   

   <input type="password" />    //密碼輸入 
   

   <input type="checkbox" />    //勾選欄 
   

   <input type="radio" />    //單選欄
   

6. 表格：<table>。
   

   <table>    //表格
       <tr>    //第一欄
           <td>1st</td><td>2nd</td><td>3rd</td>    //三個格子
       <tr/>
       <tr>    //第二欄
           <td>1st</td><td>2nd</td><td>3rd</td>    //三個格子
       <tr/>
   </table>
   

7. 列表：<ul>, <li>。
   

   <ul>
       <li>列表一<li/>
       <li>列表二<li/>
       <li>列表三<li/>
   <ul/>
   

看到這裡，恭喜你！你已經成功踏入神秘的網路工程世界了。


試一試吧！

竟然你已經看到這裡了，想必你也手癢很久了吧。
底下是我用javascript與html做成的html練習小工具。來動手試一試吧！
（或是你可以把我上面寫的code貼上去試試看）

---

---

小技巧：逛網頁時，若你對這網站的架構有興趣，你可以按右鍵然後點選“檢視原始碼”，這樣你就可以看到所有的html code囉。


截至目前為止，我寫了一年多的code了，寫程式其實真的不需要太聰明，只要你細心，邏輯正確，大致上都能完成程式工作，而對我來說coding帶給我最大的好處便是：加強我對所有事物的邏輯判斷，寫程式，真的是一件挺有趣的事呢！

Enjoy coding,

Kai

HTML5 v.s. Flash 生死鬥

為什麼我突然想寫技術相關文章呢?

竟然你誠心誠意的發問了，那我就大發慈悲的告訴你，為了防止本網誌過於單調，為了守護網誌的多元性，貫徹愛與真實的技術文章，可愛又迷人的瀟灑工程師，網路業!工程師!身為一個網路工程師，聊點技術文章，也是很合理的。就是這樣!喵^.<

不是所有人都是工程師，所以這邊簡單介紹一下何謂HTML5? 何謂Flash?

何謂HTML5

HTML5是由HTML延伸而來，所以要介紹HTML5必先了解HTML，HTML較為簡單的解釋為網路程式語言 (雖說實際上它算是一種協定，遵守XML協定之下的產物)，主要的功能為提供程式設計師們架設網頁用，現時則用來作為設計一個網頁(or網站, whatever)的主要架構，接著再用Javascript / jQuery / Ruby on Rail等script語言來控制網頁的特效及簡單驗證資料，而後端與資料庫串接或是複雜的處理則由PHP或是ASP來控制。若將網站比喻為一棟大樓，這棟大樓的鋼筋，就是HTML。
那HTML5與HTML有什麼差別?簡單來說，HTML5，比較新!!(踹飛...)因傳統HTML只能針對網頁作架構上的設計，例如將網頁左邊與右邊分開，中間放一個區塊作為主要資料呈現，上面放一排工具按鈕，下面放個copy right什麼的，無法做到像是動畫、特效、3D運算，或是直接拖曳桌面檔案到網頁上等酷炫功能，已然完全無法跟上時代的演變與無法滿足人們的視覺需求，於是，HTML5誕生了。

HTML5與HTML的不同之處：

• 新增動畫功能(與Javascript & CSS)
• 3D特效 (即時二維繪圖)
• 定時媒體播放
• 離線儲存資料庫（離線網路應用程式）
• 拖放資料檔案
• 新增一堆標籤與移除舊HTML標籤

何謂Flash

由Adobe公司在1996年針對網頁無法撥放動畫影音特效而發明，主要作用是用來在網頁中載入一段華麗的動畫，撥放多媒體物件，或製造可與user互動的視窗，像是網路上的許多小遊戲，95%以上都是由Flash製作。

生死鬥的由來

一切一切，都是因為我們偉大的Steve Jobs在2010年發表的一篇文章，Steve Jobs闡述為何不在Apple裝置上支援Flash，這篇文章在當時引起了一陣轟動，甚至有人認為Apple公然向Adobe宣戰了，但其實，Jobs只是闡述當時他所看到的未來，一個Flash慢慢消失的未來，在這之前並沒多少人特別以HTML5去抨擊Flash。而就在前幾天，Adobe宣布放棄行動版本Flash，這無疑在科技圈投下了一顆震撼彈!!不是因為證明了Steve Jobs的卓越遠見，而是橫行15年的Flash，終於承認自己開始跟不上潮流了，HTML5的聲勢開始盛囂其上，這場對決，即將完結!?

究竟Adobe Flash出了什麼事?

他無法與時並進，Flash作為一個曾經佔有網路多媒體市場95%的工具，卻從不聽進Adobe以外開發人員的心聲。我們要Flash支持3D運算，他不做。我們要Flash降低消耗CPU資源，他不聽。我們要Flash降低耗電量，他不聞不問，讓iPad死不安裝Flash，Jobs公開聲明：你是要有Flash但只有1.5小時電量的iPad還是沒Flash但電量10小時的iPad?行動裝置的崛起，Flash無法適時調整，逼迫硬體廠商生產行動裝置元件時，為了能撥放Flash，大幅提高成本，你知道的，要在行動裝置上播放Flash是需要特殊元件的，這元件，很貴。Flash是個封閉的軟體，他由Adobe所控制，相對於HTML5為開源軟體，這是個弱勢，HTML5可以很靈活，隨時加入新功能，Flash不行。Jobs與Google想要HTML5崛起，這兩家大廠各懷鬼胎，Jobs不想讓旗下產品iPad, iPhone等受到Flash控制，若每次更新或app strore上小遊戲都被Adobe Flash吃掉30%營收，Jobs會讓許多員工變成no jobs。Google為了降低微軟OS的市佔率，他當然要支持HTML5，因HTML5可以幫助Google做到像是Chrome OS，一個在雲端上的OS，Google長遠目標其一就是使未來的人們電腦上再安裝OS，只要有Browser，就可以上網使用OS，雲端OS。
綜合以上各個政治因素，技術因素，未來HTML5漸漸取代Flash已然成為趨勢，除非Adobe能想到什麼殺手級招數!
說到殺手級招數，HTML5已有人實作出幾個殺手級應用了：

1. 動畫
2. 無限的球
3. 滿天星斗
4. Web applicateion
5. 小畫家
6. 擁有物理引擎的小畫家
7. 3D圖框
8. 小遊戲
9. 俄羅斯方塊
10. 在Browser上打CS!!

注意到了嗎?以前這些可都是要用Flash來實現的呢!且HTML5不需要像Flash那樣先等他全部載入完才可以運行，他可以運用Ajax技術讓我們在背後暗地載入，這對user experience來說大大加分!而且，這些應用還都是一兩年前所做的。

HTML5 v.s. Flash 啟示錄


身為一個Start Uper，經過了這一連串HTML5與Flash的大車拼，你所應該從中知道的：

• 你必須要與時俱進，聽取市場的需要，而不是先做出產品再強迫大家使用你的產品。
• 你要能隨時靈活地更改你的產品，畢竟誰也無法預測人們的真正需要。
• 95%以上案例開源產品絕對比封閉好，閉門造車要造出符合大家期待的產品有很大難度，畢竟這世界上很難找到第二個Steve Jobs。
• 不要只看眼前，一個產品的興衰背後絕對有複雜的因素，或說背後有許多低調的大推手(見Apple與Google)。
• 不要盲目跟隨主流，主流未來未必會是主流。(台廠們你聽到了嗎?)
• 若無法因應市場靈活調整你的步伐，就算現在市佔率達到95%，也將會有滅頂之災。
• 身為一個技術人員，請開始學習HTML5。
• 聽Steve Jobs的話。

請不斷學習，不斷調整，且獨立思考，進而影響他人，加油!

Kai