سینا
سینا
خواندن ۸ دقیقه·۳ سال پیش

طراحی وب چیست؟ هرچی که باید در باره طراحی وب بدونید

@sinaprogrammer
@sinaprogrammer

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



طراحی وب چیست؟

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

فرانت اند چیست؟

به طور کلی طراحی وب به دو دسته فرانت اند (Frontend) و بک اند (Backend) تقسیم می شود. به بدنه و رابط کاربری یک سایت فرانت اند می گویند. یک طراح فرانت اند وظیفه طراحی بدنه و رابط کاربری وبسایت با زبان های طراحی وب مختلف مثل HTML، CSS، JavaScriptو... دارد. آن ها ابتدا تصویر ظاهری وبسایت را در نرم افزار هایی مانند Photoshop طراحی می کنند سپس با استفاده از زبان های مختلف طراحی وب، آن را پیاده سازی می کنند.

بک اند چیست؟

ما وقتی وارد یک وبسایت می شویم با فرانت اند وبسایت تعامل می کنیم. و اگر بخاهیم در آن وب سایت ثبت نام کنیم یا اینکه در آن سایت جستجو کنیم یا چیزی بخریم، دیگه فرانت اند برای انجام این کار ها کشش نمی کند و ما برای این کارها به زبان های برنامه نویسی سمت سرور مانند PHP، ASP.Net، Pythonو... نیاز داریم. زبان های برنامه نویسی سمت سرور وظیفه پردازش، محاسبات و انجام عملیات های مختلف روی داده ها را بر عهده دارد. فردی که با استفاده از زبان های سمت سرور برنامه نویسی وب را انجام می دهد توسعه دهنده بک اند (Backend) می گویند.

فول استک کیست؟

به کسی که هم به طراحی فرانت اند و هم به بک اند مسلط باشد، برنامه نویس فول استک می گویند. یک فول استک باید بتواند یک وبسایت را از صفر تا صد طراحی کند.


زبان های برنامه نویسی وب

زبان های برنامه نویسی تحت وب زیادی در دنیای بزرگ برنامه نویسی وجود دارد و ما در ادامه به این زبان ها می پردازیم.

زبان های برنامه نویسی فرانت اند

اول از همه به برسی زبان های طراحی وب فرانت اند میپردازیم.

اولین زبان دنیای وب، HTML

زبان HTML یا Hypertext Markup Language زبان اصلی طراحی وب است. شاید تا به حال شنیدی باشید که می گویند HTML یک زبان نشانه گذاری است و در اون موقع به فکر فرو می روید که چرا به HTML زبان نشانه گذاری می گویند؟ یا اینکه با خود بگویید اصلا زبان نشانه گذاری چیست؟ مگه HTML یک زبان برنامه نویسی نیست؟ چرا HTML یک زبان برنامه نویسی نیست؟ وظیفه اصلی این زبان، مشخص کردن ساختار کلی وبسایت است. به عنوان مثال شما می توانید با این زبان مشخص کنید که وبسایت شما یک بخش به عنوان سربرگ (header)، یک بخش به عنوان بخش محتوا و یک بخش به عنوان پا برگ (footer) دارد و به همین دلیل HTML یک زبان برنامه نویسی نیست و زبان نشانه گذاری است. البته این زبان نشانه گذاری توانایی استایل دهی به وبسایت ما را ندارد و برای این کار باید دست به دامن CSS شویم.

گوشت و پوست وبسایت شما، CSS

وقتی زبان HTML ارائه شد، هیچ کسی ازش انتظار طراحی یک وبسایت را نداشت (چون وبسایت اونقدر زشت میشه که هر کسی ببینتش فرار میکنه) و به همین دلیل، زبان CSS که مخفف Cascade Style Sheetsبرای استایل دهی به HTMLارائه شد. CSSدر واقع شکل و اندازه اسکلت وبسایت که با HTML ساخته شده را تعیین می کنه.

جاوا اسکریپت، زبانی همه فن حریف

زبان HTML قدرت اعتبارسنجی فرم‌ها، برقراری ارتباط با سرور و انجام برخی امور سمت کاربر و مواردی از این دست را ندارد. به همین خاطر در سال 1995 زبان JavaScript ارائه شد. جاوا اسکریپ به شما کمک می کند که بتوانید به عملکرد بخش های مختلف وبسایت کنترل داشته باشید و حالت و شرایط خاصی را برای قسمت های مختلف وبسایت پیاده سازی کنید. جاوا اسکریپ کتابخانه های زیادی دارد که می تونایم از آن ها به JQuery و React اشاره کنیم. البته با استفاده از این زبان محبوب می توانیم حتی سمت بک اند وبسایت خود را با node.js کد نویسی کنیم و با استفاده از react native با استفاده از جاوا اسکریپت، نرم افزار های اندروید و ios بسازیم.

زبان های برنامه نویسی بک اند

حال وقت آن است که با زبان هایی که وبسایت ما با آن ها پویا و کامل میشود را برسی کنیم.

زبان PHP، سلطان زبان های بک اند

قطعا پر استفاده ترین زبان برنامه نویسی برای طراحی بک اند، PHP است. زیرا 70% وبسایت ها در سراسر اینترنت با این زبان طراحی شده اند. دلیل محبوبیت این زبان بخاطر سادگی اش می توان باشد. البته با این که یادگیری این زبان برنامه نویسی راحت است، دلیل نمی شود که قدرتش هم کم باشد و PHP یکی از زبان های قدرتمند طراحی وب است. وردپرس، جوملا و دروپال که حتما اسم دست کم یکی آن ها را شنیده اید، معروف ترین سیستم های مدریت محتوا هستند که بر پای این زبان طراحی شده اند. همچنین در PHP میتوانیم از پایگاه داده MySQL استفاده کنیم که باعث افزایش امنیت اطلاعات میشود.

سرباز دلاور مایکروسافت، ASP.Net

چهارچوبASP.Net زبان تحت وب شرکت مایکروسافت است و مهمترین ویژگی این زبان این است که ما هیچ محدودیتی برای استفاده از یک زبان برنامه نویسی خاص نداریم. این زبان بسیار قدرتمند، در نرم افزار ویژوال استودیو پیاده سازی میشود و ما در این محیط میتوانیم از ابزار های بی نظیر آن استفاده کنیم.

جنگو، دست راست پایتون

پایتون یک زبان برنامه نویسی نو ظهور است که به دلیل سادگی و قدرتش بسیار مهبوب است. این زبان به تنهایی توانایی برنامه نویسی برای وب را ندارد و برای همین به یک دوست، یاور و یک دست راست نیاز دارد که این کار را برایش انجام بدهد، و این دوست جنگو است. جنگو یک چهارچوب طراحی وب است که با استفاده از زبان پایتون نوشته میشود. ویژگی این چهارچوب این است که اگر کسی زبان برنامه نویسی پایتون را بلد باشد، دیگر نیازی به یادگیری زبان جدیدی را ندارد.



فریم ورک چیست؟

فریم ورک در واقع یک چهار چوب برنامه نویس است که به برنامه نویس کمک می کند که در یک چهار چوب مشخص برنامه نویسی بکند. یکی از ویژگی های فریم ورک این است که باعث میشود برنامه نویس استاندارد کد نویسی کند، زیرا این فریم ورک ها توسط برنامه نویسان بسیار حرفه ای نوشته شده است. فریم ورک ها هم مثل زبان های برنامه نویسی وب به دو دسته front-end و back-end تقسیم میشوند. فریم ورک های front-end برای طراحی ظاهر وب استفاده میشود و فریم ورک های back-end برای کد نویسی سمت سرور به کمک طراح وب می آیند. هر فریم ورک برای یک زبان طراحی وب طراحی شده است. به عنوان مثال Bootstrap، Foundation و WS.CSS فریم ورک های CSS هستند، Angular.JS، JQuery، React و Vue.JS فریم ورک های جاوا اسکریپت هستند و لاراول فریم ورک PHP است.

معروف ترین فریم ورک CSS، بوت استرپ

بوت استرپ یکی از پر استفاده ترین فریم ورک های جهان است که نه تنها برای دستورات CSS است، بلکه شامل دستورات HTML و توابع جاوا اسکریپت هم هست. این فریم ورک از امکانات زیادی برخوردار است و از ویژگی های بزرگ این فریم ورک این است که قابلیت ریسپانسیو کردن وبسایت ها را دارد.

دشمن خونین بوت استرپ، Foundation

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

فریم ورک W3.CSS، ساده ولی قدرتمند

فریم ورک W3.CSS توست وبسایت معروف W3Schools.comایجاد شده و با اینکه ساده و دلپذیر است ولی مانند Bootstrapقدرتمند است و تمام قابلیت های آن را دارد. این فریم ورک هم مانند تمام فریم ورک های دیگر CSSاز قابلیت ریسپانسیو برخوردار است و اولویت او در نمایش حالت موبایل است. تنها فرق این فریم ورک با دیگر فریم ورک ها این است که فقط از CSS استفاده می کند و از فناوری های دیگر پشتیبانی نمی کند.

محبوب ترین فریم ورک جاوا اسکریپت، JQuery

جی کوئری محبوب ترین فریم ورک جاوا اسکریپت است. این فریم ورک بسیار سبک است و در همه مرورگر ها به صورت یکسان اجرا میشود. یکی از ویژگی های این فریم ورک که آن را بسیار محبوب کرده، افکت ها و انیمیشن های زیبایش است.

فریم ورک Angular.JS، قدرتمند و دلچسب

انگولار یک فریم ورک قدرتمند جاوا اسکریپت است که توسط شرکت بزرگ گوگل تولید شده است. این فریم ورک برای ساخت اپلیکیشن های تک صفحه ای مانند Gmail استفاده می شود. این فریم ورک به ما کمک می کند تا بتوانیم بدون بارگذاری مجدد صفحه، اطلاعات جدید را به سرعت به ما نمایش می دهد. این فریم ورک بیشتر در وبسایت هایی استفاده می شود که مانند وبسایت های بانکی و سهامی مدام نیازمند نمایش تغییرات هستند.

فریم ورک React، ساده ولی فوق العاده

ری اکت توسط شرکت فیسبوک طراحی شده است و برای اولین بار هم بر روی اینستاگرام که ساخت همین شرکت است استفاده شده است. هدف این فریم ورک ساده بودن است. این فریم روک مانند انگولار قابلیت نمایش اطلاعات جدید بدون بارگذاری مجدد صفحه را دارد.

فریم ورک Vue.JS، جامع ولی کم حجم

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

سلطان فریم ورک های PHP، لاراول

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


طراحی وب را از کجا یاد بگیریم؟

برای یادگیری طراحی وب راه ها و منابع آموزشی زیادی وجود دارد. برای شروع طراحی وب کافیست آموزش طراحی وب را در گوگل جست و جو کنید.

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