Posting Results from an App to a Remote Learning Management System

In this article, we’ll look at how you can create an assessment like app that will play back directly in any modern browser. And, even when the app is run remotely on a user device, post results back to the KP Learner Manager Enterprise Learning Management System. No plugins required, no App Stores required – the result is pure HTML5. You can see the result of this example at http://www.appcobra.com/x/KS2/RemoteAssessment/. You can download the AppCobra project used in this example from http://www.appcobra.com/examples/remoteassessment.kti.

a5

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Creating the Assessment

AppCobra provides a myriad of features to create assessments – multiple choice, drag and drop, fill in the blanks, drop down lists, true/false, and more type questions can be created. So, our first step in this example was to create a simple series of assessment questions.

a1

a2

a3

Above – some of the example questions we used in this sample. We allowed the user to submit their answer, and also to use an I Give Up button. On this button, we simply used the event Display Message, told the user the answer, and moved to the next step – but the user did not get a score for that question.

For the Submit button, we used the event Check Answer –  which allowed us to determine what sort of feedback was given. In this example, we told the user whether they were right or wrong, and allowed them to try again.

We used the Assessment / Create/Edit Objectives to give each question a value and name – as we were reporting to a Learning Management System, this allows the results to be viewed by seeing the question, what the user selected or entered, and what score they got for that question.

Allowing the User to Save the App Locally

Using the App Settings / App Settings command, we set this app up so that it downloaded totally to the user device. This means the user is able to run the app even when not connected to the Internet.

Submitting the Final Results

On the second to last step in the assessment, we needed to create the step that would allow the user to submit their answers to the remote Learning Management System. It looks as below:

a4This step contained three important objects. First, an editable text object to enter the user name, one to enter the user password, and Submit Results button.

To create the editable text objects, we simply add a normal text object. We give it a border, and select and appropriate font and background color so that it looks like a normal editable text object. Using the Interact menu, we give it the event Freeform Text Entry / Label.

The object where the user enters their name must have the Alias (Properties / Alias command) loginname, and the text object where they enter their password must have the alias password. The password object is set up to be entered as a password (Interact / All Events command).

Finally, the Submit Results button must be given the event (Interact / All Events command) called Submit Results to Remote LMS. When you add this event, you need to add the URL where the Learning Management System is installed – and also select a course name that this app forms a part of.

a7

After this page is created, we ensure it appears after the user has answered the final question. When an app is set up in this fashion, every time a question is answered, the results and progress are saved locally – regardless of whether the user is connected to the Internet or not. Of course, to submit the final results, the user must be connected to the Internet.

That is all that needs to be done. The user can take the assessment at their leisure, and submit their results whenever they wish. The Submit Results to Remote LMS event will handle all eventualities – it checks to see if the user is connected to the web, it monitors the response from the remote site (to determine if the user name and password were entered correctly, or whether the results were accepted. If the results are accepted by the remote LMS, the app will move onto the next step – and on this step, we created a message that indicates to the user that the results were accepted.

a5

Setting up the Remote LMS

This feature currently only works with KP Learner Manager Enterprise LMS, version XI and later.

To allow a user to submit remote results, you need to set the user up with an account in the LMS. The LMS will automatically send them an email with the name and password they need to use to submit the app.

Once results are submitted from the app, an administrator can log into the LMS, and view the results as submitted.

a6Where does the user get the app from?

The user can download the app from anywhere on the same domain as the LMS is installed on. In fact, it can form a part of the online LMS course, or simply a link from your website. Just provide the URL to the app – in this case, http://www.appcobra.com/x/KS2/RemoteAssessment/. You can use david/password as the username and password to submit your results.

Advertisements

Creating an Animated Multimedia Childrens book in HTML5

In this article, we’ll look at how we created an animated, multimedia, children’s book app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. The final result of using the techniques in this article can be seen at http://www.appcobra.com/x/ks2/tobyoctopus/.

to6

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

The Goal

We wanted to created a simple children’s book – complete with animations, text, voiceover, and navigation control.

to1

This book could be navigated in one of several ways. One, it could be played automatically, so the whole book could be played without user interaction. Second, the user could move from page to page, and start and stop the voiceover as they wished. Finally, we wanted to add a series of thumbnails so the user could move to any page they wish.

Toby the Happy Octopus

Our book was going to be called Toby the Happy Octopus Finds a Friend.

The script was written in Microsoft Word, originally. We simply added our content, refined it, and finally, used AppCobra to create and collate the rest of the content.

We decided to design this app originally to run on a tablet, or desktop device. After we completed the tablet version, we would resize, and make it into a phone version. So, the resolution we decided on was 1024 x 748 pixels. This is the perfect size for the iPad, but would also work extremely well on any other tablet or desktop device, thanks to the AppCobra feature that automatically sizes the content to match the screen size of the device (now done – see http://www.appcobra.com/x/ks2/tobyioctopus).

The Background Image

to2

We created the original image in Photoshop, to get the underwater effect. The shells, and sandy bottom, were taken from our existing photo collection, and we used Photoshop to add a few effects and combine everything together. The result, as seen above, was then imported into our AppCobra app.

The Animations

For this book, we decided to use animations from a site called Animation Factory. This is a subscription site that has a huge range of clipart and other media available for such tasks. We were in particular attracted to the high quality animated GIF files, which seems perfect for this application. So, using this site, we searched for animated images that matched the script we had written.

kpani_oke_octopus_floating_in_place_hg_clr

At times, if an animation could not be found to match our script, we modified the script slightly.

The Font

We wanted to select a font that looked fun, and might be attractive to kids.

to3

We selected a font called Curlz MT. Because AppCobra has the ability to render the text as an image, it meant that this font would look exactly the same on every platform it was played back on, regardless of whether the user had this font available.

We then set about combining the animations and the text.

to4

We used the AppCobra feature called Time Delay, to ensure that the top text appeared first, followed by the animation, and finally, the text at the bottom of the screen. Each of these objects were set to fade in.

We initially looked at moving each of the animations in from the side as they appeared, by decided it interfered with the animations themselves, and so left them as is.

The Voiceover

We wanted to add voiceover to every step. AppCobra allows you to either import, or record directly, any audio or voiceover files you wish.

At some stage, we will record some professional voiceover for this book. But currently, we used a text to voice app to generate the audio files for us. It allows you to see the point, anyway.

We added the voiceover with a small pause/play control at the bottom right corner of the screen. We could have put this anywhere, and made it any size – and even given it any appearance.

to5

We also set the audio to play automatically. Normally, iOS does not support audio autoplay – but AppCobra performs some neat tricks so that as each page is manually turned, the audio will start automatically.

So, audio was recorded, and added to each of the steps (there were 26 steps like this, in total).

Audio is played back in HTML5 for those browsers that support it – but AppCobra also provides a Flash playback fallback option for those browsers or platforms that do not.

Automatic Play

Because we wanted it to be an option that the book would play automatically, we needed to add a timeout object to each steps. We checked the timing of each audio, and added a timeout object on each step that would force that step to move to the new step around 6 seconds after the audio completed playing.

So, at this stage, as soon as the app started, it would play automatically. But we also wanted a manual option – so how did we achieve this? We needed to be able to hide, or show, the timeout objects as required.

To achieve this, we placed all the timeout objects into a group called timeouts. This would make it easier to hide or show these objects as required. For those familiar with AppCobra – we also gave this group the property Maintain Timeline Position.

In a moment, we’ll explain what we did next.

The Startup Screen

We needed a startup screen – to introduce the title, but also to allow the user to select between manual and automatic playback.

to6

Above, you can see we added two buttons – one called Play Automatically, and one called Play Manually.

Each of these buttons actually had to perform two tasks – one was to hide or show the timeout objects as required, and the other was to actually start playback. So, to achieve this, we decided to add some simple JavaScript code to these buttons. If we only wanted to just start the book playing, we could simply have applied the Go to Next Step event to either of these buttons.

So, on the Play Automatically button, we selected the Interact / Add JavaScript Code command. In the dialog box, we added the code below:

to7

The first line, showgroupp(“timers”), ensured that the timers group was visible. This ensured the app would move from step to step automatically. The second line, gotonext(), simply moves to the next step to start playback.

On the second button, Play Manually, we added similar code. However, instead of showgroupp(“timers”), we added hidegroupp(“timers”), to ensure all the timers were hidden. So, using this button, no step would move on automatically.

We are almost there!

Navigation

We also ticked the box in AppCobra App Options to allow the user to swipe from page to page, if using a touch controlled device. As this is essentially a ‘book’, we selected the page curl animation option, which makes the swiping feel as though a page is being turned.

photo 2

For user’s on mouse controlled devices, we needed something else. So we decided to add a left and right arrow near the middle of each side of the screen. We were initially only going to make these visible on desktop devices, but decided to leave them visible for all users.

to8

Thumbnails

Finally, we wanted to add thumbnails for all steps. In AppCobra, this is as simple as adding a thumbnail browser object.

We put this thumbnail browser into a group called thumbs, and gave the group the property Initially Hidden. This is because we don’t want the thumbnails to be visible until the user wants to view them.

In the bottom left hand corner of the screen, we added a small button, and gave it the event Show Group, and told it to show the thumbs group. So, when this button was selected, the thumbnails were shown. The user could select any thumbnails, and move directly to that page.

to9

As soon as the user selects a thumbnail, they move to that page – and the thumbnail bar is hidden automatically.

We selected a size of 280 pixels high for the thumbnails. In AppCobra, you can select any height you like.

So that the user could also close the thumbnail bar automatically, we added a small close button in the top right hand corner of the thumbnail bar. We added this to the thumbs group as well, so that it appeared when the thumbnails appeared. We gave it the event Hide Group, and told it to hide the thumbs group when selected.

We also gave the thumbnail object a movement animation, so that as it appears, it slides in from the bottom of the screen.

That is about all we needed! All done! For now, anyway. We are going to add some more interaction to this app, and provide all the details here for you.

Converting the Tablet sized app to a Phone sized App.

We mentioned above that we wanted to convert the tablet sized app so that it was optimized for an iPhone. And we did just that – see http://www.appcobra.com/x/ks2/tobyioctopus.

Here are the steps we followed – and some tricks we used to speed the process.

  • First, we open the tablet sized app, and used the Apps / Save As command to save a copy.
  • We then selected the App Settings / Canvas command, and selected the iPhone canvas size.
  • We were then asked if we wanted to automatically resize and move all objects to match the new canvas size – so we said yes.

Now we went from step to step to ensure everything looked correct. A couple of things needed adjusting:

  • The audio button needed to be increased in size, and repositioned to match this new size. So, we did this to the first audio button. We then selected the Edit / Copy command, and selected the Copy Dimensions option. Then all we had to do was select each subsequent audio object, choose Edit / Paste, and select the Paste Dimensions command.
  • The bottom text object needed to be moved up a little – so we did this.
  • We adjusted the size of the thumbnails from around 280 pixels to around 90 pixels.

That is all we needed to do. We did turn on Retina Display support, as we were heading for the iPhone.

The result – after adding to the home screen, and running from there:

photo 1

Creating Interactive Training Apps in HTML5

In this article, we’ll look at how you can create an interactive training app that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. The final result of using the techniques in this article can be seen at http://www.win8training.net.

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

The Goal

To create a Windows 8 training course, accessible on all platforms and App stores, including all versions of Windows (including Windows 8), iPads and Android devices.


Above, an example lesson how it appears running in Windows 8.

Not only does the training have to support keyboard based devices, but also touch devices – all in the same training. We needed to natively support the touch features in devices in iOS, Android, and the Windows 8 touch devices, while at the same time supporting the features used by mouse based devices.

The training had to not only operate perfectly on all devices, but look the same on all devices. All fonts, text, images, window sizes, and everything else had to match.

Above – running in Windows 8 Desktop.

Above – running on the iPad.

The training also needed to be able to simulate the features found in Windows 8, and allow students to be able to perform the tasks in the training as they would in Windows 8 itself.

Each part of the lesson was required to have a thumbnail option, illustrating each page in each lesson. These are illustrated below.

We wanted the training to be available from the web, via a Learning Management System, as well as through the various app stores.

Above – the training, being run via the KP Learner Manager Enterprise Learning Management System.

The training needed to be quick to download, and generally as small as possible.

The Tool

We elected to use AppCobra for this task, as it fitted the criteria perfectly. The following features of AppCobra allowed this:

  • AppCobra exports content in HTML5, meaning it works on all devices, tablets, phones, laptops, and PCs.
  • AppCobra allows exported content to automatically resize to match all device sizes, ensuring full screen playback on all devices (within the limits of the device).
  • AppCobra natively supports the touch interface of iOS, Android, and Windows 8.
  • Because AppCobra has an option to generate all text as an image on export, all text in the app displays exactly the same on all devices.

    On a Mac, Android, and Windows – the text is always exactly the same.
  • AppCobra exports in a format that allows it to be easily converted to a format to put into App Stores, as well as run directly from the web using a SCORM compliant Learning Management System.
  • AppCobra allows thumbnails to be created for any lesson automatically.
  • AppCobra has a range of compression options that allow the training to be made as quick to download, and as small as possible.

    Some AppCobra Compression Options.

The Development

The first step was to plan and script the training. Working through Windows 8, we identified 48 lessons to complete the app – all the way from starting with Windows 8, to much more advanced features. We split these into 8 separate chapters. Each lesson was to be a separate AppCobra app, with a main contents app to control the chapter/lesson display, and link to each lesson. In all, there would be over 1000 steps across all lessons.

We elected to create the training at a size of 1024 x 768. This matched the minimum height of Windows 8 devices perfectly, and also meant it played back extraordinarily well on all other devices as well.

Most of the training was composed of Windows 8 screenshots. We used the native screenshot facilities of Windows 8 to capture the screen shots.

To add some nice full color graphics to the training, we used the Icon Experience icon library. This library contains a large range of high quality icons, as 512 x 512 size, in 32-bit PNG format, fully supported by AppCobra.

Some animated GIF files were also used from www.animationfactory.com.

Designing the Navigation

As we used screenshots that were 1024 x 768 in size, and we wanted the training itself to run at this size, this meant we had to design a navigation scheme that would allow the navigation tools to be essentially hidden, and shown when required.

We came up with the idea of a relatively small icon at the bottom left of the screen. We made this icon 50% transparent. When the user clicked on this icon, it would display a range of buttons:

One of these buttons also displayed thumbnails, which allowed the user to navigate to any page in the lesson.

Additionally, we allowed the user to move through the lesson by performing tasks when required, or, when not required, they could click on the main text box to move on.

Touch users could also swipe from page to page to navigate. This works on all devices.

At the end of each lesson, we allowed the user to restart the lesson, return to the main menu, or go directly to the previous or next lesson in the course.

Finally, for mouse users, we added a left and right navigation buttons that only appeared when the mouse moved over them.

We used the AppCobra API to add tooltips to all objects.

All lessons were set up so that they resumed at the step where the user left off, using the inbuilt AppCobra features.

We added an automatic progress bar along the very bottom of the screen so that the user could see at a glance how far they had moved through the lesson.

The Instructions

We selected Segue, a Windows 8 font, as the font for all text in the app.

Interaction

The interaction we added to lessons was added as required. In many cases, this involved a simply touch or click. In other cases, it involved a drag. Sometimes a touch and hold was required for touch users. Sometimes a right-click, or a swipe was required. All are now supported by AppCobra.

In most cases, this was achieved by simply adding an event to an object. In some cases, such as when we required dragging, we used the AppCobra API to control the dragging.

AppCobra has a feature that allows any object to behave in a ‘metro’ like behaviour. Essentially, this means that when pressed, or touched, it appears to depress, and return to normal size when released. AppCobra allows this to be applied to any object, not just buttons.

As this was designed as training, and not a test, we ensured that all interaction was optional. The user could simply move to the next step using the navigation buttons if they wished.

Time delays were often used, especially where we wanted to simulate things that take a few seconds to perform in Windows. For example, when starting a Windows 8 app in the training, we added a three second delay with the App startup screen. This made it look and feel exactly like it did in Windows.

Throughout the training, we made extensive use of arrows to point out areas on the screen. We decided to use red arrows to indicate when the user could interact, and green arrows to indicate where something was simply being shown. We animated the appearance of these arrows to help draw attention to them.

The information text box we used moved around the screen to follow the action, and sized as required to hold the text. At no stage was any scrolling required. All information and instructions were kept succinct while still being informative.

At times, when we wanted the user to select the Windows button (which normally returns the user to the Windows 8 start screen), we added this button on screen to simulate the real button. This meant it could be used on all platforms, and also stopped the user from pressing the actual Windows button (and exit the training!).

Animations

We decided that the best way to illustrate how touch gestures were used in Windows 8, we animated these examples, using AppCobra. We used a hand icon, and using a combination of standard AppCobra features – specifically movement, and appearance and disappearance delay, we manage to animate these perfectly.

 

Creating an Image Editor in HTML5

In this article, we’ll look at how you can create an image editor that will play back directly in any modern browser. No plugins required, no App Stores required – the result is pure HTML5. This includes desktops, tablets – even mobile phones. These examples work in Safari, Chrome, iPad, Android, Opera, FireFox, and IE10 and above.

An example, using the techniques in this article, can be seen at http://www.appcobra.com/x/KS2/AppCobraPhotoEditor/. You’ll find links to other examples at the end of this article.

ie2

We’ll be using AppCobra to illustrate how easy this is. It requires at least version 10.9.40 – which was uploaded on 2nd March, 2013. You can download a trial at http://www.appcobra.com/ipaddownloads.htm.

We’ll provide the examples online and also provide the AppCobra projects so you can create and modify your own. You’ll find these links at the end of the article.

AppCobra is the world’s premier HTML5 editing tool for mobile and HTML5 browser apps. After this article, you’ll see why. And is this article, we only scratch the surface of its power.

Loading an Image

In the photo editor you’ll be creating, you allow the user to load their own image. Let’s see how this part is done.

To set up an image load button, first use AppCobra to create a button or some other object to attach an event or interaction to.

Second, you need to create or add an image, or a hotspot to the app. This object you create is where the photograph the user loads from their machine will appear. If you want some sort of a placeholder image, add an image. If you want an invisible area, add a hotspot. Take a note of the alias this object has – you’ll need this in a moment.

Below, your canvas may look something like this:

snip1

Next, select the button you created initially (which we’ve labelled Load Image, above), which will allow the user to select a photograph, and select the Interact / All Events command.

In this dialog box that appears, select the Load an Image option from the Perform This Action listbox.

When you do this, a list below this action will appear, called Load Photo into Object. From this list, select the name of the image or hotspot you created above to display the photo the user loads.

snip3

Above, we selected an object called placeholder. Below, you can see how we have set up our canvas in AppCobra – the button at the top, and the hotspot below, where the image will appear.

From here, that is all you need to do. When you preview or run this app, when the user selects the Load Photo button, they will be able to select a photo from their local machine, or device.

snip4

snip5

snip6

Once the image is loaded, you can do what you want with it. To edit the image, however, it needs to be transferred to a canvas object.

To create a canvas object, select the Add Objects / Full List / Canvas Object command. Then draw the canvas object onto the AppCobra canvas.

To transfer the image into the canvas object, some code needs to be executed. The code to execute is this:

imagetocanvas(theimage, thecanvas)

where theimage is the name of the object where the user loaded image appears, and thecanvas is the name of the canvas object that will be used for editing.

There are two ways you can do this.

First, add another button. Then, select the Insert / Run JavaScript Code command.

In the dialog box that appears, enter the following text:

imagetocanvas(theimage, thecanvas)

snip7

When the user selects this button, the image will be copied from the theimage object, to the thecanvas object, and will appear there. In the case above, the image in the object called “placeholder” will be transferred to the canvas object called “mycanvas“.

There is another way this can done, automatically.

Whenever an image is loaded by the user, a JavaScript routine called ximageloaded() is run. Normally, this does nothing, but you can add this code, using the App Settings / Includes command, as you can see below:

snip8

Using this technique means the image is transferred to the canvas object automatically, straight after the user loads the image.

If you wish, you can even make the original image not visible (by putting it on a different step, or putting it into a group that is not initially visible).

Editing the Image

Once the image is in a canvas object, the following routines can be run, using the Insert / Run JavaScript Code command.

canvasgreyscale(canvas, left, top, width, height)

Where canvas is the name of the canvas object. Turns the image in the canvas to a grayscale image. Optionally, left, top, width, and height can be added to determine a target area in the canvas where the effect is applied.

canvasbrighten(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Brightens the canvas by amount. Can be negative to darken the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvassaturate(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Saturates (increases color) the canvas by amount. Can be negative to desaturate the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvascontrast(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Increases contrast of the image in the canvas by amount. Can be negative to lower contrast in the image. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvasrgb(r, g, b, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Increases or decreases the red, green and/or blue components of the image in the canvas by r, g and/or b. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

canvassharpen(amount, canvas, left, top, width, height)

Where canvas is the name of the canvas object. Sharpens the image in the canvas by amount. Amount in this case can be 1 to 5. Optionally, lefttopwidth, and height can be added to determine a target area in the canvas where the effect is applied.

addimagetocanvas(theimg,thecanvas,left,top,width,height, alpha, rotate)

Allows to add another image to the image already in the canvas. theimg is the source image to add, thecanvas is the canvas with the image in it. Left, top, width, and height determine where the image appears. Alpha, from 0 to 1, is the transparency of the new image, and rotate is the angle of the image to add.

Saving the Edited Image

There are actually a number of ways to save the image – or rather, let the user save the image locally. You can execute this code:

savecanvas(canvas, thestring)

This will pop up a message box, with the text thestring. The image in canvas will be saved. The user will have to make a selection for the image to be saved.

Other Image Routines

Other routines that can be run include:

canvastoimage(canvas, image)

Copies an image from the canvas into an image.

canvastocanvas(fromcanvas, tocanvas, left, top, width, height, targetleft, targettop)

Copies an image from one canvas to another. left, top, width, and height determine what part of the source canvas is copied, and targetleft and targetright are the target coordinates.

trimimage(image,left,top,width,height)

Crops an image using the coordinates given.

resizeimage(image,width,height)

Resizes image to width and height.

imagetoimage(image1,image2)

Copies an image from image1 to image2.

getcanvascontext(canvas)

Returns the context of the canvas for when you want to manually edit the canvas.

showloader(overob)

Shows a loader object directly and centered over the overob object.

saveimagelocal(canvas,localname)

Saves the image in the canvas canvas to a local file called localname. Note that this is saved in the apps sandbox, and can only be accessed  by your app.

loadimagelocal(localname,target)

Loads the image localname in the image object target. You cannot load just any file in this manner – only an image you saved previously using the saveimagelocal command.

Examples

See these examples:

This example is at the most simple – let’s the user load an image: http://www.appcobra.com/x/KS2/LoadinganImage/ (get AppCobra source project here)

This example goes one step further – loads the image, and then lets the user transfer the image to the canvas: http://www.appcobra.com/x/KS2/LoadinganImage2/ (get AppCobra source project here)

This one puts it all together. Loads the images, transfers to the canvas, let’s the user edit the file, and finally, saves it: http://www.appcobra.com/x/KS2/LoadinganImage3/ (get AppCobra source project here)

This example lets you load an image (and it loads the image straight to the canvas), and then select a border for that image. Also shows an alternate save method: http://www.appcobra.com/x/KS2/LoadinganImage4/ (get AppCobra source project here)

This example lets you load an image (and it loads the image straight to the canvas). It further allows you to combine other images on the canvas – with random positioning, transparency, and rotation: http://www.appcobra.com/x/KS2/LoadinganImage5/ (get AppCobra source project here)

In this example, we allow the user, after loading an image, to determine exactly where the grayscale effect can be applied on the loaded image: http://www.appcobra.com/x/KS2/LoadinganImage6/ (get AppCobra source project here)

Here is an advanced example: http://www.appcobra.com/x/KS2/AppCobraPhotoEditor/

The Future of App Stores?

What is the future of app stores? Will they be required in the future? Apps – yes. But app stores?

Just a few short years ago, making an app meant getting it into the Apple App Store.

It’s a lot trickier now. Apart from the Apple App Store, there’s Google Play, Blackberry World, Windows Store, Amazon App Store, Mac App Store, and the Chrome Web Store. Among others.

The Apple App Store and Google Play are estimated to reach over 1,000,000 apps during 2013.

Most, apart from the big or very successful players, choose one or two stores. And that can be expensive and painful enough. And even when in an app store – you may truly be one in a million. And getting noticed among those numbers is not easy.

Each of those stores have their own software development kits, developer agreements, and submission and review procedures. Wouldn’t it be good if you only had to develop once, and your app worked on all platforms? Wouldn’t it be good if you determined what your app looked like, how it worked, what it contained, and where and how it was deployed?

You can. With HTML5.

So why doesn’t everyone develop in HTML5?

Firstly, there is a distinct lack of decent development tools. AppCobra is the standout here. Without something like AppCobra, creating an ‘app’ from scratch using HTML5 is a lot of work. Different platforms use different touch support and code, and CSS standards are mired by custom prefixes that perform the same function. What metatags are required for what platforms? Why doesn’t my startup screen appear? How do I provide my icon so that it works on all platforms?

Secondly, all browsers render text differently. What fits on four lines on an iPad may need five in Android, throwing your carefully laid out app into chaos. And, apart from Arial and one or two others, there are no standard fonts. So Arial it is. HTML5 does support downloadable fonts – but please.

AppCobra allows you to use any font, anywhere, and the text layout can look the same on all devices.

Look at the following examples.

ipadiPhone

androidAndroid

ie10IE10 / Windows 8

chromeWindows Chrome

Third – the cornucopia of screen/devices sizes and aspect ratios. How is it possible to make your app look good on all devices without having multiple copies? It is possible, of course, to create a HTML5 app that will reflow content based on screen size. For some apps, this may work. For others, like games, this is more difficult. It’s a pain. And a compromise like this never really works.

BlackBerry Emulator

AppCobra apps will resize as required – and keep all layout as you designed it. It looks the same on all platforms. Touch and mouse support can be included in the same app.

With AppCobra you can create an app at a standard phone size, create all the content and logic, save a copy, and resize to a tablet based app. Finally, adjust look and feel.

Fourth – you want to earn money. Getting into one of the app stores is still the best way to do this. But times are changing, and this won’t always be the case. However, using software like PhoneGap, you can, if you wish, turn your HTML5 / AppCobra app into a native app for iOS, Android, and other platforms.

Some HTML5 app advantages:

  • HTML5 leverages existing HTML and JavaScript skills.
  • Apps work on all platforms.
  • During development, can be shared and tested by anyone you wish, on any device.
  • Apps can be converted to app store native apps using PhoneGap, if required.
  • Apps can be deployed when and where you like. Your app can be saved directly from your website to the iOS home screen. Or the Android home screen as a bookmark. Or to the Windows 8 Start screen. From there, it looks and feels essentially the same as any app.
  • There are no developer agreements to sign. No review or submission procedures. No waits to make changes. No fees to pay. Nothing to license.
  • HTML5 apps can contain more features than you realize. Below, we list some of the features you may not realize exist. This list does not include standard HTML features of which you are probably aware.
    • Access to user photos. You can load photos directly from the user machine or camera.
    • Photo and Text manipulation. The HTML5 canvas object allows you to modify images and text in any way you like – right down to pixel level.
    • Drawing support. Allow the user to draw – right on the screen.
    • Geolocation. Get the latitude and longitude of the user.
    • Accelerometer. Access the device accelerometer to sense device movement.
    • Full control of audio and video.
    • Complete touch and gesture response.
    • Complete animation, movement and appearance control.
    • Orientation. Determine device orientation.
    • HTML5 Manifests. Allow apps to download and run offline.
    • Offline storage. Store much more content on user devices.
    • Drag and Drop support. Drag objects directly onto the browser.
  • Add the features above to the features that AppCobra also provides, like:
    • Automatic index generation.
    • Thumbnail support.
    • Clocks and calendars. Math symbols. Drop down, fly-out, and popup menus. Progress bars. Button generators. Hotspots, tables, user generated graphics.
    • Automatic creation of app icons for Android, iOS, Windows, Macintosh, and other platforms.
    • Automatic startup screen generation.
    • Automatic save of app position.
    • Automatic ‘nonapp’ and ‘orientation’ detection and warnings. Show different content based on orientation. Dynamic resize of pages.
    • Complete assessment and scoring engine. SCORM support. Remote submitting of app results when app taken offline.
    • Set objects to allow users to drag, resize, and/or rotate.
    • Dynamic hiding and showing of content and multimedia. Synchronize events to multimedia.
    • Retina display support. Mouse wheel support. Keyboard support. Shake detection. Full page movements, swiping, and page curl swiping.
    • Custom API support.
    • Complete timing control.
    • And a lot more.

All this might make you at least think – shouldn’t I be developing in HTML5?

Where Microsoft Went Right

Microsoft have lagged behind Google and Apple in the web sphere for a long time. But I think times are a changing.

I’ve spent the last few months using Windows 8. On a new laptop, an older laptop (where we upgraded from Windows 7), and the Surface tablet.

Using the tablet, in particular is an absolute joy. It is quick, responsive, and I love it. Starting apps, moving between apps – I love it. I’d probably prefer a little more customization for the Start screen – but I can understand why they perhaps left this where it was.

After using the Surface tablet, the iPad looks and feels feels clunky. Old. Outdated. Suddenly serious deficiencies seem to have appeared. Microsoft have absolutely capitalized on everything Apple, and to a certain extent Android, left out.

First of all, the multi-user support is great. IE10 is a massive improvement. Windows 8, with its full screen interface, is also great (although I have to say in theory this did not sound like it was going to be great…).

I love the Xbox integration. Playing movies from a Windows 8 device wirelessly to the iPad – love it.

Clearly the store lacks apps. But there is more than I thought. But I certainly look forward to more of them. Certainly more serious apps, anyway. But it is integrated quite well.

If you like the cloud, the way SkyDrive integrates with Windows 8 native apps is brilliant. It’s as simple as working with a local drive.

The surface tablet is a little heavier than I would have hoped – but battery life is pretty good.

The Facebook/Twitter/Linkedin etc. integration is very handy. There may be apps on iOS or Android that manage this the same way – but this is built directly into the system.

I also like the way the Music and Video apps tie in the store and your current music.

And yes, Windows 8 takes a little getting used to. I’m not a real fan of the whole horizontal scrolling methodology. It is different, but it does work. And while I think Windows is much better for the release of Windows 8, I can see it hindering uptake. I can’t see Windows tablets outselling iOS or Android tablets in the short term. It seems clearly aimed at people, rather than business, and it remains to be seen if it can convince business to take it up.

And, perhaps the most valid point, is what I choose to use. I have iPads, iPhones, Several Android devices (one Asus one with the detachable keyboard, which I love), a Mac, and several Windows devices. But the first one I go for is the Surface tablet.

I suggest you give Windows 8 a serious look – especially on a tablet. And by the end of 2013, I think it will be a serious competitor in terms of sales.

Where Google Went Wrong

As with Apple, it’s kinda difficult to say a company like Google has gone wrong when it is so successful.

With a brilliant search engine, a brilliantly designed AdWords cash cow, fantastic email, and brilliant mapping, no one can say they don’t know how to do most things right.

It wasn’t so long ago however, that Google launched the short lived Google Wave. After my very first use of the product, I really had to wonder what Google were thinking. How that product ever saw the light if day I will never know.

Android today – particularly if used on a machine like the Google Nexus tablet, is a joy to use. And develop for. But this hasn’t always been the case.

The multitude of Android versions, resolutions, and variously powered devices was a nightmare, and still is in many ways. In this respect, Apple has it all over Android.

The Google App Store, now Google Play, has also improved. But for several years it contained countless seriously deficient apps. They didn’t work. They crashed. Or they stole your data. Or they were designed for a resolution that didn’t match your device.

The Android browser has also improved tremendously, but to my mind it does not match Safari on iOS. The addition of Chrome for Android helped this – and Chrome gets my vote for best all around browser. But the smoothness of CSS animations in Safari just can’t be matched by Chrome.

I have a caveat for my next point – I’m only just investigating the manner of creating Chrome apps. But the features disallowed by Chrome HTML5 apps is disappointing. It means, essentially, creating apps specifically for Chrome. And doesn’t this defeat the purpose of HTML5? Let us hope this changes.