[ web designing ] وَرشةُ تَصَمِيمُ المَواقِع || مشروع سلسلة تعليم

[S O F T]

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

[Senya Phoenixia]

سيتم ترتيب الدروس في الفهرس أخي الكريم

[بورون]

1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

اتوقع المتمدد افضل
2 - على أي أساس يتم تصميم شعار الموقع ؟

على حسب محتوى الموقع ... الا ان كان منوع كمنتدانا الغالي يكون التصميم على حسب تفكير المصمم
3- إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

تاثر على سرعة التصفح تصيير الصفحة ثقيله ,,,, بالتحديد ما ادري بس قريت انه في طريقة تظهر الصور بكسولات الين ماتتشكل بالكامل
4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

يفضل استخدام الفوتو في تصميم الاستايلات

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

اضع امور تعبر عن المحتوى يعني ان كان منتداي يهتم بالتصميم بحط ايقونات برامج التصميم بشكل حلو و موزع
ان كان التصوير بحط كميرا و الاضائت و زي كذا

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟
للتسهيل على النفس قد نعتكد على البرامج المختصة ولكن يجب علينا تعلم الكودات

1- مم، ولمَ لا يكون الثابت ؟ أو وبما في حالة وحالة ؟ راجع الإجابة أخي .

2 - إجابتك جميلة.

3 - لم أسمع شيئاً عن الطريقة، عموماً هي تؤثر على سرعة التصفح.

4 - مم، يفضل ولكن ليس في كل الأحيان .


5 - جميل.

6 - بالنسبة لي الستهيل هو بكتابة الكود من الصفر ، وليس بتعديل أخطاء نحن في غنيً عنها.

[بورون]

جاري الاطلاع على درس الhtml
يعطيك العافية على الدرس

الله يعافيك، إن وجد أي استفسار فلا تترد في طرحه هنا

شكرا على الدرس الممتع
وخصوصاً طريقة الدرس الممتعة

عفواً

[النجم اللامع2]

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



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

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

2 - على أي أساس يتم تصميم شعار الموقع ؟

يتم تصميم شعار الموقع على اساس توجه الموقع ونوع المعلومات التي يقدمها الموقع

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

طبعا يؤثر على خفة التصميم
نتفادى هذا عن طريق تقليل الصور داخل الموقع واستخدام تقنية CSS في الالوان السادة وبإستخدام CSS3 عند الزوايا الدائرية ، التدرجات وغيرها

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

لا
فليس ضروريا عند تصميم تصاميم احترافية استخدام محررات الصور بإستثناء (الشعار)

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

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

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟


لا بالطبع فعندما تكتب الكود بنفسك تضمن ان موقعك مطابق تماما للمعايير القياسية


تحيتي لكم

[بورون]

1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (liquid)، أم الثابت (fixed) ؟.

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

لا يسعني قول أي شيء باستثناء "حسب نوع الموقع"، فالأفضل أن تكون "حسب ذوق المصمم".

2 - على أي أساس يتم تصميم شعار الموقع ؟

يتم تصميم شعار الموقع على اساس توجه الموقع ونوع المعلومات التي يقدمها الموقع

اختصرت كل الكلام في هذه الجملة
فعلاً إجابة مثالية.

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

طبعا يؤثر على خفة التصميم
نتفادى هذا عن طريق تقليل الصور داخل الموقع واستخدام تقنية css في الالوان السادة وبإستخدام css3 عند الزوايا الدائرية ، التدرجات وغيرها

لم أتوقع أن يذكرها أحد "^^، إجابة رائعة صديقي .

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام photoshop ؟

لا
فليس ضروريا عند تصميم تصاميم احترافية استخدام محررات الصور بإستثناء (الشعار)

جميل ، "محررات الصور"، أجمل كلمة في الإجابة !، تدل على فهمك للسؤال !

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

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

ههههههههه، إجابة جميلة.

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل dreamweaver, microsoft expression web ؟


لا بالطبع فعندما تكتب الكود بنفسك تضمن ان موقعك مطابق تماما للمعايير القياسية

إجابة مثالية ^^.

أشكرك أخي على هذه الإجابات الرائعة !
وأهلاً وسهلاً بك بيننا

[Master Edward]

بسم الله الرحمن الرحيم


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

مبدئـياً سأعطيكم فكرة عن مستوى طالبك >> يعني انا

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

الآن سأتفرغ لمرآجعة الصفحة الأولى من الموضوع للرد على الأستفسارات ..

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



1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (liquid)، أم الثابت (fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل dreamweaver, microsoft expression web ؟

اهلاً بك استاذي ..

1. اظن ان المتمدد فهو مناسب جداً للمنتديآت يعطيني حرية في التصفحة وايضاً يتناسب مع جميع مقاييس الشاشات >> طبعاً في حال كان توزيع الأكواد صحيح وبدون أخطاء ، لكن من الأفضل >فالأختيار صعب< فهذا يعتمد على المصمم فعليه توزيع الأكواد والصور وتنسيق الألوان بشكل صحيح ..
2. شعار الموقع لآبد ان يمثل محتوى الموقع مثلاً موآقع الأنمي لها شعار مُمـيز كذلك المواقع التجارية ومواقع الصحف ...ألخ ..
3. نعم بالتأكيد تؤثر على سرعة التصفح احياناً تقعد دقيقة كاملة عشان تفتح صفحة وهذا امر مزعج ومُمـل ، بالنسبة لتفاديها فذلك يكون بأستخدام الأكواد ..
4. حسناً برآمج التصميم كثيرة لكن الكثير يعتمد على الفوتوشوب ، لكن برنامجنا العزيز الفوتو يعطيك مجآل افضل في التصميم وتحصل على حرية كافية في التصميم ..
5. جميل لاحظت في بعض الموآقع عدم توافق استايل الموقع مع ما يحتوية الموقع وهذا يشكل عيب كبير وتأثير سلبي لمن يتصفح الموقع او يقوم بزيارته ..
6. طبعاً البرنامجين يؤديا نفس الغرض حسناً من الصعب الاعتماد عليهما وحدهما مع العلم انه بأمكانك تصميم موقع متكامل بأستخدام الأكواد ، الأ انه لابد من عمل بعض الأضافات الخارجية كعمل شعار او هيدر وهذا يحتاج لبرنامج تصميم ..

تغيير الخلفية عن طريق bgcolor

المستوى: مبتدئ إلى متوسط
المدة: 2:37

درس خفيف ولذيذ ، تم تطبيقة بنجاح
شكراً لك

درس رائع عزيزي z-one

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

لمن لا يعلم فالفرونت بيج يقوم بإضافة اكواد لا داعي لها تزيد الصفحة عبئاً فوق عبئ

مارأيكم في عمل مساحة بسيطة لاعضاء الورشة لتجربة صفحات html الخاصة بهم ؟

ارجوا من كل مؤيد او رافض ان يبدي رأيه ^^"

بالتوفيق لكم جميعاً

الفرونت بيج فعلاً يعطيك رموز مالها ذاعي وتعبي عليك الصفحة على الفاضي ..
جميل جداً وانا بالتأكيد مؤيد ..

.
.

تم بحمد الله ورعاية مراجعة الصفحة الأولى وجاري الأطلاع على البقية ..

آنتظروني

[Master Edward]

أود التنويه أنه بإذن الله تعالى سيتم طرح درس كل 3 أيام أو يومين.
ولكن ماذا تفضلون ؟ كتابي أم فيديو ؟

ماذا عن اعتماد دروس الفيديو بحجم مضغوط ؟

مثلاً حجم الفيديو الاصلي 100 ميجا ، استطيع تحويله إلى 2 ميجا

و هذا سيساعد اصحاب الاتصالات الضعيفة

مارأيكم ؟

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

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.
من واجبنا إكرام الضيف، أليس كذلك ؟
لدينا اليوم ضيفٌ جديد، يجب علينا إكرامه.
ولكن هذه المرة إكرامٌ من نوعٍ آخر، سنتعرف عليه سويةً ونستكشف مايخفيه عنا .

هل عرفتموه ؟ إنها HTML!

نبذة عن HTML
لن أذكر هنا متى نشأت، ومن اخترعها؛ فكلها لا تسمن ولا تغني من جوع.
HTML هي لغة موجهة للويب، وليست لغة برمجة ولا لغة تصميم كما يظنها الكثير، بل هي لغة هيكلة (أي تشرح كيف يظهر الموقع وترتيبه وأين يقع هذا وذاك..إلخ).
html لغة سهلة، ليست بذلك التعقيد -كما يظنها البعض-.
أتعرف كيف تكتب كود HTML؟
انظر لهذا:

<tag>النص هنا </tag>

سهلة، أليس كذلك ؟
هذا لايكفي بتاتاً، دعونا نتوسع أكثر في الفقرة القادمة.


كتابة وسوم HTML
1- الوسم يبدأ بـ(<tag>) وينتهي بـ(</tag>).
2 - اسم الوصم غير حساس لحالة الأحرف.
3 - بعض الوسوم تكون مغلقة مثل وسم: <img />، وهذه الوسوم يكون وسم فتحها هو وسم إغلاقها في الوقت نفسه.

إنشاء ملف html

لإنشاء ملف html، قم بفتح محرر النصوص المفضل لديك، وليكن مثالاً Notepad++.
كم بعمل Save as أو حفظ باسم، وسمه كما يظهر في الصورة.




ماذا نكتب في ملف html؟
احم احم، نسيت ايش نكتب

@تنبيه: سنتعامل مع ملفات html5 لأنها الأحدث بينهم، لا اختلاف إلا في وسم التصريح.

اكتب في بداية الملف كود التصريح كما يلي:

<!doctype html>

يقول هذا الكود للمتصفح: صديقي الصدوق، تعرف علي كملف html من الإصدار الخامس.

أرأيت البساطة ؟ بكود واحد عرّفت الكثير من الأشياء.

وماذا بعده ؟
أتذكرون قاعدة فتح وإغلاق الوسوم ؟ سنبدأ في كتابة الوسوم الآن ! هييي !
قم بكتابة هذا الكود بعد التصريح.

<html>


</html>

هذا الكود هو قلب html، بدونه لن يتعرف المتصفح على أن مابين هذين الوسمين هو كود html !

والآن، بين الوسم السابق، اكتب مايلي:

<head>

<title> Mexat Lessons </title>

</head>

رائع ، أخيراً كتبنا شيئاً بين الوسم <html>

نعم، وسم <head> هو كما أسميه، اللب الداخلي لـhtml؛ لأنه يتحكم بالأشياء التي لاتظهر للزائر.
مثل: العنوان (بظهر في رأس المتصفح)، ملفات css، استدعاءات javascript، الكلمات الدلالية، وغيرها.

ولاحظ أننا كتبنا وسما في جوف وسم <head> !
نعم، جميل يا صديقي، أنت مجتهد ، إنه وسم العنوان ، عنوان الصفحة !!!
وقد كتبنا بينه نصاً، وهو Mexat Lessons.

والآن يفترض أن يكون الكود لدينا كالتالي:

<!doctype html>
<html>
<head>
	<title> Mexat Lessons</title>
</head>
</html>

وإذا قمت بفتح هذه الصفحة في المتصفح، سترى العنوان قد تغير إلى Mexat Lessons أو ماكتبته أنت.

والآن، لنتعرف على وسم <body>.
وسم <body> يحتوي على جسم الصفحة، أي مايظهر في وسط صفحة html.

اكتب التالي بعد وسم اغلاق <head>

<body>
Hey, I'm here ! I'm your first html file !
</body>

والآن، قم بفتح صفحتك في المتصفح، ماذا تلاحظ ؟
اهاا ! كما يظهر في الصورة ، جميل، إذا لا، راجع الشرح أو اسأل.


والآن هذا هو كودنا النهائي.

<!doctype html>
<html>
<head>
	<title> Mexat Lessons</title>
</head>
<body>
	Hey, I'm here ! I'm your first html file!
</body>
</html>

خاتمة
أرجو أن يكون الشرح جيداً، وأنكم قد فهمتم الدرس، فالباقي يتعمد على هذا !

سلمت يدآك أخي على الشرح المُميز
الحمد الله لدي فكرة جيدة حول ذلك ..

لكني من فترة لم اكن اعلم عن وجود عدة اصدارت لـ html ..
حسناً لأني فضولي بعض الشيء قمت بالأطلاع عن طريق برنامج الدريم ويفر عن الأصدارات السابقة ووجدت التالي :

• Html 4.01 strict
• Html 4.01 Transitional
• XHtml 1.0 strict
• XHtml 1.0 Transitional
• XHtml 1.1
• XHTML Moblie
• وايضاً Html5

جربتها كلها وبالتأكيد Html5 هو الأفضل لا يحتوي على كثير اكواد طويلة ايضاً خفيف جداً ..
حسناً مجدداً دفعني الفضول للأطلاع على الـ Html المتوافق مع الفرونت بيج وكانت النتيجة كالتالي ..

<html dir="rtl">

<head>

<title>New</title>
</head>

<body>

</body>

</html>

طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟

.
.

اشعر بالتعب سأحاول المعاودة مجدداً للأطلاع على الباقي
شكراً مجدداً على الدرس واسف ان كانت اسئلتي مصدر ازعآج لك

لكم من ارق تحية .. تلميذكم ادوارد

[H A T S H Y]

طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟

رائع ما شاء الله .. تطبيقات واجابات مثاليه .. وتعليقي علي السؤال فقط ..
بالطبع اصدارات البرامج لها علاقه .. فكما تعلم اللغه متطورة وكل اصدار جديد يدعم التطويرات في اللغه ولكن لا تقلق ليست تغيرات جزرية
فهي مثل الاضافات والتعديلات البسيطة .. فكل اصدار جديد ستجد به ادوات وخصائص جديدة تساعدك وتسهل عليك علمليه التكويد ..
وعن البرامج .. انا اعتبر الفرونت بيج هو برنامج للمبتدئين .. فهو يقدم واجهه استخدام سهله وبسـيطة ولكن من عيوبة انه لا ياخذ نصيب
كافي من التطوير من جانب شـركة مايكروسوفت .. اما دريم ويفر فهو برنامج تحرير للمحترفين .. احترافي جدا والادوات فيه متقدمه ودائما متطور
ومن بعض العيوب التي واجهتني في فرونت بيج انه لا يدعم الـ css بالشكل المناسب ..
وايضا من الاخطاء الغريبة انه السبب في بعض الاخطاء التي تظهر عند اختبار القوالب .. فقد كان اصدار 2003 لا يغلق وسـم الصور وكنت اضطر للغلاق اليدوي حتي تختفي الاخطاء
وفي الحقيقة لا اعلم هل تم تطوير هذة النقطة او لا في الاصدارات الحديثه .. نظرا لاني توقفت عن استخدام الفرونت بيج منذ سنوات ..

[D.E.Λ.T.H]

1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

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

2 - على أي أساس يتم تصميم شعار الموقع ؟

يتم إن تصميم شعار الموقع على المحتوى الرئيسي الذي يعنى به الموقع
أو الاساس الذي انشئ صاحب الموقع هذا الموقع لاحله ><
و يفضل ان يكون بسيط و حامل للمعنى الكامل للموقع

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

بالتأكيد فخفة التصميم تعتمد بشكل رئيسي على مايحتويه من صور و أحجامها
و الصور مهمة لكل التصاميم فهي الاساس لمحتوى المنتدى ^^

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

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

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

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

٦ - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

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

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


تم تطبيق الدروس بنجاح ^^

[بورون]

ا

ظن ان المتمدد فهو مناسب جداً للمنتديآت يعطيني حرية في التصفحة وايضاً يتناسب مع جميع مقاييس الشاشات >> طبعاً في حال كان توزيع الأكواد صحيح وبدون أخطاء ، لكن من الأفضل >فالأختيار صعب< فهذا يعتمد على المصمم فعليه توزيع الأكواد والصور وتنسيق الألوان بشكل صحيح ..

ماشاء الله تبارك الله ">فالاختيار صعب<" هي الفاصل ^_^.

شعار الموقع لآبد ان يمثل محتوى الموقع مثلاً موآقع الأنمي لها شعار مُمـيز كذلك المواقع التجارية ومواقع الصحف ...ألخ ..

أجل بكل تأكيد

نعم بالتأكيد تؤثر على سرعة التصفح احياناً تقعد دقيقة كاملة عشان تفتح صفحة وهذا امر مزعج ومُمـل ، بالنسبة لتفاديها فذلك يكون بأستخدام الأكواد ..

طيب، أنا سأكتب كوداً يقوم بعرض الصورة، أهكذا تفاديتها ؟! ركز في الإجابة

حسناً برآمج التصميم كثيرة لكن الكثير يعتمد على الفوتوشوب ، لكن برنامجنا العزيز الفوتو يعطيك مجآل افضل في التصميم وتحصل على حرية كافية في التصميم ..

أجل الكثير يعتمد عليه، بل إن أغلبهم يستخدمونه كخريطة للتصميم فقط .
بالنسبة لي، لايعطيني كافة الحرية ><.

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

فأحياناً تدخل موقعاً مختصاً في Anime وتجده يضع صورة "كوب شاي" في الهيدر مثلاً .
إجابة ممتازة.

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

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

[بورون]

طرأ ببالي سؤال هل لأصدارات البرآمج علاقة بلغة الـ html ؟
اعني كما ترى في الكود فقد قمت بأقتباسة من برنامج الفرونت بيج مع العلم ان الأصدار المتوفر عندي 2003 >> مغبر ..
فهل لذلك علاقة بالأصدار .؟ وماذا عن بقية البرآمج كالدريم ويفر بأصدارته القديمة ..؟

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

[بورون]

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

فهل تشفع حسنات أحدهم لجعله الأفضل ؟

يتم إن تصميم شعار الموقع على المحتوى الرئيسي الذي يعنى به الموقع
أو الاساس الذي انشئ صاحب الموقع هذا الموقع لاحله ><
و يفضل ان يكون بسيط و حامل للمعنى الكامل للموقع

نعم، هكذا تماماً.

بالتأكيد فخفة التصميم تعتمد بشكل رئيسي على مايحتويه من صور و أحجامها
و الصور مهمة لكل التصاميم فهي الاساس لمحتوى المنتدى ^^

الصور ليست بتلك الأهمية بالنسبة لي، فأغلب ماتفعله بالصور يمكنك فعله في CSS 3.

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

ومن هذه البرامج Notepad++ ؟
راجع إجابتك. << مسوي مدرس

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

بالتأكيد

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

صناعة كود ؟
"كتابة كود" وليس صناعة أخي

عموماً إجاباتك ممتازة، موفق

[D.E.Λ.T.H]

كنت مندمج مع الاسئلة لدرجة اني نسيت اكتب صح

[Mr-Code]

ماشاء الله من افضل الى افضل

تقبل ودي . .

[Master Edward]

رائع ما شاء الله .. تطبيقات واجابات مثاليه .. وتعليقي علي السؤال فقط ..
بالطبع اصدارات البرامج لها علاقه .. فكما تعلم اللغه متطورة وكل اصدار جديد يدعم التطويرات في اللغه ولكن لا تقلق ليست تغيرات جزرية
فهي مثل الاضافات والتعديلات البسيطة .. فكل اصدار جديد ستجد به ادوات وخصائص جديدة تساعدك وتسهل عليك علمليه التكويد ..
وعن البرامج .. انا اعتبر الفرونت بيج هو برنامج للمبتدئين .. فهو يقدم واجهه استخدام سهله وبسـيطة ولكن من عيوبة انه لا ياخذ نصيب
كافي من التطوير من جانب شـركة مايكروسوفت .. اما دريم ويفر فهو برنامج تحرير للمحترفين .. احترافي جدا والادوات فيه متقدمه ودائما متطور
ومن بعض العيوب التي واجهتني في فرونت بيج انه لا يدعم الـ css بالشكل المناسب ..
وايضا من الاخطاء الغريبة انه السبب في بعض الاخطاء التي تظهر عند اختبار القوالب .. فقد كان اصدار 2003 لا يغلق وسـم الصور وكنت اضطر للغلاق اليدوي حتي تختفي الاخطاء
وفي الحقيقة لا اعلم هل تم تطوير هذة النقطة او لا في الاصدارات الحديثه .. نظرا لاني توقفت عن استخدام الفرونت بيج منذ سنوات ..

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

شكراً لك مجدداً

[Master Edward]

طيب، أنا سأكتب كوداً يقوم بعرض الصورة، أهكذا تفاديتها ؟! ركز في الإجابة

بفكر بأجابة ثانية .. سأحاول التركيز اكثر

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

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

[Master Edward]

السـلام عليكم ..
بسـم الله الرحمن الرحيم ..

كيف حالكم جميعا ؟؟ .. دمتم بخير دائما .

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

سأوضح لكم كيف يتم بناء موقع متكامل وماذا يحدث وراء الكواليس وذلك في بعض الاسئلة والاجوبه البدائية والبسيطه :

- نعـرف ان هناك العديد والعديد من لغات الويب .. مثل html - xml - css - java - asp - php ... وهكذا ، ما الفـرق بين تلك اللغات ؟؟

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

لغات الـ server side ( جانب الخادم ) : وهي لغات البرمجه التي تستخدم في بناء برامج الويب مثـل ( asp - php ) وتكون مرتبطة بالسيرفر بشكل كـلي .. بمعني ان السيرفر وحده هو الذي يفهمها ولا يقوي علي فهمها المتصفح وتنفيذ الكود يجب ان يكون علي الخادم ..

لغات الـ client side ( جانب العميل او المستخدم ) : هي لغات التكويد وليست البرمجة وتستخدم في بناء شـكل وبنية صفحة الويب مثل ( html - css ) وتكون مرتبطة بالمتصفح بشـكل كلي .. بمعني ان اي متصفح يفهم الكود ويستطيع تنفيذة بسهولة دون الحاجة الي الخادم ..

هذا كلام فارغ .. - ولم افهم الفرق حتي الان .. ماذا تقصد يا رجل ؟؟

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

تمام بدأت افهم .. ولكن هل لكي اصبح مصمم مواقع محترف يجب ان اتقن النوعين من اللغات ؟؟

بالطبع لا .. وكما ان لغات بناء المواقع نوعين .. من يعملون علي بناء المواقع نوعين ايضا وهم :

web designer : وهو مصمم الويب .. يجب ان يتقن لغات التكويد اتقان تام ويكون مسؤلا عن شـكل صفحات الويب بشكل مكتمل .. وهو لا يحتاج الي اي شئ حتي يبدأ بالعمل فهو يستطيع ان يبدا في بناء تصميم صفحة الويب من علي جهازة الشخصي وان يستعرض صفحتة بسهولة في اي متصفح للويب دون الحاجة الي خادم او سيرفر .. فكل ما يكتبة يستطيع المتصفح فهمة وتطبيقة بسهولة ..

web developer : هو مطور الويب .. ويجب ان يتقن لغات برمجة المواقع اتقان تام ويكون مسؤلا عن النتيجة البرمجية بشكل مكتمل .. وهو يحتاج للعمل تحت بيئه الخادم او السيرفر نظرا لان المتصفح العادي لا يستطيع فهم وتطبيق كود البرمجه .. ومن هنا ظهر الخادم المحلي ( لوكل هوست ) فهو الطريق الذي سهل علي مطوري الويب استعراض تطبيقاتهم بسهولة ..

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

خطأ - لقد اخبرتك ان مصمم الويب يجب ان يتقن لغات التكويد ولم انفي توجب معرفته بلغات البرمجة والعكس صحيح بالنسبة للمطور .. كما رأيت معي مطوري الويب ومصممي الويب وجهان لعمله واحده .. فهم يكملون بعضهم البعض ليخرج الينا الموقع بشـكله المتكامل .. فيجب ان يكون كلا منهم علي درايه ولو بسيطة بعمل الاخر .. فمطور الويب يحتاج الي بعض اكواد الـ html حتي تظهر نتائجه نظرا لان المتصفح لا يستعرض الا لغات التكويد فقط .. ومصمم الويب ايضا يحتاج ان يكون علي درايه ولو بسيطة بلغات البرمجة فهو من سيصنع القالب المسؤل عن الشكل ليتم تركيبة علي البرنامج .. وكيف سيفعل ذلك من دون ان يكون علي درايه سابقة باكواد البرمجة الاساسية ..

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

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

وربي انك غبي ولا تفهم شئ - كيف تقول ان لغه البرمجة مغلقه المصدر وانا اعرف ان لغه الـ php مفتوحه المصدر للجميع ؟؟

نعم صحيح تلك اللغه علي سبيل المثال مفتوحة المصدر ويستطيع اي شخص يتقنها ان يصنع برنامجة الخاص ولكن انا لم اقصد انك لا تستطيع البرمجة بتلك اللغه .. فليس معني ان مصدر اللغه نفسها مفتوح ان مصدر التطبيق نفسة مفتوح ايضا .. وسأضرب لكم مثال بسيط وهو نظام التشغيل ويندوز .. الجميع يعلم انه مقفول المصدر .. وانه تمت برمجته بعده لغات ومنها لغه الـ c و ++c وهذا يوضح الفكره .. فانت تستطيع ان تتعلم تلك اللغه وان تتقنها ايضا ويحق لك ان رؤية جميع اكواد تلك اللغه بحريه ولكن لا يحق لك رؤية اكواد نظام التشغيل فهو مغلق المصدر .. فكون اللغه نفسها مفتوحة المصدر هذا لا يكفل ان تصبح التطبيقات مفتوحه المصدر ايضا . وكما هو الحال في المواقع كود التصميم مفتوح للجميع اما كود البرمجة لن يحصل عليه الا من له صلاحيات المرور الي السيرفر ..

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

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

اخيرا استنتاج صحيح - اذن لا يستطيع ان يعمل المصمم او المطور بشكل مستقل .. صحيح ؟؟

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

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

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

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

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

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

اشـكرك علي المعلومات القيمة .. رغم انك خربت لي مخي
لا شـكر علي واجب ^_^

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

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

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

.
.

[بورون]

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

.
.

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

[X100]

جميل جداً ، مُشترك معكم ..
وكبداية نجيب على الاسئلة :

1 - أي نوع من الستايلات / القوالب هو الأفضل، المتمدد (Liquid)، أم الثابت (Fixed) ؟.

2 - على أي أساس يتم تصميم شعار الموقع ؟

3 - إذا كثرت الصور في الصفحة، هل يؤثر ذلك على خفة التصميم ؟ وكيف نتفاداها ؟

4 - حتى يكون التصميم احترافياً، أيجب علينا استخدام Photoshop ؟

5 - كيف تجعل تصميمك يدل على محتوى موقعك ؟

6 - هل من الجيد الاعتماد بشكل كلي على يرنامج مثل DreamWeaver, Microsoft Expression Web ؟

1 - من ناحية " الأفضلية " فهي تتجه حتماً الى المتمدد ، لأنه بسيط وسهل التصميم ويتناسق مع كل مقاس الشاشات تقريباً،
لكن من ناحية جمال التصميم فهي على حسب شكل الستايل . بالنهاية كلا النوعين جيدة بالنسبة لي

2 - على حسب محتوى الموقع .

3 - طبعاً يؤثر ، نتفاداها بتقليل حجمها وتحويل الصور قليلة الألوان الى gif ، لكي لا يفقد التصميم جماله .

4 - لا اظن ذلك ، لكن أغلب الستايلات تُصمم بالفوتوشوب .
وهناك بعض الستايلات تصمم بالالستريتر اذا كانت فكتورية .
وايضاً هناك من يستخدم اكثر من برنامج ، كالفوتوشوب و الفلاش مثلآ ..لكي يصنع ستايل فلاشي !

5 - بإضافة صور او كلمات تدل وتجذب الشخص الى الموقع .

6 - لا اعلم .

وشكراً على الدورة ^_^