text editing software for teaching webdesign?
December 24, 2005 11:09 AM Subscribe
I'm going to be teaching a 5 week (30 contact hours) of intro web design as part of a larger digital art class. I'm planning to use text based as opposed to wyswyg tools (no dreamweaver). I'm trying to decide on what software to use. It's an OSX lab.
I'm looking for something that's easy for the beginner but has a full range of features (integrated preview, html tools, xhtml support, css support) Here's what I'm thinking about - taco (easy,free, no ftp, not real xhtml support), bbedit (not free, nice html tools) or textmate (not free, also nice html tools, maybe better interface than bbedit). I'd also love the functionality of cssedit, and wish it was integrated into an all in one editor
I should mention that I'm also not a genuis at web programming. I personally use textwrangler, but I'm thinking there may be a better tool for my students. Finally, if anyone has any advice on teaching webdesign in 5 weeks to a smart and industrious bunch of college students, fire away
I'm looking for something that's easy for the beginner but has a full range of features (integrated preview, html tools, xhtml support, css support) Here's what I'm thinking about - taco (easy,free, no ftp, not real xhtml support), bbedit (not free, nice html tools) or textmate (not free, also nice html tools, maybe better interface than bbedit). I'd also love the functionality of cssedit, and wish it was integrated into an all in one editor
I should mention that I'm also not a genuis at web programming. I personally use textwrangler, but I'm thinking there may be a better tool for my students. Finally, if anyone has any advice on teaching webdesign in 5 weeks to a smart and industrious bunch of college students, fire away
I used to teach Web design on the college level and I've supervised young people in an organization who have only learned html via Dreamweaver.
My opinion: do not start with a WYSIWYG editor. First teach your students how to code using text so they can learn what the code means and how to manipulate it in a text formatted environment.
Also, a good textbook will help you. I like Peachpit's Visual Quickstart Guide series. The books are clearly written and relatively inexpensive.
posted by Taken Outtacontext at 11:41 AM on December 24, 2005
My opinion: do not start with a WYSIWYG editor. First teach your students how to code using text so they can learn what the code means and how to manipulate it in a text formatted environment.
Also, a good textbook will help you. I like Peachpit's Visual Quickstart Guide series. The books are clearly written and relatively inexpensive.
posted by Taken Outtacontext at 11:41 AM on December 24, 2005
I'd give SubEthaEdit a shot. It has the added benefit that you could pop into your student's documents when they have a question, and if you've got a projector in the classroom, use that to demonstrate how to solve whatever issue they've come up with. It does tag highlighting for various languages, so I'm fairly sure it'll do HTML as well.
posted by roue at 11:48 AM on December 24, 2005
posted by roue at 11:48 AM on December 24, 2005
Any boring plaintext editor and a standard web browser of your choice for previewing.
posted by vanoakenfold at 11:52 AM on December 24, 2005
posted by vanoakenfold at 11:52 AM on December 24, 2005
I'd use taco for the basics of explaining what a web page is, how to write and edit tags and how to do basic troubleshooting of tag-related problems. It has good multiple file find and replace and a few nifty built in features and is better for starting out than something big like text wrangler which is sort of awesome but fuller featured than starter folks would need. As far as moving on from there, I almost never use WYSIWIG editors [I've used Macromedia's Contribute, its fine] so I have any advice there.
posted by jessamyn at 12:21 PM on December 24, 2005
posted by jessamyn at 12:21 PM on December 24, 2005
Make sure that you stress the simplicity of HTML. HTML itself is a very easy-to-grasp concept if you break it down for them.
Highlight that ALL HTML is, is a group of tags that tell the browser how to display something. Some tags are used for controls (script, etc) some tags are used for utility stuff (title, head, meta) and the rest are generally for styling your text and images.
Explain the core concept that building a plain-HTML website consists entirely of putting your content into a file and then wrapping it in the tags that will tell the browser how to display it. This opens the door for you to explain nesting tags and some of the more advanced properties of the DOM.
Don't just say that every page consists of <HTML><HEAD><TITLE>. Explain the nesting, in simple terms, and the browser's top-down approach to building the page with the blueprints you've given it.
Make sure they have the basics down, and let them regurgitate it back to you. Learning programming by following teacher's example on a projector is bad news. Instead, show them the example, explain what you can manipulate and let them (if they each have computers, which would be ideal) manipulate the basic tags. Have them write out a few pieces of text, and tell them to selectively bold and italicize whichever pieces they want, and to change the colors to the text as they see fit.
Once they have a good understanding of the basic tags, nesting and the normal style tags and properties, you can consider delving into tables or even CSS, but those things are so much easier to learn when you have a considerable command of the basics, instead of having had it all tossed your way.
Basically, try to ensure that the students actually walk away with not just enough knowledge to sufficiently stylize their MySpace, but to also build their own core pages that don't look completely hideous (although knowing HTML doesn't preclude people from coding horrible designs, as we all know) and that hopefully serve up some functionality.
If they're getting into it towards the middle/end, tables will definitely brighten their day, since some of them might actually decide to use this skillset and build on it later. Think of it as a potential to foster a true hobby or even career with some of them.
I took a college course (it was for kids, but taught at the University) on HTML back when I was in sixth grade, and our teacher used a book called the HTML Visual QuickStart Guide. It was brilliant, because it not only outlined in detail all the possibilities of the tags, but it showed you in code and in WYSIWYG form the results. That course sparked my interest in developing for the web, and now it's my career.
At the very least, it's fashionable to know HTML to stylize one's journal or MySpace or what have you. Let them know at the beginning of the course what they'll be able to do without "profile editors" or helpers with their online identities.
Good luck and have fun with it!
posted by disillusioned at 12:22 PM on December 24, 2005
Highlight that ALL HTML is, is a group of tags that tell the browser how to display something. Some tags are used for controls (script, etc) some tags are used for utility stuff (title, head, meta) and the rest are generally for styling your text and images.
Explain the core concept that building a plain-HTML website consists entirely of putting your content into a file and then wrapping it in the tags that will tell the browser how to display it. This opens the door for you to explain nesting tags and some of the more advanced properties of the DOM.
Don't just say that every page consists of <HTML><HEAD><TITLE>. Explain the nesting, in simple terms, and the browser's top-down approach to building the page with the blueprints you've given it.
Make sure they have the basics down, and let them regurgitate it back to you. Learning programming by following teacher's example on a projector is bad news. Instead, show them the example, explain what you can manipulate and let them (if they each have computers, which would be ideal) manipulate the basic tags. Have them write out a few pieces of text, and tell them to selectively bold and italicize whichever pieces they want, and to change the colors to the text as they see fit.
Once they have a good understanding of the basic tags, nesting and the normal style tags and properties, you can consider delving into tables or even CSS, but those things are so much easier to learn when you have a considerable command of the basics, instead of having had it all tossed your way.
Basically, try to ensure that the students actually walk away with not just enough knowledge to sufficiently stylize their MySpace, but to also build their own core pages that don't look completely hideous (although knowing HTML doesn't preclude people from coding horrible designs, as we all know) and that hopefully serve up some functionality.
If they're getting into it towards the middle/end, tables will definitely brighten their day, since some of them might actually decide to use this skillset and build on it later. Think of it as a potential to foster a true hobby or even career with some of them.
I took a college course (it was for kids, but taught at the University) on HTML back when I was in sixth grade, and our teacher used a book called the HTML Visual QuickStart Guide. It was brilliant, because it not only outlined in detail all the possibilities of the tags, but it showed you in code and in WYSIWYG form the results. That course sparked my interest in developing for the web, and now it's my career.
At the very least, it's fashionable to know HTML to stylize one's journal or MySpace or what have you. Let them know at the beginning of the course what they'll be able to do without "profile editors" or helpers with their online identities.
Good luck and have fun with it!
posted by disillusioned at 12:22 PM on December 24, 2005
Silly me... I thought there was only one raw HTML editor for the mac that "[...] doesn't suck!"
posted by hatsix at 12:29 PM on December 24, 2005
posted by hatsix at 12:29 PM on December 24, 2005
Disillusioned gives good advice, (although not answering the question).
I'd say that you ought to use something that doesn't hide the "physical reality" of the underlying files. The students should know that the file exists on the file system and where it is. In order to do this, just make them save it and type in the file:// url themselves (or drag it from a folder).
You'd be surprised how many people fail to grasp this simple fact of how most computers work.
posted by delmoi at 12:32 PM on December 24, 2005
I'd say that you ought to use something that doesn't hide the "physical reality" of the underlying files. The students should know that the file exists on the file system and where it is. In order to do this, just make them save it and type in the file:// url themselves (or drag it from a folder).
You'd be surprised how many people fail to grasp this simple fact of how most computers work.
posted by delmoi at 12:32 PM on December 24, 2005
Any boring plaintext editor and a standard web browser of your choice for previewing.
As an intro course do them a favor and at least spend a little time at this level. Make sure they get over the initial impression of other tools as something 'magical' and have the confidence to know they can always dig in and figure out what Dreamweaver or whatever is actually producing when something inevitably goes wrong.
posted by scheptech at 12:56 PM on December 24, 2005
As an intro course do them a favor and at least spend a little time at this level. Make sure they get over the initial impression of other tools as something 'magical' and have the confidence to know they can always dig in and figure out what Dreamweaver or whatever is actually producing when something inevitably goes wrong.
posted by scheptech at 12:56 PM on December 24, 2005
SubEthaEdit has a fanstic live web preview feature that opens a second window and renders the HTML live using webkit. Hit Command-R to bring this up - I forget what menu it's under offhand.
It's also free for educational use. So consider this a very strong seconding of roue's recommendation.
posted by Remy at 12:59 PM on December 24, 2005
It's also free for educational use. So consider this a very strong seconding of roue's recommendation.
posted by Remy at 12:59 PM on December 24, 2005
delmoi: Disillusioned gives good advice, (although not answering the question).
Original question:...Finally, if anyone has any advice on teaching webdesign in 5 weeks to a smart and industrious bunch of college students, fire away
I figured that everyone else had sufficiently tackled the "which editor" question, and I thought I'd go for the second part of his question.
posted by disillusioned at 1:03 PM on December 24, 2005
Original question:...Finally, if anyone has any advice on teaching webdesign in 5 weeks to a smart and industrious bunch of college students, fire away
I figured that everyone else had sufficiently tackled the "which editor" question, and I thought I'd go for the second part of his question.
posted by disillusioned at 1:03 PM on December 24, 2005
Response by poster: this is all great advice, thanks! I tried doing it with dreamweaver last semester and it was really a disaster, so I'm trying for a more thought out approach this time...
posted by puppy kuddles at 1:25 PM on December 24, 2005
posted by puppy kuddles at 1:25 PM on December 24, 2005
I got sick of BBEdit constantly hanging and doing other shit which their support team couldn't fix. I switched to SkEdit. Not as full featured but it works and is cheap.
posted by dobbs at 2:11 PM on December 24, 2005
posted by dobbs at 2:11 PM on December 24, 2005
As a designer and art grad student, I'd say go with BBEdit, which is what I use. While it's not free, the cost is fairly low. I also applaud that you will not send them through learning DreamWeaver! Especially now that CSS is fully supported Web sites can really be made well with simple straightforward code (and as an artist and designer, I think it's hazardous for visual people to think of Web sites as just places to do some flashy design). Most school art departments teach stuff like GoLive or DW and that's just bad news... Good luck!
posted by Slothrop at 2:30 PM on December 24, 2005
posted by Slothrop at 2:30 PM on December 24, 2005
I have nvu on my Mac, so let me second suni' recommendation. Of course, I always actually end up using vim.
But one of the advantages of nvu is that said students can go home and use it on their Windows box, as 95% of them are going to end up doing. A very important consideration, unless you plan on assigning no homework (bad idea), or you know they all have Macs at home.
posted by teece at 2:55 PM on December 24, 2005
But one of the advantages of nvu is that said students can go home and use it on their Windows box, as 95% of them are going to end up doing. A very important consideration, unless you plan on assigning no homework (bad idea), or you know they all have Macs at home.
posted by teece at 2:55 PM on December 24, 2005
SubEthaEdit is really slick and free. But if you want to go Barebones software, then the free version is called TextWrangler which is just as good, free, but I still prefer SubEthaEdit.
posted by qwip at 3:28 PM on December 24, 2005
posted by qwip at 3:28 PM on December 24, 2005
I say Dreamweaver still. Just use its Code View instead of Design View.
Second this. I've used dreamweaver for almost two years now at my work and I haven't ever even seen it work in design mode. The code view has lots of great and easy to use tools -- the most useful among them being its "find and replace" functionality, its automatic upload to server on save (great for quick changes) and its source formatting feature.
I know it's not emacs, but seriously, give dreamweaver another look -- there's a lot under the hood.
posted by fishfucker at 6:37 PM on December 24, 2005
Second this. I've used dreamweaver for almost two years now at my work and I haven't ever even seen it work in design mode. The code view has lots of great and easy to use tools -- the most useful among them being its "find and replace" functionality, its automatic upload to server on save (great for quick changes) and its source formatting feature.
I know it's not emacs, but seriously, give dreamweaver another look -- there's a lot under the hood.
posted by fishfucker at 6:37 PM on December 24, 2005
I just got done teaching a four-week unit on web design to a freshman English class, in which the students created electronic portfolios that documented their first semester of college. Of the twenty students, only one had previous experience creating websites, but by the end of the four weeks, they had all created portfolios using XHTML 1.0 Transitional and CSS-based layouts. It was a hectic month, but the feedback I got from the students indicated it was worth the effort and the initial frustration on their part.
I second the suggestions made by several people about starting with a text editor rather than with something like Dreamweaver. I initially planned to use TextWrangler, but my university's Mac labs didn't have the program installed. I tried to put a copy of TextWrangler on the server, with the intention of having my students drag the application to the desktop at the beginning of each class and run it from there, but the OS X build in the labs was causing a lot of problems, especially for students who weren't familiar with Macs. Long story short, I found out that Bare Bones keeps an archived version of BBEdit Lite 6.1 on their site, so I tried that and found that it worked much better.
I'm also a fan of the Peachpit series, but since I only had a month, I didn't want to overwhelm the students with the QuickStart guide. Instead, I used Creating a Web Page with HTML: Visual QuickProject Guide, by Elizabeth Castro (who also writes the longer QuickStart guide). The QuickProject Guide is about 100 pages long and very helpful for students who have little or no experience with HTML.
If you have any other questions or if you're interested in seeing the finished portfolios my students created, let me know. My email is in my profile. Good luck!
posted by lewistate at 8:41 PM on December 24, 2005
I second the suggestions made by several people about starting with a text editor rather than with something like Dreamweaver. I initially planned to use TextWrangler, but my university's Mac labs didn't have the program installed. I tried to put a copy of TextWrangler on the server, with the intention of having my students drag the application to the desktop at the beginning of each class and run it from there, but the OS X build in the labs was causing a lot of problems, especially for students who weren't familiar with Macs. Long story short, I found out that Bare Bones keeps an archived version of BBEdit Lite 6.1 on their site, so I tried that and found that it worked much better.
I'm also a fan of the Peachpit series, but since I only had a month, I didn't want to overwhelm the students with the QuickStart guide. Instead, I used Creating a Web Page with HTML: Visual QuickProject Guide, by Elizabeth Castro (who also writes the longer QuickStart guide). The QuickProject Guide is about 100 pages long and very helpful for students who have little or no experience with HTML.
If you have any other questions or if you're interested in seeing the finished portfolios my students created, let me know. My email is in my profile. Good luck!
posted by lewistate at 8:41 PM on December 24, 2005
I'd say go with BBEdit, which is what I use. While it's not free, the cost is fairly low.
Fairly low? On what budget? Or should I say planet?
I'd use something like subethaedit, or even textmate. Textwrangler is ok if you don't mind working with a program that's ugly as hell. And I agree with you, stay away from dreamweaver.
posted by justgary at 9:28 PM on December 24, 2005
Fairly low? On what budget? Or should I say planet?
I'd use something like subethaedit, or even textmate. Textwrangler is ok if you don't mind working with a program that's ugly as hell. And I agree with you, stay away from dreamweaver.
posted by justgary at 9:28 PM on December 24, 2005
This thread is closed to new comments.
Does all of the above and more.
posted by lemonfridge at 11:12 AM on December 24, 2005