Chapter 4.

Best Practices in UI
Design
Aim
To equip the students with the basic knowledge of
HTML & CSS to be used in Mobile User Interface

2
Instructional Objectives
Objectives of this chapter are:
•Explain the framework for UI Design
•Describe different interaction patterns that are
optimised for different screen sizes
•Classify different ways to insert CSS in HTML
document

3
Why Perl?

• Perl is built around regular expressions

• REs are good for string processing
• Therefore Perl is a good scripting language
• Perl is especially popular for CGI scripts
• Perl makes full use of the power of UNIX
• Short Perl programs can be very short
• “Perl is designed to make the easy jobs easy, without making the difficult
jobs impossible.” -- Larry Wall, Programming Perl

4
Why not Perl?

• Perl is very UNIX-oriented

• Perl is available on other platforms...
• ...but isn’t always fully implemented there
• However, Perl is often the best way to get some UNIX capabilities on less
capable platforms
• Perl does not scale well to large programs
• Weak subroutines, heavy use of global variables
• Perl’s syntax is not particularly appealing

5
What is a scripting language?
• Operating systems can do many things
• copy, move, create, delete, compare files
• execute programs, including compilers
• schedule activities, monitor processes, etc.
• A command-line interface gives you access to these functions, but
only one at a time
• A scripting language is a “wrapper” language that integrates OS
functions

6
Major scripting languages

• UNIX has sh, Perl

• Macintosh has AppleScript, Frontier
• Windows has no major scripting languages
• probably due to the weaknesses of DOS
• Generic scripting languages include:
• Perl (most popular)
• Tcl (easiest for beginners)
• Python (new, Java-like, best for large programs)

7
Perl Example 1
#!/usr/local/bin/perl
#
# Program to do the obvious
#
print 'Hello world.'; # Print a message

8
Comments on “Hello, World”
• Comments are # to end of line
• But the first line, #!/usr/local/bin/perl, tells where to find the Perl
compiler on your system
• Perl statements end with semicolons
• Perl is case-sensitive
• Perl is compiled and run in a single operation

9
 Comments on example 3
• In # Usage: fixm <filenames>, the angle brackets just mean to supply a list of file names here
• In UNIX text editors, the \r (carriage return) character usually shows up as ^M (hence the name
fixm_temp)
• The UNIX command tr '\015' '\012' replaces all \015 characters (\r) with \012 (\n) characters
• The format of the open and close commands is:
• open fileHandle, fileName
• close fileHandle, fileName
• "| tr \'\\015' \'\\012' < $file > fixm_temp" says: Take input from $file, pipe it to the tr command, put
the output on fixm_temp

10
 Arithmetic in Perl
$a = 1 + 2; # Add 1 and 2 and store in $a
$a = 3 - 4; # Subtract 4 from 3 and store in $a
$a = 5 * 6; # Multiply 5 and 6
$a = 7 / 8; # Divide 7 by 8 to give 0.875
$a = 9 ** 10; # Nine to the power of 10, that is, 910
$a = 5 % 2; # Remainder of 5 divided by 2
++$a; # Increment $a and then return it
$a++; # Return $a and then increment it
--$a; # Decrement $a and then return it
$a--; # Return $a and then decrement it
11
String and assignment operators
$a = $b . $c; # Concatenate $b and $c
$a = $b x $c; # $b repeated $c times

$a = $b; # Assign $b to $a
$a += $b; # Add $b to $a
$a -= $b; # Subtract $b from $a
$a .= $b; # Append $b onto $a

12
foreach

# Visit each item in turn and call it $morsel

foreach $morsel (@food)

{
print "$morsel\n";
print "Yum yum\n";
}

13
for loops
• for loops are just as in C or Java

• for ($i = 0; $i < 10; ++$i)

{
print "$i\n";
}

14
while loops
#!/usr/local/bin/perl
print "Password? ";
$a = <STDIN>;
chop $a; # Remove the newline at end
while ($a ne "fred")
{
print "sorry. Again? ";
$a = <STDIN>;
chop $a;
}
15
do..while and do..until loops
#!/usr/local/bin/perl
do
{
print "Password? ";
$a = <STDIN>;
chop $a;
}
while ($a ne "fred");

16
if statements
if ($a)
{
print "The string is not empty\n";
}
else
{
print "The string is empty\n";
}

17
if - elsif statements
if (!$a)
{ print "The string is empty\n"; }
elsif (length($a) == 1)
{ print "The string has one character\n"; }
elsif (length($a) == 2)
{ print "The string has two characters\n"; }
else
{ print "The string has many characters\n"; }

18
Why Perl?
• Two factors make Perl important:
• Pattern matching/string manipulation
• Based on regular expressions (REs)
• REs are similar in power to those in Formal Languages…
• …but have many convenience features
• Ability to execute UNIX commands
• Less useful outside a UNIX environment

19
Basic pattern matching
• $sentence =~ /the/
• True if $sentence contains "the"
• $sentence = "The dog bites.";
if ($sentence =~ /the/) # is false
• …because Perl is case-sensitive
• !~ is "does not contain"

20
The $_ variable
• Often we want to process one string repeatedly
• The $_ variable holds the current string
• If a subject is omitted, $_ is assumed
• Hence, the following are equivalent:
• if ($sentence =~ /under/) …
• $_ = $sentence; if (/under/) ...

21
Associative arrays
• Associative arrays allow lookup by name rather than by index
• Associative array names begin with %
• Example:
• %fruit = ("apples", "red", "bananas", "yellow", "cherries", "red");
• Now, $fruit{"bananas"} returns "yellow"
• Note: braces, not parentheses

22
Associative Arrays II
• Can be converted to normal arrays:
@food = %fruit;
• You cannot index an associative array, but you can use the keys and
values functions:
foreach $f (keys %fruit)
{
print ("The color of $f is " .
$fruit{$f} . "\n");
}

23
Calling subroutines
• Assume you have a subroutine printargs that just prints out its
arguments
• Subroutine calls:
• printargs("perly", "king");
• Prints: "perly king"

• printargs("frog", "and", "toad");

• Prints: "frog and toad"

24
Defining subroutines
• Here's the definition of printargs:
• sub printargs
{ print "@_\n"; }

• Where are the parameters?

• Parameters are put in the array @_ which has nothing to do with $_

25
Returning a result
• The value of a subroutine is the value of the last expression that was
evaluated
sub maximum
{
if ($_[0] > $_[1])
{ $_[0]; }
else
{ $_[1]; }
}

$biggest = maximum(37, 24);

26
Local variables
• @_ is local to the subroutine, and…
• …so are $_[0], $_[1], $_[2], …
• local creates local variables

27
Example subroutine
sub inside
{
local($a, $b); # Make local variables
($a, $b) = ($_[0], $_[1]); # Assign values
$a =~ s/ //g; # Strip spaces from
$b =~ s/ //g; # local variables
($a =~ /$b/ || $b =~ /$a/); # Is $b inside $a
# or $a inside $b?
}
inside("lemon", "dole money"); # true

28
Perl V
• There are only a few differences between Perl 4 and Perl 5
• Perl 5 has modules
• Perl 5 modules can be treated as classes
• Perl 5 has “auto” variables

29
Views and Layout Tools

4
Views and Layout Tools
• HTML and CSS are necessary concept to create a mobile app.
• HTML stands for Hyper Text Markup Language.
• It is most used language to develop web app or mobile app.
• HTML stands for Hyper Text Markup Language.
• It is most used language to develop web app or mobile app.
• Hypertext denotes the way how different documents are connected together.

Running a HTML document:

• Step 1: Type the above code in a notepad and save it as “test.htm” file

• Step 2: Open the file using a web browser such as Internet Explorer or Google Chrome or

Firefox and you can see the effect.

5
Views and Layout Tools
(i) Paragraph Tag
• The paragraph <p> tag creates the paragraph in the web content.
• There are so many attributes in <p> tag, such as align, style etc.

Output of the paragraph tag

6
Views and Layout Tools
(ii) Image Tag
• Images are very simplest way to beautify and to portray many difficult concepts on the web page.
• An image is inserted in the web page by using the <img> tag. Following is the syntax to use the image tag.

<img src="Image URL" attributes-list>

Example of image tag

7
Views and Layout Tools
(iii) Table Tag
• The tables in HTML are created by using the <table> tag.
• It consists of the <tr> tag that is used to create table rows, and the <td> tag is used to create
data cells .
Cellpadding and Cellspacing Attributes
• There are two other attributes called cellpadding and cellspacing.
• These attributes are used to adjust the white space in your table cells.
• The cellspacing attribute describes the width of the border.
Colspan and Rowspan Attributes
• The colspan attribute is used to combine two or more columns into a single column.
• The rowspan is used to combine two or more rows.

8
Views and Layout Tools
(iii) Table Tag
Tables Backgrounds
• bgcolor attribute is used to set background colour for the table.
• background attribute is used to set a background image for the table.
• The border colour can also be set using bordercolor attribute.
Table Height and Width
• The table width and height is set using width and height attributes.
• It can be specified in terms of pixels or regarding the percentage of available screen area.
Table Caption
• The caption tag assists as a title or explanation for the table, and it shows up at the top of the table.
Table Header, Body, and Footer
• Tables in HTML is divided into three parts: a header, a body, and a footer.
• The head and foot are somewhat similar to the headers and footers in a word-processed document.

9
Views and Layout Tools
(iv) Layout Tag
• To give a better look and feel to your website, layout
design of the webpage is very important.
• CSS and JavaScript based framework can be used to
design a layout but the simple way of creating layouts is
HTML <table> tag.

Layouts - Using DIV, SPAN

• <div> tag is utilized for grouping HTML elements. It is a
block-level element.
• The HTML <span>tag is applied for grouping inline
elements.
HTML Layout

10
Views and Layout Tools
(v) Frame Tag
• To partition the browser window into various sections,
we use HTML frames.
• Each section can be filled up with a separate HTML
document.
Creating Frames
• To use frames in a HTML document the <frameset> tag is
used.
• The <frameset> tag describes how to divide the window
into frames.

Three horizontal Frames

11
Quiz / Assessment

1) The __________ attribute is used to merge two or more columns into a single
column.
a) Colmn
b) Colline
c) Colspan
d) Colsize

2) The __________ element is a block level element, which is utilized for

grouping HTML elements.
a) <div>
b) <did>
c) <dil>
d) <divid>

12
Interaction

13
Interaction
• When we interact with an application, generally we fill up a form, submit it and get a response.
• HTML Forms are essential when there is a need to gather particular data from the user.
• The following syntax is used to create the form:

• <form action="Script URL“ method="GET|POST">

• form elements like input, textarea etc.
• </form>
(i) Links
• The link or hyperlink is a connection from one web source to another. The link tag is called as
the anchor tag<a>.
• The text between the opening <a> tag and the closing </a> tag turns into a part of the link.
• The user can click the link to go to the destination document from the linked document.
• <a href="Document URL" ... attributes-list>Link Text</a>

14
Interaction
(ii) Buttons
• There are numerous methods in HTML to create buttons.
• The button is created by using <input> tag then its type becomes button.

Example of different types of buttons

15
Interaction
(iii) Text Fields
In HTML, there are three types of text input. They are as follows:
• Single-line text input controls – When only one line of user input is required, then we use
single line text input control such as search boxes.
• Password input controls – Password field is also a single-line text input but it masks the
character immediately when the user enters a text. These are also created using HTML <input>
tag.
• Multi-line text input controls - This is used when the user gives essential details, which is
more than a sentence. Multi-line input controls are formed using HTML <textarea> tag.

16
Interaction
(iv) Radio Buttons
• Radio buttons are utilized when you want to select only one option among many options.
• These buttons are created using HTML <input> tag.
• The attribute type is set to radio.
Example:

Example of Radio Button

17
Interaction
(v) Check Boxes
• Checkboxes are used when you want to select more than one option.
• They are created using HTML <input> tag by setting the attribute to checkbox.
Example:

Example of Check Box

18
Interaction
(v) Check Boxes
• Checkboxes are used when you want to select more than one option.
• They are created using HTML <input> tag by setting the attribute to checkbox.
Example:

Example of Check Box

19
Quiz / Assessment

3) The link tag is called as the __________ tag and content is in between the
opening <a> tag and the closing </a> tag
a) Anchor
b) Anch
c) Anchr
d) Anohr

4) Multi-line input controls are made using HTML __________ tag.

a) <text>
b) <textarea>
c) <area>
d) <tarea>

20
CSS (Cascading Style Sheets)

21
CSS (Cascading Style Sheets)
(i) Syntax
CSS has the style rules that are understood by the browser. These rules are then implied to the
corresponding elements in the document. A style rules are three parts.
• Selector – It is a HTML tag like <h1>, <table> to which styles are applied.
• Property - Property is an attributes of HTML tag such as – color, border etc. The HTML
attributes are transformed into CSS properties.
• Value - The properties are assigned a value.
The CSS Syntax rule is shown in below
Selector {property: value}
Example: The table border is defined as follows
table { border :5px solid #C22;
}

22
CSS (Cascading Style Sheets)
(i) Syntax
Type Selector
The Universal Selectors
• The universal selector matches the name of any element type instead of selecting elements of a
specific type.

The Descendant Selectors

• The style rule can be implemented to a particular element only when it lies inside another
particular element.

23
CSS (Cascading Style Sheets)
(i) Syntax
Type Selector
The Class Selectors
• The style rules are defined based on the class attribute of the elements.
• The elements that have the specific class will be structured according to the defined rule.

The ID Selectors
• The id attribute is used to select specific element.

• ID selector uses this id attribute to select an item with specific id.

• Put the # character before the id of an element.

24
CSS (Cascading Style Sheets)
(ii) Colours and Background
• Colours are used to set the foreground and background of the element.
• It is also used in case of different purpose for better designing of websites.
Format Example

Hex Code P {color: #FF0111;}

Short Hex Code P {color: #4A9;}

RGB % P {color:
rgb(20%,20%,50%);}

RGB Absolute P {color:

rgb(0,100,255);}

Keyword P {color: red;}

Colour
Values

25
CSS (Cascading Style Sheets)
(ii) Colours and Background
The background can be set to the following properties of an element.
i. background-color
ii. background-image
iii. background-position
iv. background-repeat
v. background-attachment

26
CSS (Cascading Style Sheets)
(iii) Text and Fonts
a. Color
b. direction
c. letter-spacing
d. word-spacing
e. text-indent
f. text-align
g. text-decoration
h. text-transform
i. white-space

27
CSS (Cascading Style Sheets)
(iii) Text and Fonts
Text Colour:
• The program demonstrates the method to set the text Colour.
• The colour name can be in any valid format.

<body>
<p style="color: green;"> This text will be written in green. </p>
</body>

28
CSS (Cascading Style Sheets)
(iii) Text and Fonts
Text Direction:
• The example shows how to set the text direction.
• The left-to-right (ltr) or right-to-left (rtl) are the possible values.
• For the program text will be appeared from left to right. We can set the text for
rtl also.

<p style="direction: ltr;">

This text will be appeared from left to right
</p>

29
CSS (Cascading Style Sheets)
(iii) Text and Fonts
Text Letter Space:
• Space between the characters is illustrated in the example.
• Normal or a number that specifying the space are the values.

<p style="letter-spacing: 6px;">

This text has the space between letters.
</p>

30
CSS (Cascading Style Sheets)
(iii) Text and Fonts
Text Indent :
• The example illustrates how to indent the first line of a paragraph.
• The possible values are % or a number specifying indent.

<body>
<p style="text-indent: 0.5cm;">
The first line of the text will be indented by
0.5cm.
</p>
</body>

31
CSS (Cascading Style Sheets)
(iv) Icons and Links
• To insert an icon using CSS, it is necessary to include the icon library such as Google Icon.
• Name of the icon class will be under <i> tag.

<linkrel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Links

This section explains how to set different properties of a hyperlink using CSS.
• link
• visited
• hover
• active

32
CSS (Cascading Style Sheets)
(v) List
• There are two types of list: unordered list and ordered list.
• Lists are highly essential to convey the data as a set of numbered or bulleted
points.
• Here we will see some properties of the list.
properties of the lists
list-style-position
list-style-type
list-style-image
list-style
marker-offset

33
Quiz / Assessment

5) The __________ property is used to control the repetition of an image in the

background.
a) Background
b) background-redo
c) background-repeat
d) background-repeative

6) The __________ property is used to set the text direction.

a) Direct
b) Dissolve
c) Directly
d) Direction

34
Activity - I
Brief description of activity

Offline Activity
• Write a note on HTML and CSS.
(20 min)

35
 Summary
✔ HTML stands for Hyper Text Markup Language. It is the most used language on Web to
develop web pages.
✔ An image is inserted in the web page by using the <img> tag.
✔ The alt attribute is a compulsory attribute, which specifies an alternate text for an image
when the image is not displayed.
✔ The height and weight of the image are specified regarding either pixels or percentage of its
actual size.
✔ The image is set to the left by default. The align attribute is used to set the image to centre
or right.
✔ The <frameset> tag describes how to divide the window into frames.
✔ The easiest and most popular way of creating layouts is using HTML <table> tag
✔ A link is stated using HTML tag <a>.
✔ Radio buttons are utilised when you want to select only one option from numerous options.

36
e-References
• User Interface Design Basics (1st ed.). Retrieved from
https://www.usability.gov/what-and-why/user-interface-design.html
• Williams, J. 9 essential UI design tips (1st ed.). Retrieved from
https://webflow.com/blog/9-essential-ui-design-tips
• Best Practices for Mobile User Interface Design (1st ed.). Retrieved from
http://www.punchcut.com/perspectives/best-practices-mobile-design/
• UI Design Do’s and Don’ts (1st ed.). Retrieved
https://developer.apple.com/design/tips/

37
External Resources
• Love, S. (2005). Understanding Mobile Human-Computer Interaction.
Butterworth-Heinemann.

38