<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>OH! Media Blog &#187; Tutorials</title>
	<atom:link href="http://www.ohmedia.ca/blog/category/tutorials/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ohmedia.ca/blog</link>
	<description>Official blog of the company OH! Media</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:34:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Using Picnik to Resize Images Online</title>
		<link>http://www.ohmedia.ca/blog/resizing-images-online/</link>
		<comments>http://www.ohmedia.ca/blog/resizing-images-online/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 03:51:09 +0000</pubDate>
		<dc:creator>Trent</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.ohmedia.ca/blog/?p=653</guid>
		<description><![CDATA[We have had several clients ask us how to properly resize and optimize images for use on their websites. In most cases, our clients do not have access to costly software like Photoshop or Fireworks. Thank goodness for Picnik &#8211; www.picnik.com, an online system (just acquired by Google) that gives users the ability to edit [...]]]></description>
			<content:encoded><![CDATA[<p>We have had several clients ask us how to properly resize and optimize images for use on their websites. In most cases, our clients do not have access to costly software like Photoshop or Fireworks. Thank goodness for Picnik &#8211; <a href="http://www.picnik.com" target="_self">www.picnik.com</a>, an online system (just acquired by Google) that gives users the ability to edit digital photos and images in their browser, without having to purchase or download complicated software.  We&#8217;ve compiled detailed step by step instructions to help our clients (and anyone that might be interested) resize and optimize images so that they are suitable for the web.</p>
<p>Suitable web images should be:</p>
<ul>
<li>Small in file size, allowing for quick download</li>
<li>Correct dimensions (width and height) to fit properly on the page</li>
<li>JPG or GIF format</li>
</ul>
<h2>Step 1</h2>
<p>Visit <a href="http://www.picnik.com/" target="_self">www.picnik.com</a>.  It&#8217;s not mandatory to sign up for a free account to use the system, but we recommend it.  Becoming a member unlocks additional features like unlimited access to all your uploaded photos and edits.  Don&#8217;t worry, registration is quick and easy.</p>
<h2>Step 2</h2>
<p style="text-align: left;">Find and click the &#8220;upload photos&#8221; button.</p>
<p style="text-align: left;"><strong><a href="../wp-content/uploads/2010/03/upload.gif"></a><a href="http://www.ohmedia.ca/blog/wp-content/uploads/2010/03/upload.gif"><img class="alignnone size-full wp-image-655" title="upload" src="http://www.ohmedia.ca/blog/wp-content/uploads/2010/03/upload.gif" alt="" width="212" height="36" /></a><br />
</strong></p>
<h2>Step 3</h2>
<p style="text-align: left;">A window will pop up.  Browse through your computer and find the image you wish to resize and open it.  This will upload the image.</p>
<h2>Step 4</h2>
<p style="text-align: left;">Your chosen image will now be displayed in the editing window.  You will the notice the tool menu located above the image.  For the sake of keeping things simple, we are only interested in the clicking resize button.</p>
<p style="text-align: center;"><a href="http://www.ohmedia.ca/blog/wp-content/uploads/2010/03/resize.jpg"><img class="size-full wp-image-657 aligncenter" title="resize" src="http://www.ohmedia.ca/blog/wp-content/uploads/2010/03/resize.jpg" alt="" width="477" height="58" /></a></p>
<h2>Step 5</h2>
<p>Picnik does a great job of giving on-screen instructions.  Simply enter the desired dimensions (width or height) in pixels.  The software will ensure that the image stays proportional.  We recommend that you avoid making images larger with this software, doing so will reduce the quality of the image, making it muddy and blurry.</p>
<h2>Step 6</h2>
<p>Click the &#8220;Save and Share&#8221; button when satisfied.  Let the software do it&#8217;s magic, and when prompted click the &#8220;Save Image&#8221; button.</p>
<h2>Conclusion</h2>
<p>We have only scratched the surface of what you can accomplish with this amazing software.  As you spend more time using the software you will be come more comfortable with it&#8217;s features.  Explore and have fun!</p>
<p><strong><br />
</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.ohmedia.ca/blog/resizing-images-online/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Registering a Domain Name with GoDaddy</title>
		<link>http://www.ohmedia.ca/blog/registering-a-domain-name-with-godaddy/</link>
		<comments>http://www.ohmedia.ca/blog/registering-a-domain-name-with-godaddy/#comments</comments>
		<pubDate>Sat, 16 Jan 2010 18:55:52 +0000</pubDate>
		<dc:creator>Trent</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.ohmedia.ca/blog/?p=598</guid>
		<description><![CDATA[

When initially meeting with clients, one of the first questions we ask is &#8220;Do you have a domain name registered?&#8221;. More often than not they have. But for those clients that need help securing a domain, we&#8217;ve written a post with easy step by step instructions.
We recommend using GoDaddy&#8217;s services for a number of reasons.


They [...]]]></description>
			<content:encoded><![CDATA[<div>
<div>
<p>When initially meeting with clients, one of the first questions we ask is &#8220;Do you have a domain name registered?&#8221;. More often than not they have. But for those clients that need help securing a domain, we&#8217;ve written a post with easy step by step instructions.</p>
<p>We recommend using GoDaddy&#8217;s services for a number of reasons.</p>
<blockquote>
<ul>
<li id="jsArticleStep1">They allow you to register nearly every domain extension (.com, .ca, .net, .org, .tv etc)</li>
<li id="jsArticleStep1">They offer some of the cheapest domain registration prices on the web</li>
<li id="jsArticleStep1">Domains can be set to renew automatically every year</li>
<li id="jsArticleStep1">They provide 24/7 phone support</li>
</ul>
</blockquote>
<h2>Step 1</h2>
</div>
</div>
<ul>
<li>Visit the <a href="http://www.godaddy.com" target="_blank">http://www.godaddy.com</a> website.</li>
</ul>
<h2>Step 2</h2>
<ul>
<li>Displayed right on the front page you&#8217;ll see a section below the green menu you that says &#8220;Start your domain search here&#8230;&#8221;  Type your ideal domain name in the field and choose your desired domain extension (.com, .ca, ect).</li>
</ul>
<h2>Step 3</h2>
<ul>
<li>The next page will display whether the domain with your desired extension is available or not.</li>
<li>Ensure that the check box to the left of the requested domain is checked off and click the &#8220;add&#8221; button.  This will add the domain to your shopping cart.</li>
<li>It&#8217;s a good idea to register the most common domain extensions if possible.  This will prevent your competitor or cyber squatters from registering these domains.  For example when registering <em>yourcompany.com</em>, you should also consider registering <em>yourcompany.ca</em> and <em>yourcompany.net</em>.</li>
<li>If your desired domain is not available you may search for alternative domains using the &#8220;Search for another domain&#8221; feature.</li>
<li>Once you have added your requested domains to the shopping cart click the orange &#8220;Continue to registration&#8221; button.</li>
</ul>
<h2>Step 4</h2>
<ul>
<li>Once you&#8217;ve landed on the <strong>Domain Registration Information</strong> page you will be asked create a new account.  Simply complete the form and click the &#8220;Continue&#8221; button.</li>
<li>Please ensure that you provide a permanent email address as this is how Godaddy will contact you to supply receipts, password requests and renewal notices.</li>
</ul>
<h2>Step 5</h2>
<ul>
<li>Once you&#8217;ve landed on the <strong>Registration and Checkout Options</strong> page, scroll right down to the bottom to section <em>4 Select Checkout Preference. </em> Select the &#8220;No thanks. I&#8217;m ready to checkout&#8221; option.</li>
</ul>
<h2>Step 6</h2>
<ul>
<li>You&#8217;ve made it to the <strong>Secure Checkout</strong> page.   In step 1 you are able to review your shopping cart and choose the length of the domain registration.  We recommend that you register for at least 3 years.  This is the best way to ensure that you have control over your domain for an extended period of time.</li>
<li><strong>Optional (<em>but well worth it!</em>):</strong> You can save money by using a promotional code found on <a href="http://www.fatwallet.com/forums/hot-deals/725207" target="_blank">http://www.fatwallet.com/</a> Choose the applicable code, enter into the Promo field and click the orange &#8220;Apply Code&#8221; button.</li>
<li>Godaddy will automatically renew your domains as long as the credit card you have on file is valid.  It&#8217;s important to review all emails that Godaddy sends to ensure that your domain is being properly renewed.  If your credit card has recently expired then your domain name will not be renewed.</li>
<li>Next is the Payment Method section.  Select your preferred method.</li>
<li>Finally you made it to the Registration Agreement.  Read and agree to the Universal Terms of Service and Domain Registration Agreements.</li>
<li>Click the orange &#8220;Continue to Checkout&#8221; button.</li>
</ul>
<h2>Step 7</h2>
<ul>
<li>The Secure Payment page is straight forward.  Fill in all the fields and click the orange &#8220;Place Your Order&#8221; button.  You will be directed to a confirmation page and will receive a receipt for your purchase via email.  Your email will contain your Godaddy login ID and password.  Please print this email off and keep in a safe place.  We will will need this information to point your domain to our web server.</li>
<li>Congratulation, you are the proud owner of a domain (or domains)!</li>
</ul>
<p>As always, we are only an email or phone call away, so if you have any issues registering your domain we&#8217;d be be happy to help.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ohmedia.ca/blog/registering-a-domain-name-with-godaddy/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS: alternative to clearing floats</title>
		<link>http://www.ohmedia.ca/blog/css-alternative-to-clearing-floats/</link>
		<comments>http://www.ohmedia.ca/blog/css-alternative-to-clearing-floats/#comments</comments>
		<pubDate>Tue, 03 Feb 2009 22:27:33 +0000</pubDate>
		<dc:creator>Ryan</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.ohmedia.ca/blog/?p=151</guid>
		<description><![CDATA[The problem:
When floating multiple divs within a container you will come across a very strange occurance&#8230; The container (outlined in red for the example) will not continue to extend down around the elements which are inside of it. In this case the container has a background-color of #fff, which means that the area underneath the [...]]]></description>
			<content:encoded><![CDATA[<h2>The problem:</h2>
<p>When floating multiple divs within a container you will come across a very strange occurance&#8230; The container (outlined in red for the example) will not continue to extend down around the elements which are inside of it. In this case the container has a background-color of #fff, which means that the area underneath the right-column should also be white.</p>
<p><a href="http://www.ohmedia.ca/blog/wp-content/demos/2-04-09/demo_failing.html">View example.</a></p>
<p>To fix this problem the most common solution is using the <em>clear</em> property in an invisible div or br tag. This method works very well as long as you can keep track of your divs and you are properly clearing only what is needed. The problem that I have with this method is that it adds that little bit of extra markup to the code, when there is a much simpler and cleaner way to achieve the same result.</p>
<h2>The fix:</h2>
<p><code><br />
#wrapper {<br />
text-align:center;<br />
width:800px;<br />
margin:0 auto;<br />
<em>overflow:hidden;</em> /* Reminds the container to stretch */<br />
background:#fff;<br />
border:3px solid #f00;<br />
}<br />
</code></p>
<p><a href="http://www.ohmedia.ca/blog/wp-content/demos/2-04-09/demo_working.html">View example</a>.</p>
<p>By setting the <em>overflow</em> value to <em>hidden</em> you are basically giving the element a friendly reminder that it should be doing something. You can also use the <em>scroll</em> and <em>auto</em> property to achieve this effect. However, using scroll will result in having scrollbars whether you want them or not. I find this method a lot easier to implement and maintain than using clears, and it helps to keep your source nice and clean.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ohmedia.ca/blog/css-alternative-to-clearing-floats/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
