اذهب إلى المحتوى

البرمجة

اعرض جميع التصنيفات
اطّلعنا في المقالة السابقة على خاصيات الحركات، ورأينا كيف أنَّها تعتمد على الإطارات المفتاحية (keyframes). سنلقي في هذه المقالة نظرة أعمق على الإطارات المفتاحية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: …
في هذه السلسلة من الدروس، سنتحدث عن مكتبة jQuery Mobile ونتعرف عليها عن كثب والتي تساعدك على إنشاء مواقع ويب متجاوبة ومتوافقة مع الهواتف. تتضمن هذه السلسلة أكثر من 65 مثال تطبيقي عملي مع شيفراتها الكاملة. هذا الدرس جزء م…
تعرَّفنا على العديد من المعاملات الحسابية في المدرسة، مثل الجمع +، الضرب *، الطرح – وما إلى ذلك. في هذا المقال، سنشرح معاملات أخرى لم نتعرف عليها في المدرسة بالإضافة إلى تلك المعاملات.   مصطلحات جديدة: أحادي، ثنائي،…

خاصيات الحركات

بواسطة محمد بغات، في CSS، ‏

قبل إعطاء المزيد من أمثلة التحريك، دعونا نلقي نظرة على خاصيات التحريك أولًا. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل لإنشاء الحركات مدخل إلى…
Lighthouse هو أداة مُؤَتمتة (Automated) مفتوحة المصدر لتحسين صفحات الويب. يمكن تطبيق الأداة على أي صفحة ويب سواء كانت عامّة أو تحتاج للاستيثاق (Authentication). يمكن استخدام الأداة للتدقيق في الأداء، قابليّة الوصول (Accessibi…
ألقينا في المقالات الماضية نظرة على الخاصية transition، وسنلقي في هذه المقالة نظرة أعمق على الخاصية animation. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة ال…

دليلك إلى منهجية BEM

بواسطة سجى الحاج، في CSS، ‏

هذا المقال تمت كتابته بتعاون بين Joe Richardson و Robin Rendle ومجموعة من فريق موقع CSS-Tricks. أراد Joe إضافة مقال بخصوص BEM التي أحببناها وكان لدى كل منا أفكارًا وآراءً حولها، لذلك قررنا أن نتعاون سويًا لكتابة هذا المقال. …
استخدمنا في المقالات السابقة الخاصية transition للقيام بالتحريك بين حالتين، حالة عدم التحويم (non-hover state) وحالة التحويم (hover state). تحدُث تلك الانتقالات عند التحويم (تمرير مؤشر الفأرة) فوق العنصر. بيْد أنّ هذه لي…
تعلمنا فيما سبق في هذه السلسلة "كيف تجري تغيرات على شجرة DOM" والتعامل مع شجرة DOM من إنشاء، وإدراج، واستبدال وإزالة عناصر من المستند بتوابع مضمنة. أصبحت الآن مؤهلًا لاستخدام قدرات JavaScript التفاعلية وتعديل عناصر الويب لبزي…
لقد ناقشنا في المقالات السابقة كيف يخلق الانتقال (transition) الحركة عبر الانتقال من حالة إلى أخرى. في هذه المقالة سنرى ما يحدث عندما نطبق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات، وكيفية استخدام عدة انتقالات معًا…

إعداد صور متجاوبة

بواسطة سجى الحاج، في HTML، ‏

المرة الأولى التي صنعت فيها صورة متجاوبة (responsive)، كانت بسيطة مثل ترميز هذه الأسطر الأربعة. img { max-width: 100%; height auto; /* default */ } رغم أن ذلك كان مناسبًا لي كمطور، إلا أنه لم يكن الأفضل للمستخدمين.…
يُخفّض الضّغط من أوقات الاستجابة من خلال تقليص حجم استجابة HTTP. يُعدُّ Gzip طريقةَ الضّغط الأكثر شيوعًا وفعاليّةً في الوقت الحاضر و عادةً ما يُقلّص حجم الاستجابة بما يقارب 70%. في عام 2009، كانت 90% من حركة البيانات على…

دوال التوقيت

بواسطة محمد بغات، في CSS، ‏

دالة التوقيت (timing function) تتحكم في وتيرة وسرعة التغيرات التي تحدث إبّان الانتقال (transition). باستخدام دوال التوقيت، يمكن جعل الانتقالات أكثر حيوية. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: م…
تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ تجهيز بيئة العمل …
تُحوِّل الدوال والمعاملات، في أغلب الأحيان، القيم التي تصلها إلى النوع الذي يناسبها وهذا ما يسمى «تحويل النوع». تُحوِّل الدالة alert مثلًا أي قيمة إلى سلسلة نصية تلقائيًا لإظهارها، وتُحوِّل والعمليات الرياضية القيم التي تستعم…
أنا متأكد تمامًا من أنك تفهم أهمية قائمة التنقل في موقع الويب وارتباطها بمشاركة الموقع فيما يلي عشر نصائح لجعل تجربة المستخدم UX سلسلة وأكثر قابلية للاستخدام. تعد إمكانية التنقل داخل موقعك جزءًا مهمًا لأي موقع ويب من أيً…
الآن وبعد أن قدمنا الخاصيتين transition و animation، فقد حان الوقت للتعمق أكثر في الانتقالات (transitions)، ومطالعة بعض الأمثلة. هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS: ما هي استخدامات الحركات؟ …
×
×
  • أضف...