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

المصدر: طريقكـ إلى صناعة موقعك بنفسك ◄↓
في منتدى : منتدى أخبار التقنية والتكنولوجيا العام

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




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

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

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

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

اولا

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



التصميم جداا مهم في اعطاء جمالية للموقع وجلب الكثير من الزوار..
لذا يجب عليك ان تكون بدراية و لو باساسيات الفوتوشب..
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
اساسيات تصميم المواقع
في الغالب يتكون الموقع من 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

دورة الاستاذ احمد سامح

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

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


ثانياً لغة CSS

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

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

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

تعلم CSS
☼


دورة استاذ يوسف اسماعيل في css2

دورة استاذ ابراهيم قديح في css2

دورة استاذ احمد سامح في CSS2

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

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

دورة استاذ احمد سامح في CSS 3

*

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


هذه هيا الدورة
هذه الدورة من تقدييمي و بها العديد من الخصائص

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

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

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

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

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

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

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

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

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

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

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

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

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

ICONFINDER


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


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

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


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

 

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

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

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

نكمل ,,,,

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

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

صحيح
,
,

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

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

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

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

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

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

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

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

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

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

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

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


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

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

تعلم PHP

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

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

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

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

يمكنك ان تنشئ مدونة مثل وورد بريس (ها)
يمكنك ان تنشئ موقع رفع مثل مركز الخليج

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

دورة يوسف اسماعيل في php 1

دورة يوسف اسماعيل في php 2
*
دورة عبد الله عيد في php 1

دورة عبد الله عيد في php 2

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

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

دورة MYSql لـ يوسف اسماعيل

دورة MYSql لاستاذي عبد الله عيد

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

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

صحيح

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

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

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

من هنا

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

 

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

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

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

​

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

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

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

​

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

دورة استاذ عبد الله عيد في الكلاسات

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

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

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

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

دورة انشاء سكربت منتدى عبد الله عيد

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

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

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

​

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

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

JAVA SCRIPT

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

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

لتعلم جافا سكربت يوسف اسماعيل

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

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

يوسف اسماعيل

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

من هنا يوسف اسماعيل
​

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

​

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

​

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

​

​

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

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

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

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

​

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

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

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

 

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

 

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

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

. . .

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

. . .

​

 

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

 

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

 

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

 

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

 

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

 

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

 

أهلا بكـ أخي

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

 

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

 

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

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

 

شكرا اليسا

 

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

 

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

 

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

 

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

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

​