لقد كنت أقوم بتطوير الواجهة الأمامية منذ ما يقرب من 3 سنوات، واليوم أود أن أتحدث إليكم عن بعض تجاربي الشخصية في تطوير الواجهة الأمامية للويب (بالطبع هذا هو فهمي الشخصي. يرجى تضميني وتصحيحي إذا كان هناك). هو أي شيء أقوله غير مناسب أو غير صحيح). هنا اسمحوا لي أن أبدأ بمعايير الويب.
ما هي معايير الويب؟
هاها، يُقال إنه معيار ويب، لكنني هنا ألخص بشكل أساسي بعض تجارب XHTML1.1 وCSS2.1. نظرًا لأن الويب يغطي قدرًا كبيرًا من المحتوى، فإن "معايير الويب" هي الاسم العام لسلسلة من المعايير، بما في ذلك HTML4.0 وXHTML1.1 وCSS2.1 وXML1.0 وRSS2.0 وECMAScript1.1 وDOM1 0 وهكذا. لذا أريد هنا أن أشير إليك أن معيار الويب ليس ما نسميه DIV+CSS.
لقد ذكرنا للتو أعلاه - DIV+CSS، هاها، اسمحوا لي أن أشرح هنا، هذا غير صحيح في الواقع. يجب أن يكون المصطلح الدقيق لـ DIV+CSS (الفهم الشخصي): استخدام XHTML1.1 في معيار الويب الموصى به من قبل W3C مع ورقة أنماط CSS2.0 لإنشاء صفحة DIV يجب أن يشير إلى علامة XHTML، بينما يشير عرض CSS إلى ورقة أنماط CSS.
فوائد التطوير باستخدام معايير الويب
فلماذا يوصي W3C بطريقة إنتاج الصفحة هذه؟ دعونا نلقي نظرة سريعة على مزايا استخدام تطوير معايير الويب (الفهم الشخصي) مقارنة بتخطيط TABLE السابق؟
1. توفير تكاليف التشغيل وتوفير المال!
هاها، هل أنت مهتم بشيء يمكن أن يساعدك في توفير المال؟ بالطبع أنا مهتم جدًا. هل ترى كيف يتم تحقيق طريقة الإنتاج القياسية الخاصة بنا على شبكة الإنترنت؟
باستخدام معايير WEB للإنتاج، يمكننا تحقيق فصل رسمي جدًا للتعبيرات. نستخدم XHTML للتعبير عن (البيانات) وCSS للتحكم في النموذج (عرض عناصر الصفحة). في صفحة مكتوبة بشكل جيد، يحتوي كود XHTML بشكل أساسي على البيانات التي يرغب المستخدمون في رؤيتها، بالإضافة إلى أشياء تزيينية أخرى، يتم التحكم فيها جميعًا بواسطة CSS الخاص بنا. بهذه الطريقة، سيتم تقليل حجم صفحة (XHTML) الخاصة بنا بشكل كبير، وبالتالي سيتم تقليل تكاليف النطاق الترددي الخاص بك. كيف يمكنك تقليل ذلك؟ يمكنك أن تتخيل أن صفحة YAHOO الرئيسية صغيرة الحجم، ويزورها مليون شخص معًا ما مقدار النطاق الترددي الذي تم حفظه؟ ويمكن الاستفادة من عرض النطاق الترددي بشكل كامل.
يتحكم CSS الخاص بنا في أنماط جميع عناصر الصفحة. الآن، إذا كنت تريد تغيير النمط العام لموقع الويب، فأنت تحتاج فقط إلى قضاء بضع دقائق في تعديل ملف CSS، ويمكنك القيام بذلك بسهولة. كما انخفضت تكاليف الصيانة أيضًا، مما يوفر الكثير من المال، أليس كذلك؟ كما ستفتح هذه الصفحة بشكل أسرع بكثير، وهي صفحة تجعلك تنتظر لمدة نصف دقيقة، وما لم تكن المعلومات الموجودة بداخلها مفيدة جدًا لك، فليس لدينا الكثير من الوقت للانتظار.
2. إنه أكثر سهولة في الاستخدام ولديه الفرصة لكسب المزيد من المستخدمين.
الآن دعونا نتحدث عن سهولة الاستخدام. أولاً أريد تصنيف مستخدمينا إلى فئات.
الفئة 1: المستخدمون العاديون (كل من يزور موقعنا)؛
الفئة الثانية: محركات البحث؛
تتمتع الصفحات التي تم تطويرها باستخدام معايير الويب ببنية واضحة وحجم صفحة صغير وتوافق جيد مع المتصفح. عندما يصل إليها المستخدمون العاديون، تفتح الصفحة بسرعة، وبغض النظر عن المتصفح الذي يستخدمه المستخدم، يمكنهم الوصول إلى (عرض) الصفحة بشكل طبيعي، وتكون بنية الصفحة واضحة، ويمكن تصفح البيانات التي يبحثون عنها بسهولة.
بالنسبة لمحركات البحث، تم تحسين الصفحة الجيدة التي تم تطويرها باستخدام معايير الويب من خلال تحسين محركات البحث (SEO)، ومن السهل جدًا زيارتها ومن السهل فهم مكان وجود العنوان (علامات H1~H6) في صفحتك وأين يوجد العنوان (ص (علامة)، حيث يتم التركيز على المحتوى في الفقرة (علامة قوية)، وما إلى ذلك، ويمكن تحليله بسهولة. كما نعلم جميعًا، يتمتع الموقع الذي يتمتع بميزة تحسين محركات البحث (SEO) الجيدة بفرص أكبر لفهرسته بواسطة محركات البحث، وهذا يعني أيضًا أن عدد أكبر من المستخدمين العاديين سيزور موقع الويب الخاص بك، مما يجلب المزيد من المستخدمين إلى موقعك.
يمكن للمرء أن يساعدنا في توفير الكثير من المال وتحسين كفاءة العمل. وفي الوقت نفسه، يمكنه تحسين سرعة تصفح الصفحة، وأن يكون سهل الاستخدام، ويمكنه أيضًا أن يجلب لك المزيد من المستخدمين دون إنفاق الأموال على الدعاية. هل تعتقد أنك سوف تستخدمه؟ هاها، وهذا أيضًا هو السبب وراء توصية W3C لدينا باستخدام معايير WEB لمواقع الويب المفتوحة. لقد تم التعرف على هذه التقنية أيضًا من قبل مستخدمينا، لذا فأنت بحاجة الآن إلى تعلم معايير الويب. ^-^!
هههه لقد انتهيت من مراجعة الدورات الأساسية والآن بدأت أتحدث رسميًا عن مهارات XHTML وCSS.
تخطيط معقول
سيبدأ بعض الأصدقاء في التساؤل، لماذا نبدأ الحديث عن التخطيط المعقول من البداية هاها، لقد ذكرنا بعض نقاط المعرفة سابقًا - "البنية الواضحة، وتحسين محركات البحث، وحجم الصفحة الصغير، ورمز XHTML يحتوي بشكل أساسي على جميع متطلبات المستخدم، انظر إلى" البيانات". هذه الأشياء هي نتيجة تخطيطنا المعقول. وأنا شخصيا أشعر أن كل ما ننتجه باستخدام معايير WEB يبدأ من نقطة المعرفة هذه، لذلك سأتحدث عن هذا الموضوع أولا.
ثم سيبدأ الجميع في التساؤل، ما نوع الصفحة التي تعتبر تخطيطًا معقولًا؟ حسنًا، هذا سؤال جيد، وهو أيضًا أحد الأسئلة الأكثر شيوعًا عندما نبدأ في تعلم استخدام معايير WEB، وغالبًا ما أزعجني هذا السؤال. هنا سأتحدث عن بعض فهمي للتخطيط المعقول .
قبل أن نبدأ بالحديث عن العناصر التي يجب أن تحققها الصفحة المصممة بشكل صحيح، سيكون من البديهي بالنسبة لنا استخدام مثال لشرح ذلك. دعونا نلقي نظرة على هذه الصورة أولا:
http://www.yaohaixiao.com/samples/myblog/index.htm
نعم، هذه صفحة تفاصيل المقالة، ولا يوجد تخطيط للعمود الأيمن والأيسر، ولكن ما أريد التركيز عليه هنا هو التخطيط المعقول وسأقدم العناصر العائمة بالتفصيل في مقالة لاحقة. حسنًا، لنعد إلى الموضوع الآن، لقد شاهد الجميع هذه الصفحة.