Using NoScript to raise awareness of web page scripts

A quick post on using the Firefox add-on NoScript as a way to raise students understanding of how web pages use scripts. Note I have not used this in class yet.

Working with multi-media students I am always surprised by a relative naivety about browsing the internet. Awareness of issues like privacy and security seem to take second place to issues of design looks and cool features.

A simple way to raise awareness of one aspect of web security would be to get them to use the NoScript addon to Firefox. When you visit a site the add-on allows you to see what domains want to run scripts. For example going to the BBC News home page we can see 5 domains wanting to run scripts:

Four of them have bbc in them, the fifth is something called revsci. Looking that up we find out that it is an advertising company called Audience Science – read more info on revsci.

You then tell students to see how much of the BBC site they can use without having to enable any of the domains.

Next ask students to pick three of their favourite sites and do the same, i.e. look up the domains unrelated to the site, navigate site without enabling any domains.

Students could then pair up and exchange what they had found. Finally a whole class feedback is done to discuss the findings (e.g. tabulate the most common offsite domains) and the wider issues of browsing privacy and security.

Thanks for reading.

Advertisement

More than a Thimbleful of learning

The Mozilla Thimble project is an innovative web application with a split screen interface to help people learn HTML and CSS. Of the many Thimble projects available the 6 Word Memoir caught my attention (HT Chad Sansing/@chadsansing). This post describes how I used this in class with some first year multi-media students. The task ticked the three boxes of reading skills, web design skills/lexis and a bit of imagination.

First I projected the title – 6 Word Memoir and the questions:

What is going on in YOUR life right now?
What has happened in your life that you’d like to express?
What is your hope or aspiration?
How do you see life?

I told the class that they will see a video of some teenagers who had answered the above questions in 6 words, and asked them note down any ones they liked (play video up to 2:05):

After time for reactions to video, I showed them a gapped text from the Mozilla Thimble 6 Word Memoir Task, a paragraph is shown below (click six word gap fill to get full file, odt format):

/*The following _______ make the background look like argyle. There is no image, it’s all CSS! Check out http://lea.verou.me/css3patterns/ for many more CSS patterns.*/

/*The container class makes the box blue and rounds the corners. Try giving it a different color by ______ the background-color property*/

/*This style _____ the text in the class “sponsor”, which appears outside of the blue box*/

/*_____ styling for links is blue and underlined. This style changes the blue to the National Writing Project’s purple*/

/*Below are the example styles for making beautiful CSS text. Play around with the styles and change your “madlib” _____ to have different ______. If you search the web for “cool CSS text effects” you’ll find lots more examples of great text effects!*/

spans/properties/classes/controls/changing/default

After students finish the gapfill I sent them to the Mozilla Thimble 6 Word Memoir site and instructed them to complete their own memoir.

For some in the class the video was too fast so you may need to replay it depending on class level. They enjoyed the class though some felt a bit puzzled at just having to write just 6 words. Next time I would focus on getting them to really think about their words, I was too eager to get them onto the Thimble task.

Six examples of 6 word memoirs:

https://thimble.webmaker.org/p/lf69/
https://thimble.webmaker.org/p/fibk/
https://thimble.webmaker.org/p/fi8g/
https://thimble.webmaker.org/p/lf6y/
https://thimble.webmaker.org/p/lf6e/
https://thimble.webmaker.org/p/lf6c/

Thanks for reading, do check out a related post using Mozilla Popcorn Maker and do let me know if you have used any of the Mozilla web projects in class.

Update:

Kevin Stein/‏@kevchanwow has a great post on using 6 word memoir with a nice idea to grammaticalise the 6 words, will try that when I next do this lesson.

The Pirate Bay AFK – web related lexis

The documentary The Pirate Bay Away from Keyboard was released recently. I used some of the text from the English subtitles in a gapped sentences exercise (most of the film is in Swedish):

1: Half of all BitTorrent tr_____ is coordinated by the Pirate Bay. It’s extreme amounts of tr_____.

2: There are 22-25 million us____ at this very moment.

3: A user is defined as one ongoing up_____ or download.

4: This is the web s____. Data base and search fu____n.

5: The _______ are over there. This little piece is the ______. It’s the world’s biggest ______.

6: Not so many computers,but powerful and well-con_____.

7: How the hell can prosecutor Roswall mix up mega___ and megabyte?

8: Generally speaking, for st_____ you use byte and when you measure speed you use bit.

9: I had a spare l___ which I let him use for the site. It was from British Telecom.

10: So the US government ordered us to re_____ the site. We fought them for a long time before we re_____ed it.

11: After a while we cl____ it d____, when it became too much of a fuss.

