Mobi Acedemy Mobile Prototype Content

7/30/2019 Mobi Acedemy Mobile Prototype Content

1/18

Jitendra Shahs FMP Mobi Academy

Introduction

Native Android Applications can be developed in its native code, Java and Iphone applications can be

developed in Objective-C but using one or the other means coding 10,000s of lines of code.

Smartphone applications can now be made using the same web technologies, websites are made ofand total up to 200 lines of code for a simple application!

The languages used are HTML5, CSS3 & JavaScript buy using the right frameworks. All you really

need to understand is the HTML as most of the heavy lifting will be done for you!

HTML5

HTML5

Stands for Hyper Text Mark-up Language is a mark up language which is written within < / >

brackets and is used to represent and display data inside of web browsers, on the internet.

The latest version of HTML5 has made the coding process easier and more logical thanks to its new

set of meaningful tags such as the header tag for the header, the nav tag used for navigation and

the p tag used for paragraphs

Header Content

Navigation Links

Paragraph

CSS3

CSS3

CSS which stands for Cascading Style Sheets is a styling language that works with HTML to make the

HTML look good and is used for positioning and presenting HTML however you want. Using this

alongside HTML, CSS is used to describe the presentation for HTML tags such as the font, colour,

layout and size. When it comes to writing CSS, a HTML element is called and the CSS code is written

inside curly brackets { } and every line of CSS ends with a semi colon ;

HTML tag {

The CSS code goes here;

}

JQuery Mobile


2/18


jQuery is a language developed from JavaScript and is the easy version of JavaScript! jQuery Mobile

(developed by the people behind jQuery) is a touch optimized user interface framework compatible

with most smart phone devices. Designed to simplify the development of mobile applications, the

jQuery mobile framework has all the CSS and JavaScript code you need to develop popular user

interface such as mobile menu items and navigation.

To use it, all you need to do is use the frameworks preset HTML tags and everything else is

generated by the framework. Their write less, do more motto sums up the framework and is why

you do not need to know any JavaScript or CSS what so ever to get started but will always come in

handy if you are familiar, even on a basic level.

Code Editors

To start coding, you will need a code editor. Notepad is an obvious and popular choice but is not the

most practical choice as it was not originally build to coding to begin with.

Code editors, built for coding allow you to efficiently test your code on the browsers installed on to

your computer, they colour code and highlight lines of code making it easier to follow and read and

also, using a code editor to develop is over all, good practice.

Some popular code editors are:

Notepad++

Lightweight, has many features and can also be extended with plugins. Originally built for Windows

but can be used on all major Operating Systems

Comodo Edit

Just as good as Notepad++ but with less features. One of its popular features is just like the firebug

feature of being able to select elements inside a What You See Is What You Get Editor (WYSIWUG)

to pick out the code and directly edit it!

Firebug

This is an in-browser code editor and will be looked at in a later section for when it comes to

customizing the application. This editor isnt so good for starting off development as it is for

customizing what you have developed later. You can also use it to view other websites and web appssource code and is good to learn code or adapt from other peoples.

Getting Started

To get started, open up your text editor and save the blank file as index.html.

The .html extension will tell your text editor that you are starting a web page and that to open it

using your default web browser. Whenever you land on your website the index page is the first

page you land on. This is your home page.


3/18


The first line of code is going to be < ! doctype > which tells the browser you will be writing HTML

code

Inside The head

After the doctype comes three important HTML tags, the html tag, the head and the body.

Everything you ever write will be inside a single html tag and will finish with a single html tag. This is

to let the browser know that whatever you write in between these tags is html code

The head tag contains all the information of the website such as the title of the page along with the

files which play a part to make the page work which in this case are the JavaScript and CSS files. All

of this is hidden and will not be seen by the browser, it will just make things work.

The body is where you code all the physical items for the app and this will be seen in the browser.

To help you remember what goes where:

The head is the brain of the page and the body is where all the organs are to make everything work

Mobi Academy

Header

Paragraph

The CDN

The Content Delivery Network (also known as CDN) is basically a few lines of code you just copy and

paste inside your web document. This then allows you to use whatever the hosted code is trying to

do without having to download any files.

A major advantage to this is that the web page doesnt have to load these files as they are already

hosted online and just makes use of its code. This allows the web page to load much faster.


4/18


However, if you wanted direct access to these files to, for example, edit them then you would have

to download them onto your computer and place them in the same folder as your project.

jQuery Mobile can be used just by copying and pasting three lines of code inside your head tag. You

can find the three lines of code on their websites download page.

Data Role Explained

jQuery Mobiles uses data-roles to bring up elements onto a web page. These are basically words or

phrases inside speech marks which are preset to a certain function. Using these data role functions

will allow you to utilize all user interface features jQuery has to offer, without coding them and are

quite simple to use.

For example, a buttons data- role will look like data-role=button and are put inside HTML tags for

them to work for that specific element.

The data role function does all the hard work for you and allows you to easily pull out elements from

jQuery, position elements according to the frameworks presets, theme an element along with some

advanced functions.

Thanks to data-roles, bare minimum coding is involved in developing your app as you let data-roles

take care of all the heavy lifting

If you wanted, for example a link tag which links to a seprate page if a data-role button function is

applied, the link will turn into a button

Link button

Link button

Header

This is the toolbar on the top which commonly contains the title contain navigational or action

elements such as the menu or back button which are positioned on either the left or the right of the

header bar.

Using navigational elements inside the header bar allows you to save space but using too many will

make your app look confusing and messy.

To generate a header, all you have to do is make a div with the data-role header inside of it


5/18


Just like on websites, the header uses the heading tag H1. These tags are sized in order of how big or

small you may want the heading to be (H1 being the biggest to H6 being the smallest). After the

header, close the div tag you originally created

The heading tag is useful for titling each page of your application

Header Title

Footer

The footer works in the same way as the header, but at the bottom of your application.

This is the toolbar that works in a similar way the header does button the bottom which can

commonly contain the sub title along with sub navigational or action elements positioned either the

left or the right of the footer bar.

Using navigational elements inside the footer bar allows you to save space but using too many will

make your app look confusing and messy.

To generate a header, all you have to do is make a div with the data-role footer inside of it

Just like the header, the footer uses the heading tag H1. These tags are sized in order of how big or

small you may want the heading to be (H1 being the biggest to H6 being the smallest). After the

header, close the div tag you originally created

The footer tag is useful for sub titling each page of your application

Footer Title

Fixed Content

Fixed content (also known as fixed positioning) is content which stays on the screen, in the same

position no matter how much you scroll. These are known as global elements and are useful for

things like immediate navigation. A good example of this is the header or even the menu button

which the user might always want access to or even menu items such as previous or next pages.

This can save the user time scrolling up and down each time they want to go elsewhere. You can

achieve this by using the data-role fixed attribute inside which ever element you want fixing so that

they stay in the same place regardless of how far you have scrolled


6/18


Header Title

Multiple Pages

If your applications page has too much going on then you can also separate each page into its own

HTML file which will also make the code easier to read, follow and organize. This might effect

loading times but doesnt seem to be much of a problem in most cases.

This method of other website pages has been the orthodox method of making websites and linking

to web pages for years and should be familiar to anyone whos familiar with making websites.

To link to another page, use the HTML link tag. When you specify which file it is going to link to,

make sure you add the . Html on the end of it so that it links to the right file too or it either will linkto another file with the same name or not work all together. Close the tag using the to let the

page know that the link ends here

First Menu

Second Menu

Single Page App

Instead of dealing with multiple HTML web page files for each page you create (the tradition

method) you can create all of your pages inside a single page.

Advantage to this is that it increases loading speeds but as you write more code on to the single

page, it may become harder to read and to keep up with it.

First Menu

Second Menu

List Menu

The list menu is a typical vertical menu you find on Smartphone applications which most

Smartphone users are familiar with. This list of items can group the same type of navigation

elements together in form of a listed menu and you can have unlimited amount of items.

If your application grows too complex then you might want to think about adding secondary menu

list items, on another page from your main menu items, allowing you to organize your menu more

effectively.

Using HTMLs unordered list tag you can generate a list menu. An ordered list will

generate a list with numbers along the side which you can experiment with


7/18


First Menu

Second Menu

Third Menu

Customizing List menus

List menu items can be customized by using a numbered list, using thumbnails, or even icons

depending on the look you are trying to achieve.

List dividers can be used to title each list in the page, so for example, List A then a number of itemsfollow it followed by List B all in a single list. Unlink lists which are generated using the unordered

list tag , a list divider uses just a list tag along with the data-role list-divider attribute

List A

First Menu

Second Menu

List A

Third Menu

Fourth Menu

Nav Bar

A basic navigational element similar to the list menu but instead of being a vertical list, the

navigation bar is a horizontal list.

Unlike the list menu where you can have unlimited menu items, you can only have up to five nav bar

items.

This nav bar can either be placed below the header for example, as secondary navigation or above

the footer depending on what you want to achieve with it.

