As you might’ve noticed I haven’t been keeping up with writing here. Partially that was because I was doing an internship and was working on a different subject. But during that internship at least I was working on multimedia. At this moment however I’ve started a new course in business administration.

So for the next 16 months I’ll be working my ass of to get a diploma from Nyenrode university here in Holland. After that.. maybe back into css? But I’ll not be able to keep up with everything that’s been going on thus I’ll not take your time any longer.

I’d like to thank everyone who has read, and will read blogposts in the future, but for now the curtain is closed.

That said, I might write something from a business view about multimedia, so the show is not yet totally over.

Connectholland, the company I’ve worked at for 1,5 years is hiring. They have a total of 4 job openings, 1 for a senior developer, 1 junior developer, 1 management assistant and one project manager. Connectholland is based in Rotterdam.

I would encourage everyone who feels they fit into one of those profiles to look at the jobopenings on their site, as this is a great company to work for.

I’m in the process of getting my bachelor degree and part of that was writing a paper about a self selected subject.

How to optimize a (Flash) website for search engines

Any comments on this paper are appreciated.

Since the 8th of May the new Flex 2.0 beta 3 is available for download from the Adobe/Macromedia site. Wow!

As I’ve only just downloaded it there’s not much to say about it at the moment, except, go and try it out.

CSS Reboot 2006 is a website that promotes websites that did a complete redesign on may 1 first, and adhere to stadards. Everyone that did a redesign could sign up and post before and after screenshots of their website. Which gives a brilliant overview of about 750 newly designed websites.

So, what is hip in webdesign at the moment?

The color green

A lot of redesigns use shades of green. As the colors stand for hope, growth and good health this could be explained by spring and sunshine. It would be an interesting research to see wether green really is more used generally in the spring. This site added some butterflies.

Red is good

But only if it’s really really really red. domestic.net really understood that. But a lot of other sites follow their example.

Colums

Everyone is a fan of colums, with screenresolution growing bigger there is more space horizontally on your screen, and putting everything full of text, well, than you’d better do a new redesign. The obvious trend is colums, columns, columns. Interestingly a lot of people are stepping away from the small menu column on the left, the main content column center, and other stuff in a small column on the right. More and more sites are going for a menu on top, and two small columns on the right. Besides, who said 3 was as many columns you can do? With widescreen coming up we might see a lot more floating designs with mucho columns.

Background color

The vote still isn’t through, black, white, or pick a colour? The background color for text however generally is white, and for the entire site it may be really really red, or green (or any other colour really). With a blackground however the text background often becomes grey. Can’t really decide on a winner in this categorie however. Obviously, there’s always some people that just don’t want to pick and take any colour. Fortunately, I wasn’t able to find any sites with an photo on the background that is repeating. But, some nice background images where used (that site is green again).

Break out of the grid

While people were expecting that more sites ‘break out of the grid’ this still isn’t the case. A table is a obvious case of a grid, which has a strict layout, without colums and such, while with css it is possible to have objects overlap, or take any relative position to each other you like. The only real example of that is this site. And to make matters worse, they’ve actually used tables to make this one.

Personal favorite

Well, after looking at hundred of different sites I of course have my own favorite. I just love the ‘welcome’ on top of the page. Eventhough in most sites I recommend against it. Very nicely done.

Multimedia engineer

Obviously I did not enter in the css Reboot. Complete redesigns are bad for most (commercial) sites as it lowers the customer recognision. And if they do not recognise your site as yours all good will you’ve gotten in the past is gone.

Flash movies play because of a plugin in the browser. This plugin automatigically start up the program/player that is needed to see the content. There are different plugins for quicktime, applets, flash and others. A really nifty invention one might think.

The question is however, whose invention was it? In ninties of the last century a group of smart people from the university of California had a smart idea. So smart, they thought, that actually got a patent on the idea of: ” Distributed hypermedia method for automatically invoking external application providing interaction and display of embedded objects within a hypermedia document “. Which is basically a plugin. Do keep in mind however that plugins weren’t known yet then.

Or were they? The company Eolas has a licence to use this patent and has sued Microsoft for using that idea without paying for it. A judge actually says Eolas is right and Microsoft has to pay the astronomical amount of $521 million for patent infringement. Well, of course Microsoft went into appeal, but to prevent the cost coming out higher if they should loose they’ve made the decision to give out a patch for IE in which the Eolas patent is recognised.

That means, that no flash movie, applet or anything in the <applet> <object> or <embed> tags will work. Of course embed wasn’t a valid tag to start with, so this patch migth well be the way to get it off the Internet. But, there’s still the problem of your content not starting immediately. When you mouse over the flash movie (or other object) you’ll get a message ‘click to active and use this control’. Well, that’s definately not user friendly.

The solution

Luckily there is a way around it, unfortunately it uses javascript. That means that people without javascript still don’t get a working object automatically. The solution is to make the flashmovie start with javascript, and this works around the patent because the patent is on starting external players AUTOMATICALLY when the browsers finds uses for it. In this case, it’s not started automatically, but with javascript, so there’s specific code to make it work.

Adobe (fomerly known as Macromedia) has a page just for this issue, with code examples and explanation why and how this has happened. As they’re bound to update this page when problems with the code appear I’ll only give the link instead of the code itself.

Code example

So for all developers that use flash, make sure you have content fixed, and your users will still get a seamless experience.

Marko Dugonjić wrote an article about an image preloader, which is too good not to mention.

The idea is brilliantly easy. So easy the real question would be “why didn’t anyone think of this before?”. A pre-loader is frequently used with flashmovies, to indicate that they are, indeed, loading. They get these pre-loaders as they tend to get so large you have to wait on them.

But, images can get quite big as well, and as I’ve noticed when using wifi it can take a while before even small images appear on the screen. Of course this isn’t only the problem with wifi but also with slow connections, or just big photo’s. Now wouldn’t it be cool if you could add a pre-loader to images automatically ?

The code

It’s as easy as:

img { background: url(loading.gif) no-repeat 50% 50%; }

“loading.gif” is an animated gif that shows ‘loading’ or another indication that something is happening. Do remember to make this gif as small as possible, 3kb is big enough. So when you visit your site after this you’ll see ‘loading’ while you wait for the images to load.

Some small problem

Eventhough this sounds like a miracle solution it’s not quite that. When you use transparent images the loading will shine through. The only way to solve that would be to attach some javascript that checks wether the image has completely loaded and then removes the background from it.

A better solution might be to give those images

<img src='' class='transparent'/>

With this in your stylesheet:

img.transparent {
  background-image : none;
}

But still, a useful asset to any webdevelopers toolbox.

Dustin came up with the idea to have the first annual naked day. A day on which your site shows off all it’s white spots. So, no stylesheets for 24 hours. The reason behind this is to see how userfriendly your site is to people without css, and that includes (to an extent) screenreaders.

For this reason this site will go without style on April 5th (Wednesday). But, that’s not all, why not spread the fun and join in? Joining up is very easy, follow the link and make a comment. And, for my pleasure, make a comment on my blog as well. Besides usability issues this also is a good test for yourself to see if your mark up is up to standards. With proper semantics this challenge should be a breeze.

So, join me with this naked day, and go skinny dipping.

Since 20 March the new beta for Flex 2.0 is available from labs.macromedia.com.

One of the things that is possible in Flex is giving defining how far from the next object your ‘box’ is.

This was the code in Flex 2.0 beta 1.

<Canvas>
   <Button label="hello, world" />
      <layoutConstraints>
         <Anchor left="10" right="10" bottom="5" />
      </layoutConstraints>
   </Button>
</Canvas>

And now, much slicker and more like css:

<Canvas>
   <Button label="hello, world" left="10 "right="10" bottom="5"/>
</Canvas>

You have x and y already for pixel precise layouts, so the left and right are great to specify where something is in relationship to other elements, without specifically having to call it an anchor.

But most importantly of course is all the bugs that are gone now, making flex a better friend in development.

This topic is quite old already. Every ‘important’ webdeveloper says to follow standards and don’t use tables for layout as there is CSS. But still, almost all beginners still start at tables. Easy to learn, fast to builld why go to CSS?

Search engines

You want visitors on your site, don’t you? Well, search engines don’t like tables as much as css layouts (as long as you don’t have divitus). This is logical, since data buried away in layers of tags must be less important than data that is right there at the top of your document.

So, take off the tables, and all other extra tags (proper mark up saves code) and your statistics will thank you.

Accessibility

A screenreader assumes that data in a table, is tabular data,so the table itself must be important. You do not want to listen to a page being read out as:

“Table with three columns and nine rows, Table with nine columns and one row, Link, Graphic slash knopnieuws.gif LinkGraphic slash knopoverons.gifLinkGraphic slash knopdiensten.gifLinkGraphic slash knopklanten.gifLinkGraphic slash knopvacatures.gifTable endLinkGraphic”

This is a real example of a working website. It in fact shows another accessibility issue. This site does not use alt attributes for images, resulting in “Graphic slash knopnieuws.gif”. While a simple alt=”news” would’ve done the trick. Are you wondering how your site comes out of a screenreader? Try the Fangs extension for Firefox.

Save bandwidth

It’s not something you notice on a small 20 page do it yourself site, but on large sites bandwidth does become an issue. Now compare this :

<table>
   <tr>
      <td class='a'>1</td>
      <td class='b'>2</td>
      <td class='c'>3</td>
   </tr>
</table>

<div class='a'>1</div>
<div class='b'>2</div>
<div class='c'>3</div>

Well, that’ll show em! I’ve saved at least 3 characters in there. But luckily that’s not all. In the example from fangs there were some menu items in a table (not at all a rare sight). So, let’s do that in CSS.

<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>

CSS:
a {
   display :block;
}

That looks better. The css file will be cached and thus only loaded once, so especially on larger sites this will make a significant difference. And, by making setting the display to block I can give a width and height and all other information a table cell has directly to the link. Pretty nifty don’t you think? This is where you’ll really save some bandwidth.

Maintenance

Sergio Villarreal did a test to find out which was better, tables (all old style html) or css (all css). He also kindly provided the source code for that site. The table version is just horrid. It’s nested table in table in table and uses the ’spacer.gif’. The css however is lean and mean code. Which doesn’t work properly in all browser. Meaning, it’ll take some more tinkering.

Still, if you’re hired to build a site, and maintain it after, you’d do good to get working on your css skills, as it’ll save you a lot of looking for lost tags.

Standards

So, what do the standards say about this? In HTML 3.2 tables were still for layouts. The specs of html 4.0 say the following :

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

And, according to rfc 2119 should not means, recommended, but there may be valid reasons to break follow this rule.
So, if you feel that your layout is undoable with css, using tables is following standards.

Degrade gracefully

If you use a proper css layout your site can be views by all older browsers as well, some might not show all fancy things, but at least you get your data across. Tables on the other hand show quite ok in most browers, they don’t need to degrade gracefully, as they just work.

Conclusion

There are a lot of CSS purists out there, that totally shun the use of any and all tables for layout. Personally, i’m still not convinced. There are a lot of places where a table is just so much easier. You can find extensive tutorials on how to do a floating 3 column layout in css, with setting margins, and other sorts. But, in that case i’d opt for the “should not” use tables for layout as said in the html 4.0 specs.

You shouldn’t use tables if there is a better solution, but if it requires 50 lines of codes, and fixing a lot of crossbrowser bugs, a table might just save your free afternoon.

Flex is a development framework by Adobe and is meant to help developers make applications. That means, no timeline, no graphics, no animations. After making a flex application the source will be compiled into a .swf file, which can be put online and viewed just like regular .swf’s.

Framework

Flex is a framework, and as such offers help in building bigger things. A great example of this is the flickr application that can be build in 5 minutes. By using the API from Flickr it is extremely easy to make a search image tool in flex. At least, in the tutorial video it is.

Flex has a lot of components that make it easier to make applications in Flash. Amongst the things that the flex framework can do are the Textarea, which is a well, textarea, including scroll functionality. But also navigational elements are introduced. Tabbed windows, accordion type lists and a menu bar.

MXML

Components aren’t all that’s new in Flex 2. MXML is an xml based mark-up language with which you can position the components on the stage. But also add actions to it, and eventhandlers. And as it should with an xml based language you are allowed to make your own components and use them with mxml. Now MXML was there in flex 1 and 1.5 as well, but a lot of adjustments have been made.

An example from macromedia.com:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

    <mx:TextInput id="source" width="100" text="Enter text here"/>
    <mx:Button label="Copy" click="destination.text=source.text"/>
    <mx:TextInput id="destination" width="100"/>

</mx:Application>

There is no working example of this since this needs the flash player 8.5 and that is, like flex, still in beta.

This piece of code puts two input fields on the stage of which the top one has a text ‘enter text here’, and a button. Notice that there is no x and y coordinates? That’s because you can now add objects inline just like html. The button has a click event applied to it. That event is plain actionscript and copies ’source.text’ to ‘destination.text’.

Actionscript 3

Something that’s brand new in Flex is actionscript 3. And it really is object oriented this time around. So, start writing classes, and make things easier to manage in the long run. Other than that they’ve added numerous new functions and functionalities.

Another difference with actionscript 3 is the way it is used by the player. AS2 was transformed into AS1, and then compiled. That way everything was backward compatible. But a lot of speed was lost on this. Actionscript 3 is no longer backward compatible, and as such cannot be compiled for a lower player version than 8.5. The good thing about is that this player is a lot faster. Unfortunately, most people don’t even have flash player 8 installed yet, and it will take some time before flash player 8.5 is common enough to use flex for widely used applications.

Good news

There’s a free version. The wise folks at Adobe decided to let people use flex 2 for free. Meaning, more people will use it, and more examples will be available. In contrast flex 1 cost $12.000 for a dual-cpu license. Well, obviously that wasn’t a program for general use. There will be a buyable flex 2 version too, and that includes server side technology. Which can be compared to the flash communications server.

Conclusion

So, should you use it? Well, not yet I think. A lot of the documentation still needs to be written and it’s hard to find good examples. Also, since the flash player 8.5 has to be installed to see the compiled swf it’ll take some time before most people will be able to see your application. There is real potential in flex 2. However, at the moment I wouldn’t advise doing anything major with it. But keep your eyes on it for the future.

You can find an essay on this site about the effect that firefox has on the open source community. And one of the interesting points that is mentioned in that, is the 2 page advertisment in the new york times last year. To my surprise I found a similar advertisement in the Dutch Spits today (3 page from the back). I wasn’t aware such an endevour was taking place, so I was happily surprised to see such a thing.

As a happy Firefox user I couldn’t resist actually writing a personal note on the ad and leave the paper wide open on a trainchair. “Everything this ad says is true, firefox rules, and it’s free, go try it out”.

I can’t remember when I felt more like a geek than today. And for good order:
Pdf from http://www.persberichten.com/firefox/ who are the guys who did this.

edit: I forgot to add the link to the firefox site, and the nifty banner:

In december of 2005 Google did a major test on over a billion sites to check which elements are used most. The results are quite interesting.

Tables

It is interesting to see how often ‘table’ is used. In fact, it is the 9th most used element on the web. And, on those table elements (including td and tr) mostly styling attributes are used. So, that means, eventhough the standards clearly say that tables “SHOULD” not but used for layout, that most of the developers aren’t bothered by standards at all.

Body

Out of the top 20 attributes used for the body only 9 are valid, and 5 have in fact been deprecated for over 8 years already. Since the major development in the last eight years this can’t be legacy pages. Why do people use “margin-width” on the body element?

Used elements

They also checked to see how many elements were used on a average page. This number was 19. The 19 most used elements are : <head> <html> <title> <body> <a> <img> <meta> <br> <table> <td> <tr> <p> <script> <div> <b> <font> <link> <form> <input>. The number of occurances of these elements are in that same order. So, again, this shows that table is used a lot more often than div’s. In fact, according to the statistics there are about 25% more pages that use tables than div’s.

Also, the br tag is used more frequently than the p. While in most cases p would be semantically correct.

I decided to check this site and see how many elements I’ve used, and wether that matches the 19 most popular ones. <html> <head> <link> <meta> <title> <link> <body> <div> <ul> <li> <a> <h2> <small> <p> <h3> <blockquote> <br /> <pre> <code> <acronym> <ol> <img> <form> <input> <span> In contrast to the results from google mine are not put in any order, except that in which they appear on the first page of this site.

When comparing these two list it is apparent that I use a lot of less common elements on this site (and that I skipped the h1 totally for some mysterious reason, which seems like something that needs fixing.) But also that 5 of the most common elements aren’t used at all, namely :<table> <tr> <td> <font> <script>. Font is in fact deprecated and should not be used anymore. And I have no need for a table on this site so there is none. The script tag is the one thing that I see uses for on this page, and it is no mystery as to why it is so popular on other pages.

To read the rest of the results see Google webstats.

A continuation of the last post.

Heuristics are rules of thumb to check wether something is usable. The rules I explain here are written by Jacob Nielsen.

Recognition rather than recall

The short term memory of the average can have 7 items in it. So, if your menu has 10 different buttons, chances are they’ll not be able to remember what is in there. Meaning they’ll have to read it back.

The same goes for other things. Suppose you have a form and you get a code to check wether you’re a real user. (Normally distorted numbers) You could do that on a different page, making people remember the 7 digits. But why would you make it hard for them?

Flexibility and efficiency of use

By making a site easy usable by novice users you might actually make it harder for advance users that already know where they want to go. MyYahoo is a nice example of this. It’s easy to use for the novice. But the more experienced user can change that page to how they like it. Great usability!

Aesthetic and minimalist design

http://www.sportjaar2005.nl/. This website has a rather minimalistic design, eventhough there are a million links on it. Because of this, it is still relatively easy to find what you’re looking for while still have a nice looking site.

Also, don’t put any extra information in already crowded places, it’ll just distract you from the real message.

Help users recognize, diagnose, and recover from errors

You spend 10 minutes filling out a horrible form press send and… you get the same form again, but empty. That is a really good example of how not to do things. Give a clear message saying that the form was send correctly, but that some fields weren’t filled out correctly and clearly mark those fields. Or, even better, only show the wrongly filled out forms again.

Help and documentation

Either you’ve made a really complicated application, or users need to be able to teach themselves how to use it. Or you might even suspect your users to be not so smart*. Whatever the reason, you should provide help and documentation for everything but the simpelest site.

* Users are never dumb. If the user doesn’t get it, you were wrong in how you made it.

Wikipedia:

Heuristic is the art and science of discovery and invention. The word comes from the same Greek root as “eureka”: εὑρισκω, which means “I find”. A heuristic is a way of directing your attention fruitfully. The term was introduced by Pappus of Alexandria in the 4th century.

Heuristics are more known as a ‘rule of thumb’. A few easy guidelines to follow to make sure your site/application is user friendly. Jacob Nielsen set up this list in 1990, and updated it in 1994.

The weird thing about these rules of thumbs are that you instinctively know most of them, if not all. The added value in having them written out is that you’re more easily to check all of them. So, let’s go through them once again, with a short (new) example of each. Today part 1.

Visibility of system status

This one is quite obvious in flash applications that take forever to load and have a nice preloader to show how far they are. So why is this still lacking in ajax applications? Every time something is being processed in the back and you expect it to take longer than (half) a second you should show this to the user.

Match between system and the real world

Did you ever notice what a submit button says if you don’t give it a value? “Send query”. Most people think that that doesn’t look good and change it to ’send’. Good, now you can send the data to the server! However, your user probably isn’t looking to ’send’ data, but is trying to ask a question. So why isn’t that button called ‘Ask’ ?

User control and freedom

Do not decide for your user how he or she should experience your website. So, no popup saying ‘This site is best viewed in internet explorer 5.0 and up’.

Fortunately most browsers help a lot with freedom of a user. When someone feels they’re stuck somewhere, or did something they didn’t want to do, they can press the back button to get back to where they came from. So don’t break this functionality! An emergencey exit is an important feature.

Consistency and standards

Make sure that all words, acronyms, and sayings you use are known to your intended public. When in doubt see the standards, that’s what they’re there for. This definately doesn’t mean you can’t use difficult terms. Just write something that the target group understands. And, be consistent in what words you use.

An example of this is RSS, meaning either ‘Really Simple Syndication’ or ‘Rich Site Summary’. If you use both these two terms in one text chances are, you’ll confuse people. And confused people don’t get what they want, information.

Error prevention

Suppose a form of 20 different questions some existing of a number of checkboxes, or radiobuttons, and having to select a specific number of answers per checkboxgroup. In this large form chances are you’ll get lost. Especially since the input that is requested from you is different for each question. Now this might be good if you’re testing the intellect of your users. But for normal use, this is something you might want to prevent.

Another horrible example is a site about usability, which has two menu items named ‘testing’. One for information about how to test the usability of a site, and the other for tests that has been performed on the site.

So far for the first part of usability heuristics. Later this week I’ll write the next part.

A favicon is a small icon that can be shown in the address bar, or in the list of favorites. This image is generally a small visual clue as to which site it belongs to. For this site it is the star symbol which is also used for links and posts.

A favicon is an image 16px high and 16 pixels wide.

How to use

Depending on which browsers you are targetting you can either place a favicon.ico file in the root directory and or place both the following tags in the head of all your html documents.

<link rel="icon" href="http://www.yourdomain.com/favicon.ico" />
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" />

Note that it is not needed to use ‘favicon.ico’ this might as well be ‘/images/icons/myicon.gif’.

History

In IE 5 the favicon was first introduced. When someone would bookmark a site, they could see the favicon in the list of favorites before the name of the site. This actually gave some interesting statistics to the webmasters. By checking how often the favicon.ico was requested they knew how many people were bookmarking the site. Since newer browsers use the favicon more often than just with bookmarking this doesn’t work anymore.

.ico

When the favicon was introduced it was decided (by IE) that it should always be in the root of a site and be named favicon.ico. However, this conflicts with the architecture of the world wide web. It is not allowed to reserve a URI for a specific function.

Also, the .ico format is what windows also uses for the icons in the taskbar and such. And, an .ico file excists of a few different images in different resolutions and sizes. So a special program is needed to make one. Newer browsers (such as opera and firefox) decided to not only allow .ico files for the favicons but also .gif and .png.

Photoshop and .ico

It is possible to make an .ico file with photoshop by downloading the plugin from Telegraphics. Copy the “ICOFormat.8bi” file into the “File Formats” folder inside your Photoshop Plugins folder. (C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats). This way you save images as .ico

In maths there where 3 axis which coordinates together point to a certain position. The x-axis, in css seen as left, the y-axis, top in css, and the z-axis, which would be the z-index in css. With the transparent png support of ie7, it will be much more common to position elements on top of eachother. A good example of that can be found here. The snowflakes are placed over the header, but under the content, and the menu. The fade-in fade-out effect is done with javascript. I made this effect while working for Connectholland.

Besides using it for something like the snowflakes, z-index can also be very useful when making a fold out menu.

div.container {
    position: relative;
    z-index : 2;
}

The standard z-index for an element is 0, and, how higher the z-index, the higher it is on the stack, so this div is placed on top of the rest of the page. Also, the container is positioned relative. For z-index to work an element has to be positioned. Since, if there is no x and y, why would there be z?

Problems with z-index

Unfortunately z-index doens’t always work as expected. Form elements like select boxes always show in Internet Explorer. As the z-index doesn’t apply to windowed controls. Before it also didn’t work with i-frames. Since ie 6 however also i-frames can be positioned.

And then there’s flash of course, since it uses a plugin it’s not part of the normal page content, and as such always displays on top of everything else. There are so good ways around this however, and Joshua clearly discribes one.

XHTML can do everything HTML can, so the real question is, do you need any of functions XHTML offers. And, will you be able to use the proper mimetype for it? Without the correct mimetype there is no reason to use XHTML as it will trigger quirks mode in the browser. And that is something you probably don’t want.

According to the w3c xhtml is:

XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents.

So, HTML is a part of XHTML. But with an XML flavour to it.

XML

The Extensible Markup Language (XML) is a W3C-recommended general-purpose markup language for creating special-purpose markup languages, capable of describing many different kinds of data. It is a simplified subset of SGML. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.

Let’s start of with some important characteristics of XML. First of all, it’s well formed. Every element needs to be closed, and that needs to be done in the right order.

<b><i>Something really important</b></i>
<img src=’images/image.gif’ alt=’image’>
<b><i>Something really important</i></b>

<img src=’images/image.gif’ alt=’image’ />

The first two examples are faulty XML. Number one could and can be found in the code of beginning webdevelopers, but also in that of more experienced coders that don’t look carefully at the order of their elements. In HTML, this is somewhat allowed, in XHTML is just plain wrong. The right notation can be found at point 3.

The second example shows the normal way to write an image tag. In XML however every single element needs to be closed for the document to render correctly. That includes img, input, br and meta tags. The space before the slash isn’t required but without it netscape 4 can’t interpret the code at all. With the space things will probably still not look good, but at least they will be able to see the page.

XML and errors

Because XML has strict rules for closing elements, and also for the encoding type (standard utf8 but it should be declared in the xml declaration). It just stops processing and gives out errors when these rules aren’t followed. So, especially for beginners to xml it can be a daunting task to make everything work.

This means that all characters like ë should be replaced by their numerical value which in this case is &#235;. When transforming a large website this could prove to be a difficult task. Luckily you can use something like a php function as utf8_encode($tekst); for that. But that does mean going back into the code, and checking all output, or all input for strange characters.

XML and new elements

In xml there are hardly any strict elements. It is a language that is used to describe data in a human readable format, while still making it easy to read for computers. Because of this everyone is allowed to make up their own elements.

This is also one of the ideas behind XHTML. Every developer can make addition to it when necessary. The w3c gives the following example for use of XHTML in conjuction with MathML.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>A Math Example</title>
  </head>
  <body>
    <p>The following is MathML markup:</p>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <apply> <log/>
        <logbase>
          <cn> 3 </cn>
        </logbase>
        <ci> x </ci>
      </apply>
    </math>
  </body>
</html>

Like in XML the use of a namespace shows where to find the defenition of the used elements. Of course you can use more than MathML. That is one of the strengths of XHTML. That and the fact that as the information is valid XML you can use XML editors and checkers to verify the content, and easily incorporate it into a different program.

Mime types

According to theW3C’s Note on XHTML Media Types:

• HTML 4 should be served as text/html.
• “HTML compatible” XHTML (as defined in appendix C of the XHTML 1.0 specification) may be served as text/html, but it should be served as application/xhtml+xml.
• XHTML 1.1 should not be served as text/html.
• The specifications of XHTML 2.0 aren’t finalised yet but all indications are that XHTML 2.0 must not be served as text/html.

The webserver gives a mimetype along with the document when you request it from the server. This is read before the doctype declaration of the document and determines in which mode a document is processed. The normal way for a html page to be send to a browser is ‘text/html’ however, for an XHTML document it should be ‘application/xhtml+xml’. And, if the header text/html is send to the browser the browser will interpret is as normal html, and will go into quirks mode.

There are a few different modes in which a browser can handle a html document, standard mode, almost standard and quirks mode. In quirks mode the browser tries to correct as much faulty html as possible. Since in html tags like <img> should not be closed and they must be closed in XHTML, the browser will render XHTML with a mime type of ‘text/html’ in quirks mode (and in some browsers in almost standards mode).

Writing XHTML without the matching mimetype is pointless as it will only trigger quirks mode and that is exactly what you don’t want when confirming to standards. Unfortunately Internet Explorer doesn’t understand the mimetype ‘application/xhtml+xml’ yet, so for that browser you need to give out the mimetype ‘text/html’.

