pengenalan intel xdk
DESCRIPTION
Materi Pengenalan Intel XDKTRANSCRIPT
![Page 2: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/2.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/3.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/4.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/5.jpg)
HTML5HyperText Markup Language versi 5
![Page 6: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/6.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/7.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/8.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/9.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/10.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/11.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/12.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/13.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/14.jpg)
HTML5 benar-benar masa depan.
Karena masih dalam tahap akhir untuk pengembangan dan standardisasi.
![Page 15: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/15.jpg)
Tapi?Perkembangan akhir-akhir ini menunjukkan bahwa
HTML5 sudah memasuki tahap siap untuk digunakan.
![Page 16: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/16.jpg)
84% developer sedang dalam proses untuk mengadopsi HTML5
Sumber: Presentasi Suresh Kumar
![Page 17: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/17.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/18.jpg)
Apple mendukung penuh dan memilih pengembangan pada
aplikasi barunya menggunakan HTML5.
Konten multimedia pada iBook menggunakan HTML5
![Page 19: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/19.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/20.jpg)
Mari bergabung dengan kumpulan orang pertama
yang mampu mengembangkan aplikasi
HTML5.Are you ready?
![Page 21: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/21.jpg)
Mobile Application
![Page 22: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/22.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/23.jpg)
![Page 24: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/24.jpg)
![Page 25: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/25.jpg)
![Page 26: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/26.jpg)
![Page 27: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/27.jpg)
![Page 28: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/28.jpg)
Intel XDK
![Page 29: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/29.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/30.jpg)
Available for Windows. Coming soon for OS X and Linux.
![Page 31: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/31.jpg)
![Page 32: Pengenalan Intel XDK](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/32.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/33.jpg)
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](https://reader036.vdocuments.site/reader036/viewer/2022062304/563dbb46550346aa9aabc3eb/html5/thumbnails/34.jpg)
Terimakasih.