वितरित करें और जीतें: अभी और अभी का लेआउट

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

20 से अधिक साल पहले, ईमेल सादे पाठ संदेश थे। इंटरनेट और वेब प्रौद्योगिकियों के विकास के साथ, डिजाइन के संदर्भ में और तकनीकी कार्यान्वयन के संदर्भ में ईमेल अधिक जटिल हो गए हैं। अब वे पूर्ण साइट पृष्ठों या लैंडिंग पृष्ठों की तरह दिखते हैं।

वर्ल्डकास्ट ईमेल क्लाइंट, 2000

जीमेल ईमेल क्लाइंट 2018

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

इतिहास: तब और अब, या सब कुछ इतना बुरा क्यों है

सबसे पहले, आइए याद करें कि यह सब कैसे शुरू हुआ।
90 के दशक के उत्तरार्ध में, पहले html अक्षर दिखाई दिए। HTML 4.01 और CSS2 की क्षमताओं के न्यूनतम उपयोग के साथ सरल (CSS3 का पहला मसौदा कुछ और वर्षों में दिखाई देगा)। 1996-1997 में, पहला ब्राउज़र-आधारित ईमेल क्लाइंट दिखाई देने लगा। Html मार्कअप का समर्थन करने वाले मुफ्त वेब क्लाइंट का युग शुरू हो गया है।

हॉटमेल इंटरफ़ेस 1997

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

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

जून 1999 में, माइक्रोसॉफ्ट ने आउटलुक 2000 जारी किया, जिसमें उसने पत्रों को प्रस्तुत करने के लिए इंटरनेट एक्सप्लोरर इंजन, ट्राइडेंट का उपयोग करना शुरू किया।

नया इंजन वेबसाइट डेवलपर्स के लिए सबसे अच्छा साबित नहीं हुआ और अपने साथ बड़ी संख्या में बग्स लेकर आया, जिनमें से सबसे प्रसिद्ध "आउट ऑफ ऑर्डर" बने रहे। एक पंक्ति में ईमेल क्लाइंट के कई और संस्करण। सभी छवियों का स्वत: अवरुद्ध होना और ऑल-टेक्स्ट की कमी, html रूपों की निष्क्रिय कार्यक्षमता, भेजने से पहले टूटे ईमेल पूर्वावलोकन - यह सिर्फ आउटलुक 2000/2002 / XP / 2003 की समस्याओं का हिमशैल का टिप है।

आउटलुक 2003 में ऑटो-लॉक छवियां

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

महान और भयानक HTML टेबल

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

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

विशिष्ट HTML ईमेल अंदर

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

समय बीतता गया, प्रौद्योगिकी स्थिर नहीं रही, HTML और CSS विशिष्टताओं को नई सुविधाओं के साथ उखाड़ फेंका गया, लेकिन आउटलुक और इसके साथ दुनिया के 15% ईमेल क्लाइंट (उस समय) भी जगह पर रहे। केवल आउटलुक 2016 की रिलीज़ के साथ (एमएस वर्ड के एक ही एंटीडिल्यूयिन इंजन पर शेष) ने अपने उपयोगकर्ताओं के साथ-साथ न्यूज़लेटर के डेवलपर्स के प्रति एमएस का रवैया बदल दिया। विभिन्न ईमेल क्लाइंट में मेलिंग परीक्षण के लिए अपनी सेवा के लिए जानी जाने वाली लिटमस कंपनी ने एमएस के साथ साझेदारी की है ।

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

लेआउट और साइट लेआउट के बीच अंतर

आजकल, आउटलुक ~ 10% उपयोगकर्ताओं के साथ शीर्ष तीन को बंद करता है (पहली जगह में - डेस्कटॉप / मोबाइल फोन के लिए ऐप्पल मेल, दूसरे में - वेब / मोबाइल फोन के लिए जीमेल), लेकिन यह अभी भी बहुत कुछ है। इसलिए, दुर्भाग्य से, हम अभी तक तालिकाओं से दूर नहीं हो सकते।

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

सशर्त टिप्पणियाँ

IE6-8 के दिनों को बनाने वाले कई पुराने लोगों को याद है कि यह क्या है।
"सशर्त टिप्पणियाँ" एक IE इंजन विस्तार तंत्र है जो आपको IE के विशिष्ट संस्करणों का चयन करने और उनके लिए आवश्यक नियमों को लागू करने की अनुमति देता है। यदि हमें केवल Outlook 2000 और इसके बाद के संस्करण के लिए कुछ शैलियों को जोड़ने की आवश्यकता है, तो हम लिख सकते हैं:

<!-- [if gte mso 9]> <style type="text/css"> /*     Outlook */ </style> <![endif]--> 

साथ ही, सशर्त टिप्पणियों का उपयोग करके, आप इंजन को केवल Outlook के विशिष्ट संस्करणों के लिए कुछ मार्कअप ब्लॉक प्रदान करने के लिए बाध्य कर सकते हैं:

 <!--[if (gte mso 9)|(IE)]> <table width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> 

अक्सर, सशर्त टिप्पणियाँ एक अन्य आउटलुक सुविधा - वीएमएल के साथ संयोजन में उपयोग की जाती हैं।

वेक्टर मार्कअप भाषा

वेक्टर मार्कअप लैंग्वेज (VML) 1998 में वेक्टर ग्राफिक्स का वर्णन करने के लिए MS द्वारा विकसित एक वेक्टर मार्कअप भाषा है। बाद में यह उन भाषाओं में से एक बन गई जो प्रसिद्ध एसवीजी भाषा के लिए आधार के रूप में कार्य करती थी। IE10 की रिलीज के बाद से, VML को हटा दिया गया है और अब इसका समर्थन नहीं किया गया है या विकास के अधीन नहीं है।

वेक्टर ग्राफिक्स, असमर्थित मार्कअप भाषा और एचटीएमएल-पत्र कैसे संबंधित हैं? यह सरल है: आउटलुक 2007/2010/2013/2016 में VML के बिना पृष्ठभूमि-छवि संभव नहीं है। लेकिन ऐसी नई भाषा के लिए सीखने के लिए पूरी तरह से वैकल्पिक है: आप तैयार ऑनलाइन टूल का उपयोग कर सकते हैं जो आपके लिए सब कुछ करेगा।

 <body> <div style="background-color:#7bceeb;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png"> </td> </tr> </table> </div> </body> 

काश, यह इस तथ्य को नकारता नहीं है कि समय-समय पर आपको अभी भी वीएमएल में अपना स्वयं का चयन करना है क्योंकि इस तथ्य के कारण कि आउटलुक के कुछ संस्करण में आपके पास एक पृष्ठभूमि लेआउट सेट है।

सुंदरता लाना

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

आकार

Emailmonks.com के लेखकों ने ईमेल में काम करने का तरीका जोड़ने का एक तरीका बताया। तंत्र इस प्रकार है: प्रपत्र डेटा URL फ़ंक्शन के रूप में php फ़ंक्शन द्वारा एकत्र किया जाता है; इस विशेषता को फिर एक दूरस्थ दस्तावेज़ या डेटा तालिका में संग्रहीत किया जाता है; बाद में यह विशेषता निर्दिष्ट स्रोत से अनुरोध की जाती है और पृष्ठ पर प्रदर्शित की जाती है।

ऐसे रूपों के लिए समर्थन काफी अच्छा है: ऐप्पल मेल, आईओएस, आउटलुक, आईओएस / एंड्रॉइड के लिए जीमेल और डिफ़ॉल्ट एंड्रॉइड ईमेल क्लाइंट में, वे बॉक्स से बाहर काम करते हैं।

स्लाइडर्स

हर कोई जानता है कि स्लाइडर क्या हैं, और बहुत से लोग जानते हैं कि जेएस का उपयोग करके उन्हें कैसे बनाया जाए। हालांकि, आप शुद्ध CSS / HTML का उपयोग करके स्लाइडर बना सकते हैं, और यहां तक ​​कि यह आधुनिक ईमेल क्लाइंट में सही तरीके से काम करता है (विंडोज के लिए आउटलुक के अपवाद के साथ - आपको स्लाइडर्स के लिए कमबैक की आवश्यकता होगी)।

इस स्लाइडर का जादू 20 लाइनों का है:

 .slide1 { top: 10px; left: 321px;} .slide1-content {left: 0px;} .slide1:hover { background-color: #37B330;} #slide-1:checked ~ .slide1 {background-color: #37B330 !important;} #slide-1:checked + span + table .swoosh { left: 0px !important; } .slide2 { top: 66px; left: 321px; } .slide2-content { left: 600px; } .slide2:hover { background-color: #37B330;} #slide-2:checked ~ .slide2 {background-color: #37B330 !important;} #slide-2:checked + span + table .swoosh { left: -600px !important; } .slide3 { top: 122px; left: 321px; } .slide3-content { left: 1200px; } .slide3:hover { background-color: #37B330;} #slide-3:checked ~ .slide3 {background-color: #37B330 !important;} #slide-3:checked + span + table .swoosh { left: -1200px !important; } 

वास्तव में, यहां कुछ भी जादुई नहीं है - यह केवल नेस्टेड चयनकर्ता है और स्लाइड्स को स्विच करने वाले एक तत्व की जाँच की स्थिति को बदलते समय छवियों को उनकी ऊंचाई तक स्थानांतरित कर रहा है।

अन्य इंटरैक्टिव

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

इस विकल्प के कार्यान्वयन का विवरण यहां पाया जा सकता है ।

आगे क्या है?

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

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