مدونة الويب 2.0 » تصميم http://khaledalhourani.com/blog كنز المطور ... وضالة المتعلم Thu, 30 Jun 2011 07:40:23 +0000 en hourly 1 http://wordpress.org/?v= الفهرس ونكهته الجديدة http://khaledalhourani.com/blog/2011/01/29/%d8%a7%d9%84%d9%81%d9%87%d8%b1%d8%b3-%d9%88%d9%86%d9%83%d9%87%d8%aa%d9%87-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9/ http://khaledalhourani.com/blog/2011/01/29/%d8%a7%d9%84%d9%81%d9%87%d8%b1%d8%b3-%d9%88%d9%86%d9%83%d9%87%d8%aa%d9%87-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9/#comments Sat, 29 Jan 2011 10:55:05 +0000 خالد http://khaledalhourani.com/blog/?p=1215 فكرة الفهرس هو أن يقدم تجربة جديدة بعالم القراءة سواء عربياً أو عالمياً، على الرغم من توجه الفهرس للكتب العربية إلا أن الخدمات التي سيقدمها فريدة وجديدة، هذه الخبرات ليست جديدة بالمعنى الحرفي ولكنها استقاء من خدمات وتطبيقات شهيرة ككتب غوغل، iBooks، وكندل. تواصلت في البداية مع اﻷخ عبد الله عبيد لتنيسق جهودنا وتبادل الخبرات والنصائح خصوصاً أن مجموعة عزم والتي قدمت مشاريع تقنية رائدة نذكر منها الفتوى كأشهر مثال.

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

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

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

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

]]> http://khaledalhourani.com/blog/2011/01/29/%d8%a7%d9%84%d9%81%d9%87%d8%b1%d8%b3-%d9%88%d9%86%d9%83%d9%87%d8%aa%d9%87-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af%d8%a9/feed/ 3 صور مسربة من المشروع الجديد http://khaledalhourani.com/blog/2011/01/08/%d8%b5%d9%88%d8%b1-%d9%85%d8%b3%d8%b1%d8%a8%d8%a9-%d9%85%d9%86-%d8%a7%d9%84%d9%85%d8%b4%d8%b1%d9%88%d8%b9-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af/ http://khaledalhourani.com/blog/2011/01/08/%d8%b5%d9%88%d8%b1-%d9%85%d8%b3%d8%b1%d8%a8%d8%a9-%d9%85%d9%86-%d8%a7%d9%84%d9%85%d8%b4%d8%b1%d9%88%d8%b9-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af/#comments Sat, 08 Jan 2011 20:44:12 +0000 خالد http://khaledalhourani.com/blog/?p=1183 صورة مسربة من مشروعي الجديد أثناء مراحل العمل بأوقات مختلفة:

الخطوط اﻷولية للتصميم - إضافة الخط العثماني

التجربة اﻷولية ألفا 1

إضافة تأثيرات إضافية - المفضل لدي هو خلفية الورقة القديمة هذه

التجربة اﻷولية الثانية ألفا 2

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

]]> http://khaledalhourani.com/blog/2011/01/08/%d8%b5%d9%88%d8%b1-%d9%85%d8%b3%d8%b1%d8%a8%d8%a9-%d9%85%d9%86-%d8%a7%d9%84%d9%85%d8%b4%d8%b1%d9%88%d8%b9-%d8%a7%d9%84%d8%ac%d8%af%d9%8a%d8%af/feed/ 3 صفحة 404 http://khaledalhourani.com/blog/2010/01/17/%d8%b5%d9%81%d8%ad%d8%a9-404/ http://khaledalhourani.com/blog/2010/01/17/%d8%b5%d9%81%d8%ad%d8%a9-404/#comments Sun, 17 Jan 2010 13:17:22 +0000 خالد http://dev.holooli.com/?p=1060 السلام عليكم،
منذ بضعة أشهر صممت صفحة 404 لمشروع وشاركتها مع متابعيني على تويتر وقتها، الآن وبينما أنظم بعض المجلدات وجدتها مرة ثانية فأحببت مشاركتها هنا في المدونة علكم تستفيدوا منها.

