Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

1 Memeriksa Informasi untuk Relevansi dan Currency 2.

Presentasi serupa


Presentasi berjudul: "1 Memeriksa Informasi untuk Relevansi dan Currency 2."— Transcript presentasi:

1

2 1

3 Memeriksa Informasi untuk Relevansi dan Currency 2

4 Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman- halaman web, baik yang bersifat statis maupun dinamis. Software web design terpopuler yang ada saat ini antara lain: - Adobe Image Ready, - Adobe Dreamweaver, - Adobe Fireworks, - Microsoft Frontpage dan lain sebagainya. Memeriksa Informasi untuk Relevansi dan Currency 3

5 Struktur dasar dokumen HTML berisi elemen-elemen atau tag : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file HTML. : mendefinisikan head dalam sebuah file HTML. : mendefinisikan judul yang hendak ditampilkan pada browser. : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Memeriksa Informasi untuk Relevansi dan Currency 4

6 Format Teks Dasar dalam HTML  Heading  Heading, HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal daripada teks normal  Paragraf  Paragraf, setiap ada paragraf baru diawali dengan  List  List, HTML mendukung daftar (list) tidak bernomor, bernomor dan definisi Performatted Text, dalam HTML, spasi, tab dan baris baru (enter) tidak memiliki pengaruh  Extended Quotations  Extended Quotations, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag. Memeriksa Informasi untuk Relevansi dan Currency 5

7 Ganti baris (line break), untuk menulis alamat surat dengan baris-baris pendek, tidak bagus jika menggunakan tag (spasi terlalu lebar) Garis datar (horizontal rule), untuk membuat garis horizontal yang digunakan untuk membatasi bagian-bagian digunakan tag. Memformat karakter, Bold. atau untuk membuat teks Bold. Italic. atau untuk membuat teks Italic. typewriter. atau untuk membuat teks typewriter. Memeriksa Informasi untuk Relevansi dan Currency 6

8 Dasar Link HTML Hyperlink Hyperlink merupakan sesuatu yang sangat penting di website, sebab hyperlink akan menghubungkan antara satu halaman dengan halaman lainnya baik dalam satu website maupun antar website. Untuk membuat hyperlink digunakan tag. Huruf a artinya "anchor". Tag biasanya diikuti atribut "href" dimana nilai dari atribut ini merupakan alamat halaman yang akan dituju. Memeriksa Informasi untuk Relevansi dan Currency 7

9 MACAM-MACAM LINK 1. Relative dan Absolute Link, link ke suatu dokumen pada direktori lain dapat dibuat dengan menentukan relative path dari posisi dokumen asal berada. Ini disebut sebagai relative link. a href=”Harga/index.html”>Daftar Harga Alamat (URL) dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link, disebut link absolute a href=”http://gmail.google.com”> Google 2. Link ke suatu bagian di dokumen lain, misalnya : satu.html dilink ke suatu bagian di dua.html, caranya adalah : Pada dokumen satu.html, dituliskan : Tiga Pada bagian yang dituju, dituliskan : Tiga Memeriksa Informasi untuk Relevansi dan Currency 8

10 3. Link ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas : Pada dokumen satu.html, dituliskan : Tiga Pada bagian yang dituju, dituliskan : Tiga 4. Mailto, link yang langsung menuju ke alamat . Kirim Memeriksa Informasi untuk Relevansi dan Currency 9

11 Menyisipkan Gambar Atribut ukuran gambar, bila tidak dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width. Membuat Tabel Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri dari kolom dan baris. Membuat Frame Frame HTML digunakan untuk membuat tampilan HTML yang terbagi menjadi beberapa bagian di mana setiap bagiannya merupakan satu halaman HTML yang terpisah. Memeriksa Informasi untuk Relevansi dan Currency 10

12 Membuat Form Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna Macam-macam form : Input, dengan tipe : 1. Text, password, checkbox, radio button, reset, submit dan hidden. 2. Text area. 3. Select. Memeriksa Informasi untuk Relevansi dan Currency 11

13 Memeriksa informasi untuk relevansi dan keterkinian Pada dasarnya dalam proses pembuatan situs web diperlukan kerjasama antara pihak pengembang dengan klien yang memesan situs web tersebut. Dalam menentukan content (content awal, tambahan maupun revisi) pihak pengembang harus lebih banyak mendengar apa yang menjadi kebutuhan klien. Interaktivitas pengguna menjadi jantung sebuah situs web Memeriksa Informasi untuk Relevansi dan Currency 12

14 Pentingnya menambahkan interaktivitas pada content halaman sebuah situs web : 1. Gunakan umpan balik grafik untuk menginformasikan pengguna tentang elemen interaktif, seperti status tombol yang bergulung 2. Sertakan suara sebagai bentuk umpan balik tambahan agar content tidak terlihat membosankan 3. Pertimbangkan pemakaian animasi untuk menerangkan elemen penting, atau untuk meminta keikutsertaan pengunjung. Memeriksa Informasi untuk Relevansi dan Currency 13

15 Beberapa cara untuk memeriksa informasi content situs web untuk relevansi dan keterkinian, adalah sebagai berikut : 1. Sesuaikan content situs web dengan tujuan dan fungsi situs tersebut 2. Lakukan riset untuk mencari informasi terbaru yang sesuai dengan content situs 3. Content tambahan atau revisi juga bisa dengan meminta content tersebut ke pihak klien baik berupa data tertulis maupun elektronik 4. Lakukan konfirmasi dalam menentukan batasan umur sebuah links, apakah akan dipertahankan atau dihapus 5. Pihak pengembang selaku pembuat situs web bila perlu merevisi content yang mungkin diperlukan dengan mengkonfirmasikan dahulu dengan pihak klien 14 Memeriksa Informasi untuk Relevansi dan Currency

16 Mendesain Halaman Website 15

17 Perancangan Design Web Dengan Adobe Fireworks CS3 Setelah web folder siap, selanjutnya Ikuti tahapan perancangan grafis web anda -Buka Fireworks yang telah anda install sebelumnya. Fireworks menggunakan bantuan panel untuk mengelola gambar baik yang ada dikanan atau bawah tampilan fireworks anda -Masuk menu File --> New (Ctrl+N) untuk membuat sebuah Canvas Kerja baru sebagai tempat perancangan web anda Ubah Informasi seperti gambar disamping 16 Mendesain Halaman Website

18 Perancangan Design Web Dengan Adobe Fireworks CS3 -Tekan OK untuk membuat canvas -Buat objek kotak menggunakan tool vector rectangular yang ada disebelah kiri, seperti gambar berikut : 17 Mendesain Halaman Website

19 Perancangan Design Web Dengan Adobe Fireworks CS3 - Untuk mengatur warna dan garis, pilih objek kotak lalu ubah properti dibawah -Untuk memberi effect shadow pada kotak, maka gunakan panel property filters 18 Mendesain Halaman Website

20 Perancangan Design Web Dengan Adobe Fireworks CS3 - Tambahkan teks pada desain web anda seperti gambar dibawah dengan menggunakan toolbox vector 19 Mendesain Halaman Website Memasukkan Gambar Bitmap dalam canvas -Buka file gambar.jpg atau gambar bitmap foto lainnya yang anda punya

21 Perancangan Design Web Dengan Adobe Fireworks CS3 -Pada toolbox bagian Bitmap, gunakan tool Magic Wand Tool untuk Mengambil gambar latar putih, lalu lakukan : -pembalikan pilihan dengan masuk menu Select--> Select Inverse dan akhiri dengan memberikan feather melalui menu Select --> Feather sebesar 1 pixel untuk membuat area pengambilan lebih halus 20 Mendesain Halaman Website -Copy (Ctrl+C) gambar yang telah terpilih, lalu paste (Ctrl+V) pada kanvas abcweb -Ubah ukuran dengan (Ctrl+T), berikan filter shadow dan terakhir letakkan seperti pada gambar dibawah

22 Slicing & Export HTML Gambar layout yang telah selesai dibuat, selanjutnya harus anda slicing dan export menjadi potongan gambar yang kecil beserta file halaman webnya - Pada toolbox bagian web, klik slice tool Buat potongan seperti contoh yang terlihat pada gambar di samping : 21 Mendesain Halaman Website

23 Slicing & Export HTML -Tekan F12 untuk Preview Desain Web Layout anda menggunakan browser - Ubah tampilan menjadi 4up lalu ganti setting pada panel optimize menjadi JPEG - Better Quality 22 Mendesain Halaman Website

24 Slicing & Export HTML -Setelah selesai melakukan setting maka selanjutnya anda siap mengekspor desain layout anda. Klik menu File--> Export Simpan dengan nama index.php, sedangkan untuk gambar tempatkan pada folder images, (lihat gambar !) 23 Mendesain Halaman Website

25 Mendaftarkan Web Folder ke Dreamweaver CS3 Keunggulan Dreamweaver dengan teknologi Interactive Dynamic Datanya hanya bisa anda rasakan jika telah melalui proses ini dengan lancar. Pastikan Web folder dan Wamp / Xampp Local Server anda telah anda persiapkan -Buka Dreamweaver yang telah anda install Pada panel Site --> Buka combo dan pilih manage site 24 Mendesain Halaman Website

26 Mendaftarkan Web Folder ke Dreamweaver CS3 - Ketik nama web folder abcweb --> lalu tekan next -Pilih opsih Yes I want to user server technology --> Php MySQL -->Tekan Next untuk melanjutkan 25 Mendesain Halaman Website

27 Mendaftarkan Web Folder ke Dreamweaver CS3 - Pilih opsi pertama Edit and Test Locally ( � --> Cari Web Folder Anda c:\wamp\www\abcweb --> Tekan Next -Untuk testing server ketikkan alamat --> Klik tombol Test Url (Untuk mengecek status web) --> Tekan OK jika sukses dan lanjutkan dengan menekan Next, * jika tahapan test url menampilkan pesan error (gagal) maka coba cek nama webfolder anda atau mungkin status wamp server (mySQL/PHP/Apache) anda tidak jalanhttp://localhost/abcweb 26 Mendesain Halaman Website

28 Mendaftarkan Web Folder ke Dreamweaver CS3 - Tahapan akhir pilih No --> lalu tekan Next --> dan akhiri dengan klik Done --> Done sekali lagi untuk menyelesaikan kegiatan mendaftarkan web folder anda ke Dreamweaver - Lihat panel Files anda sudah menampilkan struktur web folder - Double klik file index.php � tekan F12 untuk mencoba halaman web tersebut dijalankan via browser 27 Mendesain Halaman Website

29 Editing Halaman Website - Buka file index.php - Biasakan untuk selalu mengubah tittle dari setiap halaman web anda, seperti gambar berikut, Tittle juga bisa diisikan dengan keyword - Aktifkan table dengan mengklik status sesudah yang ada diatas properti - Pada properti table ubah posisi table menjadi center (tengah) - Tekan F12 untuk melihat hasilnya 28 Mendesain Halaman Website

30 Editing Halaman Website - Buat gambar menjadi background untuk area sel table yang akan diisikan materi. Ikuti tahapannya - Klik gambar main --> Tekan delete di keyboard - Letakkan kursor didalam sel - Cari property bg --> browse / cari file gambar main.jpg latihan : Lakukan hal yang sama pada gambar � toplogin � yang ada di kiri atas halaman anda 29 Mendesain Halaman Website

31 Membuat Tabel baru Sebuah desain web merupakan susunan tabel didalam tabel yang ditata sedemikian rupa. Ikuti tahapan berikut : -Buka file index.php -Letakkan kursor di dalam halaman contoh di sel main atur dahulu posisi vertical sel = top pada panel properties cell - Klik Icon insert table dipanel common yang ada diatas tentukan jumlah row = 1, column = 3, width = 95 percent, border = 0, cell padding = 0, cell spacing = 2 30 Mendesain Halaman Website

32 Membuat Tabel baru - Tekan OK untuk membuat tabel anda - Ubah property align = center untuk memposisikan tabel berada ditengah -Atur sedemikian rupa agar tabel seperti terlihat pada gambar dibawah : - Simpan (Ctrl + S) perubahan halaman anda tersebut 31 Mendesain Halaman Website

33 Membuat External Style (CSS) - Style digunakan untuk mempermudah manajemen format halaman halaman web anda - Buat file baru dengan nama abcstyle.css dengan cara klik kanan web root Site- abcweb, lalu buka (double klik) file tersebut - Pada panel files CSS, klik New Css Rule untuk membuat sebuah rule style didalam file style yang baru Anda buat 32 Mendesain Halaman Website

34 Membuat External Style (CSS) -Ubah informasi seperti gambar berikut : - Tentukan Jenis + ukuran font beserta warna dari form untuk rule style tag tersebut, Lihat gambar ! 33 Mendesain Halaman Website

35 Membuat External Style (CSS) Cara Attach Style ke halaman - Buka file index.php (atau halaman lainnya yang akan anda sisipkan style) - Pada panel CSS klik � attach style sheet � lalu browse lokasi file abcstyle.css akhiri dengan OK - Anda bisa melihat perubahan halaman index.php dengan mencoba mengetikkan sedikit text atau link di dalam sel tabel tersebut 34 Mendesain Halaman Website

36 Membuat Template Sendiri - File index.php yang telah Anda buat bisa dijadikan Master untuk pembuatan template. Dimana dengan menggunakan template akan memudahkan Anda menciptakan halaman-halaman lainnya dengan kesamaan format layout. Ikuti tahapan berikut ini : - Pastikan file index.php tersebut telah terbuka - Masuk menu File --> Save as template - Ubah informasi seperti gambar di bawah ini: - Tekan Save untuk menyimpan template, apabila ada pertanyaan update links?, tekan Yes 35 Mendesain Halaman Website

37 Membuat Template Sendiri - Setelah selesai membuat template perhatikan pada panel files akan muncul folder template berisi file templateweb.dwt.php 36 Mendesain Halaman Website

38 Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) 37

39 Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) -FTP atau File Transfer Protocol adalah sebuah Protocol (bahasa komunikasi dalam jaringan komputer) yang berfungsi untuk meng-upload data dari komputer lokal (localhost) ke server di internet supaya bisa dipublikasikan secara online -FTP terdiri dari 2 macam ; FTP Server dan FTP Client, untuk saat ini kita membahas tentang FTP Client dulu -Sebelum Anda bisa melakukan Upload Data Anda, maka perlu diinstalasi Software FTP Client nya, kita gunakan saja FileZilla, silakan DOWNLOAD DISINI atau SmartFTP DOWNLOAD DISINIDOWNLOAD DISINI - Setelah download selesai, lakukan INSTALASI SOFTWARE pada komputer Anda, pastikan Anda sudah menginstalasi Software FTP dengan benar Sebelum melakukan upload data, pastikan Anda sudah mengetahui / mencatat FTP Hostname-Username dan Password nya, jika lupa login lagi di HOSTING di bawah ini 38 FTP (File Transfer Protocol)

40 Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) - - Jika belum mendaftar hosting (gratis) silakan klik di atau info lengkap silakan kunjungi FTP (File Transfer Protocol)

41 Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) 40 FTP (File Transfer Protocol)

42 Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) UPLOAD FILE via FTP (FILE TRANSFER PROTOCOL) - Pastikan ! Hostname, Username, Password FTP ANDA SUDAH BENAR ! Port FTP:21 - Directori ONLINE >>>>> harus PUBLIC_HTML 41 FTP (File Transfer Protocol)

43 Memeriksa Links dan Navigasi 42

44 Memeriksa Links dan Navigasi Link dan Navigasi adalah bagian yang terpenting dalam organisasi situs web karena keduanya sangat berpengaruh pada kenyamanan pengunjung situs web. Navigasi adalah gabungan dari struktur representasi informasi situs web dan mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan situs. Kemudahan bernavigasi dalam situs web melibatkan system navigasi situs web secara keseluruhan dan desain interface situs web tersebut. 43 Memeriksa Links dan Navigasi

45 Navigasi dapat ditampilkan dalam berbagai media, yaitu : - teks, - image - animasi 44 Memeriksa Links dan Navigasi

46 Syarat Navigasi yang baik : 1. Mudah dipelajari 2. Tetap konsisten 3. Memungkinkan feedback 4. Muncul dalam konteks 5. Menawarkan alternatif lain 6. Memerlukan perhitungan waktu dan tindakan 7. Menyediakan pesan visual yang jelas 8. Menggunakan label yang jelas dan mudah dipahami 9. Mendukung tujuan dan perilaku user 10.Beberapa hal yang perlu diperhatikan untuk membuat navigasi yang baik : 11.Rencanakan dengan benar sebelum membuat 12.Navigasi atau struktur situs web nantinya akan sulit diubah. Jadi sebelum membuat navigasi sebuah situs, tentukan konsepnya 13.Kelompokkan link navigasi dan aturlah sepeerlunya 14.Buat halaman dengan mock up navigasi elemen, jenis konten yang akan ada di setiap halaman dan prioritasnya. 45 Memeriksa Links dan Navigasi

47 Syarat Navigasi yang baik : 15. Buatlah tampilan navigasi berbeda dari tampilan lainnya 16. Agar pengunjung lebih mudah mengenali bahwa bagian tersebut adalah navigasi 17. Buatlah navigasi yang singkat, tepat dan jelas 18. Buat navigasi yang logika susunannya mudah dipahami. 46 Memeriksa Links dan Navigasi

48 Mengedit Informasi Sesuai Kebutuhan 47

49 Mengedit Informasi Sesuai Kebutuhan Adobe Dreamweaver - Dreamweaver merupakan piranti lunak yang sangat baik untuk membuat halaman web. Opsi-opsi dalam dreamweaver dirancang begitu detail, sehingga designer mahir bisa mengembangkan situsnya secara menyeluruh. - Dreamweaver memungkinkan kita berpindah secara mudah antar design view dan code view, ini berarti kita bisa explore code HTML begitu selesai menata halaman dengan menggunakan tampilan antar muka (GUI). - Semua tool yang diperlukan tersedia di bagian depan interface. 48 Mengedit Informasi Sesuai Kebutuhan

50 Berikut adalah langkah-langkah untuk proses pengeditan halaman web dengan menggunakan fasilitas dreamweaver : 1.Mengubah Objek menjadi Background 2.Memasukkan Obyek 3.Memperbaharui situs web yang bersifat statis 4.Memperbaharui situs web melalui fasilitas admin (yang bersifat dinamis) 49 Mengedit Informasi Sesuai Kebutuhan

51 Menguji dan Memastikan Perubahan-Perubahan 50

52 Menguji dan Memastikan Perubahan-Perubahan Pengujian yang dilakukan terhadap situs web tidak sama dengan pengujian sebuah program aplikasi walaupun situs web juga dapat dibuat dengan web programming. Secara umum, hal-hal yang harus diuji adalah sebagai berikut 1.Code Quality = kualitas kode HTML 2.Compatibility = kompatibel dengan berbagai macam sistem operasi, browser dan hardware 3.Navigasi = menyajikan link-link yang ada dalam seluruh halaman situs web 4.User Interaction = dapat berinteraksi dengan pengunjung yang mengunjungi situs web 5.Usability and Accessbility = dapat memenuhi keinginan pengunjung atau target pengguna situs web 6.Performance = melihat sejauh mana kinerja situs web dalam berbagai keadaan 7.Scalability = dapat dikembangkan sebagai antisipasi terhadap perubahan teknologi di masa yang mendatang 8. Reliability = dapat melakukan tugasnya dalam kondisi yang berat. 51 Menguji dan Memastikan Perubahan-Perubahan

53 Mempengaruhi Halaman Web Mengakses Halaman Web Secara Cepat 1.Perhatikan jam akses 2.Disable auto load image 3.Perhatikan indikator 4.Tidak membuka beberapa jendela browser sekaligus 5.Tutup jendela yang tidak perlu 52 Menguji dan Memastikan Perubahan-Perubahan

54 Rangking Search Engine Hal-hal yang mempengaruhi Rangking pada Search Engine 1.Keyword pada domain name 2.Keyword pada nama file 3.Keyword pada page title 4.Keyword pada headline 5.Keyword yang relevan pada meta tag 6.Keyword pada page content 7.Meta tags 8.Link Popularity 9.Backlink 53 Menguji dan Memastikan Perubahan-Perubahan

55 54


Download ppt "1 Memeriksa Informasi untuk Relevansi dan Currency 2."

Presentasi serupa


Iklan oleh Google