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

‫برمجة الويب‬

‫لكى نصبح مبرمجين للويب باستخدام سنحتاج إلى ما يلى ‪:‬‬

‫معرفة مبدئية بلغة ‪ HTML‬لكتابة المحتوى الساسي‬ ‫•‬

‫للصفحة‪..‬‬
‫لنشاء صفحات ديناميكية بسيطة سنحتاج فهم ‪VBScript..‬‬ ‫•‬
‫لنشاء صفحات ديناميكية أعقد قليل ً سنحتاج لفهم ‪Dynamic‬‬ ‫•‬
‫‪.. HTML‬‬
‫لو أردنا دعم الصفحات بعناصر تحكم خاصة سنحتاج لفهم‬ ‫•‬
‫‪ActiveX Object‬‬
‫لنشاء صفحات نشطة في الحال ناحية الخادم نحتاج لفهم‬ ‫•‬
‫‪..ASP‬‬

‫ما هو النترنت‬

‫النترنت عبارة شبكة من الجهزة الضخمة المتصلة عبر وسائل اتصالت‬

‫كاللياف الضوئية والقمار الصناعية ‪ ،‬وتتصل بهذه الجهزة الضخمة‬
‫أجهزة أقل فأقل في الحجم في تكوين شجري متشعب حتى تصل إلى‬
‫مستوى الجهزة الشخصية يوجد عدة تطبيقات منفصلة تعمل على‬
‫النترنت منها ‪:‬‬
‫شبكة الويب العالمية ‪ World Wide Web:‬وهى مجموعة من‬ ‫•‬
‫الصفحات ‪ Pages‬يتم عرضها على متصفح الويب يمكن أن تحتوى‬
‫على أخبار أو معلومات أو روابط لصفحات أخرى أو روابط لبرامج‬
‫يمكن أن تقوم بانزالها إلى جهازك ‪.‬‬
‫خدمة البريد اللكترونى ‪ Email:‬وهى تستخدم لنقل رسائل‬ ‫•‬
‫إلى أشخاص بعينهم على النترنت‪.‬‬
‫التخاطب ‪ Chat:‬اتصال حى بين اثنين أو أكثر من‬ ‫•‬
‫المستخدمين المتصلين بانترنت في نفس اللحظة ‪ .‬هذا التصال‬
‫يمكن أن يكون بعدة طرق فإما أن يكون بالنصوص المكتوبة أو‬
‫الصوت أو الصورة تبًعا للبرنامج المستخدم والجهاز ‪Hardware‬‬
‫الموجود في أجهزة المستخدمين ‪.‬‬
‫خدمة نقل الملفات ) ‪ ( FTP‬تتيح نقل ملف أو أكثر بين‬ ‫•‬
‫الجهزة المتصلة بالنترنت‬

‫أ‪.‬سالي دفع اللععه عععوض ‪1‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫كيف تعمل شبكة النترنت‬

‫تعمل شبكة الويب بنظام ‪ Client /Server‬بمعنى أنه يوجد جهاز مستخدم‬
‫متصل ويتخاطب مع جهاز خادم هو خادم الويب الذى تكون على اتصال به‬
‫اثناء التصفح‪..‬‬

‫يتم التخاطب بين جهازك والخادم من خلل اسلوب قياسي يسمى‬

‫‪ HTTP‬لنقل صفحات الويب من الخادم إلى جهازك ‪.‬‬ ‫‪Protocol‬‬

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

‫مكونات شبكة النترنت ‪:‬‬

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

‫‪ HTTP‬اختصار لع ‪ Hypertext Transfer Protocol‬وهععو الطريقععة الرئيسععية‬

‫والكثر إنتشارا لنقل البيانات في الويب )‪.(www‬الهدف الساسي من بناءه‬
‫كان توفير طريقة لنشر وإستقبال صفحات ‪.HTML‬‬

‫‪)HTTP‬برتوكول نقل النص المتشعب( هو نظععام نقععل مععواد النععترنت عععبر‬

‫الشبكة العنكبوتية ) الويب(‪ .‬ويعتبر وثيقة )نص( تشتمل على مجموعة من‬
‫الكلمات التي تربط هذه الوثيقة بوثائق اخرى وتسمى ) روابط(‪.LINKS‬‬

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

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

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

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

‫أ‪.‬سالي دفع اللععه عععوض ‪2‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
‫يعععرف بروتوكععول ‪ HTTP‬ثمانيععة وسععائل )تسععمى أحيانععا )‪)(verbs‬أفعععال((‬
‫تصف الطلب المراد على المصدر المرفق‪.‬‬

‫‪ : HEAD‬تطلب ردا مطابقا لذلك الذي يرجعه طلب ‪، GET‬‬ ‫‪.1‬‬

‫لكن بدون قسم )‪ .(body‬يكون هذا مفيدا للحصععول علععى معلومععات‬
‫عن المطلوب دون نقل على كامل المحتوى‪.‬‬
‫‪ :GET‬طلب عرض ‪ ،‬وهو أكثر وسيلة مستخدمة اليععوم علععى‬ ‫‪.2‬‬
‫الشبكة‪.‬‬
‫‪ : POST‬إرسال معلومات من المستخدم الزبون )معن ‪form‬‬ ‫‪.3‬‬
‫في صفحة ‪ html‬مثل( للهدف المرفق‪ .‬توضع البيانععات ضععمن جععزء )‬
‫‪ (body‬من الطلب‪.‬‬
‫‪ :PUT‬تحميل إلى الهدف‪.‬‬ ‫‪.4‬‬
‫‪ : DELETE‬مسح الهدف )نادرا ما تستخدم(‪.‬‬ ‫‪.5‬‬
‫‪ : TRACE‬ترد بذات الطلععب الععذي وصععل‪ ،‬وذلععك ليسععتطيع‬ ‫‪.6‬‬
‫الزبون أي تعديلت تقوم بها خوادم في الطريق‪.‬‬
‫‪ : OPTIONS‬ترد الوسائل التي يدعمها خادم الويب‪ ،‬يستخدم‬ ‫‪.7‬‬
‫لفحص كيف يعمل خادم الويب‪.‬‬
‫‪ : CONNECT‬للستخدام مع خادم وكيل قد يحول إلى نفق‬ ‫‪.8‬‬
‫‪.SSL‬‬

‫تععدعم خععوادم الععويب ‪ GET‬و ‪ HEAD‬علععى أقععل تقععدير‪ ،‬وعععادة مععا تععدعم‬
‫‪ OPTIONS‬أيضا‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪3‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫التحضير لبناء مواقع الويب‬

‫أصبح معلوما لديك أن الويب هي مجموعة الوثائق اللكترونية المترابطة‬

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

‫مواقع شخصية‪ :‬يبينها الفراد لعرض أفكارهم وآرائهم‬ ‫‪.1‬‬

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

‫التخطيط للموقع )‪(Site Planning‬‬

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

‫دد الهداف المرجوّ تحقيقها من الموقع‪.‬‬

‫يجب عليك أن تح ّ‬ ‫‪‬‬
‫وسوف تساعدك الجابة عن السئلة التالية في تحديد تلك الهداف‪:‬‬

‫• ما طبيعة الدور الذي سيؤديه الموقع ) تثقيفي أم تعليمي‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪4‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
‫تنظيم هرمي ُيبّين صفحات الموقع‪ .‬ويبدأ رأس الهرم‬ ‫•‬
‫بصفحة الموقع الفتتاحية )‪ ،(Web Site Home page‬وُيبّين كل‬
‫مستوى فيه الصفحات المتفرعة عن المستوى العلى منه‪.‬‬
‫شرح موجز لمحتويات كل صفحة على حدة‪ ،‬وتحديد‬ ‫•‬
‫الروابط الموجودة في الصفحة‪.‬‬
‫ضح بواسطة السهم التجاه الذي ينبغي أن‬ ‫شرح يو ّ‬ ‫•‬
‫ً‬
‫تسير الروابط تبعا له‪.‬‬

‫م في ضوء‬
‫ينبغي أن نشير هنا إلى أن التخطيط لبناء الموقع يجب أن يت ّ‬
‫المور التالية‪:‬‬

‫‪ ‬إعداد الميزانية اللزمة لتغطية تكاليف إطلق الموقع على النترنت‪،‬‬

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

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

‫أ‪.‬سالي دفع اللععه عععوض ‪5‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫جمع وإعداد المحتوى )‪(Content Preparation‬‬

‫منه الموقع من مواد مقروءة أو مسموعة أو‬ ‫محتوى الموقع هو كل ما يتض ّ‬

‫مرئية‪ .‬ومواد المحتوى هي الدوات الرئيسة التي ُتتيح للموقع أن يؤدي‬
‫دوره‪.‬‬

‫م بها جمع وإعداد مواد المحتوى على‬

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

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

‫وفيما يخص مواد المحتوى المقروءة من نصوص ومقالت‪ ،‬فإنه يجدر‬

‫اللتزام بما يلي‪:‬‬

‫الموضوعية؛ فالمادة التي تفتقر إلى الموضوعية تعجز عن‬ ‫‪‬‬

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

‫تنسيق صفحات الويب )‪(Page Layout‬‬

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

‫الحرص على تنسيق الصفحة بحيث يكون المحتوى الساس‬ ‫‪.1‬‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪6‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
‫دم حل‬ ‫تنسيق الصفحة باستخدام الجداول جهدا أكبر بقليل‪ ،‬ولكنه يق ّ‬
‫سن سرعة الستعراض‪.‬‬ ‫ناجعا ً ُيح ّ‬
‫الهتمام بإضافة النص الذي يظهر في شريط الحالة )‪Status‬‬ ‫‪.3‬‬
‫‪ (Bar‬لنه يساعد الزائر في اتخاذ قرار متابعة استعراض الموقع أو‬
‫النتقال إلى غيره‪.‬‬
‫الهتمام باختيار أنواع الخطوط وتحري الواضحة منها‪.‬‬ ‫‪.4‬‬
‫الهتمام باختبار تنسيق صفحات الموقع على مستعرضات‬ ‫‪.5‬‬
‫مختلفة؛ للتأكد من ظهور جميع أجزاء الصفحة‪ .‬حاول أن تجعل‬
‫تنسيق الصفحات قياسيا ليكون ملئما ً لجميع المستعرضات‪.‬‬
‫انتقاء العناوين الجذابة ودمجها في تصميم ترويسة الصفحة )‬ ‫‪.6‬‬
‫‪. .(page header‬‬
‫ضبط أحجام النصوص في الصفحات بما يتلءم مع درجة‬ ‫‪.7‬‬
‫اهتمام الزائر بموضوع الصفحة‪ ،‬فكلما ازداد اهتمام الزائر‬
‫بالموضوع ازداد عدد الصفحات الفرعية التي يستعرضها وازداد‬
‫ضل‬ ‫الوقت الذي يخصصه لقراءة نصوص تلك الصفحات‪ ،‬ولذلك ُيف ّ‬
‫أن ُتراعى الحجام التالية في نصوص صفحات الموقع‪:‬‬

‫حوالي ‪ 100‬كلمة في الصفحة الفتتاحية للموقع‪.‬‬ ‫•‬

‫حوالي ‪ 200‬كلمة‪/‬صفحة في صفحات الملخصات‬ ‫•‬
‫والمقدمات‪.‬‬
‫حوالي ‪ 400‬كلمة‪/‬صفحة في الصفحات التفصيلية‬ ‫•‬
‫والفرعية‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪7‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫مواقع الويب ‪:web sites‬‬
‫موقع الويب هو مجموعة من وثائق النص المترابط )‪hypertext‬‬
‫خّزنة في خادمات الويب‪ .‬وتقوم هذه المواقع على السس‬ ‫م َ‬
‫‪ (documents‬ال ُ‬
‫الرئيسة التالية‪:‬‬
‫التصميم )‪.(layout‬‬ ‫•‬
‫المحتويات )‪.(Content‬‬ ‫•‬
‫الروابط )‪.(links‬‬ ‫•‬
‫ت البحار )‪ (navigation tools‬في الويب‪.‬‬‫أدوا ٍ‬ ‫•‬

‫كما تحتوي بعض مواقع الويب مزايا إضافية مثل‪:‬‬

‫الخدمات التفاعلية مع المستخدم )‪.(Interactive services‬‬ ‫•‬
‫البريد اللكتروني )‪.(Email‬‬ ‫•‬
‫خدمة الحوار )‪.(Chatting service‬‬ ‫•‬
‫مجيات جافا )‪.(Java applets‬‬ ‫ُبر ِ‬ ‫•‬
‫أما آلية الوصول إلى مواقع الويب فهي تعتمد على محدد موقععع المصععدر )‬
‫ف بروتوكول نقل النص المترابط )‪ (HTTP‬لنقععل طلبععات‬ ‫‪ ،(URL‬بينما ُيوظ ّ ُ‬
‫رض الويب( إلى خادم الععويب )‬ ‫مستع ِ‬ ‫المستفيدين )‪) (Clients‬التي ترد عبر ُ‬
‫‪ ،(Web server‬ويجيب خادم الععويب بععدوره عععن طريععق إرسععال الصععفحات‬
‫دم لغععة النععص المععترابط )‬
‫المطلوبة من الموقع‪ .‬ومن ناحية أخععرى‪ُ ،‬تسععتخ َ‬
‫‪ (HTML‬لنشاء مواقع الويب‪ ،‬عن طريق نصوص معتمدة ُتحدد لمستعرض‬
‫الويب كيفية ظهور المحتويات‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪8‬‬ ‫مواقع الويب المتحركة‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪9‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫كيف يتم ارسال معلومات استمارة )‪ (HTML form‬للمزود ‪:‬‬
‫كل عنصر من عناصرالستمارة له خاصية اسم ‪ .‬انطر الشكل ‪ 1‬تجد لععدينا‬
‫عنصرين ادخال مختلفة صندوق نص و صندوق كلمة سر لسم المسععتخدم‬
‫و كلمععة السععر بععالترتيب ‪ .‬عنععدما يضععغط المسععتخدم موافععق يتععم ارسععال‬
‫البيانات على شكل أزواج على الشكل التالي اسم=قيمة )‪. (name=value‬‬
‫في حالة كانت خاصية الطريقة ‪ method‬للسععتمارة هععي ‪ GET‬يتععم ارسععال‬
‫البيانات بالحاقها بآخر اسم العنوان الخاص بالبرنامج الععذي يتععولى معالجععة‬
‫الستمارة بعععد علمععة اسععتفهام ‪ .‬بعععد ادخعال السععم و كلمععة المععرور فععي‬
‫الستمارة وضغط موافق سنحصل على سطر عنوان شبيه بالتالي ‪:‬‬
‫‪http://myserver/path/formHandler?username=AbuAnas&pwd=mypassword‬‬
‫احذرأن تستعمل هذه الطريقة لرسال معلومات حساسة مثل كلمة السر أو‬
‫رقم بطاقة ائتمان‪.‬ولكن استعمل طريقة ‪ POST‬حيث أن المعلومات ل تظهر‬
‫في أعلى شاشة المتصفح )هذا الجراء ليس كافي في حالة استخدام‬
‫البطاقات للتجارة اللكترونية بل يجب اتخاذ تدابير أمنية أكثر(‪.‬‬
‫>"‪<FORM action = "http://myserver/path/formHandler" METHOD="GET‬‬
‫>‪User name: <INPUT type="text" name="username"<br‬‬
‫>‪Password : <INPUT type="password" name="pwd"<br‬‬
‫>"‪<INPUT type="submit" value="OK‬‬
‫>‪</from‬‬
‫شكل ‪ 1‬كود ‪ HTML‬للستمارة‬
‫في حالة ‪ POST‬يتم ارسال البيانات في سطر مستقل‪ .‬تعتبر ‪ GET‬هي‬
‫الحالة الفتراضية‪.‬‬

‫‪User name:‬‬
‫‪Password:‬‬
‫‪OK‬‬

‫شكل ‪ 2‬نموذج السععتمارة فععي‬

‫الشكل ‪1‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪10‬‬ ‫مواقع الويب المتحركة‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪11‬‬ ‫مواقع الويب المتحركة‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪12‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫استخدام النصوص المتشعبة الديناميكية ‪DHTML (Dynamic‬‬
‫‪: (HTML‬‬
‫هي ليست لغة ولكن مجعرد خليعط معن ثلث لغعات مختلفعة وهعي لغعة‬
‫النصععوص المتشعععبة ‪ Hyper Text Markup Language‬و لغععة جافععا‬
‫سكريبت ‪ JavaScript‬أو في بي سكريبت ‪ VB Script‬وأخيرا ً لغة قععوائم‬
‫النماط كما يحب أن يسميها البعععض وهععي ‪Cascading Style Sheets‬‬
‫‪.CSS‬‬
‫لكل لغة من هذه اللغات الثلث وظيفة ‪ ،‬وظيفة لغة قوائم النماط هي‬
‫التحكم بالقطع التي ستسخدم في الحركة مثل ً ظهورها واختفاؤها‪،‬‬
‫تحركها من مكان لخر‪ .‬التحكم هنا لتكوينها فقط وليس تحريكها‪.‬‬
‫التحريك مهمة لغة السكريبت المستخدمة‪ ،‬وبالنسبة للنصوص‬
‫المتشعبة هي التحكم بشكل المحتوى ‪.‬‬
‫او هي تطوير للغة ‪ HTML‬القياسية إلى صورة تسمح بانشاء‬
‫الصفحات الديناميكية والتفاعل مع المستخدم‪.‬‬
‫تستخدم المؤثرات بالنصوص المتشعبة الديناميكية في عمل أشياء ل‬
‫يمكن عملها بالتصميم العادي وأبسط مثال على ذلك تغيرشكل الصورة‬
‫عند مرور الفأرة فوقها‪ .‬من أمثلة استخدام هذه الطريقة هي عمل‬
‫مؤثرات بسيطة مثل جعل صورة ثابتة في أسفل ويسار الصفحة‪ ،‬عمل‬
‫نص يتحرك مع الفأرة )هذا المؤثر قد يؤثر على تشتيت ذهن القارئ‬
‫خاصة إذا كان لديك معلومات لقرأتة( وأيضا ً عمل القوائم المنسدلة‬
‫وهي شائعة الستخدام‪.‬‬
‫بالنسبة للنصوص المتحركة‪ ،‬يجب عدم إستخدامها نهائيا ً إل لحد‬
‫السباب التالية فقط‪:‬‬
‫‪ .1‬إذا كانت لديك معلومات متغيرة بكثره وبسرعة أي بشكل‬
‫لحظي مثل آخر أخبار العالم‪ ،‬أسعار السهم‪ ،‬أسعار الصرف‬
‫وهكذا‪.‬‬
‫‪ .2‬إذا كانت لديك محتويات مهمة وكنت حريص على أن يقرأها‬
‫الزائر وعندما تكون أكثر من سطر‪.‬‬
‫‪ .3‬إذا قمت بتغيير أسعارك‪ ،‬منتجاتك أضفت منتجات أو خدمات‬
‫جديدة وهمك جدا ً أن يعرفها القارئ‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪13‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫محتويات صفحة ‪HTML‬‬

‫لستخدام ‪ DHTML‬افتح ‪ DHTML Application‬وليس ‪Standard‬‬

‫‪..EXE‬‬

‫اختر المر ‪ Designs‬من نافذة الفورمات‪ ,‬ثععم اخععتر ‪ DHTMLPage1‬لتظهععر‬

‫لك هذه النافذة‪:‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪14‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫مثال علي ‪DHTML‬‬

‫سننشئ هنا برنامج بسيط‪ ,‬تضغط علي زر فتتغير حالة ‪ ,text‬اتبع‬

‫الخطواط التالية‪:‬‬

‫• ضع زر ‪ Button‬و ‪ text‬علي مكان العمل‪.‬‬

‫• اضغط ضغطا مذدوجا علي الزر و اكتب هذا الكود‪:‬‬

‫‪Private Function Button1_onclick() As Boolean‬‬

‫”‪Button1.Value = “Bibo‬‬

‫‪End Function‬‬

‫وهكذا عند الضغط تتغير الكتابة الي ‪..Bibo‬‬

‫فكما تري ل فرق تقريبا بين ‪ DHTML‬و البرنامج العادي في الكود‪ ,‬فقط‬
‫بعض التغيرات مثل ‪ Caption‬اصبحت ‪ Value‬و ‪ Name‬ستكون ‪. ID‬‬

‫نشر الصفحة‬

‫بعد حفظ الصفحة يجب تحويلها الي ‪ dll‬للستفادة منها‪ ,‬وذلك عن طريق‪:‬‬

‫‪File > MakeDHTMLProject.dll‬‬

‫عند تحويل الصفحة الي ‪ dll‬تحفظ معه هذه الملفات‪:‬‬

‫‪DHTMLProject.dll‬‬

‫‪DHTMLProject_DHTMLPage1.htm‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪15‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫الفلش‪:‬‬
‫نجد ان الفلش قد تجاوز حدود الحركة‪ ،‬حجم الملف‪ ،‬والسكون ‪،‬إن فلش‬
‫يستطيع أن يقوم بأكثر من مجرد حركات فيمكنك عمل موقع كامل‬
‫بقوائمه‪ ،‬محتوياته وحتى برامج التجارة اللكترونية‪ .‬والفلش يستخدم‬
‫الرسوم البعدية وليس الصور ‪ Vector‬وهذا يؤدي إلى صغر حجم الملف‬
‫وسرعة النزال وأخيرا ً يمكنك الفلش من التفاعل مع المستخدم بحيث‬
‫يضغط أزرار ويدخل محتويات‪ .‬وما كان هذا إلى القليل من إمكانيات‬
‫فلش التي يطول شرحها‪.‬‬
‫هذا ل يعني أنه خالي من العيوب‪ ،‬ومن أهم عيوبه‪:‬‬
‫‪ .1‬أنه يحتاج لمشغل لكن هذا الموضوع يعتبر انتهى لن ‪ %90‬من‬
‫مستخدمي النترنت الن لديهم ذلك‪.‬‬
‫‪ .2‬وعيب آخر هو صعوبة وطول وقت تصميم مواقع الفلش لكن‬
‫الوقت والجهد يستحق‪.‬‬
‫‪ .3‬وأخيرا ً صعوبة تعامله مع اللغات الغير لتينية‪.‬‬
‫ما الفرق بين الجافا أبليت‪ ،‬الجافا سكربت‪ ،‬وال ‪ DHTML‬؟‬
‫ل يوجد ارتباط بين لغتي البرمجععة ‪ :‬الجافععا ‪ java‬والجافععا سععكربت ‪ ,java‬فكععل‬
‫منهما مستقلة تماما عن الخرى حتى وإن تشابه اسماهما‪.‬‬
‫لغة الجافا هي المستخدمة لصععناعة الجافععا أبلععت ‪ , java applet‬بينمععا تسععتخدم‬
‫الجافا سععكربت ‪ -‬اللغععة ‪ -‬لصععناعة الجافععا سععكربت ‪ -‬المععؤثرات ‪ -‬ومثلهععا ال ‪) -‬‬
‫‪ , (DHTML‬لغة ترميز لنصوص العليا الديناميكية ‪.‬‬
‫لغة الجافا قامت بتصميمها شركة صن مايكروسستمز ‪ sun Microsystems‬وهي‬
‫أكثر اللغات الثلثة تعقيدا وقوة ‪ ,‬وهي لذلك تأخععذ حجمععا كععبيرا وقععد تععؤثر بقععوة‬
‫على سرعة تحميل الصفحة المستخدمة فيها ‪ ,‬عععادة مععا يتطلععب اسععتخدام هععذه‬
‫اللغة وضع ملععف مسععاند بالمتععداد ‪ - class‬مثل ‪ - lake.class‬وأحيانععا بامتععدادات‬
‫أخرى مثل ‪. java , .jar.‬‬
‫أما الجافا سكربت فهي أيسط وأقععل حجمععا ‪ ,‬وهععي مععن إنتععاج شععركة ‪Netscape‬‬
‫المشهورة بمتصفحها ‪ navigator‬فلنفرق بين لغة الجافا سععكربت ‪ -‬أو تنصععيص‬
‫الجافععا ‪ -‬وتععأثيرات الجافععا سععكربت ‪ -‬نصععوص الجافععا ‪ , -‬فنحععن نسععتخدم اللغععة‬
‫لصناعة التأثيرات ‪ ,‬هنا يععأتي التشععابه بيععن الجافععا سععكربت وال ‪ , DHTML‬فعال‬
‫‪ DHTML‬هي تأثيرات مصنوعة باستخدام لغة الجافا سكربت ‪ ,‬وهي تتشابه فععي‬
‫ذلك مع مؤثرات الجافا سكربت ‪ ,‬بعبارة أخعرى ‪ :‬لغعة الجافعا سععكربت تسعتخدم‬
‫لصناعة شيئين ‪ :‬مؤثرات الجافا سكربت ‪ ,‬ومؤثرات ال ‪. DHTML‬‬
‫إذن ما الفرق بين مؤثرات الجافا سكربت وال ‪ DHTML‬؟‬
‫الجافا سكربت هي نصوص تعمل وحدها داخل الصفحة لحداث التأثيرات ‪ ,‬تماما‬
‫مثل ال ‪ , HTML‬أما ال ‪ DHTML‬فهي تتفاعل مع المتصفح وتسععتخدم امكانيععاته‬
‫لحداث التأثيرات ‪ ,‬مما يجعلها أقوى وأكثر تعقيدا وحجما وإن كانت ل تصل الععى‬
‫قوة الجافا أبلت‪.‬‬
‫هذه مجموعة من النصائح لصحاب المواقع ‪:‬‬
‫أول ً ‪ :‬ما قبل البدء بالتصميم ‪:‬‬
‫‪ .1‬حدد الهدف من موقعك ومن هم جمهوره ‪ ،‬وبالتالي يجب‬
‫تركيز الهدف دون التوسع والتشتت للحصول على أفضل‬
‫النتائج ‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪16‬‬ ‫مواقع الويب المتحركة‬

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

‫أ‪.‬سالي دفع اللععه عععوض ‪17‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬
 ‫ثالثا ً ‪ :‬ما قبل النشر ‪:‬‬

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

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

‫رابعا ً ‪ :‬مراحل ما بعد التصميم والنشر ‪:‬‬

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

‫للبحث عن شيء محدد‪.‬‬
‫‪ .2‬أرسل موقعك لمحركات البحث العالمية باستمرار ليظهر موقعك‬
‫في أول نتائج البحث‪.‬‬
‫‪ .3‬أضف موقعك لدلة المواقع العربية وهي كثيرة ويستخدمها الكثير‬
‫من طالبي المواقع العربية ‪.‬‬
‫‪ .4‬قم بتبادل الروابط ) الوصلت ( مع المواقع الخرى فهذا يزيد‬
‫مركزك في محرك البحث العالمي ‪ ، Google‬وهو ما يسمى ‪Link‬‬
‫‪ . Farm‬فإيصالك بنا يرفع اسهمنا معا ً ‪ ،‬والعكس صحيح ‪.‬‬
‫‪ .5‬وفر خدمة ) أخبر صديقك ( بالموقع ليخبر الزوار غيرهم عن‬
‫الموقع ‪.‬‬
‫‪ .6‬ضع رابط لموقعك في كل بريد ترسله ‪.‬‬
‫‪ .7‬صمم صفحة ) اربط بنا ( وضع فيها بانرات لموقعك وبمقاسات‬
‫متعددة ليضعها الخرون في مواقعهم ‪.‬‬
‫‪ .8‬حاول جمع أكبر عدد من البريد اللكتروني عن طريق وضع ) قائمة‬
‫بريدية ( بالموقع لكي تكون على اتصال دائم بزوار موقعك ‪ ،‬وبهذا لن‬
‫تخسر الزائر بعد خروجه ‪.‬‬
‫‪ .9‬ل تترك رسالة استفسار أكثر من يومين بدون رد ولتجنب ذلك جزئيا ً‬
‫قم بعمل رد آلي لبريد موقعك ‪.‬‬
‫‪ .10‬تابع مجريات الموقع من عدد زيارات ‪ ،‬شكاوي ‪ ،‬مقترحات ‪،‬‬
‫وخلفه ‪.‬‬
‫‪ .11‬جدد محتويات موقعك باستمرار وأضف إليه كل جديد ومفيد ‪.‬‬
‫‪ .12‬حاول أن تجرب أي تغييرات وترى مدى تأثيرها على الزوار ‪.‬‬
‫‪ .13‬إذا كان هدفك تجاري فل تستعجل الكسب أبدًا‪.‬‬

‫أ‪.‬سالي دفع اللععه عععوض ‪18‬‬ ‫مواقع الويب المتحركة‬

‫الكريم‬