2011年11月1日

CUFON 讓Web Design時能使用更多美麗的字型

CUFON是解決網頁設計時受限於字型的限制。他的原理是將字形檔轉換成圖片,然後使用Javascript技術呈現。

使用步驟很簡單
  1. 下載你想要的字型(當然是挑美的下載),最下方有字型網站的連結。需要注意的是版權的問題,使用者得自行負責版權的責任。
  2. 到CUFON網站下載所需要的Javascript檔案
  3. 將下載好的字形檔使用CUFON網站的線上轉檔程式轉成Javascript
  4. 編輯HTML將JS檔Include進去
  5. 然後就搞定了,就是這樣簡單

相關聯結



2011年10月31日

[轉+記] Idea Scout 與 Idea Connector – 開放式創新的關鍵角色



(Google 的 Vice President Marissa Mayer)
在 2011年秋季號的「Sloan Management Review」裡一篇標題為 「Creating Employee Networks That Deliver Open Innovation」的文章當中,提到兩種員工在的開放式創新裡扮演相當重要的角色,並分別為這兩種角色命名為「idea scout」及「idea connector」。這些為數稀少的員工對企業所產生的影響力相當重大,是目前頂尖企業關注的新類型人才,有的公司已經把這類型的工作從「兼任」或「員工個人興趣」抽離獨立成職位。
這裡提出,企業要有三種利用外部知識的能力:
一、爬梳企業外部的可行創意的能力絕對必要,但是光有這個還不足夠。
二、管理階層必須確保這些嶄新的創意得以到達有能力善用的人身上。
三、有「創意偵察人」( idea scouts) 以及「創意連結者」(idea connectors)的技巧就更為完善。
一樣是大企業,為何像是 Procter & Gamble 、Intel 以及 Cisco 等公司能夠藉由「開放式創新」的方式在同業間保持領先地位,而其他仿效該創新模式的企業卻無法達到相同效果?原因在於:這些公司無能確保這些來自外部的意見得以傳達到有能力運用這些意見的人身上。
改變這種狀況,必須要仰賴兩種所謂的「創新經理人」(Innovation Broker),也就是「idea scouts」以及「idea connectors」。
一個實際案例:A 軟體公司輸掉了一紙大合約,只因對手多了一項「更先進的語音辨識功能」。事實上,A 公司早在一年前就有公司員工發現同一項技術,並立即通報給該公司的技術主管知道。後來因為該技術主管在人際網絡裡找不到信得過的專業人士來諮商,所以遲遲沒有相關動作,直到錯失良機。
在這個案例中,我們看到了 idea scout 的角色的重要性,也發現缺乏 idea connector 的結果就是讓偵察到的創意無從擴散到適合的人身上、也沒有機會被消化應用。
下圖說明 Idea Scout 以及 Idea Connector的角色運作:

[參考資料來源 MIT Sloan Management Review 所繪製]
從上圖,我們看到 C 先生雖然時常進行創意偵察的動作,也努力將可行的創意傳遞給認識的研發部門。礙於 C 先生與公司內部研發部門的連結有限,創意始終沒有到達對的人身上,也沒有擴散到足以產生影響的規模,因為「信箱超載」的現象讓人習慣將與自己現有工作「不直接相關」的信息刪除。 C 先生的能力雖然重要,卻被浪費了。
A 先生就幸運的多,他擁有大量的外部連結、大量的創意,更重要的是他與 B 小姐 – 一位能連結到內部研發部門每個人的 idea connector – 有扎實的連結,所以他偵察到的創意得以透過 B 小姐進行擴散,到達有能力近一步分析、應用的研發人員身上。
文中所舉的 idea connector 在真實世界裡的化身,就是 Google 的 Vice President Marissa Mayer。她採用的方法之一就是舉行為期三週的面談,跟想提出新點子的人一起發想、並壓榨出更多關於這些創意的功能細節,然後再來決定要不要往上提給 Larry Page 以及 Sergey Brin.
在開放式創新(Open Innovation)的過程中,Idea scouts 以及 idea connectors 最能發揮貢獻的三個階段:成形(Ideation)、篩選(Selection)、擴散(Diffusion)
如下圖所示:

