egroupmandy 學習筆記

2014年4月7日星期一

練習自適應nav

練習自適應nav

來研究一下這個
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

是來自這篇
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

2014年4月3日星期四

emmet超好用實例

emmet超好用實例!!!

#page>div.logo+ul#navigation>li*5>a{Item $}
按下tab會產出
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>

以下是你必須知道的!!

" > " 下去一層

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

" + " 在同一層

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

" ^ " 上去一層

div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^^bq

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

"*"填入想要的次數，會重複出現多個

ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

"()"刮起來，後面的

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

"ID"&"CLASS"

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

"[attr]"可以客製裡面的訊息

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

"$"可以將重複的加上數字

ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

ul>li.item$$$*5

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

"@"可以改變數字出現的運算方式

ul>li.item$@-*5

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

"{}"可以將字呈現為文字而非程式碼

a{Click me}

<a href="">Click me</a>

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

p{Click }+a{here}+{ to continue}

<p>Click </p>
<a href="">here</a> to continue

2014年4月2日星期三

jquery 學習資源

30天學會jquery 影片
https://tutsplus.com/course/30-days-to-learn-jquery/

30天學會jquery 登入後可免費學習，每天會收到email撥出時間學習短片
https://courses.tutsplus.com/courses/30-days-to-learn-jquery

學習jquery資源網站
http://jqfundamentals.com/

這個投影片說完了jquery!
http://marcgrabanski.com/jquery-essentials-slideshow/

sublime2 好用的前端編輯器

Emmet 安裝
我使用手動安裝方法 :

先安裝 PyV8 ，到此連結選擇你的操作系統版本下載
開啟packages，點選功能選單「Preferences > Browers Packages」會打開文件夾，並新增PyV8資料夾，將剛下載的zip檔解壓縮放到PyV8資料夾中
下載emment，點此連結下載，解壓縮到packages資料夾
重啟sublime即可

參考

emmet documentation http://docs.emmet.io/abbreviations/
好用工具Emmet安裝方法 http://www.blogjava.net/Hafeyang/archive/2013/01/19/394449.html

前端开发神器 Emmet html、css寫法 http://blog.wpjam.com/m/emmet/

-----

如果不用手動安裝，就要使用package control組件安裝

安裝package control組件:

點選功能選單「View > Show Console」調出 console
如果你是sublime2及複製下段程式碼貼上，按enter即可

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

點選功能選單「Preferences > Browers Packages」開啟packages資料夾
下載 Package Control.sublime-package並直接放在packages資料夾
重啟sublime即可

-----
安裝好package control就可以來試試用它安裝套件!
先來安裝alignment 實用的對齊套件
alignment 安裝:

按下ctrl + shift + p 叫出 command palette
輸入「 install Packages」按下enter
再輸入「 alignment」，選擇「 Alignment」後按enter就可以安裝
重啟sublime即可

alignment使用:

選取一行後按「 Ctrl +L」會把下一行也一起選取~可以多按幾遍把下面幾行都一起選取

按下「 Ctrl +Alt+a」會對齊

-----

還有一個必安裝的就是 IMESupport
他支援中文輸入時不會先與畫面分離等輸入完按enter才跑到程式碼中
而使可以輸入時就在程式碼裡面

IMESupport安裝:

按下ctrl + shift + p 叫出 command palette
輸入「 install Packages」按下enter
再輸入「 IMESupport」，選擇「 IMESupport」後按enter就可以安裝
不用重啟sublime即可試打看看吧

-----

35堂課讓你熟悉sublime!! 影片教學
http://code.tutsplus.com/articles/perfect-workflow-in-sublime-text-free-course--net-27293

mrkt的網誌sublime2各式教學
http://kevintsengtw.blogspot.tw/2012/02/sublime-text-2-part2.html#.UzzH0_mSySo

css註解:

輸入divider按tab即可產生下面註解，節省時間
/************
* =
*************/
安裝:點 tools > new snippet貼上下面網址的碼
https://github.com/princemaple/ST2-User/blob/master/general/divider.sublime-snippet

2014年4月1日星期二

卡片

卡片
http://www.openfoundry.org/tw/tech-column/9154--phonegaphtml5-card-

2014年3月31日星期一

Loyalty Program 忠誠活動

出自 http://emf.migocorp.com/case/case93.html

我們常聽到一句話「爭取一個新顧客的成本是留住一個老顧客的6倍」，顯示維繫顧客忠誠度並减少顧客流失，對企業是至關重要的。美國資深行銷專家Jill Griffin認為，顧客忠誠度是指顧客出於對企業或品牌的偏好而經常性重複購買的程度，提高顧客忠誠度不但可以節省行銷成本，更可以提高企業的利潤率。根據統計，挽留顧客的比率增加5％時，利潤率便可提升25％到100％。

