Omnimaga

General Discussion => Technology and Development => Web Programming and Design => Topic started by: Deep Toaster on May 11, 2011, 07:43:23 pm

Title: Star Trek's project page
Post by: Deep Toaster on May 11, 2011, 07:43:23 pm
ACagliano made a project page for that little Star Trek game (http://ourl.ca/10929/207480) he's working on. He asked me to touch it up and give the page "a 'spacey' look," but just for the fun of it (because I have that much time on my hands) I did an entire redesign.

(Click the images to view the actual page.)

Old:
(http://img714.imageshack.us/img714/5756/oldcm.png) (http://clrhome.co.cc/projects/startrek/old_index.php)

New:
(http://img405.imageshack.us/img405/3096/newq.png) (http://clrhome.co.cc/projects/startrek/)

Probably the best web design I've done so far :D

Thoughts? Any suggestions/tips? Rants?
Title: Re: Star Trek's project page
Post by: DJ Omnimaga on May 11, 2011, 07:48:42 pm
This looks nice so far, but it would be nice to maybe remove the white stuff around the logo and give it some sort of 3D ish look so it stands out more from the background.
Title: Re: Star Trek's project page
Post by: Deep Toaster on May 11, 2011, 07:56:23 pm
That was the closest I could get to making it 3D without having to use an image.... Maybe I should just use an image.
Title: Re: Star Trek's project page
Post by: Deep Toaster on May 14, 2011, 11:04:51 am
*bump*

http://clrhome.co.cc/projects/startrek/source/

Made my own line numbering engine in JS. Epic fail in IE (because it doesn't support word-wrap: break-word), but oh well. I might test IE and make an exception for it :P

Maybe I should just make it a normal numbered list and make things easier for myself.... Hmm.
Title: Re: Star Trek's project page
Post by: DJ Omnimaga on May 22, 2011, 12:54:19 am
Nice Deep Thought. I wonder if it would be better if the code was on dark background, though?
Title: Re: Star Trek's project page
Post by: Deep Toaster on June 13, 2011, 12:05:52 am
Made it darker, and added a little screenshot showcase thing on the demos page (http://clrhome.co.cc/projects/startrek/download/). They're obviously still placeholders, but the actual functionality took me hours to fix up, even in jQuery x.x
Title: Re: Star Trek's project page
Post by: Darl181 on June 13, 2011, 12:33:26 am
Oh noes, a RAM clear screenshot? D:
jk

Looking good, keep it up ;D
Title: Re: Star Trek's project page
Post by: Anima on June 28, 2011, 11:15:07 am
Oh, that looks preety nice, especially the JavaScript effects. How did you made this editor for the source code?
Title: Re: Star Trek's project page
Post by: Deep Toaster on June 28, 2011, 01:23:48 pm
Quote from: Anima on June 28, 2011, 11:15:07 am
Oh, that looks preety nice, especially the JavaScript effects. How did you made this editor for the source code?

Lol, I really overdid that. It would have been easy to just separate each line and wrap them in <li> inside an <ol> (numbered list), but no. I had to do it the hard way. So I separated each line, put it in a <td>, created a whole new <td> to house the numbers, and for each line I had JS count the number of lines it would take up if it wrapped.

Would have been so much easier to do it the way everybody else does (and would have made it compatible with IE, too). Oh well.