مدونة مبدع خلاصات تطوير الويب والتصميم

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

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

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

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

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

إنتهيت من المواضيع السابقة في سلسلة الأجاكس بسهولة ووصلت إلى الموضوع النهائي ضمن السلسلة، أتمنى أن تكون الدروس قد أفادت أحد يريد تعلم الأجاكس.

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

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

• مثال على الدرس
• تحميل المرفقات

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

نجد الكثير من المواقع تطبق مميزات CSS3 في الوقت الحالي على تصاميمها حتى المواقع المشهورة والكبيرة تجد تصاميمها تستخدم خصائص CSS3. بالرغم من الدعم المحدود من بعض متصفحات الويب لها (مدعومة لمتصفح Firefox 3+ و Safari 3 و Google Crome في الوقت الحالي) إلا أن أولوية إستخدامها موجودة على الأقل كلمسات أخيره على التصميم.

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

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

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

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

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

تحدثت في الموضوع سابق حول توافق متصفحات الويب بإستخدام JQuery، وعن إستخدام خاصية browser في تحديد متصفح الويب الذي يستعمله المستخدم أو تحديد المحرك الخاص بمتصفح الويب، وأنا أفضل إستخدامه في حالات إختلاف بين متصفحات تدعم المعايير القياسية مثل إختلاف بسيط جداً بين محرك Webkit و Mozilla/Gecho أما عن الإكسبلورر يمكن تحديده إما عن طريق الخاصية التي سأشرحها اليوم أو بطرق أخرى مثل التعليقات الشرطية Conditional comment.

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

• مثال على الدرس
• تحميل المرفقات

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

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

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

• مثال على الدرس
• تحميل المرفقات

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