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

 

تلميحات تطوير الويب ( 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;
}

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

هكذا يمكننا إستخدام صورة واحدة تحتوي على جميع صور وايقونات الموقع وتوزيعها بكل سهوله 🙂 بحجم أقل مع الحفاظ على سرعة عالية

 

17/ كيف تضيف أيقونة لموقع ؟

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

 

وذالك عن طريق في داخل وسم <head></head> أضف التالي :

<link rel="shortcut icon" href="icon.ico">

طبعاً icon.ico هو ملف الأيقونه , بتقولي كيف أجيبها ؟ صمم لك واحده ثم حولها من jpg او png من خلال هذا الموقع الرائع


http://www.favicon.cc

أطيب تحياتي لكم ونلتقي في الأسبوع المقبل إن شاء الله 😉