Membuat Efek Smooth di Menu dengan jQuery

Tujuan - Membuat menu Halus

Lihat demo

Pendahuluan - Penjelasan mengurangi

Menu memiliki seperti animasi halus karena hal yang disebut "pelonggaran". Adobe definisi di Flash Developer Center lebih lengkap:
"Turunnya merujuk pada percepatan atau perlambatan bertahap selama animasi, animasi yang membantu Anda terlihat lebih realistis. Pelonggaran menciptakan penampilan yang lebih alami percepatan atau perlambatan secara bertahap menyesuaikan tingkat perubahan. "
Berkat keajaiban plugin jQuery Easing, kita sekarang dapat menggunakan mereda di luar lingkungan Flash dan ActionScript. Download di situs proyek resmi 

Langkah 1 - Siapkan Struktur

Buat folder baru dengan nama NavAnimatedjQuery, kemudian dokument baru seperti di bawah ini simpan dengan nama index.html.

    <!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" xml:lang="en" lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <title>Smooth Animated jQuery Menu</title> 
     
        <link rel="stylesheet" href="style.css"/> 
     
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> 
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> 
        <script src="animated-menu.js" type="text/javascript"></script>
    </head>
        <body> 
        <p>Rollover a menu item to expand it.</p> 
        <ul> 
            <li class="green"> 
                <p><a href="#">Home</a></p> 
                <p class="subtext">The front page</p> 
            </li> 
            <li class="yellow"> 
                <p><a href="#">About</a></p> 
                <p class="subtext">More info</p> 
            </li> 
            <li class="red"> 
                <p><a href="#">Contact</a></p> 
                <p class="subtext">Get in touch</p> 
            </li> 
            <li class="blue"> 
                <p><a href="#">Submit</a></p> 
                <p class="subtext">Send us your stuff!</p> 
            </li> 
            <li class="purple"> 
                <p><a href="#">Terms</a></p> 
                <p class="subtext">Legal things</p> 
            </li> 
        </ul> 
    </body> 
    </html>   

Langkah 2 - Mengatur dengan CSS

