<?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>Lacquer Head &#187; Web Design</title>
	<atom:link href="http://lacquerhead.ca/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://lacquerhead.ca</link>
	<description>Meat and Computers</description>
	<lastBuildDate>Tue, 12 Jan 2010 21:40:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Control Your Windows Mobile Device With Your Mouse and Keyboard Through Your Computer</title>
		<link>http://lacquerhead.ca/2009/11/windows-mobile-mouse-keyboard-through-your-computer/</link>
		<comments>http://lacquerhead.ca/2009/11/windows-mobile-mouse-keyboard-through-your-computer/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 00:10:04 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[Computers]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=236</guid>
		<description><![CDATA[So I found this great fee application called My Mobiler to use with your windows mobile phone or PDA. You plug in your device through your USB, and the screen pops up on your monitor. You can use your mouse and keyboard to run programs. I find it useful to quickly and easily check site [...]]]></description>
			<content:encoded><![CDATA[<p>So I found this great fee application called My Mobiler to use with your windows mobile phone or PDA. You plug in your device through your USB, and the screen pops up on your monitor. You can use your mouse and keyboard to run programs. I find it useful to quickly and easily check site designs in IE mobile and Opera Mobile.</p>
<p><a href="http://www.mymobiler.com/">http://www.mymobiler.com/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/11/windows-mobile-mouse-keyboard-through-your-computer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Getting Other Applications to Work with Wordpress Users</title>
		<link>http://lacquerhead.ca/2009/07/getting-other-applications-to-work-with-wordpress-users/</link>
		<comments>http://lacquerhead.ca/2009/07/getting-other-applications-to-work-with-wordpress-users/#comments</comments>
		<pubDate>Wed, 15 Jul 2009 19:59:46 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=175</guid>
		<description><![CDATA[Sometimes a wordpress plugin is not the proper solution for an complex application. You might want something to work alongside wordpress instead. One of the nice features of Worpress is the user managament. The Wordpress documentation for this is non-existant as far as I ca tell, so here&#8217;s how you can quickly have your software [...]]]></description>
			<content:encoded><![CDATA[<p>Sometimes a wordpress plugin is not the proper solution for an complex application. You might want something to work alongside wordpress instead. One of the nice features of Worpress is the user managament. The Wordpress documentation for this is non-existant as far as I ca tell, so here&#8217;s how you can quickly have your software find out if a user is logged in outside of Wordpress.<span id="more-175"></span></p>
<p>Wordpress stores the user&#8217;s login status in a cookie named &#8220;wordpress_logged_in_COOKIEHASH,&#8221; Where COOKIEHASH there is  an MD5 hash of the &#8216;Site URL&#8217; option. Line 421 of wp-settings.php:</p>
<p><code><br />
define('COOKIEHASH', md5(get_option('siteurl')));<br />
</code></p>
<p>So you can use that to check the cookie, or  you can copy it from an existing cookie on your machine, or generate it in your own cookie name. First, log yourself out of Wordpress, because we are going to be changing the logged in cookie name, and you won&#8217;t be able to log in or out with the old cookie name. Now we can define a new cookie name in the wp-config.php file by adding the following line somewhere in the file:</p>
<p><code>define('LOGGED_IN_COOKIE', 'my_cookie_name');</code></p>
<p>For Reference The default is defined in wp-settings.php on line 392 as:</p>
<p><code>define('LOGGED_IN_COOKIE', 'wordpress_logged_in_' . COOKIEHASH);</code></p>
<p>So now I&#8217;ll always know what the cookie name is, so I can extract the username from the cookie value.</p>
<p>The value contains the following info:</p>
<p>username|doubleHashedPassword</p>
<p>Now that we have a username, we can fetch user data, such as a user_id. Something like this should do the trick assuming that you have established your DB connection:</p>
<p><code><?php<br />
if (!empty($_COOKIE[my_cookie_name])) {</p>
<p>    // The user is logged in, so retrieve user data<br />
    $userArr=explode('|',$_COOKIE[my_cookie_name]);<br />
    $user_login=$userArr[0];</p>
<p>    $sql="SELECT ID FROM wp_users WHERE user_login LIKE '$user_login'";<br />
    $query=mysql_query($sql);<br />
    $resultArray=mysql_fetch_array($query);<br />
    $user_id=$resultArray[ID];</p>
<p>} else {</p>
<p>    // The user is not logged in so do something else</p>
<p>}<br />
?></code></p>
<p>That should work.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/07/getting-other-applications-to-work-with-wordpress-users/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Measuring A Web Site&#8217;s Success</title>
		<link>http://lacquerhead.ca/2009/06/measuring-a-web-sites-success/</link>
		<comments>http://lacquerhead.ca/2009/06/measuring-a-web-sites-success/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:54:07 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=42</guid>
		<description><![CDATA[Many graphic design magazines and websites give awards for outstanding web design. Rarely do these awards take usability into consideration. Graphic Design is very important factor in web design, but there are more considerations to be made when building a website. What is usability, and how does it factor in measuring a site's success?]]></description>
			<content:encoded><![CDATA[<blockquote><p><em>Here&#8217;s another article that&#8217;s pretty old, I don&#8217;t have a date on it but I think it&#8217;s about 7 years old. I&#8217;ve noticed that more and more sites focus more on ROI and less on looking cool these days, but there are still some good points here.</em></p></blockquote>
<p>Many graphic design magazines and websites give awards for outstanding web design. Rarely do these awards take usability into consideration. Graphic Design is very important factor in web design, but there are more considerations to be made when building a website. What is usability, and how does it factor in measuring a site&#8217;s success<span id="more-42"></span></p>
<p>Any item that you interact with has an interface that you use, and usability is a measure of how easy it is to use that interface. For example when you get into a new car, how easy is it to figure out how to start it. The same usability principle can be applied to a website: How fast can first time visitors find the information they need?</p>
<p>Of course there is more to it than that, so here are a few ways to rate these award-winning sites beyond their graphic design. First we need a goal to accomplish, like starting a car. Since every site has different goals, you may want to pick you goals depending on what industry the site is from. Regardless of the goals, it&#8217;s important to have them before you visit the site. The scoring methods are based on you having five suitable tasks for a site in that industry. A common goal may be to find a phone number. As you are trying to accomplish these goals rate the site on the following points using a scale between one and ten. The results will be different for everybody, and will only be accurate if you&#8217;ve never seen the site before.</p>
<ol>
<li><strong>Site location</strong> &#8211; How easy is it to find the site?</li>
<li><strong>Ease of learning</strong> &#8211; How fast can you learn to use the site sufficiently well to accomplish basic tasks?</li>
<li><strong>Efficiency of use</strong> &#8211; Once you have learned how to use the site, how fast can you accomplish tasks?</li>
<li><strong>Memorability</strong> &#8211; The next time you visit the site, do you have to start learning everything over again?</li>
<li><strong>Error frequency and severity</strong> &#8211; How often do you make a mistake while using the site? How easy is it to recover from these errors?</li>
<li><strong>Subjective satisfaction</strong> &#8211; How much did you like using the site? Was it informative? Was it fast?</li>
<li><strong>Graphic design</strong> &#8211; Does the site look professional and appropriate for the industry? Is it visually appealing?</li>
</ol>
<p>How did the site score out of a 70-point total? I have visited award-winning sites where I couldn&#8217;t figure out how to get past the first page. They scored 10 on the graphic design, but zeros everywhere else. If these sites followed basic usability principles when they were built, they would at least score 5 on everything.</p>
<p>When you are proceeding on a site construction project, consider usability first, then design. Graphic design should not be sacrificed, but limited to the realms of what is usable. Every site will have reasons to break usability principles, but weigh those reasons carefully. You might not have an award-winning site, but you&#8217;ll have happy users, and that is the true measure of a site&#8217;s success.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/measuring-a-web-sites-success/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Server Side, Making Your Life Easier: UPDATE</title>
		<link>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-update/</link>
		<comments>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-update/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:48:33 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=39</guid>
		<description><![CDATA[In the previous articles, I used a PHP shortcut to display variables. Just like this:
&#60;?=$variable?&#62;
That method, although very friendly and quick, is deprecated, so you should get used to doing this instead:
&#60;?php echo $variable; ?&#62;
I&#8217;ll keep you posted if I com up with anything else.
]]></description>
			<content:encoded><![CDATA[<p>In the previous articles, I used a PHP shortcut to display variables. Just like this:</p>
<p>&lt;?=$variable?&gt;</p>
<p>That method, although very friendly and quick, is deprecated, so you should get used to doing this instead:</p>
<p>&lt;?php echo $variable; ?&gt;</p>
<p>I&#8217;ll keep you posted if I com up with anything else.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Server Side, Making Your Life Easier: Part 3 &#8211; PHP Headers and Footers with Defaults</title>
		<link>http://lacquerhead.ca/2009/06/php-headers-and-footers-with-defaults/</link>
		<comments>http://lacquerhead.ca/2009/06/php-headers-and-footers-with-defaults/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:42:24 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=36</guid>
		<description><![CDATA[As I mentioned in my previous post, there are some old deprecated things here, I&#8217;ll update later.
You now know how to create and display variables with PHP. Here is a review of everything I’ve used so far.
How to break in and out of PHP:



&#60;?php


//PHP Code Goes Here


?&#62;



How to set a variable:



&#60;?php


$variable = &#34;Variable Value&#34;;


?&#62;



How to [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em>As I mentioned in my previous post, there are some old deprecated things here, I&#8217;ll update later.</em></p></blockquote>
<p>You now know how to create and display variables with PHP. Here is a review of everything I’ve used so far.</p>
<p>How to break in and out of PHP:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//PHP Code Goes Here</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
</ol>
</div>
<p>How to set a variable:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re0">$variable</span> = <span class="st0">&quot;Variable Value&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
</ol>
</div>
<p>How to quickly display a variable:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?</span>=<span class="re0">$variable</span>?&gt;</div>
</li>
</ol>
</div>
<p>Now we are going to use &#8220;if,&#8221; &#8220;else,&#8221; and &#8220;echo&#8221; to set default values for the title, and meta tags. There won’t be a step by step process for this one, I’m just gonna display the sample code for header.php. Everything else is done almost exactly the same as Part 2.<span id="more-36"></span></p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;html&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;head&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;title&gt;&lt;?php</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">if</span> <span class="br0">&#40;</span><span class="re0">$title</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2"><a href="http://www.php.net/echo"><span class="kw3">echo</span></a> <span class="st0">&quot;$title&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><a href="http://www.php.net/echo"><span class="kw3">echo</span></a> <span class="st0">&quot;Site Title &#8211; Tagline&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">?&gt;&lt;/title&gt;</div>
</li>
<li class="li2">
<div class="de2">&lt;meta name=<span class="st0">&quot;description&quot;</span> content=<span class="st0">&quot;&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">if ($description) {</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">echo &quot;</span><span class="re0">$description</span><span class="st0">&quot;;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">} else {</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">echo &quot;</span><span class="kw2">Default</span> META Description<span class="st0">&quot;;</span></div>
</li>
<li class="li2">
<div class="de2"><span class="st0">}</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">?&gt;&quot;</span>&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;meta name=<span class="st0">&quot;keywords&quot;</span> content=<span class="st0">&quot;&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">if ($keywords) {</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">echo &quot;</span><span class="re0">$keywords</span><span class="st0">&quot;;</span></div>
</li>
<li class="li2">
<div class="de2"><span class="st0">} else {</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">echo &quot;</span><span class="kw2">Default</span> META Keywords<span class="st0">&quot;;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">}</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">?&gt;&quot;</span>&gt;</div>
</li>
</ol>
</div>
<p>Now, if you want to use the default values, just remove the line that sets the variable from the content page. You can also comment out the line to add it back in later. The following example will only pass on a unique title to the header.</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re0">$title</span> = <span class="st0">&quot;Page Title Goes Here&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//$description = &quot;Page Description Goes Here &quot;;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//$keywords = &quot;Page Keywords Go Here &quot;;</span></div>
</li>
<li class="li2">
<div class="de2"><span class="kw1">include</span><span class="br0">&#40;</span><span class="st0">&#8216;header.php&#8217;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
</ol>
</div>
<p>Thats it, this will make your life easier. This should also give you a good start to using simple PHP. There are many more area’s of server side scripting you should explore. It will replace buggy, error prone client side scripting in many ways, such as; Browser Detects, Redirections, Cookies, Form Validation, and much more. If you are already familiar with JavaScript, PHP will be a breeze.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/php-headers-and-footers-with-defaults/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Server Side, Making Your Life Easier: Part 2 &#8211; PHP Headers and Footers</title>
		<link>http://lacquerhead.ca/2009/06/part-2-php-headers-and-footers/</link>
		<comments>http://lacquerhead.ca/2009/06/part-2-php-headers-and-footers/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:34:34 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=32</guid>
		<description><![CDATA[This is an older tutorial and contains deprecated PHP code. I&#8217;ll revisit this in the near future to elaborate.
PHP is great because not only will it allow you to insert files like SSIs, it allows you to easily pass variables on to them such as a page title (your server must support PHP for this [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em>This is an older tutorial and contains deprecated PHP code. I&#8217;ll revisit this in the near future to elaborate.</em></p></blockquote>
<p>PHP is great because not only will it allow you to insert files like SSIs, it allows you to easily pass variables on to them such as a page title (your server must support PHP for this to work). You don’t need to know anything about PHP to use this. This example will show how to do this and pass on individual page titles, descriptions and keywords.<span id="more-32"></span></p>
<p>1. Create a page with headers and footers like you would with server side includes. (see pt. 1 of this post)</p>
<p>I suggest you name the pages header.php, index.php, and footer.php</p>
<p>2. In your header file, replace your title and meta tags with the following:</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&lt;title&gt;&lt;?=<span class="re0">$title</span>?&gt;&lt;/title&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;meta name=<span class="st0">&quot;description&quot;</span> content=<span class="st0">&quot;&lt;?=$description?&gt;&quot;</span>&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;meta name=<span class="st0">&quot;keywords&quot;</span> content=<span class="st0">&quot;&lt;?=$keywords?&gt;&quot;</span>&gt;</div>
</li>
</ol>
</div>
<p>3. In the index page, put the following at the very top</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re0">$title</span> = <span class="st0">&quot;Page Title Goes Here&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="re0">$description</span> = <span class="st0">&quot;Page Description Goes Here &quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="re0">$keywords</span> = <span class="st0">&quot;Page Keywords Go Here &quot;</span>;</div>
</li>
<li class="li2">
<div class="de2"><span class="kw1">include</span><span class="br0">&#40;</span><span class="st0">&#8216;header.php&#8217;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
</ol>
</div>
<p>and put this at the bottom</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">&lt;?php</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">include</span><span class="br0">&#40;</span><span class="st0">&#8216;footer.php&#8217;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
</ol>
</div>
<p>4. Upload to the server and open index.php.</p>
<p>5. Create all of your other pages and use these same tags at the beginning and end, then if you need to change the site in a major way, just edit the header and footer files. This can all be done in a similar fashion in ASP, if anyone wants to now how, let me know and will post instructions.</p>
<p>Thats it, this will make your life easier. There are some drawbacks though. It is not always necessary to change these on every page (It is a good idea to change the title and meta description for every page. It makes your listings in the search engines much more attractive). In Pt. 3 I will show you how set default values so you don’t have to worry about managing keywords and descriptions for every page.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/part-2-php-headers-and-footers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Server Side, Making Your Life Easier: Part 1 &#8211; Server Side Includes</title>
		<link>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-part-1-server-side-includes/</link>
		<comments>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-part-1-server-side-includes/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:31:13 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=30</guid>
		<description><![CDATA[Originally posted on the Steel Dolphin Forum a long long time ago.

Many of you know how to use Server Side Includes, and PHP/ASP. I am going to go over a few uses of these that make your life easier. You do not need to already know how to use these though.
The first rule to making [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em>Originally posted on the <a href="http://www.steeldolphin.com/">Steel Dolphin</a> Forum a long long time ago.<br />
</em></p></blockquote>
<p>Many of you know how to use Server Side Includes, and PHP/ASP. I am going to go over a few uses of these that make your life easier. You do not need to already know how to use these though.</p>
<p>The first rule to making your life easier as a web designer is changing as few files as possible when you need to make a change. That is why we use a separate CSS and JavaScript file, right? This all can be applied along with one of the philosophies behind XML, keep style separate from content.</p>
<p>This is very easy to do with Server Side Includes. How? Here&#8217;s the steps. (Your web server must support Server Side Includes)</p>
<p><span id="more-30"></span>1. Create your main page for your site as you normally would.</p>
<p>2. Create three html files from that one file, a header, footer, and a file with all of the content (by content I mean the stuff that will change from page to page, like text). The header will contain everything from the first HTML tag to just before where the content begins. The footer will contain everything after the content to the closing HTML tag. And whats left is your content page.</p>
<p>I would name the pages header.html, index.shtml, and footer.html. Notice how the file extension of the index page is SHTML? This will tell the server to scan that page for includes before displaying it.</p>
<p>3. On the first line of index.shtml, insert the following tag,</p>
<p><tt>&lt;!--#include virtual="header.html" --&gt;</tt></p>
<p>and on the last line, insert the following,</p>
<p><tt>&lt;!--#include virtual="footer.html" --&gt;</tt></p>
<p>4. Upload to the server and open index.shtml.</p>
<p>5. Create all of your other pages and use these same tags at the beginning and end, then if you need to change the site in a major way, just edit the header and footer files. Be sure to save each file with the extension &#8220;shtml&#8221;</p>
<p>That’s it, this will make your life easier. There are drawbacks to this though, it will not be easy for you to change your page Titles, or other things usually found at the top of the HTML file. For this you need a server side scripting language like PHP. I will post Pt. 2 with PHP to make your life even easier in a few days.</p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/server-side-making-your-life-easier-part-1-server-side-includes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Importance of Proper HTML Structure and CSS</title>
		<link>http://lacquerhead.ca/2009/06/html-structure-and-css/</link>
		<comments>http://lacquerhead.ca/2009/06/html-structure-and-css/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 21:25:50 +0000</pubDate>
		<dc:creator>laqrhead</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://lacquerhead.ca/?p=24</guid>
		<description><![CDATA[The structure of your HTML is just as important as the visual structure. Properly implementing HTML structure will also make it easier to manage visual structure. Implementing HTML structure is easy to do whether you are hand coding or using WYSIWYG.]]></description>
			<content:encoded><![CDATA[<p>The structure of your HTML is just as important as the visual structure. Properly implementing HTML structure will also make it easier to manage visual structure. Implementing HTML structure is easy to do whether you are hand coding or using WYSIWYG.<span id="more-24"></span></p>
<blockquote><p><em>This is old, real old, a couple years old. I wrote it when I was instructing for my students.</em></p></blockquote>
<p>Many people use WYSIWYG software to design web sites. Although there is nothing wrong with this, it does tend to cause messy HTML. This is not usually caused by the software, but mostly by the improper use of it. When a designer sits down and visually designs a web site, it is the visual markup, or style that provides structure to the document. However, HTML provides tools outside of visual design to add structure to a document, and they are often overlooked. Using these tools for structure provides more usable documents, and makes the management of visual style much easier.</p>
<p>The first step is to separate style from structure and the easiest way to do this is to add structure, then style. Take the page and use heading, paragraph, and list tags to structure it. Here is an example of a page using the most common structural elements (<a href="http://ucit.ca/htmlcss/html_structure.html">html_structure.html</a>). Looking at the page in a browser you can see that the browser defines the style for each of these elements specified in the source. These elements could also be visually structured exactly the same, but you will notice that the HTML source is much harder to understand (<a href="http://ucit.ca/htmlcss/visual_structure.html">visual_structure.html</a>).  The file is also twice the size as its properly structured counterpart.</p>
<p>Once a page is properly structured, it is much easier to select and apply style. Most sites will use a sans-serif font that is much smaller than the default browser size, so let’s start there. It’s important to remember that styles declared for a tag will be passed on to children of that tag. The following page uses this to simplify each style being declared (<a href="http://ucit.ca/htmlcss/html_structure_css.html">visual_structure_css.html</a>). You’ll notice that by declaring the font-family for the BODY tag, all of the other tags contained within it will pick up these attributes. This file is still much smaller than the file without structure. You can also apply style to several tags at once by separating your selections with a comma.</p>
<pre>P, LI, H3 {
  property:value;
}</pre>
<p>Most pages have more than just basic content in them; they may have two or more columns of content with navigation etc. These will complicate your CSS but not too much when done properly. The easiest way to do this is by assigning class names to the outermost element possible and contextual selectors in your CSS. For example, if a TD contains navigation links, rather than use classes for each link, assign the TD a class name, or ID, and use that to select it. Notice that when using contextual selecting the tags are separated by a space, and are not separated with commas.</p>
<pre>TD.navigation A {
  property:value;
}</pre>
<p>Here is an example of a page using this type of selection (<a href="http://ucit.ca/htmlcss/table_layout.html">table_layout.html</a>). Notice that the CSS is in a separate document. This can be re-used on all of your pages.</p>
<p>To further simplify the page, DIVs can be used for the layout instead of tables. This has less backwards compatibility, but is the preferred method (<a href="http://ucit.ca/htmlcss/div_layout.html">div_layout.html</a>). The contextual selecting in this page works with the DIV ID attribute rather than a class name. Since ID’s must be unique for each element it is not necessary to specify the tag in the CSS selector, only the ID.</p>
<pre>#navigation A {
  property:value;
}</pre>
<p>This resulting page has a good structure visually as well as in the source. Also notice that the order of the DIVs can be changed. In this instance, the content has been placed first, because it is the most important part of the page. This is important for search engine spiders and screen readers for people with visual disabilities. The page also includes a style sheet for print, which will hide the navigation elements and change the font from sans-serif to serif. It reformats the page without having to completely redesign it for print.</p>
<p>More information on CSS can be found at the following sites:</p>
<p><a href="http://www.useit.com/alertbox/9707a.html">Effective use of style sheets (useit.com)</a></p>
<p><a href="http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/">Webmonkey Stylesheets Guide</a></p>
<p><a href="http://www.w3.org/Style/CSS/">W3C CSS Home Page</a></p>
<p>The structure of your HTML is just as important as the visual structure. Properly implementing HTML structure will also make it easier to manage visual structure. Implementing HTML structure is easy to do whether you are hand coding or using WYSIWYG.</p>
<h1>Files</h1>
<p><a href="http://ucit.ca/htmlcss/html_structure.html">html_structure.html</a></p>
<p><a href="http://ucit.ca/htmlcss/visual_structure.html">visual_structure.html</a></p>
<p><a href="http://ucit.ca/htmlcss/html_structure_css.html"></a></p>
<p><a href="http://ucit.ca/htmlcss/table_layout.html">table_layout.html</a></p>
<p><a href="http://ucit.ca/htmlcss/example.css">example.css</a></p>
<p><a href="http://ucit.ca/htmlcss/div_layout.html">div_layout.html</a></p>
<p><a href="http://ucit.ca/htmlcss/div-example.css">div-example.css</a></p>
<p><a href="http://ucit.ca/htmlcss/div-print-example.css">div-print-example.css</a></p>
]]></content:encoded>
			<wfw:commentRss>http://lacquerhead.ca/2009/06/html-structure-and-css/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
