2011-04-19 19 views
54

हे सब — HTML5 Boilerplate और HTML5 Reset दो एचटीएमएल, सीएसएस, और जावास्क्रिप्ट टेम्पलेट्स हैं जिनमें कई आधुनिक सर्वोत्तम प्रथाएं अंतर्निहित हैं। अपने लक्ष्यों को मोटे तौर पर ही कर रहे हैं:एचटीएमएल 5 बॉयलरप्लेट बनाम एचटीएमएल 5 रीसेट

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

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

उत्तर

47

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

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

प्रतिक्रिया-समय और पेज स्पीड पार्ट्स जो HTML5Boilerplate में अधिक से अधिक महत्वपूर्ण होते हैं क्योंकि अधिक उपयोगकर्ता मोबाइल प्लेटफार्मों पर खुद को पाते हैं, और Google page response times have on page rank प्रभाव को बढ़ाता है। पेज प्रतिक्रिया समय में थोड़ी सी वृद्धि दिखाने वाले बहुत से कागजात हैं, इस पर आपकी साइट used and perceived (especially in an eCommerce setting) पर एक मापनीय नकारात्मक प्रभाव है ... अक्सर 100ms धीमी पृष्ठ को प्रतिशत कम चीज़ें मिलती हैं)।

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

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

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

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

+1

क्या आप पेज प्रतिक्रिया समय बनाम पेज रैंक पर संदर्भित कागजात के लिंक प्रदान कर सकते हैं? –

+0

@s_hewitt - जैसा कि आपने अनुरोध किया है, उद्धरण जोड़े गए हैं। – cdeszaq

+0

अच्छा जवाब, cdeszaq। – Francisc

0

मैं ऐसे माहौल में काम करता हूं जहां पिछले डेवलपर्स ने JQuery और Prototype दोनों का उपयोग करने में कंपनी को घुमाया ... और यह एक गड़बड़ है। न केवल हमें संगतता मोड से बाहर काम करना है, बल्कि केवल अतिरिक्त ओवरहेड के बारे में सोचें जो इसका कारण बनता है। डिबगिंग करते समय, प्रोटोटाइप "हाइजैक" फायरबग में संदेशों को डिबग करता है, जिससे और भी काम होता है। और मज़बूत हिस्सा यह है कि मैं महीनों के लिए इस गड़बड़ी को पूर्ववत कर रहा हूं और बस इसके साथ होने के करीब आना शुरू कर रहा हूं .... और जब मैं प्रोटोटाइप पर प्लग खींचने वाला हूं तो मुझे हमेशा एक और लगता है अनुभाग जो इस पर निर्भर करता है ...

इस कारण से मैं हर समय ऐसे उद्देश्यों के संयोजन के खिलाफ बहस करता हूं जिनके समान उद्देश्य हैं। उदाहरण के लिए, कोई फर्क नहीं पड़ता कि आप कितनी अच्छी सोच सकते हैं कि YUI Grids है, अगर आप पूरे YUI Framework लोड करते हैं तो आप Jquery, Moo, या प्रोटोटाइप नहीं कर रहे हैं। आप बस अपने आप को बेकार कर रहे होंगे। यह लोड समय को मारता है (जो wrecks the user experience) और केवल डेवलपर्स सिरदर्द और अनावश्यक काम देता है।

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

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

+1

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

+2

मेरे आखिरी गग में मुझे jQuery और दोजो दोनों का उपयोग करके एक प्रोजेक्ट का सामना करना पड़ा। मैंने इसे देखा कि यह सिर्फ एजेक्स को छूने वाला पहला समय है। लेकिन फिर हमने एक बहुत महंगा परामर्श फर्म को काम पर रखा जिसने jQuery और Ajax.net दोनों का उपयोग करके कोड वापस भेजा। और फिर मैंने छोड़ दिया और छोड़ दिया। –

+1

ढांचे की बात आती है तो मुझे अच्छी सलाह है, लेकिन मुझे यह कल्पना करना मुश्किल लगता है कि यह इन दो बार बचत उपकरणों पर कैसे लागू होता है जो ढांचे नहीं हैं। – JohnC

0

आप उपयोग कर सकते हैं या तो एक ...

@murtaugh की तरह कहा (http://5by5.tv/bigwebshow/45) आप कुछ भी जानने के लिए जब यू पहले रीसेट के साथ शुरू की जरूरत नहीं है। मेरे अनुभव में, आर & डी विभाग में काम करते समय, जब आपको डेमो या त्वरित पुनरावृत्तियों को करने की आवश्यकता होती है तो आप रीसेट (या बॉयलर अगर आप इसे पहले से जानते हैं) का उपयोग कर सकते हैं। जब मुझे तैनाती के लिए उत्पाद बनाने की आवश्यकता होती है तो मैं बॉयलर की ओर जाता हूं क्योंकि इसमें अधिक सामान होता है। मेरे लिए काम करता है लेकिन अब क्योंकि मैं दोनों जानता हूं कि मैं आसानी से किसी एक का उपयोग कर सकता हूं।

0

मैं वास्तव में पारंपरिक रीसेट.cएसएस का उपयोग करने के बारे में कहना चाहता हूं ... सबसे अच्छा है ... मुझे अपने मोबाइल ऐप्स में संगतता के साथ कोई समस्या नहीं है। हालांकि, मैं jQuery मोबाइल ढांचे का उपयोग कर इन ऐप्स को विकसित कर रहा हूं।

तो मुझे लगता है कि यह वास्तव में सशर्त है कि आप किस प्रकार के टूल्स का उपयोग कर रहे हैं। फ़ोनगैप में सभी ओएस में मेरे कोड को संकलित करने में कोई समस्या नहीं प्रतीत होती है। और अनुकरणकर्ताओं में मेरा स्रोत कोड देखना पूरी तरह से ठीक दिखता है ...

तो मुझे वास्तव में बॉयलरप्लेट का बिंदु नहीं दिखाई देता है जब तक कि आप पॉलीफिल प्राप्त करने की कोशिश नहीं कर रहे हैं।

संबंधित मुद्दे