למד להיות אדון זן בסימון

הסימון, או הסימון, מתייחס לשפות סימון או תיוג כפי שהן HTML ו- CSS, וכולנו יודעים כמה זה כואב לפתוח ולסגור תוויות אחת אחת כדי ליצור תבנית אינטרנט ...

כמובן שיש לכך פתרונות, אחד מהם הוא השלמה אוטומטית כמו IDE Dreamweaver מיירדה בלוגריפון מעצבן אם לא קונים ממנו תוספים o עריכת קומודו כבד מאוד... העניין הוא שעורכי IDE או עורכי קוד עמוסים מדי באפשרויות לעיתים קרובות מעכבים את העבודה בדרכים בלתי נתפסות; כזה הוא המקרה של Dreamweaver שממלא אותך בקוד אשפה מה שאתה מייצר בצורה גרפית והוא כבד, יקר ומכוער. בלוגריפון זה בעיקר מעצבן כי זה בחינם, בחינם, אבל מחצית מהאפשרויות שמורות למשתמשים בתשלום ... זה לא כיף. ולבסוף יש לנו קומודו-עריכה, שהוא די טוב, עוצמתי ומלא באופציות אבל הוא כבד (100 מגה בייט) וההגדרה שלו מייגעת.

הנשק הטוב ביותר של מפתח אתרים או מעצב אתרים הוא לא ה- IDE בסגנון טנק מלחמה עם אלף נשק למעלה, הוא עורך טקסט פשוט, כמה תוספים ויכולת להקליד כמו אדם חולה ... לזה להוסיף את הקסם של קידוד זן והם יהיו באצבעותיהם את הכלי הטוב ביותר לסימון שנוצר אי פעם (לפחות בשבילי).

אבל ... מה זה לעזאזל קידוד זן?

פשוט, זהו תוסף מיוחד המשמש כשכבת הפשטה נפתחת עבור HTML ו- CSS שנוצרו ב- Javascript וזמין לרבים מהמו"לים המפורסמים ביותר (פנקס רשימות ++, קומודו-עריכה, Gedit, Kate, Bluefish, Geany, Dreamweaver, וכו ').

אהה, אני עדיין לא מבין רעיון ארור מה אתה אומר ...

אז אני מראה לך דוגמה פשוטה; זוכר את עניין ההפשטה הנפתחת? ובכן, שנה אותו לכיווץ, דמיין שאתה יכול לקחת שורה של קוד HTML / CSS שקרס לשורה אחת ולפרוש אותו כמו וילון או לקפל אותו לאחור ... רוצה לראות איך? אתה רק צריך לוודא שיש לך שני דברים כדי שזה יעבוד:

יש לי קידוד זן מותקן בעורך שלך.
דע את הפקודות והתחביר לשימוש בו.

אוקיי, אצבעות לקוד:

html>head+body

רואים את שורת הקוד הזו? ובכן זה התחביר ל- HTML, זה פשוט:

תחילה שמים את שם התג (html) ואז מציינים אילו תגים יהיו בתוך התג (>) ואז את שם התגיות שנכנסות לתג זה (ראש וגוף). הסימן '+' מציין כי הראש והגוף הם שתי תוויות שונות ושאף אחד מהם אינו כלול בתוך השני, זה כמו לומר «ביחד אך לא מעורב«... ואז, בוא נראה מה יוצר שורת קוד זו בעת לחיצה על מקשי הקסם (במקרה שלי CTRL + E):

בדיוק, 4 שורות קוד שהורכבו לאחת, המופיעות באופן קסום כאשר לוחצים על צירוף המקשים הנכון ... ויכולים להיות הרבה יותר; לדוגמה:

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

אותו תחביר, אבל אנו מוסיפים עוד משהו ... אם אתה מכיר CSS כלשהו תבין שאנחנו מוסיפים מזהה, כיתות, ודבר שלא ידעת; מכפילים ... מה כל זה!? לעזאזל אתה תבלבל אותי!

תירגע, זה די פשוט, אמרנו לעיל שלפני גוף הזן תג "ul", שום דבר מוזר, הסברתי את זה לעיל, אז הקצנו מזהה, שאם אתה יודע CSS תבין שאלו מזוהים עם את הסימן '#', ובתוך אותה רשימה לא מסודרת (ul) אנו מוסיפים חמש תוויות עם הכיתת (class) listilla, אני מסביר זאת בקצרה. למעשה זה פשוט מאוד, '#' מציין שזה מזהה, ואז 'li.listilla' אומר שעלינו ליצור תווית «li» עם הכיתה listilla «li class = listilla» ואז, אנו אומרים «חזור על זה חמש פעמים אחרונות«. מה נותן לנו כתוצאה:

שנים עשר שורות קוד שנכתבות בשורה אחת ובזמן הרבה פחות 😉

ואפשר לעשות זאת גם עם CSS, אם כי לא אאריך את המאמר בכך שאראה את המובן מאליו (להלן אעביר לך רשימה שלמה של צ'יטים עבור קידוד זן).

אני צריך להדגיש שהדבר לא עובד כדי ליצור מיליון מאות אלף קווים באחד, אוי לא, יש לזה גבול ודרך להשתמש בו. אם למשל אנחנו רוצים לעשות משהו כזה:

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 שיפתח סרגל קטן בו נוכל לכתוב קוד זן ונראה כיצד הוא מופיע בזמן אמת. היזהר, אני לא ממליץ לכתוב הכל עם זה אלא לכתוב בתוך המבנים שכבר נוצרו, כלומר, קודם ליצור את המבנים הגדולים ואז תפרט בתוכם עם אפשרות זו.

ויש הרבה פקודות מגניבות במיוחד בתוך קידוד זןהעניין הוא שתחקור אותם ברגע שתתקין אותם ותלמד להשתמש בהם; עם תוסף זה לא תצטרך השלמה אוטומטית או קטעי טקסט עבור css או html, למעשה, עם זה תבין שאפשרויות אלה הן בזבוז זמן מוחלט בשתי שפות התכנות הללו 😉

ולמתעניינים, הנה צ'יטשיט הרשמי של קידוד זן, אתה יכול לראות את זה בפורמט ODF o PDF Justo כאן