HP與Whitman

    1934年，距今正好八十年前左右，在一次科羅拉多山脈的野外宿營中，兩位史丹福大學電機工程系的畢業生Hewlett和Packard於因志趣相近而結為摯友；他們倆外表極為不同，Packard身高6.5英尺，有高高的前額和鼻子，Hewlett身材則較短胖，高度尚不及Packard的肩膀，倆人合照時要同時入鏡的方法就是讓Packard坐著；雖然他們在大二時便認識了，但是經過這次為期二週的露營活動，他們發現彼此對於大自然都有共同的愛好與相同的看法，於是在這次活動之後他們成了一生的摯友。

 

畢業五年之後，在史丹福導師Fred.Terman的支持並鼓勵下，他倆決定出來自行創業，於是在目前已成為矽谷重鎮的Palo Alto市租下一間小屋，並利用車庫的空間開發出HP第一個電子儀器產品「HP 200A音訊振盪器」，這家兩人所合作在車庫中創業的公司，在後來不僅成為人傳誦的矽谷創業經典神話，更深深的影響了後來美國、與全球資訊產業的發展.

創業除了需要技術與資金，機運也是不可或缺的，隨後發生的二次世界大戰讓HP得到了機會並迅速的發展，三年後便興建起自己的辦公大樓（稱為Redwood大廈），它集辦公、實驗室及工廠於一體，面積廣達10,000平方英尺，據說選擇的地點和面積大小是考慮到如果電子業不景氣，還可將大樓改建成食品雜貨店，只是Hewlett和Packard可能萬萬沒有想到，數十年後為了因應不景氣，HP並沒有改賣食品雜貨，而是將所賴以起家的電子儀器業務脫手，靠著資訊相關產品在WinTel時代風光了好一陣子，並且成為世界最大的科技公司。

然而HP近年來卻失意於行動裝置市場，營運成長逐漸停滯甚至衰退，在重組、裁員、指派CEO等多重復興策略且沒有帶來太多功效之後，終於祭出了最後絕招：分家！因此最近IT業的大新聞就是HP終於宣佈即將分割成2家獨立上市的公司了，這項新聞在業界盛傳了三年之後果然成真，依HP的規劃將於2015年10月前完成，且隨著組織重組，預定將會裁員5萬5千人。

拆分為兩家公司

　　將一些部門從公司剥離出去單獨上市可說是恐龍型大企業調整和重整組織最簡單也最合算的方法了，所以這已經不是HP第一次拆分相關業務，倍受爭議的前HP明星CEO菲奧莉娜在1999年初上任時，便曾應董事會的要求，將醫療、量測儀器等不屬於資訊科技的相關部門分割上市為安捷倫公司，以便集中精力專注於電腦產業。

　　而這次HP預定將分拆為兩家公司，動作與規模比之前的安捷倫分拆案影響更大範圍更廣，原有的HP Inc.將繼續負責個人電腦及印表機等業務（統稱為PPS - Personal and Printing Systems）,，由現任HP列印事業群領導人Dion Weisler擔任CEO，，產品範圍從個人電腦、墨水／雷射列印、行動化、到繪圖、列印管理服務等；另一家分拆出去的新公司則稱為「惠普商務」（Hewlett-Packard Enterprise），負責伺服器、網路、軟體、儲存、雲端等企業端的產品，由Meg Whitman親自領導，預估分拆之後這兩家公司規模相當，年營收皆超過500億美元。

　　其實HP很早就有了分家的念頭，但是Whitman在2年前剛接手HP的時候取消了這項計劃，她在當時給的解釋是：「保持完整，公司更強大。」，不過二年之後，現在她對於這項分拆案的態度有了一百八十度的轉變，她在說明會上的答覆是：「保持靈活是唯一取勝之道」。

關於Meg Whitman

　　請注意到主導這次分割案的HP執行長Meg Whitman，這位外表看來慈祥溫和有如鄰家大媽的女士，在職場上的表現卻是不同凡響，她最顯赫的功績是在擔任eBay CEO的十年期間（1998～2008）， 讓eBay從一家30人規模、年營業額400萬美元的新創公司，成功的渡過達康泡沫危機，並茁壯成為擁有1.5萬名員工、年營業額80億美元、全球最大的線上電子商務網站，。

　　HP願意找Whitman擔任CEO還有一個最主要的原因是她主導購併的能力，因為體形龐大的HP企需一位能夠在快速變動的時局中，針對公司進行分拆瘦身以及合併創新公司以改善體質的CEO，而Whitman之前在eBay曾經主導過兩件相當知名的購併案：15億美元的PayPal併購以及41億美元的Skype併購，其中購併Paypal被業界視為一個相當成功的案例，它完美的整合了eBay的C2C與B2C服務金流並且成為重要的營收來源，估計2013年PayPal為eBay帶來的營收與eBay本身的拍賣業務相當，可說是相當重要的收入來源（不過eBay已在9/30剛宣佈要將Paypal獨立出來，以因應日變動劇烈的電子商務與支付市場）。

　　而另一個併購SkyPe一案則看不到絲毫的效益，eBay始終未著手將Skype整合於其電子商務服務中，以致於買賣家們無法便利的使用Skype作為雙方通訊的工具，而SkyPe也因被合併而逐漸失去了創新能力，eBay也不清楚要如何來善用Skype來創造利潤，最終，eBay終於在2009年將持續虧損從未產生過利潤的Skype售予Silver Lake所主導的投資集團，最後再輾轉由微軟在2011年收購並合併Skype，只是在這數年之間，手持裝置的流行導致了社群應用APP（如Twitter、Facebook、Plurk等）和通訊軟體（如Whatsapp、Viber、Line等）紛紛興起，整個網路通訊生態環境早已被改寫，數度被變賣動盪不安的Skype未能嗅出此巨變已經喪失了先機。

　　另外值得一提的是，除了eBay的顯赫的經歷，Whitman還有一項令人印象深刻的事蹟：競選加州州長！從2008年卸下執行長職位從eBay退休，一直到2010年臨危受命接下HP執行長一職的這兩年期間，Whitman其實並沒有閒著，她投入了加州州長選舉打算解決阿諾史瓦辛格所留下的爛攤子，剛好她的師姐，更高知名度的前前HP CEO菲奧莉娜也投入加州參議員的選舉，這兩位全球百大企業女執行長一起代表共和黨出馬，也一同創下了多項豪擲千金的記錄，例如Whitman光初選時就砸下了7100萬美元競選，這金額打破加州有史的紀錄，而菲奧莉娜也不落人後，一擲五百萬美元毫無吝色地投入競選；一直到最終選舉結束後，累計Whitman共花費了1.4億美元競選，創下了美國歷史上除總統競選外最高的競選費用紀錄，且大部份還是由她自己掏腰包支付；在競選過程中，雖然Whitman平易近人親切有禮的態度以及IT業的知名度替她加分不少，但是共和黨阿諾所帶來的創痛太深、且鋪天蓋地毫無節制的宣傳廣告也招致選民的反感，最終她和菲奧莉娜還是沒有選上。

Whitman做得如何呢？

　　劉軍在他的「浪潮之巔」一書中曾經提到，HP衰敗的原因之一在於領導人的能力問題，從1999年到2011年的十二年之間，惠普一共換了四任CEO，而且一個比一個任期短（不包括Whitman）：第一任Carly S. Fiorina（卡莉·菲奧莉娜）任期6年，第二任Mark Hurd（馬克·赫德）任期5年，第三任Leo Apotheker（李艾科）任期則不到一年，在這幾任CEO中，除了Hurd的確帶來不小的貢獻之外（他後來因性醜聞案不得已下台），其餘二人帶給HP的都是創傷與痛苦，以後有機會我們再來瞭解，而Whitman呢？她從2010年回到企業界接任HP執行長之後至今，表現雖然不是大好但也沒有大錯，至少讓衰微的HP慢慢站穩了腳跟，股價也不再持續探底，統計Whitman在這四年內她作了幾項的工作：

• 組織重整：合併PC與印表機兩大業務，統稱為PPS
• 大舉裁員：累計超過29,000名員工

除了透過這兩項措施來縮減成本支出改善公司營運狀況之外，Whitman還

• 重整供應鍊：主要是在中國投入更多的資金，供應鏈重整後，減少的成本用在增加研發的長期投資，包括移動設備及雲端運算等。
• 加強本土化：Whitman提到，當初掌管eBay時於中國慘敗，「我學到一課︰這個市場需要長期承諾及耐心，一定要請當地員工，為當地人設計獨有產品。」，故HP在上海投資數百萬美元建研發中心，並針對中國企業及消費者研發本土IT方案。
• 佈局新興市場：主要是針對中國、印度、墨西哥等新興市場
• 擴展IT服務相關業務：用HP集團現有資源及技術優勢，為各行業提供完整IT產品及方案，包括政府、零售市場、金融等。

依據HP最新的財報顯示，2014年第二季的營收呈現三年來首見的正成長，顯示Whitman似乎有能力帶領HP走向復興之路；接下來，在完成了HP的拆分工作之作，Whitman即將展開的應該是合併其它創新企業以改善HP積弱的體質，目前傳聞是將購併儲存業界領先者EMC，看來Whitman還有好幾場硬戰要打，讓我們伺目以待。

HTML5 Canvas繪圖

    Canvas是HTML5的新元素之一，它所提供的API可讓我們動態產生顯示圖形、圖表、影像和動畫等等，以往我們要在網頁上製造出這類的效果，只能依賴Flash或Silverlight的外掛程式，但是自從HTML5出現後，我們就可以直接使用Javascript及標籤語法來繪製圖形或產生動畫效果了。

    HTML5繪製圖形的方式有兩種技術：Canvas與SVG，兩者最大的差異為Canvas是點陣圖而Canvas是向量圖形式。   

	Canvas	SVG
圖形格式	點陣圖	向量圖
放大支援	放大到一定程度後會模糊	無論放大多少倍清晰度不變
處理效能	大型及複雜圖檔會導致處理速度降低及記憶體使用增加	大型及複雜圖檔對於系統效能影響不顯著
精細繪圖	可繪製較精密細緻複雜的圖形	無法針對像素操作，因此無法製作過於複雜精密的圖形
相對的Adobe工具	Illustrator	Photoshop

　　Canvas並不困難，只要有基本的HTML及Javascript概念就可以很快上手，下面我們開始來示範如何使用HTML5 Canvas來進行圖形繪製，如果您有興趣的話，可以在自己的電腦安裝LAMP軟體，並且用文字編輯軟體來編寫範例中的HTML和Javascript碼來試試。

本文介紹的是Canvas基本繪圖及文字顯示，前面所使用的範例來自於http://www.html5canvastutorials.com/，這個網站對於Canvas有非常清楚的用法介紹，另外，最後一個稍複雜的圖形繪製範例則來自於http://www.williammalone.com/articles/html5-canvas-example/，這個範例使用到的技巧都是前方所介紹過的，相當適合作為練習使用；其實Canvas不僅提供繪圖功能，它還能處理影像圖片以及製作動畫，得力於Canvas，讓HTML5能夠開發出各種驚人的動態效果與遊戲，而且支援各類的手持設備，這部份留待以後再來專文介紹。　　

1. Canvas的基本用法

　　要使用Canvas時，我們需先在HTML中宣告一個<canvas>標籤，然後透過Javascript針對此canvas物件進行繪製，其步驟如下：

• 在HTML中宣告一個Canvas物件
• 取得HTML中宣告的Canvas → 我們可以想像為取得一個畫板
• 取得Canvas的Context物件 → 我們可以想像為取得畫筆
• 透過Context物件提供的方法及屬性進行繪圖 → 開始作畫

• 範例：繪製矩形

   我們將繪製如下的兩個矩形

繪製矩形方式：

步驟：1.建立Canvas html 標籤 → 2.使用javascript取得Canvas物件 → 3.使用javascript取得Canvas的2D context物件 → 4.使用fillStyle屬性設定顏色 → 5.使用fillRect指令繪製出矩形

程式碼：(請對照上述1 ~ 5 的步驟)

　

說明：

        在上圖中，我們繪製了一紅一藍兩個矩形，其中藍色的透明度為0.5。

1. var ctx = canvas.getContext("2d");

→ 取得繪製2d圖形的畫筆

2. ctx.fillStyle = "#fa1005";

→ 設定填充的顏色 (亦可使用其它顏色的格式，如rgb(255,0,0)或直接用 red)

3. ctx.fillRect(50,50,200,200);

→ 畫出矩形，對角線為x,y座標軸(50,50)到(200,200)的紅色矩形，請參考下方的示意圖。

4. ctx.fillStyle = "rgba(0,0,255,0.5)";

→ 藍色矩形繪製方式同上，但設定填充的顏色的指令不同 (rgba(0,0,255,0.5)的第四個參數0.5指的是不透明度，1代表完全不透明)

3. 繪製路徑：以三角形為例

所謂的路徑就是通常我們所說的「一筆繪圖」，首尾封閉的一種圖形，在下面的範例中我們以三角形為例，示範如何利用Canvas路徑繪製圖形，其它任何可以一筆畫完的封閉圖形也是如下的作法。

繪製三角形方式：

步驟：1.建立Canvas html 標籤 → 2.使用javascript取得Canvas物件 → 3.使用javascript取得Canvas的2D context物件 → 4.使用strokeStyle設定線條顏色 → 5.使用moveTo()將啟始點移到(x1,y1) → 6.呼叫lineTo ()方法繪製直線到(x2,y2) → 7. 再呼叫lineTo ()方法繪製直線到(x3,y3) →8. 再呼叫lineTo ()方法繪製直線到(x1,y1) → 9. 呼叫stroke()將線條繪出

程式碼：(請對照上述1 ~ 7 的步驟)

執行結果：

繪製說明：

1. 啟始點移到(100,100)

2. 畫線到(300,100)

3. 再畫到(200,200)

4. 再畫到啟始點(100,100)

4. 繪製弧形與圓形

上面介紹了繪製路徑的方法moveTo()與lineTo()，下面我們來看看繪製弧形和圓形的方法arc()，其語法如下：

        context.arc(x ,y ,半徑 ,開始角度 ,結束角度 ,是否逆時針方向)

    弧形和圓形的語法都是使用arc，兩者的差異在在於繪製圓形時只要將開始角度設為0，結束角度設為2л(或360)就可以畫出圓形。

    另外要注意的是，在arc()中的角度指的是「弧度(radian)」而不是「度(degree)」，所以我們在傳入此參數時要先利用這個轉換公式來處理：弧度=角度*Math.PI / 180

畫一個從100度順時針到230度的弧形：

   

    執行結果：

把startAngle和endAngle分別改為0和360，就可以畫出圓形：

5. 繪製拋物線

我們可以利用quadraticCurveTo()繪製二元拋物線，這個方法需要傳入四個參數：

    context.quadraticCurveTo( cpx, coy, x, y)

步驟：1. beginPath()宣佈開始繪製 2. 使用moveTo()移到啟始點 3. 使用quadraticCurveTo()繪製拋物線 3. 可透過lineWidth()及strokeStyle分別定義線寬及顏色 4. 最後使用stroke()將圖形畫出來

那如果我們要畫的是三元拋物線（貝茲曲線）呢，也很簡單，它只比起二元拋物線要多傳入一個控制點：

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

繪製三元拋物線的步驟與二元拋物線相同，僅在於使用的函數及傳入參數有所差異：

步驟：1. beginPath()宣佈開始繪製 2. 使用moveTo()移到啟始點 3. 使用bezierCurveTo ()繪製拋物線 3. 可透過lineWidth()及strokeStyle分別定義線寬及顏色 4. 最後使用stroke()將圖形畫出來

6. 繪製文字

Canvas除了可以繪製圖形外，亦可以繪製文字，它提供了兩種繪製文字的方式：實心及空心文字

實心文字：context.fillText( text ,x ,y ,maxWidth )

    空心文字：context.strokeText( text ,x ,y ,)

    text → 要顯示的文字

    x, y → 顯示的座標位置

    maxWidth → 此值為可選擇性輸入，若有輸入此值則文字寬度將會限制在指定的數值之內

基本上，我們只要使用上述的fillText()或strokeText()便可以將文字顯示在Canvas上了，但通常會再搭配下列常用的參數指令：

    設定字形 → context.font = 'italic 40pt Calibri';

        設定顏色 → context.fillStyle = 'blue';

        水平對齊方式 → context.textAlign = 'center';

        垂直對齊方式 → context.textBaseline = 'middle';

        使用strokeText()來顯示空心字時：

設定線條寬度：context.lineWidth = 3;

設定線條顏色：context.strokeStyle = 'blue';

步驟：1. 設定相關字形參數 2. 使用fillText()或strokeText()繪出字串

7. 綜合練習

接下來，我們用Canvas來繪出下面這個圖形作為本單元的結束。

Ａ）先產生一張165x145大小的畫布：

        <canvas id="canvasId" width="165" height="145"></canvas>

Ｂ）取得Canvas 2D的context（可看成畫筆）

        var context = document.getElementById("canvasId").getContext("2d");

    Ｃ）產生一個三角形並著色

var width = 125;  //三角形的寬度

var height = 105; //三角形的高度

var padding = 20;　 //三角形周圍的空白間隔

// 開始畫路徑

context.beginPath();

context.moveTo(padding + width/2, padding);        // 三角形中間的點

context.lineTo(padding + width, height + padding); // Bottom Right

context.lineTo(padding, height + padding);         // Bottom Left

context.closePath();

// 塗上顏色

context.fillStyle = "#ffc821";

context.fill();

   

        此時我們會得到如下的圖形：

您可以看看下方的座標說明會更清楚：

    Ｄ）加上漸層效果

        我們將左側的程式碼更改為右側的內容；設定線性漸層的指令為：

createLinearGradient(x1,x1,y2,y2) → 這四個參數表示我們要由(x1,y1)至(x2,y2)產生漸層效果。

addColorStop(n,Color) → 指定在比例為n的位置顯示顏色為Color的漸層，其中n為介於0~1的數值。

    此時顯示的效果如下：

           

               

        Ｅ）加入陰影效果

我們要替此三角形加上陰影效果，讓它變得更立體，請加入下方的程式碼在塗上顏色程式碼區段之前

// 加入陰影效果

context.shadowBlur = 10;  // 模糊程度，此數值愈大愈模糊

context.shadowColor = "black"; // 陰影顏色

   

// 塗上顏色

            此時顯示的效果如下：

   

        Ｅ）加入第二個漸層效果

我們在原先的漸層上再加入一個漸層色可讓圖形顯得比較生動不至於太呆板；一樣也是加在塗上顏色程式碼區段之前：

// 水平的漸層，但塗色位置與原先的不同

gradient = context.createLinearGradient(0,padding,0,padding+height);

gradient.addColorStop(0.5, "transparent");

gradient.addColorStop(0.5, "#dcaa09");

gradient.addColorStop(1, "#faf100");

// 塗上顏色

            此時顯示的效果如下：

        Ｆ）替三角形加上黑框

在下方的程式碼中，我們比較陌生的是lineJoin,這個屬性可以設定兩條線接點的形式,在此我們設定為圓邊。

// 加上黑框

context.lineWidth = 5;

context.lineJoin = "round";   

context.strokeStyle = "#333";

context.stroke();

   

        此時圖片會顯示如下：

                   

        Ｇ）替黑框再加上黃色外框

　　我們接下來將黃色外框加在黑框外，會感覺黑框好像是畫在板子裏，會更有擬真的效果；其作法與黑框完全相同。

context.lineWidth = 20;

context.lineJoin = "round";   

context.strokeStyle = gradient;

context.stroke();

        此時圖片會顯示如下：

         Ｈ）加入文字：驚嘆號

最後，我們在中間區域用fillText指令來加上驚嘆號就完成了。

context.textAlign = "center";

context.textBaseline = "middle";

context.font = "bold 60px 'Times New Roman', Times, serif";

context.fillStyle = gradient;

try{

   context.fillText("!", canvasWidth/2, padding + height/1.5);

}catch(ex){}

         Ｉ）成果