Thursday, January 31, 2008

Install multiple versions of IE on your PC

Install multiple versions of IE on your PC










For web designers who wants to see how their site looks on multiple versions of Internet Explorer, this is a great program. It allows you to have all IE versions from IE 3.0 until version 7.0

download site

Wednesday, January 30, 2008

Macromedia Fireworks Free Textures (379 in total)






















If you like Macromedia Fireworks then you would get in love with this textures, 379 in total

Download from here

Tuesday, January 29, 2008

Validate your website or not?






















The days that IE was number one browser has gone and new players appears. Websites are not Microsoft FrontPage
babies that works properly only in IE. The effort that a web designer have to make to create a well done website that follows the web standards but at the same time works on multiple browsers have increase.

I have read a lot of articles about the importance of validating the HTML and CSS code of your site and found that it is not so “important”. I don’t say that you don’t need to do it, but sometimes it’s difficult to apply the web standards to your website. The most important thing is to make your site to work on multiple browsers: Firefox and IE (at least on version 6 and 7). If you archive this it will be ok for your visitors.

But if we analyze in more depth the importance of validating your site you will have the following benefits:

Your site will be working on multiple browsers (not absolute). I found that making your site behave normally in IE you will need a little more effort. Sometimes you need to write a different CSS for it and include it in the following tags:






Internet Explorer browser display forms, text fields, buttons and some form elements a little different than Firefox. Especially you will discover the IE always put a padding to your form for no reason. To fix this you will have to write the following CSS code:
form{
margin:0px;
}

Also, if you apply border styles to your button or text field you will have to play with their height because IE displays them different than Firefox.


Fewer strange problems. Less problems with text align and padding issues. For example, if you make a page and don’t give text-align properties to it you will find that Firefox align the text on left and IE align the text on the center. So you will always have to give text-align properties in your CSS:

text-align: left; or
text-align: center; (there are more options: right, absolute…)

Search engine friendly site. If your code is clean and follows the web standards the search engine crawlers will be able to analyze in more depth your site and get more information, otherwise they will leave on the first bad code.

Discover and recover broken links. I think i don't have to analyze that point, it's obvious.

Be more professional. If you learn to write clean and validated code then you will increase your web design abilities, save a lot of time and effort from try to validated your site, use useless code will be a history and generally you will be more proud about your work.


Some useful links

HTML Validator
CSS Validator


I make a search to see which of the most popular site are HTML validated (XHTML 1.0 strict) and found the following results (Top 10 sites from Alexa.com):
  1. Yahoo.com HTML: Failed CSS: Pass
  2. Google.com HTML: Failed CSS: Failed
  3. Youtube.com HTML: Failed CSS: Failed
  4. Live.com HTML: Failed CSS: Failed
  5. MSN.com HTML: Pass CSS: Pass
  6. MySpace.com HTML: Failed CSS: Failed
  7. Facebook.com HTML: Failed CSS: Failed
  8. Hi5.com HTML: Failed CSS: Failed
  9. Wikipedia.org HTML: Failed CSS: Pass
  10. Orkut.com HTML: Failed CSS: Failed
Only msn.com pass both html and css validation. You can see that the big players don't care too much about the web standars. They want only to make their site works on all browser (that don't mean html&css validated) and offer their products.

It is up to you to decide what is the best.

Monday, January 14, 2008

Simple Java Chat Client-Server

This is a project i had in the Computer Networks Cource in University.

Download it here

What was asked is to create a Java Chat Room application, which uses a certain protocol (given) to implement a server client functionality.



How the protocol works:


Client:

  • Client sends Login command. The server checks if no other person has that nickname and sends back the List command that is a list with all the other clients (explained bellow)
  • NewNick command. It is send by the server to the client to notify that nickname is not available.
  • PrivateRecieve , private message from nickname (!)
  • Logout: Client sends that command to logout from the server and then exists the Gui
  • Logout : nickname has logged out
  • Gui for all this, pretty simple

Server:

  • It opens port 9999 and wait some connection
  • When it get a connection waits for Login command. It then checks to see if nickname is available. If nickname is not available sends the NewNick command back to notify the client
  • If nick is availiable the server sends the List to all the clients
  • When it recieves a Post command then sends msg to all the users in the chat room
  • PrivatePost sends msg to the nickname
  • When recieves the Logout command, deletes the nickname from the clients list and resends the List command to everybody
  • Server is created with threads so that it can handle a large number of clients
Client Gui
  • Action - Connect Popups a window to select server, ip or host. If you run the server on your computer leave it to localhost
  • Action - Disconnect Disconects ...
  • When connected a second window popus to ask you for your nickname
  • If nickname exists the client asks you for a new one
  • When connected you can write your personal message down and press enter or the send button
  • For private message click on the nickname you want to sent it and write the message

The project is in fact simple and is based on the java tutorial http://java.sun.com/docs/books/tutorial/networking/sockets/index.html

The source code comments are in greek (since i am greek), but anything you might want to ask just leave a comment, i will answer as soon as i see it

Some images:








Saturday, January 12, 2008

Create a mountain with Fireworks

With the pen tool create a triangle shape

Create a mountain with Fireworks
















Give to the shape the following characteristics

Fill category -> Gradient -> Linear
Color -> i use #FF9900 and fading to white (#FFFFFF), you can use any color

Create a mountain with Fireworks
















After, with the pen tool create a shape like the below (with black color)

Create a mountain with Fireworks
















Now give to the new shape:
color -> #FF6600

and select the two shapes and clone them (edit -> clone) and resize (modify -> transform -> numeric transform... -> scale = 60%). Now place them behind the original shapes.Create a mountain with Fireworks
















Create a mountain with Fireworks

Friday, January 11, 2008

Create a beer mat with fireworks

Because beer mat looks always dirty and wet we have to represent this things. We can do this using an old paper like the below.

Create a beer mat with fireworks

















We will use the old paper effect after. First you have to create a rectangle 350x350px and give to it the following characteristics:

color -> #663300
rectangle roundness ->20%
texture -> NN_fractal256_hline2noise

If you don't have this texture you can take it from the image below

Create a beer mat with fireworks













The result will be this

Create a beer mat with fireworks





















Then you can make a border for the mat and write some text. For the border is a rectangle with no fill color, just border color (#FFFFFF white) and tip size 2px. Also I add to the border noise from the effect list.
Add some text also.























Finally, we will give the old paper effect to the beer mat. what we have to do is to give to the old paper from the effects list the effect Convert to Alpha.

Fix the corners with eraser tool, I do it very fast so forgive me if it is not perfect























Other colors






















When you take the law in your hands

When you take the law in your hands

Fade effect with Fireworks

Select a picture



















Then create a rectangle



















Give to the rectangle the following effects (Properties bar at the bottom):

Blend mode -> Erase
Edge of fills -> Feather
Amount of Feather -> 40% you can play with this value
























Place the rectanngle at the bottom of the picture.