[參考資料來源 MIT Sloan Management Review 所繪製]
成形(Ideation)
雖然所有員工都有取得公司外部創意的能力,僅少數人有技術專長與個人興趣來定期地、有效的進行此任務。管理者只要提供足夠的資助讓這些人進行創意的搜尋,但是這些人最需要的是「時間」。文中的案例是一家藥廠,已經指派其 idea scout 的擔任者投入全部時間進行創意偵查。
除了資源與電腦連線外,參加如會議、商展等等公司外部的聚會或活動,也很重要。除了可以多幾條創意的渠道,也同時向外宣示公司對創新的支持與參與。
篩選(Selection)
只要有鍵盤、滑鼠、跟網路連線,任何人都能把創意跟想法發佈道網路上,如何從爆量的訊息中分離出有用的資訊才是最難的步驟。所以 idea scout 跟 idea connector 這兩者的互動之所以重要,不僅僅因為這樣才能挑出有展望、又合適該企業的創意,更重要的是能辨別爬梳回來的創意是否真實可靠、而非誇大的行銷說詞。
擴散(Diffusion)
一旦確認新概念有潛力,就必須擴散到知道如何應用的人身上。像 Marissa Mayer 這樣的 idea connectors 雖然因其專業能力受僱,卻同時具備社交天賦。日積月累,這些人進化成具備跨領域知識與廣泛興趣的通才。善用 idea connectors 的方式就是讓他們多參與不同專案或是工作調動,藉以發揮其影響力。
投資「創新經理人」
企業領導人必須認清,光把新點子和技術引進組織裡並無法達成「開放式創新」。點子不會自己長大成創新的成果,除非這些創意能到達有能力與影響力的員工們身上。不管網路如何改變知識與創意的發佈與流動,innovation broker 的角色依然吃重。管理者能夠投資 idea scouts 與 idea connectors 並確保這兩者有確實連結,開放式創新就在不遠處了。
(本文資料摘譯自 MIT SloanN Management Review)

2011年9月22日

人才招募:SEO 面試考題

1. 你認為甚麼是SEO?

2. SEO有哪些衡量指標?

3. Google, Yahoo, 百度在SEO上差異是甚麼?
4. 你使用過那些SEO工具
5. 為甚麼要作流量分析?有哪些流量分析軟體並描述一下。
6. 流量分析有哪些你認為重要的衡量指標?並描述一下你的看法

關鍵字密度是什麼?關鍵字密度是不是越高越好?

什麼是關鍵字密度?SEO關鍵字密度就是一個關鍵字或一個關鍵字行銷在網頁上出現的總次數與其他文字的比例。相對於頁面總字數而言,SEO行銷關鍵字出現的次數越多,那麼總的關鍵字密度也就越大。其他文字出現的次數越多,關鍵字的比例就越低,則關鍵字密度越小。為自然提高在搜索引擎中的排名位置,您網站中網頁設計頁 面的關鍵字密度不能過高,也不要過低,一般在1%到7%較為合適。如果要達到1%的比例,那麼您在平均100 個文字中出現1個關鍵字或是關鍵字組,如果 在 1000 個文字中僅僅只包含1個關鍵字或關鍵字組,那麼關鍵字密度就顯得過於稀少囉。記住,您千萬別把所有的關鍵字或關鍵字組堆積在一起,要不網路行銷搜索引擎將視為一種惡意行為(Spam),那是會直接降低您網站的排名,其實對關鍵字密度也不要過分約束與要求的。
1、SEO關鍵字先利用雅虎關鍵字工具或google工具查詢。
2、先構思該網站或網頁設計中的主要關鍵字與延伸關鍵字後,自己參考與搜尋後,創造一篇相關性文章。
3、網路搜尋主要關鍵字與延伸關鍵字的關係與搜尋量,主要關鍵字如果排名提升時,相對地延伸關鍵字也會明顯提升。首頁一個頁面使用一個主要關鍵字,兩三個延伸關鍵字。
針對關鍵字SEO行銷優化的網站觀察後建議:關鍵字的密度要在3%~7%左右是最佳狀態,再視排名狀況去做調整與增加文章,不要太高,也不要太低。

2011年9月2日

人才招募:SEO Engineer


Responsibilities
1. 製定SEO計劃並執行,包括制定關鍵指標與測量優化的方式。
2. 執行內部網站的追蹤/報告規劃
3. 提供對網頁搜索引擎優化的建議與相關技術規劃與設計(例如:標題,URL結構,內部鏈接,內容..等等)。
4. 定期提供SEO的報告與測試結果
5. 持續的研究SEO與流量分析的知識與技術

Requirements:
1. 熟悉SEO 技術,並有一年以上相關經驗   
2. 熟悉網頁技術開發 CSS, HTML, Javascript
3. 有使用分析工具經驗,如:Omniture, Google Analytics, Webtrends, Hitwise, ComScore
4. 擁有優化國際搜尋引擎與本地化搜尋引擎經驗,例如: Google, Yahoo, Yahoo Kimo, 百度
5. 了解搜尋排名的因素 : site maps, robots files, URL structures, crawler issues, indexing problems, algorithm changes, metadata use, SEO copywriting, link research, link building, back-link analysis, anchor link analysis, broken links, cross linking, 301 redirects, etc.
6. 良好的溝通技巧
7. 良好的資料分析能力,能分析並提出改善建議
8. 熟悉Microsoft Office

2011年8月17日

記錄文章:一次向svn中增加所有新增文件 svn add all new files

以下摘自:《卓有成效的程序員》之自動化

        我經常會一次往Subversion裡添加一批文件。在使用命令行做這件事時,你必須指定所有想要添加的文件名。如果文件不多的話這還不算太糟糕,但如果 你要添加20個文件,那就費事了。當然你也可以用通配符,但這樣一來就可能匹配到已經在版本控制之下的文件(這不會有什麼損害,只不過會輸出一堆錯誤信 息,可能會跟別的錯誤信息混淆)。為瞭解決這個問題,我寫了一行簡單的bash命令:
  svn st | grep '^\?' | tr '^\?' ' ' | sed 's/[ ]*//' | sed 's/[ ]/\\ /g' | xargs svn add
  表4.3詳細解釋了這一行命令。
 
  我大概花了15分鐘寫出這條命令,然後用了它成百上千次。
      ****************************************************
      這個自動化過程已經很完美了,一個「簡單」的shell腳本,這是一個權威編寫並使用了百上千次的腳本。
然後我在一個博客中看到這樣一個腳本:
svn st|awk '{print $2}'|xargs svn add。
乍看之下覺得更加精煉,仔細看下就會發現這個腳本沒有區分文件狀態。所以完善了以下這個腳本:

  1. svn st | awk '{if ( $1 == "?") { print $2}}' | xargs svn add  

這樣,以後我可能使用這個腳本成百上千次。(當然這個腳本也沒有考慮過濾掉不要添加的文件)

當你第三次做一件事情的時候,就應該考慮將其工具化,自動化!

2011年5月3日

(轉載紀錄)让 iPhone App 以 https 方式连接网络


http://www.cocoachina.com/iphonedev/sdk/2010/1112/2339.html

让 iPhone App 以 https 方式连接网络

时间: 2010-11-12 17:20
问题 你是否也想让自己的 iPhone 应用程序连接 https 服务器呢?下面我就介绍一下其使用方法。 通常使用 Objective-C 的 NSURLConnection 连接有证明书的 https 服务器时会出现验证错误,我们可
问题
    你是否也想让自己的 iPhone 应用程序连接 https 服务器呢?下面我就介绍一下其使用方法。
    通常使用 Objective-C 的 NSURLConnection 连接有证明书的 https 服务器时会出现验证错误,我们可以使用私有API — setAllowsAnyHTTPSCertificate:forHost 来解决这个问题。如果是 Cocoa 的应用程序应该是没有什么问题,但是用在 iPhone 上,很可能过不了 App Store 的审查。
    所以这里我们使用 libcurl 来完成在 iphone 上连接 https 服务器。
