Archives for January 2008

Crash Course in Favicons

January 31, 2008 By Brian Self

Favicons have come a long way since they were first introduced in Internet Explorer. The favicon was created by Microsoft for Internet Explorer but at that time it did not conform to the W3C HTML recommendation because the rel attribute has to contain a space-delimited list of link types, the .ico didnt have a registered MIME type and using a reserved location is what is know as link squatting or URI squatting to the W3C.

When someone looks through their bookmark links or at the address bar and sees your logo or image as the favicon on your site, it shows that you care to go the extra mile when it comes to design and branding.

Before, these 16 by 16 pixel images placed in the root of a server, were called favicon.ico and were only used for bookmarks. This brought about a security concern among website visitors since webmasters could see the amount of people that had bookmarked the site by taking a peek at the access logs and see how many downloaded the favicon.ico file. Now browsers just display the favicon in the address bar on every visit making it less of a security issue. The image formats have expanded as well to included animated gifs and PNG’s. Although putting the favicon at the root of a server is still sometimes practiced, it is generally perfered that you use a piece of html in the <head> section that points to the location of the favicon. It looks like this:



<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" mce_href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon"> 
<link rel="icon" href="http://yoursite.com/favicon.ico" mce_href="http://yoursite.com/favicon.ico" type="image/vnd.microsoft.icon"> 



Or if your document is XHTML, you use this:


<link rel="icon"

      type="image/png"

      href="/somewhere/myicon.png" />;

Now although it is not 100% guaranteed that the favicon will always display on every browser every time, I believe it to be a good practise to integrate on into your website. When someone looks through their bookmark links or at the address bar and sees your logo or image as the Favicon on your site, it shows that you care to go the extra mile when it comes to design and branding. In website design, image is everything so why not put your image everywhere!

Friday Focus 01/25/08

January 25, 2008 By David Peralty

Another Friday Focus coming your way this week. The first one of 2008, and what I think to be one of the first not done by AJ, as he is a busy man, so I figured I would try to fill his shoes when it comes to the focus for a while.

Things will mostly be staying the same, but I will of course be choosing the designs that really amazed me, as well as the top stories on Digg’s programming and design sections that caught my eye.

This week, I have three designs, one design article found via Digg, and one freelance article found via Digg.

I hope you all enjoy my picks.

Designs of the Week

Oddly enough, all of my picks this week for designs are from Web Design firms from various locations around the world.

The first one is from GregOne from Belgium. I love how dark the overall design is, but to make it easier to read sections with a black background, he pumped up the font size, and in the content area I love the green tab he used as the background for titles. I find the serif font used for most of the white text content a bit difficult to read, but overall, I really enjoy this design.

Next, I have South Creative from Australia. This design caught my eye because of the use of the creamy colours of the content topped off with a much darker header, and a brightly coloured logo. The design itself is fairly simple looking, but I found it to be very effective.

My third choice this week is FortySeven Media from the USA. Again a very distinct difference between the header and content areas, this time going for a lighter header and a much darker body. I haven’t seen much green focused web designs lately, and so walking through the normal black, blue, orange, and more blue, I really enjoyed this design. A very nice palette of colours used as part of a very interesting style.

Digg Weekly

Design – 26 Things to Do When Business is Slow and in Downtime Mode
There is no doubt on my mind that we are going into a recession, and it is the perfect time for all freelancers to find some extra work, get important tasks completed, and save a little extra money.

Design – Creating A Fantastic Fantasy Night Sky In Photoshop
I am usually not a fan of photoshop tutorials, but this one is really fun to do. With all kinds of interesting effects taken into account, this tutorial could be used as a basis to create all sorts of cool poster worthy designs.

Pulling XML into Flash

January 22, 2008 By Brian Self

When developers and designers start really utilizing the power of flash and the potential it can bring to applications and creative content, a question that frequently arises is how to load data in from a xml page and use it in Flash. This is a quick tutorial to show how easy the process is and once you have these basics the possibilities are endless.

First we will create a simple xml document called images.xml. Here is the code:

<images> 

 <image image="img/img1.jpg" caption="Brian Self- Flash Programmer"/> 

</images>

We are only going to use one simple xml node to keep it simple. Save this file in a directory called xml.

Then create an FLA and call it “Main.” Put a dyncamic text field on the stage with an instance name of myText and be sure to embed the font, uppercase, lowercase and punctuation. Then draw a rectangle and hit F8 to make it a movieClip and give it an instance name of myImageHolder.

Then create an AS layer and paste in this code:

// create the XML variable
var xml:XML = new XML();
// you must ignore whitespace
xml.ignoreWhite = true;
// the function that is called when the xml is loaded
xml.onLoad = function() {
// tells you the number of child nodes
 var nodes = this.firstChild.childNodes;
// tells you how many items you have
 numOfItems = nodes.length;
 // attach icons
 for (var i = 0; i<numOfItems; i++) {
  // attach image to the myImageHolder MovieClip
  myImageHolder.loadMovie(nodes[i].attributes.image);
  // set the text
  myText.text = nodes[i].attributes.caption;
 }
}; 

// load the xml
xml.load("xml/images.xml");

If you run this you will see that the content is now populated from the xml page.

Simple as that! Remember, in coding and designing there is always an increasingly difficult way of doing things and a elequently simple way. Keeping it simple makes debugging a quick and painless process and always assume you will have to debug at some point in your designing life.

Setting Up A Photo Gallery In Under An Hour

January 18, 2008 By Brian Self

I get asked a lot about the topic of photo galleries from budding designers and clients and they all ask the same thing. “What’s a really easy and fast photo gallery to set up and use?”

And then they ask me: “What do you think about Drupal?”

Don’t get me wrong, Drupal is great but I wouldn’t use “Drupal photo gallery” and “easy and fast to set up” in the same sentence. When I think of simple, I try to find something that can take as much work off my plate as possible; Thats why I opted to learn Ruby On Rails instead of Jakarta Struts.

When I began researching all the different image gallery frameworks, the one common denominator that seemed to get in the way of keeping “quick” in mind was that they all required a database to be set up. Except for when I came across a lovely, flexible image gallery PHP web application called Singapore. With Singapore you can administer directly via FTP or using the web based admin which features advanced metadata & user permissions; Fully template driven & multilingual. I am going to give a quick run-through in setting up Singapore and you will see really quickly why I chose to go with it when I need to quickly throw up a photo gallery.

Step 1

Download Singapore and upload it to your hosting account.

Once that is done we can take a run with the ‘test.php’ file to make sure our server can handle running Singapore. Point your browser to ‘http://www.whateveryourwebsiteaddressis.com/singapore/test.php’. The page will test everything and it should look something like this:

Server test page

The test will let us know that if we want higher quality thumbnails, we need to change the ‘thumbnail_software’ option in the ‘singapore.ini’ file. In the ‘singapore.ini’ file, change the value for the ‘thumbnail_software’ variable to ‘gd2’. Your screen should look like this:

The other settings in the ‘singapore.ini’ file can be messed around with as much as you desire. If you cannot edit the .ini file in your ftp client, just edit it on your desktop and upload it to replace the existing file.

Step 2

You need to change the permissions on some of the folders in order for the script to write to them. You can do this using the CHMOD command in your FTP program. We’ll change the permissions as follows:

CHMOD the ‘data’ folder and all the files and folders in the ‘data’ folder to 777
CHMOD the ‘galleries’ folder and all the files and folders in the ‘galleries’ folder to 777

Step 3

Now jump into ‘setup.php’ to setup Singapore or click the ‘Proceed to setup’ link at the bottom of the test page. Your screen should look like this:

Main setup page

Once this is finished make sure you delete the ‘setup.php’ so that you keep your head above the security issue water. Click on the proceed link and then…

Step 4

Your screen should look like this:

Click ‘Log in’ and enter ‘admin’ for the username and ‘password’ for the password. Your screen should look like this:

This will throw you into the Singapore main control panel page. Your screen should look like this:

Main admin control panel page

You can now use the control panel to customize and manage the gallery and just don’t forget to change your password!

Final words

Remember, it’s not what you use to get your clients site up and running as much as it is the amount of time it took to get set up and its simplicity to its end users that counts. At the end of the day, my clients are more concerned about having quick turnovers and working sites. Sometimes we can get caught up in the lingo, brands and “techyness” that makes us geeks drool like a kid in a candy store and makes our clients scream like a kid at the dentist.

The Next Devlounge Design – Have Your Say!

January 15, 2008 By Thord Daniel Hedengren

A new Devlounge design is planned, and work will begin shortly. Naturally, we’ll keep you, our faithful readers, posted on this, with continuous screenshots to hear what you think.

At this point there isn’t much to show, we’re planning and playing around mostly. There are, however, some requirements that we want to meet.

Stay true to the Devlounge look and feel. Don’t expect anything too drastic, we want to stay true to the clean style Devlounge sports today.
Networking with related Splashpress sites. There are two other sites (one launched, one upcoming) in the Splashpress network that Devlounge will be networked with, and the idea is to do something good with that. At the very least, there will be sub-network linkage.
Suitable ad formats and placements. Devlounge’s income is based on ad sales, so we’ll tweak the advertising options a bit. Don’t worry, we won’t cram the site full with nasty ads, expect something similar as to how it is today.
A more flexible content flow. If possible, we want to make features stand out more, while giving room to shorter posts as well. This without cluttering the site, and not breaking with the Devlounge feel that we all know and love. A challenge for sure.

So what do you think? Your opinion counts, so please chip in and tell us what you want from the next Devlounge design!