We are a web design and development agency based in Manila and this is our blog. We build web applications that help companies run their businesses and help people find their voice on the web. http://rebelcolony.com/posts.rss As predominantly a web design agency we have learnt the hard way many lessons about building websites for clients. One of the most important is that in order to build a successful website we should look it as a process with certain objectives or stages we should complete before we move onto the next one. It can be exciting to dive straight into [photoshop](http://www.photoshop.com/) or [textmate](http://www.macromates.com) and start knocking something up but we should take a step back first and look at the bigger picture. Like it or not, every website has business objectives and to ignore the importance of finding out what they are could prove to be a fundamental mistake. Business objectives will help us focus on what's important right from the start and allow us to make the difficult decisions about functionality, technology, testing and design. If it doesn't fit into the business objectives then forget it. Another benefit to listing business objectives is that they can aid in the communication between stakeholders. Having predefined goals that everyone is working towards will help the whole process. Thankfully most business objectives are fairly obvious. Lets say we're building an online store that sells fishing tackle for example, our business objectives might be: 1. increase tackle sales by 50% over the next year 2. increase our newsletter subscribers by 20% Some other business objectives may not be so easy to quantify such as increasing brand awareness or improving customer satisfaction. It's important that all stakeholders contribute to the process of defining business objectives and agree on the conclusion as different departments may have vastly different ideas about the mission of the website. Nevertheless, it's essential that we are able to track our business objectives to ensure that we can judge the return on investment. Tracking sales and subscribers should be dead easy and using free tools such as [google analytics](http://www.google.com/analytics/) can provide a multitude of metrics to track more specific business objectives. The advantage of tracking is that success can be easily measured and proven to others. So if your involved in building a website for a client that expects a return on investment business objectives have to be your starting point. 23 Mar 2012 http://rebelcolony.com/posts/business-objectives-first-website-design-later http://rebelcolony.com/posts/business-objectives-first-website-design-later [Carrierwave](https://github.com/jnicklas/carrierwave) seems like a tidy alternative to [paperclip](https://github.com/thoughtbot/paperclip) for file uploads in ruby frameworks. The first step is to add the gem to your application in the Gemfile: ```ruby #Gemfile gem "carrierwave" ``` After installing the gem with the bundle command we can generate an uploader, in this example i want to build a simple image uploader using a post class: ``` $> rails g uploader image ``` That should generate an image_uploader.rb file. Before we configure that lets create and run the migration needed to alter the database. ``` $> rails g migration add_image_to_posts image:string $> rake db:migrate ``` Now we need to add the uploader to the post class: ```ruby #post.rb class Post < ActiveRecord::Base mount_uploader :image, ImageUploader end ``` Next up, we need to add the file field mark-up to the view template: ```ruby #_form.html.erb <%= f.file_field :image %> ``` Then to make the form handle uploads we need to make it multipart: ```ruby #_form.html.erb <%= form_for @post, :html => {:multipart => true} do |f| %> ``` Now to display the image in the view template: ```ruby #index.html.erb <%= image_tag post.image_url.to_s %> ``` That works but unless you edit the dimensions before you upload, the image will display in it's native size. We can process the image with carrierwave and the rmagick gem, you'll also need [imagmagik](http://www.imagemagick.org/script/index.php) installed on your system. Here i want a thumb version of the image which should be 150x150px: ```ruby #Gemfile gem "rmagick" #image_uploader.rb include CarrierWave::RMagick # Create different versions of your uploaded files: version :thumb do process :resize_to_limit => [150, 150] end #index.html.erb <%= image_tag post.image_url(:thumb).to_s %> ``` Be sure to check the [documentation](http://rubydoc.info/gems/carrierwave/frames) and checkout the [railscasts](http://railscasts.com/episodes/253-carrierwave-file-uploads?autoplay=true) episode. 29 Jan 2012 http://rebelcolony.com/posts/rails-3-image-uploading-with-carrierwave http://rebelcolony.com/posts/rails-3-image-uploading-with-carrierwave I love seeing well designed and packaged products. Often we are re-inventing the wheel in design by starting with a blank canvas. We should take inspiration from great design we see around us everyday.  I have to give a big-up to [Red Bull](http://www.redbull.com/), whatever you think about the drink, they have done a fantastic job associating their brand with all things cool. 31 Dec 2011 http://rebelcolony.com/posts/red-bull-design http://rebelcolony.com/posts/red-bull-design Git has become the defaco source code control system not only for developers but also more and more for design teams. The popularity of [github](http://www.github.com) has also increased the numbers of people using it. We will continue to post handy snippets of commands and maybe some more in-depth use cases for git, especially for development teams with both front-end and designers who may have a heart-attack at the thought of using the terminal to issue commands. To add colour to the bash output while using Git. ``` $> git config --global color.ui auto ``` 17 Aug 2011 http://rebelcolony.com/posts/how-to-add-colour-to-git-terminal-output http://rebelcolony.com/posts/how-to-add-colour-to-git-terminal-output First thing we should do we need to create some text that we want it to be look like 3D.. and of course choose the font you like.. i used Dark crystal script for the font..  Next i change some other detail of the font by adding some swirl line design to make it looks unique or let say to put some attitude by it just the word itself “animal”  Note: to edit or modify live font we need to expand the font by selecting the font and press Ctrl+Shift+O or select “Object” on menu bar then select “Expand” leave object and fill checked then press “OK” in this mode you can edit/delete some anchor point of the font and also remember you cant edit the word anymore after you expand. see sample image..  heres the cool part after your done designing.. lets apply the 3d look effect.. select your design/object, copy and paste then change the color of the original object in any color you want also also with the copy object.. i choosed light gray and black:  decrease the size of the 2nd copy by 2 times or any size you want.. make sure the 1st object is in first in layer to make sure select the 1st object and press Ctrl + Shift + ] then place the 2nd object in back of the 1st or any direction you feel to make it look the best..  and the finale select your two object goto Object>Blend>Blending Options.. i used the setting below..but you can always play with your desired..  after pressing “OK” and the two object selected press Ctrl + Alt + B.. and viola!!! a simple 3d look render in illustrator.. you can use that technique in so many way see image below.. i add some white stroke and change the light gray to orange..  and here's my final result..  have a good day! -_- 17 Jun 2011 http://rebelcolony.com/posts/adobe-illustrator-cool-3d-looking-effect-using-blending-options http://rebelcolony.com/posts/adobe-illustrator-cool-3d-looking-effect-using-blending-options In creating effective illustration especially logo, we need to go through the step by step process for absolute outcome and Client Satisfaction.  First, we need to do some sketches. For example: “Viking Pizza” logo, in the process. I did some quick sketches selection until I chose the right one and then improve the angle, helmet, skin detail, and eyes etc. For me, doing a good start like making a draft or good sketch sample is the very important part in the process.  Second is tracing or cleaning, it's easy and fun to do but it takes a lot of time. Just trace your finalized sketch and then remove the unnecessary and excess details and refine the lines.  Next of the process is color; After doing the line art, I chose the color from the color pallet according to what the viking color looks like. So it convinces the viewer that it is really a viking illustration, for short “appropriate color for what is the subject”. ( for base color )  Detail is a big part in illustration, because the more it has details, the more it looks realistic. Always remember the basic element when putting some details, is texture and light. And of course include the color as well. See the difference between the progression of the sample images given.  Lastly is the finalizing or we can also call it, Quality Check. In terms of colors and fonts that we used. In this final stage or viking pizza illustration, the color Yellow and Blue are given. So, I decided to incorporate the color of the viking illustration in a brighter effect compared to the original color. Also I changed the font to look nicer. easy to read and simple compare to the first font. 21 Apr 2011 http://rebelcolony.com/posts/effective-illustration-adobe-illustrator http://rebelcolony.com/posts/effective-illustration-adobe-illustrator Sitemaps help search engines to index your website by displaying all the links to the site. A really nice guy called [Josh Owens](https://github.com/queso) has written a rails [sitemap plugin](https://github.com/queso/sitemap) that helps you create a dynamic rails sitemap. I was working with a rails 2.3.8 app so to install via github and generate: ``` $> ruby script/plugin install git://github.com/queso/sitemap.git $> ruby script/generate sitemap_migration ``` Then go to http://yoursite.com/sitemap_settings where you should see the following settings page:  Just fill that in and then move to the widgets page:  Here i have a list of articles that are created and i want all of them added to the sitemap dynamically whenever an article is created or updated so i'll create an article widget. For full instructions check out the github page for the [sitemap plugin](https://github.com/queso/sitemap). 26 Feb 2011 http://rebelcolony.com/posts/rails-sitemap-plugin http://rebelcolony.com/posts/rails-sitemap-plugin One of the new HTML5 elements is section which should be used to separate and group together related content. Wait a minute? Isn't that the trusted div, well not really. The section element is designed specifically to group together related content whereas the div element is a more generic content container. ```html <section> <h1>All about HTML5</h1> <p>This is all about HTML and nothing else</p> </section> ``` Browsers won’t apply any default styling to the new elements. So, at the very least, you will want to declare that the new structural elements should force a line break: ```css section, article, header, footer, nav, aside, hgroup { display: block; } ``` That’s enough for most browsers. Internet Explorer has special needs. It resolutely refuses to recognize the new elements. JavaScript genius [Remy Sharp](http://remysharp.com/) has written a handy little script that generates all of the new HTML5 elements. Load this script within a conditional comment so that it’s only served up to the needy Internet Explorer: ```html <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> ``` Now you can style the new elements to your heart’s content. 18 Jan 2011 http://rebelcolony.com/posts/html5-section-element http://rebelcolony.com/posts/html5-section-element Recently i have been getting into the new [Google Fonts API](http://code.google.com/webfonts), which is a collection of free, open source fonts anyone can use in their site designs for free. The Google Font API allows you to embed any of the new Google fonts on your website using CSS.A selection of fonts:  You just need to add a link to Google’s stylesheet in the head element of your page and then apply that font to your text element. The syntax looks like this: ``` <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> ``` So let's say that we want our h1 element to be styled with the "Irish Growler" font. First we get the link to the font and put it in our head element: ``` <link href='http://fonts.googleapis.com/css?family=Irish+Growler' rel='stylesheet' type='text/css'> ``` Then add the style: ``` h1 { font-family: 'Irish Growler', arial, serif; } ``` For the full range of fonts and all the documentation checkout the [Google Fonts API](http://http://code.google.com/webfonts) 14 Jan 2011 http://rebelcolony.com/posts/google-web-fonts http://rebelcolony.com/posts/google-web-fonts The script tag is another place that can afford to shed some fat. It’s common practice to add a type attribute with a value of “text/javascript” to script elements: ```html <script type="text/javascript" src="file.js"></script> ``` Browsers don’t need that attribute. They will assume that the script is written in JavaScript, the most popular scripting language on the web (let’s be honest: the only scripting language on the web). The HTML5 version: ```html <script src="file.js"></script> ``` 30 May 2010 http://rebelcolony.com/posts/html5-javascript-link http://rebelcolony.com/posts/html5-javascript-link With HTML you can specify the character set using a meta element. Here is the declaration for a document written in HTML 4.01: ```html <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ``` And the much more memorable HTML5 version: ```html <meta charset="UTF-8"> ``` 25 Mar 2010 http://rebelcolony.com/posts/html5-character-set http://rebelcolony.com/posts/html5-character-set Want an introduction to the Ruby programming language? [Ruby] (http://www.ruby-lang.org) is a general purpose object-oriented programming language that originated in Japan during the mid-1990s and was initially developed and designed by [Yukihiro “Matz” Matsumoto](http://en.wikipedia.org/wiki/Yukihiro_Matsumoto). It’s traditional to write a “hello world!” program in any new computer language. In Ruby to make your computer say hello you would type: ```ruby puts "hello world!" ``` Your computer would output: ``` hello world! ``` The puts tells the computer to print out whatever comes next. In this case a string containing the letters hello world!. A string in Ruby is just a bunch of characters. The quote marks "" tell Ruby where the string starts and ends. A string is one of the Ruby basic types. All the basic Ruby types are numbers, strings, arrays, hashes, ranges, symbols and regular expressions. A string comes from the term – strung together, like stringing together letters to form words, sentences and paragraphs. 10 Dec 2009 http://rebelcolony.com/posts/learn-basic-ruby-strings http://rebelcolony.com/posts/learn-basic-ruby-strings To make a link open in a new browser window or tab add a class: ```html <a href="http://www.starwars.com" class="new_window">star wars</a> ``` Add the following jQuery ```javascript $(document).ready(function() { $("a.new_window").attr("target", "_blank"); }); ``` 1 Dec 2009 http://rebelcolony.com/posts/use-jquery-to-make-a-link-open-in-a-new-tab http://rebelcolony.com/posts/use-jquery-to-make-a-link-open-in-a-new-tab