السلام عليكم،
حملة باراك أوباما (المرشح الديمقراطي للرئاسة الأمريكية) الإلكترونية تعتبر نهضة وبداية لعصر جديد في عالم الحملات الانتخابية الإلكترونية. استغل فريق العمل الإلكتروني الويب 2.0 بكاملها ولم يبقوا منها شيء بداية بالتويتر وانتهاء بالفيس بوك!
كل شيء في الموقع يستحق الإعجاب الشديد والاحترام (عدا المحتوى طبعاً 
)، والتفاصيل أكثر من أن تذكر بتدوينة ولكن سأحاول تغطية معظم هذه التفاصيل.
السلام عليكم ورحمة الله وبركاته،
لدي بعض الوقت للإعلان عن خبر هام بكل المقاييس وهو النسخة 3.1 بيتا من المتصفح الأشهر فاير فوكس، النسخة الجديدة جاءت مع ترقيات وإضافات هامة جداً سأتحدث عنها بشيء من التفصيل الآن.
السلام عليكم،
اعذروني على التأخير في هذه الأيام ولكن الجامعة بدأت ووقتي مضطرب كثيراً وأعتقد أني احتاج لأسبوع للتأقلم مع هذا الوضع. أي ربما سأتأخر لأسبوع في التدوينات القادمة.
شاهدنا في التدوينة السابقة قائمة مختصرة بأهم المصادر لتعلم الويب 2.0، أما الآن سأعرض قائمة مطولة بالمواقع والمدونات التي تجد فيها ماتريد في عالم التطوير، وسأضيف عليها بشكل دائم كلما وجدت مصدر مميز
بسم الله الرحمن الرحيم،
كما تشاهدون المدونة الآن بتصميمها الجديد، على الرغم من أنه لم ينتهي لحد الآن إذ يوجد العديد من الميزات والإضافات التي سأضيفها عليها ولكن أحببت أن أراه على الوقع وأجربه. ولحد الآن لم أعالج مشاكل IE مع التصميم الجديد (عندما أجد وقت فارغ وأكون مرتاحاً ).
راعيت في التصميم الجديد راحة المستخدم وسهولة الوصول لما يحتاج إليه بكثرة. وسأسرد بعض التفاصيل:
هذه لمحة سريعة في التصميم الجديد وأتمنى أن تتركوا تعليق عن أي ملاحظة\استفسار\خطأ …
بسم الله الرحمن الرحيم،
قائمة بأهم وليس جميع أطر العمل التي تهم مطوري الويب.
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)
أحضر تدوينة فيها مقارنة بين الأطر التالية (CakePHP -CodeIgniter – Zend) لذلك من يريد التفاصيل فلنتظر هذه التدوينة.
السلام عليكم ورحمة الله وبركاته،
عودة قريبة ولكن مفيدة … لي ولكم بإذن الله
الموضوع باختصار هو كيف ينظم المطور أو المبرمج وقته؟
بعد وقت طويل من عدم التنظيم في الوقت وهدر بعض الساعات في تصفح فارغ قررت أن أضع حداً لهذا كالتالي:
سأطبق هذه القيود على نفسي وأتمنى أن يتحسن من خلاله نظامي اليومي وتقل ساعات الهدر.
أما الأن فالفكرة الجميلة التي طرأت على ذهني هي استغلال هذا الموضوع بتعلم بعض أساسيات الكيك CakePHP عن طريق تطوير الخطوة الخامسة (قائمة المهمات to do list) بالكيك. ستكون عبارة عن سلسلة من التدوينات نمشي بها خطوة خطوة، حتى نكمل التطبيق “قائمة المهمات”. فرصة لتحسين مستواي عن طريق ملاحظاتكم وتجاربكم.
ما رأيكم؟؟ وهل ببال أحدكم اسم جميل للتطبيق؟؟
بسم الله الرحمن الرحيم،
آخر تدوينة من سلسلة تحدي البداية القوية
هذه التدوينة شاركت بها أيضاً بمسابقة المدون الكبير محمد سعيد أحجيوج
ماهو الويب 2.0؟
يعتبر الجيل الثاني من المواقع الإلكترونية التي ظهرت في منتصف التسعينات، وهو مصطلح يطلق على المواقع الإلكترونية التي تحتوي على الميزات التالية:
1- التفاعل مع الزوار وأشهر أمثلتها تعليقات الزوار في المنتديات ومشاركات المستخدمين في المنتديات.
2- تتمتع مواقع الويب 2.0 بحجم خفيف ومظهر جميل يعتمد في تصميمه بشكل كامل على الـ CSS.
3- التقيد بالمعايير العالمية في تصميم الموقع (W3C)1 لضمان توافقية عالية مع كل المتصفحات.
4- من الناحية التقنية يعتمد على تقنيات حديثة أهمها الأجاكس (AJAX) و (RSS).
بدأ ظهور مفهوم الويب 2.0 في بدايات الـ 2004 وسرعان ما انتشر هذا المفهوم انتشار النار في الهشيم وبدأت مواقع الويب 2.0 بالظهور بشكل ملفت للنظر، وهنا يجب التنويه إلى أن عالمنا العربي نادراً ماتجد فيه هذا النوع من المواقع (نستثني من هذا الأنظمة الجاهزة كالمدونات والمنتديات وأنظمة إدارة المحتوى).
إذن ما هي الخطوات الواجب اتباعها لكي أجعل موقعي من مواقع الويب 2.0؟
يوجد محوريين رئيسيين للتغيير بهما وهما التصميم والبرمجة:
· من ناحية التصميم:
ستحتاج لإعادة تصميم موقعك من الصفر !! … طبعاً المحتويات لن تتأثر ولكن هيكل الموقع سيتغير تغييراً جذرياً. المواقع القديمة كانت تعتمد في التصميم على الجداول، طبعاً هذا الاستخدام الخاطىء للجداول مازال أثره حتى اليوم في المواقع الإلكترونية. فالجداول تستخدم لعرض جدول ما مثل قائمة بالمنتجات ولكن المطورين أساؤوا استخدامه وأصبحوا يستخدمونه في بناء الهيكل العام للموقع.
ستحتاج لقراءة كتاب أو أكثر عن CSS حتى تتعلم أساسياتها. ومن ثم تعمل على تحويل الجداول وخلاياها لحاويات تسمى div. طبعاً على المدى القريب ستعاني كثيراً وربما ستفكر بالتخلي عن الويب 2.0 لكن عندما تنظر لحسناته ستعيد التفكير في هذا الأمر وبعد مدة سيصبح مستواك جيداً في الـ CSS وستعتاد عليه ولن تفكر بالرجوع أبداً للجداول.
أيضاً حاول التقليل قدر الإمكان من استعمال الصور، فالصور التي تحتوي على لون واحد وتستخدم عادة للخلفيات يمكن الاستعاضة عنها بتلوين هذا الجزء بالـ CSS. فلا تستخدم الصور بشكل مفرط ولكن استخدمها عند الحاجة.
أيضاً عليك بتجريب موقعك على أشهر المتصفحات للتأكد من أنه التصميم واحد في كل المتصفحات. الاختبار الأصعب هو تجريبه على Internet Explorer نظراً لعدم احترامه للمعايير العالمية، حاول قدر الإمكان أن تجعله يعطي تصميماً صحيحاً فجمهورك يستخدم جميع المتصفحات ولايمكنك إهمال أيٍ منها.
دعونا نأخذ بعض الأمثلة التصميمية:
1- الزوايا الدائرية2
الزوايا الدائرية
2- مستطيل الطلب المنسق3
المستطيل المنسق
3- الجداول المتناوبة الألوان4
الجداول المتناوبة الألوان
· من ناحية البرمجة:
البرمجة لا تقل أهمية عن التصميم … لكن بما أنها الجانب الغير مرئي من الموقع لذلك لايتم الانتباه إليها كثيراً.
موقعك يجب أن يكون مبرمجاً بشكل جيد وخالٍ من الأخطاء، أيضاً استخدم الجافا سكربت ولكن بحذر فبعض المستخدمين يوقفون عملها خوفاً من الفايروسات. الـ RSS أصبحت ركناً أساسياً في كل موقع فالكثير من الأشخاص يستخدمونها لسهولة جديد الموقع بدون الحاجة لزيارته.
استخدم الـ AJAX عند إضافة تعليق مثلاً، فبدل أن تحدث الصفحة كلها عند إضافة المستخدم لتعليق، يقوم الأجاكس بهذه المهمة بهدوء وسرعة وبدون الاضطرار لتحديث الصفحة.
هذه كانت جولة سريعة في تقنيات الويب 2.0 ولايمكن حصر هذا الموضوع بمقال أو كتاب فهو موضوع كبير وينمو بشكل سريع كل يوم. فالأفضل البقاء مطلعاً على هذه التقنيات من مصادر مختلفة5.
|
1. |
|
|
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/ |
2. |
|
3. |
|
|
http://validweb.nl/artikelen/javascript/better-zebra-tables/ |
4. |
|
5. |
1- العناوين الفظيعة
كان ومازال بعض المطورين يضعون عناوين فظيعة للصفحات مثل:
-&&-##موقع الصفحات الفظيعة##-&&-
هذه الرموز لاتفيد بشيء ضع بدلاً عنها عنوان مفيد يساعدك بترقية الرانك.
2- قوائم التصفح بالجافا سكربت
لماذا تستخدمهم إذا وجدت البديل السهل؟؟ وهو قوائم css (سأتحدث عن قوائم css بوقت لاحق)
أيضاً أغلب محركات البحث لاتستطيع التعامل مع قوائم الجافا سكربت
3- المسارات المولدة عشوائياً
مازال هناك الكثير من المواقع التي تستخدم عناوين مولدة عشوائياً … فترى عشرات الأرقام والأحرف ولاتفهم منهم شيئاً … مثل:
www.example.com/2121,4334,3213dsadsa,weq
4- عدم استعمال وسوم العناوين (h1 … h6)
كثيراً ما ترى مواقع تضع عناوينها داخل وسوم عادية وتكبر الخط كثيراً حتى يبدو كعنوان !!! لماذا استخدم وسوم العناوين (h1 … h6) فوظيفتها هي كتابة العناوين … وبإمكانك تعديلها بال css وأيضاً هي من أساسيات SEO أي ترفع لك الرانك.
5- عناوين الصفحات المتشابهة
لا تستخدم نفس العنوان (title) لكل الصفحات بموقعك … استخدم لكل صفحة عنواناً مختلفاً
6- لا تكرر الكلمات في وسم (meta keywords)
لن يفيدك شيء تكرار الكلمات فمحركات البحث ليست بهذا الغباء الذي كانت عليه قبل عشرة سنوات، حتى تحتسبها أكثر من مرة 
7- ضغط المحتويات قبل إرسالها
من الأخ
8- عدم استعمال Reobots file
9- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Ajax
أي الاعتماد على الأجاكس بكامل الموقع وهذا خطأ كبير … فبعض المستخدمين يعطلوا الجافاسكربت لديهم وبذلك سيظهر موقعك بشكل عبيط
10- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Flash
فبعض الناس مثلي يلغوا الفلاش كله من متصفحهم
11- عدم استخدام Caching بشكل احترافي
إذا لم تعرف كيفية استخدامه فلا تستخدمه 
مجموعة اختصارات عند كتابتك لملف 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; }
تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 2.0
