cssbit 2.0

احتفظ بإيقونات كثيرة، أجمعها من هنا وهناك
احتاجها في User Interface عند تصميم صفحات ونماذج
لا يخلو أي موقع عالمي من الايقونات (flickr, digg, facebook ..) فلها وظيفة رئيسية في user interface ..
اليكم مجموعة صغيرة من الإيقونات التي اعدل، وانقح فيها كل فترة، بالإضافة الى background بالوان مختلفة

صورة للمجموعة:

ملف التحميل

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

wp-includes/version.php

السطر:

$wp_version = '2.6.1';

غيره إلى

$wp_version = '2.6.2';

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

فكرت في منتدى صغير يتألف من قسمين:

1. قسم css لطرح استشارات مشاكل حلول مواضيع متفرقة حول التوافقية مع IE6, IE7, FF .. بالاضافة الى افكار tips ..
2. قسم XHTML لكل ما يختص بأكواد XHTML والتوافقية مع اختبارات W3C

فقط لا غير !

المنتدى سيكون bbPress مع إضافة لتلوين الأكواد ان وجدت، واذا لم يكن مناسبا سيكون الخيار الموالي هو Vanilla

ملاحظات:

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

ما رأيكم ؟؟؟

وشكرا

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

1. ما هو الوسم الذي لا يتوافق مع هذه المجموعة:

1. <div>
2. <p>
3. <ul>
4. <span>

2. اكتب كود css للشكل التالي:

كود XHTML هو:

<p>smashing magazine</p>

3. ما هي نتيجة هذا الكود في كل من IE 6 و FF:

p {
 font-size: 20px !important;
 font-size: 12px
}

ثم هذا الكود:

p {
 height: 80px;
 min-height: 190px;
 border: 1px solid #ddd
}

أعزائي محبي CSS، من اجل المصداقية، يجب اعطاء اجوبة دون البحث في الأنترنت أو اجراء اختبارات

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

تركي مبرمج قدير، كان لديه موقع قيم جدا عنوانه dev4arabs لكنه توقف منذ سنوات وتم تعويضه بمدونة تحتوي على مقالات ودروس .. الخ، انه مثال للمبرمج الحقيقي، حيث قام سابقا، ببرمجة منتدى كامل متطور بلغة ASP.net بالاضافة الى كتب باللغة العربية عن Visual basic .net

صور الكتب، ويمكن تحميلها مجانا على الرابط

السيد تركي مبرمج ب: VB.NET, C#.NET, C\C++, JAVA, VB6, VBA for MS-Office, ASP.NET, ADO.NET, Web-Services, Microsoft SQL Server, بالاضافة الى أمور اخرى كثيرة

ادعو الجميع لمتابعة مدونة الزاخرة بالفائدة والمعلومات القيمة
جزاه الله كل الخير

• مبرمج c, c++, php, ruby, java, pascal, c# ..
• اتعامل مع قواعد بيانات: mysql, sql server, oracl, dbase, sqlite, postgresql ..
• مصمم photoshop, flash وجميع برامج adobe بالاضافة الى برامج Maya ..
• اعمل على مختلف الأنظمة: windows, و Linux (بتوزيعات مختلفة) و Mac
• الهوايات: السباحة، الرسم، القراءة، كرة القدم، جمع الطوابع والعملات ..
• اللغات: الانجليزية (قراءة-كتابة-محادثة)، الفرنسية (نفس الشيء)، واخيرا اللغة العربية
• …

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

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

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

هل اصحاب الشركات أغبياء الى هذه الدرجة
هل هؤلاء المبرمجين العباقرة ( c و c++) ليس لهم ضمير ويبحثون عن اية فرصة عمل ولو بالكذب
..

ملاحظة:
نسي هذا الشاب أن يضيف انه خبير css و xhtml و ajax … ربما لأنه لم يسمع بها بعد

• ملصقات لتزيين أجهزة laptop
• حقيبة جميلة لحمل laptop (حقائب الظهر عملية اكثر من الحقائب الأخرى)
• قوانين Alex لحياة كومبوترية سعيدة
• مجموعة كبيرة من مواقع التوظيف العالمية

في هذا الموضوع القصير، سأستعرض شركات ويب صغيرة (من 1 إلى 10 أفراد)، تستخدم أحدث التقنيات (Ruby, CSS, XHTML, AJAX … )، لبرمجة مواقع وتطبيقات ويب 2.0، وهي نموذج يحتذى به لكل الشركات الصغيرة العاملة في الويب

• extendi.it شركة إيطالية، تتكون من 4 مطورين، من أشهر أعمالها feedmyapp دليل مواقع web 2.0، الشركة لديها مدونة يكتب فيها الفريق معلومات واكواد واشياء كثيرة، وهي تبحث عن مبرمج ruby بدوام كامل
• viget شركة من 9 مبرمجين اختصاصها css و ruby، لديها مختبر ومدونة غنية بالمعلومات والأفكار والدروس
• babyrails فريق هولندي مكون من شخصين، مبرمج Ruby، ومطورة ويب تستخدم CSS و XHTML
• outsourceczech شركة من التشيك تعمل ب css 2, 3 و php وتقنيات أخرى ..
• extendio شركة مكونة من شخصين، مختصة بالتصميم والبرمجة (دائما css و xhtml حاضرة بقوة) ولديها مشاريع شهيرة مثل freshwebjobs
• spinbits شركة عربية مقرها دبي، يتكون فريقها من 5 أو 6 أفراد، تستخدم Ruby كذلك

