Tuesday, 13 September 2011

10 Tech Tools for Teacher Training Courses

Over the summer I was running a number of two week ICT in language teaching courses for teachers from around the world. The courses were part of the Bell summer campus at Homerton College Cambridge. This was the first time in a while I had been asked to teach such long courses and i thought it was a great opportunity to see if I could fundamentally change the way the teachers related to technology, not just in the classroom as a tool for teaching learners, but as a tool within their everyday working practice.

As sub goals I set out to run the course with absolutely no paper. That meant no photocopied handouts and no paper based note taking from trainees. I wanted to push these teachers to the point where they could work totally in the digital medium and where paper became totally unnecessary.

I also wanted to use a form of loop input (using the technology to teach the technology) so that teachers were learning about the technologies they could use with students by actually using them for themselves.

I would like to add that this course took place in a computer room with 1 Internet connected computer per teacher.

What follows below is a brief outline of the tools I used to achieve this and how I used each tool.

TodaysMeet

TodaysMeet
This was my fundamental communication tool. It allows me to create an instant chatroom which I can use as a backchannel so that students can communicate with each other by text and contribute to the session or just socialise while I'm talking. More importantly though, it enables me to share links to websites and digital document without having to get students to copy complex URLs into their web browser address bar. I simply paste the URL into the chat and when they get the message they click on the link and the URL opens in a new tab in their web browser. I can also use it as a kind of audience response system to get opinions from the whole class and to allow them to type in questions that I can address later.
Penzu

Penzu
Penzu is a very simple web based private journal tool that I've been using for some time now. In this course I asked teachers to use it instead of taking paper based notes. Penzu is really quite minimalist and it looks just like a sheet of paper, but it stores and date stamps each journal entry and this makes it quite easy to find notes again from any computer as it is 'cloud based'. So this became one of the two standard tabs I asked the teachers to constantly keep open on their web browser. That way they could easily switch between note taking and investigating links and socialising with the class.
  • Here's a quick video showing how it works: Penzu
280Slides

280Slides
In place of PowerPoint and Keynote I used 280Slides to prepare and deliver the presentations I included in the course. 280Slides is really simple to use, stores the presentations online and creates a link and embed code so when I'm finished presenting I can instantly share the link with my group either by embedding it into a site or passing the URL through TodaysMeet.
  • Here's a quick video showing how it works: 280Slides

Delicious
During the course I shared a lot of links to background reading materials, useful follow up websites and blogs etc. The links were passed through TodaysMeet, but to make sure these links weren't lost I got the teachers on the course to create their own Delicious accounts to tag and store all the links so they could find them later on any computer. I also taught them how to add the bookmarking plug in to their browser tool bar. This really helped as it meant they could simply click on it and tag and save everything with just a couple of clicks.
SimplyBox


SimplyBox
Using Delicious for bookmarking articles etc was great, but for the Web 2.0 type learning tools I was introducing I wanted something more visual as a reminder, so I used SimplyBox. This is a simple to use tool which uses boxes in place of folders and enables you to grab an image from the site as a link back to it, rather than a title. The other great advantage of this tool is that you can share boxes and work on them collaboratively and anyone accessing the box can leave notes on each of the tools. I introduced this tool about halfway through the course by putting links to all the tools we had used in one box, and using this as a revision task, I got the teachers to leave teaching suggestions and notes about how to use each tool and what its strengths were on each of the bookmarks.

Posterous
I used Posterous as my basic publishing tool for the teachers to build blended learning materials on, you can get started just by sending an email with your blog content in the body of the email and any images, videos or audio as attachments. Very few of them had done any blogging previous to the course so this was a really simple tool to get started on and it handles all kinds of media such as video, documents and embedded objects really well. So as they were building examples of online learning they were also creating their own e-portfolio.
  • Here's a quick video showing how it works: Posterous

Jing
Jing was another of the core tools for the course. Initially I got teachers to use it to grab and annotate images of websites so that they could create detailed step by step notes of how to use various web tools. They then dragged the images into documents and uploaded these to their Posterous blog which formatted them into web based documents using Scribd. As the course progressed I moved the teachers on from making text and image based instructions to using Jing to make and upload video based screencasts of the websites. They could then bookmark these with delicious and later use them to show their students how the websites worked, or they could add the link to their Posterous blog which would automatically embed the video into the blog page.
  • Here's an example of a document uploaded to Posterous: Example
  • You can download Jing free from here
Wiggio
Wiggio
Towards the end of the course I introduced the Wiggio VLE to the teachers. Wiggio is a very versatile and quick to create online environment which has a rich variety of communication tools. Using this platform has enabled me to form working groups from the courses so that they can stay in touch with each other and me after the course and continue to share links, videos, documents and more importantly ideas. This is a great tool for building dynamic courses and adds much more social interaction than something like Moodle.
  • Here's a quick video showing how it works: Wiggio


Tricider
I used Tricider as my needs analysis tool at the beginning and my action research tool during the course. It's a very simple to use, but very versatile polling tool. You just create a question and add some options then share it with the people you want answers from. The great thing is that they can add extra options and add various pros and cons of each option as well as voting on the ones they like. This makes the whole process of polling much more open, social and interactive.
Here's a quick video showing how it works: Tricider

