next »

[louisdeb]

So I'm writing a series of tutorials for a site I'm setting up called protochip.net. I've just finished the first one and I'd like some feedback from people who both know and don't know HTML. (Though it is quite long, and I know that's a lot to ask - feel free to skim read or something).

As for the site in general, it'll provide hosting for indie devs (while they're setting up their game / other site / can't afford a site and are giving the game away free). I will also offer microsite development, but in case I'm not available, I want there to be some indie dev focused tutorials (easy to follow and informal).

Thanks for any feedback :D

[Sebastian Brandt]

Seems fairly indept and there are alot of good info here
However i think some very newbee people might be scared off, a short project oriented apporach might work better, force the user to just use notepad for a start, and then walk them through making a hello world example with some screenshots, or just link to a example html file.

Also try and be more direct in what you want to communicate, instead of mentioning text editor's and browsers in the beginning, move it to closer to the end, that way you let the reader build up some confidence from fx. the "hello world" and list examples before they are given too many options that have to think about

Other than that, i think it is awesome that you are sharing what you know with the world

[louisdeb]

Okay, I'll move the stuff about text editors to the end. I agree that the list of tags is a bit too long... I may change it so that each tag is introduced when we get to the section. Or more likely I'll just add subheadings to the list so it gets broken up a bit and becomes managable.

I think when I make bits of code I'll link to a page with that code, so you can see it in effect.

How does that sound? :D

Thanks for the feedback

[Benearg]

As someone who worked making websites professionally for a company I have to say that if you know what you're doing you can use Dreamweaver or another software, they will not write any extra code if you know what you're doing. What I mean is, if you use this program or any program to make a website but you still code it manually you wont have any garbage in the end.  Frameworks (I like to use that word) are useful for many reasons and I think you should explain some of the advantages of it. Secondly, your page throws 24 errors on the validator, which is, in my opinion a big contradiction with your first statement. You may want to fix that in case people want to check your code and validate it.

In general terms your tutorial is well written (I don't mind for casual language) and I will add CSS which in my opinion is something people try to implement on their websites pretty often.
A good idea would be to actually teach people how to make a simple website, fully functional, but simple. I think people learn more from examples that from reference.
Regards!

[louisdeb]

Okay. I'll figure something out for learning both HTML and CSS at the same time.

The errors are very embarresing  I'll sort that out...

Thanks a lot :D

[louisdeb]

There were even more errors for HTML5. (You checked for HTML4, I think). However most of them were just repeats. Firstly I used the center tag a lot. Secondly I haven't added alt attributes to img tags. And finally I used the p tag to create none itemised breaks in my lists. I'll fix it up. Thanks

[Benearg]

For instance, that's one of the advantages of using Dreamweaver, to check code with validator automatically in order to spot errors, something you can't do unless you do it manually copy-pasting the code or uploading a version to your server and then check.
I figured that many errors were just repetitions, alts and things like that, nothing too important or relevant to the purpose, but if someone is curious, they will check your code. Like I said, very good job. I like when people spend time trying to teach something useful to people, kudos for that!

[Player 3]

A couple of notes reading through:

And finally you need a web browser (duh). Make sure it's NOT Internet Explorer. I've given up making sure my code is compatible with IE. It's just so behind other browsers.

I'm presuming this is either bias or referring to the problems Internet Explorer 7/8 is known for. Internet Explorer 9+ is actually decent now and complies to many of the HTML5 standards.

You should code firstly for optimization on your own preferred web browser, and then follow up on others later. You don't want to ruin any creativity by spending your time making sure that your list is nicely aligned in Firefox and Chrome.

Wouldn't a better idea in general be to code firstly for the ideas and concepts down? Same rule applies to video games. I know I'd rather have a working, clunky prototype than a glam half-page.

However you can use @font-face to include it from a webserver, but I don't wanna go into how this works, as I can rarely make it work myself :/

@font-face is a CSS rule, not an HTML tag. In the long run, it creates a font family from an external font to use just like any other font family.

Code:

@font-face {
/* What the family will be referred to. */
  font-family: "Foo Man Bar";
  src: url("http://plac.es/fonts/fumanbar.ttf");
}

body {
  font-family: "Foo Man Bar", sans-serif;
}

It's very iffy, as with <video> and <audio>. Different browsers will support a different range of files.

[rikfuzz]

re: webfonts

It's very iffy, as with <video> and <audio>. Different browsers will support a different range of files.

It's not that bad, you can easily support everything with a few light weight files, and http://www.fontsquirrel.com/tools/webfont-generator will generate the whole lot for you.

[louisdeb]

For instance, that's one of the advantages of using Dreamweaver

Okay I'll definitely be adding some info about Dreamweaver into there. (Pros and Cons/Dangers).

I figured that many errors were just repetitions, alts and things like that, nothing too important or relevant to the purpose, but if someone is curious, they will check your code. Like I said, very good job. I like when people spend time trying to teach something useful to people, kudos for that!

Yeah I went through and fixed a lot of it. Thanks a lot! :D

[louisdeb]

I'm presuming this is either bias or referring to the problems Internet Explorer 7/8 is known for. Internet Explorer 9+ is actually decent now and complies to many of the HTML5 standards.

I am biased against IE, however I'll add a disclaimer, and dumb down my view a bit.

Wouldn't a better idea in general be to code firstly for the ideas and concepts down? Same rule applies to video games. I know I'd rather have a working, clunky prototype than a glam half-page.

I could have written that better. I meant that when coding for optimization, focus on your preferred browser. What I didn't mean - although this is what comes across - is 'code for optimization'.

@font-face is a CSS rule, not an HTML tag. In the long run, it creates a font family from an external font to use just like any other font family.

I know what @font-face does. I just can't get it working reliably, so I don't bother with it, and stick to google fonts. I agree with your point about it being CSS really. I'll just add a note to a part of the CSS tutorial with it.

Thanks for the help.

[louisdeb]

It's not that bad, you can easily support everything with a few light weight files, and http://www.fontsquirrel.com/tools/webfont-generator will generate the whole lot for you.

I'd seen this before but I don't think it worked either... I should try again though. Has this been reliable for you?

[rikfuzz]

It's not that bad, you can easily support everything with a few light weight files, and http://www.fontsquirrel.com/tools/webfont-generator will generate the whole lot for you.

I'd seen this before but I don't think it worked either... I should try again though. Has this been reliable for you?

Yep, it's been very reliable. I did hit a couple of snags at first when testing through the big-list-of-browsers, but they were pretty specific to our site's set-up (something to do with how the media server was serving the files IIRC) and fixed without too much trouble. 

[louisdeb]

Yep, it's been very reliable. I did hit a couple of snags at first when testing through the big-list-of-browsers, but they were pretty specific to our site's set-up (something to do with how the media server was serving the files IIRC) and fixed without too much trouble. 

Oh okay, I'll try it out again.