pengenalan intel xdk

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

Upload: okky-lukman

Post on 14-Dec-2015

37 views

Category:

Documents


1 download

DESCRIPTION

Materi Pengenalan Intel XDK

TRANSCRIPT

Page 1: Pengenalan Intel XDK

Pengenalan HTML5, Mobile Application,

dan Intel XDKMuhammad Yusuf ([email protected])

Page 2: Pengenalan 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 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 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 Intel XDK

HTML5HyperText Markup Language versi 5

Page 6: Pengenalan 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 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 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 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 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 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 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 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 Intel XDK

HTML5 benar-benar masa depan.

Karena masih dalam tahap akhir untuk pengembangan dan standardisasi.

Page 15: Pengenalan Intel XDK

Tapi?Perkembangan akhir-akhir ini menunjukkan bahwa

HTML5 sudah memasuki tahap siap untuk digunakan.

Page 16: Pengenalan Intel XDK

84% developer sedang dalam proses untuk mengadopsi HTML5

Sumber: Presentasi Suresh Kumar

Page 17: Pengenalan 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 Intel XDK

Apple mendukung penuh dan memilih pengembangan pada

aplikasi barunya menggunakan HTML5.

Konten multimedia pada iBook menggunakan HTML5

Page 19: Pengenalan 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 Intel XDK

Mari bergabung dengan kumpulan orang pertama

yang mampu mengembangkan aplikasi

HTML5.Are you ready?

Page 21: Pengenalan Intel XDK

Mobile Application

Page 22: Pengenalan 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 Intel XDK
Page 24: Pengenalan Intel XDK
Page 25: Pengenalan Intel XDK
Page 26: Pengenalan Intel XDK
Page 27: Pengenalan Intel XDK
Page 28: Pengenalan Intel XDK

Intel XDK

Page 29: Pengenalan 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 Intel XDK

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

Page 31: Pengenalan Intel XDK
Page 32: Pengenalan 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 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 Intel XDK

Terimakasih.