يمكنك تحميل المكتبة من موقعها الرسمي 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() {

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

});

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

١-العمودين بنفس الطول

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

اولا : اضف الدالة التالية :

function equalHeight(group) {

tallest = 0;

group.each(function() {

thisHeight = $(this).height();

if(thisHeight > tallest) {

tallest = thisHeight;

}

});

group.height(tallest);

}

ثانيا : عند الاستخدام

$(document).ready(function() {

equalHeight($(".col1"));

equalHeight($(".col"));

});

حيث  col1  , col2  هو الكلاس المستخدم للعمود الاول و العمود التالي و يمكن بالطبع استخدام معرف Id هذا يعتمد على تصميمك .

المصدر : CssNewbie

٢- وصلات تصغير و تكبير النص

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

$(document).ready(function(){

// Reset Font Size

var originalFontSize = $('html').css('font-size');

$(".resetFont").click(function(){

$('html').css('font-size', originalFontSize);

});

// Increase Font Size

$(".increaseFont").click(function(){

var currentFontSize = $('html').css('font-size');

var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*1.2;

$('html').css('font-size', newFontSize);

return false;

});

// Decrease Font Size

$(".decreaseFont").click(function(){

var currentFontSize = $('html').css('font-size');

var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;

$('html').css('font-size', newFontSize);

return false;

});

});

ثم ضع اوسمة الhtml التالية في المكان الذي تريد للوصلات ان تظهر

<div id="changeFont">

<a href="#" class="increaseFont">تكبير </a>

<a href="#" class="decreaseFont">تصغير</a>

<a href="#" class="resetFont">الوضع الأصلي</a>

</div>

المصدر – مثال

٣- النوافذ المبثقة بطريقة اسهل

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

اضف الشفرة التالية

jQuery('a.popup').live('click', function(){

newwindow=window.open($(this).attr('href'),'','height=200,width=150');

if (window.focus) {newwindow.focus()}

return false;

});

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

<a href="http://qatardr.net" class="popup" >افتح في نافذة مبثقة </a>

المصدر

٤- لسان تبويب جديد Tab

لفتح الوصلات في لسان تبويب جديد بدلا من نافذة جديدة .

jQuery('a.newTab').live('click', function(){

newwindow=window.open($(this).href);

jQuery(this).target = "_blank";

return false;

});

اعطي الوصلة التي تريد فتحها في تبويب جديد الكلاس newTab

<a href="http://qatardr.net" class="newTab" >فتح في تبويب جديد  </a>

المصدر

٥- تلوين صفوف الجداول بألوان معاكسة

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

//Table Stripes

$(document).ready(function(){

$("table tr:even").addClass('stripe');

});

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

لو كنت تريد استهداف جدول معين اعط الجدول تعريف ID مثلا اسم mytable و عدل الكود بالطريقة التالية

//Table Stripes

$(document).ready(function(){

$("#mytable tr:even").addClass('stripe');

});

ما قمنا به هو ان الصفوف الزوجية even عينا لها الكلاس strip و الأن علينا تعريف الكلاس strip مع تعريفات css

.stripe	{

background: #444;

}

المصدر – مثال

6-معرفة الحقول الناقصة

يمكنك استخدام هذه الطريقة مع اي استمارة Form لديك

اضف الدالة التالية

function checkInput(errorArray) {

var fail = 0;

//Clear out any old error messages before we start as it will probably be different each time

$("span.error ol").children().each(function(n,item) {

$(item).remove();

});

//Select all input elements and see if they have a class named required

$(":input:not(input[type=button],input[type=submit],input[type=image])").each(function(index) {

$(this).removeClass("error");

if(($(this).val().length < 1 || $(this).val()=='Choose') && $(this).is('.required')) {

//Add the error class to the element to turn it red

$(this).addClass("error");

//Add the error message to the list

if(errorArray.length>0) {

//Use bespoke error messages

if(errorArray[index]!=undefined && errorArray[index]!='') $("span.error ol").append('<li>'+errorArray[index]+'</li>');

} else {

//Use the label name and append is required field

if(!$(this).is('.noerrorshow')) {

if($("label[for='"+$(this).attr('id')+"']").text()!=undefined) $("span.error ol").append('<li>'+$("label[for='"+$(this).attr('id')+"']").text()+' هو حقل مطلوب .'+'</li>');

}

}

++fail;

}

});

//Were we successful, if not return false so the form does not submit

if(fail != 0) return false;

return true;

}

و الأن عندما تريد استخدام الدالة لتطبيقها على أي استمارة لديك اعطي الاستمارة تعريف ID مثلا في حالتنا سنعطي الاستمارة myForm و سنعطي الحقول التي لا نريدها ان تترك خالية الكلاس  required

$(document).ready(function() {

$("#myForm").submit(function(){

var errorStrings = new Array();

if(checkInput(errorStrings)) {

return true;

} else {

$("span.error").show();

return false;

}

});

});

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

<span class="error"><h3>حدث الخطأ التالي:</h3><ol></ol></span>

لا تنسى إعطاء error خواصه بواسطة css

span.error{
display:none;
color:red
}

المصدر

٧- صور مصغرة مع نص

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

اولا : الصورة ستضاف بطريقة عادية استبدل

• image.gif بالصورة التي تريد  و ضع عنوان ووصف للصورة
• http://qatardr.net بالعنوان الذي تريد للزائر ان يتجه اليه عند الضغط على الصورة
• عنوان الصورة : بعنوان الموضوع مثلا
• وصف الصورة : بوصف للصورة مثل مختصر الموضوع مثلا
  

<div class="item">

<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>

<div class="caption">

<a href="http://qatardr.net">عنوان الصورة</a>

<p>وصف الصورة </p>

</div>

</div>

كرر الكود السابق لكل صورة تريد إضافتها .

ثانيا : اضف كود css التالي .

.item {
 width:125px;
 height:125px;
 border:4px solid #222;
 margin:5px 5px 5px 0;

 /* required to hide the image after resized */
 overflow:hidden;

 /* for child absolute position */
 position:relative;

 /* display div in line */
 float:left;
}

.item .caption {
 width:125px;
 height:125px;
 background:#000;
 color:#fff;
 font-weight:bold;

 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#0cc7dd;
 font-size:16px;

 /* add spacing and make the whole row clickable*/
 padding:5px;
 display:block;
}

.item .caption p {
 padding:5px;
 margin:0;
 font-size:10px;
}

img {
 border:0;

 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both;
}

ثالثا : اضف الكود التالي

$(document).ready(function() {

//move the image in pixel

var move = -15;

//zoom percentage, 1.2 =120%

var zoom = 1.2;

//On mouse over those thumbnail

$('.item').hover(function() {

//Set the width and height according to the zoom percentage

width = $('.item').width() * zoom;

height = $('.item').height() * zoom;

//Move and zoom the image

$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

//Display the caption

$(this).find('div.caption').stop(false,true).fadeIn(200);

},

function() {

//Reset the image

$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

//Hide the caption

$(this).find('div.caption').stop(false,true).fadeOut(200);

});

});

المصدر – مثال

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

هيا نطير

المثال هنا صفحة تحتوي على خلفية و صندوق للمحتوى .

و الكود هنا سهل للhtml سنضع التالي

<body>
<div id="wrap">
 النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا    النص هنا   النص هنا
</div>
</body>

و في الCss التالي

body { direction :rtl;text-algin :center;background:url('sky.jpg') repeat center ;}
#wrap { width :800px; margin:0 auto; background-color:white;min-height:200px;margin-top:100px;padding:30px}

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

الطريقة ١ :

اولا أضافة الصورة في اعلى الصفحة مثلا

<img src="plane.png" alt="plane" id="plane" />

<div id="wrap">
 النص هنا
</div>

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

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

الطريقة ٢

سأضيف الصورة بطريقة اخرى سأضع منطقة  Div جديدة و اسميها مثلا Plane و اضعها قبل منطقة  Wrap

<div id="plane"></div>
<div id="wrap">

 النص هنا
</div>

و هنا ستلاحظ لو استعرضنا الصفحة ان شيئا لم يتغير و لم تظهر اي طائرة .و لكن مهلا سنضيف Css التالي

#plane {
background:url('plane.png') no-repeat center center;
width:200px;
height:200px;
}

و في السطر الاول حددنا خلفية لمنطقة plane و هو ملف صورة الطائرة plane.png طلبنا ان لاتتكرر الصورة في المنطقة مثل خلفية الصفحة و لكن تظهر مرة واحدة باستخدام الامر no-repeat و ان تظهر في المنتصف افقيا و عموديا من خلال  Center .

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

و الآن ستظهر الطائرة بنفس الشكل السابق .

أين الطائرة

و الطائرة هنا ظهرت لكنها لم تظهر حيث نريد .. نريدها ان تنطلق إلى وجهتها . هل سمعت بالخاصية Position ؟

هي خاصية تعطي العنصر موقعه اما relevant أو absolute ما الفرق يينهما يمكنك القراءة في هذا الموضوع ..

في مثالنا هذا plane يحتاج لان يكون Absolute .

و سواء أضفت الصورة بالطريقة الأولى أو الثانية ستحتاج إلى

#plane {
position :absolute ;
top:100px;
left:5px;
}

حيث اعطينا الطائرة ان يكون لها position من نوع absolute و تبعد عن الاعلى بمقدار 100px و من اليسار بمقدار  ٥ بكسل بالطبع هناك ايضا خواص bottom و  right لو أحببت .

حمل المثال كامل من هنا

ملاحظة

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

في انتظار مقترحاتكم  و افكاركم عل و عسى اجد ما يناسبني .. و شكرا مقدما ..

اعتذر مرة أخرى عن التأخر في إضافة موضوعات جديدة و ادعوكم لزيارة مدونتي الانجليزية The MegaMag .

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