This is the eighth in a series of posts on Agile Learning Design:
- Post 1 - Agile Design: An Ethos for Creating Learning Platforms.
- Post 2 - Planning in Agile Learning Design
- Post 3 - Orientation in Agile Learning Design
- Post 4 - Designing Agile Learning
- Post 5 - Selection in Agile Learning Design
- Post 6 - Agile Learning Design: Tools for Learners
- Post 7 - Iterations in Agile Learning Design
I was going to close this series out with a mind or concept map of agile learning but after a few attempts I decided that there must be a better way; besides, been there and done that. So I decided to create a Periodic Table of Agile Learning:
click to open
It differs somewhat from the normal periodic table as the main group is the far left column and then the major themes (sub-elements) of each major element is listed in the row next to it. The columns basically keep to the same theme. Thus it is probably more like a matrix than a true periodic table, but I claim poetic licence.
I hope you enjoy it as much as I did creating it! - Don
6 comments:
Knowing you, you have probably posted a 'how to' sometime before on the method of making a periodic table. Is it possible for you to give some pointers?
I'll make you a deal - you give some pointers and I'll make you a periodic table based on a subject area of your choice?
It's a great idea, anyway. Thank you for this, it's inspirational.
DOWNLOADING
If you want to play around with the code, go to
http://www.knowledgejump.com/agile/ and download:
1. jpg files number 1 to 65 (these are the pictures and texts of the 65 elements
of agile learning that pop up when you hoover over an element).
2. The blk.jpg file. This is the picture that is replaced by one of the other 65 jpg files when you hoover you mouse over it. If you use a different color background, white for instance, then you want to recolor this white.
3. The html source code file - periodic.html
4. The stylemain2.css file. This is the cascading style sheet that tells the html file how to display some of the text.
Note that most of the pictures I got from iStockphoto.com, thus you can't reuse them. The exception is a couple of pictures that belong to me, such as the Sound Wave drummer, forklift, charts, and the computers on the desk (feel free to reuse them), and a couple of Army pictures (7 and 36).
HOW THE CODE WORKS
1. Its all done in HTML with a little bit of javascript.
2. The javascript is on lines 24 to 37 in the html file. Basically, the only thing you have to change is the line that starts with "preloadimages". And if you do change them, they have to be in order. Thus the code tells the PC to preload the black image first and then in order, the other 65 images.
3. The periodic table of course is done by using html table code. The first cell in the table is on line 45 and is for the element "Learning." If you read through the line it has the command "onmouseover" and tells the PC to replace the black image (blk.jpg) with [1], which means "1.jpg".
4. If you look through the code, the table is in numerically order with the images [1] through [65]. That is, it starts on the top and works left to right.
CREATING THE IMAGE FILES
1. The pictures and text that pop up when you hoover over an element were put together in PowerPoint.
2. I first created the black image in PowerPoint. Actually I made it white the first time so when I tested it in the table I could see how it fits. I copied and pasted it into PhotoShop (you can use about any image editor). After doing a few tests I determined that the best size for my table was 476x169.
3. I then created 65 slides and copied the black image from the first slide and pasted it on to the other slides. You now go through them one at a time and add your images and text.
5. When finished, copy the "element" from PowerPoint and paste it into Photoshop. Then select "Save for Web and Devices" under the "File" menu, in order to get as small as file as possible. I used the preset of "JPEG HIGH" as anything lower made the text blur. I entered 476 into the width (it automatically set the highth as 169) and then saved it.
6. Note that when you copy the next image from PowerPoint you can paste it right over the last image in Photoshop and then repeat the "Save for Web and Devices."
HOW TO GET STARTED.
1. Its best to start with a clean HTML sheet.
2. Create the table size you need and then populate it with your elements.
3. Create the pictures using PowerPoint and image editor.
4. Copy the "head" information from my html file to yours.
5. Edit the "preloadimages" to match the number of elements in your table.
6. Copy the "onmouseover" command from my html to yours for each element in your table. Dont forget to edit the image numbers ( [1], [2], [3], etc. ). Don't forget to put the /a command after the paragraph in the table cell for each element.
Let me konw if you have any questions.
Hi Don
Great post, content and innovative method.
thanks for sharing
Mike
Thank you mike, I'm glad you like it!
Wow! This is a very cool resource ... great job, Donald!
I came across this on the BCS Web site — really like the periodic table.
I recently became a ScrumMaster and, as a training project manager, have been thinking quite a lot about Agile learning.
Thanks.
Post a Comment