May 13th, 2008
Hey Guys! Found an awesome new Firefox extension!
I am actually quite excited about this. Recommended by a good friend - the Firefox ‘Web Developer’ toolbar add-on is one of the best designers aid I’ve come across. For a long time I’ve used the Tiny HTML validator which is a neat piece of kit, although can sometimes, I find, be over critical.
To cut to the chase - Web Developer is an add-on that can be found here. You install it, restart Firefox and bask in it’s power. Ok - it’s only a tool. As well as built in HTML, CSS and Javascript validation - you’ll find a plethora of tools including:
- the ability to turn off and control java, javascript, cookies, CSS, page colours, images and more.
- display different page information - eg. specific abbreviations, anchors, classes, images etc.
- highlight page sections - eg. divs, frames, tables, headers etc.
- Resize the window to specific resolutions to see how your site will render in different monitor sizes.
- Plenty more if you hunt around
I seriously recommend this to any developer or designer. It’s a great tool not just for building your own sites, but for assessing and reverse-engineering other sites. When the old ‘how did they do that?’ questions arises - the Web Developer toolbar will help to outline and highlight specific areas of the front-end display and the code to help understand websites better.
You can download Web Developer from the Firefox site at https://addons.mozilla.org/en-US/firefox/addon/60.
Filed under: Design, Standards, Web Culture by admin
3 Comments »
May 9th, 2008
OK folks, here’s the final installment of the hefty ‘create your own wordpress theme’ tuts. What I’m basically going to do to this time is demonstrate a few different small php scripts that bring that ever-important wordpress functionality to your site. I will outline where the different snippets go within your code, and what each bit means, so you can play with the variables yourself!
The fantastic thing about Wordpress is; there is so much you can do with it, it’s so versatile and there’s a massive community out there constantly coming up with new plugins, ideas and improvements. To discover more that you can do with this awesome blogging platform - visit the Wordpress site at www.wordpress.org or go to the wordpress codex section for more code and help.
Blog functionality
OK, let’s attack the bulky bit first. Wordpress’ central use is as a blog. The wordpress backend already gives you all the tools you need to create, edit and organise your blog articles - but you need to put some code into your theme’s files so the blog articles appear on the site.
Read more…
Filed under: Blogging, Tutorials by admin
No Comments »
May 7th, 2008
Another bank holiday weekend just gone, I didn’t even know we had one! I’m sure they keep making them up. The banks around where I live are lazy enough anyway - only open about 6 hours a day and closed all weekend, therefore, as I work from home it seems I’m the one who has to go and cash everyone’s cheques (checks if you’re American) while they’re out at work!
Not that I’m complaining, I had a fantastic break down in Abersoch, Wales. To many people a weekend of nice, sunny weather may not seem all that exciting but for someone who lives in rainy Manchester, as I do, a mere 3 days of sunshine is a near miracle, and most definitely worth getting away for!
It also gave me a good opportunity to get out with the camera, which I must say has been poorly neglected over the past weeks - attracting a coat of dust on the corner of my desk. I’ll plough through my snaps today and try to salvage some decent shots from the wreckage of a happy snapping weekend! I should be updating the photo page on my personal site at www.nathanbeck.co.uk/photo soon, and also looking at getting a flickr account set up.
As for the site and tutorials - I’m working on the final installment of the ‘Creating your own Wordpress theme’ series as we speak. I’m also intending to get a couple of other tuts up by the end of the week, as well as an offering of my curious musings on the world of the web.
Thanks for everyone’s comments on the site, it inspires me to keep going and creating new content that will hopefully benefit others.
Nathan Beck
Filed under: Personal by admin
No Comments »
April 28th, 2008
For those of you with the swanky new WP, actually unlike me at this very moment in time - you need to update now! Although it’s not been publicly announced (not that it’s the end of the world) it won’t hurt to get ahead and get the holes patched up now.
Followers of the Wordpress developers site - Wordpress Trac (which honestly goes over my head most of the time) may already be aware of this, but those of you who just want to get upgraded and sorted quickly - you simply need to download and replace the following files below:
Or you could just wait till Wordpress spreads the word and get it sorted then. I’m not moaning, everything needs upgrading. And I love wp and wish I could hug it… it could never annoy me!
Filed under: Blogging by admin
No Comments »
April 28th, 2008
We’re Back!
OK folks, here’s part 2 of the 3-part series on creating your own Wordpress theme. To view the first part - Layout, click here.
This tutorial isn’t as long, I’m basically going to create a simple design in Photoshop that I can incorporate into the dimensions I’ve already specified for my theme. As I stated in part 1, I’d normally design my site first then build the HTML and CSS around the design, but for the purpose of these tutorials I created the code first.
Photoshop - The Design
Of course this design is purely for example purposes, it’s not copyrighted and as it’s designed to be very simple, I’m sure you’ll wish to build your own designs. Therefore this is NOT A PHOTOSHOP TUTORIAL - I’m assuming that you can already create your own designs and are capable with Photoshop/Fireworks or whatever image editing software you choose to use.
Read more…
Filed under: Blogging, Tutorials by admin
No Comments »
April 26th, 2008
In relation to my previous article a week ago regarding Amazon’s new look which was baffling me at the time - it now seems it’s back up and running, possibly for good. So before I forget what the ancient Amazon looked like - here’s a tiny screenshot:
And the brand spanking new Amazon looks like so:
The difference is quite frankly… uncanny.
Of course feel free to go to the Amazon site itself to wonder in this new, funky design. After all - let’s face it, it’s about time. Amazon’s front has been stale for so long now, and with the advent of absolutely stunning websites with clever AJAX shopping carts and lightbox and beautiful code appearing on the scene - it was a move Amazon, being probably the biggest shop on the internet, should have made a long time ago.
I know there’s some powerful stuff going on in the code behind that website but surely they clean it up just a bit. A validator check brings back nearly 2,000 errors -Â including no DOCTYPE! I mean who are Amazon employing to maintain their site.
It would be nice if Amazon could help to set an example to other ecommerce and standard sites on the net of good design and coding ethics… but obviously they’re too busy making billions to pay any attention.
Rant over. The end.
Filed under: Design, Standards, Web Culture by admin
No Comments »
April 25th, 2008
Web 2.0! Web 2.0! Web 2.0! Glossy! Glossy! Glossy! Agh!
Yes there have been literally thousands of ‘Web 2.0′ glossy roll-overs, buttons, highlights, reflections and artificial 3D tutorials spawned over the past few years. So what? Here’s another! The reflection effect is widely used on the web today and is especially popular with logo design. I’ve made a consistent use of it on my Sans Design website (www.sansdesign.co.uk) and it still never gets old for me! It’s also surprisingly easy once you get to know it, plus it can be completely adapted for your own tastes.
I’ve started by creating a 400px x 300px canvas in Photoshop, of course this is completely irrelevant - use whatever size you wish. I’ve started by creating some text as part of a completely made-up logo, as so:
Read more…
Filed under: Design, Tutorials by admin
2 Comments »
April 25th, 2008
Waffling Intro As Usual
Welcome one and all to the first part of a 3 part series I’m tirelessly venturing to create on how to create your own Wordpress Theme. 2 questions come to mind regarding this tutorial. Firstly - why Wordpress? Well the simplest reason is that I’m quite handy at WP - I use in on the majority of my websites whether a client’s looking a blogging system or just the ability to edit their own sites. It’s also one of the top open-source CMS’ on the net so it actually makes perfect sense. Secondly - actually I can’t really think of a 2nd. At the end of the day chances are you’re here reading this because you are interested in creating your own custom template from scratch so there’s no point in a long, rambling analytic introduction. Oops - too late!
Let’s Get On With It
This is going to be a very basic layout, with the design entirely created using CSS. In part 2 of this series I’ll show how to implement a design into the layout. Although of course you’d normally create the design first before breaking it down into XHTML and CSS. This tutorial does require you to already have at least a basic understanding of both hand-coded web design and Wordpress - if you’ve edited your own themes and uploaded files via FTP before you should be comfortable. A typical Wordpress template can have any number of files, generally between 5 and 12. There are 5 files which are pretty essential. If you look at any pre-existing template you’ll discover these:
- index.php - the central blog page that is initially called up by Wordpress, from which all the other pages span.
- header.php - usually contains all the standard HTML <head> info and usually some areas of the header of the design that will remain the same on every page (eg. logo, navigation, banner).
- footer.php - as the name suggest, this normally contains the aesthetic footer that remains the same throughout your site.
- sidebar.php - the sidebar represents a side column - usually containing a menu or blog categories, archives or banners.
- style.css - let’s not forget the stylesheet now! This is linked into the site as it would with any normal site - via a link in the <head> area of the header.php file.
Read more…
Filed under: Blogging, Tutorials by admin
4 Comments »
