Home Posts filed under HTML
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Sabtu, 11 Maret 2017

Cara Membuat Judul Posting Berhuruf Kapital Pada Blogger (3 Baris Kode)


Judul posting blog nolmalnya sesuai dengan saat kita menulis post. Tapi, kadang template yang kita pakai menggunakan pengaturan CSS agar teks judul tampil dalam bentuk khusus, misalnya uppercase(kapital), lowercase(non-kapital) ataupun capitalize(kapital tiap awal kata).


  • Ini judul posting normal (none)
  • INI JUDUL POSTING UPPERCASE (uppercase)
  • ini judul posting lowercase (lowercase)
  • Ini Judul Posting Capitalize (capitalize)

Jika kita mau, kita bisa mengubah judul posting menjadi UPPERCASE hanya dengan 3 baris kode CSS, atau bisa juga ke salah satu bentuk di atas. Caranya mudah, cukup paste kode berikut, tepat di atas </head>. Buka dulu pengaturan template Blogger, pilih edit HTML, lalu temukan kode </head>.

<style>
.post-title {text-transform: uppercase !important;}
</style>

Penting untuk menambahkan kode !important pada atribut set CSS di atas. Ini berguna untuk meng-override pengaturan bawaan template yang sedang digunakan. Dengan !important, artinya kita memaksa pengaturan ini sebagai pengaturan yang penting disamping adanya pengaturan lain.

Sebenarnya bisa juga pengaturan ini bekerja dengan normal tanpa kode tersebut, namun untuk berjaga-jaga, kode ini sengaja di taruh di urutan paling bawah (di atas </body>). Hal ini karena pengaturan yang valid adalah pengaturan yang paling terakhir terbaca oleh engine web browser. Kalaupun di pengaturan lain sudah ada yang memberlakukan catatan !important dengan bentuk teks lain, yang berlaku tetaplah yang ada di bagian terakhir.

O iya, jika ingin style judul postingan selain uppercase, silahkan ubah kode uppercase pada baris kode di atas sendiri. Berikut rekomendasi pilihan yang valid untuk text-transform:

  • uppercase
  • lowercase
  • capitalize
  • none

OK, selamat mencoba.
Read more

Kamis, 16 Februari 2017

Fade In Dan Fade Out Tanpa JQuery (Pure JavaScript)


Kali ini kita akan membahas mengenai cara fade in dan fade out elemen HTML. Selalu ada alasan untuk lebih suka menulis kode sendiri daripada menggunakan Javascript. Apalagi jika kamu lebih mementingkan kecepatan load web, merancang kode sendiri akan dapat meminimalkan kode-kode script yang tidak diperlukan. Ini tentu saja akan berimbas pada peningkatan kecepatan load web.

Fade in dan fade out adalah salah satu fitur JQuery yang membantu memberikan gaya estetika unik pada sebuah elemen. Jika memakai JQuery hanya untuk mengakses fitur ini, saya rasa ini adalah keputusan yang tidak tepat. Kenapa harus menggunakan JQuery, jika kode fade in dan fade out bisa ditulis dalam beberapa baris kode saja.

function fadeOut(elem,dec){
 elem.style.opacity = 1;

 (function fade_out() {
  if ((elem.style.opacity = parseFloat(elem.style.opacity) - dec) > 0) {
   requestAnimationFrame(fade_out);
  }
 })();
}

// fade in
function fadeIn(elem,inc){
 elem.style.opacity = 0;

 (function fade_in() {
  if ((elem.style.opacity = parseFloat(elem.style.opacity) + inc) < 1) {
   requestAnimationFrame(fade_in);
  }
 })();
}

Dulu, fade in dan fade out bisa diimpleentasikan dengan timer ( setInterval() ), kali ini HTML5 memiliki standar baru yang diciptakan khusus untuk menangani pergerakan objek semacam animasi, yaitu dengan requestAnimationFrame(). Pada dasarnya fungsi ini mirip seperti thread yang dapat berjalan secara loop untuk memperbarui gambar seiring berjalannya waktu.

Dengan API ini, membuat elemen beranimasi jauh lebih mudah daripada harus menggunakan interval timer.

<html>
<head>
<script type='text/javascript'>
//fade out
function fadeOut(elem,dec){
 elem.style.opacity = 1;

 (function fade_out() {
  if ((elem.style.opacity = parseFloat(elem.style.opacity) - dec) > 0) {
   requestAnimationFrame(fade_out);
  }
 })();
}

// fade in
function fadeIn(elem,inc){
 elem.style.opacity = 0;

 (function fade_in() {
  if ((elem.style.opacity = parseFloat(elem.style.opacity) + inc) < 1) {
   requestAnimationFrame(fade_in);
  }
 })();
}

</script>
</head>
<body>
 <span id='target' onclick='fadeOut(this,0.05);'>TARGET</span>
</body>
</html>

Pada fungsi di atas, parameter inc / dec digunakan sebagai penentu kecepatan perubahan atribut opacity. Semakin besar, semakin cepat animasi berjalan. Parameter elem, adalah elemen terpilih yang ingin diberi perlakuan. Jika belum tahu, caranya bisa dengan melalui onclick dan memberikan argumen this (konteks dari objek yang sedang di-klik). Cara lainnya, bisa menggunakan bantuan document.getElementById() atau metode semacamnya.

DEMO
KLIK SAYA

Semoga bermanfaat...
Read more

Kamis, 02 Februari 2017

5 Game Engine HTML5 Paling Populer

Berkembangnya internet membawa angin segar untuk perkembangan web game. Ini juga diikuti dengan meningkatnya spesifikasi teknologi internet yang diterapkan oleh standar W3C. HTML5 dianggap sebagai teknologi web paling mutakhir saat ini. Ia memungkinkan kita untuk mengembangkan game berbasis web dengan lebih mudah.


Tidak heran pula, saat ini banyak bermunculan game engine yang juga tidak lupa memberikan support pada platform berbasis HTML5. Bahkan, banyak diantaranya telah berdedikasi untuk fokus ke teknologi HTML5 saja. Kira-kira, game engine apa sajakah yang populer untuk mengembangkan web game?

Simak penjelasan 5 besar berikut ini.

1. Construct 2
Anda sekarang dapat membuat permainan canggih tanpa harus menulis kode. Construct 2 menggunakan mekanisme event-driven yang dirancang sedemikian rupa, membuat pengembangan permainan Anda terasa lebih cepat dan mudah.

Program ini dapat diperoleh dengan lisensi gratis (terbatas), ataupun Personal ($119) dan Bisnis ($399). Lisensi gratis patut dicoba sebelum anda memutuskan untuk memilih Construct 2 sebagai game engine anda.


2. ImpactJS
ImpactJS adalah game engine berbasis JavaScript yang memungkinkan Anda untuk mengembangkan game HTML5 yang dapat berjalan pada desktop dan juga mobile browser.

ImpactJS dapat berjalan pada semua browser yang mampu HTML5: Firefox, Chrome, Safari, Opera dan bahkan Internet Explorer 9. Engine ini juga sudah terbukti berjalan dengan baik di iPhone, iPod Touch dan iPad. Dengan semua kelebihan ini, lisensi ImpactJS dibandrol dengan harga $99.

3. EaselJS
EaselJS menyusun seluruh elemen secara bertingkat, sehingga memungkinkan Anda untuk bekerja dengan seluruh elemen pada kanvas sebagai objek hierarkial. Tersedia pula kerangka sederhana untuk menangani interaksi mouse pada tiap elemen tersebut.


Engine ini adalah pilihan yang tepat jika Anda datang dari latar belakang Flash / AS3, karena EaselJS banyak terinspirasi oleh Flash. Hadir dengan lisensi MIT, sehingga anda dapat menggunakannya secara gratis untuk keperluan personal ataupun komersial. Fitur-fitur yang bisa diperoleh antara lain:
  • Rich HTML5 Content
  • Canvas Display Objects
  • Object Nesting
  • Mouse Interaction Model
  • Familiar Approach for Devs
4. Phaser
Phaser adalah salah satu game framework open source untuk platorm HTML5. Diimplementasikan dengan Pixi.js untuk mendukung WebGL dan Canvas rendering, serta mendukung browser desktop ataupun mobile. Permainan yang dibuat denga Phaser juga dapat dikompilasi untuk iOS, Android dan aplikasi desktop.

Ribuan pengembang di seluruh dunia menggunakan Phaser. Mulai dari personal dan lembaga digital multi-nasional, hingga ke sekolah-sekolah dan universitas. Meskipun terbilang engine baru, Phaser telah banyak dikenal karena kepopulerannya. Bahkan saat ini terbilang ada 7000+ pengembang game yang berlangganan newsletter dari Phaser.

5. Pixi.js
Pixi.js adalah render library untuk HTML5 yang akan memungkinkan Anda membuat aplikasi grafis interaktif lintas platform, serta menciptakan game anda sendiri tanpa harus mempelajari sulitnya WebGL API dan berurusan dengan kompatibilitas perangkat browser.


Pixi.js memiliki dukungan WebGL penuh dan secara otomatis akan menggunakan kanvas HTML5 jika diperlukan. Komponen Pixi renderer memungkinkan setiap orang untuk menikmati kekuatan akselerasi hardware tanpa pengetahuan WebGL. Sebagai platform, Pixi.js adalah alat yang cukup hebat dan menyenangkan untuk membuat konten interaktif, terutama bagi yang pernah belajar Adobe Flash dalam beberapa tahun terakhir.

Read more

Rabu, 01 Februari 2017

Belajar Node.js Dan Socket.io Part 3 : Komunikasi Client Dan Server Sederhana Dengan Socket.io

Socket.io adalah javascript library yang membantu pembuatan aplikasi web realtime lebih mudah. Dengan Socket.io, jembatan komunikasi antara client dan server dapat terjadi secara bidirectional (dua arah). Artinya, baik client ataupun server dapat berperan sebagai pengirim sekaligus penerima data. Komponen socket.io terdiri atas 2 bagian, yaitu client-side yang berjalan pada browser, dan server-side yang dapat digunakan sebagai modul untuk node.js.
API yang disediakan socket.io tidaklah begitu banyak, mempelajarinya pun bukan lagi perkara yang sulit. Untuk melakukan transaksi data, paling tidak kita cukup mengetahui 2 metode saja; emit() dan on(). Berikut cuplikan lengkap beserta penjelasannya.

Server
var http = require('http');
var app = http.createServer(function(request, response) {
.....
});

 var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
    socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});

 app.listen(3000);


Method emit digunakan untuk mengirim pesan ke dari server ke client ataupun sebaliknya.
Prototype:
.emit(name [, …]);

Paling tidak ada 1 argumen yang digunakan sebagai parameter untuk metod ini, yaitu argumen event name. Argumen ini berperan sebagai indentifier ketika data telah sampai ditujuan. Kita juga dapat menambahkan argumen lain jika diperlukan. Tipenya bebas, dapat berupa nilai integer, pecahan, string ataupun objek.

Ketika data telah sampai ditujuan, client/server dapat menerimanya dengan method on(). Saat argumennya sesuai, maka data yang telah diterima akan segera diproses oleh fungsi handler yang sudah dibuat.
Prototype:
.on (name, handler);

 function handler(data){
    ....
}

Agar lebih jelas, coba lihat cuplikan kode client-side nya sebagai berikut.

Client
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});

 socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>


Untuk melakukan komunikasi dengan server, pertama tama kita harus membuat objek socket.io.
socket = io();

Objek inilah yang akan digunakan sebagai handle dalam mengirim dan menerima data dari/ke server. Metodenya masih sama dengan yang digunakan pada kode server-side, yaitu memakai .emit() untuk mengirim dan .on() untuk menerima.



Full Source Code
index.js (Server)
var url = require('url');
var http = require('http');
var fs = require('fs');
var path = require("path");

 var app = http.createServer(function(request, response) {
var uri;

uri = url.parse(request.url).pathname;
if (uri == '/') uri += 'index.html';
uri = path.join(__dirname,uri);

data = fs.readFile(uri, function(err,data){
if(err){
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
return;
} else {
response.writeHead(200, {"Content-Type": 'text/html'});
response.write(data);
response.end()
console.log("Request OK");
}
});
});

 var io = require('socket.io').listen(app);
io.on('connection', function(socket) {
    socket.on('pesan', function(data){
console.log("Client mengirim pesan: " + data);
});
socket.on('jumlah', function(data){
var hasil = data.a + data.b;
socket.emit("hasil", hasil);
});
socket.on('disconnect', function(){
console.log("Client disconnected");
});
});

 app.listen(3000);

index.html (Client)
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script type='text/javascript'>
socket = io();
socket.emit("pesan","Hello world");
socket.emit("jumlah",{a:5,b:7});

socket.on('hasil', function(data) {
alert("Server mengirim 'hasil' = " + data);
});
</script>
</head>
<body>
.....
</body>
</html>

Sip, sudah. Kodenya cukup singkat, bukan? Kodenya sengaja saya buat bervariasi dengan baris kode seminimal mungkin, agar lebih mudah dipahami. Untuk contoh lainnya, silahkan kunjungi link berikut:
http://socket.io/docs/

Jika masih ada yang bingung, atau ada pertanyaan yang mengganjal, jangan sungkan untuk bertanya, ya.
Read more

Selasa, 31 Januari 2017

Membuat Game HTML5 : Cara Kerja Multi-Player Game (Komunikasi Antara Client Dan Server)


Awalnya terasa terheran ketika melihat semua komputer dapat melihat wajah tampilan yang sama. Padahal, pemainnya ada puluhan sampai ratusan! Bagaimana bisa server melayani klien sebanyak itu dengan biaya pribadi?

Baru-baru ini saya paham, ternyata bayangan mekanisme komunikasi antara klien dan server pada game multiplayer salah tergambar di otak saya. Jadi, bagaimana sebenarnya mekanisme komunikasi antara server dan para kliennya?

Awalnya saya pikir gambar yang muncul di monitor adalah gambar yang sudah diproses di server, lalu dikirim ke kita. Padahal, sebenarnya semua gambar tersebut diproses langsung oleh komputer kita masing-masing. Biar lebih jelas, kita mulai dengan melihat ilustrasi mulai dari awal kita mengklik tombol start pada game multiplayer.

Semua data pemain berada di server dan juga klien, misalnya nama, koordinat pemain dan beberapa aktivitas yang sedan dilakukan oleh pemain. Namun, server mungkin tidak akan membagikan data spesifik yang bersifat privat bagi tiap pemain.

Ketika pemain datang, data pemain baru tersebut akan ditambahkan ke server. Selanjutnya server mengirimkan data pemain lain yang sedang aktif dan sudah memulai terlebih dulu kepadanya. Tidak sampai disitu, pemain lain juga harus tahu, bahwa ada pemain baru, ya. Jadi, server juga perlu mengirim data pemain baru kepada para klien lama-nya.

Sementara itu, proses kontrol player dan semua event yang terjadi dalam permainan juga akan dibagikan secara menyeluruh.

Server sama sekali tidak memproses gambar apapun. Tugas server di sini hanyalah menyiarkan event yang terjadi oleh setiap player. Misalkan kita menekan tombol DOWN, yang terjadi adalah:
- Update data posisi player
- Kirim pemberitahuan ke server
- Update gambar tampilan
- Server menyebarkan pemberitahuan ke yang lain
- Pemain lain mengupdata data posisi kita di komputer mereka
- Update gambar tampilan mereka

Sampai disini sudah cukup terbayang, bukan?
Yap, bagus. Jika sudah, nanti kita akan mulai belajar membuat game multi-player pertama kita. Eits, tapi mimin selesaikan dulu ya, tutorial Node.js dan Socket.io nya.
Read more

Membuat Game HTML5 : Mengontrol Objek Dengan Keyboard


Javascript benar-benar tidak ada bahasa yang sempurna untuk dikolaborasikan dengan web browser. Meskipun hanya sebatas script, javascript cukup kaya akan fitur yang terintegrasi dengan baik. Keberadaannya sama sekali tidak mengurangi performa eksekusi, namun justru meningkatkan estetika dan kehandalan sebuah halaman web. Salah satu bentuk kesempurnaan ini adalah mekanisme event-driven yang mudah dikustomisasikan.

Saat membuat game, wajib hukumnya untuk mengetahui bagaimana memperoleh event dari keyboard atau mouse, sehingga kita bisa menentukan bagaimana proses kontrol aktor yang terlibat dalam game. Untuk tutorial kali ini, kita akan khusus membahas tentang event keyboard terlebih dahulu.

Sebelum beranjak ke topik utama, kita harus membuat kelas untuk objek yang akan dikontrol. Kita namakan sebagai kelas Player. Bentuknya cukup sederhana, ia hanya berproperti x dan y yang merepresentasikan posisi objek saat ini.

function Player(x,y){
this.x = x;
this.y = y;
}

Kita akan membuat sebuah sample objek Player ketika inisialisasi berlagsung. Contoh ini akan membuat objek player dengan koordinat awal (100,100).

Tidak lupa, sebuah fungsi khusus dibuat untuk me-refresh gambar pada canvas. Fungsi ini akan dieksekusi melalui interval 30ms. Jangan kawatir, nilai ini sudah umum, kok.

var player;
window.onload = function(){
...
player = new Player(100,100);
setInterval(Draw, 30);
};

 function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}

Nah, sekarang saatnya kita menulis kode untuk memproses event dari keyboard. Cara termudah untuk mengontrol aktor dengan keyborad adalah dengan memasang handler window.onkeydown(). Fungsi ini akan dipanggil setiap kita menekan salah satu tombol keybord. Setelah dilepas, browser selanjutnya secara otomatis akan memanggil handler window.onkeyup().

Sebuah argumen berupa objek KeyboardEvent akan diberikan ke fungsi handler yang dipanggil. Dalam argumen ini terdapat detail mengenai event yang tengah berlangsung. Properti keyCode dalam argumen tersebut adalah kunci utama dalam mekanisme kontrol yang akan kita lakukan. Nilai ini akan menunjukkan kode representatif posisi tombol keyboard penghasil event.

window.onkeydown = function(evt){
switch (evt.keyCode){
case 37: //tombol panah kiri?
player.x -= 3;
break;
case 38: //tombol panah atas?
player.y -= 3;
break;
case 39: //tombol panah kanan?
player.x += 3;
break;
case 40: //tombol panah bawah?
player.y += 3;
break;
default:
break;
}
};

Jika butuh pencerahan, saya sarankan untuk mengunjungi link berikut:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent



Full code example:
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;
var player;

function Player(x,y){
this.x = x;
this.y = y;
}

window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
player = new Player(100,100);
setInterval(Draw, 30);
};

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

window.onkeydown = function(evt){
switch(evt.keyCode){
case 37:
player.x -= 3;
break;
case 38:
player.y -= 3;
break;
case 39:
player.x += 3;
break;
case 40:
player.y += 3;
break;
default:
break;
}
};

function Draw(){
context.clearRect(0,0,canvas.width,canvas.height);
context.fillRect(player.x,player.y,10,10);
}
</script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>

Masih belum puas dengan tutorial yang satu ini? Tunggu saja postingan selanjutnya yang lebih greget, ya.
Read more

Membuat Game HTML5 : Menyesuaikan Ukuran Canvas Otomatis


Pada umumnya ukuran canvas pada game adalah menyesuaikan ukuran laman browser. Masalahnya ukuran ini akan selalu berbeda dan sewaktu-waktu dapat berubah saat run-time. Padahal, ukuran canvas harus diatur dengan nilai absolut, sesuai dengan ukuran laman browser. Untuk itu, kita harus memasang fungsi callback method window.resize(). Fungsi tersebut akan dieksekusi setiap kali windows berubah ukuran.

Agar tampilan laman responsif, kita sebaiknya juga mengatur beberapa properti dari elemen html dan tag <body>. Dengan pengaturan ini, ukuran body akan selalu menyesuaikan ukuran laman browser.

html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}

Setiap browser mungkin memiliki konfigurasi margin dan padding untuk body yang berbeda-beda. Kita sama sekali tidak membutuhkan properti ini. Dengan mengatur kedua nilai ini menjadi 0, tampilan keseluruhan akan menjadi fullscreen. Saat properti width dan height dari body diatur ke nilai 100%, akan terlihat 2 scrollbar muncul di sisi kiri dan bawah laman browser. Hilangkan dengan memasang properti overflow:hidden.

Setiap window mengalami resize, browser akan mengubah nilai properti innerWidth dan innerHeight. Kedua nilai inilah yang menjadi acuan untuk secara otomatis menyesuaikan ukuran canvas.

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

Terakhir, agar proses resize juga dilakukan otomatis di awal saat inisialisasi, panggil method window.onresize() di bagian inisiaisasi.

window.onload = function(){
...
window.onresize();
...
};

Contoh lengkap source codenya ini, bro.
<html>
<head>
<title>Game HTML5</title>
<style type='text/css'>
html,body {
width:100%;
height:100%;
border:0;
margin:0;
padding:0;
overflow:hidden;
}
canvas {
border:1px solid red;
}
</style>
<script type='text/javascript'>
var canvas;
var context;

window.onload = function(){
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");
window.onresize();
context.fillStyle = "red";
context.fillRect(10,10,20,20);
};

window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

 </script>
</head>
<body>
<canvas id='gameCanvas' width='100%' height='100%'></canvas>
</body>
</html>

Eksperimen apa lagi yang akan kita lakukan selanjutnya?
Tetap update bersama Komputoo!
Read more
Langganan: Postingan (Atom)