टीप: प्रतिसादात्मक प्रतिमांसाठी HTML "चित्र" कसे वापरावे. चित्र हा एक नवीन घटक आहे जो अस्तित्वात नाही

चेरचर 16.06.2019

शक्यता

प्रतिसाद वेब डिझाइनचे सर्वात जास्त वेळ घेणारे पैलू म्हणून प्रतिमा फार पूर्वीपासून ओळखल्या जातात. आज, आपण आत्ताच रिस्पॉन्सिव्ह इमेजेसच्या समस्येवर उपाय म्हणून चित्र घटकाचा कसा वापर करू शकतो ते पाहू.

प्रथम, समस्या स्वतःच

संपूर्ण लेआउट अनुपालनासह निश्चित-रुंदीच्या वेबसाइट डिझाइनचे दिवस आता गेले आहेत. आजच्या वाइडस्क्रीन मॉनिटर्स, इंटरनेट टीव्ही, टॅब्लेट आणि विविध आकारांच्या स्मार्टफोन्सच्या युगात, आमच्या डिझाइनने 320 पिक्सेल ते 7680 पर्यंत कोणतेही रिझोल्यूशन विचारात घेतले पाहिजे.

हे सर्व रिझोल्यूशन प्रतिमांवर मागणी ठेवतात - त्यांना विविध आवश्यकता पूर्ण करण्यासाठी ताणणे आणि संकुचित करणे आवश्यक आहे. ही समस्या असू शकते कारण... वेक्टर ग्राफिक्सचा अपवाद वगळता, बहुतेक प्रतिमांची निश्चित पिक्सेल रुंदी असते जी बदलत नाही.

मग काय करायचं?

वर्तमान, सर्वात सामान्य उपाय

सामान्यतः, जवळजवळ कोणत्याही प्रतिसादात्मक वेबसाइटच्या CSS कोडमध्ये तुम्हाला खालील गोष्टी आढळतील:

img (कमाल-रुंदी: 100%; उंची: स्वयं;)

img (कमाल - रुंदी: 100%; उंची: स्वयं;)

हा कोड कमाल-रुंदी सेटिंग वापरतो: 100%; प्रतिमा मूळ कंटेनरच्या पलीकडे वाढणार नाही याची खात्री करण्यासाठी. जर मूळ कंटेनर प्रतिमेच्या रुंदीपेक्षा लहान असेल तर, प्रतिमा त्याच्यासह लहान होईल. उंची सेट करणे: स्वयं; उपस्थित आहे जेणेकरून कमी केल्यावर, प्रतिमेचे प्रमाण राखले जाईल.

सर्व उपकरणांसाठी एक रबर प्रतिमा

हे एका की मध्ये समस्येचे निराकरण करते, आम्हाला वेगवेगळ्या परिस्थितीत समान प्रतिमा दर्शविण्यास अनुमती देते. परंतु, ते आम्हाला वेगवेगळ्या परिस्थितींसाठी भिन्न प्रतिमा दर्शवू देत नाही.

नवीन उपाय: चित्र टॅग

पिक्चर हा एक नवीन घटक आहे जो HTML5 चा भाग असावा. हे ऑडिओ आणि व्हिडिओ घटकांच्या ऑपरेशनच्या तत्त्वांप्रमाणेच अनुकूली प्रतिमा ठेवण्याच्या प्रक्रियेस लक्षणीय गती देईल. हे तुम्हाला एकाधिक स्त्रोत घटक निर्दिष्ट करण्यास अनुमती देईल, ज्यापैकी प्रत्येक भिन्न प्रतिमा फायलींसह त्या कोणत्या परिस्थितीत लोड केल्या पाहिजेत.

हे तुम्हाला यावर अवलंबून भिन्न प्रतिमा अपलोड करण्यास अनुमती देईल:

मीडिया क्वेरी परिणाम, जसे की व्ह्यूपोर्टची उंची, रुंदी, अभिमुखता

पिक्सेल घनता

याचा अर्थ तुम्ही हे करू शकता:

उपलब्ध चॅनल रुंदीचा जास्तीत जास्त वापर करून योग्य आकाराच्या प्रतिमा अपलोड करा.

भिन्न स्क्रीन रुंदीसाठी बदलणारे लेआउट सामावून घेण्यासाठी भिन्न क्रॉपिंग आणि आस्पेक्ट रेशो असलेल्या प्रतिमा अपलोड करा.

उच्च पिक्सेल घनतेच्या स्क्रीनसाठी उच्च रिझोल्यूशन प्रतिमा लोड करा.

परिस्थितीनुसार वेगवेगळ्या प्रतिमा लोड केल्या जातात

चित्र घटक कसे कार्य करते?

चित्र घटकासह कार्य करण्यासाठी मूलभूत पायऱ्या आहेत:

ओपनिंग आणि क्लोजिंग पिक्चर टॅग तयार करणे.

या टॅगमध्ये, तुम्ही करू इच्छित असलेल्या प्रत्येक विनंतीसाठी स्त्रोत घटक तयार करा.

व्ह्यूपोर्टची उंची, रुंदी, अभिमुखता इत्यादी गोष्टींसाठी तुमच्या क्वेरीमध्ये मीडिया विशेषता जोडा.

अपलोड करण्यासाठी इमेज फाइलच्या योग्य नावासह srcset विशेषता जोडा.

तुम्हाला उच्च पिक्सेल घनतेच्या स्क्रीन जसे की डोळयातील पडदा सपोर्ट करायचे असल्यास तुमच्या srcset विशेषतामध्ये अतिरिक्त फाइलनावे जोडा.

फॉलबॅक म्हणून एक img घटक जोडा.

येथे एक साधे उदाहरण आहे जे व्ह्यूपोर्ट 768px पेक्षा लहान आहे की नाही हे तपासते आणि तसे असल्यास, एक लहान प्रतिमा लोड करते:

< picture > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < img srcset = "default.jpg" alt = "माझी डीफॉल्ट प्रतिमा" > < / picture >

तुमच्या लक्षात येईल की मीडिया ॲट्रिब्यूटमध्ये वापरलेला सिंटॅक्स हा CSS मीडिया क्वेरी लिहिताना तुम्हाला वापरला जातो तसाच आहे. तुम्ही समान तपासणी वापरू शकता, याचा अर्थ तुम्ही कमाल-रुंदी, किमान-रुंदी, कमाल-उंची, किमान-उंची, अभिमुखता इत्यादीसाठी क्वेरी तयार करू शकता.

डिव्हाइसच्या अभिमुखतेनुसार तुम्ही इमेजच्या लँडस्केप किंवा पोर्ट्रेट आवृत्ती लोड करण्यासाठी या चेकचा वापर करू शकता आणि तुम्ही आकार क्वेरी देखील जोडू शकता. उदाहरणार्थ:

< picture > < source srcset = "smaller_landscape.jpg" media = "(max-width: 40em) and (orientation: landscape)" > < source srcset = "smaller_portrait.jpg" media = "(max-width: 40em) and (orientation: portrait)" > < source srcset = "default_landscape.jpg" media = "(min-width: 40em) and (orientation: landscape)" > < source srcset = "default_portrait.jpg" media = "(min-width: 40em) and (orientation: portrait)" > < img srcset = "default_landscape.jpg" alt = "माझी डीफॉल्ट प्रतिमा" > < / picture >

वरील कोड योग्य अभिमुखतेसह उपकरणासाठी प्रतिमेची लहान, लँडस्केप-क्रॉप केलेली आवृत्ती लोड करतो. ते मोठ्या स्क्रीन उपकरणांसाठी समान प्रतिमेची मोठी आवृत्ती लोड करते.

डिव्हाइस पोर्ट्रेट ओरिएंटेशनमध्ये असल्यास, ते त्यानुसार क्रॉप केलेली प्रतिमा डाउनलोड करते: लहान उपकरणांसाठी लहान आकार आणि उच्च रिझोल्यूशन उपकरणांसाठी मोठी प्रतिमा.

तुम्ही उच्च घनतेच्या स्क्रीनसाठी प्रतिमांच्या भिन्न रिझोल्यूशन आवृत्त्या देऊ इच्छित असल्यास, तुम्ही srcset विशेषतामध्ये अतिरिक्त फाइलनावे जोडून तसे करू शकता. उदाहरणार्थ, रेटिना 2x स्क्रीन रिझोल्यूशन सपोर्टसह वरील पहिले कोड उदाहरण पाहू:

< picture > < source srcset = "smaller.jpg, smaller_retina.jpg 2x" media = "(max-width: 768px)" > < source srcset = > < img srcset = "default.jpg, default_retina.jpg 2x" alt = "माझी डीफॉल्ट प्रतिमा" > < / picture >

मीडिया विनंतीवर प्रथम प्रक्रिया केली जाते, त्यामुळे तुम्ही स्क्रीनवरील प्रतिमेचा आकार नियंत्रित करू शकता. पुढे, स्क्रीनची पिक्सेल घनता तपासली जाते आणि वापरकर्त्याच्या सेटिंग्जद्वारे उच्च घनता समर्थित आणि अनुमती असल्यास, प्रतिमेची उच्च रिझोल्यूशन आवृत्ती लोड केली जाईल.

आज चित्र वापरत आहे

सध्या, क्रोम, फायरफॉक्स आणि ऑपेरा ब्राउझरसाठी चित्राची मूळ अंमलबजावणी विकसित होत आहे, आम्ही बहुधा इतर ब्राउझरमध्ये व्यापक समर्थन पाहू. परंतु, आजपर्यंत, केवळ समर्थन अपेक्षित आहे.

आत्तासाठी, तुम्हाला आत्ताच चित्र वापरणे सुरू करायचे असल्यास तुम्हाला प्रतीक्षा करण्याची गरज नाही. तुम्हाला फक्त Picturefill 2.0 वापरण्याची गरज आहे, फिलामेंट ग्रुपमधील डेव्हलपरद्वारे प्रदान केलेले पॉलीफिल.

एकदा तुम्ही तुमच्या प्रोजेक्टमध्ये picturefill.js फाइल डाउनलोड केल्यानंतर, ती तुमच्या साइटच्या मुख्य विभागात लोड करून वापरली जाऊ शकते:

अधिक कार्यक्षमतेसाठी स्क्रिप्ट ॲसिंक्रोनस लोड करण्याचा पर्याय देखील आहे, ज्याबद्दल तुम्ही Picturefill डॉक्युमेंटेशनमध्ये वाचू शकता. ही स्क्रिप्ट लोड करताना, चित्र घटक मी वर्णन केल्याप्रमाणे कार्य करेल, किरकोळ निर्बंधांसह. ] -->< source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "माझी डीफॉल्ट प्रतिमा" > < / picture >

Android 2.3

IE9 प्रमाणे, Android 2.3 मध्ये पिक्चर टॅगमधील स्त्रोत घटक दिसत नाहीत. तथापि, जेव्हा ते नियमित img टॅगला नियुक्त केले जाते तेव्हा ते srcset विशेषता ओळखते. Android 2.3 किंवा तत्सम समस्या असलेल्या इतर कोणत्याही ब्राउझरसाठी srcset विशेषतामध्ये डिफॉल्ट फाइलनावासह फॉलबॅक img घटक समाविष्ट केल्याची खात्री करा.

JavaScript आणि मूळ मीडिया क्वेरी समर्थन आवश्यक आहे

हे सोल्यूशन JavaScript मध्ये अंमलात आणले असल्याने, त्यामुळे ब्राउझरमध्ये योग्यरित्या काम करण्यासाठी JavaScript आवश्यक आहे. Picturefill 2.0 "no-js" साठी उपाय प्रदान करत नाही कारण अन्यथा, नेटिव्ह सपोर्ट लागू केल्यावर अनेक प्रतिमा पृष्ठांवर दिसतील. तथापि, "नो-जेएस" वैशिष्ट्य तुमच्यासाठी महत्त्वाचे असल्यास तुम्ही Picturefill 1.2 वापरू शकता.

Picturefill ची पुढील आवश्यकता मीडिया क्वेरींसाठी नेटिव्ह सपोर्ट आहे, जेणेकरुन मीडिया ॲट्रिब्यूटमधील क्वेरी काम करतील. सर्व आधुनिक ब्राउझर मीडिया प्रश्नांना समर्थन देतात, तर IE8 आणि खालील एकमेव ब्राउझर आहे जो लहान अवशिष्ट वापरकर्ता बेससह करत नाही.

अतिरिक्त HTTP विनंत्या शक्य आहेत

मूळ srcset सपोर्ट असलेल्या परंतु चित्राला सपोर्ट न करणाऱ्या ब्राउझरसाठी, img घटकामध्ये अधिक योग्य प्रतिमा निर्दिष्ट करण्यापूर्वी फॉलबॅक img एलिमेंटमध्ये दिलेल्या फाईलनावाची विनंती केली जाणे शक्य आहे. ही समस्या तात्पुरती आहे आणि मूळ चित्र समर्थन लागू केल्यावर त्याचे निराकरण केले जाईल.

आम्ही डायनॅमिक शोध मोहिमा (डायनॅमिक शोध जाहिराती) सेट करण्याबद्दल लेखांची मालिका सुरू ठेवतो. पूर्वी मी याबद्दल लिहिले होते Google जाहिरातींसाठी DSA. आज आपण Yandex.Direct साठी घटक आणि फीडची उदाहरणे पाहू.

उत्पादन फीड— साइटवरील सर्व उत्पादने आणि त्यांच्या गुणधर्मांबद्दल डेटा असलेली फाइल (युनिक आयडेंटिफायर, उत्पादनांचे दुवे आणि त्यांच्या प्रतिमा).

Yandex.Direct मधील फीड श्रेणी

फीडच्या खालील श्रेणी सेवेमध्ये उपलब्ध आहेत:

"रिटेल".

"हॉटेल्स".

"रिअल इस्टेट".

"कार".

"विमान तिकीट."

“किरकोळ” साठी फीड कसे तयार करावे

YML फॉरमॅटमध्ये फीड तयार करा. कोणताही XML दस्तऐवज फक्त एक रूट घटक असू शकतो.

YML स्वरूप मूल म्हणून घटक वापरते . घटक तारीख विशेषता जाहिरातदाराच्या बाजूने YML फाइल तयार करण्याच्या तारखेशी आणि वेळेशी संबंधित असणे आवश्यक आहे. फॉरमॅटमध्ये तारीख सेट करा YYYY-MM-DD hh:mm.

http://www.nadezhnayatekhnika.rf/catalog/element/index.php?from=ya_market&utm_source=ya_market&utm_medium=cpc& 889.00 17000.00 UAH 1111 http://89.123.45.45.678/from=ya_market HP Deskjet D2663 अशा लोकांसाठी प्रिंटरची मालिका ज्यांना दैनंदिन छपाईसाठी विश्वसनीय, वापरण्यास-सुलभ रंगीत प्रिंटरची आवश्यकता आहे... प्रीपेमेंट आवश्यक आहे. खरे जपान

"हॉटेल" साठी फीड कसे तयार करावे

हॉटेल व्यवसाय प्रकारासाठी, तुम्ही Google जाहिराती हॉटेल्स आणि रेंटल्स फीड (CSV फॉरमॅट) वापरू शकता. स्तंभांची सामग्री स्वल्पविरामाने विभक्त केली जाते. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

घटक	वर्णन
	हॉटेल आयडी. आवश्यक घटक.
	हॉटेलचे नाव. आवश्यक घटक.
	ऑफर पृष्ठ URL. आवश्यक घटक.
गंतव्य नाव	हॉटेलचे स्थान (कमाल 25 वर्ण). आवश्यक घटक.

	ऑफर किंमत. ISO 4217 एन्कोडिंगमध्ये संख्या आणि चलन कोड दशांश विभाजक म्हणून (.) वापरा. शिफारस केलेला आयटम.
	ताऱ्यांची संख्या. 1 ते 5 पर्यंत पूर्णांक.
	वापरकर्ता रेटिंग, संख्या. दशांश विभाजक म्हणून कालावधी (.) वापरा.
	जास्तीत जास्त संभाव्य स्कोअर, पूर्णांक. डीफॉल्ट 5 आहे.
	हॉटेल सेवा. अर्धविरामांनी विभक्त केलेली मूल्ये निर्दिष्ट करा: बार; पूल मोफत वायफाय.

अवतरण चिन्ह ("") मध्ये अर्धविराम मूल्ये संलग्न करा.

"रिअल इस्टेट" साठी फीड कसे तयार करावे

जाहिरातदाराच्या रिअल इस्टेट ऑफरची सूची घटकामध्ये समाविष्ट आहे . प्रत्येक उत्पादन ऑफर (अपार्टमेंट) वेगळ्या घटकाद्वारे वर्णन केले जाते .

एका फीडमध्ये तुम्ही विविध विकासकांच्या निवासी संकुलांविषयी माहिती प्रसारित करू शकता. हे करण्यासाठी, प्रत्येकामध्ये सूचित करा घटकातील विकसकाबद्दल कायदेशीर माहिती .

घटक	वर्णन
	आवश्यक घटक.
	व्यवहाराचा प्रकार. अर्थ फक्त "विक्री" असा आहे. आवश्यक घटक.
	घटकांचा संच जो ऑब्जेक्टच्या स्थानाचे वर्णन करतो. नेस्टेड टॅग्जमध्ये ऑब्जेक्टच्या पत्त्याबद्दल माहितीचे तपशील असतात. आवश्यक घटक.
	परिसराचे नाव. आवश्यक घटक.
उप-परिसर-नाव

	जवळचे मेट्रो स्टेशन. जर अनेक स्टेशन्स असतील तर, प्रत्येक वेगळ्या घटकामध्ये सूचित केले जावे. सबटॅगमध्ये तपशीलवार माहिती द्या. शिफारस केलेला आयटम.

वाहतूक वेळेवर	वाहतुकीने मिनिटांत मेट्रोला जाण्याची वेळ.

	आवश्यक घटक.
	आवश्यक घटक.
	ऑब्जेक्टच्या मूल्याचे वर्णन करणारा घटकांचा संच. नेस्टेड टॅगमध्ये किंमत आणि चलन असते ज्यामध्ये किंमत दर्शविली जाते: शिफारस केलेला आयटम.


	निवासी संकुलाचे नाव. या घटकाच्या आधारे, अपार्टमेंट निवासी संकुलांमध्ये एकत्र केले जातात. निवासी संकुलाचे नाव अज्ञात असल्यास, रस्ता आणि घर क्रमांक सूचित करा (उदाहरणार्थ, पुष्किंस्काया, 25). आवश्यक घटक.
	विकसकाबद्दल माहिती. सबटॅगमध्ये तपशीलवार माहिती द्या. आवश्यक घटक.
	विकसकाच्या कायदेशीर अस्तित्वाचे पूर्ण नाव. आवश्यक घटक.
	एकूण क्षेत्रफळ. क्षेत्र मूल्य आणि युनिट नेस्टेड टॅगमध्ये पास केले जातात.

	खोलीच्या क्षेत्राचे एकक. प्रति युनिट क्षेत्राची किंमत दर्शविल्यास घटक वापरला जातो. संभाव्य मूल्ये: “चौ. मी"/"चौ. मी"

भाड्याच्या मालमत्तेसाठी ऑफर असलेले फीड स्वीकारले जात नाहीत.

निवासी अपार्टमेंट विक्री http://www.developer.ru/search18 2015-04-02T19:00:06+03:00 सेंट पीटर्सबर्ग ओ. Vasilyevsky 18 वी ओळ V.O., 32 Vasileostrovskaya 10 5 4780000 UAH ZAO "विकासक" 13 15 63.00 चौ. मी नॉर्दर्न फॅन्टसी http://www.developer.ru/images/plans/000001289.jpg

"कार" साठी फीड कसे तयार करावे

घटक	वर्णन
	उत्पादन ऑफर आयडी. विन घटक नसल्यास आवश्यक घटक.
	कार बनवणे. आवश्यक घटक.
	मॉडेलचे नाव. आवश्यक घटक.
	सुधारणेचे नाव. आवश्यक घटक.
	आवश्यक घटक.
	आवश्यक घटक.
	शरीर प्रकार. आवश्यक घटक.
	रिलीजचे वर्ष. आवश्यक घटक.
	कारची किंमत. आवश्यक घटक.
	चलन ज्यामध्ये किंमत दर्शविली आहे. आवश्यक घटक.
	VIN क्रमांक (17 वर्ण).

फीड उदाहरण:

Ford Fusion 1.4d AT (68 hp) http://www.auto.ru/1 http://picture.auto.ru/1.jpg हॅचबॅक 5 दरवाजे.

कस्टम्स 2015 575000 UAH XWBCA41ZXDK259205 द्वारे साफ केलेला साठा लाल

घटक	वर्णन
	ऑफर पृष्ठ URL. आवश्यक घटक.
	"एअर तिकिट" साठी फीड कसे तयार करावे
	आवश्यक घटक (स्मार्ट बॅनरसाठी).
	ऑफर किंमत. ISO 4217 एन्कोडिंगमध्ये संख्या आणि चलन कोड दशांश विभाजक म्हणून (.) वापरा. आवश्यक घटक.
	गंतव्य आयडी.
गंतव्य नाव	मूळ आयडी. आवश्यक घटक.
	गंतव्य नाव.

निर्गमन बिंदूचे नाव.

फीड कसे जोडायचे

Yandex.Direct मध्ये फीड जोडण्यासाठी, मोहिमांखाली तळाशी असलेल्या “फीड्स” लिंकचा वापर करून इंटरफेसवर जा.

नंतर "फीड जोडा" वर क्लिक करा.

लिंक वापरून फीड कसे जोडायचे

फाइल HTTP, HTTPS किंवा FTP द्वारे प्रवेशयोग्य असणे आवश्यक आहे. प्रवेश करण्यासाठी अधिकृतता वापरा.

तुमच्या फीडमधील लिंक्समध्ये UTM टॅग असतील जे जाहिरात मोहिमेचा मागोवा घेण्यासाठी योग्य नसतील तर मी ते काढून टाकण्याची शिफारस करतो. हे करण्यासाठी, "UTM टॅग स्वयंचलितपणे काढा" चेकबॉक्स तपासा. तुम्ही जाहिरात गट संपादन पृष्ठावर नवीन UTM टॅग जोडू शकता.

फीड फाइल कशी जोडायची

तुम्हाला अपलोड करायची असलेली फाइल निवडा. अपलोड केलेल्या फाइलचा आकार 512 MB पेक्षा जास्त नसावा. अद्यतनित करताना, फाइल रोबोटद्वारे डाउनलोड केली जाते आणि नवीन डेटा Yandex.Direct मध्ये आयात केला जातो.

तुम्ही तुमचे फीड ZIP (.zip एक्स्टेंशन) किंवा GNU ZIP (.gz एक्स्टेंशन) कॉम्प्रेशन अल्गोरिदम वापरून तयार केलेल्या संग्रहणात ठेवू शकता.

फीड जोडताना एरर आली असल्यास (उदाहरणार्थ, फीड आकार/स्वरूप/लिंक आवश्यकता पूर्ण करत नाही), तुम्हाला "अपलोड त्रुटी" स्थिती दिसेल. त्रुटी अहवाल पाहण्यासाठी, "अधिक तपशील" दुव्याचे अनुसरण करा.

फीड प्रमाणीकरण कसे कार्य करते?

प्रमाणीकरण ही आवश्यकतांच्या पूर्ततेची सर्वसमावेशक तपासणी आहे.

फाइल वाचताना अटी तपासा:

सर्व आवश्यक घटक उपस्थित आहेत;
सर्व घटकांची नावे बरोबर आहेत;
प्रत्येक घटक जास्तीत जास्त एकदा दिसतो.

यापैकी कोणतीही अटी पूर्ण न केल्यास, फाइल नाकारली जाते.

निष्कर्ष

आम्ही Yandex Direct मध्ये डायनॅमिक मोहिमा सेट करण्यासाठी सर्व पर्याय आणि फीड स्वरूप पाहिले.

फीड योग्यरित्या तयार करण्यासाठी मी तुम्हाला आठवण करून देतो:

तुमच्या व्यवसायाचा प्रकार निश्चित करा.

तुमच्या व्यवसायाच्या प्रकारावर आधारित तुमचे फीड सानुकूलित करा.
टीप: तुम्ही फीडमध्ये जितके अधिक फील्ड भराल तितके चांगले वापरकर्ता ओळखण्यात सिस्टम सक्षम असेल.

तुमच्या Yandex.Direct खात्यावर फीड अपलोड करा.

पुढील लेखात, साइट सामग्री आणि पृष्ठ फीड्स लक्ष्यित करणाऱ्या मोहिमा कशा सेट करायच्या ते मी तुम्हाला दाखवेन.

प्रतिक्रियात्मक वेब डिझाइनच्या सर्वात कठीण पैलूंपैकी एक प्रतिमा कुख्यात आहे. रिस्पॉन्सिव्ह इमेजेसच्या समस्येचे निराकरण करणारा घटक कसा वापरला जाऊ शकतो ते आज आपण पाहू आत्ता.

प्रथम समस्येबद्दल

पिक्सेल परिपूर्ण आणि निश्चित-रुंदीच्या डिझाइनचे दिवस गेले. आता वाइडस्क्रीन मॉनिटर्स, इंटरनेट टीव्ही, टॅब्लेट आणि विविध आकारांच्या स्मार्टफोन्सच्या युगात, आमच्या डिझाइन्स 320px ते संभाव्य 7680px पर्यंत कोणत्याही डिव्हाइसच्या रुंदीला अनुरूप असणे आवश्यक आहे.

एकाधिक स्क्रीन रिझोल्यूशनसह विविध आवश्यकतांनुसार प्रतिमा संकुचित करणे किंवा ताणणे आवश्यक आहे. ही समस्या असू शकते, कारण... वेक्टर ग्राफिक्सचा अपवाद वगळता, बहुसंख्य प्रतिमांची मूळ रुंदी px असते जी बदलता येत नाही.

मग आपण काय करावे?

वर्तमान सामान्य समाधान

सामान्यतः, तुम्हाला हा कोड प्रतिसादात्मक डिझाइनसह कोणत्याही वेबसाइटवर मिळेल:

Img (कमाल-रुंदी: 100%; उंची: स्वयं; )

येथे कमाल-रुंदी वापरली जाते: 100%; प्रतिमा मूळ कंटेनरच्या रुंदीच्या पलीकडे कधीही वाढणार नाही याची खात्री करण्यासाठी. जर मूळ कंटेनर प्रतिमेच्या रुंदीपेक्षा लहान रुंदीपर्यंत आकसत असेल तर, नंतरचे कंटेनरसह संकुचित होईल. उंची सेट करणे: स्वयं; प्रमाण राखण्यासाठी आवश्यक.

सर्व प्रसंगांसाठी एक "द्रव" प्रतिमा

समस्येचे निराकरण केवळ एका मार्गाने केले जाते, आम्हाला सर्व प्रकरणांसाठी समान प्रतिमा दर्शविण्याची परवानगी देते. परंतु हे आम्हाला स्थापित करण्याची संधी देत नाही भिन्नवेगवेगळ्या परिस्थितींसाठी प्रतिमा.

नवीन उपाय:

हा एक नवीन घटक आहे जो HTML5 चा भाग आहे.

आणि मध्ये केल्याप्रमाणे ते प्रतिसादात्मक प्रतिमांचे वर्णन करण्याचा एक मार्ग लागू करते. अशा प्रकारे, तुम्ही एकापेक्षा जास्त टॅग लावू शकता, प्रत्येक टॅगमध्ये वेगवेगळ्या प्रतिमांची फाइलनावे आणि त्या कोणत्या परिस्थितीत लोड केल्या पाहिजेत.

हे तुम्हाला यावर अवलंबून भिन्न प्रतिमा लोड करण्यास अनुमती देईल:

मीडिया अभिव्यक्तींचे परिणाम, जसे की उंची, रुंदी किंवा व्ह्यूपोर्ट अभिमुखता
पिक्सेल घनता

याचा अर्थ असा की आपण हे करू शकता:

बँडविड्थ कार्यक्षमतेने वापरून योग्य आकाराच्या प्रतिमा फाइल अपलोड करा.
भिन्न रूंदीमध्ये मांडणीतील बदल सामावून घेण्यासाठी भिन्न-भिमुख प्रतिमा वेगवेगळ्या प्रमाणात लोड करा.
उच्च पिक्सेल घनतेच्या प्रदर्शनासाठी उच्च-रिझोल्यूशन प्रतिमा लोड करा.

परिस्थितीनुसार भिन्न प्रतिमा वापरणे हे कसे कार्य करते?

सोबत काम करताना मूलभूत पायऱ्या

ओपनिंग आणि क्लोजिंग टॅग तयार करा.

आत, तुम्ही प्रक्रिया करू इच्छित असलेल्या प्रत्येक अभिव्यक्तीसाठी एक घटक तयार करा.

व्ह्यूपोर्टची उंची आणि रुंदी, अभिमुखता इत्यादी गोष्टींसाठी अभिव्यक्ती असलेली मीडिया विशेषता जोडा.

अपलोड करण्यासाठी इमेज फाइलच्या योग्य नावासह srcset विशेषता जोडा.

तुम्हाला वेगवेगळ्या पिक्सेल घनतेचे समर्थन करायचे असल्यास srcset विशेषतामध्ये अतिरिक्त फाइलनावे जोडा, जसे की रेटिना डिस्प्लेसाठी.

फॉलबॅक घटक जोडा .

येथे एक साधे उदाहरण आहे जेथे दृश्यमान क्षेत्राची रुंदी 768px पेक्षा कमी असल्यास, एक लहान प्रतिमा लोड केली जाते:

तुमच्या लक्षात येईल की मीडिया विशेषतामध्ये वापरलेला वाक्यरचना CSS मीडिया क्वेरींमध्ये वापरल्याप्रमाणेच आहे. तुम्ही समान धनादेश वापरू शकता, उदा. कमाल-रुंदी, किमान-रुंदी, कमाल-उंची, किमान-उंची, अभिमुखता इ. तपासा.

या तपासण्यांचा वापर केला जाऊ शकतो, उदाहरणार्थ, डिव्हाइसच्या अभिमुखतेवर अवलंबून एखाद्या प्रतिमेची लँडस्केप (लँडस्केप) किंवा पोर्ट्रेट (पोर्ट्रेट) आवृत्ती लोड करण्यासाठी आणि आपण या अभिव्यक्तींमधील परिमाणे एकाच वेळी तपासू शकता. उदाहरणार्थ:

हा कोड लहान स्क्रीन आणि योग्य अभिमुखता असलेल्या उपकरणांसाठी प्रतिमेची एक लहान लँडस्केप आवृत्ती लोड करतो. आणि मोठ्या स्क्रीन उपकरणांसाठी समान प्रतिमेची मोठी आवृत्ती.

डिव्हाइसमध्ये पोर्ट्रेट अभिमुखता असल्यास, प्रतिमेची पोर्ट्रेट आवृत्ती लोड केली जाते, लहान स्क्रीन असलेल्या डिव्हाइससाठी कमी केली जाते आणि मोठ्या स्क्रीनसह डिव्हाइसेससाठी मोठी केली जाते.

तुम्ही उच्च पिक्सेल घनतेच्या डिस्प्लेसाठी वेगळ्या रिझोल्यूशनवर प्रतिमा देऊ इच्छित असल्यास, तुम्ही srcset विशेषतामध्ये अतिरिक्त फाइलनावे निर्दिष्ट करून तसे करू शकता. रेटिना 2x डिस्प्लेसाठी कोड जोडण्याच्या आमच्या पहिल्या भागाचे उदाहरण घेऊ:

कारण मीडिया क्वेरीवर प्रथम प्रक्रिया केली जाते, आपण स्क्रीनवर दर्शविल्या जाणाऱ्या प्रतिमेचा आकार नियंत्रित करू शकता. नंतर पिक्सेल घनता तपासली जाईल: जर डिस्प्ले वाढीव घनतेला समर्थन देत असेल आणि वापरकर्ता सेटिंग्जमध्ये यासाठी परवानगी असेल तर, प्रतिमांच्या संबंधित आवृत्त्या लोड केल्या जातील.

आजच वापरा

सध्या, नेटिव्ह सपोर्ट Chrome, Firefox आणि Opera मध्ये लागू केला आहे. भविष्यात, आम्ही इतर ब्राउझरमध्ये व्यापक समर्थन पाहण्याची शक्यता आहे. पण तरीही आपल्याला या क्षणापर्यंत जगायचे आहे.

दरम्यान, तुम्हाला आत्ताच वापरायचे असल्यास तुम्हाला प्रतीक्षा करावी लागणार नाही. फक्त पिक्चरफिल २.० वापरा; फिलामेंट ग्रुपमधील स्मार्ट लोकांकडून पॉलीफिल.

तुमच्या प्रोजेक्टमध्ये picturefill.js फाइल डाउनलोड केल्यानंतर, फक्त हेडरमध्ये समाविष्ट करा:

स्क्रिप्ट एसिंक्रोनस लोड करण्याचा पर्याय देखील आहे, ज्याबद्दल तुम्ही Picturefill दस्तऐवजात वाचू शकता.

ही स्क्रिप्ट वापरताना, मी स्पष्ट केल्याप्रमाणे इच्छा घटक कार्य करेल, परंतु काही मर्यादांसह.

पिक्चरफिल IE9 मर्यादा

पिक्चरफिल IE च्या वेगवेगळ्या आवृत्त्यांसह चांगले कार्य करते, तथापि IE9 अंतर्गत वापरल्या जाणाऱ्या घटकांना समर्थन देत नाही. हे जाणून घेण्यासाठी, सशर्त टिप्पण्या वापरून स्रोत घटक टॅगमध्ये गुंडाळा; हे त्यांना IE9 वर दृश्यमान करेल, उदाहरणार्थ:

Android 2.3

IE9 प्रमाणे, Android 2.3 आतील घटक दर्शवत नाही, तथापि, जेव्हा ते सामान्यपणे वापरले जाते तेव्हा ते srcset विशेषता समजते टॅग आपण नेहमी बॅकअप समाविष्ट असल्याचे सुनिश्चित करा Android 2.3 आणि इतर ब्राउझरसाठी srcset विशेषता मध्ये डीफॉल्ट फाइलनावासह ज्यांना समान समस्या असू शकते.

JavaScript आणि मूळ मीडिया क्वेरी समर्थन आवश्यक आहे

त्यानुसार, ब्राउझरमध्ये JavaScript सक्षम करणे आवश्यक आहे. Picturefill 2.0 हे “no-js” सोल्यूशन देत नाही, कारण हे पूर्ण झाल्यास, जेव्हा ब्राउझर नेटिव्ह सपोर्ट रोल आउट करेल, तेव्हा अनेक प्रतिमा आधीच दाखवल्या जातील. तथापि, तुमच्यासाठी "no-js" पर्याय अनिवार्य असल्यास तुम्ही Picturefill 1.2 वापरू शकता.

Picturefill ची आणखी एक आवश्यकता म्हणजे मीडिया ॲट्रिब्यूटमधील अभिव्यक्तींवर प्रक्रिया करण्यासाठी नेटिव्ह मीडिया क्वेरी सपोर्ट. सर्व आधुनिक ब्राउझर मीडिया अभिव्यक्तींना समर्थन देतात, फक्त IE8 आणि खाली त्यांचे समर्थन नाही, जे वापरकर्त्यांच्या फक्त एका लहान भागाशी संबंधित आहे.

अतिरिक्त HTTP विनंत्या शक्य आहेत

हे शक्य आहे की ज्या ब्राउझरमध्ये srcset साठी मूळ समर्थन आहे परंतु अद्याप फॉलबॅक घटकामध्ये निर्दिष्ट केलेल्यासाठी समर्थन नाही मधून योग्य पर्याय निश्चित करण्यापूर्वी फाइलची विनंती केली जाऊ शकते.

ही फक्त एक तात्पुरती समस्या आहे, आणि अंगभूत समर्थन आणताच ती अदृश्य होईल

Picturefill 2.0 बद्दल अधिक वाचा आणि या पृष्ठावरून आपल्या प्रकल्पासाठी डाउनलोड करा.
responsiveimages.org वर संपूर्ण आयटम तपशील पहा.

आजच तुमच्या प्रोजेक्टमध्ये वापरून पहा!

क्रोम, फायरफॉक्स आणि ऑपेरा ब्राउझरच्या डेव्हलपमेंट बिल्डमध्ये, नवीन चित्र घटकासाठी समर्थन दिसू लागले आहे, जे अडॅप्टिव्ह डिझाइन विकसित करताना उद्भवणाऱ्या अनेक समस्यांचे निराकरण करण्यासाठी डिझाइन केलेले आहे. चला ते जवळून बघूया.

नवीन चित्र घटक प्रतिसाद देणाऱ्या वेब ऍप्लिकेशन्सच्या विकसकाला भेडसावणाऱ्या पुढील समस्यांचे निराकरण करते (मी अलीकडील फ्रंट-एंड कॉन्फरन्सपैकी एकामध्ये पेपल्सबेने प्रस्तावित केलेले वर्गीकरण वापरेन):

आर डोळयातील पडदा, i.e. 150 किंवा त्याहून अधिक dpi घनतेसह स्क्रीन, ज्यावर सामान्य प्रतिमा अस्पष्ट दिसतात

आणि रिस्पॉन्सिव्हनेस म्हणजे व्ह्यूपोर्टच्या आकारानुसार डिझाइनमध्ये लिहिलेल्या तुमच्या नियमांनुसार प्रतिमेचा आकार बदलणे.

स्वरूप, आधुनिक स्वरूप जसे की WebP ब्राउझरद्वारे समर्थित असल्यास ते वापरण्याची क्षमता

फ्रेमिंग किंवा कलात्मक हेतूंसाठी. लहान स्क्रीन असलेल्या डिव्हाइसेसवर प्रदर्शित केल्यावर प्रतिमेचे बिनमहत्त्वाचे भाग क्रॉप करणे.

पहिली अक्षरे जोडल्यास, आम्हाला मेमोनिक RAFC सिंटॅक्स मिळतो पारंपारिकपणे, नवीन घटकाचा विस्तारित वाक्यरचना असे दिसते
...

चित्र घटक कोणतीही सामग्री प्रस्तुत करत नाही, परंतु त्याच्या नेस्टेड img टॅगसाठी फक्त एक संदर्भ कंटेनर आहे.

म्हणून, बहुतेक कार्यांसाठी, चित्र न वापरता संक्षिप्त नोटेशन पुरेसे असेल

नवीन घटक वापरून वरील समस्या कशा सोडवल्या जातात ते पाहू. सर्व उदाहरण फाइल या रेपॉजिटरी github.com/fetis/picture मध्ये आढळू शकतात

डेस्कटॉपवर या लेखातील उदाहरणे तपासण्यासाठी, तुम्हाला फायरफॉक्स नाईल्टी (चित्र समर्थन dom.image.picture.enable in about:config सेट करून सक्षम केले आहे) किंवा क्रोम कॅनरी, किंवा ऑपेरा विकसक. मोबाइल डिव्हाइसवर, तुम्ही Chrome बीटामध्ये नवीन घटकाची चाचणी घेऊ शकता

डोळयातील पडदा आमच्याकडे 400x300 px प्रतिमा आहे जी आम्हाला दुप्पट आणि तिप्पट पिक्सेल घनतेवर देखील सुंदरपणे प्रदर्शित करायची आहे. हे करण्यासाठी, 800x600 आणि 1200x900 आकारांची आणखी 2 चित्रे तयार करा आणि खालील कोड लिहा.

2x आणि 3x आहे पिक्सेल घनता वर्णनकर्ता, ते ब्राउझरला सांगतात की या प्रतिमा या घनतेसाठी तयार केल्या गेल्या आहेत, आपण इच्छित असल्यास, आपण ते वापरू शकता. कृपया लक्षात घ्या की ते या प्रतिमा वापरण्यासाठी ब्राउझरला सक्ती करत नाहीत, परंतु फक्त त्यास सूचित करतात. वर्तमान कनेक्शन सारख्या इतर परिस्थितींवर अवलंबून अंतिम निर्णय त्याच्यावर अवलंबून असतो.

या प्रकरणात src विशेषता घनतेसाठी प्रतिमेचा स्रोत म्हणून काम करते< 2 и фолбеком на случай, если браузер не поддерживает новый элемент.

अनुकूलनक्षमता 700 px चा एक ब्रेकपॉइंट असलेल्या लेआउटची कल्पना करूया. जेव्हा व्ह्यूपोर्ट आकार 700 px पेक्षा जास्त असतो, तेव्हा आम्ही उजवीकडे साइडबार दाखवतो आणि आमच्या प्रतिमेचा आकार स्क्रीनच्या रुंदीच्या 75% असावा. अन्यथा, साइडबार पृष्ठाच्या शेवटी स्थित आहे आणि प्रतिमा पूर्ण रुंदीपर्यंत पसरली पाहिजे. हे खालील कोडद्वारे लागू केले आहे

400w, 800w, 1200w - हे रुंदीचे वर्णन करणारे आहेत, ते ब्राउझरला दिलेल्या URL वर किती रूंदीची प्रतिमा स्थित आहे ते सांगतात आणि या माहितीच्या आधारे, ब्राउझर वर्तमान परिस्थितीत कोणती प्रतिमा सर्वात योग्य आहे हे ठरवते. रेटिनाच्या बाबतीत, माहिती निसर्गतः सल्लागार असते आणि कोणती प्रतिमा लोड करायची याचा अंतिम निर्णय ब्राउझरकडे असतो.

घनता आणि रुंदी वर्णनकर्त्यांचा एकाच वेळी वापर करण्यास परवानगी नाही.

आकार विशेषता आमच्या डिझाइनमधील सर्व नियंत्रण बिंदूंसाठी प्रतिमा आकारांची यादी करते. ब्रेकपॉइंट्स नियमित मीडिया अभिव्यक्तीच्या रूपात सेट केले जातात, ब्राउझर पहिले घेते, जे खरे देते आणि साखळीचा पुढील विचार करत नाही. रुंदीचे मूल्य नवीन लांबीचे एकक vw वापरते, जे व्ह्यूपोर्ट रुंदीच्या टक्केवारी म्हणून मूल्य मिळवते.

प्रतिमेसाठी नियंत्रण बिंदू वापरण्याची आवश्यकता नसल्यास, प्रविष्टी या आकारात लहान केली जाऊ शकते="100vw" . आणि अधिक जटिल डिझाइनसाठी तुम्ही CSS calc() फंक्शन वापरू शकता, उदाहरणार्थ
sizes="(कमाल-रुंदी: 30em) 100vw, (कमाल-रुंदी: 50em) 50vw, calc(33vw - 100px)"

माझ्या मते वागण्याचा सर्वात कठीण गुणधर्म. आपण आकार निर्दिष्ट केले नसल्यास, ब्राउझर नेहमी सर्वात मोठी प्रतिमा निवडतो. रुंदीच्या संयोगाने ते कार्य करत नाही, जरी ते तार्किक संयोजन आणि इतर अनेक त्रुटी दिसतील. कदाचित ही लवकर अंमलबजावणीची वैशिष्ट्ये आहेत.

तुम्ही बघू शकता, आम्ही आधीच अनुकूल मांडणीच्या 80% गरजा पूर्ण केल्या आहेत, आणि अद्याप कधीही चित्र वापरलेले नाही, ते देखील प्रत्यक्षात येण्याची वेळ आली आहे.

स्वरूप प्रतिमांसाठी भिन्न स्वरूप वापरणे व्हिडिओ किंवा ऑडिओ टॅगसाठी वापरल्या जाणाऱ्या पद्धतींपेक्षा बरेच वेगळे नाही

आम्ही प्रत्येकासाठी स्त्रोत आणि माइम/टाइपची सूची निर्दिष्ट करतो आणि ब्राउझर आधीपासून त्याला माहित असलेला पहिला निवडतो. src विशेषता मधील प्रतिमा फॉलबॅक म्हणून वापरली जाते जेव्हा आम्ही लहान स्क्रीनवर फोटो दाखवतो, काहीवेळा फक्त मुख्य भाग सोडून अनावश्यक तपशील ट्रिम करणे अर्थपूर्ण ठरते. मीडिया विशेषता आम्हाला या कार्याचा सामना करण्यास मदत करेल.

प्रत्येक मीडिया विशेषतामध्ये आम्ही एक मीडिया अभिव्यक्ती निर्दिष्ट करतो, ज्यामध्ये मूळ प्रतिमा बदलेल आणि, मागील उदाहरणांप्रमाणे, ब्राउझर उपकृतत्याचे अनुसरण करा. RAFC पूर्ण रुंदीपर्यंत प्रतिमा पसरवण्यासाठी अनुकूलतेसह क्रॉपिंग कसे एकत्र केले जाते ते देखील लक्षात घ्या आणि आता सर्व 4 पद्धती एका बाटलीत :) कदाचित काही वर्षांमध्ये चित्रे घालणे असेच दिसेल (ऑपेरा ब्लॉगचे उदाहरण)

येथे वापरलेले 2 स्वरूप जेपीईजी आणि वेबपी आहेत. जेव्हा स्क्रीनची रुंदी 1280 px पेक्षा जास्त असते, तेव्हा पूर्ण-आकाराची प्रतिमा अर्ध्या व्ह्यूपोर्टमध्ये दर्शविली जाते. 640 ते 1279 रुंदीसह, क्रॉप केलेला फोटो व्ह्यूपोर्ट रुंदीच्या 60% वर दर्शविला जातो. जेव्हा स्क्रीनची रुंदी 640px पेक्षा कमी असते, तेव्हा क्रॉप केलेला फोटो 100% रुंदीवर दाखवला जातो. वर्तमान स्क्रीन DPI साठी निवड स्त्रोत फाइल्सच्या रुंदीवर आधारित केली जाते.

स्मार्ट बॅनर तयार करण्यासाठी, तुम्हाला फीड जोडणे आवश्यक आहे - उत्पादने आणि सेवांबद्दल माहिती असलेली फाइल. डायरेक्ट फीडच्या सामग्रीचे विश्लेषण करेल आणि नेटवर्कवर प्रदर्शनासाठी उत्पादन ऑफरसह स्वयंचलितपणे एक स्मार्ट बॅनर तयार करेल. डायनॅमिक जाहिराती तयार करताना तुम्ही लोड केलेले फीड वापरू शकता.

व्यवसाय आणि फीडचे प्रकार

तुमचे फीड लोड करण्यासाठी, तुम्ही जाहिरात करत असलेल्या व्यवसायाचा प्रकार निवडणे आवश्यक आहे.

फीड प्रकार व्यवसाय प्रकार का

Yandex.Market फीड (XML)	किरकोळ	इलेक्ट्रॉनिक्स आणि उपकरणे, घरगुती उपकरणे, औद्योगिक उपकरणे, कपडे, फर्निचर, बागकाम उत्पादने, खेळाच्या वस्तू, बांधकाम साहित्य, लहान मुलांची उत्पादने, टायर आणि चाके, सौंदर्य प्रसाधने, परफ्यूम इ.ची विक्री.
Google जाहिराती हॉटेल आणि रेंटल्स फीड (CSV)	हॉटेल्स	हॉटेल आरक्षणे
Auto.ru फीड (XML)	गाड्या	नवीन आणि वापरलेल्या कारची विक्री
Yandex.Real Estate फीड (XML)	रिअल इस्टेट	निवासी स्थावर मालमत्तेची विक्री
Google जाहिराती फ्लाइट फीड (CSV)	उड्डाणे	विमान तिकीट विक्री
युनिव्हर्सल फीड (CSV)	इतर व्यवसाय	इतर प्रकारच्या व्यवसायांसाठी योग्य नसलेली उत्पादने आणि सेवा
Yandex.Market फीड (XML)
Google जाहिराती कस्टम फीड (CSV)
Google जाहिराती प्रवास फीड (CSV)	टूरची विक्री, ट्रेनची तिकिटे, फेरी इ.

त्यांच्या प्रकारानुसार वर्णन न केलेल्या उत्पादन ऑफर नाकारल्या जातील.

फीड आवश्यकता

कोणताही XML दस्तऐवज फक्त एक रूट घटक असू शकतो. YML फॉरमॅट मूळ घटक म्हणून घटक वापरते. घटकाची तारीख विशेषता जाहिरातदाराच्या बाजूने YML फाइल जनरेट केलेली तारीख आणि वेळेशी जुळली पाहिजे. तारीख YYYY-MM-DD hh:mm स्वरूपात असणे आवश्यक आहे.

सरलीकृत वर्णन प्रकार
सानुकूल वर्णन प्रकार (vendor.model)

मूलभूत, सोप्या प्रकारचे वर्णन.

उदाहरण: \n \n 1620.00\n 1800.00\n RUB\n 19\n \n असत्य\n सत्य\n असत्य\n अँटीव्हायरस ESET NOD32 प्लॅटिनम संस्करण\n Eset\n NOD32-ENA-NS(BOX)-2- 1\n अँटीव्हायरस ESET NOD32 प्लॅटिनम संस्करण - 2 वर्षांसाठी परवाना NOD32-ENA-NS(BOX)-2-1\n पेमेंट: रोख, B/N, प्लास्टिक कार्ड, क्रेडिट\n खरे\n रशिया\n 18\n

घटक गुणधर्म

घटक समाविष्ट आहेत

आयटम वर्णन

नाव	उत्पादन ऑफरचे नाव. सरलीकृत प्रस्तावाच्या शीर्षकामध्ये निर्मात्याचे नाव आणि कोड सूचित करण्याची शिफारस केली जाते. आवश्यक घटक.
url	उत्पादन पृष्ठ URL. आवश्यक घटक.
चित्र
किंमत
चलन आयडी
मॉडेल
विक्रेता	उत्पादक.
विक्रेता कोड
वर्णन
श्रेणी आयडी	.
बाजार_श्रेणी
स्टोअर
पिकअप
वितरण
जुनी किंमत
विक्री_नोट्स	ऑर्डर माहिती:
निर्माता_वारंटी	हमीची उपलब्धता:
मूळ_देश	उत्पादनाचा मूळ देश.
प्रौढ
वय
डाउनलोड करण्यायोग्य	उत्पादन डाउनलोड करण्याची शक्यता: खरे - उत्पादन डाउनलोड केले जाऊ शकते; असत्य - उत्पादन डाउनलोड केले जाऊ शकत नाही.

या प्रकारचे वर्णन सर्वात सोयीस्कर आणि सार्वत्रिक आहे, बहुतेक श्रेणींमधील उत्पादनांचे वर्णन करण्यासाठी शिफारस केली जाते.

उदाहरण: \nhttp://www.nadezhnayatekhnika.rf/catalog/element/index.php?from=ya_market&utm_source=ya_market&utm_medium=cpc& \n889.00 \n17000.00 \nRUR \n1111 \nhttp://ta48. /photo/19/6.JPG \nfalse\nfalse\nTrue\nPrinter\nHP \nDeskjet D2663 \nज्या लोकांना रोजच्या छपाईसाठी विश्वासार्ह, वापरण्यास-सुलभ रंगीत प्रिंटरची गरज आहे त्यांच्यासाठी प्रिंटरची मालिका... \nप्रीपेमेंट आवश्यक आहे. \nसत्य \nजपान \n

घटक गुणधर्म

विशेषता वर्णन

आयडी

उत्पादन आयडी.

आवश्यक विशेषता.

प्रकार

आवश्यक विशेषता.

उपलब्ध

वस्तू खरेदी करण्याची शक्यता:

खरे - उत्पादन स्टॉकमध्ये आहे;
असत्य - उत्पादन स्टॉक संपले आहे.

विशेषता वर्णन

आयडी

उत्पादन आयडी.

आवश्यक विशेषता.

प्रकार

ऑफर वर्णन प्रकार. मूल्य vendor.model असावे.

आवश्यक विशेषता.

उपलब्ध

वस्तू खरेदी करण्याची शक्यता:

खरे - उत्पादन स्टॉकमध्ये आहे;
असत्य - उत्पादन स्टॉक संपले आहे.

