Wolverhampton City Learning Centre

St. Edmund’s Catholic School - Web Design session

Richard Anderson — Wed, 25 Jun 2008 08:50:18 +0000

Today, I’m working with Year 9 students from St. Edmund’s on a web design project. During the project, students will learn how to create a website using HTML for structure and CSS for styling. We will be using Dreamweaver for this project. A presentation, links and ideas for the session can be found in the “Web Design Resources” post.

Below are the student links for the session:

Reviewing websites

Review the site based on the following criteria - usability, accessibility, use of images, quality of text / content and navigation. Use the Diigo toolbar to annotate the site.

The sites to choose from are:

Colour Scheme generator

Colour Scheme Generator

Instruction for the students

During Day 2 of the project, you will start to design their own website from scratch. Here are main stages of the process:

Creating a folder structure for the website
Designing a logo for the site.
Creating a template for the site - how to structure tables for different navigational schemes - i.e. top/left primary navigation
Assigning ids to page elements
Creating styles in a stylesheet to modify the presentation of these page elements
Creating the pages of the site
Linking the pages together

You will then add content to the site. We will look at optimising images for the web and using ¨classes¨ to float page elements so that text can wrap around them.

Jing Screencasts

These screencasts talk you through the main stages in setting up a template in Dreamweaver (each will open in a new window)

Using tables to structure a web design

If you continue to develop your skills in web design, you will eventually abandon the use of tables for laying out sites, and move instead to using CSS stylesheets for layout as well as presentation. However, learning to use tables for layout is a good first step. Here is an image to illustrate the tables used to make a top navigation layout and a left navigation layout.

Instruction for the students

During the project, students will design their own website from scratch. Here are main stages of the process:

Creating a folder structure for the website
Designing a logo for the site.
Creating a template for the site - how to structure tables for different navigational schemes - i.e. top/left primary navigation
Assigning ids to page elements
Creating styles in a stylesheet to modify the presentation of these page elements
Creating the pages of the site
Linking the pages together

Students will then add content to the site. We will look at optimising images for the web and using ¨classes¨ to float page elements so that text can wrap around them.

Jing Screencasts

These screencasts talk you through the main stages in setting up a template in Dreamweaver (each will open in a new window)

Using tables to structure a web design

Spring Term Review

Richard Anderson — Wed, 02 Apr 2008 08:07:03 +0000

The Spring Term was very busy at the CLC. In the shortest term of the year, the CLC worked with 12 Primary schools and 5 Secondary schools on a variety of projects.

Primary students took part in a series of visits to West Park where they engaged in history, environmental awareness and digital photography activities. They also participated in our highly popular Dr. Who Adventure Days, a highly interactive mix of problem solving, mind-mapping, design technology and adventure gaming.

Secondary schools were each involved in bespoke 3-day projects, planned in collaboration with teaching staff from the schools:

Moseley Park - Y11 - Poetry podcasting and Stop-frame animation in Maths
St. Peter’s - Y8 - Music and podcasting in GarageBand
Pendeford - Y11 - An Introduction to AS Media Studies for Y11: film-making, podcasting, web design
Deansfield - Y9 - Creating audio soundscapes and documentary films based around 20th Century conflicts
Moreton - Y11 - An introduction to web design

Somehow, we also managed to redesign our main teaching space, the Learning Studio!

Here are a collection of images from the Primary School West Park visits. For more images, visit the session gallery.

Training, Conference and Meeting Facilities

Richard Anderson — Mon, 31 Mar 2008 12:14:41 +0000

The CLC has dedicated training, conference and meeting facilities available to hire. Our facilities are available to book by Business, Local Authority and Community users. Full details of what is available, including a promotional video showcasing our facilities, are online now in the “Facilities” section.

The CLC Learning Studio is Transformed!

Richard Anderson — Mon, 31 Mar 2008 11:44:41 +0000

The Learning Studio, the City Learning Centre’s main teaching space for our work with schools, has been transformed during the Spring Term. The new design features:

Five large tables, purpose-built to each house six PCs and two 24″ iMacs
Completely flexible desk designs. Each PC is hidden within the desk, and can be lifted up individually or hidden again as required. The iMacs similarly hide within the desks and are lifted by a remote control system. This gives access to ICT resources on demand, while allowing non-ICT activities to be carried out on large, clear table surfaces
A permanent staging area with tiered seating and large screen

The redesign makes the Learning Studio a far more effective learning and teaching space, easing movement around the room, and facilitating collaborative or individual work, or group presentations.

Here are some shots of the transformation as it happened.

As it used to be …

Cleared and ready

Under construction

The new design

Deansfield War Audio Soundscapes - The Western Front, D-Day and Vietnam Jungle War

Richard Anderson — Sun, 16 Mar 2008 22:18:08 +0000

On Wednesday and Thursday last week, I worked with Year 9 students from Deansfield High School to create soundscapes based around three conflicts in the 20th Century. Students created audio diaries for front-line soldiers on the Western Front in World War I, the D-Day landings in World War II and Vietnam. The diaries were written from the perspective of men looking back on the events from 10 years later. They then mixed these with sound effects to recreate the atmosphere and emotional intensity of life as a combat soldier.

Click “Play Now” to listen to the podcasts, or right-click on the “Download” link and “Save Target As” (or your browser equivalent) to download them to your computer.

Pendeford web design session - 6th March 2008

Richard Anderson — Thu, 06 Mar 2008 09:06:58 +0000

Today, I’m working with Year 11 students from Pendeford Business and Enterprise College on a web design project. During the project, students will learn how to create a website using HTML for structure and CSS for styling. A presentation, links and ideas for the session can be found in the “Web Design Resources” post.

Below are the student instructions for the sessions:

An Introduction to Web Design

Here are the tasks for the day:

Task 1 - Reviewing websites

Review the site based on the following criteria - usability, accessibility, use of images, quality of text / content and navigation. The sites to choose from are:

Now

You will create a portfolio site to hold your media work over the coming year.

Task 2 - Designing a logo

Using Fireworks MX2004 you will design a logo for your chosen company.

Task 3 - Setting up Dreamweaver

You will now set-up Dreamweaver, telling the software whereabouts the files for your site will live. Here is a screencast talking you through the process of setting this up (opens in a new window):

Setting up a site in Dreamweaver (Jing screencast)

Task 4 - Modifying the stylesheet

The next task is for you to modify the CSS stylesheet for the website. This allows you to achieve a consistent design between pages. Think about the colour combinations you want to use. Try to select three main colours only. Here is a website that may help you:

Colour Scheme Generator

Task 5 - Adding content

Your final task today is to add content into the pages of the site. Be default, your site has four pages - you can add more as required. You should try to add, as a minimum, the following elements:

A link to an external website
3 new links to internal pages
At least 3 images
A table to position an image to the right/left of a block of text
A mailto: link for an email address

Use Clusty.com to find images to insert into your site.

Tomorrow, you will start to create your own site from scratch . . . .

St. Peter’s music and podcasting project - Session 3 podcasts

Richard Anderson — Mon, 03 Mar 2008 11:19:31 +0000

From Wednesday to Friday last week, three groups of Year 8 students from St. Peter’s CE Collegiate School visited the CLC to learn how to use GarageBand as both a music and podcasting tool. The students spent the morning using the loops in GarageBand and MIDI keyboards to create an original jingle of about 1 minute in length, then used this jingle in a podcast based around a topic in the Music curriculum. The podcasts from the second session are listed above. You can listen back to podcasts online by clicking on “Play Now” or download the podcast to your computer by right-clicking (ctrl-clicking on a Mac) on the “Download” link and “Save Target As”. Note that these podcasts won’t yet appear in iTunes. I will compile several together later this term, to prevent our listing in iTunes from being flooded with 27 podcasts in three days!

St. Peter’s music and podcasting project - Session 2 podcasts

Richard Anderson — Mon, 03 Mar 2008 11:13:23 +0000

From Wednesday to Friday last week, three groups of Year 8 students from St. Peter’s CE Collegiate School visited the CLC to learn how to use GarageBand as both a music and podcasting tool.

The students spent the morning using the loops in GarageBand and MIDI keyboards to create an original jingle of about 1 minute in length, then used this jingle in a podcast based around a topic in the Music curriculum.

The podcasts from the second session are listed above. You can listen back to podcasts online by clicking on “Play Now” or download the podcast to your computer by right-clicking (ctrl-clicking on a Mac) on the “Download” link and “Save Target As”.

Note that these podcasts won’t yet appear in iTunes. I will compile several together later this term, to prevent our listing in iTunes from being flooded with 27 podcasts in three days!

St. Peter’s music and podcasting project - Session 1 podcasts

Richard Anderson — Thu, 28 Feb 2008 09:27:04 +0000

From Wednesday to Friday this week, three groups of Year 8 students from St. Peter’s CE Collegiate School are visiting the CLC to learn how to use GarageBand as both a music and podcasting tool.

The students will spend the morning using the loops in GarageBand and MIDI keyboards to create an original jingle of about 1 minute in length, then use this jingle in a podcast based around a topic in the Music curriculum.

The podcasts from the first session are listed above. You can listen back to podcasts online by clicking on “Play Now” or download the podcast to your computer by right-clicking (ctrl-clicking on a Mac) on the “Download” link and “Save Target As”.

Note that these podcasts won’t yet appear in iTunes. I will compile several together later this term, to prevent our listing in iTunes from being flooded with 27 podcasts in three days!

Moseley Park Poetry podcast - “Vultures”

Richard Anderson — Mon, 25 Feb 2008 12:43:29 +0000

This podcast was created by four groups of Year 11 students from Moseley Park Technology College and is based around the poem “Vultures” by Chinua Achebe. It explores the themes of the poem, and is aimed at supporting GCSE English students studying the poem for their forthcoming examinations. The four original podcasts have been combined together to create a single podcast exploring the poem from the different groups’ perspectives.

Remember you can can leave your feedback on the poem by clicking on the post title (”Moseley Park Poetry podcast . . “) and filling in the comment form. All comments are moderated (checked) before appearing.

Moseley Park Poetry podcast - “Night of the Scorpion”

Richard Anderson — Mon, 25 Feb 2008 12:40:44 +0000

This podcast was created by a group of Year 11 students from Moseley Park Technology College and is based around the poem “Night of the Scorpion” by Nissim Ezekiel. It explores the themes of the poem, and is aimed at supporting GCSE English students studying the poem for their forthcoming examinations.

Moseley Park Poetry podcast - “Limbo”

Richard Anderson — Mon, 25 Feb 2008 12:32:39 +0000

This podcast was created by a group of Year 11 students from Moseley Park Technology College and is based around the poem “Limbo” by Edward Brathwaite. It explores the themes of the poem, and is aimed at supporting GCSE English students studying the poem for their forthcoming examinations.

Moseley Park Poetry podcast - “The Island Man”

Richard Anderson — Mon, 25 Feb 2008 12:27:32 +0000

This podcast was created by a group of Year 11 students from Moseley Park Technology College and is based around the poem “The Island Man” by Grace Nichols. It explores the themes of the poem, and is aimed at supporting GCSE English students studying the poem for their forthcoming examinations.

Moseley Park Poetry podcast - “Blessing”

Richard Anderson — Mon, 25 Feb 2008 12:22:30 +0000

This podcast was created by a group of Year 11 students from Moseley Park Technology College and is based around the poem “Blessing” by Imtiaz Dharker. It explores the themes of the poem, and is aimed at supporting GCSE English students studying the poem for their forthcoming examinations.

Season’s Greetings from the CLC

Richard Anderson — Wed, 19 Dec 2007 11:33:16 +0000

The CLC staff would like to wish all of our schools, and their pupils and teachers, a very Happy Christmas. We look forward to working with you again in 2008. The Autumn Term has been very busy at the City Learning Centre. Students from 7 Secondary Schools, 21 Primary Schools, and 2 Special Schools, have attended CLC sessions during the term:

Secondary Schools

Parkfield High School
Parkfield High (Bilston)
Smestow Specialist Sports College
The Northicote School
Wednesfield High School
Colton Hills Community School
The King’s CE School

Primary Schools

Moat House Primary
Wood End Primary
Loxdale Primary
Holy Rosary
St. Bartholomews
Perry Hall
Grove Primary
Christ Church Juniors
Stowlawn Primary
Bilston Primary
Springvale Primary
Bantock Primary
St. Paul’s Primary
Long Knowle Primary
The Gifford
Parkfield Primary
Field View Primary
Warstones Primary
Ettingshall Primary
St. Martins Primary
Eastfield Primary

Special Schools

Green Park
Tettenhall Wood

Digital Imaging Showcase - Autumn Term 2007

Richard Anderson — Mon, 10 Dec 2007 16:35:28 +0000

During the Autumn Term, two groups of Year 10 GCSE Art students from Colton Hills Community College and The King’s School visited the CLC for three-day digital photography projects. Some of the imagery created by the students from both schools was stunning.

Here’s a showcase of some of the images created by the students:

[See post to watch Flash video]

You can also download an iPod video or 3gp (mobile phone) version of the film using the links above.

Colton Hills Digital Photography Project - Days 2 and 3: 5th-6th Dec. 2007

Richard Anderson — Mon, 10 Dec 2007 13:45:55 +0000

During the second and third days of the project, Year 10 GCSE Art students from Colton Hills Community School visited the urban centre of Wednesfield to take photos around the theme of “Natural and Manmade”.

Upon returning to the CLC, the students were shown a variety of techniques for improving their photos, from effective cropping to more sophisticated effects using adjustment layers and filters. The students then used Flickr.com to share and annotate their photos.

In the final day of the project, students created video portfolios of their work in iMovie, combining together music, photos and text to create simple, effective showcases for their digital imagery.

To see a selection of the students’ images visit the session album in the gallery or view a slideshow on Flickr.

What the teacher said:

Really well structured, excellent delivery (at a good pace and very accessible to the students). Challenging activities, but all managed to succeed and were very proud of the work produced. Some excellent photos and films have been prduced to use as part of an Art GCSE coursework unit.

Here are a few of the images:

Colton Hills Community School Digital Photography Project - Day 1 - 4th Dec. 2007

