آشنایی با طراحی رابط کاربری و یا FRONT-END

در این جا سعی می کنیم به بخش های آموزش طراحی رابط کاربری و یا آنچه کاربر مشاهده خواهد کرد بپردازیم . قطعا تا الان به سایتی برخورد کرده اید که از گشت . گذار داخل صفحاتش لذت ببرید و در کنار استفاده از امکانات آن، فضای دلنشین و کاربرپسندش باعث شود آن را به رقبا ترجیح بدهید. اگر به این فکر افتاده اید که روزی سایت دلخواه خودتان را طراحی کنید، مطلب زیر می تواند به شما در این راه کمک کند.
با یک تعریف ساده شروع می کنیم: اینکه مطالب سایت چه طور کنار هم چیده شده اند، عکس ها و دکمه ها چگونه و با چه افکت های در سایت قرار گرفته اند، همه مربوط به  user interface) UI)، یعنی رابط کاربری سایت است.

بعد از طراحی های اولیه ظاهر سایت ( با نرم افزاری مثل فوتوشاپ )، برای پیاده سازی طرح، نیاز به برنامه نویسی Front-End دارید.
زبان های اصلی برنامه نویسی این حوزه  HTML، CSS  و JavaScript هستند که درمرورگر کاربر اجرا می شوند، برعکس زبان های Back-End  که در سمت سرور اجرا می شوند و خروجی آنها به سمت مرورگر کاربر ارسال می شوند. می توانید به آن مثل یک شهر فکر کنید که برنامه نویس های Back-End آن مهندسانی هستند که سیستم شهر را راه انداخته اند مثل برق، آب، منطقه بندی و غیره، و برنامه نویس های Front-End آن جدول کشی ها، پارک ها و ظاهر شهر را پیاده می کنند.
مهارت هایی که کارفرمایان از یک Front End Developer انتظار دارند:

  HTML، CSS

 این دو، پایه ای ترین زبان ها برای ساختن صفحات وب هستند. برای شروع برنامه نویسی وب حتما در این دو زبان مهارت کافی کسب کنید و خبر خوب اینکه آشنایی با هر کدام از این زبان ها در چند هفته ممکن است و بعد از آن شما می توانید صفحات ساده وب بسازید.

JavaScript

جاوا اسکریپت به شما اجازه می دهد قابلیت های زیادی به وب سایت خود اضافه کنید، حتی می توانید فقط با استفاده از html  ، css و جاوا اسکریپت، سایت استاتیک بسازید.
در ساده ترین حالت، می توانید با جاوا اسکریپت، المان های تعامل پذیر به وبسایت خود اضافه کنید، مثل نقشه ای که در لحظه به روز شود، اسلایدشو یا ساختن یک بازی آنلاین.  بیشتر افکت هایی که در سایت های مختلف می بینید با این زبان نوشته شده اند.
به طور مثال سایت Pinterest از این زبان برای ساده تر کردن رابط کاربری خود استفاده می کند، به همین دلیل بعد از هر بار  Pinکردن مطلب از طرف کاربر، صفحه لود نمی شود.
همچنین جاوا اسکریپت معروفترین زبان برنامه نویسی جهان است و صرف نظر از شغل شما، یادگیری آن خالی از لطف نیست.

jQuery

یک کتابخانه از جاوا اسکریپت است، شامل پلاگین ها و افزونه های متنوع که برنامه نویسی با جاوا اسکریپت را سریع تر و راحت تر می سازد. مزیت استفاده از jquery این است که برای اضافه کردن بسیاری از امکانات به سایت خود، نیازی نیست از ابتدا کد بزنید. عناصر آماده ی زیادی هستند که می توانید متناسب با پروژه ی خود از آن ها استفاده کنید. مثل باکس سرچ با قابلیت تکمیل خودکار یا تایمر شمارش معکوس و ...

JavaScript Frameworks

فریم ورک های جاوا اسکریپت (JS)  شامل AngularJS, Backbone, Ember و  ReactJS ساختاری آماده به کد JS شما می دهند. فریم ورک های مختلفی متناسب نیاز های یک برنامه نویس وجود دارند که 4 فریم ورک نام برده معروفترین آن ها در دنیا هستند. استفاده از این فریم ورک ها سرعت توسعه برنامه شما را تا حد زیادی بالا می برند و می توانند به همراه کتابخانه هایی مثل jquery استفاده شوند و میزان برنامه نویسی شما را نیز کاهش دهند.

Front End Frameworks

فریم ورک های css  و front end  که معروفترین آن Bootstrap است، با استفاده از کد های از پیش آماده ای که دارند به شما اجازه می دهند تا سریعتر کد بزنید. از آن جایی که بیشتر پروژه ها برای شروع کار خود با css از کدهای شبیه به هم استفاده می کنند، فریم ورک، این کدها را از قبل تعریف می کند و برنامه نویسان در صورت نیاز تغییرات خود را روی آن اعمال می کنند.
از یک Front End Developer انتظار می رود با این فریم ورک ها آشنایی داشته و نحوه استفاده از آن ها را بداند.

Css Preprocessors

استفاده از پیش پردازنده ها راه دیگری برای سرعت بخشیدن به برنامه نویسی با زبان Css است. پیش پردازنده ها قابلیت هایی به css اضافه می کنند که کار را با css راحت تر کرده و کد ها را مقیاس پذیر می کنند.
پیش پردازنده ها قبل از انتشار سایت اجرا می شوند و خروجی آن ها کد css با فرمت استاندارد و قابل اجرا در همه ی مرورگرها است.
Sass  و Less از معروفترین پیش پردازنده ها هستند.

Responsive and Mobile Design

در چند سال اخیر با ورود گوشی های هوشند به بازار، بسیاری از کاربران با گوشی خود به اینترنت متصل می شوند و جای هیچ تعجبی نیست که طراحی responsive برای کارفرمایان بسیار مهم است.
طراحی responsive یعنی طراحی صفحه و بعضا مطالب و کارکردهای سایت، متناسب با سایز دستگاه کاربر، تغییر کند.
به طور مثال؛ وقتی سایتی با کامپیوتر رومیزی با یک مانیتور بزرگ دیده شود، کاربر چندین ستون، عکس های بزرگ و تعامل هایی که مشخصا برای ماوس و کیبورد نوشته شده اند، می بیند. همان سایت وقتی در موبایل دیده می شود، تک ستون است و تعامل های آن با لمس صفحه تنظیم شده اند، در حالی که هر دو از فایل های یکسانی استفاده می کنند و اجرا می شوند.
گاهی اوقات شما می خواهید کاربر تجربه ای که در نسخه دسکتاپ سایت شما دارد با آن چیزی که در گوشی هوشمند خود می بیند کاملا متفاوت باشد، در این موارد بهتر است نسخه موبایل را جدا کنید.

Cross-Browser Development

همانطور که گفتیم کدهای Front End در سمت کاربر (مرورگر) اجرا می شوند و به همین دلیل اجرا شدن این کدها به مرورگری که کاربر استفاده می کند و ورژن آن بستگی دارد، که این موضوع یکی از چالش های برنامه نویسی Front End است.
مرورگرهای جدید پیشرفت های خوبی برای نمایش یکسان سایت ها داشته اند، اما هنوز هم نحوه ی تفسیر کد، در پشت صحنه آن ها متفاوت است. تا زمانی که همه ی مرورگرهای مدرن با استاندارهای وب سازگاری داشته باشند و خروجی های یکسانی نمایش دهند، شناختن تفاوت هایشان برای یک توسعه دهنده رابط کاربری ضروری است. هدف Cross-Browser Development نمایش خروجی دلخواه در همه ی مرورگرها است.

Content Management Systems  و E-commerce Platforms

بیشتر سایت ها با استفاده از CMS  ها (سیستم های مدیریت محتوا) ساخته شده اند که فروشگاه ساز ها نوع خاصی از CMS ها هستند. معروفترین CMS در دنیا WordPress است، که میلیون ها سایت با آن نوشته شده اند. تقریبا ۶۰ درصد از سایت هایی که با CMS نوشته شده اند از WordPress استفاده می کنند.
دیگر CMS های معروف شامل Joomla ، Drupal و Magento هستند.
عموما برای استفاده از سیستم های مدیریت محتوا نیازی به دانش برنامه نویسی ندارید اما برای سفارشی سازی آن ها و رسیدن به نتیجه مطلوب تر، به برنامه نویسی Front End نیاز خواهید داشت.