ما هو المعنى الفعلي لفصل المحتوى والعرض؟
https://stackoverflow.com/questions/2260391
-
20-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
ما هو المعنى الفعلي لفصل المحتوى والعرض؟
هل يعني ذلك فقط تجنب CSS المضمن؟
هل يعني ذلك أن التصميم يجب أن يكون قابلاً للتلاعب دون تغيير HTML؟
هل يمكننا حقًا إجراء أي تغيير في التصميم من CSS فقط؟
- إذا أردنا تغيير حجم الصور ثم سيتعين علينا الذهاب إلى في كود أتش تي أم أل
- إذا أردنا إضافة فاصل أسطر آخر في الفقرة ، فسنفعل ذلك مرة أخرى يجب أن تذهب إلى في كود HTML
- إذا أردنا إضافة فاصل آخر في مكان ما ثم مرة أخرى سيكون لدينا للذهاب إلى في كود HTML
ما هي علامة X/HTML التي يجب علينا تجنب استخدامها للحفاظ على الفصل بين المحتوى والعرض التقديمي؟
هل الفصل بين المحتوى والعرض التقديمي مفيد أيضًا لمستخدمي إمكانية الوصول/قارئ الشاشة؟...وللمبرمج/المطور/المصمم؟
المحلول
عند تحديد المحتوى والعرض التقديمي، انظر إلى مستند HTML الخاص بك كحاوية بيانات.ثم اسأل نفسك ما يلي حول كل عنصر وسمة:
هل تمثل السمة/العنصر كيانًا ذا معنى في بياناتي؟
على سبيل المثال، هي الكلمات بين<b>العلامة بالخط العريض فقط لأغراض العرض أم أنني أردت التركيز على تلك البيانات؟هل أستخدم السمة/العنصر المناسب لتمثيل الخاصية نوع البيانات التي أريد تمثيلها؟
وبما أنني أريد التركيز على هذا القسم بالذات، فيجب أن أستخدمه<em>(لا يعني مائلًا، بل يعني التأكيد ويمكن جعله غامقًا) أو<strong>اعتمادا على مستوى التركيز المطلوب.هل أستخدم السمة/العنصر لأغراض العرض فقط؟إذا كانت الإجابة بنعم، فهل يمكن إزالة العنصر وتصميم العنصر الأصلي باستخدام CSS؟
في بعض الأحيان، يمكن ببساطة استبدال علامة العرض التقديمي بقواعد CSS على العنصر الأصلي.وفي هذه الحالة، يجب إزالة علامة العرض التقديمي.
بعد أن تسأل نفسك هذه الأسئلة الثلاثة البسيطة، ستتمكن عادة من اتخاذ قرار مستنير.مثال:
الرمز الأصلي:
<label for="name"><b>Name:</b></label>فحص
<b>بطاقة شعار...هل تمثل السمة/العنصر كيانًا ذا معنى في بياناتي؟
لا، العلامة لا تمثل عقدة بيانات.إنه هناك فقط للعرض.هل أستخدم السمة/العنصر المناسب لتمثيل الخاصية نوع البيانات التي أريد تمثيلها؟
<b>يستخدم لعرض العناصر الجريئة.هل أستخدم السمة/العنصر لأغراض العرض فقط؟إذا كانت الإجابة بنعم، فهل يمكن إزالة العنصر وتصميم العنصر الأصلي باستخدام CSS؟
منذ<b>هو العرض وأنا استخدامه للعرض، نعم.ومنذ<b>يؤثر العنصر على كامل<label>, ، يمكن إزالته وتطبيق النمط على<label>.
هدف HTML الدلالي ليس تبسيط التصميم وإعادة التصميم أو تجنب التصميم المضمن، ولكن مساعدة المحلل اللغوي على فهم ما تمثله هذه العلامة المحددة في مستندك. وبهذه الطريقة، يمكن إنشاء التطبيقات (على سبيل المثال:محرك البحث) لتحديد ما يعنيه المحتوى الخاص بك بذكاء وتصنيفه وفقًا لذلك.
لذلك، فمن المنطقي استخدام خاصية CSS content: لإضافة علامات الاقتباس حول النص الموجود في ملف <q> (ليس لها أي قيمة للبيانات الموجودة في مستندك بخلاف هذا العرض التقديمي)، ولكن ليس من المنطقي استخدام نفس خاصية CSS لإضافة رمز © في تذييل الصفحة لأنه يحتوي على قيمة في بياناتك.
الأمر نفسه ينطبق على السمات.باستخدام width و height السمة على <img> العلامة التي تمثل رمزًا بحجم 16x16 لها معنى دلالي حيث أنه من المهم فهم معنى <img> العلامة (يمكن أن يكون للأيقونة تمثيلات مختلفة اعتمادًا على الحجم الذي يتم عرضها به).باستخدام نفس السمات على <img> العلامة التي تمثل صورة مصغرة لصورة أكبر لا تمثل ذلك.
في بعض الأحيان سوف تحتاج إلى إضافة عناصر غير دلالية لتتمكن من تحقيق العرض التقديمي المطلوب، ولكن عادة ما يكون من الممكن تجنب هذه العناصر.
لا توجد عناصر خاطئة.هناك استخدامات خاطئة لعناصر معينة. <b> لا ينبغي أن تستخدم عند إضافة التركيز. <small> ينبغي استخدامه للنص الفرعي القانوني، وليس لتصغير النص (انظر HTML5 - القسم 4.6.4 لماذا) الخ...جميع العناصر لها سيناريو استخدام معين وكلها تمثل البيانات (مطروحًا منها عناصر العرض التقديمي، ولكن لها استخدام في بعض الحالات).لا ينبغي وضع أي عناصر جانبا.
الصفات هي شيء مختلف.معظم السمات ذات طبيعة عرضية.سمات مثل <img border> و <body fgcolor> نادرًا ما يكون لها معنى في البيانات التي تمثلها، لذا يجب عليك عدم استخدامها (إلا في تلك الحالات النادرة).
تعد محركات البحث أمثلة جيدة على أهمية المستندات الدلالية. تنسيقات دقيقة هي مجموعة محددة مسبقًا من العناصر والفئات التي يمكنك استخدامها لتمثيل البيانات التي ستفهمها محركات البحث بطريقة معينة. معلومات سعر المنتج في عمليات بحث Google هو مثال على الدلالات في العمل.
باستخدام القواعد المحددة مسبقًا في مجموعة المعايير لتخزين المعلومات في مستندك، يسمح لبرامج الجهات الخارجية بفهم ما يبدو وكأنه جدار نصي دون استخدام خوارزميات الاستدلال التي قد تكون عرضة للفشل.كما أنه يساعد برامج قراءة الشاشة وتطبيقات إمكانية الوصول الأخرى على فهم السياق الذي يتم تقديم المعلومات فيه بسهولة أكبر.كما أنه يساعد بشكل كبير في إمكانية صيانة العلامات الخاصة بك حيث أن كل شيء مرتبط بتعريف محدد.
نصائح أخرى
أفضل مثال على الأرجح هو حديقة زن CSS.
الهدف من هذا الموقع هو عرض ما هو ممكن من خلال التصميم المعتمد على CSS فقط، مع الفصل الصارم للمحتوى عن التصميم.يتم استخدام أوراق الأنماط التي يساهم بها العديد من مصممي الجرافيك لتغيير العرض المرئي من ملف HTML واحد, ، إنتاج المئات من التصاميم المختلفة.لا يتغير ترميز HTML نفسه أبدًا بين التصميمات المختلفة.
في كل صفحة تصميم، سيكون لديك رابط لعرض ملف CSS الخاص بهذا التصميم.
ما هو المعنى الفعلي لفصل المحتوى والعرض؟
إنها بالأحرى فلسفة تصميم أكثر من كونها ملموسة إلى حد ما.بشكل عام، هذا يعني أنه يجب عليك الحفاظ على دلالات المحتوى، والتفكير في المحتوى الخاص بك باعتباره جزءًا من المعلومات المنظمة.وهذا يعني أيضًا أنه يجب عليك إبقاء جميع التفاصيل الجمالية بعيدًا عن هذه المعلومات المنظمة.
هل يعني ذلك فقط تجنب CSS المضمن؟
كما ذكرنا أعلاه، الأنماط المضمنة لا علاقة لها بدلالات المحتوى الخاص بك ويجب تجنبها بأي ثمن.لكنها ليست كذلك فقط الذي - التي.
هل هذا يعني أنه بعد كتابة html وفقًا للتصميم، ثم إذا أردنا إجراء أي تغيير في التصميم، فيجب أن يكون ذلك باستخدام css فقط، فلا حاجة إلى html
لسوء الحظ، ليس من الممكن دائمًا تحقيق بعض الأهداف الجمالية الملموسة دون تعديل العلامات الأساسية؛يحاول CSS3 معالجة هذه المشكلات بشكل أفضل.
ما هي علامة X/HTML التي يجب علينا تجنب استخدامها للحفاظ على الفصل بين المحتوى والعرض التقديمي؟
ابحث عن العلامات المهملة في مرجع W3C HTML 4.01 / XHTML 1.0
هل الفصل بين المحتوى والعرض التقديمي مفيد أيضًا لمستخدمي إمكانية الوصول/قارئ الشاشة؟
بالتاكيد.تظل المعلومات المنظمة بشكل أفضل قابلة للقراءة بشكل عام حتى إذا عرضت بعض المتصفحات الأنماط بشكل غير صحيح (أو لم تعرضها على الإطلاق).قد يبدو مثل هذا المحتوى أيضًا أكثر ملاءمة على الوسائط المطبوعة (على الرغم من أنه يمكن تطبيق أنماط الطباعة لتحقيق جماليات أفضل - فهي، مرة أخرى، لا علاقة لها بدلالات المحتوى).
هل الفصل بين المحتوى والعرض مفيد أيضًا للمبرمج/المطور/المصمم؟
بالطبع.الفصل بين المحتوى والعرض يأخذ جذوره من فلسفة أكثر عمومية، وهي فصل الاهتمامات.الجميع يستفيد من الانفصال:ليس من الضروري أن يكون مورد المحتوى مصممًا جيدًا، والعكس صحيح.
إن وضع فواصل أسطر في نقاط معينة أمر لا مفر منه، وعادة ما يكون هناك بعض التداخل بين العرض والمحتوى.يجب أن تهدف دائمًا إلى الانفصال المثالي.
خذ الطرف الآخر:صفحة تحتوي على كميات كبيرة من الجداول المستخدمة لأغراض التخطيط فقط.هذا هو النمط المضاد الواضح الذي يجب تجنبه بأي ثمن.يلعب المحتوى دورًا ثانويًا بعد التخطيط هنا؛غالبًا ما لا يكون بالترتيب الصحيح وبالتالي يصعب قراءته آليًا.يعد المحتوى غير القابل للقراءة آليًا أمرًا سيئًا لإمكانية الوصول وسيئًا لتصنيف محرك البحث للصفحة.
من خلال ترميز المحتوى دون الاهتمام بالعرض التقديمي، فإنك أولاً وقبل كل شيء تجعله قابلاً للقراءة آليًا.وستكون أيضًا في وضع يسمح لك بتقديم نفس المحتوى لعملاء مختلفين بتنسيقات مختلفة، على سبيل المثال في إصدار محسّن للجوال.يمكنك أيضًا تغيير العرض التقديمي بسهولة دون الحاجة إلى العبث بملفات HTML، مثل إعادة التصميم بشكل كبير.
من المزايا الأخرى التي تأتي بشكل طبيعي من خلال فصل المحتوى والعرض التقديمي (ملفات HTML - CSS) هو أن لديك عددًا أقل للكتابة وأقل للصيانة، بالإضافة إلى أنه يمكن تطبيق نمط متسق على صفحاتك بسهولة شديدة.قارن بين الآلاف من الأنماط المضمنة مقابل الأنماط المضمنة.تعريف نمط واحد في ملف CSS واحد، والذي يتم تطبيقه "بشكل طبيعي" على جميع العناصر التي لها نفس "المعنى" (الترميز).
من الناحية المثالية، يتكون HTML (X) الخاص بك فقط من علامات دلالية ذات معنى وأنماط CSS الخاصة بك باستخدام هذه العلامات لمحدداتها.في العالم الحقيقي، غالبًا ما تقوم بخلط الفئات والمعرفات في ترميزك الذي لا يضيف أي معنى إضافي، لأنك تحتاج إلى هذه "الخطافات" الإضافية لتصميم كل شيء بالطريقة التي تريدها.ولكن حتى هنا هناك فرق بين class="blue right-aligned" و class="contact-info secondary".حاول دائمًا أن تضيف معنى بالمضمون وليس بالأسلوب.إن تحقيق التوازن بين هذا هو فن بحد ذاته.:)