Richard Anderson — Tue, 04 Dec 2007 08:38:26 +0000

For the next three days, I’m working with Year 10 students from Colton Hills Community School on a digital photography project. We will be looking at the technical side of digital photography (shutter speed, aperture, using focus lock, depth of field) and at ideas for effective composition (e.g. the “Rule of Thirds”). As the students take, edit and evaluate their photos, they will publish them to Flickr and learn how to organise and annotate their photos online.

Here are the student activities for Day One:

Mindmapping - what makes a good photo?
A technical intro to how cameras work - aperture, shutter speed, depth of field, focus
A shooting challenge - students shoot photos around the CLC demonstrating low depth of field, high depth of field and focal lock
Uploading images to Flickr, adding new photos, creating sets, annotating and tagging photos
How to compose a photo - “the rule of thirds”, viewpoint, story-telling, simplicity
Walking into Wednesfield on a scouting visit for locations, and taking shots.

Resources

View a mindmap of some of the key concepts in “Effective Digital Photography”

Here is the presentation we will be using during Day 1:

| View | Upload your own

Smestow Y7 Kar2ouche Respecting Diversity: 20th - 22nd Nov 2007

Richard Anderson — Mon, 03 Dec 2007 16:11:48 +0000

From the 20th - 22nd Nov, three groups of Year 7 students from Smestow Specialist Sports College attended sessions at the CLC as part of their Citizenship / PSHE programme of work. During the sessions, students participated in a variety of activities - mindmapping, using the voting systems and using Immersive Education’s Kar2ouche software - to think about issues related to discrimination in British society. Students created soap opera stories in Kar2ouche to explore how real-life students might handle and combat discrimination in a school environment.

What the teachers said:

Pupils have enjoyed their learning experience. They have become more confident in using the computers. Pupils have learned more about discrimination and were able to put their experiences across. They worked effectively in groups and showed very good team work.

Very well presented, full of pace and students were engaged throughout.

Very well planned and timed. Good clear explanations with a suitable balance of instruction and individual/pairs work.

Wednesfield High School Digital Art/Animation project - Day 1 - 27th Nov 2007

Richard Anderson — Tue, 27 Nov 2007 08:39:40 +0000

For the next three days, I’m working with a group of Year 10 GCSE Art students from Wednesfield High on a digital art/animation project. The students will be using digital photographs taken in Wolverhampton City Centre to create a short film based around the concept of a journey.

Here is the sequence of activities for Day 1 of the project:

Using CCMixter to find Creative Commons-licensed music and GarageBand to edit it and add instrumental touches
Mapping out key moments in the music
Practising editing together a pre-prepared sequence in iMovie - syncing key moments in the music to changes in the visuals
Editing images in iPhoto ready for printing for creating stop-frame animations on day 2

iSub Open Day - 24th January 2008

Richard Anderson — Mon, 26 Nov 2007 14:27:18 +0000

On the 24th January 2008, the CLC is hosting a hands-on Open Day for Wolverhampton schools to see the dye sublimation printing systems distributed to UK schools by iSub Education. Dye sublimation is a new and exciting printing process that allows you to print onto a wide variety of substances, from ceramics to textiles, at low cost and in full colour.

Full details of the event and how to book a place can be found in the following PDF attachment (right-click on the link and “Save Target As”):

iSub Open Day flyer (PDF document - 140k)

If you have any questions about this event, please contact us.

Key Stage 3 Transformation Session Resources

Richard Anderson — Fri, 23 Nov 2007 10:16:01 +0000

On Monday afternoon, I participated in a session at the CLC on the ongoing transformation of the Key Stage 3 curriculum. I led a session on using technology to enhance learning and teaching. Lindsay Coleman, Secondary Headteacher Consultant, delivered a session on current eLearning initiatives in Wolverhampton. Finally, Rebecca Orszulan from Trinity Primary School shared some of the exciting work going in the school, work which has just seen the school being awarded the Runners-Up prize in the prestigious BECTA ICT Excellence Awards in the Best Whole School category.

After my session, a number of people asked if I could email details of the websites and software I had mentioned. In the best tradition of Web 2.0, I decided to publish them here instead! Where I’ve given an external web link (i.e. other than on the CLC website) I’ve written out the url in full, so that a printed version of this post will be a usable resource.

The presentation

Here is the presentation:

| View | Upload your own

From Slide 6 onwards, the presentation looks at projects at the CLC with Secondary Schools over the last three weeks. Details of each day of these projects can be found in the Session Reports section of the website (http://www.wolverhamptonclc.co.uk/blog/sessionreports)

Project 1 - The Northicote School Space Project

Zamzar.com (www.zamzar.com) is used to convert files from one format to another. One educational use of the Zamzar service in the extraction of videos from YouTube (which is generally filtered out in school). To extract videos from YouTube, simply paste the url of the video into the website. Once the video is converted, Zamzar send an email to your designated email address with a download link for you to download the converted video. I used the site to extract the “Top Gear turn a Robin Reliant into a Space Shuttle” video from YouTube.
Del.icio.us (http://del.icio.us) is a service for social bookmarking. Users can store, tag and share their bookmarks online. Del.icio.us also allows you to explore other users’ favourites, finding related sites that other’s have found useful
Creating a Scale Model of the Solar System (http://www.exploratorium.edu/ronh/solar_system/)
Senteo voting system for rapid assessment (http://www2.smarttech.com/st/en-US/Products/Senteo/)
Skype (www.skype.com) - as used during our online video link-up with Dr. Matt Kenworthy - is the leading internet telephony tool. It can be enhanced by using tools such as Call Recorder to allow the recording of conversations.

Project 2 - Parkfield High (Bilston) Web Design Project

Diigo (www.diigo.com) is an online tool for social annotation and bookmarking. Using Diigo, a group of students can colloboratively annotate a webpage or online document (e.g. in Google Docs). Tom Barrett, a Primary Teacher in Nottinghamshire, has written about his use of Diigo for Narrative Response with his class here (http://tbarrett.edublogs.org/2007/10/29/using-diigo-for-narrative-response/)
The Jing Project (www.jingproject.com) is a tool for recording screencasts and annotated screenshots. The tutorial videos I recorded during the sessions with Parkfield High (Bilston) are linked to from my “Web Design Resources” post.

Project 3 - The King’s School Digital Imaging Project

Flickr (www.flickr.com) is the best online image sharing application on the web. You can upload, share, annotate, comment on images, and map them to their location using Yahoo Maps. If a set of users tag their images with a unusual, unique tag, you can then find all of the work connected to a particular project by simply searching for that tag.
Slideshow of the King’s School images is here - www.flickr.com/photos/17957693@N08/sets/72157603195842665/show/
Picnik (www.picknik.com) is an online tool for editing uploaded images or images from Flickr - think of it as Photoshop Lite on the web.

Other information / ideas / links

RSS (Rich Site Summary / Really Simple Syndication) is a technology to allow web users to stay up to date with new content on their favourite sites without having to visit them individually to check. Probably the best explanation I’ve seen of getting started with RSS is the video here (http://www.commoncraft.com/rss_plain_english).
“The Long Tail” is a term coined by Chris Anderson to describe the move from a world of “hits” to a world of niche content distributed via the web. I’ve written an article of the implications of Long Tail thinking for education here (http://www.wolverhamptonclc.co.uk/2007/10/16/the-long-tail-in-education/)
A revised version of Bloom’s Taxonomy including “Creating” as the highest order skill - http://projects.coe.uga.edu/epltt/index.php?title=Bloom’s_Taxonomy
Marc Prensky, author of “Don’t Bother me Mom - I’m Learning” - www.marcprensky.com. You can also see Marc’s talk at Handheld Learning 2008 at http://handheldlearning.blip.tv/ (scroll down the list of sessions on the right hand side - fourth link from the bottom).
Podcasting is the creation and distribution of audio (or sometimes video) files via the web. Users subscribe to content using RSS (see above) so that new episodes are automatically pulled down onto their computer for playback or syncing to an MP3 player. Parkfield High Tempest podcast can be heard here (search for “Parkfield High” on this site). Tools for creating audio podcasts on Windows include Audacity (free) - http://audacity.sourceforge.net/ - and Podium (very easy, not free) - http://www.podiumpodcasting.com. Mac users have GarageBand, installed on any new Mac, or available as part of iLife (http://www.apple.com/uk/ilife/)
Examples of Wolverhampton podcasts at www.learning2goblog.org
Stop-frame animation tools include Giant Screaming Robot Monkeys (free) - http://www.giantscreamingrobotmonkeys.com - for Windows and iCanAnimate for Mac - www.kudlian.net. Highfields school geography animations are on the CLC site (search for “Highfields animation”).

Dr. Who Adventure Days

The idea of using computer games to stimulate creative writing borrows heavily from the work of Tim Rylands (www.timrylands.com)
Game was created in MissionMaker (www.immersiveeducation.com/missionmaker)
“David Tennant” was created using Crazy Talk (www.reallusion.com/crazytalk/)

Other things to mention

Box.net for sharing files on a blog / website
Slideshare (www.slideshare.net) for sharing your powerpoint presentations on a blog / website
Lindsay showed the “Shift Heppens” powerpoint presentation - http://www.slideshare.net/jbrenman/shift-happens-33834. Download it here - http://www.slideshare.net/jbrenman/shift-happens-33834/download.

| View | Upload your own

Stunning digital images from The King’s School

Richard Anderson — Fri, 16 Nov 2007 13:11:26 +0000

Over the last three days, a group of Year 10 boys from The King’s School have been working with the CLC to learn basic and more advanced techniques in digital photography and image editing. The students took photographs around the Wednesfield area, and enhanced the images using image editing applications.

You can see some of the beautiful images captured by the students in the Session Album for the project. You can also view a slideshow of the images on Flickr.

Here are three of the images to get you started:

Congratulations to the students on the quality of their finished work.

The King’s School - Digital Photography Project Day 3 - 15th Nov 2007

Richard Anderson — Fri, 16 Nov 2007 13:03:10 +0000

During the last day or our three day project, Year 10 students from The King’s School learned more advanced image editing techniques - using the Channel Mixer to convert images into monochrome, and using and editing adjustment layers to affect how filters are applied to photographs.

The students then used iMovie on Mac OS X to combine together their best images with music and text to create a video portfolio of their images.

Here are some of the finished images:

You can see a larger collection of images in the gallery section.

Alternatively, you can view a Flickr slideshow of some of the best images.

The King’s School - Digital Photography Project Day 2 - 14th Nov 2007

Richard Anderson — Wed, 14 Nov 2007 15:48:21 +0000

Today, Year 10 students from The King’s School visited Wednesfield town centre and canal to take photos. Using the skills and techniques that the students had learned during Day 1 (modifying Depth of Field, ideas for composition, using focus lock etc.) the students worked in pairs to take a series of shots.

We then looked at methods of streamlining workflow, rating images on a 5 point star system to decide which images were worthy of further development and editing. Students then carried out simple image editing tasks - modifying the histogram, curves and saturation and cropping images to improve composition before uploading their edited images to Flickr.

Here are some of the resulting images:

The King’s School - Digital Photography Project Day 1 - 13th Nov 2007

Richard Anderson — Mon, 12 Nov 2007 16:09:41 +0000

For the next three days, I’m working with Year 10 students from The King’s School on a digital photography project. We will be looking at the technical side of digital photography (shutter speed, aperture, using focus lock, depth of field) and at ideas for effective composition (e.g. the “Rule of Thirds”). As the students take, edit and evaluate their photos, they will publish them to Flickr and learn how to organise and annotate their photos online.

Here are the student activities for Day One:

Mindmapping - what makes a good photo?
A technical intro to how cameras work - aperture, shutter speed, depth of field, focus
A shooting challenge - students shoot photos around the CLC demonstrating low depth of field, high depth of field and focal lock
Uploading images to Flickr, adding new photos, creating sets, annotating and tagging photos
How to compose a photo - “the rule of thirds”, viewpoint, story-telling, simplicity
Walking into Wednesfield on a scouting visit for locations, and taking shots.

Resources

View a mindmap of some of the key concepts in “Effective Digital Photography”

Here is the presentation we will be using during Day 1:

| View | Upload your own

The Jing Project - screencasting made simple

Richard Anderson — Fri, 09 Nov 2007 10:12:29 +0000

While teaching Web Design to Key Stage 4 students, I’ve spent a lot of time this week with The Jing Project, TechSmith’s new (free, for now) screen capturing software for both Windows and Mac. From their website:

The concept of Jing is the always-ready program that instantly captures and shares images and video…from your computer to anywhere.

I’ve used other screen capturing software to record tutorials to share with students (Adobe Captivate, for instance) but nothing I’ve seen has anything like the ease of use of Jing. It’s so easy to use that I actually recorded tutorials as I demo-ed ideas to students. Here’s a quick run through recording a screencast with Jing:

Jing sits silently in the background, ready to record:

I click the “+” symbol, and either click on the window I want to record or drag a selection box around the screen area I want to record. I then click on the Video button to start recording my screencast. Jing checks my microphone, gives me a quick countdown, and starts recording:

When I’ve finished my demo, I click the stop button on the recording toolbar. I can then share my screencast in several ways:

The “Share” option uploads the screencast to some free hosting at screencast.com and provides me with the URL to paste into my blog. It also allows me to embed the video inside my blog by providing HTML code to paste into a blog entry. The whole process is very simple.

The “Save” option allows me to save the screencast to my computer as a single Flash (swf) file. I could then easily upload this to the intranet/internet to share the screencast with colleagues or students, or insert the swf file into a Smart Notebook presentation.

The Jing Project can also be used to create annotated screenshots. It provides some basic tools to label up screenshots before sharing them via the web or downloading them to the desktop. I haven’t really played with this yet (I’m addicted to the fantastic Skitch on Mac OS X for screenshots).

All in all, Jing is amazing. Here is a complete list of the Dreamweaver tutorials I recorded this week (they will open in a new window):

I have only one note of caution. From the Jing website:

It’s something we want to give you, along with some online media hosting, to see how you use it. The project will eventually turn into something else.

To me, that read as “At some point in the future, we’ll probably charge you for this”. Am I cynical? No, the FAQs for the Jing Project actually make this clear (http://www.jingproject.com/faq.asp). The free hosting at screencast.com will only last for the duration of the project, so hold onto copies of your screencasts as swf files to potentially deploy elsewhere when the time comes. How long it will be before “The Jing Project” turns into “The Jing Product” is not clear.

Make hay while the Sun shines, and give Jing a try.

Bilston High Web Design Project Day 3 - 8th November 2007

Richard Anderson — Thu, 08 Nov 2007 09:06:10 +0000

Instructions to students

During Day 3, the final day of the project, you will continue to refine your template using HTML and CSS. You will learn the following:

How to use CSS to add borders, padding, and to change text alignment of parts of your design.
How to add page titles and why they are important (for search engines etc.)
How to use the a:hover attribute to affect the appearance of links when the mouse rolls over them.
How to control typography - font, line-height, and paragraph spacing - using CSS.

Generating dummy text (lorem ipsum) from lipsum.com will be useful in seeing how your design will look.

Once your template is complete, you will begin the process of adding content to the pages of your site. We will talk about writing style for the web. We will also look at optimising jpeg and gif images for the web.

Finally, we will create a contact form into the site using the free service at Emailmeform.com

Screencasts (added after the session: 08/11/07)

Here are the Jing screencasts I recorded during the session today:

Screenshot taken from a student-created website

What the teacher said about the project

The Centre had good resources. Short tasks helped my students throughout the project. I now have some great tools from the CLC which I can use with other year groups.

Overall: An outstanding learning experience for pupils.

Bilston High Web Design Project Day 2 - 7th November 2007

Richard Anderson — Tue, 06 Nov 2007 22:21:58 +0000

Links

Images of designs from day 1 are online on Flickr here.
A Colour Scheme generator

Instruction for the students

During Day 2 of the project, you will start to design their own website from scratch. Here are main stages of the process:

Creating a folder structure for the website
Designing a logo for the site.
Creating a template for the site - how to structure tables for different navigational schemes - i.e. top/left primary navigation
Assigning ids to page elements
Creating styles in a stylesheet to modify the presentation of these page elements
Creating the pages of the site
Linking the pages together

You will then add content to the site. We will look at optimising images for the web and using ¨classes¨ to float page elements so that text can wrap around them.

Jing Screencasts

These screencasts talk you through the main stages in setting up a template in Dreamweaver (each will open in a new window)

Using tables to structure a web design

Bilston High Web Design Project Day 1 - 6th November 2007

Richard Anderson — Tue, 06 Nov 2007 08:54:29 +0000

Over the next three days, I’m working with Year 10 students from Bilston High School on a web design project. During the project, students will learn how to create a website using HTML for structure and CSS for styling. A presentation, links and ideas from the sessions can be found in the “Web Design Resources” post.

Below are the student instructions for the sessions:

Day 1 - 6th November - An Introduction to Web Design

Here are the tasks for Day 1:

Task 1 - Reviewing websites

Using the tools from Diigo.com, you will review one website from the following list. Review the site based on the following criteria - usability, accessibility, use of images, quality of text / content and navigation. Highlight sections of the page that you wish to comment upon, and add sticky notes using the Diigo toolbar to record your opinions.

The sites to choose from are:

(added 06/11/07) Here is an image from Diigo showing student comments added to the Tally Ho Uniforms site:

Now

You will choose one of the following (fictional!) organisations, and will design a simple four-page site for them. You will use a template given to you by the CLC for this task. You will change the CSS (stylesheet) for this template to make changes to colours and fonts. Here are the organisations you can choose from:

The Royal Society for the Protection Of Lemmings
McDougall’s Fast Food Restaurant - the cheapest food in the West Midlands
JJC Sports - sports equipment suppliers

Task 2 - Designing a logo

Using Fireworks MX2004 you will design a logo for your chosen company.

Task 3 - Setting up Dreamweaver

You will now set-up Dreamweaver, telling the software whereabouts the files for your site will live. Here is a screencast talking you through the process of setting this up (opens in a new window):

Setting up a site in Dreamweaver (Jing screencast)

Task 4 - Modifying the stylesheet

Colour Scheme Generator

Task 5 - Adding content

Your final task today is to add content into the pages of the site. Be default, your site has four pages - you can add more as required. You should try to add, as a minimum, the following elements:

A link to an external website
3 new links to internal pages
At least 3 images
A table to position an image to the right/left of a block of text
A mailto: link for an email address

Use Clusty.com to find images to insert into your site.

Tomorrow, you will start to create your own site from scratch . . . .

Web Design Resources for Key Stage 3-4

Richard Anderson — Mon, 05 Nov 2007 14:33:38 +0000

As I’m working this week with a group of Year 10 students from Bilston High on a three day web design course, I thought I’d take the opportunity to collect together resources to support the teaching of web design to Key Stage 3/4 students (age 11 - 16).

My approach to teaching web design is basically this:

The use of Cascading Style Sheets should be encouraged
Using tables for layout as a starting point is OK (web design purists may argue with me on this one!)
Focus on clear, simple design, with obvious navigational elements
It is important to understand the basic principles of html, and to be able to interpret a limited number of html tags

Presentation

This presentation covers the basic principles of web design, including the history of web design

| View | Upload your own

Here is a mindmap of some key discussion points (Open a larger version)

(added 08/11/07) Jing Screencasts

These screencasts were recorded using the Jing Project during the three day project with Bilston High School from 6th - 8th November 2007. They lead you through setting up a site in Dreamweaver, setting up a template, and styling page elements using CSS. The screencasts will open in a new browser window.

Web-links

Here are a collection of web-links that students may find useful. I have used these sites repeatedly, to illustrate key points in web design.

Frysteel.com

A good site to show, for all of the wrong reasons. Frankly, the design of this is a disaster. I have no idea whether the company that owns this is still a going concern, but the site has remained unchanged for at least 3 years.

The Wayback Machine

The Wayback Machine is a time traveller through the history of the web. Enter the URL (web adress) for a site and you can see how that site looked at different times in the past. Answer questions like “How did the first version of the Google site look?”.

Here is the BBC site as it looked in 1997.

Web Pages that Suck

A slightly risque name for the site, but this is an entertaining look at all that is bad in web design. Visitors to the site submit badly designed sites, and Vince Flanders, the site’s webmaster, selects the “best” (i.e. worst) entries and shares his thoughts on them with the world. Sites that appear range from amateurish efforts from novice web designers to sites for major firms which suffer from usability problems or “Mystery Meat” navigation.

Jaws Screen Reader software

Accessibility to people with disabilities is a key consideration in modern web design. Jaws is a piece of software that reads the screen, so computer users with limited vision can still interact with websites. The full version of the software is very expensive, but a demo version, limited to 40 mins. of use per session, can illustrate some of the issues. Try visiting Frysteel.com (see above) using Jaws . . . . . . silence . . . . . the site is completely written in Flash, so Jaws can’t “read” it.

Web Design Inspiration - a photoset on Flickr

This is a great use for Flickr, collecting together images of superb web designs. Most of the designs are HTML / CSS based, rather than Flash-based.

The CSS Zen Garden

The CSS Zen Garden is an illustration of the power of CSS to style webpages. Each link on the front page completely restyles the site by only changing the stylesheet i.e. the HTML remains the same. Some very talented artists have worked to create a series of stunning designs.

Wikipedia for schools

Richard Anderson — Sun, 04 Nov 2007 17:06:49 +0000

Wikipedia is a great (OK, unbelievably incredible) resource, but as anyone who uses it regularly knows, not all of the content is entirely suitable for educational use, either because it is more adult in nature, or too complex or expansive to unpick for school use.

Now we have the 2007 Schools Wikipedia Selection, a collection of Wikipedia articles that would amount to a 15-volume encyclopedia, handpicked for their relevance to the UK National Curriculum.

It’s worth pointing out that the articles have not been completely rewritten for school use, so the language and terminology in them is still aimed at a wider audience. However, they have been checked and tidied up, “cyber-vandalism” has been removed, and they aren’t editable by the Wikipedia community, so will stay “as is” until the selection process is repeated.

It’s great to have this relevant, quality content together in one place.

By the way, you can also download the entire selection from BitTorrent (with full-size images) or via HTTP (with thumbnail images). You can then deploy the articles onto your own PC or intranet. Details are on the SOS Children’s Villages website.

The Northicote School - Space 2 day project - Day 2 - 31st Oct. 2007

Richard Anderson — Thu, 01 Nov 2007 09:16:55 +0000

During Day 2 of their space project, Year 9 students from The Northicote School participated in the following activities:

A research / analysis exercise based on the Moon Landing “hoax” (the idea that the moon landings in the late 1960s / early 1970s were faked and were filmed in a Hollywood studio). How do we evaluate evidence?
Surviving in Space - How do you sleep in space? How do you go to the toilet in space?
Exploring the International Space Station using the Virtual ISS simulator
Designing and building Mars Landers to safely landed an egg dropped from a height

At the end of Day 2, we carried out a video link-up with Dr. Matthew Kenworthy, a British astronomer working at the University of Arizona in Tucson, USA. Dr. Kenworthy is part of a team of astronomers seeking to take images of planets orbiting stars other than our Sun. You can watch the interview, or download an audio version or mobile phone (3gp) video version, from the following page in our podcast section:

The Northicote School speak to Dr. Matthew Kenworthy

Here are some other links you may find useful:

What the teacher said:

Excellent! Excellent presentation - able to keep the group focussed throughout. Lots of activities, including hands-on. An outstanding learning experience for pupils.