تلميحات تطوير الويب ( 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;
}
الأن النتيجه :) :
.gif)
هكذا يمكننا إستخدام صورة واحدة تحتوي على جميع صور وايقونات الموقع وتوزيعها بكل سهوله :) بحجم أقل مع الحفاظ على سرعة عالية
17/ كيف تضيف أيقونة لموقع ؟
كمثال بسيط موقع عالم التقنية يمكنك رأيت أيقونة خاصة فيه كالتالي :
وذالك عن طريق في داخل وسم <head></head> أضف التالي :
<link rel="shortcut icon" href="icon.ico">
طبعاً icon.ico هو ملف الأيقونه , بتقولي كيف أجيبها ؟ صمم لك واحده ثم حولها من jpg او png من خلال هذا الموقع الرائع
أطيب تحياتي لكم ونلتقي في الأسبوع المقبل إن شاء الله ;)
يعطيك العافية أخوي عبدالملك
بما أن هذه الطريقة تفيدنا بإستخدام صورة واحدة للأيقونات في الموقع
لدي سؤال
هل أيضاً بالإمكان أستخدام هذه الطريقة في جميع كلمات التوبيات الثابتة والأيقونات وجميع الصور التي نستخدمها لمرة واحدة والتي لا نريدها أن تتكرر ونجمع هذه الصور في صورة واحدة ونطبق عليها هذا الكود بالأبعاد المطلوبة ؟
بصراحة طريقة رائعة مع أنني يعني لحد الحين ما فهمت كيف أطبقها ولكن التجربة راح تفيدني إن شاء الله …
تقبل مروري
رحم الله والديك يا عبدالملك ..
ابحث عن الطريقة من فترة طويلة ..
بس ماني عارف مسماها ..
تختصر عناء مجلد ايقونات كامل :D ..
شكراً عزيزي ..
جزاك الله خير اخوي عبدالملك
وأسألأ الله في هذا اليوم المبارك أن يوفقك ويسعدك
وتم متابعة السلسلة من اول درس في التصميم الى هذه التدوينة وكأنه كنز لم اكن اعلم عنه وان شاء الله نبدأ نتعلم ونطبق تحياتي لك
رقم 16 هذي تكفي موضوع لحالها
من جد تقنية رهيبه لتخفيف كثرة الصور في الموقع
أعجبتني طريقة دمج الصور
سأقوم بتجربتها لاحقاً
شكراً لك
شكراً لك أخي عبدالملك على الشروحات المفيدة والواضحة وخصوصاً الفكرة الأولى ..
أتمنى لكم التوفيق والمداومة على تقديم الفائدة ..
يعطيك العافيه عبدالملك
دمج الـ icons أعجبني جداً.
ووالديك ان شاء الله , وشكراً لك عزيزي واسعدني انها افادتك وخدمتك
وفعلاً أنت وضحت نقطه مفيده ومهمه ورائعه
بأنه يكون ترتيب الموقع أسهل وأفضل من كثرة الصور :)
بارك الله فيك يالغالي
مرحبا مقرن حياك الله يالغالي :)
نعم طبعاً تقدر بنفس الطريقه طبعاً تقدر لجميع الصور ماعدا صور المواضيع فقط
والشرح سهل وواضح فقط عند محاولتك بإستخدام الـ CSS والتعديل على موقع الصوره المراد عرضها وتحديد عرض وإرتفاع الصوره من خلاله
وودي اعرف وش قصدك بالتوبيات
اطيب تحياتي لك
وجزاك الله كل خير أخوي انتفاضة قلم
وكم يسعدن أن هناك من يتابع سلسلتي ومواضيع :)
شكراً لك جزيلاً
شكراً على مرورك أخوي سعود فأنت لا تمر على مواضيعنا إلا إذا صار موضوع ممتاز ;) فلذالك اسعدني مرورك كثيراً
حياك الله ولا تنسى تجربتها عند بناء أول موقع تريد عمله لأنها مهمه
وبارك الله فيك
إن شاء الله الفائده قادمه وقادمه في ظل وجودكم الرائع
تحياتي لك أخوي أحمد
تشكر أخوي بدر والله يعافيك على ردك
السلام عليكم
هلا عبد الملك ..مقالة رائعة ..وأسرار جديدة لا نعرفها إلا منك ..بالفعل هذه الخصائص كانت قابلتني بموقع css-tricks بسمي Css-sprites والكاتب كان يتحدث عن هذه الأشياء ..صراحة مجهود كبير منك ..والأجمل أنك تساير الجديد ربنا يوفقك ..وإلي الإمام ..:)
شكراً لك أخي عبد الملك
دمج الصور عملية رائعة جداً
فهي تسهم كثيراً في تخفيف حجم الصفحة.
فمثلاً لعمل صندوق محتوى ذو أطراف دائرية- لن نحتاج سوى لصورة واحدة صغيره كهذه
http://www.box.net/shared/bosatzv9hl
:
نرجوا أن تسعى المواقع العربية لاستخدامها.
بوركت جهودك
وعليكم السلام ورحمة الله وبركاته
شكراً لك أخوي حسين شرفني واسعدني مروروك
وصراحة كلام جميل تذكره والله يخليك يارب
هلا وغلا اختي أيمان فعلاً كلامك صحيح طريقة رائعة ويجب استخدامها :)
شكراً لك على المرور الطيب
احب اضيف حتى لوحة تحكم الوردبريس تستخدم هذه الطريقة
بصراحة الطريقة جداً فعالة
شكراً لك مرة اخرى
كلام جميل
لكن بالنسبة للحجم، فيبدو أن طريقة الحساب غير دقيقة …
فمتصفح اكسبلور الخاص بويندوز لا يقوم بإظهار الحجم الدقيق لأي ملف
فلو كان هناك ملف بحجم 30 بايت ، فإنه سيقوم بإظهاره بحجم 1 كيلوبايت دوماً، وهكذا …
يرجى مراجعة هذه النقطة…
بالنسبة للدرس بشكلٍ عام، أعجبتني الطريقة كثيراً …
مع أطيب تحية …