Here's a way on how you can do simple validation on text fields.
Type in some text in the input field below. When you press on tab or move the cursor out of the field the validation will take place - which consists of trimming the string and making it as propercase.

To trim a string means that leading and trailing white space is removed. Making a string as propercase means that the first character becomes capitalized. Actually this is true for each new word in the text box. Try it!

Text:

What you need is the code for the text box:

<input type="text" id="text1" size="30" onblur="strTrim('text1');strProperCase('text1');" />

And the JavaScript functions which look like this:

function strTrim(str) { var elem = document.getElementById(str).value; document.getElementById(str).value = elem.replace(/^\s+|\s+$/g, ''); } function strProperCase(str) { var elem = document.getElementById(str).value; document.getElementById(str).value = elem.toLowerCase().replace(/^(.)|\s(.)/g, function($1) { return $1.toUpperCase(); }); }

Here are some more sketches and inked drawings from the ”Black-book”. Just like in the movie ”Style Wars” when they are sitting round a kitchen table or together drawing what will be the next design. Thinking of what is going to be the next piece. Giving each other names or taking a name was a way of giving one self a cool identity and practicing till perfection. When the name had been bombed enough one would make more pieces that where tagged by ones name. This time I made a dude that has finished his initials ”ety” – Ecstatic Trippin Youth. He is covered up a bit in order not to be recognised and not to get breathe in to much paint. The text is to remind you of the old 3D style one often used back in the seventies and eighties - lines enhancing the perspective and depth in the mural and design. The dude on the side gives it a feeling that the art-piece is really big. I have given the lettering some arrows too – just to give it some of the old vibes from the past. Every one has their own way of making the arrow… So this is one way!

The general form of a switch statement looks like this:

switch (expression) { case const1: code case const2: code case const3: code default: code }

The expression:

- A switch's expression must evaluate to values that can implicitly cast to an int - in other words char, byte, short, int and enum. This means it can be a call to a function as long as the function return the right value.
- It can only check for equality, that is not greater than or less than or something like that.
- Boxing is allowed. See example 1.1.

Cases:

- Case constants are evaluated from top and down. The first case that matches the expression is the entry point in the switch clause. After entering, execution will continue for each subsequent case statement unless there is a break (see below).
- The case constant (for example const1 above), must evaluate to the same type as the switch expression can use and it has to be a compile-time constant (see below).
- There can not be more than one label using the same value. See example 1.2 which is illegal.
- The special case "default" can be used for the cases when there are no match.

The break statement:

The keyword "break" can be inserted at the end of each code block for each case statement, After entering some case statement that code block will run. If it ends with a "break", execution will immediately move out of the switch block. If there is no "break", execution will continue for each case statement until a break is found or until the end of the switch clause, this is referred to as fall-through. See example 1.3 for a simple example that uses "break".

Compile-time constant:

The definition from Sun is:

A compile-time constant expression is an expression denoting a value of primitive type or null or a String that is composed using only the following: Literals of primitive type, null and literals of type String

So for the case of a switch clause, the compile-time constant is an int or a type that can be implicitly cast to an int and that can be resolved at compile time, which means that a case constant can only be a constant or a final variable that is assigned a literal int value.

Example 1.1:

switch (new Integer(2)) { case 2: System.out.println("This works!"); }

Example 1.2:

switch (x) { case 2: System.out.println("2"); case 2: System.out.println("2"); case 3: System.out.println("3"); default: System.out.println("default"); }

Example 1.3:

switch (x) { case 1: System.out.println("1"); break; case 2: System.out.println("2"); break; case 3: System.out.println("3"); break; default: System.out.println("default"); break; }

As you might have seen I have made a few eagles and also mentioned that many eagles through time have been double-headed. So this time I felt like designing an eagle like that. I have given the eagle some broad outlines and detailed feathered wings. But still it´s a plain and straight forward style of tattoo or design in general. The outline gives it a more dominant look and more appealing in a visual aspect. (In this case anyway.) If it had been a corporate brand or logotype it might have had a different approach. The two-headed eagle is a strong symbol almost majestic.

Already in 1433 the German-Roman Emperor had a double-headed eagle on his shield and imperium. In 1806 Austria took the eagle as nation-symbol, until 1919. It still is Albanias symbol. It´s been speculated that the eagle had two heads because there was a German-Roman Emperor and at the same time he was the German king.

Take a chance to read more about symbolism and what symbols have been standing for and still are today. There are alot of books written on the subject. So just like me you can interpret and make new symbolism or use old traditional symbols and turn them into new ones.

Lotus Notes uses documents to store data. The data, a document, is often presented using a form. A specific form may not include all fields in a document though and therefore, if there's a need to change a field value that is on the document but not on the form, there is suddenly a problem for a regular user with no designer rights or knowledge about this.

