Snipplr.com is like del.icio.us for people who write a lot of code. Whether you develop for Ruby or Django, hack WordPress or MovableType, or if you just write XHTML, you probably keep a “Code Diary” full of useful tricks, hacks and hints that you’ve used in past projects. Snipplr exists to let you share that code with other developers just like yourself. It’s become indispensable to my work flow since I found it!

We’re talking about Subversion, the powerful Version tracking system for programmers and how we can repurpose it for design workflow. This was covered by Chris Nagele a while back at ThinkVitamin but it’s a topic so new to the design community it deserves repeating.

The Scenario

Kathy runs a small design firm that is working with three clients. One client needs a website, print graphics and branding, another needs a Wordpress theme designed and the last needs a web application for Facebook. Kathy’s staff includes one designer, one web developer, one backend programmer and herself who does a little bit of everything. Without Subversion, I assure you making this happen (while entirely possible) will be a huge mess. The designer will ordinarily turn in their work and let the web designer go at it. But wait that first client decides they don’t like the logo any more and they you to rebrand the entire site with a different idea. Oh and that Facebook App? It works but the developer uploads three different working versions of the file to your server before going off on a two week vacation with his girlfriend. He’s not answering the phone or email, but the client wants changes done immediately and Kathy can’t tell which of the three versions is the final! Plus, the whole office catches a virus that shuts down the server for a few hours and when it comes back up, you’ve lost some data. How much did you lose? Was everything backed up? Which versions of all your stuff was saved?

It happens more often than you think. Poor Kathy, she thought this would be the month she could take some much needed time off before that big conference in Miami.

The Pitch

Kathy shares her troubles with a friend, a software developer, who asks her if she’s ever heard of Subversion. He explains to her that with Subversion she can create a repository for her team and have her team start using it for version control. With the subversion server she’ll be able to give people different access levels, share files, leave notes, track versions, allow client access and see who’s working on what when. Kathy remembers the time her team tried this with first a shared intranet and then later their ftp server. It was still a mess because they would end up with so many different versions of a file no one knew what to use. Her friend reminds her that the missing element to all her previous attempts was ‘version control’. He tells her that the only versions of files that exist on the server are production and final versions. Divergent variations are treated as separate files entirely and the administrator can see how various projects are progressing.

Kathy now realizes the power of Subversion. It might just be the method for organizing the chaos of her studio that she’s been looking for.

Adopting the Subversion Workflow

This may not be the best example, but you get the point. Subversion makes it easy for many different people to track the development of projects by only serving you specific versions of files. It doesn’t matter if the file is a beta version of a web app or an early concept for a logo. The only version of a file that will ever be on the Subversion server is the latest one. If not, then someone’s not using it right and they need to be instructed.

The first thing Kathy learns from her programmer friend is to make Subversion the repository for ALL work coming in and out of her studio. You don’t want one person on your team going rogue and serving files to clients off his laptop because this will result in the same problem as before and that would be counter productive. Every new project her studio takes on now gets a folder with the names of everyone in the studio in it. People “checkout” the folders relevant to them and begin work. At the end of the workday (or week) they check the folders back in. Subversion tells her what’s changed, who changed it and when it was changed. She can also delegate specific projects to specific people who can easily deploy final projects since they can have access to the same data.

Kathy realizes this is also good a way to make sure clients only receive final versions of projects. She learns about Warehouse, a web client for accessing Subversion servers. She decides to purchase a plan that allows her to serve files to an unlimited amount of people. This allows her to track final project deployment and also see when (or if) clients are accessing files.

She also learns that she can either host her own Subversion server or she can can set it up with her web host. Alternatively applications like Beanstalk can be used to host Subversion. She now has a scalable management system that can be used for two people, five or five hundred whether they are in the office or anywhere in the world.

Great! It’s wonderful! Get to the point, how do I use it?

Wordpress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability as the makers proudly proclaim at wordpress.org. The keyword there being ‘publishing’ and the most important part of the Wordpress publishing engine is the element that allows content to be published online easily and automatically. This element is called the the loop.

While I can’t get into all the operational mechanics of how Wordpress works here, I can refer you to a page that does offer more in depth analysis (here). What is important to this tutorial is that the Wordpress theme we designed in Photoshop needs this PHP function (along with a few others) to correctly fetch content from the database. Let’s examine four critical functions:

<?php query_posts();?>
Requests the database of content, should be placed near the top of index.php
just after the request <?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
this is The Loop and it should be placed prior to
where you want your content to print

<?php the_content(''); ?>
Calls and prints the content of your blog according to the settings in the
admin section or php functions called before it.  This should be placed wherever
you want your blog posts to go within the <div> tags.

<?php endif; ?>
Closes the loop.

Using the code from Part 7 as an example:

<?php get_header(); ?>
<?php query_posts();?>

    </div>

	<div id="post">
	  <div class="entry">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="posts">
	<?php the_excerpt(''); ?>
     		</div>   

	<?php endif; ?>
	  </div>
     </div>

