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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



  • عنوان القائمة الأولى



    • تجربة 1

    • تجربة 2

    • تجربة 3




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

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

نكتب بالـ 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/ كيف تضيف أيقونة لموقع ؟

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

وذالك عن طريق في داخل وسم

أضف التالي :

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


http://www.favicon.cc

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

‫21 تعليقات

  1. يعطيك العافية أخوي عبدالملك

    بما أن هذه الطريقة تفيدنا بإستخدام صورة واحدة للأيقونات في الموقع

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

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

    تقبل مروري

  2. رحم الله والديك يا عبدالملك ..

    ابحث عن الطريقة من فترة طويلة ..

    بس ماني عارف مسماها ..

    تختصر عناء مجلد ايقونات كامل :D ..

    شكراً عزيزي ..

  3. جزاك الله خير اخوي عبدالملك

    وأسألأ الله في هذا اليوم المبارك أن يوفقك ويسعدك

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

  4. ووالديك ان شاء الله , وشكراً لك عزيزي واسعدني انها افادتك وخدمتك

    وفعلاً أنت وضحت نقطه مفيده ومهمه ورائعه

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

    بارك الله فيك يالغالي

  5. مرحبا مقرن حياك الله يالغالي :)

    نعم طبعاً تقدر بنفس الطريقه طبعاً تقدر لجميع الصور ماعدا صور المواضيع فقط

    والشرح سهل وواضح فقط عند محاولتك بإستخدام الـ CSS والتعديل على موقع الصوره المراد عرضها وتحديد عرض وإرتفاع الصوره من خلاله

    وودي اعرف وش قصدك بالتوبيات

    اطيب تحياتي لك

  6. السلام عليكم
    هلا عبد الملك ..مقالة رائعة ..وأسرار جديدة لا نعرفها إلا منك ..بالفعل هذه الخصائص كانت قابلتني بموقع css-tricks بسمي Css-sprites والكاتب كان يتحدث عن هذه الأشياء ..صراحة مجهود كبير منك ..والأجمل أنك تساير الجديد ربنا يوفقك ..وإلي الإمام ..:)

  7. شكراً لك أخي عبد الملك
    دمج الصور عملية رائعة جداً
    فهي تسهم كثيراً في تخفيف حجم الصفحة.
    فمثلاً لعمل صندوق محتوى ذو أطراف دائرية- لن نحتاج سوى لصورة واحدة صغيره كهذه
    http://www.box.net/shared/bosatzv9hl
    :
    نرجوا أن تسعى المواقع العربية لاستخدامها.

    بوركت جهودك

  8. كلام جميل
    لكن بالنسبة للحجم، فيبدو أن طريقة الحساب غير دقيقة …
    فمتصفح اكسبلور الخاص بويندوز لا يقوم بإظهار الحجم الدقيق لأي ملف
    فلو كان هناك ملف بحجم 30 بايت ، فإنه سيقوم بإظهاره بحجم 1 كيلوبايت دوماً، وهكذا …

    يرجى مراجعة هذه النقطة…

    بالنسبة للدرس بشكلٍ عام، أعجبتني الطريقة كثيراً …

    مع أطيب تحية …

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى