2009-02-16

طريقة إظهار أكواد HTML أو java داخل تدويناتك في البلوجر

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

HTML أو java

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

الخطوة الثانية : اذهب إلى قالبك من خلال تخطيط ثم تحرير HTML ثم قم بالتعليم على خانة توسيع قالب المدونة ، بعد التوسيع اضغط على CTRL+F من أجل البحث عن الكود التالي :
]]></b:skin>
الخطوة الثالثة : بعد الوصول إلى الكود السابق قم بإضافة هذا الكود فوقه ، مهم قم بإضافته فوق الكود السابق .
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}
الخطوة الرابعة : تأكد من أنك حصلت على نتيجة تشبهة الصورة التالية :
إن حصلت على نتيجة مشابهة ، قم بمعاينة القالب إن لم يظهر أي خطأ فهنيئا لك لقد نجحت في إضافة الكود ، ماعليك الآن سوى حفظ القالب ، والإستعداد إلى الخطوة النهائية .
لكن قبل ذلك لنتوقف قليلا مع الكود الذي أضفناه قبل قليل ، هذا الكود هو عبارة عن أمر يقوم بتأطير الكتابة التي نريدها بواسطة إطار مميز لتلك الكتابة ، وأن تعمدت قول الكتابة وليس كود html لأنه يقوم بتأطير أي شيء يوجد بداخله سواء كتابة أو كود html أو كود java أو حتى صورة .
تستطيع من خلال هذا الكود أيضا أن تتحكم في شكل الإطار ولونه وأبعاده وسمكه ، والصورة التي أمامكم توضح تلك الخواص القابلة للتعديل وهي سهلة للغاية .
لكن السؤال الأهم والضروري وهو كيف أتحكم في الكتابة داخل الإطار وخارجها وقت ما أريد ؟ ، أو بمعنى أصح هو كيف أعلم أنني أكتب داخل الإطار وليس خارجه ؟ .
الإجابة سهلة وهي أن هناك كود آخر يقوم بمناداة الكود السابق لكي يقوم بتأطير الكتابة التي نريدها ، والكود كالتالي :

<pre></pre>


ولكي تظهر الكتابة يجب أن نضيفها داخل <pre> و </pre> وأي كتابة خارج هاذين الكودين ستظهر بشكلها الطبيعي .
وهذه صورة مثال عما أتحدث عليه :


وهذه النتيجة :


الخطوة الخامسة والأخيرة : ما قلته في الخطوة الرابعة ينطبق على الكتابة بالحروف فقط ، أما الكتابة بأكواد html أو java فإليكم الطريقة .
سنحتاج بشكل مستمر إلى أداة postable وهي أداة لا غنى عنها في الوقت الحالي ، وهي تقوم بتحويل الأكواد إلى ما يسمى بالأكواد الصديقة للـ html .
ولكي تستوعب ما أتحدث عنه قم بالتالي : قم بنسخ أي كود يقع تحت عينيك حاليا ، توجه إلى أداة postable قم بلصق الكود داخل المستطيل واضغط على MAKE IT FREINDLY ، ستجد أن الكود قد تحول إلى كتابة غير مفهومة وهذا ما نريد بالضبط أن نصل إليه .

تلخيص لخطوات العمل بكاملها :
بعد أن تصيف الكود إلى قالبك في الخطوات الأولى والثانية والثالثة ، قم بحفظ القالب .
الآن إذا أردت أن تكتب موضوع في مدونتك والموضوع يحتوي بداخله على أكواد فيجب أن تقوم بالتالي :
حول الكود الذي تريد أن تكتبه في موضوعك إلى كود صديق من خلال أداة postable .
الكود الذي حصلت عليه ضعه داخل الكودين التاليين <pre> و </pre> ، من خلال وضع تحرير HTML وليس وضع تأليف .
وهكذا سيظهر الكود مأطر وبشكل سليم داخل التدوينة ، والصورتين في الخطوة الرابعة توضحان الطريقة والنتيجة .

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

2009-02-12

موقع Roundpic لتحديد نمط زاوية الصور

تحديد نمط زاوية الصور
السلام عليكم ورحمة الله تعالى وبركاته .
أصبحنا حاليا وفي أغلب وظائف الأنترنت نستعمل صور بزاوية مستديرة بدرجات مختلفة لعدة أسباب منها أنها تضفي جمالية أكثرللصورة وللمكان الموضوعة فيه ، لكن أبرز سبب يجعل الأغلبية تفضل هذه النوعية الجديدة من الصور هو أنها تجدب انتباه العين ، ففي عدة احصائيات مختلفة كانت نتائج هذه الصور أكثر اجابية من غيرها ، لدى فأغلب المواقع الآن تستخدم هذه الطريقة في الإعلانات لجلب أكثر عدد من الظغطات وهذا ينجح كثيرا .
قبل أن يقدم هذا الموقع خدمة
تحديد نمط زاوية الصور كانت تتم عن طريق برامج تصميم مختلفة وكذلك برامج مخصصة فقط لهذا الغرض ، وفي الغالب كانت تأخذ وقتا أكثر من اللازم ، وطبعا هذا لمن يعرف طريقة تحديدها أما لمن لا يعرف فتلك مشكلة أخرى ، وهذا يبين بالواضح دور هذا الموقع والخدمة القيمة التي يقدمها .
لنتوقف قليلا مع مميزات هذه الخدمة وبعض الملاحظات عليها .
الموقع هو Roundpic وتستطيع من خلاله أن تجعل زوايا الصور مستديرة مثل هذه الصورة :تحديد نمط زاوية الصور
يمكنك كذلك من خلال هذا الموقع أن تحدد أبعاد الصورة وجودتها .
يمكنك أن تختار نوعية الصورة بين العادية JPG و الشفافة PNG .
تستطيع أن تختار حجم الإستدارة التي تريدها ، وهناك 12 حجم مختلف يمكنك أن تختار التي تريده بينها .
لديك الإختيار كذلك في أن تجعل الإستدارة في بعض الزوايا دون غيرها .
يمكنك أن تسمي الصورة قبل أن تحملها .
وطبعا آخر خدمة وهي رفع الصور بحيث بعد الإنتهاء من تعديل الصورة ستجدها مرفوعة على سيرفر الموقع تلقائيا .

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

2009-02-09

إضافة أداة " أعلى الصفحة " إلى البلوجر

أداة  بكل تأكيد سبق لك وشاهدت هذه الإضافة في الكثير من المدونات أو المواقع ، وخصوصا المدونات ذات الصفحة الطويلة جدا التي تجعل الزائر يضيع الكثير من وقته في مشاهدة الصفحة صعودا ونزولا ، لذلك تأتي هذه الأداة لتساعد الزائر في تقليص مدة مشاهدته للصفحة وبالتالي في تسهيل اختياره للموضوع الذي يود قرائته ، كيف ذلك ؟
الأداة مبرمجة لكي تظهر في كل مرة تقوم فيها بالنزول في اتجاه أسفل الصفحة وعندما تقوم بالضغط عليها فهي تقوم بترجمة تلك الضغطة على أنها أمر منك للصعود أعلى الصفحة مرة أخرى بشكل سريع جدا ، وهكذا أنت تقضي وقتك في تصفح الصفحة نزولا فقط وبالتالي فإنك تكسب نصف وقت التصفح الذي تقضيه في الصعود ، ويمكنك أن تجرب الأداة من خلال صفحتي الحالية .
حسنا أظن أن فكرة الأداة قد وصلت وجاء وقت التركيب :
  1. قم بتسجيل دخولك إلى البلوجر ، وتوجه نحو التخطيط ثم عناصر الصفحة
  2. اختر أين تريد أن تضع الأداة ومن الأفضل أن تكون على يمين الصفحة لأن الزائر يستعمل الفأرة بيمينه وبالتالي سيسهل عليه الضغط على الأداة بها .
  3. اضغط على إضافة أداة .
  4. اختر من بين تلك الخواص خاصية HTML/JavaScript .
  5. الآن قم بنسخ هذا الكود وألصقه داخل HTML/JavaScript ، قم بحفظ الأداة تكون قد انتهيت من تركيبها .
<a style="display:scroll;
position:fixed;bottom:5px;right:5px;" href="#"
title="Back to Top"><
img src="http://img119.imageshack.us/img119/8589/arrowupcx2.gif"
/></a>
الآن جاء وقت بعض التخصيص داخل الأداة :
ما هو باللون الأحمر هو اتجاه ظهور الأداة يمكنك أن تغيره بهذه الكلمة Left وسيظهر في اليسار عوض اليمين .
ما هو بالصفر هو رابط صورة الأداة إذا كنت لا تحبد الصورة الحالية أو أنها لا تناسب تصميم مدونتك فيمكنك تصميم صورة خاصة بك ورفعها وتعويض الرابط السابق بالرابط الذي الجديد .
هناك أشياء بسيطة يمكنك أن تغيرها داخل الكود لكنها لن تأثر بشكل كبير باستثناء الملاحظتين السابقتين .

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

2009-02-08

إعادة توجيه مدونة البلوجر إلى موقع آخر تختاره

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

القسم الأول :
الخطوة الأولى وكما اقتضت العادة قم بأخذ نسخة احتياطية من مدونتك عن طريق : التخطيط ثم تحرير HTML ثم تنزيل قالب كامل .
الخطوة الثانية وهي التعديل في قالب المدونة وسنقوم فيها أولا بالبحث عن الكود التالي عن طريق الضغط على CTRL+F وإدخال الكود :
<head>
الخطوة الثالثة وهي أن تضيف هذا الكود مباشرة أسفل الكود السابق :
<meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
سنتوقف برهة لنشرح فيها الكود السابق وماذا يعني :
الكود بالأزرق هو مكان الرابط الذي سيتتم إعادة التوجيه له .
الرقم 1 بالأصفر هي المدة المستغرقة بالثانية لإعادة التوجيه .
الكود بالأصفر يقول لمحرك البحث كوكل بأن يتوقف عن أرشفة مواضيع المدونة وهو أمر موجه إلى ملف الروبوتس ROBOTS .

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

القسم الثاني :
الخطوة الأولى سنقوم فيها بالبحث عن الكود التالي بعد أن نقوم بتوسيع القالب من خلال التأشير على خانة توسيع قوالب عناصر واجهة المستخدم :
<b:section class='main' id='main' showaddelement='no'>
الخطوة الثانية وهي إضافة الكود التالي مباشرة أسفل الكود السابق الذي بحثنا عليه :
<div style='position: absolute; top: 0; left: 0; margin: 30px;
border: solid 2px #333; color: #000; background-color: yellow;
padding: 25px; width: 85%; z-index: 5;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;'>
<p><strong>My blog has moved!</strong></p>
<p>من المفترض أن توجه إلى الموقع الجديد .
إذا لم يحدث ذلك فأرجو أن تضغط على الرابط التالي :
<br/> <a style="color:red;"
href='http://www.website.com/blog/'>
<strong>http://www.website.com/blog/</strong></a>
<br/> ولا تنسى أن تحدث مفضلاتك .</p></div>
لنتوقف أيضا بعض الشيء مع هذا الكود لنقوم بشرح ماهيته :
الأخضر عبارة عن لون الكتابة وخلفية المستطيل الذي سيظهر .
الأصفر حجم الكتابة .
الأحمر وهي الجملة التي تريدها أن تظهر يمكنك أن تغيرها بأي شيء تريده .
الأزرق وهو الرابط الذي تريده أن يظهر داخل المستطيل .

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

انتهى الموضوع بحمد الله ، وتذكر دائما أن الردود مفتوحة لأي استفسار ، ملاحظة أو حتى انتقاد

2009-02-07

طريقة إضافة Emoticons إلى البلوجر بمساعدة Greasemonkey

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

Greasemonkey
حسنا لقد أعجبتك النتيجة إذا تابع معي طريقة إضافتها .
الخطوة الأولى وهي واضحة وتستلزم استعمال الفايرفوكس ، لذلك حمله من هنا وقم بتثبيته .
الخطوة الثانية : قم بفتح الفايرفوكس وأدخل لهذه الصفحة لكي تحمل منها إضافة Greasemonkey ، اضغط على Add to Firefox لكي تبدأ التحميل والتثبيت .
الخطوة الثالثة : بعد أن ينتهي التحميل و التثبيت وافق على إعادة تشغيل الفايرفوكس ، ستجد بعد ذلك هذا القرد Emoticons أسفل المتصفح مما يعني أن الإضافة تعمل .
الخطوة الرابعة : الآن يجب أن تحمل هذا الملف من هنا وهو الذي يحمل خواص الإبتسامات كالحجم والروابط والإسم ...
الخطوة الخامسة : الملف السابق الذي حملناه يلزمنا تثبيته ولفعل ذلك قم بتصغير المتصفح من خلال هذه الأيقونة الموجودة في الأعلى ، وقم بسحب الملف بداخل الفايرفوكس كما تسحب الملفات إلى سلة المهملات razz ، وافق على التثبيت وأعد تشغيل الفايرفوكس مرة أخرى lol
.
الخطوة السادسة والأخيرة وهي اختبار الإضافة هل تعمل أم لا ، ولعمل ذلك توجه إلى البلوجر وقم بتسجيل الدخول وابدأ في التدوين وستجد الأيقونات المبتسمة أمامك mrgreen .

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

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

حل مشكل انعكاس التصنيفات "Labels" في البلوجر

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

التسميات

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

التصنيفات

