من أجل 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 فهو يسمح بالحركة فقط باتجاه واحد.
كانت هذا تلميحاً سريعاً نتمنى أن يكون مفيداً.
ودمتم..

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

كيفية عمل صندوق بحث بنكهة آبل – الجزء الثاني

صندوق بحث آبل- الجزء الثاني

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

اليوم سنكمل –إن شاء الله- ما بدأناه في الدرس السابق وذلك بتفعيل صندوق البحث ليقوم بالبحث في قاعدة بيانات مجهزّة مسبقا ثم يقوم بعرض النتائج في المتصفح و كل ذلك يتم (أجاكسيّاً).

ما هي الفكرة الأساسية؟

الفكرة ببساطة هي البحث في قاعدة البيانات كلما كتب المستخدم حرفاً في صندوق البحث و عرض النتيجة مباشرة كما في الشكل:

ajax search
كيفية ظهور نتائج البحث

ولكن ما هو الأجاكس Ajax؟

نظرة تاريخية

“ليس له علاقة مع أجاكس أمستردام!”
إن “أجاكس” ليس تقنية في حد ذاته و إنما هو مصطلح يرمز لعدة تقنيات تعمل سوياً.فكلمة أجاكس Ajax  هي اختصار لـ (Asynchronous JavaScript and XML )  استخدم المصطلح أول مرة مطوّر المواقع Jesse James Garret  عام 2005 :

“كنت محتاجاً لشيء أبسط من جملة:

Asynchronous Javascript + CSS + DOM+ and XMLHttpRequest

لكي أستخدمه عند مناقشة هذا المفهوم مع العملاء.”

ما هو….عمليّا؟

بصورة مبدئية.. يكفي القول بأنه عمل طلب ( Http Request ) للخادم (السيرفر) و التعامل مع النتيجة من هذا الطلب بدون إعادة تحميل الصفحة أو الانتقال لصفحة أخرى. والأمثلة على ذلك كثيرة:

أمثلة لتطبيقات أجاكس
قوقل مليئة بتطبيقات الأجاكس... لاحظ أيضا ظهور التحديثات في تويتر.

 

أعتقد أن الصورة اتّضحت نوعاً ما!! الأجاكس موضوع ممتد و ربما سنتطرّق إليه لاحقاً بإذن الله.

الملفات المستخدمة:

 

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

الصفحة الرئيسية التي تحوي صندوق البحث والـ CSS والجافاسكريبت متمثلة في الجيكويري.و ملف البي اتش بي PHP الذي يحوي كود البحث في قاعدة البيانات.

الخطوات:

  1. الــ HTML و ال CSS .
  2. الـجيكويري JQuery والأجاكس Ajax.
  3. البي اتش بي PHP .

 

أولاً : HTML  و CSS :

إلى الأعلى
سنضيف أولا قائمة نتائج البحث مع الصور بمحتوى وهمي Dummy Content قبل بدء أي شيء وذلك لتسهيل تحديد شكل القائمة و موضعها بالنسبة لصندوق البحث عند عرض النتائج لاحقا.ثم سنقوم بحذف المحتوى الوهمي و من ثم إخفائها وذلك بالخاصية display:none في الــ CSS .

محتوى وهمي
تم إضافة بعض المحتوى الوهمي لضبط خصائص و أبعاد صندوق البحث

HTML :

كود الـ HTML لقائمة نتائج  البحث:

 
<div id="menu" class="r25">
 <img id="wait" src="imgs/wait.gif" alt="loading"/>
<input id="search" class="r25" type="text" />
<ul>
  <li> < img src="imgs/products/ipad.png"/ >
<h4>ipad</h4>
All-new thinner, lighter design. Faster A5 chip. FaceTime video calling. With the same 10-hour battery. It's not a tablet, it's iPad.</li>
</ul>
</div>

CSS :

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

 
#results{ /*    تنسيق صندوق البحث   */
width: 360px;
background: #fff;/* #fff=white */
list-style: none;/* منع عرض نقط أو مربعات بجانب كل نتيجة */
text-align: center;
display: none;/* لن يتم عرض صندوق البحث إلا عند الكتابة على صندوق البحث */
position: absolute;
margin-top:0px;
padding: 0px;
border:1px solid #e2e2e2; /* #e2e2e2 = pretty light gray*/
/* the radius */
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius:  5px;
/* the box shadows  إضافة ظل على صندوق البحث...بحيث يكون خفيف الظل */
-moz-box-shadow: 0px 5px 10px black;
-webkit-box-shadow:0px 5px 10px black;
box-shadow: 0px 5px 10px black;
}

#results li{ /* تنسيق نتائج البحث */
height: 64px;
border-bottom: 1px solid #e2e2e2;
padding:5px;
}

#results li:hover{/* تنسيق النتائج عند مرور مؤشر الماوس فوقها */
background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#fff)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #e2e2e2, #fff); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #e2e2e2, #fff); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #e2e2e2, #fff); /* IE10 */
background-image:      -o-linear-gradient(top, #e2e2e2, #fff); /* Opera 11.10+ */
background-image:         linear-gradient(top, #e2e2e2, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#fff'); /* IE6–IE9 */
}
#results li h4,p{
padding: 0px;
margin: 0px;
}

#results li p{/* تنسيق وصف كل منتج من المنتجات */
color:gray;
font-size:12px;
margin-left:5px;
}
#results img{/*  تنسيق الصور المعروضة في نتائج البحث */
float:left;
}

#wait{/*   هذا هو الجزء المتعلق بمؤشر البحث و هي صورة صغيرة متحركة في أقصى يسار صندوق البحث الغرض منها إظهار وجود عملية جارية حالياً */
display: none;/*  لن يتم عرضه حتى تتم الكتابة في صندوق البحث */
position: absolute; /* */
margin-top: 3px;
margin-left: 3px;
}

مهلاً مهلاً من أين يأتي كل هذا الـ CSS!!؟؟

البعض تعوّدت كتابته مباشرة و لكن من أفضل المواقع لتعلّم الــ CSS هو CSS3PLEASE.com قم بتطبيق خصائص الـ CSS مباشرة ثم انسخها إلى صفحتك..الأمر بسيط!!


ثانياً : الجافا سكربت (مكتبة الجيكويري) والأجاكس :

إلى الأعلى

الأجاكس

ميكانيكية العمل ببساطة على التسلسل الآتي:
عند التركيز بالماوس على صندوق البحث يكون محرك الحدث هنا هو الــتركيز focus والذي يفعّل الدالة animate التي تقوم بتحريك الصندوق.وقد قمنا بإعدادها مسبقاً.

كتابة الكلمة المراد البحث عنها :محرك الحدث هنا هو الضغط على لوحة المفاتيح keyup  والذي بدوره ينادي الدالة $.ajax() لتقوم بعملها.

سنقوم الآن بإعداد الجزء من الجافاسكربت الذي يستمع للوحة المفاتيح Keyboard Event .و يقوم بتنفيذ ما بداخله – كود الأجاكس – عند الضغط على لوحة المفاتيح keyUp.

 
//onKeyUp
$('#search').keyup(function(){// سيقوم البحث بتنفيذ الدوال والأوامر التالية عند رفع الأصبع عن أحد ازرار لوحة الفاتيح
  

  if($(this).attr('value')!="")//اختبر ما إذا كان صندوق البحث يحوي نصاً أم لا ..إذا كان يحوي نصاً سيقوم بإظهار مؤشر (جاري البحث) سم يقوم بتنفيذ دالة الأجاكس،أما إذا كان لا يحوي شيئا فسوف يتخطى جميع الكود الآتي و يقوم بعرض رسالة (أكتب للبحث).
  {
  $('#wait').css('display','block');//أظهر مؤشر جاري البحث إذا كان  هنالك محتوى في صندوق البحث
/********************************************/
//يتم وضع كود دالة الأجاكس هنا...بحيث يقوم  بالتنفيذ مع كل ضغطة على لوحة المفاتيح
$.ajax()
{
}
/********************************************/

}//end if
  else 
  $('#results').html("<h4>أكتب للبحث</h4>");//اطبع هذه الرسالة في حالة عدم و جود نص في صندوق البحث

});//end keyup

نستخدم الآن الدالة $.ajax() وكما ذكرنا سنضعه داخل الكود أعلاه:

 
  $.ajax({
                type: 'POST',//طريقة الطلب إما post و get
                url: 'ajax_search.php',//ملف البي اتش بي الذي سيتم مناداته و ارسال مفردة البحث إليه و الذي بدورة سيقوم بالبحث في قاعدة البيانات
                data:'search='+$(this).attr('value'),//المتغيرات التي سيتم ارسالها
        success: function(html) {
      
          $('#results').fadeIn();  // أظهر قائمة النتائج،لاحظ أنها حتى هذه اللحظة لا يحوي شيئاً
        
        if(html=="")//قم بعرض رسالة تفيد عدم وجود نتيجة إذا كانت النتيجة (لا شيء)
          $('#results').html("< h4 >لا توجد نتيجة..حاول استخدام كلمة مفتاحية أخرى</ h4 >");
    
        else 
          $('#results').html(html);// اعرض النتيجة المرسلة من ملف البي اتش بي
        
    
        $('#wait').fadeOut();//قم بإخفاء مؤشّر جاري التحميل بعد استقبال المحتوى من ملف البي اتش بي
                }
        
        });

السطر الأول type يوضح طريقة إرسال البيانات باستخدام GET  أو POST .

السطر الثاني url وفيه يتم تحديد وجهة طلب الأجاكس والملف الموضوع هنا هو ajax_search.php و هو الذي سيبحث في قاعدة البيانات و يقوم بإعادة النتيجة باستخدام الدالة echo .

في السطر الثالث data نقوم بتحديد المتغيرات التي نودّ إرسالها إلى صفحة الـ PHP وقد أرسلنا هنا المتغير search و أسندنا إليه النص الموجود في صندوق البحث.

دالة success يتم تنفيذها حينما يكون طلب الأجاكس ناجحاً.. وظيفتها استقبال البيانات القادمة من ملف الـPHP وعرضها في المتصفح. لاحظ المتغير html : يمثِّل البيانات القادمة من ملف الــPHP.

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

كان هذا في الدرس السايق..و لكن تم تعديل تنفيذ الدالة Blur لتقوم بإخفاء قائمة النتائج أولاً ثم تصغير صندوق البحث بعد ذلك.

 
//onBlur   
$("#search").blur(function(){

  $("#results").fadeOut({ //قم بإخفاء قائمة صندوق البحث
    duration: "slow", // ببطىء
    complete: function(){ //وعند الانتهاء من عمليه الإخفاء..قم بتنفيذ هذه الدالة
  
    $('#search').animate({ //قم بتصغير صندوق البحث
       "width": "90px",//تصغير العرض
      "backgroundColor": "#a2a2a2",//تغيير اللون إلى الرمادي
      "-webkit-box-shadow": "0px 0px 0px gray",//إلغاء ظل الصندوق
      "-moz-box-shadow": "0px 0px 0px gray" ,//إلغاء ظل الصندوق
      "box-shadow": "0px 0px 0px gray",//إلغاء ظل الصندوق
      "border":"1px solid #a2a2a2"  //تعيين خط رمادي يحيط بالصندوق
       
      }, 300 ),//وليكن هذا الحدث خلال فترة 300 ملليثانية
    

     $('#search').css({
      "background-image":"url(imgs/white_magn.png)"
      }),
     

    $('#search').attr("value","");//تنظيف صندوق البحث من أي نص بداخله
  
  
    }//end function
  });//end fadeout

});//end blur



ثالثا البي اتش بي PHP:

إلى الأعلى

طريقة عمل PHP هي كالآتي: نتصل بقاعدة البيانات.. نستقبل الكلمة المراد البحث عنها ثم نتأكد من صلاحيتها.. نقوم بعملية البحث..ثم نرسل البيانات على شكل HTML باستخدام الدالة echo إلى الجيكويري مرة أخرى ليعرض النتائج في صفحة الــ HTML.

(من الجدير بالذكر هنا أن PHP يرسل المتغيرات إلى ملفات الفلاش أيضا عن طريق الدالة echo).

سنقوم في البداية بإنشاء جدول البيانات وتتكون من 3 حقول رئيسية وهي اسم المنتج واسم صورته و وصفه .

 

CREATE TABLE `apple` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(50) CHARACTER SET latin1 NOT NULL,
  `image` varchar(50) CHARACTER SET latin1 NOT NULL,
  `description` text COLLATE latin1_general_ci NOT NULL,
  PRIMARY KEY (`id`)
);

ملف الاتصال connection.php:
والذي يقوم بالاتصال مع قاعدة البيانات.

 
//incs/connection.php
// الاتصال مع قاعدة البيانات
$connection = mysql_connect("localhost","username","password"); 
  if (!$connection) {
    die("  فشل الاتصال: " . mysql_error());
  }

  $db_select = mysql_select_db("db-name",$connection);
  if (!$db_select) {
    die("فشل اختيار قاعدة البيانات : " . mysql_error());
  }


ثم ملف الدوال:
ملف الدوال functions.php
يحوي على الدالة mysql_prep التي تقوم بتنظيف ما أدخله المستخدم وتزيل أي إدخال مشبوه : Code Injection

هذه هي الـsnippet المفضّلة لدي لتنظيف إدخال المستخدم وإعدادها للإستخدام الآمن.
 
//incs/functions.php
  function mysql_prep( $value ) {
    $magic_quotes_active = get_magic_quotes_gpc();
    $new_enough_php = function_exists( "mysql_real_escape_string" ); // i.e. PHP >= v4.3.0
    if( $new_enough_php ) { // PHP v4.3.0 or higher
      // undo any magic quote effects so mysql_real_escape_string can do the work
      if( $magic_quotes_active ) { $value = stripslashes( $value ); }
      $value = mysql_real_escape_string( $value );
    } else { // before PHP v4.3.0
      // if magic quotes aren't already on then add slashes manually
      if( !$magic_quotes_active ) { $value = addslashes( $value ); }
      // if magic quotes are active, then the slashes already exist
    }
    return $value;
  }



أخيرا نعود إلى الملف الـ PHP الرئيسي:
 
  
        header ('Content-type: text/html; charset=utf-8');
  require_once('incs/functions.php');//يتم مناداة الملف  التالي لاستخدام الدالة الموجود فيه
  require_once("incs/connection.php");//يتم مناداة هذا الملف للاتصال بقاعدة البيانات

// The search stuff  

//استقبال المتغير الذي يحوي كلمة البحث و تنظيفه من أي كود إدخال مشبوه
$search=mysql_prep($_POST['search']);

  $data="";
  if($search!="")
  {
          $query = "SELECT * ";
      $query .= "FROM apple ";
      $query .= "WHERE product_name like '%". $search ."%' LIMIT 6";
      
      $result_set = mysql_query($query,$connection) or  die("Database query failed: " . mysql_error());
      
        if(mysql_num_rows ($result_set)>0)//إذا هناك نتائج...
        {    

          while ($row = mysql_fetch_array($result_set)) //التعامل مع نتيجة البحث سطراً سطراً و تقسيم كل سطر إلى مصفوفة للحصول على قيمة كل حقل على حده.
          {
            $image=$row['image'];//تخزين اسم الصورة
            $pname=$row['product_name'];//تخزين اسم المنتج
            $desc=$row['description'];//تخزين الوصف

//يتم إسناد المحتوى الأساسي لقائمة النتائج الصور و اسم المنتج و وصفه في المتغير التالي والذي سيتم إرساله فيما بعد أجاكسيّا ليقوم الجي كويري بعرضه
            $data.="<li><img src='imgs/products/$image' /><h4>$pname</h4><p>$desc</p></li>";
          }//end while loop
          
        
        }//end if
    
      

  
  }//end if
        
  echo $data; // قم بارجاع النتيجة إلى الجيكويري ليقوم بعرضها..إذا كانت تحوي شيئا سيعرضها..و إذا كانت فارغة سيعرض رسالة تفيد بعدم وجود نتيجة..



كان بالإمكان أن وضع كل الكود بي بما فيه ملفي الاتصال connection.php و الدوال functions.php داخل ملف البي اتش بي الرئيسي و لكن من الأفضل فصل المحتوى لعدة أسباب..منها تسهيل إصلاح الأخطاء..التنظيم ،على سبيل المثال قد تحتاج إلى استخدام كود الاتصال أو دالة الإعداد mysql_prep مرة أخرى في ملف آخر..فليس هناك حوجة لإعدادة كتابة الدالة مرة أخرى..عليك فقط مناداة ملف البي اتش بي ثم منادات الدالة المطلوبة…التنظيم شيء جيد 🙂

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


أتمنى أن يكون الشرح وافياً و الكود واضحاً…في انتظار ردودكم…و دمتم 🙂
وصلى اللهم و سلم و بارك على سيدنا محمد و على آله و صحبه و سلم تسليما كثيرا إلى يوم الدين و الحمدلله رب العالمين

كيف تحصل على شهادة A+

تعتبر شهادة A+ من أشهر الشهادات العالمية المعتمدة لتكنولوجيا المعلومات للقطاع الأكاديمي و للقطاع العملي.
الشهادا تثبت كفاءة طالبها في مجالات التركيب والصيانة الوقائية، والشبكات والأمن. إضافة لخدمة العملاء و ومهارات الاتصال معهم.

للحصول على الشهادة عليك إجتياز إمتحانين:

 

  1. إمتحان الأساسيات CompTIA A+ Essentials, exam code 220-701
    يعتمد على فهم تكنولوجيا الكمبيوتر و الشبكات و الأمان و مهارات الإتصال مع العملاء.
  2. إمتحان التطبيق العملي CompTIA A+ Practical Application, exam code 220-702
    هو إضافة للمعرفة والمهارات المحددة في إمتحان الأساسيات، مع التركيز على التدريب العملي و سيناريوهات الفحص و الأدوات لحل المشاكل.

 

رسوم الإمتحان:

تختلف حسب المكان و ما إذا كان الطالب فرد أو تابع لمنظمة. و لكن على سبيل المثال

البلد العملة المنظمات الأفراد
أمريكا دولار أمريكي 147 173
عالمي دولار أمريكي 143 168
بريطانيا جنيه استرليني 97 114
أوروبا يورو 155 182
ماليزيا رنقت 553 650
الصين دولار أمريكي 143 168
الهند دولار أمريكي 143 168

مراكز الإمتحان:

 

إمتحانات منظمة CompTIA مثل A+ يتم تزويدها في المراكز التالية:

المركز الموقع الإلكتروني شعار المركز
بيرسون http://bit.ly/kRIeNp
بروميترك http://bit.ly/lTtRs7
سيرتي بورت http://bit.ly/lR2tyn

ما عليك هو الدخول على أحد هذه المواقع و إختيار أقرب مركز إليك.

فمثلا لمراكز بيرسون كالأتي:

مركز HeroTec بالقاهرة – مصر، و مركز الخبراء Al-Khobara for Adaptive Knowledge بالرياض – السعودية.

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

 

كيف تبدأ Getting Started:

 

  • * تنزيل مذكرة أهداف الإمتحان Exam Objectives
  • * تنزيل الإمتحانات التطبيقية Practice Questions
  • * تنزيل المواد الخاصة بالتدريب Training Materials
  • * إختيار مراكز التدريب Training Centers
  • * التعليم الإلكتروني CompTIA eLearning
  • *معرفة رسوم الإمتحان Exam Prices
  • * إختيار أحد مراكز الإمتحان Testing Centers
  • * إشتراء القسيمة Voucher

 

محتوى الإمتحان:

 

يركز إمتحان الأساسيات على:

  • الهاردوير
  • كشف المشاكل – الإصلاح – و الصيانة
  • أنظمة التشغيل و البرمجيات
  • الشبكات
  • الأمن
  • الإجراءات العملية

يركز إمتحان التطبيق العملي على:

  • الهاردوير
  • أنظمة التشغيل
  • الشبكات
  • الأمن

 

A+ certification
مثال لشهادة معتمدة من A+ بغض النظر عن صاحبها

 

 

لأي إستفسار يرجى الإتصال: 0902311179 الصادق عبدالقادر

كيفية عمل صندوق بحث بنكهة آبل – الجزء الأول

cover

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

  1. css3
  2. jquery
  3. mootools

الخطوات:

الشكل العام باستخدام css3 و html

search_menu
صورة تاريخية للقائمة و السيد صندوق البحث.

<div id="menu" class="r25">
<input type="text" id="search" class="r25"  placeholder="ابحث من هنا"   />
</div>


وهو الكود المطلوب لصندوق البحث،لاحظوا الــ Attribute المسمى بـ placeholder وهو يمثل النص الذي يكون في صندوق البحث قبل الضغط عليه.

والآن مع الـ style :

#menu{/* المخصص للقائمة style  الـ */
width:600px;
margin:0px auto;
padding:10px;
position:fixed;
top:25%;
left:25%;

/*الألوان و الألوان المتدرّجة */
background-color:#c2c2c2;/*الخلفية الإحتياطية..في حال لم يظهر تدرج الألوان سيظهر هذا اللون كخلفية*/
background-image: -webkit-gradient(linear,0% 100%, 0% 1%, from(#c2c2c2), to(#e2e2e2));/* لمتصفحات الكروم والسفاري */
background-image: -o-linear-gradient(bottom, #c2c2c2, #e2e2e2); /*  11.10+  للأوبرا*/
background: -moz-linear-gradient(bottom,#c2c2c2,#e2e2e2);/* للفايرفوكس و اشباهه */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c2c2c2', endColorstr='#e2e2e2');/ * للإنترنت اكسبلورر */
} 

#search{/*  !!المخصص لصندوق البحث...هذا هو مربط الفرس style الـ*/
background:#a2a2a2 url(imgs/white_magn.png) no-repeat right center;/* وضع صورة المكبّر في اقصى يمين صندوق البحث*/
border:1px  solid #a2a2a2;
outline:none; /* لمنع ظهور مستطيل حول صندوق البحث عند الضغط عليه */
padding-left:7px;
width:90px;
padding-right:20px;
direction:rtl;
}
/*في الكروم،السفاري و الفايرفوكس..عذرا:الأوبرا و الإنترنت إكسبلورر لا يدعمون الخاصية placeholder إضافة اللون الأبيض للـ */
input:-webkit-placeholder { 
    color: #FFF;  
}

input:-moz-placeholder { 
    color: #FFF;  
}

/* إضافة الأركان الدائرية لصندوق البحث */
.r25{
-moz-border-radius:25px; /* للموزيلا */
-webkit-border-radius: 25px;/* للكروم،السفاري و الأوبرا */
border-radius:  25px;/* جميع المتصفحات الحديثة */
}

الطريقة الأولى : تطبيق الحركة باستخدام css3

إلى الأعلى

استخدام الـ Pseudo-class:

لاحظ الحالة العادية و حالة تركيز مؤشر الماوس على صندوق البحث

باستخدام focus من CSS Pseudo-classes سيتم التعرف على تركيز(أي ضغطة) الماوس داخل صندوق البحث..وسيتم تغيير خصائص صندوق البحث تبعا لهذا الحدث.

/* جميع الخصائص التالية سيتم تفعيلها فقط عند تركيز الماوس */
#search:focus{
width:180px; /* زيادة عرض صندوق البحث */
background:#FFF url(imgs/dark_magn.png) no-repeat right center; /* تغيير صورة المكبر البيضاء إلى الرمادية */
border:1px solid white; /*  تغيير لون إطار الصندوق*/
-webkit-box-shadow:0px 0px 10px white; /*  !!إضافة ظل أبيض حول الصندوق..بإمكانك تسميته هالة ضوء*/
-moz-box-shadow:0px 0px 10px white;
box-shadow:0px 0px 10px white;
}

حان الوقت لبعض الحركة!

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

دعونا نرى كيف يحدث ذلك:

#search{
.
.
.
/* سنضيف الأسطر التالية للكود الموجود مسبقا */

-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

والآن دعونا نرى ما الذي يعنيه هذا السطر:

transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

transition:
هي الخاصية property المستخدمة للتعبير عن الـحركة transition في الــ CSS
all :
تعني تفعيل هذه الحركة لكل الخصائص الداعمة…بالإمكان استبدالها بخصائص مفردة مثل…اللون أو العرض أو الإرتفاع..أوغيرها
500ms :
وتمثّل الزمن المستغرق لتنفيذ الـحركة Transition Time بالميللي-ثانية
cubic-bezier:
دالة الحركة،هناك دوال كثيرة للحركة الفائدة منها هي التحكم بسرعة الحركة بدقّة عالية..يمكنك المقارنة بين الدوال(Linear,ease,ease-in,ease-in-out,ease-out,cubic-bezier) في CSS3 transition-timing-function

الأسطر الثلاث الأخرى لها نفس الوظيفة لكن تختلف الصيغة لاختلاف أنواع المتصفحات.

الطريقة الثانية : تطبيق الحركة باستخدام JQuery

إلى الأعلى
الجيكويري هي مكتبة جافا سكربت رائعة!!وقد تبنّتها كثير من المؤسسات والشركات مثل جوجل Google، موزيلا Mozilla، ووردبريس WordPress ،دروبال Drupal،ديل Dell.تمتاز بأنها صغيرة الحجم وبإمكانيات عالية وتتوفر إضافاتها(plugins) بصورة كبيرة.أضف إلى ذلك أنها مجانية.
بداية سنضمّن الجيكويري في الصفحة بالإضافة إلى إضافة أخرى وظيفتها تمكين الـحركة لخاصية الخلفية background :

/ * هذا هو الرابط الدائم لمكتبة الجيكويري */
< script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script >  

/* هذه السكربت مطلوبة لتمكين تغيير لون الخلفية باستخدام الدالة animate */
< script  src="js/jquery-bg-animation.js" type="text/javascript"></script > 

سنقوم بتطبيق نفس الحركة السابقة ولكن باستخدام الجيكويري.وذلك بتحويل الجزئية المتعلقة بالــ focus في الـ CSS من Pseudo-class إلى Event أو حدث في الجيكويري كالآتي :

$(document).ready(function(){/*هذه الدالة تقوم بتحميل الكود عند جاهزية الصفحة */
$("#search").focus(function(){/* هنا يتم تفعيل كود الجيكويري عند تركيز الماوس على صندوق البحث */

$(this).animate({ /* هنا دالة الحركة */
  "width": "180px", 
"backgroundColor": "#FFFFFF", 
"-webkit-box-shadow": "0px 0px 10px white",
"-moz-box-shadow": "0px 0px 10px white" ,
"-o-box-shadow": "0px 0px 10px white" ,
"box-shadow": "0px 0px 10px white",
"border":"1px solid #FFF"  
   
  }, 400 );/*  الزمن المستغرق في الحركة بالميلليثانية*/

 /* لا تدعم تغيير صورة الخلفية قمنا بعملها منفصلة  animate  لأن دالة 
وتمكننا من إعادة تعيين أو إضافة خصائص للعنصر المطلوب  css  باستخدام دالة أخرى تسمى */ 
    $(this).css({
   "background-image":"url(imgs/dark_magn.png)"
    });

});//end focus event   
});//end the ready 


الكود السابق بالجيكويري كما ذكرنا يوازي الــ element:focus في الـ CSS .أي أننا قمنا باستبدال الـ focus الموجود في الـ css ..بالــ focus event الموجود في الجيكويري..إن التركيز على مسألة الأحداث من الأشياء المهمة لأنها توفر التفاعلية مع المستخدم باستخدامها في المكان المناسب.
دالة الــ animate تقوم تغيير بعض خصائص أو حتى إضافة خصائص لم تكن موجودة في العنصر المراد تحريكه.
وتقوم بإظهار هذه التغييرات بصورة سلسة و تدريجية.

حتى الآن تحدث الحركة هي عند تركيز مؤشر الماوس على الصندوق،ولكن إذا حركنا المؤشر بعيدا و ضغطنا فإنه سوف…
لن يحدث شيء!…لماذا؟…لأننا لم نقم بالاستعداد لفقدان التركيز على الصندوق وهذا الحدث هو عكس الـ focus ويسمى Blur .


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

$("#search").blur(function(){

  $(this).animate({ 
  "width": "90px",
"backgroundColor": "#a2a2a2",
"-webkit-box-shadow": "0px 0px 0px gray",
"-moz-box-shadow": "0px 0px 0px gray" ,
"box-shadow": "0px 0px 0px gray",
"border":"1px solid #a2a2a2"  
   
  }, 300 );
    

$(this).css({
   "background-image":"url(imgs/white_mag.png)"
    });
   

لا يوجد blur بلا focus !
أي أن blur دائما و أبدا يأتي بعد focus

الطريقة الثالثة : تطبيق الحركة باستخدام Mootools

إلى الأعلى
وفيها سنتستخدم مكتبة الموتولز mootools وهي مكتبة أخرى مشابهه للجيكويري.
الفكرة مطابقة للجيكويري تماما…!!ولكن باختلاف الصيغة.
يحتوى الكود على دالتين لتحريك الصندوق.:
animate: و ظيفتها اظهار الحركة عند تركيز مؤشر الماوس focus.
animate_back: وظيفتها إرجاع الصندوق إلى حالته الأصلية عندما يفقد تركيز مؤشر الماوس داخله(اي يضغط بالماوس خارج الصندوق)blur.

سنستخدم مكتبة الموتولز وهي تتكون من ملفين الـ mootools-1.2.core.js و mootools-1.2.more.js +إضافة اسمها shakes وهي تسهّل تطبيق الــ Animation .نقوم الآن بإضافة الملفات للصفحة.ثم نبدأ كتابة كود الحركة:

< script src="js/mootools-1.2-core.js" language="javascript" type="text/javascript"></script > 
< script src="js/mootools-1.2-more.js" language="javascript" type="text/javascript"></script > 
< script src="js/shakes.js" language="javascript" type="text/javascript"></script > 

window.addEvent('domready', function() {/* تعني تحميل الكود عند جاهوية الصفحة */

var animate = $('search').animate()
    .morph({/*  دالة الحركة */
  "width": "180",
  "background-color": "#FFFFFF",
  "-webkit-box-shadow": "0px 0px 10px white",
        "-moz-box-shadow": "0px 0px 10px white" ,
        "box-shadow": "0px 0px 10px white",
        "border":"1px solid #FFF"  ,
        "background-image":"url(imgs/dark_magn.png)"
  });
    

  var animate_back = $('search').animate()
    .morph({
  "width": "90",
  "background-color": "#a2a2a2",
  "-webkit-box-shadow": "0px 0px 0px white",
        "-moz-box-shadow": "0px 0px 0px white" ,
        "box-shadow": "0px 0px 0px white",
        "border":"1px solid #a2a2a2"  ,
        "background-image":"url(imgs/white_magn.png)"
  });
    
/* هذان السطران يعنيان باختصار:ابدأ الحركة عند ضغط الماوس عل صندوق البحث*/
$('search').addEvent('focus', function() { /* هنا سيتم ربط الحركة بالحدث focus*/
    animate.start();
});

/*أيضا هذا الأسطر تعني ابدأ الحركة ولكن عند ضغط الماوس خارج صندوق البحث */
$('search').addEvent('blur', function() {/* كذلك هنا سيتم ربط الحركة بالحدث blur*/
    animate_back.start();
});

});

تمت تجربته على :

المتصفحات الدّاعمة
تمت تجربته في هذه المتصفحات

ماذا الآن؟

في الجزء الثاني بإذن الله،سنقوم بجعل الصندوق يعمل مع البي اتش بي أجاكسيّاَ!! PHP+AJAX 🙂
جزيل الشكر و التقدير للأخ محمد علي الطيب للمراجعة الفنية و النصائح و الإرشادات المفيدة بحق.

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

بسم الله بدأنا

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