نقشه راه طراحی سایت

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

در مطلب نقشه راه برنامه‌نویسی به صورت عمومی در مورد شروع برنامه نویسی صحبت شده است که خواندن آن خالی از لطف نیست. در این نوشته مسیر یادگیری طراحی سایت ترسیم شده است. قبل از ورود به بحث بد نیست اطلاعاتی در مورد زبانهای سمت کلاینت ( یا front-end) و زبانهای سمت سرور ( یا back-end) کسب کنید.

برنامه‌نویسی سمت کلاینت و برنامه‌نویسی سمت سرور

بیشتر زبان‌های کد نویسی وب، طوری طراحی‌شده‌اند که یا در سمت سرور اجرا می‌شوند، یا در سمت کاربر. به این معنی که مثلا کدهای css (که یک زبان سمت کلاینت است) پس از لود شدن وب از روی کامپیوتر کلاینت (یا همان کاربر) اجرا می‌شوند و کدهای php (که یک زبان سمت سرور است) بر رو سروری که میزبانی وب‌سایت شما را به عهده دارد اجرا می‌شوند. با مثالی ساده این موضوع را بهتر توضیح می‌دهم:

وارد سایت جیمیل می‌شوید. از شما خواسته می‌شود ایمیل خود و در مرحله بعد رمز عبورتان را وارد کنید. آنچه که شما در این صفحه می‌بینید (اعم از لوگوی گوگل متن ها، رنگ‌ها و دکمه…) همگی مربوط به front-end است. بعد از وارد کردن ایمیل و رمز عبور چه اتفاقی می‌افتد؟ این اطلاعات به سرور گوگل فرستاده می‌شود، در صورت تایید اطلاعات ورود، پیامها و اطلاعات مربوط به کاربری برای شما ارسال و نمایش داده می‌شود. همه این اتفاقات مربوط به برنامه نویس back-end است.

با این مقدمه وارد بحث اصلی می‌شویم:

برای یادگیری طراحی سایت چه چیزهایی نیاز است یاد بگیریم؟

برای یادگیری طراحی سایت، بهتر است هم برنامه‌نویسی front-end بلد باشید و هم back-end. در طراحی سایتهای بزرگ تیمی از برنامه‌نویسان سمت کلاینت و کاربر با هم همکاری می‌کنند. اگر شما برنامه‌نویس back-end باشید و تا حدودی با front-end آشنا باشید قطعا بهتر می‌توانید در تیم برنامه‌نویسی حضور داشته باشید. پس بهتر است دانشتان را در هر دو حوزه بالا ببرید.

گام صفرم: یادگیری فوتوشاپ

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

این نکته هم در نظر داشته باشید که نیازی نیست ابتدا به فوتوشاپ مسلط شوید و بعد از آن یادگیری سایت را شروع کنید. در کنار یادگیری طراحی سایت، از یادگیری فوتوشاپ غافل نشوید!

گام اول: یادگیری HTML

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

 <img src="smiley.gif" alt="Smiley face" height="42" width=42> 

در این تگ قرار است تصویری به نمایش گذاشته شود که آدرس آن smiley.gif است (src مخفف source است). متن جایگزین smiley face است و طول و عرض آن 42 پیکسل است. من در کتاب آموزش HTML تگهای مهم و اساسی HTML را به شما آموزش دادم که می‌توانید این کتاب را به صورت رایگان دانلود کنید   همچنین می‌توانید آموزشهای رایگان من در یوتیوب در زمینه HTML را نیز دنبال کنید. کافیست در یوتیوب jahangirics را سرچ کنید و یا بعد از روشن کردن فیلتر شکن خود اینجا را کلیک کنید تا قسمت اول آموزش HTML را به صورت رایگان مشاهده کنید

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

گام دوم: یادگیری CSS

html به تنهایی نمی‌تواند در ساختن یک سایت زیبا به شما کمک کند. در html شما قادر به ساختن ساختار و چهارچوب کلی صفحه وب خواهید بود و با استفاده css می‌توانید چیدمان و ظاهر سایتتان را زیبا کنید. سایت jahangirics.ir را یکبار با css و یکبار بدون استفاده از css مشاهده کنید!

تصویر بالا (که در آن css استفاده نشده) به خوبی نشان می‌دهد که دنیای وب بدون css چقدر زشت و ناخوشایند است! css نیز مانند html یک زبان نشانه‌گذاری است و یادگیری اصول آن بسیار ساده است. مثال زیر را در نظر بگیرید:

P {Background-color: red;   Color: white;}

در کد بالا P نشان دهنده این است که می‌خواهیم یک استایل برای پاراگراف به این صورت تعریف کنیم: رنگ زمینه قرمز و رنگ نوشته سفید. پس همه پاراگرافهای موجود در سایت از این استایل ظاهری پیروی می‌کنند.

اگر گشتی در سایتهایی که در یادگیری html معرفی شده بزنید آموزشهای css هم پیدا خواهید کرد. به طور کلی در مبحث css، html و javascript مطالب آموزشی به قدری زیاد است که با یک جستجوی ساده در گوگل مطالب مفید زیادی پیدا خواهید کرد. (کلیک کنید)

