Kamis, 19 Februari 2009

Membuat Halaman Web Menjadi Search Engine Friendly

Disini saya akan coba terangkan bagai mana membuat halaman suatu website search engine friendly
sebenarnya yang saya jelaskan disini adalah On Page Optimization


--// Website search engine friendly : adalah suatu website yang mempunyai system/ layout yang mempermudah proses crawling search engine bot.


--// OnPage Optimization : adalah proses peng - optimalisasian halaman / page suatu website, dalam membantu mempermudah proses crawling search engine bot.


oke saya akan langsung saja to the point:


beberapa sisi yang harus kamu perhatikan


1. <title>Tekhnik Exploit Password WinXP | ilmuwebsite.com</title>


perhatikan hasil pencarian keyword "exploit winxp" di google di bawah ini:
dari pencarian 2,090,000 halaman, www.ilmuwebsite.com menempati ranking 4 untuk keyword "exploit winxp"



google sangat memperhatikan penggunaan "Title"


2. <h1>tutorial php</h1>
<h1> keyword-mu-disini </h1> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect


3. <h2>flash tutorial</h2>
<h2> keyword-mu-disini </h2> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect


4. <b> keyword-mu  </b>
sangat - sangatlah penting, kita menunjukkan ke google bahwa kata yang di cetak tebal dengan <b></b> adalah kata penting
dan di anggap keyword, percayalah.. saya sudah membuktikan


5. <i> keyword-mu  </i> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect


6. <u> keyword-mu  </u> ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect


7. <alt> letaknya -->> <img src="picture1.jpg" alt="keyword-mu">
 ini bisa dipakai untuk mengukuhkan keyword tapi tidak terlalu effect


 


terus tips2 yang lain yaitu


coba letakkan content2 yang penting di awal urutan website


Sumber dari situs Ilmu Website dalam kategori search engine tutorial dengan judul Membuat Halaman Web Menjadi Search Engine Friendly

Tab CSS Menu Sederhana



Suka dengan CSS menu? cobalah membuat CSS menu anda sendiri.

Berikut ada contoh membuat menu CSS sederhana, untuk proses belajar anda bisa memodifikasinya :)
Code nya:

------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//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=ISO-8859-1"/>
         <title>DHTML Tab,JavaScript Tab</title>
    <style type="text/css">
         #tabs {display: block;float: left;width: 160px;}
         .panel
{border: solid 1px #D8D8D8;border-top: none;background-color:
#FFFFFF;padding: 0px;width: 158px;overflow: auto;clear: left;}
         .tab_bdr{padding:
0px;width: 158px;border: 0px;border: 1px solid #645DB5;height:
4px;margin:0px;background: #645DB5;clear: left;font-size: 0px;}
         .tab{font-family:tahoma;
FONT-SIZE:
11px;background:#BA0808;color:#FFFFFF;cursor:pointer;border:none;border-bottom:
1px solid #FFFFFF;height:19px;padding-top:3px;margin:0px;width:60px;
float:left; text-decoration:none;}
         .tab_sel{font-family:tahoma;
FONT-SIZE:
11px;background:#645DB5;color:#FFFFFF;cursor:pointer;border:none;border-bottom:1px
solid #645DB5;height:19px;padding-top:3px;margin:0px;width:60px;
float:left; text-decoration:none;}
    </style>
    <script language="JavaScript" type="text/javascript">
    var panels = new Array('panel1', 'panel2'); // IDs of the content panels must be put here
    var tabs = new Array('tab1', 'tab2'); // IDs of the tabs must be put here
    function displayPanel(nval)
    {
         for(i = 0; i < panels.length; i++)
         {
            
document.getElementById(panels[i]).style.display = (nval-1 == i) ?
'block':'none';
            
document.getElementById(tabs[i]).className=(nval-1 == i) ?
'tab_sel':'tab';
         }
    }
    </script>
    </head>
    <body>
         <div id="tabs">
            
<div id="tab1" class="tab_sel" align="center" onClick="javascript:
displayPanel('1');">Tab&nbsp;1</div>
            
<div id="tab2" class="tab" style="margin-left:1px;" align="center"
onClick="javascript: displayPanel('2');">Tab&nbsp;2</div>
         </div>
   
<div class="tab_bdr"></div> <!-- This is the div used to
show a thick border below the tab and above the panel-->
         <div
class="panel" id="panel1" style="display: block">1</div>
<!-- The display panels for the respective tabs can be put here
-->
         <div class="panel" id="panel2" style="display: none">2</div>
    </body>
</html>

------------------------------

contoh jadi: http://www.ilmuwebsite.com/test/css-tab.htm
Terimakasih

Sumber dari situs Ilmu Website dalam kategori html dengan judul Tab CSS Menu Sederhana

Membuat Poster Film Action


  Kita akan mencoba membuat sebuah "Poster Film Action".
 
Ciptakan dokumen baru dengan ukuran  750x550 pixels
Buka gambar penjara di seperti di bawah ini, drag kedalam dokumen baru yang kita buat tadi dan berikan nama penjara untuk layer gambar penjara ini.

Lakukan duplikat pada layer penjara dan beri nama Blurred Penjara.
  Select layer penjara dan masuk ke menu: Filter > Blur > Lens Blur. Centang pada Faster, rubah Blur Focal Distance menjadi 0, Iris Shape menjadi  Hexagon(6), Radius menjadi   25, Blade Curvature menjadi   0, Rotation menjadi   0,  Brightness menjadi   0, Threshold menjadi   255, Noise menjadi   0 dan Distribution menjadi    Uniform
 

Buka gambar orang nembak seperti ini
Crop dengan menggunakan Pen tool, dengan tujuan menghilangkan background nya. Sehingga tersisa orang nya saja.
 

Drag gambar orang di atas menuju ke dokumen baru kita. Rename layer orang ini dengan nama Hero. Lakukan resize dan sesuaikan ukurannya.
Pilih  Soft Eraser tool dengan ukuran 800pt, klik satu kali di tengah2 layer Blurred penjara
 

Ciptakan sebuah layer baru di atas Hero dan berian nama Bayangan.
Lakukan Fill terhadap layer itu dengan warna #000000 gunakan Paint Bucket. Sesuaikan opacity nya layer ini menjadi 80%.

Pilih Soft Eraser tool dengan ukuran 800pt, klik satu kali di tengah2 layer Bayangan.
 

  Layer > New Adjustment Layer > Hue/Saturation   diatas semua layer, dengan komposisi :
Dan set Hue menjadi 0, Saturation menjadi -40 dan Lightness menjadi 0.

  Layer > New Adjustment Layer > Exposure Adjustment diatas semua layers.
Dan set  Exposure menjadi +0.6, Offset menjadi -0.01 dan Gamma Correction menjadi 1.2.

  Layer > New Adjustment Layer > Levels Adjustment diatas semua layers.
  Dan set Set nilai menjadi 20, 1, 240 dan kamu akan selesai :)
 


Sumber dari situs Ilmu Website dalam kategori photoshop dengan judul Membuat Poster Film Action

Script Deteksi Resolusi Layar Monitor

Posted By: Al-k

Script Deteksi Resolusi Layar Monitor

18-02-2009 | 09:47:02 | Halaman Ini dibaca 248 kali




Sekian lamaaa.... aku menunggu... untuk kedatanganmuuu… :D~ Itu kata bang Ridho Rhoma di lagu yang judulnya Menunggu.:D~. Mohon maaf, lagi-lagi penulis terlambat untuk mempublish artikel terbaru. Seperti biasa, alasan penulis adalah karena banyaknya kesibukan yang merupakan tuntutan kehidupan, penulis juga manusia. :D Mohon maaf.
Ya, baru-baru ini penulis mendapatkan sebuah kasus, seorang staff pada sebuah instansi bertanya kepada penulis, bagaimana caranya mencocokan tampilan website dengan resolusi layar monitor user. Tampilan website yang dibuka menggunakan PDA, Handphone, laptop, maupun PC itu berbeda satu sama lain. Bagaimana membuat tampilan website yang dibuka menggunakan handphone atau mobile tidak selebar ketika seorang user membukanya dengan menggunakan PC, ataupun laptop? Ya semua itu akan dibahas disini. Penulis coba jelaskan serinci mungkin.
Dalam tutorial php kali ini penulis akan memberikan sebuah contoh kasus, yakni tampilan website yang dibuka dengan laptop beresolusi 1280x800 px, berbeda dengan tampilan website ketika dibuka dengan menggunakan PC bersolusi 1024x768 px. Tampilan website yang dibuka dengan laptop beresolusi 1280x800 px sedikit lebih lebar, menyesuaikan resolusi yang ada.

Berikut adalah tampilan website ketika dibuka dengan Laptop beresolusi 1280x800 px.


Dan tampilan website ketika dibuka dengan PC beresolusi 1024x768 px.


Tampilan website yang dibuka dengan laptop beresolusi 1280x800 px sedikit lebih lebar diakibatkan dari script deteksi resolusi layar monitor.

Ya, berikut adalah source code inti dari script deteksi resolusi layar monitor :

session_start();

if (isset($_REQUEST['r']))
{
header("location: res.php");
}

echo "";

if(!isset($_SESSION['lebarlayar']))
{
echo ">";

if(isset($_GET['width']) && isset($_GET['Height']))
{
$_SESSION['lebarlayar'] = $_GET['width'];
$_SESSION['tinggilayar'] = $_GET['Height'];
}
}


else if (isset($_SESSION['lebarlayar']) && isset($_SESSION['tinggilayar']))
{
if ( $_SESSION['lebarlayar'] == 1024 && $_SESSION['tinggilayar'] == 768 )
{
echo "";
}

else if ( $_SESSION['lebarlayar'] == 1280 && $_SESSION['tinggilayar'] == 800 )
{
echo "";
}
}

else
{
echo "";
}

?>

Sebelum penulis jelaskan baris demi baris source code di atas, perlu diketahui cara kerja script ini adalah sebagai berikut :
Script ini menggunakan fasilitas yang dimiliki oleh javascript dalam mengecek resolusi browser, disini sebetulnya script deteksi resolusi layar monitor ini tidak secara langsung mengecek screen resolution milik sistem operasi yang ada, melainkan script deteksi resolusi layar monitor ini memanfaatkan fasilitas dari java script. Fasilitas tersebut adalah screen.width, dan screen.height. Fasilitas ini dimanfaatkan dengan cara meredirect browser menuju satu url dimana didalam url tersebut terdapat isi dari nilai screen.width.

Syntax javascriptnya seperti ini :
document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&Height=\"+screen.height;

maka, hasil dari urlnya akan menjadi seperti ini
http://localhost/index.php?r=1&width=1024&Height=768;

kemudian, nilai dari resolusi layar tersebut diambil dan dijadikan ke dalam variable berikut :
$_GET['width'] dan $_GET['height']

Setelah itu variable global $_GET tersebut diregistrasikan sebagai session untuk dapat diakses diseluruh halaman. Penulis sarankan anda mengimplementasikannya dengan menggunakan cookie, karena session memiliki keterbatasan waktu, defaultnya hanya 15 menit, bergantung dari konfigurasi php.ini masing webhosting, berbeda halnya jika anda memiliki otoritas penuh untuk merubah php.ini seperti pada localhost. Dengan menggunakan cookie anda dapat mensetting waktu deteksi resolusi layar monitor jadi lebih lama, bahkan anda dapat menyetelnya sangat lama sekali. Namun, dalam tutorial kali ini, penulis hanya menjelaskan implementasi deteksi resolusi layar monitor menggunakan session saja....

Perhatikan barisan source code berikut :

Jika session yang menangani lebar layar belum di registrasikan ...
if(!isset($_SESSION['lebarlayar']))
{

maka lakukan redirect browser si user menuju url yang didalamnya telah terdapat 2 buah variable yang nilai kedua variable itu telah di isi screen.width dan screen.height
echo ">";

Statement intinya sebetulnya hanya :
document.location=\"$PHP_SELF?r=1&width=\"+screen.width+\"&Height=\"+screen.height;

yang jika dijalankan dilocalhost, maka akan menghasilkan :
http://localhost/index.php?r=1&width=1024&Height=768;

kemudian ambil nilai ke dua variable dalam url tersebut menggunakan $_GET.
if(isset($_GET['width']) && isset($_GET['Height']))
{

Registrasikan variable-variable tersebut sebagai session agar dapat diakses di seluruh halaman website (di sini anda dapat menggunakan cookie)
$_SESSION['lebarlayar'] = $_GET['width'];
$_SESSION['tinggilayar'] = $_GET['Height'];
}
}


Kemudian perhatikan kembali barisan berikutnya :

Jika session dari lebarlayar, dan tinggilayar telah diregistrasikan,
else if (isset($_SESSION['lebarlayar']) && isset($_SESSION['tinggilayar']))
{

Dan jika lebarlayar yang dihasilkan oleh screenwidth itu adalah 1024, dan tinggilayar yang dihasilkan oleh screen.height itu adalah 768,
if ( $_SESSION['lebarlayar'] == 1024 && $_SESSION['tinggilayar'] == 768 )
{

Jadikan ./templates/template.1024x768.css sebagai tampilannya,
echo "";
}

Begitu juga jika lebarlayar yang dihasilkan oleh screenwidth itu adalah 1280px, dan tinggilayar yang dihasilkan oleh screen.height itu adalah 800px,
else if ( $_SESSION['lebarlayar'] == 1280 && $_SESSION['tinggilayar'] == 800 )
{

Maka jadikan ./templates/template.1280x800.css sebagai tampilannya,
echo "";
}


Tentunya banyak sekali perbedaan, anda bukan hanya dapat mengganti templatenya saja melainkan keseluruhan tampilan website, baik itu bentuk form, ataupun banner, dalam bentuk css yang table less maupun table sekalipun. Dan terakhir lihat di paling atas source code tersebut :

Sebetulnya barisan code ini hanya berfungsi untuk menangani redirect browser, agar url website disetiap halaman tidak kotor. Karena script deteksi resolusi layar monitor ini akan selalu memiliki url seperti :
http://localhost/index.php?r=1&width=1024&Height=768;

Oleh karena itu untuk penanganannya adalah menggunakan barisan code dibawah ini :
if (isset($_REQUEST['r']))
{
header("location: res.php");
}

Ya, penulis rasa cukup jelas ya. Selanjutnya penulis akan bawakan penggunaan cookie dalam script deteksi resolusi layar monitor dan tentunya implementasinya dibuat agak sedikit kompleks. Source code tersebut dapat didownload di sini ...
download script deteksi resolusi layar monitor

Untuk melihat hasil dari script tersebut ...
http://www.kmmpt.info/zineilmuwebsite/tutorial/deteksi/res-detect.php

Selamat mencicipi. :D

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, nadjwa, xfreecode, minang-media, safril, Lapak-online Team!

Lebih dalam dengan operasi string bag.1


Operasi string begitu penting dalam dunia per-php-an. Kenapa begitu penting ? Karena melakukan pekerjaan dengan php, baik itu membangun suatu sistem informasi, membuat fasilitas searching di web, dan berbagai hal lain yang berhubungan dengan web development tak lepas dari operasi string. Begitu banyak fungsi operasi string yang ada, dan banyak pula fungsi string yang sering digunakan, sehingga penulis perlu membaginya menjadi beberapa artikel mengenai operasi string ini. Untuk artikel bagian pertama penulis akan menjelaskan 2 fungsi yang memiliki tugas tambahan selain dari mencari string. Antara lain :

  • substr()
  • strstr()

Substr(), memiliki fungsi untuk mengambil satu, atau banyak karakter dari suatu variable. Implementasinya seperti mengambil karakter yang dihasilkan dari fungsi DATE() –nya mysql. Contoh penggunaannya adalah sebagai berikut :

<?php
$tanggal = '012409';

$bulan = substr($date, 0, 2);
$hari = substr($date, 2, 2);
$tahun = substr($date, -2);

echo "$hari/$bulan/$tahun";
?>

Hasilnya adalah :
24/01/09

Penjelasannya adalah sebagai berikut :

$bulan = substr($date, 0, 2);
Ambil 2 karakter dari digit terdepan, hasilnya adalah 01

$hari = substr($date, 2, 2);
Ambil 2 karakter dari digit ke 3. Karena string  memiliki urutan awal 0, maka angka 2 pada variable $tanggal memiliki posisi di urutan ke 2. Hasilnya adalah 24.

Untuk membuktikannya :
<?php
$tanggal = '012409';
echo $tanggal[2];
?>

hasilnya adalah :
2

Dan yang terakhir adalah
$tahun = substr($date, -2);
Ini berarti ambil 2  karakter dari belakang. Hasilnya adalah 09.


Strstr(),  fungsi ini digunakan untuk mengembalikan semua string dibelakang string yang dicari. Misalnya ada sebuah kalimat :
"Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k",
karakter yang dicari adalah "--",
maka hasil dari fungsi strstr() adalah "--Al-k"

Contoh penggunaanya :

<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';
$yangdicari = strstr ($kalimat, $tanda);
echo $yangdicari;
?>

Hasilnya adalah :
--Al-k

Implementasi penggunaan strstr() contohnya seperti ini :
<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
   echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
   echo "Nggak ada ungkapan tuhh !!";
}
?>

Penjelasannya adalah sebagai berikut :

if ($yangdicari = strstr ($kalimat, $tanda)) {
jika karakter yang di cari dalam hal ini $tanda ada pada  string $kalimat, maka kembalikan string yang berada di belakang tersebut kedalam variable $yangdicari.

echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";

bagian intinya adalah substr ($yangdicari , strlen ($tanda))

Jika di ubah kedalam nilai sebenarnya adalah
substr ("--Al-k" , 2 )

tampilkan string yang dicari tersebut dengan melewatkan tanda --.

Hasilnya adalah :
Al-k

Sehingga hasil keutuhan dari script

<?php
$kalimat= "Ketampanan abadi terpancar dari Kegantengan sejati . --Al-k";
$tanda = '--';

if ($yangdicari = strstr ($kalimat, $tanda)) {
   echo 'Ungkapan yang keren tadi di buat oleh '."'". substr ($yangdicari , strlen ($tanda))."'";
} else {
   echo "Nggak ada ungkapan tuhh !!";
}
?>

Adalah :

Ungkapan mantap tadi di buat oleh 'Al-k'

Cukup mudah ya ? Cukup narsis juga ! :D

Artikel Lebih dalam dengan operasi string bagian pertama saya cukupkan sampai disini. Untuk bagian ke 2 dan terakhir akan penulis jelaskan di belajar php berikutnya.

Greetz : b_scorpio, abuzahra, peterpanz, kandar, phii_, syahrilrohman, ivan, dr.emi, safril, najwa, Lapak-online Team!


Sumber dari situs Ilmu Website dalam kategori php kuliah dengan judul Lebih dalam dengan operasi string bag.1