Post on 14-Dec-2015
description
Pengenalan HTML5, Mobile Application,
dan Intel XDKMuhammad Yusuf (muhammad.yusuf@live.com)
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
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
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
HTML5HyperText Markup Language versi 5
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)
Contoh Bahasa HTML
<html><head>
<title>Contoh Hello World
<title></head><body>
<h1>Halo</h1><p>Hello World.</p>
</body></html>
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
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>
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
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);}
}
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.
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.
HTML5 benar-benar masa depan.
Karena masih dalam tahap akhir untuk pengembangan dan standardisasi.
Tapi?Perkembangan akhir-akhir ini menunjukkan bahwa
HTML5 sudah memasuki tahap siap untuk digunakan.
84% developer sedang dalam proses untuk mengadopsi HTML5
Sumber: Presentasi Suresh Kumar
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.
Apple mendukung penuh dan memilih pengembangan pada
aplikasi barunya menggunakan HTML5.
Konten multimedia pada iBook menggunakan HTML5
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
Mari bergabung dengan kumpulan orang pertama
yang mampu mengembangkan aplikasi
HTML5.Are you ready?
Mobile Application
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
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
Available for Windows. Coming soon for OS X and Linux.
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
Platform yang Didukung Intel XDK
• Mobile• iOS• Android• Windows Phone 8• Windows 8 Store• Tizen• Amazon• Nook
• Web App• Web App• Chrome• Facebook
Terimakasih.