Tag Archives: iPad

Deploying Your AppCobra Apps

From AppCobra to an App Store

In this article, we’ll look at how you can turn take the app you’ve created in AppCobra to a form that can be submitted to an App Store.

We’ll be using AppCobra and PhoneGap Build 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 AppCobra Cloud

NOTE: We are currently working on a product called The AppCobra Cloud – which will make everything mentioned here obsolete. You’ll be able to request that any app uploaded to our server be submitted to app stores – and we’ll do all the work for you (for a small fee, of course).

In the meantime, below we talk about how it can be done today.

Do I need an App Store?

Today, this is a good question. Let us consider a few points.

  • When you create an app in AppCobra, it can run on any mobile or HTML5 device already. All the user needs is the URL.
  • You can set up an AppCobra app so that it can download to a device and run offline if required.
  • App Stores require accounts to be set up with the App Store owners, and in some cases you have to create certificates, provisioning profiles and keys. They are only a one off, but still need to be done.
  • Above, we mentioned The AppCobra Cloud. This will be a complete online App Store that will make using App Stores obsolete. And it is not too far away.
  • App Stores, especially the Apple App Store, may reject your app for any number of reasons.
  • In the case of AppCobra apps, your apps will be run identically when directly loaded via the device browser as if they were native apps from an App Store.

I’ve tested my AppCobra app in a browser on my device. Will it operate differently in an App Store?

No, it will be virtually identical. You simply won’t be able to tell the difference.

How do we do it?

  • There are three steps here.
  • First, you create your app in AppCobra.
  • The, you export the app.
  • Third, you upload the app to PhoneGap Build. PhoneGap Build will convert the AppCobra app to a form that is required for submission to a range of App Stores.

What is PhoneGap Build?

PhoneGap Build is an online service, designed to take HTML5 apps (as created by AppCobra) and convert them to a range of native formats that can be submitted to App Stores.

As you will see shortly, AppCobra will create your app, along with all the information that PhoneGap Build requires to build your app ready for an App Store. This includes startup screens and icons, and metadata that describes your app, including things like category, keywords, author, etc.

Creating Accounts with Apple and Google and Others

Note: Before you can submit any apps to any app stores, you will have to first create accounts with the App Store operators – which in most cases is Apple and Google. This article assumes that you have done this.

With Google, this is a fairly straightforward exercise. You will need to create a security key, but this is not that difficult. And your apps can be submitted to Google from your PC.

Apple, however, has much stricter rules and guidelines. You must generate keys and provisioning profiles, apply for certificates, and of course, enter into a developer agreement with Apple. For many, non technical users, this initial step – which only needs to be done once, may be better done with the help of a consultant or company specializing in this area.

Exporting Your App Ready for the App Store

Below, you can see an example app we created in AppCobra. We will be using this as the example for this exercise.

upg001

Once your app is ready, select the Export App… command from the Apps menu.

upg002

When the next dialog box appears, select the option below:

upg003

You’ll see shortly why this differs from the normal export or upload options.

Your app will then export as normal – but there will be a few extra steps.

upg004

First, you’ll see the message above. It just explains a little about what is going on.

upg005

You’ll then see the normal export dialog box. Make  any required changes, and select Export. You’ll then be able to select a local folder to export this app to.

upg006

Near the end of the export, you’ll see the dialog box below.

upg007

This dialog box allows you to fill in information about your app. This information is required by PhoneGap to be able to successfully process your app, and is generally required by the App Stores so they know how to categorize your app.

They are reasonably straightforward options. Below, we’ve filled in this dialog box.

upg008

Once you’ve filled in these details, the lesson completes the export, and the following dialog box appears.

upg009

Ensure you choose the second option (Submit App Manually), and select the Select button. Windows explorer will open, and show you the resulting file that has been created.

lms

You will see a file called myapp.zip in this folder. This is the file that is uploaded to PhoneGap Build, and contains everything required – including the details you filled out earlier.

Now, we log into PhoneGap Build.

upg012

Below, you can see our PhoneGap Build page. It contains a history of the other apps we’ve uploaded recently.

upg013

We then select the New App button. We can then upload the file that was created by AppCobra a few minutes ago (myapp.zip). Below, you can see a button that reads Upload a zip file. We select this…

upg014

…and then we select our myapp.zip file created by AppCobra…

upg015

And the zip file then begins to upload.

upg016

