إرشيف وسم 'دروس'

الألوان في تقنية CSS3

كاتب المقال: مازن بشر، مهتم بكل ما يختص الإنترنت والحاسوب بشكل عام و خاصة التصميم والجديد في تقنيات الويب من CSS،HTML5،PHP،Javascript. بدأت منذ حوالي ثلاث سنوات بالإهتمام بأحدث تقنيات الويب ولا زال شغفي يزداد يوماً بعد يوم بهذا العالم المتسارع.

بعد أن اقتصرت الألوان في معايير CSS2 على استخدام الكلمات المفتاحية (Keyword) أو استخدام القيم العشرية (hexadecimal) أتت القفزة النوعية في معايير تقنية CSS3 لتتيح لنا مجالات أوسع مثل ألوان الشاشات RGB و ألوان الطباعة CYMK إضافة إلى أمكانية استخدام الشفافية و سأتي على ذكر كل القيم اللونية الممكن استخدامها حالياً القديمة منها و الحديثة.

.. إقرأ بقية الموضوع »

إستخدام لغة Javascript في Photoshop Actions

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

.. إقرأ بقية الموضوع »

تقنية Less CSS

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

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: إستخدام الخطوط المرفقة في صفحات الويب

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

في هذا الموضوع ستجد كيفية إستخدام خط مرفق على صفحة ويب عبر خاصية font‪-‬face وكيفية إستخدام أكثر من صيغة للخط لتتناسب مع عدة متصفحات ويب ومن ضمنها متصفحات الهواتف النقالة.

تصميم الويب للهاتف النقال: تلميحات #3

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

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: حول Media Queries

هذه أحد المواضيع الأخرى ضمن سلسلة تطبيقات على CSS3 والتي تعرض عدة أمثلة على إستخدام تقنية CSS3 حسب كل خواص جديدة مع غرضها، في هذا الدرس سأعرض أمثلة على إستخدامات  Media Queries أو إستعلامات التصفح الخاصة لكيفية إستعراض صفحات الويب حسب شروط معينة مثل قياس عرض نافذة المتصفح وهي وسيلة رئيسية لتطبيق مفهوم إستجابة تصميم صفحة الويب لطريقة العرض Responsive Web Design وتأتي كذلك من خاصية media المتعلقة بنوع إستعراض الصفحة مثل ‏all (إستعراض لجميع الأجهزة والمتصفحات)، print (إستعراض الصفحة قبل الطباعة)، screen (إستعراض للأجهزة الداعمة للألوان – أي جهاز حاسوب -)، tv (إستعراض لأجهزة التلفاز) .. وغيرها من الأنواع الإستعراض التي يمكن القراءة عنها.

تستخدم Media Queries في تحديد تنسيق معين للصفحة حسب عرض النافذة ويمكن إستخدام نفس التنسيق الخاص بالصفحة (مثل ملف style‪.‬css) وتعديل أصناف معينة خاصة بعناصر الصفحة (خاصية class و id) كما سنرى في هذا الدرس، في البداية سنلقي نظرة لأنواع إستعلامات Media Queries.

.. إقرأ بقية الموضوع »

إنشاء العناصر والتحكم بها بإستخدام مكتبة jQuery

الكثير من المطورين يستخدمون مكتبة jQuery المشهورة والمميزة بسهولتها وقلة عدد أسطر الكتابة فيها، من بين الطرق (methods) الخاصة بمعالجة العناصر وطرق الأحداث توجد طرق خاصة لإنشاء عناصر HTML من ثم التحكم بها وهو ما كان موجود منذ الإصدارة 1.3 من مكتبة jQuery.

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: التدرجات

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

كما أن في هذا الدرس سوف تتعرف على الخاصية التي تقوم بعمل التدرجات في CSS وتكتب الخاصية بأكثر من طريقة بسبب دعم المتصفحات لها مثل تطبيق خاصية التدرجات في متصفح Firefox الذي يستخدم محرك Gecko وفي متصفح Safari الذي يستخدم محرك Webkit. علماً بأن خاصية التدرجات Gradient تكتب في كقيمة في خاصية background-image، ومدعومة في المتصفحات التي تستخدم محرك Webkit و Gecko.

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: تحديد خط معين

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

إختيار خط خاص بالصفحة المنسقة موجودة من قبل ولكن مفعلة أكثر في CSS3. هذه الميزة لحل إشكاليات تناسب الخط من طرف المصمم وصاحب الموقع والأهم تناسب مستخدم الموقع. يمكن إختيار خطوط أخرى مناسبة للمصمم ومستخدم الموقع التي لاتوجد في جهاز المستخدم والذي تعود على الخطوط المعروفة مثل خط Arial و Tahoma وsans-serif وغيرها موجودة في جهازه أساساً. هذه الميزة مدعومة في محرك Webkit ومحرك Mozilla/Gecho ومحرك Presto.

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: تعدد الخلفيات

هذا الدرس ضمن سلسلة تطبيقات عن CSS3، أستعرضت في المرة السابقة طريقة عمل الظلال في CSS3 ، درس اليوم يتحدث عن ميزة تعدد الخلفيات في CSS3 والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.

ميزة تعدد الخلفيات في CSS3 إختصرت الكثير من تنسيقات CSS التي كانت تحتاج إلى أكثر من عنصر من وسم div لعمل أكثر من خلفية في عنصر واحد لعل أشهر مثال هو مثال الحواف الدائرية لكنها موجودة في CSS3 ولا تحتاج الآن إلى وجود الصور كخلفية ولكن هناك عناصر قد تحتاج إلى أكثر من صورة موجودة في الخلفية، كما أن تعدد الخلفيات في CSS3 يتم على خاصية background نفسها، هذه الميزة مدعومة في محرك Mozilla/Gecho و محرك Webkit إضافةً إلى متصفح Opera.

.. إقرأ بقية الموضوع »

إنشاء إضافة لمكتبة jQuery (الجزء الثاني)

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

المثال سيكون عن إضافة لعمل تأثيرات على فتح قوائم منزلقة بشكل عمودي (وهو أحد الدروس التي شرحتها سابقاً حول عمل قائمة منزلقة بإستخدام jQuery)، بدلاً من تحديد العناصر بشكل مباشر على الشفرة تكون العناصر محددة بإستخدام الدالة التي أنشأتها عن طريق الإضافة كأنها احد دوال jQuery. يمكنك رؤية مثال على قوائم منزلقة أنشأتها في احد الدروس السابقة.

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: الظلال

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

ميزة الظلال في CSS3 توفر للخطوط والعناصر HTML الأخرى وجود ظل محدد بلون معين إضافةً إلى وجود درجة تشتيت وأبعاد محددة وهي تكون عبر خاصية text-shadow خاصة بوجود الظلال في النصوص وخاصية box-shadow خاصة بوجود الظلال في العناصر HTML عموماً مثل أشكال الصناديق، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox إضافةً دعم متصفح Opera لميزة الظلال.

.. إقرأ بقية الموضوع »

إنشاء إضافة لمكتبة jQuery (الجزء الأول)

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

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

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: تحريك العناصر

هذا الدرس ضمن سلسلة تطبيقات عن CSS3، أستعرضت في المرة السابقة طريقة عمل تعدد الأعمدة في CSS3 ، درس اليوم يتحدث عن ميزة تحريك العناصر في CSS3 والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.

ميزة التحريك في CSS3 تتيح إمكانية إعطاء خصائص CSS الأخرى فترة ظهور سواء كانت بطيئة أو سريعة وتحدد بالثواني، إضافةً إلى مدة لتأخير التحريك والظهور، ما زال دعم خصائص هذه الميزة محدود على المتصفحات التي تعمل على محرك webkit مثل متصفح Safari وChrome، متصفح Firefox يدعم خاصية transform فقط.

.. إقرأ بقية الموضوع »

تطبيقات على CSS3: تعدد الأعمدة

هذا الدرس ضمن سلسلة تطبيقات على CSS3، أستعرضت في المرة السابقة طريقة عمل الحواف الدائرية بواسطة خاصية border-radius والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ودرس اليوم يتحدث عن ميزة تعدد الأعمدة في CSS3 وتسمى أيضاً Multi-column ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C.

الأعمدة المتعددة تظهر عبر تقسيم فقرة طويلة واحدة أو عدة فقرات على عدة أعمدة بشكل مرتب كما نراها عند قراءة الصحف والمجلات، وتطبيق اليوم سيكون عن عدة خواص مثل خاصية column-count و column-gap وغيره، والتي تستخدم في عمل تعدد الاعمدة للفقرات لتظهر بشكل مرتب ومتناسق، غالباً ما يتم عملها على ذيل الصفحة لتنسيق معلومات قد لاتكون مهمة ولكن يتم ترتيبها وتنسيق على هذا النمط.

.. إقرأ بقية الموضوع »

 1 2 3 >>

تابع آخر مواضيع المدونة عبر هذه الوسائل

إشترك في القائمة البريدية لتصلك آخر مواضيع المدونة

صفحات المدونة

أقسام المدونة

مواضيع مختارة

مواقع صديقة


Plugin from the creators ofBrindes Personalizados :: More at PlulzWordpress Plugins