elfs: (Default)
[personal profile] elfs

The past two weeks I have volunteered a couple hours of my time at the local high school to teach a small class of the kids in the fine art of HTML and CSS. I have only one hour of interaction with the kids each week, but I spend about two to three hours beforehand prepping materials and getting ready.


The first class was a blitzkrieg of ideas. A bit of “A website is a collection of web pages around an idea” and “A webpage is a chunk of HTML filled in with other stuff to give you one view of the idea” and so on. A map of a fairly complex web production environment: The “business thing”, the business logic, routers, databases, HTML, CSS, Javascript, Canvas, SVG, WebGL, etc. etc. etc. The number of websites I’ve built where “the business” was a completely separate server with a simple frontend written in Django, Catalyst, or Express shows the maturity of the model.


And then we hit the wall. As a demo, I wanted them to all open up a file, edit an eight-line HTML file (HTML, HEAD, TITLE, BODY, PARAGRAPH, CONTENT, plus closures), save it, and view it in the browser.


The enly tool these kids have for this is a bunch of Chromebooks. Most of them can’t afford laptops. The school provides them the Chromebooks, and their own Google Drive locations and accounts. So that’s what we had to work with.


Problem number 1: These kids have no idea what “plain text” is. Every tool they’ve ever used comes with options to pick a font, do bold, do italics. When I asked them how the computer “knew” to use bold or italics, they shrugged. I had to explain that the zeros and ones saved to their storage contained extra zeros and ones to describe the decoration, the bolding, the italicizing, the font selection. We were going to add the decoration back ourselves, using HTML. But before we could do that, we needed to use the most simple storage format there was, the one with no decoration, the one where every character you saw was the same the one you saved, with no additions, to annotations, no decorations.


The ease and convenience of RTF and other “printable” or “web-ready” formats has completely ruined these kids’ understanding of what actually happens underneath the covers.


Problem number 2: These kids have no way to correlate files to URLs. The lack of a traditional storage medium, and the introduction of Google Drive, means these kids have no mental map for associating a “web location” with a “filesystem location”. Everything is seemingly ad-hoc and without a real-world physical reference. This is probably the lesser problem, as storage is already very weird and about to get weirder, and we’re all just going to have to live with that fact.


The second class went better, and I went much, much slower. This is a hands-on class where I lead them through a couple of exercises and help them figure out weird things they can do with HTML. We figured out work-arounds for Google Drive and practiced our first, basic HTML, like headers, lists, and so on. And I gave them their first styles. They had fun figuring out random colors that seemed to work for their backgrounded objects.


There’s that Simpsons episode where some adult male says “Am I out of touch? No! It is the children who are wrong!” Well, maybe I am out of touch, but it really seems to me that Chromebooks may be fine for accessing the World Wide Web, but as a tool for developing on the web, they’re more a hindrance than a help.

Date: 2016-01-17 05:00 am (UTC)
grum: (Default)
From: [personal profile] grum
Fascinating. I pointed Tcepsa at this post as well, since he's going to be the one responsible for teaching the kids this part of functioning in modern society.

Date: 2016-01-30 10:20 pm (UTC)
From: [identity profile] alan jenkins (from livejournal.com)
Huh. That Chromebook (tablet, whatever) problem is nasty.

Mozilla's answer to teaching was pure web

https://teach.mozilla.org/tools/

I wonder how much they were influenced by that obstacle, or related ones.

Unfortunately I se Mozilla require creating an account, using an email address. (You can try it out, but not save your work). OK for individual enthusiasts, but for a school class it's another obstacle.

---

Many (though by no means all people) notice plain text areas. In comment and forum areas like this one, the subject line of an email, filenames. Some will be familiar with using markup in comment areas. A few will have noticed you actually can't copy+paste formatted text into them...

I'm not sure that "plain text" is the fundamental point. The point in HTML is you're describing the "decoration" with explicit markup.

If you have an inline style for colour, it quantifies the specific shade. The file format / apps we use for editing work nicely for this, because they don't let you sneak in coloured text any other way.

The underlying file format happens to be UTF-8. It has enough of tricksy formatting characters of its own that are far from plain, but again we consider it best to avoid most of them. A different history might have standardized on UTF-8 + ANSI terminal escape codes, but the same logic could still be applied.

Our renderer ignores certain ASCII controls. Any number of newlines and spaces are usually treated as one. Form feeds and even older controls are ignored. If our text editors rendered ANSI escapes, it wouldn't mean our web browser had to accept them as an alternative way of specifying colour.

---

As you say, outside of what you're teaching here, there's no reason people would know about plain text files. HTML is probably the best place to learn that (ignoring various snarks about teaching coding). It's about the most accessible way to get into computing, to start seeing where all this power comes from and how you can get at it.

Commiserations for not being as close to the metal as you'd like, and many kudos for getting it to work for those kids, however you did it.

Web Development

Date: 2016-04-14 06:08 am (UTC)
From: [identity profile] arhamsoft.livejournal.com
Very fantastic and well-written post.Its extremely good and very helpful for me.Thanks for sharing this great post.
Web Development (http://blog.arhamsoft.com/2016/04/13/5-logics-hire-professional-web-development-company/)

Profile

elfs: (Default)
Elf Sternberg

December 2025

S M T W T F S
 12345 6
78910111213
14151617181920
21222324252627
28293031   

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jan. 29th, 2026 04:58 pm
Powered by Dreamwidth Studios