Be nice to your designers

2,209 views

Published on

Published in: Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,209
On SlideShare
0
From Embeds
0
Number of Embeds
670
Actions
Shares
0
Downloads
13
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Be nice to your designers

  1. 1. BE NICE TO YOUR DESIGNERS: USEFUL TIPS FOR RAILS DEVELOPERS TaopaiC @ Ruby Tuesday 2010/12/28
  2. 2. ABOUT ME• Blog: http://pctao.org• Twitter: TaopaiC
  3. 3. RAILS ! . .....
  4. 4. Designer , ?, ? Developer
  5. 5. Designer Developer
  6. 6. -Designer • . •RD , . . Developer
  7. 7. Designer Developer?
  8. 8. -Designer Developer
  9. 9. • html/css rails , html rails ?• , .• , . • .
  10. 10. • , , model, method • , , . . • , : • : article, post, essay, words... • : comment, response, reply...
  11. 11. CONTROLLERclass ArticlesController < ApplicationController def index @articles = Articles.paginate(:page => params[:page]) @latest_comments = Comments.latest endend<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. 12. <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>
  13. 13. • . , ? • CSS . • image tag . • , .
  14. 14. (TABLE) html ..., Photoshop html ....
  15. 15. Photoshop Slice ,
  16. 16. HEADER (CSS ): header.png LOGO (image tag ): logo.jpg : example_pic.pngCSS image tag ? ...
  17. 17. • , !!• .
  18. 18. , ,CSS,JS
  19. 19. PHP
  20. 20. RAILS ?• Rails : • stylesheet_link_tag public/stylesheets • CSS public/stylesheets/images • javascript_include_tag public/javascripts • image_tag public/images • , public/examples
  21. 21. 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" />
  22. 22. CSS -• , CSS . : css , , ...
  23. 23. CSS (3)/* homepage.css */.header { background-image: "images/homepage_header.png"}/* post.css */.header { background-image: "images/post_header.png"}• CSS , , .• CSS , , ...
  24. 24. ,HANDICRAFT_HELPER ...<body class="welcome-controller index-action"> Controller Action .welcome-controller.index-action .
  25. 25. IE HACKS• IE .• : • Conditional comment Body class • Conditional comment CSS • CSS HACKS...• , .
  26. 26. 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]-->
  27. 27. • ( handicraft_helper list )• ( will_paginate )• ...
  28. 28. 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>
  29. 29. WILL_PAGINATE disabled<div>    <span class="disabled prev_page">&laquo; Previous</span> <span class="current">1</span> <a href="./?page=2" rel="next">2</a> <a href="./?page=3">3</a> <span class="gap">&hellip;</span> <a href="./?page=29">29</a> <a href="./?page=30">30</a> <a href="./?page=2" rel="next" class="next_page">Next &raquo;</a></div>
  30. 30. • • • • CSS •

×