准备
编译 openssl
    连接 https 的前提是要有 OpenSSL。你可以参考 这里 来为 iPhone 编译 OpenSSL 静态库。最终得到下面两个静态库文件。
libcrypto.a
libssl.a
编译 libcurl
    接下来我们下载/编译 libcurl。下载展开后,按照下面配置(根据实际情况更改你的SDK目录,版本)。
./configure --prefix=$HOME/tmp/iphonelib/curl \
    --host=arm-apple-darwin --disable-shared --with-random=/dev/urandom \
    CC=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/gcc \
    CFLAGS="-arch armv6 -isysroot /Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS3.0.sdk -I$HOME/tmp/iphonelib/openssl/include -L$HOME/tmp/iphonelib/openssl/lib" \
    CPP=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/cpp \
    AR=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/ar
    如果最后输出下面的内容,说明可以编译支持 https 的 libcurl 了。
SSL support:     enabled (OpenSSL)
    接下来
make
make install
    编译结果输出到 ~/tmp/iphonelib/curl/lib 下的 libcurl.a。
使用
添加到工程中
    如下图所示,将编译好的静态库拖到你的工程中:
    另外,由于 openssl 中使用了 zlib,所以还需要在工程中加入链接开关。(该库被包含在iPhone中,不需要重新编译)
    如下图所示,在连接中追加 -lz。
    最后,如下图添加编译所需的头文件路径。
    比如,编译 libcurl 时的头文件的路径 ~/tmp/iphonelib/curl/include 。
代码例子
    下来,让我们看看在程序中使用 libcurl 的例子。下面的例子在 AppDelegate.m 中实现。
#import "AppDelegate.h"
#include

@implementation AppDelegate

-(void)applicationDidFinishLaunching:(UIApplication *)application {
    window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    // Override point for customization after application launch
    [window makeKeyAndVisible];

    CURL *curl;
    CURLcode res;

    curl = curl_easy_init();
    if (curl) {
        curl_easy_setopt(curl, CURLOPT_URL, "https://twitter.com/");
        curl_easy_setopt(curl, CURLOPT_SSL_VERIFYPEER, 0L);

        res = curl_easy_perform(curl);
        if (0 != res) {
            fprintf(stderr, "curl error: %d\n", res);
        }

        curl_easy_cleanup(curl);
    }
}

-(void)dealloc {
    [window release];
    [super dealloc];
}

@end
    编译运行,可以用调试工具得到取得的html,如下图。
在模拟器中使用 libcurl
    上面介绍的都是在设备上运行的例子,如果要在模拟器上使用,由于处理器结构不一样,需要重新编译 openssl 和 curl 静态库。编译的时候,只要将 SDK 的路径由 iPhoneOS.platform ⇒ iPhoneSimulator.platform,编译开关 -arch armv6 ⇒ -arch i386 就可以了。只是编译的文件名最好和iphone上用的区别开来,如下所示:
libcrypto_simulator.a
libssl_simulator.a
libcurl_simulator.a
    又或者不改变库的名称,而是增加新的编译目标。

2011年3月30日

UML 基本图示[轉貼]

UML 基本图示
2009-07-11 17:58
UML 基本图速查---类图. 对象图. 用例图 .参与者. 依赖关系. 泛化/继承关系. 关联.....
UML 类图. 对象图. 接口图. 用例图 .包,参与者. 依赖关系. 泛化/继承关系. 关联关系 .聚合/聚集关系. 实现关系 组合关系。

结构元素

结构元素包括,类,对象,接口,用例,参与者。
类图

类图图示
     类图是UML中最基本的元素了吧?根据OO的思想“天下一切皆对象”,而类是对象的抽象。 
     左侧图示为一个类图。顶端“ClassName”表示类名 
     中间部分为该类的属性,其中分别表示为可访问性,属性名,以及属性的数据类型。 
     第三部分为该类的方法,包括方法的可访问性,方法名,方法的参数以及方法的返回值。 
     需要说明的是:
             “#”表示protected 
             “+”表示Public
             “-”表示private
                                         “i”表示internal

