be nice to your designers

BE NICE TO YOUR DESIGNERS:USEFUL TIPS FOR RAILS DEVELOPERS

TaopaiC @ Ruby Tuesday2010/12/28

1

ABOUT ME

• Blog: http://pctao.org

• Twitter : TaopaiC

2

http://pctao.org

http://pctao.org

RAILS 開發非常快速!大家都知道.

但還是有些意外.....

3

一般開發流程

切版畫圖

程式套版上線

規格 Designer

Developer閒閒,沒事做?

閒閒,沒事做?

4

積極的開發流程

切版畫圖

程式套版上線

規格

Designer

Developer

5

開發流程 - 現實狀況

切版畫圖

程式套版上線

規格

Designer

Developer

反覆修改

•反覆修改增加時程.•RD自行修改, 造成與美術的檔案不同步. 下次修改就會是問題.

6

增加功能流程

切版成品

套版

Designer

Developer

修改

程式網站

網站和切版成品不一樣?

7

增加功能流程 - 現實狀況

套版

Designer

Developer

修改

程式網站

切版成品

8

套版時遇到的問題

•美術的 html/css 和 rails 產出不一樣, 改 html 或是 rails 呢?

•檔案目錄混亂, 要再分目錄處理.

•反覆修改後, 美術留存的靜態網頁和上線版本不同.

•導致套版變成技術力低但是很費功的事情.

9

改進方案

10

命名統一

•最好在開發前, 先有命名的共識, 包括 model, method

•美術與程式拿到的規格書多半是中文的, 程式想程式的, 美術想美術的. 就連命名都可能不一樣.

•雙方可能各想出不同的命名, 例如:

•文章: article, post, essay, words...

•回應: comment, response, reply...

11

class ArticlesController < ApplicationController def index @articles = Articles.paginate(:page => params[:page]) @latest_comments = Comments.latest endend

如果你的CONTROLLER長這樣

<h1>文章</h1><div class="posts"> <div class="post"> <h2 class="post-name">標題文字</h2> <p class="text">內容文字 Lorem...</p> </div></div>

<div class="new_responses"><h2>最新回應</h2> <div class="response"> <h3>標題文字</h3> <p class="reply">內容文字 Lorem...</p> </div></div>

但是你拿到這樣的版

12

套版完的產物<h1>文章</h1><div class="posts"><% @articles.each do |article| %> <div class="post"> <h2 class="post-name"><%= article.title %></h2> <p class="text"><%= article.content %></p> </div><% end %></div>

<div class="new_responses"><h2>最新回應</h2><% @latest_comments.each do |comment| %> <div class="response"> <h3><%= comment.title %></h3> <p class="reply"><%= comment.content %></p> </div><% end %></div>

articlepost

comment

response

13

圖片命名

•你可能會拿到這樣的檔案. 光看檔名分不出圖片的用途, 會是?

• CSS 背景圖.

• image tag 使用的圖.

•範例圖, 上線之後就用不到.

14

圖片命名 (TABLE)

別懷疑, 這是 Photoshop 輸出自動產生的 html ....

甚至拿到這樣的 html ...

15

Photoshop 可以設定 Slice 的名字,輸出的圖片就有不同檔名

16

HEADER (CSS 背景圖):header.png

LOGO (image tag 使用的圖):logo.jpg

範例圖片: example_pic.png

CSS背景圖和image tag 使用的圖怎麼分?請相信你的美術吧...

命名範例

17

圖片都正名了18

目錄結構

•壞的目錄結構讓你多花時間整理, 而且是每次修改!!

•壞的目錄結構讓你不自覺放了重複的檔案.

19

非常糟網頁,圖片,CSS,JS全放在同一個目錄

20

好多了對PHP來說

21

RAILS 要什麼目錄結構?

•在 Rails 裡:

• stylesheet_link_tag 使用 public/stylesheets 目錄

• CSS 背景圖打算放在 public/stylesheets/images 目錄

• javascript_include_tag 使用 public/javascripts 目錄

• image_tag 使用 public/images 目錄

•另外測試的範例圖片, 打算放在 public/examples 目錄

22

這才是我們要的23

目錄結構

24

合併 CSS• Rails 內建把多個 CSS 打包成一個檔案的功能, 減少 HTTP

request 數量.

•例如: 三個 css 檔案自動打包成一個.

<%= stylesheet_link_tag “reset.min.css”, “main.css”, “page.css”, :cache => "main-cache" %>Rails 語法

<link href="/stylesheets/reset.min.css?1293518248" media="screen" rel="stylesheet" type="text/css" /><link href="/stylesheets/main.css?1293518252" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/page.css?1293518257" media="screen" rel="stylesheet" type="text/css" />

產出

<link href="/stylesheets/main-cache.css?1293518257" media="screen" rel="stylesheet" type="text/css" />

開啟打包功能後的產出

25

合併 CSS - 現實問題

•但如果沒有美術配合, 合併 CSS 功能也沒輒.

例如: 每一頁面都各自獨立的 css 檔案, 而且裡面有重複但樣式不同的描述, 合併之後只會更糟...

26

合併 CSS (3)

•這兩個 CSS 檔案, 原本設計是分開使用, 強制撮合會出事情.

•可以在CSS設計階段, 避免這種問題, 或是...

/* homepage.css */.header { background-image: "images/homepage_header.png"}

/* post.css */.header { background-image: "images/post_header.png"}

27

或是, 如果你用HANDICRAFT_HELPER的話...<body class="welcome-controller index-action">

Controller 名字 Action 名字因此可以使用 .welcome-controller.index-action指定到特定頁面裡的元素.

28

IE HACKS

• IE相容性還是無法避免.

•有三種策略可以使用:

• Conditional comment 搭配 Body class

• Conditional comment 搭配額外的 CSS

• CSS HACKS...

•不管是用哪種方式, 請先和美術溝通好.

29

IE HACKS 範例

   <body class="welcome-controller index-action"> 

• Conditional comment 搭配 Body class

handicraft_helper 有提供此功能

 

• Conditional comment 搭配額外的 CSS 檔案

30

積木

•選單 ( handicraft_helper 的 list )

•分頁 ( will_paginate )

•其他...

31

HANDICRAFT_HELPER 的 LIST

<ul> <li class="first current"><a href="#TODO">第一個</a></li> <li><a href=”#TODO”>第二個</a></li> <li class=”last”><a href="#TODO”>最後一個</a></li></ul>

目前選到的第一個項目

最後一個項目

32

WILL_PAGINATE

<div> <span class="disabled prev_page">« Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <span class="gap">…</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next »</a></div>

目前頁面 disabled 上一頁

下一頁

33

總結

•和你的美術溝通

•命名統一

•目錄結構

• CSS 的注意事項

•積木的樣式

34

be nice to your designers

Technology