cssbit 2.0

احيانا عندما اسال شخصا لديه اهتمام بالتطوير، عن المحرر الذي يستعمله يجيب بانه يفضل notepad ؟ اعتقد انه لا يوجد مطور ويب عاقل يستعمل notepad في كتابة أكواد css أو حتى أكواد اخرى، xhtml, java .. إلا اذا اردا ان يضيع الكثير من الوقت والجهد دون فائدة تذكر ..

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

محرر top style مثلا، محرر متكامل ومثالي للعمل ب css، ويتوفر حتى على مكتبة جاهزة فيكفي ان ان تكتب اول الاحرف من background مثلا وسيظر لك جميع الكلمات المحجوزة في css .. نفس الشيء بالنسبة لمحررات اخرى ومع لغات كثيرة ك php, javascript …

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

شخصيا استعمل phpdesigner كمحرر لكل من php, mysql, css, xhtml .. احيانا ارسم جداولي ب sql في اي محرر ك notepad لكنني عودت نفسي ان اكتب الاوامر ب php designer لاحصل على ترتيب ونظام والوان جميلة لاوامر sql، احمر، بني داكن، أزرق ..

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

قسم جديد في lifehacker بعنوان best five، اجرى استفتاءا بين الزوار عن افضل محرر وقام باستعراض محررات كثيرة لا تقتصر على css وحسب الترشيحات كان notepad ++ في المرتبة الأولى وبعده المحرر Vim الذي لا اعرف عنه سوى الاسم ..

اذا كنت تعمل ب css ومحتار في اختيار محرر مناسب، فانني اشرح لك ما يلي (علما انني لم اجرب سوى رقم 1 و رقم 3):

• phpdesigner
• topstyle
• notepad ++
• coda
• macrabbit
• UltraEdit
• محررات اخرى ك apanta ..
• Dreamwaver cs3

محرر Dreamwaver كبير الحجم وغير مجاني لذلك لا اعتقد انه سيكون خيارا مناسبا لمطور ويب يعملfreelancer

تحديث: دخلت منذ قليل الى موقع smashing magazine ووجدت موضوعا حول محررات css

لم اسمع حتى الان عن مطورة ويب عربية تعمل freelancer، هناك مدونات مهتمات بالتقنية والتكنولوجيا، لكن لا تجد مدونة لديها اهتمام بمكتبات Jquery و mootols مثلا، او تكتب دروس في css و xhtml ولديها اهتمام بالتصميم الحديث ومعايير web 2.0 … الخ

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

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

ربما توجد عشرات المطورات في وطننا العربي لكن لا نسمع عنهن شيئا، لا انكر انني اكون سعيدا عندما اجد مدونة اجنبية لمصممة او مطورة ويب، واعجب بمدونتها واعمالها بشدة .. كمثال webdesignerwall مطورة ومصممة من كندا لديها 3 مواقع منها: bestwebgallery

اتمنى العمل مع مطورة ويب اكثر مما اتمنى العمل مع مطور ويب ..

إيقونات:

• إيقونات Badges مميزة
• إيقونات e-commerce مجانية

معارض css:

• cssbuilt مميز جدا
• weworkforfree صور متنوعة

مواقع تقدم خدمة PSD to XHTML:

• xhtml4u
• 9xhtml
• markup4u
• slicendiceit

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

قائمة بمواقع شخصية أجنبية، لمطورين، مصممين، .. الخ

• onetreehill.net.au
• covetbrighton.com
• zooadventurer.com
• jonasraskdesign.com
• ddz.at

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

فمعروف مثلا ان الاسيويين يعملون في كبرى الشركات ك google, facebook, flickr .. ودائما ستجد اسيويين في الشركات الامريكية، ربما شريط ثورة جوجل يظهر ذلك .. فرئيس جوجل في بريطانيا من جنسية اسيوية، والمشرف على تطوير google maps من الصين أو اليابان …

وفي مجال لغات البرمجة دائما، هناك Ruby من اليابان، والكثير من الشركات التي تعمل في مجال البرمجة ك sun وغيرها .. حتى في مجال العتاد واجهزة الكومبيوتر، معظم الشركات اسيوية، gigabyte, msi, asus, toshiba, lg ..

مؤسس facebook الشاب الغني، مع شابين اسيويين:

المزيد من الصور

أصادف من حين لاخر مواقع اجنبية تتميز بألوان رائعة وجميلة جدا ..
احتفظ بها في مجلد color ضمن مفضلتي في firefox ..

• alexcohaniuc.com
  
• cuoma.com
  
• impresslab.com
  
• gefledesign.se
  
• collectiveidea.com
  

عند إنشاء الكلاسات الرئيسية التي تحدثت عنها سابقا وهي: main, header, sidebar, content, footer .. أبدا في ملء الصفحة بالمحتويات ..

لا استعمل div بكثرة وانما استعمل تشكيلة متنوعة من أوامر xhtml فاذا اردت مثلا الحصول على عنوان رئيسي فانني استعمل h من 1 الى 6 حسب الاختيار ..

<div class="sub-title">title here ..</div>

.sub-title {
 font: 1em tahoma;
 /*color: #333 */
}

ساستعمل h2 أو h3 هكذا:

<h3>title here ..</h3>

وهكذا استعمل اكبر قدر ممكن من اوامر xhtml مثل p, span, code, hr .. الخ

اذا كنت اعمل في منطقة content ساستعمل كلاسات و tags جديدة انسبها لهذا الكلاس الرئيسي ..

#wrap span {
	color:#f00;
}

وأيضا:

#sidebar h3 {
	color:#f00;
	font: 2em arial;
	padding: .2em;
}

بحيث span الاولى تتبع الكلاس wrap و h3 تتبع sidebar ..

في هذه المواضيع سأكتب عن بعض الأمور والتقنيات التي استعملها في كتابة ملفات css و xhtml، هي فكرة لمشاركة تجربتي الخاصة مع الاخرين.

ابدا دائما باختيار اسم للملف:

style.css
master.css
screen.css

واذا كان يخص لوحة التحكم فأسميه:

dashboard.css
admin.css

بالاضافة الى ملفات تكميلية واضحة من اسمها:

print.css
ie6.css
ie7.css

بعدها اوثق الملف:

/**
 @file: screen.css
 @date: 15/05/2008
 @by: cssbit [dot] com
*/

يمكنني تعديل القيم أو إضافة أخرى ..

ثم ابدا بتكوين الكلاسات الرئيسية:

body {
 
}
 
#main {
 
}
 
#header {
 
}
 
#sidebar {
 
}
 
#content {
 
}
 
#footer {
 
}

بعدها أعود لملف xhtml واكتب صفحة تتكون من هذه الكلاسات، .. وهكذا ابدا في بناء صفحتي ..

• wobzip لفك ضغط الملفات
• csstypeset خدمة لمطور css (تحديد الخطوط والحجم، الألوان ..)
• domize للبحث عن الدومينات
• List Cleaner احذف العبارات المكررة
• thumbalizr اصنع مصغرات screenshot للمواقع
• web 2.0 logo صنع بانرات ..
• polaroize إضافة إطارات وتأثيرات على الصور
• ColorToy 2.0 اختيار الألوان