مدونة تقنية تعرض مواضيع متخصصة في تطوير مواقع الويب، التصميم والتدوين مع إستعراض لروابط مفيدة للمطورين والمصممين مختارة من تويتر.
الكثير منا يهتم بجمع أعمال مطوري مواقع الويب الآخرين و أكثر الأشياء التي تدعوك لمشاهدة هذه الأعمال هي زيادة فهمك لعمل مثل هذه التصاميم ، معرفة طريقة عملها ، دراسة عناصر الصفحة وتنسيقها ، أفكار لواجهات الإستخدام User Interfaces ، .. بإختصار مصدر إلهام لكل مطور ومصمم ، هذه مجموعة من مفضلتي لأفضل وأكثر من 20 معرض للأعمال إحتفظت بها سابقاً وأحببت مشاركتكم بها مع الروابط والصور.
عن طريق متابعتي للمدونات الأجنبية المتخصصة سواء في التصميم أو تطوير المواقع ، كنت أتابعها عن طريق الشبكات الإجتماعية ولكن مع الوقت إكتفيت بمدونات حددتها تفي بالغرض بدلاً من متابعة أكثر من 10 تدوينات يومياً بجانب المدونات الأخرى! وبهذه الطريقة ستحاول تنظيم الروابط التي تتابعها عن طريق قاريء RSS.
هذا الدرس تطبيق للدرس السابق حول تنسيق النماذج ، ولكن سيكون عملي أكثر بشفرة HTML و CSS وأيضاً إستخدام Javascript في إضافة ميزتين للنموذج ، وهما ملاحطة حول الحقول المهمة بمجرد الضغط على الحقل (بإستخدام الحدث onFocus و onBlur ) وأيضاً التأكد من الحقول المهمة التي نسقناها ، سأحاول شرح النقاط المهمة في الدرس مع وجود مثال قبل قراءة الدرس وإن أعجبك تستطيع أيضاً تحميل ملف الدرس.
خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.
الفكرة واضحة من العنوان (ومعروفة للجميع ) فقط أحببت مشاركتكم به ولمن لا يعرف طريقة عملها ، وهي عمل الحواف الدائرية الجميلة والتي نراها في معارض تصاميم CSS المختلفة ، أحب أن أذكر أني كتبت درس سابق لطريقة عمل حواف دائرية في الفوتوشوب سهلة جداً ،ولكن هذا الدرس يتحدث عن طريقة عملها في CSS أي ربط الصور أو تقسيمها وعرضها في صفحة الويب على شكل صندوق.
هذا الدرس تابع لآخر درسين كتبتهم حول النماذج في XHTML وسأكمله عبر هذا الدرس كما هو واضح من العنوان كيفية تنسيق نموذج XHTML ، بالنسبة للنماذج كما نعلم فإن تقسيم الحقول إلى مجموعات يتم عبر الوسم fieldset ، يمكنك إستخدامه مرة واحدة متضمناً عدة حقول وأيضاً متضمناً مجموعة آخرى لحقول آخرى ، هناك أكثر من طريقة تستطيع تنسيق النموذج كما يحلو لك وبدون إستخدام الأوسمة fieldset ، legend ، label .. هذا إذا أردت عمل شيء بسيط وسريع ولكن فضلنا إستخدام كتابة النماذج بطريقتها الأساسية كما بيّنت في الدروس الماضية حول النماذج ، نسقها مثل ما تريد سأوضح فقط بعض الطرق المستخدمة إضافةً لنمطين قمت بتصميمهم كمثال.
مرت قرابة ثلاث سنوات على حجب موقع Flickr وموقع DeviantArt الشهير الذي يحتوي على معارض لتصاميم وصور ورسومات رائعة وإحترافية ينضم لقائمة المواقع المحجوبة ، لا أدري ما السبب هذا الحجب ولكن بكل تأكيد لا يختلف عن سبب حجب الموقع الأول! (أقصد Flick) ، مهما كانت الأسباب فشركة الإتصالات أدرى بمصلحة مستخدميها! لا أدري أرى أي إستغلال سلبي لموقع DeviantArt لمفارنةً لموقع Flickr الذي يستغله “البعض” أحياناً لإظهار صور شخصية هدفها المعاكسات وشيء من هذا القبيل للأسف! ولكن هذا ليس عذراً لحجب الموقع وليست طريقة لحل هذه المشكلة عموماً.
أتمنى أن يتم رفع الحجب عن مثل هذه المواقع ولا أدرى فيها شيئاً يدعوا لحجبها لأن هذه الطريقة ليست حلاً للمشكلة وإذا كان هناك من يسيء إستخدام خدمة من الخدمات لماذا يتم حجبها على الكل ومن ضمنهم أشخاص يستفيدون من هذه خدمة بشكل إيجابي ، إكتشفت أن هناك أحد المواقع إسلامية أخرى محجوبة أيضاً!
ملاحظة: تم إلغاء الحجب عن الموقع ، عاد الموقع كما كان.
مجموعة روابط مفضلة لآخر يوم من هذه السنة:
سأتوقف عن الكتابة مدة بسيطة إن شاء الله بسبب فترة الإمتحانات ثم سأعود للتدوين ، هذه بعض الروابط التي يجمعتها لهذا اليوم:
ذكرنا في الجزء الأول من حديثنا حول النماذج في XHTML طريقة كتابة النماذج ومحتوياتها وركزنا على حقول من الوسم input مع بعض خصائصها المهمة ، سنفصل أكثر في الحقول وأنواعها وإنشاء المساحات النصية ، وعمل قائمة الإختيارات مع بعض الملاحظات التي سنذكرها في نهاية الموضوع.
.. إقرأ بقية الموضوع »
مجموعة لبعض الروابط المتنوعة والمفضلة التي جمعتها لهذا اليوم:
موضوعنا اليوم يتحدث عن النماذج(Forms) في XHTML ، النماذج لها إستخدامات كثيرة في الصفحات مثل نموذج مراسلة ، نموذج تسجيل أو تسجيل دخول ، .. إلخ .. سنتحدث عن كيفية كتابتها في XHTML وخاصة الأوسمة المتعلقة بها التي تستطيع عمل عناصر عن طريقها.
عند عمل نموذج في XHTML يكون ذلك في البداية عن طريق الوسم form والذي سيحتوي على بقية محتويات النموذج هناك طرق أسهل لعمل النماذج ولكن سنخصص هذا الموضوع بالتفصيل قليلاً سنشرح الخصائص المتعلقة بكل وسم نريده وأشكال لنماذج وكيفية عملها بإستخدام CSS ( سيأتي لاحقاً). .. إقرأ بقية الموضوع »
أهنيء جميع القراء هذه المدونة والمدونين وسائر المسلمين بعيد الأضحى المبارك أعاده الله علينا وعليكم باليمن والبركات وتقبل الله منا ومنكم صالح الأعمال.
إبحث في التدوينات: