HTML और CSS के लिए कुछ कारणों से साक्षात्कार करना मुश्किल है:
वे बहुत बुनियादी हैं, तुलना में, उदाहरण के लिए, एक प्रोग्रामिंग भाषा के लिए,
वे नौकरी के संदर्भ पर बहुत निर्भर करते हैं। उदाहरण:
यदि आप Google स्केल, बेहद तेजी से और अनुकूलित वेबसाइटों का निर्माण करते हैं, तो जिन लोगों के लिए आप साक्षात्कार करते हैं, वे सीएसएस स्प्राइट्स को अनदेखा नहीं कर सकते।
यदि आप XHTML W3C मान्य वेबसाइट बनाते हैं, तो आपको यह सुनिश्चित करना चाहिए कि उम्मीदवारों को XHTML 1.0 और XHTML 1.1 के बीच का अंतर पता हो, या इसके लिए अनिवार्य गुण क्या हैं <img/>, आदि।
यदि आप हैक से भरे भयानक वेबसाइट बनाते हैं, तो आपको उन लोगों से साक्षात्कार करना चाहिए जिनके बारे में वे इस तरह के या ऐसे हैक करते हैं, कैसे वे विभिन्न ब्राउज़रों के लिए अलग सीएसएस की सेवा करते हैं, आदि।
आदि।
यदि यह एक शुद्ध एचटीएमएल और सीएसएस नौकरी है, तो व्यक्ति को एक तरफ डिजाइनरों के साथ काम करना होगा, और दूसरी ओर डेवलपर्स। उन्हें एचटीएमएल और सीएसएस का पता होना चाहिए, लेकिन उन लोगों के साथ बातचीत करने की उनकी क्षमता कितनी अधिक मूल्यवान है , और डिजाइनरों की जरूरतों, डेवलपर्स की आवश्यकताओं और एचटीएमएल और सीएसएस की बाधाओं दोनों को समझने के लिए।
उदाहरण के लिए, उन्हें पता होना चाहिए कि अपने HTML को इस तरह से कैसे तैयार किया जाए कि जावास्क्रिप्ट डेवलपर के लिए बाद में अन्तरक्रियाशीलता जोड़ना आसान हो जाए।
आप कुछ बुनियादी सवालों से शुरू करना चाहते हैं:
आपका पसंदीदा ब्राउज़र क्या है?
यदि व्यक्ति "इंटरनेट एक्सप्लोरर" का जवाब देता है, तो साक्षात्कार को तुरंत रोक दें: आपको किसी ऐसे व्यक्ति की आवश्यकता नहीं है।
नहीं, मैं मज़ाक कर रहा हूं। जवाब अप्रासंगिक है। इसके बजाय, आप निम्नलिखित पूछ सकते हैं:
मुझे अपने पसंदीदा ब्राउज़र में उपयोग किए जाने वाले डिबग टूल के बारे में बताएं।
Chrome का उपयोग करके प्राथमिक, मैं डेवलपर टूल के साथ दैनिक कार्य करता हूं। वे उपकरण मुझे इसकी अनुमति देते हैं:
पृष्ठ से किए गए अनुरोध देखें,
एक पेज और संबंधित संसाधनों को लोड करने में लगने वाले समय का अध्ययन करें, विशेष रूप से DNS लुकअप, प्रतीक्षा और प्राप्त करने का समय,
भेजे गए तत्वों के हेडर, साथ ही कैश इंडिकेटर का अध्ययन करें,
DOM देखें और अध्ययन करें कि CSS चयनकर्ता कैसे लागू होते हैं,
मैं YSlow का भी उपयोग करता हूं जो मुझे एक वेबसाइट के अनुकूलन के लिए चेकलिस्ट के रूप में कार्य करता है जिसे उच्च मापनीयता की आवश्यकता होती है। YSlow भी एक अच्छा उपकरण है जब यह निर्धारित करने की बात आती है कि क्या सर्वर सही तरीके से कॉन्फ़िगर किया गया है (सही हेडर इत्यादि भेज रहा है)।
फ़ायरफ़ॉक्स में, मैं फायरबग का उपयोग करता हूं, क्रोम से डेवलपर टूल के समान उपकरण। डेवलपर उपकरण इंटरनेट एक्सप्लोरर के नए संस्करणों में भी उपलब्ध हैं, और मुझे IE7 संगतता विचारों में IE7 पर स्विच करने में भी सक्षम करते हैं। यह अंतिम सुविधा बहुत मददगार है, क्योंकि इसके बिना, मुझे विरासत परीक्षण के लिए, या लिटमस जैसी अधिक बार भुगतान की जाने वाली सेवाओं का उपयोग करने के लिए कई आभासी मशीनों को स्थापित करने के लिए मजबूर किया जाएगा ।
कृपया, मुझे समझाएं कि <dl/>टैग किस बारे में है? इस टैग के लिए इच्छित उपयोग क्या था? व्यवहार में इसका उपयोग कैसे किया जाता है? आप इस विस्तारित उपयोग के बारे में क्या सोचते हैं?
यहां, आप चाहते हैं कि व्यक्ति यह व्याख्या करने में सक्षम हो कि <dl/>वह शब्दकोशों के लिए है, एक कुंजी को जोड़कर <dt/>, एक या कई मूल्यों के साथ <dd/>। जबकि इस टैग का प्राथमिक उपयोग विशुद्ध रूप से शब्दार्थ से संबंधित था, व्यवहार में इसे बड़े पैमाने पर तालिकाओं को बदलने के लिए उपयोग किया जाता था, एक अच्छा उदाहरण PHPBB3 है। यह एक अच्छी बात है जब टेबल पृष्ठ के प्रतिपादन को धीमा कर रहे हैं, लेकिन इसका सावधानी से उपयोग किया जाना चाहिए: डेटा का बेहतर वर्णन करने के लिए बहुत सारे मामलों में न केवल टेबल अभी भी उपयुक्त हैं, बल्कि अन्य साधन भी हो सकते हैं, जैसे कि सामान्य उपयोग किए बिना सामग्री का वर्णन करने के लिए सूचियाँ <dl/>।
निश्चित और द्रव लेआउट के बीच अंतर क्या है? प्रत्येक का भला - बुरा क्या है?
निश्चित लेआउट में तत्वों की चौड़ाई पूर्वनिर्धारित है। एक द्रव लेआउट के तत्व पृष्ठ की चौड़ाई पर निर्भर करते हैं।
निश्चित लेआउट पृष्ठ को डिज़ाइन करना आसान बनाता है, खासकर जब पूर्ण-चौड़ाई वाले ग्राफिक्स बहुत सारे हों। ग्राफिक्स के बिना भी, यह अभी भी आसान है, क्योंकि आप केवल एक सटीक मामले की देखभाल करते हैं। उदाहरण के लिए, Programmers.SE एक निश्चित लेआउट वेबसाइट होने के नाते, जो कॉलम प्रश्नों और उत्तरों को प्रदर्शित करता है, उसका आकार हमेशा समान होता है। यदि इस कॉलम के लिए एक द्रव लेआउट का उपयोग किया जाएगा, तो यह एक समस्या पैदा करेगा: छोटे स्क्रीन पर, पाठ अपठनीय होगा, क्योंकि लाइनें बहुत छोटी होंगी, जबकि बड़ी स्क्रीन पर, लाइनें बहुत बड़ी होंगी, इसलिए पाठ अपठनीय भी होगा।
निश्चित लेआउट के साथ समस्या यह है कि यह कुछ, सबसे अधिक उपयोग किए जाने वाले प्रस्तावों के लिए अच्छी तरह से काम करता है, लेकिन हर चीज के लिए कम या ज्यादा विफल रहता है। यह बहुत बड़े, विस्तृत मॉनिटरों और छोटे, मोबाइल उपकरणों पर इंटरनेट के बढ़ते उपयोग को अपनाने के बाद से विशेष रूप से महत्वपूर्ण हो जाता है।
द्रव का लेआउट इसके साथ मदद करता है, लेकिन ऐसी वेबसाइट के लिए डिजाइन करना अधिक कठिन है। बुरी तरह से प्रबंधित परियोजनाओं पर कुछ परिदृश्यों में, इससे HTML और CSS हैक हो सकते हैं, बड़े पृष्ठ, कम रख-रखाव और विकास के दौरान, उच्च लागत और छूट की समय सीमा तक।
एक द्रव लेआउट वाले पृष्ठ पर, आप उस स्थिति से कैसे बच सकते हैं जहां पठनीय रहने के लिए पाठ का एक स्तंभ बहुत बड़ा हो जाता है?
आप max-widthसंपत्ति का उपयोग करके पाठ के एक क्षेत्र की चौड़ाई को सीमित कर सकते हैं।
आप इस कोड के टुकड़े के बारे में क्या सोचते हैं <p color="Red" align="Center">Text here</p>:?
कोड के टुकड़े में HTML के अंदर प्रस्तुति तर्क को मिलाने का दोष है। प्रस्तुति तर्क को कई कारणों से CSS में रखा जाना चाहिए:
- यह चिंताओं और स्वच्छ कोड को अलग करने में मदद करता है, जिसका अर्थ है बाद में सस्ता रखरखाव,
- यह शैलियों को पृष्ठ से पृष्ठ पर पुन: प्रयोज्य बनाता है, जो (स्थिरता की चिंताओं के बाहर) यह सुनिश्चित करने में मदद करता है कि आप पूरी वेबसाइट पर एक ही शैली का उपयोग कर रहे हैं,
- यह बैंडविड्थ को कम करने में मदद करता है, क्योंकि CSS फाइलें कैश हो जाएंगी।
इस तरह के कुछ बुनियादी सवालों के बाद, आप कुछ और पेचीदा सवाल पूछ सकते हैं:
आप सीएसएस में रंग या फोंट की नकल करने से कैसे बचते हैं, जब उन रंगों या फोंट को कई तत्वों पर लागू किया जाता है जिन्हें एक एकल चयनकर्ता द्वारा लक्षित नहीं किया जा सकता है? क्या कमियां हैं?
आप ऐसा करते हैं कि Sass या LESS जैसे CSS प्रीप्रोसेसर का उपयोग करके। वे चर के भीतर रंग, फ़ॉन्ट और शैली के अन्य भागों को परिभाषित करने की अनुमति देते हैं जिन्हें आप बाद में अपनी शैलियों में उपयोग कर सकते हैं।
CSS प्रीप्रोसेसर की कमियां इस प्रकार हैं:
उन्हें कभी-कभी ब्राउज़र में अप-टू-डेट सीएसएस कोड के विकास और परिनियोजन वर्कफ़्लो को बदलने की आवश्यकता होती है:
वे केवल कुछ ही डेवलपर्स द्वारा जाने जाते हैं, जो एक नए व्यक्ति को बाद में परियोजना में शामिल होने या बनाए रखने के लिए कठिन बनाता है,
सास या लेस के लिए अच्छी और तेज़ दोनों आईडीई नहीं हैं, और सबसे लोकप्रिय आईडीई के अंदर एकीकरण बल्कि निराशाजनक है।
मुझे एक hrefछवि के मूल्य का एक उदाहरण दें जो CDN पर है, यह देखते हुए कि यह छवि एक वेबसाइट पर प्रदर्शित की जाती है जिसे HTTP और HTTPS दोनों के माध्यम से एक्सेस किया जा सकता है।
चूंकि HTTPS को HTTPS पर होने के लिए हर तथाकथित संसाधन की आवश्यकता होती है (अन्यथा, कई मामलों में उपयोगकर्ता को एक सुरक्षा चेतावनी प्रदर्शित की जाएगी), लिंक को निर्दिष्ट करना संभव नहीं है http://cdn.example.com/image.png। छवि को ठीक से लिंक करने के लिए, //cdn.example.com/image.pngउपयोग किया जाना चाहिए; तब ब्राउज़र प्रीप्रेंड करेगा http:या https:संदर्भ पर निर्भर करेगा ।
यह देखते हुए कि पृष्ठों के आकार और वेबसाइट पर अनुरोधों की संख्या को अनुकूलित नहीं किया जा सकता है और सामग्री को बदला नहीं जा सकता है और न ही AJAX को जोड़ा जा सकता है, आप उपयोगकर्ता को यह कैसे आभास देते हैं कि वेबसाइट तेज है? यह HTML परिप्रेक्ष्य से क्या शामिल है?
यदि HTTP 1.1 का उपयोग किया जाता है, तो पृष्ठ को ठुकरा दिया जा सकता है । इसका मतलब यह है कि पहले हिस्से तेजी से दिखाई देंगे, यह धारणा देते हुए कि वेबसाइट वास्तव में जितनी तेज है। HTTP 1.0 में chunked ट्रांसफर एन्कोडिंग असंभव है, जिसका अर्थ है कि इस मामले में कुछ भी नहीं करना है।
तत्वों को फिर से व्यवस्थित करने के लिए HTML के दृष्टिकोण से आवश्यक सामग्री परोसने में सक्षम होने के नाते, फ़ाइल के शीर्ष पर सबसे महत्वपूर्ण लोगों को डालना (जिसका अर्थ यह नहीं है कि उन्हें पृष्ठ के शीर्ष पर दिखाई देना होगा)। उदाहरण के लिए, एक ई-कॉमर्स वेबसाइट पर, जब उपयोगकर्ता उत्पाद का विवरण देखना चाहता है, तो पहले चंक <head/>में उत्पाद और उत्पाद विवरण शामिल हो सकते हैं । अगले चंक में वेबसाइट के लोगो, मुख्य मेनू, कॉपीराइट आदि जैसे प्राथमिक तत्व शामिल हो सकते हैं। अंत में, अंतिम चंक में "खरीदे गए लोग भी हो सकते हैं" खंड, उत्पाद की टिप्पणियाँ और रेटिंग शामिल हैं, "फेसबुक पर साझा करें", आदि।
अंत में, आप उम्मीदवार को वास्तविक दुनिया के परिदृश्य पर काम करने के लिए कह सकते हैं। यह कुछ भी हो सकता है, जैसे नीचे के जटिल परिदृश्यों में जहां व्यक्ति को सीएसएस स्प्राइट्स या अन्य उन्नत अनुकूलन तकनीकों से निपटना पड़ता है, ब्राउज़र असंगतियों के साथ, आदि।
कृपया, आप दो क्षेत्रों के साथ एक एक्सएचटीएमएल पेज बना सकते हैं: एक सूची के साथ बायां एक, और दाएं वाला। दो ज़ोन एक ऊर्ध्वाधर रेखा द्वारा अलग किए जाते हैं, जो पृष्ठ के बहुत ऊपर से बहुत नीचे तक फैली हुई है। सूची और आकार में भिन्न पाठ, आप यह अनुमान नहीं लगा सकते कि सबसे बड़ी ऊंचाई किसकी होगी। आप <table/>एस का उपयोग नहीं कर सकते ।
वास्तव में, यह बहुत आसान है, लेकिन यह दर्शाता है कि व्यक्ति के पास ऊंचाइयों के बारे में सोचने के लिए पलटा है। एक अनुभवहीन उम्मीदवार float:leftक्षेत्र और क्षेत्र बनाएगा border-left:solid 1px #ccc;, लेकिन सीमा को बाएं क्षेत्र में जोड़ना और इसे विस्तारित करना भूल जाएगा ताकि दो सीमाएं एक ही स्थान पर होंगी।
