Hootsuite ... how sweet. http://ow.ly/2lxBB 2010-08-05 via Twitter
princessdesign.net
Zen
About me

I am Maja Kraljic, professional web manager interested in innovative web marketing, web design, my guitars, running and mountain biking. I live in Slovenia.

Portfolio Portfolio

In recent years I have designed and coded several web pages and some printed material. Here you can see some of my latest projects.

RSS feed
RSS feed

If you fancy reading blogs in RSS readers feel free to add my RSS feed. If not, you can bookmark the page.

Reading material

ToboAds and “2 second” ads

23. Apr 08 | Web

ToboAds is a Slovenian contextual based ad network (similar as Google AdWords and AdSense). It enables various ad formats that contain text and text with image.

Here is an example:

ToboAds Example

It has an interesting concept of charging for displayed and clicked ads. In general advertisers pay 0.2€ CPC (Cost per Click) and 0.0002€ for confirmed ad and publishers get half of it, therefore, 0.1€ CPC and 0.0001€ for every ad that has been viewed for at least 2 seconds. But here comes the question how to know the sistem is working on your site? Maybe your number of displayed and seen ads is low and you want to check how and when your ads get confirmed by ToboAds sistem.

First of all you have to know that (besides clicked ads) the confirmed ads also get you money (0.0001€) so try to optimize the position of the ad spaces on your web side.

Here is an example from princessdesign.net:

Web page with ToboAds

I have marked the browser content area (which can be seen without scrolling) in yellow. These ads get a chance to become confirmed if the visitor sees them for at least 2 seconds. If they get confirmed, you get 0.0001€.

On the other hand the ads positioned lower on the web page are regarded as displayed ads. The visitor cannot see them yet and they cannot get confirmed unless the visitor scrolls down.

How to see if the confirmation sistem works?

  1. First download the Firefox add-on FireBug.
  2. Install it and restart Firefox
  3. Then open FireBug (Tools - Firebug-Open Firebug) and go to a web site with ToboAds, for example http://www.princessdesign.net
  4. In Console tab the request is displayed after 2 seconds any you can clearly see when your ads get confirmed.

ToboAds in Firebug

Here you can see that in this particular case the time was not 2 seconds but rather 240ms. While testing I have also seen cases when the number was between 150ms and 250ms.

What is your experience?

Localization of Slimbox

17. Apr 08 | Design Tips & Tricks, Web

Slimbox is a light version (with some enhancements like navigation) of Lightbox JS. Lightbox can be described as a simple, unobtrusive script used to overlay images on the current page. You might seen both of them on numerous web sites.

Example of Lightbox:

Lightbox

Example of Slimbox:

Slimbox

But how to localize Slimbox into, for example, Slovenian language?

There are few things to do:

1. Localize the images (Next, Prev, Close)

2. Localize the text Image … of …

3. Change the keyboard keys which control Next, Prev and Close

1. Localize the images (Next, Prev, Close)

Under the folder /images you have four gif files: closelabel.gif, loading.gif, nextlabel.gif and prevlabel.gif. Just open the files (in bold) in yout image editor and delete existing text with localized version. Be also careful about the letter that will used for navigation - in original Slimbox c is used to close the overlay, n for next, p for previous (some other keys are also available) - and underline the appropriate letter.

Original Slimbox labels:

Original Slimbox Labels

Localized Slimbox labels (in Slovenian language):

Lscalized Slimbox labels

You can also download these three files as zip file.

2. Localize the text Image … of …

As you can see under the picture there is an indication of the number of pictures in the gallery and the number of the picture you are viewing.

For example: Image 1 of 5

You can change this in the file slimbox.js, line 144. Just replace words Image and of into appropriate words.

3. Change the keyboard keys which control Next, Prev and Close

In original Slimbox you can navigate between images with the following keyboard keys:

Next: n and right arrow
Previous: p and left arrow
Close: Esc, x and c

These can also be changed in slimbox.js, lines 106-108.

You must use JavaScript Character codes to represent different letters on the keyboard.

Therefore the keys are coded as:

Next: n (case 78) and right arrow (case 39)
Previous: p (case 80) and left arrow (case 37)
Close: Esc (case 27), x (case 88) and c (case 67)

And when you want to localize it, just map the right keys.

Example of Slovenian localization:

Next - Naprej: n (case 78) and right arrow (case 39)
Previous - Nazaj: j (case 74) and left arrow (case 37)
Close - Zapri: Esc (case 27) and z (case 90)

Example of the localized code (slimbox.js, lines 106-108):

case 27: case 90: this.close(); break;
case 37: case 74: this.previous(); break;
case 39: case 78: this.next();

Have fun using Slimbox!

YouTube’s Video Analytics

11. Apr 08 | Princess in Love Bra, Web

If you publish videos on YouTube you are also able to see the how many people watched it, where they came from and how they discovered it.

On My Videos page choose the Insight button.

YouTube Videos

Then an Insight page is loaded and you can choose between three tabs: Views, Popularity and Discovery.

Insight > View

Youtube Insight - Views

Insight > Popularity

Insight > Discovery

YouTube Insight - Discovery

The most interesting for me is Discovery, because you can see the source of visits to the video. Then if you click on list of top sources you can see the keywords that were used, pages which link to your video … For example, my video Jesenice Fans in Ljubljana was found by keywords: olimpija (33%), jesenice (8.3%) and olimpija police (4.1%).

Mobile Google Maps and Search

10. Apr 08 | Princess in Love Bra, Web

Mobile Google

After a mobile Gmail I had to add mobile Google Maps and Search to my mobile phone. Maps have a nice feature which locates you on a map. I can’t wait to test it on some of my bike trips around Ljubljana. I wonder if it is accurate enough to never get lost again. I’ll keep you posted …

Here is the link (again): http://mobile.google.com or http://www.google.com/mobile/

Mobile Gmail

10. Apr 08 | Princess in Love Bra, Web

Today I have finally added a mobile application to access my Gmail account from mobile phone. I really don’t know why I have waited so long.

So what to do:

1. Go to mobile.google.com with your mobile phone

2. Download the application

3. Log in and use it - check emails, send them …

I actually LOVE this app because you can use your email account wherever you are. And the User interface is easy to use. I have checked and there is no problem to open a doc file and if there is a phone number written in it just point the cursor there and you will be able to call it. BTW press 7 to delete the email

Happy emailing!

HP web site in Flex

9. Apr 08 | Princess in Love Bra, Web

While I was searching the data about Adobe’s Flex (”Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.” Source) I came across HP’s site - Free Print Projects with HP Print Studio that was build in Flex.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

It actually looks cool :) And there are lots of nice features to test.

Adobe’s Photoshop Express

9. Apr 08 | Princess in Love Bra, Web

Let’s see what Adobe’s Photoshop Express brings to us.

Photoshop Express

The service is currently available only to users from US (according to Membership or Sign-up form), but it works fine if you select US as your country.

After your Photoshop Express ID is created you must verify your email and then you are able to start uploading, organizing, editing, storing (up to 2 GB) and publishing your pictures.

This is how it looks the backend:

Photoshop Express - Backend

First, I wanted to upload photo and see what I can do with it. Upload is easy, and as I can see you can also upload the files from Facebook, Photobucket or Picassa. I am missing a possibility to upload from Flickr! The uploaded photos can be placed into Library or Albums, you can add a caption, rate the picture and of course edit it.

So which editing features are available? In Basics (Crop&Rotate, Auto Correct, Exposure, Red-Eye Removal, Touchup, Saturation), Tuning (White ballance, Highlight, Highlight, Fill Light, Sharpen, Soft Focus) and Effects (PopColor, Hue, Black & White, Tint, Sketch, Disort).

It’s not exactly a set of tools that Photoshop can offer but it’s enough to do some basic editing. If you are advanced user it’s still better to use layers, masks and other fancy features of Photoshop and upload the edited pictures in Photoshop Express.

 Page 4 of 6  « First  ... « 2  3  4  5  6 »
Clear