دروس تخطيط جيدة. التخطيط التكيفي: دروس أم مباشرة في المعركة؟ أين يقع الخط الفاصل بين التخطيط وتصميم الويب والواجهة الأمامية؟

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

في هذه المقالة أقدم خطة تطوير لمصمم التخطيط

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

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

ماذا نتوقع؟

بادئ ذي بدء، من الضروري أن نفهم ما نتوقعه من الشخص على كل مستوى. قد تختلف توقعاتك.
مبتدئ- يعرف العلامات الرئيسية، ويمكنه تصحيح المحتوى على موقع HTML جاهز، ويعرف كيفية تنسيق النص بشكل صحيح، وإدراج عنصر مضمن (فيديو من YouTube، خريطة Yandex) دون أي مشاكل، ويعمل من خلال نظام التحكم في الإصدار لنفسه فقط (ماجستير، مساهم واحد). يمكنه أن يختلق شيئًا بسيطًا من الصفر، ولن ينجح حتى (بالنسبة له شخصيًا). وبشكل عام، فهي ليست وحدة مستقلة وتتطلب قيادة من أعلى.
وسط- وحدة مستقلة إلى حد ما (أو مستقلة تمامًا للمشاريع الصغيرة والمتوسطة الحجم). يمكن تصميم موقع ويب متوسط ​​الحجم بشكل جيد، وسيتم عرضه بشكل صحيح في جميع الإصدارات الحالية من المتصفحات. يفهم كيفية عمل محركات القوالب ويمكنه استخدامها (شريطة توفير بقية التعليمات البرمجية). القدرة على تخطيط وتوثيق عملهم وتقدير المواعيد النهائية. يفهم أهمية الحفاظ على نمط التعليمات البرمجية. يفهم سبب وجود أنظمة الشبكة وأطر عمل CSS. قادر على أخذ جميع المعلومات الضرورية من تخطيطات المصمم. يمكنه التفاعل مع فريق صغير وإنشاء فروع وسحب الطلبات.
كبير- يمكن تصميم نظام البلوك لمشروع كبير. يعرف كيفية تجنب التكرار ومناطق المشكلات عندما يستخدم المطورون الآخرون الكود الخاص به. القدرة على تحليل المشكلات المعقدة وصياغة المهام بكفاءة. يعرف كيفية تطبيق منهجية تطوير واحدة على الأقل (على سبيل المثال، BEM). يمكن جعل المشروع مفتوحا في أسرع وقت ممكن. يفهم جيدًا العديد من محركات القوالب الشائعة. القدرة على كتابة المجمعات وأتمتة العملية المرتبطة بها. يمكنه إجراء مراجعات التعليمات البرمجية والإشراف على مطوري التعليمات البرمجية الآخرين.
دعونا الآن نفكر بشكل أكثر تحديدًا في ما تتضمنه كل كتلة في كل مستوى.

مبتدئ

لغة البرمجة- معرفة العلامات والصفات الأساسية. فهم كيفية كتابتها من حيث المبدأ.
الطباعة- القدرة على تنسيق النص. النص هو أساس أي مشروع تقريبًا. إدراج مسافات غير منقسمة عند الضرورة، مع التمييز بالخط العريض والمائل والاختصار وما إلى ذلك. يمكنك استخدام طابعة أو خدمة مشابهة، ولكن ستتمكن من فهم النتيجة.
دلالات- فهم أن هناك علامات معينة لمهام معينة. تعرف على كيفية اختيار العلامة الصحيحة.
وسائط- ما هي أنواع الوسائط التي يمكن تضمينها في الصفحة.
إطار العمل- تضمين أدوات الطرف الثالث (الفيديو والصوت والخرائط وما إلى ذلك).
فيديو صوتي- يمكنك تأجيل الدراسة، لأنه تم حلها جزئيًا باستخدام iframe. افهم التنسيقات التي يمكن للمتصفح تشغيلها، وكيفية تصميم المشغل، وما إلى ذلك.
الصور- ما هي التنسيقات الرسومية والشكل الذي يراه المتصفح. إيجابيات وسلبيات استخدام تنسيقات معينة.
النقطية- JPG، بابوا نيو غينيا، جيف. افهم الفرق بين التنسيقات وكن قادرًا على تطبيق ما تحتاجه وأينما تريد.
SVG- يمكنك تأجيل الدراسة، لأنه تستخدم في كثير من الأحيان أقل مما نود. فهم الإيجابيات والسلبيات والقيود وما إلى ذلك.
الخطوط- يمكنك تأجيل الدراسة . هذا في الواقع موضوع معقد للغاية، وبشكل عام أنصح المبتدئين باستخدام خطوط النظام. كن قادرًا على تحميل الخطوط وتحسين العرض وتقليل تأخر العرض باستخدام الخطوط المخصصة.
تخطيط الجدول- خياري. بالنسبة لأولئك الذين يرغبون في إنشاء رسائل إخبارية عالية الجودة عبر البريد الإلكتروني في المستقبل.
سي اس اس 1- الخطوط والألوان والمحاذاة والأحجام.
سي اس اس 2.1- التحكم في سلوك الكتلة وتحديد المواقع والتصميم الكامل.
محددات- محددات بسيطة للعلامة، والفئة، والعنصر المتداخل. محددات زائفة بسيطة مثل:hover.
تسمية- كيفية تسمية الفصول الدراسية حتى لا تؤذيها بشكل مؤلم.
تخطيط الكتلة- تقسيم الصورة إلى كتل واعية، وتنفيذ الكتل بلغة HTML، وتصميمها باستخدام CSS.
المتصفحات- يمكنك تأجيل الدراسة . ما هي المتصفحات الموجودة، ما هو الفرق بينهما.
ادوات المطورين- يمكنك تأجيل الدراسة . استخدم أدوات المتصفح لفهم مشكلات العرض.
محرري النصوص- ما هي برامج تحرير النصوص المتوفرة للمطورين ولماذا. تم تقديم SublimeText وNotepad++ كأمثلة، لأنها مألوفة بالنسبة لي. تكون قادرًا على تكوين الأشياء الأساسية فيها، مثل المسافة البادئة وفواصل الأسطر وما إلى ذلك.
أنظمة التحكم في الإصدار- أنا شخصياً أعتبر أن القدرة على استخدامها، على الأقل بشكل فردي، أمر مهم للغاية. افهم سبب إنشاء هذه الأنظمة وما هي.
شخص سخيف- فهم بشكل عام مهمة ومبادئ نظام التحكم في الإصدار الأكثر شيوعًا.
جيثب/بيتبوكيت- أن تكون قادرًا على استخدام إحدى المنصات الشائعة لـ git.
الخروج/الالتزام/الدفع/السحب- العمليات الأساسية للاستخدام الشخصي.
خبأ- للتخزين المؤقت للبيانات غير الضرورية حاليًا.
10 أعمال- عمل ما لا يقل عن 10 أعمال بتصميمات مختلفة. يمكنك إجراء الاختبارات، لا يهم. من المهم أن تكون كاملاً ضمن المعرفة الحالية.

وسط

سي اس اس 3- التدرجات، الظلال، الصقل، المرشحات، التحولات.
محددات متقدمة- العناصر التي تتبع العنصر المحدد (+)، المحدد بواسطة العدد (nth-child)، الظل، قبل/بعد، وما إلى ذلك.
الرسوم المتحركة- خياري. الانتقال والرسوم المتحركة. التحولات السلسة، والرسوم المتحركة. فهم القيود والعيوب.
شبكات- سبب وجودها، وكيفية بنائها، وما هي الحلول الجاهزة المتوفرة. على سبيل المثال، يمكنك إلقاء نظرة على شبكة Flexbox أو أي شبكة أخرى تجدها.
الأطر (CSS)- لماذا هناك حاجة إليها، وكيفية استخدامها. يُنصح بتعلم كيفية استخدام بئر واحد على الأقل. مفيد جدًا للنماذج الأولية. يحسن جودة المشروع بشكل كبير في حالة عدم وجود ميزانية للتصميم (ليست فريدة من نوعها، ولكنها قابلة للاستخدام).
معالجات CSS الأولية- يمكنك تأجيل الدراسة . تحسين العمل، كود أكثر جمالا وقابلية للقراءة. المتغيرات والخلطات وما إلى ذلك. يمكنك العمل مع واحد أو أكثر من المعالجات المسبقة الشائعة مثل SASS وLESS وStylus.
تساؤلات الإعلام- يمكنك تأجيل الدراسة . عرض الأنماط المطلوبة حسب الظروف (الجهاز، حجم الشاشة، كثافة البكسل، النسخة المطبوعة، وما إلى ذلك).
نمط الكود- افهم سبب وجود اتفاقيات أسلوبية، وادرس وابدأ في تطبيق أي منها (أوصي به من AirBNB).
جاف/قبلي/صلب- يمكنك تأجيل الدراسة . فهم مبادئ التطوير الهامة التي تبسط بشكل كبير دعم المشروع الإضافي.
OOCSS- خياري. افهم ما هو CSS الموجه للكائنات وما هو الغرض منه. يتم استخدامه بشكل أو بآخر في العديد من المشاريع (وإن كان ذلك دون فهم أن هذا هو الحال). من الناحية المثالية، تعلم كيفية التصميم. يمكن أن تكون رائعة للمشاريع الكبيرة.
توثيق- فهم ماذا وكيف يتم توثيقه. وثيقة. يمكنك تأجيله، ولكن تأكد من دراسة تخفيض السعر في المستقبل.
تخطيط- تعلم تقدير المواعيد النهائية من الصورة وتحديد تسلسل العمل.
تقسيم- يمكنك تأجيل الدراسة . تعلم كيفية تقسيم المهمة إلى مهام فرعية. إنه أصعب مما يبدو :-)
يضع اهداف- يمكنك تأجيل الدراسة . تعلم كيفية وصف المهام بوضوح في النص حتى يتمكن المطورون الآخرون، بما في ذلك ذوي المؤهلات الأقل، من فهم ما يجب القيام به لإكمالها بوضوح.
فليكس بوكس- فهم النموذج والقدرة على تطبيقه بشكل كامل.
تخطيط الرسالة- خياري. بشكل عام، المهارة ليست زائدة عن الحاجة. فهم مميزات أنظمة البريد، والحفاظ على المظهر الجيد وعدم الوقوع في البريد العشوائي (إذا لم يكن بريدًا عشوائيًا).
حشوات متعددة- فهم كيفية استخدام أحدث ميزات التطوير مع الحفاظ على التوافق مع الإصدارات السابقة. فهم إيجابيات وسلبيات هذا النهج.
تخطيط عبر منصة- فهم ما يجب القيام به لجعل المشروع يبدو جيدًا ليس فقط ضمن أنظمة التشغيل Windows وLinux وMac، ولكن أيضًا ضمن SmartTV أو PS.
تخطيط عبر المتصفح- فهم الاختلافات في عرض المتصفح وجعلها تظهر بنفس الطريقة. يساعد موقع CanIUse كثيرًا في هذا الأمر.
تخطيط المحمول- يمكنك تأجيل الدراسة . فهم القيود المفروضة على منصات المحمول. استخدم مساحة محدودة بحكمة.
تحسين- يمكنك تأجيل الدراسة . فهم "سعر" بعض التقنيات. فهم مراحل عرض الموقع للمستخدم. - يمكنك تأجيل الدراسة . التحسينات المتعلقة بالحجم وذاكرة التخزين المؤقت والضغط وتجميع الموارد وما إلى ذلك.
استدعاء- يمكنك تأجيل الدراسة . التحسينات المتعلقة بسرعة عرض ما بعد التحميل.
تحسين محركات البحث- يمكنك تأجيل الدراسة . على الأقل فهم أساسي لكيفية عمل محركات البحث. القدرة على "مساعدة" محرك البحث في معرفة مكان البحث وما هو مهم.
محركات القالب- فهم كيف يمكنك إعادة استخدام التعليمات البرمجية وعناصر المجموعة وصفحات التخطيط. يُنصح بشدة بتعلم العرض من جانب الخادم والعميل. يتضمن هذا أيضًا قوالب بلغة "خالصة" (مثل إدراجات PHP البسيطة). نحن لسنا مهتمين بالعمل "قبل" (تدفق البيانات) لمحرك القالب.
بي أتش بي- يمكنك تأجيل الدراسة . فهم بناء الجملة الأساسي والقدرة على إجراء تعديلات طفيفة تتعلق بتصميم الصفحة.
نظام إدارة المحتوى- يمكنك تأجيل الدراسة . تعرف على ماهية أنظمة إدارة المحتوى (CMS) الموجودة ولماذا تم إنشاؤها. تعلم كيفية كتابة القوالب لواحد على الأقل (أوصي بـ Wordpress).
جافا سكريبت- يمكنك تأجيل الدراسة . تعلم بناء الجملة الأساسي، وافهم كيفية إرفاق معالجات بسيطة وتنفيذ أعمال بسيطة باستخدام DOM.
مسج- يمكنك تأجيل الدراسة . تعلم كيفية توفير الكثير من الوقت لحل المشكلات النموذجية إلى حد ما باستخدام المكونات الإضافية لمكتبة js الأكثر شيوعًا (بعد Vanilla.js، بالطبع).
NodeJS- يمكنك تأجيل الدراسة . تعرف على كيفية تشغيل خادم بسيط وتوزيع البيانات الثابتة والعرض على جانب الخادم. يمكنك استخدام Express أو أي إطار عمل آخر.
حَشد- خياري. تعرف على كيفية تجميع مشروع من مجموعة من ملفات CSS / HTML إلى ما تحتاجه. أنصحك بالتعرف على الأقل على النخر والبلع كممثلين للمعسكرات "المختلفة".
بيئة تطوير متكاملة- خياري. تعرف على سبب الحاجة إلى IDEs وكيفية استخدامها. قم بالتبديل إلى استخدام بعض IDE لتوفير الوقت. هام: إن تعلم بيئة التطوير المتكاملة (IDE) يشبه التعلم الكامل للغة برمجة، وقد لا يكون استثمار الكثير من الوقت فيها أمرًا يستحق العناء. أنا شخصياً أستخدم برامج تحرير النصوص (ولا أقوم بتشغيل IDE إلا للمشاريع الكبيرة جدًا).
المتفرعة- تعلم كيفية إدارة الفروع في git.
دمج- تعلم كيفية دمج الفروع مع حل النزاعات.
جلب/إعادة الأساس- اكتشف الغرض منها، ومتى تستخدمها، وابدأ في استخدامها حسب الحاجة.
محرر الرسوم البيانية- معرفة ما هم ولماذا. كيف تختلف المتجهات عن النقطية؟ من المهم أن تفهم المحرر على الأقل على مستوى "قراءة" التصميم من المصمم. اختر الخط المناسب والحجم واللون وما إلى ذلك. ليس عن طريق البصر، ولكن بالتأكيد. أوصي بالعمل باستخدام بيانات نقطية واحدة على الأقل (في Photoshop) ومتجه واحد (فيجما).
50 عملاً- بحلول نهاية المرحلة، سيكون لديك حوالي 50 عملاً مختلفًا توضح مهارات من المجالات التي تمت دراستها.

كبير

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

خاتمة

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

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

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

من المؤلف:مرحبا اصدقاء! مثل الأشخاص، تمتلك مواقع الويب هيكلًا خاصًا بها، والذي يمكن رؤيته في التعليمات البرمجية الخاصة بها. من غير المرجح أن ينظر المستخدم العادي، "المشي" على الإنترنت، إلى كود HTML. ولكن ليس مصممي التخطيط - فهم مهتمون دائمًا بالنظر إلى أعمال الآخرين. هناك فن لإنشاء تعليمات برمجية أنيقة ومتوازنة وتعمل عبر جميع المتصفحات. سنتحدث معك اليوم عن كيفية فهم ذلك، أو بمعنى آخر، كيفية تعلم تخطيط صفحة الويب بسرعة وفعالية.

أين يبدأ التخطيط؟

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

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

ومع ذلك، تخيل أنك نوع من مصمم التخطيط "2 في 1"، ولسبب ما كان عليك تصميم المخطط بدلاً من المصمم الذي لا يهتم بمشاكلك.

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

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

أدوات لإنشاء تخطيط موقع الويب

أما بالنسبة للأدوات، فإن العديد من مصممي الويب يستخدمون Adobe Photoshop لإنشاء واجهات. مع هذا البرنامج يمكنك أن تفعل أي شيء تريده.

هناك أشخاص يعملون فقط مع الرسومات المتجهة ويستخدمون Adobe Illustrator لإنشاء التخطيطات.
وهناك محرر آخر لم أجربه، ولكن يُشاع أنه بديل جيد لما ورد أعلاه، وهو Sketch، ولكنه يعمل فقط على نظام التشغيل Mac OS.

دعونا نلتقي - HTML

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

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

بدون منطق الخادم هذا، فإن معظم الخدمات عبر الإنترنت التي نستخدمها كل يوم والتي اعتدنا عليها لن تكون ممكنة. أما بالنسبة لـ HTML، فهي لغة بسيطة تمامًا.

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

التحسن - CSS

بمجرد إتقان أساسيات HTML، يمكنك البدء على الفور في تعلم CSS (أوراق الأنماط المتتالية)، والتي تسمح لك بتعيين الخطوط والألوان وموقع كتل مواقع الويب الفردية.

في CSS، يمكنني أن أوصي بفكرة جيدة ستساعدك في بناء مهنة كمصمم تخطيط حتى لو لم تكن لديك معرفة أساسية بتصميم الويب وتخطيطه.

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

هل من الضروري معرفة جميع علامات HTML/CSS وسماتها وخصائصها؟

هناك العديد من العلامات والسمات المختلفة في HTML، والخصائص في CSS التي يمكن أن يكون لها معاني مختلفة. لذلك، يهتم العديد من المبتدئين بالسؤال: من أين نبدأ في تصميم موقع ويب وهل يحتاجون إلى حفظ كل هذه القيم والعلامات والخصائص؟

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

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

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

نحن نبسط عملية التخطيط

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

بمجرد إتقان لغة CSS جيدًا والبدء في إنشاء شيء فريد من نوعه، قد لا يكون لديك ما يكفي من المرونة في هذه اللغة، وسوف ترغب في استخدام نوع ما من معالجات CSS المسبقة. تقوم المعالجات المسبقة بإزالة كافة البيانات المهملة من كود CSS، وتجعلها أكثر نظافة ومنطقية، وتزيد من درجة التجريد بمساعدة المتغيرات و"الحيل" الأخرى. المعالجات الأولية الأكثر شيوعًا هي LESS وSass وStylus.

الأكروبات - جافا سكريبت

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

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

دعونا نلخص ذلك

لذا، كما آمل أن تكون قد فهمت بالفعل، فإن مصمم التخطيط هو مهنة مهمة جدًا وقديمة على الإنترنت، والتي يعتمد عليها:

سرعة تحميل الموقع؛

مدى كفاية عرضه في المتصفحات المختلفة؛

القدرة على التكيف مع شاشات المستخدم المختلفة؛

الامتثال لمعايير HTML ومتطلبات محرك البحث.

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

نراكم مجددًا، زملائي الأعزاء وأولئك الذين بدأوا للتو هذا المسار الصعب والمثير للغاية لتطوير الويب!

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

كما هو الحال في أي مهنة أخرى، يبدأ تعلم تصميم مواقع الويب من الصفر - بالمفاهيم والنظريات الأساسية. سنتحدث عنهم اليوم. على وجه الخصوص، سأفكر في الخدمة المفيدة للغاية "الإنترنت صعب"، والتي أوصي بها بنسبة 100٪ لجميع المبتدئين.

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

شخصيًا، بدأت كتابي بكتب بسيطة (وورقية) حول HTML/CSS، ثم كانت هناك سنوات من التدريب وبمرور الوقت قررت توحيد/تنظيم المعرفة بمساعدة بعض الدورات التدريبية. هناك بالفعل الكثير للاختيار من بينها، على الرغم من أن جميع الخيارات ليست جديرة بالاهتمام في نهاية المطاف. حصلت على تدريب عبر الإنترنت في مجال التخطيط في شركة Netology. إنهم يقومون حاليًا بتجنيد المجموعة التالية.

ميزة الدورات هي أنها يمكن أن توفر اكتساب المعرفة خطوة بخطوة وفعالة من خلال:

• محاضرات إعلامية قام بتجميعها كبار الخبراء ومصممي التخطيط الممارسين؛
• أمثلة واضحة ومصورة بشكل جيد؛
• المهام العملية لتوحيد المواد.

على وجه الخصوص، في Netology، كل شيء يحدث في شكل ندوات عبر الإنترنت مع إمكانية طرح الأسئلة. هناك واجبات منزلية وأطروحة وشهادة إتمام التدريب. باختصار، كل شيء جدي. مثل هذه الميزات الإضافية تجعل الدورات التدريبية عبر الإنترنت أكثر "ربحية"، والتكاليف هي مجرد استثمار في نفسك.

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

الاتصال بالإنترنت أمر صعب - خدمة التعلم بالتخطيط

أخيرًا، دعنا ننتقل إلى مشروع "الإنترنت أمر صعب" - وهو في الواقع أمر رائع جدًا! هذه دورة شاملة وكاملة لإتقان HTML وCSS للمبتدئين الذين لم يحاولوا أبدًا فهم بنية صفحات الويب وتطويرها بالتفصيل. إذا كنت لا تعرف من أين تبدأ تعلم التخطيط، تعال هنا بنسبة 100%.

كل ما تحتاجه للبدء هو الدافع ومعرفة اللغة الإنجليزية. لن تكون هناك مشاكل في المشكلات التنظيمية - فقد وضع المطورون شيئًا مثل "المنهج الدراسي"، والذي يتضمن:

• 14 فصلاً مع التعمق التدريجي للمادة؛
• 284 مثالًا واضحًا للرموز؛
• مخططات ورسوم؛
• ما يقرب من 43 ألف كلمة؛
• التقنيات الحديثة (نعم، هناك أيضًا Flexbox).

مميزات ونصائح الخدمة

تتميز عملية تعلم تخطيط HTML في الاتصال بالإنترنت بالعديد من المزايا مقارنة بالمشاريع المماثلة الأخرى:

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

2. تتضمن عملية التدريب جميع تقنيات التخطيط الحديثة: طباعة الويب، وHTML الدلالي، وإنشاء تصميم سريع الاستجابة ورسوم توضيحية، بالإضافة إلى Flexbox. سوف يساعدون المبتدئين في أن يصبحوا متخصصين مطلوبين، ومحترفين لتحديث معرفتهم؛

3. توضح الأمثلة التوضيحية المفاهيم الأساسية للمادة المقدمة من خلال سيناريوهات محددة. وهذا يعني أن المستخدم ليس مضطرًا إلى قراءة "لوحات" نصية لا نهاية لها. يؤدي هذا النهج دائمًا إلى الملل، مما يؤدي في النهاية إلى التخلي عن الدراسة.

يتبع كل 2-3 فقرات كتابة الكود وعرض كيفية عمله. هذه هي الطريقة التي يحصل بها المتخصص المستقبلي على ممارسته الأولى في برامج تحرير النصوص والتحقق من النتائج في المتصفح؛

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

أقسام للتعلم خطوة بخطوة للتخطيط

كما قلت أعلاه، يتكون "المنهج الدراسي" من 14 كتلة موضوعية. دعونا نلقي نظرة سريعة عليهم:

1. مقدمة. جزء تمهيدي يشرح ماهية HTML وCSS و. ويشرح أيضًا الاختلافات بين أطر العمل واللغات، ويوضح أيضًا كيفية العمل مع محرر النصوص ATOM.
2. صفحات الويب الأساسية. ويوضح الفصل الثاني بنية صفحة الويب الأساسية. يتم عرض بنية HTML - "الهيكل العظمي" للموقع - هنا. سوف يتعلم الزائر سبب الحاجة إلى العلامات، وما هي والغرض من كل منها.
3. الروابط والصور. ومن خلال معرفة أساسيات التصميم، فإن القسم الثالث سيعرّف المستخدم على ترتيب الصور وربط صفحات الويب ببعضها البعض.
4. مرحبا سي اس اس. بعد ذلك يأتي ما يسمى بأوراق الأنماط. يشمل هذا المفهوم كل ما يتعلق بالتصميم: الخط واللون والموقع والشكل وحجم النص.
5. نموذج الصندوق. ويواصل الفصل الخامس من المنهج موضوع التصميم، ويتحدث عن نموذج "الكتلة" للمحتوى. يصبح مصممو التخطيط المستقبلي على دراية بأشياء مثل الهوامش والحدود والهوامش الداخلية والمحتوى.
6. محددات CSS. يتم اتباع المربعات بواسطة محددات - أساس CSS. باستخدام أمثلة التعليمات البرمجية في المحرر، يقوم منشئو الدورة التدريبية بتعليم الاستخدام الصحيح للأنماط.
7. يطفو. ويتوسع الجزء السابع في ما تعلمناه حول إدارة أحجام الكتل والمناطق المحيطة بها. إنه مخصص لمفهوم التدفق على صفحة الويب (Float) ويصف الفروق الدقيقة في العمل مع شبكة الموقع.
8. فليكس بوكس. عند الوصول إلى خط استواء المنهج، أنت مدعو للتعرف على Flexbox. هذه أداة تخطيط حديثة تمنحك التحكم الكامل في محاذاة الكتل واتجاهها وترتيبها وحجمها. بالمناسبة، تحدثت مؤخرًا عن شيء أكثر روعة.
9. تحديد المواقع المتقدمة. بعد ذلك تأتي مواد أكثر تعقيدًا - تحديد المواقع المتقدم وأنواعه الرئيسية: النسبية والمطلقة والثابتة. على الرغم من أنني أتذكر أننا درسنا هذه الميزة في الدورات التدريبية مع Float ومن الواضح قبل Flexbox.
10. الرسم المتجاوب. يشرح القسم العاشر أساسيات ودور التصميم سريع الاستجابة على موقع الويب. الآن لا يمكنك العيش بدونه.
11. صور مستجيبة. الدرس مخصص للصور التكيفية وقياسها وتوجيهها وإنشاء تنسيقات بديلة باستخدام وظائف خاصة.
12. HTML الدلالي. يعود الفصل الثاني عشر إلى المفاهيم الأساسية لـ HTML، ويكشف عنها من وجهة نظر دلالية. هنا يتم تعريف القارئ بالعناصر "المقطعية" والعلامات الجديدة وتطبيقاتها.
13. نماذج. في الفقرة قبل الأخيرة، يُتاح للزائر فرصة دراسة بناء النماذج وعناصرها: القوائم المنسدلة، والقوائم، والحقول النصية، وتصميمها، وإرسال المعلومات عبرها على سبيل المثال.
14. طباعة الويب. يتحدث البرنامج التعليمي الأخير عن طباعة الويب الحديثة على مواقع الويب - مظهر النصوص والعناوين والخطوط وما إلى ذلك. يوجد في مدونتي الأخرى قسم حول طباعة الويب حيث ستجد الكثير من الملاحظات المفيدة حول هذا الموضوع.

هيكل الدروس لتخطيط التدريس

من أجل تقدير وظائف وملاءمة خدمة الإنترنت الصلبة، أقترح النظر في تنفيذ أحد أقسامها الفرعية. لنأخذ الدرس الثاني حول إنشاء صفحات الويب الأساسية.

ما أحبه شخصيا:

• يتم تنظيم جميع المواد حسب العناوين الفرعية. يتم تقديم النص بلغة يسهل الوصول إليها ولا يتطلب معرفة عميقة بالمصطلحات المعقدة. كل شيء قصير ومباشر - في أفضل التقاليد.
• تم توضيح النقاط المهمة والمعقدة بشكل جميل باستخدام الرسوم البيانية.
• لسهولة الفهم والمهارات العملية، يتم توفير أمثلة لكتابة التعليمات البرمجية.
• كل شيء مريح قدر الإمكان: يوجد في الزاوية اليمنى العليا زر للعودة إلى القائمة، ويمكنك التبديل على الفور إلى العنوان الفرعي المطلوب للدرس (التنقل على اليمين) وبعد المحاضرة، يمكنك فتح الفصل التالي. سهولة الاستخدام ممتازة.

الاستنتاجات

كيف يعجبني الإنترنت هو أحد أفضل المواقع حاليًا لتعليم التخطيط من الصفر. تأكد مؤلفو الدورة من أن المبتدئين الذين لم يتعاملوا مطلقًا مع HTML وCSS يمكنهم فهم أساسيات إنشاء صفحات الويب بطريقة بسيطة وسهلة المنال. المعلومات منظمة بشكل جيد للغاية - تدريجيًا عبر 14 قسمًا ستتغلب على المسار من مستخدم مبتدئ إلى مصمم تخطيط ذي خبرة. بالطبع، هذا مستحيل بدون الممارسة وتطبيق المعرفة، ولكن بالنسبة للأساس النظري، فهذه هي المجموعة الأكثر اكتمالاً من المعلومات التي صادفتها على الإطلاق. إذا كنت ترغب في الدراسة مع المعلمين، تحقق من الخيار من Netology، وهو أيضًا جيد جدًا، على الرغم من أنه مدفوع.

إذا كنت تعرف أي خدمات أخرى مثيرة للاهتمام لدراسة تخطيط موقع الويب، فأرسل الروابط في التعليقات.

تخطيط الكتلة

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

لذلك، دعونا نبدأ. على سبيل المثال، أخذت نموذجًا أوليًا بسيطًا، لا يمكن تسميته بالتخطيط، يتم رسم التخطيط العادي بتنسيق psd، ولكن هنا بتنسيق jpg. الشيء الرئيسي بالنسبة لنا هو فهم مبدأ كيفية تخطيط مواقع الويب باستخدام تخطيط الكتلة.للعمل مع تخطيط الكتلة، لا تحتاج إلى معرفة ذلك فقط لغة البرمجة، لكن أيضا المغلق(اوراق النمط المتعاقب). خلال سلسلة المقالات عن تخطيط الموقع، سنقوم فقط بدراسة تلك المجموعة من أنماط CSS، والتي ستساعدك دائمًا في المستقبل على تخطيط أي أطر تخطيط/نماذج بالحجم الطبيعي تقريبًا، لأن المبدأ هو نفسه.

لذلك، هنا هو التخطيط (قابل للنقر).

نرى أنه يحتوي على 4 أجزاء منطقية:

• رأس موقع الويب (سنسميه فيما بعد رأسًا)؛
• العمود الأيسر (سنسميه فيما يلي الشريط الجانبي الأيسر)؛
• العمود الأيمن (سنسميه فيما يلي المحتوى)؛
• التذييل (سنسميه فيما بعد التذييل) ؛

لذا، بالطبع، لنبدأ بكتلة الرأس. يبلغ عرض نموذجنا بالحجم الطبيعي 1000 بكسل (px).

في البداية، سأقول أن التخطيط يتم باستخدام علامات html. على سبيل المثال،