मैं HTML5 के साथ कैसे आरंभ करूं? [बन्द है]

42

HTML5 सीखने के लिए अनुशंसित वर्कफ़्लो क्या है? मुझे कौन से उपकरण स्थापित करने चाहिए? क्या एसडीके? कहा से शुरुवात करे? कैसे करें टेस्ट? डिबग कैसे करें? मैं क्या पढ़ता हूँ?

मैं समझता हूं कि जिसे अक्सर "एचटीएमएल 5 विकास" के रूप में लेबल किया जाता है, वास्तव में एचटीएमएल, सीएसएस, जेएस और अधिक का एक मिश्रण है, हालांकि मैं यह नहीं मानता कि बड़े प्रोजेक्ट नोटपैड में विकसित किए जाते हैं। यही कारण है कि मैं आपको अपने वर्कफ़्लो के बारे में अपने सुझाव और ट्रिक्स प्रकट करने के लिए कह रहा हूं।

— daniel.sedlacek
स्रोत

मैं निश्चित रूप से diveintohtml5 में देखने का सुझाव दूंगा, लेकिन html5rocks htm5rocks को भी देखें और यह बहुत से अज्ञात हो सकता है, लेकिन फेसबुक बहुत सारे HTML5 को आगे बढ़ा रहा है: उनके html5 पेज की जांच यहां करें facebook.com/html5

— VJth

चुस्त काम करो। <html>Hi</html>आपको प्रारंभ किया जाता है क्योंकि आपको DOCTYPE की आवश्यकता नहीं है। दोहराएँ।

— माइकल डुरंट

42

अगर मुझे अभी से एक नया एचटीएमएल 5 प्रोजेक्ट शुरू करना है, तो मैं संभवत: ऐसा कुछ करूंगा:

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

कोड का इतिहास और उपयोग देखने के लिए HTML5 पर गोता लगाएँ ।

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

HTML5 और CSS3 की पुस्तक को "A Book Apart" से परिभाषित करें (CSS3 इस महीने के अंत में बाहर आता है)

और अंत में - इस पूरी बात की जाँच करने और जानने के लिए:

ओपेरा डेवलपर नेटवर्क - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

कैनवास धोखा शीट - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

एचटीएमएल 5 कैनवस http://thinkvitamin.com/code/how-to-draw-with-html-5-canus/ के साथ कैसे आकर्षित करें

— ग्रेग बी
स्रोत

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

निश्चित गाइड के बाद, आपको क्रॉकफोर्ड द्वारा जावास्क्रिप्ट: द गुड पार्ट्स को पढ़ना चाहिए ।

— kzh

उल्लिखित HTML5 पुस्तक को इसके होमपेज पर मुफ्त में पढ़ा जा सकता है: html5forwebdesigners.com

— user16764

52

HTML5 एक एकल एकीकृत चीज नहीं है। यह HTML के लिए एक्सटेंशन का एक संग्रह है, जिनमें से कुछ व्यापक रूप से लागू किए गए हैं और सुरक्षित रूप से उपयोग किए जा सकते हैं, जिनमें से कुछ अभी तक कोई भी लागू नहीं करता है, और पूरे बीच में। यदि आप HTML5 को एक सुसंगत एकल विकास मंच के रूप में मानने का प्रयास करते हैं और 'यह सब सीखें' तो आपके पास वास्तव में कठिन समय होगा।

इसके बजाय आपको जो सीखने की जरूरत है वह है संपूर्ण वेब: बेसिक HTML, CSS, JavaScript, Core DOM, HTML DOM, बेसिक ब्राउजर मॉडल। तब आप नई वेब की सुविधाओं को जोड़ सकते हैं जहां आपको उनकी आवश्यकता है, और ब्राउज़र समर्थन की अनुमति देता है: HTML5 एक्सटेंशन, CSS3 गुण, कैनवास ड्राइंग, वेबसोकेट, अन्य DOM और BOM एक्सटेंशन HTML5 कार्य से दूर हो जाते हैं ...

वेब का फीचर सेट लगातार विकसित हो रहा है और संदर्भ का एक भी बिंदु नहीं है। W3Schools (जो कि आकस्मिक रूप से W3C से कोई लेना- देना नहीं है) कोशिश करता है, लेकिन यह त्रुटियों से भरा है। यह मत कहो कि यह सुसमाचार के रूप में क्या कहता है।

आपको निश्चित HTML4 , CSS2 को संदर्भित करने की आवश्यकता हो सकती है । DOM कोर और DOM HTML स्पेक्स सुनिश्चित करने के लिए। आप शायद MDC के DOM संदर्भ और MSDN के DOM संदर्भ को भी देखना चाहते हैं , जो Firefox और IE का समर्थन करता है। एचटीएमएल 5 कल्पना भी अधिक अप-टू-डेट डोम सामान का एक बहुत है, साथ ही नए HTML एक्सटेंशन हैं, लेकिन यह मानकों दस्तावेजों के मानकों के द्वारा भी उपयोग करने के लिए एक लंबी और बोझल दस्तावेज है, काफी मुश्किल। हालांकि लगभग अभेद्य ECMAScript युक्ति जितनी बुरी नहीं है । (शुक्र है कि आप शायद पहले से ही बहुत से परिचित होंगे यदि आप एक्शनस्क्रिप्ट के साथ काम करने के आदी हैं।)

HTML / CSS / JS को विकसित करने के लिए आपको SDK या IDE की आवश्यकता नहीं है। यदि आप चाहें तो आप एक आईडीई का उपयोग कर सकते हैं, लेकिन मैं अपने पसंदीदा पाठ संपादक में सब कुछ करके बहुत खुश हूं। चिंता करने के लिए कोई निर्माण / संकलन कदम नहीं हैं, आप बस अपनी फ़ाइल को बचाएं और पुनः लोड करें, काम करें। अधिकांश आधुनिक वेब ब्राउज़रों में एक डिबगर और अन्य विकास उपकरण होते हैं जो या तो (जैसे IE8) में निर्मित होते हैं या एक्सटेंशन (जैसे फ़ायरवॉल ) के रूप में आसानी से उपलब्ध होते हैं ।

— bobince
स्रोत

1

मैं समझता हूं कि जिसे अक्सर "एचटीएमएल 5 विकास" के रूप में लेबल किया जाता है, वास्तव में एचटीएमएल, सीएसएस, जेएस और अधिक का एक मिश्रण है ... हालांकि मुझे विश्वास नहीं है कि नोटपैड में बड़ी परियोजनाएं विकसित / विकसित की जा सकती हैं। यही कारण है कि मैं आपको अपने वर्कफ़्लो के बारे में अपने सुझाव और ट्रिक्स प्रकट करने के लिए कह रहा हूं।

2

+1 "जैसा कि हम सभी जानते हैं कि HTML5 को ब्लेड रनर में दर्शाई गई घटनाओं के तीन साल बाद 2022 में अंतिम रूप दिया जाएगा।" - small.cc/standards-bloat-and-html5

8

नहीं, बड़ी परियोजनाओं को नोटपैड में विकसित नहीं किया जाएगा। यह पागल हो जाएगा। नोटपैड एक भयानक पाठ संपादक है। उन्हें नोटपैड ++ में विकसित किया जाएगा। :-)

— १४:१४ पर बॉब

11

@ डैनियल: कम से कम मुझे लगता है कि यह एक उपयोगी उत्तर है, इससे कोई फर्क नहीं पड़ता कि यह आपके लिए उपयोगी है। वह (अच्छे) टेक्स्ट एडिटर का उपयोग करने की सलाह देता है; मुझे नोटपैड ++ भी पसंद है, हालांकि मैं आमतौर पर एमएसीएस (कोई संपादक युद्ध का इरादा नहीं करता) का उपयोग करता हूं। वह आमतौर पर समर्थित सुविधाओं से चिपके रहने और आपके पृष्ठ के शीर्ष पर HTML 5 / CSS 3 (और कं) विशिष्ट बोलचाल बनाने (उस बिंदु पर पहले से ही काम कर रहे) वेब पेज बनाने के लिए कहता है। HTML 5 एक पूरी नई चीज नहीं है; यदि आप एक कार ड्राइव कर सकते हैं, तो आप हाइब्रिड इंजन, एयर-कंडीशनिंग और इसके साथ सभी नई सुविधाओं के साथ एक चमकदार नई कार चला सकते हैं; हालाँकि, यह अभी भी एक कार है और आप इसे अपने तरीके से चलाने के लिए उपयोग कर सकते हैं।

5

@ डैनियल: यह उत्तर यहां सबसे अधिक उपयोगी है, इसमें आपके लिए भी शामिल है क्योंकि इसमें वह सलाह शामिल है जिसकी आपको आवश्यकता है, और कोई भी मुझे यह नहीं बता रहा है कि यह मुझे वोट देने से रोकने वाला नहीं है।

9

मैं अत्यधिक वेबस्टॉर्म की सिफारिश करता हूं , जेटब्रेन (या उनके किसी भी IntelliJ आधारित उत्पादों की तरह, जैसे PHPStorm, RubyMine, PyCharm के रूप में वे सभी HTML का समर्थन करते हैं)। आपको सीएसएस, HTML ऑटो पूर्णता और लाइव (जबकि आप टाइप करते हैं) शुद्धता के लिए जाँच करते हैं। जावास्क्रिप्ट के लिए समर्थन को फिर से भरना (कुछ मैंने कहीं और नहीं देखा है), और यहां तक कि आईडीए में जावास्क्रिप्ट को डीबग करने की क्षमता (यदि फायरबग या क्रोम डेवलपर उपकरण आपके लिए अभाव हैं)। इसमें प्रोजेक्ट सपोर्ट के साथ-साथ SVN, Git, Perforce और CVS सपोर्ट है। और अन्य सुविधाओं की एक टन, अत्यधिक की सिफारिश की ...

— क्रिश एरिकसन
स्रोत

+1, जो रोमांचक लगता है। मुझे लगता है कि मैं उनके 45 दिनों के नि: शुल्क परीक्षण की कोशिश करूंगा।

मैंने Java डेवलपमेंट के लिए IntelliJ IDEA का उपयोग किया है और जो भी सुविधाएं प्रदान करता है उसके संदर्भ में इसे कुछ भी नहीं छूता है। Jetbrains भी Visual Studio के लिए ReSharper प्लगइन बनाते हैं। अगर मैं एक शुद्ध वेब-आधारित आईडीई की तलाश में था, तो मैं निश्चित रूप से वेबस्टॉर्म को आज़माता हूं। अकेले refactoring इसके लायक है।

8

कई अमूल्य उपकरण

FireBug - फ़ायरफ़ॉक्स के लिए डेवलपर प्लगइन। JS, HTML, स्टाइल्स को डीबग करने की अनुमति देता है।
IE (6,7) के पुराने संस्करणों के लिए IE डेवलपर टूलबार। हालांकि HTML5 वहाँ ज्यादा नहीं है। नए IE में F12 टूल है।
Chrome में इसके डेवलपर टूल हैं

वे उपकरण ज्यादातर जावास्क्रिप्ट डिबगिंग के लिए हैं और तत्वों की स्थिति और लागू सीएसएस शैलियों के बारे में जानने के लिए।

धन्यवाद, अगर मुझे यह सही ब्राउज़र संगतता हमेशा एक समस्या है।

हां, यह आधुनिक ब्राउज़रों के साथ बेहतर हो जाता है। IE 6-7 और 8 एक हिस्सा इस संबंध में बहुत खराब हैं।

Internet Explorer के विभिन्न संस्करणों के परीक्षण के लिए, या तो IETester ( my-debugbar.com/wiki/IETester ) या Microsoft द्वारा प्रदान की जाने वाली आभासी मशीनों का उपयोग करें ( go.microsoft.com/fwlink/?LinkId=70868 )

6

यदि आप एक आईडीई सिफारिश की तलाश कर रहे हैं, तो ग्रहण बहुत अच्छा है। यदि आप जावास्क्रिप्ट टूल खोज रहे हैं, तो फायरबग डीबगिंग के लिए बहुत अच्छा है।

हालाँकि, आपको वास्तव में किसी भी "टूल" की आवश्यकता नहीं है। मुझे लगता है कि नोटपैड में "बड़ी परियोजनाओं को विकसित नहीं किया जा सकता है / विकसित नहीं किया जा सकता है", यह काफी सरल है। मैं अपने सभी HTML / CSS / Javascript को लिखने के लिए नोटपैड ++ का उपयोग करता हूं और मुझे लगता है कि यह बहुत सामान्य दृष्टिकोण है - यहां तक कि वेब डिजाइनर के लिए भी। नोटपैड ++ में एचटीएमएल, सीएसएस, और जावास्क्रिप्ट के लिए सिंटैक्स हाइलाइटिंग है, साथ ही साथ ऑटो पूरा करना। यदि आप ऐसा सॉफ़्टवेयर चाहते हैं जो इससे अधिक प्रदान करता है, तो कृपया विशिष्ट होना चाहिए जिसमें आपके लिए सुविधाएँ महत्वपूर्ण हैं। (BTW, यदि आप एक मैक उपयोगकर्ता हैं, तो BBEdit का प्रयास करें)।

बड़ी साइटों को अक्सर Django या रूबी जैसे पटरियों पर रूपरेखाओं के साथ लिखा जाता है, लेकिन इसका वास्तव में HTML5 का उपयोग करने से कोई लेना-देना नहीं है।

— जेफ
स्रोत

दिलचस्प ... जेएस विकास के लिए आप क्या ग्रहण करेंगे?

कभी भी एक का उपयोग नहीं किया गया, लेकिन यह लिंक उपयोगी हो सकता है। अप्टाना एक स्टैंडअलोन प्रोग्राम के रूप में भी उपलब्ध है, मेरा मानना है (ग्रहण का एक विकल्प)। बहुत सारे लोगों ने इसकी सिफारिश की है, लेकिन मैंने वास्तव में कभी इसकी कोशिश नहीं की है। कुछ देखने लायक हो सकता है। stackoverflow.com/questions/613988/…

— जेफ़

बस यह ध्यान में रखते हुए कि नोटपैड ++ से बहुत अलग है, मैं नोटपैड में एक वेबसाइट ( कोई भी वेबसाइट) विकसित नहीं करूंगा ।

सहमति, मैं टिप्पणी में ले लिया मतलब "पाठ संपादक" नहीं सख्ती से "एमएस नोटपैड", लेकिन यदि यह मामला था, तो आप पूरी तरह से ठीक कह रहे हैं

— जेफ

5

मेरा मानना है कि एडोब (फ्लैश के निर्माता) वास्तव में फ्लैश को एचटीएमएल 5 रूपांतरण उपकरण को जारी करने की प्रक्रिया में हैं, जो देखने के दौरान आपके लायक हो सकता है।

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

प्रभावी रूप से, फ्लैश HTML5 को विकसित करने के लिए एक उपकरण बन जाता है।

और इस सप्ताह के रूप में, माइक्रोसॉफ्ट ने घोषणा की है कि वे सिल्वरलाइट के साथ एक समान दिशा में जा रहे हैं, इसलिए ऐसा लगता है कि सब कुछ अब एचटीएमएल 5 जा रहा है।

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

— Spudley
स्रोत

7

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

1

@daniel -agreed कि रूपांतरण उपकरण आमतौर पर उतने अच्छे नहीं होते हैं, और मैंने उतना ही कहा। लेकिन यह आपके लिए एक अच्छा शुरुआती बिंदु हो सकता है यदि आप अपने मौजूदा फ्लैश को बदलना चाहते हैं। यहां तक कि अगर आप तब भी जाते हैं और मैन्युअल रूप से परिणामी HTML कोड को फिर से काम करते हैं, तो कम से कम आपके पास काम करने के लिए कुछ होगा।

— स्पडली

4

नाइटपिक: एडोब ने फ्लैश (मैक्रोमेडिया पर लिया गया) खरीदा है, और इसे नहीं बनाया है।

— कोर्नेल

4

मैं आपके जावास्क्रिप्ट कोड के लिए एक बिल्ड सिस्टम स्थापित करने की अत्यधिक अनुशंसा करूंगा, और यह JSLint के खिलाफ हर बिल्ड की जांच करूंगा । मैंने पाया है कि यह बहुत सी त्रुटियों को जल्दी ठीक करता है और अच्छी कोडिंग को बढ़ावा देता है (यदि यह बहुत सख्त है तो विकल्पों के साथ खेलें)। एक अच्छे उदाहरण के लिए GitHub पर jQuery की निर्माण प्रणाली को देखें।

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

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

— एडम हीथ
स्रोत

2

मुझे विश्वास नहीं है कि बड़ी परियोजनाएँ नोटपैड में विकसित / विकसित की जा सकती हैं

आप वहां गलत होंगे। मैं एक लंबे समय से नोटपैड उपयोगकर्ता हूं, और मुझे लगता है कि यह सबसे अच्छा तरीका है। डीबगिंग के लिए, मैं IE के डेवलपर टूल, फ़ायरफ़ॉक्स के फ़ायरबग और क्रोम के इंस्पेक्टर का उपयोग करता हूं।

जहाँ तक HTML5 जाता है, यह मूल रूप से कुछ अतिरिक्त खिलौनों के साथ नियमित रूप से HTML है। इसके अलावा, आपको HTML5 दस्तावेज़ घोषित करने से कुछ भी नहीं रोक रहा है, फिर केवल उन चीजों का उपयोग करना जो HTML के पुराने संस्करणों में हैं।

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

— संतोष कुमार
स्रोत

बड़ा परिभाषित करें। नोटपैड में सिंटैक्स हाइलाइटिंग भी नहीं है, और रखरखाव नोटपैड के साथ एक मुद्दा हो सकता है ... मैं कम से कम नोटपैड ++ के लिए जाना चाहूंगा ... यहां तक कि वीआईएम भी! :)

मैं अब Notepad ++ का उपयोग करता हूं , लेकिन लंबे समय तक मैं सिर्फ सादे Notepad का उपयोग करता हूं। और "बड़ा" से मेरा मतलब है "मेरे रहने की लागत का भुगतान करने के लिए पर्याप्त धन अर्जित करना और कुछ अतिरिक्त करना"।