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

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

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

مرت قرابة ثلاث سنوات على حجب موقع Flickr وموقع DeviantArt الشهير الذي يحتوي على معارض لتصاميم وصور ورسومات رائعة وإحترافية ينضم لقائمة المواقع المحجوبة ، لا أدري ما السبب هذا الحجب ولكن بكل تأكيد لا يختلف عن سبب حجب الموقع الأول! (أقصد Flick) ، مهما كانت الأسباب فشركة الإتصالات أدرى بمصلحة مستخدميها! لا أدري أرى أي إستغلال سلبي لموقع DeviantArt لمفارنةً لموقع Flickr الذي يستغله “البعض” أحياناً لإظهار صور شخصية هدفها المعاكسات وشيء من هذا القبيل للأسف! ولكن هذا ليس عذراً لحجب الموقع وليست طريقة لحل هذه المشكلة عموماً.

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

ملاحظة: تم إلغاء الحجب عن الموقع ، عاد الموقع كما كان.

• صحفي بريطاني: إن لم أغضب لأجل غزة فمتى أغضب؟!
• موقع غيوم
• CssGuy
• 10 نصائح في قابلية الإستخدام لمصممي المواقع
• AETUTS ، موقع رائع خاص بدروس Adobe After Effects
• Structured process you must know to develop a web application
• Free online services to bring more value to your blog
• 60Most Wanted Photoshop Tutorials, Brushes, .PSDs and Resources

مجموعة روابط مفضلة لآخر يوم من هذه السنة:

• البذخ التقني .. من عالم التقنية.
• 25 مقالة تصميم رائعة لـ 2008.
• أفضل روابط التصميم لشهر ديسمبر.
• مجموعة لأفضل روابط مدونة Just Creative Design لعام 2008.
• Webdesigner Depot ، يضم مصادر عديدة من دروس وملفات وغيرها متعلقة بالتصميم.
• موقع لمصمم جرافك يحتوي على معرض رائع لأعماله.
• Photoshop Tutorial: Designing a Creative Blog Footer
• Battle of the Best Beta Releases of 2008

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

• سولاف ، موقع جديد مختص بعالم التصميم.
• المنطق البرمجي – طريقك لاحتراف البرمجة.
• 25 درس فوتوشوب لمصممي مواقع الويب.
• مصادر ومقالات حول فن الجرافيتي Graffiti.
• الخطوط والويب ، Fonts and the Web.
• iDoTutorials ، مدونة تحتوي على دروس رائعة حول التصميم.
• How to get clients to say yes to your designs.
• 2008Most Popular Design posts, Tutorials and Resources.
• مجموعة كاريكاتيرات منتخبة من مختلف دول العالم حول حادثة حذاء منتظر الزيدي.

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

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

مجموعة لبعض الروابط المتنوعة والمفضلة التي جمعتها لهذا اليوم:

• كتاب سنوات التدوين – 2004
• أفكار ونصائح لأصحاب الكتب الإلكترونية.
• لماذا تبني أمريكا “شبكات مسلمة معتدلة” علمانية؟ من إسلام أونلاين.
• أفضل تصاميم CSS لعام 2008
• 10 حيل وهاكات مفيدة للوردبريس.
• مصادر عديدة حول الإبداع والإلهام وما يدور حولها.
• +40 درس للعمل مع لوحات Wacom ، مفيدة للمصممين ولمن يريدون الكتابة بواسطة القلم الضوئي لغرض الرسم أو التخطيط أو أي شيء آخر.
• أفضل الدروس لشهر نوفمبر من مدونة NETTUTS.
• 10 تقنيات لتحسين تصاميم واجهة الإستخدام.
• How to: Make a Hand-Drawn Font ، درس مفيد أيضاً للمصممين ولمن يريد عمل خطوط حرة لإستخدامها في التصاميم والأغراض المختلفة.
• Typographic Madness: 30 Brilliant Piece of Work
• Mastering Your WordPress 2.7 Theme & Admin Area: Tips and Tricks.
• Most Popular Free Windows Downloads of 2008.
• 10Steps to Learn a New Coding Language Fast
• The Ultimate Web Developer’s Christmas Wish List.

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

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

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

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

بعض الروابط التي جمعتها في المفضلة لهذا اليوم:

• الذين لم ييأسوا.
• 24ways يعود مرة أخرى لكتابة مقالاته الخاصة في شهر ديسمبر.
• أفضل 33 مصادر دروس فوتوشوب.
• أنماط الخلفية الهندسية.
• 5 طرق للحصول على إختبار قابلية الإستخدام.
• دليل لمعارض مواقع CSS.
• 19 درس فوتوشوب لتصميم بطاقة أعمال.
• The Ultimate List of The Best Logo Design Resources
• 50 Beautiful And Creative Portfolio Designs
• Don’t Follow Trends: Set Them!
• Useful guidelines to improve CSS coding and maintainability
• 36Cool Custom Error 404 Pages
• Avatars in Blog Comment Design
• 20Great PHP frameworks for developers
• 30+Eye-Opening Web Development Screencasts

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

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

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

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

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

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

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

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

هذه مجرد تدوينة شخصية سريعة سأعرض من خلالها الأدوات التي أستخدمها بشكل عام أثناء عملي في الجهاز وتصفحي على الشبكة (لمن يهتم بهذه الأمور):

• متصفح الويب المفضل: فايرفوكس
• لغات وتقنيات أستخدمها أو أتقنها: XHTML , CSS , PHP , MySQL , Javascript , Ajax
• نظام تشغيل: Windows XP SP2
• برامج تصميم: Adobe Studio ( Photoshop , Illustrator , Bridge , ..)
• محرر المفضل: NotePad , phpDesigner 2008 ، Dreamweaver 8
• خادم شخصي لأعمال تطوير المواقع: XAMPP 1.6
• رفع الملفات إلى الموقع: إضافة FireFTP في الفايرفوكس.
• أفضل مدونات تقنية أتابعها: Smashing Magazine – Web Designer Wall - Just Creative Design
• متصفح خلاصات: Google Reader
• مشاركة الملفات: uTorrent ، و isohunt.com لتحميل الملفات.
• تصفح المواد الصوتية أو المرئية:VCL media player

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

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

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