شرح CSS Sprites الجزء الأول صور فصورة واحدة ,سرعة تصفح خيالية بالفيديو على اليوتيوب







بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته كيفيكم طيبين إن شاء الله أقدم لكم اليوم بمناسبة قرابة الشهر الجليل شهر الحج أقدم لكم الدرس الذي يحتاجه كل مطور في الويب شاء أم أبا كوني سأوضح نقطة يجهلها الاكثر وهذا ما جعلت منتدياتنا وشبكاتنا بطيئة في التصفح فهنا سنقوم في هذا الدرس بشرح CSS Sprites والتعرف عليها وأمثلة لها حيث الجزء الاول اما بالجزء الثاني سنقوم بتطبيق لها حتى تتاكد أنك أتقنتها ولا تحتاج الا أن تبدأ في إستعمالها كنت تسمع عنها صحيح ؟ ما هي خاصية CSS Sprites ؟ مرت على سمعك أليس كذلك هي سبريتز الصورة الكبيرة وليست صغيرة ربما قد تصورها او تقوم بتحميلها هل سمعت عن أيقونة الرئيسية والمدونة في صورة واحدة ؟

تقنية CSS Sprites هي الوصلة في هذه الصور بدلا من إستخدام ثلاثة أو خمسة صور في التصميم ليكن صورة واحدة تستطيع تركيب صور غير محدودة في صورة واحدة حيث أصل المصطلح sprites كان لتقنية لاحد معاهد تعليم صناعة العاب الجرافيكس حيث لاحظو إستخدام الكمبيوتر للميموري بشكل فظيع عندما تكون صور كثيرة وفي حالة دمجو الصور في صورة واحدة وإختارو ظهور جزء معين من الصورة في الفترة التي تناسبها لاحظو الفرق حيث كان أسرع بكثير من تحميل صورة تلوى والاخرى تحميل صورة من البداية وثم عرضها الامر أشبه بمسالة اليوتيوب حيث الاغلب يفضل مشاهدة المقطع كامل في مرة واحدة حيث ينتظر حتى يتحمل كله لا كل شوي ويتوقف التحميل فلهذا خاصية css sprites هي نفس النظرية تمام حيث تحميل الصور اغلبها في صورة واحدة وإظهار جزء معين منها في كل مكان على حسب إختيارك وهكذا ستختصر التعب من تقطيع الصور وتوزيع والخ ... لماذا كل وجع الراس اليس من الافضل تقطيع الصورة لاجزاء لتكون صغيرة وبحجم أقل ؟ لا خطأ كلنا وانا اولكم كنا ننخدع بطريقة غبية نظن في حالة قطعت الصورة لعدة اجزاء فسيصغر حجمها ونقوم بتقطعيها وتوزيعها منخدعين من ما نظن وهنا بالعكس فالامر اسوء يزداد الثقل حيث كل صورة لوحدها تعتبر HTTP Request فكلما زادت الصور أصبحت سرعة تصفح موقعك أقل كفأة في هذا الجدول ستتعرفون الفرق بين مواقع تستخدم خاصية CSS Sprites ومواقع اخرى لا تستخدمها مدة تحميل الصفحات بمقارنة مع المواقع المشهورةوقت التحميل وقت التحميل في مواقع أخرىياهوو10%90%جووجل25%75%ماي سبيس9%91%ام اس ان5%95%إي بي5%95%أمازون38%62%يوتيوب9%91%سي ان ان15%85%عالم الإبداع ^^10%88% أي صورة سواء كانت وسم  او خلفية css وهي لحالها تعتبر HTTP Request فأنت هكذا تستطيع التخيل كم صورة لحالها ستسبب لك الثقل حسننا الأن كيف تشتغل هذه التقنية ؟ جيد أنك سالت لانه كله في مصلحتك دعونا نبدا برؤية هذا المثال قبل كل شئ إضغط هنا لاحظ في هذا المثال الخلفيات لا تظهر تلقائيا في الهوفر الا بعد التمرير عليها عدة مرات

والان ألقي نظرة هنا إضغط هنا ستلاحظ الفرق اولا عدم تشوه الهوفر ثانيا الفرق الاول كنا نستخدم 10 HTTP Request اما الان فنستخدم 1 HTTP Request

حيث إستطعنا تنقيص 9 HTTP Request وإستطعنا تنقيص من حجم الصور كإجمالي 6 كيلو بايت الا يبدو أنه هذا تطور خارق فقط لمجرد تعديل على بعض الازرار ما بالك تصميم كامل ^^ والان دعونا نلقي نظرة على مواقع مشهورة تستخدم خاصية CSS Sprites Ask.com

حيث تلاحظ زر البحث العلوية غامقة والسفلية هافته حيث للهوفر ومعاها اللوجو وصور لاماكن معينة في التصميم لا تتسرعو تريدون معرفة سر إستخدام css sprites في الطريق فقط لو تكون ذكي ربما لن تستطيع حتى تكلمة بقية الموضوع من الحماس Google Reader icons

جوجل أولهم ^^ Creativity World < بالله في أحد سمع عنه من قبل ؟

مصدق نفسه عادي عادي موقعي شفيكم Facebook

إنك لعفريت يا فيس بوك مخشش الاستايل في ملف واحد بس ما تلاحظون الفيس بوك ما عمره يحمل صور دئما الصور تظهر على طول وهذا كان CSS Sprites وقبل أن نبدا في التطبيق لنطلق على هالتنقية إسمها بالعربي وليكن Honourable < براااااااااااااااا اممم نخليها سي اس اس الإختصار تمام يعني من الحين بقول الاختصار لا احد يسالني ايش هو والله انه اغلبنا متأخرين احنا العرب هالحركة طالعة من 2006 واحنا تونا بنتعمق فيها هنا ننتهي من التعريف بالاختصار شسمه قصدي CSS Sprites وهنا يأتي العمل نبدا بسم الله إفتح الفوتوشوب إفتح عمل صمم أزرار ونسقها كيف ما تريد مثلا حجم الازرار ككل العرض 800 بيسكل والطول 100 بيكسل جيد تريد عمل هوفر للازرار افتح عمل جديد بنفس مقاس العمل الاول ضع في الازرار الاولى واضف لهم حركة الهوفر طبعا على الاقل اختلاف بسيط في الالوان حتى تتحسس الهوفر عند وضع المأشر على الزر جيد أصبح لديك عملين واحد عادي والثاني هوفر وبنفس المقاسات والعرض اي 800 بيكسل عرض و 100 بيكسل طول جيد جدا افتح عمل عرض 800 بيكسل وطول 200 بيكسل ليش 200 لانه جمعنا 100 مع 100 = 200 بيكسل لاننا سنضع العملين في صورة واحدة وسنقوم بالتحكم بهم عن طريق خاصية CSS Sprites تمام خلصت أزرار مزبوط مية مية ^^ أجل يجب ان يكون لديك عمل ليس مثل هذا وانما بنفس الطريقة

الأن إحفظه على JPG او GIF ثم إفتحه على الفوتوشوب وتأبع معاي في اليوتيوب إضغط هنا ترقبو الجزء الثاني حيث سنقوم بإضافة الروابط على الأزرار و لمسة جكورية وحدة بس وأي إستفسار أنا طايب بس كلني قصدي أنا جاهز إعداد : Honourable الإستعانة ببعض الصور من CSS-TRICK جميع الحقوق محفوظة الى ترايدنت ومنتديات عالم الإبداع والسلام عليكم ورحمة الله وبركاته

http://www.traidnt.net/vb/showthread.php?t=1706782