أبجديات تطوير الويب

غالبًا ما يكون تطوير الويب معقدًا للغاية. اليوم، بالنسبة للمبتدئين، أريد أن أقدم لكم 26 مفهومًا وتقنية، واحد لكل حرف من الحروف الأبجدية الإنجليزية. يبدو غريبا، لذلك دعونا نبدأ.

أ —— اياكس

يشير AJAX إلى JavaScript وXML غير المتزامنين، وهو القوة الدافعة الرئيسية وراء جميع تطبيقات الويب بطلاقة التي استخدمتها في السنوات الأخيرة. كتقنية، يتم بالفعل استخدام AJAX على نطاق واسع. Gmail وFlickr وما إلى ذلك. ويمكنك أيضًا العثور عليها في لوحة إدارة WordPress. إذن ما هو بالضبط وكيف يعمل؟

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

القراءة ذات الصلة

كيفية تقديم طلبات AJAX باستخدام جافا سكريبت الخام

24 أفضل الممارسات لتطبيقات AJAX

أرسل نموذجًا بدون تحديث الصفحة باستخدام jQuery

ب —— المتصفح (المتصفح)

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

القراءة ذات الصلة

13 طريقة لاختبار المتصفح والتحقق من صحة عملك

أفضل 5 طرق لاختبار المتصفح موقع الويب الخاص بك

9 أخطاء IE الأكثر شيوعًا وكيفية إصلاحها

ج ——CSS

CSS هو سيف حاد في تطوير الواجهة الأمامية. CSS، اختصار لـ Cascading Style Sheets، هي لغة تحدد كيفية عرض صفحات الويب. في الأيام الأكثر رعبًا في تطوير الويب، غالبًا ما يكتب المطورون كود النمط في كود مصدر HTML. يفصل CSS الأسلوب عن المحتوى بشكل جيد جدًا.

القراءة ذات الصلة

محددات CSS الثلاثين التي يجب عليك حفظها

30 أفضل ممارسات CSS للمبتدئين

فهم خصوصية CSS

CSS: Noob to Ninja – سلسلة الفيديو الكاملة

د —— دوم

DOM هو اختصار لـ Document Object Model، وهو الاصطلاح المقبول للتفاعل مع مستندات HTML أو XML. توفر واجهة DOM API وظائف لاجتياز المستندات ومعالجتها برمجيًا. "ينشئ DOM بنية هرمية متسقة لمستند HTML الذي تم تحليله. تسمى العناصر الفرعية بالعقد أو عقد DOM." إذا سمعت أشخاصًا يتحدثون عن DOM، فهم في الواقع يتحدثون عن نصوص DOM. كان هذا في السابق مصطلحًا يصف الوصول إلى DOM ومعالجته عبر JavaScript. هذه هي التقنية الكامنة وراء معظم مواقع الويب والتطبيقات الحديثة التي تراها اليوم.

القراءة ذات الصلة

جافا سكريبت وسلسلة DOM: الدرس الأول

جافا سكريبت وDOM: الدرس الثاني

الدوم في حالة من الفوضى – محاضرة لجون ريسيج

ه —— الأحداث

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

القراءة ذات الصلة

جافا سكريبت من Null: الفصل 5 - الأحداث

أحداث جافا سكريبت من الألف إلى الياء

جافا سكريبت من Null: ربط الأحداث عبر المتصفح

تفويض حدث جافا سكريبت في 4 دقائق

F —— فاير بوج

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

القراءة ذات الصلة

10 أسباب لماذا يجب عليك استخدام Firebug

كيفية عمل سمة لأي نظام إدارة محتوى (CMS) باستخدام Firebug

Firebug: الحزام الأبيض إلى الأسود

ز - الشبكة

الشبكة هي إطار مرئي لتنظيم الصفحة. لقد تم نقلها من صناعة الطباعة التي كانت متطورة سابقًا، وتعد الشبكة جزءًا أساسيًا من تطوير الويب الحالي. هناك العديد من أطر عمل CSS التي يمكن استخدامها لإنشاء تخطيطات قائمة على الشبكة، والتي تتطلب تدريبًا مكثفًا لعدد كبير جدًا من الصفحات والتخطيطات.

القراءة ذات الصلة

نظرة تفصيلية على إطار عمل 960 CSS

