इंटरनेटवेब डिजाइन

सीएसएस-स्प्राइट: बुनियादी तकनीकों और उपयोगी टिप्स का एक विवरण

आधुनिक साइट दोनों के विकास के चरण में, तेजी से अच्छा और कुशल होने का है, और जब एक ग्राहक के साथ काम कर रहे। एक नियम के रूप में, हर कंपनी है कि ऑनलाइन संसाधनों बनाता है, अपने स्वयं के चेहरा है इसकी डिजाइन, शैली, विश्वसनीयता, गति और अन्य विशेषताओं के साथ पर्यटकों को आकर्षित करने के लिए करना चाहता है।

स्प्राइट की उपयोगी गुण

सीएसएस-स्प्राइट दोनों साइट के गुणात्मक विशेषताओं और कंपनी की छवि में सुधार कर सकते हैं। इसके मूल में, यह नहीं भी परिष्कृत उपकरण डेवलपर है, लेकिन यह वास्तव में विकास और संसाधनों, और उनके काम की गति की प्रक्रिया को गति।

अन्य बातों के अलावा, यह कोड को सरल और, एक निश्चित अर्थ में, यह अन्य संसाधनों से पोर्टेबल है कि, तथ्य यह है कि इस्तेमाल किया सीएसएस-स्प्राइट, करीबी रिश्तेदार के रूप में समान हैं क्योंकि आप एक ही चित्रमय विचारों, शैली डिजाइन तत्वों बातचीत उपयोग कर सकते हैं की वजह से, संरचना और टैग की सामग्री।

साइट के विकास की सामान्य स्थिति में चित्रों का एक बहुत कुछ कर सकते हैं। अक्सर, इन छवियों बहुत कम स्थान ले, लेकिन हमेशा एक अलग फाइल कर रहे हैं। किसी भी सर्वर के किसी भी ऑपरेटिंग सिस्टम एक फ़ाइल खोलने के लिए - इस आपरेशन, एक समय लेने वाली है, तथापि, काफी सम्मान के साथ समय है जब एक फ़ाइल 13 से 13 पिक्सल पर खोला जाता है अलग नहीं होगा, और जब फाइल 16 चित्रों 52 52 से पिक्सल से खोला जाता है। पहले मामले में, आप 16 फ़ाइलें और खोलने / पढ़ने के 16 आपरेशन, दूसरे मामले में 16 छवियों केवल एक फ़ाइल के उद्घाटन का एक परिणाम के रूप में प्राप्त किया जाएगा।

आप इस विषय पर फ़ाइलों का सेट बनाते हैं (क्षैतिज मेनू, संवाद के रूपों, कैलकुलेटर बटन कैलेंडर डिजाइन तत्वों ...) ऐसी छवियों लचीलेपन साइट से साइट के लिए ले जाया जोड़ा जा सकता है कि।

नकारात्मक पक्ष यह है

वहाँ प्रशंसकों, भी प्रफुल्ल सीएसएस का उपयोग करने के लिए सिफारिश कर रहे हैं स्प्राइट जरूरी जो लोग ध्यान से इस मुद्दे का अध्ययन कर रहे हैं और स्पष्ट रूप से पता चलता है कि यह हमेशा पुराने जमाने तरह से काम करने के लिए व्यावहारिक है।

दरअसल, अगर वहाँ एक फ़ाइल के 16 चित्रों के बजाय 16 खुला / पढ़ने संचालन किया जाएगा एक की जगह 16 चित्र फ़ाइलें। लेकिन चाल हर ब्राउज़र एक कैश किया है, और यह केवल एक अंतिम उपाय के रूप में कुछ लोड करता है। इसके अलावा, आमतौर पर पृष्ठ तत्वों जब आप पहली बार पृष्ठ पर जाएँ लोड किए गए हैं, और उसके बाद ही बदल लोड किया गया।

एक अन्य पहलू। आमतौर पर, छवि कट जाता है, एक एकल फाइल करने के लिए चिपके नहीं। किसी तरह यह एक प्रौद्योगिकी कस्टम विकसित की है, यह कहना बेहतर है,। डिजाइनर लेआउट बनाता है और लेआउट उसके टुकड़े का उपयोग करता है: लेआउट की सूक्ष्मता कटा हुआ टुकड़े। विरोधियों स्प्राइट का मानना है कि एक फ़ाइल में कई चित्रों उठा - लेने वाली गतिविधि है, जो कुल पेज डिजाइन बढ़ जाती है।

वहाँ उन डेवलपर्स जो मानते हैं और HTTP-अनुरोधों की संख्या का अनुकूलन, विश्वास है कि इस व्यवसाय सीएसएस-स्प्राइट की तुलना में अधिक व्यावहारिक है।

हर समय संकेत दिया निस्संदेह महत्वपूर्ण है, लेकिन अधिक महत्वपूर्ण दृश्य है कर रहे हैं: यह उचित सीमा के भीतर लागू किया जाना चाहिए।

स्वचालन और सीएसएस-Sprites

यह CSS स्प्राइट जनरेटर चलाने के लिए और डिजाइन के दाएँ भाग प्राप्त करने के लिए कोई मतलब नहीं है, तो कुछ भी नहीं बस सामान्य तरीके के इस भाग कर रोकता है। पारंपरिक प्रौद्योगिकी यह छवियों के सैकड़ों में कटौती करने के लिए आवश्यक बना देता है, तो यह जावास्क्रिप्ट समारोह है, जो आवश्यकता के स्प्राइट के वांछित क्षेत्र से चुन सकते हैं और यह प्रदर्शित करेगा स्केच बेहतर है।

ऐसा लगता है, तथापि, कि दो या तीन तत्वों, या अन्य एक दर्जन से अधिक की स्प्राइट - सब ठीक है, लेकिन जब चित्र की स्प्राइट सैकड़ों में, जावास्क्रिप्ट समारोह समस्याओं लेखन, ज़ाहिर है, घटित नहीं होगा, लेकिन कितना काम यह के निर्माण के लिए ले जाएगा के साथ कुछ इतनी बड़ी स्प्राइट ... इसके अलावा, गोंद तस्वीरें - यह एक सीएसएस स्प्राइट जनरेटर और वांछित छवि बनाता है, और इसके लिए सीएसएस-कोड, वह परवाह नहीं कितना स्प्राइट के घटक तत्व होगा। समस्याएं पैदा होती है जब साइट डिजाइन परिवर्तन, हटाने और नए तत्व के अलावा रीमेकिंग। स्प्राइट का विकास, आप इसे उपयोग करने के, और यह तो कैसे बदल के बारे में नहीं सोचना चाहिए।

स्प्राइट का उपयोग करके की विषय लाभ

सीएसएस प्रोग्रामिंग भाषाओं के विपरीत, इस नियम अपने सभी गतिशीलता नियमों और उनके कार्यात्मक सामग्री (मानक) से निर्धारित होता है की एक अपेक्षाकृत स्थिर सेट है। जटिल, में स्प्राइट को ध्यान में रखते HTML, सीएसएस पुस्तकालय का एक थीम पर आधारित कार्यात्मक डिजाइन बना सकते हैं।

उदाहरण के लिए, मेनू के समाप्त संस्करण: बस कई सीएसएस-नियम, जे एस-कार्यों को जोड़ने और एचटीएमएल-divs का कोड नंबर शामिल हैं, तो आप परिणाम प्राप्त कर सकते हैं। स्प्राइट की छवि की सामग्री बदलने से, आप मेनू का रूप बदल सकते हैं। समारोह के मुख्य भाग को निर्दिष्ट करना, आप कार्यक्षमता समायोजित कर सकते हैं।

एक अजीब संस्करण जाओ ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) की। बेशक, यह एक उज्जवल विचार हो सकता है, लेकिन यह बहुत अन्य OOP भाषाओं की पृष्ठभूमि के खड़े होने के लिए उज्ज्वल नहीं होगा, असली बोलियाँ। यह केवल '90 के दशक में है जब PLO पुनर्जीवित और बन गया असामान्य रूप से जल्दी से धूप में एक जगह पाने था, यह एक विशिष्ट विचार और अपनी अभिव्यक्ति का एक ठोस रूप है, लेकिन अब डेवलपर्स के रूप में वहाँ है विविध रूस के रूप में कई बोलियों के साथ आए हैं है।

खिलौने - स्प्राइट के लिए एक उपहार

उत्साह और प्रोग्रामिंग - असंगत अवधारणाओं, लेकिन योग्यता प्रोग्रामर लेखन खेल, obschebytovoy (सरल एन्क्रिप्शन) और रचनात्मक (डिजाइन और नई प्रौद्योगिकियों के विकास, विचारों) से स्पष्ट रूप से अलग है।

वेक्टर ग्राफिक्स के लिए गेम डिजाइन अपील, क्योंकि एसवीजी स्प्राइट + सीएसएस-नियम न केवल मांग है, लेकिन अक्सर के संयोजन एक असली खेल का उद्देश्य के लिए (साइट का) डेवलपर की वस्तु बन जाता है। विशेष रूप से, लोकप्रिय खेल काउंटर स्ट्राइक स्प्राइट के मामले पर लागू होते हैं, स्प्रे काफी सार्थक समानार्थी शब्द: विस्फोट, रक्त, दृष्टि ...

वाक्यांश "स्प्राइट सीएसएस V34 सेट" द आरंभ के लिए काफी सामान्य है और समझा जा सकता है। स्प्राइट, उपयोगिता के उपयोग में न केवल पाए जाते हैं संक्षेप में, लेकिन यह भी एक आला, जो काफी पूर्ण विशेषताओं, सस्ती और आसान उपभोक्ताओं की एक निश्चित चक्र को समझने के लिए है का गठन किया।

सीएसएस-स्प्राइट: उदाहरण

विकल्प की एक किस्म के लिए किसी विशेष भाषा में साइट पर पृष्ठों स्विच करने के लिए, लेकिन अगर भाषा चयनकर्ता एक आइकन के रूप में प्रदर्शन करने के लिए, एक स्प्राइट का उपयोग कर समाधान इस तरह दिखना हो सकता है:

स्पष्ट कमियां स्प्राइट

सबसे पहले, यह समय लेने वाली और जटिल प्रक्रिया है। छोटे टुकड़ों में डिजाइन, और अन्य कटौती करने के लिए - - कई छोटे की एक तस्वीर को इकट्ठा करने की यह एक बात है। कैनवास के विचार को लागू करें और साइट पर इस्तेमाल किया छवियों के सभी पर यह जगह पूरी तरह से बेकार है।

यहां तक कि CSS स्प्राइट जेनरेटर का उपयोग, कठिनाइयों टाला नहीं जा सकता है, खासकर जब यह साइट डिजाइन में परिवर्तन करने के लिए आवश्यक है। स्प्राइट छवियों के कुछ दसियों में जोड़ें - यह तत्वों की एक सरणी नहीं है, ग्राफिक्स, ग्राफिक्स है यह आम तौर पर सिर्फ बजाय एक सरणी के रूप में कोड बाहर छँटाई सही आइटम खोजने के लिए की, स्क्रीन पर प्रदर्शित होता है।

स्टैंडर्ड और डेवलपर्स अपने दावे के रूप में स्प्राइट प्रयुक्त एक नीति पृष्ठभूमि के साथ जुड़े, यह केवल एक पृष्ठभूमि छवि और नहीं साइट तत्व है निम्नलिखित। एक पेज के ग्राफिक घटक तत्वों टैग img में हेरफेर करना चाहिए।

यह जब पर्याप्त पृष्ठभूमि एक आम पृष्ठभूमि के रूप में माना जाता था कि सरल आधार पर सहमत होने के लिए मुश्किल है। एक लघु तत्व या पूरे पृष्ठ - यह सिर्फ पृष्ठभूमि, कोई बात नहीं क्या है।

इस बीच, ग्राफ़िक घटक स्प्राइट के उपयोग के लिए एक गंभीर बाधा का प्रतिनिधित्व किया।

विवेकपूर्ण उपयोग

तथ्य यह है कि शब्द "इंटरनेट प्रौद्योगिकी" और "उच्च प्रौद्योगिकी" का पर्याय माना जाता है के बावजूद, वास्तव में, यह समय लेने वाली और कभी कभी बहुत कम तकनीकी काम है। स्प्राइट विशेष रूप से JavaScript या PHP में शुद्ध प्रोग्रामिंग, साथ ही में आवश्यक कार्यक्षमता के विकास में अन्य बाधाओं की तुलना में तैयार नहीं कर रहे हैं, इस तरह के पृष्ठभूमि संग्रह प्रतिलिपि बनाने के रूप में भरने साइटों या जानकारी, की प्रक्रियाओं की स्थापना।

पावर और सामग्री प्रबंधन प्रणाली के उपयोग की संभावनाओं अक्सर अपने व्यावहारिक अनुप्रयोग की बारीकियों लगाया, और मैनुअल संसाधन विकास, एक नियम के रूप में, जरूरत की ओर जाता है 1001 समय एक या दूसरे एक मालिकाना एल्गोरिथ्म के पुनर्लेखन के लिए के लिए।

इस संदर्भ में, यह केवल उचित करने के लिए महत्वपूर्ण है कि एक आधुनिक उपकरण प्रदान करता है का उपयोग करें। एक दूसरे के ऊपर का उपयोग करने के भी उत्सुक मत बनो, और साइट के निर्माण में सुनहरा नियम के रूप में पढ़ता: इतना है कि किसी भी अप्रत्याशित स्थिति के मामले में जल्दी से हल किया जा सकता है आप कैसे जल्द से जल्द काम पारित करने के लिए, और यह निष्पादित करने के लिए कैसे के बारे में नहीं सोचने की जरूरत किसी भी समस्या।

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 hi.delachieve.com. Theme powered by WordPress.