PENGEMBANGAN WEB SITE

PENGEMBANGAN WEB SITE

Referensi: Sampurna, Membuat Home Page dengan HTML, Jakarta, Elex Media Komputindo, 1996 Sutopo, Ariesto Hadi, Pemrograman Flash dengan PHP dan MySQL, Yogyakarta, Graha Ilmu, 2007 Madcoms, Panduan Lengkap Dreamweaver CS3, Yogyakarta, Penerbit Andi, 2008

Pengembangan Web site

1. PENDAHULUAN Cara Kerja WWW Bekerja pada Web mencakup dua hal penting, yaitu: l software Web browser l software Web server Kedua software ini bekerja seperti sebuah sistem client-server. l Web browser yang bertindak sebagai client l Web server yang bertindak sebagai server

Hypertext Transfer Protocol (HTTP) HTTP adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh Web browser dalam meminta atau mengambil suatu dokumen, dan oleh Web server dalam menyediakan dokumen yang diminta Web browser. HTTP: Protokol standar untuk mengakses dokumen HTML. Contoh penggunaan protokol HTTP dalam Web: http://www.yahoo.com


Uniform Resource Locator (URL) l

URL adalah suatu sarana yang digunakan untuk menentukan lokasi informasi pada suatu Web server.

l

URL dapat diibaratkan sebagai suatu alamat, yang terdiri dari: • protokol yang digunakan browser untuk mengambil informasi • nama dari komputer di mana informasi tersebut berada • jalur/path serta nama file dari suatu informasi

Format umum dari suatu URL: protokolTransfer://namaHost/path/namafile Contoh dari URL: http://mtv.com/music/index.html di mana: • http adalah protokol yang digunakan • mtv.com adalah nama dari server komputer • music adalah jalur / path dari informasi yang dicari • index. html adalah nama file di mana informasi tersebut berada


Domain Name System (DNS) l

Format penamaan standar (sistem pemberian nama secara hirarki) untuk komputer, services atau resource lain yang berhubungan dengan Internet, untuk mempermudah pengelolaan server komputer di Internet.

l

Sistem penamaan tersebut adalah Domain Name System (DNS).

Contoh DNS: Nama Domain

Jenis Organisasi

Contoh

com edu gov mil net org info au id ca

Organisasi komersial Lembaga pendidikan Lembaga pemerintah Organisasi militer Provider Internet Organisasi umum Organisasi penyedia informasi Organisasi komputer di Australia Organisasi komputer di Indonesia Organisasi komputer di Kanada

yahoo.com usc.edu whitehouse.gov dt.navy.mil rad.net informatika.org


Web Page l

Setiap perusahaaan atau pribadi yang memiliki informasi di World Wide Web memerlukan suatu Web site.

l

Setiap informasi ini disimpan dalam suatu file yang berbeda-beda yang disebut Web page. Di dalam Web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lainnya, baik itu di dalam suatu Web page yang sama, ataupun dalam Web page lain atau Web site yang berbeda.

l

Sebelum mengakses berbagai macam informasi pada suatu Web site, akan ditemui suatu Web page pembuka yang disebut sebagai home page.

l

Home page ini merupakan halaman pertama dari suatu Web site yang biasanya berisi tentang apa dan siapa pemilik Web site tersebut.


Web browser Web browser = perangkat lunak aplikasi yang dapat digunakan oleh user untuk menampilkan dan berinterasi dengan teks, image, video, musik, game atau informasi lainnya yang terdapat dalam halaman web dari suatu Web site pada World Wide Web. l

Informasi-informasi ini biasanya dikemas dalam page-page, di mana setiap page bisa memiliki beberapa link yang menghubungkan Web page tersebut ke sumber informasi lainnya.

l

Jika suatu link diklik, browser akan melihat alamat dari tujuan link tersebut dan kemudian mencarinya di Web server.

l

Jika browser menemukan alamat dari tujuan link tersebut, browser akan mennampilkan informasi yang ada,.

l

Jika tidak menemukannya, browser akan memberikan suatu pesan yang menyatakan bahwa alamat tidak dapat ditemukan.


Web browsers untuk personal computer: Internet Explorer, Mozilla Firefox, Safari, Opera, Safari, Avant Browser, Konqueror, Lynx, Google Chrome, Flock, Arachne, Epiphany, K-Meleon dan AOL Explorer. l Internet Explorer (IE) : dikeluarkan oleh Microsoft corporation, biasanya secara default disertakan bersamaan dengan operating system (OS). Memiliki keunggulan dalam hal kestabilan konektivitas, support digunakan untuk kegiatan apapun, jarang ada keluhan error / dsb. Kekurangannya mungkin agak sedikit lambat dalam hal download file dari internet, baik untuk browsing, surfing, download, maupun upload. Untuk yang sangat mengandalkan kestabilan dan supported, browser ini bisa dijadikan pilihan utama. l

Mozilla firefox : Browser ini memiliki keunggulan dalam hal tampilannya yang cukup sederhana. Kinerja akses internetnya memiliki kecepatan yang sangat tinggi, baik untuk download, maupun upload file. Kemudahan dalam hal penggunaan, juga menjadi pilihan banyak orang. Memiliki supported yang sangat tinggi dan keamanan yang cukup terjamin.


l

Opera : Browser ini menjadi saingan Mozilla Firefox dan Internet Explorer. Tampilannya terlihat cukup canggih dan modern. Keunggulannya sama seperti mozilla firefox, dapat membuat menu tab baru dalam satu jendela yang sama. Kecepatan untuk mengakses internet lumayan tinggi, namun sering terjadi masalah dalam mengakses situs-situs tertentu seperti blogger misalnya. Supported masih memiliki kekurangan, sehingga sering terjadi error / not completed result, dalam mengakses situs-situs tertentu.

l

Netscape Navigator adalah paket komersial browser Web yang dikembangkan oleh Netscape Communication Corporation.


2. METODE PENGEMBANGAN WEB

Tahap pengembangan webPerancangan Web

1. Requirement Analysis. Menentukan tujuan dari web, target audience, target platform, user goals, business goals, dll

2. Conceptual Design. Fokus dari desain kunseptual ini pada perintah (command) dan bagaimana mengerjakan perintah tersebut.

Gambar 1.1 Tahap pengembangan Web.

3. Mockeup and Prototype. Walaupun desain web cenderung menjadi bagian dari senidan interactive reresentation (prototype) Dalam tahap inivisual dibuat visual representation (mockeup) dari pada sains, tetapi dapat disimpulkan pendekatan proses desain. untuk membuat contoh dengan cepat danpada mengevaluasinya sebelum dibuat produk akhir Menurut Tom Brinck (2002), pengembangan web meliputi beberapa tahap, yaitu:

4. Production. Pada tahap ini dibuat produk akhir, teks final, isi grafik, dan program harus dibuat Requirement Analysis 1. semuanya. Analysis. Padaumum tahap mencakup ini ditentukan tujuan dari kualitas, user testing, dan field testing. Evaluasi yang penjaminan

web, bagaimana mengatasi problem yang ada. Juga ditentukan target audience, target platform, user goals, business goals, dan lainnya. 5. Launch. Produk diluncurkan dan siap untuk diakses oleh umum. Selanjutnya, Web site dipelihara Tujuan dan audiens berpengaruh pada nuansa suatu Web site, dan dievaluasi. sebagai pencerminan identitas dari organisasi yang menginginkan informasi Pada sampai kepada audiens. Tingkat kemampuan audiens Evaluation. setiap tahap selalu dilakukan evaluasi sangat mempengaruhi pembuatan desain. Dengan demikian Web site dapat dikatakan komunikatif komunikatif.


2.

Conceptual Design Design. Desain konseptual ini merupakan konsep pengembangan suatu Web site, dan harus dilihat dari semua aspek.

Struktur navigasi Beberapa desainer web menggunakan teknik yang biasa seperti dalam pengembangan multimedia pada umumnya yaitu storyboarding, sebgai berikut: l pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding pembuatan film dan video l

kemudian hubungan detail yang diperlukan antara halaman-halaman secara keseluruhan.

Dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh desainer, yaitu: linear navigation model, hierarchical navigation model, spoke and hub model, dan full web model.


10

Perancangan Web

Gambar 1.2 Struktur navigasi linear navigation model.

Gambar 1.4 Struktur navigasi spoke-and-hub model. Gambar 1.4 Struktur navigasi spoke-and-hub model.

Gambar 1.3 Struktur navigasi hierarchical model.

1.4.2 Hierarchical model Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat dikembangkan menjadi Pengembangan Web site beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan.

Gambar 1.5 Struktur navigasi full web model. Gambar 1.5 Struktur navigasi full web model.

11

1. Linear navigation model. Linear navigation model digunakan oleh sebagian besar Web site. Informasi diberikan secara sekuensial dimulai dari satu halaman. Beberapa desainer menggunakan satu halaman untuk masuk atau keluar dari Web site. 2. Hierarchical model Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. 3. Spoke-and-hub model Spoke-and-hub model hanya menggunakan satu node untuk berhubungan dengan node lain. Pada model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut kembali ke homepage. 4. Full web model Full web model memberikan kemampuan hyperlink yang banyak. Full web model banyak digunakan karena user dapat mengakses semua topik dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya. Pengembangan Web site

12

Desain visual Teknik pembuatan desain visual: l

desain web dengan teknik storyboarding

l

desain web sesuai dengan desain graphical user interface

Desain visual mencakup elemen grafik yang digunakan pada interface, termasuk layout secara keseluruhan, menu, desain form, tipografi, penggunaan warna, coding, dan penempatan tiap unit dari informasi.


13

3. HTML HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat halaman-halaman hypertext pada internet. l Dengan konsep hypertext halaman-halaman tidak harus dibaca secara berurutan, tetapi dapat meloncat dari satu topik ke topik lain. l

HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu.

File HTML 1. File HTML adalah file teks yang mengandung tag penanda (markup tags) 2. Tag penanda memberitahu web browser bagaimana halaman web harus ditampilkan 3. File HTML harus memiliki ekstensi .htm atau .html 4. File HTML dapat dibuat dengan menggunakan teks editor sederhana (Notepad) Pengembangan Web site

14

Ekstensi HTM atau HTML l

Saat menyimpan sebuah dokumen atau file HTML ada dua macam ekstensi, yaitu ekstensi .htm atau .html yang dapat digunakan.

l

Ekstensi .htm digunakan mengingat pada awal perkembangan teknologi komputer hanya dapat mendukung penggunaan tiga huruf untuk penyimpanan file.

l

Dengan teknologi informatika yang semakin maju, saat ini disarankan untuk menyimpan file HTML dengan ekstensi .html

Editor HTML HTML dapat dengan lebih mudah diedit dengan menggunakan editor yang bersifat WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia Dreamweaver, Adobe PageMill, dan lain-lain.


15

4. DASAR-DASAR DREAMWEAVER CS3 l

Dreamweaver sebuah editor HTML profesional untuk mendesain web secara visual dan mengelola situs atau halaman web.

l

Dreamweaver merupakan perangkat lunak utama yang digunakan oleh Web Desainer dan Web Programmer dalam mengembangkan suatu situs web karena ruang kerja, fasilitas, dan kemampuannya yang mampu meningkatkan produktivitas dan efektivitas dalam desain maupun membangun suatu situs web.

Menjalankan Dreamweaver 1. Klik Start > All Programs > Adobe Dreamweaver CS3 2. Pada Welcome Screen pilih Create New > HTML


16

document toolbar

document window

panel group

design window coding window

property inspector

status bar

panel file

slitwindow


17

5. MENDEFINISIKAN SITE l

Web site (situs web) adalah suatu kesatuan dari dokumen-dokumen yang terhubung dengan atribut yang sama.

l

Web site memiliki dokumen yang biasanya disebut halaman web, serta dilengkapi dengan komponenkomponen lain seperti image, media, dan objek yang saling berhubungan

Membuat site lokal 1. Pilih Site > New Sites > atau pada Welcome Screen pilih Dreamweaver Site


18

2. Pada kotak dialog Site Definition buat nama misalnya myweb dan isi alamat URL misalnya http://www.myweb.com 3. Klik Next. 4. Pada tampilan kotak dialog kedua: Site Definition pilih No untuk web site statis pilih Yes untuk web site dinamis Sebagai contoh pilih No 5. Klik Next.


19

6. Pada tampilan kotak dialog ketiga: Site Definition pilih Edit local ......................, pilih folder yang digunakan untuk menyimpan file. 7. Klik Next. 8.

Jika menggunakan site lokal dan belum terkoneksi dengan server, maka pilih Local/Network pilih folder yang digunakan untuk menyimpan file.

tempat penyimpanan file

tklik untuk memilih folder

9. Klik Next.


20

10. Jika memilih enable, site yang sedang diedit juga dapat diedit oleh user lain, maka pilih No

11. Klik Next. 12. Tampilan berikutnya adalah ringkasan site yang telah dibuat. Klik Done.


21

Membuat folder dalam site 1. Pada panel Site klik-kanan nama Site, maka muncul menu untuk membuat folder baru.


22

5. MEMBUAT HALAMAN WEB Membuat desain halaman Web merupakan hal yang terpenting dalam pembuatan sebuah situs, perpaduan dari seni, ilmu pengetahuan, dan ketrampilan. Suatu desain yang baik memiliki karakteristik: l komunikatif - elemen desain mempunia makna, mudah dimengerti l

konsistensi

- kesamaan elemen-elemen terkait, meliputi font, warna, button, dll

l

estetis

- elemen desain merupakan kesatuan, seimbang, memiliki irama

l

kecepatan download - mudah tampil pada halaman (ukuran file memadai)

Mengatur property halaman Pengaturan Property halaman merupakan unsur penting dalam pembentukan halaman web. Karena properti halaman ini ikut berperan dalam menentukan tampilan halaman web.


23

Atribut dasar halaman web: - judul halaman, latar belakang berupa warna dan gambar halaman, warna teks dan link, margin halaman Web Untuk menampilkan property halaman web: 1. Pilih Modify > Page Properties Appearence - mengatur jenis, ukuran, style dan warna dari font, serta latar belakang Link - mengatur font dan teks untuk link Heading - menentukan kategori heading Title - menentukan judul halaman Tracing image - mengatur penampilan sementara gambar pada latar belakang Pengembangan Web site

24

Membuat background halaman dengan gambar Image yang digunakan untuk background memiliki format gif, jpg, png. Untuk menggunakan image sebagai background: 1. Buka page Properties dengan cara memilih Modify > Page Properties 2. Klik Browse pada bagian Background Image untuk mencari gambar yang akan dijadikan background 3. Klik Apply untuk melihat tampilan gambar pada background Membuat background halaman dengan gambarwarna Warna yang digunakan untuk background dipilih dari tabel warna yang ada. Untuk menggunakan warna background: 1. Buka page Properties 2. Klik button pulldown di samping Background. 3. Pilih warna yang ada palet warna. 4. Klik Ok Pengembangan Web site

25

Membuat warna default teks halaman web Untuk membuat warna default teks pada halaman: 1. Pada Page Properties pilih Text Color 2. Klik button pulldown di samping Text color. 3. Pilih warna yang ada palet warna. 4. Klik Ok


26

Mengatur warna untuk teks link Cara mengatur warna untuk teks link: 1. Pada Page Properties pilih Link kemudian atur warna:

- Links, warna yang akan digunakan untuk semua teks dan email link - Visited Links, warna yang akan digunakan pada link yang telh dikunjungi - Active Links, warna yang akan digunakan pada link yang sedang ditunjuk. - Rollover Links, warna yang akan digunakan pada link saat mouse pointer di atasnya Mengatur warna untuk teks link Cara mengatur warna untuk teks link: 1. Pada Page Properties pilih Appearance kemudian margin kiri, kanan, atas dan bawah dari halaman web.


27

Mengatur tanggal Untuk menampilkan tanggal: 1. Pastikan aktif pada halaman Web 2. Tempatkan kursor pada lokasi di mana tanggal akan ditempatkan 3. Pilih Insert > Date. 4. Pilih format Date pada kotak dialog Insert Date 5. Klik Ok


28

Membuat dokumen baru Setrelah membuat site, langkah selanjutnya adalah membuat halaman web dengan membuat dokumen baru dan disimpan dalam site yang ada. Untuk membuat dokumern HTML dapat dilakukan sebagai berikut: 1. Pilih File > New . 2. Pada kotak dialog New Document pilih Blank Page. Pada bagian Type pilih HTML, pada bagian Layout pilih bentuk yang diingin kan, misalnya 2 column hybrid, left sidebar, header and footer . 3. Klik > Create


29

4. Simpan dalam folder myWebFolder dengan nama index.html.


30

Selain cara tersebut, dapat juga menambahkan halaman dengan cara lain sebagai berikut: Pada panel site, klik-kanan nama site kemudian pilih New File


31

5. Untuk membuat nama halaman, ganti Untitled Document dengan Welcome to Multimedia Membuat judul 1. Untuk membuat judul pada halaman, ganti Header dengan Multimedia Learning.


32

2. Selanjutnya lakukan pengeditan pada beberapa style yang diperlukan pada panel CSS, misalnya untuk header. Jika panel CSS belum terbuka maka dapat dipilih Window > CSS Style. 3. Klik dua kali pada twoColHybLtHdr#Header, maka akan muncul kotek dialog untuk mengubah style. 4. Pada kotak dialog, pada Type dilakukan perubahan seperti pada gambar. 5. Klik Ok, maka judul berubah. Pengembangan Web site

33

Membuat judul content 1. Untuk mengubah judul Main Content, aktifkan Main Content, kemudian pada Properties lakukan perubahan font dan warna. 2. Nama style dapat diubah dengan cara klik pulldown nama style > Rename. 3. Ganti nama style menurut keinginan sendiri 4. Klik Ok


34

Membuat teks content 1. Untuk mengubah teks pada Main Content dapat dilakukan seperti mengubah judulnya. Membuat menu 1. Ganti teks pada bagian kiri halaman dengan menu yang terdiri dari Home, About Us, Artikel, Galeri, Kontak


35

Membuat halamaan Atrikel 1. Save halaman dengan nama artikel.html 2. Buat teks seperti pembuatan teks pada halaman index.html


36

Membuat link halaman 1. Buka index.html 2. Highlight menu Artikel, pada Properties klik Browse di sebelah kanan Link. 3. Pilih atikel.html 4. Klik Ok 5. Pada Target pilih _self, berarti menggantikan halaman lama


37

6. Dengan cara yang sama buat link ke semua halaman. 7. Periksa tampilan dengan memilih File > Preview in Browser, kemudian pilih browser yang digunakan.


38

6. IMPOR IMAGE DAN FLASH Impor Image Sebelum mengimpor image, animasi dan video tempatkan file yang akan diimpor ke dalam folder dalam site. Buat folder images dan flash dalam site terlebih dahulu.

1. Tempatkan file image (GIF, JPG, PNG) ke dalam folder images 2. Tempatkan file animasi (SWF) ke dalam folder flash 3. Tempatkan kursor kemudian pilih Insert > Image, kemudian pilih image yang mau diimpor 4. Tempatkan kursor kemudian pilih Insert > Media > Flash, kemudian pilih animasi yang mau diimpor


39

5. Untuk melihat animasi dapat diklik tombol Play pada Properties 6. Periksa pada browser dengan cara memilih File > Preview in Browser


40

PENGEMBANGAN WEB SITE

Recommend Documents