در این مقاله من سیاوش رستمی مدیر سایت وب داران براتون مینویسم که چجوری 12 سال پیش طراحی سایت رو شروع کردم و روند آموزشیم چطوری گذشت تا افرادیکه می خوان طراحی سایت رو به صورت حرفه ای آموزش ببینن مسیر اشتباهی رو طی نکنند.
داستان علاقمندیم به طراحی سایت
تقریبا سال 1389 یا 90 بود که به طراحی سایت علاقمند شدم یادمه اون زمان خیلی سایت داشتن هنوز تو بورس نبود. برای همین میخواستم یک سایت داشته باشم که کار دلیوری غذا رو انجام بده مثل کاری که الان اسنپ فود داره انجام میده.
برای همین گشتم ببینم کی میتونه برام یک سایت حرفه ای طراحی بکنه، اون زمان دانشجو بودم و اواخر دوره لیسانسمو میگذروندم. بالاخره یکی رو پیدا کردم که از دوستای نزدیک دانشگام بود که برای گذروندن زندگی کار طراحی وب سایت هم انجام میداد خیلی حرفه ای نبود ولی خوب کارش بدم نبود.
به همین دلیل بهش اطمینان کردم و باهاش یه قرار گذاشتم و بهش گفتم چه چیزی میخوام.
بعد از صحبتام و زمانی که برای طراحی سایت مشخص کرد از هم خداحافظی کردیم و من خیالم جمع بود که یک سایت خوب برام طراحی میشه درست همون چیزی که میخوام.
چند روز گذشت و روزی که قرار بود دموی اولیه سایت رو مشاهده کنم (دمو منظور همون تصویر و قالب اولیه سایت هستش که مجری به کارفرما نشون میده تا با هم بتونن به طرح نهایی برسن) رسید بعد از اینکه دموی اولیه رو دیدم زیاد خوشحال نبودم چون اون طرح کلی با ایده ها تفاوت داشت.
بعد از کلی صحبت و تغییر به طرح نهایی رسیدیم که بازم از لحاظ المان های طراحی سایت انقدرا حرفه ای نبود.
یک وب سایت جذاب و پولساز حق شماست. این فرصت رو از دست نده. همین الان به برگه طراحی وب سایت مراجعه کن تا یک مشاوره عالی بهت بدم.
تماس بگیریدبعد از تحویل کار اون چیزی که اول تو ذهنم بهش فکر میکردم و اون طرحی که تحویل گرفته بودم یه جورایی زمین تا آسمون متفاوت بودن اون دوستمم به خاطر مشغله ای که داشت یا نمیتونست طرح رو تغییر بده یا اگرم میخواست کاری بکن انقد طول میکشید که اگه کاری نمیکرد بهتر بود.
برای همین خودم دست به کار شدم و درباره سایتی که طراحی کرده بود هم تو اینترنت و هم تو چند تا کتاب تحقیق کردم.
اون زمان سایت رو با وردپرس طراحی کرده بود و من کم کم درباره وردپرس کلی اطلاعات جمع کردم وقتی شروع کردم به انجام دادن تحقیق دیدم چقدر این کار جذابه یک المان رو در سایت تغییر میده وشکل نهایی تغییر میکنه دیدم خیلی هم سخت نیست فقط باید یکم زمان بزاری تا این موارد رو یاد بگیری.
من اون زمان کار خاصی به جز درس خوندن که اونم معمولا شب امتحان بود نداشتم J
واسه همین وقتم آزاد بود از سیر تا پیاز وردپرس رو خوندم و باهاش کار کردم.
اولین بررسی که روی سایت انجام دادم دیدم اگه بخوام خیلی حرفه ای طراحی سایت رو انجام بدم باید اول گرافیک و طراحی گرافیک رو یاد بگیرم.
آموزش طراحی سایت فرانت اند حرفه ای
1. آموزش طراحی گرافیک قدم اول برای طراحی سایت حرفه ای
برای این که به یک طراح سایت حرفه ای تبدیل بشید باید اول بتونید گرافیک کار حرفه ای بشید. بیشتر از 50 درصد کار طراحی سایت گرافیک از طراحی لوگو گرفته تا طراحی اسلایدر و طراحی بنر و رنگبندی و … همه کار طراح گرافیکه.
برای همین فتوشاپ رو به صورت کامل یادگرفتم و چند تا کتاب خوندم و فیلم آموزشی دیدم.
بعد از اینکه فتوشاپ رو یاد گرفتم برای اینکه بتونم خیلی راحت تر با طراحی سایت کنار بیام رفتم سراغ زیربنای آموزش طراحی یعنی یادگیری HTML / CSS و JS و این موارد رو به صورت خودآموز با نگاه کردن فیلم های آموزشی و کار با سایت W3schools.com یاد گرفتم.
2. قدم دوم آموزش برنامه نویسی ابتدایی طراحی سایت
آموزش برنامه هایی مثل html, css و JS خیلی لذت بخش بود. اول از همه باید HTML رو یاد بگیرید چون سنگ بنا و اسکلت ساختمان طراحی سایت شما محسوب میشه.
من خود آموز این کار رو کردم وبرای آموزش کلی وقت گذاشتم ولی توصیه میکنم که شما حتما به مدرس رجوع کنید که زمان زیادی ازتون گرفته نشه.
اگر میخواید به صورت خودآموز و خودمحور یاد بگیرید وارد سایت W3schools.com بشید اونجا کلی اطلاعات به صورت صفر تا صد برای آموزش html قرار داره.
فقط موردی که وجود داره سایت به صورت انگلیسی هست که اگه ارتباط بر قرار نمیکنید میتونید خیلی راحت با گوگل ترنسلیت ترجمه کنید.البته زبان انگلیسیش به حدی روان هست که خیلی راحت میتونید متوجه بشید که چی گفته.
برای یادگیری CSS و JS یا همون جاوا اسکریپت هم میتونید از همین سایت استفاده کنید و اگر حرفه ای کار کنید قول میدم این سایت نیازهای حرفه ای کار رو براتون براورده کنه.
3. آموزش قالب های و یا فریم ورک های بوت استرپ
بوت استرپ یک قالب یا فریم ورک برای کسایی که میخوان کار رو سریع جلو ببرن ولی قبلش باید شما کامل با html, css و js آشنایی داشته باشید.
این فریمورک شامل کلاس ها و آیدی های html , css و js هست که از قبل برنامه نویسی شده و شما باید کلاس ها و آیدی ها و قالب کلی رو یاد بگیرید.
درواقع این قالب کار ریسپانسیو بودن سایت رو راحت میکنه (ریسپانسیو بودن یعنی سایت شما برای موبایل هم سازگار باشه)
البته یادگیری بوت استرپ بیشتر برای اون افرادی هست که میخوان طراحی سایت رو به صورت کد نویسی از صفر تا صد یاد بگیرن و افرادی که دنبال یادگیری طراحی سایت با وردپرس و بدون کد نویسی هستن نمیخوان این مرحله رو یادبگیرن.
برای بوت استرپ هم به صورت حرفه ای میتونید از سایت w3schools کمک بگیرید.
تا اینجا هرچیری که گفته شد مربوط به طراحی سایت در قسمت فرانت اند بود (فرانت اند یعنی طراحی سایت در قسمت بصری و جایی که شما میتونید با اون ارتباط بر قرار کنید و وب سایت رو به صورت نهایی مشاهده کنید)
سایت ها به دودسته تقسیم میشن :
- سایت های استاتیک
- سایت های دینامیک
سایت های استاتیک
اون دسته از سایت ها هستند که شما فقط با آموزش کلیه مواردی که در بالا گفتم میتونید یک سایت رو به صورت کامل طراحی کنید و به بک اند و دیتابیس که در ادامه میخوام توصیح بدم احتیاج نداره.
سایت های دینامیک
سایت هایی هستند که علاوه بر قسمت فرانت اند قسمت بک اند و دیتابیس هم دارند که البته بک اند و دیتابیس یکی هستن.
کدنویسی این سایت ها زمانبرتر و سخت تره.
آموزش طراحی یا برنامه نویسی بک اند سایت به صورت حرفه ای
1. آموزش برنامه نویسی php
برای آموزش و یادگیری برنامه نویسی php دوباره میتونم شما رو به سایت w3schools ارجاع بدم.
Php یک زبان open source محسوب میشه یعنی شما میتونید تغییرات وسیعی به دلخواه ایجاد کنید اگه به این زبان مسلط باشید.
برای اینکه بتونید در قسمت بک اند فعالیت کنید و یک پنل مدیریتی برای سایت خودتون داشته باشید میتونید از این زبان استفاده کنید.
2. Python پایتون
Python نیز میتواند به عنوان زبان برنامهنویسی سمت سرور برای توسعه وبسایتها استفاده شود. فریمورکهایی مانند Django و Flask از Python برای ساخت وبسایتهای دینامیک استفاده میکنند.
3. Ruby رابی
Ruby نیز برای توسعه وبسایتها و برنامههای وبی مورد استفاده قرار میگیرد. فریمورک Ruby on Rails از Ruby برای تسهیل توسعه وبسایتها استفاده میکند.
4. Java جاوا
Java به عنوان یک زبان برنامهنویسی متعدد منظوره، در توسعه برنامههای وب نیز استفاده میشود. فریمورکهایی مانند Spring به Java کمک میکنند تا وبسایتهای قدرتمند و ایمنی ایجاد شود.
5. C#
C# نیز یک زبان برنامهنویسی سمت سرور است که برای توسعه وبسایتهای ASP.NET استفاده میشود. این زبان به طور گسترده در برنامهنویسی وب مایکروسافت مورد استفاده قرار میگیرد.
همچنین، برای توسعه وبسایتها از دیگر تکنولوژیها و ابزارهایی مانند پایگاه دادهها، سیستمهای مدیریت محتوا (CMS) مانند WordPress، فریمورکهای مختلف (مثل Angular، React، و Vue.js)، و ابزارهای توسعه مخصوص مانند Visual Studio Code و Git نیز استفاده میشود. انتخاب زبانها و ابزار مناسب برای پروژه وبسایت معمولاً به نیازها و ترجیحات شما و تیم توسعه بستگی دارد.