Penting sekali untuk melaksanakan bahwa visible / UI tidak berdiri sendiri untuk memberikan makna, tapi kode penyusunnya juga turut berperan penting. Penggunaan Semantika ini membantu banyak hal mulai dari search engine marketing hingga aksesibilitas.

Ini adalah jawaban jawaban saya di Quora untuk pertanyaan Apa saja hal-hal yang perlu dipelajari tentang UI oleh developer pemula?.

Dalam pemrograman, Semantik mengacu pada arti sepotong kode – misalnya “apa efek menjalankan baris JavaScript itu?”, Atau “apa tujuan atau peran yang dimiliki elemen HTML itu” (bukan “seperti apa tampilannya ? ”.)

Dokumen web MDN

Menurut dokumen internet MDN (the Mozilla Developer Community), Semantika bagaimana caranya kepada arti / dari sebuah baris kode, dan makna HTML dengan tujuan atau peran dari elemen HTML yang digunakan hanya membantu. Sebagai contoh, tag H1 aksi untuk menyatakan judul yang memiliki hierarki paling tinggi dalam sebuah laman internet.

Nah sayang sekali hal seperti ini sering luput bahkan di kalangan unicorn sekalipun.

Ini adalah kode yang umum ditemui di situs perdagangan elektronik lokal.

<div elegance="card"> 
<div elegance="symbol"><img src="https://rifatnajmi.com/design/semantika-dalam-ui/{{Product Symbol}}"></div> 
<div elegance=“name”>{{Product Identify}}</div> 
<div elegance=“description”>{{Product Description}}</div> 
<div elegance="button">Purchase</div> 
</div> 

Kode ini tidak memiliki makna. Tidak percaya? Buka situs Tokopedia dan lihat kode penyusunnya.

Secara tampilan, laman pencarian “Asus ROG” di Tokopedia adalah seperti ini, tidak berbeda dengan berbagai situs perdagangan elektronik lainnya.

Tampilan pencarian di Tokopedia

Namun, kalau dianalisa lebih lanjut, justru struktur konten di laman Tokopedia tersebut adalah seperti ini.

headingsMap di Tokopedia tanpa semantika

Coba bandingkan dengan Amazon.

headingsMap di Amazon dengan semantika yang sesuai

Atau eBay.

headingsMap di eBay dengan semantika yang sesuai

Amazon mengesampingkan filter out dan mengutamakan hasil pencarian produk.

eBay menampilkan hasil pencarian produk tapi penempatannya agak salah, harusnya hasil pencarian bisa lebih awal dan filternya ditempatkan kemudian.

Tokopedia? Hanya filternya saja yang. Hasil pencarian produk tidak ada sama sekali.

Kode amatir di atas bisa lebih lanjut.

<div elegance="card"> 
<img src="https://rifatnajmi.com/design/semantika-dalam-ui/{{Product Symbol}}" alt="{{Product Symbol Alt}}"> 
<h2>{{Product Identify}}</h2> <!-- Bisa H2 atau H3 atau H4, tergantung kebutuhan --> 
<p>{{Product Description}}</p> 
<a category="button" href="{{Product URL}}">Purchase</a> 
</div> 

Nah, mengapa Semantika penting? Menurut dokumen internet MDN, beberapa fungsinya adalah sebagai berikut.

  1. Mesin pencari akan menganggap isinya sebagai kata kunci penting untuk mempengaruhi peringkat pencarian halaman.
  2. Pembaca layar dapat menggunakannya sebagai penunjuk arah untuk membantu pengguna dengan gangguan penglihatan menavigasi halaman.
  3. Menemukan blok kode yang bermakna jauh lebih mudah daripada mencari meskipun tidak ada habisnya divs dengan atau tanpa kelas semantik atau spasi nama.
  4. Menyarankan kepada pengembang jenis knowledge yang akan diisi.
  5. Penamaan semantik mencerminkan penamaan elemen / komponen kustom yang tepat.

Poin nomor dua adalah hal yang paling menarik: aksesibilitas.

Kita semua pada akhirnya akan memiliki kecacatan, kecuali kita mati lebih dulu.

Gregg Vanderheiden

Dikutip dari Microsoft, adalah dua hal:

  1. Sebuah kualitas yang menjamin pengalaman yang terbuka / setara siapa saja (inklusif).
  2. Sebuah bidang / disiplin profesional yang bertujuan untuk mencapai pengalaman yang setara.

Semantika adalah salah satu hal untuk mencapai aksesibilitas alias kualitas pengalaman pengguna yang setara.

9 orang menikmati posting ini



Source link

admin

Leave a Reply

Your email address will not be published. Required fields are marked *