प्रतिसादात्मक प्रतिमांसाठी HTML5 चित्र टॅग वापरणे. अनुकूली प्रतिमा. तुमचा मोबाईल फोन खुश करण्याचा उत्तम मार्ग

चेरचर 13.05.2019

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

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

  • आर डोळयातील पडदा, i.e. 150 किंवा त्याहून अधिक dpi घनतेसह स्क्रीन, ज्यावर सामान्य प्रतिमा अस्पष्ट दिसतात
  • आणि रिस्पॉन्सिव्हनेस म्हणजे व्ह्यूपोर्टच्या आकारानुसार डिझाइनमध्ये लिहिलेल्या तुमच्या नियमांनुसार प्रतिमेचा आकार बदलणे.
  • स्वरूप, आधुनिक स्वरूप जसे की WebP ब्राउझरद्वारे समर्थित असल्यास ते वापरण्याची क्षमता
  • फ्रेमिंग किंवा कलात्मक हेतूंसाठी. लहान स्क्रीन असलेल्या डिव्हाइसेसवर प्रदर्शित केल्यावर प्रतिमेचे बिनमहत्त्वाचे भाग क्रॉप करणे.
  • पहिली अक्षरे जोडल्यास, आम्हाला मेमोनिक RAFC सिंटॅक्स मिळतो पारंपारिकपणे, नवीन घटकाचा विस्तारित वाक्यरचना असे दिसते
    ...
    चित्र घटक कोणतीही सामग्री प्रस्तुत करत नाही, परंतु त्याच्या नेस्टेड img टॅगसाठी फक्त एक संदर्भ कंटेनर आहे.

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

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

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

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

    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 विशेषता मधील प्रतिमा फॉलबॅक म्हणून वापरली जाते जेव्हा आम्ही लहान स्क्रीनवर फोटो दाखवतो, काहीवेळा फक्त मुख्य भाग सोडून अनावश्यक तपशील ट्रिम करणे अर्थपूर्ण ठरते. मीडिया विशेषता आम्हाला या कार्याचा सामना करण्यास मदत करेल.

    प्रत्येक मीडिया विशेषतामध्ये आम्ही एक मीडिया अभिव्यक्ती निर्दिष्ट करतो, ज्यामध्ये मूळ प्रतिमा बदलेल आणि, मागील उदाहरणांप्रमाणे, ब्राउझर उपकृतत्याचे अनुसरण करा. चित्राला पूर्ण रुंदीपर्यंत पसरवण्यासाठी अनुकूलतेसह क्रॉपिंग कसे एकत्र केले आहे ते देखील लक्षात घ्या आणि आता सर्व 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 आहे.

    हॉटेल सेवा. अर्धविरामाने विभक्त केलेली मूल्ये निर्दिष्ट करा: विनामूल्य वाय-फाय;

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

    कार: फीड 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). दशांश विभाजक म्हणून कालावधी (.) वापरा.

    आयटम वर्णन

    गंतव्य आयडी.

    आवश्यक घटक.

    गंतव्य नाव

    गंतव्य नाव.

    आवश्यक घटक.

    मूळ आयडी.

    तुम्ही फीडमध्ये मूळ आयडी दर्शविल्यास आणि 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 मध्ये समाविष्ट केलेले घटक

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

    आयटम वर्णन

    गंतव्य आयडी.

    आवश्यक घटक.

    गंतव्य नाव

    गंतव्य नाव.

    मूळ आयडी.

    तुम्ही तुमच्या फीडमध्ये मूळ आयडी दर्शवल्यास आणि ई-कॉमर्स सक्षम केले असल्यास

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

    ऑफर पृष्ठ URL.

    आवश्यक घटक.

    स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.

    ऑफरचे नाव.

    गंतव्य आयडी.

    आवश्यक घटक.

    गंतव्य नाव

    गंतव्य नाव.

    मूळ आयडी.

    तुम्ही फीडमध्ये मूळ आयडी दर्शविल्यास आणि Yandex.Metrica मध्ये ई-कॉमर्सला कनेक्ट केले असल्यास, ईकॉमर्स ऑब्जेक्टमध्ये ऑफर आयडेंटिफायर म्हणून हायफनने विभक्त केलेला ओरिजिन आयडी आणि डेस्टिनेशन आयडी वापरा. उदाहरणार्थ, \"id\": \"MOS-AMS\" .

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

    ऑफर पृष्ठ URL.

    आवश्यक घटक.

    स्मार्ट बॅनरसाठी घटक असणे आवश्यक आहे.

    ऑफरचे नाव.

    ISO 4217 एन्कोडिंग (RUB, USD, UAH, KZT) मध्ये चलन कोडसह ऑफर किंमत. दशांश विभाजक म्हणून कालावधी (.) वापरा.

    नवीन ऑफर किंमत, जी जुन्या किमतीपेक्षा कमी असणे आवश्यक आहे (किंमत).

    फीड जोडत आहे

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

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

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

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

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

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

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

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

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

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

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

    संपूर्ण लेआउट अनुपालनासह निश्चित-रुंदीच्या वेबसाइट डिझाइनचे दिवस आता गेले आहेत. आजच्या वाइडस्क्रीन मॉनिटर्स, इंटरनेट टीव्ही, टॅब्लेट आणि विविध आकारांच्या स्मार्टफोन्सच्या युगात, आमच्या डिझाइनने 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 एलिमेंटमध्ये दिलेल्या फाईलनावाची विनंती केली जाणे शक्य आहे. ही समस्या तात्पुरती आहे आणि मूळ चित्र समर्थन लागू केल्यावर त्याचे निराकरण केले जाईल.

    • 'yml_catalog' घटकासाठी कोणतेही वर्णन आढळले नाही. मूळ घटक चुकीच्या पद्धतीने निर्दिष्ट केला जाऊ शकतो.
    • XML अजिबात व्युत्पन्न होत नसल्यामुळे किंवा तुम्ही Yandex ला YML ला चुकीची लिंक प्रदान केल्यामुळे ही त्रुटी स्पष्टपणे आहे. त्रुटीचे कारण शोधण्यासाठी, ब्राउझरमध्ये तुमच्या YML ची लिंक उघडा.

    • गंभीर त्रुटी: XML पार्सिंग त्रुटी: XML फीड पार्स करताना त्रुटी: अज्ञात टॅग: XML टॅग "b" (स्ट्रिंग...
    • YML निर्मिती प्रक्रियेदरम्यान काही त्रुटी आली. PHP ने एरर मेसेज टाकला आणि तो "b" टॅगमध्ये असे करतो. YML सोर्स कोड उघडा, ओळ क्रमांकानुसार तुम्हाला PHP त्रुटी मजकूर सहज सापडेल. तुम्हाला त्याचा अर्थ माहित नसेल तर गुगलवर सर्च करा. मला खात्री आहे की ही त्रुटी दूर करण्यासाठी तुम्हाला शिफारसी सापडतील.

    • आवश्यक चित्र घटक गहाळ आहे
    • Yandex.Market नियमांनुसार, निर्यात केलेल्या उत्पादनामध्ये किमान एक चित्र असणे आवश्यक आहे. चित्र नसलेली उत्पादने निर्यात केली जात नाहीत. "उत्पादन प्रतिमांची संख्या" फील्डमधील मॉड्यूल सेटिंग्जमध्ये शून्यापेक्षा मोठी संख्या असल्याचे तपासा. आणि स्टोअर डेटाबेसमधील उत्पादनांमध्ये चित्रे असल्याचे तपासा.

    • XML तपशील त्रुटी. निवडलेल्या फॉरमॅटच्या तांत्रिक आवश्यकतांनुसार तुमची किंमत सूची आणा...
    • YML निर्यात मध्ये बाह्य टॅगच्या उपस्थितीमुळे त्रुटी आली आहे. आपण कीवर्ड टॅगवर काहीतरी निर्यात केल्यास असे होते. यांडेक्सला या टॅगची आवश्यकता नाही. मॉड्यूल सेटिंग्जमध्ये निर्दिष्ट करा "फील्डमधून कीवर्ड टॅग घ्या" = "अनलोड करू नका"

    • कोणतेही आवश्यक ऑफरचे पॅरामीटर नाही
    • त्रुटी सांगते की आवश्यक उत्पादन ऑफर पॅरामीटर YML मध्ये आढळले नाही. कपडे, शूज आणि ॲक्सेसरीजसाठी, उत्पादनाचा रंग आणि आकार YML मध्ये उपस्थित असणे आवश्यक आहे. जिथे त्रुटी आली त्या रेषेद्वारे, कोणत्या उत्पादनामध्ये रंग आणि/किंवा आकार निर्दिष्ट केलेला नाही हे आपण शोधू शकता. OpenCart मधील या उत्पादनासाठी तुम्हाला एक विशेषता किंवा पर्याय निर्दिष्ट करणे आवश्यक आहे जे मॉड्यूलद्वारे YML वर निर्यात केले जाईल. मॉड्यूल सेटिंग्जमध्ये ही विशेषता किंवा पर्याय तपासा.

    ब्राउझरमध्ये दिसणाऱ्या त्रुटी
    • ब्राउझरमध्ये YML उघडताना, त्रुटी 500 किंवा 502 "खराब गेटवे" किंवा फक्त एक पांढरा स्क्रीन आहे.
    • YML व्युत्पन्न करणारी स्क्रिप्ट त्रुटीसह पूर्ण झाली. तुमची साइट सेटिंग्ज अशी आहेत की त्रुटी दर्शविल्या जात नाहीत. आपण त्रुटी प्रदर्शन सक्षम करणे आवश्यक आहे. OpenCart ॲडमिनमधील स्टोअर सेटिंग्जमध्ये त्रुटी सक्षम करणे बहुधा पुरेसे नाही. .htaccess आणि php.ini फाइल्समध्ये एरर डिस्प्ले सक्षम करणे आवश्यक आहे. परंतु हे पुरेसे असू शकत नाही. साइट होस्टिंग अशा प्रकारे कॉन्फिगर केले जाऊ शकते की या फाइल्स त्रुटी आउटपुटवर परिणाम करणार नाहीत. सर्वोत्तम गोष्ट म्हणजे होस्टिंग तांत्रिक समर्थनाशी संपर्क साधा.

    • XML पार्सिंग त्रुटी: रूट घटक आढळला नाही
    • YML व्युत्पन्न करणारी स्क्रिप्ट त्रुटीसह पूर्ण झाली. या प्रकरणात, YML पूर्णपणे तयार झाले नाही - तेथे कोणतेही क्लोजिंग टॅग नाहीत. YML स्त्रोत कोड पहा. शेवटी त्रुटी संदेश असल्यास, Yandex किंवा Google मध्ये त्रुटी मजकूर शोधा. त्रुटी संदेश नसल्यास, मागील परिच्छेद पहा.

    • त्रुटी "अधिकतम अंमलबजावणी वेळ 30 सेकंद ओलांडली"
    • डीफॉल्टनुसार, PHP स्क्रिप्ट कार्यान्वित करण्यासाठी 30 सेकंद दिले जाते. स्क्रिप्टने ३० सेकंदात YML जनरेट न केल्यास, स्क्रिप्ट जबरदस्तीने बंद करण्यात आली. अर्थात, वायएमएल तयार झाले नाही, किंवा पूर्णपणे तयार झाले नाही.
      वस्तुस्थिती अशी आहे की संपूर्ण कमोडिटी बेसची निर्यात करणे हे संसाधन-केंद्रित ऑपरेशन आहे. Yandex साठी प्रतिमा स्केलिंग करण्यास बराच वेळ लागतो, कारण Yandex 600x600 पिक्सेल पेक्षा लहान आकाराच्या प्रतिमा स्वीकारत नाही. सुदैवाने, OpenCart स्केल केलेल्या प्रतिमा इमेज कॅशेमध्ये संग्रहित करते. पुन्हा निर्यात करताना, प्रतिमा कॅशेमधून पटकन घेतल्या जातील. इमेज कॅशे पूर्णपणे तयार होईपर्यंत, YML निर्यात स्क्रिप्ट पूर्ण होण्यासाठी बराच वेळ लागू शकतो. स्क्रिप्ट अनेक वेळा चालवण्याचा प्रयत्न करा, एक कॅशे तयार होईल, स्क्रिप्ट वेळेच्या मर्यादेत वेगाने धावेल.
      हे मदत करत नसल्यास, YML जनरेशन वेळ अजून लांब आहे (तुमच्याकडे भरपूर उत्पादने आहेत या वस्तुस्थितीमुळे), नंतर तुम्ही PHP php.ini सेटिंग्ज फाइलमध्ये max_execution_time पॅरामीटर वाढवण्याचा प्रयत्न करू शकता.
      जर हे पुरेसे नसेल (अशा उत्पादन बेससह ऑनलाइन स्टोअरसाठी तुमचे होस्टिंग कमकुवत आहे), तर तुम्ही php-cli द्वारे स्क्रिप्ट चालवून YML निर्यात व्युत्पन्न करण्याचा प्रयत्न करू शकता.

      YML सामग्री प्रश्न
      • सर्वच मालाची निर्यात होत नाही.
      • YML निर्यात मध्ये सर्व उत्पादने उपस्थित नसण्याची अनेक कारणे असू शकतात. मॉड्यूल सेटिंग्ज आणि उत्पादन डेटाबेसमधील सामग्री हे सामान्य कारण आहे.

  • उत्पादनांमध्ये निर्माता निर्दिष्ट केलेला नाही, परंतु "काय निर्यात करायचे" मॉड्यूलच्या सेटिंग्ज टॅबमध्ये, उत्पादक निवडले जातात.
  • उत्पादनांना मुख्य श्रेणी नसतात, परंतु "सामान्य" टॅबमध्ये "उत्पादनांमध्ये मुख्य श्रेणी असतात" चेकबॉक्स चेक केला जातो.
  • उत्पादन काळ्या यादीत आहे किंवा पांढऱ्या यादीत नाही, जे मॉड्यूल सेटिंग्जच्या "काय निर्यात करायचे" टॅबवर निर्दिष्ट केले आहे.
  • “माल जास्त महाग असेल तरच अनलोड करा”, “माल जास्त महाग असल्यास अनलोड करू नका” किंवा “काय निर्यात करायचे” टॅबमधील “चित्रांशिवाय माल उतरवू नका” या फील्डमध्ये निर्यात केलेल्या वस्तूंमधून वस्तू वगळल्या जातात.
  • उत्पादन स्टॉक संपले आहे, आणि त्याची स्थिती "स्टॉक संपलेली" आहे जसे की उत्पादन निर्यात केले जात नाही. आउट-ऑफ-स्टॉक आयटम निर्यात करण्यासाठी, मॉड्यूल सेटिंग्जच्या “वेअरहाऊस आणि डिलिव्हरी” टॅबमध्ये, “स्टॅटस आउट ऑफ स्टॉक” फील्डमध्ये कोणतीही स्थिती निवडू नका.
  • निर्यातीत सर्वच श्रेणी समाविष्ट नाहीत.
  • OpenCart मध्ये, एक उत्पादन अनेक श्रेणींमध्ये दर्शविले जाऊ शकते, परंतु YML स्वरूपनात, एक उत्पादन केवळ एका श्रेणीचे असू शकते. निर्यात मॉड्यूल प्रथम उपलब्ध श्रेणीसाठी उत्पादन नियुक्त करते. त्यामुळे, असे दिसून येते की काही श्रेणींमध्ये कोणताही माल नाही आणि या श्रेणी निर्यातीत उपस्थित नसतील, जरी इतर श्रेणींमध्ये माल उपस्थित असेल.
    ocStore मध्ये मुख्य श्रेण्या आहेत आणि तुम्ही उत्पादनांना फक्त मुख्य श्रेणींशी जोडू शकता. हे करण्यासाठी, मॉड्यूल सेटिंग्जमध्ये, "उत्पादनांमध्ये मुख्य श्रेणी आहेत" बॉक्स चेक करा. या प्रकरणात, तुम्हाला YML निर्यातीत वस्तूंचे अधिक तपशीलवार वर्गीकरण प्राप्त होईल, परंतु ज्या वस्तूंसाठी मुख्य श्रेणी निर्दिष्ट केलेली नाही ती अजिबात निर्यात केली जाणार नाही.

    कसा बनवायचा...?
    • शून्य प्रमाण असलेल्या उत्पादनाची निर्यात कशी करू नये?
    • मॉड्यूल सेटिंग्जमध्ये, "वेअरहाऊस आणि डिलिव्हरी" टॅबमध्ये, "स्थिती "स्टॉकमध्ये नाही" फील्ड शोधा. या फील्डमध्ये, सर्व उत्पादन स्थिती तपासा. एकाधिक सूची आयटम चिन्हांकित करण्यासाठी, माउसने क्लिक करताना Ctrl की दाबून ठेवा.

    भाषांमध्ये विकास: PHP, JavaScript, node.js. डेटाबेस: MySQL, PostgreSQL, MongoDB.
    CMS ची सुधारणा: OpenCart, PrestaShop, Wordpress. यासह एकत्रीकरण: पेमेंट सिस्टम, व्हीकॉन्टाक्टे, फेसबुक, यांडेक्स.



    आम्ही वाचण्याची शिफारस करतो

    वर