أولا وكما قضت العادة خذ نسخة احتياطية من قالبك ، ولمن لايعرف الطريقة : توجه إلى التخطيط ثم تحرير HTML ثم تنزيل قالب كامل .
ثانيا سأبدأ في الشرح :
الخطوة الأولى وإن لم تكن لديك تلك الإضافة قم بإضافتها من خلال عناصر الصفحة الموجودة لديك .
الخطوة الثانية سنتوجه فيها إلى القالب من خلال : التخطيط وتحرير HTML وقم بتوسيع القالب .
الخطوة الثالثة سنقوم فيها بالبحث عن هذا الكود من خلال الضغط على CTRL+F وإدخال الكود :
<span dir="ltr" >(<data:label.count/>)</span>

الخطوة الرابعة وبعد أن تجد الكود قم بالتظليل عليه وعوضه بهذا الكود :
<span>(<data:label.count/>)</span>

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

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

2009-02-06

إضافة أيقونة "Save as PDF" لحفظ المواضيع على شكل ملف PDF

Save as PDF
السلام عليكم ورحمة الله تعالى وبركاته .
أيقونة "Save as PDF" تتيح للزائر إمكانية حفظ الموضوع على شكل ملف PDF لقرائته وهو غير متصل بالأنترنت ، وهذه الإضافة مهمة جدا خصوصا للزوار الذين يتصلون من خلال مقاهي الأنترنت وليس لديهم الوقت الكافي لقراءة موضوع طويل ، هذا مثال فقط والأمثلة كثيرة ...
تتكرر الأيقونة مع كل موضوع لكي تقوم بحفظ كل موضوع على حدة .
طريقة إضافة هذه الأيقونة سهلة للغاية ، ومع ذلك فلابد من أن تأخذ نسخة من قالبك فقط احتياطا من أي خطأ ، ولعمل ذلك قم بالتوجه إلى
التخطيط ثم تحرير HTML واضغط على تنزيل قالب كامل .
الآن سوف نقوم بالتعديل على القالب :
الخطوة الأولى هي
توسيع قوالب عناصر واجهة المستخدم .
الخطوة الثانية هي البحث عن الكود التالي من خلال الضغط على CTRL+F :

<data:post.body/>

الخطوة الثالثة هي إضافة هذا الكود أسفل الكود السابق
<script type="text/javascript">
</script>
<script src="http://web2pdf.freepdfconvert.com/pdfbutton.js"
type="text/javascript">
</script>
قم بمعاينة القالب قبل حفظه
وإذا شاهدت الأيقونة قد أضيفت بعد كل موضوع فقد نجحت في تركيب الإضافة وحينها يمكنك حفظ القالب


انتهى الموضوع بحمد الله

2009-02-05

إضافة Personas لتخصيص ثيم للفايرفوكس بنفسك


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

لماذا Personas ؟

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

Image Hosted by ImageShack.us
Image Hosted by ImageShack.us

كيف استطاع Personas من حل هذا المشكل ؟

يمكنك Personas من تغيير شكل وواجهة الفايرفوكس في أقل من 10 ثوان ، بما فيها الصور الأيقونات الألوان والتصميم بشكل سهل وبسيط ، تستطيع تحميل Personas كذلك بشكل سريع وسهل فحجمه لا يتعدى 150 كيلوبايت وهو متوافق مع Firefox 2.0 وما بعده ، ويمكنك أن تتحكم في خواصه من خلال أيقونة أسفل المتصفح على اليسار ، يوفر لك باستمرار أجدد الثيمات وآخر تحديثاتها وكذلك أكثر الثيمات استعمالا وتستطيع استعمال ما تريده منها بمجرد اختيارها ، فلا تحميل ولا تثبيت فقط مجرد أن تختار الثيم سيتم اعتماده مباشرة .

Image Hosted by ImageShack.us

طريقة تخصيص ثيم للفايرفوكس باستعمال Personas !

إذا لم يعجبك أي ثيم فيمكنك أن تنتقل إلى المستوى التالي ، كما هو العنوان فإن المستوى التالي هو طريقة تخصيص ثيم للفايرفوكس بنفسك وبذوقك الخاص ، وبالطبع الطريقة سهلة للغاية يلزمك فقط الإلتزام ببعض الشروط البسيطة وهي كالتالي :
أبعاد صورة الشريط العلوي : Header : 3000 x 200 .
أبعاد صورة الشريط السفلي : Footer : 3000 x 100 .
يستحسن أن تكون الصورة بامتداد Png لأنها الأفضل في الجودة .
استخدم نفس امتداد الصورة في تصميم الأيقونات .

Image Hosted by ImageShack.us

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

لتحميل الأداة بالإصدار القديم .
لتحميل الأداة بالإصدار الجديد .

انتهى الموضوع بحمد الله .
لا تنسى أن الردود مفتوحة لإقتراحاتكم ، استفساراتكم أو حتى انتقاداتكم ...

2009-02-04

أداتين مجانيتين لصنع الخطوط بنفسك

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

Fontstruct

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

Fontstruct

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

Fontstruct

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

Fontstruct


FontForge

إذا كنت ممن يفضلون البرامج عوض تطبيقات الويب فإن برنامج FontForge هو الإختيار المثالي لك ، برنامج مجاني رائع يحتوي على اختيارات أكثر من التطبيق السابق ، وبالتالي فإنه صعب الإستعمال إذا ما قورن به فقط .

FontForge

برنامج FontForge يتميز بكونه يعتمد على الرسم الفعلي في صنع الخطوط بحيث تستطيع أن تتحكم بشكل كامل في الحرف الذي ترسمه ، ويعتمد في الرسم على نوع bitmap ، يدعم جميع امتدادات الخطوط ، ويعمل على جميع المنصات بما فيها Windows و Linux و Mac .
لمن يود أن يحترف البرنامج فبإمكانه رؤية هذه الدروس وهي الأفضل حاليا من بين الكل ، للأسف لم أجد مصادر للتعليم بالعربية .

FontForge

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

2009-02-03

تعريب قالب Zinmag Remedy

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

تعريب قالب zinmagremedy

المهم لمن يريد مشاهدة القالب بشكل مباشر ويكتشف ذلك بنفسه عن طريق هذا الرابط من هنا لكنه بالإنجليزية ، لكن يمكنك تجربة القالب فقط عن طريق المعاينة .
ولمن يريد تحميل القالب يمكنه تحميله من موقع 4shared من هنا .
تجدر الإشارة إلى أن القالب بالنسبة لي تم تعريبه بنسبة 95 في المائة فقط ، لكن للبعض وحسب الإستعمال فهو مكتمل التعريب .
نأتي إلى طريقة تثبيت القالب لمن لا يعرفها وهي كالتالي :
سجل الدخول إلى حسابك في البلوجر .
توجه إلى التخطيط ثم إلى تحرير HTML .
قم بالتظليل على القالب الذي تستعمله واضغط بيمين الفأرة واختر delete أو مسح .
توجه إلى خاصية " تحميل قالب من ملف على القرص الثابت لديك: " واضغط على تصفح أو Browse وقم باختيار القالب الذي قمت باختياره ، وأخيرا اضغط على إيداع ، وبهذا ينتهي التثبيت .
يمكنك تجاوز الخطوتين الأخيرتين بالتوجه إلى القالب الذي حملته وافتحه بمحرر نصوص وقم بنسخ الكل ولصقه في مكان القالب في البلوجر واضغط على احفظ القالب ، وستكون النتيجة نفسها السابقة .

2009-02-02

(#1) : أفكار ، اختصارات وروابط

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

  • للبحث في أي نص طويل كيفما كان نوعه يكفي الضغط على f3 ، وإدخال الكلمة أو الجملة أو الكود المراد البحث عنه .
  • طريقة الوصول إلى المواقع التي زرتها سابقا أو ما يسمى بـ History في أي متصفح يكفي الضغط على CTRL+H .
  • تستطيع من خلال موقع getfavicon الحصول على أي favicon تعجبك ولأي موقع بخطوتين ، الأولى اكتب الموقع والثانية حمل الـ getfaviconfavicon .

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


  • مع كوكل وخدماتها دائما ، وهذه المرة مع خدمة البحث عن الصور القديمة التي يتراوح عمرها ما بين 20 سنة وأكثر .

  • ولا ننسى أصحاب مدونات البلوجر الأعزاء فبفضل مدونة Buzz blogger الرسمية من بلوجر تستطيع الإطلاع على آخر الإضافات والتحديثات والتطويرات لهذه الخدمة .


  • لمن يحب الإطلاع باستمرار لآخر صيحات الإضافات للمدونات من صور موسيقى خرائط فيديو وثائق أخبار وغيرها الكثير فلا غنى له عن الموقعين التاليين : Apture و Blipback

  • تود معرفة Pagerank موقعك أو موقع آخر ولا تعرف كيف ، هذا الموقع يقدم هذه الخدمة مجانا بالإضافة إلى معلومات أخرى ، ما عليك سوى إدخال الموقع المراد معرفة Pagerank خاصته والظغط على Mutas .