I’m teaching a little web development to my freshmen this week. Not a lot – it’s not a web development course – just enough to give them some idea of what is behind the screen. I’ve had students create a very simple profile page. The pages look pretty good when viewed in a web browser. The images are there. There are lists where there are 
Well a lot of the code is a mess. <head> and <body> tags are missing. There is no proper closure to some of the list tags. And yet the pages work – for a basic definition of “work.” If I were a beginner placing my first web page on the Internet I’d be pleased. But I’m not. In fact knowing what I know about how things change I know in my gut that at some point pages like these will break and probably break badly. Eventually.
My job is to teach students to do things the right way. This is actually easier when doing the wrong thing causes thing to not work. Loading images breaks very easily but that is almost always a function of an incorrect specification of the file name or location. Operating system file systems are notoriously fussy. That is not always a bad thing because ambiguity is almost always a bad thing in computing. But web browsers are great at making assumptions about ambiguous HTML and doing (mostly) the right thing. Students are happy.
Next class we with have a long talk about what codes are missing or incorrect according to the standards. Someone will likely say “but it works fine in the web browser.” because these are teenagers and that is what teenagers say. I’ll come back with discussion of how small errors and code that can be ambiguous can cause unexpected problems later on and code develops. Hopefully they’ll accept that.
I’m thinking I need some new tools for them to use next time I teach this though. I need to look at software that verifies HTML and at least warns about errors. I have looked at the W3 Validator and it does some of what I need. I think I’ll keep looking as I don’t really want to write my own. Any suggestions? How do others check student web pages?
I use Mozilla Thimble. I like it because of its side-by-side windows for showing code & what code looks like in browser as well as providing feedback on syntax errors. I've created a teaching kit for Thimble covering the basics of HTML, CSS & JavaScript @ https://techkim.makes.org/thimble/intro-to-html-css-javascript.
ReplyDeleteDoes the Windows Intellisense have give any visual indicator of the matching paren, curly brace or similar?
ReplyDeleteYou could also verbalize the ambiguity of the compiler in a teenager way with a lot of ums and ahs as it is "guessing". The read it just like their English teacher when they follow proper form for writing a paper.
TechKim that sounds great. It also sounds like you do a lot more than what we are trying to do in this course.
ReplyDeleteJim, Expression Web does do the sort of thing you are asking about but we're not using it right now.
RIght now we are using a simple text editor. Actually what we are using is a program created by the other teacher of this course that lets students enter commands in one window and shows the results in a second window. Easy enough to write in Visual Basic. I need to find something else I think for next year. Expression Web is, in many ways, a lot better and it is free. On the other hand it is more complexity than I want to introduce for a unit that doesn't make up a large part of the course.
An editor that I'm considering is Brackets. You can live update a browser side-by-side, there exists plug-ins that may check validity of the code, and students can install it on Macs or PC at home.
ReplyDeleteWhen it comes to the "forgives too easily", one suggestion I have is to spend a short time talking about accessibility. This semester my students really bought into it as a really good reason for code to be semantically correct. There is a video I show from University of Washington's Department of Technology to make the situation more real (bonus for me, UW is 2 miles away and every student wants to attend): http://www.washington.edu/doit/Video/index.php?vid=35
Another thing I do (and since this is in a full web design course, it's how my CS background bleeds everywhere to the benefit of getting web students taking CS :) ) is telling students as they hit these errors (after warning them upfront this will happen) that this part of web design is harder than learning to code. The computers (being dumb, but trying to be helpful cause everyone should have access to the web) will make their very best guess no matter how wrong your syntax is. This is due to how many old computers exist despite new versions of HTML and CSS coming out.
/end wordy morning ramble :)
Web accessibility has always been on the edge of my mind when I build a website, but lacking motiviation I’ve never actually looked deeply into the subject. This is a great rundown of everything a developer needs to keep in mind.
ReplyDeleteFor more info visit: Holidays for people with disabilities