30 June 2007

Slow But Sure

Seperti yang pernah saya beritakan sebelumnya, friendster telah menggunakan Google search sebagai search engine barunya. Dan ternyata ini belum berhenti disitu. Coba anda perhatikan tombol tambahan baru yang diletakan di halaman profile anda, yaitu tombol costumize page. Dulu untuk merubah tampilan layout di friendster anda perlu masuk ke halaman edit profile dulu baru ke costumize page, namun dengan tombol baru itu, kini anda bisa langsung menuju ke halaman costumize page.

Masih dihalaman yang sama, kini friendster telah menyediakan beberapa skin baru untuk anda pilih, diantaranya Nitendo Wii dan Zelda. Skin tambahan ini sepertinya tidak terlepas dari sponsor yang ada dibelakangnya. Terbukti dengan adanya beberapa layout yang bertema Nitendo Wii, dan juga beberapa skin lainnya yang mewakili game-game unggulan dari pabrikan konsole Jepang ini.

Trasformasi selanjutnya ada pada halaman upload foto beserta kapasitasnya. Bila dulu anda hanya diizinkan menyimpan 50 foto di setiap profile, kini anda bisa meng-upload foto hingga 100 buah. Perubahan selanjutnya masih berhubungan dengan foto, yaitu gallery foto "pribadi anda". Kini gallery dikelompokan menjadi 3 folder, yaitu public, private, dan upload by friend.

Dan perubahan terakhir dan sekaligus yang paling terlihat tentu saja pada dashboard. Kini halaman itu memiliki beberapa bagian utama, diantaranya, foto anda , message, menu utama, drop down menu tambahan, friend update, dan foto teman-teman anda. Dan dari drop down yang ada ini, anda bisa langsung masuk ke halaman costumize page tanpa perlu melalui profile anda.

Tapi sayang, dengan berbagai perubahan tadi, jangankan untuk memasukkan kode Java Script ataupun iframe untuk guest book, elemen-elemen yang dapat dirubah melalui CSS pun masih sangat terbatas jumlahnya. Dan terkadang bila kode CSS anda tidak diizinkan, maka tanpa pandang buluh, kode itu akan "dimusnahkan" olehnya.

27 June 2007

IE Hack

Bila anda sudah pernah membaca tulisan saya sebelumnya yaitu tentang padding dan margin, pasti anda akan mudah mengerti tulisan berikut. Kali ini saya akan lebih menjelaskan tentang penggunaan padding, terutama cara 'mendamaikan' perbedaan yang ada antara Internet Explorer dengan Firefox. Seperti yang telah diketahui, IE dibuat sebagai browser yang eksklusif, karena ia tidak mengikuti aturan standar yang ditetapkan w3s. Untuk memngetahui perbedaan yang ada, coba ketikan kode berikut kemudian simpan dengan nama "file.html" dan buka file baru tadi dengan browser yang berbeda-beda.



<html>

<head>

<style>

#test {

background: #000 url(killua3.jpg) no-repeat center center;

height: 192px;

width: 115px;

padding: 10px;

}

</style>

</head>

<body>

<div id="test"></div>

</body>

</html>

Saya sengaja menempatkan gambar "killua3.jpg" sebagai latar box yang ingin dipelajari agar memudahkan melihat perbedaan antara kedua browser tadi. Bila anda tidak mempunyai filenya anda bisa menggantinya dengan file gambar lain yang memiliki warna mayoritas putih dan berukuran 115x192 piksel. Perhatikan screenshoot berikut untuk melihat perbedaannya.

Akan terlihat border hitam di sekitar box yang ada bila file tersebut dibuka menggunakan Firefox, sedangkan hal ini tidak terjadi bila menggunakan IE. Untuk mengakalinya mungkin anda mengurangi 20px dari ukuran panjang dan lebar dari box tadi, namun dengan cara ini area untuk text pada IE menjadi berkurang dan tetap saja tampilan di kedua browser tadi akan tampak berbeda, untuk itu anda perlu merubah code dari file "file.html" yang telah dibuat tadi menjadi seperti berikut.



<html>

<head>

<style>

#test {

background: #000 url(killua3.jpg) no-repeat center center;

height: 172px !important;

height: 192px;

width: 95px !important;

width: 115px;

padding: 10px;

}

</style>

</head>

<body>

<div id="test"></div>

</body>

</html>

Dengan kode yang baru ini, border yang tampil di Firefox tadi akan hilang dan tampilannya akan sama seperti di IE. Maksud kode tambahan diatas adalah, variabel yang sama tetapi ditambahkan dengan "!important" akan membuat variabel sama yang lain diacuhkan. Jadi untuk tinggi kotak yang dipakai adalah yang 172px bukan 192px. Namun tidak seperti Firefox dan Opera, ia tidak mengenal code tambahan ini, maka sesuai dengan sifat html yaitu yang terakhir ditulis adalah yang penting sebaliknya di Firefox dan Opera yang penting adalah yang ditandai code "!important".

Mungkin agak sulit dimengerti, karena memang susunan tulisan saya yang memusingkannya, jadi saya sarankan untuk membaca kodenya berulang-ulang untuk bisa lebih mengerti lagi. Intinya di Firefox dan Opera tag/variabel css yang dianggap penting adalah yang ditandai dengan code "!important" dan tag/variabel lain yang mendeskripsikan hal yang sama (ex: sama2 height atau width) akan diacuhkan atau dianggap tidak ada, sedangkan di IE tag yang penting adalah yang terakhir ditulis.

Padding and Margin

Hal yang sering digunakan untuk mempercantik halaman web adalah dengan cara memberikan jarak antara satu elemen dengan elemen lainnya. Untuk mengatur kedua hal itu, CSS menawarkan solusinya dengan menawarkan variabel-variabel yang berhubungan dengan peletakan elemen tadi, yaitu padding dan margin.

Padding merupakan jarak antara isi dari elemen dengan garis terluar dari elemen itu sendiri, sedangkan margin adalah jarak antara satu elemen dengan elemen lainnya. Dalam CSS, variabel padding dan margin bisa ditulis dengan beberapa cara. Cara pertama adalah dengan menuliskan masing-masing padding/margin untuk setiap sisi yang berbeda.


margin-top: 3px;

margin-bottom: 5px;

margin-left: 10px;

margin-right: 6px;

Cara kedua adalah menggabungkan keempat kode diatas menjadi satu variabel yang lebih ringkas. Dengan cara ini, setiap ukuran padding/margin dituliskan berdasarkan arah jarum jam. Jadi yang pertama adalah top, lalu right, kemudian bottom, dan terakhir left. Perhatikan contoh dibawah ini.



padding: 3px 6px 5px 10px;

Terakhir, bila jarak semua margin sama, anda bisa menuliskannya dengan lebih ringkas lagi, yaitu cukup dengan menuliskan, margin: 5px, atau padding: 5px. Semua contoh yang diberikan disini memang hanya menggunakan satuan piksel(px) untuk setiap jarak yang ada, namun sebenarnya anda juga bisa mempergunakan satuan-satuan lain, seperti punt/point(pt), ataupun e.m.

Dan untuk bisa lebih memahami perbedaan antara padding dan margin itu sendiri, anda bisa memperhatikan contoh screen shoot berikut ini.

Vista Window

Di tulisan saya sebelumnya, saya menjelaskan bahwa dengan menggunakan efek transparansi dari kode-kode CSS, anda bisa membuat suatu elemen di halaman situs anda menyerupai tampilan jendela aplikasi yang setengah transparan milik windows vista. Masalahnya adalah bagian yang ada di dalam elemen yang diberi efek aero itu juga ikut transparan, sehingga teks yang seharusnya hitam pun, menjadi keabu-abuan. Masalah itu bisa diselesaikan dengan 3 kode CSS lainnya, yaitu position, top dan left.

