So this is my recommendation if you want a book to read this summer! And yes, there’s a ’second edition’ of the book and that’s the one you should go for.

Have a really nice summer everyone!

Best regards,
Simon

This short quote from the guys and girls over at Varien pretty much sums it up:

“With Magento mobile, you can easily create branded, native storefront applications that are deeply integrated with Magento’s market-leading eCommerce platform.”

There’s no reason for me to write more about it, go check it out, watch a demo and read more about it here.

// Simon

You’ve probably ran in to the companies out there who do nothing except register domain names and sell them to a much higher price than what they bought them for. In the media you can read about global corporations that spend millions of dollars on domain names. You probably regret that you didn’t foresee this hype for ten-fifteen years ago which would have made you a millionaire if you’d have played your cards well back then.

I guess that theese names actually can be worth all that money today but what I wonder is if they will be worth it tomorrow? What we experience more and more on the web is that the content on your site is what’s important, not the address to your site.

According to Wikipedia, the actual purpose of a domain name is to “…provide easily recognizable and memorizable names to numerically addressed Internet resources”. That’s true, it is much easier to remember a domain than an IP-adress. According to http://www.domaintools.com/internet-statistics/ you can see that there’s over 100 million different registered domain names today (I haven’t double-checked the numbers, we all know there’s many domain names registered and that’s enough to prove my point (= ). That amount is only including the major top-level domains. No wonder it’s hard to find an available domain name and many sites gets a domain name that don’t really reflect what their company name is or not even that they do.

Because of the increasing amount of different domain names and the massive increase of content on the web no one really remember the domain names anymore (maybe except from big corp sites such as facebook, youtube and so on). Many just use a search engine to find what they’re looking for and I see that more an more people actually google for sites they know the address to.

Domain names are important to search engines today but if the web is going where we think it’s going we can really wonder if domain names will be as important in the future as they are today. Will they even still be used in twenty years from now?

/Simon

The Web Browser Choice is according to the European Commission a deal between The European Commission and Microsoft. The European Commission believes that Microsoft has taken advantage of their predominant position on the European market by providing Internet Explorer as the standard browser on Windows.

Therefore, Microsoft users that use XP, Vista and Windows 7 and has choosen Internet Explorer as their standard web browser will after a windows-update, be provided with a browser choice screen where they can decide that they want to use another browser than Internet Explorer if they want to.

As a web developer I really like this decision, since it can get us further away from IE6 and make unaware Internet users more aware of different browsers. I’m not sure how much effect this will have, I guess most users will wonder, what is this? Do I dare to click on this or will my computer explode if I do so?! I know a few persons that will have this reaction…

Event though I like it I don’t really like the idea that the European Commission can tell Microsoft they have to do this, even though they have a point. It’s not that you actually can’t use another browser than Explorer on Windows. There’s nothing that’s stopping you to install whatever browser you’d like on your windows machine. Why shouldn’t Microsoft be allowed to ship Internet Explorer with their OS? Why don’t the European Commission tell Apple to also provide this web browser choice window-thing?

Maybe we’re just not there yet or what do you think?

/Simon

Do you want to know how the web developer will grade your work and how you can improve the end-result of the entire project and cut costs? Read on.

Background

As many of you know, when you convert a design into a web site, the developer needs to be able to separate almost everything in your design into pieces. Like show and hide things, merge stuff there and here and so on. This has to be done to be able to extract the graphical elements that the web developer will use in the markup/css. This is, for instance, one of the main reasons why web developers don’t like to get the design as .jpegs. Stop sending us .jpegs!

If the .psd (or whatever it is you’ve made your design in) is logically divided into grouped layers with descriptive names (such as header, footer, search form, btn-background) etc where you easily can show and hide groups and layers and swap between your two-column and one-column layout with just a click or two this can make a huge impact on the final result.

What can happen if i fail?

If you don’t succeed with this it can, for example, lead to the following unwanted things:

a) When most developers budget their work they reckon that the design is easy to work with. If you’ve made a poor job the developer will need to spend more time on converting your design which will increase the total cost of your project. If you’re on a tight schedule (which you most often are) the launch of the website will be postponed. Which in turn will lead to a disappointed customer.

b) The end result. How your design actually will look and behave like in a browser. If the end result differs to much from your design the customer will be disappointed.

c) Your reputation as web designer amongst web agencies. If web agencies think you know how to design for the web they’ll want to continue working with you. If not, they might seek help elsewhere. Every webdesigner should have common knowledge of how to build a website. If not you’re just guessing how to do things and people will start screaming “Fake! He’s a fake!” when they meet you out on the town on a friday-night.

I’ve come across a wide variety of designs and there’s a lot of examples of what you shouldn’t do.

Example #1

Sometimes you get a .psd where the layers has no structure or logic whatsoever. All layers have been named Layer 1, Layer 2 and so on and they haven’t even been placed in layered comps. That is just crazy and the web developer will rip his/her hair off trying to figure out where to find what and say “WTF? Has the designer gone bonkers?!”

Example #2

One other example is when you get this .psd with a lot of layered comps but the actual structure of the layers is all spread out. You can swap between different views by using the layered comps but as soon as you need to hide a layer or something you have no idea of where to look. This is also crazy. Don’t do this!

What should I do?

So we’ve talked a lot about how you shouldn’t do but you might say, “Well, how should I do?”

My personal opinion is that you should use your common sense. Ask yourself the question “How should I do this to make it easy to understand and easy to work with for others?” If you structure your layers into logical sections you won’t need layered comps. I don’t say you shouldn’t use them, there are a situations where they come-in-handy, but think of them as a supplement.

It should be mentioned that many designers does a great job and has great skills when it comes to do this.

If you have any other ideas or think I’m crazy, please comment!

/Simon

Coda has a fully featured file browser for your local file system and with just a click you can browse the remote file system on the server. You can easily swap between your local and remote file system by clicking on one of two tabs (one tab for the local file system and one tab for the remote). This is a great feature, it’s by no means groundbraking since a lot of different tools also has this feature but it really works smoothly in Coda.

There’s just one thing that bugs me. They’ve placed a small button on top of the tab for the remote file-system that disconnects the connection to the remote server when you click on it.

It might just be me but it’s been more than one time that I by mistake has disconnected the remote connection when all I wanted to do was to browse the remote file system.

I guess this is where design, once again, has inflicted on user-friendliness. Coda is in a big perspective a great example on really good user-friendly design and this small flaw is perhaps not so bad.

Anyone else that has thought about this or has another example?

/Simon

In this second part we’ll take part one a step further and write classes to load images using the XML-file we loaded in part one.

If you don’t remember anything about part one or never read it, you can find it here.

So what we’re going to do is to take the contents of the XML-file we loaded in part one and extract each of the image-url:s in that file and use them to load the corresponding images. To do this we just need to create two classes and update our document class a bit. The first class that we’ll create will be called ImageLoader and the other will be called ImageLoaderEvent. The ImageLoader-class will be used to actually load the images and the ImageLoaderEvent-class will be used to handle the events thats used when loading the images.

Create the ImageLoader-class

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoader.as in the com-folder.
package com
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
public class ImageLoader extends Sprite
{
private var index:int;
public function ImageLoader(url:String, index:int)
{
// This value will be used to know which image
// in the xml-file that's actually been loaded.
this.index = index;
// Load the image
var loader:Loader = new Loader();
loader.load(new URLRequest(url));
// Complete listener
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
onComplete);
}
public function onComplete(e:Event):void
{
// Dispatch the complete event when the image
// has been loaded
this.dispatchEvent(new ImageLoaderEvent(
ImageLoaderEvent.COMPLETE, false,
false, e.target.content, this.index));
}
}
}

Create the ImageLoaderEvent-class

Now we need to create our custom event class that we’ll use to handle the events that we use when we load the images.

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as ImageLoaderEvent.as in the com-folder.
package com
{
import flash.events.Event;
import flash.display.Bitmap;
public class ImageLoaderEvent extends Event
{
public static const COMPLETE:String = "complete";
public var image:Bitmap;
public var index:int;
public function ImageLoaderEvent(type:String,
bubbles:Boolean = false, cancelable:Boolean = false,
image:Bitmap = null, index:int = -1)
{
super(type, bubbles, cancelable);
this.image = image;
this.index = index;
}
}
}

Last step is to update our document class

So now we have the classes we need to be able to load the images. As you can see we’ve added an index-value that the ImageLoader-class takes as an argument and that it’s passed to the event-class when the image has been loaded. We’ll explain what this value will be used for in just a moment. First off we need to update our document class (Main.as) so it looks like this.
package
{
import flash.display.MovieClip;
import com.XMLLoader;
import com.XMLLoaderEvent;
import com.ImageLoader;
import com.ImageLoaderEvent;
public class Main extends MovieClip
{
public function Main()
{
var url:String = "xml/images.xml";
var xl:XMLLoader = new XMLLoader(url);
xl.addEventListener(XMLLoaderEvent.COMPLETE,
onXMLLoaded);
}
public function onXMLLoaded(e:XMLLoaderEvent):void
{
var imageXML:XML = e.xml;
// Get a list of all the image-nodes
var images:XMLList = imageXML..image;
var numImages:int = images.length();
var imageLoader:ImageLoader;
// Loop through each image and load it
for(var i:int = 0; i < numImages; i++)
{
// Get the url from the current image-node
// in our XMLList
var urlStr:String = images[i].url;
imageLoader = new ImageLoader(urlStr, i);
imageLoader.addEventListener(ImageLoaderEvent.COMPLETE,
onImageLoaded);
}
}
public function onImageLoaded(e:ImageLoaderEvent):void
{
// The image
trace(e.image);
// With this value we know which image
// in the XML-list that's actually been loaded
trace(e.index);
}
}
}
As we've said we've added the index-value. This index-value is just there so we can know which one of the images in the XML-file that's been loaded. It's just a nice feature that can come in handy if you need to know this. You might have some information to your image that's listed in the image-node and if you have this index-value you can easily extract that information from the XML-file and present it along with the correct image.

Before you run your code you need to create a folder in your project folder (CustomEvents) that you call images. In this folder you need to add three jpg-images called image1.jpg, image2.jpg and image3.jpg.

The output from executing the code should look something like this:

So what's just happened? What we now do in our document class is that we load the XML. When the XML has been loaded we load each image that's listed in that file and when each image has been loaded we just trace the contents of what's been loaded. We could just as easily have added theese images to be displayed on the stage but for the simplicity of this article we've just traced the contents.

When you get the hang of using your own custom event classes you can get more in control of your code and write larger and more powerful applications. You'll also get a collection of classes that you can reuse in many projects and this will most probably save you precious development-time.

That's it, if you have any ideas about how you could improve this code please write a comment!

In this first part we’re going to use a real-world example and use a custom event-class to load XML more smoothly. We’ll also go through how you create a document class and how you link it to your flash document.

1. Everything starts somewhere

First off, create a folder on your desktop that you call CustomEvents where you can put all the files corresponding to this tutorial. This will be our project directory.

2. Create the flash document:

Open up Adobe Flash (in this case we use Adobe Flash CS4 but the approach is similar if you use another version such as Adobe Flash CS3), choose File->New->Flash File (ActionScript 3.0) and save it as Main.fla in your current project directory.

3. Create the XML-file:

Create a folder in your project directory that you call xml. Add the following code to a file called images.xml and save it in the xml-folder in your project directory. This is the file that we are going to load with the help of our custom event class.
<?xml version="1.0" encoding="utf-8"?>
<images>
<image>
<url>images/image1.jpg</url>
</image>
<image>
<url>images/image2.jpg</url>
</image>
<image>
<url>images/image3.jpg</url>
</image>
</images>
This file is pretty straight-forward. It contains three image-nodes that each of them contain a url-node that specifies the location of each image.

4. Create the custom event class

To be able to streamline and make it easy to use our ActionScript-classes it’s nice (so far it’s possible) to make general classes that you can reuse from project to project. So create a new folder on your desktop that you call AS3Classes and create another folder in that directory that you call com. We’ll get back to how you customize your flash document so it can use the classes you put in this folder. But first off, let’s create the classes.

In Adobe Flash, choose File->New->ActionScript file and add the following code to the file that you save as XMLoaderEvent.as in the com-folder.
package com
{
import flash.events.Event;
public class XMLLoaderEvent extends Event
{
public var xml:XML;
public static const COMPLETE:String = "complete";
public function XMLLoaderEvent(type:String,
bubbles:Boolean = false, cancelable:Boolean = false,
xml:XML = null)
{
super(type, bubbles, cancelable);
this.xml = xml;
}
}
}
You don’t need to create your own event class to be able to listen to all the events you can listen to when you load files but it’s a nice thing to do because you get more control of your code. As you can see the event class doesn’t actually load a file, it just has a few properties that you can use when you load a file. We’ll create a specific class later on that actually do all the loading but we’ll get back to that soon.

5. Create a document class

You can start your code by adding ActionScript directly on the first frame in your main timeline but since we write all our code in classes it’s nice to keep on doing this and that’s why we now need to create our document class.

Choose File->New->ActionScript file, add the following code to it and save it as Main.as in your current project directory.
package
{
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main()
{
// This is the constructor of our document class. This
//is where our code will start.
trace("Hello world!");
}
}
}
Now we need to tell our flash document that we want this class to be the document class. Choose File->Publish settings->Flash (the tab)->Settings. At the top of that popup-window you can tell your flash document the name of your document class that in this case is Main. So just write Main in this input and save all your changes.

If you now press CTRL+Enter you will publish your flash document and if you don’t get any error and in the output-window can read the text (“Hello world!”) that we trace in the constructor in our document class everything is set up correctly.

6. Create our XMLLoader class

We want to load XML and we want to write reusable code that we might want to use on other projects so let’s create a general class that we can use each time we want to load XML.

Choose File->New->ActionScript file, add the following code to the class and save it as XMLLoader.as in your com-folder:
package com
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class XMLLoader extends Sprite
{
public function XMLLoader(url:String)
{
// Load the XML
var urlR:URLRequest = new URLRequest(url);
var l:URLLoader = new URLLoader(urlR);
// Add listeners
l.addEventListener(Event.COMPLETE, onComplete);
}
public function onComplete(e:Event):void
{
// Dispatch the complete event when the XML is loaded
this.dispatchEvent(new XMLLoaderEvent(
XMLLoaderEvent.COMPLETE, false, false,
XML(e.target.data)));
}
}
}

This class takes a url to the xml-file as argument and starts to load the XML and dispatches our own XMLLoaderEvent.COMPLETE-event when the XML has been loaded.

7. Tell our flash document where it can find our custom classes that we save in our AS3Classes-folder

To be able to use our classes that we put in our AS3Classes-folder we need to tell our document that this folder exists. You do that by choosing File->Publish settings->Flash (the tab)->Settings. There are a couple of new tabs and you should add the source path to your AS3Classes-folder here. Do that and save your changes.

8. Wrap it all together

Our next and final step is to instanciate our XMLLoader-class and trace the XML when it’s been loaded. So add some code to our document class so it’ll look like this:
package
{
import flash.display.MovieClip;
import com.XMLLoader;
import com.XMLLoaderEvent;
public class Main extends MovieClip
{
public function Main()
{
trace("Hello world!");
var url:String = "xml/images.xml";
var xl:XMLLoader = new XMLLoader(url);
xl.addEventListener(XMLLoaderEvent.COMPLETE,
onXMLLoaded);
}
public function onXMLLoaded(e:XMLLoaderEvent):void
{
trace(e.xml);
}
}
}

Now the code is ready to go so press CTRL+Enter and if everything is set up correctly you will now be able to read the contents of the XML-file in your output window.

This was more of an introduction to how you can write and use your custom events. In part 2 we’re going to take this code a step further and write code to load images more smoothly and more in-depth descripe how event classes work and how you can customize them.

/Simon

“IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.”

You can download IETester at http://www.my-debugbar.com/wiki/IETester/HomePage

What do I do if I can’t see flash on my site with IETester?:

We’ve noticed that if you run Vista on your machine you must run IETester as administrator to be able to view flash.

List of modern browsers

Firefox
Safari
Opera
Chrome
Internet Explorer 7
Internet Explorer 8

This class describes how you can use link events:

package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.events.TextEvent;
public class LinkEventTest extends Sprite
{
public function LinkEventTest()
{
// Create a TextField
var txt:TextField = new TextField();
/* Due to the width of our column on swedishfika.com
we save our link in a separate variable. */
var ourLink:String = "<a href=\"event:Hello World!\">";
ourLink += "Trace \"Hello world!\"</a>";
// Add the link
txt.htmlText = ourLink;
// Add the listener
txt.addEventListener(TextEvent.LINK, onClick);
// Add the textfield to the display list
addChild(txt);
}
private function onClick(e:TextEvent):void
{
/* Is triggered when the user clicks on the link
we declared above. */
// Traces "Hello World!"
trace(e.text);
}
}
}

When the user clicks on the link the TextEvent.LINK event is triggered and the onClick-handler is executed and traces the string “Hello world!”.

This is a really neat new feature that solves a lot of problems!

/Simon Kjellberg