نظرة فاحصة على إطار عمل Blueprint CSS

دورة مكثفة: YUI Grids CSS

إتقان نظام الشبكة 960

ح —— HTML

إذا كنت تقرأ هذا المقال الآن، فربما تكون لديك فكرة غامضة عن مفهومه. إذا خدعك هذا الرابط، يرجى مواصلة القراءة. بالمناسبة، نرحب بالجميع لزيارة موقع Rockux. نحن نقدم العديد من المقالات حول تطوير الويب. HTML هو اختصار للغة Hypertext Markup Language وهو المعيار الفعلي للغة الويب. يتكون HTML من عدة مكونات أو عناصر: العلامات وسمات العلامة والمحتوى الموجود داخل العلامات. أحدث إصدار من معيار HTML، HTML5، يقدم لنا العديد من الميزات الجديدة ويحل بعض مشكلات التوافق.

القراءة ذات الصلة

دورة "HTML5 وأنت".

30 أفضل ممارسات HTML للمبتدئين

28 ميزة ونصائح وتقنيات HTML5 يجب أن تعرفها

علامات HTML العشرة التي لا يستخدمها المبتدئون

أنا - أي

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

القراءة ذات الصلة

الأشياء التي حصل عليها Internet Explorer بشكل صحيح

9 أخطاء IE الأكثر شيوعًا وكيفية إصلاحها

هل نجح Internet Explorer في الحصول على نموذج Box الصحيح؟

ي - جافا سكريبت

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

القراءة ذات الصلة

24 أفضل ممارسات جافا سكريبت للمبتدئين

جافا سكريبت من Null: سلسلة فيديو

33 مطورًا يجب عليك الاشتراك بهم باعتبارك مدمنًا لجافا سكريبت

K —— تحسين الكلمات الرئيسية (تحسين الكلمات الرئيسية)

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

القراءة ذات الصلة

أدوات تحسين محركات البحث (SEO) الوحيدة التي ستحتاج إليها

ل —— أقل

أقل هي لغة أسلوب الورد الشائك. يصف موقع الويب الخاص بهم LESS على أنه توسيع للسلوك الديناميكي لـ CSS، مثل المتغيرات والخلطات والعوامل والوظائف، وأنا أميل إلى تفضيل هذا النهج. أقل هو CSS على المنشطات. نعم يبدو الأمر أفضل بالنسبة لي، لكنك تعرف ماذا يعني ذلك. إنه يجلب خصائص اللغات الديناميكية إلى CSS، مما يجعل أوراق الأنماط أكثر قوة وأسهل في الإدارة.

القراءة ذات الصلة

كيفية تحقيق أقصى استفادة من الأقل

أنت بحاجة إلى التحقق من LESS.js

لا تكتب بادئة البائع مرة أخرى أبدًا

م —— MVC

يعد نمط التحكم في عرض النموذج، المعروف باسم نمط MVC، أحد الأنماط الأكثر استخدامًا في تطوير الويب. هذا هو النمط المعماري الذي يقسم كل جزء من تطبيق الويب إلى أجزاء منطقية لتسهيل الصيانة - يعالج النموذج البيانات، ويتعامل العرض مع العرض التقديمي، وتكون وحدة التحكم مسؤولة عن تدفق البيانات بين الجزأين.

إذا كنت تستخدم إطار عمل حديث لتطوير الويب، فإنك تستخدم MVC. يستخدم كل من Ruby on Rails وCode Igniter وZend Framework هذا النمط.

القراءة ذات الصلة

MVC لـ Noobs

قم بإنشاء أول نموذج Tiny MVC Boilerplate الخاص بك باستخدام php

asp.net من الصفر: MVC

N - العقدة JS

Node.JS تقود تطوير الويب إلى عصر جديد. يجعل من الممكن تشغيل JavaScript على محرك VM (V8) سريع جدًا. قد لا تكون نتائج هذا التحول في أنماط التفكير واضحة على الفور، ولكن مع مرور الوقت سوف تصبح المزايا واضحة.
تعد السرعة والقدرة المذهلة على إدارة الآلاف من أحداث الإدخال والإخراج المتزامنة بمثابة نقاط حوار رئيسية لمطوري JavaScript حول العالم.

القراءة ذات الصلة

تعلم JavaScript من جانب الخادم باستخدام Node.js

الموقع الرسمي لـ Node.JS

يا —— كائن

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

القراءة ذات الصلة

كائنية التوجه PHP للمبتدئين

أساسيات جافا سكريبت كائنية التوجه

رابط ويكيبيديا

ف —— PHP

PHP هي بلا شك اللغة الأكثر شيوعًا من جانب الخادم - فهي تعمل على تشغيل الملايين، وربما المليارات، من صفحات الويب والتطبيقات.

على الرغم من عدد كبير من التحديثات والمناقشات حول الخيار الأفضل لكتابة تطبيقات الويب، إلا أن لغة PHP لم تنجح فحسب، بل ازدهرت أيضًا. يستخدم كل من WordPress وJoomla وDrupal وMediaWiki لغة PHP كلغة خلفية. أحد الأسباب الرئيسية هو أن النشر سهل ويمكنك بسهولة نسبيًا العثور على مضيف يدعم PHP.

القراءة ذات الصلة

30+ أفضل ممارسات PHP للمبتدئين

لماذا أنت مبرمج PHP سيئ؟

9 وظائف وميزات PHP مفيدة تحتاج إلى معرفتها

س —— الاستعلام

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

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

القراءة ذات الصلة

CodeIgniter من الصفر: نتائج البحث بدون سلاسل الاستعلام

"المشاركات الشائعة حسب عدد التعليقات" استعلام SQL في WordPress

ص - التعبيرات العادية

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

القراءة ذات الصلة

التعبيرات العادية للدمى: سلسلة Screencast

أنت لا تعرف شيئًا عن التعبيرات العادية: دليل كامل

نصائح وتقنيات متقدمة للتعبير العادي

S - التحكم بالمصدر (التحكم بالمصدر)

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

القراءة ذات الصلة

Terminal وGit وGitHub لبقيتنا: Screencast

مقدمة مرئية لـ Git

التحكم السهل في الإصدار باستخدام Git

الحصول على تعليق جيثب

T - TDD (التطوير القائم على الاختبار)

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

القراءة ذات الصلة

دليل المبتدئ للتنمية القائمة على الاختبار

تطوير جافا سكريبت القائم على الاختبار في الممارسة العملية

كيفية اختبار كود جافا سكريبت الخاص بك مع QUnit

U —— اختبار الوحدة (اختبار الوحدة)

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

القراءة ذات الصلة

كيفية اختبار كود جافا سكريبت الخاص بك مع QUnit

الخامس —— فيم

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

ث - ووردبريس

بدأ WordPress كنظام تدوين بسيط، لكنه توسع الآن بشكل لا يصدق. تسمح قابلية التوسع باستخدامه في كل شيء بدءًا من أنظمة إدارة المحتوى (CMS) وحتى أنظمة التجارة الإلكترونية. كما أن لديها الكثير من المتحمسين والمتابعين، بما في ذلك المطورين والمصممين، الذين يريدون جعلها منصة موثوقة يمكنك الاعتماد عليها في مواقع الويب المستقبلية.

القراءة ذات الصلة

كيفية إنشاء موضوع ووردبريس من الصفر

المكونات الإضافية الأساسية لكل تثبيت WordPress

توسيع نطاق WordPress من أجل حركة المرور العالية

أفضل 50 دروس ووردبريس

8 ملحقات WordPress SEO رائعة

X —— XSS

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

القراءة ذات الصلة

هل يمكنك اختراق موقعك الخاص؟ نظرة على بعض الاعتبارات الأمنية الأساسية

CodeIgniter من الصفر: الأمان

5 نصائح مفيدة لإنشاء تطبيقات PHP آمنة

ص —— يوي

مكتبة واجهة مستخدم Yahoo هي مكتبة JavaScript تعمل على تبسيط عملية إنشاء مواقع الويب التفاعلية. مثل معظم المكتبات الحديثة، فهي توفر معالجة DOM وAJAX جاهزة للاستخدام. على الرغم من أنها ليست مشهورة مثل jQuery، إلا أن YUI لا تزال تتمتع بقاعدة مستخدمين كبيرة جدًا، وقد تم تطويرها بنشاط.

القراءة ذات الصلة

مقدمة إلى YUI

2010 من خلال عدسة مسرح YUI

Z —— مؤشر Z

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