google.com, pub-9228471708496696, DIRECT, f08c47fec0942fa0

Membuat Aplikasi Web HTML5 Menggunakan Intel XDK

Intel XDK memungkinkan developer untuk membuat aplikasi jenis web dan hybrid menggunakan teknologi web seperti HTML5, JavaScript, dan CSS3 untuk di banyak platform. Developer dapat menulis satu aplikasi yang dapat berjalan secara lintas platform dan perangkat mobile tanpa perlu melakukan modifikasi.
Intel XDK mendukung semua platform besar saat ini seperti Microsoft Windows, OS X, dan Ubuntu Linux. Tool ini memberikan developer sebuah alur kerja yang lengkap untuk pengembangan, debugging, pengujian, dan deploy aplikasi mereka pada perangkat berbasis platform yang dituju.
Intel XDK cocok untuk developer pemula maupun yang telah berpengalaman serta menyediakan alur kerja yang telah disederhanakan untuk membuat  developer dapat dengan mudah merancang, membangun, dan deploy aplikasi web maupun hybrid di beberapa toko aplikasi dan beragam jenis perangkat.
Developer dapat memulai pengembangan aplikasi dari nol atau bisa menggunakan proyek demo yang telah ada atau template lainnya. Pengetikkan kode menggunakan HTML5 Brackets Editor yang berbasis open source. HTML5 Brackets Editor menyediakan beberapa fitur yang akan mempermudah developer seperti penyelesaian koding otomatis dan menyediakan semua tool siklus siklus pengembangan aplikasi yang relevan untuk debugging, membangun, dan menguji aplikasi.
Artikel ini akan menunjukkan pembaca bagaimana membuat aplikasi web yang bersifat native menggunakan HTML5, JavaScript, dan CSS3. Dalam hal ini akan dijelaskan bagaimana cara menginstal Intel XDK, membuat proyek log-in form yang sederhana, style, dan mengujinya pada emulator.
Beberapa referensi untuk artikel ini:

Instalasi Intel XDK

Unduh dan instal versi terbaru dari Intel XDK di http://xdk-software.intel.com. Tool pengembangan ini disediakan secara gratis. Kamu perlu membuat akun Intel XDK untuk memulai dan menguji aplikasi kamu pada perangkat pengjuian.
Untuk mendapatkan tutorial mengenai bagaimana menjalankan aplikasi pada perangkat pengujian, kunjungi halaman Get Started with the Intel XDK. Akun Intel XDK tidak dibutuhkan apabila kamu hanya menggunakan emulator dari Intel XDK untuk menguji aplikasi kamu.

Buat Proyek Kosong

Kamu dapat memulai sebuah proyek dengan menggunakan template, demo, atau proyek kosong. Tool ini menyertakan alur kerja yang efisien, yang memandu developer dari tahap pengembangan, pengujian, debugging, hingga penyebaran secara bertahap dalam pengembangan aplikasi.
Editor teks pada tab “Develop” berbasis Brackets Editor di mana kamu bisa melakukan proses edit pada aplikasi kamu. Dokumentasi Intel XDK akan memberikan rincian mengenai cara menggunakan setiap tab di Intel XDK.
Intel XDK 1Gambar 1 : Memulai Proyek Baru
Intel XDK 2Gambar 2 : Membuat Proyek Kosong

Buat Log-in Form menggunakan HTML5, JavaScript, dan CSS3

Kamu sekarang telah siap untuk mengoding file index.html-mu untuk membuat log-in form. Pertama, kamu harus mulai dengan tab pembuka elemen form. Jenis masukan untuk nama pengguna dan kata sandi adalah teks dengan placeholder. Placeholder mengambarkan nilai dari input field.
Contoh Kode 1 : Log-in Form dengan HTML5
Intel XDK 3 
Gambar 3 : Tata letak Log-in Form pada Emulator

Jenis input berikutnya adalah tombol. Setelah pengguna menekan tombol log-in, maka JavaScript validateForm () akan dipanggil untuk memvalidasi log-in form. Kamu dapat menggunakan HTML5 untuk memvalidasi log-in form, namun lebih baik menggunakan JavaScript karena beberapa atribut HTML5 terbatas pada browser terbaru.
Contoh Kode 2 : Tombol Input dengan HTML5
Berikut adalah contoh penggunaan JavaScript untuk memvalidasi form. File JavaScript harus disimpan dengan ekstensi .js.
Contoh Kode 3 : Validasi form dengan JavaScript
Jika pengguna gagal melakukan login, maka data yang dimasukkan ke dalam form akan dibersihkan dan memberikan pengguna untuk memasukkan kembali datanya. Jika pengguna berhasil login, maka form akan dibersihkan dan dimatikan seperti fungsi di bawah ini :
Contoh Kode 4 : Bersihkan dan Matikan form dengan JavaScript
Tautan untuk menuju file skrip eksternal “js/Login.js”  yang menggunakan script tag dan atribut sumber dari index.html.
Contoh Kode 5 : Script Tag
Ini merupakan sebuah contoh lengkap dari log-in form menggunakan HTML5 adalah sebagai berikut :
Contoh Kode 6 : Contoh Lengkap dari log-in form dengan HTML5
Untuk bentuk style dari tampilan log-in form maka gunakan CSS3. Cara yang paling umum untuk memasukkan style sheet adalah eksternal, internal, dan inline. Style sheet eksternal merupakan bentuk yang paling ideal digunakan oleh banyak halaman web. Setiap halaman harus menyertakan tautan ke style sheet dengan tag <link> di dalam head section.
Contoh Kode 7 : tag style sheet eksternal
Untuk menambahkan 1 pixel border dengan warna abu-abu terang di sekitar teks input dan input password field, gunakan border: 1px solid #CCC”.  Dengan 6 digit nilai heksadesimal warna, kamu bisa membuat style warna pada teks, latar belakang, dan border. Nilai bawaannya adalah #000000.
Kamu juga dapat menggunakan nama warna seperti red, green, blue, dan lainnya atau menggunakan pemilih warna HTML. Salah satu cara menggunakan pixel untuk menentukan lebar adalah dengan kode line-height:15px”. Hal ini juga dapat menentukan ruang antara garis dalam dua paragraf.
Selain itu, dengan menggunakan “margin-bottom: 16px”, kamu dapat merubah margin di bagian bawah. Demikian juga dengan margin-right dan margin-top dapat menentukan margin di bagian bawah maupun atas pada sebuah field.
Contoh Kode 8 : Input field style dengan CSS3
Contoh di bawah adalah style dari tampilan tombol. Hal ini menentukan warna latar belakang, warna teks pada tombol, dan border. Untuk style dari bentuk tombol, gunakan border-radius. padding: 4px 25px 4px 25px” akan menentukan ukuran tombol.
Contoh Kode 9 : Style tombol dengan CSS3

Tes di Emulator

Tab “Emulate” digunakan untuk menguji fungsi dan tata letak aplikasi kamu pada koleksi dari perangkat virtual mobile. Bawaannya adalah Motorola Droid 2 dengan perangkat berbasis Android.

Intel XDK 4 
Gambar 4 : Log-in Form pada Emulator

Setelah berhasil menciptakan log-in form dan mengujinya pada emulator, maka kamu dapat mencoba untuk membuat reset kata sandi dan form registrasi untuk pengguna baru.

Intel XDK 5 
Gambar 5 : Reset Kata Sandi

Intel XDK 6 
Gambar 6 : Registrasi Pengguna Baru

Rangkuman

Intel XDK merupakan tool pengembangan aplikasi cross-platform yang terintegrasi dengan HTML. Beragam tab di bagian atas akan memandu developer untuk membuat aplikasi dengan mudah melalui beragam tugas pengembangan.
Tool ini dapat membuat developer mengembangkan dan menyebarkan aplikasi mereka untuk satu atau beberapa toko aplikasi dengan sangat mudah. Dokumen ini juga menunjukkan kepada pengguna baru, bagaimana menggunakan Intel XDK untuk membuat aplikasi web yang bersifat native.

Tentang Penulis

Nancy Le adalah seorang software engineer di Software and Services Group Intel yang bekerja pada bagian proyek skala prosesor Intel Atom.
Referensi

Apa Itu Intel XDX dan HTML 5

Android saat ini adalah salah satu mobile platform terpopuler di dunia. Kepopulerannya tidak hanya di kalangan pengguna ponsel saja namun juga di kalangan pengembang aplikasi. Bagi developer, untuk membuat aplikasi Android dengan HTML5 kini semakin mudah.
Untuk membuat aplikasi Android dengan HTML5, sudah tersedia banyak development tool yang dapat digunakan salah satunya adalah Intel XDK. Seperti namanya, Intel XDK disokong oleh Intel, salah satu perusahaan mikrokonduktor terbesar di Indonesia. Development tool ini disediakan oleh Intel secara gratis.
Yang membuat Intel XDK ini unik dibandingkan dengan development tool lainnya adalah aplikasi Android-nya dibuat dengan menggunakan bahasa HTML5 dan juga dapat membuat aplikasi mobile untuk platform lainnya selain Android seperti Windows Phone 8, iOS, atau BlackBerry.
Tanpa panjang lebar lagi, saya akan menjabarkan cara untuk membuat aplikasi Android dengan HTML5 menggunakan Intel XDK.
Pertama-tama, unduh Intel XDK di tautan ini: https://software.intel.com/en-us/intel-xdk

Pengenalan Intel XDK

Ketika kita menjalankan Intel XDK, akan terlihat 5 menu utama yang dapat digunakan, yaitu:

Develop

Di menu inilah kita mengkoding aplikasi yang kita buat. Intel sudah menyediakan berbagai macam API HTML5 yang dapat kita gunakan untuk mengembangkan aplikasi kita. Selain menyediakan antarmuka untuk pengkodingan, di menu ini juga terdapat fitur App Designer yang bisa kita gunakan untuk mendesain tampilan antarmuka aplikasi kita tanpa koding.
Intel sudah menyediakan contoh HelloWorld di Intel XDK untuk dapat kita mengetes langsung alur penggunaan Intel XDK
XDK - 1

Emulate

Jika kita sudah mengkoding dan ingin melihat seperti apa jadinya aplikasi yang kita buat, di menu Emulate kita dapat mengemulasikan aplikasi kita. Di menu ini terdapat berbagai macam pilihan emulasi sesuai dengan target aplikasi kita.
Membuat Aplikasi Android Dengan HTML

Test

Setelah aplikasi yang kita buat sudah jadi dan ingin kita tes di ponsel kita, kita dapat menggunakan menu Test. Di sinilah Intel XDK akan mem-push aplikasi kita ke layanan cloud untuk kemudia dapat kita unduh di ponsel kita dan langsung dicoba aplikasinya.
XDK - 3

Build

Setelah kita sudah menyelesaikan seluruh pengembangan aplikasi kita dan ingin mendistribusikan aplikasi kita, kita dapat membuat file aplikasi di menu Build. Ada banyak pilihan target mobile platform yang dapat kita gunakan salah satunya Android.
XDK - 4

Service

Di menu ini, kita dapat menggunakan berbagai macam layanan tambahan yang disediakan oleh Intel beserta partner-partner mereka.

Kehadiran Standar Resmi HTML5

HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada melanjutkan HTML.
Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0 tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri: WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakal HTML5. Singkat cerita, W3C meninggalkan XHTML 2.0 dan ikut mengembangkan HTML5 bersama WHATWG.
Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 (sumber resminya dapat dibaca pada http://www.w3.org/blog/news/archives/4167). Walaupun demikian, saat ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita mulai membuat kode HTML menggunakan standar HTML5.

HTML5 vs (HTML 4 dan XHTML 1.1)

HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum HTML5 adalah HTML 4.01. dan XHTML 1.1. Kali ini kita akan membahas apa saja fitur-fitur baru yang tersedia di dalam HTML5 serta perbedaannya dengan versi HTML sebelumnya.
Perkembangan HTML terhenti pada versi 4.01 di tahun 1999. W3C sebagai badan yang bertanggung jawab dalam standarisasi teknologi internet (termasuk HTML), kemudian beralih mengembangkan XHTML yang juga akhirnya menemui jalan buntu pada versi 2.0. Jika sebelumnya anda sudah terbiasa menggunakan HTML 4.01 ataupun XHTML 1.1, terdapat perubahan kecil pada HTML5.
Pada dasarnya HTML5 adalah gabungan ‘best practice‘ dari HTML 4.01 dan XHTML. Hampir semua tag atau elemen pada HTML 4.01 maupun XHTML 1.1 dapat digunakan dalam HTML5.
Beberapa perbedaan yang akan ditemukan dalam HTML5:
  • Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.
  • Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>
  • Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.
  • Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.
  • Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.
  • Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.
  • Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.
  • HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.
  • HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).
Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di http://validator.w3.org/:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Tes Validasi HTML5</TITLE>
  <style>
    .penting {
      color:blue;
     }
  </style>
</head>
<BODY>
   <p CLASS=penting>Paragraf ini menggunakan atribut tanpa
      menggunakan tanda kutip </p>
   <br>
   <p> Paragraf ini tidak memiliki penutup tag
</body>
</html>
Perbedaan HTML5 dengan HTML 4 - Hasil validasi W3CDari perbedaan diatas, terlihat bahwa HTML5lebih bebas‘ dari XHTML. Akan tetapi sebaiknya kita tetap menggunakan penulisan yang ‘rapi‘, seperti menggunakan huruf kecil untuk semua tag, menutup semua tag dan memberi tanda kutip dalam setiap nilai atribut.

XHTML5 : HTML5 “rasa” XML

Jika beberapa aturan diatas dirasa terlalu longgar (terutama jika anda banyak menggunakan XHTML sebelumnya), HTML5 memiliki ‘rasa‘ yang lebih ketat aturan, yakni XHTML5. Di dalam XHTML5, seluruh tag harus ditulis dengan huruf kecil, atribut harus berada di dalam tanda kutip, dan setiap tag harus ditutup.
XHTML5 bukanlah versi lain dari HTML5, akan tetapi hanya HTML5 dengan beberapa aturan dan syntax untuk memenuhi syarat XML.
Untuk menggunakan XHTML5, kita butuh menambahkan atribut xmlns=”http://www.w3.org/1999/xhtml” pada tag <html>, dan menggunakan MIME type: application/xhtml+xml pada http header (diset melalui web server).
Contoh dokumen XHTML5 adalah sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title></title>
  <meta charset="UTF-8" />
  </head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg">
    <rect stroke="black" fill="blue" x="45px" y="45px"
    width="200px" height="100px" stroke-width="2" />
  </svg>
  </body>
</html>
Saat ini penggunaan XHTML5 tidak terlalu populer, karena memang lebih praktis menggunakan HTML5. XHTML5 akan berguna jika anda ingin menggunakan teknologi yang berbasis XML seperti SVG, MathML, Xlink

Semoga pembahasan singkat ini bermanfaat


Cara Megatasi dan menghilangkan pesan F1 saat Booting di Windows 10

Mungkin kita pernah mengalami saat menghidupkan komputer di minta menekan F1 untuk bisa melanjutkan booting Windows. Memang sangat menggangg...