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

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

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

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

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

روابط إخترتها لكم من التغريدات التي نشرتها عبر حسابي في تويتر إما مباشرة مني أو عبر إعادة تغريدة أحد الذين أتابعهم.

CSS3 Dropdown Menu

درس يشرح طريقة عمل قائمة روابط منزلقة عند تمرير الفأرة عليها بطريقة جميلة جداً وبإستخدام CSS3.

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

الكل يسعى للإستفادة من وقته بشكل فعال، بالرغم من وجود الظروف التي تسبب تضييق للوقت، الإنشغال بأمور لا تريد عملها أو بأمور أخرى عامة.

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

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

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

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

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

روابط إخترتها لكم من التغريدات التي نشرتها عبر حسابي في تويتر إما مباشرة مني أو عبر إعادة تغريدة أحد الذين أتابعهم.

سبق أن طرحت عدة روابط وتوقفت عن نشر الروابط الخارجية، ولكن ستكون هذه الروابط المختارة من تويتر إستعادة لتدوينات الروابط التي كنت أكتبها سابقاَ ولكن بشكل مختلف قليلاً وأن تكون المختارات مفيدة وفريدة.

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

47Amazing CSS3 Animation Demos

يعرض 47 مثال مدهش عن الحركة في CSS3.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شعار مقتبس من تدوينة شعار قص ولصق من مدونة شعارات

سأكتب درس قادم حول تحويل التصميم من PSD إلى HTML (من الفوتوشوب إلى صفحة HTML) في مدونة قص ولصق .. فكونوا معنا

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

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

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

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