السلام عليكم،
منذ بضعة أشهر صممت صفحة 404 لمشروع وشاركتها مع متابعيني على تويتر وقتها، الآن وبينما أنظم بعض المجلدات وجدتها مرة ثانية فأحببت مشاركتها هنا في المدونة علكم تستفيدوا منها.
إرشيف التصنيف: ‘تصميم’
صفحة 404
الأحد, 17 يناير, 2010ثيم خفيفة للفايرفوكس
الثلاثاء, 25 أغسطس, 2009السلام عليكم،
ربما تعرفتم على مشاريع Mozilla Labs من قبل حين كتبت عن ubiquity. مشاريع مختبر موزيلا تقوم على تقديم إضافات مميزة جداً ومشاريع جديدة لتحسين الفايرفوكس أكثر وأكثر.
قبل مدة جربت الإضافة المسماة Personas حيث تسمح لك هذه الإضافة بعد تركيبها بإضافة ثيم خفيفة تغير فقط المنطقة العليا والسفلى من المتصفح. بإمكان أي شخص إضافة Persona من تصميمه وستنشر على الموقع بعد التأكد منها يدوياً (لذلك ربما تأخذ العملية أسبوعين).
قمت على سبيل التجربة بتصميم “بيرسونة” Persona سريعة لشهر رمضان. بإمكانكم تصميم واحدة أيضاً فماعليكم سوى التسجيل في موقع Personas ثم اتباع الخطوات لتصميم البيرسونة واستعمالها فيما بعد ونشرها بين الأصدقاء.
ثيمة الإدارة للدروبال
الخميس, 16 يوليو, 2009السلام عليكم ورحمة الله وبركاته،
الثيم الأساسية للدروبال تعتبر صعبة نوعاً ما ومعقدة! وبدأ التركيز بشكل جدي على تسهيل الدروبال وتحسين قابلية الاستخدام للنسخة السابعة.
( اكمل قراءة التدوينة )
الخطوط العربية
الجمعة, 6 فبراير, 2009بسم الله الرحمن الرحيم،
مؤخراً ظهرت العديد من التقنيات الجديدة التي تقوم على مبدأ تحويل النصوص التي تريدها في صفحتك لصور بخط أنت تحدده، لتظهر للزائر صورة النص بالخط المطلوب وبذلك تصمم اجمل التصاميم لموقعك بدون استخدام محرر الصور، كلنا يعلم أنه عند تصميمك لصفحة تقوم بتحديد الخط المستخدم بحيث تضمن وجوده على أجهزة زائري الموقع وإلا فلن يظهر الخط لديهم وغالباً مايتم تحديد عدة خطوط، وهذه الخطوط معروفة للمصممين وهي موجودة في كل نظام تشغيل.
( اكمل قراءة التدوينة )
أشهر أطر العمل التي تهم مطوري الويب
الأحد, 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)
أحضر تدوينة فيها مقارنة بين الأطر التالية (CakePHP -CodeIgniter – Zend) لذلك من يريد التفاصيل فلنتظر هذه التدوينة.
كيف يكون موقعي من مواقع الويب 2.0
الأربعاء, 23 يوليو, 2008بسم الله الرحمن الرحيم،
آخر تدوينة من سلسلة تحدي البداية القوية
هذه التدوينة شاركت بها أيضاً بمسابقة المدون الكبير محمد سعيد أحجيوج
كيف يكون موقعي من مواقع الويب 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.
|
1. |
|
|
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/ |
2. |
|
3. |
|
|
http://validweb.nl/artikelen/javascript/better-zebra-tables/ |
4. |
|
5. |
أخطاء يرتكبها مطوروا المواقع
الثلاثاء, 22 يوليو, 20081- العناوين الفظيعة
كان ومازال بعض المطورين يضعون عناوين فظيعة للصفحات مثل:
-&&-##موقع الصفحات الفظيعة##-&&-
هذه الرموز لاتفيد بشيء ضع بدلاً عنها عنوان مفيد يساعدك بترقية الرانك.
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
الإثنين, 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 كان على مطور الموقع أن يصنع مقابل كل صفحة، صفحة آخرى للطباعة. بحيث تكون خالية من الألوان والتنسيقات الزائدة.
أما الأن فبكل بساطة يمكنك كتابة ملف 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;
}ملاحظة: لن أكتب ملف طباعة خاص بالمدونة وسأخبركم عن السبب في وقت لاحق
تشكيلة مواقع للقوالب المجانية
الثلاثاء, 15 يوليو, 2008تشكيلة كبيرة من المواقع التي تقدم قوالب مجانية وأغلبها متوافق مع الويب 2.0
Loading ...