Coba anda ketikkan kode dibawah ini di notepad anda, lalu simpan dengan nama "file.html", dengan sebelumnya mengganti pilihan Save as type ke All files.

<html>

<head>

<style>

body {

background: url(planning/images/Sasuke.jpg) center center;

}



.window {

background: #03f url(images/tab_blue.png) repeat-x top center;

-moz-opacity: 0.6;

padding: 20px 5px 5px 5px;

height: 125px;

width: 200px;

}



.content_box {

background-color: #fff;

position: relative;

top: -125px;

left: 0;

height: 120px;

width: 200px;

}

</style>

</head>

<body>

<center>

<div class="window">

</div>

<div class="content_box">

Teks

</div>

</center>

</body>

</html>

Bila anda benar menuliskan kodenya, maka hasil tampilan dari file tadi akan terlihat seperti gambar di bawah ini.

Tapi sayangnya anda tidak mungkin menyamai hasil seperti dibawah ini, karena anda tidak mempunyai file gambar Sasuke.jpg dan tab_blue.png yang saya "sematkan" di kode2 tadi, karena file itu hanya ada di desktop saya. Namun anda bisa mengganti kedua gambar tadi dengan gambar apapun yang anda mau.

Background Style

Seperti halnya desktop anda, element dari suatu halaman website dapat dipercantik dengan cara memodifikasi background atau latar belakang yang ada. Bisa menggunakan warna tertentu ataupun gambar yang anda inginkan. Namun bila gambar yang anda pilih, konsekuensinya adalah waktu load akan semakin lama. Perlu diketahui, secara standar di beberapa browser, element yang tidak diatur latar belakangnya akan memiliki background yang transparan. Coba anda perhatikan kode-kode dibawah ini untuk mempelajari penggunaan background.


<html>

<head>

<style>

body {

background-color: #000;

background-image: url(images/css.gif);

background-repeat: repeat-x;

background-attachment: fixed;

}



.box {

background: #fff url(images/killua3.jpg) repeat-x scroll;

height: 100px;

width: 100px;

}

</style>

</head>

<body>

<center>

<div class="box"></div>

</center>

</body>

</html>

Langsung saja pada bagian pertama atau pada bagian style untuk body, disitu tertulis background-color: #000, yang berarti halaman itu memiliki background berwarna hitam, nilai #000 juga bisa ditulis dengan "black". Lalu background-image: url(..) dan background-repeat: repeat-x, berarti halaman akan memiliki background berupa file gambar css.gif yang diulang-ulang secara horizontal. Sedangkan background-attachment: fixed; berarti background gambar tadi akan diam meskipun halamannya digulung.

Nilai dari masing-masing element tadi masih bisa anda ubah sesuka anda, seperti repeat-y dan no-repeat untuk background-repeat dan scroll untuk background-attachment. Keempat kode-kode tadi (color, image, repeat, & attachment) bisa anda gabungkan dalam satu kode seperti yang digunakan pada element .box. Perhatikan gambar berikut untuk menganalisa kesalahan yang ada.



Apa anda sudah mengetahui kesalahan yang ada, ya element box yang ada ditengah-tengah halaman seharusnya memiliki background berupa gambar killua3.jpg yang ada di direktori images. Hal itu terjadi karena ketika halaman itu dibuka, browser tidak menemukan file killua3.jpg tadi, maka yang ditampilkan hanyalah element box yang memiliki latar belakang berwarna putih. Karena kotak .box masih memiliki background cadangan yaitu #fff, maka seperti itulah hasilnya. Seperti yang dijelaskan diatas, bila tidak ada angka hexa tadi (#fff) maka .box akan memiliki background transparan.

