Digital Guyana

Archive for the ‘The course’ Category

To round off the course and consolidate the learning of the previous weeks, we ended the course with a quiz. 38 points were up for grabs and we were pleasantly surprised by how much all the groups got into it. There were some pretty high scorers too, so they must’ve all been paying attention.

Here are the questions:

HTML

1. Which tags open and close an HTML page?

2. What are the tags for?

a) Paragraph
b) Bold
c) Italics

(3 marks)

3. What does HTML stand for?

4. Name a web browser.

5. <img src=”pictures/photo.jpg”></img>

Is the above an image, link or table?

CSS

6. what does CSS stand for?

7. Here is some sample code for linking a .CCS document to a web page:
<link href=”….css” rel=”stylesheet” type=”text/css” media=”all”></link>

Which of the following tags does it belong between?

a) <title></title>

b) <head></head>

c) <body></body>

8. Here is a style attribute:

background-colour: blue;

However, there is something wrong with it, what is this?

9. List two more style attributes. (2 marks)

10. What will the following styles do to a web page:

body {
background-color: black;
}

h1 {
font-size: 18pt;
color: yellow
font-family: verdana;

p {
font-family: arial;
font-size: 9pt;
color: white
}

(3 marks)

Social networking

11. What does ‘open source’ mean when referring to software?

12. Name three social networks.
(3 marks)

13. What is the name of the free, user-created Internet encyclopedia?

Blogging

14. What’s the difference between a ‘post’ and a ‘blog’?

15. What is a ‘blogroll’?

16. Name an online service for finding blog posts written by others.

17. What does ‘SEO’ stand for?

18. Why are links important in blogging? Give one example.

19. Why should you avoid using ‘click here’ as anchor text in links?

20. How many bloggers had signed up with WordPress.com as of Sunday evening, 9 August 09?
153,000, 207,000 or 378,000

Good content

21. Scannability refers to the tendency for peoples’ eyes to skim around web pages more than they would with a printed article. Related to this is the 10 second rule. What is the 10 second rule?

22. Which type of fonts work better online than print, Serif or Sans Serif?

23. Why is it a bad idea to use blue writing on a purple background?

24. Why is it useful for websites to use taglines with their titles?

25. Why is it a bad idea to use really long paragraphs?

26. Name one way you could you check for spelling mistakes?

27. How much slower do people read on the computer screen than print? 25%, 50% or 5%?

GIMP

28. What does the crop tool look like in Gimp?

29. Name two ways to resize an image in Gimp?
(2 marks)

30. What is the keyboard shortcut for undo?

(Maximum 38 marks)

Tags:

The first part of this specialism on good content focused on writing skills. I came up with four exercises which were designed to get the participants thinking about best practice in terms of writing for the web.

Exercise 1. Titles and taglines.

I split the group up into pairs and gave them three website scenarios (see below). I then asked the pairs to come up with titles and taglines for the websites. As previously explained in my workshop on content skills, a website’s title should be relevant and descriptive – and hopefully memorable too – and a tagline is important because it helps further explain what your website is all about. So the purpose of this exercise was to hammer home these points while getting the participants to think creatively about websites.

1. A friend of yours is starting a blog on nightlife and music in Georgetown. Can you help him come up with a title and tagline for his new site?

2. Adventure junkies, a new Guyanese tour company offering treks to Kaieteur Falls and more has just launched. It aims to attract a younger clientele with the promise of adventure and bargain prices. Can you come up with a catchy tagline for its new website?

3. The ministry of education wants to develop a new website which will help foster web development skills among young people in Guyana. The site will offer free tutorials on HTML, blogging, content skills, picture editing and plenty of links to free open source software. Can you help them come up with a name and tagline for the website?

The pairs then reported back to the group and me and together we critiqued their titles and taglines.

Exercise 2. Shortening paragraphs.

Because it’s physically harder to read online and people scan web pages more quickly than they would printed material (scannability), in general shorter paragraphs work better online. So to get the participants more used to the process of editing down and cutting out words I asked them to shorten these opening paragraphs from the following news stories by five to ten words:

Bald penguin given wetsuit to prevent sunburn
When Ralph the penguin lost his feathers it looked like he wouldn’t be able to swim with his friends at Marwell Wildlife – until he was fitted for a mini wetsuit to stop him getting sunburn.

Chinese women confuse immigration officers after cosmetic surgery
A group of Chinese women who travelled to South Korea for cosmetic surgery baffled immigration officers on their return home when their new looks did not match their passport photos.

Michael Jackson fans flock to see Egyptian model ‘lookalike’
Michael Jackson fans are flocking to a Chicago museum to see a 3,000 year old Egyptian model which looks remarkably like the late king of pop.

Exercise 3. Headline writing.

I then asked the participants to come up with headlines for these news stories. I stressed the importance of brevity, descriptiveness and relevance – clever and cryptic headlines don’t work so well online due to search engine optimisation and scannability.

I asked the participants to show me the headlines they came up with and we had a quick chat about them. I then revealed what the actual headlines were and explained why they were worked well as online headlines.

Exercise 4. Splitting up paragraphs.

Because readers are put off by long paragraphs – even more so online due to scannability and the fact that it’s harder to read on a computer screen – I came up with an exercise that would get the participants thinking about splitting up paragraphs.

I provided them with a travel feature on Guyana which I had removed all the paragraph breaks from and asked the participants to insert thir own paragraph breaks. We then went through the feature together discussing why the writer had put paragraph breaks in at certain points and seeing if they coaleasced with where they had put their paragraph breaks in.

Day 3 Morning – Beginning the Assignment

The project set comprised of making a short animation in which a character walks up to a car, enters, and drives off. I thought this was an apt choice of project as not only did it cover all the skills that the students had been learning (with the exception of lip-synching, which they had all mastered very well) but it also encouraged creative application of the skills they had learned. For example the car, in order to be animated more realistically, would need spinning tires – a use of the MovieClip symbol that I had not taught them, but could be figured out from what I had. The same goed for animating the character opening the door and getting in the car.

Most of the morning session comprised of me answering and questions the students had and assisting them with any problems they encountered.

Day 3 Afternoon – Further Reading Plus Inspiration and Group Assessment

In the afternoon session, whilst the students finished up their work, I introduced them to the popular website Newgrounds.com. Newgrounds is a web-based animation forum for animation mostly made in the flash environment. It is a completely user-generated content website, and so finding high quality animation can sometimes be difficult. However it is a great resource for seeing what the flash environment is capable of. Whilst the students worked I played a series of my personal favourite animations which showed various different styles and complexities of approach to animation.

I set a deadline for the projects to be completed, exported to Quick Time and on a memory stick for about 3:00pm. At this time I uploaded all the files onto the computer I had been using (which was hooked up to a data projector) and played the animations back for everybody to see. There were some impressive, creative responses to the project and I am very proud of the work the students did. Of course they are not quite professional quality yet, but for a week long project they did incredibly well. In addition they now have almost all the skills they need to, with enough passion for it, push the finesse of their animations toward professional quality.

I would like to take this opportunity to pass on my hearty congratulations to all the students who took part and to thank them for the opportunity to share my knowledge with them. It has been an absolute pleasure and I hope that got as much out of it (or even more) than I did.

I will include a list of resources and a few of the animations I showed my students in a further post at some point in the near future.

Day 3 Morning – MovieClips and Tweens

The first part of the morning was spent showing the class the two major tweens used in flash before CS4: Motion and shape. Tweens are a kind of shortcut for animation in flash. You put the object you want to animate in a position at the first and last frames you want to animate and flash does the rest of the work.

The students learned that a shape tween can only be applied to the area between two keyframes on a layer without symbols in them. Similarly, they learned that motion tweens can only occur between two keyframes on a layer that have only one instance of the same symbol in that frame.

The second part of the morning introduced the students to MovieClips. MovieClips are a type of symbol that instead of being a static graphic can be a looping animation. I showed the students how to put their lip-synched animations into a MovieClip and then animate that MovieClip using a tween.

Day 3 afternoon – Walk Cycles, Motion Guides and exporting to Quick Time

After instroducing looped animation using MovieClips I continued to show the class what a walk cycle was. A walk cycle is a looped animation showing a character walking. Making a walk cycle and then animation the movieclip with a motion tween is a great shortcut to get characters moving quickly and effectively.

We started off with a very simple walk cycle for a stick man – each arm and leg was a symbol, then each one was put on a seperate layer and animated using tweens in order to give the feel of a walk (even if it was very stiff and stilted). After they each had a simple walk cycle I got the students to break the arm and leg symbols up into forearm, arm, thigh and shin, so that the character would have working knees and elbows. I then got them to analyze somebody walking in order to find the best way to make the walk look realistic.

A lot of students at this point took the opportunity to use their lip-synched face animation as the head for their stick man. I commend their creativity.

Once everyone had a walk cycle completed, I showed the students motion guides. Motion guides are a line that can be paired with a layer in order to manipulate the path a tween follows – so that you can create a more diverse movement than just a straight line.

Finally, I taught the students the procedure for exporting an animation to the Quick Time .mov file format for use in video

The final part of the afternoon session was setting a quick one-day project for the students to consolidate the skills that they had picked up. Details to be posted in the day four post.

Day four will be posted up shortly.

This was a half-day session aiming to build on the blogging lessons from the main course. The idea being to build on the students’ basic knowledge and introduce them to

Tools of the trade

We used WordPress.com in the lessons, but there are other blogging platforms, each with slightly different features.

There are comparisons of the various services at Online Journalism Review and TopTenReviews.

Other useful services that we discussed include:

  • Facebook – a social network
  • Twitter – a flexible micro-blogging tool
  • Delicious – a ‘social bookmarking’ website
  • Google Reader – useful for reading blogs via their RSS feeds
  • Firefox and Firefox plugins – a web browser that is preferable to Internet Explorer in many ways and allows for customisation via easy-to-use plugins.

Blog promotion

Four key concepts:

  • Write good content
  • Post regularly
  • Link generously
  • Comment on other blogs

We also looked at the concept of using other social media profiles as outposts.

It’s worth bearing in mind the basics of SEO – incoming links, keywords in tags and titles, relevant anchor text and regular content are all good.

Also, while online interaction is great, you can’t beat meeting people face-to-face for making longer lasting connections and building relationships.

We also looked at more traditional ways to promote a blog – by telling people about it, adding the URL to email signatures/flyers/posters, etc.

Other tips

The following is a random selection of hints and tips aimed at improving your blogging.

Develop an editorial calendar that will allow you to plan blog posts over the year (including any lead-in/previews).

Consider guest posts:

  • Writing on other people’s blogs will introduce you to a new audience
  • Having others write on your blog will provide your readers with a fresh perspective, a new writing style and it’ll help spread the load of writing new content.

Group blogs are blogs with several contributors. Each contributor may have different topics, days of the week to post on. A group blog spreads the amount of effort required from each person, as well as providing a place for structure and support.

Involve your audience – blogs and social media allow audience engagement in ways that broadcast media do not. By interacting with your audience you can strengthen your relationship with them and learn what content they prefer.

While asking your audience and listenting to them is important, you should be wary of pandering to the vocal minority, whose views may not be representative of all your readers.

Statistics – your can use Feedburner and Google Analytics to discover what your readers (including the silent majority) respond to.

Mix up your blog posts – use video, audio, text and photos to provide a rich and varied experience for your readers.

Write like a person – blogs work well as a conversational medium. It’s much easier to converse with a person than a press release.

Know your target audience – build up an impression of who your readers are, what they like, how they get their information and so on. This will help you write for them. Getting out and meeting your readers face to face (ie at events) will help with this.

Comments guidelines – if you have a lot of people commenting on your posts and moderation becomes necessary, it can be useful to have comment guidelines in place. This will explain to people what behaviour is not tolerated and what action (editing/deleting posts and banning commenters) may be taken if they are breached.

Finally, the best way to learn is to look at other successful bloggers and their blogs and see what they do.

This morning workshop was split into two parts. The first part looked at finding and downloading images; the second editing and improving the images with the open source image editing programme GIMP.

We started with a quick exercise using a Google Image search to illustrate how easy it is to search and download all kinds of images from the web. I then explained that it’s not really sensible to take images from other people’s websites willy nilly. This is still a bit of a legal grey area but it is technically a civil infringement to take someone’s images from their website without asking their permission. (Useful links on the subject: http://forums.digitalpoint.com and http://answers.yahoo.com)

So, the only way to be sure you’re not being naughty is to A) use your own images or B) downloads images from a free image library – of which there are many. I then asked the students to search and download an image of their choice from one of these libraries.

