Archive for XHTML

WordPress Theme Wrap Up (part 2)

As I said in part one, this wrap up is going to be a two part series. This one is about evaluating my personal experience of creating a WordPress Theme from scratch. This is all about the Collaborate Theme so if you don’t want to hang around, feel free to go elsewhere.

I am very happy with the final result for many reasons. First of all I think it comes very close to what I originally proposed. I had some doubts when mocking up the wireframes as to whether the horizontal division of the layout would in any way work. I know some themes already use this kind of division, but from what I have seen the content would still be in columns.

Secondly the learning curve for this project has been very steep. Although I don’t intend to release any more WordPress theme in the near future, I will certainly enjoy my experience when it comes to designing custom template files for client’s WordPress sites.

The whole theme is designed according to W3C standards and validate against both CSS 2.1 and XHTML 1.0 Strict. One exception to this is one the single post pages where the comment form is displayed. There is one element in the form attribute that won’t validate: The “aria-required” attribute is not yet supported. Because of accessibility issues (especially in AJAX) I have chosen to leave it in there. In time when HTML 5 gets released properly it will validate, but until then, it won’t.

Bugs

Though I felt the theme was pretty solid when I first released the beta version on the WordPress community site, the testing still revealed a lot of bugs. My CSS though valid, included some CSS 3.0 selectors and values that are not yet supported and these had to be discarded. As they only applied to browsers that supported them I didn’t lose much in removing them.

Another bug was the trackbacks, they would break the layout if the title of the trackback was too long. Solution: use of CSS and a simple PHP if statement to separate the trackbacks from the comments and style them accordingly.

After testing the theme with the widgets and a few plugins, I found that the WP-Gravatar plugin actually caused the layout to break. As this plugin is a third party addon, there wasn’t much I could do about it other than inform my users.

If you are still interested in the theme, go to the official release post!

/Kasper – on Twitter and Delicious

Standing on the Shoulders of Giants

lifehackerFor this blog I want to talk about, how I went about designing my theme in a bit more detail. I have touched upon this briefly before, but in this post I will be more specific.

Standing on the Shoulders of Giants essentially means, building upon work that has already been done. You don’t always have to create something that is entirely new and inventive. OK it’s not bad if you can come up with something that is just that. Butt more often than not, you will waste your time
and money doing something that other people have already done.

When I start planning for a project I always try and get a sense of what is out there already. But I also do this frequently throughout the development and design process. If I run into a situation or a problem, where I need a solution, I will look around and see how others have solved it.

In my design I wanted to find the best place for my navigation and how it should be implemented. I specifically looked at the search bar, how prominent it should be? how important would it be for my users. All this would take months to research if I had to do it on my own.

Rather than do that, I had a look at other collaborative blog designs to see how they used the search bar. These blogs are some of the most popular on the web, so I trusted them to give me the solution. It turns out that they ALL had the search bar very very near the top of the page. I effectively decided to build my design around the search box, and made that together with the categories, the absolute first priority of the design.

WordPress Search Box

WordPress have two search boxes that can be used. You can hard code the search box into your theme, or you can use a search widget. The difference is essentially that widgets can be controlled
by the user, and the hard coded search bar is controlled by me. Because this feature is so prominent for this theme, I decided to hard code this search bar into the theme. It is always good to give the user control, but in this instance I trusted my own judgement to be the best thing for this particular theme.

searchform

Luckily WordPress already provide a search form that calls the database and searches through all the post in the database. This comes with all default Wrodpress Themes and the php files is called ‘searchform.php’. Now to include that in the coding of your theme, you use the php include statement. You can then call the php file by using:<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Breaking that apart; The include statement tells the server to include a particular page here. The between the brackets you tells the server exactly which page to include. Here we have provided a URL that uses the TEMPLATEPATH function that is build into WordPress. When this is parsed by the server WordPress exchanges the word ‘TEMPLATEPATH’ with the absolute path, to the directory in which your theme is placed. The in this directory the server looks for the files called ‘searchform.php’, and then include all the code from this file, into the current page as XHTML code.

The alternative is to just hand code the snippet from the searchform.php file into your current php file. But the advantages with having a separate file for the search bar, is that you only have to type in one line of code every time you want to use it. This makes it easy to reuse the search form over many pages. And equally handy is it if you want to change some of the code, you don’t have to go back and change 5-6 pages or more, you just change that single searchform.php file and it will automatically update on the other pages when it’s parsed by the server again.

/Kasper – on Twitter and Delicious

Planning and Managing Projects

Planning and managing projects can sound really dull and it almost certainly makes you think of piles and piles of administrative paperwork. But it doesn’t necessarily have to be, in fact when you are working on your own or in small groups; I think you can do too much planning and managing. Planning is always good, but if you do too much it can start to detract from your final outcome. You get set in stone and try to work around your planning in order to make it fit your project instead of using that time creatively on your project.

There are many tools and charts out there that will help you manage your projects. But if you were to use all of them, you could do nothing but plan. I think it’s important to filter out and selectively decide what planning and management you want to apply to a particular project. There was a great article on FreelanceSwitch the other day about pricing freelance work. This could be applied directly to you planning of the project, larger expensive projects involving a lot of work needs to planned more carefully than quick and cheap work.

I have personally found that most of the planning that you do with using charts is exactly the same planning that goes on in your head when you start thinking of a project. Most of these criteria are the source of your project idea. Why did you get the idea ion the first place, because you saw some kind of gab in the market or someone asked you to do it.

I think these charts are great for larger projects to manage people and tasks. For freelancers and smaller companies I think there main use is to show to clients. It shows that you are professional and they can see approximately how long a project will take.

I have included some of my charts below which I have made to analyse my WordPress Theme project. I’m glad that I didn’t do this at the beginning of my project, because I think that would have limited my creative process. I simply didn’t know enough about the possibilities of this projects until I started working with it in detail.

SWOT Analysis

A SWOT analysis measures a business unit, a proposition or idea; a PEST analysis below measures a market.

Strengths Weaknesses
  • Better usability
  • Easier to navigate
  • Better design
  • Improved author profiles
  • Niche market
  • Content specific
  • Limited scope for design
  • Customization could break layout
  • WordPress specific
  • Small market
  • Can’t offer 24/7 support
Opportunities Threats
  • Expandable market
  • Community development
  • Limited competitions
  • Self branding
  • Recognition
  • Competitors
  • Future software upgrades
  • Untested model

PEST Analysis

The PEST analysis measures the market and the users of your product.

Political Economical
  • GPL Licensing
  • Open Source Movement
  • Comment moderation
  • Freelancers
  • Web Professionals
Social Technological
  • Bloggers
  • Online community users
  • Open Source movement
  • Form strong community bonds
  • Tech savvy
  • WordPress users
  • Untested model

Gantt Chart

Developed by Henry Gantt as a tool for displaying the progression of a project.

kasper-gantt-chart

/Kasper – on Twitter and Delicious

Use CSS to Style Columns

So why would you want to style your list items as columns? Well, good question! Let me just give you a few examples: If you like me are designing a layout for a WordPress blog that has a LOT of categories, you might not want that list to go way off your page. Other blogs might have the same problem with their blogroll, your blogroll grow over time and at some point it will get longer than you might like and split it up in two columns.

But the same technique that is used in this example can also be applied to navigation. You can use this method to create a horizontal navigation bar, and if you have many links, you can have the links align nicely underneath each other.

OK, you probably want to get going, it’s very simple and easy. Actually we are only really using a few basic CSS properties and I will go over them in detail in this article.

Just an aside here before you start coding your CSS; a good practice before you start coding is to reset all the known default browser style. These differ a lot from IE6/7 to Firefox to Opera, Safari etc. Eric Meyer has taken the time to develop a stylesheet that will do just that for you, just grab a copy of the file, and use the ‘@import’ command at the begging of your CSS stylesheet to import the file.

Let’s start out with our markup then, a simple list you can get here. It’s just a simple list of the categories on this site.

  1. First thing we want to do is set a width of our container and centre it. You don’t have to if you are doing this in your sidebar, just set the width.
  2. #categories {
    width: 980px;
    margin: 10px auto 0;
    }

  3. Next thing is to set the list-item elements to actually make the colums. We float each single list item that will make every category ‘jump’ up to the right of its preceder. We will also give it a width of 136px (this is essentially the width of the coloumn), and push the columns a bit apart by giving them a right matgin of 3px.
  4. #categories li {
    float: left;
    width: 136px;
    margin-right: 3px;
    }

Well that’s basically it, we now have a set of columns, but to make them visually appear better we will do some extra styling.

  1. Give the line a height of 1.7em
  2. #categories ul {
    line-height: 1.7em;
    padding:0 0 0 5px;
    }

  3. Make the font a bit smaller, capitalize the words and make it bold.
  4. #categories li {
    font-size:11px;
    text-transform: capitalize;
    font-weight: bold;
    }

  5. Finally style the links and give them a hover style.
  6. #categories li a {
    color: #000;
    text-decoration: none;
    }
    #categories li a:hover {
    color: #999;
    text-decoration: none;
    }

You can suit the final styling to your individual needs; you can also make the columns wider or narrower if that’s what you want. If you are making it in a sidebar you will probably only want to have 2 columns, if you are styling a navigation bar, you might want to have more.

If you are interested you can download the full stylesheet and compare it to your own.

/Kasper – on Twitter and Delicious

Installing MySQL on Mac OS X

The following information provides detailed instructions on installing a mulit-software package that incorporates the following necessary requirements; Apache, MySQL, PHP, phpMyAdmin, and more.

Taken directly from: http://www.keitr.com

1. Go to http://sourceforge.net/project/showfiles.php?group_id=61776. Choose “XAMPP Mac OS X”.

2. Choose to download xampp-macosx-0.7.1.dmg.

3.  Double-click the Disk Image file you just downloaded.

4. In the window that opens, double-click XAMPP for MacOS X.pkg.

5. Once installation completes, go to your Applications folder, and go inside the xampp folder inside.

6. Double-click on XAMPP Control Panel. This tool lets you start and stop the various servers installed as part of XAMPP.

7. Start Apache and MySQL by clicking on the “Start” buttons next to each item. Note that you will need to repeat these steps if you reboot your computer and wish to use Apache and/or MySQL.

8. Go to http://localhost/. If you are directed to a page with the XAMPP logo, your installation was successful.

You can add or change the files in /Applications/xampp/htdocs to change what you see at http://localhost/ on any local web browser.

Here are the locations of some configuration and log files you may want to view or change:

Type    Location
Apache configuration    /Applications/xampp/etc/httpd.conf,
/Applications/xampp/etc/*.conf
Apache logs    /Applications/xampp/xamppfiles/logs/access_log,
/Applications/xampp/xamppfiles/logs/error_log
PHP configuration    /Applications/xampp/etc/php.ini
MySQL configuration    /Applications/xampp/etc/my.cnf

Wireframe to Mockup to XHTML

Up until now I have spent a lot of time getting to grips with the basic in and outs of WordPress themes. I understand how important it is that your theme is widget ready and that it is flexible and easy to customize.

Having finished my wireframe and being pretty satisfied with my initial mockups, I can start moving on to the actual theme creation. I have had some difficulties coming up with a colour scheme that I liked, it’s gone from brown to green and now it’s blue. I have come up with two complete mocks; one for the front page and one for the individual post/archive/search pages.

The single pages are different because I need to make room for the comments section. People are used to comments at the bottom of every article, so I will keep them there.

I will have to shrink the main content area to make room for a sidebar on the right. This will hold the sidebar information related to the post being viewed. I intend to ship the theme with sidebar items such as related posts, most recent post and comments etc. These can of course be changed or swapped by using widgets.

Preparing the Markup

Now it’s time to get into the actual coding of the theme. The main challenge at the moment is getting the bottom section of the front page and the single pages styled. The hard part is that the XHTMl needs to be uniform for all the items. I have to style every item the same no matter the content. In other words, the styling needs to be strong enough to hold most of the generic content you find in a WordPress sidebar.

Automattic, owner of WordPress, recommends using a simple <ul><li>link</li></ul>

markup to make it compatible with widgets. I won’t be able to comply with that due to the horizontal layout of the theme. I will make use of one of their alternative versions which will include the use of the <div> tag and some additional php coding in the optional functions.php template file.

/Kasper – on Twitter and Delicious

Professional and technical objectives

My personal intentions for this assignment are to develop my overall design abilities in web and new media, learning new techniques and skills that will clearly demonstrate an enhanced learning on my behalf. I wish to draw upon trends in the new media industries and the skills required, resulting in the design of an original and creative new media project. By assessing new media forms, both independently and throughout this module, I intend to outline relevant areas that may well be useful for a basis of my intended project.

During the lecture slides that Scott has presented during class, I have gained a more coherent understanding of what my project needs to focus on.  I shall ensure that my proposal will be specific in informing exactly what I shall be creating, why I plan on doing a website of this nature, also drawing upon when I shall initially be beginning my project. This refers to the measurable aspects that I was introduced of during class, ensuring that I can accurately complete my project within a specific time scale.

Therefore, are my objectives attainable? Or will I need to re-address my initial proposal, an area that may well come into play, later on during the production process. I shall also ensure that my intentions for the project are relevant to the improvement of my overall design skills in web and new media, with a successful working prototype completed. I must be fully aware of the time limitations involved in creating my project as intended; otherwise I may find areas of my proposal not occurring. This is all about being reasonable and efficient with my overall time management, a skill that has let me down in the past, thus resulting in lack of content for past website prototypes.