Let me have a blog

In this time, we attend to a explosion of e-learning and the e-learning tools, the time of HTML editors is finished. Now the if you only focus to content authoring, you don't need web programming knowledge, new tools called "Rapid Learning" can do it for you.

eXeLearning

eXeLearning is a free tool for course authoring, you can edit the content using "MS Word" like editor, inserting JAVA, autoevaluation quizz, custom text, activities, etc... All that you edit is stored in on file (as MS Word .doc), then when you finish, you can publish the content as SCORM, LMS or simple web content in a zip. You can change the templates, and it is very easy to use.

WebSoft Courselab

With Courselab you can make the content with an interface similar to PowerPoint, inserting animated tutors, tests, SCORM progress. The content is order by slides. When you insert text, external files, etc... you decide where you put the content in the screen.

Finally you can publish the content as SCORM package or web site. You need a free code registering in the web of Courselab.

Camtasia Studio 3.1.3

Techsmith has decided offer this old version of their program of screen capture, free, you only need a free registration here and you get the licence in your e-mail. With Camtasia you can record the screen, insert tags, markers, set an index of the content, export later to quicktime mov, avi or Flash. Download.

Labels: e-learning

This service allows upload Flash files for sharing games, animations, etc... But we can use it for upload our screencasts made with Jing, Captivate or Camtasia and share with the community.

The upload doesn't require registration, it is totally anonymous, or if you want it, you can register and upload the files using your alias name.

Also it is easy upload files as public or private access, you can attach directly in your web the uploaded file or link to the page. Now you can share screencast with anyone although you don't have a personal hosting service.

Sample of screencast attached or linked

Labels: e-learning, flash

I need one menu with horizontal accordion, but the plugins that I have looked doesn't like me, too much requirements or code, really I need something more simple, so in few minutes I write a simple plugin.

v0.1

It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default "header"), contentclass set another classname for content divs (by default "content"), contentwidth is the final with of each content panel.

HTHML Sample:

  .haccordion .header, .haccordion .content{
   float: left;
   height: 250px;
  }
  
  .haccordion .header{
   width: 20px;
   background: #ccc;
   color: #fff;
   cursor: pointer;
  }
  
  .haccordion .content{
   display: none;
   width: 0px;
   overflow: auto;
  }
  
  .haccordion .content p{
   margin: 5px;
  }

 

  
*1

  
This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

  
*2

  
This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

  
*3

  
This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

 

JavaScript Sample code:

  $(function(){
   $(".haccordion").haccordion();
  });

Demo:

Download jquery.haccordion.js code.

Labels: javascript, jquery, programming

Recently I have had a small dilemma, because I needed to load in a web page, a list of locations with the associated map image. Google maps is very good but overload too much the page with JavaScript, I only need images and not one complete map container because possibly the page need display ten or more map images.

I could read the Yahoo Map Image API, is perfect for my project because I only download a simple gif image, the problem is that, first, in the API help only we can see the output of the rest call in XML and PHP stringfy. This is a problem for me because the IP limitation of Yahoo and Google API's requires that in big projects must be the users that they query the API using JavaScript, because if I use the server, the API blocks the calls when I pass the max number of calls.

Well, using JavaScript I have two possibilities, call the API with XML responses (problem with XMLHttpRequest domain restrictions, it is neccesary a proxy and the same problem with the IP calls in the proxy server), or a hidden possibility with JSON responses calling with scripts tags (not AJAX).

Althought Yahoo Map Image API doesn't show any possibility about JSON, all REST API calls of Yahoo share the same parameters, so I tried the params "&output=json&callback=myfunction" and voilà I have the JSON response. With the callback function I can execute a function from my code receiving as params the API response.

The problem now is making multiple calls asyncronously to the API. The callback function doesn't know the related image for to associate the src url of the map image (or associate div). So I thought in one solution, this is a small code of a extension for load multiple map images by ID.

    var yahoo = {
      calls: new Array(),
      apikey: "YahooDemo",
      callImageApi: function(latitude, longitude, imgobj, iwidth, iheight){
        iwidth = (typeof iwidth != "undefined")?iwidth:"70";
        iheight = (typeof iwidth != "undefined")?iheight:"70";
        var index = yahoo.calls.push([imgobj, function(data){
          this[0].src = data.ResultSet.Result;
        }]) - 1;
        var miscript = document.createElement("script");
        miscript.src = "http://local.yahooapis.com/MapsService/V1/mapImage?appid=YahooDemo&latitude="
                       +latitude+ "&longitude=" 
                       +longitude+ "&image_height="
                       +iheight+"&image_width="
                       +iwidth+"&output=json&callback=yahoo.calls["
                       +index+"][1]";
        miscript.type = "text/javascript";
        head = document.getElementsByTagName("head")[0];
        head.appendChild(miscript);
      }
    }

With this HTML of example, we can call to the library using yahoo.callImageApi(latitude, longitude, imageobj, width, height):

      yahoo.callImageApi("36.8402","-2.46792", document.getElementById("test1"),300,300);
      yahoo.callImageApi("38.01504422431762","-1.1742335557937622", document.getElementById("test2"),400,400);

Download the example.

Labels: javascript, programming