In the second part of the workshop we looked at image editing. Photoshop is the obvious brand leader in this field but because we wanted to foster skill sharing in the most sustainable way possible we choose to go for a free alternative to Photoshop, of which there are many. We chose GIMP because it has a similar interface to Photoshop, is quick and easy to download and is relatively easy to use.

To save time we had already downloaded it but shared the link for downloading GIMP in case our groups wanted to download it onto their own computers. We also directed their attention to the GIMP user manual, explaining that, although it is very long, it contains simple instructions to all aspects of the programme.

After opening up the programme we demonstrated the two main windows: the toolbox and the image window. We then opened an image up in GIMP and demonstrated tools including the move tool, crop tool, scale image and zoom.

We then underlined the importance of Undo (Ctrl+Z) in using such a programme and explained how pixels work before getting our groups to resize their images to a specific size using two methods. The first method used the crop tool (remembering to adjust the ratio of the crop by clicking on fixed aspect ratio and entering the required pixel dimensions). The second way saw us creating a new window of the required pixel size and copying and pasting the image into it before resizing it with the scale tool, not forgetting to select ‘Keep aspect’ – or hold ctrl – to keep the dimensions of the image.

We then asked our groups to insert their resized images into their HTML CVs and their WordPress blogs as a new picture post.

After demonstrating how to flip and rotate images we looked at enhacing pictures using the Colour Tools.

