دنیای طراحی‌وب و توسعه‌وب


نویسنده : عرفان مولا
موضوع : طراحی وب
زمان انتشار : ۱ ماه پیش

سلام امیدوارم که حالتون خوب باشه، امروز تصمیم گرفتم که با یک مقاله مفید دیگه در خدمتتون باشم، قبلا وارد دنیای گنو/لینوکس شدیم و ازش صحبت کردیم، این‌بار تصمیم گرفتم [...]
دنیای طراحی‌وب و توسعه‌وب

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

قبل اینکه مقاله رو شروع کنم باید خدمتتون عرض کنم که این مقاله شماره ۱ در این موضوع هستش و قراره تا شماره ۳ پیش بریم، فعلا توی این شماره قراره بصورت عمومی و کلی صحبت کنیم و بعدش توی شماره ۲ بصورت تخصصی‌تر به طراحی‌وب و در شماره ۳ هم بصورت عمیق‌تر به توسعه‌وب می‌پردازیم و زبان‌ها و … هارو معرفی و مقایسه می‌کنیم

همچنین یک مقاله شماره صفر هم بعد از این منتشر می‌کنم و بجای مفهوم وب، کلا درمورد مفهوم اینترنت و مباحث پایه‌تر و جالب‌تر صحبت می‌کنیم (:

وب چی هستش ؟

وب، قسمتی از اینترنت جهانی هستش که در اون، بصورت عمومی از طریق پروتکل های http محور، از یک کامپیوتر مرکزی که سرور نامیده میشه، به یک دستگاه دیگه‌ای که از نرم‌افزاری به‌نام مرورگر(Browser) استفاده می‌کنه، میشه داده (Data) انتقال داد

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

مرورگر‌ها چی هستند ؟

مرورگر‌ها نرم‌افزاری هستند که می‌تونند یکسری کد Markup (کد هایی با ساختار مشخص) رو بخونند، تفسیر کنند و در نهایت برای شما بصورت یک صفحه‌وب بصری رندر(Render) کنند و نمایش بدند

مثلا وقتی توی آدرس‌بار مرورگرتون می‌زنید Google.com ، مرورگر شما نمیره از گوگل عکس بگیره بیاره براتون نشون بده، بلکه از طریق اینترنت، با استفاده از پروتکل http یک درخواست به سرور گوگل میفرسته و محتویات (کد های markup) گوگل رو میگیره و تفسیر میکنه که چه اجزایی داره (مثلا عکس داره و فیلم داره و لینک داره)، بعدش رندر می‌کنه (مثلا فلان عکس باید توی این صفحه توی کدوم مختصات قرار بگیره، یا فلان لینک چه رنگی باشه و فونتش چی باشه و …)، بعدش محتوای رندر شده رو به شما نشون میده

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

HTML چی هستش ؟

عبارت HTML مخفف شده‌ Hyper Text Markup Language هستش، به فارسی بخواهیم بگیم میشه “زبان نشانه‌گذاری اَبَر متن” که خب یکم مرسوم نیستش همچین کلماتی توی فارسی (: ،‌ بصورت خیلی ساده بخوام بگم، یک زبان نشانه‌گذاری هستش، یعنی چی ؟ یعنی اینکه شما یک ساختار ثابت و مشخص دارید و در قالب اون ساختار می‌تونید محتوای اَبَر متن تولید کنید، یعنی با نوشتن یک‌سری متن در ساختار مشخص، محتوایی رو تولید کنید که فقط متن نباشه، اَبَر متن باشه و بتونه عکس و دکمه و لینک و … داشته باشه (:

اگه با نرم‌افزار هایی مثل Microsoft Word کار کرده باشید می‌تونید فرق بین متن معمولی و متن‌غنی (Rich Text) رو درک کنید، متن در حالت عادی، متن معمولی هستش ولی کافیه بهش خصوصیت Bold بدید یا Italic اش کنید و بهش لینک بدید، یا مثلا بین متن‌تون عکس قرار بدید، در این حالت هستش که دیگه متن از حالت متنی بودنش در میاد و تبدیل میشه به متن‌غنی، میشه گفت متن‌غنی یه نوعی از همون اَبَر متن هستش که درموردش صحبت کردیم

پس حالا می‌تونید درک کنید که Hyper Text Markup Language یا HTML ، یک زبان نشانه‌گذاری هستش، یک زبانی که با نوشتن متن در یک ساختار مشخص، اون رو تبدیل می‌کنیم به اَبَر متن، محتوایی غیر از متن، مثلا من میگم که این متن خاصیت لینک داشته باشه، در نتیجه بهش یک خصوصیت لینک میدم که مرورگر شما وقتی اینو خوند، بدونه که این آیتم باید قابل کلیک باشه و شمارو منتقل کنه به یک صفحه دیگه (مثلا)، اینجا جادویی اتفاق نمیوفته بلکه فقط من متنم رو Markup می‌کنم و یکم گریم‌اش می‌کنم که غنی‌تر بشه و از حالت معمولی بودن متن دربیاد

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

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

CSS چی هستش ؟

عبارت CSS مخفف شده Cascading Style Sheet هستش، به فارسی بخواهیم بگیم میشه “ورقه استایل‌‌های آبشاری”، خب می‌دونم یکم عجیب هستش و حتی خود منم ارتباط چندانی بین اسم و کاربردش نمی‌بینم، ولی در کل کاربردش در این هستش که ما به صفحه وب‌مون که با HTML اومدیم و ساختارشو مشخص کردیم، استایل بدیم

بتونیم مشخص کنیم که هر آیتم توی صفحه باید چه خصوصیت های بصری داشته باشه، مثلا رنگ متنش چی باشه، فونتش چی باشه، چه اندازه‌ای باشه، توی کدوم مختصات از صفحه قرار بگیره و …

در مثال اون اجزای بدن که بهتون گفتم، ما گفته بودیم که یه صورت میخواهیم و دوتا دست و …، ولی خب نگفته بودیم که به چه شکلی سرهم بشن (: ، اینجا هم توی CSS ما مشخص می‌کنیم که به چه شکلی باشند و چه اندازه‌ای باشند و مختصات و محل قرار‌گیر‌ی‌شون به چه شکلی باشه، به همین راحتی

یا توی مثال خود همین صفحه، این صفحه متشکل از یکسری عنوان و یکسری پاراگراف هستش و یک‌دونه عکس، این قرطی‌بازی هایی که می‌بینید مثلا متن‌های پاراگراف داخل یه باکسی قرار گرفتند و رنگ باکس سفید هستش و سایه داره و …، همه‌شون با استایل های CSS پیاده‌سازی شدند،‌ وگرنه بصورت HTML خام بخواهید ببینید همه تصور خوبتون از سایت بهم میریزه (: ، پس این CSS هستش که به وبسایت ما ظاهر و شکل میده

JS چی هستش ؟

درمورد JS توی مقاله قبلی که درمورد مقایسه JS با ES بود، صحبت کردیم و بصورت کافی توضیح دادیم، ولی توضیحاتی که دادیم بدرد یک مبتدی نمیخوره و باز هم اون شیوه توضیح کلاسیک‌مون رو پیش می‌بریم (:

عبارت JS مخفف شده Javascript هستش، به فارسی هم میشه همون “جاوا اسکریپت”، یک زبان برنامه‌نویسی (اسکریپت‌نویسی عبارت بهتری هست) برای صفحات وب هستش، یعنی اینکه ما یکسری کد هایی بنویسیم که توی مرورگر کاربر اجرا بشه

ببینید، گیج نشید ! تا اینجای کار ما فقط فهمیدیم که میتونیم یکسری متن رو توی یک ساختار مشخص با یک فرمت مشخص بنویسیم و وقتی با مرورگر باز میکنیم، مرورگر برامون یکسری ایتم های بصری نمایش بده، مثلا یه متن نشون بده و یه دکمه نشون بده، بعدش بتونیم به دکمه و متن رنگ و لعاب بدیم و بگیم که کجاها قرار میگیره، خب ؟

خب، مبارکمون باشه، الان یه دکمه خوشگل داریم ولی وقتی کاربر توی مرورگر روی اون دکمه کلیک کرد چه اتفاقی میوفته ؟ اممم، هیچ اتفاقی !

اینجاست که برنامه‌نویسی (اسکریپت‌نویسی) به‌کار ما میاد و ما می‌تونیم برنامه‌نویسی کنیم و بگیم که مثلا وقتی روی اون دکمه خوشگله که طراحی کردیم کلیک شد، چه اتفاقی بیوفته، مثلا وقتی کلیک کردیم صفحه برامون یه پیغام بده که چطوری خوشگل عمو، یا کلی کار های باحال دیگه که میشه انجام داد

منطقا ایده اسکریپت‌نویسی این نیست که فقط باهاش پیام نشون بدیم و …، کاربرد های خیلی گسترده‌تری داره و می‌تونید طبق رویداد ها و اتفاقاتی که کاربر انجام میده، یا درون مرورگر اتفاق میوفته، کار های مختلفی بکنید و اصلا بیاید و همون HTML و CSS صفحه رو هم تغییر بدید (:

پایه طراحی وب

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

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

بعد از CSS هم احتمالا می‌تونید برید سراغ JS که بتونید به صفحات وبی که طراحی می‌کنید، عملکرد ببخشید و کارآمد تر بکنید، پس این JS هستش که به صفحه قابلیت کنترل‌رویداد و اعمال تغییرات از طریق کدنویسی میده

پایه توسعه وب

تا اینجای کار درمورد طراحی وب صحبت کردیم و اینکه یک صفحه وبی که شما می‌بینید، چه اجزایی داره و از چه اصولی تشکیل شده، ولی سوالی که پیش میاد اینه که آیا ما باید برای هر صفحه وبی که میخواهیم، از پایه بشینیم و HTML و CSS و JS بنویسیم بصورت دستی و محتوا رو عوض کنیم ؟ وقتی ما یه سرچی میزنیم توی گوگل، آیا یکی اونجا نشسته و داره برای ما صفحه طراحی میکنه و نشون میده ؟ ((((:

خب قطعا نه ! اینجاست که قدرت برنامه‌نویسی خودش رو نشون میده، شما با استفاده از برنامه‌نویسی می‌تونید به سیستم دستور بدید که مثلا فلان کار رو بکنه، مثلا می‌تونید محتویات ار مطلب رو درون یک پایگاه‌داده (Database) قرار بدید و با استفاده از برنامه‌نویسی بگید که سیستم براتون بخونه و داخل ساختار HTML تون قرار بده، به همین شیرینی (:

البته این اتفاقات قطعا سمت سرور اتفاق میوفته و نیاز به برنامه‌نویسی سمت سرور داره، نمونه‌های دیگه‌ای از وب‌اپلیکیشن‌ها هم هستند مثل SPA و PWA ها که بعدا درموردشون صحبت می‌کنیم، ولی ایده کلی سایت های پویا (Dynamic) به همین شکل هستش

یا هم اینکه می‌تونید از سیستم های مدیریت محتوا (CMS) مثل وردپرس استفاده کنید و اگه نمی‌دونید وردپرس چی هست، اینجا درمورد وردپرس کلی صحبت کردیم و توضیح دادیم، می‌تونید بخونید

خب بعدش چی ؟

بعد از اینکه HTML و CSS و JS رو یاد گرفتید و با یک زبان یا CMS سمت سرور کار کردید، اینجا می‌تونید تصمیم بگیرید که دوست دارید بیشتر طراحی‌وب انجام بدید یا برنامه‌نویسی وب، بعدش می‌تونید مشخص کنید که دوست‌دارید روی کدوم حوزه بیشتر وقت‌بزارید

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

طراح وب کی هست ؟ (فرانت‌اند | Front-End)

طراح وب کسی هستش که قسمت ظاهری وبسایت رو که شامل HTML و CSS و JS هستش رو طراحی میکنه، کاری به بخش سمت سرور و محتوای وبسایت و … نداره و صرفا ظاهر وبسایت رو طراحی میکنه

طراح‌وب باید اول روی HTML و CSS و JS تسلط کامل پیدا بکنه، منظور از تسلط این نیست که دو سه تا تگ از این بلد باشه و سه چهار تا استایل از اون یکی و یکی دوتا هم فانکشن از این یکی، منظور اینه که باید از پایه تا انتهای HTML5 و CSS3 رو بلد باشه و همچنین در حد حرفه‌ای با JS کار کرده باشه که بتونه خودش در حد نیازش کتابخونه‌ها و فریمورک‌های CSS و JS توسعه بده (:

بعدش هم باید با فریمورک‌ها و کتابخونه‌های سمت کلاینت مثل Jquery و ReactJS و Vue.js و Angular و … کار بکنه، همچنین از فریمورک های ظاهری هم مثل Bootstrap و Materialize و … هم بلد باشه استفاده کنه

همچنین باید توانایی پیاده‌سازی صفحات وب به بهینه‌ترین حالت ممکن با در نظر گرفتن پرفرمنس DOM و … رو داشته باشه

البته این قسمت کامل نیست و در مقاله بعدی سعی می‌کنم بصورت کلی به مقایسه ابزار ها و فریمورک های طراحی‌وب بپردازم

توسعه‌دهنده وب کی هست ؟ (بک‌اند | Back-End)

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

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

توسعه‌دهنده بک‌اند باید یک پلتفرم سمت بک‌اند انتخاب کنه مثلا PHP , NodeJS, Python, Java, Lua, Perl و … ، که البته درمورد مزایا و معایب هرکدوم هم توی مقاله شماره ۳ که گفتم صحبت می‌کنیم

توسعه‌دهنده وب باید با دیتابیس های مختلف کار بکنه مثل Mysql, Mongo, Redis و … و بتونه طبق نیاز پروژه انتخاب کنه که دیتابیس باید sql باشه یا nosql یا …

همچنین تکنیک های بهینه‌سازی سمت بک‌اند رو بلد باشه و پروژه رو طوری بنویسه که مقیاس‌پذیر باشه، همچنین امنیت حد متوسط کدی که می‌نویسه رو سمت سرور تامین بکنه

نتیجه‌گیری

دنیای وب یکی از قسمت های باحال اینترنت هستش که بصورت کلی شامل HTML و CSS و JS میشه و نمایش دادنش توسط مرورگر، یا در مراحل پشت‌صحنه‌تر شامل کدنویسی های سمت‌سروری میشه

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

در حالت کلی طراحی‌وب به افرادی که ایده و ذهن و خلاقیت بهتری دارند توصیه میشه، و توسعه‌وب هم به افرادی که حوصله اینجور قرطی‌بازی‌هارو ندارند و میخوان کد بزنند و ادای خفن‌هارو دربیارند (:

امیدوارم که این مقاله هم براتون مفید بوده باشه، اگه بنظرتون مفید بود با بقیه هم به اشتراک بگذارید، اگه هم که تمایل داشتید از آخرین مطالب سایت مطلع بشید می‌تونید عضو کانال وبسایت بشید و بی‌خبر نمونید (:

موفق باشید

آیا مقاله برای شما مفید بود ؟

خیر

0

تقریبا

0

بله

1

برای ثبت نظر باید وارد حساب کاربری خود شوید
رای شما با موفقیت ثبت شد
متاسفانه خطایی در ثبت نظر رخ داد

Iran Developers Telegram Group

نظرات کاربران


Ashkan

Ashkan

آقا عرفان عالی بود
قسمت دو رو خواهشا زودتر بنویس😐💙

برای پاسخ دادن باید وارد شوید

نکات ارسال نظرات

نظرات فینگلیش به هیچ عنوان تایید نخواهند شد

هنگام نوشتن نام و ایمیل معتبر خود را وارد نمایید

در دیدگاه هایتان از الفاظ مناسب استفاده کنید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *