Kind: Articles

traditional long form content: a post with an explicit title and body

Posted on
by

Assignment 3 – Comic Timing – #edtechcca3 « Ed Tech Creative Collective

Make a comic-strip style set of instructions for a practical task. The task you choose is entirely up to you. It could be something that relates to your subject area, or alternatively you can do something more generic like starting up and shutting down a computer, how to set an alarm clock, or how to use the office photocopier.

I’ve always liked making comics both with with pupils and for myself, a few years ago I made this set for my daughter when she went to university: Recipe Comics – a set on Flickr.

For this assignment I decided to use ComicLife on the iPad, I’ve used ComicLife on the desktop a fair bit but not done much more with the iPad app than quickly demo it. This looked like a good opportunity. I’ve been doing a fair bit of iPad workshopping this week, and one of the things I’ve been showing teachers is some map activities. These are based on ones I’ve carried out a few times with pupils on an iPod touch. Basically taking screenshots of the maps app and using them for Maths or literacy. So the comic was made with the techniques shown by the comic.

Comic map Ideas

Software Thoughts

Although there has been suggested web apps for each of the edtechcc assignments I’ve used desktop applications for the first two (Fireworks, audacity) and now an iPad app. I have used web image and audio editors in the past but never found a compelling reason to use them before a desktop app other than price. I am editing this post in TextMate and will post to my blog via the MetaWeblogAPI rather than by using a browser. The problem with browser applications is with, imo, workflow and integration with other application which is not as mature as desktop or as simple as iOS. ComicLife on a mac is a good example of this, easily showing your images to ad to your comic without having to upload them. Or TextMate, here to add an image to a post I drag the image from the desktop onto the document I am typing in, it uploads it to my blog and inserts the code.

Design Thoughts

I had planned to try planning a bit with pencil and paper for this assignment after watch other folk go through the notes/mind-mapping/sketching process. But again I just got started and played about as I went along. I’ve noticed my ‘planning’, if you call it that, occurs when walking, driving or doing some other activity so I have some idea of what I am hoping for when I sit down. No excuse really and I will try a bit harder on a future assignment.

There was not much thought in this one anyway, I’ve stuck to ComicLife defaults, perhaps over familiar but they do the job I think.

Posted on
by

 

It’s also highly important that students are offering feedback to their peers, and reacting to that feedback in a way that models good constructive criticism and improving upon ones work. Opening up students work to the web means that it’s not just the teacher that’s responsible for leaving the feedback and providing that extrinsic motivation for continued growth; it’s now on the shoulders of everyone in your learning community to help one another in a much more public and open way.

via techsavvyed.net

A great post: Four Recursive Practices for Teaching and Learning | The Tech Savvy Educator based on the No Digital Facelifts: Thinking the Unthinkable About Open Educational Experiences – YouTube video.
Lots of food for Formative Assessment thinking.
There is a lot of other great stuff in the post, best to read it all.

Posted on
by

The second assignment for Spring DS106 was to read this: A Personal Cyberinfrastructure and watch this: “No More Digital Facelifts: Thinking the Unthinkable About Open Educational Experiences.” and blog a response.

There is a requirement to read and watch both carefully but as I am taking this course a a college dropin I didn’t feel the need to take much care;-)

This is one of those videos/podcasts/blogposts that fire off lots of thoughts as you watch as it hits a lot of nails right on the head. I’ll only lazily touch on a couple.

The video is worth watching by anyone interested in Web 2.0 so I am imbedding it here:

Sounds Good

First thing I notices was the rhythm and musicality of Gardner Campbell’s voice. I’ve been listen to Tom Wordward’s remix A Bag of Gold « Bionic Teaching and used on Radio Edutalk a few times (that was a great idea). Gardner Campbell is a powerful, humorous speaker.

I guess the audience is familiar with the argument addressed, the tension between LMSs and the open web in US higher education. I an not but it sounds like the same sort of argument we have had in UK education between NLEs and WEB 2.0/google/open technologies, between systems set up for teaching and learning and more open and general software that can be bent to teaching and learning. Gardner Campbell defends the open with great humour and the marvellous bag of gold metaphor.

A Personal Cyberinfrastructure

In part Campbell is suggesting Students control their own domain, decide what sort of social software to install and manage it from themselves. As someone who has been doing this sort of thing for a while (here on this blog, personal wiki and a bunch of other stuff) I cn see where he is coming from and love the enthusiasm. I do wonder if it is for everybody. I am fairly relaxed about backing up, losing stuff and the like. I also host with someone who I know well and who has dug me out of a hole or two in my time.

If a student sets up, say, wordpress on their on domain they need to make sure they keep wordpress and any plugins up to date to avoid any wee hacking problems (FAQ My site was hacked « WordPress Codex) that can happen. You also might have to worry a bit about being fireballed or slashdotted if you ever write something the rest of the world want to read (More likely you will be hacked).

These are risks I am happy to take, given my host and the fact that I like playing with this stuff and don’t mind the time spent. If you value your time it might be preferable to head over to wordpress.com. (NB I am just using WP as an example, this blog is not a wp one, it runs off pivotx).

This leads into the though that there would need to be a fair bit of understanding by teachers and time for development if this was extended back into primary & secondary education. There is a lot of positivity about blogging in schools at the moment, this recent wave crested by Mr. Mitchell at Heathfield CPS Blogs in England (see the Heathfield in the News section) and a ton of blog work by the Glow Scotland team. I hope there is an understanding of the amount of knowledge and skill that goes into a good school blogging site, the time and energy needed to keep it going (a lot of support by Creative Blogs. in Heathfield’s case along with Mr Mitchell’s obvious energy and dedication). The pile of abandoned one, two and three post blogs out there suggests it might not be.

43 Minutes In

There is a question from the audience suggesting that this could be started earlier, this goes right primary school territory

there is an authentic version of any concept that can be taught to any child who can read and write. You pitch it to the appropriate level of development and then you keep coming back to it spiralling upwards and upwards and until that magic handoff moment… 45:46

The last section is really powerful pushing the need for teachers to help pupils make the decisions and on how using these techs in school could flow into higher education.

narrating curating & sharing

What learners should be doing.

Danger Edupunk

I have to be careful or it is down the youtube rabbit hole of edupunk videos, mostly of Gardner Campbell debating with Jin Groom, beware the related video…

Standard YouTube License

Be nice if this was a creative commons video.

If I had a bit more time & skill I’d like to popcorn this it would be a great one to some twitter video mashup, perhaps a hashtag could add the tweets as timed comments…

Posted on
by

Make two signs or symbols using a graphics tool of your choice. The first sign should be for your own department or course, the second sign should be for another educational department or course. Use only pictures, no words. Use only simple abstracted shapes, no photographs.

Assignment 1 – Signs & Symbols –#edtechcca1

I have made a fair number of web graphics & icons in my time but it has always been pretty haphazard and I’ve never been particularly pleased with the result. I do not think of myself as a particularly visual person.

Earlier in the week I’d read other participants blogs, Helen Morgan, an Art Photo and graphics teacher explained her working method and Colin posted An insight into his creative process as he started the assignment.

I don’t have a department, I work at The ICT & Technical Services Centre in North Lanarkshire, AKA the Computer Centre. By the time I started this Leigh Johnston whose department sounds like it covers the same area had blogged his assignment Assignment 1- #edtechcca1 which gave me some ideas.

Idea 1

Helen and Colin reinforce the idea of brainstorming and prep and both start by sketching (Helen on her iPad) and note taking. I don’t think sketching would help me much and I rarely write with a pen or pencil. I did the same thing as I do with pupils when they do not recognise a word, google images. I find this easier to get children to guess the meaning of a word than a word search. My mental list of words included, North Lanarkshire, Computer, Centre, media, ipad, cloud, network, files, podcast. network reminded me of a the images produced by Webpages as graphs – an HTML DOM Visualizer Applet and I thought of a computer networked to circles in the NLC logo colours, Helen & Leigh’s preliminary ideas reminded me of the NounProject, using that as reference I tried in Fireworks, to draw a laptop sitting inside 3 circles with lines connecting.

In NLC schools we use FirstClass as a email and communication tools so I decided to take the icon for that as inspiration for 3 figures inside the laptop, hopefully indicating community and support. I drew one with simple shapes, then tried to suggest a circle by duplicating and using the distort and skew tools.

Next I though I might use the circles as repenting aspects of the Computer Centre: a cloud, for the network again influenced by the fact I spent yesterday setting up iPads; media, a sort of copy of the media button found in iWorks and iLife mac apps; and files and folders. All were drawn with shapes and lines, the 2 that have multiple objects I added a white glow to separate the layers. After about an hour os so I ended up with this:

Computer Center

Computer Center 64

I was pleased that the gif came in at around the 12k mark but once I made an icon of this(64 pixels square < 4kb), I realised that it is far to complicated to communicate anything and decided to simplify, the quickest way to do this was to get rid of the footery stuff:

Computer Center Simple

Computer Center Simple 128Computer Center Simple 64 Computer Center Simple 64

Afterthoughts: Design

I know nothing about the principles of design, spacing, colour shapes and layout. I know I’ll never manage to read, understand and remember a lot of information on the subject, but I am sure I would be helped by reading a basic short guide. Preferably online and about a page of text.

Afterthoughts: Fireworks

I love Fireworks, I have a copy of Fireworks 8 which I got with a Macromedia Education Bundle a number of years ago. I’ve also got a CS3 version at work. I use it a lot, but in a pretty simple fashion. To do the above I use very few of fireWorks features: Ellipse Tool, Round Rect tool, line tool, align palette, Scale Skew and distort tools. Grid on. I worked in a few documents all 800 x 800 pixels and zoom a lot. I group and drag layers forwards and backwards. That is about it.

Doing the assignment I wanted to be able to do a couple of things I could not do:

  • I used mostly rounded rectangles, I adjusted the corners by hand, then duplicated to get the same corner on another shape, I’d like to know how to numerically adjust the corners?
  • I tried to get the 3 figures looking as if they were part of a circle. I used the skew and distort tools by hand. I assume there is a much better way to do this?
  • I drew the clouds with several circles, to cut off the bottom I grouped and converted to a bitmap then used the select tool. I think there is a better ay of doing this, but do not know it. I want to avoid the convert to bitmap bit.
  • As I mentioned above I used a glow effect to make layers the same colour stand out, I really wanted just to add a outline to a group of objects?

Afterthought: Part 2

Edutalk Fist new

I forgot I should have made a second image. I though I might redo the Radio Edutalk icon. I really like the idea of this, it was originally created for a TeachMeet presentation. It plays on the idea of EDUtalk as guerrilla podcasting. It is a bit rough round the edges, down to my lack of vector skills. So I grabbed a couple of icons from the NounProject to work with.

The first problem was these opened in illustrator, which I cannot drive, after a few minutes I though the learning curve might be a bit much so just copied and pasted from there into Fireworks. A quick select and rotate gave me this icon. I am quite happy with it and it is cleaner round the edges than the old one. I am going to play a bit more, trying to bring a broadcast or RSS element into the picture, but that is for another day.

Microphone by The Noun Project , from The Noun Project collection, Creative Commons – Attribution (CC BY 3.0)
Protest by Edward Boatman, Jay Demory, Tristan Sokol, Shirlee Berman and Doug Hurdelbrink from The Noun Project collection. published under a Public Domain Mark

Posted on
by

The daily create from today/yesterday was Create an audio of two sounds not normally heard together. I took two sounds that I had recorded for the UK Sound Map on Audio Boo. The result is:

While I don’t think the result is particularly creative or interesting I though the workflow was worth recording.

  1. Easiest way to download the mp3s from AudioBoo was to switch to the RSS feed in safari and right click the MP3 link and choose save as.
  2. Open One file in audacity.
  3. Import other file with File -> Import ->Audio…
  4. Fade out the first sound, as the second was so quiet in comparison I just left it in place. Deleted the section of the first track after the fade.

Busker to Beach Audacity 440

Bonus Image Merge

As Both AudioBoo, the source of the sounds and SoundCloud, where we were to publish the results, allow you to add a photo I thought it might be interesting to create an image fade to go with the audio.

Here is the recipe I used:

Opacity Gradient

  1. Open first AudioBoo page in Safari, view the larger image.
  2. Drag image onto FireWorks on the dock.
  3. Open second image and drag onto the first image in fireWorks
  4. Drag a rect in fireworks over the second image.
  5. Make it white and give it an opacity gradient.
  6. Select the gradient Layer & the Image below.
  7. Modify Menu->Mask -> Group as Mask
  8. Adjust the opacity of the masked image so that the image below shines through.

Busker to Beach Firworks 440

The whole process was pretty quick which is quite important as I try to keep up with the daily create.

Posted on
by

Jim at ted

After I saw Yamily Feud | Ben Harwood – DS106 – Spring 2012 I was thinking of the yams dancing at TED, as I already had Jim dancing I did this. It uses Ben Rimes’ ted template and Andrew Allingham’s ds106 radio poster/design.

I’ve also posted this in the ds106 category here but not the default, hopefully this will get picked up by ds106 but not go into my main feed. This will give folk who read ScotEduBlogs a break as DS106 hots up (If I manage to keep up the current activity rate).

Posted on
by

ED_Tech_Creative_Collective.mp3

This is my attempt at the Preliminary task for the Educational Technology Creative Collective collaboration.

The Educational Technology Creative Collective is

a collaboration of educators investigating and experimenting with digital technologies to enhance education. It is open to anyone (especially educators). The first iteration of #edtechcc will run for 12 weeks starting mid to late January 2012. Enrolment is now open

The ‘course’ was inspired by ds106 which the organiser Colin Maxwell took part in last year. Colin thinks Creativity is a good habit to get into. Make it a habit and creativity becomes easier..

There will be Assignments every week and online meetings every month. There is no requirement to complete all of the assignments. This is my response to Preliminary task #edtechccp1 Tell us something about yourself and what you hope to get from joining #edtechcc.

I have signed up for both this and ds106, I am expecting this course to be a little less strange and intensive than ds106 but not any less valuable. There are already a diverse bunch of folk involved. Much to the learning will be form ones peers on the course. I hope that I can learn to put some polish on my digital artefacts. Over the years I’ve published a lot of this sort of thing but it if fair to say I take a pretty quick & dirty approach to editing and production.

Posted on
by

A yam is Born 2

There seems to be two main components in ds106, one is a freeflow imagination and a willingness to follow ideas. Assignments seem to spring for the participants this one from Yamboat – Lisa’s ds106 experiment.

Although some of this stuff seems to be very light hearted, I was struct this morning how another one Fantasy TED Talks — MISSION: DS106 was picked up by Scott and is going to be used in his classroom as part of a project for his students.

Anyway I though I should try this yam assignment as I was completely at sea about how to start. I first I search the The Internet Movie Database (IMDb) for movies with am in the title, but found instead A Star Is Born.

Not being sure about copyright of old movie posters U though this would be a good point to start learning photoshop.the other component in ds106 is increasing skills with digital tools.

Photoshop

The early steps were pretty simple, photobooth myself with hands in roughly the right position. cut out hands with the magnetic magic want (this seems like a nice thing). Cut out Yam.

Next I decided to tackle the background, make a gradient, stick on some stars and spotlights, sounded simple enough. So I drew a rect for the background and then sent 15 minutes trying to figure out how to put a gradient on that.

I am afraid at that point I gave up.

Back to Fireworks

Switched to Fireworks 8. It seems to me, and I may be way off here, is one of the big differences between Fireworks 8 and photoshop is that layers in fireworks can have an area, photoshop they seem to cover the whole canvas?

Can’t day I am delighted with the quality of the work above, I quickly realised that getting things looking the way I imagine will take a bit more time & a lot more knowledge. Ended up doing things I could do quickly, masked the yam hands with my photoboothed ones, drew the suit by hand, dropped a few filters on to try and approach the red glow of the original, guessed the font and hit my self imposed time limit.

Next steps, try to get to step 2 in photoshop before switching, maybe read a tutorial.

Posted on
by

studying… by fazen
Attribution License

A couple of days ago I was reading Building the No English Words Translation Tool on Alan Levine's space for barking about and playing with technology he described how he was building a tool for ds106 Words With No English Translation with some JavaScript, as I popped on a comment I was reminded of http://iheartquotes.com/api an API for getting quotes. and had a wee play to produce Pics for Quotes (or a better title) a simple webpage that pulls in a random quote and then allows you to click on it to search flickr for the word clicked on. I wondered if this could be a ds106 assignment.

Alan comment back with some suggestions:

“Visualize That Quote”- rather than provide choices to pick from Flickr for each word; maybe random generate one image per word. The activity would be to illustrate/explain the quote in pictures with the least number of pictures required. The user could X out ones they did not need (and they would dissapear) and perhaps allow a click to generate a new random image to replace it. They would then do a screenshot to save their work? Perhaps generate a score where there is advantages to lower numbers of pictures and fewer image replacements?

I did a bit of work and got a basic implimentation of Alan's suggestions going. Alan then blogged about it again with some more suggestions:

  • See if it can skip unnecessary words like “a”, “the”, “of”
  • Be able to return a word if we accidentally click it closed
  • Tweak the css for thr “attribution” link at bottom (sometimes overlaps the license text)
  • Make it so when you hide the titlebars, it also hides the text of the words and the quote, to make it a true guessing game.

I've managed to make most of these changes and have a sort of working page: Visualize That Quote that has become a ds106 Assignment Visualize That Quote — MISSION: DS106

What Visualize That Quote Does

  1. Pulls in a random quote of less than 8 characters from the Quotes API and displays it.
  2. Searchs Flickr for a creative commons images to go with each word and shows one for each word.
  3. Allows you to swap out the images by clicking.
  4. You can reorder remove or hide images.

Here are a few examples I churned out without much though while testing this:

The DS106 Effect

It is great to get the quality of feedback and suggestion from a blogger I've read for years. The whole ds106 network is incredibly supportive even before the course has started. I started riffing off Alan's idea and was pushed and encouraged to improve something that started as a slightly pointless exercise to be come almost useful. This reinforces, for me, the power of blogging and commenting in learning. I've spend a few hours polishing something, learning as I went due to the community effect. I'd already had some of this in ds106 related posts. The current exchange has been particularly powerful becasue it was not just a well done, but a you could do this

Once I go back to work, tomorrow, I am not sure how much of ds106 I'll be able to keep up with as even before the spring course there is a fair flood of posts, but I'll give it a fair try.

I'll also be thinking a bit harder about how I comment on pupil blogs, too often it is easy to go for well doen and leave it at that.

How it Works

A mix of jquery, php & jQuery UI.

Part of the ds106 ethic seem to be to explain how something is done so that others can learn from it. My coding will not stand much of a critical eye, I am no programmer, but some folk might find this interesting or even useful.

The Quotes API will send json, but although that worked in desktop test I couldn't get it working on the web due to cross domin problems, I tried setting it to jsonp and that brought it in but I got errors trying to parse it with jQuery. Knowing very little about this stuff I side stepped it by pulling the json in with php so I could get that with jQuery's ajax stuff. Any jQuery/Javascript (and css) is all on the one page and you can have a look if you are interested by viewing the source of Visualize That Quote. It is not a pretty sight, as my method of coding is guess and check and google and guess and check. I have a tendency just to get things going and then push on.

This quote is put on the page, next javascript strips out all of the punctuation using:
str=str.replace( /[^a-zA-Z ]/g, '').replace( /ss+/g, ' ' );
Which I got from How can I strip all punctuation from a string in JavaScript using regex? – Stack Overflow. The script then pulls in html to show random flickr image via a php file which uses phpFlickr: randomFlickr you can see the code with some notes. I am recycling this from elsewhere (A flickr CC search toy). One the javascript has the code it puts it on the page.

More javascript swaps out the pictures for others when they are clicked.jQuery makes that pretty simple. jQuery UI handles all the dragging:

$("#flickr").sortable({
		handle: '.drag',
		revert: true
		    });

Which is pretty simple. I just copied that from the jQuery UI site.

Most of the other things are deal with my toggling their visibility with jQuery again: $('.attribution').toggle(); in this case this hides or shows the attribution for all the pictures, these are in a span with the css class .attribution.

How it could be better

  1. The flickr search could return json rather than html, this would give a better logic to building the set of images. I'd need to learn how to produce json with php and to process this with jQuery.
  2. Most of the work is done with simple functions, these are called from hard coded onclicks, the more common way to do this with jQuery seems to ad these with jQuery when the pages is loaded.
  3. Rather than expect users to take manual screenshots it should be possible to created composite images with the attribution and optionally the text stampled on. I've done a little of this sort of thing before (the stamp function of A flickr CC search toy) but this would streach me and google a bit.
  4. Alternativly an embed code that would embed a wee set of thumbnail pics and link to a full viewing of the creation. In both this and the last case I'd need to figure out what to do if a user reorders the images. In this case I might need a database.

Given the return to work tomorrow, all the fun I'll have on ds106 and Colin Maxwell's Ed Tech Creative Collective I am not sure if I'll get to this any time soon, but I've had a great time with this so far, if you are part of ds106 I hop you finf the assignment useful, I am very open to more ideas and suggestions.

Posted on
by

My first attempt at a ds106 assignment. I was reading Alan Levine’s post Building the No English Words Translation Tool about a new DS106 assignment Make The Untranslatable Understood the task is:

Use the Random Words with No English Translation tool to generate a word that could be better understood with a photo or image. Find a creative commons image or make your own, and include the word somehow in the image (using a desktop photo editor or web tool like Aviary or PicNIk). Then share it with someone and ask if it makes sense.

I click through a few and then got sidetracked (more about that later).

Today I reloaded the tool and Uitwaaien popped up.

“Literally, this Dutch word means to walk in the wind, but in the more figurative (and commonly used) sense, it means to take a brief break in the countryside to clear one’s head.”

I slightly disremembered this, thinking of head in the clouds which reminded me of the cover of On Having No Head: Zen and the Rediscovery of the Obvious by Douglas Harding. This lead me to this (click for larger versions):

Uitwaaien 440

and this:

Uitwaaien Crop 440

Checking images for the cover of On Having No Head it seems that my memory was faulty again, not quite how I remembered it. Not to worry.

One of the resions I am joining in with ds106 is to learn how to photoshop, having a fairly unused copy on my work laptop, but here I went for my comfort zome of fireworks 8 (the last one with a really good edu discount). I mostly use fireworks for cropping and maybe dropping the odd shadow but Feathered selections and transparent gradients in Fireworks 3 go me on the right track

Howto 8

I faded the head a wee bit too much but I know how to do it now. I had 2 photos ofthe same place one with me in it one without (Credit to my daughter Christine). I tool my head area out of the photo without me and cropped it to a wee rect round my head as a layer on the photo of me. I then masked the layer with a graident as per instructuions.