WordPress Pumpkin

We asked the students to log in to their WordPress.com accounts and go back to the blogs they had set up the previous week.

In the HTML part of the course we looked at how to make static pages and link them together to form a coherent website. We explained that WordPress allows you to create static pages too and looked at the pre-existing ‘About’ page.

We edited this page to display information that was more appropriate.

We then created a second page called ‘Links’ and compiled a list of links to the other students’ blogs.

As well as being an exercise in creating pages and working with links, this gave an opportunity to look at how anchor text works and the difference between:

The first two being fine, if a little functional. The third being a good example of descriptive anchor text and the fourth being an example to avoid copying if at all possible.

This point was related to the idea of accessibility – allowing content to be accessed by as many people as possible. We also mentioned other examples such as using ‘alt tags’ to describe images.

We also the idea of transparency and being a good ‘Internet citizen’. For example, by being upfront about any reasons for bias (including potential or perceived), not representing yourself as someone else and crediting sources.

Next we ran through a list of recommended changes to a WordPress.com blog. The blog provided by WordPress.com is good but is generally considered to need certain initial tweaks, including:

  • Deleting the ‘links’
  • Updating profile information
  • Freeing up commenting
  • Adding social bookmarking buttons to posts
  • Changing the theme and sidebar widgets

Going through these changes with the students allowed us to provide a walking tour of the dashboard and the functionality WordPress offers.

Finally, we looked at ways of finding blogs and blog posts on any subject using Google Blog Search, Technorati and Ice Rocket.

(Pic is WordPress Pumpkin by Eric M Martin)