The Open Source Cross Platform Mobile Web App Development Framework

Total Page：16

File Type：pdf, Size：1020Kb

Introduction to PhoneGap The Open Source Cross Platform Mobile Web App Development Framework Ph.P SOCIETY Philosophy in Programming Society Background • Evolution of Mobile Web. • Formats: WAP, cHTML, mHTML. • Limited by Phone’s web browser. • Manufacturer dependent proprietary web browser. • WAP: “Where Are the Phones?” • Limited resources, capabilities & bandwidth. • Inconsistent form factors (screen size, color depth, bitmap support, plugin?). Ph.P SOCIETY Philosophy in Programming Society WAP/cHTML Phones Ph.P SOCIETY Philosophy in Programming Society Mobile Web Today • Powerful Smart Phones. • Powerful full-featured mobile Operating Systems. • Old Birds: Windows Mobile, Symbian OS, Blackberry • Linux Based: iPhone OS, Android, WebOS, Maemo • Powerful cross-platform web browsers. • More bandwidth (3G, WiFi, WiMax). • More consistent form-factors. Ph.P SOCIETY Philosophy in Programming Society Smart Phones Ph.P SOCIETY Philosophy in Programming Society Developing for Mobile Web • Inconsistency: • Layout, screen resolution, form factors, capabilities, bandwidth, plug-in • Proprietary APIs • Caveat: Cross platform web browsers (Webkit, Mozilla, Opera) • Limited in Scope • Web browser “Silo” • Self-contained & away from the rest of the OS • Secure but quite useless Ph.P SOCIETY Philosophy in Programming Society Native Phone App? • Learning Curve: • New SDK, New Language, New Paradigmn • OS Dependent quirks, limitations, conventions • Weapon of Choice (which platform?): • Signiﬁcant investment in time & money • Egg in one basket? Ph.P SOCIETY Philosophy in Programming Society What is PhoneGap? • Leverages on what we web developers knows best - HTML & Javascript. • Gives us access to the phone’s native APIs & features - Geo-location, Vibration, Accelerometer, Sound, Contacts, Camera, etc... • “Wraps the web view with a container. This container gives the view access to APIs available on the device that may not be available on the Web view alone”. http://www.phonegap.com Ph.P SOCIETY Philosophy in Programming Society Developing in PhoneGap 1. Create Web Views • HTML, Javascript, Graphics, etc. 2. Store it in a folder. 3. Compile the Web view into a native app binary ﬁle. • iPhone, Android, Blackberry • Coming Soon: Nokia (WRT), Windows Mobile, WebOS 4. Install into device. Ph.P SOCIETY Philosophy in Programming Society Video Ph.P SOCIETY Philosophy in Programming Society Some Sample Codes Ph.P SOCIETY Philosophy in Programming Society Get a Contact Ph.P SOCIETY Philosophy in Programming Society Geo-Location Ph.P SOCIETY Philosophy in Programming Society Supported Features - SQLite Support - Support for JS Frameworks - iUI, xUI, Magic Framework, Dashcode, JQTouch, etc.. Ph.P SOCIETY Philosophy in Programming Society Sample Apps Ph.P SOCIETY Philosophy in Programming Society Sample Apps Ph.P SOCIETY Philosophy in Programming Society Sample Apps Ph.P SOCIETY Philosophy in Programming Society Conclusion • Things will only get better. • Active community (Google Groups) • http://groups.google.com/group/phonegap • Good wiki documentation • http://phonegap.pbworks.com/ • Device agnostic • Completely open source (FREE!) Ph.P SOCIETY Philosophy in Programming Society Upcoming • More platforms: Nokia (SymbianOS), Palm WebOS, Windows Mobile, Nintendo DS? • Support for OpenGL • Support for Gecko / Mozilla • Many more... Ph.P SOCIETY Philosophy in Programming Society.

Copy Link

Recommended publications

Accelerometers & Location
Please post comments or corrections to the Author Online forum at http://www.manning-sandbox.com/forum.jspa?forumID=453 MEAP Edition Manning Early Access Program Copyright 2008 Manning Publications For more information on this and other Manning titles go to www.manning.com Please post comments or corrections to the Author Online forum at http://www.manning-sandbox.com/forum.jspa?forumID=453 Licensed to Rodney Pearson <[email protected]> Contents Preface Part 1 An Introduction to iPhone programming Chapter 1 Introducing the iPhone Chapter 2 Web development or the SDK? Part 2 Designing web pages for the iPhone Chapter 3 Redeveloping web pages for the iPhone Chapter 4 Using advanced Webkit for web apps Chapter 5 Using iUI for web apps Chapter 6 Using Canvas for web apps Chapter 7 Building web pages with Dashcode Chapter 8 Debugging iPhone web pages Chapter 9 SDK programming for web developers Part 3 Learning SDK Fundamentals Chapter 10 Learning Objective-C and the iPhone OS Chapter 11 Using Xcode Chapter 12 Using Interface Builder Chapter 13 Creating basic View Controllers Chapter 14 Monitoring events and actions Chapter 15 Creating advanced View Controllers Part 4 Programming with the SDK Toolkit Chapter 16 Data: Actions, Preferences, Files, SQLite, and Addresses Chapter 17 Positioning: Accelerometers and Location Chapter 18 Media: Images and sounds Chapter 19 Graphics: Quartz, Core Animation, and OpenGL Chapter 20 The Web: Web views and Internet protocols Appendices Appendix A iPhone OS class reference Appendix B External sources and references Appendix C Publishing your SDK program Please post comments or corrections to the Author Online forum at http://www.manning-sandbox.com/forum.jspa?forumID=453 Licensed to Rodney Pearson <[email protected]> 1 Introducing the iPhone This chapter covers: Understanding Apple’s iPhone technology Examining the iPhone’s specifications Highlighting what makes the iPhone unique In the 1980s Apple Computer was the leading innovator in the computer business.
[Show full text]
Mobile Web Design
Thursday, March 14, 2013 an Infopeople webinar presented by Chad Mairn Mobile Web Design Image sources: apple.com & samsung.com Today’s Agenda • Know 3 innovaEve library mobile website designs. • Understand how HTML, CSS, and JavaScript work together to build mobile websites. • Know what a mobile framework is and why they are used. • Know 3 exisEng mobile services/apps that can be included in library-‐created mobile websites. • Know the best pracEces in mobile Web development. • Have a step-‐by-‐step guide for implemenEng a mobile website. Quick Poll Some Mobile Examples A simple mobile-‐opEmized Website can work on all devices! <p><a class="call" href="tel:17273417177" accesskey="0">Call the Library</a> | (727) 341-‐7177<br /> <a href="wtai://wp/ap;+17273417177; SPC%20Library">[Add to Phone Book]</a><br /> Learn and borrow from sites you like. hdp://m.novarelibrary.com/ Or you can build something using HTML, CSS, and JavaScript that acts like a naEve app! Built using jQTouch Built using jQuery Mobile jQuery Mobile is … a uniﬁed, HTML5-‐based user interface system for all popular mobile device plakorms. Source: hdp://jquerymobile.com/ jQuery Mobile is well-‐documented and there are great demos to get you started Advanced Example (Web SQL Database stores data within user’s browser. No cookies!) HTML5 has oﬄine storage capabiliEes! Favorites List Favorites Found: 4 Conference Commidee, Friday, 8-‐9am, Azalea A Building the Next GeneraEon of E-‐Govt, Thurs. 1-‐2pm, Jasmine Opening General Session, Wed. 9:15-‐11:15am, Floral Ballroom hdp://novarelibrary.com/FLAmobile/ Note: this URL is not a best pracEce.
[Show full text]
Developing Iphone Apps for Language Learning Column
the jaltcalljournal issn 1832-4215 Vol. 6, no. 2 Pages 143–148 ©2010 jalt call sig Developing Several years back in a column about mo- bile learning, I discussed how mobile devic- iPhone apps for es could become more ubiquitous in educa- tional environments if they had the ability language learning to connect to wireless networks via Wi-Fi. As combination IP/cellular phones be- come more widespread, additional mak- Paul Daniels ers will be offering wireless handsets. Most importantly, students will be able Kochi University of Technology to use their IP-based mobile phones to [email protected] connect to wireless campus networks, thus allowing them to download large amounts of data at high speeds while cir- cumventing the high cellular data trans- mission charges. (Daniels, 2006) In January 2007, Steve Jobs unveiled the iPhone and in January 2010 the iPad; both devices allow consumers to shift between cellular networks and wireless Wi-Fi hot- spots. While Apple has succeeded in pack- aging Wi-Fi with the iPhone, other handset makers are slow to follow suit. Perhaps one reason mobile phone companies are slow to slow to adopt Wi-Fi is that it cuts into com- pany profits since Wi-Fi can be used to cir- cumvent more expensive cellular network access. Because of the success of the iPhone, mobile phone companies are now waking up to the idea of supporting mobile phones that include Wi-Fi. Google has introduced the “Nexus One”, which is manufactured by HTC and sold by major mobile providers around the world.
[Show full text]
Switch from Iui to Emy Emy Documentation
Switch from iUI to Emy Emy Documentation This guide's main goal is to help developers to switch from iUI to Emy. It will show and explain the main differences between those two libraries. If you've never heard or used iUI before, it's really not necessary for you to read this, the Getting started guide might be a lot more interesting. Main differences with iUI We are in 2013 (or perhaps even more at the time you read this), not in 2007 anymore. Modern browsers supports HTML5 and CSS3 pretty nicely, and the iPhone is not anymore the sheriff in town. We now have smartphones, phablets and tablets, running iOS, Android, Blackberry QNX, WindowsPhone. Some new players might hit our stores very soon (Firefox OS, Ubuntu Phone, Samsung Tizen, ...). Some say TV could also be the next big screen. With that in mind, we have no choice but to support those new platforms & browsers using their advantages & new functionalities. So the first main big difference with iUI is that Emy fully supports styling, AJAX & CSS transitions on iOS (4 and above), Android (2.3 and above), Blackberry (6 and above) & WindowsPhone (8 and above). It also works just fine on Firefox OS. Second huge difference with iUI is that Emy is using HTML5 elements rather than DIVs to define each views. The main toolbar is a Header element, each views are Sections. Then you'll find good ol' UL, FORM & FIELDSET elements in them. But we do not use DIV, UL or FORM as views: it's always a Section.
[Show full text]
A Model-Driven Cross-Platform App Development Process for Heterogeneous Device Classes
Proceedings of the 52nd Hawaii International Conference on System Sciences | 2019 A Model-Driven Cross-Platform App Development Process for Heterogeneous Device Classes Christoph Rieger Herbert Kuchen ERCIS, University of Munster¨ ERCIS, University of Munster¨ [email protected] [email protected] Abstract devices poses various challenges. The current situation resembles the early phase of exploration after the App development has gained importance since the introduction of smartphones. Different approaches set advent of smartphones to enable the ubiquitous access out to bridge device-specific differences but development to information. Until now, multi- or cross-platform for heterogeneous app-enabled devices is a far more approaches are usually limited to different platforms complex endeavor than creating apps for several for smartphones and tablets. With the recent trend platforms of a common device class. In addition, the towards app-enabled mobile devices, a plethora of term cross-platform as well as actual frameworks are heterogeneous devices such as smartwatches and smart usually limited to smartphones and sometimes – yet TVs continues to emerge. For app developers, the not always – technically similar tablets, ignoring the situation resembles the early days of smartphones but differing requirements and capabilities within the variety worsened by the widely differing hardware, platform of other app-enabled devices. Therefore, an efficient capabilities, and usage patterns. In order to tackle the method for developing truly cross-platform apps across identified challenges of app development beyond the the boundaries of individual device classes is required. boundaries of individual device classes, a systematic Focusing on the domain of business apps – i.e., process built on the model-driven paradigm is presented.
[Show full text]
This Item Was Submitted to Loughborough's Institutional
View metadata, citation and similar papers at core.ac.uk brought to you by CORE provided by Loughborough University Institutional Repository This item was submitted to Loughborough’s Institutional Repository by the author and is made available under the following Creative Commons Licence conditions. For the full text of this licence, please go to: http://creativecommons.org/licenses/by-nc-nd/2.5/ MOBILE TOUCH INTERFACES FOR THE ELDERLY Roger Stone Loughborough University Loughborough, LE11 3TU, England [email protected] ABSTRACT Elderly people are not averse to buying and using electronic gadgets. However regarding certain devices there is a persistent complaint about the "buttons being too small". Therefore the arrival of mobile touch devices like the iPhone and iPod Touch should be able to circumvent that problem because the button size and arrangement is under software control. However these devices have some accessibility issues which are identified. The accessibility issues stem from the one-size-fits-all concept. A solution is proposed which involves having a range of interface styles. A new user gesture called the shake is proposed to switch between interface styles. A separate investigation is made into the different possibilities for free-text entry. KEYWORDS Touch screen, user interface, mobile device, elderly, accessibility, gesture. 1. INTRODUCTION With the elderly set to form a larger and larger percentage of our population it is increasingly important that attention is paid to supplying them with usable digital devices. It is clear from the success of the Nintendo DS-Lite with Brain Training in the older market that elderly people are not averse to buying and using portable electronic gadgets.
[Show full text]
Reducing the Gap Between Native and Web Applications
Reducing the Gap between Native and Web Applications Rocío A Rodríguez, Pablo M Vera, María R Martínez, Claudia Pons, Federico E Valles, Luis Verbel de La Cruz Interamerican Open University (UAI) Higher education center in information technology City of Buenos Aires, Buenos Aires, Argentina {RocioAndrea.Rodriguez; PabloMartin.Vera; RoxanaMaria.Martinez} @uai.edu.ar National University of La Plata LIFIA – Research and Education Laboratory on Advance Computing La Plata, Buenos Aires, Argentina [email protected] National University of La Matanza Department of Engeniering and Technological Research San Justo, Buenos Aires, Argentina {rrodriguez, pvera, fvalles}@ing.unlam.edu.ar Abstract. New web standards are emerging day after day. Some of them are crucial in the improvement of web application for mobile devices. From visualization issues to hardware access, all this new tools can help developers to create native like applications on web environments. HTML5 and CSS3 with css media queries are some examples that are already available to use. Some other standards are still in progress but nearly to arrive. This paper shows existing and future standards for mobile web and shows implementation examples of some of them. Keywords. WEB MOBILE, NATIVE MOBILE, HTML 5, CSS3 1. Introduction Software development process includes several steps, data designing, defining the When an application for a mobile device must be develop, the big question is: should we create a native or a web application? Of course the answer is not simple. It is relative to the requirements of that application. Anybody will say that Native applications are more powerful than web applications, and it´s true.
[Show full text]
HTML, CSS, Javascript Only  Iwebkit  Jqtouch (Jquery Touch)  Iui (Iphone User Interface)  Sencha Touch
MLJ11 Tips, Techniques, and Tools for Mobile Learning Jason Haag, ADL Kris Rockwell, Hybrid Learning Systems Tips, Techniques and Tools HOSTED BY: Jason Haag, Advanced Distributed Learning Kris Rockwell, Hybrid Learning Systems Rule #1: Forget what you think you know Rule #2: Believe what you see, not what you read. Rule #3: Don’t start with constraints. Rule #4: Focus on context, goals, and needs. Rule #5: You can’t support everything. Rule #6: Don’t convert, create! Rule #7: Keep it simple. From “Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps” by Brian Fling Beyond Control: Hardware failure Connectivity Security Performance Fragmentation Can Be Addressed: No standardized screen size or resolution Native Apps can require many platforms to support Mobile Web Apps can require many browsers to support App Description Cost 1Password Encrypted password storage $9.99 Facebook Facebook client Free InstaPaper Offline reading Free TweetDeck Twitter client Free Yelp Augmented search Free Symbian OS from the Symbian Foundation BlackBerry OS from RIM iOS from Apple Windows Mobile 6 from Microsoft Windows Phone 7 from Microsoft Android from Google WebOS from HP Bada from Samsung MeeGo from Nokia and Intel Maemo from Nokia Limo (Linux) Integrated Development Cross-Platform Programming Language Emulator available Development Tool Cost Environment Deployment All native: BREW, Android, iPhone, Visual Studio, Mac OS Commercial licenses AirplaySDK C, C++ but no threads Emulator
[Show full text]
Context-Driven Progressive Enhancement of Mobile Web Applications: a Multicriteria Decision Making Approach
Context-driven Progressive Enhancement of Mobile Web Applications: a Multicriteria Decision Making Approach Heiko Desruelle and Frank Gielen Department of Information Technology (INTEC) - IBCN, Ghent University - iMinds, Ghent, Belgium Email: [email protected] Personal computing has become all about mobile and embedded devices. As a result, the adoption rate of smartphones is rapidly increasing and this trend has set a need for mobile applications to be available at anytime, anywhere, and on any device. Nevertheless the obvious advantages of such immersive mobile applications, software developers are increasingly facing the challenges related to device fragmentation. Current application development solutions are insufficiently prepared for handling the enormous variety of software platforms and hardware characteristics covering the mobile eco-system. As a result, maintaining a viable balance between development costs and market coverage has turned out to be a challenging issue when developing mobile applications. This article proposes a context-aware software platform for the development and delivery of self-adaptive mobile applications over the Web. An adaptive application composition approach is introduced, capable of autonomously bypassing context-related fragmentation issues. This goal is achieved by incorporating and validating the concept of fine- grained progressive application enhancements based on a multi-criteria decision making strategy. Keywords: Mobile Web applications; Context-awareness; Progressive enhancement; Multicriteria decision making; Adaptive engineering 1. INTRODUCTION manufacturers, the mobile ecosystem is absolutely not all about iPhone devices, nor is it all about Android, Mobile computing has become a powerful mass medium Blackberry, or any other platform. Thousands of with a greater reach and faster growth than any other different mobile devices are currently available, each known media type [1].
[Show full text]
Pro Smartphone Cross- Platform Development Iphone, Blackberry, Windows Mobile, and Android Development and Distribution
Pro Smartphone Cross- Platform Development iPhone, BlackBerry, Windows Mobile, and Android Development and Distribution ■ ■ ■ Sarah Allen, Vidal Graupera, Lee Lundrigan i Pro Smartphone Cross-Platform Development: iPhone, Blackberry, Windows Mobile and Android Development and Distribution Copyright © 2010 by Sarah Allen, Vidal Graupera, Lee Lundrigan All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-2868-4 ISBN-13 (electronic): 978-1-4302-2869-1 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. President and Publisher: Paul Manning Lead Editor: Mark Beckner, Ewan Buckingham Technical Reviewer: Fabio Claudio Ferracchiati Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Jim Markham Copy Editor: Ralph Moore Compositor: MacPS, LLC Indexer: BIM Indexing & Proofreading Services Artist: April Milne Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media, LLC., 233 Spring Street, 6th Floor, New York, NY 10013.
[Show full text]
Debug Iphone Web Applications with Eclipse
Debug iPhone Web applications with Eclipse Diagnose and repair iPhone Web apps using Eclipse, Aptana's iPhone Development Plug-in, Aptana's Firefox JavaScript debugger, and Firebug Skill Level: Intermediate John Fronckowiak President IDC Consulting Inc. 15 Jul 2008 Learn how to debug Asynchronous JavaScript + XML (Ajax) Web applications using Eclipse, Aptana's iPhone Development plug-in, Aptana's Firefox JavaScript debugger, and Firebug. Section 1. Before you start About this tutorial This tutorial shows how to debug iPhone Web applications using Eclipse, Aptana's iPhone Development plug-in, Aptana's Firefox JavaScript debugger, and Firebug. Objectives Use the tools and utilities provided by the Eclipse-based Aptana Studio to debug iPhone-optimized Web applications. Much of this tutorial is focused on how to optimally debug JavaScript and Ajax applications. Debug iPhone Web applications with Eclipse Trademarks © Copyright IBM Corporation 2008. All rights reserved. Page 1 of 37 developerWorks® ibm.com/developerWorks Prerequisites You should have a good understanding of iPhone Web application development, JavaScript, and Ajax. System requirements To follow the examples, you need Aptana Studio and one of the operating systems Eclipse supports: Mac OS X, Microsoft® Windows®, or Linux®. You also need a Java™ Runtime Environment (JRE); JRE for Java V5 is recommended. Section 2. Aptana Studio The Aptana Studio integrated development environment (IDE) is an Eclipse-based open source development environment targeted to building Web applications, with a focus on HTML, Cascading Style Sheets (CSS), and JavaScript. Aptana Studio includes an iPhone Development plug-in that provides Web developers with a set of tools that assist with the development of iPhone-optimized Web applications.
[Show full text]
UD-1402 Manual US 150417 Copy
EVERYWHERE UD-1402 2.1 Wi-Fi / Bluetooth Multi-Room Stereo Speaker Altavoces Estéreos Wi-Fi / Bluetooth Multihabitación 2.1 User Manual Enceinte Stéréo 2.1 Wi-Fi / Bluetooth Multipièce * Please read the instructions carefully before using the system and keep the manual for future reference. Table of Content 02 Inside the Box 03 Precaution 05 Product Introduction 07 Overview 08 Connection Options 09 Standby Mode 09 LED Indicator Wi-Fi Connection 10 Android User 16 iOS User 22 PC User 30 Mac User 38 Reset Wi-Fi Network (Factory Reset) 39 Bluetooth Connection 41 Ethernet Connection 46 3.5mm Audio Line-In 47 Troubleshooting 01 Inside the Box Ethernet Connection Carefully unpack the carton and conﬁrm that the following parts are included. • EVERYWHERE Wi-Fi / Bluetooth Speaker • AC adaptor • Manual 02 Inside the Box Precaution * Please read these safety instructions carefully to ensure your safety. • Do not use this product where contact with moisture, liquids, humidity or rain is possible to avoid electric shock and operating damage. • Avoid exposing this product to direct sunlight, stove tops or any other heat sources to prevent operating damage. • Do not cover the ventilation openings – this may cause overheating, damage to the product, and a hazardous condition. • Do not drop, disassemble, deform, modify or insert any objects into this product as operating damage will result. • Do not attempt to repair, modify or disassemble the product yourself. This product does not contain any user-serviceable components. • Do not clean the product with alcohol, ammonia based cleaners, abrasive cleaners or wet cloth. Only clean with a soft dry cloth.
[Show full text]