企業經常透過忠誠度計劃（Loyalty Program）的方式維持顧客的忠誠度，忠誠度計劃在日常生活中比比皆是。比如航空公司的飛行里程計劃：參與計劃的會員可以累積里程數獲得獎勵，或是有優先登機、較寬裕的行李托運額度等諸多好處。再比如銀行業的信用卡積點制度：信用卡顧客不但可以在每次刷卡購物當中得到返點回饋，還可以在指定商場享受折上折的優惠。忠誠度計劃已經成為維繫客戶關係的最重要手段之一，而我們要如何掌握會員的忠誠度, 並且衡量忠誠度計劃所帶來的效益呢？現在就讓我們以愛普生中國的優墨積分會員俱樂部成功案例為讀者們介紹如何成功經營Loyalty Program。

愛普生除了影像產品的銷售，同時也希望顧客能持續購買產品耗材，以延續顧客的長期價值。優墨積分會員俱樂部就是專為愛普生正品耗材的用戶所建立的會員俱樂部，顧客在購買愛普生正品耗材後可以刮開外包裝上的防偽條碼，然後登錄網站輸入條碼兌換積分。會員在累積足夠積分後便可以根據個人喜好兌換禮品。

圖表1愛普生優墨積分會員俱樂部

精準區分會員忠誠層級，進行針對性溝通宣傳

根據業界經驗，在所有參與Loyalty Program的會員中前1%的人能得到最高程度的獎勵，但是會員忠誠度的提升不能期望一蹴而就，需要循序漸進。為了讓整體會員的忠誠度透過Loyalty Program逐漸提升，我們可依據會員購買行為將會員劃分為不同忠誠度層級，設計具有針對性並且適合的激勵機制並進行溝通，在類似一個金字塔型的會員分布中，讓會員能逐步提升忠誠度(如圖表2所示) 。

圖表2 不同層級的會員成金字塔型分布

在愛普生優墨積分會員的價值分析中，我們利用2007年的會員積分提交記錄，透過RFM模型進行會員忠誠度的評估。
-R代表最後一次輸入積分距離時間
-F代表會員輸入積分的頻率
-M代表會員贏得積分的數值

將愛普生優墨積分俱樂部的會員進行層級劃分後，可以得到圖表3的會員行為特性。我們可以發現不同層級的會員購買耗材的行為存在顯著差異。比如高忠誠會員每年的購買金額和購買頻率都幾乎為一般會員的100倍。同時高忠誠會員最後一次購買間隔時間不超過20天，而一般會員最後一次購買行為則將近半年以前。

在整個資料庫中經過細分之後，我們可以對一般會員進行密集溝通，透過每周發送E-mail的型式宣傳Loyalty Program的獎勵和利益等，將會員對耗材產品的關注重新拉回到愛普生品牌上。而對於忠誠度較高的會員則可以定期透過各種管道與顧客進行對話，瞭解核心客戶的進一步需求，維繫良好的客戶關係，防止忠誠客戶的流失。

忠誠度	07年最後一次輸入積分的間距（天)	07年輸入積分的平均頻率
High Loyal	19	315
Very Loyal	33	84
Loyal	61	24
Regular	145	3

圖表3 不同層級的會員RFM的均值分布

設計適當獎勵政策，逐步推動顧客提升貢獻度

Loyalty Program之所以能夠刺激會員購買，回饋給會員的激勵是否具有足夠吸引力，是至關重要的一環。在設計會員的激勵機制時，應該注意以下幾點：
- 由會員貢獻的利潤中，提取適當比例做為獎勵預算
- 對於高利潤率/高貢獻的會員，應該給與更高的回報率
- 也應獎勵積極參與行為，比如推薦好友、定時回訪、意見回饋等

在優墨積分俱樂部中，會員如果連續6個月內，新增耗材註冊積分大於5000分，就可以贏得VIP銀卡會員的禮遇，連續6個月內新增耗材註冊積分大於20000分就可以成為VIP金卡會員。由於為VIP會員提供的獎品更具有吸引力，所以能激勵會員持續購買愛普生正品耗材來積攢積分，VIP的會員還享有諸多額外福利，比如不需花費積分就可以享受免費上門維修服務。

從下面優墨積分的會員兌換記錄分析裏面，我們就可以看到忠誠度越高的會員群體，參與獎勵兌換的比例也越高，說明了獎勵在Loyalty Program當中是提升忠誠度的重大推力。

圖表4 不同層級的會員兌換禮品的比率

由會員活躍度和購買貢獻度的提升衡量活動成效

Loyalty Program的成效必須要能反映在品牌經營以及最終產品銷售的貢獻上面。不過我們在衡量Loyalty Program的成效時，不能過於心急，Loyalty Program必須是至少三年以上的長期計劃，所帶來的變化也可能需要在實施幾個月之後才能看到。

在我們前面分析過優墨積分會員07年的耗材積分累積以及獎勵兌換記錄後，我們再來看看這個Loyalty Program對於會員後續的行為影響。我們從優墨積分俱樂部會員在08年對耗材以外產品的購買情況以及email溝通的回應率分析來觀察，在金字塔頂端的高忠誠會員在未來一年的銷售轉化率是一般會員的26倍，另外從email溝通的回應率分布也不難看出忠誠度越高的會員也越活躍，足以說明愛普生優墨積分俱樂部無論對於產品銷售或是顧客與品牌之間的關係維繫，都具有強有力的推動作用。