استارت‌آپ و کارآفرینی


طراحان: کدنویسی را با uilang شروع کنید

بوسیله امین ضیا 2

یادداشت سردبیر: طی مکاتباتی اجازه رسمی ترجمه دو مقاله از مقالات وب سایت smashingmagazine رو گرفته‌ایم. مقاله پیش رو اولین مطلب از این مجله است که توسط  آقای Benjamin De Cock نوشته شده است و ترجمه اون رو جناب امین ضیا به عهده گرفته اند. در این متن سعی شده است ترجمه تحت الفظی انجام نشود و بیشتر به زبان فصیح فارسی نزدیک‌تر باشد، اما کلیات متن همانند متن اصلی است و در کلیات آن مبحثی به آن اضافه نشده است.

اگر شما یک طراح رابط کابری باشید یاد گرفتن کد شاید برای شما طاقت فرسا باشد هم چنین اگر شما یک کدنویس هستید شاید یادگیری طراحی و تفکر طراحی برای شما سخت باشید ولی باید تعادل در هر دو نگه داشت. در این پست قصد داریم برای طراحانی که کد نمی‌دانند با زبان ادمیزاد کمی کدنویسی به زبان uilang یاد دهیم زبانی که کارها را ساده‌تر می‌کند و اگر کمی هم انگلیسی بدانید می‌توانید از همین فردا شروع به کدنویسی طرح های رابط کاربری خود کنید.

امروزه طراحان با HTML و CSS رابطه خوبی دارند و حداقل می‌توانند طرح‌های خود را به صورت استاتیک درآورند، ولی شاید سر جاوااسکریپت کمی عقب بکشند، چرا که جاوااسکریپت یک زبان واقعی برنامه‌نویسی است ولی HTML, CSS آنچنان هم ترسناک نیست و میتوان با آنها رابطه برقرار کرد. یادگرفتن جاوااسکریپت نه تنها خبر خوبی برای طراحان نیست بلکه اگر بخواهند آن را یاد بگیرند باید تفکر برنامه نویسی هم داشته باشند و ذهن خود را به سمت برنامه نویسی سوق دهند.

این امر واقعا طاقت فرساست تصور کنید از محیط های گرافیکی به زور به محیط های Command Line کشیده شده‌اید. تصورش هم برای طراحان سخت است. حال پروژه‌ای راه اندازی شده به نام زبان رابط کاربری (uilang) که این مشکل را برای کاربران حل می‌کند. در این پست با Syntax ها و فلسفه Uilang اشنا خواهید شد، با یک مثال ساده شروع می‌کنیم تا شما هم سر از کار uilang دربیاورید و در آخر شما قادر خواهید بود المان‌های زیادی را خودتان به کد تبدیل کنید.

پلی میان طراحان و توسعه دهندگان

به اعتقاد من همه طراحان باید خودشان طرح‌های خود را به کد تبدیل کنند. این به این معنی نیست که آنها کدنویسی کل وب سایت را خودشان انجام دهند و محصول نهایی را کد نویسی کنند اما باید برخی عملیات را در قسمت رابط کاربری خودشان انجام دهند. Uilang دقیقن مثل انگلیسی ساده ای است که همه جا می‌خوانیم و در HTML قرار می‌گیرد و گزینه‌های خیلی محدودی را در اختیار شما قرار می‌دهد تا پروسه یادگیری و وفق یافتن با آن هم ساده باشد هم سریع. اگر بتوانید خط زیر را بخوانید خبر خوبی برای شما داریم:

clicking on "button" toggles class "visible" on "div"

البته uilang را نمیتوان یک راه حل اصلی در نظر گرفت و باید بیشتر به عنوان یک تسهیل‌گر به آن نگاه کرد، برای مثال میتوانید Tab های وب سایت را خودتان بنویسید و یا یک گالری عکسی درست کنید کار می‌کند. خوب به نظر من وقت آن رسیده که دست به کار بشویم. uilang بر روی اصول خیلی ابتدایی و ساده‌ای پایه گزاری شده است:
دستکاری کلاس ها بر روی المان‌های مختلف. تنها با استفاده از اضافه و حذف کردن کلاس‌ها در CSS می‌توانیم به المان‌های مختلف عملیات مختلفی چون: پویا کردن، نشان دادن، پنهان کردن و چندین کار دیگر اعمال کنیم. این منطق ساده درِ جدیدی از امکانات برای شما باز می‌کند. برای مثال یک پیغام خطا را با هم بررسی می‌کنیم.

