Kuro5hin.org: technology and culture, from the trenches
create account | help/FAQ | contact | links | search | IRC | site news
[ Everything | Diaries | Technology | Science | Culture | Politics | Media | News | Internet | Op-Ed | Fiction | Meta | MLP ]
We need your support: buy an ad | premium membership

[P]
How To Teach Web Design

By baka_boy in Culture
Fri Sep 29, 2000 at 02:22:06 PM EST
Tags: Help! (Ask Kuro5hin) (all tags)
Help! (Ask Kuro5hin)

What would you recommend as the key elements of a web design curriculum for middle and high school students? In trying to help a teacher at my former high school write up a plan for independent study courses for students, I realized that it's difficult to drill down to just what's essential for first exposure to it, what the best tools are to start out on, and where the best informational resources (preferably free and online) for independent learning would be.


The teacher working on this plan knows little beyond the basics -- some HTML, browser usage, text editing, etc., but doesn't want their inexperience to limit the kids' potential learning. Hence, the importance of outside information that the kids can refer to when they get stuck. The school is an alternative education program that attracts some fairly bright, perceptive kids; most of them will have some idea of how to use a browser, email client, and word processor/text editor, and a few may have experience with really basic programming or graphic design. The majority, however, will not have ever created anything on a computer other than word processing documents, high scores in Quake, and a few basic charts and graphs.

My thoughts were that every student participating should get the introductory bit, but that offering them a choice of where to go from there would make them more likely to actually be somewhat engaged over more than a few weeks of study. If there were seperate "intermediate" curriculums for, say, advanced HTML/CSS/JavaScript, graphic design, and server-side scripting, I could see a much larger number of the students might find something they really liked.

So, sages of K5, in a few hundred words or less, what should these "essentials" consist of, what do you think the best online design and programming resources are, and what tools would be best for the job?

Sponsors

Voxel dot net
o Managed Hosting
o VoxCAST Content Delivery
o Raw Infrastructure

Login

Related Links
o Also by baka_boy


Display: Sort:
How To Teach Web Design | 61 comments (61 topical, editorial, 0 hidden)
Please... (4.05 / 17) (#1)
by the coose on Fri Sep 29, 2000 at 01:14:06 PM EST

Whatever you (or the teacher) does, please emphasize that HTML is NOT about layout. It is designed around words, sentences, and paragraphs.

A couple of points (3.58 / 12) (#2)
by tayknight on Fri Sep 29, 2000 at 01:21:45 PM EST

First. Congrats on getting kids interested in things web. The internet will be around for awhile and mabye these kids will pick up some skills. I'm gonna give this a +1, but if it doesn't make it to the front page or its section page, here are my $.02.
1. Web design is just that - design. Along with classes on html, flash, whatever; give them some classes on design. Some simple 2D theory will go along way. You should be able to find an art teacher willing to help. Also let the kids find some sites they think 'look' cool and some sites that 'look' bad.
2. Show them how different web technology works. Don't just teach them how to arrange text with tables. Also show them some CSS. See if you can find some really old websites that positioned text without table tags or CSS. They look rough now, but they still get the information across.
3. If you can, and have the resources, show them how a web-page can be a front-end to a database. I program an intranet at my work. Nobody on the outside will ever see it, but our people here love it. PHP will also be around for a while. Let some of the advanced kids, with the help of a very patient guru, set up a linux box for INTRANET use only. Put mySQL and Apache and PHP on there and turn 'em loose. Simple SQL statements aren't that hard to learn, and the kids will have picked up some database skills in the process. Databases will also be around for a long time.
Good Luck.
Pair up in threes - Yogi Berra
Re: A couple of points (2.33 / 3) (#4)
by smileyy on Fri Sep 29, 2000 at 01:44:19 PM EST

MySQL? Eesh. At least give them a proper database like PostgreSQL. What is it about MySQL that makes it people's first choice instead of PostgreSQL? Is it just pg's somewhat shaky 6.x legacy?

Not trying to start a flamewar, just being a harmless bigot.


--
...alone in suicide, which is deeper than death...
[ Parent ]
Re: A couple of points (2.00 / 2) (#24)
by hepatitis_bee on Fri Sep 29, 2000 at 04:21:07 PM EST

ive never used postgresql but i use mysql, and the fact remains that i found mysql very easy to use, you basically install it and issue sql commands, and it is free and has a large community of people who use it and can help you out, plus i use php and php makes it very easy to use mysql.

[ Parent ]
Re: A couple of points (3.50 / 2) (#38)
by tzanger on Fri Sep 29, 2000 at 08:12:52 PM EST

ive never used postgresql but i use mysql

That's the main problem. I've converted about 30 diferent people from mySQL to Postgres and two of the key points made are standard SQL compatibility and ACID.

Everyone starts on mySQL because they hear it's fast and easy. This is true. However...

mySQL does things funny. using "*" or NULL to autoincrement instead of setting up a sequence. Nonstandard data types. Little things like that get ingrained into your head and then when your little project grows big enough to require a real database, you're screwed because you've now got to unlearn all the nonstandard bullshit mySQL uses and constantly complain how Oracle doesn't do things right. :-)

ACID databases don't muck with your data. mySQL claims they have transactions down pat, but my gut instinct is there is much to be done. Every database guru (some at the big name RDBMS shops) claim that transactions were the hairiest part of the server. It's going to take time for mySQL to get there, and it's going to cost them speed.

Oh yes, and about benchmarks. mySQL is a very fast database. It's fast for simple selects, which is what most web designers use because they don't take the time to use the database as it should. That's rant #2. :-)

You shouldn't pull the info out of the database and into PHP or Perl and manipulate it. You make the database do the work and give you the end result. Remember it's already got all the data ordered for fast access. It's already got the indexes and the hashes and the optimized routines. If you've got a good database it'll even have stored procedures which will blow the shit out of any code you've got in PHP or Perl. Make the database get exactly the data you want (not often a simple select) and then use PHP or Perl to format it for the web. That includes selecting, excluding, sorting, ordering and all the fun stuff. I haven't done personal speed benchmarks between them but I've heard from several sources that the benchmarks they give are stacked. That's heresay, but when I hear it from dozens of people I begin to wonder.

I'd like to see a real benchmark between Postgres, Oracle, Interbase, SQL Server 7 and mySQL. Get real DB admins (an expert for each database) and go at it. A benchmark which uses every dirty trick in the book (stored procedures, etc.) and then selectively take off the optimizations until you get down to bare selects. Now that would be a neat test to see.



[ Parent ]
Be sure to cover basic usability (3.62 / 8) (#3)
by octos on Fri Sep 29, 2000 at 01:41:53 PM EST

You don't have to be a Jacob Nielson zealot, but usability seems to be overlooked in many web sites.

The key points to stress are making colors readable, making sure the page will render on different browsers and resolutions, and making graphics that download quickly.

Try to teach HTML in a way that doesn't rely on a specific set of tags, but how the syntax works. Also stress well-formed code. HTML doesn't require quotes everywhere, but XHTML will.

The way I learned was start simple-- A page with text all set left with a couple links to other pages. Let the students choose the subject. Once you've learned what is essentialy HTML2.0, they can start adding more graphics and the dreaded tables. I just kept adding new tags/refinements as I needed them to create the layout I wanted.

I usually direct people to www.webmonkey.com for tutorials.

More people should take courses like this (4.10 / 10) (#5)
by Erf on Fri Sep 29, 2000 at 01:49:07 PM EST

I have to agree with the idea that the course should talk about web design, not just how to bend HTML/Java/Flash/whatever to your will. I have two suggestions:

1. Please emphasize cross-platform development. Point out that a page designed on a particular monitor at a particular resolution with a particular browser with particular font settings can look very very different than the same page viewed on someone else's setup. (On a related note, please try to convince them to not screw around with fonts...) Lynx-friendliness would be nice, but is probably too much to ask.

2. Teach the KISS (Keep It Simple, Stupid) principle! If something can be done with HTML, don't do it with Flash, etc. If something can be done with tables, don't use frames. (Well, really, they shouldn't use frames at all... [Erf dons his asbestos underpants])

Sorry, that was a bit of venting about my pet peeves of web design, but I'm not the only one who feels that way. As for references, almost all of my HTML skills came from looking at other people's pages -- so emphasize that View Source function!

(If it's useful, I can track down some very well-thought-out arguements people have made for the suggestions I listed, too. In particular, there are numerous pages dedicated to cross-platform-ness, usually written by Lynx users...)

-Erf.
...doin' the things a particle can...

The basic laws (none / 0) (#56)
by jorn on Mon Oct 02, 2000 at 06:14:15 AM EST

  1. it will look different on every screen so keep it simple
  2. don't ever take away the user's sense of control (no pop-ups, music, etc without a clear warning)
  3. if someone follows a link and is disappointed with what they find, you haven't labelled the link clearly enough
  4. the most useful things on your site should be the easiest to find (put them on the main page if you can)
  5. long pages are good (despite what everyone says) so long as you don't slow them down with TABLEs
  6. do a thorough survey of other pages on the same topic and link all the best ones
  7. plan for longterm evolution and growth, but acknowledge you may lose interest (so include a date)
More at my site

[ Parent ]
Praise to the teachers (4.28 / 7) (#6)
by OKolzig37 on Fri Sep 29, 2000 at 01:54:23 PM EST

I'm all for helping out the yungins. It was mentioned before, but here's the actual URL for Webmonkey for Kids: http://hotwired.lycos.com/webmonkey/kids/.

I would start out with basic HTML and then begin splitting kids into designers and programmers (this should be pretty obvious - some beginner sites will have a high visual quality, others will pick up the HTML quickly).

For intermediate, I'd split them into Photoshop basics and design standards for the designers and advanced HTML and JavaScript for the programmers.

For advanced, CSS and more Photoshop for designers and maybe beginning programming logic (using Perl maybe? Possibly VB.) for the programmers.

I wish I had something like that growing up. Oh wait, I guess that wasn't an option...


Oldy moldy, history mystery!
Philip and Alex's Guide to Web Publishing (4.27 / 11) (#7)
by ordermaster on Fri Sep 29, 2000 at 01:54:45 PM EST

philg has some good material on web design. In fact it was sort of the focus of his phd thesis at mit.

HTML Goodies (2.75 / 4) (#8)
by AgentGray on Fri Sep 29, 2000 at 02:28:45 PM EST

I taught web design the last two years using Joe Burns HTML Goodies. They were in a language that students could understand and some of the pages actually presented an entertaining read.

As a side note, I ended up teaching a more advanced class using his second book, JavaScript Goodies.

I think more information can be found out <a href="http://www.htmlgoodies.com/">here.

Re: HTML Goodies (3.00 / 3) (#9)
by AgentGray on Fri Sep 29, 2000 at 02:32:16 PM EST

Geesh!

Even the best of us HTML coders don't know how to close an anchor reference tag and syntax it right...and that was even after I previewed it!

<a href="http://www.htmlgoodies.com/">here.

[ Parent ]
WTF (1.71 / 7) (#10)
by AgentGray on Fri Sep 29, 2000 at 02:35:25 PM EST

Ok. I post a link. Preview it and it looks fine. I post it and the link shows up like this:

<a href=""http://www.htmlgoodies.com/">here.

Re: WTF (2.66 / 3) (#11)
by AgentGray on Fri Sep 29, 2000 at 02:36:40 PM EST

here.

[ Parent ]
Re: WTF (2.66 / 3) (#12)
by AgentGray on Fri Sep 29, 2000 at 02:38:36 PM EST

Ah-ha! You preview it and it replaces your qoutes with the &qu.. crap.

[ Parent ]
input (OT) (3.33 / 3) (#28)
by rusty on Fri Sep 29, 2000 at 04:36:10 PM EST

Are you posting in "Plain text" mode? Plain text means just that-- plain text. No HTML, no links, just text. Everything you enter will be rendered as literal text, no matter what it is (except for linewrapping, which we do for you).

This brings up one of my personal pet peeves about the majority of weblogs that accept input. Most of the time, they do random things with your input. See technocrat, running squishdot, for an example of this. It lets you enter HTML formatting elements, like <P> and <BR>, and links, but it also inserts a paragraph break anytime you enter a blank line. This, to me, is bad UI design. How am I supposed to know if the program is going to munge my input in strage ways or not? And every site handles it differently!

Now, given that the last sentence is true, there was no good way for Scoop to conform to standards. So I went with the "we mean what we say" approach. If you want to enter HTML, set the little select below the input box to "HTML Formatted". If not, set it to "Plain Text". HTML mode will render exactly as you enter stuff, in HTML, so you have to put in pp breaks and stuff. Plain text will assume everything you enter is text, and make it display literally, line breaks and all.

Does this make sense? And in the midst of a discussion which includes several pointers to Jakob Neilsen's site, is this a "usability enhanced" way of doing things?

____
Not the real rusty
[ Parent ]

Re: input (OT) (3.50 / 2) (#41)
by Louis_Wu on Fri Sep 29, 2000 at 10:01:21 PM EST

Are you posting in "Plain text" mode?

If he was, he forgot the closing </a>.

Louis_Wu
"The power to tax is the power to destroy."
John Marshal, first Chief Justice of the U.S. Supreme Court
[ Parent ]

Re: input (OT) (3.50 / 2) (#42)
by nuntius on Fri Sep 29, 2000 at 11:22:43 PM EST

I had this same problem doing a HTML post several days ago.

Unfortunately, the story I posted it on got moderated down rapidly (also leaving my obviously ingenious post at a rating of "1" :-)

Here's the link.

[ Parent ]
Kuro5in usability (none / 0) (#60)
by charter on Tue Oct 03, 2000 at 02:46:12 AM EST

I think you have a very good interface here. And I'm not just saying that to suck up!

Seriously though, I think the current location of the dropdown menu for HTML/plain text (smack between the "Preview" and "Post" buttons) is very good placement. As is the list of allowed HTML directly below it.

I'm still trying to wrap my head around the five different preferences for displaying the discussions (a.k.a. "The salad bar approach"), but I can be rather slow that way.

-- Charter



[ Parent ]
Good book (4.00 / 6) (#13)
by cobweb on Fri Sep 29, 2000 at 03:24:10 PM EST

For web design, I highly recommend Lynda Wyman's "Deconstructing Web Graphics." It takes some of the really good sites from back in the day and explains how they did all their graphics, and in the process covers everything from aliasing techniques to browser safe colors. Lynda's website: here.

Also, before you start turning kids loose with text editors, you should explain something about markup languages and their purpose, that is to divide a document into meaningful parts. It's a good idea to start separating content from style early on, so you don't get stuck when you do your first real project.

A few good books (3.55 / 9) (#14)
by plastic on Fri Sep 29, 2000 at 03:27:48 PM EST

I can see a course like this being split along two lines:

Technical Stuff - This is of course the HTML/CSS/JavaScript stuff. I have found webmonkey to be a good resource for budding web developers.

Design - This is harder to teach, primarily because it can be very subjective. However, the upshot of spending some time focusing on web design is that the students will be able to take these ideas and apply it elsewhere in life (i.e. creating a decent-looking presentation for the boss or being able to look at a chart in USA Today and determine that they are being manipulated). To this end, I can recommend two excellent books on design:
- The Visual Display of Quantitative Information by Edward Tufte
- Understanding Comics by Scott McCloud

my 2 cents... (1.62 / 8) (#15)
by _me_ on Fri Sep 29, 2000 at 03:33:48 PM EST

It seems like most middle and high schools in america have trouble teaching kids to read, write and do basic math...let's try and make sure everyone who graduates can read first, before we worry about teaching web development to jr. high school kids...

Re: my 2 cents... (3.33 / 3) (#18)
by QuantumAbyss on Fri Sep 29, 2000 at 04:02:13 PM EST

I agree - however you've got to keep in mind that there is a massive difference between schools. This school is supposed to attract relatively bright kids (in other words, they're either know how to manipulate the system well, or just have that something that makes them be good in school).

Speaking as someone who didn't learn to read until his second time around 3rd grade, I realize that the school system isn't exactly wonderful. The question is - do you curb one groups progress and hurt another? Should that choice even have to be made?

Right now the majority of people who can't read coming through school are in neighborhoods that don't have much money. I certainly support putting more funds towards those other schools - until we do I don't think we have a democracy because we are tracking one group of people (poor, usually not white) towards low end jobs. This happens while we send the suburban kids on the college track, sloshing millions of dollars in their general direction.

The only way that whole setup to change is for the entire power structure within the schools to change as well. That is not likely to happen any time soon without some real thought and a lot of campeigning and societal changes.

If you are interested in getting those to come about, then by all means start in, I'd love to help - but it'll take a lot more than 2-cents.



Science is not the pursuit of truth, it is the quest for better approximations to a perception of reality.
- QA
[ Parent ]
amen (2.00 / 2) (#21)
by hepatitis_bee on Fri Sep 29, 2000 at 04:13:13 PM EST

those who care abotu learning how to design a web page will have either taught them selves or will end up teaching themselves, all else just don't care, and only take the "class" cause they think it is cool

[ Parent ]
Re: my 2 cents... (4.25 / 4) (#40)
by dice on Fri Sep 29, 2000 at 08:58:25 PM EST

I'm going to have to disagree here.
I wasted away 4 years of my life because the schools cared about teaching to the lowest level.
I wasted my time with people trying to teach me how to read (while reading Nitzche on my own), and people trying to teach me to do basic math (while struggling with calculus on my own).
Where is the future of the world? Is it in the mediocrity, in those who need the extra help with reading and math? Or is it in those who would rather have someone teach them on an advanced level, faster than the rest of the class?
Personally, I think it is MUCH more degrading to force everyone to go over the basics again and again, including those who have the advanced concepts down, than it is to let those without a drive to learn not learn.


[ Parent ]
The True Path Of Good HTML (4.36 / 11) (#16)
by Mark 'Kamikaze' Hughes on Fri Sep 29, 2000 at 03:44:12 PM EST

The NCSA's HTML Primer: even after all these years, still the best first resource:
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Vim: with syntax-highlighting, this is one of the best tools a web designer can ever have:
http://www.vim.org/

Jakob Nielsen's web page, and book: Yes, you DO have to be a JN fanatic.
http://www.useit.com/

The Web Accessibility Initiative:
http://www.w3.org/WAI/

Composing Good HTML:
http://www.ology.org/tilt/cgh/

HTML Hell: see also his links at the bottom.
http://www.tuxedo.org/~esr/html-hell.html

W3C's HTML Home Page:
http://www.w3.org/MarkUp/

In short, it's the same way everyone should learn, to avoid having to unlearn any bad things: the basics, then better tools, then style, then the full standards. I hope this helps.


-- Mark Hughes
Emacs also has syntax-highlighting for HTML. (4.00 / 2) (#22)
by Erf on Fri Sep 29, 2000 at 04:13:57 PM EST

The html major mode that comes with emacs is really minimal and not very good, but I've found that this html-helper-mode works quite well. It does syntax-highlighting, and has shortcuts for most tags. I've found some of the indentation and such could use some work, but I might also be using an old version.

I don't mean to start a holy war, I'm just saying that, in addition to vim, emacs is a good option for HTML-writing.

-Erf.
...doin' the things a particle can...
[ Parent ]

Web Design as an Art (2.85 / 7) (#17)
by cvbear0 on Fri Sep 29, 2000 at 03:50:03 PM EST

At a few school I am aware of, web-design is being taught as a part of the Art Ciriculum. When you break down the term web-design, you get web and design. Web deals with the computer/html coding side of things, while design deals with the looks and "art quality" of a site/page. It's hard to combine the two together. One feeds off the other.

my suggestion... cancel the class (2.85 / 7) (#19)
by hepatitis_bee on Fri Sep 29, 2000 at 04:10:26 PM EST

if anything, have a class that teaches html, and call it an html class andnot a web design class or webmastering class. There are way too many angles "web design" to teach in a high school class. There is serevr side scripting (in many languages), client side scripting, database management, various internet protocols, graphics, design, and a great deal of originality and creativity involved in "web mastering" and anyone interested in "web design" will enter from one of those backgrounds wanting to learn html so they can apply their knowledge to web design. Teaching someone html first and then letting them on their own is just plain foolish.

fortuantely i'm through with the whole high school thing and they had a "web mastering" class, but they didn't have the resources to teach them anything beyond basic html, and basic html isn't going to get anyone far, unfortunately those involved with the class thought it was the greatest thing, not knowing what they are doing. I know people who thought they were the shit when it came to designing web pages, but they only knew html and that kind of stuff pissed me off.

Teach the basics first (3.33 / 6) (#20)
by bflame on Fri Sep 29, 2000 at 04:11:27 PM EST

I have found that everyone wants to jump in and start using some sort of web editing tool when they teach HTML. Start the students out with just a few of the basic tags, and notepad. after they have learned these, and designed a page or two using notepad then move them onto one of the HTML editors.

As A Web Programmer... (3.20 / 10) (#23)
by Kirn_Malinus on Fri Sep 29, 2000 at 04:15:41 PM EST

I am a web programmer for Aesention, Inc. a web, print, and multimedia design firm. One of the things we do is training, here's my personal opinion of what should be taught.

I agree that there is a line between the 'designer types' and the 'programmer types' but it is a little blurry. I am personally primarily a programmer, but I do have some design skills/talent. A coworker is a trained graphic designer who now does web design, and has quite a few technical skills.

There should be two tracks though.

Design

  • Graphic design basics.
  • PhotoShop 5.5+ - it really should be 5.5+, the integrated web features make it a much better tool, and when they learn PhotoShop, they should also be learning the basics of web graphics (things like the difference between JPEGs and GIFs, web safe colors, etc.)
  • DreamWeaver 3.0 - DreamWeaver is a great WYSIWIG HTML editor, but make sure they get into the code a bit, they need to understand how it works to improve the designs, having designers that don't know how HTML tables are built makes the programmer's job far more difficult
  • Flash - if they can learn flash, they will have a very useful skill

Coder

  • DreamWeaver 3.0 - the coder should know how to do anything in raw HTML, but when it comes to menial page editing tasks like inserting images, DreamWeaver makes things go much faster. It's templates and libraries are a very key feature that should be mastered.
  • PhotoShop 5.5 - a basic working knowledge of PhotoShop will prevent them from needing to get the Designers to cut off 1 pixel of white space from a GIF when it's not working.
  • The coder also needs an understanding of the client-server model and how the server they plan on using works.
  • If you get around to it teaching them DHTML (Dynamic HTML) would be great to. DHTML is generally considered to include CSS, HTML, and JavaScript. DreamWeaver will do most of this stuff for you, but not as well as you can make it do it if you know how it works.

Thats my two cents from a bit of experience in the field.



How I'd do it (4.70 / 10) (#25)
by rusty on Fri Sep 29, 2000 at 04:21:31 PM EST

The other comments have been on the mark so far about usability and teaching solid principles, so I won't rehash that. But keep that in mind along with the rest of this.

The important thing that you learn in high school isn't this language (programming or human), or that equation, or the other literary work. It's how to get along with other people. A web development class is a great opportunity to teach this, because of how web development goes.

Basically, as others have also pointed out, nearly every web site is a collaborative effort. You have the graphics people and UI designers, who basically do art and hand it to the techs. You have the client-side techs (HTML/CSS/Javascript) who turn these pretty pictures into working code, and you have server-side techs who write the backend, do DB stuff, etc. I'd do about a week or two of basic web principles-- usability, history, brief intros to the technologies-- and then tell the class that they're going to create a web site. They have to select a project, split themselves up into specialties according to interest, and create a functioning and useful web site.

I'd say probably three teams, according to the segmentation above-- a graphics team, a client-side team, and a server side team. Hopefully someone on the server side team is brave enough to take a shot at setting up a linux box with apache and php, if not the teacher could provide the tools (with your help of course).

Have them identify the scope of the project, plan out the stages needed to get there, and then do the thing. Will the end result suck? Probably, but think of it this way: you'll have saved the world from the first websites that each of them individually could have created. :-)

Make sure that their final site is publically accessable too! This is important. There's no point if no one else can see it, which is one of the basic tenets of the web. Perhaps suggest they do a site for the school, like a student government site or something. But don't force the issue-- if they want to do an X-Men fan site, let 'em.

The point of all this of course, isn't that anyone necessarily remembers any specific technology they learned in this class. Some of them might, but they'd have learned that stuff anyway. The point is that the web is all about collaborative work, as is life, and that's what they should be learning. Plus, that class would be cool as hell, and what teacher doesn't want to have the coolest class in school. ;-)

____
Not the real rusty

Yeah. (2.71 / 7) (#26)
by sH on Fri Sep 29, 2000 at 04:27:12 PM EST

For tbe sake of everything that is good about the internet, DON'T tell him to instruct the kids on how to use a WYSIWYG. They create laziness and sub-standard pages. An indepth knowledge of HTML, CSS, and JavaScript [both IE and NE] should be known. A general knowledge of ASP and Perl would be good, because after all, unless you program Perl for Linux stuff, a good reference book is all one really needs. Photoshop 5+ should be required, as well as a very STRONG introduction to Macromedia Flash. An introduction to how the web works would also be good. Definatly when it comes knowledge of server/client relationships for webpages (TCP/IP, HTTP, FTP). One should also cover interaction with other programs, like Quicktime/Realplayer/Windows Media Player with servers (i.e. UDP/IP for streaming). STAY AWAY FROM FRONTPAGE.

Re: Yeah. (4.00 / 1) (#44)
by Holloway on Sat Sep 30, 2000 at 02:06:24 AM EST

I can't agree more.

WYSIWYG "editors" cause more problems than they solve.

Just teach the idea that you have text. Plain vanilla ASCII. And the principles of marking up from there.

Put a heavy emphasis on the philosophy of markup - that it's backwards compatible. If you add an `I` tag to a document and a browser made ten years ago doesn't understand - it doesn't matter. It will be ignored and the browser will continue upon it's merry way.

I can't say enough. WYSIWYG bloats and isn't web design - it's a word processor.


== Human's wear pants, if they don't wear pants they stand out in a crowd. But if a monkey didn't wear pants it would be anonymous

[ Parent ]

My take on this. (4.00 / 10) (#27)
by Inoshiro on Fri Sep 29, 2000 at 04:33:33 PM EST

Hi. I'm a guy who some experience with using the web and such :) So I think I have a couple of valid points. You're teaching people who to produce useful documents and sites. You should give them a nice "Basics" class which teaches the important ground level stuff that a lot of people just don't understand. These are document structure (the anatomy of properly formed HTML), the basics of how these documents relate to each other (via hyper links and such), and how these documents are used.

You must, at all times, emphasize the passive nature of webcontent. You are producing a document to certain specifications, and that document has content which is marked by the approporiate formatting hints (CSS is the Good Stuff here :)). They should come out of if being able to make documents which can be verified with the W3C validator for well formed HTML, and should convey a message accurately.

The next step would be more advanced. The interesting uses for CSS, image mapping, how to embed data that is not specifically web oriented -- allowing some people an enchanced presentation. Be sure to stress that the "sugar and spice and everything nice" version with Java, scripting languages, etc, should be chosen by the user and should not be used as a crutch for failing to develop a proper web design. Make sure they understand usability too. Yahoo became big because they have a simple search site, not because they have Flash!

Again, you must stress that the web is a passive, browsed data web. Do not confuse them by making them think that HTML is a programming language. It's not, it's a markup language that merely encodes meaning in meta tags (as a side note, any real language has constructs for choices, looping, and jumping around in a semi-logical way). Also, do not teach them that things like javascript, forcing the user to a 640x480 strip down the left 40% of their 1024x768 desktops, or annoying flash animations.

Teach them the important "hows" -- how to make content readable, how to make content accesible, how to keep it free of impediments from dimm-witted print medium publishers. Do not teach them simple specifics like how to use some simple application for the "Creation" and "Programming" of HTML. Any monkey can make a pathetic, annoying page in a GUI HTML program, but few properly understand and create meaningful and accesible sites that fit the user -- not the creator.



--
[ イノシロ ]
Goddamn I hate to do this... (5.00 / 1) (#55)
by Miniluv on Mon Oct 02, 2000 at 06:09:51 AM EST

Here is the output of said validator on our favorite site.
"Its like someone opened my mouth and stuck a fistful of herbs in it." - Tamio Kageyama, Iron Chef 'Battle Eggplant'
[ Parent ]
Re: Goddamn I hate to do this... (4.00 / 1) (#57)
by rusty on Mon Oct 02, 2000 at 07:44:13 AM EST

That one's all my fault. Inoshiro berates me constantly for it.

____
Not the real rusty
[ Parent ]
Goddamn I hate to do this... (slight return) (3.00 / 1) (#59)
by freezeup on Mon Oct 02, 2000 at 08:40:08 PM EST

Pickpickpick...

The CSS doesn't validate either...

<STYLE TYPE="text/css">
.menu{font-weight:bold; text-decoration:none; font-color:#FFFFFF;}
</STYLE>

Just the one selector and only three attributes in it too. Mind you, font-color is an easy mistake to make - it certainly sounds like it's right (I've stared at one page too many thinking why the fsck isn't that title blue? to fall for that sucker again though).

Five'll getcha ten that the the next version of IE will 'innovate' font-color as an alias for color in stylesheets. Yay for standards!

ick... you want to teach your kids this one thing: just say no to <FONT> tags, m'kay?

<FONT FACE="" "" SIZE="+0">

You want to format text, do it with <STYLE>...

[ Parent ]

HTML Tutorial (2.00 / 2) (#29)
by Garc on Fri Sep 29, 2000 at 05:23:07 PM EST

My school has an online tutorial. It even has cgi scripts that allow you to test some html that you code yourself. It covers basic tags, tables, forms, etc. It's very nicely done, but probably a little outdated. I first used it 2 (3?) years ago.

Garc
--
Tomorrow is going to be wonderful because tonight I do not understand anything. -- Niels Bohr
Huh. My 5 minute course. (2.40 / 5) (#30)
by FenrirWolf on Fri Sep 29, 2000 at 05:29:05 PM EST

First, I'd tell them to use vi or notepad, depending on what OS they write HTML under, and then second I would beat them within an inch of their life if they ever used frames...

Re: Huh. My 5 minute course. (3.00 / 1) (#34)
by Dolphineus on Fri Sep 29, 2000 at 06:43:54 PM EST

beat them within an inch of their life if they ever used frames...

Ok, maybe I'm blind. I've seen bad uses of frames, and people who don't know what they are doing, but why does everyone hate frames so much. If they are done wrong, they are a big pain in the ass, but if they are done right, they can be useful.

[ Parent ]
Frames -- or lack thereof (3.00 / 1) (#37)
by Erf on Fri Sep 29, 2000 at 07:53:57 PM EST

Have a look at Jakov Nielsen's Why Frames Suck (Most of the Time), where he explains his problems with them.

I, for one, have never ever seen a site that was improved by the use of frames (especially since tables would have accomplished almost the same objectives with few drawbacks). (If anyone has seen a site that actually uses frames well, let me know? I'm curious...)

-Erf.
...doin' the things a particle can...
[ Parent ]

Re: Frames -- or lack thereof (4.00 / 1) (#39)
by FenrirWolf on Fri Sep 29, 2000 at 08:51:16 PM EST

There's only a very few instances where frames might possibly be useful -- for example, I saw a script-generated HTML that contained one frame with an index of files and another to act as a file viewer (mostly for images, cut down reload times of the index). Of course, you could do the same thing with javascript, as a seperate popup window, or something. But that's another evil...

Otherwise, frames tend to be very cranky to deal with, due to special IE/Netscape/Opera/Whateverbrowser considerations, and the all-too-common frame within frame within frame hyperlinking that leads to massive suckage of viewing real estate. And it basically destroys any Lynx support.

Tables are a dirty hack, a way to get around HTML's fit-where-it-pleases formatting -- using them for precise image/text placement is pretty much norm for graphic-intensive sites, but even a modest table setup can cause Netscape to slow to a crawl. Besides, most sites assume lowest common denominator (640x480) which leaves a giant blank border to the left of their page (or on either side, if they do like me and encaps everything in a giant table and <center> it).

[ Parent ]

Re: Frames -- or lack thereof (3.00 / 1) (#43)
by Holloway on Sat Sep 30, 2000 at 01:53:55 AM EST

Um, you'll only have a huge space to your right if you don't know how to use tables. Assign a percentage width and you'll be all right.


== Human's wear pants, if they don't wear pants they stand out in a crowd. But if a monkey didn't wear pants it would be anonymous

[ Parent ]
Good use of frames (3.00 / 1) (#45)
by kraant on Sat Sep 30, 2000 at 03:13:35 AM EST

Sputum and also here

Generaly pages that use frames well are ones that need to provide very non-structured access to a large number of links all of which are related to the users task.

That's right frames are good when you have a very specific goal to accomplish... Otherwise they suck arse.
--
"kraant, open source guru" -- tumeric
Never In Our Names...
[ Parent ]

My 2p as an English Teacher and Web Designer... (3.62 / 8) (#31)
by BinerDog on Fri Sep 29, 2000 at 05:52:21 PM EST

First - list it as an art class and make sure it is approached from a design perspective. As Inoshiro said, it is merely another medium with which a designer may work.

With that in mind, the objectives I would set for the class would be something like (note TLWD is "the learner will demonstrate"):

  • TLWD the ability to code HTML with a text editor
  • TLWD use of WYSIWYG html editors
  • TLWD application of design concepts and principles (ie: typography, rule of thirds, etc etc)in web based formats
  • TLWD knowledge of web architecture (web server, internet, browser)
  • TLWD use of graphic formats suitable for the web
  • TLWD knowledge of the appropriate use of different web based media and formats (gif, jpeg, flash, etc)
  • TLWD creation of graphics for use on the web
  • TLWD use of forms for processing information
  • TLWD application of the design process
  • TLWD use of internet tools neccasary for implementing a web site such as ftp.

Those are just some of the objectives. To meet them I would suggest starting with basic html and pre-made images. Have students create a simple site from scratch that way. Include all the basics, tables, frames (yes frames, if you don't teach it it will have the attraction of a taboo item, they need to relaize for themselves why frames can be bad.

Once they have demonstrated an understanding of all this give them a word document saved in html format and have them "fix" it until it will at least display properly in even IE. This is to help impress upon them the weaknesses of WYSIWYG.

Now introduce Dreamweaver and how to use it (millions of books on how to do this you can use as a resource). Make sure you have them clean up all their code by hand before turning in (publishing) any assignments.

That will easily fill a semester. I would offer an advanced course in which you introduce CSS, some basic DHTML, canned javascript, etc.

Allow the computer teachers to put a course together to complement yours if you want to have them create their own code for pages or explore CGI. Web Design uses all these, but they need to be taught in a programming context not an art/design context.

Just my two pence.


-- The Entity Formerly Known as Frums (Cuz someone nabbed my name on K5) (I want it back :)

Teaching Web Design??? (2.66 / 3) (#32)
by blackox on Fri Sep 29, 2000 at 06:24:40 PM EST

The problem is kind of difficult when you look at the vast array of options, paths, etc to go down. I have never been a teacher, and the last person who asked me to "teach" them web design was tossed 3 books and given a timeline with what I wanted to see...it actually worked pretty well. What I think would be good would be to go in this fashion: (1)Create a basic page with a header, text, and one image. (2)Add formatting of text and images to this page (3) Add an email link, one file that can be downloaded via ftp, and embed sound or media in page (4)Work with tables, and apply steps 1-4 (5)Work with style sheets and a very basic intro to JavaScript (6)A final project of any type of page, suitable for viewing should be made by each student or a group of students that serves some purpose (informative, mock sales, etc.) Also in the class these topics should be covered: (1) Functions of web pages (2) Descriptions of how ftp works (3) Descriptions of domain name types (com, org, net, etc..). (4) An overview of current technolgies (ASP,PHP,JHP, Cold Fusion, CGI programming,SSI,Flash,etc) and some of the software available (Anything Macromedia, Frontpage, HomeSite...) just to let the students know how wide range the web design field is. I think an excellent book for the beginner is HTML in 24 Hours and a good online resource for entry to mid level is www.webmonkey.com.
"...I must create a system or be enslaved by another man's..."
Teach the Fundamentals, Avoid the Flashy Crap (4.00 / 5) (#33)
by arsenick on Fri Sep 29, 2000 at 06:39:50 PM EST

I think the best thing to do would be to only teach them the real basics (text formatting, tables, frames, etc., and their uses). Going over that would probably be overkill considering the rather computer illeterate audit. Plus, the basics of Web page editing aren't so simple. Talk to them about the standards, how to make cross-platform, fast-loading, uncluttered and easy to navigate Web sites instead of trying to make it "cool" by showing them how to pollute a Web page with useless - often stolen - Java applets, Flash animations or tons of animated gifs. Even if they knew how to write server-side code, what help would it be if they didn't master the often overlooked fundamentals? Also, all of the coding should obviously be done with a text editor, so they actually learn something different than word processing. Don't focus too much on code though. Show them how to use a FTP client, for example. If you cover all of the fundamentals well enough, the students interested in knowing more will probably be able to do so by themselves, because you will have taught them what they really needed to know to become Web masters.

Best Reference Site I've Found (3.00 / 6) (#35)
by RadiantMatrix on Fri Sep 29, 2000 at 06:49:45 PM EST

DJ Quad runs a site called QuadZilla which provides excellent tutorials and a fairly complete tag reference, as well as guides to various "advanced" techniques. Also, check out Web Pages That Suck where you can (in their words) "learn good design by looking at bad design."
--
I'm not going out with a "meh". I plan to live, dammit. [ZorbaTHut]

Re: Best Reference Site I've Found (none / 0) (#49)
by Holloway on Sat Sep 30, 2000 at 10:06:10 PM EST

I agree with your first link but "web pages that suck" well, it sucks, now doesn't it.

Fixed table width cruddy designly not using acroynm taggy evil stupid site.

The first link's good though. I go there.


== Human's wear pants, if they don't wear pants they stand out in a crowd. But if a monkey didn't wear pants it would be anonymous

[ Parent ]

Re: Best Reference Site I've Found (none / 0) (#50)
by RadiantMatrix on Sun Oct 01, 2000 at 01:46:05 AM EST

"web pages that suck" well, it sucks, now doesn't it.
Wow. I haven't been there in so long... they didn't used to suck so hard, but I now stand corrected!!
--
I'm not going out with a "meh". I plan to live, dammit. [ZorbaTHut]

[ Parent ]
Standards, Standards, Standards... (3.40 / 5) (#36)
by ScottBrady on Fri Sep 29, 2000 at 07:51:54 PM EST

Do these young minds a favor: teach them why they should author their markup to W3C standards. You will save them many a thread of being flamed in CIWAH. :-)

Here are some very useful resources for any web author:

http://www.htmlhelp.com/
http://www.wdvl.com/
http://www.useit.com/alertbox/
news:comp.infosystems.www.authoring.html
news:alt.html

 

--
Scott Brady
"We didn't lie to you... the truth just changed."
YHBT. YHL. HAND.

That's the stuff real pages are made of (none / 0) (#54)
by Smiling Dragon on Mon Oct 02, 2000 at 01:09:13 AM EST

Bang on! HTTP Standards, and _why_ they are the way to do it.

But then it's gonna be tough to explain it without being painfully boring, probably the simplest way that leaps to mind is to show why they are nice by getting them to create a page that breaks as many standards as possible while still displaying a valid page. Then show what it does in different browsers and listen for the cries of 'urgh!' :)

(And wow is it hard to resist getting into rants about html design in general)
-- Sometimes understanding is the booby prize - Neal Stephenson
[ Parent ]
from experience (4.00 / 1) (#46)
by semis on Sat Sep 30, 2000 at 07:32:50 AM EST

Here are some points that I think are important to address when teaching basic web design. I have had the opportunity to tutor a web design class, as well as a few tips I picked up from a University course I am currently doing.

Choose an ongoing project or "theme". Start everyone out on an aim to make a particular type of site. Not a homepage, or a fan site for their favorite band - rather for an imaginary company or service. For example, a site that sells online CD's. This "theme" will provide a good framework for aspects of web design - for example, a main page, navigation bar, forms, content, style sheets, etc..

Simply doing an exercise for each element of web content as a "separate" chore will create boredom. By slowly building up a site, each task it learned along the way, and the students get a better idea of how things fit together.

This is also good for teaching to a wider range of skillsets. Faster students can work on improving their site, or adding more content. Unlike simple "tasks" they wont get to the end of them and have nothing to do.

As a guide, three of four "goal" sets are good. For example, the first goal would be to design a front page, with a navigation bar to "dummy" pages on the site. The next goal would be to populate some of the pages with content, using style sheets for example. Anothe goal might e to implement an order form. As you can see.. it's a simple case of "building up" student's skill sets as the fill out their project.

The best thing I find about this method is that there students are more motivated to do a "good" job, and learn extra skills to improve their site.

Essentials. (3.50 / 2) (#47)
by Rainy on Sat Sep 30, 2000 at 10:10:01 AM EST

First of all, a bit of background: I worked as a web designer for over a year and played with web design for ~3 years.

1. Hammer in the most important point: visual tools good for simple to medium sites, typing raw code good for medium to professional sites. This will save them alot of time if they want to do this seriously.
2. Emulate one professional-looking site as a project. Take any major site, like ibm.com or tvguide.com or any other - and have them make a very similar design, so that they understand all the tricks of trade. Of course, not the backend part.. just the graphics/html.
3. Hammer in the idea that flash/anim.gifs/etc are all cute and nice but, in general, should be avoided on anything other than a personal site.
4. Give them a taste of CGI - something really simply in python or perl, i.e. that asks a question and does different things depending on the answer. Few lines of code and yet very exciting and impressive.
--
Rainy "Collect all zero" Day

Internship/Mentorship (none / 0) (#48)
by Daemosthenes on Sat Sep 30, 2000 at 02:36:51 PM EST

There is no better way to learn web design than when you have to do it for a business.

For example, if you just send people off making web pages, it'll end up being a tacky home page with life information and lots of ugly animated .gifs; in other words, it will be of absolutely no use in today's world of web design.

If, however, a business dictates that the student must make a page using tables, with a static sidebar, forms, cascading style sheets, whatever, it forces the student to learn and use more advanced techniques. This was how I first learned web design, and it made me about a hundred bucks on the side :) .

So, in my opinion, the best way to teach web design to high school students is to give them an all-in-one html guide (with sections on cgi-perl, dhtml, css, xml, etc.), a few introductory classes, and an internship or mentorship at a local business. Make some agreement with the business that they will get a polished web page for free; that way the business agrees, and your students become much more experienced. The only problem with this that I see is that you will not be abel to go back to the same businesses year after year. Oh well...just my 2 cents.

-

Encourage the students to have fun (3.00 / 2) (#51)
by barabbas on Sun Oct 01, 2000 at 03:12:18 PM EST

The purpose of a course like that should be to get the students started on web design. Teach them the basics of html, how to publish their own pages on the web, and encourage them to experimentate.

You cannot teach web deign on a high school course, but if you can get the students interested in web design, they will learn by themselves.

I wouldn't bother them too much with the boring stuff like usability or compability on different browsers. Those things are important, but they are not something that a novice webdesigner should start at.

Re: Encourage the students to have fun (none / 0) (#61)
by fantastic-cat on Tue Oct 03, 2000 at 12:29:11 PM EST

I totally agree teaching kids how to correctly organise dat is going to bore the hell out of 95% of them HTML basic and use of an FTP package are in my opinion the only real necessities of web design (along with knowing about the 'view source' menu option). Laying down hard and fast rules just stifles creativity and originality which most websites already lack.

[ Parent ]
Don't teach them web-design . . . (1.00 / 1) (#52)
by esjewett on Sun Oct 01, 2000 at 05:58:02 PM EST

. . . teach them design. This is, without a doubt, what the vast majority of "web-designers" don't get. Just as you wouldn't give someone all the best camera equipment or expensive paints to screw around with before teaching them about lighting, perspective and shutter speed, you don't give a web-designer any tool other than the paragraph tag (if even that) before teaching them some typography and graphic design.

Once this is accomplished and they can design a good site with pencil and paper, let them loose on the computers to get better at the technical stuff.

As a starting point for material, I would strongly suggest: Creating Killer Web-Sites, Second Edition, by David Siegel. This teaches site design and management techniques but consistently stresses graphic and typographic style over all else.


AIM: esjewettii


Visual "design" should be avoided (none / 0) (#53)
by driptray on Sun Oct 01, 2000 at 09:02:28 PM EST

Web "design". Urgh! I get worried when I hear that word, and I hate having to deal with the sites created by its practitioners (almost universal these days, including Kuros5hin).

Here's the important fact to get into their skulls (and its quite an intellectually challenging one for many people): HTML has got nothing to do with the "look" of the site. The author cannot control the visuals - only the enduser can do that. The enduser chooses the browser, the fonts, the colours, the images (in the sense of either viewing them or not), the margins, the stylesheets, everything. You (the author) give them some marked up text and images, and they display it how they want to.

So the course should focus on structuring the site's information, and correctly identifying each part of it. Is it a heading, and if so, which level heading? Is it a list, and if so, what type of list? Is this tabular information? If not, it shouldn't go in a table. Is this a quote, a cite, an address, strong, emphasised, etc etc.

Once this basis is achieved (and its not too hard), you can then introduce style sheets, and all the visual design oriented people can get excited. Just remember that style sheets are optional for endusers - all the effort put into creating a style sheet might be overridden by the enduser.

I actually recommend comp.infosystems.www.authoring.html as a good resource. There's a massive war going on there at the moment (whats new you say - its actually worse than at any time in the 5 years that I've been following the group), but this would be a great way for people to dive into the philosophical disputes around web "design". The official FAQ for the newsgroup is also recommended.
--
We brought the disasters. The alcohol. We committed the murders. - Paul Keating

For more advanced students... (none / 0) (#58)
by Elpenor on Mon Oct 02, 2000 at 12:45:10 PM EST

As the students advance past the basics (which in my experience they will more quickly then you might expect) PHP is a good place for them to move to. It is free and all the documentation they will need is online, and it intigrates very well with Apache and mysql both of which are also open source and free.


Elpenor

my 7.67 Drachmas
----------------
"Duff Beer - You know you want it..."
How To Teach Web Design | 61 comments (61 topical, 0 editorial, 0 hidden)
Display: Sort:

kuro5hin.org

[XML]
All trademarks and copyrights on this page are owned by their respective companies. The Rest 2000 - Present Kuro5hin.org Inc.
See our legalese page for copyright policies. Please also read our Privacy Policy.
Kuro5hin.org is powered by Free Software, including Apache, Perl, and Linux, The Scoop Engine that runs this site is freely available, under the terms of the GPL.
Need some help? Email help@kuro5hin.org.
My heart's the long stairs.

Powered by Scoop create account | help/FAQ | mission | links | search | IRC | YOU choose the stories!