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



جدول المحتويات

مقدمة في تطوير الويب

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

كيف يعمل الإنترنت: نظرة عامة بسيطة

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

الغوص في HTML: الهيكل العظمي لموقع الويب الخاص بك

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

إليك مثال بسيط:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

في هذا الكود ،

CSS: إضافة نمط إلى موقع الويب الخاص بك

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

إليك كيفية إضافة بعض الأنماط إلى HTML التي كتبناها سابقًا:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    font-family: Arial, sans-serif;
}

p {
    color: darkslategray;
    font-family: Georgia, serif;
}

يعيّن رمز CSS هذا لون خلفية صفحة الويب إلى اللون الأزرق الفاتح ، ويغير نص العنوان إلى اللون البحري ونص الفقرة إلى الرمادي الداكن ، ويعين خطوطًا مختلفة لكل منهما.

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

قوة HTML الدلالية

HTML الدلالي هو استخدام ترميز HTML لتعزيز دلالات أو معنى المحتوى. على سبيل المثال ، أ تشير العلامة إلى أن النص المرفق عبارة عن فقرة. هذا مهم لسببين رئيسيين:

  1. إمكانية الوصول: تعتمد برامج قراءة الشاشة والتقنيات المساعدة الأخرى على الإشارات الدلالية لمساعدة المستخدمين على التنقل وفهم المحتوى.
  2. (SEO): تعطي محركات البحث الأفضلية لمواقع الويب التي تستخدم لغة HTML الدلالية لأنها تجعل المحتوى أكثر قابلية للفهم بالنسبة لخوارزمياتها.

الغوص في العناصر الدلالية في HTML5

قدم HTML5 مجموعة كاملة من العناصر الدلالية الجديدة لتسهيل الوصول إلى الويب وجعل الكود أسهل في الفهم. دعنا نستكشف بعضًا من هذه:

  1. و : تمثل هذه العناصر رأس وتذييل المستند أو المقطع.
  2. : يستخدم هذا العنصر للجزء من موقع الويب الذي يحتوي على روابط التنقل.
  3. : يمثل هذا العنصر تكوينًا قائمًا بذاته في مستند ، مثل منشور مدونة أو قصة إخبارية أو منشور في المنتدى.
  4. : يمثل هذا العنصر قسمًا مستقلاً من المستند ، والذي لا يحتوي على عنصر دلالي أكثر تحديدًا لتمثيله.
  5. : يُستخدم هذا العنصر للمحتوى المرتبط بشكل غير مباشر بالمحتوى الرئيسي ، مثل الشريط الجانبي أو علامات الاقتباس.
  6. و : تُستخدم هذه العناصر لتمثيل جزء من محتوى تدفق مستقل ، اختياريًا مع تسمية توضيحية.

واجهة برمجة تطبيقات HTML5

لا يتعلق HTML5 بالعناصر والسمات الجديدة فقط. إنها حزمة كاملة تأتي مع واجهات برمجة تطبيقات كاملة لتطبيقات الويب المعقدة. لقد أحدث ثورة في صناعة تطوير الويب بميزاته المتقدمة مثل:

  1. عناصر الوسائط المتعددة: أدخلت HTML5 عناصر الوسائط المتعددة الأصلية مثل و ، و لتجربة وسائط متعددة أكثر ثراءً.
  2. تخزين الويب: باستخدام HTML5 ، يمكن لتطبيقات الويب تخزين البيانات في متصفح المستخدم ، وتحسين الأداء وتجربة المستخدم. ( localStorage ، sessionStorage )
  3. تحديد الموقع الجغرافي: يمكن لـ HTML5 تحديد موقع المستخدم ، مما يتيح الخدمات والتطبيقات المستندة إلى الموقع.

شرح الإنترنت بعبارات بسيطة

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

من جهازك إلى العالم: كيف تنتقل البيانات

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

الخوادم والعملاء: شارع ذو اتجاهين

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

HTTP و HTTPS: لغة الويب

عندما يتواصل جهازك والخوادم ، فإنهم يفعلون ذلك باستخدام بروتوكول يسمى HTTP (بروتوكول نقل النص التشعبي) أو HTTPS (بروتوكول HTTP الآمن). هذا البروتوكول عبارة عن مجموعة من القواعد التي تحدد كيفية تنسيق الطلبات والاستجابات. عندما ترى "http: //" أو "https: //" في بداية عنوان URL ، فهذا يشير إلى أن موقع الويب يستخدم هذا البروتوكول.

عناوين IP و DNS: نظام عناوين الإنترنت

كل جهاز متصل بالإنترنت له عنوان IP فريد يشبه عنوان منزله على الإنترنت. عندما تكتب عنوان URL في متصفحك ، يقوم نظام يسمى DNS (نظام اسم المجال) بترجمة عنوان URL إلى عنوان IP للخادم الذي يحتفظ ببيانات موقع الويب. يشبه استخدام دفتر الهاتف للبحث عن رقم هاتف.

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

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

إنشاء مواقع يمكن الوصول إليها: دليل للوصول إلى الويب

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

فهم ولوجية الويب

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

المبادئ الأربعة لإمكانية الوصول إلى الويب

تحدد إرشادات الوصول إلى محتوى الويب (WCAG) أربعة مبادئ لإمكانية الوصول إلى الويب. غالبًا ما يتم تذكرها بالاختصار POUR:

  1. محسوس : يجب أن يكون المستخدمون قادرين على إدراك المعلومات التي يتم تقديمها. هذا يعني أنه يجب أن يكون المستخدمون قادرين على إدراك المعلومات بأحد حواسهم. على سبيل المثال ، يتيح توفير بدائل نصية للمحتوى غير النصي إمكانية تغييره إلى أشكال أخرى يحتاجها الأشخاص ، مثل الطباعة الكبيرة أو طريقة برايل أو الكلام أو الرموز أو لغة أبسط.
  2. قابلة للتشغيل : يجب أن يكون المستخدمون قادرين على تشغيل الواجهة. هذا يعني أنه يجب أن يكون المستخدمون قادرين على التفاعل مع الموقع ومكونات التنقل الخاصة به. على سبيل المثال ، يجب أن تكون جميع الوظائف متاحة من لوحة المفاتيح لأولئك الذين لا يستطيعون استخدام الماوس.
  3. مفهوم : يجب أن يكون المستخدمون قادرين على فهم المعلومات وتشغيل واجهة المستخدم. هذا يعني أنه يجب أن يكون المستخدمون قادرين على فهم كل من محتوى الموقع وكيفية استخدام واجهة الموقع. على سبيل المثال ، يجب أن يعمل الموقع بطرق يمكن التنبؤ بها ، ويجب تقديم تفسيرات للمفاهيم التي قد يكون من الصعب فهمها.
  4. قوي : يجب أن يكون المستخدمون قادرين على الوصول إلى المحتوى مع تقدم التقنيات. مع تطور التكنولوجيا ، يجب أن يظل الموقع متاحًا. على سبيل المثال ، يجب أن يكون الموقع متوافقًا مع أدوات المستخدم الحالية والمستقبلية.

جعل موقع الويب الخاص بك سهل الوصول إليه

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

  • استخدم عناصر HTML الدلالية مثل و و و و ، و لهيكلة المحتوى الخاص بك. توفر هذه العناصر معلومات حول نوع المحتوى المتضمن فيها ، مما يساعد التقنيات المساعدة على فهم موقعك.
  • توفير نص بديل للصور. يجب أن يصف هذا النص محتوى الصورة. إذا كانت الصورة مزخرفة تمامًا ولا توفر أي معلومات ، فيمكنك استخدام سمة النص البديل الفارغة ( alt = "" ).
  • تأكد من أن موقعك قابل للتنقل بالكامل باستخدام لوحة المفاتيح. يتضمن ذلك توفير حالة تركيز مرئية للعناصر التفاعلية ، والتأكد من إمكانية الوصول إلى جميع العناصر التفاعلية باستخدام مفتاح علامة التبويب ، وتوفير روابط تخطي تتيح للمستخدمين تخطي قوائم التنقل الطويلة.
  • استخدم تباينًا كافيًا للألوان. يجب أن يكون للنص نسبة تباين لا تقل عن 4.5: 1 مقابل خلفيته لضمان أن الأشخاص الذين يعانون من ضعف في الرؤية يمكنهم قراءته.

فيما يلي مثال لكيفية استخدام HTML الدلالية وتقديم نص بديل للصورة:

<!DOCTYPE html>
<html>
<head>
    <title>Accessible Webpage</title>
</head>
<body>
    <header>
        <h1>Welcome to My Accessible Webpage</h1>
    </header>
    <main>
        <article>
            <h2>About Me</h2>
            <p>Hi, I'm Jane Doe, a web developer with a passion for accessibility.</p>
            <img src="jane-doe.jpg" alt="Jane Doe smiling at the camera">
        </article>
    </main>
   <footer>
        <p>© 2023 Jane Doe</p>
    </footer>
</body>
</html>

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

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

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

CSS3 و Flexbox و Layout: الأساسيات

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

CSS3: الأحدث والأفضل

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

فيما يلي مثال على كيفية إنشاء زر بزوايا دائرية وخلفية متدرجة باستخدام CSS3:

.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
    color: white;
    background: linear-gradient(to bottom right, red, orange);
    border-radius: 10px;
    text-align: center;
    transition: background 0.5s;
}

.button:hover {
    background: linear-gradient(to bottom right, orange, red);
}

في هذا الكود ، نستخدم border-radius لإنشاء زوايا مستديرة ، التدرج الخطي لإنشاء خلفية متدرجة ، وخاصية الانتقال لتحريك لون الخلفية عندما يتم تحريك الزر فوقه.

تخطيطات CSS: اللبنات الأساسية

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

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

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

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

التخطيطات: Flexbox

Flexbox ، أو Flexible Box Layout Module ، هي أداة قوية في CSS3 تجعل إنشاء تخطيطات معقدة أمرًا سهلاً. يسمح لك بالتحكم في الاتجاه والمحاذاة والحجم وترتيب العناصر في الحاوية ، حتى عندما يكون حجمها غير معروف أو ديناميكي.

فيما يلي مثال بسيط لكيفية إنشاء شريط تنقل سريع الاستجابة باستخدام flexbox:

.navbar {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #333;
}

.navbar a {
    color: white;
    text-decoration: none;
}

.navbar a:hover {
    color: #ddd;
}

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

فيما يلي مثال أكثر تفصيلاً لتخطيط Flexbox:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 200px;
    margin: 10px;
    background-color: lightgray;
    text-align: center;
    line-height: 200px;
}

في هذا المثال ، .container الحاوية المرنة ، وكل عنصر. يمثل عنصرًا مرنًا. خاصية الاتجاه المرن اتجاه العناصر المرنة. خاصية justify-content بمحاذاة العناصر على طول الخط الأفقي الذي يعمل في الاتجاه الذي يتم فيه تخطيط العناصر المرنة. خاصية align-items بمحاذاة العناصر المرنة عموديًا على طول المحور المتقاطع. خاصية الالتفاف المرن للعناصر بالالتفاف على أسطر متعددة.

الخاصية المرنة في العنصر هي اختصار للنمو المرن ، والتقلص المرن ، والأساس المرن . في هذه الحالة ، فهذا يعني أن كل عنصر سينمو ويتقلص ليلائم الحاوية ، ولكنه لن يكون أصغر من 200 بكسل إن أمكن.

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

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

تحريك الويب: الرسوم المتحركة CSS والتصميم سريع الاستجابة

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

الرسوم المتحركة CSS: إضافة الحياة إلى موقع الويب الخاص بك

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

فيما يلي مثال بسيط على الرسوم المتحركة CSS:

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    animation: spin 2s linear infinite;
}

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

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

تأثير التلاشي

يعد تأثير التلاشي طريقة رائعة لنقل العناصر بسلاسة إلى الصفحة. إليك كيفية إنشاء تأثير التلاشي باستخدام الرسوم المتحركة لـ CSS: 

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.fade-in-element {
    animation: fadeIn 2s;
}

في هذا المثال ، أي عنصر يحتوي على فئة fade-in-element سوف يتلاشى تدريجيًا خلال ثانيتين.

قائمة الشرائح

تعد القوائم المنزلقة ميزة شائعة في العديد من مواقع الويب والتطبيقات. إليك كيفية إنشاء تأثير انزلاق باستخدام رسوم CSS المتحركة: 

@keyframes slideIn {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}

.slide-in-menu {
    animation: slideIn 0.5s forwards;
}

تصميم سريع الاستجابة: مظهر جيد على جميع الأجهزة

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

فيما يلي مثال بسيط للتصميم سريع الاستجابة باستخدام استعلام الوسائط:

.container {
    width: 100%;
    padding: 15px;
}

@media (min-width: 600px) {
    .container {
        width: 600px;
        margin: 0 auto;
    }
}

في هذا المثال ، .container 100٪ وتركيب 15 بكسل على جميع الأجهزة. ومع ذلك ، على الأجهزة التي يبلغ حجمها 600 بكسل أو أكثر ، يبلغ عرض فئة الحاوية

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

يتعلق التصميم المتجاوب بالتأكد من أن موقع الويب الخاص بك يبدو ويعمل بشكل جيد على جميع الأجهزة. فيما يلي بعض نقاط التوقف الشائعة للأجهزة المختلفة: 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

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

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

تطوير الويب السريع باستخدام CSS Frameworks: Bootstrap 4 و 5

مرحبًا بك في عالم أطر CSS! في هذا القسم ، سنستكشف Bootstrap 4 و 5 ، وهما أداتان قويتان يمكنهما تسريع عملية تطوير الويب ومساعدتك في إنشاء مواقع ويب ذات مظهر احترافي بسرعة. لذا ، دعنا نتعمق!

أطر عمل CSS: المسار السريع الخاص بك إلى موقع ويب جميل

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

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

Bootstrap 4 و 5: ما هو الفرق؟

يعد Bootstrap 4 و 5 أحدث إصدارات Bootstrap ، ولكل منهما نقاط قوته الخاصة. بينما يستخدم Bootstrap 4 jQuery ويدعم Internet Explorer 10 و 11 ، يسقط Bootstrap 5 تبعية jQuery ودعم IE لصالح Vanilla JavaScript ودعم المستعرض الحديث.

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

هي المقارنة بطريقة أكثر تفصيلاً:

ميزةالتمهيد 4التمهيد 5
تبعية jQueryنعملا
إعادة كتابة جافا سكريبتلانعم
دعم Internet Explorerنعملا
خصائص CSS المخصصةمحدودموسع
حجم الخط العام16 بكسل16 بكسل
حاويات الشبكةمستجيب افتراضيًامستجيب افتراضيًا
نظام الشبكة12 عمود12 عمود
الطبقاتالاستخدامات "-"الاستخدامات "-"
توثيقجيدمحسّن
Popper.jsالإصدار 1.xالإصدار 2.x
البطاقاتنعمنعم
اعادة التشغيلنعمنعم
شبكة Flexboxنعمنعم
ساسLibsassدارت ساس
أعمدة التخطيط التلقائينعمنعم
الأداة المساعدة APIلانعم
مكون Offcanvasلانعم
مكون الأكورديونلانعم
تحسين Navbarلانعم
زيادة تباين الألوانلانعم
ضوابط النموذج المحدثةلانعم
دعم RTLلانعم
مقارنة بين Bootstrap 4 و Bootstrap 5

