Tugas Akhir Keterampilan Komputer

PIN GROUP BBM

Buatlah Sketsa Tampilan / Blueprint dari Halaman Web yang akan dibuat pada kertas double folio dikumpulkan minggu depan. Masing - masing kelompok membuat halaman web dengan kriteria sebagai berikut :

Hotel
index.html ==> Halaman Awal Dari Web
fasilitas.html ==> Menjelaskan Fasilitas yang diberikan misalkan kamar dan layanan lain
layanan.html ==> Menjelaskan layanan Hotel
galery.html ==> Menampilkan Foto - Foto dari Hotel
contact.html ==> Menjelaskan kontak Hotel dan Denah Lokasi

Sekolah dan Kampus
index.html ==> Halaman Awal Dari Web
fasilitas.html ==> Menjelaskan Fasilitas yang diberikan misalkan lab dan kelas
jurusan.html ==> Menjelaskan Jurusan yang ada pada kampus/sekolah
galery.html ==> Menampilkan Foto - Foto dari Kegiatan Sekolah
contact.html ==> Menjelaskan kontak Sekolah dan Denah Lokasi

Kursus Komputer
index.html ==> Halaman Awal Dari Web
fasilitas.html ==> Menjelaskan Fasilitas yang diberikan misalkan Tempat kursus
kursus.html ==> Menjelaskan pilihan - pilihan kursus lengkap dengan harganya
galery.html ==> Menampilkan Foto - Foto dari Kegiatan Kursus
contact.html ==> Menjelaskan kontak  dan Denah Lokasi 

Restoran
index.html ==> Halaman Awal Dari Web
fasilitas.html ==> Menjelaskan Fasilitas yang diberikan misalkan pelayanan dan wifi
menu.html ==> Menjelaskan pilihan - pilihan menu yang ada
galery.html ==> Menampilkan Foto - Foto dari Keindahan restoran
contact.html ==> Menjelaskan kontak dan Denah Lokasi

Penjualan Komputer dan Distro
index.html ==> Halaman Awal Dari Web
diskon.html ==> Memperlihatkan produk yang sedang memiliki diskon
produk.html ==> Menjelaskan produk yang ada di tempat penjualan lengkap dengan harga
galery.html ==> Menampilkan Foto - Foto pengunjung
contact.html ==> Menjelaskan kontak dan Denah Lokasi

Travel
index.html ==> Halaman Awal Dari Web
fasilitas.html ==> Menjelaskan Fasilitas yang diberikan misalkan pelayanan dan wifi
produk.html ==> Menjelaskan jenis - jenis lokasi tujuan lengkap dengan harga
galery.html ==> Menampilkan Foto - Foto dari mobil dan pelayanannnya
contact.html ==> Menjelaskan kontak dan Denah Lokasi

Pembagian Kelompok

Kelas XII IPA 1

No Absen 1 - 4 ==> Web Hotel

No Absen 5 - 8 ==> Web Restoran

No Absen 9 - 12 ==> Web Penjualan Komputer

No Absen 13 - 16 ==> Web Kursus Komputer

No Absen 17 - 20 ==> Web Sekolah

No Absen 21 - 24 ==> Web Travel

No Absen 25 - 28 ==> Web Distro

Kelas XII IPA 2

No Absen 1 - 4 ==> Web Hotel

No Absen 5 - 8 ==> Web Restoran

No Absen 9 - 12 ==> Web Penjualan Komputer

No Absen 13 - 16 ==> Web Kursus Komputer

No Absen 17 - 20 ==> Web Sekolah

No Absen 21 - 24 ==> Web Travel

No Absen 25 - 27 ==> Web Distro

No Absen 28 - 30 ==> Web Kampus

Kelas XII IPA 3

No Absen 1 - 4 ==> Web Hotel

No Absen 5 - 8 ==> Web Restoran

No Absen 9 - 12 ==> Web Penjualan Komputer

No Absen 13 - 16 ==> Web Kursus Komputer

No Absen 17 - 20 ==> Web Sekolah

No Absen 21 - 24 ==> Web Travel

No Absen 25 - 28 ==> Web Distro

Note : Jika ada pertanyaan Melalui group bbm diatas

Silahkan Pelajari Materi Di Bawah Ini 

Ciri - Ciri Web Yang Baik dan Buruk

BURUK :
DESAIN SECARA UMUM
- Loading makan waktu lama
- Halaman pertama (index/home) tidak pas dalam browser standar (800 x 600 pixel)
- Frame yang harus discroll menyamping
- Tak ada fokus tema pada halaman itu
- Sebaliknya, terlalu banyak fokus tema dalam halaman itu
- Tombol navigasi menjadi satu-satunya daya tarik
- Peletakan elemen (teks, paragraf, gambar, dsb.) berantakan
- Warna tidak cocok satu sama lain
- Halaman bagus jika dibuka di satu browser, tetapi hancur jika dibuka di browser lain LATAR 
BELAKANG
- Warna abu-abu standar
- Kombinasi teks dan latar belakang yang membuat tulisan sulit dibaca
- Latar belakang terlalu ramai dan menyakitkan mata (misalnya menggunakan gambar gif animasi) yang membuat tulisan tidak jelas
TEKS
- Teks terlalu kecil sehingga sulit dibaca
- Teks terlalu panjang dan menembus batas kanan halaman
- Seluruh paragraf ditulis dengan HURUF BESAR
- Seluruh paragraf ditulis dengan huruf cetak tebal
- Seluruh paragraf ditulis dengan huruf miring
- Memberi garis bawah pada teks yang bukan link, akan membingungkan pengunjung
LINK
- Link standar berwarna biru
- Ada border link berwarna biru di seputar gambar
- Link yang tidak jelas akan membawa pengunjung kemana
- Link tanpa tujuan (broken link)
- Teks link yang tidak bergaris bawah atau tidak berubah warna ketika ditunjuk
GAMBAR
- Gambar yang sangat besar sehingga loadingnya lama
- Gambar yang tidak ada hubungannya dengan tema situs
- Gambar thumbnail yang ukurannya sama dengan gambar aslinya
- Gambar tanpa label alt
- Gambarnya hilang (muncul tanda x kecil warna merah)
- Gambar yang terlalu besar dan tidak muat di layar (anggap ukuran resolusi layar 800×600 pixel)
TABEL
- Ada bordernya
- Tabel digunakan sebagai hiasan dengan border yang sangat tebal
OBJEK BLINKING (BERKEDIP) DAN ANIMASI
- Apa saja yang berkedip, khususnya teks
- Garis berwarna pelangi
- Tulisan “Under construction”, apalagi ditambahi gambar pekerja konstruksi jalan raya
- Animasi gambar “under construction”
- Animasi gambar e-mail
- Animasi yang tidak pernah berhenti
SAMPAH
- Counter – siapa yang perduli!?
- Iklan sampah
- Pengunjung harus melakukan scroll menyamping (kiri-kanan) – percayalah, ini menyebalkan!
- Scroll bar frame di tengah-tengah halaman
NAVIGASI
- Menu navigasi yang tidak jelas atau terlalu kompleks
- Terlalu banyak frame
- Frame terlalu kompleks
- Scroll bar yang tidak perlu pada frame
- Halaman yatim-piatu (tak memiliki link untuk kembali ataupun maju, serta tak ada keterangan apapun)
- Title halaman yang tidak ada hubungannya dengan tema atau isi halaman tersebut



BAIK :
DESAIN SECARA UMUM
- Loading halaman cepat
- Halaman index atau home pas di ukuran minimal 800 x 600 pixel
- Seluruh halaman lainnya juga harus pas dengan ukuran minimal 800 x 600 pixel
- Gunakan elemen grafis (foto, gambar, dsb.) untuk mengisi jeda antara paragraf dalam sebuah tulisan berukuran sangat panjang
- Buat setiap halaman tampak sebagai bagian dari situs tersebut; tampilkan elemen tertentu secara berulang yang akan mengingatkan pengunjung bahwa ia masih berada dalam situs yang sama.
TEKS
- Warna latar belakang tidak bertabrakan dengan warna teks
- Teks cukup besar untuk dibaca, tetapi jangan terlalu besar
- Hirarki informasi jelas
- Kolom teks lebih kecil dari kolom di buku untuk memudahkan membaca di layar
NAVIGASI
- Tombol dan bar navigasi mudah dipahami penggunaannya
- Navigasi konsisten di seluruh situs
- Tombol dan bar navigasi memberi petunjuk kepada pengunjung dimana mereka berada sekarang, dan halaman apa yang mereka lihat sekarang
- Frame, jika digunakan, tidak menggangu
- Situs berukuran besar memiliki index atau peta situs
LINK
- Warna link disesuaikan dengan warna halaman
- Link selalu bergaris bawah sehingga jelas bagi pengunjung
GAMBAR
- Tombol-tombol berukuran secukupnya
- Setiap gambar ada keterangan/label alt-nya
- Setiap link gambar memiliki link teks yang sesuai
- Gambar dan latar belakang menggunakan warna yang mampu ditampilkan browser (browser-safe colors)
- Animasi akan berhenti dengan sendirinya setelah beberapa saat