<?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>Stofko Web Design &#187; Tutorial</title>
	<atom:link href="http://stofko.ca/tag/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://stofko.ca</link>
	<description></description>
	<lastBuildDate>Wed, 26 May 2010 12:02:39 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Wordpress Static Front Page</title>
		<link>http://stofko.ca/wordpress-static-front-page/</link>
		<comments>http://stofko.ca/wordpress-static-front-page/#comments</comments>
		<pubDate>Wed, 25 Mar 2009 14:08:35 +0000</pubDate>
		<dc:creator>Bev</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://stofko.ca/?p=186</guid>
		<description><![CDATA[How to choose a static page as the main landing page on a Wordpress website and make the blog a secondary page.]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-210" style="border: none; padding-right: 9px; margin-right: 2px;" src="http://stofko.ca/wp-content/uploads/2009/03/shiny-blog-icon2.jpg" alt="" width="105" height="105" />Many business owners today would like to incorporate a blog into their website. The Wordpress blogging platform is a simple to use platform with thousands of template designs, making it a popular choice. However, the Wordpress default configuration places the blog as the main landing page of the website. This tutorial will explain how to choose a static page as the main landing page and make the blog a secondary page.<span id="more-186"></span></p>
<p>According to the Worpress Codex, any page can be set as the front page simply by editing the settings. First you must create two pages &#8211; the html page you want to use as the main landing page (call it &#8220;Home&#8221;) and a blank blog page (call it &#8220;Blog&#8221;).</p>
<p>In the Wordpress Admin interface select Settings &gt; Reading. Look for the section titled &#8220;Front page displays&#8221; and select &#8220;A static page (select below)&#8221;. In the drop-down box for front page choose your &#8220;Home&#8221; page. In the drop-down list for Posts page choose your &#8220;Blog&#8221; page.</p>
<p>You will now have a new static front page and a blog page.</p>
<p style="text-align: justify;">Finally, depending on your theme, you might have 2 navigation links to the home page. You can remove the duplicate easily by first determining the page number used for the static front page.</p>
<p style="padding-left: 30px;"><small>(From Wordpress.com: You can determine the page number by going to Pages-&gt;Edit and hovering over the title of the page. The status bar of your browser will display a URL with a numeric ID at the end. This is the page ID.)</small></p>
<p style="text-align: justify;">Determine the file where the navigation is displayed (it may be header.php) and find the wp_list_pages statement. Exclude the static front page:</p>
<p style="text-align: justify;"><code>wp_list_pages('exclude=7');</code></p>
<p style="text-align: justify;">Now, if you want your home page to be more dynamic you can create a custom page template for the home page. To learn more about using page templates, visit the Codex <a href="http://codex.wordpress.org/Pages">here</a>.</p>
<p>This should be all you need to do to create a static front page and a secondary blog page. This change allows the Wordpress platform to be used on most websites, with the blogging secondary to the main website content.</p>
]]></content:encoded>
			<wfw:commentRss>http://stofko.ca/wordpress-static-front-page/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create a Vector Halftone Effect using CorelDraw 11</title>
		<link>http://stofko.ca/how-to-create-a-vector-halftone-effect-using-coreldraw/</link>
		<comments>http://stofko.ca/how-to-create-a-vector-halftone-effect-using-coreldraw/#comments</comments>
		<pubDate>Thu, 08 Jan 2009 18:59:43 +0000</pubDate>
		<dc:creator>Bev</dc:creator>
				<category><![CDATA[Illustration]]></category>
		<category><![CDATA[CorelDraw]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://stofko.ca/?p=94</guid>
		<description><![CDATA[This tutorial will show you how to create a vector halftone effect using CorelDraw. ]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="size-medium wp-image-129 alignleft" style="border:none;padding-right:8px;" src="http://stofko.ca/wp-content/uploads/2009/01/example9.gif" alt="" width="84" height="83" />This tutorial will show you how to create a vector halftone effect using CorelDraw. The resulting image is a square, but the techniques used here could be applied to a wide variety of shapes.</p>
<p style="text-align: left;"> </p>
<p style="text-align: left;"><span id="more-94"></span></p>
<p><strong>Step 1 &#8211; Create a custom artistic media brush</strong></p>
<p>Create a small circle, 100px by 100px, with black fill and no outline.<em> (Hint &#8211; hold the CTRL key and use the ellipse tool to create a perfect circle).</em></p>
<p>Select the artistic media tool and select the sprayer. Select &#8220;New Spraylist&#8221; from the drop-down list. Click on your black circle then select &#8220;Add to spraylist&#8221;. The sprayer should be set to &#8220;sequentially&#8221; and the spacing should be slightly larger than the circle diameter &#8211; we will set it to .4&#8243; for this example.</p>
<p>You now have the spraylist needed to create the halftone circles.</p>
<p><strong>Step 2 &#8211; Create the object to be filled</strong></p>
<p style="text-align: left;">We will leave our original black dot as the center of our illustration (<em>select the dot and hit &#8220;p&#8221; to center to the page</em>). Stretch it larger to to 315px by 315px. We now create a large square that will define the outside boundary of the halftone object. Create this large square with no fill and with a hairline black outline, sized 2400px by 2400px, and centered on the page.<img class="aligncenter size-medium wp-image-121" src="http://stofko.ca/wp-content/uploads/2009/01/example11.gif" alt="" width="200" height="200" /></p>
<p style="text-align: center; "> </p>
<p style="text-align: left; "><strong>Step 3 &#8211; Apply the artistic media to the outer square</strong></p>
<p style="text-align: left; ">Select the square with the pick tool, then select the Artistic Media tool. Re-select the spraylist we created in step one. You should now see a square of circles.<img class="aligncenter size-medium wp-image-122" src="http://stofko.ca/wp-content/uploads/2009/01/example2.gif" alt="" width="200" height="200" /></p>
<p style="text-align: center; "> </p>
<p style="text-align: left; ">From the object manager select the square with the artistic media and break it apart. You will now have a group of individual circles. Delete the original square to get rid of the outline.</p>
<p style="text-align: left; ">You should now colour the outer circles 10% black. Select and ungroup the outer dots.<img class="aligncenter size-medium wp-image-123" src="http://stofko.ca/wp-content/uploads/2009/01/example3.gif" alt="" width="200" height="200" /></p>
<p style="text-align: center; "> </p>
<p style="text-align: left; "><strong>Step 4 &#8211; Blend</strong></p>
<p style="text-align: left; ">We start by making a horizontal blend line from the center dot to the two outsides. Drag a horizontal guideline down from the top ruler and center it on the middle of the center dot. Make sure the left and right small dots are lined up on the guideline (<em>enable &#8220;snap to guideline&#8221; , hold the ctrl key, and drag the outer dots up or down to the the guideline</em>).</p>
<p style="text-align: left; ">Now select the interactive blend tool, click the center black dot and drag the cursor to the left gray dot. When you release the cursor you are left with this:<img class="aligncenter size-medium wp-image-124" src="http://stofko.ca/wp-content/uploads/2009/01/example4.gif" alt="" width="200" height="200" /></p>
<p style="text-align: center; "> </p>
<p style="text-align: left; ">It&#8217;s pretty but not what we&#8217;re after! To get the halftone effect we must adjust the blend settings. Reduce the numer of steps down to 3:</p>
<p style="text-align: center; "><img class="aligncenter size-medium wp-image-125" src="http://stofko.ca/wp-content/uploads/2009/01/example5.gif" alt="" width="200" height="200" /></p>
<p style="text-align: left;">Select the blend group with the pick tool, break it apart and ungroup the dots. This will allow us to create vertical blends from each of these dots.</p>
<p style="text-align: left;">Next drag a vertical guideline from the left ruler and center it on the black center dot. Align the top and bottom gray dots on the guideline. Blend from the center dot to the top gray dot (using 3 steps), and then again from the center to the bottom gray dot. Your result should look like this:<img class="aligncenter size-medium wp-image-126" src="http://stofko.ca/wp-content/uploads/2009/01/example6.gif" alt="" width="200" height="200" />Move the vertical guideline to the left and center it on the large gray dot to the left. Snap the closest small gray dots to the guideline and blend to the top and bottom. <em>(Delete any excess small gray dots that are in the way)</em> Remember to set the number of steps to 3 each time.<img class="aligncenter size-medium wp-image-127" src="http://stofko.ca/wp-content/uploads/2009/01/example7.gif" alt="" width="200" height="200" />Repeat for the remaining 3 dots on the center horizontal line. Delete any excess outer gray dots when they get in your way. You will delete all of the vertical dots when you get to the smallest dot on the left side. Your final result should look like this:<img class="aligncenter size-medium wp-image-128" src="http://stofko.ca/wp-content/uploads/2009/01/example8.gif" alt="" width="200" height="200" />You can now delete all the outer dots on the right. Select all the rows and columns left of the center vertical row, copy, paste, and flip horizontally. You can now shift the pasted dots to the right to get the complete picture:<img class="aligncenter size-medium wp-image-129" src="http://stofko.ca/wp-content/uploads/2009/01/example9.gif" alt="" width="200" height="198" />If you want the resulting shape to be a circle, break apart the artisitic media, ungroup, and delete any dots from the outer edge of the image.</p>
<p style="text-align: left; "><strong>Step 6 &#8211; Play Around</strong></p>
<p style="text-align: left; ">This technique can be used with many different shapes to achieve a variety of effects. The blend tool has a lot of options &#8211; try cycling through colours, orient shapes in different directions, then blend.</p>
<p style="text-align: left; ">Here are some more examples of what can be accomplished.</p>
<p style="text-align: center;"><img class="size-medium wp-image-102 aligncenter" title="examples" src="http://stofko.ca/wp-content/uploads/2009/01/examples-300x153.jpg" alt="" width="300" height="153" /></p>
<p style="text-align: left; "> </p>
]]></content:encoded>
			<wfw:commentRss>http://stofko.ca/how-to-create-a-vector-halftone-effect-using-coreldraw/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>New Facebook Profile Boxes</title>
		<link>http://stofko.ca/new-facebook-profile-boxes/</link>
		<comments>http://stofko.ca/new-facebook-profile-boxes/#comments</comments>
		<pubDate>Fri, 17 Oct 2008 14:55:22 +0000</pubDate>
		<dc:creator>Bev</dc:creator>
				<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Profile box]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://stofko.ca/?p=4</guid>
		<description><![CDATA[This tutorial describes how to support the Facebook profile box on the user's Wall tab using the PHP library.]]></description>
			<content:encoded><![CDATA[<p>Facebook has fully launched its new profile, forcing application developers to revisit the coding of a profile box. Fortunately, without making any changes whatsoever, the old style profile boxes will appear successfully on the Boxes tab.</p>
<p>However, for those application developers who want to go one step further, here is a description of how to support the profile box on the user&#8217;s Wall tab using the PHP library.</p>
<p><span id="more-4"></span></p>
<h4>1. Client Library</h4>
<p>First, make sure you have the latest client library. Visit the the <a title="Facebook Client Library Wiki Page" href="http://wiki.developers.facebook.com/index.php/PHP" target="_blank">Facebook client library wiki page </a>for more information and a link to the download. Note that this library drops support for some old functions such as require_add, so if you haven&#8217;t kept your application up-to-date now is the time to do so. The PHP 5 version of the library contains the call you need. If you are using PHP 4 then you need to manually update the library call to look like this:</p>
<p class="codebox"><code>function profile_setFBML($markup, $uid = null, $profile=”, $profile_action=”, $mobile_profile=”, $profile_main=”) {<br />
return $this-&gt;call_method(’facebook.profile.setFBML’, array(’markup’ =&gt; $markup,<br />
‘uid’ =&gt; $uid,<br />
‘profile’ =&gt; $profile,<br />
‘profile_action’ =&gt; $profile_action,<br />
‘mobile_profile’ =&gt; $mobile_profile,<br />
‘profile_main’ =&gt; $profile_main));</code></p>
<h4>2. Reset FBML</h4>
<p>For the profile box to appear on the Wall tab you must load the <a href="http://wiki.developers.facebook.com/index.php/FBML">FBML </a>that will appear there. This is done using the same function that was used to load the old-style profile, only now there is a new parameter &#8220;profile_main&#8221;. In PHP, use the following code to load the profile boxes:</p>
<p class="codebox"><code>$fbml = "&lt;fb:wide&gt;This is a wide profile box on the Boxes tab.&lt;/fb:wide&gt;";<br />
$fbml .= "&lt;fb:narrow&gt;This is a narrow profile box on the Boxes tab.&lt;/fb:narrow&gt;";<br />
$fbml_main = "This is the Wall tab profile data";<br />
$result = $facebook-&gt;api_client-&gt;profile_setFBML(NULL, $user_id, $fbml, NULL, NULL, $fbml_main);<br />
echo "set FBML: result = ".var_export($result,true);<br />
</code></p>
<p>If your return code is NULL, all is well. If not, check the return codes documented on the <a href="http://wiki.developers.facebook.com/index.php/Profile.setFBML">wiki page</a>.</p>
<h4>3. Add to Profile Button</h4>
<p>If you want to make it really easy for the user, program an &#8220;Add to Profile&#8221; button to appear on a canvas page. If the user has not yet added a profile box (on the Boxes or Wall tabs) and the FBML for profile_main was successfully loaded in step 2 then the button will appear. If there is already a profile box displayed, then the button will not appear. The code for the button is simple:</p>
<p class="codebox"><code>&lt;fb:add-section-button section="profile" /&gt;<br />
</code></p>
<p>Note this cannot appear within the dashboard.</p>
<p>That&#8217;s it! You should now have the ability to display a profile box on either the Wall tab or the Boxes tab.</p>
]]></content:encoded>
			<wfw:commentRss>http://stofko.ca/new-facebook-profile-boxes/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
	</channel>
</rss>
