Prinsip Desain User Interface Dalam Multimedia Interaktif Berbasis Halaman Web Dan Media Interaktif

Prinsip Desain User Interface Dalam Multimedia Interaktif Berbasis Halaman Web Dan Media Interaktif

multimedia interaktif   November 14, 2022

 

Perkembangan teknologi pada saat sekarang ini sudah menghasilkan perkembangan yang cukup besar terhadap kehidupan. Perkembangan ini mempengaruhi kegiatan pembelajaran dibangku sekolah pada bidang teknologi informasinya. Teknologi informasi ini berpengaruh dalam pengaksesan pelajaran yang tergolong cepat tergantung penggunaanya. Kondisi inilah yang mempengaruhi pendidikan saat ini.

Di dalam penggunaan teknologi tersebut akan terjadi hubungan atau komunikasi yang bisa dibilang dengan User Interface (Antarmuka Pengguna). Secara definisinya User interface itu merupakan komunikasi yang terjadi antara si pengguna dengan suatu sistem di dalamnya. User interface design ialah peralatan yang berhubungan langsung dengan komputer yang terarah dan pengalaman dari si pengguna. Tujuan dari user interface design ini yaitu membuat efek secara sederhana dan efektif. Desain ini dapat dipakai dalam hal pendukungan kegunaannya.

User interface ini bertugas dalam penerimaan informasi, memberikan informasi, penginputan data, penampilan suatu sistem dan juga memberikan tata cara yang membuat pemakai bisa paham dengan yang dikerjakan. User interface juga bermanfaat dalam menerjemahkan informasi antar pengguna dengan sistem yang memungkinkan komputer dapat berguna.

Dalam pendesainan interface atau antarmuka ini memiliki beberapa prinsip yang dibilang cukup penting, antara lain:

1.User compatibility

Antarmuka merupakan cara masuk ke sebuah sistem. Designer harus mengumpulkan berbagai ragam dari si pemakai  karena sifat pemakai tidak sama yang harus disesuaikan, karena perancang ini harus menyesuaikannya dan tidak mementingkan secara pribadi.

2. Product compatibility

Aplikasi yang sesuai dengan sistemnya pada interface berbeda dengan sistem yang manual yang menghasilkan hasil yang lainnya. Hal itu tidak dimaukan dari perusahaan karena dengan aplikasi ini dapat menjaga produk yang akan dihasilkan

3. Task compatibility

Aplikasi yang membantu para pemakai dalam menyelesaikan pekerjaannya. Pemakai akan mendapati pemilihan dan pemikiran yang mudah.

4. Work flow compatibility

Sistem manual yang terdapat langkah kerjanya dalam hal penyelesaian tugas. Dengan work flow compatibility ini bisa memudahkan pengguna dalam percepatan tugasnya.

5. Consistency

Sistem yang konsisten dengan sistem yang ada sesuai barangnya yang di dasarkan kepada setiap sifat dari semua orang yang berbeda

6. Familiarity
   Memberikan tampilan yang terkesan kepada pemakai. Tampilan awal yang harus membuat para pemakai agar tidak kebingungan dalam pemakaiannya
7. Simplicity

Memberikan sistem sederhana yang tidak membuat si pemakai kebingungan. Hal yang membuat si pemakai bosan ialah dengan sistem yang tidak sederhana atau bisa di bilang dengan berbelit. Tetapi si pemakai akan merasa senang apabila sistem itu mempunyai nilai kesederhanaan

8. Direct manipulation

Pengguna sangat ingin mempunyai suatu media yang dapat melakukan suatu kemajuan terhadap sistemnya dan dapat di sesuaikan dengan kebutuhannya itu.

9. Control
   Prinsip ini sama dengan sifat user yang mempunyai pemikiran yang bisa berganti. Karena itu harus merancang suatu keadaan yang dapat mengatasi itu.
10. WYSIWYG

Sistem yang satu ini mempunyai arti ialah apa yang kamu lihat itulah yang kamu dapatkan.

11. Flexibility

Fleksibel merupakan bentuk kelenturan dari penyelesaian pada saat menyelesaikan masalah.

12. Responsiveness

Setelah memasukkan data ke sistem melalui interface, sebaiknya sistem akan memberi kerjaan dari hasil data yang dimasukkan.

13. Invisible Technologi

Secara pemikiran, si pemakai memiliki rasa ingin tahu terhadap kehebatan dari sistem yang ada.

Mungkin di artikel yang kali ini cuman sedikit yang dapat di berikan bagi para Readers. Sekian

Tag-Tag Dasar HTML untuk Pemula

Tag-Tag Dasar HTML untuk Pemula

html   August 25, 2022

 Dalam melakukan kodingan pada html, pada dasarnya orang-orang hanya mengetahui tag yang dipasang secara umum ( <html>, <head>, < title>, dan <body>) , padahal masih banyak sekali tag html yang bisa digunakan untuk bisa memaksimalkan pemrograman HTML lebih baik lagi.

Tag html                                                Fungsi html <html>…</html> Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML <head>…</head> Kepala dari dokumen HTML <body>…</body> Tag untuk menampilkan isi dokumen HTML <title>…</title> Judul dari dokumen HTML yang ditampilkan pada judul jendela browser <br> Tag untuk ganti baris <p>…</p> Membuat paragraf <h1>…</h1> Header 1, untuk judul sebuah web <h2>…<h2> Header 2, sub judul sebuah web <h3>…</h3> Header 3, sub judul sebuah web <h4>…</h4> Header 4, sub judul sebuah web <h5>…</h5> Header 5, sub judul sebuah web <h6>…</h6> Header 6, sub judul sebuah web <b>…<b> Bold, tag html yang berfungsi untuk mempertebal teks <i>…<i> Italic, tag html yang berfungsi untuk membuat tampilan teks tercetak miring <u>…</u> Underline, tag html yang berfungsi untuk membuat tampilan teks tercetak garis bawah <pre>…<pre> Preformated Text, tag html berfungsi untuk menampilkan teks apa adanya sesuai text editor <center>…</center> Tag html berfungsi untuk menampilkan teks dengan posisi horizontal ditengah <font>…</font> Tag html berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf <hr> Tag html berfungsi untuk membuat suatu garis horizontal <ol>…</ol> Order List, tag html berfungsi untuk membuat nomor daftar urut, bisa berupa angka, huruf atau angka romawi. <ul>…</ul> Unorder List, tag html berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet) <li>…</li> List Item, tag yang berada di elemen OL dan UL yang berbentuk list <table>…</table> Tag yang berfungsi untuk membuat suatu data yang terdiri dari baris dan kolom <caption>…</caption> Tag yang berfungsi untuk membuat judul dari tabel <tr>…</tr> Table Row, mendefiniskan baris pada tabel, dan tag ini harus ada dalam tag TABLE <td>…<td> Table Data, terletak di dalam tag TR, yang berfungsi untuk memasukkan data-data <img> Tag html untuk menampilkan gambar <a>…</a> Tag html yang berfungsi untuk menghubungkan ke internal atau eksternal halaman web <form>…</form> Tag html berfungsi untuk mendefiniskan form interaktif <input>…</input> Tag html berfungsi untuk mendefinisikan input yang akan dimasukkan oleh pengguna <select>…</select> Tag html berfungsi untuk mendefinisikan opsi pilihan pada form kontrol <option>…</option> Tag hml berfungsi untuk mendefinisikan opsi pilihan pada menu SELECT <textarea>…</textarea> Tag html berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris <frameset>…</frameset> Tag html berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian <frame>…</frame> Tag html yang berfungsi untuk mendefiniskan from yang terdapat dalam frameset Se telah membaca artikel di atas semoga bisa membantu pekerjaan anda menjadi lebih mudah atau membantu anda untuk belajar mendesain web. Terimakasih.

Tag html berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian

Tag HTML dilengkapi Fungsi dan Contoh Penggunaannya

Tag HTML dilengkapi Fungsi dan Contoh Penggunaannya

html   July 27, 2022

Supaya lebih mudah saat mendesain web menggunakan HTML maka kita harus bisa menggunakan tag – tag HTML dengan baik. Berikut ini kami telah rangkumkan beberapa tag HTML yang bisa kamu pelajari dan langsung dipraktekan sendiri. 

Tanpa panjang lebar langsung saja inilah beberapa tag HTML dasar yang sering diaplikasikan untuk mendesain website beserta fungsi dan contoh penggunaannya supaya kamu mudah memahaminya.

Tag Dasar

No	Nama Tag	Fungsi
1	<! DOCTYPE html>	Deklarasi untuk mendefinisikan dokumen menjadi HTML
2	<html>	Tag pembuka untuk membuat dokumen HTML
3	<head>	Informasi meta tentang dokumen
4	<title>	Membuat judul halaman yang nantinya akan ditampilkan di browser
5	<body>	Tempat dibuatnya semua konten website menggunakan HTML

Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Preview :

Tampilan Tag Dasar

Tag Judul

No	Nama Tag	Fungsi
1	<h1> s/d <h6>	Membuat judul atau heading
2	<hr>	Memisahkan konten (biasanya ditampilkan garis pembatas)

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

Preview :

Tampilan Tag Pos

 

Tag Paragraf

No	Nama Tag	Fungsi
1	<p>	Membuat paragraf
2	<br>	Membuat garis baru
3	<pre>	Memfortmat teks atau kalimat

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</p>
<br> example

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

</body>
</html>

Preview :

Tampilan Tag Paragraf

 

Tag Style

No	Nama Tag	Fungsi
1	style	Atribut untuk elemen styling pada HTML
2	background-color	Memberikan warna latar belakang
3	color	Memberi warna pada teks
4	font-family	Mengubah font pada teks
5	font-size	Mengatur ukuran font
6	text-align	Mengatura perataan teks

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Preview :

Tampilan elemen styling

---

Tag Formating

No	Nama Tag	Fungsi
1	<b>	Membuat teks tebal
2	<strong>	Membuat teks penting
3	<i>	Membuat teks miring
4	<em>	Membuat teks ditekankan
5	<mark>	Membuat teks ditandai
6	<small>	Membuat teks kecil
7	<del>	Teks dihapus
8	<ins>	Teks dimasukan
9	<sub>	Teks subscript
10	<sup>	Teks superscript

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

Preview :

Tampilan tag formating

 

Tag Gambar

No	Nama Tag	Fungsi
1	<img>	Elemen untuk mendefinisikan gambar
2	src	Atribut untuk menentukan URL gambar
3	alt	Mendefinisikan teks pada gambar, jika gambar tidak dapat ditampilkan
4	width – height	Menentukan ukuran gambar
5	float	Properti untuk float image pada CSS
6	<map>	Mendefinisikan gambar peta
7	<area>	Mendefinisikan area atau daerah-daerah gambar pada peta
8	<picture>	Menampilkan gambar yang berbeda untuk perangkat yang berbeda

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="300" height="300">

</body>
</html>

Preview :

Tampilan Tag Gambar

 

Tag Form

No	Nama Tag	Fungsi
1	<form>	Membuat formulir untuk mengumpulkan input pengguna
2	<input>	Membuat tipe inputan pada form yang akan dibuat
3	<textare>	Elemen untuk mendefinisikan field input
4	<label>	Memberikan label pada elemen input
5	<fieldset>	Mengelompokan elemen yang terdapat pada sebuah form
6	<select>	Membuat input dengan pilihan yang berbentuk list drop down
7	<optgroup>	Mengelompokan beberapa pilihan pada daftar pilihan input
8	<option>	Mendefinisikan opsi yang bisa dipilih
9	<button>	Membuat Button
10	<datalist>	Membuat daftar pilihan untuk input data
11	<output>	Menampilkan hasil dari hitungan

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>

</body>
</html>

Preview :

Tampilan Tag Form

Tag Tabel

No	Nama Tag	Fungsi
1	<table>	Membuat tabel pada web
2	<tr>	Membuat baris pada tabel
3	<td>	Membuat kolom pada tabel
4	<th>	Membuat judul pada kolom. Contohnya nama, kelas, dan alamat.
5	<caption>	Membuat judul tabel
6	border	Mengatur garis tabel
7	border-collapse	Mengatur batas garis tabel
8	padding	Mengatur padding pada cell
9	text-align	Mengatur perataan pada konten tabel
10	border-spacing	Mengatur jarak spasi garis tabel
11	colspan	Menggabungkan beberapa kolom. Kalau di office disebutnya Merge Cell
12	rowspan	Menggabungkan beberapa baris
13	id	Memberikan id pada tabel atau kolom

Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Preview :

Tampilan Tag Tabel

 

Tag Daftar/ List

No	Nama Tag	Fungsi
1	<ul>	Untuk membuat tampilan daftar menggunakan simbol seperti bullet, cyrcle, dan lainnya.
2	<ol>	Membuat daftar menggunakan nomor, huruf, romawi, dan lainnya
3	<li>	Menentukan berbagai item yang ingin ditampilkan
4	<dl>	Mendefinisikan daftar deskripsi
5	<dt>	Mendefinisikan istilah deskripsi
6	<dd>	Menggambarkan istilah dalam daftar deskripsi
7	<type>	Menentukan jenis penomoran

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Preview :

Tampilan Tag List/ Daftar

Penutup

Itulah beberapa Tag HTML Dasar yang umum sekali digunakan pada saat mendesain atau membuat website dan bisa kamu pelajari lebih dalam lagi. Semoga bermanfaat dan jangan lupa tekan tombol sharenya.