الـWeb Design قصاد الـWeb Development – ازاي الاتنين بيكملوا بعض؟

Oct 26, 2018


تقريبًا مفيش ساعة بتعدي علينا من غير ما نستخدم الإنترنت، سواء كان من خلال تطبيقات الـAndroid أو مواقع الـWeb، وأكيد سألت نفسك ازاي الصفحات دي بتشتغل عشان تطلع بالشكل ده قدامنا.
مثلاً: لما بتدخل على الـFacebook بيطلب منك الـE-mail، والـPassword، وبعد ما ضغطت Log in، بينقلك على صفحتك.
ازاي عمل Check على بياناتك، وعرف إنها صح؟ وإيه اللي حصل؟
عشان تعرف اجابة السؤال ده، فانت محتاج تفهم إن صفحة الـWeb متقسمة لحاجتين:
• أول حاجة هي الـFront-end: وبتشمل التصميم الخارجي اللي بيظهر قدامك، وبتتفاعل معاه.
• تاني حاجة هي الـBack-end: وبتشمل العمليات اللي بتحصل في الخلفية، من نقل أو تخزين أو غيرها من العمليات اللي ممكن تحصل على البيانات.
اللي حصل ده بيتم عن طريق الـWeb Design والـWeb Development، وهما أساس كلامنا المقالة دي.

– الفرق بين الـWeb Design والـWeb Development، ومدى ارتباط شغلهم ببعض:

لو هنعرّف الـWeb Design بشكل مبسط، فهو المرتبط بالـFront-end، ومسئول عن الـDesign، والـLayout، والشكل الجمالي للصفحة. بالإضافة إنه بيشمل: تصميم الألوان، الخطوط، التنسيق اللي في الصفحة، والصور لما تكون بتتصفح موقع معين بتلاقي فيه، وبيكون من أهدافه كمان إن المستخدم يتفاعل معاها بشكل سهل.
والـWeb Development مرتبط بالـBack-end، وزي ما قولنا إنه مسئول عن العمليات اللي مبنشوفهاش وهنا بيكون مرتبط أكتر بلغات البرمجة أكتر من الـWeb Design، وهنستعرض في موضوعنا إيه لغات البرمجة دي.
الإتنين بالرغم من الفرق اللي بينهم، فمش منفصلين، والإتنين شغلهم مرتبط ببعض؛ عشان الـDeveloper دوره تحويل مجهود وشغل الـDesigner لحاجة يقدر المستخدم يتفاعل معاها، من خلال تقسيم الـDesign لأجزاء وبرمجتها، وإن كل ضغطة تقوم بعمل معين.

– ازاي تبدأ في أي مجال من الاتنين؟

لو عندك فكرة موقع وعاوز تطبقها، أو عاوز تبدأ تصميم أو تطوير ويب، فهنتكلم دلوقتي عن كل واحد فيهم، وإيه المطلوب منك بشكل عام:
أولاً الـWeb Design: بيكون فيه الـDesigner محتاج إنه يتعامل مع برامج زي: Adobe Photoshop، وIllustrator، وكمانInDesign، اللي من خلالها بيصمم واجهة الموقع، ده بجانب إنه يكون عارف أساسيات في لغات برمجة زي: HTML، وCSS، وعنده خلفية كويسة عنهم، وكمان يعرف أساسيات عن الـWeb Code والـWeb Hosting.
ثانيًا الـWeb Development: وده بالرغم من إن الضغطة على الصفحة تنفيذها بيستغرق مجرد ثواني، أو حتى أقل من ثانية، إلا إنه عشان ده يحصل بيكون عاوز سطور من الأكواد، بينفذها الـWeb Developer، أو اللي بيتسمى كمان بالـProgrammer. الـWeb Developer بيتعامل مع لغات برمجة زي: JavaScript، وPHP، وSQL.

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

1- HTML:

تعتبر من أسهل وأكتر اللغات المنتشرة في برمجة المواقع، وأسرعها في التعلّم، وهي اختصار لـHyperText Markup Language. الـHyperText هو الطريقة اللي بتنقلك بين المواقع، وبيكون على شكل Link لما بتضغط عليه بينقلك لصفحة تانية، الـHTML في الأساس بيكون عبارة عن Text بس الـBrowser بيقدر يحوله لشكل الموقع اللي بنشوفه. وممكن بعد ما تتعلم HTML، تتعرف على HTML5 وهي مجرد شكل أحدث للـHTML، وبيستخدم نفس الأساسيات.

2- CSS:

اختصار لـCascading Style Sheets، والـCSS هي اللي بتنظم شكل المحتوى الموجود في ملف الـHTML، وبتوصف ازاي هيكون الـStyle العام للصفحة من خلال: الألوان، الخطوط، الصور، وغيرها. وزي الـHTML5، هنا موجود تحديث على لغة CSS من خلال CSS3، اللي هيكون مفيد إنك تتعلمها.

3- JavaScript:

دي Scripting Language بتسمحلك بتنفيذ حاجات معقدة علي صفحة الويب. ميزتها أنها مش بتعرض Static Information، لكن بتعرض تحديثات المحتوى في الوقت المناسب. بالإضافة للخرائط التفاعلية، ورسومات 2D و3D، ومقاطع فيديو قابلة للتمرير. دا غير انها كمان Client-Side Script، يعني انت بتكتبها داخل صفحة الـHTML. معظم الـFunctions والتطبيقات اللي بتخلي الإنترنت بالنسبة لنا لا غنى عنه، الـJavaScript Coding داخل فيها.

4- PHP:

اللغة دي مخصصة للـWeb Development، وهي اختصار لـHyper Preprocessors، ومن خلالها تقدر تعالج البيانات اللي بتدخل الـPage، وبتشتغل عن طريق الـWeb Server، والأهم إنها Open-Source Language، وده اللي بيميزها عن لغات تانية زي الـPython والـJavaScript، وبتتميز كمان إنها بتتعامل مع Databases كتير أهمها الـMySQL، ومواقع “Facebook” و”Wikipedia” من أمثلة المواقع اللي بتستخدم لغة الـPHP.

5- SQL:

اختصار لـStructured Query Language، هدفها الأساسي الوصول والتعامل مع الـDatabases أو قواعد البيانات، ودورها مهم مع تعلم البرمجة، وواحد من الأنظمة اللي بتعتمد عليها هو MySQL، ومن مميزاتها إن استخدامها سهل، بتعالج البيانات بسرعة، ممكن نعتمد عليها بشكل كبير، وكمان سهولة التعديل عليها.

وبكده تكون اتعرفت على أساسيات الـWeb Design والـWeb Development، وازاي الاتنين بيكملوا بعض عشان يعرضوا قدامك أي موقع بتشوفه اونلاين. بتحديد هدفك، والتعليم، والتطبيق المتواصل هتقدر توصل لمستوى كويس في أي لغة منهم، وفي النهاية هتقدر تبني موقع خاص بيك انت.


Technology



مقالات ذات صلة





عصفورين سرعة التصفح والـSEO بحجر واحد اسمه الـAMP

Feb 21, 2018

Section |  Technology

فريق الـIT أو الـInformation Technology بنختصره دائماً في صورة “شرطة الهاكرز”. لكن الحقيقة الـJob Description بتاعته بتختلف من شركة لشركة حسب طريقة وحجم تعاملاتها. وفي بعض الاماكن بينحصر دور الـIT كـDesigners أو Developers….

...اقرأ المزيد


الـCTF مفتاحك لاحتراف الـCyber Security

Oct 21, 2019

Section |  Technology

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

...اقرأ المزيد


الـWeb Design قصاد الـWeb Development – ازاي الاتنين بيكملوا بعض؟

Oct 26, 2018

Section |  Technology

تقريبًا مفيش ساعة بتعدي علينا من غير ما نستخدم الإنترنت، سواء كان من خلال تطبيقات الـAndroid أو مواقع الـWeb، وأكيد سألت نفسك ازاي الصفحات دي بتشتغل عشان تطلع بالشكل ده قدامنا.مثلاً: لما بتدخل على الـFacebook….

...اقرأ المزيد