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. One of the major differences between PhoneGap and Cordova is the way to generate an App. 2017 Gabriel Fung 3
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) 2017 Gabriel Fung 4
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. 2017 Gabriel Fung 5
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/ 2017 Gabriel Fung 6
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. 2017 Gabriel Fung 7
Frameworks I have used My major app development experience: App1: a photo exhibition app (Cordova) App2: a 2D game just for fun (Appcelerator) App3: a psychology related app (Cordova) App4: a 2D game for learning Germany (Cordova) App5: an app for KEF roadshow (Native Android) App6: an air quality survey app (Cordova) App7: Revamp App4 (Cocos2d-x) App8: An ITF project (Ionic) App9: Revamp App3 (Ionic) 2017 Gabriel Fung 8
Cordova Installation Please refer to tutorial 1. Note: you need to install a number of tools to write apps, such as Corodva, Android SDK (for deploying to Android), Xcode (for deploying to ios), Depends on your network speed and your computer processing power, you may need to spend 10+ hours to download an install all tools. 2017 Gabriel Fung 9
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 different from 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> 2017 Gabriel Fung 10
HTML5 To write apps using Cordova, we use HTML5. There are thousands of books, websites, YouTubes, etc. talking about how to write HTML5 We will not discuss every single element in detail in this course We will focus on the concept of writing a HTML document especially for Apache Cordova 2017 Gabriel Fung 11
HTML Basic <!DOCTYPE html>declare a HTML 5 Document <html> Document begin <head></head> Header information, such as encoding <body></body> Information to display to the user </html> Document 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> 2017 Gabriel Fung 12
HTML 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> 2017 Gabriel Fung 13
HTML Basic (cont d) 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> 2017 Gabriel Fung 14
HTML Basic (cont d) Like all programming languages, you can have comment in your work. For HTML, the comment tags like this: <!-- Write your comments here --> 2017 Gabriel Fung 15
Empty Element 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> 2017 Gabriel Fung 16
HTML 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. We will first discuss inline which is easier to understand and easier for you to try, then discuss other two ways. To use CSS inline: <tagname style="property:value;"> The property is a CSS property. The value is a CSS value. 2017 Gabriel Fung 17
HTML 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"> 2017 Gabriel Fung 18
HTML 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;"> I recommend using px for the dimension. 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. 2017 Gabriel Fung 19
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> 2017 Gabriel Fung 20
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; } 2017 Gabriel Fung 21
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> 2017 Gabriel Fung 22
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. 2017 Gabriel Fung 23
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> 2017 Gabriel Fung 24
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; 2017 Gabriel Fung 25
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> You will learn many more styles in the tutorials. 2017 Gabriel Fung 26