Family Of Locos

Selasa, 19 April 2011

Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi

Membuat HTML yang Standard untuk Menu

Pada artikel sebelumnya saya sudah mengajari bagaimana membuat menu yang baik, kita akan menggunakan konsep yang sama, karena memang teknik tersebutlah yang dianjurkan untuk membuat menu. Jadi kita menggunakan tag HTML `<ul>` dan `<li>`. Oke anda pasti sudah tahu mengenai tag HTML ini, langsung saja kita buat kode HTMLnya terlebih dahulu:

KODE PROGRAM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Contoh Horizontal Menu</title>
</head>
<body>
<h1>Contoh Horizontal Menu</h1>
<ul id="topmenu">
<li><a href="#" class="replace" id="menu_1" title="Home"><span></span>Home</a></li>
<li><a href="#" id="menu_2" title="Artikel"><span></span>Artikel</a></li>
<li><a href="#" id="menu_3" title="About Me"><span></span>About Me</a></li>
</ul>
<div id="container">
<p>Baca artikel tentang <a href="http://www.dhimasronggobramantyo.com/artikel/Membuat_Horizontal_Menu_dengan_CSS,_Images_Sprites_dan_Animasi">Membuat Horizontal Menu</a> untuk mengetahui cara membuat menu seperti ini.</p>
</div>
</body>
</html>

Sudah terlihat kan bentuk menunya, ya masih biasa karena kita belum menstyle nya dengan CSS. Oke jika anda perhatikan untuk tiap menu (<li>) memiliki id yang berbeda-beda. Kenapa? karena setiap menu panjang imagenya berbeda, maka CSS nya juga berbeda-beda untuk tiap menunya. Sebelum kita mulai membuat CSS nya silahkan anda save gambar-gambar berikut ini dengan nama menu_1.jpg, menu_2.jpg dan menu_3.jpg.

Sekarang mari kita mulai buat CSS nya.

Image Replacement

Image Replacement merupakan sebuah teknik dimana kita mereplace text yang ada dengan image menggunakan CSS. Teknik ini berguna apabila kita menginginkan teks dengan font yang aneh ataupun text dengan efek-efek yang tidak mungkin bisa dilakukan dengan CSS.

Jika anda perhatikan pada setiap menu, ada tag  didalamnya. Nah tag  ini yang akan kita manfaatkan. Jadi kita melebarkan ukuran tag  ini sebesar gambar menunya untuk menutupi text yang sebenarnya. Pertama-tama kita pasang CSS default dulu untuk melayout tampilan agar lebih menarik.

KODE PROGRAM

body {
  font-family:arial, serif;
}
#container {
  border:1px solid #ffbc58;
  padding:10px;
  background:#ffe9c8;
}

Anda tentu sudah tahu fungsi CSS diatas, kita hanya memberikan font jenis arial untuk <body> dan memberi border serta background untuk #container.Sip, sekarang font nya sudah kelihatan bagus, sekarang kita buat menu nya. Tambahkan CSS berikut ini.

KODE PROGRAM

ul {
  list-style:none;
  margin:0;
  padding:0;
}
#topmenu {
  height:30px;
}
#topmenu li {
  float:left;
  position:relative;
}

Pada CSS tersebut kita menghilangkan padding dan margin serta bullet

(list-style:none;) pada tag <ul>. Kemudian untuk #topmenu

(sebenarnya sama aja, #topmenu itu sama dengan <ul>,

tapi saya lebih senang memisahnya)

kita berikan tinggi 30px height:30px;. Jangan lupa untuk <li>

nya kita beri float:left; agar menu nya kesamping. Serta position:relative;

yang akan berguna untuk animasinya yang akan saya jelaskan belakangan.

Jika anda lihat maka menunya telah menyamping dan dempet-dempet. Sekarang mari kita ubah menjadi images dengan teknik Image Replacement. Kita akan mengubah menu home nya terlebih dahulu, dan jika anda lihat pada kode HTML nya, pada bagian home id nya menu_1. Tambahkan CSS berikut ini:

KODE PROGRAM

#menu_1{
  width:70px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_1 span{
  background:url(menu_1.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}

Jika anda lihat kita menentukan width dan height untuk menu_1.
Jika anda lihat gambar menu_1.jpg diatas mungkin anda bertanya-tanya,
width nya memang benar 70px tapi height nya kan 60px? kenapa di CSS nya
height nya 30px? Ya karena yang ingin kita tampilkan adalah 30px bagian
atas. 30px bagian bawah kita tampilkan waktu hover.

Pada #menu_1 span kita beri background yang berisi images dari menu_1.jpg dan jangan lupa position:absolute; agar  kita menutupi text nya. Karena kita beri position:absolute; maka container dibawahnya kita beri position:relative;. Untuk tinggi dan lebar  kita beri 100% agar sesuai container dibawahnya. Jangan lupa tambahkan cursor:pointer agar di browser IE mousenya berubah. Begitulah kira-kira trik Image Replacement. Mudah kan, lakukanlah hal yang sama untuk menu sisanya, tentu saja width nya berbeda. Tambahkan kode CSS berikut ini untuk menu lainnya.

KODE PROGRAM

#menu_2{
  width:91px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_2 span{
  background:url(menu_2.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}
#menu_3{
  width:103px;
  height:30px;
  float:left;
  font-size:1.2em;
  position:relative;
}
#menu_3 span{
  background:url(menu_3.jpg) no-repeat;
  position:absolute;
  width:100%;
  height:100%;
  cursor:pointer;
}

THANKS TO : www.dhimasronggobramantyo.com

Sabtu, 26 Maret 2011

Cara Membuat Virus Dalam Sekejab !

Masih ingat dengan virus Aksika? Virus “open source” yang satu itu memang memiliki banyak sekali varian. Tidak heran karena source code-nya memang disedia kan bebas di Internet, jadi siapapun dapat dengan mudah mengubah dan meng-compile source code-nya dan jadilah varian baru.

Berawal dari kemudahan itulah, banyak virus maker ataupun programer pemula mencoba–coba untuk membuat virus tanpa perlu repot. Paling yang dibutuhkan hanyalah pengetahuan seputar operating system dan programming.

Namun kemudahan itu belum seberapa, bila dibandingkan dengan menggunakan program Virus Generator. Dari namanya saja, kita sudah dapat mengira kegunaan dari program tersebut. Ya, Virus Generator merupakan program untuk dapat membuat virus secara mudah dan instan.

Bermula dari sampel sebuah virus yang lumayan banyak dikirimkan oleh pembaca kepada kami. PC Media Antivirus mengenalnya dengan nama Gen.FFE-Fajar, namun antivirus lain ada juga yang menyebutnya dengan nama Brontok.D. Dengan penyelidikan sederhana akhirnya diketahui bahwa virus tersebut dibuat menggunakan Virus Generator.

Fast Firus Engine (FFE)

Pembuat Generator tersebut menamakan program buatannya itu dengan nama Fast Firus Engine. Seperti yang terlihat pada program ataupun situs pembuatnya, ia memberitahukan bahwa program ini hanya untuk tujuan pembelajaran dan tidak untuk tindakan merusak. Namun tetap saja, bila program ini sudah jatuh ke tangan yang salah, pasti akan digunakan untuk pengrusakan.

Virus Generator ini dibuat menggunakan bahasa Visual Basic dan di-compress menggunakan packer tELock. Dalam paketnya terdapat dua buah file, yakni Fast Firus Engine.exe dan data.ex_. Fast Firus Engine. exe merupakan program utama dalam pembuatan virusnya dan sementara file data.ex_ sebenarnya merupakan badan virus asli yang belum dimodifi kasi.

Saat file Fast Firus Engine.exe dijalankan, maka pengguna akan dihadapkan pada sebuah interface. Anda hanya disuruh mengisikan nama virus, nama pembuat, dan pesan-pesannya. Lalu dengan menekan tombol Generate, maka jadilah virus Anda.

Cara kerja dari Generator tersebut sebenarnya sangat sederhana. Ia hanya menambahkan data yang Anda masukkan tadi ke bagian akhir file virus asli (data.ex_). Nantinya informasi tersebut digunakan oleh virus dalam proses infeksi.

Bagaimana Virus Menginfeksi?

Virus hasil ciptaan FFE memang terlihat sederhana. Sama seperti Generatornya, ia juga dibuat menggunakan bahasa Visual Basic yang di-compile dengan metode Native- Code. Lalu di compress menggunakan tELock agar ukurannya semakin kecil. Virus ini memiliki ukuran tubuh asli sebesar 55.296 bytes.

Saat virus kali pertama dieksekusi, ia akan membuat beberapa file induk di beberapa lokasi. Seperti di direktori \%WINDOWS%\, akan terdapat file dengan nama.exe, Win32 exe, activex.exe, dan %virusname% (nama virus sesuai yang diisikan oleh sang pembuatnya pada Generator). Di \%WINDOWS%\ %system32%\ akan terdapat file copy.pif, _default.pif, dan surif.bin. Selain itu, ia juga mengubah atau membuat file Oeminfo.ini yang merupakan bagian dari System Properties. Jadi apabila komputer Anda terinfeksi oleh virus hasil generate dari FFE, maka pada System Properties akan terdapat tulisan “Generated by Fast Firus Engine”.

Di direktori \%WINDOWS%\%System%\ akan terdapat beberapa file induk lagi yang menggunakan nama yang sama seperti file system milik Windows, seperti csrss.exe, winlogon.exe, lsass.exe, smss.exe, svchost. exe, dan winlogon.exe.

Dan tak lupa, pada root drive pun akan terdapat file dengan nama “baca euy.txt” yang berisikan pesan–pesan dari si pembuat virus. Jadi pada saat membuat virus dengan menggunakan Generator tersebut, maka pembuatnya akan disuguhkan beberapa kotak input, seperti Author of the virus, Name of the virus, dan Messages. Nah, isi dari kotak messages ini yang nantinya ditampilkan pada file “baca euy.txt” tersebut.

Setelah virus berhasil meng-copy-kan file induknya ke dalam sistem tersebut, ia akan menjalankan file induk tadi, sehingga pada memory akan terdapat beberapa process virus, seperti csrss.exe, winlogon.exe, lsass. exe, smss.exe, svchost.exe, dan winlogon.exe. Nama process yang mirip dengan process/services milik Windows tersebut mungkin sengaja untuk mengecoh user. Untuk membedakannya, Anda dapat melihat path atau lokasi process tersebut dijalankan. Process virus ini biasanya berjalan di direktori System sementara process/services milik Windows yang running biasanya berasal dari direktori System32.

Mengubah Registry

Virus ini menambahkan beberapa item startup pada registry agar pada saat memulai Windows ia dapat running secara otomatis atau untuk mengubah setting-an Windows agar sesuai keinginannya. Informasi mengenai registry yang diubahnya tidak akan dapat dengan mudah kita lihat karena dalam kondisi terenkripsi.

Yang ia ubah adalah seperti nilai dari item Userinit, yakni dengan menambahkan parameter ke file induk. Pada key HKEY_CURRENT_ USER\Software\Microsoft\Windows NT\CurrentVersion\Windows\Load juga akan diubah itemnya agar mengarah ke file induknya dengan nama Activex.exe. Pada HKEY_CURRENT_USER \Software\Microsoft\ Windows\CurrentVersion\Run\ akan terdapat item baru dengan nama present. Key HKEY_ LOCAL_MACHINE\SOFTWARE\Microsoft\ Windows\CurrentVersion\Run\ akan terdapat item baru juga dengan nama Default dan %username%, username di sini merupakan namauser yang sedang aktif saat itu.

Virus hasil generate dari FFE juga mengubah shell extension untuk file .exe, yakni dengan mengubah type information dari Application menjadi File Folder. Setting-an folder Options juga diubah agar tidak menampilkan extension dan setiap fi le dengan attribut hidden. Dan agar dapat aktif pada safe-mode, ia pun mengubah nilai dari item SafeBoot.

Dengan menggunakan bantuan registry Image File Execution Options, virus ini juga menambahkan item baru pada section tersebut dengan nama cmd.exe, msconfi g.exe, regedit.exe, dan taskmgr.exe. Maksudnya adalah agar setiapuser yang mengakses program dengan nama file seperti itu, maka akan di-bypass oleh Windows dan dialihkan ke file induk si virus.

Bagaimana Virus Menyebar?

Virus ini dapat menyebar melalui media penyimpan data seperti flash disk. Saat Anda mencolokkan flash disk pada komputer yang terinfeksi, maka pada flash disk tersebut akan terdapat beberapa file baru, seperti explorer.exe, %virusname%.exe, dan msvbvm60.dll. Juga beberapa file pendukung seperti desktop.ini, autorun.inf agar ia dapat running otomatis pada saat mengakses flash disk tersebut.

File virus lainnya pun disimpan pada direktori baru di flash disk tersebut dengan nama Recycled yang berisikan file Firus.pif dan Folder.htt. Kesemua file virus tersebut dalam kondisi hidden sehingga tidak terlihat.

Virus Beraksi

Untuk dapat bertahan hidup, virus ini pun akan mencoba untuk memblok setiap program yang tidak ia inginkan seperti tools atau program antivirus termasuk PCMAV. Sama seperti halnya data registry yang diubah, data mengenai program apa saja yang diblok olehnya juga terdapat dalam tubuhnya dalam kondisi terenkripsi.

Pencegahan dan Penanggulangan

PC Media Antivirus RC19 ini dapat membersihkan komputer terinfeksi secara tuntas dan akurat 100% setiap virus yang dibuat dengan menggunakan Fast Firus Generator. Untuk menghindari aksi blok oleh virus terhadap PCMAV, silakan Anda rename terlebih dahulu file PCMAV misalnya PCMAV-CLN.EXE menjadi MERDEKA.EXE.

Kamis, 17 Maret 2011

Indonesia Evakuasi 48 WNI dari Zona Radiasi Nuklir Jepang

Laporan Wartawan Tribunnews.com, Samuel Febriyanto

TRIBUNNEWS.COM, JAKARTA - Pemerintah Indonesia, melalui Kedutaan Besar Republik Indonesia akan mengevakuasi 48 Warga Negara Indonesia (WNI) dari pusat radiasi nuklir Pembangkit Listrik Tenaga Nuklir (PLTN) di Fukushima, Jepang. Evakuasi dilakukan hari ini, Kamis (17/3/2011).

Hal itu diungkapkan oleh Menteri Luar Negeri, Marty Natelagawa kepada wartawan yang menemuinya di Kementerian Kordinator Kesejahteraan Rakyat (Kemenkokesra), Jakarta, Kamis (17/3/2011).

"Data yang kami peroleh dari KBRI pada pagi hari, intinya yang berkaitan degan relokasi yang dimaksud adalah pemindahan WNI dari daerah yang paling rawan dekat dengan radiasi pindah ke KBRI di Tokyo," ujarnya.

Menurutnya, 48 orang WNI itu terdiri dari 15 WNI yang berada di Fukushima, dan 33 orang WNI yang bekerja di pengolahan ikan di daerah Kasekuma, Prefektur Miyagi.

"KBRI kita ambil langkah-langkah antisipatif, jadi tidak merelokasi bukan hanya di wilayah 10-20 kilometer dari Fukushima bahkan lebih dari itu pun sudah dipindahkan," ujar Marty.

Marty menambahakn, Kamis malam akan tiba 15 orang WNI yang dievakuasi dari Tokyo ke Tanah Air.

"Sebagaimana kita ketehui dua malam yang lalu kita mengevakuasi 99 orang mereka sudah diterima di Jakarta dan sudah kembali ke daerah masing_masing," ucap Marty. "Tadi malam pun kita terima 10 orang evakuasi dari Tokyo, saat ini sedang diproses kembali ke rumahnya masing-masing. Dan nanti malam sudah jelas, Insya Allah. Jadi total semua 128 orang."

Marty menambahkan pihaknya sudah melakukan pemeriksaan kesehatan terhadap semua WNI yang baru kembali dari Jepang. Pemeriksaan untuk mengetahui paparan radiasi di tubuh WNI asal Jepang.

"Tentu semuanya akan diperiksa kondisi kesehatan," imbuhnya seraya menyebut pemeriksaan dilakukan sejak rombongan evakuasi pertama dilakukan pemerintah Indonesia.

"Kita ketahui dalam rombongan pertama tiga orang kita relokasi dari Fukushima. Ketika tiba di Tokyo lalu dibawa ke RS untuk diperiksa apakah dalam kondisi yang baik dan mereka pun sudah kembali ke Tanah Air. Karena sudah tidak terkontaminasi," ujarnya.

Minggu, 13 Maret 2011

Bencana Jepang Telan Kerugian 15 Miliar Dolar Amerika

Headline News / Internasional / Sabtu, 12 Maret 2011 17:12 WIB

Metrotvnews.com, Tokyo: Pemerintah dan oposisi Jepang menyetujui keputusan penyusunan anggaran tambahan terhadap bencana. Keputusan itu diambil untuk memberikan solusi terkait bencana Tsunami dan Gempa Bumi yang melanda Jepang, Jumat (11/3) kemarin. Bank Sentral Jepang akan membahas kebijakan tersebut, Senin (13/3) mendatang.

Sejumlah warga di Ibukota Tokyo, terpaksa tinggal di kantor karena angkutan umum tidak beroperasi. Kereta bawah tanah akan kembali dioperasikan namun banyak kereta yang belum berjalan, serta seluruh pelabuhan di Jepang masih tutup. Seorang pengamat perindustrian di Jepang menyatakan, kerugian yang dialami mencapai $15 miliar dolar.

Selain itu, bencana gempa dan Tsunami yang menghantam Jepang, menyebabkan harga minyak, logam dan gandum merosot tajam. Kondisi tersebut merupakan kondisi penurunan terbesar dalam beberapa bulan terakhir. Namun, mata uang Yen meningkat secara tajam akibat resiko keengganan para penanam modal asal jepang dan harapan repatriasi oleh perusahaan asuransi Jepang.

Sementara itu, saham asal Jepang merosot tajam diperdagangan New York. Penurunan itu menyebabkan ekuitas berjangka milik Jepang jatuh sebesar 3,3 persen. Rencananya, bursa saham Tokyo kembali membuka perdangannya senin pekan depan.(****)

Senin, 07 Maret 2011

Bitmap vs Vector dalam Animasi Flash

Saat pembuatan animasi multimedia menggunakan Flash, pemilihan elemen gambar yang tepat akan mempengaruhi hasilnya, dalam hal ini pemilihan format gambar yang akan digunakan. Apakah menggunakan bitmap atau vector.

Salah satu karakteristik gambar vector adalah tidak akan terjadi penurunan kualitas gambar jika dilakukan perubahan ukuran gambar, karena vector ditampilkan dari hasil kalkulasi matematis. Sedangkan gambar bitmap sebaliknya. Tetapi untuk animasi, gambar vektor kurang unggul dibandingkan gambar bitmap. Hal tersebut dikarenakan banyaknya kalkulasi matematis saat gambar dianimasikan. Terutama untuk animasi yang kompleks. Akibatnya jalannya animasi tidak terlalu cepat dibandingkan dengan animasi yang menggunakan gambar bitmap.

Untuk animasi yang tidak terlalu kompleks, pilihan masih bisa dijatuhkan kepada gambar vector, asalkan gambar yang dianimasi dibuat seminim-minimnya. Salah satu cara adalah mengurangi sudut-sudut yang tidak diperlukan.

Animasi dengan menggunakan gambar bitmap juga harus memperhatikan ukuran dari file gambar itu sendiri. Jangan sampai file Flash yang dibentuk, ukurannya menjadi besar hanya karena gara-gara gambar bitmap yang digunakan. Tips-nya adalah; optimasi dahulu gambar bitmap yang akan digunakan untuk animasi.

jika anda penasaran bagaimana animasi vektor yang bisa dibuat anda download file pdf brikut ini :
download pdf animasi vektor

3D Character Animation Design

Animasi adalah menjadikan sesuatu hidup. Sedangkan karakter dapat berupa orang, hewan maupun objek nyata lainnya yang dituangkan dalam bentuk gambar 2D maupun 3D. Berdasarkan definisi dari dua suku kata di atas, dapat disimpulkan bahwa design karakter animasi adalah membuat objek atau gambar menjadi seolah-olah hidup (bergerak).

Dalam pembuatan suatu karakter animasi, kita harus mengetahui sedetail mungkin mengenai karakter yang akan dibuat tersebut diantaranya :

tampak dari karakter (atas, bawah, depan, belakang, kiri, kanan, perspektif)
ekspresi muka (normal, diam, marah, senyum, ketawa, kesal dll.)
pose atau gaya khas dari karakter bila sedang melakukan sesuatu yang menjadi ciri khas dari karakter tersebut.

Hal-hal di atas akan sangat berpengaruh terhadap emosi penonton yang menyaksikan animasi tersebut.

Karakter animasi sendiri dibedakan menjadi :

a. Animasi 2D (2Dimensi)

Animasi ini lebih dikenal dengan istilah kartun yang berasal dari kata ‘Cartoon’ artinya gambar yang lucu. Dengan teknik ini, beberapa gambar 2D atau gambar yang mempunyai sudut pandang terbatas ditampilkan berurutan dengan aplikasi pembuat film animasi.

b. Animasi 3D (3Dimensi)

Perkembangan teknologi dan komputer membuat teknik pembuatan animasi 3D semakin berkembang dan maju pesat. Animasi 3D adalah pengembangan dari animasi 2D. Dengan animasi 3D, karakter yang diperlihatkan semakin hidup dan nyata, mendekati wujud manusia aslinya. Dengan animasi 3D karakter dapat dilihat dari banyak sudut pandang (atas, bawah, depan, belakang, kiri, kanan, perspektif).

c. Animasi Tanah Liat (Clay Animation)

Animasi dengan teknik seperti ini dilakukan dengan menggunakan tanah liat. Tanah liat yang dipakai bukanlah tanah liat biasa melainkan ‘plasticin‘, bahan lentur seperti permen karet yang ditemukan pada tahun 1897. Tokoh-tokoh dalam animasi clay dibuat dengan memakai rangka khusus untuk kerangka tubuhnya, lalu kerangka tersebut ditutup dengan plasficine sesuai bentuk tokoh yang ingin dibuat. Bagian-bagian tubuh kerangka ini, seperti kepala, tangan, kaki, disa dilepas dan dipasang lagi. Setelah tokoh-tokohnya siap, lalu difoto gerakan per gerakan. Foto-foto tersebut lalu digabung menjadi gambar yang bisa bergerak seperti yang kita tonton di film. Animasi clay termasuk salah satu jenis dari ‘Stop Motion Picture‘.

d. Animasi Jepang (Anime)

Anime adalah sebutan untuk animasi buatan jepang yang diperuntukkan tidak hanya anak kecil melainkan orang dewasa juga. Yang membedakan anime dengan animasi buatan Eropa atau Amerika adalah formatnya, yaitu serial televisi, OVA, dan film bioskop.

thanks to:http://hendrik-zebua.blogspot.com/2010/02/3d-character-animation-design.html

Family Of Locos

Selasa, 19 April 2011

Membuat Horizontal Menu dengan CSS, Images Sprites dan Animasi

Membuat HTML yang Standard untuk Menu

KODE PROGRAM

Image Replacement

Sabtu, 26 Maret 2011

Cara Membuat Virus Dalam Sekejab !

Kamis, 17 Maret 2011

Indonesia Evakuasi 48 WNI dari Zona Radiasi Nuklir Jepang

Minggu, 13 Maret 2011

Bencana Jepang Telan Kerugian 15 Miliar Dolar Amerika

Senin, 07 Maret 2011

Bitmap vs Vector dalam Animasi Flash

3D Character Animation Design

Mengenai Saya

ARTIKEL MY BLOG