10/1/2014

FP532 MOBILE WEB DEVELOPMENT

Topic 2.1 (PART 1) Understand the mobile web development

TOPIC 2 INTRODUCTION TO MOBILE WEB PLATFORM Hafizah Binti Abdullah @ Ali Jabatan Teknologi Maklumat & Komunikasi, PTSS

Topic 2.1 Understand the mobile web development [email protected]

Learning Outcomes

2.1.1

1) Identify curent trends in mobile communications technologies and systems.

Current trends in mobile communications technology & systems

2) Differentiate Desktop and Mobile Applications.

1) CLOUD COMPUTING

3) Identify benefits of Mobile Applications at both technical and business levels.

•

4) Identify applications that are best suited for mobile phones. 5) Compare existing technologies enabling the development of Mobile Applications. 6) Describe the limitations and challenges of working in a mobile and wireless environment [email protected]

The “cloud” in cloud computing can be defined as the set of hardware, networks, storage, services and interfaces that combine to deliver aspects of computing as a service. The Kitchen Sink is an app that showcases all of the UI widgets, data features, animations, themes, and touch events offered by Sencha Touch

[email protected]

1

10/1/2014

Current trends in mobile communications technology & systems (cont…) 2) LONG TERM EVOLUTION (LTE) – Telecommunication •

Standard for wireless communication of high-speed data for mobile phones and data terminals.

[email protected]

Current trends in mobile communications technology & systems (cont…) 3) SMARTPHONE •

A Smartphone is a mobile phone built on a mobile operating system, with more advanced computing capability and connectivity than a feature phone.

•

Five Fantastic Advances in Smartphone Technology •

Flexible Screens

•

Waterproof Phone

•

Double Screens

•

1080p Display – HD Resolution

•

Phone to TV Application

[email protected]

2.1.2 Desktop and Mobile Applications DESKTOP APPLICATION

Differences between Desktop & Mobile App Differences

MOBILE APPLICATION • Mobile App is an application delivered to users from a web server like the Internet.

2) Security risk

There are always risks involved when dealing with working online

3) Cost

Based on client needs

4) Connectivity

Most of desktop application did Most of mobile application not need an internet connection must have an internet connection

5) Speed

Developed and brought to market faster

• Mobile Deploy an application for a mobile device, such as a phone or a tablet. [email protected]

Mobile App

Applications need to be individually installed on each computer

• An application that runs stand alone in a desktop or laptop computer. • Desktop Deploy an application for a desktop computer, such as a Windows computer or Macintosh.

Desktop App

1) Accessibility

Applications can be easily accessed from any computer or location that has Internet access

Mobile app developers are freelancers, and the field is growing rapidly

[email protected]

2

10/1/2014

Clear Example: Desktop vs Mobile App Example

Desktop

Web

Mobile

Facebook

None

Open through browser on Open through icon Open through computer (Chrome, downloaded in Google browser on device Safari, FireFox, IE, etc) Play, iTunes, etc. at

Photo Editing

iPhoto, Paint, Microsoft Office Picture Manager

Sites like Flickr and PicMonkey - Launched by computer

Instant Retro Photo, PicSay (Android); PicStitch, Be Funky Photo Editor (Apple)

Flickr, etc, launched through mobile browser

Comes stock on Microsoft in “Accessories” doesn’t need Internet

worldofsolitaire.com; games.com; solitaire-cardgame.com

The Solitaire Games (Apple);

worldofsolitaire.com; games.com;

Solitaire Free Pack (Android)

Opened in mobile browser

http://m.facebook.com

Solitaire

2.1.3 Benefits of Mobile Application

Mobile Web

MOBILE APPLICATION???? • A mobile application is a software application designed to run on Smartphone, Tablet and other Mobile devices. • Benefits; i.

Fast and easy to use

ii.

Rich data capture in real time

iii. Volume of information - Custom branding iv. Advertising - provide a form of advertising that you can carry in your pocket v. Reduce problem solving time vi. Interactivity/Gaming

[email protected]

[email protected]

2.1.5 Technology in Mobile Apps 2.1.4 Top Applications for Mobile Phones 1) SOCIAL NETWORKING •

Facebook, Twitter, WeChat

2) CLOUD STORAGE •

Dropbox, Instagram

5) EDUCATION & BOOK • iBooks, MyKamus

6) ACCESSORIES • Camera360 Ultimate, Waze, Google earth

3) ENTERTAINMENT • YouTube, iPlayer Radio

4) GAMING • Angry birds, DragonVale, Asphalt 8, AirAttack, Subway Suffers [email protected]

[email protected]

3

10/1/2014

Technology in Mobile Apps (cont…)

Technology in Mobile Apps (cont…) Features Graphics

Slow

Fast

Slow

Native

Emulated

Distribution Camera Notifications Contacts, calendar

Web No No No

Appstore Yes Yes Yes

Appstore Yes Yes Yes

Shared SQL

Secure file storage

Yes Mostly online HTML5, CSS, Javascript

Yes Online and offline ObjectiveC, Java

Secure file system, shared SQL Yes Online and offline HTML5, CSS, Javascript

Geolocation Connectivity Development skills

1) Limitations of the Wireless Network • limited communication bandwidth • frequent disconnections • heterogeneity of fragmented networks

Hybrid HTML, Canvas, SVG

Emulated

Offline storage

2.1.6 Limitations and Challenges working in mobile and wireless technologies

Native Native APIs

Native look and feel

Performance

[email protected]

HTML5 HTML, Canvas, SVG

[email protected]

Topic 2.1 (PART 2) Understand the mobile web development

jQuery Mobile

2) Limitations Imposed by Mobility • route breakages • lack of mobility awareness by system/applications

3) Limitations of the Mobile Device • short battery lifetime • limited capacities

[email protected]

[email protected]

4

10/1/2014

Learning Outcomes What is jQuery??

7. Discuss the need of jQuery Mobile. 8. Discover the myths of the Mobile Web. 9. Distinguish between MobileWeb and MobileWebapps. 10. Discuss the constraints imposed on mobile platforms including screen size, colors, battery life, memory, processing power, intermittent network.

• jQuery Mobile is a cross platform mobile framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework.

11. Illustrate the life cycle of a mobile application. 12. Explain the platform API description in mobile development.

[email protected]

[email protected]

Distinguish between MobileWeb and MobileWebapps • MobileWeb is Mobile Web is medium to which Web sites are accessed using mobile devices.

• MobileWebapps is referring to Internet-enabled apps that have specific functionality for mobile devices.

• Browser based HTML pages

• No need for download and installation via an App Store

[email protected]

Mobile Platform Constraint 1. Screen Size 2. Battery Life 3. Memory 4. Intermittent Network

[email protected]

5

10/1/2014

Mobile Platform Constraint (cont…)

Mobile Platform Constraint (cont…)

1) SCREEN SIZE

2) BATTERY LIFE

• Mobile users are operating on a much smaller screen than desktop users.

• Battery life will be affected by the usage of Wi-Fi, Bluetooth, GPS, sensors like accelerometers and magnetometers, the mobile’s backlight and so on.

• Some ways you can make it easier for the users to use your application are: 1. Use bigger font: Owing to the smaller screen size and the distracting environment, use a font that can make the information easily visible to the user. 2. Make the right thing visible: As the screen size is very limited, make only the important and currently required things visible on the screen.

[email protected]

• How to reduce battery life? 1. Avoid accessing hardware: Access resources only as and when required. 2. Use dark background: Use a darker background as far as your application design allows it because screen illumination drains the battery. A brighter screen will reduce battery life faster than a darker screen. [email protected]

Mobile Platform Constraint (cont…) 3) MEMORY

Mobile Platform Constraint (cont…) 4) INTERMITTENT NETWORK

• Mobiles have a very limited storage space as compared to desktops.

• Network connectivity is potentially slow and unreliable

• Take some steps to increase or save storage space.

• Offline behavior largely depends on the application scenario

1. Use external storage: The storage space can be extended by using external storage like SD cards. 2. Allow users to control their data: Due to a lack of proper file explorers, allow users to delete, backup and restore data hence giving them more control on which data they want to use currently.

[email protected]

• Enabling any Web-app for offline use may be a good idea • Not all browsers support offline applications • Browsers may start removing cached applications more aggressively

[email protected]

6

10/1/2014

Cycle of a Mobile Application Platform API Description in Mobile Development 1. Concept API (Application Programming Interface)

2. Prototyping

• API specifies how some software components should interact with each other.

3. Development 4. Testing

• API can be used to ease the work of programming GUI components.

5. Deployment

• API comes in the form of a library that includes data structures, object classes, and variables.

6. Release

[email protected]

[email protected]

I don’t stop when I’m tired. tired I only stop when I’m done… done

End of Topic 2.1 =) [email protected]

7