😹 👨🏾‍🤝‍👨🏼 😌 Drupal + Ajax + कस्टम फोंट + फ़्लैश + PNG = क्रॉस-ब्राउज़र साइट 🗃️ 🍆 ⬆️

हाल ही में, मुझे Drupal पर एक वेबसाइट विकसित करने का काम सौंपा गया था जिसमें शक्तिशाली फ़्लैश, मालिकाना फोंट और PNG- ग्राफिक्स का उपयोग किया गया था ताकि यह सभी समान रूप से कार्यालय IE6 और अन्य अधिक लोकप्रिय ब्राउज़रों में प्रदर्शित हो। सभी तकनीकों के साथ, मैंने लंबे समय तक काम किया, लेकिन मैं सोच भी नहीं सकता था कि सभी एक साथ एक बड़ा सिरदर्द होगा। लेकिन एक लाख अलग-अलग विशेष समाधानों ने मुझे इस लंबे समीकरण के सामान्य समाधान के लिए प्रेरित किया। मैं इस लेख में क्या बात करने जा रहा हूँ

कार्य

"हाइलाइट" के रूप में फ्लैश-पत्रिका के साथ ड्रुपल उत्पाद सूची और मेनू और हेडर में मानक फोंट के प्रतिस्थापन।

चलो चलते हैं!

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

पहला मृत अंत। ड्रुपल थीम में फ्लैश

चूंकि ग्राहक की भविष्य की साइट स्रोत कोड तक पहुँच अधिकार के बिना मेरी होस्टिंग पर स्थित थी, लेकिन ड्रुपल एडमिनिस्ट्रेटर के अधिकारों के साथ, सम्मिलित फ़्लैश तत्व को बदलने पर रोक लगाना आवश्यक था। सामान्य स्वफ़ोटो को छोड़ना पड़ा।
एक समाधान के लिए एक लंबी खोज के बाद (Drupal विषय में HTML में फ्लैश की सामान्य प्रविष्टि के बाद से कोई परिणाम नहीं दिया गया है), फ्लैश ऑब्जेक्ट को निम्न कोड का उपयोग करके डाला गया था:

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="880" height="440" align="middle" class="header2"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="/FLASH.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFF" /> <param name="SCALE" value="noborder" /> <param name="wmode" value="transparent" /> <embed src="/FLASH.swf" width="880" height="440" align="middle" quality="high" bgcolor="#FFF" wmode="transparent" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noborder" /> </object>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="880" height="440" align="middle" class="header2"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="/FLASH.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFF" /> <param name="SCALE" value="noborder" /> <param name="wmode" value="transparent" /> <embed src="/FLASH.swf" width="880" height="440" align="middle" quality="high" bgcolor="#FFF" wmode="transparent" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" scale="noborder" /> </object>

- कोड, बेशक, दुनिया के रूप में पुराना है और, संभवतः, सही ढंग से निर्मित नहीं है, लेकिन यह काम किया! और यह मुख्य बात है। लेकिन, चूंकि सम्मिलित तत्व ने पृष्ठ की मुख्य सामग्री के सापेक्ष बहुत अधिक स्थान लिया और बदलने की योजना नहीं बनाई, इसलिए मैंने सुझाव दिया कि इस फ़्लैश फिल्म की एक समीक्षा के बाद, उपयोगकर्ता इसे भविष्य में नहीं देखना चाहेगा। आगंतुक को विचलित न करने के लिए, तत्व को "छिपाने" का अवसर देना आवश्यक था, लेकिन साथ ही, इसे फिर से देखने का अवसर देने के लिए। आदर्श रूप से, पृष्ठ को फिर से लोड किए बिना।
फैसला जल्दी आ गया। सरल jQueery का उपयोग करना और विषय में अतिरिक्त js फ़ाइल को जटिल नहीं करना:

Drupal में jQuery अपडेट और jQuery UI मॉड्यूल स्थापित करें
Drupal विषय में, आवश्यक CSS जोड़ें (उन ब्लॉकों के लिए जिन्हें हम छिपाना या दिखाना चाहते हैं)
विषय में इन तत्वों को छिपाते हुए / दिखाते हुए एक जेएस फाइल जोड़ें
एक बटन बनाएं, जब क्लिक किया जाए, तो वही कार्रवाई की जाएगी

मेरे आश्चर्य के लिए, सब कुछ काम किया और कोई संघर्ष नहीं हुआ। लेकिन प्रभाव वास्तव में, हासिल नहीं किया गया था। दूसरे पृष्ठ पर जाने के बाद, सब कुछ शुरू से दोहराया गया था।

दूसरा मृत अंत। अजाक्स और द्रुपल

दर्दनाक विचार-विमर्श के बाद, सभी पेशेवरों और विपक्षों का वजन करते हुए, मैंने अभी भी सामग्री के अजाक्स-लोडिंग का उपयोग करने का फैसला किया, ताकि फ्लैश के साथ छिपे हुए ब्लॉक बाकी सामग्री के साथ अपडेट न हों।
कुछ खोजों के बाद, मुझे नेटवर्क पर कई समाधान मिले। मैंने पहले को चुना और बनाई जा रही साइट पर इसे ट्विस्ट करना शुरू कर दिया। तथाकथित "समाधान" - पेज रेंडरर + एसिंक्रोनस मॉड्यूल और एक ही निर्माता से संबंधित विषय। किसी कारण से, अब वे drupal.org पर उपलब्ध नहीं हैं। जाहिर है, क्योंकि मैं केवल एक ही था जो इस "समाधान" की समस्याओं में भाग गया था। पहली नज़र में, सब कुछ बहुत अच्छा था! मैंने विषय को खराब कर दिया, मॉड्यूल स्थापित किया, कॉन्फ़िगर किया। यह सब काम किया! और इसके अलावा, इसने बहुत अच्छी तरह से काम किया: जब मैंने एक या किसी अन्य आंतरिक लिंक पर क्लिक किया, तो सीएसएस डिविज़न के माध्यम से विभाज्य दिखाई दिया, लोड होने के बारे में सूचित किया। मैंने विषय के कुछ विवरणों पर काम किया और जब सब कुछ तैयार हो गया, तो मैंने सबसे अधिक जानकारी (पाठ, फ़ोटो आदि) के साथ साइट को भरना शुरू कर दिया, लेकिन सबसे दुखद बात यह हुई: किसी भी Wysiwyg संपादकों और कुछ मॉड्यूल जो मेरे लिए महत्वपूर्ण हैं, उन्होंने काम करने से इनकार कर दिया । लगता था वे चले गए। लैपटॉप पर कई रातों की नींद हराम करने, सिगरेट के एक ब्लॉक से अधिक धूम्रपान करने और एक दर्जन लीटर से अधिक कॉफी पीने और संघर्ष को खत्म करने के बाद, मुझे यह सब "सुंदरता" छोड़ने और एक अलग समाधान खोजने के लिए मजबूर होना पड़ा। और यह पाया गया:

हम अजाक्सिट मॉड्यूल को पहले से स्थापित jQuery के अपडेट और jQuery यूआई के अलावा स्थापित करते हैं, आवश्यक लाइब्रेरीज़ को अपडेट / इंस्टॉल करना नहीं भूलते हैं
हम इसे साइट के विषय के अनुसार कॉन्फ़िगर करते हैं (वहां सब कुछ बहुत सरल है)

और "ओह, भगवान!" - यह काम करता है! सच है, एक सुंदर बूट तत्व दिखाई नहीं देता है। लेकिन, मुझे लगता है कि देखभाल करने वालों के लिए, इसे अपने दम पर खराब करना मुश्किल नहीं है। जब यह काम किया, तो मुझे ऐसा लगा कि मैं केवल खुशी के लिए नृत्य कर सकता हूं, लेकिन यह वहां नहीं था। मैं अपने साथ मानक फोंट बदलने के बारे में भूल गया।

तीसरा गतिरोध। Drupal + AjaxIT + कफ़न = संघर्ष

मुझे इसके लिए JS में Cufon मॉड्यूल और फ़ॉन्ट कनवर्टर का उपयोग करने के लिए उपयोग किया जाता है। लेकिन इस बार, सभी सामान्य कार्यों को पूरा करने के बाद, मुझे कोई परिणाम नहीं मिला। सबसे पहले, मैंने सोचा कि समस्या फ़ॉन्ट में थी, लेकिन दूसरे को लागू करने के बाद, पहले से ही परीक्षण किए गए, मुझे फिर से कुछ भी नहीं मिला। फिर मेरे सिर में @ फॉन्ट-फेस प्रॉपर्टी सामने आई।

चौथा आवेग। @ फ़ॉन्ट-चेहरा और ओपेरा

एक लंबे समय के लिए वर्ल्ड वाइड वेब के wilds में तल्लीन किए बिना, मुझे एक फ़ॉन्ट-फेस जनरेटर मिला , जिसके साथ ऑपरेशन मुझे बहुत सरल लग रहा था, जिसने मुझे सतर्क कर दिया। लेकिन सादगी के साथ सावधानी से एडोब ब्राउज़रलैब में क्रॉस-ब्राउज़र संगतता के लिए साइट का परीक्षण करने के बाद बहाना नहीं मिला - यहां तक कि दुनिया भर में "प्रिय" गधे ने घड़ी की तरह काम किया। लेकिन, मेरे मित्र को हर्षित खबर के साथ कॉल करने और साइट का परीक्षण करने और मुझे स्क्रीन लेने के अनुरोध के साथ किए गए काम के बारे में अपनी बड़ाई करने की इच्छा के साथ, मुझे उससे एक पत्र प्राप्त करने के लिए गूंगा था - ओपेरा में, जिसे उसने (10.50) इस्तेमाल किया था, जिन फोंट को मैंने इतनी सावधानी से दिखाया था, वे प्रदर्शित नहीं किए गए थे।
कोड का उपयोग करके कुछ विचार-विमर्श और एक उपयुक्त समाधान खोजने के प्रयासों के बाद:

@font-face {
font-family: '';
src: url('_normal-webfont.eot');
src: local(''), local('-Normal'), url('_normal-webfont.woff') format('woff'), url('_normal-webfont.ttf') format('truetype'), url('_normal-webfont.svg#') format('svg');
}

- मनचाहा रिजल्ट आया। सभी ब्राउज़र जो मुझे रुचि रखते हैं (ओपेरा सहित, जो कि मेरी परियोजनाओं के तीस प्रतिशत से अधिक रूसी उपयोगकर्ता पसंद करते हैं) ने फोंट और अन्य सभी सामग्री को प्रदर्शित किया, जैसा कि मैं चाहता था।
यह केवल IE6 में PNG प्रदर्शित करने के लिए बना रहा, जिसके लिए मैंने Drupal - PNG व्यवहार के लिए मॉड्यूल का उपयोग किया। और उसने अपना काम तन्मयता से किया।

यदि आपके कोई प्रश्न हैं, तो मैं आपको प्रत्येक "डेड एंड्स" के बारे में विस्तार से बता सकता हूं कि इस परियोजना को बनाते समय इस या उस तकनीक ने मुझे अंदर खींच लिया और परिणाम का लिंक प्रदान किया।