Mobile Web App - Mobile E

Materi 12_Online
iPhone Web Apps
Agenda
•
Webkit
•
Mobile Web App
•
Markup
•
CSS
•
Java Script
Kemampuan akhir yang diharapkan
•
Mahasiswa mampu memahami teknologi iPhone Web App
•
Mahasiswa mampu menjelaskan bagaimana membuat Mobile Web Apps untuk iPhone
WEBKIT
•
Webkit : open source web browser engine.
•
Webkit juga merupakan framework engine untuk sistem Mac OS X yang digunakan oleh Safari,
dashboards, mail dan aplikasi OS X lainnya.
 Mengapa menggunakan Webkit ?
•
iPhone adalah market leader dalam inovasi dan device yang paling banyak mengakses web
mobile
o
iPhone dipasarkan dan dijual oleh Apple bukan oleh operator.
1
o
Biaya yang rendah untuk pengembangan web app untuk iPhone. Hanya butuh text
editor dan web browser. Tidak perlu device, emulators, atau software khusus.
o
Sedikit atau bahkan tidak sama sekali tidak memerlukan tambahan pengetahuan
dari HTML, CSS (Cascading Style Sheets) dan Javascript.
o
Lingkungan testing yang simpel dan efektif .
o
Banyak pengguna device yang menjalankan WebKit menggunakan mobile web
dalam jangka lama.
• Latar belakang WebKit sebagai browser mobile
Web Browser
for S60
iPhone and
iPod touch
Android
Iris Browser
Myriad
Browser
webOS
Mobile Web App
•
Karakteristik Mobile Web App :
•
Sebuah aplikasi seperti pengalaman menerjemahkan pemandangan dari sebuah tempat
•
Menggunakan client-side (atau offline) storage sebagai local data
•
Lebih berat menggunakan DHTML atau Ajax untuk menciptakan pengalaman user
•
Mempunyai viewport yang ditentukan untuk context mobile
•
Dapat jalan di full-screen mode
•
Dapat ditampilkan seperti native application
2
•
Perbedaan antara mobile website dengan mobile web app adalah pada tipe page of model yang
digunakan.
•
Mobile web apps biasa menggunakan single-page model.
Single Page Model
Multi Page Model
•browser loads one container page of
markup. Then,
•using Ajax, additional content is loaded
based on the user’s actions.
•The user can perform most if not all
tasks from this one coded page
•the user traverses a hierarchy of
individual pages, designed to lead the
user to the desired end goal.
•In this model, the user clicks back and
forward controls to recall content
Markup
Webkit support XHTML-MP namun belum mendukung XHTML-2.0
Testing XHTML-MP pada Webkit ( Fling, 2009)
•
HTML5 : penerus dari HTML4 yang merupakan standard transisi ke XHTML2.0
•
HTML5 menciptakan tantangan baru untuk aplikasi web mobile seperti :
3
•
Canvas element
•
Offline storage
•
Document editing
•
Media playback
•
Tantangan baru tersebut sudah ada di WebKit browser seperti Mobile Safari.
•
HTML5 memperbolehkan developer membuat di cross platform dengan menampilkan content
lebih semantik
•
Contoh menggunakan canvas elemen di iPhone
CSS
•
iPhone mendukung CSS2 untuk browser mobile.
•
Melalui Webkit dan Safari untuk desktop mendukung spesifikasi CSS2 .
•
Dimana dengan dukungan dari CSS2 mendukung membuat desain desktop juga dapat digunakan
sebagai desain mobile.
4
•
Teknik positioning yang didukung iPhone meliputi relative, absolute dan fixed positioning.
•
Sebagai tambahan positioning juga perlu page flow styling tools seperti display, float , dimana
semua dapat jalan seperti yang diharapkan untuk menciptakan site yang komplek dan web apps.
•
Tehnik lain yang banyak digunakan dalam desain standard adalah perpindahan image.
•
CSS3 : iPhone mendukung spesifikasi CSS3 sehingga mengizinkan kita untuk menciptakan desain
yang friendly dengan minimal code
The -webkit
prefix
Selectors
Multiple
background
images
Box model
sizing
Box shadow
Rounded
corners
Border images
Text effects
Text overflow
•
Ada sejumlah efek visual yang dapat ditampilkan secara spesifik dengan iPhone dan iPod touch.
•
Berikut ini beberapa efek visual yang didukung oleh CSS
•
Gradients
Masks
Transitions
Transforms
Animations
Hover, clicks,
and taps
Contoh penggunaan CSS mask pada gambar :
5
Java Script
•
Java Script : scripting language yang didukung oleh semua browser.
DHTML
Ajax
Multitouch
Fixed
Footer
Membuat Mobile Web App
6
Defining the
Viewport
Full-Screen
Mode
Changing the
Status Bar
Appearance
Adding an
Icon
Web Apps sebagai Native Apps
•
•
Phonegap :
•
tool untuk membangun native apps dari web apps.
•
berupa open source library yang memungkinkan kita untuk membawa mobile web app
dan dikompile ke dalam native app untuk iPhone, Android, Blackberry, dan platform
lain.
Contoh :
Project PhoneGap
7
•
Tools dan Library
•
contoh iPhoneGUI PSD
•
8
•
Tools dan Library
contoh iUI
contoh jQtouch
9