12: Two months later Gottfrid needed more ba_____ for the Pirate Bay. I still had that line available.

Unsurprisingly sentence 5 caused the most difficulty, sentence 9 was also tricky. I then showed the film up to the 19 minute 29 seconds mark.

I asked the class to watch the rest of the film and think about two things – Was it a good documentary? and What issues were raised in the film? They should be prepared to discuss this for the next class.

You may be wondering why I chose to use a film that was mainly spoken in Swedish? The average listening comprehension level of my multi-media classes is at A2/B1 and from previous experience asking them to listen to a 1h 22m film in English would be asking too much. The translated titles are simple enough for them to read.

I intend to work with the gapped sentences again in the next class, possibly in the form of a dictogloss.

Key to gapped sentences:

1: traffic

2: users

3: upload

4: server; function

5: tracker

6: configured

7: megabit

8: storage

9: link

10: remove

11: close down

12: bandwidth

Hope you found this activity useful.

South Park, web user requirements meeting

Another net search revealed this gem of a video that can be used to illustrate lexis of user requirements meetings. The comment under the video also provides some useful language.

I used the video using the listening from the middle approach, this time I got students to come up to the board to transcribe what they heard. I play the extracted mp3 from 1:05(‘To help you out…) to 1:57(“I must not have…”)

After the transcription onto the board, and after asking students to predict what came before and what comes after the recording they just transcribed*, I ask them to note down all words related to web/internet  as they watch the whole video.

I then play the video.

Possible word list to review:

user requirements (sessions)

web application

(running through) log in process

new user (would encounter)

(when) visiting our site

welcome screen images

user (may encounter)

(based on) an algorithm

pages (require different) routing

(check out) pages

(filled out) the registration data

the system (will take them to)

visit the […] page

(automatically) signs them up to

spam list

my myspace page

updated to the latest version

(accept) changes to the word doc (I sent)

jump to page

users are taken

new to our site

existing customer

dead-end with no exit

address that bug

document

The text in brackets are optional depending on focus of lesson.

As homework for the next session I then asked the class to think of all the stages involved in designing and building a web application or website, pick one of the stages and invent a dialogue using appropriate and relevant vocabulary.

Although I did not use the written note under the video I may use it next time say as a gap fill to revise related vocabulary:

The video was originally made for a one-time only showing at the 2007 iRise user conference held in Las Vegas. These “user requirements” meetings are held when a business is in the process of building a web application, and need to figure out what to build and how. Over simplification of the steps involved:

1. You meet and discuss what it is you want to build
2. You construct a huge requirements document which lays out the process and specifications
3. You meet and review whats been built and it hardly resembles what you first discussed

Hope you enjoyed this and found it useful.

*For some reason it was hard going to get them to imagine what came before/what comes after except for, of course, predicting that Kenny dies!

Popcorn Maker, taste test

This post describes both a lesson and a task based activity that multi-media students may find interesting.

Lesson

The lesson starts by asking students to predict the content of a video (by Michael Wesch) that they are about to see from the title –

• The machine is Us/using Us.

Before playing the video students are told to:

1. Note down keywords
2. Note down message/meaning of the video

Play the video for the first time (HT Tyson Seburn/@seburnt):

Repeat the instructions about what to note-down and play the video for a second time.

Get students to compare notes. Get some open class feedback on the keywords they noted.

Then ask students to look at the following list of words from the video and to check in pairs if they understand them:

linear text
hypertext
html
content
structure
xml
formatting
export
users
web
blog
data exchange
mash
tag
database
post
linking

Next ask the students to comment to each other in pairs what they thought the video was about and then to whole class.

Task

Tell students that the video was made in 2007 and point out that a lot has changed on the internet since then. Ask them how the would modify the video to make it up to date. Get them to plan this in pairs or small groups.

After enough time check with them the ideas they have in mind. Then tell them that they need to implement these ideas using Popcorn Maker. (Webmonkey has a nice write-up on Popcorn Maker)

In my case the actual implementation was given as the homework due in one week.

Example remixes by my students

Example 1

Example 2

Example 3

Informal evaluation

I asked students for their thoughts on using Popcorn Maker, the following are some paraphrased comments:

when resizing element it is not very precise on the timeline

would not use it if had choice

buggy, crashed a lot though it may have something to do with browser i used

could be used as a drafting tool

you can annotate in YouTube

Note these are students in the 2nd year of a multi-media course and are used to semi-professional/professional software and equipment. So was not too surprised with their general lack of enthusiasm about Popcorn maker.

As a language learning task I felt it was moderately useful and as a multi-media task less successful. I would try next time to give more support to help them generate ideas. e.g. using sites such as Evolution of the web.

Check out a use of another Mozilla project – Thimble.