Tag Archives: web design

MeteorPad Tutorial: GoldMine

In a unit on Meteor applications for my web design class, I wrote a series of applications to help my students see the basic structure of a few Meteor applications so that they could eventually design their own. The students had seen applications that tallied votes from a survey, compiled links, and a simple blog. This one was about being competitive, and the students were understandably into it.

This tutorial was designed to use MeteorPad due to some challenges associated with installing Meteor on student computers. The first one involved permissions issues since students are not by default given access to the terminal. The second involved connectivity issues to the Meteor servers from China, which unfortunately, I never fully resolved. MeteorPad offered an awesome balance between ease of making an application and minimizing the need for Terminal. For anyone looking to get started with Meteor, I recommend trying out MeteorPad as it doesn't require any knowledge of working in the terminal or software installation.

I was able to take data on the students clicking away as I created new pieces of gold and put it out into the field. I've written previously about my enthusiasm for collecting data through clicks, so this was another fun source of data.

Code can be downloaded here from Github.

Online School Resumes with Meteor

As you may know, I've been teaching a web programming course this year. I wrote previously about the work we did at the beginning of the year making interactive websites using the Meteor framework. Since then, we've spent time exploring the use of templates, event handlers, databases, and routing to build single page applications.

The latest assignment I gave students was to create an online school resume site with a working guestbook. I frequently discuss the importance of having a positive digital footprint online, and one of the most beneficial ways of establishing this is through a site created to share their work. Students worked last week to complete this and submitted their projects. We've had connectivity issues to the Meteor servers from China from school. As a result, some students used Meteorpad, which unfortunately means their sites aren't permanent.

Those that were successful at deploying, however, have persistent guestbooks that anyone can visit and comment upon. Some students added secret pages or like buttons to show that they have learned how to use the reactive features of Meteor. The students were excited when I said I would post links on my blog and have given me permission to share. Here is the set of deployed sites:

Maria's Site
Dominick's Site
Tanay's Site
Luke's Site
Steven's Site
Tiffany's Site

I'm really proud of how far these students have come since the beginning of the year. They have accrued some bad habits of copying code and avoiding commenting their Javascript, but I take some responsibility for not holding them accountable for this. My goal was to have the focus of this course be on building and creating as the first priority, and the second on developing skills as programmers. As with many of the subjects I teach, helping students see the need for the basics is often most easily done with the end product in mind.

If anyone wants recommendations for a summer hire, let me know.

Graduated Assessment & Web Design

I decided to try teaching programming this year as a class, specifically HTML, CSS, and Javascript. My hope is to get students to the point that they can put together a basic Meteor app by the end of the year, along with a good set of skills for building web pages from scratch.

My assessment scheme for the class is through a series of projects. Some are small, some are bigger and more open ended. I noticed during class on Tuesday that students are cutting corners by copying HTML from files we used in earlier classes. I admittedly do this all the time, but I pay the price for doing so in time spent cleaning up fragments of code that I really could have written from scratch in less time. In the general series of trying to teach good habits, I decided to give a graduated assignment that went through the series of HTML concepts we have learned over the past two weeks.

The requirement is that students need to make one HTML file for each of the ten steps in this file. They have to start from a blank HTML template that has nothing more than the basic head and body elements. I also had students write out the code for the first three steps by hand.

Screen Shot 2014-08-28 at 7.44.02 PM

The effect today in class was a clear measurement of where each student stands in understanding how to piece together HTML from scratch. I collected the folders of files from students at the end of class and can see precisely where their difficulties are. Some of this comes from just knowing what step they were on at the end of class, but I also had some good conversations with students throughout the period today. My class, thankfully, was pretty honest in showing what they do and don't understand how to do. While there has been some code sharing in the class before, they seemed to appreciate this opportunity to step their way through the progression of what we've learned so far.

I think there's an analogue in math and science here - I've given leveled practice sheets before in various mathematics topics. The willingness to push through misunderstanding and admit difficulties seems to be a lot more substantial in a programming context.

Here's the full exercise:
day5-Step Instructions