تکیاد چه طور یک برنامه نویس یا طراح سایت شویم؟ - قسمت 1

چه طور یک برنامه نویس یا طراح سایت شویم؟ - قسمت 1

مدرس محمد جواد بخشی
این دوره آموزشی تکمیل شده است.
انجمن پرسش و پاسخ این آموزش

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

به طور کلی به افرادی که در زمینه پیاده سازی برنامه های تحت وب (همان وب سایت ها) فعالیت می کنند توسعه دهنده وب (web developer) گفته می شود. توسعه دهندگان وب به سه دسته کلی زیر تقسیم می شوند: طراح وب (web designer) ، برنامه نویس وب (web programmer) یا ترکیبی از هردو (full stack web developer) که شما می توانید در هر یک از این دسته ها با توجه به علاقه خود به طور حرفه ای فعالیت کنید.
در ادامه هر یک از این موارد و تکنولوژی های مرتبط با آن را توضیح می دهم.

طراح وب (Web designer) کیست؟

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

طراحان حرفه ای سایت چه تکنولوژی هایی را باید یاد بگیرند؟

زبان نشانه گذاری HTML

HTML پایه ای ترین تکنولوژی هست که باید یک طراح سایت یاد بگیرد. با استفاده از دستورات این زبان شما به مرورگر وب (فایرفاکس، کروم و..) می فهمانید که چه المان هایی در صفحه وب قرار است نمایش یابد. برای مثال با یک دستور به صورت زیر ما به مرورگر می فهمانیم که یک تصویر در صفحه وب باید نمایش داده شود.

<img src="flower.jpg" />

پس در واقع اسکلت و ساختار اصلی یک صفحه وب را دستورات HTML تشکیل می دهند.

CSS) Cascading Style Sheets)

بعد از یادگیری HTML، طراح سایت می تواند تنها ساختار اصلی و بنیادی یک صفحه وب را مشخص کند. با استفاده از دستورات HTML نمی توانید به مرورگر بگید که رنگ متن، اندازه متن، رنگ لینک ها و یا محل قرار گیری لینک ها، باکس ها، تصاویر و .. به چه صورت باشد. در این مرحله باید تکنولوژی دیگری به نام CSS را یاد بگیرید. به کمک دستورات CSS می توانید این کار ها را انجام دهید. در واقع شما استایل (style) المان های صفحه وب را با دستورات CSS مشخص می کنید. برای مثال اگر بخواهید بگویید که تصویری که قرار میدهیم با هر المانی از بالا و پایین 30 پیکسل فاصله داشته باشد، با کد زیر در CSS این کار را می توانیم انجام دهیم. قابلیت های CSS به همین موارد خلاصه نمی شود، در ورژن آخر این تکنولوژی (CSS3) قابلیت های بیشتری همچون انیمیشن و موارد دیگری که باعث جذابیت هر چه بیشتر صفحات وب می شود نیز قرار داده شده است.

 img {
    margin-top: 30px;
    margin-bottom: 30px;
}

به طور خلاصه زیبایی و تنظیمات گرافیکی قالب سایت را CSS بر عهده دارد.

زبان سمت کاربر یا جاوا اسکریپت (javascript)

تکنولوژی نهایی و تکمیلی برای یک طراح سایت حرفه ای، زبان قدرتمند جاوا اسکریپت است. حتما برای شما حین گردش در اینترنت پیش آمده است که روی یک دکمه ارسال نظر کلیک می کنید و نظر شما ثبت می شود. در حالی که صفحه رفرش نمی شود. یا با کلیک روی منو ها به حالت کشویی باز و بسته می شوند ( این قسمت را به خصوص در بخش جستجو پیشرفته فروشگاه ها می توانید ببینید) و یا وقتی یک چک باکس را تیک می زنید، یکسری فیلد دیگر در فرم ظاهر می شود. همه این کار ها بخش کوچکی از قدرت زبان جاوا اسکریپت است.
با استفاده از این زبان شما رفتار المان های صفحه وب را مشخص می کنید. مثلا با کد نویسی توسط دستورات این زبان مشخص می کنید اگر روی یک دکمه کلیک شد، چه اتفاقی بیافتد. یک کد نمونه از این زبان که با کلیک روی دکمه فرضی یک پیام را به کاربر سایت نمایش میدهد.

document.getElementById("btn-show-message")
    .click(function(){
        alert('hi dear it's a message');
    });

آیا تنها همین موارد برای تبدیل شدن به طراح وب کافی است؟

البته که تکنولوژی های دیگری هم وجود دارد که کار طراحی سایت را راحت تر می کند و منجر به طراحی های حرفه ای تر و قابل استفاده مجدد می شود. برای مثال کد نویسی تنها با دستورات CSS برای طراحی قالب های خیلی حرفه ای کار سختی هست. امروزه طراحان وب معمولا از فریم ورک های این زبان به عنوان مثال فریم ورک Bootstrap استفاده می کنند. برای زبان جاوا اسکریپت نیز فریم ورک های قدرتمندی طراحی شده است. منظور از فریم ورک مجموعه ای از کد های کنار هم هست که یکسری کار معمول را از قبل پیاده سازی کرده اند و باعث افزایش سرعت و راحتی پیاده سازی می شوند.
بعد از یاد گیری موارد بالا توصیه می کنم برای طراحی حرفه ای تر پس از یاد گیری CSS به سمت Bootstrap و بعد از یادگیری جاوا اسکریپت به سمت یاد گیری یکی از کتابخانه های معروف جاوا اسکریپت همچون Jquery ، Vuejs ، Angular یا React بروید.

در مورد سایر گرایش ها در سری بعدی همین مطلب صحبت خواهم کرد. امیدوارم که این مطلب کمک خوبی به دوستانی که در ابتدای مسیر قرار دارند کرده باشد.

برای ارسال دیدگاه باید ابتدا وارد حساب کاربری خود شوید.