Contenu connexe
Similaire à Be nice to your designers
Similaire à Be nice to your designers (20)
Be nice to your designers
- 1. BE NICE TO YOUR DESIGNERS:
USEFUL TIPS FOR RAILS DEVELOPERS
TaopaiC @ Ruby Tuesday
2010/12/28
- 9. • html/css rails , html rails ?
• , .
• , .
• .
- 11. • , , model, method
• , ,
. .
• , :
• : article, post, essay, words...
• : comment, response, reply...
- 12. CONTROLLER
class ArticlesController < ApplicationController
def index
@articles = Articles.paginate(:page => params[:page])
@latest_comments = Comments.latest
end
end
<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>
- 13. <h1> </h1> article
<div class="posts">
<% @articles.each do |article| %> post
<div class="post">
<h2 class="post-name"><%= article.title %></h2>
<p class="text"><%= article.content %></p>
</div>
<% end %>
</div>
<div class="new_responses"> comment
<h2> </h2>
response
<% @latest_comments.each do |comment| %>
<div class="response">
<h3><%= comment.title %></h3>
<p class="reply"><%= comment.content %></p>
</div>
<% end %>
</div>
- 14. • .
, ?
• CSS .
• image tag .
• , .
- 15. (TABLE)
html ...
, Photoshop
html ....
- 17. HEADER (CSS ):
header.png
LOGO (image tag ):
logo.jpg
:
example_pic.png
CSS image tag ?
...
- 22. RAILS ?
• Rails :
• stylesheet_link_tag public/stylesheets
• CSS public/stylesheets/images
• javascript_include_tag public/javascripts
• image_tag public/images
• , public/examples
- 25. CSS
• Rails CSS , HTTP
request .
• : css .
Rails
<%= stylesheet_link_tag “reset.min.css”, “main.css”, “page.css”, :cache => "main-cache" %>
<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" />
- 27. CSS (3)
/* homepage.css */
.header {
background-image: "images/homepage_header.png"
}
/* post.css */
.header {
background-image: "images/post_header.png"
}
• CSS , ,
.
• CSS , , ...
- 28. ,
HANDICRAFT_HELPER ...
<body class="welcome-controller index-action">
Controller Action
.welcome-controller.index-action
.
- 29. IE HACKS
• IE .
• :
• Conditional comment Body class
• Conditional comment CSS
• CSS HACKS...
• , .
- 30. IE HACKS
• Conditional comment Body class
<!--[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]-->
handicraft_helper
• Conditional comment CSS
<!--[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]-->
- 31. • ( handicraft_helper list )
• ( will_paginate )
• ...
- 32. 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>
- 33. WILL_PAGINATE
disabled
<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>
