outlaw
02-03-2002, 11:02 PM
بسم الله الرحمن الرحيم
تسمح لغة HTML الديناميكية، للمؤلفين على شبكة ويب، القيام بأعمال أكثر من أي وقت مضى -بل والقيام بها بشكل أكثر دقة.
وإن المواقع التي تبقى ستاتيكية (ساكنة) على شبكة ويب، مآلها حتماً إلى الزوال. ولا نتوقع من المواقع أن تتغير يومياً فحسب، بل أن تزوّدنا، أيضاً، بمستويات متطوّرة من التفاعلية، بالإضافة إلى احتوائها على تأثيرات خاصة (special effects)، تتفوق في إمكانياتها على أكثر العروض التقديمية (presentations) تطوّراً. ونتوقع، أيضاً، استمرار ظهور تقنيات جديدة، أفضل من سابقتها، لدعم الوسائل التي تحقق لنا ذلك. وتعتبر لغة HTML الديناميكية، من أحدث هذه التقنيات، وهي تعدنا بتحسين تصميم وإمكانيات صفحات ويب التي ننشئها. وكما أصبح مألوفاً على حلبة إنترنت، فإن اللاعبين الرئيسيين، وهما شركة Microsoft Corp. وشركة Netscape Communications Corp.، قد طوّرتا إصدارتين مستقلتين ومختلفتين تماماً، من هذه التقنية. ونتيجة لذلك، فإن موقعك الديناميكي الرائع على شبكة ويب، قد يعمل مع أحد المتصفّحات، ولا يعمل مع الآخر.
ماذا تفعل إذا كنت من الناشرين على شبكة ويب؟ هل تختار إحدى إصدارات لغة HTML الديناميكية، وتفضلها على الإصدارات الأخرى؟ أم أن هناك طريقة لإنشاء صفحات ديناميكية، يمكنها أن تعمل مع متصفّح إنترنت إكسبلورر من مايكروسوفت، ومتصفّح نافيجيتور من نتسكيب؟ ولكي نساعدك على اتخاذ القرار، سنلقي في هذه الجولة نظرة على إصدارات لغة HTML الديناميكية، من كلا الشركتين، آخذين بعين الاعتبار، إمكانية إنشاء صفحات ويب يمكنها أن تعمل مع المتصفّحين.
سبر أغوار لغة HTML الديناميكية
يمكنك، باستخدام لغة HTML الديناميكية، إنشاء صفحات ويب تخلب الألباب، من خلال التأثيرات الخاصة، والرسوم المتحركة، وغيرها، بدون الاعتماد على نصوص برمجية (scripts)، أو محرّكات قواعد بيانات (database engines)، أو مئات من أسطر الشيفرة المعقّدة، على طرف المزوّد. وأحد الأهداف التصميمية الأساسية من إنشاء لغة HTML الديناميكية، هو تسهيل التعقيدات التي تتطلبها عروض الملتيميديا التفاعلية على شبكة ويب. ويتمثّل جزء مهم من هذا الهدف، في بناء إطار العمل اللازم، ضمن المتصفّح، وهذا بالضبط ما فعلته مايكروسوفت ونتسكيب، في الإصدارة 4.0 من متصفّحاتهما. والنتيجة هي أنك لست مضطراً للاعتماد على تحكمات ActiveX، أو إضافات (plug-ins) نتسكيب، أو أي من التطبيقات الأخرى المساعدة، لكي تتمكّن من تحقيق التأثيرات الخاصة، أو الرسوم المتحركة، أو أي شيء آخر، تقوم به لغة HTML الديناميكية.
إن فكرة المحتويات الديناميكية (dynamic content) ليست جديدة كلياً، في الإصدارات الحديثة من المتصفّحات. فتطبيقات الزبون والمزوّد تدعم المحتويات الديناميكية منذ فترة غير قصيرة. وإذا استخدمت مزوّداً من المزوّدات الفعالة (Active servers) من شركة مايكروسوفت، مثل Internet Information Server، فيمكنك استخدام صفحات المزوّد الفعالة (active server pages)، لتفصيل المحتويات حسب حاجات كل مستخدم من المستخدمين. وتمكّنك مزوّدات نتسكيب، أيضاً، مثل مزوّد Enterprise، أو مزوّد FastTrack، من استخدام النصوص البرمجية (scripting) على طرف المزوّد، لتخصيص المحتويات لكل مستخدم. وتمكّنك التكنولوجيا التي تستخدمها كل شركة منهما، من استخدام نصوص برمجية على طرف الزبون، لإنشاء صفحات ديناميكية على مستويات عالية من التفاعلية. ويمكن كتابة هذه النصوص البرمجية بلغات JavaScript، أو Jscript، أو VBScript، وذلك تبعاً للمتصفح الزبون، الذي تقوم بتطوير التطبيق له.
العامل المشترك بين هذه الحلول والحلول الأخرى المستخدمة لتوليد المحتويات الديناميكية، هو التعقيد. ولتوليد صفحات ويب برّاقة، وغنية بالتأثيرات، فسوف تحتاج إلى تنفيذ بعض الأعمال البرمجية القوية الضخمة. ويمكنك بفضل لغة HTML الديناميكية، إنشاء الصفحات السابقة، باستخدام الحد الأدنى من الشيفرة البرمجية. ولا تختلف الصفحة التي تستخدم لغة HTML الديناميكية لتوليد تحديثات حية (live updates)، كثيراً، من حيث المظهر، عن الصفحة الساكنة، لكن تحقيق التأثير ذاته باستخدام نصوص برمجية على طرف المزوّد، يعتبر عملاً ضخماً نسبياً.
إن المفتاح إلى لغة HTML الديناميكية، في كل من متصفّح إنترنت إكسبلورر، ومتصفّح نافيجيتور، هو آلية التحديث الحي (live update)، التي تسمح للمتصفّح بتعديل أقسام من صفحة ويب، خلف الكواليس. وبعد أن يتم تعديل الصفحة، يعيد المتصفّح تهيئتها حسب الضرورة، ويعرض التغييرات التي طرأت عليها. ويمكن لمن يشاهد الصفحة أن يرى التحديثات بشكل فوري، ولا يحتاج للانتظار حتى يقوم المتصفّح بإعادة تحميل الصفحة، أو الولوج إلى صفحة أخرى. ويجري المتصفّح التغييرات حتى بدون العودة إلى مزوّد ويب، للحصول على محتويات إضافية.
يمكن بدء التحديثات الحية، عن طريق أحداث يطلقها المستخدم والمتصفّح، أو عن طريق الموقّتات (timers). عندما يحرّك المستخدم الماوس فوق عنصر في صفحة ويب، أو ينقر زراً من الأزرار، ينطلق حدث (event) يمكن أن تتولى أمره لغة HTML الديناميكية. وتنطلق الأحداث التي يحرّضها المتصفّح، عن طريق أفعال داخلية (internal actions)، ومثال ذلك عندما ينتهي المتصفّح من جلب صفحة ويب. وتستطيع بواسطة الموقتات، استخدام نص برمجي (script)، لتحديث المحتويات على الصفحة.
لا تعتبر الأحداث (events) والموقّتات (timers) جديدة على لغة HTML الديناميكية. لكن الجديد في الأمر هو كيفية معالجتها. فبدلاً من الاعتماد على بريمجات جافا، أو تحكّمات ActiveX، أو إضافات (plug-ins) نتسكيب، يمكن للمتصفّح أن يتولى أمر التحديثات الحية بشكل مباشر. واكتشفت شركتا مايكروسوفت ونتسكيب بسرعة، إمكانية استخدام لغة HTML الديناميكية، مع الكائنات المدمجة (embeded objects)، التي تُستخدم للمناورة بلغة HTML الديناميكية، بطرق لا يمكن للمتصفّح أن يتولى أمرها بشكل مباشر، أو لتنفيذ مهام أخرى معقدة.
اتجاهان لفهم الموضوع
خلافاً للجداول (tables)، والإطارات (frames)، والعناصر الأخرى الحديثة لصفحة ويب، فإن لغة HTML الديناميكية، العائدة لشركة مايكروسوفت، لا تركّز على تقنية الواصفات (tags) الجديدة، والتحديد (markup) المعقّد. وكان أحد العوامل التصميمية المهمة بالنسبة لمايكروسوفت، هو أن تجعل لغة HTML الديناميكية امتداداً طبيعياً للتقنيات السائدة، لكي تمكّن الناشرين على شبكة ويب، من القيام بأعمال أكثر، وزيادة التعمّق، باستخدام الأدوات التي لديهم الآن. ولهذا السبب، تعتبر لغة HTML الديناميكية، من مايكروسوفت، سهلة التعلّم والاستخدام.
تم تحقيق لغة HTML الديناميكية، لشركة مايكروسوفت، كامتداد لنموذج الكائنات (object model) في متصفّح إنترنت إكسبلورر. وتتوفر هذه اللغة في الإصدارة 4.0 فقط، أو الإصدارات الأحدث منها. ويزوّدنا نموذج الكائنات في إنترنت إكسبلورر، بالوظائف الجوهرية للمتصفّح، ويعتبر مستقلاً تماماً عن نماذج الكائنات العائدة للنصوص البرمجية، ولغة ActiveX، ولغة جافا، مما يسمح لمايكروسوفت بإضافة وظائف إلى المتصفّح، مع المحافظة بسهولة على التوافقية بين إطارات العمل الموجودة سابقاً. وبفضل هذه الطريقة يمكنك التحكم والمناورة بمزايا لغة HTML الديناميكية، باستخدام البريمجات، والتحكمات، والنصوص البرمجية، التي قد تستخدم فيها لغة JScript. ويمكن أن ننظر إلى لغة HTML الديناميكية، لشركة مايكروسوفت، على أنها مزيج مختلط من النصوص البرمجية، من لغة HTML، ووظائف Cascading Style Sheets (CSS). فيمكنك، مثلاً، استخدام لغة JScript، لتغيير محتويات أي عنصر HTML بشكل ديناميكي، في صفحة ويب. ويمكنك أيضاً، أن تستخدم لغة JScript، لتغيير الطراز المرافق لأي عنصر في صفحة ويب بشكل ديناميكي.
لقد ركّزت طريقة التنفيذ التي تتبعها مايكروسوفت، بإيجاز، على إضافة وظائف إلى المتصفّح، من خلال امتدادات لغة HTML، ووظائف CSS. لكن الأمر لا يقتصر على هذه الناحية فقط، بل ستجد بعض التجديدات الرائعة جداً أثناء المقارنة بين الطريقة التي اتبعتها مايكروسوفت، وطريقة نتسكيب.
وتعتبر لغة HTML الديناميكية، العائدة لشركة نتسكيب، قوية أيضاً، لكن تنفيذها تم بطريقة مختلفة جداً، وتتضمّن مزيجاً من واصفات (tags) HTML الجديدة، وامتدادات النصوص البرمجية، وإضافات لطرازات الصفحات (style-sheet extras). وينصب التركيز على طرق جديدة لصنع الأشياء، بدلاً من توسيع التقنيات الموجودة، ولهذا توجد عدة طرق مختلفة، عادة، لتنفيذ الوظيفة ذاتها. وقد يجد المبتدئون هذا الأمر مربكاً إلى حد ما، إلا أن الناشرين أصحاب الخبرة على صفحات ويب، سيرحبون بإمكانية اختيار المسار الذي يجدونه ملائماً.
تذكّر عند الاستعداد لاستخدام لغة HTML الديناميكية، من شركة نتسكيب، أن هذه التحسينات متوفرة في الإصدارة 4.0 من نافيجيتور، أو الإصدارات الأحدث. ونظراً لأن لغة HTML الديناميكية، توسّع نموذج كائنات المتصفح، فيمكن استخدامها مع بريمجات جافا، وإضافات نتسكيب (Netscape plug-ins)، على الرغم من أن أدواتك الرئيسية للعمل ستكون من خلال لغة JavaScript. وتمكّنك مزايا جديدة في لغة JavaScript، من تحديد صفحات الطراز (style sheets)، باستخدام قواعد لغة JavaScript.
مقارنة وجهاً لوجه
على الرغم من أن متصفحي إنترنت إكسبلورر ونافيجيتور، يسلكان طريقين مختلفين في تنفيذ لغة HTML الديناميكية، إلا أنهما يتقاربان في بعض المجالات. ووجدنا أثناء التحضير لهذا المقال، سبعة تجديدات، تقدّمها كل من التقنيتين:
* محتويات ديناميكية (dynamic content)
* طرازات ديناميكية (dynamic styles)
* تحديد موضع العناصر (element positioning)
* الرسوم المتحركة (animation)
* تأثيرات الملتيميديا (multimedia effects)
* فونطات ديناميكية (dynamic fonts)
* ربط البيانات (data binding)
وسنعرض خلال مناقشة التجديدات، أربعة أمثلة توضّح بعضاً من هذه النقاط. ويمكن مشاهدة الأمثلةخلال عملها، بزيارة موقع ويب لمجلة PC Magazine الأمريكية، على العنوان www.pcmag.com.
المحتويات الديناميكية وتغيير الطراز
تمكّنك المحتويات الديناميكية (dynamic content)، وامتدادات الطرازات (style extensions)، من تغيير محتوى ومظهر صفحة ويب بعد تحميلها. ونظراً لأن جميع عناصر صفحة ويب يمكن التعبير عنها بنص برمجي، باستخدام أحداث يتحكّم بها المستخدم أو المتصفّح، فيمكنك تحويل كل عنصر من الصفحة إلى عنصر متفاعل (interactive). ويمكن للمستخدمين أن ينقروا على ترويسة جدول (table header)، على سبيل المثال، للحصول على معلومات أكثر تفصيلاً، أو تحريك المؤشر فوق عبارة مقتبسة (quotation) لإبرازها.
طوّرت مايكروسوفت مفهوم المحتوى الديناميكي وتغيّرات الطراز، بتوفير إمكانية استبدال عناصر على صفحة ويب، باستخدام طريقة (method) من لغة JScript، تدعى outerHTML، التي تطلب من لغة JScript الاستبدال الكامل للعنصر ومحتوياته. ويوجد أيضاً، طريقة تدعى innerHTML، تمكّنك من استبدال محتويات العنصر، فقط.
يبيّن الشكل 1، كيف يمكنك استبدال العناصر في إنترنت إكسبلورر. وعند تحريك مؤشر الماوس فوق عبارة "See my e-mail address"، يتم استبدال هذه العبارة بعنصر عنوان (address element)، يحتوي على عنوان بريد إلكتروني فعلي. لاحظ كيفية استخدام outerHTML لاستبدال عنصر الفقرة (paragraph element) بعنصر العنوان.
أما نتسكيب فتتّبع اتجاهاً مختلفاً جداً عن الاتجاه السابق، لتغيير الطراز والمحتويات. ويمكنك إنشاء وتعديل الطرازات، باستخدام القواعد المعرّفة في مواصفة Cascading Style Sheets Level 1، وفي قواعد لغة JavaScript لشركة نتسكيب. (إن القواعد الخاصة بلغة JavaScript، في لغة HTML لشركة نتسكيب، واحدة من الأسباب التي قد تربك المبتدئين من المستخدمين).
يمكّنك متصفّح نافيجيتور من استخدام صفحة طراز (style sheet) تقليدية، على الشكل التالي:
<STYLE TYPE=“text/css”>
H1 { font-style: italic;
font-size: 25 pt;
color: blue
}
</STYLE>
يمكّنك نافيجيتور أيضاً، من استخدام صفحة طراز جافاسكريبت، على الشكل التالي:
<STYLE TYPE=“text/
javascript”>
tags.H1.fontStyle = “italic”
tags.H1.fontSize = “25 pt”
tags.H1.color = “blue”
</STYLE>
عند مقارنة الشيفرات البرمجية في المثالين السابقين مع بعضهما البعض، نلاحظ عدة اختلافات مهمة في العينة الثانية. فسمة TYPE ترجِع إلى قواعد جافاسكريبت، بدلاً من قواعد CSS. ويتم الوصول إلى الطرازات (styles) عن طريق كائنات الواصفات (tags)، ومؤشراتها الوحيدة (للحصول على مؤشر لأي عنصر HTML، انزع الرمزين <>، من عبارة begin للعنصر).
لنلاحظ أيضاً، الطريقة التي حوّلنا فيها سمات CSS إلى خصائص جافاسكريبت. وعلى الرغم من أن السمات (attributes) المؤلفة من كلمة واحدة، تتمتع بشكل عام، بأسماء خصائص متماثلة، إلا أن السمات المؤلفة من عدة كلمات، يتم تركيبها بنزع الرموز الواصلة (hyphens) بين الكلمات، واستخدام حرف كبير في أول الكلمة الثانية والكلمات التي تليها. وتقابل سمة color في وظائف CSS، مثلاً، خاصية color في جافاسكريبت، لكن سمة font-size CSS، تصبح سمة fontSize (كما هو مبيّن في الشيفرة البرمجية السابقة).
قد يكون من المفيد أن ننسى قواعد صفحة الطراز في جافاسكريبت، ونركّز بدلاً عن ذلك، على أنه يمكن التحكم بالطراز من خلال لغة جافاسكريبت، وأن سمات وظائف CSS متوفرة كخصائص في جافاسكريبت، مما يمكّنك من كتابة نص برمجي للطرازات الديناميكية، بطريقة مشابهة تماماً للطريقة المتّبعة في لغة HTML الديناميكية، لشركة مايكروسوفت.
يبيّن الشكل 2 كيف يمكنك ديناميكياً تغيير طراز عنصر ضمن صفحة ويب. وتكون في البداية، لعنصر التقسيم (division element) خلفية حمراء اللون. وعندما تحرّك المؤشر فوق عنصر التقسيم، تتحول الخلفية إلى اللون الأصفر. وعندما تحرّكه بعيداً عن العنصر، تتحوّل الخلفية إلى اللون الأخضر. ويمكنك أيضاً، باستخدام تقنيات مشابهة، تحديث محتويات الصفحة ديناميكياً.
الرسوم المتحركة وتوضيع العناصر
تمكّنك امتدادات تحديد مواضع العناصر (positioning extensions) في وظائف CSS، من وضع العنصر في موقعه بدقة على الشاشة، عن طريق إعطاء إحداثيات X وY معينة. ولأن بإمكانك إعطاء إحداثيات على المستوي Z، فباستطاعتك تكديس العناصر فوق بعضها البعض. ويمكنك، مثلاً، وضع صورة خلف أي عنصر نصي (text element)، بإعطائها الموقع ذاته على الشاشة، واستخدام قيمة أصغر لإحداثياتها على المستوي Z.
وبينما تتضمّن قيم z المسموحة، لمتصفّح إنترنت إكسبلورر، أعداداً صحيحة موجبة وسالبة، فإن قيم z لمتصفّح نافيجيتور، يجب أن تكون 0 أو أعداداً صحيحة موجبة. وقيمة z لعناصر الصفحة العادية هي 0. وإذا أعطينا لجدول ما قيمة z تساوي 1، فسيبدو وكأنه يطفو فوق العناصر الأخرى في الصفحة. وبجعل الجدول يستجيب لأحداث مثل نقرة الماوس، يمكننا تأمين طريقة لإزاحة الجدول بعيداً، والكشف عن العناصر التي خلفه أمام المشاهد.
يمكن استخدام تقنيات مشابهة لإنشاء رسوم متحركة. وعندما ينقر المستخدم على عنصر معين، أو يحرّك المؤشر فوق هذا العنصر، تحدث إزاحة مكان توضع العنصر. ويمكن تغيير موقع العنصر، بسهولة تغيير طرازه أو محتواه. لكن إذا لم تتحكّم بسرعة الرسم المتحرّك بشكل جيد، فقد يمر العنصر عبر الصفحة بسرعة الضوء. ولإبطاء العملية، يدعم كلاً من إنترنت إكسبلورر ونافيجيتور، استخدام موقّت زمني يدعى setInterval، على الشكل التالي:
setInterval (‘methodToCall”, timeInterval)
حيث يمثّل المتغير methodInterval الطريقة الفعلية التي نستدعيها، ويمثّل المتغير timeInterval التأخير الزمني بالميللي ثانية بين استدعاءات الطرق.
يبيّن الشكل 3 كيفية استخدام موقّت في إنترنت إكسبلورر. وإذا كنت على اتصال بإنترنت، فستجد عند تشغيل البرنامج التوضيحي في موقع ويب لمجلة PC Magazine الأمريكية، صورة تنسحب ببطء عبر نافذة المتصفّح. ولأن إحداثيات الصورة على المحور z أصغر من إحداثيات العناصر الأخرى على الصفحة، فإن الصورة تتحرّك خلف الترويسة النصّية. وإذا أردت أن تنفّذ رسماً متحركاً مشابهاً، في متصفّح نافيجيتور، فلا يمكنك استخدام قيمة سالبة على المحور z، لكن تستطيع للالتفاف على هذا الأمر، إعطاء إحداثيات أكبر على المحور z للعناصر التي ترغب أن تعوم الصورة خلفها.
وستكتشف عند التعامل مع لغة HTML الديناميكية، من شركة مايكروسوفت، أن توضيع وتحريك مجموعات من العناصر، يمكن أن يتم بشكله الأفضل عن طريق جعل العناصر جزءاً من أقسام الصفحة، أو من فتحاتها، بحيث يمكنك التعامل مع مجموعة من العناصر بمجموعها، بدلاً من أن تتعامل مع كل منها على حدة.
يعالج متصفّح نافيجيتور هذا الأمر، بشكل مختلف بالطبع، حيث يقدّم مجموعة جديدة من الواصفات (tags)، المصممة لمعالجة كتل من المحتويات الموجودة ضمن صفحة ويب. وإن كل مجموعة من العناصر التي تريد تعديلها، يمكن تعريفها كطبقة مستند (document layer). ويمكن أن توضع الطبقات، وتحدّد قياساتها، مثل أي عنصر آخر، تماماً. وبإعطاء قيم مختلفة للإحداثيات على المحور z، يمكنك تكديس الطبقات فوق بعضها البعض، وفوق العناصر الأخرى. ويمكن تغيير قياس الطبقات أيضاً، وتحريكها، باستخدام طرق من كائن Layer.
يبيّن الشكل 4 كيف يمكنك إنشاء وتحريك الطبقات. وإذا حرّكت المؤشر فوق الطبقة، فإنها تنزاح نحو اليسار. وإذا أبعدت المؤشر عن الطبقة، فإنها تتحرّك نحو الأسفل. ولاحظ أثناء تفحّصك الشيفرة البرمجية، استخدام مؤشر <LAYER>.
تُذكّرنا طبقات نافيجيتور، من عدة نواحٍ، بالإطارات، وذلك لأن العنصرين يشتركان في العديد من الأشياء. فكلا الطبقات والإطارات لديها مجموعة متنوعة من السمات، ويمكن تعديلها باستخدام خصائص وطرق كائنات جافاسكريبت التي تمثلها. ومثل وجود مؤشر <NOFRAME>، يوجد أيضاً مؤشر <NOLAYER>، الذي يمكن استخدامه لتحديد المحتويات في المتصفّحات التي لا تدعم الطبقات. ويوجد حتى مؤشر <ILAYER> يستخدم لتعريف طبقات داخلية ضمن الصفحة. وعلى الرغم من أن هذه التقنية معقّدة، ويمكن أن تكون مشوشة، إلا أن الطبقات هي إحدى أهم الأسباب لاستخدام لغة HTML الديناميكية لشركة نتسكيب.
تأثيرات الملتيميديا
تتفوّق شركة مايكروسوفت بشكل واضح، على الشركات الأخرى، في مجال تأثيرات الملتيميديا. وتمكّنك لغتها HTML الديناميكية، من استخدام تأثيرات وتحوّلات خاصة، بدون الحاجة إلى كتابة نص برمجي لها. وتعتبر التأثيرات الخاصة التي لا تحتاج لنص برمجي، ممكنة، لأن إكسبلورر يدعم مرشّحات يمكن استدعاؤها كخصائص CSS. ويمكن أن تفكر بهذه المرشّحات، كمجموعة من السلوكيات مسبقة البرمجة، يمكنك تطبيقها على عناصر قابلة للتحكم بها، في صفحة ويب. ويطلق اسم آخر على العناصر القابلة للتحكم، وهو تحكّم HTML (HTML control). ووسّعت مايكروسوفت كثيراً، في الإصدارة 4.0 من إكسبلورر، تحكّمات HTML الموجودة، والتي تتضمّن الآن، الصور، والزخارف، وحقول الإدخال، والأزرار، ومناطق النصوص، والجداول، وعناصر الجدول المستقل، وتقسيمات الصفحة، وفتحات الصفحة (page spans).
إذا سبق لك أن شاهدت صورة GIF متحرّكة، وهي تخبو وتعود على الشاشة، وتمنيت أن تنشئ صورة مثلها، بدون الخوض في تعقيدات بنية ملفات الرسوميات، فإنك ستعشق مرشح الانتقال المختلط (blend-transition filter). وتستطيع باستخدام هذا المرشح، أن تخبو وتعيد العناصر التي يمكن التحكم بها. ويمكنك أن تضعف صورة عن طريق تحديد مرشح الانتقال المختلط، في سمة الطراز للصورة. وعلى سبيل المثال، فإن الصورة في المثال التالي، تخبو لمدة خمس ثوان:
<IMG ID=“image1” SRC=“sun.gif”
STYLE=“filter: blendTrans (duration=5.0)”>
يوجد مرشح آخر جيد هو مرشّح الانتقال المكشوف (reveal-transition filter). ويمكنك استخدام هذا المرشّح لتوليد انتقالات (transitions)، ضمن الصفحات، وانتقالات بين الصفحات. ويمكّنك الانتقال ضمن الصفحة، من الكشف عن أو إخفاء جدول صور (image table)، أو عناصر أخرى يمكن التحكم بها. ويمكّنك الانتقال بين الصفحات، من إنشاء عرض تقديمي على شكل سلايدات، أثناء انتقال القراء بين صفحات موقعك على ويب.
تتضمن المرشحات الأخرى مجموعة من المرشحات البصرية (visual filters)، تستطيع استخدامها لإنشاء ظل ساقط لزر، أو لقلب صورة رأساً على عقب، أو جعل جدول يبدو متوهجاً. ويلخص جدول "المرشحات المتوفرة في لغة HTML الديناميكية من شركة مايكروسوفت"، المرشحات المتوفرة واستخداماتها.
وعلى الرغم من أن السبب الرئيسي في استخدام المرشحات هو تخفيف التعقيدات، وجعل عملية تحميل الصفحة أسرع مما هي، إلا أنه يمكن بسهولة دمج تأثيرات وانتقالات متعددة ضمن النصوص البرمجية، ويمكنك استخدام مرشحات مع بعض تحكمات ActiveX. والشيء الرئيسي الذي يجب أن نتذكره مع المرشحات، هو أنه لا يمكن أن تستخدم مع أي عنصر أو تحكّم، يعمل من ضمن نافذتها، مثل الإطار الداخلي، أو تحكم النافذة.
لسوء الحظ، ليس هناك وظيفة مكافئة لمرشحات متصفّح إنترنت إكسبلورر، في متصفّح نافيجيتور. وعلى الرغم من أنه يمكن تحقيق تأثيرات وانتقالات مشابهة، من خلال النصوص البرمجية، والإضافات (plug-ins)، والبريمجات، إلا أن الزمن والجهد الكبيرين اللازمين لمحاكاة تأثيرات الملتيميديا هذه، تجعل المهمة أصعب من أن يقوم بها ناشر عادي على شبكة ويب.
الفونطات الديناميكية
تكمن فكرة الفونطات الديناميكية، في عدم حاجتك إلى التأكد من أن لدى القارئ الفونط الذي تستخدمه في صفحة ويب. وكل ما تحتاج القيام به، هو نشر مصدر (source) الفونط في موقعك على ويب، وإدخال علامة (markup) في صفحة ويب، لإعلام المتصفّح بتحميل الفونط. وعند الولوج إلى الصفحة، يسترد متصفّح القارئ الفونط المعني، ويعرض الصفحة مثلما أردنا لها أن تظهر. وعلى الرغم من أن الفونط لا يركّب بشكل دائم في كمبيوتر المستخدم النهائي، إلا أنه متوفر مؤقتاً، لصفحة ويب المعنية.
إذا تعمقنا في الفونطات الديناميكية، فسنكتشف بسرعة أن النظرية والتطبيق شيئان مختلفان. وتنفيذ الفونطات الديناميكية ليس سهلاً على المستجدين من المستخدمين. وقد تحتاج، قبل القيام بأي شيء، إلى تركيب أداة تأليف (authoring tool)، لتوليد ملفات لتعريف الفونطات، مبنية على الفونطات الموجودة في كمبيوترك. وأنت تستخدم بشكل عام، هذه الأداة لإنشاء ملف تعريف الفونط لكل عائلة من الفونطات، تريد استخدامها كفونط ديناميكي. ويدعم كلا المتصفّحين، إكسبلورر ونافيجيتور، الفونطات الديناميكية.
ربط البيانات
إذا كنت تعمل على سجلات قواعد بيانات، أو تريد استخلاص معلومات من ملفات المستندات، فإنك تحتاج إلى إلقاء نظرة معمقة على ميزة "ربط البيانات" (data binding)، التي يدعمها إكسبلورر، ولا يدعمها نافيجيتور. ويمكن باستخدام ميزة ربط البيانات، ربط عناصر في المستند مع مصدر البيانات. وعند تحميل الصفحة، يتم قراءة المعلومات الحالية من مصدر البيانات، وإدخالها ديناميكياً.
إحدى استخدامات ميزة ربط البيانات، هي القيام بعمليات بحث روتينية في قاعدة البيانات. فإذا كنت تدوّن المعلومات كل يوم، وتقوم بإنشاء تقرير موجز بالنتائج، فيمكنك استخدام ربط البيانات لانتزاع سجلات من قاعدة البيانات، وإنشاء جدول بشكل آلي، اعتماداً على السجلات. وحالما يتم تخزين السجلات في الجدول، يمكنك فلترة وتصنيف البيانات بدون العودة إلى قاعدة البيانات، أو إلى المزوّد.
الخلاصة
كشفت المقارنة التي أجريناها بين طريقة مايكروسوفت، وطريقة نتسكيب، في تنفيذ لغة HTML الديناميكية، عن فروق عديدة بين هذين النوعين من التقنيات. وتعتبر مايكروسوفت، متفوقة بوضوح من بعض النواحي، على نتسكيب، ولاسيما في مجال تأثيرات الملتيميديا، وربط البيانات. لكن علينا أن لا ننس تنوع الطريقة التي اتبعتها شركة نتسكيب، ولاسيما المزايا الفريدة، مثل الطبقات، وصفحات الطراز المبنية على لغة جافاسكريبت.
في النهاية، فإن اختيار لغة HTML الديناميكية المناسبة، يعتمد بشكل كبير، على أين وكيف تنوي استخدام صفحات ويب الديناميكية. فإذا كنت تنشر البيانات على شبكة إنترانت في شركة كبيرة، فقد تضطر لتصميم صفحات ويب آخذاً بعين الاعتبار أن قراءتها ستكون من خلال متصفّح معيّن. وباستثناء بيئات شبكات الإنترانت، ليس لديك أي سيطرة على المتصفّح الذي سيستخدم لمشاهدة موقعك على ويب. ويعتبر إنشاء صفحات HTML ديناميكية، أمراً صعباً نسبياً، لأن الصفحات المنشأة لمتصفّح معيّن لا يمكنها أن تعمل مع المتصفّحات الأخرى. وأفضل أسلوب، حالياً، هو توليد صفحات HTML ديناميكية، لا تسبب مشاكل في المتصفّحات غير المتوافقة معها. وإليك بعض النقاط التي قد تساعدك في ذلك:
* تهمل المتصفّحات الواصفات (tags)، والسمات (attributes)، التي لا تفهمها، مما يعني أنه بإمكانك استخدام واصفات وسمات HTML الديناميكية، بدون الاهتمام بما سيحدث إذا صادفها متصفّح آخر. ولهذا فإنه بإمكانك، بأمان، استخدام واصفة <LAYER> لنتسكيب، في أي صفحة ويب، تتم مشاهدتها باستخدام أي متصفّح آخر. وإن متصفّح إكسبلورر، والإصدارات السابقة من متصفّح نافيجيتور، والمتصفّحات الأخرى، ستهمل طبقات نتسكيب، وجميع عبارات التعيين المتعلقة بها.
* يزوّدنا كائن Navigator بأكثر الطرق فعالية لمنع المتصفّحات غير المتوافقة، من تنفيذ النصوص البرمجية ذات امتدادات HTML الديناميكية. ويمكنك استخدام خصائص (properties)، وطرق (methods) هذا الكائن، للتأكد من نوعية المتصفّح ومن إصدارته. وللتأكد، مثلاً، من أن زوّار موقعك، يستخدمون الإصدارة 4.0 من إنترنت إكسبلورر، أو نافيجيتور، يمكنك استخدام التحكّم التالي:
<SCRIPT LANGUAGE=“JavaScript”>
if (navigator.userAgent.indexOf
(“Mozilla/4.0”) != -1 {
//execute version 4.0 code or
//calls
} else {
//perform non-version 4.0 code or
//calls
}
</SCRIPT>
نظراً لأن خاصية userAgent، في الإصدارة 4.0 من إكسبلورر ونافيجيتور، تحتوي على عبارة Mozilla/4.0، فإن كلا المتصفّحين سينفّذ الشيفرة البرمجية المحددة في عبارة if. ولكي يقوم المتصفّحان بتنفيذ عبارات منفصلة، عليك استخدام خاصية AppName، وخاصية appVersion:
<SCRIPT LANGUAGE=“JavaScript”>
if (navigator.appVersion.charAt(0)
= = “4”) {
if (navigator.appName = =
"Netscape") {
//perform Navigator version
//4.0 code or calls
} else {
//perform Internet Explorer
//version 4.0 code or calls
}
}
</SCRIPT>
يمكنك إنشاء صفحات ديناميكية، تعمل مع متصفّح إنترنت إكسبلورر، ومتصفّح نافيجيتور، على السواء. لكن الأرضية المشتركة، بين التقنية التي تتبعها مايكروسوفت، وبين تلك التي تتبعها نتسكيب، تعتبر محدودة نسبياً، ولهذا فإنك مضطر في الوقت الحالي، إلى كتابة الشيفرة البرمجية لكل شيء مرتين. وعلى الرغم من ذلك، فإن لغة HTML الديناميكية تقدّم الكثير من المزايا، التي تبرر الجهود التي تبذلها.
مع تمنياتى للجميع بالتوفيق
outlaw
تسمح لغة HTML الديناميكية، للمؤلفين على شبكة ويب، القيام بأعمال أكثر من أي وقت مضى -بل والقيام بها بشكل أكثر دقة.
وإن المواقع التي تبقى ستاتيكية (ساكنة) على شبكة ويب، مآلها حتماً إلى الزوال. ولا نتوقع من المواقع أن تتغير يومياً فحسب، بل أن تزوّدنا، أيضاً، بمستويات متطوّرة من التفاعلية، بالإضافة إلى احتوائها على تأثيرات خاصة (special effects)، تتفوق في إمكانياتها على أكثر العروض التقديمية (presentations) تطوّراً. ونتوقع، أيضاً، استمرار ظهور تقنيات جديدة، أفضل من سابقتها، لدعم الوسائل التي تحقق لنا ذلك. وتعتبر لغة HTML الديناميكية، من أحدث هذه التقنيات، وهي تعدنا بتحسين تصميم وإمكانيات صفحات ويب التي ننشئها. وكما أصبح مألوفاً على حلبة إنترنت، فإن اللاعبين الرئيسيين، وهما شركة Microsoft Corp. وشركة Netscape Communications Corp.، قد طوّرتا إصدارتين مستقلتين ومختلفتين تماماً، من هذه التقنية. ونتيجة لذلك، فإن موقعك الديناميكي الرائع على شبكة ويب، قد يعمل مع أحد المتصفّحات، ولا يعمل مع الآخر.
ماذا تفعل إذا كنت من الناشرين على شبكة ويب؟ هل تختار إحدى إصدارات لغة HTML الديناميكية، وتفضلها على الإصدارات الأخرى؟ أم أن هناك طريقة لإنشاء صفحات ديناميكية، يمكنها أن تعمل مع متصفّح إنترنت إكسبلورر من مايكروسوفت، ومتصفّح نافيجيتور من نتسكيب؟ ولكي نساعدك على اتخاذ القرار، سنلقي في هذه الجولة نظرة على إصدارات لغة HTML الديناميكية، من كلا الشركتين، آخذين بعين الاعتبار، إمكانية إنشاء صفحات ويب يمكنها أن تعمل مع المتصفّحين.
سبر أغوار لغة HTML الديناميكية
يمكنك، باستخدام لغة HTML الديناميكية، إنشاء صفحات ويب تخلب الألباب، من خلال التأثيرات الخاصة، والرسوم المتحركة، وغيرها، بدون الاعتماد على نصوص برمجية (scripts)، أو محرّكات قواعد بيانات (database engines)، أو مئات من أسطر الشيفرة المعقّدة، على طرف المزوّد. وأحد الأهداف التصميمية الأساسية من إنشاء لغة HTML الديناميكية، هو تسهيل التعقيدات التي تتطلبها عروض الملتيميديا التفاعلية على شبكة ويب. ويتمثّل جزء مهم من هذا الهدف، في بناء إطار العمل اللازم، ضمن المتصفّح، وهذا بالضبط ما فعلته مايكروسوفت ونتسكيب، في الإصدارة 4.0 من متصفّحاتهما. والنتيجة هي أنك لست مضطراً للاعتماد على تحكمات ActiveX، أو إضافات (plug-ins) نتسكيب، أو أي من التطبيقات الأخرى المساعدة، لكي تتمكّن من تحقيق التأثيرات الخاصة، أو الرسوم المتحركة، أو أي شيء آخر، تقوم به لغة HTML الديناميكية.
إن فكرة المحتويات الديناميكية (dynamic content) ليست جديدة كلياً، في الإصدارات الحديثة من المتصفّحات. فتطبيقات الزبون والمزوّد تدعم المحتويات الديناميكية منذ فترة غير قصيرة. وإذا استخدمت مزوّداً من المزوّدات الفعالة (Active servers) من شركة مايكروسوفت، مثل Internet Information Server، فيمكنك استخدام صفحات المزوّد الفعالة (active server pages)، لتفصيل المحتويات حسب حاجات كل مستخدم من المستخدمين. وتمكّنك مزوّدات نتسكيب، أيضاً، مثل مزوّد Enterprise، أو مزوّد FastTrack، من استخدام النصوص البرمجية (scripting) على طرف المزوّد، لتخصيص المحتويات لكل مستخدم. وتمكّنك التكنولوجيا التي تستخدمها كل شركة منهما، من استخدام نصوص برمجية على طرف الزبون، لإنشاء صفحات ديناميكية على مستويات عالية من التفاعلية. ويمكن كتابة هذه النصوص البرمجية بلغات JavaScript، أو Jscript، أو VBScript، وذلك تبعاً للمتصفح الزبون، الذي تقوم بتطوير التطبيق له.
العامل المشترك بين هذه الحلول والحلول الأخرى المستخدمة لتوليد المحتويات الديناميكية، هو التعقيد. ولتوليد صفحات ويب برّاقة، وغنية بالتأثيرات، فسوف تحتاج إلى تنفيذ بعض الأعمال البرمجية القوية الضخمة. ويمكنك بفضل لغة HTML الديناميكية، إنشاء الصفحات السابقة، باستخدام الحد الأدنى من الشيفرة البرمجية. ولا تختلف الصفحة التي تستخدم لغة HTML الديناميكية لتوليد تحديثات حية (live updates)، كثيراً، من حيث المظهر، عن الصفحة الساكنة، لكن تحقيق التأثير ذاته باستخدام نصوص برمجية على طرف المزوّد، يعتبر عملاً ضخماً نسبياً.
إن المفتاح إلى لغة HTML الديناميكية، في كل من متصفّح إنترنت إكسبلورر، ومتصفّح نافيجيتور، هو آلية التحديث الحي (live update)، التي تسمح للمتصفّح بتعديل أقسام من صفحة ويب، خلف الكواليس. وبعد أن يتم تعديل الصفحة، يعيد المتصفّح تهيئتها حسب الضرورة، ويعرض التغييرات التي طرأت عليها. ويمكن لمن يشاهد الصفحة أن يرى التحديثات بشكل فوري، ولا يحتاج للانتظار حتى يقوم المتصفّح بإعادة تحميل الصفحة، أو الولوج إلى صفحة أخرى. ويجري المتصفّح التغييرات حتى بدون العودة إلى مزوّد ويب، للحصول على محتويات إضافية.
يمكن بدء التحديثات الحية، عن طريق أحداث يطلقها المستخدم والمتصفّح، أو عن طريق الموقّتات (timers). عندما يحرّك المستخدم الماوس فوق عنصر في صفحة ويب، أو ينقر زراً من الأزرار، ينطلق حدث (event) يمكن أن تتولى أمره لغة HTML الديناميكية. وتنطلق الأحداث التي يحرّضها المتصفّح، عن طريق أفعال داخلية (internal actions)، ومثال ذلك عندما ينتهي المتصفّح من جلب صفحة ويب. وتستطيع بواسطة الموقتات، استخدام نص برمجي (script)، لتحديث المحتويات على الصفحة.
لا تعتبر الأحداث (events) والموقّتات (timers) جديدة على لغة HTML الديناميكية. لكن الجديد في الأمر هو كيفية معالجتها. فبدلاً من الاعتماد على بريمجات جافا، أو تحكّمات ActiveX، أو إضافات (plug-ins) نتسكيب، يمكن للمتصفّح أن يتولى أمر التحديثات الحية بشكل مباشر. واكتشفت شركتا مايكروسوفت ونتسكيب بسرعة، إمكانية استخدام لغة HTML الديناميكية، مع الكائنات المدمجة (embeded objects)، التي تُستخدم للمناورة بلغة HTML الديناميكية، بطرق لا يمكن للمتصفّح أن يتولى أمرها بشكل مباشر، أو لتنفيذ مهام أخرى معقدة.
اتجاهان لفهم الموضوع
خلافاً للجداول (tables)، والإطارات (frames)، والعناصر الأخرى الحديثة لصفحة ويب، فإن لغة HTML الديناميكية، العائدة لشركة مايكروسوفت، لا تركّز على تقنية الواصفات (tags) الجديدة، والتحديد (markup) المعقّد. وكان أحد العوامل التصميمية المهمة بالنسبة لمايكروسوفت، هو أن تجعل لغة HTML الديناميكية امتداداً طبيعياً للتقنيات السائدة، لكي تمكّن الناشرين على شبكة ويب، من القيام بأعمال أكثر، وزيادة التعمّق، باستخدام الأدوات التي لديهم الآن. ولهذا السبب، تعتبر لغة HTML الديناميكية، من مايكروسوفت، سهلة التعلّم والاستخدام.
تم تحقيق لغة HTML الديناميكية، لشركة مايكروسوفت، كامتداد لنموذج الكائنات (object model) في متصفّح إنترنت إكسبلورر. وتتوفر هذه اللغة في الإصدارة 4.0 فقط، أو الإصدارات الأحدث منها. ويزوّدنا نموذج الكائنات في إنترنت إكسبلورر، بالوظائف الجوهرية للمتصفّح، ويعتبر مستقلاً تماماً عن نماذج الكائنات العائدة للنصوص البرمجية، ولغة ActiveX، ولغة جافا، مما يسمح لمايكروسوفت بإضافة وظائف إلى المتصفّح، مع المحافظة بسهولة على التوافقية بين إطارات العمل الموجودة سابقاً. وبفضل هذه الطريقة يمكنك التحكم والمناورة بمزايا لغة HTML الديناميكية، باستخدام البريمجات، والتحكمات، والنصوص البرمجية، التي قد تستخدم فيها لغة JScript. ويمكن أن ننظر إلى لغة HTML الديناميكية، لشركة مايكروسوفت، على أنها مزيج مختلط من النصوص البرمجية، من لغة HTML، ووظائف Cascading Style Sheets (CSS). فيمكنك، مثلاً، استخدام لغة JScript، لتغيير محتويات أي عنصر HTML بشكل ديناميكي، في صفحة ويب. ويمكنك أيضاً، أن تستخدم لغة JScript، لتغيير الطراز المرافق لأي عنصر في صفحة ويب بشكل ديناميكي.
لقد ركّزت طريقة التنفيذ التي تتبعها مايكروسوفت، بإيجاز، على إضافة وظائف إلى المتصفّح، من خلال امتدادات لغة HTML، ووظائف CSS. لكن الأمر لا يقتصر على هذه الناحية فقط، بل ستجد بعض التجديدات الرائعة جداً أثناء المقارنة بين الطريقة التي اتبعتها مايكروسوفت، وطريقة نتسكيب.
وتعتبر لغة HTML الديناميكية، العائدة لشركة نتسكيب، قوية أيضاً، لكن تنفيذها تم بطريقة مختلفة جداً، وتتضمّن مزيجاً من واصفات (tags) HTML الجديدة، وامتدادات النصوص البرمجية، وإضافات لطرازات الصفحات (style-sheet extras). وينصب التركيز على طرق جديدة لصنع الأشياء، بدلاً من توسيع التقنيات الموجودة، ولهذا توجد عدة طرق مختلفة، عادة، لتنفيذ الوظيفة ذاتها. وقد يجد المبتدئون هذا الأمر مربكاً إلى حد ما، إلا أن الناشرين أصحاب الخبرة على صفحات ويب، سيرحبون بإمكانية اختيار المسار الذي يجدونه ملائماً.
تذكّر عند الاستعداد لاستخدام لغة HTML الديناميكية، من شركة نتسكيب، أن هذه التحسينات متوفرة في الإصدارة 4.0 من نافيجيتور، أو الإصدارات الأحدث. ونظراً لأن لغة HTML الديناميكية، توسّع نموذج كائنات المتصفح، فيمكن استخدامها مع بريمجات جافا، وإضافات نتسكيب (Netscape plug-ins)، على الرغم من أن أدواتك الرئيسية للعمل ستكون من خلال لغة JavaScript. وتمكّنك مزايا جديدة في لغة JavaScript، من تحديد صفحات الطراز (style sheets)، باستخدام قواعد لغة JavaScript.
مقارنة وجهاً لوجه
على الرغم من أن متصفحي إنترنت إكسبلورر ونافيجيتور، يسلكان طريقين مختلفين في تنفيذ لغة HTML الديناميكية، إلا أنهما يتقاربان في بعض المجالات. ووجدنا أثناء التحضير لهذا المقال، سبعة تجديدات، تقدّمها كل من التقنيتين:
* محتويات ديناميكية (dynamic content)
* طرازات ديناميكية (dynamic styles)
* تحديد موضع العناصر (element positioning)
* الرسوم المتحركة (animation)
* تأثيرات الملتيميديا (multimedia effects)
* فونطات ديناميكية (dynamic fonts)
* ربط البيانات (data binding)
وسنعرض خلال مناقشة التجديدات، أربعة أمثلة توضّح بعضاً من هذه النقاط. ويمكن مشاهدة الأمثلةخلال عملها، بزيارة موقع ويب لمجلة PC Magazine الأمريكية، على العنوان www.pcmag.com.
المحتويات الديناميكية وتغيير الطراز
تمكّنك المحتويات الديناميكية (dynamic content)، وامتدادات الطرازات (style extensions)، من تغيير محتوى ومظهر صفحة ويب بعد تحميلها. ونظراً لأن جميع عناصر صفحة ويب يمكن التعبير عنها بنص برمجي، باستخدام أحداث يتحكّم بها المستخدم أو المتصفّح، فيمكنك تحويل كل عنصر من الصفحة إلى عنصر متفاعل (interactive). ويمكن للمستخدمين أن ينقروا على ترويسة جدول (table header)، على سبيل المثال، للحصول على معلومات أكثر تفصيلاً، أو تحريك المؤشر فوق عبارة مقتبسة (quotation) لإبرازها.
طوّرت مايكروسوفت مفهوم المحتوى الديناميكي وتغيّرات الطراز، بتوفير إمكانية استبدال عناصر على صفحة ويب، باستخدام طريقة (method) من لغة JScript، تدعى outerHTML، التي تطلب من لغة JScript الاستبدال الكامل للعنصر ومحتوياته. ويوجد أيضاً، طريقة تدعى innerHTML، تمكّنك من استبدال محتويات العنصر، فقط.
يبيّن الشكل 1، كيف يمكنك استبدال العناصر في إنترنت إكسبلورر. وعند تحريك مؤشر الماوس فوق عبارة "See my e-mail address"، يتم استبدال هذه العبارة بعنصر عنوان (address element)، يحتوي على عنوان بريد إلكتروني فعلي. لاحظ كيفية استخدام outerHTML لاستبدال عنصر الفقرة (paragraph element) بعنصر العنوان.
أما نتسكيب فتتّبع اتجاهاً مختلفاً جداً عن الاتجاه السابق، لتغيير الطراز والمحتويات. ويمكنك إنشاء وتعديل الطرازات، باستخدام القواعد المعرّفة في مواصفة Cascading Style Sheets Level 1، وفي قواعد لغة JavaScript لشركة نتسكيب. (إن القواعد الخاصة بلغة JavaScript، في لغة HTML لشركة نتسكيب، واحدة من الأسباب التي قد تربك المبتدئين من المستخدمين).
يمكّنك متصفّح نافيجيتور من استخدام صفحة طراز (style sheet) تقليدية، على الشكل التالي:
<STYLE TYPE=“text/css”>
H1 { font-style: italic;
font-size: 25 pt;
color: blue
}
</STYLE>
يمكّنك نافيجيتور أيضاً، من استخدام صفحة طراز جافاسكريبت، على الشكل التالي:
<STYLE TYPE=“text/
javascript”>
tags.H1.fontStyle = “italic”
tags.H1.fontSize = “25 pt”
tags.H1.color = “blue”
</STYLE>
عند مقارنة الشيفرات البرمجية في المثالين السابقين مع بعضهما البعض، نلاحظ عدة اختلافات مهمة في العينة الثانية. فسمة TYPE ترجِع إلى قواعد جافاسكريبت، بدلاً من قواعد CSS. ويتم الوصول إلى الطرازات (styles) عن طريق كائنات الواصفات (tags)، ومؤشراتها الوحيدة (للحصول على مؤشر لأي عنصر HTML، انزع الرمزين <>، من عبارة begin للعنصر).
لنلاحظ أيضاً، الطريقة التي حوّلنا فيها سمات CSS إلى خصائص جافاسكريبت. وعلى الرغم من أن السمات (attributes) المؤلفة من كلمة واحدة، تتمتع بشكل عام، بأسماء خصائص متماثلة، إلا أن السمات المؤلفة من عدة كلمات، يتم تركيبها بنزع الرموز الواصلة (hyphens) بين الكلمات، واستخدام حرف كبير في أول الكلمة الثانية والكلمات التي تليها. وتقابل سمة color في وظائف CSS، مثلاً، خاصية color في جافاسكريبت، لكن سمة font-size CSS، تصبح سمة fontSize (كما هو مبيّن في الشيفرة البرمجية السابقة).
قد يكون من المفيد أن ننسى قواعد صفحة الطراز في جافاسكريبت، ونركّز بدلاً عن ذلك، على أنه يمكن التحكم بالطراز من خلال لغة جافاسكريبت، وأن سمات وظائف CSS متوفرة كخصائص في جافاسكريبت، مما يمكّنك من كتابة نص برمجي للطرازات الديناميكية، بطريقة مشابهة تماماً للطريقة المتّبعة في لغة HTML الديناميكية، لشركة مايكروسوفت.
يبيّن الشكل 2 كيف يمكنك ديناميكياً تغيير طراز عنصر ضمن صفحة ويب. وتكون في البداية، لعنصر التقسيم (division element) خلفية حمراء اللون. وعندما تحرّك المؤشر فوق عنصر التقسيم، تتحول الخلفية إلى اللون الأصفر. وعندما تحرّكه بعيداً عن العنصر، تتحوّل الخلفية إلى اللون الأخضر. ويمكنك أيضاً، باستخدام تقنيات مشابهة، تحديث محتويات الصفحة ديناميكياً.
الرسوم المتحركة وتوضيع العناصر
تمكّنك امتدادات تحديد مواضع العناصر (positioning extensions) في وظائف CSS، من وضع العنصر في موقعه بدقة على الشاشة، عن طريق إعطاء إحداثيات X وY معينة. ولأن بإمكانك إعطاء إحداثيات على المستوي Z، فباستطاعتك تكديس العناصر فوق بعضها البعض. ويمكنك، مثلاً، وضع صورة خلف أي عنصر نصي (text element)، بإعطائها الموقع ذاته على الشاشة، واستخدام قيمة أصغر لإحداثياتها على المستوي Z.
وبينما تتضمّن قيم z المسموحة، لمتصفّح إنترنت إكسبلورر، أعداداً صحيحة موجبة وسالبة، فإن قيم z لمتصفّح نافيجيتور، يجب أن تكون 0 أو أعداداً صحيحة موجبة. وقيمة z لعناصر الصفحة العادية هي 0. وإذا أعطينا لجدول ما قيمة z تساوي 1، فسيبدو وكأنه يطفو فوق العناصر الأخرى في الصفحة. وبجعل الجدول يستجيب لأحداث مثل نقرة الماوس، يمكننا تأمين طريقة لإزاحة الجدول بعيداً، والكشف عن العناصر التي خلفه أمام المشاهد.
يمكن استخدام تقنيات مشابهة لإنشاء رسوم متحركة. وعندما ينقر المستخدم على عنصر معين، أو يحرّك المؤشر فوق هذا العنصر، تحدث إزاحة مكان توضع العنصر. ويمكن تغيير موقع العنصر، بسهولة تغيير طرازه أو محتواه. لكن إذا لم تتحكّم بسرعة الرسم المتحرّك بشكل جيد، فقد يمر العنصر عبر الصفحة بسرعة الضوء. ولإبطاء العملية، يدعم كلاً من إنترنت إكسبلورر ونافيجيتور، استخدام موقّت زمني يدعى setInterval، على الشكل التالي:
setInterval (‘methodToCall”, timeInterval)
حيث يمثّل المتغير methodInterval الطريقة الفعلية التي نستدعيها، ويمثّل المتغير timeInterval التأخير الزمني بالميللي ثانية بين استدعاءات الطرق.
يبيّن الشكل 3 كيفية استخدام موقّت في إنترنت إكسبلورر. وإذا كنت على اتصال بإنترنت، فستجد عند تشغيل البرنامج التوضيحي في موقع ويب لمجلة PC Magazine الأمريكية، صورة تنسحب ببطء عبر نافذة المتصفّح. ولأن إحداثيات الصورة على المحور z أصغر من إحداثيات العناصر الأخرى على الصفحة، فإن الصورة تتحرّك خلف الترويسة النصّية. وإذا أردت أن تنفّذ رسماً متحركاً مشابهاً، في متصفّح نافيجيتور، فلا يمكنك استخدام قيمة سالبة على المحور z، لكن تستطيع للالتفاف على هذا الأمر، إعطاء إحداثيات أكبر على المحور z للعناصر التي ترغب أن تعوم الصورة خلفها.
وستكتشف عند التعامل مع لغة HTML الديناميكية، من شركة مايكروسوفت، أن توضيع وتحريك مجموعات من العناصر، يمكن أن يتم بشكله الأفضل عن طريق جعل العناصر جزءاً من أقسام الصفحة، أو من فتحاتها، بحيث يمكنك التعامل مع مجموعة من العناصر بمجموعها، بدلاً من أن تتعامل مع كل منها على حدة.
يعالج متصفّح نافيجيتور هذا الأمر، بشكل مختلف بالطبع، حيث يقدّم مجموعة جديدة من الواصفات (tags)، المصممة لمعالجة كتل من المحتويات الموجودة ضمن صفحة ويب. وإن كل مجموعة من العناصر التي تريد تعديلها، يمكن تعريفها كطبقة مستند (document layer). ويمكن أن توضع الطبقات، وتحدّد قياساتها، مثل أي عنصر آخر، تماماً. وبإعطاء قيم مختلفة للإحداثيات على المحور z، يمكنك تكديس الطبقات فوق بعضها البعض، وفوق العناصر الأخرى. ويمكن تغيير قياس الطبقات أيضاً، وتحريكها، باستخدام طرق من كائن Layer.
يبيّن الشكل 4 كيف يمكنك إنشاء وتحريك الطبقات. وإذا حرّكت المؤشر فوق الطبقة، فإنها تنزاح نحو اليسار. وإذا أبعدت المؤشر عن الطبقة، فإنها تتحرّك نحو الأسفل. ولاحظ أثناء تفحّصك الشيفرة البرمجية، استخدام مؤشر <LAYER>.
تُذكّرنا طبقات نافيجيتور، من عدة نواحٍ، بالإطارات، وذلك لأن العنصرين يشتركان في العديد من الأشياء. فكلا الطبقات والإطارات لديها مجموعة متنوعة من السمات، ويمكن تعديلها باستخدام خصائص وطرق كائنات جافاسكريبت التي تمثلها. ومثل وجود مؤشر <NOFRAME>، يوجد أيضاً مؤشر <NOLAYER>، الذي يمكن استخدامه لتحديد المحتويات في المتصفّحات التي لا تدعم الطبقات. ويوجد حتى مؤشر <ILAYER> يستخدم لتعريف طبقات داخلية ضمن الصفحة. وعلى الرغم من أن هذه التقنية معقّدة، ويمكن أن تكون مشوشة، إلا أن الطبقات هي إحدى أهم الأسباب لاستخدام لغة HTML الديناميكية لشركة نتسكيب.
تأثيرات الملتيميديا
تتفوّق شركة مايكروسوفت بشكل واضح، على الشركات الأخرى، في مجال تأثيرات الملتيميديا. وتمكّنك لغتها HTML الديناميكية، من استخدام تأثيرات وتحوّلات خاصة، بدون الحاجة إلى كتابة نص برمجي لها. وتعتبر التأثيرات الخاصة التي لا تحتاج لنص برمجي، ممكنة، لأن إكسبلورر يدعم مرشّحات يمكن استدعاؤها كخصائص CSS. ويمكن أن تفكر بهذه المرشّحات، كمجموعة من السلوكيات مسبقة البرمجة، يمكنك تطبيقها على عناصر قابلة للتحكم بها، في صفحة ويب. ويطلق اسم آخر على العناصر القابلة للتحكم، وهو تحكّم HTML (HTML control). ووسّعت مايكروسوفت كثيراً، في الإصدارة 4.0 من إكسبلورر، تحكّمات HTML الموجودة، والتي تتضمّن الآن، الصور، والزخارف، وحقول الإدخال، والأزرار، ومناطق النصوص، والجداول، وعناصر الجدول المستقل، وتقسيمات الصفحة، وفتحات الصفحة (page spans).
إذا سبق لك أن شاهدت صورة GIF متحرّكة، وهي تخبو وتعود على الشاشة، وتمنيت أن تنشئ صورة مثلها، بدون الخوض في تعقيدات بنية ملفات الرسوميات، فإنك ستعشق مرشح الانتقال المختلط (blend-transition filter). وتستطيع باستخدام هذا المرشح، أن تخبو وتعيد العناصر التي يمكن التحكم بها. ويمكنك أن تضعف صورة عن طريق تحديد مرشح الانتقال المختلط، في سمة الطراز للصورة. وعلى سبيل المثال، فإن الصورة في المثال التالي، تخبو لمدة خمس ثوان:
<IMG ID=“image1” SRC=“sun.gif”
STYLE=“filter: blendTrans (duration=5.0)”>
يوجد مرشح آخر جيد هو مرشّح الانتقال المكشوف (reveal-transition filter). ويمكنك استخدام هذا المرشّح لتوليد انتقالات (transitions)، ضمن الصفحات، وانتقالات بين الصفحات. ويمكّنك الانتقال ضمن الصفحة، من الكشف عن أو إخفاء جدول صور (image table)، أو عناصر أخرى يمكن التحكم بها. ويمكّنك الانتقال بين الصفحات، من إنشاء عرض تقديمي على شكل سلايدات، أثناء انتقال القراء بين صفحات موقعك على ويب.
تتضمن المرشحات الأخرى مجموعة من المرشحات البصرية (visual filters)، تستطيع استخدامها لإنشاء ظل ساقط لزر، أو لقلب صورة رأساً على عقب، أو جعل جدول يبدو متوهجاً. ويلخص جدول "المرشحات المتوفرة في لغة HTML الديناميكية من شركة مايكروسوفت"، المرشحات المتوفرة واستخداماتها.
وعلى الرغم من أن السبب الرئيسي في استخدام المرشحات هو تخفيف التعقيدات، وجعل عملية تحميل الصفحة أسرع مما هي، إلا أنه يمكن بسهولة دمج تأثيرات وانتقالات متعددة ضمن النصوص البرمجية، ويمكنك استخدام مرشحات مع بعض تحكمات ActiveX. والشيء الرئيسي الذي يجب أن نتذكره مع المرشحات، هو أنه لا يمكن أن تستخدم مع أي عنصر أو تحكّم، يعمل من ضمن نافذتها، مثل الإطار الداخلي، أو تحكم النافذة.
لسوء الحظ، ليس هناك وظيفة مكافئة لمرشحات متصفّح إنترنت إكسبلورر، في متصفّح نافيجيتور. وعلى الرغم من أنه يمكن تحقيق تأثيرات وانتقالات مشابهة، من خلال النصوص البرمجية، والإضافات (plug-ins)، والبريمجات، إلا أن الزمن والجهد الكبيرين اللازمين لمحاكاة تأثيرات الملتيميديا هذه، تجعل المهمة أصعب من أن يقوم بها ناشر عادي على شبكة ويب.
الفونطات الديناميكية
تكمن فكرة الفونطات الديناميكية، في عدم حاجتك إلى التأكد من أن لدى القارئ الفونط الذي تستخدمه في صفحة ويب. وكل ما تحتاج القيام به، هو نشر مصدر (source) الفونط في موقعك على ويب، وإدخال علامة (markup) في صفحة ويب، لإعلام المتصفّح بتحميل الفونط. وعند الولوج إلى الصفحة، يسترد متصفّح القارئ الفونط المعني، ويعرض الصفحة مثلما أردنا لها أن تظهر. وعلى الرغم من أن الفونط لا يركّب بشكل دائم في كمبيوتر المستخدم النهائي، إلا أنه متوفر مؤقتاً، لصفحة ويب المعنية.
إذا تعمقنا في الفونطات الديناميكية، فسنكتشف بسرعة أن النظرية والتطبيق شيئان مختلفان. وتنفيذ الفونطات الديناميكية ليس سهلاً على المستجدين من المستخدمين. وقد تحتاج، قبل القيام بأي شيء، إلى تركيب أداة تأليف (authoring tool)، لتوليد ملفات لتعريف الفونطات، مبنية على الفونطات الموجودة في كمبيوترك. وأنت تستخدم بشكل عام، هذه الأداة لإنشاء ملف تعريف الفونط لكل عائلة من الفونطات، تريد استخدامها كفونط ديناميكي. ويدعم كلا المتصفّحين، إكسبلورر ونافيجيتور، الفونطات الديناميكية.
ربط البيانات
إذا كنت تعمل على سجلات قواعد بيانات، أو تريد استخلاص معلومات من ملفات المستندات، فإنك تحتاج إلى إلقاء نظرة معمقة على ميزة "ربط البيانات" (data binding)، التي يدعمها إكسبلورر، ولا يدعمها نافيجيتور. ويمكن باستخدام ميزة ربط البيانات، ربط عناصر في المستند مع مصدر البيانات. وعند تحميل الصفحة، يتم قراءة المعلومات الحالية من مصدر البيانات، وإدخالها ديناميكياً.
إحدى استخدامات ميزة ربط البيانات، هي القيام بعمليات بحث روتينية في قاعدة البيانات. فإذا كنت تدوّن المعلومات كل يوم، وتقوم بإنشاء تقرير موجز بالنتائج، فيمكنك استخدام ربط البيانات لانتزاع سجلات من قاعدة البيانات، وإنشاء جدول بشكل آلي، اعتماداً على السجلات. وحالما يتم تخزين السجلات في الجدول، يمكنك فلترة وتصنيف البيانات بدون العودة إلى قاعدة البيانات، أو إلى المزوّد.
الخلاصة
كشفت المقارنة التي أجريناها بين طريقة مايكروسوفت، وطريقة نتسكيب، في تنفيذ لغة HTML الديناميكية، عن فروق عديدة بين هذين النوعين من التقنيات. وتعتبر مايكروسوفت، متفوقة بوضوح من بعض النواحي، على نتسكيب، ولاسيما في مجال تأثيرات الملتيميديا، وربط البيانات. لكن علينا أن لا ننس تنوع الطريقة التي اتبعتها شركة نتسكيب، ولاسيما المزايا الفريدة، مثل الطبقات، وصفحات الطراز المبنية على لغة جافاسكريبت.
في النهاية، فإن اختيار لغة HTML الديناميكية المناسبة، يعتمد بشكل كبير، على أين وكيف تنوي استخدام صفحات ويب الديناميكية. فإذا كنت تنشر البيانات على شبكة إنترانت في شركة كبيرة، فقد تضطر لتصميم صفحات ويب آخذاً بعين الاعتبار أن قراءتها ستكون من خلال متصفّح معيّن. وباستثناء بيئات شبكات الإنترانت، ليس لديك أي سيطرة على المتصفّح الذي سيستخدم لمشاهدة موقعك على ويب. ويعتبر إنشاء صفحات HTML ديناميكية، أمراً صعباً نسبياً، لأن الصفحات المنشأة لمتصفّح معيّن لا يمكنها أن تعمل مع المتصفّحات الأخرى. وأفضل أسلوب، حالياً، هو توليد صفحات HTML ديناميكية، لا تسبب مشاكل في المتصفّحات غير المتوافقة معها. وإليك بعض النقاط التي قد تساعدك في ذلك:
* تهمل المتصفّحات الواصفات (tags)، والسمات (attributes)، التي لا تفهمها، مما يعني أنه بإمكانك استخدام واصفات وسمات HTML الديناميكية، بدون الاهتمام بما سيحدث إذا صادفها متصفّح آخر. ولهذا فإنه بإمكانك، بأمان، استخدام واصفة <LAYER> لنتسكيب، في أي صفحة ويب، تتم مشاهدتها باستخدام أي متصفّح آخر. وإن متصفّح إكسبلورر، والإصدارات السابقة من متصفّح نافيجيتور، والمتصفّحات الأخرى، ستهمل طبقات نتسكيب، وجميع عبارات التعيين المتعلقة بها.
* يزوّدنا كائن Navigator بأكثر الطرق فعالية لمنع المتصفّحات غير المتوافقة، من تنفيذ النصوص البرمجية ذات امتدادات HTML الديناميكية. ويمكنك استخدام خصائص (properties)، وطرق (methods) هذا الكائن، للتأكد من نوعية المتصفّح ومن إصدارته. وللتأكد، مثلاً، من أن زوّار موقعك، يستخدمون الإصدارة 4.0 من إنترنت إكسبلورر، أو نافيجيتور، يمكنك استخدام التحكّم التالي:
<SCRIPT LANGUAGE=“JavaScript”>
if (navigator.userAgent.indexOf
(“Mozilla/4.0”) != -1 {
//execute version 4.0 code or
//calls
} else {
//perform non-version 4.0 code or
//calls
}
</SCRIPT>
نظراً لأن خاصية userAgent، في الإصدارة 4.0 من إكسبلورر ونافيجيتور، تحتوي على عبارة Mozilla/4.0، فإن كلا المتصفّحين سينفّذ الشيفرة البرمجية المحددة في عبارة if. ولكي يقوم المتصفّحان بتنفيذ عبارات منفصلة، عليك استخدام خاصية AppName، وخاصية appVersion:
<SCRIPT LANGUAGE=“JavaScript”>
if (navigator.appVersion.charAt(0)
= = “4”) {
if (navigator.appName = =
"Netscape") {
//perform Navigator version
//4.0 code or calls
} else {
//perform Internet Explorer
//version 4.0 code or calls
}
}
</SCRIPT>
يمكنك إنشاء صفحات ديناميكية، تعمل مع متصفّح إنترنت إكسبلورر، ومتصفّح نافيجيتور، على السواء. لكن الأرضية المشتركة، بين التقنية التي تتبعها مايكروسوفت، وبين تلك التي تتبعها نتسكيب، تعتبر محدودة نسبياً، ولهذا فإنك مضطر في الوقت الحالي، إلى كتابة الشيفرة البرمجية لكل شيء مرتين. وعلى الرغم من ذلك، فإن لغة HTML الديناميكية تقدّم الكثير من المزايا، التي تبرر الجهود التي تبذلها.
مع تمنياتى للجميع بالتوفيق
outlaw