المحاضره الأولي ... مقـدمه الي تصميم المواقع

بسم الله الرحمن الرحيم نبدأ دوره تصميم المواقع باستخدام برنامج Expression web ... يعتبر هذا البرنامج هو احدث البرامج المطروحه لتصميم المواقع حتي لحظه كتابه هذه السطور ... فبرنامج Expression web هو الخليفه لبرنامج التصميم الشهير Front page و الذي اعتمدته ميكروسوفت سابقا كمنتجها لتصميم المواقع ...

و قد تم طرح برنامج Expression web ضمن مجموعه تسمي Expression studio تحتوي علي 4 برامج هي :

Expression Web

Expression Blend

Expression Design

Expression Media

في البدايه يجب التفريق بين مهارتين متداخلتين ... مهارة تصميم المواقع و مهارة التطوير

الفرق بين الـ Web Designer و الـ Web Developer

مصطلحين متداخلين عند ناس كتير ... مصمم المواقع و مطور المواقع ... مع ان الاتنين مختلفين تماما عن بعض بل انه وارد جدا ان مصمم الموقع ميكنش عنده القدره علي القيام بمهام مطور الموقع و العكس صحيح

مصمم المواقع Web Designer

بيستخدم احد برامج تصميم المواقع الشهيره ...

هو الشخص المسئول عن وضع الشكل العام للموقع Web Layout ... مسئول عن تنسيق الصفحات ووضع الاستايل الخاص لكل صفحه ... كمان هو المسئول عن تعديلات التصميم اللي بيحتاجها الموقع لاضافه اقسام او ابواب جديده ليه ..

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

عشان تكون مصمم مواقع محتاج تتعلم واحد من البرامج دي Expression Web او Front Page او Dreamweaver

و عشان تكون مصمم مواقع متميز محتاج تنمي مهاراتك في استخدام الـ Photoshop و الـ Flash animation

مطور الموقع Web Developer

بيستخدم مجموعه من لغات البرمجه المخصصه للعمل علي النت

عاده يبدأ عمله بعد انتهاء عمل مصمم المواقع ... وظيفته اضافه مجموعه الاكواد المختلفه اللي بيحتاجها الموقع .. مثال علي كده

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

مثال تاني ... فيه موقع مشهور لتحميل الاغاني بيحدد قدرتك علي التحميل بـ 20 اغنيه فقط في اليوم .. و بتلاقي انك فعلا كل ما بتحمل اغنيه بيتم زياده قيمة العداد بتاعك بمقدار واحد .. الكود المسئول عن الموضوع ده هو مسئوليه مطور الموقع و ليس المصمم

ادوات مطور المواقع بتكون مجموعه مختلفه من لغات البرمجه زي Java و PHP

لا يشترط ان مطور الموقع يكون عنده مهارة التصميم و العكس ايضا صحيح ..

دورتنا دي بتعتبر المستوي الأول في تصميم المواقع, لأن مصممين المواقع بيتم تقيمهم من خلال 3 مستويات للاداء

مستوي أول .. مصمم مواقع يستطيع فقط استخدام برنامج تصميم زي Front Page او Expression Web

مستوي ثاني.. مصمم مواقع يجيد استخدام برامج التاثيرات المتحركه Animation Programs زي مثلا Flash MX

مستوي ثالث.. مصمم مواقع بيجيد استخدام برنامج Photoshop

و بوصولك للمستوي التالت بتكون بقيت في اعلي درجه من الأجاده و التميز في مجال تصميم المواقع , فعليا لو تاملنا في كل المواقع اللي بندخلها هنلاقي انها بيتم تصميم الـ Layout بتاعها ببرنامج الـ Photoshop و في معظم الوقت فيها اضافات متحركه بسيطه

و لاجاده هذه المهارة _ التصميم باستخدام الـ Photoshop _ محتاج في البدايه تكون عارف تستخدم اي من برامج تصميم المواقع و بعدها تاخد دوره مخصوصه اسمها Building Web Layout Using Photoshop

و ماذا عن Web Administrator

يا تري بقي الادمن Admin بتاع الموقع بيكون عنده مهارة التصميم ولا مهارة التطوير ؟؟ ... الحقيقه ان مدير الموقع لا يشترط فيه قدرته علي التصميم او التطوير !!

مدير الموقع _ عاده صاحب الموقع _ هو المسئول عن مراقبه اداء الموقع و مراجعه الاحصائيات المتعلقه بيه .. مسئول عن ايجاد افكار جديده لتطوير الموقع .. مسئول عن التبادل الاعلاني مع الموقع ...

يعني هو عامل شبه رئيس مجلس الاداره كده .. مهتم بانه يعرف كل حاجه عن الموقع و يصدر توجهيات عشان يحاول يطور و يحسن من اداء و من ترتيب الموقع .

مراحل تصميم الموقع ...

زي أي مشروع بيمر بعده مراحل لأنجــازه ... الموقـع بيمر بعده مراحل بدء من انه مجرد فكره و لحد ما يكون موقع مشهور, تعالوا نبص علي المراحل اللي بيمر بيها اي موقع

اولا ... تعريف الفكره Idea or subject

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

فمثلا ... لو الموقع هيكون بهدف الدعايا و الترويج لمنتج معين .. فانت محتاج كده يكون التصميم بتاعك بيتميز بعناصر الجذب المختلفه من الوان جذابه و مؤثرات حركه و غيرها من العوامل اللي تساعد في جذب و اثاره اهتمام الزائر و تفاعله مع المنتج المعروض او الفكره اللي بيتم الترويج ليها

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

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

و هكذا .. هتلاقي ان علي حسب الهدف و النشاط هتبتدي تفكر في التصميم ...

ثانيا ...وضع التصميم Make your Design

بناء علي الخطوه اللي فاتت هتقدر تفكر في التصميم بتاعك ... لكن هناك خطوط عريضه في اي تصميم عشان يعتبر تصميم جيد هنذكر منها مثلا ...

التصميم المفروض يوفر للزائر سهولة الحركه بين الصفحات و الوصول لاي جزء من المحتوي الخاص بالموقع.

المفروض يتميز بالسرعه في التحميل و ده عن طريق الابتعاد عن الاكثار من الصور الكبيره في المساحه مثلا.

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

لازم التصميم يكون بقبل بسهول التوسعات اللي ممكن اضافتها للموقع بدون الحاجه لاعاده تصميمه من جديد.

و غيرها من الشروط اللي هنتكلم عليها بالتفصيل لما نبدا في التصميم الفعلي ...

ثالثا ... قبل النشر Before you go

انتهاء التصميم ليس معناه ان الوقت قد حان للدعاية للموقع ... هناك 3 خطوات أساسيه ما بين الانتهاء من التصميم و بين بدء الدعاية

1- التأكد من عدم وجود إي أخطاء في التصميم كوجود رابط Link لا يؤدي لأي صفحه أو ما يعرف برابط ميت Dead Link

2- التأكد أن شكل الموقع في وقت التنفيذ مطابق تمام لشكله علي برنامج التصميم او في وقت التصميم

3- التأكد من ان شكل الموقع مش هيختلف باختلاف المساحة اللي هيتم عرضه عليها سواء كانت ( 800 * 600 ) أو ( 1024 * 768( او غيرهم

رابعا ... احجز اسم و مساحه موقعك Get your own domain and host space

الـ Domain هو اسم الموقع ... مثلا www.yahoo.com او www.masrawy.com و غيرهم من اسماء المواقع و اللي يشترط طبعا انه ميكونش مستخدم قبل كده ..

فيه اكتر من أمتداد للدومين فهناك مثلا com و net و org و edu ... و لكن يبقي اشهرهم هو امتداد com

يتم تسجيل الدومين بأسمك مقابل مبلغ مادي يعادي _ علي حسب أخر مره شوفته _ 35 جنيه سنويا _ تفاوت الأسعار يعني انك بيتعمل عليك شغل لو لقيته اغلي او انا اتعمل عليا شغل لو لقيته اقل Very Happy

_

تقدر تحجز الدومين من البدايه لفتره اطول من سنه خصوصا و اذا كنت بتفكر في انشاء مشروع طويل المدي علي الانترنت او بتصمم موقع لشركه او ما شابه

اما المساحه Host space فانت محتاجها عشان تحط عليه ملفات الموقع بتاعك .. لان الموقع بتاعك ميختلفش عن اي ملف Word او Excel من ناحيه ان ليه مساحه .. و بما ان الموقع بتاع حضرتك هيتحط علي النت مش علي جهازك يبقي لازم تأجر مساحه تحط عليها ملفاتك دي ...

الاسم و المساحة مع بعض بنسميهم Host Package ... او الاستضافة, و هناك نوعين من الاستضافة ...

استضافه مجانية

استضافه مدفوعة

الاستضافة المدفوعة ... Pay Web Hosting

تتم مقابل اشتراك سنوي بتسدده لأحدي الشركات اللي بتقدم خدمه الاستضافة للمواقع Web Hosting ... و بتتميز الاستضافه المدفوعه بـ 3 نقط

1- حجز اسم الموقع علي الصوره www.sitename.com

2- تحكمك الكامل في وضع اعلانات من عدمه في الصفحه كما ان عائد الاعلانات يكون كاملا لصاحب الموقع

3- لوحه تحكم مميزه تستطيع منها متابعه و التحكم في موقعك

الاستضافه المجانيه free web hosting

تماما مثل خدمه الايميل ... حيث تقوم بعض المواقع باعطائك مساحه مجانيه تستطيع استغلالها لوضع موقعك ...

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

فمثلا المواقع التي ستجد لها لوحه تحكم قويه و لا تضع اعلانات في صفحاتك ستجد انها توفر لك اسم موقع طويل للغايه او صعب التذكر

بينما تلك التي توفر لك اسم موقع مختصر ستضع اعلاناتها في صفحاتك او ستجد لوحه التحكم الخاصه بها ضعيفه

و هكذا ...

خامسا ...النشر و الدعايا Publish your web

هي الخطوه الاخيره في مشروع تصميم الموقع ..

حيث تقوم فيها برفع الموقع علي المساحه التي قمت بحجزها و تبدا في الدعايا لموقعك و الترويج له... للدعايا اساليب كثيره و طرق متنوعه ... منها المجانيه و منها المدفوعه و منها المعتمده علي محتوي موقعك نفسه

ستكون لنا وقفه نستعرض فيها طرق و اساليب الدعايا المختلفه في حينه ان شاء الله

تمرين محاضره 1

اسرد في تقرير مجموعه من المواقع التي توفر استضافه مجانيه للمواقع بحيث تذكر لكل موقع ...

1- شكل الـ Domain الذي يوفره الموقع

2- مساحه الاستضافيه المجانيه

3- عدد الاعلانات التي سيضعها الموقع في صفحتك و اماكنها

4- هل يدعم الموقع اسلوب FTP لنقل البيانات من الجهاز للموقع

» برنامج لتصميم المواقع Dreamwaver_CS4
» بعض المواقع التعليمية للاستفادة منها
» المواقع الرسمية للمواد الادبية بالتعليم الثانوي التاهيلي