34
Pengenalan HTML5, Mobile Application, dan Intel XDK Muhammad Yusuf ([email protected])

Pengenalan HTML5, Mobile Application, dan Intel XDK

Embed Size (px)

DESCRIPTION

Intel XDK adalah perangkat bagi para pengembang untuk mengembangkan aplikasi HTML5 hybrid untuk berbagai perangkat mobile dan aplikasi HTML5 lainnya seperti ekstensi Google Chrome, aplikasi Facebook, atau sebuah website mobile. Pada Intel XDK terdapat perangkat untuk melakukan coding, debugging, testing, dan build aplikasi yang telah kita kembangkan menjadi aplikasi web dan aplikasi HTML5 hybrid untuk berbagai platform mobile diantaranya iOS, Android, Windows 8 Store, Windows 8 Phone, dan lain-lain. Pada presentasi ini saya memperkenalkan ketiga elemen penting dalam pengembangan aplikasi HTML5 hybrid untuk mobile menggunakan Intel XDK yaitu HTML5, Mobile Application, dan Intel XDK itu sendiri.

Citation preview

Page 1: Pengenalan HTML5, Mobile Application, dan Intel XDK

Pengenalan HTML5, Mobile Application,

dan Intel XDKMuhammad Yusuf ([email protected])

Page 2: Pengenalan HTML5, Mobile Application, dan Intel XDK

Muhammad Yusuf (@ruangchupa)

• Mahasiswa tingkat akhir Ilmu Komputer UPI• E-Learning Content Developer di

ComLabs USDI ITB (pengembang konten e-learning untuk PT Pertamina, PT BII Maybank, Bank Riau Kepri, PT Newmont Nusa Tenggara, PT Pelindo II)

• Microsoft Student Partner (2009-2013)• Intel Indonesia Developer Community

Page 3: Pengenalan HTML5, Mobile Application, dan Intel XDK

Gilang Abdul Aziz (@Ltheordinary)

• Mahasiswa tingkat akhir Ilmu Komputer UPI• Co-Founder and Owner Lluvia Enterprise

• Developer of Kelase.com • Adobe User Group Indonesia• Intel Indonesia Developer Community

Page 4: Pengenalan HTML5, Mobile Application, dan Intel XDK

Outline Hari ke-1

• Pengenalan HTML5, Mobile Application, dan Intel XDK• Menginstall Intel XDK• Pengenalan XDK Development Tools• Pengembangan Aplikasi Mobile Learning

menggunakan Intel XDK

Page 5: Pengenalan HTML5, Mobile Application, dan Intel XDK

HTML5HyperText Markup Language versi 5

Page 6: Pengenalan HTML5, Mobile Application, dan Intel XDK

HTML

• Hypertext Markup Language• Sebuah bahasa untuk membuat sebuah

halaman web.• Didefinisikan dan dikendalikan

penggunaannya oleh World Wide Web Consortium (W3C)• Berupa tag-tag elemen dan atribut yang

tersusun secara hirarkial (Markup Language)

Page 7: Pengenalan HTML5, Mobile Application, dan Intel XDK

Contoh Bahasa HTML

<html><head>

<title>Contoh Hello World

<title></head><body>

<h1>Halo</h1><p>Hello World.</p>

</body></html>

Page 8: Pengenalan HTML5, Mobile Application, dan Intel XDK

HTML5

• Revisi kelima dari bahasa HTML• Terdapat beberapa atribut dan elemen

baru yang mendukung pengembangan website modern • Secara utuh merupakan penggabungan

teknologi antara HTML5, CSS3, dan JavaScript• Masa depan dari pengembangan aplikasi

multimedia

Page 9: Pengenalan HTML5, Mobile Application, dan Intel XDK

Contoh HTML5

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Contoh Hello World</title> </head> <body> <h1>Halo</h1> <p>Hello World.</p> </body></html>

Page 10: Pengenalan HTML5, Mobile Application, dan Intel XDK

HTML5 = Standar HTML yang Baru

• New Elements• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Local Storage• Local SQL Database• Web Application

Page 11: Pengenalan HTML5, Mobile Application, dan Intel XDK

Contoh: Elemen Canvas

<canvas id=“canvas” width=“150” height=“150”></canvas>