Firefox
Last but not least is the Firefox browser. I use this as a replacement for Internet Explorer. I find Firefox to be fast reliable and consistent and especially when working with Web 2.0 type tools it gives me very few problems. I can say none of this about IE which I often end up cursing whenever I have to use it in a training environment.
You can download Firefox from here

So, using this combination of tools I managed to deliver the complete course without using paper note books or photocopying any materials, and I feel at the end of it my trainees were the better for it as they had spent a week challenging their ingrained study habits and taking a step towards working in the kind of digital world
their students will probably be negotiating in their future. Most of all though they had a chance to actually use the tools in much the same way that their students will and to make and overcome the kinds of mistakes they will have to deal with students in class.

I hope you have found something interesting here and this article makes you think a little more about how you deliver teacher training in general as the use of these tools isn't just restricted to tech training. They could be integrated into the delivery of any language or teacher training course and to some extent I feel that until tech tools are integrated into mainstream teacher training we aren't going to get the quality and quantity of digitally literate teachers that we need to really provide a 21st century learning environment for our students.

Related links:
Best

Nik Peachey

Sunday, 4 September 2011

Unique Islamic Clock

an islam clock gadget
A very beautiful digital clock. You can choose custom colour for the background. very stylish. Please ensure your time zone for almost accurate time.


http://www.al-habib.info/

Friday, 12 August 2011

Add flash animated flying inside blog twitter bird button

flash twitter tweeter flt animated buttonAnimated Flying Twitter Bird Widget For Blogger. The bird flying animated effect by JavaScript Hack and when you scroll the page Up or Down, twitter bird will come in front of your page. The bird found itself as the "follow me" link on the Twitter account. If you move the mouse pointer over the bird, a "follow me" button and a "tweet this" button displayed. Based on Tweet this link I am divided this widget into Two types.



1.Tweet this Button with Unique tweet text in all your Blog pages {i.e, tweet text contains That you have Chosen}
2.Tweet this Button with Multiple tweet text in All Your Posts Pages{i.e, tweet text contains your Post title and Post Url}

==== Link ====
http://www.way2blogging.org/2011/01/how-to-add-animated-flying-twitter-bird.html

Monday, 8 August 2011

Add a slideshow photo video in your facebook or blogger

Make a video by adding photo from facebook or computer and post a slideshow photo video into your facebook or blogger

Nice one. You can make a video like a pro. Then you can add them in your facebook or blogger.

=== Link ===
http://tripwow.tripadvisor.com/

Sunday, 7 August 2011

Free Stylish Tab Widget

A Stylish Tab Widget / gadjet  using only HTML / Javascript, easy and no jQuery. But need some configuration in HTML / Javascript. Up to 5 tab and you can save space in your blogspot


### Start Copy except this line ###


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>


<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>


<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59"
class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 1  <!--TAB1 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB2 NAME-->   Tab 2  <!--TAB2 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB3 NAME-->   Tab 3  <!--TAB3 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB4 NAME-->   Tab 4  <!--TAB4 NAME-->
 
</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>


<!--TAB1 NAME-->   Tab 5  <!--TAB1 NAME-->
 
</center></b></font
class></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp;




<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 1 -->




<!-- Script Html Widget for Tab 1-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 2 -->




<!-- Script Html Widget for Tab 2-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 3 -->






<!-- Script Html Widget for Tab 3-->


</!—put></font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 4 -->




<!-- Script Html Widget for Tab 4-->


</!—put></font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">


<!—put your widget for tab 5 -->






<!-- Script Html Widget for Tab 5-->


</!—put></font>
</td></tr>
<tr>
</tr>
<tr>
<td
height 4=></td
height></tr></tbody></table></div></td></tr></tbody></table></div>
<br/><a href="http://adf.ly/2Puky">Grab This!</a><div style="text-align:right">
</div>




<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

### End Copy except this line ###


** Instructions Note**

* Copy and paste inside blogspot --> Design -->Add New Gadget

    * Find  

    <!--TAB1 NAME-->   Put the tab label here   <!--TAB1 NAME-->


    * Find
      <!—put your widget for tab 5 -->

      example paste HTML / Javascript content inside the tab

      <!-- Script Html Widget for Tab 5-->


      * The background are transparent. Please put some html code for font
        example for white font

        <!—put your widget for tab 5 -->
        <font color="#FFFFFF">
        example paste HTML / Javascript content inside the tab
        </font>
        <!-- Script Html Widget for Tab 5-->

         

        === Demo ===



        Tab 1

        Tab 2

        Tab 3

        Tab 4

        Tab 5
          
        Grab This!



        Note updated 2012 - Try this new improve tabbed widget with javascript

        Tuesday, 2 August 2011

        Orkut Scrap Animations

        Create Orkut Scrap Animations. Its contain gif files form the site. It can generate glitter words. Just follow the 3 easy steps given and copy the code

        Grab Yours Today!


        You can also direct copy this welcome text by copying the tag as follow
        copy the html code below:
         

        Thursday, 28 July 2011

        Disable Right Click on Blogspot

        Disable right click. Prevent copy function
        If you have quality content on your webpage and want to prevent people stealing your resources, you can add this script to disable the right-mouse click. This does not assure complete safety for your resources (there is always a way to copy them), but it is better than nothing.

        Sign in to your Blogger Dashboard -> Click on the Layout -> Add a Page Element -> Html/Javascript -> Paste the code below and Save the changes.

        copy the html code below: