Pengertian dan Jenis- Jenis Jaringan Wireless

1 Wireless Local Area Networks (WLAN) 

WLAN memungkinkan pengguna di daerah, seperti di universitas atau perpustakaan untuk membentuk jaringan dan mendapatkan akses nirkabel ke internet. Sebuah jaringan sementara dapat dibentuk oleh sejumlah kecil pengguna tanpa perlu jalur akses; mengingat bahwa mereka tidak perlu mengakses sumber daya.



2 Jaringan Personal Area Wireless (WPANS) 

Ada dua teknologi saat ini untuk jaringan pribadi nirkabel Bluetooth dan Infra Red. Teknologi ini akan memungkinkan konektivitas perangkat pribadi dalam area seluas 30 meter. Infra Red memerlukan sambungan langsung dan jangkauan kurang dibandingkan dengan teknologi Bluetooth.



3 Area Networks Wireless Metropolitan (WMANS) 

WMANS memungkinkan konektivitas dari beberapa jaringan di daerah metropolitan seperti bangunan di kota. Konektivitas jaringan alternatif tembaga atau serat kabel.



4. Wireless Wide Area Networks (WWAN)

WWAN atau Wireless Area Network dapat dipertahankan di daerah yang luas seperti di kota-kota yang berbeda atau antara negara yang berbeda, melalui sistem satelit beberapa atau situs antena. Jenis-jenis sistem yang disebut sistem 2G. 
Tabel berikut menunjukkan kisaran jenis-jenis yang berbeda dari selimut jaringan nirkabel. 
jaringan meter 
Personal Area Network 0 - 10 
Local Area Network 0-100 
Lebar Are Jaringan 0-10000 
Keamanan di Jaringan Wireless 
Berikut ini jenis metode keamanan yang tersedia di jaringan nirkabel.

5. Wired Equivalent Privacy (WEP) 

Wired Equivalent Privacy dimaksudkan untuk menghentikan gangguan frekuensi radio yang ditandai oleh pengguna yang tidak sah dan ini ukuran keamanan yang paling cocok untuk jaringan kecil. Tidak ada protokol manajemen kunci dan setiap tombol yang dimasukkan secara manual ke klien itu sebabnya ini sangat memakan waktu tugas administrasi. Metode keamanan WEP didasarkan pada algoritma enkripsi RC4. Dalam WEP semua komputer klien dan titik akses dikonfigurasi dengan enkripsi dan dekripsi kunci yang sama. 


Service Set Identifier (SSID) 

Service Set Identifier (SSID) bertindak password sederhana dengan memungkinkan jaringan WLAN yang akan dibagi menjadi jaringan yang berbeda dan masing-masing memiliki identifikasi unik. Pengidentifikasi ini dikonfigurasi dalam beberapa jalur akses. Untuk mengakses jaringan apapun, komputer dikonfigurasi sedemikian rupa bahwa masing-masing memiliki pengenal SSID yang sesuai untuk jaringan tersebut. Jika pertandingan SSID antara dua komputer atau jaringan maka akses diberikan satu sama lain. 



Media Access Control filtering (MAC Access Control) 

Sebuah daftar alamat MAC dari komputer klien dapat diinput ke titik akses dan hanya komputer tersebut diberikan untuk memberikan akses ke jaringan. Ketika komputer membuat permintaan, alamat MAC dibandingkan dengan daftar alamat MAC ke titik akses dan berdasarkan ini izin akses yang diberikan untuk menolak. 
Ini adalah metode keamanan yang baik tapi terutama terlibat dalam jaringan nirkabel kecil karena ada pekerjaan manual lebih terlibat memasuki alamat MAC ke titik akses. 



Bluetooth 

Bluetooth adalah jenis sederhana dari jaringan nirkabel yang beroperasi di perangkat digital, seperti telepon ponsel, komputer pribadi, PDA, laptop, kamera digital, MP3 player dan perangkat berkemampuan Bluetooth lainnya untuk membentuk jaringan kecil. Dalam teknologi Bluetooth delapan perangkat dapat terhubung satu sama lain pada waktu yang sama. Bluetooth juga dapat ditemukan di headset, hands-free kit, keyboard dan mouse nirkabel. Teknologi Bluetooth diciptakan oleh Ericsson pada tahun 1994 dan setelah empat tahun pada tahun 1998 beberapa perusahaan ponsel besar seperti Nokia, Ericsson, Intel dan Toshiba membentuk sebuah kelompok untuk mempromosikan teknologi ini. 

Teknologi Bluetooth jatuh dalam kategori personal area jaringan karena beroperasi dalam kisaran 30 sampai 300 kaki. Bluetooth menggunakan teknologi gelombang radio, yang tidak terlalu mahal dan memiliki konsumsi daya yang rendah. Banyak perusahaan yang berbeda dimaksudkan untuk menambahkan chip Bluetooth di perangkat digital mereka. Teknologi Bluetooth semakin sangat populer karena biaya dan portabilitas rendah. 



Masa Depan Jaringan Nirkabel 

WLAN Jenis jaringan nirkabel sangat populer di jaringan rumah dan lebih dari 20 rumah persen dengan internet broadband menggunakan WLAN dan jumlah ini meningkat. Dalam perkiraan umum hotspot di seluruh dunia kini telah mencapai lebih dari 30.000 dan akan tumbuh sekitar 210.000 dalam beberapa tahun ke depan. Sebagian besar hotel besar sudah menawarkan Wi-Fi dan pelancong bisnis bersedia membayar akses nirkabel. 802.11 adalah standar kecepatan Wi-Fi berikutnya diatur untuk menawarkan bandwidth sekitar 108Mbps dan masih dalam pengembangan. Dengan kecepatan 70 Mbps dan jangkauan hingga 30 mil, 80216 standar, yang dikenal sebagai WiMAX pasti untuk mendapatkan dorongan. 

• Tips & Trik 

• Ketika membeli kartu NIC mencoba nirkabel untuk mendapatkan satu yang memiliki antena eksternal. Ketika Anda berada di luar dan menggunakan Wi-Fi diaktifkan laptop, menonaktifkan Microsoft berbagi file dan, yang memungkinkan komputer lain dalam jaringan untuk mengakses data dan sumber daya pada komputer Anda. Dengan cara ini, komputer atau laptop akan diselamatkan dari hacker. 
• Jika Anda khawatir tentang gangguan dari titik akses nirkabel lainnya mengatur AP dan komputer nirkabel menggunakan saluran yang tidak tumpang tindih. 
• Ubah password antarmuka konfigurasi jalur akses sebelum Anda mengaktifkannya. 
• Hanya membeli jalur akses yang memiliki kemampuan upgradeable. Dengan cara ini Anda dapat mengambil keuntungan dari peningkatan keamanan. 

• Jauhkan jalur akses up to date.

mengenal macam macam topologi pada jaringan komputer

Topologi Bus 

Topologi Bus menggunakan Backbone untuk menghubungkan semua perangkat jaringan dalam jaringan dalam bentuk linear. Sebuah kabel tunggal berfungsi sebagai media komunikasi bersama untuk semua perangkat terpasang dengan kabel ini dengan konektor antarmuka. Perangkat, yang ingin berkomunikasi mengirim pesan broadcast ke semua perangkat yang terpasang dengan kabel bersama tetapi hanya penerima yang dituju benar-benar menerima dan memproses pesan itu.



Topologi Bus ethernet mudah untuk menginstal dan tidak memerlukan banyak kabel dan hanya berbagi utama kabel digunakan untuk komunikasi jaringan. 10Base-2 dan 10BaseT adalah dua jenis populer kabel Ethernet yang digunakan dalam topologi Bus. Juga, jaringan Bus bekerja dengan perangkat sangat terbatas. Masalah kinerja yang mungkin terjadi dalam topologi Bus jika lebih dari komputer 12-15 ditambahkan dalam Jaringan Bus. Selain itu, jika kabel Backbone gagal maka semua jaringan menjadi sia-sia dan tidak ada komunikasi gagal di antara semua komputer. Tidak seperti dalam topologi di mana jika satu komputer yang terlepas dari jaringan maka tidak ada efek pada komputer lain dalam jaringan.



Topologi Ring 

Dalam cincin jaringan, setiap komputer atau perangkat memiliki dua tetangga yang berdekatan untuk komunikasi. Dalam sebuah jaringan cincin, semua pesan komunikasi dalam direktori yang sama apakah searah atau anti searah jarum jam. Kerusakan kabel dari setiap kabel atau perangkat dapat mengakibatkan hancurnya seluruh jaringan. Topologi ring sekarang telah menjadi hampir usang.
FDDI, SONET atau Token Teknologi Cincin dapat digunakan untuk mengimplementasikan Teknologi Cincin. Topologi Ring dapat ditemukan di kantor, sekolah atau bangunan kecil.



Topologi Star 

Dalam dunia jaringan komputer topologi yang paling umum digunakan dalam LAN adalah topologi star. Topologi star dapat diimplementasikan dalam rumah, kantor atau bahkan di sebuah gedung. Semua komputer dalam topologi Star yang terhubung ke perangkat pusat seperti hub, switch atau router. Fungsi semua perangkat ini berbeda. Saya telah membahas detail dari setiap perangkat jaringan di bagian terpisah dari website saya. Komputer dalam jaringan biasanya dihubungkan dengan hub, switch atau router dengan Unshielded Twisted Pair (UTP) atau Terlindung Kabel Twisted Pair.

Dibandingkan dengan topologi bus, jaringan bintang membutuhkan lebih banyak perangkat & kabel untuk menyelesaikan anetwork. Kegagalan setiap node atau kabel dalam jaringan bintang, tidak akan menurunkan seluruh jaringan

dibandingkan dengan topologi Bus.

Namun jika menghubungkan perangkat pusat seperti hub, switch atau router gagal karena alasan apapun, maka pada akhirnya semua jaringan dapat turun atau runtuh.


Tree Topologi 

Tree topologi terdiri dari beberapa topologi Star di bus. Tree topologi mengintegrasikan beberapa topologi star bersama-sama ke bus. Hanya perangkat hub dapat menghubungkan langsung dengan bus tree dan masing-masing fungsi Hub sebagai akar pohon dari perangkat jaringan. Kombinasi bus / star / hybrid ini mendukung upgrade masa depan jaringan komputer, jauh lebih baik daripada bus atau bintang.



Mesh Topologi 

Mesh topologi bekerja pada konsep rute. Dalam topologi Mesh, pesan yang dikirim ke tujuan dapat mengambil setiap kemungkinan terpendek, rute termudah untuk mencapai tujuan. Dalam bintang topologi sebelumnya dan bus, pesan biasanya disiarkan ke setiap komputer, terutama dalam topologi bus. Demikian pula dalam pesan topologi Cincin dapat melakukan perjalanan hanya satu arah yaitu searah jarum jam atau berlawanan arah jarum jam. Internet mempekerjakan topologi Mesh dan pesan rute untuk menemukan tujuan. Router bekerja di menemukan rute untuk pesan dan menjangkau mereka untuk topologi destinations.The mereka di mana setiap perangkat terhubung ke setiap perangkat lain disebut Mesh topologi penuh tidak seperti di mesh parsial di mana setiap perangkat secara tidak langsung terhubung ke perangkat lain .



catatan 

Topologi adalah bagian penting dari teori desain jaringan. Sebuah jaringan yang lebih baik dapat dibangun jika Anda memiliki pengetahuan tentang topologi ini dan jika Anda tahu perbedaan antara masing-masing topologi.

Pindah posisi gambar Menggunakan JavaScript

Dalam posting ini kita akan belajar bagaimana kita dapat memindahkan gambar di sekitar menggunakan JavaScript. Kami akan memiliki empat link kontrol (Kiri, Kanan, Atas, Bawah) yang akan memindahkan gambar.

Membaca bersama Anda akan belajar:

     Apa posisi absolut dan relatif yang dapat dilakukan
     Bagaimana beberapa fungsi JavaScript dapat dipanggil secara otomatis di buka halaman
     Bagaimana JavaScript dapat digunakan untuk memanipulasi "gaya" sifat-sifat unsur
     Bagaimana JavaScript dapat digunakan untuk mengubah sifat ini

Oke, sekarang mari kita mulai!
TEORI

Kita akan memiliki unsur-unsur berikut di halaman:

     Sebuah wadah (div)
     sebuah gambar
     kontrol Link

kontainer

Wadah akan ditata untuk memiliki ukuran 500px 300px oleh. Ini akan memiliki position: relative yang membuat apa pun di dalam untuk diposisikan sehubungan dengan wadah ini. Ini dilakukan untuk melakukan langkah citra independen dari penempatan wadah. Kami juga akan membuat meluap dari wadah untuk menjadi "tersembunyi".
gambar
 
Gambar akan diberikan position: absolute yang berarti dapat diposisikan dengan absolut (kiri (x), atas (y)) nilai-nilai. Gambar Biasanya (seperti unsur-unsur lain) diposisikan, selaras, dibungkus sesuai dengan unsur-unsur lainnya. Posisi mutlak Namun, memberi kita kekuatan untuk menempatkan gambar (atau elemen lain) secara bebas.
kontrol Links

Kontrol Link akan digunakan untuk menjalankan fungsi-fungsi untuk memindahkan gambar dalam arah masing-masing.
Lain-lain.

Fungsi yang disebut dengan link Kontrol akan memanipulasi posisi gambar menggunakan salah document.getElementById () function.

Fungsi ini digunakan untuk referensi elemen dalam dokumen unik dengan menggunakan ID mereka (yang seharusnya unik untuk setiap elemen). Sifat gaya elemen yang direferensikan sebagai:


document.getElementById(<ID>).style.<STYLE-NAME>

Kami akan menggunakan aktivitas onload dari elemen body untuk memohon Init () fungsi awalnya pada buka halaman.
 <body onload="javascript:Init()">

CARA KERJA

Saat kemudian halaman, fungsi Init () semakin disebut yang menetapkan posisi awal gambar.

Ketika link diklik kontrol, masing-masing koordinat (x atau y) dimodifikasi dan nilai baru diatur dalam baris berikut:


document.getElementById('img1').style.left = x + 'px';
document.getElementById('img1').style.top = y + 'px';


kode : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript: Moving an Image</title>
<script type="application/ecmascript">

// --CHANGE THESE IF REQUIRED--
// Initial x-position of image
var x = 200;
// Initial y-position of image
var y =100;
// Pixels to move in each step
var inc = 10;

function Init()
{
   document.getElementById('img1').style.left = x + 'px';
   document.getElementById('img1').style.top = y + 'px';
}
function moveRight()
{
   x += inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveLeft()
{
   x -= inc;

   document.getElementById('img1').style.left = x + 'px';
}

function moveUp()
{
   y -= inc;

   document.getElementById('img1').style.top = y + 'px';
}

function moveDown()
{
   y += inc;

   document.getElementById('img1').style.top = y + 'px';
}
</script>


<style>
#box
{
   width: 500px;
   height: 300px;
   position: relative;
   margin: 20px auto 0px auto;
   border: 5px outset #000;
   overflow: hidden;
}

.image
{
   position: absolute;
   z-index: 100;
}
</style>
</head>

<body onload="javascript:Init()">
<div id="box"><img class="image" id="img1" src="ball.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>

CATATAN: Sebuah gambar dengan nama "ball.png" harus ada di direktori yang sama dengan file ini untuk kode di atas untuk bekerja "apa adanya".

MERANCANG GAME SEDERHANA DI JAVA SCRIPT

Memiliki pengetahuan tentang gambar bergerak menggunakan JavaScript, kita akan membuat sebuah permainan kecil Ping Pong sebagai contoh untuk posting ini.

Hari ini kita akan belajar untuk melakukan beberapa hal baru dalam JavaScript:

1 Pelaksana beberapa kode setiap interval waktu tertentu (untuk permainan lingkaran).
2 Pelacakan dan menggunakan gerakan mouse.
3 Melampirkan kode (fungsi) untuk acara.

Teori Permainan

Seperti yang Anda harus tahu, dalam game ini ada satu bola dan dua dayung di kedua ujung. Salah satunya adalah yang dikendalikan oleh pengguna lain, untuk contoh ini, adalah CPU dikontrol. Pengguna harus memindah pemukul agar tidak membiarkan bola melewati, CPU juga harus melakukan hal yang sama. Siapa pun yang sisi bola melewati kehilangan permainan.

Ada beberapa objek yang dapat berinteraksi satu sama lain, ini adalah bola, dayung, dinding. Mari kita lihat berbagai interaksi yang dapat terjadi antara:

     Bola Menekan Atas / Bawah Wall - Bola akan terpental.

     Bola Melewati Entah Side - Player atau CPU, tergantung pada yang timnya bola melewati, akan kehilangan permainan.

     Bola Menekan Paddle - Ini akan terpental

Kita harus mengurus peristiwa ini:

     Halaman Load - benda game akan diinisialisasi

     Permainan Start - mouse klik pada dayung pemain akan memulai permainan.

     Mutasi Mouse - Di dalam area permainan (div), dayung akan mengikuti y-posisi mouse. Paddle namun tidak boleh melewati batas.

     CPU Paddle - Dayung akan mengikuti bola dengan bergerak naik / turun tergantung posisi relatif bola. Kami telah menambahkan sedikit kecerdasan dengan hanya menggerakkan dayung sementara bola datang ke arah itu. Ini akan membuat gerakan serta permainan terlihat lebih nyata.

kode

CATATAN: Masukkan dua file ball_small.png, paddle.png (Klik kanan "Save As") di direktori yang sama script dalam. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pong Game In JavaScript</title>

<style>
#box
{
   width: 500px;
   height: 300px;
   margin: auto;
   border: 5px solid #ccc;
   position: relative;
   overflow: hidden;
}

.ob
{
   position: absolute;
   border: 0px;
}
</style>
<script type="application/javascript">

// CHANGE THESE, IF REQUIRED
var Speed = 5; // Speed of ball (pixels/step)
var CPUSpeed = 5; // Speed of CPU Paddle (pixels/step)

// Short references to objects
var paddle1;
var paddle2;
var ball;
var box;
var msg;


// For internal use
var dx, dy; // Speed in x and y directions
var ballX, ballY; // x and y positions of ball
var playerY; // y position of player paddle (x fixed)

var cpuY; // y position of CPU paddle (x fixed)
var iID; // To store ID of set interval used to clear it when required

// Attach a function to onLoad event
window.onload = Init;

// INITIALIZE GAME OBJECTS
function Init()
{
   // Make short refrences to objects

   paddle1 = document.getElementById('paddle1');
   paddle2 = document.getElementById('paddle2');
   ball = document.getElementById('ball');
   box = document.getElementById('box');
   msg = document.getElementById('msg');

   // Initial values
   ballX = (box.offsetWidth / 2) - (ball.offsetWidth / 2);
   ballY = (box.offsetHeight / 2) - (ball.offsetHeight / 2);
   cpuY = (box.offsetHeight / 2) - (paddle2.offsetHeight / 2);
   playerY = (box.offsetHeight / 2) - (paddle1.offsetHeight / 2);
   dx = dy = Speed;

   paddle1.style.left = 20 + 'px';
   paddle1.style.top = playerY + 'px';
   paddle2.style.left = box.offsetWidth - (20 + paddle2.offsetWidth) + 'px';
   paddle2.style.top = cpuY + 'px';
   ball.style.left = ballX + 'px';
   ball.style.top = ballY + 'px';

   // Show message

   msg.innerHTML = '<h2>Click on Paddle to Start Game.</h2>';
}

// START GAME
function Start()
{
   // Attach a function to onmousemove event of the box
   box.onmousemove = MovePaddle;
   // Call 'GameLoop()' function every 10 milliseconds

   iID = setInterval('GameLoop()', 10);

   msg.innerHTML = '';
}

// MAIN GAME LOOP, CALLED REPEATEDLY
function GameLoop()
{
   // MOVE BALL
   ballX += dx;
   ballY += dy;

   // See if ball is past player paddle

   if(ballX < 0)
   {
      clearInterval(iID);
      Init();

      box.onmousemove = '';

      msg.innerHTML = '<h2>You Loose!<br/>Click on Paddle to Re-Start Game.</h2>';
   }

   // See if ball is past CPU paddle

   if((ballX + ball.offsetWidth) > box.offsetWidth)
   {
      clearInterval(iID);
      Init();

      box.onmousemove = '';

      msg.innerHTML = '<h2>You Win!<br/>Click on Paddle to Re-Start Game.</h2>';
   }

   // COLLISION DETECTION

   // If ball hits upper or lower wall
   if(ballY < 0 || ((ballY + ball.offsetHeight) > box.offsetHeight))
      dy = -dy; // Make x direction opposite

   // If ball hits player paddle

   if(ballX < (paddle1.offsetLeft + paddle1.offsetWidth))
      if(((ballY + ball.offsetHeight) > playerY) && ballY < (playerY + paddle1.offsetHeight))
         dx = -dx;

   // If ball hits CPU paddle
   if((ballX + ball.offsetWidth) > paddle2.offsetLeft)
      if(((ballY + ball.offsetHeight) > cpuY) && ballY < (cpuY + paddle2.offsetHeight))
         dx = -dx;

   // Place ball at calculated positions

   ball.style.left = ballX + 'px';
   ball.style.top = ballY + 'px';

   // MOVE CPU PADDLE
   // Move paddle only if ball is coming towards the CPU paddle
   if(dx > 0)
   {
      if((cpuY + (paddle2.offsetHeight / 2)) > (ballY + ball.offsetHeight)) cpuY -= CPUSpeed;
      else cpuY += CPUSpeed;

      paddle2.style.top = cpuY + 'px';
   }
}


// TO MOVE PLAYER PADDLE ON MOUSE MOVE EVENT
function MovePaddle(e)
{
   // Fetch y coordinate of mouse
   var y = (e.clientY - (box.offsetTop - document.documentElement.scrollTop));
   // Here, (box.offsetTop - document.documentElement.scrollTop) will get the relative
   // position of "box" w.r.t to current scroll postion

   // If y below lower boundary (cannot go above upper boundary - 
   // mousemove event only generated when mouse is inside box
   if(y > (box.offsetHeight - paddle1.offsetHeight))
      y = (box.offsetHeight - paddle1.offsetHeight);

   // Copy position
   playerY = y;
   // Set position

   paddle1.style.top = y + 'px';
}
</script>
</head>

<body bgcolor="#fff">
<h1 align="center">Pong Game Example in JavaScript</h1>

<div id="box">
<img class="ob" id="paddle1" src="paddle.PNG" onclick="javascript: Start()"/>

<img class="ob" id="paddle2" src="paddle.PNG" />
<img class="ob" id="ball" src="ball_small.PNG" />

</div>
<div id="msg" align="center"></div>
</body>
</html>

hahahaha... lucu kan..
itu sebagai contoh sobat.. sobat bisa mengedit dan mengembangkannya sendiri..
 

terimaksih.. 

selamat mencoba 

  GOOD LUCK ^_^

Merancang Lightbox Sendiri di Javascript

Bagi Anda yang belum pernah mendengar tentang script atau tidak tahu apa yang mereka lakukan, lihat gambar berikut:

 

Kemungkinannya adalah, Anda mungkin pasti telah melihat di suatu tempat atau yang lain. Script ini umumnya digunakan untuk menampilkan beberapa konten di jenis seperti kotak dialog (moda angkutan satu, bagi anda yang tidak Geeks) sedangkan sisanya dari konten akan menghitam. Tampak hebat? Ya ,

Oke, bagi anda masih di sini saya ingin mengakui bahwa saya tidak menaruh cukup waktu mengetahui bagaimana script tersebut benar-benar bekerja. Saya baru saja mendapat pengetahuan dari blog asing . Ini bukan untuk mengatakan bahwa saya sendiri telah menemukan beberapa cara baru, hanya saja saya tidak tahu bagaimana mereka bekerja skrip tapi aku tahu satu cara yang memberikan hasil yang sama.

Seperti yang Anda lihat dari gambar di atas, tidak ada banyak untuk Lightbox clone sederhana, kami memiliki (1) efek Blackening (2) Kotak konten.

1. Efek Menghitam : Untuk ini saya akan membuat "div" elemen dengan cepat dan mengatur properti sedemikian rupa sehingga memiliki warna hitam dan beberapa transparansi, z-indeks besar berarti mengapung di atas sisa isi dan konten kembali (dengan yang normal z-index) tidak dapat berinteraksi dengan lagi. Kami akan mengisi layar saat ini dengan ini "div" yang akan mengharuskan kita untuk menempatkan elemen ini di paling atas dan paling kiri koordinat relatif terhadap daerah dapat dilihat saat ini. Ini akan menjadi (0, 0) saat halaman tidak sam sekali.

     Kami juga harus ukuran elemen yang memilikinya span seluruh wilayah dapat dilihat dari browser.

     Kedua hal akan memastikan bahwa tidak peduli di mana kami telah menggulir di halaman dan apa pun menjadi ukuran jendela, elemen overlay hitam selalu mencakup viewport saat ini.

 2.  Isi Box: Sebuah kotak baik gaya dengan tombol dekat adalah semua yang kita butuhkan. Kita akan menempatkannya di tengah layar. Karena kita telah menghitung paling atas dan paling kiri koordinat relatif terhadap viewport saat ini dan kami juga memiliki dimensi viewport saat ini, kita dapat dengan mudah posisi ini di pusat, tidak punya otak! Kami akan memberikan ini z-index lebih besar dari hitam elemen overlay tersebut bahwa ini adalah di atas segalanya.

     Selain itu, kami juga harus berhati-hati bahwa kedua elemen ini bergerak bersama dengan halaman dalam kasus pengguna mencoba untuk menggulir halaman ketika lightbox kami terbuka. Ini akan memastikan bahwa (1) elemen overlay hitam selalu mengisi kotak isi layar (2) selalu di pusat. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blackbox - A very simple Lightbox clone</title>

<script type="text/javascript">
/*
 * Script: Blackbox (very simple Lightbox clone)
 * Author: Arvind Gupta (contact@arvindgupta.co.in)
 * Date: 14-Nov-09
 * Copyright: 2009 Arvind Gupta

 *            You may freely use this script wherever
 *         you want and in whatever way you wish
 *         but please don't remove this note.
 *
 */

// OBJECTS 
// Black overlay element
var darkbox;
// Content box
var content;

// FUNCTIONS
function init()
{
   // Set "onScroll" event handler

   window.onscroll = scroll_box;
}

function open()
{
   // Create elements
   darkbox = document.createElement('div');
   content = document.createElement('div');

   // Style them with the existing ids
   darkbox.id = 'darkbox';
   content.id = 'content';

   // FILL CONTENT BOX

   // Have the close button
   content.innerHTML = '<a style="position: absolute; top: -30px; right: -30px; text-decoration: none;" href="javascript:close();"><img style="border: none;" src="fancy_closebox.png" /></a>';
   // The main content

   content.innerHTML += '<div id="main_content"><h1>Hello</h1><p>Hello World!<br /> How is this looking?</p></div>';

   // Add these elements to the body

   document.body.appendChild(darkbox);
   document.body.appendChild(content);

   // Calciulate coordinates and such
   var pos_top = document.documentElement.scrollTop
   var pos_left = document.documentElement.scrollLeft;
   var screen_width = document.documentElement.clientWidth;
   var screen_height = document.documentElement.clientHeight;

   // Place the "darkbox" element and give it the size

   darkbox.style.top = pos_top + 'px';
   darkbox.style.left = pos_left + 'px';
   darkbox.style.height = screen_height + 'px';
   darkbox.style.width = screen_width + 'px';

   // Now place the content box at the center
   content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
   content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
}


function scroll_box ()
{
   // If "Darkbox" open
   if(darkbox != null)
   {
      // Find new topmost, leftmost position w.r.t the current viewport
      // Also find new window size

      var pos_top = document.documentElement.scrollTop
      var pos_left = document.documentElement.scrollLeft;
      var screen_width = document.documentElement.clientWidth;
      var screen_height = document.documentElement.clientHeight;

      // Positions elements accordingly
      darkbox.style.top = pos_top + 'px';
      darkbox.style.left = pos_left + 'px';
      darkbox.style.height = screen_height + 'px';
      darkbox.style.width = screen_width + 'px';

      content.style.left = (pos_left + (screen_width / 2.0) - (content.offsetWidth / 2.0)) + 'px';
      content.style.top = (pos_top + (screen_height / 2.0) - (content.offsetHeight / 2.0)) + 'px';
   }
}


function close()
{
   // Delete elements
   document.body.removeChild(darkbox);
   document.body.removeChild(content);
}
</script>

<style>
#darkbox {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0.6;
   filter:alpha(opacity=60);
   background: #000;
}

#content {
   position: absolute;
   z-index: 1001;
   background: #fff;
   border: 10px solid #000;
   width: 500px;
   height: 300px;
}
#content #main_content {
   overflow: auto;
   width: 500px;
   height: 300px;
}

</style>
</head>

<body onload="init();">
<a href="javascript:open()">Open Box</a>
</body>
</html>

itulah sebagai contoh dari scrip yang tadi
sobat bisa mengedit kata hello word di ganti dengan kata yang sobat inginkan. 

selamat mencoba dan sukses (y) 

BELAJAR TENTANG DASAR-DASAR KOMPUTER

Mudah Belajar Komputer akan membahas tentang komputer mulai dari yang paling dasar. Sebelum pergi ke Tahap lanjut berguna untuk mengetahui komputer dasar pertama. Dalam hal ini pengetahuan dasar yang harus dipelajari tentang pengenalan Hardware dan Software.

• HARDWARE

Perangkat keras komputer dapat dibagi menjadi beberapa bagian:

1.       CPU (Central Processing Unit)
2.       Input Device
3.       Output Devices
4.       storage Device

• CPU (Central Processing Unit)

CPU adalah bagian paling penting dari sebuah komputer. Di dalamnya ada banyak perangkat keras untuk menghubungkan dan proses kerja perangkat input dan mengirim hasilnya ke Output Device. CPU Satuan terdiri dari: papan utama, processor, RAM / Memory, Power Supply, Input / Output Controller, Tampilan Controller, Multimedia Controller, Network Controller.
 

• papan utama (motherboard)

Papan utama berfungsi untuk menempatkan pengendali seluruh perangkat. Termasuk Processor, RAM, Power Supply, I / O Controller, Display Controller dan semua peralatan yang ditempatkan dalam soket yang disediakan oleh papan utama. Produsen papan utama: Asus P5Series, AMPTRON, Compaq, Chip PC, Gigabyte, ECS, Dell, IBM

• Processor

Processor adalah otak dari komputer, seperti otak manusia dalam semua perintah dan hasil perintah di proses oleh Processor. Prosesor adalah chip yang sering disebut "Microprocessor" yang sekarang ukurannya sudah mencapai Gigahertz (GHz). Langkah ini adalah masalah kecepatan prosesor untuk memproses data atau informasi. Bagian dari Prosesor bagian terpenting dari prosesor yang terbagi menjadi tiga: Logical Unit Aritmatika ini (ALU) Control Unit (CU) Memory Unit (MU) Semakin banyak kecepatan dan teknologi prosesor yang lebih tinggi, semakin baik kinerja komputer.
Antarmuka = Socket 370 (P-3)​​, Socket 478 (P-4), Socket A / B (AMD), PGA 778 (Dual Core dan atas) Misalnya, Intel P1, P2, P3, P4, Dual Core, AMD Duron, Athlon, dan lain-lain
Produsen prosesor yang banyak beredar di pasar adalah AMD, Apple, Cyrix VIA, IBM, IDT, dan Intel.

•   RAM / Memori

Program penyimpanan file Random Access Memory dieksekusi oleh fungsi komputer. Semakin besar kapasitas, semakin dekat proses juga. Pengalaman saya dengan sistem Windows XP CPU akan sangat responsif terhadap 02:00 GHz dengan RAM 512MB.
Type / Antarmuka = EDO (tertua), SDRAM, DDR1, DDR2, DDR3 (terbaru, tercepat, termurah)

•    Power Supply

Power Supply berfungsi sebagai sumber daya yang digunakan untuk menggunakan semua alat yang tersedia pada komputer. Rekomendasi Ketika Power Supply untuk komputer Anda adalah salah satu yang memiliki kekuatan besar, keuntungan daya komputer yang lebih baik.
Pin Type: 12 Pin Interface (tipe lama), 20 Pin ATX, ATX 20 Pin + 4 Pin, ATX 24 Pin + 4 Pin (Terbaru)

• I / O Controller

Controller untuk mengelola perangkat yang terhubung ke port I / O (Port Serial, PS2, LPT). Contoh perangkat yang terhubung ke PS2 Mouse, Keyboard P2, Printer LPT.
Interface = ISA, PCI

•      IDE controller dan SCSI controller

Controller adalah untuk mengelola kinerja perangkat yang terhubung ke IDE atau SCSI port. Alat-alat yang digunakan untuk menghubungkan hard drive, floppy disk, CD Rom.
Interface = ISA, PCI

•      Display Controller

Tampilan Pengontrol untuk menghasilkan display ke monitor atau TV. Ada dua jenis yang pertama di kapal, keduanya sering disebut VGA Card. VGA memiliki kapasitas sendiri RAM yang lebih besar, RAM lebih besar maka tampilan di monitor akan lebih halus. VGA Card juga berfungsi untuk mengurangi beban kinerja RAM / Memory pada penggunaan game tertentu 3D, 3D video, dan program yang membutuhkan grafis resolusi tinggi.
Contoh RAM VGA: 16, 32, 64, 128, 224, 256, 512, 1G.
Interface = ISA (Old Type), PCI (Old Type), AGP, PCI-Express (New)
Produsen VGA: Nvidia, S3 Trio, SIS, ATI Rage Series, dll

•      Multimedia Pengontrol

Pengontrol Multimedia untuk memproduksi suara sering disebut Kartu Suara (Sound). Hari ini teknologi Sound Card Teknologi dikembangkan untuk mendukung 3D Surround 5.1 (rata-rata 5 speaker dengan 1 Central sebagai Basis 6 Channel).
Produsen: Realtek, CMedia, ESS, Creative Sound Blaster. Interface = ISA, PCI

•      Network Controller / Network Adapter / LAN Card

Network Controller / Network Adapter / LAN Card digunakan sebagai pelabuhan yang menghubungkan dua atau lebih komputer. Biasanya digunakan untuk Chat, File Transfer, Program Database, akses internet (jika menggunakan modem), Multi Pemain Game, dll
Interface = ISA, PCI 

• INPUT DEVICE

 
Perangkat yang digunakan untuk memasukkan perintah.

•      Keyboard

Alat ini untuk memasukkan karakter ASCII masukan harus diterjemahkan sehingga sistem akan menghasilkan perintah.
Port Interface = Serial / PS2 / USB

•      Mouse

Alat ini adalah perangkat penunjuk (pointer) yang akan membantu untuk mengakses komputer.
Port Interface = Serial / PS2 / USB

•      Scanner

Alat ini akan mengubah gambar nyata menjadi Image File (File Photo)
Port Interface = LPT / USB

•      Joystick

Alat ini sebagai game controller.
Port Interface = LPT / USB 

• Output Devices

 
Bahwa alat bekerja mengeluarkan hasil dari perangkat input perintah.

•      Monitor

Untuk menampilkan hasil CPU.

•      Printer

Sebagai sarana dokumen dicetak. 1. Laser printer, printer ini untuk mencetak dokumen kualitas dokumen pendekatan telah diproses dalam komputer. 2. Printer Ink-jet, printer laser dibandingkan dengan New Media, biaya awal jenis printer lebih efisien. 3. Dot matrix printer, ini menjadi jenis yang paling disukai ON era PC. Dalam hal ini jenis printer, gambar yang dihasilkan oleh koleksi check point yang tersebar jarak pendek sehingga terlihat tidak merata. 4. Plotter, printer menggunakan pena diatur untuk membuat teknik atau arsitektur Dunia Prints terkait.
Produsen: Canon, Epson, HP, Lexmark, Apollo, dll Port Interface = LPT, USB

•      speaker

Sebagai perangkat output suara. Kita juga bisa menggunakan earphone.

• Storage Device

Bahwa alat ini berfungsi sebagai tempat untuk menyimpan data dalam file.

•       Hard Disk

Chasing ditempatkan di dalam CPU, digunakan untuk menyimpan file dalam kapasitas yang sangat besar. Saat ini, kapasitas produksi penyimpanan hard disk telah mencapai lebih dari 512 GB.
1KB = 1024 B
1MB = 1024 KB
1GB = 1024 MB
Sebagai contoh, file dokumen / surat biasanya hanya membutuhkan 200kb, 4MB MP3, Video CD 50MB / lagu, 700MB / CD penuh.
Interface = IDE, SCSI, SATA Produsen: Samsung, Maxtor, Seagate

•      Floppy disk drive

Floppy disk drive adalah penyimpanan tambahan yang dapat dipindahkan - dipindahkan / tidak tetap, termasuk Removable disk. Karena kapasitas hanya 1,44 MB floppy disk sekarang ditinggalkan dan beralih ke flash kapasitas saat ini hingga 8GB, lebih aman dan bebas perawatan.
Antarmuka = floppy antarmuka
Produsen: Panasonic, Samsung

•      CD / DVD Drive

Digunakan sebagai media CD reader (Compact Disk / Disk tile) atau DVD. CD / DVDRW dapat digunakan untuk membaca CD / DVD, dan membakar ke CD / DVD. Kapasitas penyimpanan CD standar 700MB, DVD 1 Layer 4,48 GB, 8.15 GB DVD 2 Layer.
Interface = IDE, SCSI, SATA
Produsen: Samsung, Liteon, LG, Pioneer 

• Perangkat lain (Other Devices)

•      flash Disk

Flash Disk juga termasuk dalam Device Storage, floppy disk fungsi yang sama, namun memiliki kapasitas besar dan bebas perawatan. Pengalaman saya menggunakan floppy disk sangat tidak nyaman dan tidak aman, karena harus dilindungi dari debu, sinar matahari, air, magnet, dll Sebuah kesalahan umum karena tidak terbaca. Kapasitas flash disk dari 512, 1GB, 2GB, 4GB, 8GB dan berkembang.
Interface: USB

•      Bluetooth Adapter

Alat ini mengubah data digital menjadi sinyal radio frekuensi tertentu untuk berhubungan dengan alat-alat lain seperti HP, PC lainnya, Mouse Bluetooth, Speaker Bluetooth, dll
Interface: USB

•       TV Tuner

Alat ini berfungsi untuk mengubah sinyal RF (sinyal TV) menjadi sinyal digital. Dengan tool ini untuk menonton TV di komputer tidak menjadi masalah. Biasanya dilengkapi dengan radio.
Interface: PCI / USB

•      Hard Drive Eksternal

Fungsi dan kapasitas yang sama ke disk / hard drive tetap. Bedanya perangkat ini dapat dibawa kemana-mana, karena termasuk Removable Disk.
Interface: USB 

• SOFTWARE

Software adalah sebuah program, driver perangkat, dan file di komputer. yaitu;

•      Sistem Operasi (OS)

Sistem operasi adalah perangkat lunak yang mengontrol kinerja sistem utama. Dalam menentukan OS untuk mempertimbangkan kompatibilitas (dukungan untuk program-program kepada pihak ketiga, serta dukungan untuk hardware), stabilitas (Sering Kesalahan atau tidak), dan Rentang Harga (OS Windows XP Home Edition untuk biaya dolar hampir 800ribu, Linux menawarkan OS gratis seperti Ubuntu).
Contoh OS, DOS 6.22, Windows 3.11, Windows 95, 97, 98, 2000 Server, XP, 2003, Vista, Linux Mandrage, Ubuntu Linux, Suse Linux, dll

•      Program Aplikasi

Program aplikasi merupakan program tambahan untuk mendukung kinerja komputer. (Harga Software Microsoft Office Word, Excel Akses ke 1,7 juta). Contoh Aplikasi, Office (Word, Excel, dll), Winamp, Power DVD, Pascal, Aplikasi Game, dll

•      Device Driver

Semua hardware yang dijelaskan di atas tidak akan bekerja tanpa Driver Perangkat diinstal dalam Sistem Operasi. Sebagai contoh, printer tidak dapat mencetak tanpa Driver Device. Untuk exsample: Misalkan kita ingin menginstal sebuah kartu TV tuner terpasang di slot PCI. Setelah komputer dihidupkan maka akan ada konfirmasi bahwa perangkat keras baru ditemukan dan kemudian komputer meminta Device Driver untuk hardware baru. Ini bisa berarti bahwa komputer ingin tahu apa nama, fungsi dan cara kerja perangkat keras baru dan meminta identifier roda / dalam bentuk perangkat lunak (biasanya sudah termasuk dalam paket tool). Setelah kami memberikan file driver dalam bentuk perangkat lunak, komputer akan tahu bahwa nama alat ini adalah TV Tuner, Merk A, terpasang pada slot PCI-X, dan sebagainya. Namun, sistem operasi telah dilengkapi dengan banyak driver hardware-hardware yang sering digunakan dalam PC. Jika kita menempatkan alat baru untuk komputer maka alat ini siap digunakan, hal itu disebut Alat Kompatibel. Tetap update driver sehingga kita bisa bekerja secara optimal. Misalnya, flash, LX-300 Printer, Monitor.