‫تكوين صفحة الويب‬

‫الدكتورة ندى الساعي‬

‫‪ISSN: 2617-989X‬‬
 ‫تكوين صفحة الويب‬
‫الدكتورة ندى الساعي‬

‫من منشورات الجامعة االفتراضية السورية‬

‫الجمهورية العربية السورية ‪2020‬‬

‫هذا الكتاب منشور تحت رخصة المشاع المبدع – النسب للمؤلف – حظر االشتقاق (‪)CC– BY– ND 4.0‬‬

‫‪https://creativecommons.org/licenses/by-nd/4.0/legalcode.ar‬‬

‫يحق للمستخدم بموجب هذه الرخصة نسخ هذا الكتاب ومشاركته وإعادة نشره أو توزيعه بأية صيغة وبأية وسيلة للنشر وألية غاية تجارية‬
‫أو غير تجارية‪ ،‬وذلك شريطة عدم التعديل على الكتاب وعدم االشتقاق منه وعلى أن ينسب للمؤلف األصلي على الشكل التالي حصرا ‪:‬‬
‫الدكتورة ندى الساعي‪ ،‬اإلجازة في اإلعالم واالتصال‪ ،‬من منشورات الجامعة االفتراضية السورية‪ ،‬الجمهورية العربية السورية‪2020 ،‬‬

‫متوفر للتحميل من موسوعة الجامعة ‪https://pedia.svuonline.org/‬‬

‫‪Web Page Creation‬‬

‫‪Nada Alsaii‬‬

‫)‪Publications of the Syrian Virtual University (SVU‬‬

‫‪Syrian Arab Republic, 2020‬‬

‫‪Published under the license:‬‬

‫‪Creative Commons Attributions- NoDerivatives 4.0‬‬

‫)‪International (CC-BY-ND 4.0‬‬

‫‪https://creativecommons.org/licenses/by-nd/4.0/legalcode‬‬

‫‪Available for download at: https://pedia.svuonline.org/‬‬

 ‫الفهرس‬
‫الوحدة التعليمية األولى‪ :‬تكوين صفحة الويب – النشأة والتطور ‪1 ..........................‬‬
‫أوالً‪ :‬المقدمة ‪2 ....................................................................................‬‬
‫ثانياً‪ :‬مفهوم الويب ‪3 ..............................................................................‬‬
‫ثالثاً‪ :‬تعريف الويب ‪5 .................................................................... Web‬‬
‫رابعاً‪ :‬مميزات وخصائص خدمة الويب ‪6 ........................................... Web‬‬
‫خامساً‪ :‬خدمة الويب ‪11 ........................................................... Web 2.0‬‬
‫سادساً‪ :‬خصائص خدمة الويب ‪13 ............................................... Web 2.0‬‬
‫سابعاً‪ :‬عيوب ‪15 ................................................................... Web 2.0‬‬
‫ثامناً‪ :‬خدمة ‪16 ..................................................................... Web 3.0‬‬
‫تاسعاً‪ :‬مميزات الويب ‪19 ......................................................... Web 3.0‬‬
‫الخاتمة ‪21 .........................................................................................‬‬
‫الخالصة ‪22 .......................................................................................‬‬
‫المراجع ‪23 ........................................................................................‬‬
‫التمارين ‪24 ........................................................................................‬‬
‫الوحدة التعليمية الثانية‪ :‬تكوين صفحة الويب – قواعد تصميم (تكوين) صفحة الويب‪26‬‬
‫أوالً‪ :‬المقدمة ‪27 ..................................................................................‬‬
‫ثانياً‪ :‬مفهوم موقع أو صفحة الويب ‪28 ........................................................‬‬
‫ثالثاً‪ :‬تصميم موقع أو صفحة الويب ‪29 .......................................................‬‬
‫رابعاً‪ :‬الخطوط اإلرشادية لتصميم مواقع و صفحات الويب ‪33 ...........................‬‬
‫الخاتمة ‪45 .........................................................................................‬‬
‫الخالصة ‪46 .......................................................................................‬‬
‫التمارين ‪47 ........................................................................................‬‬
‫المراجع ‪49 ........................................................................................‬‬
‫الوحدة التعليمية الثالثة‪ :‬البرامج التقنية المستخدمة في تصميم (تكوين) صفحة الويب ‪51‬‬
‫أوالً‪ :‬المقدمة ‪53 ..................................................................................‬‬
‫ثانياً‪ :‬البرامج المتعلقة بتصميم صفحات الويب ‪54 ..........................................‬‬
‫ثالثاً‪ :‬برامج تصميم الوسائط المتعددة المستخدمة في التصميم ‪62 ........................‬‬
‫الخاتمة ‪68 .........................................................................................‬‬
‫الخالصة ‪69 .......................................................................................‬‬
‫التمارين ‪70 ........................................................................................‬‬
‫المراجع ‪72 ........................................................................................‬‬
‫الوحدة التعليمية الرابعة‪ :‬برامج تصفح صفحات الويب وبرامج تحرير الصور ‪74 ......‬‬
‫أوالً‪ :‬المقدمة ‪75 ..................................................................................‬‬
‫ثانياً‪ :‬برامج تصفح الويب ‪76 ...................................................................‬‬
‫ثالثاً‪ :‬نشأة المتصفحات ‪77 .......................................................................‬‬
‫رابعاً‪ :‬وظائف المتصفحات ‪79 .................................................................‬‬
‫خامساً‪ :‬برامج تحرير الصور ‪81 ..............................................................‬‬
‫سادساً‪ :‬تنسيقات الصور األكثر استخداما ً عبر شبكة اإلنترنت ‪84 ........................‬‬
‫سابعاً‪ :‬أسس اختيار الصور للمواقع اإللكترونية ‪88 .........................................‬‬
‫الخاتمة ‪89 .........................................................................................‬‬
‫الخالصة ‪90 .......................................................................................‬‬
‫المراجع ‪91 ........................................................................................‬‬
‫التمارين ‪92 ........................................................................................‬‬
‫الوحدة التعليمية الخامسة‪ :‬عناصر تصميم (تكوين) صفحة الويب ‪94 ......................‬‬
‫أوالً‪ :‬المقدمة ‪95 ..................................................................................‬‬
‫ثانياً‪ :‬مواصفات مستخدمي مواقع الويب ‪96 ..................................................‬‬
‫ثالثاً‪ :‬عناصر التصميم ‪97 .......................................................................‬‬
‫رابعاً‪ :‬نماذج إدراك األلوان ‪104 ...............................................................‬‬
‫خامساً‪ :‬نظريات األلوان التي تفسر وجودها ‪107 ...........................................‬‬
‫سادساً‪ :‬عجلة األلوان ‪110 ......................................................................‬‬
‫سابعاً‪ :‬أسس وقواعد استخدام األلوان ‪111 ...................................................‬‬
‫الخاتمة ‪113 .......................................................................................‬‬
‫الخالصة ‪114 .....................................................................................‬‬
‫المراجع ‪115 ......................................................................................‬‬
‫التمارين ‪116 ......................................................................................‬‬
‫الوحدة التعليمية السادسة‪ :‬عناصر تصميم الصفحة الرئيسية ‪118 ...........................‬‬
‫أوالً‪ :‬المقدمة ‪119 ................................................................................‬‬
‫ثانياً‪ :‬تصميم الصفحة الرئيسية ‪120 ...........................................................‬‬
‫ثالثاً‪ :‬أقسام الصفحة الرئيسية ‪121 .............................................................‬‬
‫رابعاً‪ :‬قواعد تصميم الصفحة الرئيسية ‪122 ..................................................‬‬
‫خامساً‪ :‬عناصر تصميم الصفحة الرئيسية ‪123 ..............................................‬‬
‫الخاتمة ‪137 .......................................................................................‬‬
‫الخالصة ‪138 .....................................................................................‬‬
‫المراجع ‪139 ......................................................................................‬‬
‫التمارين ‪141 ......................................................................................‬‬
‫الوحدة التعليمية السابعة‪ :‬مبادئ تصميم صفحة الويب ‪142 ..................................‬‬
‫أوالً‪ :‬المقدمة ‪144 ................................................................................‬‬
‫ثانياً‪ :‬مبادئ التصميم ‪145 .......................................................................‬‬
‫أوالً‪ :‬التوازن ‪146 .............................................................................‬‬
‫ثانياً‪ :‬الوحدة ‪149 ..............................................................................‬‬
‫ثالثاً‪ :‬الحركة ‪152 ..............................................................................‬‬
‫رابعاً‪ :‬التباين ‪155 .............................................................................‬‬
‫خامساً‪ :‬المحاذاة ‪156 ..........................................................................‬‬
‫سادساً‪ :‬التناسب ‪157 ..........................................................................‬‬
‫سابعاً‪ :‬اإليقاع‪158 .............................................................................‬‬
‫الخاتمة ‪159 .......................................................................................‬‬
‫الخالصة ‪160 .....................................................................................‬‬
‫المراجع ‪161 ......................................................................................‬‬
‫التمارين ‪163 ......................................................................................‬‬
‫الوحدة التعليمية الثامنة‪ :‬تصميم الصحيفة اإللكترونية ‪165 ...................................‬‬
‫أوالً‪ :‬المقدمة ‪167 ................................................................................‬‬
‫ثانياً‪ :‬مفهوم الصحافة اإللكترونية ‪168 ........................................................‬‬
‫ثالثاً‪ :‬أنواع الصحافة اإللكترونية ‪170 .........................................................‬‬
‫رابعاً‪ :‬خصائص الصحافة اإللكترونية ‪171 ..................................................‬‬
‫خامساً‪ :‬تصميم الصحف اإللكترونية ‪173 ....................................................‬‬
‫سادساً‪ :‬أسس اإلخراج الصحفي ‪175 ..........................................................‬‬
‫الخاتمة ‪181 .......................................................................................‬‬
‫الخالصة ‪182 .....................................................................................‬‬
‫المراجع ‪183 ......................................................................................‬‬
‫التمارين ‪185 ......................................................................................‬‬
‫الوحدة التعليمية التاسعة‪ :‬عناصر تصميم الصحيفة اإللكترونية‪187 ........................‬‬
‫أوالً‪ :‬المقدمة ‪189 ................................................................................‬‬
‫ثانياً‪ :‬العناصر البنائية التيبوغرافية ‪190 ......................................................‬‬
‫‪ -‬النصوص ‪190 ...............................................................................‬‬
‫‪ -‬الخطوط ‪191 .................................................................................‬‬
‫‪ -‬العناوين والمقدمات ‪195 ...................................................................‬‬
‫‪ -‬الفواصل ‪198 ................................................................................‬‬
‫‪ -‬الصور ‪200 ..................................................................................‬‬
‫‪ -‬األلوان‪207 ............................................................. ....................‬‬
‫الخاتمة ‪209 .......................................................................................‬‬
‫الخالصة ‪210 .....................................................................................‬‬
‫المراجع ‪211 ......................................................................................‬‬
‫التمارين ‪213 ......................................................................................‬‬
‫الوحدة التعليمية العاشرة‪ :‬عناصر تصميم الصحيفة اإللكترونية – العناصر التكنولوجية‬
‫‪215 ..................................................................................................‬‬
‫أوالً‪ :‬المقدمة ‪217 ................................................................................‬‬
‫ثانياً‪ :‬العناصر البنائية التكنولوجية ‪217 .......................................................‬‬
‫‪ -‬الوسائط المتعددة ‪217 .......................................................................‬‬
‫‪ -‬الرسوم المتحركة ‪219 ......................................................................‬‬
‫‪ -‬المقاطع الصوتية الرقمية ‪224 .............................................................‬‬
‫‪ -‬مقاطع الفيديو ‪227 ..........................................................................‬‬
‫‪ -‬النص المتشعب (الفائق) ‪231 ............................................. Hypertext‬‬
‫الخاتمة ‪236 .......................................................................................‬‬
‫الخالصة ‪237 .....................................................................................‬‬
‫المراجع ‪238 ......................................................................................‬‬
‫التمارين ‪240 ......................................................................................‬‬
 ‫الوحدة األولى‬
‫تكوين صفحة الويب – النشأة والتطور‬
‫محتويات الوحدة‬
‫‪ -‬مقدمة‪.‬‬
‫‪ -‬مفهوم خدمة الويب ‪.Web‬‬
‫‪ -‬نشأة وتطور خدمة الويب ‪:Web‬‬
‫خدمة الويب ‪. Web 1.0‬‬
‫خدمة الويب ‪. Web 2.0‬‬
‫خدمة الويب ‪. Web 3.0‬‬
‫‪ -‬مميزات وخصائص خدمة الويب ‪:Web‬‬
‫الالخطية‪.‬‬
‫التفاعلية‪.‬‬
‫دعم الرسوميات‪.‬‬
‫تصميم الصفحات المتنوعة‪.‬‬
‫‪ -‬خاتمة‪.‬‬
‫األهداف التعليمية‬
‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬
‫‪ -1‬يشرح مفهوم الويب‪.‬‬
‫‪ -2‬يعدد تعريفات الويب ‪. Web‬‬
‫‪ -3‬يذكر مميزات وخصائص خدمة الويب ‪.Web‬‬
‫‪ 4‬يشرح خدمة الويب ‪.Web 2.0‬‬ ‫‪-‬‬

‫‪ -5‬يحدد خصا ئص خدمة الويب ‪.Web 2.0‬‬

‫‪ -6‬يشرح عيوب ‪.Web 2.0‬‬
‫‪ -7‬يشرح خدمة ‪.Web 3.0‬‬
‫‪ 8‬يعدد مميزات الويب ‪.Web 3.0‬‬ ‫‪-‬‬

‫‪1‬‬
 ‫الكلمات المفتاحية‪:‬‬
‫اإلنترنت – خدمة الويب ‪ – WWW‬ويب ‪ – 2.2‬ويب ‪ - 3.2‬الوسائط المتعددة – النص المتشعب –‬
‫الروابط ‪ -‬برامج التصفح – المستعرضات – ‪- Mosaic – Mozilla Firefox– Internet Explorer‬‬
‫عنوان الموقع – مجال الموقع – برتوكول نقل الملفات ‪ – FTP‬بروتوكول نقل ملفات النص الفائق‬
‫‪ –HTTP‬صفحات الويب الساكنة – صفحات الويب التفاعلية –الالخطية – التفاعل ‪ -‬الرسوميات‪.‬‬

‫أوال‪ :‬مقدمة‬

‫تُعد خدمة الويب ‪ WWW: World Wide Web‬من أهم التطورات التي حدثت في اإلنترنت‪ ،‬وقد‬
‫اعتبرها البعض الثورة الثانية في ظهور اإلنترنت‪ ،‬حيث إنها ليست سوى إحدى الخدمات المتاحة على‬
‫اإلنترنت‪ ،‬وهي التي أعطت لإلنترنت الصبغة (الشعبية) التي حولتها من جهاز بيد الخاصة من الباحثين‬
‫العلميين في مختلف التخصصات إلى وسيلة اتصال واعالم جماهيرية بيد الماليين من عامة الشعوب في‬
‫مختلف أنحاء العالم‪.‬‬
‫وفي هذه الوحدة سيتم التعرض لنشأة ظهور هذه الخدمة‪ ،‬ومفهومها وتعريفها‪ ،‬والخصائص والميزات التي‬
‫تتمتع بها‪ ،‬والتي أضفتها على شبكة اإلنترنت‪ ،‬كما سيتم التعرض إلى خدمة الويب ‪ ،Web 2.0‬وخدمة‬
‫الويب ‪ ،Web 3.0‬وهما الخدمتان اللتان تمثالن تطو اًر في خدمة الويب‪ ،‬والتي أوصلت المستخدمين‪،‬‬
‫إلى عالم الوسائل التفاعلية المتمثلة في المدونات ومواقع التواصل االجتماعية‪.‬‬

‫‪2‬‬
 ‫ثانيا‪ :‬مفهوم الويب‬
‫كانت الخدمات التي َّ‬
‫تقدم عبر اإلنترنت‪ ،‬قبل ظهور‬
‫الويب‪ ،‬حك اًر على الجامعيين والباحثين في المؤسسات‬
‫العلمية‪ ،‬ومطوري أنظمة الكمبيوتر‪ ،‬فكان هؤالء يتبادلون‬
‫المعلومات المفهرسة التي تساعدهم في إنجاز أعمالهم‬
‫البحثية والعلمية‪ ،‬وتم ّكنهم من إعداد محاضراتهم التي‬
‫يقدمونها للطالب في الجامعات وغيرها‪ ،‬كما تم ّكنهم من‬
‫إرسال الرسائل اإللكترونية واستقبالها‪ ،‬هذا إضافة إلى‬
‫استخدامها من قبل الباحثين في الشؤون العسكرية‬
‫والعاملين في المؤسسات العسكرية‪ ،‬لكن هذا الوضع‬

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

‫وقد تم استخدام برامج عارضات الويب (برامج التصفح)‬

‫كمرجع لباليين من حجم المعلومات على اإلنترنت‪،‬‬
‫وتستخدم الويب أسلوب النص الفائق أو المتشعب‬
‫‪ Hypertext‬لنشر النصوص‪ ،‬ويتيح هذا النظام البحث في‬
‫وتتابع روابط النص الفائق‬
‫َ‬ ‫وثائق معقدة داخل الشبكة‪،‬‬
‫(الويب) في تتبع األفكار والموضوعات من صفحة ويب‬
‫‪Webpage‬‬

‫‪3‬‬
‫إلى صفحة أخرى بغض النظر عما إذا كانت هذه الصفحة مخزنة في الحاسب نفسه والمسمى خادم‬
‫الويب ‪ ،Web Server‬أو موزعة على خادمات أخرى منتشرة في أنحاء العالم‪ ،‬لذا فهي تسمح للمستخدم‬
‫باالنتقال بسرعة من مصدر معلومات إلى آخر بمجرد الضغط على المصدر‪.‬‬
‫فالويب ‪ Web‬إذاً طريقة لتنظيم المعلومات بحيث يستطيع أي كمبيوتر في العالم أن يعمل وفق قواعد‬
‫معينة للوصول إلى تلك المعلومات‪ ،‬وتُسمى القواعد التي تحدد كيفية الوصول إلى الملفات ونقلها عبر‬
‫الويب بروتوكوالت نقل النصوص التشعبية ‪.Hypertext Transfer Protocol‬‬

‫دور العالم الفيزيائي البريطاني ‪ Tim Berners-Lee‬في تطوير خدمة الويب‪:‬‬

‫قد طور خدمة الويب في عام ‪ 1991‬العالم الفيزيائي‬

‫البريطاني ‪ Tim Berners-Lee‬في المعمل‬
‫تكون‬
‫األوروبي لفيزياء الجزئيات في جنيف بحيث ّ‬
‫نظاماً لربط المعلومات يتضمن ثالثة عناصر‬
‫رئيسية‪:‬‬

‫‪ -1‬طريقة إلعطاء كل موقع عنواناً فريداً‪.‬‬

‫‪ -2‬بروتوكول لنقل تلك البيانات المرتبطة بعضها مع بعض‪.‬‬
‫‪ -3‬لغة لترميز المعلومات‪.‬‬

‫ونظ اًر للحاجة إلى تنسيق أساسي ألي مستند يميزه عن غيره من أجل تمرير المعلومات المرسلة‬
‫والمستقبلة بين أنظمة الحاسبات‪ ،‬فقد طور ‪ Tim Berners‬لغة ترميز النصوص التشعبية ‪HTML:‬‬
‫‪ Hypertext Markup Language‬باالعتماد على لغة سابقة هي لغة الترميز المعممة والقياسية‬
‫‪ ،SGML :Standard Generalized Markup Language‬وتتميز لغة ‪ HTML‬بالبساطة‬
‫والشمولية وعدم الحاجة إلى الترقية‪ ،‬بمعنى أن ‪ Tim Berners‬أضاف في سعيه لتنظيم نمو الويب‬
‫بديهية أخيرة بخصوص اإلصدارات الجديدة‪ ،‬وهي أنه يجب أال تلغى اإلصدارات القديمة من اللغة‪ ،‬وبهذه‬
‫الطريقة فإن نمو الويب سيتطلب فقط إضافات جديدة على اإلصدارات القديمة‪.‬‬

‫‪4‬‬
 ‫ثالثا‪ :‬تعريف الويب ‪Web‬‬
‫اختلفت تعريفات الويب ‪ Web‬تبعاً الختصاصات الباحثين الذين استخدموا ودرسوا هذه الخدمة‪:‬‬
‫‪ ‬فذوو الخلفيات التقنية من مطوري الشبكات ومصممي المواقع والمبرمجين يركزون في تعريفهم‬
‫لها على الوصف التقني‪ ،‬كطبيعة اللغة المستخدمة في البرمجة والمستخدمة في كتابة الوثائق‬
‫والبروتوكوالت التي تنظم التواصل‪.‬‬
‫‪ ‬بينما يركز اإلعالميون على المضمون والميزات والخصائص التي تحملها‪ ،‬ومن هذه التعريفات‬
‫ما يلي‪:‬‬
‫‪ -1‬الويب ‪" Web‬هي مجموعة من الملفات المرتبطة فيما بينها‪ ،‬والمتضمنة لملف افتتاحي يسمى‬
‫الصفحة الرئيسية ‪ ،Home Page‬والتي يمكن الدخول من خاللها إلى بقية الوثائق والصفحات‬
‫المتضمنة في الموقع‪ ،‬ويتم الوصول إلى الموقع من خالل كتابة اسم الموقع"‪.‬‬
‫‪ -2‬وفي تعريف آخر للويب ‪ Web‬أنها "ملف أو صفحة‪ ،‬أو مجموعة ملفات يتم تخزينها في‬
‫حاسوب خادم ‪ Server‬يمكن الدخول إليها عبر شبكة اإلنترنت‪ ،‬ولكل موقع صفحة رئيسية‬
‫تُصمم غالباً لكي تكون الملف األول الذي يزوره المتصفح ليأخذ فكرة عامة عن مضامين الموقع‪،‬‬
‫تتضمن الملفات الموجودة بالموقع وصالت نصية أو رسومية يتم النقر عليها باستخدام جهاز‬
‫مدخالت مثل الفأرة قصد االنتقال من ملف إلى آخر داخل الموقع أو خارجه"‪.‬‬
‫ويعرف حسني محمد نصر الويب على أنه‪" :‬نظام من خادمات الكومبيوتر يدعم الوثائق‬
‫‪ّ -3‬‬
‫المكتوبة بلغة النص الفائق‪ ،‬ويقوم بالربط بين الوثائق بعضها البعض سواء كانت وثائق نصية أم‬
‫غرافيكية أم صوتية أم ملفات فيديو‪ ،‬وهو مجموعة من المعلومات المترابطة والمخزنة في أجهزة‬
‫كومبيوتر عديدة في جميع أنحاء العالم يتم تسليمها عبر اإلنترنت بشكل صفحة أو صفحات‬
‫يطلق عليها صفحة الويب ‪ ،Web page‬والذي قد يحتوي نصاً أو يشير إلى ملفات أخرى‪،‬‬
‫وهذه الملفات قد تحوي صو اًر أو لقطات فيديو أو مقاطع سمعية"‪.‬‬
‫‪ -4‬ويقول عباس مصطفى‪" :‬لقد نشأت الويب على اإلنترنت وهي تستفيد من آليات اإلنترنت‬
‫وأجهزتها وبنيتها التحتية التي هي مجموعة من الشبكات والملقمات واألجهزة في جميع أنحاء‬
‫العالم‪ ،‬والعناصر األساسية لإلنترنت هي الحواسيب حول العالم‪ ،‬بينما الويب هي مجموعة أدوات‬
‫غير مادية تسمح بتبادل المعلومات بين المستخدمين أينما كانوا"‪.‬‬

‫‪5‬‬
‫‪ -5‬ومن وجهة نظر اإلعالميين فإن الويب ‪ Web‬هي "رسائل تواصلية مخزنة في جهاز كمبيوتر‬
‫(خادم) يتم الوصول إليها بالدخول إلى اإلنترنت‪ ،‬باستخدام أحد متصفحاتها‪ ،‬ويتخذ موقع الويب‬
‫شكل الصفحات أو الوثائق المكتوبة بلغة النص الفائق التشعبي‪ ،‬ويتخذ من الصفحة الرئيسية‬
‫واجهةً له‪ ،‬ويتم التنقل بينها بواسطة وصالت عادية أو تشعبية"‪.‬‬
‫وتق َّدم الرسائل التواصلية بشكل منفرد (نص أو صورة أو صوت أو فيديو)‪ ،‬أو وسائط متعددة‬
‫‪ ،Multimedia‬وغالباً ما تقدم مواقع الويب خدمات تهدف إلى تعزيز التواصل والتفاعل مع‬
‫المتلقي‪ ،‬لذلك يمكن التعامل مع هذه المواقع على أنها وسائل اتصال إلكترونية جماهيرية تتكامل‬
‫فيها الرسالة شكالً ومضموناً مع الوسيلة والمتلقي‪.‬‬

‫رابعا‪ :‬مميزات وخصائص خدمة الويب ‪Web‬‬

‫تتمتع الويب بسمات تميزها عن بقية خدمات‬

‫اإلنترنت األخرى‪ ،‬وهي السمات والخصائص‬
‫التي أصبحت سمة خاصة باإلنترنت نفسها‪،‬‬
‫وبكل التطبيقات التي ظهرت عليها‪ ،‬ومن هذه‬
‫الخصائص‪:‬‬

‫أ‪ -‬الالخطية‪ :‬بمعنى أن صفحات الويب وملفاتها‬

‫ترتبط بشكل مترابط ومتشعب‪ ،‬ويستطيع جميع‬

‫المستخدمين الوصول إلى كل صفحة من‬
‫صفحاتها عن طريق االرتباطات التشعبية‪ ،‬كما‬
‫تسمح لهم باختيار المسار الذي يريدونه‪.‬‬

‫‪6‬‬
‫ب‪ -‬التفاعلية‪ :‬تُعد خدمة الويب ‪ Web‬األساس في إنشاء المواقع اإللكترونية الداعية إلى المشاركة‬

‫والتفاعل على الويب ‪ ،Web‬حيث تُستخدم مع أدوات تفاعلية أخرى‪ ،‬مثل‪ :‬البريد اإللكتروني‪،‬‬
‫وغرف المحادثة والنقاش‪ ،‬أو المؤتمرات عن بعد‪ ،‬أو مواقع التواصل االجتماعي‪ ،‬وغيرها من‬
‫أدوات االتصال والتفاعل التي تجعل االتصال بمالك الموقع أو إعطاء رأيه حول منتج معين أو‬
‫االستفسار عن معلومات معينة ممكنة ومتاحة‪ ،‬وطبقاً لوجود التفاعل على صفحات الويب أو‬
‫غيابه‪ ،‬يمكن تقسيمها إلى نوعين‪:‬‬
‫‪ .1‬صفحات الويب الساكنة ‪ :Static Web Pages‬وهي صفحات يغيب التفاعل مع‬
‫ويكتفى بقراءة الصفحة لعدم وجود أدوات التفاعل‪ ،‬مثل االكتفاء بقراءة محتوى‬
‫محتواها‪ُ ،‬‬
‫الموضوع الذي يتم عرضه بوسائل متعددة غير النشطة‪ ،‬أو صفحة من الكتب‪ ،‬أو المراجع‬
‫أو المقاالت والمراجع‪ ،‬وغيرها من أشكال‬
‫المحتوى التي ال تحتاج من المستخدم‬
‫سوى القراءة أو اإلحاطة‪ ،‬فهذه الصفحات‬
‫تسير باتجاه واحد من الكاتب أو المؤسسة‬
‫إلى المستخدم‪ ،‬دون أن يكون هناك رجع‬
‫صدى أو رد فعل‪ ،‬أو يمكن أن تكون من‬
‫المستخدم إلى الموقع تعليقاً على بعض‬
‫المشاركات والموضوعات من دون رد فعل‬
‫من المؤسسة نفسها‪.‬‬
‫التفاعلية‬ ‫الويب‬ ‫صفحات‬
‫‪:Interactive‬‬ ‫‪Web‬‬ ‫‪Pages‬‬
‫وتصمم هذه الصفحات بحيث تحوي‬
‫مع‬ ‫بالتفاعل‬ ‫الخاصة‬ ‫األدوات‬
‫محتواها‪ ،‬كإتاحة الوصول إلى الروابط‬
‫التي تحويها‪ ،‬أو البحث في قواعد‬

‫‪7‬‬
‫البيانات والمعلومات المرتبطة بموضوعاتها‪ ،‬أو اإلجابة عن األسئلة‪ ،‬أو طلب المساعدات‪،‬‬
‫أو إبداء الرأي بموضوعات معينة‪.‬‬

‫هناك ثالثة أشكال للتفاعل عبر صفحات الويب هي‪:‬‬

‫‪ .1‬التفاعل الوظيفي ‪ :Functional Interactivity‬وهو أبسط أشكال التفاعل‪ ،‬ويركز‬
‫على المهمة األساسية من خالل اإلبحار داخل صفحات الويب‪ ،‬سواء عن طريق القوائم‬
‫المنسدلة أم أشرطة التصفح أم محركات البحث أم من خالل روابط النصوص التشعبية‪،‬‬
‫وهذان األخيران من أكثر التفاعالت المالحية استخداماً‪ ،‬إذ يستطيع المستخدم النقر على‬
‫أي رابط نصي لينقله إلى صفحة أخرى‪ ،‬أو النقر على زر تشغيل فيلم أو سماع‬
‫موسيقى‪ ،‬وهناك أشكال أكثر تعقيداً لهذا النمط من التفاعل‪ ،‬ويتمثل في العمليات التي‬
‫تتيح للمستخدم إمكانية تغيير مظهر الويب‪.‬‬

‫‪.2‬تفاعل االستجابة ‪ :Feedback Interactivity‬في هذا النمط من التفاعل يبحث‬

‫المستخدم عن المعلومات ألغراض مختلفة‪ ،‬وقد ُيطلب منه إدخال بعض المعلومات في‬
‫مستطيل البحث مثل إدخال البريد اإللكتروني أو ملئ استمارة معينة‪ ،‬وهذا يمثل استجابة من‬

‫‪8‬‬
‫طرف واحد حيث يستجيب المستخدم لألسئلة المطروحة عن طريق إدخال البيانات في‬
‫الحقول المناسبة‪.‬‬

‫‪ .2‬التفاعل المباشر ‪ :Real-Time Interactivity‬وهو التفاعل الذي يمكن من خالله‬

‫إجراء اتصاالت مباشرة بين المستخدمين بعضهم ببعض بشكل مباشر من خالل برامج‬
‫المراسالت الفورية مثل (‪ ،)Yahoo Messenger and MSN Messenger‬وكذلك‬
‫برامج مراسالت بين أعضاء المنظمة الواحدة‪ ،‬ويتم هذا التفاعل خالل االتصال المباشر‬
‫عبر اإلنترنت‪ ،‬ويمكن خالل هذا االتصال تبادل النصوص (الكتابة المباشرة)‪ ،‬والصور‬
‫ومقاطع الفيديو والموسيقا والكالم المباشر‪.‬‬

‫‪9‬‬
 ‫ت‪.‬دعم الرسوميات‪ :‬تعد الويب ‪ Web‬الخدمة الوحيدة‬
‫القادرة حتى اآلن على التعامل مع أي نوع من أنواع‬
‫الرسوميات‪ ،‬وذلك بسبب قدرة مستعرضاته (برامج‬
‫التصفح) على دعم الرسوم واألنواع األخرى من الوسائط‪،‬‬
‫وهذا الدعم للرسوم هو الذي زاد من شعبية الويب‬
‫وانتشارها‪.‬‬

‫ت‪ -‬تصميم الصفحات المتنوعة‪ :‬أضافت خدمة الويب لإلنترنت إمكانية إنشاء المواقع‬

‫اإللكترونية‪ ،‬والصفحات التي تخدم أغراضاً مختلفة‪ :‬سياسية واعالمية واقتصادية وغيرها‪،‬‬
‫وم ّكنت هذه الخدمة المؤسسات واألفراد من وضع أنفسهم (عبر مواقعهم وصفحاتهم) على‬
‫اإلنترنت‪ ،‬تحت عناوين متفردة ومميزة يستطيع المستخدم الوصول إليها دون جهد ُيذكر‪.‬‬

‫‪10‬‬
 ‫خامسا‪ :‬خدمة الويب ‪Web 2.0‬‬
‫أدى ظهور خدمة الويب ‪ Web‬إلى تطور نمو‬
‫اإلنترنت من خالل تطور تدريجي متسارع لتقنيات‬
‫الشبكات االجتماعية وبرامج التصفح‪ ،‬وطرق‬
‫معالجة البيانات اإللكترونية حتى وصل عدد‬
‫المستخدمين في العالم إلى الماليين‪،‬‬

‫ومن خالل اعتماد أساليب للتصفح أكثر سهولة‪ ،‬ومن خالل الكتابة والقراءة ودخول أدوات جديدة مثل‬
‫المشاركة االجتماعية بين المستخدمين‪ ،‬وتطور إمكانيات تحكم المستخدمين بالمواقع التي يفضلونها‪ ،‬وقد‬
‫أدت هذه المرحلة إلى ظهور مصطلح جديد هو ‪ Web 2.0‬وهو الجيل الثاني من الشبكة العالمية‪.‬‬
‫واذا كانت خدمة الويب ‪ُ Web 1.0‬بنيت على أساس العالقة (من موقع واحد إلى مستخدمين متعدد)‪،‬‬
‫‪ ،One to many relationship‬فإن خدمة الويب ‪ Web 2.0‬تسعى إلى إيجاد مفهوم جديد مبني‬
‫على عالقة (من متعدد إلى متعدد) ‪،Many to many relationship‬‬

‫‪11‬‬
 ‫وترتكز بنية هذه الخدمة على إيجاد إنترنت جديدة أكثر إنسانية وأكثر‬
‫تفاعلية من اإلنترنت السابقة‪ ،‬حيث سيكون المفتاح لفهم العالقات في‬
‫خدمة الويب ‪ Web 2.0‬إدراك أن محوره هو عدد كبير من‬
‫المستخدمين لعدد كبير من المستخدمين‪ ،‬وقد جعل ذلك اإلنترنت‬
‫تتحول من مصدر للمعلومات إلى مصنع للمعلومات التفاعلية‪.‬‬
‫وخدمة الويب ‪ Web 2.0‬الجيل الثاني من المجتمعات االفتراضية‬
‫والخدمات المستضافة عبر اإلنترنت ليست أداة جديدة وال تقنية أخرى‪،‬‬

‫وال هي لغة برمجة‪ ،‬إنها مجرد مفهوم (‪ ،)Concept‬وبالتالي فإن أي موقع إنترنت يفلح في تغيير تركيبته‬
‫الداخلية من (واحد‪ ،‬متعدد) إلى (متعدد‪ ،‬متعدد) سيصبح جزءاً من عالم الويب ‪.Web 2.0‬‬

‫وقد تم تداول هذا المفهوم للمرة األولى في دورة نقاش بين شركة ‪ O’Reilly‬اإلعالمية المعروفة‪،‬‬
‫ومجموعة ‪ Media Live‬الدولية لتكنولوجيا المعلومات في مؤتمر تطوير الويب الذي ُعقد في سان‬
‫فرانسيسكو عام ‪ ،2223‬وقد ذكر هذا المصطلح نائب رئيس شركة ‪،)Dale Dougherty( O’Reilly‬‬
‫في محاضرة خالل هذه الدورة للتعبير عن مفهوم جيل جديد لإلنترنت‪ ،‬ومنذ ذلك الحين ُعد كل ما هو‬
‫جديد وذو شهرة على الشبكة العالمية جزءاً من ‪.Web 2.0‬‬
‫وقد عد البعض أن موجة المواقع الجديدة التي تعتمد في تكوينها‬
‫على الشبكات االجتماعية‪ Social Networks‬مثل برمجيات‬
‫الـ‪ ،wiki‬وهي الصفحات التي يستطيع زائر الموقع التعديل‬
‫عليها‪ ،‬أو على المواقع التي تسمح للمستخدم بوضع مدونته على‬
‫اإلنترنت بحيث يستطيع اآلخرون االطالع عليها والبحث فيها‬
‫من تقنيات الويب ‪ ،Web 2.0‬كما عد البعض أيضاً أن‬
‫المدونات ‪ ،Blogs‬وتقنية الـ ‪ RSS‬وغيرها من التقنيات التي‬

‫‪12‬‬
‫يمكن من خاللها التعديل واإلضافة من قبل المستخدمين من تقنيات الويب ‪ ،Web 2.0‬حتى يمكن‬
‫القول إن الويب ‪ Web 2.0‬هي جميع المواقع التي تعتمد على تفاعل المستخدمين فيما بينهم‪.‬‬

‫ومن المستحدثات التي صاحبت ظهور خدمة الويب ‪ Web 2.0‬تقنيات تعمل على رفع مستوى كفاءة‬
‫وسهولة تصفح المستخدم العادي للتطبيقات‪ ،‬والمواقع الموجودة على الشبكة‪ ،‬والتي تقدم إمكانيات جديدة‪،‬‬
‫وبالتالي تحسن من خبرة المستخدم في التعامل معها وفي االستفادة منها‪ ،‬فهي مثالً تتيح لصفحة الموقع‬
‫أن تستقبل تحديثاً لجزء من محتواها يقوم به أحد المستخدمين دون الحاجة إلى التعامل مع الجهاز‬
‫المضيف ‪ ،Server-side software‬ويقوم به برنامج التصفح بالتعامل مع الجزء الذي تم تحديثه على‬
‫الصفحة دون الحاجة إلى إعادة تحميل الصفحة ككل كما هو متعارف عليه في الجيل األول من شبكة‬
‫الويب‪.‬‬

‫سادسا‪ :‬خصائص خدمة الويب ‪Web 2.0‬‬

‫تتميز خدمة الويب ‪ Web 2.0‬بجملة من الخصائص والسمات التي تميزها عن الويب ‪،Web 1.0‬‬
‫والتي يمكن تلخيصها فيما يلي‪:‬‬
‫‪ -1‬استخدام برامج وتقنيات تركز على الطبيعة التفاعلية في استخدام الويب‪ ،‬وفي التعامل مع‬
‫المحتوى‪ ،‬وفي المشاركة في كتابته وتغييره وتعديله من قبل المستخدمين‪ ،‬وفي تداوله فيما بينهم‬
‫بمرونة وبسرعة‪.‬‬
‫‪ -2‬السماح للمستخدمين باستخدام أي تطبيق عليها‪ ،‬والتعديل فيه من خالل تقنيات سهلة بالنسبة‬
‫للمستخدم العادي‪.‬‬

‫‪13‬‬
‫‪ -3‬المستخدمون هم المتحكمون في المحتوى والبيانات الموجودة في المواقع على ‪،Web 2.0‬‬
‫واستخدام واجهات وتصميمات المواقع‪ ،‬والتطبيقات المختلفة على ‪ Web 2.0‬تكون سهلة بالنسبة‬
‫للمستخدمين‪ ،‬ويمكنهم التحكم فيها وتغييرها كيفما شاؤوا‪.‬‬
‫‪ -4‬التركيز على توظيف البرامج والتقنيات التي تخدم تكوين شبكات اجتماعية‪ ،‬وجماعات افتراضية‬
‫من خالل المواقع والتطبيقات المختلفة الموجودة على ‪.Web 2.0‬‬
‫‪ -5‬تقديم خدمات مختلفة منها‪ :‬المدونات ومواقع التواصل االجتماعي كالفيسبوك‪ ،‬وصفحات الويكي‪،‬‬
‫وموقع اليوتيوب‪ ،‬وغيرها من المواقع‪.‬‬
‫‪ -6‬انخفاض كلفة اإلنشاء والتصميم‪ ،‬فمثالً لو قام أصحاب موسوعة الويكيبيديا باستخدام ‪Web 1.0‬‬
‫لتطويرها‪ ،‬فإن كلفة هذا التطوير ستتضاعف مئات المرات‪ ،‬ألن عليهم توظيف جميع األشخاص‬
‫الذين ساهموا في بنائها‪ ،‬أما باستخدام ‪ ،Web 2.0‬فإن القوة الدافعة لهذا للتطبيق مزودة بتقنيات‬
‫برمجية عالية ‪ High Programming Tech‬تم ّكن القيام بتنسيق جهود آالف المتطوعين‬
‫بصورة آلية‪.‬‬
‫‪ -7‬إن مواقع ‪ Web 2.0‬أكثر سهولة في االستخدام‪ ،‬وأكثر فعالية بين المستخدمين من مواقع ‪Web‬‬
‫‪.1.0‬‬
‫‪ -8‬إن برامج مواقع ‪ Web 2.0‬مفتوحة المصدر‪ ،‬ومتاحة لجميع المستخدمين‪ ،‬وقابلة للتطوير‬
‫المستمر من قبل المستخدمين‪ ،‬وليس لها إصدار محدد‪.‬‬
‫‪ -9‬زيادة االكتشافات العلمية‪ ،‬وبخاصة في مجال البرمجيات حيث إن المطورين هم من المستخدمين‬
‫لهذه المواقع‪ ،‬ويعملون دون أجر‪.‬‬

‫‪14‬‬
 ‫ويمكن إظهار أهم الفروق بين ‪ Web 1.0‬و‪ Web 2.0‬من خالل الجدول التالي‪:‬‬

‫‪Web 2.0‬‬ ‫‪Web 1.0‬‬

‫خدمة موجهة نحو المجتمعات اإلنسانية‬ ‫‪ .1‬خدمة موجهة نحو قطاع األعمال‬
‫‪ .2‬تعتمد بصورة رئيسية على لغة البرمجة تعتمد بصورة رئيسية على لغة البرمجة ‪XML‬‬
‫‪HTML‬‬
‫تهتم بالمشاركة في المعلومات‬ ‫‪ .3‬تهتم بحقوق ملكيات المعلومات‬
‫ترتكز على الديباجات ‪Tags‬‬ ‫‪ .4‬ترتكز على المصنفات ‪taxonomy‬‬
‫تعتمد على مفهوم ‪peer-to-peer‬‬ ‫‪ .5‬تعتمد على مفهوم ‪client /server‬‬
‫تستخدم الملقمات ‪RSS Feeds‬‬ ‫‪ .6‬تستخدم البوابات ‪portals‬‬
‫تعتمد على اتصال السعات العريضة‬ ‫‪ .7‬تعتمد على االتصال باإلنترنت‬
‫الحركة من والى الموقع ‪ Bandwidth‬عالية التكلفة‬ ‫‪ .8‬معدات الـ‪ Hardware‬عالية الكلفة‬

‫مصممة للكتابة بصورة رئيسية‬ ‫‪ .9‬مصممة للقراءة بصورة رئيسية‬

‫‪ .12‬أكثر الصفحات شهرة هي صفحة البداية أكثر الصفحات شهرة هي صفحة المدونة ‪Blogs‬‬
‫‪Homepage‬‬

‫سابعا‪ :‬عيوب ‪Web 2.0‬‬

‫على الرغم من كل ما ُذكر من ميزات وخصائص‬

‫الويب ‪ ،Web 2.0‬فقد تم توجيه العديد من‬
‫االنتقادات لها في بداية ظهورها‪ ،‬وربما يعود ذلك‬
‫إلى حداثة الظهور‪ ،‬وعدم وضوح هذا المفهوم في‬
‫أذهان العديد من الباحثين والمستخدمين‪ ،‬ويمكن‬
‫تلخيص هذه االنتقادات في النقاط التالية‪:‬‬

‫‪15‬‬
‫‪ -1‬لم ينضج مفهوم الويب ‪ Web 2.0‬بصورة كافية‪ ،‬فما يعنيه الويب ‪ Web 2.0‬لبعض المستخدمين‬
‫قد ال يعنيه لغيرهم‪ ،‬ويعتقد بعض المستخدمين أنه ربما يعد جزءاً من الويب ‪.Web 1.0‬‬
‫حد فاصل بين ويب ‪ Web 1.0‬وويب ‪ Web 2.0‬بصورة قاطعة‪ ،‬فهناك بعض المواقع‬
‫‪ -2‬ليس هناك ٌ‬
‫المختلطة التي تستخدم التقنيتين معاً‪ ،‬وبالتالي يصعب تحديد هويتها‪.‬‬
‫محسن‪ ،‬بل هي امتداد تقني‬
‫ّ‬ ‫‪ -3‬إن الويب ‪ Web 2.0‬في الواقع ليست شيئاً جديداً‪ ،‬وال هي إصدار‬
‫طبيعي للويب ‪ ،Web 1.0‬فالتقنيات المستخدمة لتطوير مواقع اإلنترنت في الويب ‪،Web 1.0‬‬
‫مازالت كما هي منذ نشأة الويب‪ ،‬وهو ما أكده مكتشف الويب ‪.Tim Berners-Lee‬‬

‫ثامنا‪ :‬خدمة ‪Web 3.0‬‬

‫أما التطور األخير للويب والمتمثل في الـ‪ ،Web 3.0‬فقد‬
‫عده مجموعة من‬
‫تنوعت مفاهيمه‪ ،‬فمن الباحثين من ّ‬
‫التطبيقات المجتمعة في إطار واحد‪ ،‬حاملة مجموعة من‬
‫الخصائص المتمثلة في الصغر النسبي لحجم هذه‬
‫التطبيقات‪ ،‬والقادرة على أن تعمل في أي بيئة إلكترونية‬
‫كالكمبيوتر أو الهاتف المحمول‪ ،‬أو المساعدات الشخصية‬

‫الرقمية ‪ ،PDA‬وتكون في الوقت نفسه سريعة جداً‪ ،‬وقابلة للتكيف وفق رغبة مستخدمها‪ ،‬معتمدة في‬
‫توزيعها وتسويقها كمنتج على زيادة الوعي بها‪ ،‬واالنتشار من خالل ترابط الشبكات المختلفة الموجودة‬
‫على اإلنترنت‪ ،‬مما يلغي الحاجة إلى تخزينها وشرائها‪.‬‬

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

‫‪16‬‬
 ‫لذلك يمكن أن يطلق على الويب ‪Web 3.0‬‬
‫مصطلح الويب الداللي ‪Symantec Web‬‬
‫العتماده على معاني ودالالت الكلمات‪ ،‬فهو‬
‫يعتمد بشكل أساسي على الذكاء االصطناعي في‬
‫عمله وادارته‪ ،‬كما يطلق عليه الويب الذكي‬
‫‪ ،Intelligent Web‬العتماده على تكنولوجيا الذكاء الصناعي‪ ،‬ويطلق عليه ويب البيانات ‪Web of‬‬
‫‪ ،Data‬العتماده على تحويل بيانات الويب إلى لغة تفهمها اآللة‪.‬‬
‫وقد بدأ العلماء في التفكير في الجيل الثالث من الويب واحدى هذه األفكار هي ما يسمى بالويب‬
‫اللغوي ‪ ،Semantic Web‬وهو أحد المقترحات التي ستُجرى محاولة تطبيقها في الجيل الثالث من‬
‫اإلنترنت‪.‬‬
‫ويعد تيم بيرنرز لي ‪ Tim Berners-Lee‬أول من صاغ مصطلح الويب الداللي ‪،Symantec Web‬‬
‫ُ‬
‫وقد دخل مفهوم الويب ‪ 3.0‬للمرة األولى في أوساط الجمهور‬
‫عام ‪2226‬م‪ ،‬والتي وصفت هذا المصطلح كمجال‪ ،‬حيث‬
‫يمكن لآلالت قراءة صفحات الويب بقدر قراءة البشر‪،‬‬
‫والويب ‪ 3.0 Web‬هو مصطلح يستخدمه العاملون في‬
‫المجال التقني والصناعي لوصف مستقبل شبكة الويب‬
‫العالمية‪ ،‬ولإلشارة إلى الموجة المستقبلية إلبداع اإلنترنت‪،‬‬
‫وتختلف الرؤى بشكل متفاوت حول المرحلة التالية من ثورة‬

‫الويب‪ ،‬حيث يعتقد البعض أن ظهور التقنيات مثل الويب الداللي (الويب الذي يعتمد على فهم معاني‬
‫الكلمات) سيغير طريقة استخدام الويب‪ ،‬وسيؤدي إلى احتماالت جديدة في الذكاء‬
‫الصناعي‪ ،‬فهو يحاول تحويل دور اآللة من مجرد عارض للمدخالت التي أدخلها المستخدم إلى فهم‬
‫المعلومات التي أدخلها المستخدم‪ ،‬وبالتالي تكون أكثر إنتاجية‪ ،‬ويعتمد في البحث على اللغة الطبيعية‪،‬‬
‫والتنقيب عن المعلومات ومرادفاتها‪ ،‬والتعلم اآللي مستخدماً تقنيات الذكاء الصناعي أو الويب الذكي‪.‬‬

‫‪17‬‬
‫ويبحث متصفح الويب ‪ Web 1.0‬عن الروابط بين المستندات‪ ،‬أما متصفح الويب ‪ Web 3.0‬فإنه‬
‫يبحث من خالل الروابط (المستندات) في شبكة المفاهيم‪ ،‬لذلك على المتصفح هنا أن يكون واعياً بما‬
‫وراء مستندات الويب وخدمات االستعالم‪.‬‬

‫تعريف خدمة الويب ‪:Web 3.0‬‬

‫عرف خدمة الويب ‪ Web 3.0‬بأنها‪:‬‬
‫‪ -1‬تُ ّ‬
‫تقنية ويب تشتمل على المستندات أو أجزاء من المستندات‪ ،‬تصف العالقات الصريحة بين‬
‫األشياء (المعلومات أو المواقع(‪ ،‬وتحتوي على معلومات داللية تم تجهيزها خصيصاً لتفهمها‬
‫برمجيات البحث والتصفح‪ ،‬وهي تعتمد على مبدأ البيانات المشتركة‪ ،‬فعندما تَعرف معلومة معينة‬
‫يمكنك ربطها بمعلومات أخرى تتماثل مع المعلومة األولى أو تشرحها أو تفسرها أو تحددها‬
‫بشرط أن تحدد عالقة الربط‪ ،‬أي أن الويب الداللي عبارة عن تبادل البيانات من خالل أكواد‬
‫وصف العالقة بين المعلومات‪ ،‬ثم معالجة هذه البيانات بشكل منطقي استداللي تحليلي‪ ،‬كما أنه‬
‫عبارة عن رؤية تقوم على ربط البيانات في الملفات والمستندات المنشورة على شبكة الويب‬
‫بطريقة معينة تستطيع معها البرامج وأجهزة الكمبيوتر استخدامها‪ ،‬ليس فقط من خالل عرضها‬
‫على المستخدم‪ ،‬ولكن من خالل ميكنة ودمج‪ ،‬واعادة استخدام البيانات عبر تطبيقات متنوعة‪،‬‬
‫ويصف الويب ‪ Web 3.0‬تطور استخدام الويب والتفاعل الذي يشمل تحويل الشبكة من‬
‫مستعرض للمعلومات ومنشئ للمحتوى بداخلها إلى قاعدة بيانات‪ ،‬ويكون الويب ‪Web 3.0‬‬
‫أقرب إلى القراءة والكتابة البشرية ولكن على الويب‪.‬‬

‫‪ -2‬يمكن تعريف خدمة الويب ‪ Web 3.0‬على أنه‪:‬‬

‫محتوى ذو جودة عالية يحول الويب إلى قاعدة بيانات ديناميكية تعمل في إطار الذكاء الصناعي‬
‫لتيسير عمليات البحث‪ ،‬والوصول بكفاءة ويسر إلى المعلومة والمعلومات ذات العالقة بها‪ ،‬مثال‬
‫ذلك‪ :‬قيام أحد المستخدمين بالدخول إلى حسابه الخاص بموقع اليوتيوب ‪ ،YouTube‬ويقوم‬
‫بالبحث عن فيديو لتعليم برنامج‪ Moodle 1‬مثالً‪ ،‬ثم يحصل على مجموعة من النتائج‪ ،‬ويقوم‬

‫‪1‬‬
‫‪Moodle: Modulor Object – Oriented dynamic Learning Environment‬‬

‫‪18‬‬
‫باستعراضها وفتح بعض الوصالت بها‪ ،‬وعقب االنتهاء يخرج منها‪ ،‬وفي وقت آخر عند دخول‬
‫هذا الشخص إلى حسابه الخاص يقوم برنامج اليوتيوب ‪ YouTube‬بفتح مجموعة الوصالت‬
‫التي تتناول الموضوع نفسه الذي قام بالبحث عنه من قبل‪ ،‬والوصالت المشابهة لها‪ ،‬وبالتالي‬
‫فهذا النوع من الويب يبحث عن مترادفات ما تم البحث عنه‪ ،‬ويعرضها على المستخدم فور‬
‫دخوله إلى حسابه الخاص مباشرة‪ ،‬وبالتالي يحاول ذلك النوع من الويب تسهيل األمور بشكل‬
‫كبير‪.‬‬

‫تاسعا‪ :‬مميزات الويب ‪Web 3.0‬‬

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

‫بيئة تعليمية ديناميكية محددة الهدف قابلة للتعديل والتغيير‪ ،‬أو هو منصة برامجية للتعليم اإللكتروني االفتراضي‪،‬‬ ‫‪-‬‬
‫وأول من طور الموودل هو ‪ Martin Dougiomas‬لمساعدة المعلمين في تشكيل برامج تدريسية على اإلنترنت‪،‬‬
‫بالتفاعل والتعاون في بناء المضمون العلمي‪ ،‬وأول إصدار منه أطلق في ‪ 22‬آب ‪ ،2222‬ومعظم مكوناته‬
‫طُورت في أستراليا‪.‬‬

‫‪19‬‬
 ‫‪ -1‬تحسين عملية البحث‪.‬‬
‫‪ -2‬تحسين تصنيف البيانات‪.‬‬
‫‪ -3‬تسهيل تطوير المفردات‪.‬‬
‫‪ -4‬تحسين نشر المعلومات المنتقاة‪.‬‬
‫‪ -5‬تكامل المعلومات )البيانات ومخططاتها(‪.‬‬
‫‪ -6‬مزج البيانات وتجسيدها‪.‬‬
‫‪ -7‬التوليف اآللي للويب‪.‬‬
‫‪ -8‬خبرة العثور على المعلومات‪.‬‬
‫‪ -9‬آلية اإلجابة عن األسئلة‪.‬‬

‫‪20‬‬
 ‫الخاتمة‬
‫تصفح‬
‫ٍ‬ ‫أدى ظهور وتطبيق خدمة الويب على اإلنترنت‪ ،‬في بداية التسعينيات‪ ،‬إلى وضع أول برنامج‬
‫لإلنترنت‪ ،‬كما أدى إلى إطالق اسم (اإلنترنت) على الشبكة العالمية للمعلومات‪ ،‬كما وفرت هذه الخدمة‬
‫إمكانية نقل الصور واألصوات عالية الجودة منذ عام ‪ 1993‬من خالل مسارات فائقة السرعة‪ ،‬مما أدى‬
‫في بداية عام ‪ 1994‬إلى بدء االستخدام الشخصي لإلنترنت بشكل واسع جداً‪ ،‬وهذا أدى في بداية‬
‫‪ 1995‬إلى انفجار الشبكة العنكبوتية الدولية‪ ،‬وأصبحت واحدة من أدوات االتصال واإلعالم الجماهيرية‪،‬‬
‫والسيما مع ظهور الصحف اإللكترونية‪ ،‬وظهور التطورات المتالحقة على خدمة الويب‪ ،‬وانتقال االتصال‬
‫إلى الصيغة التشاركية واالجتماعية‪ ،‬وظهور العديد من مواقع التواصل االجتماعي التي وسعت من دائرة‬
‫عالقات األفراد االجتماعية‪ ،‬وزادت قدرتهم على الحصول على المعلومات‪ ،‬وعلى التفاعل أكثر لتطوير‬
‫مشاركتهم في بناء هذه المواقع‪.‬‬

‫‪21‬‬
 ‫الخالصة‬
‫يخلط الكثير من المستخدمين ‪ -‬وحتى الباحثين ‪ -‬بين اإلنترنت والويب‪ ،‬ويعتقدون أن الويب هي‬
‫اإلنترنت‪ ،‬في حين أن الويب ‪ WWW: World Wide Web‬هي إحدى خدمات اإلنترنت التي أعطت‬
‫اإلنترنت اسمها الحالي وشكلها الحالي‪ ،‬وحولتها من وسيلة الستخدام الخاصة من الباحثين والمتخصصين‬
‫إلى استخدم الماليين من األفراد في مختلف أنحاء العالم‪ ،‬وحققت االنفجار الكبير لشبكة اإلنترنت على‬
‫مختلف المستويات‪.‬‬
‫وقد أضاف ظهور هذه الخدمة في أوائل التسعينيات‪ ،‬العديد من الميزات لشبكة اإلنترنت‪ ،‬كما أضاف‬
‫الجيل الثاني من خدمة الويب ‪ Web 2.0‬ميز ٍ‬
‫ات أخرى نقلها من صيغة االتصال أحادي االتجاه إلى‬
‫اال تصال من مجموعة من األفراد إلى مجموعة أخرى‪ ،‬وأدى إلى ظهور أشكال متعددة من التطبيقات‬
‫التشاركية والتفاعلية عبر اإلنترنت كالمدونات‪ ،‬وصفحات الويكي‪ ،‬ومواقع التواصل االجتماعي المختلفة‪.‬‬
‫كما يحاول الجيل الثالث من خدمة الويب ‪ Web 3.0‬أن ينتقل بخدمة اإلنترنت ‪ -‬باالعتماد على‬
‫تطبيقات الذكاء الصناعي ‪ -‬إلى محاكاة العقل البشري‪ ،‬والتعامل بمنطقية مع البيانات والمعلومات‪،‬‬
‫وبالتالي أن يجعل من اآللة أكثر مساهمةً في إنجاز المهام التي يطلبها المستخدم من اإلنترنت‪.‬‬

‫‪22‬‬
 ‫المراجع‬
‫‪ -1‬مكاوي‪ ،‬حسن عماد‪ ،‬وعلم الدين‪ ،‬محمود‪ ،)2229( ،‬تكنولوجيا المعلومات واالتصال‪( ،‬ط‪،)1‬‬
‫القاهرة‪ ،‬الدار العربية للنشر والتوزيع‪.‬‬
‫‪ -2‬أبو عيشة‪ ،‬فيصل‪ ،)2212( ،‬اإلعالم اإللكتروني‪( ،‬ط‪ ،)1‬األردن‪ ،‬دار أسامة للنشر والتوزيع‪.‬‬
‫‪ -3‬الرحباني‪ ،‬عبير‪ ،)2212( ،‬اإلعالم الرقمي اإللكتروني‪( ،‬ط‪ ،)1‬األردن‪ ،‬دار أسامة للنشر والتوزيع‪.‬‬
‫‪ -4‬تربان‪ ،‬ماجد سالم‪ ،)2228( ،‬اإلنترنت والصحافة اإللكترونية "رؤية مستقبلية"‪( ،‬ط‪ ،)1‬القاهرة‪،‬‬
‫الدار المصرية اللبنانية‪.‬‬
‫‪ -5‬شفيق‪ ،‬حسنين‪ ،)2212( ،‬اإلعالم الجديد‪ ،‬اإلعالم البديل‪ ،‬تكنولوجيات جديدة في عصر ما بعد‬
‫التفاعلية‪( ،‬ط‪ ،)1‬القاهرة‪ ،‬دار فكر وفن للطباعة والنشر والتوزيع‪.‬‬
‫‪ -6‬شفيق‪ ،‬حسنين‪ ،)2212( ،‬الوسائط المتعددة في المجال اإلعالمي واإلنترنت‪( ،‬ط‪ ،)1‬القاهرة‪ ،‬دار‬
‫فكر وفن للطباعة والنشر والتوزيع‪.‬‬
‫‪ -7‬عبد الحميد‪ ،‬محمد‪ ،)2227( ،‬االتصال واإلعالم على شبكة اإلنترنت‪( ،‬ط‪ ،)1‬القاهرة‪ ،‬عالم‬
‫الكتب‪.‬‬
‫‪ -8‬النجار‪ ،‬محمد السيد‪ ،‬تقنية الويب ‪ ،3.2‬مفهومها‪ ،‬ومكوناتها‪ ،‬وأدواتها‪ ،‬متاح على‬
‫‪ ،www.almaany.com‬تاريخ التصفح ‪.2215/4/15‬‬
‫‪ -9‬مفهوم الويب ‪ ،2.2‬متاح على ‪ ،www.ckfu.org/vb/attachment.php‬تاريخ التصفح‬
‫‪.2215/4/15‬‬
‫‪ -12‬عبد الستار خليفة‪ ،‬محمود‪ ،‬الجيل الثاني من خدمات اإلنترنت‪ :‬مدخل إلى دراسة الويب ‪2.2‬‬
‫والمكتبات ‪ ،2.2‬مجلة ‪ ،Cybrarians Journal‬العدد ‪ ،18‬آذار ‪ ،2229‬متاح على‪:‬‬
‫‪ ،/http://www.journal.cybrarians.info‬تاريخ التصفح ‪.2215/4/12‬يحيى الميتمي‪ ،‬معين‬
‫صالح‪ ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية العربية‪ ،‬رسالة ماجستير غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.2229 ،‬‬
‫‪ -11‬موسى أحمد‪ ،‬محمد األمين‪ ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪ ،‬مؤتمر‬
‫صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.2225 ،‬‬

‫‪23‬‬
 ‫التمارين‬
‫اختر اإلجابة الصحيحة فيما يلي‪:‬‬
‫ظهور واستخدام خدمة الويب عبر اإلنترنت وفّر لها العديد من الميزات‪:‬‬
‫‪ .A‬استخدام برامج التصفح‪.‬‬
‫‪ .B‬جودة في الصوت والصورة‪ ،‬وسرعة نقل البيانات‪.‬‬
‫‪ .C‬استخدام الوسائط المتعددة‪.‬‬
‫‪ .D‬كل ما سبق صحيح‪.‬‬

‫اإلجابة الصحيحة‪ D :‬كل ما سبق صحيح‬

‫من عيوب الويب ‪:2.2‬‬

‫‪ .A‬مفهوم غير واضح وغير محدد‪.‬‬
‫‪ .B‬لم يقدم جديداً لإلنترنت‪.‬‬
‫‪ .C‬يحتاج إلى تقنيات أكثر تطو اًر‪ ،‬وأكثر كلفة‪.‬‬

‫اإلجابة الصحيحة‪ A :‬مفهوم غير واضح وغير محدد‬

‫ظهر مفهوم الويب ‪ Web 3.0‬للمرة األولى عام ‪ 1995‬على لسان ‪ Berners‬نفسه‪.‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪24‬‬
 ‫من خصائص خدمة الويب‪ :‬الالخطية‪ ،‬والتفاعلية‪ ،‬ودعم الرسوميات‪.‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫من مميزات الويب ‪ Web 3.0‬محاكاة العقل البشري في التعامل بمنطقية مع المعلومات‪.‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬
‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪25‬‬
 ‫الوحدة الثانية‬

‫تكوين صفحة الويب – قواعد تصميم (تكوين) صفحة الويب‬

‫العناصر‬

‫‪ ‬مقدمة‪.‬‬
‫‪ ‬مفهوم موقع أو صفحة الويب‪.‬‬
‫‪ ‬مفهوم تصميم موقع أو صفحة الويب‪.‬‬
‫‪ ‬قواعد تصميم مواقع الويب المتعلقة بـ‪:‬‬
‫‪ o‬سهولة االستخدام‪.‬‬
‫‪ o‬أدوات اإلبحار‪.‬‬
‫‪ o‬الواجهة وأسلوب الوصول‪.‬‬
‫‪ o‬اإلجراءات القانونية واألمنية ‪.‬‬
‫‪ o‬االتصال والبنية التحتية‪.‬‬
‫‪ o‬التسويق‪.‬‬
‫‪ o‬الداللة على الموقع ‪.‬‬
‫‪ o‬األخطاء‪.‬‬
‫‪ o‬االختبار والتجريب‪.‬‬
‫‪ o‬تقييم مواقع الويب‪.‬‬
‫‪ ‬خاتمة‪.‬‬

‫‪26‬‬
 ‫األهداف التعليمية‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ -1‬يعرف مفهوم موقع أو صفحة الويب‪.‬‬

‫‪ -2‬يشرح مفهوم تصميم موقع أو صفحة الويب‪.‬‬
‫‪ -3‬يحدد مجاالت جوانب تصميم صفحة الويب كما أوضحها ‪.Powell‬‬
‫‪ -4‬يعدد القواعد والنصائح التي تفيد في تصميم موقع الويب‪.‬‬
‫‪ -5‬يشرح الخطوط اإلرشادية لتصميم مواقع الويب‪.‬‬

‫اإلنترنت – موقع الويب – التصميم – الوسائط المتعددة – النص المتشعب –‬ ‫الكلمات المفتاحية‪:‬‬
‫الروابط ‪ -‬برامج التصفح – لغة الـ ‪ - HTML‬المستعرضات – واجهة التفاعل – الصفحة الرئيسية –‬
‫شعار الموقع ‪ -‬خريطة الموقع ‪ -‬عنوان الموقع – العناوين – الهوامش – أدوات اإلبحار – سرعة‬
‫التحميل – دقة الشاشة – الخطوط – الصور – الرسوميات – الفيديو‪.‬‬

‫أوال‪ :‬مقدمة‬

‫أيد الكثير من الباحثين أن خدمة الويب تعد من‬

‫أكثر التطورات داللة في عالم االتصال واإلعالم‪،‬‬
‫كما هو اختراع الطابعة على يد غوتنبرغ لما لهذا‬
‫الظهور من تأثيرات قوية على اإلنترنت‪ ،‬وتحويلها‬
‫إلى واقع إعالمي اتصالي يتعامل معه الماليين من‬
‫األفراد‪ ،‬وال يمكنهم االستغناء عنه‪.‬‬

‫وقد تجلى تأثير خدمة الويب بشكل مبدئي على إمكانية ظهور العديد من صفحات ومواقع الويب‬
‫المتخصصة في مجاالت إعالمية ومعلوماتية واتصالية متنوعة‪ ،‬فمنها المواقع اإلخبارية‪ ،‬ومنها الصحف‬

‫‪27‬‬
‫اإللكترونية‪ ،‬ومنها المواقع التابعة لمؤسسات إعالمية‪ ،‬ومنها مواقع التواصل االجتماعي كالفيسبوك‬
‫وتويتر‪ ،‬والمدونات وصفحات الويكي‪ ،‬وغيرها من المواقع التي يمكن تسميتها بصفحة ويب‪.‬‬

‫ويعد الشكل الخارجي لهذه الصفحات واألساليب والبرامج‪ ،‬ولغات البرمجة المعتمدة في تصميم وتكوين‬
‫هذه الصفحات عامالا حاسما في عملية زيادة انتشار واستخدام هذه الصفحات‪ ،‬وفي سهولة ويسر‬
‫استخدامها من قبل المستخدمين‪ ،‬وبالتالي زيادة تأثير هذه المواقع على المستخدمين بشكل أكبر‪ ،‬وهو‬
‫األمر الذي سيتم عرضه في هذه الوحدة حيث سيتم التعرض لمفهوم صفحة أو موقع الويب‪ ،‬ومفهوم‬
‫تكوين أو تصميم هذه الصفحات‪ ،‬والقواعد العامة التي يجب مراعاتها في أثناء عملية التصميم لتحقيق‬
‫األهداف السالفة الذكر‪.‬‬

‫ثانيا‪ :‬مفهوم موقع أو صفحة الويب‪:‬‬

‫الويب‬ ‫خدمة‬ ‫لمفهوم‬ ‫التعرض‬ ‫سبق‬
‫وتعريفاتها المتعددة‪ ،‬وال يختلف تعريف‬
‫صفحة أو موقع الويب عن مفهوم الخدمة‬
‫بشكل عام فهناك عدة تعريفات لموقع‬
‫الويب منها‪:‬‬

‫‪ -1‬موقع الويب هو‪" :‬مجموعة من ملفات الويب المرتبطة فيما بينها‪ ،‬والمتضمنة لملف افتتاحي‬
‫اسمه الصفحة الرئيسية ‪ Home Page‬التي يمكن الدخول إليها من خالل بقية الوثائق‬
‫المتضمنة في الموقع‪ ،‬ويتم الوصول إلى الموقع عبر كتابة اسمه على المتصفح"‪.‬‬
‫‪ -2‬كما يمكن تعريف موقع الويب بأنه‪" :‬ملف أو مجموعة ملفات يتم تخزينها على الخادم ‪Server‬‬
‫يمكن الوصول إليها عبر اإلنترنت‪ ،‬ولكل موقع صفحة رئيسية تصمم غالب ا لتكون الملف األول‬
‫الذي يزوره المتصفح ليأخذ فكرة عامة عن مضامين الموقع‪ ،‬وتتضمن الملفات الموجودة في‬
‫الموقع وصالت نصية‪ ،‬أو رسومية يتم النقر عليها باستخدام الفأرة بقصد االنتقال من ملف إلى‬
‫آخر داخل الموقع أو خارجه"‪.‬‬

‫‪28‬‬
‫‪ -3‬ويعرف اإلعالميون موقع الويب بأنه‪" :‬رسائل تواصلية مخزنة في جهاز حاسوب خادم يتم‬
‫الوصول إليها عبر اإلنترنت‪ ،‬وعبر أحد متصفحات الويب‪ ،‬ويتخذ الموقع شكل الصفحات أو‬
‫الوثائق المكتوبة بلغة النص الفائق المتشعب ‪ ،HTML‬وتتخذ من الصفحة الرئيسية ‪Home‬‬
‫‪ Page‬واجهة لها‪ ،‬ويتم التنقل بينها بواسطة وصالت عادية أو تفاعلية‪ ،‬وتقدم الرسائل التواصلية‬
‫في شكل منفرد (نص‪ ،‬وصوت‪ ،‬وصورة‪ ،‬وفيديو) أو متعدد ‪ ،Multimedia‬وغالبا ما تقدم مواقع‬
‫الويب خدمات تهدف إلى تعزيز التواصل والتفاعل مع المتلقي"‪.‬‬
‫‪ -4‬ويعرف موقع الويب اإللكتروني أيض ا بأنه‪" :‬مجموعة من الصفحات والنصوص والصور‬
‫والمقاطع الفيديوية المترابطة وفق هيكل متماسك ومتفاعل‪ ،‬يهدف إلى عرض ووصف المعلومات‬
‫والبيانات عن جهة أو مؤسسة ما‪ ،‬بحيث يكون الوصول إليه غير محدد بزمان أو مكان‪ ،‬وله‬
‫عنوان فريد محدد يميزه عن باقي المواقع"‪.‬‬
‫ويمكن أن يحتوي موقع الويب على موقع فرعي واحد أو أكثر‪ ،‬والموقع الفرعي هو موقع متداخل في‬
‫موقع ويب آخر‪ ،‬يسمى موقع الويب الذي يحتوي على مواقع فرعية‪.‬‬

‫ثالثا‪ :‬تصميم موقع أو صفحة الويب‪:‬‬

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

‫‪29‬‬
 ‫اعتمادا على إعطاء انطباع جيد‪ ،‬وبحيث يتوافق‬
‫التصميم مع طبيعة هؤالء المستخدمين من حيث‬
‫التخصص‪ ،‬والفئة العمرية‪ ،‬والمعرفة بتقنيات‬
‫الويب‪ ،‬وغيرها من االعتبارات‪ ،‬ويوجد عديد من‬
‫التعريفات تناولت عملية التصميم‪ ،‬حيث عرف‬
‫التصميم بأنه‪:‬‬

‫‪" .1‬عملية ترتيب وتنظيم العناصر البنائية التي يعتمد عليها المصمم للوصول إلى‬
‫المستخدمين من أجل تحقيق أهدافهم في الحصول على المعلومة بيسر وسهولة"‪ ،‬وتشمل‬
‫العناصر البنائية‪ :‬الشعار والعناوين‪ ،‬والنصوص والخطوط‪ ،‬والفواصل واأللوان‪ ،‬والوسائط‬
‫المتعددة من صور وأصوات‪ ،‬ورسوميات ومقاطع فيديو‪ ،‬وغيرها من العناصر‪.‬‬
‫‪" .2‬عملية بناء وانشاء المواقع اإللكترونية بشكل جذاب يستحوذ على اهتمام المستخدمين‪،‬‬
‫ويحقق أهدافهم في الحصول على المعلومات‪ ،‬ويحقق أهداف المواقع في الوصول‬
‫السريع إلى المستخدمين"‪.‬‬
‫‪ .3‬يعرف ‪ Tomas A Powell‬التصميم بأنه‪" :‬مخطط تمهيدي لتصميم الواجهات الرئيسية‬
‫والصفحات الداخلية عن طريق التحكم بالنصوص واأللوان‪ ،‬والعناصر التفاعلية والوسائط‬
‫المتعددة‪ ،‬والربط بينها بطريقة مريحة وجذابة وسهلة االستخدام"‪.‬‬
‫‪ .4‬ويذكر حلمي محسب أن التصميم هو‪" :‬عملية وضع العناصر البنائية بصورة متناغمة‬
‫بحيث يدعم كل عنصر بنائي العنصر اآلخر مع مراعاة أسس التصميم المتعارف‬
‫عليها‪ ،‬وهي‪ :‬الوحدة والتباين واالتزان والحركة‪ ،‬إذ يقوم التصميم بوضع كل عنصر بنائي‬
‫في مكانه المناسب طبقا للنظريات السيكولوجية والفسيولوجية لإلبصار المرئي"‪.‬‬
‫‪ .5‬ويؤكد الباحثون أنه‪" :‬عملية ابتكار وابداع باستخدام خطة معينة لتوظيف عناصر‬
‫التصميم‪ ،‬والتعامل مع المساحات والخطوط واأللوان لتحقيق الجانب الجمالي والوظيفي"‪.‬‬
‫‪ .6‬يقدم هيثم جودة تعريفا لعملية التصميم‪ ،‬فيذكر أنه‪" :‬علم وفن تحويل المادة اإلعالمية‬
‫إلى شكل رقمي قابل للقراءة يتوفر فيها يسر التصفح واالستخدام‪ ،‬وذلك باستخدام‬
‫العناصر البنائية التقليدية من‪:‬‬
‫‪ ‬حروف ونصوص وأشكال وصور وألوان وفواصل‪.‬‬

‫‪30‬‬
 ‫‪ ‬جداول تتالءم مع شبكة اإلنترنت‪.‬‬
‫‪ ‬عناصر بنائية تكنولوجية من وسائط متعددة ونص متشعب‪ ،‬وروابط تشعبية‪.‬‬
‫‪ ‬عناصر تفاعلية من خدمة التعليق على األخبار‪ ،‬وغرف الدردشة‪ ،‬والبريد‬
‫اإللكتروني‪ ،‬والقوائم البريدية"‪.‬‬
‫والمالحظ أن الباحث جمع العناصر التيبوغرافية مع العناصر الغرافيكية حيث يشير‬
‫بعض الباحثين إلى أن الصور واأللوان والرسوميات تصنف كعناصر غرافيكية‪.‬‬

‫مجاالت جوانب تصميم صفحة الويب كما أوضحها ‪:Powell‬‬

‫أوضح ‪ Powell‬أن جوانب التصميم تشمل خمسة مجاالت‪:‬‬

‫‪ -1‬المحتوى‪ :‬ويشمل طريقة بناء المحتوى وتنظيمه باستخدام إحدى لغات البرمجة مثل‪،HTML :‬‬

‫أو ‪.CSS‬‬

‫‪ -2‬المرئيات‪ :‬والمقصود بها طريقة إخراج‬

‫الشاشة‪ ،‬وتنظيم العناصر األساسية عليها من‬

‫روابط وملفات الفالش‪ ،‬وأماكن وجودها‪ :‬في‬
‫الجزء العلوي أو السفلي‪ ،‬أو األيمن أو‬
‫األيسر‪ ،‬وهذا الجانب أكثر الجوانب وضوحا‪،‬‬
‫لكنه ليس األكثر أهمية‪.‬‬

‫‪ -3‬التكنولوجيا‪ :‬والمرتبطة باألسس التقنية لتصميم الصفحات من توفر لغات البرمجة مثل‬

‫لغات ال ـ ‪ ،HTML‬وال ـ ‪ ،CSS‬وبرامج ال ـ ‪ ،JAVA Script‬إضافة إلى البرامج المستخدمة‬

‫في التصميم‪.‬‬

‫‪ -4‬التصفح‪ :‬والمرتبطة بسرعة الخادم‪ ،‬وسرعة البرامج المرتبطة بعملية التصميم‪.‬‬

‫‪31‬‬
‫‪ -5‬الغرض من الموقع والجمهور الذي سيوجه له‪ :‬فالتصميم يجب أن يتالءم مع‬

‫الطبيعة الخاصة لهذا الجمهور‪ ،‬سواء كان من الكبار أم الصغار‪ ،‬ويتالءم مع المضمون‬
‫الذي يقدم فيه سواء كان الموقع ذا مضمون إخباري أو رياضي أو ثقافي وغيره‪.‬‬

‫القواعد والنصائح التي تفيد في تصميم موقع الويب‪:‬‬

‫قدم العديد من المراكز البحثية‪ ،‬والعديد من الممارسين والباحثين في حقل تصميم مواقع الويب مجموعة‬
‫من القواعد والنصائح التي تفيد في تصميم موقع الويب وفق أسس علمية تواصلية وفنية جمالية ترتكز‬
‫أساسا على التوظيف األمثل لكل العناصر البنائية المستخدمة في تقديم محتوى صفحة الويب‪ ،‬وأهمها‬
‫الوسائط المتعددة‪ ،‬واستخدامها استخدام ا فعاالا مرشدا لتحقيق أكبر مرونة ممكنة في دخول الموقع والتنقل‬
‫السهل بين مكوناته عبر الوصالت التفاعلية ‪.Interactive Links‬‬
‫فقد توصلت إحدى الشركات المتخصصة في تصميم المواقع واستضافتها إلى مجموعة من النصائح عند‬
‫تصميم المواقع لتحقيق أكبر نسبة زيارة ودخول مع األخذ باالعتبار ضرورة توظيف الوسائط المتعددة‪،‬‬
‫وتتلخص هذه النصائح بـ‪:‬‬
‫‪ -1‬جعل النصوص التوجيهية وصفية‪ ،‬وتفادي تعليمات مثل‪" :‬انقر هنا"‪.‬‬
‫‪ -2‬تفادي الجداول واألعمدة‪ ،‬واذا لزم استخدامها فيمكن إرفاقها ببديل نصي بسيط ألن الـ ‪HTML‬‬
‫غير مزودة بتحكم جيد في إخراج الصفحات‪ ،‬األمر الذي يضطر المصممين إلى تقديم الجداول‬
‫في صيغة صورة مما يحد من سهولة الدخول إلى الموقع‪.‬‬
‫‪ -3‬استخدام عناوين الالفتات ‪ Heading Tags‬بدل العناوين المكتوبة بخط عادي ‪،Font Tags‬‬
‫لإلشارة إلى بعض المكونات البنائية للموقع‪ ،‬مثل‪ :‬أسماء األبواب والوصالت الرئيسية الثابتة‪.‬‬
‫‪ -4‬استخدام ألوان متباينة للنصوص وخلفياتها‪ ،‬كأن تكون الخلفية سوداء والنص أبيض تحقيقا ألكبر‬
‫قدر من االنقرائية ‪.Readability‬‬
‫‪ -5‬إذا قام المصمم بتصميم وثيقة ما وفق نظام اإلطارات ‪ ،Frames‬فيجب تقديم بديل خال من‬
‫اإلطارات ‪.No frames‬‬
‫‪ -6‬إذا تم استخدام خريطة رسومية كمنفذ لتصفح الموقع‪ ،‬فيجب تقديم بديل نصي لتصفح الموقع‪.‬‬

‫‪32‬‬
‫‪ -7‬تزويد الموقع بعنوان بريد إلكتروني‪ ،‬أو نموذج استمارة نصي ‪ Text-based Form‬حتى يوفر‬
‫خيار يمكنه من القيام بالتغذية الراجعة في إطار التفاعلية‪ ،‬وبخاصة أن بعض‬
‫ا‬ ‫للمتصفح‬
‫المتصفحات قد ال تدعم نماذج االستمارات‪.‬‬
‫‪ -8‬إذا تم استخدام ملفات صوتية في الموقع يمكن إضافة وصلة تقود إلى مقابل نصي إن أمكن‪،‬‬
‫واضافة وصلة لتحميل البرمجة الالزمة لسماع الصوت (مثل ‪.)RealAudio Player‬‬

‫رابعا‪ :‬الخطوط اإلرشادية لتصميم مواقع وصفحات الويب‪:‬‬

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

‫أ‪ -‬أدوات اإلبحار أو التجول ‪:Navigation‬‬

‫ينبغي على مطوري (مصممي) مواقع الويب أن يراعوا‬
‫في عملية التصميم ليس فقط االهتمام بالنصوص‬

‫وجعلها قابلة للفهم والقراءة‪ ،‬ولكن االهتمام أيض ا‬

‫بأدوات اإلبحار والتجول بين صفحات وموضوعات‬

‫الموقع‪ ،‬وتزويد الموقع بأدوات إبحار واضحة وسهلة االستخدام‪ ،‬لكي يتمكن المستخدمون من الوصول‬
‫واالستخدام السهل والتنقل بين صفحات الموقع‪ ،‬وتلخص النقاط التالية اإلرشادات المتعلقة بآلية وأدوات‬
‫اإلبحار‪:‬‬

‫‪33‬‬
‫‪ -1‬استخدام منهج واحد يتعلق بآلية اإلبحار لكل صفحات الموقع‪ ،‬أي أن كل صفحات الموقع يجب‬
‫أن تتضمن آلية وأدوات اإلبحار نفسها‪.‬‬
‫‪ -2‬وضع شريط لألدوات في كل صفحة من صفحات الموقع‪ ،‬ويكون شريط أدوات اإلبحار السفلي‬
‫متسق ا من حيث المقاس أو العرض مع الشريط العلوي‪.‬‬
‫‪ -3‬أن يتضمن الهامش العلوي للصفحة الرئيسية اسم الموقع وعنوانه‪.‬‬
‫‪ -4‬التأكد من أن موقع الويب قابل لإلبحار فيه من أي صفحة من صفحات الموقع‪ ،‬ألن المستخدم‬
‫قد يدخل الموقع من أي صفحة من صفحاته‪ ،‬وليس بالضرورة من الصفحة الرئيسية‪.‬‬
‫‪ -5‬أن تتضمن كل صفحة من صفحات الموقع على األقل رابطا واحدا للخروج من الصفحة‪ ،‬ويفضل‬
‫تجنب الروابط التي توجه المستخدم إلى الصفحة الحالية نفسها‪ ،‬وأن توضع أسفل كل الصفحات‬
‫روابط العودة إلى أعلى الصفحة‪ ،‬ويفضل أن تحوي كل صفحة من صفحات الموقع رابط ا مع‬
‫الصفحة الرئيسية بحيث ترتب روابط العودة إلى األعلى من المستوى األقل إلى المستوى األعلى‪،‬‬
‫ومن اليمين إلى اليسار‪.‬‬
‫‪ -6‬أن تعرض الروابط ‪ Links‬بألوان المتصفح االفتراضية المتعارف عليها إلبرازها‪ ،‬وأن تكون‬
‫الروابط الداخلية والخارجية واضحة‪.‬‬
‫‪ -7‬الربط الفعال مع المصادر والصفحات األخرى داخل الموقع‪ ،‬ومراعاة أال تفتح الروابط صفحة‬
‫جديدة لمتصفح آخر‪ ،‬وأن توضح للمستخدم مضمون المكان الذي سيذهب إليه‪ ،‬بمعنى أن تكون‬
‫الروابط ذات معنى‪ ،‬ويمكن توقع اتجاهها‪ ،‬وال داعي الستخدام انقر هنا (‪.)Click here‬‬
‫‪ -8‬تقليل استخدام (النقرات ‪ )Clicks‬ما أمكن‪ ،‬ويفضل أال يتجاوز عددها ثالث النقرات على‬
‫الصفحة الرئيسية ‪.Home Page‬‬
‫‪ -9‬إظهار مسار كل صفحة من الصفحة الرئيسية‪.‬‬
‫‪ -11‬استخدام الشرائط واألزرار المناسبة‪ ،‬والتي ال تبطئ من سرعة التحميل‪.‬‬
‫‪ -11‬التأكد من أن المستخدم يمكنه التجول في الموقع من غير أن يستخدم باستمرار زر الـ ‪،Back‬‬
‫وأن تكون هناك وسيلة أو طريقة للوصول إلى كل أجزاء الموقع بسهولة ويسر من خالل تمثيل‬
‫أدوات اإلبحار برموز‪ ،‬وأيقونات مفهومة وواضحة‪.‬‬
‫‪ -12‬تصميم صفحة رئيسية لكل جزء مهم ورئيسي من الموقع (مثال‪ :‬الصفحة الرئيسية لموقع‬
‫جامعة دمشق‪ ،‬والصفحة الرئيسية لكلية اإلعالم في هذا الموقع)‪.‬‬

‫‪34‬‬
‫‪ -13‬استخدام إعادة التوجيه الفوري (‪ ،)Redirect‬فكل مرة يضغط فيها المستخدم على زر العودة‬
‫‪ Back‬يعيده المتصفح إلى مكان غير مرغوب‪ ،‬لذلك يجب قصر الصفحة الرئيسية على‬
‫شاشتين‪.‬‬
‫‪ -14‬الحد األعلى لعدد شاشات صفحات الموقع ال يتعدى ست الشاشات‪.‬‬
‫‪ -15‬استخدام اسم الصفحة في كل صفحة من صفحات الموقع‪ ،‬وترتيب وتنظيم عالمات شريط‬
‫القوائم اعتمادا على أساس تكرار االستخدام واألهمية‪ ،‬وأن يدعم الهامش العلوي بأدوات إبحار‬
‫مساعدة‪.‬‬

‫سهولة االستخدام ‪:Usability‬‬ ‫ب‪-‬‬

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

‫‪35‬‬
‫‪ -8‬يفضل تزويد الموقع بخدمة األسئلة المكررة ‪ ،FAQ‬وخدمة المساعدة ‪ ،Help‬وخدمة البحث‪،‬‬
‫ومحرك بحث خاص‪ ،‬وخدمة الترجمة إلى العديد من اللغات‪.‬‬
‫‪ -9‬إتاحة إمكانية عرض نتائج البحث بطريقة مفيدة‪ ،‬وتدعيم الموقع بإمكانية تصحيح األخطاء في‬
‫أثناء عملية البحث‪.‬‬
‫‪ -11‬تنظيم وترتيب قائمة الخيارات بفئات ذات معنى‪ ،‬واتاحة الوصول إليها في الموقع بواسطة‬
‫أوامر لوحة المفاتيح‪ ،‬وتجنب اإلشارة القائلة الصفحة تحت اإلنشاء‪ ،‬وتجنب استخدام‬
‫اإلطارات‪.‬‬
‫‪ -11‬عدم استخدام شريط الزلق (الجانبي) من جانب إلى آخر لرؤية الصفحة‪ ،‬ووضع آليات تمكن‬
‫المستخدم من إلغاء أي عمليات ينفذها‪.‬‬
‫‪ -12‬دعم الموقع لكل المتصفحات المعروفة والمستخدمة‪ ،‬وتزويد الموقع بخدمات مباشرة من على‬
‫اإلنترنت‪.‬‬

‫ج‪ -‬الواجهة وأسلوب الوصول ‪:Interface & Style‬‬

‫تتضمن الخطوط اإلرشادية المتعلقة بالواجهة وبأسلوب الوصول إلى المعلومات في الموقع الحلول‬
‫المتعلقة بمشكالت الوصول إلى المعلومات‪ ،‬والتي يمكن أن يواجهها المستخدم في أثناء تصفحه للموقع‪،‬‬
‫فبعض المستخدمين مثالا ال يستطيعون استعراض الصور ألنهم يستخدمون المتصفحات التي تدعم‬
‫النصوص فقط‪ ،‬بينما يستطيع آخرون من خالل متصفحاتهم االبتعاد عنها‪ ،‬ربما ألنها تبطئ من سرعة‬
‫فتح الموقع وتحميله‪ ،‬فهذه الخطوط اإلرشادية ال تقترح مثالا االبتعاد عن الصور لتسهيل الوصول إلى‬
‫المعلومات بل تقترح تزويد النصوص بصور مكافئة لها حتى يمكن الوصول بسرعة إلى المعلومات‪،‬‬
‫ويمكن تلخيص القواعد والخطوط اإلرشادية المتعلقة بهذه العملية‪ ،‬فيما يلي‪:‬‬
‫‪ -1‬دعم العناصر غير النصية في الصفحة (صوت ‪ -‬صورة ‪ -‬فيديو) بنصوص تعبر عنها‬
‫وتوضحها باستخدام آلية النصوص البديلة (‪ ،)Alt: Alternative Text Attribute‬والوصف‬
‫الطويل للصور (‪.)Longdesc: Long Description Tag‬‬
‫‪ -2‬عرض مخطط الصفحات المستخدم في التصميم‪.‬‬

‫‪36‬‬
‫‪ -3‬استخدام األرضيات البسيطة والخطوط الواضحة لزيادة انقرائية المعلومات‪ ،‬واختيار ألوان لخطوط‬
‫النصوص والخلفيات األرضية متباينة‪ ،‬والتأكد دائما أن النصوص واضحة للقراءة‪ ،‬وال تتعارض‬
‫مع الخلفيات‪.‬‬
‫‪ -4‬التأكد من أن كل الصور قابلة للفهم والقراءة‪ ،‬وأن خلفياتها ال تصرف االنتباه وغير قابلة للفهم‪،‬‬
‫والتقليل ما أمكن من الصور الصفراء أو البيضاء‪ ،‬ألنها صعبة الفهم وغير قابلة للطباعة‪ ،‬ومن‬
‫استخدام الصور المتشابكة وغير الواضحة‪ ،‬واستخدام الدرجات األقل من ألوان الصور‪.‬‬
‫‪ -5‬عدم استخدام ألوان مختلفة ألرضيات صفحات الموقع‪ ،‬إذ يجب أن تكون األلوان موحدة‪.‬‬
‫‪ -6‬عدم استخدام الحروف الكبيرة (في اللغات األجنبية)‪.‬‬
‫‪ -7‬استخدام أنواع الخطوط بحذر‪ ،‬وعدم استخدام أكثر من نوع في المادة الواحدة‪ ،‬واالبتعاد عن‬
‫كثير من المتصفحات أو المستعرضات ال تدعمها‪.‬‬
‫الخطوط غير الشائعة‪ ،‬ألن ا‬
‫‪ -8‬االعتماد على قياس أحجام الصور والرسوميات‪ ،‬واألعمدة النصية على القياس النقطي ‪Pixel‬‬
‫‪.Size‬‬
‫‪ -9‬تزويد المعلومات بعناوين رئيسية أفقية وعمودية‪.‬‬
‫‪ -11‬تجنب األشكال الغرافيكية والصور والرسوميات المتحركة‪ ،‬والتقليل من استخدام اإليقونات‬
‫(الصورية والرسومية)‪ ،‬ومن استخدام النصوص (الرمشية أو الومضية‪ :‬النصوص التي يضاف‬
‫إليها مؤثرات حركية معينة فتهتز وتومض كرمش العين)‪ ،‬وتجنب صور الخرائط‪ ،‬والحرص‬
‫على عدم ظهور الظالل‪.‬‬
‫‪ -11‬بالنسبة لأللوان المستخدمة‪:‬‬
‫‪ ‬يفضل استخدام ألوان الخلفيات البيضاء أو الدرجات الفاتحة جدا من األلوان األخرى‪.‬‬
‫‪ ‬عدم استخدام الخلفيات السوداء إال في الصفحة الرئيسية‪.‬‬
‫‪ ‬عدم استخدام اللون األحمر مع األزرق مع ا‪ ،‬وعدم استخدام الصور الملونة بالبيج‬
‫والبني‪.‬‬
‫‪ ‬استخدام األلوان من العائلة نفسها (اللون ومشتقاته)‪ ،‬ويفضل أن يستخدم اللون‬
‫ومشتقاته في العناصر التي تجمعها عالقة ما‪.‬‬

‫‪37‬‬
 ‫د‪ -‬اإلجراءات القانونية واألمنية ‪:Legality & Security‬‬
‫تتزايد أعداد مواقع الويب يوما بعد يوم‪ ،‬وتزود هذه المواقع المستخدمين بمعلومات رئيسية أو ثانوية عن‬
‫الوضع القانوني‪ ،‬وتخضع إلى إشراف العديد من المنظمات والشركات‪ ،‬والمؤسسات التعليمية‪ ،‬أو حتى‬
‫األفراد‪ ،‬ويتفاوت مستخدمو هذه المواقع بمستوى معرفتهم بالقانون والتشريعات القانونية التي تحكم إنشاءها‬
‫ونشر وتبادل المعلومات من خاللها‪ ،‬ومن أجل أن تستمر هذه المواقع في تحقيق أهداف واحتياجات‬
‫المستخدمين المتجددة يجب على مطوري ومصممي هذه المواقع أن يستمروا بحمايتها‪ ،‬وحماية المعلومات‬
‫المتبادلة عبرها‪ ،‬وتشير الخطوط اإلرشادية المتعلقة بالوضع القانوني واألمني للمواقع إلى مجموعة القواعد‬
‫والحلول التي تحكمها‪ ،‬ويمكن ذكرها فيما يلي‪:‬‬
‫‪ -1‬يعد المطورون والمصممون مسؤولين عن المعلومات القانونية الموجودة في كل صفحات الموقع‪،‬‬
‫والمتعلقة بتفاصيل كاملة عن كيفية االتصال مع الموقع والعنوان‪ ،‬ورقم الهاتف والفاكس‪ ،‬وعنوان‬
‫البريد اإللكتروني للموقع‪.‬‬
‫‪ -2‬وضع بيانات تحديث المعلومات بشكل واضح‪.‬‬
‫‪ -3‬أن يتم إيضاح الوضع القانوني للمعلومات المرتبطة‪.‬‬
‫‪ -4‬أن يتم توجيه المستخدمين لتصفح أنواع من المواقع‪ ،‬أو مصادر المعلومات التي تحمل معلومات‬
‫مرتبطة بالمعلومات التي يبحثون عنها‪ ،‬وقد سبق أن قام المستخدمون بتقييمها أنها مهمة‪.‬‬
‫‪ -5‬أن يراجع الخبير المهتم بهذا المجال الوضع القانوني للمعلومات‪.‬‬
‫‪ -6‬أن يكون هناك إذن بالسماح الستخدام المضمون من مزودين آخرين‪.‬‬
‫‪ -7‬إظهار مصدر المعلومات والبيانات في صفحات الموقع‪ ،‬وتنبيه المستخدمين أن الموقع ليس هو‬
‫المصدر الوحيد للمعلومات‪ ،‬وبالتالي فإن مسؤوليته عنها محدودة‪.‬‬
‫‪ -8‬التعرف على طريقة حماية البيانات الشخصية ومعالجتها من قبل المستخدمين أنفسهم مع تقديم‬
‫إمكانية الحفظ والتخزين لها بشكل قانوني‪.‬‬
‫‪ -9‬ال توضع الروابط مع المواقع األخرى إال بعد موافقة المواقع األصلية التي تنتقل إليها هذه‬
‫الروابط‪.‬‬
‫‪ -11‬عرض عبارة "حقوق النشر محفوظة"‪.‬‬
‫‪ -11‬من الضروري أحيان ا وضع آلية لدخول الموقع تتضمن اسم المستخدم وكلمة السر‪ ،‬ومن‬
‫المفضل تزويد الموقع بآلية للمساعدة في حال نسيان اسم المستخدم أو كلمة السر‪.‬‬

‫‪38‬‬
 ‫ه‪ -‬االتصال والبنية التحتية ‪:Communication & Infrastructure‬‬
‫يعاني الكثير من المستخدمين من عدم إمكانية‬
‫تصفح مواقع الويب في كل األوقات نظ ار‬
‫لمسؤولياتهم وكثرة مشاغلهم‪ ،‬لذلك يتصفحون‬
‫مواقعهم المفضلة في منازلهم ومن خالل أجهزتهم‬
‫الشخصية‪ ،‬وهنا تظهر العديد من المشكالت التي ال تستطيع سرعة اإلنترنت أحيان ا وال تطور البنية‬
‫التحتية لالتصاالت حلها بالشكل األمثل‪ ،‬لذا يمكن طرح مجموعة من الخطوط اإلرشادية المتعلقة بهذه‬
‫القضية‪ ،‬والتي يمكن ذكرها فيما يأتي‪:‬‬
‫‪ -1‬يجب أال يتجاوز حجم الصفحة مع ما تتضمنه من رسوميات ‪ 51‬كيلو بايت و‪ 21‬ثانية كحد‬
‫أقصى لتنزيل المعلومات والبيانات باستخدام (مودم) سرعته ‪ 28.8‬كيلو بايت‪( ،‬وقد انخفضت‬
‫هذه األرقام مع تزايد سرعات المودم ووصلت إلى ‪ 11‬ثوان)‪.‬‬
‫‪ -2‬تجنب العناصر التي تستخدم فيها (الفالشات) والعناصر الوامضة (الرامشة)‪.‬‬
‫‪ -3‬استخدام المساحة المخصصة للصفحة لعرض أقصى ما يمكن عرضه من معلومات‪.‬‬
‫‪ -4‬تصميم الموقع بحيث يتناسب مع كل أنظمة التشغيل‪.‬‬
‫‪ -5‬السماح للمستخدم بتنزيل الملفات والمعلومات باسم محدد منه إلى مسار يحدده بنفسه‪.‬‬
‫‪ -6‬تقسيم الوثائق والملفات والمعلومات الكبيرة وعلى أكثر من صفحة مع وضع قائمة بالمحتويات‪.‬‬
‫‪ -7‬تزويد المستخدمين ببدائل مختلفة لضغط الملفات‪.‬‬
‫‪ -8‬كل صفحة من صفحات الموقع يجب أن تحمل بسرعة‪.‬‬
‫‪ -9‬الحذر من أال تسبب كثرة الروابط التشعبية المستخدمة في منع تنزيل الصفحات الكبيرة‪.‬‬
‫‪ -11‬استخدام الطابعات المشهورة والمعروفة لطباعة الصفحات‪ ،‬والسيما تلك التي تحمل‬
‫الرسوميات‪.‬‬

‫‪39‬‬
 ‫و‪ -‬التسويق ‪:Marketing‬‬
‫تتناول القواعد والخطوط اإلرشادية المتعلقة بعملية‬
‫التسويق العديد من النقاط التي تساعد مطوري‬
‫مواقع الويب على معرفة مستخدميهم‪ ،‬ومعرفة‬
‫الوسائل التي تصلهم بهم‪ ،‬وتتلخص هذه القواعد بـ‪:‬‬

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

‫‪40‬‬
 ‫ز‪ -‬الداللة على الموقع ‪:Semantic‬‬
‫يحتوي اإلنترنت حتى هذا الوقت عشرات الماليين‬
‫من المواقع‪ ،‬وال تحظى هذه المواقع بالرقابة أو‬
‫الضبط‪ ،‬ولكي يصل المستخدمون إلى هذه المواقع‬
‫يستخدمون محركات البحث المتعددة العامة‬
‫والمتخصصة‪ ،‬كمحرك البحث ‪ Google‬و‪Yahoo‬‬
‫وغيرها من المحركات العامة‪ ،‬أما إذا أراد المستخدم‬

‫البحث عن معلومات متخصصة ودقيقة‪ ،‬فيبحث في العديد من محركات البحث المتخصصة عن مواقع‬
‫متخصصة حسب مجال التخصص‪ :‬العلمي أو العسكري أو التعليمي أو غيره‪ ،‬وهو ما يجب أن توفره‬
‫مواقع الويب لمستخدميها لفهم آلية الوصول إلى المواقع‪ ،‬إضافة إلى إمكانية إحالتهم إلى محركات البحث‬
‫التي توصل إلى محركات بحث أخرى يمكن أن تحوي المعلومات المطلوبة للمستخدمين‪.‬‬

‫ح‪ -‬األخطاء ‪:Errors‬‬

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

‫‪ -1‬كتابة رسالة الخطأ بطريقة واضحة ومفهومة من أغلب المستخدمين‪.‬‬

‫‪ -2‬أن توضح وتصف رسالة الخطأ أسباب هذا الخطأ‪.‬‬
‫‪ -3‬أن توضح وتصف رسالة الخطأ التصرف الالزم للتخلص من هذا الخطأ‪.‬‬

‫‪41‬‬
 ‫‪ -4‬أن تعطي المستخدم نقطة خروج واضحة‪.‬‬
‫‪ -5‬يستخدم الصوت للتحذير من الخطأ‪.‬‬
‫‪ -6‬أن يحذر نظام تشغيل الموقع المستخدمين إذا ما كانوا سيقبلون على ارتكاب أخطاء معينة‪،‬‬
‫وبالتالي أن يحميهم ويمنعهم من ارتكابها ما أمكن ذلك‪.‬‬

‫ط‪ -‬االختبار والتجريب ‪:Testing‬‬

‫يعد اختبار تصميم موقع الويب مرحلة‬
‫مبكرة ومهمة في عملية التصميم‪ ،‬فمن‬
‫خاللها يمكن تحديد وتقييم هذه‬
‫العملية‪ ،‬والوقوف على المشكالت‬
‫التي يمكن أن تظهر في أثناء‬
‫االستخدام‪ ،‬فالتجربة واالختبار يمكن‬

‫أن تؤكد أن بناء وتصميم الموقع تم بشكل منطقي ودقيق‪ ،‬ويمكن تلخيص أبعاد التجريب واالختبار من‬
‫خالل طرح األسئلة التالية التي توجه للمستخدمين‪ ،‬ويسعى المطورون والمصممون لهذه المواقع إلى‬
‫الحصول على إجابات دقيقة حولها‪:‬‬
‫‪ -1‬هل يحصل المستخدمون على المعلومات بسهولة؟‬
‫‪ -2‬ما مدى وضوح وتناسق وفعالية أدوات اإلبحار في الموقع؟‬
‫‪ -3‬هل يتم تحميل الصفحات بسرعة تتناسب مع أغلب سرعات المودم؟‬
‫‪ -4‬هل يستطيع المستخدمون معرفة من أنشأ هذا الموقع؟ وهل يجدون عنوان البريد اإللكتروني‬
‫للموقع لالتصال في حال وجود صعوبات أو مشكالت في االستخدام؟‬
‫‪ -5‬هل تظهر للمستخدمين جميع العناصر المرئية في الصفحة دون زلق الشاشة أو االنتقال من‬
‫جهة اليمين إلى جهة اليسار؟‬
‫‪ -6‬هل يستطيع المستخدمون تصفح الموقع من خالل متصفحات مختلفة؟‬
‫‪ -7‬هل يجد المستخدمون نصوص ا بديلة للصور والرسوميات الموجودة في الموقع؟‬

‫‪42‬‬
‫‪ -8‬هل ترتبط الروابط بعناوين الصفحات التي تتعلق بها؟ وهل تم التأكد من فعالية الروابط الداخلية‬
‫أو الخارجية؟ وهل تم تلوين الروابط الداخلية باأللوان القياسية المعروفة‪ :‬األزرق في حال عدم‬
‫زيارتها‪ ،‬واألحمر في حال زيارة هذه المواقع؟‬
‫‪ -9‬هل يحمل عنوان الصفحة مضمونها لتسهيل التعرف عليها؟‬
‫‪ -11‬هل يقدم الموقع للمستخدمين المعلومات التي يحتاجون إليها وتشبع رغباتهم وتحقق أهدافهم؟‬
‫‪ -11‬هل وفر الموقع للمستخدمين الخدمات التي يحتاجون إليها‪ :‬خدمة البحث في الموقع‪ ،‬وخدمة‬
‫المساعدة‪ ،‬وعنوان البريد اإللكتروني‪ ،‬وغيرها من الخدمات؟‬

‫ي‪ -‬تقييم مواقع الويب ‪:Evaluating Websites‬‬

‫إن تراكم الخبرات الناتجة عن دراسة مواقع الويب‬
‫من حيث مدى ثباتها وسهولة دخولها وأدائها‬
‫كوسيلة تواصل قابلة للتلقي أدى إلى مجموعة من‬
‫المعايير ‪ Criteria‬التي يمكن استخدامها لتقييم‬
‫مواقع الويب تقييم ا علمي ا يتسم بالموضوعية‬
‫المستمدة من أسس علمية وفنية‪،‬‬

‫فقد اقترح ‪ Criket Heinze‬و‪ Cornelia Brunner‬مجموعة من المعايير لتقييم مواقع الويب‪:‬‬
‫‪ -1‬على مستوى الشكل ‪ :look‬مظهر الموقع والشعور الذي يولده عند رؤيته‪ ،‬والخطوط ‪Fonts‬‬
‫والخلفيات واأللوان والصور‪ ،‬ومدى توافقها مع المظهر والشعور‪.‬‬
‫‪ -2‬على مستوى اإلخراج ‪ :Layout‬تنظيم الموقع وثباته من صفحة إلى أخرى‪ ،‬وسهولة قراءة كل‬
‫صفحة‪ ،‬والحصول على المعلومات منها‪.‬‬
‫‪ -3‬عناصر الوسائط ‪ :Media Elements‬وجود الصور والصوت والرسوم المتحركة‪ ،‬ودعم‬
‫محتوى الموقع‪.‬‬

‫‪43‬‬
‫‪ -4‬تصفح الموقع ‪ :Navigation‬سهولة التجول داخل الموقع ووضوح تنظيمه من خالل الصفحة‬
‫الرئيسية‪ ،‬ووجود خريطة للموقع‪ ،‬ومعرفة الوصالت‪ ،‬وتعدد أدوات اإلبحار‪ ،‬ووضوح األيقونات‬
‫المستخدمة وما تمثله‪.‬‬

‫لقد تجاوز اهتمام الباحثين في تقييم مواقع الويب مجرد اقتراح مجموعة من‬
‫المعايير إلى تصميم استبيانات لدراسة مكونات موقع الويب وقياس مدى‬
‫ثباته ‪ Consistency‬ومن بين هذه الجهود‪:‬‬
‫‪ ‬االستبيان الذي صمم لقياس ثبات الواجهة الذي بالرغم من أنه‬
‫يركز في األساس على قياس الجوانب النصية في مواقع الويب‪،‬‬
‫إال أنه يخصص نحو ثلث أسئلته للبناء التصميمي‪.‬‬
‫‪ ‬االستبيان الذي وضع قائمةا لتحليل دوافع استخدام مواقع الويب‪،‬‬
‫والتي تقوم على فرضية أن الجودة الدافعية " ‪motivational‬‬
‫‪ "quality‬تحث زائر الموقع على معاودة الزيارة‪.‬‬

‫‪44‬‬
 ‫الخاتمة‬
‫يعطي التصميم االنطباع األولي عن الموقع اإللكتروني‪ ،‬فإذا استطاع أن يخلق لدى المستخدمين انطباعا‬
‫جيدا وجذاب ا انتقلوا إلى المرحلة الثانية وهي تصفح الموقع‪ ،‬وقد توصل المطورون والمصممون سواء من‬
‫خالل خبراتهم العملية في التصميم أو من خالل دراستهم لتأثير تصميم هذه المواقع على المستخدمين‪،‬‬
‫للعديد من قواعد التصميم التي قد ال تتناسب مع كل أنواع مواقع الويب وصفحاته نظ ار الختالف أهدافها‬
‫وامكانياتها وجمهورها المستخدم‪ ،‬لكنها تتناسب مع أغلبها‪ ،‬ويمكن في حال األخذ بها الوصول إلى مواقع‬
‫مالئمة ومناسبة للوصول بسرعة إلى المستخدمين وتيسير وصولهم إلى المعلومات التي تتفق مع حاجاتهم‬
‫واهتماماتهم‪ ،‬وقد تكون القاعدة األولى التي يجب أن يتنبه لها المصممون ولم تذكر في القواعد السابقة‬
‫أن جمهور المواقع اإللكترونية ليس صبو ار‪ ،‬ولديه خيارات متعددة من المواقع والصفحات على اإلنترنت‪،‬‬
‫لذا فإن النظرة األولى التي يلقيها على الموقع هي التي ستقرر فيما سيستمر في التصفح أم ال‪ ،‬وبالنسبة‬
‫ألصحاب المواقع يجب أن يكون القرار‪ :‬نعم‪ ،‬سأستمر‪ ،‬وسأكرر الزيارة‪.‬‬

‫‪45‬‬
 ‫الخالصة‬

‫يحقق تصميم مواقع الويب وظيفتين مهمتين‪ :‬الوظيفة الجمالية وجذب انتباه المستخدمين واالحتفاظ بهم ما‬
‫أمكن‪ ،‬ووظيفة تسهيل االستخدام للوصول للمعلومات بيسر وسهولة‪.‬‬

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

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

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

‫‪46‬‬
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪-1‬حجم أي صفحة من صفحات موقع الويب يجب أال يتجاوز‪:‬‬

‫‪ 21 .A‬كيلو بايت‪.‬‬
‫‪ 25 .B‬كيلو بايت‪.‬‬
‫‪ 45 .C‬كيلو بايت‪.‬‬
‫‪ 51 .D‬كيلو بايت‪.‬‬

‫اإلجابة الصحيحة‪ 51 D :‬كيلو بايت‬

‫‪-2‬من القواعد والخطوط اإلرشادية المتعلقة باإلجراءات األمنية والقانونية‪:‬‬

‫‪ .A‬عرض عبارة "حقوق النشر محفوظة"‪.‬‬

‫‪ .B‬استئذان صفحات المعلومات التي سيتم االرتباط بها‪.‬‬
‫‪ .C‬التعرف على اإلرشادات المتعلقة بنشر المعلومات الشخصية والخاصة‪.‬‬
‫‪ .D‬كل ما سبق صحيح‪.‬‬
‫‪ .E‬كل ما سبق خاطئ‪.‬‬

‫اإلجابة الصحيحة‪ D :‬كل ما سبق صحيح‬

‫‪47‬‬
‫‪-3‬من المفضل أن تعرض صفحة الموقع على شاشات ال تتجاوز خمس الشاشات‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫‪-4‬زر ‪ Back‬من أهم أدوات اإلبحار‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪48‬‬
 ‫المراجع‬
‫‪ -1‬أبو عيشة‪ ،‬فيصل‪ ،)2111( ،‬اإلعالم اإللكتروني‪( ،‬ط‪ ،)1‬األردن‪ ،‬دار أسامة للنشر والتوزيع‪.‬‬
‫‪ -2‬تربان‪ ،‬ماجد سالم‪ ،)2118( ،‬اإلنترنت والصحافة اإللكترونية "رؤية مستقبلية"‪( ،‬ط‪ ،)1‬القاهرة‪،‬‬
‫الدار المصرية اللبنانية‪.‬‬
‫‪ -3‬شفيق‪ ،‬حسنين‪ ،)2111( ،‬الوسائط المتعددة في المجال اإلعالمي واإلنترنت‪( ،‬ط‪ ،)1‬القاهرة‪ ،‬دار‬
‫فكر وفن للطباعة والنشر والتوزيع‪.‬‬
‫‪ -4‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2119( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -5‬موسى أحمد‪ ،‬محمد األمين‪ ،)2115( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -6‬مصطفى حسين‪ ،‬محمد‪ ،)2111( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،6‬العدد ‪.18‬‬
‫‪ -7‬درويش اللبان‪ ،‬شريف‪ ،)2117( ،‬الصحافة اإللكترونية‪ ،‬دراسات في التفاعلية وتصميم المواقع‪،‬‬
‫القاهرة‪ ،‬الدار المصرية اللبنانية‪.‬‬
‫‪ -8‬محسب‪ ،‬حلمي‪ ،)2117( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪( ،‬ط‪ ،)1‬القاهرة‪ ،‬دار‬
‫العلوم‪.‬‬
‫‪ -9‬رسمي‪ ،‬انتصار‪ ،)2114( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪( ،‬ط‪،)1‬‬
‫عمان‪ ،‬دار وائل للنشر‪.‬‬
‫‪ -11‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2111( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على‬
‫العمليات اإلدراكية لدى عينة من طالب الجامعة‪ ،‬في إطار نظرية تمثيل المعلومات‪ ،‬دراسة شبه‬
‫تجريبية‪ ،‬رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -11‬فتحي محمد رزق‪ ،‬منار‪ ،)2119( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬

‫‪49‬‬
12- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM, Dissertation
Submitted in View of Obtaining a degree of Master Science in Computer
Science, Vrije Universiteit Brussel, Dep.of Computer System.
13- Beaird, Jason, (2010), The Principals of Beautiful Web Design, (2.Ed),
Canada, Site Point Pty Ltd.

50
 ‫الوحدة الثالثة‬

‫البرامج التقنية المستخدمة في تصميم (تكوين) صفحة الويب‬

‫األهداف التعليمية‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ 1‬يشرح برنامج ‪HTML: Hypertext Markup Language‬‬ ‫‪-‬‬

‫‪ 2‬يشرح برنامج ‪PHP: Personal Home Page‬‬ ‫‪-‬‬

‫‪ -3‬يشرح برنامج ‪XML: Extensible Markup Language‬‬

‫‪ -4‬يشرح برنامج ‪JAVA‬‬
‫‪ -5‬يشرح برنامج ‪JAVA Script‬‬
‫‪ -6‬يشرح برنامج ‪ASP: Active Server Pages‬‬
‫‪ -7‬يشرح برنامج ‪CSS: Cascading Style Sheets‬‬
‫‪ -8‬يشرح برنامج ‪Coral Draw‬‬
‫‪ -9‬يشرح برنامج الرسم الثالثي األبعاد ‪3DS Max Studio‬‬
‫‪ -11‬يشرح برنامج فالش ‪Flash‬‬
‫‪ -11‬يشرح برنامج ‪Front Page‬‬
‫‪ -12‬يشرح برنامج ‪Adobe Dreamweaver‬‬

‫‪51‬‬
 :‫العناصر‬

.‫ مقدمة‬-
:‫ برامج تكوين وتصميم موقع أو صفحة الويب‬-
:‫ البرامج المتعلقة بتصميم صفحات الويب‬-
.HTML: Hypertext Markup Language 
.PHP: Personal Home Page 
.XML: Extensible Markup Language 
.JAVA 
.JAVA Script 
ASP: Active Server Pages 
:‫ البرامج المتعلقة بمعالجة النصوص والصور والرسوم‬-
.Coral Draw 
.3DS Max Studio 
.Photoshop 
.Flash 
.Front Page 
.Adobe Dreamweaver 
.‫ خاتمة‬-

– ‫الموقع اإللكتروني – التصميم – الوسائط المتعددة – النص المتشعب‬ :‫الكلمات المفتاحية‬

JAVA Script - XML – PHP – JAVA – HTML – ‫ برامج التصفح – لغات البرمجة‬- ‫الروابط‬
- Front Page - Flash - Photoshop - 3DS Max Studio - ASP - Coral Draw –
.Power Point ‫ – برنامج ال ـ‬Words ‫ برنامج ال ـ‬- Adobe Dreamweaver

52
 ‫أوال‪ :‬مقدمة‬

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

‫قد أدى هذا التطور في لغات التأليف وتصميم المواقع والصفحات إلى إتاحة برامج متخصصة لكل‬
‫استخدامات الكمبيوتر والشبكات‪ ،‬وتحقيق أهدافها االتصالية‪ ،‬وكان أقربها إلى االستخدام‪:‬‬

‫‪ ‬البرامج التي أطلقتها شركة ‪ Microsoft‬لتنظيم استخدام أدوات االتصال كالمحادثة أو البريد‬
‫اإللكتروني‪ ،‬والحوار والمؤتمرات‪ ،‬وكذلك األدوات المساعدة على التصميم كبرنامج تنسيق‬
‫الكلمات ‪ ،Words‬وبرنامج تنسيق العروض ‪ ..Power Point‬وغيرها‪.‬‬

‫‪ ‬لغات تصميم الصفحات مثل لغة الـ ـ‪ ،HTML‬ولغة ال ـ ‪ XML‬وال ـ ‪ ،PHP‬وال ـ ‪JAVA & JAVA‬‬
‫‪ ،Script‬ولغة ال ـ ‪ ،ASPK‬وغيرها من اللغات التي جاءت بديالً عن لغات البرمجة التي‬
‫صاحبت نشأة صفحات الويب مثل لغة ال ـ ‪ Basic‬وال ـ ‪ Pascal‬وغيرها من اللغات‪.‬‬

‫‪ ‬برامج معالجة الصور والرسوم كبرامج‪ ،Coral Draw :‬و‪،3DS Max Studio‬‬
‫و‪ ،Photoshop‬و‪ ،Flash‬و‪ ،Front Page‬وسيتم التعرض إلى كل هذه البرامج بالتفصيل في‬
‫هذه الوحدة‪.‬‬

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

‫‪53‬‬
‫وتنقسم البرمجيات المستخدمة في تصميم الصفحات اإللكترونية إلى قسمين‪ :‬األول يتعلق بتصميم‬
‫صفحات الويب‪ ،‬والثاني يتعلق بالوسائط المتعددة المستخدمة‪.‬‬

‫برمج المتعلقة بتصميم صفحات الويب‬

‫ثانيا‪ :‬ال ا‬

‫أدت التطورات المتالحقة إلى ظهور العديد من‬

‫لغات تصميم الصفحات اإللكترونية‪ ،‬وتتعدد‬
‫أغراض هذه اللغات واستخداماتها‪ ،‬كما تتشابه‬
‫أيضاً فيما بينها من حيث األغراض التي تؤديها‬
‫إال أنها تختلف من حيث طرق البرمجة المستخدمة في كل منها‪ ،‬ومن هذه اللغات ال ـ ‪ HTML‬وهي اللغة‬
‫األشهر بين اللغات‪ ،‬كما أن هناك لغات تتفاوت من حيث حجم الشهرة واالستخدام مثل لغات ‪،PHP‬‬
‫و‪ ،CSS‬و‪ ،ASP‬و‪ ،Oracle‬و‪ XML‬و‪ ، Java‬و‪ ،Java Script‬وغيرها‪.‬‬

‫أ‪HTML: Hypertext Markup Language -‬‬

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

‫من قبل ‪ ، Tim-Berners Lee‬وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة‬
‫األخرى‪ ،‬فمثالً ال تحتوي على جمل التحكم والدوران‪ ،‬وعند الحاجة إلى استخدام هذه الجمل يجب تضمين‬
‫شيفرات من لغات أخرى كلغة الـ ‪ Java‬والـ ‪ ،Java Script‬كذلك ال تحتاج إلى مترجم خاص بها‬

‫‪54‬‬
‫‪ ،Compiler‬وغير مرتبطة بنظام تشغيل معين ألنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح‬
‫اإلنترنت وبغض النظر عن النظام المستخدم‪.‬‬
‫وتستعين الـ ‪ - HTML‬كما سبق ذكره ‪ -‬ببعض اللغات المساعدة مثل الـ ‪ Java Script‬التي تقوم‬
‫بوضع بعض الخدع والمؤثرات والتحسينات في الموقع‪ ،‬كذلك تستعين بلغة ال ـ ‪ CSS‬لمزيد من السرعة‬
‫في خلق الصفحات وتنسيقها‪.‬‬
‫وتعبر هذه اللغة عن مجموعة من الصفحات المتصلة معاً بروابط متشعبة‬
‫تشكل في مجملها صفحات شبكة اإلنترنت ‪ ،World Wide Web‬وتضم‬
‫النصوص والصور‪ ،‬وملفات الصوت وبرامج أخرى‪ ،‬كما تساهم هذه‬
‫اللغات في إضافة الكثير من األبعاد التفاعلية لتصميم الصحف‬
‫اإللكترونية حيث يمكن من خالل هذه اللغة دعم خاصية النصوص‬
‫التشعبية‪ ،‬إلى جانب عدم اقتصار هذه اللغة على نظام تشغيل معين‪ ،‬ولذا‬
‫فهي ال تتطلب برامج لتحرير النصوص الخاصة بها‪ ،‬فيمكن من خالل‬
‫بعض البرمجيات المتوافرة في أي جهاز حاسب التعامل معها مثل برنامج‬

‫‪ Front Page‬أو حتى برنامج ال ـ ‪ ،Word‬حيث يمكن من خالل هذه البرامج تصميم صفحة إلكترونية‬
‫بلغة ‪ ،HTML‬إذ ال يتطلب األمر سوى‪:‬‬
‫‪ ‬حفظ الملف باالمتداد ‪ html‬أو ‪ htm‬فقط‪.‬‬
‫‪ ‬ثم العمل على توزيع الصور والرسوم‪ ،‬والنصوص على الصفحة دون الحاجة إلى الترميز ووضع‬
‫الشفرات‪ ،‬فكل هذا يمكن أن تقوم به تلك البرمجيات مباشرة‪.‬‬

‫وتمد لغة ال ـ ‪ HTML‬المصممين والمطورين بالعديد من األوامر التي تجعل من التصميم عملية جذابة من‬
‫خالل إمكانية تجميل خطوط النصوص التي تحتوي عليها الصفحة سواء من حيث نوع الخط أم حجمه أم‬
‫لونه أم شكله (سميك ‪ -‬مائل ‪ -‬مرتفع ‪ -‬منخفض‪ )..‬أم مكان الحرف‪.‬‬

‫‪55‬‬
 ‫ب‪PHP: Personal Home Page -‬‬

‫ظهرت هذه اللغة للمرة األولى عام ‪ 1995‬على يد الدانماركي ‪ ،Rasmus Lerdorf‬وكانت اختصا اًر ل ـ‬
‫‪ ،Personal Home Page‬أما اآلن فقد أصبحت اختصا اًر ل ـ ‪،PHP: Hypertext Preprocessor‬‬
‫وقد أنشأها المبرمج بدايةً لتحل محل مجموعة من البرامج ‪ Scripts‬المكتوبة بلغة ‪ ،Perl‬وقد استخدم ال ـ‬
‫‪ PHP‬ألداء مهام مثل عرض سيرته الذاتية على اإلنترنت‪ ،‬وتحديد عدد الزيارات التي كانت تتم لها‪ ،‬ثم‬
‫تطور األمر بعد ذلك بشكل سريع ومتالحق عندما انضم إليه مطورون آخرون أضافوا إضافات مؤثرة‬
‫جداً للغة الجديدة جعلتها تنتشر بسرعة على نطاق واسع وتلقى دعماً متزايداً‪ ،‬وما ساعد على ذلك أنها‬
‫مفتوحة المصدر ومجانية‪.‬‬

‫ولغة ال ـ ‪ PHP‬واحدة من أشهر لغات البرمجة المستخدمة في إنشاء تطبيقات الويب ‪Web‬‬
‫‪.Applications‬‬

‫‪56‬‬
 ‫ميزات وفوائد لغة الــ ‪:PHP‬‬
‫‪ .1‬هي من اللغات التي يقوم خادم الويب ‪ Web Server‬بتفسير وتنفيذ الكود الخاص بها‪ ،‬ثم يرسل‬
‫النتيجة ليتم عرضها في متصفح العميل‪ ،‬وألن ال ـ ‪ Web Server‬هو الذي يفسر وينفذ الكود‬
‫الخاص بها لذا يطلق عليها ‪ Server-Side Scripting Language‬مثلها في ذلك مثل لغة‬
‫‪ ASP.net‬و‪ ،Perl‬و‪ Python‬و‪ ،Ruby‬و‪ ،Java Server Pages-JSP‬ولكنها تتفوق‬
‫عليهم جميعاً من حيث أنها األوسع انتشا اًر‪.‬‬
‫‪ .2‬لغة ال ـ ‪ PHP‬تستخدم إلنشاء صفحات ويب ديناميكية أي صفحات متغيرة المحتوى‪ ،‬وهذا‬
‫وبناء على المعايير التي يحددها هو‪ ،‬كما هو‬
‫ً‬ ‫المحتوى يتغير نتيجة التفاعل مع المستخدم‪،‬‬
‫الحال في مواقع التوظيف عبر اإلنترنت والتي توفر لمستخدميها القدرة على تسجيل بياناتهم بها‬
‫وتعديلها في أي وقت‪ ،‬والغائها إذا أرادوا‪ ،‬كما أنها تعرض للمستخدم الذي يبحث عن وظيفة‬
‫معينة نتائج تتوافق مع المعايير التي حددها عند البحث‪ ،‬وكما هو في موقع ‪facebook.com‬‬
‫حيث تتغير بيانات المستخدم المعروضة فيه وقائمة أصدقائه‪ ،‬وربما مظهر الصفحات‬
‫المعروضة‪ ،‬وكذلك اإلضافات المستخدمة بتغير المستخدم نفسه‪ ،‬إذاً فلغة ال ـ ‪ PHP‬هي لغة تتيح‬
‫التفاعلية للمواقع اإللكترونية‪ ،‬لذا عمدت العديد من الصحف اإللكترونية إلى استخدام هذه اللغة‬
‫في تصميم مواقعها للتغلب على الصعوبات التي يؤدي إليها استخدام لغة ‪ HTML‬التي ال تتيح‬
‫فرصة تحديث محتويات الصحيفة اإللكترونية إال بعد أن يعمل المصمم على تحديث‬
‫الموضوعات بشكل دوري‪ ،‬وبطريقة تقليدية‪ ،‬وذلك من خالل‪:‬‬
‫‪ ‬القيام بتصميم الصفحات المطلوبة‪.‬‬
‫‪ ‬ثم إجراء بعض التعديالت على الصفحات الرئيسية للصحيفة‪.‬‬
‫‪ ‬ثم القيام بتحميل الصفحات من جديد‪.‬‬
‫وبذلك يمكن من خالل استخدام لغة ‪ PHP‬لمواقع الصحف اإللكترونية التعرف على آراء القراء‪.‬‬
‫‪ .3‬تتميز لغة ‪ PHP‬بكونها اللغة التي يفهمها العديد من المتصفحات‪ ،‬ولذا فهي ال تحمل حاسوب‬
‫زائر الموقع بأي أعباء‪ ،‬إضافة إلى أن هذه اللغة توفر مرونة عالية في البرمجية ال تتوافر في‬
‫اللغات األخرى مثل ‪ ،HTML‬و‪ Java Script‬التي تعمل على حاسوب زائر الموقع‪.‬‬

‫‪57‬‬
‫‪ .4‬تتعدد فوائد هذه اللغة حيث يمكن االعتماد عليها في عمل قوائم المراسالت البريدية والبريد‬
‫اإللكتروني‪ ،‬ولذا تعتمد لغة ‪ PHP‬إمكانية التعامل مع محركات البحث التي تتيحها الصحف‬
‫اإللكترونية للتعرف على األخبار والموضوعات التي تم نشرها في أعداد سابقة‪.‬‬

‫وقد تطورت هذه اللغة بشكل كبير حيث صدر منها نسخ متعددة‪ ،‬منها اإلصدار الرابع ‪ PHP4‬الذي‬
‫يحتوي على تقنية تسمى ‪ Zend‬التي تساعد على تسريع الصفحات المعتمدة على هذه اللغة‪.‬‬

‫ج‪XML: Extensible Markup Language -‬‬

‫تعد ال ـ ‪ XML‬من اللغات الشائعة حالياً لبناء قواعد المعلومات والمواقع اإللكترونية ذات السعة الكبيرة‪،‬‬
‫وقد تجاوزت هذه اللغة بعض المشكالت الموجودة في بعض لغات اإلنترنت وخصوصاً لغة ‪،HTML‬‬
‫ويستفاد منها في‪:‬‬

‫‪ ‬إعداد البيانات والروابط الخاصة داخل الموقع‬

‫استعرضها من أي متصفح أو أي برنامج معد للتعامل مع هذه اللغة‪.‬‬
‫ا‬ ‫‪ ‬إنشاء وثائق يمكن‬

‫وبشكل عام فإن لغة ‪ XML‬هي لغة لوصف البيانات وهيكلتها على اإلنترنت بحيث يمكن من خاللها‬
‫االستفادة من هذه البيانات‪ ،‬والبحث فيها والحصول منها على المعلومات‪ ،‬ويمكن تحديد فوائد ومهام هذه‬
‫اللغة في‪:‬‬

‫‪ -1‬تخزين البيانات‪:‬‬

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

‫‪58‬‬
 ‫‪ -2‬تبادل ومشاركة البيانات‪:‬‬

‫تستطيع لغة ال ـ ‪ XML‬تبادل البيانات ومشاركتها‪ ،‬وقد قدمت حلوالً كثيرة لمشكلة تعارض التنسيقات‬
‫الخاصة بالبيانات ‪ ،incompatible formats‬وذلك ألن بيانات ‪ XML‬يتم تخزينها في ملفات نصية‬
‫بسيطة مما يجعلها تعمل من دون مشكالت مع مختلف نظم التشغيل والخوادم والتطبيقات‬
‫والمستعرضات‪.‬‬

‫‪ -3‬إمكانية عرض البيانات بأكثر من طريقة‪:‬‬

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

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

‫د‪ -‬الــ ‪:JAVA‬‬

‫قامت شركة ‪ Sun Micro system‬عام ‪ 1991‬بتمويل بحث إلنشاء لغة برمجة لتطوير األدوات‬
‫اإللكترونية الذكية‪ ،‬ونتيجةً لهذا البحث ظهرت لغة ال ـ ‪ JAVA‬المبنية على لغة (‪ )C++‬أطلق عليها‬
‫مخترعها ‪ James Gosling‬اسم أوك (‪ ،)Oak‬اكتشف فيما بعد أن هناك لغةً أخرى بهذا االسم‪ ،‬فتم‬
‫‪Dynamic‬‬ ‫اختيار اسم ‪ ،JAVA‬وقد أدركت الشركة فائدة ‪ JAVA‬في إضافة المحتوى التفاعلي‬
‫‪ ،Content‬والصور المتحركة ‪ Animation‬إلى صفحات الشبكة‪ ،‬وتم اإلعالن عنها رسمياً عام ‪،1995‬‬
‫فكان إقبال القطاع التكنولوجي وقطاع األعمال عليها كبير جداً بسبب االهتمام الكبير بالشبكة العنكبوتية‪.‬‬
‫وتستخدم ال ـ ‪ JAVA‬في برامج للشركات أو في تحسين الصفحات على اإلنترنت‪ ،‬أو في برامج الهواتف‬
‫المحمولة‪.‬‬

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

‫ه‪:JAVA Script -‬‬

‫‪60‬‬
 ‫تستطيع العديد من لغات النصوص ومنها ال ـ ‪ JAVA Script‬أن تحول‪:‬‬

‫أزرر ونماذج تأخذ بيانات من‬

‫‪ ‬موقع الويب إلى موقع يتفاعل مع المستخدم من خالل إضافة ا‬
‫المستخدم وتحولها إلى نماذج أخرى أو ترسلها بالبريد اإللكتروني‪ ،‬أو تجري عليها عمليات‬
‫حسابية ليست بسيطة‪.‬‬

‫‪ ‬كما يمكن أن تحول الصفحة إلى ما يسمى بصفحات الويب ‪ HTML‬الديناميكية أو التفاعلية‪.‬‬

‫لكن هذه اللغة تتميز عن لغات البرمجة األخرى في كونها سهلة التحكم‪ ،‬وتعمل من خالل جميع أنظمة‬
‫التشغيل مثل ‪ ،Windows‬و‪.Linux‬‬

‫كما تمكن ال ـ ‪ JAVA Script‬من‪:‬‬

‫‪ ‬تغيير ألوان خلفيات الصفحة اإللكترونية وألوان الصفحة عموماً‪.‬‬

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

‫‪ ‬إلى جانب توفير الحماية للصفحات المصممة‪.‬‬

‫و‪ASP: Active Server Pages -‬‬

‫تعد هذه اللغة من آخر التطورات الحاصلة في‬
‫لغات برمجة صفحات الخادم النشطة‪ ،‬والتي‬
‫أطلقتها شركة ‪ ،Microsoft‬وتتميز بإمكانياتها في‬
‫تسهيل التحكم في المواقع من حيث‪:‬‬

‫‪ ‬التصميم واإلدارة‪.‬‬
‫‪ ‬مواءمتها لكل أنواع المتصفحات المستخدمة عند المستخدمين‪.‬‬
‫‪ ‬اعتمادها أسلوب لغة ال ـ ‪ PHP‬نفسه من حيث شفرات اللغة‪.‬‬
‫كما يمكن باستخدام هذه اللغة تتبع المستخدمين من دون العودة إلى ملفات ال ـ ‪.Cookies‬‬

‫‪61‬‬
 ‫ز– ‪CSS: Cascading Style Sheets‬‬
‫توضح هذه اللغة كيفية عرض العناصر المكونة لصفحة الويب كشكل الحروف واخراج الصفحة‪ ،‬ومكان‬
‫الصور وحركة الفأرة على الصفحة‪ ،‬وقد صممت كوسيلة لتعريف إجراءات التصميم دون اللجوء إلى‬
‫االستخدام الخاطئ ألوامر ال ـ ‪ ،HTML‬أو الحلول التي يمكن أن يطبقها متصفح واحد فقط‪ ،‬فيمكن تطبيق‬
‫ال ـ ‪ CSS‬في الكثير من المتصفحات المرئية‪ ،‬ومن مميزات هذه اللغة‪:‬‬
‫‪ -1‬السرعة‪ :‬يزيد استخدام هذه اللغة في التصميم في زيادة سرعة اكتساب خبرة المستخدم في‬
‫الموقع‪ ،‬وعلى الرغم من تحميل الصفحة األولى ببطء ألنه يتم تحميل كل من المضمون وألواح‬
‫األنماط تحمل الصفحات التالية بسرعة إذ إن هذه اللغة المستخدمة في التصميم تخبأ في ذاكرة‬
‫المتصفح‪.‬‬
‫‪ -2‬المرونة‪ :‬تضع ألواح األنماط في لغة ال ـ ‪ CSS‬أساليب العرض لكل الصفحات في ملف‬
‫منفصل‪ ،‬وعندما يطلب صاحب الموقع إجراء أي تعديالت على الموقع كنوع الخط أو لونه‪،‬‬
‫يستطيع المصمم القيام بذلك بسهولة من خالل ملف واحد بدالً من أن يقوم بهذه العملية داخل‬
‫كل ملفات صفحات الموقع‪.‬‬
‫‪ -3‬يسر الوصول‪ :‬تظهر الصفحات المستخدمة للغة ال ـ ‪ CSS‬متشابهة باستخدام برامج التصفح‬
‫المختلفة سواء المتصفحات المرئية أم غير المرئية ك ـ ‪ ،Lynx‬أو اإلصدارات القديمة من‬
‫المتصفحات المرئية‪.‬‬

‫ثالثا‪ :‬برامج تصميم الوسائط المتعددة المستخدمة في التصميم‪:‬‬

‫أ‪ -‬برنامج ‪:Coral Draw‬‬
‫وهو من البرامج الشائعة في الرسم والتصميم والسيما في‬
‫رسم المنحنيات التي تتميز بالتماسك والدقة مهما كان‬
‫تكبير الرسم‪ ،‬وكذلك في معالجة النصوص بغية إنشاء‬

‫أعمال فنية‪ ،‬ومواكبته السريعة للتطورات المستمرة على صعيد أنظمة التشغيل ‪،Operating System‬‬
‫والبرمجيات ‪ ،Software‬وقد تم إطالق أول إصدار منه عام ‪.1985‬‬

‫‪62‬‬
‫وقد قدم اإلصدار المعرب من هذا البرنامج إمكانية التعامل مع الخطوط العربية‪ ،‬والرسوم ذات األلوان‬
‫الكاملة‪ ،‬والتصاميم المعقدة ورسوم الويب والصور المتحركة كافة‪ ،‬فالتطبيقات المعدة في برنامج ‪Coral‬‬
‫‪ Draw‬تساعد على إنشاء‪:‬‬
‫‪ ‬الرسوم ذات األلوان المتكاملة‪.‬‬
‫‪ ‬التصميمات واألعمال الفنية‪.‬‬
‫‪ ‬الشعارات‪.‬‬
‫‪ ‬الرسوم المخصصة لالستخدام على صفحات اإلنترنت‪.‬‬
‫‪ ‬العناوين المميزة التي تستخدم في أسماء الكتب والمجالت أو أي منتجات طباعيه أخرى‪.‬‬
‫‪ ‬الصور الخيالية‪.‬‬
‫‪ ‬أطر الصور المتحركة‪.‬‬
‫‪ ‬الرسوم ذات الجودة العالية المأخوذة من أصول ذات جودة متدنية‪.‬‬

‫برنامج الرسم الثالثي األبعاد ‪:3DS Max Studio‬‬ ‫ب‪-‬‬

‫أطلقته‬ ‫الذي‬ ‫البرنامج‬ ‫هذا‬ ‫على‬ ‫يعتمد‬
‫شركة ‪ AUTODESK‬في رسم وتصميم اإلشكال‬
‫الثالثية األبعاد‪ ،‬واضافة اإلثارة واإلضاءة والحركة‬
‫مدعماً بمؤثرات ثالثية األبعاد‪ ،‬ويساعد هذا البرنامج‬

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

‫‪63‬‬
 ‫استخدامات برنامج ‪3DS Max Studio‬‬
‫ويستخدم هذا البرنامج في‪:‬‬
‫‪ -1‬عرض المشاريع المعمارية من الداخل والخارج‪ :‬حيث يقوم المستخدم ببناء المشروع داخل برنامج‬
‫ال ـ ‪ Max‬ليظهر كما سيبدو بعد االنتهاء من بنائه في الواقع‪.‬‬
‫‪ -2‬عرض المشاريع الصناعية واآلالت‪ :‬كشرح عملية صناعة سلعة معينة أو توضيح مبدأ عمل‬
‫جهاز أو آلة معينة والدخول في تفاصيلها ومكوناتها الدقيقة‪.‬‬
‫‪ -3‬عرض وشرح الظواهر الطبيعية‪ :‬يمكن من خالل هذا البرنامج رسم مناظر طبيعية كاملة تحاكي‬
‫الواقع بما تحتويه من رياح وجاذبية وأشعة شمس وأمطار وثلوج وغيرها‪.‬‬
‫‪ -4‬في الطب‪ :‬يمكن من خالل هذا البرنامج رسم جسم اإلنسان بجميع أعضائه ومكوناته‪ ،‬مما يتيح‬
‫فرصة التعمق في شرح أعضاء الجسم وبيان طرائق وخطوات أي عمليه جراحية‪.‬‬
‫‪ -5‬اإلعالن‪ :‬يستخدم برنامج ال ـ ‪ Max‬في تصميم اإلعالنات التجارية بشكل كبير بحيث يقوم‬
‫المستخدم من خالله بعرض السلعة وشرح فوائدها ومكوناتها‪ ،‬وكذلك يمكن إضافة المؤثرات‬
‫المعبرة على اإلعالن المصور‪ ،‬مما يعطيه جاذبية ولمسة فنية تجذب االنتباه إلى هذا اإلعالن‪.‬‬
‫‪ -6‬اإلنتاج السينمائي‪ :‬يدخل برنامج ال ـ ‪ Max‬وبشكل كبير في الخدع السينمائية‪ ،‬وصنع أفالم‬
‫سينمائية كاملة من دون الحاجة إلى أي ممثل أو آلة تصوير‪.‬‬
‫‪ -7‬صناعة األلعاب‪ :‬لبرنامج ال ـ ‪ Max‬دور كبير في صناعة األلعاب الثالثية األبعاد‪.‬‬

‫ميزات العمل في برنامج ‪:3DS Max Studio‬‬

‫ومن أهم ما يميز العمل في برنامج ‪ 3DS Max Studio‬أنه‪:‬‬
‫‪ -1‬له خصوصيات بمعالجة وقواعد لغة الضوء وكيفية التحكم وتنظيم اإلضاءة في المشهد‪.‬‬
‫‪ -2‬استخدام تأثيرات خاصة لإلضاءة‪.‬‬
‫‪ -3‬تطبيقه للحركة اآللية المتتالية ‪ ،Forward Kinematics‬واألنظمة الديناميكية المطبقة على‬
‫الشخوص واألشكال والنماذج التي تتصف بهيكلية العمود الفقري البشري‪.‬‬
‫‪ -4‬ويتميز البرنامج بفن اإلنتاج النهائي وذلك باستخدامه النظام الفيديوي ‪ ،Video Post‬لتركيب‬
‫المشاهد التي يتألف منها الفيلم النهائي للمشاهد الفيديوية‪.‬‬

‫‪64‬‬
 ‫برنامج فالش ‪:Flash‬‬ ‫ج‪-‬‬
‫بدأ برنامج ال ـ ‪ Flash‬من برنامج يدعى‪ ،Future Splash Animator‬والذي‬
‫أطلقته شركة صغيرة تدعى ‪ Future Wave Software‬عام ‪ ،1995‬ثم‬
‫اشترته شركة ‪ Macromedia‬وطورته ليظهر باسم ‪.Macromedia Flash‬‬

‫ويعد هذا البرنامج بإصداراته الكثيرة ‪ -‬التي ظهرت فيما بعد ‪ -‬أقوى البرامج في تصميم ملفات ال ـ‬
‫‪ Flash‬ويمثل قيمة مضافة لتصميم الويب‪ ،‬إذ هو عبارة عن مجموعة برامج تساعد على إدخال الصور‬
‫والرسوم المتحركة والصوت والحركة مع الحفاظ على الوضوح ودقة التفاصيل‪ ،‬ويتميز البرنامج بصغر‬
‫حجم ملفاته التي ال تستغرق وقتاً طويالً في التحميل‪ ،‬وتم هذا األمر بعد أن قدمت الشركة المنتجة‬
‫للبرنامج معالجة القضايا المتعلقة بيسر االستخدام واصدارها من برنامج ‪.Flash Max‬‬
‫وهناك نوعان من الحركة في برنامج ‪ Flash‬وهما‪:‬‬
‫‪ -1‬حركة إطار بإطار ‪ :Animation Frame by frame‬ويتم في هذا النوع من الحركة وضع‬
‫األشكال والصور المختلفة في كل إطار بطريقة يدوية‪ ،‬فإذا صمم مشهد فيه حركة فإنه يحتاج‬
‫إلى عشرة إطارات‪.‬‬
‫‪ -2‬الحركة البينية ‪ :Tweened Animation‬ويتم في هذا النوع من الحركة وضع األشكال والصور‬
‫في كل إطار بصورة تلقائية‪ ،‬فال حاجة إال إلى تصميم المشهد األول واألخير لتصميم الحركة‪،‬‬
‫ويقوم البرنامج تلقائيا بإدراج اإلطارات الموجودة بين األول واألخير لتكوين عشر صور‬
‫(إطارات)‪ ،‬ومن هنا جاءت تسمية الحركة البينية‪.‬‬

‫د‪ -‬برنامج ‪:Front Page‬‬

‫يعد برنامج ‪ Front Page‬من أهم وأشهر البرامج‬

‫استخداماً في إنشاء صفحات الويب وذلك للمزايا التي‬
‫تمتع بها من حيث إنه جزء من نظام ‪Microsoft‬‬

‫‪65‬‬
 ‫أجزاء برنامج ‪:Front Page‬‬
‫يتألف البرنامج من أجزاء عدة‪:‬‬
‫‪.Personal Web Server -1‬‬
‫‪ -2‬المستكشف ‪.Explorer‬‬
‫‪ -3‬المحرر ‪.Editor‬‬
‫خصائص برنامج ‪:Front Page‬‬
‫يحتوي البرنامج على خصائص متعددة لفحص سالمة الصفحات التي يقوم المصمم بإنشائها وسالمة‬
‫االرتباطات في تلك الصفحات مثل‪:‬‬
‫‪ -1‬إدراج الصور والنصوص وملفات الوسائط المتعددة‪ ،‬كالصوت والفيديو للصفحات التي تم‬
‫إنشاؤها‪ ،‬وربط ملفات الصوت بالصفحات وتشغيلها أحياناً كخلفية لبعض الصفحات‪،‬‬
‫واستخدام تقنية الصوت والفيديو المتدفق ‪ Streaming‬للتغلب على طول فترة التحميل‪.‬‬
‫‪ -2‬ضبط وضع النص كأن يكون منخفضاً أو مرتفعاً عن السطر‪ ،‬أو وضعه وسط الشاشة‪،‬‬
‫وتعديل حجم الخط ونوعه أحياناً‪.‬‬
‫‪ -3‬إضافة أي مؤثرات أخرى مثل تأثير النص الوامض‪ ،‬وادراج الفتات إعالنية متغيرة وعدادات‪،‬‬
‫وأز ارر متحركة‪ ،‬ونصوص متحركة‪.‬‬
‫‪ -4‬إضافة سمات إلى النص كأن يكون عريضاً ومائالً أو مسط اًر‪ ،‬أو حتى الجمع بين هذه‬
‫السمات كي تعطي للصفحات تنسيقاً متناغماً‪.‬‬

‫‪:Adobe Dreamweaver‬‬ ‫ه‪-‬‬

‫يتبع هذا البرنامج شركة ‪ Adobe‬منذ عام ‪ ،2115‬ومن‬
‫ميزاته إمكانية العمل في كل أنظمة التشغيل الشائعة كـ‬
‫‪ Windows‬و‪ ،Mackintosh‬كما يدعم العديد من‬

‫لغات البرمجة التي سبق ذكرها كال ـ‪ ، CSS‬وال ـ ‪ ،JAVA Script‬وال ـ ‪ PHP‬وغيرها من اللغات‪.‬‬
‫ويتيح برنامج ال ـ ‪ Dream weaver‬العديد من الخدمات مثل‪:‬‬
‫‪ -1‬إنشاء صفحات ويب ومواقع كاملة لمن ال يعرفون استخدام األكواد‪.‬‬

‫‪66‬‬
 ‫‪ -2‬استعراض مواقع العمالء تجريبياً من خالل أكثر من متصفح‪.‬‬
‫‪ -3‬إنشاء قوالب ‪ Templates‬إلعطاء بعض الصفحات سمات بنائيةً متشابهة‪.‬‬
‫‪ -4‬االستفادة من تطبيقات ال ـ ‪ JAVA Script‬من دون الحاجة إلى معرفة كتابة األكواد‪.‬‬

‫و‪ -‬برامج أخرى تُستخدم في تصميم الوسائط المتعددة‬

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

‫‪.Windows Movie Maker Switch ‬‬

‫‪.Paint ‬‬
‫‪.Director ‬‬
‫‪ ‬برنامج ‪.Word‬‬
‫وتبعاً لذلك فإن هذه البرامج من أكثر البرامج استخداماً في تصميم النصوص واأليقونات والصور والرسوم‬
‫واأللوان المكونة للصفحات اإللكترونية‪.‬‬
‫وكما يمكن عبر هذه البرامج نسخ وتجزئة الصور والرسوم أو حتى مقاطع الصوت والفيديو فضالً عن‬
‫إمكانية تخليص الصور من العيوب التي قد تظهر نتيجة التصوير األولي‪ ،‬ونسخ الوسائط المتعددة‬
‫بأشكال وأحجام متعددة تناسب الحجم اإللكتروني للصحف على اإلنترنت‪ ،‬إذ باإلمكان إضافة لمسة‬
‫جمالية من خاللها إلى المواقع والصحف اإللكترونية‪.‬‬

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

‫‪68‬‬
 ‫الخالصة‬

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

‫ومن مجموعة البرمجيات المتخصصة بتصميم صفحات الويب‪ ،‬والمتخصصة بالوسائط المتعددة‬
‫المستخدمة تعد لغة ال ـ ‪ HTML‬األشهر واألكثر استخداماً وهي اللغة التي أطلقها ‪،Tim-Berners Lee‬‬
‫نفسه مطلق خدمة الويب‪ ،‬وهناك أيضاً لغات متعددة أخرى ظهرت فيما بعد‪ ،‬ولم تعد تقل شهرة وال‬
‫استخداماً عن ال ـ ‪ HTML‬كلغات‪ ،ASP – JAVA Script - XML – PHP – JAVA :‬ومن‬
‫المجموعة الثانية هناك برامج ال ـ ‪- Flash - Photoshop - 3DS Max Studio - Coral Draw‬‬
‫‪ - Adobe Dreamweaver - Front Page‬برنامج ال ـ ‪ – Words‬برنامج ال ـ ‪،Power Point‬‬
‫وغيرها من البرامج التي تساعد في تحرير ومعالجة عناصر هذه الوسائط‪.‬‬

‫‪69‬‬
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬تعد لغة ال ـ ‪ CSS‬أكثر لغات البرمجة تمي اًز في‪:‬‬

‫‪ .A‬كيفية عرض العناصر المكونة لصفحة الويب‪.‬‬
‫‪ .B‬سرعة اكتساب خبرة المستخدم في الموقع‪.‬‬
‫‪ .C‬إظهار الصفحات المصممة باستخدام هذه اللغة بشكل متشابه باستخدام أغلب المتصفحات‪.‬‬
‫‪ .D‬اإلجابة األولى فقط صحيحة‪.‬‬
‫‪ .E‬كل اإلجابات صحيحة‪.‬‬

‫اإلجابة الصحيحة‪ D :‬اإلجابة األولى فقط صحيحة‬

‫‪ .2‬أطلقها ‪ Tim-Berners Lee‬مع خدمة الويب‪:‬‬

‫‪ .A‬لغة ال ـ‪. PHP‬‬
‫‪ .B‬لغة ال ـ ‪.HTML‬‬
‫‪ .C‬لغة ال ـ ‪.JAVA‬‬

‫اإلجابة الصحيحة‪ B :‬لغة ال ـ ‪HTML‬‬

‫‪70‬‬
 ‫‪ .3‬من استخدامات برنامج ال ـ ‪:3DS Max Studio‬‬
‫‪ .A‬عرض المشاريع الصناعية من الداخل والخارج‪.‬‬
‫‪ .B‬إظهار تشريح جسم اإلنسان‪.‬‬
‫‪ .C‬تصميم اإلعالنات‪.‬‬
‫‪ .D‬اإلجابتان (‪ )A‬و(‪ )C‬صحيحتان‪.‬‬
‫‪ .E‬كل اإلجابات السابقة صحيحة‪.‬‬

‫اإلجابة الصحيحة‪ E :‬كل اإلجابات السابقة صحيحة‬

‫‪71‬‬
 ‫المراجع‬
‫‪ -1‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2111( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة تعد جزءاً من متطلبات الحصول على‬
‫الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2117( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -3‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2119( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -4‬موسى أحمد‪ ،‬محمد األمين‪ ،)2115( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -5‬مصطفى حسين‪ ،‬محمد‪ ،)2111( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،6‬العدد ‪.18‬‬
‫‪ -6‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2111( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة في إطار نظرية تمثيل المعلومات‪( ،‬دراسة شبه تجريبية)‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -7‬فتحي محمد رزق‪ ،‬منار‪ ،)2119( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪8- Beard, Jason, (2010), The Principals of Beautiful Web Design, (2.Ed),‬‬
‫‪Canada, SitePoint Pty Ltd.‬‬
‫‪9- Jarrar,‬‬ ‫‪Suba,‬‬ ‫‪(2002),‬‬ ‫‪Web‬‬ ‫‪Design‬‬ ‫‪Guidelines,‬‬ ‫‪For‬‬ ‫‪WSDM,‬‬
‫‪Dissertation Submitted in View of Obtaining a degree of Master‬‬
‫‪Science in Computer Science, Vrije Universiteit Brussel, Dep.of‬‬
‫‪Computer System.‬‬
‫‪10-‬‬ ‫‪.‬تاريخ التصفح ‪http://ar.html.net/tutorials/html/lesson2.php 2115/4/21‬‬

‫‪72‬‬
11- http://ar.html.net/tutorials/php/lesson1.php2115/4/21 ‫تاريخ التصفح‬.
12- http://amrmekkawy.com/blog/2009/10/19 2115/4/21 ‫تاريخ التصفح‬.
13- http://arabwebblog.blogspot.com/2009/07/xml.html ‫التصفح‬ ‫تاريخ‬
2115/4/21.
14- http://ar.wikibooks.org/wiki 2115/4/21 ‫تاريخ التصفح‬.
15- http://www.google.com/url 2115/4/21 ‫تاريخ التصفح‬.
16- http://www.boosla.com/showArticle.php 2115/4/21 ‫تاريخ التصفح‬.
17- http://www.3d2ddesign.com/more_lessons.php.
18- http://www.startimes.com/f.aspx 2115/4/21 ‫تاريخ التصفح‬.

73
 ‫الوحدة التعليمية الرابعة‬

‫برامج تصفح صفحات الويب وبرامج تحرير الصور‬

‫العناصر‪:‬‬

‫‪ -‬مقدمة ‪.‬‬
‫‪ -‬برامج تصفح صفحات الويب‪:‬‬
‫‪ -‬مفهوم برامج التصفح‪.‬‬
‫‪ -‬نشأة المتصفحات‪.‬‬
‫‪ ‬برنامج ‪.Internet Explorer‬‬
‫‪ ‬برنامج ‪.Mozilla Firefox‬‬
‫‪ -‬وظائف المتصفحات‪.‬‬
‫‪ -‬برامج تحرير الصور‪:‬‬
‫‪ ‬برنامج ‪.Adobe Photoshop‬‬
‫‪ ‬برنامج ‪.Corel Paint Shop Pro‬‬
‫‪ ‬برنامج ‪.Fireworks‬‬

‫أنواع ملفات الصور‪.JPEG ، PNG ،GIF :‬‬ ‫‪-‬‬

‫أسس اختيار الصور للمواقع اإللكترونية‪.‬‬ ‫‪-‬‬

‫‪ -‬خاتمة ‪.‬‬

‫‪74‬‬
 ‫األهداف التعليمية‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ -1‬يشرح برامج تصفح الويب‬

‫‪ -2‬يحدد الترتيب الزمني لنشأة المتصفحات‬
‫‪ -3‬يعدد وظائف المتصفحات‬
‫‪ -4‬يشرح برامج تحرير الصور‬
‫‪ -5‬يحدد تنسيقات الصور األكثر استخداماً عبر شبكة اإلنترنت‬
‫‪ -6‬يشرح أسس اختيار الصور للمواقع اإللكترونية‬

‫المفتاحية‪ :‬التصميم – متصفح الويب ‪ -‬برنامج ‪ – Internet Explorer‬برنامج ‪Mozilla‬‬ ‫الكلمات‬

‫‪ - Firefox‬تحرير الصور – ‪Fireworks - Corel Paint Shop Pro - Adobe Photoshop‬‬
‫‪ -‬ملفات الصور – ‪.JPEG – PNG – GIF‬‬

‫أوال‪ :‬مقدمة‪:‬‬

‫تُستخدم برامج تصفح المواقع اإللكترونية‪ ،‬وهي‬

‫البرامج الخاصة بعرض النصوص والصور‬
‫والصوت والفيديو‪ ،‬والملفات المختلفة المخزنة على‬
‫صممت هذه البرامج‬
‫مزودات الويب‪ ،‬وقد ُ‬

‫من قبل العديد من شركات البرمجة لتكون بسيطة االستخدام‪ ،‬وتساعد المستخدمين على عرض‬
‫المعلومات وقراءتها‪.‬‬

‫‪75‬‬
‫وقد أضيفت إلى جانب متصفحات المواقع محركات البحث ‪ Search Engines‬التي تساعد في‬
‫الحصول على المعلومات من خالل كتابة عنوان الموقع اإللكتروني ‪ ،URL‬أو البحث عن الكلمات‪،‬‬
‫واضافة المواقع المفضلة دون الحاجة إلى كتابة العنوان مرة أخرى‪ ،‬وهو ما سيتم التعرض له في هذه‬
‫الوحدة‪ ،‬إضافة إلى استعراض برامج تحرير الصور‪ ،‬وأنواع ملفات الصور األكثر استخداماً في تصميم‬
‫مواقع الويب‪ ،‬وميزات هذه األنواع وخصائصها وقواعد استخدامها‪.‬‬

‫ثانيا ‪ :‬برامج تصفح الويب‪:‬‬

‫يستخدم المتصفح أو المستخدم للمواقع اإللكترونية‬

‫العديد من برامج تصفح اإلنترنت‪ ،‬والتي تتفاوت في‬
‫إمكانيتها من متصفح إلى آخر‪ ،‬ويعود هذا‬

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

‫ويتعرف المصمم منذ البداية إلى‪:‬‬

‫‪ ‬برامج استعراض الصفحات اإللكترونية األكثر استخداماً عند المتصفحين‪.‬‬

‫‪ ‬وما المتصفحات التي تدعم األكواد والرموز القياسية‪.‬‬
‫‪ ‬وما نسبة متصفحي الموقع اإللكتروني الذين يستخدمون كل متصفح لتالفي السلبيات التي يمكن‬
‫أن تؤثر في عرض الموقع اإللكتروني بشكل رديء‪ ،‬وأيضاً لكي يتمكن من اتخاذ القرار السليم‬
‫بشأن عملية تصميم الموقع‪ ،‬واالستفادة من المزايا التي يمكن اعتمادها في التصميم‪ ،‬وكيفية‬
‫تنفيذها لتعمل بشكل صحيح مع كل المتصفحات على الرغم من أن المتصفحات األشهر في‬
‫الوقت الحالي كمتصفح ال ـ ‪ Internet Explorer‬وال ـ ‪ Mozilla Firefox‬أصبحت تدعم بعضها‬
‫باختالف أنظمة التشغيل المستخدمة على أغلب أجهزة المستخدمين‪ ،‬كنظام ال ـ ‪،Windows‬‬
‫ونظام ال ـ ‪ Mackintosh‬وغيرها من األنظمة‪.‬‬

‫‪76‬‬
 ‫ثالثا‪ :‬نشأة المتصفحات‬

‫أطلق ‪ Tim-Berners Lee‬أول متصفح لإلنترنت عام ‪ 1991‬وهو‬

‫‪ ،World Wide Web‬وقد صمم هذا المتصفح ليكون محر اًر‬
‫لصفحات مواقع إنترنت أيضاً‪ ،‬ثم بدأت المتصفحات بالظهور‬
‫واالنتشار‪.‬‬

‫وقد ُبدئ في تطوير متصفح ‪ Mosaic‬عام ‪ ،1991‬وظهر عام‬

‫‪ 1991‬كأول متصفح للنصوص فقط‪ ،‬وكان يدعم أنظمة ال ـ ‪،Unix‬‬
‫ثم طُور هذا البرنامج حتى أصبح يقبل تصفح الصور ويتعامل مع‬
‫أنظمة التشغيل األخرى مثل‪ ،Mackintosh ،Windows :‬و ُعد‬
‫‪ Mosaic‬طفرة حيث كان يتم تحميله خمسة آالف مرة شهرياً‪.‬‬

‫ثم أطلقت شركة ‪ Netscape‬عام ‪ 1991‬متصفحها ‪ ،Netscape Navigator‬وقد كان له أثر كبير‬
‫في انتشار برامج المتصفحات واتساع رقعة مستخدمي شبكة اإلنترنت‪.‬‬

‫وفي عام ‪ 1991‬قامت ‪ Microsoft‬بشراء شركة ‪ Spyglass‬التي كانت تطور متصفحاً أصبح فيما بعد‬
‫متصفح ‪ ،Internet Explorer‬ومع طرح هذا المتصفح بدأت المنافسة بين شركتي ‪Microsoft‬‬
‫و‪ ،Netscape‬والتي كانت من نتائجها زيادة انتشار المتصفحات‪ ،‬وزيادة عدد مستخدمي شبكة اإلنترنت‪.‬‬
‫عدم استخدام المعايير القياسية للترميز‪ ،‬فأصبحت كل شركة تضيف ميزات‬
‫وكان من نتائجها السلبية ُ‬
‫غير قياسية يدعمها متصفح وال يدعمها المتصفح اآلخر‪ ،‬وكان المستخدم ال يستطيع أن يستعرض الموقع‬
‫اإللكتروني إال بمتصفح واحد‪.‬‬

‫وقد استطاعت ‪ Microsoft‬أن تكسب هذه المنافسة لفترة ألنها كانت تملك حصة كبيرة في أنظمة‬
‫التشغيل‪ ،‬وألنها وضعت متصفحها مجاناً مع نظام تشغيلها ‪ ،Windows‬فلم يعد الناس بحاجة إلى تثبيت‬
‫أي متصفح آخر على حواسيبهم‪ ،‬واستطاعت حتى عام ‪ 1991‬أن تحتكر سوق أنظمة التشغيل‬
‫والمتصفحات‪ ،‬وفي أواخر عام ‪ 1991‬طرحت ‪ Netscape‬متصفحها كمصدر مفتوح‪ ،‬وقامت بإنشاء‬
‫مشروع ‪ Mozilla‬الذي يهدف إلى تطوير متصفح ‪ Netscape‬اعتماداً على فلسفة البرامج الحرة‬

‫‪77‬‬
‫والمفتوحة المصدر‪ ،‬لكن المشروع لم يلق دعماً كبي اًر من قبل مطوري البرامج إال في عام ‪ 1001‬حيث‬
‫طُرح اإلصدار األول منه‪ ،‬ثم ظهرت مشاريع فرعية لهذا المتصفح أشهرها متصفح ‪Mozilla Firefox‬‬
‫الذي طُرح إصداره األول عام ‪ ،1001‬والذي أصبح منافساً قوياً لمتصفح ‪ ،Internet Explorer‬ثم بعد‬
‫ذلك ظهر متصفح شركة ‪ Google‬عام ‪ 1001‬والذي يحمل بالمجان على موقع ‪ Google‬وأصبح من‬
‫أقوى المنافسين لـ ـ ‪.Internet Explorer‬‬

‫وفي عام ‪ 1991‬ظهر متصفح الـ ‪ Opera‬لكنه لم ينجح في االنتشار على نطاق واسع‪ ،‬لكن هذه الشركة‬
‫اشتُهرت أكثر بمتصفحات اإلنترنت على الهاتف المحمول‪.‬‬

‫ابتداء من عام ‪ 1009‬أصبح لهذه‬

‫أما في عام ‪ 1001‬فقد أطلقت شركة ‪ Apple‬متصفح ‪ ،safari‬و ً‬
‫الشركة ما يزيد قليالً عن ‪ %1‬من سوق المتصفحات بأكملها‪ ،‬وقد استُخدم في الهواتف النقالة بما في‬
‫ذلك نظام التشغيل ‪ ،IPhone‬و‪ ،Google Android‬و‪ ،Nokia S60‬والمتصفح األخير الذي طُرح في‬
‫السوق لمتصفح ‪ Google‬متصفح ‪ Chrome‬وكان أول إصدار له عام ‪.1001‬‬

‫‪78‬‬
 ‫رابعا‪ :‬وظائف المتصفحات‬

‫ومن أهم الوظائف التي تقوم بها المتصفحات‪:‬‬

‫‪ -1‬إمكانية عرض الصفحات على شاشة المستخدم تماماً كما تم تصميمها‪.‬‬

‫‪ -1‬القدرة على التجول بسهولة‪ ،‬فكل متصفح لديه واجهة للمستخدم يجب أن تتكامل مع إمكانيات‬
‫اإلنترنت‪ ،‬فكيفية تطبيق هذه المالمح جيداً وعملها معاً في متصفح ما تحدد يسر المتصفح في‬

‫‪79‬‬
‫التجول‪ ،‬وجانب آخر مرتبط بيسر التجول هو القدرة على اختيار وتحديد وتحرير الروابط المفضلة‬
‫وفقاً لتفضيالت المستخدم‪.‬‬
‫‪ -1‬إلغاء عرض الرسوم مما يسرع من عملية التحميل‪.‬‬
‫‪ -1‬توفير خدمة الذاكرة المخبأة ‪ ،Cache Memory‬والتي من خاللها يمكن تخزين المعلومات في ذاكرة‬
‫الحاسب بعد االنتقال إلى صفحة أخرى‪ ،‬وعند العودة إلى تلك الصفحة ثانية يتم استدعاء الصفحة من‬
‫ذاكرة الحاسب بدالً من استدعائها من المصدر الرئيسي على الويب ألن تحميلها أسرع من تحميلها‬
‫من خادم الويب‪.‬‬
‫‪ -1‬سهولة استخدام المتصفح‪ :‬إذ يحتوي المتصفح على شريط أدوات به أيقونات وأزرار ألهم العمليات‬
‫المتكررة التي يحتاج إليها المستخدم حسب تفضيالته وعاداته الشخصية‪.‬‬
‫‪ -1‬إتاحة المتصفح للمستخدم تغيير حجم حروف الكلمات ونوعها‪ ،‬ولون الخلفية‪ ،‬كما يستطيع تغيير‬
‫الصفحة الرئيسية التي يتم من خاللها التجول في الويب بمجرد فتح نافذة المتصفح‪.‬‬
‫‪ -7‬يمكن للمتصفح التعامل مع بروتوكوالت متعددة أي يمكنه الوصول إلى أكثر من خادم لتوفير‬
‫المعلومات باستخدام مجموعة قواعد لالتصال (بروتوكوالت) متنوعة مثل ‪ FTP‬و‪.HTTP‬‬
‫‪ -1‬يمكن للمتصفح الوصول إلى الوسائط المتعددة والنص التشعبي بما في ذلك المواد الغرافيكية‪ ،‬والصور‬
‫واألفالم واألصوات‪.‬‬

‫وقد يجد المستخدمون في أثناء انتقالهم من متصفح إلى آخر أن بعض الصفحات ال تُعرض بالشكل‬
‫المطلوب‪ ،‬والسيما عند االنتقال من ‪ Internet Explorer‬إلى ‪ ،Mozilla Firefox‬وهذا يعود إلى أن‬
‫مصممي المواقع يستخدمون أكوداً ال تتبع للمواصفات القياسية التي وضعتها منظمة ‪ ،W3C‬وقد أمكن‬
‫التغلب على هذه المشكالت بوضع امتداد ل ـ ‪ Mozilla Firefox‬هو (‪ )IE Tab‬يمكن من خالله تفسير‬
‫‪ Internet Explorer‬وحل مشكالت التنسيق وترجمة الصفحات‪.‬‬

‫‪80‬‬
 ‫خامسا‪ :‬برامج تحرير الصور‬

‫تُستخدم الصور على المواقع اإللكترونية بأشكال‬

‫مختلفة‪ ،‬فهناك الصور المستخدمة في تصميم‬
‫شعار الموقع‪ ،‬وصور الموضوعات والصور‬
‫شغل‬
‫وغيرها من األشكال التي ت ُ‬
‫اإلخبارية‪ُ ،‬‬

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

‫أشهر أنواع الصور‪:‬‬

‫‪ -‬الصور النقطية‪ :‬عبارة عن مجموعة من النقاط (وحدات البت) الملونة‪،‬‬

‫وال يمكن تغيير حجم هذا النوع من الصور دون التأثير على جودتها‪.‬‬

‫‪81‬‬
 ‫الصور االتجاهية‪ :‬والمعروفة أيضاً بالرسوم االتجاهية‪ ،‬وهي الصور‬
‫المصممة من قبل المستخدم‪ ،‬وتتألف من خطوط ومنحنيات تُصمم وفق‬
‫معادالت رياضية ينفذها الحاسب‪ ،‬وبالتالي يمكن تغيير حجم هذه الصور‬
‫وشكلها دون تأثر جودتها‪ ،‬ويمكن استخدام العديد من البرامج إلنشاء هذا‬
‫النوع من الصور كبرنامج ال ـ ‪ Word‬أو ال ـ ‪Dream Weaver‬‬

‫أو ال ـ ‪ ،Front Page‬ويعيب هذا النوع من الصور أنها تظهر بامتداد ‪VML: Vector Markup‬‬
‫‪ ،Language‬وبرنامج التصفح الوحيد الذي يدعم هذه النوعية من الصور هو متصفح ‪Internet‬‬
‫‪ ،Explorer 5‬لذلك يراعي المصمم عند استخدامها توافر هذا المتصفح‪ ،‬أو تحويل الصور إلى نوعية‬
‫أخرى ك ـ ‪ GIF‬التي يدعم ظهورها أغلب برامج التصفح المستخدمة‪.‬‬

‫أشهر برامج تحرير الصور على اإلنترنت‪:‬‬

‫‪ -1‬برنامج معالجة الصور ‪:Photoshop‬‬

‫وُيقصد ببرامج معالجة الصور تلك البرامج التي تتعامل مع الصور المخزنة رقمياً‬
‫في ذاكرة الحاسب حيث لم تعد إمكانات البرامج قاصرة على حفظ واعادة عرضها‪،‬‬
‫وانما امتدت إلى القدرة على التغيير والتبديل في الصورة سواء في تغيير لونها أم‬
‫خلفيتها أم إعادة تلوينها واضافة بعض المؤثرات الخاصة لها‪ ،‬كالحذف واإلضافة‬
‫أو التغيير في مالمحها‪.‬‬
‫و‪ Photoshop‬من أشهر وأهم برامج معالجة الصور اإللكترونية والصور الرقمية للكاميرات الجديدة‪،‬‬
‫التي تحتوي بطاقة ذاكرة ‪ ،Memory Card‬تُحمل عليها الصور بالتقاط معين أو باستخدام فيلم صوري‬
‫محدد أقصر مما هو عليه في كاميرات الفيديو‪ ،‬وتأتي فعالية هذا البرنامج في قدرته العالية على التعامل‬
‫مع جميع احتياجات المصممين المتعددة والتي تختلف من مصمم إلى آخر‪.‬‬
‫ويستخدم هذا البرنامج بشكل رئيسي إلدخال المؤثرات على الصورة الفوتوغرافية أو الصورة الرقمية‪،‬‬
‫ُ‬
‫وتحسينها‬
‫ُ‬ ‫والتعامل مع الرسوم‪ ،‬إذ يمكن استخدامه إلنشاء رسوم فنية أصلية‪ ،‬حيث يتم تعديل الصور‬

‫‪82‬‬
‫وانشاء تصميمات ولوحات فنية (إلكترونية)‪ ،‬وكذلك تصميم الواجهات سواء أكان لمواقع اإلنترنت أم‬
‫البرامج أم األلعاب‪.‬‬

‫‪ -2‬برنامج ‪:Corel Paint Shop Pro‬‬

‫ُيعد هذا البرنامج المنافس األقوى لـ ‪ ،Photoshop‬ألنه يمتلك مجموعة‬
‫حترفية التي تتيح للمستخدم التحكم بالصور وعمل‬
‫من األدوات اال ا‬
‫التعديالت المطلوبة عليها كالدمج والقص‪ ،‬والكتابة على الصور‬
‫والتحرير والتلوين‪ ،‬وعمل الكثير من اإلضافات عليها من خالل أدوات‬
‫قوية تمكن المصمم من عمل العديد من الوظائف على الصور مثل‪:‬‬

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

‫وتكمن مشكلة هذا البرنامج أن الجهاز سيتأثر وتقل سرعته قليالً بسبب استهالك البرنامج لموارد الجهاز‪.‬‬

‫‪83‬‬
 ‫‪ -3‬برنامج ‪:Fireworks‬‬

‫صمم هذا البرنامج من قبل شركة ‪ Macromedia‬إلنتاج أزرار مواقع‬

‫وقد ُ‬
‫وصمم خصيصاً لمصممي الويب‬
‫الويب ومختلف األشكال الغرافيكية‪ُ ،‬‬
‫والسيما المبتدئون ألنه أسهل وأيسر في التعامل‪.‬‬

‫سادسا‪ :‬تنسيقات الصور األكثر استخداما عبر شبكة اإلنترنت‪:‬‬

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

‫أوال‪ :‬صور الــ ‪GIF: Graphic Interchange Format‬‬

‫ظهر هذا التنسيق أواخر الثمانينيات من قبل شركة ‪ ،CompuServe‬وذلك‬

‫ٍ‬
‫كإصدار أول‪ ،‬ثم ظهر اإلصدار الثاني منه ‪ Gig89‬الذي دعم‬ ‫بصيغة ‪Gf87‬‬
‫الصور المتحركة‪ ،‬ثم ظهر إصدار‪ Gif‬ليمزج بين اإلصدارين السابقين‪ ،‬وقد‬
‫أصبح هذا اإلصدار األكثر استخداماً وشيوعاً على اإلنترنت‪.‬‬
‫يتيح هذا التنسيق إمكانية تخزين الصور بخلفيات شفافة‪ ،‬كما يصلح مع الصور‬

‫‪84‬‬
‫القليلة األلوان‪ ،‬كاإلعالنات عن الوظائف مثالً‪ ،‬فهي تصلح للصور ذات التباينات الكبيرة التي تشتمل‬
‫على لون واحد مثل الشعارات‪ ،‬ورسوم الكارتون واأليقونات‪ ،‬واألزرار والخطوط‪ ،‬والرسوم المتحركة‪.‬‬

‫ويحتوي هذا التنسيق على ما يصل إلى ‪ 111‬لوناً‪ ،‬وهي األلوان الموجودة في لوحة جهاز الحاسب‪ ،‬فإذا‬
‫لم يوجد اللون الموجود في الصور في نظام تشغيل هذا الجهاز‪ ،‬فسوف يقوم بعرض اللون بتقنية االنتشار‬
‫اللوني من خالل دمج األلوان مع بعضها لالقتراب من اللون المطلوب في الصورة‪ ،‬ويتم الحد من هذه‬
‫المشكلة عن طريق إنشاء الصورة باستخدام مجموعة األلوان األساسية‪ ،‬كما يمتاز هذا التنسيق بإمكانيات‬
‫أخرى ُيذكر منها‪:‬‬

‫‪ -‬إمكانية الضغط والتصغير من دون فقد أي تفاصيل من الصورة‪.‬‬

‫‪ -‬إمكانية جعل الصورة شفافة‪ ،‬وذلك من خالل اعتماد أحد األلوان ليكون هو اللون الشفاف عند‬
‫عرض الصورة‪ ،‬ويقوم برنامج التصفح باستبدال هذا اللون بلون الخلفية‪ ،‬وسيسمح هذا بالظهور‬
‫من خالل الصورة في تلك المناطق‪ ،‬ويعيب هذه الطريقة أنه قد يجعل الصورة ذات حواف‬
‫متعرجة‪ ،‬ويتم معالجتها بأحد برامج معالجة الصور مثل برنامج ال ـ ‪.Adobe Photoshop‬‬
‫‪ -‬استخدام العرض المتداخل‪ :‬يقوم المتصفح باستقبال الصورة ذات التنسيق ‪ Gif‬دفعةً واحدة‪ ،‬على‬
‫وضوحها أقل‪،‬‬
‫ُ‬ ‫عكس ما يحصل مع أنواع الصور األخرى‪ ،‬صحيح أن كثافتها تكون أقل وبالتالي‬
‫لكن برنامج التصفح عندما يستكمل تنزيلها سيزيد من الوضوح حتى تبلغ الحد األقصى‪ ،‬وهذا يتيح‬
‫للمستخدم الفرصة ليقرر إذا كان سيكمل تصفح هذه الصورة أم ال‪.‬‬
‫‪ -‬جعل الصورة متحركة‪ :‬يمكن إضفاء نوع من الحركة على هذا النوع من تنسيق الصور عن طريق‬
‫تنظيم سلسلة من اللقطات الثابتة‪ ،‬وعرضها بسرعة لتعطي اإلحساس بأنها صور متحركة‪.‬‬

‫‪85‬‬
 ‫ثانيا‪ :‬صور الــ ‪JPEG: Joint Photographic Experts Group‬‬

‫ُيعد هذا التنسيق أحد خيارات عرض الصور ذات التدرج اللوني المستمر على صفحات الويب‪ ،‬ويستخدم‬

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

‫‪ -‬يالئم هذا التنسيق الصور الفوتوغرافية أكثر من الشعارات أو النصوص المزخرفة والتي تحوي‬
‫ماليين األلوان‪ ،‬وتحتاج إلى الدقة والجودة العالية في درجة األلوان والوضوح‪.‬‬
‫‪ -‬يستطيع هذا التنسيق التعامل مع عدد من األلوان أكثر مما يتعامل معه تنسيق ال ـ ‪ Gif‬الذي‬

‫يتعامل مع ‪ 111‬لوناً‪ ،‬أما هذا التنسيق فيستطيع التعامل مع ‪ 11.7‬مليون لون (ستة عشر مليوناً‬
‫وسبعمئة ألف لون) بعمق لوني درجته ‪ 11‬بت‪ ،‬لذلك فهو يستطيع التعامل مع الصور ذات‬
‫التدرجات اللونية المعقدة‪.‬‬

‫وضعها على صفحة‬

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

‫‪86‬‬
 ‫ثالثا‪ :‬صور الــ ‪PNG: Portable Network Graphic‬‬

‫ُيعد هذا التنسيق من أفضل الطرائق لتقديم الصور عبر صفحات الويب‪ ،‬وقد‬
‫استطاع أن يتالفى عيوب التنسيقين السابقين‪ ،‬لكن مشكلته تكمن في كونه‬
‫غير مدعوم من جميع برامج التصفح‪.‬‬
‫وقد تم تطوير هذا التنسيق عام ‪ 1991‬بهدف جمع ميزات تنسيق ال ـ ‪ Gif‬وال ـ‬
‫‪ ،JPEG‬فاستطاع أن‪:‬‬

‫‪ ‬يدعم الصور ذات األلوان القليلة‪ ،‬والصور ذات األلوان الكثيرة‪.‬‬

‫‪ ‬التغلب على مشكالت ضغط ملفات الصور‪ ،‬واعادة فك الضغط من دون أن تتأثر جودة الصورة‬
‫أو تتغير مالمحها‪.‬‬

‫وعلى الرغم من اتفاق المصممين على أن هذه التنسيقات الثالثة هي األشهر واألكثر استخداماً‪ ،‬وهي‬
‫التي تدعمها أكثر برامج التصفح‪ ،‬لكن ال بد من التذكير أن هناك تنسيقات أخرى للصور مثل صور ال ـ‬

‫‪87‬‬
‫‪ ،SWF‬وصور الفالش‪ ،‬لكنها مازالت تعاني من عدم دعم كل المتصفحات لها‪ ،‬وتعاني من مشكالت في‬
‫عملية الضغط وفكه إذ تتأثر بياناتها بشكل كبير‪.‬‬

‫سابعا‪ :‬أسس اختيار الصور للمواقع اإللكترونية‪:‬‬

‫يعتمد المصمم في اختياره لعرض الصور على المواقع وصفحات الويب على مجموعة من القواعد‬
‫واألسس‪ُ ،‬يذكر منها‪:‬‬

‫‪ -1‬يجب أن تكون الصور الصغيرة كاأليقونات واألزرار‪ ،‬وعينات الصور‪ ،‬والصور التي تُستخدم‬
‫كخلفيات‪ ،‬من نوع الصور المترابطة يتم فتحها مرة واحدة وليس تدريجياً‪ ،‬كما يجب استخدام‬
‫الصور ذات التنسيق ‪ Gif‬في تصميم الشعارات واأليقونات‪.‬‬
‫‪ -1‬االلتزام بالنسبة للصور بجدول ألوان الويب والذي يحتوي على ‪ 111‬لوناً‪ ،‬ويستطيع برنامج‬
‫التصفح عرضها على الرغم من وجود بعض برامج معالجة الصور كال ـ ‪ Photoshop‬الذي‬
‫يستطيع التعرف على األلوان الموجودة في الصور والتي ال تظهر على الويب بألوانها األصلية‪،‬‬
‫كما يمكن استخدام صور الـ ـ ‪ Gif‬التي تحتوي على ‪ 111‬لوناً ويعرفها متصفح الويب ـ‬
‫‪ -1‬استخدام الصور ذات التنسيق ‪ JPEG‬في الصور التي تزيد مساحتها عن ‪ 100×100‬بيكسل‪،‬‬
‫واستخدام الصور ذات التنسيق ‪ Gif‬في الصور التي تقل مساحتها عن ‪ 100×100‬بيكسل‪،‬‬
‫وسبب ذلك أن قدرة صور الـ ‪ Gif‬على الضغط وتقليل المساحة من دون تأثر جودتها أكبر‪.‬‬
‫‪ -1‬االختيار بين نوعين من الصور االتجاهية‪ :‬صور ال ـ ‪ Vector‬التي تتكون فيها الصورة من‬
‫مساحات ملونة وال تتأثر إذا ما تم تكبيرها أو تكبير جزء منها‪ ،‬والصور النقطية ‪ Bitmap‬التي‬
‫تتكون من شبكة من النقط (البيكسالت)‪ ،‬وال تتكون من مساحات لونية‪.‬‬
‫‪ -1‬االحتفاظ بنسخ احتياطية من الصور التي ستُعرض على صفحة الويب قبل إجراء أي تعديالت‬
‫عليها‪.‬‬

‫‪88‬‬
 ‫خاتمة‪:‬‬
‫ضمت قائمة برامج التصفح مجموعة من البرامج التي تساعد المستخدم على االنتقال من صفحة إلى‬
‫أخرى في الموقع نفسه وفي مواقع أخرى‪ ،‬ومن أشهرها برنامج ال ـ ‪ Internet Explorer‬وبرنامج ال ـ‬
‫‪ ،Mozilla Firefox‬وتتفاوت إمكانيات هذه البرامج بسبب استخدامها ألكواد ورموز مختلفة بعضها يتفق‬
‫مع المواصفات القياسية وبعضها ال‪ ،‬وتقوم هذه البرامج بتحقيق العديد من الوظائف إضافة إلى إتاحة‬
‫االنتقال بين الصفحات‪ ،‬وتسهيل االستخدام‪ ،‬وعرض النصوص‪ ،‬والصور والملفات المختلفة‪.‬‬

‫أما قائمة برامج تحرير الصور فقد ضمت مجموعة من البرامج التي تساعد في تعديل ودمج وقص‪،‬‬
‫وتغيير وتبديل ألوان الصور بأشكالها وأنواعها المختلفة‪ ،‬من صور إخبارية ورسوم‪ ،‬وأيقونات وشعارات‪،‬‬
‫وقد تنوعت تنسيقات هذه الصور بين ال ـ ‪ Gif‬وال ـ ‪ JPEG‬وال ـ ‪ ،PNG‬ويعلم المصمم إمكانية استخدام كل‬

‫نوع من أنواع هذه التنسيقات لتحقيق أغراض وأهداف مختلفة نظ اًر الختالف خصائصها وميزاتها‪ ،‬وطبقاً‬
‫للقواعد واألسس المعروفة في اختيار الصور وعرضها على الويب‪.‬‬

‫‪89‬‬
 ‫الخالصة‬

‫يستلزم لرؤية صفحات المواقع اإللكترونية والتنقل بينها وبين الصفحات األخرى خارج الموقع نفسه‪،‬‬
‫استخدام برامج التصفح المتخصصة بذلك‪ ،‬وقد ظهرت أولى هذه البرامج مع ظهور خدمة الويب وبداية‬
‫ُ‬
‫انتشارها‪ ،‬فكانت شركة ‪ Microsoft‬الرائدة في هذا المجال من خالل متصفحها الشهير ‪Internet‬‬
‫‪ Explorer‬الذي ترافق مع نظام تشغيلها الشهير ‪ ،Windows‬ثم تبعتها شركة ‪ Netscape‬التي أطلقت‬
‫برنامجها ‪ Mozilla Firefox‬الذي أصبح فيما بعد من أشهر برامج التصفح وأكثرها استخداماً‪.‬‬

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

‫أما برامج تحرير الصور‪ ،‬فقد ظهرت وتطورت العديد من البرامج كبرنامج ‪،Adobe Photoshop‬‬
‫وبرنامج ‪ ،Fireworks‬ولكي تُعرض هذه الصور على المتصفح يجب أن تكون بصيغة الــ‪ GIF :‬أو‬
‫‪ PNG‬أو ‪.JPEG‬‬

‫‪90‬‬
 ‫المراجع‬

‫يحيى الميتمي‪ ،‬معين صالح‪ ،)1009( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية العربية‪،‬‬
‫رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬

‫‪ -1‬موسى أحمد‪ ،‬محمد األمين‪ ،)1001( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -1‬مصطفى حسين‪ ،‬محمد‪ ،)1010( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،1‬العدد ‪.11‬‬
‫‪ -1‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)1010( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة‪ ،‬في إطار نظرية تمثيل المعلومات‪( ،‬دراسة شبه تجريبية)‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -1‬فتحي محمد رزق‪ ،‬منار‪ ،)1009( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -1‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)1007( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪6- Beard, Jason, (2010), The Principals of Beautiful Web Design, (2.Ed),‬‬
‫‪Canada, Site Point Pty Ltd.‬‬
‫‪7- Jarrar,‬‬ ‫‪Suba,‬‬ ‫‪(2002),‬‬ ‫‪Web‬‬ ‫‪Design‬‬ ‫‪Guidelines,‬‬ ‫‪For‬‬ ‫‪WSDM,‬‬
‫‪Dissertation Submitted in View of Obtaining a degree of Master‬‬
‫‪Science in Computer Science, Vrije Universiteit Brussel, Dep.of‬‬
‫‪Computer System.‬‬
‫‪.‬تاريخ التصفح ‪8- http://www.colorslab.net/2013/12/08/ 1011/1/1‬‬
‫‪9- http://www.ttopsoft.com/windows-software/corel-paintshop-pro‬‬ ‫تاريخ‬
‫التصفح ‪.1011/1/1‬‬

‫‪91‬‬
‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫من تنسيقات الصور المستخدمة في العرض على الويب‪:‬‬

‫‪ .A‬صور ال ـ ‪.Gif‬‬
‫‪ .B‬صور ال ـ ‪.Ghf‬‬
‫‪ .C‬صور ال ـ ‪.JPEG‬‬
‫‪ )A( .D‬و(‪ )C‬صحيحان‪.‬‬
‫‪ )A( .E‬فقط صحيح‪.‬‬

‫‪ .F‬اإلجابة الصحيحة‪ )A( D :‬و(‪ )C‬صحيحان‪.‬‬

‫ظهر برنامج ‪ Internet Explorer‬في عام‪:‬‬

‫‪.1991 .A‬‬
‫‪.1991 .B‬‬
‫‪.1991 .C‬‬
‫‪.1991 .D‬‬

‫اإلجابة الصحيحة‪1991 C :‬‬

‫‪92‬‬
 ‫صور ال ـ ‪ JPEG‬أفضل في عرض الصور الصغيرة والشعارات‪ ،‬واأليقونات الصغيرة‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫برامج تحرير الصور تنحصر في برنامجي ال ـ ‪ ،Adobe Photoshop‬وال ـ ‪.JAVA‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫الصور النقطية تتكون فيها الصورة من مساحات ملونة‪ ،‬وال تتأثر إذا ما تم تكبيرها أو تكبير جزء منها‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫‪93‬‬
 ‫الوحدة التعليمية الخامسة‬

‫عناصر تصميم (تكوين) صفحة الويب‬

‫العناصر‪:‬‬

‫‪ -‬مقدمة ‪.‬‬
‫‪ -‬عناصر تصميم صفحة الويب‪:‬‬
‫‪ ‬كتلة المحتويات ‪.Containing Block‬‬
‫‪ ‬شعار الموقع ‪.Logo‬‬
‫‪ ‬اإلبحار‪.Navigation‬‬
‫‪ ‬المحتوى ‪.Content‬‬
‫‪ ‬الهامش العلوي ‪.Footer‬‬
‫‪ ‬المساحة البيضاء ‪. Whitespace‬‬
‫‪ ‬األرضية ‪.Ground‬‬
‫‪ ‬النقطة ‪.Point‬‬
‫‪ ‬الخط ‪.Line‬‬
‫‪ ‬الشكل ‪.Shape‬‬
‫‪ ‬النموذج ‪.Form‬‬
‫‪ ‬اللون ‪. color‬‬
‫‪ -‬خاتمة ‪.‬‬

‫‪94‬‬
 ‫األهداف التعليمية‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ -1‬يشرح مواصفات مستخدمي مواقع الويب‬

‫‪ -2‬يعدد عناصر التصميم‬
‫‪ -3‬يحدد نماذج إدراك األلوان‬
‫‪ -4‬يشرح نظريات األلوان التي تفسر وجودها‬
‫‪ -5‬يحدد مجموعة األلوان التي صنفت على عجلة األلوان‬
‫‪ -6‬يحدد أسس وقواعد استخدام األلوان‬

‫التصميم – عناصر التصميم – النقطة – بيكسل – البنية – الخط – الشكل –‬ ‫الكلمات المفتاحية‪:‬‬
‫المساحة – األرضية – النموذج – اللون – نموذج ‪ - RGB‬نموذج ‪ - HSB‬تشبعات اللون – شدة اللون‬
‫– الوضوح ‪ -‬نظريات األلوان – نظرية الضوء ‪ -‬نظرية ‪ - CMYK‬عجلة األلوان‪.‬‬

‫أول‪ :‬مقدمة‬

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

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

‫‪95‬‬
‫وقد أظهرت الدراسات أن المستخدمين يفضلون المواقع البسيطة الواضحة السهلة اإلدراك وغير‬
‫المتشابكة‪ ،‬والتي تقدم لهم المعلومات التي يبحثون عنها بأسلوب منطقي وثابت للتجول في صفحات‬
‫الموقع‪ ،‬أي أنهم يفضلون المواقع التي تستطيع أن توظف عناصر التصميم بشكل يتناسب مع حاجاتهم‬
‫وتفضيالتهم‪ ،‬ومن هذه العناصر‪ :‬التكوين العام‪ ،‬والنقط والخطوط‪ ،‬واألرضيات والمساحات البيضاء‪،‬‬
‫والنصوص والصور‪ ،‬والشعارات واأليقونات‪ ،‬واأللوان وغيرها من العناصر التي سيتم التعرض لها‬
‫بالتفصيل في هذه الوحدة‪.‬‬

‫ثانيا‪ :‬مواصفات مستخدمي مواقع الويب‬

‫يراعي المصممون في أثناء تصميمهم للمواقع أنها‬

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

‫‪ -‬هؤالء المصممون أن المستخدمين‪:‬‬

‫‪96‬‬
‫‪ -‬ينظرون إلى الوقت الالزم لعملية تصفح صفحة الويب للحصول على المعلومات على أنها واحدة‬
‫من العوامل األساسية في نجاح التصميم‪ ،‬لذلك على التصميم أال يكون عائقا بين المستخدم‬
‫وحصوله على المعلومات‪.‬‬
‫‪ -‬يرغبون بأن تكون أدوات التجول واإلبحار واضحة تساعدهم على التعرف على الصفحات التي‬
‫يريدون االنتقال إليها في الموقع مع األخذ باالعتبار أال تبرز على حساب المحتوى المعلوماتي‬
‫للموقع‪.‬‬
‫‪ -‬يعتبرون أن كل صفحة من صفحات الموقع هي جزء منه‪ ،‬وبالتالي يجب أال يختلف تصميم‬
‫الصفحة الرئيسية عن تصميم الصفحات الداخلية‪ ،‬من حيث توزيع المعلومات والمظهر الجمالي‬
‫الذي يجب أن تتمتع به‪.‬‬

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

‫ثالثا‪ :‬عناصر التصميم‬

‫توجد مجموعة من العناصر التصميمية التي يعتمدها جميع المصممين المحترفين في مختلف‬
‫تخصصاتهم والتي تنطبق على تصميم صفحات الويب خاصة‪ ،‬والتي يتمتع كل عنصر منها بدرجة من‬
‫األهمية في تحديد مظهر الموقع وروحه‪ ،‬ويمكن استعراض هذه العناصر على النحو اآلتي‪:‬‬

‫‪ -1‬كتلة المحتويات ‪:Containing Block‬‬

‫لكل صفحة ويب‪ ،‬ما يمكن أن ُيطلق عليه (الحاوية) أو ما يطلق عليه بعض الباحثين التكوين العام‬
‫للصفحة‪ ،‬وهي المساحة المحدودة التي تحدد في أثناء التصميم‪ ،‬والتي من خاللها يظهر الموقع في كامل‬
‫الشاشة‪ ،‬ويجب أن تضم عناصر الصفحة ومحتوياتها‪ ،‬ويجب أن يصمم هذا التكوين بحيث يكون إما‬

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

‫‪ -2‬شعار الموقع ‪:Logo‬‬

‫أيضا لكل صفحة ويب هوية خاصة يحددها شعار هذا الموقع‪ ،‬وأحيانا لونه‪ ،‬كما هي العالمة التجارية‬
‫ألي منتج أو سلعة‪ ،‬وغالبا ما يوضع هذا الشعار في أعلى صفحة الويب‪ ،‬ويفيد هذا الشعار ‪ -‬إضافة‬
‫إلى منح الموقع أو الصفحة هويتها الخاصة ‪ -‬في مساعدة المستخدم في التعرف على الصفحات التي‬
‫تتبع موقعا معينا‪.‬‬

‫‪ -3‬اإلبحار ‪:Navigation‬‬

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

‫‪98‬‬
 ‫‪ -4‬المحتوى ‪:Content‬‬

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

‫‪ -5‬الهامش العلوي ‪:Footer‬‬

‫ومكانه أعلى صفحة الويب‪ ،‬وعادة ما يحتوي على عبارات‪ :‬حقوق النشر‪ ،‬االتصال بالموقع‪ ،‬المعلومات‬
‫القانونية المتعلقة بالمعلومات المنشورة في الموقع‪ ،‬أقسام الموقع الرئيسية‪ ،‬ولكونه الجزء الفاصل بين أعلى‬
‫الصفحة ومنتصفها يجب أن يميز بالنسبة للمستخدم لكي يصبح واحدا من المؤشرات التي تدله على‬
‫أعلى الصفحة‪.‬‬

‫‪ -6‬المساحة البيضاء ‪:Whitespace‬‬

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

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

‫وفي التصميم ثنائي األبعاد تشير المساحة البيضاء إلى كل من العمق الوهمي والحيز الذي ُيمكن‬
‫المصمم من التالعب في التكوين حيث يعطي العمق الوهمي للمساحة قوة وديناميكية وعمقا في الرؤية‬
‫داخل التكوين‪.‬‬

‫‪99‬‬
 ‫ترتبط المساحة أو الفراغ على اإلنترنت ‪:‬‬

‫‪ ‬بدقة شاشة الحاسوب ونوعها وامكانياتها التقنية‪.‬‬

‫‪ ‬بمتصفحات صفحة الويب التي تختلف في أبعادها وقابليتها الستيعاب األلوان وأحجام العناصر‬
‫المكونة لصفحة الويب والخطوط المعتمدة في الكتابة‪ ،‬والتي يمكن أن يتالعب بها المستخدم‬
‫بطريقة تفاعلية من دون تدخل المصمم‪.‬‬

‫ولذلك يتوقف االستغالل الجيد للمساحة على مدى معرفة المصمم ألنواع المستعرضات وأحجام الشاشات‬
‫المستقبلة وخصائصها لدى المستقبلين ليتمكن من وصول الموقع إلى جميع المستخدمين من خالل‬
‫مستعرضاتهم وشاشاتهم المختلفة‪.‬‬

‫‪ -7‬األرضية ‪:Ground‬‬

‫وتُعرف أيضا بالمساحة السالبة‪ ،‬وهي مساحة الصفحة من دون أي شكل أو رسم‪ ،‬وقد تكون بيضاء أو‬
‫بأي لون آخر‪ ،‬وقد تكون األرضية عبارة عن نقش ُيستخدم كخلفية للمحتويات والرسوم التي تُعرف‬
‫بالمساحة الموجبة‪ ،‬ومثال على ذلك أن الفراغات حول النص ليست بالضرورة أن تكون خلفية فقد تكون‬
‫صفحة الويب هي األرضية‪.‬‬

‫‪ -8‬النقطة ‪:Point‬‬
‫كما تكون مئات ال ـ ‪ Pixels‬صورة أو رسما ما على‬
‫شاشة الكمبيوتر‪ ،‬فإن النقطة هي العنصر األساسي في‬
‫التصميم المرئي‪ ،‬والنقطة عنصر ليس له مقياس أو بعد‬
‫إال إذا ُحسبت من إطار ما أو مرجع ما‪ ،‬فالنقطة في‬

‫لوحة ضخمة قد يكون لها حجم وبعد واضحان‪ ،‬وهي عالمة موجودة في الفراغ ومحددة الموقع‪ ،‬وهي‬
‫وحدها تستطيع أن توفر العالقة بين السلبية واإليجابية في الفراغ‪ ،‬وعندما تجتمع نقاط عدة مع بعضها‬

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

‫وهناك عالقة قوية بين النقطة وال ـ ‪( Pixel‬أصغر وحدة قياس في الشاشة اإللكترونية)‪ ،‬وهي واحدة من‬
‫مئات اآلالف من النقاط على شاشة جهاز الكومبيوتر‪ ،‬فإذا كان حجم شاشة الكومبيوتر ‪1222×1224‬‬
‫بكسل مثال‪ ،‬فهذا يساوي ‪ Pixels 1312122‬على الشاشة‪ ،‬وهو ما نسميه (نقطة) في التصميم البياني‪،‬‬
‫والـ ‪ Pixel‬هو أساس الصور والرسومات الرقمية‪ ،‬وكل نقطة في شاشة العرض تمثل ‪.Pixel‬‬

‫‪ -9‬الخط ‪:Line‬‬

‫هو مجموعة من النقاط المتصلة‪ ،‬ويرمز إلى اتجاه‬

‫ويدل على حركة أو يحدد حدودا أو أشكاال‪ ،‬ويتمتع‬
‫بخمس صفات هي‪ :‬الطول والعرض‪ ،‬واالنحناء‬
‫والعمق والنقش‪.‬‬
‫وتُعد الخطوط أكثر العناصر شيوعا في تصميم‬
‫الرسومات‪ ،‬وهو من أهم العناصر التعبيرية على‬
‫شبكة الويب‪:‬‬

‫‪ ‬عندما يكون الخط مائال يعطي اإلحساس بالحركة واإلثارة والطاقة‪.‬‬

‫‪1‬الجشطلت ‪ :GestaltTheories‬وهي مجموعة النظريات المتخصصة في اإلدراك الحسي والنفسي‪ ،‬والتي تبحث في‬
‫كيفية التعامل مع الدماغ البشري وتنظيم المعلومات المرئية إلى فئات ومجموعات‪ ،‬وتعني كيفية تعامل الدماغ البشري مع‬
‫الكل بشكل مترابط‪ ،‬وتتكون األجزاء المكونة له في ترابط ديناميكي فيما بينها من جهة‪ ،‬وبين الكل نفسه من جهة أخرى‪.‬‬

‫‪101‬‬
 ‫‪ ‬عندما يكون أفقيا يولد اإلحساس بالترتيب والتمييز‪.‬‬

‫‪ ‬عندما يكون الخط ذا زوايا حادة يعطي شعو ار بالخطر‪.‬‬

‫‪ ‬االنحناء وااللتفاف اللطيف والتعرج للخط‪ ،‬يعطي شعو ار باالرتياح والسالسة‪.‬‬

‫‪ ‬الخطوط ذات الزوايا القائمة تعطي طابعا ميكانيكيا‪.‬‬

‫‪ ‬عندما تكون الخطوط ذات منحنيات وزوايا متقطعة تعطي شعو ار بأنها معبرة جدا مثل خط اليد‪،‬‬
‫والكتابة على الجدران والمخططات‪.‬‬

‫ي ستخدم المصمم الخطوط إما على الورق عند الرسم أو عمل المخططات المبدئية للموقع‪ ،‬واما تقنيا عن‬
‫طريق الكمبيوتر من خالل شاشة العرض‪.‬‬

‫‪ -01‬الشكل ‪:Shape‬‬
‫تمثل النقطة والخط والمخطط اللبنة األساسية لتكوين‬
‫األشكال‪ ،‬وعندما تلتقي نهايتا خط ما يصبح شكال‪،‬‬
‫فالنقطة هي أصغر جزء على الصفحة‪ ،‬وأصغر جزء في‬
‫الشكل‪ ،‬يليها الخط المغلق أو المتصل‪ ،‬والشكل عنصر‬
‫ثنائي األبعاد يتكون من مساحة وحدود وعرض وارتفاع‪،‬‬

‫ويمكن أن يكون الشكل هندسيا كالمثلث والمربع والدائرة‪ ..‬وغيرها‪ ،‬أو يكون على هيئة أشكال حرة ذات‬
‫انحناءات وخطوط خارجية غير منتظمة‪.‬‬

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

‫‪102‬‬
 ‫ويرتبط الشكل باألرضية التي ُيرسم عليها‪ ،‬وتشكل‬
‫هذه العالقة أساس مفهوم اإلدراك البصري لألشكال‬
‫واألشياء‪ ،‬إذ ال يمكن رؤية األشياء كأشكال إال إذا‬
‫فُصلت عن األرضية أو الخلفية‪ ،‬فاألشكال تكون‬
‫أبرز من الخلفية‪ ،‬ويمكن تحديد الفرق بين الشكل‬
‫واألرضية كما يلي‪:‬‬

‫‪ُ -‬يرى الشكل وكأنه خارج من األرضية لكونه موجودا عليها‪.‬‬

‫‪ -‬تبدو األرضية خلف الشكل‪ ،‬فال بد من أن تكون صورة معينة مستمرة‪ ،‬بحيث تبدو للمستخدم‬
‫والمشاهد خلف الشكل‪.‬‬
‫‪ -‬يوحي الشكل بمعنى ما‪ ،‬في حين تبدو األرضية ليس لها معنى نسبيا‪.‬‬
‫‪ -‬يمكن للمشاهد أو المستخدم رؤية الشيء نفسه كشكل أو كأرضية اعتمادا على كيفية توجيه‬
‫انتباهه‪.‬‬

‫النموذج ‪:Form‬‬ ‫‪-00‬‬

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

‫‪103‬‬
 ‫اللون ‪:Color‬‬ ‫‪-01‬‬

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

‫رابعا‪ :‬نماذج إدراك األلوان‬

‫‪104‬‬
‫هناك نموذجان رئيسيان إلدراك األلوان‪ :‬األول خاص بالكمبيوتر نموذج ‪ ،RGB‬واآلخر خاص‬
‫بالمستخدمين نموذج ‪:HSB‬‬

‫أول‪ :‬نموذج ‪:RGB‬‬

‫يضم هذا النموذج األلوان األساسية الثالثة التي يتم‬

‫عرضها على شاشة الكمبيوتر وهي‪ :‬األحمر‬
‫واألخضر واألزرق‪ ،‬وتحتوي هذه األلوان على‬
‫مجموعة من القيم اللونية‪ ،‬وكل لون من هذه األلوان‬
‫له ست درجات‪ ،‬وبالتالي يكون حاصل ضرب‬
‫‪ 212 =2×2×2‬لونا‪ .‬وعندما تمتزج هذه األلوان‬
‫بنسب متساوية تعطي اللون األبيض‪ ،‬أما إذا‬
‫امتزجت بنسب منخفضة فستعطي اللون األسود‪.‬‬

‫وتمتد قيم هذه األلوان من صفر إلى ‪ 255‬درجة لونية‪ ،‬وبالتالي يمكن الحصول على‬
‫‪ 12.111.212 =252×252×252‬درجة لونية‪ ،‬وهو أكثر مما تستطيع عين اإلنسان تمييزه‪ ،‬حيث‬
‫يميز اإلنسان نحو عشرة ماليين درجة لونية كحد أقصى‪.‬‬
‫كانت شاشات الكمبيوتر القديمة تقوم بعرض األلوان عن طريق اندفاع اإللكترونات صوب الشاشة‪،‬‬
‫والمادة الفوسفورية المطلية بها الشاشة‪ ،‬إذ ُيدفع ثالثة ألوان رئيسية‪ :‬األحمر واألزرق واألخضر‪ ،‬وكل‬
‫بيكسل على الشاشة ملون أيضا باأللوان األساسية الثالثة‪:‬‬
‫‪ ‬عندما تندفع اإللكترونات الحمراء تنشط النقاط الحمراء‪ ،‬وبالطريقة نفسها تنشط النقاط الزرقاء‬
‫والخضراء‪.‬‬
‫‪ ‬أما األلوان غير األساسية فتنشأ عن اندفاع لونين أساسين‪ ،‬وظهور األلوان غير األساسية كاللون‬
‫األصفر مثال‪.‬‬

‫‪105‬‬
 ‫‪ ‬أما اللون األبيض فينشأ عن اندفاع ثالثة ألوان‪ ،‬واألسود يعني عدم اندفاع األلوان‪.‬‬

‫ثانيا‪ :‬نموذج ‪:HSB‬‬

‫يتعلق هذا النموذج بإدراك المستخدمين لأللوان‪ ،‬ويتكون من ثالثة عناصر‪ :‬شكل اللون واإلشراق (التشبع‬
‫اللوني) والوضوح‪ ،‬وتسمى ألوان هذا النموذج باأللوان المدركة أو األلوان الذاتية‪:‬‬
‫‪ -‬شكل اللون أو الصبغة اللونية‪ :‬وهو اللون المنعكس من الشيء‪ ،‬فهو اللون الفعلي الذي‬
‫يتعامل معه المستخدم مثل األحمر والبرتقالي والبنفسجي‪ ،‬ويحتوي شكل اللون على كل‬
‫األلوان الواقعة في نطاق ألوان الطيف السبعة وهي‪ :‬األحمر‪ ،‬البرتقالي‪ ،‬األصفر‪ ،‬األخضر ‪،‬‬
‫األزرق‪ ،‬السماوي‪ ،‬البنفسجي‪ ،‬ويقاس شكل اللون من الدرجة صفر إلى ‪ 322‬حول عجلة‬
‫األلوان‪ ،‬حيث يأخذ اللون األحمر القيمة صفر‪ ،‬واللون البنفسجي القيمة ‪.322‬‬
‫‪ -‬اإلشراق أو التشبع اللوني‪ :‬وتسمى أيضا كروما ‪ ،Chroma‬والتي تعني نقاء أو صفاء اللون‬
‫أو كثافة وشدة اللون‪ ،‬أي كمية اللون الموجودة في عملية مزج األلوان‪ ،‬فاللون السماوي ينشأ‬
‫من مزج اللون األزرق باألبيض‪ ،‬ولزيادة إشراقه وشدته ُيزاد األزرق قليال‪ ،‬كما تعتمد شدة‬
‫اللون أيضا على معدل التدفق في كل طول موجي للضوء الذي يتضمن اللون‪.‬‬
‫‪ -‬الوضوح‪ :‬وهو درجة إضاءة أو إظالم‪ ،‬أي هل اللون فاتح أم داكن‪ ،‬فيكون اللون داكنا إذا‬
‫زادت إضاءة اللون األسود‪ ،‬ويكون مضيئا إذا زادت إضاءة اللون األبيض‪ ،‬ويقاس وضوح‬
‫اللون بدرجات من الصفر إلى المئة‪ ،‬والصفر يدل على اللون األبيض والمئة تدل على اللون‬
‫األسود‪.‬‬
‫وقد توصل الباحثون حول تحليل العواطف واآلثار‬
‫السلوكية التي تحدثها األلوان في نفوس‬
‫المستخدمين إلى مجموعة من النتائج التي ُوظفت‬
‫عند اختيار األلوان وتدرجاتها في تصميم المواقع‬
‫للوصول إلى التأثير المطلوب عند المستخدمين‪،‬‬

‫‪106‬‬
 ‫وتدل النتائج على أن األلوان تُحدث التأثيرات التالية‪:‬‬
‫‪ -‬األحمر‪ :‬يؤدي إلى تحفيز األدرنالين في الدم‪ ،‬وهو من األلوان المثيرة الدرامية والغنية‪ ،‬وهو‬
‫لون العواطف ومشاعر الحب‪.‬‬
‫‪ -‬البرتقالي‪ :‬وهو من األلوان الحيوية التي تمد بالطاقة والسعادة‪ ،‬والحماسة واإلبداع‪ ،‬ويساهم‬
‫في فتح الشهية‪.‬‬
‫‪ -‬األصفر‪ :‬وهو أيضا من األلوان الحيوية‪ ،‬ويؤدي إلى اإلحساس بالنشاط والسعادة والحركة‬
‫والحذر‪.‬‬
‫‪ -‬األخضر‪ :‬ويرتبط بالطبيعة‪ ،‬فيعطي إحساسا بالنضارة واألمل‪ ،‬وهو أقل نشاطا من األلوان‬
‫السابقة‪.‬‬
‫‪ -‬األزرق‪ :‬وهو من األلوان المفضلة عالميا الرتباطه بالسماء والبحار والمحيطات‪ ،‬وهو يرمز‬
‫ويستخدم في تهدئة النفس وتخفيف الشهية‪.‬‬
‫إلى االنفتاح والذكاء واإليمان‪ُ ،‬‬
‫‪ -‬البنفسجي‪ :‬وقد ارتبط هذا اللون بالملكية والسلطة والثروة‪ ،‬والزهور واألحجار الكريمة‪ ،‬لكنه‬
‫أقل األلوان استخداما‪.‬‬
‫‪ -‬األبيض‪ :‬ويرمز إلى السالم والطمأنينة‪ ،‬والصفاء والنقاء‪ ،‬والفرح والنظافة‪.‬‬
‫‪ -‬األسود‪ :‬ويرمز إلى الموت والشر‪ ،‬والسلطة والقوة والرشاقة على حد سواء‪.‬‬

‫خامسا‪ :‬نظريات األلوان التي تفسر وجودها‬

‫نظ ار لما تؤديه األلوان من تأثيرات فعالة لكنها متباينة إلى حد كبير‪ ،‬فقد توصل الباحثون إلى وضع‬
‫نظريات لأللوان تفسر وجودها‪ ،‬وكيفية تفاعلها معا عند مزج لونين أو أكثر‪ ،‬وهذه النظريات هي‪:‬‬
‫أول‪ :‬نظرية اللون‪:‬‬
‫تقوم هذه النظرية على مجموعة من األفكار األساسية‪ ،‬وهي‪:‬‬
‫‪ -‬اللون األبيض‪ :‬لون عديم اللون‪.‬‬
‫‪ -‬يظهر اللون األسود عند مزج األلوان الرئيسية الثالثة‪ :‬األحمر واألزرق واألخضر‪.‬‬

‫‪107‬‬
‫‪ -‬إضافة اللون األبيض إلى أي لون يؤدي إلى تفتيحه‪ ،‬واضافة اللون األسود إليه يؤدي إلى‬
‫قتامته‪.‬‬
‫‪ -‬مزج اللون األحمر مع اللون األصفر يعطي اللون البرتقالي‪ ،‬ومزج اللون األحمر مع اللون‬
‫األزرق يعطي اللون البنفسجي‪ ،‬ومزج اللون األصفر مع اللون األزرق يعطي اللون األخضر‪.‬‬
‫ثانيا‪ :‬نظرية الضوء‪:‬‬
‫تقوم هذه النظرية أيضا على مجموعة من األفكار الرئيسية التالية‪:‬‬
‫‪ -‬اللون األسود هو اللون عديم اللون‪ ،‬وعند عدم وجود إضاءة فلن يظهر أي لون‪.‬‬
‫‪ -‬مزج األلوان األساسية الثالثة‪ :‬األحمر واألزرق واألخضر‪ ،‬سيؤدي إلى ظهور اللون األبيض‪،‬‬
‫وهو ما يتفق مع نظرية إسحق نيوتن الذي قال إن مزج كل األلوان يؤدي إلى ظهور اللون‬
‫األبيض‪ ،‬وهو ما يعرف بنظرية ‪.RGB‬‬
‫‪ -‬إضاءة المصباح األحمر والمصباح األزرق تؤدي إلى ظهور الضوء البنفسجي‪.‬‬
‫‪ -‬إضاءة المصباح األحمر والمصباح األخضر تؤدي إلى ظهور الضوء األصفر‪.‬‬
‫‪ -‬إضاءة المصباح األزرق والمصباح األخضر تؤدي إلى ظهور الضوء القرمزي‪.‬‬
‫‪ -‬تنتج الدرجات اللونية عن اختالف شدة إضاءة كل لون على حدة‪ ،‬وتختلف درجة اللون‬
‫الناتج عن امتزاج لونين معا حسب نسبة كل لون منهما‪.‬‬
‫‪ -‬إضاءة المصباح الخافت تؤدي إلى ظهور اللون الرمادي‪ ،‬وهو اللون الوسط بين اللون‬
‫األبيض الناتج عن إشعال المصابيح ذات األلوان الرئيسية معا‪ ،‬وعن عدم إضاءتها معا‪.‬‬
‫‪ -‬تطبق هذه النظرية على شاشات الكمبيوتر‪ ،‬وشاشات التلفزيون‪ ،‬والماسحات الضوئية‪ ،‬وذلك‬
‫باستخدام مزج األلوان الرئيسية الثالثة إلعطاء مجموعة كاملة من األلوان‪.‬‬

‫ثالثا‪ :‬نظرية ‪:CMYK‬‬

‫تقوم هذه النظرية على طرح األلوان الثالثة‪ :‬سيان ‪ -‬ماجينتا ‪ -‬أصفر من ألوان الجمع األساسية الثالثة‪،‬‬
‫وحسب هذه النظرية‪:‬‬
‫‪ -‬تعريض اللون األصفر والقرمزي للضوء يعطي اللون األحمر‪.‬‬
‫‪ -‬تعريض اللون األصفر واللون السماوي الفاتح (السيان) للضوء يعطي اللون األخضر‪.‬‬
‫‪ -‬تعريض اللون القرمزي واللون السيان للضوء يعطي اللون األزرق‪.‬‬

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

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

‫‪110‬‬
‫تعطي إحساسا بالسلبية‪ ،‬وقد يتعارض مع هدف الرسالة لذلك من المفضل مشاركتها مع‬
‫األلوان الدافئة حتى تعطي األحاسيس المتباينة والمختلفة كالعمق والفراغ‪.‬‬
‫‪ -‬األلوان المكملة‪ :‬وهي األلوان التي تقابل بعضها على العجلة اللونية من خالل خط مستقيم‬
‫يصل بين كل لونين متقابلين‪ ،‬وبذلك فاللون السيان يقابل اللون األحمر ويكمله‪ ،‬ويفضل عدم‬
‫استخدام األلوان المكملة في النصوص واألرضيات‪.‬‬

‫سابعا‪ :‬أسس وقواعد استخدام األلوان‬

‫يتحكم في استخدام األلوان في تصميم موقع الويب مجموعة من القواعد التي يجب على المصمم اتباعها‬
‫واألخ ُذ بها إلحداث التأثير اللوني المطلوب‪ ،‬ومن هذه القواعد‪:‬‬
‫‪ -1‬التوازن‪:‬‬
‫والمقصود به إحداث التوازن بين األسود واألبيض أي بين أشكال الحروف المستخدمة واألرضية‬
‫أو الخلفية‪ ،‬لذا يفضل عدم استخدام الخلفيات المزركشة أو المنقطة أو ذات النقوش‪ ،‬واستخدام‬
‫الخلفيات البيضاء أو الزرقاء ذات الدرجات اللونية المنخفضة‪ ،‬ولكي يحصل اإلدراك البصري‬

‫‪111‬‬
‫يجب إحداث التباين بين األشكال والخطوط والحروف عن الخلفيات‪ ،‬حتى تتحقق االنقرائية‬
‫والرؤية الواضحة‪.‬‬
‫‪ -2‬التباين‪:‬‬
‫ويقصد به وجود قدر من االختالف بين المتن والخلفية لتحقيق االنقرائية‪ ،‬كما سبق ذكره‪،‬‬
‫فاستخدام درجات لونية متقاربة لكل من العنصرين يحقق صعوبة في القراءة‪ ،‬واأللوان ذات الطول‬
‫الموجي القصير (كاأللوان الباردة‪ :‬األزرق واألخضر والبنفسجي) أفضل في االستخدام خاصة‬
‫في الخلفية من األلوان ذات الطول الموجي الطويل (كاأللوان الحارة‪ :‬األحمر والبرتقالي‬
‫واألرجواني واألصفر)‪ ،‬لكن المبالغة في تحقيق التباين أمر يؤثر على درجة االنقرائية عند‬
‫المستخدم‪ ،‬ويفضل استخدام درجات لونية خفيفة للعناوين أو المقدمات أو المتن‪ ،‬ال خلط بينها‪.‬‬
‫‪ -3‬البساطة‪:‬‬
‫بمعنى عدم زيادة عدد األلوان المستخدمة في التصميم عن لونين أو ثالثة مع مراعاة استخدام‬
‫األلوان البارزة للعناصر األكثر أهمية كالعناوين‪ ،‬والروابط التشعبية التي ُيستخدم لها في األغلب‬
‫اللونان األزرق واألحمر‪.‬‬
‫‪ -4‬التوافق اللوني‪:‬‬
‫أي استخدام عدد محدد من األلوان المريحة للعين‪ ،‬وغير المتداخلة التأثيرات‪ ،‬مثل استخدام اللون‬
‫األحمر الساطع‪ ،‬واألزرق الساطع بشكل متجاور حتى ال يحصل ما يطلق عليه الباحثون التوتر‬
‫اللوني أو اإلجهاد البصري‪ ،‬وعلى سبيل المثال يفضل استخدام اللون األزرق الفاتح لألرضيات‬
‫والخلفيات‪ ،‬وعدم استخدامه في المتن ألن عدسة العين تمتص مرتين اللون األزرق‪ ،‬نظ ار لنقص‬
‫الصباغات الزرقاء في العين‪.‬‬

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

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

‫‪113‬‬
 ‫الخالصة‬

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

‫وتتعدد العناصر البنائية المستخدمة في تصميم المواقع اإللكترونية على الرغم من أن المستخدمين قد ال‬
‫يدركون مفهوم الكثير من هذه العناصر أو حتى وظائفها‪ ،‬لكنهم يتصفحون ويفضلون المواقع التي‬
‫تستطيع أن توظف هذه العناصر بشكل يتناسب مع حاجاتهم وتفضيالتهم‪ ،‬ومن هذه العناصر‪ :‬كتلة‬
‫المحتويات أو التكوين العام‪ ،‬والنقط والخطوط‪ ،‬واألرضيات والمساحات البيضاء‪ ،‬والنصوص والصور‪،‬‬
‫والشعارات واأليقونات‪ ،‬واأللوان وما يتعلق بهذا العنصر من قواعد وأسس ونظريات تؤطر لعملية‬
‫استخدامها وتوظيفها األمثل في تصميم صفحة الويب كنموذج ‪ RGB‬لأللوان األساسية الثالثة‪ ،‬ونموذج‬
‫‪ ،HSB‬وال تشبعات اللونية‪ ،‬وشدة األلوان ووضوحها‪ ،‬ونظريات األلوان‪ ،‬ونظرية الضوء‪ ،‬ونظرية ‪CMYK‬‬
‫لأللوان المطروحة من األلوان األساسية الثالثة‪ ،‬وأخي ار عجلة األلوان وتأثيراتها اللونية النفسية واإلدراكية‬
‫لدى المستخدم‪.‬‬

‫المعلومات اإلضافية‪:‬‬

‫الجشطلت ‪ :GestaltTheories‬وهي مجموعة النظريات المتخصصة في اإلدراك الحسي والنفسي‪،‬‬

‫والتي تبحث في كيفية التعامل مع الدماغ البشري وتنظيم المعلومات المرئية إلى فئات ومجموعات‪،‬‬
‫وتعني كيفية تعامل الدماغ البشري مع الكل بشكل مترابط‪ ،‬وتتكون األجزاء المكونة له في ترابط ديناميكي‬
‫فيما بينها من جهة‪ ،‬وبين الكل نفسه من جهة أخرى‪.‬‬

‫‪114‬‬
 ‫المراجع والمصادر‬
‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2222( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2225( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2212( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،2‬العدد ‪.11‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2212( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة‪ ،‬في إطار نظرية تمثيل المعلومات‪( ،‬دراسة شبه تجريبية)‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2222( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2221( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -1‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2211( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة‪ ،‬تعد جزءا من متطلبات الحصول‬
‫على الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪8- Beard, Jason, (2010), The Principals of Beautiful Web Design, (2.Ed),‬‬
‫‪Canada, SitePoint Pty Ltd.‬‬
‫‪9-‬‬ ‫‪Jarrar,‬‬ ‫‪Suba,‬‬ ‫‪(2002),‬‬ ‫‪Web‬‬ ‫‪Design‬‬ ‫‪Guidelines,‬‬ ‫‪For‬‬ ‫‪WSDM,‬‬
‫‪Dissertation Submitted in View of Obtaining a degree of Master‬‬
‫‪Science in Computer Science, Vrije Universiteit Brussel, Dep.of‬‬
‫‪Computer System.‬‬

‫‪115‬‬
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫من أهم العناصر البنائية والذي من أجله يدخل المستخدمون إلى الموقع اإللكتروني‪:‬‬

‫‪ .A‬الشكل‪.‬‬
‫‪ .B‬النموذج‪.‬‬
‫‪ .C‬المحتوى‪.‬‬
‫‪ .D‬اللون‪.‬‬

‫اإلجابة الصحيحة‪ C : :‬المحتوى‬

‫تسمى مجموعة األلوان التي تقع أعلى العجلة اللونية‪:‬‬

‫‪ .A‬األلوان الثالثية‪.‬‬
‫‪ .B‬األلوان المكملة‪.‬‬
‫‪ .C‬األلوان الدافئة‪.‬‬
‫‪ .D‬األلوان الباردة‪.‬‬

‫اإلجابة الصحيحة‪ C :‬األلوان الدافئة‬

‫‪116‬‬
 ‫هو شكل ثنائي األبعاد‪ ،‬ومن العناصر البنائية المهمة‪:‬‬

‫‪ .A‬الشكل‪.‬‬
‫‪ .B‬الخطوط‪.‬‬
‫‪ .C‬النموذج‪.‬‬

‫اإلجابة الصحيحة‪ A :‬الشكل‬

‫‪117‬‬
 ‫الوحدة التعليمية السادسة‬

‫عناصر تصميم الصفحة الرئيسية‬

‫العناصر‪:‬‬

‫‪ -‬مقدمة ‪.‬‬
‫‪ ‬أقسام الصفحة الرئيسية‪.‬‬
‫‪ ‬قواعد تصميم الصفحة الرئيسية‪.‬‬
‫عناصر تصميم الصفحة الرئيسية‪:‬‬
‫‪ ‬أدوات اإلبحار‪.‬‬
‫‪ ‬عناوين األقسام‪.‬‬
‫‪ ‬المحتوى النصي‪.‬‬
‫‪ ‬المحتوى الرسومي‪.‬‬
‫‪ ‬تخطيط الصفحة ‪.‬‬
‫‪ ‬األلوان‪.‬‬
‫‪ ‬الوسائط المتعددة‪.‬‬
‫‪ ‬العناصر التفاعلية ‪.‬‬
‫‪ -‬خاتمة ‪.‬‬

‫‪118‬‬
 ‫األهداف التعليمية‪:‬‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ -1‬يشرح تصميم الصفحة الرئيسية‪.‬‬

‫‪ -2‬يحدد أقسام الصفحة الرئيسية‪.‬‬
‫‪ -3‬يذكر قواعد تصميم الصفحة الرئيسية‪.‬‬
‫‪ -4‬يشرح عناصر تصميم الصفحة الرئيسية‪.‬‬

‫الكلمات المفتاحية‪ :‬التصميم – الصفحة الرئيسية – واجهة االستخدام ‪ -‬عناصر تصميم الصفحة‬

‫الرئيسية – الترويسة – الالفتة – الشعار – العنق – الجسم – القدم أو الذيل – عناصر التجول –‬
‫التجول الخطي – التجول الهرمي – التجول الحر – التجول المركب – الروابط التشعبية – عناوين‬
‫األقسام – المحتوى النصي – المحتوى الرسومي – تخطيط الصفحة – األلوان – الوسائط المتعددة –‬
‫العناصر التفاعلية‪.‬‬

‫أوال‪ :‬مقدمة‬

‫واجهة االستخدام أو الصفحة الرئيسية‪ ،‬هي‬

‫الصفحة األولى التي يراها المستخدم عندما يدخل‬
‫إلى موقع الويب‪ ،‬لذا يجب أن تحمل المالمح‬
‫البارزة لهذا الموقع من حيث اللون والتصميم‪ ،‬ونوع‬
‫الخط وأدوات اإلبحار وغيرها من المالمح‪،‬‬

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

‫‪119‬‬
‫ويراعي المصمم في تصميمه لهذه الصفحة أنها بوابة الموقع‪ ،‬وبالتالي هناك العديد من األهداف التي‬
‫يجب أن تتحقق من خاللها‪:‬‬

‫‪ ‬كأن تجذب انتباه المستخدمين واهتمامهم من خالل التركيز على المواضيع المهمة‪.‬‬

‫‪ ‬تزويد الصفحة الرئيسية بروابط تشعبية إلى الموضوعات األخرى‪.‬‬

‫‪ ‬تحميل الصفحة الرئيسية سريعاً لتجنب هروب المستخدمين إلى مواقع أخرى‪.‬‬

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

‫ثانيا‪ :‬تصميم الصفحة الرئيسية‬

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

‫‪120‬‬
‫ولسهولة تنظيم وتوزيع هذه العناصر فقد توافق المصممون على تقسيم الصفحة الرئيسية للموقع‬
‫اإللكتروني إلى ثالثة أجزاء‪ :‬الترويسة ‪ ،Header‬وجسم الصفحة ‪ ،Body‬وذيل الصفحة ‪ ،Footer‬وان‬
‫كان بعضهم يفضل إضافة القوائم الجانبية إليها‪ ،‬ووضع العناصر المهمة في كل قسم من هذه األقسام‬
‫حسب أهميته الشكلية والوظيفية للموقع اإللكتروني‪ ،‬بحيث يحوي مجموعة العناصر التي تعبر عن‬
‫الموقع وهدفه األساسي‪.‬‬

‫ثالثا‪ :‬أقسام الصفحة الرئيسية‬

‫‪ -1‬الترويسة ‪:Header‬‬

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

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

‫‪121‬‬
 ‫‪-2‬الجسم ‪:Body‬‬

‫وهو الجزء الذي يلي العنق‪ ،‬ويحوي األعمدة التي يتم بداخلها توزيع المحتوى المعلوماتي وباقي العناصر‬
‫المكونة للصفحة كاإلعالنات‪ ،‬والوصالت التشعبية‪ ،‬وغيرها‪.‬‬

‫‪-3‬ذيل الصفحة ‪:Footer‬‬

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

‫رابعا‪ :‬قواعد تصميم الصفحة الرئيسية‬

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

‫أ‪ -‬التناسب‪ :‬بين الصور والنصوص‪ ،‬وبقية مكونات الصفحة‪.‬‬

‫‪122‬‬
 ‫ب‪ -‬االنسيابية‪ :‬حتى يستطيع المستخدم االنتقال من عنصر إلى آخر بيسر وسهولة‪.‬‬
‫ت‪ -‬االتجاه‪ :‬لتوجيه المستخدم باتجاه مدروس‪ ،‬وعدم تركه يتجول من دون هدف بحثاً عن مكان‬
‫تستقر عينه عليه‪.‬‬
‫ث‪ -‬البنية‪ :‬تنظيم بنية العناصر البنائية على الصفحة بشكل هرمي من المهم إلى األقل أهمية‪.‬‬
‫ج‪ -‬الطابع‪ :‬ويتمثل في اختيار نظام األلوان وتنسيق النصوص والصور‪ ،‬مما يؤدي إلى تحديد‬
‫رسالة الصفحة‪.‬‬

‫ويأخذ المصمم بعين االعتبار أن المستخدم غير صبور‪،‬‬

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

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

‫خامسا‪ :‬عناصر تصميم الصفحة الرئيسية‬

‫تضم الصفحة الرئيسية بشكل عام مجموعة من‬

‫المكونات التي يستخدمها المصمم لتوضيح هدف‬
‫هذا الموقع من جهة‪ ،‬وتيسير استخدام الموقع من‬
‫جهة أخرى‪ ،‬وذلك باالعتماد على إبراز هذه‬
‫المكونات وتوضيح مكان وجودها‪ ،‬ويمكن تحديدها‬
‫في‪:‬‬

‫‪123‬‬
‫فهرس يوضح التوزيعات األساسية للمحتوى داخل الموقع والعالقات بينها‪ ،‬وهو ما يساعد في فهم خريطة‬
‫التجول واإلبحار‪.‬‬

‫‪ -1‬ملخص ألهم الموضوعات واألخبار التي سيتصفحها المستخدم‪.‬‬

‫‪ -2‬عنوان البريد اإللكتروني للموقع بقصد التفاعل والتواصل بين المستخدم وصاحب الموقع‪.‬‬
‫‪ -3‬آليات البحث داخل الموقع‪.‬‬
‫‪ -4‬بعض المواقع تضيف إجراءات للوصول إلى الموقع مثل كلمة السر وغيرها من البيانات‬
‫الشخصية المطلوبة‪.‬‬
‫‪ -5‬شعار المؤسسة التي يتبع لها الموقع‪ ،‬والبيانات التي تعبر عن هدف الموقع ومحتواه‪.‬‬
‫‪ -6‬خدمة البحث المباشر داخل الموقع‪.‬‬

‫ويارعى في هذا التصميم البساطة‪ ،‬واالستغالل األمثل للمساحات البيضاء‪ ،‬وتجزئة الصفحة إلى مقاطع‬
‫أو إطارات قليلة‪ ،‬وعدم استخدام وصالت غير ضرورية‪.‬‬

‫كما يعتمد المصمم على جملة من عناصر التصميم المهمة والضرورية لمساعدة المستخدم على تصفح‬
‫الموقع بسهولة وسرعة‪ ،‬ومن هذه العناصر‪:‬‬

‫أوال‪ :‬عناصر التجول ‪:Navigation‬‬

‫وهي من أهم عناصر واجهة االستخدام ألنها وسيلة‬

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

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

‫ومهما كانت آلية التجول المتبعة في الموقع‬

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

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

‫ويحدد عنوان الموقع ‪ URL: Uniform Resource Locator‬المكان الذي يوجد فيه المستخدم‪ ،‬أما إذا‬
‫نسي المستخدم أين كان‪ ،‬فإن الروابط التشعبية تدله على ذلك‪ ،‬فالروابط باللون األزرق تشير إلى الروابط‬
‫التي لم يزرها‪ ،‬أما الروابط باللون األحمر أو البنفسجي فتشير إلى المواقع التي سبق أن زارها‪ ،‬وأما إذا‬
‫تساءل المستخدم إلى أين يذهب‪ ،‬فإن الروابط التشعبية تدله على ذلك‪ ،‬وكذلك القوائم األفقية والجانبية‪،‬‬
‫والقوائم السفلية‪ ،‬ويمكن أن تأخذه إلى المكان الذي يريده‪.‬‬

‫‪125‬‬
 ‫تقنيات التجول‪:‬‬

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

‫‪ -1‬االنتقال الخطي ‪ :Linear Navigation‬حيث ينتقل المستخدم داخل الصفحة‪ ،‬ومن صفحة‬
‫إلى أخرى في الموقع‪ ،‬وذلك باالنتقال إلى الصفحة التالية‪ ،‬أو الرجوع إلى الصفحة السابقة فقط‪،‬‬
‫كما في الشكل التالي‪:‬‬

‫‪ -2‬االنتقال الهرمي ‪ :Hierarchical Navigation‬وهو االنتقال داخل كل قسم من أقسام‬

‫الموقع على شكل شجرة متفرعة سواء كان باتجاه الفروع أم العودة إلى األصل‪ ،‬ليتمكن المستخدم‬
‫بعد ذلك من االنتقال إلى قسم آخر‪ ،‬وذلك كما هو مبين في الشكل التالي‪:‬‬

‫‪126‬‬
‫‪ -3‬االنتقال الحر ‪ :Nonlinear Navigation‬حيث يسمح للمستخدم االنتقال بشكل حر من أي‬
‫جزء في الصفحة إلى أي جزء آخر‪ ،‬أو من أي صفحة إلى صفحة أخرى‪ ،‬كما هو مبين في‬
‫الشكل التالي‪:‬‬

‫‪ -4‬االنتقال المركب ‪ :Composite Navigation‬ويعتمد أساساً على االنتقال الحر في معظم‬

‫األقسام‪ ،‬لكن يمكن أن يتغير إلى االنتقال الخطي‪ ،‬أو الهرمي إذا استلزم األمر‪ ،‬مثل حاالت‬
‫الرسوم المتحركة أو المعلومات المرتبطة ببعضها‪ ،‬كما هو مبين في الشكل التالي‪:‬‬

‫أنواع عناصر التجول‪:‬‬

‫أما بالنسبة ألنواع عناصر التجول‪ ،‬فيظهر منها أنواع مختلفة على الصفحة الرئيسية‪ ،‬ومن هذه األنواع‪:‬‬

‫‪ -1‬التجول بواسطة االرتباطات النصية‪ :‬وهي من أشهر طرق التجوال‪ ،‬فهي تربط الصفحات وتتيح‬
‫للمستخدمين إمكانية االنتقال إلى صفحات جديدة‪ ،‬وتوجد ثالثة أنواع من االرتباطات النصية‪:‬‬

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

‫‪128‬‬
 ‫‪ -4‬التجول باألزرار‪ :‬تصمم األزرار بأكثر من حالة‪:‬‬
‫أ‪ -‬الحالة الطبيعية أو حالة االستقرار‪ :‬وهو الشكل الذي يأخذه الزر بانتظار تفعيله‪.‬‬
‫ب‪ -‬حالة مرور الفأرة فوق الزر‪ :‬كاإلضاءة التي تحدث كلما تحرك مؤشر الفأرة فوق زر قابل للعمل‬
‫أو عند االنتقال إليه باستخدام مفاتيح األسهم أو المفتاح ‪ ،Tab‬وهذه الحالة االنتقالية يمكن أن‬
‫تساعد المستخدمين على تتبع حركة مؤشر الفأرة‪ ،‬وابراز عنوان الزر بشكل واضح‪.‬‬
‫ت‪ -‬حالة الضغط‪ :‬إذ يأخذ الزر شكالً مختلفاً عند النقر عليه‪ ،‬وقد يتم أيضاً إرفاق هذه الحالة‬
‫بتأثيرات صوتية‪.‬‬

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

‫‪ -5‬التجول بالتحويم‪ :‬عناصر التحويم ‪ Mouseovers‬أو ‪ Rollovers‬هي عناصر مصممة بحيث‬

‫يط أر عليها تغيرات مرئية في أثناء تفاعل الفأرة معها‪ ،‬وتوجد أشكال مختلفة لتأثير التحويم مثل‬
‫عرض رسالة مخصصة في شريط الحالة ضمن نافذة المستعرض أو إظهار إضاءة أو ظل عند‬
‫المرور بمؤشر الفأرة فوق الصورة‪.‬‬
‫‪ -6‬القوائم المنبثقة ‪ :Pop-up Menus‬وهي القائمة التي تظهر عند التحويم بمؤشر الفأرة فوق‬
‫أحد خيارات التجول‪ ،‬وهذه القائمة تتسع للخيارات التي تم إنشاؤها في البنية الهرمية للموقع‪.‬‬
‫‪ -7‬القوائم المنسدلة ‪ :Pull-down Menus‬وهي تعمل على تقديم الئحة من الخيارات لنقل‬
‫المستخدم إلى الصفحة المناسبة عند تحديده أحد الخيارات‪ ،‬وغالباً ما تستخدم في القوائم الرئيسية‬
‫األفقية للصفحة‪.‬‬

‫‪129‬‬
 ‫أماكن عناصر التجوال‪:‬‬

‫أماكن عناصر التجوال‪ :‬هناك خمسة أماكن عامة لوضع عناصر اإلبحار‪ :‬فوق‪ ،‬تحت‪ ،‬يسار‪ ،‬يمين‪،‬‬
‫وفي منتصف الصفحة‪:‬‬

‫‪ -‬اإلبحار العلوي‪ :‬ومكانه أعلى الشاشة‪ ،‬وفي‬

‫الشكل التقليدي لتصميم الصفحة الرئيسية فإن‬
‫القمة هي موضع قوائم اإلبحار‪ ،‬لكن المأخذ على‬
‫هذا المكان اختفاء هذه األدوات عند النزول‬

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

‫‪ -‬اإلبحار السفلي‪ :‬معظم المصممين ال يقتنعون‬

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

‫‪130‬‬
 ‫‪ -‬اإلبحار الجانبي األيسر‪ :‬وهو من األماكن‬
‫الشائعة في العناصر الناطقة باللغات‬
‫األجنبية‪ ،‬ومن المآخذ على هذا المكان‬
‫التقليل من المساحة المخصصة لعرض‬
‫محتويات الصفحة الرئيسية‪.‬‬

‫‪ -‬اإلبحار الجانبي األيمن‪ :‬وقد أصبح هذا‬

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

‫‪ -‬اإلبحار المركزي (في المنتصف)‪ :‬ويتم من‬

‫خالل وضع أزرار أو خرائط صور في وسط‬
‫الصفحة‪ ،‬وهذه األدوات قد تزاحم محتويات‬
‫الصفحة النصية‪ ،‬لكنها تساعد المستخدم على‬
‫التركيز على منتصف الصفحة الرئيسية‪،‬‬
‫وبذلك تتميز عن باقي الصفحات‪.‬‬

‫‪131‬‬
 ‫ثانيا‪ :‬عناوين األقسام ‪:Section Header‬‬

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

‫ثالثا‪ :‬المحتويات النصية ‪:Text Content‬‬

‫وهي المحتويات النصية الموجودة في مركز‬
‫الصفحة‪ ،‬وهي من أهم العناصر التي ‪ -‬كما سبق‬

‫ذكره ‪ -‬من أجلها يدخل المستخدم الموقع‪ ،‬وغالباً‬

‫ما تستخدم في كتابة هذه النصوص أنواع الخطوط‬
‫المتعارف عليها‪ ،‬والتي يمكن أن تدعمها أشهر‬
‫برامج التصفح‪ ،‬وعندما ال يستطيع المتصفح‬

‫دعم الخط المستخدم‪ ،‬فإنه يقوم بتحويل الخط إلى أقرب نوع خط من الخطوط المتاحة‪ ،‬ومن أشهر أنواع‬
‫الخطوط التي أوصت دراسات التصميم في استخدامها خط ‪ Arial‬حجم ‪ 14‬للعناوين‪ ،‬أو خط ‪Verdana‬‬
‫حجم ‪ 12‬للمتن‪.‬‬

‫‪132‬‬
 ‫رابعا‪ :‬المحتويات الرسومية ‪:Graphical Content‬‬

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

‫خامسا‪ :‬تخطيط الصفحة ‪:Layout System‬‬

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

‫‪133‬‬
 ‫سادسا‪ :‬األلوان ‪:Colors‬‬

‫وهي من العناصر التي تؤثر في تشكيل االنطباع‬

‫عن الصفحة الرئيسية والموقع عموماً‪ ،‬لذلك يحتاج‬
‫المصمم إلى معرفة دالالت األلوان وتأثيراتها‬
‫النفسية والسلوكية على المستخدمين والقواعد العامة‬
‫المستخدمة في اختيار األلوان‪ ،‬والمتمثلة في‪:‬‬

‫اختيار األلوان البيضاء أو ذات الدرجات اللونية المنخفضة من األلوان األخرى للخلفيات واألرضيات‪.‬‬
‫‪ ‬واختيار عدد محدود من األلوان أو الدرجات اللونية للنصوص والعناوين والعناصر األخرى في‬
‫الصفحة‪ ،‬واستخدام األلوان المعبرة عن المضمون والمحتوى المعلوماتي الذي يقدمه الموقع‪.‬‬

‫سابعا‪ :‬الوسائط المتعددة ‪:Multimedia‬‬

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

‫‪134‬‬
 ‫الصور المتحركة‪ :‬ويشترك في إنشائها العديد من‬
‫البرامج التي سبق ذكرها‪ ،‬ويتم ذلك من خالل خلق‬
‫واإلطارات‪،‬‬ ‫والرسوميات‬ ‫الصور‬ ‫من‬ ‫سلسلة‬
‫وعرضها بشكل سريع لتعطي االنطباع بأنها‬
‫متحركة‪ ،‬ويستخدم هذا النوع من الصور في‬

‫اإلعالنات المتحركة وغيرها من المحتويات التي تحتاج إلى إضفاء نوع من الحركة والديناميكية عليها‪،‬‬
‫والتي بالمقابل سيضفي وجودها على الصفحة حركةً وايقاعاً سريعاً‪.‬‬

‫مقاطع الفيديو‪ :‬وتتمثل في مقاطع الفيديو التي تم‬

‫التقاطها‪ ،‬ومعالجتها وتخزينها وعرضها بصورة‬
‫رقمية من خالل مجموعة من البرامج التي تم‬
‫التعرض لها سابقاً‪ ،‬ويتم تبادل وعرض العديد‬

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

‫مقاطع الصوت‪ :‬ويؤثر استخدام األصوات في‬

‫الموقع اإللكتروني‪ ،‬إضافة إلى إضفاء الواقعية‬
‫واإلحساس بالحركة وزيادة فهم المحتوى النصي‪،‬‬
‫ويستخدم في الصفحة الرئيسية العديد من المؤثرات‬

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

‫النقل المباشر‪ :‬وهو عملية نقل الوسائط المتعددة‪،‬‬

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

‫السياسية أو الفنية‪ ،‬أو الرياضية الفورية والمباشرة‪ ،‬ويتمتع المستخدم بالقدرة على التحكم بها من خالل‬
‫تشغيلها أو إيقافها أو االنتقال إلى قناة أخرى‪ ،‬ومن ميزات هذا النقل‪ :‬الفورية وبدل انتظار التحميل‪،‬‬
‫وسهولة التعامل معها‪ ،‬واستقبال أكثر من بث في وقت واحد‪ ،‬ويتوفر لدى المستخدم وعلى اإلنترنت‬
‫العديد من البرامج التي تساعد على استقبال هذا البث مثل‪ Windows Media Player :‬و ‪Real‬‬
‫‪ Player‬و‪.Quick Time‬‬

‫العناصر التفاعلية‪ :‬وتشمل مجموعة األدوات‬

‫ٍ‬
‫اتصال‬ ‫التفاعلية التي يقدمها الموقع وتشكل قنوات‬
‫وتفاعل بين الموقع والمستخدم‪ ،‬كالتعليق على‬
‫المعلومات واألخبار‪ ،‬وطرح االستفتاءات‪ ،‬وتوفير‬
‫خاصية البحث في األرشيف‪ ،‬وغيرها من الخدمات‬
‫التي قد تمتد إلى مشاركة األفراد في إنتاج‬

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

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

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

‫‪137‬‬
 ‫الخالصة‬

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

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

‫‪138‬‬
 ‫المراجع‬
‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2002( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2005( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2010( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،6‬العدد ‪.11‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2010( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة‪ ،‬في إطار نظرية تمثيل المعلومات‪( ،‬دراسة شبه تجريبية)‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2002( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -6‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2007( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -7‬سالم تربان‪ ،‬ماجد‪ ،)2001( ،‬اإلنترنت والصحافة اإللكترونية‪ ،‬رؤية مستقبلية‪( ،‬ط‪ ،)1‬القاهرة‪،‬‬
‫الدار المصرية اللبنانية‪.‬‬
‫‪ -1‬رسمي موسى‪ ،‬انتصار‪ ،)2004( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪،‬‬
‫(ط‪ ،)1‬بغداد‪ ،‬مكتبة الذاكرة‪.‬‬
‫‪ -2‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2011( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة‪ ،‬تعد جزءاً من متطلبات الحصول‬
‫على الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪10- Beard, Jason, (2010), The Principals of Beautiful Web Design,‬‬
‫‪(2.Ed), Canada, Site Point Pty Ltd.‬‬

‫‪139‬‬
11- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM,
Dissertation Submitted in View of Obtaining a degree of Master
Science in Computer Science, Vrije Universiteit Brussel, Dep.of
Computer System.
12- Powell, Thomas, Web Design: The CompleteReference,(2.Ed), USA,
McGraw-Hill Co.

140
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬من أهم عناصر الصفحة الرئيسية‪ ،‬والتي من ضمنها‪ :‬التعليق على الموضوعات واالستفتاءات‪:‬‬
‫‪ .A‬العناصر التفاعلية‪.‬‬
‫‪ .B‬الوسائط المتعددة‪.‬‬
‫‪ .C‬المحتوى النصي‪.‬‬
‫‪ .D‬المحتوى الرسومي‪.‬‬

‫اإلجابة الصحيحة‪ A :‬العناصر التفاعلية‬

‫‪ .2‬من أماكن وضع أدوات اإلبحار والتجول على الصفحة الرئيسية‪:‬‬

‫‪ .A‬الجزء العلوي والسفلي فقط‪.‬‬
‫‪ .B‬الجزء العلوي‪ ،‬والجزء العلوي األيمن فقط‪.‬‬
‫‪ .C‬كل أجزاء الصفحة تقريباً‪.‬‬

‫اإلجابة الصحيحة‪ C :‬كل أجزاء الصفحة تقريباً‬

‫‪ .3‬يشتمل على األصوات والفيديو والنصوص‪ ،‬ومن العناصر البنائية المهمة‪:‬‬

‫‪ .A‬العناصر التفاعلية‪.‬‬
‫‪ .B‬المحتوى النصي‪.‬‬
‫‪ .C‬الوسائط المتعددة‪.‬‬

‫اإلجابة الصحيحة‪ C :‬الوسائط المتعددة‬

‫‪141‬‬
 ‫الوحدة التعليمية السابعة‬

‫مبادئ تصميم صفحة الويب‬

‫العناصر‪:‬‬

‫‪ -‬مقدمة ‪.‬‬
‫‪ -‬مبادئ تصميم صفحة الويب‪:‬‬
‫‪ ‬التوازن‪.‬‬
‫‪ ‬الوحدة‪.‬‬
‫‪ ‬الحركة ‪.‬‬
‫‪ ‬التباين‪.‬‬
‫‪ ‬المحاذاة ‪.‬‬
‫‪ ‬التناسب‪.‬‬
‫‪ ‬اإليقاع ‪.‬‬
‫خاتمة ‪.‬‬ ‫‪-‬‬

‫‪142‬‬
 ‫األهداف التعليمية‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ -1‬يحدد مبادئ تصميم صفحة الويب‬

‫‪ -2‬يشرح مبدأ التوازن‬
‫‪ -3‬يشرح مبدأ الوحدة‬
‫‪ -4‬يشرح مبدأ الحركة‬
‫‪ -5‬يشرح مبدأ التباين‬
‫‪ -6‬يشرح مبدأ المحاذاة‬
‫‪ -7‬يشرح مبدأ التناسب‬
‫‪ -8‬يشرح مبدأ اإليقاع‬

‫مبادئ التصميم – التوازن – التوازن التماثلي – التماثل الالتماثلي – التوازن‬ ‫الكلمات المفتاحية‪:‬‬
‫اإلشعاعي – التوازن الرأسي – التوازن األفقي – التوازن الرأسي األفقي – الوازن المتقارب – الوحدة –‬
‫التشابه – التقارب – التكرار – وحدة الموضوع – وحدة الصفحة – اللون – الخط – الحجم – الحركة –‬
‫أدوات اإلبحار – العناصر البنائية – االتجاه – المعدل – النوع – التباين – تباين األحجام – تباين‬
‫األلوان – تباين القيم – تباين األشكال – المحاذاة – المحاذاة األفقية – المحاذاة الرأسية – التناسب ‪-‬‬
‫اإليقاع‪.‬‬

‫‪143‬‬
 ‫أوال‪ :‬مقدمة‬

‫يتعامل مصمم المواقع اإللكترونية مع عناصر‬

‫التصميم المكونة للشكل المرئي للموقع‪ ،‬باعتبارها‬
‫مجموعة مترابطة من العناصر التي تؤدي من‬
‫خالل تنظيمها وترتيبها إلى زيادة فعالية وتأثير‬
‫محتوى هذا الموقع‪ ،‬ويعتمد بناء الترابط على‬

‫مجموعة من المبادئ واألسس التي يقصد بها مبادئ التصميم المتعلقة بالتأثيرات السيكولوجية الناجمة‬
‫عن وضع عناصر التصميم‪.‬‬

‫اتفق مصممو ومطورو المواقع اإللكترونية باالعتماد على مبادئ إخراج الصحف الورقية على أن هناك‬
‫أربعة مبادئ أساسية للتصميم اإللكتروني تتمثل في‪:‬‬

‫‪ ‬التوازن‪.‬‬

‫‪ ‬الوحدة‪.‬‬

‫‪ ‬التباين‪.‬‬

‫‪ ‬اإليقاع‪.‬‬

‫غير أن هناك مبادئ أخرى ذكرها المصممون مثل‪:‬‬

‫‪ ‬االتجاه والتكرار‪.‬‬

‫‪ ‬النسبة والتناغم‪.‬‬

‫‪ ‬التدرج والحركة‪.‬‬

‫‪ ‬السيطرة والمحاذاة والقرابة‪.‬‬

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

‫ثانيا‪ :‬مبادئ التصميم‬

‫يؤكد الباحثون أن تطبيق المبادئ األساسية‬

‫للتصميم يحكمها العديد من المعايير والضوابط‬
‫منها‪:‬‬

‫يمكن تطبيق مبدأين معاً أو أكثر من مبادئ‬ ‫‪-‬‬

‫التصميم في العمل الفني‪ ،‬فيمكن على‬
‫سبيل المثال تحقيق التباين مع التوازن‪،‬‬

‫ويمكن أيضاً تحقيق التكرار مع التوازن‪ ،‬ويمكن تحقيق التناغم مع كل من التباين والنسبة والتدرج‬
‫والحركة‪.‬‬

‫‪ -‬بعض المبادئ تتحقق على نطاق واسع في الصفحة مثل‪ :‬التوازن والوحدة‪ ،‬وبعض المبادئ تتحقق‬
‫على نطاق ضيق مثل التباين الذي قد يكون بين عنصرين قريبين‪.‬‬
‫‪ -‬يصعب الفصل بين مبادئ التصميم‪ ،‬فمبادئ التصميم تؤدي إلى بعضها البعض‪.‬‬

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

‫أوال‪ :‬التوازن ‪:Balance‬‬

‫وهو ليس مجرد اإلحساس بتوازن وتساوي عناصر‬

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

‫العناصر أو يكاد أي إعطاء مساحات الصفحة المختلفة الثقل أو القوة نفسيهما‪.‬‬

‫ويتحقق التوازن من خالل ثالثة أشكال هي التوازن التماثلي والتوازن الالتماثلي والتوازن اإلشعاعي‪:‬‬

‫أ‪ -‬التوازن التماثلي ‪ Symmetrical Balance‬أو التوازن الشكلي ‪:Formal Balance‬‬

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

‫‪146‬‬
‫في كل قسم‪ ،‬وتخطي المستخدم لبعض الموضوعات المعروضة‪ ،‬ويقترح الباحثون تطبيق هذا‬
‫المبدأ على الصفحات الداخلية؛ ألن المستخدم يدخلها بقصد البحث عن موضوعات محددة‪.‬‬

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

‫التوازن التقريبي ‪:Approximate Symmetry‬‬

‫يمكن تحقيق نوع من التوازن التماثلي يدعى التوازن التقريبي ‪ Approximate Symmetry‬وفيه‬
‫تكون أجزاء الصفحة متساوية تقريباً‪ ،‬وتكون األشكال مرتبة حول خط االرتكاز في الصفحة‪.‬‬

‫‪147‬‬
 ‫ب‪ -‬التوازن الالتماثلي ‪:Asymmetrical Balance‬‬

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

‫ج‪ -‬التوازن اإلشعاعي ‪:Radial Balance‬‬

‫وفي هذا النوع من التوازن هناك نقطة مركزية هي‬

‫بمثابة نواة اإلشعاع التي تأخذها العناصر البنائية‬
‫نقطة انطالق تدور حولها من زاوية‪ ،‬ومن زاوية‬
‫أخرى تعد هذه النقطة بمثابة نقطة جذب لبصر‬
‫المستخدم‪ ،‬ثم ينطلق منها حول بقية العناصر‬
‫البنائية‪ ،‬ويشبه التوازن اإلشعاعي حركة‬

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

‫ثانيا‪ :‬الوحدة ‪:Unity‬‬

‫تتحقق الوحدة باستخدام األساليب المختلفة التي‬

‫تجعل عناصر الصفحة تتفاعل مع بعضها لتعطي‬
‫اإلحساس باالنسجام والوحدة‪ ،‬فالصور والنصوص‬
‫التي بينها أشياء مشتركة مثل اللون تعطي‬
‫اإلحساس بمعنى واحد‪ ،‬ويحظى هذا المبدأ باهتمام‬
‫المدرسة الشكلية (‪ )Gestalt‬عند تصميم صفحات‬

‫الويب حيث ترى أن العناصر القريبة من بعضها البعض تؤدي إلى الوحدة‪ ،‬فوضع الصور مجاورة للنص‬
‫أو بالقرب منه تساعد في تفسير الرسالة وفهمها‪.‬‬

‫مبادئ تطبيق الوحدة‪:‬‬

‫يمكن تطبيق الوحدة من خالل تطبيق العديد من المبادئ مثل‪:‬‬

‫‪ -‬التشابه‪ :‬إذ يسهل إدراك األشياء المتشابهة من حيث اللون أو الخط أو الشكل على أنها مجموعة‬
‫واحدة‪ ،‬ويمكن تذكرها وفهمها بشكل أسرع‪.‬‬

‫‪149‬‬
‫‪ -‬التقارب‪ :‬وهي أبسط طريقة لخلق اإلحساس بوحدة مجموعة من العناصر أي وضعها بشكل‬
‫متقارب من بعضها‪ ،‬واستخدام الهوامش والعناوين القريبة من المتن‪ ،‬وجعلها تدرك على أنها وحدة‬
‫واحدة على الصفحة‪.‬‬
‫‪ -‬التكرار‪ :‬كتكرار األلوان واألشكال والنصوص‪ ،‬والعناصر األخرى ليؤكد اتجاه هذه العناصر وادراك‬
‫حركتها‪ ،‬وليعطي اإلحساس باالستم اررية‪ ،‬واالمتداد المرتبطة بالحركة‪.‬‬

‫أنواع الوحدة‪:‬‬

‫تنقسم الوحدة عادة إلى نوعين‪:‬‬

‫‪ -‬وحدة الموضوع‪ :‬ويقصد به جعل كل موضوع يظهر كأنه متفرد عن بقية الموضوعات‪ ،‬وذلك من‬
‫خالل تمييزه بسمة معينة قد تكون نوع الخط أو الشكل الذي يحتويه كأن يكون شكالً مربعاً أو‬
‫مستطيالً‪ ،‬أو لون نصوصه‪ ،‬أو أن تكون أرضياته مختلفة عن بقية الموضوعات الموجودة على‬
‫الصفحة‪.‬‬
‫‪ -‬وحدة الصفحة‪ :‬ويقصد بها تحقيق وحدة الصفحة ككل من خالل خلق وحدة تربط وحدات‬
‫الموضوعات الفرعية بعضها ببعض‪ ،‬وال تتعارض وحدة الموضوع مع وحدة الصفحة بل تؤكدها‪،‬‬

‫‪150‬‬
‫ويمكن أن تكون هناك وحدة عامة تربط بين وحدات الموضوعات مثل حجم الخط أو نوعه‪ ،‬وفي‬
‫الوقت نفسه يمكن أن تكون هناك وحدة الموضوع من خالل تمييزه بلون معين‪.‬‬

‫العناصر البنائية في تحقيق الوحدة‪:‬‬

‫ويمكن االعتماد على العديد من العناصر البنائية في تحقيق الوحدة عبر الصفحة‪ ،‬منها‪:‬‬

‫‪-‬اللون‪ :‬يستطيع اللون أن يخلق وحدة بصرية‬

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

‫‪ -‬الخط‪ :‬يمكن أن يحقق الوحدة بين عناصر‬

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

‫‪151‬‬
 ‫‪ -‬الحجم‪ :‬يقصد بالحجم هنا تثبيت بعض‬
‫أحجام الصور على الصفحة‪ ،‬وتثبيت بعض‬
‫أحجام الحروف‪ ،‬وتثبيت بعض أطوال‬
‫األعمدة على الصفحة‪ ،‬وتقديم مساحات‬
‫متقاربة لبعض الموضوعات‪.‬‬

‫‪ -‬الشكل‪ :‬يقصد به تقديم شكل متماثل سواء‬

‫أكان ذلك للصور أم النصوص أم األعمدة‪،‬‬
‫فيمكن أن نقدم الصور بشكل مربع أو مستطيل‬
‫أو دائري أو شبه دائري‪ ،‬كما يمكن أن تقدم‬
‫النصوص بشكل واحد كأن تكون بخط ‪Bold‬‬
‫أو مائل ‪.Italic‬‬

‫ثالثا‪ :‬الحركة ‪Movement‬‬

‫يقصد بالحركة الطريقة التي تتحرك بها عين المشاهد حول عناصر التصميم المرئي وخاللها‪ ،‬ولكي‬
‫يتمكن المصمم من تحريك عين المستخدم خالل صفحة الويب‪ ،‬عليه مراعاة االعتبارات التالية‪:‬‬

‫‪ -‬وضوح أدوات اإلبحار المتمثلة في الروابط‪.‬‬

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

‫‪153‬‬
 ‫خصائص الحركة في التصميم هي‪:‬‬

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

‫‪154‬‬
 ‫رابعا‪ :‬التباين ‪Contrast‬‬

‫ويعرف التباين بأنه التبادلية ‪ Alternatively‬بين‬

‫عناصر التصميم المختلفة مثل‪ :‬التبادل بين‬
‫اإلضاءة واإلظالم‪ ،‬والنعومة والخشونة‪ ،‬والدفء‬
‫والبرودة‪ ،‬والكبر والصغر‪ ،‬كما يعرف بأنه تجنب‬
‫وجود العناصر المتشابهة في الحجم واللون‬
‫والمساحة مجاورةً لبعضها البعض‪.‬‬

‫يساعد التباين في‪:‬‬

‫‪ ‬تسهيل القراءة‪.‬‬

‫‪ ‬إبراز مواد الصفحة‪ ،‬واضفاء الجاذبية عليها‪.‬‬

‫‪ ‬تنسيق المعلومات في الصفحة‪.‬‬

‫فالتباين بين العناوين والمقدمات والعناوين الفرعية والنصوص يساعد عين القارئ في انسيابية الرؤية‬
‫موضحاً المسالك التي يمكن أن تتوجه إليها العين عبر النص‪.‬‬

‫أشكال التباين‪:‬‬

‫يأخذ التباين مجموعة من األشكال منها‪:‬‬

‫‪ -‬التباين بين الشكل واألرضية‪ :‬يؤكد المصممون أن لألرضية هيئةً سالبة‪ ،‬وللشكل هيئة موجبة‪،‬‬
‫ويقوم التباين بينهما بشكل توفيقي ليجعل منهما شيئاً واحداً تدركه العين‪.‬‬
‫‪ -‬التباين بين األحجام‪ :‬ويحدث عن طريق تباين العناصر من النوع نفسه مثل‪ :‬تباين الصور‬
‫الصغيرة والكبيرة‪ ،‬وتباين الحروف الكبيرة والصغيرة‪ ،‬والتباين بين المساحات الكبيرة والصغيرة‪.‬‬
‫‪ -‬التباين بين القيم‪ :‬هو التباين النسبي بين اإلضاءة واإلظالم‪.‬‬

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

‫خامسا‪ :‬المحاذاة ‪:Alignment‬‬

‫يشير مصطلح المحاذاة إلى الطريقة التي تصطف بها عناصر التصميم خالل الصفحة لتحقيق الوحدة‬
‫البصرية‪ ،‬وتنقسم المحاذاة إلى نوعين هما‪:‬‬

‫‪ -‬المحاذاة األفقية ‪:Horizontal Alignment‬‬

‫تشمل محاذاة النصوص ناحية اليمين أو اليسار أو الوسط أو الضبط‪:‬‬
‫‪ ‬يعيب المحاذاة ناحية اليمين أو اليسار في اللغة اإلنجليزية والعربية عدم ضبط‬
‫نهايات الحروف‪ ،‬بيد أنها تتميز بعدم ترك مسافات بيضاء زائدة بين الكلمات‪.‬‬
‫‪ ‬يعيب محاذاة الوسط عدم ضبط بدايات ونهايات كل سطر على الجانبين ويميزه ترك‬
‫مسافات بيضاء‪.‬‬
‫‪ ‬يعيب محاذاة الضبط توسيع المسافات البيضاء بين الحروف ويميزه ضبط بدايات‬
‫الحروف ونهاياتها‪.‬‬

‫‪156‬‬
‫تشمل المحاذاة األفقية عالوةً على محاذاة النصوص محاذاة األشكال المرئية من صور‬
‫ورسوم‪ ،‬وفي هذا تطبيق لمبدأ الحركة مرة أخرى‪.‬‬
‫‪ -‬المحاذاة الرأسية ‪ :Vertical Alignment‬على غرار ضبط النصوص واألشكال المرئية‬
‫باالتجاه األفقي تلجأ الصحف أيضاً إلى االتجاه الرأسي في تقديم بعض أشكالها المرئية‪.‬‬

‫سادسا‪ :‬التناسب ‪:Proportion‬‬

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

‫‪ -‬التناسب في حجم حروف النصوص‪ :‬يقصد‬

‫به تناسب حروف المتن مع المقدمة مع‬
‫العناوين الفرعية‪ ،‬وقد وضع المصممون‬
‫قاعدةً لتناسب النصوص وهي زيادة حجم‬
‫العناوين عن المقدمات بمقدار نقطتين‪،‬‬
‫وزيادة المقدمات بمقدار نقطتين عن حجم‬
‫المتن‪ ،‬لتحقيق انسيابية الرؤية‬

‫‪ -‬التناسب في حجم األعمدة‪ :‬يقصد به‬

‫تناسب األعمدة الكبيرة مع الصغيرة‪،‬‬
‫وتناسب المواد التي تحتوي عليه‪ ،‬فال‬
‫يجوز على سبيل المثال أن يكون هناك‬
‫عمود مكتظ بالنصوص والصور وآخر‬
‫فارغ‪.‬‬

‫‪157‬‬
 ‫‪ -‬التناسب في مساحة الصور‪ :‬يجب‬
‫أن تتناسب أحجام الصور مع‬
‫بعضها البعض من زاوية‪ ،‬ومع‬
‫الموضوع الذي تعرض له من زاوية‬
‫أخرى‪ ،‬فال يصح أن تكون هناك‬
‫صور كبيرة الحجم مع موضوع‬
‫صغير جداً‪ ،‬والعكس صحيح أيضاً‪.‬‬

‫سابعا‪ :‬اإليقاع ‪:Rhythm‬‬

‫يعرف اإليقاع بأنه تكرار عناصر التصميم مثل‬

‫الخطوط واألشكال واأللوان والفراغات لكي تعطي‬
‫التصميم الحيوية‪ ،‬ويستخدم المصمم هذا النوع‬
‫عندما يريد أن ينتقل القارئ من عنصر إلى آخر‬
‫على الصفحة‪ ،‬وقد استعار فن اإلخراج الصحفي‬
‫هذا المبدأ مثله مثل سائر الفنون البصرية من‬
‫الفنون الموسيقية‪ ،‬وهناك شبه تقارب بين مبدأي‬

‫الوحدة واإليقاع يتمثل في تكرار بعض عناصر التصميم على الصفحة‪ ،‬لكن بشكل متوال على عكس‬

‫الوحدة‪ ،‬ويمكن تحقيق اإليقاع في التصميم عادةً بمحاذاة الصور األفقية والرأسية‪ ،‬فاإليقاع يتحقق عادةً‬
‫في الصور المتسلسلة متماثلة المساحة والشكل واللون‪.‬‬

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

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

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

‫‪159‬‬
 ‫الخالصة‬

‫يعتمد تصميم صفحة الويب وتصميم الموقع اإللكتروني وترتيب العناصر البنائية لهذه الصفحة على‬
‫مجموعة من األسس والمبادئ التي تساعد على توظيف هذه العناصر بشكل يحقق الجاذبية والتصفح‬
‫األسهل للمستخدم‪.‬‬

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

‫‪160‬‬
 ‫المراجع‬
‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2002( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2005( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2010( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد ‪ ،6‬العدد ‪.18‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2010( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة‪ ،‬في إطار نظرية تمثيل المعلومات‪( ،‬دراسة شبه تجريبية)‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2002( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -6‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2007( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -7‬سالم تربان‪ ،‬ماجد‪ ،)2008( ،‬اإلنترنت والصحافة اإللكترونية‪ ،‬رؤية مستقبلية‪( ،‬ط‪ ،)1‬القاهرة‪،‬‬
‫الدار المصرية اللبنانية‪.‬‬
‫‪ -8‬رسمي موسى‪ ،‬انتصار‪ ،)2004( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪،‬‬
‫(ط‪ ،)1‬بغداد‪ ،‬مكتبة الذاكرة‪.‬‬
‫‪ -2‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2011( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة‪ ،‬تعد جزءاً من متطلبات الحصول‬
‫على الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪10- Beard, Jason, (2010), The Principals of Beautiful Web Design,‬‬
‫‪(2.Ed), Canada, Site Point Pty Ltd.‬‬

‫‪161‬‬
11- Jarrar, Suba, (2002)، Web Design Guidelines, For WSDM,
Dissertation Submitted in View of Obtaining a degree of Master
Science in Computer Science, Vrije Universiteit Brussel, Dep.of
Computer System.
12- Powell, Thomas, Web Design: The Complete Reference, (2.Ed),
USA, McGraw-Hill Co.

162
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬من أهم مبادئ تصميم صفحة الويب والذي يعني إعطاء مساحات الصفحة الثقل والوزن‬
‫نفسيهما‪:‬‬
‫‪ .A‬التباين‪.‬‬
‫‪ .B‬التوازن‪.‬‬
‫‪ .C‬الوحدة‪.‬‬
‫‪ .D‬التكرار‪.‬‬

‫اإلجابة الصحيحة‪ B :‬التوازن‬

‫‪ .2‬من أنواع مبدأ التوازن‪:‬‬

‫‪ .A‬التوازن المتماثل‪.‬‬
‫‪ .B‬التوازن الالمتماثل‪.‬‬
‫‪ .C‬التوازن اإلشعاعي‪.‬‬
‫‪ A .D‬و‪ B‬صحيحان‪.‬‬
‫‪ .E‬كل ما سبق صحيح‪.‬‬

‫اإلجابة الصحيحة‪ E :‬كل ما سبق صحيح‬

‫‪163‬‬
 ‫‪ .3‬يأخذ التناسب في الصفحة عادةً أشكاالً عدة منها‪:‬‬
‫‪ .A‬التناسب في حجم حروف النصوص وفي حجم األعمدة فقط‪.‬‬
‫‪ .B‬التناسب في حجم حروف النصوص‪ ،‬وفي حجم األعمدة‪ ،‬وفي حجم الصور‪.‬‬

‫اإلجابة الصحيحة‪ B :‬التناسب في حجم حروف النصوص‪ ،‬وفي حجم األعمدة‪ ،‬وفي حجم‬
‫الصور‬

‫‪164‬‬
 ‫الوحدة التعليمية الثامنة‬

‫تصميم الصحيفة اإللكترونية‬

‫العناصر‪:‬‬

‫‪ ‬مقدمة‪.‬‬
‫‪ ‬مفهوم الصحافة اإللكترونية‪.‬‬
‫‪ ‬خصائص الصحافة اإللكترونية ‪.‬‬
‫‪ ‬تصميم الصحف اإللكترونية‪.‬‬
‫‪ ‬أسس اإلخراج الصحفي‪:‬‬
‫‪ ‬األسس الفيزيولوجية‪.‬‬
‫‪ ‬األسس الصحفية‪.‬‬
‫‪ ‬األسس الفنية‪.‬‬
‫‪ ‬األسس النفسية ‪.‬‬
‫‪ ‬خاتمة ‪.‬‬

‫‪165‬‬
 ‫األهداف التعليمية‪:‬‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ .1‬يحدد مفهوم الصحافة اإللكترونية‪.‬‬

‫‪ .2‬يشرح شروط بناء مواقع الصحف‪.‬‬
‫‪ .3‬يشرح خصائص الصحافة اإللكترونية‪.‬‬
‫‪ .4‬يحدد كيفية تصميم الصحف اإللكترونية‪.‬‬
‫‪ .5‬يشرح األسس الفيزيولوجية لإلخراج الصحفي‪.‬‬
‫‪ .6‬يشرح األسس الصحفية لإلخراج الصحفي‪.‬‬
‫‪ .7‬يشرح األسس الفنية لإلخراج الصحفي‪.‬‬
‫‪ .8‬يشرح األسس النفسية لإلخراج الصحفي‪.‬‬

‫الكلمات المفتاحية‪:‬‬

‫الصحافة اإللكترونية – شبكة الويب – لغات البرمجة – أدوات التجول – برامج التصفح – الفنون‬
‫الصحفية – عرض الشرائح المصورة – عرض الشرائح مع السرد – القصص المسموعة – التحرير‬
‫اإللكتروني – قالب التصميم – قالب المقاطع – قالب الساعة الرملية – الصحف اإللكترونية الكاملة –‬
‫النسخ اإللكترونية – مواقع مرتبطة بوسائل اإلعالم – مواقع إرشادية – مواقع إعالمية قائمة على التعليق‬
‫– مواقع المناقشات – الوسائط المتعددة – النصوص التشعبية – التفاعلية – اآلنية – األرشيف‬
‫اإللكتروني – اإلخراج الصحفي – األسس النفسية – األسس الصحفية – األسس الفيزيولوجية – األسس‬
‫الفنية‪.‬‬

‫‪166‬‬
 ‫أول‪ :‬مقدمة‬

‫تغيرت صورة الوسائل اإلعالمية بعد ظهور‬

‫اإلنترنت‪ ،‬ولعبت هذه الشبكة في البداية دور‬
‫الوسيط االتصالي الذي نقل خدمة الوسائل‬
‫اإلعالمية الجماهيرية التقليدية‪ ،‬فظهرت من خاللها‬
‫العديد من مواقع الصحف الورقية المطبوعة‪،‬‬

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

‫‪167‬‬
 ‫ثانيا‪ :‬مفهوم الصحافة اإللكترونية‬

‫تضم اإلنترنت اآلن كل أنواع التطبيقات اإلعالمية اإللكترونية من‬

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

‫ويذكر الباحثون أن الصحافة اإللكترونية ظلت حتى العام ‪ 2222‬قاصرة عن استخدام أساليب وتقنيات‬
‫النشر اإللكتروني على اإلنترنت‪ ،‬فكانت مجرد نسخ إلكترونية من المحتوى المعلوماتي للصحف الورقية‪،‬‬
‫على مستوى المضمون‪ ،‬وكانت مجرد صورة شكلية ‪ GIF‬من بعض المواد الصحيفة الورقية‪ ،‬أو شكال‬
‫محوال ‪ PDF‬من النصوص والصور واألشكال والصفحات من الصحيفة الورقية على مستوى الشكل‪ ،‬إلى‬
‫أن ظهرت خدمة الويب‪ ،‬وغيرت الصورة المقدمة للمواقع والصحف اإللكترونية بشكل تام‪.‬‬

‫تعرف الصحيفة اإللكترونية "بأنها كل إصدار إلكتروني فوري يتم نشره عبر الويب‪ ،‬صمم باستخدام إحدى‬
‫لغات الترميز‪ ،‬يقوم المستخدم بتصفحه عبر شاشة الحاسب اآللي‪ ،‬باستخدام برامج التصفح‪ ،‬ويستخدم‬
‫هذا اإلصدار كل الفنون الصحفية وقوالب التحرير التقليدية والمستحدثة"‪ ،‬ويشير هذا التعريف إلى‬
‫مجموعة المحددات التالية‪:‬‬

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

‫‪168‬‬
‫المستحدثة للتحرير اإللكتروني والتي تميزها عن المواقع الخدمية أو التجارية أو الحكومية‪،‬‬
‫وما شابه ذلك‪.‬‬
‫‪ ‬المواقع التي تحوي كل آليات التجول واإلبحار‪ ،‬واألدوات التفاعلية‪ ،‬واألدوات التي تمكن‬
‫المستخدم ليس فقط من قراءة األخبار‪ ،‬وانما إضافة المعلومات‪ ،‬والغاء الوساطة بينه وبين‬
‫الوسيلة‪ ،‬أي العمل بشعار الويب‪ :‬اق أر واكتب ‪.Read & Write Medium‬‬

‫‪ -2‬كما يشير هذا التعريف إلى أن هذه الصحف تعتمد البث على شبكة الويب‪ ،‬أي يمكن استبعاد‬
‫كل ما هو خارجها‪ ،‬كخدمات التليتكست‪ ،‬والصحف التي يتم تخزينها على أقراص مدمجة ‪.CD‬‬

‫‪ -3‬يستخدم في ترميز وانشاء هذه الصحف إحدى لغات البرمجة والترميز كلغة الـ ‪ ،HTML‬أو‬
‫‪ ،XML‬مما يسمح للقارئ استخدامها وتصفحها‪ ،‬ال مجرد التعرض لها‪.‬‬
‫‪ -4‬تتيح هذه الصحف لمستخدميها التجول عبر صفحاتها‪ ،‬والوصول إلى محتوياتها باستخدام أدوات‬
‫التجول واإلبحار المختلفة‪ ،‬كما تتيح له استخدام التطبيقات التفاعلية التي تمكنه من التواصل‬
‫المباشر‪ ،‬واالستخدام الفعال مع القائم باالتصال في هذه الصحيفة‪.‬‬
‫‪ -5‬يتم التصفح باستخدام العديد من برامج التصفح التي تمكن المستخدم من استعراض الملفات‬
‫النصية‪ ،‬والمحتوى المرئي من هذه الصحيفة‪.‬‬
‫‪ -6‬أهم ما يميز هذه الصحيفة‪:‬‬
‫‪ ‬استخدام الفنون الصحفية التقليدية كاألخبار والتحقيقات والحوارات‪.‬‬
‫‪ ‬واستخدام الفنون الصحفية المستحدثة مثل‪:‬‬
‫‪ o‬عرض الشرائح المصورة ‪ Slide Shows‬حول حدث من خالل توظيف الصور‬
‫المتغيرة والعناصر الغرافيكية‪.‬‬
‫‪ o‬عرض الشرائح بمرافقة السرد ‪ ،Narrated Slideshow‬والذي يقدم عرضا متكامال‬
‫للقصص اإلخبارية بمرافقة التعليقات المعبرة بما يشبه البرامج الوثائقية أو القصص‬
‫المسموعة ‪ Audio Stories‬إلضافة معان جديدة على القصص اإلخبارية‪.‬‬

‫‪169‬‬
‫‪ o‬استخدام الوسائل المتعددة التفاعلية ‪ Interactive Multimedia‬لتقديم مضامين‬
‫معلوماتية واخبارية متضمنة العديد من العناصر‪ ،‬كالصور والتعليقات والنصوص‬
‫والفيديو‪.‬‬
‫‪ o‬عرض الوثائق أو النسخ األصلية ‪ ،Transcripts‬كتقديم الحوارات والمقابالت‬
‫األصلية‪.‬‬
‫‪ -7‬كما يعتمد هذا النوع من الصحافة على قوالب ومدارس مستحدثة في التحرير اإللكتروني‪ ،‬سواء‬
‫في كتابة األخبار أم إجراء الحوارات والتحقيقات مثل‪:‬‬
‫‪ ‬قالب التصميم ‪ Storyboard‬الذي يسمح بإدخال الصوت والصورة مع التحقيق‬
‫الصحفي‪.‬‬
‫‪ ‬قالب المقاطع ‪ Section Technique‬الذي يناسب التحقيقات الطويلة والمركبة‪.‬‬
‫‪ ‬قالب الساعة الرملية الذي يناسب القصص اإلخبارية التي تحوي الكثير من العناصر‬
‫والتطورات المهمة‪.‬‬
‫وغيرها من الفنون الصحفية اإللكترونية التي أصبح االعتماد عليها أم ار ضروريا يمليه شكل‬
‫العرض المستحدث في هذه الوسائل‪ ،‬وحجم المعلومات المتوافرة فيها‪ ،‬وحاجة المستخدم إلى‬
‫الحصول على كم أكبر من المعلومات بشكل مختلف ومتطور يتناسب وهذه الوسيلة‪.‬‬

‫ثالثا‪ :‬أنواع الصحافة اإللكترونية‬

‫يصنف الباحثون الصحف اإللكترونية حسب النوع إلى نوعين رئيسين هما‪:‬‬

‫‪-1‬صحف إلكترونية كاملة‪ :‬تعرض على اإلنترنت‪ ،‬واما أن تكون تابعة لمؤسسات إعالمية أو‬

‫ال‪.‬‬

‫‪-2‬نسخ إلكترونية‪ :‬تعرض صو ار أو مواد من بعض محتويات الصحف الورقية األصلية‪ ،‬أو تقدم‬

‫صورة ‪ PDF‬عن هذه الصحف‪.‬‬

‫يصنف الباحثون الصحف اإللكترونية حسب تفاعلها مع المستخدم‪ ،‬ومنها‪:‬‬

‫‪170‬‬
 ‫‪ -1‬المواقع المرتبطة بالوسائل اإلعالمية‪ :‬لكنها تضيق من حجم مشاركة الجمهور معها‪.‬‬

‫‪ -2‬المواقع اإلرشادية‪ :‬وهي المواقع التي ترتب وتصنف محتوياتها المعلوماتية‪ ،‬وتوظف محركات‬

‫البحث للوصول إلى مصادر المعلومات‪ ،‬مثل موقع ‪.Yahoo‬‬

‫‪ -3‬المواقع اإلعالمية القائمة على التعليق‪ :‬التي تتيح للمستخدم مناقشة المعلومات‬

‫المعروضة في وسائل اإلعالم‪ ،‬وينتج مضمون هذه المواقع صحفيون واعالميون متخصصون‪،‬‬
‫مثل موقع ‪ Media Channel‬و‪.Freedom Forum‬‬

‫‪ -4‬مواقع المناقشات والمشاركات‪ :‬وهو االتجاه الذي تتبناه العديد من الصحف اإللكترونية‪،‬‬

‫والتي تسمح لمستخدميها بمشاركة عالية‪ ،‬وتحكم أكبر بالمضمون المقدم‪.‬‬

‫رابعا‪ :‬خصائص الصحافة اإللكترونية‪:‬‬

‫تتميز الصحافة اإللكترونية‪ ،‬كما دلت على ذلك الدراسات واألبحاث بالعديد من السمات والخصائص التي‬
‫تجعلها تختلف اختالفا كبي ار عن غيرها من الوسائل اإلعالمية الورقية وغير الورقية‪ ،‬ومن هذه‬
‫الخصائص‪:‬‬

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

‫‪171‬‬
‫‪ -2‬كما تستفيد من فكرة استخدام الويب للنصوص التشعبية ‪ Hypertext‬التي تعد نظاما متصال من‬
‫الوحدات المعلوماتية المنفصلة‪ ،‬والتي تستخدم لربط المستخدم بخلفيات معرفية إضافية‪ ،‬أو‬
‫معلومات متصلة ومرتبطة بالمعلومات داخل صفحة الويب وخارجها‪.‬‬

‫‪ -3‬وتوفر هذه الصحافة قد ار كبي ار من التفاعلية ‪ Interactivity‬من خالل زيادة الروابط التشعبية‪،‬‬
‫لزيادة خيارات المستخدم للتجول‪ ،‬وتوفير‬
‫الوقت والجهد عليه من خالل التواصل‬
‫والتفاعل والرد على طلبات واستفسارات‬
‫المستخدم‪ ،‬ومن خالل تسهيل االتصال‬
‫مع‬ ‫المتزامن‬ ‫وغير‬ ‫المتزامن‬ ‫المباشر‬
‫الصحيفة‪ ،‬ومن خالل تسهيل‬
‫إضافة المعلومات من قبل المستخدم لرفع درجة المشاركة‪ ،‬أو من خالل وضع نظام للمراقبة‬
‫واحصاء عدد الزوار للتمكن من الوقوف على حجم االستخدام‪ ،‬كل ذلك للمساعدة على رفع‬
‫معدالت االستيعاب والفهم لدى المستخدمين‪.‬‬
‫‪ -4‬اآلنية ‪ :Immediacy‬وهي من أبرز ميزات الصحيفة اإللكترونية‪ ،‬إذ تعتمد على نشر المعلومات‬
‫والمضامين اإلخبارية‪ ،‬فيقوم المحرر بتحديث مادته اإلخبارية بكل جديد عندما يطرأ‪ ،‬مما يفعل‬
‫من خدمة األخبار العاجلة‪.‬‬

‫‪172‬‬
‫‪ -5‬األرشيف اإللكتروني‪ :‬ويشمل كل أشكال المعلومات والصور‪ ،‬والمقاطع الصوتية‪ ،‬ومقاطع‬
‫الفيديو‪ ،‬وغيرها من المواد التي تتيحها الصحف لمستخدميها بشكل سهل عبر قاعدة بياناتها‪،‬‬
‫والتي تتسع لكم هائل من الموضوعات‪.‬‬

‫خامسا‪ :‬تصميم الصحف اإللكترونية‪:‬‬

‫يخلط مخرجو الصحف واألكاديميون بين مصطلحين‪ :‬تصميم الصحف واإلخراج الصحفي‪.‬‬

‫ويعرفون اإلخراج الصحفي على أنه مجموعة العمليات الفنية التي تساعد على خروج الصحيفة ونشرها‪،‬‬
‫أو هو عملية توزيع الوحدات التيبوغرافية فوق مساحة الصفحة وفقا لخطط وأسس معينة‪ ،‬وقد يطلقون‬
‫عليه تصميم الصفحة ‪ ،Newspaper Design‬أو توضيب الصفحة ‪ ،Newspaper Layout‬أما‬
‫الكتابات الغربية في هذا المجال فتستخدم تعبير (تصميم) الصفحة وهندستها باعتبار أن اإلخراج عملية‬
‫تصميمية‪ ،‬ويعدون أن اإلخراج عملية تصميم مركبة تتم على مرحلتين متعاقبتين ومتالزمتين تقريبا‪:‬‬

‫‪173‬‬
‫‪ -1‬المرحلة األولى طويلة المدى‪ :‬وتتضمن وضع التصميم األساسي للصحيفة ‪،Basic Design‬‬
‫والذي يحدد هويتها‪ ،‬ويرسم مالمحها‪ ،‬ويتميز بالثبات النسبي‪ ،‬فال يتغير إال خالل فت ارت زمنية‬
‫طويلة‪.‬‬
‫‪ -2‬المرحلة الثانية قصيرة المدى‪ :‬يتم فيها وضع التصميم المتغير للصحيفة دوريا‪ ،‬يوميا أو أسبوعيا‪،‬‬
‫بما يتفق مع ترتيب وتوزيع المواد التحريرية‪ ،‬والعناصر التيبوغرافية‪ ،‬وفقا ألحد األساليب‬
‫والمدارس اإلخراجية المعروفة‪.‬‬

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

‫‪ ‬العناصر البنائية التيبوغرافية التقليدية‪ :‬من نصوص وخطوط‬

‫وعناوين وفواصل وجداول‪.‬‬
‫‪ ‬العناصر البنائية الغرافيكية‪ :‬الرسوم والصور واأللوان‪.‬‬
‫‪ ‬العناصر البنائية التكنولوجية‪ :‬الوسائط المتعددة والنص‬
‫المتشعب‪ ،‬ويعتمد إخراجها وتصميمها على مجموعة من‬
‫األسس التي يرتكز بعضها على اإلدراك البصري‪ ،‬ومنها ما‬
‫يعتمد على التركيبة النفسية للمستخدم‪ ،‬ومنها أسس صحفية‬
‫خاصة بالقيم الخبرية‪ ،‬وأخرى فنية تهتم بطريقة عرض المادة‬
‫الصحفية وشكلها‪.‬‬

‫‪174‬‬
 ‫سادسا‪ :‬أسس اإلخراج الصحفي‬

‫أ‪ -‬األسس الفيزيولوجية‪:‬‬

‫تعتمد األسس الفيزيولوجية على االهتمام بدراسة العين باعتبارها أداة القراءة‪ ،‬ويهتم المخرج الصحفي‬
‫بالمبادئ التشريحية لهذه األداة‪ ،‬وأهم الوظائف التي تؤديها حتى يستطيع أن يوفر للمستخدم عملية القراءة‬

‫بوضوح وهدوء مع مراعاة قدرة العين على القراءة‬

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

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

‫ويعد تيسير عملية القراءة من األهداف الرئيسة لإلخراج الصحفي‪ ،‬وذلك‬

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

‫‪175‬‬
 ‫وتتطلب عملية تحريك عين المشاهد خالل صفحة الويب مراعاة مجموعة من االعتبارات أهمها‪:‬‬

‫‪ -1‬ضرورة ترتيب العناصر المتشابهة بطريقة متدرجة‪.‬‬

‫‪ -2‬ضرورة وضوح أدوات اإلبحار المتمثلة في الروابط‪.‬‬
‫ضرورة ترتيب العناصر البنائية على الصفحة حتى ال تتحرك (العين) حركة عشوائية‪.‬‬ ‫‪-3‬‬

‫ب‪ -‬األسس الصحفية‪:‬‬

‫الصحيفة (اإللكترونية وغير اإللكترونية) هي شكل‬
‫ومضمون‪ ،‬أو بتعبير آخر مظهر ومحتوى‪ ،‬ولكي‬
‫يكتمل بناء الصحيفة وتؤدي وظيفتها على أكمل وجه‬
‫يجب أن يهتم المصمم بهذين الركنين‪ ،‬الشكل‬
‫والمحتوى‪ ،‬وقد ينصرف المستخدمون عن الصحف‬

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

‫ج‪ -‬األسس الفنية‪:‬‬

‫إن اإلخراج الصحفي الحديث ينظر إلى الموقع أو‬

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

‫‪176‬‬
‫العناصر البنائية منسقة بشكل جميل‪ ،‬مؤلفة معا وحدة متكاملة تجذب القارئ‪ ،‬والتكوين الفني للصفحة له‬
‫خصائص ال بد من توافرها كالتوازن واإليقاع والوحدة والتباين‪.‬‬

‫د‪ -‬األسس النفسية‪:‬‬

‫تتعلق هذه األسس بالمستخدم ذاته من حيث‬

‫التركيب النفسي والنضج العقلي الذي تتحكم فيه‬
‫متغيرات منها‪:‬‬

‫‪-1‬الفئة العمرية للمستخدم‪ :‬فالمستخدمون‬

‫الشباب يفضلون التصميم الحيوي المتجدد‬
‫دائما‪ ،‬شكال ومضمونا‪ ،‬أما كبار السن‬

‫فيفضلون اإلخراج والتصميم التقليدي المحافظ‪ ،‬ويرون أن اإلخراج العمودي أكبر دليل على‬
‫الوقار‪ ،‬أما األطفال فيفضلون الصور واأللوان‪.‬‬
‫‪ -2‬جنس المستخدم‪ :‬تفرق األسس النفسية لإلخراج الصحفي بين الذكور واإلناث‪ ،‬والقاعدة النفسية‬
‫تنصح باختيار ما يعبر عن الرجل إذا كان موجها إلى الجنسين‪ ،‬وابراز النواحي النسائية في‬
‫المضامين الموجهة للنساء‪ ،‬واالهتمام بالنواحي العاطفية عند المرأة كاألمومة واألسرة‪.‬‬
‫‪ -3‬عادات القراءة أو التصفح‪ :‬يختلف المستخدمون من حيث أساليبهم في القراءة والتصفح‪ ،‬ويفضل‬
‫البعض قراءة العناوين‪ ،‬واختيار ما يهمه من األخبار ليقرأها‪ ،‬ومنهم من يفضل قراءة مقدمات‬
‫األخبار‪ ،‬بينما يركز آخرون على النواحي األدبية والفنية‪ ،‬وعلى المخرج أن يحصل على‬
‫المعلومات الكافية عن عادات وأساليب التصفح‪ ،‬حتى يلبي لهؤالء جميعا ما يتناسب مع عاداتهم‬
‫وحاجاتهم‪.‬‬
‫‪ -4‬ذوق القارئ وعقليته وأحيانا تعليمه‪ :‬دلت الدراسات على أن المستخدمين األعلى تعليما واألكثر‬
‫ثقافة ال يهتمون كثي ار بالعناوين العريضة واأللوان وكثرة الصور‪ ،‬بل يهتمون أكثر بالمضامين‬
‫واألفكار المطروحة والمعلومات‪ ،‬وهذا ما يدعو المخرج إلى العمل على إيجاد التوازن المطلوب‬
‫بين األسلوب اإلخراجي الجذاب‪ ،‬والمحتوى المعلوماتي العميق‪.‬‬

‫‪177‬‬
 ‫‪ -5‬التأثير النفسي لأللوان‪ :‬وهو عامل مهم‪ ،‬وقد سبق الحديث عنه في وحدات سابقة‪.‬‬

‫وفي هذا اإلطار ال بد من أن يضع مخرج الصحيفة في االعتبار دراسة الجمهور من الناحية النفسية‬
‫والتعرف على السمات أو األمزجة النفسية لكل فئة من فئات الجمهور ونوعيته‪ ،‬ومضمون المادة‬
‫التحريرية التي تدخل في دائرة اهتمام كل فئة‪.‬‬

‫والتركيب النفسي لجمهور القراء‪ ،‬ليس فقط هو الذي يتحكم في أمزجة القراء ويحدد مجاالت اهتمامهم‪،‬‬
‫وانما أيضا درجة النضج العقلي التي تمثل جانبا مهما لتكوين اتجاهات القراء واهتمامهم‪ ،‬ويتحكم في‬
‫درجة النضج العقلي مجموعة من المتغيرات من أهمها السن والجنس والعادات والتقاليد‪.‬‬

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

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

‫‪-1‬المزج بين المحتوى والشكل عند تكوين الموضوع أو الفكرة‪ ،‬ويتم هذا بتعاون المحرر مع المصمم‬
‫في إنشاء التصميم الذي يساعد على سرعة وسهولة التصفح‪.‬‬
‫‪ -2‬يجب أن يظهر التصميم بصورة واضحة وسريعة للمستخدم بحيث يتضمن خريطة للمحتوى في‬
‫شكل رسوميات أو عناوين تساعد المستخدم في التحرك والتنقل بين الصفحات‪ ،‬ويتحقق ذلك من‬
‫خالل مهارة كتابة العناوين الرئيسية والفرعية‪ ،‬وتحقيق الروابط بين األجزاء والمقاطع أو‬
‫الصفحات مع عدم تجزئتها في الصفحة الواحدة‪ ،‬واستخدام أسلوب ثابت للكتابة في األجزاء‬
‫والصفحات المرتبطة‪.‬‬
‫‪ -3‬تصميم المحتوى المعلوماتي على شكل أعمدة حتى ال يؤدي إلى إجهاد العين في تتبع السطور‬
‫الطويلة‪ ،‬ولتوفير مساحات بيضاء تخفف من هذا اإلجهاد‪ ،‬ويذكر الباحثون أن السطر يجب أن‬
‫يتراوح ما بين ‪ 42‬و‪ 62‬حرفا بحيث يتراوح حجمه بين ‪ 12‬إلى ‪ 14‬بنطا‪ ،‬مع تجنب الكثافة‬
‫السوداء‪ ،‬والخطوط المائلة‪.‬‬
‫‪ -4‬وضع القوائم األفقية والرأسية‪ ،‬وتضمينها عناوين مركزة‪ ،‬وتضمين النصوص كلمات مفتاحية‬
‫مميزة‪ ،‬وعناوين دالة‪ ،‬وكتل قصيرة من النص‪.‬‬
‫‪ -5‬تجنب العناصر الوامضة والمتحركة ألنها تشتت انتباه المستخدم‪ ،‬وتبطئ من عملية حصوله على‬
‫المعلومات‪.‬‬
‫‪ -6‬استخدام الخصائص التيبوغرافية المختلفة لعرض النص على الشاشة‪ ،‬كاستخدام األلوان المعبرة‪،‬‬
‫والخطوط الواضحة والبارزة‪.‬‬
‫‪ -7‬التأكد في أثناء عملية التصميم أن أشكال الحروف المستخدمة متوافرة لدى المستخدم بالتركيز‬
‫على أنواع الخطوط األكثر شيوعا‪.‬‬

‫‪179‬‬
‫‪ -8‬الحد من استخدام األرضيات المنقوشة أو المزركشة‪ ،‬والصور والعناصر الغرافيكية التي تبطئ‬
‫من عملية تحميل صفحة الصحيفة اإللكترونية‪ ،‬كما يجب أن يقلل من طولها‪ ،‬وال يمدها على‬
‫أكثر من شاشة‪.‬‬
‫‪ -9‬يؤكد ‪ Jackob Nielson‬أن استخدام اإلطارات في عرض المحتوى اإلعالمي يعيق عملية‬
‫الطباعة والتصفح‪ ،‬ويرى ضرورة استخدامها بشكل معقول‪ ،‬والسيما أن المتصفحات الحديثة قد‬
‫حلت هذه اإلشكاليات‪ ،‬وبالتالي يمكن االستفادة من مزاياها في إبراز المعلومات‪ ،‬والفصل بينها‬
‫أحيانا‪.‬‬

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

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

‫‪181‬‬
 ‫الخالصة‬

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

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

‫‪182‬‬
 ‫المراجع‬
‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2229( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2225( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2212( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد‪ ،6:‬العدد‪.18:‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2212( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة في إطار نظرية تمثيل المعلومات‪ ،‬دراسة شبه تجريبية‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2229( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -6‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2227( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -7‬سالم تربان‪ ،‬ماجد‪ ،)2228( ،‬اإلنترنت والصحافة اإللكترونية‪ ،‬رؤية مستقبلية‪( ،‬ط‪ ،)1‬القاهرة‪،‬‬
‫الدار المصرية اللبنانية‪.‬‬
‫‪ -8‬رسمي موسى‪ ،‬انتصار‪ ،)2224( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪،‬‬
‫(ط‪ ،)1‬بغداد‪ ،‬مكتبة الذاكرة‪.‬‬
‫‪ -9‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2211( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة تعد جزءا من متطلبات الحصول على‬
‫الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪10- Beaird, Jason, (2010), The Principals of Beautiful Web Design,‬‬
‫‪(2.Ed), Canada, Site Point Pty Ltd.‬‬

‫‪183‬‬
 11- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM,
Dissertation Submitted in View of Obtaining a degree of Master
Science in Computer Science, Vrije Universiteit Brussel, Dep.of
Computer System.
12- Powell, Thomas, (2002), Web Design: The Complete Reference
(2.Ed), USA, McGraw-Hill Co.
13-Heller, Steven & Womack, David, (2008), Becoming a Digital
Designer, A guide to Careers, video, Broadcast, Game + Animation
Design, USA, John Wiley, Sons, inc.
13- Sklar, Joel, (2012), Principles of Web Design, (5.ED), USA,
Course Technology.

Becoming a Digital Designer

A Guide to Careers in Web, Video, Broadcast, Game, + Animation Design
Becoming a Digit

184
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬ليست من الصحف اإللكترونية‪:‬‬

‫‪ .A‬مواقع المحطات اإلذاعية والتلفزيونية‪.‬‬
‫‪ .B‬مواقع الصحف اإللكترونية التي ليس لها أصل ورقي‪.‬‬
‫‪ .C‬مواقع وكاالت األنباء‪.‬‬
‫‪ .D‬التيليتكست‪.‬‬

‫اإلجابة الصحيحة‪ D :‬التيليتكست‬

‫‪ .2‬من خصائص الصحافة اإللكترونية‪:‬‬

‫‪ .A‬اآلنية والتحديث المستمر‪.‬‬
‫‪ .B‬التفاعلية‪.‬‬
‫‪ .C‬استخدام الوسائط المتعددة والنصوص التشعبية‪.‬‬
‫‪ )A( .D‬و (‪ )B‬صحيحان‪.‬‬
‫‪ .E‬كل ما سبق صحيح‪.‬‬

‫اإلجابة الصحيحة‪ E :‬كل ما سبق صحيح‬

‫‪185‬‬
 ‫‪ .3‬يفضل الشباب التصميم الرصين الذي يتسم بالوقار والجدية‪.‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫‪ .4‬تفرق األسس النفسية لإلخراج الصحفي بين الذكور واإلناث‪ ،‬والقاعدة النفسية تنصح باختيار ما‬

‫يعبر عن الرجل إذا كان موجها إلى الجنسين‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪186‬‬
 ‫الوحدة التعليمية ال تاسعة‬

‫عناصر تصميم الصحيفة اإللكترونية‬

‫العناصر التقليدية ‪ -‬العناصر التيبوغرافية والغرافيكية‬

‫العناصر‪:‬‬

‫مقدمة‪.‬‬

‫عناصر تصميم الصحافة اإللكترونية ‪.‬‬

‫العناصر التيبوغرافية‪:‬‬

‫‪ ‬النصوص‪.‬‬
‫‪ ‬العناوين‪.‬‬
‫‪ ‬الخطوط‪.‬‬
‫‪ ‬الفواصل ‪ :‬الجداول واإلطارات‪.‬‬
‫‪ ‬الصور والرسوميات‪.‬‬
‫‪ ‬األلوان‪.‬‬

‫خاتمة‪.‬‬

‫‪187‬‬
 ‫األهداف التعليمية‪:‬‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫يحدد العناصر التقليدية في تصميم الصحافة اإللكترونية‪.‬‬

‫‪ -1‬يشرح النصوص‪.‬‬
‫‪ -2‬يشرح العناوين‪.‬‬
‫‪ -3‬يشرح الخطوط‪.‬‬
‫‪ -4‬يشرح الفواصل‪ :‬الجداول واإلطارات‪.‬‬
‫‪ -5‬يشرح الصور والرسوميات‪.‬‬
‫‪ -6‬يشرح األلوان‪.‬‬

‫الصحافة اإللكترونية – شبكة الويب – العناصر التيبوغرافية – العناصر‬ ‫الكلمات المفتاحية‪:‬‬

‫الغرافيكية النصوص – االنقرائية – الخطوط – نوع الخطوط – حجم الخطوط – اتساع السطور– النص‬
‫القيادي – العناوين – العناوين المتغيرة – العناوين الثابتة – العناوين الرئيسية – العناوين المجمعة –‬
‫العناوين الفرعية – المقدمات – الصور– الوظيفة التزيينية – الوظيفة التفسيرية – الوظيفة التصويرية –‬
‫الوظيفة اإلخبارية – الوظيفة االتصالية – وظيفة الربط – الوظيفة البصرية – الوظيفة التيبوغرافية ‪-‬‬
‫الفواصل الجداول – اإلطارات – الرسوميات ‪ -‬الرسوم الكاريكاتورية – الرسوم التعبيرية – الرسوم‬
‫البيانية‪.‬‬

‫‪188‬‬
 ‫أول‪ :‬مقدمة‬

‫تشكل النصوص وما تتضمنه من الخطوط‬

‫والعناوين‪ ،‬والفواصل والجداول‪ ،‬والصور الثابتة‪،‬‬
‫العناصر البنائية التقليدية‪ ،‬وهي العناصر التي‬
‫ورثتها عن الصحافة الورقية عندما انتقلت إلى‬
‫اإلنترنت‪ ،‬إال أن المصممين والمخرجين في البيئة‬
‫اإللكترونية استخدموها ووظفوها‪،‬‬

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

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

‫‪189‬‬
 ‫ثانيا‪ :‬العناصر البنائية التيبوغرافية‬

‫أ‪ -‬النصوص‪:‬‬

‫المركز األولى في اعتماد الصحف‬

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

‫ويعرف علماء التيبوغرافيا االنقرائية بأنها "سهولة قراءة‬

‫العين للنص"‪ ،‬ويحددون مجموعة من العوامل تؤثر على‬
‫االنقرائية‪ ،‬والتي يرتبط بعضها بالبنية األساسية للنص‪،‬‬
‫كنوع الخط وحجم السطر والعناوين‪ ،‬ويرتبط بعضها‬
‫اآلخر مثل الخلفيات واألماميات والتباين باأللوان‪ ،‬وسيأتي‬
‫ذكرها في الحديث عن العناصر الغرافيكية‪ ،‬ومن هذه‬
‫العوامل‪:‬‬
‫‪ -1‬محاذاة النص بما يتناسب واللغة المستخدمة‪ ،‬ناحية اليسار في اللغة الالتينية‪ ،‬والى اليمين في‬
‫اللغة العربية‪.‬‬

‫‪190‬‬
 ‫‪ -2‬استخدام نوع الخط بما يتفق مع المضمون المقدم في النص‪.‬‬
‫‪ -3‬تجنب استخدام أكثر من حجمين أو ثالثة على األكثر من الخطوط في النص‪.‬‬
‫‪ -4‬البساطة في استخدام الخطوط‪ ،‬وعدم استخدام الخطوط المزخرفة وغير التقليدية‪ ،‬إال بما يتناسب‬
‫مع المضمون المعلوماتي المقدم‪ ،‬كالموضوعات التراثية أو التاريخية أو الدينية أحياناً‪.‬‬
‫‪ -5‬استخدام النص القيادي ‪ Leading text‬مثل العناوين والمقدمات بخط أكبر من النصوص‪.‬‬
‫‪ -6‬تحديد طول السطر بما يشابه طول السطر المستخدم في الصحافة الورقية‪.‬‬
‫‪ -7‬تحديد المسافات بين النصوص والهوامش من دون التعدي على المساحة المخصصة للمحتوى‬
‫المعلوماتي‪.‬‬
‫‪ -8‬تحقيق التباين بين النص والخلفيات باستخدام ألوان متباينة‪.‬‬
‫‪ -9‬استخدام أدوات اإلبراز من دون مبالغة‪ ،‬مثل‪ :‬استخدام الخط المائل‪ ،‬والعريض‪ ،‬ووضع خط تحت‬
‫الكلمة‪ ،‬وتلوين النص‪.‬‬

‫العناصر المتضمنة في النص‪:‬‬

‫وتضم النصوص مجموعة من العناصر المتضمنة‬

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

‫‪ -1‬الحروف أو الخطوط‪ :‬وتشكل الحروف األساس الذي تُبنى وتُشكل منها المادة النصية‪ ،‬ويتوقف نجاح‬
‫هذه المادة ومدى وضوحها واقبال القراء عليها‪ ،‬على‪ :‬نوع الخط وحجمه واتساع السطور‪:‬‬

‫‪191‬‬
 ‫أ‪ -‬نوع الخط‪:‬‬
‫تتيح تكنولوجيا الويب للصحيفة اإللكترونية‬
‫مجموعة من الخطوط في صفحتها‪ ،‬ويقوم‬
‫مستعرض الويب بالبحث عن هذه الخطوط‬
‫بترتيب كتابتها‪ ،‬واذا لم يدعمها يقوم بوضع‬
‫الخط االفتراضي بدالً من هذه الخطوط‪.‬‬
‫قد أوضحت الدراسات أن نوع الخط المستخدم يؤثر بشكل كبير على االنقرائية‪:‬‬
‫‪ ‬الخطوط التي ال تحتوي على زوائد ‪ ،Sans-Serif‬أفضل في قراءتها من تلك التي تحتوي‬
‫على زوائد كالخطوط الكوفية مثالً‪.‬‬
‫‪ ‬الخط ‪ Arial‬هو أفضل الخطوط للقراءة بحجم ‪ 12‬نقطة‪.‬‬
‫‪ ‬الخط ‪ Times New Roman‬هو األسوأ في القراءة عبر الشاشة سواء أكان ذلك في‬
‫الخطوط الكبيرة أم الصغيرة‪.‬‬
‫‪ ‬خط ‪ Verdana‬هو األفضل في قراءته‪ ،‬وقد عد المصممون أن خط ‪ Arial‬هو األفضل‬
‫بالنسبة للعناوين والمقدمات‪ ،‬أما ‪ Verdana‬فهو األفضل بالنسبة للنص المستمر‪.‬‬
‫هذه القواعد تصدق على الخطوط اإلنجليزية وال تصدق على الخطوط العربية‪.‬‬
‫أمر ضروري إليجاد االتساق ووحدة‬
‫كما دلت الدراسات على أن استخدام عائلة الحروف نفسها ٌ‬
‫الرؤية‪ ،‬فيجب استخدام عائلة الحروف نفسها في العناوين وقوالب النصوص‪ ،‬واألزرار والقوائم‪.‬‬

‫‪192‬‬
 ‫ب‪ -‬حجم الخط‪:‬‬

‫تستخدم صفحة اإلنترنت مقاييس نسبية‬

‫في تحديد أحجام الحروف المستخدمة‪،‬‬
‫من‬ ‫العديد‬ ‫التحديد‬ ‫هذا‬ ‫ويالقي‬
‫اإلشكاليات منها‪:‬‬

‫‪ ‬بعض المتصفحات ال تدعم بعض‬

‫أحجام الحروف‪ ،‬كما أن للشاشة‬
‫تأثي اًر كبي اًر في اختالفها‪.‬‬
‫‪ ‬لغة البرمجة المستخدمة في تصميم‬
‫هذه الصفحات‪ ،‬فلغة الـ ‪CSS‬‬
‫تسمح باستخدام الخطوط الكبيرة‪،‬‬
‫بينما تعتمد لغة الـ ‪ ،HTML‬أساليب مختلفة لتحديد أحجامها منها التقسيم االثنا عشري‪،‬‬
‫والتقسيم السداسي‪ ،‬والتقسيم السباعي‪.‬‬

‫وقد اتفقت الدراسات على حجم الخط المثالي أنه الحجم األكبر من الحجم المستخدم في‬
‫الصحافة الورقية مع مراعاة القواعد التالية‪:‬‬
‫‪ -1‬حجم خطوط المقدمات أكبر من حجم خطوط المتن النصي بنقطتين‪.‬‬
‫‪ -2‬حجم خطوط العناوين أكبر من حجم خطوط المقدمات بنقطتين أيضاً‪.‬‬
‫وذلك لمساعدة عين المستخدم على التدرج البصري من األكبر إلى األصغر‪ ،‬ولتنظيم الصفحة‬
‫بشكل سلس وجذاب‪.‬‬

‫ج‪ -‬اتساع السطر‪:‬‬

‫يرتبط طول السطر المستخدم في عرض المحتوى المعلوماتي بعوامل مختلفة منها‪:‬‬
‫‪ ‬عين المستخدم‪.‬‬

‫‪193‬‬
 ‫‪ ‬تباين ووضوح الشاشة‪.‬‬
‫‪ ‬نوع المستعرض‪.‬‬
‫وعددها‪.‬‬
‫ُ‬ ‫‪ ‬حجم الحروف‬
‫وقد توصل التيبوغرافيون إلى مجموعة من القواعد التي يمكن من خاللها تحديد طول‬
‫السطر‪ ،‬منها‪:‬‬
‫‪ ‬قاعدة الثالث بوصات والبيكسل‪:‬‬
‫إذ ترى هذه القاعدة أن طول السطر يجب أال يتجاوز ثالث بوصات؛ ألن حركة‬
‫العين تكون في أقصى تركيز لها في هذه المسافة‪ ،‬وأن المستخدم سيفقد هذا‬
‫التركيز‪ ،‬ويفقد مسار القراءة إذا كان السطر طويالً‪ ،‬أما القاعدة الثانية فترى أن طول‬
‫السطر المناسب هو ‪ 365‬بيكسل‪ ،‬أي ‪ 3.8‬بوصة عندما يكون تباين الشاشة‬
‫‪ 688×888‬بيكسل‪.‬‬
‫‪ ‬قاعدة الحروف األبجدية ونصفها‪:‬‬
‫وترى هذه القاعدة أن طول السطر المناسب هو الذي يحتوي عدد حروف اللغة‬
‫وبناء على ذلك فإن عدد الحروف المناسبة في السطر (العربي) هو ‪42‬‬
‫ً‬ ‫ونصفها‪،‬‬
‫حرفاً‪.‬‬
‫‪ ‬قاعدة جداء عدد النقاط باثنين‪:‬‬
‫ورأت هذه القاعدة أن طول السطر يقاس من خالل معرفة حجم الخط بالنقطة ×‬
‫اثنين‪ ،‬فإذا كان حجم الخط ‪ 14‬نقطة‪ ،‬فإن طول السطر يساوي ‪ 28‬نقطة‪.‬‬
‫‪ ‬قاعدة عدد الكلمات‪:‬‬
‫من الباحثين من رأى أن عدد الكلمات المناسبة في السطر من عشر إلى اثنتي‬
‫عشرة كلمة‪ ،‬مما يعطي للمستخدم فرصة إيجاد السطر التالي ويمنع الزيغ البصري‪،‬‬
‫ورأى بعضهم اآلخر أن السطر يجب أال يزيد عن ثماني إلى خمس عشرة كلمة‪.‬‬
‫‪ ‬قاعدة عدد الحروف‪:‬‬
‫ترى قاعدة عدد الحروف أن طول السطر يجب أال يقل عن خمسين حرفاً إلى ‪78‬‬
‫حرفاً‪ ،‬ووفقاً لهذه القاعدة‪:‬‬
‫‪ ‬عرض السطور الطويلة أفضل من السطور القصير‪.‬‬

‫‪194‬‬
 ‫‪ ‬من غير المفضل تقسيم الصفحة إلى أعمدة‪.‬‬
‫‪:( Leading‬‬ ‫( النص القيادي ‪Text‬‬ ‫والمقدمات‬ ‫‪ -2‬العناوين‬
‫ويشمل النصوص المكتوبة بخط كبير أي العناوين والمقدمات‪ ،‬وهي التي تقود القارئ إلى المتن‪ ،‬وتساعده‬
‫على التنقل فيه بيسر وسهولة‪ ،‬وهي العناصر األكثر جذباً لالنتباه واثارة لالهتمام‪.‬‬

‫أ‪ -‬العناوين‪:‬‬
‫تتفاوت أهمية العناوين من صفحة إلى أخرى في الصحيفة‬
‫اإللكترونية‪ ،‬لكنها وبشكل عام من أهم العناصر التيبوغارفية‬
‫في بناء الصفحات وتحديد هيكلتها‪ ،‬لذلك يجب أن تتسم‬
‫بالصفات التالية‪:‬‬
‫‪ -1‬البساطة‪ ،‬وعدم تعدد أسطرها‪ ،‬تحقيقاً لمبدأ اإليجاز‬
‫على اإلنترنت‪.‬‬

‫‪ -2‬الوضوح في المحتوى‪ ،‬وعرضها إما بأسلوب‬

‫اإلخراج الصحفي العمودي أي أسلوب األعمدة‪ ،‬أو‬
‫بأسلوب اإلخراج الصحفي األفقي الذي يتيح نشر الموضوعات بشكل عرضي‪.‬‬

‫وظائف العناوين من الناحية التيبوغرافية‪:‬‬

‫ومن الناحية التيبوغرافية فإن العناوين تحقق الوظائف التالية‪:‬‬
‫التعريف بمحتوى األخبار والمعلومات‪ ،‬وشرح حقائقها بشكل مختصر‪.‬‬
‫‪ -1‬تحديد وتوضيح شخصية الصحيفة اإللكترونية‪ ،‬وغير‬
‫اإللكترونية‪.‬‬
‫‪ -2‬تسويق الموضوع والترويج له من خالل العنوان الذي‬
‫يدعو المستخدم إلى تصفح المادة أو الخبر الصحفي‪.‬‬
‫‪ -3‬زيادة جاذبية الصحيفة‪ ،‬والمساهمة في إخراجها الفني‬
‫بشكل يالئم ميول المستخدم ورغباته‪.‬‬

‫‪195‬‬
 ‫أنواع العناوين بالصحف اإللكترونية‪:‬‬

‫وتنقسم العناوين في الصحف اإللكترونية بصفة عامة إلى نوعين رئيسين هما‪:‬‬

‫العناوين الثابتة‪ :‬وهي العناوين التي ال تتغير من عدد إلى آخر‪ ،‬أو من تحديث إلى آخر‪،‬‬ ‫‪-1‬‬

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

‫العناوين التي تُستخدم كعناصر تيبوغرافية في تصميم الصحيفة اإللكترونية‪:‬‬

‫كما أن هناك مجموعة من العناوين التي تُستخدم كعناصر تيبوغرافية في تصميم الصحيفة‬
‫اإللكترونية‪ ،‬ومنها‪:‬‬
‫‪ -1‬عنوان الصفحة الـ ‪ :Title‬ويظهر في معظم برامج التصفح أعلى النافذة التي تُعرض فيها‬
‫الصفحة في الـ ‪ ،Title Bar‬وهذا العنوان ال يظهر في الصفحة نفسها‪ ،‬وانما في النافذة التي‬

‫‪196‬‬
‫يفتحها المتصفح الستعراضها‪ ،‬وهذا العنوان يساعد المستخدم على التعرف على الصفحة‬
‫التي يقف عندها‪.‬‬
‫‪ -2‬عنوان المادة ‪ :Heading‬ويضم هذا العنوان نوعين من العناوين‪:‬‬
‫أ‪ -‬العنوان التحليلي‪ :‬وهو النوع الذي يشير إلى أقسام النص‪ ،‬من مقدمة وتعريف وخلفية‬
‫تاريخية وخاتمة‪.‬‬
‫ب‪ -‬عنوان العرض‪ :‬وهو العنوان الذي يحمل مضمون النص‪ ،‬ويساعد المستخدم على فهم‬
‫محتوياته‪ ،‬وهذه العناوين من أهم العناصر التي يسعى المصمم إلى إبرازها‪ ،‬باستخدام‬
‫الحجم األكبر من الخطوط أو األلوان‪ ،‬أو استخدام الخط المائل‪ ،‬أو إضافة الحركة إليه‬
‫أو جعله يومض‪.‬‬
‫ب‪ -‬المقدمات‪:‬‬

‫تزايدت أهمية المقدمات من الصحافة‬

‫الصحيفة‬ ‫في‬ ‫فالقارئ‬ ‫اإللكترونية‪،‬‬
‫العناوين‬ ‫بتصفح‬ ‫يكتفي‬ ‫اإللكترونية‬
‫والمقدمات بيد أن الصحف اإللكترونية‬
‫تتجاهل التقديم الجمالي والشكلي للمقدمات‪،‬‬
‫وربما تكتفي بكتابتها بخط المتن األصلي‬
‫نفسه‪.‬‬

‫‪197‬‬
 ‫ثانيا‪ :‬الفواصل‬

‫تعد وسائل الفصل بين المواد بمثابة الخطوط الطولية والعرضية‪ ،‬والتي تكون حدوداً فاصلة بين‬
‫الموضوعات المختلفة‪ ،‬لكي ال تختلط بعضها بالبعض اآلخر في عين القارئ‪ ،‬ويتحدد نجاح الفصل بين‬
‫المواد باعتبارات عدة‪:‬‬

‫‪ -1‬الوضوح الكافي بحيث ال يشك المستخدم في انعدام الصلة بين الموضوعات المنفصلة‪ ،‬أي تنظيم‬
‫القراءة بحيث ال تختلط عين القارئ بين المواد المتجاورة‪.‬‬
‫‪ -2‬تأكيد بعض العناصر البنائية مثل إحاطتها بإطار أو جدول‪.‬‬
‫‪ -3‬إضافة قيمة جمالية للصفحة‪ ،‬وابراز المادة الصحفية وبخاصة الموضوعات داخل إطار‪.‬‬

‫الفواصل التي تستخدمها الصحف والمواقع اإللكترونية للفصل بين األخبار والموضوعات الصحفية‪:‬‬

‫تستخدم الصحف والمواقع اإللكترونية العديد من‬

‫الفواصل للفصل بين األخبار والموضوعات‬
‫الصحفية‪ ،‬كالخطوط الرأسية (الجداول) للفصل‬
‫بين الموضوعات‪ ،‬و(اإلطارات) للفصل بين‬
‫الصفحات‪ ،‬إذ تُستخدم الفواصل للتأكيد على‬
‫المضمون من زاوية‪ ،‬وفصله عن الموضوع‬
‫المجاور من زاوية أخرى‪.‬‬

‫‪198‬‬
 ‫‪-1‬الجداول‪:‬‬

‫هي الخطوط التي تسعى كل المواقع‬

‫استخدامها‬ ‫إلى‬ ‫اإللكترونية‬ ‫والصحف‬
‫للفصل بين المواد التحريرية المنشورة على‬
‫صفحات الموقع فصالً كامالً‪ ،‬وتُقسم إلى‬
‫خطوط طولية (الجداول الطولية)‪ ،‬وخطوط‬
‫عرضية (الجداول العرضية)‪ ،‬وقد تكون‬
‫الجداول ظاهرة أو‬

‫مخفية‪ ،‬وال يقتصر استخدامها على القوائم من البيانات التي تحتاج إلى ترتيبها في صفوف‬
‫وأعمدة‪ ،‬بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمها والتحكم بها‬
‫بصورة فعالة‪ ،‬إذ تُستخدم الجداول ‪ Tables‬لتقسيم الصفحة إلى مناطق ثابتة‪ ،‬ومناطق متغيرة‬
‫الحجم‪ ،‬وتحتوي على نصوص وصور‪ ،‬وتتيح هذه الجداول مرونةً في تصميم الصفحة أو‬
‫اإلضافة إلى التصميم األصلي‪ ،‬ويرجع استخدام الجداول إلى‪:‬‬
‫أ‪ -‬حاجة المعلومات المطلوب عرضها على‬
‫الصفحة إلى الجداول لعرضها‪ ،‬مثل قائمة‬

‫من األرقام تمثل درجات الح اررة‪ ،‬وصفوفاً‬

‫تحوي أسماء المدن‪.‬‬
‫ب‪ -‬الحاجة إلى تنظيم المعلومات بصورة تيسر‬
‫من سهولة وسرعة قراءتها‪.‬‬
‫ت‪ -‬تيسير تحديث المعلومات على الصفحة‬
‫في وقت الحق‪ ،‬وبصورة سريعة‪.‬‬

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

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

‫المصمم والمخرج أن يكون حريصاً على أن يتناسب تصميم الصفحة مع أنواع المتصفحات كافةً‬
‫أو توافر تصميمين للصفحة‪ ،‬أحدهما يستخدم اإلطارات‪ ،‬واآلخر ال يستخدمها‪.‬‬

‫ويضيف بعض الباحثين األيقونات كعناصر للفصل بين الموضوعات بشكل جميل وجذاب‪،‬‬
‫واأليقونات رسوم صغيرة تحمل داللة معينة‪ ،‬وقد ُيقصد بها بعض العناوين أو النصوص‪.‬‬

‫ثالثا‪ :‬الصور‬

‫تناولت كثير من الدراسات الحديث عن أهمية الصور من الناحية اإلخراجية‪ ،‬سواء بصفة مستقلة أم‬
‫منفردة‪ ،‬وبصفة عامة تكتسب الصور أهميتها من الوظائف التي تؤديها داخل البناء الشكلي للصحيفة‬
‫وذلك وفقاً الستخداماتها داخل هذا البناء‪ ،‬وتشترك مع العناصر األخرى في بناء جسم الصفحات‪ ،‬وتؤدي‬
‫الصورة الصحفية وظائف متعددة منها‪:‬‬

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

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

‫ويقصد بالصورة الصحفية الصورة التي تنطق بالمعنى‪ ،‬وتكمل للقارئ متعته بالخبر‪ ،‬حيث أصبحت‬
‫ُ‬
‫الصورة الجيدة عملية أساسية وحيوية في حياة الصحف والمواقع اإللكترونية‪.‬‬

‫ويزخر عالم الحاسب بالعشرات من أنواع الملفات الرسومية والصورية‪ ،‬وكل منها يختلف عن غيره من‬
‫اح عدة منها الدقة وعدد األلوان التي يستوعبها‪ ،‬والحجم التخزيني للملف‪ ،‬وتتكون الصور من شبكة‬
‫نو ٍ‬
‫دقيقة من الـ ‪ ،Pixels‬وكل نقطة تمثل في الشبكة موقع لون معين‪ ،‬ويتم تخزين الصورة الرقمية بالطريقة‬
‫ذاتها‪ ،‬ويمثل كل لون برقم‪ ،‬ويتم ضغط كل هذه األرقام بالحجم‪ ،‬ويمكن ضغط الصورة بسهولة باستخدام‬
‫أساليب مختلفة لضغط الصورة‪ ،‬وتعتمد المواقع والصحف اإللكترونية بصورة عامة على نوعين من‬
‫الصور‪ ،‬هما صور الـ ‪ ،GIF‬وصور‪ ،JPEG‬وهما التنسيقان اللذان سبق ذكرهما في وحدات سابقة‪.‬‬

‫ويقوم المخرج الصحفي بعملية إبراز الصورة وتحديد حجمها المناسب طبقاً لهدفه‪ ،‬وطبقاً لبراعته ودقته‪،‬‬
‫ويمكنه حذف األجزاء غير المهمة من خالل برامج معالجة الصور المستخدمة كبرنامج الـ ‪Photoshop‬‬
‫خرج صورة مشوقة وجذابة‪ ،‬وبصورة عامة فإن إخراج الصورة الصحفية هو تحديد‬
‫الذي يعمل على إ ا‬
‫الشكل الفني الذي ستظهر فيه الصورة الصحفية من حيث موقعها في الصفحة‪ ،‬وأسلوب عرضها‪،‬‬
‫وطريقة تقديمها‪ ،‬عموماً إن تنسيق ‪ JPEG‬مثالي لتخزين الصور الفوتوغرافية‪ ،‬ألنه صمم بشكل خاص‬

‫‪201‬‬
‫لتخزينها بفعالية‪ ،‬وتنسيق ‪ GIF‬مثالي لتخزين صور صفحة الويب‪ ،‬كاألشكال والرسوم البيانية والصور‬
‫والرسوم المتحركة‪.‬‬

‫أشكال الصور بالصحف اإللكترونية من حيث استخدامها‪:‬‬

‫يقوم المخرج والمصمم في المواقع والصحف اإللكترونية بإخراج الصور وفق أسلوبين هما‪ :‬أسلوب الصور‬
‫الثابتة‪ ،‬وأسلوب الصور المتحركة‪ ،‬كما تأخذ الصور التي تقدمها الصحف اإللكترونية ثالثة أشكال من‬
‫حيث استخدامها‪:‬‬

‫‪ -1‬الصور المعلوماتية واإلخبارية‪ :‬وهي التي تقدم معلومات إلى القارئ‪ ،‬وتتعدد أنواعها‬

‫وتقسيماتها‪ ،‬فمنها على سبيل المثال‪ :‬الصور الشخصية والموضوعية واإلبهامية‪ ،‬ومنها أيضاً‬
‫الرسوم التوضيحية‪ ،‬والرسوم الساخرة‪.‬‬

‫‪ -2‬شعار الصحيفة‪ :‬وهو الذي يحمل شخصية الصحيفة‪ ،‬ويقوم بعملية ربط بصري بين القارئ‬
‫والصحيفة‪.‬‬

‫‪202‬‬
‫‪ -3‬الصور كروابط‪ :‬تستخدم الصحف هذا النوع بدالً من النصوص لتقديم شكل جمالي إلى‬
‫المستخدم‪.‬‬

‫وظائف الصور بالصحيفة اإللكترونية‪:‬‬

‫مهما كانت األنواع واألشكال‪ ،‬فالصور عادة ما تقوم بعدد من الوظائف هي‪:‬‬

‫‪ -1‬الوظيفة التزيينية ‪ :Decorative‬المتمثلة في تقديم الشكل المرئي وللتأكيد عليه‪.‬‬

‫‪ -2‬الوظيفة التصويرية ‪ :Representational‬وتحتوي العناصر المذكورة في النص‪.‬‬
‫‪ -3‬الوظيفة التنظيمية ‪ :Organizational‬المتمثلة في تصوير العالقات بين العناصر المذكورة‬
‫في النص‪.‬‬
‫‪ -4‬الوظيفة التفسيرية ‪ :Explanative‬المتمثلة في توضيح كيفية حدوث األشياء‪.‬‬
‫‪ -5‬الوظيفة البصرية‪ :‬للصورة دور فعال في جذب انتباه القارئ واالستحواذ عليه‪ ،‬ويتفق مصممو‬
‫الصحف على أن الصورة الالفتة للنظر ربما تكون أفضل وسائل جذب عين القارئ إلى‬
‫الصحيفة‪ ،‬وتعد الصورة الفوتوغرافية أفضلها في هذا الصدد إذ يمكنها تسجيل تفاصيل األشياء‬
‫بشكل قريب من الواقع‪ ،‬فضالً عن أنها تستطيع جذب االنتباه بشكل أسرع‪.‬‬

‫‪203‬‬
‫‪ -6‬الوظيفة التيبوغرافية‪ :‬تمثل الصور أحد العناصر التيبوغرافية أياً كان شكلها وطريقة إخراجها‪،‬‬
‫وتساعد الصور في تصنيف األخبار حسب أهميتها‪ ،‬كما العناصر التيبوغرافية األخرى‪ ،‬كما‬
‫تُستخدم في تثبيت أركان الصفحة‪ ،‬وايجاد صفحة جذابة باعتبارها عنص اًر تيبوغرافياً يتميز‬
‫بالثقل‪.‬‬
‫‪ -7‬الوظيفة التصالية‪ :‬للصورة وظيفتها اإلخبارية التي تنافس بها الكلمة في الصحافة اإللكترونية‬
‫في نقل المعلومات المطلوبة‪ ،‬وقد ازدادت أهمية الصور والرسوم الصحفية بعد نجاحها في‬
‫أقدر على ربط مضمونها بالواقع‪ ،‬وأنها‬
‫مختلف وسائل اإلعالم األخرى‪ ،‬فضالً عن أن الصورة ُ‬
‫تُستعمل إلشباع فضول القارئ إلى شكل األشخاص واألماكن واألشياء‪.‬‬
‫‪ -8‬وهناك وظيفة أخرى للصور والرسوم أضفاها اإلنترنت عليها‪ ،‬وهي وظيفتها كرابط متشعب‬
‫‪ ،Hyperlink‬فالصور والرسوم على اإلنترنت تُستخدم لتوضيح موضوع معين‪ ،‬أو لتوضيح‬
‫مضمون الصفحات في حالة استخدامها الروابط‪.‬‬

‫المعاير التي يراعيها المخرج عند استخدام الصور والرسوم‪:‬‬

‫بالرغم من أهمية الصور‪ ،‬فإن االستخدام المبالغ‬

‫للصور‪ ،‬وعدم فهم وظائف الصور والرسوم‪،‬‬
‫وتأثيراتها على المستخدم يؤدي إلى إحداث تأثيرات‬
‫عكسية الستخدامها‪ ،‬ومن هنا يجب أن يراعي‬
‫المخرج عدداً من المعايير عند استخدام الصور‬
‫والرسوم تتمثل بما يأتي‪:‬‬

‫‪ -1‬استخدام الصور والرسوم إلكساب الصحيفة أو الموقع نوعاً من الواقعية‪.‬‬

‫‪ -2‬تجنب الصور ذات الدرجات اللونية الرمادية أو األلوان البراقة حتى ال تعطي القارئ انطباعاً‬
‫خاطئاً عن الموضوع‪.‬‬

‫‪204‬‬
‫‪ -3‬عدم المبالغة في حجم الصور على الشاشة؛ ألنها تتطلب سعات تخزينيةً كبيرة‪ ،‬وتأخذ مدة طويلة‬
‫في التحميل على اإلنترنت مما يجعل متصفح المواقع يمل منها‪ ،‬ويتحول إلى موقع آخر‪ ،‬وتعتمد‬
‫جودة الصورة على قوة تحديدها ‪ ،Resolution‬ويتم قياس التحديد بعدد الـ ‪ Pixels‬في البوصة‪.‬‬
‫‪ -4‬التناسب بين حجم الصورة والمادة التحريرية التابعة لها‪ ،‬وتوظيف الصورة في المكان المناسب‪.‬‬
‫‪ -5‬أن تكون الرسوم جيدة اإلخراج‪ ،‬ويتوافر فيها عناصر االتزان والتباين والبساطة‪ ،‬والتكامل مع‬
‫الموضوع‪.‬‬
‫‪ -6‬الرسوم الخطية يجب أن تحافظ على النسب الطبيعية في الرسم بعكس رسوم الكاريكاتير‪.‬‬

‫الرسم الكاريكاتيري‬

‫هو عبارة عن تصوير األشخاص بشكل طريف‬

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

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

‫‪205‬‬
 ‫المعايير التي تحكم وضعية الصور داخل صفحة الويب‪:‬‬

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

‫أ‪ -‬نوع الصورة‪:‬‬

‫تتحكم دقة الصورة واأللوان الموجودة بها في تحديد الصور المعروضة على الصحيفة اإللكترونية‪،‬‬
‫وتقاس دقة الصورة بالبت ‪ ،Bit‬ويسمى أحياناً عمق البيكسل ‪ ،Pixel Depth‬أو وضوح البت ‪Bit‬‬
‫‪ ،Resolution‬والمراد بها عدد األلوان المتاحة في بيكسل الصورة المعروضة‪ ،‬فعلى سبيل المثال‬
‫البيكسل ذو العمق الواحد يحتوي على قيمتين هما األسود واألبيض‪ ،‬والبيكسل ذو الثمانية أعماق‬
‫يحتوي على ‪ 256‬قيمة لونية‪ ،‬والبيكسل ذو األربعة والعشرين بتاً يحتوي على ‪16.777.216‬‬
‫لوناً‪.‬‬
‫ب‪ -‬حجم الصورة‪:‬‬
‫يتحكم نوع الصور في حجمها‪ ،‬فالصور من نوعية ‪ GIF‬أقل حجماً من الصور من نوعية ‪PNG‬‬
‫و‪ ،JPEG‬ألنهما يحتويان على ألوان أكثر‪ ،‬وهناك عالقة وثيقة بين حجم الصور‪ ،‬وتحميل‬
‫صفحة الويب‪ ،‬فكلما كانت الصفحة تحتوي على صور كبيرة الحجم أو صور كثيرة العدد زاد من‬
‫بطء تحميل الصفحة‪ ،‬وهناك قاعدتان تحكمان حجم الصور‪ :‬األولى تتعلق بالصور المنفردة‪،‬‬
‫والثانية تتعلق بحجم الصور اإلجمالي في الصفحة‪ ،‬وبالنسبة للصور المنفردة فقد توصل‬
‫المصممون إلى أن حجمها يجب أن يتراوح ما بين ‪ 25‬و‪ 58‬كيلو بايت على الرغم من اعتماد‬
‫بعضهم على ‪ 38‬أو ‪ 35‬كيلو بايت‪ ،‬عدا عن أنها ال تظهر تفاصيل الصورة بشكل واضح‪ ،‬أما‬
‫بالنسبة لحجم الصور في الصفحة‪ ،‬فيجب أال يتجاوز الـ ‪ 288‬كيلو بايت‪.‬‬
‫ويجب االنتباه إلى الصور الثابتة‪ ،‬والصور المتغيرة في الصحيفة اإللكترونية‪ ،‬والتقليل من الصور‬
‫الثابتة‪ ،‬حتى تفسح المجال للصور المصاحبة للنصوص‪ ،‬ولتزيد من سرعة تحميل الصفحة‪.‬‬
‫ج‪ -‬مساحة الصورة‪:‬‬
‫ويقصد بها مساحة الصورة التي تشغلها على الصفحة‪ ،‬وتتحدد مساحة الصورة تبعاً للمعلومات‬
‫ُ‬
‫التي تحتويها الصورة‪ ،‬فإذا كانت تفاصيل الصورة كبيرة تطلبت زيادة مساحتها‪ ،‬وقد توصل‬

‫‪206‬‬
‫الباحثون إلى ‪ 25.888‬بيكسل مربع كمساحة مثالية للصورة‪ ،‬وتخضع مساحة الصورة إلى نوع‬
‫الصورة‪ ،‬فالصورة الشخصية مساحتها صغيرة وتأخذ شكالً رأسياً‪ ،‬والصورة الموضوعية (تجسد‬
‫حدثاً معيناً) تشغل مساحةً أكبر وتأخذ شكالً أفقياً‪ ،‬أما الصورة اإلبهامية (بحجم اإلبهام) فال تركن‬
‫لمساحة أو شكل معين‪ ،‬فيمكن أن تكون دائرية أو شبه دائرية‪ ،‬أو مستطيلة أو مربعة الشكل‪.‬‬
‫د‪ -‬موقع الصورة‪:‬‬
‫ُيجمع الباحثون على أن الموقع األفضل بالنسبة للصور وضعها في اتجاه اللغة‪ ،‬وأن ال تقطع‬
‫النص حتى ال تقطع استم اررية قراءته‪ ،‬وال توضع في نهاية النص‪ ،‬وقد رأى باحثون آخرون‬
‫ضرورة وضعها في الجزء األيمن من الصفحة حتى ال تقطع استم اررية النص‪ ،‬وال توضع في‬
‫نهايته لعدم سحب االنتباه من النص أو شغل بصر القارئ بالنص والصورة معاً‪ ،‬بينما رأى‬
‫آخرون أن وضعها بين العنوان والنص أمر مناسب أكثر لتعطي الصورة فكرة كاملة عن الموضوع‬
‫قبل البدء بالقراءة‪ ،‬وألن الصورة مكملة للنص وهي جزٌء منه‪ ،‬ولتؤدي إلى كسر النمطية في‬
‫عرض الصور‪ ،‬ويطرح باحثون فكرة وضع الصورة فوق العنوان حتى تقود القارئ بما تملكه من‬
‫قوة جذب إلى قراءة النص‪.‬‬

‫رابعا‪ :‬األلوان‬

‫وظائف األلوان في الصحيفة أو الموقع اللكتروني‪:‬‬

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

‫‪207‬‬
 ‫المعايير التي يجب اللتزام بها عند اختيار األلوان‪:‬‬

‫هناك مجموعة من المعايير التي يجب االلتزام بها عند اختيار األلوان منها‪:‬‬

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

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

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

‫‪ ‬االستفادة من إبراز العناوين وتوظيفها بالشكل األمثل الذي يخدم عرض النص وتوضيح أهدافه‬
‫والتعبير عنه‪.‬‬

‫‪ ‬االستفادة من الجداول واإلطارات كفواصل للموضوعات داخل الصفحة وفواصل بين الصفحات‪.‬‬

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

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

‫‪209‬‬
 ‫الخالصة‬

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

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

‫‪210‬‬
 ‫المراجع والمصادر‬

‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2889( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2885( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2818( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد‪ ،6 :‬العدد‪.18 :‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2818( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة في إطار نظرية تمثيل المعلومات‪ ،‬دراسة شبه تجريبية‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2889( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -6‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2887( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -7‬سالم تربان‪ ،‬ماجد‪ ،)2888( ،‬اإلنترنت والصحافة اإللكترونية‪ ،‬رؤية مستقبلية‪ ،‬ط‪ ،1‬القاهرة‪ ،‬الدار‬
‫المصرية اللبنانية‪.‬‬
‫‪ -8‬رسمي موسى‪ ،‬انتصار‪ ،)2884( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪،‬‬
‫ط‪ ،1‬بغداد‪ ،‬مكتبة الذاكرة‪.‬‬
‫‪ -9‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2811( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة تُعد جزءاً من متطلبات الحصول على‬
‫الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪10- Beaird, Jason, (2010), The Principals of Beautiful Web Design,‬‬
‫‪(2.Ed), Canada, Site Point Pty Ltd.‬‬

‫‪211‬‬
 11- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM,
Dissertation Submitted in View of Obtaining a degree of Master
Science in Computer Science, Vrije Universiteit Brussel, Dep.of
Computer System.
12- Powell, Thomas, (2002), Web Design: The Complete Reference
(2.Ed), USA, McGraw-Hill Co.
13-Heller, Steven & Womack, David, (2008), Becoming a Digital
Designer, A guide to Careers, video, Broadcast, Game + Animation
Design, USA, John Wiley, Sons, inc.
13- Sklar, Joel, (2012), Principles of Web Design, (5.ED), USA,
Course Technology.
Becoming a Digital Designer
A Guide to

212
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬ليست من العناصر التيبوغرافية التقليدية‪:‬‬

‫‪ .A‬النصوص‪.‬‬
‫‪ .B‬النصوص المتشعبة‪.‬‬
‫‪ .C‬الفواصل‪.‬‬
‫‪ .D‬األلوان‪.‬‬

‫اإلجابة الصحيحة‪ B :‬النصوص المتشعبة‬

‫‪ .2‬من وظائف الصور كإحدى العناصر المهمة في تصميم الصحافة اإللكترونية‪:‬‬

‫‪ .A‬الوظيفة التفسيرية‪.‬‬
‫‪ .B‬الوظيفة التزيينية‪.‬‬
‫‪ .C‬الوظيفة اإلخبارية‪.‬‬
‫‪ )A( .D‬و(‪ )B‬صحيحان‪.‬‬
‫‪ .E‬كل ما سبق صحيح‪.‬‬

‫اإلجابة الصحيحة‪ E :‬كل ما سبق صحيح‪.‬‬

‫‪213‬‬
 ‫حجم الصور الثابتة التي يجب أن تُعرض في الصحيفة اإللكترونية يتراوح بين ‪ 25‬إلى ‪ 58‬كيلوبايت‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪ .3‬الخطوط التزيينية المزخرفة من أفضل أنواع الخطوط المستخدمة في النصوص إلضفاء الجمالية‬
‫على النص‪.‬‬

‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫‪214‬‬
 ‫الوحدة التعليمية العاشرة‬

‫عناصر تصميم الصحيفة اإللكترونية ‪ -‬العناصر التكنولوجية‬

‫األهداف التعليمية ‪:‬‬

‫بعد دراسة هذه الوحدة التعليمية يجب أن يكون الطالب قاد ار على أن‪:‬‬

‫‪ .1‬يحدد العناصر التكنولوجية في تصميم الصحافة اإللكترونية‪.‬‬

‫‪ .2‬يشرح الرسوم المتحركة ‪.‬‬
‫‪ .3‬يشرح مقاطع الفيديو‪.‬‬
‫‪ . 4‬يشرح المقاطع الصوتية‪.‬‬
‫‪ .5‬يشرح النص المتشعب‪.‬‬

‫ا لعناصر‬

‫مقدمة‪.‬‬

‫عناصر تصميم الصحافة اإللكترونية ‪.‬‬

‫العناصر التكنولوجية‪:‬‬

‫‪ ‬الوسائط المتعددة‬
‫‪ ‬الرسوم المتحركة‪.‬‬
‫‪ ‬مقاطع الفيديو‪.‬‬
‫‪ ‬المقاطع الصوتية‪.‬‬
‫‪ ‬النص المتشعب‪.‬‬

‫خاتمة‪.‬‬

‫‪215‬‬
‫الصحافة اإللكترونية – العناصر التكنولوجية – الوسائط المتعددة – الرسوم‬ ‫الكلمات المفتاحية ‪:‬‬
‫المتحركة – رسوم الـ ‪ – GIF‬رسوم الـ ‪ – SWF‬المقاطع الصوتية – الموجات التماثلية – الصوت‬
‫الرقمي– النص القيادي – مقاطع الفيديو – ملفات الـ ‪ – Quick Time‬ملفات الـ ‪ – VFW‬ملفات الـ‬
‫‪ – MPEG‬التحميل – البث المباشر – النص المتشعب – تكسير النص – نظرية النص المتشعب –‬
‫النص المتشعب الداخلي – النص المتشعب الخارجي – النص المتشعب المحلي – النص المتشعب‬
‫والقوى الفاعلة – النص المتشعب والقائم باالتصال – الروابط التشعبية ال غرافيكية – الروابط التشعبية‬
‫النصية‪.‬‬

‫‪216‬‬
 ‫أوالً‪ :‬مقدمة‬

‫يجمع مصطلح الوسائط المتعددة كال من الرسوم والصوت‬

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

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

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

‫ثانياً‪ :‬العناصر البنائية التكنولوجية (الوسائط المتعددة)‬

‫بدايات الوسائط المتعددة في العملية اإلعالمية‪:‬‬

‫ارتبط مفهوم الوسائط المتعددة بداية بتطور حركة الوسائل التعليمية واستخدامها في التعليم‪ ،‬وذلك مع‬
‫شيوع استخدام أجهزة عرض األفالم الثابتة والشفافيات والشرائح مصحوبة بالتسجيالت الصوتية‪ ،‬والتي‬
‫تمثلت بمفهوم استخدام الوسائل السمعية البصرية ‪ Audio-Visual‬في التعليم‪ ،‬وكان الهدف األساسي‬

‫‪217‬‬
‫من استخدام هذه الوسائل إثارة الدافعية للتعليم والتعلم‪ ،‬والعمل على استثارة الحواس جميعها الستكمال‬
‫المعنى أو بنائه أحيانا‪ ،‬ولتأكيد بعض المعاني والدالالت لبعض المعلومات المتضمنة في الكتب والمناهج‬
‫الدراسية واألكاديمية‪.‬‬

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

‫مفهوم الوسائط المتعددة‪:‬‬

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

‫ويذكر الباحثون تعاريف مختلفة للوسائط المتعددة‪ ،‬كلها تركز على أنها "ترتكز بشكل أساسي على النص‬
‫مصحوبا بالصوت واللقطات الحية من فيديو وصورة وصوت وتأثيرات خاصة‪ ،‬مما يزيد من قوة وخبرة‬
‫المتلقي بأقل كلفة ووقت"‪ ،‬أي أن الوسائط المتعددة من الناحية الشكلية تعني التكامل بين أكثر من‬
‫وسيلة‪ ،‬نص مكتوب مع مقطع صوتي مع صورة ثابتة أو متحركة‪.‬‬

‫‪218‬‬
 ‫فوائد الوسائط المتعددة في المواقع اإلعالمية‪:‬‬

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

‫أوالً‪ :‬الرسوم المتحركة‬

‫تعريف الرسوم المتحركة‪:‬‬

‫هي سلسلة من اإلطارات الثابتة التي تمثل كل منها لقطة‪ ،‬وتُعرض اللقطات أو اإلطارات بسرعة ‪24‬‬
‫إطا ار في الثانية‪ ،‬فتوحي للمشاهد بالحركة‪ ،‬فالرسوم المتحركة إذا هي محاكاة للواقع والحركة فيه‪ ،‬ويمكن‬
‫أن تنشأ عن طريق الحاسب من دون تقليد الحركة من خالل إجراء تغيرات في اللون أو اإلضاءة بين‬
‫إطارات الصورة المتحركة‪ ،‬وهي أسلوب عمل حركة خادعة عن طريق استعراض سلسلة من الصور‬
‫المختلفة تمر بسرعة فائقة خادعة العين عن طريق ما يسمى بالخداع البصري‪ ،‬وذلك برؤية الصور‬
‫متحركة‪ ،‬معتمدة في ذلك على نظرية الرؤية‪ ،‬إذ تحتفظ شبكة العين بالصورة لمدة ‪ 11/1‬من الثانية بعد‬
‫زوال الصورة الفعلية‪.‬‬

‫‪219‬‬
 ‫تصميم الرسوم المتحركة‪:‬‬

‫ويستخدم في تصميم الرسوم المتحركة على اإلنترنت العديد من لغات البرمجة والبرامج التطبيقية التي‬
‫ُ‬
‫تتيح لمصمم الصفحة تدعيمها بالرسوم المتحركة‪ ،‬مثل برامج‪ ،Quick Time :‬وبرنامج ‪،Shockwave‬‬
‫وبرنامج الـ ‪ ،JAVA‬وغيرها من البرامج‪.‬‬

‫ال تدعم مستعرضات الويب كل هذه البرامج‪ ،‬وعندها تحتاج إلى برامج أخرى لتشغيلها ودعمها‪ ،‬مما يؤدي‬
‫إلى شغل مساحة كبيرة على الصفحة‪ ،‬ويؤدي إلى ملل المستخدم وهروبه من الصفحة‪ ،‬ولكي يتالفى‬
‫المصمم هذه المشكلة يقوم‪:‬‬

‫‪ ‬بتحديد أهداف استخدامه لهذه اللغة وهذه البرامج‪.‬‬

‫‪ ‬استخدام الرسوم بقدر معين والسيما أن الصحيفة اإللكترونية ال تعتمد كثي ار على الرسوم في‬
‫موادها اإلخبارية‪ ،‬ويتم االعتماد عليها أكثر في تصميم اإلعالنات‪.‬‬

‫أنواع الرسوم المتحركة‪:‬‬

‫تتنوع الرسوم المتحركة المعروضة في الصحافة‬

‫اإللكترونية سواء‪:‬‬

‫‪ ‬من ناحية الظهور على الصفحة‪.‬‬

‫‪ ‬من حيث أنواع الملفات التي تشغلها‪.‬‬
‫‪ ‬من حيث الوظائف التي تقدمها‪.‬‬

‫من حيث الظهور فإن الرسوم المتحركة تكون على شكلين‪:‬‬

‫‪ -1‬الرسوم المتحركة الديناميكية‪ :‬وهي الرسوم غير الثابتة والمتغيرة من عدد إلى آخر‪ ،‬وبصفة عامة‬
‫تستخدمها الصحف اإللكترونية لتحقيق ما يلي‪:‬‬

‫‪220‬‬
 ‫أ‪ -‬عرض العناوين اإلخبارية والموضوعات في الصفحات‪.‬‬
‫ب‪ -‬عرض مجموعة من الصور المتتابعة عن حدث معين‪ ،‬مثل استخدامها في عرض صور‬
‫المرشحين النتخابات معينة أو عرض العبي قرة القدم‪.‬‬
‫ت‪ -‬جذب االنتباه عبر استغالل حركة الصور والعناوين‪.‬‬
‫‪- 2‬الرسوم المتحركة الثابتة‪ :‬وهي الرسوم التي ال تتغير في الصحيفة‪ ،‬والتي تميز شخصية الموقع‬
‫أو الصحيفة اإللكترونية‪ ،‬ويحقق هذا الشكل من الرسوم عددا من الوظائف منها‪:‬‬
‫أ‪ -‬ثبات شخصية الصحيفة على الشبكة عن طريق تميز موقعها برسم معين يميزها عن غيرها‬
‫من بقية الصحف والمواقع اإللكترونية‪.‬‬
‫ب‪ -‬جذب انتباه القارئ للصحيفة‪.‬‬
‫ت‪ -‬المساعدة على التذكر‪ ،‬وايجاد انطباع معين لدى القارئ‪.‬‬
‫ث‪ -‬تحقيق التوازن بين أجزاء الصفحة‪ ،‬ومع العناصر الثقيلة مثل‪ :‬العناوين ‪ -‬الرسوم ‪ -‬الصور‬
‫‪ -‬الجداول‪.‬‬

‫من حيث الوظائف التي تساعد في تحقيقها‪:‬‬

‫هناك في هذا الخصوص مجموعة من الرسوم المتحركة منها‪:‬‬

‫‪Character‬‬ ‫المتحركة‬ ‫الرسوم‬ ‫خاصية‬ ‫‪ -1‬إضفاء‬

‫‪ :Animation‬أي إعطاء الساكن أو الثابت حركة واقعية‬
‫مثل أن تجعل شخصا يمشي‪ ،‬أو ترسم ضحكة أو ابتسامة‬
‫على وجه معين‪.‬‬

‫‪221‬‬
 ‫‪Highlights and‬‬ ‫‪ -2‬التركيز أو إضفاء البريق‬
‫‪ :Sparkles‬مثل إدخال كلمة على الشاشة ثم‬
‫إخراجها‪ ،‬أو تكبيرها وتصغيرها‪ ،‬واضفاء ألوان‬
‫مختلفة عليها تثير االنتباه‪.‬‬

‫تحريك النصوص ‪ :Moving Text‬وهي كتابة‬

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

‫أما من حيث أنواع الملفات التي تشغلها الرسوم المتحركة في الصحف والمواقع اإللكترونية‪ ،‬فيوجد‬
‫نوعان من هذه الرسوم‪:‬‬

‫األول تقنية الرسوم المتحركة من نوعية الـ ‪.GIF‬‬

‫والثاني تقنية الرسوم المتحركة من نوعية الـ ‪ ،SWF‬ولكل نوع من هذه األنواع ميزاته وخصائصه‪،‬‬
‫واستخداماته المختلفة في التصميم‪:‬‬

‫‪ -1‬تقنية الرسوم المتحركة ‪ :)GIF) Graphic Interchange Format‬وتعتمد هذه التقنية على‬
‫عدد اإلطارات (الصور) التي تمر في الثانية الواحدة‪ ،‬ويحتوي كل إطار على فكرة جديدة في‬
‫الشكل والمضمون‪ ،‬وكلما ازد عدد اإلطارات زادت سرعة الرسوم المتحركة من جهة‪ ،‬وزاد حجم‬
‫الملفات من جهة ثانية‪.‬‬
‫وتتميز هذه النوعية من الرسوم‪ ،‬بميزات عدة‪:‬‬
‫‪ .1‬تدعم هذه الرسوم أغلب مستعرضات الويب‪.‬‬

‫‪222‬‬
 ‫‪ .2‬صغر حجم ملفات هذه الرسوم‪.‬‬
‫‪ .3‬سرعة تحميلها على صفحة اإلنترنت‪.‬‬
‫‪ -2‬تقنية الرسوم المتحركة ‪ :)SWF) Shockwave Flash‬وهي من أهم وسائل إغناء الويب‪،‬‬
‫العتمادها طرائق مبتكرة في إعداد العروض التفاعلية التي تتيح التفاعل مع المستخدم‪ ،‬واالنتقال‬
‫بحرية بين عناصر العرض‪ ،‬واضافة المعلومات التي يرغب المشاركة بها‪ ،‬وغيرها من أشكال‬
‫التفاعل مع المادة‪ ،‬وتُبنى العروض التفاعلية المبنية على تقنية الـ ‪ Flash‬على عناصر أساسية‪:‬‬
‫‪ .1‬مسرح الحدث‪ :‬وهو المساحة المرئية من صفحة الموقع التي ستجري فيها أحداث العرض‪.‬‬
‫‪ .2‬التسلسل الزمني للعرض‪ :‬وهو المسار الزمني لتعاقب أحداث العرض‪ ،‬والتي يتم ترتيبها من‬
‫خالل الصفات الزمنية لإلطارات‪.‬‬
‫‪ .3‬الطبقات‪ :‬وتسمح هذه التقنية بتمثيل األحداث في طبقات متراكبة وشفافة بحيث تجري‬
‫مجموعة من األحداث في زمن واحد وعلى مسرح أحداث مشترك‪.‬‬

‫قواعد استخدام الرسوم المتحركة‪:‬‬

‫بالرغم من أهمية الرسوم المتحركة المستخدمة في تصميم‬

‫الصحيفة اإللكترونية‪ ،‬وتأثيرها في إضفاء الجمال والجاذبية‬
‫للموقع‪ ،‬فاستخدامها ‪ -‬كما سبق ذكره ‪ -‬يجب أن يكون بقدر‪،‬‬
‫فهي في النهاية ليست عنص ار مساعدا لعرض الرسالة‬
‫اإلعالمية بل إن لها استخدامات أخرى على الصفحة‪،‬‬
‫كتصميم اإلعالنات مثال‪ ،‬ويؤكد المصممون على مجموعة من‬
‫المحاذير التي يجب االنتباه إليها عند التعامل مع الرسوم‬
‫المتحركة‪ ،‬ومنها‪:‬‬

‫عدم وضع الرسوم المتحركة في منتصف الصفحة‪ ،‬حتى ال تؤثر على مجال رؤية المستخدم‪ ،‬وقراءته‬
‫المستمرة للنص نتيجة إحساسه بالحركة‪.‬‬

‫‪223‬‬
‫‪ -1‬يجب أال توضع هذه الرسوم في مناطق االهتمام العالية‪ ،‬مثل الجزء العلوي األيمن من الصفحة‬
‫مثال للسبب السابق نفسه‪.‬‬
‫‪ -2‬إذا كانت الرسوم المستخدمة على شكل أيقونات أو صور صغيرة‪ ،‬فيفضل استخدام رسوم الـ‬
‫‪.GIF‬‬

‫ثانياً‪ :‬المقاطع الصوتية الرقمية‬

‫ُيعرف الصوت من الناحية الفيزيائية بأنه تخلخل في‬

‫الهواء يحدث للذبذبات الصوتية ينتج عنه موجات‪،‬‬
‫يدركها اإلنسان على أنها صوت‪ ،‬وتطلق كلمة‬
‫الصوت على الموجات الصوتية عامة في النظام‬
‫الرقمي‪ ،‬وتتكون هذه الموجات من عنصري‪:‬‬

‫‪ ‬االتساع وهو المسافة بين خط المنتصف (الصمت) والخط األعلى (الصوت العالي) والخط‬
‫األسفل (الصوت المنخفض) لذروة الموجة‪.‬‬
‫‪ ‬أما العنصر الثاني فهو‪ :‬التردد أي سرعة حركة الموجة الصوتية (عدد الموجات التي تمر في‬
‫الثانية الواحدة)‪ ،‬وبالطبع فإن الموجات السريعة تعطي إيقاعا سريعا‪ ،‬والموجات البطيئة تعطي‬
‫إيقاعا بطيئا‪.‬‬

‫‪Analog‬‬ ‫وتحتاج ملفات الصوت التماثلية‬

‫‪ Waves‬للتحويل إلى ملفات الصوت الرقمية‪،‬‬
‫ويتم ذلك من خالل قيام المصمم بأخذ مقاسات‬
‫التساع الموجة عند نقطة محددة من الزمن‪ ،‬وكل‬
‫مقياس يؤخذ يسمى العينة‪ ،‬وعملية تحويل الصوت‬
‫التماثلي إلى رقمي تسمى معاينة الصوت‬

‫‪224‬‬
‫ويدرك المصمم أنه لن يصل إلى دقة ووضوح الصوت األصلي‪ ،‬لكن يمكن االقتراب منه من خالل زيادة‬
‫عدد العينات التي تؤخذ في الثانية وقيم اتساعها‪ ،‬ويتم تحويل الصوت التماثلي إلى صوت رقمي‪ ،‬إما عن‬
‫طريق قناة أحادية ‪ ،Mono‬أو قناة ثنائية (مجسمة) ‪ ،Stereo‬والصوت المجسم أكبر من الصوت‬
‫األحادي‪ ،‬ويشغل ضعف مساحته‪.‬‬

‫أنواع الصوت في المواقع والصحف اإللكترونية‪:‬‬

‫يمكن تقسيم الصوت في المواقع والصحف اإللكترونية إلى نوعين‪:‬‬

‫‪ -1‬التعليق الصوتي الذي ُيستخدم في وصف وتفسير وجذب االنتباه إلى العناصر البصرية‪،‬‬
‫والرسومات والفيديو على الصحيفة‪.‬‬
‫‪ -2‬الموسيقا والمؤثرات الصوتية المعبرة عن مواقف مختلفة إلضفاء الواقعية واإلحساس باألحداث‬
‫واألماكن‪ ،‬وتحسين العملية التفاعلية‪ ،‬وجذب االنتباه‪.‬‬

‫المجاالت التي ُيستخدم فيها الصوت في الصحف اإللكترونية‪:‬‬

‫من المجاالت التي ُيستخدم فيها الصوت في الصحف اإللكترونية ما يلي‪:‬‬

‫‪ -1‬التنبيه على أخطاء وقع فيها المستخدم‪ ،‬كإصدار جرس لتنبيه المستخدم لضغطه على وصلة‬
‫خطأ‪.‬‬
‫‪ -2‬تنبيه المستخدم إلى موضوع مهم أو تحذير فوري‪ ،‬وهو مشابه للصوت السابق لكن يصاحبه‬
‫تعليق مكتوب على الشاشة‪.‬‬
‫‪ -3‬يتم إضافة التعليقات الصوتية لتجنب النصوص المكتوبة الطويلة‪.‬‬
‫‪ -4‬إقناع المستخدم بالموضوع عن طريق المؤثرات الصوتية‪.‬‬

‫‪225‬‬
 ‫أنواع ملفات الصوت‪:‬‬

‫تخزن ملفات الصوت في الحاسب على هيئة أنواع‬

‫مختلفة من ملفات الصوت‪ ،‬وكل نوع من هذه األنواع‬

‫يختلف من حيث الحجم الذي يشغله‪ ،‬ومن حيث دقةُ‬

‫نقله للصوت األصلي‪ ،‬ومن هذه الملفات‪:‬‬

‫‪ -1‬ملفات ‪ AU‬و‪ ،SND‬وهما من أقدم أنواع ملفات الصوت‪ ،‬وتتصف بكبر حجم ملفاتها‪.‬‬
‫‪ -2‬ملفات الـ ‪ :(Wave) Wave Form‬وقد أنشئت هذه الملفات من قبل مايكروسوفت‪.‬‬
‫‪ -3‬ملفات الـ ‪ :(WMA) Windows Microsoft Audio‬قد أنشئت هذه الملفات من قبل‬
‫مايكروسوفت أيضا‪.‬‬
‫‪ -4‬ملفات الـ ‪ :(RA) Real Audio‬أُنشئت هذه الملفات من قبل ‪.Real Networks‬‬
‫‪ -5‬ملفات الـ ‪ MP4‬و‪ ،MP3‬و‪ MP2‬و‪ AIF‬و‪ ،AI‬وهذه الملفات تعمل على مشغل ‪.Win amp‬‬

‫وكل هذه الملفات يمكن أن تعمل على المستعرضات الحديثة‪ ،‬إما عن طريق التشغيل المباشر ‪،Built In‬‬
‫أو يمكن أن تعمل من خالل برمجيات أخرى ‪.Plug In‬‬

‫ومن اإلرشادات التي توصل إليها المصممون‬

‫الستخدام الصوت في الصحف أو المواقع‬
‫اإللكترونية‪ ،‬يذكر‪:‬‬

‫‪ -1‬يجب أن يكون الصوت متسقا مع‬

‫الوظيفة المصاحبة له‪.‬‬
‫‪ -2‬عدم اإلسراف في استخدام الرموز‬
‫الصوتية‪.‬‬

‫‪226‬‬
 ‫‪ -3‬تمكين المستخدم من التحكم في إلغاء الرسائل اللفظية متى أراد‪.‬‬
‫‪ -4‬تجنب استخدام ألحان متقاربة حتى ال يتداخل معناها على المستخدم‪.‬‬

‫ثالثاً‪ :‬مقاطع الفيديو‬

‫تُعد مقاطع الفيديو من أهم العناصر التكنولوجية‬

‫المستخدمة في الصحيفة أو الموقع اإللكتروني‪،‬‬
‫فهي تجسد األحداث‪ ،‬وتُشعر المستخدم أنه يتعايش‬
‫مع الواقع ومفرداته‪ ،‬لكن مشكلة مقاطع الفيديو‬
‫تكمن في بطء االتصال‪،‬‬

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

‫وثمة نقطتان تخصان ملفات الفيديو‪:‬‬

‫‪ ‬األولى تتعلق بالصوت ودرجة نقائه وحجمه ومعاينته‪.‬‬

‫‪ ‬الثانية تتعلق بملفات الفيديو‪ ،‬وتتمثل في عرض الصور‪.‬‬

‫وتتشابه ملفات الفيديو الذي يقدم في التلفزيون مع ملفات الفيديو التي تُعرض على اإلنترنت‪ ،‬من حيث‬
‫اعتمادهما على فكرة اإلطارات‪ ،‬ويختلفان من حيث عددها‪ ،‬فالكمبيوتر يعرض الصورة بطريقة تتابعية‬
‫إطار في الثانية الواحدة‪.‬‬
‫ا‬ ‫‪ ،Sequence‬بينما يعرض التلفزيون ‪ 51‬صورة في ‪25‬‬

‫فالصور المتحركة على اإلنترنت إذا ليست إال صو ار ثابتة متعاقبة العرض خالل فترة زمنية‪ ،‬مما يؤدي‬
‫إلى الشعور بالحركة‪ ،‬ويتم عرض اللقطات بسرعة ‪ 24‬إطا ار في الثانية‪.‬‬

‫‪227‬‬
 ‫العوامل التي تتحكم بدقة مقاطع الفيديو المنشورة على صفحة الويب‪:‬‬

‫هناك العديد من العوامل التي تتحكم بدقة مقاطع الفيديو المنشورة على صفحة الويب‪ ،‬منها‪:‬‬

‫‪ -1‬معدل اإلطار‪:‬‬
‫ويقصد به عدد اإلطارات المعروضة في الثانية الواحدة‪ ،‬وكلما زاد عدد اإلطارات المعروضة في‬
‫ُ‬
‫وزد حجم الملفات‪ ،‬ولحل هذه المشكلة يجب أال يتجاوز‬
‫الثانية زادت جودة الصور المعروضة ا‬
‫عدد اإلطارات خمسة عشر إطا ار في الثانية الواحدة‪ ،‬وال يقل عن عشر إطارات لكي ال تقل جودة‬
‫الصورة المعروضة‪.‬‬
‫‪ -2‬مستوى اإلطار‪:‬‬
‫ويقصد بها دقة اإلطارات أي عدد البيكسالت المعروضة على الشاشة من الفيديو‪ ،‬ويرى‬
‫ُ‬
‫المصممون أن ال تزيد مساحة ملف الفيديو عن ‪ 241‬بيكسل عرضا × ‪ 181‬بيكسل ارتفاعا‪،‬‬
‫مما يؤدي إلى بطء التحميل‪ ،‬وال تقل عن ‪ 161‬عرضا × ‪ 121‬ارتفاعا‪ ،‬مما يؤدي إلى عدم‬
‫وضوح الصورة‪.‬‬
‫‪ -3‬عمق األلوان‪:‬‬
‫يؤثر عمق األلوان في جودة الصورة‪ ،‬ويتدرج عمق األلوان من أحادي األلوان (أبيض وأسود) إلى‬
‫‪ 32‬بت‪ ،‬ويخضع عمق األلوان وفقا للمنظر المراد إب ارزه‪ ،‬وال بد من استخدام أعلى عمق لأللوان‬
‫إذا ما كان المشهد يتناول حدثا دقيق التفاصيل‪ ،‬مثل‪ :‬التصوير تحت سطح الماء‪ ،‬أو في أعماق‬
‫الخاليا‪ ،‬أو داخل نواة الذرة‪.‬‬
‫‪ -4‬حساب الضغط‪:‬‬
‫يؤثر حجم الضغط المستخدم في جودة ملفات الفيديو‪ ،‬والضغط ضروري لملفات الفيديو حتى‬
‫يصغر حجم الملف ويسهل تحميله على اإلنترنت‪ ،‬ودقيقة واحدة من دون ضغط يصل عدد‬
‫الصور فيها إلى نحو ‪ 611‬صورة‪ ،‬فضال عن الصوت المرافق‪ ،‬مما يعني أنها تحتاج إلى وقت‬
‫أطول للتحميل‪ ،‬ولحل هذه المشكلة تلجأ صفحات الويب إلى استخدام الضغط والفك ‪،Codec‬‬
‫وتقوم هذه التقنية على تقليل عدد اإلطارات المعروضة أو تقليل عمق األلوان‪.‬‬

‫‪228‬‬
 ‫أنواع ملفات الفيديو‪:‬‬

‫تتعدد أنواع ملفات الفيديو التي يمكن عرضها على اإلنترنت‪ ،‬ومن أشهرها‪:‬‬

‫‪ -1‬ملفات الـ ‪ :Quick Time‬وقد طورت هذه‬

‫الملفات شركة ‪ ،Apple‬لكي تتوافق مع‬
‫أجهزتها المعروفة ‪،Macintosh‬‬

‫وتنتهي ملفاتها بامتداد ‪ QT‬و‪ ،MOV‬وهذه الملفات تتميز بقابليتها للضغط والفك بسرعة كبيرة‪.‬‬
‫‪(VFWVideo‬‬ ‫‪for‬‬ ‫(‬ ‫الـ‬ ‫‪ -2‬ملفات‬
‫‪ :Windows‬طُورت هذه الملفات من قبل‬
‫شركة ‪ ،Microsoft‬وتنتهي ملفاتها بامتداد‬
‫‪ ،AVI‬لكن هذه الملفات تتصف بكبر‬
‫حجمها‪ ،‬وعدم دعمها لخاصية ضغط وفك‬
‫الملفات‪.‬‬

‫‪ -3‬ملفات الـ ‪(MPEG) Moving Picture‬‬

‫‪ :Experts Group‬وتتميز هذه الملفات‬
‫بأنها تعرض صو ار عالية الجودة‪ ،‬لكنها‬
‫كبيرة الحجم‪.‬‬

‫‪229‬‬
 ‫طرق تقديم ملفات الفيديو‪:‬‬
‫تقدم مقاطع الفيديو في الصحف والمواقع‬
‫اإللكترونية بطريقتين‪:‬‬

‫‪ ‬التحميل ‪ Download‬على جهاز العميل‬

‫ثم تشغيله بعد ذلك‪.‬‬
‫‪ ‬البث المباشر ‪ Streaming‬لكنها تتصف‪:‬‬
‫‪ o‬بعدم دقة صور ملفات الفيديو‪.‬‬
‫‪ o‬عدم وضوح صوتها‪.‬‬

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

‫‪ -1‬يجب أن تكون ملفات الفيديو قليلة الحجم حتى تُحمل بسرعة‪.‬‬

‫‪ -2‬يجب أن تقدم مع الموضوعات النادرة وغير المتكررة‪ ،‬أو تلك التي لها مسحة تاريخية يندر‬
‫وجودها‪.‬‬
‫‪ -3‬يجب أن تتمتع بالجودة المرئية‪ ،‬وال يشوبها التشويش‪.‬‬

‫‪230‬‬
 ‫رابعاً‪ :‬النص المتشعب (الفائق) ‪Hypertext‬‬
‫ُيعد النص المتشعب جزءا من الوسائط المتشعبة أو‬
‫الفائقة وشكال من أشكالها‪ ،‬وهي مجموعة من عقد‬
‫(مجموعات) النصوص والصور والصوت‪ ،‬مرتبطة‬
‫بوصالت إلكترونية‪ ،‬لتشكل نظاما مبنيا على‬
‫الحاسب‪ ،‬وينتقل المستخدم من عقدة إلى أخرى إما‬
‫باتباع الوصالت القائمة‪ ،‬أو إنشاء وصالت جديدة‪،‬‬
‫ويمكن االستدالل على هذه الروابط من خالل‬
‫األزرار‪ ،‬أو النقاط الساخنة ‪ Hot Points‬التي‬
‫تميز إما بلون مختلف أو بخط مائل‪.‬‬

‫تعود فكرة النص المتشعب إلى ‪ Ted Nelson‬في الستينيات‪ ،‬والتي كانت نهاية مجموعة من األفكار‬
‫التي حاولت تجميع النتاج الفكري العالمي وتنظيمه بحيث يسمح للراغبين بالحصول عليه بسهولة ويسر‪،‬‬
‫كآلة ‪ ،Vannevar Buch‬الـ ‪ ،Memex‬والتي سعت إلى إنشاء نظام معلومات شخصي تسمح باختزان‬
‫الكتب والسجالت والمراسالت‪ ،‬وتساعد في سرعة ومرونة االسترجاع‪ ،‬ولكن الوصول إلى هذه المعلومات‬
‫عن طريق الوصالت والروابط كان أم ار مستحيال‪.‬‬
‫والنص المتشعب يحاكي طريقة تفكير المخ البشري‪ ،‬فاألفكار في ذهن اإلنسان ليست وحدات منفصلة‪،‬‬
‫والذاكرة لديه مرتبطة بذواكر أخرى‪ ،‬يستدعيها اإلنسان عندما يتحدث‪ ،‬فتتشعب أفكاره وتتفرع‪ ،‬وقد يعود‬
‫إلى الحديث األصلي‪ ،‬وقد ال يعود‪ ،‬ويعرف ‪ Nelson‬النص المتشعب بأنه‪" :‬الكتابة غير الخطية والتي‬
‫يتفرع من خاللها النص سامحا للقارئ باالختيار‪ ،‬ببساطة إنه سلسلة من نصوص كثيرة ومتشابكة عن‬
‫طريق روابط تعرض للقارئ مسارات مختلفة"‪.‬‬

‫‪231‬‬
 ‫وقد أضاف النص المتشعب لإلخراج الصحفي‬
‫اإللكتروني مساحات ال محدودة من المساحات‬
‫االفتراضية ومن المسارات التي يمكن أن يسلكها‬
‫المستخدم في أثناء تعرضه للمضمون اإلعالمي‬
‫وفق رغباته وحاجاته‪ ،‬وتبرز الحاجة إلى النص‬
‫المتشعب وتقسيم النص على شاشات مختلفة؛ ألن‬
‫المستخدم يفقد نحو ‪ %25‬من تركيزه عند القراءة‬

‫من شاشة الكمبيوتر‪ ،‬كما أن الكتابة السردية الطويلة لم تعد تالئم التطورات المتالحقة في األحداث‪،‬‬
‫التحديث المستمر لألخبار يتم بسهولة أكثر عندما يتم تقسيم النص‪ ،‬وربطه بروابط‪ ،‬فالنص المتشعب‬
‫ُ‬ ‫و‬
‫يعتمد على‪ :‬الوصالت ‪ ،Nodes‬والروابط ‪ ،Links‬وترتبط هذه الوصالت بوصالت أخرى عن طريق‬
‫الروابط التي يمكن أن تكون ثنائية االتجاه‪ ،‬كما يمكن أن تكون هرمية من األعلى إلى األسفل‪.‬‬

‫العناصر الرئيسة للنص المتشعب‪:‬‬

‫النص المتشعب يتكون من ثالثة عناصر رئيسية‪:‬‬
‫العقد أو الكتل ‪ :Nodes‬ويمكن لهذه العقد أن تحوي كلمة أو‬
‫‪ -1‬قاعدة بيانات بالنص‪ ،‬وتسمى ُ‬
‫صورة‪ ،‬أو مقطعا موسيقيا‪ ،‬وتمثل هذه العقد في النص المتشعب بأسلوبين مختلفين‪:‬‬
‫‪ ‬األول‪ :‬نظم النص المتشعب المبني على األطر ‪ :Frame-Based‬وفيه يتم تمثيل‬
‫أجزاء المعلومات في أطر فردية‪ ،‬واتباعُ إحدى الوصالت سينقل المستخدم من إطار‬
‫على الشاشة إلى إطار جديد ُيعرض على الشاشة قد يكون في نوافذ متعددة‪.‬‬
‫‪ ‬الثاني‪ :‬نظم النص المتشعب المبني على اللف ‪ :Scrolling-Based‬وفيه يتم تمثيل‬
‫ويستدل عليها من خالل أزرار داخل النص‪ ،‬وعندما يجري‬
‫المعلومات غير المتتابعة‪ُ ،‬‬
‫تصفحها يتم لف النص إلى األعلى أو األسفل‪ ،‬أو إلى اليمين أو اليسار‪.‬‬
‫‪ -2‬شبكة الداللة اللفظية‪ ،‬الروابط ‪ :Links‬وتقود هذه الروابط إلى مجموعة متنوعة من الموضوعات‬
‫والمواد والصفحات‪ ،‬ومن أشكال الروابط‪ :‬األيقونات والصور والكلمات المفتاحية‪ ،‬وتساعد هذه‬

‫‪232‬‬
‫الروابط في تسهيل البحث والوصول إلى المعلومات‪ ،‬كما تساعد في الحصول على خلفيات‬
‫للموضوعات المطروحة‪.‬‬
‫‪ -3‬أدوات إيجاد الوصالت‪ :Bottons :‬ويمكن أن تكون كلمة أو أيقونة‪ ،‬أو أي رسومات تُعد مصد ار‬
‫لوصلة تنشط بعد الضغط عليها‪.‬‬

‫نظرية النص المتشعب‪:‬‬

‫نظ ار ألهمية النص المتشعب وعالقته الوطيدة مع المصمم والكاتب والمستخدم‪ ،‬فقد توصل الباحثون إلى‬
‫وضع نظرية النص المتشعب التي تؤطر وترسم طبيعة هذه العالقة‪ ،‬وتبحث في مدى إفادة كل طرف في‬
‫العالقة السابقة من هذا النص‪ ،‬وتطرح هذه النظرية العديد من األفكار منها‪:‬‬
‫‪ -1‬يساعد النص المتشعب القارئ بوضع نفسه في الحياة الواقعية عند التصفح‪ ،‬وأن يحكم على‬
‫األشياء واألفكار من خالل ما يقدم له من معلومات‪ ،‬وليس من وجهة نظر المحرر‪.‬‬
‫‪ -2‬يشجع القارئ على استخدام وتطوير مهاراته وخبراته ومعارفه السابقة لتقوده خالل النص‬
‫المتشعب‪ ،‬وليس بناء على تنظيم الكاتب للنص‪.‬‬
‫‪ -3‬ال يسلك المستخدمون المسلك نفسه في النصوص المتشعبة‪ ،‬مما يؤدي إلى اختالف فهمهم‬
‫للنصوص المعروضة‪.‬‬
‫‪ -4‬يمكن للمستخدمين في بعض تطبيقات الصحف اإللكترونية كالمنتديات وضع روابطهم‬
‫الخاصة‪ ،‬ومعلوماتهم الخاصة‪ ،‬مما يجعلهم مشاركين أكثر في هذه الوسائل‪.‬‬
‫‪ -5‬ال يضطر الكاتب إلى طرح كل معلوماته في النص المعروض‪ ،‬فالروابط والوصالت ستحمل‬
‫للمستخدم هذه المعلومات‪.‬‬
‫‪ -6‬ال يضطر الكاتب إلى سلسلة معلوماته في ترتيب محدد‪ ،‬بداية ووسط ونهاية‪ ،‬فالمستخدم لن‬
‫يسلك هذا الترتيب‪ ،‬ويقتصر دور الكاتب على ترتيب الروابط التي يمكن أن يسلكها‬
‫المستخدم‪.‬‬
‫‪ -7‬ال يظهر الكاتب في النص المتشعب‪ ،‬بل يجب أن يموت نظريا‪ ،‬ليعطي المستخدم حرية‬
‫اختيار المسارات والمعلومات التي يطلبها‪.‬‬

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

‫معايير تصميم النص المتشعب‪:‬‬

‫توصل الباحثون في مجال التصميم إلى مجموعة‬
‫من المعايير التي يجب أن يلتزم بها المصمم عند‬
‫تحويل النص العادي إلى نص متشعب‪ ،‬وعرضه‬
‫في الصحيفة أو الموقع اإللكتروني‪ ،‬وتتلخص هذه‬
‫المعايير في‪:‬‬

‫‪ -1‬مراعاة كثرة استخدام النص من قبل‬

‫المستخدمين‪.‬‬

‫‪ -2‬مراعاة توافر نسخ إلكترونية للنص المتشعب‪.‬‬

‫‪234‬‬
 ‫‪ -3‬قابلية النص للتحويل إلى نص متشعب‪ ،‬وجدوى عملية التحويل‪.‬‬
‫‪ -4‬تحديد المالمح البنائية للنص المتشعب‪ ،‬ومراعاة تميز مكوناته‪.‬‬
‫‪ -5‬إمكانية النص المتشعب في تغيير أسلوب القراءة عند المستخدم‪ ،‬وتغيير طرق القراءة والتفكير‪.‬‬

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

‫‪236‬‬
 ‫الخالصة‬

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

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

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

‫‪237‬‬
 ‫المراجع‬

‫‪ -1‬يحيى الميتمي‪ ،‬معين صالح‪ ،)2112( ،‬تفضيالت مستخدمي اإلنترنت لتصميم المواقع اإلخبارية‬
‫العربية‪ ،‬رسالة ماجستير غير منشورة‪ ،‬جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -2‬موسى أحمد‪ ،‬محمد األمين‪ ،)2115( ،‬توظيف الوسائط المتعددة في اإلعالم اإللكتروني العربي‪،‬‬
‫مؤتمر صحافة اإلنترنت‪ :‬الواقع والتحديات‪ ،‬جامعة الشارقة‪ ،‬كلية االتصال‪.‬‬
‫‪ -3‬مصطفى حسين‪ ،‬محمد‪ ،)2111( ،‬تقييم جودة المواقع اإللكترونية‪ :‬دراسة تحليلية مقارنة بين‬
‫بعض المواقع العربية واألجنبية‪ ،‬مجلة تكريت للعلوم اإلدارية واالقتصادية‪ ،‬المجلد‪ ،6 :‬العدد‪.18 :‬‬
‫‪ -4‬جودة محمد مؤيد‪ ،‬هيثم‪ ،)2111( ،‬تأثير األساليب اإلخراجية للصحف اإللكترونية على العمليات‬
‫اإلدراكية لدى عينة من طالب الجامعة في إطار نظرية تمثيل المعلومات‪ ،‬دراسة شبه تجريبية‪،‬‬
‫رسالة دكتوراه غير منشورة‪ ،‬جامعة المنصور‪ ،‬كلية التربية النوعية‪ ،‬قسم اإلعالم التربوي‪.‬‬
‫‪ -5‬فتحي محمد رزق‪ ،‬منار‪ ،)2112( ،‬تصميم المواقع اإللكترونية للصحف المصرية على شبكة‬
‫اإلنترنت‪ ،‬دراسة مقارنة في التقنيات والقائم باالتصال والجمهور‪ ،‬رسالة دكتوراه غير منشورة‪،‬‬
‫جامعة القاهرة‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪ -6‬محمود محمد أحمد محسب‪ ،‬حلمي‪ ،)2117( ،‬إخراج الصحف اإللكترونية على شبكة اإلنترنت‪،‬‬
‫القاهرة‪ ،‬دار العلوم للنشر‪.‬‬
‫‪ -7‬سالم تربان‪ ،‬ماجد‪ ،)2118( ،‬اإلنترنت والصحافة اإللكترونية‪ ،‬رؤية مستقبلية‪ ،‬ط‪ ،1‬القاهرة‪ ،‬الدار‬
‫المصرية اللبنانية‪.‬‬
‫‪ -8‬رسمي موسى‪ ،‬انتصار‪ ،)2114( ،‬تصميم واخراج الصحف والمجالت واإلعالنات اإللكترونية‪،‬‬
‫ط‪ ،1‬بغداد‪ ،‬مكتبة الذاكرة‪.‬‬
‫‪ -2‬حسين جمعة موسى‪ ،‬بيرق‪ ،)2111( ،‬فن اإلخراج الصحفي لمواقع الجرائد اإللكترونية العراقية‪،‬‬
‫دراسة تحليلية (الصباح والزمان والدعوة)‪ ،‬رسالة غير منشورة تعد جزءا من متطلبات الحصول على‬
‫الماجستير‪ ،‬جامعة بغداد‪ ،‬كلية اإلعالم‪ ،‬قسم الصحافة‪.‬‬
‫‪10- Beaird, Jason, (2010), The Principals of Beautiful Web Design,‬‬
‫‪(2.Ed), Canada, Site Point Pty Ltd.‬‬

‫‪238‬‬
 11- Jarrar, Suba, (2002), Web Design Guidelines, For WSDM,
Dissertation Submitted in View of Obtaining a degree of Master
Science in Computer Science, Vrije Universiteit Brussel, Dep.of
Computer System.
12- Powell, Thomas, (2002), Web Design: The Complete Reference
(2.Ed), USA, McGraw-Hill Co.
13- Heller, Steven & Womack, David, (2008), Becoming a Digital
Designer, A guide to Careers, video, Broadcast, Game + Animation
Design, USA, John Wiley, Sons, inc.
14- Sklar, Joel, (2012), Principles of Web Design, (5.ED), USA,
Course Technology.
Becoming a Digital Designer
A Guide to Careers in Web, Video, Broadcast, Game, + Animation Design Becoming
a Digit

239
 ‫التمارين‬

‫اختر اإلجابة الصحيحة‪:‬‬

‫‪ .1‬ليس من أنواع النص المتشعب‪:‬‬

‫‪ .A‬النص المتشعب الداخلي‪.‬‬
‫‪ .B‬النص المتشعب الخارجي‪.‬‬
‫‪ .C‬النص المتشعب والقوى الفاعلة‪.‬‬
‫‪ .D‬النص المتشعب والقارئ‪.‬‬

‫اإلجابة الصحيحة‪ D :‬النص المتشعب والقارئ‬

‫‪ .2‬من معايير استخدام ملفات الفيديو‪:‬‬

‫‪ .A‬يجب أن تكون ملفات الفيديو كبيرة الحجم حتى تقدم معلومات أكثر‪.‬‬
‫‪ .B‬يجب أن تقدم مع الموضوعات المتكررة‪.‬‬
‫‪ .C‬يجب أن تتمتع بالجودة المرئية‪ ،‬وال يشوبها التشويش‪.‬‬
‫‪ .D‬كل ما سبق صحيح‪.‬‬
‫‪ .E‬اإلجابة ‪ C‬فقط صحيحة‬

‫اإلجابة الصحيحة‪ E :‬اإلجابة ‪ C‬فقط صحيحة‬

‫‪ .3‬يسلك المستخدمون المسلك نفسه في النصوص المتشعبة‪ ،‬مما يؤدي إلى اختالف فهمهم‬
‫للنصوص المعروضة‪.‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ B :‬خطأ‬

‫‪240‬‬
‫‪ .4‬ملفات الـ ‪ Quick Time‬طورتها شركة ‪ ،Apple‬لكي تتوافق مع أجهزتها المعروفة الـ‬
‫‪.Macintosh‬‬
‫‪ .A‬صح‬
‫‪ .B‬خطأ‬

‫اإلجابة الصحيحة‪ A :‬صح‬

‫‪241‬‬