Create A Nautical Buoy Nov 16 + 2 comments

written by: ryan coughlin

I have been seeing the circular buoys on various stock photo sites while I was trying to get some ideas on what to design, I finally tried making a stab at it and in the long run, it was not half bad. So lets get cracking, fire up Illustrator and set up a new document.

1. We are going to start by drawing a circle with the Eclipse Tool (l) and create an even circle by holding the Shift Key. Then copy and paste that shape on top by pressing CMD+C then CMD+F to paste in front, then change the top layer to white and shrink it a bit so it looks like the following image (RGB:240,70,35) – Drag this to create a swatch in your palette, it will make it easier to access later:

2. Now select both objects and go to the Pathfinder and select Minus Front from Shape Modes. This will make the large and inner circle one image.

3. Now that we have the outline of the shape that we need to make the sections that go around the floatie. We will do this by creating triangles and copying them four times. I made the color green for it will be easier once we lay it over the circle, we will change it later. Create a rectangle and then bring it each of the top left and right points to create:

4. Once you have that, we want to make four copies by clicking the shape and pressing ALT and drag it to create a copy of that shape. Similar to the image below. We want to create a Maltese Cross.

5. Now we need to make this one shape, we can achieve this by using the Pathfinder -> Add To Shape Area. Then Expand the selection. The four objects should now be joined as one.

6. Lets take the cross and place it over the circle. Make you adjust the size and scale it to what is appropriate, similar to:

7. Now lets hide those edges and wrap this tutorial up. Now we can start to change the color of the orange circle. Create this gradient.

Then apply the gradient above to the orange outer circle and set the cross to the orange we previously used (Remember we created a swatch for it!) Now you should have something like:

8. Now create a copy of the outer circle by pressing CMD+C and we are now going to use the Pathfinder to generate the sections of the floatie. Select both objects and go Pathfinder -> Intersect. Now paste the object in front by pressing CMD+F and send it to the back by pressing SHIFT+CMD+[.

9. Finally, we are getting there, one more quick step! Create a stroke on the outer cirlce, I used: 1PT Oval with 40% black as the color. Then lets create some gradients for the orange sections, the inner will be the orange we see now and the outer will be a tad lighter.

You are going to need to click inside and set the gradient for each. Then adjust the degrees for the gradient:

Top: 90
Left: -180
Bottom: -90
Right: 0

That should result in the following image:

Boom! There you have it, how to create a nautical buoy. You can build off this and work in rope and other knots, give it a shot. So what do you think? Have any questions? Post them. Enjoy

Illustrator

Understanding Browser specific CSS Opacity Properties Nov 13 + 2 comments

written by: ryan coughlin

There are various CSS opacity properties out there that allow us to adjust the transparency of an element on our websites, but the thing is amongst the various available properties, which ones apply for which browsers? There are several ways to adjust opacity for an element but each are browser specific.

The below are all of the same but, each work for a certain browser. Besides the last one which is the standard CSS opacity property.

/* Applies to IE5-7 */
filter:alpha(opacity=85);

/* Applies to IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* Applies to Mozilla and Firefox */
-moz-opacity:0.85;

/* Applies to Safari 1.1-1.3 */
-khtml-opacity: 0.85;

/* Standard CSS property */
opacity: 0.85;

Since current browsers do not adopt to the same standards, developers will use the numerous CSS properties to create an equal cross-browser opacity experience, by placing each of those properties within there CSS.

The opacity property is supported by Netscape 7.2+, Firefox, Safari 2+, Opera 9+. The values that this property can accept are: 0.0 – 1.0. The lower the value the more transparent the element is.

The filter:alpha(opacity) property can range anywhere from 0-100. And like the the property above, the lower the value the more transparent.

The -khtml-opacity property was built with Webkit and it is based on the KHTML engine and associated the -khtml prefix to the -opacity

The -moz-opacity property applies for older versions of Mozilla browsers.

9 Personal Web Design Inspiration Nov 9 + 2 comments

written by: ryan coughlin

There has been many websites that i have come across that have inspired me in some way, whether the person behind the design, the articles, design, or the creative edge of the site. I decided I would put together a list of all websites that I have found to inspire me in some way, hopefully they will do the same to you.

Komodo Media

From the first time I saw this site, I was drawn in for many reasons, it is very eye catchy and creative. You can tell just by the image below. The colors and how the whole website has a jungle theme. The tabs on the right provide an easy use or navigation and by far my favorite the “foliage o meter” that uses the jQuery UI slider, you can find this at the site below towards the middle of the page, you’ll see what it does. Another reason why it is inspired me is because Rogie the owner is very nice and open to talk to in the twitter world. The jungle theme that is used throughout the site inspired me to do something similar with my full site launch.

Smashing Magazine

Most of you I am sure have heard of this site and are subscribed via RSS feeds and if not, IT IS A MUST. Excellent articles and resources for both web and graphic designers. You can find just about any type of resource on that site. Make sure you keep this bookmarked for quick access.

Lee Munroe

Another great site for inspiration, great aritcles and posts. The layout is slick and professional. The wording throughout the site, is something that I also payed attention too, such as the small about text and the middle text in gold. I have chatted with him over e-mail and is very friendly. Provides a touch of blog, portfolio site, and great resources.

The Daily Inspired (use to be “Woork”)

This is another great resource that I recently came across this year and I think is fairly new. Started with posts about enchancing HTML forms and in to MooTools scripts with examples that are extremely useful. On top of that, serveral posts on great fonts to use, a must see! As well as Antonios location in Rome, got to love that! He also throws up great CSS layouts using Blogger. My favorite by far was the CNN edition he used.

iStock Photo

You are all probably thinking “what? why this site?” Well to be honest I think it is a great resource to search for objects you want to create in Fireworks, Illustrator, or Photoshop. I just type in whatever I need to look for and narrow it down to “Illustrations” only. If want to design a lighthouse and see what kinds are out there to grasp an idea, iStock Photo is an excellent resource for something like this. They have an extremely broad range of photos on there you can use for your own inspiration. Go ahead and give it a shot!

Yoast

I recently came across this site (about a week ago) and so far I love it! There is a ton of articles on SEO and WordPress that can help you optimize and increase SEO rankings. I have followed several of these articles on WordPress and they so far so good, they have helped me on my WordPress. Yes WordPress and SEO are the main focus of the site but it does not stop there, make sure to check out there tag cloud on the right sidebar when you visit.

Freelance Switch

Do you freelance? Perfect, make sure you check out this website and subscribe to their RSS feeds. They write articles on just about anything freelancing some of their articles include: How long should you be working a day? How to not lose a steady gig, How to spot a dud client and get out when you can, to just name a few, but this is an excellent source for freelancers.

jQuery UI

We all have heard of the Javascript framework jQuery and how they have their UI, which is amazing, and recently updated every aspect of the UI with a full new website. These UI components can be used throughout a website and are full customizable with creating your own theme to match the aesthetic of the website you are working with. They have components such as drag and drag, dialog, color picker, date picker, and much more!

Vectips

An amazing resource for inspiration and quick tips for Illustrator, they provide vector packs, tutorials, articles, and quick Illustrator tips. I am fairly new at Illustrator and when I was starting to learn this site played a huge role in learning the powerfull application. If you design in Illustrator make sure to check this out.

And there you have it, the list of 9 websites that have inspired me in someway with my web and graphic design. If you have any others that helped you out, leave a comment and ill add them to the list for others to see! And you are going to ask why 9? I honestly have no idea

So what do you think? Did you like it? Others you would add? If you did like it make sure to share and bookmark. Any questions? E-mail me.

Using images With Hidden Text For SEO Nov 9 + 2 comments

written by: ryan coughlin

Many of us, love to come up with images for our websites with a neat font that we want to use, but when we create an image with information on it, spiders can not render and index that information, therefore loss of effectiveness of the SEO on your website. Regardless what is on the image there is a way to work with the browser to try to help the spider index the text still and keep your SEO rank in high places. Nothing is ever absolute with SEO but this is a technique that you can approach and try out. This approach enables you to describe the text in your image using the < h1 > tag without using display:none;

Sometimes people want to use:

h1{display:none;}

As a style, but you need to keep in mind that screen readers for the blind do not pick up text that has the property set to display:none;. The code for this technique is as follows:

h1 {
  width: 100px; /* width of image */
  height: 0;
  overflow: hidden;
  padding-top: 100px; /* height of image here */
  background: url('your-image-path-here.gif') no-repeat
}

Then inside your HTML you could have something like:

Here is the text that describes my image that is used as the background image to this

Well you are probably thinking “well how does this work?” It is actually quite simple. The images will display within the element because you are setting the padding to the height of the image. Note, that the height is set to “0″ and overflow to hidden.

Using this technique you effectively hide text without turning off the display of the text.

So what do you think of this? Remember if you like this, bookmark this!

Write Your Own? Nov 8 + 2 comments

written by: ryan coughlin

I was thinking about this last night and thought I would try it out. If anyone is interested in writing an aritcle or tutorial here at ryancoughlin.com get a hold of me through email or the contact page. I will register you here and you will recieve full credit, with a short description including your website. Let me know what you think and again if you’re interested, contact me.

Using the jQuery UI Slider Nov 4 + 2 comments

written by: ryan coughlin

Since I started working with jQuery and the UI. I have always wanted to work with the UI Slider. I always tried playing with it but I never got it execute an operation on slide. I created a slider to change the opacity of my background on my older temp site here at ryancoughlin.com.

UPDATE: Edit changes to the code with available demo below.javascript:;

UPDATE (9/16/09): Created a new jQuery UI Slider example, check it out.

The man behind helping me with the UI Slider can be found here and his screen cast, which was a huge help.

Check out the jQuery UI Slider demo. A simple UI Slider example, that will change the opacity of an element on the page, you can implement it to just about anything you want.

Lets get started, if you want to have it handy, check out the documentation and also make sure to look at the properties and what they control, think of ways that you can work with it to come up with new UI Slider implementations.

One excellent example of the UI slider is at Komodo Media and below is the slider that he created:

If you view the site and play around with the slider, you will see the foliage increase and decrease depending on the position of the slider. This led me to wanting to create something similar along these lines. Since day one with jQuery, I saw the slider and always wanted to be able to know how to work with it. But in this article, I can’t show you how the slider over at Komodo works, sorry maybe Rogie will!

Lets start with all the code below, this controls the slider and the bubble that will let us know the current value of the slider.

    $('#slider-bubble').hide();
	$('#slider-bar').slider({
		handle: '#slider-handle',
		min: 0,
		max: 100,
		start: function(e,ui){
		$('#slider-bubble').fadeIn('fast');
		},
		stop: function(e,ui){
		$('#slider-bubble').fadeOut('fast');
		},
		slide: function(e,ui){
		$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
		//mypos = $('#slider-handle').position().left + 2;  //grab position of slider dot + 2
		var mypos = $('#slider-bar').slider("value");
		$('#slider-bubble').css('left', mypos).text(ui.value);
		$("#slider-handle").css('left', mypos);

		}
	});

Notice we have the following inside the slider function:

handle – the class name of the click able handle to slide left/right
min – sets the minimum value
max – sets the maximum value
start – execute a function once you move the slider
stop – executes a function once you stop moving the slider
slide – what should be going on as you slide the handle left/right

When we start to drag the the slider we want a bubble to appear to let us know what the current value of the UI Slider is at. We only want it to appear as we start to slide and disappear when we stop. So this line initially hides the bubble on page load:

$('#slider-bubble').hide();

The next part is fairly easy, it fades the bubble in on start and fades it out on stop:

start: function(e,ui){
     $('#slider-bubble').fadeIn('fast');
},
stop: function(e,ui){
     $('#slider-bubble').fadeOut('fast');
},

The guts of the UI Slider is what is up next to bat, the slide option that controls what is going to be changing as see slide left/right:

slide: function(e,ui){
	$('#box').css('-moz-opacity', ui.value/100.00).text(ui.value);
	var mypos = $('#slider-bar').slider("value");
	$('#slider-bubble').css('left', mypos).text(ui.value);
	$("#slider-handle").css('left', mypos);
}

Once we start to slide, it will update and change the value of the CSS property “-moz-opacity” and it will change the opacity of the “#panels-contents” element. For the slider, the value is stored in the function parameter “ui” so together with “ui.value” we can use this to update our opacity.

With this following bit of code the “.text(ui.value);” updates the value of that property with the current value of the slider.

The variable “mypos” works with the last line of the slide option to the bubble to print out the current value of the slider. Make sure that the bubble element is set to “position:absolute;” The CSS for my slider is below:

#panel-contents{position:relative;height:40px;}
#small-label{ background:url(images/small_label.gif) no-repeat; height:4px; width:17px; overflow:hidden;float:left; }
#large-label{ background:url(images/large_label.gif) no-repeat; height:18px; width:17px; overflow:hidden;float:left; }
#slider-bar{ background:url(images/slider.gif) no-repeat; height:4px; width:100px; position:relative; float:left;}
#slider-handle{ background:url(images/slider_handle.gif) no-repeat; height:12px; width:13px; overflow:hidden;position:absolute;z-index:1;}
#slider-bubble{ background:url(images/callout.gif) no-repeat; height:46px; width:38px; overflow:hidden; position:absolute; top:-50px;padding:8px 0 0 0;text-align:center;font-weight:bold;color:#202020; }
#box{position:absolute; left:40px;background-color:#202020;width:200px;height:200px;}

Hopefully this will clear up any of your problems or questions when using the jQuery UI Slider.

Easier than you thought?

jQuery

Validating with Rails Nov 4 + 2 comments

written by: ryan coughlin

Ruby on Rails is one of the more popular MVC frameworks out there along with .NET, Zend, and CakePHP. Every day more and more resources are being published regarding Ruby on Rails. One of the nice things about Ruby on Rails is that it makes easy to help validate forms within your rails application. If you want to check for the presence of text for a field it would be something like:

validates_presence_of :comment

That checks for the field name comment, like in the code snippet below. This will produce the input tag using rails.

<%= text_field "comment", "comment" %>

The other section to make it all run is the

<%= error_messages_for 'model_name' %>

Place this line of code at the top of your form, and replace “model_name” with the model name your application refers too. It tells the application to look at the validation rules you set up. Once you have those in place, you should not be able to submit the form with a blank input.

A few other predefined rules built in to Ruby on Rails are:

Field should not be empty

Code: validates_presence_of
Example: validates_presence_of :user_name, :password

Field should Numerical

Code: validates_numericality_of
Example: validates_numericality_of :value

Field should not be Unique

Code:validates_uniqueness_of
Example: validates_uniqueness_of :user_name

Field Need to be of size X

Code: validates_length_of
Example: validates_length_of :state_code, :is=>2

Field size Need to be of between X to Y

Code: validates_length_of
Example: validates_uniqueness_of :user_name

To learn more about validation and to read up on the rest of the Rails API, read this

Ruby on Rails

Use jQuery To Submit Form To PHP/MySQL Nov 4 + 2 comments

written by: ryan coughlin

Using jQuery to submit a form, is something you are seeing more and more of as jQuery’s popularity builds. When I first started reading about jQuery and Ajax all I wanted to do was learn how to submit a form using jQuery.

I was so confused and lost, seeing the code was so abstract to me. So in this tutorial, I want to show you how to use the jQuery framework to submit data through a form using jQuery to a PHP page that submits to a database.

We are going to take form data and submit it to a jQuery Ajax call then send that to a PHP page with the data. Check out a live example of this post.

YOU SHOULD HAVE AN IDEA OF

Some principles of PHP
Basic knowledge of JavaScript and/or jQuery framework
MySQL
XHTML to build the form

JQUERY FUNCTIONS

submit() – documentation
jQuery.ajax – documentation

HTML OUTLINE

<form id="submit" method="post">
<fieldset><legend>Enter Information</legend> <label for="fname">Client First Name:</label> <input id="fname" class="text" type="text" name="fname" size="20" /> <label for="lname">Client Last Name:</label> <input id="lname" class="text" type="text" name="lname" size="20" /> <button class="button positive"> <img src="../images/icons/tick.png" alt="" /> Add Client </button></fieldset>
</form>
<div class="success" style="display: none;">Client has been added.</div>

JQUERY TO COOK IT ALL

$(document).ready(function(){
	$("form#submit").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var fname     = $('#fname').attr('value');
	var lname     = $('#lname').attr('value');
		$.ajax({
			type: "POST",
			url: "ajax.php",
			data: "fname="+ fname +"&amp; lname="+ lname,
			success: function(){
				$('form#submit').hide(function(){$('div.success').fadeIn();});

			}
		});
	return false;
	});
});

The next section is the bulk of the code. jQuery makes it very nice and easy to create Ajax calls. As you see, we have type, url, data, and success. These are pretty self explanatory.

TYPE – Are you going to use POST or GET
URL – What is the URL you are sending the data to
DATA – The data that you are sending the the URL to be processed
SUCCESS – What should the function do after the call has been executed

Remember that all of these are explained at the jQuery page, you can find the documentation for the Ajax calls here. There is a slew of options you can run within this one jQuery.ajax() function.

The success part:

success: function(){
     $('form#submit').hide(function(){$('div.success').fadeIn();});
}

Once the form is successfully submitted, the form will hide and thanks to jQuery callbacks, we then show the success message.

THE BACKEND – AJAX.PHP

Below is what our ajax.php file will look like, this will carry out the submission. Save this as ajax.php.

<?php

	include ("../../inc/config.inc.php");

	// CLIENT INFORMATION
	$fname        = htmlspecialchars(trim($_POST['fname']));
	$lname        = htmlspecialchars(trim($_POST['lname']));

    $addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";
    mysql_query($addClient) or die(mysql_error());

?>

There you have it, a straight forward guide to to using jQuery, PHP, and a simple HTML form to submit a form. Hopefully this will be a help to users new to the jQuery/Ajax world! If you have any comments or questions get in touch with me.

jQuery

Create A Simple Vector Tree Nov 3 + 2 comments

written by: ryan coughlin

In this tutorial I will show you how to make a simple vector tree in Adobe Illustrator. Mainly using shapes and the pathfinder with some gradients, and wa la! You have a fully scalable tree in 8 simple steps.

1. Lets get started. First off, lets open up Illustrator and create a new document. Select the Eclipse Tool (m) and hold the SHIFT key and draw a circle. Fill it in with

#5E8523 or RGB(94,133,35). You should have something that looks like this:

2. Now that we have the circle, lets add some more to give it the shape of the tree. We are going to do this by holding the ALT key, and move each shape around to give it the shape of the tree, like in the image below.

HINT: Holding the ALT key creates a new shape each time you click and move it.

3. Now that we have the basic shape of the tree, we want to make each of those shapes in to one, and this can be done by using the Pathfinder. Under “Shape Modes” click the first one “Add to shape.” This will create one big shape. Once completed “Expand” the shape by clicking the button to the right of the Pathfinder palette.

4. Now that we have the tree as one shape we want to shrink it a bit to create the front layer of the tree, we can do this by simply pressing “CTRL+C/CMD+C” (copy) and then pasting in front using “CTRL+F/CMD+F” and now select the top layer and using the Transform Tool and making it slightly smaller like the image below. Once we have that we want to fill it with a gradient. Refer to the image below and color codes are in RGB and angle is “-142.6″.

5. Ah…finally! We are starting to see the shape of the tree appear. Good. Now lets work on the base of the tree. Select the “Rectangle Tool” (m) and create the base of the tree similar to what is shown in the image, after it is drawn go to “Object -> Arrange -> Send to Back” or the shortcut “SHIFT+CMD+[“ will send the base to the back. Like so:

6. Now lets add some color to the base of the tree, for this I am going to use a brown gradient. Refer to the image below for RGB values.

7. The last thing we really need is a shadow to give the tree a little perspective and to show that is has a place and is not floating around. First off, create an even circle by holding the “Shift” key. Once you have done that, go up to “Effect -> Blur -> Gaussian Blur” and use “3.0″ as the amount to put on the shape. Shrink it down by selecting the “Selection Tool” (v) to something like the image below:

8. Once you have shrunk the shadow down in to relative size to the tree, use the same method to send it to the back – “SHIFT+CMD+[“. And I decreased the opacity to “70%”. Your final product should look like below! Congratulations, those are the easy steps to creating a very simple vector tree using Adobe Illustrator.

You can also add some more small features to it and get a result like below. If you have any comments or question on this tutorial, leave a comment or send me an e-mail and I will get back to you. Enjoy!

Illustrator

Cracking down with Ruby on Rails Nov 3 + 2 comments

written by: ryan coughlin

So over the weekend I finally sat back down and got started with Ruby on Rails. I played with it a bit last winter, but it never caught on. Now im back at it and so far I love it. There is a ton to take in, but all in good time. I recently saw that Holman the creator of Good-Tutorials switched the platform over to Rails in the newest version of the site.

I have been designing/developing a client intranet where the client can:

Submit updates to webmaster (set priority, details, and due date)
Send messages
View current status of website (using in place editor)
View/download invoices

Those are just a few of the features and the webmasters on their end can:

Update the clients website status
Upload invoice
Send message to client(s)
Keep notes on the side
Dashboard (last login, open updates, total clients)
Manage client updates
View all clients and details (name, site url, etc.)

Currently the application is built using PHP/AJAX and I am using jQuery has the framework. I am going to put together an online demo. Very sleek with all forms being submitted via Ajax.

If anyone has any other ideas for the intranet, feel free to let me know.

My goal is to start to convert this over to Ruby on Rails, but I have alot of reading to do! So far the MVC (Model, View, Controller) architecture is starting to make sense to me. I want to put together a post on tutorials and resources that have helped me for Ruby on Rails for other upcoming developers.

Ranting

Quick SEO tips Oct 29 + 2 comments

written by: ryan coughlin

SEO (Search Engine Optimization) is a very important aspect of any website. You want the website to become visible to search engines for consumers to find and utilize your website. Below are some quick tips that you can do to improve your search engine visibility:

Google Analytics is a very strong and powerful tool used all over the world for SEO improvement. There have been books, documentation, seminars and classes based around GA. Find out where your users are coming from, what keywords, how long, the websites bounce rate and more.
The installation is very easy, Google will generate a code snippet for you, you copy/paste that code at the bottom of your page before the closing tag.

Google Webmaster Tools is also a great free resource to help Google index your website, you can manage sites and site maps using these tools. Another free and easy way to help Google index your website.

Geo Tags can be very important if you have your business localized, the tags for these include: geo.region, geo.position, geo.placename. Find your country subdivision code. To save you some time the, code for the United States is “US.” Examples of those geo tags would look like:

<meta name="geo.position" content="latitude; longitude">
<meta name="geo.placename" content="Place Name">
<meta name="geo.region" content="Country Subdivision Code">

Your standard meta tags can range from, copyright, keywords, description, and language declaration, those can look something like what we have below. Make sure not to get too carried away with meta tags because that can also hurt you by increasing file loading time, stick with the basics. Keep the spiders happy and they will help you with your rank. Remember also for the description meta tag keep it under 225 characters.

< meta name="robots" content="index, follow" />
<meta name="copyright" content="Copyright (c) 2007-2008 www.ryancoughlin.com" />
<meta name="author" content="Ryan Coughlin" />
<meta name="description" content="Professional web site development and graphic designer serving the Kennebunk, Maine and Burlington, Vermont and the surrounding areas - Specializing in XHTML/CSS/PHP/Javascript" />

The title tag, I have been reading other articles and searching for more information and I have found, put “what you do” instead of “who is doing it” first so an example could be: “Professional Web Site Design Development and Graphics by Ryan Coughlin” vs. ryan coughlin – web and graphic designer: the portfolio of

Remember that text on the page holds more weight with indexing than alt text does, so try to keep the text on your site in HTML versus using text within an image.

With that round up, you have a few small SEO tips that you can take in too affect to use within your website and future clients. I plan on writing some more on the geo tags, but go in to much more detail on there use.

Coroflot and New Design Oct 28 + 2 comments

written by: ryan coughlin

Just added some more work to my Coroflot.com portfolio and you can find it here. This site is awesome for organizing and displaying your design work to future employees. Still have more work to throw up there, buts its a work in progress like this site.

Trust me..i’m working on it! My final site is going along the lines of theme at my twitter account, a summery landscape. I will post a preview within the week.

Ranting

Read Newer »