اصبح لدينا الآن موقع يتمتع ببنية متينة وعدة مقالات منشورة. وحان الوقت لتصميم الصفحة النموذجية الاولى.
هناك العديد من مطوري المواقع الذين يبدأون هذه المرحلة بالعمل على الصفحة النموذجية القياسية ويعدلونها بلمسات متتالية.
من جهتنا، وليس فقط لمتطلبات هذا التدريب، ولكن من جراء العادة، نبدأ بناء الصفحة النموذجية من مستند فارغ تماماً. وخطوة خطوة، تتم اضافة الحلقات المختلفة ثم تُضاف الواجهة الرسومية (في البداية تكون علامات HTML بسيطة جداً ثم يُضاف البناء الرسومي مع الجداول). وتوفر هذه الطريقة ميزات عدة:
– انها تسمح باستيعاب البنية المنطقية جيداً خلال تصميم الصفحة: اي حلقة ترتبط بأي حلقة اخرى وهكذا.
– بتجاهل العناصر الرسومية في البداية تتوضح صورة هرمية المعلومات على الصفحة. وهكذا يمكن للواجهة الرسومية ان تنتج عن هذه الهرمية بشكل اكثر تماسكاً.
– علامات HTML الناتجة تكون غالباً اكثر وضوحاً لا سيما وان حالات التكرار تكون اقل (وهي ناتجة عن النسخ واللصق).
في ما يلي، سنستخدم اذاً علامات HTML بسيطة جداً (بالاخص لن نستخدم الجداول). اما تصميم الواجهة الرسومية في آخر المطاف، فنتركه لعناية القارئ.
لقد قصدنا بناء العلامات خطوة خطوة. لتجنب الصفحات الطويلة حين ندخل اضافات على حلقة موجودة، لن نعرض كامل الصفحة بل الجزء الذي يهمنا فقط. وزيادة في الوضوح سوف نتطرق دائماً الى اسماء الحلقات الموجودة.
الصفحة الاساسية
لنبدأ اذاً بملف «article.html» فارغ.
هذه هي بنية الحد الادنى للمقال دون اي وسائل تصفح:
<html>
<title>[#NOM_SITE_SPIP]
<BOUCLE_title(ARTICLES){id_article}>#TITRE</BOUCLE_title></title>
</head>
<body>
<blockquote>
<BOUCLE_main(ARTICLES){id_article}>
[<h3>(#SURTITRE)</h3]
<h2>#TITRE</h2>
[<h3>(#SOUSTITRE)</h3>]
[(#DATE|affdate)]
[(#LOGO_ARTICLE_RUBRIQUE|right)]
[<b>(#CHAPO|justifier)</b>]
[(#TEXTE|justifier)]
[<p align="right" align='justify'>(#LESAUTEURS)]
[<hr>(#PS)]
[<hr>(#NOTES)]
</BOUCLE_main>
</blockquote>
</body>
</html>
هذا سهل:
– الحلقة BOUCLE_title تتيح عرض عنوان المقال في ترويسة الصفحة.
– الحلقة BOUCLE_main تحتوي كامل الصفحة. فهي تتيح وضع كل الحلقات الاخرى داخل المقال المحدد.
استرجاع المعلومات حول اللعبة
يمكن للصفحة النموذجية السابقة ان تكون اساساً جيداً لمجلة الكترونية عادية (فكل المعلومات الضرورية موجودة في المقال)، الا انه في وضعنا نحن، هناك معلومة اساسية لا توجد في المقال: عن اي لعبة يتحدث؟
بالفعل، لقد قررنا ان اسم اللعبة لن يكون في المقال ولكن في القسم الذي يحتوي المقال. يمكننا الاكتفاء بحلقة HIERARCHIE، ولكن نفضل اسلوباً سيكون منتظماً في امثلتنا: يجب الانتقال من المقال الى قسمه للحصول على اسم اللعبة. (وهو المبدأ نفسه المستخدم للحصول على الشعار، مع الفرق الوحيد ان علامة LOGO_RUBRIQUE_ARTICLE# تقوم بهذه المهمة آلياً).
هذه اذاً احدى ثوابت هذا الموقع: غالباً ما تحتوي حلقات ARTICLES على حلقة RUBRIQUES تتيح «العودة خطوة واحدة»، اي استرجاع اسم اللعبة. وسيكون الوضع هكذا ايضاً في صفحة الاقسام وصفحة المحتويات.
لنعود الى بداية برمجتنا اي الى بداية حلقة BOUCLE_main:
<BOUCLE_main(ARTICLES){id_article}>
<BOUCLE_section(RUBRIQUES){id_rubrique}>
<h1>#TITRE</h1>
</BOUCLE_section>
...
لاحظ ان عنوان القسم TITRE# يعرض بالحجم الاقصى (h1). فهذا منطقي لأنه اسم اللعبة. فعنوان القسم، الذي يقتصر عادة على كونه عنصراً من عناصر التصفح، هو المعلومة الاساسية في المقال.
دعنا نعرض الهرمية، للحصول على مخطط اولي للتصفح. سنبدأ الهرمية من القسم الذي يحتوي القسم الفرعي الحالي، لأن ما يهمنا هو قائمة اصناف الالعاب (اضافة الى اننا نعرف اسم آخر قسم فرعي وهو اسم اللعبة). سنذهب اذاً الى داخل حلقة BOUCLE_section ونضيف حلقة BOUCLE_sec_parent (التي تتيح ايضاً «العودة خطوة واحدة» في الهرمية)، ومن هنا نطلب الهرمية:
<BOUCLE_section(RUBRIQUES){id_rubrique}>
<BOUCLE_sec_parent(RUBRIQUES){id_enfant}>
<BOUCLE_hierarchy(HIERARCHIE){id_rubrique}{" : "}>
<a href="#URL_RUBRIQUE">#TITRE</a>
</BOUCLE_hierarchy>
</BOUCLE_sec_parent>
<h1>#TITRE</h1>
</BOUCLE_section>
لندع هذه الصفحة «article.html» كما هي. فلا شيء معقد حتى الآن. ينقصها بالطبع ادارة المفاتيح والوصلات بين مقالات القسم الواحد (اي تلك التي تتحدث عن اللعبة).
الشئ الدقيق الوحيد هنا: يجب العودة الى القسم الذي يحتوي المقال للحصول على اسم اللعبة ويجب «العودة خطوة واحدة» (القسم الذي يحتوي القسم الذي يحتوي المقال) قبل البدء بالهرمية.