Once uploaded, PhoneGap Build goes about converting your apps. It generally only takes a few minutes.

Below, this is how your screen will look. At the top of the list, you’ll see your app name, the icon, and the description we entered.

upg017

Underneath the name and description of the app, you’ll see six icons. Each one represents the app in a different format for different destinations. The first icon is for iOS, and the second is for Android. Others include Windows Phone, Blackberry, and more.

Each app is ready to download, and ready to submit to an App Store. Let’s have a look how we would get this app onto our Android device.

NOTE: By default, most Android devices are set so that they will only allow apps from the Google Play store to be installed. However, there is a simple change you can make to get around this. Go to your settings, and select the Security tab. In there, you’ll see an option called Unknown Sources. If you ensure this is ticked, external APK apps will be able to be installed on this device (this process might be a little different depending on your device and version of Android.

Screenshot_2013-04-07-01-49-27

First, we navigate to the PhoneGap Build page in our Android browser.

upg018

Once you’ve loaded this page, you select the Android icon under the description of your App. It will then download to your device. In the case of an Android app, this is a single file with an APK extension.

Once downloaded, you’ll be asked to confirm you want to install this app. If you select yes, it will install the app.

upg019

upg020

Once installed, it is an App on your machine like any other. below, we’ve added the App to our Android home screen.

upg022

And when we run the app, it looks and operates exactly as it did as we were testing it from AppCobra.

upg021

In the case of an Android device, the file that is created has an APK extension. If you have an account with Google, you can use this APK to submit your app to the Google Play store.

Once again, the Google APK format is much better to deal with than the Apple format. This is because the APK file you’ve downloaded can be installed on any compatible Android device. You can even email the APK to a user, and they can download it directly from their email program. With Apple apps, this cannot be done.

Converting a Word Document to a Mobile App

In this article, we’ll look at how you can turn a Microsoft Word document into an App that will play back directly in any modern browser. 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/whyappcobra. The AppCobra source project can be found at http://www.appcobra.com/examples/worddoc.kti.

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.

How do we do it?

It is actually a very simple process.

The first step is to get your Word document into a series of bitmap, PNG, or JPEG files. PNG would be best. There are several tools that allow this to occur. In fact, there are probably tools that allow this to happen much more easily than the method we outline below.

In our case, here is what we did.

First, we created our Word document, add the images, the layout, the styles – everything we wanted in the document. We made the Word document in landscape, as it would match the screen size of most devices better.

word2

Then we saved it as a PDF document.

We then imported the PDF document into PhotoShop Elements. This software allows you to save each page as a file type of your choice. We saved them as a PNG file. And it fact, we saved it in a size that was double what we needed – this allows us to use Retina Display support if we desired.

word1

In AppCobra, we created a simple template. It consisted of a title bar, and four buttons. We set these buttons up to allow the user to move forwards and backwards, and also to the first or last step in the App.

word3

Then, we created a placeholder in AppCobra (Add Objects / Full List / Placeholder command, and set it up at the size we wanted the pages to come in at.

We then used the Add Objects / Image command, selected the From File option, and navigated to the folder where the images were placed. The only thing we did to these images was to rename the images that started at 1 to 9 to be 01 to 09 – this ensured that the images would all come in at the right order (if you don’t do this, then alphabetically, it goes 18,19,2,20, etc).

We selected all the files, and imported them in one operation.

word4

Essentially, it is now done. However, we added a table of contents to our Word Document. After import, it looked like this:

word5

Currently, this is not functional – because it is just an image.

So, we used the Add Objects / Hotspot command to create a hotspot over each table of contents entry. For each hotspot, we selected the Interact / All Events command, and gave it the action Go to Specific Step. We then set the desired step for each entry. Below, each hotspot is represented by a red dotted outline. The user will not see these, however – all that they know is that if they select an entry in the table of contents, it will go to the appropriate page.

word6

We did add a status bar along the bottom of the screen (using Add Objects / Full List / Import App Status Bar) to automatically denote user progress through the app.

Finally, we checked the App Settings / App Settings command to ensure everything was to our liking.

That’s it  – all done! We then used the Share button to upload to the AppCobra server!

Why AppCobra is the Best Choice for Education

Why AppCobra is a Better Tool for Students and Education.

AppCobra is a serious tool.

Apps, the mobile web, and HTML5 are the future. You already know that. That’s why you are reading this.

You want your kids, and/or your students to be get a great head start into that future. A future where the skills they learn now will be indispensable.

And that is where AppCobra comes in.

And in this document, we are going to show you why there is nothing like AppCobra. Nothing. Not even close.

You see, AppCobra is a serious development tool.

AppCobra does more than string a few pictures and words together and put them on your iPhone.

With AppCobra, you can do almost anything. AppCobra takes full advantage of all mobile and HTML5 features, not just a small subset.

And AppCobra is tremendously scalable. Not only can you put together Apps much like you might put together a PowerPoint presentation, but more experienced users can delve into JavaScript, and the AppCobra API, and really put their skills to good use.

As a final plus, your kids will be creating apps that run on all platforms. iPhone and iPads. Android. Blackberry. Windows 8. Macintosh. Even Smart TVs.

Let’s Have a Look at Some Examples

On the following pages, we will be looking at the sorts of things your kids and students can create in AppCobra.

You will be surprised at the extensive range of features available – how easily they can be implemented, and just what your kids will be creating.

And you’ll also be pleased to see you are not limited by a few pre-set templates. You have complete control over how your apps look and operate.

Choosing anything else will limit your kid’s imagination.

Help, Examples, and Interactive Tutorials

Just before we get started, and important note.

AppCobra includes an extensive online help system (http://www.appcobra.com/help), a support forum (support.knowledgepresenter.com), a huge range of examples (including the source AppCobra projects) (http://www.appcobra.com/uni/examples), and a free and extensive series of Interactive Tutorials (http://www.appcobra.com/uni).

We even have a series of blogs that provide constantly updated hints, tips and guides (appcobra.wordpress.com).

Nearly fifty interactive tutorials are provided for help you learn AppCobra.

Dozens and dozens of interactive examples complete with source AppCobra projects.

Multimedia

Using AppCobra, you can record or import voiceover, insert YouTube videos, or your own videos into Apps.

Above – a multimedia children’s book. Each page contains animations and audio.
The user can navigate from page to page automatically, using the buttons, or on
touch devices, by swiping.

Here, inside AppCobra, is the project used to create the App above. See how easy this is? You get to see exactly how things will turn out.

Insert Youtube videos, or your own videos, into any app.

Not only can you add audio, but you can customize play and pause buttons, and
synchronize events to audio to create elegant multimedia animations.

You can also apply sound effects that play whenever an object is touched or
clicked.

E-learning and Assessments

The App and mobile marketplace promises to reshape education no other idea mankind has had since the invention of the printing press.

Let your kids share their knowledge, and create their own apps – create their own e-learning. And effective e-learning is more than just asking a question. In this fast paced world, you need to be able to grab attention – and keep it.

With AppCobra, you can create assessments in e-learning using a range of
question types.You determine how they look, how they are presented, and what
sort of feedback is given to students.

Using Hotspots,creating interactive software simulations is very simple.

Presenting Information.

Here is where the creativity and imagination of your students can shine. Information can be presented in so many interactive and dynamic ways.

Because AppCobra allows so much customization, you can create your own custom interaction and question types.

When teaching concepts, you can set up your information so the
user views what they need to view, when they need to view it – and even to skip
it if they don’t.

Mouseovers and touchdowns are wonderful ways that AppCobra allows you to create custom, dynamic, and interactive apps.

Above, we’ve set up some hyperlinks in the text – which wraps
elegantly round the image of the snake – to present some photos. These
hyperlinks could also display new windows of information, or simply link to
another step in the app, or perhaps even play video or audio.

Here is an illustration of how images can be automatically set to
enlarge, if the user wishes to see content at a larger size.

Create books that automatically flow based on inserted images and text – and
even allow searching…

Or create more static books, with fixed layout – and exactly the same layout –
on all platforms.

Navigation

Once again, AppCobra here shines.

Apps should be more than just click here to continue information presenters.

You can:

  • Present information in a linear fashion
  • Allow the user to branch based on selections
  • Branch based on user performance (score)
  • Provide automatic indexes, bookmarks, and thumbnails to allow the user to navigate.
  • Allow swiping on mobile devices in any direction.

Let’s have a look at some of the other ways you can set up navigation and branching within lessons.

Above, we’ve illustrated how you can add thumbnail navigation to your app.

Indexes (or tables of contents) are just as easy to create and maintain. You
determine what appears in the index, and how it appears in the index.

Use pop-up, flyout, or drop down menus to provide another means of navigation.

With a single click, you can add a bookmarks interface to allow the user to
save and navigate to their own bookmarks in your app.

With AppCobra, not only can the user swipe left or right – you can cntrol
scrolling and swiping in any direction you like.

There is even a series of features so you can create your own
comic books.

You determine exactly how your app looks and operates.

Layout

When creating apps, it is important that your app looks on all platforms how you designed it to look. What looks one way on an iPad may look different on an Android device.

Not with AppCobra, however. Your app can look the same everywhere.

AppCobra has a feature that allows fonts to be created as images. This means
that your app looks exactly the same on all platforms – and exactly the
same as it does when you design it. Use any font you like.

In this app, you can see it is important that this main paragraph
takes up exactly the correct amount of space. In other development tools, this
would be almost impossible to ensure.

When adding things like Math Symbols – once again – a great feature of AppCobra – you need to know exactly how those symbols will appear on all platforms. With AppCobra, this is not an issue.

With most development tools, if you select a font that the end
user does not have on their device, it will be substituted with a different
font. Not only will spacing change, but the whole appearance of your app can
change. Not an issue with AppCobra.

Another couple of examples where exact layout is crucial to how an app appears and operates. This sort of thing – as amazing as it sounds, can simply not be done
with other tools.

Apply static and dynamic styles, textures, borders, and outlines to objects.

A range of image editing features are built right into AppCobra to enhance your
illustrations.

Because AppCobra can render text as an image, this allows such features as drop
caps to be applied to the text.

Use AppCobra features to generate object backgrounds and borders of any shape,
color, or size.

An interactive solar system app, complete with audio. Note that
the layout will look exactly the same on all devices and browsers.

Layout Consistency

We’ve already mentioned that when you create an app in AppCobra, it plays back exactly the same way – and looks exactly the same on all devices.

Using AppCobra University as the example, here is the proof.

On the left – a device running Android Honeycomb. On the right, an iPhone.

On the left, an iPhone running Chrome – on the right, the same app running
directly in the Safari browser.

On the left – running on the iPad in the Safari browse. On the right, running
on the iPad after it has been saved as an app.

On the left, FireFox in Windows. On the right, Internet Explorer 10 in the
desktop.

On the left, FireFox in Windows. On the right, Safari in Windows..

On the left – Safari on a Mac. On the right, in IE10 in the Metro interface.

Choose Your Layout Size and Orientation

Although AppCobra can and will size your app as required on any device, you can, if you wish, target your app for a specific device, and match the resolution of that device.

Below, you can see the same app resized for three different devices – from top to bottom – iPad (1024 x 768), Windows 8 Tablet (1366 x 768), and iPad vertical (768 x 1024).

image067

Saving as an App

There are several ways you can save your app to any device.

First, using a product like PhoneGap, you can save your AppCobra app as a native app, ready to go into the Apple App Store, Blackberry World, or Google Play. AppCobra takes care of all the preparation for you – including all icons in various sizes, all required metadata (including keywords, descriptions, and more) – even the same screen shots required for the app stores.

Second, you can use the features found on most devices to save the app directly to the device desktop. Combine this with the HTML5 download feature supported by AppCobra, and you have the equivalent of a native app in minutes.

On the left, an app created in AppCobra saved to the iPhone home screen.
AppCobra takes care of the icon, and startup screen. On the right, the app in
action, as launched from the home screen.

The same as the above example – but this time on the iPad.

Above left, we’ve added the app we created in AppCobra as a bookmark to the
Android Honeycomb home screen. From there, it looks and operates almost exactly
the same as a normal, downloaded app. Once again, AppCobra takes care of the
icon and startup screen.

On the left, the Learning Windows 8 icon has been added to the Windows 8 start
screen. AppCobra allows you to select your icon, and prepares it correctly for
you. You can also customize the name as it appears in the icon tile – even the
background color of the tile.

Here, we used the features found in the Chrome browser to add our app as an application
shortcut
. Once again, the icon and shortcut name is taken care of for you.

See the top left corner – near the Orange FireFox tab – the app has been saved
as a pinned tab, and can be started at any time immediately.

PowerPoint Import

AppCobra allows you to import PowerPoint presentations.

These can be imported as:

  • A series of images; or
  • A series of editable objects – so all the content of the presentation are editable after import.

Using our PowerPoint Developer’s Guide, you can even pre
apply events and actions in the PowerPoint presentation, and they are applied
automatically as the presentation is imported.

Interaction

Ahhh – interaction. The lifeblood of a real app. And by interaction – we don’t just mean click here to continue. We are talking about complete and engaging interaction – not just for navigation, but to actually create results unique to each user.

You can set any object up so that it can be moved, rotated, and/or scaled – by
mouse or by touch.

Create and use sliders to allow the user to get involved – with dynamic
results.

You can even construct dialog boxes to allow users to control what is visible,
or how something operating, in your app.

This example uses the features found in the AppCobra API to
create a simulation of speeds of various people and animals – and they race
onscreen. The user can select what person or animal to put in each lane.

Here, drag features are used to track where and how the user drags an object on
the screen. Usg the API, you can track each movement and drag release to the
pixel.

This example uses movement – and checks where the user touches or clicks on the
screen to create an interactive game.

Create surveys, where the results can be emailed directly to you from the app.

A classic hangman game created in AppCobra. Try that with any other tool.

Here, the AppCobra jigsaw feature is used as a basis of a jigsaw game.

In this interactive game, the user fills in a series of text boxes in order to
create a dynamic story. The resultant stories can be saved to the userdevice,
and reloaded at any future time. AppCobra fully supports saving and reading
data to the local device using localstoreage APIs.

Other Automated App Elements

With a single command, you can add all sorts of objects and elements to your apps.

Add and control clock objects.

Create your own digital clocks and timers.

Add calendar objects with a single command – and control and keep a track of
them using the AppCobra API.

Add and redraw interactive graphs with a single line of code.

Add domain or password level support to your apps.

Progress bars are a snap.

Add other web content, such as web pages and PDF file directly inside your
apps.

Create tables with the built in table editor. Format individual cells, and even
add images.

Mobile Features

In order to create really cool apps, you’ve got to be able to take advantage of all mobile device features. This includes:

Geolocation

Geolocation. Geolocation works on all devices (assuming a modern browser is
used – as well as, of course, on mobile devices.

Accelerometer

With AppCobra, you can check the device accellerometer to see if the device
moves on the x, y, or z access – ar around 50 times a second.

Touch Interface

We talked a little earlier about how AppCobra allows the user to swipe from
page to page – and also up and down – and also individual objects. You can
also, with a simple click – support a page curl like effect as the user changes
steps.

We looked at this image earlier – but we wanted to reinforce that full touch
interface is supported by AppCobra. In this example, the user can use standard
touch gestures to scale, move, and rotate this object – or any object.

Download to Local Device

AppCobra fully supports the HTML5 download feature. This allows apps to be
completely downloaded, and run on a user machine, with no Internet interface
required.

Working with Images

HTML5 includes some wonderful new opportunities to create exciting animations and truly interactive and useful apps – thanks in one way to a HTML5 object called the canvas object.

Thanks to the canvas object, with AppCobra you can create apps like this:

This app is an image editor, which runs totally in a browser. The user can
select and edit their own images. Note that to use this feature in AppCobra,
you don’t need to know all the JavaScript related to the canvas object and how
it works – AppCobra takes care of all that for you.

You can even create your own drawing apps.

You can even create an app that allows the user to drag an image onto app to
add it start working with it.

Here, we added a slider – which the user can drag to cross fade one image into
another.

AppCobra supports the highest quality images available.

AppCobra also allows automatic and manual compression of
images.

You can include images at really high resolution for Retina display devices.

AppCobra will automatically resize and resample images during the app export process. This means that no matter what size it was when imported, it always ends up at the perfect size when you create the app – and will always be a lot quicker to download.

An added feature is that during export, AppCobra will examine all files and images in your app – and remove and redundant images to improve download speed and tighten app size.

Timing

AppCobra uses a range of timing features to allow your apps to look professional, and to create your animations.

For every object, you can determine an appearance delay, and a disappearance delay.

These appearance and disappearance delays can be synchronized with an audio file, if you wish.

Every step can contain one or more timeouts that activate events after a certain time – like display a message, move to another step, show a movie – whatever you like.

A range of timers are available – like a maximum app time, an app timer, a step timer for each step, and a timeout timer.

Add and control clock objects.

Here, a timer displays how long is left in the current step.

Using timing and other AppCobra features allows you to create time lapse apps –
play the time lapse, in this case, automatically, or manually – even in normal,
or slow motion.

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.

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.