8. APPS LEBIH DISUKAI
Total mobile app and web duration on Android and iOS
0
20
40
60
80
100
120
140
160
Mar-11 Jul-11 Nov-11 Mar-12 Jul-12
Minutesspentpermonth(billions)
33%
Games
Smartphone app
downloads worldwide,
by category, 2012
8%
Widgets
7%
Entertainment
5%
Social
Mobile web
Apps
SOURCE: NIELSEN SMARTPHONE ANALYTICS, DISTIMO, “2012 YEAR IN REVIEW ,”
DEC 21, 2012
13. CROSS PLATFORM
Kelebihan
write one application
support different mobile
platforms and web
exploit knowledge of web
technologies
can use sensors and native
features of the phone
17. PHONEGAP APAAN SIH?
PhoneGap was originally developed by Nitobi, a company
acquired by Adobe in 2011. After it was acquired, Nitobi
donated the PhoneGap code base to the Apache
Software Foundation (ASF) under the project name
Cordova.
Cordova is the name of the street inVancouver where
Nitobi's offices were located and where the company
create the first version of framework
19. CORDOVA VS PHONEGAP
PhoneGap is a distribution of Apache Cordova.You can think of Apache
Cordova as the engine that powers PhoneGap
Similar to howWebKit is the engine that powers Chrome or Safari.
Also Similar to Debian, RedHat, CentOS, Ubuntu, Mint, etc. as distribution of
Linux Operating System
20. PHONEGAP
PhoneGap is a free and open source framework
that allows you to create mobile apps with html, css
and javascript.
Think of PhoneGap as a web view container that is
100% width and 100% height
21. SUPPORTED PLATFORM
iOS
Android
Windows 8
Windows Phone 7 and 8
BlackBerry 5.x+
WebOS
Symbian
Tizen
Ubuntu
29. MULTI PAGE VS SINGLE PAGE
We all use jQuery and love it, but I will not advise the use of
jQuery when building a multi-page app.Also, if the jQuery library
is downloaded once, the file is parsed each time it's included in
an HTML page.
Performance on mobiles is crucial. If you don't seriously consider
optimizing each aspect of your app, you risk losing users. Bad
performance can also lead to high battery consumption.
Use Single Page Web App when
frequently navigation
the pages change partially
critical performance
31. KNOCKOUT JS
Model-View-ViewModel (MVVM) in JavaScript, MIT licensed
Tightly focused on rich UIs: DOM-based templates with
declarative bindings, and observable models with automatic
dependency detection
Not opinionated about URL routing or data access —
combines with arbitrary third-party libraries (e.g., Sammy.js
for routing and plain ajax for storage)
Big focus on approachability, with extensive documentation
and interactive examples
32. BACKBONE JS
Model-View-Presenter in JavaScript, MIT licensed
Most minimal of all the libraries — only one file, 800 lines of
code!
Extremely tightly-scoped functionality — just provides
REST-persistable models with simple routing and callbacks
so you know when to render views (you supply your own
view-rendering mechanism).
The best-known of them all, with the most production
deployments on big-name sites (perhaps easy to adopt
because it’s so minimal)
33. ANGULAR JS
Model-View-Whatever in JavaScript, MIT licensed
DOM-based templating with observability, declarative
bindings, and an almost-MVVM code style (they say Model-
View-Whatever)
Basic URL routing and data persistence built in
Tooling: they ship a Chrome debugger plugin that lets you
explore your models while debugging, and a plugin for the
Jasmine testing framework.
34. EMBER JS
Everything you need to build an “ambitious web application”, MIT license
Biggest framework of them all in both functionality and code size
Lots of thought has gone into how you can decompose your page into a
hierarchy of controls, and how this ties in with a statemachine-powered
hierarchical routing system
Very sophisticated data access library (Ember.Data) currently in
development
Intended to control your whole page at runtime, so not suitable for use in
small “islands of richness” on a wider page
Pretty heavily opinionated about files, URLs, etc., but everything is
overridable if you know how
Design inspired by Rails and Cocoa
Tooling:They supply project templates for Rails (but you can use other
server platforms if you write the code manually)
36. GAMES PAKAI HTML? BISA!
The HTML using divs and background images.
The moving animations are made with CSS transitions
The sprites are animated with CSS keyframes
The best score is saved with LocalStorage
http://phonegap.com/blog/2013/01/18
/my-first-mobile-game-in-html-with-
phonegap-build/
38. SO…. WHAT NEXT?
1. Select a real problem you're passionate
about
2. Find the right solution
3. Build a strong team
4. Develop a great product
5. Launch with laser focused execution
Sebelum masuk ke dunia mobile apps, sebelumnya kita harus tahu medan terlebih dahulu, dan harus tahu peluang macam apa yang bisa kita manfaatkan
Berikut ini adalah data penetrasi pengguna smartphone di sejumlah negara, Siapa yang tahu berapa jumlah pengguna smartphone di Indonesia?
Data pengguna smartphone di sejumlah negara, pengguna smartphone di Indonesia pada tahun 2012 hanya 14% saja dari seluruh handphone yang ada di Indonesia. Tingak daya beli masyarakat yang terus meningkat bisa mendorong peningkatan pengguna dalam beberapa tahun ke depan.
Berikut ini data pertumbuhan pengguna smartphone di Asia Pasifik. Terlihat bahwa Indonesia adalah negara kedua dengan pertumbuhan pengguna smartphone terbesar. Jelas saja karena umumnya orang Indonesia punya lebih dari satu nomor, dan biasanya juga punya lebih dari satu smartphone, misalkan satu BlackBerry dan satu Android.
Dan bisa kita lihat bahwa negara dengan penetrasi pengguna smartphone terkecil justru memiliki pertumbuhan yang tinggi bahkan melebihi rata-rata-rata pertumbuhan global. Artinya kita bisa memastikan hanya masalah waktu saja bahwa dalam beberapa tahun ke depan, Indonesia dan India akan melampaui penetrasi negara-negara lain.
Siapa di antara kalian yang sudah mencoba membuat aplikasi mobile?
Atau…. Sudah berencana membuat aplikasi mobile?
Berita baiknya adalah…. Semakin lama serang memiliki smartphone, maka semakin lama juga dia akan menghabiskan waktunya memainkan aplikasi mobile…. Perlu bukti? Jawab pertanyaan ini, apa yang dilakukan pertama kali saat bangun tidur? Kalian lebih memilih mana, ketinggalan dompet atau ketinggalan hape?
Fakta membuktikan bahwa kita pengguna smartphone menghabiskan waktu lebih banyak di aplikasi mobile dibandingkan mobile website, dan coba tebak aplikasi mobile apa yang paling banyak diunduh?
Gak perlu tebak-tebak buah manggis, jawabannya ada di slide
Salah satu kendala performance dikarenakan adanya satu layer tambahan berupa HTML Rendering Engine (WebView)
As the name states “Front-End” is the part of the code that is on the front of the application. It is usually visible to user in the form of an interface inviting to interact with user. The main purpose of the front-end code is to interact with user, as well as present the data in a well-defined style and matter.
Everything that your eye sees on the web is the mix of HTML, CSS and JavaScripts.
HTML (or Hyper Text Markup Language) is responsible for creating a markup of your website and letting the browser read it and display it correctly.
CSS (Cascading Style Sheets) is the place where we bring all the colors, backgrounds, font sizes etc. to life.
JavaScript is the most advanced language of all three which enables us to interact with user in form of sliders, drop-down menus, quizzes, and many more interactive elements where sky is the limit.
The front-end developer is the bridge connecting the designer and back-end developer. The developer’s work is to take the final designs of an application from the designer, and code it into the front-end code so the back-end developer can understand it and build functionality of that app around it.
Besides main elements in front-end environment, we currently have many libraries and frameworks making our code and life easier. It all depends on the needs of the project and client if we are going to use jQuery (JavaScript library), Less (CSS library), Bootstrap (Front-End framework) or any of the different ones that are coming out every day.
- See more at: http://manningdigital.com/blog/2014/01/23/difference-between-front-end-and-back-end-development#sthash.ipX9BwkE.dpuf
UI Framework digunakan untuk mempermudah kita membuat tampilan dalam HTML5 + CSS3