Doctypes

Besides the use of mimetypes there’s also the doctype. Where you can leave that out in HTML, it’s obliged in XHTML. There’s three different ones, much similar to the ones used in HTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“DTD/xhtml1-strict.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“DTD/xhtml1-frameset.dtd”>

Other differences

In HTML elements can be written in capitals, for XHTML however that is definately wrong. So, even when writing HTML start now with writing all tags in lowercase. Also, attributes should always be within quotes (single or double) and cannot be empty. In html it is okey to have the following code:

<input type='radio' checked name='radiobutton'>

For XHTML however the ‘checked’ would make everything shriek to a halt and jump right into errors. Not to forget the lack of the closing slash of course. While this is allowed in HTML however, it is better to not use those as empty attributes however. So change that today!

HTML or XHTML?

XHTML can do everything HTML can do, so the real question is, do you need any of functions XHTML offers. And, will you be able to use the proper mimetype for it? Without the correct mimetype there is no reason to use XHTML as it will trigger quirks mode in the browser. And that is something you probably don’t want.

However, XHTML is (according to the w3c) the future of HTML. And it’d be good to get some experience with it. Which you choose is up to you however.

sources:
w3 xhtml media types
XHTML™ 1.0: The Extensible HyperText Markup Language
Extensible Markup Language (XML) 1.0

Unfortunately, too many webdevelopers are still not familiar with the concept of URL rewriting. And many that did come in touch with Apache’s mod_rewrite, often do not use many of its powerful features, or even put it aside completely because of its relatively high complexity

While the learning curve of URL rewriting might be steep, especially for those who are not used to writing regular expressions, the control it gives you over your website is well worth the effort. With URL rewriting, you can redirect and rewrite an incoming page request to virtually anything. This can be used to present users a completely different page or send them to another webserver, change the URL in the browser window, create shorter and easier URLs without modifying your backend and it can even be used as a basic form of input filtering for your scripts.

To use URL rewriting, you have to enable the RewriteEngine first. This can be done in your httpd.conf or in a .htaccess file on a per directory basis. After you have done this, you have to define rewrite rules. These rules can contain regular expressions, environment variables and even conditional statements, giving complete freedom to rewrite your incoming requests. All matching rewrite rules will be executed from top to bottom (unless this behaviour is limited with the last flag).

Why bother?

As your website is most likely working just fine without URL rewriting right now, you might ask yourself why you should bother with learning and implementing this complex feature. Well, there are actually several answers to that question.

One of the most important reasons to use URL rewriting are search engines. While most dynamic websites work perfectly fine in webbrowsers, search engine crawlers work a little different. When a webbrowser requests a script, specifying parameters in the URL, they get a nice page in return. Some webcrawlers omit the parameters and just request the script file however. In many cases, not specifying any parameters will result in an error message , which is then parsed and indexed by the search engine, instead of your content. Not all search engines act as simple as this, but a fair amount of them will still assign a lower rank to dynamic content because it often changes or is temporary data.

Another advantage of rewriting is the ability to create shorter URLs that are easier to remember. For example, instead of having to enter a long and obfuscated URL like this: http://www.example.com/catalogue.cgi?category=sports&sub=tennis&article=racket01, you could define a rewrite rule that would let you enter http://www.example.com/catalogue/sports/tennis/racket01 instead. This eliminates all redundant data in the URL, which will be defined in the rewrite rule. The webserver will redirect the user internally to your original catalogue.cgi, so there is no need to change your modify anything in your current script code. URLs like the above are not only easier to remember, but they appear to be static content too, resulting in better search engine ranking.

URL rewriting can be very useful in a less occuring case as well. When you have created a completely new website with new ways of managing your content, quite often your URLs change as well, rendering visitors bookmarks and search engine indexes useless. With rewriting, you can now map the old content URLs to your new site. Optionally, you can even specify a 301 Moved header, so browsers and webcrawlers will know the content has moved to a new location and that they should update their resources. By doing this, you can make sure your visitors will still find the information they are looking for.

One other use of URL rewriting is not very well known and even less used in practice, but it can still be a good addition to your site. Using rewrite rules, you can implement a basic form of input filtering for your scripts using regular expressions. By using this functionality you can make sure that your script, when placed outside your webroot, will only receive certain input types. For example, you could write rewrite rules that will match only integers, strings, zipcodes, phonenumbers, or bankaccount numbers at certain positions in your URL. Because the rule will only match the request when valid input is received, and therefore will only be executed in that case, your script will never receive invalid data at all. This is a fairly easy way of placing extra input checking on third-party products or other situations in which you might not have full control over the source code, adding to the general security level of your site.

To conclude, URL rewriting is a very powerful tool that every webdeveloper should be familiar with, as it offers many advantages to create better websites. While learning and understanding the concept might cost you some time, it will definitely be worth the effort. If there is any demand, I may write up some examples, including code, in a next article.

Internet Explorer has been a pain to work with for webdevelopers who use CSS. The last new version emerged over 5 years ago, and although some bugs have been fixed, the major rise of css hasn’t been supported by it. Now however, IE7 is on the way. Which is a good, and a bad thing.

The good is obvious, better CSS support, less bugs and so on. But what about the bad. There is a great number of css hacks for IE that are used frequently. The question has been, will those hacks be fixed, and more importantly, will the reason for those hacks also been fixed?

Luckily, the people at IE also see this distress and came out with a nice list of things they changed, including, overflow, hacks and some other things. This read is especially usefull if you use hacks a lot.

Cascading Style Sheet Compatibility in Internet Explorer 7.

So now we know which hacks are fixed. But what about those bugs?

In CSS a lot is based around the box model, but what is that, and how does it work?

A box or a block?

In the css specs of the W3C they mention the box model, which also applies to block elements. However, they also apply to for example tables, and even to the body element. An element has a set display mode which has it’s own restrictions to it. However with css you can change these settings. W3schools has a good overview of the different settings.

This could be any typical div block. A block has a number of properties an inline element (like span) doesn’t have. Important ones are the padding and the margin. The difference between those can be quite unclear when you start with css.

When you set the background-color for a block however this will become clear. A margin is outside the actual block, and a padding is on the inside. So, a background color will be show in the padding, but not in margin. The margin is always transparent. The actual content for a box will only show after the space for the padding.

Width of a block

An important thing to remember when you set the width of a block type element (such as div) is that that width applies to the content only. So any padding and borders you add will be counted as well. This can be confusing when you just start with blocks.

Positioning the content

The content of a block can be positioned where you want it.

div {
   text-align : center;
   vertical-align: middle;
   overflow: hidden;
}

With this code the text in every div will be aligned in the middle of the block, both vertically and horizontally, and everything that doesn’t fit will be hidden.

Position the block

Besides being able to place the content in the block at the right place you can also place the block at the right location. You can set the distance from the top, the left, the right and the bottom of the parent element. This parent element can be another block, a table or the body element. More important is the position: relative and position: absolute. That way you can set where the container the block is shown.

<div>
	Some text to make do some filling up.
	<div class='footer'>
		The footer information
	</div>
</div>

In this case the div with the class ‘footer’ would be shown on the line after the text. However, as it’s a footer you might want it to show up on the bottom instead. So, add a bit of css

div.footer {
  position: absolute;
  bottom: 12px;
}

With this CSS the block will be placed at the bottom of the parent element. However you might not want this. You could want this to be placed 12px below the previous text.

div.footer {
  position: relative;
  top: 12px;
}

That’s the basis of the box model, the best way to get a real feeling for it however is to get some hands on experience and try it out. Good luck.

When writing for the web start with the most important conclusion, then work down to the facts that lead you to that conclusion. That is a nutshell how you write for the web.

This is because people read differently when they visit a website. Most of the time your visitors will be looking for some specific information and scan the text to see if this is where they can find what they’re looking for.

Titles

Because of this you should also use titles, titles are extremely useful when scanning information. This is why you not only should use titles, but use descriptive titles. The title for this post is ‘writing for the web’. Which is exactly what this post is about. ‘The web, how to write for a site’ would also describe this. However, as this site is about webdevelopment ‘The web’ doesn’t add much. I could actually just leave that, only ‘writing’ would be a bit short again and just for clearity I’ll keep the ‘for the web’. I’m sure it’s clear why ‘How to ramble like a madman’ isn’t a good and descriptive title.

Lists

A list is generally used for a short list of phrases that are important in some way. And as such, your visitor will scan this list to see if there is anything interesting. So, try and use lists when appropriate to give your visitors something to scan.

Short sentences

As most people don’t read long texts on their computer you’d do best to keep your texts short. There is an easy way to do this. Just write your text as always then, read it back and delete any words you don’t need.

Summary

There are 5 ways to make your text easier to read for your visitors.

• Start with the conclusion
• Scannable text
• Titles
• Lists
• Short sentences

As developers gradually start to get used to using css based layouts instead of tables there is a new pitfill waiting around the corner, the use of semantically incorrect code. There isn’t much you can’t do with div and span, add a <a> element you’re almost at the end of the small list of elements some developers use.

HTML has a lot more to offer than that however, so why use span and div for everything?

A class can be very descriptive to the people working with it. ” class=’title’ ” is easily recognised as being a title. For a browser however is a class no better than a made up string from which no relevance to the element can be conceived. So, a span with a class title, is the same as a span with the class ‘fineprint’. By using correct semantics in HTML you make your code easier to read for yourself. (By using more different elements it’s clearer which one is closed where.)

  <span class='title'>Some title</span>

While this is valid HTML it is not semantically correct, as there is a specific tag for titles. In fact, there are 6. <h1> to <h6> By using these instead of the span method you instead make your site more accessible. Screenreaders do not read the css, so hardsighted people will not know this is a title.

  <h1'>Some title</h1>

Another common mistake

<p>
  Contact me at sonja@multimedia-engineer.nl for questions.
</p>

While that doesn’t seem wrong there’s two mistakes there. By using the paragraph you imply this is just a paragraph of the text, while normally this would be a footer. And as a footer is a block of content it should go in a block element. Besides that the address tag is neglected. Again, this makes it harder for disabled people to find your information as well as writing semantically incorrect code.

<div class='footer'>
  Contact me at
  <address>sonja@multimedia-engineer.nl</address>
  for questions.
</div>

Unjust <br/>

A br element is for adding a single linebreak, not to seperate paragraphs. While it’s only too easy to fall for this mistake it is, again, semantically incorrect. If you write your text in paragraphs you’re markup should represent this by using the <p>.

Stop abusing div and span and use semantically rich code instead

• Start by checking all HTML tags again. If you don’t know a tag excists at all, you surely won’t use it. Alternatively you could also use the HTML cheatsheet from ilovejackdaniels.com.
• Secondly write correct HTML, before adding any CSS to your page. Try and make your HTML as semantically correct as possible already, and adding CSS will only be easier.
• Rethink every use of div and span for a short moment. Consider if this was really the appropriate element to use. In forms for example a label and fieldset should in most instances suffice before resulting to div or span.
• Add CSS to your html

On my last blogpost I got this comment:

John Dowdell Says:
January 20th, 2006 at 2:12

For what it’s worth, Google has been databasing the text within SWFs for quite some time… try search term “filetype:swf contrary evidence” to test. (This was the purpose of the Flash Search Engine SDK release a few years ago.)

But aqs always, good HTML titles, metadata, and inbound links play a larger role in top-list placement than does body text alone.

jd/adobe

Obviously I tried this out and I stand corrected on my last post.

So, Google does read swf files let that be clear.

Now I wonder does google also check the php/xml files which are used to access information through flash.

I recently got a question in my e-mail on how to do seo with flash. Maybe something with xml? Would that be indexed better? And, won’t it be seen as spam?

Well, this guy is definately thinking in the right direction, xml is the way to go.

Use RSS for indexing

Instead of using just ‘a’ xml file for showing the content to the spider why not use the rss standard. RSS is a formiliar content type for spiders, which they index, and it has a direct relevance to the page it is on. You can do this in two different ways.

One RSS for the entire site

This works well with small sites, as all contents can be placed in that one file. For bigger sites however you would get so many items in one RSS that important content might be skipped. (Text more to the bottom of a page is deemed less important than content at the top of the code.)

An RSS for every page

Eventhough your flash site or application exsist in only one swf, it is still possible to link to a part of it directly. So, index.php?type=guestbook points to your guestbook in the swf. And index.php?type=contact points to the contact form. And on all of these ‘pages’ you can point to a different RSS showing the content for that specific page. Which is also great for the usability, you don’t just point to the swf leaving people to look for what they need by themselves, but give a direct link to the content.

It does have some downsides however. Url’s like index.php?type= aren’t exactly search engine friendly. And you have a risk of being penitalized for duplicate content. The first one is easily solved. Just use rewrite rules in your .htaccess or in the httpd.conf if you have access to that.

RewriteEngine on
RewriteRule ^(.*) ^index.php?type=$1

The second problem isn’t as easily solved because you do in fact have duplicate content. Again, usability offers the answer here. Show the .swf and the normal content below that. Then use javascript to hide the normal content. This way people that do not have the flashplayer (text browser and such) will still have normal content. And with javascript you can also detect wether there is in fact a flash plugin and hide either the flash or the text depending on that. This however means extra work.

Sitemap.xml

So, how does the search engine know which pages to visit for that rss then? You can use the sitemap.xml from google to make it index every page. It’s still in beta however. Other than that, provide a html sitemap which links to your normal pages.

Macromedia Flash Search Engine SDK

There is good news however. Macromedia/adobe has their own flash search engine, especially for search engine to use in their own products. With this they will be able to search through flash sites to get to the content. However, no major search engines use this yet to my knowledge. As they would have to trust in the product of Macromedia to get to all content correctly, instead of making their own stuff which they can alter easily to catch all seo tricks.

Conclusion

There is a lot that can be done to make a flash site more search engine friendly. However, the best advice is still, to not use flash for content. This may change in the future.

I found a good tutorial that explains step by step how to make a flash site more search engine friendly.

There are enough different ways to define font-size in css, but what do they all mean, and when to use them? Three are variable sizes, depending on their surroundings to figure out what size they’re shown at. Those are the em, ex and px. The rest are absolute heights, for when you really need to know how big something is.

Absolute font-size

These absolute measurements are generally meant for print. Since it’s unknown to a browser how many pixels a cm is on your specific screen. For pt, this generally results in 1px = 1pt, the other measurements can differ even more.

• in (inches; 1in=2.54cm)
• cm (centimeters; 1cm=10mm)
• mm (millimeters)
• pt (points; 1pt=1/72in)
• pc (picas; 1pc=12pt)

Besides the sizes not being rendered properly there is another problem with using absolute measurements for font-size. You can not resize them (especially in IE). So, a visually challenged visitor cannot change the font-size with the correct buttons for it. Keep these sizes for use on printed pages.

Relative font-size, the em

There are only 3 relative font-sizes, the em, ex and px.

The em is abstract measurement, w3 says the following about em’s:

Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. The value of this descriptor specifies how many units the EM square is divided into.

They mean that every font has a square in which characters are drawn (how high and how wide a character can be, every character in that font fits in the same em square). Based on the width and height of this square an em value for that font is calculated. And, when you change this value with css, the height and width of the text is altered with it.

Relative font-size, the ex

Font-size ex is somewhat similiar to the em measerument, as it uses the default size of the font (not the default size the browser uses, but the size the font is drawn at). Where the em uses the square in which the entire character resides, ex is the height of a lower case x.

You probably noticed that why you type something in Times New Roman, and then change font-family to Verdana, it seems to big, eventhough it takes up the same space on your screen.
What seems as a differance in size is actually a difference in legibility. Verdana has a bigger ex than Times New Roman does. This could be a useful measurement if you insist on using a strange font not everyone has, but you want it to be legible both in the intended font, and the back-up font.

Relative font-size, the px

A pixel is a rather weird way to measure font-sizes, eventhough used frequently. Depending on your resolution, and screen width a size is given to the text. When two people, both with a 17 inch screen, one with a resolution of 1024*756 and the other of 800*600, look at the same text in font-size 12px there will be a significant different in size.

When to use which?

Use absolute font-sizes only for printed pages, that’s what they’re meant for, and good at.

Relative font-sizes are harder to determine when to use what. The em is actually based on px as well, so there shouldn’t be too much of a difference. But there is one major difference in fact. When you change the size of the font in IE the pixel height stays the same, while the em size changes along. So considering accessibility issues you should use em’s.

In pixel perfect designs however you might not want to let your visitors change this. Do consider the fact however that you are severly hindering visually impaired users if you choose to do content texts in px’s.

Percentages

Percentages are a different way of defening font-size. As you know characteristics of an element are passed down to their descendants. So, if the body has font-size 2em, everything element in body will have that same font-size. With percentages you can change this font-size by a percentage instead of a exact value.

Read more about css

CSS 3 Attribute selectors
CSS rollover image

In the Netherlands we have a store called Hema. This store has a specific format they always use in their folders and commercials. And mainly includes big pictures with text over it and lots of white. When I find one of their folders on the doormat I’ll connect it with Hema instantly. Without even seeing the name, or looking at it specifically. And that alone will tell wether I’m interested in the content or not.

The same thing goes for sites. Whatever you do, you do not want to scare your visitors away. This visitor may have bookmarked your site, or for something like php.net, you come across it while you’re looking for information. When searching people do not always check the url where they’re going. Meaning there is no other way for your visitor of knowing that he is on your site other then the design and (less important) the logo.

When you do change your layout drastically your visitor feel will like he’s on a completely unknown site to him, instead of your site which has trustworthy information and will leave sooner. Just imagine you’d go to google and it suddenly looks like a portal such as yahoo. You’d be sure to check 3 times before you’re sure you’re at the right url.

No design changes then?

No complete re-designs doesn’t mean you can’t change the design at all. Small changes, one at a time can end up in a large changes over time. But without the downside of one big change. It also has an extra benefit. It makes the result of a change easier to track.

When you make a change to the navigation structure it might result in people getting lost, or the other way around, visitors finding exactly what they need. If you only change the navigation structure it’s easy to track the results of this change. When you do a complete overhaul in one go, there’s no telling what changes are good and which are bad.

Also, suppose you’re re-design went wrong, what are you going to do about it? Change back to the old design completely, or try and mend the bad design. With a small change that turns out badly it’s much easier to change things back, or tweak it until it does work.

Presenting re-design

Having said that, I hereby present my own complete re-design. My old design was, though interesting, hardly related to my targetgroup. Bright orange will happy red fish doesn’t exactly mean ‘webdevelopment’ to visitors at first site. I definately needed to change that. Also, the menu structure didn’t work out, and there was no place to leave archives, or space for popular reads as the site wasn’t at first meant as a blog. To me it was clear that there was hardly anything on the site that should stay as it was. But still, I could’ve done this one step at a time.

What made it clear to me I should do this in one go was the fact I only just started with blogging and don’t have many regular readers yet. As such, I thought it was better to change everything in one go, and tweak things later if necessary, then to present the would be frequent visitors with a bad design and a long list of apparent changes.

Search engine optimalization was easy some years ago. All you needed was your normal site and add a lot of keywords under that in white, and you’d rank high in the SERP’s. That trick got recognised by Google and other search engines soon enough, but others were still being used.

In May of 2005 a lot of Dutch insurance companies were actually banned from google for cloaking. A spider sends a specific signature to the server to identify itself, with cloaking a different page is presented to the spider than is to normal users. Obviously the spider pages were filled with keywords, and thus gave a better ranking. Then google changed their algorithms, most likely because they found out about cloaking as well, and the sites got banned totally.

Simple changes to the search and indexing algorithms can have big changes on your rankings in on SERPs. But, these small changes you can live with and adapt too. In the not too distant future however there will be personalized searches. Just look at the amount of information google has of a regular user already. Gmail, friends from orkut, everything you ever searched for. Everything gets logged.

Now assume I’m doing the seo for an art website. I’d be checking where that site is in the SERPs for a number of keywords, and i’d continue to check that for a period of time. So, now google has a list of the keywords i’m interested in, and if I ever in fact clicked the link I was looking for that would be logged as well. So, I’d be far more likely to get that site as a first result than someone who never looks at art.

And not only that, because of orkut google knows who my friends are, and what information they look for. Obviously, i’ll be looking for the same stuff. Now google also has the desktop search functionality. How long will it be before they come with a small plugin that checks what programs you have open as to point your search in the right direction. For example, if I have flash open, than chances are I’ll be looking for actionscript when I look for substrings.

So when there’s no way to determine what someone else sees when looking at a SERP then how would I know that my seo is working? How do you deal with this? Well, generally, the same tips as ever work. Make sure that your pages are easily indexed, use keywords, get links. But most of all, make good content. And wait to see what the future will bring.

Rounding error example

This example from positioniseverything.net shows perfectly when you should not use percentages specifying width and height. If you look at that page, and resize your window missing pixels will appear. The theory behind this is simpel.

When you have 101 pixels and devide that in four even blocks (25%) all of those will then be 25 pixels in width. As 25 *4 = 100 there must be an extra pixel somewhere. Browsers don’t decide where they will leave this one pixel, but leave it blank instead. So if you use percentages, make sure you add one with the size *. This then fills up the extra pixel.

This is a cross browser bug. So you can’t just blame Internet Exploder for this one.

You know all about childs electors, pseudo classes and pseudo elements. But is that all CSS you need to know? Not with CSS 3 coming. The W3C has put out a working draft for CSS 3 selectors on the 15th of December. But what’s in it?

Do remember that there is only a working draft right now, and some changes might still be made.

All new?

Not everything is new in CSS 3 of course. There’s the functions that are also in the earlier versions. Off course, there’s still the universal, class, desendant, some pseudo class and pseudo element selectors.

All old then?

There’s a lot of new and good stuff coming. For example, the attribute selectors. With css 2 you could something like div[class=”nav”] to only affect the divs that have the name nav. Assume there’s a page with this html.

<div class='nav-top'></div>
<div class='content-main'></div>
<div class='content-bottom'></div>
<div class='extra-content'></div>
<div class='nav-bottom'></div>

Not a too uncommon site. With a stylesheet for printed media there might be the need to hide the navigation div’s. With css 2 you would have to do this with naming all classes that needed to be hidden. In css 3 however the following will work just as well.

/* selects all div's with a class that starts with "nav" */
div[class^="nav"]  

Almost the same thing can be done with a substring selector. And for getting only classes that end with a certain string.

/* selects all div's with a class that has "nav" in it*/
div[class*="nav"]

/* selects all div's with a class that end with "bottom" */
div[class$="bottom"]  

the nth pseudo class

There’s a number of selectors in the document, that can point out the nth element. There’s four different types.

/* selects every even child of a div */
div:nth-child(2n)

/* selects every odd child counting from the last one */
div:nth-last-child(2n+1) 	

/* selects every other img tag */
img:nth-of-type(2n) 

/*Selects the 4th element of that type counting from the back*/
E:nth-last-of-type(4)

The not selector (negation pseudo-class)

Have you ever made a form where all borders should be 0.1 em and colored, all except the radio button. With the attribute selector you can change the border colour for the radiobutton again. But why set it in the first place?

input:not([type="radio"])

Read more about css selectors

CSS 2 Attribute selectors
CSS selectors

When I started working at connectholland I made a great form, which would change the colours of the fields that were incorrectly ordered. But only after you pressed the ’send’ button. The next website had a form that checked with javascript before even sending the information.

Nowadays however that’s just not good enough. But how do you make forms as usable as possible?

No long forms

Don’t ask about the education of the parents of your customer unless you really need it. This doesn’t mean you can’t ask for all sorts of extra information. Just put it on a different page and add a title with ‘optional information’. This way people that don’t mind filling in the forms will still do so. Those that get put off by long forms however can just skip it, instead of trying to find all the required fields on that one page.

Hide/disable irrelevant fields

Suppose the form you’re working on has delivery and billing information and a checkbox ‘billing and delivery address are the same’ which is checked by default. Then why would you have, by default, fields for entering a billing address? In such a case you should either have you fields hidden (with javascript, not css) or have them disabled (again, with javascript). By doing so you can change this back to being visible, or enabled with javascript again. If you have this disabled or hidden by default and the customer doesn’t use javascript there’s no way they can fill out the form.

Put focus in the first field

Ever noticed when visiting google you don’t have to select the search field before typing anything? This is because they put focus on the search field as soon as the page has loaded. This way people will have not have to select the first field themselves. Also, filling out forms is done with the keyboard, you should not have to change to the mouse if you don’t want to.

A simple piece of javascript will do this.

document.formname.fieldname.focus()

Use labels for form fields

By adding a label to a form field you can select that field (or select that radiobutton, check that checkbox) by clicking on the text describing it. Especially for users who have problems aiming the mouse at the exact location of a radiobutton this is a great benefit.

<label for='field'>Click to check the checkbox</label>
<input type='checkbox' id='field' name='field'/>

Add interactivity

Check user input as soon as they input it. By adding some javascript you can check wether all required fields are filled in when someone sends the form. Then instead of sending it add focus to the incorrectly filled out field. Or, send the page, and only show the fields that are still required on the next page, instead of all of them.

And of course, with AJAX a lot more interactivity can be added. For example by automatically filling out the streetname and city when someone enters his zipcode.

Make it work without javascript

You might have a brilliant form, that checks every bit of user input, even changes spelling mistakes for them and shows exactly what they need to fill in, when they need it and nothing else. Now check if it still works without javascript. Make sure you check every bit of information also on the serverside. That you also show which fields still need to be filled out if the form enters the server incorrectly. Don’t rely on just javascript, just use it to make a good thing even better.

Building your first website is very easy when you use a WYSIWYG. But is it still feasable to use such a program when building more complicated sites or should you switch to hand coding?

Why hand code at all?
A lot of people are used to coding in different languages and they see WYSIWYG editors as ‘cheating’ and they will not be seen doing anything like that. Others, me included, feel they have more control over the code if everything is typed in by hand. How often I haven’t seen code like <b></b><b>bold</b> when someone was trying to make something bold in a WYSIWYG editor.

There are a number of different HTML generators, including: Dreamweaver, Frontpage, MS Word, and a number of wizards you can use on ‘build your own website sites’. Let’s forget about that last categorie and MS Word as they either leave no room for change, or make such bad code that no one would seriously consider using them. Now I don’t know much about the newer versions of Frontpage, it used to be horrid, making more code for a simple bold tag than you’d need for an entire page.

That leaves Dreamweaver, which is a rather good program. One of it’s good points is that you have everything in one program. You can view your code on top of the screen, the result in the bottom, your files, and all things you do with it close at hand. By selecting the right option from the menu you can build div’s (layers), tables and everything else you want. Drag and drop css, no need for remembering any code, just find the right menu and enter the information you want. And in the code view you can see what it does so any extra code can be removed.

And, not a bad things also, you can get code hints. When you’re typing a tag it shows a list of things you might be typing. But, then you’re typing already you might say. Indeed, there’s actually no reason why you can’t move to hand coding in Dreamweaver.

I would say, use the WYSIWYG only for settings things up, and do the details by hand. That way you get the best of both world.

Personally however, I’m still doing everything by hand in Crimson Editor, which only shows colours with correct code, and does nothing fancy like autocompletion or giving code hints.

A lot of good stuff can be done with CSS 2 (w3c recommendation 1998), but unfortunately a lot of it is still badly supported. However, with the new browsers (firefox, IE7 soon) a lot more of CSS 2 will be implemented. One of the cool things you can use is the attribute selector.

Suppose you have a form, with a password box, which you want to style differently from normal text fields.

<input type='password' name='pass1' >
<input type='password' name='pass2' >

Now, with CSS 1 you would have to give this input field a specific class, id or style to change this. But no more.

input[type="password"] {
  font-weight: bold;
}

A number of these can even be linked together, so you can differ between the first password field and the second!

input[type="password"][name='pass2'] {
  color: silver;
}

More CSS

With css you get the ability to style your lists better than you could before. And example of that would be the dropdown menu’s that can be made with css (usually done with lists), but most people forget about the use of different styles for lists items.

Traditionally used is the disc, a small black circle.
However there is no reason to limit yourself to that. You can use:

Hebrew

• list item 1
• list item 2
• list item 3

Georgian

• list item 1
• list item 2
• list item 3

Lower-greek

• list item 1
• list item 2
• list item 3

When would you use it you might wonder? Good question, probably not, but it’s good to know you can, if you need it.

The real question is however, why does the <ol> and <ul> still excist? In my opinion they should be replaced with a general <list>. According to the W3C an ordered list should contain information where order should be emphasized. However, with css this can be accomplished as well, and css should be used to style data. In my opinion adding emphasis is styling the data, and thus should be done by the css.

There is a third type of list as well, the definition list.

<dl>
  <dt>Dweeb</dt>
  <dd>young excitable person who may mature     into a <EM>Nerd</EM> or <EM>Geek</EM></dd>

  <dt>Hacker</dt>
  <dd>a clever programmer</dd>

  <dt>Nerd</dt>
  <dd>technically bright person</dd>

</dl>

Which gives the following result:

Dweeb

young excitable person who may mature into a Nerd or Geek

Hacker

a clever programmer

Nerd

technically bright person

Now when’s the last time you’ve used a definition list?

Images with a rollover effect are easy to make with the use of javascripts onRollOver function. However, it doesn’t work with javascript disabled. Luckily this is also possible with CSS.

My favorite way to do this works with an image that contains both the rollover and the normal state of the image, thus making it twice as long.

div.imgcontainer {
  width: 50em;
  height : 25em;
  overflow : hidden;
  text-align: left;
}

div.imgcontainer:hover {
  text-align: right;
}

<div class='imgcontainer'>
  <img src='images/image.jpg'/>
</div>

Note that the image container is the width of a single image, while the actual image is double that. When you use ‘overflow: hidden; everything that falls outside of the div will be clipped. Thus showing only the left half of the image. When you hover over the image the alignment of the div changes, showing only the right half of the image.

Another way to make it work

Another way to do this is by putting an image as a background for the div, and a different one for the :hover pseudo class.

div.imgcontainer {
  width: 50px;
  height : 25px;
  overflow : hidden;
  background-image: url('/images/image.jpg');
}

div.imgcontainer:hover {
  background-image: url('/images/imageon.jpg');
}

<div class='imgcontainer'>
&#160;
</div>

This works the same, but it has a downside, the image still has to be loaded once the the mouse is put over the image, making it flicker for a moment. This can of course be solved with preloading in javascript, but were just trying to get rid of javascript.

And a third way

div.imgcontainer {
  width: 50em;
  height : 25em;
  background-image : url('/images/image.jpg');
}

div.imgcontainer img:hover {
  visibility : hidden;
}

<div class='imgcontainer'>
  <img src='images/image.jpg'/>
</div>

This example has a regular image, and it has a background-image which will be hidden by the picture. When you hover over the image tag, inside the div the image is made invisible, showing the background image.

Again, there’s a downside to this method, a background-image is always the size the original image is. While an image from an img tag can be resized just like text, when you set width and height in em. So, this method gives a resizeable normal image, and a fixed size mouseover image.

Take you pick, no more excuses for javascript rollovers.

1. More classes

So you’ve mastered classes? But did you know you can use more than one class per element?

<p class='first big'>text</p>

This way, the CSS rules for both ‘first’ and ‘big will apply to this paragraph. If any rules overlap the one that’s closests to the bottom in the css will prevail.

2. Descendant selector

HTML is a tree structure or DOM document, and as such an element can have children. CSS uses this fact by giving the ability to style the decendant of a specific element.

<div><p>Text</p></div>

div p {
  background-color: green;
}

This rule only applies to paragraphs that are in a div, but not nessecary directly. If there is a table in the div, and in there a paragraph this rule will still apply.

3. Child selectors

The previous tip shows how to style all descending paragraphs in a div. But what if you only want to style direct children? That’s where you use child selectors.

<div><p>Text</p></div>

div > p {
  background-color: green;
}

Unfortunately IE doesn’t support this, the good thing is so don’t trust on it blindly.

4. First child pseudo class

You might want to style the first paragaph in your content div differently. You could add a class to every first paragraph. But CSS also has it’s own pseudo class which can do this for you.

div > p:first-child {
  background-color: green;
}

5. Pseudo elements

Another not frequently used css property, the pseudo elements. :first-line, :first-letter and :before and :after

body:after {
    content: "The End";
}

This writes “The End” just before the </body>, so after it’s contents.

A happy new year to everyone and the best of wishes.

Sonja

Xpath is used to get to a specific element, or node set in xml. But how does it work?
First, a piece of xml.

<?xml version="1.0" encoding="ISO-8859-1"?>
<navigation>
<menu>
<name>Contact</name>
<item id='1'>
<caption>Address</caption>
<link>http://link/</link>
</item>
<item>
<caption>Contact form</caption>
<link>http://link/</link>
</item>
<item>
<caption>Route description</caption>
<link>http://link/</link>
</item>
</menu>
</navigation>

This piece of xml describes a menu for a website, and the submenu that goes with it.
Now it’s very concievable you’ll first want to show the name of the menu.


/navigation/menu/name


This is much like a directory structure. The / means it’s starting from the root node (navigation), from there it goes to menu, and on to the name. If there were more menu nodes in the xml this would not only point to the name node with the contents “contact” but also to all other nodes “name” in “item” in “navigation”.

Now, as the previous example shows you can get to the node name and similarly get to the (submenu) items in menu. But what if you want to specifically get the first item?


/navigtion/menu/item[1]
/navigation/menu/item[position()= 1]
/navigation/menu/item[@id="1"]


All of these do the same thing. They select the first node with the name “item” for all menu nodes in navigation. By using the [] you can, as with arrays in most languages, get the node you want. But starting with 1, as there is no zeroth node.

The second example shows basically the same thing, except in this case the position of the node is tested wether it’s one. Position() is one of the functions that you can use in Xpath.

The last one shows a test wether the attribute “id” is in the node and it’s value is 1. Of course
these tests can also be done for menu. Getting the last item in the first menu could be accessed like this.


/navigation/menu[position() = first()]/item[position() = last()]


First() and last() are two more functions from xPath, their use is simple, they select the first and last node of the nodeset.

Another part of XPath are axis. A node in an xml tree can be seen as part of a family. Each node can have children, siblings, ancestors and such. You don’t always start from the root node in a document but can start from another node as well. When you’re in the last item node and you want to get the name of menu you’d use the following syntax:


parent::node()/name


This selects the parent of item, which is a node and from there to the name of the menu.

With these simple rules you can access all nodes. Of course there’s more to it, for a good explanation check out w3schools.

Prefetching is a technique used by Firefox and Mozilla to fetch a page before the link is actually clicked. It uses the idle time of the browser to get the contents you would probably want to see next. How does it work, and why would you want to use it?

How it works is quite simple, by adding a link:
<link rel="prefetch" href="/images/big.jpeg">

By sending out a HTTP Link: header
Link: </images/big.jpeg>; rel=prefetch

Or specify the http link header in the document itself by adding a metatag.
<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">

When the browser finds this header or link tag in the page it will continue to load this page and after it’s finished it will start to load the prefetch contents, by this already placing it in the cache so it’s faster to view the page when you actually want to see it.

Why would you use it?
I’ll explain this with an example. At the moment there is a big overhaul in the health insurance in the Netherlands. All old insurances are changed to a basic insurance. So there are about 10 million people that want find information about these changes. Assume you sell insurances, amongst which health insurance. Most of you visitors will be looking for information about this basic insurance. By already prefetching this page you’ll save your customers waiting time.

Another example is google, when you look for something specific like ‘Connectholland‘ which is the company I work for. Google will in this case assume that you are in fact looking for the company and will add a prefetch link to the page.

Check wether your browser supports prefetching.

If you’ve ever read Nielsens top ten webdesign mistakes you’ll know that one of the mistakes that comes back year after year is not differing between visited and not visited links. The question generally is how to do this without breaking the design.

Designing a different mark-up for the current active link, and giving visited links another nice design sometimes proofs hard. Especially since it gets confusing with three different designs in one menu. What design means what?

Now I’ve found a site that has found a really great way to do this.
http://www.collylogic.com/

Collylogic has checkboxes after their links which show wether it’s active, visited or just a link. They way they’ve done is very easy. They use <ul> and <li> to build the list of links. Especially with the upcoming css dropdown menu’s that have been appearing lately this is a very common practice. In there a normal link is placed <a href=’link.com’> and, here’s the trick, a bit of css is added.

a { display : block; width: 200px}
a:link { background-image : url('/images/link.gif')}
a:hover { background-image : url('/images/hover.gif')}
a:active {background-image : url('/images/active.gif')}
a:visited {background-image : url('/images/visited.gif')}


By making sure the image is as wide as the link you can get the checkbox at the end of the link, or at the beginning. It’s very easy, and adds a lot in respect of usability to your site.

edit: Since I liked this so much I went ahead and added it to my blog, in a modified version of course. The blogroll now features a different images for visited links than for other links. And if I were good at designing you wouldn’t have to check out the example at collylogic anymore, but theirs just look better.

What is web 2.0? Is it just a buzz-word used to sell, or is it a technology?

Web 2.0 got it’s name from the web 2.0 conference and at first meant nothing. Now however web 2.0 points to a number of vague things like ajax, and democracy, and user based content. Web 2.0 means nothing.

In october 2004 a conference took place with the name “web 2.0″ and there it was discussed what implications it had the the web was becoming a real platform. Or put more clearly, now the web isn’t such a hype anymore what to do with it? And what is being done with it to make ’something’ a succes.

O’reilly (from the books) wrote something about that conference. He describes web 2.0 as adhering to 7 points:
1. Services, not packaged software, with cost-effective scalability
Like google, you don’t buy it in the store, and install it, you just use it. Very easy.

2. Control over unique, hard-to-recreate data sources that get richer as more people use them
Again, look at google, if everyone had the data they had, they’d have a much harder job. So get your own data, don’t buy it somewhere.

3. Trusting users as co-developers
Just look at firefox, what other users can’t do! Set up newsgroups, wiki’s forums and everything you need to get input from your users.

4. Harnessing collective intelligence
Use what people say and know in for example blogs.

5. Leveraging the long tail through customer self-service
Don’t only sell to the high end of the market, also sell to the kid who only has two pennies, just make sure you don’t have to service him personally.

6. Software above the level of a single device
Don’t make a different piece of software for every computer, make something that works!

7. Lightweight user interfaces, development models, AND business models
Don’t annoy the user with too much anything. And don’t annoy yourself by making everything complicated.

So, web 2.0 is more of a philosophy of how to make the web work according to O’reilly.

However that’s how it started, not how it ends up. It’ll end up as nothing. When I think of web 2.0 it’s a vague collection of phrases and ’something new’. When you google for web 2.0 you’ll find that this is a quite common way to see web 2.0. Vague. I hereby suggest that web 2.0 will stop being hyped and marketed, and only be used as the name of the convention.

Thus, web 2.0 is an empty frase meaning nothing.

After the succes of Adobe/Macromedia’s dreamweaver, illustrator, photoshop, fireworks and flash Microsoft decided they should not be left behind. So Microsoft is coming with the expression family. The expression family consists of 3 products, the graphic designer, the interactive designer and the webdesigner.

Expressions Acrylic graphic designer
This one seems most like a combination of photoshop and illustrator. It’s said to combine all the power of vector based design and all the detail of pixels. It uses both types in one document making up for something long missed in both photoshop and illustrator.

Expressions Sparkle interactive designer
A mix of fireworks and flash, add interactivity and buttons, animations and images. Now the real question is how usable is this still? With native 3d support and all the other options will you get lost in this? I guess we’ll see.

Expressions Quartz web designer
So, microsoft had frontpage, which has been the laughed at by all webdevelopers. Horrid code for even the simplest of things. They decided the could do better. With Quartz web designer one can build website according to w3c standards and easily incorporate php/asp and other languages.

Now why should you use these three products once they come out? Well, if everything works as planned the step between design and development should become less of an issue. All work created in the graphic designer program or the interactive designer one should be easily incorporated into the webdesigner one. And by making sure everything uses common file types a link between the expressions family and the .net suite should be all to easy.

My real concerns with this are, how well will things made on this platform run on for example linux pc’s. Just look at html code that works properly in Internet Explorer but isn’t supported in any standard.
And secondly, what about usability? How many buttons will that be. If you look at flash you’ll see that it has quite a high learning curve already. Something like a motion tween is for beginning users hard enough. How will the interactive designer deal with this? Seeming like a mix of both flash and fireworks, well, there’ll be enough to learn.

See the demo

It seems that a lot more emphasis is put on search engine optimalization (seo) the few months than it has before. Today I’ve been explaining to a client how he needs to write his text in order to be found easier on search engines. So let’s write a small post about seo.

Flash
One of the things search engines struggle with badly are flash sites. The content is hidden away from the search engine so it can’t decide what your site is about. Just a menu in flash is bad as well, the search engine won’t find the links as easily as it would otherwise. Also, having a whole site in just 1 flash page makes for less links to yourself. A website with 5000 pages is indexed higher than 1 with just 5, or even just 1.

How to solve that? Well, if you want your site to be found by everyone, don’t use flash. But alternatively, if you do feel you need to, make sure you add your links as plain (commented out) content as well. Also, your text can be added this way. This isn’t a perfect nor failsafe solution however. Good things are coming however, slowly. Adobe (previously Macromedia) came out with SDK the flash search engine tool. With this a search engine can decompile flashmovies into html pages which contain the content of the swf.

robots.txt
Now this might not be the first thing you think about, but it’s quite important. Lately a few major search engines (amongst which MSN) got massive complaints about their spider (MSNBot) not following the rules laid down in the robots.txt. So, they changed it and made it much stricter. So strict in fact it seems to get confused when no robots.txt is present. Also, without a robots.txt a site is often not spidered as deeply as without.

So, find out how to write a robots.txt and add it to your site, it’s the first easy step to having your website found.

The best name for a search engine is “inktomi slurp”. Currently known as slurp. This one is from Yahoo.

Content
This is one of the more important things in seo. Keywords. Find out what people are looking for when they need to find you. For example, if I would do webdesign, chances are my keywords are probably websites and design. Not webdesign, as most people don’t want their site to be designed, they just want a site.

You try and figure out what people will search for when they need to find YOU. Make a list of about 10 words, more won’t work. Then, you write your text so that you actually use those words. Also, make sure your page names fits your list of keywords. This way, when someone links to you, the link will show what your sites about already.

Links
So, I said links in the last sentence. And links is the magic word in seo. But, only quality links count. A search engine decide in a number of different ways how important your site is for a specific keyword. (People look for keywords remember?) Now, if a site links to me, and that site is also important for that keyword, I will get some extra credits for that keyword as well.

At the moment there is some controversy whether it works the other way around as well. So, if someone links to me from a site about yellow pudding my rating for multimedia engineering would drop as obviously my site is about something else. Wether it actually works like this, I would think not. It makes it too easy to pull your competitor down, instead of lifting yourself up. Making seo a mudtrowing game very quickly. The final word about that is not yet in however.

Dynamic pages
A lot of sites (especially sites which use a framework) use one page, which links through to all others, and many more have a hundreds of pages, which are linked to with something like /index.php?cat=flash&id=12. This is horrible to read and remember for people to start with. But it’s also bad for search engines. Content is frequently seen as being on but one page. And thus, not indexed correctly. Since most search engines pentalize for bad content this is something that needs to be fixed.

Good thing there’s rewrite rules. Put them in your .htaccess file, of in the httpd.conf if you use apache. This can change the url to your page into something a lot more readable.

Build a good site
The best piece of advice however is, build a good site, write interesting and unique content on it, and update regularly. Make sure people have a reason to go to your site, because they can find what they want their. From there things will flow naturally, you’ll get links, you’ll get page rank, and after the next google dance you’ll see how far you’ve jumped.

HTML validation This amazing firefox extension by Marc Gueury shows you, at the bottom of each page how many errors and warnings there are in that page. It does this without sending the html of to w3c or another validator, but uses tTidy the embedded validator of Firefox originally made by the w3c.

As this extension shows you with just a glimpse wether your page is valid Html or not. (You forgot the doctype declaration again? Now there’s a big red cross in the bottom of your screen saying your code is wrong!) It’s much easier to keep your code clean and clear while working on it. Also, you’ll see it the instant you create the error, so correcting it is also easier.

However, this only validates the HTML as it is in your source code. But, with todays rich content, how often isn’t your source changed on the fly after the page is done loading? That’s where the DOM inspector comes in. Do note however, that you will need to have installed firefox as a developer (it ask that in the installation process). Press ctrl+shift+I to see the DOM Inspector. The great thing about this one is that it actually shows the source as it is at that moment in memory.

And if that wasn’t enough, the DOM inspector can also give you a list of the CSS. If it’s CSS you’re after however I would suggest using ‘view formatted source’ or ‘aarvark’ as an extension as they both do a great job.

Whatever you use, there is no reason you should write faulty HTML. By making sure you put a doctype declaration at the top of your document the browser will know how to interpret your HTML making differences between browsers less as well.

I’ve been working on some flash stuff lately, building a semi 3d world through which one can roam somewhat freely. However I found some weird behaviour in Flash. Apparently, new means second hand.

The as class
class Line {
var values_arr = new Array();

function Line() {
}

function setArrayValue(i:Number):Void {
values_arr.push(i);
}

function getValue():Array {
return(values_arr);
}
}

The code
for(var i = 0; i < 10; i ) {
var line:Line = new Line;
line.setArrayValue(1);
}
trace(line.getValue());

Result of the trace
1,1,1,1,1,1,1,1,1,1

This is easily solved by putting the ‘new array()’ not in the variable declaration but in the constructor function. But why would flash use an old object if you make it with ‘new’?