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

مع سيطرة متصفح الفايرفوكس على سوق المتصفحات وإرتفاع نسبة إستخدامه عن نسبة إستخدام إصدارات متصفح إكسبلورر كما توضح إحصائيات موقع W3schools وإنخفاض عدد مستخدمين إكسبلورر 6 خاصة مع إعلان موقع يوتيوب التخلي عن دعم توافق موقعه مع الإصدار السادس لمتصفح إكسبلورر.

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

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

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

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

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

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

مع ظهور الإصدار الثالث لتقنية CSS منذ فترة من قبل منظمة W3c المستخدمة في تنسيق مواقع الويب بجانب تقنيات مثل HTML، XML والتي لازال فريق CSS WG في منظمة W3c يعمل على الإصدارة الثالثة والتي تدعمها بعض متصفحات التي تعتمد على محرك Gecko و Webkit مثل Firefox و Safari بإستثناء المتصفح Internet Explorer، مع دعمها بعض مميزات CSS3 وليست جميعها، يمكنك رؤية إختبار دعم CSS3 للمتصفحات.

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

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

واجهة المستخدم User Interface ، أو واجهة الإستخدام كما نسميها نحن غالباً لها أهمية كبيرة في جميع المجالات سواء كان في تطوير المواقع (مواقع، تطبيقات ويب، ..) و أنظمة التشغيل (تطبيقات سطح المكتب، المهام، ..) وفي التقنية بشكل عام، واجهة المستخدم كما تجده أيضاً في الويكيبيديا ستجد له أقساماً عدة ومستخدمة في عدة أشياء أو مجالات.

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

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

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

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

سبق كتبت درس حول خاصية position ، وأردت كتابة دروس أخرى حول هذه الخاصية وسأكتفي به لأني المصادر المتعلقة بها متوفرة وبكثرة جداً بالمواقع الأجنبية فلا حاجة لإعادة الدروس مرة أخرى! ، درس اليوم سيكون عن تطبيق على تأثير المحدد hover ، سواء كنت تريد عمل قائمة روابط أو ملاحة (Navigation) ، أو بنفس الطريقة ولكن على واجهة تستطيع من خلالها التحكم في ظهور الصور التي تريدها بتأثير مؤشر الفأره عليه.

• مثال على الدرس ، تأثير بسيط على كلمة (إشترك الآن) وظهور عبارة الخصم ..
• تحميل الأمثلة.

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

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

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

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

Authentic Style

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

خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.

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

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

• تحميل الأمثلة
• لمشاهدة الأمثلة موجودة أسفل الصفحة

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

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

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

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

عند عمل نموذج في XHTML يكون ذلك في البداية عن طريق الوسم form والذي سيحتوي على بقية محتويات النموذج هناك طرق أسهل لعمل النماذج ولكن سنخصص هذا الموضوع بالتفصيل قليلاً سنشرح الخصائص المتعلقة بكل وسم نريده وأشكال لنماذج وكيفية عملها بإستخدام CSS ( سيأتي لاحقاً).

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

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

أيهما أصح تقوم بإنشاء صفحة الويب بإستخدام xhtml بشكل يدوي مع إستخدام الأوسمة والعناصر أم بإستخدام البرامج أو المحررات التي تعتمد على واجهة WYSIWYG (ما تراه هو ما تحصل عليه – What You See Is What You Get ) ؟ الأساس والعملي بإعتقادي هو الجواب الأول ، ما هي الأسباب التي تجعلك تبدأ بالتصميم بواسطة شفرة xhtml؟

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

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

• مثال على الدرس.
• تحميل المصدر.

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

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

• مثال على الدرس.
• تحميل المصدر.

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