ابني صفحتك على الانترنت

اساسيات بناء صفحتك على الويب

هل تشاهد الكثير من المواقع الشخصية وتتساءل كيف استطاع هؤلاء الاشخاص بناء مثل هذه المواقع الجميلة والجذابة؟
هل تمنيت أن يصبح لديك موقع جيد وجذاب وبه لمسات سحرية وجميلة؟
إن بناء الموقع يحتاج الى مجرد عدة خطوات بسيطة ليست بها أية تعقيدات أو مستحيلات .... ألا تصدقنى؟ حسنا لتتبع تلك الخطوات ولتري بنفسك مدى سهولة بناء صفحة:
1-احجز لموقعك مكانا على الانترنت

اولا وقبل كل شىء يجب أن يكون لك مساحة على الشبكة لكى تضع صفحتك عليها .وهناك العديد من المواقع التى تعطي مساحة مجانية لوضع الصفحات الشخصية بمجرد التسجيل فيها .
ومن هذه المواقع :
موقع Freeservers . وهذا الموقع يعطى حوالى 20 MB مساحة مجانية بمجرد التسجيل به وذلك فى مقابل وضع بانار أعلى صفحتك .
موقع Crosswinds . ويعطى مساحة غير محدودة فى مقابل بانار صغير يوضع فى صفحتك .

2- ابنى صفحتك :
هذه بالطبع هى اهم الخطوات وهى خطوة تصميم وبناء الصفحة . ولكى تصمم وتبنى صفحتك يمكنك استخدام احد الإجرائين أو إستخدامهما معا :
- يمكنك بناء موقعك بإستخدام احد برامج تصميم الصفحات والتى تمكنك من بناء صفحتك دون الحاجة الى تعلم لغة ال HTML . ومن هذه البرامج برنامج Front Page Express وهو برنامج مجانى يأتى مع حزمة Intrnet Explorer المجانية.

لتعلم كيف تبني صفحتك بإستخدام فرنت بيج اكسبريس بشكل مختصر

برنامج Front page Express .... أحد برامج تحرير وإنشاء صفحات الويب . هذا البرنامج ليس إحترافي , بمعني انه يمكنك من عمل صفحات شخصية في سهولة , لذا فهو مصمم أصلا للمبتدئين في عالم بناء صفحات الويب . شركة Microsoft أنتجت هذا البرنامج ووضعته ضمن حزمة من البرامج المجانية والتي تأتي مع متصفحها الشهير Internet Explorer .لذا فإذا كانت عندك نسخة من إنترنت إكسبلورر الإصدارة الخامسة إذا فانت عندك برنامج فرنت بيج إكسبريس . ليس هذا فقط , بل إن فرنت بيج إكسبريس يأتي مع إسطوانة ويندوز 98 . لذا فإذا كانت عندك إسطوانة ويندوز 98 فإن برنامج فرنت بيج إكسبريس يوجد عندك وهو ينزل مع تثبيت ويندوز 98 . فإذا كنت تعمل الآن علي ويندوز 98 فلابد وان برنامج فرنت بيج إكسبريس قد نزل الآن علي جهازك .
ورغم أنني قد ذكرت تلك الملحوظات في هذه الصفحة قبل تحديثها , إلا انني تلقيت عشرات الرسائل التي تخبرني انها لم تجد البرنامج رغم ان عندها إنترنت إكسبلورر وتستخدم ويندوز 98 . برنامج فرنت بيج اكسبرس سهل وبسيط جدا في الإستخدام حيث أنه يعمل كأي محرر نصوص عادي كما يمكنك الكتابة في MS WORD ... لكن هناك بعض الأوامر التي تميز محرر الويب هذا عن محرر النصوص . وهذه الأوامرهي:

1- تحديد لون الخلفية وصورة الخلفية:

· افتح قائمة Format ثم اختر Background .

· ثم اختر تبويب Background ومنه يمكنك تحديد لون النص واون الخلفية كما يمكنك تحديد لون الإرتباطات التشعبية.

· لوضع صورة خلفية اضغط علي Background Image ثم اضغط علي Browse لتحدد موقع الصورة سواء كانت علي جهازك أو في احد المواقع علي الإنترنت.

· إذا كنت تريد جعل الصورة الخلفية ثابتة فأختر Watermark .

2-إدراج صورة في الصفحة:

· حدد المكان الذي تريد وضع الصورة به في الصفحة.

· افتح قائمة Insert ثم اختر Image .

· إذا كانت الصورة موجودة علي أحد مواقع الويب فأضغط From Location ثم اكتب موقع الصورة ,وإذا كانت الصورة علي جهازك فأضغط عليBrowse وحدد موقع الصورة وأضغط Open .

3-إدراج إرتباط تشعبي:

أي ربط كلمة أو صورة بموقع أو صفحة وذلك عن طريق:

· حدد الكلمة أو الصورة المراد ربطها.

· إفتح قائمة Edit ثم أختر Hyperlink .

· أكتب عنوان الموقع أو الصفحة بالكامل في البند URL ثم أضغط Ok .

· إذا كنت تستخدم ال Frames فحدد ال Frame الذي تريد تحميل الموقع به واكتب عنوانه في البند Target Frame.

4-إدراج جدول :

· حدد المكان الذي تريد وضع الجدول به.

· افتح قائمة Tableثم اخترInsert Table .

· اكتب عدد الصفوف في خانة Rows وعدد الأعمدة في خانة Coloumns ثم إضغط Ok.

5-وضع خلفية صوتية:

· إفتح قائمة File ثم أختر Page Properties .

· في خانة Background Sound اضغط Browse ثم حدد موقع ملف الصوت الذي تريده.

· ثم من البند Loop حدد عدد المرات التي تريدها لتشغيل ملف الصوت ثم اضغط Ok.

6-إدراج رمز:

· إفتح قائمة Insert ثم اختر Symbol .

· إختر الرمز الذي تريده ثم اختر Insert .

· اضغط Close .

7-إدراج خط أفقي:

· حدد المكان الذي تريد وضع الخط به.

· إفتح قائمة Insert ثم أختر Horizontal Line .

· إضغط مرتين علي الخط إذا أردت تغيير خصائصه.

8-إدراج نص متحرك :

· حدد المكان الذي تريد وضع النص المتحرك به.

· إفتح قائمة Insert ثم أختر Marquee .

· اكتب في خانة Text النص الذي تريده ثم إضغط Ok .

9-إدراج لقطة فيديو:

· حدد المكان.

· إفتح قائمة Insert ثم اخترVedio .

· إضغط Browse ثم حدد مكان ملف الفيديو. ثم إضغط Ok .

- أو يمكنك بناء صفحتك بإستخدام لغة HTML وهى لغة سهلة جدا وبسيطة ويمكنك تعلمها بسهولة ويسر وفى اقل فترة ممكنة . وهناك العديد من المواقع العربية التى تعلم لغة HTML بالتفصيل .
ومن هذه المواقع :
موقع HP بالعربية .
موقع الدكتور نت .

3- اضافة لمسات سحرية لموقعك بعد بناءه :
الآن وبعد ان انتهيت من التصميم الأولى لموقعك يمكنك إضافة بعض اللمسات السحرية والجميلة لموقعك مثل :
- إضافة بعض الصور المتحركة Gif Animation . ويمكنك اخذ بعض الصور المتحركة من هذه الصفحة. ويمكنك صنع مثل هذه الصور المتحركة بإستخدام برامج الجرافيك ومن هذه البرامج البرنامج الشهير Paint Shop Pro وهو برنامج مشترك يعمل لمدة 30 يوما بكامل فعالياته ويمكنك ان تذهب الى موقع HP بالعربية والذى يعطى دروس فى طريقة استخدام البرنامج فى عمل اللمسات الجميلة لصفحتك .

- إضافة عداد للزوار فى صفحتك والذى يقوم بعد الزوار الذين يزورون موقعك ويمكنك اضافة عداد للزوار الى صفحتك مجانا من احد المواقع التالية :
موقع The Counter .
موقع Siteflow .
موقع Ultimate Counter .

- اضافة سجل زوار الى موقعك يسجل فيه الزوار ارائهم واقتراحاتهم ومن المواقع التى تستطيع الحصول منها على سجل زوار مجانا :
موقع Miatrade .
موقع Guestbook .
موقع Beseen .

- اضافة بعض اللمسات الجميلة بإضافة جافا سكريبت الى صفحتك وهناك بعض المواقع التى تحتوى على جافا سكريبت يمكنك نسخها ولصقها فى صفحتك .
ومن هذه المواقع :
موقع Javascriptcity .
موقع Java Center .
موقع Javascript Source .
موقع Java Goodies .

- هل عنوان صفحتك طويل وصعب الحفظ .. يمكنك اختصار عنوان صفحتك الى عنوان صغير وسهل الحفظ عن طريق احد المواقع التى تمكنك من ذلك .
ومن هذه المواقع :
موقع http://i.am الذى يمكنك من عمل الإختصار http://i.am/UserName .
موقع http://hello.to والذى يمكنك من عمل الإختصار http://hello.to/UserName .
موقع http://fly.to والذى يمكنك من عمل الإختصار http://fly.to/UserName .

- اضافة ساحة حوار لموقعك من احد المواقع التالية :
موقع Web Post .
موقع Beseen .
موقع Discussion World .

- اضافة ساحة دردشة لموقعك من خلال احد المواقع التالية :
موقع MultiSoftCorp .
موقع Bessen .
موقع MaxiChat .

3- نشر صفحتك فى شبكة الإنترنت :
لآن وبعد ان انتهيت من التصميم ووضع اللمسات الجميلة النهائية تبقى الخطوة الأخيرة وهى وضع صفحتك فى مساحتك المجانية على شبكة الإنترنت وذلك باستخدام لوحة التحكم والتي غالبا يوفرها لك الموقع الذى أعطاك المساحة المجانية . أويمكنك إستخدام أحد برامج ال FTP مثل برنامج WS-FTP والذي شرحناه في صفحة ال FTP في هذا الموقع . موقع Freeservers مثلا يحتوى على Browser متقدم يمكنك من نقل الملفات المكونة لموقعك الى مساحتك المجانية .

و الآن و بعد نشر صفحتك فى الإنترنت يمكنك ان تفخر بأن لك موقع متميز على الإنترنت و قد عرفت ان عملية بناء صفحة ويب سهلة و ليس بها اية صعوبات

================= جديـــــــــــــــــد =================.

أنشئ صفحتك الخاصة مجاناً!
عن مجلة pc

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

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

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

Http://www.faisal.com

وإذا كانت لشركته، فبإمكانه استخدام اسم الشركة، مثلاً:

Http://www.iawmag.com

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

Http://member.tripod.com/93946887

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

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

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

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

تأليف صفحات ويب

الجزء الأول

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

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

يتضمن الموقع عادة، عدداً من الصفحات، يحفظ كل منها في ملف منفصل، وكنا نشرنا في عدد أكتوبر/تشرين الأول 1997 مقالة، بعنوان "أنشئ صفحتك الخاصة مجاناً"، تحدثنا فيها، عن الطرق المتوفرة لإنشاء صفحة أو موقع، على شبكة ويب، وركزنا على المواقع التي توفر صفحات مجانية، وبيّنا ميزات وعيوب بعض هذه المواقع، وقارنّا بين خدماتها المختلفة، من ناحية السعة المتوفرة للصفحة، وأسلوب تحديثها، وسهولة الوصول إليها، وأعطينا مثالاً سريعاً، عن إنشاء صفحة مجانية على أحد المواقع المشهورة، وهو http://www.geocities.com.

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

سعة الصفحة المجانية	الموقع
5 ميجابايت	www.angelfire.com
11 ميجابايت	www.geocities.com
غير محدود	www.sprec.com
11 ميجابايت	www.tripod.com
7 ميجابايت	www.wbs.net

تأليف محتويات صفحة على شبكة ويب:

من أين أبدأ؟

تتوفر طريقتان لتأليف الصفحات على شبكة ويب، أولهما استخدام لغة HTML، والثانية استخدام أحد محررات صفحات ويب، فأيهما تختار؟

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

عندما يجلب برنامج التصفح صفحة من موقع على شبكة ويب، ويعرضها على الشاشة، فإنه يجلب ملفاً نصياً، مكتوباً بلغة HTML، مع نص الصفحة ذاته، وبعض ملفات الصور والملتيميديا، أحياناً. يصف النص المكتوب بلغة HTML، للمتصفح، طريقة توضع نص الصفحة، وتتابع فقراته، وما هي عناوينه، وأماكن الصور فيه … إلخ، بواسطة ما يسمى "الواصفات" (tags)، وذلك بالشكل التالي:

مثال ذلك السطر التالي:

<h1>صفحتي الشخصية<\h1>

تبين الواصفة <h1>، للمتصفح، كيف يظهر النص "صفحتي الشخصية"، ولهذا، يجب لتعلم تأليف الصفحات بلغة HTML، تعلم معنى عشرات الواصفات المختلفة. وهذا هو السبب الرئيسي الذي يجعل التأليف بهذه اللغة صعباً، إلا أنها توفر مرونة كبيرة وقوة في تأليف صفحات ويب، لذا يستخدمها المحترفون في هذا المجال.

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

أي محررات صفحات ويب أختار؟

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

وهذا ما جعلنا نختار استخدام برنامج تحرير صفحات ويب FrontPage Express، وهو إصدارة مجانية من برنامج FrontPage، يرفق بالإصدارة الكاملة من برنامج إنترنت إكسبلورر 4.0، التي وزعناها في القرص الهدية لعدد مايو/أيار 1998، والذي يمكن استجلابه أيضاً، من موقع مايكروسوفت التالي: http://www.microsoft.com/ie/download، (أو استجلاب تحديث للإصدارة المصغرة التي توجد لديك)، ويجب تركيب الإصدارة الكاملة من إنترنت إكسبلورر 4.0، حتى يتم تركيبه.

قبل أن تبدأ بتصميم الصفحة:

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

البدء بالعمل:

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

عندما تشغل برنامج FrontPage Express، ستلاحظ أن واجهته مشابهة لواجهات برامج معالجة الكلمات، والتعامل معه لا يختلف عنها مطلقاً. يفتح البرنامج عند تشغيله، ملفاً لصفحة HTML، باسم Untitled Normal Page.

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

ابدأ بإدخال النص التالي:

صفحة أحمد شهم شريف (ضع اسمك بدلاً من اسمي طبعاً!)

المحتويات:

السيرة الذاتية

الاهتمامات والهوايات

المواقع المفضلة

اتصلوا بي

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

يمكنك أيضاً، إدخال العبارات باللغة الإنجليزية أو بلغة لاتينية أخرى إذا شئت، وتعبر هذه العبارات عن عنوان الصفحة، بالإضافة إلى عناوين محتوياتها. احفظ الصفحة باختيار File/Save، فيظهر البرنامج صندوق حوار يطلب فيه اسم الملف وموقعه في مربع Page Location، أدخل الاسم والموقع الذي تريده. أما مربع Page Title، فهو يطلب ما يسمى عنوان الصفحة (Title)، وهو النص القصير الذي يظهر على رأس نافذة المتصفح عندما تفتحها، ويظهر في لائحة العلامات المرجعية (bookmark)، ويجب اختياره بحيث يصف محتويات الصفحة الشخصية باختصار، (مثلاً، صفحة أحمد شهم شريف). لمشاهدة الصفحة كما ستظهر على ويب، شغل المتصفح الذي تستخدمه، (يجب أن تشغل متصفحاً يدعم اللغة العربية، إذا استخدمت اللغة العربية)، وافتح الصفحة من المجلد الذي حفظتها فيه، (باستخدام File/Open في برنامج إنترنت إكسبلورر، مثلاً)، فتشاهدها كما ستعرض على شبكة ويب.

مبروك!

لقد ألفت صفحتك الأولى، وهي محفوظة على قرصك المحلي، بانتظار أن ترسلها (upload) إلى موقع صفحتك لاحقاً.

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

المزيد من الأناقة:

بما أن الصفحة التي تؤلفها باللغة العربية، فهي تقرأ من اليمين لليسار، وهذا ما يجب تعيينه، ليعرضها المتصفح بشكل صحيح، ولتسهيل إدخال المعلومات، وترتيب الكلمات وعلامات الترقيم فيها. انقر بالزر الأيمن على أي مكان في الصفحة، واختر Page Properties، من القائمة، ثم اختر من صندوق الحوار، لسان التبويب General، واختر اتجاه القراءة RTL، من اللائحة المنسدلة Document Reading Direction. اذهب إلى لسان تبويب Background، غير لون أرضية الصفحة، ولون النص إلى الألوان المرغوبة لديك، بالاختيار من اللائحتين المنسدلتين Background وText، ثم انقر زر "موافق". ضع المشيرة في السطر التالي لعنوان الصفحة، واختر من شريط القوائم Insert/Horizontal Line، ليظهر خط أفقي تحت العنوان. اختر مجموعة العناوين التي تبدأ من "السيرة الذاتية" حتى "اتصلوا بي"، ثم انقر على الزر الموجود على شريط الأدوات، والمسمى Bulleted List، فتصبح الصفحة كما تبدو في (الشكل 2).

أصبحت أفضل، أليس كذلك؟!

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

المزيد من المرح:

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

بسيطة …!

عد إلى خصائص الصفحة مرة أخرى، ولسان التبويب General، واذهب إلى الإطار Background Sound، أدخل مسار وموقع ملف الصوت في المستطيل Location، أو انقر على زر Browse، ثم اختر From File، وانقر Browse، للوصول إليه عبر صندوق الحوار القياسي لفتح الملفات. يمكن أن يكون هيئة الملف الصوتي WAV، أوMIDI، أوAIFF، أو AU، وننصح باستخدام الهيئة MIDI، أو AU، لأن ملفاتها أقل حجماً من الملفات الصوتية الأخرى، بالنسبة لزمن العزف ذاته. يمكن تكرار عزف الملف الصوتي عدداً تختاره من المرات، بزيادة عدد الدورات في عداد Loop، ضمن إطار Background Sound، أو تكرار عزفه باستمرار، باختيار مربع الاختيار Forever. تذكر أنه يجب إرسال هذا الملف الصوتي إلى مزود إنترنت الذي سترسل إليه صفحتك، ويجب حفظه على الدليل ذاته الذي ستحفظها فيه.

لا بد أنك خمنت الآن من أين يمكن أن تضيف أرضية للصفحة!

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

هل نسيت محتويات الصفحة؟

جعلنا شكل الصفحة، أكثر جاذبية حتى الآن، وحان الوقت أن نلتفت إلى مضمونها قليلاً. سيتوقع زائر الصفحة، أن ينقر على عبارة "السيرة الذاتية"، مثلاً، للانتقال إلى معلومات عن السيرة الذاتية الخاصة بي، (أو سيرتك الذاتية، في صفحتك)، ومثل ذلك بالنسبة للعناوين الأخرى، فكيف تجعل الصفحة بهذا الشكل؟

خذ رشفة من فنجان قهوتك، ونفساً عميقاً، وتابع الخطوات التالية:

أدخل خطاً أفقياً آخر بعد قائمة العناوين، مشابهاً للخط الذي يلي العنوان الرئيسي.

أدخل عبارة "السيرة الذاتية"، بعد ذلك الخط الأفقي.

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

تأكد أنك ما تزال تختار عبارة "السيرة الذاتية" الجديدة، ثم اختر من شريط القوائم، قائمة Edit، واختر منها Bookmark.

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

انتقل إلى عبارة "سيرتي الذاتية" الأولى في الأعلى، واخترها، ثم انقر على قائمة Insert، واختر Hyperlinks، فيظهر صندوق حوار، اختر منه لسان التبويب Open Pages، اختر اسم الصفحة التي تحررها، من لائحة Open Pages، ثم اختر من اللائحة المنسدلة Bookmark، العلامة المرجعية MyCV، ثم انقر "موافق". ستلاحظ تغير لون العبارة إلى لون يشير إلى وجود ارتباط عند هذه العبارة، ويظهر تحتها خط متصل.

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

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

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

لا، انتظر، مهلاً! نسينا أن نبين لك كيفية إنشاء لائحة الارتباطات بالمواقع المفضلة؟ وكيف يمكن إنشاء ارتباط بعنوان البريد الإلكتروني، في قسم "اتصلوا بي"؟

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

اختر اسم الموقع، اسم المجلة "مجلة إنترنت العالم العربي"، مثلاً، ثم اخترInsert\Hyperlink من شريط القوائم.

اذهب إلى لسان التبويب World Wide Web، في صندوق الحوار الظاهر.

اختر http:، من لائحة Hyperlink Type،

أدخل في مستطيل URL، عنوان الموقع الذي حددت اسمه، أي العنوان http:\\www.iawmag.com، في هذا المثال، ثم انقر زر "موافق"، وتنتهي، بذلك، العملية. حدّث الصفحة في المتصفح ولاحظ النتيجة.

كي تنشئ ارتباطاً ببريدك الإلكتروني، في قسم "اتصلوا بي"، أدخل كلمة "بريدي الإلكتروني"، مثلاً، واخترها، ثم افتح صندوق حوار إنشاء ارتباط (Insert\Hyperlink) واذهب إلى لسان التبويب World Wide Web، واختر mailto: من لائحة Hyperlink Type، ثم أدخل عنوان بريدك الإلكتروني في مستطيل URL، وانقر "موافق".

وماذا إذا أردت إضافة صور، ومقاطع فيديو؟

الأمر بسيط، أيضاً!

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

ضع المشيرة في المكان الذي تريد أن تظهر الصورة فيه، واختر Insert/Image، ثم اختر From File، وأدخل مسار واسم الملف في المستطيل، أو انقر الزر Browse، لفتح صندوق حوار فتح ملف، والوصول إلى ملف الصورة بالانتقال إلى المجلد الذي يحتويه، أخيراً، انقر زر "موافق" لإدراج الصورة. إذا نقرت الصورة بعد إدراجها بزر الماوس الأيمن، يمكنك اختيار Image Properties من القائمة، لتظهر خصائص الصورة التي تسمح لك بالتحكم بقياسها، وجودتها.

لإدراج مقطع الفيديو في الصفحة، ضع المشيرة على المكان الذي تريد أن يظهر فيه المقطع، واختر Insert/Video، ثم أدخل اسم ملف الفيديو ومساره مباشرة، أو انتقل بعد النقر على زر Browse. انقر بالزر الأيمن على صورة ملف الفيديو، واختر خصائص الصورة، ثم اختر لسان التبويب Video، لتتمكن من تحديد خيارات تشغيل الملف، الموجودة ضمن إطار Repeat، كتشغيله باستمرار Forever، أو لعدد معين من المرات يفصل بينها تأخيرات زمنية معينة، أو تعيين بدء تشغيله من إطار Start، عند فتح الصفحة On file Open، أو عند مرور الماوس فوق صورته On Mouse Over (لا يدعم إنترنت إكسبلورر 3.02 هذه الميزة)

وماذا بعد؟

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

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

لا تجزع! فعلى الرغم من أنك لم تؤلف صفحتك بهذه اللغة، فإن برنامج FrontPage Express، فعل ذلك نيابةً عنك. إذا كان ملف صفحتك مفتوحاً، اختر View/HTML من شريط القوائم، فيعرض البرنامج، نافذة فيها نص صفحتك بلغة HTML، يمكن أن تلصق فيها، أي نص بلغة HTML، كما يطلب الموقع الذي يوفر لك مكاناً مجانياً على إنترنت. أغلق النافذة بالنقر على زر Ok، ثم احفظ الملف بحالته الجديد، وأرسله إلى مكان الصفحة، بالطريقة الخاصة بالموقع الذي اخترته.

تعلم استخدام إنترنت

تأليف صفحات ويب

الجزء الثاني

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

إرسال الصفحة إلى مزود ويب

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

سنفترض أنك نفذت معظم الخطوات التي وردت في الجزء الأول المنشور في العدد السابق، فحصلت على ملف HTML، باسم معين، وليكن myhomepg.htm، واستخدمت ملفاً باسم backgndpic.gif كصورة لأرضية الصفحة، وملف خلفية موسيقية باسم music.mid. كل ما عليك اختياره الآن، هو الجهة التي ستستضيف صفحتك.

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

ملأت نموذج الاشتراك، واخترت اسم المستخدم Shahem، فأصبحت أحد أعضاء الموقع وأصبح عنوان الدليل الخاص بي كالتالي: http://members.tripod.com/~Shahem. فإذا فعلت مثلي، وأصبحت أحد أعضاء الموقع، فأهلاً بك أولاً! ثانياً، استخدم كلمة السر التي وصلت إلى عنوان بريدك الإلكتروني، للدخول إلى الموقع كأحد أعضائه، وذلك بالنقر على Members: log in، وإدخال المعلومات المطلوبة، فتجد أنه حجز لك دليلاً بسعة أحد عشر ميجابايت، وعنوانه http://members.tripod.com/~XXXX، حيث XXXX اسم المستخدم الذي اخترته. إذا كنت جاهزاً لإرسال الصفحة إلى موقعك، انقر Free Home Builder، فتنتقل إلى صفحة أدوات تأليف وإدارة الصفحات المجانية التي يوفرها الموقع. لا حاجة لاستخدام أدوات تأليف الموقع، لأنها تجبرك على البقاء متصلاً بالشبكة، خلال وقت التأليف. يضاف إلى ذلك أنك اخترت سابقاً محرر Express Frontpage لتأليف صفحتك، (أو بالواقع نحن من اختار ذلك!)، وهو يؤدي تلك المهمة بأسلوب أفضل. انقر على الارتباط homepage housekeeper، للانتقال إلى صفحة إرسال الملفات إلى المزود البعيد، والتي ستظهر لك أيضاً، عنوان صفحتك، ومعلومات عن السعة التي استخدمتها، والسعة المتبقية، ولائحة أسماء الملفات الموجودة في دليلك حالياً، والتي يفترض أن تكون فارغة أول مرة، لأنك لم ترسل أي ملف إلى المزود البعيد حتى الآن.

هل أنت مستعد للحظة المنتظرة؟ لحظة وصول صفحتك إلى إنترنت؟! اختر إذاً من لائحة Things you can access from the Homepage Housekeeper، الوظيفة Upload files، ثم انقر الزر go!، وستنتقل إلى صفحة إرسال الملفات إلى المزود البعيد، التي تسمح بإرسال خمسة ملفات دفعة واحدة.

أدخل في المستطيل File1: اسم ملف الصفحة التي ألفتها (والتي افترض أن اسمها myhomepg.htm)، مع مساره، أو اختره من القرص الصلب بالنقر على زر Browse، والانتقال إلى مجلده، ثم أدخل بالطريقة ذاتها، اسم ملف صورة الخلفية (backgndpic.gif) في المستطيل File 2:، واسم ملف الموسيقى (music.mid) في المستطيل File3:، وغيرها من الملفات التي استخدمتها في المستطيلات File 4:، وFile 5:.

انقر الزر Upload، وانتظر قليلاً إلى أن يتم إرسال ملف الصفحة والملفات الأخرى. لقد أصبحت صفحتك على الشبكة! تأكد من ذلك بتشغيل نسخة أخرى من المتصفح الذي تستخدمه، وإدخال عنوان صفحتك، (http://members.tripod.com/~XXXX/myhomepg.htm، مثلاً) لتجدها جزءاً من إنترنت. ماذا تنتظر! أسرع واتصل بأصدقائك وأخبرهم عنها!

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

تأكد أولاً من أنك أرسلت جميع ملفات الصور والصوت التي استخدمتها إلى المزود البعيد، وتأكد أن المسارات في خصائص ملفات الصور والصوت، في الصفحة لا تتضمن سوى أسماء الملفات ذاتها، (أي يكفي ذكر الاسم backgndpic.gif، مثلاً، في المستطيل ضمن لسان التبويب Background، في خصائص الصفحة)، إذ يجب أن تقع تلك الملفات في دليل ملف الصفحة (myhomepg.htm) ذاته على المزود البعيد، وإذا حدد له مسارات مختلفة (كالمسارات الموجودة على قرص الصلب)، فإنه سوف يحاول إرسال ملفات الصور والصوت الموجودة في صفحتك من أدلة غير موجودة عليه أصلاً. عدل مسارات ملفات الصور والصوت في ملف myhomepg.htm من صندوق حوار الخصائص لكل منها، باستخدام برنامج Frontpage Express، بحيث لا تحتوي إلا على أسماء الملفات ذاتها، ثم أرسل الملف myhomepg.htm إلى المزود البعيد مرة أخرى.

هل تكفي صفحة واحدة؟

لابد أنك لاحظت أن معظم مواقع ويب لا تتألف من صفحة واحدة تحتوي على جميع المعلومات المتوفرة في الموقع، بل تبدأ بصفحة رئيسية (Homepage)، يمكن التفرع منها إلى الصفحات الأخرى (شكل 1)، والهدف من ذلك تسريع تحميل الصفحة الرئيسية، لأن محتوياتها في هذه الحالة، تقتصر على فهرس أو قائمة بارتباطات للصفحات الأخرى. يسهّل بناء الموقع بهذا الأسلوب من عملية تحديث معلوماته، وهو أمر لا بديل له بالنسبة للمواقع الكبيرة. يعطى ملف الصفحة الرئيسية، عادة، الاسم index.htm، أو default.htm، وهما اسما الملفين اللذين يبحث عنهما المزود البعيد، عندما يطلب منه الانتقال إلى دليل معين، بدون أن يذكر له اسم الملف الذي يطلب إرساله. فإذا أدخلنا، في حالة الموقع الذي أنشأناه، العنوان http://members.tripod.com/~Shahem فإن المزود البعيد سيحاول البحث عن ملف باسم index.htm، داخل هذا الدليل ويرسل محتوياته للمتصفح. فإذا لم يجده، فإنه يرسل قائمة ارتباطات بأسماء الملفات المتوفرة في ذلك الدليل، لكن من الأفضل الاستفادة من تلقائية البحث وإرسال محتويات ملف index.htm (بالنسبة لمزودات يونيكس)، أو ملف defualt.htm، (بالنسبة لمزودات ويندوز إن.تي)، وإعفاء زائري الموقع من ضرورة كتابة اسم ملف الصفحة الرئيسية، بالشكل members.tripod.com/~Shahem/myhomepg.htm، إذ يكفي عندها إدخال members.tripod.com/~Shahem.

لنبدأ بإعادة تنظيم الصفحة الشخصية بهذا الأسلوب، بحيث نجعل كل قسم من محتوياتها ضمن صفحة منفصلة. غير اسم الملف myhomepg.htm إلى index.htm على القرص الصلب، وشغل برنامج Frontpage Express، وحمله، ثم أنشئ ملفاً جديداً، باختيار File/New، من قائمة البرنامج، ثم اختيار النموذج Normal Page ثم OK. انقل محتويات القسم "سيرتي الذاتية" من الصفحة الرئيسية، إلى الصفحة الجديدة مستخدماً أوامر القص والنسخ من قائمة Edit، كما تفعل في برامج معالجة النصوص، ثم احفظ الصفحة الجديدة على القرص الصلب، باسم myvcpg.htm مثلاً، واحفظ التغييرات التي أجريتها على الملف index.htm. كرر الأمر ذاته بالنسبة لبقية أقسام الصفحة الرئيسية، فيصبح لديك الملفان: myhobbypg.htm لصفحة الاهتمامات والهوايات، وmyfavoritepg.htm للائحة الارتباطات، واترك الارتباط بعنوان بريدك الإلكتروني على الصفحة الرئيسية. لا تنس أن تعين عنوان صفحة (Title) مناسباً، لكل ملف HTML جديد أنشأته، وأن تغير تنسيق النصوص فيه، لكي يتناسب مع وضعه الجديد. اجعل العنوان "السيرة الذاتية" في ملف mycvpg.htm، في وسط السطر، مثلاً، وزد قياس خطه، واحذف العلامة المرجعية MyCV المرتبطة به، بالنقر بالزر الأيمن للماوس عليها، واختيار Bookmark Properties، وحذف كلمة MyCV من صندوق الحوار، ثم النقر على OK. يمكن اختيار أرضيات رسومية وخلفيات موسيقية للصفحات الفرعية تختلف عن أرضية وموسيقى الصفحة الرئيسية، ويتوفر على إنترنت عشرات المواقع التي توفر تلك الرسوميات والأصوات مجاناً. نورد بعض عناوين تلك المواقع في الجدول 1، لكن إذا لم تجد ضالتك فيها، يمكنك تصميم رسومياتك الخاصة، باستخدام أي من برامج الرسم المتوفرة، وحفظها بهيئة GIF، أو JPG، لكي تتمكن من استخدامها في تأليف صفحات ويب.

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

انقر على الارتباط "السيرة الذاتية" بالزر الأيمن للماوس، واختر Hyperlink Properties.

اختر عنوان الصفحة الرئيسية من لسان التبويب Open Pages، ومن قائمة Open Pages.

انتقل إلى لسان التبويب World Wide Web، واختر نوع الارتباط Hyper Link Type، بحيث يكون http:.

أدخل عنوان URL، بحيث يبدأ بعنوان موقعك، وينتهي باسم ملف السيرة الذاتية، بالشكل التالي http://members.tripod.com/~XXXX/mycvpg.htm، مثلاً، إذا كنت مشركاً في موقع tripod، حيث XXXX، تعبر عن اسم المستخدم الذي اخترته.

كرر الإجراء ذاته لبقية الارتباطات، بحيث يشير كل منها إلى الملف الذي يخصه. واحفظ هذه التغيرات التي أجريتها على ملف الصفحة الرئيسية index.htm، ثم اتصل بإنترنت وأرسل ملفات الصفحات الجديدة mycvpg.htm، وmyhobbypg.htm، وmyfavoritepg.htm، إلى المزود البعيد، بالإضافة إلى الإصدارة الجديدة من ملف الصفحة الرئيسية index.htm، وأية ملفات رسومية أو صوتية أخرى استخدمتها، واحذف ملف الصفحة الرئيسية القديم myhomepg.htm من المزود البعيد، (مستخدماً أمر الحذف من صفحة homepage housekeeper، إذا كنت قد اشتركت في موقع Tripod). تأكد أخيراً، من صحة عمل تلك الارتباطات، بزيارة موقعك والانتقال من الصفحة الرئيسية إلى كل من الصفحات الفرعية. ألا يبدو موقعك الآن، أكثر احترافاً؟!

الأزرار

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

هيا نفعل ذلك!

لنبدأ بالأزرار.. معظم الأزرار التي تراها على صفحات ويب رسوم مرتبطة بصفحات أخرى، يضيف إليها مؤلفو الصفحات شيفرة برمجية بلغة CGI (Common Gateway Interface)، أو JavaScript لمحاكاة حركة ضغط الزر الفيزيائي، بالتبديل بين رسمين مختلفين للزر ذاته. ويوجد نوع آخر من الأزرار تحاكي حركة ضغط الزر أيضاً، والتي تعتمد على ما يسمى بريمجات جافا (Jave Applets). لكن، لن ندخل في تفاصيل كيفية برمجة الأزرار المتحركة، فتلك مسألة تحتاج لشرح منفصل، يمكن أن نقدمه في أعداد مقبلة، وسنكتفي حالياً بالأزرار الساكنة. يمكن تصميم الأزرار بالشكل الذي ترغبه، باستخدام أي من برامج الرسوميات المتوفرة، إلا أننا ننصحك بجلب الأزرار من أحد مواقع إنترنت الذي يوفرها مجاناً (انظر جدول 1)، وتعديلها بالشكل الذي ترغبه.

جلبنا من الموقع www.webwider.com/syzone/test/button1.shtml مجموعة من ملفات الأزرار، ثم أضفنا عليها الكلمات العربية لقائمة الصفحة الشخصية باستخدام برنامج تحرير الرسوميات Paint Shop Pro، (لا تحتاج عملية جلب ملف الزر، سوى النقر على صورته بالزر الأيمن للماوس، واختيار Save as Picture، في متصفح إنترنت إكسبلورر). سمينا الملفات bttn_mycv.gif لزر "السيرة الذاتية" وbttn_hobby.gif لزر "الهوايات"، وbttn_myfav.gif، لزر المواقع المفضلة.

فإذا فعلت ذلك أيضاً، افتح الملف index.htm، ببرنامج Frontpage Express، واتبع الخطوات التالية لإضافة كل زر من الأزرار:

نفذ إجراء إدراج صورة، كما تعلمت سابقاً، اختر Insert/Image، ثم أدخل اسم ملف صورة الزر.

اختر خصائص صورة الزر بالنقر بالزر الأيمن للماوس، ثم اختر لسان التبويب General.

أدخل في الإطار Default Hyperlink، وضمن الحقل Location، عنوان الصفحة التي ترغب بالانتقال إليها عند النقر على صورة الزر، ولا تنس أن تدخل http:// أولاً. أدخلتُ العنوان التالي لارتباط زر صفحة السيرة الذاتية http://members.tripod.com/~Shahem/mycvpg.htm،

احذف الارتباطات النصية، ورتب الأزرار عمودياً أو أفقياً، حسب رغبتك، ثم احفظ التعديلات على ملف الصفحة الرئيسية index.htm.

ماذا؟! هل أصبحت تعرف كيفية إضافة زر عودة من الصفحات الفرعية إلى الصفحة الرئيسية، وتريد أن تشرح لي ذلك؟

موافق!

"سأجلب أولاً زر من أحد المواقع التي توفرها مجاناً، ثم سأستخدم أحد محررات الرسوميات، لأكتب عليه كلمة "الصفحة الرئيسية" وأحفظه بشكله الجديد. سأفتح كل ملف من ملفات الصفحات الفرعية وأضيف إليها ذلك الزر في موقع مناسب، في أسفل يسار الصفحة، مثلاً. ثم سأفتح خصائص صورة الزر في كل منها بالنقر بالزر الأيمن للماوس، واختار Image Propertise، (خصائص الصورة)، وأنتقل إلى لسان التبويب General، وأدخل عنوان الصفحة الرئيسية في الإطار Default Hyperlink، وضمن الحقل Location، بادئاً بـ http://:، ثم أحفظ هذه التعديلات في الملفات المعنية، أليس ذلك صحيحاً؟"

ممتاز! لقد قلت ما أريد قوله بالضبط!

لكن، هل تعرف الأزرار التي تظهر رسوماً متحركة؟

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

انتقل إلى الموقع www.elated.com/toolbox/buttonkits واجلب أحد الرسوم المتحركة التي تمثل البريد الإلكتروني، بالنقر بالزر الأيمن للماوس على الرسم المتحرك واختيار Save As Picture، وحفظ الملف على القرص الصلب.

افتح ملف الصفحة الرئيسية index.htm، وأدرج الصورة في اسفل الصفحة، ووسطها.

أدخل عنوان بريدك الإلكتروني في حقل Default Link، من خصائص الصورة، واسبقه بالعبارة mailto:، ثم احفظ التغييرات التي أجريتها.

يمكنك الآن تحميل ملف الصفحة الرئيسية ضمن المتصفح، لكي تشاهد الرسم المتحرك.

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

إذ أردت أن تنشئ أو تعدل ملفات Animated GIF، يجب استخدام محررات رسوم خاصة بملفات GIF المتحركة، مثل GifShaker (www.imagelib.com/products/gifshkr.html)، وAnimated Screen 2.1 (www.pysoft.com/downloads_fr.html)، وXara3D 2.1 (www.xara.com/xara3d/download.htm)، وغيرها مما يمكن أن تجده مصنفاً في الموقع www.cnet.com، أو www.zdnet.com.

عدادات الزوار

ربما لا يبدو أمراً لطيفاً، أن تقابل زوار منزلك بالقول: أنت الزائر رقم 50 منذ 1/1/1998، بدلاً من القول: أهلاً وسهلاً!

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

تكتب معظم عدادات الزوار بلغة CGI (Common Gateway Interface) (راجع موضوع "التفاعل مع صفحات إنترنت باستخدام برامج واجهة البوابة العمومية"، المنشور في هذا العدد)، ويكتب بعضها الآخر بلغة جافا على شكل بريمجات جافا (Java Applets)، ولن ندخل بالطبع، في تفاصيل برمجة العدادات، فهو خارج نطاق بحثنا، وكل ما يهمنا هو استخدام العدادات الجاهزة. سنستخدم عداداً بلغة CGI، ونترك الحديث عن عدادات برمجيات جافا للحلقة المقبلة. يختلف تنفيذ برامج CGI على المزود البعيد، عن طلب إرسال معلومات بلغة HTML الوصفية منه، ولا تسمح معظم المزودات البعيدة التي توفر المواقع المجانية بتشغيل برامج بلغة CGI خاصة بالمستخدم، لأنه أمر خطر على أمنها، ولأنه يتيح للمستخدم إمكانية التحكم بعملها، إلا أنه توجد مواقع توفر خدمة تنفيذ برنامج عدادات CGI على مزوداتها الخاصة، لعد زوار مواقع أخرى مجاناً. يتوفر في الموقع http://webcom.net/~klg/counters.html، والموقع http://webcom.net/~klg/counters.html عشرات الارتباطات المتعلقة بمواقع العدادات. ويختلف أسلوب استخدام كل منها، فبعضها يحتاج إلى إضافة بعض السطور بلغة HTML فقط، لتشغيل برنامج العداد، وأخرى يمكن نسخها ولصقها في الصفحة المعنية، ولا يمكن لذلك تقديم طريقة عامة تصلح لكل الجهات التي توفر تلك الخدمة. وسنكتفي بأن نورد مثالاً عن أحد العدادات المتوفرة مجاناً. اخترنا أن نستخدم العداد الذي يوفره الموقع http://counters.qpt.com، الذي يطلب منك تسجيل حسابك المجاني، بإدخال عنوان موقعك، وعنوان بريدك الإلكتروني، فيرسل إلى صندوق بريدك الإلكتروني رقم الحساب، وكلمة المرور، ومقطعاً من شيفرة HTML يجب أن تنسخها إلى الملف الذي ترغب أن تضع فيه العداد (وهو الملف index.htm في هذه الحالة). أظهرنا نص HTML لملف index.htm، باختيار View/HTML من قائمة برنامج Frontpage Express، ونسخنا مقطع شيفرة HTML من الرسالة الإلكترونية التي وصلتنا إلى نهاية شيفرة HTML لملف الصفحة الرئيسية، وقبل الواصفتين </body>، و</html>، أغلقنا نافذة تحرير HTML بالنقر على OK، فظهر العداد على الصفحة، فأزحناه ووسطناه في المكان المناسب. تسمح الجهة صاحبة الخدمة باختيار شكل العداد، وإعداده عبر طريقة خاصة بها مشروحة في الموقع.

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

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

جدول 1 (الأرضيات الرسومية، الأزرار، الصور المتحركة)

www.ecn.bgu.edu/users/gas52r0/Jay

www.mangus.com

www.bellsnwhistles.com

www.ender-design.com/rg

members.aol.com/dcreelma/imagesite

www.netscape.com/assist/net_sites/bg/backgrounds.html

www.chenowith.wasco.k12.or.us/tech/design/buttons.html

www.innova.net/~goob/bits27.html

web.online-graphics.net

www.free-graphics.com

www.coolarchive.com

www.silverpoint.com/leo/lia

www.animationzone.com

www.fortunecity.com/boozers/dragon/28/

www.geocities.com/CollegePark/2883/

http://dome.communitech.net

www.webwider.com/syzone/

تأليف صفحات ويب

الجزء الثالث

هل تابعت الجزءين الأول والثاني من هذه السلسلة، ونفذت الخطوات التي أوردناها في المقالين السابقين؟!

هل قلت: نعم؟!

أصبحت إذاً مستعداً للابتعاد قليلاً عن الشاطئ، والغوص معي عبر هذا المقال!

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

هيا سنبدأ الإبحار فوراً!

الجداول

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

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

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

موافق!

إليك خطوات العمل:

افتح ملف صفحة وصلات المواقع المفضلة myfavoritepg.htm، مستخدماً برنامج FrontPage Express.

انتقل إلى نهاية الصفحة، ثم اختر من قائمة Table، الأمر Insert Table، فيظهر صندوق حوار يطلب عدد الصفوف والأعمدة، ضمن إطار Size، وهيئة الجدول، ضمن إطار Layout، وعرض الجدول، ضمن إطار Width.

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

اختر من إطار Layout، ومن لائحة Column Order، الاتجاه RTL (من اليمين لليسار)، وهو اتجاه الانتقال من حقل إلى آخر، عند الضغط على الزر Tab أثناء إدخال المعلومات في الجدول، بالإضافة إلى أنه يضبط ضمنياً، المحاذاة إلى اليمين داخل خلايا الجدول، وهي المحاذاة الطبيعية في الصفحات العربية.

اختر محاذاة الجدول، في وسط الصفحة، من الإطار Layout، ومن لائحة Alignment.

غير عرض حواف الجدول الخارجية، إلى قيمة 2 بكسل، من مستطيل الإدخال Border Size، وضمن إطار Layout أيضاً. إذا أبقيت على قيمة عرض الحواف صفراً، فلن تظهر الحواف الخارجية، أو الحواف الداخلية، عند إظهار الجدول باستخدام المتصفح.

عين قيمة بطانة الخلية (Cell Padding)، وتباعد الخلايا (Cell Spacing) بحيث تساوي واحد، حيث تحدد قيمة بطانة الخلية بالبكسل بعد حواف خلية الجدول داخلاً عن محتوياتها من جميع الأطراف، بينما تحدد قيمة تباعد الخلايا المسافة بين حافة الخلية والخلية التي تجاورها بالاتجاه الأفقي أو الشاقولي، بالبكسل أيضاً.

تحدد محتويات الإطار Width عرض الجدول، وذلك حين النقر على مربع الاختيار Specify Width. يمكن عندها تعيين عرض الجدول كنسبة مئوية من الصفحة، عند اختيار in Percent، أو كقيمة محددة بالبكسل عند اختيار in Pixels. اختر in Percent، ثم أدخل قيمة 90 في مستطيل الإدخال، فيكون عرض الجدول المطلوب 90% من عرض الصفحة بغض النظر عن الكثافة النقطية المستخدمة في الإظهار.

انقر زر Ok، فيظهر FrontPage Express الجدول بالهيئة والمحاذاة التي حددتها. لاحظ أنه يمكن التنقل بين خلايا الجدول بالضغط على زر Tab، كما يحدث في برنامج وورد عادة.

إذا لم يعجبك شكل الجدول الظاهر أو أبعاده، يمكن أن تنقر بالزر الأيمن للماوس داخل الجدول وتختار Table Properties… (خواص الجدول)، فيظهر صندوق حوار يسمح بإجراء التغييرات التي تريدها في هيئة الجدول، أو عرضه، أو محاذاته، بالإضافة إلى أنه يوفر إمكانية تغيير لون أرضيته من داخل الإطار Custom Background، إذ يمكن اختيار اللون من لائحة Background Color. يمكن من خلال صندوق حوار خصائص الجدول تعيين صورة خلفية له، باختيار Use Background Image ثم إدخال اسم ملف الصورة، الذي يجب أن يكون من هيئة GIF أو JPG. إذا كانت أبعاد الصورة الخلفية أصغر من أبعاد الجدول، فإنها تتكرر حتى تملأ كامل أرضيته، أما إذا كانت أبعادها أكبر منه، فيظهر الجزء العلوي منها فقط، بمساحة تساوي مساحة الجدول. لاحظ أنه عند استخدام صورة خلفية فإنها تطغى على اللون المعين للأرضية. ويجب، عند تعيين صورة خلفية للجدول، إرسال ملف الصورة إلى المزود الذي يستضيف الصفحة التي تتضمن الجدول المعني. انتبه عند اختيار صورة خلفية، أن لا تعيق ألوانها وخطوطها قراءة النصوص الموجودة في خلايا الجدول. وينطبق الأمر ذاته عند اختيار لون أرضية للجدول، إذ يجب أن يكون لوناً يسهل تمييز النص الذي يتضمنه، بسهولة.

يمكنك تعيين ألوان حواف الجدول من ضمن إطار Custom Colors، وذلك باختيار اللون من قائمةBorder: ، أو اختيار لوني الظل الخفيف، والداكن من قائمتي Light Border وDark Border.

ضع المشيرة داخل الجدول، ثم اختر من قائمة Table الأمر Insert Caption لإدراج عنوان للجدول، ثم أدخل العنوان "جدول المواقع المفضلة" في تلك الخلية الجديدة التي أدرجت. إذا نقرت بالزر الأيمن للماوس داخل خلية عنوان الجدول، يمكنك إظهار خصائصها بأمر Caption Properties، ثم تحديد موقعها أعلى أو أسفل الجدول، بالخيارين Top of Table أو Bottom of Table.

أدخل عناوين أعمدة الجدول في الخلية الأولى من كل عمود… أدخل مثلاً "عنوان الموقع"، و"المحتويات"، و"التقييم".

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

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

ليس هذا كل ما يمكن أن تفعله بالجداول، إذ لا تكتفي لغة HTML بتوفير إمكانية عرض الجداول على صفحات ويب، بل تضيف إلى ذلك إمكانية دمج خليتين متجاورتين، أو تقسيم خلية معينة إلى خليتين. ويخفي برنامج FrontPage Express تفاصيل ذلك عبر أمري Merge Cells و Split Cells، في قائمة Table، بشكل يشبه التعامل الجداول في محرر النصوص وورد. تسمح لغة HTML أيضاً، بتحديد مواصفات أية خلية من خلايا الجدول، وهذا ما يعكسه برنامج FrontPage Express من خلال صندوق حوار خصائص الخلية، الذي يظهر عند نقل المشيرة إلى خلية معينة، واختيار Cell Properties من قائمة Table، أو من القائمة المنبثقة التي تظهر عند النقر بالزر الأيمن ضمن الخلية. يتضمن صندوق حوار خصائص الخلية إمكانية تحديد لون أو صورة الأرضية، في إطار Custom Background، ولون الحواف في إطار Custom Color، بالإضافة إلى إمكانية اختيار محاذاة المعلومات داخلها في إطار Layout، واختيار عرضها الأدنى في إطار Minimum Width.

ويتيح برنامج FrontPage Express تغيير خصائص جميع الخلايا التي تخص صفاً أو عموداً في جدول، باختيار Select Row أو Select Column، ثم اختيار Cell Properties. جرب، مثلاً، أن تغير لون خلايا الصف الأول، من الجدول الموجود في ملف المواقع المفضلة.

يمكنك الآن إرسال الملف إلى المزود الذي يستضيف صفحاتك، ثم التأكد من أن النقر على زر "المواقع المفضلة" في الصفحة الرئيسية يؤدي إلى ظهوره، لكن لا تنس أن تعين لها ملف الصورة الأرضية، والعنوان، وأن تضيف إليها زر العودة إلى الصفحة الرئيسية.

الجداول أيضاً:

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

لنفرض أنك ترغب بعرض صورتك على الصفحة الرئيسية، بجانب نص ترحيبي. يمكن، كي تنفذ ذلك بسهولة، أن تدرج جدولاً يتضمن صفاً واحداً، وعمودين، وتضبط عرض حواف الجدول ( Border Size) على القيمة صفر، أي بدون حواف مرئية، ثم تدخل النص الترحيبي الذي تريده في الخلية اليمنى، وتضع المشيرة في الخلية اليسرى، وتدرج فيها الصورة المرغوب، ثم تضبط قيمة عرض كل من الخليتين Minimum Width، (من خصائص كل خلية)، بحيث تجعل خلية النص أكبر من خلية الصورة، (70% للخلية اليمنى، 30% للخلية اليسرى، مثلاً) يجب أخيراً، كالعادة، حفظ الملف الناتج وإرساله مع ملف الصورة إلى المزود الذي يستضيف صفحتك، فتظهر الصفحة الرئيسية في المتصفح بهيئة تشبه الشكل 1.

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

ابدأ العمل بأن تنشئ ملفاً جديداً من نوع htm، باستخدام برنامج FrontPage Express، وسمه myGalleryPg.htm، مثلاً، ثم أنشئ فيه جدولاً يتضمن عدداً من الخلايا مساوياً لعدد مصغرات الصور التي تريد إظهارها، وبترتيب مناسب لأشكال صورك، ثم أدرج في كل خلية صورة مختلفة، وصغر كل صورة إلى الأبعاد التي ترغبها بنقر الصورة، ثم اسحب وأفلت أحد مربعات التحكم، التي تظهر على زواياها الأربع في البرنامج. انقر بالزر الأيمن للماوس على كل صورة، ثم اختر خصائصها Image Properties، وأدخل في صندوق الحوار الظاهر، وضمن الإطار Default Hyperlink، وفي مستطيل النص Location، عنوان موقعك، مضافاً إليه اسم ملف الصورة ذاتها، (يبدو ذلك بالنسبة للصفحة التي أنشأناها في المقال السابق http://members.tripod.com/Shahem/Picture1.jpg، حيث Picture1.jpg اسم ملف الصورة مثلاً). أرسل ملف myGalleryPg.htm وملفات الصور إلى المزود البعيد الذي يستضيف صفحتك، ثم أنشئ زراً مرتبطاً به على ملف الصفحة الرئيسية واحفظه، ثم أرسله إلى المزود البعيد. انتقل إلى تلك الصفحة الجديدة واختبر النتيجة.

سجل الزوار (Guest Book)

تحتوي كثير من مواقع إنترنت سجلاً للزوار، وهو المكافئ الإنترنتي (ما رأيكم بهذا الاشتقاق؟!) لسجل الزوار، الذي تجده عادة في المتاحف أو المعارض، والذي يستطيع الزائر من خلاله، إبداء رأيه وملاحظاته في ما شاهده، أو يطلع على أراء من سبقه من الزوار. يتم إدخال التعليقات في السجل عادة، عبر صفحة تتضمن عدداً من مستطيلات الإدخال، أهمها مستطيل لإدخال اسم الزائر، وآخر لإدخال التعليق ذاته. وتتوفر، عادة، أيضاً، إمكانية عرض التعليقات السابقة حسب تسلسل ورودها. يحتاج إنشاء سجل للزوار إلى معرفة بلغة CGI، التي لا يعرفها معظم المبتدئين في هذا المجال، بالإضافة إلى توفر صلاحيات لدخول دليل CGI، وتنفيذ المزود الذي يستضيف الموقع للبرامج المكتوبة بها، وهذا مالا تسمح به الجهات التي تستضيف الصفحات المجانية. لكن، يمكن على الرغم من هذا، أن تضيف سجلاً للزوار إلى صفحتك، إذ تستضيف كثير من الجهات سجلات زوار مجانية لمن يرغب، بالأسلوب الذي تتوفر فيه الصفحات المجانية، حيث يجب الاشتراك أولاً، لدى الموقع الموفر للخدمة، عبر ملء نموذج تسجيل، يطلب عنوان البريد الإلكتروني، وعنوان الموقع الذي ترغب بإضافة سجل زوار إليه، ثم يرسل مقطعاً من الشيفرة بلغة HTML، تكفي إضافته إلى صفحتك الرئيسية، عبر فتح نافذة View/HTML ونسخ نص الشيفرة في نهاية النص وقبل إغلاق الواصفة body، ليظهر وصلتين: إحداهما لصفحة إدخال التعليق، والأخرى لصفحة عرض التعليقات السابقة.

سجلت في الموقع www.GuestWorld.com، فأرسل لي الشيفرة التالية:

<center><a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbsign.dbm?owner=Shahem">Sign My Guestbook</a>

href="http://GuestWorld.Tripod.Lycos.com"><img src="http://GuestWorld.Tripod.Lycos.com/gif/GuestWorldbutton.gif" height="31" width="87" alt="Guestbook by GuestWorld"></a>

<a href="http://titan.guestworld.tripod.lycos.com/wgb/wgbview.dbm?owner=Shahem">View My Guestbook</a>

</center>

لاحظ أنها تتضمن وصلةً لصفحة إدخال التعليق قبل عبارة Sign My Guestbook، ووصلة لصفحة عرض التعليقات قبل عبارة View My Guestbook. غيرت هاتين العبارتين بترجمتهما العربية ونسخت نص الشيفرة إلى شيفرة HTML للصفحة الرئيسية، ضمن نافذة View/HTML في برنامج FrontPage Express. يمكنك، بدلاً من ذلك، استبدال الوصلتين النصيتين بزرين أو صورتين متحركتين، مرتبطتين بالصفحتين ذاتهما.

زر الموقع http://home1.swipnet.se/~w-10344/ للوصول إلى جداول وصلات بعناوين عدد من المواقع التي توفر سجلات الزوار المجانية، والمواقع التي تستضيف الصفحات المجانية، والكثير من الوصلات المفيدة الأخرى.

إبرة في كومة قش!

هذه حال صفحتك في شبكة إنترنت، فكيف تجعل متصفحي إنترنت يجدونها أو يتعرفون عليها؟!

يستخدم معظم متصفحي إنترنت مواقع البحث، للوصول إلى المعلومات التي يريدونها، كموقع ألتافيستا أو ياهو، التي تفهرس باستمرار محتويات صفحات إنترنت المختلفة، لكنها لا تفعل ذلك إلا إذا أُخبرت بوجود تلك الصفحات، حيث تسمح لأصحاب المواقع الجديدة بأن يرسلوا عناوينها إلى مواقع البحث، كي تفهرس آلات البحث (Search Engine) محتوياتها خلال فترة تتراوح بين يوم أو عدة أيام. أرسلت عنوان الصفحة الشخصية التي أنشأتها إلى آلة بحث موقع ألتافيستا www.altavista.digital.com، بالنقر على الوصلة Add a Page ، الموجودة أسفل الصفحة الرئيسية فيه، فانتقلت إلى صفحة أخرى، أدخلت فيها عنوان URL لصفحتي الشخصية في المستطيل المخصص لذلك، ونقرت على زر Submit URL، فأظهر التقرير المبين في (الشكل 2) وأن صفحتي ستفهرس خلال يوم أو يومين.

إذا أردت أن تضيف لصفحاتك كلمات مفتاح (Keywords) بحيث يؤدي البحث عنها إلى ظهور عنوان صفحتك في نتائج البحث، يمكنك أن تدرج في صفحاتك ما يسمى

التعليقات Comments، وهي كلمات أو عبارات تضيفها على الصفحة لكن المتصفح يتجاهل عرضها. لإدراج تعليق باستخدام برنامج FrontPage Express، انقر Insert/Commnet وأدخل الكلمات المفتاحية في لصندوق الحوار الظاهر.

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

يمكنك من خلال الموقع www.liquidimaging.com/submit إضافة عنوان صفحتك إلى العديد من آلات البحث والأدلة، كألتافيستا، وAOL NetFind، وExite، وGoto.com، وHotBot وغيرها.

عودة إلى الشاطئ!

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

لم ينته هذا الموضوع من جهتنا، وسنتابع الاهتمام به وتقديمه على صفحات مجلتنا في الأعداد المقبلة، لكن من زوايا أخرى. نود أخيراً، أن نشجعكم على تأليف صفحاتكم باللغة العربية بشكل خاص، لزيادة محتويات الشبكة من الصفحات العربية، ولا بأس أن ترافقها اللغة الإنجليزية أو غيرها، إذا كنتم ترغبون بتوجيه صفحاتكم إلى جميع متصفحي إنترنت. نذكركم أننا ننشر في كل عدد عرضاً لبعض الصفحات الشخصية الغنية بالمحتويات والحسنة التصميم، أدعوكم للاطلاع عليها، وإذا أنشأتم صفحات شخصية مميزة، أرجو أن ترسلوا عناوينها إلى زميلنا ماهر الجنيدي (maher@ditnet.co.ae)، ليشملها في مقالاته المقبلة.

صفحات جديدة

إذا ساعدتكم هذه السلسلة من المقالات في إنشاء صفحات خاصة بكم على شبكة ويب أرجو أن ترسلوا لي عناوينها إلى بريدي الإلكتروني shahem@ditnet.co.ae، لكي ننشرها ضمن المقالات المقبلة.

وصلنا إلى الآن عنوان القارئين مصطفى ياسين http://members.tripod.com/myassin، وطالب المقبالي http://www.geocities.com/TelevisionCity/Studio/2220/K اللذان أنشئا صفحتاهما بالاستعانة بالجزءين السابقين من هذه السلسلة.

النماذج في صفحات ويب

وصلت إلى محطتنا التعليمية لهذا الشهر، أهلاً وسهلاً، نحمد الله على سلامتك!

فنجان قهوة؟!

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

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

لنبدأ جولتنا إذاً، بعد استراحة فنجان القهوة هذه، فهيا بنا..

إنشاء نموذج

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

خمِّن، ما هي الواصفة (tag) التي تسمح بإدراج نموذج في صفحة HTML؟

هل تريد ثلاثة خيارات؟!

إنها كما تتوقع الواصفة <FORM>، والتي تقع داخلها جميع سمات النموذج المطلوب.

تتضمن واصفة النموذج <FORM> سمتان (Attribute)، هما: method، وaction، وتأخذ السمة method إحدى قيمتان هما: get، وpost، بينما تأخذ السمة action قيمة عنوان الموقع الذي يوجد فيه النص البرمجي الذي يعالج المعلومات التي يتلقاها من المزود. مثال ذلك الجزء التالي من شيفرة HTML، لنموذج استمارة الدراسة المسحية لاستخدام إنترنت في البلدان العربية، الموجودة على العنوان (http://www.iawmag/survey/inetuses/survey.html):

…

</FORM>

تحدد السمة method، أسلوب إرسال المعلومات إلى المزود (server). فعند اختيار القيمة get لها، فإن بيانات النموذج ترسل مع عنوان URL المبين في سمة action، إلى المزود، الذي يحفظها في متغير خاص بنظام تشغيله. أما القيمة post للسمة method، فتسمح للمتصفح إرسال بيانات النموذج للمزود بشكل منفصل عن عنوان URL، فيحفظها في أحد أجهزة الدخل القياسية فيه، (كملف مؤقت، مثلاً)، وهذا الأسلوب مفضل لأنه أسرع، ويسمح بإرسال مقدار أكبر من البيانات، لا يتعلق حجمها بسعة متغيرات بيئة نظام تشغيل المزود. تبين قيمة السمة action، في المثال أعلاه، أن ملف النص البرمجي الذي يجب أن ينفذ عند إرسال النموذج للمزود، هو formmailnt3.pl، وموجود في الموقع http://www.ditnet.co.ae/cgi-bin/.

يجب أن يتضمن النموذج، عنصر إدخال واحد على الأقل، وأنواع عناصر الإدخال للنماذج هي: مستطيلات النص Text box، وأزرار الخيارات Option buttons، ومربعات الاختيار Check box، بالإضافة إلى أنواع أخرى من العناصر، كاللوائح List boxs، والقوائم المنسدلة Drop-down lists، ومنطقة النص Text area، وزر إرسال بيانات النموذج Submit. ويتم إنشاؤها باستخدام مجموعة من الواصفات سنبينها في بقية جولتنا.

عناصر الإدخال

تشترك جميع عناصر الإدخال التي ذكرناها آنفاً، بأنها تبدأ بالواصفة <INPUT>، تليها سمة Type، التي تحدد نوع عنصر الإدخال، الذي يمكن أن يكون مستطيل نص، أو زر خيار، أو مربع اختيار. يلي ذلك السمة name التي تحدد اسم عنصر الإدخال، ثم سمات أخرى تحدد صفاته، كما في المثال التالي:

حيث تحدد القيمة "text"، لسمة type، أن عنصر الإدخال، مستطيل نص، فيما تعين قيمة السمة name، اسم المتغير الذي سيرسل إلى المزود، مع محتويات مستطيل النص، لكي يتعرف برنامج CGI على محتويات هذا المستطيل، وينفذ المعالجة المطلوبة، وينصح باستخدام أسماء ذات معنى (أي غير A1، A2،…، مثلاً) ليصبح التعرف على الهدف من وجود عنصر الإدخال سهلاً أثناء كتابة شيفرة HTML، وأثناء كتابة برنامج معالجة البيانات بلغة CGI، لاحقاً. إذا غيرت قيمة السمة type إلى radio ستحصل إلى زر خيار، بينما يؤدي تغيير قيمتها إلى checkbox، إلى الحصول على مربع اختيار.

لا يمكن استخدام الواصفة <INPUT> بمفردها، إذ لابد أن توجد بين دفتي الواصفة <FORM>. والمثال التالي يوضح ذلك: لنفرض أن لدينا ملفاً باسم hellouser.pl يتضمن برنامجاً بلغة CGI، في الموقع (http://www.ditnet.co.ae/cgi-bin). ولنفرض أن هذا البرنامج يتلقى، اسم المستخدم من نموذج معين، عبر قيمة المتغير username، ثم يرسل إليه رسالة ترحيبية تتضمن اسمه، وعليه فإن شيفرة HTML لصفحة النموذج المطلوب، ستكون بالشكل التالي:

<head>

<head>

</form>

</body>

</html>

وستظهر صفحة النموذج في متصفح إنترنت إكسبلورر 4.0، كما في الشكل 1.

لاحظ كيف يمكنك إضافة نص قبل مستطيل الإدخال، لتبين للمستخدم القيمة المطلوبة. يعين المتصفح عرض مستطيل النص بقيمة افتراضية تساوي عرض عشرين حرفاً، إذا لم تحدد عرضه باستخدام سمة size، كما في المثال التالي:

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

ويؤدي إدخال أكثر من أحد عشر حرفاً، إلى انزلاق سلسلة الحروف، لتظهر الحروف المدخلة الأحدث، فالأحدث.

يلحق بمستطيل النص نوع خاص منه، يستعمل لإدخال كلمات المرور (passwords)، ولا يظهر الحروف أثناء الإدخال على نافذة المتصفح، ويظهر حرف النجمة "*"، بدلاً عنها، لمنع المتطفلين من اختلاس النظر إليها، ويتم اختيار مستطيل كلمة المرور، بتعيين القيمة password للسمة Type، كما في المثال التالي:

وتعمل السمتان size وmaxlength بالطريقة ذاتها مع مستطيل كلمة المرور.

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

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

<P>اختر الحالة العائلية<BR>

<INPUT type="radio" name="family_status" value="married">متزوج<BR>

</P>

وتظهر نتيجة المثال السابق في الشكل 2. لاحظ القيمة radio للسمة type التي تطلب من المتصفح إظهار أزرار خيارات، ولاحظ أن لاسم جميع تلك الأزرار قيمة واحدة، وهذا ليس خطأ مطبعياً، بل يدل على أنها تنتمي لمجموعة أزرار خيارات واحدة. والسمة الجديدة التي تلاحظون استخدامها في المثال السابق، هي value، وتمثل قيم أزرار الخيارات، التي ستمرر واحدة منها إلى برنامج CGI في المزود، عند إرسال النموذج إليه، إذ لا تسمح أزرار الخيارات سوى باختيار واحداً منها، ويتم تحديد الخيار الافتراضي منها، بإضافة سمة checked، إلى سطر الخيار المطلوب، فإذا أردنا جعل "عازب" الخيار الافتراضي، يجب تغيير سطره ليصبح بالشكل التالي:

إذا احتجت إلى تمكين المستخدم من اختيار عدة خيارات في الوقت ذاته، فلا بد إذا أن تستخدم مربعات الاختيار، فإذا أردت أن تستعلم عن لغات البرمجة التي يجيدها المستخدم، مثلاً، يمكنك استخدام الشيفرة التالية، ضمن بداية ونهاية واصفة <FORM>:

<P>ما هي لغات البرمجة التي تجيدها؟<BR>

<INPUT type="checkbox" name="prog_lang" value="pascal">باسكال<BR>

<INPUT type="checkbox" name="prog_lang" value="cobol">كوبول<BR>

</P>

وكما تلاحظ فهي لا تختلف عن أزرار الخيارات، إلا باختيار النوع checkbox، وأنه عند إرسال النموذج فإنه يمرر لبرنامج CGI في المزود، جميع قيم value التي اختارها المستخدم. ويمكن تحديد أكثر من قيمة افتراضية لمربعات الاختيار، باستخدام السمة checked أيضاً، كما في المثال التالي:

<P>ما هي لغات البرمجة التي تجيدها؟<BR>

<INPUT type="checkbox" name="prog_lang" value="pascal" checked >باسكال<BR>

<INPUT type="checkbox" name="prog_lang" value="cobol">كوبول<BR>

</P>

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

يتمثل الحل في لوائح List box، والقوائم المنسدلة Drop-down list، التي تسمح بزلق مجموعة كبيرة من الخيارات ضمن مساحة صغيرة، على واجهة المتصفح.

اللوائح والقوائم المسندلة

يجب لإنشاء اللوائح والقوائم المنسدلة في نموذج، استخدام واصفتين جديدتين، غير ما عرضناه حتى الآن، هما الواصفتان <SELECT>، و<OPTION>، وسنبين أولاً كيفية إنشاء قائمة منسدلة، بانتقالنا إلى المثال "العبِق"! التالي: لنفرض أنك تريد من المستخدم أن يختار نوعاً من قائمة تتضمن عشرين من أسماء الزهور، فسيكون نص HTML الذي يظهر تلك القائمة ضمن نموذج كما يلي:

<P>اختر زهرتك؟<BR>

<OPTION>ياسمين

<OPTION>نسرين

<OPTION>فل

<OPTION>بنفسج

<OPTION>أقحوان

<OPTION>خزامى

….

</SELECT>

</P>

(لا يظهر النص السابق كامل الشيفرة المطلوبة). لاحظ الشكل 3 الذي يظهر تنفيذ هذه الشيفرة، ولاحظ كيف تعمل الواصفة <SELECT> كوعاء يتضمن خيارات القائمة التي تسبقها الواصفة <OPTION>. يجب تسمية القائمة بواسطة قيمة السمة name، وهو الاسم الذي يرسل مع القيمة التي اختارها المستخدم إلى برنامج CGI في المزود، عند إرسال النموذج. لا حاجة، كما تلاحظ، لاستخدام سمات أخرى لتحديد قيمة كل خيار، لكن لغة HTML تسمح بإضافة السمة value للواصفة OPTION، كما في الشكل التالي، مثلاً:

<P>اختر زهرتك؟<BR>

<OPTION value="0">ياسمين

<OPTION value="1">نسرين

<OPTION value="2">فل

<OPTION value="3">بنفسج

<OPTION value="4">أقحوان

<OPTION value="5">خزامى

….

</SELECT>

</P>

فإذا اختار المستخدم زهر النسرين، فإن المتصفح سيرسل إلى برنامج CGI في المزود قيمة flowers=1، بدلاً من أن يرسل "نسرينflowers="، وإذا اختار زهر الخزامى، فسيرسل القيمة flowers=5، بدلاً من "خزامىflowers="، وهكذا، ولن يغير هذا في الأمر شيئاً بالنسبة للمتصفح، لكنه ربما يكون مفيداً أحياناً، بالنسبة لكتابة برنامج CGI بطريقة أسهل.

يكفي للحصول على لائحة بطول أربعة سطور، قابلة للزلق، لكنها تتضمن أسماء الزهور ذاتها، المذكورة في المثال السابق، بدلاً من القائمة المنسدلة، أن ننفذ قليلاً من "السحر"!

أبرا كادابرا !

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

وانظر النتيجة في الشكل رقم 4.

إذ يكفي أن تضيف السمة size إلى بداية واصفة <SELECT>، مع تعيين قيمتها، بالشكل التالي:

<P>اختر زهرتك؟<BR>

<OPTION >ياسمين

<OPTION >نسرين

<OPTION >فل

<OPTION >بنفسج

<OPTION >أقحوان

<OPTION >خزامى

….

</SELECT>

</P>

فتحصل على اللائحة المطلوبة، حيث تحدد قيمة السمة size، عدد أسطر تلك اللائحة.

أليس السحر سهلاً!

بقي أمران يجدر ذكرهما في هذا المقام، الأول أنه يمكن أن تسمح للمستخدم أن يختار أكثر من قيمة من اللائحة، بإضافة السمة multiple إلى الواصفة <SELECT> كما في:

…

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

<OPTION selected > نسرين

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

منطقة النص Text area

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

<TEXTAREA name="comments" rows=6 cols=50>أدخل تعليقك هنا:</TEXTAREA>

وكما هو واضح، من خلال ما تعلمته سابقاً، فإن السمة name تعين اسم منطقة النص التي تدل برنامج CGI، على المحتويات التي يتلقاها من تلك المنطقة. أما السمتان rows، وcols، فتعينان عدد أسطر وأعمدة منطقة النص. لاحظ أخيراً كيف يمكنك أن تضيف جملة توضيحية داخل منطقة النص، بإدخالها قبل علامة إغلاق الواصفة <TEXTAREA>.

ربما تتساءل الآن، حسناً، حسناً … كل هذا جيد، ولكن، كيف سيخبر المستخدم، المتصفح بأنه يريد أن يرسل المعلومات التي أدخلها؟

وماذا يفعل المستخدم إذا اكتشف أنه ارتكب عدة أخطاء في الإدخال، ويرغب في إلغاء جميع المعلومات التي أدخلها؟

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

قاتل الله التسرع، لا ليس كذلك!

فلتنفيذ ذلك، سنعود إلى صديقتنا القديمة الواصفة <INPUT>!

هل يفاجئك هذا؟!

زري الإرسال، وإعادة التعيين

أضف إلى قائمة القيم التي يمكن أن تأخذها السمة Type للواصفة <INPUT> القيمتين: submit، وreset. تنشئ الأولى زر إرسال للنموذج، وتنشئ الثانية زر إلغاء لجميع المعلومات المدخلة. أما جملتا HTML المطلوبتان لتنفيذ ذلك، فهما:

يبين الشكل 6، الزرين المذكورين، في إنترنت إكسبلورر 4.0 العربي، ويمكن تغيير الكلمتين الافتراضيتين الظاهرتين على الزرين، باستخدام سمة value التي نعرفها سابقاً، لكنها تستخدم في هذه الحالة لتعيين قيمة مختلفة نسبياً عن ما عهدنا منها سابقاً. لاحظ كيف يظهر نص شيفرة HTML التالي، الزرين المبينين في الشكل 7:

إلى اللقاء

أنهينا جولتنا في محطة هذا الشهر، وأصبح بإمكانك أن تنشئ النماذج بالشكل الذي تريده، وقبل أن نتركك، ندعوك لمشاهدة شيفرة صفحة النموذج الموجود في العنوان http://www.iawmag.com/survey/inetuses/survey.html، باختيار قائمة "عرض"، ثم "المصدر" في إنترنت إكسبلورر، فهو مثال ضخم يجمع بين كل ما تطرقنا إليه، ويجعل الموضوع أكثر وضوحاً بالنسبة لك.

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

الإطارات في صفحات ويب

مهلاً!

لا تظن أنني سأتحدث عن إطارات السيارات! فلست من أهل الاختصاص في هذا المجال، ولا أعتقد أنها تناسب اختصاص مجلتنا أيضاً!

أفضل، من جهتي، أن أطلق على إطارات السيارات كلمة: عجلات، أو دواليب، حتى لا يحصل هذا الالتباس مع ما سأبحثه في هذا المقالة وهو: كيفية إنشاء الإطارات في صفحات ويب باستخدام لغة HTML، حيث تقابل كلمة الإطارات هنا، الكلمة الإنجليزية Frames. لكن، ربما يعترض أحدكم قائلاً: وأن جمع إطار، هو أطر. إلا أنني آثرت استخدام كلمة إطارات، لارتباط الأولى، عند البعض، باستخدامات ليست واردة في هذا المقام. أما لماذا تُرجِمَت كلمة Wheel (عجلة السيارة) إلى إطار، فذلك أمر لا أعرفه، وربما يعود إلى أن الترجمة تمت في الأصل من لغة أخرى غير الإنجليزية! فإذا كان لديكم تفسير آخر… أفيدونا!

ما هي إذاً، إطارات صفحات ويب؟

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

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

تتوفر بعض برامج تأليف صفحات ويب التي تسمح بإنشاء الإطارات بطريقة WYSIWYG، (انظر الموقع http://www.tips-tricks.com/web_tools.html، الذي يعرض لائحة وصلات بأهم المواقع التي توفر تلك البرامج)، أو بواسطة ويزاردات تمضي بك عبر سلسلة من الخطوات، لإنشاء الإطارات المطلوبة، إلا أننا فضلنا شرح كيفية إنشائها بلغة HTML، لتوفر أدوات التعامل معها عند أي من مستخدمي الحواسيب. وهي لا تزيد على أنها محرر نصوص بسيط ومتصفح، إلا أننا ننصح باستخدام أحد برامج تحرير لغة HTML المجانية أو المشتركة، التي يمكن استجلابها من شبكة إنترنت، أو تركيبها من الأقراص المدمجة، المرفقة بأعداد المجلة.

هيكل صفحة ويب بلغة HTML:

إذا كنت من الذين لم يعتمدوا على تحرير نصوص لغة HTML لتأليف صفحاتهم، فلا بأس في ذلك، لكن ربما حان الوقت لتتعلم شيئاً عن تلك اللغة. وأفضل منهج، في رأينا، للتعامل مع مسألة تأليف صفحات ويب، هو الاعتماد على تأليف الصفحات بأسلوب WYSIWYG الذي توفره بعض البرامج (كبرنامج FrontPage Express المجاني، المتوفر مع رزمة برنامج إنترنت إكسبلورر 4.0، والذي استخدمناه في سلسلة المقالات عن تأليف صفحات ويب، التي نشرناها في الأعداد الثلاثة السابقة)، بالإضافة إلى التدخل "الجراحي" لتعديل أو إضافة بعض المقاطع بلغة HTML على النص الذي يولده برنامج تأليف صفحات ويب المستخدم. ولكي تفعل ذلك، يكفي أن تكون ملماً بالشكل العام لهيكل ملف صفحة ويب، مع فهم المنطق الذي تستند عليه تلك اللغة. تتألف لغة HTML من واصفات (tags)، لها الشكل العام التالي:

</tag>بيانات<tag>

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

تسمح لغة HTML أن تتضمن الواصفات بعضها البعض، بحيث تبدأ الأولى، فالثانية، فالثالثة ثم تغلق الثالثة، فالثانية، فالأولى، كما في الشكل التالي:

<tag1>

.<tag2>

</tag3>بيانات<tag3>

</tag2>

</tag1>

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

<html>

<head>

content="text/html; charset=windows-1256">

<title>Untitled Normal Page</title>

</head>

</body>

</html>

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

<html>

<head>

<title>Untitled Normal Page</title>

</head>

<body

</body>

</html>

فإننا نحصل على الهيكل الأساسي لجميع صفحات ويب، والذي نستطيع أن نميز فيه الواصفات <html>…</html>، و<head>…</head>، و<title>…</title>، و<body>…<\body>. لكن، لن ندخل في شرح الهدف من كل منها، وسنكتفي بالإشارة إلى الواصفة <body>، لنقول أنها تحصر جسم الصفحة، وهي الجزء الذي سنغير فيه، خلال خطواتنا المقبلة.

قصة إطارين!

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

هل أعجبتكم القصة؟!

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

يمكنك استخدام أي ملفي HTML متوفرين، ليظهرا ضمن الإطارين المعنيين، أو يمكنك إنشاؤهما إما باستخدام محرر صفحات ويب المتوفر لديك، أو بأي محرر نصوص بسيط، مثل "المفكرة" (Notepad)، لأن هيئة ملفات HTML نصية أصلاً. سأستخدم خلال المثال ملفين تجريبيين، يظهر أحدهما عبارة "الصفحة الأولى"، حفظته على القرص الصلب باسم file1.htm، ويظهر الملف الثاني عبارة "الصفحة الثانية"، حفظته باسم file2.htm. أما الملف الذي سيظهرهما يقتسمان الصفحة بالتساوي، فهو يتضمن النص التالي:

<html>

<head>

<title>قصة إطارين</title>

</head>

</html>

وهو كما تلاحظون، يتضمن واصفة تعيين مواصفات ومحتويات الإطارات المطلوب إظهارها، والتي تبدأ بـ < frameset cols =”50%,50%”>، حيث تحدد قيمة البارامتر cols، التي تساوي "50%،50%"، أن واجهة المتصفح يجب أن تقسم إلى إطارين عموديين، يحتل كل منهما خمسين بالمئة من عرض الشاشة، ثم يلي ذلك البارامتر < frame src الذي يحدد اسم الملف الذي سيظهر في الإطار الأول، وهو file1.htm، ثم يتكرر البارامتر ذاته مرة أخرى، ليحدد اسم الملف الذي سيظهر في الإطار الثاني، وهو file2.htm.

أدخل النص السابق إلى محرر صفحات ويب الذي تستخدمه، أو أضف إلى نص الصفحة الذي يولده الواصفة frameset، المطبوعة باللون الغامق. ولاحظ أنه لا حاجة في هذه الحالة للواصفة body. احفظ الملف الناتج باسم parent.htm، مثلاً، على الدليل ذاته الذي حفظت فيه الملفين file1، وfile2، ثم افتح الملف parent باستخدام المتصفح لديك، فتشاهد النهاية السعيدة للقصة، كما في (الشكل 1).

بالطول والعرض

إذا كنت استنتجت من المثال السابق، أنه يمكن تقسيم واجهة المتصفح إلى أكثر من إطار عمودي، باستخدام واصفة frameset، مع تعيين عرض كل إطار بنسبة مئوية ضمن البارامتر cols، أهنئك! فاستنتاجك صحيح، لكن تذكر أنه يجب تعيين ملفات HTML الذي ستظهر في تلك الإطارات، بواسطة قيم البارمترات frame src. تقسم واصفة frameset التالية، مثلاً، واجهة المتصفح إلى أربعة إطارات مختلفة العرض، ويظهر في كل منها ملف مختلف (شكل 2) :

السؤال المنطقي التالي، الذي يطرح تلقائياً هو: هل توجد إمكانية لتقسيم واجهة المتصفح إلى إطارات أفقية؟

نعم، بالتأكيد، وبالأسلوب ذاته، إذ يستخدم في هذه الحالة بارامتر rows، بدلاً من cols، كما في المثال التالي:

<frameset rows="10%,20%,70%">
< frame src ="file1.htm">
< frame src ="file2.htm">
< frame src ="file3.htm">
</frameset>

لا بد أنك تقول الآن: هذا جيد! لكنني أريد أن أخلط بين إظهار الإطارات العمودية والأفقية، ولابد من وجود طريقة لكي أفعل ذلك، فما هي؟

أصبت! لكن أسلوب تعيين أبعاد الإطارات والعمودية معاً، يتعلق بترتيب إظهارها، ويحتاج إلى استخدام البارامترين cols وrows معاً، واستخدام واصافتي frameset، إحداهما ضمن الأخرى، أحياناً. لنبين ذلك بمثال عملي: لنفرض أننا نريد إظهار أربعة إطارات: اثنان عموديان، بعرض 10%، و20% واثنان أفقيان، يشغلان الباقي من عرض الشاشة، ويقتسمان ارتفاعها بنسبة 10% و90%. إليك كيف يمكن أن نحدد ذلك:

<frameset cols="10%,20%,70%">
< frame src ="file1.htm">
< frame src ="file2.htm ">
< frameset rows="10%,90%">
< frame src ="file3.htm">
< frame src ="file4.htm">
</frameset>
</frameset>

لاحظ أن الواصفة الأولى تحدد إظهار ثلاثة إطارات عمودية، يعرض الأول والثاني منها محتويات الملفينfile1.htm ، وfile2.htm، بينما تطلب الواصفة الثانية من المتصفح تقسيم العمود الثالث إلى إطارين، يعرض فيهما محتويات الملفين file3، وfile4. ويظهر (الشكل 4)، واجهة المتصفح عند استخدام المقطع السابق من شيفرةHTML.

أبعاد بالبكسلات

تسمح لغة HTML، بتعيين أبعاد محددة للإطارات، بواحدة البكسل، بدلاً من نسبة مئوية من الكثافة النقطية المتوفرة، حيث يمكن أنتحدد عرض العمود بحيث يساوي ستون بكسل مثلاً، بالطريقة التالية:

< frameset cols ="60,*">
<frame src ="file1.htm">
<frame src ="file2.htm ">
</frameset>

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

لكن أي الطريقتين أفضل؟ استخدام الأبعاد بالقيمة النسبية، مثل 20% و30%، أو بالقيمة المطلقة، مثل 20 بكسل؟

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

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

يمكن بالطبع استخدام القيم المطلقة لتحديد أبعاد أكثر من إطارين. يحدد المقطع التالي، مثلاً، ثلاثة إطارات عمودية: الأول بعرض 20 بكسل، والثاني بعرض 50 بكسل، والثالث مابقي من الشاشة:

</frameset>

ويمكن، أيضاً، تحديد عرض الإطار الثالث، ليكون ضعف أو ثلاثة أضعاف الإطار الثاني، بالطريقة التالية:

</frameset>

حيث تعين الواصفة أن عرض الإطار العمودي الأول هو 40 بكسل، بينما يُقسم الباقي من الشاشة بين الإطارين الثاني والثالث، بحيث يشغل عرض الإطار الثالث ضعف عرض الإطار الثاني.

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

</frameset>

</frameset>

كيف ومتى تستخدم الإطارات؟

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

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

لنفرض أن اسم الملف الذي يتضمن لائحة الوصلات، والذي سيظهر في الإطار الأيمن الضيق، هو menu.htm، وأن اسم أول ملف تريد عرض محتوياته في الأيسر العريض هو home.htm. لنفترض أن لائحة الوصلات في ملف menu.htm، تتضمن ثلاث وصلات للملفات 1، و2 و3، فتكون عندها

محتوياته بلغة HTML بالشكل التالي (استخدمت برنامج FrontPage Express لتوليده) :

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

<frameset cols="*,100">

</frameset>

وأذكرك أن المقطع السابق، يجب أن يحفظ ضمن ملف HTML منفصل، وليكن اسمه، مثلاً، index.htm. يجب، أيضاً، حسب قواعد لغة HTML، أن نسمي الإطار الثاني الذي سنعرض عليه محتويات الملفات file1، وfile2، وfile3، وذلك بإضافة بارامتر Name، بالشكل التالي:

<frameset cols="*,100">

</frameset>

ثم نضيف إلى الملف الأول البارامتر Target للإشارة إلى أنه يجب عرض تلك الملفات المرتبطة على الإطار المسمى MyWindow، وذلك بالشكل التالي:

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

ماذا بعد؟

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

أرسل لنا هذا الشهر، القارئان طارق فوزي الغزالي، وكرم شوقى صالح عنواني صفحتين أنشأآها بمساعدة مقالات مجلتنا في مجال تأليف صفحات ويب، وهماhttp://members.tripod.com/~GAZALY/INDEX.htm، وhttp://members.tripod.com/~ShockeyM/، الذي نشر فيه السيد كرم، معلومات عن مدرسة التحرير الابتدائية في الفيوم، جمهورية مصر العربية.

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

لغة XML

أداة جديدة لتصميم صفحات ويب

تخلت HTML عن الكثير من عناصر القوة في SGML، فهل تستعيدها XML مع المحافظة على البساطة وسهولة الاستخدام.

عكف علماء IBM في الستينات، على تطوير لغة Generalized Markup Language، أو GML، لاستخدامها في توصيف هيئات الوثائق. وفي العام 1986، أقرت هيئة المواصفات الدولية ISO، شكلاً من المواصفات الخاصة بهذه اللغة، تحت الاسم Standard Generalized Markup Language أو SGML. وتقدم لغة SGML نظاماً حاذقاً لتوصيف هيئات الوثائق، بحيث تكون مظاهرها مستقلة عن البرمجيات التي تتناولها. وكانت لغة SGML ضخمة، وقوية، وغنية بالخيارات، وملائمة للمؤسسات الكبيرة التي تحتاج إلى توحيد مواصفات وثائقها.

وتبين في وقت من مبكر من تبني مواصفات SGML، أن القوة والثراء الذين يثقلانها، يجعلانها غير ملائمة لتطبيقات النشر السريع عبر شبكة ويب. وظهرت الحاجة إلى لغة توصيف بسيطة، بحيث يمكن لأي شخص أن يتعلمها خلال فترة وجيزة. وهكذا ظهرت لغة HyperText Markup Language أو HTML، التي تتجاوز قليلاً إمكانيات أحد تعريفات أنماط الوثائق Document Type Definition، أو DTD في لغة SGML. ونظراً لسهولة تعلمها واستخدامها، والدعم الذي وفرته لها بواكير متصفحات ويب، أصبحت لغة HTML أساس شبكة ويب سريعة النمو. ولو قدر للغة SGML أن تكون اللغة الأساسية لشبكة ويب في تلك الفترة، لما أمكن لهذه الشبكة تحقيق الشعبية التي تتمتع بها اليوم.

ولكن سرعان ما تبين أن لغة HTML أكثر بساطة مما ينبغي. وكانت HTML كافية في الفترة الأولى من تطور ويب، عندما كانت صفحاتها تحتوي أساساً على نصوص بعناوين ونقاط bullets، وروابط تشعبية hyperlinks. ولكن، مع ظهور الحاجة إلى تضمين صفحات ويب بعناصر الملتيميديا وغيرها من التصميمات المتقدمة، اتضح أن HTML لا تفي بالغرض. وكانت تقنية إرسال الصور بكاملها in-line أمراً مقبولاً، ولكن تنضيدها في الصفحة لم يكن بالأمر السهل دائماً، مما كان يزيد من صعوبة تصميم الصفحات. وتسببت الرسوميات التي تحتوي في داخلها على روابط تشعبية image maps، في مشكلات جديدة تحتاج إلى حلول جديدة. ثم جاءت النصوص الوامضة blinking text، والجداول، والإطارات، ولغة HTML الديناميكية. وللالتفاف على هذه المشكلات، يعمد المطورون إلى إدخال وظائف جديدة على لغة HTML، بما يؤدي، في النتيجة، إلى عدم التوافقية بين التطبيقات المكتوبة بهذه اللغة، وهو ما يؤكد الحاجة إلى مواصفات قياسية جديدة.

ومن الواضح أن هذه المشكلات تنبع أساساً من عدم قابلية لغة HTML للتوسع. فقبل سنوات أضافت مايكروسوفت لافتات tags يمكنها العمل فقط مع متصفحها Internet Explorer، وأضافت نيتسكيب لافتات أخرى، لا تعمل إلا مع متصفحها Navigator، ولكن لم يكن بإمكان مؤلفي المحتويات لصفحات ويب أن يضيفوا أي لافتات جيدة عندما يحتاجون إليها.

وإذا كنت ممن حاولوا استخدام لغة HTML كأداة لتصميم الصفحات، فلا شك أنك عانيت الأمرين من محدوديتها. ولا شك أيضاً، أنك كنت تبادر بحماس إلى تبني اللافتات الجديدة حال إدخالها من قبل مطوري المتصفحات. ولكن، عندما تكون بصدد تصميم موقع مرموق على شبكة ويب، فستبقى بحاجة إلى المزيد. ثم ما تلبث أن تحتاج إلى Java وJavaScript، ثم Active Screen Page، وغيرها من التقنيات الجديدة التي تعزز من إمكانيات HTML. وتوفر التحسينات الأخيرة التي أدخلت على HTML، مثل، Cascading Style Sheet، أو CSS، ولغة HTML الديناميكية (راجع "محطات تعليمية" في العدد الماضي)، بعض المزايا القوية الضرورية لخصخصة تصميم صفحتك بصورة أفضل. ولكن هذه الإضافات تمثل، من ناحية أخرى، تأكيداً جديداً على تفاقم أزمةHTML. وتبقى الخصخصة الكاملة لتصميم صفحات ويب، مرهونة بإرادة منتجي المتصفحات.

ويعترف الكثيرون من مطوري صفحات ويب، بالمفارقات الساخرة في هذه المسألة. ففيما تفتقر لغة HTML إلى قابلية التوسع، نجد أن سلفها SGML يتمتع بقدر كبير منها. ولإنشاء مجموعة مخصخصة تماماً من الوثائق باستخدام لغة SGML، على المؤلف إنشاء DTD (مُعرِّف نمط الصفحة Document Type Definition)، الذي يقوم بضبط أنماط سائر الوثائق في تلك المجموعة. ومع أن هذه العملية قد تبدو معقدة وتستغرق وقتاً طويلاً، فإنها تثبت جدواها في نهاية المطاف.

والمطلوب الآن، إحراز قابلية التوسع التي يوفرها SGML، والتي يحتاجها المطورون المحترفون، بدون الدخول في تعقيداتها. وبعبارة أخرى، فإن المطلوب هو تجسير الفجوة بين SGML وHTML.

المنقذ XML

يأتي الحل مع لغة Extensible Markup Language أو XML. وقد طرحت هذه اللغة أمام الكونسورتيوم العالمي لشبكة ويب W3C في العام 1996، ويمكن حالياً الوصول إلى مسودات الوثائق التي تفصل مواصفها على العنوان (www.w3.org/XML/Activity.html). وتهدف XML إلى توفير بعض من فعاليات SGML، مع تلافي التعقيدات التي تميزها، بما يمكن المطورين من تأليف صفحات ويب مخصخصة، وذات درجة عالية من التساوق في المظهر. ويمكن للغة XML تقديم كل هذه المزايا، لأنها لا تعدو أن تكون ضرباً من SGML. فيما يمكن القول ببساطة، أن HTML لا تعدو أن تكون أحد مُعرِّفات أنماط الوثائق في SGML، فلغة XML هي صورة مبسطة عن اللغة الأم SGML.

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

وشأن HTML وSGML، فإن XML تحتاج إلى برمجيات عرض يمكنها تفسير تعليماتها، ومن المحتمل جداً أن تحتوي الإصدارات المقبلة من متصفحي Navigator من نيتسكيب وIE من مايكروسوفت، على مُفسرات لتعليمات XML، وإذا شئت معاينة إمكانيات XML وSGML، فيمكنك تجربة JUMBO،وهو متصفح تجريبي متوفر مجاناً على شبكة ويب على العنوان: (www.venus.co.uk/omf/cml/)، وهو يدعم SGML/XML ضمن صيغة تسميها Chemical Markup Language أو CML (أنظر الشكل 1).

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

ومن النقاط التي تتفوق بها لغة XML على سابقتها HTML، إمكانياتها للربط. فالإمكانيات التي توفرها HTML للربط، والتي تشكل الأساس لشبكة ويب، تظل محدودة إلى حد بعيد. فيمكنك، مثلاً، إنشاء رابطة بين وثيقتك وأي وثيقة أخرى داخلية أو خارجية، ولكن هذه الرابطة تظل وحيدة الاتجاه، وتتصل بعنوان محدد. ولهذا السبب كثيراً ما تصطدم برسالة document not found أي "الوثيقة غير موجودة"، أثناء تصفحك شبكة ويب، عندما تكون الوثيقة التي تقود إليها الرابطة التي نقرت عليها للتو قد ألغيت، أو نقلت لمكان آخر.

وتحاول ميزة إعادة التوجيه redirection في لغة HTML، معالجة هذه المشكلة، ولكن المواصفات القياسية الخاصة بالربط في لغة XML (www.w3.org./pub/WWW/TR/WDxmllink-970406.html)، تذهب إلى مدى أبعد في تحقيق الربط بين الوثائق. فباستخدام لغة XML، يمكن لمصممي صفحات ويب إنشاء روابط متعددة الاتجاهات، والتي لا تقتصر على تحقيق الصلة مع الهدف المقصود، ولكنها تقدم أيضاً، المعلومات عن الروابط التي تقود إلى الموقع الحالي، من مواقع أخرى. فيمكن لمؤلف الصفحة، مثلاً، أن ينشئ رابطة تقود المستخدم إلى مورد معين، ويمكن عندها إنشاء رابطة إشارة مرجعية cross-reference link تظهر جميع الروابط التي تقود إلى هذا المورد. وبإمكان المستخدمين أن يتتبعوا هذه الروابط وصولاً المصدر. ويستطيع مؤلف XML أن يحدد ما الذي سيحدث عندما تكون هناك رابطة، كأن يحدد ما إذا كان ينبغي تتبع الرابطة تلقائياً، أو حتى ما إذا كان ينبغي عرض الوثيقة ضمن الوثيقة الأصلية أو كوثيقة منفصلة. وعند استخدام خيارات الربط التي يوفرها XML بكامل إمكانياتها، ستتحول شبكة ويب إلى نظام "هيبرميديا" عالي الكفاءة.

منطقي وقوي البنيان

يعتبر الاعتماد على مُعرفات أنماط الوثائق DTD، واحداً من الوسائل لإنشاء الوثائق باستخدام XML. وتوفر DTD أكبر قدر من المرونة وقابلية التوسع، ولكن إلغاء الحاجة إلى استخدام DTD، كان أحد الأهداف التي وضعها مصممو XML نصب أعينهم. ونتيجة لذلك، ثمة نوعان من وثائق XML: الوثائق المعرفة بواسطة DTD، وتلك التي لا تعتمد عليها. وتسمى الوثائق المعرفة بواسطة DTD والمتفقة مع مواصفات SGML، الملفات النظامية valid files. أما الوثائق التي لا تعتمد على DTD، فيجب أن تكون حسنة التكوين well-formed، بمعنى أن تكون متفقة مع مجموعة محددة من المقاييس، وهو أمر يجب تحققه في الوثائق النظامية أيضاً.

وتبدأ الوثائق النظامية بلغة XML، شانها في ذلك شان الوثائق النظامية في لغة SGML، بالتصريح Document Type Declaration وذلك من خلال التعبير <!Doctype..>. ويمكن أن يكون للوثيقة، أيضاً، تصريح Declaration بلغة XML قبل عبارة DTD لتحديد الإصدارةالمستخدمة من XML، ولكن ذلك ليس بضروري. وعندما يوجد مثل هذا التصريح، فسيكون له الشكل التالي:

<?XML Version="1.0"?>

ويمكن، بالطبع، استبدال الرقم 1.0 بالرقم الدال على الإصدارة المعنية. وينبغي لإصدارة XML المحددة بهذه العبارة، أن تكون متوفرة محلياً، أو عبر الشبكة، وعلى عبارة Declaration أن تحدد مكان وجودها.

ويهدف التصريح Document Type Definition، إلى تحديد بنية محتويات الوثائق من نوع معين، ولذلك تمثل تصريحات DTD الركن الأساسي للوثائق في لغة SGML. ولذلك، فقد يبدو من الغريب، أو حتى المستحيل، أن تتيح لغة XML لك إمكانية الاقتصار على العبارة <!doctype> في التعامل مع الوثائق. فلغة XML تتطلب تحديد بنية الملفات، بحيث يستطيع برنامج العرض viewer تفسيرها كتعليمات بلغة SGML. وبدلاً من استخدام تصريحات DTD، ينبغي على وثيقة XML أن تسمح باستخدام مجموعة من القواعد التي يسهل استخدامها من قبل مؤلفي محتويات صفحات ويب.

فأولاً، يجب أن تبدأ الوثيقة بالعبارة Required Markup Declaration أو RMD، التي تبين أن الوثيقة تفتقر إلى DTD (الرمز هو "NONE"). ويأتي هذا التصريح في السطر ذاته الذي يأتي فيه التصريح XML Declaration، وذلك على الشكل التالي:

<?XML VERSION="1.0" RMD="NONE">

وثانياً، يجب تضمين قيم جميع السمات attributes بين علامتي اقتباس. وثالثاً، ينبغي تزويد جميع العناصر بلافتات tags، في بداياتها ونهاياتها، وذلك خلافاً لبعض العناصر في لغة HTML. ويمكن حصر قيم بعض السمات ضمن مجموعة محددة في الأنماط، وكذلك الحال مع البيانات ذاتها. وطالما بقيت ملتزماً بهذه القواعد، فسيمكنك الاستغناء عن DTD، وهذا هو السبب في أن XML أكثر سهولة من SGML.

ولكن، ماذا عن HTML؟ هل تعتبر وثائق HTML الحالية غير نظامية، أو رديئة التكوين، أم الأمرين معاً؟

ليست هذه الوثائق كذلك بالضرورة. تذكر أن HTML هي ببساطة أحد مُعرفات أنماط الوثائق DTD بالنسبة للغة SGML. فطالما أن هذه الوثائق تتفق ومواصفات HTML 3.2، فستكون حسنة التكوين في معظم الحالات. وكل ما عليك عمله هو التأكد بأنها تتفق مع قواعد XML للوثائق حسنة التكوين. يمكنك أيضاً، تشغيل ملفات HTML بواسطة برامج تأليف تدعم SGML، مثل HoTMetaL Pro من شركة SoftQuad (www.sq.com) أو اللجوء إلى برمجيات خاصة، للترجمة مثل Lark (www.textuality.com/lark/).

أنواع تطبيقات XML

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

أولاً، بفضل بنية البيانات data structure، توفر لغة XML أداة جيدة لتطوير تطبيقات يمكنها عرض البيانات من مناظير مختلفة. ويمكن لمثل هذه التطبيقات أن تجعل الوثائق أكثر فائدة، بترتيبها البيانات وفقاً للعديد من المعايير (الاسم أو الرقم أو غير ذلك)، أو بتوفيرها وسيلة للتحول بين حجب وإظهار معلومات معينة، حسب الطلب.

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

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

وتعتبر هيئة تعريف القنوات Channel Definition Format أو CDF من شركة مايكروسوفت، والمتضمنة في المتصفح IE 4.0، أول المشاريع الهامة التي استخدمت في تنفيذها لغة XML. فقد بنيت CDF على أساس مواصفات XML، ويمكن الاطلاع على تعريف أنماط الوثائق DTD الخاص بها في العنوان (www.microsoft.com/standards/cdf.htm). وتظهر تلك الوثيقة قيمة لغة XML بوضوح. فقد عرفت مايكروسوفت عناصر XML خصيصاً لتقنية الدفع push technology، باستخدام عناصر مثل channel، وitem، وschedule، وtracking. ولا يحتاج موفرو المعلومات المخصصة للدفع، إلى ما هو أكثر من وضع معلوماتهم ضمن العنصر ذي النمط المناسب، لتكون تطبيقاتهم متوافقة مع خصائص العرض التي تميز IE 4.0. وذلك مثال حي لتحقيق القياسية التي يمكن الحصول عليها مع HTML.

الطرق الفعالة في تسويق موقعك

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

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

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

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

وتبحث المحركات التي تمسح موقعك، عن الميتاواصفات (meta tags). وتدرج هذه الواصفات، عادة، في شيفرة HTML الخاصة بموقعك. وتوفر نموذجاً للكلمات الأساسية التي تصف موقعك، وشرحاً مختصراً عنه. وعليك إذا رغبت في وضع ميتاواصفات، عند تصميم موقعك، وضع قائمة مكونة من 10-15 كلمة أساسية، مرتبة حسب الترتيب الهرمي الذي ترغب في أن تظهر عليه، وعليك تزويدها أيضاً، بوصف مختصر لموقعك، من 20-25 كلمة.

تنبيه مهم
لا تُقدم عنوان URL لهذه المحركات، حتى تنتهي من إضافة الميتاواصفات.

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

· الدلائل المحلية، وأنظمة لوحات الإعلان bulletin board system (BBS)
إن كانت اهتماماتك منصبة على منطقة جغرافية محددة، فقد ترغب في استغلال دليل محلي، أو لوحة إعلانات، ففائدة هذه السبل كبيرة جداً في مثل هذه الحالات. خذ وقتاً كافياً لدراسة الفرص المتاحة أمامك، وحدد السبيل المناسب، للإعلان عن موقعك بواسطته.

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

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

· خدمات الترويج والمعلومات
يوجد العديد من الأشخاص الذين يريدون أن يحصلوا على أموالك، فاحرص على اتخاذ القرارات السليمة. وتعتبر Multimedia Marketing Group Inc. من الشركات المرموقة (www.mmgco.com)، التي توفر معلومات قيمة، ومصادر متعددة حول التسويق على إنترنت. إن كنت مهتماً بوضع موقعك على محركات بحث مختلفة، قم بزيارة موقع الشركة، للحصول على مزيد من المعلومات والتفاصيل.

· مجموعات الأخبار
استخدام مجموعات الأخبار بشكل مباشر لا يكون فعالاً، في العادة، كما أن مستخدمي إنترنت لا يعتبرون هذا الأسلوب محبباً. لكن، إن اشتركت في نقاش ضمن مجموعة أخبار، فتأكد من إضافة "علامة توقيع" signature line tag لبريدك الإلكتروني، والتي تتضمن عنوان موقعك. وسيساعدك من يجد أن مساهماتك في النقاشات قيمة، على زيارة موقعك، لمعرفة المزيد عنك، وعن آرائك.

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

التسويق بالوسائل غير الإنترنتية

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

· القرطاسية وبطاقات الزيارة
تمثل إضافة عنوان موقعك للقرطاسية التي تستخدمها، ولبطاقات الزيارة الخاصة بك، وسيلة بسيطة وفعالة، لنشر اسم موقعك بين كل من تتعامل معهم.

· الاتصال بالجمهور
أبرز اسم موقعك في الاجتماعات العامة، والتجمعات الشعبية، والمؤتمرات. واعمل على زرع الاهتمام بموقعك، بإقامة المسابقات، وتوزيع الهدايا، أو تقديم خدمات عامة للمجتمع.

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

استخدام بريمجات جافا في صفحات ويب

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

كلاهما على حق!

إنها قصة تسمية المنتجات الجديدة بأسماء أشياء معروفة، للإيحاء بأنها تمتاز بخصائص تلك الأشياء، أو لمجرد أنها تشبهها شكلاً، أو لإضفاء نوع الطرافة على التسمية، كإطلاق اسم ويندوز (نوافذ)، على نظام تشغيل مايكروسوفت، واسم ماوس (فأرة)، على إحدى وحدات الحاسوب. لكن، لا نعرف بالضبط، من هو المطور في شركة صن مايكروسستمز (Sun Microsystems)، الذي اقترح اسم جافا على اللغة التي طرحتها عام 1990، وتبنى المتصفح نتسكيب نافيجيتور 2.0، عام 1996 دعم بريمجاتها، وأصبحت تطبيقاتها شائعة على شبكة ويب. إلا أننا نرى أن جميع المتصفحات المتوفرة حالياً، تدعم "نكهات" تلك اللغة، باستخدام ما يسمى "آلة جافا الافتراضية" (Java Virtual Machine)، وهي مفسر "Interpreter"، يفهم شيفرة بريمجات جافا، ويحولها آنياً، إلى شيفرة تنفيذية، في نظام التشغيل الذي يعمل ضمنه المتصفح.

لن نسترسل في هذا المقال، في شرح التقنيات التي ترتكز عليها لغة جافا، بل سننطلق إلى أحد جوانبها العملية، ونرى كيفية الاستفادة من بريمجاتها في صفحات ويب التي ننشئها. لكن، لا بد في البداية أن نميز بين أربعة أشياء متعلقة بلغة جافا، هي: تطبيقات جافا (Java Application)، وجافا سكريبت (Java Script)، وحبيبات جافا (Java Beans)، وبريمجات جافا (Java Apples).

تطبيقات جافا: إنها برمجيات مكتوبة بلغة جافا، ومترجمة إلى ملفات تنفيذية (Executable files)، بواسطة أحد مترجمات لغة جافا (Java Compilers). ولا يختلف استخدام لغة جافا في هذه الحالة، عن استخدام غيرها من اللغات، مثل C++، أو فيجوال بيسك، لكتابة التطبيقات التي تعمل ضمن نظام تشغيل الحاسوب مباشرة، ولا تحتاج إلى آلة جافا الافتراضية.

جافا سكربت: هي لغة نصية مفسرة (Interpreted)، مشتقة من لغة جافا، طورتها شركة نتسكيب، لتعمل ضمن صفحات ويب، لأداء بعض المهمات التفاعلية مع المستخدم، كتغيير النص أو الصورة عندما يتحرك مؤشر الماوس فوق جزء من الصفحة. وهي أيضاً مدعومة من جميع المتصفحات المتوفرة حالياً.

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

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

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

ماذا تحتاج لإعداد "فنجان" من جافا؟

إليك الوصفة! ضع بعض ملفات class، مع قليل من ملفات GIF، وامزجها في واصفة applet للغة HTML، لكن، لا ننصحك بشرب النتيجة!

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

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

نسخ ملفات البريمجات من القرص المدمج

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

p;إدراج بريمج ضمن صفحة ويب

تعتمد صفحات ويب على واصفات (tags) لغة HTML، لتحديد بينات وهيئة الصفحة، وإحداها واصفة <applet> التي تعلن عن وجود بريمج في الصفحة، بالشكل التالي:

تعين السمة codebase الدليل (Directory) أو المسار (path) الذي يحفظ فيه الملف من نوع . class الذي يتضمن شيفرة البريمج، بينما تعين السمة code اسم ذلك الملف، وتعين السمتان width و height، عرض وطول البريمج على الصفحة .

يلي ذلك السطر، عادة، مجموعة من السمات، لكل منها الشكل التالي :

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

يصبح بذلك الشكل العام لإدراج بريمج في صفحة، هو كما يلي :

</applet>

إذا كنت ممن يستخدم برنامج FrontPage Express، أو برنامج شبيها، فسوف يتولى نيابة عنك، إنشاء النص السابق بلغة HTML. اختر قائمة Insert، في برنامج فرونت بيج إكسبرس، ثم اختر منها الأمر Other Components، فالخيار Java Applet…، فيظهر مستطيل الحوار المبين في الشكل 1، الذي يوفر واجهة سهلة لتعيين قيم سمات الواصفة <applet>. حيث يقابل المستطيل Applet Source: السمة code، والمستطيل Applet Base URL: السمة codebase ، بينما يمكن إضافة أسماء وقيم برامترات البريمج، ضمن الإطار Applet Parameters، بالنقر على الزر Add…، وتعديل وإزالة بعضها لاحقاً، بالنقر على الزرين Modify…، وRemove. ويضاف إلى ذلك أن المستطيلين Hight، و Width يقابلان السمتين المماثلتين لهما في هيكل الواصفة < applet>.

المثال الأول :
ساعةعلى صفحتك

يعرض بريمجنا الأول ساعة ذات عقارب على الصفحة، تبين الوقت الحالي في ساعة حاسوب المستخدم . استجلبنا ملفات هذا البريمج المجاني من موقع http://java.sun.com، العائد لشركة صن، مع مجموعة من البريمجات أخرى، مضغوطة جميعاً في ملف واحد باسم demo.zip. ابحث عن هذا الملف الدليل الذي فككت فيه ملف applet.zip الذي نسخته من القرص المدمج، ثم فكه أيضاً، باستخدام برنامج Winzip مثلاً . سينشئ فك الملف demo دليلاً على القرص الصلب، باسم demo أيضاً، وستجد فيه دليلاً باسم clock، يتضمن الملفات المتعلقة بهذا البريمج، والتي بينها ملف باسم index.html، كمثال عن كيفية استخدامه . شغل المتصفح الذي تستخدمه، وافتح الملف index.html من دليل clock، فيظهر بريمج الساعة التي تبين الوقت الحالي على حاسوبك، إذا كانت ميزة تشغيل بريمجات جافا فعالة في متصفحك .

كيف إذاً، تدرج هذا البريمج ضمن صفحاتك؟

بسيطة ! فكل ما علينا فعله هو استخدام الواصفة < applet>، وتحديد قيم سماتها . سنرى كيف يتم ذلك ضمن ملف index.html، بدراسة شيفرة HTML الخاصة به، التي يمكن إظهارها بفتح شيفرة المصدر (Source) لصفحة index.html، في المتصفح الذي تستخدمه (يتم ذلك في إنترنت إكسبلورر باختيار أوامر عرض /المصدر ):

</applet>

نلاحظ أن السمة codebase تحدد الدليل classes، كموقعلملف البريمج من نوع . class، وتحدد السمة الثانية، code، اسمه بأنه JavaClock.class، بالإضافة إلى تحديد طوله وعرضه بالسمتين high وwidth. ونلاحظ أن لهذا البريمج أحد عشر بارامتراً، تتحكم بمظهر وألوان وسلوك الساعة . يحدد البارمتر delay، الزمن الذي يفصل بين لحظات تحديث الساعة بواحدة ميلي ثانية، وتعني قيمة 100 المحددة لهذا البارامتر أنه يجب تحديث الساعة كل 100 ميلي ثانية، أي كل ثانية . ويعين البارمتر link، وصلة يقفز إليها المتصفح عند النقر على الساعة، بينما تحدد قيم البارامترات الأخرى عرض الإطار المحيط بها، وإطارها، وألوان عقارب الساعة، والأرضية، والإطار . لاحظ أن قيم الألوان معينة بنظام العد الست عشري، (وهو نظام عد أساسه 16 وأرقامه هي: 1،2،3،4،5،6،7،8،9، A، B،C، D، F). وبهيئة RGB، ( Red, Green, Blue)، حيث تحدد أول خانتين من قيمة اللون درجة اللون الأحمر، وتحدد الخانتين التاليتين درجة الأخضر، والأخيرتان درجة اللون الأزرق . وهذه الطريقة في ترميز الألوان معروفة سابقاً في العديد من لغات البرمجة .

انسخ نص HTML السابق، إلى نص HTML الخاص بصفحتك، مع تغيير قيم السمات والبارامترات التي تريدها (ماعدا قيمة السمة code، بالطبع )، أو افتح مستطيل Java Applets Properties، إذا كنت تستخدم برنامج فرونت بيج إكسبرس، وأدخل قيم السمات والبارامترات، بالاعتماد على القيم المبينة في نص HTML السابق . افتح صفحتك بمتصفح إنترنت الذي تستخدمه، وتأكد من ظهور وعمل بريمج الساعة فيها .

هل لاحظت وجود ثلاثة ملفات أخرى، بهيئة . class غير الملف JavaClock.class، في المجلد classes، ضمن المجلد clock؟

إذا حاولت أن تنقل تلك الملفات أو تغير اسمها، فإن بريمج الساعة لن يعمل، لأنها تتضمن جزءاً من الفئات التي يستخدمها البريمج أيضاً، والتي يحتاجها برنامج الملف JavaClock.class لكي يتم عمله . ويجب إرسال تلك الملفات (وهي AnalogClock.class، وCustomParser.class، و ParamParser.class)، بالإضافة إلى الملف JavaClock.class، إلى المزود البعيد، الذي يتضمن صفحة HTML المحتوية على بريمج الساعة، مع الانتباه إلى تغيير قيمة السمة codebase (أو مستطيل Applet Base URL: في برنامج فرونت بيج إكسبرس )، إلى عنوان الموقع على المزود البعيد، (كالعنوان http://members.tripod.com/~Shahem، الذي أستخدمه لصفحتي، مثلاً ). وإن لم تفعل هذا، لن يستطيع المتصفح تشغيل البريمج، وسيظهر لك رسالة خطأ على شريط الحالة في المتصفح، عند مرور الماوس فوق المكان الذي يشغله البريمج .

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

المثال الثاني
شريط إعلاني

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

توجد العشرات من أنواع بريمجات الأشرطة الإعلانية، واخترنا منها شريطاً مجانياً، من إنتاج شركة ITS في مصر، ويمكن استجلاب ملفه المضغوط advertisementpanel.zip، من العنوان http://javadomain.com/advertisement_panel.html، أو فك ضغطه من القرص الصلب، إذا كنت نسخت الملف applet، وفككت ضغطه، كما شرحنا سابقاً .

يؤدي فك ضغط الملف advertisementpanel.zip إلى الحصول على ملفين أحدهما بهيئة . class هو AdvertisementPanel.class، الذي يتضمن برنامجه المترجم، والآخر بهيئة . java، يتضمن شيفرته المصدريه بلغة جافا، مما يسمح لمطوري لغة جافا بتعديله، وإنتاج نسخ مختلفة منه، حسب حاجاتهم .

يظهر هذا الشريط بشكل متتابع، عدداً من الصور، مع إضفاء تأثيرات خاصة على تقليبها، ولهذا يتطلب استخدامه، عدداً من ملفات الرسوميات بهيئة GIF. لا يختلف أسلوب إدراج هذا البريمج في صفحة ويب، عن ما تعلمناه من المثال السابق، إذ كل ما علينا معرفته، هو معلومات عن بارامتراته التي حددها مطوروه، وهي متوفرة في الصفحة http://javadomain.com/advertisement_panel.html، ذاتها، مع مثال مفصل على استخدامه، بالإضافة إلى أنه مثال حي عنه يعمل في أعلاها . تبين تلك الصفحة، أنه يمكن تعيين عدد صور الإعلانات التي ستظهر على هذا البريمج بالبارامتر count، وأن كل سمات كل صورة تبدأ بالبارامتر imgx، حيث تأخذ x القيم 0، 1، 2، … وهكذا حسب عدد الصور، بينما تكون قيمة البارامتر imgx، مجموعة من السمات مرتبة بالشكل التالي :

image's URL","delay in milliseconds","transitional effect","target URL (optional)"

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

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

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

جربت استخدام هذا البريمج لإضافة شريط إعلاني لمواقع شبكة DIT، على إحدى ملفات صفحتي، باستخدام نص HTML التالي :

<param name="img0"

value="http://members.tripod.com/~Shahem/dit.jpg,1000,bottom, http://www.ditnet.co.ae/arabic/">

<param name="img1"

value="http://members.tripod.com/~Shahem/iaw.jpg,1500,top, http://www.iawmag.co.ae/">

<param name="img2"

value="http://members.tripod.com/~Shahem/pcmag.jpg,2000,left, http://www.pcmag.co.ae/">

</applet>

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

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

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

مواقع تتوفرفيها برمجيات جافا

http://www.javacats.com

http://www.doubleologic.com

http://www.jars.com

http://www.free-applets.com

http://www.bodo.com/javagame.htm

http://java.sun.com/openstudio/index.html

http://www.gamelan.com

http://www.vivids.com/ij2/index.html

http://209.235.106.3/werks.html

http://www.javagoodies.com

http://www.javadomain.com

التحكم بفهرسة محركات البحث لموقعك

هل سبق لك استخدام أيٍّ من محركات البحث، مثل Altavista أو InfoSeek ؟ إنك تعلم إذاً، أن عمليات البحث باستخدام الكلمات المفتاحية (keywords) تعطي في كثيرٍ من الأحيان، نتائج لا تحتوي على وصفٍ وافٍ للموقع، أو تسرد مواقع لا تتضمن المعلومات المطلوبة. وإن كنت تعمل مطوراً لصفحات ويب، فلا يخفى عليك أن للترتيب الذي يحتله موقعك في قائمة نتائج البحث، أهمية بالغة في جذب الزوار إليه. تُستخدَم واصفات META> < (meta tags) الخاصة بكلٍ من "وصف الموقع" و"كلمات المفتاح" في صفحة HTML، حتى تضمن إدراج موقعك بشكلٍ سليم في محركات البحث، ووضع وصف واضح له فيها.

سنتعرف في هذا المقال على واصفات <META>، وسنوضح الطريقة التي يعمل بها "عنكبوت الشبكة"(web spider)، وهو الاسم الذي يطلق على البرنامج الذي يعمل بشكلٍ تلقائي، في فهرسة صفحات ويب ضمن محركات البحث. وسنشرح طريقة استخدام واصفات <META> في ترويسة صفحات HTML.

واصفة <META> متعددة الأغراض

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

وفي ما يلي عدد من واصفات <META>، التي يمكن أن تظهر في ترويسة صفحة معينة:

<html>
<head>
<title> meta شرح لواصفات </title>
<meta http-equiv="keywords"
content="،واصفة،واصفات،بحث،محرك بحث meta ما هي واصفات ">

ولواصفات <META> مهمات أخرى، غير التعريف بوصف الصفحة وكلمات المفتاح فيها، وتقديمها لمحركات البحث. فيمكن، مثلاً، لهذه الواصفات توجيه المتصفحات للقيام بتحديث الصفحة (Refresh)، أو التوجه إلى موقع معين وعرضه في نافذة المتصفح. سنناقش في هذا المقال واصفات <META> المتعلقة بتقديم المعلومات لعناكب الشبكة فقط، وسنبدأ بالتعرف على الطريقة التي يفهرس بها عنكبوت الشبكة الصفحات، ثم نوضح طريقة استخدام واصفات <META> التي تساعد العناكب على فهرسة هذه الصفحات بشكلٍ أدق.

الوصف وكلمات المفتاح

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

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

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

لاحظ أن المواقع التي تم إيجادها لم تكن موافقة جميعها لصيغة البحث المقصودة، بسبب عدم استخدام واصفات <META> في بعض هذه الصفحات. ونجد لهذا، أن تحديد كلمات مفتاح لصفحة HTML يسهّل على المستخدم عملية البحث، ويسرع الوصول إلى الصفحة المطلوبة، وذلك إذا كان محرك البحث يعتمد في عملياته على طريقة "البحث ضمن كلمات المفتاح".

طريقة استخدام واصفة <META>

لا بد قبل شرح طريقة استخدام واصفات <META>، أن نتعرف على نوعيها. فالصيغة العامة لواصفة <META> هي كما يلي:

وبالتالي لدينا سِمَتان(attributes) تحددان نوع واصفة <META>:

أولاً HTTP-EQUIV)): هذا النوع من واصفات<META> هو المكافئ لترويسة بروتوكول HTTP. ولا بد من إعطاء نبذة عن أسلوب عمل هذا البروتوكول. عندما تستخدم متصفحاً لطلب صفحةٍ معينة من موقع ويب، يستقبل المزود هذا الطلب بواسطة بروتوكول HTTP، وبعد التأكد من وجود هذه الصفحة، يولّد المزود رداً على طلبك يسمى (رد HTTP). ويسمى أول جزء في هذا الرد كتلة ترويسة HTTP أو (HTTP header block)، والتي تحتوي على معلومات ترسَل للمتصفح، وتتعلق بطريقة إظهار الصفحة. والعملية هي ذاتها بالنسبة لواصفة META من النوع HTTP-EQUIV، التي تؤدي مهام ترويسة بروتوكول HTTP ذاتها، بل وتترجم بعض مزودات ويب واصفات META من هذا النوع إلى ترويسات HTTP بشكلٍ تلقائي، كي يتعرف المتصفح عليها كترويسة HTTP عادية.

ثانياً NAME)): تُستخدَم هذه السمة كتصريحٍ عن أحد أنواع واصفات <META> التي لا يتوفر مكافئ لها ضمن المعلومات التي ترِد في ترويسة HTTP، وهي لا تزال موضعاً للخلاف بين المطورين. فبعض برامج محركات البحث، كالديدان والروبوتات (Worms & Robots)، تستطيع تفسير واصفات <META> التي تحدد كلمات المفتاح (Keyword META Tag)، سواءً كان مصرحاً عنها بسمة NAME، أو سمة HTTP-EQUIV، بينما يشترط البعض الآخر من البرامج، أن تكون هذه الواصفات من النوع HTTP-EQUIV، مما يزيد الأمر تعقيداً.

كي تتمكن من إعطاء الوصف و الكلمات المفتاح التي تتضمنها صفحتك، عليك استخدام واصفتين من واصفات <META> من النوع HTTP-EQUIV، وتضمينهما في ترويسة الصفحة. ويوضح المثال التالي ترويسة صفحة HTML، تحتوي على واصفتي <META>. تعطي الأولى وصف هذه الصفحة، وتتضمن الثانية كلمات المفتاح فيها :

<HEAD>

<TITLE>إنترنت العالم العربي</TITLE>

<META HTTP-EQUIV="Description" NAME="Description"

CONTENT="مصدركم الأول لكل المعلومات عن إنترنت في العالم العربي.">

<META HTTP-EQUIV="Keywords" NAME="Keywords"

CONTENT="إنترنت،العالم العربي،مجلة،عربي،قرص هدية">

</HEAD>

كيف تدرج موقعك في أعلى قائمة نتائج البحث:

حدد حوالي خمسين كلمة مفتاح في كل صفحة، بحيث لا يزيد عدد الحروف الكلي على 1000 حرف، وإلا لن يفهرَس موقعك في بعض محركات البحث، مثل AltaViata و Infoseek، ورتبها حسب الأهمية ضمن واصفة <Meta>، الخاصة بكلمات البحث.

انتقِ عنوان كل صفحة بعناية، وضعه ضمن واصفة <Title>، فهو أول مكان تنظر إليه كثير من محركات البحث عن صيغة البحث المطلوبة. فعند البحث، مثلاً، عن كلمة "حاسب"، ستعرض هذه المحركات الصفحة التي عنوانها </Title>الحاسب<Title> في قائمة البحث، تليها الصفحة ذات العنوان </Title>الحاسب الآلي<Title>.

يفهرس بعض محركات البحث مثل Lycos و Excite، الصفحات حسب عدد مرات تكرار الكلمة في الصفحة، فعند البحث عن كلمة "إنترنت"، ستُعرَض الصفحة التي تحتوي على الكلمة 50 مرة، قبل تلك التي تتكرر الكلمة فيها 10 مرات. ويفحص البعض الآخر من المحركات النسبة المئوية لتكرار كل كلمة في الصفحة، فحاول لذلك، الإكثار من استخدام الكلمات الرئيسية في الصفحة، لكن بدون الإخلال بالأسلوب.

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

تتأثر عمليات البحث في معظم المحركات التي تستخدم طريقة البحث ضمن كلمات المفتاح، بحالة الحرف (case-sensitive)، وذلك بالنسبة للّغات التي تستخدم الأبجدية اللاتينية، لذا ننصح باستخدام الأحرف الصغيرة (lower case) في كلمات المفتاح.

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

انتبه إلى عدم تكرار أيٍّ من كلمات المفتاح أكثر من 3 مرات في واصفة <Meta>، وإلا اعتبر ذلك تحايلاً على محرك البحث، وسيؤدي إلى معاقبتك بإسقاط موقعك من عملية الفهرسة. ويحدث الأمر ذاته إذا حاولت تكرار الكلمة في الصفحة بشكلٍ كبير دون داعٍ، كوضعها، مثلاً، ضمن تعليقٍ لا يظهر على الشاشة.

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

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

كيف ترتب محركات البحث الرئيسية المواقع في قوائم البحث:

AltaVista: ينظر أولاً إلى واصفات <Meta>، ثم عنوان الصفحة، ثم تكرار الكلمات ضمن أول 200 كلمة من النص في الصفحة.

InfoSeek: عنوان الصفحة، ثم واصفات <Meta>.

Excite: ينظر إلى عنوان الصفحة، ثم تكرار الكلمات في كل النص الموجود في الصفحة.

WebCrawler: عنوان الصفحة، ثم واصفات <Meta>، ثم تكرار الكلمات في النص.

HotBot: واصفات <meta>، ثم تكرار الكلمات في النص، ثم عنوان الصفحة.

Lycos: تكرار الكلمة في النص ثم عنوان الصفحة.