Transcript Slides Part 2

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