Tips, web design book reviews, resources and observations for teaching and learning web development.
For those of you who teach accessibility in web design, it’s always a problem to demo the process that screen reader users use to access web pages.
Jared Smith, writing at Web Standards Sherpa, has some great tips for how to simulate the screen reader experience for someone using free technology. Check it out.
What exactly is UTF-8? I’m always telling students to choose it as the character encoding for their HTML documents. It turns out that representing symbols, characters and letters that are used worldwide is not easy, but UTF-8 managed it. Tom Scott explains how the web has settled on a standard. @tomscott
An interesting post from Khan Academy about Newbie Syntax Blindness got me thinking about teaching syntax.
First let me point out that Khan Academy is dealing with a different situation than face-to-face teaching. Their problem is about finding ways to alert students who are working online with useful messages about what their syntax errors might be.
In a classroom, face to face with students, I do it very differently. I introduce either HTML or CSS syntax in minute detail. I discuss every bracket, space, comma, semi colon, forward slash, and quotation mark they will be using. I show lots of examples. Then when they begin the actual typing, I walk around and help them spot their errors.
I also teach them that when a page falls apart, look in the HTML for a syntax error right before where the problem appears. It will most likely be a missing quotation mark or bracket someone just ahead of where the problem shows us. I find that students invariably pull their hair out over the part of the page they think is broken, but never think about simple syntax errors or typos that may have occurred just prior to that. That usually where the problem is.
Another problem students have with syntax when they first begin hand coding is taking what they see on a whiteboard or a projection screen or a demonstration monitor and translating into finger strokes on their own computer. The details are minute and exacting. The more time they can spend developing some muscle memory around these strange new keys they are using on their keyboards, the better they will do. People who have been keyboarding for years can be thrown into beginner’s mode hunting for curly braces and brackets and slashes and equals signs.
If you are teaching, either face to face or in online classes, how do you teach syntax?
The CNN 10: Thinkers is an inspirational and fascinating look at ten thinkers in the field of technology. The first thing I noticed about the list was that it is not all white males. The second thing I noticed was – wow! these people are amazing. Hat tip to @redcrew for bringing the post to my attention.
Speckyboy has several free responsive HTML5 templates available. You might want one for yourself or to give students something to start with on a class project.
Oh, wow, I think someone at The New York Times Magazine has been listening to me. The article I Am Woman, Watch Me Hack deals with this: One theory about why so few women go into computer science says it has less to do with innate capabilities and more to do with cultural narratives, like “CSI” and “Bones”.
Since any basic text editor can write HTML, CSS, and various scripting languages, I like to let my students know which I recommend and why.
I have two favorites. Both are free. Both use color coding and indentation to make reading and troubleshooting easier. Both provide line numbering. One is for Mac and one is for Windows.
For the Mac, I like TextWrangler. TextWrangler is a “lite” version of BBEdit. Many Mac users may already own BBEdit, but if you aren’t in that position, you should get TextWranger.
For Windows, I like Notepad++.
Both these editors allow you to have multiple tabbed windows open at once a number of helpful functions for dealing with code and for general editing. I’m not sure about Notepad++, but I know that TextWrangler has FTP built in.
I consider a good text editor an essential, even if you use a tool like Dreamweaver to do most of your work. I find, for the way I work, that I often open up pages in a text editor for various chores instead of using Dreamweaver – or in addition to using Dreamweaver.
Accessible Forms 1: Labels and Identification is an important post at Web Usability. I’ll bet there’s some info in this report that you don’t know, but can use.
Q&A with Adobe MAX Speaker Denise Jacobs who talks about creativity and the importance of storytelling on web sites.
Acorn 4 is out. Do you recommend this inexpensive image editor to students who can’t afford Photoshop?
I’ve been doing some consulting with someone who is learning to maintain a website in Dreamweaver. We keep bumping into the concept that fiddling with new styles every time you create a new page of content is a bad idea.
Remember Virginia’s Law Against Unintended HTML? It goes like this:
Play with the way your content will look before the content is on the page, not after.
In looking around desperately for a concept or metaphor that will bring home the point to this Dreamweaver user, I’m wondering if thinking of a website as being like a technical book can help. I could use one of my own books as an example. Here’s what I’m thinking.
If you look through a technical book you see all sorts of formatting: headings, paragraphs, lists, images, tables. Every time you see something, for example, a chapter title, it uses the same formatting and appearance. You don’t see a different size title for chapter 6 or a different color title for chapter 8. The appearance for chapter titles is consistent throughout the book.
A web site should have the same consistency. Every page’s main heading should use the same formatting and appearance as every other page. This applies to other parts of the site, such as links, lists, images, etc. You decide before the book is printed what kind of styles will be used for the content. Then you stick with that decision for the entire book. A website should be thought of in the same way. You plan a look – the styles – and you stick with that look throughout the entire website.
If something changes in the future (because, after all, the web is a changeable medium as opposed to a book), any changes to the stylesheet affect the entire website, not just selected parts of it.
Does this metaphor work or is it confusing? How do you teach students that a website should have a consistent set of style rules and not a page-by-page mix of freshly hatched classes?