😍 🏝️ 📎 मानकों द्वारा एच.टी.एम.एल. 🐐 🎄 👋

हाय हमर!

प्रारंभ में, मैं लेख को "GOST ”u के अनुसार HTML" कहना चाहता था, लेकिन फिर यह पता चला कि अधिकांश प्रोग्रामर के पास "मेट्रोलॉजी और मानकीकरण" विषय नहीं था और सभी ने "मानकीकरण", "प्रमाणन", "एकीकरण" के बारे में नहीं सुना था।

I-Free में, मैं बहुत सारे वेब एप्लिकेशन डेवलपमेंट करता हूं। और चूंकि उनमें से बहुत सारे हैं, वे अलग-अलग हैं और विभिन्न परिस्थितियों में काम करते हैं, तो हमें खुद से मानकीकरण के बारे में सोचना होगा। ऐसी एक परियोजना है "बुलेटप्रूफ एचटीएमएल 5" ( http://html5boilerplate.com/ ), जिसमें डेवलपर्स ने सही पेज टेम्पलेट बनाने का फैसला किया। मुझे वास्तव में वह पसंद आया, और मैंने अपने सभी प्रोजेक्ट उसके साथ शुरू किए। लेकिन, बग के बाद बग को ठीक करना, अधिक से अधिक नए आवेदन करना, मैं इस नतीजे पर पहुंचा कि इसका बहुत कुछ गायब है। इस लेख में, मैं इस बारे में बात करना चाहूंगा कि वे आमतौर पर पृष्ठों और वेब अनुप्रयोगों को लिखते समय क्या छोड़ते हैं और दिखाते हैं कि मैंने अपने रिक्त पृष्ठ टेम्पलेट को कैसे और क्यों अपलोड किया।

भाषा सूचक:

<html lang="ru-RU">

इसे सीएसएस में हाइफ़न के साथ जोड़ा गया है। इस प्रकार, ब्राउज़र अधिक सही ढंग से हाइफ़न की व्यवस्था कर सकता है।

 p { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

हम स्केल करने की क्षमता को हटा देते हैं:

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>

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

उपरोक्त समस्या के लिए एक और टैग:

 <meta name="HandheldFriendly" content="True"/>

संकेतक जो पृष्ठ मोबाइल उपकरणों के लिए मार्कअप अनुकूलित का उपयोग करता है। दस्तावेज़ को स्वचालित स्केलिंग के बिना प्रदर्शित करने का अनुरोध करता है।

हम किसी दस्तावेज़ को कैशिंग करने से रोकते हैं:

 <meta http-equiv="Cache-Control" content="no-cache"/>

यह कुछ डिवाइसों पर पेज को पुनर्स्थापित करने के अपर्याप्त प्रयासों से छुटकारा पाने में मदद करता है। यही है, प्रयास पर्याप्त हैं, लेकिन सभी डिवाइस बग के बिना पृष्ठ को पुनर्स्थापित नहीं करते हैं।

मोबाइल इंटरनेट एक्सप्लोरर आपको फोंट को सुचारू करने के लिए क्लियर टाइप तकनीक के सक्रियण को बाध्य करने की अनुमति देता है:

 <meta http-equiv="cleartype" content="on"/>

Apple उपकरणों के लिए चित्र जोड़ना न भूलें:

 <link rel="apple-touch-startup-image" href="images/startup.png"> <link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/> <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/> <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/>

एप्लिकेशन को पूर्ण स्क्रीन मोड में खोलने के लिए यह मेटा टैग आवश्यक है:

 <meta name="apple-mobile-web-app-capable" content="yes"/>

खैर, और iPhone में शीर्ष बार समायोजित करें:

 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

खैर, विंडोज 8 iPhone से एक उदाहरण लेता है। विवरण के लिए अतिरिक्त मार्कअप:

 <meta name="application-name" content="Title"/> <meta name="msapplication-tooltip" content="Description"/>

मेनू में एप्लिकेशन का लिंक रखने के लिए अतिरिक्त मार्कअप:

 <meta name="msapplication-TileColor" content="#990000"/> <meta name="msapplication-TileImage" content="images/custom_icon_144.png"/> <meta name="msapplication-square70x70logo" content="images/custom_icon_70.png"/> <meta name="msapplication-square150x150logo" content="images/custom_icon_150.png"/> <meta name="msapplication-square310x310logo" content="images/custom_icon_310.png"/> <meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png"/>

खिड़की के लिए अतिरिक्त सेटिंग्स। जाहिर है, यह एक HTA के लिए एक संदर्भ है जो नहीं गया:

 <meta name="msapplication-window" content="width=400;height=300"/>

हम IE को अंतिम मोड में जाने के लिए कहते हैं:

 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

छवि पैनल को अक्षम करें:

 <meta http-equiv="imagetoolbar" content="no"/>

हम IE को वर्तमान ओएस विषय को ध्यान में रखे बिना क्लासिक शैली में सब कुछ डिजाइन करने के लिए कहते हैं:

 <meta http-equiv="msthemecompatible" content="no"/>

हम फ़ोन नंबर और पते की मान्यता पर रोक लगाते हैं, साथ ही उन्हें उजागर करते हैं:

 <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="address=no"/>

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

संपूर्ण SEO किट:

 <title></title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="copyright" content="(c)"> <meta http-equiv="Reply-to" content="mail@yandex.ru">

हाल ही में, वे भी उसके बारे में भूलने लगे, लेकिन वह मदद कर सकता है यदि आवेदन ऑनलाइन किसी भी साइट पर हो।

डिफ़ॉल्ट शैलियों को छोड़ना सुनिश्चित करें:

 <link href="css/reset.min.css" rel="stylesheet" type="text/css"/>

मैंने अपना रीसेट थोड़ा बदल दिया। उन्होंने टीडी टैग के लिए पृष्ठभूमि निर्धारित की, और यह पुराने IE में बग का कारण बनता है, अगर हम टीआर टैग के माध्यम से पूरी रेखा को भरते हैं

हमारे मानक शैलियों का एक सेट जोड़ें:

 <link href="css/default.css" rel="stylesheet" type="text/css"/>

और उन्होंने कुछ और बारीकियों को ध्यान में रखा। उदाहरण के लिए, हम CSS में चयन को हटा देते हैं:

 body { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(255, 255, 255, 0); outline: none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; resize: none; -webkit-text-size-adjust: none; }

लेकिन इसे टेक्स्ट इनपुट फ़ील्ड पर छोड़ दें:

 input, textarea { -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; resize: none; }

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

सीमा चित्र लगाना आमतौर पर भुलाया नहीं जाता है, क्योंकि यह reset.css में है, लेकिन वर्टिकल-एलाइन को छोड़ दिया गया है:

 img { border: 0; vertical-align: top; }

मेरे पास "आंखों को बुलाने" के लिए एक मानक एनीमेशन वर्ग है:

 .animation { -webkit-transition: background-color 0.7s, color 1s, opacity 0.5s; -ms-transition: background-color 0.7s, color 1s, opacity 0.5s; -o-transition: background-color 0.7s, color 1s, opacity 0.5s; -moz-transition: background-color 0.7s, color 1s, opacity 0.5s; transition: background-color 0.7s, color 1s, opacity 0.5s; }

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

और इन शैलियों में, मैं उस प्लेट को रंग देता हूं जो हमेशा HTML टेम्पलेट के शीर्ष पर जाती है:

 <noscript class="no_script_message">    JavaScript.    .   JavaScript. </noscript>

और हां, प्यारे IE के लिए, बहुत शुरुआत में हम जोड़ते हैं:

 <!-- saved from url=(0014)about:internet -->

इस लाइन के द्वारा, हम उनसे पूछते हैं कि हमें कोई संकेत नहीं दिखाना चाहिए कि स्क्रिप्ट खतरनाक हैं, आदि। आदि, लेकिन जेएस को ही लें और सक्षम करें

अच्छी तरह से, चित्र और परिदृश्य उन्मुखीकरण के लिए शैलियों:

 <link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> <link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/>

यदि आप एचटीए में अनुवाद करते हैं, तो ऐसा सम्मिलित है:

 <!-- Option for HTA file <hta:application id=ifree.game.sudoku applicationName=Sudoku showInTaskBar=yes caption=yes innerBorder=yes selection=no icon=images/favicon.ico sysMenu=yes windowState=normal scroll=no resize=no navigable=no contextmenu=yes /> -->

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

 <script src="js/hta.js"></script>

इसका कार्य खिड़की को निचोड़ना है और इसे स्क्रीन के बीच में केन्द्रित करना है (यदि, निश्चित रूप से, यह संभव है)।

खैर, शायद पहले से ही इस से परिचित हैं?

 <script src="js/html5.js"></script>

हम नए HTML5 टैग के माध्यम से चलाते हैं और उन्हें पुराने IE के लिए फिर से बनाते हैं।

खैर, हम Android पंप करते हैं

 <script src="js/android.js"></script>

उदाहरण के लिए, हम उनसे पता पट्टी हटाते हैं। ऐसा करने के लिए:

पृष्ठ की ऊंचाई लें और इसे दो से बढ़ाएं
शीर्ष पर 1px तक स्क्रॉल करें
ऊँचाई को उसकी मूल स्थिति में लौटाएँ

एंड्रॉइड पर इस हैक के साथ, पता बार गायब हो जाता है। और आप स्पर्श को समाप्त कर सकते हैं, इवान चशकिन ने DUMP-2014 में इस बारे में बात की थी (और इसमें एक लेख http://habrahabr.ru/company/mailru/blog/165213/ Mail.ru से भी है)। लब्बोलुआब यह है कि यदि आप सभी स्पर्श घटनाओं को फिर से परिभाषित करते हैं और उन्हें रोकना बंद कर देते हैं, तो एंड्रॉइड घटनाओं को भेजने के साथ ब्रेक लगाना बंद कर देगा।

यदि संभव हो तो ऑफ़लाइन काम के लिए आवेदन को कैश करें:

 <html manifest="default.appcache">

वहाँ भी हाइफ़नेशन और भाषा के बारे में अधिक थे, इसलिए पूर्ण टैग यह है:

 <html manifest="default.appcache" lang="ru-RU">

एक सामान्य व्यक्ति का इनपुट कैसा दिखता है:

 <input type="text" id="name">

धूम्रपान करने वाले का इनपुट कैसा दिखता है:

 <input type="text" autocomplete="on" spellcheck="true" autocapitalize="off" autocorrect="off" autofocus required maxlength="30" pattern="^[--\s\-\_0-9]+$" class="input_name" id="input_name" placeholder=" " x-webkit-speech />

तत्व गुण:

प्लेसहोल्डर - इनपुट संकेत
अधिकतम गति - दर्ज किए गए वर्णों की संख्या सीमित करें
वर्तनी जांच - वर्तनी जाँच
स्वत: सुधार - लिखित का स्वत: सुधार
स्वतः पूर्णता - स्वचालित केस रूपांतरण
एक्स-वेबकिट-भाषण - आवाज इनपुट

आइटम के लिए आवश्यकताएँ:

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

सिफारिशें:

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

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

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

लेआउट नोट्स:

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

प्रोग्रेसिव एनहांसमेंट एंड ग्रेसफुल डिग्रेडेशन

मैं आपको सलाह देता हूं कि प्रगतिशील वृद्धि और ग्रेसफुल डिग्रेडेशन ( http://tech.yandex.ru/education/shri/ekb-2013/talks/1500 ) के बारे में यांडेक्स से सर्गेई गोरोबत्सोव की रिपोर्ट देखें कि यह कैसे लेआउट के लिए है ताकि यह हर जगह अच्छा हो।

मानकीकरण के लिए और क्या आवश्यक हो सकता है?

CSS के लिए एक कंघी ( http://csscomb.ru/online/ ) एकल रूप लेने के लिए सब कुछ मदद करेगी।
एंड्री सीटनिक के ऑटो-प्रीफिक्सर सीएसएस उपसर्गों को खत्म करने में मदद करेंगे ( http://habrahabr.ru/company/evilmartians/blog/176909/ )
यहाँ एक स्क्रिप्ट है ( http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip ) जो चित्रों का एक समूह उत्पन्न करने में मदद करेगा (स्थापित इमेजमागिक की आवश्यकता है)

इसके अलावा, अपने टेम्पलेट में, मैं कई तैयार किए गए मॉड्यूल को तुरंत कनेक्ट करता हूं जैसे कि मानक अलर्ट को प्रतिस्थापित करना, ऑटो-स्क्रॉल को साइड में जोड़ना (जैसे हब या vkontakte पर), आदि। लेकिन ये पहले से ही बाइक हैं जो इस लेख के दायरे से परे हैं।

लेकिन यह स्टैंडर्ड बाइक काम आ सकती है। मानक सूक्ष्म पाद:

 <!-- SEO schema --> <footer itemscope itemtype="http://schema.org/LocalBusiness">  «<span itemprop="name">Google</span>» <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress"> 1</span> <span itemprop="addressLocality">-</span>, <span itemprop="addressRegion"> .</span> <meta itemprop="addressCountry" content="RU"/> </div>   -: <time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa, Su 10:00-21:00">10:00 - 21:00 </time> <span itemprop="telephone">206-555-1234</span>. <span itemprop="email">info@wikimedia.org</span>. <a href="http://www.google.com" itemprop="url">http://google.com</a>. </footer>

दूसरी ओर, सभी खोज इंजनों के दस्तावेज में यह है, लेकिन कोई भी इसका समर्थन नहीं करता है। मैं इस पाद का उपयोग करता हूं आप कभी नहीं जानते, शायद भविष्य में वे इसका उपयोग करना शुरू कर देंगे।

शायद यही सब है। उन लोगों के लिए जिन्होंने एक छोटा बोनस दिया:

डेमो में, आप लेख से सभी मेटा टैग देख सकते हैं।

मानकों द्वारा एच.टी.एम.एल.

More articles: