seem4570 system design and implementationseem4570/2018/lecture/lecture01.pdf · history of cordova...

SEEM4570 System Design and Implementation

Lecture 1 – Cordova + HTML + CSS

Apache Cordova

• Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript• E.g. you write iOS apps using Objective-C, Android apps

using XML+Java and Windows apps using C#. With Cordova, you use HTML+CSS+JS to write apps for all platforms!

• It is an open source software.• http://cordova.apache.org/

© 2017 Gabriel Fung 2

History of Cordova

• In 2009, Nitobi Software produced PhoneGap• In 2011, Adobe purchased Nitobi. In the same year, the

code was contributed to an Apache project called Apache Callback, then rename as Apache DeviceReady, and finally rename as Apache Cordova.


Native Apps, Web Apps, Hybrid Apps

• Apps written by Cordova are hybrid apps.• There are three kinds of apps: native apps, web apps and

hybrid apps. • Native apps:

• They are apps developed for one particular device (e.g. Android) and is installed directly onto the device itself. Users of native apps usually download them via app stores. You may run the apps without Internet connection (e.g. the Camera app).

• Web apps:• They are essentially web sites but look and feel like native apps.

They are typically built using HTML5, CSS and JavaScript. They require a browser and Internet connectivity to run (i.e. you must online). You do not need to install anything (e.g. app.ft.com)


Native Apps, Web Apps, Hybrid Apps (cont’d)

• Hybrid apps:• They are partly native apps, partly web apps. Like native apps, they

live in an app store and can take advantage of the many device features available (e.g. local storage, phone books, camera, geolocation, …). Like web apps, they rely on HTML5+CSS+JS for layout rendering.


Framework based on Cordova

• Many frameworks based on Cordova:• PhoneGap https://phonegap.com/• Ionic https://ionicframework.com/• Onsen UI https://onsen.io/• Framework7 https://framework7.io/• …


Other Frameworks

• Some other popular frameworks:• Appcelerator http://www.appcelerator.com/

• Pros: Create native app using JavaScript. Quite well organized APIs.• Cons: Very long compile time. Not as intuitive as it claims (from my

experience). • Cocos2d-x http://www.cocos2d-x.org/

• Pros: Free. Support C++, Lua or JavaScript. Excellent for 2D game programming.

• Cons: Not well organized APIs. Steep learning curve.• Unity https://unity3d.com/

• Pros: Excellent for game programming (including 3D games). Very well organized APIs.

• Cons: Support C# (I am sure most of you don’t know C#), UnityScript (a variation of JavaScript) or Boo. Steep learning curve.


Frameworks I have used

• My major app development experience:• App 1: a photo exhibition app (Cordova)• App 2: a 2D game just for fun (Appcelerator)• App 3: a psychology related app (Cordova) • App 4: a 2D game for learning Germany (Native iOS)• App 5: a survey app (Native iOS)• App 6: an app for KEF roadshow (Native Android)• App 7: an air quality survey app (Cordova)• App 8: Revamp App4 (Cocos2d-x)• App 9: An ITF project (Ionic)• App 10: Revamp App3 (Ionic)


Cordova Installation

• For step by step instruction, please refer to tutorial 1.• Note: you need to install many software before you can

write an app, such as Android SDK (for deploying to Android), Xcode (for deploying to iOS), Node.js, Cordova, …• Depends on your network speed, you may need to spend

10+ hours to download and install all software.


HTML

• HTML stands for Hypertext Markup Language• It describe the structure of a document

• By denoting certain text as links, headings, paragraphs, etc.• Markup Language is not a Programming Language• Programming Language (e.g. C) tells the computer what to

do.• printf("some information");

• Markup Language (e.g. HTML) tells the computer what is the meaning of a piece of data by using “tag”• <p>some information</p>


HTML5

• To write apps using Cordova, we use HTML5.• There are thousands of books, websites, video clips

on YouTube, etc. about HTML5• We will not discuss every single element in detail in

this course• We will focus on using HTML5 to write an app under

the Cordova framework


HTML5 Basic

• <!DOCTYPE html>Declare a HTML 5 Document<html> Begin<head></head> Basic information, such as encoding<body></body> Information to display to the user</html> End

• An HTML element usually consists of a start tag and end tag, with the content inserted in between:• <tagname>Content Here</tagname>

• A tag can has attribute:• <tagname attribute=“xx”>Content Here</tagname>


HTML5 Basic (cont’d)

• Although tags and attributes are case insensitive, always use lower case only for convention.• Although <body>, <BODY> and <Body> are all valid, use

<body> only.• Always quote attribute values• Write: <a href=”XXXX">XXXX</a>• Do not write: <a href=XXXX>XXXX</a>



• HTML treats “next line character” as “space character”. The output of them are the same:• <body>

This is the first sentence.This is the second sentence.</body>• <body>

This is the first sentence. This is the second sentence.</body>


• Like all programming languages, you can have comment in your work. For HTML, the comment tags like this:•

Empty5 Elements

• HTML elements with no content are called empty elements. • E.g. <br> is an empty element (<br> means line break).

Empty elements can be "closed" in the opening tag like this: <br />. Closing or not is not mandatary in HTML5.• <body>

This is the first sentence.<br />This is the second sentence.<br /></body>• <body>

This is the first sentence.<br>This is the second sentence.<br></body>


CSS Styles

• Setting the style of an HTML element, can be done with CSS and the style attribute.• CSS stands for Cascading Style Sheets. It describes

how HTML elements are to be displayed.• CSS can be added to HTML elements in 3 ways: inline,

internal, and external.• To use CSS inline: • <tagname style="property:value;">• The property is a CSS property. The value is a CSS value.


Color Style

• The background-color property defines the background color for an element.• <body style="background-color:#4B53A4;">• #4B53A4 is the color code. You can refer to

http://htmlcolorcodes.com/color-picker/ for the color code. • You may use rgba as well, such as:

- <body style="background-color:rgba(255, 255, 0, 0.5);"> where the last component is the opacity (0–1).

• The color property defines the text color for an element:• <body style="background-color:#4B53A4; color:#641E18">


Text Style

• The font-family property defines the font face:• <body style="font-family:verdana;">

• The font-size property defines the text size:• <body style="font-size:50px;">

• The text-align property defines the horizontal text alignment:• <body style=”text-align:center;">

• There are many other properties to style the fonts, such as font-weight, text-decoration, etc.


About Size

• There are many ways to manipulate size. Try them yourself!• Pixel (px), Percentage (%), Viewport Width (vw), Viewport

Height (vh), Emphemeral unit (em)• E.g. font-size: 16vw vs. font-size: 16px


Internal CSS

• To use internal style sheet, add <style> element in <head>. It changes all elements with the same name in the whole page.• <head>

<style>body {

background-color: #aaaaaa;color: #444444;

}</style></head>


External CSS

• To use an external style sheet, add a link in <head>. An external style sheet define the style for many pages. With an external style sheet, you can change the look of an entire app, by changing one file:• <head>

<link rel="stylesheet" href="styles.css"></head>

And here is style.css:• body{

background-color: #aaaaaa;color: #444444;

}


Some Useful Elements

• Link <a>• <a href="http://www.cuhk.edu.hk">CUHK</a>

• Image <img>• <img

src="http://www.cuhk.edu.hk/english/images/cuhk_logo_2x.png">

• Span <span>• Usually is to define the style of a piece of text.• <body>This is a <span style=“color:red”>red</span>

word.</body>


Some Useful Elements (cont’d)• Table <table>• Define a table.• A table is divided into rows (<tr> table row), and each row

is divided into cells (<td> table data). • <table>

<tr><td>A</td> <td>B</td>

</tr><tr>

<td>C</td> <td>D</td>

</tr></table>• You will learn more about <table> in the tutorial.


Some Useful Elements (cont’d)

• Layer<div>• Define a new layer. It is useful especially you want to layer

elements. • <body>

<div style=”position:absolute; top:0px; left:0px; width:90px; height:90px; background-color:#000000”></div><div style=”position:absolute; top:20px; left:20px; width:90px; height:90px; background-color:#888888”></div><div style=”position:absolute; top:40px; left:40px; width:90px; height:90px; background-color:#aaaaaa”></div></body>


Some Useful Styles

• Let’s use <div style=“...”>DEMO</div> as example:• Width and height:

• width:200px; height:200px• Border:

• border:solid; width:200px; height:200px;• border:solid dotted dashed double; width:200px; height:200px

• Margin:• margin:10px; border:solid;• margin:10px 20px 30px 40px; border:solid;

• Padding• padding:10px; border:solid;• padding:10px 20px 30px 40px; border:solid;


Some Useful Styles (cont’d)• Display:

• You can use it to show or hide an element, as well as change its default display style.

• <div style=“display:none; border:solid”>DEMO</div>• <div style=“display:block; border:solid”>DEMO</div>• <div style=“display:inline; border:solid”>DEMO</div>


seem4570 system design and implementationseem4570/2018/lecture/lecture01.pdf · history of cordova...

Documents