对象图图示
对象图
右侧图示为一对象图,该对象为类className类的一个实例对象
该图第一部分说明了该对象为className的一个实例,第二部分指定了该实例的属性值。该图指定的是一个特殊的实例的对象,如果要代表className的所有的对象可省略掉对象名,即为“:ClassName”。
接口

类图图示
左图为一个比较简单的接口事例图示。与类图差不多,该图示分为三部分,第一部分为接口名,为了更明确的标明其“接口”的身份通常以“I”开头。第二部分为属性,第三部分为方法。
用例与参与者
下图为一简单的用例视图。小人表示参与者,而椭圆表示的是用例。

用例与参与者图示

包图图示
右侧图示为一包图,该图示为一名称为Utility的工具包。
包用来组织类,被包含在包里的类一般通过如Utility::StrUtility的形式来反应该类的路径。

关系

     关系元素包括了聚集,组成,实现,继承,依赖,关联等。
关联

关联图示
     关联是类之间的联系,如篮球队员与球队之间的关联(下图所示)。其中,关联两边的"employee"和“employer”标示了两者之间的关系,而数字表示两者的关系的限制,是关联两者之间的多重性。通常有“*”(表示所有,不限),“1”(表示有且仅有一个),“0...”(表示0个或者多个),“0,1”(表示0个或者一个),“n...m”(表示n到m个都可以),“m...*”(表示至少m个)。
     在关联中有一种叫“限定关联”,还有一种谓之自身关联。另外,对象之间的关联就没那么复杂,只是将类的关联实例化而已。
依赖

依赖图示
依赖是表示一个类中使用了另外一个类,最常用的依赖是在类A的方法中使用了类B,那么A依赖B。如上图所示。
继承

继承图示
这里的继承是指子类对父类的关系。理解面向对象的各位对继承应该不陌生。啥也不说,看看图好了。
继承使用空心箭头表示继承的方向,用实线连接。
实现

实现图示
实现指的是类对接口的实现。接口实现的表示与继承的表示差不多,只是将实线变为了虚线。
聚集

聚集图示
一个类可能有几个部分类聚集在一起而成。如:电脑主机由CPU,主板,光驱....等组成。类与类之间是“整体-部分”的关系。
组合

组成图示
组成是强类型的聚集,每个部分体只能属于一个整体。如桌子由桌腿和桌面组成。
----------------------------------------------------------------------------------------------------------------------------------
以上为UML的基本元素的一些表示法,主要目的是供查阅。

2011年3月23日

HTC 手機重設方式(Reset)

在手機關機的情況下,按住調低音量鍵,然後快速按下電源鍵。
等待畫面上出現 3 個 Android 影像,然後放開調低音量鍵。
按下調低音量鍵,選取清理磁碟空間,然後按下電源鍵。
按下調低音量鍵,開始執行出廠重設。

2011年3月22日

UIActivityIndicatorView : WaitView implementation

Header file --------------------------------------------------

//
//  WaitView.h
//  UIActivityIndicatorView
//
//  Created by Lin, Justin on 2011/3/22.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import


@interface WaitView : NSObject {

UIActivityIndicatorView *activityIndicator;
}

-(void) endWait;

- (void) beginWait;

@end

Source file --------------------------------------------------
//
//  WaitView.m
//  UIActivityIndicatorView
//
//  Created by Lin, Justin on 2011/3/22.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import "WaitView.h"

@interface WaitView(PrivateMethods)

- (UIView *) mainWindow;
- (void) startWaitAnimation;
- (void) stopWaitAnimation;

@end

@implementation WaitView

- (UIView *) mainWindow {

return [[[UIApplication sharedApplication] windows] objectAtIndex:0];
}

- (void) startWaitAnimation {
if (activityIndicator != nil) {
return;
}
activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
[activityIndicator setFrame:CGRectMake(135, 125, 24, 24)];
[activityIndicator setHidesWhenStopped:YES];
[[self mainWindow] addSubview:activityIndicator];
[activityIndicator startAnimating];
}

- (void) stopWaitAnimation {
if (activityIndicator == nil) {
return;
}
[activityIndicator stopAnimating];
[activityIndicator removeFromSuperview];
activityIndicator = nil;
}

-(void) endWait {
// stop thread
    [NSThread detachNewThreadSelector: @selector(stopWaitAnimation) toTarget:self withObject:nil];
}

- (void) beginWait {
// start thread
    [NSThread detachNewThreadSelector: @selector(startWaitAnimation) toTarget:self withObject:nil];
}

@end

2011年3月21日

[轉貼] JavaScript Touch and Gesture Events iPhone and Android

JavaScript Touch and Gesture Events iPhone and Android

There are quite a few sites that describe the touch and gesture events that can be used in the mobile version of WebKit running on iPhone and iPod Touch. There is, however, not so much info with regards to Android. I've placed a few links at the bottom of this article that contain information used to compile this brief explanation.
Touch events are a bit like mouse events, but there are some very important differences when it comes to touch vs. mouse:
  • A touch is very hard to keep steady whilst a mouse can stay at a fixed position - this means that we go from a touchStart event directly to a touchMove event. Unlike a mouse where a mouseDown event is likely to fire without being followed up by a mouseMove event.
  • There is no mouseOver equivalent since a touch can be discontinuous, i.e., we can get from point A to point B without the need of drawing a continuous line between these points.
  • A touch is an averaged point taken from the surface area in contact with the pointing device (your finger) translated to pixel coordinates - like finding the centre of a circle. A mouse is very precise and there is no averaging that needs to be done. What I'm trying to say is that a touch is not as accurate as a mouse.

Android and iPhone touch events

Android and iPhone versions of WebKit have some touch events in common:
  • touchstart - triggered when a touch is initiated. Mouse equivalent - mouseDown
  • touchmove - triggered when a touch moves. Mouse equivalent - mouseMove
  • touchend - triggered when a touch ends. Mouse equivalent - mouseUp. This one is a bit special on the iPhone - see below
  • touchcancel - bit of a mystery
Example:
document.addEventListener('touchstart', function(event) {
    alert(event.touches.length);
}, false);

The Event object

As you may have noticed above, the event object contains an array called touches (in Androids case, the event object also containes a touch object - at this stage, touches has always a length of 1 in Android so event.touches[0] === event.touch). The touches array is Apples way of handling multi-touch events - but more on that later.
A touch object contains pretty much the same data as a mouse event such as pageX, pageY etc...

Example:
document.addEventListener('touchmove', function(event) {
    event.preventDefault();
    var touch = event.touches[0];
    console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);
}, false);

What about a click?

mouseClick events are triggered after a touchStart, touchEnd event sequence. A reason for mouseClick events not triggering can be that the event propagates further and a touchMove being initiated - this will cancel the mouseClick event sequence.

iPhone Touch and Gesture Events


Apples WebKit implementation has a few things that are different from the Android implementation. The touchEnd event removes the current touch from the event.touches array. Instead, we have to look inside the event.changedTouches array.

Apples event object for touch events

The event object contains the following arrays:
  • touches - contains touch information upon touchStart and touchMove not touchEnd events
  • targetTouches - contains information for touches originating from the same target element
  • changedTouches - contains touch information upon all touch events

Gesture events

Apple supports gestures which are mult-touch events such as "pinching" and "rotating":
  • gesturestart - triggered when initiating a multi-touch event
  • gesturechange - triggered when multiple touches move
  • gestureend - triggered when a multi-touch event ends
The event object for gesture events looks very different. It contains scale and rotation values and no touch objects.

Example:
document.addEventListener('gesturechange', function(event) {
    event.preventDefault();
    console.log("Scale: " + event.scale + ", Rotation: " + event.rotation);
}, false);

Event table

touchstarttouchmovetouchendgesturestartgesturemovegestureend
Androidyyynnn
iPhoneyyyyyy
has event.touchesyyynnn
(iPhone) has event.scale and event.rotationnnnyyy
(iPhone) touch in event.touchesyyn---
(iPhone) touch in event.changedTouchesyyy---

Links