This can be done in several ways, here are two:
1) Modify an existing form to show the field you want to change (as editable).
2) Create an action or agent that runs from the menu on a document that lets you modify a field and save the document using some input dialog box for example.

These two options requires Domino Designer and designer rights though.

There's another way to do this without Domino designer and designer rights as long as you have the right to write in the document. And that solution is a very handy one which consists of a toolbar button with some formula code, which on a click lists all fields in a particular document and lets you edit them regardless if they are present in a form or not. You can apply this on a selected document in a view or an opened document. Sometimes you may have issues with the field not being saved. If that happens, open the document and put it in edit mode and try again.

Here's how to do it.
Create a new toolbar button. The toolbar (in version 8) can be found under Preferences -> Toolbar -> Customize. Click on New and the following dialog will open. Paste the formula code (listed in listing 1) into the Formula textarea in the dialog box.

Listing 1:

choices := @DocFields; fullChoices := @Transform(choices; "x"; x + " = " + @Implode(@Text(@GetField(x)); ";")); fieldName := @Prompt([OkCancelEditCombo]; "Field Name"; "Select a field name from the combobox list."; ""; FullChoices); fieldName := @Left(fieldName; " = "); oldValue := @GetField(fieldname); newValue := @Explode(@Prompt([OkCancelEdit]; "New Field Value"; "Please enter the new field value." + @Char(13) + "For multivalues -- don't put space after ;"; @Implode(@Text(oldvalue); ";")); ";"); adjValue := @If(@IsNumber(oldValue); @TextToNumber(newValue); @IsTime(oldValue); @TextToTime(newValue); newValue); @If(!@IsError(adjValue); @Do(@SetField(fieldName; adjValue); @Prompt([Ok]; "Field change completed"; "Old field value: " + @Text(oldValue) + @Char(13) + @Char(13) + "has been changed to" + @Char(13) + @Char(13) + "new field value: " + @Text(newValue))); @Prompt([YesNo]; "Change field value"; "New value not of same type as old value. Set field to text?"); @SetField(fieldName; newValue); "")

To use this button correctly you have to open a document in edit mode and click on the button. You will get a question to save on close when done if there is not already a save button in the form. Here's a screenshot on how it looks when you press the button for a specific document. Click on the scroll list to list all the fields.

Now as the headline reads – there are a lot of restaurants, cafés, sushi-places and the city is full of wifi places. All these subjects have been up for questions and thoughts by Mr. T. Valentine. He has started up a new concept that he recently launched. I mentioned in my previous article: ”Sushi on the map” that Nic had had a chat with him and reviewed the development part of these different websites.

sushikartan.se, wifikartan.se, cafekartan.se, restaurangkartan.se.
Kartan meaning = map.

The question is: does the client, web-surfer or viewer know that all these concepts are from the same company or that it is all thought out and handled by Mr. Valentine? A great way of strengthening a brand or string of websites / companies is to have a logo-family - a group of logos that are in some way connected or give the same feeling or vibe. Even colours give a feeling of that they somehow belong together. So if you look at all four logotypes for the different websites you can see that I have used the red ”Map-dot” as a familiarity and eye-catcher. The red often catches the eye and so do round shapes at a first glance. The red dot symbolised the Japanese flag in the sushi-version, the red dot can also symbolise wireless technology and places with the possibility to connect to free wifi, and the red dot on the cups can give the cup a coffee-brand look and vibe. Finally the last restaurant-version is a fork and knife. Here the red dot symbolises the plate.

These four versions all have in common that they have the red dot and are made in red and black on white - giving them a clean look for the viewer. But I have to say - that the most important subject the red dot stands for - is a location dot/point. Where can you find these places in the world and what kind of reviews did they get? So, just like a map-pin indicating “you are here”-dot on maps in public places… this gives you the “oh, here it is” feel!

We are showing this for Ted today. Enjoy!

A while ago I travelled to Barcelona. This is an inspiring city indeed. Everything is moving at a creative pace and people can walk around and dress just the way they feel like. This could sound a bit conventional – but I mean it like they really make the city feel extra vibrant and on the move. I have been to Barcelona before and visited the Gaudi museum… This doesn’t mean that one should not go again. One has to! There are more things than this building of course – but I want to start out with this shot.

He lived 25 June 1852 to 10 June 1926. It’s incredible that Gaudi could persuade the rulers of those days that this was the way to build apartments and buildings. I myself have some great ideas on buildings that I’ll have to present on Wohill some day.

The Casa Milà – or also known as La Pedrera – I visited and have taken many pictures. Here I have taken one of the chimneys on the roof-top. These smooth looking chimneys with their suttle shapes look really appealing for being chimneys! There were also some of the chimneys that were covered in broken glass-bottles. Take your time and enjoy this picture and the blue sky in the background.

I have come across three different documents lately which can be worthy reading for a Notes developer or administrator.

- Domino/Notes Coding standards (John J. Coolidge - Avid Technology, Inc.)
- Performance basics for Lotus Notes developers (André Guirard - IBM)
- LotusScript Language Guide (IBM)

The "Domino/Notes coding standards" is a document with suggestions for how to code and comment on your LotusScript code. The "Performance basics for Lotus Notes Developer" is a document that describes, discusses and suggests on how to think regarding performance in Lotus Notes Domino applications. The "LotusScript Language Guide" is simply an advanced guide to LotusScript - a must for every Lotus Notes developer.

Just to be clear - these documents are not written by me, this is only a reference and recommendation to them. The documents reside on our server for download.

"Performance basics for Lotus Notes Developer" can also be found here and "LotusScript Language Guide" can also be found here. The coding standards document is a document that floats around on the Internet where I found it.

Spray-canart has really evolved through the years. I remember early pieces they were impressive then but maybe today they are more “cult” than masterpieces. Still, there were a lot of good talented artists out in the world. I guess the thrill was there and showing of your piece next morning.

Every day is still not giving you the opportunity to make a great masterpiece or whole-car but you will have a sketch-book lying around that you can fill with some cool-art to be.

I made a graffiti-rabbit that is in the making of his latest creation. He is thinking about the final touches? After a whole night spraying away he is pretty tired as you can see. The eyes and the unshaven face say a lot about how the night has been. The cigarette is hanging out of the mouth and the smoke slowly rising. The big can gives the feeling that it is extra heavy? I might show his work of art some other day.

There is a pretty cool site called Graffiticreator.net that every month has some art competition going. You can submit your mural or your sketch and people can vote and finally there will be a winner announced.

Google has many different fantastic API's of which I will make examples of and publish here now and then. But today I will tell you how to make a simple pie chart that is created only be building an URL of a specific format.

Here's an example of a chart which shows Wohill's categories and the number of subject in each category on a fancy pie chart as of today.

The url is embedded in the image so this is not a stored image on our server.

Follow this link if you want to study the link in the address bar, It is very long and you can try to change a parameter here and there and notice the difference in the chart.

The link is composed on this form:

http://chart.apis.google.com/chart?cht=p3&chd=t:75,25&chs=350x150&chl=Foo|Bar

Now imagine that you can create images like this, and many more different kinds, using the Google Chart API in a more dynamic way in combination with for example PHP and SQL. That can be some really sophisticated apps.

Also see the API for ideas on how to further change the appearance of the chart. For example, if you exchange the parameter "cht=p3" with "cht=r" you'll notice a different appearance of the data, although maybe not that useful...

There is a lot of art made by graffiti-artists throughout the world. It started thousands of years ago with murals and wall-carvings. A few lost ones were probably carved in wood. I guess one can say that graffiti has many ancestors and there are even more ways of interpreting where and who started the graffiti craze. Many would probably debate and say that it is vandalism but I would like to say that a lot of it is art. Looking back at the days when the kids in school ran around with their ”black-books” and had heaps of nice sketches of potential murals, hole-cars and wall-art. A lot of graffiti often wants to debate society…

The sketch I am showing you this time is a graffiti artist clinging on to a banister on a subway-train. Might be the night he is of to paint the town. He has a scarf partly over his face and backpack filled with cans… Hopefully all the favourite caps are in his pockets. A spray-can came in the picture to – more like a symbol for one of the main things you need for your work of art. His street-name is ”Ph”. Now keep the streets clean but never forget about what is art.

I am and have been preparing for the Sun Certified Java Programmer 5 exam for 1,5 years now. The preparation has been mostly theoretical but also quite some non-theoretical practice like different examples and exercises. I have also written a few Lotus Notes Java agents in my daily work as a Lotus Notes and Domino developer and administrator. I am still very glad that I took this decision and my plans are to complete the certification at the latest in october this year (2008).

I would like to state that I know the Java syntax pretty good now. I need some more practical training and assignments to be really good and familiar with it but that will come with time and experience.

When I decided to go for it I put up a small plan to follow and that was to read two books and to get as much practical training as possible during this time,

The first book to start with that I really recommend is called Head First Java. It is very popular and has gotten many good reviews. You should be somewhat familiar with programming though to get the most out of it. Preview the book at Google books.



The second book that is very good as well is called SCJP Sun Certified programmer for Java 5 Study Guide. This book covers it all that you need to know to pass the exam. It is required that you really understand the language but you will get some extra hints here as well. Preview the book at Google books. Both books are written by Kathy Sierra and Bert Bates which has written numerous of other good technical litterature.



I will finish this book at the end of the summer and then test exams will take over the reading. Together with the SCJP book comes lots of practice exam questions and besides this there are many sites to visit to get more.

I will put up a Java reference page as well later on for those of you that might be interested. Who knows, some of the future projects of Wohill might come in Java flavour.

There are lots of different places in homes or restaurants made or thought to be made for dining in. This way of recreation with family, friends or business-relations means you want to give the chamber the right emotional feeling to your guest. This dining-room chair is elegant and stylish made in black, piano-blanc dark wood and has a checkered soft seat with a high back - the high back to give the room a hint of the chairs even when the guests are sitting in the salon. Three brass bars “…to give a little warmth…” as Josef Frank would say – and brass-coating on the bottom of the legs of the chair. The top of the back has a slight bend to give a nicer feel when you lift the chair and a slight rising part at the outer end corner to give extra lift and ending of the frame.

The chair could be made in several types of wood too and also different seating materials. The pattern I made before could also be an alternative – that one with a reddish-brown type of wood or even a red or green coloured chair. Now, these options are endless and my tip would be to decide first when you know where the chair will be used and for what purpose. Surrounding environment can also be very influential in your decision concerning this dinning-room chair. This is the fifth chair made for Wohill!

This is a photo that I took about a year ago. It is the shadows of me and my son Theo when walking in the sun. I like this photo very much because to me it represents different things. Both as what it really is, a photo of the shadows of me and Theo when he was 1,5 years old and we took a walk in the sun. I remember what clothes he was wearing and also what we were doing at the time, It also represents a timeless picture of love or friendship since this could be any two people.

I added this photo to facebook to the Owned application a while ago and someone named it "We come in peace...". That is also a very interesting interpretation and I assume that it refers to aliens visiting us. That usually is a picture where two different species meet in peace or when they come hand in hand - but always in a mysterious way as shadows.

Somehow this photo also symbolizes how different people imagine and associate.

Do you get other associations? Let us know in the comments!

André Guirard - Project lead for the Domino Designer client has a blog named Best Practice Makes Perfect. He is very knowledgeable about Lotus Notes and Domino and has lots of good information there and also contributes a lot on the forums. Todays post will highlight a recent application he created and made available on his blog for managing profile document in Lotus Notes. It's not that difficult to make a profile document visible but it is certainly a good thing to have an application that manages them all.

Download and unzip the zipfile and move the ns6-file (which is compatible with version 8) to your data folder (or somewhere else). Then copy the form "Profile Document List" to the database in which you want to manage profile documents. The form is accessible in the Notes client through "Create -> Other".

Read more on Andrés blog for download and further information.

- And woman! Pictograms are used in lots of different ways. Today you can see pictograms on everything from dairy-products to toilet-doors and on the web. This is a symbol or little picture that illustrates in the simplest way what it stands for. This prevents us from having to use loads of text and verbal information. Other places where you can see lots of these symbols are airports and on road-signs.

There is a nice book written by Rayan Abdullah and Roger Hubner about pictograms. They have taken photos and collected lots of symbols and written the book: Pictograms Icons and Signs. (A guide to information graphics)

I have made a very typical symbol for rest-rooms this time. I made the background red to give it some extra visibility. The man and woman symbols have to be alike but still tell the difference, in a clear way, between gentlemen and ladies. I think this button kind of pictogram with the white reflection gives you an extra feeling for pushing it. So it could be made into a door-handle at the same time. I have made some signs for a company working with information-boards – these will of course be some of the symbols that I, or they, will use. This is a project that spans over some time so I might show you some more pictograms later on in the near future.

Some time ago I created a so-called Google Gadget. A Google Gadget is a simple HTML and JavaScript mini-application served in an iFrame that can be embedded in webpages and other apps. It can also be put on your personalized Google page, i.e. iGoogle, if you have one that is. Gadgets can also be used on for example Google Maps, Orkut and docs.

My gadget gets the latest content from IBM developerWorks. This site contains a lot of material for several different categories and therefore I made it possible to choose which category to display, how many items to list and the option to display them with or without a summary.

The gadget is not really made as a sidebar blog-widget, but rather as a gadget for iGoogle. It can however be adjusted to fit in for 180 or 200 pixels on a blog and still look ok. Copy and paste the code below to your blog for this purpose. However this will display the 4 most recent articles on latest content with no summaries. If you want to show anything else you have to adjust it yourself here. The gadget can always be found in the gadget directory where you can choose to add it for iGoogle or to your webpage.
<script src="http://gmodules.com/ig/ifr?url=http://niklas.waller.googlepages.com/dev_works_lib_view.xml&up_choose_library_view=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fviews%2Fjava%2Frss%2Flibraryview.jsp&up_show_summary=0&up_num_entries=4&synd=open&w=200&h=240&title=developerWorks+technical+libraries&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

Here is how it looks like when you add it for iGoogle.


When used on iGoogle you can as mentioned above easily adjust what to display. Do this by clicking the little arrow in the header and choose "edit adjustments". This little box will open up where you can tune what to display.


If you are a Lotus Notes/Domino person there is a category for that. There are also categories for Java, XML, Web development and much more.

Behind all this is some XML and JavaScript development, not too advanced though and you will get a lot of help from the Google Gadget API Overview. You can also look at the code behind existing gadgets to get ideas on how to do certain things.

I have of course ideas on how to make cool gadgets for Wohill on design or development topics which will be published here when that time comes. Feel free to post any questions that you might have and I will help you or guide you in the right direction if I can - to speed up the development process.

I think I have ended up in a dragon-craze this week. Felt like sticking to this subject once again, but with a bit of a different approach. In tattooing there have been different trends and designs going on for ages. Something very graphic is the tribal tattoo or tribal patterns weaving in text or just making nice shapes over skin and body. The previous dragon was more of a detailed design. This one takes almost as much preparation but feels more like a symbol or pictogram. The swaying body of the dragon and its claw-like legs and feet resemble and are inspired by “tribals”. I made the claws almost like fire and clouds to get that into the design without making them separately.

If you are on your way to a local tattoo-artist to get the tattoo you have been thinking about for a long time - get one that symbolises you and the stage and place you are in today. Maybe get one symbolising a good thing in life that you have right now. Like a celebration of the day or person you want to honour. A lot of tattoos symbolise someone you miss or have lost. Today – get one that makes you feel good – a symbol of strength – the dragon!

When developing a web form where you want the user to type in a date, you will have to validate the input so that it is on a form that fits the system needs. This will require the user to understand which format to use and it will require the system to validate properly and to give feedback if the format was wrong. This is not a very good solution and it does not look that good either. A neat solution is to use a date picker instead. This way the user can't make a mistake and it will be very easy to use.

I found this solution made by Julian Robichaux, the host of nsftools.com. He is a very talented developer and if you browse his site you will find lots of good free stuff to use. His date picker came in handy to use for me and I will explain how it works and how to install it here.

We have a text field in which we want to put a date chosen by the user and it has to be on a specific format. First we set the text field to be disabled so that you can not add any text to it. By pressing the button "Select date" a date dialog opens from which the user can choose a date. When clicking on the date it is pasted on a specific predefined form into the text field. This is done by using a JavaScript function which allows for different formats, which can be read more about in the JavaScript comments. Go ahead and try, click the button below!



Add this css-file and this JavaScript-file to the head section of your web page.
After that all you need is this little piece of code and you're on:

<input name="theDate" id="publishDate" disabled="disabled"> <input value="Select date" onclick="displayDatePicker('theDate', false, 'ymd', '-');" type="button">

See more information about the datepicker on nsftools.com.

There are several strong symbols and figures used through time to give us feelings of belonging and creatures to identify with. Many of these symbols have been drawn on walls – caveman painting and carving in stories and pictures from years ago - up until today when graffiti is a well-known art form. These different or similar, if you wish, ways of expressing feelings and symbols of strength have also been used in tattoos. The eagle is a very common bird used as a symbol of strength… So is the dragon, which I have used this time, with its twirling up and stretching out of its tongue and huffing and puffing flames and smoke. I have been inspired by Asian art to make this tattoo. I started out drawing it in black and white to get the shapes and feeling right. I might show you a coloured version later. So back to the dragon - it has many scales and a flame-like tail as many Asian dragons have. I think that this tattoo is meant to give you a resemblance from the past and still feel like an up-to-date modern tattoo theme.

So if you get the possibility or chance to get one made by one of the great tattoo-artists in the world you might want to use this as inspiration - or even ask me to design a tattoo for you. (Maybe even tattoo you.)

Check out the wallpaper to see the hole dragon.

Time to get up for some coffee and breakfast in Ft. Lauderdale Florida. I was visiting Florida about a couple of months ago and came across this sunrise view almost every morning when I came down from my room for breakfast. I naturally went for a swim and a stroll along the beach. All these elements, sun, wind, and the surf hitting the beach really gives you, or me anyway, lots of inspiration and good vibes. This was the same trip when I had the pleasure to pass by Benihana and have a great dinner.

Nic and I had a talk about more things coming up on Wohill. One of them could be the following: something we both do is to take a lot of pictures, on our travels, or adventures wherever we go. Even just a spin on the town can give great opportunities for a nice picture. So we are adding some photographs when we get the chance. Maybe one of us could interest you too. Well - that might come next time we post a picture.

A photograph can actually give lots of inspiration and ideas. So enjoy this shot from Florida and dream away to the sunrise and see what this day can bring.

