We need to create our templates in a special format, but it can be edited in any HTML editor. If you want Dreamweaver to recognize the .ss file extension as HTML you need to follow these instructions.

If putting together the HTML is not really your thing, I would suggest heading over to SmashingMagazine’s list of free HTML templates.

Also, I am not posting my CSS files. You can take this raw HTML and use CSS to do your own layout (or you can even just use the loops in the .SS file and use different HTML markup).

The .ss file is basically just an HTML file. There is one .ss file that holds the header and footer, and then various other files that handle the middle of the page. You can find better explanations of the templating language here.

We need to create only one page-specific template – the PortfolioHolder.ss template. We do not need a PortfolioPage template, as we are displaying all portfolio items on one page.

The PortfolioHolder.ss template is as follows:

<div class="hr grid_12 clearfix">&nbsp;</div>

		<!-- Catch Line and Link -->
			<h2 class="grid_12 caption clearfix">My <span>portfolio</span> is pretty darn awesome, don't you think?</h2>

		<div class="pr grid_12 clearfix">&nbsp;</div>
        <% control Children %>
        	<div class="grid_3 textright" >
				<span class="meta">$NavSubTitle</span>
				<h4 class="title ">$Title</h4>
				<div class="hr clearfix dotted">&nbsp;</div>
				<p>$Content</p>
			</div>
            <div class="grid_9">
				<% control PortfolioProjects %>
				<a class="portfolio_item float thickbox" href="$Fullsize.URL" title="$Caption">
				<em>$Title</em>
                <img src="$Thumbnail.URL" />
				</a>
				<% end_control %> <!--end PortfolioProjects -->
            </div>
            <% end_control %><!--end Children-->
		</div>

What we are doing here is looping through the page’s children (the PortfolioPages), displaying their info and then looping through the dataobjects (PortfolioProjects) that we have associated with each of those pages. We use the $FullSize.URL method of retrieving the images, so that we can add alt text to our images.

This file goes in the Templates/Layout folder. I am leaving the rest of the theming to you, but now you know how to set up all the crucial bits for your portfolio.

The inspiration for this post is OrigninalMoxie. It is my personal portfolio, and I built it in SilverStripe in about half the time it would have taken me in WordPress – and it is only the third SilverStripe site that I have built. Now, I did get help from their community when building this site, but that is quite OK. I am going to pass their insights on to you.

What first needs to happen is you need to install SilverStripe. It is almost as easy to install as WordPress, but it actually requires a few extras.

To be able to run SilverStripe, you need to have PHP5 enabled on your server. And, you might need a little bit of patience.

First, download SilverStripe and upload it to your webhost. Navigate to yoursite.com and follow the install directions. For the record I am pretty sure that it always says that it cannot determine if Mod_Rewrite is enabled. (At least on MediaTemple).

Once you have your shiny new installation of SilverStripe up and running, it is time for the fun stuff…writing the PHP functions that make the site work. This is the beauty of SilverStripe – the ability to write custom data & page types with a few lines of code.

You will also need to install the Dataobjectmanager and SWFupload modules. To install, simply download them and upload them into your main directory and run yoursite.com/dev/build. You will need to rename them to dataobject_manager and swfupload before running the dev/build.

Now that those are installed, we can move on to building the site.  (I am also assuming that you have written your HTML/CSS and that your site is designed). I find it is always best to write the HTML/CSS before delving into the PHP. If it doesn’t work when the page is static, it is definitely not going to work once you start messing around with the theme.

Time for the PHP! (For this example, I am assuming that you have only one page for your portfolio, but that your work is divided into multiple categories)

We start by determining how we are going to display our data. In this example we want to break down our work into categories. But, the beauty of this is that we don’t have to go writing data types for each category. We are going to create the following files:

• PortfolioProject.php
• PortfolioPage.php
• PortfolioHolder.php

PortfolioProject is not a page, it is a dataobject, and it is the most specific of our files. This file creates the live entry for each portfolio piece that appears on your site. PortfolioPage is essentially the category. This means that if you ever want to change your portfolio so that pieces for each category are on their own page, you can. PortfolioHolder is the page that will display the content from all of its children (the portfolio pages).

Confused yet?

Let’s start by creating the PortfolioProject.php file.

<?php
class PortfolioProject extends DataObject
{
static $db = array (
'Title' => 'Text',
'Caption' => 'Text'
);
static $has_one = array (
'PortfolioPage' => 'PortfolioPage',
'Thumbnail' => 'Image',
'FullSize' => 'Image'
);

static $summary_fields = array (
'Title' => 'Title',
'Caption' => 'Caption'
);

public function getCMSFields()
{
return new FieldSet(
new TextField('Title'),
new TextareaField('Caption'),
new ImageField('Thumbnail'),
new ImageField('FullSize','Full size image')
);
}
}
?>

We just created a custom dataobject. Pretty cool, eh? We also told the system what fields we need to be able to edit on the front end. Copy your file to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Now the PortfolioPage (or category):

<?php
class PortfolioPage extends Page
{
static $has_many = array (
'PortfolioProjects' => 'PortfolioProject',
);

public function getCMSFields() {
$f = parent::getCMSFields();
$f->addFieldToTab("Root.Content.Portfolio Projects", new ImageDataObjectManager($this,'PortfolioProjects','PortfolioProject','Thumbnail', 'Category'));
return $f;
}
}

class PortfolioPage_Controller extends Page_Controller
{
}
?>

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

And finally the Portfolio Holder. This page is going to aggregate the information from its child pages.

<?php
class PortfolioHolder extends Page
{
static $allowed_children = array(
	'PortfolioPage'
);
}

class PortfolioHolder_Controller extends Page_Controller
{ 

}
?>

We have now written our “Holder” page.

Copy your file again to the mysite/code folder and go to yoursite.com/dev/build to create the page type in the database and make sure there are no errors.

Check back later this week for how to enter your data and then show it in a template.

Please don’t hate me for calling these folks out. There is nothing inherently bad about their sites. However, the layots & graphic elements are becoming all too common from one site to the next. These are all well put together examples, and to someone who doesn’t read 30 design blogs everyday, they look pretty darn good. But are they worthy of being showcased for their individuality? Probably not.

“3 bar” layout

Here are 5 sites with the “3 bar” layout – a top nav with a logo, a middle bar with headline content and main content below that. Usually the top nav is in a dark grey, the middle is a bright blue or green and the bottom is a light color.

http://www.solidshops.com/ – This layout has become ubiquitous with web apps. I could have filled 5 blog posts with web apps that use this style and layout. It looks clean and professional, but gets an F for layout originality.

http://niagakit.com/ – Same as above.

?http://www.proudcloud.net/

http://www.yaronschoen.com/ – At least the illustrations and breaking of the grid make up for the standard layout used.

http://www.nabru.co.uk/ – Again, it looks clean and professional and the elements add a more organic feel, but the layout is still too out-of-the-box for me.

Here is where to go to learn how to do this effect:

PSD Tuts+ – How to design a family of websites

And, here is how to do it right:

http://madebygiant.com/ – Giant Creative has taken this layot and made it their own simply by making their navigation “talk”. The bright colors contrast with the neutral background. The superb typography makes the design shine.

http://www.stanleysolutions.in/ – This site is broken into those same 3 visual sections, but the diagonal lines on the center text box as well as the lack of line dividing the nav and the feature area make this site own its design.

The pinking shear effect.

I like textured edges as much as the next guy. Heck, I probably like sewing and handmade edges more than the next guy. But it has become an over-used design trend. Evidence below:

https://epicevent.com.au/ – To me this site is overdone and Photoshop heavy. The overall effect is nice, but there is just one too many effects here.

http://www.stthomasartgallery.org/ – You cannot take pinking shears to wood. The zig-zag line makes little to no sense here. No background behind the nav and darker text would have made more sense.

Culinary Culture

http://www.culinaryculture.com/- This one has me on cute overload. This is another case where someone needed to turn off 30% of the Photoshop effects. It isn’t bad, but it isn’t terribly awesome either.

Here is where to go to learn how to do this effect:

Grafpedia – Design a unique WordPress theme

Grafpedia – Gritty website design

And here is how to do it right:

http://analog.coop/ – The effect is used sparingly. And tastefully. It adds to the design without being an over-powering element.

In conclusion, the web design world is slowly being over taken by what is “trendy”. And, yes, it can still be good design even if it is “trendy”. What you want is a site that acknowledges the trends in the industry and then takes them and makes them their own, instead of letting the trends take control.

That being said, all of the websites here are designed well (I don’t like ugly websites, and don’t want to call out people for having terrible skills, just doing what is “trendy” or “typical”), some are just more original than others. These sites were all put together by designers with tremendous skill. Some are just a little too attached to the bandwagon.

This is my new favorite content management system and I am really excited to start working with it. There are a few things about this CMS that make it truly different. First being that it runs on its own PHP framework called Sapphire. The framework is based on object oriented programming, while the CMS is based on the Model-View-Controller method. This means that all programming logic is separate from the markup and the display is separate from the other two.

Getting this CMS installed is almost easier than WordPress’ “famous 5-minute installation”. I can get this one installed in 3 minutes, max.

It requires the following to be enabled on your server:

• PHP 5.2.0+ recommended
• gd2, mysql, hash, mbstring modules
• Set the maximum memory to at least 48 mb.
• Using a PHP accelerator or opcode cache (e.g. xcache) is strongly recommended to for performance reasons – SilverStripe creates large cache files as PHP code that are quite slow to open without an opcode cache. (There is a thread on creating the SilverStripe cache on MediaTemple’s grid server here)
• Apache 1.3+/2.0+/2.2+ with mod_rewrite, and the ability to set rewriting rules in .htaccess files via “Allow Override”.
• lighttpd 1.4+ with access to the server configuration

Most of these things are included in the hosting packages that developers chose, but might not be in your client’s set-up. Please verify with the hosting company that these specs are in place before either telling your client that it will work, or that they need a better hosting company.

Getting SilverStripe installed is a very painless process that includes giving it access to create a database, or providing it with access to an empty one that you have created. The longest part is actually uploading all the files to your webserver.

After you get the CMS installed, the rest is up to you. Every time you want to create a new page type, you can tell the software what fields and options need to appear for the page. You can handle meta-information on a page by page basis.

SilverStripe uses a custom file extension .ss and it can throw your IDE for a loop. I suggest using Aptana and doing the following: Opening the eclipse preferences. Under “General” select “Editors” > “File Associations” . There you add a new File Association for “*.ss” and set the associated Editor to “Aptana HTML Editor”.

Now, why the custom file extension? It is basically your template HTML file. There are different ones based on the different page types. Each page type will have a .ss file that tells the CMS how the page should look and a PHP file that tell the CMS what content should appear on the page and what fields should appear in the editor. Pretty nifty, eh?

One of the easiest things to do with SilverStripe is to change its look, since the look is separate from the code. You can upload one of the themes from here (there are some decent ones in the mix) to get you familiar with this process. Simply upload the theme to the themes directory. Next edit the _config.php file in the mysite folder to contain the following :

[/code]Hopefully you are intrigued with the robust yet still simple to use CMS. As they are posted, I will add links to the additional SilverStripe basics series here.

1. A CMS shouldn’t have tons of extra features.

   You don’t want to use a e-commerce platform for a portfolio site, so why would you use it for a client that just wants to display their products, but not sell them? Carefully plan out the features that you will need to implement and try to find a system that has what you need and not too much exta (unless you know that you will be adding an e-commerce solution in the near future).

2. A CMS should be well documented and have support.

   You wouldn’t drive a car without an owner’s manual and your web development should be no different. You don’t want to use a CMS that either has no online community or  support. Instead you want to chose one with a vibrant community of developers or one that is enterprise level and comes with some technical support.

