Rabu, 14 Mei 2008

ILMU KOMPUTER

Tips membuat website

1. Langkah Langkah Membuat Website

Bermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu homepage. Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk membuat web.

1. Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout desain dengan menggunakan software.

2. Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia Fireworks dan Macromedia Freehand untuk memperhalus sketsa desain.

3. Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.

4. Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.

5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia Dreamweaver, Microsoft Frontpage dan Allaire Homesite.

6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya dilakukan setelah desain homepage kita telah jadi.

7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.

8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-tempat gratis, memakai guestbook dan counter gratis dan menambah macam-macam accesories dalam mempercantik homepage pribadi tersebut.


2. Tools Software Pembuatan Website


Berikut ini software-software yang sering digunakan dalam mebuat suatu web, mulai dari disain, efek disain, animasi, web editor, programing, sound editor hingga software untuk meng-upload web ke tempat hosting.

Desain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout homepage.

1. Adobe Photoshop : Desain berbasis titik ( bitmap )

2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html

3. Adobe Illustrator : Desain berbasis vector

4. CorelDraw : Desain berbasis vector

5. Macromedia Freehand : Desain berbasis vector

Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.

1. Macromedia Firework : Efek teks

2. Painter : Memberikan efek lukisan

3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.

4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.

Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.

1. 3D Studio Max : Untuk membuat objek dan animasi 3D.

2. Gif Construction Set : Membuat animasi file gif

3. Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.

4. Microsoft Gif Animator : Membuat animasi file gif

5. Swift 3D : Merancang animasi 3D dengan format file FLASH.

6. Swish : Membuat berbagai macam efek text dengan format file FLASH.

7. Ulead Cool 3D : Membuat animasi efek text 3D.

Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.

1. Alaire Homesite

2. Cold Fusion

3. Microsoft Frontpage

4. Macromedia Dreamweaver

5. Net Object Fusion

Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris.

1. ASP ( Active Server Page )

2. Borland Delphy

3. CGI ( Common Gateway Interface )

4. PHP

5. Perl

Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.

1. Bullet FTP

2. Cute FTP

3. WS-FTP

4. Macromedia Dreamweaver : dengan fasilitas Site FTP

5. Microsoft Frontpage : dengan fasilitas Publish

Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.

1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.

2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi.

Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software Microsoft Frontpage atau Macromedia Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.



Membuat Link (1)

Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :

Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda
klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

  1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.

  1. Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :






  1. Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman

  1. Klik OK. Selesai



Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

  1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu Edit HTML tab yang ada pada toolbar.

  1. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.resepbisnis.com/?id=rohman :

    klik disini

    maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :

    klik di sini

    atau :

    klik di sini

    atau bisa juga seperti ini :

    klik di sini

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

  1. Sign in di blogger dengan id anda

  1. Klik menu TEMPLATE

  1. Klik Edit HTML

  1. Klik Edit

  1. Klik Find (on this page)… --> untuk mempercepat pencarian





find

  1. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find

  1. Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :



Blog Tutorial

  1. Klik Save Template Changes. Selesai

Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes.

Membuat Link (2)

Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

  1. Login di blogger dengan ID anda

  1. Klik menu Layout

  1. Klik Page Elements

  1. Klik Add a Page Element

  1. Klik ADD TO BLOG pada menu Link List

  1. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link partner” atau silahkan terserah anda

  1. Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi silahkan di kosongkan saja.

  1. Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat, silahkan pilih Don’t Sort

  1. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-tutorial.blogspot.com

  1. Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Blog Tutorial.

  1. Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.

  1. Klik SAVE CHANGES bila sudah selesai

  1. Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda inginkan ( di drag & drop ) .

  1. Klik SAVE. Selesai



Membuat link dari gambar atau image

Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini :

  1. Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.

  1. Jika anda sudah mengupload gambar anda, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL :

    http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif

    Nah jika anda ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah :


    /albums/t253/rohman24/animasichicklet.gif">

    (kode dalam satu baris)

    jika ingin dalam window baru :


    /albums/t253/rohman24/animasichicklet.gif">

    (kode dalam satu baris)



Link berjudul

Mungkin anda bingung, ko judul bahasan topik ini judulnya Link berjudul? Untuk memperjelas bahasan ini, silahkan anda kembali ke halaman atas blog ini lalu arahkan mouse anda ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah sekarang mungkin anda sudah mengerti maksud saya, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan anda kepada para pembaca untuk mengklik link tersebut. Untuk membuat judul link ini sangat mudah, yakni anda hanya harus menambahkan title=" ... " pada link yang anda buat. Contoh seperti yang saya berikan di atas :

Resep bisnis


Tidak ada komentar: