Feature
Post

Category
Design

Published Thursday January 31, 2008 at 3:49 am
By Brian Self with 8 comments

Crash Course in Favicons

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!

Feature
Post

Category
Friday Focus

Published Friday January 25, 2008 at 12:01 am
By davidcubed with 4 comments

Friday Focus 01/25/08

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.

GregOne

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.

South Creative

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.

FortySeven Media

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.

Feature
Post

Category
Code

Published Tuesday January 22, 2008 at 4:43 pm
By Brian Self with 6 comments

Pulling XML into Flash

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.

Feature
Post

Category
Publishing

Published Friday January 18, 2008 at 9:30 am
By Brian Self with 10 comments

Setting Up A Photo Gallery In Under An Hour

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.

Feature
Post

Category
Design

Published Tuesday January 15, 2008 at 8:42 am
By Thord Daniel Hedengren with 9 comments

The Next Devlounge Design - Have Your Say!

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!

Feature
Post

Category
General

Published Thursday January 10, 2008 at 5:58 pm
By davidcubed with 3 comments

3DEnvironments Flash Component Review

When Flash first made its debut online, I was really excited about all it could do. Creating more immersive environments online, Flash seemed like it was going to open up a whole new layer of experience and interaction for the web.

Quickly though, like many, I realized that over use of Flash could be a bad thing, and basically tossed it aside. What I didn’t realize at the time is how big of a role Flash was going take online as time progressed.

Now we watch Flash videos all the time, and people are quickly realizing once again how great, properly used Flash can be.

Flash still provides a much more immersive interface than other technologies currently available online, and can be used for a myriad of different things.

Recently, I was able to try out the 3DEnvironment component created by Flashloaded. Flashloaded is a company dedicated to providing the world with innovative and cost-effective Flash extensions and components. One thing that really excited me about the company was that it is based in Toronto, Ontario Canada, only two and a half hours drive from where I live and I am a sucker for Canadian companies.

The 3DEnvironment is a Flash component that makes it easier to create 3D interactive interfaces and environments in Flash.

For example, if you want to create layout tours for a building, allow visitors to fly through the solar system, or create a custom interactive navigational system, 3DEnvironment can help you easily achieve that goal. My favourite demonstration that they have on their site is the colour wheel as I could definitely see something like that used for a variety of applications.

Featuring fully customizable controls and full keyboard and mouse interactivity you can bring together graphics, or movie clip symbols to engage your audience in a new and interesting way. I have seen tutorials on how to create three dimensional effects before, but my limited skills with Flash or 3D modeling have always stopped me from creating anything worthwhile.

I have always then just given in and created a flat website without any flash at all. Trying to convey distances, object size comparisons, and even just simple landscaping, and building layouts is much more difficult with text, and some images. I could definitely see this useful in a variety of different corporate projects as well as smaller freelance projects.

The best thing that any developer or designer can do is find ways to create something without re-inventing the wheel each time, and the 3DEnvironment component from Flashloaded will save you time and energy when developing such environments and interfaces with Flash.

Features

  • Create realistic 3D environments with depth and perspective
  • Build unique interactive interfaces
  • Custom keyboard controls for users to navigate around the 3D environment
  • Mouse wheel support for navigation
  • Move objects in the environment with built-in tweening and customizable tween duration
  • Rotate the world around all three axes (x, y and z)
  • Camera controls for panning and zooming to change the perspective on the environment
  • Add objects through an intuitive user interface, external XML file or using flexible ActionScript controls
  • Built-in preloader for loading external files.
  • Use any movie clip in your library to display in your 3D environment
  • Full ActionScript API - including the ability to move the camera through ActionScript
  • Only 15Kb

Requirements
As with any Flash development, you will need to have one of the following to use 3DEnvironment: Macromedia Flash MX 2004, Flash 8 (standard or professional) or Adobe Flash CS3 for authoring (Windows or Mac). Movies using this component may be published for either Flash Player 7, 8 or 9, ActionScript 2.0.

How Much is 3DEnvironment?
Of course the question that all developers and designers ask themselves when coming on anything that is supposed to save them time is, how much money will it cost? Flashloaded lists 3DEnvironment for $59.95 on their site, and at first I wondered if I could find equivalent value for such a product? After viewing the examples on their site and trying out the component myself, I have to give a resounding “yes”.

The time it would take me to build even one of the examples on my own in Flash would take me longer than a couple hours, and even at a cheap development rate, 3DEnvironment by comparison becomes a value. Also note that the license allows you to use the product to generate content for as many sites as you want.

I really wish I had this product when I was working on a product for a house builder, as it would have been very useful to show off the open plots of land, give a quick way for clients to see what houses are already up and for sale, and creating an interactive, easy to use, user experience.

If you are constantly spending too much time building three dimensional environments and user interfaces in Flash, 3DEnvironments could save you time and energy, allowing you to focus on the finer details. Now if only there was something to make me a better graphic designer…

Feature
Post

Category
General

Published Tuesday January 8, 2008 at 11:40 am
By Thord Daniel Hedengren with 33 comments

Finding the Right Text Editor for You

Having the ideal (i.e. “right”) text editor when working on code is important. I spent years and years finding one I liked, and then stuck with it ever since. That editor was TextPad for Windows, probably not the best one out there but it handled text in a way that I was very comfortable with. If I hadn’t changed to Mac I would probably still use it.

Lots of people have still yet to find the ideal text editor, and sometimes it’s just hard to find.

However, while I can use the excellent VMware Fusion software to run a virtual Windows machine on my Mac - something I do for testing purposes - I feel that using virtualization to get my text editor of choice is a bit of an overkill, don’t you think?

So I went looking for the perfect Mac editor, landed briefly on an opensource one called Smultron, and then I found it.

Coda.

I already used Panic’s excellent FTP program Transmit, so giving Coda a go wasn’t a big decision. And boy does it do it for me! I’ve got lots of syntax options, I can upload files from within the editor, there’s a clip library that can be edited, “sites” let me manage my projects easily enough…

In short, Coda is great. I love it.

This isn’t a review of this editor, though, but rather a shoutout to the magnificent Devlounge readers. Lots of people have still yet to find the ideal text editor, and sometimes it’s just hard to find it.

So please make good use of the comments and tell us a little bit of the text editor of your choice. Hopefully we’ll be able to do a follow-up on this, highlighting some of the best ones out there.