قبل أن نذهب إلى الموضوع الرئيسيّ للمقال، سأعطيك لمحة قصيرة عن مشاكل التصميم التي قد تواجهها. لقد اشتكى لي أحد زبائني بأن بعض الصفحات تفتح ببطء شديد. وعندما أقول ببطء شديد، فإنني أعني ذلك! فقررت أن أصحح تلك الصفحة (بعمل debugging)، وما رأيته قد صدمني. لقد أظهر لي قسم الاستعلامات (queries) أن تلك الصف…
وقعت عيني في أحد الأيام على مبدأ جميل لقائمة في أحد المواقع، وكان أحدهم قد قام ببناء شيء شبيه بها ولكني أردت أن أضيف لها تأثيرات إضافية وأجعلها متناسبة مع متصفحات سطح المكتب. لذلك أردت أن أريك في هذا الدرس كيفية القيام بشيء مشابه. سوف نقوم في هذا الدرس ببناء شيء شبيه بهذه المعاينة (أنظر إلى Demo2) ب…
في الفصل السابق، المجالات، تعلّمنا أنّ Angular تقوم بإنشاء مجالٍ جديد في كلّ مرّةٍ يتمّ فيها استدعاء الباني الخاصّ بالمتحكّم عن طريق ng-controller. هناك حالاتٌ أخرى أيضًا تقوم فيها Angular بإنشاء مجالاتٍ جديدة، وربّما تكون الحالات الأكثر شيوعًا هي عند التّعامل مع مجموعاتٍ من كائناتٍ متشابهة، كما سنر…
من الوهلة الأولى يبدو لنا إطار العمل هذا وكأنّه بسيط ويسهل التعامل معه، وبالطبع هو كذلك والبدء باستخدامه ليس بالأمر الصعب فتوثيق هذا الإطار مكتوب بشكل ممتاز ويحتوي على الكثير من الشيفرات البرمجية المتعلقة باللغات HTML، CSS وجافاسكربت. وصحيح أنّ المغالطات المهمة مذكورة في ذلك التوثيق، ولكن بعض الأخطا…
لا يخفى على أي مطور ويب أنّ الفئات الزائفة تُعتبر مهمة في تطوير المواقع وأنّه يجب على كل مطور ويب معرفتها ومعرفة كيفية عملها حتى يستطيع استخدامها متى ما احتاج إليها. وأكاد أجزم أنّه لا يوجد موقع لا يستخدم الفئات الزائفة مهما كان حجم هذا الموقع. لذلك في هذا الدرس سوف نتحدث عن 5 فئات زائفة وكيفية عمل…
ما الذي تعنيه كلمة "مجال" برأيك؟ قد تبدو من اسمها بأنّها تشير إلى جزءٍ من شيفرة التّطبيق، ربّما تم عملها لنتجنّب استخدام المجال العام الذي يسبّب العديد من المشاكل. يبدو أنّ الأمر بسيط، وإنّه لمن الحكمة أن يقوم إطار العمل بتطبيق شيءٍ كهذا، ربّما ليس علينا التّفكير في أمر المجالات أكثر من ذلك، هل يمك…
طلبت منك في الفصل السابق (المبادئ) أن تكبح جماح JavaScript بداخلك ريثما نستكشف القيمة الحقيقيةّ التي تقدّمها Angular، وهي تقديم امتدادات قويّة لـHTML لمطوّر النّهاية الأمامية front-end.   لا تنتهي قصّة Angular هنا بالطّبع، والمنهج في مشاريع Angular هو تخصيص السّلوكيات عن طريق JavaScript، فإذا كنت …
تناولنا في المقال السابق أساسيات التعامل مع مكتبة Google Maps JavaScript API لإنشاء الخرائط والرسم عليها والتفاعل معها مثل خاصية النقر على الخريطة وتحديد الأماكن. في هذا المقال سأتوسع في الشرح عن أنواع خرائط غوغل وخصائص كل نوع وعن كيفيّة رسم أشكال قابلة للتعديل والسحب على الخريطة، بالإضافة إلى خدم…
تعرفنا في المقال السابق على ملفات الوظائف في قالب Underscores بشئ من التفصيل وفي هذا المقال سنلقي نظرة على ملفات العرض وهي ملفات القالب التي يستخدمها ووردبريس لعرض محتويات الموقع في مختلف الصفحات وكذلك ملفات التنسيق. لكن دعنا في البداية نلقي نراجع بصورة سريعة مفهوم ملفات القالب وكذلك هرمية القالب. …
يعد ووردبريس من أحد أكثر نظم إدارة المحتوى (CMS) قوة. فهو يتميز بإمكانية تعديله وتطوعيه حسب رغبتك. كما يمنحك القدرة على إضافة الميّزات والتعديل على التصاميم وكذلك إضافة قسم للمواضيع المميزة في غضون دقائق معدودة. بإمكانك مشاهدة العديد من الخصائص الموجودة في قائمة الودجات Widgets مثل التصنيفات، آخر ا…
تطرقنا في أكاديمية حسوب سابقًا إلى أساسيات الصندوق المرن Flexbox وكيف يُمكن للمطوّر استخدام هذه الخاصية الرائعة في CSS3، وفي هذا المقال سنكمل مع الأساسيات ولكن بتركيز على الأمثلة بعيدًا عن الكلام النظري، وللحصول على الفائدة المطلوبة من هذا الأمثلة من الضروري قراءة المقال الآنف الذكر، وتحديث المتصفح…
يُعتبر هذين العنصرين من العناصر المهمة التي يجب على أيّ مطور ويب أن يعرفها ويعرف كيفية استخدامها في بناء المواقع وفي هذا الدرس سوف تتعرف عليها وعلى كيفية استخدامها وسوف نتطرق للعديد من الأمثلة حتى تكون الفائدة أكبر. تعريف بالعنصرين يُستخدم هذين العنصرين لإدخال محتوى معين (نص، أيقونة...الخ) بعد أو ق…
لا يكاد يخلو أي موقع ويب من وجود خرائط Google فمن خلال وضع خريطة على الموقع الخاص بك فإنك تعطي تأثيرًا غنيًا ومستوى أعلى للتفاعل بين المستخدمين. سأقوم في هذا المقال بشرح كيفيّة استخدام خرائط غوغل وإضافتها إلى صفحة الويب بالإضافة إلى كيفيّة تحديد أكثر من موقع بنفس الوقت على نفس الخريطة، وشرح بعض ال…
سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر بالطريقة الصحيحة والسليمة وباستعمال العنصر وبعض الجافاسكربت. معاينة النتيجة النهائية. يمكنك تحميل الشيفرة المصدرية للأمثلة من هنا. هناك العديد من الطرق لتخصيص العنصر وقد جربت العديد منها ولكنها لم تعجبني ولم تُلبّي متطلباتي. لذلك حاولت البحث في…
AngularJS هي إطار عمل لتطبيقات الويب من طرف المستخدم يقوم بتفسير نصوص HTML مرة ثانية، ولو كنت خبيرا في تطوير الويب فمن الطبيعي أن تحاول مقارنة AngularJS مع منصات ومكتبات JavaScript التي تألفها مثل jQuery ،Knockout ،Backbone ،Ember وربّما مع React أيضا، وربما حاولت بناءً على معارفك السابقة ببرمجة وا…
هل تعاني من صعوبة في تطبيق مفاهيم البرمجة الكائنية مع لغة JavaScript؟ إذًا أنت في المكان الصحيح، ففي هذا المقال سنبدأ بمطلع لمفاهيم البرمجة الكائنية (أو الشيئية كما قد يُطلق عليها البعض)، ومن ثم مراجعة نموذج جافا سكريبت في الكائنات، وأخيرًا شرح مفاهيم البرمجة الكائنية في جافا سكريبت، لتحصل على إل…
كُنّا في درس سابق قد تحدثنا عن كيفية تخطيط صفحات الويب باستعمال CSS2 وكيف أنّ ذلك لم يكن بالأمر السهل، لذلك في هذا الدرس سوف نقوم بنفس التخطيط ولكن باستعمال تقنيات CSS3 الجديدة. تٌقدّم لنا CSS3 مجموعة من التقنيات والتحسينات لتساعدنا على تخطيط صفحات الويب بشكل أفضل وأسهل ودون الحاجة إلى الكثير من الأ…
إنّ إتقان تخطيط صفحات الويب بدون إتقان لغة CSS سيكون كمن يحاول السباحة على أرضٍ جافة، ولكن على عكس السباحة التي عندما تتقنها تبقى معك طول الحياة فإنّه لا يوجد مرحلة يمكنك عندها التوقف عن التعلم وتقول أنّك أتقنت CSS فهذه اللغة تتطور بسرعة يومًا بعد يوم. كما أنّ تعلم وإتقان هذه اللغة سيكون أكثر تحديًا…
هل قمت من قبل باستعمال Media Queries CSS لإنشاء موقع متجاوب؟ إن كان جوابك لا فأعتقد أنه قد حان الوقت لذلك. ففي هذا الدرس سنقوم بتحويل قالب ووردبريس غير متجاوب إلى قالب متجاوب. في مقالات سابقة قمنا بتصميم، تكويد وبناء قالب ووردبريس كامل. التصميم نفسه قابل لأن يتم تحويله إلى تصميم متجاوب، لذلك سوف ن…
هذا هو الدرس الأخير من هذه السلسلة، ففي الدرس الأول قمنا بتصميم الواجهة باستخدام برنامج الفوتوشوب، وفي الدرس الثاني قمنا بتحويل التصميم إلى نموذج HTML5، أمّا في هذا الدرس فسوف نقوم ببناء قالب ووردبريس كامل وجاهز للاستخدام. إذا كان هذا هو أول درس تتابعه من هذه السلسلة فدعني أخبرك قليل…