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

يوجد موضوع أحدث حول إضافة ePermissions 1.2 (نسخة محدثة) فيها مميزات مفصلة عديدة مع أمثلة حول كيفية إستتعمالها وطريقة عملها مع المحررين.

إنتهيت من إضافة ووردبريس جديدة وهي إضافة ePermissions وجعلتها إختصار لـ editors permissions تعني تصريحات المحررين، تفيد أصحاب المدونات الجماعية غالباً أو المدونات التي لديها أعضاء محررين (مثل كتاب ومحرري المواضيع والتعليقات) ووظيفتها إدارة الأعضاء المحررين بشكل أفضل (الذين يحملون رتبة محرر Editor Role فقط) بإعطائهم القدرات أو الإمكانيات التي يوفرها الووردبريس لهم كمحررين أو ما تسمى Capabilities وتعطيل أياً منها من قبل المدير أو إتاحتها مثل:

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

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

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

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

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

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

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

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

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

القوائم التي تأتي على شكل ألسنة معروفة لدى الجميع ويأتي الشكل من مفهوم Tabs أو الألسنة ونجدها في أكثر من تطبيق سواء كان تطبيق ويب أو سطح المكتب، يمكن بالتأكيد عملها بتقنية HTML و CSS وبمساعدة لغة javascript.

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

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

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

يعجبني هذا النوع من القوائم والتي تعتمد على تأثير مثل Slide ضمن تأثيرات jQuery وهي قد لا تكون قوائم من حيث البنية ولكنها على شكل قوائم ويكون الشكل عمودي وليس أفقي.

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

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

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

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

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

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

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

مكتبة jQuery هي أحد مكتبات لغة Javascript الشهيرة مجانية ومفتوحة المصدر وتعتبر الأكثر إستخداماً بين المطورين، كما أنها مستخدمة حالياً في أكبر المواقع (بنسبة 20% من 10،000 من المواقع الكبيرة) وإنشأت لتكون التطبيقات المبنية عليها أقل حجماً وتكون سهلة الإستخدام والإختصار للوقت أكثر من غيرها من المكتبات، إضافةً إلى توفر جميع ما يمكن عمله بلغة Javascript بسهولة مثل تحديد عناصر (DOM(Document Object Model ، إنشاء التأثيرات والحركات بأنواعها، إستعمال الأحداث events ودعم أداة الأجاكس.

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

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

هذا الجزء الثالث من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، ذكرنا في الدرس الماضي بقية كتابة مكونات الأجاكس وباقي خصائص كائن XMLHttpRequest مع عرض المثال الإفتراضي في آخر الدرس.

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

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

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

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

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

يمكنك الرجوع لأجزاء لدرس عن طريق هذه الروابط:

• تحديث البيانات في القاعدة #1
• تحديث البيانات في القاعدة #2
• تحديث البيانات في القاعدة #3 (الصفحة الحالية)

• تحميل المرفقات

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

هذا الجزء الثاني من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، ذكرنا في الدرس الماضي بداية معرفة كتابة مكونات الأجاكس وعن كائن XMLHttpRequest وتضمينه في متغير requester والتأكد من تفعيله في كائن ActiveX (لمستخدمي متصفح الإسكبلورر).

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

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

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

• تحميل المرفقات

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

هذا الجزء الأول من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، سنتحدث في هذا الدرس حول كتابة مكونات الأجاكس في لغة Javascript كما ذكرنا، سنتعرف في البداية على كائن XMLHttpRequest والذي سنكتب عن طريقه بقية مكونات أداة الأجاكس.

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

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

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

• تحميل المرفقات

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

أداة الأجاكس Ajax، إختصار لـ asynchronous Javascript and XML تعتبر من تقنيات/أدوات تطوير الويب، إلا أنها تحوي مجموعة من التقنيات مستخدمة خلالها، كما أنها تستخدم وتظهر شفرتها من جهة العميل client-side تستخدم لإنشاء تطبيقات ويب تفاعلية، وتعتمد على إستدعاء البيانات في التطبيقات الويب من خلال الخادم أو Server ودون الحاجة إلى تحديث الصفحة.

عادة يتم إستدعاء البيانات عن طريق كائن XMLHttpRequest ولست ملزماً بإستخدام XML أثناء تطبيق أداة الأجاكس، وبما أنها مجموعة من تقنيات الويب فهي تحتوي على:

• HTML و CSS لتنسيق المعلومات.
• DOM (إختصار لـ Document Object Model) تستخدم للوصول إلى عناصر البيانات وإجراء كافة التعاملات من كتابة وحذف وتعديل البيانات التي تم إستدعائها.
• كائن XMLHttpRequest لتبادل المعلومات بين المتصفح والخادم بدون إعادة تحديث الصفحة.
• XML وJSON كنموذج لإستدعاء البيانات إلى المتصفح. (يتم إنشائها من جهة الخادم server-side)

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

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

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

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