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.

HTML5 provides an API to store data locally in the browser (as opposed as on the server). This is called Local or Web Storage and all current browsers support it.

With Local Storage, it is possible to make web applications more responsive and impose less strain on servers and this is valuable when the number of concurrent users increases beyond a certain limit.

The work to do is:

• Use Local Storage to remember the name of the last country entered by the user.
• Track changes to Local Storage using the storage event.
• Use Local Storage to memorise the songs from a given artist in case the user wants to display details about that artist again. This minimises the number of requests which need to be done to the Web Service while also increasing responsiveness.

AJAX is a powerful technology. It allows client-side applications to send requests to servers and, when the data comes back (most probably in XML or JSON format), the application can manipulate the DOM and, hence, change the layout and content of the webpage being shown.

AJAX programming can be problematic because of the asynchronous behaviour. Callbacks need to be properly designed to prevent surprises.

The work to do is:

• Make AJAX queries to Last.fm to get the most popular songs of the three existing French artists
• Make AJAX queries to Last.fm to get the three most popular artists in France (as well as their songs)
• Allow the user to enter a country name and displays the three most popular artists in that country as well as their songs. At this point, it’s interesting to understand the difference between normal and AJAX form submission.

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.

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:

• Hypertext Markup Language (HTML, now in version 5)
• Cascading Style Sheet (CSS, now in version 3)
• Javascript (standardised as ECMAScript and implemented by most mainstream browsers)

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:

• W3C Markup Validation Service (for HTML)
• W3C CSS Validation Service (for CSS)
• JSLint (for Javascript)

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.

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

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)

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

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

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.

When starting with Digital Marketing and Social Media, it is tempting to just create content and post them as soon as possible without any planning. Sure, this is better than doing nothing but, sometimes, engagement can be low. One reason, of course, might be the quality of the content. But another reason might be that people didn’t see the post because, well, they weren’t using their smartphone or computer when the post was published.

Scheduling posts at appropriate times is important in order to have maximum impact. Interestingly, people visit different social networks at different times. In fact, a lot of studies have been carried out on this subject and they are sometimes contradictory.

Nothing beats testing and relying on your own observations to decide when to post.

But here are some guidelines for the most popular social networks:

• Generally people do not access Facebook at work. Most of them do so at home and 6pm-8pm might be an effective time to engage with them. Some studies show that people tend to be more present on Facebook at the end of the week. Friday at 3pm (just before they leave work) might be a good time to engage with them. During the week-end, Facebook is accessed more regularly.
• LinkedIn, being a social network for professionals, tends to be used at work. The most effective engagement period is around noon when people are having lunch and have some time to browse.
• Twitter is more often accessed through mobile devices — only a few of us use the Twitter website. Effective engagement times are around noon and from 6pm to 8pm.

Using interesting photos in a post generate higher engagement. More and more people are using mobile devices so keeping things short and simple is not a bad idea.

For those who intend to post regularly, a tool such as Buffer might be useful. In essence, Buffer allows you to queue your content which is then shared on social media at specific times as decided by yourself. Doing the same thing manually is also possible but can be error-prone.

Online advertising

Even though there are studies which show that people tend to ignore ads when they browse, ads can still be effective if designed properly and are not overly pushy (help before selling!).

Online advertising is currently synonymous with Google AdWords and Facebook Ads. Other advertising networks exist but are used less frequently.

Google advertisements can appear at two different places: on search results pages and on partnering websites (which Google call its partner network — this includes YouTube). Google AdWords is a complex web application which enables a digital marketer to create campaigns (with set budgets), ad groups (which share the same set of keywords) and both text and graphical ads at various dimensions. Reporting facilities are extensive and, with some experience, it is possible to have ads which are effective yet do not cost a lot. It is possible to use Google Web Designer to create animated ads.

Facebook ads appear in Facebook and can be used to promote a page, a specific post on a page or a website. Facebook ads appear to specific demographics (e.g. based on sex, age, interests, existing relationship with your organisation, etc.) In Mauritius, as people tend to spend a lot of time on Facebook, having ads there can be very beneficial if proper targeting is done. It is better to restrict views thanks to better targeting than having a lot of views with no engagement.

Recently, Facebook has stopped flooding people with posts from their friends or from pages they like. Posting in a Facebook page will only generate a few views. The only effective way to make more people aware of the post is to promote it.

Work to do

Create an account in Buffer (if you do not already have one) and explore it. Pay special attention to the scheduling part. Comment on its usefulness for your organisation.

Explore Google AdWords and Facebook Ads. Create campaigns, ad groups, ads. Decide on keywords and demographics. What kind of budget should be allocated to online advertisement?

Although Facebook is currently number one in terms of reach and use, other social networks are also worth exploring as people engage on new platforms according to their interests and profiles.

LinkedIn targets mostly people from the professional world and is thus very interesting for those who are in the B2B market and also for spotting new talents. Like on Facebook, one can create a personal profile, a company page or a group. The LinkedIn groups can be very interesting if you know how to choose which ones to participate in and invest time to boost your group contribution level. These can help you significantly increase your credibility within a professional circle.

Twitter is a very good example of a network of interest as relationships do not need to be reciprocal. The inclusion of photos or videos in tweets tends to attract more attention. Tweets cannot exceed 140 characters in length and thus have to be to the point. Link shorteners such as Bitly are useful to keep your tweets short and also to provide statistics on clicks.

YouTube, the most popular video sharing website which is owned by Google, is also a powerful social network. It attracts all kinds of audiences: people wanting to entertain themselves, people who want to learn new things and people who have created videos themselves and are looking for an audience.

Pinterest is described as a visual discovery tool. Users create and share collections of pictures related to their projects or products they like on boards called “Pins”. Most of the users of this social network are women who like to pin pictures of fashion and home-related products, recipes they love as well as trips and events.

Instagram is used to share, like and comment on photos and videos. It enables its users to apply digital filters to their pictures and share them on a variety of social networking services. The service, which was acquired by Facebook in 2012, is increasingly being used by young people.

Other interesting social networks include Google+ (Google’s social network in which people organise their connections within circles), Snapchat (photo and video messaging application which allows users to set a time limit for how long recipients can view their snaps) and Tumblr (a microblogging service used by a lot of young people).

Work to do

Use the ‘Find a group’ facility in LinkedIn to identify an interesting group to participate in. Explore the Twitter user interface and the Tweetdeck service to determine how Twitter can be useful for your business.

If you had to create videos on YouTube, say which type? How would you proceed to do that? What kind of equipment would you need? Another possibility is to only share existing videos. Discuss on the effectiveness of both techniques.