بناء موقع الوب

تمهيد
التخطيط للموقع Site Planning)
جمع وإعداد المحتوى Content Preparation)
تنسيق صفحات الويب Page Layout)
تمهيد
أصبح معلوما لديك أن الويب هي مجموعة الوثائق الإلكترونية المترابطة المخزَّنة في أجهزة الكمبيوتر في العالم بأسره. أما السؤال الذي يطرح نفسه الآن فهو: كيف السبيل إلى أن يكون لك موقع على الويب يراك العالم عن طريقه، وتطرح أفكارك وآراءك عبره، وترى ردود الزائرين عليه؟ وقد يغدو موقعك على الويب منطلقا لرسالة سامية تُعرِّف العالم على مجتمعك وحضارة أمتك، أو قد يكون واجهة لأعمالك التجارية تعرض عن طريقه ما تقدِّمه من سِلَع وخدمات. وقبل الحديث عن كيفية تصميم وبناء موقع الويب، ينبغي العلم أنه يمكن تصنيف مواقع الويب إلى ثلاثة أنواع رئيسة:
1. مواقع شخصية: يبينها الأفراد لعرض أفكارهم
وآرائهم واهتماماتهم الشخصية.

2. مواقع مؤسسية: تبنيها المؤسسات والشركات والهيئات للتعريف بأنشطتها أو ترويج منتجاتها وخدماتها.

3. مواقع شخصية مؤسسية: هي مواقع مصمَّمة أساسا لعرض أفكار وآراء ومبادرات أصحابها، ولكنها تقوم في الوقت نفسه بدور مؤسسي كالتعريف ببلد أو حضارة ما أو تبنّي مشروع معيَّن. ومن الأمثلة على هذه المواقع موقع سمو الشيخ محمد بن راشد آل مكتوم www.sheikhmohammed.co.ae

التخطيط للموقع Site Planning)

استنادا إلى تحديد نوع الموقع إن كان شخصيا، أم مؤسسيا، أم شخصيا مؤسسيا)، يمكنك تحديد الأسلوب الأمثل للتخطيط له. وبشكل عام، لا بُدَّ من الخطوتين التاليتين:

1. يجب عليك أن تحدِّد الأهداف المرجوّ تحقيقها من الموقع. وسوف تساعدك الإجابة عن الأسئلة التالية في تحديد تلك الأهداف:

• ما طبيعة الدور الذي سيؤديه الموقع تثقيفي أم تعليمي متخصِّص أم تسويقي أم شخصي...)؟

• ما هي الخدمات والمعلومات التي سيقدمها الموقع للزائرين؟ من المؤكَّد أن الإجابة عن هذا السؤال تعتمد أساسا على طبيعة الدور الذي سيؤديه الموقع.

• ما هي الأولويات أي إن كان الموقع سيقدِّم عدة أنواع من الخدمات والمعلومات، فأي منها له الأولوية القصوى مثلا)؟

• كيف يمكن جعل الموقع مميَّزا أو أعلى مصداقية من المواقع الأخرى؟
2. وضع المخطط العام للموقع، وهو مخطِّط يُبيِّن العلاقة بين صفحات الموقع. ويجب أن يحتوي المخطَّط على العناصر التالية:

• تنظيم هرمي يُبيِّن صفحات الموقع. ويبدأ رأس الهرم بصفحة الموقع الافتتاحية Web Site Home page)، ويُبيِّن كل مستوى فيه الصفحات المتفرعة عن المستوى الأعلى منه.
• شرح موجز لمحتويات كل صفحة على حدة، وتحديد الروابط الموجودة في الصفحة.
•شرح يوضِّح بواسطة الأسهم الاتجاه الذي ينبغي أن تسير الروابط تبعاً له.
وينبغي أن نشير هنا إلى أن التخطيط لبناء الموقع يجب أن يتمّ في ضوء الأمور التالية:
• إعداد الميزانية اللازمة لتغطية تكاليف إطلاق الموقع على الإنترنت، ومتابعة تطويره وتحديثه.
• تحديد عدد أعضاء فريق العمل واختصاص كل منهم إن كان الموقع شخصيا بسيطا فيمكنك أن تقوم ببنائه بنفسك).
• وضع خطة تفصيلية لتنفيذ بناء الموقع واختباره ثمّ إطلاقه على الويب ومتابعة صيانته وتحديثه، ويشمل ذلك وضع مخطط زمني لجميع خطوات العمل، يوضح موعد بداية كل مرحلة وموعد نهايتها المتوقع، وموعد إطلاق الموقع.
ومن الأفضل- في معظم الحالات- إطلاق موقع الويب بإصدار ابتدائي بسيط؛ ليكون البذرة التي ينمو منها الموقع نحو التقنيات الجديدة والتصميم المميز والمحتوى المتكامل، بما في ذلك رسوم الكمبيوتر المتحركة والثابتة والفيديو والصوت وأي مواد أخرى تظهر بعد إعدادها بطريقة متأنية ودقيقة
جمع وإعداد المحتوى Content Preparation)

محتوى الموقع هو كل ما يتضمّنه الموقع من مواد مقروءة أو مسموعة أو مرئية. ومواد المحتوى هي الأدوات الرئيسة التي تُتيح للموقع أن يؤدي دوره.

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

وتجدر الإشارة هنا إلى أن مواد المحتوى- سواءً أكانت مقروءة أم مسموعة أم مرئية- يجب أن تراعي آداب الإنترنت Netiquette) التي تناولتها صفحة المستوى المبتدئ.

وفيما يخص مواد المحتوى المقروءة من نصوص ومقالات، فإنه يجدر الالتزام بما يلي:

• الموضوعية؛ فالمادة التي تفتقر إلى الموضوعية تعجز عن إيصال الرسالة المقصودة منها.
• الإيجاز؛ ولا زيادة على ما قالت العرب: "البلاغة الإيجاز".
• الاستعانة بالجداول، وصياغة الأفكار على شكل نقاط مرتبة؛ وذلك بهدف التوفير في مساحة وعدد الصفحات..
• اختيار العناوين بعناية بالغة بحيث تكون لافتة للأنظار؛ لأن تكلفة التراجع عن استعراض الموقع أو الصفحة لا تتعدّى نقرة على زر الماوس يقوم بها الزائر إذا لم يجد غايته ظاهرة على الصفحة بشكل مميز وجذاب.
أما موضوع إعداد الرسوم والصور- وهي جزء مهم من المحتوى- فسوف يتمّ تناوله في مادة معالجة وتنقيح الرسوم) الواردة لاحقا.
تنسيق صفحات الويب Page Layout)

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

1. الحرص على تنسيق الصفحة بحيث يكون المحتوى الأساس فيها ظاهرا بالكامل مهما كانت دقة الشاشة التي يستخدمها زائر الموقع.

2. التأكد من جدوى تنسيق صفحات الموقع على هيئة إطارات frames)؛ لأن تعدّد الإطارات يكلف زائر الموقع جهدا ًإضافياً في التعامل مع الصفحة، بدءاً من إضافتها إلى المواقع المفضلة ووصولا إلى طباعة الصفحة أو طباعة جزء منها. ويمكن الاستعاضة عن الإطارات بالجداول التي يُمكن تقسيمها إلى خلايا. وقد يتطلَّب تنسيق الصفحة باستخدام الجداول جهدا أكبر بقليل، ولكنه يقدِّم حلا ناجعاً يُحسِّن سرعة الاستعراض.

3. الاهتمام بإضافة النص الذي يظهر في شريط الحالة Status Bar) لأنه يساعد الزائر في اتخاذ قرار متابعة استعراض الموقع أو الانتقال إلى غيره.

4. الاهتمام باختيار أنواع الخطوط وتحري الواضحة منها.

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

6. انتقاء العناوين الجذابة ودمجها في تصميم ترويسة الصفحة page header).

7. ضبط أحجام النصوص في الصفحات بما يتلاءم مع درجة اهتمام الزائر بموضوع الصفحة، فكلما ازداد اهتمام الزائر بالموضوع ازداد عدد الصفحات الفرعية التي يستعرضها وازداد الوقت الذي يخصصه لقراءة نصوص تلك الصفحات، ولذلك يُفضَّل أن تُراعى الأحجام التالية في نصوص صفحات الموقع:
• حوالي 100 كلمة في الصفحة الافتتاحية للموقع.
• حوالي 200 كلمة/صفحة في صفحات الملخصات والمقدمات.
• حوالي 400 كلمة/صفحة في الصفحات التفصيلية والفرعية.

لمحة عن HTML
ما هي لغة النص المترابط HTML
عناصر بناء وثيقة HTML
عنصر <HTML>
عنصر العنوان <TITLE>
عنصر رأس الوثيقة <HEAD>
عنصر جسم الوثيقة <BODY>
عنصر الجدول <TABLE>
عنصر الإطار <FRAME>

ما هي لغة النص المترابط HTML
بعد أن انتهت المراحل السابقة التخطيط للموقع، وجمع وإعداد المحتوى، واعتماد تنسيق صفحات الموقع)، لابد من البحث عن الأداة المناسبة لتحويل كل ذلك إلى وثائق قابلة للعرض على صفحات الويب.
بالطبع، يُمكنك الاستعانة بالعديد من الأدوات البرمجية مثل لغة HTML أي لغة النص المترابط HyperText Markup Language) بإصداراتها المختلفة، أو الاستعانة بأحد التطبيقات مثل مايكروسوفت فرونت بيج
Microsoft FrontPage).
ولغة النص المترابط هي لغة برمجية تُستَخدَم لبناء صفحات الويب، وتتكوَّن هذه اللغة من نصوص texts)، ورموز tags) تحيط بعناصر الوثيقة document elements) وتحدِّدها، وتبيِّن هذه اللغة للبرنامج المستعرِض ما ينبغي عمله عند النقر على رابطة معيَّنة وتنشيطها.
والواقع أن لغة HTML هي من أكثر الأدوات شيوعا، وأكثرها تطابقاً مع المعايير المعتَمَدة في هذا المجال. ويُفضَّل طبعاً استخدام الإصدار الأحدث من هذه اللغة للاستفادة من جميع الخصائص الجديدة فيها.
عناصر بناء وثيقة HTML
هي عناصر مطلوبة في الوثائق التي تعتمد لغة النصّ المترابط HTML.
وجميع العناصر التالية ضرورية للتأكّد من مطابقة الوثيقة لأي معيار HTML:
<HTML>……</HTML>
<HEAD>……</HEAD>
<BODY>……</BODY>
وسنعرِّج فيما يلي على هذه العناصر وبعض العناصر الأخرى في لغة HTML.


عنصر <HTML>
هذا العنصر هو الذي يُعرِّف الوثيقة على أنها وثيقة تحتوي عناصر HTML، وهو يقوم بدور السور الذي يُحيط ببقيّة الوثيقة بما في ذلك جميع العناصر الأخرى. ويتمّ استخدام هذا العنصر بمثابة بداية لوثيقة HTML ، وهو يدلّ على أن هذه الوثيقة تُلبّي معايير HTML. وتكون الصياغة كما يلي:
<HTML>
بقية الوثيقة تأتي هنا
</HTML>


عنصر العنوان <TITLE>

يجب أن يكون لأي وثيقة HTML عنصر عنوان title element) يكون اسما لها، ويُعبِّر عنها بطريقة مفهومة، ويُمكن استخدامه في قوائم History واستخدامه بمثابة علامة مميِّزة للنوافذ التي تعرض الوثيقة. ولا تظهر هذه العناوين عادة في نصّ الوثيقة نفسها، وفي الغالب، فإن المستعرِضات تُظهِر النصّ الموجود في عنصر العنوان في شريط العنوان title bar) في نافذة المستعرِض.

عنصر رأس الوثيقة <HEAD>

يتكوَّن رأس وثيقة HTML من مجموعة غير مرتَّبة من المعلومات المتعلِّقة بالوثيقة، ومن المفروض أن لا يكون هنالك أي تأثير مباشر لعنصر <HEAD>...</HEAD> في شكل الوثيقة عند ظهورها.
عنصر جسم الوثيقة <BODY>

يتضمن جسم الوثيقة document body)- كما يوحي اسمه- كلّ النصّ وجميع الصُوَر التي تشكِّل الوثيقة جنبا إلى جنب مع جميع عناصر HTML التي تضبط الوثيقة. ويكون ذلك وفق الصياغة التالية:
<BODY>
بقيّة الوثيقة تأتي هنا
</BODY>
ومن الممكن التحكّم بألوان الوثيقة وخلفيّتها عن طريق تحديد مجموعة من السِمات مفردها سِمة attribute) في صياغة عنصر <BODY>. وفي الصياغة الخاصة بالعناصر المتعدِّدة السِمات، يجب أن يكون هنالك فراغ space) بين كل سِمة وأخرى. وعلى كلّ حال، فإنه ينبغي عليك معرفة أن معظم المستعرِضات تزوِّد المستخدِم بوسائل لطمس الألوان color over-ride) ومنع تحميل الصُوَر والرسومات.
ومن سِمات هذا العنصر:
أ – سمة الخلفية BACKGROUND)
يُمكن استخدام سِمة الخلفية background للإشارة إلى ملفّ صورة image file) يُمكن وضعه على شكل بلاطات متراصّة في خلفية نافذة المستعرِض. وإذا كانت الصياغة بالطريقة التالية:<BODY BACKGROUND=”imagename.gif”> بقية الوثيقة تأتي هنا <BODY> فإن ذلك يعني وضع صُوَر أو نصوص الوثيقة على خلفية تتشكَّل من الصورة التي يضمّها ملف imagename.gif) بحيث تكون هذه الصورة على شكل بلاطات متراصّة تغطّي المساحة التي تراها، أي بطريقة تشبه كثيرا الطريقة التي تُستَخدَم بها الصّوَر النُقْطية bitmaps) على شكل ورق الجُدران في ويندوز Windows Wallpaper). ويدعم معظَم المستعرِضات هذه السِمة التي تُتيح استخدام ملفات صُوَر بصِيَغ GIF و JPG لتكون خلفية لوثائق HTML، وجدير بالذكر هنا أن المستعرِض إنترنت إكسبلورر يدعم أيضا الملفات ذات الصيغة BMP بالإضافة إلى الصيغتين المذكورتين آنفا.

ب – سمة لون الخلفية BGCOLOR)
تُتيح هذه السِمة اختيار لون خلفية الوثيقة، حيث تكون الصياغة على النحو التالي:
<BODY BGCOLOR=”#rrggbb”> بقية الوثيقة تأتي هنا </BODY>

عنصر جسم الوثيقة <BODY>
هذا العنصر هو المغلِّف wrapper) الرئيس لجميع السمات التي يضمّها الجدول، حيث يتمّ إغفال جميع السمات الأخرى التي لا تكون مغلَّفة بالعنصر <TABLE>…</TABLE>.

ويتضمَّن العنصر <TABLE> السِمات التالية:
أ – سمة الحدود BORDER)
يُمكن استخدام هذه السِمة للتحكّم بحدود الجدول وإعدادها لتظهر بالشكل المطلوب في الوثيقة. وإذا كانت هذه السِمة موجودة، فإنه سيتمّ رسم حدّ يُحيط بخانات الجدول. وينبغي القول إن سُمك وشكل هذا الحدّ المفتَرَض سلفا default) يختلف من مستعرِض إلى آخر. وإذا لم تكن هذه السِمة موجودة فلا يتمّ عرض أي حدود، ولكن شكل الجدول سيظهر مرتَّبا كما لو كانت الحدود موجودة أي تكون هنالك فراغات متروكة للحدود). ومن الممكن أيضا إعطاء قيمة محدَّدة لِسُمك الحدود على الشكل التالي:
BORDER="value"
بحيث تحدِّد هذه القيمة سُمك الحدود التي ستظهر محيطة بخلايا الجدول. وبوسعك وضع هذه القيمة بمقدار صفر 0) ممّا يعني إلغاء مساحات الفراغ التي حجزها المستعرِض لرسم الحدود أي كما في حالة اختيار عدم رسم حدود وهي تكافئ حالة عدم وجود السِمة).

ب – سمة حواشي الجدول CELLPADDING)
السِمة CELLPADDING هي التي تُعبِّر عن حواشي الجدول أي مساحة الفراغ الخالية بين حدود خلية الجدول والبيانات التي تضمّها هذه الخلية). والقيمة المفتَرضَة سلفا هي 1. ومن الممكن إعطاء قيمة محدّدة لحواشي الجدول كما يلي:
CELLPADDING=”value”
ج – سمة الفراغات بين خلايا الجدول CELLSPACING)
السِمة CELLSPACING هي التي تُعبِّر عن مساحة الفراغ المطلوب تركها بين خلية وأخرى في الجدول. والقيمة المفتَرَضة سلفا هي 2. ومن الممكن إعطاء قيمة محددة لهذه السمة كما يلي:
CELLSPACING=”value”
وإذا قُمت بصياغة العبارة على النحو التالي:
<TABLE BORDER=”0” CELLSPACING=”0” CELLPADDING=”0”>
فإن الجدول سيحتل أقل مساحة ممكنة.

د – سمة عرض الجدول WIDTH)
إذا استخدمت هذه السِمة، فإنها تُحدِّد بدقّة عرض width) الجدول مقدَّرا بالنقاط الضوئية أو البكسلات pixels)، أو تُحدِّد عرض الجدول بنسبة معيَّنة من عرض النافذة التي يعرضها المستعرِض. وتكون الصياغة كما يلي:
WIDTH=”value or percent”
هـ - سمة طول الجدول HEIGHT)
إذا استخدمت هذه السِمة، فإنها تُحدِّد بدقّة طول height) الجدول مقدَّرا بالنقاط الضوئية البكسلات)، أو تُحدِّد طول الجدول بنسبة معيَّنة من النافذة التي يعرضها المستعرِض. وتكون الصياغة كالتالي:
HEIGHT=”value or percent”
و – سمة المحاذاة الجانبية ALIGN=”left|right”
تدعم بعض المستعرِضات- ومنها إنترنت إكسبلورر ونافيغيتر- السِمة ALIGN الخاصة بالعنصر <TABLE>. وتُتيح هذه السمة تحديد محاذاة الجدول سواءً على الجهة اليُسرى أم اليُمنى من الصفحة، ممّا يسمح بانسياب النصّ بالشكل الملائم حول الجدول.

ز – سمة المحاذاة العمودية VALIGN=”top|bottom|center”
يدعم المستعرِضان إنترنت إكسبلورر ونيتسكيب هذه السِمة التي تُستخدَم لتحديد المحاذاة العمودية للنصّ المعروض في خلايا الجدول. والقيمة المفتَرضَة سلفا التي يتمّ استخدامها في حالة عدم تحديد قيمة معيَّنة لهذه السِمة هي المحاذاة الوسطية
center-aligned).

ح – سمة لون الخلفية BGCOLOR)
يدعم المستعرِضان إنترنت إكسبلورر ونيتسكيب استخدام هذه السِمة، وهي سِمة مدعومة أيضا في العنصر <BODY> . وتُتيح هذه السِمة تحديد لون خلفية الجدول، سواءً أكان ذلك عن طريق اختيار أسماء معيَّنة للألوان أم عن طريق ثلاثية الألوان
أحمر وأخضر وأزرق rrggbbtriplet). وتكون الصياغة كما يلي:
BGCOLOR=”#rrggbb|colourname”
ط – سمة لون الحدود BORDERCOLOR)
يدعم إنترنت إكسبلورر هذه السِمة التي تُحدِّد لون حدود الجدول. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثلاثية الألوان rrggbb. ومن الضروري جدا أن تكون سِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:
BORDERCOLOR=”#rrggbb|colourname”

ي – سمة لون الحدود الفاتح BORDERCOLORLIGHT)
يُتيح إنترنت إكسبلورر استخدام السِمة BORDERCOLORLIGHT من أجل تحديد اللون الفاتح لإظهاره على حدود الجداول الثلاثية الأبعاد. وهذه السِمة مضادة للسِمة BORDERCOLORDARK. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثُلاثية الألوان rrggbb. ومن الضروري أن تكون السِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:
BORDERCOLORLIGHT=”#rrggbb|colourname”
ك – سمة لون الحدود الغامق BORDERCOLORDARK)
يُتيح إنترنت إكسبلورر استخدام السِمة BORDERCOLORDARK من أجل تحديد اللون الغامق لإظهاره على حدود الجداول الثلاثية الأبعاد. وهذه السِمة مضادة للسِمة BORDERCOLORLIGHT. ومن الممكن استخدام أي اسم من أسماء الألوان المعرَّفة سلفا، كما يُمكن أيضا استخدام أي لون من ضمن ثُلاثية الألوان rrggbb. ومن الضروري أن تكون السِمة BORDER موجودة في عنصر <TABLE> الرئيس كي تتمّ عملية تلوين الحدود. وتكون الصياغة كما يلي:
BORDERCOLORDARK=”#rrggbb|colourname”
ل – سمة إدراج صورة في خلفية الجدول BACKGROUND=”URL of image”
يدعم المستعرِضان إنترنت إكسبلورر ونيتسكيب إدراج الصُوَر في عنصر <TABLE>. وإذا تمّ استخدام هذه السِمة في عنصر <TABLE>، فإن ملفات الصُوَر ذات الصِيَغ المدعومة يُمكن أن تُستَخدَم بمثابة صورة خلفية للجدول.

عنصر الإطار <FRAME>

يُعرِّف هذا العنصر إطاراً ضمن مجموعة الإطارات المكوّنة لصفحة الويب، وفيما يلي سنذكر سِماته:

أ – سمة SRC=”url”
تُحدِّد هذه السِمة الإطار الذي سيكون- عند زيارة الموقع- أول إطار يتمّ عرضه من بين مجموعة الإطارات التي تتكون منها الصفحة.

ب – سمة NAME=”frame_name”
يمكن أن نعيّن بواسطة هذه السِمة اسماً للإطار لتعريفه عند الإشارة إليه من إحدى الروابط في الوثائق الأخرى، ويتم ذلك وفق الصيغة التالية:
<A HREF=”URL” TARGET=”frame_name”>
ملحوظة: تتم عملية الربط ضمن مجموعة الوثائق المكونة لصفحة الويب نفسها). ولا ضير من عدم تسمية الإطار، فهذه السِمة اختيارية، حيث يُفتَرض أصلاً أن جميع الإطارات تكون بلا اسم. وفي حال التسمية، يُفتَرض البدء بمحرف أبجدي أو رقمي alphanumeric)، وتجدر الإشارة إلى أنه قد تمّ تعريف وحجز عدّة أسماء تبدأ بِشَرطة سفلية، ومن الأمثلة عليها:
يؤدي استخدام هذا الاسم إلى الانتقال إلى الإطار الجديد غير المسمّى) _blank
يؤدي استخدام هذا الاسم إلى الانتقال إلى الإطار نفسه الذي جاءت منه الرابطة _self
يؤدي استخدام هذا الاسم إلى الانتقال إلى الإطار الأب parent frame) يتم الانتقال إلى الإطار نفسه إن لم يكن له إطار أب، أو إن كان هو نفسه الإطار الأب الرئيس) _parent
يؤدي استخدام هذا الاسم إلى الانتقال إلى مستوى أعلى سيتم الانتقال إلى الإطار نفسه إن كان أصلا في المستوى الأعلى) _top


ملحوظة:
رغم إن الأسماء المذكورة هي كلمات محجوزة لِسِمة NAME الخاصة بالعنصر
<FRAME>، إلا إنه لا ينبغي الرجوع إليها إلا عند استخدام طريقة المنطقة المستهدفة Anchor Target) لبناء رابطة فائقة؛ وهي طريقة تُتيح بسلاسة كبيرة عمليات التنقل بين الوثائق المؤطَّرة framed) وعمليات التنقل بين الوثائق المؤطَّرة والوثائق غير المؤطَّرة non-framed) على سبيل المثال، يمكن استخدامها عند بناء رابطة فائقة تشير إلى وثائق قد تكون غير مؤطَّرة موجودة على جهاز خادم بعيد).

ج – سمة MARGINWIDTH=”value”
تأخذ هذه السِمة قيمتها بعدد النقاط الضوئية البكسلات) التي تُمثل الهامش، وهي تُحدِّد مقدار الهامش من الطرفين الأيمن والأيسر للإطار، ولا يُسمَح بأن تكون قيمة هذه السِمة أقل من 1 لأن ذلك يؤدي إلى ظهور محتويات الوثيقة خارج المساحة المطلوبة. وعلى كل حال، فإن المستعرِض يختار قيمة محدَّدة سلفا default) لهذه السِمة عند محاولته إظهار الوثيقة بالشكل الأفضل.

د - سمة MARGINHEIGHT=”value”
تشبه هذه السِمة سابقتها أي سمة MARGINWIDTH)، إلا إن وظيفتها هي التحكم بالهوامش العلوية والسفلية.

هـ - سمة SCROLLING =”yes|no|auto”
تتحكم هذه السِمة بظهور شرائط التحريك scrolling bars) التي تساعد في رؤية النص الذي يزيد على مساحة الرؤيا في نافذة الإطار، وقد يكون استخدام القيمة “no” خطيراً لجهلنا بمساحة أو دقة نافذة العرض على جهاز المستفيد client) ؛ مما قد يؤدي إلى اختفاء بعض المعلومات لديه.

و – سمة NO RESIZE
تُتيح هذه السِمة جعل جميع الإطارات المعرَّفة في وثيقة ما قابلة للتحجيم إي إعادة تحديد حجمها) من قِبَل المستفيد، وإعداد هذه السِمة يمنع التحكم بحجم الإطارات.

ز - سمة FRAMEBORDER=”yes|no|0”
تتحكم هذه السِمة بإظهار حدود الإطار، وإعطاء القيمة “0” لهذه السِمة يؤدي إلى عدم رسم الحدود هذا فقط في البرنامج إنترنت إكسبلورر). وتَدّعي شركة نيتسكيب أن مستعرِضها يدعم هذه السِمة باستخدام القيم “yes|no” في عنصر <FRAME> وعنصر <FRAMESET> عنصر يُستخدَم لبناء مجموعة إطارات أو إطارات متداخلة)، ولكن إجراء اختبار بسيط يُظهِر عكس ذلك. وعلى كل حال، فإن نيتسكيب تُعوِّض عن ذلك بدعم الإطارات العديمة الحدود borderless frames).
ويُتيح كل من المستعرِضين نيتسكيب وإنترنت إكسبلورر طرائق مختلفة لبناء الإطارات العديمة الحدود، ففي البرنامج نيتسكيب يكفي أن نعطي القيمة “0” للسِمة BORDER في أول عنصر بناء <FRAMESET> لإزالة الحدود من كامل مجموعة الإطارات. أما البرنامج إنترنت إكسبلورر فهو لا يدعم هذه السِمة، ونحتاج لإعطاء القيمة “0” لكل من عنصري البناء <FRAMEBORDER> و <FRAMESPACING> في أول عنصر بناء <FRAMESET> لإزالة الحدود من كامل مجموعة الإطارات. والصياغة التالية الخاصة بالإطار تمثِّل حلا مستقلا عن المستعرِض؛ أي يصلح لإنترنت إكسبلورر ونيتسكيب على حدّ سواء:
<HTML>
<HEAD>
<TITLE>Borderless Frames example</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="165,*">
<FRAME SRC="contents.asp" NAME="contents">

