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

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

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

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

ما أجمل الحصول على اتصال دائم بالأنترنت وأعني خارج المنزل كاستعمال iphone مثلا او اي هاتف يوفر خدمة الاتصال 24/24 ساعة، فستحتاج بالتاكيد للبحث عن معلومة وانت تتجول في الشارع، او يسالك شخص في مطعم عن شيء ما وتبحث عنه في ثواني معدودة، تقرا البريد وترد عليه وانت جالس على كرسي في الشارع العام، تتصفح مواضيعك المفضلة في google reader وانت ترتشف عصيرا في مقهى ..

اليس أمرا رائعاً

* الحمام هو مكان عمومي يقصده الناس للاستحمام، حتى ان توفرت لهم حمامات شخصية في المنازل، لأسباب عديدة، وهي ثقافة سائدة في كل من: المغرب، تونس، تركيا ..

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

 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

يمكن متابعة جديد مدونتي الشخصية عبر google reader او عبر خدمة rss مختلفة

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

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

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

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

صور شخصية:

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

مشاكل كثيرة حول هذا الموضوع، في منتدى wordpress لكن لم أعثر على حلول ..

http://wordpress.org/support/topic/190624
http://wordpress.org/support/topic/188747

تحديث:
ما زالت المشكلة مستمرة
هل صادفتكم نفس المشكلة أثناء الترقية الى الاصدار 2.6 ؟

حذفت كل الملفات ما عدا plugins و theme الخاص بالمدونة
ثم أعدت رفع نسخة جديدة من الملفات 2.6
حتى الان تبدو الامور جيدة

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

• css
• xhtml
• firefox 1.xx فما فوق
• IE 6 و IE 7

سأشارك الجميع بطريقة عملي، مثل تصميم نموذج لإضافة تعليق، كيفية استعراض التعليقات ..
استعمال Jquery أو Mootols مع css و xhtml

ملاحظة:
فتحت مدونة شخصية في Blogspot سأكتب فيها أخباري ومقالاتي الشخصية المتنوعة .. إن كانت تستحق الاهتمام هي الأخرى ..
عنوان المدونة

قمت بالكتابة عن رحلة قمت بها الى مدينة طنجة ..
يمكن متابعة مدونتي الشخصية عبر Google Reader وذلك لمعرفة جديد المواضيع ..

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

سنستعمل 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