buat dokument seperti dibawah ini kemudian simpan dengan nama style.css taruh di folder
NavAnimatedjQuery.
body{ 
    font-family:"Lucida Grande", arial, sans-serif; 
    background:#F3F3F3; 

 
ul{ 
    margin:0; 
    padding:0; 

 
li{ 
    width:100px; 
    height:50px; 
    float:left; 
    color:#191919; 
    text-align:center; 
    overflow:hidden; 

 
a{ 
    color:#FFF; 
    text-decoration:none; 

 
p{ 
    padding:0px 5px; 

 
    .subtext{ 
        padding-top:15px; 
    } 
 
/*Menu Color Classes*/ 
.green{background:#6AA63B;} 
.yellow{background:#FBC700;} 
.red{background:#D52100;} 
.purple{background:#5122B4;} 
.blue{background:#0292C0;} 

Langkah 3 - Membuat efek animasi dengan jQuery

taruh di dalam tag <head> -- taruh disini --</head> kode dibawah ini:
<script type="text/javascript">
            $(document).ready(function(){ 
 
                //When mouse rolls over 
                $("li").mouseover(function(){ 
                    $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
                }); 
             
                //When mouse is removed 
                $("li").mouseout(function(){ 
                    $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
                }); 
             
                });
    </script>


Berikut sedikit penjelasannya:
Ada dua tindakan dalam kode di atas. Ketika mouse bergerak di atas item menu, item mulai animasi di mana telah melebar 150px tinggi selama 0,6 detik. Turunnya diterapkan melalui plugin tersebut 'easeOutBounce' yang menyebabkan kotak untuk "terpental" sedikit karena mencapai akhir animasi ("keluar"). Ketika mouse digerakkan dari animasi dengan ukuran mulai dipicu.
Jika Anda menggunakan ini dalam konteks situs yang lebih besar, cukup mengganti elemen yang dipilih (saat ini "li") untuk acara mouse ke pemilih yang diperlukan.
Pemberhentian () metode dirantai sebelum bernyawa untuk mencegah penyangga dari bangunan di mana animasi akan loop berulang kali jika mouse dipindahkan sekitar cepat di atasnya.

(untuk plugin jQuery easing--> buat folder js di dalam folder NavAnimatedjQuery kemudian simpan file jQuery didalam folder js)

Langkah 4 - Tambahkan Flair Beberapa

Saya telah menambahkan gambar latar belakang untuk setiap item menu dalam versi live dan file source untuk menggambarkan beberapa kemungkinan desain. Ada banyak cara kreatif lainnya untuk menambahkan effect beberapa menu. lakukan percobaan.

sekian, semoga bermanfaat....

2 comments:

Basic HTML

Membuat file HTML 

Untuk anda yang baru memulai membuat website atau sedang mempelajari bagaimana membuat sebuah halaman website, disini saya akan sedikit menjelaskan bagaimana halaman website itu dibuat. Anda dapat membuat halaman web atau dokumen HTML dengan editor teks apapun (termasuk Microsoft Notepad, DOS mengedit, Mac SimpleText, dan UNIX vi). Anda mungkin sudah memiliki setidaknya salah satu editor diinstal pada komputer Anda, bahkan jika Anda belum pernah menggunakannya sebelumnya.
Untuk melihat apa yang tampak seperti HTML dan mempelajari tag HTML yang paling dasar, mari kita lihat sebuah dokumen HTML yang sangat sederhana. Di bawah angka menunjukkan halaman Web sederhana di Microsoft Notepad. Anda dapat mengetik teks yang sama di editor Anda sendiri untuk mengikuti bersama dengan bab ini.
 
Klik di sini untuk melihat gambar yang lebih besar.

Setiap dokumen HTML harus dimulai dengan tag <html> dan diakhiri dengan melengkapi nya, </ html> tag. Selain tag <html>, dokumen ini mencakup tiga pasangan lain dari tag yang harus dimasukkan dalam dokumen HTML:
  • <head> Dan </ head> pasangan tag digunakan untuk menunjukkan informasi tentang dokumen itu sendiri. Anda akan belajar bagaimana menambahkan beberapa informasi ini dalam bab-bab selanjutnya.
  • <title> Dan </ title> tag digunakan untuk menambahkan judul Title bar browser Anda. Judul bar adalah pita berwarna di bagian atas setiap aplikasi yang memberikan nama aplikasi.
  • <body> Dan </ body> tag digunakan untuk mengelilingi setiap teks yang muncul di halaman HTML.
Semua dokumen HTML dipisahkan menjadi dua bagian: kepala dan tubuh. Karena judul berisi informasi tentang dokumen, <title> dan </ title> tag ditempatkan dalam <head> dan </ head> tag.
Jika Anda membuat sebuah halaman HTML sederhana, Anda akan melihat bahwa empat tag yang sama yang hadir dalam kode ini juga.
<html>
<head>
<title> Halaman Web My Second </ title>
</ Head>
<body>
<p> ini adalah halaman web kedua saya. </ p>
</ Body>
</ Html>

Teks yang muncul atau berubah hanya bila diantara tag.
Sekian penjelasan mengenai cara membuat halaman web sederhana dengan html, semoga bermanfaat dan tunggu tahapan berikutnya.


1 comments:

Fun dengan PHP GD Library: Part 1


Fun dengan PHP GD Library: Part 1

Jika Anda seorang avid PHP pengembang, Anda mungkin menyadari ekstensi GD library. Bagi mereka yang tidak terbiasa, perpustakaan GD memungkinkan Anda untuk mengubah, memanipulasi, dan membuat gambar cukup sederhana. Hari ini, kita akan mempelajari dasar-dasar menggunakan PHP dan GD library.

Pertama Hal Pertama

Anda akan perlu memastikan GD library diinstal dan diaktifkan pada server Anda. Tidak tahu bagaimana melakukan ini? Jangan khawatir, hanya membuat file PHP pada server Anda dan ketik:
 <Php echo phpinfo ();??>
Sekarang mengakses halaman di browser Anda dan Anda akan melihat daftar raksasa merinci fitur versi PHP. Gulir ke bawah sedikit dan mencari 'GD' pos untuk memastikan itu diaktifkan. Jika tidak, Anda akan perlu menghubungi perusahaan hosting Anda. Untungnya, kebanyakan server saya telah bekerja pada sudah memiliki perpustakaan GD dipasang dan diaktifkan.
Jika Anda ingin membaca lebih lanjut tentang perpustakaan GD, pastikan untuk memeriksa pengenalan GD penggu .

The Basics

Mari kita membahas beberapa dasar-dasar untuk mendapatkan kita mulai. Pertama, kita akan ingin memastikan bahwa kami melaporkan semua kesalahan ke browser. Kita dapat melakukannya dengan memasukkan berikut di bagian paling atas dari file php kami: 
  <? Php
 ini_set ("display_errors", "1");
 error_reporting (E_ALL);
 ?> 

Jadilah Persegi

Mari kita mulai sederhana dan menggunakan PHP untuk membuat kotak biru bagi kita - ada yang luar biasa tetapi kita perlu mengetahui dasar-dasar pertama. Untuk mencapai persegi kami, kita perlu melakukan hal berikut:
  • Menetapkan jenis konten kami sebagai gambar sehingga browser benar dapat menafsirkan script.
  • Buat kanvas gambar baru kosong dengan lebar tertentu dan tinggi.
  • Mengatur warna latar belakang kami menjadi biru.
  • Simpan gambar akhir dan output ke browser.
  • Membersihkan setiap memori yang digunakan untuk membuat dan menyimpan gambar.
  • Panggil gambar dari file index.php kami yang akan ditampilkan.
Sekarang bahwa kita memiliki langkah dan proses untuk alun-alun bekerja, kita bisa mulai kode. Saya melakukan yang terbaik untuk berkomentar setiap langkah kode, dan akan pergi melalui fungsi tertentu atau proses setelah potongan kode. Yang mengatakan, di sini adalah kode untuk persegi kami. Setelah disisipkan dalam, simpan file ini sebagai 'basic_square.php':

  <? Php
 // Laporkan setiap kesalahan
 ini_set ("display_errors", "1");
 error_reporting (E_ALL);

 // Mengatur jenis konten yang benar
 header ('content-type: image / png');

 // Buat aliran gambar dasar kita
 // Lebar 125px tinggi, 125px
 $ Image = ImageCreate (125, 125);

 // Mengatur warna latar belakang
 $ Biru = ImageColorAllocate ($ image, 0, 0, 255);

 // Set up warna lain hanya untuk menunjukkan bagaimana warna pertama dinyatakan digunakan sebagai warna latar belakang ketika kita menggunakan ImageCreate ()
 // Perhatikan bagaimana biru diterapkan pada latar belakang, * tidak * merah.
 $ Merah = ImageColorAllocate ($ image, 255, 0, 0);

 // Menyimpan gambar sebagai png dan output
 imagepng ($ image); 
 
 // Memori sampai Batal digunakan
 imagedestroy ($ image);
 ?> 
Mari kita pergi melalui masing-masing fungsi dan langkah dalam kode di atas sehingga kami dapat lebih memahami apa yang terjadi di sini.
  • Seperti disebutkan, kami melaporkan kesalahan ke browser sehingga kita dapat memperbaiki bug.
  • Selanjutnya kita menggunakan header () fungsi untuk menetapkan jenis konten kami ke gambar png.
  • Kami menyimpan gambar dalam sebuah variabel bernama 'citra' dan menciptakan aliran gambar dasar kita dan menyatakan lebar dan tinggi kita. Lihat ImageCreate () untuk informasi lebih lanjut.
  • Selanjutnya kita menggunakan ImageColorAllocate fungsi untuk menyimpan warna biru di 'biru' variabel kita. Juga perhatikan bagaimana warna pertama menyatakan akan ditetapkan sebagai latar belakang menggunakan ImageCreate. Jadi biru akan background warna kita, bukan merah.
  • Kami menggunakan imagepng () untuk menyimpan gambar akhir kami, dibutuhkan parameter tambahan jika Anda ingin menyimpannya ke direktori.
  • Terakhir, kita menjernihkan memori yang digunakan dengan memanggil imagedestroy () .
Kita bisa mengakses dan melihat kotak biru kami dengan pergi ke blue_square.php, atau bahkan lebih baik, kita bisa link ke index.php pada kami seperti:
  <Img src = 'http://themeforest.s3.amazonaws.com/65_gd/basic_square.php' alt ='' />
Dengan asumsi semua berjalan baik, Anda akan melihat kotak biru seperti di bawah:

Hello Dunia

Sekarang bahwa kita memiliki dasar-dasar yang sangat menciptakan gambar, mari kita membuat gambar dengan beberapa teks dan font pilihan kami. Kita dapat menggunakan font yang kita inginkan, asalkan font adalah Font TrueType (. Tff). Untuk beberapa contoh berikutnya saya akan menggunakan 'Advent' font yang Anda bisa temukan di sini. Kami akan menciptakan 'Hello World' string di lapangan latar belakang abu-abu gelap. Mari kita lihat pada kode sumber pertama dan kemudian pergi ke setiap langkah.
  <? Php
 // Laporkan setiap kesalahan
 ini_set ("display_errors", "1");
 error_reporting (E_ALL); 

 // Mengatur jenis konten
 header ('content-type: image / png');

 // Buat gambar dasar kami aliran 300x300 piksel
 $ Image = ImageCreate (300, 300);

 // Set up beberapa warna, gunakan abu-abu gelap sebagai warna latar belakang
 $ Dark_grey = ImageColorAllocate ($ image, 102, 102, 102);
 $ Putih = ImageColorAllocate ($ image, 255, 255, 255);

 // Set path ke jenis font sejati kita
 $ Font_path = 'advent_light';

 // Set string teks kami
 $ String = 'Hello World!';

 // Menulis teks kami untuk gambar yang ada.
 imagettftext ($ image, 50, 0, 10, 160, font_path $ putih, $, $ string);

 // Buat gambar akhir kami
 imagepng ($ image);

 // Hapus memori
 imagedestroy ($ image);
 ?> 
Menyimpan kode di sebuah file bernama 'hello_world.php' dan mengaksesnya menggunakan teknik yang sama seperti yang kami sebutkan di atas. Jadi apa yang berbeda di sini?
  • Kami mengatur dimensi untuk 300 × 300 piksel dan menggunakan latar belakang abu-abu gelap.
  • Perhatikan bagaimana kita menyatakan jalan font variabel bernama dan menggunakan nama font kita sebagai nilai? Hal ini karena nantinya di script kita perlu mengetahui jalan untuk font kita sehingga kita dapat menggunakan PHP untuk menggambar teks kami. Juga mencatat dengan cermat bagaimana ada ekstensi. Mengutip manual:
    Tergantung pada versi GD library PHP menggunakan, ketika file font yang tidak dimulai dengan ttf terkemuka / kemudian. Akan ditambahkan.
    Ini berarti karena file font kita tidak memiliki '/' di depannya, tff otomatis. Akan ditambahkan.
  • Selanjutnya kita mengatur string kami, 'Hello World!', Dan menyimpannya dalam sebuah variabel untuk digunakan nanti.
  • Fungsi utama yang perlu diperhatikan di sini adalah berikutnya, imagettftext () , yang mengambil 8 parameter. Sumber daya $ image, mengapung $ ukuran, mengapung $ angle, int $ x, int $ y, int $ warna, string $ berkas font, string $ text (dalam urutan itu).
Simpan halaman ini dan mengaksesnya namun Anda inginkan, Anda harus mendapatkan gambar yang terlihat seperti di bawah.

Sudut itu!

Apakah Anda menangkap bahwa salah satu parameter dari fungsi imagettftext adalah 'angle'. Ini berarti kita dapat sudut string kita untuk beberapa hasil yang unik. Mari kita kembali kode kita dari atas dan sudut kami 'Hello World! " teks.

 <? Php
 / / Laporkan setiap kesalahan
 ini_set ("display_errors", "1");
 error_reporting (E_ALL); 

 / / Mengatur jenis konten
 header ('content-type: image / png');

 / / Buat gambar dasar kami aliran 300x300 piksel
 $ Image = ImageCreate (300, 300);

 / / Set up beberapa warna, gunakan abu-abu gelap sebagai warna latar belakang
 $ Dark_grey = ImageColorAllocate ($ image, 102, 102, 102);
 $ Putih = ImageColorAllocate ($ image, 255, 255, 255);

 // Set path ke jenis font sejati kita
 $ Font_path = 'advent_light';

 // Set string teks kami
 $ String = 'Hello World!';

 // Menulis teks kami untuk gambar yang ada.
 imagettftext ($ image, 50, - 45, 30, 70, $ putih, $ font_path, $ string);

 // Buat gambar akhir kami
 imagepng ($ image);

 // Hapus memori
 imagedestroy ($ image);
 ?> 
 
Perhatikan bagaimana kita telah menambahkan sudut -45 derajat ke fungsi bukan nol (serta reposisi teks kita beberapa)? Ini adalah semua yang diperlukan untuk sudut beberapa teks ke gambar, Anda akan melihat sesuatu seperti gambar di bawah.
Apakah Anda bersenang-senang belum? Tidak ada? Nah, kemudian mari kita gunakan pendekatan yang lebih praktis dan menciptakan sesuatu yang dapat berguna.

Apa Tanggal tersebut?

Tidak hanya bisa kita membuat gambar dari awal, tapi kita bisa membuat gambar dari gambar yang ada! Dengan sedikit kerja kita dapat dengan mudah membuat kecil 'kalender icon' yang menampilkan tanggal saat ini (bulan, hari, tahun). Sebuah pencarian Google yang sederhana untuk 'kalender kosong ikon' dibesarkan ikon bebas svg. Bahwa saya diubah ukurannya dan diubah menjadi. Png. Jadi Anda memiliki gagasan tentang apa yang saya bicarakan tentang Anda dapat melihat kalender kosong 'di bawah ini.
Sekarang bahwa kita memiliki kanvas untuk bekerja dengan, kita dapat menggunakan GD berbagai fungsi tanggal PHP untuk membuat ini semua datang bersama-sama. Disclaimer: Saya bukan desainer dunia terbesar, ikon kosong yang lebih baik dan pilihan font mungkin akan menjadi ide yang baik jika saya akan menggunakan ini 'kalender ikon' di situs nyata. Aku akan meninggalkan merancang untuk kalian semua. Yang mengatakan, mari kita lihat kode final dan kemudian meninjau.
  <? Php
 // Laporkan semua Kesalahan
 ini_set ("display_errors", "1");
 error_reporting (E_ALL); 

 // Set jenis konten
 header ('content-type: image / jpeg');

 // Simpan nilai-nilai tanggal kami di variabel terpisah
 Daftar ($ bulan, $ hari, $ tahun) = explode ('/', date ('F / jS / Y'));

 // Load gambar dasar kami
 $ Image = imagecreatefrompng ('calendar_blank.png');
 $ IMAGE_WIDTH = imagesx ($ image);

 / Warna Setup / dan file font
 $ Putih = ImageColorAllocate ($ image, 255, 255, 255);
 $ Hitam = ImageColorAllocate ($ image, 0, 0, 0);
 $ Font_path = 'advent_light';

 // Dapatkan posisi string teks
 $ Pos_month = imagettfbbox (13, 0, $ font_path, $ bulan);
 $ Pos_day = imagettfbbox (25, 0, $ font_path, $ hari);
 $ Pos_year = imagettfbbox (8, 0, $ font_path, $ tahun);

 // Buat Bulan
 imagettftext ($ image, 13, 0, ($ IMAGE_WIDTH - $ pos_month [2]) / 2, 40, $ putih, $ font_path, $ bulan);

 // Buat Hari
 imagettftext ($ image, 25, 0, ($ IMAGE_WIDTH - $ pos_day [2]) / 2, 80, $ hitam, $ font_path, $ hari);

 // Buat Tahun
 imagettftext ($ image, 8, 0, ($ IMAGE_WIDTH - $ pos_year [2]) / 2, 100, $ hitam, $ font_path, $ tahun);

 // Buat gambar akhir
 imagejpeg ($ image,'', 100);

 // Hapus memori;
 imagedestroy ($ image);
 ?>
 
Jadi apa yang terjadi di sini? Apa ini fungsi list ()? Semua baik pertanyaan, dan kami akan membahas mereka semua langkah demi langkah:
  • Seperti biasa kami mengatur jenis header sehingga gambar akan ditampilkan dengan benar.
  • On line 10 Anda akan melihat kita menggunakan fungsi daftar . Kami menetapkan nilai dari array tanggal (dikonversi ke array melalui meledak () ) dengan variabel di dalam fungsi daftar. Ini adalah cara mudah untuk mengambil informasi array dan menugaskan sekaligus untuk beberapa variabel. Kami sekarang dapat mengakses variabel $ bulan, $ hari, dan $ tahun individual.
  • On line 22-24 kita menggunakan imagettfbbox () fungsi untuk mengambil kotak loncat dari string kami (singkatnya, ukuran atau panjang), fungsi mengembalikan sebuah array nilai, sehingga untuk mengakses pojok kanan bawah kita bisa menggunakan $ pos_month [2]. Kami memerlukan informasi ini sehingga kami dapat secara otomatis memposisikan teks kita dengan benar tidak peduli ukuran.
  • Terakhir kita membuat setiap string dan menggunakan beberapa matematika dasar untuk posisi koordinat x dari string kita.
Dengan asumsi alam semesta tidak meledak, Anda harus mendapatkan gambar seperti di bawah (kecuali tanggal harus menjadi apa pun tanggal saat ini pada server Anda, di bawah ini adalah gambar statis dari hasilnya). Juga, berkat catpin untuk bantuan dengan script.

Kucing dan Filter Gambar

Hal terakhir yang kita akan menyentuh pada hari ini adalah sangat menyenangkan imagefilter () fungsi. Fungsi imagefilter mengambil gambar didefinisikan pra dan menerapkan filter ditentukan untuk gambar, seperti mengubah gambar ke grayscale. Mari kita lihat gambar kita akan bekerja dengan, benar-benar tersentuh.
Sekarang mari kita mengkonversi kitty gila untuk gambar grayscale menggunakan fungsi imagefilter.
  <? Php
 // Laporkan semua kesalahan
 ini_set ("display_errors", "1");
 error_reporting (E_ALL); 

 // Periksa untuk melihat apakah gambar sumber diatur
 if (isset ($ _GET ['sumber'])) {
  // Lakukan beberapa sanitasi yang sangat dasar dari string
  $ Image = filter_var ($ _GET ['sumber'], FILTER_SANITIZE_STRING);

  // Load gambar dari sumber yang disediakan
  $ Image = imagecreatefromjpeg ($ image);

  // Mengubah gambar ke gambar grayscale
  imagefilter ($ image, IMG_FILTER_GRAYSCALE);

  // Set jenis konten
  header ('content-type: image / jpeg');

  // Simpan gambar dengan kualitas 90 persen
  imagejpeg ($ image,'', 90);

  // Menjernihkan memori
  imagedestroy ($ image);
 }
 ?> 
Saya telah membuat script di atas sedikit lebih fleksibel, sehingga memberikan Anda pilihan untuk mengubah gambar apapun menjadi gambar gray-scale dengan referensi seperti di bawah ini:
  <Img src = 'http://themeforest.s3.amazonaws.com/65_gd/grayscale.php?source=cat.jpg' alt ='' />
 
Jelas, Anda bisa mengisi 'sumber' dengan path ke setiap gambar yang Anda ingin memilikinya dikonversi ke skala abu-abu. Selanjutnya, silakan menerapkan langkah-langkah keamanan lebih lanjut jika Anda berencana untuk menggunakan ini pada server hidup. Juga script diatas mengharapkan untuk menerima gambar. Jpeg, Anda bisa mendapatkan kreatif dan memilikinya menerima semua jenis gambar jika Anda inginkan. Kucing Anda sekarang harus terlihat seperti gambar di bawah ini.

Lebih Filter

Untuk membungkus pelajaran ini, mari kita cepat melihat filter lain yang bisa kita gunakan dan hasil yang mereka hasilkan.

Kecerahan Filter

Menyesuaikan kecerahan gambar yang diberikan, parameter ketiga menyesuaikan kecerahan.
  <? Php
 header ('content-type: image / jpeg');

 $ Image = imagecreatefromjpeg ('cat.jpg');
 / / Parameter 3rd menerima tingkat kecerahan.
 imagefilter ($ image, IMG_FILTER_BRIGHTNESS, 40);
 imagejpeg ($ image,'', 90);
 imagedestroy ($ image);
 ?>
 

Gaussian Blur

Gaussian mengaburkan gambar, tidak ada parameter diterima.
  <? Php
 header ('content-type: image / jpeg');

 $ Image = imagecreatefromjpeg ('cat.jpg');
 imagefilter ($ image, IMG_FILTER_GAUSSIAN_BLUR);
 imagejpeg ($ image,'', 90);
 imagedestroy ($ image);
 ?> 
 

Kontras

Parameter ketiga menerima tingkat kontras.

 <? Php
 header ('content-type: image / jpeg');
 $ Image = imagecreatefromjpeg ('cat.jpg');
 imagefilter ($ image, IMG_FILTER_CONTRAST, - 15);
 imagejpeg ($ image,'', 90);
 imagedestroy ($ image);
 ?>

 

Berarti Removal (efek sketsa)

Tidak ada parameter diterima.
  <? Php
 header ('content-type: image / jpeg');
 $ Image = imagecreatefromjpeg ('cat.jpg');
 imagefilter ($ image, IMG_FILTER_MEAN_REMOVAL);
 imagejpeg ($ image,'', 90);
 imagedestroy ($ image);
 ?>
 

Colorize

Menerima nilai merah, hijau, biru, dan alpha channel (opsional) dalam urutan itu.
  <? Php
 header ('content-type: image / jpeg');
 $ Image = imagecreatefromjpeg ('cat.jpg');
 / / Parameter alpha channel dihilangkan bawah seperti opsional.
 imagefilter ($ image, IMG_FILTER_COLORIZE, 50, 0, 0);
 imagejpeg ($ image,'', 90);
 imagedestroy ($ image);
 ?> 

Sampai waktu berikutnya ...

Saya harap ini memberi Anda beberapa wawasan ke perpustakaan GD PHP. Pada bagian 2, kita akan membahas beberapa teknik yang lebih canggih, dan, tentu saja, bersenang-senang lagi.

artikel ini dikutip dari www*.themeforest.net

1 comments:

Aplikasi GIS Sederhana dengan Google Map dan Ajax jQuery dan php, mysql

Terimakasih buat google yang menyediakan layanan google map sekaligus menyediakan API untuk membuat aplikasi-aplikasi menggunakan google map. Sekarang mari kita belajar membuat aplikasi GIS sederhana dengan menggunakan google map. Di artikel ini kita akan melihat bagaimana menampilkan google map di website kita, bagaimana menandai suatu lokasi, memberi nama, deskripsi kemudian menyimpannya ke dalam database. Dan bagaimana menampilkan kembali lokasi yang kita tandai tersebut ke google map sekaligus menampilkan deskripsinya


Sekarang mari kita mulai membuat kode-kodenya
Pertama-tama mari kita buat tabel datagis di database yang nanti tempat kita menyimpan data lokasi. Berikut adah struktur tabel datagis di database :


--
-- Table structure for table `datagis`
--

CREATE TABLE `datagis` (
  `nomor` int(5) NOT NULL auto_increment,
  `x` decimal(8,5) NOT NULL,
  `y` decimal(8,5) NOT NULL,
  `namalokasi` varchar(100) NOT NULL,
  `deskripsi` text NOT NULL,
  PRIMARY KEY  (`nomor`)
);


Meloading Google Maps API
Untuk menampilkan google map di website kita adalah dengan memanfaatkan javascript API google map. Langsung aja kita lihat kode :


<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>


Kode di atas akan mengambil file javascript google maps api dan file css untuk google maps.

Elemen DOM Peta
Untuk nantinya menempatkan di mana kita letakkan google map diwebsite, kita perlu membuat elemen DOM, contoh :

Map Options
Ada beberapa option-option yang perlu di konfigurasi untuk menampilkan google map. Berikut contoh kodenya :

var belitung = new google.maps.LatLng(-2.801732, 107.6699666);
var petaoption = {
zoom: 9,
center: belitung,
mapTypeId: google.maps.MapTypeId.TERRAIN
};


Variabel belitung untuk menentukan titik awal lokasi mana yang ingin kita tampilkan pertama kali ketika menampilkan google map, dalam bentuk koordinat Latitudes dan Longitudes.
zoom, berguna untuk menentukan nilai zoom yang akan ditampilkan, semakin besar nilainya sebagai besar zoom petanya.
center, berguna untuk menentukan lokasi mana yang menjadi titik tengah peta ketika ditampilkan
mapTypeId, menentukan tipe peta yang akan ditampilkan di website kita, pilihan tipenya adalah : ROADMAP, SATELLITE, HYBRID, TERRAIN

Membuat dan Menampilkan Objek Peta
Setelah kita tentukan konfigurasi map yang akan kita tampilkan, maka kita buat objek map dan menampilkanya di elemen DOM yang telah kita buat sebelumnya.

peta = new google.maps.Map(document.getElementById("petaku"),petaoption);

Kode tersebut kita membuat objek google map, menempatkannya di elemen DOM yang mempunyai id "petaku" dan menggunakan petaoption yang telah kita tentukan sebelumnya.

Membaca Event Click
Setelah kita berhasil menampilkan google map di website, kita ingin apabila peta diklik, maka akan ada fungsi yang akan kita jalankan, misalnya fungsi kasihtanda()

google.maps.event.addListener(peta,'click',function(event){
kasihtanda(event.latLng);

});

Memberi Tanda di Google Maps
Pada kode membaca event click di atas kita menjalankan fungsi kasihtanda() untuk membuat tanda di google maps

function kasihtanda(lokasi){
tanda = new google.maps.Marker({
position: lokasi,
map: peta
});
}


Kode di atas akan membuat objek Marker, menentukan posisinya di mana, lokasi berupa koordinat Latitudes dan Longitudes yang di dapat ketika map di klik yaitu event.latLng, dan ditaruh di map yang mana, dalam hal ini adalah objek peta yang telah kita buat sebelumnya.

Kode Lengkapnya
Silahkan Download


23 comments:

Cara Membuat Shortcut Action Di Halaman Web dengan JQuery

Di dalam aplikasi desktop, seringkali kita mendengar istilah shortcut action untuk proses-proses tertentu. Sebagai contohnya adalah CTRL+P untuk proses mencetak halaman, CTRL+N membuat dokumen baru, CTRL+S untuk menyimpan dokumen dsb. Nah… bagaimana dengan aplikasi web??? apakah bisa kita menambahkan shortcut ke dalam aplikasi web kita? Misalkan kita ingin membuat shortcut F6 untuk mencetak halaman dari aplikasi web yang kita buat, atau kita ingin membuat beberapa shortcut untuk membuka beberapa halaman web. Misalkan CTRL+1 untuk membuka situs A, CTRL+2 untuk situs B, dst. Hal ini bisa kita wujudkan dengan mudah, dengan bantuan JQuery.

Untuk mewujudkan hal ini, kita membutuhkan script core JQuery nya (jQuery.js) dan plugin JQuery Shortcuts (jquery.shortcuts.min.js). Kedua file script tersebut dapat diunduh di sini.
Selanjutnya, berikut ini saya berikan contoh halaman web yang di dalamnya ada beberapa tombol short cut untuk action tertentu.

contoh.html

view sourceprint?

01.<html>

02.<head>

03.<title>jQuery Validation</title>

04.<script src="jquery.js"></script>

05.<script src="jquery.shortcuts.min.js"></script>

06.

07.<script>

08.$.Shortcuts.add({

09.type: 'down',

10.mask: 'P',

11.handler: function() {

12.window.print();

13.}

14.}).start();

15.</script>

16.

17.<script>

18.$.Shortcuts.add({

19.type: 'down',

20.mask: 'CTRL+G',

21.handler: function() {

22.window.open('http://www.google.com', '_self');

23.}

24.}).start();

25.</script>

26.

27.<script>

28.$.Shortcuts.add({

29.type: 'down',

30.mask: 'ALT+R',

31.handler: function() {

32.window.open('http://blog.rosihanari.net', '_blank');

33.}

34.}).start();

35.</script>

36.

37.<script>

38.$.Shortcuts.add({

39.type: 'down',

40.mask: 'F8',

41.handler: function() {

42.document.getElementById('title').innerHTML="Hallo";

43.}

44.}).start();

45.</script>

46.

47.<script>

48.$.Shortcuts.add({

49.type: 'down',

50.mask: 'F9',

51.handler: function() {

52.document.getElementById('title').innerHTML="Contoh Shortcut Action";

53.}

54.}).start();

55.</script>

56.

57.</head>

58.<body>

59.<h1 id="title">Contoh Shortcut Action</h1>

60.<ol>

61.<li>Cetak Halaman (P)</li>

62.<li>Buka Situs Google (CTRL+G)</li>

63.<li>Buka Situs Blog.RosihanAri.Net di window baru (ALT+R)</li>

64.<li>Ubah title menjadi 'Hallo' (F8)</li>

65.<li>Ubah title menjadi 'Contoh Shortcut Action' (F9)</li>

66.</ol>

67.</body>

68.</html>


Jika halaman web di atas dibuka di browser, maka hanya dengan menekan tombol P pada keyboard Anda dapat mencetak halaman tersebut. Apabila ditekan tombol CTRL + G maka secara otomatis akan membuka situs Google dst.
Adapun berikut ini penjelasan dari script JQuery nya.
view sourceprint?

01.<script>

02.$.Shortcuts.add({

03.type: 'down',

04.mask: 'P',

05.handler: function() {

06.window.print();

07.}

08.}).start();

09.</script>


Block script di atas berfungsi untuk membuat short cut pada tombol ‘P’ pada keyboard untuk menjalankan action mencetak halaman. Perintah cetak halaman ini dilakukan melalui perintah javascript window.print(). Dengan demikian, window.print() ini akan diexecute ketika diklik tombol ‘P’.

Sedangkan block berikut ini digunakan untuk membuka situs Google dengan short cut CTRL + G.

view sourceprint?

01.<script>

02.$.Shortcuts.add({

03.type: 'down',

04.mask: 'CTRL+G',

05.handler: function() {

06.window.open('http://www.google.com', '_self');

07.}

08.}).start();

09.</script>

Untuk membuka situs google tersebut, digunakan perintah window.open().
Mudah bukan membuatnya? Selamat mencoba ya :-)

artikel ini dikutip dari blog*.rosihanari.net

1 comments:

Menampilkan Gambar Pada HTML Tanpa File Terpisah

Umumnya untuk menampilkan gambar pada HTML membutuhkan sebuah tag misalnya <img src=”http://www.ilmuwebsite.com/images/tutorial/html7.jpg” />, tapi ternyata ada cara lain untuk menampilkan gambar tanpa file terpisah.
Caranya seperti biasa, hanya ditambahkan beberapa data pada atribut src saja.
<img src=”data:(MIME);base64,(base64)” alt=”" />
Penjelasan:
(MIME) diisi dengan jenis gambarnya, misal image/jpeg, image/png, image/gif, dll. Sedangkan (base64) maksudnya adalah data dalam bentuk biner yang telah di-encode dalam bentuk base64.
Misal saya ingin menampilkan gambar berjenis PNG, file gambarnya bernama gambar.png.
Langkah pertama adalah mengambil isi dari file gambar.png kemudian di-encode kedalam bentuk base64.
Potongan kode PHP dibawah ini saya buat sebagai contoh saja untuk mengambil isi dari file gambar.png kemudian tampilkan ke browser dan tulis kedalam file gambar.txt dalam bentuk base64.
<?php? $imgfile = “gambar.png”; //nama file
$imgbinary = base64_encode(fread(fopen($imgfile, “r”), filesize($imgfile))); /*masukkan data ke dalam variabel $imgbinary */

echo ‘<img src=”data:image/png;base64,’ . $imgbinary . ‘” alt=”" />’; /* tampilkan ke browser */
$handle = fopen(“gambar.txt”, “w”); /* buat handle untuk membuka file gambar.txt dengan mode write */
fwrite($handle, $imgbinary); /* tulis data dari variabel $imgbinary kedalam file gambar.txt */
fclose($handle); /* lepaskan handle */
?>

Oke selamat mencoba. Trims.

artikel ini di kutip dari www*.ilmuwebsite.com

0 comments:

Zurb & Twitter Bootsrap: Buat tampilan web makin cepat

Bagi Anda yang sudah lama di dunia web development pasti mengenal baik 960 grid system, sebuah pola css, yang bisa membuat tampilan website jauh lebih cepat, secepat yang diinginkan. 960 grid system ini berfokus pada tata letak sebuah tampilan website saja, menggunakan bantuan CSS2. Sebetulnya ini adalah formula dari seorang web designer yang sudah sangat veteran di dunia web design, sehingga dengan formula ini keseragaman adalah tujuannya.
Hasilnya bisa dilihat dengan jelas, tampilan website lebih cepat dibuat, lebih rapi, terarah, sehingga saya jamin, di browser web mana pun hasilnya akan sama rata, sama rasa. Jelasnya dengan pola 960 gridsystem ini Anda tidak perlu lagi mengetikkan satu demi satu div div layout, hingga menjadi banyak dan akhirnya jadi satu kesatuan. Tapi cukup gunakan saja polanya, tidak sampai setengah jam kerangka web Anda telah jadi, dan Anda tinggal merapikannya saja. Setelah Anda menggunakan grid system ini saya jamin, kedepannya Anda akan membuat desain yang lebih efisien mengacu kepada 960 grid system ini.
Silahkan cek http://960.gs jika Anda ingin mengetahui lebih jelas.


Zurb Foundation 3
Zurb  & Twitter Bootsrap: Buat tampilan web makin cepat web desain grafis
Namun baru-baru ini bukan hanya 960 grid system yang membuat web designer dipermudah pekerjaannya, tapi perusahaan Zurb membuat sebuah pondasi yang bisa dimanfaatkan oleh para web designer, jelasnya semakin cepatlah nantinya pekerjaan web designer. Ialah Zurb Foundation v.3, yang dikeluarkan oleh Zurb. Zurb Foundation 3 sebetulnya merupakan pengembangan dari 960 grid system, tidak hanya pola saja, tapi Zurb Foundation memiliki Basic UI Elements, membuat button jadi jauh lebih cepat, form yang sudah diberikan style sehingga kita cukup memakainya saja, dan lakukan sedikit perubahan sesuai dengan keinginan, di samping itu zurb foundation pun memiliki javascript yang sudah terintegrasi dengan basenya.
Silahkan cek http://foundation.zurb.com/ untuk lebih lengkap


Twitter Bootstrap
Zurb  & Twitter Bootsrap: Buat tampilan web makin cepat web desain grafis
Bootstrap twitter ini lebih memfungsikan dirinya sebagai salah satu framework yang memudahkan web designer dalam bekerja. Pembuatanya mengatakan Grid System bukanlah segalanya, tapi membuat website menjadi tahan lama dan fleksibel adalah intinya, sehingga proses pengembangan menjadi sangat sederhana. Twitter bootstrap menjajikan developer untuk membuat website yang responsive, sehingga tampilan website akan bagus dilihat diberbagai device, tentunya dengan menyesuaikan device tersebut. Misalkan ketika tampilan website Anda diakses menggunakan pc, ataupun smartphone maka akan menyesuaikan.
Mungkin Anda akan semakin tertarik karena Anda tidak perlu mengkhawatirkan desain website Anda akan berbeda di browser Internet Explorer, karena tampilannya akan sama dengan browser yang lain.
Info lengkap Silahkan cek http://twitter.github.com/bootstrap/

artikel ini di kutip dari www*.ilmuwebsite.com

0 comments: