أرشيف شهر أكتوبر 2008
ابتسامات Gmail
23 أكتوبر 2008لاحظت مؤخرا إضافة بعض التحسينات على بريد Gmail، مثل الإطار الملون
input:focus { border:2px solid #73A6FF }
ومنذ قليل وجدت ايقونة جديدة صفراء انضمت للمحرر WYSIWYG ..
![]()
سيظل بريد Gmail البريد المفضل بخصائصه المذهلة، التي تزدهر يوما بعد آخر ..
روابط (40)
20 أكتوبر 2008- scriptandstyle مدونة تنشر روابط حول التطوير .. الخ
- أدوات باستعمال مكتبة MOOtools
- مدونة Eric Wendelin حول css, javascript واشياء اخرى
- أدوات لمطور الويب
- List of CSS frameworks
- ajaxcss عبارة عن دليل لدروس وأخبار css, ajax ..
- كل ما تود معرفته عن sIFR
- psdtolife خدمة جديدة قريبا
- justtweetit للبحث عن مشتركين لهم نفس اهتماماتك
- المنتديات العربية
- تصاميم ووردبريس معربة
- 404arabs رؤية عربية لأخطاء 404
- Bulletproof Web Design كتاب مميز ينصح به
- لماذا لا تضيفني في منزل والدتك ؟
- Six Things To Like About Dreamweaver CS4
هذه المدونة
19 أكتوبر 2008أعتقد أن وجود 4 تصنيفات في هذه المدونة شيء كثير ومربك
لذلك اقترحت على نفسي أن أدمج قسم (متنوع) مع قسم (تطوير)، وإليكم تصوري لكل تصنيف على حدة:
- تطوير: مقالات وأخبار متنوعة عن التطوير، tips وأفكار عن css، صور من flickr .. الخ
- دروس: دروس css xhtml (بالنسبة ل php لا فائدة من كتابة دروس لا تسمن ولا تغني من جوع، فهناك مقالات وكتب متخصصة، وأؤمن أن تعلم لغة برمجة لا يتأتى بالدروس، ونصيحتي هي: كتاب محترم + manual php + مدونة أجنبية متخصصة فقط في PHP + الممارسة والتطبيق كل يوم .. )
- روابط: روابط متنوعة، لكن معظمها متعلق بالتطوير، أتعرف عليها وأحتفظ بها لمشاركتها مع الزوار
قبل ان أدمج قسم (متنوع) مع (تطوير) سأخفي مواضيع كثيرة عن الظهور، أصبحت أراها غير مفيدة ولن تضيف شيئا للزائر، أو تحتوي معلومات لم تعد صحيحة، أو أخبارا قديمة ..
أرغب أن تحتوي مدونتي على أشياء مفيدة مثل (دروس) يمكن الرجوع إليها والاستفادة من بعض أفكارها، أما المواضيع الشخصية أو الأخبار التي تستهلك في حينها، فتلك لا أهمية لها، الأمر شبيه بالرجوع لمجلات أو جرائد قديمة لمعاودة الاطلاع عليها
ارى بعض المدونات العربية مليئة بالتصانيف والاقسام و tags واشياء أخرى، وكما اراها حرية شخصية ورغبة صاحب المدونة، فنفس الأمر بالنسبة لي
حان الوقت لأفكر في أفكار وأشياء جديدة ومفيدة، للحديث عنها في هذه المدونة
position في css
15 أكتوبر 2008هذا درس بسيط وسريع لاستخدام 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}
الان سيتغير مكان الصندوق الرئيسي ليظهر في وسط الصفحة، لكن لن ينتقل الصندوق الاول والثاني معه وسيظلان في يسار الصفحة
ولاحل هذه المشكلة وأجعل الصندوقين مرتبطين بالصندوق الأم الذي يحتويهما سأضيف خاصية relative كالتالي:
#box {position: relative}
خلاصة الدرس:
كيفية استعمال absolute وفائدة relative
روابط (39)
14 أكتوبر 2008- twitbin إضافة جميلة ل firefox
- كم تصرف أو تبذر ؟
- وظائف في التطور والتصميم (freelance, full time .. )
- مدونة حول productivity وأشياء أخرى
- box lite خدمة سريعة لتحميل الملفات
- Men with Pens مدونة متنوعة
- apptism دليل لبرامج وتطبيقات iphone
- CSS Mastery من أفضل الكتب حول CSS
- بطاقة اشتر، الحل لمن لا يملك بطاقة فيزا
- ضاع العمر بغلطة، من مقالات فهد الأحمدي
روابط (38)
13 أكتوبر 2008- صور أسبوعية من جريدة telegraph
- خدمة احصائيات بالوان وتنسيق جذاب
- geekhero رسوم كرتونية بطابع تقني
- mailchimp لتقديم خدمة النشرات البريدية
- استفتاء من مدونة css tricks
- هل تحتاج المواقع لأن تظهر بنفس الشكل على مختلف المتصفحات ؟
- jQuery 1.2 Cheat Sheet
- weblogtoolscollection أخبار واضافات … ل wordpress
- mactropoli مدونة حول التطوير واخبار mac ..الخ
روابط (37)
13 أكتوبر 2008- مدونة صاحب إطار scipt.aculo.us الشهير وهو يعمل ايضا مع فريق ROR
- ConstructrCMS مجلة مفتوحة المصدر بمميزات جميلة
- Beau Anthony Frusetta مدونة جميلة حول التطوير والبرمجة
- مجموعة كبيرة من التصاميم حول User Interface
- فيديو طريف من vimeo
- moo موقع جميل يقدم خدمات تصميم المطبوعات وما شابه
- stoodeo يقدم خدمات تطوير وتصميم
- صور طريفة في فلكر
احصائيات برمجية
13 أكتوبر 2008حسب دراسة مطولة (5 صفحات) أعدتها مجلة Programmez المتخصصة، إليكم هذه الاحصائيات:
“اللغات” العشر الأكثر استعمالا:
- html
- xml
- php
- java
- c++
- ajax
- c#
- vb
- vb.net
- asp.net
والقائمة طويلة .. حيث في المرتبة 18 و 19 كل من Cobol و Fortran مما يعني ان بعض اللغات ان صح التعبير لم تنقرض بعد
الفائز سنة 2008 حسب المعايير التالية:
1. البساطة:
- php
- html
- WinDev
- VB
- Vb.net
- Python
- Ruby
- … الخ
- وفي المرتبة الاخيرة لغة C++
2. السهولة:
- VB
- WinDev
- PHP
- HTML
- VB.net
- Python
- C#
- Ruby
- .. كذلك المرتبة الاخيرة ل C++
3. الانتاجية:
- WinDev
- C#
- Ruby
- ASP.net
- VB.net
- Python
- JAVA
- … وفي المرتبة الاخيرة Fortran
4. اللغات التي حصلت على اكبر دعم أومجمتع داعم لها:
- PHP
- JAVA
- C++
- HTML
- FLASH
- ASP.NET
- PERL
- .. وفي المرتبة الاخيرة DELPHI
هناك احصائيات ومعايير أخرى ..
احصائية عن منصات العمل:
- (.NET) في المرتبة الأولى
- Eclipse
- JAVA EE
- JAVA SE
- LAMP
- Ruby on Rails
- Zope
انظمة التشغيل:
- Windows
- Linux
- MacOS X
- Solaris
- BSD
- AIX
هناك احصائيات ومعايير أخرى متشعبة مثل عدد المحترفين والمبتدئين في كل لغة ..
استعمال blueprint
13 أكتوبر 2008blueprint عبارة عن منصة 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 تناسبك