You are here: Home / Archives for Computational Thinking

Teaching HTML and CSS via translation

by

One of my major teaching responsibilities at The College of New Jersey is a course called, Writing for Interactive Multimedia. For the last 15 years, we have been using that course as a way to introduce our journalism students to basic coding in html and, more recently, css. Initially a course for the journalism and professional writing major, it has also been required for Interactive Multimedia majors since 2003. There are dual challenges in this arrangement, as well as opportunities. One of the challenges is that students come to the class with varied levels of interest in, and affinity for coding. On the other hand, having students with different levels of proficiency creates opportunities for peer mentoring and collaboration in the classroom.

Also, I posit that a systematic and disciplined approach to studying html and css can be helpful for students who might have gaps in their understanding because they are largely self-taught. Finally, because coding is in a constant state of evolution, it is important to establish a culture of continual learning and experimentation – something that might be familiar to students of computing and interactive media, but which tends to be novel for journalism majors.

These are lofty ideals, but are often challenging in practice. In the past, I have taught html through demonstration, having students follow me and practice their initial coding in the class. I have tried a number of online tutorials and physical textbooks. I have spent lots of time assisting students in labs as they practiced coding, and have had more experienced students work with novice students. Currently, I’m using Virginial DeBolt’s Mastering Integrated HTML and CSS.) This approach works well enough to get students to learn some rudimentary skills, but it has not created the kind of cultural change or deep understanding that I was trying to establish.

This semester, I tried something new – I am focusing on html and css as languages that can be translated into English, and vice-versa. Here are some exercises I have created to teach and reinforce fundamental concepts. This is a work in progress, but students tell me that they enjoy these exercises and find them helpful.

1. A conversation in English and HTML

After my students had been introduced to html through readings and class discussion, I suggested to them that we have an oral conversation in which I posed as a web browser and they were the web designer. I told them to initiate a web page. One of the students said, “html.”

I said, ” I am being asked to display a webpage. I expect I will get some information about it soon.”

A student said, “head.”

I said, “This is the header. I will know learn the special rules I need to know to display this page.”

A student said, “title…”

We went on like this until we had described a page with links, text and images. There was a lot of laughter in the process. Then we practiced scripting pages.

2. Translating English to HTML and CSS

I wrote the following sentences on the board and asked the students to pair up to turn the sentences into HTML and CSS:

  1. This is the beginning of my webpage.
  2. The title of my page is “My resume.”
  3. In my page, the headlines will be in the font Verdana.
  4. In my page, the body type will be in the font Georgia.
  5. The background color of my page will be 255 255  204
  6. The content that will be displayed on my page begins here.
  7. This page is linked to my homepage.
  8. The content to be displayed ends here.
  9. This is the end of my web page.

After working on this for 10-15 minutes, I called volunteers up to ask them to write the  appropriate lines of html and css.

3. Commenting out HTML and CSS

A conversation with my computer science colleagues Miroslav Martinovic and Monisha Pulimood led me to the idea of having students use commenting on their webpages. Essentially, I am beginning to tell them to write out what  they are trying to do each line of HTML and CSS as they script. The purpose of this is similar to the purpose of commenting on code generally – so that students can have a record for themselves or other coders of what they were trying to do. I anticipate that this will help me and peer tutors or collaborators be more effective in helping them as well.

I am working on some other exercises, including kinesthetic approaches to teaching about concepts such as relative and absolute links. I have also approached a colleaguein our World Languages and Cultures department about ways in which this might be developed into a more formal system of instruction. If anyone knows of others who are teaching this way, I’m interested in their results.

Sidebar: The making of young entrepreneurs: Li’l Tech Pro and Baby Billionaire

by

Here’s an experience you might remember from your childhood or that of someone you know: you’re five, maybe six years old, and you see a clock on a kitchen table. Or in my case, I’m 10 and it’s the transistor AM/FM radio my parents gave me for Christmas. You are just itching to know how it works, so you figure that you’ll take it apart and see what’s inside, and then you’ll put it back together. And so you pry off the back and you start taking out the components, one by one, and it seems pretty simple until

…you see all of the pieces on the table and they seem to have multiplied and you hear footsteps and you are trying to put it all back but you can’t remember how it goes and it looks like there are too many parts or not enough and then a parent’s voice says, what are you doing?? And you look up in fear because you know that you are in trouble.

Or at least you would be in trouble, unless you happened to have Malachi Munroe’s dad. Malachi, who is 12 and hails from Miami Florida, said that when his father, a computer store owner, found his six-year-old son dismantling cell phones, he taught him how to put them back together correctly. That led Malachi to establish an electronics repair business, a public speaking career and a new booklet offering tips and advice to iPhone users. He says it’s the first in a series of publications that will include similar advice for Android and Blackberry owners. During the interview, he put his skills to work by digging in and fixing a problem I’d been having with my phone.

I met Malachi and his Aunt, Ionnie McNeil,  at a Philadelphia hotel August 5 during the National Association of Black Journalists Convention. Aunt Ionnie, 21, is pretty interesting in her own right – she started investing at age 9 and now runs The Baby Billionaire, which seeks to educate young people about investing. In the interview that follows, I wanted to understand how they became motivated to pursue technology and investing at such a young age. Their answers are revealing.

