مسیر یادگیری طراحی سایت
مقالات طراحی سایتاگر قصد دارید تا یکبار برای همیشه مسیر طراحی و برنامه نویسی وب را بصورت دقیق و گام به گام شناخته و با دید درست در آن حرکت کنید ، تنها به مطالعه این مقاله نیاز دارید و بس ، همراه ما باشید !
مسیر یادگیری طراحی سایت از کجا شروع می شود و برای اینکه وارد دنیای طراحی سایت شویم از کجا باید مسیر خود را آغاز کنیم ؟ این مهمترین سوال در ذهن علاقمندان است که در ابتدای راه از خود خواهند پرسید اگر بخواهم وارد مسیر طراحی سایت شوم باید کدام زبانها را یاد بگیرم ؟ قبل از هرزبانی باید کدام زبان را یادبگیرم ؟ یا بعد از یادگیری زبان X کدام زبان را باید یادگرفت ؟
مهمترین سوالاتی که برای افراد ناآشنا به زمینه طراحی سایت پیش خواهد آمد ، همان سئوالاتی هستند که بالاتر اشاره کردیم که خود ما نیز در ابتدای مسیر یادگیری طراحی سایت اطلاع نداشتیم که کدام زبان را باید اول از همه برای یادگیری انتخاب کرده و شروع کنیم .
دوستان عزیز سئو نود ، شاید با بطن مقالات آموزشی ما آشنا باشید و مطلع هستید که تمامی محتواهای سایت جامع و کامل منتشر میشوند و سعی داریم تا به مهمترین و اصلیترین سئوالات مخاطبین پاسخ دهیم .
برهمین اساس یکی از مهمترین سوالات در زمینه طراحی وب و شاید اولین سوال همین باشد : ” مسیر یادگیری طراحی سایت چگونه است و از کجا شروع میشود ؟ ” . در این صفحه همراه ما باشید تا پاسخ این سوال را یکبار برای همیشه مشخص کنیم . مسیر طراحی سایت متشکل از چندین گام مختلف است که مهمترین آنها عبارتند از :
فرانتاند کار ( Frontend Developer )
کسی است که فقط قالب و ظاهر سایتها را طراحی میکند و بین 50 تا 60 درصد کارهای کل پروژه را انجام میدهد . این افراد باید هوش و استعداد را با سلیقه خود درهم آمیزند تا بتوانند طرحهای ابتکاری و جذابی را برای وب سایتها ایجاد کنند . این افراد عموما با برنامه نویسی سروکاری ندارند و لذا زبانهایی که با آنها کار میکنند عمدتا HTML و CSS هستند .
اگر در این بین نیاز بود ، کمی بهرهگیری از کتابخانه jQuery جهت روح بخشیدن به المانهای صفحه نیز چاشنی کار خواهد شد . وظیفه کلی این افراد به نسبت برنامه نویسان سایت در ظاهر راحتتر است اما ممکن است در اکثر وب سایتها حجم کاری آنها به نسبت زیاد شود .
به این دلیل که ظاهر نمایشی اکثر سایتها با یکدیگر تفاوت دارد ، لذا طراح قالب باید از ابتدا تمام قالب را با بخشهای مختلف طراحی کند تا یک پوسته با تمام صفحات را آماده کرده و تحویل برنامه نویس دهد . درمقابل برنامه نویسان به این دلیل که عمدتا در پشت صفحه سایت کار میکنند و بخشی از کدها شبیه به هم هستد کار سادهتری دارند البته این نیز در ظاهر است و داخل اکثر پروژهها به همین شکل نیست .
بکاند کار ( Backend Developer )
کسی که در پشت صحنه سایت فعالیت دارد ! برای مثال دکمهها یا اصطلاحا button هایی که در داخل سایت توسط طراح قالب ایجاد شدهاند را داینامیک میکنند . تصور کنید شما در داخل قالب وب سایت یک لینک یا دکمه جهت ورود به بخش مدیریت دارید .
در حالت اول که سایت توسط طراح قالب یا همان فرانتاند کار آماده شده و به بکاند کار تحویل داد شد ، هیچ یک از button ها یا فرمها و سایر المانهای تعاملی کار نمیکنند و یا اگر هم فعال باشند ، محدودیتهای زیای دارند و برای مثال کاربران سایت با وارد شدن به پنل کاربری خودشان ، ممکن است اطلاعات فیک یا صرفا نمونه را مشاهده کنند .
کاربران امکان ثبت نام را از طریق فرمهای سایت نخواهند داشت و صرفا فرم ثبت نام را مشاهده میکنند . درحقیقت همه چیز بصورت نمایشی است . اینکه این فرم با تکمیل اطلاعات آن ، اطلاعات را داخل جدولی ثبت کند و پس از پردازشی بروی دیتاها کار کند ، توسط بکاند کار یا همان برنامه نویس سمت سرور صورت خواهد گرفت .
به بکاند کار ، برنامه نویس سمت سرور نیز گفته میشود . در حالت کلی فرانت و بک ، دو بخش اصلی در طراحی و برنامه نویسی سایت هستند که هریک نیروی کاری متخصص خود را نیاز دارد .
طراح ( فرانتاند کار ) با چه زبانهایی سروکار دارد ؟
طراح قالب همانطور که اشاره شد باید زبان نشانه گذاری HTML و درکنار آن زبان طراحی CSS و حداقل یک فریمورک طراحی که براساس CSS است همچون بوت استرپ (Bootstrap) ، یوآی کیت ( Uikit ) یا TailwindCSS و … را یاد بگیرد تا قادر باشد قالبهای مختلف را تا 70% طراحی کرده و به مرحله اجرا برساند .
البته بسیاری از طراحان ، یادگیری زبان برنامه نویسی جاوااسکریپت ( JavaScript ) را نیز در برنامه قرار خواهند داد و از طرفی طراحانی که زبان جاوا اسکریپت را بلد نیستند یا تمایل به یادگیری کامل آن ندارند ، کتابخانه jQuery را یاد خواهند گرفت که یک کتابخانه مشتق شده از زبان جاوا اسکریپت است و پروسه کاری را در طراحی سایت سادهتر خواهد نمود .
کتابخانه jQuery درحقیقت بخشهایی از زبان جاوا اسکریپت که برای طراحی صفحات وب ضروری هستند را جدا کرده و در قالب یک کتابخانه به نام جیکوئری آماده استفاده کرده است . لذا برای تبدیل شدن به فرانتاند کار یا همان طراح قالب باید زبانها و ابزارهای زیر را به ترتیب آموخته و در آنها مهارت مناسبی را کسب کرد :
- HTML ( Hyper Text Markup Language )
- CSS ( Cascading Style Sheet )
- CSS Framework/s
- JavaScript Or jQuery
پس برای تبدیل شدن به یک طراح قالب یا همان فرانتاند دولوپر ، به ترتیب این زبانها و ابزارها را باید یاد گرفت . در این مسیر ابتدا با یادگیری زبان نشانه گذاری HTML شروع کنید . زبان اچ تی ام ال زبان برنامه نویسی نیست به این دلیل که امکان تعریف متغیر ، حلقه و انواع شرطها در آن وجود ندارد و صرفا کدنویسی توسط نشانه گذاری در صفحه صورت خواهد گرفت . یادگیری زبان HTML نهایتا چندین روز زمان نیاز دارد اما تسلط به آن و شناخت مناسب هر تگ و نحوه عملکردشان ، نیازمند چند هفته مختصر است .
قدم اول فرانتاند ، یادگیری HTML
عملا تنها یادگیری سطحی زبان HTML برای شما کاری از پیش نخواهد برد به عبارتی نمیتوان تنها با یادگیری آن ، وب سایت طراحی کرد ، اما ساختار و ستون تمامی وب سایتها زبان HTML است و بدون این زبان ، ادامه پروسه طراحی و همچنین برنامه نویسی سایت ممکن نیست . پس این اولین قدم شما است . زبان HTML ظاهری بصورت زیر دارد :
<body>
<div>
<h1>H1 Title</h1>
<p>Lorem Text</p>
</div>
</body>
پس از یادگیری زبان HTML شما بخودی خود خواهید فهمید که نیازمند زبان دیگری هستید تا قادر باشید مقداری رنگ و لعاب به المانهای داخل صفحه اعمال کنید تا بتوانید بمرور وب سایت خود را به وب سایتهای داخل اینترنت شبیه کنید . در این حالت است که یادگیری زبان CSS احساس میشود .
قدم دوم فرانتاند ، یادگیری CSS
زبان CSS نیز همانند HTML زبان برنامه نویسی نیست و جهت استایل دهی به المانهای داخل صفحه که با HTML تنظیم شده است ، توسط دستورات مخصوص خود بکار گرفته میشود . یادگیری زبان Css نیز نسبتا آسان است اما مهمتر از همه چیز نحوه به کارگیری دستورات آن در جای صحیح و مناسب است .
طراح قالب باید به اندازه کافی خلاقیت داشته باشد تا بتواند جلوههای بسیار زیبایی را به صفحه بخشیده و جذابیت قالب را چندین برابر کند . درواقع CSS پس از HTML ، اصلیترین بخش در طراحی سایت از جهت ظاهر و نمایش است .
زمانی که زبان CSS وجود نداشت و به این اندازه کاربردی نبود ، کارهایی همچون ستون بندی و تقسیمات داخل صفحه توسط جداول انجام میگرفت که متعلق به زبان HTML است و به آنها table گفته میشود .
در حال حاضر این روش دیگر به کل منسوخ شده است و وب سایتهایی که توسط جدول بخش بندی شوند ، نمره به شدت پایینی از موتورهای جستجو خواهند گرفت و عملا در دنیای طراحی سایت فعلی استفاده از جداول تنها جهت نمایش اطلاعات و دستهبندی بخش خاصی در داخل مطالب استفاده میشود . CSS دستوراتی بصورت زیر دارد :
.my_new_div{
color:#ddd;
border:1px solid #222;
border-radius:6px;
padding:16px;
display:flex;
justify-content:center;
align-items:center;
}
زمانی که CSS به قالب اضافه شود ، درحقیقت اصلیترین بخش طراحی قالب سایت شما شروع خواهد شد ! ممکن است با زبان CSS به مدت چندین ماه کار کنید چرا که اکثر مهارتهای شما در قسمت طراحی ، در پروسه یادگیری و کار با این زبان شکل خواهد گرفت .
اگر از خودمان برای شما مثال بزنیم ، زمانی که تصمیم بر ورود به دنیای طراحی وب گرفتیم ، در 8 الی 10 روز HTML را آموخته و پس از زبان HTML حدود 3 ماه تماما با CSS کار کردیم و حدود 20 قالب را در طرحهای مختلف از جهت کسب تجربه و پیدا کردن نقاط ضعف و قوت طراحی کردیم .
نکته مهم در یادگیری ما این بود که به یک منبع بسنده نکرده و سعی داشتیم نکات مختلف را با جستجو پیدا کنیم و از این جهت دانش خودمان را درمسیر کار با CSS افزایش دهیم . حتی قالبهای حرفهای در سطح وب را جستجو کرده و با ابزار inspect مرورگر ، قسمتهای مختلف صفحه و استایلهای مربوط به آنها را بررسی میکردیم .
اما نکته مهمی وجود دارد که نباید از هر منبعی که به ظاهر خوشتان آمد مطالعه و یادگیری را شروع کنید . تنها و تنها از منابعی مطالعه کنید که جامع هستند و آموزشهای آنها بصورت ناقص تهیه و تدوین نشده است .
برای مثال آموزشهایی هستند که با عنوان جامع شما را فریب میدهند و هنگام آموزش ، مدرس به قدری با سطح پایین تدریس میکند که شما هرچه از قبل آموخته بودید نیز از یاد خواهید برد .
اگر توان مالی دارید ، حتما دورههای جامع و غیررایگان مناسب را شناسایی کرده و برای یادگیری خود خریداری نمائید . خرید یک آموزش پولی مناسب بسیار با ارزشتر از 10 آموزش رایگان با کیفیت پایین یا حتی متوسط است که شما را در مسیر طراحی سایت بسیار سریعتر و بصورت دقیق به هدف خواهد رساند .
اما چگونه آموزش خوب را تشخیص دهیم ؟
شاید بسیاری از شما در مسیر طراحی سایت قصد خرید آموزشهای مختلف از وب سایتهای مختلف را داشته باشید و در این بین ، وسط اینهمه آموزش مختلف سردرگم باشید . اگر قصد داشته باشیم تا مسیر شما را کمی هموارتر کنیم میتوان گفت آموزشهای ویدئویی بهترین منابع برای یادگیری هستند .
قبل از هر چیز لازم است تا سرفصلهای آموزش را دقیقا مطالعه کنید . ممکن است آموزشهای بهتری نیز با سرفصلهای کاملتر وجود داشته باشد . به همین دلیل حتما چندین آموزش را با یکدیگر در مقام مقایسه قرار دهید تا انتخاب درستی داشته باشید .
یک آموزش خوب حتما ویدیو پیش نمایش و دمو جهت معرفی آنچه که در آموزش خدمت شما ارائه خواهد شد دارد . لازم است تا ویدیو پیش نمایش دوره را بادقت مشاهده کرده و نحوه تدریس مدرس را سنجش نمائید تا میزان تسلط مدرس و نحوه بیان او که مهمترین نکته در علاقمندی شما به ادامه آموزشها خواهد بود را بخوبی درک کنید ( این قسمت به شما مربوط است ) .
در گام بعدی هزینه دورههای مختلف را نیز با یکدیگر مقایسه کنید . برخی دورههای آموزشی کیفیت مناسبی ندارند و در عین حال هزینه بسیار بالایی نیز برای آن درنظر گرفته شده است . یا برخی از وب سایتها صرفا بخاطر اسم و شهرت بروی دوره خود قیمت گذاری میکنند پس در این بخش باید کمی زمان صرف کنید . در کل برای خرید یک دوره آموزشی اصلا عجله نکنید .
خرید خود را حتما از درگاههای امن انجام دهید چرا که ممکن است هزینههایی که پرداخت میکنید غیر قابل برگشت باشند .
حتما قبل از خرید دوره در سایت مدنظر ثبت نام کنید ، البته برخی سایت ها ، امکان ثبت نام در حین خرید محصول یا دوره را برای شما فراهم میکنند تا از پنل کاربری خود به راحتی محصولات را دانلود یا دریافت کنید .
نظرات مشتریان و دانشجویان دوره نیز یکی از نکات مهم است . همیشه به بخش نظرات دانشجویان در صفحه مربوط به دوره دقت کنید چرا که تجربه کاربران از دوره مدنظر در سطح مهارتی که قرار است کسب کنید بسیار تعیین کننده میباشد . توجه کنید که نظرات کاربران در رابطه با دوره مدنظر شما لازمه بررسی است نه نظرات کاربران در رابطه با کل دورههای آموزشی یا خدمات سایت مربوطه ، چراکه ممکن است مدرس هردوره با دیگری تفاوت داشته باشد .
قدم سوم فرانتاند ، یادگیری یک فریمورک
بسیاری از دوستان زمانی که اسم بوت استرپ را میشنوند بسیار ترس دارند در حالی که بوت استرپ یکی از لذت بخشترین بخشها در طراحی قالب سایت است . نه تنها بوت استرپ بلکه هر فریمورکی که بروی CSS توسعه داده شده است همچون Tailwind و …
اگر زبان CSS را به شکل کامل آموخته باشید ، حتما با دستورات media نیز آشنا خواهید شد . دستورات media برای ایجاد حالتهای واکنشگرایی در سایت هستند و سبب خواهند شد تا وضعیت نمایش سایت ، نسبت به عرضهای دستگاهی که سایت در آن در حال نمایش است وضعیت قرارگیری و نمایش المانها را تغییر میدهد . نمونه یک دستور مدیا در زیر خدمتتان ارائه شده است :
@media only screen and (min-width:768px) {
.slide-top .swiper-slide .title::after {
content: "";
position: absolute;
right: 0;
bottom: 0px;
width: 100%;
height: 23px;
background-image: url(img/scale.png);
background-repeat: repeat-x;
background-size: contain;
}
}
برای مثال زمانی که عرض نمایشگری که سایت را داخل آن مشاهده میکنیم 1366 پیکسل است => عرض ؛ ارتقاع ؛ رنگ و یا هر ویژگی دیگر یک المان مشخص در سایت ، وضعیتی دارد . اکنون زمانی که عرض دستگاه ما از 1366 به 768 تغییر کند و به عبارتی وب سایت در دستگاههایی همچون تبلت در حال نمایش است وضعیت این المان تغییر خواهد کرد .
در گذشته طراحی سایت های واکنشگرا ، برای موبایل و تبلت و دسکتاپ سختیهای مربوط به خود را داشت و لازم بود برای تمامی عناصری که داخل صفحه در حال نمایش هستند شرایط مختلف درنظر گرفته میشد . به همین دلیل اکثر سایتها در گذشته هنگام باز شدن در تلفن همراه به همان شکلی که در نمایشگرهای خانگی نشان داده میشدند بودند ، و از این جهت لازم بود تا مقدار زیادی زوم کنید که کلیک کردن روی لینکها و دکمهها و … ممکن شود .
اما با توجه به اینکه مدتی بعد تلفنهای همراه بسیار بروز شده و سیستم عاملهای آنها قدرتمند شدند ، کاربران وب سایتها بیشتر از طریق تلفن همراه وارد سایتها شدند و در این حالت نیاز بود تا وب سایت ، با جلوه منظمی نسبت به اندازههای بزرگتر نمایش داده شود . این بود که طراحی ریسپانسیو یک الویت اصلی برای تمامی وب سایتها شد . همراه با آن ، فریمورکهای رسپانسیو بر بستر Css توسعه یافتند . اما اکنون به این سئوال پاسخ دهیم که فریمورک چیست ؟
فریمورک ( Framework ) چیست ؟
فریمورک به زبان ساده یک بستر کد نویسی برای یک سیستم خاص است که کدهایی استاندارد و درکنار آن یک روند کدنویسی را در اختیار طراحی یا برنامه نویس قرار میدهد که در قدم اول فرآیند کار توسعه دهنده را بسیار راحتتر خواهد کرد و در قدم دوم باعث خواهد شد تا شخص دیگری که به همین فریمورک تسلط دارد بعد از شخصی که توسعه پروژه را بر عهده داشته ، بتواند به راحتی با کدها کار کند و تغییرات یا توسعه لازم را در آن انجام دهد .
درحقیقت پروسه کاری توسعه دهنده ، هم راحت و هم سریع و استاندارد خواهد شد ولذا نیاز نیست که توسعه دهنده به تنهایی دست به کد شده و حجم زیادی از کدنویسی را طبق سلیقه خود و خارج از هر چارچوب دیگری انجام دهد . این فریمورکها توسط جمعی از توسعه دهندگان خبره ، بصورتی استاندارد اجرا شده و نهایتا در اختیار جامعه استفاده کنندگان قرار خواهد گرفت .
بوت استرپ یا TailwindCSS نیز از فریمورکهای توسعه داده شده برای زبان Css هستند که شرایط ریسپانسیو کردن قالب سایت را برای طراح بسیار سادهتر خواهند کرد . طراح سایت با یادگیری بوت استرپ یا هر فریمورک مناسب دیگری ، طراحی قالب وب سایتها را به سرعت و براحتی آب خوردن پیش خواهد برد چراکه اکنون از یک الگوی مشترک پیروی میکند .
توصیه ما در مسیر طراحی سایت ، در سطح متوسط یادگیری بوت استرپ و در سطح کمی پیشرفتهتر یادگیری TailwindCSS میباشد ( یادگیری یکی از این دو مورد کافی است ) . اگر شما به زبان طراحی Css به اندازه کافی مسلط باشید میتوانید در عرض چند روز به بوت استرپ نیز مسلط شوید به این دلیل که تنها لازم است تا چندین کلاس Css را آموخته و از آنها در پروژه استفاده کنید .
پس برای اینکه یک طراح قالب سایت ماهر باشیم ، فعلا یادگیری دو زبان بعلاوه یک فریمورک را باید در برنامه آموزش خود قرار دهیم چراکه بدون این موارد عملا داشتن یک قالب شکیل و واکنشگرا ممکن نخواهد بود . به عبارتی تمامی این موارد الزام هستند نه اختیار !
قدم چهارم فرانتاند ، یادگیری JavaScript یا jQuery
به یکی از بخشهای جالب در مسیر طراحی سایت خوش آمدید . تا این بخش با زبانهای نشانه گذاری و طراحی سروکار داشتید اما اکنون به یکی از زبانهای برنامه نویسی که در دنیای وب ، بسیار قدرتمند است خواهیم پرداخت . اگر بتوانید این زبان را به شکل کامل ( منظور از کامل در حد استفاده برای حوزه تخصصی خودتان ) بیاموزید ، حتی خواهید توانست تا از آن در برنامه نویسی سمت سرور نیز استفاده کنید . این زبان تا این اندازه قدرتمند است .
در طراحی قالب وب سایت ، گاها نیاز داریم تا کمی تحرک و روح در قالب ایجاد کنیم . برای مثال المانهایی که در اکثر سایتها مشاهده کردهاید اما از کنار آنها ساده رد شدید ، مثل اسلایدر ، تب ، منوهای آکاردئونی ، حتی در برخی موارد منوهای سایت ، ساعت ، تاریخ و تمام المانهایی که توسط دستوراتی غیر از HTML و CSS کنترل میشوند نیازمند استفاده از جاوا اسکریپت هستند . البته زبان جاوا را با جاوا اسکریپت که یک زبان اسکریپت نویسی است اشتباه نکنید .
البته در حال حاضر کار شما در یادگیری المانهای تحت کنترل زبان جاوا اسکریپت راحت است . اما چگونه ؟
اول اینکه کتابخانه جیکوئری را داریم . کتابخانه جیکوئری درحقیقت شامل کدهایی است که مربوط به قسمت طراحی برخی المانها در قالب سایت هستند که تفکیک شدهاند و در قالب یک کتابخانه که مشتق شده از زبان جاوا اسکریپت و دستورات آن است در اختیار ما قرار گرفتهاند . مشتق به این معنی که خود دستورات جاوا اسکریپت را نیز میتوان در حین نوشتن دستورات جیکوئری به کار گرفت. درحقیقت جیکوئری فرزندی از جاوا اسکریپت است .
رویدادهایی از صفحه که مستلزم به کلیک کردن ؛ دابل کلیک ، ورود و خروج به داخل المان ، اسکرول در داخل صفحه و .. هستند ، یا کارهایی که در یک تابع زمانی مشخص باید اجرا شوند را میتوان به راحتی توسط جیکوئری کنترل کرد .
برای مثال قصد داریم زمانی که کاربر روی یک دکمه یا لینک مشخصی در صفحه کلیک کرد ، یک صفحه به صورت مودال ( ModalBox ) برای او باز شود . پس عملا با کنترل روی فرآیند کلیک کاربر ، تصمیم داریم تا یک رویداد را کنترل کنیم . در این حالت میتوانیم به راحتی جی کوئری را وارد پروژه کنیم !
اگر علاقمندان به حوزه طراحی سایت قصد دارند تا کمی سریعتر و با استفاده از یک کاتالیزور دوره فرانت را پشت سر بگذارند ، بهتر است کتابخانه جیکوئری را بیاموزند . یادگیری جیکوئری در مسیر طراحی سایت درصورت داشتن تمرینات مناسب بین 3 الی 4 هفته زمان نیاز دارد .
شما با یادگیری جیکوئری قادر هستید تا اولا خودتان المانهای مختلف را به صورت مختصر برنامه نویسی کنید و هم اینکه از پلاگینهای جیکوئری مثل پلاگین های اسلایدر ، پلاگینهای تول تیپ ، تب باتن و … استفاده کنید . البته خود جیکوئری کتابخانهای به نام جیکوئری یو آی ( jQuery UI ) نیز دارد که میتوان به کمک آن به راحتی بخشهای مذکور را در قالب ایجاد کرد .
در کل با یادگیری جیکوئری ، در مسیر طراحی سایت و بخش فرانتاند ، ضروریات یادگیری به اتمام خواهد رسید و شما میتوانید با تمرین ، تکرار ، جستجوی پلاگینهای ضروری ، کار با آنها و همچین الگو برداری و مشاهده تمپلیتهای سایر سایتها ، ذهن خود را در این زمینه بازتر نموده و تخصص خود را در طراحی بسیار بسیار بیشتر کنید .
البته طراحی قالب مسلما به اینجا محدود نیست اما یادگیری همین 4 مورد برای اینکه بتوانید وارد بازار کار شوید و ازپس 70 تا 80 درصد طراحی قالبها برآئید مطمئنا کافیست . پس نگران نباشید ! باقی موارد را کم کم خودتان در مسیر طراحی سایت یاد خواهید گرفت و به شدت علاقمند به یادگیری خواهید شد . برای مثال یادگیری پیش پردازنده Sass و همچنین مواردی مثل Git و Github و …
تا این بخش اگر مسیر خوبی را پشت سر گذاشته باشید ، به طراحی سایت در فرانتاند مسلط هستید و به ترتیب زبانهایی که مورد نیاز بود را آموختهاید و اکنون به شما یک فرانتاند کار ( Front-end ) گفته میشود و قادر هستید تا اکثر قالبهای سایت را بدون مشکل طراحی کرده و در اختیار برنامه نویس قرار دهید . اما اگر تصمیم داشته باشید تا برنامه نویسی را نیز خودتان بیاموزید در این صورت تکلیف چیست ؟
برنامه نویس ( بکاند کار ) با چه زبانهایی سروکار دارد ؟
زمانی که شما قصد دارید تا خودتان برنامه نویسی سایت را نیز علاوه بر فرانتاند بیاموزید ، از بخش زبانهای نشانه گذاری رد خواهید شد و اکنون باید با انواع دیزاین پترنها و الگوهای برنامه نویسی آشنا شوید . مواردی همچون توابع ، حلقه ، شرطها ، آرایهها و … هریک از این دستورات و بسیاری مواردی دیگر را باید باتوجه به پروژه و همچنین دانش و تخصص و تمریناتی که خواهید داشت باید درجهت داشتن یک اسکریپت خوب به کار بگیرید .
در واقع مهمترین ویژگی برنامه نویس نیز همین است ! برنامه نویس باید بخوبی اطلاع داشته باشد که چگونه و کجا ، از کدام دستورات استفاده کند و مهمتر از آن ، چگونه این مسئله را با دانش برنامه نویسی خود حل کند تا برنامه به بهترین شکل و در بهینهترین حالت کار کند ( اصل بهینگی کد ) .
همین موضوع ( اصل بهینگی کد ) متمایز کننده برنامه نویسان از یکدیگر است که این تخصص و تسلط فقط مستلزم تمرین و تکرار مناسب است . فقط با تمرین و حل مسائل مختلف است که می توان به یک برنامه نویس قابل تبدیل شد .
زمانی که قصد دارید تا وارد دنیای برنامه نویسی شوید و درحقیقت بخشهای مختلف داخل قالب را برای مدیریت آینده سایت قابل کنترل کنید باید در قدم اول یک سیستم مدیریت محتوا برای سایت برنامه نویسی کنید که یکی از چالشهای اصلی شما در بخش برنامه نویسی خواهد بود .
سیستم مدیریت محتوا ( CMS ) چیست ؟
برای مثال زمانی که در سایت بخشی مثل اخبار و مقالات دارید و تصمیم بر این است که محتواهای بخش وبلاگ سایت داخل آن نمایش داده شود ، مسلما نمیتوانید هربار جهت درج اخبار جدید در سایت ، وارد کدهای HTML قالب شده و اخبار و محتوای جدید خود را به صورت دستی اضافه کنید . عملا این کار زمانی که سایت بزرگ باشد ممکن نیست و حتی بسیار غیرمعقول و خنده دار است .
پس لازم است یک سیستم بسیار خوب و داینامیک با دسترسی بهتر ، بدون درگیر شدن با کدهای داخل قالب داشته باشید تا بتوانید محتواهای مختلف را از قسمت مدیریت ( CMS ) ارسال کنید و آن محتوا بسته به کدنویسی که انجام خواهد شد ، داخل سایت در بخش مناسب نمایش داده شود .
لازم است تا تمامی بخشهای محتوایی سایت بدون اینکه وارد بخش کدها شوید کنترل شوند و مدیر نهایی سایت قادر باشد با سایت خود بصورت اصطلاحا ویژوال کار کند .
درحقیقت مدیر سایت وارد قسمتی از سایت خواهد شد که قالب آن کاملا متفاوت است و یک بخش مجزا از قالب اصلی سایت است اما برای همین سایت برنامه نویسی میشود . مدیر سایت قادر است با نام کاربری و کلمه عبوری که در اختیار دارد وارد پنل مدیریت سایت شده و از طریق فرمهای مختلفی که در اختیارش قرار گرفته است محتوای داخل سایت را کنترل کند .
این سیستم مدیریت ، نیاز به یک قالب HTML دارد که بازهم فرانتاند کار میتواند قالب این بخش را نیز طراحی کند . اما مسلما بخشهای برنامه نویسی در همین بخش نیز باید توسط برنامه نویس صورت گیرد . اکنون برنامه نویسی برای این بخش میتواند توسط زبانهای سمت سرور که معروفترین آنها PHP و ASP.NET و Python هستند صورت گیرد .
برنامه نویسی این سیستم مدیریت ممکن است چند هفته تا چند ماه زمان نیاز داشته باشد . شما برای ورود به این بخش ( بکاند ) قبل از هرچیزی لازم است با یک زبان برنامه نویسی سمت سرور شروع کنید . پیشنهاد ما یادگیری زبان PHP است ! به این علت که یادگیری PHP راحتتر است و میتوانید به سادگی یادگیری را شروع کنید .
ضمن اینکه در آینده میتوانید با سیستمهای مدیریت محتوا به راحتی کار کرده و آنها را توسعه دهید . دستورات این زبان ساده هستند و درصد اشتباه و خطا برای افراد مبتدی به دلیل ساختار این زبان به نسبت زبانهای دیگر تقریبا کمتر است . برای یادگیری PHP در مسیر برنامه نویسی سایت باید 6 مرحله را پشت سر بگذارید :
- یادگیری سیتنکس زبان PHP به همراه دستورات دیتابیتس و پایگاه داده ( حدود 50 جلسه آموزشی )
- یادگیری برنامه نویسی یک سیستم مدیریت محتوا با PHP که مهمترین بخش ورود شما به دنیای برنامه نویسی با PHP و درک کدهای برنامه نویسی است ( در حدود 20 الی 30 جلسه )
- یادگیری مفاهیم شیگرایی و طراحی همان سیستم بصورت شیگرا ( 20 جلسه آموزشی )
- یادگیری و درک مفهموم MVC یا همون مفهوم برنامه نویسی سه لایه ( حدود 20 جلسه آموزشی )
- یادگیری فریمورک لاراول جهت راحتی ، استانداردسازی و توسعه برنامه نویسی ( حدود 50 جلسه )
- در انتها یادگیری برنامه نویسی برای سیستم مدیریت محتوای وردپرس
البته میتوانید بخش اول و دوم را آموخته و سپس به سراغ یادگیری طراحی قالب وردپرس حرکت کنید . سایر موارد مربوط به این زبان را میتوانید در ادامه مسیر و جهت تکمیل مهارتها بیاموزید .
اگر زمان کافی برای یادگیری دارید سعی کنید تا زبان PHP را به شکل کامل آموخته و نهایتا به سراغ سیستم مدیریت محتوای وردپرس بروید . اگر مقاله ” وردپرس را از کجا شروع کنیم ” را در داخل مقالات سایت جستجو کرده و مطالعه کنید تمامی اطلاعات لازم در رابطه با وردپرس را بدست خواهید آورد . همچنین دورههای آموزشی نیز در داخل سایت خدمتتان ارائه شده است .
زمانی که به سطح تسلط قابل قبولی در این بخش برسید ، میتوان گفت به یک بکاند کار ( Backend Developer ) تبدیل میشوید و اکنون قادر هستید تا به تنهایی یک وب سایت را از صفر تا صد ، طراحی و برنامه نویسی کنید .
این بستگی به شما دارد که علاقه دارید تا چه میزان در مسیر طراحی سایت پیشروی کنید و هدف شما چیست ؟ اگر زمان داشته باشید و در کنار آن علاقه نیز چاشنی کار باشد ، می توانید تمامی موارد را در یک الی دو سال آموخته و به آنها مسلط شوید .
سعی داشته باشید تا مباحث را به شکلی کامل بیاموزید و بصورت دست و پا شکسته وارد دنیای آموزش نشوید به این دلیل که اولا آموختههای قبلی شما فراموش خواهد شد و دوما قادر نخواهید بود که در یک مسیر به شکل کامل پیش رفته و حرفهای شوید . هرگز از یک شاخه به شاخه دیگری جهش نکنید . تخصص داشتن در یک زمینه و یک زبان بسیار ارزشمندتر از دانستن موارد مختلف به شکل تکه تکه است .
اگر تصمیم دارید تا در بازار کار طراحی سایت حرفهای شده و درآمد داشته باشید ، توصیه میکنیم مسیر طراحی سایت را دقیقا مطابق با همین مسیری که خدمتتان ارائه شد حرکت کنید . پاینده باشید دوستان من .
امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت
نقشه راه فرانت
اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید
چگونه از تابع radial-gradient استفاده کنیم تا بک گراندهایی متفاوت و رنگی را طراحی کنیم ؟ آموزش تمامی حالات دستور radial-gradient در CSS .
در دنیای طراحی سایت چه تفاوت هایی بین شخص طراح و شخص برنامه نویس وجود دارد ؟ آیا میتوان تنها یکی از این مهارت ها را یادگرفته و شروع به کسب درآمد کرد ؟ در این مقاله همراه ما باشید تا تمامی این موارد را بررسی کنیم .
سلام ، سایت W3Schools عالیه