المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة جرافكس تصميم الموقع. الدرس(1/4): مقدمة.



م.صالح
11-May-2008, 02:08
بسم الله الرحمن الرحيم.
أيها الأحبة المتطوعون.
السلام عليكم ورحمة الله وبركاته...

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

لمزيد من المعلومات عن المشروع المراد تنفيذه يرجى زيارة الرابط التالي:
http://www.arabvolunteering.org/corner/avt12738.html


محتويات الدورة الأولى:

الدرس الأول: مقدمة.
الدرس الثاني: تخطيط التصميم.
الدرس الثالث: طريقة تقطيع (تشريح) التصميم بالفوتوشوب.
الدرس الرابع: طريقة حفظ الصور المقطعة (الشرائح).


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

مصطلحات:
رأس الصفحة (header) :الجزء العلوي من الصفحة...



http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/header.jpg



تذييل الصفحة (footer) : الجزء السفلي من الموقع ....


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/footer.jpg

تحليل تصاميم المواقع:
لو حللنا رأس الصفحة في أي موقع لوجدنا أنه مكون من صور مقطعة "شرائح" (slices).
كيف نعرف ذلك؟
نعرف ذلك من خلال وضع مؤشر الفأرة في مكان خالٍ يمين أو يسار رأس الصفحة، ثم تحريك الفأرة إلى الجهة الأخرى مع الضغط على زر الفأرة الأيسر. كما في المثال التالي:

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/header_slice_ex1.jpg

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/header_slice_ex2.jpg

يتضح لنا مما سبق أن رأس الصفحة (header) في هذا الموقع مقسم إلى عدة شرائح (slices) كما في الصورة التالية.

http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/header_slice_ex3.jpg

طيب هناك مناطق لم تضلل وفيها صور، كيف هذا؟
أقول هذه المناطق هي مناطق مملوءة بصور صغيرة جداً عبارة عن خلفية متكررة أو مملوءة بلون ثابت.
سيتم تفصيل هذا الموضوع في دورة الأسبوع القادم (الفرونت بيج) -بإذن الله-.

كيف نفرق بين هذه الأنواع الثلاثة؟
يتم ذلك بالنقر على المنطقة بزر الفأرة الأيمن على المنطقة وبالنظر إلى القائمة التي تظهر، فإذا ظهر أمر (حفظ الصورة باسم) فإن هذه المنطقة عبارة عن صورة كما في المناطق رقم (1، 2، 3). كما في المثال التالي:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/ex_a1.gif

وإذا نقرنا على المنطقة بزر الفأرة الأيمن وظهر أمر حفظ الخلفية باسم فإن هذه عبارة عن خلفية متكررة. مثل المنطقة رقم (4) كما في المثال التالي:


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/ex_a2.gif

بينما المنطقة رقم (5) تظهر قائمة بها أوامر باهتة فهذا يدل على أن هذه المنطقة مملوءة بلون.


http://t1.arabvol.net/saleh_img/courses/web_graphics/lesson1/ex_a3.gif

آسف على الإطالة .. وإذا فيه أي استفسار فلا تتردد في طرحه هنا...

كتبه:
م.صالح.

hialsayed
11-May-2008, 01:14
مشكور أخي صالح مقدمة مختصرة وجميلة وبانتظار الدروس القادمة

المؤمن كالغيث1983
11-May-2008, 06:39
نحن معك
فواصل الشرح

عبير السلام
11-May-2008, 06:50
شكراً أخي الكريم
ولكن لدي ملاحظتين ..1) عند الضغط على الزر الأيسر على الأرقام ظهر لي دائرة سوداء بداخلها خط مائل.
2) عند الضغط بالفأرة على الزر الأيمن على الأرقام لم ألاحظ فرق في قائمة أي رقم عن الآخر فمثلاً قائمة الرقم 1 هي نفسها قائمة 5 المفعل مفعل الغير مفعل الباهت غير مفعل.
مع العلم أني لم أضع برنامج فوتوشوب في الجهاز .
ولك مني كل الشكر والتقدير على جهدك ووقتك الثمين وأأسف على الإطالة .

م.صالح
11-May-2008, 08:16
مشكور أخي صالح مقدمة مختصرة وجميلة وبانتظار الدروس القادمة
لا شكر على واجب أخي الحبيب .. وسعدت بمرورك ..


نحن معك
فواصل الشرح

أهلا بك .. أخي وسعدت بمتابعتك للدورة..


شكراً أخي الكريم
ولكن لدي ملاحظتين ..1) عند الضغط على الزر الأيسر على الأرقام ظهر لي دائرة سوداء بداخلها خط مائل.
2) عند الضغط بالفأرة على الزر الأيمن على الأرقام لم ألاحظ فرق في قائمة أي رقم عن الآخر فمثلاً قائمة الرقم 1 هي نفسها قائمة 5 المفعل مفعل الغير مفعل الباهت غير مفعل.
مع العلم أني لم أضع برنامج فوتوشوب في الجهاز .
ولك مني كل الشكر والتقدير على جهدك ووقتك الثمين وأأسف على الإطالة .

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

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

