cssbit 2.0

ماذا تفعل خلال 24 ساعة ؟
كيف توزع هذه الساعات بين النوم والعمل وباقي الانشطة من اكل، شرب، عبادة .. الخ ؟

لم انتقل الى ubuntu بعد كل هذه السنين
بصفتي مطور ويب دائما ما كنت اتساءل ان كان هذا النظام مناسبا لي وسيسمح لي بتطوير مواقعي وكتابة اوامر css بشكل يومي

اعياني البحث عن نسخة اصلية من windows xp كما اعياني تحديث النظام كل فترة معينة واذا سقط النظام من دون اي سبب احيانا، علي تحميل كل التحديثات من الصفر وتنصيب بضعة برامج تتعلق بالنظام ك java direct x, ملفات net ..
كما ان انتقالي ل ubuntu كان دائما محط شكوك وريبة

الغريب انني كنت من مؤيدي هذا النظام وادافع عنه في كل حديث، بينما استعمل windows خلسة وبشكل سري لانني مرغم وليس بيدي حيلة

مشكلة عدم توافق البرامج كنت أؤمن بها في السابق ولم يعد لها أي تأثير الان، ما البرامج الذي أخشى الا تكون متوافقة .؟ لا يوجد الكثير فقط phpdesigner و colorschemer وفي نفس الوقت يصعب تركهما بعد رحلة بحث مضنية

اذكر انه اثناء فترة الانتقال من IE6 إلى Firefox كنت امر بنفس الريبة والشك وعدم الاقتناع بجدوى وفائدة FF، الان اصبحت اكتب اضافات لاكوادي كي يستطيع الاخرون ممن يستعملون IE6 الاطلاع على صفحاتي بشكل لائق وسليم

لدي رغبة حقيقية في استعمال ubuntu وتوديع windows الوداع الاخير، لا اخفي انني صرت اخجل ان اخبر الاخرين انني مطور ويب يستعمل windows

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

وهذا هو السبب الوحيد تقريبا الذي يجعلني أؤجل باستمرار تنصيب النظام والعمل عليه بشكل حقيقي لان تجربته غالبا تكون للهو والاكتشاف

منذ قليل كنت اتصفح بعض المواقع ورايت كم من المطورين يستعملون ubuntu لماذا هم يفعلون ذلك دون شعور بالنقص ؟ لماذا تأقلموا واصبحوا لا يستطيعون الفراق معه ؟ ولماذا انا لم اعطي حتى فرصة حقيقية لهذا النظام

الامر الاخر الذي يزيد الامر سوءا هو ان معظم المدونات المهتمة بتطوير المواقع تستعمل mac في عملها (css-tricks و smashing magazine كابرز مثال) مما يجعلني اتساءل مجددا ان كان mac هو النظام المناسب لمطور الويب

هذا الخيار ارغب باكتشافه اكثر من اكتشاف ubuntu لكنه غير متوفر لاسباب تعرفونها جميعا، فنظرتي نحو ubuntu يشوبها نوع من السواد والغموض حيث ارتبط في ذهني كشيئ مخيف ومرعب

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

تحديث:
باءت كل محاولاتي بالفشل، حيث لا يستطيع النظام تحميل نواة kERNEL وتظهر رسالة مفادها ان اكتب HELP لكي تظهر لي بعض الاوامر

اعدت تنصيب النظام اكثر من 5 مرات بدون فائد

• مدونة م، موقع يقدم خدمات تصميم وبرمجة (ruby, css ..) من المغرب
• devsnippets مدونة تقنية تابعة لموقع noupe مفيدة لكل مطور ويب
• getfirebug أداة مفيدة
• thehavingfunclub مدونة هاوية تصوير
• freshchurchsites معرض لمواقع جميلة

twitter خدمة ويب 2.0 مبرمجة بمنصة ruby on rails، شديدة البساطة، فكرة الموقع هي ان تجعل أصدقاءك، ومعارفك على اطلاع بجديدك بشكل يومي، كما يمكن تبادل الافكار والمعلومات والروابط بين الاصدقاء بواسطة هذه الخدمة

انتشرت الخدمة بشكل سريع جدا، لدرجة أن تجد رجال أعمال، إذاعات وقنوات إخبارية عالمية تستعملها، بالإضافة الى زعماء سياسيون كبيل كلنتون، ومطورين ومبرمجين، شركات استضافة، فنانين .. باختصار يمكن ان تجد في twitter شخصيات لا تخطر لك على بال .. حتى الخدمات الشهيرة مثل , google news, jquery, mozilla .. مشتركة، فماذا عنك ؟

اذا كنت تجد مشقة في تسجيل الدخول للموقع، وكتابة تحديثات updates كل فترة، إليك اضافة صغيرة غنية بالخصائص، عبارة عن تطبيق adobe air، تسمح لك هذه الإضافة بادراج تحديثات، رابط، صور، متابعة جديد قائمة contacts الخاصة بك ..الخ من المميزات

• تحميل adobe air
• تطبيق twhirl

مجموعة من مطورين ومصممين عالميين ..الخ

• http://twitter.com/vpieters مطورة ويب
• http://twitter.com/smashingmag
• http://twitter.com/37signals رائدة ruby on rails
• http://twitter.com/bitsweat مبرمج ruby
• http://twitter.com/cnnbrk
• http://twitter.com/twitter
• http://twitter.com/24ways
• http://twitter.com/dhstatus
• http://twitter.com/mixx
• http://twitter.com/hotdogsladies
• http://twitter.com/jcroft
• http://twitter.com/billclinton رئيس الولايات المتحدة السابق
• http://twitter.com/barackobama باراك أوباما
• http://twitter.com/clearleft
• http://twitter.com/microformats
• http://twitter.com/lloydi
• http://twitter.com/magnolia خدمة لحفظ الروابط
• http://twitter.com/zeldman يبدو ان هذا الرجل مهووس بخدمات ويب2.0

نعم twitter موقع مختلف، ليس للترفيه او خدمة ويب 2.0 عابرة، ويوجد به مئات الشركات المحترمة، ومطورين ومبرمجين لهم وزن ..

1. patterntap واجهات Interface لصفحات 404، خلفيات، أكواد، صفحات الاتصال ..
2. todoist خدمة to do list
   
3. wordpress for iphone تطبيق مفتوح المصدر ل iphone و ipod touch
   
4. zeniltuo جميع معارض css في صفحة واحدة
5. WideImage مكتبة للتعامل مع الصور في PHP
6. The Japanese Garden
7. grammar Girl دروس مهمة في الانجليزية (الرابط من احدى حلقات Oprah)
8. blaugh موقع يعرض كاريكاتر ذات طابع تقني
9. welovewp معارض لتصاميم wordpress
10. My Top 5 Biggest Freelancing Mistakes
11. Top Webmaster Resources

الى عشاق css، ما هي الامور التي تود معرفتها او القراءة عنها حول css ؟ وما رايك بمدونة متخصصة فقط في css (نفسها cssbit) ؟ دروس، اخبار، روابط ؟ ام ان نستمر معا في الكتابة عن مواضيع مختلفة تهم مطور الويب ؟

اراؤكم واقتراحاتكم محل اهتمام كبير عندي، انتظرها بشغف

سنستعمل css “لتخصيص” بعض الانواع من الروابط كتلك التي تكون عبارة عن ملف pdf او doc أو روابط عادية
الصورة التالية توضح ما سنحصل عليه من هذا الدرس

بعض أوامر css التي سنستخدمها هنا، لا تعمل مع IE6 لأنه لا يدعمها مع الأسف لكنها تعمل مع أخيه IE7
………………..

سنبدأ بتصميم قائمة ثم ننتقل الى فقرة تحتوي على نص

<ul id="nav">
	<li><a href="#">excel</a></li>
	<li><a href="#">document</a></li>
	<li><a href="#">powerpoint</a></li>
</ul>

لن نشرح مجددا طريقة تصميم قائمة، يمكن الرجوع للدرس السابق، واستعمال نفس الطريقة

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

<ul id="nav">
	<li><a href="./file.xls">excel</a></li>
	<li><a href="./file.doc">document</a></li>
	<li><a href="./file.ppt">powerpoint</a></li>
</ul>

يجب ان احترم امتداد كل ملف (mp3, html, doc, pdf, ppt, xls ….. الخ)

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

p[title*="intro"]
a[href$=".html"]
object[type^="image/"]

سنتطرق في هذا الدرس الى الروابط لذك سنستعمل الامر التالي:

a[href="http://site.com"]
a[href$=".extension"]
a[href^="http://"]

حيث يمثل الرمز $ نهاية الرابط الذي سيبدا بامتداد نوع من انواع الملفات (.extension) مثل (.doc و .pdf .. )، لاحظ النقطة قبل الامتداد، بينما يمثل الرمز ^ بداية الرابط ..
اما القيمة value فيمكن ان تكون رابط من نوع http:// او بريد الكتروني mailto: او حتى رابط عادي يحمل القيمة rel مثل

<a rel="copyright">droits</a>

……
بما انني استعملت قائمة ul فساضيف اكواد css على ما كتبته في الدرس السابق ..

ul#nav li a[href$='.doc'] {
	background: url(doc.gif) no-repeat left center;
	padding: 0 0 0 20px;
}
ul#nav li a[href$='.xls'] {
	background: url(spread.gif) no-repeat left center;
	padding: 0 0 0 20px;
}
ul#nav li a[href$=".ppt"] {
	background: url(pres.gif) no-repeat left center;
	padding: 0 0 0 20px;
}

عند كل نوع من الامتدادات، اضفت خلفية على شكل ايقونة مع التحكم في مكانها (يمين، يسار ..) .. الخ
وفي النص، ساستعمل روابط من نوع اخر (رابط http:// .. )

p a[href^='http://'] {
  background: url(link.gif) no-repeat right top;
  padding: 0 14px 0 0;
}
 
p a[rel~="copyright"]{
  color:#f00
}

كود xhtml:

 
Please notice: .. <a href="http://google.com">google</a> and
approaches which you can use in your future projects ..

تطبيق الدرس سيساعد على فهم attribute selectors حيث ان لها استعمالات عديدة ..
وكالعادة لا يوجد ملفات جاهزة، لكن توجد هدية عبارة عن إيقونات مقدمة من google docs وايقونات اخرى متنوعة

تحميل الإيقونات
صفحة demo

عندما تعرفت أول مرة على هذا الموقع الفريد من نوعه، وجدتني تلقائيا احبه واتعلق به لدرجة ان ارجع لقراءة جميع المواضيع التي كتبت منذ انطلاق الموقع، وان يكون اول موقع اتابع جديده، فقد احببته بصدق

حتى عقلية صاحبا الموقع (Vitaly Friedman و Sven Lennartz) جميلة وطريفة، والدليل على ذلك مسابقات تقام من حين لاخر، اخرها مسابقة عن افضل موضوع يكتبه الزائر والجائزة هي macbook air وليس مثل مسابقاتنا نحن، جوائزها عبارة عن دومين ومساحة ههه

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

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

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

صورة توضح ما حصلت عليه بعد تعديل بسبط في كود css السابق:

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

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

هذا الدرس يشرح طريقة لانجاز ذلك

دائما الحل السحري هو استعمال ul و li في انجاز هذا النوع من المهام
سنبدأ بكتابة قائمة بسيطة كما يلي

<ul id='menu'>
  <li><a href="#">home</a></li>
  <li><a href="#">contact</a></li>
  <li><a href="#">help</a></li>
  <li><a href="#">maps</a></li>
</ul>

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

<ul id='menu'>
</ul><ul id="menu">
<!-- are the same -->
</ul>

…………..

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

ul#menu {
	list-style: none;
	width: 500px;
	border: 1px solid #ddd;
	padding: .5em;
}
ul#menu li {
	margin: 0 0 5px;
	padding: .2em 0 0;
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
	background: url(dote.gif) repeat-x 0 35%;
}

حسنا، ساشرح كل سطر مع ان الهدف من كل هذه الدروس هو “أفكار” لمطور الويب اكثر مما هي شرح لأوامر css ..

ul#menu {
	list-style: none;
	width: 500px;
}

لن تعرض bullet امام كل سطر في القائمة و bullet هي تلك الايقونة السوداء الصغيرة التي تظهر بشكل تلقائي عند استعمال الوسم li والتي يمكن اظهارها باشكال مختلفة
وضعت عرضا محددا للقائمة وهو 500px

ul#menu {
	border: 1px solid #ddd;
	padding: .5em;
}

وضعت إطارا للقائمة بلون رمادي #ddd مع توسيع محتوى القائمة ب نصف 1em من جميع الجوانب (يمكنك استعمال px او قيم أخرى، معنى التوسيع هنا هو ان تزيح المحتوى عن border كي لا تظهر العبارات متلاصقة مع الاطار)

أما هذا السطر

ul#menu li {
	margin: 0 0 5px;
}

فلكي أزيح كل item عن الذي اسفل منه، فالسطر السابق مكافئ لهذا السطر:

ul#menu li {
	margin-bottom: 5px;
}

……………
ثم احدد اللون وحجم الخط وشكله الذي سيكون هنا بحروف كبيرة

ul#menu li {
	font: .7em serif;
	text-transform: uppercase;
	color: #ccc;
}

واخيرا ساضع خلفية على شكل نقط dot تظهر مع كل item وبتعديل posistion ساجعل النقط تظهر اسفل العبارات ..

ul#menu li {
	background: url(dote.gif) repeat-x 0 35%;
}

الان سأضيف ارقاما قبل كل item واستعمل span لانني اريد ان اضيف تاثيرات على الارقام، الوسم span هو المناسب هنا، كما يمكن استعمال وسوم اخرى مثل code أو sub أو sup .. لكن من الافضل احترام كل tag ومكان استعماله

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a></li>
  <li><span>2</span> <a href="#">contact</a></li>
  <li><span>3</span> <a href="#">help</a></li>
  <li><span>4</span> <a href="#">maps</a></li>
</ul>

هناك حكمة في وضع الارقام أول كل item ولم اضعها بعد a/ (الطريقتين تفيان بالغرض) والحكمة انه اذا تصفح الزائر القائمة بدون تفعيل css ستظهر له بشكل سليم هكذا:

من الافضل ؟

القائمة اذن ستظهر بهذه الطريقة:

……………..

كود css:

ul#menu li a {
 float: left;
 padding: 0 .5em;
 background: #fff;
 text-decoration: none;
}

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

وبالتالي سارجع واضيف هذا السطر

ul#menu {
  overflow: auto;
}

وهكذا حلت المشكلة:

كود css:

ul#menu li span {
  float: right;
  padding: 0 .5em ;
  background: #FFF;
  font-size: 1.2em;
}

جعلت الارقام تتجه الى اليمين مع خلفية بيضاء (الخلفية البيضاء ستظهر في الارقام فقط والروابط فقط وبقية المساحة ستكون الخلفية عبارة عن نقط dot)
والا ستظهر هذه النقط في كامل li وهذا ليس في صالح ما نحن بصدد القيام به ..

النتيجة الان كالتالي:

ما أبشعها من قائمة ؟؟ اسف لأنني خيبت ظنكم ههه

بما اننا استعملنا float بقيمتين مختلفتين right و left يجب ان نجد حلا لكي يظهر كل سطر تحت الاخر بشكل متناسق، الحل السهل والمنطقي هو اضافة br عند نهاية كل رابط كما يلي:

<ul id='menu'>
  <li><span>1</span> <a href="#">home</a><br /></li>
  <li><span>2</span> <a href="#">contact</a><br /></li>
  <li><span>3</span> <a href="#">help</a><br /></li>
  <li><span>4</span> <a href="#">maps</a><br /></li>
</ul>

وطالما انني استعملت float من الأفضل ان اضيف خاصية clear: both لهذه br التي اضفتها

ul#menu li br {
  clear: both;
}

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

اذا حذفت الخلفية البيضاء التي اضفتها لكل من a و span يعني الروابط والارقام ستظهر بهذا الشكل

يمكنك استعمال الوان تحبها:

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

تحميل الإيقونات