1. كود إدراج unordered list:

<!-- start tabs -->
<ul id='tabs'>
  <li>home</li>
  <li>archive</li>
  <li>search</li>
  <li>contact</li>
</ul>
<!-- end tabs -->

كود css يمكنك التعديل حسب احتياجاتك:

ul#tabs {
  list-style: none;
  margin: 10px 0 0;
  overflow:  auto;
  padding: .5em;
 
}

ul#tabs li {
  text-transform: uppercase;
  font-size: x-small;	
  margin: 0 5px 0 0;
  border: 1px solid #ddd;	
  float: left;	
}

قائمة أفقية (float: left) بحروف كبيرة (uppercase) وبحجم صغير (x-small) وكل li تبعد عن الاخرى ب 05px من جهة اليمين (البداية من اليسار)

صورة:

نضيف روابط للقائمة:

<li><a href='#'>home</a></li>
<li><a href='#'>archive</a></li>

اضافات css:

ul#tabs li a {
	display: block;
	color:#333;
	text-decoration: none;
	padding: .5em .98em;
 
}

ul#tabs li a:hover {	
	color:#5E5E5E;
}

صورة:

الصفحة التي سيتواجد فيها الزائر ستكون مختلفة، وهي صفحة يطلق عليها current page او selected بحيث يستطيع معرفة المكان الذي يتواجد فيه:

<ul id='tabs'>
  <li class='current'><a href='#'>home</a></li>
</ul>

كود css:

ul#tabs li.current a {
	color:#02A1ED
 
}

ul#tabs li.current a:hover {
	color:#015D88
}

العبارة home هي الصفحة الحالية وتظهر في الصورة بلون أزرق

صورة:

ساستعمل خلفية على شكل تصميم corner يمكن العثور عليه في مواقع كثيرة، او تصميم خاص بواسطة Photoshop وباستعمال background-position سادرج الصورة في خلفية كل list item

الكود النهائي بعد بعض التعديلات:

ul#tabs li {
 float: left;
 text-transform: uppercase;
 font-size: x-small;
 background:  url(../images/tabs.gif) no-repeat 0% -52px;
 border-bottom: 1px solid #ddd;
}

ul#tabs li a {
 display: block;
 color:#333;
 text-decoration: none;
 outline: 0;
 padding: .5em .98em;
 background:  url(../images/tabs.gif) no-repeat 100% -78px;
}

ul#tabs li a:hover {	
 color:#5E5E5E;
 text-decoration: none;
}

ul#tabs li.current {
 background-position:  0% 0px;
 border: none
 
}

ul#tabs li.current a {
 background-position: 100% -26px;
 color:#02A1ED
 
}

ul#tabs li.current a:hover {
 color:#015D88
}

صورة:

• مثال للتجربة
• تحميل الملف

معرفة دوال wordpress تسهل عليك تصميم theme كامل بسهولة ويسر، معظم الدوال تبدأ ب wp_ أو العبارة get_ بعدها اسم الملف او القسم المسؤولة عنه

مثلا لعرض الصفحات الثابتة التي تكون عادة في sidebar أو header نستعم الدالة:

< ?php wp_list_pages() ?>

الدالة ستعرض جميع الصفحات مع عبارة pages واذا اردت ترتيب الصفحات وحذف عبارة pages الافتراضية يمكنك إضافة arguments للدالة

< ?php wp_list_pages('sort_column=menu_order&title_li='); ?>

بحيث سيتم عرض الصفحات بالترتيب حسب id وقيمة title_li ستكون فارغة وبالتالي لن يعرض عبارة pages أو صفحات
يمكن تضمين الدالة سواء في ملف header.php أو sidebar.php

ايضا يجب ان تكون ضمن قائمة منسدلة كالتالي:

<ul id='nav'>
  < ?php wp_list_pages(); ?> 
</ul>

بدون li

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

<!-- start search box -->
 < ?php include (TEMPLATEPATH . '/search.php') ?>
<!-- end search box-->

حيث ملف search.php يحتوي على اكواد xhtml او يمكن عرض الفورم مباشرة:

<form method='get' action='..'>
  <input type='text' value='..' name='s' />
  <input type='submit' value='بحث' />
</form>

لادراج header في اي صفحة استعمل الدالة:

< ?php get_header()?>

القائمة الجانبية أو sidebar:

< ?php get_sidebar()?>

ولاظهار footer في آخر الصفحة:

< ?php get_footer()?>

الملفات sidebar.php, header.php, footer.php تتضمن دوال wordpress سهلة وبسيطة الفهم يمكن الرجوع اليها في موقع wordpress لمعرفتها

بمعرفة ملفات theme ودور كل دالة يمكنك البدأ بتصميم theme الخاص بك