cssbit 2.0

http://cssbit.blogspot.com

يمكن متابعة جديد مدونتي الشخصية عبر google reader او عبر خدمة rss مختلفة

صورة مكتب مطور الويب الإيطالي الشهير Antonio Lupetti
كما كتب في مدونته، فهو يستعمل laptop من apple، غرفة أنيقة من ناحية الألوان والديكور، لكن أحس أنها مليئة بالأغراض، أقترح على antonio أن يتخلص من أشياء كثيرة

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

الصورة الأصلية
وجوه مبرمجين:

باقي الوجوه هنا، ملامح المبرمجين تبدو مختلفة عن بقية الناس ؟؟

صور شخصية:

بعض من الصور التي التقطتها في البحر

• خلفيات، إيقونات، برامج وألعاب ل iphone
• موقع مختص في تصاميم ل Wordpress وتعديل البرنامج ليصبح CMS
• لحفظ نسخة من أرقام الهاتف، والتعرف على أصدقاء جدد .. خدمات كثيرة يوفرها هذا الموقع لمستعملي الهواتف النقالة
• glopublish معرض جديد من معارض css، وكذلك هذا الموقع
  
• أفضل مكان  لاقتناء كتب PHP (من شركة Zend)
• cssmix معرض آخر من معارض css
• hdrcreme موقع لعرض صور HDR، قد تظهر مواقع عديدة على غرار css gallery
• Sunny Animation إيقونات صغيرة، جميلة الشكل ب 10 دولار

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

1
2
3
4
5
6
7
8

<table>
 <tr>
  <td>cssbit@gmail.com</td>
  <td><img src="pencil.gif" alt="" /></td> 
  <td><img src="trash.gif" alt="" /></td> 
  <td><img src="search.gif" alt="" /></td> 
 </tr>
</table>

صورة:

البيانات التي ستظهرها في الجدول، يمكن ان تكون عناوين المقالات، او أسماء الصور او أي شيء آخر .. حيث سنضع النتائج في حلقة تكرار:

< ?php while($row = mysql_fetch_object($result)) { ?>

1
2
3
4
5
6

 <tr>
 <td>cssbit@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

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

< ?php $user = array('sql','cssbit','php','xhtml','ruby') ?>
< ?php for($i=0;$i&lt;5;$i++) { ?>

1
2
3
4
5
6

 <tr>
 <td>< ?=$user[$i]?>@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

الهدف هو ان أجعل PHP يقوم بتكرار البيانات لي، بدل ان اكررها بنفسي باستعمال XHTML ..

كود css:

#main table {
 border: 1px solid #BED8E9;
 width: 100%;
 font-size: .9em;
 margin: 10px 0 0;
}
#main table {
 background: #fff;
 font: .78em "Lucida Sans Unicode";
}
#main table tr td {
 padding: .2em;
 color: #333;
 text-align: center;
}

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

أضفت تاثير بسيط (يعمل مع FF و IE 7 .. لن يظهر مع IE6) بحيث تظهر خلفية بلون ازرق فاتح عند المرور على البيانات بزر الفأرة cursor ..

#main table tr:hover {
 background: #E4EFF6;
 color: #000;
}

البيانات التي في الجدول ستظهر في الوسط، كان الهدف هو اظهار الايقونات في الوسط ..

#main table tr td {
 text-align: center;
}

لذلك أفضت class جديد تابع ل email ..

 <td class="left">$user@gmail.com</td>

كود css:

#main table tr td.left {
 text-align: left;
}

بعد إضافة نصوص وصور و Fix للمتصفحين IE 6 و IE7 احصل على هذا الجدول ..

بعض الصور لن تظهر بشكل شفاف على IE6 لأنها بامتداد PNG

• demo
• تحميل الملفات

يجب حفظ الصفحة بامتداد PHP لكي يعمل التكرار .. او تكرار البيانات ب xhtml وحفظها بامتداد html

حقوق الدرس محفوظة ل cssbit

عند برمجة تطبيق معين ستحتاج الى تقسيم النتائج لاظهار 10 او 15 نتيجة فقط في الصفحة الواحدة، يمكنك باستعمال css ان تضيف لمسات فنية جميلة على الارقام، بدل اظهارها بشكل جاف: 1 2 3 4 .. الخ

سنستعمل ul و li لاظهار قائمة أفقية تحتوي على الأرقام ..

<!-- #start pagination -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<!-- /end -->

هكذا ببساطة شديدة ..
كود css

#main ul {
   border: 0px solid #ddd;
   list-style: none;
   padding: .5em;
}
 
#main ul li {
   display: inline;
   padding: 0em
}

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

<ul>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">..</a></li>
</ul>

كود css

#main ul li a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #eee;
  color:#333
}
 
#main ul li a:hover {
  border: 1px solid #4DADDA;
  padding: .1em .4em;
  text-decoration: none;
  background: #C0E2F2;
  color:#217398
}
 
#main ul li.active a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #fff;
  color:#000;
  cursor: default; /* active page */
}

يمكن تغيير الالوان والحجم وشكل الخطوط بسهولة ..
مع إضافة بعض النصوص والصور ..

• الشكل النهائي
• تحميل الملف

@ حقوق الدرس محفوظة ل : cssbit

لسوف أعود يا أمي
أقبّل رأسك الزاكي
أبتّك كل أشواقي
وأرشف عطر يمناك
أمرغ في ثرى قدميك
خدي حين ألقاك
أروي الترب من دمعي
سرورا في محياك

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

ببرك يا منى عمري
إله الكون أوصاني
رضاؤك سر توفيقي
وحبك ومض إيماني
وصدق دعائك انفرجت
به كربي وأحزاني
ودادك لا يشاطرني
به أحد من البشر
فأنت النبض في قلبي
وأنت النور في بصري
وأنت اللحن في شفتي
بوجهك ينجلي كدري
إليك أعود يا أمي
غدا أرتاح من سفري
ويبدأ عهدي الثاني
ويزهو الغصن بالزهر

لسوف أعود يا أمي
أقبّل رأسك الزاكي
أبتّك كل أشواقي
وأرشف عطر يمناك
أمرغ في ثرى قدميك
خدي حين ألقاك
أروي الترب من دمعي
سرورا في محياك

إذا كانت A هي النجاح في الحياة، ف A تساوي x زائد y زائد z، العمل هو x و y هي اللعب و z هي إبقاء فمك مغلقاً
ألبرت آينشتاين

لقد كافحت وعملت كل ما توصلت إليه هو الارتقاء من الحضيض إلى الفقر المذقع
غروشو ماركس

سبيلك الى النجاح: هو أن تعمل بجد كاف
سبيلك إلى الفشل: هو أن تعمل بجد أكثر من المطلوب
مالكوم فوربز

أفضل ما يمكن أن تفعله غالباً، هو ألا تفعل شيئا، وأفضل ما يمكن أن تقوله غالباً، هو ألا تقول شيئا
ويل دورنت

معظم الدروب المرصوفة جيدا لا تفضي إلى أي مكان
رجل حيكم غير معررف

لقد قدر لي طيلة حياتي أن يعترف العاملون معي بأنني مجتهدة في عملي، وهذه الصفة بقدر ما تجلعني أشعر بالامتياز أخلاقيا، تشعرني بعدم الرضا فنيا
مارغريت أولفين

إن أفضل حكمة تأتي مع النجاح هي المعرفة بأن هذا النجاح ليس شيئا ينبغي أن نتوق إليه
ليف ألمن

جعل النجاح رجالا كثيرين أشخاصا فاشلين في حياتهم الخاصة
سندي آدامز

النجاح عن بعض الناس هو أن يصبحوا مشهورين، أما عند البعض الآخر فهو أن يعيشوا بسلام بعيدا عن الاضواء
آشلي بريلينت

كان رجلا عصاميا وهو لا يدين لأحد بافتقاره إلى النجاح
جوزيف هيلر

النجاح أمر بسيط، قم بما هو صواب، بالطريقة الصائبة والوقت المناسب
أرنولد غلاسو

أنا لا أعمل، ولا يهمني أن ينتقدني الكل، لن أعمل، ولكني أحيا، لعل مستوى حياتي سيء، ولكني لست مضطرا إلى أن أعمل وأكون على حالي هذه أيضا
لويس بونويل

الحياة بدون عمل يشغلك ويستهويك هي جحيم
ألبرت هابارد

هل تشعر بالممل من العمل في غرفة مغلقة ؟

الصورة من فلكر:

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

برنامج غير مجاني لكن يتيح لك التجربة لفترة شهرين .. يمكن تحميله من هذا الرابط، وقراءة المزيد عن البرنامج من هنا

البرنامج يقوم باخذ نسخ احتياطية عن مل كل ما تكتبه، ويتم الاحتفاظ بهذه النسخ في مجلد يتم انشاؤه تلقائيا في my documents .. مع كل تعديل او حذف او ما شابه يجب الضغط على CTRL + S لحفظ ما تقوم به، وسيتح ذلك باختفاء الرمز * الذي يظهر في اعلى شاشة البرنامج .. والا ستضيع البيانات الجديدة التي تم ادخالها بمجرد اغلاق البرنامج ..

البرنامج خفيف وظريف، وسهل الاستعمال، به مميزات وامكانيات تكتشفها مع مرور الوقت، كما يمكن استعماله مؤقتا الى حين نقل البيانات لخدمة ويب مثل tadalists، فاحيانا لا يكون لديك مشكلة في الاتصال بالانترنت وتحتاج لتدوين بعض الامور ..

الوصول الى البرنامج سريع، اذن يوفر خاصية Try مثل Snagit وبعض البرامج ..

صور من البرنامج:

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

باقي الاسعار

يعلم الله اسعار الاعلانات في القناة اذا كانت هذه هي الاسعار في الموقع .. علما أنها للشهر الواحد