قالب 404
]]> http://khaledalhourani.com/blog/2010/01/17/%d8%b5%d9%81%d8%ad%d8%a9-404/feed/ 13 ثيم خفيفة للفايرفوكس http://khaledalhourani.com/blog/2009/08/25/%d8%ab%d9%8a%d9%85-%d8%ae%d9%81%d9%8a%d9%81%d8%a9-%d9%84%d9%84%d9%81%d8%a7%d9%8a%d8%b1%d9%81%d9%88%d9%83%d8%b3/ http://khaledalhourani.com/blog/2009/08/25/%d8%ab%d9%8a%d9%85-%d8%ae%d9%81%d9%8a%d9%81%d8%a9-%d9%84%d9%84%d9%81%d8%a7%d9%8a%d8%b1%d9%81%d9%88%d9%83%d8%b3/#comments Tue, 25 Aug 2009 02:08:10 +0000 خالد http://dev.holooli.com/?p=953 السلام عليكم،
ربما تعرفتم على مشاريع Mozilla Labs من قبل حين كتبت عن ubiquity. مشاريع مختبر موزيلا تقوم على تقديم إضافات مميزة جداً ومشاريع جديدة لتحسين الفايرفوكس أكثر وأكثر.
شعار mozilla Labs

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

]]> http://khaledalhourani.com/blog/2009/08/25/%d8%ab%d9%8a%d9%85-%d8%ae%d9%81%d9%8a%d9%81%d8%a9-%d9%84%d9%84%d9%81%d8%a7%d9%8a%d8%b1%d9%81%d9%88%d9%83%d8%b3/feed/ 2 ثيمة الإدارة للدروبال http://khaledalhourani.com/blog/2009/07/16/%d8%ab%d9%8a%d9%85%d8%a9-%d8%a7%d9%84%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d9%84%d9%84%d8%af%d8%b1%d9%88%d8%a8%d8%a7%d9%84/ http://khaledalhourani.com/blog/2009/07/16/%d8%ab%d9%8a%d9%85%d8%a9-%d8%a7%d9%84%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d9%84%d9%84%d8%af%d8%b1%d9%88%d8%a8%d8%a7%d9%84/#comments Thu, 16 Jul 2009 17:40:16 +0000 خالد http://dev.holooli.com/?p=943 السلام عليكم ورحمة الله وبركاته،
الثيم الأساسية للدروبال تعتبر صعبة نوعاً ما ومعقدة! وبدأ التركيز بشكل جدي على تسهيل الدروبال وتحسين قابلية الاستخدام للنسخة السابعة.

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

وإليك بعض الصور لهذه الإضافة الرائعة!
لوحة التحكم
التصنيفات

]]> http://khaledalhourani.com/blog/2009/07/16/%d8%ab%d9%8a%d9%85%d8%a9-%d8%a7%d9%84%d8%a5%d8%af%d8%a7%d8%b1%d8%a9-%d9%84%d9%84%d8%af%d8%b1%d9%88%d8%a8%d8%a7%d9%84/feed/ 14 الخطوط العربية http://khaledalhourani.com/blog/2009/02/06/%d8%a7%d9%84%d8%ae%d8%b7%d9%88%d8%b7-%d8%a7%d9%84%d8%b9%d8%b1%d8%a8%d9%8a%d8%a9/ http://khaledalhourani.com/blog/2009/02/06/%d8%a7%d9%84%d8%ae%d8%b7%d9%88%d8%b7-%d8%a7%d9%84%d8%b9%d8%b1%d8%a8%d9%8a%d8%a9/#comments Fri, 06 Feb 2009 19:45:11 +0000 خالد http://dev.holooli.com/?p=745 بسم الله الرحمن الرحيم،
مؤخراً ظهرت العديد من التقنيات الجديدة التي تقوم على مبدأ تحويل النصوص التي تريدها في صفحتك لصور بخط أنت تحدده، لتظهر للزائر صورة النص بالخط المطلوب وبذلك تصمم اجمل التصاميم لموقعك بدون استخدام محرر الصور، كلنا يعلم أنه عند تصميمك لصفحة تقوم بتحديد الخط المستخدم بحيث تضمن وجوده على أجهزة زائري الموقع وإلا فلن يظهر الخط لديهم وغالباً مايتم تحديد عدة خطوط، وهذه الخطوط معروفة للمصممين وهي موجودة في كل نظام تشغيل.

تقنية typeface.js تقوم على فكرة تحويل الخط إلى ملف جافاسكربت لتقوم باستخدامه، جربت هذه التقنية ولكنها اعطت حروفاً منفصلة (مثلاً: ح ر و ف).
تقنية sIFR الشهيرة والتي تعتمد على وضع الخط داخل ملف فلاش (swf) لتقوم باستخدامه لم تعمل مع العربية أبداً (إذا عملت مع أحدكم رجاء أخبروني).
تقنية cufon أيضاً تقوم على تحويل الخط إلى ملف جافاسكربت ولكن نفس مشكلة typeface.js تظهر الحروف العربية بالخط المطلوب ولكن مقطعة.
كل هذه التقنيات ينقصها دعم العربية، لذلك واصلت البحث حتى وصلت لـ Facelift وهو عبارة عن خليط بين javascript و php ولكن يعتمد بشكل رئيسي على مكتبة GD في PHP.
حملت المكتبة وكتبت بالعربية لأصل لنفس مشكلة مكتبة GD وهي إظهار الأحرف العربية بشكل مقطع، طبعاً فوراً توجهت لمكتبة الأستاذ الكبير خالد الشمعة وحملت آخر إصدار من مكتبته الكبيرة حيث اردت استخدام الصنف الذي كتبه لحل مشكلة العربية في GD، والحمد لله بخطوات بسيطة اتممت العمل لأصل إلى هدفي وهو توليد صور مكافئة للنصوص التي تكتبها بالخط الذي تريده وهو ماتفعله جميع التقنيات التي ذكرت، تقوم بتحويل الكتابة بشكل آلي إلى صورة بالنص الذي تريده.
يوجد الآن ملف لكي تحمله وتقوم ببعض التجارب عليه، لكن أولاً يجب أن تتأكد من وجود مكتبة GD لديك عن طريق استدعاء ملف generate.php الموجود في الحزمة وستظهر لك صورة مكتوب فيها كلمة null:
شكل الصورة

شكل الصورة


إذا لم تظهر لديك الصورة فمكتبة GD ليست موجودة لديك وفي هذه الحالة لاتكمل قراءة هذه التدوينة :D
الآن توجه إلى صفحة index.php وشاهد النتيجة:
النتيجة

النتيجة

مكتبة Facelift جيدة إذ تستعمل الكاش لحفظ الصور لأن مكتبة GD تستهلك الكثير من الموارد ولكن جودة النص المصدري ليست كما ينبغي وسأقوم في الأيام المقبلة بالكثير من التعديلات عليها وكتابة تدوينة مفصلة لاستخدامها في تصاميمك القادمة (ويمكن إضافة للوردبريس!)، تصور أن تزين موقعك بعناوين بخط النسخ!
حمل المكتبة المعدلة (635)

]]> http://khaledalhourani.com/blog/2009/02/06/%d8%a7%d9%84%d8%ae%d8%b7%d9%88%d8%b7-%d8%a7%d9%84%d8%b9%d8%b1%d8%a8%d9%8a%d8%a9/feed/ 21 أشهر أطر العمل التي تهم مطوري الويب http://khaledalhourani.com/blog/2008/08/03/%d8%a3%d8%b4%d9%87%d8%b1-%d8%a3%d8%b7%d8%b1-%d8%a7%d9%84%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d8%aa%d9%8a-%d8%aa%d9%87%d9%85-%d9%85%d8%b7%d9%88%d8%b1%d9%8a-%d8%a7%d9%84%d9%88%d9%8a%d8%a8/ http://khaledalhourani.com/blog/2008/08/03/%d8%a3%d8%b4%d9%87%d8%b1-%d8%a3%d8%b7%d8%b1-%d8%a7%d9%84%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d8%aa%d9%8a-%d8%aa%d9%87%d9%85-%d9%85%d8%b7%d9%88%d8%b1%d9%8a-%d8%a7%d9%84%d9%88%d9%8a%d8%a8/#comments Sun, 03 Aug 2008 09:03:10 +0000 خالد http://dev.holooli.com/?p=118 بسم الله الرحمن الرحيم،

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

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) لذلك من يريد التفاصيل فلنتظر هذه التدوينة.

]]> http://khaledalhourani.com/blog/2008/08/03/%d8%a3%d8%b4%d9%87%d8%b1-%d8%a3%d8%b7%d8%b1-%d8%a7%d9%84%d8%b9%d9%85%d9%84-%d8%a7%d9%84%d8%aa%d9%8a-%d8%aa%d9%87%d9%85-%d9%85%d8%b7%d9%88%d8%b1%d9%8a-%d8%a7%d9%84%d9%88%d9%8a%d8%a8/feed/ 15 كيف يكون موقعي من مواقع الويب 2.0 http://khaledalhourani.com/blog/2008/07/23/%d9%83%d9%8a%d9%81-%d9%8a%d9%83%d9%88%d9%86-%d9%85%d9%88%d9%82%d8%b9%d9%8a-%d9%85%d9%86-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-20/ http://khaledalhourani.com/blog/2008/07/23/%d9%83%d9%8a%d9%81-%d9%8a%d9%83%d9%88%d9%86-%d9%85%d9%88%d9%82%d8%b9%d9%8a-%d9%85%d9%86-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-20/#comments Wed, 23 Jul 2008 08:17:43 +0000 خالد http://dev.holooli.com/?p=60 بسم الله الرحمن الرحيم،

آخر تدوينة من سلسلة تحدي البداية القوية

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

كيف يكون موقعي من مواقع الويب 2.0

