طريقكـ إلى صناعة موقعك بنفسك ◄↓

[SolimanHousin]

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

اليوم موضوع جداا في غاية الاهمية ... في هذا الموضوع باذن الله

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

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

فاستعدو و ابدأو بقراءة الموضوع بتمعن شديد .

اولا

مرحلة التصميم

التصميم جداا مهم في اعطاء جمالية للموقع وجلب الكثير من الزوار..
لذا يجب عليك ان تكون بدراية و لو باساسيات الفوتوشب..
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
اساسيات تصميم المواقع
في الغالب يتكون الموقع من 3 اجزاء اساسيين:

الجزء الاول يسمى الهيدر Header : و هو يكون في اعلى الموقع وبه يوضع ازرار الموقع و أزرار الموقع تسمى ناف بار Nav Bar

الجزء الثاني يسمى Body : و هو جسم الصفحة ويكون به محتوى الموقع.

الجزء الثالث هو الفوتر Footer : و هو ذيل الصفحة و يكون به الحقوق و ما الى ذالك..


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

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

================================================== ===

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

================================================== ===

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

و المحتوى يكون حسب ذوقك انت
================================================== ===


نصيحة اخيرة في التصميم

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


مرحلة التكويد

اولا احب ان اوضح لكم شيء يغفل عن الكثيير:

اي صفحة وب WEB في العالم لا تخلو من 3 اشياء ←„ ↓

1- structure وهي هيكلة الصفحة و مسؤل عنها الـ HTML .

2- presentation و هو زينة الصفحة او مايزين به الصفحة من الوان وحدود و اشياء اخرى و مسؤل عنها الـ CSS .

3- Behavior و هي الحركة في الصفحة و مسؤل عنها ال Java Script ..
فبعد ان عرفنا مما تتكون صفحة الويب نأتي الى رسم خارطة طريق لتعلم هذه الاشياء و تبيين كل ماذكرته فوق ▲
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

اولاً لغة HTML
هي هيكلة صفحة الويب كما ذكرت سابقاً و هيكلة معنا ترتيب يعني وضع الفقرات والكلام و العناوين

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

تعريف بسيط للغةhtml هي لغة وليست لغة كيف

هي لغة وصفية و ليست لغة برمجية مثل الجافا و غيرها..
وهي اختصار لـ Hyper Text MarkUp Language بمعنى: وصف النص التشعبي

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

تعلم html

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

انظر الانسب اليك و ابدأ معه
وانا انصحكم بـ يوسف اسماعيل ليس تقليلا في الاخرين ولكن هو الي شرحه حاز رضاي على العموم انا تابعتهم كلهم

و للعلم هناك اصدار اخر نزل من لغة الـ html و هو html 5 و بعضهم يقول بانه لا يتبعها المهم انكم تقراو عنه لانه جميل جداا ::
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


ثانياً لغة CSS

مثل ماذكرت في البداية هي لتزيين عناصر الصفحة المهيكلة بـ html

وهي اختصار لـ cascading style sheets بمعنى ورقة الانماط الانسيابية

و نزل منها اصدارين 2 و 3 و سوف نتعلم الاثنين باذن الله

تعلم CSS
☼

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

+++++++++++++++++++++++++++++

تعلم CSS3 كما ذكرت يوجد 3 نسخ من الـCSS

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

*

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


هذه هيا الدورة

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

بكذا نكون تعلمننا لغتين مهمتين بهما نستطيع انشاء موقع جميل جداا تابع ╫

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

من يوسف اسماعيل ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
الان انت تتسائل ماذا بعد الان ماذا بعد ماتعلمت هذه اللغات وانشئت موقعي ؟!!

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

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

ماذا تعطيك الاستضافة ؟!!
الاستضافة تعطيك اسم الدومين و الدومين هو الذي يكون بعد الـ www وقبل ال .com او .net ,,,

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

للاشتراك في استضافة ابحث اولا على استضافات مجانية مثل 000web و غيرها الكثيير,,

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
نصائح قبل تصميم اي موقع :

اول ابدأ ببسم الله الرحمن الرحيم

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

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

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

خامسا لا تنسانا من الدعاء و اي سؤال لا تتردد ابداً ...


-----------------------------------------------------------------------------------

الان تقريبا وصلنا لمنتصف الطريق لتصبح مصمم و مبرمج ويب لم يتبقى الكثيير لكنني تعبت من كثر الكتابة فانتظروني غدا اكمل الدرس,,, و دمتم بخير


تم التعديل الاخير و اضافة دورات اخرى
يوم الثلاثاء 29/10/2013
*******
يوم الاربعاء 5/2/2013
اضافة دورة ال css3​

 

[SolimanHousin]

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

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

فنصيحتي لك هي ان تبدأ بانشاء موقعك الان باللغات التي تعلمتها صحيح انه ينقصك الكثيير لكن هذه هي الاساس
ودائما اهتم بالاساس

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

نكمل ,,,,

الان انت اصبحت مصمم مواقع

و اصبح موقعك جميل جداا

صحيح
,
,

لكن الا تلاحظ انه موقع (جامد

)

جميل انت تريد معرفة مامعنى جامد انا افهمك اكثر جامد بمعنى انه ليس ديناميكيا

ايضا لم تفهم ,,,
يجب ان تعلم ان المواقع تنقسم الى قسمين

{قسم اسمه ستاتيك او ثابت
و الثاني اسم ديناميك اي متحرك}

اذا مالفرق بين الثابت و المتحرك ؟!!

الثابت هو الذي لا تستطيع التواصل مع الزوار
ببساطة

اي لا تستطيع ان يكون بينك وبين الزائر تعامل جميل

و المتحرك ماهو ؟!!

بالطبع هو الذي يمكنك من التواصل مع الزائر

جميل جداا .

اذا كيف تجعل موقع متحركا او داينميك ؟!!

اولا يجب ان تعرف انه يوجد لغات برمجة للمواقع
وهي التي تجعل موقعك متحركا و اكثر فعالية ..
طيب ماهي هذه اللغات ؟!!
يوجد خيارات كثييرة امامك من PHP او ASP.net و JAVA نعم جافا تستطيع انشاء تطبقيات او مواقع داينميكية بالجافا,,,

المهم :
انت يجب عليك ان تحدد ماذا تريد ان تتعلم منهم

انا بالطبع انصحكم بـ PHP
لماذا ؟!!

لانها اولا مفتوحة المصدر OPEN SOURCE بمعنى انها مجانية و تستطيع التطوير عليها ..
وايضا تستطيع استخدامها مع اي نظام اخر غير الويندوز مثل لينكس او ماكنتوش ,,


جميل اذا نختار PHP

كل ماسبق كان كلام الان ناتي الى التعلم فعلا

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

تعلم PHP

تعلمها ليس بالامر الصعب ابداً ,,

لغة PHP مثل ما ذكرنا فوق انها تمكنك من جعل الموقع ثابت و يمكن عمل نظام تعليقات في موقع وسجل زوار وصفحة اتصل بنا وغيرها الكثيير

لغة php مشتقة منلغة c او مبينة عليها لذا تجد تشابه كبير بينهم

قبل تلعمها يجب ان تعرف ماذا يمكنك ان تفعل بها بعد ان تتعلمها ...

يمكنك ان تنشئ مدونة مثل وورد بريس (ها

)
يمكنك ان تنشئ موقع رفع مثل مركز الخليج

و غيرها طبعا هذه مجرد امثلة
ناتي الى التعلم

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

*

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

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

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

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

الان انت تعلمت PHP و قواعد البيانات

لكن الا تلاحظ انك الى الان لا تستطيع عمل موقع ستاتيك او متحرك ؟!!

صحيح

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

ملاحظ سكربت SCRIPT يطلق على الموقع المتحرك و هو في الاصل برنامج

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

-----------------------------------------------------------------------------------------------------
الى الان نحن تمام لكن ينقصنى بعض الاشياء نذكرها في المشاركة القادمة
واعذروني على التقصير
محبكم كونان

​

 

[SolimanHousin]

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

تكلمنا عن لغة ال PHP

بقي علينا ان نعرف شيء اخير عن الPHP وهو البرمجة الكائنية Obhect Oriented Programming​

​

ماعلينا من التسمية لكن المهم ان نعرف انها تساعدنا و تسهل علينا عملية البرمجة باستخدام الكلاسات...​

انا لا اريد ان اشرح الكلاسات سأدع الشرح للاساتذة الكبار​

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓​

​

تعلم برمجة الكائنات

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

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

الان نريد ان ننشئ موقع متكامل

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

---------------------------------------------------------------------------------------------------------
​

بعد الان انت باذن الله تستطيع تصميم وبرمجة اي موقع تريد باذن الله​

​

تبقى بعض الزوائد و الجماليات​

ذكرنا سابقا ان الجزء المسؤل عن الحركة في صفحة الانترنت هي :
​

JAVA SCRIPT

هي المسؤلة عن الحركة مثل : نرى في بعض المواقع صفحات تفتح تلقائيا عند فتح الموقع مثلا​

ايضا لوحة المفاتيح المقدمة من جوجل ايضا هذا من ال جافا سكربت و اشياء كثيرة جدا,,

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

و يوجد مايسمى بالجيكوري jQuery و هي مكتبة من مكتبات الجافا سكربت يمكنك الجيكوري من عمل معارض صور مثلا و غيرها

لتعلم الجيكوري

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

-----------------------------------------------------------------------------------------------
ويوجد شيئ اخير نسيناه و هو المعايير القياسية الخاصة بال html و css انتبه لها و لمعرفتها بشكل موسع ادرس ال Xhtml​

يجب عليك تسجيل الدخول او تسجيل لمشاهدة الرابط المخفي

​

الان انت لديك الاداوت المهمة لتكون افضل مصمم ومبرمج ويب باذن الله...​

​

و انتبه للثغرات جيداا ابحث عنها في ججوجل ​

​

نصيحة اخيرة ابحث و من ثم ابحث و من ثم ابحث​

​

​

الى هنا نكون انتهينا من الدرس و اذا كان فيه اضافات ساضيفها الى الموضوع,,,​

اتمنى من المشرفين تثبيت الموضوع لاكبر استفادة

​

---------------------------------------------------
المفاجأة
​

سيمر عليك بعض الصعوبات فاي سؤال انا جاهز هنا في هذا الموضوع​

​

اسال لان السؤال يبين المخفي عنك

♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂ ♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂♂

تنبيه كونان حبي : هو انا سليمان حسين
​

 

[sanakovich charif]

 

[أمير الشمال]

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

 

[The General Guard]

موسووووووووووووووعة ومرجع رائع لمن يريد أن يسلكـ هذا الطريق

غاية في الإبداع من أخي العزيز ,سليمان

. . .

فضلاً أخي الغالي
راجع روابط المشاركة الأولى
مكتوب (للتحميل) دون إضافة رابط

. . .

​

 

[سالم المسالم]

بارك الله فيك موضوع مفيد جداً تسلم يالغالي

 

[SolimanHousin]

مشاهدة المرفق 27890 مشاهدة المرفق 27891 مشاهدة المرفق 27892

امين و اياك شكرا لك

 

[SolimanHousin]

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

اهلين اخوي تسلم على المرور الجميل

 

[SolimanHousin]

موسووووووووووووووعة ومرجع رائع لمن يريد أن يسلكـ هذا الطريق

غاية في الإبداع من أخي العزيز ,سليمان

. . .

فضلاً أخي الغالي
راجع روابط المشاركة الأولى
مكتوب (للتحميل) دون إضافة رابط

. . .

​

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

 

[SolimanHousin]

بارك الله فيك موضوع مفيد جداً تسلم يالغالي

جزاكم الله خير
اي استفسار جاهزين

 

[razora]

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

 

[SolimanHousin]

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

أهلا بكـ أخي

اخي الادارة هي من ترى من انسب بالتثبيت

 

[إليسا]

برجاء تثبيت الموضوع

 

[أمير الشمال]

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

انا حاولت انزله هنا بس ما قدرت
تقبل تحياتي

 

[SolimanHousin]

برجاء تثبيت الموضوع

شكرا اليسا

 

[SolimanHousin]

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

انا حاولت انزله هنا بس ما قدرت
تقبل تحياتي

ايه معرووف
ليش ماعرفت تنزله ؟ هو ينزل نسخة تحملها بعدين و انت تثبت يحملك الملفات

 

[The General Guard]

شكرا اليسا

جاري مناقشة التثبيت ,أخي الغالي​

 

[SolimanHousin]

جاري مناقشة التثبيت ,أخي الغالي​

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

 

[The General Guard]

جاري مناقشة التثبيت ,أخي الغالي​

للأسف ,ليتم التثبيت: لابد أن يكون حصري للمنتدى

خالص تحياتي وتقديري لمجهودكم العظيم