mobile web development ppt
TRANSCRIPT
![Page 1: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/1.jpg)
Mobile Web Development
![Page 2: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/2.jpg)
Types of Mobile Applications
Native Application Web Applications Hybrid Applications
![Page 3: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/3.jpg)
Native Application
Native mean applications that are written specifically for a particular type of mobile
device.
Pros of native apps:
They offer a best-in-class user experience, offering a rich design and tapping into device
features and offline use
You can charge for applications.
User can download and install your app.
Cons of native apps:
You have to use different platforms, SDK’s, languages for different mobile platforms.
They require certification and distribution from a third party that you have no control over.
They require you to share revenue with the one or more third parties.
Developing, testing, and supporting multiple device platforms is incredibly costly.
![Page 4: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/4.jpg)
Web Applications
Web apps reside on sever and there is no need to install or download the apps. It just a web page optimized for mobile devices. Web Apps can be written in HTML, CSS and javascript.
Pros of web apps:
You can use simple HTML, CSS and JS for most of the mobile platforms.
You can maintain and fix bugs in real time.
Cons of web apps:
You cannot access all hardware functions of mobile devices.
![Page 5: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/5.jpg)
![Page 6: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/6.jpg)
![Page 7: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/7.jpg)
The difference between native and Web application can be very easily seen in the above image.
![Page 8: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/8.jpg)
Architecture
![Page 9: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/9.jpg)
Progressive Enhancement
It defines layers of compatibility that allow any user to access the basic content, services and functionality of a web and providing an enhanced experience for browser with better support of standards.
• Basic content is accessible to all browsers.
• Basic functionality is accessible to all browsers.
• Semantic markup contains all content.
• Enhanced layout is provided by externally linked CSS.
• Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
![Page 10: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/10.jpg)
Emulators and Simulators
An emulator is a desktop application that emulates mobile device hardware and a mobile operating system, allowing us to test and debug our applications and see how they are working.
A simulator is a less complex application that simulates some of the behaviour of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators.
An up-to-date list of emulator download URLs can be found at http://www.mobilexweb.com/go/emulators.
![Page 11: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/11.jpg)
Standards
![Page 12: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/12.jpg)
![Page 13: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/13.jpg)
![Page 14: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/14.jpg)
CSS compatibility
![Page 15: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/15.jpg)
JavaScript Compatibility
![Page 16: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/16.jpg)
Viewport
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
![Page 17: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/17.jpg)
Icons
![Page 18: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/18.jpg)
Images
![Page 19: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/19.jpg)
Using images effectively
Use images in XHTML only for logos, photos, and maps. Compress the images with normal web image methods. Define the width, height, and alternative text for every image. Use data URIs for small images whenever possible. Leave icons, buttons, backgrounds, and visual alert images for CSS.
![Page 20: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/20.jpg)
Document download Compatibility table
![Page 21: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/21.jpg)
Mobile Web App development Stages
Design Phase
Selecting the Framework
Targeting group of devices and supported platforms
Testing the Web App on Emulator
![Page 22: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/22.jpg)
Mobile Web Design
As we can see , the context is king on the mobile web
![Page 23: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/23.jpg)
Mobile Web App development Frameworks
![Page 24: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/24.jpg)
Why chose framework?
![Page 25: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/25.jpg)
![Page 26: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/26.jpg)
![Page 27: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/27.jpg)
The framework’s provide many ready to use themes that make the Web App look native
![Page 28: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/28.jpg)
The Framework recognizes various tap events, hence allowing for mapping functions to each event.
![Page 29: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/29.jpg)
![Page 30: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/30.jpg)
![Page 31: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/31.jpg)
![Page 32: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/32.jpg)
![Page 33: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/33.jpg)
List of Supported devices
It is virtually impossible to target all the devices. The devices can be categorized depending upon the web app to be
developed.
![Page 34: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/34.jpg)
Ability to make Native calls
Making a call
<a href="tel:+1800229933">Call us free!</a>.
Sending an SMS
<a href="sms://+3490322111?body=Interested%20in%20Product%20AA2">More info for producto AA2</a>
![Page 35: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/35.jpg)
Mobile Web Best Practices
Navigation bars at the top should be minimized
Empty spaces and spacer images should be avoided.
Style sheets should be added only if device supports CSS and the loading time should be considered as well
Input field can be replaced by set of clickable items.
Frames should be avoided.
![Page 36: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/36.jpg)
Testing on Emulators
Once the web app is developed, the next step is to host it and test it on the emulator
The android emulator is most commonly used.
There are online simulators as well:-
Testiphone.com Ipadpeek.com
Android Emulator
![Page 37: Mobile Web Development Ppt](https://reader033.vdocuments.mx/reader033/viewer/2022061200/54771711b4af9f96108b45e7/html5/thumbnails/37.jpg)
THANK YOU