Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Oh No I don’t code • Can I develop an application if I do not know any programming languages or I am not good at coding? http://www.androidauthority.com/android-app-development-complete-beginners-658469/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ Example : First App using online tools http://snappy.appypie.com/app/creator-software/ But I don’t know any programming language • Mobile Application Development Tools – Appery.io (Android, iOS, Windows) • Includes Apache Cordova (PhoneGap) Free to $180 / month http://www.androidauthority.com/android-app-development-complete-beginners-658469/ But I don’t know any programming language • MobileRoadie (Android, iOS) – Automatic importing of RSS, Twitter News • From $125 to $667 / month http://www.androidauthority.com/android-app-development-complete-beginners-658469/ But I don’t know any programming language • TheAppBuilder (Andorid, iOS) • Used extensively for professional app development • Pricing available on request http://www.androidauthority.com/android-app-development-complete-beginners-658469/ But I don’t know any programming language • AppyPie (Android, iOS, Windows, Blackberry) • Cloud based tools with nothing to install or download • Creates HTML5 based hybrid app (Supports social media, GPS tracking) • Free to $33 per month http://www.androidauthority.com/android-app-development-complete-beginners-658469/ But I don’t know any programming language • GameSalad (Android, iOS, HTML5, OS X) – Features scene and actor editor • Free to $ 299 per year http://www.androidauthority.com/android-app-development-complete-beginners-658469/ But I don’t know any programming language • AppMakr (Android, iOS, HTML5) Free to $99 – Push notifications, high resolution photo galleries, live updates, music, video, in-app shopping http://www.androidauthority.com/android-app-development-complete-beginners-658469/ Outline Web Application development for smartphones Web Application Development Responsive Web? • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Why Responsive Web? Responsive web Design Native App versus Responsive Web a responsive website or a native app? It's a hot debate, especially when resources are limited or you have existing web properties to consider. It’s not a simple question with a one- ize-fits-all answer. Since every company and business plan is unique, the mobile presence you need will depend on many factors. Native Apps Responsive Web Mobile First Responsive Web Design? • Mobile-First Responsive Web Design is a combination of strategies, and ultimately boils down to a broader application of good of web best practices. • Mobile First is a concept created by Luke Wroblewski that highlights the need to prioritize the mobile context when creating user experiences. • http://www.lukew.com/ How To Create a Mobile-First Responsive Web Design? • In this case this sounds like pipe dreams to you, rest assured that these principles are really just a broader application of web standards and best practices. HTML5 can help you to implement it. • JQuery paired with CSS3 make it possible to create web page layouts that respond to a user's device based on the screen resolution. Based on these tools as well as JavaScript we can implement successful Mobile-First Mobile Design. RWD via JQuery Mobile and CSS3 • Media queries are a sort of conditional statement that determine what CSS is applied to a web page. Together with the jQuery Mobile framework, you can create some powerful mobile websites while maintaining a standalone desktop layout. By itself, the jQuery Mobile framework can be used to quickly and easily create touch-friendly websites. The framework has a slew of components that make it easy to add buttons, toolbars, dialog boxes, list views, and much more. However, when it comes to handling web page layout, CSS is still the language to go to. Luckily CSS3 has introduced media queries, which provide developers with the capability to change the web page layout based on the device resolution. Media Queries are sort of Meta Tags • They always go in the <head> section • They are never displayed • They consist mostly of key/value pairs • They are data about data Viewport: • A special type of meta tag which defines the screen of a mobile device Viewport • • • • Viewport Attributes: • width=device-width - converts the pixels to CSS pixels • initial-scale=1 - sets the scale level • user-scalable=no - turns off scaling HTML5 Technologies • HTML5 opens the door for new advanced (i.e. modern) web techniques • HTML5 paves the way for JavaScript to go beyond standard HTML HTML5_ about JavaScript APIs • Most mobile browsers support HTML5 • HTML5 still allows some degree of backward compatibility • jQuery Mobile creates web apps from standard and semantic HTML5 • Advanced knowledge of HTML5 & CSS3 is NOT required for JQM development HTML5 HTML5 Features • Offline access and storage • Web sockets • Geolocation access • Accelerometer and gyroscope support • Animations, 2D and 3D transformations • Gradients and visual effects • Viewport management (for zooming support inside the • browser) • Webapp installation metadata • Integration with native applications • Multimedia support • Graphic drawing (vector and bitmap) • Custom font support Using JQuery Mobile: HTML5 Embedded Primitive Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone,tablet and desktop devices. http://jquerymobile.com/ What Does JQuery Mobile Do? • jQuery Mobile makes it easy to develop user interfaces for mobile web apps. • The interface configuration is markup-driven, which means you can pretty much create your entire basic app interface in HTML, without needing to write a single line of JavaScript. (Of course, you'll still need to write JavaScript if your app is to do anything useful!) • It provides a series of new custom events to let you detect mobile and touch specific actions like tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device). • It uses progressive enhancement to ensure that your app interface works on practically any web-enabled device. • It uses themes to make it easy to customize the look of your app. jQuery Mobile is not.. • • • • • • a jQuery alternative for mobile browsers; an SDK for packaging native Web apps; a framework for JavaScript lovers the right solution for all mobile applications and websites. jQuery Mobile is just a user interface framework — nothing less, nothing more. It uses jQuery’s core framework as a requirement, but definitely doesn’t replace it. It’s a UI layer on top of it. Can we store databases with jQuery Mobile? No,that’s not its concern. Can we use Node.js or PHP with thisframework? No, that’s not its concern. Do you need to know jQuery in order to use jQuery Mobile? Nope. Using The Chrome Ripple Emulator Ripple is a multi-platform mobile environment emulator that is custom-tailored to mobile HTML5 application development and testing. Ripple aims to reduce the challenges being faced by mobile developers caused by today's platform fragmentation in the marketplace. Ripple is targeted towards WebWorks, PhoneGap, and mobile web development and testing! Ripple offers the ability to look under the hood of your mobile application, giving you full visibility into what it is doing. It also allows for the use of existing tools to perform JavaScript debugging, HTML DOM inspection, automated testing, as well as multiple device and screen resolution emulation in real-time without having to redeploy the mobile application or restart the emulator. NOTE: Add Ripple Extension to your Chrome. https://chrome.google.com/webstore/detail/ripple-emulatorbeta/geelfhphabnejjhdalkjhgipohgpdnoc Enable Your Ripple Emulator Adding jQuery Code.. Pages Example: Restaurant Picker Example: Restaurant Picker Conclusion • About success stories – – – – – Before Instagram the developers created Burbn.com Whatsapp was for sharing status and had to be modified Before Snapchat the developers created Picaboo Angry Birds was created after 52 attempts The developers developed games for 11 years before Candy Crush (No one gets it right the first time) Success = Patience + Perseverance Reference: How to build a billion dollar app by George Berkowski