آموزش طراحی سایت: اگر تا 5 سال پیش قرار بود به راه اندازی یک کسب و کار فکرکنید چه ایده هایی در ذهن داشتید؟ احتمالا ایده هایی که در ذهن شما بود بیشتر مربوط به شغل خانوادگی شما بود؛ راه اندازی یک فروشگاه، استخدام در یک کارخانه، خدمت به عنوان یک معلم و یا در بهترین حالت استخدام در یک اداره دولتی. اما امروز چه؟
احتمالا اگر این سؤال را در زمان حال از شما بپرسیم، به علاوه تمامی این موارد گفته شده، یک مورد دیگر هم ذهن شما را درگیر خود میکند و آن، راه اندازی کسب و کار اینترنتی است. کسب و کار اینترنتی مزایای فراوانی دارد و احتمالا شمایی که در حال مطالعه این محتوا هستید با اغلب این مزیت ها آشنا هستید. پس به سراغ آموزش یکی از راه های کسب درآمد از اینترنت میرویم، طراحی سایت.
طراحی سایت در کشور های خارجی یکی از شغل های بسیار محبوب و همینطور پر درآمد است. در ایران با توجه به وجود شغل های دولتیِ ((پر درآمد))، شاید نتوان کسب درآمد از طراحی سایت را بین پردرآمدترین شغل ها دانست اما مطمئن باشید درآمد این شغل در ایران، مخصوصا در زمان حاضر و با توجه به تبِ اینترنتی شدن کسب و کار ها، بسیار بالا است.
در ادامه روش های کسب درآمد از طراحی سایت را برای شما بیان میکنیم و سپس برای شما یک نقشه راه جهت آموزش طراحی سایت را ترسیم میکنیم:
نقشه راه جهت آموزش طراحی سایت
اولین قدم برای آموزش طراحی سایت این است که دقیقا بدانیم که سایت چیست و چگونه عمل میکند.
در درجه اول باید یک آموزش کوتاه در مورد هاست و دامنه را ببینید. پس از آن باید وارد دنیای کد نویسی شوید.
اگر به طور خلاصه قصد توضیح دادن این موضوع را داشته باشم هر سایت در اینترنت از دو قسمت تشکیل شده است:
- front end
- back end
منظور از بخش front یا جلو، طراحی ظاهر سایت است. دقیقا چیزی که شما کاربران در زمان حال آن را تماشا میکنید. تمامی ظاهر سایت و عملیات هایی که در مقابل چشم شما در سایت اتفاق می افتد، مربوط به front سایت است.
در مقابل بخش back یا پشت سایت وجود دارد. میتوان گفت تمامی این ظاهر سایت، بر این قسمت سوار است و اگر قسمت بک اِند در سایت وجود نداشته باشد، عملا با یک فاجعه مخصوصا در مدیریت سایت مواجهیم.
در ادامه قسمت back و front را برای شما بازتر میکنیم:
front end
ظاهر اصلی سایت با دو زبانِ ((نشانه گذاری)) به نام های HTML و CSS ساخته میشود. یادگیری زبان های نشانه گذاری کار بسیار آسانی است و در مدت زمان کوتاهی میشود آن ها را فراگرفت.
با استفاده از زبان html بدنه اصلی سایت ساخته میشود. به طور مثال تمامی متن ها، فیلد ها و قسمت های سایت با استفاده از این زبان ساخته شده. زبان css وظیفه رنگ دهی و استایل دهی به قسمت های ساخته شده توسط html را دارد. به طور مثال منو سایت با زبان html نوشته شده اما رنگ آبی آن را زبان CSS مشخص کرده است و یا سایه های مربوط به قسمت های کناری سایت تماما توسط کد های css ساخته شده اند.
کد های css از چند طریق به کد های html متصل شده و به آنها فرمان میدهند:
- کد های css اینلاین
- کد های css درون صفحه (head)
- کد های برون صفحه
css های اینلاین دقیقا در داخل کد های html نوشته میشوند، این روش کد نویسی به دلیل زمان بر بودن و همینطور سنگین کردن حجم سایت به هیچ عنوان پیشنهاد نمیشود. روش دوم نوشتن کد های css در ابتدای صفحات html است و روش سوم که بهترین و محبوب ترین روش موجود است، نوشتن کد های css در یک صفحه دیگر و در نهایت اتصال آن کد ها به صفحات html، با استفاده از یک خط کد html است.
یادگیری دو زبان نشانه گذاری سطح وب کار بسیار آسانی است و میتوانید آن را حتی با ویدیو های رایگان موجود در سطح وب یادبگیرید. پس از اینکه بر این دو زبان مسلط شدید، بهتر است تا به سراغ فریم ورک boot strap بروید.
(منظور از فریم ورک، تعدادی کتابخانه از قبل منتشر شده است که به برنامه نویسان کمک میکند تا از نوشتن بسیاری از کد ها خلاص شود. فریم ورک ها در تمامی زبان های برنامه نویسی نیز کاربرد دارند و هر زبان فریم ورک های گوناگون مختص به خود را دارد.)
بوت استرپ چیست؟ (boot strap)
بوت استرپ را میتوان فرشته نجات طراحان سایت دانست. در چند سال گذشته بh رشد تلفن های هوشمند، بسیاری از ترافیک در سطح وب، توسط تلفن های همراه اتفاق می افتد. این موضوع باعث ایجاد یک انقلاب در طراحی سایت، به نام طراحی سایت ریسپانسیو و یا واکنشگرا شد. منظور از طراحی سایت واکنشگرا، این است که اندازه های سایت نسبت به نمایشگر دستگاه مورد استفاده قرار گرفته توسط کاربر تغییر کند.
به طور مثال سایت مدیریو در صفحات دستکتاپ با اندازه کامل باز میشود، اما زمانی که با تلفن های همراه به آن رجوع شود، اندازه آن نسبت به صفحه نمایش تلفن تغییر میکند، المان ها به جای کنار هم قرار گفتن به صورت عمودی قرار میگیرند و در نهایت به استفاده آسان تر کاربر از سایت ختم میشود.
کاربرد های بوت استرپ
طراحی سایت ریسپانسیو در ابتدا بسیار کار مشکلی بود اما با رونمایی از بوت استرپ این کار بسیار آسان و سهل شد. بوت استرپ با استفاده از کد های آماده موجود در کتابخانه های خود، هر صفحه را به چند قسمت مساوی تبدیل میکند. به طور مثال صفحه اصلی سایت مدیریو را به 12 قسمت تقسیم میکند، سپس نسبت به نظر طراح سایت، 10 قسمت وسط آن به محتوای اصلی سایت میرسد، در همین 10 قسمت 2 قسمت به سایدبار (قسمت سمت چپ) سایت اختصاص پیدا میکند و 8 قسمت دیگر نیز مربوط به مابقی محتوا میشود.
حال زمانی که شخصی با تلفن همراه وارد این صفحه شود، طبق همین قسمت بندی ها و کد های بوت استرپ، دو قسمت کناری از 12 قسمت حذف میشوند، 8 قسمت مربوط به محتوای باقی مانده تبدیل به 4 قسمت شده (کوچک میشود) و 2 فسمت ساید بار نیز به پایین منتقل میشود.
این نحوه کار فریم ورک بوت استرپ بود و جالب اینجاست که بدانید تمامی این موارد توضیح داده شده صرفا با اتصال کد های html به یکی از کتابخانه های بوت استرپ و آن هم در زمان بسیار کمی اتفاق می افتد.
اما آیا تنها استفاده بوت استرپ همین است؟
خیر، بوت استرپ در هربار آپدیت خود قابلیت های فراوانی همراه با خود می آورد، یکی از پر استفاده ترین این قابلیت ها، دادن اشکال و رنگ های مختلف به کد های html است، به طور مثال با اتصال قطعه کد html ساید بار به یکی از کتابخانه های بوت استرپ، بدون نیاز به کد css اضافی، میتوانید به راحتی یک ظاهر از پیش تعیین شده به سایدبار سایت خود بدهید و آن را بسیار زیبا کنید.
تا اینجا در مورد زبان های css، html ، و فریم ورک boot strap صحبت شد. در صورت تسلط به این 3 شما عملا میتوانید ظاهر یک سایت را به صورت حرفه ای طراحی کنید اصطلاحا تا اینجا شما با روند طراحی ((قالب)) یک سایت آشنا شدید.
اما قبل از اینکه به ادامه مباحث برنامه نویسی بپردازیم باید یک سری نکات را نیز برای شما بیان کنیم:
نکات مورد نیاز برای طراحی front سایت
اولین نکته ای که قصد دارم به آن اشاره کنم، مربوط به دو زبان نشانه گذاری گفته شده است. این را باید بدانید که این دو زبان دائما در حال آپدیت شدن هستند و در یک طراحی سایت استاندارد از زبان های نشانه گذاری به روز رسانی شده استفاده میشود. در حال حاضر آخرین آپدیت زبان html که منتشر شده است، html5 است و در آخرین بروز رسانیِ زبان css نسخه 3 آن یا همان CSS3 منتشر شد. پس برای یادگیری حتما به سراغ این دو آپدیت بروید.
نکته بعدی، استفاده از یک محیط کدنویسی مناسب است. کد های css و html و به طور کلی هرنوع زبان برنامه نویسی باید در یک محیط حرفه ای برنامه نویسی نوشته شود. برای نوشتن کد های css و html ، محیط برنامه نویسی باید متناسب با زبان برنامه نویسی قسمت back end باشد، که در ادامه به آن میپردازیم. برای شروع بهتر است تا از یک محیط کد نویسی عمومی مانند notepad++ استفاده شود.
به عنوان یک نکته بسیار مهم باید بگوییم که یک طراح سایت موفق، باید تا حد متوسط با فتوشاپ آشنا باشد. بسیاری از طراحان سایت قبل از اقدام به طراحی سایت، طرح خود را در داخل برنامه فتوشاپ ایجاد میکنند و این موضوع باعث میشود تا طرح نهایی قالب وبسایت زیبایی خاص خود را داشته باشد.
در بحث طراحی قالب یا ظاهر سایت، یک زبان دیگر برای یادگرفتن نیاز وجود داردکه تسلط بر آن به شدت به بالا رفتن سطح کار شما کمک میکند.
زبان برنامه نویسی جاوا اسکریپت JS
زبان برنامه نویسی js و همینطور فریم ورک محبوب آن؛ jquery، به پویا تر شدن سایت کمک میکند. اگر به صفحه طراحی اپلیکیشن فروشگاهی در مدیریو مراجعه کرده باشید، در وسط این صفحه یک جدول مربوط به ویژگی های محصول وجود دارد که دارای یک منو است. با کلیک بر روی هرکدام از این منو ها، جزییات صفحه تغییر میکند و متن ها وتصاویر دیگری جایگزین آن میشود.
در گذشته این عمل با استفاده از زبان های برنامه نویسی بک اند انجام میشد که باعث بروز رسانی (لود) دوباره صفحه میشد و باعث اتلاف وقت بود. اما امروز با استفاده از زبان js، طراحی سایت بسیار پویا تر شده است و اعمالی از این قبیل با کمترین زمان و بهترین شکل ممکن انجام میشود.
زبان js علاوه بر استفاده در طراحی سایت، دارای گستره بسیار وسعی است و در صورت یادگیری آن میتوانید در آینده نیز به سمت فریم ورک های بسیار محبوب angular و react بروید.
اگر موارد گفته شده در بالا را به خوبی یادبگیرید، شما یک طراح قالب حرفه ای محسوب میشوید. در ادامه به توضیح قسمت back end میرویم:
back end
برای نوشتن کد های بک اندِ سایت، چندین زبان برنامه نویسی وجود دارد از جمله:
- php
- c# & asp
- phython
- و…
محبوب ترین زبان های برنامه نویسی در ایران زبان های asp و php است.
یکی از مهم ترین وظیفه های زبان های برنامه نویسی بک اند، اتصال قالب وبسایت، به بخش مدیریت و همینطور بخش دیتابیس (محل ذخیره سازی اطلاعات کاربر و سایت) است.
با استفاده از زبان های برنامه نویسی، مدیر سایت برای ایجاد تغییرات در سایت دیگر نیازی به دانستن کدنویسی ندارد و به راحتی با استفاده از پنل مدیریتی که به دیتابیس و نهایتا قالب متصل است، تغییرات مورد نیاز را در سایت ایجاد میکند.
برای یادگیری زبان های برنامه نویسی، پیشنهاد ما به شما زبان برنامه نویسی php است.
- این زبان دارای قابلیت های بسیار گسترده است.
- یادگیری آن آسان است
- استفاده از آن در شرکت ها و ادارات بسیار رایج است
و پس از آن نیز فریم ورک های زیادی در بر دارد که در زمان حال بسیار قابل استفاده اند، نمونه آن فریم ورک لاراول است که در برنامه نویسی بسیار مورد استفاده است.
طراحی سایت با وردپرس
طراحی سایت با وردپرس یکی روش های طراحی سایت است که برای یادگرفتن آن نیاز به آموزش کمی دارید اما باید بدانید که وردپرس کاران حرفه ای، با تمامی کد های سایت آشنا هستند. یکی از دلایلی که به شما پیشنهاد دادیم به سمت کدنویسی با php بروید، این است که وردپرس یک سیستم سایت ساز بسیار محبوب است و هسته اصلی وردپرس با زبان php نوشته شده.
اگر با زبان های کد نویسی که تا اینجا گفته شد آشنا باشید، یادگرفتن وردپرس برای شما بسیار آسان است. اما دقیقا وردپرس چیست؟
در سیستم وردپرس هسته اصلی سایت یا همان بک اند به صورت آماده نوشته شده است، طراح سایت وردپرسی میتواند برای طراحی سایت با وردپرس، یا از قالب های آماده پولی و رایگان استفاده کند و یا خود اقدام به طراحی قالب سایت نسبت به نیاز خود کند.
وردپرس مزایای بسیار زیادی دارد اما باید این را بدانید که وردپرس در سطح بالا جوابگوی هر کسب و کاری نیست، به طور مثال سایت های آموزشی بزرگ و یا سایت های فروشگاهی قوی الزاما باید از طراحی سایت اختصاصی استفاده کند. (دیجی کالا یا فرادرس)
اگر قصد این را دارید که بدون کد نویسی به سراغ آموزش و یادگیری وردپرس بروید توصیه ما این نقشه است:
- آموزش هاست و دامنه (آموزش های رایگان آپارت و یوتیوب)
- آشنایی کلی با css , html (آموزش های موجود در آپارت)
- آشنایی با راه اندازی وردپرس و انتقال به هاست و نصب قالب (آموزش های رایگان سایت های آموزش وردپرس ماننند میهن ودرپرس و همیار وب)
- و در نهایت آموزش طراحی داخلی سایت که میتوانید به صورت کارآموزی و یا ویدیو های آموزشیِ پولی در سایت های گفته شده در بالا آن را یادبگیرید.
برای آموزش و یادگیری طراحی سایت با وردپرس میتوانید از سایت های آموزش دهنده فارسی استفاده کنید، هزینه آموزش های وردپرسی اندک است و در صورتی که با زبان انگلیسی آشنا باشید در سایت هایی چون یوتیوب میتوانید از آموزش های رایگان استفاده کنید. البته راه اندازی سایت وردپرسی و تنها قسمت کوچکی از کار است و ما بقی آن نیاز به تجربه دارد.
روش های کسب درآمد از طراحی سایت
در ادامه مقاله برای شما روش هایی که یک طراح سایت میتواند از آن ها کسب درآمد کند را توضیح میدهیم:
استخدام در شرکت
اولین موقیعت شغلی یک طراح سایت، استخدام در یک شرکت است. شرکت های استخدام کننده در درجه اول شرکت های طراحی سایت و درجه دوم شرکت هایی هستند که به دنبال آنلاین کردن کسب و کار خود هستند و نیاز به یک نیروی طراحی سایت دارند. اگر شما هنوز تازه کار هستید پیشنهاد میشود در شرکت های طراحی سایت استخدام شوید تا بتوانید تجارب خوبی به دست بیاورید.
حقوق نیروی طراح سایت در ایران در بدترین حالت 1500/000 هزارتومان و تا 12000/000 تومان نیز ادامه دارد.
البته حقوق طراحان سایت وردپرسی نسبت به طراحان سایت اختصاصی کمتر است.
کار به صورت فریلنسری
پیشنهاد ما کار به صورت فریلنسری و یا آزاد کاری است. به این صورت که در سایت های مخصوص این فریلنسری، به گرفتن پروژه های طراحی سایت مشغول شوید. درآمد این کار به مراتب بالاتر از درآمد افراد استخدامی است. سایت های مخصوص فریلنسری در ایران سایت های انجام میدم، پونیشا و… هستند.
البته میتوانید با دادن آگهی در سایت هایی چون دیوار و شیپور و تبلیغات دیگر، به دریافت پروژه توسط خودتان و بدون واسطه بپردازید.
اگر زبان انگلیسی شما نیز خوب باشد با استفاده از سایت های فریلنسری خارجی و دریافت پروژه از کشور های عربی و اروپایی، میتوانید درآمد بسیار خوبی کسب کنید.
با توجه به نکات گفته شده درآمد یک طراح سایت آزاد کار چیزی بین 2000/000 تا 15000/000 تومان متغیر است.
طراحی قالب و فروش در مارکت ها
این روش بهترین حالت کسب درآمد از طراحی سایت است. در این روش شما یک قالب آماده تولید میکنید (مخصوصا قالب وردپرس) و آن را در مارکت های خارجی مانند تم فارست، کدکنیون و یا مارکت های ایرانی مانند ژاکت منتشر میکنید. اگر قالب شما دارای کیفیت بالایی باشد، درآمد شما واقعا نا محدود است. به طور مثال قالب فلت سام یک قالب فروشگاهی معروف است که بیشتر از 200 هزار بار خریداری شده.
قیمت این قالب 65 دلار است. این به معنای درآمد 12 میلیون دلار تا به اینجا بوده که در ادامه نیز افزایش پیدا میکند. در ایران نیز بسیاری از شرکت ها به تولید قالب و فروش آن در سایت های خارجی مشغول هستند، مخصوصا که با وضعیت فعلی قیمت دلار این درآمد بسیار زیاد است و همیشه نیز در حال افزایش است
میزان درآمد این روش نامحدود است.
آموزش و کسب درآمد
روش دیگر کسب درآمد از طراحی سایت، آموزش طراحی سایت است.
این روش میتواند به صورت سنتی اتفاق بیوفتد، یعنی در آموزشگاه ها و کلاس ها حضوری اقدام به آموزش طراحی سایت کنید. میانگین قیمت آموزش طراحی سایت در کلاس های حضوری و برای آموزش طراحی سایت اختصاصی (نه وردپرس)، چیزی بین 1 تا 2 میلیون تومان به ازای هر نفر است.
اما در روش نوین میتوانید به الهام گرفتن از سایت هایی چون 7lern، همیار وب و … به آموزش طراحی سایت آنلاین بپردازید که این روش نیز یک روش درآمد نامحدود است و میتواند هرروز افزایش داشته باشد. در ضمن در این روش شما علاوه بر آموزش های طراحی سایت، میتوانید به آموزش های دیگر مربوط به سایت نیز بپردازید.
در این مقاله سعی شد تا به صورت کامل یک نقشه راه برای آموزش طراحی سایت به شما داده شود. این نقشه درآخر به این صورت است:
- آموزش هاست
- آموزش دامنه
- آموزش HTML5
- آموزش CSS3
- آموزش Boot Strap
- آموزش java script
- آموزش زبان بک اند (php)
- آموزش فتوشاپ (اختیاری)
که این روند برای آموزش طراحی سایت وردپرسی صرفا به 4 قسمت اول خلاصه میشود.
در مورد روش های کسب درآمد از طراحی سایت نیز موارد پایین توضیح داده شد:
- استخدام با درآمد حداقل 1/5 میلیون تومان
- فریلنسری با درآمد حداقل 2 میلیون تومان
- طراحی قالب ورپرس و فروش در مارکت های قالب با درآمد نامحدود
- آموزش طراحی سایت به روش سنتی با حداقل درآمد 4 میلیون تومان
- آموزش طراحی سایت به روش نوین با درآمد نامحدود
امیدواریم که این مقاله برای شما مفید واقع شده باشد، در صورتی که در مورد موارد گفته شده سؤالی در ذهن شما باقی مانده، در قسمت نظرات متخصصان مدیریو به تمامی سؤالات شما پاسخ خواهند داد.
