<ul>
	<li>نقطة اولى</li>
	<li>نقطة ثانية</li>
	<li>نقطة ثالثة</li>
</ul>

• نقطة اولى
• نقطة ثانية
• نقطة ثالثة

li {
display:inline-block

}

سيجعل النقاط تظهر بهذه الطريقة

• نقطة اولى
• نقطة ثانية
• نقطة ثالثة

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

li{
display:inline-block;
zoom: 1;
*display:inline;
}

ملاحظة: كتبت هذا الموضوع في الأساس بالانجليزية في مجلة The MegaMag و ارتايت ان اترجمه هنا للفائدة .

فلنبدأ

خاصية Text-shadow ثم إضافتها في Css3 و هي تتيح لك إضافة ظل أو أكثر من ظل للنصوص .

بناء الجملة

• مسافية افقية و مسافة رأسية : يمكن ان يحمل قيم سالبة أو موجبة كما يمكن أن يحمل القيمة صفر .
• blur radius : و هي درجة تشتتت الظل مثلا صفر سيعطيك ظل حاد أو محدد أما القيمة ١٠ ستظهر ظل مشتت او غير معروف الأطراف ( أنا أحاول و بشدة أن اصيغ هذا بالعربية هل تلاحظ ؟؟ )
• لون الظل : لو لم يتم تحديده فإن لون الظل سيكون بنفس لون النص .

دعم المتصفحات

• Opera 9.5+(استخدام color: transparent غير مدعوم )
• Firefox 3.5+
• Safari 1.0+
• Google Chrome

مثال

لمشاهدة مثال حي للأمثلة في الأسفل شاهد صفحة الامثلة .

١- نص مشع … و إشعاع مضاعف

للحصول على النص المشع

.glow {

 color:#FFFFFF ;

 text-shadow:0 0 20px  yellow ;

 }

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

.extraGlow {

 color:white;

 text-shadow:0 0 30px  yellow , 0 0 70px  yellow ;

 }

2- نص على طريقة أبل

اشتهرت أبل بهذا التاثير على النصوص و هو ما يطلق عليه التأثير النظيف .

.applestyle{

 background:#666

 color: #000;

 text-shadow: 0px 1px 1px  #fff;

 }

3- نص بارز Emboss على طريقة الفوتوشوب

.Emboss  {

 background:#ccc ;

 color:#ccc;

 text-shadow: -1px -1px white, 1px 1px  #333;

 }

هنا اضفنا ظلين احدهما في الأعلى على اليمين و الاخر في الاسفل على اليسار . مشكلة واحدة في هذ الـتأثير ان لون الخلفية و النص واحد لكن لون الظل هو ما سيظهر او يحدد هذا النص لكن لو كان المتصفح لا يدعم Text-shadow فإن النص لن يظهر .

٤- نص مغمور pillow emboss على طريقة الفوتوشوب

مرة أخرى أكثر من ظل

.PillowEmboss {

 background:#ccc;

 color:#ddd;

 text-shadow: 1px 1px white,

 -1px -1px #444;

 }

5- نص مشتت

حصلت على هذه الحيلة من Simurai Website و هي حيلة ذكية بجعل لون النص شفاف و إضافة ظل مشتت.في المثال حددنا القيمة ١٠ لدرجة التشتيت لكن كلما زادت القيمة كان النص اقل وضوحا .

.blurytext {

 color: transparent;

 text-shadow: #fff 0 0  10px;

 }

6- نص بارز أو مغمور لا أعرف ..

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

.insettext{

color: #344251;

text-shadow: 1px 1px 0px #bad3ed;

font-weight: bold;

background:#bad3ed;

}

لون النص ولون الخلفية واحد .

٧- نص محوط

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

.Stroke{

 color:red;

 font-weight: bold;

 text-shadow: 1px 1px 0px  #000,

 -1px -1px 0px #000;

 }

قمت بإضافة ظلين حادين بدون تشتيت حيث قيمة التشتيت صفر و اضفت الظلين في اتجاهين متضادين .

٨- نص ثلاثي الأبعاد

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

الفكرة تكمن باختصار بإضافة اكثر من ظل و تحريك كل ظل بمقدار واحد بمعنى الظل الاول سيكون في ٢ و ٢ و الظل الثاني سيكون في النقطة ٣ و ٣ و الرابع في ٤و ٤ و هكذا .

.effect3D {
 color:rgba(255,255,0,.7) ;
 font-weight: bold;
 text-shadow: 1px 1px rgba(255,128,0,.7),
 2px 2px rgba(255,128,0,.7),
 3px 3px rgba(255,128,0,.7),
 4px 4px rgba(255,128,0,.7),
 5px 5px rgba(255,128,0,.7);
 }

ملاحظة

انا استخدم هذه المرة الخاصية RGBA لتحديد الالوان وهي أحد الافكار الجديدة التي سأتحدث عنها قريبا و لكن يمكن بالطبع وضع اللون كما في الطريقة العادية بواسطة مثلا #fffff او باستخدام اسم اللون مثلا White وهكذا .

الإجابة باختصار

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

<h2 class=" arabic feature " id="blogtitle " > نص </h2>

في المثال السابق عينا اكثر من Class  لنفس العنوان و هما arabic و feature .

أيهما أفضل

لا يوجد أفضل المسألة مسألة استخدام المناسب في المكان المناسب . و هذا يعتمد على التصميم فأنا مثلا استخدم Class اسميه button   مثلا لتحديد شكل الازرار في الموقع و بالتالي جميع الازرار ستحملClass=”button”  اما زر البحث مثلا سيحمل معرف خاص به لاني اريد التحكم به بشكل مختلف قد اعطيه class=”button” و سأعطيه كذلك  ID=”searchbutton”

ما الذي سيحدث لو لم التزم بذلك؟

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

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

فوائد أخرى

١- عند استخدام ID  مثلا لو كان قسم التعليقات في موقعك محاط بDiv  يحمل المعرف Id=”comment” و كتبت العنوان في المتصفح بهذا الشكل

http://qatardr.net/#comment

فان الصفحة ستحمل و سيتحرك  شريط التمرير إلى قسم التعليقات مباشرة .

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

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

ختام

غصة و همسة

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