Tribal Labs http://www.triballabs.net Fresh thinking from Tribal Mon, 04 Mar 2013 08:00:59 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 http://www.triballabs.net/http://www.triballabs.net/wp-content/uploads/2011/03/triballabs_header_small.jpgTribal LabsTribalLabshttp://feedburner.google.com Panel: The Future of Enterprise Mobility http://feedproxy.google.com/~r/TribalLabs/~3/JAV3V0W8LKg/ http://www.triballabs.net/2013/03/panel-the-future-of-enterprise-mobility/#comments Mon, 04 Mar 2013 08:00:59 +0000 Ben Smith http://www.triballabs.net/?p=1456 Continue reading →]]> While attending Mobile World Congress (the GSMA’s annual trade show for the mobile industry) I was invited to participate in a webinar with experts from SAP and Microsoft on the subject of enterprise mobility.

We covered a range of topics:

  • What is the biggest challenge in the coming 12 months for enterprise mobility?
  • How should enterprises prepare for the mobile security challenges ahead? Is managing devices, apps, and information enough?
  • What is the most effective way to support the relentless pace of mobile devices infiltrating the enterprise?
  • How should organisations approach mobile enabling legacy apps and services?
  • How does the approach to BYOD and corporate issued devices evolving over the next several years?
  • What role will third party apps will play in the enterprise mobile ecosystem of the future?

A recording of the session (60 minutes) which was hosted by Brighttalk is now available:

Panel: The Future of Enterprise Mobility – Live from the Mobile World Congress | BrightTALKBenjamin Robbins, Principal, Palador; (moderator) Vishy Gopalakrishna, VP, SAP; Ben Smith, Head of Mobil Product, Tribal Labs; Rob Tiffany, Senior CATM Strategist, Microsoft

Embedly Powered

via Brighttalk

LinkedInDeliciousPrintFriendlyShare

]]> http://www.triballabs.net/2013/03/panel-the-future-of-enterprise-mobility/feed/ 0 http://www.triballabs.net/2013/03/panel-the-future-of-enterprise-mobility/ The Basics of Responsive D3 Charts http://feedproxy.google.com/~r/TribalLabs/~3/84yunD13ARI/ http://www.triballabs.net/2013/02/the-basics-of-responsive-d3-charts/#comments Wed, 27 Feb 2013 14:50:14 +0000 Ben Lowe http://www.triballabs.net/?p=1431 Continue reading →]]> d3.js Examples

d3.js Examples

I have recently discovered the d3.js (Data-Driven Documents) JavaScript library which can be used to create both traditional html content and amazing graphical visualisations directly from the underlying data of your page.  Today’s need to support the multitude of different end-user devices a responsively designed website is almost compulsory which relies on all content to respond appropriately to its container’s size.  Unfortunately the examples provided for d3 all use a fixed size.  This post shows how to create a basic responsive line/bubble chart.

Before we go any further it is worth mentioning that d3 is not (and probably never will be) supported by Internet Explorer version 8 or below.  It is supported in all modern, standard compliant browsers (including IE9+) and can be used as is using the Google Chrome Frame Add-On in IE8 and below (and only on 32-bit versions). There are a couple of projects to combine some elements of d3 with different graphics rendering that can work in IE8 and below but these are subject to other compromises.  In this post I’m falling back on the Google Chrome Frame.

 

Responsive d3 line bubble chart

Responsive d3 line bubble chart

Open the chart and full code here (or click the image above) and then resize your browser (or rotate your device) to see it respond to changes in size.

The code

