एचटीएमएल 5 सेलिंग। नई तकनीकें आधुनिक वेब को कैसे बदल रही हैं

उपयोगकर्ता अनुभव `11 सम्मेलन में मेरी बात के मद्देनजर एक लेख।

HTML5 क्या है?

आज, HTML5 के बारे में, उनकी संख्या जो किसी तरह वेब विकास से जुड़े हुए हैं, केवल आलसी द्वारा नहीं सुनी जाती है। आप हर फैशन कॉन्फ्रेंस में यह मानकर बहुत कुछ नहीं खोएंगे कि वेब के बारे में कुछ है, लगभग निश्चित रूप से HTML5 के बारे में भी कुछ लगता है। लगभग हर बड़ी वेब-संबंधित कंपनी, यह Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Yandex, Mail.ru हो सकती है ... HTML5 के बारे में कुछ भी कहती है, सदियों से प्यार और एचटीएमएल 5 के प्रचार और विकास के लिए प्रतिबद्धता पर हस्ताक्षर करती है। हाँ! (ओपेरा और मोज़िला निश्चित रूप से इस सूची में भी हैं।)

यह सार्वभौमिक इच्छा केवल खुश कर सकती है। बेशक, जब तक बाजार प्रतिभागी कंबल को अपने ऊपर खींचना शुरू नहीं करते हैं, लेकिन मेज पर एक साथ बैठते हैं और सहमत होते हैं।

महान संभावनाएं, वेब विकास की एक नई लहर, वेब अनुप्रयोगों की एक नई पीढ़ी! कूल।

मैं आपको यह नहीं बताऊंगा कि HTML5 क्या है । लेख के संदर्भ में, एक बात को स्पष्ट रूप से समझना महत्वपूर्ण है: एचटीएमएल 5 की दो समझें हैं।

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

दूसरा "बड़ा" है, मार्केटिंग, HTML5 ट्रेंडिंग, नई प्रौद्योगिकियों की एक पूरी पीढ़ी के लिए एक छाता, दोनों HTML5 विनिर्देश और कई CSS3 मॉड्यूल, विभिन्न जावास्क्रिप्ट एपीआई और जावास्क्रिप्ट स्वयं के लिए नया मानक - ECMAScript5 सहित।

एक नियम के रूप में, संदर्भ यह स्पष्ट करता है कि क्या दांव पर है और बहुत भ्रम नहीं है। HTML5 मार्केटिंग एक स्थापित अवधारणा है जो सभी बाजार सहभागियों द्वारा समर्थित है। लेकिन हर बार यह जानना महत्वपूर्ण है कि वास्तव में क्या चर्चा हो रही है, क्योंकि अक्सर कुछ (चलो उंगलियों को इंगित नहीं करते हैं) खुद को HTML5 सॉस के तहत कई दिलचस्प चीजों के बारे में बात करने की अनुमति देते हैं, जिनका वेब मानकों और W3C से कोई संबंध नहीं है, लेकिन, निश्चित रूप से वेब की समग्र भावना का समर्थन करना। यह समझना भी महत्वपूर्ण है कि प्रत्येक प्रौद्योगिकी के पीछे क्या है, जहां यह एक प्रारंभिक प्रोटोटाइप है, और जहां पहले से ही एक विशिष्ट और विनिर्देश पर सहमति है।

मेरी कहानी "बड़े" एचटीएमएल 5 के लिए अधिक समर्पित होगी, लेकिन मैं उन विशिष्ट मानकों को संदर्भित करने का प्रयास करूंगा जिनके बारे में चर्चा की जाएगी।

HTML5 के लिए और HTML5 में क्रांति

यह समझने के लिए कि आधुनिक वेब कहां जा रहा है, यह समझने के लिए आपको सबसे पहले ध्यान देने की आवश्यकता है कि सामान्य उद्योग और विशेष रूप से वेब उद्योग में आईटी परिवर्तन हुए हैं। आज हम जिस दुनिया को देख रहे हैं, वह लगभग 5-10 साल पहले की तुलना में अलग-अलग है (याद रखें कि HTML 4.01 11 साल पहले की तुलना में अधिक अनुमोदित था)।

इन परिवर्तनों के बीच, निम्नलिखित पर ध्यान दिया जाना चाहिए:

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

यह सब स्पष्ट रूप से विभिन्न वेब मानकों में सन्निहित है, इसलिए आज हमारे पास प्रौद्योगिकियों की वास्तव में नई और बढ़ती पीढ़ी है (अभी हाल ही में, एडोब ने अपने एडोब मैक्स सम्मेलन में एक नए मानक और इसके कार्यान्वयन के विकल्प - सीएसएस के लिए फिल्टर और शेड्स) का प्रस्ताव पेश किया:

• HTML : शब्दार्थ, ग्राफिक्स, मल्टीमीडिया, WebForms, Security, DnD, History, Offline ...
• CSS : फ़ॉन्ट्स, रंग, सीमाएँ और पृष्ठभूमि, लेआउट, मीडिया प्रश्न, रूपांतरण, परिवर्तन और एनिमेशन ...
• एपीआई : जियोलोकेशन, डीबी और लोकलस्टोरेज, सॉकेट्स, फाइल्स, मीडिया, वर्कर्स ...
• जेएस : ECMAScript5

यह समझना भी महत्वपूर्ण है कि उपकरणों, सॉफ्टवेयर, सेवाओं, मानकों, और विभिन्न विकास प्रथाओं में इन सभी नवाचारों के बीच घनिष्ठ अंतर हैं - और वर्तमान में हम वेब विकास और वेब मानकों के क्षेत्र में जो देख रहे हैं वह निश्चित रूप से विभिन्न में परिलक्षित होगा सॉफ्टवेयर जो इन मानकों को लागू करता है और इनका समर्थन करता है (विकास उपकरण से लेकर ब्राउज़र और OS तक), और लोहे के स्तर पर (शायद यहां तक ​​कि Google का सपना सच होगा और webm; हार्डवेयर समर्थन प्रमुख उपकरणों में दिखाई देगा)।

अब बात करते हैं कि कैसे, वास्तव में, आधुनिक वेब बदल रहा है और इसके पीछे क्या प्रौद्योगिकियां और प्रथाएं हैं।

5 ए

मैंने कई प्रमुख रुझानों को उजागर करने की कोशिश की जो इन परिवर्तनों के सार का वर्णन करते हैं। ऐसा हुआ है कि उन सभी के लिए आप अक्षर "ए" (अंग्रेजी) के लिए एक विशेषता शब्द उठा सकते हैं, और वेबसाइटों या वेब अनुप्रयोगों को विकसित करने और समझने की प्रक्रिया में उनके आवेदन का क्रम, सामान्य रूप से, वर्णमाला के साथ मेल खाता है। :)

आपके पास जितना अधिक AAAAA होगा, उतना बेहतर होगा। कम, सुस्त। आह-आह-आह-आह-आह! - अच्छा। अह्ह्ह्हह - बुरा।

यह अच्छा होगा यदि आप अपनी अगली परियोजना पर विचार कर रहे हैं या वर्तमान का विश्लेषण कर रहे हैं, तो आप इसे इन "ए" के प्रिज़्म के माध्यम से देखते हैं।

A1। सुलभ

पहला A एक्सेसिबल है। साइट सुलभ होनी चाहिए। बेशक, इसमें विकलांग लोगों (एक्सेसिबिलिटी) के लिए पहुंच के मुद्दे शामिल हैं, लेकिन न केवल। साइट सभी इंटरनेट प्रतिभागियों के लिए सुलभ होनी चाहिए और इसमें खोज इंजन और कोई भी प्रोग्राम शामिल है जिसका कार्य आपके दस्तावेजों के अर्थ को निकालना है।

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

शब्दार्थ के दृष्टिकोण से, संरचनात्मक मार्कअप और सीधे अंकन दोनों के लिए HTML5 में बहुत सारे नए टैग दिखाई दिए हैं:



HTML5 में कुछ मौजूदा टैग एक नया अर्थ लेते हैं। इसलिए, यदि पहले मैं और एम ( बी और मजबूत के समान) के बीच का चुनाव अधिक बार कम वर्तनी के पक्ष में था, तो आज ये अलग-अलग शब्दार्थ भार के साथ टैग हैं, भले ही डिफ़ॉल्ट रूप से इटैलिक या बोल्ड में समान प्रतिनिधित्व हो।

HTML5 लेख भी देखें । अर्थ के साथ शब्दार्थ या मार्कअप ।

सामान्य तौर पर, अधिक अर्थ चिह्न मार्कअप है, और कम कचरा वहाँ है, आसान (स्वचालित रूप से) यह समझना है कि जानकारी कहाँ स्थित है।

नवाचारों का एक और हिस्सा सीधे पहुंच के मुद्दों से संबंधित है: यहां, सबसे पहले, हम aria- और भूमिका-विशेषताओं के बारे में बात कर रहे हैं, जो हमें सामग्री के उद्देश्य और भूमिकाओं को चिह्नित करने की अनुमति देते हैं। यह जानकारी बाद में, उदाहरण के लिए, स्क्रीन पाठकों द्वारा उपयोग की जा सकती है। मुझे कहना होगा कि पहुंच सुनिश्चित करना सबसे तुच्छ कार्य नहीं है, और HTML5 में लगभग पहली बार इस मुद्दे पर इतना ध्यान दिया गया था।

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

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

<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Konstantin Kichinsky</span> <img src="http://a1.twimg.com/profile_images/1464844323/avatarh5f_reasonably_small.png" itemprop="image" /> <span itemprop="jobTitle">ADE</span> <a href="http://constantin.kichinsky.ru" itemprop="url">constantin.kichinsky.ru</a> </div> 

Bing, Google और Yahoo द्वारा समर्थित टेम्पलेट्स के संग्रह के लिए http://schema.org/ पर नमूना योजनाएँ देखें!

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



मुझे लगता है कि सारणीबद्ध और ब्लॉक लेआउट को याद करना अनावश्यक है, लेकिन आज हम अर्थ लेआउट के करीब पहुंच रहे हैं।

दूसरी प्रवृत्ति सीएसएस क्षमताओं का विस्तार और जावास्क्रिप्ट कोड के बजाय उचित नियमों के माध्यम से विभिन्न प्रभावों, एनिमेशन और परिवर्तनों के घोषणात्मक विवरण की संभावना का उद्भव है।



दोनों प्रवृत्तियों के घोषणापत्र हम एक से अधिक बार देखेंगे;)

ए 2। अनुकूली

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

इन सभी परिदृश्यों में अलग-अलग स्क्रीन रिज़ॉल्यूशन, अलग-अलग फॉर्म फैक्टर, अलग-अलग फॉन्ट साइज़, अलग-अलग जानकारी आउटपुट डिवाइस और अन्य पैरामीटर्स को अपनाने का मतलब है।

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

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

कहीं न कहीं, यह कुछ मानकों या कुछ तकनीकों को लागू करने का मामला है, उदाहरण के लिए, विभिन्न परिस्थितियों में एक ग्राहक को अलग-अलग चित्र देने के लिए (छोटे उपकरणों पर छोटे और बड़े पर बड़े)। कहीं न कहीं, यह कार्यक्षमता विकसित करने का विषय है क्योंकि उपयुक्त क्षमताएं उपलब्ध हैं।

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

आइए कुछ विशिष्ट तकनीकों और वेब मानकों को देखें।

CSS3 मीडिया क्वेरी

पहला कार्य जो आप सभी का सामना करते हैं, वह विभिन्न स्क्रीन रिज़ॉल्यूशन के लिए साइट का अनुकूलन है। यहां समस्या यह है कि उनमें से बहुत सारे हैं, वे अलग हैं और नए लगातार दिखाई दे रहे हैं। मुझे लगता है कि हर कोई जो एक साल से अधिक समय से वेब विकास (या डिजाइन) में लगा हुआ है, इन सभी वार्तालापों को याद करता है कि क्या यह एक औसत उपयोगकर्ता के लिए स्क्रीन आकार में आंकड़ों और रुझानों का अध्ययन करते हुए 800x600px के न्यूनतम आकार से बड़े आकार में 1024x768px तक स्विच करने का समय है या नहीं।

सामान्यतया, आज यह प्रश्न, और इस तरह के प्रश्न का बहुत अधिक निरूपण अब प्रासंगिक नहीं है। जानते हो क्यों? क्योंकि धीरे-धीरे बड़े और बड़े स्क्रीन आकारों में आने के बजाय, वास्तव में, हम बड़े और बड़े आकार के विभिन्न प्रकार के स्क्रीन आकार और दोनों पक्षों पर आए हैं - छोटे मोबाइल वाले जैसे 480x800px और आधुनिक मॉनिटर के लिए बड़े - 1920x1080px या अधिक।

इसके अलावा, इस पूरी रेंज में, एक आधुनिक ब्राउज़र अंतिम डिवाइस पर काम कर सकता है - चाहे वह IE इंजन हो (विंडोज़ फोन से डेस्कटॉप विंडोज तक) या वेबकिट-आधारित इंजनों में से एक (iPhone और iPad से MacOS X और डेस्कटॉप विंडोज के लिए), या यह पूरी तरह से हो सकता है विभिन्न इंजन, विभिन्न मोबाइल उपकरणों में जावा ब्राउज़र का एक विशाल चिड़ियाघर भी शामिल है।

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



यदि आप कुछ मिनटों के लिए अपने आप को आधुनिक इंजनों तक सीमित रखते हैं, तो आप पाएंगे कि वे सभी मीडिया क्वैरिज नामक एक विशेष तकनीक का समर्थन करते हैं (यह CSS3 मॉड्यूल में से एक है)।

CSS3 मीडिया क्वेरी HTML 4.01 और CSS 2.1 के रूप में उपलब्ध पारंपरिक मीडिया प्रकारों का विस्तार करती है, और आपको विभिन्न प्लेबैक संदर्भ सेटिंग्स के आधार पर CSS नियमों को अधिक बारीकी से परिभाषित करने की अनुमति देती है, चाहे वह स्क्रीन का आकार, डिवाइस अभिविन्यास, रंग गहराई, मोनोक्रोम या रंग मुद्रण, आदि। एन।



मीडिया क्वेरी के पीछे विचार यह है कि आप यह निर्धारित कर सकते हैं कि सामग्री को कैसे पोस्ट किया जाए, कौन सी सामग्री प्रदर्शित की जाए, और कौन सी नहीं, यह सभी मापदंडों के मूल्य पर निर्भर करता है। यदि स्क्रीन छोटा है, तो आपको सभी तत्वों को पुनर्व्यवस्थित करने की आवश्यकता है ताकि वे यथोचित रूप से एक छोटी स्क्रीन में फिट हो जाएं, यदि बड़े, कहीं आप अधिक उपलब्ध स्थान ले सकते हैं, और कहीं और दिखा सकते हैं। आप अपने लिए देख सकते हैं कि यह साइट http://mediaqueri.es पर एकत्र किए गए उदाहरणों में कैसे काम करती है

वैसे, मीडिया क्वेरी का उपयोग करना, इस तथ्य से दृढ़ता से जुड़ा होता है कि आप वास्तव में इसकी प्रस्तुति से सामग्री के मार्कअप को अलग करते हैं। इसलिए, पहुँच (और शब्दार्थ) सबसे आगे है। लाभ यह है कि आप विभिन्न उपकरणों के लिए एक साइट बनाते हैं। ऐसे उपकरण जो मीडिया क्वेरी को नहीं जानते हैं, वे आपके नियमों की अनदेखी करेंगे।

आमतौर पर, सरल परिदृश्यों में, केवल CSS 2.1 और मीडिया क्वेरी मॉड्यूल की क्षमताएं पर्याप्त हैं, लेकिन जटिल टाइपसेटिंग के मामलों में, कुछ सार्थक बनाने और निष्पादन में प्रभावी बनाने के लिए अतिरिक्त टूल की आवश्यकता होती है।

आप निश्चित रूप से कई अन्य CSS3 मॉड्यूल पसंद करेंगे जो मीडिया क्वेरी के विचारों के साथ अच्छी तरह से काम करते हैं।

CSS3 के बहिष्करण और आकृतियाँ (पूर्व में स्थित फ़्लोट्स) की ओर देखें, जो आपको उनके आस-पास बहने वाली सामग्री के सापेक्ष व्यक्तिगत तत्वों की स्थिति को समायोजित करने की अनुमति देता है, और बदले में सामग्री का व्यवहार स्क्रीन मापदंडों और प्लेसमेंट मोड सहित अन्य मापदंडों द्वारा निर्धारित किया जा सकता है:



ऊपर के उदाहरण में, CSS3 बहिष्करण का उपयोग बहु-स्तंभ लेआउट और ग्रिड का उपयोग करके लेआउट के संयोजन में किया जाता है।



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

नए CSS3 मॉड्यूल के बीच इस विशेष कार्य के लिए समर्पित एक मॉड्यूल भी है - CSS3 ग्रिड लेआउट । ग्रिड आपको वर्चुअल ग्रिड पर तत्वों का निर्माण करने की अनुमति देता है। यह एक बहुत शक्तिशाली उपकरण है - कल्पना करें कि आप अलग-अलग स्क्रीन विस्तार के साथ अपने ब्लॉक के लिए अलग ग्रिड का उपयोग कर सकते हैं! जल्द ही आप कर सकते हैं;)



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



सामान्य तौर पर, आज या निकट भविष्य में उपलब्ध तकनीकों का उपयोग करके, आप आसानी से ऐसे निर्णय ले सकते हैं जो विभिन्न परिस्थितियों के अनुकूल होंगे। तकनीकी रूप से एक समाधान होने के नाते, विभिन्न स्थितियों में आपकी साइट अलग-अलग हो सकती है, प्रत्येक मामले में सबसे इष्टतम चेहरा दिखाती है।

अब प्रोग्रेसिव एनहांसमेंट पर वापस आते हैं।

प्रगतिशील वृद्धि

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

अंततः, इसका मतलब है कि आपकी साइट के सभी उपयोगकर्ताओं को न्यूनतम कार्यक्षमता की गारंटी मिलेगी, लेकिन साथ ही, उन लोगों के लिए जो अधिक हाल के समाधान पसंद करते हैं, उदाहरण के लिए, साइट अधिक सुंदर होगी।

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

यह कैसे काम करता है? बहुत सरल है।

CSS3 की सीमाओं और पृष्ठभूमि शस्त्रागार से कुछ का उपयोग करने के बारे में सोच रहे हैं? उन लोगों के लिए चौकोर कोने बनाएं जो गोल का समर्थन नहीं करते हैं, और उन लोगों के लिए गोल हैं जो उनका समर्थन नहीं करते हैं। रैपर के निर्माण के चारों ओर बाड़ लगाने और अपने स्वयं के टेप के साथ यहां क्रॉल करने के लिए कुछ भी नहीं है। पुराने ब्राउज़रों के लिए एक ठोस पृष्ठभूमि और आधुनिक लोगों के लिए एक ढाल बनाएं। यदि आप IE6-8 में एकल पृष्ठभूमि छवि के साथ प्राप्त कर सकते हैं, तो IE9 + के लिए कई पृष्ठभूमि का उपयोग छोड़ दें।

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

आप टेलीविजन सादृश्य की भावना में प्रगतिशील वृद्धि के बारे में सोच सकते हैं। हमने काले और सफेद प्रसारण से रंग और आगे उच्च-सटीक वीडियो तक एक लंबा सफर तय किया है। और (जब हम एनालॉग प्रौद्योगिकी के बारे में बात कर रहे हैं), पुराने टीवी अभी भी आधुनिक कार्यक्रम दिखा सकते हैं, लेकिन काले और सफेद रंग में। दर्शक जानते हैं कि एक आधुनिक टीवी में, चित्र बेहतर होगा। हालांकि, प्रेषित संकेत टीवी से स्वतंत्र है।

ए 3। चुस्त

थर्ड ए फुर्तीली है। दुनिया जटिल है और कभी-कभी यह कुछ अलग लेकिन सामान्य मापदंडों के लिए सुलभ और अनुकूली होने के लिए पर्याप्त नहीं है। साइट लचीली होनी चाहिए और किए गए तकनीकी निर्णय लचीले होने चाहिए।

वास्तव में, मुझे स्वीकार करना चाहिए, मेरे लिए इस लेख में पहले "लचीला" शब्द का उपयोग करने से बचना मुश्किल था, लेकिन यह इसके लायक था - और इसीलिए।

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

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

क्रमिक अनुकूलन असंभव होने पर महत्वपूर्ण बिंदुओं पर लचीलापन प्रकट होता है, अधिक अर्थहीन या परिवर्तनों की सीमा ऐसी होती है कि दो चरम बिंदुओं के बीच की दूरी बहुत बड़ी हो जाती है, और उनके बीच का मार्ग अलग-अलग परिदृश्यों में आँसू बन जाता है। एक नियम के रूप में, लचीलेपन से परे जाकर तकनीकी प्लेटफॉर्म को बदलने की विशेषता है।

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

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

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



उदाहरण के लिए, एचटीएमएल 5 में बनाया गया प्रसिद्ध गेम एंग्री बर्ड्स, संगीत और ऑडियो प्रभाव चलाने के लिए एडोब फ्लैश का उपयोग करता है। यह अजीब लग सकता है, हालांकि, यह एक सामान्य, लचीला तकनीकी समाधान है जो आपको उन तकनीकों का उपयोग करने की अनुमति देता है जो उपलब्ध हैं और ब्राउज़रों की एक विस्तृत श्रृंखला में काफी प्रभावी ढंग से काम करते हैं। इस मामले में, डेवलपर्स को एचटीएमएल 5 में ऑडियो तत्व के माध्यम से ऑडियो चलाने में कई समस्याओं का सामना करना पड़ा (वैसे, यह इंटरनेट एक्सप्लोरर नहीं था, लेकिन एक अन्य लोकप्रिय ब्राउज़र;) और उन्होंने समस्या को हल करने के लिए एक फ्लैश का उपयोग किया। यह धार्मिक भावनाओं को शामिल किए बिना प्रौद्योगिकी के लचीले संयोजन का एक उदाहरण है।



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

मुझे अमेज़ॅन की प्रेरणा के सभी व्यावसायिक विवरण नहीं पता हैं, लेकिन, अंततः, किंडल क्लाउड रीडर स्पष्ट रूप से एप्लिकेशन स्टोर को दरकिनार करते हुए एक ब्राउज़र के माध्यम से अंतिम उपयोगकर्ताओं के साथ सीधे बातचीत करने की कंपनी की इच्छा को दर्शाता है। यदि आप प्राथमिक लक्ष्य दर्शकों को देखते हैं - ये iPad और Android टैबलेट के उपयोगकर्ता हैं।

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



वेबकिट WebSQL डेटाबेस तकनीक का समर्थन करता है, जो आपको वही करने की अनुमति देता है जो आपको चाहिए: स्थानीय भंडारण में डेटा संग्रहीत करें। इस बिंदु पर, यदि आप नए वेब मानकों से परिचित हैं, तो आपको कुछ क्लिक करना चाहिए। वास्तव में, W3C वेबसाइट पर एक फ्रेम में लाल अक्षरों में और इसके अलावा पीले रंग की मंडलियों के साथ एक काले रंग की पृष्ठभूमि पर सफेद (ऊपर देखें) यह कहता है कि प्रौद्योगिकी का विकास रुक गया है। वास्तव में, आज W3C और ब्राउज़र डेवलपर्स एक वैकल्पिक तकनीक देख रहे हैं - IndexedDB (और अपेक्षाकृत सरल परिदृश्यों के लिए स्थानीय भंडारण)।

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

यह प्रौद्योगिकी में लचीलापन है और कुछ मायनों में मुख्य रूप से मुख्य दर्शकों के लिए उत्पाद बनाने का निर्णय लेने में भी साहस है और निर्णय लेने के लिए अपने रास्ते से हटने की कोशिश नहीं करता है जो सभी, सभी संभावित उपयोगकर्ताओं के लिए काम करेगा। लचीलापन ट्रेड-ऑफ को पहचानता है।



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

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

लचीलापन तकनीकी शुद्धता का सवाल नहीं है (यह सवाल हमेशा प्रासंगिक बना रहता है, हालांकि कभी-कभी समझौता करना आवश्यक होता है), यह मौजूदा क्षमताओं का उपयोग करने और वर्तमान समस्याओं को हल करने की प्रभावशीलता का सवाल है।

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

ये तथाकथित फ़ॉलबैक स्क्रिप्ट हैं, जब, उदाहरण के लिए, पुराने ब्राउज़र में, एक विशिष्ट असमर्थित (एक नियम के रूप में, क्योंकि ब्राउज़र खराब नहीं हैं, लेकिन क्योंकि वे पुराने हैं) तंत्र अन्य उपलब्ध तकनीकों के माध्यम से कार्यान्वित किया जाता है:

• HTML5 वीडियो ⇒ फ़्लैश | SL ⇒ फ़ाइल
• वेब सॉकेट ⇒ फ़्लैश | SL ⇒ धूमकेतु
• कैनवास ⇒ फ़्लैश | SL
• एसवीजी ⇒ वीएमएल | फ्लैश | SL
• ...

कुछ मामलों में, वर्तमान स्तर और पुराने ब्राउज़रों में जो अंतर है, वह तथाकथित पॉलीफ़िल्स की मदद से भरा जाता है (देखें कि पॉलीफ़िल क्या है? रेमी शार्प द्वारा)।

और कभी-कभी आपके पास ब्राउज़रों के पारिस्थितिकी तंत्र के हिस्से को काटने का साहस होता है, हालांकि, अपने उपयोगकर्ताओं के लिए सम्मान नहीं भूलते हैं। यह वास्तव में महत्वपूर्ण है।

और हां, फ़ीचर डिटेक्शन एप्रोच और मॉडर्निज़्र लाइब्रेरी का इस्तेमाल करना न भूलें।

ए 4। async

चौथा A है Async। एक साइट को विशेष रूप से हमारी दुनिया की अतुल्यकालिकता और उसके वेब भाग को समझना चाहिए। , — - , , , , .

, , . , , , .

, :

• उपयोगकर्ता सहभागिता

, , , .

, , ? : . : , . Application Cache HTML5 , .

, ? , , , timeout? , , ? ( ) . : - . AJAX , Web Sockets , .

, - , , , , File API? UI, . Web Workers Web Messaging, JavaScript .

, , . .

A5. Attractive

, A — Attractive. . , , , . , .

, , , - ( , ). .

— . - ( ) — , . , .

HTML5 — Canvas SVG, HTML5 Audio Video, CSS, , , .



, , , HTML5 Canvas. , , . !



Never Mind the Bullets . , CSS3 , . .



, Bing, , Bing - HTML5 Video ( , USA).

, .

5A. निष्कर्ष

. 5A — , . . , , , -.

, , -, , , , .

5A. , !

ps IE

:

• HTML5 Semantic Tags — IE9+ (+HTML5 Shim <IE9)
• HTML5 Canvas, Audio + Video, SVG — IE9+
• HTML5 Offline|Application Cache, Web Forms — IE10+
• ARIA, role attributes — IE8+, IE9+
• CSS3 Media Queries, Transforms 2D, Fonts (Font-face + WOFF), Borders & Backgrounds (Border Radius, Multiple Backgrounds) — IE9+
• CSS3 Exclusions and Shapes, Grid Layout, Flexible Box, Transforms 3D, Transitions, Animations, Borders & Backgrounds (Gradients) — IE10+
• Web Storage — IE8+
• IndexedDB, Web Sockets, Web Workers, Web Messaging — IE10+
• IE Pinned Sites — IE9+

, IE .