User Interface Elements

This topic is part of our Mobile Application Development with HTML5 training

jQuery Mobile has a number of elements like buttons and icons to make the user interface more usable. jQuery Mobile also provides a number of built-in themes as well as allow the developer to customise the CSS attributes of any element being shown.

The work to do is:

  • Add a theme to the initial page (including the header and the footer)
  • Use custom styles using normal CSS
  • Create and use a custom theme made with ThemeRoller
  • Fix the position of the header (or the footer)
  • Add icons to buttons
  • Group buttons
This topic is part of our Mobile Application Development with HTML5 training

Application page structure

This topic is part of our Mobile Application Development with HTML5 training

jQuery Mobile is a new Javascript-based web framework for smartphones and tablets. It is based on HTML5 and builds upon jQuery and jQuery UI.

The work to do is to update the website designed in the previous topic to use jQuery Mobile concepts and components:

  • Add jQuery Mobile CSS and Javascript to an existing web application
  • Change the web page to conform to the page anatomy of jQuery Mobile
  • Add a simple pop-up dialog
  • Transform a single-page document into a multi-page document
  • Add different transitions between pages

The objective is to build a web application which renders properly on the limited screens of mobile devices.

This topic is part of our Mobile Application Development with HTML5 training

DOM manipulation with Javascript

This topic is part of our Mobile Application Development with HTML5 training

Javascript is a powerful and expressive programming language. Learning how to write Javascript properly by focusing on its good parts (and ignoring its bad parts) is a necessity if one wants to create maintainable code.

The work to do is:

  • Show a simple alert while the webpage (created previously) is loading
  • Use window.onload to execute code only when the whole content has been loaded
  • Display the number of songs in an alert
  • Show additional statistics like number of distinct countries and their names
  • Hide all country names using Javascript and some CSS
  • Use a timeout and callbacks to show/hide countries every second

The next step is to enhance the application to use jQuery (ready function, selectors, etc), one of the most formidable Javascript libraries ever.

jQuery can be used to easily:

  • Display the table of songs with stripes (with the help of some CSS)
  • Toggle the striped rows in the songs table when the mouse is over the table
  • etc.

Finally, it is also important to know how to use a library like Underscore.js which provides a collection of useful functions (such as map, filter, uniq, etc.) to increase programmer productivity. Underscore.js simplifies existing (non-functional) Javascript code and, hence, make it more maintainable.

This topic is part of our Mobile Application Development with HTML5 training

Introduction to HTML5

This topic is part of our Mobile Application Development with HTML5 training

HTML5 is World Wide Web Consortium standard for the construction of web applications (including web applications for mobile devices) as opposed to the construction of classical websites.

In practice, HTML5 includes:

The relevance of HTML5 for mobile development is that the two major smartphone and tablet platforms, namely Apple’s iOS (used on iPhones and iPads) and Google Android, have HTML5 compliant browsers. In fact, both platforms use the same Webkit open source browser engine which means that, say, a web application which works correctly on an Android smartphone is bound to work correctly too on an iPhone. Interestingly both Google Chrome and Apple Safari also use Webkit and, consequently, mobile development can start on, say, Chrome and it is expected that the app, when moved to a mobile device, will behave similarly. This is the actual process we are going to follow during this training.

As a web developer, it is important to always make sure that the HTML, CSS and Javascript are properly validated. This can be done by using the following online validators:

The work to do is to progressively build a webpage such as the one shown above. You should use the latest HTML5 tags (such as header, nav, section, aside and footer) as well as CSS3 to style and format the content.

This topic is part of our Mobile Application Development with HTML5 training

Advanced User Interfaces

This topic is part of our Mobile Application Development with HTML5 training

jQuery Mobile features a lot of advanced user interface elements such as collapsible content and sets, listviews and forms.

The work to do is:

  • Make the three French artists collapsible
  • Surround the three French artists with a collapsible set and make the first artist expand on load
  • Use a listview for the Indian songs and show a back button in the header
  • Add a filter to the listviews containing Indian songs
  • Add a feedback form (with some server side processing e.g. in PHP)
  • Handle swipes and taps appropriately
This topic is part of our Mobile Application Development with HTML5 training

Application Deployment

This topic is part of our Mobile Application Development with HTML5 training

It is possible to package an existing web application such as the one developed during the training into a native application. One of the ways to do that is to use Apache Cordova, a mobile opensource framework which supports seven mobile platforms: Android, iOS, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian. Adobe Phonegap is derived from Cordova and adds to it additional capabilities like building apps in the cloud.

The work to do is:

  • Install the Android SDK, Node.js and Cordova
  • Create a skeleton Android application using the cordova command
  • Copy the jQuery Mobile application developed during the training to the Android application
  • Test the Android application using a real Android device (or the Android emulator)
This topic is part of our Mobile Application Development with HTML5 training

Learning Business Studies on your smartphone

20141106-business-studies-cover

Last year, Sarvesh Nundalallee, a Business Studies teacher at Curepipe College, in collaboration with Knowledge Seven launched an Android application called Business Studies Volume 1. The aim of the app was to provide Business Studies students (at A-level e.g. Higher School Certificate and first year university) a way of preparing for their exams while on the move.

20141106-business-studies-appFollowing the huge success of Business Studies Volume 1, Sarvesh Nundalallee and Knowledge Seven are glad to announce the launching of the full Business Studies Q&A application. While the first version covered the Business Environment section of the program, this new version covers all six chapters of the program namely Business and its environment, People in the organisation, Marketing, Operations and project management, Finance and accounting and Strategic management.

Study whenever you feel like doing so

Time is a very precious resource for students. This application allows you to make the most of it by giving you the flexibility to study anytime, anywhere without having to carry a heavy Business Studies book.

Since the app works without an Internet connection, you just have to take out your smartphone or tablet and start browsing through a huge repertoire of questions and answers from exam papers of the past ten years. It allows you to make good use of your free time.

Know exactly what examiners expect from you

Many students are not aware of examiners’ expectations regarding the structure of answers to essay-type questions. Although marking schemes are available to students, many find it difficult to answer appropriately. The Business Studies Q&A app provides a list of model answers. This allows students to better understand how to answer correctly for maximum marks.

20141106-business-studies-creatorsAvinash Meetoo, Founder and CEO of Knowledge Seven, believes that this application will be very beneficial to Business Studies students and that the future of learning resides in leveraging the use of technology to enhance the learning experience. He therefore invites other teachers who would like embark on a similar adventure to contact him on 5493-9394 or send him an email at avinash@knowledge7.com.

Downloading the app for free

The app can be downloaded from Google Play Store. Questions and answers for the first chapter are free while questions and answers for the other chapters can be activated through in-app purchases. Get one chapter for $1.49 or all chapters for only $4.99.

Have fun studying with Business Studies Q&A. Do not hesitate to share with your friends and family.

Community management and moderation

This topic is part of our Effective Digital Marketing training

our little secret 2

As we have seen earlier, the major innovation brought by Web 2.0 is that consumers now play a major role in mediating and even shaping the organisation’s communication. A business needs to turn this to its advantage by creating and sustaining a community of fans who can positively relay its brand image.

First listen

It starts first of all by knowing who your fans are, listening attentively to them to understand their concerns, expectations, and desires. A few years ago, companies like Dell and Kodak created a new marketing role: the chief listener.

Though few companies have adopted the job title, many have integrated the notion that having real and direct data about and from their customers is a key to successful online marketing. This includes monitoring customer feedback on all platforms and social networks.

Then, respond

Once you have the feedback, you must do your best to respond. This does not mean that you need to promise things that you will not be able to deliver. Instead, you need to show how hard you are trying. It may include giving a sneak peek at your business from the inside for instance.

In times of crisis, it also includes being able to respond as quickly as possible in as honest a manner as possible in your own words and voice. This means that you establish a direct line of communication with your customers rather than rely on mass media or a PR agency. You reduce the risk of delay as well as misunderstanding and distortion of your message.

Don’t forget to do the following:

  • help people by providing useful unsolicited advice
  • respond directly to questions
  • thank those who express appreciation
  • respond calmly and positively to criticism

Identify your best fans

20140814-fans

You can motivate fans by congratulating and making regular offers to those who participate actively in your community. Ideally, after some time, fans will become proactive and will act as leaders and ambassadors of the brand by themselves. Successful brands are those who are able to create such a community of fans and sustain it over time.

Good moderation = good ambiance

The role of the community manager is still key as he/she is the one who ensures consistency and sets the tone and ambiance within that community (e.g. cool/relax, humouristic, technical, philosophical, etc.). The social media presence should be constantly monitored and moderation is crucial. A good moderator will not necessarily censor users’ comments (except for obvious breach of the country’s laws). Instead, he/she should be able to take heated comments calmly and provide rational and clear answers.

Work to do

Review your company’s social media presence with particular attention to your Facebook page. How could you improve your online communication and create positive communities of fans?

20140813-hands

This topic is part of our Effective Digital Marketing training

User engagement techniques

This topic is part of our Effective Digital Marketing training

20140813-facebook-games

In this age of information overload, it is important to use efficient engagement techniques to prevent users from forgetting you. Here is a list of possibilities.

Games

People love games!

Of course, people only play good games and they tend to do this for many reasons: pleasure, competition, rewards (e.g. badges). Some people are even ready to pay in order to play.

Imagine creating your own game on Facebook and making it become successful. This can be very beneficial for branding, obtaining leads and even promoting your products through custom ads.

In addition to games, there is a tendency towards serious apps adopting gamification techniques. This is true for local apps (say, showing things happening nearby), apps for healthcare and for education, among others.

Do not hesitate to contact us for creating your own Facebook apps.

Contests

20140813-spot-the-dew

Contests are also a good way to drive user engagement. Contests which work well are those which allow participants to upload their own user-generated content e.g. images, videos, etc.

It is also possible to create a contest where users are asked to complete a challenge and reward those who win with interesting prizes. In the picture above, you can see such a contest that we created for QBL. The idea was to show different pictures to the Facebook user and ask him/her to count the number of Mountain Dew bottles in each of them. Winners were rewarded with prizes.

Other ways to drive user engagement

20140813-save-money

Money is a scarce resource. Allowing people to save money is a good way to drive user engagement online. There are various mechanisms for doing so. For example, an organisation with a Facebook page can reward regular fans with coupons or early notice of upcoming promotions. It is also possible to ask fans to tell all their friends that they are visiting a certain shop and reward them with gifts, discounts, etc.

Another way to increase user engagement is to create a question of the week and/or create polls. People like to respond to challenges. Human beings like to brag… when they win.

Work to do

Conceptualise a game which is relevant to your target audience and which will drive user engagement on your Facebook page.

This topic is part of our Effective Digital Marketing training

Copywriting and visual design

This topic is part of our Effective Digital Marketing training

20140813-copywriting
Copywriting is the art of writing for a purpose. As such, you first need to know who is your target (audience profiles) and what outcome you hope to achieve with them (inform, influence, persuade, sell). During a previous session, you outlined a list of personae which you need to target for your product.

This will allow you to determine what type of content you need to produce for them as well as the format, language and level of technical detail which will be most appropriate for each target. You should also think about the keywords which need to appear in your copy to attract their attention.

Focus on benefits, not features

20140813-Levitt

Focus on the benefits rather than on the features of your product. What will your audience gain from using it? Will it make their life easier or better? Will they save time or money so that they can do other things? Will they become better persons? How can your product fulfill your customers’ needs? Of course, you need to be careful not to overpromise!

Once you have determined the type of content, pay attention to the structure of your copy. The techniques which we usually learn about in school or at university for writing academic papers do not apply. For instance, for academic writing, we are taught that we need to structure our copy in the following way:

  • Introduction to general context
  • Idea or argument #1
  • Idea or argument #2
  • Idea or argument #3
  • Conclusion

But, this can be very boring and off-putting. And in business, you cannot afford this. You want to write for impact and thus need to grab the attention of your readers right from the start. Especially in this age of abundance of information and scarcity of time. People do not want to waste time going through your copy to find the key points.

20140813-pyramid

Using the inverted pyramid

You need to adopt the method of the inverted pyramid for structuring your copy. This is used extensively in journalism. It consists of putting the most important information at the top and providing multiple visual entry points to facilitate skim reading. You should use headings and sub-headings, a lead paragraph and illustrations.

The length of sentences should vary with a preference for shorter ones. Headings and body copy must be concise and clearly expressed in plain and objective language. In his essay Politics and the English Language, George Orwell advised that we use shorter words, cut out unnecessary ones and use the active voice when writing.

The power of images

Visual elements are powerful tools to grab attention, illustrate your message and even replace words. These can be in the form of pictures (drawings and photos), charts or videos. You can use stock images if you do not have your own photos but you should ensure that the content is relevant to your target audience (for example in terms of people and environments featured) and does not infringe copyright.

It is very important to pay attention to the layout and use of space. Many people tend to want to use as many colours as possible but this can be very tiring for the eyes. There should be harmony in the use of palettes as well as in the use of typography.

20140813-white-space

The urge is also to cram in as much information as possible. As a result, visitors do not know where to look and become confused. White space helps as it provides visual breathing room for the eye by providing breaks from text or graphics. It also helps make important information really stand out. An example of a page which uses white space can be seen on the Mauritius Vibrations website, a mobile app to stop you feeling bored in Mauritius.

Finally, if you want to create leads for your sales, you need to include a call to action (CTA) to provoke an immediate reaction. Use active verbs such as sign up, subscribe, call, buy, donate, etc. Sometimes you have to offer a little extra (discount, entry in a competition, a free gift) in order to create a sense of urgency.

Work to do

Write a post which targets one persona profiled for your product. Ensure it provides valuable content from the point of view of this audience. Illustrate the post with an appropriate image.

This topic is part of our Effective Digital Marketing training