cssbit 2.0

صفحات 404 الخاصة بموقع apple:

تحتوي الصفحة بالإضافة الى العبارة أسفله على معظم روابط الموقع ..
Hmm, the page you’re looking for can’t be found

صفحة microsoft
شبيهة بصفحة apple من ناحية توفير الرابط لكنها بشعة ..

صفحة feedmyapp

صفحة wordpress

صفحة جوجل

• How To Disable Extension Install Delay in Firefox
• Attach and Send Any File Type with GMail Like EXE, ZIP
• How to run Firefox 2 and Firefox 3 on the same PC - The Better Way
• موقع للنسخ القديمة من البرامج: nero, flashget ..
  
• lifehack.org تصميم جديد لهذه المدونة المتميزة
• pimpmysafari.com إضافات للمتصفح safari
• All 120 Crayon Names, Color Codes and Fun Facts
• Better ways to writing JavaScript

يمكن استعمال الوسمين <ul> و <li> في أمور كثيرة، من بينها القوائم أو menu .. سواء كانت القائمة عمودية او أفقية، هذا الدرس يشرح طريقة تصميم menu باستعمال css وxhtml

كود xhtml يعرض 4 روابط ..

<ul>
	<li><a href="./">home</a></li>
	<li><a href="/about">about</a></li>
	<li><a href="/service">service</a></li>
	<li><a href="/contact">contact</a></li>
</ul>

القائمة ستظهر بهذا الشكل:

لأننا لم نحدد اي خصائص ب css وبالتالي فهو الشكل الطبيعي او ما يسمى ب Default

مثال حي من هنا

لنبدأ بكتابة بعض الأكواد ب css .. ساضيف إطار أو border لهذه القائمة وبعض المميزات الاخرى كالتالي:

ul { 	
  margin: .88em;padding: .7em;
  border: 1px solid #ddd;
  list-style: none;
  width: 150px;
}

أضفت بعض خصائص مثل وأخفيت bullet التي تظهر في الوسم <li> ..
أصبح شكل menu كالتالي:

مثال حي من هنا

الان سأضيف بعض الخصائص وبعض الألوان ..

li a { 	
 display: block;
 margin: 05px 0;
 padding: .2em;
}	
 
li a:link, li a:visited {
 color:#0268ab;
 text-decoration: none;
 background:  #f5f5f5;
}
 
li a:hover{
 color:#333;
 text-decoration: none;
 background: #fffae5;
}

لكي تفهم فائدة الأمر

li a { 
 display: block;
}

احذف السطر: display: block وانظر كيف ستظره القائمة، ستكون شبيهة بهذه الصورة:

قائمتي أصبحت كالتالي:

تجربة المثال من هنا

يمكن إجراء أي تعديلات او تغييرات نريدها .. فاستعمال css مثل الرسم في الفوتوشوب فانت تكتب ما تتخيله وما ترغب فيه:

أضفت border في جهة اليمين بحجم 4 بيكسل كالتالي:

li a:link, li a:visited {
 border-right: 4px solid #6E6E6E;	
}
 
li a:hover{
 border-right: 4px solid #038CE7;
}

تجربة المثال من هنا

ملاحظة: يمكننا اختزال بعض الأسطر في كود css بحيث نجمع الخصائص المتشابهة:

li a:visited, li a:link, li a:hover {
 text-decoration:none;
}

هذا الدرس منجز على Firefox والصفحات متوافقة مع اختبارات w3c ولكي تظهر لك نفس النتائج على IE6 يجب ان نضيف بعض Fix ..

• cssleak معرض css مميز، هدف هذه المعارض هو التعريف بالمواقع التي تستعمل css, xhtml وكما تلاحظون فانها تحتوي على أفكار جميلة وتستعمل ألوان رائعة .. يمكن تعلم الكثير من هذه المعارض وهي بالنسبة لي مصدر للعلم والتطوير
• webcreme معرض آخر يوفر خاصية البحث عن المواقع بالألوان ..
• forwebdesigners دليل متكامل لكل مطور ومصمم، استمتع بعشرات الروابط في كل المجالات .. موقع مميز ومتجدد
• portableapps دليل لجميع البرامج التي يمكنك تنصيبها والعمل بها من خلال flash memory .. خدمة مفيدة
• noupe مدونة عن css, xhtml, php, mysql, ajax .. تشبه smashing magazine
• photoshoplab مختبر الفوتوشوب، يهم المصممين بالدرجة الأولى ..
• go2web20 دليل لمواقع وخدمات web 2.0
• feedmyapp نفس فكرة الموقع السابق .. دليل متجدد لمواقع web 2.0 المفيدة
• lifespy مدونة شبيهة ب lifehacker
• tutorialblog مدونة عن التصميم والتطوير وأشياء أخرى .. مفيدة جدا إذا كنت مطور ويب أو تشتغل في هذا المجال
• onmydesk مدونة مهتمة بأماكن العمل .. صور المكاتب .. الخ، يتابعها 377 قارئ عبر google reader ..  هناك من يهتم بهذه الامور ولست المجنون الوحيد
• hackwordpress كل ما يتعلق ب wordpress من إضافات، أخبار، تقنيات .. الخ

مجموعة كبيرة من الإيقونات الجميلة والمجانية، بعدة صيغ: png, ico ..
هذه الايقونات تصلح ل web و application .. استعملها في مواقعك، في لوحات التحكم .. الخ

رابط التحميل 

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

ملاحظة: يمكن متابعة هذه المواقع عبر google reader ..

• zenhabits مدونة متميزة بالفعل، صاحبها مدون في العشرينيات أو الثلاتينيات .. ترك عمله وكذلك زوجته وتفرغ للتدوين .. يجني من المال من خلال مدونته .. وتعتبر من أفضل المدونات التي تتحدث عن التدبير، الإدارة، النجاح والتنظيم في العمل والحياة .. يتابعها أكثر من 24 ألف قارئ عبر google reader فقط ..
• lifehacker موسوعة متنوعة وغنية بالفائدة، صاحبة المدونة شابة تدعى Gina Trapani وهي مؤلفة الكتاب الرائع: Upgrade Your Life .. هذه المدونة لا غنى عنها ويجب ان تكون من ضمن روابطك المفضلة ..
• designfloat موقع حديث نسبيا، فكرته مثل Digg لكنه مختص في التطوير والتصميم والبرمجة .. أعضاء الموقع هم من يضيفون الروابط، أنصح بمتابعه بشدة .. ستجد الكثير من الروابط المفيدة حول الفوتوشوب، css، مكتبات ajax .. وأشياء كثيرة

مدونات أخرى:

• stylizedweb مدونة حول التطوير ب css, xhtml ..
• css-tricks تقنيات وtips عن css, xhtml وأشياء أخرى ..
• smashingmagazine مدونة غنية عن التعريف وهي المدونة رقم 1 التي أحرص على متابعتها ..
• vikiworks مدون من هونج كونج، مصمم واجهات وإيقونات .. مدونة متميزة وجميلة جدا
• woork مدون إيطالي مختص في css, xhtml, ajax .. دروس ومواضيع ممتازة ومهمة لمطور الويب .. اقرأ قصته حول الانتقال الى mac .. فيها الكثير من العبر
• dezinerfolio مدونة عن التصميم لاخوين من الهند .. تهتم المصممين بالدرجة الأولى

• موقع للكاريكاتر عن الرياضيات، اللغات .. وأشياء أخرى
• Ubuntu Cheat Sheet
• nettuts موقع جديد عن css, xhtml, ajax .. تابع لموقع psdtuts.com
• Blueprint منصة CSS مميزة وسهلة الاستعمال
• freshairapps دليل لتطبيقات adobe air
• To do list عبارة عن تطبيق adobe air
• Snippely تطبيق مميز لحفظ أكواد و snippet عن لغات البرمجة .. php, ruby ..

• Jquery Cheat Sheet (ملف PDF)
• dezinerfolio موقع مفيد لكل مصمم ومطور ويب
• noupe مدونة عن: css, xhtml, ajax, وكل ما يتعلق بالتطوير والبرمجة ..
• jQuery Tutorials for Designers دروس من مكتبة jQuery
• 3 مواقع لمصممة ومطورة ويب: webdesignerwall و Best Web Gallery و N.Design Studio مميزة جدا
• تعلم التصاميم واقتبس أفكارا من موقع templateMonster

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

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

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

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

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

موقع يبيع ملابس لعشاق css و xhtml

t-shirt من freelanceSwitch

ملابس صيفية وشتوية من جوجل