בונה אתרים? תקתק קוד עם Zen Coding!

7350
18-01-2014

השלמה אוטומטית של טקסט קיימת כבר שנים רבות ובנוסף מציעים עורכי קוד PHP או HTML רבים אפשרות להוסיף סניפטים של קוד (Code Snnipets) אבל אם חשבתם שזה מקל על החיים עוד לא שמעתם על Zen Coding. זהו פרויקט משותף של גוגל ועורכי תוכן רבים אשר בעזרת תוסף מאפשר לכתוב שורות קוד במהירות וקלות חסרת תקדים ותאמינו לי שווה לנסות!

מקורות מידע והורדה של Zen Coding:

סרטוני הדגמה של היכולות של Zen Coding:

פקודות והקוד שהן מייצרות:

תחביר פקודות רגע לפני שנכנס אל פקודות פשוטות עד מורכבות אני רוצה להסביר על תחביר. ישנם מספר סימנים אשר כדאי להבין ויקלו עליכם לכתוב קוד בצורה מהירה.

* למרות שזה נראה לא ברור כרגע זה יתבהר בהמשך

תו	תיאור פעולה	דוגמה
*	אומר: הכפלה, כלומר	`div*5`
>	תת אלמנט	`div>span`
#	יצורף ID לתג הHTML	`div#`
.	יצורף Class לתג הHTML	`div.`
.	אלמנט לצד אלמנט	`div+div`
$	מצהירים על משתנה אוטומטי	`div$`

מפעילים את הקיצור בעזרת ctrl + E

הקיצורים אשר מוצגים בטבלה הנ"ל הם קיצורי קוד אותם מקלידים בעורך שלכם ואז לוחצים על ctrl + e כדי ליצור הרחבה של כל אוביקט לאוביקט כפול עם תג סוגר ופותח. זהו הקיצור אליו אתייחס בהמשך המאמר. כמובן שזה תלוי בעורך שלכם ויכול להיות גם ctrl + alt +enter שימו לב שלעיתים אכתוב [קיצור מקשים] ואתייחס לקיצור הנ"ל.

ייצור תגיות בקלות

כל הרעיון מאחורי Zen Coding הוא שאנחנו יכולים ליצור מבנה HTML בקלות על ידי הקלדת תגיות והרחבתן בצורה אוטומטית

Div[קיצור מקשים] <div></div>
a [קיצור מקשים] <a href=""></a>

דוגמאות קוד

h1+div +

יוצרים שני פריטים זה מתחת לזה הראשון הוא כמובן תג H1 והשני הוא DIV

		<h1></h1>
		<div></div>

ul>li*5 +

יוצר רשימה עם 5 פריטים

		<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		</ul>

ul>li*5>a +

יוצר רשימה עם 5 פריטים בתוכם קישורים

		<ul>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		<li><a></a></li>
		</ul>

ul.mylist>li*5 +

יוצר רשימה עם Class לCss ו5 פריטים

		<ul class="mylist">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		</ul>

div*2 +

יוצר שני Div שלמים!

		<div></div>
		<div></div>

div#someid-$*5 +

יוצרים 5 DIV'ים עם ID משתנה אוטומטית

		<div id="someId-1"></div>
		<div id="someId-2"></div>
		<div id="someId-3"></div>
		<div id="someId-4"></div>
		<div id="someId-5"></div>

cc:ie6 +

יוצר קוד התניה לאינטרנט אקספלורר 6

		<!--[if lte IE 6]>

		<![endif]-->

div#just-ie7>cc:ie7>link+script:src +

מכין קוד מותנה לאינטרנט אקסלורר 6 בתוך DIV

		<div id="just-ie7">
		<cc:ie7>
		<link rel="stylesheet" href="" />
		<script type="text/javascript" src=""></script>
		</cc:ie7>
		</div>

html:xt +

יוצר פתיח שלם למסמך HTML!!

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
		<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		</head>
		<body>

		</body>
		</html>

Zen Coding – אני התאהבתי!

אני לא יודע מה אתכם אבל אני התאהבתי!! כבר כמה חודשים שאני עובד עם Zen Coding והיום כשאני מיומן אני לא יכול לדמיין את לכתוב דף של קוד מבלי להשתמש בקיצורי דרך. זה נכון שעיקר העיסוק שלנו הוא קידום אתרים בגוגל אבל אנחנו משקיעים זמן רב בפיתוח אתרים ואפילו בניית אתרי וורדפרס ללקוחות אשר זקוקים לשדרוג האתר שלהם.

כמו שניתן לראות בקלות בסרטונים האפשרויות מדהימות וניתן בשתיים שלושה שורות של קוד מנוסחות היטב עם עורך קוד שיודע לעבוד עם Zen Coding לבנות מסגרת לדף אינטרנט בפחות מדקה!! באופן אישי אני משתמש בNotepad++ אך אתם יכולים כמובן לבחור את העורך שלכם מתוך רשימה העורכים המתאימים בפרויקט Zen Coding אצל גוגל. (רמז – רשימת מאשבים בראש הדף)