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

الفهرس ونكهته الجديدة

January 29, 2011 - السبت 25 صفر 1432

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

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

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

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

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

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

October 15, 2008 - الأربعاء 16 شوال 1429

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

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

(اقرأ المزيد …)

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

October 13, 2008 - الاثنين 14 شوال 1429

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

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

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

(اقرأ المزيد …)

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

September 22, 2008 - الاثنين 22 رمضان 1429

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

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

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

August 3, 2008 - الأحد 01 شعبان 1429

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

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

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

July 21, 2008 - الاثنين 19 رجب 1429

مجموعة اختصارات عند كتابتك لملف 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 للطباعة؟

July 20, 2008 - الأحد 18 رجب 1429

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

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

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

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

July 17, 2008 - الخميس 15 رجب 1429

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

درج في الأونة الأخيرة موضة جديدة وهي “أوراق المساعدة” (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

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

July 15, 2008 - الثلاثاء 13 رجب 1429

تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 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

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

July 12, 2008 - السبت 10 رجب 1429

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

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

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

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

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

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.