نوشته شده در26 ,مارس, 2013 توسط محمد تیموری پابندی در html, آموزش, برنامه نویسی, تحت وب, دسته‌بندی نشده

این پست، از پست های کمیاب داخل اینترنت است که از سایت این ترجمه کردم، کمی و کاستی های ترجمه را به خاطر زبان تخصصی ببخشید! و پیشنهادم این است که حتما این پست را بخوانید چون واقعا به درد می خورد!

دلخوشی

در کامنتی که پی پست نویسنده، آقای Zeno Rocha گذاشتم (84# در این)، از ایشان برای ترجمه ی این پستشان به فارسی اجازه خواستم، ایشان هم با لحن خوبی از کارم استقبال کردند. (فکر نمی کردم با این سرعت جواب بگیرم!)

پس جا دارد از ایشان نیز به خاطر پست خوبشان و مخصوصاً تصاویر متحرک و اون IFrame اِ که خیلی خوشم آمد  تشکر جانانه کنم!

کد نویسی پرسرعت؛ خداحافظ Zen، سلام Emmet!

Emmet، که قبلاً با نام Zen شناخته می شد، بهترین شیوه ی کدنویسی و در عین حال سریع ترین افزونه ی text-editor هاست که تا به حال دیدم. این ابزار خیلی سریع مخفف کد ها را باز می کند و مثلا برای نوشتن head و body یک سند html، شما لازم نیست خودتان را آن قدر به زحمت بیندازید، پس با ما همراه باشید.

در ادامه با استفاده از تصاویر Gif و مثال های متنی شما را راهنمایی می کنیم.

دقیقاً چیکار می کنه؟

نوشتن html زمان می برد، با آن همه tag و attribute و quote و پرانتز و غیره. البته خیلی از ویرایشگر های متن در نوشتن کد کمک می کنند، ولی شما باز هم یک عالمه تایپ می کنید! Emmet خیلی سریع مخفف های کد را باز می کند و کد شما را می نویسد!

مخفف های html

INITIALIZER (مقدار دهی اولیه)

شروع کردن کار با یک سند html کمتر از یک ثانیه طول می کشد، البته با Emmet! خیلی ساده،! و یا html:5  را تایپ کنید و کلید “تب” (Tab) را بزنید، حالا می بینیید که بالای سند html شما نوشته شده است! همراه با یک سری تگ.

بالای سند html

بالای سند html

  • html:5 یا ! برای سند HTML5
  • html:xt برای سند XHTML
  • html:4s برای سند HTML4 strict

 خیلی راحت Class ها، ID ها و متن و مشخصات را اضافه کنید

به خاطر این که کدنویسی Emmet برای توصیف المان ها شبیه CSS selectors هاست، استفاده از آن بسیار آسان است. بگذارید نام المان را (مثلا p) را با یک شناسه (identifier) ترکیب کنیم. (مثلا p#description)

CSS نویسی

CSS نویسی

همچنین، شما می توانید Class ها را با ID تلفیق کنید، برای مثال p.bar#foo این را بیرون می دهد:

<p class="bar" id="foo"></p>

حالا، ببینیم که چگونه محتوا و attribute را برای المان های html تعریف کنیم. آکولاد ({}) برای محتوا استفاده می شوند، پس {h1{foo  این را بیرون می دهد:

<h1>foo</h1>

و کروشه، برای attribute هاست، پس #=[a[href  این را بیرون می دهد:

<a href="#"></a>

تو در تویی

با مخفف های تودرتویی (عجب معادل خفنی :دی = nesting abbreviations)، شما می توانید کل صفحه را با یک سطر کد بنویسید.

عملگر فرزند (child) که با < نشان داده می شود، به شما اجازه می دهد که عمل تو در تویی را انجام دهید.

عملگر برادر یا خواهر (sibling)، که با + نشان داده می شود، شما را کمک می کند تا دو المان را کنار یکدیگر قرار دهید، یعنی در level یکسان. عملگر بالا رفتن نیز که با ^ نمایش داده می شود، به شما کمک می کند تا از نمودار درختی بالا بروید.

گروه بندی

برای اینکه به خوبی از تودرتویی استفاده کنید، بدون اینکه آن ها را به یک اوضاع خرچنگ غورباقه بکشانید، شما نیازمند گروه بندی هستید. مثل ریاضی است، شما تنها نیاز دارید که از پرانتز حول آن قسمت خاص استفاده کنید. برای مثال (foo>h1)+(.bar>h2.) این خروجی را می دهد:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

تگ های ضمنی

برای تعریف یک تک با یک class، فقط div.item را تایپ کنید، برایتان این کد ساخته می شود: <div class="item"></div>

قبلاً، شما می توانستید برای div ، نام تگ را جا بیندازید، پس فقط کافی بود بنویسید item. تا برایتان <div class="item"></div> را بسازد. ولی الان Emmet باهوش تر شده است! هر دفعه که شما مخفف باز می کنید، به تگ parent یا والد نگاه می کند و تگ مربوطی را برایتان می سازد. بنابراین، اگر شما  item. را داخل <ul> تعریف کنید، برایتان این را می سازد: <li class="item"></li> به جای اینکه اشتباهاً این تگ را بنویسد: <div class="item"></div>. که به این هوشمندی، تگ ضمنی می گوییم.

اینجا برایتان چند تگ ضمنی می آوریم:

  •  li برای ul و ol
  •  tr برای table و tbody و thead و tfoot
  •  td برای tr
  •  option برای select و optgroup

تکثیر

شما می توانید مشخص کنید که چند بار یک المان ساخته شود، این کار را به وسیله ی عملگر * انجام می دهید. پس ul>li*3 این را می سازد:

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

شماره گذاری

حالا می خواهیم از تکثیر استفاده کنیم، به موازات شماره گذاری! به این شکل که هر المان یک شماره دارد، با عملگر $ این کار را می کنیم. $ را در نام المان، نام attribute و مقدار attribute می نویسیم، حاصل را ببینید. مثلا اگر ul>li.item$*3 را بنویسیم، این را می گیریم:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

همین حالا تستش کن!

چرا همین حالا نه؟ برو جلو، مخفف هایی که درباره ی HTML در زبان Emmet گفتیم رو بنویس، بعد Tab رو بزن!


ادامه دارد…