घटक समाविष्ट आहेत

आयटम वर्णन

url	उत्पादन पृष्ठ URL. आवश्यक घटक.
चित्र	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
किंमत	हे उत्पादन ज्या किंमतीला खरेदी केले जाऊ शकते.
चलन आयडी	चलन कोड (RUB, USD, UAH, KZT). किंमत घटक असल्यास आवश्यक घटक.
मॉडेल	आवश्यक घटक.
विक्रेता	उत्पादक. आवश्यक घटक.
विक्रेता कोड	उत्पादन कोड (निर्माता कोड दर्शविला आहे).
वर्णन	उत्पादन ऑफरचे वर्णन.
प्रीफिक्स टाइप करा
श्रेणी आयडी	आवश्यक घटक. घटकामध्ये फक्त एक घटक असू शकतो.
बाजार_श्रेणी
स्टोअर	किरकोळ दुकानात वस्तू खरेदी करण्याची शक्यता: खरे - उत्पादन किरकोळ स्टोअरमध्ये खरेदी केले जाऊ शकते; खोटे - रिटेल स्टोअरमध्ये खरेदी करण्याची शक्यता नाही.
पिकअप	समस्येच्या मुद्यांवरून सेल्फ-पिकअपची शक्यता: खरे - माल स्वतः उचलला जाऊ शकतो; खोटे - सेल्फ-पिकअपची शक्यता नाही.
वितरण	मालाची कुरिअर वितरणाची शक्यता: खरे - कुरिअर वितरण शक्य आहे; खोटे - उत्पादन कुरिअरद्वारे वितरित केले जाऊ शकत नाही.
जुनी किंमत	उत्पादनाची जुनी किंमत, जी नवीन किंमतीपेक्षा जास्त असणे आवश्यक आहे.
विक्री_नोट्स	ऑर्डर माहिती: किमान ऑर्डर रक्कम, मालाची किमान मात्रा, प्रीपेमेंटची आवश्यकता; पेमेंट पर्याय, जाहिराती आणि विक्रीचे वर्णन.
निर्माता_वारंटी	हमीची उपलब्धता: खरे - उत्पादनाची अधिकृत हमी आहे; असत्य - उत्पादनाची अधिकृत हमी नाही.
मूळ_देश	उत्पादनाचा मूळ देश.
प्रौढ
वय
डाउनलोड करण्यायोग्य	उत्पादन डाउनलोड करण्याची शक्यता: खरे - उत्पादन डाउनलोड केले जाऊ शकते; असत्य - उत्पादन डाउनलोड केले जाऊ शकत नाही.

हॉटेल्स: Google जाहिराती हॉटेल्स आणि रेंटल्स फीड

Google जाहिराती हॉटेल्स आणि रेंटल्स CSV फीड हॉटेल व्यवसाय प्रकारासाठी वापरणे आवश्यक आहे. पहिल्या ओळीत स्तंभांची नावे असतात आणि पुढील ओळींमध्ये डेटा असतो. स्तंभांची सामग्री स्वल्पविरामाने विभक्त केली जाते. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

आयटम वर्णन

	हॉटेल आयडी. आवश्यक घटक.
	हॉटेलचे नाव. आवश्यक घटक.
	ऑफर पृष्ठ URL. आवश्यक घटक.
गंतव्य नाव	आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
किंमत

आयटम वर्णन

	हॉटेल आयडी. आवश्यक घटक.
	हॉटेलचे नाव. आवश्यक घटक.
	ऑफर पृष्ठ URL. आवश्यक घटक.
गंतव्य नाव	हॉटेलचे स्थान (कमाल 25 वर्ण). आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
किंमत	ऑफर किंमत. क्रमांक आणि चलन कोड (RUB, USD, UAH, KZT). दशांश विभाजक म्हणून कालावधी (.) वापरा.
	ताऱ्यांची संख्या. 1 ते 5 पर्यंत पूर्णांक.
	वापरकर्ता रेटिंग, संख्या. दशांश विभाजक म्हणून कालावधी (.) वापरा.
	जास्तीत जास्त संभाव्य स्कोअर, पूर्णांक. डीफॉल्ट 5 आहे.
	हॉटेल सेवा. अर्धविरामांनी विभक्त केलेली मूल्ये निर्दिष्ट करा: bar;pool;free Wi-Fi

नोंद. स्वल्पविराम असलेली मूल्ये अवतरण चिन्हांमध्ये (\"\") संलग्न करणे आवश्यक आहे. उदाहरणार्थ, \"मॉस्को, केंद्र\".

कार: फीड Auto.ru

Auto.ru XML फीडचा वापर ऑटोमोबाइल व्यवसाय प्रकारासाठी केला जावा. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

विक्रीसाठी जाहिरातदाराच्या रिअल इस्टेट ऑफरची सूची घटकामध्ये समाविष्ट आहे. प्रत्येक उत्पादन ऑफर (अपार्टमेंट) वेगळ्या घटकाद्वारे वर्णन केले जाते.

एका फीडमध्ये तुम्ही वेगवेगळ्या डेव्हलपर्सकडून वेगवेगळ्या निवासी कॉम्प्लेक्सची माहिती पाठवू शकता. हे करण्यासाठी, प्रत्येक घटकामध्ये विकसकाबद्दल कायदेशीर माहिती सूचित करा.

लक्ष द्या.

आम्ही भाड्याने मालमत्ता फीड स्वीकारत नाही.

उदाहरण: \n विक्री\n निवासी\n अपार्टमेंट\n http://www.developer.ru/search18\n 2015-04-02T19:00:06+03:00\n \n सेंट पीटर्सबर्ग\n o. वासिलिव्हस्की\n 18वी ओळ V.O., 32\n \n Vasileostrovskaya\n 10\n 5\n \n \n \n 4780000\n RUR\n \n \n JSC \"डेव्हलपर\" \n \n 13\n १५\n \n ६३.००\n चौ. m\n \n उत्तरी कल्पनारम्य\n http://www.developer.ru/images/plans/000001289.jpg\n

घटक गुणधर्म

घटक समाविष्ट आहेत

खालील सारणी फीड घटकांचे वर्णन करते जे स्मार्ट बॅनर किंवा डायनॅमिक जाहिराती तयार करण्यासाठी वापरले जातात.

आयटम वर्णन

प्रकार	व्यवहाराचा प्रकार. अर्थ फक्त विक्री. आवश्यक घटक.
स्थान	\n \n \n \n ...\n आवश्यक घटक.
परिसर-नाव	परिसराचे नाव. आवश्यक घटक.
उप-परिसर-नाव
पत्ता
मेट्रो	जवळचे मेट्रो स्टेशन. \n \n \n \n
नाव
वाहतूक वेळेवर
वेळेवर पाऊल
url	आवश्यक घटक.
प्रतिमा	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
इमारतीचे नाव	आवश्यक घटक.
विक्री एजंट	\n \n आवश्यक घटक.
संस्था	आवश्यक घटक.
किंमत	\n \n \n
मूल्य
चलन	चलन कोड (RUB, USD, UAH, KZT).
क्षेत्र	एकूण क्षेत्रफळ. \n \n \n
मूल्य
युनिट	खोलीच्या क्षेत्राचे एकक.
मजला

आयटम वर्णन

प्रकार	व्यवहाराचा प्रकार. अर्थ फक्त विक्री. आवश्यक घटक.
स्थान	घटकांचा संच जो ऑब्जेक्टच्या स्थानाचे वर्णन करतो. नेस्टेड टॅग ऑब्जेक्टच्या पत्त्याबद्दल तपशीलवार माहिती प्रदान करतात. \n \n \n \n ...\n आवश्यक घटक.
परिसर-नाव	परिसराचे नाव. आवश्यक घटक.
उप-परिसर-नाव
पत्ता
मेट्रो	जवळचे मेट्रो स्टेशन. जर अनेक स्टेशन्स असतील तर, प्रत्येक वेगळ्या घटकामध्ये सूचित केले जावे. नेस्टेड टॅग तपशीलवार माहिती प्रदान करतात. \n \n \n \n
नाव
वाहतूक वेळेवर	वाहतुकीने मिनिटांत मेट्रोला जाण्याची वेळ.
वेळेवर पाऊल
url	आवश्यक घटक.
प्रतिमा	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
इमारतीचे नाव	निवासी संकुलाचे नाव. या घटकाच्या आधारे, अपार्टमेंट निवासी संकुलांमध्ये एकत्र केले जातात. निवासी संकुलाचे नाव अज्ञात असल्यास, रस्ता आणि घर क्रमांक सूचित करा (लेनिना, 25) आवश्यक घटक.
विक्री एजंट	विकसकाबद्दल माहिती. नेस्टेड टॅग तपशीलवार माहिती प्रदान करतात: \n \n आवश्यक घटक.
संस्था	विकसकाच्या कायदेशीर अस्तित्वाचे नाव. आवश्यक घटक.
किंमत	ऑब्जेक्टच्या मूल्याचे वर्णन करणारा घटकांचा संच. नेस्टेड टॅग किंमत आणि चलन दर्शवतात ज्यामध्ये किंमत दर्शविली आहे: \n \n \n
मूल्य
चलन	चलन कोड (RUB, USD, UAH, KZT). मूल्य घटक असल्यास आवश्यक.
क्षेत्र	एकूण क्षेत्रफळ. क्षेत्राच्या मोजमापाचे मूल्य आणि एकक नेस्टेड टॅगमध्ये प्रसारित केले जातात: \n \n \n
मूल्य
युनिट	खोलीच्या क्षेत्राचे एकक. प्रति युनिट क्षेत्राची किंमत दर्शविल्यास घटक वापरला जातो. संभाव्य मूल्ये: चौ. मी/चौ. मी
मजला

फ्लाइट: Google जाहिराती फ्लाइट फीड

Google जाहिराती एअरलाइन तिकिटे CSV फीड एअरलाइन तिकिट व्यवसाय प्रकारासाठी वापरणे आवश्यक आहे. पहिल्या ओळीत स्तंभांची नावे असतात आणि पुढील ओळींमध्ये डेटा असतो. स्तंभांची सामग्री स्वल्पविरामाने विभक्त केली जाते. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

उदाहरण: CSV मध्ये समाविष्ट केलेले घटक

आयटम वर्णन

	आवश्यक घटक.
गंतव्य नाव	मूळ आयडी. आवश्यक घटक.
	ई-कॉमर्स
	गंतव्य नाव.
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
फ्लाइटची किंमत	ऑफर किंमत. क्रमांक आणि चलन कोड (RUB, USD, UAH, KZT). दशांश विभाजक म्हणून कालावधी (.) वापरा.

आयटम वर्णन

	ऑफर किंमत. ISO 4217 एन्कोडिंगमध्ये संख्या आणि चलन कोड दशांश विभाजक म्हणून (.) वापरा. आवश्यक घटक.
गंतव्य नाव	मूळ आयडी. आवश्यक घटक.
	गंतव्य आयडी. तुम्ही फीडमध्ये मूळ आयडी दर्शविल्यास आणि Yandex.Metrica मध्ये ई-कॉमर्सला कनेक्ट केले असल्यास, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेला ओरिजिन आयडी आणि डेस्टिनेशन आयडी वापरा. उदाहरणार्थ, \"id\": \"VKO-LHR\" .
	गंतव्य नाव.
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
फ्लाइटची किंमत	ऑफर किंमत. क्रमांक आणि चलन कोड (RUB, USD, UAH, KZT). दशांश विभाजक म्हणून कालावधी (.) वापरा.

इतर व्यवसाय: सार्वत्रिक फीड

CSV स्वरूपातील सार्वत्रिक फीड इतर व्यवसाय प्रकारात वापरले जाऊ शकते. पहिल्या ओळीत स्तंभांची नावे असतात आणि पुढील ओळींमध्ये डेटा असतो. स्तंभांची सामग्री स्वल्पविरामाने विभक्त केली जाते. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

CSV मध्ये समाविष्ट केलेले घटक

आयटम वर्णनवर्णन

	ऑफर आयडी. आवश्यक घटक.
	ई-कॉमर्स
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
शीर्षक	ऑफरचे नाव.
वर्णन	ऑफरचे वर्णन.

चलन ऑफर आयडी. आवश्यक घटक.
	दुसरा ऑफर आयडी. तुम्ही फीडमध्ये ID2 सूचित करत असल्यास आणि Yandex.Metrica मध्ये ई-कॉमर्स कनेक्ट केले असल्यास, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेला ID आणि ID2 वापरा. उदाहरणार्थ, \"id\": \"VKO-LHR\" .
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
शीर्षक	ऑफरचे नाव.
वर्णन	ऑफरचे वर्णन.
	चलनाशिवाय ऑफर किंमत. दशांश विभाजक म्हणून कालावधी (.) वापरा.
चलन	चलन कोड (RUB, USD, UAH, KZT). किंमत घटक असल्यास आवश्यक.
	जुनी ऑफर किंमत, जी नवीन किंमत (किंमत) पेक्षा जास्त असणे आवश्यक आहे.
	ऑफर आयडी. आवश्यक घटक.
	दुसरा ऑफर आयडी. तुम्ही फीडमध्ये ID2 सूचित करत असल्यास आणि Yandex.Metrica मध्ये ई-कॉमर्स कनेक्ट केले असल्यास, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेला ID आणि ID2 वापरा. उदाहरणार्थ, \"id\": \"VKO-LHR\" .
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
आयटम शीर्षक	ऑफरचे नाव.
आयटम वर्णन	ऑफरचे वर्णन.

	Yandex.Metrica मध्ये, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेले ID आणि ID2 वापरा. उदाहरणार्थ, \"id\": \"VKO-LHR\" .
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
आयटम शीर्षक	ऑफरचे नाव.
आयटम वर्णन	ऑफरचे वर्णन.
	ISO 4217 एन्कोडिंग (RUB, USD, UAH, KZT) मध्ये चलन कोडसह ऑफर किंमत. दशांश विभाजक म्हणून कालावधी (.) वापरा.
	नवीन ऑफर किंमत, जी जुन्या किमतीपेक्षा कमी असणे आवश्यक आहे (किंमत).

इतर व्यवसाय: Google जाहिराती प्रवास फीड

Google जाहिराती प्रवास CSV फीड इतर व्यवसाय प्रकारात वापरले जाऊ शकते. पहिल्या ओळीत स्तंभांची नावे असतात आणि पुढील ओळींमध्ये डेटा असतो. स्तंभांची सामग्री स्वल्पविरामाने विभक्त केली जाते. फीडमधील डेटा UTF-8 एन्कोडिंगमध्ये असणे आवश्यक आहे.

CSV मध्ये समाविष्ट केलेले घटक

खालील तक्त्यामध्ये फीड घटकांचे वर्णन केले आहे जे स्मार्ट बॅनर तयार करण्यासाठी वापरले जातात.

आयटम वर्णन

	ऑफर किंमत. ISO 4217 एन्कोडिंगमध्ये संख्या आणि चलन कोड दशांश विभाजक म्हणून (.) वापरा. आवश्यक घटक.
गंतव्य नाव	मूळ आयडी.
	गंतव्य आयडी. तुम्ही तुमच्या फीडमध्ये मूळ आयडी दर्शवल्यास आणि ई-कॉमर्स सक्षम केले असल्यास
	गंतव्य नाव.
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
	ऑफरचे नाव.
	ऑफर किंमत. ISO 4217 एन्कोडिंगमध्ये संख्या आणि चलन कोड दशांश विभाजक म्हणून (.) वापरा. आवश्यक घटक.
गंतव्य नाव	मूळ आयडी.
	गंतव्य आयडी. तुम्ही फीडमध्ये मूळ आयडी दर्शविल्यास आणि Yandex.Metrica मध्ये ई-कॉमर्सला कनेक्ट केले असल्यास, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेला ओरिजिन आयडी आणि डेस्टिनेशन आयडी वापरा. उदाहरणार्थ, \"id\": \"MOS-AMS\" .
	गंतव्य नाव.
	ऑफर पृष्ठ URL. आवश्यक घटक.
	स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.
	ऑफरचे नाव.
	ISO 4217 एन्कोडिंग (RUB, USD, UAH, KZT) मध्ये चलन कोडसह ऑफर किंमत. दशांश विभाजक म्हणून कालावधी (.) वापरा.
	नवीन ऑफर किंमत, जी जुन्या किमतीपेक्षा कमी असणे आवश्यक आहे (किंमत).

फीड जोडत आहे

फीड जोडण्यासाठी, मोहीम सूची पृष्ठावर, फीड दुव्याचे अनुसरण करा. फीड व्यवस्थापित करा पृष्ठावर, +फीड जोडा बटणावर क्लिक करा आणि तुमचा व्यवसाय प्रकार निवडा.

फाईल लिंक
फाइल अपलोड करा

तुम्हाला डाउनलोड करायची असलेली फाइल निवडा. अपलोड केलेल्या फाइलचा आकार 512 MB पेक्षा जास्त नसावा. अपडेट करताना, फाइल रोबोटद्वारे डाउनलोड केली जाते आणि नवीन डेटा डायरेक्टमध्ये आयात केला जातो.

फीड जोडताना एरर आली असेल (उदाहरणार्थ, फीडचा आकार, फॉरमॅट किंवा लिंक योग्य नाही), तुम्हाला "अपलोड एरर" स्थिती आणि एरर रिपोर्टची लिंक दिसेल.

फाइल प्रमाणीकरण

फाइल वाचताना, खालील अटी तपासल्या जातात: