Kontak facebook saya

 email saya :
          chandra_farenheit@musician.org
          darkkness.kotamobagu@gmail.com
 atau dapat dicari dengan memasukan keyword:
         chandra Farenheit














Buat Lencana Anda

Read More

Download Modul TIK

DEPDIKNAS saat ini telah meluncurkan banyak buku pelajaran gratis yang dapat di-download dari situs BSE (Buku Sekolah Elektronik) di bse.depdiknas.go.id. Buku dapat di-download, digandakan maupun disebarluaskan secara bebas (untuk kepentingan non-komersial).

1. MODUL TIK X SMA Semester   1 Klik Disini
2. MODUL TIK X SMA Semester   2 Klik Disini
3. MODUL TIK XI SMA Semester  1 Klik Disini
4. MODUL TIK XI SMA Semester  2 Klik Disini
5. MODUL TIK XII SMA Semester 1 Klik Disini
6. MODUL TIK XII SMA Semester 2 Klik Disini

Read More

Meng-Export File CorelDraw

ehmm,,,mungkin udah banyak temen2 yang mengerti dan tau bagaimana caranya meng-Export file pada CorelDraw dari yang semula format file tersebut *.cdr menjadi *.jpg *.bmp *.png *.ttf *.ai *.swf dsb.. tapi mungkin masih banyak juga yang blm tau atau mengerti bagaimana caranya atau bahkan masih newbe dalam hal ini,,untuk itu ga ada salahnya kan kalau saya bahas kembali . untuk temen-temen yang belum tau, sekalian juga meriview biar ga lupa . ,kalau gt langsung aja buka program CorelDraw dan buat file baru untuk di jadika file *.jpg.buat gambar atau import gambar yang anda inginkan,,jika sudah selesai berkreasi dengan corel draw, kita akan menyimpan file tersebut dengan format *.jpg dengan cara men-exsport. klik File > Export atau bisa juga dengan menekan Ctrl+E maka akan keluar tampilan berikut

pilih format*.jpg pada Save as type, kemudian export, maka akan keluar dialog box seperti berikut,

pada dialog tersebut kita bisa mengubah Image Size menjadi ukuran yang anda inginkan dalam inch ataupun pixel itu tinggal tergantung anda:) dan bisa juga menambah ataupun mengurangi resolusi pada gambar tersebut, jika sudah cukup menurut anda tekan Ok, keluar lagi dialog box seperti berikut.

 

pada tahapan tersebut anda bisa mengatur compression atau smoothing pada gambar agar hasilnya menjadi seperti yang anda inginkan, jika sudah tekan Ok, maka terciptalah sebuah file berformat *.jpg. selesailah sudah meng-export file *.cdr ke *.jpg.

Read More

Membuat Animasi Gambar Format "gif" Dengan Photoshop CS3

Selain digunakan sebagai applikasi untuk mengedit foto, photoshop juga bisa untuk membuat gambar bergerak / animasi dalam format "gif" (graphic interchange format). Dengan bermain frame per frame, kita dapat membuat animasi tulisan ataupun gambar dengan mudah sesuai selera.

Dalam hal ini kreativitas kita sangat dibutuhkan di sini, saya hanya memberikan tutorial dasarnya saja, sobat-sobat tinggal mengembangkannya.

Photoshop yang saya gunakan di sini adalah photoshop CS3, photoshop CS2 juga bisa digunakan.

Cara membuat animasi gambar bergerak :
1. Buka Adobe photoshop

2. Buka tool animasi di photoshop, caranya klik menu “window” di photoshop, lalu pilih “animation”

Sampai muncul window kayak gini:

3. Di photoshop, pilih file » new masukkan ukuran sesuai selera, kalau saya pakai 200 x 200 pixel, lalu oke

4. Selanjutnya, buat 3 buah lingkaran dengan layer yang berbeda. Buat sebuah lingkaran dulu, selanjutnya pada jendela layer, kita klik kanan layer lingkaran tersebut, lalu pilih “duplicate layer…”.

Contoh

Tampilan pada jendela layer seperti ini:

Dan ini tampilan dalam jendela animation:

5. Selanjutnya, buat 3 buah frame dalam jendela animation, dengan mengklik icon “duplicates selected frames” (tanda lingkaran merah pada gambar diatas!) hingga jadi seperti ini:

6. Untuk menampilkan warna merah dahulu, klik frame pertama pada jendela animation, lalu pada jendela layer, nonaktifkan icon mata (indicates layer visibility) pada layer warna kuning dan hijau, sehingga hanya layer warna merah yang terdapat icon mata, seperti gambar di bawah :

Kemudian kembali lagi ke jendela animation, klik frame kedua, aktifkan icon mata pada layer kuning. Sedangkan pada frame ketiga, aktifkan icon mata pada layer hijau. Oh iya jika ingin animasi kita nanti transparan, tinggal nonaktifkan icon mata pada layer background di semua frame animasi.

Dalam jendela animation akan terlihat seperti berikut:

7. Klik tombol play untuk memainkan animasi, kita bisa mensetting timming animasi sehingga animasi tidak bergerak terlalu cepat. Setting waktunya dengan meng-klik tanda panah segitiga di samping kanan tulisan 0 sec.

8. Agar animasi bergerak terus tanpa henti, maka animasi harus di setting “forever”, tetapi jika ingin bergerak satu kali, setting dengan “once”, seperti gambar di bawah:

Kira-kira hasilnya seperti ini…

9. Kemudian simpan dengan menggunakan “save for web & device” nya photoshop. Caranya klik file > Save for web & device atau shortcut CTRL+ALT+SHIFT+S

Selamat mencoba dan gunakan kreativitas-mu untuk membuat animasi yang lebih baik.

sumber: http://94ni5a.blogspot.com/2011/02/membuat-animasi-gambar-format-gif.html

Read More

Membuat Template Website menggunakan Photoshop

Kali ini saya ingin berbagi tentang cara membuat template dari Photoshop...
langsung aja ya....

1. Buka Photoshop (kita menggunakan Photoshop CS3) dan pilih File> New dari menubarutama, jendela baru ditampilkan. Mengatur parameter dalam jendela ini seperti yang ditunjukkan pada Gambar. Pilih tombol OK; baru photoshop file dibuka. 
   
   
2. Buat layer baru dan beri nama sebagai latar belakang dan membuka file gambar yang anda suka di file photoshop. Latar belakang ditampilkan, seperti yang ditunjukkan pada Gambar.
   
   
   
3. Buat lapisan lain dan mengubah nama sebagai permata braclet diborgol. Pilih Rectangular Marquee Tool dari kotak Tool dan buat seleksi persegi panjang vertikal, seperti yang ditunjukkan pada Gambar.
   
   
   
4. Pilih Gradient Tool atau tekan G untuk mengaktifkan alat ini. Mengatur nilai hex untuk gradien sisi warna simpul kanan untuk # 000000 simpul dan sisi kiri gradien warna # 850900. Tambahkan gradien radial untuk seleksi. 
5. Selanjutnya, menambahkan gambar HD gelang ke kotak gradien. Pilih dua lapisan (kotak gradien layer dan lapisan gelang) dan tekan CTRL + e untuk menggabungkan mereka bersama-sama, seperti yang ditunjukkan pada Gambar. (Klik ini tautan untuk download gambar ini).
   
   
   
   
   Gambar cincin tampaknya menyatu dengan lapisan latar belakang karena keduanya memilikiwarna yang sama. Untuk membuat cincin menonjol kita akan menambahkan cahaya luar untuk itu. Tapi, jika Anda ingin mengimpor template ini di flash kemudian lebih menambahkan efek-efek di flash itu sendiri untuk kualitas yang lebih baik. 
6. Double-klik pada lapisan cincin; jendela Layer Style akan ditampilkan. Tetapkan pengaturan berikut untuk parameter Outer Glow di jendela ini, seperti yang ditunjukkan pada Gambar.
   
   
   
7. Demikian pula menambahkan bangles.jpg , menggairahkan _rings.jpg , dan earings.jpgke file photoshop. Juga, tambahkan parameter Outer Glow ini gambar, seperti yang dibahas pada langkah sebelumnya. Sejajarkan semua empat gambar, seperti yang ditunjukkan pada Gambar.
   
   
   
8. Gunakan alat teks untuk memasukkan label untuk gambar sebagai menggairahkan CINCIN, CUTTING EDGE earings, Jewel diborgol gelang, gelang PULSE FASHION (font: Aparajita, Type: Regular, Size: 18pt, Warna: Putih) masing-masing dari kiri ke kanan. Tambahkan cahaya luar ke teks ini sebagai dibahas sebelumnya dalam tutorial. 
9. Juga masukkan nama perusahaan sebagai ENTHEOS Permata (font: Marah Miring,Type: Regular, Size: 72pt, Warna: Putih). Terapkan drop-shadow pada lapisan Entheos;Style window layer akan ditampilkan. Pilih opsi Drop-bayangan dari jendela ini dan pilih tombol Ok. 
10. Juga menulis teks, KOLEKSI TERBAIK DIJAGA RAHASIA DI BUMI (font: Trajan Pro, Type: Regular, Size: 14pt, Warna: Putih). Menyelaraskan semua teks-teks seperti yang ditunjukkan pada Gambar.
    
    
    
11. KOLEKSI Masukkan teks, Timepieces, Parfum, TOKO, ACARA, DOWNLOADS,HUBUNGI KAMI (font: Orator Std, Type: Sedang, Ukuran: 18pt, Warna: Putih) dari kiri ke kanan. Pastikan bahwa semua teks berada pada lapisan yang berbeda.
Masukkan teks fullscreen dan MUSIK (font: Orator Std, Type: Sedang, Ukuran: 12pt,Warna: Putih). Kedua teks juga harus dalam lapisan yang terpisah. Sejajarkan teks ditambahkan pada langkah 9 & 10, seperti yang ditunjukkan pada Gambar.
12. Buat layer baru dan mengubah nama sebagai hanging_pendant dan membukahanging_pendant.jpg (klik untuk download gambar ini) di file photoshop. Anda dapat menambahkan drop-shadow untuk itu tetapi menghindari menambahkan jika Anda ingin impor di flash. Sejajarkan ini liontin, seperti yang ditunjukkan pada Gambar.
    
    
    

    
    

Template web siap.

Read More

Script Upload File Gambar Menggunakan PHP

Pada kesempatan kali ini saya akan menjelaskan sedikit pengetahuan saya, yaitu membuat form upload gambar menggunakan PHP. Mohon maaf sebelumnya, artikel saya kali ini bukan ditujukan untuk temen-temen yang sudah mahir web programming, artikel ini merupakan tutorial dasar bagi mereka yang baru mempelajarinya seperti saya.

Pengaturan Form Upload

<!--file upload.html-->
 <form name="form_upload" method="post" action="aksi-upload.php"
 enctype="multipart/form-data">
 Picture: <input type="file" name="picture" />
 <input type="submit" name="upload" value="Upload" />
 </form>

Penjelasan

Simpanlah script diatas dengan nama upload.html Yang perlu digaris bawahi dari script diatas adalah kita harus menggunakan elemen input file (input type=”file” yang berfungsi untuk mengambil sebuah file dari komputer kita. Selanjutnya yang tidak kalah penting agar file dapat terupload adalah menambahkan atributenctype=”multipart/form-data” dan method POST (method=”post” kedalam form HTML kita.

Jika sudah, kita ketikkan script dibawah ini:

Proses Upload

<?php
 //file aksi-upload.php
 $fileName = $_FILES['picture']['name'];
 $fileSize = $_FILES['picture']['size'];
 $fileError = $_FILES['picture']['error'];
 if($fileSize > 0 || $fileError == 0){
 $move = move_uploaded_file($_FILES['picture']['tmp_name'],
 'berkas/'.$fileName);
 if($move){
 echo "Gambar berhalil diupload";
 }else{
 echo "Gagal mengupload gambar";
 }
 }else{
 echo "Gagal mengupload gambar: ".$fileError;
 }
 ?>

Penjelasan
Simpanlah dengan nama file aksi-upload.php.

Dengan script diatas, temen-temen akan mengupload file kedalam folder berkas. Untuk lebih jelasnya tentang cara penempatan folder dan file-filenya bisa lihat gambar ini:

Informasi file yang diupload dapat temen-temen ketahui dari variabel global $_FILES dalam bentuk associated array. Kembali ke file upload.html, pada baris ke-3 terdapat tipe input dengan atribut name=”picture”. Dengan adanya atribut name=”picture”  tersebut temen-temen nantinya akan dapat mengakses informasi file yang diupload di variabel $_FILES['picture'].

$_FILES['picture'] adalah associated array dengan struktur sebagai berikut:

$_FILES['picture'] ['name']

Berisi nama file yang sedang diupload.

$_FILES['picture']['type']

Mime type dari file yang sedang diupload, jika browser memberikan informasi ini. Contoh: image/png, image/gif

$_FILES['picture']['size']

Ukuran atau size file yang temen-temen upload dalam byte.

$_FILES['picture']['tmp_name']

Nama file temporer dari file yang sedang diupload yang disimpan di temporari folder server

$_FILES['picture']['error']

Error code yang berhubungan dengan file yang sedang diupload
Sekian tutorial kali ini, yang perlu diinget HTML form harus memiliki atribut enctype=”multipart/form-data” agar file mau ter-upload.

sumber: http://khoiruddin.com/script-upload-file-gambar-menggunakan-php/

Read More

Membuat Animasi Sliding Doors Menggunakan jQuery

Bismillaahirrohmaanirrohiim…

Jika temen-temen melihat web seperti detik.com, republika.co.id atau yang lainnya temen-temen bisa melihat aneka animasi seperti foto-foto yang berjalan sendiri. Bagi yang hobi mempelajari web mungkin terbesit “Bagaimana sih cara membuatnya?”. Cara membuatnya kita membutuhkan JavaScript seperti jQuery.

Nah.. pada kesempatan kali ini saya akan berbagi Bagaimana Membuat Animasi Sliding Doors? Apa itu Sliding Doors? Sliding Doors secara simpel dapat diartikan animasi Slide seperti membuka Pintu. Jika kita mengarahkan mouse ke objek tersebut, maka akan terjadi animasi seperti membuka sebuah pintu. Masih belum paham? lihat demo-nya disini.

Oke, kita langsung mulai….

Sebagai gambaran susunan foldernya akan tampak seperi gambar ini:

FIRST STEP

1. Buatlah file HTML dengan susunan seperti dibawah ini

<!doctype html>
 <html>
 <head>
 <title>jQuery Sliding Doors Tutorial | Khoiruddin.Com</title>
 </head>
 <body>
 <div id="container">

</div>
 </body>
 </html>

simpanlah dengan nama index.html
2. Sisipkan script pemanggil file CSS setelah tag </title>
<link rel=”stylesheet” href=”style.css” />
3. Sisipkan script pemanggil file JavaScript setelah script diatas

<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>
 <script src="custom.js"></script>

Dalam tutorial kali ini saya memanggil Google jQuery API. Namun jika temen-temen ingin mendapatkan jQuery terbaru atau menggunakannya dalam keadaan offline, temen-temen dapat mendownloadnya disini.

4. Menambahkan elemen dalam tag body
tambahhkan elemen dibawah ini keladam tag <div id=”container”>

<div id=”container”>
<div id=”vertikal” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-1.jpg” class=”top” />
</div>
<div id=”kiri” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-2.jpg” class=”top” />
</div>
<div id=”kiri-bawah” class=”third last”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-3.jpg” class=”top” />
</div>
<div id=”bawah” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-4.jpg” class=”top” />
</div>
<div id=”kanan” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-5.jpg” class=”top” />
</div>
<div id=”kanan-bawah” class=”third last”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-6.jpg” class=”top” />
</div>[/html]
Sehingga keseluruhan isi file HTML akan tampak seperti ini:

[html]
 <!doctype html>
 <html>
 <head>
 <title>jQuery Sliding Doors | Khoiruddin.Com</title>
 <link rel="stylesheet" href="style.css" />
 <script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>
 <script src="animasi.js"></script>
 </head>
 <body>
 <div id="container">
 <div id="vertikal" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-1.jpg" class="top" />
 </div>
 <div id="kiri" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-2.jpg" class="top" />
 </div>
 <div id="kiri-bawah" class="third last">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-3.jpg" class="top" />
 </div>
 <div id="bawah" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-4.jpg" class="top" />
 </div>
 <div id="kanan" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-5.jpg" class="top" />
 </div>
 <div id="kanan-bawah" class="third last">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-6.jpg" class="top" />
 </div>
 </div>
 </body>
 </html>

simpan file HTML temen-temen.
SECOND STEP
Buatlah file CSS dengan susunan seperti ini:

html,body{margin:0;padding:0;background:#e8e8e8}

#container { width:960px; margin:0 auto; padding-top:150px }

.third {
 width:293px;
 margin:0 40px 40px 0;
 overflow:hidden;
 float:left;
 position:relative;
 }

.third img { display:block; }

.top { position:absolute; top:0; left:0; z-index:20 }

.last { margin-right:0; }

Keterangan

Simpan dengan nama style.css. Perlu diperhatikan, bahwa overlow dalam div yang mengandung gambar disetting hidden (overflow:hidden;). ini berguna untuk menyembunyikan gambar yang keluar ketika kita menganimasikan gambar dengan class top (class=”top”). coba saja overflow:hidden; temen-temen hapus, maka akan terlihat perbedaannya.

THIRD STEP

Time for the jQuery!

Ketikkan “fungsi”-nya:

$(function() {
 // js code here
 });

Menambahkan Animasi

Dibawah ini kita akan menambahkan animasi untuk div dengan ID kiri-bawah, masukkan script berikut kedalam function.

$('#kiri-bawah').hover(function() {
 //hover on
 $('img.top', $(this)).stop().animate({left: '-293px', top: '188px'}, 500);
 //hover off
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

Keterangan

Ketika gambar dengan posisi kiri-bawah (div id=”kiri-bawah”) dilewati mouse, maka akan mencari image/gambar ber-class top dan masuk kedalam this (disini $(this) mengacu kepada # kiri-bawah). Kemudaian jika terdapat antrian (queue) maka akan dihentikan, yang akhirnya akan menganimasi -293px dari kiri dan 188px dari atas. 500 disini digunakan untuk durasi animasi. Kemudian jika mouse temen-temen sudah tidak melewati objek (hover off), maka gambar/objek akan dianimasikan ke tempat semula (left: ’0′, top:’0′) dengan durasi 500.

Berikut code/script untuk div yang lainnya. Temen-temen dapat merubah posisi top atau posisi left sesuai animasi yang dikehendaki.

$('#vertikal').hover(function() {
 $('img.top', $(this)).stop().animate({top: '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({top: '0'}, 500);
 });

$('#kiri').hover(function() {
 $('img.top', $(this)).stop().animate({left: '-293px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0'}, 500);
 });

$('#kiri-bawah').hover(function() {
 $('img.top', $(this)).stop().animate({left: '-293px', top:
 '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

$('#bawah').hover(function() {
 $('img.top', $(this)).stop().animate({top: '-188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({top: '0'}, 500);
 });

$('#kanan').hover(function() {
 $('img.top', $(this)).stop().animate({left: '293px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0'}, 500);
 });

$('#kanan-bawah').hover(function() {
 $('img.top', $(this)).stop().animate({left: '293px', top: '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

Seperti biasa, berikut link download Scriptnya:



 
Sumber:http://khoiruddin.com/membuatanimasi-sliding-doors-menggunakan-jquery/

Read More

Cheatsheet HTML, PHP dan MySQL untuk sehari-hari

 Kali ini saya akan berbagi Cheatsheet. Kalo diterjemahin secara simpel cheatsheet adalah lembar contekan. Cheatsheet ini sangat berguna bagi kita jika ingin belajar tanpa membaca buku tebal. Tapi hanya poin-poin penting saja yang harus kita fahami.

Cheatsheet tersebut saya Zip yang isinya Cheatshett CSS3, HTML5, MySQL dan masih ada yang lainnya lho… silakan download temen-temen, semoag bermanfaat..

Read More