3. A CMS should do what needs to be done well.

   WordPress is great, fantastic and pretty much awesome. But it doesn’t do everything well. There are some types of sites that stretch and push it to its limits. While you can use it as a CMS, it frequently requires the addition of plugins (such as Pods or Flutter). If you need an e-commerce site, and that is the main purpose, you should be considering e-commerce solutions and evaluating them on the ability to add features – does it play nice with your WordPress blog? Can you add a blog or file uploader? Start with the main purpose and work outward.

4. The end user needs to be able to use the CMS you choose

   If your back-end is too complicated for someone who is not all that sophisticated when it comes to technology, your client, or end user is going to end up just as unhappy as he/she was with a static site that required entering into the code. Making sure that the interface is intuitive for a non-technical user with minimal training is a must. (When in doubt, call your mom or grandma – or other non-techy type -  and see if they can figure it out)

5. You should not have to expend a significant amount of additional development time on your design.

   It always takes extra time to develop for a CMS over a static site, however, chosing one system over another should not increase your development time. If there are too many hurdles that you have to jump through to make your site look nice or behave, then you need to move on and look at additional resources.

What are the best options out there? Well, there are many to choose from, some more popular than others. Each of these systems has its own unique strengths and weaknesses.

Content Management

WordPress (with Pods or Flutter)

WordPress makes an excellent CMS – with the addition of one of the two plugins listed. It is simple to use and fairly intuitive. I wouldn’t use it for a site with more than about 20 pages.

Drupal

An open-source solution with an active developer community, this CMS is great if you need a bit more flexibility than WordPress allows. It has modules that allow it to be exended into just about any type of site (including blogs & e-commerce)

SilverStripe

This is my latest obsession. Object oriented PHP and a custom PHP framework that was designed with the CMS for maximum flexibility. It uses a custom template extension, but for the most part, if you can handle PHP, HTML and CSS, this content management system is a breeze to work with. I am actively campaigning for people who use WordPress for everything to give this one a try, it might actually save you some development time. Oh, and the book is available at Amazon (SilverStripe: The Complete Guide to CMS Development (Wiley)). The book sold out the first day it was available, and has since been restocked. I reccomend at least trying this one out. You will love it. There is a ton of control for SEO on a page by page basis without any additional work.

Concrete5

Is another open-source project that relies on OOP and MVC (acronyms galore!) It offers in-place editing and many available extensions (although, they will charge you for some of them). There is a lot of flexibility in this system, and although I am not well versed in it, it looks to be an interesting option that I am going to have to use when I get the chance.

E-commerce

Magento

There really is nothing that compares with Magento. There is an open source version that is free to use as well as an enterprise level solution that comes with technical support and will set you back a nice chunk of change. Magento was born as an open-source project, so the core product is available for download. It is a robust and well-documented solution.

Lemon Stand

Currently in beta, this e-commerce app is designed to make managing e-commerce a breeze. You can even edit the code (HTML, CSS) from within the app itself. Looks promising.

Zen Cart

Is a popular choice amongst developers and is supported in a 1-click installation on many web hosts. It is meant to be easy to install even for beginners and boasts a large community of users for support.

Dreamer Lines

The navigation on this site isn’t really all that complex, but the effect is pretty nifty: The highlighted words change color when you hover over the corresponding navigation item and vice versa.

Unowhy

So, the photography made me hungry and the recipes even moreso, but the site is here because of the jQuery effect both on the page spanning home-page navigation and the animated question marks (Click the “Inspirez-moi” circle).

Druckbar

A German design agency with a restrained garage door effect on the rollovers on the center of the page.  A truly excellent example of design, both in the static and javascripted parts.

Aviary

An online imaging suite (there is an image editor, a vector editor, a sound editor, effects editor and more) and they even have a tutorial for creating and submitting a design on Threadless with their tools. But the jQuery effects here are minimal again. They liven up the navigation without being over the top.

These three examples show fabulous restraint while still giving the added enhancement of jQuery. The thing to remember with the effects is the restraint. Just because it is possible to make everything move and respond to the user and fly around the screen, doesn’t mean it should. And with those words of warning, I give you my favorite navigation tutorials & plugins!

