تعلمنا ماهو الويب 2,0 الآن الأدوات التي تساعدك في ذلك !!

[واسع الخيال]

اولا السلام عليكم ورحمة الله وبركاته
الموضوع منقول زى الى قبله (طبعاً للفائدة)

وقبل ان ابدا احب اذكركم بموضوعنا الاول الذى تكلمنا فيه على الويب 2.0

http://www.bramjnet.com/vb3/showthread.php?t=396095

وكلنا شفناها وحفظنا كيف المفروض يكون شكلها عن ظهر قلب .. و المميزات اللي فيها وما الى ذلك ..

المهم ما ابي اطول لكن قلت بما اني دورت ولقيت الادوات قلت احطها لكم أحسن علشان تساعدكم زي ما تساعدني ..

البساطة في التصميم عموما والتناسق

عادة انت وذوقك هاذي بعد ما يبيلها اداة

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

انك تنزل بديل فرونت بيج في 2007 اللي هو Microsoft Expression Web

وهذا يصحح الاخطاء اوتوماتيكيا ويخليلك اياه متوافق 100% علشان للسهولة تحصل الشارة الخضرا

ويساعدك في الـ CSS بعد علشان تضبط امورك بسهولة ويسر اكثر وبسرعة

أو برنامج الدريم ويفر الجديد اللي بدل ما يكون على ماكروميديا صار على ادوبي
Adobe DreamWaver CS3

طبعا الواننا القديمة ما نستعملها ولا نخترع الوان من عندنا في الوان يعني تعتبر يعني من الوان الويب 2،0 وتساعدك على الاختيار السليم .. يعني مو كثير فاقعة او كثير باهتة وهكذا .. وتعطيك افكار بعد ..

هذي موسوعة تقدر تعتبرها مرر الماوس وطالع الالت علشان يطلع كود اللون

http://www.colorschemer.com/schemes/

الخلفيات الجريئة والمتدرجة

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

طبعا خلنا ناخذ القطري اول شي ..

احنا نبي نسوي صورة صغير فيها قطر صغير عقب نسويه خلفية ونطبق الخلفية على اي مكان نبيه ، هذي الفكرة ببساطة !

http://www.photoshoplab.com/images/tutorials/web2021.jpg

نرسم بالبنسل يعني مو بالفرشاة .. علشان ترسون نقط صغيرة بس 3 نقط تقطع هالصورة الصغيرة قطريا .. طبعا بالتأكيد تسووا zoom وتسووا عدل !

http://www.photoshoplab.com/images/tutorials/web2022.jpg

عقب نروح ادت ونطق define pattern .. ونسويها

http://www.photoshoplab.com/images/tutorials/web2023.jpg

هذا مثال على التطبيقات لما نسوي تعباية حق المكان الفاضي بالخلفية المتكررة ( الباترن )

http://www.photoshoplab.com/images/tutorials/web2026.jpg

مع تقليل درجة الوضوح

http://www.photoshoplab.com/images/tutorials/web2027.jpg

وطبعا في النهاية هذا شي بسيط وانتو تفننوا في الخلفية وابتكروا ..

هذا ابو الشباب مقطعهم اللي مقتبس من عنده .. انواع كثيرة

http://www.photoshoplab.com/images/tutorials/web2025.jpg

مسوي خط عريض 7×7 بكسل .. وسواه بالخط مب بالبنسل لانه كبير ..

http://www.photoshoplab.com/images/tutorials/web2028.jpg

بعدين دبّل الخط وحط جزء على اليمين وجزء على اليسار علشان يكمل بعضه لما يتكرر

http://www.photoshoplab.com/images/tutorials/web20210.jpg

http://www.photoshoplab.com/images/tutorials/web20211.jpg

وهذا مثال على الخط العريض مع اني ما حبيته ولا جربت اسويه

http://www.photoshoplab.com/images/tutorials/web20212.jpg

والخلفيات المتدرجة بس روح التدريج يعني الـ gardiant واختار لونين لا تختار اكثر يطلع خربطة مب ويب 2 .. يكون اللونين مثلا اخضر غامق واخضر فاتح واللي ما يعرفها مادري بعد شسويله لان نص الحركات بالتدريج .. وهذا شرح بسيط حق ال ما عندهم خلفية بالصور على السريع !

http://www.photoshoplab.com/images/tutorials/web201.jpg

http://www.photoshoplab.com/images/tutorials/web202.jpg

http://www.photoshoplab.com/images/tutorials/web203.jpg

http://www.photoshoplab.com/images/tutorials/web204.jpg

http://www.photoshoplab.com/images/tutorials/web205.jpg

http://www.photoshoplab.com/images/tutorials/web206.jpg

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

الخط الواضح والكبير

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

خذ هالصفحة الروعة .. يعطيك امثلة لمواقع ونوع الخط اللي يستعمونه للتحميل

http://www.fontshop.com/fontfeed/ar...ogos-of-web-20/

البانر البسيط والجميل

= البساطة ثم البساطة ثم البساطة
= السعي الى وضع اسم الموقع باكامل سواء باللغة العربية او الانجليزية
= وضع رسم معبر وبسيط بجانب الاسم
= ان يكون مميز ليجذب الزائر
= لا يحتوي على الوان كثيره

فيه شغلات نسيها الأخ الكريم زي الرفلكشن ( الانعكاس ) والظل وغيره ..

عموما هذا درس خفيف لطيف على السريع على الانعكاس بالفوتوشوب

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

http://www.photoshoplab.com/images/tutorials/web207.jpg

الخطوات التالية هي انك تدبل الاسم يعني تسوي منه نسخة طبق الاصل duplicate .. والاسهل اضغط CTRL + J .. بعدين اسحبه وحطه تحت الاسم الاصلي .

الشفافيات layers رح يصيروا بهالشكل

http://www.photoshoplab.com/images/tutorials/web208.jpg

http://www.photoshoplab.com/images/tutorials/web208.jpg

ثم انت بالطبع تقلب الصورة CTRL + T وتقلبها اما يدوي او تسوي flip vertical .

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

http://www.photoshoplab.com/images/tutorials/web209.jpg

الحين تضيف قناع ( ماسك ) Layer > Layer Mask > Reveal All

http://www.photoshoplab.com/images/tutorials/web2010.jpg

وهذا هو الشكل النهائي

http://www.photoshoplab.com/images/tutorials/web2011.jpg

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

هذي الصورة تشرح احسن مني لقيتها بعد البحث

http://www.ojqji.net/drpic/Ref_dr_1.jpg ( طويلة بتخرب الموضوع افتحوها بصفحة جديدة ) !

طبعا هناك شيء آخر غير الانعكاس واللي هو الظل الخفيف ..

طبعا مو من layer style بعدين نختار shadow .. ويطلع كريه وصعب التحكم فيه وفي صوب واحد

هذي طريقة احلى هو مو الظلال كأنك حاط الضوء من جهة والظل على جهة ثانية لكن في الويب 2 يكون على الكلام كله ..

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

وهذي قيم اشوفها حلوة .. لا تتقيدوا فيها كل واحد يسوي اللي يعجبه

http://www.photoshoplab.com/images/tutorials/web2014.jpg

البالونات والنجوم

يمكن ما انتبهتولها لكنها موجودة اساسا بالفوتوشوب وهي بسيطة جدا ما تحتاج شي ..

http://www.photoshoplab.com/images/tutorials/web2016.jpg

http://www.photoshoplab.com/images/tutorials/web2017.jpg

http://www.photoshoplab.com/images/tutorials/web2018.jpg

http://www.photoshoplab.com/images/tutorials/web2020.jpg

ولا تتقيدو بالصور سوو اللي يعجبكم .. بس لا تنسوا اخر شي الـ Gradient اللي على الصورة بالاخير وخلوه درجة الوضوح قليلة ..

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

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

الزوايا المدورة او الناعمة

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

بس الحين صرنا نبي نعرف شلون نسويها

عندك خيارين اثنينهم سهلين ..

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

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

لما تسووا تحديد حق المربع يعني اداة التحديد المربعة المعروفة ..

فيه بالاوبتشنز ( الخيارات ) تطلع بتوولبار رفيع فوق feather .. اختارو القيمة اللي تعجبكم ولتكن مثلا 5 .. وشوفوا الزوايا المدورة الناعمة كيف تطلع بكل بساطة .. بس سوو fill حق اللي حددتوه وحصلتوا الزوايا المدورة ..

أمر آخر أسهل من حركتي ..

هذا الرابط الحلو : http://www.roundedcornr.com/ شفته بموضوع من حوالي شهر او اكثر . بس دخل اللي تبيه وبيطلعلك كلشي جاهز وفيه خيارات كثيرة ومتنوعة جدا جدا جدا

يتبع ..

[واسع الخيال]

الصورة اللي تطلع بنافذة والموقع يصير كأنه اسود

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

مع انها حلوة والله وشكلها يوحي بانه المصمم للموقع هذا عجيب ..

عموما ساكتفي بذكر موقع سوف يساعدكم في ذلك

http://www.huddletogether.com/projects/lightbox2/ هذا الاصدار الجديد ..

وما علينا غير نسخ ولصق ( اللي شاطرين فيه )

الـ RSS

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

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

http://web2.ajaxprojects.com/web2/projects/RSS/

الايقونات المستخدمة

بعد تبون اجيبلكم الايقونات ؟! كل واحد وايقوناته المواضيع شكثرها ..

واختاروها يعني تحسوها جديدة مو من النوع القديم اللي ما فيه لمعة ولا ظل ولاشي ..

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

أنصحكم بموقع لون عجيب تستفيدوا منه بالادوات www.lawwen.com يعني فيه ادوات حلوة تعبت وانا ادور واخر شي لقيتها متجمعة عند اخونا ( خلصتله الباندويث )

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

عموما عندي شوية ملحوظات

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

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

وشي ثاني ان اذا ب***ي شي جديد طبق الاشياء المتعارف عليها حاليا يعني ضبط روحك بمعايير الـW3c و استعمل Unicode بدل الـ arabic windows

وشي مهم .....

اذا انت بتسوي ويب تو يا عزيزي مو معناتها تنسى الـ Search Engine Optimization .. يعني مو وانت تصمم تنشغل بالتصميم و تنسى محركات البحث واعتقد هذا شي معروف بس حبيت انبهكم عليه وعليه مواضيع كثيرة سبق انا نفسي وكتبت موضوع عنها

واخيراً

هذه مجموعة من الستايلات والتدرجات -كبيرة جدا ً-للويب تو ...

الستايلات:

http://www.dezinerfolio.com/wp-content/uploads/2007/05/web20layerstyles_l.jpg

للتحميل
http://www.dezinerfolio.com/wp-content/plugins/wp-downloadMonitor/download.php?id=4

التدرجات:

http://www.dezinerfolio.com/wp-content/uploads/2007/05/30grads_preview.jpg

http://www.dezinerfolio.com/wp-content/plugins/wp-downloadMonitor/download.php?id=5

في النهاية

شوف شسويت يعني شنو طبقت وشنو ما طبقت وشنو نسيت ..

عن طريق الـ Web 2.0 validator المقيم للويب تو

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

يعني هو انا حطيته علشان تشوف اذا نسيت شي او شي عاجبك هو نبهك عليه ..

بس جذي شوف : http://web2.0validator.com/

شباب يمكن نسيت شي انا او ضيعت في شي او خربطت في الكلام لا تآخذوني


بالتوفيق لنا ولكم وللجميع ان شاء الله

والسلام عليكم ورحمة الله وبركاته


المصادر :

1- جوجل الله يخليه اطق ويطلعلي نتايج
2- الفيفورتس ( المفضلة ) وهذا الموقع اللي خذيت منه الصور http://www.photoshoplab.com
3- الباقي اعتقد اني اشرت اليه

تحياتى

[خالدf15]

مجهــود رائـع تستحق كل الشكـر عليـه أخي واسع الخيال

يعـلم الله انني أستفـدت من موضوعك السابق وأستفدت أكثر من هذا الموضوع

والف شكـر لك على التدرجاات والاستايلات الاكثر من رائعــــــــــــــــــــــه


تقبل تـ ح ـياتي وتقـديري لك

[lavender]

مشكور اخي علي مجهودك الطيب
جزاك الله كل خير
تحيــــــــــــــــــــــــــــاتي

[-ECKO-]

الله يبارك فيك

[واسع الخيال]

مشكور اخي علي مجهودك الطيب
جزاك الله كل خير
تحيــــــــــــــــــــــــــــاتي

الله يبارك فيك

مشكورين اخى واختى على المرور

تحياتى[/CENTER]

[واسع الخيال]

مجهــود رائـع تستحق كل الشكـر عليـه أخي واسع الخيال

يعـلم الله انني أستفـدت من موضوعك السابق وأستفدت أكثر من هذا الموضوع

والف شكـر لك على التدرجاات والاستايلات الاكثر من رائعــــــــــــــــــــــه


تقبل تـ ح ـياتي وتقـديري لك

العفو اخى العزيز

وهذه شهادة اعتز بها

[Knight_Of_Night]

اخي واسع الخيال

موضوع مفيد جداّ جداّ بالنسبه لي

بحيث اني كنت احمل الستايلات ومدري وشي وظيفتها

لكن يوم دخلت موضوعك استفدت الكثير الكثير

جزاك الله خير

وسدد خطاك

ونفع بعلمك

تقبل مروري

[egysamba]

شكرا أهى على المجهود


تمنياتى اك بالتوفيق

[man utd]

تسلم اخي واسع الخيال على درسك الرائع
جميل جدا
وننتظر جديدك

[واسع الخيال]

اخي واسع الخيال

موضوع مفيد جداّ جداّ بالنسبه لي

بحيث اني كنت احمل الستايلات ومدري وشي وظيفتها

لكن يوم دخلت موضوعك استفدت الكثير الكثير

جزاك الله خير

وسدد خطاك

ونفع بعلمك

تقبل مروري

شكرا أهى على المجهود


تمنياتى اك بالتوفيق

تسلم اخي واسع الخيال على درسك الرائع
جميل جدا
وننتظر جديدك

مشكورين اخوانى الاعزاء على المرور والتعليقات الاكثر من رائعة

تحياتى