اول سراغ HTML آن برویم:

<div id="notification">
  <p>You have 3 unread messages.</p>
  <button class="hide">Hide</button>
</div>

سپس با استفاده از uilang یک ویژگی ساده را به کد اضافه می‌کنیم: زمانی که کاربر روی دکمه‌ای با کلاس hide کلیک میکند ما یک کلاس hidden به المانی که آیدی notification دارد اضافه می‌کنیم. این جمله ای که خواندید تقریبا با uilang یکی است و به صورت زیر نوشته میشود:

clicking on ".hide" adds class "hidden" on "#notification"

کد بالا را در المانی به نام <code> در فایل HTML خود جای دهید و uilang به صورت اتوماتیک تگ <code> را پیدا میکند و عملیاتی که درون آن نوشته‌اید را انجام خواهد داد و دیگر تگ‌های <code> را نادیده می‌گیرد. شگرد و معجزه کار زمانی اتفاق می‌افتد که این فایل یک کیلوبایتی را دانلود کنید و آن را به صفحه خود اضافه کنید.

از انجایی که در تئوری می‌توانید تگ های <code> و <script> در هر کجای صفحه که دوست دارید قرار دهید، پیشنهاد می‌شود آنها را در سطور آخر فایل خود درست قبل از بسته شدن تگ <body> بنویسید:

<body>
  <!-- Your content -->

  <script src="uilang.js"></script>

  <code>
    <!-- Your uilang code -->
  </code>
</body>

شما با رعایت کردن اصول بالا، درست کار کردن کد را تضمین می‌کنید و مطمئن می‌شوید که بهترین عملکرد را از کد شاهد خواهید بود. بنابراین خروجی اخر شما برای کد HTML به صورت زیر خواهد بود:

<body>
  <div id="notification">
    <p>You have 3 unread messages.</p>
    <button class="hide">Hide</button>
  </div>

  <script src="uilang.js"></script>

  <code>
    clicking on ".hide" adds class "hidden" on "#notification"
  </code>
</body>

خوب تقریبا کار ما اینجا تمام است، حالا که ما رفتار المان را تعریف کرده‌ایم وقت آن رسیده که با استفاده از CSS به بنر خود زمانیکه  کلاس hidden اعمال میشود کمی رنگ و بو ببخشیم:

#notification {
  transition: .8s
}
#notification.hidden {
  opacity: 0
}

خوب به شما تبریک می‌گوییم. شما حالا می‌دانید که چگونه کد نویسی کنید و رفتار المان‌های مختلف را کنترل کنید. شاید همین الان متوجه این اتفاق نشوید ولی با همین منطق ساده می‌توانید ویجت‌ها و المان‌های تعاملی زیادی بسازید. حالا وقت آن رسیده که نگاهی عمیق‌تر به Syntax زبان uilang داشته باشیم و بدانیم چه اتفاقی پشت این جملات می افتد.

Syntax ان میتواند به چهار قسمت تقسیم شود:

 

clicking on ".hide"(1) adds(2) class "hidden"(3) on "#notification"(4)

 

  1. هر انتخابگر CSS
  2. adds, removes or toggles
  3. اسم کلاس
  4. هر انتخابگر  CSS و یا المانی که روی آن تغییرات اعمال میشود.

 

این تمام چیزی بود که شما باید می‌دانستید. همیشه به یاد داشته باشید که uilang کد HTML است و همیشه میتوانید آن را کامنت کنید:

<code>
  <!-- I'm a comment -->
  clicking on ".hide" adds class "hidden" on "#notification"

  <!-- I'm another comment -->
  clicking on "li a:first-child" toggles class "active" on "target"
</code>

همیشه در نظر داشته باشید که uilang اتفاقات کلیکی را میتواند کنترل کند و اگر بخواهید از ویژگی Hover استفاده کنید میتوانید با CSS آن را انجام دهید البته عملیات دیگر از حوصله uilang خارج است و نمیتوان آنها را با uilang انجام داد. تا اینجا با پایه و اساس uilang اشنا شده‌ایم حال وقت آن رسیده که یک دموی پیچیده‌تر درست کنیم.

ما میخواهیم یک منوی جمع‌شو به همراه انیمیشن درست کنیم. چیزی شبیه منوی وب سایت اپل. شما می‌توانید این فایل دمو را از اینجا ببینید.

اول باید ساختار HTML صفحه خود را بنویسیم مانند نمونه کد زیر:

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

حالا زمان آن رسیده که از زبان uilang استفاده کنیم:

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

سپس  ما از کلاس open برای باز و بسته کردن nav استفاده خواهیم کرد. درست قبل از انجام دادن آن بیاید چند المان دیگر به HTML خود اضافه کنیم تا طرحمان تکمیل تر شود: یک متاتگ برای کاربران موبایل، فراخوانی فایل استایل و همچنین فراخوانی فایل uilang.js. حالا کل فالب HTML شما چیزی شبیه کد زیر خواهد بود:

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Explore menu</title>
<link rel="stylesheet" href="style.css">

<a class="explore" href="#">Explore</a>

<nav>
  <ul>
    <li>
      <a href="#"><img alt src="images/1.jpg">West Coast</a>
    <li>
      <a href="#"><img alt src="images/2.jpg">Venice</a>
    <li>
      <a href="#"><img alt src="images/3.jpg">Peyto Lake</a>
    <li>
      <a href="#"><img alt src="images/4.jpg">Iceland</a>
    <li>
      <a href="#"><img alt src="images/5.jpg">Golden Gate</a>
  </ul>
</nav>

<script src="uilang.js"></script>

<code>
  clicking on ".explore" toggles class "open" on "nav"
</code>

خوب به قسمت جالب ماجرا یعنی استایل دهی به المان‌ها رسیده‌‌ایم و اینجا جایی است که جادوی ما عمل میکند:

body {
  background: #f3f3f3;
}

.explore {
  /* Make sure the Explore link stays above the nav */
  position: absolute;
  z-index: 1;
}

nav {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

nav ul {
  /* Allow mobile-friendly horizontal scrolling when the browser isn't wide enough */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Force the thumbs to display in a row */
  white-space: nowrap;
  padding: 80px 40px 40px;
}

nav li {
  display: inline-block;
}

اگر بخواهیم حرکت منو انجام شود ، دو نکته مهم را باید در نظر داشته باشیم:

اول اینکه nav و عکس‌های کوچک باید به صورت پیشفرض پنهان باشند، این بدین معنی است که ما در اول باید تک nav را باز کنیم و nav و عکس‌ها را به صورت transparent دربیاوریم.

نکته دوم اینکه: زمانیکه کلاس open ما که در uilang نوشته‌ایم بر nav اعمال شد، باید برعکس دستور بالا عمل کنیم، باید nav را ببندیم و سپس همه‌ی محتوا را نشان دهیم.

راه اندازی نکته اول بسیار ساده است صرفا با استفاده از دستور translateY(-100%) منو را به بالا اسلاید می‌کنیم. opacity: 0; را صفر قرار میدهیم تا منو و عکس‌ها را پنهان کند و  زمانی کلاس ما اعمال شد با استفاد از transition ها این المان‌ها را به صورت انیمیشن در می‌آوریم:

nav, nav li {
  opacity: 0;
}

nav {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  transition: .4s;
}

nav li {
  transition: .3s;
}

خوب عملیات بالا مستقیم به uilang مرتبط نبود ولی از انجا که uilang برای اینکه بهترین کارایی را داشته باشد، وابستگی زیادی به قابلیت‌های animation و transition  سی‌اس‌اس دارد. برای این که این قسمت را بهتر یاد بگیریم همیشه باید این اصول را در ذهن داشته باشیم:

  • شما میتوانید به راحتی دو property را animate کنید، یکی opacity و دیگری transform. این دو را همیشه به خاطر داشته باشید.
  • زمانیکه تنها مدت زمان در transition کنترل می‌شود، تمامی Property هایی که ممکن است در آینده تغییر کند animate خواهند شد و توسط دستور ease مدت زمان آن را کنترل می‌کنیم.
  • انیمیشن‌های خود را سرعت ببخشید، انیمیشن‌ها بسیار مهم هستند چرا که به کاربر این اجازه را می‌دهند که فرق میان دو اتفاق و یا دو عملیات را ببینند، اما نباید هیچوقت برای شما مشکل ایجاد کنند. یک اندازه خوب برای مدت زمان اتفاق افتادن یک انیمیشن از ۲۰۰ تا ۸۰۰ میلی ثانیه است.
  • تا زمانیکه کلیدواژه های easing در همه جا در دسترس است، ابزارهای زیادی وجود دارند که به شما کمک می‌کنند خمیدگی مناسب را پیدا کنید مانند این لینک.
  • مثالی که در این مقاله آن را بررسی می‌کنیم از Transition CSS استفاده می‌کند، اما شما می‌توانید در هر کجا که نیاز داشتید از animation استفاده کنید. دقیقن همان کارها را انجام خواهید داد ولی شاید keyfram های موجود در animation ها گزینه‌ی بهتری برای کنترل کد شما باشند.

حالا که ما موقعیت پیش فرض منوی خود را آماده کرده‌ایم نوبت آن رسیده که وضعیت open خود را به حالت اولیه برگردانیم. این به این معنی است که کلاس open را به صورت برعکس گام اول دربیاوریم:

 

nav.open, nav.open li {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

nav.open li {
  /* Wait for the nav to slide down a bit before starting the animation on the thumbs */
  transition-delay: .3s;
}

بله، تبریک میگوییم. شما حالا یک منوی کاملا کارا دارید. چند چیز کوچک شاید یادمان رفته مثل animate کردن عکس‌ها، اگر این کار را نیز انجام دهیم کار فوق العاده‌ای خواهد بود. نگاهی به دموی اصلی بیاندازید اگر دقت کرده باشید عکس‌ها نه تنها هنگام نمایش داده شدن fade-in می‌شوند بلکه کمی هم بزرگتر می‌شوند. اگر موافق باشید آن ویژگی را هم به عکس‌ها اضافه کنیم و کمی بزرگترشان کنیم:

nav li {
  -webkit-transform: scale(.8);
  transform: scale(.8);
}

خوب تا اینجای کار ما تقریبا کار خود را انجام داده ایم اما یک چیز کوچک نیز باقی مانده است، آن هم تغییر دادن آیکون هنگام کلیلک بر روی Explore است. یعنی زمانی که منو باز یا بسته میشود. برای این که آن کار را انجام دهیم باید یک دستور جدید در زبان uilang بنویسیم آن هم بدین گونه خواهد بود. ما در دستور قبلی کدی مبنی بر باز و بسته کردن منو نوشته بودیم و حالا باید کاری مشابه برای لینک انجام دهیم:

<code>
  clicking on ".explore" toggles class "close" on "target"
  clicking on ".explore" toggles class "open" on "nav"
</code>

اینجا  target نشان‌دهنده‌ی المانی است که رو آن کلیک شده است.در اینجا شما می‌توانستید به جای استفاده از target دوباره از explore استفاده کنید. خوب برگردیم سر CSS، قرار است در اینجا برای نشان دادن آیکون‌ها از المان های pseudo استفاده کنیم. 

.explore::before

  قرار است آیکون گرید ما را نشان دهد (زمانی نشان داده خواهد شد که منو بسته شده باشد) 

.explore::after

  هم باعث ایجاد یک دکمه بسته شدن روی منو خواهد شد و هر دو از transition-duration سود خواهند برد:

.explore::before, .explore::after {
  content: "";
  position: absolute;
  left: 0;
  transition: .25s;
}

.explore::before {
  background: url(grid.svg);
}

.explore::after {
  background: url(close.svg);
  /* Hidden and scaled up by default */
  opacity: 0;
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
}

گرید در این حالت قابل مشاهده است، ولی دکمه بستن هنوز قابل مشاهده نیست ولی در جای خود قرار دارد و آماده fade-in است فقط کافی است کسی روی explore کلیک کند. کار ما این است که این پروسه را برعکس کنیم و زمانیکه کلاس close در زبان uilang ما مشخص شده است بر روی .explore اعمال شود:

/* When the nav is open, hide and rotate the grid icon… */
.explore.close::before {
  opacity: 0;
  -webkit-transform: rotate(45deg) scale(.8);
  transform: rotate(45deg) scale(.8);
}

/* … and display the close icon */
.explore.close::after {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

خوب همین بود. ما با استفاده از چند خط CSS و دو خط از زبان uilang یک منو با قابلیت‌های زیبا درست کرده‌ایم. نکته مهم اینجاست که شاید کد uilang شما در نسخه آخر وب سایت استفاده نشود ولی کدهای CSS شما کاملا اصولی بوده و در نسخه آخر میتوان آنها را استفاده کنند. مزیتی که این زبان دارد این است که به شما اجازه می‌دهد کد HTML CSS را خودتان بنویسید ولی ابزارهای موجود به شما این اجازه را نمی‌دهد و شما خارج از HTML CSS یک نسخه اولیه می‌سازید که اصلا کار نمی‌کند و باعث می‌شود یک توسعه دهنده دیگر کدهای CSS را بنویسد و دوباره کاری شود ولی حالا شما یک طراح هستید که کدهای HTML CSS طرح خود را خودتان می‌نویسید و دیگر نیاز به فرد دیگری نیست که طرح شما را تبدیل به کد کند. همیشه جزئیات در کد گم می‌شود ولی با استفاده از این زبان شما به توسعه دهنده اصلی کمک می‌کنید تا از فایل استایل شما دوباره استفاده کند و در جاوااسکریپت کارهایی که شما با uilang کرده‌اید را منطقی‌تر ادامه دهد.

خوب آموزش ما تمام شده است ولی از آنجایی که مبحثی که مطرح کرده‌ایم بسیار شیرین و کاراست اجازه دهید این مقاله را با یک ترفند جالب CSS تمام کنیم و حسن ختام این مقاله یک آموزش جالب و کوچک باشد. آیکون گرید و خروجی که ما در بالا از ان استفاده کرده‌ایم در واقع خیلی ساده هستند و استفاده از یک عکس برای انجام چنین کاری شاید امروزه یک کار اشتباه باشد زمانیکه به سادگی میتوانیم با CSS آن ها را طراحی کنیم.

آیکون گرید جالب ترین آنهاست. شاید در اول بسیار ابتدایی به نظر برسد ولی ما با استفاده از Gradient‌ها آن را ایجاد می‌کنیم. جریان کار اینگونه است که ما هر ۹ مربع را به صورت یک Gradient که از رنگ سیاه به رنگ سیاه میل می‌کند را درست می‌کنیم. زمانیکه شما یک Gradient با CSS می‌نویسید، اینگونه است که شما یک عکس را در به صورت مجازی درست کرده‌اید سپس در هر کجا که می‌خواهید، می‌توانید مکان و اندازه آن را تغییر دهید و از آن استفاده کنید.

grid-icon-info-details-opt

حالا به زبان CSS حرف بزنیم:

.explore::before {
  width: 13px;
  height: 13px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 0 0, 50% 0, 100% 0,
                       ۰ ۵۰%, ۵۰% ۵۰%, ۱۰۰% ۵۰%,
                       ۰ ۱۰۰%, ۵۰% ۱۰۰%, ۱۰۰% ۱۰۰%;
  background-repeat: no-repeat;
  background-size: 3px 3px;
}

این کار از آنجایی که به شدت دیوانگی و سخت به نظر می آید ولی در نظر داشته باشید که ما فقط به خاطر جالب بودن این کار آن را انجام می‌دهیم، همچین نکته‌ای نیز در این جالب بودن داریم، آن هم این است که با این کار یک درخواست از HTTP کمتر خواهد شد و این به این معنی است که ما سرعت بیشتر در بارگزاری صفحات داریم.

آیکون خروج هم بسیار ساده است اما چند نکته وجود دارد که شما بهترین بازده را از ان بگیرید. ما تقریبا از روش قبلی استفاده می‌کنیم یعنی Gradient ای می‌سازیم که از سیاه به سیاه میل کند و شبیه یک علامت + باشد سپس آن را کمی کج می‌کنیم تا شبیه یک علامت ضربدر یا همان خروج باشد و کار ما تمام است:

.explore::after {
  width: 11px;
  height: 11px;
  background-image: linear-gradient(#000, #000),
                    linear-gradient(#000, #000);
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 1px;
  -webkit-transform: rotate(45deg) scale(1.4);
  transform: rotate(45deg) scale(1.4);
}

همانگونه که خود شما هم دیدید این آموزش بیشتر آموزش CSS بود تا Uilang، اما CSS واقعا یک زبان قوی برای درست کردن نمونه‌های اولیه از وب سایت هاست. uilang هم سعی می‌کند به صورت مخفی در محیط کاری شما قرار گیرد و بعضی از رفتارهای المان‌های وبسایت شما را کنترل کند.

امین ضیا
ممکن است شما دوست داشته باشید بیشتر از نویسنده
2 نظرات
  1. محمد صالح سوزنچی می گوید

    مفید و عالی
    سپاس

    پاسخ
  2. آرمیشا می گوید

    این مطلب بسیار عالی ، کاربردی و سودمند بود . از شما بی نهایت سپسگزاریم بابت انتشار این مطلب 🙂

    پاسخ

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.