30 مفيدة تستجيب لتصميم البرامج التعليمية
لذلك وصلنا إلى نهاية لدينا "أسبوع تصميم الويب المستجيب", ستكون مشاركة الليلة هي آخر سلسلة. سنبذل قصارى جهدنا لمساعدتك في صقل مهاراتك في التعامل مع هذه الرموز للرد على الإرادة عند عرضها على أجهزة مختلفة. وللقيام بذلك ، نحن نعرض 30 دروس تصميم مواقع الويب المستجيبة وجدت على الانترنت. لا يُقصد بهذه القائمة أن تكون قائمة شاملة ولكنها ستجعلك تفهم أساسيات تصميم موقع ويب متكيف يلبي جميع أنواع أحجام الشاشة.
سنبدأ مع دروس تمهيدية في "Breaking the Ice" ، شيء مثل فئة RWD: 101 التي يجب عليك حضورها للحصول على تعليق المفهوم قبل الانتقال إلى تمارين "Start Building".
أخيرًا ، سننتهي بقسم "قم بالمزيد" الذي سنميز البرامج التعليمية التي يتم تشغيلها بالتخطيطات الأفقية ومقاطع الفيديو "المرنة" والقوائم المنسدلة والتنقلات من الألف إلى الياء الأكورديون والصور المصغرة والمشكلة اللاصقة مع الجداول.
لكن اولا…
إليك ملخصًا للبرنامجين التعليميين اللذين عرضهما مؤلفونا في وقت سابق من هذا الأسبوع:
استجابة الموقع الملاحة
بقلم ثوريك فردوس - [عرض البرنامج التعليمي]
فيما يلي برنامج تعليمي لمساعدتك في إجراء التنقل عبر موقع الويب الخاص بك سريع الاستجابة. أحد أهم جوانب موقع الويب هو سهولة التنقل عبر أجزاء مختلفة من الموقع. تعرف على كيفية تحسين هذا باستخدام CSS3 باستخدام هذا البرنامج التعليمي.
استجابة سريعة
بقلم جيك روشيلو - [عرض البرنامج التعليمي]
إذا كنت محترفًا على الويب وكانت السيرة الذاتية عبر الإنترنت جزءًا لا يتجزأ من حياتك المهنية ، فعليك أن تغتنم الفرصة لتحويل تلك السيرة الذاتية إلى استجابة كذلك. اجعل من السهل على أرباب العمل والعملاء العثور عليك على أي جهاز. وأثناء وجودك فيه ، تتضاعف سيرتك الذاتية كمحفظة لما يمكنك القيام به كمطور.
كسر الجليد
الآن أين كنا؟ نعم ، دعنا نبدأ بعض الإجراءات لكسر الجليد!
دليل المبتدئين لتصميم مواقع الويب المستجيبة
بواسطة نيك بيتيت - [عرض البرنامج التعليمي]
يعد هذا البرنامج التعليمي نقطة انطلاق رائعة للمبتدئين لأنه يصف معنى التصميم المستجيب للويب ، وكيفية ظهوره ، وكذلك توضيحات حول شبكات السوائل واستعلامات الوسائط وغيرها. تحقق من الموارد المدرجة في الجزء السفلي من البرنامج التعليمي كذلك.
مقدمة لتصميم مواقع الويب المستجيبة: فيديو
بواسطة نيك بيتيت - [عرض البرنامج التعليمي]
هذا برنامج تعليمي يبلغ طوله 9 دقائق تقريبًا ، وهو يتخطى سطح ما يستهدفه تصميم الويب المتجاوب ، وكيف حدث ، وتأثيره على تصميم موقع ويب وما هي العناصر المشاركة في إنتاج تصميم ويب سريع الاستجابة . إذا كنت تتطلع إلى فهم معنى تصميم الويب المستجيب دون التوجه إلى الترميز أولاً ، فيجب أن تبدأ بهذا الفيديو.
كيفية تحويل أي موقع إلى موقع مستجيب
بقلم روتشستر أوليفيرا - [عرض البرنامج التعليمي]
هذا هو برنامج تعليمي آخر يبدأ من الأساسيات ولكنه يقطع كل شيء شيئًا فشيئًا ، بما في ذلك نظام التشغيل والمتصفحات التي تقوم بتحويل موقع الويب الخاص بك استجابة لها وكذلك العناصر التي تتأثر عند عرض موقع الويب من أجهزة مختلفة. أظهر المؤلف أيضًا بعض الإضافات المفيدة لـ WordPress و jQuery للمساعدة في جعل عملك أسهل بكثير.
تصميم استجابة في 3 خطوات
بواسطة نيك لا - [عرض البرنامج التعليمي]
سيوضح هذا البرنامج التعليمي ، كيف يمكنك إنتاج تصميم ويب سريع الاستجابة به علامات وصفية وبنية HTML واستعلامات الوسائط المهمة. تحتاج إلى بعض المعرفة من CSS لفهمها ...
تصميم للحصول على شبكة الإنترنت استجابة
ماكس لوزوريجا - [عرض البرنامج التعليمي]
إليك مقالة ليست تعليميًا بقدر ما هي دليل لإنشاء تصميم ويب سريع الاستجابة. ومع ذلك ، يخبرك المؤلف حرفيًا بما يجب عمله وما لا يلزمه من تصميم على الويب مستجيب. هناك تفسيرات حول سبب عدم استجابة بعض الميزات بما فيه الكفاية ، وكيفية التعامل مع النسب والوحدات ، والأفضل من ذلك كله ، أنها قصيرة نسبيًا وسهلة الامتصاص.
استجابة تصميم الويب: دليل مرئي
أندرو جورملي - [عرض البرنامج التعليمي]
إذا لم تكن البرامج التعليمية المملوءة بالنصوص خيارات قابلة للتطبيق ، فجرّب هذا الفيديو التعليمي بدلاً من ذلك. لا تزال تقنية إلى حد ما ، لكن إذا كان ذلك يجعلك تشعر بالتحسن ، فلا يتعين عليك القيام بالكثير من القراءة. طوله حوالي 25 دقيقة وصانع الفيديو في الواقع يتم تمريره بسرعة عبر الأجزاء التي يشفّر بها ، ثم يعود لشرح ما تفعله الرموز.
ابدأ البناء
حسنًا ، لنبدأ في بناء بعض التصميمات سريعة الاستجابة ، بدءًا من ...
شبكات السوائل
بواسطة إيثان Marcotte - [عرض البرنامج التعليمي]
قل الشبكة ، وستفكر في "هياكل صلبة" ، أو قل السوائل وتعتقد أنه يمكن أن تتدفق من جانب واحد من الشاشة إلى أسفل أو أعلى أو الجانب عندما تضغط على المتصفح ، ولكن ضع هذين الأمرين معًا قد تعتقد أنك بحاجة إلى إلقاء نظرة على هذا البرنامج التعليمي لتقدير كامل كيف يمكن لشبكات السوائل أن تساعد في جعل تصميمك أكثر استجابة.
صور السوائل
بواسطة إيثان Marcotte - [عرض البرنامج التعليمي]
بحلول نهاية هذا المقال ، يجب أن تعرف من هو إيثان ماركوت. إليك تلميحًا: إنه الشخص الذي توصل إلى مفهوم ومصطلح التصميمات التي تستجيب للويب. سيظهر اسمه إلى حد كبير في كل برنامج تعليمي آخر في هذه القائمة ، فلماذا لا تأخذ النصيحة بشأن الصور السائلة مباشرة من المعلم نفسه?.
أنماط التنقل القابلة للتحجيم في تصميم مواقع الويب المستجيبة
مايكل ميسكر - [عرض البرنامج التعليمي]
يتحدث هذا البرنامج التعليمي عن الدروس التي تعلّمها المؤلف من العمل في مشروع تصميم ويب سريع الاستجابة. اقرأ "تجول" حول كيفية إنشاء قوالب يسهل تكوينها للحصول على نتائج سهلة الاستخدام وسريعة الاستجابة. إنها نظرة رائعة وراء الكواليس في فهم كيفية تصميم واجهات بأفضل طريقة لعرض سطح المكتب والجهاز اللوحي وطرق عرض المحمول.
استجابة تصميم الويب مع CSS3 استفسارات وسائل الإعلام
بواسطة نيك لا - [عرض البرنامج التعليمي]
وبرنامج تعليمي آخر ممتاز لتجعلك تتعلم كيفية تصميم قالب موقع ويب متجاوب عبر المستعرض باستخدام HTML5 و CSS3. إنه نهج تدريجي ، وهناك عروض تجريبية لتصميم الويب قبل وبعد تنفيذ استعلامات الوسائط لتقدير تأثير استعلامات الوسائط بشكل أفضل.
تأثيرات CSS: صور الفضاء خارج لمطابقة ارتفاع النص
بقلم زوي ميكلي جيلينووتر - [عرض البرنامج التعليمي]
هذا البرنامج التعليمي يجعلك تتعلم خدعة جعل الصور ذات العرض الثابت تغير حجمها وتباعدها لكي تصطف مع النص المصاحب ، بغض النظر عن كيفية تغيير حجم نافذة المتصفح.
تخطيطات التكيف مع استفسارات وسائل الإعلام
بقلم آرون غوستافسون - [عرض البرنامج التعليمي]
تعرّف على كيفية استخدام التنسيقات التكييفية أو المرنة مع استعلامات وسائط CSS. ما عليك سوى اتباع التمرين لتعلم تكييف التصميم الخاص بك مع طريقة العرض ذات العمود المزدوج أو طريقة عرض العمود الواحد بالإضافة إلى إعداد التصميم لجهاز iPhone و iPad.
الصور المستجيبة: تجربة تحجيم الصورة المدركة للسياق
سكوت جيل - [عرض البرنامج التعليمي]
إليك برنامج تعليمي يستخدم منهج الإنشاء من الجوال أولاً. تحدد هذه التقنية حجمًا أكبر للصور لاستخدامها في دقة الشاشة الأكبر ، ناقص طلبات الصور بالإضافة إلى استنشاق UA.
افعل اكثر
فيديو مرن
بواسطة نيك لا - [عرض البرنامج التعليمي]
يتناول هذا البرنامج التعليمي تحجيم مقاطع الفيديو عند تغيير حجم نافذة المتصفح. إنها خدعة CSS بشكل أساسي وهناك عرض توضيحي لرؤية الخدعة في العمل في البرنامج التعليمي نفسه.
إخفاء وكشف أجزاء من الصور
بقلم زوي ميكلي جيلينووتر - [عرض البرنامج التعليمي]
البرنامج التعليمي مأخوذ بالفعل من كتاب المؤلف ، الذي يصف كيفية كشف أو إخفاء أجزاء من الصور حسب دقة الشاشة. يعلمك كيفية اقتصاص الصور ديناميكيًا عندما يتغير حجم الشاشة ، ويعرض لك جزءًا فقط من الصورة الكاملة عندما تكون هناك مساحة محدودة.
استجابة المحتوى المستكشف مع CSS3
ماري لو - [عرض البرنامج التعليمي]
تفضل طريقة مربي الحيوانات للمستخدمين للتنقل حولك؟ بعد ذلك ، يجب أن تقرأ من خلال هذا البرنامج التعليمي لمعرفة كيفية الترميز في بعض التحولات الرائعة: التلاشي ، والشرائح ، والتناوب ، والتوسع. التحولات عبارة عن طبقات محتوى تم عرضها أو إخفاؤها بترميز محدد.
إنشاء قالب تصميم الويب استجابة
بواسطة هاري اتكينز - [عرض البرنامج التعليمي]
هذا هو برنامج تعليمي قصير لإنتاج استجابة قالب الويب يعمل على حد سواء على سطح المكتب وكذلك على iPhone.
استجابة أفقي تخطيط
ماري لو - [عرض البرنامج التعليمي]
يعلمك هذا البرنامج التعليمي كيفية إنشاء تخطيط أفقي مع العديد من لوحات المحتوى القابلة للتمرير. عن طريق أصل الأنواع كنص عينة ، يتم فصل كل فصل من فصول الكتاب في أعمدة موضوعة بجانب بعضها البعض في وضع المستعرض الكامل ، لكن عندما يتقلص الحجم إلى صغير بدرجة كافية ، يتغير التخطيط إلى "كتاب" للتمرير الرأسي بالكامل.
تحويل القائمة إلى قائمة منسدلة للشاشات الصغيرة
بقلم كريس كويير - [عرض البرنامج التعليمي]
يوضح لك هذا البرنامج التعليمي كيفية تحويل قائمة إلى قائمة منسدلة عندما تكون نافذة المتصفح ضيقة ، أو عندما تكون على جهاز محمول. يتم تحويل صف الروابط في الركن الأيمن العلوي من الصفحة إلى قائمة منسدلة لتوفير مساحة دون التضحية بخيارات التنقل.
مرن الانزلاق إلى أعلى الأكورديون
ماري لو - [عرض البرنامج التعليمي]
تعرف على كيفية إنشاء تخطيط بسيط ومرن من الأكورديون ، مع التحولات في التلاشي والعرض القابل للتعديل بناءً على حجم الشاشة ودقة الوضوح.
كيفية استخدام CSS3 Orientation Media Queries
ريان سيدون - [عرض البرنامج التعليمي]
استنادًا إلى القاعدة البسيطة التي تحدد أوضاع عمودي (ارتفاع أكبر من العرض) ووضع أفقي (عرض أكبر من الارتفاع) ، يمكنك كتابة استعلام وسائط لاستهداف أنماط محددة استنادًا إلى الوضع الذي تشاهده عليه. سيوضح لنا هذا البرنامج التعليمي كيفية القيام بذلك ، وهو يأتي كاملاً برابط إلى الحرباء المتغيرة للألوان التي تستخدم اللون لإظهار هذا التغيير أثناء تقليص نافذة المتصفح.
جداول البيانات المستجيبة
بقلم كريس كويير - [عرض البرنامج التعليمي]
تعد الجداول مصدرًا للصداع عندما يتعلق الأمر بأحجام الشاشة الصغيرة ولكن هذا لا يعني أننا بحاجة إلى تجنب الجداول تمامًا. تعرّف على كيفية استخدام استعلامات الوسائط لجعل تنسيقات الجدول الخاص بك يغير تمامًا عند التبديل إلى أحجام شاشة الجوال. شاهد العرض التوضيحي للحصول على فكرة عن السحر الذي يمكنك إجراؤه استنادًا إلى هذا البرنامج التعليمي.
السائل CSS3 عرض الشرائح مع تأثير المنظر
بواسطة الجناح الدائري - [عرض البرنامج التعليمي]
قم بإنشاء عرض شرائح CSS3 حيث يتم استخدام صورتين للخلفية وعندما يتم تغيير مواضع الخلفيات ، يظهر تأثير المنظر. بصرف النظر عن ذلك ، فإن عرض الشرائح مرن ، مع تغيير حجمه عند إغلاق نافذة المتصفح.
كيفية بناء معرض الصور المصغرة المستجيبة
بقلم جوشوا جونسون - [عرض البرنامج التعليمي]
هذا شيء رائع بالنسبة لمواقع الويب التي تعرض صورًا مصغرة في معرض. عند تغيير حجم نافذة المتصفح ، يتم تغيير التصميم ليشغل بين عمودين (أحجام شاشة أصغر) وخمسة أعمدة (كحد أقصى). لمزيد من عروض الشرائح والمنزلات المتشابهة ، راجع مقالة معرض الصور / عرض الشرائح المجانية العشرة الأولى.
تحسين بريدك الإلكتروني للأجهزة المحمولة
بقلم روس هودجكيس - [عرض البرنامج التعليمي]
يمكن تحسين حتى رسائل البريد الإلكتروني للعرض على الشاشة الصغيرة مثل كيف تكون مواقع الويب. يتم تغيير حجم النص في رسالة بريد إلكتروني بتنسيق HTML في معظم الأوقات إلى نقطة لا تُعد للقراءة المريحة ؛ تعلم كيفية إدارة هذا وأكثر من هذا البرنامج التعليمي.
باستخدام الأطر
قم ببناء موقع إلكتروني سهل الاستخدام على الهاتف المحمول باستخدام الهيكل العظمي
بقلم جوشوا جونسون - [عرض البرنامج التعليمي]
الهيكل العظمي هو إطار رائع لبناء مواقع إلكترونية سريعة الاستجابة. يأخذك هذا البرنامج التعليمي في دليل خطوة بخطوة حول كيفية استخدام إطار عمل Skeleton لإنشاء تصميمات سريعة الاستجابة. سوف تشعر بالدهشة لمعرفة مدى سهولة تنفيذها.
استجابة تصميم الويب مع HTML5 وأقل إطار عمل 3
لويس سيمونو - [عرض البرنامج التعليمي]
إذا لم تكن قد تعرفت بشكل صحيح على Less ، فقم أولاً بفحص البرنامج التعليمي Less CSS الخاص بنا أولاً لتتذوق أقل. في هذا البرنامج التعليمي ، تم استخدام إطار أقل للسماح لك برؤية آثار استعلامات الوسائط بوضوح.
استنتاج
وهذا يخلص لدينا استجابة تصميم الويب سلسلة. نأمل أن تكون المواضيع والأدوات والموارد الأخرى الواردة في هذه السلسلة قد ساعدت في كشف مفهوم تصميم الويب المتجاوب لقرائنا. ولكن كيف نعرف إذا كنت لا تخبرنا?
اسمحوا لنا أن نعرف ملاحظاتك على السلسلة وإذا كان لديك اقتراحات لمزيد من الأفكار التي تريد أن ترى في hongkiat.com. ترك لنا خط ، أو تعليق أدناه.
