PESTA PELAJAR 2009

• Perbanyak lihat contoh berbagai format disain web
• Kuasai penggunaan HTML Editor, Image Manipulator / Animator
• Practise,
• practise,
• practise!
• Make your own design and be creative!

Dalam mendisain web, komponen berikut yang harus diperhatikan:

1. Tata Letak / Layout
2. Teks (Tipografi)
3. Ilustrasi (Grafik dan Animasi)
4. Warna
5. Links (Struktur Navigasi)

Pertanyaan mendasar yang harus dijawab adalah :

• Mengapa orang mau mengunjungi website saya?
• Mengapa orang mau mengunjungi lagi (re-visit) website saya?
• Menjaga konten selalu ter-update secara berkala (no one wants to keep reading the same stuff over and over again).
• Tambahkan konten yang dinamis pada site anda. Misalnya: buku tamu, news, forum diskusi, chat room, pool, dll. (Ingat untuk selalu memonitor-nya)

Pertanyaan pertama,

• what is the site for?
• Promote your ideas, hobbies, or beliefs
• To Advertise your company or product
• Make loads of money really fast
• Provide customer services and support
• To keep your customer base informed
• Give or Sell Information
• Create an 'Extended Business Card' for your company
• Provide internal information and services for your company

• Bagaimana membuat sebuah website yang memiliki tampilan yang bagus, tetapi juga efisien dalam manajemen isi dan waktu loading-nya?
• Waktu loading (loading time) sangat tergantung pada ukuran file dan kecepatan koneksi internetnya
• Ukuran file termasuk juga semua komponen yang ada dalam halaman web tersebut (gambar, sound, animasi, dll)

Komponen web Desain

Ada dua komponen dasar dalam disain web:

1. isi (content)
2. tampilan (format).

Web yang mementingkan content terkadang memiliki tampilan yang sederhana atau bahkan ala kadarnya
Web yang memiliki disain yang bagus biasanya memiliki waktu loading yang lama.
Isi dan tampilan adalah suatu kesatuan yang harus dibangun secara bersama-sama.

Tahap Pengembangan WEB

Sebuah website dikembangkan dalam 2 proses besar:

• Web Designing: proses hingga jadi halaman-halaman web secara lengkap dan siap tayang
• Web Deploying: proses untuk membuat website terpasang pada server internet dan dapat diakses orang lain

WEB DESIGNING

• Perencanaan Web Site
• Membuat Website
• Testing Website

Perencanaan Web

• Lakukan perencanaan sebelum membuat website, yaitu:
• Deskripsikan apa tujuan/fungsi web tersebut. Apakah untuk Berita, Pendidikan, Pribadi, Official web, E-Commerce, Hiburan atau lainnya.
• Kumpulkan/siapkan semua bahan/materi/konten apa saja yang akan ditampilkan. (Seperti data, image, database, dll)
• Rancang menu dan link navigasinya. (site map)
• Rancang disain tampilan (layout) secara umum.

Membuat WEB
Untuk membuat web, kuasai dan gunakan tool aplikasi pengembang web
HTML editor : Microsoft FrontPage, Macromedia Dreamweaver, dll. (Jangan habiskan waktu anda dengan Notepad!)
Image Editor: Adobe PhotoShop, ImageReady, CorelDraw, dll.
Animasi Web: Macromedia Flash, Swish, GIF Animator, dll

Ada banyak program aplikasi pengembang web yang tujuannya mempermudah mambuat website, tetapi ingat:
Konsep dasar HTML harus dikuasai dengan baik.
Dan satu kata kunci yang harus anda ingat dan kembangkan terus adalah: KREATIVITAS!

HTTP (Hyper Text Transport Protokol) : protokol komunikasi (pada layer aplikasi TCP/IP) yang mengatur transfer file-file web (teks dan image).

*
HTTP (Hyper Text Transport Protokol) : protokol komunikasi (pada layer aplikasi TCP/IP) yang mengatur transfer file-file web (teks dan image).
*
URL (Uniform Resource Location) : alamat yang digunakan untuk menunjuk situs web.
*
HTML (Hyper Text Markup Language) : bahasa standar untuk membuat tampilan web
Halaman Web ditulis dalam format HTML

*
Halaman Web ditulis dalam format HTML
*
HTML adalah plain text yang berisi:
*
o Tag-tag HTML
o Teks isi web
*
Plain text dapat dibuat dengan :
*
o Notepad, WordPad (Windows 95/98), Simple Text (Macintosh), Vi or pico (UNIX)
*
Aplikasi pembangun html : MS-FrontPage, Macromedia Dreamweaver, EditPlus, Adobe GoLive, dll
File html hanya berisi teks, tetapi dapat disisipkan tag untuk (memanggil) image, sound, animasi, objek ActiveX, dll

*
File html hanya berisi teks, tetapi dapat disisipkan tag untuk (memanggil) image, sound, animasi, objek ActiveX, dll
*
File-file (image, animasi, dll) tersebut berdiri sendiri dan harus diupload ke server bersama file html-nya
*
Script dapat disisipkan pada halaman web untuk memberikan kemampuan programming pada halaman web
*
File html dibuka/dilihat dengan aplikasi interner browser. Misalnya: MS Internet Explorer, Netscape, Opera, Mosaic, dll
Hypertext: kata atau frase yang menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

*
Hypertext: kata atau frase yang menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
*
Markup: file HTML berisi suatu instruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada browser.
*
Language: Meski HTML bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.