Freecodecamp: [تجريبي] يعطي التصميم المرئي التطبيقي فكرة سيئة عن الدلالات

@ Facundo-Corradini أنت على حق - شكرًا على الإبلاغ عن هذا. هل ستكون مرتاحًا لإصلاح هذا؟ إذا كانت الإجابة بنعم ، فيرجى التوجه إلى إرشادات المساهمة الخاصة بنا. يمكنك إعادة تسمية العنوان إلى Applied Visual Design: Use the em Tag to Emphasize Text .

أود المساعدة في هذه المشكلة إذا لزم الأمر

manuhdez هذا رائع. يرجى التوجه إلى إرشادات المساهمة الخاصة بنا.
raisedadead ، systimotic هل يجب أن نطبق هذا؟

مرحبًا @ Facundo-Corradini شكرًا لإثارة القلق وأخذ الوقت الكافي لمراجعة التحدي.

هل يمكنك مساعدتنا ببعض التغييرات المقترحة التي ينبغي إجراؤها على الكلام الذي يساعد في توضيح أهمية هذا الاختلاف؟

أوافق على أن الإسهاب الحالي قد يطرح مفهومًا غير صحيح في التعلم.

شيء أكيد. اسمح لي بالعمل على اقتراح ، ثم سأقوم بتحميله وإذا وافقت ، يمكنني العمل في التغييرات.

الأمر ليس بهذه البساطة ، لأن القسم يتعامل بالفعل مع التصميم المرئي ، وليس الدلالات. لذا ربما يجب علينا فقط تسمية القسم "نص مائل" وشرح حالة الاستخدام لكل علامة

يا هناك @ Facundo-Corradini! كيف الحال أو كيف تسير الأمور؟

مرحبا شباب،

كنت أفكر في كيفية السير مع هذا والعمل من خلال المناهج الدراسية لمعرفة المكان المناسب لها بشكل أفضل. لكن لا توجد طريقة سهلة للخروج من هذا. أي علامة نختارها ستترك حالات استخدام للآخرين ، ومحاولة الضغط على الحالات المختلفة لكل نمط في تحدٍ واحد ستشعر بالضيق. يتعامل القسم مع التصميم المرئي التطبيقي على أي حال ، وليس الدلالات.

نظرًا لأن بعض الدلالات الهيكلية مغطاة في قسم إمكانية الوصول ، فربما تكون إضافة بعض الدلالات على مستوى النص هناك طريقة للذهاب. أو ربما كوقت مستقطع لاحقًا في قسم التصميم المرئي المطبق. لكنني لست متأكدًا مما إذا كنا ما زلنا في الوقت المناسب لتغيير المناهج الدراسية (أعتقد أننا لسنا كذلك ، أليس كذلك؟)

لذلك ستكون الخيارات:

0 - اترك التحدي كما هو

1- قم بتغيير العنوان إلى "التأكيد على النص ..." وشرح أن هناك طرق أخرى لجعل النص مائلاً
--- 1.A - سيتم تناولها لاحقًا في قسم الدلالات الافتراضية على مستوى النص
--- 1.B - ما عليك سوى ربط مصدر جيد بدلالات مستوى النص

2- قم بتغيير جميع تحديات التصميم المرئي فيما يتعلق بتصميم النص مثل التسطير والتخطي ووزن الخط والمائل إلى علامة محايدة مثل الامتداد ، وتحويلها إلى تحديات قائمة على CSS ، موضحًا أن هناك علامات مختلفة تطبق النمط بشكل افتراضي ، والذي مرة أخرى
--- 2.A - سيتم تناولها لاحقًا في قسم الدلالات الافتراضية على مستوى النص
--- 2.B - ما عليك سوى ربط مصدر جيد بدلالات مستوى النص

أنا أميل إلى الاعتقاد بأن أفضل حل هو 2A ، مع كون 1A حل وسط جيد حقًا.

لكن كونك واقعيًا ، فمن المحتمل أن يكون 1B هو الطريق. عنوان منطقي ، مع وصف يعالج المشكلة ، ورابط لأفضل المعسكر للغوص فيه ... دون الحاجة إلى تغيير التحديات الفعلية أو المنهج

أفكار؟

@ Facundo-Corradini ، ما مصدره هل تفكر في دلالات مستوى النص؟

raisedadead ،
أعتقد أن التحديات المعنية هي كما يلي:

قم بتعيين حجم الخط لعناصر العناوين المتعددة
قم بتعيين وزن الخط لعناصر العناوين المتعددة
اضبط حجم خط نص الفقرة
اضبط ارتفاع السطر للفقرات

إلى أن نجد حلاً جيدًا ، أعتقد أننا يجب أن نختلف بينهما إلى ما بعد الإصدار التجريبي.
يمكنني إنشاء علاقات عامة وإزالتها من البذور.

يمكنني إنشاء علاقات عامة وإزالتها من البذور.

هل تقصد إزالتها الآن ، إذا كانت الإجابة بنعم. أعتقد أنه من الأفضل تركهم كما هو حتى نتمكن من جمع المزيد من التعليقات.

raisedadead قم بإزالتها في الوقت الحالي وإضافتها بعد

ahmadabdolsaheb آسف بطريقة ما فاتني الإخطارات

لا ترتبط العناصر التي قمت باقتباسها (حجم الخط ، ووزن الخط ، وارتفاع السطر) بالدلالات بشكل مباشر. إلا إذا كنت تفعل شيئًا غريبًا ، مثل جعل جميع النصوص الخاصة بك كعلامات <p> وضبط حجم الخط عند محاولة الإشارة إلى بعضها كرؤوس. لكن هذا التوضيح يتم الاهتمام به تمامًا عند تقديم عنصري <h> و <p> في القسم الأول ، بالإضافة إلى توضيحه بشكل أكبر في _التصميم المرئي المطبق: ضبط حجم الرأس مقابل a علامة الفقرة _:

يجب أن يكون حجم خط علامات الرأس (h1 إلى h6) بشكل عام أكبر من حجم خط علامات الفقرة. هذا يسهل على المستخدم الفهم البصري للتنسيق ومستوى أهمية كل شيء على الصفحة. يمكنك استخدام خاصية حجم الخط لضبط حجم النص في عنصر.

الأقسام التي تم تحديها هي:

- استخدم العلامة القوية لجعل النص غامقًا: عنصر <strong> مخصص للمحتوى الأكثر أهمية (مثل تحذير) ، بينما يُستخدم العنصر <b> للفت الانتباه إلى النص بدون مشيرًا إلى أنه أكثر أهمية. كلاهما جريء بشكل افتراضي ، لكن معناه ليس هو نفسه

- استخدم علامة u لتسطير النص: ربما يكون هذا هو الأكثر تعقيدًا .. نقلاً عن توصية W3C:

يمثل العنصر u نطاقًا من النص مع تعليق توضيحي غير نصي غير مفصل ، على الرغم من أنه تم عرضه بشكل صريح ، مثل تسمية النص باعتباره اسمًا مناسبًا في النص الصيني (علامة الاسم الصينية المناسبة) ، أو تسمية النص بأنه خطأ إملائي. (...] في معظم الحالات ، من المرجح أن يكون عنصر آخر أكثر ملاءمة

بقدر ما أعرف ، في معظم اللغات ، نريد فقط تسطيرًا للرؤوس وما شابه ، ويجب معالجة ذلك من خلال تصميم العلامة <h(x)> . الأخطاء الإملائية هي حالة استخدام أخرى ، لكننا نادرًا ما نكون في سيناريو مثل الكتابة المتعمدة للأخطاء الإملائية وتمييزها ...

- استخدم علامة em لجعل النص مائلًا:
<em> tag للتأكيد ، على سبيل المثال ، إذا كان شخص ما يحب دلالات النص ولكنه ليس خبيرًا (: p) ، يمكنك أن تقول "أنا لست _ هذا _ في دلالات النص". إن التأكيد على كلمة "تلك" يجعل الأمر أكثر وضوحًا ، على الرغم من الاهتمام بها ، فإنها لن تمنعها من استخدام أشياء غير صحيحة بين الحين والآخر.
<em> بشكل مائل افتراضيًا ، لكن لا شيء يمنعنا من إعطاء علامة <em> أيًا كان النمط الذي نريده. عادةً ما أضيف بعض وزن الخط الأكثر جرأة إليه أيضًا.
بنفس الطريقة ، ليس كل نص مائل يهدف إلى التأكيد. فكر في التعاريف أو الكلمات التقنية أو تلك المكتوبة بلغة أجنبية (التعابير اللاتينية عادة). هذه هي السيناريوهات حيث
<i> tag هي الاختيار الصحيح.
أو حتى عناصر <cite> قد تكون الطريقة الصحيحة لعرض نص مائل ، عند الإشارة إلى اسم عمل أو مؤلف ، يتم استخدامه عادةً مع <q> أو <blockquote>

-استخدم del Tag لنص يتوسطه خط :
الغرض من <del> هو المحتوى المحذوف ، على سبيل المثال ، عند وضع علامة على المحتوى المحذوف من إصدار سابق من مستند ، مثل git (hub) يتوسطه خط وخلفية حمراء مقابل غير يتوسطه خط و خلفية خضراء للأجزاء الجديدة / المتغيرة.
الناتج الافتراضي لـ <del> يتوسطه خط ، لكن لا يجب عليك استخدام <del> كل مرة تريد فيها كتابة نص يتوسطه خط.
على سبيل المثال ، قد ترغب في استخدام عنصر <s> بدلاً من ذلك للأشياء التي لم تعد ذات صلة ، على سبيل المثال ، عند وضع علامة على السعر المرجعي العادي على علامة سعر منتج مخفض.
أو اذهب فقط باستخدام <span> وقم بتصميمه على أنه يتوسطه خط إذا لم تنطبق التعريفات المذكورة أعلاه على السبب الخاص بك لتخطي بعض النصوص.

كل هذه الأقسام ، مع ذلك ، ضرورية للتصميم المرئي التطبيقي.

لذا فإن توصيتي لا تحذف أو تؤجل ، ولكن احتفظ بها كما هي وأضف القليل من التوضيح حول الأقسام المخترقة ، وربما تكون مرتبطة بمصدر خارجي على دلالات مستوى النص.

مصدري المفضل للدلالات النصية هو توصية W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
بالإضافة إلى توضيحات MDN حول حالات الاستخدام لكل علامة ، على سبيل المثال
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

قد يكون الأمر تقنيًا بعض الشيء ، لذا يمكنني الاهتمام بالبحث عن المزيد من الخيارات الصديقة للمبتدئين ، أو كتابة واحدة بنفسي في مدونة freeCodeCamp إذا كنت ترغب في :)

أعتقد أن عنوان التحدي واستخدام <em> للخط المائل خاطئ تمامًا ويجب إعادة تسميته إلى:
التصميم المرئي التطبيقي: استخدام نمط الخط المائل لإضفاء الطابع المائل على النص

وتغيير النص من:

للتأكيد على النص ، يمكنك استخدام علامة em. يعرض هذا النص بخط مائل ، حيث يطبق المتصفح CSS الخاص بنمط الخط: italic؛ للعنصر.

إلى

لجعل النص مائلاً ، قم بتطبيق قاعدة css _font-style: italic_ على العنصر الذي تريد إظهاره بنمط مائل.

وبالتالي ، فإن استخدام <em> يمكن أن يكون له مظهر أكثر ملاءمة في قسم الوصول التطبيقي مع التحدي الخاص به.

اشكركم جميعا على ملاحظاتكم. سنبتعد عن المناهج الدراسية القائمة على الموضوع ، ونتطلع إلى الحصول على وصف أفضل للدلالات في المناهج الدراسية القائمة على المشروع القادم.

@ scissorsneedfoodtoo ، الأفكار؟

شكرًا لك @ Facundo-Corradini على التفسيرات التفصيلية التي قدمتها والآخرين على تقييمها. لا يزال العديد من المشاريع قيد التطوير ، وسيتم إصدارها على أساس متجدد بمجرد اختبارها. قد يكون من المفيد إبقاء هذه المشكلة مفتوحة في الوقت الحالي ، في حالة تمكن شخص ما من تحديث الأوصاف في تحديات التصميم المرئي الحالية.

إغلاق هذا على أنه قديم. إذا أراد أي شخص متابعة المحادثة ، فلا تتردد في ترك رسالة ويمكننا إعادة فتح هذا. شكرًا للجميع وسعداء بترميزهم 🎉