Thread: Ripping websites apart and putting them back together...

  1. #1
    Lean Mean Coding Machine KONI's Avatar
    Join Date
    Mar 2007
    Location
    Luxembourg, Europe
    Posts
    444

    Ripping websites apart and putting them back together...

    ... or how to fix queatrix website

    I didn't have much to do this morning and since I felt that it was time for a little markup practice again, I had a "quick" look at queatrix's website. I had a good laugh for several minutes, I haven't seen so many "hacks" recently in HTML.

    I pretty much had to throw everything away, the entire design was made with tables, the content was mixed with the design and stuff had been done in such an awkward way that it would have taken more time to fix than to start from scratch.

    The result can be seen here: http://www.progressive-coding.com/projects/queatrix/

    The design is fully W3C compliant, so is the CSS. The look should be the same across every major browser. I ran into slight problems because of the known problem of "3 fluid column design in CSS", for which there is no "correct" way of doing it.

    I also threw about 2/3 of the images away and reduces the site size from 28kb to 5kb. The design isn't the same a 100%, I was too lazy copying the original css 100%, the result is "similar" (text size, font and positions may vary).

  2. #2
    Deathray Engineer MacGyver's Avatar
    Join Date
    Mar 2007
    Posts
    3,210
    Try checking out cprogramming.com

  3. #3
    The superhaterodyne twomers's Avatar
    Join Date
    Dec 2005
    Location
    Ireland
    Posts
    2,273
    Did ya change the links too

  4. #4
    Frequently Quite Prolix dwks's Avatar
    Join Date
    Apr 2005
    Location
    Canada
    Posts
    8,057
    Quote Originally Posted by twomers View Post
    Did ya change the links too
    And add ZIP files? It's very annoying to download six or seven files just to get one program to run.

    What made you decide to do this to Queatrix's website? Was it my post?
    dwk

    Seek and ye shall find. quaere et invenies.

    "Simplicity does not precede complexity, but follows it." -- Alan Perlis
    "Testing can only prove the presence of bugs, not their absence." -- Edsger Dijkstra
    "The only real mistake is the one from which we learn nothing." -- John Powell


    Other boards: DaniWeb, TPS
    Unofficial Wiki FAQ: cpwiki.sf.net

    My website: http://dwks.theprogrammingsite.com/
    Projects: codeform, xuni, atlantis, nort, etc.

  5. #5
    The superhaterodyne twomers's Avatar
    Join Date
    Dec 2005
    Location
    Ireland
    Posts
    2,273
    >> And add ZIP files?

    Nah. They're up now, but when you click on them, in FF, it goes into a page with lots of text instead of downloading it, for some reason.

  6. #6
    Lean Mean Coding Machine KONI's Avatar
    Join Date
    Mar 2007
    Location
    Luxembourg, Europe
    Posts
    444
    I actually didn't fix any of the content related mistakes, but rather the fundamental mistakes in the design of the page. I got rid of the HTML table, separated the content from the visual layout and even found some time to write a tutorial about it.

    If you're interested, I explain how I implemented the CSS design from scratch, how I designed the different parts and what you need to pay attention to when you try to create a clean HTML page.

    While reading the other thread, I first intended to write a complete list of all the mistakes in the website, but after a short look at the html code, I came to the conclusion that it was hopeless and I better redo the whole thing from scratch. Since I'm always looking for new content for my website, I thought this would be ideal for a new tutorial.

  7. #7
    The superhaterodyne twomers's Avatar
    Join Date
    Dec 2005
    Location
    Ireland
    Posts
    2,273
    Do you do this on request

  8. #8
    Frequently Quite Prolix dwks's Avatar
    Join Date
    Apr 2005
    Location
    Canada
    Posts
    8,057
    Quote Originally Posted by twomers View Post
    >> And add ZIP files?

    Nah. They're up now, but when you click on them, in FF, it goes into a page with lots of text instead of downloading it, for some reason.
    I know. I described why and how to fix it in another post. It links to files with \s in their names, but on the web one can only use /s. You can fix it yourself by changine the %20 or whatever in the address to slashes.

    I still think that ZIP files would be nice.

    [edit] What did you use for a Lorem Ipsum generator, KONI? [/edit]
    dwk

    Seek and ye shall find. quaere et invenies.

    "Simplicity does not precede complexity, but follows it." -- Alan Perlis
    "Testing can only prove the presence of bugs, not their absence." -- Edsger Dijkstra
    "The only real mistake is the one from which we learn nothing." -- John Powell


    Other boards: DaniWeb, TPS
    Unofficial Wiki FAQ: cpwiki.sf.net

    My website: http://dwks.theprogrammingsite.com/
    Projects: codeform, xuni, atlantis, nort, etc.

  9. #9
    Lean Mean Coding Machine KONI's Avatar
    Join Date
    Mar 2007
    Location
    Luxembourg, Europe
    Posts
    444
    Quote Originally Posted by twomers View Post
    Do you do this on request
    depends on my workload and how interesting the request is. Additionally, I refuse to implement the actual content, only limited myself to the design. Feel free to request though.

    Quote Originally Posted by dwks View Post
    I know. I described why and how to fix it in another post. It links to files with \s in their names, but on the web one can only use /s. You can fix it yourself by changine the %20 or whatever in the address to slashes.

    I still think that ZIP files would be nice.

    [edit] What did you use for a Lorem Ipsum generator, KONI? [/edit]
    I used http://www.lipsum.com/ no special reason though to use that one over another one. I found it a while ago and sticked to it. I'm having a hard time finding the post you're talking about dwks, maybe you're confusing with my post or what I wrote:
    The webserver has no associated handler for the extension .zipped and tries to send it as text-file. The only way to download it is to right-click and use "save as" or wait for the gibberish to load and use "save page".

  10. #10
    Frequently Quite Prolix dwks's Avatar
    Join Date
    Apr 2005
    Location
    Canada
    Posts
    8,057
    > I'm having a hard time finding the post you're talking about dwks
    http://cboard.cprogramming.com/showp...6&postcount=18

    I was wondering about the Lorem Ipsum generator because the only one I've come across is built into an editor. Thanks for the link.

    It's funny that this whole thread is about Queatrix's website and yet [s]he hasn't posted in it. Perhaps Queatrix is offline.
    dwk

    Seek and ye shall find. quaere et invenies.

    "Simplicity does not precede complexity, but follows it." -- Alan Perlis
    "Testing can only prove the presence of bugs, not their absence." -- Edsger Dijkstra
    "The only real mistake is the one from which we learn nothing." -- John Powell


    Other boards: DaniWeb, TPS
    Unofficial Wiki FAQ: cpwiki.sf.net

    My website: http://dwks.theprogrammingsite.com/
    Projects: codeform, xuni, atlantis, nort, etc.

  11. #11
    The superhaterodyne twomers's Avatar
    Join Date
    Dec 2005
    Location
    Ireland
    Posts
    2,273
    Hehe *takes own homepage off profile page out of fear of KONI*

  12. #12
    Lean Mean Coding Machine KONI's Avatar
    Join Date
    Mar 2007
    Location
    Luxembourg, Europe
    Posts
    444
    Quote Originally Posted by twomers View Post
    Hehe *takes own homepage off profile page out of fear of KONI*
    Damn, I wrote that bit only a while ago and I really messed up there, putting an alt attribute in an anchor ... fixed btw.

    Oh and send me a PM if you're still interested in my special services.

  13. #13
    Registered User Queatrix's Avatar
    Join Date
    Apr 2005
    Posts
    1,342
    Wow. I didn't realize I am such a bad marker uper.
    Thanks though.

  14. #14
    Registered User Queatrix's Avatar
    Join Date
    Apr 2005
    Posts
    1,342
    Quote Originally Posted by dwks
    [s]he
    Was that really called for?

    Now that I see how people see it, I will zip all the achives.

  15. #15
    Lean Mean Coding Machine KONI's Avatar
    Join Date
    Mar 2007
    Location
    Luxembourg, Europe
    Posts
    444
    Quote Originally Posted by Queatrix View Post
    Was that really called for?
    Don't take it as an insult, it is impossible to know if someone on the internet is male or female. Sometimes you might have small clues that point towards the one or the other side, but generally, we just aren't able to tell.

Popular pages Recent additions subscribe to a feed