toto mag
11-May-2008, 11:04
مشكور م. صالح...
يلا منتظرين الدروس الجايه ..
يلا اشوفكم على خير انشاءالله..

عبير السلام
12-May-2008, 03:27
شكراً جزيلاً لك أخي الكريم
لقد جربت ونجحت ....
[/IMG]
وبانتظار الدروس القادمة .. مع أطيب التمنيات

متطوع متحمس
12-May-2008, 02:53
بسم الله الرحن الرحيم

مشكورالمهندس صالح على الشرح السلس

والله يعطيك العافيه دوم

تقبل مروري..


دمتم بود

,,)@&**( Mona ) **&@(,,
14-May-2008, 04:39
يعطيك العافيه
توضيح رائع
بالتوفيق

غريب_21
14-May-2008, 09:02
رائع ... فهم هذا الدرس .. بنجاح :)

م.صالح
15-May-2008, 01:50
حياكم الله جميعاً .. والحمد لله على اتضاح الدرس..

butterfly*02
15-May-2008, 10:11
اعتذر عن تأخري لكن الحمدلله ما فتني شي
تم التطبيق ووضحت الصورة ..
يعطيك ألف عافية اخوي م.صالح ومنتظرين باقي الدروس

حسن الماحي
15-May-2008, 12:26
مزيد من النجاح في تقديم المساعدات
وحقيقة نحن نحتاج لذوي الخبرات
ونتمنى ان نقدم المساعدة في مجال أختصاصنا

م.صالح
16-May-2008, 05:46
اعتذر عن تأخري لكن الحمدلله ما فتني شي
تم التطبيق ووضحت الصورة ..
يعطيك ألف عافية اخوي م.صالح ومنتظرين باقي الدروس

حياك الله butterfly* معنا .. وما فاتك شي ... والدروس مستمرة ..



مزيد من النجاح في تقديم المساعدات
وحقيقة نحن نحتاج لذوي الخبرات
ونتمنى ان نقدم المساعدة في مجال أختصاصنا

أهلا بك وسهلا .. وأشكر لك مرورك وتشجيعك ..
والعمل التطوعي هو عمل تكاملي .. يحتاج إلى جميع التخصصات ..

إبراهيم المطرفي
24-May-2008, 12:06
ما شاء الله عليك م.صالح

قد ما شاهدت شروح لتصاميم المواقع .. لم أشاهد هذه السلاسة والوضوح والأسلوب ، ليست مجاملة :)

السبب بسيط

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

شكرا م.صالح على هذا الأسلوب الرائع . والله يوفقك ويكتب لك الآجر.. آمين.

م.صالح
25-May-2008, 04:19
الأخ إبراهيم ..
حياك الله معنا ..

وبالنسبة للشرح .. فأحمد الله على منه وفضله أن وفقني لعرضه بهذه الطريقة .. فالفضل والمنة لله وحده ..

وأتمنى أن يكون سهلاً على المبتدئين والراغبين في التطوع .. ولا ينقصهم إلا المعرفة ..

صفاء عربش
25-May-2008, 09:13
السلام عليكم
شكرا كتير كتير على جهودك مهندس صالح
والله خير ما عم تعمل ومن زمان بحاجة لشي يفيدني
وانشالله دائما بتابع دوراتك
:sdd:

م.صالح
26-May-2008, 04:03
أهلا بك "صفاء عريش" معنا في عالم التطوع العربي ...

وأتمنى لك الفائدة والخير .. وتطبيق هذه الفوائد في خدمة الأعمال التطوعية ..

صدقة جارية
13-Aug-2008, 12:24
أتمنى لو بإستطاعتكم إعاده رفع صور الشرح جزاكم الله خيرا ونفع بكم ..
وجعل عملكم في ميزان حسناتكم

م.صالح
13-Aug-2008, 02:05
تم تعديل روابط الصور، ووضع الصور على سيرفر خاص بعالم التطوع العربي ...

وأعتذر عن هذا الخلل ...

طمـوح
07-Sep-2008, 04:22
السَّـلاَمُ عَلَيْــكُمُ وَرَحْمَةُ اللهِ وَبَرَكـَـاتُهُ
.

.
سلمت الأنامل .. وجوزيت كل الخير ..
في انتظار الدروس المقبلة من هذه السلسلة ..
لا أعرف ان كان هناك تسجيل في الدورة ..!!
.

.
.. مـودتي ..

م.صالح
07-Sep-2008, 05:23
وعليكم السلام ورحمة الله وبركاته.

أهلاً بك في عالم التطوع العربي .. ونسأل الله أن تجدي المجال والجو المساعد على العمل التطوعي..

وبالنسبة لبقية دروس الدورة فبإمكانك الاطلاع على روابطها من خلال الموضوع التالي:

http://www.arabvolunteering.org/corner/avt12738.html

أتمنى لك وقت ممتعاً ومعرفة نافعة ..

وآهـٍ لريح الجنة
20-Mar-2009, 06:29
بوركت جهودكم
شرح واضح,,