2014年11月22日 星期六

javascript 學習

onfirm 彈出視窗
prompt 彈出視窗並有input欄位

Code:

1. ( ): control order of operations
2. * and /: multiplication and division
3. - and +: subtraction and addition


modulo%
23 % 10 = 2

Substring:

"some word".substring(xy) where x is where you start chopping and y is where you finish chopping the original string.
The number part is a little strange. To select for the "he" in "hello", you would write this:
"hello". substring(0, 2);
Each character in a string is numbered starting from 0, like this:
0 1 2 3 4
 | | | | | 
 h e l l o
The letter h is in position 0, the letter e is in position 1, and so on.

Therefore if you start at position 0, and slice right up till position 2, you are left with just he

ex:
第4個字到第7個字
"put some string".substring(3,7);
ex:
console.log("January".substring(0,3));
console.log("Melbourne is great".substring(0,12));

console.log("Hamburgers".substring(3,10));
Jan
Melbourne is

burgers

javascript資源


線上學習好書Eloquent JavaScript

http://eloquentjavascript.net/


深入淺出 JavaScript

深入淺出 JavaScript

http://www.books.com.tw/products/0010494235

2014年7月20日 星期日

視差


回在留言有點可惜,貼在這邊
視差常用效果plugin及實做文章以 羅右鈞 問題為例,欲達成網站效果http://pixelcave.com/demo/proui-frontend/index_parallax.php
.視差滾動現成Library
http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm
簡單來說就是用偵聽scroll事件,然後再去觸發加class或其他方式去移動物件,另外就是透過不同的移動速度及z-index去做出物件景深的效果
.另一種動畫處理方式(就是一直換圖的動畫css實做方式)
http://www.bryanbraun.com/2014/03/15/how-i-rebuilt-flying-toasters-using-only-css-animations
.選單滑到固定位置可以看這篇怎麼實做(常用在側邊小圓點或小選單)
http://trevordavis.net/blog/jquery-one-page-navigation-plugin/
怎麼找資源的話,其實就是多看http://www.cnblogs.com/lhb25/
之類的,或是用特效或關鍵字去找,例如parallax scrolling,翻一翻看一看收集一下,久了就很多啦

2014年7月9日 星期三

CSS 簡潔Code 幾個資源參考

通用 CSS 笔记、建议与指导


很重要的一些觀念,講得很好
http://yukir.net/CSS-Guidelines/#%E5%8D%95%E4%B8%80%E6%96%87%E4%BB%B6%E4%B8%8E%E5%A4%9A%E6%96%87%E4%BB%B6





字型設定,易於重複使用的好方法

http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/

作者提供範例css,可使用
http://jsfiddle.net/csswizardry/8nYqN/


成為 CSS 團隊的一員:

CSS 團隊開發的最佳實踐


作者分享體驗,如何有效的在團隊中定義一套css
http://msdn.microsoft.com/zh-tw/magazine/ff679957.aspx

sublime 實用功能

註解

可選多行,按  ctrl + /  將選擇的欄位註解起來
html、css...等檔案都可以直接使用此快捷鍵,很方便


多重選

可以先選取你想要多重取代的欄位,按 ctrl + D 選取到檔案中相同的欄位,如果想要跳過其中幾個不用取代,就按 ctrl + K + ctrl + D ,如果想要復元選取動作則按 ctrl + U


合併多行

選取愈合併的多行,按 ctrl + j 就會使其在同一行,或直接停駐一點,按 ctrl + j 就會使後面程式碼向停駐的行排列






選取後 >> 按 ctrl + j


整齊 ~











2014年7月6日 星期日

gif、jpg、png 了解圖檔特性

GIF 圖形交換格式

GIF(Graphics Interchange Format),適合儲存 256 的影像,是使用 LZW 技術縮減影像色彩至256色內並壓縮,透過減色的方式來縮減檔案大小。因為可以儲存的顏色較少,不適合用於全彩的照片、或漸層細膩豐富的影像,但很適合用於存取色塊、形狀不複雜的圖形。

設定 GIF 最佳化時會出現一個交錯式的選項,所謂交錯式 (Interlacing) 指的是圖檔出現的方式,一般而言網路的顯示是由上而下一條線一條線地依序顯示,使用者必須要等到圖形下載完後才能看到完整圖片,圖檔愈大就要等待愈久。 而交錯顯示則是以相隔八條線的方式跳著顯示,所以圖形會像打開百葉窗一樣(依瀏覽器處理方式可能會有所不同),即可讓使用者在圖形未完全出現前,先對圖案有個概念,但檔案相對會比較大。

交錯適不適合用於製作 GIF 動畫,會有鬼影殘留的現象。

另外再 GIF 89a 規格中可以儲存透明背景、動畫效果,是其特色。


JPG靜態影像壓縮格式

JPEG(Joint Photographic Experts Group) 圖檔,又稱 JPG 檔,適用於儲存 24 位元全彩影像,但不支援透明或動畫。JPEG運用壓縮愈[算法可以將影像資料壓縮成數十分之一的大小,但壓縮比越高影像耗損也越大,影像會越失真。多數影像編輯軟體都可以調整 JPEG 的壓縮比值,一般壓縮比10左右比較無法分辨出與原先的差別。

JPEG 雖好用但由於他的破壞性壓縮,應避免重複壓縮,過度的破壞會造成影像的品質越來越差。

JPEG 格式:
  • 標準 JPEG 格式 : 此類圖檔在網頁下載時只能由上而下依序顯示圖片,直到圖片資料全部下載完畢,才能看到全貌。

  • 漸進式 JPEG 格式 : 此為標準式的改良版,可以在網頁下載時,先呈現出圖片的粗略外觀後,再慢慢地呈現出完整的內容(像是 GIF 的交錯顯示),漸進式也比標準式檔案來得小,所以可以多用這種格式。

  •  JPEG2000 格式 : 壓縮品質更好,並可改善無線傳輸時常因訊號不穩定而造成馬賽克及位置錯亂的情況。具有 Random Access 特性,可讓使用者先從伺服器下載 10% 的圖檔資料,在模糊的圖檔中找到需要的部分後,再重新下載部分資料即可,可大幅縮短時間。

PNG可攜式網路圖像格式

PNG(Portable Network Graphics) 壓縮影像不會失真,可儲存 48 位元的色彩影像,比 JPEG 的 24 位元高,像素色彩也可有 256 種不同的透明度選擇,可讓圖像在任何背景上,看不到接縫,改善 GIF 只能有透明或不透明的兩種選擇,與 GIF 檔描邊不佳的問題。
PNG 格式跨平台的影像亮度控制,可讓影像在不同的作業系統顯示出相同的效果,不像 GIF 擋在不同的作業系統上顯示出的畫面會跟著不一樣,所以 PNG 格式特別適合在網路環境流通。
PNG 因影像壓縮不失真,所以檔案會比 JPEG 大。

----------------------------------------------------------
圖檔適用 : 

GIF (讀取速度快)
icon圖示、圖片無漸層、圖片須透明背景、GIF動畫

JPEG (讀取速度中)
全彩照片、圖片有漸層

PNG (讀取速度慢)
網頁介面、圖片需漸層與透明的背景


(參考引用)  關於JPG‧GIF‧以及PNG  http://ppt.cc/gBdU






2014年6月27日 星期五

2014年5月20日 星期二

jquery

http://www.qianxingzhem.com/post-1778.html

Web Animation Infographics: A Map of the Best Animation Libraries for JavaScript and CSS3 plus Performance Tips

http://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html


ngProgress
https://victorbjelkholm.github.io/ngProgress/#demo


影片code school
http://try.jquery.com/levels/1/challenges/1


jquery rain-jQuery Carousel Plugin & Tutorials with Example

http://www.jqueryrain.com/example/jquery-carousel-example/



社團推薦電子書javascript

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月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