cssbit 2.0

اي مطور ويب يرغب في تعلم التقنيات الحديثة او تطوير مهاراته سيلجأ للمواقع الاجنبية، لأنه يعلم ان المصادر العربية قليلة، نادرة، قديمة، وتنسخ عن المواقع الاجنبية ..
فكم مدونة عربية مثل smashing magazine ؟ الجواب أنه لا يوجد ولا مدونة عربية واحدة متخصصة في css, xhtml, التصميم الافكار والتقنيات الحديثة .. الموجهة لمطور الويب، توجد عشرات المدونات العربية التقنية المتنوعة .. لكن تلك الموجهة لمطور الويب هي ما أتحدث عنها

مدونة smashing magazine خير مثال، فحتى lifehacker غير متخصصة في تطوير الويب ..
نصيحة لمطور الويب العربي، لا تنتظر الكثير من المدونات والمواقع العربية، ربما لن تستفيد بقدر ما ستضيع الوقت في قراءة اشياء عفى عليها الزمن ..

اليك مدونة وحيدة تجعلك ملما بكل تقنيات الويب الحديثة وما يدور في العالم حول ذلك .. تابعها عبر google reader .. ولا تنس زيارة الموقع من حين لاخر، لانك ستجد أشياء جديدة في sidebar .. لا يظهرها قارئ google

تعلم css سيفتح لك عزيزي مطورة / مطور الويب، افاقا كثيرة، وستكون قادرا على إيجاد فرص عمل سواء في شركة محلية (تعمل بالمعايير القياسية) او حتى بصفة freelancer في المواقع الاجنبية وما أكثرها، وهناك لن تحتاج الى اكثر من حساب paypal

قبل البدء بتعلم css يجب ان يكون واضحا أنها مهتمة بالتنسيق فقط، تغيير الوان، خطوط، احجام .. الخ، اما بناء الصفحة، هيكل، نصوص، عناوين، صور .. فستتكفل بها xhtml أو html، أيضا ل css استعمال واسع جدا، متصفح firefox يستعمل css في themes الخاصة به، واي برنامج اخر اذا استعرضت ملفاته ستجد أكواد css داخلها ..

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

الأدوات:
لن تحتاج الى اكثر من جهاز كومبوتر متواضع ونظام تشغيل: ubuntu, mac, windows، العمل ب css لا يتطلب عتادا حديثا اونظام تشغيل معين او حتى محرر ومتصفح معين .. يمكنك كتابة اكواد css في اي مكان وفي اي بيئة تريد ..
يمكن اختيار محرر مناسب واذا كنت تستعمل محررا معينا فلتبقي عليه، بصفة عامة يفضل اختيار محرر يلون الاكواد ويرتبها .. أما فيما يتعلق بالمتصفح، أكيد ستختار firefox 3.0 واقترح استعمال localhost مثل xampp كاضافة كمالية لسهولة الوصول الى الملفات وتعديلها واستعراضها .. والا فانت حر في استعراض ملفاتك في اي مكان من الجهاز ..

الخطوة الثانية اذن هي ان تحضر الادوات التي ستعمل بها، وعندما تريد العمل ستكون الامور واضحة وجاهزة لديك، دون ارتباك او تضييع مزيد من الوقت

css:
كبداية، اقترح ان تكتب اكوادا بسيطة بنفسك، بدل قراءة مقالات طويلة وصعبة .. طبعا من المفترض انه لديك خبيرة بسيطة حول الاوامر وحول tags وما شابه، بمعنى انك تعرف فائدة h2, h3 .. اضافة فقرة ب p او صورة او رابط a, img ..

سنكتب اكوادا بسيطة في صفحة xhtml .. ثم تعديل الالوان والخطوط وما شابه في ملف css، ولمعرفة كيف يتم الربط بين css و xhtml يمكن للرجوع للمواقع الاجنبية او كتاب سردال .. يمكنك ادراج كود css في نفس الصفحة لسهولة التعديل ورؤية ما تكتب:

      <style type="text/css">
	    #class {
 
	    }
      </style>

مثال لكود html:

<h5>step one!</h5>

كود css:

h5 {
	color:#ccc;
}

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

التجربة والممارسة اليومية .. هي البداية الفعلية

التتمة في مقالة جديدة

احيانا عندما اسال شخصا لديه اهتمام بالتطوير، عن المحرر الذي يستعمله يجيب بانه يفضل 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

قررت ابتداء من اليوم ان اغير بعض العادات السيئة، واحسن اشياء كثيرة في حياتي ..

لم ازاول الرياضة منذ اكثر من 5 سنوات، جلوسي المستمر أمام جهاز الكومبوتير سبب لي الاما مبرحة في الظهر واليدين .. التفكير بمثالية سبب لي مشاكل ومآسي كثيرة، مثالية السكن، مثالية في العمل، مثالية النظافة ..

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

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

• es.moo.com موقع لطبع الصور والبطاقات .. من فلكر مثلا
• hotajax موقع متخصص في الاجاكس شبيه بفكرة ajaxrain
• tombuntu موقع يعرض افكار وحيل وكل ما يتعلق ب ubuntu
• davidwalsh مدونة حول: css, xhtml, ajax, php
• flickr video شاهد الفيديو من موقع فلكر
• inspirationup معرض اخر من معارض css الرائعة
• New RSS Icon ايقونات جميلة
• جنسيات للبيع، مقالة لفهد الأحمدي

لم اسمع حتى الان عن مطورة ويب عربية تعمل 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

• gotocss3 موقع يعرض بعض الدروس في css3 (فرنسي)
• skinpress تصاميم wordpress مجانية
• mindvalley شركة ويب ماليزية
• fluxiom موقع لتحميل الملفات مع أداة tools للتحميل مباشرة من الجهاز
• Design Pattern من yahoo مهم لكل مطور ويب
• maxigadget جديد التكنولوجيا (فرنسي)
• 15 يوما في ضيافة Jquery
• wideimage مكتبة لمعالجة الصور PHP5
• snapcasa لأخذ صور Screenshot للمواقع
• xinureturns معالجة الموقع: اخطاء css, xhtml وأشياء أخرى
• usability دروس ممتازة في قابلية الوصول والاستعمال
• مدونة ماك، مدونة عربية جديدة متخصصة
• itlance وظائف وأعمال freelancer للمطورين والمبرمجين
• feedcompare لمقارنة عدد المشتركين ب feedBurner
• tutorial9 دروس تصميم
• codefront مدونة حول php, ruby, java ..
• help-developer مدونة حول البرمجة والتطوير

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

شخصيا اطور طريقتي باستمرار ..
عند انشاء class رئيسي باسم content أو sidebar مثلا .. لاشك انني ساستعمل اوامر xhtml داخل هذا الكلاس ك، p, span, a, h ..الخ

لذلك من الافضل ان اظهر ان هذه الكلاسات الفرعية تنتمي الى الكلاس الرئيسي، وذلك عند كتابة ملف css .. مثال:

يوجد مسافة بين الكلاسات الفرعية التي تنتمي الى الكلاس الرئيسي، مثل نظام الشجرة ..

#content {
	margin: 0 auto;
	border: 1px solid #ccc;
}
    #content p {
  	   font: bold 1em arial;
  	   padding: .2em;
    }
         #content p span {
    	    color:#f00;
          }
 
 
#wrap {
	margin: 05px 0;
	border: 1px solid #333;
}
    #wrap h5 {
  	   font: bold 1em arial;
  	   margin: 05px;
    }
         #wrap h5 span {
    	    color:#666;
          }
 
#spacer {
	clear: both;
}

خصائص كل من p و span لا توجد في نفس الترتيب مع #content .. ايضا span تتبع p لذلك لم اكتب

         #content span {
    	    color:#f00;
          }

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

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

css فن حقيقي، عندما ازور css showcase وهي مواقع تعرض اجمل المواقع المصممة ب css و xhtml، تزداد قناعتي من أن css فن جميل لا يختلف عن الرسم ..

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

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

استعمال class في css لا يعني ان تستخدم div بشكل كثيف في الموقع، اذا استطعت ان تعرض نصا أو عنوانا باستعمال h, p .. فهذا أفضل مليون مرة من استعمال div لاظهار فقرة مثلا ..

<div style="font: 1em arial; padding: .5em">
 text ..
</div>

عوض ذلك هذه هي الطريقة الأمثل لاظهار فقرة:

p {
	font: 1em arial;
	padding: .5em;
}

<p>
text ..
</p>

لا يوجد حدود أو قيود في استعمال css يمكنك انشاء موقع كامل بدون استعمال h, p, hr, label .. ويمكن تعويضها جميعا بوسوم div مع خصائص css لكن انذاك ستكون الصورة بشعة جدا وستفقد css رونقها وتميزها .. في البساطة والجمال والاختصار