خدمة SetCode ظاهرة جيدا ، تتيح لي كمستعمل ( مطور ) حفظ أوامري البرمجية التي أحتاجها يوميا في عملي، دراستي أو أبحاثي .. حيث يمكنني الوصول إليها بسهولة و إدارتها كما يحلو لي ، من حيث تحديد نوع اللغة، كتابة شرح مبسط أو وصف لهذه الأوامر .. و غير ذلك

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

حاليا تم إتاحة الموقع بثلاث لغات عالمية ( انجليزية – فرنسية و عربية ) وإن شاء الله لو قدر الله لنا البقاء سنتمم اللغات التي يحتاجها الأعضاء .

بالنسبة للمطورين الذين يريدون استعمال الخدمة في نطاق خاص بعيدا عن الموقع ، تم عمل API الخاص بـ SetCode ليستفيدوا منه، نحتاج فقط ترتيبه و سيتم نشره للجميع إن شاء الله  للاستفادة منه .

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

لن أطيل عليكم ، يمكنكم زيارة الموقع من خلال الرابط التالي : SetCode.net

كما يمكنكم الاشتراك في صفحتيه على Twitter , Facebook لمعرفة آخر المستجدات المتعلقة بالمشروع.

بالتوفيق للجميع

ما هو CVS ؟

CVS وهي مختصر لـ Concurrent Versions System ، نظام النسخ المتلاقية أو ما نعرفه جميعا بـ système de versionnage concurrentiel ،هو نظام مفتوح المصدر تم ترخيصه وفق GNU General Public License ، يقوم CVS بتتبع كل التغييرات في مجموعة من الملفات، خاصة في حالة مشروع برمجة تطبيق ، مع السماح لعدة مطورين بالتعاون. طـُوّر هذا النظام من قبل (Dick Grune) في 1986، ; لتعويض RCS -Revision Control System . يقوم cvs على الضبط و التحكم الجيد في الملفات المتعلقة بالمشاريع الخاصة بمطور واحد ، او الخاصة بفريق حيث يتيح للجميع المشاركة في هذا التطوير مع الاطلاع على اضافات و تعديلات كل مشارك في المشروع على حدى .. كان CVS يحتل شعبية كبيرة لفترة طويلة في عالم البرامج المفتوحة المصدر ، يمكننا اعتبار هذا النظام كمعيار لتكملة بعض بيئات التطوير مثل Eclipse ، JBuilder و Netbeans ، لكنه غير مدعوم عمليا من طرف الاصدارات الجديدة من المحررات البرمجية الجديدة ، لكن يمكن العمل به عن طريق الأداة tortoisecvs ، اما بالنسبة لطريقة استخدام هذا النظام فقد شرحها الأخ خالد الشمعة هنا جزاه الله خيرا ، فلا داعي للتكرار .

ما هو SVN ؟

SVN أو نظام الإصدار الجزئي (Subversion) هو نظام تحكم بالإصدارات ، انطلق سنة 2004 من احد مطوري CVS . يُستخدم هذا النظام للحفاظ على الإصدارات الحالية والقديمة للملفات ، كشيفرات مصدرية و صفحات ويب مرتبة حسب التاريخ و الأقسام التي قد ينشأها المطور ، هذا الترتيب يفيدك في حالة ما تم الاحتياج للرجوع إليها ، لو تم ارتكاب اخطاء خلال التطوير الحالي ، عدد كثير من المشاريع العالمية تم العمل بـ SVN فيها مثلPython, Apache, WordPress, Samba,Mono, GCC, KDE ، أيضا ممن يزود هذه الخدمة مواقع SourceForge و Tigris و google code لاستضافة مشاريعها المفتوحة المصدر،

لم أنتقل من CVS إلى SVN ؟

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

• يخول لي : مسح / اضافة / إعادة تسمية / نقل الملفات أو المجلدات على حدى .. بكل حرية و مرونة ما لا وجود له في CVS
• ينقل التعديلات الجديدة على ملفات المشاريع فقط ، وليس الملفات بأكملها التي تم تعديلها ، وهذا حل سريع و أكثر إنتاجية و سنستفيد منه لمعرفة التعديلات الجديدة بكل سهولة عكس CVS الذي ينقل الملفات المطورة بالكامل
• يدعم ملفات binnaires ، باختلاف أنواع الاصدارات
• يعمل بنظام trunk , branches, tags
• النظام الذي يتم دعمه من طرف جل المحررات البرمجية الكبيرة و المتقدمة مثل eclipse , phpdesigner

هذا ما جعل مؤسسوا SVN يطلقون أداة csv2svn للتحول إلى SVN

يمكنني القول أن cvs نظام محدود الخصائص عكس SVN الذي يحتل شعبية كبيرة الآن ، يمكنك العمل به من خلال أي محرر يدعمه مباشرة مثل phpdesigner ، أو eclipse أو يمكنك تحميل اداة TortoiseSVN لمستعملي windows التي تحررك من قيود المحررات ، و تضيف اليك خصائص جديدة و مريحة و كثيرة يتم دمجها مع نظام وندوز قد لا تدعمها المحررات المتطورة في التعامل مع المشاريع بواسطة SVN ،أما عن طريقة تثبيت و استخدام هذه الأداة فقد شرحها الأخ خالد الحوراني هنا مشكورا .

أخيرا فقد طرحت شركة O’Reilly كتابا يشرح نظام svn مجانا بنسخ الكترونية هنا ، اما لو أردت النسخة المطبوعة منه فيمكنك شراؤها من هنا .

آمل ان تكون قد استفدت مما كتبته اليوم ، واعتذر لتغيبي عن الكتابة مؤخرا بسبب احد المشاريع الخاصة التي سنطلقها قريبا بإذن الله ،

بالتوفيق للجميع

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if IE]></html><html class="ie">< ![endif]-->
</html>

كما تلاحظ ، لن يظهر الكلاس لغير الاكسبلورر بكل إصداراته ، و هنا يمكنني التخصص في تحديد الإصدار مثل :

<!--[if !IE]><!--><html><!-- <![endif]-->
<!--[if lte IE 6]></html><html class="ie6">< ![endif]-->
<!--[if IE 7]></html><html class="ie7">< ![endif]-->
<!--[if gte IE 8]></html><html class="ie8">< ![endif]-->
<!--[if gte IE 9]></html><html class="ie9">< ![endif]-->
</html>

وهكذا ببساطة يمكنني التنسيق هكذا :

#sidebar { width: 180px; }
.ie6 #sidebar { margin-right: -3px; } 
.ie7 #sidebar { margin-right: -1px; } 
.
.

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

بالتوفيق للجميع

انواع الخطوط

طبعا لا أحد يلزم علينا انواعا معينة من الخطوط ، ولكل أنواعه و مجموعته المفضلة من هذه الخطوط ، باستثناء القواعد التي تكلمنا عنها بالنسبة للغة العربية ، لكن ، عادة حتى تحصل على واجهات متناسقة و جدية نوعا ما ، حاول أن تجعل كل صنف معين من صفحتك بخط معين ، مثلا لو اخترت للعناوين خط times new roman فحاول أن لا تغير الخط في نفس التصنيف وهو العناوين ، كذلك الحال لو استعلمنا خط tahoma في التدوينات ، فمن الخطأ جعل خط آخر في محتوى الصفحات ، ببساطة لأنها من نفس تصنيف التدوينات ، ألا وهو المحتوى

الأحجام

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

الألوان

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

التغيير

لا تجعل كل الصفحة بنوع واحد من الخطوط ، فللتغيير حلاوة ، ولكن حاول ألا يطغى هذا التغيير ليصل إلى مهرجان من الأنواع داخل صفحتك

تنسيق المحتوى

عادة انحراف المحتوى إلى اليمين أو الشمال من المبتعد ، غالبا ما نستعمل

text-align: justify;

للتنسيق بين جميع الحواف و المعادلة بينها ، كما في أوائل الفقرات حاول استعمال

text-indent: 10px;

10px مثال فقط ، حيث تبعد السطر الأول عن هذا التسيق قليلا لنعلم الزائر بأماكن بداية الفقرات

الكلمات الهامة

نعم ، لتثير انتباه الزائر بأن الكلمة الفلانية مهمة بالنسبة له ، حاول استعمال بعض الخصائص لتثير هذا الانتاه ، مثل

font-style: italic;

أو

font-weight:  bold;

على حسب الموقع ، يمكنك ادخال خلفية لون بسيطة ، او سطر معين ، فقط لا تحاول تغيير حجم النص لأنك ستقع في حرج تداخل الكلمات و عدم الانتظام بين السطور

التنسيقات

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

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

كتابة selector على jQuery

توجد طريقتان وهي مبينة في السطرين التاليين :

$(selector)
jQuery(selector)

وهكذا اختار أي selector ه داخل صفحة الويب الخاصة بي ، مثال :

$("p").html("content");
jQuery("p a").mouseover();
$("div.class").fadeOut();
$("form#id").fadeIn();

طبعا حتى لا يكون هناك نوع من التكرار ، فجميع الـ selector التي بينتها في مقال css فيمكنني استعمالها هنا ، امثلة :

a[href^=http://]
input[type=text]
div[title^=example]
a[href$=.pdf]
a[href*=fez-soft.net]

وهكذا ،،، يمكنني أن أ ضيف بعض selector التي يمكنك استعمالها في المكتبة الغير مذكورة في مقال css :

li:has(a)

يتم تحديد كل قائمة li بداخلها رابط a ،بحيث يكون المحدد هو Li و ليس a ،وهنا ملاحظة ، فهذا الأمر هو بعكس الأمر التالي : li a ، حيث يتم تحديد كل a داخل li، لذا فالفرق بين الأمرين واضح

• :animated

  حيث يتم تحديد العناصر المتحركة بالحدث animate()

• :button

  تجمع لي جميع عناصر الـ input التالية : ( input[type=submit] , input[type=reset] , input[type=button] , button )

• :checkbox

  و التي عوضت (input[type=checkbox])

• :contains(fez-soft)

  كل عنصر يحتوي على كلمة fez-soft

• :disabled
  :enabled

  يتم تحديد العناصر المفعلة أو الغير مفعلة

• :file

  و التي عوضت الأمر التالي : (input[type=file])

• :header

  تحديد كل العناوين من h1 إلى h6

• :hidden

  تحديد كل العناصر المخفية

• :image

  عوضت التالي : (input[type=image])

• :input

  لكل انواع input

• :not(filter)

  لاختيار العكس ، مثلا لاختيار كل العناصر في input ، باستثناء checkbox يمكنني كتابة :

  input:not(:checkbox)

  نستعملها في تصفية selector و ليس في البحث عنه ، مثال خاطئ :

  :not(p:hidden)

  لأنني حاولت البحث عن عنصر p و ليس تصفيته ، و هنا الكتابة الصحيحة له :

  div p:not(:hidden)

  حيث قمت بتصفية hidden فقط

• :password 
  :radio
  :reset 
  :submit
  :text

  عوضت على التوالي :

  (input[type=radio])
  input[type=reset] , button[type=reset])
  input[type=submit] , button[type=submit]
  input[type=text]

كذلك :

• :selected // لتحديد العناصر التي تم اختيارها في قائمة select
  :visible  // العناصر الغير مخفية

لا انسى ان أنبه انه يمكنني أن اجمع بين اكثر من selector في سطر واحد مع احترام القواعد ، مثال :

:checkbox:checked:enabled

حيث تم تحديد عناصر checkbox المختاره و المفعلة ،

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

آمل أن تكون قد استفدت مما قدمته اليوم ، و اعتذر عن قلة الكتابة في الآونة الأخيرة لظروف و السلام عليكم ورحمة الله

بالتوفيق للجميع

1. ما هي القوائم ؟
2. انواع القوائم .
3. ضابط الاختلاف .
4. بعض الأفكارو الحيل .

ما هي القوائم؟

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

الكل منا يعرف كود html الخاص بعرض قائمة عادية وهو كالتالي :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

وهو كود عادي جدا ، يصلح لعمل قائمة متسلسلة ، و افتراضيا تكون عمودية

انواع القوائم .

من ناحيتين ، من ناحية الترتيب ، ومن ناحية التنسيق،

اما من ناحية الترتيب ، فهي تنقسم إلى :

• مرقمة : تكون على الصيغة التالية :

  <ol>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  يمكنني ان اتحكم في العدد الذي تبدأ منه بإضافة العنصر start :

  <ol start="3">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و كذلك نوع الترتيب ، هل هو رقمي أم أبجدي بإضافة العنصر type

  <ol type="1" start="1">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و بتغيير قيمة type الى 1 سنحصل على ترتيب رقمي ، و a أو A للترتيب الأبجدي اللاتيني ، و i أو I للترتيب الأبجدي الروماني

• غير مرقمة : وهي القوائم التي لا يوجد بها ترتيب في جانب العناوين ، وتكتب هكذا :

  <ul>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  افتراضيا ، تكون بجانب كل عنوان نقطة صغيرة ، يمكن التحكم في لونها و إظهارها من عدمه ، يمكن كذلك تغيير نوع النقطة بتغيير قيم العنصر Type :

  <ul type="disc">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  إلى disc للنقط السوداء ، او square لمربعات صغيرة ، أو circle لنقط فارغة ، عبارة عن دوائر

التقسيم من ناحية التنسيق ، وهذا الذي يهمنا بعد هذه المقدمة ، وهو الذي سنحتاجه بكثرة مشاريعنا :

• قوائم عمودية : قوائم عناوين يكون بعضها تحت بعض ، كما هو الحال في عناوين المدنة جانبا ( القيمة الافتراضية للقوائم )
• قوائم أفقية : و هي عبارة عن عناون بعضها بجانب بعض في مستوى واحد ، كما هو الشأن في رأس المدونة في العناوين الأفقية ،
• قوائم أفقية عمودية : وهو خليط من القوائم العمودية و الأفقية ، حيث نحاول ان نستغل المساحتين ، الأفقية و العمودية لمكان معين من الصفحة ، انظر مثال

ضابط الاختلاف .

و أنا أقصد به الضابط في الاختلافات بين القوائم من نوع التنسيق ، سنأخد مثالا لذلك ، لدينا هذا الكود الخاص بقائمة عناوين عادية :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

طبعا و بعد التنسيقات التي ستعملها من ألوان و border و مأثرات ، فإن الضابط لتتحكم في قائمتك من ناحية الاتجاه – أفقي أم عمودي – وهو قيم الخاصية float من كود css

ul li {
	float: right;
}

فإذا اعطيتم للـ float أي من right أو left فسيتم اعتبار هذه القائمة أفقية ، و البدأ من الاتجاه سيكن على حسب ما اعطيتها من اتجاه ، اما لو تم تجاهل الـ float و لم يتم اعطاؤها أي قيمة ، فهنا قائمتنا افتراضيا ستكون عمودية
طيب ماذا عن النوع الثالث وهو الخليط بين النوعين الفارط ذكريهما ؟؟
سأحاول شرح طريقة العمل في المثال السابق ، طبعا الاختلاف في التنسيق css :

ul {
	padding: 0;
	margin: 0;
	list-style: none; /* لنزع النقط السوداء الافتاضية بجانب العناوين */
	width:125px ; /* هنا العرض الاجمالي لكل القائمة  */
	border: 1px solid #ccc;
	font: 12px tahoma;
}
ul li {
	padding: 5px 10px;
	margin: 0 2px;
	float: right; /* اعتبارها أفقية مبدئيا */
	width : 36px;/* تحديد عرض كل قائمة على حدى */
	border-bottom: 1px solid #ddd;
}

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

بعض الأفكارو الحيل .

هنا سأضيف إلى معارفك فقط بعض التجارب و الأفكار و الحيل التي قد تفيدك في تنسيقاتك و أعمالك :

• حاول أن تجعل الفواصل بين القوائم ظاهرة و بينة ، ولا تجعلها مشتركة ابدا ، حتى لا يتوهم و يتم جمع أكثر من عنوان في عنوان واحد
• لا تستعمل القوائم بغير كود القوائم ، نعم هناك من يستعملها بغير الكود المخصص لها وهو ul او ol ، هناك من يستعملها بروابط عادية و يفصلها بعوارض مثل ( – ) أو هذه ( | ) كقوائم أفقية ، طبعا بغض النظر من ناحية الأرشفة التي يتضرر منها صاحب هذه القوائم ، فإن هذه الطريقة أصبحت تقليدية ولا تعطيك الحق للتحكم بقائمتك جيدا ، لذلك حاول أن تجتنب مثل هذه القوام التقليدية و التنسيقات القديمة ، و انتقل إلى بدائل لها في css ، مثلا border سواء على اليمين أو في الاسفل ، على حسب النوع ،

  ul li {
  	border-bottom: 1px solid #ddd; /* للقوائم العمودية */
  	border-right : 1px solid #ddd; /* للأفقية */
  }

• طبعا لا تنسى مراعاة الخطوط في قوائم و انواعها ، فلهذا تاثير كبير جدا جدا على نفسية الزائر ، يمكنك ان تزداد معرفة بهذا من هنا
• مراعاة قيم margin و padding على حسب نوع القائمة التي تعمل عليها ، يتجنب الالتصاق بين العناوين
• التوازي في التموضع ، وذلك باجتناب أمر position في القوائم ، حتى تبقى قائمتك متوازية ، إلا في بعض الحالات التي يكون فيها التصميم يستدعي استعمال هذا الأمر

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

في css2.1

• *
• <
• +
• [att]
• [att=val]
• [att~=val]
• [att|=val]
• :first-child
• :lang
• :first-line
• :first-letter
• :before و :after

في css3

• الجديد في att
• nth-child()
• ~
• :checked
• :empty
• الانتقاء بالاستثناء
• ::selection

الـ selecteur او في ترجمة حرفية ‘( المنتقى ) حيث يتم عملية من انتقاء العناصر عن طريق قواعد محددة و مراحل تم تطويرها في لغة css ، فمثلا لما أكتب التالي :

h1 { color: red; }
h2 { color: red; }
h1, h2 { color: red; }

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

h1 { font-family: sans-serif; }

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

في css2.1

• * : هذه تدل على الكل ، حيث يتم انتقاء كل ما هو من نفس الكلاس أو id

  *.warning
  .warning
  /* السطرين متساويين */

  لكنها لا تستعمل كثيرا لانها توافق التي بعدها .

• < : او ما تسمى بانتقاء الابن ، حيث لا يتم اختيار من عنصر معين إلا العناصر التي هي عبارة عن طفل بداخله ، مثال :

  <div class="text">
  <p>je m'appel <strong> mohamed chater </strong></p> 
   en plus mon pseudo <strong>Fez-Soft</strong>
  </div>
   
  و التنسيق :
  <pre lang="css">
  .text > strong { background-color: blue; }

  حيث ان الخلفية الزرقاء لن تطبق على جميع strong و انما فقط على الذي هو طفل بداخل div.text وهو mohammed chater بينما لن تطبق على Fez-Soft لانه ليس بابن داخل النص ،

  خاصية الانتقاء الابن غير مدعومة في ie6

• + : او ما يسمى بالانتقاء بالتتابع ، حيث أنني لما اكتب التالي :

  h1 + h2 { background-color: blue; }

  فإنه في الأمر التالي سأطبق خلفية زرقاء على العناوين من نوع h2 التي تتبع h1 ، اما التي لا يسبقها h1 فلن يطبق عليها شيء من هذا السطر ،
  هذه كذلك غير مدعومة من ie6

• [att] : حيث نعين العنصر أولا ، ثم نوع attribut التي لابد من أن يتوفر عليها ليطبق عليه التنسيق ، مثال :

  a[title] { background-color: red; }

  سيتم تطبيق الخلفية الحرماء على الروابط التي تحتوي على وصف title ، أما اللتي لا تحتوي على الوصف title فلن يتم تطبيق التنسيق التالي عليها

• [att=val] : زيادة في التعمق في الشروط ،فإننا نشترط على العنصر الفلاني أن يحتوي على attribut الفلاني بالقيمة الفلانية ، مثلا

  a[rel=external] { background-color: red; }

  حيث لن يتم تطبيق الخلفية الحمراء إلا على الروابط التي بها rel="external"

• [att~=val] : مثل التي قبلها تماما ، إلا انها تدعم القيم التي بينها مسافة ، مثلا في كود html عندنا التالي :

  <p class="all text"></p>

  حيث توجد مسافة بين text و all ، وهذا ما يميز هذا الانتقاء عن الذي قبله ، انه يأخذ القيم ولو كان بينها مسافة ، فيكون في قيم التنسيقات التالي :

  p[class~=all] { background-color: red; }

• [att|=val] : هنا يتم انتقاء العناصر التي في قيم أوامرها عارضة صغيرة ( – ) ، مثلا :

  a[hreflang|=en] { background-color: red; }

  حيث ان الروابط التي تكون بها عناوين المواضيع تكون بها عوارض صغيره للفصل بين الكلمات ، كذلك نوع اللغة ، يكون مثلا en-US أو en-GB
  ملاحظة ، لا ننس أنه بإمكاننا الجمع بين أكثر من انتقاء في سطر واحد :

  a[title][rel~=external] { background-color: red; }

:first-child : و تطبق على اول عنصر طفل في مجموعة العناصر الموجودة ، مثلا :

div > p:first-child { text-indent: 10px; }

• :lang : انتقاء باللغة ،

  p:lang(en) { background-color: red; }

  حيث في بعض المرات ، نضطر إلى عمل جملة بلغة أخرى و نعطيها قيمتها في lang

• :first-line : انتقاء السطر الأول من فقرة معينة لإعطاءه تنسيقا معينا :

  p:first-line { text-transform: uppercase; }

• :first-letter : انتقاء الحرف الأول فقط من كلمة الأولى في فقرة :
• :before و :after ، لا داعي للتكرار ، فقط فصلت فيهما جيدا مع المثال في هذا الدرس

إلى هنا أكون قد انهيت الانتقاء و انواعه في css2.1 ، للنتقل للجيل الجديد .

في css3

• الجديد في att : و هي ثلاثة اوامر ، اثنان منها ستجدها مفصلة في هذا الدرس ، او بطريقة جافا سكربت ، و الثالث هو [att*="val"] ، حيث يتم انتقاء العناصر التي التي تحتوي على الأقل كلمة من سلسلة الكلمات التي اشترطتها في التنسيق :

  a[title*="hello"] { font : 12px verdana }

  سيتم تطبيق التنسيق فقط على الروابط التي بها وصف title تكون فيه كلمة hello

• ~ : حيث يتم الانتقاء عبر التتابع ، مثلا /:

  div~img { border: 1px solid #ccc; }

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

• nth-child() : لانتقاء العناصر الصغيرة ن داخل ( جدول مثلا ) عن طريق ترتيب ، هل هو فردي ام زوجي ، مثلا ، عندي جدول و به عدد من الأسطر ، فاول سطر فردي لانه رقم 1 ، و الثاني زوجي لأنه رقم 2 و هكذا ، فردي زوجي ، قد احتاج لإعطاء جداولي نوعا من التنسيق الديناميكي الذي يتتبع نوع الترتيب ،
  سنتذكر هنا شيئا من الرياضيات ، حيث الأعداد الفردية نرمز لها بـ 2n+1 و الزوجية بـ 2n ، سنحتاج هذه القاعدة ، إليك الامثلة :

  tr:nth-child(2n+1) /* الأسطر التي في ترتيب فردي */
  tr:nth-child(2n) /* الأسطر التي في ترتيب زوجي */

  كما يمكنني الرمز للفردي بالقيمة odd و الزوجي بالقيمة even

  tr:nth-child(odd) /* الأسطر التي في ترتيب فردي */
  tr:nth-child(even) /* الأسطر التي في ترتيب زوجي */

• :checked : حيث يتم الانتقاء عن طريق العناصر المعلمة في حالة cheked مثل input
• :empty : حيث يتم انتقاء العناصر الفارغة ، التي ليس يها محتوى أو أي قيمة ، وكذلك العناصر التي ليست من فئة ابن، يعني لا تتبع أي عنصر ققبلها
• الانتقاء بالاستثناء : حيث يتم الانتقاء عن طريق استثناء عنصر معين ، او كلاس معين ، مثلا :

  p:not([class*="lead"]) { color: black; }

  سيتم تطبيق اللون الأسود في الكلمات التي في كل الفقرات ما عدى الفقرة P التي تأخد الكلاس lead

• ::selection ، هنا يتم انتقاء العناصر التي في حالة select ، مثلا عندها نختار جملة معينة من نص معين لنسخها ، في هذه الحالة سأطبق عليها تنسيقا خاصا بها :

  ::selection { background-color: red; }

  إلى هنا ، آمل أن اكون قد بينت الأصول في selecteur على أمل الالتقاء في درس آخر إن احيانا الله عز وجل
  و السلام عليكم ورحمة الله وبركاته

مثال : Demo

اضغط هنا لزيارة صفحة المثال

الشرح :

طبعا ، حتى اتمكن من إظهار محتوياتي كما أريد و بكل حرية ، لابد ان تكون النافذة من نوع div عادية ، و ليس من نوافذ الجافا سكربت المعروفة ، لذلك سأستعمل هذا الكود html لعرض النافذة ، وما بداخلها :

<div id="hideshow" >
	<div id="fade"></div>
 
	<div class="popup_block">
		<div class="popup">
			<a id="aa" href="javascript:hideDiv()">
				<img src="images/close.png" class="cntrl" title="أغلق" />
			</a>
			<h3>عنوان</h3>
			<p>هنا المحتوى او النص</p>
 
		</div>
	</div>
</div>

تم استعمال صورة واحدة ، و هي صورة إغلاق النافذة ، ستجدها هنا :
سأجعل للنافذة زرا كالتالي :

<a href="#" id="ee">اضغط هنا لإظهار النافذة</a>

طبعا بعد ملأ الصفحة بالمحتويات ، هذا فقط مثال ،
تنسيقات css :

/*
	** Fez-Soft
	** 2009
 
*/
body {
	height: 100%;
	margin: 0;
	padding: 40px;
	font:  12px tahoma;
	background: #eee;
	position: relative;
}
 
h1 ,  #ee{
	font:24px "times new roman";
}
img {
	border: none;
}
#hideshow {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#fade {
	background: #000; 
	position: fixed; 
	width: 100%;
	height: 100%;
	filter:alpha(opacity=80);	/* الشفافية من جيل css3 */
	opacity: .80;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 شفافية --*/
	left: 0;
	z-index: 10;
}
.popup_block {
	background: #ddd;
	padding: 10px 20px;
	border: 10px solid #fff;
	float: left;
	width: 480px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin: 0 0 0 -250px;
	z-index: 100;
 
}
.popup_block .popup {
	float: right;
	width: 100%;
	background: #fff;
	margin: 10px 0;
	padding: 10px 0;
	border: 1px solid #bbb;
}
.popup h3 {
	margin: 0 0 20px;
	padding: 5px 10px;
	border-bottom: 1px solid #bbb;
	font: 18px "times newroman";
}
.popup p {
	padding: 5px 10px;
	margin: 5px 0;
	font: 12px tahoma;
}
.popup img.cntrl {
	position: absolute;
	right: -20px;
	top: -20px;
}

عادي جدا ، تم استعمال الشفافية فيه من css3 ، بالنسبة لل ie6 لن أضع له أي ترقيع هنا ، مع انني عملته ، لأنني قررت ألا أدعمه في الدروس ، لعلنا نتقدم بمتصفحاتنا و تفكيرنا

بالنسبة لكود jQuery فهو كالتالي :

jQuery.fn.fadeToggle = function(s, fn){
   return (this.is(":visible"))
   ? this.fadeOut(s, fn)
   : this.fadeIn(s, fn);
};
 
$(document).ready(function(){
    $("#hideshow").hide();
    $("#ee").click(function () {
      $("#hideshow").fadeToggle(2000);
	});
	$("#aa").click(function () {
      	$("#hideshow").fadeOut(2000);
    });
});

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

اتمنى التوفيق للجميع في مشاريعه
و السلام عليكم ورحمة الله وبركاته

1. مقدمة
2. على مستوى Html
3. على مستوى الملفات
4. على مستوى السيرفر :
   • طريقة php
   • طريقة Apache
5. على مستوى قاعدة البيانات
   • من خلال الحقول champs
   • من خلال الاتصال بالقاعدة
6. ملاحظات

مقدمة :

باختصار شديد ، فإن المتصفح لما تطلب منه صفحة ويب معينة ، فإنه إذا وجد انه static فسيقوم بتحليلة بطريقة عادية بالنظر في وسم meta ، اما لو كان الملف الذي يتم اسدعاؤه عبارة عن تطبيق dynamic فإنه يتم تحليل رأس التطبيق – l’en-tête

على مستوى Html

لتتمييز ترميز معين لصفحة ويب معينة عن طريق html ، فالطريقة سهلة حيث نقوم بتغيير الترميز في وسم meta إلى utf-8 هكذا :

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

على مستوى الملف

هذه الطريقة تعتمد على تحليل البتات لكل حرف ، وهذات يختلف من ترميز لآخر ، و لنتمكن من تحويل طبيعة الملف إلى الترميز utf-8 فنتتبع الطرق التالية :

• phpdesigner : نذهب من القائمة المنسدلة إلى file -> file encoding ->UTF-8
• NotePad ++ : نذهب إلى Format -> Encoder en UTF-8 (sans BOM)
• المحرر العادي للويندوز : file -> save as و اختر utf-8 من قائمة الترميزات

على مستوى السيرفر :

header( 'content-type: text/html; charset=utf-8' );

echo utf8_decode( 'هنا النص' );

AddDefaultCharset utf-8

$link = mysql_connect('localhost', 'user', 'password');
mysql_set_charset('utf8',$link);

mysql_query("SET NAMES 'utf8'");

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