If you would like to translate a text or an entire site from one language to another you should try Google Translator. I tried it on a few sites and it's not the best result but quite understandable.

There is also a dictionary from-to several languages and a little gadget which you can add to your webpage. We have added it to Wohill as well as you can see to the bottom left (at least for some time).

Add this script code to get the gadget:
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

You can make some personal adjustments by changing the querystring in the url:

up_source_language=en&w=160&h=60&title=&border=&output=js

The gadget on Wohill looks like this (in swedish):


When you choose to translate a site, either via Google Translator or via the gadget, your site will appear with a different address and a different language but otherwise look (almost) the same. This is how Wohill looks in german:

When you move the mouse over any text a popup window appears (as in the picture above) which shows the original text and a possibility to contribute to a better translation if the one provided was poor.

This is one more chair-model in the “Flows” series. A flower-inspired seat made for sitting of course. This chair as you can see in the front view actually looks rather common. If you check out the side view it has a foot far away from the seat. This chair will have a slight swaying feeling when you sit in it. It can be moved left or right so you easily can float around in the room. The main seat is made in white polished and waxed glass-fibre to give it a flower-head look. The seat is purple and very soft just as the number 03 chair. Both the seats I designed are thought to be in large apartments or big spaces that let each chair act out its specialities – swaying and moving. For the materials in the swaying stem of the flower I would use a steel tube or maybe carbon-fibre. Even a combination of both would actually be the best alternative.

I feel like making even more versions of this chair-series … so there might come a few more soon again. Would be great fun to build a prototype too!

I’ll have to make a symbol or logotype for these series of chairs some day - probably would like to enhance the shapes used to design the chairs!

We are using drag boxes at Wohill to put information that can be easily accessed to save space.

An example is the wallpaper section to the left. The three latest creations are visible directly as links. To see all the others you can click on the fourth option "more..." which opens up a mini-window containing all wallpapers links.

This mini-window is really a so-called div, an HTML-element, that is there all the time but gets visible when clicking on "more...", This saves some space but another advantage with this solution is that you can click and drag and drop this little box or window all over the webpage.

Look at this dummy box:

If you place the marker on the orange bar that says "Drag-and-drop" and click and hold, you can drag it all over the web page. And it will still function the same way and still have the same content.

You can easily implement this on your own and tweak it for your own purposes.
What you need is a stylesheet with the following elements:

