Slicing and basing

A lot of people always think of what they say, slicing or basing? In this article your will read about what it is and what you should say.

Slicing
Very shortly said slicing is cutting a layout into small pieces. If a layout is created, which is usually in PhotoShop or another similar program, the layout is one big picture. And if you cut it in different pieces you can make with that the xHTML document. Officially slicing is also making the xHTML document, but a lot of people forgot that.

Basing
Basing is properly a non-official word. It is thought by someone on a later moment. The word means also the same as Slicing. Cutting the layout into pieces and making the xHTML document. Before the word basing exists, slicing was the word for making the xHTML document. The process of a website has three steps. Namely:
1. Designing with PhotoShop
2. Design to xHTML
3. Scripting (php, js,)
So the word basing is a word that is exactly the same of slicing. Some people think if they hear or read the word slicing that it is only cutting the layout into a lot of pieces. But that isn’t true. In the program PhotoShop there is a slicetool. With that tool you can easily cut you layout into pieces and PhotoShop will make the document. But a lot of people don’t appreciate that, one of the reasons is that PhotoShop don’t make semantic code.

Semantic
Semantic code is a very important component. Semantic code is not anything like a new kind of html, but it is just the way how you make your html. Like the use of the ><h1 and that kind of things. It has a lot advantage like:
• You have a lot less code. So your website will be loaded faster.
• Search machines have spiders to find websites and save them. But a spider can’t see any style. Only the code. But with some html tags you can say to the spider that a word is very important. If you have a website about snakes and you have the word snakes between the ><h1 and ></h1. You say to the spider that that is a very important word.
• The browser can very easier give a good picture of what the website looks like.
A simple example:
If you made a menu, you can make it with a separate div. And with the ><a element you can set a hyperlink on it. But a menu is properly a list with some choices where you can choose out. That’s why you should make a menu with an ><ul and an ><li element.
A small tip so you can see if you have a semantic code is to put all your css and JavaScript away. You see that the important things like your website should name be bigger.

Image Optimization
Image optimization is that you give all your images a good extension, so png, gif and jpg. For sharp pictures your always use jpg and for animated stuff you use gif. All other images will use png. And if your image is transparent, you also need png.
You also can repeat your image with css. The best way to do that is to make a 1px of the image and with css you can repeat it. This is also good for the load-time of your website.
There is a problem with one thing; Internet Explorer doesn’t support the transparency of a png image. You will see a gray background on the image and that looks probably always bad. But you can fix this with javascript, but some people have turned it off. So that isn’t a very good solution. You also can use css to fix it. Microsoft has there own solution. With conditional comments you can give other things to the browser, but only to the Internet Explorer browser. On the image here you can see how you fix this with css.



Valid (x)HTML
Valid html is something that people often confuse with semantic code. But there is a big different. Some html document could be valid html, but there isn’t any semantic code. Valid html is html that is made by the standards. But there are many standards, and you can indicate it with a doctype declaration. There is also a different between HTML and xHTML, one of the difference is that some tags need to end wit >/ instead of >. So ><br word <br >/ and <img >… word <img … >/. If you are not sure that your document is valid. You can check it here: (Log in om link te zien!) .

Doctype Declaration
A doctype is a line above ><html. With this you can say to the browser with version of the standards you will use. This is handy, because a tag can have another force by a version in 2000 and in 2008. There are three other versions of the doctype it self. These versions are:
- Strict, this version you need if you want a very clean html.
- Transitional, with this version you may use more elements, like ><font
- Frameset, this one you use if you have frames in your html



Character Encoding
you will need a character encoding for letters like ë and é. If you don’t have a character encoding the ë will change to a question mark.



Some tips
• First you need to know a lot about html and css
• Don’t use JavaScript for rounded corner and things like that
• Use conditional comments if you need them for Internet Explorer
• Always try to make your layout good in the following browsers: IE 6/7/(8) – FireFox – Opera – Safari
• Use sIFR only for titles, not for whole texts

For sharp pictures your always use jpg and for animated stuff you use gif. All other images will use png. And if your image is transparent, you also need png.

I think you mean that for photos, using JPG is the better choice most of the time. Most of the time, because if it's a small photo with text on it, using JPG can cause artifacts or have a (relatively) high image size. So on some occasions, it's still better to use GIF or PNG for smaller photos with text.

GIF also supports transparancy by the way, but does not support alpha transparancy. Overall, PNG is a superior format over GIF, although many people still prefer using GIFs, also for non-animated images with a relatively low number of colors.

Overall, a nice post even though it doesn't quite seem complete. Currently, it's just some notes and tips listed under each other. You could consider looking at the structure of the document.

Then there's some small things, for instance you don't really explain what semantic code IS. The idea behind semantic code is to let the code only describe what to display, not how to display it.

You see that the important things like your website should name be bigger.

Size has nothing to do with it. It's about structure. It's like writing a book, with chapters and paragraphs, that you use to tell a story. Take away the content and look at the structure. Does it make sense? Then you're on the right track.

The reason behind this is that Google tries to reward 'good' websites by giving them a higher ranking. To be able to determine if a website is good or bad, Google indexes it. It looks at the structure and content, and by analysing it (keywords) determines what the site is about, how useful that is, and how the website relates to other websites (for instance, how popular is it).

I'll stop for now, but you've done a good job already. Keep it up!

And if your image is transparent, you also need png.

In IE6 you'll get blue instead of tranparancy, a lot of people forget that. There are special programmes for solving this problem.

Maybe you could add this to your article, because it can totally mess up your website.

You can see one solution on this picture (sorry for the small size).
(Log in om link te zien!)

In the article states that even though, but there is something gone wrong, so you can't see the pictures.