Apart from the basic styling being applied, the line of interest in the heading is #5. This is the line that tells IE to use Google Chrome Frame if installed:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <style>
  html, body
  {
    height: 100%;
    margin: 0px;
  }
  body {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .circle {
    fill: red;
  }
  .line
  {
    stroke: blue;
    fill: none;
  }
  #chartContainer
  {
    overflow: hidden;
    width:100%;
    height:100%;
  }
  </style>
  <title>Responsive D3 Line/Bubble Chart</title>
</head>
<body>

The next section is optional and uses IE’s conditional comments to prompt the user to install the Google Chrome Frame Add-On if on 32-bit IE 8 or below (page will display fine in IE9+ and Chrome Frame doesn’t work on 64-bit IE):

<!--
  If IE8 or below then d3 will not work.
  Using the meta tag <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> to attempt to use Google Chrome Frame if installed.
  If not then if IE8 or below prompt to install Chrome Frame add-on (IE9 and above will run d3 fine).
  -->
  <!--[if lte IE 8]>
  <script>
    if (navigator.userAgent.indexOf("x64") != -1)
    {
      document.body.style.margin = 30;
      document.write('<h1>Page not available in this browser :-(</h1><p>Unfortunately this page requires IE9 or above to display.</p><p>You can view this page correctly in Google Chrome, Firefox, Opera, Safari or any other standards compliant browser.</p><p>An alternative is to use the Google Chrome Frame Add-On but this only works with the 32-bit version of Internet Explorer and you are currently using a 64-bit version.</p>');
    }
    else
    {
      alert('Unfortunately this page requires IE9 or above to display.\n\nYou can view this page correctly in Google Chrome, Firefox, Opera, Safari or any other standards compliant browser.\n\nAlternatively you can install the Google Chrome Frame Add-On into your current version of Internet Explorer (32-bit only) by following these steps...');
    }
  </script>
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  <style>
    .chromeFrameInstallDefaultStyle {
      width: 100%; /* default is 800px */
      border: 5px solid blue;
    }
  </style>
  <div id="prompt"></div>
  <script>
    if (navigator.userAgent.indexOf("x64") == -1)
    {
      window.attachEvent("onload", function() {
        CFInstall.check({
          mode: "inline", // the default
          node: "prompt"
        });
      });
    }
  </script>
  <![endif]-->

Now, finally, to the d3 code that sets up and updates the chart based on the resizing of the browser. Comments in-line:

<div id="chartContainer"></div>
  <script src="js/d3.v3.min.js"></script>
  <script>
  var padding = {top: 20, right: 20, bottom: 30, left: 50};
  var parseDate = d3.time.format("%d-%b-%y").parse;
  var sourceData, xScale, yScale, line;
  var prevChartWidth = 0, prevChartHeight = 0;
  var updateTransistionMS = 750; // milliseconds
  // create svg and g to contain the chart contents
  var chartSvg = d3.select("#chartContainer").append("svg")
  .append("g")
  .attr("class", "chartContainer")
  .attr("transform", "translate(" + padding.left + "," + padding.top + ")");
  // create the x axis container
  chartSvg.append("g")
  .attr("class", "x axis");
  // create the y axis container
  chartSvg.append("g")
  .attr("class", "y axis");
  // get the data
  d3.tsv("data.tsv", function(error, data) {
    // process data
    data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.close = +d.close;
    });
    // set the global data variable
    sourceData = data;
    // define the parts of the axis that aren't dependent on width or height
    xScale = d3.time.scale()
    .domain(d3.extent(sourceData, function(d) { return d.date; }));
    yScale = d3.scale.linear()
    .domain([0, d3.max(sourceData, function(d) { return d.close; })]);
    xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
    yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
    // declare a new line
    line = d3.svg.line()
    .x(function(d) { return xScale(d.date); })
    .y(function(d) { return yScale(d.close); })
    .interpolate("linear");
    updateChart(true);
  });
  // called for initial update and updates for resize
  function updateChart(init)
  {
    // get the height and width subtracting the padding
    var chartWidth = document.getElementById('chartContainer').getBoundingClientRect().width - padding.left - padding.right;
    var chartHeight = document.getElementById('chartContainer').getBoundingClientRect().height - padding.top - padding.bottom;
    // only update if chart size has changed
    if ((prevChartWidth != chartWidth) ||
      (prevChartHeight != chartHeight))
    {
      prevChartWidth = chartWidth;
      prevChartHeight = chartHeight;
      //set the width and height of the SVG element
      chartSvg.attr("width", chartWidth + padding.left + padding.right)
      .attr("height", chartHeight + padding.top + padding.bottom);
      // ranges are based on the width and height available so reset
      xScale.range([0, chartWidth]);
      yScale.range([chartHeight, 0]);
      if (init)
      {
        // if first run then just display axis with no transition
        chartSvg.select(".x")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(xAxis);
        chartSvg.select(".y")
        .call(yAxis);
      }
      else
      {
        // for subsequent updates use a transistion to animate the axis to the new position
        var t = chartSvg.transition().duration(updateTransistionMS);
        t.select(".x")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(xAxis);
        t.select(".y")
        .call(yAxis);
      }
      // bind up the data to an array of circles
      var circle = chartSvg.selectAll("circle")
      .data(sourceData);
      // if already existing then transistion each circle to its new position
      circle.transition()
      .duration(updateTransistionMS)
      .attr("cx", function(d) { return xScale(d.date); })
      .attr("cy", function(d) { return yScale(d.close); });
      // if new circle then just display
      circle.enter().append("circle")
      .attr("cx", function(d) { return xScale(d.date); })
      .attr("cy", function(d) { return yScale(d.close); })
      .attr("r", 3)
      .attr("class", "circle");
      // bind up the data to the line
      var lines = chartSvg.selectAll(".line")
      .data([sourceData]); // needs to be an array (size of 1 for our data) of arrays
      // transistion to new position if already exists
      lines.transition()
      .duration(updateTransistionMS)
      .attr("d", line);
      // add line if not already existing
      lines.enter().append("path")
      .attr("class", "line")
      .attr("d", line);
    }
  }
  // look for resize but use timer to only call the update script when a resize stops
  var resizeTimer;
  window.onresize = function(event) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function()
    {
      updateChart(false);
    }, 100);
  }
  </script>
