Introduction

1. Introduction

2. Historical Notes iPhone changed what people expected from a mobile phone 2009 iPad created the tablet market Platform fragmentation 5000 different mobile devices all have preinstalled browsers devices may have alternate browsers ~18 browsers in use: Full browsers: equivalent of desktop; many use WebKit rendering engine; rendered on device. eg Safari, Android, IE mobile Mini mobile: low powered devices, poor bandwidth; web page rendered on server, compressed and sent to device; no client side interactions. eg Opera Mini, Bolt (Blackberry), Ovi (Nokia) Either deal with multiplicity or accept limited market. 2 1 Introduction

3. Distinctive Features Small screen A large number of target devices: many screen sizes; resolutions; generations of machines; computing power. Heterogeneous Keyboard limited – touch interface Low power - both computing and electrical A number of distinct operating systems OSX – Android - Linux Intermittent connection to a network Location aware – optional but a large market Information available from built in sensors Device is not operated from a static position laptop is portable, but used on table or lap screen rotates 1 Introduction 3

4. Components(i) • Operators • Companies who provide the SIM cards. • Some of them install cellular towers and operate the network. Own the physical infrastructure. • Some of them own no physical infrastructure but rent resources from the owners • Networks • We tend to differentiate between phone connections wifi connections and blue tooth connections all are carried by wireless signals. • The phone connections are of various sorts and various GSM - GPRS … 1 Introduction 4

5. Components(ii) • Devices • Handsets – and pads/tablets - not all are designed to make calls. Target audience is very large, but fragmented. • Operating System • OsX (iPads iPhones) • Windows Phone • Android – form of Linux – may be heavily customised by Operator 01 Introduction 5

6. Components(ii) • Application Framework • Developer accesses application framework also called API to create application • Java: many platforms support java, but diversity of screen size and processor power presents a challenge. • Flash Lite: AdobeFlashLite is an application framework that uses the Flash Lite and ActionScriptframeworks to create vector-based applications. • Windows Mobile Applications:downloaded and installed over the air or loaded via a cable-connected computer. • Cocoa Touch:API used to create native applications for the iPhone and iPod touch. Applications must be submitted and certified by Apple before being included in the App Store. Once in the App Store, applications can be purchased, downloaded, and installed over the air or via a cable-connected computer. 1 Introduction 6

7. Components(ii) • Application Framework • Android SDK:create native applications for any device that runs the Android platform. Applications in C/C++ or use a Java virtual machine. Java more common in the mobile ecosystem. • Web Runtimes (WRTs):Nokia, Opera, and Yahoo! provide various Web Runtimes, or WRTs. Frameworks for web apps – niche market • WebKit:a browser technology, so applications can be created simply by using web technologies such as HTML, CSS, and JavaScript. Applications can be run and tested in any WebKit browser, desktop, or mobile device • Web:only application framework that works across virtually all devices and all platforms. In the past limited functionality led to stagnation.Currently demand to offer products and services outside of operator control, and shorter development cyclesseeing a growth. 1 Introduction 7

8. Course Contents • Nothing on design – that was EE2260 • Technology: • Could look at one of the proprietary frameworks • Apple … windows … android … • Step learning curve; limited market • Choose to do web based applications • html5, css, javascript • Leverage existing knowledge : you will need to understand it better. • Limitations - gap in speed and functionality w.r.t. native applications narrowing. • We will introduce the use of phoneGap 1 Introduction 8

9. Course Contents We will introduce the use of phoneGap. Way of creating native apps direct from web technology. Single development - deploy of many platforms 1 Introduction 9

10. Course Contents Using html5/css/javascript means debugging can be performed in a standard web browser. jQuery – a javascript framework designed for manipulating web pages jQueryMobile – framework which extends jQuery specifically for mobile apps. Description of the framework structure – not a language class – ideas for practice in the workshops Considerations for performance optimisation 1 Introduction 10

11. Course Organisation 1 Lecture / week 1 workshop per week – apply skills and concepts discovered in the lectures (will not run all the way to the end of the term) Assessment: A number of questions in the combined exam with EE2700 and EE2701. An assignment again in conjunction with EE2700 and EE2701. 1 Introduction 11

12. Web apps v native apps What is the difference? Why as a developer would you choose one or the other? From the design course you should have some idea of the pros and cons 01 Introduction 12

13. Web apps v native apps <m.mit.edu> <www.amazon.co.uk> <www.google.co.uk> Normal web page if you know web technology you can develop mobile how do the sites know you are on a mobile? But some additions pinch to zoom rotate screen access (some) of the capabilities. GPS phoneGap includes some native code – allows you to access some utilities not available through straight html5/css/javascript (egaddressbook) Native apps - icons on the screen. for icons do you need native apps? 1 Introduction 13

14. Web apps v native apps Technology Create responsive web sites web sites that will work on desktops or mobile devices. They respond to the browser and context in which they are running But also responsive in that they respond helpfully to the user and provide a good user experience where the web site responds rapidly to user requests. Need to understand how a web site is technically structured and how the browser goes about rendering the page. 1 Introduction 14

15. html5 & css3 An evolving set of technologies Sites hang around – browsers change – each with a different modification date – backwards compatibility is essential in web technologies Browsers support set of features … compatible with some of the technology Features are separated and given their own logos Semantics Styling Multimedia Offline Browsers support some set of html5 1 Introduction 15

16. Content Consider a book. It is a string of characters. The characters are grouped in words and the words are grouped in sentences • Chapter 1 Variation Under Domestication • Causes of Variability Effects of Habit Correlation of Growth Inheritance Character of Domestic Varieties Difficulty of distinguishing between Varieties and Species Origin of Domestic Varieties from one or more Species Domestic pigeons, their Differences and Origin Principle of Selection anciently followed, its Effects Methodical and Unconscious Selection Unknown Origin of our Domestic Productions Circumstances favourable to Man's power of Selection When we look to the individuals of the same variety or sub-variety of our older cultivated plants and animals, one of the first points which strikes us, is, that they generally differ much more from each other, than do the individuals of any one species or variety in a state of nature. When we reflect on the vast diversity of the plants and animals which have been cultivated, and which have varied during all ages under the most different climates and treatment, I think we are driven to conclude that this greater variability is simply due to our domestic productions having been raised under conditions of life not so uniform as, and somewhat different from, those to which the parent-species have been exposed under nature. There is, also, I think, some probability in the view propounded by Andrew Knight, that this variability may be partly connected with excess of food. It seems pretty clear that organic beings must be exposed during several generations to the new conditions of life to cause any appreciable amount of variation; and that when the organisation has once begun to vary, it generally continues to vary for many generations. No case is on record of a variable being ceasing to be variable under cultivation. Our oldest cultivated plants, such as wheat, still often yield new varieties: our oldest domesticated animals are still capable of rapid improvement or modification. It has been disputed at what period of time the causes of variability, whatever they may be, generally act; whether during the early or late period of development of the embryo, or at the instant of conception. Geoffroy St Hilaire's experiments show that unnatural treatment of the embryo causes monstrosities; and monstrosities cannot be separated 1 Introduction

17. When it is published a layout is created which reflects the efforts of the type setter to make the structure of the information clear. Here is an example of making the book available as a web page 1 Introduction

18. Here is an alternative – layout. More or less successful? 1 Introduction

19. The layout will also reflect the publishers wish to establish a distinctive look. 1 Introduction

20. The layout will also reflect the publishers wish to establish a distinctive look. Here the precis at the top of the chapter has been removed. Why? Is this a good idea? 1 Introduction

21. Side by side comparison of two similar ideas, but actually very different effects. Which is better? 1 Introduction

22. Markup So the author provided the text, but it is the publisher who decided how the book as laid out. The layout was communicated to the typesetter via the “markup” The typesetter could layout the pages in accordance with the house style. Going from hardback to paperback, in principle, there is no need to change the content (obviously) nor the markup. All that happens is the markup is interpreted in a different way. When we produce web pages they are more flexible, easier to maintain and easier to prepare for different purposes if we separate the way content and the structure from the way we are going to display that content. The paragraph symbol, which you get in microsoft word when you are reviewing a document ¶ is a typesettter’smarkup symbol. 1 Introduction

23. html* For the web we create a file to hold the content and to document the structure – but not the layout. The html file A typical html file looks like this The browser then makes a decision on how to display <h2> - the second level heavy. Font size, style, colour,… <!DOCTYPE html> <html> <head> <title>Page information</title> </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> 1 Introduction

24. presentation CSS3 – allows you to separate the layout instructions from the content and structure, Good practice everywhere Vital for mobile development (It will be something on which I judge the quality of your assignment) A number of different style sheets can be written for use in different contexts. Can also make style sheets for visual impairments – colour blind – or even to create Braille or for a screen reader. 1 Introduction

25. CSS A CSS file is just a set of css instructions h2 {font-size:16px; font-family:verdana;} Property:value pairs value selector property 1 Introduction

26. CSS <!DOCTYPE html> <html> <head> <title>Page information</title> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue; font-size:20pt} p {margin-left:50px;} </style> </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> CSS in the html file – what you should never do 1 Introduction 99Notes

27. External CSS file Themarkup tags describe the role of different bits of text in the file. Tags come in pairs which delimit their start and <h1>This is a top level header </h1> The tags do not define: how the page is laid out or the look of the text. That is determined by the browser unless you describe what you want with a style sheet. The style sheet should be in separate file href gives the address of the file. This one snazzy.css is in the same directory as the html file. It may be in another directory, in which case you must give the directory path. It may even be on another machine when you give the url of the file. <head> <title>Page of course Information</title> <link rel=“stylesheet” href=“snazzy.css” type = “text/css” /> </head> 1 Introduction

28. Imagine being asked to draw out a web page given the html. In order to create the web page you would need to go through the whole file. A web browser needs to do the same thing. Identifying elements – sub-elements and content. It builds a suitable representation in memory. Parsing the file <html> <head> Page information </head> <body> Page contents – including markup describing the role of the text <h2>Variation under domestication</h2> </body> </html> Need to produce a more complex file 1 Introduction

29. There are many ways of representing a web page in memory. Early web browsers did it in many ways. Once there is a model in memory it is possible to manipulate it in interesting ways. It provides a structure for interactive web pages. All browsers should model the web page in the same way. If in addition they provide an API (Application Programmer Interface) it becomes easy for a web creator to make an “exciting web page” which works on all browsers. This is the DOM Document Object Model Not unique – but standard Building a model 1 Introduction