<?php get_footer(); ?>

You may notice that the <div> tags with id and class=”posts”elements. These are styling anything they contain. My id=”post” is printing my photoshoped content area. The area with id=”class” is formating how my content will be formated. Do I want to justify text? Do I want to use a text-transform on the first letter? Change the color of text? All those types of styles should be applied to this class to be passed on to the text inside the container.

These three lines alone are essentially all you need for index.php in your theme. However, you’ll notice that we’re missing a few important items. We need to call and style the posts name, permalink, and meta data individually. This means we need to add the following:

<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
Requests the post tile and links to it. Place this before the post content.

<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?>
<?php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?>
Requests various types of information related to the post.  Place this just after the previous line.

<?php the_category(', ') ?> <?php the_tags('| Tags: ', ', ', ''); ?>
<?php edit_post_link('| Edit', '', ''); ?></p>
This calls the footer meta information for each individual post.
Place this after the content but before you close the loop.

After placing these codes my index.php looks something like this:

<?php get_header(); ?>
<?php query_posts("showposts=2");?>

	<div id="post">
	<div class="entry">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   	<span class="postname"><a href="<?php the_permalink() ?>"><?php
 the_title(); ?></a></span>

    	<p class="postinfo">

		<?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> <?
php comments_popup_link('| No Comments', '| 1 Comment;', '| % Comments;'); ?></p>

	<div class="posts">
    		<?php the_content(''); ?>
         	<p class="postinfo">Posted in <?php the_category(', ') ?> <?php
 the_tags('| Tags: ', ', ', ''); ?> <?php edit_post_link('| Edit', '', ''); ?>
</p>

     	</div>   

		<?php endif; ?>
	</div>
	</div>

    		<?php get_footer(); ?>

In Part 9 we’ll be discussing how to correctly markup header.php, footer.php and footer.php and in Part 10 we’ll create the other pages Wordpress needs.

Part 1 - “Tools For The Task” and “Preparation”
Part 2 - “Layout And Structure” and “Designing Wordpress Themes in Photoshop”
Part 3 - “Photoshop to XHTML in 24 Hours”
Part 4 - “Cleaning Up Your XHTML”
Part 5 - “Preloading Images with Javascript and CSS”
Part 6 - “Marking Up is Hard to Do” and “The Anatomy of a Wordpress Theme”

• First we’ll duplicate index.html and rename the copy index.php. We’re only keeping the original .html file for reference to make sure that the finished PHP operates and looks the same.
• Let’s open index.php in our text editor. Right now it’s just a .html renamed .php. Our job is to make make it true PHP.
• Go ahead and create some more blank documents in your theme folder. Let’s call them header.php, footer.php and sidebar.php (if you have a side bar in your theme). We’re going to divide the HTML into the major sections and make each section it’s own PHP file to be marked up separately.
• Cut everything that you consider the header of your document. Make sure all tags are closed. Below you’ll find an example of my code which is really irrelevant, your own code will look and function differently based on your unique design. Still, for the sake of a working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Wonderful World of Web Design!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/preload.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
    <div class="description">The Blog Title</span></div>
	</div>
    <div id="header-nav"><div class="content">
    <a href="">ADVERTISE</a>  |
    <a href="">CONTACT</a>  |
    <a href="">RSS</a></div></div>
    <div id="spacer1"></div>
    <div id="upper-menu"><div class="navigation">
    <a href="">HOME</a>
    <a href="">NEWS</a>
    <a href="">BLOG</a>
    <a href="">HIRE ME</a>
    <a href="">PORTFOLIO</a>
    <a href="">QUESTIONS</a>
    <a href="">LINKS</a>
    <a href="">POPULAR</a>
    </div>

    </div>
	<div id="right-top"></div>

 <!-- End header.php -->

• Paste your header information in to header.php. Do the same for sidebar and your footer, cutting the code from index.php and pasting it in the corresponding file.
• I use comment tags like <!– End header.php –> to write notes that help me remember what’s going on in my code.
• If you do this correctly you’ll be left with a pretty sparse index.php document. All that should be left is some That’s good because now we’re going to tell index.php where to find all the information we just moved. We do this with PHP functions like so:

<?php get_phpdocumentname(); ?>

This get_ function does exactly what it sounds like it goes and fetches a requested document and displays the contents of that document in the area requested. My index.php document looked like this:

<?php get_header(); ?>

    </div>

	<div id="post">
	  <div class="entry">

		<div class="posts">
     		</div>   

	  </div>
	</div>

<?php get_footer(); ?>

• Ofcourse, for now we’ll leave the body <div>’s empty. This is where our content will eventually go.

  You’ll notice that I have no sidebar, that’s because I call for it in the header.php document instead. Why? Because browsers read code from top to bottom and I want page to request the header and side bars to first before requesting the body.

  In the next lesson we’ll start to analyze the PHP functions needed to request and display the dynamic content of a Wordpress theme.

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/php/designing-and-coding-a-wordpress-theme-from-scratch-part-7-153/feed/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/#comments Mon, 28 Apr 2008 21:23:17 +0000 JonGos http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/ You’ve gone from Photoshop PSD to slices to XHTML using Parts 1, 2, and 3 but if the end result is a Wordpress theme the majority of the work still has to be done. First of all it’s important to understand one bit of the operational mechanics of Wordpress. Wordpress looks for certain information the header of a file called style.css, this is how it can tell themes apart. Here’s a better explanation from Codex:

  In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.

  Thus, we need to separate our inline CSS and put it in a separate file called style.css

  Cleaning up Your XHTML

  Let’s start by creating a blank document called style.css in the same directory as your HTML file. Open the CSS file and add the following information:

  /*
  Theme Name: your-themes-name
  Theme URI: the-theme's-homepage
  Description: a-brief-description
  Author: your-name
  Author URI: your-URI
  Template: use-this-to-define-a-parent-theme--optional
  Version: a-number-optional
  
  General comments/License Statement if any.
  */

  like so

  

  Now let’s open the HTML file the Photoshop created for us which should look something like this.
  The inline document is essentially divided for us already because everything between the <style> and </style> tags is going to be cut out of our html document and pasted into the CSS document just after the heading we just added. Let’s do that now, copy the style data out of the HTML document and into the CSS document and make sure that you close the tags once you’ve done so.

  The resulting HTML file should now look like this:

  

  and the CSS file like this:

  

  Got it? Now lets do some major cleaning. Now that we’ve removed the style from our HTML we need to add it back. We’re going to replace the empty <style> tags with the following line:

  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

  This line is telling our document some very useful information:

  1. rel - the relationship of the linked document to the current document
  2. href - the url to the linked document
  3. type - the MIME (Multipurpose Internet Mail Extension) type of the target URL
  4. media - denotes on which device the document is meant to be displayed

  or the translation for humans: “Hello, the text file that lives at this URL is a stylesheet that was made for use with documents that would be displayed on computer monitors and screens.”

  We have to do this because we’ve taken out the style information but since we still want to style our HTML document we have to tell it where the style information now lives. Next we want to empty all our <div> tags.

  Since all our our photoshop images are essentially background images any line from our HTML document that looks like this:

     <div id="aqua-01_">
  	<img id="yourfilename_01" src="yourfilename_01.png" width="549"
                    height="126" alt="" />
     </div>
  

  Should be changed to look like this:

  	<div id="aqua-01_">
  	</div>
  

  But only when you change the corresponding ID container the CSS document to look like this:

  	#aqua-01_ {
  	position:absolute;
  	left:0px;
  	top:0px;
  	width:549px;
  	height:126px;
  	background:url(images/aqua_01.png);
  	}
  

  What we’ve done is taken the image out of the <div> container in our HTML document and placed in the corresponding ID container in CSS. This is important because now we can put other things like text or other images into the HTML files <div> container. This will also allow our page to structure itself properly even if a few images are slow to load.

  Finally we want to take anything that is an image and place it in a folder called “img” or “images”. If you look at the code above I’m telling the CSS to look for image files in a folder called “images”. We want to do this for organizational purposes. Of course this is entirely optional but it’s good practice and somewhat of an organizational standard.

  Are you still confused?
  Download these files and examine them to see if you can figure out what I did to make the page render properly.

  In the next lesson we’re going learn how to optimize our page for speed using javascript. Sweating yet? Don’t worry we’re already a lot closer than when we started!

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/design/designing-and-coding-a-wordpress-theme-from-scratch-part-4-147/feed/ http://www.developertutorials.com/blog/web/webinale-2008-most-valuable-website-design-award-123/ http://www.developertutorials.com/blog/web/webinale-2008-most-valuable-website-design-award-123/#comments Sun, 20 Apr 2008 16:36:44 +0000 Omi Azad http://www.developertutorials.com/blog/web/webinale-2008-most-valuable-website-design-award-123/ Software & Support Verlag’s website Create or Die is a very popular informative web portal in Germany. They have arranged a valuable web design award program for the first time called “Webinale 2008.” So far 30 websites has been nominated for Webinale 2008 Most Valuable Website Design Award, under 3 different categories. The categories are 1) Most Valuable Business website, 2) Most Valuable Design Website, and 3) Most Valuable Development website. Winner from each category will get 5,000 Euros (+ some more extra benefits).

  There won’t be any Jury for selecting the winner. Only visitor of the nominated sites can come to Create or Die’s website and vote for their chosen site. Based on the online votes, on 27 May 2008 the award will be given.

  Still anyone can nominate their site by going here (oops! The language is not English, try Google Translator ).

  You can find out the nominees and vote for them by going here.

  Del.icio.us

  Digg This

  Stumble
  ]]> http://www.developertutorials.com/blog/web/webinale-2008-most-valuable-website-design-award-123/feed/