What to say about Trends ?
Just run the following google trends:
And here are the results: Iphone is explosing, Android quitly raise, and other OS are decreasing...But is it the right analysis ?wait and see...Frédéric Delorme // Java/J2EE Expert
Technical Manager
Web Standard evangelizer
Just run the following google trends:
And here are the results: Iphone is explosing, Android quitly raise, and other OS are decreasing...But is it the right analysis ?wait and see...Already have to produce web page to public target ? And by public i mean out of intranet or extranet of the world of enterprise, targetting any public.
Yes ?So the first thing to do before creating a CSS styles sheet is to start from the same point for all browser. And as all CSS specification version didn't tell a word about what are the default values, all browser developers go with there own randomly choosen values ;) A first solutionhtml, body, div, form, fieldset, legend, label {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
text-align: left;
vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
Quick and dirty ?
The second technic is to reset with a one big line :
Thanks to "Carrer Blog : CSS Mini Reset" for this very fast solution covering 80% rules.
References
Other solutions exists :
Yes, working as Web developer prevent me to be a good web designer. And sometime, I need focus on state of my knowledge about simple web languages as HTML and CSS.
This is my "State Of the Art" about web design. A tentative of design ;) Comments are welcome. Note: please, notate that red part at bottom is only for debug purpose ;)script/plugin install git://github.com/thoughtbot/paperclip.gitNow you have downloaded it, you are ready to use it. 3. Get the paperclip_with_hobo
script/plugin install git:http://github.com/tablatom/paperclip_with_hobo.git
ok. let's apply some model modification to our Book modelisation.
Book.rb
we need to add some new field to our app/model/book.rb
class Book < ActiveRecord::Base
hobo_model # Don't put anything above this
fields do
title :string
author :string
year :integer
resume :text
note :integer
timestamps
end
has_attached_file :cover, :styles => {
:full=>"600x600>",
:medium => "300x300>",
:thumb => "100x100>",
:mini => "60x60>" },
:path => " :rails_root/public/media/books/covers/:id/:style.:extension",
:url => "media/books/covers/:id/;style.:extension"
...
end
Adding such "has_attached_file" field to our Book model add in reality 4 fields to our database model after running the rake db:migrate standard rails operation :
see db/migrate/20100221172242_add_attachements_cover_to_book.rb migration file
class AddAttachmentsCoverToBook < ActiveRecord::Migration
def self.up
add_column :books, :cover_file_name, :string
add_column :books, :cover_content_type, :string
add_column :books, :cover_file_size, :integer
add_column :books, :cover_updated_at, :datetime
end
def self.down
remove_column :books, :cover_file_name
remove_column :books, :cover_content_type
remove_column :books, :cover_file_size
remove_column :books, :cover_updated_at
end
end
Ok, now our model is updated, database too. we are ready to modify some dryml file to show this image.
Go to app/views/taglibs/application.dryml and add the following declaration:
At file beginning in existing "include" lines:
<include src="paperclip" plugin="paperclip_with_hobo"/>
And at end of file :
<extend tag="form" for="Book">
<old-form merge multipart>
<field-list fields="title, author, year, resume, note, cover, category" param/>
<div param="actions">
<submit label="#{ht 'books.actions.save', :default=>['Save']}" param/><or-cancel param="cancel"/>
</div>
</old-form>
</extend>
This is a view modifier for a Book, adding the cover field and removing the 4 database fields.
Then, modify the card dryml for Book model, in the same previous file (application.dryml) :
<extend tag="card" for="Book">
<card>
<h5><a /></h5>
<p><view:title /></p>
<p>
<view:resume />
</p>
<p>
<%= I18n.t :uploaded_label %><br />
<view:created_at format="%B %d, %Y" /> by <you:user />.
</p>
<delete-button class="actions" />
</card>
</extend>
Let's test our new cover field !