<style type="text/css"> .aBox { background-color: #FFFFFF; border: 1px solid #000000; color: #000000; padding: 0px; margin:0px; position: relative; }. aBar { background-color: #E1771E; color: #ffffff; cursor: move; font-weight: bold; font-size:12px; padding: 2px 1em 2px 1em; } .aContent { padding: 10px; } </style>

You need to add the actual HTML-code for the div somewhere:

<div id="boxToDrag" class="aBox" style="width: 200px;"> <div class="aBar" onmousedown="dragStart(event, 'boxToDrag')">Drag-and-drop</div> <div class="aContent" style="width: 100%;">This is the text that can also be a <a href="http://www.w3schools.com/" class="comments" target="_blank">link</a></div> </div>

And you need some JavaScript. Put it in the "head"-section or where you have your JavaScript:

<script type="text/javascript"> function Browser() { var ua, s, i; this.isIE = false; this.isNS = false; this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); // Global object to hold drag information. var dragObj = new Object(); dragObj.zIndex = 0; function dragStart(event, id) { var el; var x, y; // If an element id was given, find it. Otherwise use the element being // clicked on. if (id) dragObj.elNode = document.getElementById(id); else { if (browser.isIE) dragObj.elNode = window.event.srcElement; if (browser.isNS) dragObj.elNode = event.target; // If this is a text node, use its parent element. if (dragObj.elNode.nodeType == 3) dragObj.elNode = dragObj.elNode.parentNode; } // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Save starting positions of cursor and element. dragObj.cursorStartX = x; dragObj.cursorStartY = y; dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0; if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0; // Update element's z-index. dragObj.elNode.style.zIndex = ++dragObj.zIndex; // Capture mousemove and mouseup events on the page. if (browser.isIE) { document.attachEvent("onmousemove", dragGo); document.attachEvent("onmouseup", dragStop); window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) { document.addEventListener("mousemove", dragGo, true); document.addEventListener("mouseup", dragStop, true); event.preventDefault(); } } function dragGo(event) { var x, y; // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Move drag element by the same amount the cursor has moved. dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px"; dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px"; if (browser.isIE) { window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) event.preventDefault(); } function dragStop(event) { // Stop capturing mousemove and mouseup events. if (browser.isIE) { document.detachEvent("onmousemove", dragGo); document.detachEvent("onmouseup", dragStop); } if (browser.isNS) { document.removeEventListener("mousemove", dragGo, true); document.removeEventListener("mouseup", dragStop, true); } } </script>

I got the code and idea from Notessidan, which in turn got it from BrainJar.com.

This drag-and-drop functionality can pretty easy be accomplished using Dojo as well as I will explain and give examples to later on.

One obvious extra-feature that should be added that I can think of is to "remember" the drag box settings for each user. This should be quite easily done using cookies. I will implement this sometime soon and let you know here as usual.

A chair or sofa gives the room a lot of impact, naturally depending on the size of the chair or sofa – or the room. No matter whatever you want to call it - I would say that it can give an uplifting feeling to sit in a chair like this one. The thing is that you can enjoy the seating and the sitting experience at the same time. Here there is an island in the middle, this being the base of the chair, with plants growing and reaching up into the room. Rising slowly and moving slightly all the time. Here you grab a flower and turn it over – there is a soft sitting area for the tired and less inspired. Sit softly down and the flower will slowly and carefully lift you up. This slight movement will give you new perspectives of the chair and the surrounding room. So it’s a flower and a seating-area… So these chairs should be called “Flows” – flower-seats. So when you have floated enough, just stand up and the flower will then return to its upside-down position again - fluffing up the nice soft seating-area again for its next guest sitter.

So sit down and let your eyes get busy… if getting nauseas - just close them and dream.

There are many ways to create a web site for good search engine optimization. One of the things you should look into is creating a sitemap for your site.

A sitemap is a page that lists all (or at least the most important) pages on a site and the path to them.

Some say it is enough to just list them (the HTML-way) as links (as they are) or as links in a structured list to indicate on which level they are located. Others say that the sitemap should follow a special protocol, a specific xml-structure.
Both will do good to your site but the latter is better since it will provide web crawlers with more hints in a really structured way to do a better job crawling your site. This way is also the official way on how to create and use sitemaps.

All about sitemaps can be found on sitemaps.org. How the sitemap should look like is specified in the protocol (the Sitemaps XML format),

The sitemap can be named anything as far as I know even though the common name is sitemap.xml. You can create a static sitemap named sitemap.xml and place in the root of your site or you can create a dynamic one that changes instantly on new changes on the site. And that's also how we have done it here at Wohill.

According to the protocol (where details, examples and further explanations can be found) the sitemap should have the following structure:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/sublink</loc> <lastmod>2008-04-01</lastmod> <changefreq>daily</changefreq> <priority>0.5</priority> </url> </urlset>

Your sitemap should contain url elements (tags) for each page/link on your site. Every link /page is represented by an url-element. The url-element or tag contains four other elements: loc (the url), lastmod (when the url was last modified), changefreq (how often is this modified) and priority (the importance of this element on your entire site).

Create a static sitemap:

Write it yourself according to the protocol specification or have it done for you using a sitemap generator; for example this one. It will parse your site for public pages and create a sitemap with default values that you specify before. Place it in the rool of your site named sitemap.xml.

Create a dynamic sitemap:

Write it yourself according to the protocol specification dynamically.
Wohill's sitemap is named sitemap.php. Have a look at it if you want to. It is validated according to several validators so you can safely use it as a reference on how it could look like.

Each time the sitemap is accessed it is recalculated with the most recent content from the database.
More technically the site is build using queries to the database for categories, tags, entries and comments and displayed using php-code and loops.

Making your sitemap visible:

You can submit your sitemap to several places, for example to Google, Yahoo and Ask. Google have their webmaster tools and Yahoo their Site Explorer, which noth allows for more advanced settings, especially Googel. Ask provides a special URL you that can use.

http://submissions.ask.com/ping?sitemap=SitemapUrl

MSN have no formal interface either. To submit your sitemap to the MSN search index, use the following url:

http://api.moreover.com/ping?u=http://yourdomain.com/yoursitemap.xml

You can also, and should also put a reference to your sitemap in robots.txt for auto-discovery. The major crawlers Google, Yahoo, MSN and Ask have agreed on a sitemap parameter for the robots.txt. So basically what you should do is also to create a robots.txt in the root of your site (unless you have one already) and add a row on the following format:

Sitemap: http://www.example.com/YOUR_SITEMAP

The bots visiting your site will always look for the robots.txt. This parameter helps them to quckly find the sitemap.

Sitemap validaton:

It is important to have a validated sitemap as well. There are several validators that you can use and some of them are listed below. If you're not sure why it doesn't get validated, then take a close look at the protocol for more details on how the structure should be formed.
- XML-Sitemaps.com
- Smart IT Consulting
- The W3C Markup Validation Service

The other day my partner and very good friend Nic Waller got the honour to beta test a new webpage starting up any day now. It has several features and possibilities. One of them was informing you where there is good sushi… Or maybe just sushi - depending on the review of course. But according to Nic this was a good way to use maps and easily find the right location.

I have been in on the Asian feeling before with the “empire 23” – design. This time it´s more of a distinct Japanese look.
So we took a look the other afternoon and realised that it maybe needed some brushing up on the logotype – which Nic mentioned for the inventor of sushikartan.se. He had already put someone to work on this issue. A day or so has gone by and I’ve been thinking a bit about the logo even though I don’t think the other designer will fail in his task. You know - just getting that itching feeling in your drawing-board saying: “Get it down on paper”. So I started out with some of the basic things that this website stands for - one of course is sushi – from Japan - also maps showing where these places are and how the majority of people actually do eat sushi. Even people from this part of the hemisphere – they eat with chopsticks.

So I have placed the chopsticks in a map pattern - like something you see from a bird’s-eye view – from above - making it look like buildings on a map. The chopsticks have kept their own shape to enhance their feeling – but still making it look like streets. The Japanese calligraphy is also a feeling I try to get into the symbol too by laying them like this. The red dot symbolizes where the restaurant is placed or situated – and of course symbolises the Japanese flag. To tie up the last knot I gave the ”i” a red dot too – just in case the text part ever has to stand by itself - it should resemble the logotype / symbol. To make things clear: sushikartan = sushi-map.

Good luck with your new project – sushikartan.se.

We have recently started looking for people who would like to guest blog here at Wohill once or occasionally.
If you're interested - send us information about yourself like name, email, website, profession, twitter id (if you have one) and the blog entry, which should consist of a subject and a body.

We will look at the information and if it fits our profile we will publish the blog entry sometime soon (depending on the interest) - you will be notified. The subject should be related to either design or development in some way and in english.

Wohill has been up and running now since January 2008 and is steadily going forward with a constantly increasing number of unique visitors per day. Your post will be seen by many people and indexed very well in the search engines.

Take this chance now and send your info to info[at]wohill.com.

Post any questions in the comments or send an email to the same address!

References / APIs / Portals:

- php.net
- Function list on php.net
- PHP Functions Essential Reference
- PHP Reference Sheet
- PHP Devcenter on onLamp.com
- PHP Classes Repository

Articles:

- PHP framework series on IBM developerWorks

Tutorials:

- PHP Tutorial on W3Schools
- PHP Introduction on tizag.com
- PHP introduction on DevGuru

PHP frameworks:

- Zend
- CakePHP
- Symfoni
- CodeIgniter

Forum:

- php developer's network
- PHPBuilder
- PHP Forum on Digital Point

Debuggers:

- XDebug
- Advanced PHP debugger

Editors:

- jEdit
- PHP Eclipse
- Notepad++

Hosting:

- one.com

Other:

- Current stable release
- XJConf
- PHP Accelerator
- PhpDelicious


This list will be constantly updated. Feel free to suggest any additions.

The chair you see here is also made for a lounge in a public place or thought to fit a greater production-scheme. That thought - I had for the last chair too. If you look at the different parts of the chair – they are made using only a few shapes. So one can use the sitting part as the back support and so forth. That would keep the production-coasts low. Even though the bars are thought to be made of plexi-glass to give the lighter feeling, like ”chair 01” I wrote about in the last article, I chose to make an alternative design to that chair. This ”chair 02” could easily be made into a sofa for two or three people. One could use the bars as legs on a table too. All is up to one’s imagination. This chair would be nice to have in an airport-lounge where travellers could sit and relax and enjoy the shapes of the other chairs.

The armrests could also be made in solid wood or in chrome bars. The different materials of choice would of course have to vary depending on the surroundings. So if you are building an airport or an airport lounge I’ll be glad to help out – designing.

Here is a tip on how to use css on web pages.
As you develop your website you define your css-file and often uses its classes explicitly on the web page. Sometimes there is a need to use behaviour from different classes and you end up with creating a new redundant one for a particular situation.

Here is how you can do to use existing classes by cascading them for extended behaviour for an element on a web page when explicitly declaring them .

The css-structure looks like this:

.ce1 { color:#FF0000; font-size: 16px } .ce2 { color:#0000FF; }

The common way to explicitly use a css-class in an element is like this, i.e. refer to one css-class element:

<div class="ce1">Some text</div>

To use more than one classes do it like this:

<div class="ce1 ce2">Some text</div>

and it will render this way:

It doesn't matter which order the css-elements has in the div class argument - i.e. class="c1 c2" is the same as class="c2 c1".
This way you get the properties of both classes. If the same properties are specified in both classes , the precedence lies in which order the css-classes are declared in the css-structure. Should be the opposite in my opinion.

So if you declare the css-structure like this:

.ce4 { color:#0000FF; } .ce3 { color:#FF0000; font-size: 16px }

the same code :

<div class="ce3 ce4">Some text</div>

will render this way: