Archive for HTML

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

Shoulders of Giants Business…

newton_1st_gonicka

During today’s lecture, I presented my SWOT, PEST and risk assessment areas that were completed during last week’s class. This was useful in describing and highlighting key areas of my website for analysis.

After the presentation, I then began looking at existing websites that related to the concepts and ideas of my own project. I looked for specific areas that could well be used for my own project, however designed and completed in my own way.

I looked at the following websites for areas of design and coding that I found appealing:

http://www.uptownrecords.com

http://www.xlr8r.com

http://rwdmag.com

An area on Uptown Records which I found appealing consisted of an animated scroller, displaying the images of recent vinyl releases in the dubstep and grime music genres. When hovering over a desirable vinyl, the scroller pauses, allowing the reader time to take in the information and description of the record. Considering my website will have a large focus area on new releases, this may well be something worth considering.

Areas on the other web pages which I found appealing referred to RSS applications, a key area that I wish to incorporate into my website. In the next week, I shall look at what and how this specific tool does what it does and the principles used to do so. This may take some research into the design and coding elements, as I will need to learn and develop my own skills in-order to achieve the embedment of RSS feeds successfully.

During the last part of the class, I was informed of plagiarism and the serious effects it can have on my work. Scott informed how important it is to understand plagiarism and to avoid doing so within our projects. If I were to copy and paste the code of a similar working concept, taking in mind the principles of how it works, as long as I were to make a new code that works In a similar style, I avoid any form of plagiarism. By keeping a record of all coding I do throughout the production stages of my project, I develop a log book which clearly justifies my progress so far. A comment within coding is also another useful method, therefore highlighting to a reader the construction of your own personal work.

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

Project Management

Today’s class has been very useful in understanding how to manage my project accordingly. I learnt of how a project is usually defined by time, scope and cost, thus devising a list of processes, SMART objectives, risk assessments, task allocations and more.

 

I shall now provide 3 examples of the project management areas in relation to my website prototype.

 

 

SWOT (Strengths/Weaknesses/Opportunities/Threats) analyses for my prototype:

 

S          Good topic, use of web and new media content

W        Not entirely original, lack of skills in some technical areas

O         Gain media interest, concept may be developed further

T          Many competitors within this field

 

 

PEST (Political/Economic/Social/Technological) analyses for my prototype:

 

P          Copyright issues with content information

E          Will it benefit targeted users with new information? Is the content informative?

S          What types of demographics does my site appeal too? What genres?

T          Does my site compete with others in terms of content, usability and layout?

 

 

Risk assessment for my prototype:

 

An unlikely risk of my home server being incompatible, meaning for a negligible seriousness of consequence, would therefore result in a low chance of any risks to occur during the installation of PHP.

Project Overview

My project ‘WordPress Theme’ is well underway, so I thought it was time for an overview of were I’m at and what’s to come.

My theme was meant solely for this blog at the beginning of the project. But as I started to look into other collaborative blogs I found that other collaborative blogs share the same problems as our blog. – No real overview of the latest posts and long columns of categories.

Often the volume of postings on these blogs makes it difficult to quickly get an overview of the latest entries, – and even harder to find the latest from your favourite author.

My proposal is now to create a theme aimed at collaborative blogs. The front page will be very different from the independent blog posts as it will serve as an overview page. It will show extracts from the latest posts in two columns making it easier to see without having to scroll as much. The categories are placed horizontally at the top providing quick access to the navigation.

Every author will have the possibility to upload a photo that will be shown next to their posts. This will give visitors a quick visual reference when scanning the page for posts from a specific author. Underneath the posts on the front page will be a horizontal sidebar. The widgets that normally go in the sidebar have been moved underneath the main content; I have changed the layout to be horizontal instead of the normal vertical sidebar.

The single pages are more like normal blog post pages. They will have a two column layout and the comments beneath the main content. I have done this mainly because people are familiar with this style which will make usability easier. Secondly there won’t be as much content to deal with on individual pages. Its main purpose is to isolate the single post and let people comment on it.

Colour Scheme

The colour scheme of the website is a chapter on its own. I really struggled to come up with a decent colour scheme. I even at one point thought of providing different colour schemes and let the user select which one to use. I knew from the beginning that I wanted black text on white background no matter what. As this is theme it has to fit many different web sites and a lot of different content. A white background ensures that most images and content will stand out on a bright background that gives good contrast.

The colour scheme went from brownish to green before I finally settled for a variation in blue. I will spare you all of my hair tearing thoughts of the process and just show the different mocks I came up with.

1mockup 2green-mockup1 3green-mockup-single 4blue-mockup 5blue-mockup-single

/Kasper – on Twitter and Delicious

Developed Proposal

After completing a draft proposal stating my main technical and professional objectives, I shall now devise a developed proposal that further defines my intentions for my project and the chosen subject area.

Being a fan of urban music culture and electronic dance music, I am a regular contributor to various music discussions online and a daily reader of music news and releases. I feel I am part of a local music scene in Birmingham, having toured in previous bands, a regular consumer of vinyl in various independent record stores and now currently enjoying deejaying within local clubs and events around the city. I frequently read music content online, specific areas discussing; artist news, features, reviews and releases from a selection of websites accelerating in music culture. It is important to keep up to date with the latest occurrences within the industry and so regular visits to appropriate online content is essential. However, with so many websites and forums to visit, I sometimes feel pressured to keep up to date with everything I want to know. This is where my initial challenge for my project came in to play, that being, why not keep interesting and relevant content under one site. This will save time for targeted readers searching endlessly for their desired content, instead finding everything they need to know with minimum effort.

The project will consist of the following:

– Music news
– Releases
– Features
– Reviews
– Forum
– Contacts
– Links
– RSS feeds

As mentioned in my draft proposal, I shall be creating the project through the use of Adobe Photoshop Elements, Macromedia Fireworks and Dreamweaver MX. I shall design most of my content in Photoshop, slice images in Fireworks and arrange tables in Dreamweaver MX. With previous skills and experience in past web design and music online modules, I feel more than comfortable with doing so. This time however, I shall be incorporating the use of PHP coding with HTML, an area I have researched extensively at home.

After a visit to the university library, I found several books that allowed a reader to teach themselves everything they need to know on PHP. Being a personal objective of mine, I learnt exactly how to install PHP on my laptop, discovering the other applications that were needed to complete the installation. After installing a multi-package available for free online, I was able to attempt my first script at home.
When running the script successfully, I discovered exactly how beneficial this form of coding is, with a notably faster production process, allowing my creations to occur quickly without sacrificing stability.
Another benefit of using PHP is the fact that it is an open source, offering users additional support from an accessible and committed community whom offer their own expertise and knowledge on any problems that may occur. As a beginner to this form of coding, I feel this is extremely useful, as any problem I may encounter can be answered easily with little research, saving time on my production. For instance, if I were to experience a bug once my project goes online, I can have the issue resolved as the bug was found. This enables maximum professionalism of a conventional and realistic working website.

After further research on PHP, I discovered that its overall performance is far more superior over other server scripting languages and may also be improved if a caching tool is acquired. I have understood exactly what makes PHP so popular, a favourite amongst many web designers and programmers.

My next set of objectives includes to further research the language of PHP and how to execute my commands accordingly. By completing further secondary research into appropriate literature and online sources, I will be developing my personal skills and abilities. As I will be combining HTML and PHP, I will need to bare in mind such factors as browser compatibilities and accessibility. I have discovered that the examples of coding I have practised conform to Extensible Hypertext Markup Language (XHTML), which I have learnt is an XLM based version of HTML that can be pared and validated. This form may be validated, allowing it to be more accessible to lightweight browsers running on small memory devices.

The above examples demonstrate an understanding of technical areas that I have researched necessary to incorporate during the production of my website prototype. I have stated how any problems may be resolved and the strengths of using a technical configuration such as PHP scripting.

I aim to produce a simplistic website that incorporates a large use of images, creating a more user friendly and eye-catching appearance. The name of my website shall be entitled; “dubtime”, a suitable choice for the type of music and cultures that will be covered. Initial ideas regarding my sites layout are currently being designed, a theme that is suitable towards the type of target audience I aim to be attracting.

I have also completed a mock-up of my homepage, an example of which can be found below:

homepage-mockup-copy

I look forward to beginning my production, particularly when incorporating my new skills and objectives that I have developed throughout progression of the web and new media module.

Website Analyses

website-analysis-11website-analysis-21

The above analyses show two similar working websites that discuss the main topic area for my project. I have completed theses comparisons in-order to gain a further in-sight into creative ideas and concepts, that will be worth applying to my own website.

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

Draft Proposal

My project for this module shall consist of various new areas that will demonstrate an enhanced learning of my personal design skills and capabilities. As previously discussed, I wish to draw upon trends in the new media industries and the skills required by potential employers, therefore creating an original and creative project that will benefit future design I complete.

My idea, although not entirely original, consists of the production of a website that revolves around hot topics of music culture, specifically looking within sub-cultures of urban and electronic dance music. I intend to create the website through the use of Adobe Photoshop Elements, Macromedia Fireworks and Dreamweaver MX, using HTML and PHP as my style of editing codes. I intend to incorporate a sufficient use of media content, in particular a high ratio of images, thus enhancing the visual presentation of my site, avoiding the plain and boring elements that a heavy text page can display.

I feel my main technical objective here will be the combination of HTML and PHP, as discussed above. I have researched how it is possible to incorporate PHP into a HTML document, a simple yet effective tool in creating effective and dynamic web pages. By researching appropriate literature regarding how to use and understand PHP, I demonstrate a keen desire in obtaining my personal and technical objectives. After a sufficient understanding has been met, I will look at creating tables, (through the use of combined coding) in which to display my content. Whilst creating my site, I wish to develop my technical skills in coding, using comments in my PHP codes to my advantage. A code that seems clear at the time of design can often cause confusion at a later date, an aspect I have experienced in my previous designs. Therefore, seeing as PHP ignores any text comments in a script, I will consider applying occasional memos in-order to make my codes more readable. This area refers to how I wish to develop my professional objectives in terms of web and new media design, as I shall be learning new programming techniques in regards to PHP and its language.

I also wish to incorporate the use of RSS feeds into my site, thus allowing a frequent update of content made accessible to users visiting the site. Content may be taken directly from other sources, thus creating an online archive of recent news and events within music culture. In other words, the main objective for my website is to display a collection of news and media associated content under one address, allowing readers to find all the information they need on one site. This will take a significant amount of research into other competitors who provide reliable and interesting information on the topics I wish to discuss. I shall conduct detailed analyses of existing websites, studying the type of news articles and media content they each provide, thus gaining an overall perspective of what is most appealing to a market. This draws upon past research methods I have conducted, specifically secondary techniques that lead to a well researched and valuable new media project.

Site Map Example:

site-map

Wireframe Example:

wireframe2

« Previous entries