सीएसएस और ब्राउज़र लेआउट के टूल इस्तेमाल करके, वेब कॉन्टेंट के लिए शानदार विज़ुअलाइज़ेशन देखे जा सकते हैं. सीएसएस फ़िल्टर, WebGL, HTML5 वीडियो, SVG, कैनवस जैसी वेब सुविधाओं का इस्तेमाल करना और आने वाली टेक्नोलॉजी, जैसे कि CSS Region, CSS Shapes और CSS Custom फ़िल्टर का इस्तेमाल करके, बड़े पैमाने पर अपने क्रिएटिव काम को बेहतर बनाने का मौका मिलता है. Adobe, लेआउट और डिज़ाइन में काफ़ी दिलचस्पी रखने वाले कॉन्टेंट क्रिएटर के साथ लंबे समय से काम कर रहा है. इसलिए, लगातार वेब पर इस जानकारी का इस्तेमाल होता रहा है. साथ ही, यह वेब के लगातार बदलते मानकों में भी योगदान देता रहा है.
National Geographic की मदद से, हमने उसकी 'फ़ॉरेस्ट जायंट' सुविधा के कॉन्टेंट का इस्तेमाल करके एक प्रोटोटाइप बनाया. यह दिखाने के लिए कि ये सुविधाएं, रिच वेब लेआउट और रिस्पॉन्सिव तकनीकों को कैसे चालू कर सकती हैं. इस लेख में बताया गया है कि हमने साइट की कुछ खास दिलचस्प विशेषताएं कैसे बनाई हैं. कम शब्दों में खास जानकारी पाने के लिए, यहां दिया गया यह वीडियो देखें. इसमें, क्रिश्चियन कैंटरेल आपको साइट की अलग-अलग सुविधाओं के बारे में जानकारी देंगे.
लेआउट की बारीकियां
बेहतरीन लेआउट और इसके पीछे की सुविधाओं के बारे में बताने वाली सुविधाएं, शानदार हो सकती हैं. इसलिए, हमने एक "एडिटर का ओवरले" बनाया है, जिसमें मौजूद सुविधाओं को हाइलाइट किया गया है. एडिटर के मार्क की सुविधा चालू करने के लिए, लेख में सबसे नीचे मौजूद बार पर क्लिक करें.
लेआउट इंडिपेंडेंट
वेब में, लेआउट को अक्सर हमारे कॉन्टेंट के हिसाब से तय किया जाता है. इसमें ऐसे कंटेनर होते हैं जिन्हें टेक्स्ट को फ़िट करने के लिए वर्टिकल तौर पर बनाया जाता है. जटिल लेआउट बनाते समय, कॉपी या अन्य कॉन्टेंट में किए गए बदलावों का पूरे लेआउट पर अनचाहा असर हो सकता है. इसकी वजह से, अनचाहे बदलावों के आधार पर कॉन्टेंट को फिर से डिज़ाइन करने की ज़रूरत पड़ती है. क्षेत्रों के हिसाब से, हम अपने कॉन्टेंट को लेआउट से अलग कर सकते हैं. इसके लिए, हम किसी एलिमेंट को अपने कॉन्टेंट के तौर पर बताते हैं. इसके बाद, लेआउट के उन हिस्सों के बारे में बताते हैं जिन्हें हम दिखाना चाहते हैं.
'फ़ॉरेस्ट जायंट' के उदाहरण में, हमारे पास एक ही एलिमेंट में कहानी है. फिर, पूरे पेज पर, हमारे पास अपना लेआउट स्कैफ़ोल्डिंग है, जिसमें फ़ोटो और टेक्स्ट के क्षेत्र शामिल हैं. सीएसएस की मदद से, हम उन एलिमेंट को तय करते हैं जिनमें कॉन्टेंट को फ़्लो करना होता है. जब कॉपी किसी एलिमेंट के आखिर में पहुंच जाती है, तो वह DOM क्रम में अगले एलिमेंट पर जाती है. इससे हम अपने कॉलम को क्रिएटिव तरीके से इस्तेमाल कर पाते हैं. साथ ही, उनकी लंबाई कम कर पाते हैं और डिज़ाइन के हिसाब से उनकी ऊंचाई भी कम हो जाती है. हमें इस बात की चिंता नहीं होती कि टेक्स्ट, एलिमेंट की ऊंचाई के बराबर होगा या नहीं. इससे हम अपने लेआउट में एलिमेंट भी शामिल कर सकते हैं, जैसे कि पूरी चौड़ाई वाली इमेज. इस दौरान, कॉन्टेंट के ज़रिए कहानी आगे भी बढ़ सकती है.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
ऊपर दी गई सीएसएस में, हम "story" नाम का एक फ़्लो बना रहे हैं. नाम वाले इस फ़्लो का कॉन्टेंट, "storyContent" आईडी वाला एलिमेंट है. इसके बाद, यह क्लास नाम "story" के साथ सभी एलिमेंट में फ़्लो करता है. CSS क्षेत्र, रिस्पॉन्सिव डिज़ाइन के लिए एक बेहतरीन टूल है. इसकी मदद से, बड़ी स्क्रीन पर रिच लेआउट के लिए कई कॉलम और ऑफ़सेट कॉलम बनाने जैसी सुविधाएं मिलती हैं. साथ ही, इससे छोटी स्क्रीन पर एक कॉलम वाले लेआउट में बदलाव किया जा सकता है. क्षेत्रों के हिसाब से, vw या vh जैसी रिस्पॉन्सिव यूनिट की मदद से भी अपने क्षेत्र का साइज़ सेट किया जा सकता है. इसका इस्तेमाल यह पक्का करने के लिए किया जा सकता है कि कॉलम, कॉन्टेंट के कट जाने की चिंता किए बिना, आपके लेआउट में व्यूपोर्ट की ऊंचाई से ज़्यादा न हों. ऐसा इसलिए, क्योंकि यह स्वाभाविक रूप से रीजन चेन में अगले एलिमेंट में चला जाएगा.
ड्रॉप कैप
सीएसएस एक्सक्लूज़न की मदद से, टेक्स्ट को अलग-अलग आकार में या उसके आस-पास रैप किया जा सकता है. इसका इस्तेमाल, ड्रॉप कैप जैसी चीज़ों को डिज़ाइन बनाने में किया जा सकता है. ड्रॉप कैप, डिज़ाइन करना आम बात है. इसमें कहानी या चैप्टर के पहले अक्षर को बड़ा किया जाता है और बाकी टेक्स्ट को किरदार की बनावट के हिसाब से रैप किया जा सकता है. यह असर, इनलाइन कॉन्टेंट को फ़्लोट के चारों ओर रैप करने के तरीके से काफ़ी मिलता-जुलता है. हालांकि, एक्सक्लूज़न के साथ, अब हम आयताकार बॉक्स तक सीमित नहीं हैं. फ़्लोट पर आकार के बाहर का इस्तेमाल करके, हम उस ज्यामिति को परिभाषित कर सकते हैं जो हमारे कॉन्टेंट को हमारे किरदार के आकार के हिसाब से रैप करने में मदद करती है.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
इससे एक एलिप्स बन जाएगा, जिससे कॉन्टेंट गोल आकार में रैप हो जाएगा. साथ ही, क्योंकि हम आकार के लिए सापेक्ष इकाइयों का इस्तेमाल कर रहे हैं, इसलिए एलिमेंट का आकार बदलने से आकार के आकार में भी बदलाव होगा.
आकार
ड्रॉप कैप के साथ, बाहर रखे गए प्लेसमेंट, शेप-इनसाइड का इस्तेमाल करके आकार में टेक्स्ट को रैप करने की सुविधा देते हैं. हम इस सुविधा का इस्तेमाल पूरी साइट पर करते हैं. खास तौर पर, बड़े इमेज कैप्शन के लिए, ताकि टेक्स्ट फ़्रेम करने के लिए फ़ोटो के नेगेटिव स्पेस का इस्तेमाल किया जा सके. इसकी मदद से हम लेआउट की नकल करने वाली दूसरी इमेज और ग्राफ़िक के साथ टेक्स्ट को भी रैप कर सकते हैं. पहले, वेब पर ऐसा करना बहुत मुश्किल था.
आकार आपके आकार को परिभाषित करने के लिए मिलती-जुलती इकाइयों का इस्तेमाल करके भी रिस्पॉन्सिव लेआउट के साथ काम कर सकते हैं. इस तरह हम ऐसे आकार बना सकते हैं जो कंटेनर या व्यूपोर्ट के हिसाब से फैलते हैं. साथ ही, आकार को पूरी तरह से बदलने या उसे हटाने के लिए मीडिया क्वेरी का भी इस्तेमाल कर सकते हैं, क्योंकि सभी चीज़ें CSS में ही परिभाषित की गई हैं. नीचे पॉइंट को परिभाषित करने वाली वैल्यू के साथ साइट में इस्तेमाल किए जा रहे पॉलीगॉन के एक आकार का उदाहरण दिया गया है:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
संतुलित टेक्स्ट
बैलेंस्ड टेक्स्ट एक ऐसी सुविधा है जो लाइनों को रैप करते समय, एक-एक शब्द को रैप करने के बजाय, एलिमेंट में मौजूद टेक्स्ट के पूरे ब्लॉक को देखती है. यह ऐसी स्थितियों से बचाता है जहां हमारे किसी एलिमेंट में समान साइज़ की लाइनें पाने के लिए, टेक्स्ट की लाइनों को तोड़कर, एक लाइन में एक या दो शब्द हों. इस तरह के कंट्रोल से, हमें टेक्स्ट के आकर्षक ब्लॉक आसानी से बनाने में मदद मिलती है. खास तौर पर, पुल कोट्स या सबटाइटल जैसे छोटे हिस्सों के लिए.
यहां पर हम लेख में बैलेंस्ड टेक्स्ट का इस्तेमाल कर रहे हैं. Adobe, इस सुविधा का इस्तेमाल एक स्टैंडर्ड के तौर पर कर रहा है. इसलिए, इसी तरह के नतीजे पाने के लिए, हम Randy Edmondds का बनाया गया पॉलीफ़िल इस्तेमाल कर रहे हैं. यह सुविधा, रिस्पॉन्सिव (स्क्रीन के हिसाब से साइज़ बदलने वाले) मामलों में सबसे अच्छी तरह दिखती है. ब्राउज़र का साइज़ बदलते समय, ब्लॉक टेक्स्ट के बीच संतुलन बनाए रखने का काम करता है. इससे, टेक्स्ट की चौड़ाई करीब-करीब एक जैसी हो जाती है. बैलेंस टेक्स्ट पॉलीफ़िल का इस्तेमाल करना आसान है, क्योंकि यह एक jQuery प्लगिन है. इसके लिए, हमें बस लेआउट बदलने के दौरान, सिलेक्टर पर ‘balanceText()’ लागू करना होता है. इससे हमें ऐसा टेक्स्ट मिलता है जो कुछ इस तरह दिखेगा:
$('.balance').balanceText();
ट्रांज़िशन फ़िल्टर करें
उपयोगकर्ता का ध्यान खींचने और अपनी साइट में हो रही चीज़ों की स्थिति के बारे में बताने के लिए, ट्रांज़िशन एक अहम तरीका है. ओपैसिटी के साथ-साथ हाल ही में 3D ट्रांसफ़ॉर्म का इस्तेमाल करने पर, हमने देखा है कि इनका इस्तेमाल, खूबसूरत ट्रांज़िशन और ऐनिमेशन बनाने के लिए किया जाता है. ऐसा तब होता है, जब उपयोगकर्ता आपकी साइट के हिस्सों को स्क्रोल करते हैं या उनके साथ इंटरैक्ट करते हैं. अब हमारे पास ऐसे फ़िल्टर हैं जिनका इस्तेमाल इसी काम के लिए किया जा सकता है.
‘फ़ॉरेस्ट जायंट’ में कुछ इमेज के दिखने पर, हम फ़िल्टर का इस्तेमाल ग्रेस्केल से फ़ेड करने के लिए करते हैं. जटिल इमेजिंग इफ़ेक्ट और ट्रांज़िशन बनाने के लिए, इन फ़िल्टर को ओपैसिटी या दूसरे फ़िल्टर के साथ जोड़ा जा सकता है. हम और भी ज़्यादा शानदार इफ़ेक्ट जोड़ने के लिए, कस्टम फ़िल्टर का इस्तेमाल कर सकते हैं.
पसंद के मुताबिक बनाए गए फ़िल्टर, जीएलएसएल का इस्तेमाल करके लिखे जाते हैं. यह वैसी ही शेडिंग भाषा है जिसका इस्तेमाल WebGL के लिए किया जाता है. इनकी मदद से, इन शेडर को सीएसएस की मदद से डीओएम एलिमेंट पर लागू किया जा सकता है. इससे, ब्लेंडिंग के मुश्किल इफ़ेक्ट और 3D डिस्टॉर्शन चालू हो जाते हैं. साइट में सबसे नीचे, 'प्रेसिडेंट ट्री को एक्सप्लोर करें' पर क्लिक करने से, आपको पेज कर्ल ऊपर दिखेगा और उसके नीचे एक और सेक्शन दिखेगा. यह सिर्फ़ एक उदाहरण है कि कस्टम फ़िल्टर, कॉन्टेंट के बीच रिच ट्रांज़िशन की अनुमति कैसे दे सकते हैं. सीएसएस ट्रांज़िशन का इस्तेमाल करके, ऐनिमेशन बनाया जा सकता है. हालांकि, अगर आपको ट्रांज़िशन की अनुमति से ज़्यादा बेहतर ऐनिमेशन या इंटरैक्शन इस्तेमाल करने हैं, तो JavaScript की मदद से स्टाइल सेट करके, शेडर में वैल्यू पास की जा सकती है. इसकी जानकारी नीचे दी गई है. इससे आपको ईज़िंग पर ज़्यादा बारीकी से कंट्रोल करने की अनुमति मिल सकती है या शेडर में हेर-फेर करने के लिए, उपयोगकर्ता के इनपुट के तरीकों की अनुमति भी मिल सकती है.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
हमारा फ़िल्टर इफ़ेक्ट लागू करने के लिए, कॉन्टेंट को जीपीयू पर टेक्सचर के तौर पर रास्टराइज़ कर रहा है. इसलिए, यह ज़रूरी है कि प्रोसेस पूरी होने के बाद ही हम इसे हटा दें, नहीं तो हमारा कॉन्टेंट धुंधला हो सकता है.
$("#map").css("webkitFilter", "none");
सीएसएस के पसंद के मुताबिक बनाए गए फ़िल्टर, पेज रैपिंग जैसे दिलचस्प इफ़ेक्ट चालू करते हैं. इससे ऐसा लगता है कि किसी पेज को असली किताब में फ़्लिप किया जा रहा है. यह सेवा, वेब डेवलपर को जीएलएसएल नाम की भाषा में कॉम्प्लेक्स इफ़ेक्ट प्रोग्राम करने और उसे वेब कॉन्टेंट पर लागू करने की सुविधा देती है. कस्टम फ़िल्टर के बारे में ज़्यादा जानकारी, उन सभी पैरामीटर, और उन्हें इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, यह ट्यूटोरियल देखें.
WebGL में प्री-रेंडर टेक्स्चर
इस लेख में सबसे बेहतरीन तस्वीर, 'राष्ट्रपति' की पहली ऐसी ही थी जो दुनिया का दूसरा सबसे बड़ा पेड़ है. इस इमेज को बनाने के लिए, पेड़ की सैकड़ों फ़ोटो को स्टिच करके एक फ़ोटो बनाई गई है. हम इस प्रोसेस को सिम्युलेट करना चाहते थे. इसके लिए, हमने इमेज को अलग-अलग छोटी-छोटी फ़ोटो में बांट दिया. इससे हमें पूरी तस्वीर बनाने में मदद मिली. इसे WebGL का इस्तेमाल करके, खास तौर पर Three.js लाइब्रेरी के साथ करके हासिल किया गया. यह WebGL के आस-पास ज़्यादा लेवल वाला एपीआई रैपर है.
बड़ी संख्या में बनावटों को रेंडर करने से हर बार जब कोई नई बनावट स्क्रीन पर खींचने का प्रयास करती है, तो अतिरिक्त नेटवर्क अनुरोधों का उल्लेख न करने से, जल्दी से प्रदर्शन समस्याएं हो सकती हैं. इसे कम करने के लिए, हमने अपनी बनावट को जितना हो सके उतना बड़ा बनाया और हर टाइल के लिए उन्हें ऑफ़सेट किया. इस तकनीक को अक्सर स्प्राइट मैपिंग कहा जाता है. साथ ही, यह गेम डेवलपमेंट में आम तौर पर इस्तेमाल होती है. इससे पूरे पेड़ की तीन बड़ी संरचनाएं बन गईं. जब-जब कोई टेक्सचर स्क्रीन पर पहली बार दिखता है, तब परफ़ॉर्मेंस हिट से छुटकारा पाने के लिए, हम ऐनिमेशन शुरू होने से पहले हर टेक्सचर के साथ 1 पिक्सल स्क्वेयर रखते हैं और परफ़ॉर्मेंस हिट को शुरुआत में ले जाते हैं. इससे हमें पेड़ की पूरी ऊंचाई को आसानी से ऐनिमेट करने में मदद मिलती है, यहां तक कि टैबलेट पर भी.
टेक्सचर को ऑफ़सेट करने के लिए, हम यूवी की सेटिंग में बदलाव कर रहे हैं. यूवी, टेक्सचर को ज्यामिति से मैप करता है. Think.js में यह ऐसा दिखेगा:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
यहां देखा जा सकता है कि हम टेक्सचर के x और y ऑफ़सेट के लिए वैरिएबल का इस्तेमाल कर रहे हैं. यही इफ़ेक्ट कस्टम जीएलएसएल शेडर मटीरियल से हासिल किया जा सकता है, जो ज्यामिति पर बनाए गए निर्देशांकों को ऑफ़सेट करता है.
एक्सपेरिमेंट के तौर पर उपलब्ध सुविधाएं
डेमो में इस्तेमाल की जाने वाली कुछ सुविधाएं अब भी प्रयोग के तौर पर उपलब्ध हैं. इसलिए, इस लेख को Chrome कैनरी में देखा जाना चाहिए. साथ ही, इस वेबसाइट पर Chrome कैनरी के लिए बताए गए सभी फ़्लैग चालू करने चाहिए.
Chrome कैनरी को इंस्टॉल करने और उसे सही तरीके से कॉन्फ़िगर करने के बाद, डेमो देखें पर जाएं. (ध्यान दें कि पूरा प्रोजेक्ट ओपन सोर्स है और GitHub पर उपलब्ध है.)
नतीजा
हम ई-बुक की मदद से यह भी एक्सप्लोर कर रहे हैं कि मोबाइल ऐप्लिकेशन में इन सुविधाओं का इस्तेमाल कैसे किया जा सकता है. इस प्रोटोटाइप की प्रोग्रेस को देखा जा सकता है. साथ ही, यह भी देखा जा सकता है कि टैबलेट पर इन सुविधाओं को दिखाने के लिए, हम अलग-अलग इंटरैक्शन और टच मॉडल का इस्तेमाल कैसे कर रहे हैं.
वेब ब्राउज़र लेआउट लगातार बेहतर हो रहा है. इसलिए, हम उस प्रोडक्शन वैल्यू और लेआउट की क्वालिटी को बनाए रखना चाहते हैं जिसकी आदत अब लेगसी कॉन्टेंट की मदद से हो रही है. सीएसएस रीजन, एक्सक्लूज़न, बैलेंस टेक्स्ट, पसंद के मुताबिक फ़िल्टर, और WebGL जैसी सुविधाओं की वजह से, कॉन्टेंट क्रिएटर्स को अब रीच और डिज़ाइन की क्वालिटी में से किसी एक को चुनने की ज़रूरत नहीं होगी. 'फ़ॉरेस्ट जायंट' इस बात का साफ़ संकेत है कि आने वाले समय में वेब, दोनों को अनुमति देगा.