Tag Archives: html5

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!

Creating a Multiple Choice Quiz in HTML5

In this article, we’ll look at how you can create a multiple choice quiz 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/thesimpsons.

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.

Features

This document covers the multiple choice quiz features of AppCobra,
including:

  • Opening a Quiz Template
  • Modifying the Quiz Template
  • Changing Title
  • Selecting a Quiz File
  • Editing a Quiz File
  • Setting Quiz Options
  • Running the Quiz

This script uses an Australian Birds Multiple Choice Quiz as its basis. In this demonstration, we open an existing multiple choice quiz template, and edit and add to this template. We then select a quiz data file, add a new question, set some quiz options, and run the quiz.

Open AppCobra. Bypass the introductory dialog boxes so you are looking at a blank screen.

mcq003

Use the Apps / Open a Template / Open iPhone Template command to open a template.

A range of templates are provided to give you a head start on creating multiple choice quizzes. Each template can be used, edited, added to – you can even create your own. Select the template called iPhoneAppMCQ. Click on Open.

The template you open should look something like the image below:

mcq004

By this stage, you should be aware of general AppCobra screen areas, like the canvas, the objects list, and the timeline.

This quiz template has been designed to be fully ready to go. You can of course change anything about the appearance of this template you like – background colors, button colors and styles, fonts – even load a logo or other object.

While you can create your own quiz screen or template from scratch, you’ll find it much easier to start with a template and modify that template if necessary.

In this case, we are going to leave the template much as it already is – except for one thing – we are going to change the title of the lesson. To do this, select the App Settings / App Title command.

From the dialog box that then appears, enter the name The Simpsons, and click on OK.

mcq005

The canvas should now look something like this.

mcq006

Even though this is a quiz template, in general, it can be edited like any other AppCobra app. You can insert steps before or after the first step, load movies, other images – whatever you like. The only caveat when editing a multiple choice quiz template is that scoring for any other events will be ignored – scores are only tabulated based on multiple choice questions presented.

This means, for example, that you could insert a step before step 1, insert a movie, and then allow the user to move onto the next step where they answer questions that may be based on the movie they just watched.

Move to Step 3 by clicking in the Step 3 area in the timeline. Your screen should appear as below:

mcq007

When the last quiz question is answered, the user is automatically sent to the next step – which appears here. In this template, we let users view their results. If you click on Step 4 in the timeline, you’ll see this:

mcq008

In this case, we have a number of text objects defined using variables to display such things as the user score, and a summary or quiz results.

Move back to Step 1 by clicking in the Step 1 area in the timeline.

Assuming we are now happy with the appearance of our template, we are now going to edit the quiz data and options. To do this, select the Assessment / Multiple Choice Quiz Setup command. The following dialog box will appear:

mcq009

In the first tab of this tabbed dialog box (Quiz Setup, as seen above), you determine what quiz file to use with this template. A quiz file exists separately to the AppCobra template itself.

The first option in the Quiz Data File section is to load a quiz data file. Quiz data files are actually separate files to a standard AppCobra file or template. This allows you to easily move a series of
questions from one template to another in seconds.

As a part of this template, a quiz data file has already been selected, but you can select the Browse button to select a new one.

Now, however, we are going to use the current quiz file loaded with this template. Select the Edit / Create New command to view and edit the current quiz data file. When you select this command, you will see the following dialog box:

mcq010

In this quiz dialog box, you can already see some questions and possible answers that have been inserted. The following details explain what each section in this dialog box can be used for.

Question:

Question: In this text box, you enter a question – whatever you like. This is a question that will be presented to the user.

Question Image: To the right of the Question Text Box is a picture box. It will either contain a picture or the text No Image. You can right-click on this picture box to load a picture that will be presented as a part of the question. This picture will be displayed with the quiz question. This is optional.

Question Type

In this list box, you can select from Only One Answer May Be Selected, Multiple Answers May Be Selected, Multiple Answers May be Selected, but only one is correct, or True/False. This determines whether the user may have to select multiple answers as a part of the current question.

Time Limit

If you want to limit the user to a specific time to answer this question, you can select it here. This is optional.

Question Group:

This section is optional, but allows you to group questions within a quiz file, so that when you export the quiz, you can select a number of questions from each group to include in the quiz. The Create New Group button next to this listbox allows you to create a new group.

Comments:

Correct Comment: In this text box, you can enter some text that should appear should the user get this answer correct. This is optional.

Correct Comment Picture: To the right of the Correct Comment text box, you can load an image that may also appear if the user gets this answer correct. This is optional.

Possible Answers:

Answer X: In each of the Answer Text boxes, you can enter a possible answer for this question. Only Answer A and Answer B are mandatory. Whether you enter more possible answers is up to you. It is possible to have, in the same quiz, two possible answers for one question, three for another, and four for another. KP automatically hides the other possible answer buttons when necessary.

Correct / Incorrect List Box: In the top list box next to each answer, you can select whether this possible answer is the correct, or incorrect answer. Multiple correct answers may be set only if Multiple Answers May Be Selected is selected from the Question Type list box.

Points: Below the Correct/Incorrect List Box for each question, you can set how many points this correct answer is worth. The default is one.

Answer X Comment: To the right of each possible answer there is a text box where you can enter a comment. This is the comment you want to appear should the user select this option. Any text in this text box
will override the Correct Comment and/or Incorrect Comment text boxes, explained above. This is optional.

Answer X Comment Picture: At the far right of each possible answer is a picture box, where you can load a picture that should also be displayed should the user select this answer. This is optional.

Randomize Distractors. Enabled this option to ensure that the possible answers are randomized each time the lesson is run.

Navigation:

mcq001 allows you to move from one question to another. You can also add, remove and duplicate questions using the buttons on the right of the top toolbar.

Click on the Next button in the top toolbar mcq002 to view Question 2. Your screen should look something like this.

mcq011

In this case, the question itself is similar, but the possible answers, images and comments are all different.

Click on the Previous button in the top toolbar to view Question 1 again. Your screen should look something like this.

mcq010

We are going to insert a new question into this quiz. Click on the Insert Question button in the top toolbar. You will see the following message.

mcq012

Click on Yes to insert the new question before the current question. You will now have a blank screen.

Enter the following questions, possible answers, and images:

Question: The oldest son in the Simpsons is called:

Question Image: Leave blank.

Your screen should now look like this:

mcq014

For Question Type, ensure that Only one answer may be selected is selected. For Time Limit, select 30 seconds.

Leave the Correct comment and Incorrect comment text boxes empty.

Enter Bart for Answer A. Ensure that correct is selected, and that this is worth 1 point. For the Answer A comment, enter Yes, Bart is the oldest son.

Your screen should now look like this:

mcq015

Enter the following details for the other possible answers.

Enter Lisa for Answer B. Ensure that incorrect is selected. For the Answer B comment, enter No, Lisa is the oldest daughter.

Enter Maggie for Answer C. Ensure that incorrect is selected. For the Answer C comment, enter No, Maggie is the youngest daughter.

Enter Marge for Answer D. Ensure that incorrect is selected. For the Answer D comment, enter No, Marge is the mother.

Your screen should now look like the following:

mcq016

We are not going to use the Answer E possible answer or Answer F possible answer for this quiz.

We are now going to save this quiz file. Use the Save As button in the top toolbar. Select a folder somewhere on your local hard drive to save this quiz file to.

mcq017

Once you’ve done this, click on the Load button.

You’ll then be returned to the Quiz Options Screen.

mcq018

In the Quiz Options section, you can now select options that will either add to quiz functionality, or override some settings set in the quiz data file that has been loaded.

Use All Questions in Quiz: Use this option to present the user with all questions in the quiz file, in the order that that appear in the quiz file.

Use All Questions in Quiz Randomly: Use this option to present all questions in the quiz in a random fashion.

Use a Subset of Questions in Quiz: If your quiz data file has, for example, 60 questions, you can select a maximum number of questions to present in any one attempt by a user.

Use Questions From These Groups: If your quiz data file contains groups, you can select here how many questions to ask from the groups defined in the quiz file.

Now click on the Advanced Quiz Options tab. You’ll see the following options:

mcq019

Use Feedback as Defined in Quiz Data File: If this option is selected, the various comments inserted in the quiz data file will be used when the user selects an answer (correct or incorrect) and will override any settings you made in the Display this feedback for all Correct Answers or Display this feedback for all Correct Answers options below. If this option is not selected, all comments in the quiz data file will be ignored, and not displayed at all.

Display this feedback for all Correct Answers: This option allows you to override any comments for correct answers set in the quiz data file with a global message should the user get the answer correct.

Display this feedback for all Correct Answers: This option allows you to override any comments for incorrect answers set in the quiz data file with a global message should the user get the answer incorrect.

In the Timed Questions section, you can override any quiz question timing settings made in the quiz data file with global settings, or cancel any timing at all. A Message When Time Limit Reached can be
set to display should the user not answer a question in time – if nothing is inserted in this text box, the next question will immediately appear when a user times out.

The Skipping Questions options relate to the feature where you can allow a user to skip a question, and come back to it later in the quiz (when all other questions are complete). To use this option, a button must be defined on the canvas with the event Skip Quiz Question – otherwise Skip options are ignored.

Finally, you can set a Selected answer color. This is a color that an answer selected by a user will turn when it is selected, to indicate that is has been selected. To use this feature, a button must be defined on the canvas with the event Submit Quiz Answer – otherwise when a user selects an answer, it is submitted immediately, and does not change color.

When you have selected all the answers you want to select here, click on Preview to see how the quiz works. The following screen should appear.

mcq020

Click on the Begin option to view the quiz.

mcq021

The first question, randomly selected, appears.

Based on the data we entered for this quiz, and the options selected in the Quiz Options dialog box, a comment and an image appears when you select an answer. Once you click on OK, you move onto the next question.

mcq022

mcq023

mcq024

At the end of this quiz, a results summary is displayed. This is totally optional, and just happens to be have been set to display in the template we loaded. This is similar to the information that would be sent back to a Learning Management System.

mcq025

Now close this preview window down. You should then return to the AppCobra screen.

We are going to load a new quiz data file, and leave this template alone except for one thing – the project title. Select the App Settings / App Title command.

From the dialog box that appears, enter the text Famous Bands, and click on OK.

mcq026

Your screen should now look like the one below.

mcq027

Once again, select the Assessment / Multiple Choice Quiz Setup command.

We are going to leave all the same options set, except we are going to load a new quiz file. To do this, select the Browse… button next to the Quiz Data File text box.

From the AppCobra / Quiz Data Files directory, select the quiz data file Famous Bands, and click on Import.

Technical Note: If you wanted to now edit the quiz data file you just loaded, you would select the Edit/Create New button from the Quiz Options dialog box.

When you return to the Quiz Options dialog box, click on the Preview button. The quiz data file and the template will be combined, and the result will be previewed in a browser window.

mcq028

Creating a HTML5 Survey

In this article, we’ll look at how you can create a survey app that will play back directly in any modern browser. The results of the survey will be emailed directly to your email account. 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/MySurvey. You can download the AppCobra project used in this example from http://www.appcobra.com/examples/mysurvey.kti.

survey6

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 Survey

First thing we do is create the survey and questions using normal AppCobra features. It is much like creating an assessment – you can create multiple choice, fill in the blanks, drop down list, etc – but in this case, there is no real right and/or wrong answers – just answered selected by the user.

survey1

Getting the User Name

On the first step, however, we do something a little different. We create an editable text box, and give it the alias (Properties / Alias) username. In this box, we ask the user to enter their name. This is so that when we get the results, we know who answered the survey. On the submit button in the step you see below, we simply use the event Go to Next Step.

survey2

Creating the Questions

Below, you’ll see some of the example questions we created.

survey3

survey4Here are a few links to show you exactly how we created these multiple choice questions – plus a few other links to create other assessment like questions.

Let the User Add a Comment

After the last question (we only have two in this example), we created a page with a freeform text entry object on it, to allow the user to add a comment, or freeform answer (see http://www.appcobra.com/help/index.html?topic=freeformtextentryquestions for more details on how to do this):

survey5

Submitting the Results

Finally, we have to add the feature that submits the results of the survey – and we need to tell the App what email address to send the results to.

When you look at the AppCobra project for this example, you will not that each question is still actually scored. Normally, scoring is associated with a right/wrong answer – but in AppCobra, it also means simply that the results are to be recorded.

Now, to do this, we move to the very last step in our survey – perhaps one where we thank the user for taking part. In our case, this looks like below.

survey6

Now, we need to select an object from this page. Any object will do – the image, the text – just as long as it only appears on this step.

Then, we select the Interact / All Events command. We select the action called Email Results Silently.

survey7Once you’ve selected this event (Email Results Silently), there are two ways you can tell the app where to send the results.

First, you can enter you KnowledgePresenter Q (also called KPQ) account name, and email address. Assuming you have a KPQ account (and all AppCobra licensees get one for free), you enter the details. This allows the app to send the results directly to your email account without any user interaction – in fact, the user probably won’t even realise an email is being sent. It does not use their email client or account at all.

The second method is to fill in the URL to send information to: line. If you enter a URL here – and it can be any URL you like, the app will send the survey data to this URL as a form. And the page can then read the form data, and do with it what it wishes – record it to a database, send an email, or both.

You can only choose one of the methods described above.

Making the Results Make Sense

When you receive the results for this survey, it will look something like this:

survey10

See how you see each question, and exactly what the user selected for their answer? AppCobra has a feature, called Objectives (see http://www.appcobra.com/help/index.html?topic=lessonobjectives), that allows you to set the actual name for each question as it will stored, or emailed. This command, once you’ve filled out the objective names, looks something like this in our example:

survey8

Setting the App as a Survey

As some stage, you have to tell AppCobra that this is a survey, and not a test. This is simple. Just select the Assessment / This App is a Survey or Poll command (ensure it has a tick next to it).

survey9

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 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?