मार्कअपचे झेन मास्टर होण्यासाठी शिका

मार्कअप, किंवा मार्कअप, मार्कअप किंवा टॅगिंग भाषांचा संदर्भ आहे एचटीएमएल आणि सीएसएस, आणि वेब टेम्पलेट तयार करण्यासाठी एकामागून एक लेबले उघडणे आणि बंद करणे या सर्वांसाठी किती वेदनादायक आहे हे आपल्या सर्वांना माहित आहे ...

नक्कीच यावर उपाय आहेत, त्यापैकी एक म्हणजे आयडीई सारख्या स्वयंपूर्णतेचे अँकी कचरा ब्लूग्रीफॉन आपण त्याच्याकडून प्लगइन खरेदी न केल्यास त्रासदायक o कोमोडो संपादन खूप जड... मुद्दा असा आहे की आयडीई किंवा कोड संपादक बरेच पर्यायांसह लोड केलेले असतात आणि बर्‍याच वेळा अकल्पनीय मार्गांनी कामात अडथळा आणतात; अशी परिस्थिती आहे अँकी जे आपण ग्राफिकली व्युत्पन्न करता ते कचरा कोड्याने भरते आणि जड, महाग आणि कुरुप आहे. ब्लूग्रीफॉन हे मुख्यतः त्रासदायक आहे कारण ते विनामूल्य, विनामूल्य आहे, परंतु अर्धे पर्याय पेड वापरकर्त्यांसाठी राखीव आहेत ... ते मजेदार नाही. आणि शेवटी आमच्याकडे आहे कोमोडो-संपादन, जे बर्‍यापैकी चांगले, सामर्थ्यशाली आणि पर्यायांनी परिपूर्ण आहे परंतु ते जड आहे (100 मैडब्ल्यू इडल मध्ये) आणि ते स्थापित करणे त्रासदायक आहे.

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

पण ... काय आहे? झेन कोडिंग?

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

अहो, आपण काय म्हणत आहात हे मला अजूनही ध्यानात नाही.

म्हणून मी तुम्हाला एक साधे उदाहरण देतो; ड्रॉप-डाऊन अ‍ॅबस्ट्रॅक्शन गोष्ट आठवते? बरं, ते संकुचित करा, कल्पना करा की आपण एचटीएमएल / सीएसएस कोड एका ओळीत कोसळल्या पाहिजेत आणि पडद्यासारखा उलगडू शकता किंवा परत दुमडु शकता ... कसे पहायचे आहे? आपण ते सुनिश्चित करण्यासाठी आपल्याकडे दोन गोष्टी आहेत हे कार्य करण्यासाठी:

आहे झेन कोडिंग आपल्या संपादकात स्थापित.
कमांड्स वापरा आणि सिंटॅक्स वापरा.

ठीक आहे, कोडला बोटं:

html>head+body

कोडची ती ओळ दिसते? पण ते HTML साठी वाक्यरचना आहे, हे सोपे आहे:

प्रथम आपण टॅगचे नाव (एचटीएमएल) ठेवले आणि नंतर आपण त्या टॅगमध्ये (>) कोणत्या टॅगमध्ये जात असल्याचे सूचित केले आणि त्या टॅगचे नाव (डोके आणि मुख्य भाग). '+' चिन्ह हे सूचित करते की डोके आणि शरीर दोन भिन्न लेबल आहेत आणि ते दोघेही इतरांमधे नसतात, हे असे म्हणण्यासारखे आहे «एकत्र पण मिसळलेले नाही«… तर मग जादू की दाबताना कोडची ती ओळ काय निर्माण करते ते पाहूया (माझ्या बाबतीत सीटीआरएल + ई):

तंतोतंत, कोडच्या 4 ओळी एकामध्ये तयार केल्या जातात, जेव्हा आपण योग्य की संयोजन दाबाल तेव्हा जादूने दिसून येते ... आणि बरेच अधिक असू शकतात; उदाहरणार्थ:

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

समान वाक्यरचना, परंतु आम्ही आणखी काही जोडतो ... आपल्याला काही सीएसएस माहित असल्यास आपल्याला कळेल की आम्ही एक आयडी, वर्ग आणि काही जोडत आहोत जे आपल्याला नक्कीच माहित नव्हते; गुणक… हे काय आहे !? संभोग आपण मला गोंधळात टाकता!

शांत व्हा, हे अगदी सोपे आहे, आम्ही वर सांगितले की शरीरात एक टॅग प्रविष्ट करा »उल», काही विचित्र नाही, मी वर वरील स्पष्टीकरण दिले, नंतर आम्ही एक आयडी नियुक्त केला आहे, जर आपल्याला सीएसएस माहित असेल तर आपल्याला समजेल की हे यासह ओळखले गेले आहेत चिन्ह '#' आणि त्या अनअर्डर्ड यादीमध्ये (उल) आम्ही वर्ग (वर्ग) लिस्टिल्लासह पाच लेबले जोडतो, मी थोडक्यात हे स्पष्ट करते. खरं तर हे अगदी सोपे आहे, '#' म्हणजे तो आयडी असल्याचे दर्शविते, तर 'li.listilla' असे म्हणतात की आम्हाला लिस्टील्ला «li वर्ग = लिस्टिला class या वर्गात" li "असे लेबल तयार करावे आणि नंतर,त्या पाच वेळा पुन्हा करा«. आम्हाला काय परिणाम देते:

एका ओळीत आणि बर्‍याच कमी वेळात कोडच्या बारा ओळी लिहिल्या गेल्या 😉

आणि हे सीएसएसद्वारे देखील केले जाऊ शकते, तथापि मी स्पष्ट दर्शवून लेख वाढवणार नाही (खाली मी तुम्हाला फसवणूक एक संपूर्ण यादी देईन झेन कोडिंग).

मला हे सांगणे आवश्यक आहे की हे एकामध्ये झिलियन लाख हजार रेषा बनविण्यापासून कार्य करत नाही, नाही, यास वापरण्याची एक मर्यादा आणि मार्ग आहे. उदाहरणार्थ आम्हाला असे काहीतरी करायचे असेल तरः

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

सिद्धांतानुसार आम्हाला हे काय द्यावे (शेवटच्या प्रतिमेतील हायलाइट केलेली ओळ पहा):

हे आपल्याला हे देईल:

हे असे दर्शविते की आपण यासह जादू देखील करू शकत नाही; लक्षात ठेवा की कोडचा झेन मास्टर अचूक आणि वेगवान असणे आवश्यक आहे आणि चुकीच्या गोष्टी केल्या जाण्यासाठी वेळ आणि वेग लागतो, म्हणून त्वरेने आणि सह लिहिण्यासाठी योग्य तंत्र झेन कोडिंग हे असे असेल:

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

आपण विस्तृत आणि मुख्य टॅग आत:

title+meta

जे आपल्याला अचूक कोड देईल:

तरी झेन कोडिंग आपल्याला दर्शविण्यासाठी बर्‍याच गोष्टी आहेत आणि कदाचित डोक्यात आणखी एक कमांड लाइन लिहिणे चांगले नाही, म्हणून आम्ही दुसरी कमांड वापरतो, «संक्षेप सह विस्तृत करा" माझ्या बाबतीत ctrl + alt + e जी एक छोटी बार उघडेल जिथे आपण झेन कोड लिहू शकतो आणि रिअल टाइममध्ये तो कसा दिसेल हे पाहू शकतो. सावधगिरी बाळगा, मी यासह सर्व काही लिहिण्याची शिफारस करत नाही परंतु आधीपासूनच तयार केलेल्या रचनांमध्ये लिहिण्याची शिफारस करत नाही, म्हणजे प्रथम मोठ्या रचना तयार करा आणि नंतर आपण या पर्यायासह त्याबद्दल तपशीलवार माहिती देऊ शकाल.

आणि मध्ये अनेक सुपर कूल कमांड आहेत झेन कोडिंग, गोष्ट अशी आहे की एकदा आपण त्यांची स्थापना केल्यानंतर आपण त्यांचा शोध घ्या आणि त्यांचा वापर करण्यास शिकलात; या प्लगइनद्वारे आपल्याला सीएसएस किंवा एचटीएमएलसाठी स्वयंपूर्णता किंवा स्निपेट्सची आवश्यकता नाही, खरं तर यासह आपल्याला हे समजेल की या दोन प्रोग्रामिंग भाषांमध्ये या पर्यायांचा एकूणच वेळ वाया जातो 😉

आणि स्वारस्य असलेल्यांसाठी, ची अधिकृत चीटशीट येथे आहे झेन कोडिंग, आपण ते स्वरूपात पाहू शकता ओडीएफ o PDF गोरा येथे


लेखाची सामग्री आमच्या तत्त्वांचे पालन करते संपादकीय नीति. त्रुटी नोंदविण्यासाठी क्लिक करा येथे.

20 टिप्पण्या, आपल्या सोडा

आपली टिप्पणी द्या

आपला ई-मेल पत्ता प्रकाशित केला जाणार नाही. आवश्यक फील्ड चिन्हांकित केले आहेत *

*

*

  1. डेटा जबाबदार: मिगुएल Áन्गल गॅटन
  2. डेटाचा उद्देशः नियंत्रण स्पॅम, टिप्पणी व्यवस्थापन.
  3. कायदे: आपली संमती
  4. डेटा संप्रेषण: कायदेशीर बंधन वगळता डेटा तृतीय पक्षास कळविला जाणार नाही.
  5. डेटा संग्रहण: ओकेन्टस नेटवर्क (EU) द्वारा होस्ट केलेला डेटाबेस
  6. अधिकारः कोणत्याही वेळी आपण आपली माहिती मर्यादित, पुनर्प्राप्त आणि हटवू शकता.

  1.   माफन्स म्हणाले

    मला हे खूप मनोरंजक वाटले!

    मी निश्चितपणे प्रयत्न करणार आहे!

  2.   माफन्स म्हणाले

    एक प्रश्न, "डोके> शरीर" फॉर्म डोके अंतर्गत शरीर तयार करू नये? आपल्याला पाहिजे ते मिळवण्यासाठी आपण "डोके + मुख्य" ठेवले नाही पाहिजे?

    मी संभ्रमित असल्यास मला माफ करा!

    धन्यवाद

    1.    नॅनो म्हणाले

      होय, ">" च्या आधीचे कोणतेही टॅग नाव सूचित करते की ते पूर्वीच्या नावाच्या टॅगमध्ये आहे; या प्रकरणात, जसे आपण म्हणता तसे डोके> शरीर सूचित करते की शरीर डोक्यात जाईल, जे आपल्याला माहित आहे की चुकीचे आहे.

      आणि हो, हेड प्लस बॉडी हे कॉन्टॅनेटिंगसारखे आहे, आपण ते सांगता की ते दुसर्‍या टॅगमध्ये जातात परंतु त्यापैकी दोघेही दुसर्‍या आत जात नाहीत, या प्रकरणात एचटीएमएल> हेड + बॉडी

  3.   असुआर्तो म्हणाले


    आमेन

  4.   103 म्हणाले

    खूप, खूप चांगले, वैयक्तिकरित्या मी या प्रकारच्या गोष्टींसाठी साधा मजकूर संपादक आणि झेन कोडिंग वापरण्यास प्राधान्य देतो कारण मी एचटीएमएलसाठी पाहिलेले सर्वोत्कृष्ट आहे.

    मला खरोखर हे आवडले: html: xt आणि ज्यांना htlm: 5 ची अपेक्षा करायची आहे त्यांच्यासाठी

  5.   ऑरोसझेडएक्स म्हणाले

    हं, मी ड्रीमविव्हर सारखा प्रोग्राम खरोखर वापरला नाही, मला हे झेन कोडिंग ट्राय करावे लागेल ...

    पुनश्च: आपल्याकडे असलेले हे वॉलपेपर… मी बनवलेले हे योगायोगाने आहे का?

    1.    नॅनो म्हणाले

      होय पण फ्रमलिन्क्समधील एक

  6.   इझाएल म्हणाले

    खूप चांगले, मला नेहमीच हलके मजकूर संपादक आवडले आहेत, मी आता वापरतो गेनी आणि हे जादूच्या टीपॉटसाठी समर्थित असल्याचे पाहून मला नक्कीच प्रयत्न करून घेण्यास प्रोत्साहित केले

  7.   लुपिन तिसरा म्हणाले

    बरं, प्रोग्रामिंग ही माझी गोष्ट नाही, ज्याने मला उडवून दिले आहे ते डेस्कटॉप आहे, आपण काय वापरता, जीनोम 3 किंवा ऐक्य, काय आहे? हे खूप मस्त आहे, मी माझे सारखेच सोडते का ते पाहूया
    आपण मला उत्तर देण्यास हरकत न केल्यास, मी खूप आभारी आहे 😀
    पुनश्च: होय, मी खिडकीतून आहे, विद्यापीठाने एक्सडी केले आहे

    1.    नॅनो म्हणाले

      युनिटी, प्राथमिक थीमसह आणि पॅनेलची अस्पष्टता कमी केली.

      1.    नियोमिटो म्हणाले

        मी विंडोजसह देखील कार्य करतो, मला तुमच्या डेस्कटॉपवर अभिनंदन करू द्या मस्त आहे.

  8.   जसझंद्रे म्हणाले

    लेख खूप मनोरंजक आहे ... मला तो खूप उपयुक्त वाटतो. तसे, गेडीटसाठी झेन कोडिंग प्लगइनच्या स्थापनेने मला थोडासा रक्षक पकडला आणि ते म्हणजे तुम्हाला गेडीट 3 साठी योग्य पॅकेज डाउनलोड करावे लागेल. अधिकृत झेन कोडिंग साइटमध्ये गेडीटसाठी प्लगइनचे दुवे दिले गेले आहेत, परंतु ते कालबाह्य झाले आहे कारण ते जीडीट 2 साठी आहे जे इंस्टॉलेशनच्या सूचनांनुसार सध्याच्या आवृत्ती गेडिट 3 मध्ये वापरणे अशक्य करते.

    आवृत्ती 2 साठी लिहिलेल्या गेडीट प्लगइन नवीन आवृत्ती 3 मध्ये कार्य करत नाहीत, कारण ते जीटीके 3 वापरते, तर गेडीट 2 जीटीके 2 वापरतात. Gedit3 मध्ये प्लगइन वापरण्यासाठी आपल्याला खालील गोष्टी विचारात घ्याव्या लागतील.

    नवीन निर्देशिका: ~ / .local / share / gedit / plugins
    .Gedit- प्लगइन विस्ताराचे नाव बदलणे आवश्यक आहे. प्लगइन
    फाईल उघडा आणि [गेडीट प्लगइन] शीर्षलेख संपादित करा आणि त्यास [प्लगिन] मध्ये बदला
    आयएजे = 2 साठी आयएजे = 3 देखील बदला

    जे Gedit3 वापरतात ते खालील दुव्यावरुन झेन कोडिंग प्लगइन डाउनलोड करू शकतात:

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

    मला आशा आहे की ते आपण उपयुक्त ठरेल.
    ग्रीटिंग्ज

    1.    zad म्हणाले

      धन्यवाद, मला तंतोतंत समस्या होती !!

    2.    अ‍ॅलेक्स-एम 7 म्हणाले

      मला चांगली समस्या दिली होती ग्रॅक्स!

  9.   एलिन्क्स म्हणाले

    खूप उपयुक्त, जरी या आवृत्तीसाठी एचटीएमएल किंवा कोणत्याही वेब-देय भाषेत आणि इतरांना मी ब्लू फिश किंवा ऑप्टाना स्टुडिओ पसंत करतो.

    धन्यवाद!

    1.    नॅनो म्हणाले

      कीबोर्ड शॉर्टकट आणि सामग्री सानुकूलित करण्यात सक्षम होणे यासारख्या दोन गोष्टींमध्ये ब्लू फिश अपयशी ठरते आणि हे आजपर्यंत मी उद्धरण स्वयंपूर्ण करू शकत नाही आणि नंतर जोडपे विसरून विसरून मला खूप त्रासातून मुक्त केले जाते.

      अपाटणा, हे फक्त माझ्यासाठी शोषून घेते, हे फक्त जावामध्ये लिहिलेले आहे आणि माझ्या सिस्टमला धोका असलेल्या अवलंबित्व आहेत ... माझ्यासाठी (माझ्यासाठी फार चांगले समजून घ्या) जावा = विचित्रपणा नमूद करू नका.

  10.   v3on म्हणाले

    मी ब time्याच काळापासून याचा वापर करीत आहे, शिफारस केली आहे!

  11.   राफेल म्हणाले

    नमस्कार, एक्स्लेन लेख ...
    मला झेन मास्टरसारखे वाटत नाही :-), परंतु आपण प्रस्तावित केलेला विस्तारः

    html> डोके> शीर्षक + मेटा + बॉडी> << ऑर्डर_लिस्ट> li.listilla * 5
    (ते विस्तारण्यात अयशस्वी)

    हे गटाच्या कंसात योग्यरित्या केले जाऊ शकते, यासारखे काहीतरी:

    एचटीएमएल> (डोके> शीर्षक + मेटा) + (मुख्य भाग << ऑर्डर_लिस्ट> li.listilla * 5)
    हे अपेक्षेप्रमाणे वाढते

    शुभेच्छा

  12.   फेलिप म्हणाले

    हे प्लगिन बंद केले आहे आणि एम्मेटने बदलले आहे (http://emmet.io/)

  13.   युलिसिस म्हणाले

    केटसाठी आर्चलिनिक्समध्ये मी हे कसे स्थापित केले हे कोणालाही माहिती आहे काय? धन्यवाद.