Preparing students

This article, Encouraging Student Success, on Adobe Education Leaders discusses some areas where our web students could improve in terms of preparing themselves for the work place. He lists the following areas of possible focus for students involved in web design.

• Develop a good understanding of web standards (and why they are important – for maintainability of the code, for improved search engine ranking, for increased accessibility and all the other reasons). Tools are important, but students need to know the fundamentals before they can effectively employ those tools.
• Increase the emphasis on web accessibility and usability in the curriculum.
  Increase the emphasis on professional behaviors (arrive on time, test your work before turning it in, admit when you don’t know something and so forth).
• Help students develop a solid understanding of the use of the appropriate tool and when one must go beyond a given tool.

I am giving these ideas some thought as I plan for my web classes next year. I struggle with how much time to spend on basic file structure and HTML before getting the kids into a web editor. It seems that I often err on too little of the basics. I am looking for the perfect balance.

[ Image: Flickr: "Internet Splat Map"; Uploaded on October 17, 2004 by jurvetson: http://www.flickr.com/photos/jurvetson/916142/ (CC: Attribution 2.0-Generic)]

Embedding Spreadsheets in your website

The Google Docs Blog recently had a post about embedding spreadsheets in your website and include instructions on how to do the following:

• Schedule
• Calendar
• Reading List
• Countdown Timer
• Quote of the Day

There is also a link to instructions on ideas for twenty more embeddable spreadsheets.

[Image captured from http://www.vertex42.com/News/embedding-google-spreadsheets.html#ideas]

Bubbl

Bubbl is one of several mindmapping applications available online. I've been looking for something I can use with my web design students. I want them to map out some fairly large sites and I need something that lets them do this easily and collaboratively.

I experimented with Bubbl and it seems to do what I want. So, I recetly took a deep breath and had my web students sign up. We started building a site map together and it worked better than my experience with WriteMaps (File Structure and web design and Writemaps: Followup) but still isn't perfect. On more than one occasion, students ended up loosing some of their edits. But with a few tweaks in how we worked it met our needs.

I'm going to try out a few other programs but we'll be using Bubbl in the meantime. I'm thinking of maybe using just a wiki of some sort. I'm in a class that will be exploring some of the uses of wiki's this semester and maybe that will give me some guidance on the "perfect" program.

WriteMaps: Follow up

I wrote about WriteMaps recently, an online program that allows you to easily map out a website. It looked like just the tool to help my high school students get a handle on some of their bigger design projects. One of the features that drew me was the ability to share a document between several users. I thought this would be great for small group work.

I had my entire class sign into WriteMaps and that happened without a hitch. We spent some time experimenting with the features and I then had a simple assignment where they would each add one node to a master document. It didn't work. Only a few kids were able to get in and change the doc. The rest of the changes went out into the nether regions never to be seen again. I've had similar occurrences in other groupware where if you have too many users at one time, it won't work.

No problem. I'm a flexible teacher and my hair can't get much grayer than it is now. So, I set them up into small groups of three and had them try to work on a document at the same time. I still got mixed results. Work was lost. Kids were frustrated. I had to back up a few steps.

I will still have the students do some mapping with the program but my plans for working collaboratively on one large site with this as our centerpiece have been scrapped for the time being. I emailed Scott Jehl (author of the program) asking if there is a way around this. When I hear back, I'll let you know.

In the meantime, I am exploring other options.

Tagging your files

I mentioned in an earlier post the idea that tagging a file might eventually become the common way to organize electronic files. Couple of days later I ran across this review of a tagging program (mac only) called Tags.

The author of the review, Brett Terpstra, summed up tagging in the following way:

The tagging concept, to summarize, basically allows a file to exist in many collections at once, as opposed to being stuck in one folder. Tagging can be used in combination with a folder hierarchy, or allow for flat storage and organization through search mechanisms. Tags allows you to classify not just files, but also web pages, iPhoto images, Address Book entries ... just about anything which would need to be collected to organize a project.

I have taken to tagging my photos as soon as I load them in from my digital camera. The success of the method, as with any organizational scheme, is to actually use it. After using the system for a couple of months I found it much easier to find a specific photo using a few key words. I bought a little shareware program called Keyword Assistant a few years back to help me out. It made it much easier to tag my photos. Tags (the program) looks to make it convenient to tag all my files?

I had my first set of web kids crash and burn this week because of unorganized files. Their links were failing and they couldn't even find the files they were linking to. They didn't like me very much when I told them they had to get those files named and organized before I'd help them troubleshoot. I refuse to deal with a group of files all named "untitled".

Every gray hair on my head has at it's root an untitled.html file. (Sorry....I just had to say it!)

[via TUAW]

[Image captured from TUAW article: Tags takes organization to a new level:http://www.tuaw.com/2009/01/19/tags-takes-organization-to-a-new-level/]

Embedding a Google Presentation

My beginning web students had a challenge before the end of the semester to build a new web site for our FBLA chapter. I graded them using a rubric for design and structure but the final site was picked by the FBLA sponsor and officers. It was a good life experience. If you don't listen to what your client wants and needs, you ain't going to get the job.

I wanted to post the front pages of their work and thought I'd experiment with Google Docs again. I put a image of each web page on a single slide of Presentations and then published the doc. I then embedded it on my class website. I also embedded it below. This was a simple process and I had no glitches or problems in setting it up. I think I will probably be using this more in the future as a way to easily display student work.

[Image: "bike,submerged": Flickr: Uploaded on June 18, 2006 by cactusmelba: http://www.flickr.com/photos/cactusmelba/169623777/]

Clothing Color Palettes

One trick I've use in the past when students are having a difficult time creating a color scheme for a web page is to have them borrow a palette from nature. Pick a picture of a flower or a tree or a mountain vista and then open it up in Photoshop. Use the eyedropper tool to grab the color hex number for three to five colors. Create a second layer and then draw a thick line of each color across the picture. Does it look good with the picture? Hide the photo. Do the color swatches look good together?

Instant color palette!

I ran across a site that does something similar, Wear Palettes. It takes outfits that are posted on another site that are considered fashionable and then uses those photos to create a palette.

Fashion is not my thing.

Clothes are not my thing.

The women in my life will attest to my poor taste in clothes and attrocious color sense. Yet there are lots of kids who are into clothes and fashion. Here is one way to help them bring an outside interest into their web design projects.

All kids struggle (OK maybe only I struggle) with matching their clothes in the morning. Getting them to think about their clothes gives them another way to think about color and design.

[Image captured from Wear Palettes: http://wearpalettes.blogspot.com/search/label/army]

Acid Test for Browsers

The Acid3 test page will check to see how compliant a browser is to web standards. If you are teaching web design, your students will eventually run into a situation where a page will open fine on one browser but will not look right on another. The Acid3 test is a fast way to show your kids these differences graphically. The picture shown here is what the page is supposed to look like. My understanding is that at this point no browser is 100% compliant. Try it with your current browser and see how close it comes.

If you want more details about the organization that put the test together or the whole issue of web standards, check out the Web Standards Project site.

[Image captured from ACid3 Test reference page: http://acid3.acidtests.org/reference.html]

Posting a students picture on the web

When I came to my current school district about ten years ago, it was against the rules to post a picture of any student online unless you got written permission from a parent. Needless to say, we had lots of school web pages with few pictures of any actual students. I spent a lot of time blurring out the faces of any students I posted on my class site.

My classroom was different. If a child did anything remotely interesting a picture was taken, usually with the responsible students standing proudly beside their creation. The students then opened it into a publishing program and added dates and names. It was printed out and hung on the wall. Kids loved seeing their projects and pictures of themselves posted. It was a great motivator. (Plus every child was comfortable manipulating digital photos and creating simple desktop publishing documents.)

My district has since become a bit more liberal in their internet policies. If I were running a tech lab now, I think I'd post class related pictures weekly. If not on a school website, than on a classroom blog. Kids could prepare their web page or photos for posting. They could share their work with friends and parents without dragging them into the tech lab. I'm going to be teaching a beginning multimedia class for ninth graders next year and I am already starting to think how I will be displaying their work online.

This all leads me to today's link. Brad Moon writes on GeekDad about seeing his elementary age daughter's project posted on YouTube. I thought it was interesting to read a parent's perspective. Don't forget to read the comments from other parents.

[Image: Al Gunn personal collection, "tower competition"]

Online CSS Reference

Last year I bought a book on web design through Sitepoint and in the process got on their mailing list. This led to me getting an announcement recently about the launch of an online CSS reference site they've created. I've been poking around the site this past week and have found it informative and interesting.

It would be a helpful site to bookmark for yourself and for your budding web design students. Good reference tool. Little to much for most middle schoolers but a high school student would benefit from having it available. Take a look.


There are also plans for reference sites on HTML and Javascript.

[Image captured from Sitepoint CSS Reference: http://reference.sitepoint.com/css]