</body>
</html>

The key lies in separating out all the code that doesn’t rely on the height and/or width and setting up these objects (or at least the applicable properties on those objects) just the once when first rendering the chart.

The objects and properties that rely on the width and height are then wrapped up in the updateChart(init) function which is called after the initial setup and also when the window resizes.

Follow me on Twitter

]]> http://www.triballabs.net/2013/02/the-basics-of-responsive-d3-charts/feed/ 0 http://www.triballabs.net/2013/02/the-basics-of-responsive-d3-charts/ SoLAR Storm webinar – Learning Analytics at Tribal http://feedproxy.google.com/~r/TribalLabs/~3/uwWkCI7UuWg/ http://www.triballabs.net/2012/12/solar-storm-webinar-learning-analytics-at-tribal/#comments Fri, 07 Dec 2012 10:20:43 +0000 Chris Ballard http://www.triballabs.net/?p=1409 Continue reading →]]> What are we up to with Learning Analytics?

SoLAR Logo

I had the pleasure of being asked by SoLAR (Society for Learning Analytics Research) to do a talk for the first “SoLAR Storm” open webinar on the work we are doing with Learning Analytics.

Storm is SoLAR’s distributed research lab which aims to “facilitate discourse around learning analytics and advance the quality of research in the field”. They hold open webinars on Learning Analytics on the 1st Thursday of every month with invited speakers from industry and research. They are a great way for those of us who work in the education technology business to engage with those involved with Learning Analytics from a more academic perspective.

I really enjoyed being part of the first webinar and thanks to all of you who took the time out to join the session. There was lots of discussion and debate and I received some really useful feedback.

One of the most interesting areas we discussed was what do we mean by student “success”? It is a term which gets used an increasing amount, and a number of Learning Analytics tools have been developed around the notion of predicting the likelihood of success. In order to build a model which can be used to predict success, it requires a definition of success which is quantitative. However, by its very nature “success” is a very qualitative term. I think we need a better definition of success as currently they are focused around academic success – whether the student is likely to achieve a pass or the average grade. We need to view success as a sliding scale ranging from course completion, whether the student passes the course, through to whether the student exceeds the expectation which has been set for them. Indeed I think we need to develop a view of success which takes into account other factors such as course satisfaction.

Have a look at the webinar replay if you want to find out more about what we are doing and have a sneak peak at some screenshots for our Learning Analytics prototype. Note you will need Java installed to replay the webinar. Click on the Playback > Play menu to start the session playback.

Here are the slides I presented during the meeting.

Tribal Learning Analytics R&D Project – SoLAR Storm Presentation from Chris Ballard

]]> http://www.triballabs.net/2012/12/solar-storm-webinar-learning-analytics-at-tribal/feed/ 0 http://www.triballabs.net/2012/12/solar-storm-webinar-learning-analytics-at-tribal/ Inspiring ways to create and learn with digital content http://feedproxy.google.com/~r/TribalLabs/~3/tehgRN36pCw/ http://www.triballabs.net/2012/11/inspiring-ways-to-create-and-learn-with-digital-content/#comments Thu, 22 Nov 2012 16:04:08 +0000 Anusha Iyer http://www.triballabs.net/?p=1397 Continue reading →]]> Every week, we host ‘Thought Thursday’ in our Cambridge office and this week we looked at some inspiring ways people are creating and learning with interactive digital content.


1. Kinected Stories

This is a beautiful way of complimenting real story books for children using Microsoft’s Kinect. As well as being both a novel and fun interactive learning tool, it also looks useful for young people who struggle with printed text.

2. Electrobiblioteka (E-Book)

This is a huge thesis that must have been challenging and super-exciting with loads of learning thrown in. Waldek (the student) has created an interactive paper book, yes you read right – a book made of paper, but it’s interactive. In the above example, one needs Kinect, whereas this one connects directly to web-based content and is triggered by the turning of its pages.

3. ThingLink

This is a web-based tool and app, that allows all types of content (video, URLs, text, etc.) to be embedded on an image. On the browser, when you roll-over what looks like a static image, you get ‘touch-points’ that pop out extra information. Instant referencing and meanings, anyone?

4. Popcorn Maker

This is interactive media taken to another level… Now it’s possible to embed interactive content within a video too! This allows the creation of a video – perhaps explaining the history of a location – with embedded media such as a Google map. This allows the viewer to interact with the map while the video is playing… Clever!

]]> http://www.triballabs.net/2012/11/inspiring-ways-to-create-and-learn-with-digital-content/feed/ 0 http://www.triballabs.net/2012/11/inspiring-ways-to-create-and-learn-with-digital-content/ Geoff Stead leaves the lab http://feedproxy.google.com/~r/TribalLabs/~3/i68Ok0A7we8/ http://www.triballabs.net/2012/10/geoff-stead-leaves-the-lab/#comments Tue, 23 Oct 2012 11:06:25 +0000 Geoff Stead http://www.triballabs.net/?p=1379 Continue reading →]]> Geoff presenting at TEDxSadly, this is my last ever post to our Tribal Labs blog.

After three exciting years as Tribal’s Head of Innovation, I am leaving.

For those of you who have only met me via this blog, I have a long history here that predates my current role in our Innovation team. I have been working in the same business in Cambridge for almost 20 years. Always championing technology as a tool for learning. Always innovating. Always creating new things. Constantly learning from others.

I’d like to thank the many colleagues, clients, and co-conspirators who have helped me on that journey. Challenging my thinking. Coaching me. Sharing skills and ideas. And helping to prepare all our users to be the learners and tutors of the future.

I’m leaving behind an awesome team, who will no doubt push this blog post of mine into history, with a constant flow of exciting new ideas from the lab:

  • Chris Ballard is doing great things with learning analytics.
  • Ben Lowe is championing HTML5 as well as touch interfaces.
  • Chris Whitehead, Jon Brasted, Mahdi Barakat and Jack Kierney are all plucking up courage to post about the awesome Azure, and mobile stuff they are working on.
  • Jo Colley , Jess Wakelin and Anusha Iyer may even be tempted to go public on our mobile content work (which rocks!).
  • Ben Smith will be leading all our m-learning product development.

But this blog is just the tip of the iceberg. The Tribal Labs team continue to do as many external projects as internal:

  • Our mobile learning platform is still growing, and is already being used by clients as diverse as the US Government (yes, really!), McDonalds UK, and training providers from Spain, to Turkey, to Norway! (If you want to join them, speak to Ben Smith)
  • Our open formats for m-learning content are gaining increasing traction with mobile learning creators, eager to share content to all platforms.
  • We are about to release an open source version of all the good bits. Watch this space for announcements about OMLET.
  • Our HTML5 framework looks likely to be rolled out to all government schools and colleges in NSW, Australia.

We’ve come a long way from Tribal’s first innovation team meeting, 3 years ago. Even further from our technical role in the world’s first international mobile learning project in 2001 (who said these things move fast?). The technologies may evolve rapidly, but the need for people like ourselves to harness them for good seems to remain constant.

