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

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

في هذا الموضوع سأتحدث عن محاكيات الهواتف النقالة Simulators التي تأتي مع أدوات التطوير SDK، الأنظمة التابعة للهواتف النقالة التي سأتحدث عنها هي نظام iOS الخاص بالآيفون و نظام Android بالخاص بهواتف مثل نكسس ون وجالاكسي وهواتف أخرى، ونظام webOS الخاص بهاتف بالم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

القوائم التي تأتي على شكل ألسنة معروفة لدى الجميع ويأتي الشكل من مفهوم 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 إضافةً إلى بعض روابط مذيلة بآخر الموضوع كما أتمنى أن تفيد الذين يريدون تعلم إستخدام هذه المكتبة.

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