+1(978)310-4246 credencewriters@gmail.com
  

Description

Complete tasks outlined in the attached document.

undefined

Writing Requirements

Each Discussion Question should be a minimum of 1-2 pages in length.

Your final submission for the Midterm 5-10 pages in total with APA formatting.

Task 1. Write HTML5 code that will create the following linked pages
Task 2.
Task 3
Complete any one project from the list of “Programming projects”, Chapter 6, p. 159 – 160
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Chapter 5
A menu-driven
app to monitor
important
indicators
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
1
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Learning objectives
1. How to secure an app with a password
2. How to create a numeric pad for input
3. How to navigate using menus
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
2
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Thyroid app design
•
Used to help medical patients with thyroid cancer track and
analyze important indicators using the results of their various
tests.
•
Users of the app will be able to
• record important indicators from their medical test results
• view the history of their records
• analyze what those results mean to them
• receive basic advice on when they should seek medical help
•
Security is very important for this app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
3
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Overview of the functionality of the
Thyroid app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
4
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Features of the app
•
•
•
•
•
•
Password protection
Ability to change the password
Storing information (including password) locally on the device
Making sure that the user has agreed to terms and conditions or
disclaimers
Acquiring basic information from the user
Editing the basic information
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
5
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Features for managing the history
•
•
•
•
•
Creating new entries
Editing existing entries
Deleting individual entries
Editing individual entries
Clearing the entire history
The historical values of the indicators can be analyzed with the help
of the following facilities:
• Tabular view of the history
• Graphical view of the history
• Advice using graphical widgets
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
6
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Numeric pad for password entry
•
We have a section with the data-role attribute value of
“page”.
• The data-role of “header” can be seen as the section
in a traditional HTML page with a single screen.
• The data-role of “content” corresponds to the traditional
section.
•
Text box for entering the password with the HTML5 code:
•
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
7
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the entry page in
the Thyroid app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
8
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 code for the Thyroid app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
9
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Disclaimer and help pages
•
When a user successfully enters the password (2345 for the first
time), that user is led to the disclaimer page.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
10
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Disclaimer and help pages (cont’d)
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
11
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
User information entry form
•
•
•
•
Acquire a significant amount of information from the user.
The entire page is contained in a section with data-role
“page”.
Its id attribute is set to “pageUserInfo”.
Header has two elements with data-role “button”.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
12
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the user information
form in the Thyroid app—II
•
•
The physician specifies a range of TSH values based on clinical
examination.
The patients will regularly enter the TSH values obtained from a
blood test.
• App will plot the history of TSH values and also provide some
guidance to the patient.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
13
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Navigation with a menu
•
•
The id attribute for this page is set to “pageMenu”.
The header has two elements with data-role “button”.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
14
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Record display and update page
•
•
The entire page is contained in a section with data-role
“page”.
Its id attribute is set to “pageRecords”.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
15
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Page to add a record
•
•
The element with “New Record” title completes the header
section.
with data-role “fieldcontain” section used to group the first
four buttons.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
16
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the new record page
in the Thyroid app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
17
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Use of canvas and panels for
graphical display
•
•
•
The entire page is contained in a section with data-role
“page”.
Its id attribute is set to “pageGraph”.
The header has two elements with a data-role “button”;
• One takes us to the Menu Page and the other to the Information
Page.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
18
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Use of canvas and panels for
graphical display (cont’d)
•
•
The panel element is from the Bootstrap library.
Put our content in a box with a border and some padding around
the content.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
19
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Use of canvas and panels for
graphical display (cont’d)
•
JavaScript builds the responsive and interactive features. There
are two aspects to our JavaScript functionality:
1. data storage and management
2. graphics
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
20
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Quick facts/buzzwords
•
•
•
•
•
•
•
•
•
•
•
•
Bootstrap
Password
Data-role = button
Data-close-btn
Data-icon
Data-iconpos
Data-mini
Data-inline
Panel
Panel type
Panel-heading
Panel-body
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
21
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Chapter 4
Making apps
do significant
computing
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
1
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Learning objectives
1. How to validate input
2. How to do computations based on input
3. How to do conditional computing
4. How to do iterative computing
5. How to use arrays in JavaScript
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
2
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Temperature converter app design
•
•
The objective: to allow users to convert temperature from
Fahrenheit to Celsius, and vice versa.
• Simple and intuitive
• App is on one screen
Users of our app will be able to input a temperature in one scale,
either Celsius or Fahrenheit, and convert it to the other scale.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
3
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Simple JavaScript calculations for
temperature conversion app
•
Create a single screen that accepts the temperature and a radio
button that tells us whether the temperature is in Fahrenheit or
Celsius.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
4
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of Temperature
Fahrenheit app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
5
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
A table of frequently used symbols
in HTML5
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
6
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 Code for the radio button
for temperature types
•
HTML5 code that is wrapped in a HTML5 element.
•
Caption “Convert to:” for our .
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
7
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of switching
temperature types
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
8
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript for the setup() function;
executed when the page is loaded
•
The value of the attribute “onload” tells the browser to run the
JavaScript function setup().
•
document.getElementById(“fahrenheit”).onclick defines the
action when the radio button with id “fahrenheit” is clicked.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
9
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Elements that trigger actual
computations and display results
• The element with attribute value of type
“button” is shown below.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
10
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript functions for
conversion
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
11
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Projectile app to calculate distance
and height of a projectile
• Our JavaScript functions are in a file called physicsProjectileApp2.js
• The tag has an attribute called “onload”, which will call the
JavaScript function “initialize()”
• The button in the form now is called “Calculate!” instead of “Display” and
triggers a JavaScript function “update()”
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
12
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 code for the second
Projectile app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
13
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Validating input values in an app using
Boolean expressions in JavaScript
•
Error checking in the second Projectile app by the JavaScript
function “initialize()”.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
14
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Validating input values in an app using
Boolean expressions in JavaScript
(cont’d)
•
JavaScript function validateAngle() is called when the user has
entered the value of the angle.
• angleInput.value < 1 • angleInput.value > 90
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
15
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Comparison operators in
JavaScript
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
16
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Boolean operators in JavaScript
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
17
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Validating angle and velocity
•
JavaScript function validateVelocity() ensures that the velocity is
greater than 0 and less than 299,792,458 (speed of light).
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
18
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Calculation of distance and height of a
projectile using JavaScript Math object
1. a =
(v − u )
t
t=
(v − u )
a
2.
3. v = u + a ï‚´ t
1
4. s = u ï‚´ t + ï‚´ a ï‚´ t 2
2
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
19
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript code to calculate and display
height and distance of projectile
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
20
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript Math object methods or
functions
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
21
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript arrays for storing distances
and heights over time of a projectile
•
•
•
•
Track the projectile throughout its flight.
Tabulate the height and distance traveled by the projectile.
Code: the only difference is the table with id “data”.
JavaScript function will dynamically add the rows and columns
after calculation.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.

22
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Overview of arrays in JavaScript
•
•
An array variable is declared as var.
var a = []
An array is a convenient data structure provided by most
programming languages to store a sequence of n elements such
as: a0, a1, a2,…, an-1.
•
Can find the length of the array by looking at the length property:
a.length
•
The length of JavaScript arrays is also flexible.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
23
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More commands
•
•
•
•
•
•
•
a.push(“Appending a string”) adds a new element at the end of
the array.
Insertion of an element at the beginning of an array with the
statement a.unshift(90)
The deletion of an element from the end is done using a.pop()
a.shift(): deletes the first element and returns its value.
d = b.concat(c)
e.push(“actionscript”)
e.push(“c#”)
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
24
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Operations on an array object in
JavaScript
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
25
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript for loop for repeating
computations
•
Modified version of our calculate() function.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
26
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
JavaScript for loop for repeating
computations (cont’d)
for(initialization; condition testing; reinitialization)
{
Body;
}
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
27
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Dynamically adding rows and cells in a
table using JavaScript
•
•
•
Add the rows and columns dynamically using our JavaScript
function updateTable()
Assign an empty string to the innerHTML property of the table;
• insertRow() and insertCell().
dataTable.insertRow(0)
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
28
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Quick facts/buzzwords
•
•
•
•
•
data-role field: Contains jQuery convention to assign a datarole to a element to wrap a number of related form fields.
: HTML5 tag to include related radio buttons.
: HTML5 tag to define a caption for
elements.
onload: Property of element that is used to specify the
function that will be executed when the web page is loaded.
special symbols: HTML5 defines special code to include
special characters such as ° used in the Temperature
conversion app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
29
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Chapter 3
Making apps
more interactive
through data
input
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
1
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Learning Objectives
1. Introduction to JavaScript
2. Introduction to jQuery for mobile devices
3. How to embed JavaScript in a web page
4. How to use an external JavaScript file on a web page
5. How to use CSS elements designed for mobile devices
6. How to accept input through a web page
7. How to use different types of input widgets
8. How to link multiple mobile pages in an app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
2
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Embedding JavaScript in an
HTML5 document
•
JavaScript is commonly used for mobile app programming.
• Method of interpretation
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
3
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Using JavaScript from an external
file in an HTML5 document
•
•
The of the web page is empty.
In the we have a … pair of tags to
indicate the script that should be run.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
4
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
A JavaScript function
• functionJS.html
• Script file function.js
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
5
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the JavaScript
function run at the time of loading
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
6
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Input widget in
HTML5/jQuery/jQuery Mobile
•
•
HTML5 code that is specifically designed to ensure that it can
work on all the popular mobile devices as well as the
conventional desktop/laptop web browsers is shown below.
http://jquery.com/: “jQuery is a fast, small, and feature-rich
JavaScript library.”
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
7
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Input widget in
HTML5/jQuery/jQuery Mobile
(cont’d)
•
http://jquerymobile.com/:
• “A unified, HTML5-based user interface system for all popular mobile
device platforms, built on the rock-solid jQuery and jQuery UI
foundation.”
• “Its lightweight code is built with progressive enhancement, and has
a flexible, easily themeable design.”
• “‘write less, do more’ mantra”
• Can “design a single highly-branded web site or application that will
work on all popular smartphone, tablet, and desktop platforms.”
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
8
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the web page with
input for the Projectile app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
9
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Designing our apps
•
•
•
•
•
•
Must consider the end user and the main objectives of the app.
How to organize functionalities.
The core functionality should be the first screen that users see
when they access your app.
Other functionalities should be placed in a menu of some sort to
provide easy access.
Communication between the app and the user.
Must consider what device or devices users will use to access
your app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
10
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Our first app: physics Projectile
app
•
•
•
•
Physics behind launching a projectile.
Calculate the distance of a projectile based on the angle and
velocity input by the user.
The calculation page will open first when you start the app.
A menu bar will provide navigation between the two main
sections.
•
•
Menu bar should be consistent across all sections of the app
Easy to read colors and fonts
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
11
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Header, footer, and content datarole
•
•
The body of the web page is wrapped in a pair of …
tags with an attribute called data-role whose value is set to
“page”.
Add three pairs of … tags with data-role set to
“content”, “header”, and “footer”.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
12
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More widgets in
HTML5/jQuery/jQuery Mobile
•
•
•
•
•
•
•
Use a pair of tags … with the text “Display”
inside the tags.
type
name
id
min
max
placeholder
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
13
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 code for the angle and
velocity input
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
14
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Identifying elements from a web
page
1. The header section includes another script using the code which
includes the file
physicsProjectileApp1.js from the folder scripts
2. The code for the button widget now has an attribute called onclick that
calls a JavaScript function display defined in physicsProjectileApp1.js
3. We also see a pair of … tags with two rows and three
columns that correspond to the two lines below the Display button.
4. A feature we see throughout the HTML5 code is the “id” attribute.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
15
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the Projectile app
before the values are input
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
16
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Range slider input widget
•
In a mobile device with touch-screen facility, we should provide
facilities to interact without a keyboard whenever possible.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
17
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Range slider input widget (cont’d)
•
•
•
The choice of file name: index.html.
Pair of tags ….
Class set to the values ui-btn-active and ui-state-persist.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
18
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 code for the navbar in the
information tab
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
19
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the navbar and the
information tab
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
20
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Quick facts/buzzwords
•
•
•
•
•
•
•
JavaScript: A programming language popularly used for web
programming.
Client-side programming: Programs that run on the user (client)
device.
Server-side programming: Programs that run on the web server.
High-level languages: Languages that use English-like words for
computer programming.
Compiled programs: Programs that are translated once and
translated copy is run many times.
Interpreted programs: Programs that are translated one
instruction at a time every time they are run.
Function: A program snippet that performs a particular task.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
21
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Quick facts/buzzwords (cont’d)
•
•
•
•
•
Widget: Refers to various elements in the web page such as
buttons, text boxes, or sliders.
: A pair of HTML5 tags to include widgets that
facilitate input from the user.
: A pair of HTML5 tags to produce a button in
a web page.
: A pair of HTML5 tags to produce a label in a
web page, usually associated with a widget.
id: An attribute used in conjunction with a number of HTML5
elements to uniquely identify the element.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
22
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Chapter 2
Developing,
installing, and
testing first app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
1
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Learning objectives
1. How to create a simple HTML5-based app
2. How to put the app on the web for general access through the
web
3. How to enhance the presentation with CSS3
4. How to add multimedia to the web page including images and
videos
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
2
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Choice of programming platform
•
The three major operating systems for mobile devices
1. iOS by Apple
2. Windows 8 by Microsoft
3. Android by Google
• Apple devices: apps written in an integrated development
environment (IDE) called Xcode.
• Windows mobile devices: apps written in .Net framework.
• Cross-platform development
• well-established HTML—HyperText Markup Language.
• a response to the changing nature of the Internet.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
3
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to create a simple HTML5 web
page
•
•
Tags: instructions to the web browser regarding the display and
behavior of a web page.
An HTML5 tag is enclosed in two angled braces .
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
4
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to create a simple HTML5 web
page (cont’d)
• A screenshot of the complete page
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
5
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to create a simple HTML5 web
page (cont’d)
• The rest of the HTML5 code that goes into the
section
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
6
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to create a simple HTML5 web
page (cont’d)
•
•
•
The browsers uses physical line breaks based on the HTML5
tags.
Other line breaks: come from two tags, … and .
One of the best resources which provides a comprehensive
introduction to HTML5:
• http://www.w3schools.com
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
7
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to put an HTML5 web page
on the Internet
•
•
Directory called “web”.
Example: ch02/physicsProjectileApp0/version1
• look for a file called physicsProjectileApp.html
• Assume Windows as the default operating system for the rest of
the discussion.
• Putting the app code on the web is the easiest way to download
and distribute it to multiple mobile devices through wireless
communication.
• Contact an Internet Service Provider (ISP)
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
8
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
How to put an HTML5 web page
on the Internet (cont’d)
•
•
An account on a server with the domain name called cs.smu.ca.
The domain name is translated into an IP address.
• An IP address is used to refer to any computer on the Internet.
•
Web server: typically an Internet-accessible computer that is
specially configured to serve and receive documents at very high
rates of transmission.
• Apache
• Microsoft Exchange Server
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
9
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Example
•
Put our first HTML5 web page on the web for accessing it from
any web-enabled device.
• Linux server
• Put our web pages in a folder called public_html. They will be
accessible to the rest of the Internet using the URL:
http://cs.smu.ca/~mobilebook.
•
Transfer files from personal computer to the web server
cs.smu.ca.
• WinSCP
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
10
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the login screen for
WinSCP to upload the web pages
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
11
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Example (cont’d)
•
Permissions in the UNIX environment
• Linux and Mac OS X
• Users: “owner”, “group”, “world”
•
The web server program: considered to be a user on the
computer system and usually a part of the set of users called
world or others.
•
Three types of permissions: read (R), write (W), and execute/run
(X).
• Reading, writing, and executing
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
12
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of the WinSCP after
logging in
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
13
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Example (cont’d)
•
Permission settings
• All the files under the folder public_html and recursively all its
subfolders need to be readable by everyone.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
14
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Example (cont’d)
•
•
Type in our URL, http://cs.smu.ca/~mobileappbook, in the
browser’s address window.
HTML5 web page: physicsProjectileApp.html
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
15
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More HTML5 formatting
•
•
High-level view of the newly formatted part of the web page.
Tags …
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
16
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Unordered and ordered lists
•
•
•
An unordered list: a list that does not specify an order with
numbers or alphabets.
The complete list is enclosed in a pair of tags ….
• Added four items to the list using the pair of tags called
….
An ordered list uses numbers or alphabets for listing items.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
17
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
HTML5 tables
•
•
Look at http://www.w3schools.com
A table consists of rows enclosed in … tags and
columns enclosed in either … or ….
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
18
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of a table
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
19
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Cascading Style Sheets (CSS)
•
Adding fonts and color information to every single page
• Long and expensive process.
• Cascading style sheets (CSS) to mitigate this problem.
• From HTML 4.0, all formatting can be stored in a separate
CSS file.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
20
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Screenshot of a web page that
uses a cascading style sheet
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
21
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
A cascading style sheet (CSS)
•
•
The tag
Creating a “css” directory under the directory where our web
page is located: ch02/physicsProjectileApp0/version3/css.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
22
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Adding some multimedia
•
•
•
HTML5 called … allows us to format a figure in
our web page.
Often used in conjunction with a nested pair of tags
….
allows us to provide a caption underneath the
figure.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
23
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Augmented the page with a video
• The tag must have a nested tag called .
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
24
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Quick facts/buzzwords
•
•
•
•
•
•
•
•
: A pair of HTML5 tags that enclose the body
section of an HTML document.
: A pair of HTML5 tags that enclose a paragraph in an
HTML document.
: An HTML5 tag used to add a line break in an HTML
document.
: A pair of HTML5 tags that are used to display a
superscript in an HTML document.
http: HyperText Transfer Protocol for transmitting web pages on
the Internet.
ftp: File Transfer Protocol for transmitting files on the Internet.
scp: Secure Copy Protocol, a secure alternative to ftp.
secure ftp: A secure alternative to ftp.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
25
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Chapter 1
Introduction
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
1
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
World of mobile computing
• Web browsers for desktop/laptop/netbook computing
• Internet Explorer, Firefox, Chrome, Safari, and Opera running on
Windows, Mac, etc.
• Tablets, smartphones, smart TVs, and other mobile devices
• Run on Android by Google, iOS by Apple, Windows RT, and several
other competing platforms including Blackberry and Firefox.
• These dedicated applications are specific to a platform in the native
application development environment.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
2
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Devices that run on Google’s
Android operating system
•
Devices that run on Google’s Android operating system include
phones, tablets, and wearable watches that can be programmed
using Java.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
3
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Devices that use Microsoft’s
Windows
•
•
Microsoft’s Windows phones and tablets are best programmed
using their .Net framework and languages such as C# or Visual
Basic.
While a significant percentage of the apps still need to be
developed in the native development environment, the
emergence of HTML5 and JavaScript make it possible to
develop apps that can be run across all mobile platforms through
the web.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
4
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Developing, installing, and testing
first app
• Chapter 2.
• Information such as how to manage the file access control on a
UNIX/Linux server and incorporating videos (a feature that is new to
HTML5).
• How to create a simple HTML5-based app.
• How to put the app on the web for general access through the Internet.
• How to enhance the presentation with CSS3
• How to add multimedia to the web page, including images and videos
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
5
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Example of a web page
•
A web page with an image, a video, and a table with
presentation that is enhanced using CSS3, which is accessed
from a UNIX server.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
6
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Making apps more interactive
through data input
•
How to change the layout of the output depending on the types
and sizes of screens.
•
How to switch between textual and graphical output.
•
How we can add more interaction/input so that a user can get
more refined output if he or she desires.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
7
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More in Chapter 3
• JavaScript
• jQuery for mobile devices
• How to embed JavaScript in a web page
• How to use an external JavaScript file on a web page
• How to use CSS3 elements designed for mobile devices
• How to accept input through a web page
• How to use different types of input widgets
• How to link multiple mobile pages in an app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
8
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More in Chapter 3 (cont’d)
• A physics Projectile app that accepts textual input
through an HTML5 app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
9
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Making apps do significant
computing
•
Apps will deal with a collection, sequence, or array of data.
•
The collection of items adds a new dimension to computing that
will be explored in Chapter 4.
•
In the process we will be learning a number of interesting
aspects of computing including
• How to validate input
• How to do computations based on input
• How to do conditional computing
• How to do iterative computing
• How to use arrays in JavaScript
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
10
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Temperature converter app
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
11
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
A menu-driven app to monitor
important indicators
•
•
Use of a real-world example that monitors blood test results of
thyroid cancer patients.
First, we create a numeric pad to enter a password for security
purposes.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
12
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
A menu-driven app to monitor
important indicators (cont’d)
• The patients will be asked to input their basic information
• Show a menu-driven system that is geared towards mobile
devices.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
13
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Data storage and retrieval
•
•
•
•
Set up the structure of the app to monitor blood tests of thyroid
cancer patients.
Study all the intricate programming details involved in managing
a data management system.
Securely store the information on our device, so that it is
available even when we have no Internet connection.
Discuss JSON (JavaScript Object Notation), which is syntax for
storing and exchanging text information.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
14
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More in Chapter 6
•
•
•
•
•
•
What is local storage?
How can we store and retrieve data locally on the device?
How can we check a password?
How can we make sure that the user has accepted the
disclaimer?
How can we accept and manage user profiles?
How can we store and manage an array of records?
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
15
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
More in Chapter 6 (cont’d)
•
The tabular history of records along with the personal
information that is retrieved from the local storage of the device.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
16
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Graphics on HTML5 canvas
• The basics of canvas drawings.
• A new addition in HTML5.
•
It allows us to create drawings on a web page.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
17
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
The summary of skills presented
in Chapter 7
•
•
•
•
•
•
How to work with canvas
How to draw various shapes
How to display some of the graphical gadgets
How to draw graphs
How to create an icon for the app on the home screen
How to run an app locally with no Internet connection
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
18
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Displaying the advice with the help of a
gauge meter
•
The gauge meter that is created as part of the advice screen of
the Thyroid app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
19
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Using servers for sharing and
storing information
•
•
•
•
See how we can run these apps even when the device is not
connected to the Internet.
Sync information from our Thyroid app on a server.
Use the server for emailing tables and charts.
The modified login screen for the server-based Thyroid app.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
20
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Modified menu screen for the serverbased Thyroid app with sync option
•
•
When a user presses the sync button, the user will have an
option to upload the records or download the records.
The user can choose whether or not to overwrite the records
with the same date on the device.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
21
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Using MongoDB server for sharing
and storing information
•
•
•
The data management part of the server-based Thyroid app.
It will be based on a JSON-based non-relational database
model.
An introduction to MongoDB with simple illustrative examples.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
22
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Using a relational database server
for sharing information
•
•
Relational databases will continue to play a major role in the
management of data.
They provide a more structured view of the database.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
23
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Using web templates
•
•
Popular for using different data sources to present a large
amount of information on similar-looking web pages.
Chapter 11 uses one of the popular web template systems called
handlebars to build an app called Explorador that helps us
explore parks in a metro region.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
24
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Working with image databases,
maps, and location tracking
•
•
Show how to obtain the location information and utilize it to
enhance the user experience with the help of maps.
Extend our understanding of databases for storing multimedia
information.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
25
Lingras
Building Cross-Platform Mobile and Web Apps for Engineers and Scientists
Cross-platform and native app
development and testing
•
•
Discuss and showcase the hardware and software development
tools necessary for native app development.
Demonstrate how some of the apps developed in the previous
chapter can be converted to the native platforms including iOS
and Android.
© 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly
accessible website, in whole or in part.
26

Purchase answer to see full
attachment

  
error: Content is protected !!