BE NICE TO YOUR DESIGNERS:USEFUL TIPS FOR RAILS DEVELOPERS
TaopaiC @ Ruby Tuesday2010/12/28
1
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 範例
<!--[if lt IE 7 ]><body class="welcome-controller index-action ie6"><![endif]--> <!--[if gte IE 7 ]><body class="welcome-controller index-action ie"><![endif]--> <!--[if !IE]>--> <body class="welcome-controller index-action"> <!--<![endif]-->
• Conditional comment 搭配 Body class
handicraft_helper 有提供此功能
<!--[if lt IE 7 ]><link href="/stylesheets/ie6.css?1293518248" media="screen" rel="stylesheet" type="text/css" /><![endif]--> <!--[if gte IE 7 ]><link href="/stylesheets/ie.css?1293518248" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
• 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