So where are you going / what are you going to do next?

I am still doing learning technologies, still mobile learning. In fact, a LOT more mobile learning, as I am joining one of the mobile technology giants, Qualcomm, to become a mobile learning champion and thought leader for them. My base will still be in Cambridge, but I’m likely to be spending some time in the USA, as the majority of their people are on the sunny coast of San Diego.

So – yet another sign that mobile learning is here to stay, and truly global. Thanks to everyone who has helped us get there!

]]> http://www.triballabs.net/2012/10/geoff-stead-leaves-the-lab/feed/ 1 http://www.triballabs.net/2012/10/geoff-stead-leaves-the-lab/ Using Learning Analytics to improve the student experience http://feedproxy.google.com/~r/TribalLabs/~3/rbBySfwJ7Lw/ http://www.triballabs.net/2012/10/using-learning-analytics-to-improve-the-student-experience/#comments Thu, 18 Oct 2012 10:07:07 +0000 Chris Ballard http://www.triballabs.net/?p=1368 Continue reading →]]> Can Learning Analytics help to improve the student experience?

Yesterday I was asked to speak at the Higher Education Show in London about how higher education can engage with students through improved ICT. This is obviously a broad area, and there are many areas of technology which are changing the way that students are engaging with their university.

I decided to focus on an area which I think has the potential to transform the way that institutions support students: Learning Analytics.

Innovation - Learning Analytics - Data to help staff understand students better

8 out of 10 cats

Ask 100 students what they think student experience is, and you’re likely to get 100 different answers. However, there is likely to be commonality between the answers, and top responses are likely to mention good student union, social opportunities, good academic and personal support and the quality of their course and teaching.

Never before have prospective students been able to find out so much about what past student’s have thought about their experience at university. In the UK, the Key Information Set (KIS) and the recently launched Unistats website have made available data collected from the National Student Survey and the university to allow student’s to compare institutions and courses.

Most students have always wanted to do well in their course – they want to be successful academically and be given the opportunity to be the best that they can be. However, the changes to tuition fees and funding have changed the game. Many students will invest significant amounts of money in their education which they will repay over many years. As a result, the expectations they have of their university are much higher– they have become customers and they expect the university to provide support and services to enable them to be successful academically.

What is Academic Success?

What does it mean to be successful academically? Its about about the university enabling each and every student to reach their potential. The institution helps them to recognise what they could achieve and help them to reach their aspirations. Its about the student getting the support they need to help them achieve success. Its about recognising when things could go wrong, when they have gone wrong and offering the student help and support to resolve problems. So the support, services and systems which help a student be successful academically are at the heart of the student experience.

So, identifying problems early which may mean that a student is not going to be successful is important. It means we need to find a way to measure how likely a student is going to be successful and understand how their likelihood of success is impacted by their learning style, patterns and interactions with the university.

Learning Analytics at its heart is about using data you collect about students and their interactions to help you understand the progress that a student is making and make predictions about where they might end up. By collecting data about the student such as who they are and how they interact with the university and applying analytics to that data we can use it to

  • Identify problems to help steer students toward academic success and ultimately help students reach their potential
  • Provide personalised support, by providing staff and students with the right information much earlier
  • Provide a more personalised experience for the student

Data, Data, everywhere…

I love this quote from Eric Schmidt (Google CEO):

“Every two days we create as much information as we did from the dawn of civilisation up until the end of 2003” (Eric Schmidt – Google CEO)

Users of web sites, social networks and systems generate huge amounts data about their interactions. Analytics is increasingly being used to help provide better services to customers and make predictions to help target limited resources more efficiently. An excellent example of this that I gave in my talk is PredPol, which uses crime data which has always been collected by police forces to make predictions about where, what and when crime may occur.

In the same way, students leave a trail of data from their interactions with university services. Interactions with the library and VLE, attendance at lectures and workshops, social interactions on forums and social media is being held separately in information silos by most universities. If this data is combined it can be used to understand how patterns of engagement, preparation for higher education and social interaction are likely to impact on the student’s likelihood of academic success.

The Student at the centre

By using data and Learning Analytics we can tailor support to the student by identifying issues much earlier before they become entrenched. We can also provide information to students and staff which enable them to understand in what areas the student may be struggling.

Using Learning Analytics is not about replacing existing support staff or advisors. As one speaker in the session noted, students should be partners in their learning with the university. To provide effective support to students, staff need to get to know the student and develop a relationship with them. Learning Analytics is NOT about replacing that relationship with cold hard facts about how often they have logged into the VLE. Its about providing both students and support staff with additional information which can enrich the relationship and prompt support staff to ask the right questions. Its about helping to uncover areas of need which might otherwise not have been apparent. Ultimately, this should help institutions to provide personalised support to students which enable students to be successful academically and reach their full potential.

Here’s the full presentation I gave during the session.

]]> http://www.triballabs.net/2012/10/using-learning-analytics-to-improve-the-student-experience/feed/ 0 http://www.triballabs.net/2012/10/using-learning-analytics-to-improve-the-student-experience/ Mobile Learning: Mind the Gap http://feedproxy.google.com/~r/TribalLabs/~3/1FlVumPv-Hk/ http://www.triballabs.net/2012/09/mobile-learning-mind-the-gap/#comments Sat, 29 Sep 2012 09:14:01 +0000 Geoff Stead http://www.triballabs.net/?p=1354 Continue reading →]]> Is there a gap between mobile learning theory, and practice?

Last week I ran a strand at MobiMOOC 2012 exploring exactly this (for the uninitiated, MobiMOOC is an online, free to access course on mobile learning).

Together with my team, we have been deeply involved in mobile learning (both envisioning it and making it) for over 11 years. However, very little of that time has been spent in pure theory, so it was an interesting exercise mapping some of the current theories to live examples and then discussing with the attendees where the gaps lay (and how we might bridge them).

The "ride-it" theory for mobile learning

The “ride-it” theory for mobile learning

In the process, we realised that the most crucial step any practitioners needed to take was realising that mobile is coming at them whether they are ready or not. It is not a flood that can be stopped, more of a wave that needs to be ridden!

Our main approach in the session was to:

  1. explore briefly some of the academic theory and frameworks often mentioned in mobile learning;
  2. discuss the challenges in really making use of them practically;
  3. work together to propose some suggestions / guidelines; and
  4. look at a few real life examples from projects my team have been involved in.

Here is the presentation we used for our sessions:

Feedback from the online attendees was overwhelmingly positive and we had an animated debate running in parallel (with huge thanks to my colleague, Jo Colley, for keeping it flowing).

What do you think of the issues, and ideas?

If you would like to find out more about our m-learning work, see www.m-learning.org or our moblearn blog.

]]> http://www.triballabs.net/2012/09/mobile-learning-mind-the-gap/feed/ 0 http://www.triballabs.net/2012/09/mobile-learning-mind-the-gap/ jQuery HTML Timetable Layout http://feedproxy.google.com/~r/TribalLabs/~3/dF4LBCjZgzA/ http://www.triballabs.net/2012/09/jquery-html-timetable-layout/#comments Fri, 14 Sep 2012 15:18:36 +0000 Ben Lowe http://www.triballabs.net/?p=1344 Continue reading →]]> jQuery Timetable Mobile

jQuery Timetable Mobile

One of the key bits of information we need to display in the education sector are timetables.  This could be for learners, tutors or rooms.  I wrote my first HTML/Javascript Timetabling interface back in 2002 for ebs (Tribal’s further education product) which was a fairly painful mashup of HTML tables and Netscape/IE6 Javascript hacking.  It worked but the code wasn’t pretty.  The time had come to bring the HTML timetable up-to-date and once again, up steps jQuery to make life much, much easier.

Once again I’m using the Twitter Bootstrap component library to provide a nice responsive site so it will display nicely on phone and tablet devices, also catering for touch interfaces very nicely when you can’t rely on hover over text.

jQuery Timetable

jQuery Timetable

To see it out for yourself and check out the code then have a look it on our demo site.  I’ve tested it on a number of desktop browsers, iPhone/iPad, Android and Windows Phone devices successfully.

As you can see from the source the lessons/events themselves are just an <ul> (unordered list) so assistive technologies should be more than happy.

It can also print out ok if the browser is sized right but a few extra css tweaks will be needed to get that fully dialled.

Follow me on Twitter

]]> http://www.triballabs.net/2012/09/jquery-html-timetable-layout/feed/ 3 http://www.triballabs.net/2012/09/jquery-html-timetable-layout/ Multi-Column Bootstrap Definition Lists using JQuery http://feedproxy.google.com/~r/TribalLabs/~3/PyzXtCp8lWw/ http://www.triballabs.net/2012/08/multi-column-bootstrap-definition-lists-using-jquery-html-css/#comments Fri, 17 Aug 2012 15:58:56 +0000 Ben Lowe http://www.triballabs.net/?p=1329 Continue reading →]]> Multi Column Definition List

Multi Column Definition List

I’ve recently spent a bunch of time getting back into the world of HTML after many years in the world of WPF and Silverlight.  My recent visit to TechEd confirmed the rumours that Silverlight has stagnated and ultimately failed to tick the accessibility support box which has forced our hand back towards HTML.

Fortunately, in my absence, frameworks like JQuery and and Twitter’s Bootstrap have emerged (yes it has been that long!) and now creating a cross-device/browser website has become an enjoyable experience.  However, one of the things that has always bugged me about creating semantically correct HTML was that it always resulted in lots of vertical lists not making the most of horizontal space if it’s there.  In steps a bit of nifty JQuery to save the day…

Bootstrap provides some pleasant out the box layouts and styling (other, more interesting styles freely available) for the HTML definition list tag (<dl></dl>) which accurately marks up this kind of label/value data, but only provides a single column of labels/values.  Adding a few extra styles, some JQuery and and extra class or two to your mark-up et voilà:

Multi Column Definition List

Multi Column Definition List

Not satisfied with a picture the see the page for yourself and also check out the code.  As you’ll see it also maintains it’s lovely responsiveness:

Multi Column Definition List Responsive

Multi Column Definition List Responsive

Along with the normal JQuery/Bootstrap js and css you’ll need to add references to your own copies of:

<link href="css/tribal-form.css" rel="stylesheet" />

and:

<script type="text/javascript" src="js/tribal-shared.js"></script>
<script type="text/javascript" src="js/tribal-form.js"></script>

and then in your mark-up add the following to your <dl> tag:

<dl class="dl-horizontal dl-multicolumn" data-colcount="3">

Just using the “dl-horizontal” class results in a similar view to Bootstrap out-of-the-box but auto-adjusts the width of all the <dt>‘s to be the width of the widest label text so as to not waste any space or clip the labels as it tends to do in its default state.

Adding the “dl-multicolumn” class provides you with a 2 column view.

Adding the “data-colcount” attribute alongside the “dl-multicolumn” class allows you to specify a number of columns greater than 2 should you wish. Not providing it defaults to 2 columns.

Follow me on Twitter

]]> http://www.triballabs.net/2012/08/multi-column-bootstrap-definition-lists-using-jquery-html-css/feed/ 2 http://www.triballabs.net/2012/08/multi-column-bootstrap-definition-lists-using-jquery-html-css/ Mobile Learning in 2012 – a crash course http://feedproxy.google.com/~r/TribalLabs/~3/UUo4Zhp_vdE/ http://www.triballabs.net/2012/07/mobile-learning-in-2012-a-crash-course/#comments Thu, 19 Jul 2012 15:25:20 +0000 Geoff Stead http://www.triballabs.net/?p=1319 Continue reading →]]> While in the states I met up with Ewan MacLeod of Mobile Industry Review who was enthusiastic enough about our mobile learning work to interview us for his site.

As he was new to m-learning (and a good questioner), the interview ended up like a crash course in mobile learning. What works? What doesn’t? What we are up to?

Check it out. You will also get access to the first public info about the work we are doing to mobilise the US Department of Defense. They are using our mobile toolkit to roll out m-learning across vast numbers of their learners. Go-live is within the month.

Ewan, thanks for the enthusiasm.

Note to self – I need a haircut!

]]> http://www.triballabs.net/2012/07/mobile-learning-in-2012-a-crash-course/feed/ 0 http://www.triballabs.net/2012/07/mobile-learning-in-2012-a-crash-course/