Build it yourself:

jQuery Tabbed menu (via Queness)
jQuery Sliding Menu (via I Love Colors)
Slick Animated Navigation (via Net Tuts+)
Superfish Navigation
Vimeo Style Navigation
Smooth Animated Menu (via BuildInternet)
jQ Dock
Long Dropdowns (via CSS Tricks) 

Our favorite jQuery techniques/plugins to enhance your CSS are:

Rounded Corners Don’t you hate it when your corners aren’t rounded in every browser? Or having to use some image based hack to get it just right? This jQuery plugin will fix that for you. Any browser that doesn’t support rounded corners natively will display your corners just how you intended.
Equal Height Columns Sometimes CSS just isn’t enough, and this little script will help you overcome the hurdles that CSS leaves.
Selector Styling Select menus are ugly, and really, they have no alibi, at least not any more. This plugin utilizes the jQuery UI to fix some really ugly HTML elements.

Better tooltips with CSS this tooltip tutorial walks you through better tooltips and creating them with CSS.

Pretty checkboxes and more pretty checkboxes and radio buttons We all know checkboxes look better on a Mac than on a PC. This script changes that. It lets you change yet another one of those ugly default parts of the web with jQuery.
Targeting advanced elements One of the best parts of jQuery is its ability to use advanced selectors, and this indepth guide will explain it to you better than I ever could.
Make an entire div a clickable link This little jQuery plugin will allow you to set a rollover effect and a link on an entire div all while letting your code validate. C’est super chouette!
Super Selector Support from the plugin’s site “In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.” Ah, thank you!
Better current field highlighting Yes, you can create some field highlighting with CSS, but this technique from Chris Coyier over at CSS tricks is a great way to enhance the usability of your forms.

Some helpful resources are:

• jQuery for Designers
• Learning jQuery
• Noupe

There are a lot of tutorials out there to get you started, here short synopsis on why you should learn it and then some links to the best tutorials out there to get the job done. And a tutorial on how to write your first bit of jQuery code. Hooray!

What is jQuery?

jQuery is a JavaScript library that allows faster development of JavaScript effects. It does a lot of what Flash can do, by interacting with the HTML and CSS and manipulating these properties. It makes your website more dynamic and frequently more visually exciting. It also doesn’t have any direct negative effects on SEO (those only happen if you do things like set default CSS to display: none but we aren’t covering that here).

What is it used for?

It is used to make your page respond to events, (clicks, rollovers, etc) or to animate, or to post notifications such as error warnings. With jQuery you can manipulate the DOM and make pretty nifty animations and effects.

Let’s write some jQuery

You are going to need to download the current version of jQuery for this tutorial and include it in your header.

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery Week on Purpleurbia</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8">
 </script>

</head>

Now we need to add some content to our HTML to manipulate:

<body>
 <div id="container">
 <div id="header">
 I made a jQuery!
 </div>
 <ul id="nav">
 <li>
 <a href="#">Click me</a>
 </li>
 </ul>
 <div>
 </div>
 <h3>Hello everyone!</h3>
 <h3 style="display: none;">
 Come back tomorrow for a more exciting tutorial!
 </h>
 </div>
</body>
</html>

*                    { margin: 0; padding: 0; }
body                { font-size: 62.5%; font-family: Georgia, serif; }
.clear              { clear: both; }

a                    { outline: none; text-decoration: none; color: white; font-size: 1.3em; }
h3                    { font-size:18px; color: #4b0049;}

div#container        { width: 300px; margin: 0 auto;}

#header                { padding: 20px; font-size: 3.0em; background: #9b6999; color: #ffffff;}

ul#nav                { list-style: none;  width: 300px; margin: 10px auto; }
ul#nav li            { float: left; padding: 10px; margin-right: 3px; width: 200px; background: #4b0049; }

Now we can write our jQuery. Put this in script tags (<script type=”text/javascript”></script>) in the header area of your document.

$(document).ready(function() {
 $("li.button").click(function(){
 $("h3").toggle();
 });
 });

The first line says to wait until the document is ready. The next line says that when there is a click on an li element with a class of button to toggle the h3 element.

Pretty nifty, eh? (You should get something that looks like this)

Some great tutorials to make sure you really get the basics:

jQuery's own tutorials. A little more technical than most of the others out there, but if you are a programmer type, this is the way to go.
ThemeForest's jQuery for Absolute Beginners series. This is a great video tutorial series that will get you on your way to learning jQuery.
Learningjquery.com's series on Working with Events. This series talks about the major difference between JavaScript and CSS
CSS Tricks' Video Series on Getting Started with jQuery. This is a great basic series on working with jQuery and CSS.

Check back tomorrow for some more advanced jQuery coding!

(the background from our header image is from BittBox's Free Texture Tuesday Series)

What should you do? You should have a landing page! One that lets people know that you are getting ready, and if you know a tentative launch date. You have probably purchased your domain name well in advance of your site, and having some information on the site will probably be handy if it comes up in a search.And with a launch page in place, you don’t need to be afraid of passing out your card with your yet to be unveiled site on it.

Things that you should include on your page:

• A way to contact you (e-mail, phone, etc. for those looking for your services or information quickly)
• An e-mail sign-up list. E-mail marketing is critical, and a MailChimp account is free for up to 500 subscribers there is a pre-built subscribe form that you can style to your heart’s content.
• Information about who you are and what you do. This is kind of basic, but a paragraph or two will do.
• Social media links. Your Facebook, Twitter, LinkedIn, etc. profiles (if you have them) should all be hooked up here. It is time to find yourself some fans.
• A look and feel that is similar to what you are going for on the final site. It doesn’t have to be exact, but it shouldn’t go from web 2.0 to grunge.

There are a couple of free WordPress themes out there that do this (such as LaunchPad and Changing Room) to get you started.

To all you designers, this should be something you consider adding to your standard offering. Up your price by a couple hundred dollars, but add this to your package and explain the SEO benefits and marketing benefits to your clients, and they will appreciate your knowledge! And the extra hour it will take will pay off!

(header image credit : Dennis Wong)

Analytics:

• Analytics 360 A plugin from MailChimp, this plugin integrates your Google Analytics dashboard with your blogging and e-newsletter data, so that you can see what your traffic is doing when you are posting.
• WassUp I might be a control freak, but the instantaneous nature of this plugin lets me see who is on my site now and what they are looking at. It creates large databases, so my advice is to have it reset itself either once a week or every 24 hours.

SEO:

• All in one SEO Pack This is the absolute standard in SEO plugins. It allows the generation of separate meta information for each page. A definite must have.
• Google XML sitemaps If you know about SEO, then you know search engines like sitemaps. This plugin generates and submits them to major search engines for you.
• Simple Tags Edit and add tags to your posts easily with this plugin. Tags allow visitors and social media sites to classify your posts and information readily.
• Robots.txt Tell search engines where they can and cannot crawl. This is an important file that many people forget about, but this plugin will help you through that.

Posting:

• After the Deadline A fantastic grammar and spell checker for WordPress.
• Flickr Photo Album Use this plugin to insert pictures from your Flickr photostream right in your posts.
• Bad Behavior This plugin has saved me so much time and energy. It is better than askimet or any other anti-spam method. It holds anything it thinks might be spam, doesn’t allow known spammers to post at all. This is by far the best plugin I have ever installed.

Other stuff you should have:

• Socialize This This social media plugin allows you to not only append social book marking icons to your posts, but it also allows you to change the icon set easily from within WordPress.
• SyntaxHighlighterEvolved (Use with visual code editor below for even easier editing) With several built in styles for code editing, this syntax highlighter was the only one that didn’t break the styling on my blog.
• Visual Code Editor This plugin allows you to post your code right into the visual editor in WordPress.
• WP 125×125 A basic 125×125 ad manager that is a widget, so you don’t have to manually add in your little ads anymore.

(header image credit : Vinay Deep)