ماهو تصميم المواقع ؟

       ماهو تصميم المواقع ؟ 

بيطلق علي عملية انشاء صفحات الأنترنت مثل 

FaceBook-Saraha-Twitter

وغيرهم من المواقع اللي بنتصفحها يوميا انشاء الموقع يتم علي مرحلتين هم 

تصميم كامل لشكل الموقع بمحتواه و عناصره يمكن رسم التصميم علي ورقة او Tool او اي Paintعلي برنامج ال 

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

ثم استخدام لغات الinternet مثل html والjavascript ف انشاء و ادراج العناصر و المحتوي الموجودين في التصميم وال css لتنسيقهم ليطابقوا ال interface الوجهة. 

تطورت عملية تصميم المواقع عدة مرات .. فكانت البداية في 1995 فبدل من كتابة summon lines مثل الDOS لأدراج العناصر في صفحة الموقع تم تقسيم الصفحة الي جداول داخل بعضها تمثل البنية او القالب اللي هيبدأ يحول التصميم فيه اللي موقع الجداول تحتوي علي صفوف و اعمدة تشكل خلايا يتم تحديد خلية او مجموعة من الخلايا يتم ادراج فيها العناصر ثم ظهر الflash في 1996 

وكان بمثابة تطور كبير في illustrations الwebواصبح بأمكانك ادراج العناصر بجميع الأشكال و التنسيقات و تأثيرات الحركة (animation) و انواع الخطوط كل هذا بأستخدام الflash, فقط علي المستخدم تحميل ال plugin الخاص بال flash و انتظار تحميله (processing time) . 

ظهر ال enchantment device الcss اختصارCascading Style Sheets وهي لغة ديكور قتم فصل بينها و بين ال html اصبح الhtml خاص بأدراج المحتوي و الcss لتنسيقه ليظهر بنفس الشكل في التصميم (plan) كانت مشكلة 

الcss هي ان الbrowsers بعضها لا يفهم بعض الأوامر و بعضها exceptional مع اوامر اللغة وبعضها لأ مع مرور الوقت و تحديات الweb fashioners مثل الbrowsing من الموبيل و الtablets اصبح استخدام الcss والgrid frameworks اللي تنقذ بالcss هي انسب و اسرع طريقة و المستخدمة حتي يومنا هذا تعلم الcss و فهمه اساسي لأي. website specialist 

انشاء اي موقع يبدأ بخطوة necessity detail and examination وهي تحديد المتطلبات و تحليلها ليه هنشأ الموقع؟ 

ممكن يكون موقع شخصي لأفراد او موقع بيقدم خدمات للمجتمع أو عميل شركة او business يبدأ الweb architect يفهم المتطلبات اللي هينشأ بسببها الموقع وعلي اساسه ترجمتها الي عناصر مثل (الصور, القوائم, النصوص...) 

ثم يبدأ في تصميم(layout) لشكل الموقع كاملا بصفحاته الداخلية .. احسن apparatus لعمل التصميم هي ال Photoshop لسهولته في الأستخدام و التعامل مع الألوان كما انه يسهل علي الwebsite specialist تكويد (تنفيذ) التصميم دون عن اي instrument تانية ال plan علي الPhotoshop يكون نسخة طبق الأصل من الموقع نفس المسافات بين العناصر و الوانها و الخطوط احجامها و انواعها كل شيء 

 يتم الأتفاق مع العميل علي شكل الموقع من خلال الdesign و يتم الموافقة من خلاله علي الundertaking و يبدأ الweb fashioner رحلة تكوييده. 

علي الweb originator اختيار التقنية اللي هينفذ بها الموقع .. فالأكثر تداولا هي استخدامunadulterated html and css اي استخدام لغات الhtml و الcss فقط لأنشاء الموقع. يوجد طرق مثل الbootstrap و الadobe museوغيرها من التقنيات المختلفة. جميع التقنيات تعتمد علي الhtml والcss و تستخدمهم لكن بطرق مختلفة ما عدا الadobe muse لأنه بيحول الdesign الي code مباشرة لا يمكنك التعديل عليه لأنه created code ليس html و cssالملخص انه الhtml لأدراج المحتوي و الcssلتنسيقه هو كل شيئ ف حياة ال website specialist 

تستخدم ال javascript و مكتبتها الشهيرة الjQuery لل intercation و ال activity داخل الموقع. ولها استخدمات اخري عديدة منها الvalidation وال DOM ال javascript تتمتع بقوة وظائفها و امكانيتها كونها لغة برمجة اساسية. 

مجال ال website architecture سهل التعلم فالhtml وال css لغات بسيطة جدا و استخدمات الjavascript and jQuery لن تمثل عائق لمن يكرهوا البرمجة و يعد الgraphic originatorاكثر حظا من غيره في دخول المجال لقدرته علي تعلم انشاء تصميمات قوية (اسرع) و من يمتلك مهارة التكويد و البرمجة سيجد الweb designاسهل الweb outline مجال ينمو و يتطور وسقف طموحاتك انت اللي تقدر تعليه. 

تجهيز الأدوات والإعدادات اللازمة لبدأ العمل في تصميم الويب 

البرامج والأدوات الازمة 

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

1_ برنامج [Brackets] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية حاليا أعمل به في كل الكورسات. 

- 2برنامج [KomodoEdit] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية وخفيف على الجهاز. 

3-برنامج [ ++Notepad ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز. 

4-برنامج [ Atom ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز. 

5-متصفح حديث لتشاهد تصميمك عليه مثل 

[ Google Chrome ] أو [ Firefox Developer Edition ] 

إعدادات الكمبيوتر و ملاحظات 

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

لا تعتمد على البرامج التي تكمل الكود في أول حياتك حتى تحترف وتتعود على كتابة وسوم اللغة وتحفظها بعد الفهم. 

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

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

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

قم بعمل مجلد المشروع بإسم (Project) وضع فيه مشاريعك وكل تصميم قم بعمل إصدار له حتى ترى بعد كل فترة هل تقدمت أم لا. 

بدأ تعلم لغة [HTML] لتنشئ صفحتك الاولي في الويب. 

ماهي لغة HTML؟ 

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

رابط الكورس التعليمي 

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

بدأ تعلم لغة [CSS] لتنسيق صفحات الويب. 

ماهي لغه ال CSS ؟ 

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

رابط الكورس التعليمي 

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

بدأ تعلم الاصدار الجديد من لغة HTML 

لماذا اتعلم الاصدار الجديد من لغة HTML5 ؟ 

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

رابط الكورس التعليمي 

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

بدأ تعلم الاصدار الجديد من لغة CSS 

لماذا اتعلم الاصدار الجديد من لغة CSS3 ؟ 

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

رابط الكورس التعليمي 

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

ماذا بعد تعلم بناء صفحة الويب وتصميمها؟ بقي ان تقوم بعمل اللمسات السحرية. 

تعلم مكتبة ال jQuery 

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

ماذا أحتاج قبل تعلم المكتبة؟ 

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

Javascript لماذا اشاهد كورس ال 

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

سوف يمكنك الكورس من فهم مكتبة ال jQueryبسهولة تامة لأن فهمك للغة الأم التي بنيت عليها المكتبة. 

الكورس سوف يضيف لك المعلومات البرمجية التي سوف تتيح لك الإبداع في عملك وعمل اي شيء يخص ال Development في المستقبل. 

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

الكورس سوف يفيدك في حال إنتقلت من مكتبة الjQuery لأي مكتبة أخرى مبنية على نفس اللغة الأم. 

رابط كورس Javascript الاساسي لاتقان اللغة 

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

رابط كورس Javascript DOM للتعامل مع صفحة الويب 

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

رابط كورس Javascript BOM للتعامل مع المتصفح 

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

رابط كورس مكتبة ال jQuery 

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

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

إطار العمل Framework هو الحل 

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

رابط الكورس التعليمي 

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

تطبيق آخر على Bootstrap 

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

هل تعلم أنه يمكنك عمل إطار عمل لنفسك من صنعك؟ 

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

تعلم مفهوم التصميم المتجاوب Responsive 

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

رابط الكورس التعليمي 

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