التدوينات الموسومة بـ ‘css’

الميزات الجديدة في Firefox 3.1 beta

الأربعاء, 15 أكتوبر, 2008

السلام عليكم ورحمة الله وبركاته،

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

( اكمل قراءة التدوينة )

تعلم الويب 2.0 – 2

الإثنين, 13 أكتوبر, 2008

السلام عليكم،

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

شاهدنا في التدوينة السابقة قائمة مختصرة بأهم المصادر لتعلم الويب 2.0، أما الآن سأعرض قائمة مطولة بالمواقع والمدونات التي تجد فيها ماتريد في عالم التطوير، وسأضيف عليها بشكل دائم كلما وجدت مصدر مميز

( اكمل قراءة التدوينة )

محررات النصوص الغنية

الإثنين, 22 سبتمبر, 2008

بسم الله الرحمن الرحيم،

مقدمة:
موضوعنا اليوم مهم جداً لمطوري الويب وهو محررات النصوص الغنية أو المتقدمة ويطلق عليها باللغة الإنجليزية (Rich Text Editors) واختصاراً (RTE). محررات النصوص الغنية تمكنك من كتابة نص وتنسيقه (تغيير لون الخط وتكبير بعض الأحرف)لكي يخرج لنا نص بصيغة قابلة للقراءة بسهولة وبشكل جذاب ومن الأمثلة عليه برنامج الوورد (Word). لكن حديثنا اليوم عن محررات النصوص المتقدمة الخاصة بالويب والفرق بينها وبين محررات النصوص العادية أن الناتج يكون عبارة يكون عبارة عن وسوم HTML وماتراه وتحرره عبارة عن معالجة لهذه الوسوم فيظهر لك النص بشكله المنسق ولذلك يطلق عليها (WYSIWYG) أي “ماتراه هو ماتحصل عليه” وبذلك يمكنك استخدامها في مواقع الويب.
( اكمل قراءة التدوينة )

أشهر أطر العمل التي تهم مطوري الويب

الأحد, 3 أغسطس, 2008

بسم الله الرحمن الرحيم،

قائمة بأهم وليس جميع أطر العمل التي تهم مطوري الويب.

PHP

CakePHP: الأفضل من يبن الأطر.
CodeIgniter: يأتي في المرتبة الثانية بعد الكيك والبعض يفضله عن الكيك!
Fusebox: لم تسنح لي الفرصة لتجريبه.
PhpOpenbiz: مخصص للأعمال (Business) لم تسنح لي الفرصة لتجريبه.
Symfony: لم يعجبني موقعهم لذلك لم أجربه :-) ولكن يقال عنه بأنه جيد.
Zend: بدأت به ولكن لم يعجبني لأسباب كثيرة، أهمها هو أنه عبارة عن مجموعة مكاتب برمجية ويدعون أنه إطار عمل، هو عبارة عن امتداد لمكتبة PEAR، وبنية MVC فيه عبارة عن دعاية أكثر منها بنية حقيقية.
ZooP: تطويرهم بطىء إذ لحد الأن لم يصدر سوى ثلاث إصدارات من 2005 ولم تسنح لي الفرصة لتجريبه ولن أجربه :-) .

Javascript

jQuery: الخيار الأفضل، سريعة، سهلة، مئات الإضافات باختصار رائعة.

mootools: ممتازة ولكن إمكانياتها وإضافاتها أقل من jQuery
Prototype: من أوائل أطر العمل ولذلك أخذ شهرة واسعة وهذا لايغني عن القول بأنها قوي، ولكن شعبيته بدأت تضعف بعد ظهور jQuery
YUI!: أكبر من مجرد مكتبة جافاسكربت، معقدة وبطيئة.
dojo: كودها بشع!، وملئية بالأخطاء البرمجية
GWT: أكبر من مجرد مكتبة جافاسكربت، لم تسنح لي الفرصة لتجربتها كثيراً بما أن الغوغل محجوب عندنا لأنها تعتبرنا دولة إرهابية!
Rico: جيد ولكنه بسيط جداً لايوفر سوى القليل من المهام.
Ext: خيالية للتطبيقات الكبيرة!

CSS

YAML (Yet Another Multicolumn Layout)

Blueprint

أحضر تدوينة فيها مقارنة بين الأطر التالية (CakePHP -CodeIgniter – Zend) لذلك من يريد التفاصيل فلنتظر هذه التدوينة.

اختصارات ال CSS

الإثنين, 21 يوليو, 2008

مجموعة اختصارات عند كتابتك لملف css

1- اختصار ال margin وال padding
بدلاً من كتابة:

div {
margin-top: 5px;
margin-right: 8px;
margin-bottom: 3px;
margin-left: 4px;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 4px;
}

نكتب التالي:

div {
margin: 5px 8px 3px 4px;
}
div {
padding: 5px 8px 3px 4px;
}

حيث الاختصار يكون دائماً بالترتيب التالي: Top – Right – Bottom – Left

2- الإطار:
بدلاً من:


div {
border-width: 3px;
border-style: solid;
border-color: #c00;
}

نكتب:

div { border: 3px solid #c00; }

3- الخلفية:
بدلاً من:

div {
background-color: #fff;
background-image: url(../images/bg.gif);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: top center;
}

نكتب:

div { background: #fff url(../img/bg.gif) repeat-y fixed top center; }

4- الخط:
بدلاً من:


p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: small;
line-height: 1.2em;
font-family: Helvetica, Arial, sans-serif;
}

نكتب:

p { font: italic small-caps bold small/1.2em Helvetica, Arial, sans-serif; }

كيف أصنع ملف css للطباعة؟

الأحد, 20 يوليو, 2008

السلام عليكم،

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

أما الأن فبكل بساطة يمكنك كتابة ملف css صغير يقوم بالمهمة كلها ولكل صفحاتك.

إذاً ماهي الخطوات اللازمة لعمله؟

1- ربط الملف الخاص بالطباعة مع الصفحة:

لاحظ استخدام media وتحديدها ب print حيث يقوم المتصفح تلقائياً عند طباعة الصفحة بأخذ التنسيقات من هذا الملف.

2- تحديد مجال ملف css الرئيسي:
بفرض أن ملف ال css الرئيسي لدينا اسمه style.css يجب أن نحدد مجاله بالشاشة حتى لايتعارض مع ملف الطباعة السابق

لاحظ أننا حددنا مجالها بإعطاء ال media قيمة screen أي الشاشة المرئية فقط.

3- إخفاء بعض العناصر:
بعض العناصر الموجودة في الصفحة لايجب أن تظهر وقت الطباعة مثل منطقة الهيدر (الموجود به شعار مدونتي) والروابط الجانبية … أي عند طباعة الملف نريد فقط المحتوى الرئيسي الموجود في الصفحة لبطاعته ولانريد طباعة روابط وتصنيفات !


#navigation, #blogroll {
display: none;
}

4- تكبير الخط:
يجب أن تكبر الخط قليلاً ليظهر واضحاً عند الطباعة فالحجم عند قراءته على الشاشة مناسب ولكن عند طباعته يظهر صغيراً للقارىء


body {
font-size: 120%;
line-height: 130%;
}

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


body {
font-size: 12pt;
line-height: 18pt;
}
body #container {
margin: 1in 1.2in .5in 1.2in;
}

ملاحظة: لن أكتب ملف طباعة خاص بالمدونة وسأخبركم عن السبب في وقت لاحق ;-)

أوراق المساعدة

الخميس, 17 يوليو, 2008

السلام عليكم،

درج في الأونة الأخيرة موضة جديدة وهي “أوراق المساعدة” (Cheat Sheets) أعرف أن الترجمة خاطئة ولكني لن استخدم مفهوم “أوراق الغش” فهو ينافي ديننا وقيمنا.

تحتوي أوراق المساعدة على أهم خصائص هذه اللغة أو التقنية … حيث تستطيع بسرعة معرفة ماتريد.

ملاحظة: بإمكانك تعليقها على حائط غرفتك أو وضعها كخلفية للشاشة.

1- Regular Expressions Cheat Sheet V2

2- mod_rewrite Cheat Sheet V2

3- PHP Cheat Sheet

4- CSS Cheat Sheet

5- SEO Cheat Sheet

6- Mysql Cheat Sheets

7- Python Quick Reference

8- Subversion Quick Reference

9- Eclipse

10- Google Cheat Sheet

11- The WordPress Help Sheet

12- Graphical vi-vim Cheat Sheet and Tutorial

13- Drupal Cheat Sheets

14- C++ Quick Reference Sheet

تشكيلة مواقع للقوالب المجانية

الثلاثاء, 15 يوليو, 2008

تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 2.0

1- StyleHoust

StyleHoust

2- CssTemps

CssTemps

3- Open Source Templates

Open Source Templates

4- Free CSS Templates

Free CSS Templates

5- Open Designs

Open Designs

6- OSWD

OSWD

7- Open Web Design

Open Web Design

8- Studio 7 Designs

Studio 7 Designs

9- Template Yes

Template Yes

10- TriStar Webdesign

TriStar Webdesign

11- Free Layouts

Free Layouts

12- Free Css Templates

Free CSS Templates

13- Free Templates Online

Free Templates Online

14- Theme Base

Theme Base

أسرار نجاح المدونات العربية

السبت, 12 يوليو, 2008

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

وبالفعل أود أن أشكره من صميم قلبي على هذه الفكرة الجميلة.

أسرار نجاح المدونات العربية

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

إذاً ماهي أهم أسرار نجاح المدونة:

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

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

1- مجال المدونة يجب أن يكون مجالاً تبرع فيه أو تحب متابعته أو تعمل به.

2- تأكد من هذا المجال له شعبية لا بأس بها فمالفائدة من مدونة لايزورها أحد !!

3- عدم وجود مدونة آخرى تنافسك يضمن لك انتشاراً واسعاً وسريعاً، طبعاً ممكن أن تنشيء مدونة موجودٌ مثلها من قبل ولكن عليك أن تكون متميزاً بشيء عنها أي أن تقدم شيئاً جديداً تستطيع أن تنافسها به.

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

2- التصميم الجيد: كم عدد المرات التي زرت فيها موقعاً ووجدته سيء التصميم وبشع المظهر وتمنيت لو أنك لم تدخل إليه، للأسف هذا منتشر جداً في عالمنا العربي، حاول أن يكون أن تصنع تصميماً جميلاً إذا كان ذوقك الفني عالياً أو استخدم تصميماً جاهزاً فهنالك المئات من التصاميم الجاهزة والمجانية للمدونات2 واختر ألواناً تعكس طبيعة المدونة3

3- المحتوى: حسناً مدونتك أصبحت جاهزة للعمل ولكن ينقصها شيء مهم ألا وهو المحتوى. قم بتجميع بعض المقالات السابقة التي كتبتها أو اكتب بعض المقالات وقم بنشرها تباعاً ولاتنشرها دفعة واحدة لسببين:

1- في جلسة واحدة سيمل القارىء من متابعة المواضيع الأخيرة بعد أن قرأ مواضيعك الأولى.

2- عليك أن تخبىء بعض المقالات للأيام القادمة فإن نشرتهم دفعة واحدة ستفقد مخزونك كله.

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

4- اللغة السليمة: نقطة مهمة جداً خاصة لنا نحن العرب، فدائماً مانشاهد أخطاء المدونين اللغوية، حاول قدرالإمكان أن تكون لغتك سليمة وأن تكتب بالفصحى فأبناء المغرب لايفهمون عامية أهل المشرق والعكس صحيح أما الفصحى فالكل يفهمها. وأقرأ ماكتبته مرتين أو أكثر للتأكد من خلو هذا المقال من الأخطاء اللغوية.

5- المقال الجميل: هل يوجد مقال جميل وآخر قبيح؟ نعم يوجد وإليك بعض النصائح لكي يبقى مقالك جميلاً:

1- عند وضعك لصور في مقالة ما استخدم صوراً صغيرة ولكن واضحة واجعل الصورة الكبيرة تظهر فقط عندما يضغط الزائر على الصورة الصغيرة. فبهذه الطريقة تسرع تحميل الصفحات للزوار وتخفف من استهلاك تبادل معطايتك الشهري.

2- ابقي روابطك دوماً فعالة وحدث أو احذف المتعطل منها إما بالتحقق منهم يدوياً كل فترة أو باستخدام بعض الأدوات للتحقق منهم بطريقة آلية ومريحة4

3- حاول دوماً استخدام الهوامش أو تذييل الصفحة في وضع مصادرك التي استقيت منها معلوماتك الموجودة في هذا المقال. وخاصة المصطلحات فالكثير من زوارك قد لايعرفون معناها.

4- حاول ترقيم الأشياء التي تحتاج إلى تعداد ولاتقم بسردها في نسق واحد فالترقيم يسهل الفهم والتذكر.

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

5- التواصل: تواصل مع زوار مدونتك بالتعليقات التي يكتبونها في مقالاتك أو بالرسائل التي تصلك عن طريق البريد الإلكتروني الذي وضعته في الصفحة الرئيسية أو في صفحة آخرى ظاهرة للعيان. الكثير من الناس يفضل التواصل عبر البريد الإلكتروني لعدة أسباب منها الخصوصية أو للتبليغ عن أخطاء بالمدونة أو لحديث شخصي مع المدون. لذلك وجود بريدك الإلكتروني بمكان ظاهر مهم جداً.


http://Blogger.com , http://wordpress.com

1.

http://www.ar-wp.com , http://themes.wordpress.net

2.

http://www.abacusdesign.com.au/articles/how-to-choose-your-website-colours.htm

3.

http://www.google.com/webmasters/tools

4.

مقدمة في CSS

الجمعة, 11 يوليو, 2008

ملاحظة: يجب أن يكون مستواك بالـ HTML جيداً قبل البدء.
1- ما هي الـ CSS؟
هي اختصار لـ Cascading Style Sheets وليس لها تعريب على حد علمي :D

2- ما هي وظيفتها؟
مسؤولة عن شكل صفحات الويب أي الإظهار فكل ما تراه في هذه المدونة من ألوان وأحجام خطوط هي من أفعال الـ CSS.

3- ما هي مكوناته؟
لقاعدة الـ CSS ثلاثة مكونات وهي على الشكل:

selector {property: value}

حيث:
selector هو العنصر الذي ستطبق عليه التأثيرات.
property هي خاصية من خواص هذا العنصر سنعطيها قيمة ما.
value القيمة الجديدة لهذا العنصر.

وبالمثال يتوضح الأمر:

div {color: blue;}

في البداية اخترنا العنصر الذي ستطبق علي خصائصه القيم الجديدة وهو حاوية الـ div، ثم اخترنا خاصية color لهذا العنصر أي لون النص داخله وأعطيناها لون ازرق.

4- كيف نربط ملف css مع الصفحة؟

نضعه في وسم head وتأكد من مسار href أنه صحيح، هنا وضعته داخل مجلد اسمه css واسم الملف هو style.css

5- ما أنواع الـ selector؟
له ثلاثة أنواع:
- وسم HTML: أي نضع وسماً من وسوم الـ HTML المعروفة (مثلاً div, p, span, a).
مثال:

div {color: blue;}

هنا سيطبق هذا التأثير (لون الخط الأزرق) على كل div اكتبها في صفحة HTML بعد ربطه بالتأكيد كما في الخطوة 4.

- المعرف (id): هنا نضع selector ليس من وسوم الـ HTML نعطيه اسماً من عندنا ونضع قبله # بحيث يصبح:
مثال:

#id-selector {color: red;}

هنا سيطبق على كل وسم له معرف id-selector مثال:

سيظهر النص هنا باللون الأحمر

- الصنف (class): أيضاً نضع selector اسمه من اختيارنا ولكن نضع قبله نقطة . أي:

.class-selector {color: black;}

كيف نحصل على تأثيره داخل صفحة الـ HTML … نقوم بإعطاء وسم الـ HTML قيمة لصنفه:

سيظهر هذا النص باللون الأسود

6- ما الفرق بين “المعرف” و “الصنف” أي متى استخدم هذا ومتى استخدم ذاك؟
استخدم المعرف عندما تريد تأثيراً لعنصر واحد … أي المعرف لا يجب أن يوضع لأكثر من وسم، لماذا؟ لأنه من خصائص وسوم HTML أن كل واحداً منها له معرفه الخاص لذلك لايجب تكرير المعرف لوسمين أو أكثر.
أما الصنف فاستخدمه لعدة وسوم أياً كان عددهم وهذا هو الفرق بينهم بكل اختصار وبدون تعقيدات.

7- إذا هل لك أن تشرح باختصار كل ماذكرت؟
طبعاً، الـ CSS تستخدم لإعطاء صفحة HTML التأثيرات المرئية أي الإظهارات، يتم ربط الملف كما في الخطوة 4 بالمناسبة ملف الـ CSS هو ملف عادي ولكن حولت لاحقته لـ css بدلاً من txt. ولدينا ثلاثة أنواع من selector (راجع الخطوة 5) واحد لوسم HTML موجود والأخر هو المعرف لإعطائه لوسم HTML واحد والأخير هو الصنف حيث يعطى لأكثر من وسم.

أسئلة للمستوى المتقدم:

8- كيف أعطي وسم يحتوي على خاصية محددة تأثيراً ما، مثلاً لدي الوسمان:


نص


نص آخر

أريد أن أعطي الوسم الذي يحتوي على خاصية الـ title تأثيراً أي الوسم الأول فكيف أحصل على ذلك؟

لا مشكلة، تستطيع ذلك بكتابة التالي في ملف css:

h1[title] {color: blue;}

هكذا سيحصل وسم h1 الذي يحتوي على خاصية title تأثيراً خاصاً به.

9- شيء جميل لكن هل يوجد تطبيق آخر له؟
نعم، أستطيع إعطاء وسم a الخاص بالإيميل تأثيراً معيناً، لاحظ معي:

a[href^="mailto"] { color: blue; }

هنا أخبرته أنه سيجد في بداية خاصية href كلمة mailto الخاصة بالبريد والـ (^) تعني بالبداية.

والسلام عليكم.