Ch01 Getting Started

Chapter 1
GETTING STARTED
Mr. SAR Vathnak
May , 2018
PHNOM PENH INTERNATIONAL UNIVERSITY FACULTY OF SCIENCE AND INFORMATION TECHNOLOGY
OBJECTIVES
 To understand about some key terms
 To compare both advantages and disadvantages of
Web Apps & Native Apps
 To quickly review on HTML, CSS, and JavaScript
GETTING STARTED PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1

WHAT IS A WEB APP?

 A Web App:
 is basically a website that is specially optimized for
use on a smartphone.
 contains any user interfaces (UI) which are built by
using web standard technologies (HTML, CSS, and
JavaScript)
 is not installed on the phone
 is not available in the Android Market
 is not written with Java Programming
GETTING STARTED PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2

WHAT IS A NATIVE APP?

 A Native App:
 are installed on the Android Phone
 have access to the hardware
(e.g. speakers, accelerometer, camera, etc. )
 is available in the Android Market
 is written with Java Programming

PROS & CONS OF WEB APP DEVELOPMENT

 Advantages:
 Web developers can use their current authoring tools
 You can use your current web design and development skills
 Your app will run on device that has a web browser
 You can fix bugs in real time
 The development cycle is fast
 Disadvantages:
 You cannot access the all cool hardware features of the phone
 You have to roll your own payment system if you want to charge for the app
 It can be difficult to achieve sophisticated UI effects

PROS & CONS OF NATIVE APP DEVELOPMENT

 Advantages:
 Millions of registered credit card owners are one click away
 You can access all the cool hardware features of the device
 Disadvantages:
 You have to pay to become an Android Developer
 Your app will run only on Android phones
 You have to develop using Java
 The development cycle is slow (develop, compile, deploy, repeat)

WHICH APPs YOU

WANT TO DEVELOP?
 We decide to take a web app and
package it as a native app for
Android
and other mobile platforms,
because:
 can write with our preferred
language (HTML, CSS, JavaScript…)
 can release a product as a pure
web app (need only browser…)
 can use the same code base to
create an enhanced native version
(access device hardware, sell in the
Android Market, …)
 can allow free access to the web
GETTING STARTED app and charge for the more PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 6
BASIC STRUCTURE OF
WEB DEVELOPMENT
This is an index.html main file
CSS link should place here
JavaScript should place at

the end of <body>
 Tags/Elements
 Attribute
 Value
HTML
TAGS / ELEMENTS Tell all child elements

and parent tags
 When you have a tag or tags inside another tag:
 The inner tags are called child elements or children
 The outer tag is called the parent tag
GETTING STARTED: HTML REVIEW PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 8
TAGS / ELEMENTS
 The head contains information

about the page, most of
which
is invisible to the user.
 Please tell about tags,
attributes,
and values in this html
fragment
GETTING STARTED: HTML REVIEW PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 9a
TAGS / ELEMENTS
 The head contains information

about the page, most of
which
is invisible to the user.
 Please tell about tags,
attributes,
and values in this html
fragment
GETTING STARTED: HTML REVIEW PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 9b
ATTRIBUTE & VALUE

Please tell about tags, attributes, and
values in this html fragment:
GETTING STARTED: HTML REVIEW PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 10
 Inline Stylesheet
 Internal Stylesheet
 External Stylesheet
CSS  Selector (by element, by class, by id, …)

REVIEW CSS
 CSS:
 is a stylesheet language that you use to define
the visual presentation of an HTML document.
 Look at the CSS fragment on the right hand,

what
does it tell you about?
 body, input, button, .noFill: is the selector
(what is affected by rule)
 Curly Brace { }: enclose the declaration
(the rule itself)
 The declaration includes a set of properties and
their values.
GETTING STARTED: CSS REVIEW PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 11
REVIEW CSS
 You can opt to select elements by:
 Tag name: e.g. body and header
 Class name: e.g. .container and ul.todo
 ID: e.g. #item
REVIEW CSS
 ID: e.g. #item
REVIEW CSS
 ID: e.g. #item
REVIEW CSS
 ID: e.g. #item
 NOTE: In case that you want to get more

specific
by chaining selectors together, you must
separate
each selector by space.
e.g. ul.todo li .buttons button
REVIEW CSS
 ID: e.g. #item
 NOTE: In case that you want to get more

specific
by chaining selectors together, you must
separate
each selector by space.
e.g. ul.todo li .buttons button
 NOTE: In case that you want to apply the same

style to each selector, you must separate each
selector by comma.
e.g. body, input, button
CLASS vs. ID IN CSS

 When need to use class and id attribute?
 We must use class attributes when we have
more than one item on the page with the
same class value.
 Conversely, id values have to be unique to a
page.
 NOTE: Selecting elements by ID is must faster

than
by class, so you can hurt your performance by
overusing class selectors.
 Document Object Model (DOM)
 Variable Declarations
 Create & Apply User-Defined Functions
JAVASCRIPT
REVIEW JAVASCRIPT
 What is JavaScript
language?
 JavaScript is a scripting
language that you can
add to an HTML page to
make it more interactive
and convenient for the
user.
 JavaScript can even
contact the web server
to execute database
changes without
refreshing the current
web page.
(Using Ajax concept)
REVIEW JAVASCRIPT
 Here are some points about JavaScript’s syntax that are worth noting:
 Statements are terminated with semicolons (;)
 Code blocks are enclosed in curly braces ({})
 Variables are declared using the var keyword
 Array elements can be accessed with square bracket notation ([])
 Array keys are assigned beginning at 0
 The single equals sign (=) is the assignment operator
 The double equals sign (==) is the equivalence logical operator
 The plus sign (+) is the string concatenation operator
PRACTICE
REFERENCES
[1] Video at: https://www.tutorialspoint.com/cprogramming/c_operators.htm
[2] 2008_K.N.King_C-programming_A-modern-approach[2ed]
[3] 1988_BrianW.Kernighan, DennisRitchie_The-c-programming-language[2ed]
[4] https://www.webopedia.com/TERM/O/operand.html [Accessed on Jan 2018]
[5] http://www.learn.geekinterview.com/programming/c/operator-operand-and-
expression-in-c.html [Accessed on Jan 2018]
[6] https://www.techopedia.com/definition/25582/arithmetic-operator
[Accessed on Dec, 2017]
[7] https://www.geeksforgeeks.org/c-operator-precedence-associativity/
[Accessed on Jan, 2017]

Ch01 Getting Started

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ch01 Getting Started

Uploaded by

Copyright:

Available Formats

Chapter 1

GETTING STARTED PROGRAMMING MOBILE APPLICATIONS| BY SAR VATHNAK >> 1

WHAT IS A WEB APP?

GETTING STARTED PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 2

WHAT IS A NATIVE APP?

GETTING STARTED PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 3

PROS & CONS OF WEB APP DEVELOPMENT

GETTING STARTED PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 4

PROS & CONS OF NATIVE APP DEVELOPMENT

GETTING STARTED PROGRAMMING MOBILE APPLICATIONS | BY SAR VATHNAK >> 5

WHICH APPs YOU

CSS link should place here

JavaScript should place at

TAGS / ELEMENTS Tell all child elements

 The head contains information

 The head contains information

ATTRIBUTE & VALUE

CSS  Selector (by element, by class, by id, …)

 Look at the CSS fragment on the right hand,

 NOTE: In case that you want to get more

 NOTE: In case that you want to get more

 NOTE: In case that you want to apply the same

CLASS vs. ID IN CSS

 NOTE: Selecting elements by ID is must faster

You might also like