البرمجة الدروس

تلميحات تطوير الويب 7

عبدالملك الثاري 16 يناير 2009

دقيقة واحدة

تلميحات تطوير الويب ( 1 | 2 | 3 | 4 | 5 | 6 ) 7

16/ ادمج صورك في صورة واحده لموقعك

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

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

نرجع لموضوع دمج الصور هنا مثال على صورة لقوقل بدمج جميع صور موقع Google Reader في صورة واحدة لتتضح لك الصورة :

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

ومثال وجود وتوزيع صور الأيقونات في الموقع كالتالي :

وكذالك موقع يوتيوب ! يحتوي على صوره واحده لجميع أيقونات وصور وإطارات الموقع :

وكذالك الصورة التوضيحية لتوزيع الصورة الواحده التي فوقي في الموقع :

ولتتحكم بموضع الصورة للأيقونة هو عن طريق الخاصية Background-Position : X Y ونبدأ بالتطبيق بشكل أوضح أكثر.

هذه صوره قمت بتصميمها تحمل على أيقونات مختلفه في صوره واحده ( icons )

وهذه صور الأيقونات بالطريقة التقليدية كل واحده على حده بإسم ( icon1 و icon2 و icon3 و icon4 )

والأن شاهد المفاجئة :

فقط 1KB ووفرنا مجموعه كبيره فلو كان لدينا 20 صورة رمزيه فلقد وفرنا الكثير في سبيل سرعة الموقع الأن عند استخدام الصورة وتحميلها مره واحده لا يحتاج لتحميل اي صوره أخرى , طبعاً هذه طريقة رائعه ويكفي استخدام قوقل لهذه الطريقه في تطبيقاتها.

لنتعلم كيف نقوم بعرض وتوزيع الصور في صفحة الويب , ابدأ بسم الله افتح المحرر , ولنقل أن لدينا قائمة من أربع عناصر كالتالي :

<ul class="block_menu">
   <li>
        <h2><span class="bullet"></span>عنوان القائمة الأولى</h2>
        <ul>
            <li>تجربة 1</li>
            <li>تجربة 2</li>
            <li>تجربة 3</li>
        </ul>
   </li>
</ul>

ستصبح النتيجة كالتالي :

الأن نريد أن تكون النقطة الموجودة في ( عنوان القائمة الأولى ) هي مثلاً صورة السهم الذي على أسفل اليسار :

نكتب بالـ CSS كالتالي :

.block_menu .bullet {
    display:block;
   width:23px;
   height:23px;
   float:right;
   margin-left:8px;
   background:url(icons.gif) no-repeat;
   background-position:0px -23px;
}

الأن النتيجه 🙂 :