cssbit 2.0

1. مدونة eric mayer
2. شكل جديد ومميزات لحسابك في flickr
3. خلاصات اشهر مواقع التطوير والتصميم
4. electricpulp شركة صغيرة من 11 فرد تعمل في التصميم والتطوير
5. thuiven شركة (اسرائيلية) مكونة من شخصين، أعجبني تصميم المدونة وأفكار الشابين
6. Seven  Reasons Why You Don’t Need SEO

لاحظت مؤخرا إضافة بعض التحسينات على بريد Gmail، مثل الإطار الملون

input:focus { border:2px solid #73A6FF }

ومنذ قليل وجدت ايقونة جديدة صفراء انضمت للمحرر  WYSIWYG ..

سيظل بريد Gmail البريد المفضل بخصائصه المذهلة، التي تزدهر يوما بعد آخر ..

1. scriptandstyle مدونة تنشر روابط حول التطوير .. الخ
2. أدوات باستعمال مكتبة MOOtools
3. مدونة Eric Wendelin حول css, javascript واشياء اخرى
   
4. أدوات لمطور الويب
5. List of CSS frameworks
6. ajaxcss عبارة عن دليل لدروس وأخبار css, ajax ..
   
7. كل ما تود معرفته عن sIFR
8. psdtolife خدمة جديدة قريبا
9. justtweetit للبحث عن مشتركين لهم نفس اهتماماتك
10. المنتديات العربية
    
11. تصاميم ووردبريس معربة
12. 404arabs رؤية عربية لأخطاء 404
13. Bulletproof Web Design كتاب مميز ينصح به
14. لماذا لا تضيفني في منزل والدتك ؟
15. Six Things To Like About Dreamweaver CS4

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

1. تطوير: مقالات وأخبار متنوعة عن التطوير، tips وأفكار عن css، صور من flickr .. الخ
2. دروس: دروس css xhtml (بالنسبة ل php لا فائدة من كتابة دروس لا تسمن ولا تغني من جوع، فهناك مقالات وكتب متخصصة، وأؤمن أن تعلم لغة برمجة لا يتأتى بالدروس، ونصيحتي هي: كتاب محترم + manual php + مدونة أجنبية متخصصة فقط في PHP +  الممارسة والتطبيق كل يوم .. )
3. روابط: روابط متنوعة، لكن معظمها متعلق بالتطوير، أتعرف عليها وأحتفظ بها لمشاركتها مع الزوار

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

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

ارى بعض المدونات العربية مليئة بالتصانيف والاقسام و tags واشياء أخرى، وكما اراها حرية شخصية ورغبة صاحب المدونة، فنفس الأمر بالنسبة لي

حان الوقت لأفكر في أفكار وأشياء جديدة ومفيدة، للحديث عنها في هذه المدونة

هذا درس بسيط وسريع لاستخدام position ب css
لدينا، صندوق عرضه وارتفاعه 400px يحتوي على صندوقين بعرض وارتفاع 150px:

كود XHTML:

<div id='box'>
  <div id='box-1'></div>
  <div id='box-2'></div>
</div>

صندوق عرضه وارتقاعه 400px مع border للصندوق لتحديده

كود CSS:

#box {width: 400px; height: 400px; border: 2px solid #eee}

باستعمال الخاصية position: absolute وإعطاء قيم ل top و left سأضيف ما يلي

#box-1 {
  position: absolute; 
  top: 40px; left: 80px; 
  background: #669933; 
  width: 150px; height: 150px
}

الصندوق الأول ذو اللون الأخضر يقع على ارتفاع 40px من (الصندوق الأم أم من أعلى الصفحة ؟ )، وعلى مسافة تبعد ب 80px من اليسار
اما الصندوق الثاني (يمكن ان يكون صورة أو نص أو …):

#box-2 {
  position: absolute; 
  top: 100px; left: 150px; 
  background: #AE8AB7; 
  width: 150px; height: 150px
}

مثال هنا:

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

#box {margin: 0 auto}

الان سيتغير مكان الصندوق الرئيسي ليظهر في وسط الصفحة، لكن لن ينتقل الصندوق الاول والثاني معه وسيظلان في يسار الصفحة

Demo 1

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

#box {position: relative}

Demo 2

خلاصة الدرس:
كيفية استعمال absolute وفائدة relative

1. twitbin إضافة جميلة ل firefox
2. كم تصرف أو تبذر ؟
3. وظائف في التطور والتصميم (freelance, full time .. )
4. مدونة حول productivity وأشياء أخرى
   
5. box lite خدمة سريعة لتحميل الملفات
6. Men with Pens مدونة متنوعة
7. apptism دليل لبرامج وتطبيقات iphone
8. CSS Mastery من أفضل الكتب حول CSS
9. بطاقة اشتر، الحل لمن لا يملك بطاقة فيزا
10. ضاع العمر بغلطة، من مقالات فهد الأحمدي

1. صور أسبوعية من جريدة telegraph
2. خدمة احصائيات بالوان وتنسيق جذاب
3. geekhero رسوم كرتونية بطابع تقني
4. mailchimp لتقديم خدمة النشرات البريدية
5. استفتاء من مدونة css tricks
6. هل تحتاج المواقع لأن تظهر بنفس الشكل على مختلف المتصفحات ؟
7. jQuery 1.2 Cheat Sheet
   
8. weblogtoolscollection أخبار واضافات … ل wordpress
9. mactropoli مدونة حول التطوير واخبار mac ..الخ
   

1. مدونة صاحب إطار scipt.aculo.us  الشهير وهو يعمل ايضا مع فريق ROR
2. ConstructrCMS مجلة مفتوحة المصدر بمميزات جميلة
   
3. Beau Anthony Frusetta مدونة جميلة حول التطوير والبرمجة
4. مجموعة كبيرة من التصاميم حول User Interface
   
5. فيديو طريف من vimeo
6. moo موقع جميل يقدم خدمات تصميم المطبوعات وما شابه
7. stoodeo يقدم خدمات تطوير وتصميم
8. صور طريفة في فلكر

حسب دراسة مطولة (5 صفحات) أعدتها مجلة Programmez المتخصصة، إليكم هذه الاحصائيات:

“اللغات” العشر الأكثر استعمالا:

1. html
2. xml
3. php
4. java
5. c++
6. ajax
7. c#
8. vb
9. vb.net
10. asp.net

والقائمة طويلة ..  حيث في المرتبة 18 و 19 كل من Cobol و Fortran مما يعني ان بعض اللغات ان صح التعبير لم تنقرض بعد

الفائز سنة 2008 حسب المعايير التالية:

1. البساطة:

1. php
2. html
3. WinDev
4. VB
5. Vb.net
6. Python
7. Ruby
8. … الخ
9. وفي المرتبة الاخيرة لغة C++

2. السهولة:

1. VB
2. WinDev
3. PHP
4. HTML
5. VB.net
6. Python
7. C#
8. Ruby
9. .. كذلك المرتبة الاخيرة ل C++

3. الانتاجية:

1. WinDev
2. C#
3. Ruby
4. ASP.net
5. VB.net
6. Python
7. JAVA
8. … وفي المرتبة الاخيرة Fortran

4. اللغات التي حصلت على اكبر دعم أومجمتع داعم لها:

1. PHP
2. JAVA
3. C++
4. HTML
5. FLASH
6. ASP.NET
7. PERL
8. .. وفي المرتبة الاخيرة DELPHI

هناك احصائيات ومعايير أخرى ..

احصائية عن منصات العمل:

1. (.NET) في المرتبة الأولى
2. Eclipse
3. JAVA EE
4. JAVA SE
5. LAMP
6. Ruby on Rails
7. Zope

انظمة التشغيل:

1. Windows
2. Linux
3. MacOS X
4. Solaris
5. BSD
6. AIX

هناك احصائيات ومعايير أخرى متشعبة مثل عدد المحترفين والمبتدئين في كل لغة ..

blueprint عبارة عن منصة Framework ل css، سهلة الاستعمال بالنسبة لمن يستعمل css بشكل محدود ويكرر اوامر متشابهة دائما

إطار العمل يحتوي على ملفات كثير (print, ie ..) سأضع مثالا صغيرا لكيفية استعمال هذا الإطار .. بعد تحميل الملفات من الموقع الرسمي، سيتجد بعض المجلدات، ابحث عن الملف screen.css الموجود داخل المجلد blueprint

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

<link rel='stylesheet' href='screen.css' type='text/css' />

بقي عليك ان تتعرف على محتويات الملف والكلاسات الموجودة فيه ..

مثال على استعمال رسائل error و success ..الخ

<div class='error'>
  This is a div with the class (.error)
</div>

<div class='success'>
  This is a div with the class (.success)
</div>

ولتحديد عرض الرسائل اختار القياس الذي أريد:

<div class='span-10'>
   ...
</div>

حيث span-10 تعادل 390 بيكسل، كذلك يمكنني اختيار الخط والمكان الذي اريد اظهار الرسائل فيه، فكل شيء منفصل ويكفي اضافة class تناسبك

مثال حي