تأتي هنا عناصر <FRAME> أخرى وعناصر <FRAMESET> أخرى.




إغــــــــــــــناء مواقع الوب بالصوت والصورة
تمهيد
عروض الفيديو Video)
الصوت Audio)
تقنية جافا
تقنية فلاش Flash)
الواقع الافتراضي Virtual Reality)
تمهيد
أصبح عدد مواقع الويب هائلا جدا، وما لم يكن موقعك متميِّزا فإنه سوف يختفي وسط الزحام، ناهيك عن احتدام المنافسة في المواقع ذات الصبغة التجارية أو الإعلامية. وإذا استعرضت عددا من مواقع الويب المتميِّزة، فسوف تجد أن هذه المواقع تتضمَّن العديد من الملفات التي تجعل محتوى الموقع غنيا يشجِّع الزائر على قضاء أطول فترة ممكنة في استعراض الموقع.
وتجدر الإشارة هنا إلى أن تقنيات إغناء مواقع الويب هي في طبيعتها سلاح ذو حدين؛ فالإفراط في استخدامها قد يؤدِّي إلى نتيجة غير مرغوب فيها؛ لأن إتخام الموقع بملفات كبيرة الحجم يؤدي إلى استغراق زمن طويل في تنزيل وإظهار المحتويات على جهاز الزائر، مما قد يستنفد صبره ويجعله يهجر الموقع باحثاً عن غيره من المواقع التي قد تلبي حاجته بطريقة أسرع.
ويمكن أن نصنّف ملفّات إغناء الموقع إلى عدة أنواع رئيسة؛ مع الإشارة إلى أنها تندرج جميعاً تحت مُسمَّى واحد هو الأوساط المتعددة multimedia)، ولكن أكثرها أهمية واستخداما هي: ملفات رسوم الكمبيوتر Computer Graphics) التي تحدّثنا عنها في المستوى المتوسِّط، وملفات الفيديو video) والصوت audio).

عروض الفيديو Video)
يتطلَّب تحضير عروض الفيديو الرقمية عتادا hardware) خاصا بإدخال مادة الفيديو إلى الكمبيوتر، وبرنامجا لتنقيح الفيديو Video editing software) نفترض هنا أن المادة قد جُمِعت أصلاً بوساطة كاميرا متوسطة الجودة والدقة، ومن الأفضل أن تكون كاميرا رقمية). ويتم ضغط ملف الفيديو لتصغير حجمه وتسهيل نقله عبر الإنترنت. ويبقى العامل الأخير ، وهو عامل يتعلَّق بالزائر الذي يجب أن يستخدم نظام كمبيوتر ذا مواصفات جيدة
إن رغب في متابعة عرض فيديو مقبول نسبيا.
ملحوظة:
لا تتوقع عروض فيديو كاملة التفاصيل ترقى إلى جودة العرض التلفزيوني، لأن تقنية الفيديو ما زالت تخطو خطواتها الأولى في رحلة ألف الميل.

ويتمثل العتاد المطلوب في بطاقة فيديو تُركَّب في الكمبيوتر. ووظيفة هذه البطاقة هي التعرّف على الفيديو المسجَّل بصيغة تواصلية Analog) وتحويله إلى صيغة رقمية Digital)؛ ليصبح من الممكن معالجته بوساطة الكمبيوتر. وتُدعى هذه العملية باسم Video digitizing أي تحويل الفيديو إلى صيغة رقمية. ويُعرَض الفيديو على شكل إطارات متلاحقة. وتختلف المواصفات التقنية للبطاقات المتوفرة حسب معدَّل تَعاقُب الإطارات Frame rate) ، وجودة الالتقاطQuality)، ونسبة ضغط الملف التي تُتيحها. ولمعرفة المزيد عن بطاقات الفيديو، يُرجى الرجوع إلى الموقع التالي: http://www.mkdata.dk/click/index.htm
وتتعدد التطبيقات البرمجية التي يمكن استخدامها لتنقيح الفيديو Video Editing)، ومن أشهرها البرنامج أدوبي بريميير Adobe Premiere) المشابه في عمله للبرنامج أدوبي فوتوشوب Adobe Photoshop) مع فارق مهم جدا؛ وهو أن الملفات التي يتعامل معها أدوبي بريميير هي ملفات فيديو بينما يتعامل برنامج فوتوشوب مع ملفات الصور الثابتة. وتجدر الإشارة إلى أن الملفات الناتجة عن برنامج تنقيح الفيديو يمكن أن تأخذ إحدى صيغتين رئيستين هما: صيغة AVI وصيغة من صيغ كويك تايم Quick Time. makeEl"KB5", 300, "صيغ Quick Time: هي صيغ طوّرتها شركة Quick Time وأشهرها الصيغة mov");


الصوت Audio)
يُضفي الصوت على موقع الويب مسحة من التأثير. وقد أصبحت غالبية أنظمة الكمبيوتر المتوفرة في الأسواق تتضمَّن بطاقة صوت sound card)، أما برامج تنقيح الصوت audio editing software) فهي كثيرة تتدرَّج من البسيط إلى المتقدِّم، ومن أشهرها البرنامج ساوند فورج Sound Forge) من شركة سونيك فاونداري Sonic Foundary).
الخطوات الرئيسة لإعداد الصوت لشبكة الويب:
قد يكون مصدر الصوت هو الميكروفون أو القرص المدمج أو قد يكون مصدراً خارجياً آلة موسيقية مثلا). ومن المهم أن تُحدِّد لبرنامج التنقيح مصدر الصوت؛ كي يتمكن البرنامج من معالجة الصوت بطريقة ملائمة.
وبعد اختيار مصدر الصوت، تمر عملية إعداد الصوت بمراحل عديدة نلخصها فيما يلي:
1. تحديد معدل النمذجة Sampling rate) makeEl"KB6", 300, "النمذجة Sampling): هي أخذ عينات من الإشارة الأصلية وفق معدل معين، بحيث تكون هذه العينات كافية لإعادة بناء الإشارة الأصلية من جديد. وتكون العينات الناتجة بالصيغة الثنائية Binary format) لتتم معالجتها بواسطة الكمبيوتر. وتدعى هذه العملية أحياناً بترقيم الإشارة أي تحويلها من الصيغة التواصلية إلى الصيغة الرقمية");
معدل النمذجة الذي تدعمه بطاقة الصوت في جهاز الكمبيوتر هو أحد المواصفات التقنية التي تتميز بها بطاقة صوت عن أخرى. ويؤثِّر معدَّل النمذجة تأثيرا واضحا في حجم الملف، فكلما ازداد معدَّل النمذجة ازداد حجم ملف الصوت. وإذا رغبت في الحصول على صوت بمواصفات جيدة أي معدل نمذجة مرتفع)، فقد تحتاج إلى برامج لضغط الملفات.
وإلى جانب معدّل النمذجة، فإن حجم ملف الصوت يتأثر بمعامل نمط الصوت sound mode factor) في حالة النمط الأحادي mono) تكون قيمة هذا المعامل 1 أما في حالة نمط الصوت المجسَّم stereo) فإن قيمة هذا المعامل تساوي 2)، كما يتأثر حجم الملف بحجم عينة الصوت bit rate) المأخوذة يُطلَق عليها أحيانا اسم عُمق الصوت)، وقد يكون هذا الحجم يساوي 8 بت أو 16 بت أو 24 بت أو 32 بت أو 64 بت، وكلّما ازداد حجم العينة تحسَّنت جودة الصوت، ولكن لا تنسَ أن ذلك يؤدّي إلى زيادة حجم الملف. وإليك الجدول التالي الذي يُبيِّن حجم الملف في ثلاث حالات مختلفة.
حجم الملف لكل ثانية من الصوت التواصلي)
كيلو بايت/ ثانية KB/Sec) معامل نمط الصوت حجم العينة عمق الصوت)
بالبت bit) معدل النمذجة
بالكيلوهيرتز kHz)
44
أحادي mono)
1
16
22

11 أحادي mono)
1 8 11
176 مجسَّم
stereo)
2 16 44


2. تعيين شدة الصوت volume)
المناسبة بحيث لا يكون مرتفعاً بدرجة تؤدِّي إلى تشوّهه؛ ولا منخفضاً فتختفي بعض صفاته، ثم النقر على مفتاح التسجيل لتبدأ عملية التقاط الصوت.
3. تسوية الصوت sound normaliztion)
أي تنقيح الصوت بحيث يبدو للسامع صوتا تواصليا. وتحتاج هذه العملية إلى أدوات تتوفَّر في برامج تنقيح الصوت.
4. ضغط ملفات الصوت لتصغير حجمها
تتم عمليات الضغط باستخدام خوارزميات الضغط الخاصة بالملفات الصوتية. ولمعرفة المزيد عن هذا الموضوع، انقر هنا.
5. حفظ الملف الناتج بعدة صيغ للتوافق مع البيئات المختلفة، ومن هذه الصِيَغ:
• الصيغة WAV لمستخدمي الكمبيوتر الشخصي
• الصيغة AIFF لمستخدمي الماكنتوش
• الصيغة AU لمستخدمي يونيكس
والهدف من هذه الخطوة هو ضمان أنه سيكون بِوُسع جميع الزائرين الاستماع إلى ملف الصوت.
ملحوظة
في الصيغ السابقة، قد تواجهك مشكلة ازدياد حجم الملف تبعا لطول المدة الزمنية للمقطوعة الموسيقية. ولحل هذه المشكلة أُوجِدَت الصيغة MIDI الواجهة الرقمية للأدوات الموسيقية Musical Instrument Digital Interface)، إذ تُتيح هذه الصيغة احتواء عدة دقائق من الموسيقا في ملف حجمه أقل من عشرة كيلو بايت. ويمكنك أن تحصل على مقطوعات مسجلة وفق الصيغة MIDI عن طريق تركيب برنامج خاص يقوم بتحويل لوحة المفاتيح إلى أداة عزف موسيقية أو أن تربط لوحة عزف خاصة بالكمبيوتر) تُسجِّل بوساطتها ما تشاء من النوطات الموسيقية التي تُغني بها موقعك يُمكنك مثلا استخدام البرنامج فري ستايل Freestyle) لبيئة ويندوز، أو البرنامج ميدي غرافي MIDIGraphy) لبيئة ماكنتوش)



تقنية جافا
تشغل جافا Java) أذهان الكثيرين في قطاعي الكمبيوتر والإنترنت؛ فقد كانت هذه التقنية التي قدّمتها صن مايكروسستمز من أول الوسائل التي أتاحت للمستخدِم صفحات ويب تفاعلية interactive web pages) غنية بتقنيات الحركة animation) والألعاب والجداول الحسابية spreadsheets) والحوار الفوري real-time chatting) عبر الإنترنت. وها نحن نشهد- يوما إثر يوم- تزايُد أعداد التطبيقات والبرامج التي تدعم جافا، وقد جاء تضمين دعم جافا في أحدث إصدارات بعض المستعرِضات دليلا على أهمية هذه التقنية.
والواقع أن كلمة جافا تُشير إلى شيئين هما: لغة البرمجة جافا Java Programming language)، ومنصة التشغيل جافا Java platform).
أولاً: لغة البرمجة جافا Java Programming Language)
لغة البرمجة جافا Java) هي لغة عالية المستوى High level language) لا تعتمد على منصة التشغيل platform-neutral)، وهي تشبه لغة سي++ ++C) إلى حدٍ كبير إلا إنها أكثر فاعلية وسهولة، كما إن جافا تدعم صفات تجعلها لغة برمجة مميَّزة للويب مثل:
• التشغيلية البَيْنيّة Interoperability)
• تعددية مسارات المعالجة ضمن التطبيق Multithreading)
• البرمجة بالعناصر Object Oriented programming)
• العالمية اللغوية Internationalization).
• إدارة الذاكرة ذاتيا
وإلى جانب ذلك، فإن جافا تدعم العديد من المزايا الموجودة في بعض لغات البرمجة الأخرى. وفي الغالب، يَفوق مستوى جودة هذه المزايا ومرونتها في جافا ما عليه الحال في اللغات البرمجية الأخرى أو يُضاهيه.
ويمكن أن يُعَدَّ بواسطة اللغة جافا نوعان أساسيان من البرمجيات هما:
أولا: التطبيقات Applications): هي برامج مصمّمة بحيث يستخدمها المستخدِم النهائي end-user) لأداء مهمّات معيَّنة.
ثانيا: البريمجات Applets): هي نصوص برمجية مكتوبة بلغة جافا، ويمكن أن تُضَمَّن في صفحات الويب أي تكون البريمجات مُقيمة على خادم الويب) ويتمّ تنزيلها وتشغيلها على نظام الكمبيوتر لدى الزائر. وتُعَدّ البريمجات أمرا بالغ الأهمية في مجال الحوسبة الشبكية Network Computing-NC).
أما ما يُدعى باسم جافا سكريبت JavaScript ) فهي لغة نصوص تنفيذية scripting language) طوّرتها شركة نيتسكيب وشركة صن مايكروسستمز. والواقع أن قُدرات ومزايا جافا سكريبت أقل من قُدرات ومزايا لغة جافا. وتكون نصوص جافا سكريبت التنفيذية مضمَّنة في نصوص HTML البرمجية HTML code)، ولا يُمكن أن تؤدي المهمة المَنوطة بها إن كُتِبَت منفصلة عن لغة HTML. ونصوص جافا سكريبت هي الأداة التي تعنينا في مجال إغناء مواقع الويب؛ لأنها تضيف إلى نصوص HTML البرمجية بعضا من قوة وديناميكية لغات البرمجة. وللاطلاع على بعض الأمثلة، اُنقر هنا .
ثانياً- منصة التشغيل جافا Java Platform)
في العادة، تتكون منصة التشغيل من عتادHardware) وبرمجيات Software) مُعَدَّة خصيصاً للعتاد المرافق لها، وهذا هو الأمر الذي تخلصت منه منصة التشغيل جافا؛ فهي منصة تشغيل برمجية لا تعتمد على نوع العتاد، ويتم تركيبها على أي منصة تشغيل لتشكل غطاء ملاءمة مع البرمجيات المُعدّة بلغة جافا. وتُدعى هذه الصفة بالمحمولية Portability)؛ أي العمل على منصات تشغيل مختلفة دون الحاجة إلى نوع خاص من العتاد. وهذه الصفة ساعدت في إتاحة خاصية التشغيلية البَينية التي تتمتَّع بها جافا؛ وهي خاصية تعني إمكانية نشر الب
Interoperability) رنامج المكتوب بلغة جافا على مختلف منصات التشغيل، ويتأتّى ذلك عن طريق حفظ الملفات بصيغة البايتكود عوضاً عن الصيغة الثنائية . والملفات المخزَّنة بصيغة البايتكود يمكن أن تعمل على أي نظام تشغيل. وقد أتاحت هذه الميزة للغة جافا الانتشار الواسع؛ لأن وجود هذه الصفة يتناسب تماماً مع عالمي الإنترنت والإنترانت اللذين يتعاملان مع منصات متنوِّعة. وتتكوَّن منصّة جافا من واجهة برمجة تطبيقات جافا ومن آلة جافا الافتراضية.
ويوضِّح الشكل التالي استقلالية منصة التشغيل جافا عن المنصات المرتبطة بالعتاد Platform-specific) .

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

تقنية فلاش Flash)
اصبحت تقنية فلاش التي قدّمتها شركة ماكروميديا إحدى أهم وسائل إغناء الويب؛ لما تُتيحه هذه التقنية من طرائق مبتكَرَة لإعداد العروض التفاعلية Interactive movies). ويُسمَّى العرض التفاعلي بهذا الاسم لأنه يُتيح تفاعل المُشاهِد معه، إذ يستطيع الُمشاهِد- عن طريق الماوس أو لوحة المفاتيح- أن ينتقل كما يرغب بين عناصر العرض
Objects)، وأن يقوم بإدخال المعلومات في النماذج، فضلاً عن العديد من العمليات التفاعلية الأخرى.
والواقع أن فلاش هو أحد البرامج التي تمكننا من بناء عروض تفاعلية عالية الجودة، فما الذي يُميِّز هذه التقنية عن سواها من تقنيات إعداد العروض؟
يمكننا القول إن المميزات الرئيسة لتقنية فلاش هي ما يلي:
• تعتمد التقنية فلاش على المتجِّهات vectors) في تمثيل العناصر، وذلك بخلاف التقنيات التقليدية التي تعتمد على مصفوفة نقاط لكل منها لون محدَّد. وتقوم تقنية فلاش بتمثيل العناصر بوساطة علاقات رياضية تربط بين النقاط. وعلى سبيل المثال، قد يكون العنصر مستقيما محدَّد اللون والسُمك يصل بين نقطتين. وكما هو واضح في هذا المثال، فإن المستقيم يحتوي عددا هائلا من النقاط التي تربط بينها علاقة رياضية معيَّنة، ويترتَّب على ذلك اختصار حجم الملف بدرجة كبيرة، إلى جانب الدقة العالية التي نحصل عليها بسبب ربط النقاط بعلاقات رياضية محدَّدة. وفي بعض العناصر الأخرى كالدائرة والدويري cycloid) هو المحل الهندسي لنقطة على محيط دائرة أو كرة تتدحرج على سطح مستوٍ) ، قد يكون من الممكن اختصار حجم الملف بدرجة أكبر.
• تقوم العروض المبنيّة بوساطة فلاش على عناصر شبيهة بعناصر العمل المسرحي أو السينمائي الذي تُبنى فيه العروض الحقيقية، وهذه العناصر هي:
• مسرح الحدث Stage): هو المساحة المرئية التي ستجري فيها أحداث العرض التفاعلي. وقد يكون مسرح الحَدَث نافذة كاملة أو جزءاً من صفحة.
• التسلسل الزمني للعرض Timeline): هو المسار الزمني لتعاقب أحداث العرض التفاعلي، وهو يتكوَّن عن طريق تحديد الصفات الزمنية لكل إطار Frame) من إطارات العرض التفاعلي النهائي. هنالك أكثر من صفة زمنية لكل إطار منها موقع الإطار على محور الزمن، وعلاقته الزمنية بالإطارات والأحداث الأخرى)
• الطبقات Layers): تُتيح تقنية فلاش تمثيل الأحداث في طبقات متراكبة وشفافة، بحيث تجري مجموعة من الأحداث في زمن واحد وعلى مسرح أحداث مُشترَك.
• لوحة الأدوات المُساعدة Tool palette): تشبه لوحة الأدوات المساعدة منطقة خلف الكواليس في المسرح التقليدي، وهي تتضمَّن أدوات مهمّة لإضفاء بعض التعديلات والمؤثِّرات على العناصر والأحداث مثل المعدِّلات modifiers) والاقترانات functions) المُساعدة في بناء الإطارات وغيرها).
• قد تعتمد العروض التفاعلية المُعَدَّة بوساطة البرنامج فلاش على البرمجة في إعداد بعض الأحداث التي يبدأ عرضها إما بعامل زمني أو بعامل تفاعلي مثل نقرة ماوس أو ضربة مفتاح أو تحريك مؤشر الماوس)، وهذه الصفة تجعل من برنامج فلاش أداة طيِّعة في يد المصمم الذي يُشكِّلها.
لمعرفة المزيد عن تقنية فلاش، اُنقر هنا ، أما إذا رغبت في الاطلاع على مثال بسيط يوضِّح كيفية إعداد عرض تفاعلي بوساطة تقنية فلاش، فانقر هنا .

الواقع الافتراضي Virtual Reality)
الواقع الافتراضي Virtual Reality-VR) هو بيئة تفاعلية ثلاثية الأبعاد مُولَّدة بشكل كامل بوساطة الكمبيوتر وتبدو للمستخدِم كأنها واقعية. وتُتيح تقنية الواقع الافتراضي بناء بيئة افتراضية ثلاثية الأبعاد تتفاعل عناصرها مع المستخدم أو الزائر بطريقة تُوهِمه بأنه في داخل المشهد الذي يتابعه. ولتقنية الواقع الافتراضي العديد من التطبيقات العملية، نذكر منها على سبيل المثال لا الحصر المحاكاة simulation) مثل بعض أنظمة المحاكاة الخاصة بتدريب الطيارين، وبعض أنظمة المحاكاة الخاصة بتدريب الجراحين على عمليات وهمية قبل أن يخوضوا في العمليات الجراحية الفعلية)، والتعليم Education)، والألعاب والترفيه، فضلاً عن إمكانية استخدام هذه التقنية في التجارة الإلكترونية E-commerce). يُمكن استخدام تقنية الواقع الافتراضي لبناء متاجر ومحلات افتراضية، كما يُمكن الاستفادة من هذه التقنية في الحملات الترويجية والدعائية عبر الإنترنت.)
وقد طُوِّرت لغة نمذجة الواقع الافتراضي Virtual Reality Modeling Language-VRML)؛ لتكون وسيلة لتضمين ملفات الواقع الافتراضي في صفحات الويب. ولكن، تنبغي الإشارة هنا إلى أن وجود ملفات الواقع الافتراضي في صفحات الويب لا يعني أن مشاهدتها متاحة للجميع، إذ إن هذا الأمر يحتاج إلى بعض المتطلَّبات التي سنتناولها في الفقرات التالية.
ما هي متطلَّبات عرض ومتابعة مشاهد الواقع الافتراضي؟
أولاً: العتاد hardware)
يمكن للزائر متابعة عروض الواقع الافتراضي بوساطة شاشات من نوع خاص، ولكن متابعة العروض عبر هذه الشاشات لن ترقى إلى مستوى الجودة الذي يُتيحه كل من الأدوات التالية:
1. المِرقاب الرأسي Head Mount Display-HAD)
يتخذ المرقاب الرأسي شكل الخوذة، وهو يُرتَدى على الرأس، ويوجد فيه شاشتان صغيرتان تصل إليهما المعلومات اللازمة لتكوين الانخداع البصري الذي ينقل الزائر إلى الواقع الافتراضي.
2. المِرقاب المحيطي Binocular Omni-Orientation Monitor-BOOM)
يشبه هذا المرقاب- من حيث المبدأ- المرقاب الرأسي، إلا إنه لا يُرتَدى على الرأس، بل يكون مُثبَّتاً أمام المستخدمين، وهو يتضمَّن مجموعة من الحساسات sensors) التي تنقل إلى المستخدِم بعض المؤثرات الواقعية مثل الحساسات التي تُستَخدم في التطبيقات الطبية، إذ قد تُعطي هذه الحساسات- مثلا- أثر لمس القلب أثناء الجراحة).
3. الكهف Cave Automatic Virtual Environment-CAVE):
يُبنى الكهف على شكل غرفة مكعبة الشكل، ويتم إسقاط الصور من أربعة اتجاهات الأمام والأعلى واليمين واليسار)، بحيث يتمكن أي زائر لهذه الغرفة من مشاهدة ومتابعة عروض الواقع الافتراضي- من أي مكان في الغرفة- بوساطة نظارات بسيطة.
ثانياً: البرمجيات
قد تكون البرامج الخاصة بعرض مشاهد الواقع الافتراضي ملحَقات برمجية يتم تضمينها في برنامج الاستعراض الخاص بالإنترنت، أو قد تكون برامج استعراض مستقلة.
ومن أشهر الملحقات البرمجية الخاصة بعرض ومتابعة مشاهد الواقع الافتراضي الملحق البرمجي Live 3D من شركة نيتسكيب، والملحق البرمجي Meme من شركة Immersive Systems Inc.
ما هي متطلَّبات بناء عروض الواقع الافتراضي؟
أولا: العتاد
تبعا لدرجة تعقيد وجودة العرض المطلوب بناؤه، فإنك قد تحتاج إلى جميع أو بعض أنواع العتاد التالية:
• بطاقات توليد الصور Image generators)
• أجهزة التحكم بالحركة وأجهزة تحليل الأفعال Manipulation and Control Devices).
• الماوس.
• عصا الألعاب Joystick)
• القفاز الآلي Instrumented glove).
• أدوات تعقّب الموقع Position Tracking).
• الحساسات ما فوق الصوتية Ultrasonic sensors).
• المتعقِّبات المغناطيسية Magnetic trackers).
• أجهزة التعقب الضوئية Optical position tracking systems).
ثانيا: البرمجيات
تُصنَّف البرامج المستخدَمة في بناء مشاهد الواقع الافتراضي إلى نوعين أساسين:
أ - أطقم الأدوات البرمجية Toolkits)
تتكوَّن من مجموعة من المكتبات البرمجية Libraries) المُعَدَّة غالبا للغة البرمجة سي أو سي++، ويجب على من يستخدمها أن يكون مُلِماً بالبرمجة لِيُحسِن استخدامها.
ب - أنظمة التأليف Authoring systems)
تختلف أنظمة التأليف عن أطقم الأدوات، فهذه الأنظمة برامج قائمة بذاتها، ولها واجهة استخدام خاصة بها تساعد المصمم على بناء مشاهد الواقع الافتراضي، وذلك دون الحاجة إلى معرفة المصمِّم بالبرمجة.
وفي الغالب، تكون عروض الواقع الافتراضي المُعَدَّة برمجياً أي باستخدام أطقم الأدوات) أسرع وأدق من نظيرتها المُعَدَّة بوساطة أنظمة التأليف، وذلك يعود إلى أن البرمجة تختصر بعض المراحل في عملية ترجمة العروض إلى لغة الآلة Compiling).
وتنبغي الإشارة إلى أنه يوجد على الويب بعض البرامج المجانية التي تُتيح بناء عروض بسيطة من عروض الواقع الافتراضي. ومن هذه البرامج البرنامج ACK3D والبرنامج Gossamer.

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

2- ابنى صفحتك :
هذه بالطبع هى اهم الخطوات وهى خطوة تصميم وبناء الصفحة . ولكى تصمم وتبنى صفحتك يمكنك استخدام احد الإجرائين أو إستخدامهما معا :
- يمكنك بناء موقعك بإستخدام احد برامج تصميم الصفحات والتى تمكنك من بناء صفحتك دون الحاجة الى تعلم لغة ال HTML . ومن هذه البرامج برنامج Front Page Express وهو برنامج مجانى يأتى مع حزمة Intrnet Explorer المجانية.
( لتعلم كيف تبني صفحتك بإستخدام فرنت بيج اكسبريس إضغط هنا)
- أو يمكنك بناء صفحتك بإستخدام لغة 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 والذي شرحناه في صف