TutorialSys

[Synook]

Hello all,I have recently been developing the Tutorial System 2, at http://tutorialsys.roundeddesign.com/ , and I was wonderign what you guys think of the site. I know the design is pretty plain, but what about the back-end system itself?

[boen_robot]

Honestly said, it's hard to judge with so little tutorials around.Oh well... backend, backend, backend...

1. Mark up your menu in a list
2. Use :hover rather then onclick
3. Mark up your header (TutorialSys at the top) with h1
4. Avoid using presentational attributes (i.e. the width and height of images), speaking of which, how come your XHTML validates with them AND as Strict?
5. Avoid using inline styles (the style attribute) like you do in the footer for example.
6. Try to switch to using UTF-8 as a charset before it's too late. If you're developing this system for international use (i.e. for others to install, and with those others possibly being non-english speakers), it's best to use UTF-8 because of it's internationalization capabilities.

That is all for now. At least at first sight.

[Synook]

Mark up your menu in a list

Hmm... can you think of a way to still get the fluid-width tab style with a list? I could only do it with tables.

Use :hover rather then onclick

Err? I thought :hover was for onmouseover... do you mean in the menu?

Mark up your header (TutorialSys at the top) with h1

Ok

Avoid using presentational attributes (i.e. the width and height of images), speaking of which, how come your XHTML validates with them AND as Strict?

:| I don't know lol but I'll use CSS.

Avoid using inline styles (the style attribute) like you do in the footer for example.Try to switch to using UTF-8 as a charset before it's too late. If you're developing this system for international use (i.e. for others to install, and with those others possibly being non-english speakers), it's best to use UTF-8 because of it's internationalization capabilities.

OkThanks for the comments I'll take them into account

[boen_robot]

Use :hover rather then onclick

Err? I thought :hover was for onmouseover... do you mean in the menu?

I meant the :hover CSS pseudo class. You know, like

a:hover {color:blue;}

But now that I look closer, I see you do use it to style the menu. Still, get rid of the "onclick"."onclick" is a JavaScript event that occurs at that same time as :hover. But with JS off, the menu becomes completely useless, as you can't click on a list that would lead you somewhere. I can understand relying on JavaScript for forms and the such, but just to enable navigation... that's too much.

Hmm... can you think of a way to still get the fluid-width tab style with a list? I could only do it with tables.

I'm not really sure. Ways include making them (the "li"s) with "display:inline;", or "display:block;" and then "float:left;" them. Each has it's pros and cons. The best way is to use "display:table;" do simulate what you have already, but guess which browser won't handle those.

[Synook]

"onclick" is a JavaScript event that occurs at that same time as :hover. But with JS off, the menu becomes completely useless, as you can't click on a list that would lead you somewhere. I can understand relying on JavaScript for forms and the such, but just to enable navigation... that's too much.

True - I'll make the text hyperlinked as well.

I'm not really sure. Ways include making them (the "li"s) with "display:inline;", or "display:block;" and then "float:left;" them. Each has it's pros and cons. The best way is to use "display:table;" do simulate what you have already, but guess which browser won't handle those.

IE lol - hmm... i'll try and see what I can come up with.Thanks for the advice

[Synook]

Crunch! I have completely redesigned the layout of the Tutorial System, and would like people to have a new look and criticize it. You can also give me feedback on the design now as it has improved . Taking into account Boen_Robots advice, the site is now also far more "usable", and degrades very well without JavaScript or CSS. It also, in my opinion, looks far nicer.The address is http://tutorialsys.roundeddesign.com/Thanks everyone,Synook

[huw008]

New Look: Alot Better than the old one but it would look nice if it was not muilti colour.Skin changer would be nice too.

[boen_robot]

Crunch! I have completely redesigned the layout of the Tutorial System, and would like people to have a new look and criticize it. You can also give me feedback on the design now as it has improved . Taking into account Boen_Robots advice, the site is now also far more "usable", and degrades very well without JavaScript or CSS. It also, in my opinion, looks far nicer.The address is http://tutorialsys.roundeddesign.com/Thanks everyone,Synook

I can't access it for some reason. Are you keeping your site on your computer and now have it turned off?

[Synook]

Are you keeping your site on your computer and now have it turned off?

No... hmm... that is strange... I see it now (7:33 pm AEST)

[boen_robot]

No... hmm... that is strange... I see it now (7:33 pm AEST)

What seems to be more interesting for me is that I can't see it, yet I can ping it and trace it, make a WHOIS lookup and everything. I tried using all browsers, cleaning my cache and the browser's cache and tried again with all of them... all error messages as if I don't have an internet connection, or as if there's no HTTP server on that machine.

[Synook]

hmmmmm what about http://www.roundeddesign.com/tutorialsys2/ ? I can also see it if I use a proxy.

[boen_robot]

hmmmmm what about http://www.roundeddesign.com/tutorialsys2/ ? I can also see it if I use a proxy.

This one I see . I don't have a proxy btw. Dunno if that's the problem.Now... new suggestions. The design does look far better. Reminds me of IPB .There's no "rel" attribute on "img", making your page invalid right now.How about a simple search box on the far right of the menu? It should search by everything everywhere. I'm not sure whether the (advanced) search link should move on its right in that case.With JS off, the login page shows "Incorrect username or password" even though I haven't entered anything yet. Weird.With CSS off, there are a lot of images appearing that you otherwise use purely for styling. Use them as a background-image in CSS instead. If necessary, add one or two "div" elements to serve as holders for those background images (since each element can only have one background image... in today's browsers at least).I have nothing more to say on the end user side, so I have registered to check out the rest of the app.With JS off, there are both buttons and links. If the buttons make sence only with JS on (as it seems to be), generate them with JS.The same goes for all of the controls on the submission page.I'm not sure how the image upload could be made accessible. I can think of a few ways, but each has its pros and cons.... you could just use a plain input of type="file", and add a button that would add an additional file. This however avoids the fancy list of files, which otherwise looks like a nice touch. Another would be to make the Upload button link to the popup page in the same window, and return with the new file attached. This means you must also preserve the tutorial already written.... well... I guess the second way is better, if you can just do it.I tried creating an empty tutorial with no title, and I succeeded. But I can't edit it. I suggest you force tutorials to have titles. It would be necessary anyway. In this case (and I'm not sure in how many others) there's an error message at the top:

Upload unsuccessful!Warning: Cannot modify header information - headers already sent by (output started at /home/roundedd/public_html/tutorialsys2/submit.php:11) in /home/roundedd/public_html/tutorialsys2/submit.php on line 44

You should ensure you never send headers after echoing something.How about some consistency between unverified and draft tutorials? I personally like the "Edit" as an action and "View" as a link model (used in Unverified tutorials).I don't think the rating controls and comments should be in the draft window. They shouldn't even be in the Unverified actually. Since no users see those, you don't need them. It just creates clutter.

[Synook]

Thanks for your comments - some things I just never think about I'll see what I can do.

There's no "rel" attribute on "img", making your page invalid right now.

Err... I thought it was the alt attribute that images had to have.