Tuesday, August 26, 2008

Introduction to HTML

I'm really sorry but blogger just sucks with code. It removes any HTML tag I write and puts a blank in it's place. I can't write a tutorial without giving examples. Sorry.
I'll try to fix this problem as soon as possible.


edit: there seems to be no solution yet for blogger (only for blogger-draft). Even more of a reason to create my own website and host my blog there.

I have saved this post in .txt file and as soon as I complete my website I will post it.

Have Faith =)

Saturday, August 23, 2008

Splitting your Website Layout

Unfortunately we can't just tell the browser to take our little image and make a fully fledged website out of it. We have to tell him how to. To do this we first have to split our layout into boxes as the website will then be orderly and easy to realify.

Here's how I did it:

the website will have to be split so that each box can be represented by a box with the following attributes:
  • height (percent of screen/pixels/font size)
  • width (see above)
  • background color (any color represented by hex)
  • background image (any size and anywhere)
  • text or other content (tables/lists/links in any form of presentation)
Remember, keep the boxes to a minimum but still use enough of them to be able to produce neat code. A box for the header may include two other boxes, one for the title and one for a company logo or an add or something similar. Then you will need a box for the content (only one). Last but not least you will need a box for the footer which will display copyright information and the like. If you wrap all your boxes into one main box it will be easier to center ALL of the content. You can of course use one or two more boxes if you like, for example for an advertisement or new bar. All in all you should have 3-7 boxes.

Next we will start coding...

Designing a Website Layout

The next step in creating a website is to draw up a quick sketch of how it's supposed to look like when finished. Later you will have to worry about how to realify your image but now let your artist sense roam free. If you have more than one idea go ahead and sketch them all, it's always good to have a backup plan. For designing the website you can use any simple painting program, it doesn't have to look good, remember, this is just so you know how your layout will have to be written. You could even use our trusty friend old pencil and paper.

So I've gone ahead and done 2 quick sketches in bitmap:

remember this sketch is designed for me by me (which means it's encoded in maniacode) but I'm going to explain it to you anyway. The bblahblah part is the text the user is viewing, this can be a game too or pictures. The scribble to the right of it is supposed to be a scroll bar (don't laugh). The title (at the top) is the title of the document the user is viewing. The red scribble in the top left corner is my company logo (it signalizes uniqueness and creativity). The curvy blue/purple/light-blue lines are going to look shiny and clear like plasma/water tentacles. The menu is the black scribbles below my great company logo.

Here's my second sketch:

I'm not going to explain this one, it's readable by average maniacs so yeah...

When drawing your sketches put yourself in your viewers shoes. Would you find it accessible? Interesting on first sight? Neat? Ugly? Too Pretty? Too Colorized? Too Bland? Take special care that he finds what he's searching for quickly without any hassle.

The next post will be about splitting up your image into boxes as those are easier to represent in CSS/HTML,

Until Then... Bye

Wednesday, August 20, 2008

Website Outline

The first thing I do is always to think and create an outline. The outline doesn't have to be the final outcome, just a rough draft so you now what you want.

My outline looks like this:

---Unknown (will think of later)
----Welcome message with blog below that
----Contact formula not showing my e-mail address (due to security reasons)
---About? (maybe...)
--Style of Website
----Dark background with light text (cool)
-----black background with almost white text
----Very Light background with dark text (clean)
-----Blue tones and white and maybe mix in some purple

those colors just randomly came to my mind because i think they fit nicely together:
dark theme (cool): lllllllllllllllllllllllllllllllllllllllllllllllllllllll
light theme (clean): lllllllllllllllllllllllllllllllllllllllllllllllllllllll

Color picking can be a very big deal but for my purpose I don't need to know what every color represents and stuff like that's since it will be a rather small website at the beginning. When the hit-count picked up some speed I might post about picking correct colors for correct occasions but that's going to take some (long) while unfortunately.

Well, the outline is finished and now I have to think about how I will accomplish my goals...

Tuesday, August 19, 2008

Im Back

I'm back from the holidays. It took me quite a while (eight weeks) to meet all my friends again in Germany and Switzerland (I'm currently living in japan). I went to a sea in the middle of the woods in Germany, it's very beautiful out there. I saw my grand-parents (all four are still living). I ate tons of pudding and Swiss chocolate. I saw a gigantic digital billboard at a train station displaying a blue screen. I took the airplane twice and ate really bad food. Unfortunately I didn't have Internet access during that time so I couldn't post (that really sucked). Did I mention that the airplane food sucks?

Anyhow, I've decided to pause my development from my 3D engine and create myself a website. I really need one to post my Java apps/games and I'll add this blog to my website too (if I can). The website will also contain a contact formula (not showing my e-mail address). Later on, when there are more visitor I'm hoping to add a forum and an account-system which saves your game high scores and the like.

That's it for today...