معرفی زبان فرانت اند به زبان ساده
معرفی زبان فرانت اند به زبان ساده
حتما تا به امروز کلمات بک اند (back end ) و فرانت اند ( front end ) را در دنیای برنامه نویسی زیاد شنیده باشید اما دقت چندانی به این دو کلمه نداشته اید و به راحتی از کنار این دو گذشته باشید. با این حال ما در مقاله معرفی زبان فرانت اند به زبان ساده فقط به مبحث فرانت خواهیم پرداخت و یکسری توضیحات اولیه درباره بک اند به شما خواهیم داد.
UI و UX چیست؟
قبل شروع به پاسخ سوالات فوق باید ابتدا ذهن شمارا برای درک بهتر آماده کنیم و با یک مثال به جلو میرویم. مطمعانا شما با فیلم های سینمایی آشنایی دارید و همان طور که میدانید یک فیلم شامل بازیگران و افراد پشت صحنه میباشند. حالا چرا با این مثاال شروع کردیم ؟ برای این که دقیقا طراحی سایت شامل بازیگران(طراحان ظاهرسایت) و افراد پشت پرده (بک اند کاران سایت) میباشد.
حالا ذهن شما اماده توضیح به سوالات فوق میباشد.
فرانت اند (front end ) چیست؟
همان طور که میدانید front به معنی (رو به رو – جلو و…) میباشد و دقیقا در برنامه نویسی های طراحی وب همین معنی را میدهند، چراکه فرانت اند کار کسی است که ظاهر یک سایت را کد نویسی میکند و کاربر میتواند کدهایش را در سیستم مشاهده کند. دقیقا مانند بازیگران یک فیلم که شما بازی آنهارا مشاهده میکنید.به معنی بهتر وقتی شما وارد یک سایت میشوید، با یک سری از عکس های ، نوشته ها و طرح های گرافیکی رو به رو میشوید که دقیقا همان چیزی است که برنامه نویسان سایت به آن front end یا طراحی سمت کاربر میگویند و این کار را فرانت اند کار انجام میدهد.
بک اند(back end ) چیست؟
در ابتدا ساخت یک فیلم را مثال زدیم. گفتیم که به افراد پشت ساخت یک فیلم ، افراد پشت پرده میگویند اما در طراحی سایت به افراد پشت پرده یک سایت بکند کار میگویند. اندکارها به طور مستقیم با سیستم در ارتباط نیستند و کدهایی که مینویسند را از طریق یک سرور به مرورگر کاربران ارسال میکنند. درواقع در این وسط یک سرور وجود دارد که برنامه نویس‌های بک اند، کدهایشان را از آن طریق روی سیستم کاربر می‌فرستند.
تفاوت فرانت اند و بک اند چیست؟
- در یک سایت تمام اطلاعاتی که یک کاربر میتواند مشاهده کند front end سایت و آن دسته از اطلاعاتی که پشت پرده یک سایت اتفاق می افتد و کاربر قادر به دیدن کد ها نیستback end یک سایت میگویند
- وظایفی مانند بهینه کردن یک سایت برای موتور های جست و جو ، سازگاری های اندازه صفحه (responsive) با شرایط های مختلف و… توسط فرانت اند کار انجام میشود
- کاربر کد های بکند را نمیتواند مشاهده کند و از چشم کاربر دور هستند. دقیقا مانند کارگردان ، تهیه کنندگان و… یک فیلم سینمایی عمل میکند. ذات بکند مخفی بودن است و شما قادر به دیدن آنها نیستید.
- زبان برنامه نویسی فرانت اند و بکند بسیار با یک دیگر متفاوت هستند. زبان های بک اند اطلاعات را از کاربر گرفته و عملیاتی مانند جست و جو ، مرتب سازی و… کرده و تحویل به زبان های فرات اند سایت میدهند تا برای کاربران قابل مشاهده باشند
همچنین پیشنهاد می کنیم از مقاله هاتجر Hotjar چیست نیر دیدن کنید.
زبان های برنامه نویسی فرانت چه زبان هایی هستند؟
زبان HTML
html مخفف (hyper text markup language) میباشد که یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری (زبان نشانه گذاری نه برنامه نویسی!) است که به عنوان هسته و بدنه اصلی صفحات وب به حساب می‌آید. html شامل تگ های متعددی میباشد که اساس این زبان را تشکیل میدهد.
کاربرد اصلی html
اچ تی ام ال ابزاری است با استفاده از تگ اقدام به ساخت اسکلت وب میکند یعنی اینکه شما با استفاده از زبان html میتوانید اسکلت اصلی وب را بسازید.
رابطهی html و css
شما با استفاده از html ساختار کلی وب را مشخص میکند و با css به آن جذابیت ظاهری میدهید.
Html 5 چیست؟ تفاوت آن با html
Html5 اخرین نسخه از html میباشد که کار را برای طراح های وب بسیار آسان کرده است و ویژگی های بسیار جدیدی دارد.
Html از کجا شروع میشود و به کجا ختم میشود؟
به مثال زیر توجه کنید
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
متن بین <html>,</html>صفحه وب را تعریف میکنند.متن میان <body>,<body/> محتوای قابل مشاهده متن است.
فرمت html چیست؟
فرمت فایل اچ تی ام ال html. است
زبان CSS
css مخفف عبارت (Cascading Style Sheets) است. یک زبان استایل دهی میباشد که به تگ های html خاصیت و زیبایی میبخشد . css طراحان سایت را قادر می‌سازد که بدون هیچ محدودیتی، خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند.
طرز نوشتن کد های css
برای نوشتن کد های css باید مفاهیم زیر را بدانیم
</> Value
</>Selector
</>Selector
هر کد css که شامل این سه تا قسمت است.به مثال زیر توجه کنید:
h1{
color:blue;
}
این دستور یعنی اینکه تمامی متن هایی که با تگ h1 نوشته میشود به رنگ آبی باشد.
Webkit چیست؟
موتور طراحی است که به مرورگر اجازه ی ارائه صفحات وب را میدهد که در مرورگر chrom,safari استفاده میشود.
Styleshet چیست؟
مجموعه ای از قوانین css است که به مرورگر میگوید چگونه tag html را نمایش دهد.
فرمت css چیست؟
فرمت فایل سی اس اس .cssاست.
سی اس اس نسخه های مختلفی دارد:
Css1
اولین نسخه cssکه توسط w3c معرفی شد css1 بود این نسخه در تاریخ ۱۷ دسامبر سال ۱۹۹۶ در دسترس افراد قرار گرفت.
ویژگی های css1
- شناسایی متمایز
- کلاس‌بندی عمومی گروهی از ویژگی‌ها (attributes)
- ایجاد حاشیه (Margin)
- لایه گذاری (Padding) و جای گذاری اکثر اجزا صفحه
- مرزبندی (Border)،
- تنظیم (Alignment) متن
- تخصیص رنگ، پس زمینه و عناصر دیگر به متن
- امکانات مختلف برای فونت
Css2
این نسخه از css از سایت w3c پیشنهاد نمیشود.
Css3
یک تحول بزرگ در تاریخچه ی css بود در این level سی اس اس اسناد (Document) زیادی به وجود آمدن که به هر کدام از آنها Module گفته می‌شد.
ماه ژوئن سال ۱۹۹۹ نسخه ی css3 در دسترس افراد قرار گرفت.
Css4
هیچ level از ویژگی های متحد شده css4 وجود ندارد چون این نسخه به ماژول های مختلف تقسیم شده است.
تا همین اواخر برنامه نویس ها کدهای html,css به صورت دستی وارد میکردند،اما امروزه ویرایشگر های زیادی برای نوشتن کدها وارد عرصه تکنولوژی شده اند که کار طراحان و کد نویس ها را آسان تر کرده است.
در این مقاله معرفی زبان فرانت اند قصد دارم که۱۱ تا از بهترین ویرایشگر های کدنویسی را به شما معرفی کنم.
۱-iWeb (Mac iLife bundle)
۲-CoffeeCup Free HTML Editor
۳-Microsoft Expression Web (windows)
۴-Komodo Edit
۵-Adobe Dreamweaver
۶-Flux (mac)
۷-Notepad++
۸-Bluefish
۹-notpad
۱۰-dream wiaver
۱۱- phpstorm
زبان جاوااسکریپت(javascript)
زبان برنامه نویسی جاوا اسکریپت در سمت کاربر پردازش میشود. برنامه نویس فرانت اند به کمک Javascript میتواند به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است بپردازد. با استفاده از جاوااسکریپت ما میتوانیم یک سایت داینامیک داشته باشیم. حال سوال پیش می آید که داینامیک چیست؟
با زبان های html , css میتوانیم یکسری اطلاعات را در باکس ها و عکس ها را به کاربر نمایش بدهیم و هیچ تعاملی با کابر نخواهیم داشت . به این نوع سایت ها ، سایت های استاتیک میگویند.اما وقتی از جاوا اسکریپت استفاده میکنیم ، میتوانیم با کاربر خود یک تعامل برقرار کنیم و یک سایت داینامیک داشته باشیم.
استفاده از کتاب خانه ها و فریم ورک های javaScript
جاوااسکریپت شامل چندین فریم ورک میباشد که امکانات بسیاری را در اختیار برنامه نویسان ساید قرار میدهد. از جمله فریم ورک های جاوا اسکریپت میتوان به { Vu.js، Reac ,Angular و … } اشاره کرد.
و همچنین استفاده از :
استفاده از کتابخانه‌های CSS مثل بوت استرپ (bootstarp )
استفاده از پردازنده‌های CSS مثل Sass یا Less
تا اینجای کار با زبان های برنامه نویسی front end اشنا شدید. اما در این قسمت به برنامه هایی که میتوانید در طراحی front end سایت استفاده کنید اشاره میکنیم
- فتوشاپ
- ایلوستریتور
- adob XD
تفاوت UI و UX چیست؟
تفاوت UI و UX در طراحی اپلیکیشن موضوعی است که بسیاری از طراحان و کاربران را درگیر خود کرده است. هنوز هم حتی بسیاری از طراحان و کاربران آنها را مثل هم می‌دانند و خیلی تفاوتی برایشان قائل نیستند. در حالی که هر کدام معنی و کاربرد متفاوتی نسبت به دیگری دارد. در تعریف UI آن را رابط کاربری و UX را تجربه کاربری معنی کرده‌اند
UI چیست؟
برای فهمیدن تفاوت UI و UX در طراحی اپلیکیشن بهتر است ابتدا UI یا رابط کاربری به طور ساده و قابل فهم معنی شود. رابط کاربری یک تجربه بصری است، یعنی آن چیزی که کاربر از طراحی شما خواهد دید. در واقع UI کار گرافیکی طراحی اپلیکیشن است و برای خلق آن طراح از برنامه‌های چون Photoshop یا Illustrator استفاده میکند. رابط کاربری هرچه زیباتر خلق شود، کاربر بیشتری را در ابتدا برای دانلود و استفاده از اپلیکیشن جذب میکند اما برای نگه داشتن کاربر هرچقدر هم رابط کاربری جذاب و زیبا خلق شود، ممکن است کافی نباشد.
UX چیست؟
پس از اینکه طراح اپلیکیشن از UI خوبی برای زیبایی بصری اپلیکیشن استفاده کرد، حالا باید کاری کند تا کاربر به اپلیکیشن وفادار بماند و آن را پس از مدتی از گوشی هوشمند خود حذف نکند. بنابراین در اینجا او باید اپلیکیشنی طراحی کند که کار با آن راحت باشد. پیچیدگی در پیدا کردن گزینه‌های موجود در اپلیکیشن نداشته باشد و بتواند به راحتی با آن کار کند. هرچه UX یا تجربه کاربری بهتر باشد، رضایتمندی و علاقه کاربر به اپلیکیشن بیشتر میشود و او علاقه بیشتری به استفاده از آن پیدا میکند و حتی استفاده از آن را به دوستان و آشنایان خود تبلیغ میکند.
جمع بندی مقاله معرفی زبان فرانت اند به زبان ساده
ما در این مقاله سعی کرده ایم که شمارا با مهارت های لازم یک فرانت کار حرفه ای آشنا کنیم و تفاوت های بکند کار و یک فرانت کار را به طور کامل پوشش بدهیم و همچنین درباره مهارت های ui و ux شمارا اشنا کردیم و تا حدی درباره هر یک از مهارت ها توضیحات لازم به شما داده شده است. حال نوبت شما میباشد که نوع برنامه نویسی خودتان را انتخاب کنید. میخواهید در چشم همگان باشید و یا در یکجای نامشخص؟
منابع Front End چیست
کتاب برنامه نویسی Clean Code
کتاب Release It
کتاب برنامه نویسی The Road To Learn React
https://fa.m.wikipedia.org
معرفی زبان فرانت اند به زبان ساده – Front End چیست
