HTML5MOB

Pengenalan HTML5,
Mobile Application, dan
Intel XDK
Muhammad 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

HTML5
HyperText 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 HTML5
HTML5 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
• 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
• 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

HTML5MOB

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (18)

Semelhante a HTML5MOB

Semelhante a HTML5MOB (20)

HTML5MOB