ja

Sebelum membuat layout website, kita harus memahami elemen-elemen web terlebih dahulu. Proses selanjutnya adalah merancang tata letak (layout) dan user experience untuk mempermudah interaksi dengan pengguna (user friendly) yang biasa disebut perancangan wireframe, kemudian merancang tampilan grafis web misalnya warna tema, bentuk elemen web,dll.

Elemen-elemen pada website

Elemen dasar

Header

Bagian halaman web yang membungkus semua komponen halaman web

Logo

Berisi identitas perusahaan, organisasi, pemilik situs

Navigasi

Bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.

Content atau isi

Memuat Sebagian besar informasi yang disajikan

Footer

Bagian bawah dan berisi informasi pemilik situs (copyright) dan beberapa link

White space

Area kosong yang membatasi antar komponen. White space menjadi penting agar pengunjung mempunyai ruang berhenti antara bagian-bagian situs lain. White space dapat diisi dengan banner atau animasi

Elemen form

Input text field

Untuk memasukkan data berupa karakter, kata atau angka

Radio button

Untuk 2-5 pilihan yang hanya bisa memilih satu opsi saja

Checkbox

Untuk pilihan yang bisa memilih lebih dari satu opsi

Dropdown

Untuk pilihan yang lebih dari 2 pilihan tetapi hanya dapat memilih satu opsi saja

Text area

Untuk memasukkan data berupa teks panjang

Button

Untuk memproses form, misalnya untuk reset ataupun submit

Elemen pada content

Page title

Judul halaman

Icon

Sebuah gambar atau objek kecil yang mewakili judul website, file program, tombol dll.

Title

Judul artikel

Paragraph

Isi artikel berupa tulisan

Image 

gambar

Media

Berupa video ataupun audio

Table

Berupa tabel yang berisi data-data ataupun gambar

Pagination

Sebuah elemen yang berisi link navigasi untuk tabel maupun list

List

Sederetan tulisan yang berurutan, misalnya judul-judul artikel, dll.

Container

Beberapa box/kotak yang biasanya berada dipinggir dengan konten apa saja

d.Elemen pada tabel

Sort

Untuk mengurutkan tabel berdasarkan kolom tertentu

Filter

Untuk menampilkan isi tabel dengan kriteria khusus

Search box

Untuk mencari data yang terdapat pada tabel

e.Elemen dinamis

Modal window/lightbox

Tampilan layar diatas layar. Biasanya layar ini muncul jika pengguna memberikan interaksi tertentu, misalnya menekan tombol tertentu

Popup/tooltip

Sebuah elemen yang muncul apabila pengguna menekan meng-hover elemen tertentu

Carousell slideshow

Carousel biasanya menampilkan konten gambar ataupun promosi yang berubah-ubah setiap beberapa saat pengguna juga bisa melihat isi konten carousel yang lain dengan menekan tombol navigasi pada slideshow

Progress bar

Biasanya berupa bar Panjang untuk menunjukkan kepada pengguna tahapan-tahapan interaksi user

Accordion

Istilah untuk mode panel yang dapat dibuka (expand/show) dan ditutup (collapse/hide)

Alert/notification

Pemberitahuan kepada pengguna (user) jika terjadi kesalahan atau informasi lainnya

Hover

Istilah untuk item yang dikenakan oleh kursor

Kode Script Anda Di Sini

Fungsi Web, dan Definisi multimedia interaktif berbasis halaman web

Fungsi Web

Fungsi web secara umum mempunyai beberapa fungsi yaitu:

Fungsi informasi

Situs web yang memiliki fungsi informasi pada umumnya lebih menekankan pada kualitas kontennya, karena tujuan situs tersebut adalah menyampaikan isinya. Situs ini sebaiknya berisi teks dan grafik yang dapat didownload dengan cepat. Pembatasan peggunaan animasi gambar dan elemen bergerak diyakini sebagai Langkah yang tepat serta diganti dengan fasilitas yang memberikan fungsi informasi seperti news, company profile, library, reference, dll.

Fungsi komunikasi

Situs web yang mempunyai tugas komunikasi pada umumnya adalah situs web dinamis. Karena dibuat menggunakan pemrograman web (server side), maka dilengkapi fasilitas yang memberikan fungsi-fungsi komunikasi, seperti webmail, contact form, chatting form, dll.

Fungsi hiburan

Situs web juga dapat memiliki fungsi hiburan/entertainment. Pada web yang berfungsi sebagai sarana hiburan, penggunaan animasi gambar dan elemen bergerak dapat meningkatkan mutu presentasi desain.

Fungsi transaksi

Situs web dapat dijadikan sarana transaksi bisnis, baik barang, jasa, atau lainya. Situs web ini menghubungkan perusahaan, konsumen, dan komunitas tertentu melalui transaksi elektronik. Pembayarannya bisa menggunakan kartu kredit, transfer, atau membayar secara langsung.

Definisi multimedia interaktif berbasis halaman web

Multimedia interaktif berbasis halaman web adalah situs web yang menggantung lebih dari satu jenis media. Di samping teks dan gambar, biasanya juga mengandung media suara, video, ataupun animasi. 

Multimedia interaktif berbasis halaman web terdiri atas beberapa elemen, yaitu:

• Teks
• Gambar
• Animasi
• Audio
• video

Kriteria web yang baik

Kriteria web yang baik

Terdapat 9 kriteria web yang baik yaitu:

Usability

Situs harus memenuhi 5 syarat untuk mencapai tingkat usabilitas ini yaitu mudah untuk dipelajari, penggunaanya efesien, mudah diingat, tingkat kesalahan rendah, dan kepuasan pengguna.

System navigasi

System navigasi yang baik antara mudah dipelajari, tetap konsisten, memungkinkan umpan balik (feedback), muncul dalam konteks, menawarkan alternatif lain, memerlukan perhitungan waktu dan Tindakan, menyediakan pesan visual yang jelas, menggunakan label yang jelas dan mudah dipahami, serta mendukung tujuan dan penggunanya.

Graphic design

Hal-hal yang perlu diperhatikan dalam pembuatan desain visual

1. Gunakan desain visual yang menciptakan kejelasan kegunaan 
2. Buat situs web yang berkesan professional
3. Jaga grafik agar ukuran kecil serta gunakan fasilitas optimize pada program pengolahan grafik
4. Gunakan format yang tepat (JPEG dan PNG 24 bit) untuk foto, (GIF dan PNG 8 bit) untuk gambar berwarna sederhana.
5. Buat konten yang baik
6. Buat tulisan pada halaman web agar dapat dengan mudah dan cepat di scan

Compatibility

1. Tes di berbagai browser
2. Pastikan situs web bekerja atau bisa diakses di PC atau komputer
3. Tawarkan pilihan tampilan situs ( Template ) baik yang pelan maupun yang cepat versi HTML
4. Jika memakai plug-in pastikan pengguna dapat mengunduh (download) dengan mudah

Loading time

Perhatikan kecepatan akses memungkinkan halaman web bisa dibuka oleh pengguna.

Functionality

Penggunaan koding atau script yaitu HTML, CSS, PHP, dan database harus optimal

Accessibility

Halaman web harus bisa diakses oleh setiap orang (online) contoh situs web : google.com, youtube.com dll.

Interactivity

Buat situs web yang memungkinkan pengunjung berinteraksi dengan situs web dan melibatkan pengguna situs web untuk memberikan umpan balik (feedback)

Content 

Desain grafis tanpa konten akan menjadi tidak berguna dan tidak bermanfaat sama sekali. Konten yang menarik, relevan, dam pantas untuk target audience adalah kuncinya. Penggunaan bahasa yang baik pun harus diperhatikan. Hindari kesalahan penulisan (typo), tata bahasa atau tanda baca.

Tugas : https://forms.gle/fpupiCMULpGNTFGH8

#Pertemuan I Konsep Multimedia Interaktif

Materi : Konsep Multimedia Interaktif

Apa itu multimedia interaktif?

Secara harfiah multimedia berasal dari 2 kata yaitu multi dan  medium kata multi banyak atau bermacam-macam, sedangkan kata medium berarti suatu yang dipakai untuk menyampaikan atau membawa sesuatu. Jadi multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, gambar, animasi, dan video dengan menggunakan alat bantu serta koneksi.

Macam-macam multimedia berdasarkan jenis pengoprasiannya:

Multimedia linier

Multimedia yang tidak dilengkapi dengan alat pengontrol apapun yang dapat dioperasikan oleh pengguna.

Contoh: televisi dan film

Multimedia interaktif

Multimedia yang dilengkapi dengan alat pengontrol yang dapat dioperasikan oleh pengguna, sehingga pengguna dapat memilih apa yang diinginkan untuk proses selanjutnya.

Contoh: aplikasi game dan CD interaktif

Pada modul ini anda akan dikenalkan lebih mendalam dengan multimedia interaktif. Multimedia interaktif adalah pemanfaatan komputer untuk membuat serta menggabungkan teks, gambar, suara, video dan animasi dengan menggabungkan perangkat-perangkat tertentu yang dapat memungkinkan pengguna melakukan navigasi, berinteraksi dan berkomunikasi.

Kelebihan multimedia interaktif

• Multimedia interaktif merupakan cara yang lengkap untuk menyampaikan sesuatu
• Meningkatkan efektivitas penyampaian dan penerimaan informasi
• Memberikan kemudahan pemakaian
• Mendorong partisipasi, keterlibatan penggunanya

Elemen- elemen multimedia interaktif

Pembuatan multimedia interaktif adalah menggabungkan semua media yang terdiri dari teks, gambar, grafik, audio, dan interaktivitas.

Teks

Sebuah simbol berupa medium visual yang digunakan untuk menjelaskan bahasa lisan. Teks mempunyai berbagai macam jenis ( misalnya Times New Roman, Arial, Comic, Sans MS )

Gambar

Berupa gambar diam dan gambar bergerak (video). Contoh gambar diam yaitu foto, gambar digital, lukisan dan poster.

Grafik

Medium atau media berbasis visual  yang berfungsi untuk memperindah tekstur background sebagai visualisasi informasi.

Audio

Medium berbasis suara merupakan segala sesuatu yang bisa didengar dengan menggunakan indra pendengar. Contohnya narasi, sound effect dan backsound.

Interaktivitas

Interaktivitas adalah rancangan dibalik suatu program multimedia dengan memberikan keleluasaan bagi seseorang untuk mengakses berbagai macam bentuk media atau jalur didalam suatu program multimedia.

Untuk absensi silahkan diisi di kolom komentar

link soal https://forms.gle/R3rPELZTCTBYyUbB6