Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Workflow
Webdesign

سرعتك التفاعلية سريعة وسهلة مع Bootstrap 

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by miahood (you can also view the original English article)

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

نحن لا نصنع الصفحات ، نحن نصنع الأفلام 

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

سأوضح لك كيف يمكن أن يحل Bootstrap محل wireframes ثابت ويجلب هذه  التفاصيل إلى الواجهة في وقت سابق وبجهد أقل.


الخطوة 1: إعداد المشروع 

تتمثل الخطوة الأولى في تنزيل أحدث إصدارات Bootstrap و jQuery المستقرة .

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

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

Directory structure for Boostrap wireframes


الخطوة 2: إنشاء index.html والتحقق من المسارات 

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

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

Web browser with Javascript alert box open


الخطوة 3: خردة في كتل المحتوى الخاص بك 

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

الترميز الهيكلي الوحيد على الصفحة حتى الآن هو div مع "حاوية" الفصل. 

ملاحظة: هذا div هو قالب احتواء مطلوب لـ Bootstrap؛ سنبني تطبيق wireframe بالكامل بداخله. 

يتطلب Bootstrap أيضًا نوع HTML الجديد ، وينشئ قواعد نمطه مع الفئات ، بدلاً من أسماء العلامات. تعني هذه القرارات أنه يمكننا استخدام بعض عناصر HTML5 الجديدة: الرأس ، والتنقل ، والقسم ، والمقالة ، والجانب ، والتذييل.  تجدر الإشارة إلى ما إذا كنت تخطط لاختبار تصميمك في Internet Explorer ، فستحتاج إلى تنزيل وتضمين Modernizr أو HTML5 Shim. الإصدارات الحديثة من Firefox و Chrome و Safari تدعم معيار HTML5. 

Bootstrap مبني على شبكة عمود 12. ويستخدم فئتين، الصف و تمتد إلى إنشاء حاويات على مستوى الكتلة. من خلال تطبيق فئة الصف على حاوية مثل div أو header ، فإنها تمتد تلقائيًا عبر العرض الكامل 940px.  بإضافة حاويات مع الطبقة تمتد N ( N كونه نائبا لعدد من الأعمدة)، يمكنك بسهولة إنشاء الآبار المحتوى، الجانبية، وكتل تخطيط أخرى دون الحاجة إلى إدارة يطفو أو انحرافات أخرى. 

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

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

Multiple content blocks properly floated and ordered


الخطوة 4: ثابت ، السوائل ، مستجيبة! 

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

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

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

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


الخطوة 5: الصوت معطلة! 

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

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

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

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

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

يجب أن ينتج تحديث آخر للمتصفح تخطيطًا مشابهًا لهذا ، عند عرض الشاشة العريضة. 

Hero unit and 3 inline images


الخطوة 6: التنقل المبوب 

تضيف وحدة البطل والصور الكثير من الاهتمام البصري ، ولكنها تبرز التحدي التالي: الروابط ذات النقاط النقطية تقف في عنصر ملاحة مناسب. 

يحتوي Bootstrap على العديد من أساليب التنقل المضمنة ، لذلك يتم تشجيع التجريب. سأقوم بتسليط الضوء على التنقل المبوب هنا. أول ترتيب لنا هو استبدال قائمة التنقل الأساسية: 

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

نحتاج أيضًا إلى تحديث المحتوى الرئيسي جيدًا. لقد أضفت فئة من محتوى علامة التبويبإلى عنصر القسم ، ولففت البطل والصور في div مع class = "tab-pane active" و id = "tab1".  أضفت ثلاثة عناصر div إضافية أدناه ، مع مطابقة ID لعلامات ارتباط التنقل. هذه الكتل الثلاث عبارة عن أحواض يتم تعبئتها لاحقًا ، ولكنها ستكون مفيدة للاختبار.  تحديث ترميز القسم وتحديث المتصفح. إذا سار كل شيء بشكل صحيح ، فستتمكن من التبديل بين علامات التبويب وعرض المحتوى الذي تم إيقافه. 

Tab 4 Contact Us selected to show navigation functionality


الخطوة 7: Tooltips و Popovers 

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

ما هي سمات البيانات؟ لكل جون رسق ، الذي كتب عن هذه الأجهزة واضحة في عام 2008: 

ببساطة ، تنص مواصفات سمات البيانات المخصصة على أن أي سمة تبدأ بـ "data-" سيتم التعامل معها كمنطقة تخزين للبيانات الخاصة (خاصة بمعنى أن المستخدم النهائي لا يمكنه رؤيتها - لا يؤثر على التخطيط أو عرض تقديمي). 

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

لنفترض أن معرض الصور الخاص بنا يتكون من معلومات فنية. قد تتضمن الأوصاف مصطلحات غير واضحة للمستخدم العادي.  قم بتنشيط تلميحات الأدوات عن طريق استبدال HTML لمعرض الصور ، بدءًا بالقائمة غير المرتبة ، وإضافة وظيفة $ jQuery (مستند). ready ووظيفة تلميح الأدوات في Bootstrap إلى أسفل الصفحة. 

باستخدام HTML وجافا سكريبت ، قم بتحديث المتصفح وتحريك روابط المعرض لتكشف عن تلميحات الأدوات. 

Basic search typeahead functionality

سنقوم الآن بإضافة المشاركة إلى معرض الصور الخاص بنا (على الأقل في طريقة wireframe-y) مع popovers. يتم تنشيط Popovers من خلال تضمين سمات البيانات في الترميز ومقطوعة أخرى من جافا سكريبت. 

أولاً ، دعنا نضيف زر مشاركة لكل تعليق من صورنا. إضافة كتلة التعليمات البرمجية أسفل علامة الفقرة الختامية في كل figcaption . 

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

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

Basic share functionality shown in a small popover


الخطوة 8: إنشاء Modal Windows 

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

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

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

Hero unit and 3 inline images


الخطوة 9: كيف سأجد أي شيء؟ 

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

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

سنضيف أيضًا بضعة أسطر من CSS إلى ملف user.css ، لدفع مربع البحث إلى أعلى الصفحة. 

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

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

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

حسنًا ، إليك ما تفعله الشفرة. و بحث فار = $ ( '# مدخلات البحث') يقول مسج لتخزين إشارة إلى مربع البحث في متغير اسمه البحث.    ثم نقوم باستدعاء أو استدعاء الدالة jQuery على متغير البحث الخاص بنا ، وكذلك استدعاء طريقة Boottrap typeahead.  داخل قوس الرأس الطباعي ، ستلاحظ قوسًا متعرجًا وإغلاقًا متعرجًا {} . يتم استخدام هذه الأقواس لإنشاء كائن JavaScript ، وتخزين بعض المعلومات حول مربع البحث الخاص بنا. 

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

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

Basic search typeahead functionality


استنتاج 

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

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

آمل أن تكونوا قد أحببت هذا البرنامج التعليمي ، شكرًا للقراءة! 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.