These young people demonstrate precocious knowledge, maturity and focus.  I look forward to hearing your reactions.
Other interviews:

On teaching game design in a journalism course, part 2

by

In my last post on the newsgames course I will be teaching this fall, I began to discuss how the need to respect the journalistic intent of a newsgame translates into requirements and constraints upon the game’s design and production. In this post, I want to  delve into that topic more deeply, using principles outlined in Tracy Fullerton’s Game Design Workshop: A Playcentric Approach to Designing Innovative Games, and applying those principles to a game that I consider particularly successful, MSNBC’s “Can You Spot the Threats?”  game about the challenges of screening airport baggage.  Finally, I will discuss questions that I will raise with my students about my partially finished “Food Stamps Game,” which I introduced in the last post. The intent of the Food Stamps Game is to simulate the experience of trying to buy a week’s worth of groceries on a $30 budget, about average in terms of what states allow a single adult participating in the Supplemental Nutrition Assistance Program (SNAP) which is the current name for Food Stamps. (Eligibility for benefits and benefit levels vary, and are based on complex criteria. See references on benefits at the end of this post.)

Fullerton defines a game as:

  • A closed formal system that
  • Engages players in structured conflict and
  • Resolves its uncertainty in unequal outcomse (p, 43)
MSNBC's game about airport baggage screening successfully incorporates dramatic and formal elements.

Here, an aside: It should be noted that Fullerton’s definition of a game is at slight variance with that employed by the authors of the other text that I plan to use in the course, Newsgames: Journalism at Play, which I discussed in the previous post. The Newgames text considers animated infographics as games, where as Fullerton is more restrictive. I bring this up because this is an interdisciplinary class in which some of the students are already familiar with Fullerton;s formulations. I may need to take these differing perspectives into account in order to build a common intellectual climate within the class.

Part of the value of Fullerton’s definition is that she breaks it down into components that can be understood as operational requirements.  Games have what Fullerton describes as formal elements (such as rules, playing pieces, boundaries and outcomes), dramatic elements (premise, setting, character and a dramatic arc), and system dynamics (the way the formal and dramatic elements interact). Please note that Fullerton’s definition of these categories is more extensive than I have presented here. This list is only  for the sake of illustration and discussion.

Applying Fullerton’s rubric to MSNBC’s “Can You Spot the Threats” game helps us to understand more about her categories, as well as the characteristics of a successful simulation-type game. The game starts with ominous music and a voiceover narration about the ways in which airport baggage screening procedures changed in the United States after the terrorist attacks of 9/11. Then you are told that you are about to experience what it’s like to screen baggage for two minutes. A series of actual images of luggage generated by screening equipment scrolls across the screen, and you have to pick out the bags most likely to contain guns, knives or explosives. However, the pictures are frustratingly blurry and vague, as can be seen above. You can stop an image, zoom in, and change the black-and-white image to color, but the images are still non-descript. Take too long, and the passenger murmuring in the background rises to a fever pitch. Move too quickly, and it’s likely that something dangerous will slip through. At the end of two minutes, you get a score based on the number of bags screened, the number of dangerous bags detected, the number missed, and a score.

In Fullerton’s parlance, there are formal elements – rules, resources (the bags, the controls), boundaries (the time limit, for example) and outcomes. There is a real-world premise, a story in with characters (you, the baggage screener, and the passengers),  a setting, and a simple dramatic arc. The flash program functions efficiently, and the interface is clean.

“Can You Spot the Threats?” is one of the most effective newsgames I’ve seen, both When I had a class of about 24 students play this game in 2003, they said they gained a new appreciation for the difficulty of the baggage-screener’s job, and motivated them to read the accompanying web feature article. My campus is an hour’s train ride from Ground Zero, and the 9/11 attacks were still evoked a visceral emotional response from my students. They said they found it easy to accept the game’s premise, and they felt anxious as the blurry images rolled across the screen and passengers began to complain that they might miss their planes.

These are some of the ways in which the Food Stamps game is unfinished and needs revision.  As some test users report, the boundaries of the game aren’t always clear – for example, a script that should come up when a buyer runs out of money doesn’t yet work properly. There aren’t enough dramatic elements and the system dynamics could use some work. These will be some of the things that will be fodder for discussion with students in the fall.

Arguably, the flaws in this game, and the ability to download and remix the code in Scratch, makes the Food Stamps game useful as a tool for highlighting this game and its design process as an example of computational thinking. I will elaborate on that in the next post.

Endnotes

References on benefits. For more information on how states calculate Food Stamp benefits, please see examples below:

  1. USDA SNAP Eligibility page
  2. Texas: Food Stamp Benefit Estimator
  3. Illinois: DHS Supplemental Nutrition Assistance Program
  4. MassLegal Services. 2011 Food Stamp Advocacy Guide Part III. Eligibility
  5. Hawaii Financial  and SNAP Benefits RIghts and Responsibilities
  6. Louisiana Department of Children and Family Services: Economic Stability Supplemental Nutrition Assistance Program
  7. South Carolina Department of Social Services SNAP Benefit Calculator
  8. 2007 Congressional Food Stamp Challenge
  9. US Food Policy “Living on a Food Stamp Budget” (This is the specific source of my $30/week figure.

Course syllabus as of July 13, 2001