Isnin, 22 April 2013

KONSEP PROGRAM

KONSEP PROGRAM

I.            Konsep Umum :
Pemrograman adalah urutan langkah ,prosedur atau tindakan yang harus dilakukan secara sistematis berencana dalam jangka waktu tertentuuntuk mencapai suatu tujuan yang di inginkan.

II.            Konsep IT            :
Pemrograman adalah urutan langkah prosedur yang di wujudkan dalam bentuk intruksi – intruksi pemrograman yang diberikan kepada computer tersebut dapat menjalankan suatu fungsi untuk memperoleh hasil yang di ingikan.

DEFINISI KOMPUTER
Suatu alat yang fungsinya menerima masukan data memperoses data tersebut untuk menghasilkan informasi kepada user.
Pada computer sifat pengolaha data dapat di ubah – ubah kapan saja berdasarkan program yang di brikan untuk melakukan pengolahan data tersebut.
Cirri-ciri computer adanya keybord dan monitor.
Jenis – pemrograman
  1. Pemrograman BIOS
  2. Pemrograman operating system
  3. Perograman bhs.program (kompilen)
  4. Perograman untuk menghasilkan aplikasi umum
  5. Pembuatan aplikasi administrasi perkantoran / keuangan (data base & perogram)
  6. Pemrograman Web
  7. Pemrograman Multymedia
  8. Pemrograman aplikasi Robotik / mesin industry
PEMROGRAMAN JAVA
Dapat dilakukan dengan 2 cara yaitu
  1. Pemrograman dilakukan didalam lingkungan DOS (CMD)
  2. Pemrograman dilakukan dalam lingkungan windows dengan menggunakan netbeans
Contoh program di DOS
Program pengaktif JAVA di Dos tuliskan program pengaktif java ini di notped kemudian di savaas dengan extension .Java
SET PATH=C:/Program Files/JAVA/jdk1.6.0_25;C:/Program Files/JAVA/jdk1.6.0_25/bin
SET CLASSPATH=.;C:/Program Files/JAVA/jdk1.6.0_25/lib
SET HOMEDRIVE=C:
SET HOMEPATH=/Program Files/JAVA/jdk1.6.0_25
SET JAVA_HOME=:C:/Program Files/JAVA/jdk1.6.0_25

Langkah – langkah pemrograman JAVA dalam lingkungan CMD
  1. Program o/s windows, program java ditulis dengan mengunakan notped atau dapat juga menggunakan texs editor lainnya ex: edit plus , dbedit
  2. Program java diletakan didalam class dan class tersebut harus diberi nama.
  3. Program disave dan diberi ekstensi .java dan nama file harus sama dengan nama class
  4. Selanjutnya file tsb harus di compile dengan menggunakan compiler Java (javac)
Contoh program java di dos

Ketikan program berikut
public class Halo{
public static void main(String[] args){
System.out.println(“Selamat Belajar java”);
System.out.println(“java kahfi comp”);
System.out.println(“============================”);
System.out.println(“Nama     Alamat     Jurusan” );
System.out.println(“============================”);
System.out.println(“Kahfi    Bekasi     komputer”);
System.out.println(“Romo     jakarta    mesin   “);
System.out.println(“============================”);
System.out.println(“============================”);
System.out.println(“                              trims”);
System.out.println(“                                                      “);
System.out.println(“                                                      “);
System.out.println(“                              Kahfi”);
System.out.println(“============================”);
}
}

Kemudian save file tersebut  dengan extension .java nama file harus sana dengan nama class, karna disini nama calss nya adalah  Halo maka save dengan Nama Halo.java kemudian type save as diganti dengan All file.
Setelah selesai maka compare file dengan cara javac Halo.java kemudian ketikan java Halo maka file sudah dikompair cara melihanya dengan cara ketian dir lihat jika sudah ada file dengan type Halo.class maka file tersebut sudah ter compiler
Program java terdiri atas

{ (kurawal buka dinyatakan sebagai awal dari dimulainya program)
} (kurawal tutup dinyatakan sebagai akhir dari sebuah program )

Program java diawali dengan printah pembuka sebagai berikut.
public static void main(String[] args) {
}
Program java juga dapat di jalankan di internet dengan menggunakan Applet java
Langkah – langkah pembentukan Applet java
  • Buatlah program Applet dengan menggunakan notped
  • Lakukan kompilasi terhadap Applet java dengan menggunakan perintah javac
  • File hasil kompolasi (file dengan ekstensi .class) dapat diletakan kedalam program HTML dengan menggunakan Tag <Applet code = file.class>
  • Selanjutnya jalankan program html dengan browser internet
Contoh program Applet java :
import java.awt.Graphics;
public class AppletHalo extends java.applet.Applet{
                public void paint (Graphics g){
                                g.drawString(“Selamat Belajar Java”,5,20);
                }
}
Contoh program Applet java di dalam HTML
<html>
<body bgcolor=”red”>
<applet code=”AppletHalo.class”width=”250″height=”80″>
</applet>
</body>
</html>
EKSPRESI

OPERATOR
a)      OPERATOR ARITMATIKA
b)      OPERATOR PENGGABUNGAN
c)       OPERATOR PENAMBAHAN & PENGURANGAN
d)      OPERATOR PENUGASAN
e)      OPERATOR PEMBANDING
f)       OPERATOR LOGICA

VARIABEL
a)      VARIABEL STRING
b)      VARIABEL INTEGER
c)       VARIABEL DOUBLE (REAL)
d)      VARIABLE BOOLEAN

PERINTAH-PRINTAH DECISION (KEPUTUSAN)
a)      IF
b)      IF ELSE

PERINTAH-PERINTAH LOOPING
a)      BERULANG/PENGULANGAN

PENJELASAN

EKSPRESI
Adalah suatu ungkpan yang menghasilkan sebuah nilai.Ekspresi biasanya muncul dalam bentuk Aritmatika .
Contoh:
1+2,1+2*3 (1+2)*(3+2)
Dalam java ekspresi di uji dengan menggunakan program penampil.

OPERATOR
Adalah suatu tanda. Tanda ini berlaku terhadap literal di sebelah kiri dan kanan tanda operator melakukan operasi tertentu terhadap literal di kiri dan dikanan tanda operasi.
1 + 2 dimana 1(literal kiri) + (operator) 2(literal kanan)
Fungsi operator + diatas adalah menjumlahkan literal di kiri dengan di kanan
a)      Operator Aritmatika
Adalah jenis –jenis operator yang di gunakan dalam berhitung
Contoh:
  1.  +            : operator penjumlah
  2. -              : operator selisih
  3. *             : operator Pengali
  4. /              : operator pembagi
  5. %            : operator sisa pembagian
Fungsi
+             : Menjumlahkan literal dikiri dengan literal di kanan contoh: 1+2 = 3
-              : Selisih antara literal kiri dengan literal kanan contoh: 5-3 = 2
*             : Mengalikan literal di kiri dengan literal di kanan Contoh: 5*3 = 15
/              : Membagi literal dikiri dengan literal di kanan: 5/3

b)      Operator Penggabung
Operator Penggabung dinyatankan dengan symbol  +  (sama dengan operator penjumlah)
Fungsi Operator penjumlah adalah menggabungkan literal di sebelah kanan dan di sebelah kiri 
System.out.println(“nilai X = ”+X);
contohnya : “1 + 2 = ”+(1+2)
Hasilnya     : 1+2 = 3

c)       Operator Penambahan  &  Pengurangan
Perhatikan bentuk – bentuk berikut:
X = 5;
X = X + 1;
Xbaru = Xlama  + 1
Operator Penambah : ++
Operator pengurang: –
Pritah diatas dapat di gantikan dengan: ++X atau X++

d)      Aritmatika Oprator Penambahan & Pengurangan
Exs:
Int x,y,z
X=4
Y=6
Z=++X + ++Y
= 5 + 7
=12
X = 5 Y=7

Int x,y,z
X=4
Y=6
Z=++X + Y++
= 5 + 7
=12
X = 5 Y=7

e)      Operator Penugasan
Operator Penugasan memiliki bentuk – bentuk sbb:
=
+=
-=
*=
/=
%=
  • Operator penugasan berlaku dengan ketentuan sbb:
=,+=(Berlaku untuk variable bertype string, atau variable bertype bilangan(integer atau real))
-=,*=,/=,%=(berlaku untuk type bilangan integer atau real)

  • Type variable
String (huruf, kata,kalimat)
Int (integer (tdk boleh ada unsur pecahan))
Double (bil real(bilangan yang boleh ada pecahan))
Bolean (logica (variable yang bernilai ‘0’ atau 1 atau ya atau tidak Betul atau Salah))
f)        Operator pembanding adalah operator yang br fungsi membandingkan 2 literal, hasil pembandinagn jawabannya adalah true or  false , ya atau tidak, 1 atau 0, benar atau salah
Jenis-jenis Operator Pembanding:
  1. 1.      
    Berlaku untuk string, Boolean,bilangan
    = =  (kesamaan)
  1. 2.       ! =  (ketidak samaan)
  2. 3.       >  (lebihb esar) ,  <  (lebih kecil)
  3. 4.        >=  (lebih besar atau sama dengan) ,  <= (lebih kecil atau sama denagn)



Contoh program:
Int a,b ;
a = 5; b = 7;
operator              fungsi                                                                                    jawaban
a = = b                   apakah a samadengan b                                                               false
a ! = b                    apakah a tidak sama dengan b                                   true
a > b                      apakah a lebih besar dari b                                          false
a < b                      apakah a lebih kecil dari b                                             true
a >= b                    apakah a lebih besar atau sama dengan b             false
a <= b                    apakah a lebih kecil atau sama dengan b                               true
g)      Operator Logica
Dalam operasinya operator logica menggunakan input operator pembanding, karna itu input terhadap operator logica adalah True or False. Begitu juga output dari oprator logica hanya True or False.
Operator Logica dasar terdiri atas 3 jenis(not , and , or)
  1. Operator NOT
Operator not hanya memiliki 1 input  dan 1 output
Symbol  operator NOT adalah !

  1. Operator AND
Operator AND memiliki paling sedikit 2 buah input Input maksimal yang boleh dimiliki operator AND tidak terbatas akan tetapi jumlahnya outputnya hanya satu              MAsing-masing  nilai input dan output true or false
Symbol Program untuk operator AND &&
INPUT
Output
Input  1
Input 2
0
0
0
0
1
0
1
0
0
1
1
1
J
ika salah satu pernyataan salah maka jawabannya salah
Jika jawaban 22 nya benar maka benar.



Dasar-Dasar Pemrograman Datamining di R: Interface Pemrograman Java

Selain sebagai software paket statistika, R juga merupakan lingkungan sistem pemrograman yang cukup lengkap. Artinya, R dapat digunakan sebagai alat untuk memecahkan berbagai masalah melalui pemrograman. Tentu saja masalah yang lebih tepat dipecahkan dengan R adalah yang terkait dengan analisis data dalam konteks statistika.
Para developer R menyadari bahwa analisis data kuantitatif melalui statistika memerlukan beberapa tahapan yang mana setiap tahapan dibutuhkan alat bantu untuk ‘berbicara’ dengan lingkungan disekitarnya. Secara singkat tahapan ini meliputi 1) persiapan data, 2) pemilihan metode/teknik, 3) eksekusi dan 4) penyajian informasi. Sebagai contoh, pada tahap persiapan data, alat bantu yang dibutuhkan bagi seorang stastisi adalah kemudahan dalam menghubungkan raw data (database, file terstruktur, dsb) dengan lingkungan R. Solusi yang  diberikan oleh developer dan kontributor R terkait dengan hal ini diantaranya adalah membuat library ODBC, JDBC, CSV dll.
Selain kemudahan, konsep yang sering digunakan oleh para programer adalah otomatisasi dan integrasi proses. Artinya dalam sistem yang kompleks, lingkungan R harus bisa menyediakan interface bahasa yang berfungsi sebagai penghubung antar fungsi-fungsi dalam sistem tersebut. Dengan latar belakang itulah developer dan kontributor R membuat berbagai interface bahasa pemrograman yang berada diluar R seperti C, Java dan Tcl/Tk agar bisa memudahkan proses otomatisasi dan integrasi.

Download Tulisan Lengkap: pemrograman-datamining-R-3

Sabtu, 20 April 2013

Advanced Blogging

Baiklah sekarang saya akan share materi tentang blog.
sebelumnya anda harus tahu apa itu blog?

A. Pengertian Blog
Blog adalah singkatan dari web log yang merupakan sebuah website yang isinya dapat di update secara reguler. Selain itu, blog juga memungkinkan pengunjung untuk berkomentar. Blog juga dapat dipakai untuk banyak kegiatan, seperti untuk dijadikan buku atau catatan harian online, maupun untuk menulis artikel seperti halnya koran digital.

B. Jenis-Jenis Blog
    Sama seperti media pada umumnya, informasi yang dimuat dalam sebuah blog biasanya mengambil topik tertentu sebagai pokok bahasan, ada beberapa jenis blog menurut isi/konten yang terdapat didalamnya, antara lain: Blog politik, Blog pribadi, Blog kesehatan, Blog sastra, Blog perjalanan, Blog riset, Blog hukum, Blog media, Blog pendidikan, Blog bisnis dan sebagainya.

C. Manfaat Blog
Knowledge Sharing. Blog bisa menjadi sangat bermanfaat jika diisi dengan knowledge-knowledge yang bermanfaat buat orang banyak. Dengan blog, semua orang bisa dengan mudah mengeksternalisasikan knowledge yang dimilikinya ke publik. Sehingga dengan begitu knowledge yang dimilikinya itu bisa dishare ke orang lain dan menjadi bermanfaat buat orang yang membutuhkannya.  Bridge Blogging. Blog dapat dimanfaatkan sebagai jembatan informasi untuk menggambarkan kondisi suatu negara dalam bahasa global (seperti Inggris), sehingga dapat menjembatani orang lain untuk mendapat informasi dengan lebih akurat.
Ground Voice, Suara Akar Rumput. Dengan blog, orang dapat dengan leluasa menuliskan pendapatnya tentang suatu hal. Opini-opini yang muncul kemudian bisa menjadi sebuah opini yang kuat yang mampu menunjukkan bagaimana sebenarnya pendapat masyarakat tentang suatu hal.

   Idea Incubation. Biasanya jika seseorang mempunyai suatu ide, ide tersebut tidak langsung direalisasikan. biasanya ide yang muncul dalam otaknya terpendam sekian lama untuk proses pematangan ide. seiring berjalannya waktu, dia akan menambahkan konsep-konsep pelengkap dari idenya itu dalam tulisan/blog.

   Media Bisnis. Selain digunakan untuk kepentingan personal, blog juga dapat digunakan sebagai media untuk menjembatani suatu kegiatan bisnis (blog bisnis) atau mendapatkan penghasilan tambahan.

D. Advance Blog
Advance Blog sendiri tidak lain merupakan suatu upaya untuk menjadikan sebuah blog memiliki fungsi yang lebih komplit dibanding blog standard baik dalam fungsi kolaborasi seperti fitur komentar, shoutbox maupun dalam hal tampilan. Advance Blog biasa juga dikenal dengan istilah Profesional Blog.

E. Aspek Penting dari Advance Blog
Untuk membuat Blog menjadi lebih advance/profesional, beberapa aspek yang perlu diperhatikan adalah:
1. Tampilan, sebuah blog akan terlihat tidak biasa/lebih advance terutama dipengaruhi oleh tampilannya yang tidak biasa/standard.
2. Tema, menentukan tema tertentu untuk dibahas dalam blog akan membuat blog lebih spesifik dalam menyampaikan informasi.
3. Isi Blog, selain tampilan, kualitas isi tulisan maupun informasi dalam sebuah blog sangat mempengaruhi tingkat kunjungan blog yang bersangkutan.
4. Fitur, sebuah blog akan terlihat lebih advance jika didalamnya terdapat fitur-fitur pendukung yang dapat membuat blog menjadi lebih menarik dan interaktif.
5. SEO(Search Engine Optimation), populer tidaknya suatu blog juga dipengaruhi oleh cara kita mengenalkan blog pada mesin pencari(seperti google, yahoo atau bing).

F. Langkah-langkah membuat Advance Blog
    Untuk menjadikan sebuah blog menjadi lebih advance, beberapa langkahnya antara lain:
1. Kualitas Tampilan. Untuk membuat blog menjadi lebih advance kita dapat mulai dengan memperbaharui/update tampilan/template/themes yang menarik untuk blog kita, hal ini dapat dilakukan dengan mencari template gratis melalui internet atau dengan memperbaiki/menambahkan template yang sudah ada (dibutuhkan pemahaman HTML/PHP). Usahakan sedapat mungkin mensinkronkan tampilan dengan tema utama dari blog.

2. Tema. Langkah berikutnya adalah dengan menentukan suatu tema untuk blog anda. Tema layaknya seperti sebuah identitas, dengan menjadikan blog menjadi spesifik membahas tema tertentu maka akan menjadikan blog anda semakin mudah menjadi bahan referensi untuk tema tertentu bagi para pembaca. Terlalu banyak tema inti yang dibahas justru akan membuat blog anda kehilangan identitas utama.
3. Isi Blog. Memperhatikan isi blog yang kita tulis juga dapat menjadikan blog menjadi lebih menarik untuk dibaca, perhatikan tata cara penulisan, sumber tulisan dan informasi lain seperti gambar ataupun link terkait yang dapat membuat blog anda lebih menarik. Jangan sembarang mencopas(copy paste) tulisan orang lain tanpa menyebutkan sumber yang jelas, karena selain melanggar hak cipta tulisan, juga justru akan membingungkan pembaca jika tulisan tidak sesuai dengan identitas asli blog anda. Selain itu kontinuitas anda dalam memperbaharui isi blog juga dapat menjadikan blog anda semakin populer.
4. Fitur. Melengkapi blog dengan fitur menarik seperti komentar, galeri foto, animasi dan kotak saran/buku tamu dapat menjadikan blog anda terlihat lebih profesional. Anda dapat lakukan dengan menambahkan Gadget/Widget tambahan yang terintegrasi dengan blog anda atau mencari widget tambahan yang dapat anda peroleh dari Internet.
5. SEO. Poin terakhir yang juga sangat menentukan popularitas blog anda adalah bagaimana cara anda mengenalkan blog anda pada mesin pencari populer seperti Google atau Yahoo, karena hampir 80% pengguna internet menggunakan mesin pencari sebagai fasilitas awal untuk mencari informasi. Beberapa trik untuk SEO dapat dengan mudah anda pelajari dari buku atau Internet untuk dikembangkan dan diterapkan dalam blog anda.

Games Sederhana dengan HTML5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML
.
Berikut tujuan dibuatnya HTML5 :
  •  Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
  •  Mengurangi ketergantugan untuk plugin eksternal (Seperti Flash)
  •  Penanganan kesalahan yang lebih baik
  •  Lebih markup untuk menggantikan scripting
  •  HTML5 merupakan perangkat mandiri
  •  Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :
  •  Unsur kanvas untuk menggambar
  •  Video dan elemen audio untuk media pemutaran
  •  Dukungan yang lebih baik untuk penyimpanan secara offline
  •  Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
  •   Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera.Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga dikarenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenaldengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut 

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/xsilverlight-
2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>
</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Testing Browser Support HTML5
Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.

Ada beberapa hal yang perlu kita ketahui tentang HML 5. HTML 5 yang saat ini sudah mulai diimplementasikan oleh beberapa browser grade A akan membawa lebih dari sekedar fitur untuk layout dan format halaman. Beberapa di antaranya adalah Canvas dan Video.

Canvas
Dulu, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa menggambar langsung di halaman web. Sekarang Anda bisa berimaginasi sendiri, kira-kira apa saja yang orang lakukan dengan <canvas>. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.

Video dan Audio
Akan ada tag <audio> dan <video> di HTML 5. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan bervariasi terhadap browser, kemungkinan besar codecnya adalah Ogg Theora (patent free) dan H.264. Sepertinya sampai sekarang codecnya masih jadi kontroversi.

Local Storage
Masih ingat Google Gears? Sekarang storage untuk browser akan diakomodasi sebagai standard dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash. Tentunya ini kabar baik bagi pengembang aplikasi web. Mungkin bisa meningkatkan performa aplikasi dengan menggunakan storage sebagai local cache. Coba liat detilnya di sini.

Web Workers
Yang ini juga sempat kita nikmati lewat Google Gears. Jika javascript biasanya yang kita nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak membuat browser seperti sesak napas maka web worker akan bsia jadi pelega. Salah satu fitur web worker adalah threading. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.

Semantics
Nah ini dia. Buat designer yang sering meng-abuse div dan span sebagia elemen nav, fret no more. Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.

Games Sederhana HTML5
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style type="text/css">
body { margin: 0; padding: 0; background: #000;}
canvas { display: block; margin: 0 auto; background: #fff; }
</style>
</head>
<body>
<canvas></canvas>
<script>
// http://paulirish.com/2011/requestanimationframe-for-smart-animating
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// namespace our game
var POP = {
// set up some inital values
WIDTH: 320,
HEIGHT: 480,
scale: 1,
// the position of the canvas
// in relation to the screen
offset: {top: 0, left: 0},
// store all bubble, touches, particles etc
entities: [],
// the amount of game ticks until
// we spawn a bubble
nextBubble: 100,
// for tracking player's progress
score: {
taps: 0,
hit: 0,
escaped: 0,
accuracy: 0
},
// we'll set the rest of these
// in the init function
RATIO: null,
currentWidth: null,
currentHeight: null,
canvas: null,
ctx: null,
ua: null,
android: null,
ios: null,
init: function() {
// the proportion of width to height
POP.RATIO = POP.WIDTH / POP.HEIGHT;
// these will change when the screen is resize
POP.currentWidth = POP.WIDTH;
POP.currentHeight = POP.HEIGHT;
// this is our canvas element
POP.canvas = document.getElementsByTagName('canvas')[0];
// it's important to set this
// otherwise the browser will
// default to 320x200
POP.canvas.width = POP.WIDTH;
POP.canvas.height = POP.HEIGHT;
// the canvas context allows us to
// interact with the canvas api
POP.ctx = POP.canvas.getContext('2d');
// we need to sniff out android & ios
// so we can hide the address bar in
// our resize function
POP.ua = navigator.userAgent.toLowerCase();
POP.android = POP.ua.indexOf('android') > -1 ? true : false;
POP.ios = ( POP.ua.indexOf('iphone') > -1 || POP.ua.indexOf('ipad') > -1 ) ? true : false;
// set up our wave effect
// basically, a series of overlapping circles
// across the top of screen
POP.wave = {
x: -25, // x coord of first circle
y: -40, // y coord of first circle
r: 50, // circle radius
time: 0, // we'll use this in calculating the sine wave
offset: 0 // this will be the sine wave offset
};
// calculate how many circles we need to
// cover the screen width
POP.wave.total = Math.ceil(POP.WIDTH / POP.wave.r) + 1;
// listen for clicks
window.addEventListener('click', function(e) {
e.preventDefault();
POP.Input.set(e);
}, false);
// listen for touches
window.addEventListener('touchstart', function(e) {
e.preventDefault();
// the event object has an array
// called touches, we just want
// the first touch
POP.Input.set(e.touches[0]);
}, false);
window.addEventListener('touchmove', function(e) {
// we're not interested in this
// but prevent default behaviour
// so the screen doesn't scroll
// or zoom
e.preventDefault();
}, false);
window.addEventListener('touchend', function(e) {
// as above
e.preventDefault();
}, false);
// we're ready to resize
POP.resize();
POP.loop();
},
resize: function() {
POP.currentHeight = window.innerHeight;
// resize the width in proportion
// to the new height
POP.currentWidth = POP.currentHeight * POP.RATIO;
// this will create some extra space on the
// page, allowing us to scroll pass
// the address bar, and thus hide it.
if (POP.android || POP.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
// set the new canvas style width & height
// note: our canvas is still 320x480 but
// we're essentially scaling it with CSS
POP.canvas.style.width = POP.currentWidth + 'px';
POP.canvas.style.height = POP.currentHeight + 'px';
// the amount by which the css resized canvas
// is different to the actual (480x320) size.
POP.scale = POP.currentWidth / POP.WIDTH;
// position of canvas in relation to
// the screen
POP.offset.top = POP.canvas.offsetTop;
POP.offset.left = POP.canvas.offsetLeft;
// we use a timeout here as some mobile
// browsers won't scroll if there is not
// a small delay
window.setTimeout(function() {
window.scrollTo(0,1);
}, 1);
},
// this is where all entities will be moved
// and checked for collisions etc
update: function() {
var i,
checkCollision = false; // we only need to check for a collision
// if the user tapped on this game tick
// decrease our nextBubble counter
POP.nextBubble -= 1;
// if the counter is less than zero
if (POP.nextBubble < 0) {
// put a new instance of bubble into our entities array
POP.entities.push(new POP.Bubble());
// reset the counter with a random value
POP.nextBubble = ( Math.random() * 100 ) + 100;
}
// spawn a new instance of Touch
// if the user has tapped the screen
if (POP.Input.tapped) {
// keep track of taps; needed to
// calculate accuracy
POP.score.taps += 1;
// add a new touch
POP.entities.push(new POP.Touch(POP.Input.x, POP.Input.y));
// set tapped back to false
// to avoid spawning a new touch
// in the next cycle
POP.Input.tapped = false;

checkCollision = true;
}
// cycle through all entities and update as necessary
for (i = 0; i < POP.entities.length; i += 1) {
POP.entities[i].update();
if (POP.entities[i].type === 'bubble' && checkCollision) {
hit = POP.collides(POP.entities[i],
{x: POP.Input.x, y: POP.Input.y, r: 7});
if (hit) {
// spawn an exposion
for (var n = 0; n < 5; n +=1 ) {
POP.entities.push(new POP.Particle(
POP.entities[i].x,
POP.entities[i].y,
2,
// random opacity to spice it up a bit
'rgba(255,255,255,'+Math.random()*1+')'
));
}
POP.score.hit += 1;
}
POP.entities[i].remove = hit;
}
// delete from array if remove property
// flag is set to true
if (POP.entities[i].remove) {
POP.entities.splice(i, 1);
}
}
// update wave offset
// feel free to play with these values for
// either slower or faster waves
POP.wave.time = new Date().getTime() * 0.002;
POP.wave.offset = Math.sin(POP.wave.time * 0.8) * 5;
// calculate accuracy
POP.score.accuracy = (POP.score.hit / POP.score.taps) * 100;
POP.score.accuracy = isNaN(POP.score.accuracy) ?
0 :
~~(POP.score.accuracy); // a handy way to round floats
},
// this is where we draw all the entities
render: function() {
var i;
POP.Draw.rect(0, 0, POP.WIDTH, POP.HEIGHT, '#036');
// display snazzy wave effect
for (i = 0; i < POP.wave.total; i++) {
POP.Draw.circle(
POP.wave.x + POP.wave.offset + (i * POP.wave.r),
POP.wave.y,
POP.wave.r,
'#fff');
}
// cycle through all entities and render to canvas
for (i = 0; i < POP.entities.length; i += 1) {
POP.entities[i].render();
}
// display scores
POP.Draw.text('Hit: ' + POP.score.hit, 20, 30, 14, '#fff');
POP.Draw.text('Escaped: ' + POP.score.escaped, 20, 50, 14, '#fff');
POP.Draw.text('Accuracy: ' + POP.score.accuracy + '%', 20, 70, 14, '#fff');
},
// the actual loop
// requests animation frame
// then proceeds to update
// and render
loop: function() {
requestAnimFrame( POP.loop );
POP.update();
POP.render();
}
};
// checks if two entties are touching
POP.collides = function(a, b) {
var distance_squared = ( ((a.x - b.x) * (a.x - b.x)) +
((a.y - b.y) * (a.y - b.y)));
var radii_squared = (a.r + b.r) * (a.r + b.r);
if (distance_squared < radii_squared) {
return true;
} else {
return false;
}
};
// abstracts various canvas operations into
// standalone functions
POP.Draw = {
clear: function() {
POP.ctx.clearRect(0, 0, POP.WIDTH, POP.HEIGHT);
},
rect: function(x, y, w, h, col) {
POP.ctx.fillStyle = col;
POP.ctx.fillRect(x, y, w, h);
},
circle: function(x, y, r, col) {
POP.ctx.fillStyle = col;
POP.ctx.beginPath();
POP.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true);
POP.ctx.closePath();
POP.ctx.fill();
},
text: function(string, x, y, size, col) {
POP.ctx.font = 'bold '+size+'px Monospace';
POP.ctx.fillStyle = col;
POP.ctx.fillText(string, x, y);
}
};
POP.Input = {
x: 0,
y: 0,
tapped :false,
set: function(data) {
this.x = (data.pageX - POP.offset.left) / POP.scale;
this.y = (data.pageY - POP.offset.top) / POP.scale;
this.tapped = true;
}
};
POP.Touch = function(x, y) {
this.type = 'touch'; // we'll need this later
this.x = x; // the x coordinate
this.y = y; // the y coordinate
this.r = 5; // the radius
this.opacity = 1; // inital opacity. the dot will fade out
this.fade = 0.05; // amount by which to fade on each game tick
// this.remove = false; // flag for removing this entity. POP.update
// will take care of this
this.update = function() {
// reduct the opacity accordingly
this.opacity -= this.fade;
// if opacity if 0 or less, flag for removal
this.remove = (this.opacity < 0) ? true : false;
};
this.render = function() {
POP.Draw.circle(this.x, this.y, this.r, 'rgba(255,0,0,'+this.opacity+')');
};
};
POP.Bubble = function() {
this.type = 'bubble';
this.r = (Math.random() * 20) + 10;
this.speed = (Math.random() * 3) + 1;
this.x = (Math.random() * (POP.WIDTH) - this.r);
this.y = POP.HEIGHT + (Math.random() * 100) + 100;
// the amount by which the bubble
// will move from side to side
this.waveSize = 5 + this.r;
// we need to remember the original
// x position for our sine wave calculation
this.xConstant = this.x;
this.remove = false;
this.update = function() {
// a sine wave is commonly a function of time
var time = new Date().getTime() * 0.002;
this.y -= this.speed;
// the x coord to follow a sine wave
this.x = this.waveSize * Math.sin(time) + this.xConstant;
// if offscreen flag for removal
if (this.y < -10) {
POP.score.escaped += 1; // update score
this.remove = true;
}
};
this.render = function() {
POP.Draw.circle(this.x, this.y, this.r, 'rgba(255,255,255,1)');
};
};
POP.Particle = function(x, y,r, col) {
this.x = x;
this.y = y;
this.r = r;
this.col = col;
// determines whether particle will
// travel to the right of left
// 50% chance of either happening
this.dir = (Math.random() * 2 > 1) ? 1 : -1;
// random values so particles do no
// travel at the same speeds
this.vx = ~~(Math.random() * 4) * this.dir;
this.vy = ~~(Math.random() * 7);
this.remove = false;
this.update = function() {
// update coordinates
this.x += this.vx;
this.y += this.vy;
// increase velocity so particle
// accelerates off screen
this.vx *= 0.99;
this.vy *= 0.99;
// adding this negative amount to the
// y velocity exerts an upward pull on
// the particle, as if drawn to the
// surface
this.vy -= 0.25;
// offscreen
if (this.y < 0) {
this.remove = true;
}
};
this.render = function() {
POP.Draw.circle(this.x, this.y, this.r, this.col);
};
};