گام سوم: یادگیری جاوا اسکریپت

جاوااسکریپت یک زبان همه فن حریف است. جاوااسکریپت نه تنها در برنامه‌نویسی front-end و back-end مورد استفاده قرار میگیرد که در ساخت برنامه‌های وب و موبایل وهمچنین در توسعه بازیها مورد استفاده قرار می‌گیرد. بر اساس بررسی سایت stackoverflow محبوب ترین زبان برنامه نویسی سال 2018 است .

از بین مشهورترین ابزارها و فریم‌ورک‌های توسعه‌یافته به زبان جاوا اسکریپت می‌توان به موارد زیر اشاره کرد: 

• کتابخانه‌ی ReactJS که بسیاری از سایت‌ها و سرویس‌های بزرگ بر پایه‌ی این فریم‌ورک توسعه داده‌ شده‌اند.
• React Native محصول دیگری از شرکت فیس‌بوک که امکان تولید اپلیکیشن‌های موبایل بر پایه زبان جاوا اسکریپت را فراهم می‌کند. نمونه بارز آن اپلیکیشن موبایل اینستاگرام است.
• فریم ورک AngularJs گوگل که آخرین نسخه آن angular 4 است و بسیاری از ابزارها و سرویس‌های بزرگ بر پایه‌‌ی آن توسعه داده‌ شده‌اند.
• زبان اپن سورس NodeJS که  امکان برنامه‌نویسی با زبان جاوا اسکریپت را در سمت سرور فراهم می‌کند. 

اگر به برنامه‌نویسی اندروید یا ios علاقه‌مندید می‌توانید جاوااسکریپت را در اولویت برای یادگیری قرار دهید. زیرا فریمورکی مانند React Native به تنهایی خروجی هر دو زبان را به ما برمیگرداند. یعنی با یکبار برنامه نویسی میتوانید هم نسخه اندروید را داشته باشید و هم ios.

اگر به سایت ها و آگهی های استخدامی سر بزنید و با این تیترها برخورد کردید (“تسلط کامل بر جاوااسکریپت”، “استخدام برنامه نویس مسلط به React و React native”، “استخدام Senior React native”، “استخدام Vuejs Developer” و…) بدانید که این فرصت های شغلی برای کسانی است که جاوااسکریپت و کتابخانه های آن را حرفه ای یاد گرفته اند!

گام چهارم: یادگیری یک زبان برنامه نویسی سمت سرور

همه زبانهایی که تا اینجا معرفی شدند زبانهای سمت کاربر (یا همان
front-end) هستند. در این قسمت تعدادی از زبانهای معروف مورد استفاده در
سمت سرور معرفی خواهیم شد که شامل asp.Net و PHP و Javascript و JAVA و
Pyton است.

1- ASP.Net

ASP.Net یک تکنولوژی طراحی سایت است که توسط شرکت معروف مایکروسافت ارائه شده تا برنامه نویسان بتوانند از طریق آن سایت، برنامه و سرویس های وب (WEB) را بسازند. ASP.Net نسخه .NET تکنولوژی ASP است. ASP مبتنی بر زبانهای مشترک در حال اجرا است که به برنامه نویسان اجازه می‌دهد کدهای ASP را با استفاده از هر زبان Framework.NET بنویسند. پایگاه داده مورد نیاز در asp.net ، SQL است. با توجه به اینکه به صورت تخصصی در این حوزه کار نکرده‌ام توصیه میکنم اطلاعات بیشتر را در گوگل جستجو کنید.

2- PHP

یکی از فراگیرترین زبانهای برنامه‌نویسی تحت وب. علت این امر هم سادگی زبان php در مقایسه با asp است. یکی از پربحث‌ترین مباحث در طراحی سایت این سوال است که asp بهتر است یا php؟ اگر در اینترنت این موضوع را جستجو کنید سایتهایی زیادی به این موضوع پرداخته اند. (شاید خواندن این مقاله در آذر آنلاین بد نباشد: تفاوت زبان برنامه نویسی php با ASP) پایگاه داده مورد نیاز در پی اچ پی MySql است که از لخاظ سینتکسی شبیه به SQL است.

3- Javascript

Node.js یک پلتفرم بر اساس جاوااسکریپت است که توجه برنامه‌نویسان زیادی را به خود جلب کرده است. از دلایل محبوبیت node.js سرعت بالای آن می‌توان نام برد.. این پلتفرم با پایگاه داده MongoDb کار می‌کند.

4- JAVA

جاوا در سه نسخه متفاوت عرضه شده است:
Java SE : برای برنامه‌نویسان دسکتاپ
Java ME: برای برنامه‌نویسان اندروید
Java EE: برای برنامه‌نویسان وب

5- Pyton

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

جمع‌بندی

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

در قسمت نظرات، از هر زبان برنامه‌نویسی که کار کرده‌اید، لینکهای آموزشی مفیدی که از آنها استفاده کرده‌اید را با دوستانتان به اشتراک بگذارید.