मार्कअप के ज़ेन मास्टर बनना सीखें

मार्कअप या मार्किंग, मार्कअप या लेबलिंग भाषाओं को संदर्भित करता है जैसे वे हैं HTML और CSS, और हम सभी जानते हैं कि वेब टेम्पलेट बनाने के लिए टैग को एक-एक करके खोलना और बंद करना कितना दर्दनाक है...

निःसंदेह इसके लिए समाधान मौजूद हैं, उनमें से एक आईडीई की तरह स्वत: पूर्णता है Dreamweaver mierda ब्लूग्रिफ़ॉन यदि आप प्लगइन्स नहीं खरीदते हैं तो यह कष्टप्रद है o कोमोडो संपादित करें बहुत भारी... मुद्दा यह है कि आईडीई या कोड संपादक जो विकल्पों से भरे होते हैं, अक्सर अकल्पनीय तरीकों से काम में बाधा डालते हैं; ऐसा ही एक मामला है Dreamweaver यह आपको कचरा कोड से भर देता है जिसे आप ग्राफ़िक रूप से उत्पन्न करते हैं और यह भारी, महंगा और बदसूरत होता है। ब्लूग्रिफ़ॉन यह अधिकतर कष्टप्रद है क्योंकि यह मुफ़्त है, लेकिन आधे विकल्प भुगतान करने वाले उपयोगकर्ताओं के लिए आरक्षित हैं... यह मज़ेदार नहीं है। और अंततः हमारे पास है कोमोडो-संपादन, जो काफी अच्छा, शक्तिशाली और विकल्पों से भरपूर है लेकिन यह भारी है (100 एमबी निष्क्रिय में) और इसे कॉन्फ़िगर करना कष्टप्रद है।

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

लेकिन... आखिर वह है क्या? ज़ेन कोडिंग?

सरल, यह एक विशेष प्लगइन है जो HTML और CSS के लिए ड्रॉपडाउन एब्स्ट्रैक्शन लेयर के रूप में कार्य करता है जावास्क्रिप्ट और कई सबसे प्रसिद्ध प्रकाशकों के लिए उपलब्ध है (नोटपैड++, कोमोडो-एडिट, गेडिट, केट, ब्लूफिश, गेनी, ड्रीमवीवर, आदि).

उह हुह, मुझे अभी भी समझ नहीं आया कि आप क्या कह रहे हैं...

तो मैं आपको एक सरल उदाहरण के साथ दिखाता हूँ; ड्रॉपडाउन अमूर्त चीज़ याद है? ठीक है, इसे संक्षिप्त करने के लिए बदलें, कल्पना करें कि आप HTML/CSS कोड की एक पंक्ति को एक पंक्ति में संक्षिप्त कर सकते हैं और इसे पर्दे की तरह खोल सकते हैं या इसे फिर से ढहा सकते हैं... देखना चाहते हैं कि कैसे? आपको बस यह सुनिश्चित करना होगा कि इसे काम करने के लिए आपके पास दो चीजें हैं:

लो ज़ेन कोडिंग आपके संपादक में स्थापित.
इसका उपयोग करने के लिए कमांड और सिंटैक्स को जानें।

ठीक है, कोड पर उंगलियाँ:

html>head+body

कोड की वह पंक्ति देखें? खैर यह HTML के लिए सिंटैक्स है, यह सरल है:

सबसे पहले आप टैग का नाम (एचटीएमएल) डालें, फिर आप बताएं कि उस टैग के अंदर कौन से टैग होंगे (>) और फिर उस टैग के अंदर जाने वाले टैग का नाम बताएं (हेड और बॉडी)। '+' चिह्न इंगित करता है कि सिर और शरीर दो अलग-अलग टैग हैं और इनमें से कोई भी दूसरे में समाहित नहीं है, यह कहने जैसा है "एक साथ लेकिन हाथापाई नहीं«... तो, आइए देखें कि जादुई कुंजियाँ दबाने पर कोड की वह पंक्ति हमारे लिए क्या उत्पन्न करती है (मेरे मामले में CTRL+E):

बिल्कुल, कोड की 4 पंक्तियाँ एक में बन जाती हैं, जो सही कुंजी संयोजन दबाने पर जादुई रूप से प्रकट होती हैं... और भी बहुत कुछ हो सकती हैं; उदाहरण के लिए:

html>head+body>ul#lista_ordenada>li.listilla*5

समान सिंटैक्स, लेकिन हमने कुछ और जोड़ा है... यदि आप सीएसएस के बारे में कुछ जानते हैं तो आपको एहसास होगा कि हम एक आईडी, कक्षाएं और कुछ ऐसा जोड़ रहे हैं जो आप निश्चित रूप से नहीं जानते थे; गुणक...यह सब क्या है!? अरे तुम मुझे भ्रमित कर रहे हो!

शांत हो जाइए, यह काफी सरल है, ऊपर हमने आपको शरीर के अंदर एक "उल" टैग दर्ज करने के लिए कहा था, इसमें कुछ भी अजीब नहीं है, मैंने इसे ऊपर समझाया, फिर, हमने एक आईडी सौंपी, यदि आप सीएसएस जानते हैं तो आप समझ जाएंगे कि इनकी पहचान की गई है '#' चिह्न के साथ, और उस अव्यवस्थित सूची (उल) के अंदर हम क्लास (वर्ग) लिस्टिला के साथ पांच लेबल जोड़ते हैं, मैं इसे संक्षेप में समझाऊंगा। वास्तव में यह बहुत सरल है, '#' दर्शाता है कि यह एक आईडी है, फिर 'li.listilla' कहता है कि हमें क्लास लिस्टिला के साथ एक लेबल «li' बनाना है «li class=listilla» और फिर, हम कहते हैं «उसे अंतिम पाँच बार दोहराएँ«. जो हमें परिणाम के रूप में देता है:

एक पंक्ति में और बहुत कम समय में कोड की बारह पंक्तियाँ लिखी गईं 😉

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

मुझे यह बताना होगा कि यह एक अरब हजार लाइनें बनाने के लिए काम नहीं करता है, अरे नहीं, इसकी एक सीमा है और इसका उपयोग करने का एक तरीका है। उदाहरण के लिए यदि हम ऐसा कुछ करना चाहते हैं:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

सिद्धांत रूप में, हमें यह क्या देना चाहिए (अंतिम छवि में हाइलाइट की गई पंक्ति को देखें):

यह हमें यह देगा:

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

html>head>body>ul#lista_ordenada>li.listilla*5

हेड टैग के अंदर y का विस्तार करें:

title+meta

जो आपको सही कोड देगा:

हालांकि ज़ेन कोडिंग आपको दिखाने के लिए और भी बहुत सी चीज़ें हैं और शायद सिर के अंदर एक और कमांड लाइन लिखना सबसे अच्छा नहीं है, इसलिए हम एक और कमांड का उपयोग करते हैं, ''संक्षिप्तीकरण के साथ विस्तार करें" मेरे मामले में ctrl + alt + e जिससे एक छोटा बार खुलेगा जहां हम ज़ेन कोड लिख सकते हैं और देख सकते हैं कि यह वास्तविक समय में कैसा दिखता है। सावधान रहें, मैं इसके साथ सबकुछ लिखने की सलाह नहीं देता, बल्कि पहले से बनी संरचनाओं के भीतर लिखने की सलाह देता हूं, यानी पहले बड़ी संरचनाएं बनाएं और फिर इस विकल्प के साथ उनके भीतर विवरण देते रहें।

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

और रुचि रखने वालों के लिए, यहां इसकी आधिकारिक चीटशीट है ज़ेन कोडिंग, आप इसे प्रारूप में देख सकते हैं ODF o पीडीएफ सामान्य से यहाँ


20 टिप्पणियाँ, तुम्हारा छोड़ दो

अपनी टिप्पणी दर्ज करें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *

*

*

  1. डेटा के लिए जिम्मेदार: मिगुएल elngel Gatón
  2. डेटा का उद्देश्य: नियंत्रण स्पैम, टिप्पणी प्रबंधन।
  3. वैधता: आपकी सहमति
  4. डेटा का संचार: डेटा को कानूनी बाध्यता को छोड़कर तीसरे पक्ष को संचार नहीं किया जाएगा।
  5. डेटा संग्रहण: ऑकेंटस नेटवर्क्स (EU) द्वारा होस्ट किया गया डेटाबेस
  6. अधिकार: किसी भी समय आप अपनी जानकारी को सीमित, पुनर्प्राप्त और हटा सकते हैं।

  1.   मफ़ून कहा

    मुझे यह अत्यंत दिलचस्प लगता है!

    मैं इसे ज़रूर आज़माऊंगा!

  2.   मफ़ून कहा

    एक प्रश्न, क्या "सिर>शरीर" से सिर के अंदर शरीर का निर्माण नहीं होना चाहिए? हम जो चाहते हैं उसे पाने के लिए क्या हमें "सिर+शरीर" नहीं लगाना चाहिए?

    अगर मैं भ्रमित हूं तो मुझे खेद है!

    धन्यवाद

    1.    नैनो कहा

      हाँ, किसी भी टैग नाम के पहले ">" लगा हो तो यह संकेत मिलता है कि वह पहले नामित टैग के अंदर जाता है; ऐसे मामले में, जैसा कि आप कहते हैं, सिर>शरीर इंगित करता है कि शरीर सिर के अंदर जाएगा, जो हम जानते हैं कि गलत है।

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

  3.   आसुर्तो कहा


    तथास्तु

  4.   103 कहा

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

    मुझे यह बहुत पसंद आया: html:xt और उन लोगों के लिए जो आगे बढ़ना चाहते हैं html:5

  5.   ऑरोज़्ज़क्स कहा

    हम्म, ठीक है, मैंने वास्तव में कभी भी ड्रीमविवर जैसे प्रोग्राम का उपयोग नहीं किया है, मुझे इस ज़ेन कोडिंग चीज़ को आज़माना होगा...

    पुनश्च: वह वॉलपेपर जो आपके पास है... क्या संयोग से यह वही है जो मैंने किया था?

    1.    नैनो कहा

      Sí pero el de DesdeLinux

  6.   ईज़ेल कहा

    बहुत अच्छा, मुझे हमेशा हल्के टेक्स्ट संपादक पसंद रहे हैं, जो मैं अब उपयोग करता हूं Geany और यह देखकर कि यह जादुई चायदानी के लिए समर्थित है, निश्चित रूप से मुझे इसे आज़माने के लिए प्रोत्साहित करता है

  7.   ल्यूपिन III कहा

    खैर, प्रोग्रामिंग मेरे बस की बात नहीं है, जिस चीज़ ने मुझे सबसे ज्यादा परेशान किया है वह है डेस्कटॉप, आप क्या उपयोग करते हैं, गनोम 3 या यूनिटी, यह कौन सी थीम है? यह बहुत बढ़िया है, देखते हैं मैं अपना भी ऐसा ही छोड़ता हूं या नहीं
    यदि आपको मुझे उत्तर देने में कोई आपत्ति न हो तो मैं बहुत आभारी रहूँगा 😀
    पुनश्च: हाँ, मैं विंडोज़ से हूँ, विश्वविद्यालय के पास यही xD है

    1.    नैनो कहा

      एकता, प्राथमिक विषय के साथ और पैनल की अस्पष्टता को कम कर दिया।

      1.    निओमितो कहा

        मैं भी कार्यस्थल पर विंडोज़ का उपयोग कर रहा हूं, मैं आपको बधाई देता हूं, आपका डेस्कटॉप बहुत अच्छा है।

  8.   जसजएंद्रे कहा

    लेख बहुत दिलचस्प है... मुझे इसमें बहुत अच्छा उपयोग दिख रहा है। वैसे, Gedit के लिए ज़ेन कोडिंग प्लगइन की स्थापना से मुझे थोड़ी परेशानी हुई और वह यह है कि आपको Gedit3 के लिए उपयुक्त पैकेज डाउनलोड करना होगा। ज़ेन कोडिंग की आधिकारिक साइट पर Gedit के लिए प्लगइन के लिंक पेश किए गए हैं, लेकिन यह पुराना हो चुका है क्योंकि यह Gedit 2 के लिए है, जिससे इंस्टॉलेशन निर्देशों के अनुसार वर्तमान संस्करण Gedit3 में इसका उपयोग करना असंभव हो जाता है।

    संस्करण 2 के लिए लिखे गए Gedit प्लगइन्स नए संस्करण 3 में काम नहीं करते हैं, क्योंकि यह GTK3 का उपयोग करता है, जबकि Gedit2 GTK2 का उपयोग करता है। Gedit3 में प्लगइन का उपयोग करने के लिए, निम्नलिखित को ध्यान में रखा जाना चाहिए:

    नई निर्देशिका: ~/.local/share/gedit/plugins
    .gedit-plugin एक्सटेंशन का नाम बदलकर .plugin किया जाना चाहिए
    फ़ाइल खोलें और हेडर [गेडिट प्लगइन] संपादित करें, और इसे [प्लगइन] में बदलें
    साथ ही IAge=2 को IAge=3 में बदलें

    Gedit3 का उपयोग करने वाले लोग निम्नलिखित लिंक से ज़ेन कोडिंग प्लगइन डाउनलोड कर सकते हैं:

    https://github.com/mtrovo/zen-coding-gedit3

    मुझे आशा है कि यह आपके लिए उपयोगी होगा।
    नमस्ते.

    1.    वापस कहा

      धन्यवाद, मुझे बिल्कुल यही समस्या थी!

    2.    एलेक्स-एम7 कहा

      बहुत बढ़िया, आपने मेरी समस्या बता दी! धन्यवाद!

  9.   एलिनक्स कहा

    बहुत उपयोगी है, हालाँकि HTML या वेब और अन्य पर केंद्रित किसी भी भाषा में इस संपादन के लिए मैं ब्लूफ़िश या अप्टाना स्टूडियो को प्राथमिकता देता हूँ।

    नमस्ते!

    1.    नैनो कहा

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

      अपताना, यह मेरे लिए बिल्कुल बेकार है, यह सिर्फ जावा में लिखा गया है और इसमें ऐसी निर्भरताएँ हैं जो मेरे सिस्टम को खतरे में डालती हैं... यह उल्लेख करने की आवश्यकता नहीं है कि मेरे लिए (इसे बहुत अच्छी तरह से समझें, मेरे लिए) जावा = बकवास।

  10.   v3पर कहा

    मैं पिछले कुछ समय से इसका प्रयोग कर रहा हूँ, अनुशंसित!

  11.   राफेल कहा

    नमस्कार, उत्कृष्ट लेख...
    मैं ज़ेन गुरु की तरह महसूस नहीं करना चाहता :-), लेकिन आप जो विस्तार प्रस्तावित करते हैं:

    html>head>title+meta+body>ul#ordered_list>li.list*5
    (जो विस्तार करने में विफल रहता है)

    इसे समूहीकरण के लिए कोष्ठकों के साथ सही ढंग से किया जा सकता है, कुछ इस तरह:

    html>(head>title+meta)+(body>ul#ordered_list>li.list*5)
    यह अपेक्षा के अनुरूप विस्तारित होता है

    का संबंध है

  12.   फेलिप कहा

    यह प्लगइन बंद कर दिया गया है और इसकी जगह एम्मेट ने ले ली है (http://emmet.io/)

  13.   Ulises कहा

    क्या किसी को पता है कि मैं इसे केट के लिए आर्चलिनक्स पर कैसे स्थापित करूं? धन्यवाद।