إليك أيضًا بعض أطر عمل CSS الشائعة:

  1. الأساس : يُعرف بإطار عمل أكثر تعقيدًا بمكونات CSS المتقدمة ولكن سهلة التنفيذ. إنه مبني على Sass ، وله ميزات قوية سريعة الاستجابة للتصاميم الملائمة للهاتف المحمول.
  2. UIkit : يقدم هذا الإطار العديد من الميزات المشابهة لتلك الموجودة في الأطر الشائعة الأخرى ، مع بعض المكونات المتخصصة المفيدة. إنه متوفر في Less and Sass ويتضمن أيضًا ورقة أنماط لتلبية اللغات التي تُكتب من اليمين إلى اليسار.
  3. واجهة المستخدم الدلالية : يعمل هذا الإطار بناءً على الطبيعة الدلالية لأسماء الفئات المستخدمة في بناء المكونات. أسماء الفئات صديقة للإنسان ، مما يسهل فهم ما يتم بناؤه.
  4. Bulma : تعتمد مكونات Bulma إلى حد كبير على Flexbox ، مما يجعلها إطارًا حديثًا حقًا. يستخدم بعضًا من نفس مبادئ واجهة المستخدم الدلالية مع أسماء الفئات الخاصة بها وتتضمن العديد من المكونات الشائعة.
  5. Tailwind : تم بناء هذا الإطار على مفهوم فئات المرافق أحادية الغرض ، والمعروفة أيضًا باسم Atomic CSS. إنه يتجنب مشكلات الخصوصية ومشاكل التجاوز الأخرى الشائعة في أوراق الأنماط الكبيرة.
  6. Picnic CSS : إذا لم تعجبك فكرة تضمين فئات العروض التقديمية في الترميز الخاص بك ، فقد يكون Picnic CSS هو الإطار المناسب لك. تم تصميم بعض عناصر HTML مسبقًا دون الحاجة إلى إضافة أسماء فئات.
  7. PaperCSS : يحتوي هذا الإطار على مجموعة فريدة من الأنماط المناسبة لمجموعة ضيقة من المشاريع. إنه يحاكي رسومات نظام Nintendo Entertainment System 8 بت ، مما يخلق مظهرًا قديمًا للألعاب.
  8. NES.css : مثل PaperCSS ، يحتوي NES.css على مجموعة فريدة من الأنماط المناسبة لمجموعة ضيقة فقط من المشاريع. إنه يحاكي رسومات نظام Nintendo Entertainment System 8 بت ، مما يخلق مظهرًا قديمًا للألعاب.
  9. Animate.css : تحتوي هذه المكتبة الممتعة على العشرات من الرسوم المتحركة المعدة مسبقًا والتي تهتز وتتلاشى وتنزلق وتصغير / تصغير والمزيد

الشروع في العمل مع Bootstrap

لبدء استخدام Bootstrap ، تحتاج إلى تضمين ملفات Bootstrap CSS و JS في مشروعك. يمكنك تنزيلها من موقع Bootstrap على الويب ، أو تضمينها مباشرة من CDN (شبكة توصيل المحتوى).

إليك كيفية تضمين Bootstrap 5 عبر CDN:

<!DOCTYPE html>
<html>
<head>
    <title>My Bootstrap Website</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <!-- Your content goes here -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

إنشاء تخطيط سريع الاستجابة باستخدام Bootstrap

يوفر Bootstrap نظام شبكة سريع الاستجابة يسمح لك بإنشاء تخطيطات معقدة بسهولة. فيما يلي مثال على كيفية إنشاء تخطيط متجاوب من ثلاثة أعمدة: 

<div class="container">
    <div class="row">
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
    </div>
</div>

في هذا المثال ، الحاوية .container عبارة عن حاوية سريعة الاستجابة ذات عرض ثابت ، ويقوم .row بإنشاء صف جديد ، ويقوم .col-sm تلقائيًا بتحديد حجم الأعمدة للأجهزة الصغيرة وما فوقها. في الأجهزة الصغيرة جدًا ، تتكدس الأعمدة عموديًا.

وهناك لديك! لقد حققت الآن قفزة كبيرة في رحلة تطوير الويب الخاصة بك. لكن تذكر ، هذه فقط البداية. بينما تستمر في الاستكشاف والممارسة ، ستكتشف المزيد من الطرق لإنشاء مواقع ويب مذهلة وسهلة الاستخدام.

في المقالة التالية ، سنتعمق في JavaScript و AJAX و JSON و APIs والمزيد. سوف نتعلم كيفية إضافة التفاعل إلى مواقع الويب الخاصة بك وربطها بالعالم. لذا ، ابق على اتصال واستمر في البرمجة!

https://ahmedradwan.dev

تواصل معنا إذا كنت ترغب في الانضمام إلي وكتابة مقالات مع المهووسين 🙂

ربما يعجبك أيضا