Memeriksa Informasi untuk Relevansi dan Currency

Memeriksa Informasi untuk Relevansi dan Currency
Modul I Memeriksa Informasi untuk Relevansi dan Currency

Software Web Design Modul I
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

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

Format Teks Dasar dalam HTML
Modul I Format Teks Dasar dalam HTML Heading, HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. heading ditampilkan dengan font lebih besar dan tebal daripada teks normal Paragraf, setiap ada paragraf baru diawali dengan 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, untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>. Memeriksa Informasi untuk Relevansi dan Currency

Modul I 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 <hr>. Memformat karakter, atau untuk membuat teks Bold. atau untuk membuat teks Italic. <tt> atau <code> untuk membuat teks typewriter. Memeriksa Informasi untuk Relevansi dan Currency

Modul I Dasar Link HTML 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 <a>. Huruf a artinya "anchor". Tag <a> biasanya diikuti atribut "href" dimana nilai dari atribut ini merupakan alamat halaman yang akan dituju. Memeriksa Informasi untuk Relevansi dan Currency

Modul I 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</a> Alamat (URL) dokumen secara lengkap (absolute path) dapat digunakan untuk menentukan tujuan link, disebut link absolute a href=” Google</a> 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 : <a href=”dua.html#BT”>Tiga</a> Pada bagian yang dituju, dituliskan : <a name=”BT”>Tiga</a> Memeriksa Informasi untuk Relevansi dan Currency

<a href=”#BT”>Tiga</a> <a name=”BT”>Tiga</a>
Modul I 3. Link ke suatu bagian di dokumen yang sama, caranya hampir sama dengan langkah di atas : Pada dokumen satu.html, dituliskan : <a href=”#BT”>Tiga</a> Pada bagian yang dituju, dituliskan : <a name=”BT”>Tiga</a> 4. Mailto, link yang langsung menuju ke alamat . <a ga?”>Kirim </a> Memeriksa Informasi untuk Relevansi dan Currency

Modul I 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

Modul I 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

Modul I 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

Modul I 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

Modul I 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 Memeriksa Informasi untuk Relevansi dan Currency

Mendesain Halaman Website
Modul II Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

-Tekan OK untuk membuat canvas -Buat objek kotak menggunakan tool vector rectangular yang ada disebelah kiri, seperti gambar berikut : Mendesain Halaman Website

- Untuk mengatur warna dan garis, pilih objek kotak lalu ubah properti dibawah -Untuk memberi effect shadow pada kotak, maka gunakan panel property filters Mendesain Halaman Website

- Tambahkan teks pada desain web anda seperti gambar dibawah dengan menggunakan toolbox vector Memasukkan Gambar Bitmap dalam canvas -Buka file gambar.jpg atau gambar bitmap foto lainnya yang anda punya Mendesain Halaman Website

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 -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 Mendesain Halaman Website

Modul II 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 : Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

Modul II 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 !) Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

Modul II - Ketik nama web folder abcweb --> lalu tekan next
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 Mendesain Halaman Website

Modul II 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 jalan Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

Modul II 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 <table> sesudah <body> yang ada diatas properti Pada properti table ubah posisi table menjadi center (tengah) - Tekan F12 untuk melihat hasilnya Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

Modul II - Tekan OK untuk membuat tabel anda
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 Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

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

Modul II Cara Attach Style ke halaman
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 Mendesain Halaman Website

Modul II 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 Mendesain Halaman Website

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

Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol)
Modul III Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol)

Modul III 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 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 FTP (File Transfer Protocol)

- http://members.000webhost.com/login.php
Modul III 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)

Modul III Mempublikasikan Halaman Web menggunakan FTP (File Transfer Protocol) FTP (File Transfer Protocol)

Modul III UPLOAD FILE via FTP (FILE TRANSFER PROTOCOL)
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 FTP (File Transfer Protocol)

Memeriksa Links dan Navigasi
Modul IV (Keempat) Modul IV Memeriksa Links dan Navigasi

Modul IV 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. Memeriksa Links dan Navigasi

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

Modul IV Syarat Navigasi yang baik : 1. Mudah dipelajari
Memeriksa Links dan Navigasi 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. Memeriksa Links dan Navigasi

Modul IV Syarat Navigasi yang baik :
Memeriksa Links dan Navigasi 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. Memeriksa Links dan Navigasi

Mengedit Informasi Sesuai Kebutuhan
Modul V (Kelima) Modul V Mengedit Informasi Sesuai Kebutuhan

Modul V Adobe Dreamweaver
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. Mengedit Informasi Sesuai Kebutuhan

Modul V Mengedit Informasi Sesuai Kebutuhan Berikut adalah langkah-langkah untuk proses pengeditan halaman web dengan menggunakan fasilitas dreamweaver : Mengubah Objek menjadi Background Memasukkan Obyek Memperbaharui situs web yang bersifat statis Memperbaharui situs web melalui fasilitas admin (yang bersifat dinamis) Mengedit Informasi Sesuai Kebutuhan

Menguji dan Memastikan Perubahan-Perubahan
Modul V (Kelima) Modul VI Menguji dan Memastikan Perubahan-Perubahan

Modul V 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 Code Quality = kualitas kode HTML Compatibility = kompatibel dengan berbagai macam sistem operasi, browser dan hardware Navigasi = menyajikan link-link yang ada dalam seluruh halaman situs web User Interaction = dapat berinteraksi dengan pengunjung yang mengunjungi situs web Usability and Accessbility = dapat memenuhi keinginan pengunjung atau target pengguna situs web Performance = melihat sejauh mana kinerja situs web dalam berbagai keadaan Scalability = dapat dikembangkan sebagai antisipasi terhadap perubahan teknologi di masa yang mendatang Reliability = dapat melakukan tugasnya dalam kondisi yang berat. Menguji dan Memastikan Perubahan-Perubahan

Modul V Mengakses Halaman Web Secara Cepat Perhatikan jam akses
Mempengaruhi Halaman Web Mengakses Halaman Web Secara Cepat Perhatikan jam akses Disable auto load image Perhatikan indikator Tidak membuka beberapa jendela browser sekaligus Tutup jendela yang tidak perlu Menguji dan Memastikan Perubahan-Perubahan

Modul V Hal-hal yang mempengaruhi Rangking pada Search Engine
Rangking Search Engine Hal-hal yang mempengaruhi Rangking pada Search Engine Keyword pada domain name Keyword pada nama file Keyword pada page title Keyword pada headline Keyword yang relevan pada meta tag Keyword pada page content Meta tags Link Popularity Backlink Menguji dan Memastikan Perubahan-Perubahan

Modul V (Kelima) Evaluasi

Memeriksa Informasi untuk Relevansi dan Currency

Presentasi serupa

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

Presentasi serupa

Tentang proyek

Tanggapan

Masuk

Otorisasi melalui jaringan sosial:

Memeriksa Informasi untuk Relevansi dan Currency

Presentasi serupa

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

Presentasi serupa

Tentang proyek

Tanggapan