Lerne ein Zen-Meister des Markups zu sein

Das Markup oder die Markierung bezieht sich auf Auszeichnungs- oder Beschriftungssprachen in ihrer jeweiligen Form HTML und CSS, und wir alle wissen, wie schmerzhaft es ist, Tags einzeln zu öffnen und zu schließen, um eine Webvorlage zu erstellen ...

Natürlich gibt es dafür Lösungen, eine davon ist die Autovervollständigung mit IDEs wie Dreamweaver mierda Blaugriff ärgerlich, wenn man keine Plugins kauft o Komodo bearbeiten sehr schwer… der Punkt ist, dass IDEs oder Code-Editoren, die zu viele Optionen bieten, die Arbeit oft auf unvorstellbare Weise behindern; Dies ist der Fall Dreamweaver Das füllt Sie mit Müllcode, den Sie grafisch generieren, und ist schwer, teuer und hässlich. Blaugriff Es ist vor allem deshalb ärgerlich, weil es kostenlos ist, aber die Hälfte der Optionen ist kostenpflichtigen Benutzern vorbehalten … das macht keinen Spaß. Und endlich haben wir es Komodo-Bearbeitung, das recht gut, leistungsstark und voller Optionen ist, aber umfangreich (100 MB im Leerlauf) und die Konfiguration nervig ist.

Die beste Waffe eines Webentwicklers oder Webdesigners sind nicht die IDEs im Stil eines Kriegspanzers mit tausend Waffen, sondern ein einfacher Texteditor, einige Plugins und die Fähigkeit, wie ein kranker Mensch zu tippen ... Hinzu kommt die Magie von Zen-Codierung und Sie haben das beste Markup-Tool zur Hand, das jemals erstellt wurde (zumindest für mich).

Aber... was zum Teufel ist er? Zen-Codierung?

Ganz einfach: Es handelt sich um ein spezielles Plugin, das als Dropdown-Abstraktionsebene für in erstelltes HTML und CSS dient Javascript und für viele der bekanntesten Verlage erhältlich (Notepad++, Komodo-Edit, Gedit, Kate, Bluefish, Geany, DreamweaverUsw.).

Oh huh, ich verstehe immer noch nicht, was du sagst ...

Ich zeige es Ihnen anhand eines einfachen Beispiels. Erinnern Sie sich an die Sache mit der Dropdown-Abstraktion? Nun, ändern Sie es in „Ausblenden“. Stellen Sie sich vor, Sie könnten eine Zeile HTML/CSS-Code in eine Zeile einklappen und diese wie einen Vorhang aufklappen oder wieder einklappen … Möchten Sie sehen, wie das geht? Sie müssen nur sicherstellen, dass Sie zwei Dinge haben, damit es funktioniert:

Haben Zen-Codierung in Ihrem Editor installiert.
Kennen Sie die Befehle und die Syntax, um sie zu verwenden.

Ok, Finger zum Code:

html>head+body

Sehen Sie diese Codezeile? Nun, das ist die Syntax für HTML, es ist einfach:

Zuerst geben Sie den Namen des Tags (HTML) ein, dann geben Sie an, welche Tags in diesem Tag enthalten sein sollen (>) und dann den Namen der Tags, die in diesem Tag enthalten sind (Kopf und Körper). Das „+“-Zeichen zeigt an, dass Kopf und Körper zwei verschiedene Tags sind und keines in dem anderen enthalten ist. Es ist, als würde man sagen: „zusammen, aber nicht durcheinander„… also mal sehen, was diese Codezeile für uns generiert, wenn wir die magischen Tasten drücken (in meinem Fall STRG+E):

Genau, 4 Codezeilen in einer, die auf magische Weise erscheinen, wenn Sie die richtige Tastenkombination drücken ... und es können noch viele mehr sein; Zum Beispiel:

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

Dieselbe Syntax, aber wir haben etwas anderes hinzugefügt ... Wenn Sie etwas über CSS wissen, werden Sie feststellen, dass wir eine ID, Klassen und etwas hinzufügen, das Sie sicherlich nicht wussten; Multiplikatoren… was ist das denn!? Verdammt, du verwirrst mich!

Beruhigen Sie sich, das ist ganz einfach, oben haben wir Ihnen gesagt, dass Sie ein „ul“-Tag in den Körper eingeben sollen, nichts Seltsames, ich habe das oben erklärt, dann haben wir eine ID zugewiesen, wenn Sie CSS kennen, werden Sie verstehen, dass diese identifiziert werden mit dem Zeichen „#“, und innerhalb dieser ungeordneten Liste (ul) fügen wir fünf Beschriftungen mit der Klasse (class) listilla hinzu, ich werde das kurz erklären. Tatsächlich ist es ganz einfach: „#“ gibt an, dass es sich um eine ID handelt, dann sagt „li.listilla“, dass wir ein Label „li“ mit der Klasse listilla „li class=listilla“ erstellen müssen und dann sagen wir „Wiederholen Sie das letzte Mal fünf Mal«. Was uns als Ergebnis ergibt:

Zwölf Zeilen Code in einer Zeile und in viel kürzerer Zeit geschrieben 😉

Und das geht auch mit CSS, auch wenn ich den Artikel mit dem Offensichtlichen nicht verlängern werde (Unten werde ich Ihnen eine ganze Liste von Cheats für geben Zen-Codierung).

Ich muss darauf hinweisen, dass dies nicht funktioniert, um zigtausend Zeilen in einer zu erstellen. Oh nein, das hat eine Grenze und eine Möglichkeit, es zu nutzen. Wenn wir zum Beispiel so etwas machen wollen:

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

Was uns theoretisch Folgendes liefern sollte (siehe die hervorgehobene Zeile im letzten Bild):

Es wird uns Folgendes geben:

Das zeigt, dass man damit auch nicht zaubern kann; Denken Sie daran, dass ein Zen-Meister des Codes präzise und schnell sein muss, und schlechte Dinge zu tun braucht Geschwindigkeit und Zeit, daher ist es die richtige Technik, schnell und mit zu schreiben Zen-Codierung wäre das:

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

Erweitern Sie y innerhalb des Head-Tags:

title+meta

Was Ihnen den richtigen Code geben würde:

Obwohl die Zen-Codierung hat Ihnen noch viel mehr zu zeigen und vielleicht ist es nicht das Beste, eine weitere Befehlszeile in den Kopf schreiben zu müssen, also verwenden wir einen anderen Befehl: «mit Abkürzung erweitern" in meinem Fall Strg + Alt + E. Dadurch wird eine kleine Leiste geöffnet, in der wir Zen-Code schreiben und sehen können, wie er in Echtzeit angezeigt wird. Seien Sie vorsichtig, ich empfehle nicht, alles damit zu schreiben, sondern innerhalb der bereits erstellten Strukturen zu schreiben, d.

Und es gibt eine Vielzahl superinteressanter Befehle darin Zen-Codierung, die Sache ist, dass Sie sie untersuchen, sobald Sie sie installiert haben und lernen, wie man sie verwendet; Mit diesem Plugin benötigen Sie keine automatische Vervollständigung oder Snippets für CSS oder HTML. Tatsächlich werden Sie damit feststellen, dass diese Optionen in diesen beiden Programmiersprachen reine Zeitverschwendung sind 😉

Und für Interessierte gibt es hier das offizielle CheatSheet des Zen-Codierung, können Sie es im Format sehen ODF o PDF nur HIER