لوحة المتصدرين

يعد ووردبريس رائعًا لإنجاز أمور معيَّنة، مبالغًا فيه بالنسبة لأمور وغير ملائم لأخرى. إذا كنت مطور ويب أو مالك موقع فالسؤال الجيد الذي يجب أن تطرحه على نفسك هو "متى يجب عليّ استخدام ووردبريس؟" . يعد ووردبريس، بوصفه (في أذهاننا) أعظم نظام لإدارة المحتوى في العالم،لإنجاز أمور معيَّنة، مبالغًا فيه بالنسبة لأمور وغير ملائم لأخرى. إنْ لم تعرف كنه كل واحد من تلك الأمور فيمكن أن ينتهي بك المطاف في وضع حرج. بمعنى آخر أنت أمام قرار لاتخاذه، والقرارات تعني شيئًا واحدًا: المخطّطات التدفقية (Flowcharts). يقوم مُخطّطنا التدفقيّ "متى نستخدم ووردبريس" بتحليل تجربتنا، بوصفنا متخصصين في ووردبريس ومطوري مواقع ويب من التصميم إلى الإطلاق والصيانة، لوصف أي نوع من المشاريع يتعين أن يستخدم ووردبريس وأيها يتعين عليه ألا يستخدمه، وما البدائل التي يمكن البحث عنها إذا لم يكن ووردبريس مناسبا. المصطلحات من خلال "ووردبريس" هنا، أقصد تثبيت ووردبريس من WordPress.org. يتوفّر برنامج ووردبريس الأساسي للتنزيل المجاني من WordPress.org؛ يمكنك بعد ذلك استخدام هذا البرنامج لإعداد موقع، وللقيام بذلك ستحتاج: استضافة، الحصول على اسم النطاق، شخص ماهر في ووردبريس لإنشاء الموقع. يمكن أن يقصد بكلمة "ووردبريس" أيضًا موقع WordPress.com الذي يتولى بدلًا منك الخطوات الثلاث المذكورة أعلاه، ولكن مع فقدان كثير من الحرية (في التصميم، اسم نطاق يتبع قواعد معيّنة، وما إلى ذلك). يوجد شبه إلى حد كبيربين WordPress.com وSquarespace وغيرها من منصات التدوين، لذا جمعناها معا. السؤال الحقيقي الذي نجيب عليه هنا هو إذن: "متى يجب علي استخدام WordPress.org؟". المخطط التدفقي إليك المخطط التدفقي لتجد الإجابة على سؤال: هل يجب أن أستعمل ووردبريس أم لا؟: الأمر بسيط، أليس كذلك؟ واصل القراءة إذا كانت لديك أسئلة أو تريد معرفة سبب استنتاجاتنا. متى لا تستخدم ووردبريس لبناء تطبيقات الويب المعقدة سرعان ما يصبح ووردبريس، رغم بعض الأدوات الجاهزة، عائقًا في التطبيقات المبنية على أنواع بيانات فريدة وشديدة الترابط. في ووردبريس يكون كل شيء تقريبًا "منشور". تعدّ "الصفحات" (Pages) و"المنشورات" (Posts، اسم مشوّش) أكثر "أنواع المنشورات" شيوعا. حتى إن الوسائط الإعلامية مثل الصورتُخزَّن فعليًا كـ "منشور" لا يحتوي على أي شيء سوى رابط الوسائط الإعلامية. إلى جانب أنواع المنشورات المُعرَّفة مسبقًا، والمذكورة أعلاه، يمكنك تعريف أنواع منشورات مخصصة جديدة بخاصياتها الخاصة: "الموظفين"، و"المنتجات"، و"الشهادات"، و"قوائم العقارات" وكل مايخطر ببالك. يمكن لكل نوع من المنشورات أن يحوي بيانات وصفية (Metadata) خاصة به ("الاسم" أو "الراتب" لمنشور من النوع "موظف"، "السعر" أو "الوزن" لمنشور من النوع "منتج"، وسر على ذلك النحو)، إلّا أنها في الواقع تُخزَّن وتُعرَض - في كل من قاعدة بيانات ولوحة تحكم ووردبريس - كأي منشور مدوَّنة تقليدي آخر. تجعل الطريقة المذكورة أعلاه ووردبريس خيارًا هشًّا لإنشاء تطبيقات الويب المعقَّدة. بالنظر إلى معظم تطبيقات الويب من وجهة نظر ووردبريس يظهر أنها ليست سوى أنواع منشورات مخصّصة. وبالنظر إلى عدسة الوردبريس فإن معظم تطبيقات الويب ليست سوى أنواع منشورات مخصصة. مثال دعنا نفكر في خدمة حجز عبر الإنترنت للأسفار مثل موقع TripAdvisor (المفضل لدي). ينبغي أن تخزن الخدمة: الرحلات الجوية وأسعارها، ومعلومات شركة النقل، ومعلومات الطائرات، والتوفر حسب التاريخ وحوالي ستين معلومة أخرى. الفنادق وأسعارها، والمواقع، وأوصاف الفنادق، والتوفر حسب التاريخ، وحوالي ستين معلومة أخرى. تأجير السيارات وأسعاره، والمواقع، وأوصاف السيارات، والتوفر حسب التاريخ، وحوالي ستين معلومة أخرى. … وحوالي ستين معلومة أخرى. هل نريد حقًا أن تكون كل وكالة لتأجير السيارات في بورتلاند مع أسطولها من السيارات المتاحة للتأجير، هل نريد أن تكون "منشورًا" من نوع المنشورات المخصّص "وكالة سيارات"، مكدَّسًا مع آلاف البيانات الوصفية وتُخزَّن بالطريقة نفسها التي يخزن بها ووردبريس منشورات المدونة؟ لا، لا نريد ذلك. رغم بعض الأدوات الجاهزة المفيدة (مثل سهولة إدارة المستخدمين، وإمكانية استخدام السمات والملحقات) إلّا أنّ ووردبريس سرعان ما يصبح عائقًا في التطبيقات المبنية على أنواع بيانات فريدة وشديدة الترابط. رأينا! هذا نقاش كبير وهناك الكثير من وجهات النظر حوله ولكن الأصوات التي أجدها أكثر عقلانية تعترف بأنه يجب عليك تغيير طبيعة ووردبريس بما يكفي (أو لنقل "العبث به" إذا كنت تفضّل هذا الوصف) لاستخدامه منصة مجهّزة لتطوير التطبيقات. أود أن أحاجج بأنه في معظم الحالات التي أنشئت فيها حقًّا تطبيقات ووردبريس ناجحة ومعدّة للتوسع، لم يكن الأمر يستحق كل ذلك العناء. لبناء تطبيقات الجوال المعقدة ربما يكون AppPresser هو الحل الأكثر شهرة لإنشاء تطبيقات أصيلة باستخدام ووردبريس. يقوم البرنامج بأمر مذهل وهو تحويل موقع ووردبريس إلى تطبيقات أصيلة لنظامي iOS وأندرويد. مرة أخرى قد يكون ذلك مفيدًا للحلول البسيطة مثل الترويج لموقعك البسيط للتجارة الإلكترونية من خلال متجر التطبيقات على iOS. لكن، إنْ كنت تريد بناء خليفة تطبيق الطيور الغاضبة (Angry Birds)، أو حتى عداد خطوات رياضتك اليومية، فإن البنية الحالية لووردبريس بالإضافة إلى صعوبة ترجمة موقع ووردبريس إلى لغة وبيئة تطبيق فمن المرجح أن يعد الأمر عناءً خالصا. من أجل بناء الأشياء البسيطة جدًا إذا كان هدفك بسيطًا جدًّا، فالزم بنية تحتية في منتهى البساطة. إذا لم تكن من مطوري ووردبريس فستجد أنّ تثبيت موقع WordPress.org مخصّص أكثر صعوبة وتكلفة من إعداد مدونة WordPress.com، أو موقع Squarespace، أو Tumblr، وما إلى ذلك. لذا إذا كان لديك هدف بسيط جدًّا - مثل التدوينات القصيرة ذات الوسائط المختلطة غير المنتظمة - فربما يمكنك استخدام تلك البنى التحتية البسيطة. لدى Tumblr، وإنستاغرام وما شابهها ميزات تواصل اجتماعي جاهزة للاستخدام لا تتوفر عليها مواقع WordPress.org. لا يعد WordPress.org أسهل طريقة لإعداد صفحات الهبوط لاختبار الأفكار الأولية (إلّا إذا كنت مطور ووردبريس)، على الرغم من أنه يعدّ أسهل طريقة لإعداد مواقع اختبار بسيطة وجذابة. متى تستخدم ووردبريس؟ بالنسبة للمواقع التقليدية (التي ليست تطبيقات) فرأينا أن ووردبريس هو الحل المناسب في غالبية الحالات. هل يعني ما سبق أن ووردبريس غير مناسب لمعظم الحالات؟ حسنًا، من الصحيح أن المربعات ذات اللون الأزرق الغامق الأنيق أكثر بكثير في المخطّط التدفقي من تلك التي تظهر باللون الأخضر. صحيح أيضًا أن معظم ما تقوم به على الإنترنت لا يستحق موقع ويب على استضافة مستقلة. إذا كان هدفك هو مجرد نشر صور للهواية فلم لا تستخدم Tumblr أو إنستاغرام؟ ولكن بالنسبة للمواقع التقليدية فإننا نؤكد أن ووردبريس يعدّ الحل الصحيح في معظم الأوقات. دعونا ننظر مرة أخرى إلى المخطّط التدفقي: هل صُمّم موقعك أساسًا لعرض المعلومات؟ معظم مواقع الويب هي كذلك: من قائمة طعام المطعم وساعات افتتاحه، إلى إستراتيجية شركة وشهادات عملائها، إلى أحدث مقالات على مجلة. هل تحتاج إلى موقع ويب مرن وقابل للتوسع، موقع ينمو معك؟ تلك هي حال معظم أصحاب المواقع التقليدية. يريد أصحاب المواقع أن يكونوا قادرين على تحديد عناصر التصميم بدقة، وأن يعملوا باسم نطاق مختلف عن name.service.com، وأن يرقّوا استضافتهم حسب رغبتهم. ويوما ما قد يرغبون في تبديل نظام التعليقات الخاص بهم، أو إضافة متجر إلكتروني، أو تضمين رقعة شطرنج على الموقع… والقائمة تطول. يمثّل الأشخاص الذين أجابوا بنعم على هذين السؤالين معظم من يحتاجون، في المقام الأول، إلى مواقع ويب. هم أشخاص يريدون مشاركة أمر يهتمون به، ويودون السيطرة الكاملة على المشروع وفي الوقت نفسه المرونة لتطويره بسهولة. ينطبق هذا الأمر على أي شخص، من مخبز الحي إلى وكالة ناسا، ويتعين في هذه الحالة استخدام ووردبريس. أيضا التجارة الإلكترونية أضيف ملاحظة أخيرة وهي أنّ حلول ووردبريس الأفضل للتجارة الإلكترونية (ملحق Easy Digital Downloads للمتاجر التي تبيع المنتجات الرقمية حصرًا، وملحق ووكومرس لأي نوع آخر من المنتجات) تعدّ جيدة بما فيه الكفاية لتكون الخيار المبدئي لأي متجر بمبيعات تقل عن مليون دولار سنويا. لماذا تعيين هذا الحد الأعلى؟ ليس المقصود أن يكون صارما (لا يوجد سبب وجيه يمنع ملحق WooCommerce من مساعدتك في بيع اليخوت، خاصة إذا كان لديك بضع عشرات فقط للبيع). استخدمت للتو "المبيعات" مجازًا للدلالة على التوسع، والحجم* والتعقيد. مع نمو تلك العناصر ستبدأ في النظر إلى بنية ووردبريس على أنها عائق أمامك. تخيل لو أن كل منتج من منتجات أمازون - يبيعه العشرات من البائعين، عليه مئات المراجعات، ولديه معلومات بالغة التعقيد للتوصيل حول العالم، ولديه معاينات صور وغيرها - تخيّل أنه عبارة عن منشور ووردبريس مثقل بالبيانات الوصفية ينتمي لنوع مخصص من المنشورات اسمه "منتج" ضمن بيئة ووردبريس/ووكومرس الأكبر في العالم. هذا سيجعل الأمور سيئة. التواضع أود توضيح شيئين إلى جانب المخطّط التدفقي: هذا رأيي. أود أن أسمع آراء أخرى! أنا متأكد بما يكفي لأرى أن معظم ما سبق صحيح، حسب استيعابي لمتى يمكنني استخدام ووردبريس في مشاريع الويب. للتعرّف على وجهات نظر أخرى من أشخاص متميّزين بمعرفتهم بالموضوع أنصح بمراجعة ما يلي: هذا المنشور على Stack Exchange . هذه المقالة المنحازة ضد ووردبريس كمنصة لتطوير التطبيقات. هذه المقالة التي تدافع عن ووردبريس يوصفه منصة لتطوير التطبيقات. عرض الشرائح الذي يقدّم رؤية دقيقة عن ووردبريس يوصفه منصة لتطوير التطبيقات. إذا كان لديك رأي بما عرضناه أعلاه فيمكنك كتابته في التعليقات. شكرا للقراءة تعد المخطّطات التدفقية طريقة رائعة لتبسيط الأمور، ولاختزالها أيضا. نأمل على الرغم من ذلك أن تكون مخطّطاتنا قد أتاحت لك فهمًا جيدًا عن متى تستخدام ووردبريس ومتى تفكر في البحث عن بديل. متى تستخدم ووردبريس ومتى تتجنبه؟ نودّ أن نسمع أفكارك وأسئلتك في التعليقات أدناه! ترجمة - وبتصرّف - للمقال When to Use WordPress: The Flowchart لصاحبه.

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح بعض طرق تغيير طريقة رصف العناصر في المستند، ونتدرّب على ذلك. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. (هذا الدرس) الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. رصف العناصر (Layout) بالإمكان استخدام CSS لتحديد التأثيرات المرئية المتنوعة الّتي قد تؤثر على ارتصاف العناصر في المستند، بعض هذه التقنيّات متقدّمة المستوى، وهي خارجة عن موضوع هذه السّلسلة. عندما ترغب برصف العناصر في المستند بطريقة متشابهة في جميع المتصفّحات، فإنّ ورقة الأنماط تتفاعل بطرقٍ قد تكون شديدة التّعقيد مع الأنماط المبدئيّة في المتصفّح ومحرّك رصف العناصر، وهذا أيضًا موضوع متقدّم لن نتطرّق له. سنقصر اهتمامنا على تقنيّات بسيطة يمكنك البدء بها. هيكل المستند إن أردت التحكّم بتخطيط المستند، فقد تحتاج إلى تغيير هيكله. ربّما تحوي لغة الرّماز الّتي تستخدمها وسومًا عامّة الأغراض تساعد في الوصول إلى بنية معيّنة، وفي HTML يمكن اللّجوء إلى الوسم <div> لهذا الغرض. مثال في مستندك الّذي تتدرّب عليه، لم يكن للفقرات المُرقّمة تحت العنوان الثّاني عنصر مستقلّ يحويها، ولذلك لم يكن بالإمكان إحاطتها بحدود مستقلّة، فلا يوجد عنصر يمكن استهدافه بمحدّد يحقّق هذه النّتيجة. ولحلّ هذه المشكلة، يمكن إضافة وسم <div> يحيط بالفقرات جميعها، ويكون هذا الوسم فريدًا بمعرّف id: <h3>Numbered paragraphs</h3> <div id="numbered"> <p>Lorem ipsum</p> <p>Dolor sit</p> <p>Amet consectetuer</p> <p>Magna aliquam</p> <p>Autem veleum</p> </div> يمكن الآن كتابة قاعدة تخلق حدودًا حول الفقرات والقائمة: ul, #numbered { border: 1em solid #69b; padding-right:1em; } هكذا تبدو النّتيجة: وحدات القياس استخدمنا وحدة البكسل (px) للقياسات في الدّروس السّابقة، وهي ملائمة لبعض الأغراض كشاشات العرض، ولكنّها قد تعطي نتيجة غير مرغوبة عندما يُغيّر المستخدم الخطّ في المتصفح. قد يكون من الأنسب في حالات عديدة استخدام وحدة مبنيّة على النّسب المئويّة أو em (قياس الخطّ الحالي، أو عرض حرف m في هذا الخطّ بصورة أدقّ)، عندما يغيّر المستخدم حجم الخط، فإنّ تخطيط الصّفحة يتغيّر تلقائيًّا. مثال الحدّ على الجانب الأيسر لهذا النّصّ مُعيّن بالبكسل. الخدّ على الجانب الأيمن مُعيّن بوحدة em. غيّر حجم الخطّ في المتصفّح لديك وشاهد كيف يتغيّر الحدّ الأيمن بينما يبقى الأيسر كما هو: كبّرني! تفاصيل أكثر هناك وحدات أخرى مناسبة للأجهزة المختلفة، سنطّلع على معلومات أكثر في الدّروس القادمة. رصف النصوص هناك خاصّيتان تؤثّران في كيفيّة رصف المحتوى النّصّيّ للعناصر: ‏text-align: ترصف محتوى العنصر، وتقبل إحدى القيم التّالية: left, right, center, justify. ‏text-indent: تدفع السّطر الأوّل من الفقرة بالمقدار المُحدّد. هذه الخواصّ تنطبق على أي محتوى مشابه للنّصوص في العناصر، وليس على النّصوص فقط. تذكّر أنّ القيم المُسندة لهذه الخواص يرثها الأبناء، ولذا قد تحتاج إلى إزالتها من الأبناء لتجنّب نتيجة غير مرغوبة. مثال رصف العناوين في المنتصف: h3 { border-top: 1px solid gray; text-align: center; } وهذه هي النّتيجة: لاحظ أنّ المحتوى المصنّف تحت عنوان ما في HTML لا يقع ضمن العنوان ذاته في بنية المستند، ممّا يعني أن تنصيف العناوين لن يؤدّي إلى تنصيف الفقرات المُدرجة تحت هذه العناوين بشكل مبدئيّ، لأنّها لا ترثها. طفو العناصر (Float) تجبر الخاصّة float العنصر على أن "يطفوَ" إلى اليمين أو إلى اليسار، وهذه طريقة بسيطة للتحكّم بالموضع والحجم. تنساب بقيّة المحتويات في المستند بصورة طبيعيّة حول العنصر الطافي، ويمكن التّحكّم بهذا الانسياب الخاصّة clear على العناصر الأخرى لإبعادها عن العناصر الطّافية. مثال في المستند الّذي تتدرّب عليه، تمتدّ القوائم على كامل عرض النّافذة (وإن كانت نصوص العناصر أقصر من عرضها)، يمكن منع ذلك بجعلها تطفو إلى اليسار. لإبقاء العناوين في مواضعها، يجب أيضًا تحديد الخاصّة clear عليها: ul, #numbered {float: left;} h3 {clear: left;} لتبدو النّتيجة هكذا: (يتطلّب الأمر بعض الحشوة على يمين الصّناديق، لأنّهما الحدود قريبة جدًّا من النّصّ) تحديد مواضع العناصر (Positioning) يمكن تعيين موضع العنصر بإحدى أربع طرق باستخدام الخاصّة position وقيمة من القيم التّالية (تعتبر هذه القيم متقدّمة المستوى، يمكن استخدامها بأساليب بسيطة نسبيًّا، ولهذا أوردناها هنا، ولكنّ استخدامها بطرق معقّدة أمر يتطلّب شيئًا من الخبرة): ‏relative: يُزاح العنصر إلى موضع جديدٍ بالنّسبة لموضع الطّبيعيّ، أي يمكن استخدام هذه الخاصّة لإزاحة العنصر بمقدار معيّن، ويمكن أيضًا استخدام حوافّ العنصر لتحقيق نتيجة مشابهة. ‏fixed: موضع العنصر ثابت، أي بالنّسبة لنافذة المستند، فحتّى عندما يمرّر المستخدم الصّفحة إلى أسفل أو إلى أعلى، يبقى العنصر ثابتًا بالنّسبة للنافذة. ‏absolute: موضع العنصر ثابت بالنسبة لعنصر أبٍ، يُشترط أن يكون العنصر الأب ذا موضع relative أو fixed أو absolute، ويمكن جعل موضع الأب relative بمقدار إزاحة مساوٍ للصفر إذا أردنا استخدام هذه الخاصّة على الابن دون إزاحة الأب. ‏static: القيمة المبدئيّة، استخدمها عند الحاجة للنصّ صراحة على تصفير الموضع. بعد تعيين هذه الخاصّة، استخدم إحدى الخواص التّالية لتعيين إزاحة العنصر (وحجمه): top و right و bottom و left و width و height. مثال لتعيين موضع عنصرين أحدهما فوق الآخر، أنشئ عنصرًا يحويهما في المستند: <div id="parent-div"> <p id="forward">/</p> <p id="back">\</p> </div> ثمّ اجعل موضع الأب relative دون إزاحة، واجعل الابنين absolute: #parent-div { position: relative; font: bold 200% sans-serif; } #forward, #back { position: absolute; margin:0px; /* no margin around the elements */ top: 0px; /* distance from top */ left: 0px; /* distance from left */ } #forward { color: blue; } #back { color: red; } هكذا تبدو النّتيجة: تفاصيل أكثر ضبط مواضع العناصر أمرٌ معقّد. إن كنت تصمّم ورقة أنماط لتعمل في عدّة متصفّحات، فعليك أيضًا أن تأخذ في الحٌسبان الاختلافات في كيفيّة تفسير المتصفّحات للمعيار القياسيّ، وربّما العلل المختلفة في إصدارات كلّ متصفّح. تمرين: رصف العناصر عدّل المستند doc2.html وورقة الأنماط style2.css باستخدام أمثلة من فقرتي "هيكل المستند" و"طفو العناصر" السابق ذكرهما. في مثال طفو العناصر، أضفّ بعض الحشوة لفصل النّصّ عن الحدود بمقدار 0.5em. تمرين عدّل المستند doc2.html مُضيفًا الوسم التّالي قرب نهايته، قبل ‎</body>‎: <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> إن لم تحفظ الصّورة التّالية من قبل لديك، فاحفظها الآن في المجلّد الّذي يحوي المستند السّابق: تأكّد من أن الصّورة تظهر في موضعها المُتوقّع بتحديث الصّفحة في المتصفّح. أضف قاعدة لورقة أنماطك تجعل الصّورة في الزاوية العلويّة اليُمنى لمستندك. حدّث الصّفحة في المُتصفّح واجعل نافذته صغيرة، تحقّق من كون الصّورة تبقى في الزّاوية العلويّة اليمنى حتّى عند تمرير الصّفحة للأسفل: (A) The oceans Arctic Atlantic Pacific Indian Southern (B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum شاهد الحل التّمرين الأوّل تظهر الصّورة في يمين القائمة الثّانية. التّمرين الثاني القاعدة التّالية تُحقّق النّتيجة المطلوبة: #fixed-pin { position:fixed; top: 3px; right: 3px; } ما التالي؟ لقد غطّينا معظم المواضيع الأساسيّة في CSS حتى هذا الدّرس، سنشرح في الدّرس المُقبل المُحدّدات المتقدّمة في قواعد CSS، وبعض التنسيقات الخاصّة بالجداول. ترجمة بتصرّف للدرس Layout من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.