function draw() {var canvas = document.getElementById(“canvas”);if (canvas.getContext) {var ctx = canvas.getContext(“2d”);ctx.fillStyle = “rgb(200,0,0)”;ctx.fillRect (10,10,55,50);

ctx.fillStyle = “rgb(0,0,200)”;ctx.fillRect (30,30,55,50);}

}

Page 12: Pengenalan HTML5, Mobile Application, dan Intel XDK

Keuntungan HTML5

• Didukung oleh native browser (tidak diperlukan plugin)• Mendukung cross-platform• Mendukung mobile platform• HTML5 terdiri dari sekumpulan teknologi

sehingga developer memiliki banyak pilihan dalam mengembangkan HTML5.

Page 13: Pengenalan HTML5, Mobile Application, dan Intel XDK

Masa depan HTML5HTML5 mulai diumumkan pada 2008 dan sampai sekarang masih dalam masa pengembangan dan standardisasi oleh W3C sehingga masih banyak kemungkinan fitur tambahan

yang dapat didukung oleh HTML5.

Page 14: Pengenalan HTML5, Mobile Application, dan Intel XDK

HTML5 benar-benar masa depan.

Karena masih dalam tahap akhir untuk pengembangan dan standardisasi.

Page 15: Pengenalan HTML5, Mobile Application, dan Intel XDK

Tapi?Perkembangan akhir-akhir ini menunjukkan bahwa

HTML5 sudah memasuki tahap siap untuk digunakan.

Page 16: Pengenalan HTML5, Mobile Application, dan Intel XDK

84% developer sedang dalam proses untuk mengadopsi HTML5

Sumber: Presentasi Suresh Kumar

Page 17: Pengenalan HTML5, Mobile Application, dan Intel XDK

Adobe sudah membuat aplikasi dan platform

pengembangan HTML5.Dan aplikasi converter dari Flash ke HTML5 sebagai exit plan bagi developer yang masih terpaku pada

Adobe Flash.

Page 18: Pengenalan HTML5, Mobile Application, dan Intel XDK

Apple mendukung penuh dan memilih pengembangan pada

aplikasi barunya menggunakan HTML5.

Konten multimedia pada iBook menggunakan HTML5

Page 19: Pengenalan HTML5, Mobile Application, dan Intel XDK

Windows 8 mendukung secara penuh aplikasi yang

dikembangkan menggunakan teknologi HTML5

Pada Microsoft Visual Studio 2012, terdapat menu File -> New Project -> Windows Store -> HTML &

Javascript

Page 20: Pengenalan HTML5, Mobile Application, dan Intel XDK

Mari bergabung dengan kumpulan orang pertama

yang mampu mengembangkan aplikasi

HTML5.Are you ready?

Page 21: Pengenalan HTML5, Mobile Application, dan Intel XDK

Mobile Application

Page 22: Pengenalan HTML5, Mobile Application, dan Intel XDK

Mobile Application

• Aplikasi yang berjalan pada sebuah perangkat mobile• Dapat dibuat oleh developer pihak ketiga

dan disimpan di marketplace milik masing-masing sistem operasi mobile

Page 23: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 24: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 25: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 26: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 27: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 28: Pengenalan HTML5, Mobile Application, dan Intel XDK

Intel XDK

Page 29: Pengenalan HTML5, Mobile Application, dan Intel XDK

Intel XDK

• Perangkat bagi para pengembang untuk mengembangkan aplikasi HTML5 hybrid untuk berbagai perangkat mobile dan aplikasi HTML5 lainnya seperti ekstensi Google Chrome, aplikasi Facebook, atau sebuah website mobile

Page 30: Pengenalan HTML5, Mobile Application, dan Intel XDK

Available for Windows. Coming soon for OS X and Linux.

Page 31: Pengenalan HTML5, Mobile Application, dan Intel XDK
Page 32: Pengenalan HTML5, Mobile Application, dan Intel XDK

Kelebihan Intel XDK

• Merupakan one stop application untuk seluruh tahapan pengembangan aplikasi HTML5.• Didukung penuh oleh teknologi

pengembangan aplikasi HTML5 Hybrid AppMobi.• Multiplatform• In App Purchasing• Javascript API

Page 33: Pengenalan HTML5, Mobile Application, dan Intel XDK

Platform yang Didukung Intel XDK

• Mobile• iOS• Android• Windows Phone 8• Windows 8 Store• Tizen• Amazon• Nook

• Web App• Web App• Chrome• Facebook

Page 34: Pengenalan HTML5, Mobile Application, dan Intel XDK

Terimakasih.