egroupmandy 學習筆記: 4月 2014

2014年4月14日星期一

激勵看完清醒

你窮，是因為你沒有極度渴望成為成功的野心！

你窮，是因為你沒有燕雀缺乏的鴻鵠之志！

你窮，是因為你無法戰勝自己內心的怯懦！

你窮，是因為你缺乏變不可能為可能的勇氣和巨大決心！

有了野心，你才能克服一切自卑、逼出潛能！

有了野心，你才能堅持不懈、不斷學習和改進，以最快的速度完善自己！

有了野心，你才會不畏一切艱難險阻。敢於創造出別人不敢、也不能的奇蹟！

不論你現在家境有多窮，地位有多低。都不要否定自己，都不要失去凌雲之志。
一身貧寒的李嘉誠，當初比現在的你還窘迫，你又有什麼理由繼續受窮，不成為富翁呢？

from: 馬雲：35歲你還窮，活該你窮！讀完，就被罵醒了！

邀請的技巧

邀請的技巧

現在要邀請一位專業人士來分享經驗

看一看01與02的提問，做一個比較

----

01.如果您方便想邀請您來與我們分享經驗 !
回答可能傾向- 我要去分享- 我不方便不去分享

02.想請您來作經驗的分享看您於以下哪天比較方便呢?4/22晚上、4/25晚上、4/30晚上
回答可能傾向- 查看哪天有空可以去- 不會有不去分享的想法與選項

---

發問的技巧在於反思考，這個問題會提供對方什麼樣的選擇

01提供他去或不去的選擇

02讓他直接略過可不去的選擇，直接查看行程哪天有空

2014年4月9日星期三

母親節禮包 case study

母親節禮物包

在有限的資金中兜出母親節禮物組合

包含 :

購物袋、購物袋吊牌

牛皮紙包裝、貼紙

明信片

設計費

公司承接的負責人也就是PM，他作了以下的事

尋找合適的廠商

聯絡廠商

比價(印製圖樣的費用、吊牌費用、貼紙)、是否能在時間內出貨、有足夠的數量

發包給設計師設計，設計費與設計時間考量

最後也要後製出產品規劃的報告給發包禮包的公司

(尺寸大小、禮包內容、設計規劃)

---

這次個案的經驗

是在非常急迫的時間限制內

要承接20000件母親節禮包

在4~5天中要找到合適的廠商

他們有足夠的現貨可以製作，並且在預算內

請設計師設計明信片、要印製在袋上的圖樣、吊牌、貼紙

發包給一位專業的設計人員

可以很快完成、並且專業

但選擇請公司內部的同仁負責設計

主要是希望藉此機會練習

面臨到的困難 : 設計經驗不足、作品需要修正會花比較多時間、設計出來的專業度落差

以此經驗比較同仁與專業設計師間

對承接設計的一些不同的處理方式

1. 擁有相同的素材

2. 為了設計出同樣氛圍

---

第一個動作是什麼?

同仁們~

開始線上尋找設計資源 : 康乃馨向量圖、參考別人的設計

將要用的圖檔描圖想方法在明信片或紙袋上做擺放與設計

問題1 : 手邊資源沒有整理，在需要的時候有點慌亂

問題2 : 設計經驗不足，臨時花時間去參考別人的設計，想方法先求有

此次經驗帶給我們的啟發 :

1. 平時多練習小小的創作

2. 手邊素材要有架構的整理，要用的時候可以快速找到

3. 多看別人的設計，與他們的設計理念

4. 敘述自己對每個作品的設計理念

實際行動 :

我想 ~ 可以從酷卡的練習開始 !

一同定立有興趣的主題大家回去設計

每周大家可以花一點時間分享這次的創作

與自己的創作理念

此次創作使用到的素材分享

藉由互相學習與分享資源，使彼此更快的進步

這是一個比較沒有壓力但是又可以提醒我們每周有一點進步

對設計與對美的感覺這件事不斷練習

---

第一個動作是什麼?

那專業的設計師呢~

2014年4月8日星期二

學習

學習色彩
http://www.uisdc.com/web-design-greens-and-blues

學習Ai課程
https://courses.tutsplus.com/courses/vector-portraits-for-beginners

這兩篇教學要完成04/12
https://webdesign.tutsplus.com/tutorials/building-the-responsive-timeline-portfolio-page--cms-19508

https://courses.tutsplus.com/courses/30-days-to-learn-html-css

好用超簡單slider
http://www.bootcss.com/p/unslider/

FONT

http://techorange.com/2014/04/07/how-to-get-really-good-at-typography-in-one-month/ | 速成！一個月學會設計師的基礎技能：字型設計 | TechOrange《爆橘 |
http://pick.mydesy.com/archives/43664 | 直覺性字母包裝設計 | MyDesy 淘靈感
http://www.pinterest.com/layrapan0929/%E5%AD%97%E9%AB%94%E8%A8%AD%E8%A8%88/ | 字體設計 on Pinterest
http://www.mydesy.com/thibault-de-fournas | 兩分鐘看字型在畫面中的功能與重要性 | ㄇㄞˋ點子靈感創意誌
http://zh.wikipedia.org/wiki/%E5%AD%97%E4%BD%93 | 字體 - 維基百科，自由的百科全書
http://zh.wikipedia.org/wiki/%E5%AD%97%E5%9E%8B | 字型 - 維基百科，自由的百科全書
http://www.aiga.org/theyre-not-fonts/ | AIGA | They’re not fonts!
http://www.advertisingfan.net/2012/06/infographics-for-dummies-typography.html | 廣告小妹: 「設計教學」Infographics for Dummies (第三課：字型篇)
http://www.mydesy.com/font-no-fushigi | 沒有字型概念，設計難做好 | ㄇㄞˋ點子靈感創意誌
https://www.google.com.tw/search?q=%E5%AD%97%E9%AB%94+%E5%AD%97%E5%9E%8B&es_sm=122&ei=QVtoU-jjGoTj8AX1yYHQDQ&start=10&sa=N&biw=1455&bih=665 | 字體字型 - Google 搜尋
http://blog.justfont.com/2012/09/%E5%AD%97%E9%AB%94123%EF%BC%9A%E5%BF%85%E9%9C%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%9F%BA%E6%9C%AC%E7%9F%A5%E8%AD%98%EF%BC%88%E5%A2%9E%E8%A3%9C%EF%BC%89/ | 字型基本知識 , justfont blog
http://www.xingothic.tw/stroke/ | 信黑筆劃，最高品質黑體字型
http://blog.justfont.com/2012/08/%e7%b6%b2%e9%a0%81%e6%8e%92%e7%89%88%ef%bc%9a%e6%b2%99%e6%8b%89%ef%bc%8d%ef%bc%8d%e5%b0%8d%e6%af%94%e3%80%81%e5%ad%97%e9%ab%94%e5%a4%a7%e5%b0%8f%e3%80%81%e6%ae%b5%e8%90%bd%e6%a8%99%e9%a1%8c%e3%80%81/ | 網頁排版：對比、字體大小、段落標題、呼吸空間 , justfont blog
http://blog.justfont.com/2012/08/%e7%b6%b2%e9%a0%81%e6%8e%92%e7%89%88%ef%bc%9a%e6%b9%af%e5%93%81%ef%bc%8d%ef%bc%8d%e5%9e%82%e7%9b%b4%e7%9a%84%e9%9f%bb%e5%be%8b/ | 網頁排版：湯品－垂直的韻律 , justfont blog

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-

訂閱：文章 (Atom)

2014年4月14日 星期一

2014年4月9日 星期三

2014年4月8日 星期二

2014年4月7日 星期一

2014年4月3日 星期四

2014年4月2日 星期三

2014年4月1日 星期二