ماهو الويب 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.

http://w3c.org

1.

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

2.

http://www.noupe.com/css/47-excellent-ajax-css-forms.html

3.

http://validweb.nl/artikelen/javascript/better-zebra-tables/

4.

http://cssbit.com , http://noupe.com

5.

]]> http://khaledalhourani.com/blog/2008/07/23/%d9%83%d9%8a%d9%81-%d9%8a%d9%83%d9%88%d9%86-%d9%85%d9%88%d9%82%d8%b9%d9%8a-%d9%85%d9%86-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d9%88%d9%8a%d8%a8-20/feed/ 7 أخطاء يرتكبها مطوروا المواقع http://khaledalhourani.com/blog/2008/07/22/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%8a%d8%b1%d8%aa%d9%83%d8%a8%d9%87%d8%a7-%d9%85%d8%b7%d9%88%d8%b1%d9%88%d8%a7-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9/ http://khaledalhourani.com/blog/2008/07/22/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%8a%d8%b1%d8%aa%d9%83%d8%a8%d9%87%d8%a7-%d9%85%d8%b7%d9%88%d8%b1%d9%88%d8%a7-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9/#comments Mon, 21 Jul 2008 23:15:52 +0000 خالد http://dev.holooli.com/?p=25 1- العناوين الفظيعة

كان ومازال بعض المطورين يضعون عناوين فظيعة للصفحات مثل:

-&&-##موقع الصفحات الفظيعة##-&&-

هذه الرموز لاتفيد بشيء ضع بدلاً عنها عنوان مفيد يساعدك بترقية الرانك.

2- قوائم التصفح بالجافا سكربت

لماذا تستخدمهم إذا وجدت البديل السهل؟؟ وهو قوائم css (سأتحدث عن قوائم css بوقت لاحق)

أيضاً أغلب محركات البحث لاتستطيع التعامل مع قوائم الجافا سكربت

3- المسارات المولدة عشوائياً

مازال هناك الكثير من المواقع التي تستخدم عناوين مولدة عشوائياً … فترى عشرات الأرقام والأحرف ولاتفهم منهم شيئاً … مثل:

www.example.com/2121,4334,3213dsadsa,weq

4- عدم استعمال وسوم العناوين (h1 … h6)

كثيراً ما ترى مواقع تضع عناوينها داخل وسوم عادية وتكبر الخط كثيراً حتى يبدو كعنوان !!! لماذا استخدم وسوم العناوين (h1 … h6) فوظيفتها هي كتابة العناوين … وبإمكانك تعديلها بال css وأيضاً هي من أساسيات SEO أي ترفع لك الرانك.

5- عناوين الصفحات المتشابهة

لا تستخدم نفس العنوان (title) لكل الصفحات بموقعك … استخدم لكل صفحة عنواناً مختلفاً

6- لا تكرر الكلمات في وسم (meta keywords)

لن يفيدك شيء تكرار الكلمات فمحركات البحث ليست بهذا الغباء الذي كانت عليه قبل عشرة سنوات، حتى تحتسبها أكثر من مرة :D

7- ضغط المحتويات قبل إرسالها

من الأخ Qniq:

8- عدم استعمال Reobots file

9- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Ajax

أي الاعتماد على الأجاكس بكامل الموقع وهذا خطأ كبير … فبعض المستخدمين يعطلوا الجافاسكربت لديهم وبذلك سيظهر موقعك بشكل عبيط :D

10- وضع نسخة وحيدة لمحتوى الموقع تعتمد على ال Flash

فبعض الناس مثلي يلغوا الفلاش كله من متصفحهم

11- عدم استخدام Caching بشكل احترافي

إذا لم تعرف كيفية استخدامه فلا تستخدمه ;-)

]]> http://khaledalhourani.com/blog/2008/07/22/%d8%a3%d8%ae%d8%b7%d8%a7%d8%a1-%d9%8a%d8%b1%d8%aa%d9%83%d8%a8%d9%87%d8%a7-%d9%85%d8%b7%d9%88%d8%b1%d9%88%d8%a7-%d8%a7%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9/feed/ 9 اختصارات ال CSS http://khaledalhourani.com/blog/2008/07/21/%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84-css/ http://khaledalhourani.com/blog/2008/07/21/%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84-css/#comments Mon, 21 Jul 2008 00:10:41 +0000 خالد http://dev.holooli.com/?p=27 مجموعة اختصارات عند كتابتك لملف 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; }
]]> http://khaledalhourani.com/blog/2008/07/21/%d8%a7%d8%ae%d8%aa%d8%b5%d8%a7%d8%b1%d8%a7%d8%aa-%d8%a7%d9%84-css/feed/ 6