cssbit 2.0

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

سنتعمل (كما يمكن الاستغناء) ما يلي:

 form, label, input, textarea, select ..

إدراج form بريدي ب xhtml سهل وبسيط ..

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

ساحصل على form به حقلين هما الاسم والبريد الالكتروني مع زر الارسال، سيظهر كل حقل تحت الاخر لانني استعملت br لكي انقز سطرا واحدا
كما في الصورة التالية:

ملاحظة:
يمكن استعمال كل من: ul li بحيث يظهر كل حقل بين li كما يمكن استعمال p لكل حقل ..

سأضيف الوسم label لكي أنسق كل من الاسم والبريد الالكتروني:

<label>name</label> 
<label>email</label>

ثم أضيف بعض الخصائص بعد ان اكتب الكلاس الجديد الخاص بهذا الجزء والذي سيكون كالتالي:

/* si, j'ai le classe #main */
#main form label {
}
 
form label {
}

التعليق الذي أضفته يشرح فائدة #main حيث انني وضعت form بين class كما يلي:

<form method="post" action="#">
 <label>name</label><br />
 <input type="text" name="name" /><br />		     
 <label>email</label><br />
 <input type="text" name="email" /><br />		     
 <input type="submit" value="send" />
 </form>

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

نعود الى الوسم label، اضفت له خلفية بلون رمادي ..

#main form label {
	background: #eee;
}

ملاحظة:
يمكنك حفظ بعض الالوان لاستعمالها عند التصميم، مثل درجات الرمادي وهي سهلة جدا ..

ما دمت استعملت br فلماذا لا اضيف لها خصائص في css ؟ br لها خصائص معينة تأتي افتراضا او default مثل margin مثلا ..
على كل ساضيف لها خصائص وطبعا لل br التابعة ل form التابع ل main
حتى لا تظهر الخصائص على باقي br المستعملة في باقي الموقع، ان كان لديك محتوى اسفل form او شيء آخر

#main form br {
		margin: 10px 0;
}

ساخذف لون الخلفية من label كان الهدف هو ان اوضح اين هي label في form ..
وبدلا من ذلك أضفت لون للكتابة وغيرت شكل الحروف حيث الحرف الاول في العبارة سيكون Capital (لا تستعمل مع العربية)

#main form label {
 color:#919191;
 text-transform: capitalize;	
}

لحد الان، ال form البريدي يبدو بهذا الشكل:

سأضيف أيضا بعض الخصائص للحقول input، جميع الحقول التي على شكل input (الاخرى هي textarea, select ..) ستأخذ هذه الخصائص ..

#main form input {
		padding: .2em;
		color:#2066BC;
}

اذا اردت ان اغير خصائص حقل واحد او حقول معينة سأضيف لها class كالتالي:

<input type="text" name="name" class="name" /><br />

وفي كود css سيكون لدي ما يلي:

#main form input.name {
		padding: .2em;
		color:#2066BC;
}

وبالتالي سيظهر اللون الازرق و padding على حقل الاسم فقط ..

بالنسبة لي، ساضيف class بهذه الطريقة

<input type="submit" value="send" class="submit" />

وكذلك

<input type="text" name="name" class="text" /><br />
<input type="text" name="email" class="text" /><br />

كود css:

#main form input.text {
 padding: .2em;
 color:#2066BC;
 width: 320px;
 border: 2px solid #eee
 
}
#main form input.submit {
 margin: 10px 0 0;
 
}

بالنسبة لحقلي الام والبريد، وضعت لهما عرض جديد 320 px و border بقيمة 2px بلون رمادي فاتح ..
أما زر الارسال فتركته كما هو، فقط اضفت له قيمة 10px لينزل قليلا عن الحقل ..

ملاحظة:
تذكر انك لست ملزما بالتقيد بما اختاره من شكل والوان، وان الهدف هو ان تقوم بنفسك باختيار تنسيق والوان مختلفة حسب رغبتك ..

شكل form الجديد:

شخصيا، احب إضافة تاثيرات لكل ما اقوم بانجازه ..

#main form input.text:focus {
  border:2px solid #96CFE9
}

اذا كان لديك حقول اخرى من نوع password مثلا عليك تحديد ذلك هكذا:

#main form input[type=text]:focus {
  border:2px solid #96CFE9
}
#main form input[type=password]:focus {
  border:2px solid #96CFE9
}

ملاحظة:
ستضيف [type=text] للحقل، في حالتي لم استعمله لان كل الحقول من نوع text ولا يوجد لدي حقل من نوع password ..
للاسف هذا التأثير لن يظهر على IE6 و IE7 .. لكنه يظهر على جميع اصدارات FF، كما توجد طريقة ب javascript لصنع نفس التأثير على ie

التاثير الذي اضفته يجعل إطار الحقل يتغير عند الضغط عليه لكتابة شيء فيه ..
صورة توضيحية:

بعد ذلك يمكن إضافة خصائص لزر الارسال:

#main form input.submit {
  margin: 10px 0 0;
  background: url(images/submit.gif) repeat-x left center;
  border: 1px solid #eee;
  padding: .2em;
  color:#ccc;
}

ومرة أخرى، اضيف تأثيراً لزر الارسال، (يعمل على FF و IE7 بينما غير متوافق مع IE6)

#main form input.submit:hover {
 color:#333;	
 border: 1px solid #C3C3C3;
}

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

#main form input.submit {
  cursor: pointer;	
}

ملاحظة: كثير من الناس لا يستعملون :focus و :hover، ربما تكون هذه بداية لاستعمالها في اشياء كثيرة جدا

صورة:

• العمل النهائي
• تحميل الملفات

حقوق الدرس ل cssbit

صورة مكتب مطور الويب الإيطالي الشهير Antonio Lupetti
كما كتب في مدونته، فهو يستعمل laptop من apple، غرفة أنيقة من ناحية الألوان والديكور، لكن أحس أنها مليئة بالأغراض، أقترح على antonio أن يتخلص من أشياء كثيرة

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

الصورة الأصلية
وجوه مبرمجين:

باقي الوجوه هنا، ملامح المبرمجين تبدو مختلفة عن بقية الناس ؟؟

صور شخصية:

بعض من الصور التي التقطتها في البحر

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

1
2
3
4
5
6
7
8

<table>
 <tr>
  <td>cssbit@gmail.com</td>
  <td><img src="pencil.gif" alt="" /></td> 
  <td><img src="trash.gif" alt="" /></td> 
  <td><img src="search.gif" alt="" /></td> 
 </tr>
</table>

صورة:

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

< ?php while($row = mysql_fetch_object($result)) { ?>

1
2
3
4
5
6

 <tr>
 <td>cssbit@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

بما أن هذا مجرد مثال ولن استعمل جدول SQL لاجلب منه البيانات، فيمكنني كتابة الاسطر السابقة هكذا:

< ?php $user = array('sql','cssbit','php','xhtml','ruby') ?>
< ?php for($i=0;$i&lt;5;$i++) { ?>

1
2
3
4
5
6

 <tr>
 <td>< ?=$user[$i]?>@gmail.com</td>
 <td><img src="pencil.gif" alt="" /></td> 
 <td><img src="trash.gif" alt="" /></td> 
 <td><img src="search.gif" alt="" /></td> 
</tr>

< ?php } ?>

الهدف هو ان أجعل PHP يقوم بتكرار البيانات لي، بدل ان اكررها بنفسي باستعمال XHTML ..

كود css:

#main table {
 border: 1px solid #BED8E9;
 width: 100%;
 font-size: .9em;
 margin: 10px 0 0;
}
#main table {
 background: #fff;
 font: .78em "Lucida Sans Unicode";
}
#main table tr td {
 padding: .2em;
 color: #333;
 text-align: center;
}

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

أضفت تاثير بسيط (يعمل مع FF و IE 7 .. لن يظهر مع IE6) بحيث تظهر خلفية بلون ازرق فاتح عند المرور على البيانات بزر الفأرة cursor ..

#main table tr:hover {
 background: #E4EFF6;
 color: #000;
}

البيانات التي في الجدول ستظهر في الوسط، كان الهدف هو اظهار الايقونات في الوسط ..

#main table tr td {
 text-align: center;
}

لذلك أفضت class جديد تابع ل email ..

 <td class="left">$user@gmail.com</td>

كود css:

#main table tr td.left {
 text-align: left;
}

بعد إضافة نصوص وصور و Fix للمتصفحين IE 6 و IE7 احصل على هذا الجدول ..

بعض الصور لن تظهر بشكل شفاف على IE6 لأنها بامتداد PNG

• demo
• تحميل الملفات

يجب حفظ الصفحة بامتداد PHP لكي يعمل التكرار .. او تكرار البيانات ب xhtml وحفظها بامتداد html

حقوق الدرس محفوظة ل cssbit

عند برمجة تطبيق معين ستحتاج الى تقسيم النتائج لاظهار 10 او 15 نتيجة فقط في الصفحة الواحدة، يمكنك باستعمال css ان تضيف لمسات فنية جميلة على الارقام، بدل اظهارها بشكل جاف: 1 2 3 4 .. الخ

سنستعمل ul و li لاظهار قائمة أفقية تحتوي على الأرقام ..

<!-- #start pagination -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<!-- /end -->

هكذا ببساطة شديدة ..
كود css

#main ul {
   border: 0px solid #ddd;
   list-style: none;
   padding: .5em;
}
 
#main ul li {
   display: inline;
   padding: 0em
}

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

<ul>
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">..</a></li>
</ul>

كود css

#main ul li a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #eee;
  color:#333
}
 
#main ul li a:hover {
  border: 1px solid #4DADDA;
  padding: .1em .4em;
  text-decoration: none;
  background: #C0E2F2;
  color:#217398
}
 
#main ul li.active a {
  border: 1px solid #ddd;
  padding: .1em .4em;
  text-decoration: none;
  background: #fff;
  color:#000;
  cursor: default; /* active page */
}

يمكن تغيير الالوان والحجم وشكل الخطوط بسهولة ..
مع إضافة بعض النصوص والصور ..

• الشكل النهائي
• تحميل الملف

@ حقوق الدرس محفوظة ل : cssbit

اي مطور ويب يرغب في تعلم التقنيات الحديثة او تطوير مهاراته سيلجأ للمواقع الاجنبية، لأنه يعلم ان المصادر العربية قليلة، نادرة، قديمة، وتنسخ عن المواقع الاجنبية ..
فكم مدونة عربية مثل 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، صدفة جميلة

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

ترتيب ملف 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 فانا اكتب للزوار قبل ان اكتبه لصاحب الموقع نفسه .. اعتقد ان التفكير بهذه الطريقة سيجعلنا نقدم عملا أفضل وأكثر جودة ..