cssbit 2.0

• صنع خلفيات background للمواقع
• شركة ويب 2.0 تبرمج ب rubyonrails
• sixrevisions مواقع ومقالات حول التقنية والتطوير (css .. )
• magentocommerce سلة تسوق مشهورة ومفتوحة المصدر
• شاهد فيدو عن الشركة Magento ومكان العمل
• Simply Rails 2 كتاب جديد عن Ruby
• cssfreshblend معرض آخر ل css
• موقع ينشر صور طريفة
• freelancetipster موقع مفيد ل freelancer
• hellotxt موقع يتيح لك ارسال نصوص لبعض الخدمات مثل twitter, pownce ..
• 7 تطبيقات ويب مفيدة
• 99designs موقع لمصممي freelancer
• vnunet موقع حول أخبار التقنية، تقارير، برامج
• إيقونات رائعة ل iphone

درس بسيط، لتصميم footer أو ذيل الصفحة (ترجمة غير مستساغة) ب css و xhtml بشكل كامل ..

بعد فتح المحرر وكتابة بعض الاوامر: doctype, html, head .. (عادة يتم توليدها تلقائيا في بعض المحررات ويكفي ان تعدل عليها ليتناسب مع ما تريد)
بعد تقسيم الصفحة وتوزيع المحتويات (header, sidebar, content ..) نصل الى الجزء الاخير من الصفحة وهو Footer ..

ربما يظن بعض الناس (المطورين) ان هذا الجزء غير مهم او لا يحتاج لكثر من الاهتمام، وهذه ايضا وجهة نظر، لذا يكتفون بعبارة او بخلفية ملونة مع بعض الكلمات البسيطة

على افتراض انك اتممت تصميم باقي اجزاء الصفحة سنبدأ مباشرة في تصميم جزء footer كالتالي:

<!-- #start footer -->
<div id="footer">
</div>
<!-- #end footer -->

ساضيف فقرة تحتوي على عبارات بالاضافة الى قائمة list بها بعض الكلمات ..

<p>all right reserved &copy; 2008</p>

و

<ul>
 <li><a href="#">home</a></li>
 <li><a href="#">about</a></li>
 <li><a href="#">maps</a></li>
 <li><a href="#">contact</a></li>
</ul>

يمكن استبدال contact, maps, about .. بما يناسب موقعك

إذن وللتذكير، كود xhtml سيكون هكذا:

<!-- #start footer -->
<div id="footer">
   <p>all right reserved &copy; 2008</p>
 
   <ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">maps</a></li>
	<li><a href="#">contact</a></li>
  </ul>
</div>
<!-- #end footer -->

على افتراض انك استعملت float لتوزيع المحتويات على اليمين وعلى اليسار .. سيكون من الضروري استعمال clear لكي تضمن نزول الصفحة الى الاسفل، يمكنك استخدام class منفصل، ان احببت، باسم spacer مثلا

#footer {
  clear: both;
  background: #EDF6FD;
}

خلفية بدرجة من درجات الازرق (حصلت على اللون من ايقونة rss وخففته ب color schemer)

خصائص الفقرة التي تحتوي على عبارة:

#footer p {
  padding: 1em;
  font: .9em arial;
  color:#333;
  /*font-variant: small-caps;*/
  text-transform: capitalize;
}

لا أعتقد ان هناك شيئا يحتاج الى شرح، استخدم عبارات انجليزية لذلك يمكنني استعمال text-transform و font-variant (يمكن القراءة عنهما في موقع w3school او sitepoint )

ولأنني احب درجات الرمادي استعملت #333

بعد ذلك انتقل الى list التي ادرجتها أسفل العبارة، حيث اعطيت القيمة auto للعرض لياخذ عرض class المردجة فيه وهو #footer (في FF يمكن عدم تحديد العرض لانه يكون افتراضيا auto ويمك استعمال width فقط اذا اردت ان تحدد عرضا مختلفا للقائمة، لكن مع IE شيء آخر ..)
واستعملت overflow لانني ساستعمل float بعد قليل، هذا الامر له فوائد كثيرة مثل اظهار محتوى في scroll ..

#footer ul {
  list-style: none;
  overflow: auto;
  padding: .6em 0;
  width: auto;
}

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

#footer ul li {
  font: .86em arial;
  text-transform: capitalize;
}

جميع العبارات الموجودة ضمن li ستاخذ هذه الخصائص.
ستظهر القائمة بهذا الشكل، بعد إضافة اللون ..

#footer ul li a {
 float: left;
}

الان لكي اجعل الروابط تظهر inline اضفت float، علما ان هناك طرق أخرى لاظهار الروابط inline أي على السطر

#footer ul li a {
 float: left;
 
 /* border & height */
 border-right: 1px solid #C8E4F9;
 height: 20px;
 
 /* color & padding & link effect*/
 padding: .5em 1em;
 color:#3FA0E9;
 text-decoration: none;
 
}

فصلت بين الروابط ب border على اليمين، بارتفاع 20 بيكسل بالاضافة الى padding لوضع مساحة بين العبارات وفصلها

عادة اختصر الروابط واكتفي ب a:hover يمكنك اضافة a:link, a:visited .. حسب رغبتك دائما

#footer ul li a:hover {
 color:#1366A5;
 text-decoration: none;
 }

صورة:

الان لكي احذف border الأخير الذي أتي بعد contact ساضيف class كالتالي:

<ul>
	<li><a href="#">home</a></li>
	<li><a href="#">about</a></li>
	<li><a href="#">maps</a></li>
	<li class="none"><a href="#">contact</a></li>
</ul>

#footer ul li.none a {
 border: 0
 }

في المثال الذي انجزته، اضفت ايقونة على شكل dot لذلك يظهر خط منقط في الصور:

#footer ul {
  background: url(images/dotted.gif) repeat-x left top;
}

لا تعتقد عزيزي المطور انك انتهيت، فما زلت مطالبا بكتابة اكود ل IE ..
بالنسبة ل IE7 يكفي ما يلي:

<style type="text/css">
#footer ul {
  margin: 0
 }
#footer ul li {
  float: left;
 }
</style>

أما IE6 فيمكنك كتابة ما يلي:

<style type="text/css">
#footer ul {
 margin: 0;
 overflow: hidden;
 height: 30px;
 
 }
</style>

هكذا ستحصل على نفس الشكل في كل من FF, IE6, IE7 ..

تجربة المثال مباشرة

حقوق الدرس ل cssbit

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

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

هذه الرسائل تترك في الغالب أثرا حسنا عند الزائر، ويزداده ولاؤه واحترامه للموقع، لماذا لا نتعلم هذه الأمور ونستعملها في مواقعنا .. عند البحث، عند ظهور خطا غير متوقع، اذا نسي الزائر كتابة اسمه .. الخ

1. ما هو المحرر الذي تستعمله حاليا ؟
2. ما هي “اللغات” التي تتعامل معها ؟ (css, xhtml, php, mysql …)
3. ما هي “اللغات” والتقنيات التي تخطط للبدا في تعلمها أو إتقانها ؟
4. ما هو متصفحك رقم واحد ؟
5. السيرفر المحلي ؟
6. اذكر 2 او 3  إضافات مفيدة تستعملها في firefox ؟ (اذا كنت من مستعلميه)
7. اهم موقع تزوره لمعرفة الجديد حول الويب ؟

أتمنى من كل مطور ويب مهتم المشاركة …

اجوبتي كالتالي:

1. phpdesigner
2. css, xhtml, php, mysql, ajax
3. ruby, air, flex, xhtml 2, css 3 + تعلم المزيد في ajax
4. firefox 3
5. xampp
6. web developer, html validator
7. smashing magazine

• لا ابدأ في العمل، إلا بعدما يكون كل شيء نظيفا ومرتبا، بداء من الغرفة والاشياء الموجودة فيها، ثم نظام التشغيل والمجلدات والبرامج وما شابه
• لكي لا انسى نفسي وافتح google reader اعمد الى فتح المحرر ثم نافذة من firefox وكذلك برنامج color schemer مع مجلدين هما: مجلد project الذي اعمل فيه لكي اضيف له ايقونات ما شابه، ومجلد يحتوي على جميع الايقونات بحيث ابحث فيها عن ايقونات جميلة استعملها
• حبي للايقونات كبير جدا واستعملها بشكل كثير في عملي، فعندما اكتب اكواد css و xhtml لابد ان يكون مجلد icons مفتوحا، ايضا استعمل هذه الايقونات للايجاد الوان جميلة ومفضلة (درجات الازرق، الرمادي .. )
• من حين لاخر اعمد الى تحديث جميع البرامج التي اعمل بها، فمثلا اقوم بحذف phpmyadmin المدمج مع xampp واحمل اخر اصدار من الموقع الرسمي ل phpmyadmin (انجليزية، والترميز UTF-8 فقط)
• لدي مجلد باسم projects في سطح المكتب، وهو اختصار لمجلد htdocs الموجود ضمن xampp
• احيانا اثناء العمل، ادخل الى youtube لاستمع الى video clip متنوعة، وأحيانا أشغل radio menara، مؤخرا بدات اشغل اذاعات فرنسية لاستمع للاخبار والبرامج المفيدة

اصبحت ارى في الاونة الأخيرة، الكثير من المواقع والمدونات الأجنبية، تمدح شركة mediatemple، وارى لها اعلانات في كثير من مواقع التطوير، ربما لذلك ترتيب الموقع في pagerank هو 8/10

احدهم الخبير zeldman الذي يكتب في alistapart يستعمل وينصح بهذه الشركة

للمهتمين، هذا هو العنوان:
http://www.mediatemple.net

هذه السنة، استعمل ما يلي:

1. نظام التشغيل: windows xp english - غير مرخص
2. المتصفح: firefox 3 بالاضافة الى ie 6 و ie 7 لمتطلبات التطوير - مجاني
3. المحرر:  phpdesigner - مرخص
4. FTP: استعمل filezilla - مفتوح المصدر
5. مكافح الفيروسات: Avira - مجاني
6. مكافح Spyware: استعمل AVG Anti Spyware - فترة تجريبية
7. مشغل الملفات الصوتية: Jet Audio + Media Player 11 - مجاني
8. البريد: Gmail - مجاني
9. تنظيم القوائم: Tudumo - حصلت على ترخيص
10. تحميل ملفات: flashget + utorrent - مجاني
11. حرق CD و DVD: استعمل Nero Express - غير مرخص
12. سيرفر محلي: xampp - مجاني
13. التعامل مع الألوان: color schemer - غير مرخص
14. تنظيف النظام: Ccleaner - مجاني
15. برامج الرسم: Fireworks - غير مرخص
16. مراقبة الوقت: instantBoss - مجاني

عند تصميم حقل البحث في موقعك، حاول استعمال بعض المعايير البسيطة من web 2.0 التي اصبحت منتشرة في كل المواقع العالمية تقريباً .. وهي معايير بسيطة تتعلق بحجم الحقل، الايقونة المرافقة له ..

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

<form method="post" action="#">
 <input type="text" name="query" />
 <input type="submit" value="submit"  />
</form>

صورة توضيحية:

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

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

ساضيف خصائص على حقل البحث لذلك قمت بإضافة class واعطيته الاسم search

<input type="text" name="query" class="search" />

كود css:

 
#main form input.search {
 border: 2px solid #E5E5E5;
 width: 400px;
 background: #fff url(images/search.gif) no-repeat left center;
 text-indent: 1.2em;
 padding: .1em;
 color:#333;
 font: .87em arial;
}

كتبت:

#main form input.search

لانني ادرجت الفورم البريدي وسط class باسم main
وبما ان الكلاس search تابع ل input فقد كتبته بهذه الطريقة.

يمكنك كتابة السطر السابق بهذا الشكل ايضا

#main input.search {

input.search {

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

#main form

اما شرح كود css فهو بسيط وواضح:

• إطار بقيمة 2 بيكسل بلوم رمادي
• عرض الحقل 400 بيكسل
• استعملت ايقونة كخلفية مع خصائص معينة: عدم تكرارها، ومحاذتها على اليسار ثم في الوسط، يمكنني ادرج لون للخلفية مع هذه الايقونة ان اردت
• سابتعد عن الايقونة ب 1.2em لكي اكتب عبارة البحث، يمكن استعمال px ايضا
• اعطيت القيمة padding: .em للحقل ليبدو اكبر حجما قليلا
• لون الكتابة في الحقل (رمادي)
• ثم حجم ونوع الخط

يمكن اضافة تاثيرات وخصائص كثيرة، ايضا يمكن استبدال زر الارسال بصورة باستعمال css ..

هنا fix لمتصفحات IE من اقتراحي، لأن المؤشر لن يبتعد عن الايقونة .. يمكنك التفكير في حلول بديلة والتي تسمى Fix وهذه من بين حسنات IE سيء السمعة

#main form input.search {
padding: 0 1.3em;
text-indent: 0	
}

صورة:

مثال آخر:

مثال حي

حقوق الدرس ل cssbit

ملاحظة:
جميع الدروس متوافقة 100% مع اختبارات w3c ومع css level 2.1

لدي 01 ميجا كسرعة اتصال، التحميل يصل الى 120 كيلو / الثانية، ليس لدي اي مشكلة في رفع الاتصال الى 4 ميجا أو حتى الى 20 ميجا (ب 90 دولار في الشهر) والسبب هو انني اشجع السرعات العالية، فهذا الامر سيكون مفيدا جدا ومنقذا في بعض الأحيان ..

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

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

أيضا اشجع على ترك الجهاز مشتغلا 24 /24 ساعة، لن يستهلك الكثير من الطاقة كما يعتقد البعض، لان استهلاك الطاقة يكون اثناء تشغيل الجهاز أول مرة، بعد ذلك ينخفض الاستهلاك، فترك الجهاز مشتغلا انقذني في الكثير من المواقف التي تتطلب السرعة والعجلة ..

فبعض الأحيان انتظار دقيقة او دقيقتين لتشغيل الجهاز يكون مكلفا جدا، أيضا استعمل برنامجا يدعى ADSL Autoconnect الذي يسمح لي باتصال انترنت متواصل دون ان اضطر لتفعيل connection كل مرة افتح فيها المتصفح

ما أجمل الحصول على اتصال دائم بالأنترنت وأعني خارج المنزل كاستعمال iphone مثلا او اي هاتف يوفر خدمة الاتصال 24/24 ساعة، فستحتاج بالتاكيد للبحث عن معلومة وانت تتجول في الشارع، او يسالك شخص في مطعم عن شيء ما وتبحث عنه في ثواني معدودة، تقرا البريد وترد عليه وانت جالس على كرسي في الشارع العام، تتصفح مواضيعك المفضلة في google reader وانت ترتشف عصيرا في مقهى ..

اليس أمرا رائعاً