Belajar untuk menjadi master markup Zen

Markup, atau markup, merujuk kepada bahasa markup atau tagging sebagaimana adanya HTML dan CSS, dan kita semua tahu betapa menyakitkannya membuka dan menutup label satu persatu untuk membuat templat web ...

Sudah tentu ada penyelesaian untuk ini, salah satunya adalah pelengkapan automatik dengan IDE Dreamweaver mierda bluegriffon menjengkelkan jika anda tidak membeli plugin daripadanya o Suntingan Komodo sangat berat… Intinya adalah bahawa IDE atau editor kod yang terlalu sarat dengan pilihan sering kali menghalang pekerjaan dengan cara yang tidak dapat dibayangkan; begitulah kes Dreamweaver yang mengisi anda dengan kod sampah apa yang anda hasilkan secara grafik dan berat, mahal dan jelek. bluegriffon kebanyakannya menjengkelkan kerana percuma, percuma, tetapi separuh daripada pilihan disediakan untuk pengguna berbayar ... itu tidak menyeronokkan. Dan akhirnya kita ada komodo-edit, yang cukup bagus, kuat dan penuh dengan pilihan tetapi berat (100 mb dalam keadaan tidak aktif) dan menyiapkannya membosankan.

Senjata terbaik pengembang web atau pereka web bukan IDE dalam gaya tangki perang dengan seribu senjata di atasnya, itu adalah penyunting teks ringkas, beberapa pemalam dan keupayaan untuk menaip seperti orang sakit ... untuk itu tambah keajaiban Pengekodan Zen dan mereka akan mempunyai alat terbaik untuk menanda yang pernah dibuat di jari mereka (sekurang-kurangnya untuk saya).

Tapi ... apa sebenarnya Pengekodan Zen?

Sederhana, ia adalah plugin khas yang berfungsi sebagai lapisan abstraksi drop-down untuk HTML dan CSS yang dibuat di Javascript dan tersedia untuk banyak penerbit terkenal (notepad ++, Komodo-edit, Gedit, Kate, Bluefish, Geany, Dreamweaver, dsb.).

Aha, saya masih tidak faham idea apa yang anda katakan ...

Oleh itu, saya menunjukkan kepada anda dengan contoh yang mudah; Ingat perkara abstraksi dropdown? Baiklah, ubah menjadi pengecutan, bayangkan anda boleh mengambil garis kod HTML / CSS yang runtuh menjadi satu baris dan membuka seperti tirai atau melipatnya kembali ... Ingin melihat bagaimana? Anda hanya perlu memastikan bahawa anda mempunyai dua perkara untuk membuatnya berfungsi:

Mempunyai Pengekodan Zen dipasang di editor anda.
Ketahui arahan dan sintaks untuk menggunakannya.

Baiklah, jari ke kod:

html>head+body

Lihat garis kod itu? Itulah sintaks untuk HTML, mudah:

Mula-mula anda meletakkan nama tag (html) kemudian anda menunjukkan tanda mana yang akan berada di dalam tag itu (>) dan kemudian nama tag yang masuk ke dalam tag tersebut (kepala dan badan). Tanda '+' menunjukkan bahawa kepala dan badan adalah dua label yang berbeza dan kedua-duanya tidak terdapat di dalam label yang lain, seperti mengatakan «bersama tetapi tidak bercampur«... Kemudian, mari kita lihat apa yang dihasilkan oleh kod ketika menekan kekunci ajaib (dalam kes saya CTRL + E):

Tepat, 4 baris kod dibuat menjadi satu, yang muncul secara ajaib apabila anda menekan kombinasi kekunci yang betul ... dan ia boleh menjadi banyak lagi; sebagai contoh:

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

Sintaks yang sama, tetapi kami menambah sesuatu yang lain ... jika anda mengetahui beberapa CSS, anda akan menyedari bahawa kami menambahkan ID, kelas dan, sesuatu yang anda pasti tidak tahu; pengganda ... apa semua ini !? Kacau awak keliru saya!

Tenang, ini agak mudah, kami memberitahu di atas bahawa di dalam badan masukkan tanda «ul», tidak ada yang aneh, saya menerangkannya di atas, maka, kami memberikan ID, bahawa jika anda mengetahui CSS, anda akan memahami bahawa ini dikenal pasti dengan tanda '#', dan di dalam senarai yang tidak tersusun (ul) kita tambahkan lima label dengan listilla kelas (kelas), saya akan menerangkannya secara ringkas. Sebenarnya ia sangat mudah, '#' menunjukkan bahawa ia adalah ID, kemudian 'li.listilla' mengatakan bahawa kita harus membuat label «li» dengan senarai listilla «li class = listilla» dan kemudian, kita katakan «ulangi yang terakhir lima kali«. Apa yang memberi kita hasilnya:

Dua belas baris kod ditulis dalam satu baris dan dalam masa yang lebih sedikit 😉

Dan itu juga dapat dilakukan dengan CSS, walaupun saya tidak akan memanjangkan artikel dengan menunjukkan yang jelas (di bawah ini saya akan memberikan senarai cheat keseluruhan untuk anda Pengekodan Zen).

Saya harus menekankan bahawa ini tidak berfungsi untuk membuat satu zillion ratus ribu baris dalam satu, oh tidak, ini mempunyai had dan cara menggunakannya. Sekiranya misalnya kita mahu melakukan sesuatu seperti ini:

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

Apa yang secara teori harus memberi kita ini (lihat garis yang disorot pada gambar terakhir):

Ini akan memberi kita ini:

Yang menunjukkan bahawa anda tidak boleh melakukan sihir dengan ini; Ingat bahawa penguasa kod Zen mesti tepat dan pantas, dan melakukan perkara yang salah dilakukan memerlukan masa dan kelajuan, oleh itu, teknik yang betul untuk menulis dengan cepat dan dengan Pengekodan Zen akan seperti ini:

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

Anda meluaskan dan berada di dalam tanda kepala:

title+meta

Yang akan memberi anda kod yang betul:

Walaupun Pengekodan Zen Ini mempunyai banyak lagi perkara untuk ditunjukkan kepada anda dan mungkin perlu menulis satu lagi baris arahan di dalam kepala adalah yang terbaik, jadi kami menggunakan arahan lain, «kembangkan dengan singkatan" dalam kes saya ctrl + alt + e yang akan membuka bar kecil di mana kita dapat menulis kod Zen dan melihat bagaimana ia muncul dalam masa nyata. Hati-hati, saya tidak mengesyorkan menulis semuanya dengan ini tetapi menulis di dalam struktur yang sudah dibuat, iaitu pertama-tama buat struktur besar dan kemudian anda akan terperinci di dalamnya dengan pilihan ini.

Dan terdapat banyak perintah super keren di Pengekodan Zen, masalahnya ialah anda menyiasatnya setelah anda memasangnya dan belajar menggunakannya; Dengan pemalam ini, anda tidak memerlukan pelengkap automatik atau potongan untuk css atau html, sebenarnya, dengan ini anda akan menyedari bahawa pilihan ini adalah membuang masa dalam dua bahasa pengaturcaraan ini 😉

Dan bagi mereka yang berminat, berikut adalah CheatSheet rasmi Pengekodan Zen, anda dapat melihatnya dalam format ODF o PDF justo SINI