Mobile applications chapter 3
- 1. Mobile Applications Chapter 3 BY MR. A. B. MOMIN ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING ATS’S, SANJAY BHOKARE GROUP OF INSTITUTES, MIRAJ
- 2. Mobile Strategy Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE When creating mobile web applications, we need to remember that we can create browser-based apps, full-screen web apps, or native web apps.
- 3. Context Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Remember that a mobile user has a different context than a desktop user. You should think about and define your users’ possible contexts: • Where is the user? • Why is the user accessing your mobile website? • What is the user looking for? • What can you offer from a mobile perspective to help solve the user’s problem? • Where will the user be when accessing your website? Walking on the street, using public transportation, at the office, traveling as a tourist, sitting on the couch watching TV?
- 4. Server-Side Adaptation Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Using a server-side adaptation mechanism, you can reduce the number of required versions to two: one for low-end and mid-range devices and one for high-end devices and smartphones. • Low-end devices Basic XHTML markup, maximum screen width of 176 pixels, basic CSS support (text color, background color, font size), no JavaScript • Mid-range devices Basic XHTML markup, average screen width of 320 pixels, medium CSS support (box model, images), basic JavaScript support (validation, redirection, dialog windows)
- 5. Server-Side Adaptation Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE • High-end devices XHTML or HTML 4 mark-up, average screen width of 240 pixels, advanced CSS support (similar to desktops), Ajax and DOM support, optional touch support, optional orientation change support (for an average screen width of 320 pixels) • Smartphones HTML5, large screen size and high resolution, touch support, support for CSS3 (animations, effects) and Ajax, local storage, geolocation • Web app for smartphones Same as smartphones, plus offline support, full-screen and icon installation, native integration, and device APIs
- 6. Progressive Enhancement Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Progressive enhancement is a simple but very powerful technique used in web design that defines layers of compatibility that allow any user to access the basic content, services, and functionality of a website and provide an enhanced experience for browsers with better support of standards.
- 7. Progressive Enhancement Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Progressive enhancement has the following core principles: • Basic content is accessible to all browsers. • Basic functionality is accessible to all browsers. • Semantic mark-up contains all content. • Enhanced layout is provided by externally linked CSS. • Enhanced behaviour is provided by unobtrusive, externally linked JavaScript. • End user browser preferences are respected.
- 8. Responsive Web Design Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE It’s a simple and powerful idea to provide one HTML document that will automatically adapt (respond) on the client side to different scenarios, usually meaning available screen size or current orientation (landscape versus portrait). RWD is implemented using CSS3 media queries (covered in Chapter 11), which allow the same HTML to automatically change the layout and design in different conditions, so it can be used to separate between: • Feature phones • Smartphones • Tablets • Desktop browsers • Smart TVs
- 9. Responsive Layout Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE RWD is usually accompanied by a fluid grid layout allowing a site to adapt easily to different screen sizes. On the desktop side, sometimes it’s common to have one or more fixed-width layouts (such as for 800px wide, 1024px wide, or 1280px wide).
- 10. Responsive Images Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Responsive images, also known as flexible images or fluid images, make use of a group of techniques that may involve CSS resizing (using the same original file), supplying different image sizes on the server side, or cropping the images using CSS to adapt to different screen sizes and orientations.
- 11. RESS Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Responsive Web Design + Server Side Components (RESS) incorporates the best of two worlds: RWD and server-side adaptation. With this technique, we can decide on the best version and/or compatible experience on the server side, and then RWD on the client side will make the final adjustments, such as having a fluid layout and reacting to different orientations.
- 12. Basic of Mobile HTML5 Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE HTML divided into two parts: 1. The Document Head 2. The Document Body
- 13. The Document Head Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE In Document Head Includes: 1. Title 2. Meta Tags 3. Script 4. Stylesheet (Internal or External Link)
- 14. The Document Body Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE In Document Body Includes: 1. Actual Content Document 2. Document Related Tags 3. Navigation 4. Forms 5. Media Tags
- 15. Main Structure Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE A typical mobile document will be divided into four main sections: 1. Header 2. Main navigation 3. Content 4. Footer
- 16. HTML5 Mobile Boilerplate Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Boilerplate means already implemented template. The template includes: • Meta tags, such as viewport and icon references • normalize.css, an alternative to CSS reset (a way to normalize defaults on different browsers) • Some JavaScript libraries, such as Zepto.js and Modernize (two libraries we will cover later in this book) • A JavaScript helper class useful for some JavaScript- based hacks, such as the iOS viewport bug fix • High-performance and mobile-specific configuration files for Apache
- 17. The Contents Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE 1. List - Ordered lists (ol tag) - Unordered lists (ul tag) - Definition lists (dl tag) 2. Tables 3. Frames 4. Links 5. Accessibility
- 18. HTML5 Form - Design Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE - General method="GET" or "POST" and action="serverScriptURL". - Apply CSS and Script to Form e.g. <form action="formAction" method="post"> <input type="checkbox" name="accept" id="accept" value="yes"> <label for="accept">I accept terms and conditions</label> </form>
- 19. HTML5 Form - Elements Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE An HTML5 mobile form can contain the following form elements: • Single-line text boxes for different types of input • Password boxes • Multiline text boxes • Date and time selectors • Select lists for single selection • Select lists for multiple selection • Checkboxes • Radio buttons • File selectors • Range selectors • Noninteractive elements, such as hidden input fields
- 20. HTML5 Form - Buttons Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE HTML has five types of buttons: Image map buttons <input type="image"> Submit buttons <input type="submit"> Clear buttons <input type="reset"> Custom buttons <input type="button"> Submit buttons with HTML support <button></button>
- 21. HTML5 Form – Text Input Field Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE The possible input types we have are: • Any-character textbox: <input type="text"> or just <input> • Numeric textbox: <input type="number"> • Phone number textbox: <input type="tel"> • Email textbox: <input type="email"> • URL textbox: <input type="url"> • Any-character secure box: <input type="password"> • Search textbox: <input type="search">
- 22. HTML5 Form – Virtual Keyboard Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE
- 23. HTML5 Form – Text Input Field Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE The possible input types we have are: • Any-character textbox: <input type="text"> or just <input> • Numeric textbox: <input type="number"> • Phone number textbox: <input type="tel"> • Email textbox: <input type="email"> • URL textbox: <input type="url"> • Any-character secure box: <input type="password"> • Search textbox: <input type="search">
- 24. HTML5 Form – Control Attributes Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Placeholder: A placeholder is a hint that is shown inside a text box until the user inserts text in that field. <input type="text" name=“url" placeholder=“e.g. http://mobilexweb.com">
- 25. HTML5 Form – Control Attributes Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Autofocus: Adding the autofocus Boolean attribute to a control tells the browser to focus on that Element. <input type="search" autofocus>
- 26. HTML5 Form – Validations Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Input Validation Attributes: required A Boolean attribute that can be applied to any input type min Specifies the minimum valid value; can be applied to numeric (number or range) or date input types max Specifies the maximum valid value; can be applied to numeric (number or range) or date input types pattern Specifies a regular expression against which the input value should be validated step Used for numeric (number or range) input types; specifies the legal number intervals
- 27. HTML5 Form – Validations Mobile Applications Mr. A. B. Momin, Assistant Professor, Department of CSE Fig. 2.0: FigFirefox shows an error bubble when the element is not valid—we can define the error text using the nonstandard x-moz-errormessage attribute.