تصميم الويب … لمن يريد شق طريقه!

سأتناول الحديث عن تصميم واجهة الويب أو واجهة موقعك في هذه المدونة وسأتحدث لاحقاً عن بعض لغات برمجة الويب … وطبعاً فقط لتكون مدخلاً لمن يريد دخول هذا العالم 🙂

HTML

اختصاراً لـ HyperText Markup Language وهي اللغة الوحيدة (يعدها الأغلب وسوماً وأنا أعدها بعد تطورها الهائل بنسخة HTML 5 لغةً) التي يمكنها إنشاء عناصر في صفحتك! ويسميها البعض وسوماً ﻷنها فعلياً وسوم، وتحدثت في تدوينة سابقة أنني بدأت من codecademy ثم أكملت html 5 من w3schools. تعلمها سهل جداً، واستخدامها أيضاً سهل، وطبعاً من غير المهم أبداً أن تحفظ أي شيء، فاستخدامك المستمر كفيل بأن تحفظها، وتذكر كلما أردت وسماً ما كلما عليك فعله هو فتح reference اعتدت اسخدامه، أو ابحث على النت.

CSS

اختصاراً لـCascading Style Sheets ، وكما هو واضح من اسمها فهي تقوم بإضافة التنسيق إلى عناصر Html الخاصة بصفحتك أو موقعك، مع العلم يمكنك فعل ذلك بالـHtml، ولكن سيجعل من ذلك إمكانية التعديل على موقع كبير مستحيل نسبياً، لذا كان الحل الأنسب هو css.
هي فعلياً ليست لغة أبداً، ولكن بقدوم CSS 3  وفرت الكثير من المميزات التي لم توجد بالنسخ السابقة مثل الحركة البسيطة! وكما حال Html فقد تعلمتها بنفس الطريقة 😀

Java Script

وهي لغة المتصفح، لا يمكن أن تقول أن لغة الجافا هي لغة الجافا سكريبت أو العكس كما يظن البعض! فهما مختلفتان تماماً وإن كان syntax الأولي لهما ذاته! هذه اللغة بالذات لغة عجيبة جميلة، وتعلمها ممتع وتشعر أنك مهما تعلمتها يبقى الكثير حولها مجهول، يمكن لهذه اللغة أن تصل إلى عناصر Html و تعديلها و حذفها وإنشاء أخرى جديدة والكثير !! كما يمكنها فعل الأمر ذاته بالـ CSS! خير معلم لهذه اللغة هو التجريب ومواقعك، ابدأ بالـ W3Schools بقدر الحاجة ثم انطلق بمشاريعك!

JQuery

هذه المكتبة الجميلة المنبثقة عن JS توفر من خلال كبسة زر صغيرة الكثير الكثير من الحركة بسهوووولة تامة، أسهل مكان لتبدأ التعلم codecademy ثم انطلق 🙂

BootStrap

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

قد تفشل بمحاولتك الأولى، لا تيأس أبداً واسأل أصحاب الاختصاص أو على مجموعات الفيس بوك مثل Ask Syrian Programmers  وهي مجموعة رائعة تحوي العديد من المبرمجين الذين لن تشعر بالحرج من سؤالهم ففيها من الهواة إلى المحترفين في عالم البرمجة! كما لاتنس أن اليوتيوب يوفر لك الكثير مما قد تبحث عنه خصوصاً وحلولاً سريعاً لمشاكلك، وصديقك غوغل موجود إلى جانبك دوماً.

أما سر تسهيل اكتشاف الأخطاء فهو بكورس سريع مقدم ومدعوم من غوغل discover-devtools، حيث الفصل الأول رائع تماماً لتكتشف أخطاءك وتعدل تنسيقاتك من خلال المتصفح الرائع كروم!

النصيحة الذهبية التي أريد أن أقولها هي لا تيأس!

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

ملاحظة لم أقم بنشر روابط المواقع كي تحاولوا بدء شق طريق تعلم البحث من خلال غوغل … 😉

روابط مفيدة:
Advertisements

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s