Sebenarnya ada satu kode CSS lagi yang berhubungan dengan background, yaitu background-position, yang bisa diisi dengan "top left", "top center", "top right", dan seterusnya. Kode ini berguna untuk menentukan posisi awal dari gambar latar belakang suatu elemen terhadap element itu sendiri. Jadi bila nilai "top right" yang diberikan, maka gambar latar akan berada di sudut kanan atas dari element tersebut.

Text Indent

Scripting HTML murni tidak mengenal tombol tab maupun enter, maksudnya anda perlu memasukan kode tambahan sekedar untuk membuat baris baru ataupun memberikan jarak pada awal paragraf anda.

Bila tombol enter bisa digantikan dengan sebuah tag <br>, maka anda memerlukan kode css untuk memberi sedikit jarak pada awal paragraf. Kode yang dimaksud adalah text-indent, text-indent berarti jarak antara huruf pertama pada awal paragraf anda dengan bagian terkiri pada paragraf itu.

Contoh hasil dari kode diatas adalah semua indent pada tiap paragraf yang ada di blog ini. kode yang diberikan adalah <p style='text-indent: 35px'>text</p>. Nilai 35px bisa diganti sesuai keinginan anda.

Karena tidak mungkin menulis kode tersebut di tiap paragraf yang ada, maka untuk membuat text-indent pada semua paragraf anda, maka anda perlu memasukan kode dibawah ini pada bagian style di halaman situs anda.


p {

text-indent: 35px;

}

Dengan kode diatas, secara otomatis semua paragraf yang ada di halaman anda akan memiliki indent yang sama, yaitu 35 piksel.

Aero on The Web

Transparansi di sebuah halaman web adalah suatu hal yang menarik, karena dengannya anda bisa membuat elemen di dalam situs anda memiliki efek aero yang ada pada sistem operasi terbaru milik Microsoft, Windows Vista. Tidak percaya, lihat contoh dibawah ini.



Text



Berikut adalah source kodenya:


<style>

.bg {

background: #fff url(images/colortable.gif) no-repeat center center;

width: 279px;
height: 57px;
padding: 5px;
}

#text {

opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.7;
height: 30px;
width: 100px;
background: #fff;
border: 3px solid #666;

}




Memang banyak kode di situ, namun yang perlu anda perhatikan adalah pada bagian yang diapit oleh tag <style> dan </style>, terutama pada 3 baris setelah #text, karena yang kita pelajari kali ini adalah kode" yang berhubungan dengan transparansi tersebut.

Langsung saja, opacity adalah kode dasar transparansi untuk semua browser, filter:alpha(opacity=); digunakan untuk menentukan tingkat tembus pandang pada browser Internet Explorer, sedangkan -moz-opacity digunakan khusus untuk browser Firefox milik keluarga monster. Nilai 0.7 dan 70 pada tiap-tiap kode berarti objek yang diberikan kode tersebut memiliki tingkat transparansi sebesar 70% dari objek aslinya, nilai ini bisa diganti dengan 0.1 - 1.0 ataupun 0 - 100, dimana semakin kecil nilai yang diberikan pada objek tersebut, maka semakin transparan objek itu, begitu juga sebaliknya.

26 June 2007

Try the Hard One

Awal minggu ini saya membeli sebuah tabloid, yaitu PC Mild. Karena kebetulan dibundel dengan sebuah CD, maka kali ini saya harus mengeluarkan uang sedikit lebih banyak dari biasanya. Karena kebetulan kali ini topiknya kurang menarik, maka setelah "bosan" membaca tabloidnya, saya mulai melihat-lihat isi dari CD 'gratis' dari tabloid tadi. Hal pertama yang menarik bagi saya adalah kumpulan software yang mereka sebut visual web editor.

Singkatnya, itu adalah sekumpulan software pembuat halaman web yang kira-kira hampir sama dengan Dream Weaver milik macromedia. Keunggulan dari software-software tadi adalah penggunaan GUI untuk mempermudah penggunanya dalam membuat setiap halaman web, jadi mereka bisa membuat halaman web semudah membuat document di Microsoft Word. Namun ternyata tidak semudah itu juga, saya justru mendapat berbagai kendala dalam penggunaannya.

Dengan spesifikasi komputer yang sudah "tidak layak jalan" (Pentium 1, RAM 32mb, HD 512mb, windows 98), maka otomatis aplikasi-aplikasi tadi tidak bekerja secara sempurna di komputer saya itu. Dan kendala kedua adalah, penggunaannya yang cukup sulit bagi saya, hal yang sama seperti yang dulu saya rasakan ketika mencoba menggunakan Dream Weaver.

Dengan berbagai kendala itu, saya memutuskan untuk menggunakan software tercanggih sepanjang masa, sekaligus bisa dijalankan di windows manapun, yaitu notepad. Ya notepad, dengan editor sederhana nan gratis bawaan windows ini, anda bisa membuat apapun, mulai dari webpage, file PHP, bahkan sampai aplikasi-aplikasi kelas berat sekalipun. Hal ini bisa terjadi karena notepad memiliki kemampuan menyimpan sebuah file dalam tipe apa saja.

Dan dengan notepad anda bisa melatih diri anda untuk membuat file yang jauh lebih efisien daripada yang dibuat dengan aplikasi-aplikasi lainnya. Karena umumnya software-software webmaker tadi membuat halaman web berdasarkan hal-hal yang paling umum, dan terkadang banyak hal yang tidak diperlukan masuk kedalamnya, seperti meta tag untuk generator, author, dan juga yang lainnya. Sedangkan bila menggunakan notepad anda dipaksa untuk mengetikan karakter demi karakter agar halaman web anda terbentuk, maka dengan sedikit memanfaatkan "kemalasan" anda, anda pasti akan memikirkan segala cara agar webpage tetap selesai tetapi anda juga hanya mengetik sesedikit mungkin.

Lalu kenapa harus notepad, lah windows khan juga punya wordpad, kenapa harus notepad? Sederhana, dikomputer saya, program wordpad entah kenapa tidak bisa ditemukan, begitu juga denga MS Paint, sebuah program yang berpotensi menjadi tandingan sempurna untuk photoshop. Maka untuk saat ini saya hanya menggunakan Notepad untuk membuat halaman HTML dan CSS, Word sebagai screen shooter, dan terakhir FSViewer sebagai image format conventer

Hack Yourself

Pernahkah anda mengalami hal ini, mengunjungi suatu website/url yang dan ternyata yang muncul hanyalah halaman indexof ? Sebenarnya suatu url adalah alamat dari suatu folder yang terhubung ke dunia maya. Dan bila suatu url diketikan di browser, maka mula-mula browser akan mencari file index dari folder yang bersangkutan. File index ini bisa memiliki extention apa saja, bisa HTML, XML, XHTML, PHP dan lain sebagainya. Dan bila browser ternyata tidak menemukan file index itu, maka yang terjadi adalah, browser akan menampilkan halaman indexof tadi, yaitu halaman yang memuat daftar seluruh isi dari suatu folder (mirip dengan windows explorer), jadi memungkinkan data anda dicuri oleh orang lain.

Umumnya folder yang tidak memiliki file index ini adalah folder yang hanya memuat file-file gambar pendukung template dari situs yang bersangkutan. Dan umumnya juga, para web master membuat halaman index "bayangan" pada folder tadi. Maksudnya adalah halaman html yang tidak berisi apa-apa. Dan umumnya codenya hanya seperti ini.



<html>

<head>

</head>

<body>

</body>

</html>

Dengan halaman index bayangan ini, maka halaman indexof tidak akan muncul, tetapi ini juga akan membuat pengunjung kecewa, karena yang mereka lihat hanyalah sebuah halaman kosong bukannya informasi yang mereka inginkan. Maka jalan tengahnya adalah mengarahkan pengunjung yang "salah jalan" ini, langsung ke pintu depan website anda. Caranya adalah dengan mengganti kode halaman index bayangan tadi dengan sedikit sentuhan JavaScript seperti ini, dan ingat, simpan dengan nama "index.html".



<script type="text/javascript">

location.href = "url situs anda";

</script>

11 June 2007

HTML,, an Important Part

Hal pertama yang mutlak harus dimiliki seorang webmaker adalah penguasaan scripting2 yang berhubungan dengan pembuatan halaman situs itu sendiri, 3 elemen dasar dari webpage menurut saya adalah, HTML, CSS, dan JavaScript. Pertama karena hanya dengan mengunakan HTML murni, sayasudah bisa membuat sebuah situs yang cukup baik, lalu dengan ditambahkan CSS, situs saya-pun menjadi lebih indah dan tidak terlalu besar ukurannya, dan terakhir JavaScript, dengan script ampuh ini, saya jadi bisa membuat situs saya lebih menarik lagi karena adanya animasi. Lebih jauh dari itu, dengan script sederhana ini, saya jadi bisa membuat berbagai software yang bisa diakses secara online, dan JavaScript bisa menggantikan fungsi flash di semua situs saya.

Kombinasi ketiga elemen tadi sudah sangatlah cukup untuk menjadi modal dasar bagi saya untuk membangun situs2 saya. Dan yang paling penting, elemen tadi mendukung untuk pembuatan situs yang sederhana, fungsional, dan juga berukuran kecil sehingga menghemat bandwidth dan waktu loadnya, namun tetap bisa menampilkan dirinya seindah situs yang menggunakan flash sekalipun. Kesederhanaan dan kecepatan load inilah yang hingga kini masih menjadi andalan sang raksasa di dunia maya. Ya, google hingga kini hanya mengandalkan kepolosan HTML murni untuk semua layanannya. Hasilnya, meskipun search engine google tampil dalam keadaan yang "terlalu" sederhana, namun semua orang tau kalau ia adalah mesin pencari terkuat dan paling terkenal di jagad maya ini. Bandingkan dengan homepage milik Yahoo! dan MSN yang penuh dengan gambar dan animasi, namun mereka berdua harus cukup puas dengan posisi kedua bahkan ketiga.

Jadi intinya keindahan itu memang penting untuk sebuah halaman situs, namun fungsionalitas dan waktu load juga sangatlah penting. Hal itu sudah didukung oleh HTML sebagai elemen dasar dari sebuah situs, yang bisa dibilang ia adalah bumbu dasar untuk membuat suatu masakan. Ketika suatu hari ingin membuat masakan tersebut namun tidak ada bumbu2 lain pendukungnya, hanya dengan bumbu2 dasar ini pun, sebuah masakan yang lezat sudah dapat dihidangkan. Kemana pun saya pergi, situs apapun yang saya buat, atau di komputer siapapun saya membuatnya, hanya dengan sebuah notepad dan kumpulan tag2 HTML, sebuah situs barupun sudah dapat hasilkan.

Theme VS Desain

Bila ditanya mana yang lebih saya sukai antara mendesain website atau "mengisi" nya, saya lebih memilih untuk mendesainnya. Karena memang pada dasarnya saya menyukai hal yang berhubungan dengan desain-mendesain, maka mendesai website bukanlah hal yang sulit dan memusingkan saya, justru menurut saya itu adalah hal yang sangat menyenangkan. Hingga kini ada beberapa desain situs siap pakai di komputer saya, yang tinggal dilakukan adalah mencari content yang tepat untuk mengisinya.

Masalah lain saya untuk membuat situs adalah ketersediaan sarana. Hingga saat ini, saya hanya bisa online dari warnet, mungkin hanya 3-4 jam sehari. Memang saya memiliki sebuah komputer, namun spesifikasi-nya sangatlah meragukan. Bayangkan dizaman Core 2 Quad dan Vista seperti ini, saya masih menggunakan komputer dengan spesifikasi, proccesor pentium 1, RAM 32 MB, Windows 98 SE, dan Harddisk 512 MB. Karena hal itu saya hanya bisa "mencuri" gambar2 untuk mempercantik website saya dari situs milik orang lain, karena tidak mungkin memasang photoshop di komputer saya tadi. Ukuran harddisk yang hanya 512MB itu turut memaksa saya membuat situs2 yang minimalis dan fungsional, namun tetap terlihat indah.

05 June 2007

Kebodohan Sang Penguasa

Pernah anda perhatikan account fs anda belakangan ini, kalu belum, perlu anda tau ada perubahan yang terjadi pada setiap halaman di situs friendster. Ya kini fitur pencarian di friendster mengunakan engine milik sang dewa pencari, google.

Form pencarian diletakan pada bagian header berikut logo google-nya, masalahnya logo google yang disana berupa file gambar yang proses pemotongannya tidak pas. Memang di halaman utama, masalah ini tidak terlihat, tetapi di halaman profile khususnya profile yang memiliki wallpaper dominan "hitam" akan sangat terlihat bekas-bekas "luka potongan" hasil cropping yang tidak sempurna.

Sebenarnya masalah ini sangat mudah diselesaikan, ada beberapa cara yang bisa dilakukan webmaster, pertama tentunya dengan mengganti file gambar itu dengan file lain yang lebih baik dan sempurna, tidak memiliki background (transparant), atau bisa juga tidak menggunakan file gambar sama sekali. Gambar bisa diganti dengan tulisan biasa yang memiliki warna-warna berbeda pada tiap huruf "G", "o", "o", "g", "l", dan "e".

Lalu apa yang saya maksud kebodohan pada judul artikel ini, sederhana kalau saya yang pemula dalam dunia web desain ini dan tidak sebanding dengan dengan admin friendster, apalagi google, sudah bisa "mengakali" kesalahan itu, lantas kenapa para "penguasa" tadi tidak berpikir dulu sebelum bertindak. Ya mungkin ini hanya karena form search itu belum lama muncul, sehingga masih belum terpikir sejauh itu, atau malah saya yang pikirannya sudah terlalu jauh didepan mereka (^_^).

01 June 2007

Make a Site, It's so Easy

Bukannya bermaksud sombong, tapi bagi saya sekarang ini membuat sebuah situs "sangatlah mudah", bayangkan dalam waktu kurang dari 1 jam, anda sudah bisa memiliki satu situs baru, baik berbentuk blog maupun website. Hal itu sangat mungkin terjadi, dikarenakan saat ini banyak sekali tools-tools pembuat situs yang berserakan di internet, baik yang berbentuk blog maupun website.

Blogger dan wordpress adalah contoh aplikasi pembuat blog yang paling "laku" sekarang ini, sedangkan untuk website biasa, anda bisa menggunakan googlepages milik google ataupun geocities dari Yahoo!. Sedangkan untuk tempat penyimpanan gambar, anda bisa menggunakan jasa webhosting gratisan, atau bisa juga menggunakan fasilitas photo sharing seperti Flickr atau PhotoBucket. Tambahah-tambahan seperti counter, guest book, milis, chat, atau shout box, bisa anda dapatkan juga secara gratis, silahkan cari sendiri di google.

Masing-masing tools tadi umumnya langsung bisa digunakan tanpa perlu menginstalnnya ke PC, bahkan bila mau anda bisa menggunakan handphone anda untuk online. Untuk mengerjakan blog ini sendiri, saya hanya memanfaatkan jasa warnet yang mungkin hanya 10-15 jam perminggu. Jadi siapapun anda, punya komputer atau tidak, memiliki akses internet dirumah atau tidak, bahkan anda yang tidak memiliki pengetahuan tentang web building sekalipun, tetap bisa memiliki situs sendiri, karena yang diperlukan hanyalah kreatifitas dan kemauan. Once again, make a site,,, it's so easy.