Friday, August 1, 2008

Metafocus Content Management System (CMS)

At Metafocus we chiefly use two content management systems. One is an in-house ASP Classic CMS well suited for small, relatively simple websites. The other CMS is a comprehensive ASP .NET solution. The Metafocus expert on all things ASP is Pete. It has recently been decided that we are going to program a new Metafocus CMS. Now Metafocus have a new expert PHP web developer (*blows own trumpet*), the decision has been made to use PHP to code this next generation CMS.

This will complete the trio of coding languages: ASP Classic, ASP .NET and PHP. Therefore I propose the project codename to be 'Trident'. I am geekerly getting excited about Trident and think it will provide Metafocus online marketing with another excellent tool that will further aid the renowned nottingham seo services that we provide. I'll post updates of my progress with Trident here, so be sure to check back frequentley.

[Posted with hblogger 2.0 http://www.normsoft.com/hblogger/]

Wednesday, July 23, 2008

Web Developer Tip #1 - Working from mockup-image website templates

Often, in every Web Developer job, there will be a time when you have to work from a mockup website design template in the form of an image, usually a PhotoShop file or maybe a flat jpeg file. I know toggling between PhotoShop and the web browser, playing "web developer, spot the difference" can be frustrating - at times the website just doesn't look right but you can't find even the most clearly obvious things.

If you use Dreamweaver there is an option to setup a tracing image to put under the design view's rendering of the webpage ("Modify > Page Properties... > Tracing Images"). This method is really rather limited though: -
  • it relies on Dreamweaver's own built in webpage render
  • the tracing image is not rendered in a browsers and so can not aid cross-browser checking
  • the tracing image is below the webpage and so it becomes obscured as the page content is built over the top of it
And so, now we come to my method of template image copying:-

I have just completed the Metafocus Global Internet Marketing website and I must say, I am rather pleased with the results. Significant reasons for my pleased-ness are the excellent designs provided to me by Andy, our designer, and the templating system that I am now going to describe.

It is a really a simple method: -
  1. save the template image as a jpeg if it isn't already
  2. use css styles to set the image as the <html> tag's background-image
  3. change the <body> tag's opacity on the fly, using css styles

Example CSS

html
{
background-image: url(images/template.jpg);
background-repeat: no-repeat;
}

body
{
background-color: #FFF;
opacity: .7;
filter: alpha(opacity=30);
}
The opacity attribute (0 to 1) is used to change the opacity value in all standards compatible browsers and the filter attribute (0 to 100%) is used to change the opacity in IE.


...and as an added bonus you can set the body opacity to none and watch as your friends, family and workmates scratch their heads trying to figure out why the links aren't working :p

Friday, July 4, 2008

Short webpage jitter / jumping fix

I was working on the Holly Cottage bed & breakfast website a few days ago and discovered that the website contains both web pages that are bigger than the browser's viewable client area and ones that are smaller than the browser's viewable client area.

This is common on a lot of websites and makes the website jitter in most browsers - Firefox, Opera, Safari etc - when going from a long page to a short page. This is because these browsers only add a page scrollbar if the page is longer than the client area.


I have a little fix that I use as standard to fix this problem: I set the html tags to a height of 101%.

Here is the CSS:
html
{
height: 101%;
}

A simple and easy solution that works for all the major browsers!

Here is the Holly Cottage B&B website with the fix applied:

Wednesday, July 2, 2008

Testing posting using HBlogger

I am writing this post on my Treo 680 mobile phone to test out HBlogger.

Is there anything this phone can't do!...well apart from go a day without needing a recharge :(

Ya know I can't resist techno bling :p

[Posted with hblogger 2.0 http://www.normsoft.com/hblogger/]

Whoop! OK I got a blog!

Well I've been bullied into getting a blog at work, so here it is guys. Big up the crew - Ed, Rich, Stu et al B)

Just need to make Andy get one now...

Maybe peeps can look forward to a few rants and ramblings about Web Development and the Internet etc...and other stuff perhaps...until I get bored with it all :p