كيف تحصل على استضافة لموقع ونطاق بإسمك بأقل تكلفة!

بسم الله والحمدلله والصلاة والسلام عل ىسيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه بإحسان إلى يوم الدين..

يتمنى الكثير منا الحصول على موقع خاص بإسمه أو اسم شركته ليضعه على بطاقة العمل Business Card الخاصة به أو ليكتب فيه مقالات وينشرها أو غيرها من الاسباب، هناك الكثير من الشركات التي تعطيك استضافة مجانية ولكنها تقيّدك بنطاق خاص بها أي أنه سيكون اسما مركّبا مثلا comli.com أو bl.ee أو eys.es .. مثلا http://sudanewscast.bl.ee أو wdalhaj.comli.com .. هدفنا سيكون الحصول على الاستضافة المجانية وربطه مع نطاقك الشخصي.. com ، info، org ، الخ..  مثلا http://mohdali.com أو http://mmahgoub.com ، الموضوع حقيقة أبسط مما تتخيل واليوم سأقدم لكم طريقة سهلة لفعل ذلك.. تابعو معي الخطوات.

الخطوة الأولى: شراء النطاق

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

هناك العديد من الشركات في السودان بإمكانك شراء نطاق واستضافة عن طريقها ولكن من الشركات المميّزة شركة سوفتويكس Softwex ،  الجميل في هذه الشركة هو انه لا يتوجب عليك أن تذهب إلى مكتب الشركة لتحصل على الخدمة ، يكفي أن تحصل على بطاقة شحن من أقرب نقطة بيع تابعة للشركة وستحصل كل على الخدمات من حاسبك الآلي في مكتبك أو منزلك أو أي مكان باستخدام هاتفك الذكي ما يميزهم أيضا أن أسعارهم ممتازة . سنقوم الآن بإنشاء حساب جديد في موقع سوفتويكس ثم نشحن الحساب وذلك بشراء كرت أو بطاقة شحن بـ 150جنيها سودانيّا حيث أن تكلفة النطاق لمدة عام هي حوالي 120جنيهاً سودانياً (أو أكثر، إذا أردت الاشتراك لمدة سنتين قم بشراء كرت آخر ب 100ج حيث أن مجمل رسوم النطاق لسنتين هو حوالي 240ج ) من أقرب نقطة بيع وتنزيله في My Account > Softwex Account > Recharge Account .

1

recharg

الخطوة التالية هي اختيار النطاق وشراؤه :

من صفحة My Account سنختار  Order > New Domain فتنتقل بنا إلى هذه الصفحة نقوم بإدخال اسم النطاق المطلوب، ربما يكون النطاق الذي اخترته قد تم اختياره من قبل، لا بأس قم باختيار نطاق آخر.

2

 

 

3

 

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

 

لدينا الآن نطاق ولكنه بلا استضافة، توفر سوفتويكس استضافة تبدأ من حوالي 20 جنيها للشهر، أفضل سعر استضافة في السودان على الإطلاق ولكن نحن نريد تقليل التكاليف إلى أقل درجة ممكنة ولذلك اخترنا الاستضافة المجانية!

الخطوة الثانية: الحصول استضافة مجانية

الخطوة الثانية هي الاشترك في أحد خدمات الاستضافة المجانية وتسمى Hostinger ، تتيح هذن الاستضافة إمكانيات لا بأس بها منها معدل نقل بيانات Bandwidth بحجم 100جيجابايت ، وسعة تخزينية بحجم 2 جيجابايت وقاعدتي بيانات MySQL و غيرها من المتطلبات الأساسية لأي استضافة.

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

new hosting

 

ثم سنختار الخطة المجّانية :

hostinger

 

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

domain type

 

 

ثم تكتب اسم النطاق الخاص بك وكلمة السر وتختار متابعة :

domain type 2

 

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

 

domain last

لدينا الآن حساب استضافة من Hostinger ونطاق domain من سوفتويكس Softwex

final domain

سيتم إرسال رسالة إلى بريدك الإلكتروني فيها تفاصيل الدخول للوحة التحكم ومعلومات أخرى مثل FTP وإعدادات البريد SMTP .. وغيرها.

ما يهمّنا هنا هو أسماء الخوادم: وهي كالآتي

  • ns1.hostinger.ae
  • ns2.hostinger.ae
  • ns3.hostinger.ae
  • ns4.hostinger.ae

الخطوة الأخيرة

سنعود الآن إلى شاشة إدارة النطاق في موقع سوفتويكس Softwex :

My Account > iHost > My Domains

ونختار Manage

 

dom

 

ستظهر الصفحة الخاصة بإدارة النطاق :

dns

 

سنختار منها Change Nameservers والتي ستنقلنا إلى صفحة أخرى يمكننا من خلالها أن نغيير في Nameservers ليقوم بالتوجيه إلى شركة الاستضافة :

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

 

 

dn

 

 

 

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

 

final dns change

 

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

#

ختاماً أرجو أن أكون قد وفّقت في عرض المعلومات وتقديم الفائدة.

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه  وسلم – وعلى آله وصحبه والحمدلله رب العالمين.

 

التحميل الزائد لدوال جافاسكربت JavaScript Functions Oveloading

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وسلم- وعلى آله وصحبه ومن والاه.

نقدم لكم اليوم مرورا سريعا على موضوع التحميل الزائد في دوال جافاسكربت JavaScript Functions/Methods Overloading ونعني بذلك إمكانية أن تقبل الدالة عدداً من المتغيرات كـ Parameters بعدد مساوي أو أقل من الـ Parameters المحدد عند إنشائها، وقد يشمل المفهوم أيضاً أن تكون أنواع هذه المتغيرات مختلفة ( Number, Float, Double ،String, Object , Array … وغيرها) .

هذا المفهوم هو مفهوم برمجي عام ويوجد في لغات برمجة أخرى مثل ( Ada, C++, C#, D, and Java ) .

نلاحظ المثال التالي حيث لدينا الدالة welcome تستقبل اسم الشخص واسم المدينة وتقوم بعرض رسالة ترحيب.
هذه هي الدالة :

function welcome (PersonName,CityName) {

// سنقوم هنا باختبار صلاحية ما استقبلته الدالة
// PersonName و CityName
    PersonNameIsValid=(PersonName!=undefined)&&(PersonName!='');//returns true or false
    CityNameIsValid=(CityName!=undefined)&&(CityName!='');//returns true or false

//اسم الشخص والمدينة
    if(PersonNameIsValid&&CityNameIsValid)
        alert('Welcome '+ PersonName +' to '+CityName+'!');
//اسم الشخص فقط
    else if(PersonNameIsValid)
        alert('Welcome '+ PersonName +'!');
//اسم المدينة فقط
    else if(CityNameIsValid)
        alert('Welcome to '+CityName+'!');

//Parameters  بدون 
    else alert('Welcome!!!');
}//end welcome func

//******* tests الاختبارات ********
// welcome('ali','khartoum');//  welcome ali to khartoum!

// welcome('ali');//  welcome ali!
// welcome('ali','');//  welcome ali!

// welcome('','khartoum');  welcome to khartoum!
// welcome(khartoum');  welcome khartoum! نلاحظ هنا اعتبر ان الخرطوم هو اسم الشخص لأنه تم إمراره على أنه المتغير الأول

// welcome('','');//  welcome!
// welcome();//  welcome!

ما فائدة Overload ؟
هذه الخاصية تتيح لك استخدام نفس الدالة لمهام عديدة ، وتوفر مجهود إنشاء دوال أخرى.

يمكن إجراء اختبار النوع باستخدام الدالة typeof حيث تقوم بكشف نوع المتغير الذي تم إمراره كـParameter .

لتجربة الدالة قوموا بفتح أدوات المطور في قوقل كروم وافتحوا ال console ثم قوموا بنسخ الدالة welcome ولصقها في ال console ثم مفتاح Enter.
الآن قومو بكتابة welcome() في الــ Console ثم غيروا ال parameters .

console

عموما كانت هذه نبذة سريعة عن التحميل الزائد في دوال جافاسكربت..أتمنى أن تكونوا استفدتم.. 🙂

———————————-
المصادر:
John Resig – JavaScript Method Overloading
http://stackoverflow.com – Function overloading in Javascript – Best practices
مصدر الصورة

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه وسلم – والحمدلله رب العالمين
#

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

بسم الله والحمدلله والصلاة والسلام على رسول الله – صلى الله عليه وسلم – .

أثناء العمل على صفحة ويب احتجت أن أضيف بعض التفاعلية مع المستخدم ، مثل الاستجابة لضغطة الماوس (mouse click event) على عنصر معين ، ولكن واجهتني مشكلة عند استخدامي لـ Vanilla.js (فانلا هي اسم رمزي للجافاسريبت كما هي plain !) لإنشاء Event Listener لعدة عناصر من نفس التصنيف لهذا الحدث وإليكم السيناريو:

  • لدي عدة عناصر من نفس التصنيف Class وأريد أن أنفذ دالة معينة عند مرور مؤشر الماوس فوق أي من تلك العناصر.
  • مثلا ظهور صندوق Alert() فيه محتويات العنصر
  • توفر الجافاسكربت إمكانية عمل listener ولكن فقط باستخدام ID الخاص بالعناصر ولا يمكن استخدام Class ..
  • Vanilla.js تمكنك من إضافة Listener ولكن باستخدام الـ ID ولا يمكن ذلك باستخدام الـ Class  كالآتي :

    singleItem=document.getElementById('onlyOne');
    singleItem.addEventListener('mouseover',doTheAction);
    
    

    نلاحظ أن الحدث Event هو مرور مؤشر الماوس والنتيجة هي تنفيذ الدالة doTheAction.
  • ولكن كما ذكرنا سابقا ينطبق ذلك فقط على ID وليس مع الClass

الاستماع للجميع

الاستماع للجميع.. هذا هو العدل.. ولكن لكي يكون صوتك مسموعاً يجب أن يكون لديك هوية..

الحل هو إضافة ID للعناصر ثم إضافة مستمع Listener لكل عنصر على حدة :

نفترض أن هذه هي العناصر

<div class="colors">Green</div>
<div class="colors">Yellow</div>
<div class="colors">Blue</div>

بداية يجب أن نتحصل علها

all_elements=document.getElementsByClassName('colors');

ثم سنقوم بالمرور على مجوعة العناصر باستخدام حلقة التكرار for loop ثم نضيف ID لكل عنصر وبذلك يكون جاهزاً ليتم ربطه مع مستمع Event Listener

for (var i =0;  i <= all_elemnts.length - 1; i++) {

// هنا يحصل العنصر على رقم هوية جديد 
// ID
all_elemnts[i].id="el"+i;

//نضعه في متغير
el=document.getElementById('el'+i);

//الآن أصبح للعنصر  
// ID
// ويمكننا ربطه
el.addEventListener('mouseover',doTheAction);
}//endForLoop

//والدالة :
function doTheAction(){
// ستعرض محتوى العنصر
alert(this.innerHTML);
}

بالإمكان استخدام مكتبة جيكويري jQuery لهذه المهمة ولكن الموضوع أبسط من تضمين المكتبة بكاملها (91Kb) لصفحة صغيرة!
سنعرض الآن الحل الذي تجنبنا استخدامه بالجيكويري jQuery :
وهو عبارة عن سطر واحد فقط!!

$('.colors').on('mouseover',doTheAction);

الحل بسيط كما ذكرنا مسبقاً ولكنه مكلف من ناحية سرعة تحميل الصفحة.

ملحوظة

Vanilla.js ليست مكتبة، ليست إطار عمل، إنه مصطلح أُطلق على الجافاسكربت كما هي بدون تعديلات Plain .. وتم إطلاق هذا الاسم لجذب الاهتمام.. حيث أصبح المطورين يبحثون عن مكتبات الجافاسكربت وربما لا يعرف أحدهم شيئا عن صيغة Syntax الجافاسكريبت وماهيتها.. هم فقط يعرفون صيغة المكتبات مثل الجيكويري وغيرها.. للتوضيح الجافاسكريبت للجيكويري مثل البي اتش بي للكودإجنايتر… مافي أبسط من كده!

احصل على المثال

روابط مفيدة لتعلم الجافاسريت :

ختاما نتمنى لكم أوقاتا ممتعة مع الجافاسكربت.
#

وصلى الله وسلم وبارك على سيدنا محمد صلى الله عليه وسلم والحمدلله رب العالمين

تجربة تغيير الخطوط الإفتراضية لجوجل كروم!!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله -صلى الله عليه وعلى آله وصحبه وسلم تسليما كثيرا إلى يوم الدين..

سريعاً سنلقي نظرة على كيفية تغيير الإعدادات للخطوط في جوجل كروم.. فقد قمت بتغيير الخط اﻹفتراضي إلى Droid Arabic Naskh وأعجبتني الفكرة فأحببت أن أشارككم !!

الخطوات :

 

نفتح صفحة الإعدادات في جوجل كروم :
قائمة جوجل كروم

 

ثم نبحث عن خيارات تغيير الخطوط :
customize

 

نقوم بتغيير القيم الافتراضية للخيار الأول Standard Font والخيار الثالث Sans-Serif font  إلى أي خط ملائم ومريح للقراءة..في هذه الحالة قمت باختيار Droid Arabic Naskh :
change font

 

final
تغيير شكل الخط في تويتر

أخيراً كيف ستظهر الخطوط الجديدة؟ لدينا مثال هو تويتر و موقع المدونة

final2
تغيير شكل الخط في المدوّنة

 

الأمر بسيط!

أتمنى أن يكون تلميحاً مفيداً.. شكرا للمتابعة! دمتم بود..

وصلى الله وسلم وبارك على سيدنا محمد -صلى الله عليه و سلم- والحمدلله رب العالمين..

كيف تستخدم jQuery Colorbox مع معرض صور ووردبريس

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله وعلى آله و صحبه و من والاه بإحسان إلى يوم الدين.

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

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

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

سنقوم إن شاء لله باستخدام إضافة jQuery Colorbox في قالب ووردبريس لصنع معرض صور يدعم تكبير الصور وبدون استخدام أي إضافة من إضافات وردبريس وسيتم التطبيق في قالب ووردبريس 2011 (twentyeleven) وهو القالب الافتراضي المُفعّل في إصدارة ووردبريس 3.5 .

قبل البدء علينا أن ننشئ معرض صور ، نفتح شاشة الإدارة ونختار تدوينة جديدة ثم نقوم بإختيار إضافة وسائط من الزر تحت حقل عنوان التدوينة:

إضافة معرض وسائط

ثم نقوم بإضافة صور من الجهاز أو من تلك الموجودة في مكتبة الصور :

إضافة ملفات وسائط

ثم نقوم بتحديد جميع الصور و الضغط على زر إنشاء معرض جديد والموجود في زاوية الشاشة اليسرى أسفل الشاشة :

إنشاء معرض الصور

ستظهر شاشة أخرى تعرض خيارات للصور (تغيير ترتيب عرض الصور وإضافة وصف لكل صورة) وأيضا خيارات للمعرض يسار الشاشة (تحديد عدد الأعمدة -يعني عرض الصور في عمودين ، ثلاثة.. الخ- وتحديد رابط الصورة).
نقوم باختيار 3 أعمدة ثم نختار من القائمة المنسدلة خيار “رابط لـ ملف الوسائط” ثم نختار زر إدراج المعرض :

إعدادات معرض الصور

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

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

معرض الصور في التدوينة

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

استخدام jQuery Colorbox في المعرض :

سنقوم بوضع ملف jquery.colorbox.js في مجلّد js وملف colorbox.css في مجلّد inc .
ثم سنقوم بتضمين الملفيّن في ملف الترويسة header.php داخل وسم head وقبل إغلاق الوسم مباشرة:
(قبل ذلك سنقوم بتضمين ملف مكتبة jQuery لأنه ضروري لعمل الـ colorbox).

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>


هناك أيضا ملفات صور تجدونها في مجلد images والموجود داخل مجلد الخاص بالـ colorbox ، أيضا يجب نسخ هذا المجلد و وضعه في مجلد inc الموجود في قالب twentyeleven .

تفعيل colorbox لعرض الصور :

لكي يعمل الـ colorbox بصورة صحيحة فإن الصورة المراد تكبيرها يجب أن تكون داخل عنصر anchor (أي وسم a).
.
للتوضيح أكثر لاحظ الآتي :
هذه هي طريقة استخدام الـ colorbox :

  $('.x').colorbox();
ويتم تطبيقه على :
<a class="x" href="مسار الصورة الكاملة">
    <img src="مسار الصورة المصغّرة"/>
</a>

لكن في حالتنا فإن الصور موجودة و الروابط موجودة..ونحتاج فقط لمعرفة class وسم الـ anchor الذي يحوي الصور و نضعه مكان ( x. ) الموجود في المثال أعلاه.

ولكن كيف سنعرفه؟
سنقوم بفتح كود الصفحة لمعرفة كيف سنصل للرابط و ذلك باستخدام أدوات تطوير قوقل كروم (أو ما يوازيها مثل Firebug في فايرفوكس أو Dragonfly في أوبرا ).

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

الكود المظلل بالأزرق الخفيف هو وسم الصورة التي ضغطنا عليها بالفأرة:

كود الصورة

الآن نرصيد أن نصل للرابط باستخدام الجيكوري ولكن المشكلة هي أن العنصر (الرابط a) الذي يحتوي الصورة (لا يوجد فيه class) و لذلك سنستخدم العنصر الأعلى منه (dt) للوصول إلبه وهو الـ class الموجود فيه هو gallery-icon :
(يتم وضع الكود التالي بعد في ملف header.php قبل وسم إغلاق head مباشرة)

<script>
$(function () {

  $(".gallery-icon a").colorbox(); /* دالة تفعيل الإضافة*/

});
</script>

نقوم بإغلاق أدوات التطوير ثم نقوم بإعادة تحميل الصفحة Refresh وذلك بالضغط على F5 .
ثم نقوم بتجربة المعرض مرة أخرى.. colorbox يعمل!!
معرض صور colorbox - غير مترابط

ولكن هناك مشكلة..كل صورة تعرض في صندوق colorbox على حدة وليست على شكل معرض مترابط ( أزرار التالي و السابق ومفاتيح يمين و يسار في لوحة المفاتيح للتنقل بين الصور ).

يوفر colorbox خيار أن تكون الصور مترابطة ولكن يجب أن يكون جميع وسوم الروابط التي تحوي الصور لها نفس الـ class لذلك سنقوم بإضافة التصنيف cbox يدوياً إلى الروابط :

$(".gallery-icon a").addClass('cbox');/* لتكون الصور مترابطة يجب أن يكون لها نفس التصنيف */

و سنقوم بتعديل طفيف على دالة تفعيل الـ colorbox حيث سنضيف خيار معرض الصور المترابطة كالآتي :

$(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

ليكون الكود بالكامل هو:

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>

<script>
$(function () {
    $(".gallery-icon a").addClass('cbox');
    $(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

});

</script>

ثم نقوم بتجربة المعرض مرة أخرى :
معرض صور colorbox

تعمل بصورة جيدة!!

المصادر:
مكتبة jQuery Colorbox
الصور من Radhia-Dz في فلكر
#

وصلى اللهم وسلم وبارك على سيدنا محمد و على آله و صحبه و من اتبع هداه إلى يوم الدين و الحمدلله رب العالمين.

تعلم كيف تستخدم Stylish لإخفاء اقتراحات فيسبوك!

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.

هل أزعجك عمود الاقتراحات الجانبي في فيسبوك؟ إليك طريقة سريعة و سهلة لإخفاءه!
سنتسخدم اليوم إضافة رائعة لمتصفحيْ قوقل كروم و فايرفوكس تقوم بإضافة style يحدده المستخدم لكل أو لبعض صفحات الويب.. بالرغم من أنه بالإمكان استخدامها كـ Ad Blocker كما في المثال الأول إلا أنها تكون فعالة أكثر في تحسين واجهات المواقع لتلائم مزاجك كما سنرى في المثال الثاني.

 

  المثال الأول و هو إزالة اقتراحات فيسبوك:

الخطوات كالتالي :

    1. سنقوم بتركيب الإضافة (Stylish) في متصفحك من متجر تطبيقات كروم إذا كنت تستخدم قوقل قروم أو من مركز إضافات موزيلا  إذا كنت تستخدم فايرفوكس.
    2. ثم نقوم بفتح شاشة خيارات الإضافة Options كما نلاحظ في النقطة 1 و نضيف style جديد عن طريق Add New Style لاحظ مكان النقطة 2.general1
    3. تظهر لنا شاشة أخرى نقوم بكتابة الكود التالي في صندوق الـ style :
      .ego_section{
      display:none;
      }

      – نقوم بكتابة مجال تطبيق الـ style في الصندوق الصغير بالأسفل facebook.com ونختار URLs on the domain .
      – ثم نذهب للقسم الأيسر من الشاشة ونكتب اسم الـ style الجديد ونقوم بتفعيله عن طريق التأشير على Enabled ونضغط حفظ save .

      style_writing

    4. تصفحا سعيداً!!

 

المثال الثاني :استخدام Stylish لتحسين واجهة موقع ويب:

استخدم إضافة Stylish لتحسين طريقة عرض التدوينة المفردة في موقع رؤوف شبايك لأتمكن من قراءة المقالات بصورة سهلة 😉

موقع شبايك (تدوينة مفردة single post) بصورته العادية:

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

موقع شبايك (تدوينة مفردة single post) بعد استخدام Stylish :

موقع شبايك (تدوينة مفردة) بعد استخدام Stylish

 

.post_content{
padding: 0 20px;
line-height: 33px;
text-align: justify;
font-size: 18px
}

.sidebar {display:none;}

.main {
float:none;
width: 801px;
margin: 0 auto; /* لتوسيط الصندوق في وسط الصفحة */
}

.post {
overflow: hidden;
background: #2B2B2B;
color: white;
}

.post .post_title {
color: #333;
}

هنالك العديد من الـ Styles المختلفة والجاهزة للتنزيل والاستخدام تجدونها في موقع userstyles.

#

دمتم بود 🙂

وصلى اللهم و سلم و بارك على سيدنا محمد وعلى آله وصحبه و سلم و الحمدلله رب العالمين

 

مشكلة إضافة jQuery Live Tweet

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه ومن والاه بإحسان إلى يوم الدين.

jQuery Live Tweet  هي إضافة رائعة للجيكويري jQuery تقوم بعرض عدد من التغريدات من حساب أي مستخدم في تويتر.

وتوفر توفر عدة خيارات منها :

  •  اسم المستخدم .
  • عدد التغريدات .
  • قالب العنصر ( كيفية عرض التغريدة المفردة ) .
  • لغة العرض.
  • وأخرى..!

استخدامها بسيط حيث تقوم بتضمين مكتبة الجيكويري و تضمين مكتبة إضافة الـ jQuery Live Tweet حيث #tweets_container هو العنصر من الصفحة الذي يحوي قائمة التغريدات للمستخدم المطلوب ( jabanalab على سبيل المثال ) :

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="jquery.livetweet.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
   $('#tweets_container').livetweet(
{     
'username' : 'jabanalab'   
}); 

});
// ]]>
</script>

وكود الـ HTML

<body>
  <div id="tweets_container"></div>
</body>

الصورة التالية توضح نتيجة الإضافة مع قليل من التعديل في css :
نموذج لاستخدام الإضافة

ولكن ما هي المشكلة!
المشكلة هي أنه باستخدام الإضافة بحالتها الراهنة فإنها سوف ترجع بالخطأ “404 المحتوى غير موجود” !
السبب هو أن المطورين في تويتر قامو بتغيير API (وترمز إلى : واجهة برمجة التطبيقات Application programming interface ) والتي تمكّننا من الوصول لتغريدات المستخدم.

حل المشكلة :
سنقوم بتغيير السطر 72 في ملف jquery.livetweet.js ليوافق الـ API الجديدة من :

  url : 'http://api.twitter.com/status/user_timeline/'+settings.username+'.json?count='+settings.limit+'&include_rts=1&callback=?',

إلى

  url : 'http://api.twitter.com/1/statuses/user_timeline/'+settings.username+'.json?count='+settings.limit+'&include_rts=1&callback=?',


تنزيل المثال

#
وصلى اللهم و سلم وبارك على سيدنا محمد والحمدلله رب العالمين

من أجل CSS3 Transitions أفضل

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله و على آله و صحبه و من والاه بإحسان إلى يوم الدين.

إليكم تلميحاً سريعاً في الحركة الانتقالية CSS3 Transitions وهي الفرق بين استخدام الحركة الانتقالية (وأعني باستخدامها مكان وضع الكود)في الوضع العادي {}div أم في وضع مرور الماوس {}div:hover سنطبق الحركة على الصندوقين بالأسفل. سنعطي الصندوقين أسماء تعريفية مختلفة ID سيكون للصندوق الأول (square1) وللثاني (square2) ونضيف لهما وضع مرور الماوس :hover.سنأخذ كود الحركة من موقع css3please.com حيث سنقوم بنسخ كود الحركة الموجود داخل {}box_transition. ونلاحظ الفرق في الحركة الانتقالية عند استخدامها مع الوضع العادي أو في وضع الـ :hover.

.box{/* هذا هو الشكل العام لكلا الصندوقين*/
display:inline-block;
background-color:brown;
color:white;
padding:10px;
margin-right:10px;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
}

#square1{
/* كود الحركة الانتقالية */
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;  
-ms-transition: all 0.3s ease-out;  
-o-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out;  
}
#square1:hover{
background-color:green;
}

#square2{}

// :hover نلاحظ كود الحركة موجود في 
#square2:hover{
background-color:green;
/* كود الحركة الانتقالية */
-webkit-transition: all 0.3s ease-out;  
-moz-transition: all 0.3s ease-out;  
-ms-transition: all 0.3s ease-out;  
-o-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out;  
}

في حالة استخدام الحركة الانتقالية مع الوضع العادي normal
في حالة استخدام الحركة الانتقالية مع وضع مرور الماوس :hover

نلاحظ أن استخدام كود الحركة مع الوضع العادي normal state يسمح بالحركة الانتقالية بالاتجاهين أي عند مرور الماوس و خروجه،أما وضع الكود داخل وضع الـ :hover فهو يسمح بالحركة فقط باتجاه واحد.
كانت هذا تلميحاً سريعاً نتمنى أن يكون مفيداً.
ودمتم..

وصلى اللهم و سلم وبارك على سيدنا محمد و على آله و صحبه و سلم تسليما كثيرا إلى يوم الدين والحمدلله رب العالمين