A good example of how to use the nav bar are the previous and next buttons and it is common for

them to be fixed items


8/18


Previous

Next

Basic Buttons

Buttons are used primarily for navigation and are developed in a similar way to HTML links as every

other linked item. This means they behave in the same way every other form of navigation works.You can get a basic button which is shown below and you can also have grouped buttons and inline

buttons. To generate a button, the button data-role attribute is used

To improve user experience, these buttons come with a preset styling which makes the button

behave and look like a real button so that whenever it is pushed, it gets indented just like a real

button.

Button 1

Button 2

Group Buttons

Group buttons are the same as basic buttons but visually contained together in a single block by

using the data-role controlgroup attribute.

These types of buttons are used primarily for navigation and are developed in a similar way to HTML

links. This means they behave in the same way every other form of navigation works. You can merge

buttons horizontally or vertically depending on what you are trying to achieve.

The default option is vertical but if you want to set the buttons to align horizontally then simply add

data-type=horizontal to the end of the data role attribute. Please not, to set these horizontal, this

time it is not data-role nut data-type

To improve user experience, these buttons come with a preset styling which makes the button

behave and look like a real button so whenever it is pushed, it gets indented.

Button 1

Button 2


9/18


Button Icons

The jQuery Framework comes with a set of icons (also known as glyph icons) which are commonly

used in mobile applications.

A major advantage to these icons is that it will save you so much time from having to reinvent the

wheel and can also be used on all the menu items including the nav bar and list menu

An obvious downfall to using these icons is that they can look amateur, look out of place inside your

app or look too generic as there are many other applications in the stores and online right now who

have already overused these icons before

To use jQuery Mobiles selected set of button icons you will need to use data-icon attribute inside ofthe button tag which will generate one of the preset icons for you. Please note that this is not the

data-role attribute but data-icon attribute.

The icon sets are as follows: left arrow, right arrow, up arrow, down arrow, delete, plus, minus,

check, gear, refresh, forward, back, grid, star, alert, info, home and search.

Other custom glyph icons can be downloaded from the internet and included inside of your app

simply by adding the glphs style sheets inside the section of your application

data-icon=arrow-l

data-icon=arrow-r

data-icon=arrow-u

data-icon=arrow-d

Button 1

Button Icon Positions

The jQuery Framework comes with a set of icons (also known as glyph icons) which are commonly

used in mobile applications. By default these icons are set to the left side but can also be set to the

right, top or bottom of a button

Text

There are two main types of text that you need to be aware of. Titles and paragraphs.


10/18


Titles or Headings work similarly to headers and footers but with any data-role attributes.

Paragraphs are basically surrounded by the HTML paragraph tag, again without any data-role

attributes

This is a title

Paragraph

Images

Images are relatively straight forward, if you want to implement an image inside of your app then

you can just use the HTML image tag and code it in using a single line of code. jQuery mobile will do

the rest and resize the image according to the screen size of your mobile phone or browser making

your image fully responsive.

If you wanted to customize this image in any way then a few lines of CSS code will need to be coded.

Below you can see an example of an image inside of the header

My App

Collapsing

When theres too much content on a page you can neatly organize it all in collapsible drop down

boxes (also known as accordion menus). This drop down feature is not only good for long text but

can work with most elements jQuery Mobile offers including long list menu items for when your

menu list starts becoming too long and complex. You can achieve this collapsible content by using

the data-role collapse attribute inside of whatever youre trying to collapse. For example, if you

wanted to collapse a list of menus into one heading which drops down, you will put it inside of the

tag you are trying to collapse. You can use this feature on paragraphs, forms and most of the userinterface elements generated by this framework

This feature is good for organizing content that is similar to each other, save the user time by

reducing the amount of scrolling they have to do to get to content and also make content much

easier to find

A disadvantage to this is that everything remains hidden unless the menu is not interacted with so

may require the user to open and close each section until they find the content they want. But you

can counter this by organizing your drop down boxes sensibly and logically


11/18


This is a collapsible paragraph

Form Elements

Building a form is easy in jQuery Mobile as all you need to do is use basic HTML tags and the jQuery

Mobile framework will do the rest in terms of styling it.

You can have a number of form elements such as text input, slider, radio buttons, check boxes,

select menus.

To start off using a form, all form elements must be coded within the field contain data-role

attribute so that these elements can be recognized as a form element by jQuery Mobile.

This is where all form elements go

Text Input

Text inputs are text areas where text can be inputted. These are good for writing text in or building

forms. You can generate these using basic text input HTML tags. jQuery mobile will style it and do

the rest.

The label for basic attribute inside the first tag supports text and numerical values

Using the label input HTML5 attribute you will need to specify what this text box is for. Common

labels apart from text include, password, telephone number, e-mail address, number and telephone

number. These can be set by using the following tags: text, password, email, tel and number

Title of Box:


12/18


The label for slider attribute inside the first tag supports the slider function and will generate the

slider. If this isnt specified then the slider will not work. Please note that this is different from the

basic label for attribute in a text input tag.

You will need to specify the range at what the slider starts on using the value attribute and the

lowest and highest points of the slider using the min and max attributes

Input slider:

Radio Buttons & Check Boxes

Radio buttons are like multiple choice check boxes. These are good for showing multiple options for

when a user must choose one. You can use this by using the label type attribute radio

The input type radio-choice attribute inside the HTML tag is for each option in order of how you

went them to appear. For example radio-choice1 will be for option one and radio-choice2 will be for

option two

The label for attribute generates a name for each feild

Option 1

Option 2

Select Menus

Select menus, also known as drop down menus are similar to radio buttons and check boxes as they

provide the same function. These will give you a multiple choice but in form of a drop down box

where you chose one option or another.

You will need to specify what each option is using the HTML option value attribute


13/18


Title of Select Menu:

Red

Green

Blue

Yellow

Search

A search bar lets anyone get to content immediately, especially for people who know exactly what

they are looking for or do not want to browse through information they might not require. jQuery

mobile offers an AJAX search feature which means that search results are displayed almost

immediately without loading anything, as everything is already loaded by the applications

framework itself. Again, thanks to jQuery Mobile, everything is coded for you and you can use it

simply by writing a line of code.

If the user makes a spelling mistake or if the user doesnt know what the term is then the search bar

is rendered useless which is why it should not be the only way the user has access to information

they want

Search Bar Title:

Arranging Elements

Interface elements in jQuery mobile can be arranged however you want them to be. For example, if

you wanted a button within your header then all you have to do is put the button code inside the

header tags. Its simply about the logic of how to arrange the code.

Another example is when you want an element to appear just before another element, then the

code for this element will be just before the element in question. You can mix and match your

elements to achieve the look you want

You rearrange almost any element but sometimes you might come across an element which cannot

be arranged however you want. This is where you can one of two things. Either find an alternative


14/18


way or develop that specific element yourself which will require you to custom code some HTML,

CSS and some JavaScript using jQuery.

A good example of this is using buttons in jQuery Mobile. Buttons put inside of the content is just as

acceptable as buttons put inside of the header or footer for example; the menu button or options

button are common elements inside of a typical mobile application

Header Title

Filter

Menu

Popup

jQuery mobile comes with its own popup feature Inside a popup menu, you can have a menu, form

or an image depending on what you are trying to achieve

Even though popup are annoying, they can serve as good notification functions such as letting the

user know something is going wrong, confirming the users interaction by telling them the

information is sent or to deliver a reference of some sort such as instructions.

To use the popup feature, simply use the data-role popup attribute to a button tag

jQuery Mobile offers a variety of popups including:

A popup menu

Nest Popup menu

Popup form

Dialogue

A popup Image

To use any of these all you have to do is wrap whatever content your wanting to popup, inside of a

popup menu. If for example, you wanted a standard popup which popups some text, you would put

this text inside of HTML paragraph tags and wrap it within the popup tags below

The standard popup function which can be seen below:

Open Popup

This is a completely basic popup, no options set.


15/18


Animation Transitions

jQuery Mobile comes with two preset animation transitions for when the user interacts with the app

to, for example, go to a different page. The two main ones are slide and flip but you can also use

fade, pop, flip, turn, flow, side fade, slide, slide up and slide down.

If the user interacted with the navigation to go to a different page then the page will flip or slide into

a smooth transition.

These transitions can lag on cheaper phones and some android devices due to the devices hardware

but work smoothly on IPhones. Other transitions can be done but will require custom coding.

To make use of these transitions, simply use the data-transition attribute to a link followed by yourdesired animation effect. These can be applied to any linked items including popup links.

I'll pop when clicked!

Default Preset Themes

jQuery Mobile comes with 5 sets of default themes you can use to customize your application.

These themes are Black, Blue, Grey, Yellow and White can be fixed and matched to achieve the look

you want. Each theme is assigned a letter which can easily be used and implanted in all aspects or

your interface elements.

A Black

B Blue

C Grey

D White

E - Yellow

Although good for prototyping, these are default presets; they have to overused by thousands of

applications and will only make your application look very generic. Its a good idea to go straight into

the CSS files and edit them, tailoring and customizing each User Interface element to whatever you

want

To use a preset theme by jQuery, just use the data-theme attribute followed by the theme you

would like to use

Default jQM Page


16/18


The Grid System

By default, jQuery Mobile comes with a one column grid system. If you wanted to extend that grid

system to two, three or four columns then it is relatively easy to do.

These grid system are good for arranging interface elements alongside each other and even for the

famous grid menu format you mind on many Smartphone menus and Smartphone applications

A major downside to using the default grid systems is that these grid systems are difficult to work

with once the application becomes alot more robust. When you want to place interface elements

whenever you want, it might feel quite restrictive and will require custom coding but in most cases,

isnt a problem

Grids work in a similar way to preset themes in the sense that all you need to do is assign a letter to

the element depending on which grid you would like to use:

A 2 Column Grid

B 3 Column Grid

C 4 Column Grid

D 5 Column Grid

Because these grid have already been preset and made by the framework, you just have to use the

CSS class to align your elements to which ever grid you would like you use:

I'm Block 1 and text inside will wrap

I'm Block 2 and text inside will wrap

CSS

Using CSS (Cascading Style Sheets) can be used to customize all aspects of your app. To specifically

find which element you want to customize, you can use an in browser code editor called Firefox. This

editor allows you to select any element on your app and change its CSS rules in real time. It also

allows you to see where the specific lines of CSS code are and in which file.

When you are happy with the results, you can changes; you can simply just edit the CSS file itself for

the changes to take effect then you will need to refresh your browser.


17/18


Do not refresh your page if you are editing the CSS using firebug as you will lose all changes.

Refreshing your page is a simple way to just start again.

However, if you used the CDN (the three lines of jQuery Mobile code that is hosted online) then you

will have to host at least the CSS file inside the same folder as your application to edit the CSS files as

you will not be able to edit files you do not have access to.

JQM Alternatives

Just like how jQuery Mobile uses HTML handles to generate content, there are other frameworks for

the mobile and the web and they all essentially do exactly the same thing.

It is a good idea to stick with the popular ones as they will have good online documentation and

community support where there will be more people using the same framework which will mean

more tutorials and more help to not only get you started but also advance on to the more robust

features.

A disadvantage to using these frameworks is that they will work however they were made to work

and if you ever wanted to do something different then it will require heavy customization. Also,

customizing the original files may even be overkill and take longer than to just build the UI from

scratch.

Here are some popular examples of jQuery Mobile alternatives:

JQM Touch

JQ Touch is very similar to JQuery Mobile however, JQ Touch is optimized online for certain browsers

(ONLY supported on iPhone and Android devices) whereas jQuery Mobiles framework is trying to

target as many devices as possible, all at once.

jQuery Mobile also is maintained, developed and updated more often than JQ Touch meaning

problems and bugs are fixed faster. jQuery Mobile has a larger community around it which means

there is more tutorials and help online from the community compared to the JQ Touch framework.

When it comes to mobile web apps frameworks features, jQuery is an obvious winner with many

more features supporting most devices.

Sencha Touch

This is one of the leading mobile application frameworks used to make major smartphone

applications written in purely JSON (a certain type of JavaScript) and has many more advanced

features. The Facebook application is just one of the examples of what it can do.

Whereas jQuery Mobile is more designer friendly, Sencha is more developer friendly and has a very

steep learning curve compared to jQuery Mobile. Once youve learnt the ins and outs of the

framework, developing on this platform can be rewarding


18/18


The Full Version will include:

JSON Feeds - JSON stands for JavaScript

YouTube feeds - Parse YouTube feeds onto your application

Flicker Photo API - Use Flickrs API to display your Flickr images inside your application

Twitter API - Use Twitters API to display your twitter feed inside your application

Phone Gap

This platform allows you to author native Smartphone applications and also gives you access to call

the Smartphones native functions and wrap it around the mobile container.

You can use this framework to call a Smartphones native functions such as camera, contacts and

calendar using JavaScript. This framework will then wrap your web application around a container,

mimicking a real Smartphone application ready for distribution in the App Stores

A major disadvantage is that is JavaScript and HTML5 API heavy. If you are not familiar with

JavaScript then it can be a constant struggle achieving what you want but is still a framework to

make note of and become familiar with if you want to start building more robust applications

Lean how toHow to distribute you application to the Apple or Android app store which is also done

in Phone Gap

Documents

Mobi Acedemy Mobile Prototype Content