Freecodecamp: [BETA] Desain Visual Terapan memberikan ide yang buruk tentang semantik

@ Facundo-Corradini Anda benar - terima kasih telah melaporkan ini. Apakah Anda akan merasa nyaman untuk memperbaikinya? Jika ya, silakan baca pedoman Kontribusi kami. Anda dapat mengganti nama judul menjadi Applied Visual Design: Use the em Tag to Emphasize Text .

Saya akan senang membantu mengatasi masalah ini jika diperlukan

@uhde_hebat . Silakan buka pedoman Berkontribusi kami.
@raisedadead , @systimotic Haruskah kita menerapkan ini?

Hai @ Facundo-Corradini, terima kasih telah menyampaikan kepedulian dan meluangkan waktu untuk meninjau tantangan ini.

Bisakah Anda membantu kami dengan beberapa saran perubahan yang harus dilakukan pada verbiage yang membantu menjelaskan pentingnya perbedaan ini?

Saya setuju, perbincangan saat ini mungkin memasukkan konsep yang salah ke dalam pembelajaran.

Tentu. Izinkan saya mengerjakan proposal, kemudian saya akan menguploadnya dan jika Anda setuju, saya dapat mengerjakan perubahan.

Ini tidak sesederhana itu, karena bagian ini sebenarnya berhubungan dengan Desain Visual, bukan semantik. Jadi mungkin kita sebaiknya memanggil bagian "teks miring" dan menjelaskan kasus penggunaan untuk setiap tag

Halo @ Facundo-Corradini! Bagaimana jalannya?

Hai teman-teman,

Telah memikirkan bagaimana menggunakan ini dan mengerjakan kurikulum untuk melihat mana yang lebih cocok. Tapi tidak ada jalan keluar yang mudah dari ini. Tag apa pun yang kami pilih akan mengabaikan kasus penggunaan untuk yang lain, dan mencoba memeras casing yang berbeda untuk setiap gaya pada satu tantangan akan terasa sempit. Bagian ini berurusan dengan desain visual terapan, bukan semantik.

Karena beberapa semantik struktural tercakup di bagian aksesibilitas, mungkin menambahkan beberapa semantik tingkat teks mungkin ada cara untuk melakukannya. Atau mungkin sebagai waktu tunggu nanti di bagian desain visual terapan. Tapi saya tidak yakin apakah kita masih tepat waktu untuk perubahan kurikulum (saya yakin tidak, bukan?)

Jadi opsinya adalah:

0 - Tinggalkan tantangan apa adanya

1- Ubah judul menjadi "menekankan teks ..." dan jelaskan ada cara lain untuk membuat teks miring, yaitu
--- 1.A - akan dibahas nanti di bagian semantik tingkat teks baru yang hipotetis
--- 1.B - Cukup tautkan sumber yang bagus pada semantik tingkat teks

2- Ubah semua tantangan desain visual terkait gaya teks seperti garis bawah, coretan, font-weight, dan miring menjadi tag netral seperti span, dan ubah menjadi tantangan berbasis CSS, dengan menjelaskan bahwa ada tag berbeda yang menerapkan gaya secara default, yang lagi
--- 2.A - akan dibahas nanti di bagian semantik tingkat teks baru yang hipotetis
--- 2.B - Cukup tautkan sumber yang bagus pada semantik tingkat teks

Saya cenderung berpikir solusi terbaik adalah 2A, dengan 1A menjadi kompromi yang sangat bagus.

Namun bersikap realistis, mungkin 1B adalah jalannya. Judul yang masuk akal, dengan deskripsi yang membahas masalah tersebut, dan tautan untuk para pekemah terbaik untuk menyelami ... tanpa perlu mengubah tantangan atau kurikulum yang sebenarnya

Pikiran?

@ Facundo-Corradini, sumber apa yang Anda pikirkan untuk semantik tingkat teks?

@bayu_joo
Menurut saya tantangan yang dimaksud adalah sebagai berikut:

Setel ukuran font untuk Beberapa Elemen Judul
Atur font-weight untuk Multiple Heading Elements
Setel ukuran font Teks Paragraf
Atur tinggi baris Paragraf

Sampai kami menemukan solusi yang baik, saya pikir kami harus membedakannya hingga setelah beta.
Saya bisa membuat PR dan menghapusnya dari seed.

Saya bisa membuat PR dan menghapusnya dari seed.

Apakah maksud Anda menghapusnya sekarang, Jika ya. Saya pikir mereka lebih baik dibiarkan begitu saja sehingga kami dapat mengumpulkan lebih banyak umpan balik.

@raisedadead menghapusnya untuk saat ini dan menambahkannya setelah beta saat kata-kata itu diubah atau dikategorikan dengan lebih tepat. Jika mereka memberikan ide yang salah tentang semantik, mungkin kita tidak boleh membiarkan berkemah melalui mereka dan mempelajari konsep secara salah :)

@ahmadabdolsaheb maaf entah kenapa ketinggalan notifikasi

Yang Anda kutip (font-size, font-weight, dan line-height) tidak terkait langsung dengan semantik. Kecuali jika melakukan sesuatu yang aneh, seperti menjadikan semua teks Anda sebagai tag <p> dan menyesuaikan ukuran font saat mencoba menunjukkan beberapa sebagai tajuk. Tapi klarifikasi itu diurus dengan sempurna dalam pengenalan elemen <h> dan <p> pada bagian pertama, serta dijelaskan lebih lanjut dalam _Applied Visual Design: Adjust the Size of a Header Versus a Paragraph Tag_:

Ukuran fonta dari tag header (h1 sampai h6) umumnya harus lebih besar dari ukuran font dari tag paragraf. Ini memudahkan pengguna untuk memahami tata letak dan tingkat kepentingan semua hal di halaman secara visual. Anda menggunakan properti font-size untuk menyesuaikan ukuran teks dalam sebuah elemen.

Bagian yang ditantang adalah:

- Gunakan Tag yang kuat untuk Membuat Teks Tebal: Elemen <strong> adalah untuk konten yang lebih penting (seperti peringatan), sedangkan elemen <b> digunakan untuk menarik perhatian ke teks tanpa menunjukkan bahwa itu lebih penting. Keduanya hanya dicetak tebal secara default, tetapi artinya tidak sama

- Gunakan Tag u untuk Menggarisbawahi Teks: Ini mungkin yang paling rumit .. mengutip rekomendasi W3C:

Elemen u mewakili rentang teks dengan anotasi non-tekstual yang tidak diartikulasikan, meskipun dirender secara eksplisit, seperti memberi label teks sebagai nama yang tepat dalam teks bahasa China (tanda nama yang tepat dalam bahasa China), atau memberi label teks yang salah eja. (...) Dalam banyak kasus, elemen lain mungkin lebih sesuai

Sejauh yang saya tahu, di sebagian besar bahasa kami hanya ingin garis bawah untuk tajuk dan semacamnya, dan itu harus ditangani dengan memberi gaya pada tag <h(x)> . Kesalahan ejaan adalah kasus penggunaan lain, tetapi kami jarang berada dalam skenario seperti itu dengan sengaja menulis dan menandai kesalahan ejaan ...

- Gunakan Tag em untuk Miringkan Teks:
<em> tag untuk penekanan, misalnya, jika seseorang menyukai semantik teks tetapi bukan ahli (: p), Anda dapat mengatakan "Saya tidak _that_ ke dalam semantik teks". Penekanan pada kata "itu" membuatnya lebih jelas bahwa, meskipun tertarik padanya, itu tidak akan menghentikannya dari menggunakan hal-hal yang salah sesekali.
<em> dicetak miring secara default, tetapi tidak ada yang menghalangi kita untuk memberikan tag <em> gaya apapun yang kita inginkan. Saya biasanya menambahkan beberapa font-weight yang lebih berani juga.
Dengan cara yang sama, tidak setiap teks yang dicetak miring dimaksudkan untuk memberi penekanan. Pikirkan definisi, kata teknis, atau yang ditulis dalam bahasa asing (biasanya ungkapan Latin). Itu adalah skenario di mana
<i> tag adalah pilihan yang tepat.
Atau bahkan <cite> elemen mungkin merupakan cara yang tepat untuk menampilkan teks miring, saat mereferensikan nama karya atau penulis, biasanya digunakan bersama dengan <q> atau <blockquote>

-Gunakan Tag del untuk Mencoret Teks :
<del> ditujukan untuk konten yang dihapus, misalnya, saat menandai konten yang telah dihapus dari versi dokumen sebelumnya, seperti git (hub) dengan coretan dan latar belakang merah vs non-coret dan latar belakang hijau untuk bagian baru / yang diubah.
Keluaran default untuk <del> adalah coretan, tetapi Anda tidak boleh menggunakan <del> setiap kali Anda ingin mencoret teks.
Misalnya, Anda mungkin ingin menggunakan elemen <s> sebagai gantinya untuk hal-hal yang tidak lagi relevan, misalnya, saat menandai harga reguler referensi pada label harga produk yang didiskon.
Atau gunakan saja <span> dan beri gaya coretan jika definisi di atas tidak berlaku untuk alasan khusus Anda untuk membaca beberapa teks.

Semua bagian itu, bagaimanapun, penting untuk Desain Visual Terapan.

Jadi, rekomendasi saya tidak menghapus atau menunda, tetapi menyimpannya sebagaimana adanya dan menambahkan sedikit klarifikasi pada bagian yang dikompromikan, mungkin ditautkan ke sumber eksternal pada semantik tingkat teks.

Sumber favorit saya untuk semantik tingkat teks adalah rekomendasi W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
Serta klarifikasi MDN tentang kasus penggunaan untuk setiap tag, misalnya
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Mungkin sedikit terlalu teknis, jadi saya dapat mencari beberapa opsi ramah pemula lainnya, atau menulis sendiri di blog freeCodeCamp jika Anda mau :)

Saya pikir judul tantangan dan penggunaan <em> untuk mencetak miring sepenuhnya salah dan harus diganti namanya menjadi:
Desain Visual Terapan: Menggunakan gaya font miring ke Teks Miring

Dan ubah teks dari:

Untuk menekankan teks, Anda dapat menggunakan tag em. Ini menampilkan teks sebagai huruf miring, karena browser menerapkan CSS font-style: italic; ke elemen.

untuk

Untuk memiringkan teks, terapkan aturan css _font-style: italic_ ke elemen yang ingin Anda tampilkan dengan gaya miring.

Jadi, penggunaan <em> dapat memiliki tampilan yang lebih memadai di Bagian Aksesibilitas Terapan dengan tantangannya sendiri.

Terima kasih semuanya atas tanggapan Anda. Kami akan beralih dari kurikulum berbasis mata pelajaran, dan kami berharap dapat memiliki deskripsi yang lebih baik tentang semantik dalam kurikulum berbasis proyek yang akan datang.

@scissorsneedfoodtoo , pikiran?

Terima kasih @ Facundo-Corradini atas penjelasan rinci Anda dan pihak lain yang telah mempertimbangkannya. Banyak proyek yang masih dikembangkan, dan akan dirilis secara bergiliran setelah diuji. Mungkin ada baiknya membiarkan masalah ini tetap terbuka untuk saat ini, jika seseorang dapat memperbarui deskripsi dalam tantangan desain visual saat ini.

Menutup ini karena sudah basi. Jika ada yang ingin melanjutkan percakapan, silakan tinggalkan pesan dan kami dapat membukanya kembali. Terima kasih dan selamat membuat kode semuanya 🎉