egroupmandy 學習筆記

2014年3月28日星期五

學習程式語言的網站!

thecodeplayer 影片教學並且code從無到有完整步驟
http://thecodeplayer.com/

codecademy線上學習有很多課程，每節有不同任務
http://www.codecademy.com/

codeavengers有點像在玩遊戲式的教學
http://www.codeavengers.com/#learner

teamtreehouse付費課程相對完整，有真人教學
http://teamtreehouse.com/

code school / css learning頁面
http://cssxcountry.codeschool.com/levels/1

豐富的學習資源
http://www.developphp.com/

學習影片free
https://www.codeschool.com/

學習coding的網站
http://techorange.com/2014/03/27/best-resources-to-learn-code/

2014年3月26日星期三

學習練習

每天花30分鐘練習
顏色、排版，以及柵格的運用
每天複習教程 50 Totally Free Lessons in Graphic Design Theory
http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--psd-2916

設計師自學完全手冊，讓你從零基礎到成為專業設計師
http://techorange.com/2013/10/01/get-a-job-as-a-designer-without-going-to-design-school/

下載書籍的網站 ~
http://ebookbrowsee.net/

2014年3月19日星期三

wrapbootstrap 很棒的後台介面

ibest後台管理前台呈現的清楚說明

http://www.ibest.tw/page09.php

table 可以縮合\放大全螢幕\刪除

並且每欄都可輸入關鍵字搜尋，非常清楚易用

http://wrapbootstrap.com/preview/WB0573SK0

顏色鮮豔

http://wrapbootstrap.com/preview/WB0B30DGR

2014年3月18日星期二

sass 學習

sass 學習
透過此網站教學30天學習計畫
http://sam0512.blogspot.tw/2013/10/sass.html

線上編寫Sass
http://sassmeister.com/about

使用scss來加速寫css吧!

http://blog.visioncan.com/2011/sass-scss-your-css/

DAY1 - 20140319

---------------------------------------------------------------------------------
關於compass
http://blog.mukispace.com/compass-for-html-code-project/

2014年3月13日星期四

bootstrap學習

wrapbootstrap
https://wrapbootstrap.com/

bootstrapzero
http://bootstrapzero.com/

左右多張小圖輪播
http://www.bootply.com/112447
http://www.bootply.com/121392

可參考
http://ithelp.ithome.com.tw/question/10136179

教學
http://www.sitepoint.com/understanding-twitter-bootstrap-3/

2014年3月12日星期三

EDM設計經驗

EDM設計經驗

編寫html郵件與編寫一般html頁面有很大的不同
因為主流郵件信箱會對html郵件做過濾 :
- 基於郵件安全性考量，js就會被過濾掉，包含監聽事件onclick、onmouseover..
- CSS也會被部分過濾掉

google、homail的郵件內容是被佈局在整個郵件的某個div中
所以要注意如果你在裡面寫入
<style type="text/css"> body {font-size:30px;} </style>頁面字體就會被影響
為了兼容各種郵件信箱，不可使用上述外連css的寫法，需使用inline-css，確保樣式能被套用

以下幾點需要注意:

1. 頁面寬度650-800px，最大不要超過800px

2. 不要使用div排版，選用table來佈局

3. 使用inline-css，確保樣式能被套用，並將樣式寫在 <td> <font> 裡面
<td style="font-family:微軟正黑體; font-size:12px;"> 文字 <td>
<font style="font-family:微軟正黑體; font-size:12px;">文字</font>

4.不使用flash、java、javascript、frames，如果畫面中想要動態效果，將flash文件轉成gif動畫使用

5.有背景圖時，style內容裡面background可以設置color，但是img會被過濾，不能用CSS來設置背景圖片。但可以直接寫在代碼裡 ex: <table background="圖片絕對路徑" cellspacing="0" cellpadding="0">

6. 使用<ul><li>時，樣式寫在<ul style=""><li></li></ul>

7. img來源需使用「絕對路徑」: 要是在網路是有絕對網址可以開啟的圖，不要寫成本地路徑<img src="image/logo.gif" alt="">，img設定width、height、alt

8.EDM要設有連結，"如果無法查看郵件內容，請點此連結"，讓使用者可以連到放有相同內容的web頁面

9. 好用:
寬可以設border-left:10px solid transparent產生假寬度
高度用<br />

---

常見問題 :
Q : 圖片間有白色空隙怎麼辦?
A : 在img tag上加{display:block;}，即可消除不必要空隙

EDM設計因為client太多元，想要在outlook、google..以及他們的各種版本上完美呈現並不是一件容易的事，但掌握上述幾點大原則，版面也不會差太多

想要更深入研究可以參考下列文章 :
How To Code HTML Email Newsletters

看各個信箱支援的CSS樣式 :
CSS Support for email client

可以利用此網站貼上html測試EDM :
PutsMail

可以利用此網站貼上html，直接瀏覽在各信箱呈現的樣子 :
Preview Email in Gmail, Hotmail, AOL, and Yahoo in seconds

參考網路資源
http://blog.yam.com/hanasan/article/56605300
http://yiyingloveart.blogspot.tw/2013/03/email-csshtml.html
http://yiyingloveart.blogspot.tw/2012/12/htmledm.html
http://big5.jrj.com.cn/gate/big5/blog.jrj.com.cn/6829336752,3495177a.html

深入學習!一系列教程(en)
https://webdesign.tutsplus.com/series/mastering-html-email--webdesign-17696