Need a small server capable of hosting databases?

June 16, 2013

In my last post, I talked about using PHP and if you didn’t have access to a server that allowed PHP to run, what could you do?  For the more technically minded out there, you may be surprised that this is even an issue.  The sad truth is that lots of free websites don’t offer PHP and quite a few schools have the servers locked down through official policy and end of argument.

Managed support does not simply allow access to our servers

Use all the memes!

There is hope

A year or two ago, our IT support (not a managed service) started buying QNAP Tera-stations.   Ultra-cool name aside, these network storage devices are great for back-ups.  We use them to hold our photo archives and video project construction files.  Some of you would be amazed* at how frequently I get asked to make a change to a five year-old video.   Keeping the source files makes that a lot easier.

Technology changes all the time, so rather than recommend a specific model, I’ll talk about the features available on even the basic, home model.  In the software section, this is just some of the features they offer:

QNAP TS-21

One of QNAP’s home range

  • iTunes server
  • Music server
  • Photo Station
  • Video Station
  • TV Station
  • FTP
  • Auto-back up
  • Print server
  • Anti-virus

And most importantly, for this post, it can also act as web server with PHP support and MySQL database support along with phpMyAdmin (which is an easy database management system)

While not wanting to endorse a particular product or even model, a quick Amazon search shows that these products are not bank-breaking (we’re talking a couple of hundred pounds here).

Uses

I think these products have been loaded with features to appeal to the geek-at-home.  I’ve quite tempted to get one for myself to house all my media.

When discussing them recently with an ICT teacher from another school, he pointed out it would be a huge benefit in his classroom.  He’d be able to allow his students to program webpages to interact with databases without risking the security of the school’s servers.

At Cramlington, we’re seriously discussing# the possibility of loading up one of these with our interactive webpages and offering it to other schools.  Another school could take the QNAP, plug it into their network, change a couple of settings and be running things like:

  • Drag-and-drop seating plans
  • Custom timetables
  • Class blogs
  • Rewards system
  • Random name selector
  • etc…

 

A nice, simple solution with a huge range of possibilities.   Damn, I should totally get sponsorship before hawking products for free.

 

 

* I suspect those of you in a support role would not be that surprised. 🙂

# Don’t get too excited just yet.  We’re discussing it properly and going about trials sensibly. Watch this space.

Advertisements

FIXED: Frog’s Kerboodle widget

December 14, 2012

Kerboodle is an online subscription resource site.  Frog is our VLE.   And Frog’s official Kerboodle widget allows single-sign-on from Frog to Kerboodle.   So no different usernames or passwords to remember.

Kerboodle

Kerboodle’s Frog widget. Big, isn’t it.

Unfortunately, when I downloaded the official widget from Frog, we discovered a really odd issue.  For our students and teachers on Windows XP machines running IE8* the widget doesn’t appear as a button?    The image is there, but that’s it??  My best guess is that some obscure security setting prevents part of the widget code from running.

Boring background bit (and some name checking)

Fortunately, I was at a Microsoft event hosted at the impressive Harton Technology College in South Shields.   Sean O’Shea (@SeanOfTheNorth) from Microsoft had invited me there to have a look at Surface and Office 365 and both are really very cool.   But more about these in future posts.  Frog had a stand there and Frog’s partnership manager Adrian Bantin (@thebantin) was on hand.

Adrian is a really nice guy and when I explained the issue, he sent me the FDP code that sits behind the widget.

Solution

I found a solution.  This might not work for you, but it works for us.  I’ve also sent it to Frog so they can pull it apart and see if they like it.   But in the meantime, this seemed to be the code which caused the issue:

widget.onLoad = function(){

var link = widget.createElement(‘a’,{‘onClick’:’javascript:openKerboodle();’,’style’:’cursor: pointer;’});    

link.setHTML(‘<img src=”http://appstore-misc.frogdev.co.uk/resources/images/uwa/kerboodle/logo.png” /></br>’);  

widget.setBody(link);                

}

Now, I think what’s happening is that this line:

var link = widget.createElement(‘a’,{‘onClick‘:’javascript:openKerboodle();‘,’style’:’cursor: pointer;’});

isn’t rendering in the browser.   But there’s more than one way to skin a cat or in this case call a Javascript function.  Which is what this code is doing.  It’s saying when you click on the image, run the function openKerboodle().

Another way of doing exactly the same thing is:

onClick=”javascript:openKerboodle();“>

This method is more traditional, the code goes inside the body tag instead of inside an onLoad function and most importantly (seems to) work.

Full code

xmlns=”http://www.w3.org/1999/xhtml”      

xmlns:frog=”http://fdp.frogtrade.com/ns/”      

xmlns:widget=”http://www.netvibes.com/ns/“>    

<head>        

<title>Kerboodle</title>        

<meta name=”frogLib” content=”1.1″ />        

// <![CDATA[
src
=”
// ]]>https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script>

    <script>            

 <![CDATA[

                widget.onLoad = function(){                                   

openKerboodle = function(){                        

 UWA.Data.getText(‘http://www.kerboodle.com&#8217;, function(data){displayHtml(data);});                    

};               

  }

                displayHtml = function(data){                    

window.open(data);                               

}

 ]]>    

</script>

</head>

<body>

openKerboodle();”> http://appstore-misc.frogdev.co.uk/resources/images/uwa/kerboodle/logo.png /> </a>

</body>

</html>

Here’s a link to the text version, just in case the browser corrupts the code.  Make sure you download the file.  For some reason, the code doesn’t show up in the MediaFire browser.

 

 

*Can’t use other browsers.   Please don’t bore me with how wonderful Chrome and Firefox are.   Don’t care, not my department.  We’re stuck with IE.


Tutorial: Creating a timing control in Frog’s FDP

June 18, 2012

A while ago, I built a widget in Frog’s FDP which sets the content of a page based on the time of day.  This is really handy for us, as it allows access to Flash games and social networking outside of lessons, but switches them off during lessons.

I’ve spent some time trying to work out the best way to turn this into a widget for Frog, but the complexity needed to make it general and the instructions that would have to accompany it made it all seem like it would never really work.  So instead, ahead of Frog’s annual interNational Platform’s Conference, I thought I’d post this tutorial here.  I’ll be speaking at the conference, as well and I’m fairly certain there’ll be workshop videos posted shortly afterwards.

I’m quite pleased with the widget.  If only because it originally began life in PHP and I had to learn the FDP code in order to remake it.

The Code

First off, we need to set up the page.  Easiest way to do this is to get the skeleton code from Frog’s FDP generator

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> xmlns=”http://www.w3.org/1999/xhtml”      xmlns:frog=”http://fdp.frogtrade.com/ns/“> <head>  <title>Time of day</title>  <meta name=”frogLib” content=”1.0″ />  <frog:roles>  

 </frog:roles> <script>

//<![CDATA[

…. Our code goes here …..

//]]>

</script>

</head> <body> 

</body></html>

Next up, we need to create a function that’s going to be run when the page loads:

var GetTime = function(data) {

};

And run it

GetTime();

Now, inside the function we need to set up some variables:

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

currentTime uses the new Date() function built into JavaScript to become an all encompassing date object.  This means you can tag onto it code like getDay() and it will bring back a number corresponding to current day of the week, e.g. Sunday = 0, Monday = 1, Tuesday = 2 etc…  I’ll also use currentTime to get the minutes and hours:

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

So, I can get the name of current day by putting that number into the array dayNames I created.  I could do all this with just numbers and miss out this step but I find it’s easier later on. The reason I’m getting the days of the week is that our school runs a two-week timetable and on Wednesday finishes at 2pm for staff development.  Also, it allows the fun stuff to be accessible on weekends at any time.

The time of the day is going to be treated as numbers, with the hours as hundreds and minutes as units, e.g. 9:10am becomes 910:

var tim = hours+minutes;

We run a four period day with lessons 75 minutes long, so I now need to tell the function what the start and end times are:

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

And on Wednesday’s these times are different:

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3start = 1400;

p4start = 1401;

p4end = 1402;

}

This IF statement simply changes the variables if the variable day is set to Wed.

The final variable needed is one I’ve named naughty.  This should give you an insight into my sense of humour.

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

   if (tim>p1start && tim

        naughty = 1;

   }

   if (tim>p2start && tim

        naughty = 1;

   }

   if (tim>p3start && tim

        naughty = 1;

   }

   if (tim>p4start && tim

        naughty = 1;

   }

}

So, we set naughty to 0, then we check to see if today is on a weekend, if it is, naughty remains at 0.  If not, we now check to see if the current time, tim is during one of the lessons.  If it is, naughty is set to 1;

if (naughty<1) {

document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

}

If naughty is set to 1, then the page returns a message saying:

You cannot use this widget during lessons

If naughty is set to 0, you can use embed Flash files, or iframes or whatever you wish simply using document.write to fill in the code.

Looking through this code, you’ll probably see why it would be so hard to wrap it up as a generic timing widget, given the different number of periods each school uses.  Hopefully, you can see how you’d be able to adapt this to suit your needs.

You could (as I have done previously) build the entire page using multiple IF bricks entirely within Frog’s toolkit and I’m sure non-Frog users can see how easy it is to run the code as pure JavaScript instead of being inside the FDP wrapper.  I’ve gone further with this and used the FDP preferences to control what appears in the non-naughty section, so I only have one html page which can display different content, but that’s adding a whole extra level of complexity.  I’ll turn that into another tutorial.

Here’s the code in full:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”       “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

xmlns=”http://www.w3.org/1999/xhtml”   xmlns:widget=”http://www.netvibes.com/ns/“>

<head>

<title>Game Timer</title> 

<meta name=”frogLib” content=”1.0″ /> 

<script>  

//<![CDATA[

var GetTime= function(data){

var currentTime = new Date();

var dayNames = new Array(“Sun”,”Mon”,”Tue”,”Wed”,”Thu”,”Fri”,”Sat”);

var day = dayNames[currentTime.getDay()];

var mins = currentTime.getMinutes();

var hours = currentTime.getHours();

hours = hours*100;

var p1start = 900;

var p1end = 1015;

var p2start = 1035;

var p2end = 1150;

var p3start = 1150;

var p3end = 1305;

var p4start = 1350;

var p4end = 1505;

if (day == “Wed”) {

p1start = 900;

p1end = 1015;

p2start = 1035;

p2end = 1150;

p3start = 1235;

p3end = 1400;

p4start = 1401;

p4end = 1402;

}

var tim = hours+mins;

var naughty = 0;

if (day == “Sat” || day == “Sun”) {

} else {

if (tim>p1start && tim

naughty = 1;

}

if (tim>p2start && tim

naughty = 1;

}

if (tim>p3start && tim

naughty = 1;

} if (tim>p4start && tim

naughty = 1;

}

}

if (naughty<1) {

   document.write(“Use document.write to add your code“);

} else {

document.write(“<center><BR>You cannot use this widget during lessons<BR><BR></center>”);

 }

};

GetTime();    

//]]>  

</script>

</head>

<body>

 

</body> </html>


Making Apps: Redux – part 4 (iPhone Apps)

March 26, 2012

This is part 4 of my three-part series, Making Apps.  Redux, because it sounds good.  Revisit is possibly more accurate and at least I didn’t have to look up what it meant.

In the series, I tried to explain the possibilities in making apps for yourself.  I didn’t go into much technical detail, mainly because that would take about a book’s worth of text.  Funnily enough, quite a few people have done that already.  I mainly talked about Android apps, because that’s what I know.  The massive issue with developing Apple iOS apps is that you need access to a Mac.

Why a Mac?

Apple's logo

The preferred iOS creation software is XCode, which only runs on Mac and the security requirements of creating and saving development and distribution certificates are really only possible on a Mac.  Finally, uploading apps to the App Store for approval can also only be accomplished via Mac.  In short, you need a Mac and the length of time you will spend on one, even if you build apps the way I have done, means you can’t just borrow your friend’s Mac Book for an hour.

Getting started

In my case, having been a PC-user for the longest time, since one disappointing 6-month period back in 1999, I wasn’t about to swap my Windows 7 laptop for a Mac Book.  I also wasn’t about to advise purchasing a new computer just because it would be kinda cool to make iPhone apps.

At the time of writing, I have just submitted my first app to iTunes Connect and it’s sitting there awaiting approval (see: update).  I built this app in  Adobe Flash Professional CS5.  I say built, but really it was a case of copy-and-pasting the frames from the existing Android App.  Flash’s iOS template took care of the rest, although I am getting ahead of myself.

Firstly, I had to apply for an iOS Developer account – $99 per year.

iOS Development Centre

$99 just to be able to log in

Next, we had to wait for Apple to contact the school to verify our existence and the fact we wanted to make apps – 6 weeks.

At this point last summer, we discovered the Mac requirements, so everything went on hold.  Then I wrote the blog entries about making Android apps, which got me thinking:  If Flash CS5 is allowed to publish iOS apps and all I need is the certificate to do so, how hard can this be?  All I really needed is access to a Mac…

The school had dabbled with Macs and we had a room of them not networked (they don’t play well with Windows servers).  I suggested that I take one of the Mac Minis home, allow it to use my Wi-Fi and see how easy it is to create the certificates that way.

Certifiable

There’s easy, straightforward and then there’s bodge upon bodge!  Many, many hours and countless forums later, I managed to create a P12 Development Certificate and Mobileprovision file and was able to publish the app using Flash and install it on my iPod Touch.

In order to create these certificates, you have to fill in a form on the iOS Development website.  Then you download the certificate file.  Then you import this certificate into Keychain Assistant.  Then you request something else from the Certificate Authority.  Then you download the mobile provisioning certificate.   Making sure at each step you enter the correct password, delete all old versions and have all the preferences checked.   I would like to talk you through each stage clearly, but it is so confusing that I can’t remember exactly what I did and no doubt will struggle to repeat the procedure correctly myself.

Once all of that is done, you hit publish and produce a development app for your personal device.  There is something very rewarding about making an app and seeing it on your device.  Something about it being made tangible.

Submitting to the App Store

Once you’ve tested your app – i.e., it doesn’t brick your iPod.  You can think about distributing it.  I’m not 100% sure Apple wants you to distribute apps, as their website which has been quite clear to up this point gets a little hazy.   Basically, look for iTunes Connect.  It’s sort of outside the iOS Development area.

iTunes Connect

Not to be confused with iTunes U, iTunes or Facetime

On this website, you fill out several pages, upload images and descriptions.  You will be asked for an SKU number, which turns out to be your own reference number for your app and you’ll also be asked for a lot of other things to.  Google will become your best friend here.

Once you have completed the forms to the best of your ability, you will need to generate Distribution certificates.  That crying you can hear was my spending another good few hours repeating certificate stuff again!

Once you’ve generated and published your app from Flash (or maybe your were daring and went straight to XCode) you will need to upload your .ipa file using Application Loader.  This handy little program is now bundled with XCode.   In order to install XCode you need to be running Snow Leopard.  In my case, that meant buying the upgrade DVD and waiting two weeks for delivery.

When you have upgraded, downloaded the upgrades to the upgrade, you are finally allowed to download XCode for Snow Leopard.   Once installed, you can close XCode and use Finder to locate the standalone Application Loader.

Application Loader icon

Application Loader aka "I had to download 1.5 Gb of XCode just to get this!"

Do you get the impression I think this entire process has been overly convoluted?

In conclusion

When I tell others of my experiences, I have found that iPhone, iPad and iPod Touch users view these steps with reassurance.  Each one said “It’s good to know they take the security seriously”.

And of course, Android devotees take my story as proof at how limited and controlling Apple is.

I think there’s truth in both views.  The hoop-jumping required to produce a final certificate is crazy.  Surely once you have logged into your Apple account and created a certificate there, what additional stages are needed?   It’s completely opposite to the self-signed certificate you create for Android.  Not to mention creating separate development and distribution certificates.

In terms of actually building and development, I still prefer Adobe AIR for Android.  Little features like being able to connect to your device and overwrite the app inside Flash make it a little easier to work in.   For iOS, you use iTunes to install/replace the app.

Ultimately the iPhone and iPad are massively prevalent and a lot of teachers have one or both.  I’m pleased that I’ve been able to produce an app for Apple devices and particularly pleased that the Adobe AS3 coding was able to be used without alteration for iOS.  I’m assuming that getting development and distribution certificates will become smoother as I do it more often.

Apple vs Android

I wanted an Apple vs Android image, but they are all quite mean really (read: funny) and didn't want to appear one-side.

I still maintain that there are more benefits to Android than Apple for a school:

  • Android Apps can be hosted directly on our VLE.  So apps which use internal school systems do not have to be published to Google Play
  • iOS Apps can be hosted directly, but are limited to 100 devices under Apple’s Ad Hoc distribution system
  • Android Apps appear in Google Play almost instantly as they do not undergo human-based testing before release.  Some would point out that this is actually a good thing that Apple does, but it does delay distribution and their decisions have been shown to be arbitrary.

Finally if you are considering building your own apps, give serious consideration to Adobe Flash.  Building in Adobe Flash produces a SWF file, which can be used directly on our intranet, so we get an “emulator” each time we make an app.

UPDATE:

On 2nd April 2012, Apple approved my first iOS app, Question Dice and made it available on the App Store.  It’s free to use.  You can access it here, Question Dice


Battle of the Handhelds: Redux!

November 19, 2011

I think the one post I’ve made which has caused the most feedback and continues to draw in audiences is my post about two devices we were considering for school use back in April, namely the iPod Touch and the Archos 43.

So much has happened since I wrote that blog entry.  First off, we didn’t go with either iPod Touch or Archos.  Like I summed up at the time, the iPod had too many restrictions and the single-touch Archos made it too frustrating to use.

Pick a device already!Samsung Galaxy Tab 7" Wi-Fi

At that point, our ICT Coordinator stumbled across the Samsung Galaxy Tab.  I say stumbled upon, because Apple pretty much had the high street sewn up.  All credit to them (and it’s changing now admittedly), but if you want to buy a tablet on the high street, everyone wants to sell you an iPad.  And why not, they’re great devices (personally I find them a little large and a bit heavy) but there’s no denying Apple created another product the world didn’t know it needed.

Samsung (who incidently make the iPad for Apple) have their own range of tablets, a 7″ wifi, a 7″ 3G and similar in the 10″ range.  They’ve also started on their gen 2 tablets which are even more sleak, though not widely available yet.

We evaluated and then chose the Wi-Fi only, 7″, P1010 model.  It runs Android Froyo, has 16Gb internal memory, front and rear cameras.  It comes preloaded with ThinkFree Office (which allows creating and edit MS documents) along with a host of other apps (some good, some not worth it).

Size does matter

The main difference between the 7″ tablet and the smaller handheld we were looking at before is the size (obviously).  When you’re using the tablet, it feels like it is for work.  You can achieve a lot of the same stuff on the smaller devices, but they lack a feeling of productivity.  With the Samsung, you feel like you’re using a work tool.

We did look again at the iPad and iPod Touch, but the cost of the iPad is too prohibitive to seriously consider (those schools that have gone down the iPad route must have sacrificed something else from their budget).  Ultimately we found iOS too restrictive/problematic in terms of file uploads, Flash (yes I know Adobe have pulled development) and for building our own apps as well as paying for other apps.

Niggles

There are a couple of niggles.  The battery gives you a day if you’re using it.  Given the size of the device, I was surprised, but I suppose powering the much larger screen is the big difference.  The native keyboard makes some truly irritating errors, but Steven Lin has kindly ported the Gingerbread keyboard.  Neither of these are big issues, at least not compared to:

WTF!

The tablet cannot charge from a computer’s USB while turned on!   Wait…what?  That’s like… the point of USB.  We’ve got round this issue by buying these special cables.  It took a couple of hours searching the internet to even find out what the problem was.  It turns out to be a voltage issue.  These cables contain a switch and resistor which gets round that.

Still, these are all niggles and while many would point out that you shouldn’t have to deal with niggles, life always proves otherwise.

Order ready

We ordered the tablets about a month ago (with parental contributions) and they are due to arrive within the next two weeks.  All the preparations have been done (fingers crossed).  We have a comprehensive mobile version of our VLE, a really cool instruction booklet to be given out with the devices and we’ve put together a number of school-specific apps:

This slideshow requires JavaScript.

I do hope that we’ll make some of these available on the Android Market.  They are all built in Adobe AIR, which has made the creation of Apps so much simpler.  I think we will eventually move away from AIR, but for right now, it just works.

In conclusion

Have we chosen the right device?  I think so.  The size is right.  The functionality is right.   The price is right ~£300 (including insurance).  I’ll admit my heart sank a little when Amazon announced the $199 Kindle Fire – but it’s not out in the UK yet.  And not in the quantities we need.  And can we even run our own apps on it? Maybe next year, if this year is successful.

The battle may have been won, but something tells me the war has just begun.


LiveWeb – Web pages in PowerPoint

August 2, 2010

MS PowerPoint is a great presentation tool but I often advise against teachers using it.  It’s nothing to do with Microsoft or compatibility.  Even the iPad can show PowerPoints so if Steve Jobs says they’re ok…

The reason (mega-corp rantings aside) I advise not to use it is often educators will want to link to a web page or resource and PowerPoint tends to be unpredictable about how it handles that link.   Because you present from PowerPoint fullscreen sometimes when you click a link to open a web page it pops up behind the presenation. 

If only there was a way, some sort of plugin for PowerPoint that allowed you to view web pages in a slide, just like a movie.  Oh wait…

LiveWeb's user interface

LiveWeb is a free Add-In for our favourite presentation tool (yes I got fed up typing PowerPoint) that once installed allows you to view web pages just like videos.   You can even link to documents on your computer (although it is a little awkward). 

Personally I’d love it if the designer would add an internet toolbar so you could go backwards and forwards move easily, but other than that, this is a great tool and very handy in presentations.


TV studio

July 29, 2010

So typical, after just promising that there would be no drop off in blog posts, I’ve been away from WordPress for a week!

I do have a good excuse though, we’ve spent the better part of the first week of the holidays rewiring our greenscreen TV studio.

Greenscreen TV Studio

I’m very proud of that studio, which unlike most school’s was entirely fitted by myself and colleagues.  There are some excellent companies out there, like PlanetDV who will do all the heavy lifting for you, but they do charge for the fitting.

Also, the majority of systems use professional software which adds another layer of complexity to the filming process.  With the best will in the world, students don’t need high-end products as a studio when used correctly is more about confidence building and public speaking skills.

The studio cost less than £7000 to fit completely (compare this to a nearby City Learning Centre’s £250,000).  I’ve often talked about sharing how we did this and so it’s about time I did.  

In the coming weeks alongside the 20 tips, I’ll be posting a breakdown of how I designed the studio, the choices I made and the impact it has had on teaching and learning.  Hopefully by the completion you’ll have a shopping list of everything you need to replicate the facility, if you so desire.  and if not, you might be a little entertained along the way.