در این نوشتهیعلمی من سیاوش رستمی مدیر وبسایت براتون مینویسم که چجوری ۱۲ سال پیش طراحی سایت در مشهد رو آغاز کردم و فرایند آموزشیم چطوری گذشت تا افرادیکه می خوان ساخت وب سایت رو به صورت حرفه ای فراگیری ببینن مسیر اشتباهی رو طی نکنند.
داستان علاقمندیم به ساخت وب سایت
نسبتاً سال ۱۳۸۹ یا ۹۰ بود که به طراحی وب علاقمند شدم یادمه اون زمان خیلی وبسایت داشتن هنوز تو بورس نبود. برای همین میخواستم یک وبسایت داشته باشم که فعالیت دلیوری خوراک رو ایفا بده مثل کاری که الان اسنپ فود داره ایفا میده.
برای همین گشتم ببینم کی میتونه برام یک وبسایت ماهر طراحی بکنه، اون مجال دانشجو بودم و اواخر بعدازظهر لیسانسمو میگذروندم. بالاخره یکیاز رو پیدا کردم که از دوستای نزدیک دانشگام بود که برای گذروندن زندگی شغل ساخت سایت هم اجرا میداد خیلی ماهر خلا اما خوب کارش بدم نبود.
به همین عامل بهش یقین کردم و باهاش یه قرار گذاشتم و بهش گفتم چه چیزی میخوام.
پس از صحبتام و زمانی که برای طراحی وب مشخص کرد از هم خداحافظی کردیم و من خیالم گردآوری بود که یک تارنما خوب برام طراحی میشه درست همون چیزی که میخوام.
چندین روز گذشت و روزی که قرار بود دموی اولیه سایت رو مشاهده کنم (دمو مراد همون تصویر و قالب اول سایت هستش که مجری به کارفرما نشون میده تا با هم بتونن به طرح نهایی برسن) رسید بعد از اینکه دموی نخستین رو دیدم زیاد ذوق زده نبودم چون اون طرح کلی با نظرها تفاوت داشت.
پس از کلی حرف و تغییر و تحول به طرح آخری رسیدیم که بازم از لحاظ المان های ساخت وب سایت انقدرا ماهر نبود.
بعد از تحویل عمل اون چیزی که اول تو ذهنم بهش درنگ میکردم و اون طرحی که تحویل گرفته بودم یه جورایی زمین تا آسمون متعدد بودن اون دوستمم به خیال مشغله ای که داشت یا نمیتونست طرح رو تغییرو تحول بده یا اگرم میخواست کاری بکن انقد طول می کشید که اگه کاری نمیکرد بهتر بود.
برای همین خودم دست به فعالیت شدم و درباره سایتی که طراحی کرده بود هم تو اینترنت و هم تو تعدادی تا کتاب مطالعه کردم.
اون زمان سایت رو با وردپرس طراحی کرده بود و من بهتدریج درباره وردپرس کلی اطلاعات جمع کردم زمانی شروع کردم به اجرا دادن استیناف دیدم چقدر این فعالیت جذابه یک المان رو در سایت تغییر تحول میده وشکل نهایی تغییر میکنه دیدم خیلی هم سخت نیست فقط بایستی یکم زمان بزاری تا این مورد ها رو یاد بگیری.
من اون مجال فعالیت خاصی به جز درس خوندن که اونم معمولا شب امتحان بود نداشتم J
واسه همین وقتم آزاد بود از سیر تا پیاز وردپرس رو خوندم و باهاش شغل کردم.
اولین پژوهش که روی وبسایت ایفا دادم دیدم اگه بخوام خیلی حرفه ای طراحی وب رو اجرا بدم باید نخستین گرافیک و طراحی گرافیک رو خیال بگیرم.
یادگرفتن طراحی وب سایت فرانت اند ماهر
۱. آموزش طراحی گرافیک قدم نخستین برای ساخت وب سایت حرفه ای
برای این که به یک طراح وبسایت حرفه ای تبدیل بشید بایستی اول بتونید گرافیک عمل حرفه ای بشید. بیشتر از ۵۰ درصد شغل طراحی وب گرافیک از طراحی لوگو گرفته تا طراحی اسلایدر و طراحی بنر و رنگبندی و … همه فعالیت طراح گرافیکه.
برای همین فتوشاپ رو به صورت بی نقص یادگرفتم و تعدادی تا کتاب خوندم و فیلم آموزشی دیدم.
بعداز اینکه فتوشاپ رو خیال و خاطر گرفتم برای اینکه بتونم خیلی وارفته تر با طراحی وب سایت کنار بیام رفتم سراغ زیربنای یادگرفتن طراحی یعنی یادگیری HTML / CSS و JS و این موارد رو به صورت خودآموز با نگاه کردن فیلم های آموزشی و فعالیت با سایت W3schools.com خاطر گرفتم.
۲. قدم دوم آموزش اپ نویسی ابتدایی ساخت سایت
آموزش اپ هایی مثل html, css و JS خیلی لذت بخش بود. اولیه از کلیه بایستی HTML رو خاطر بگیرید چون سنگ بنا و اسکلت ساختمان ساخت سایت شما محسوب میشه.
من خود آموز این عمل رو کردم وبرای یادگرفتن کلی وقت گذاشتم ولی توصیه میکنم که شما مطلقا به معلم رجوعکنید که فرصت زیادی ازتون گرفته نشه.
درصورتیکه میخواید به صورت خودآموز و خودمحور خیال و خاطر بگیرید وارد تارنما W3schools.com بشید اونجا کلی اطلاعات به صورت صفر تا صد برای یادگرفتن html قرار داره.
فقط موردی که وجود داره سایت به صورت انگلیسی میباشد که اگه ارتباط بر قرار نمیکنید میتونید خیلی شل و ول با گوگل ترنسلیت ترجمه فرمایید.البته لهجه انگلیسیش به حدی جاری است که خیلی شل میتونید متوجه بشید که چی گفته.
برای یادگیری CSS و JS یا همون جاوا اسکریپت هم میتونید از همین وبسایت استعمال نمائید و چنانچه حرفه ای عمل کنید قول میدم این وب سایت نیازهای حرفه ای فعالیت رو براتون براورده کنه.
۳. آموزش قالب های و یا فریم ورک های بوت استرپ
بوت استرپ یک قالب یا کادر ورک برای کسایی که میخوان کار رو سریع جلو ببرن ولی قبلش می بایست شما کامل با html, css و js آشنایی داشته باشید.
این فریمورک دربرگیرنده کلاس ها و آیدی های html , css و js هست که از پیشین نرم افزار نویسی شده و شما می بایست کلاس ها و آیدی ها و قالب کلی رو خیال و خاطر بگیرید.
درواقع این قالب فعالیت ریسپانسیو بودن سایت رو وا رفته میکنه (ریسپانسیو بودن یعنی وب سایت شما برای تلفن همراه هم سازگار باشه)
البته یادگیری بوت استرپ بیشتر برای اون افرادی هست که میخوان طراحی سایت رو به صورت کد نویسی از صفر تا صد یاد بگیرن و اشخاصی که دنبال یادگیری طراحی وب با وردپرس و بدون کد نویسی هستن نمیخوان این مرحله رو یادبگیرن.
برای بوت استرپ هم به صورت حرفه ای میتونید از وب سایت w3schools یاری بگیرید.
تا اینجا هرچیری که گفته شد مربوط به طراحی سایت در قسمت فرانت اند بود (فرانت اند یعنی ساخت وب سایت در قسمت بصری و جایی که شما میتونید با اون ارتباط بر قرار نمائید و تارنما رو به صورت نهایی ببینید)
وب سایت ها به دودسته تقسیم میشن :
وب سایت های استاتیک
تارنما های دینامیک
وب سایت های استاتیک
اون مجموعه از وب سایت ها هستند که شما فقط با آموزش همگی مواردی که در صدر گفتم میتونید یک وبسایت رو به صورت کامل طراحی کنید و به بک اند و دیتابیس که درپی میخوام توصیح بدم احتیاج نداره.
وبسایت های دینامیک
سایت هایی میباشند که علاوه بر قسمت فرانت اند قسمت بک اند و دیتابیس هم دارند که ولی بک اند و دیتابیس یکیاز هستن.
کدنویسی این سایت ها زمانبرتر و دشوار تره.
در این نوشتهیعلمی من سیاوش رستمی مدیر وبسایت براتون مینویسم که چجوری ۱۲ سال پیش طراحی سایت در مشهد رو آغاز کردم و فرایند آموزشیم چطوری گذشت تا افرادیکه می خوان ساخت وب سایت رو به صورت حرفه ای فراگیری ببینن مسیر اشتباهی رو طی نکنند.
داستان علاقمندیم به ساخت وب سایت
نسبتاً سال ۱۳۸۹ یا ۹۰ بود که به طراحی وب علاقمند شدم یادمه اون زمان خیلی وبسایت داشتن هنوز تو بورس نبود. برای همین میخواستم یک وبسایت داشته باشم که فعالیت دلیوری خوراک رو ایفا بده مثل کاری که الان اسنپ فود داره ایفا میده.
برای همین گشتم ببینم کی میتونه برام یک وبسایت ماهر طراحی بکنه، اون مجال دانشجو بودم و اواخر بعدازظهر لیسانسمو میگذروندم. بالاخره یکیاز رو پیدا کردم که از دوستای نزدیک دانشگام بود که برای گذروندن زندگی شغل ساخت سایت هم اجرا میداد خیلی ماهر خلا اما خوب کارش بدم نبود.
به همین عامل بهش یقین کردم و باهاش یه قرار گذاشتم و بهش گفتم چه چیزی میخوام.
پس از صحبتام و زمانی که برای طراحی وب مشخص کرد از هم خداحافظی کردیم و من خیالم گردآوری بود که یک تارنما خوب برام طراحی میشه درست همون چیزی که میخوام.
چندین روز گذشت و روزی که قرار بود دموی اولیه سایت رو مشاهده کنم (دمو مراد همون تصویر و قالب اول سایت هستش که مجری به کارفرما نشون میده تا با هم بتونن به طرح نهایی برسن) رسید بعد از اینکه دموی نخستین رو دیدم زیاد ذوق زده نبودم چون اون طرح کلی با نظرها تفاوت داشت.
پس از کلی حرف و تغییر و تحول به طرح آخری رسیدیم که بازم از لحاظ المان های ساخت وب سایت انقدرا ماهر نبود.
بعد از تحویل عمل اون چیزی که اول تو ذهنم بهش درنگ میکردم و اون طرحی که تحویل گرفته بودم یه جورایی زمین تا آسمون متعدد بودن اون دوستمم به خیال مشغله ای که داشت یا نمیتونست طرح رو تغییرو تحول بده یا اگرم میخواست کاری بکن انقد طول می کشید که اگه کاری نمیکرد بهتر بود.
برای همین خودم دست به فعالیت شدم و درباره سایتی که طراحی کرده بود هم تو اینترنت و هم تو تعدادی تا کتاب مطالعه کردم.
اون زمان سایت رو با وردپرس طراحی کرده بود و من بهتدریج درباره وردپرس کلی اطلاعات جمع کردم زمانی شروع کردم به اجرا دادن استیناف دیدم چقدر این فعالیت جذابه یک المان رو در سایت تغییر تحول میده وشکل نهایی تغییر میکنه دیدم خیلی هم سخت نیست فقط بایستی یکم زمان بزاری تا این مورد ها رو یاد بگیری.
من اون مجال فعالیت خاصی به جز درس خوندن که اونم معمولا شب امتحان بود نداشتم J
واسه همین وقتم آزاد بود از سیر تا پیاز وردپرس رو خوندم و باهاش شغل کردم.
اولین پژوهش که روی وبسایت ایفا دادم دیدم اگه بخوام خیلی حرفه ای طراحی وب رو اجرا بدم باید نخستین گرافیک و طراحی گرافیک رو خیال بگیرم.
یادگرفتن طراحی وب سایت فرانت اند ماهر
۱. آموزش طراحی گرافیک قدم نخستین برای ساخت وب سایت حرفه ای
برای این که به یک طراح وبسایت حرفه ای تبدیل بشید بایستی اول بتونید گرافیک عمل حرفه ای بشید. بیشتر از ۵۰ درصد شغل طراحی وب گرافیک از طراحی لوگو گرفته تا طراحی اسلایدر و طراحی بنر و رنگبندی و … همه فعالیت طراح گرافیکه.
برای همین فتوشاپ رو به صورت بی نقص یادگرفتم و تعدادی تا کتاب خوندم و فیلم آموزشی دیدم.
بعداز اینکه فتوشاپ رو خیال و خاطر گرفتم برای اینکه بتونم خیلی وارفته تر با طراحی وب سایت کنار بیام رفتم سراغ زیربنای یادگرفتن طراحی یعنی یادگیری HTML / CSS و JS و این موارد رو به صورت خودآموز با نگاه کردن فیلم های آموزشی و فعالیت با سایت W3schools.com خاطر گرفتم.
۲. قدم دوم آموزش اپ نویسی ابتدایی ساخت سایت
آموزش اپ هایی مثل html, css و JS خیلی لذت بخش بود. اولیه از کلیه بایستی HTML رو خاطر بگیرید چون سنگ بنا و اسکلت ساختمان ساخت سایت شما محسوب میشه.
من خود آموز این عمل رو کردم وبرای یادگرفتن کلی وقت گذاشتم ولی توصیه میکنم که شما مطلقا به معلم رجوعکنید که فرصت زیادی ازتون گرفته نشه.
درصورتیکه میخواید به صورت خودآموز و خودمحور خیال و خاطر بگیرید وارد تارنما W3schools.com بشید اونجا کلی اطلاعات به صورت صفر تا صد برای یادگرفتن html قرار داره.
فقط موردی که وجود داره سایت به صورت انگلیسی میباشد که اگه ارتباط بر قرار نمیکنید میتونید خیلی شل و ول با گوگل ترنسلیت ترجمه فرمایید.البته لهجه انگلیسیش به حدی جاری است که خیلی شل میتونید متوجه بشید که چی گفته.
برای یادگیری CSS و JS یا همون جاوا اسکریپت هم میتونید از همین وبسایت استعمال نمائید و چنانچه حرفه ای عمل کنید قول میدم این وب سایت نیازهای حرفه ای فعالیت رو براتون براورده کنه.
۳. آموزش قالب های و یا فریم ورک های بوت استرپ
بوت استرپ یک قالب یا کادر ورک برای کسایی که میخوان کار رو سریع جلو ببرن ولی قبلش می بایست شما کامل با html, css و js آشنایی داشته باشید.
این فریمورک دربرگیرنده کلاس ها و آیدی های html , css و js هست که از پیشین نرم افزار نویسی شده و شما می بایست کلاس ها و آیدی ها و قالب کلی رو خیال و خاطر بگیرید.
درواقع این قالب فعالیت ریسپانسیو بودن سایت رو وا رفته میکنه (ریسپانسیو بودن یعنی وب سایت شما برای تلفن همراه هم سازگار باشه)
البته یادگیری بوت استرپ بیشتر برای اون افرادی هست که میخوان طراحی سایت رو به صورت کد نویسی از صفر تا صد یاد بگیرن و اشخاصی که دنبال یادگیری طراحی وب با وردپرس و بدون کد نویسی هستن نمیخوان این مرحله رو یادبگیرن.
برای بوت استرپ هم به صورت حرفه ای میتونید از وب سایت w3schools یاری بگیرید.
تا اینجا هرچیری که گفته شد مربوط به طراحی سایت در قسمت فرانت اند بود (فرانت اند یعنی ساخت وب سایت در قسمت بصری و جایی که شما میتونید با اون ارتباط بر قرار نمائید و تارنما رو به صورت نهایی ببینید)
وب سایت ها به دودسته تقسیم میشن :
وب سایت های استاتیک
تارنما های دینامیک
وب سایت های استاتیک
اون مجموعه از وب سایت ها هستند که شما فقط با آموزش همگی مواردی که در صدر گفتم میتونید یک وبسایت رو به صورت کامل طراحی کنید و به بک اند و دیتابیس که درپی میخوام توصیح بدم احتیاج نداره.
وبسایت های دینامیک
سایت هایی میباشند که علاوه بر قسمت فرانت اند قسمت بک اند و دیتابیس هم دارند که ولی بک اند و دیتابیس یکیاز هستن.
کدنویسی این سایت ها زمانبرتر و دشوار تره.
عنصرها تقویت کننده بهینه سازی