طراحی سایت را از کجا شروع کنیم؟

چگونه طراحی سایت یاد بگیریم

معمولا کسانی که تازه وارد دنیای طراحی وب می شوند ، سوال بالا یکی از اصلی ترین سوال هاشون هست . چون با انبوهی از زبان ها ، برنامه ها و تکنولوژی ها مواجه می شوند و نمی دانند از کجا باید شروع کنند و چطور ادامه دهند.

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

آیا ورود به دنیای طراحی وب پیش نیاز خاصی نیاز دارد؟

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

مفاهیم اساسی در طراحی وب چه چیزهایی هستند؟

در طراحی وب ما چند مفهوم کلی داریم:

  1. HTML, CSS, PHP, ASP.NET و …. : این ها زبان های برنامه نویسی هستند که ما برای منظورهای مختلف از آنها استفاده می کنیم و مهم ترین بخش یادگیری طراحی وب هم شامل یادگیری این مباحث است.
  2. Frontpage, DreamWaver, ExpressionWeb, Notepad++, PhpStorm و … : این ها ویرایشگر (Editor یا IDE) های مورد استفاده ما هستند تا داخل آنها بتوانیم کدهای برنامه نویسی را تایپ کنیم.در واقع اینها جزو ابزارهای کار ما هستند و شاید نیاز نباشد دقیقا یکی از آنها را هم یاد بگیریم.مهم زبان های برنامه نویسی هستند که در اول ذکر شد.
  3. Chrome, Firefox, InternetExplorer, Opera و … : به احتمال زیاد الان با یکی از همین مرورگرها در حال مطالعه این مطلب هستید! بله اینها مرورگرهای وب (Web Browser) های معروفی هستند که به ما کمک می کنند وب سایت های اینترنتی را باز کنیم و ببینیم.

این ۳ مورد به نظر من اصلی ترین بخش هایی هستند که شما در مسیر یادگیری طراحی وب با آنها کار خواهید کرد و به آنها نیاز پیدا می کنید.

حالا از کجا شروع کنم؟

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

  • طراحی وب یا Front-End بیشتر شامل زبان های سمت کاربر (زبان هایی که در کامپیوتر کاربر اجرا می شوند) می شود مثل HTML-CSS-JavaScript و به ظاهر سایت مربوط است.
  • برنامه نویسی وب یا Back-End بیشتر زبان های سمت سرور (زبان هایی که در سرور یا هاست اجرا می شوند) می شود مثل PHP-ASP.net و به پشت صحنه سایت مربوط است.

اگر می خواهید Frond-End کار کنید

پیشنهاد می کنیم زبان های زیر را به ترتیب یاد بگیرید:

  • HTML (ضروری)
  • CSS (ضروری)
  • SASS (اختیاری برای بهبود سرعت و کیفیت کارها)
  • JavaScript (اختیاریِ رو به ضروری! ادامه میگم چرا)

HTML : پیشنهاد من این است که از HTML شروع کنید. همه وب سایت های دنیا معمولا از HTML استفاده می کنند و انقدر این درصد بالاست که می توان گفت هیچ سایتی بدون HTML نیست! پس اگر جایی شنیده اید که HTML مهم نیست حرف زیاد درستی نیست. HTML در واقع مثل میل گرد و آجر ساختمان می ماند!

CSS : بعد از یادگرفتن تگ های HTML، نوبت به CSS می رسد.کاری که CSS می کند این است که میل گرد و آجری که روی زمین ریخته است، کنار هم نگه دارد تا یک ساختمان واقعی (در اینجا صفحه وب) ساخته شود. به علاوه نمای ساختمان نیز با همین CSS مزین خواهد شد و رنگ و لعاب خواهد گرفت. پس این دو تا لازم و ملزوم هم هستند.

SASS : این مورد شاید به گوش تان نخورده باشد جزو ملزومات هم نیست ولی اگر توانستید بهتر است سراغ این هم بروید. نوشتن کدهای خام CSS برای سایت های بزرگ و واکنش گرا ، سخت و زمان بر هستند.چون سایت بخش های مختلفی دارد و برای هر کدام رنگ و سایز و فونت و … مختلف باید اعمال شود. کاری که SASS می کند این است که ضعف CSS را می پوشاند.یعنی من به جای اینکه کد خام CSS بنویسم ، کدهای SASS می نویسم (که اکثرا همان کدهای CSS هستند به علاوه امکانات بیشتر) و به همین دلیل حجم کد کمتری باید بنویسم.ولی در انتها این کدهای SASS به صورت اتوماتیک به CSS خام ترجمه می شوند.

گزینه های ۳ و ۴ را هر چقدر کامل تر یاد بگیرید بهتر هست ولی در حل اولیه هم یاد بگیرید خیلی از کارها را می توانید انجام بدهید.

بعد از یادگرفتن زبان های فوق پیشنهاد می کنیم فریم ورک ها یا کتابخانه های آماده زیر را هم تا حد امکان یاد بگیرید:

  1. Twitter Bootstrap : یک کتابخانه آماده است که با زبان CSS نوشته شده است و می توانید از آن برای طراحی استاندارد و واکنش گرای قالب ظاهری وب سایت استفاده کنید.(سرعت عمل و کیفیت کارتان را بالا می برد)
  2. jQuery : یک کتابخانه آماده است که با زبان JavaScript نوشته شده است و برای اعمال افکت های جذاب مثل اسلایدر های عکس، کادرهای بازشونده همراه با افکت و حتی Ajax از آن استفاده کنید.

شاید بپرسید این ۲ کتابخانه بر اساس ۲ زبانی نوشته شده اند که در بالا ما خودمان یاد گرفته ایم و چه نیازی به یادگرفتن اینها داریم؟ پاسخ این است که در ابتدای یادگیری ، بحث اساسی همین یادگرفتن است ولی وقتی تا حد مناسبی به آن زبان مسلط شدید کم کم احساس می کنید باید سرعت و کیفیت را هم بالا ببرید. اینجاست که فریم ورک ها و کتابخانه هایی مثل موارد بالا به کمک شما می آیند.چطور؟ به این صورت که کاری که شما می خواهید مثلا با CSS بوسیله نوشتن ۲۰ دستور انجام دهید، از قبل در Bootstrap انجام شده است!

حالا شاید بپرسید پس اگر این قدر راحت است چرا باید زبان را یاد بگیرم بعد از فریم ورک اش استفاده کنم؟ باید گفت اگر زبانی که فریم ورک با آن نوشته شده است را ندانید ، نخواهید توانست تغییرات دلخواه تان را در آن بدهید.چون فریم ورک ها دقیقا همان چیزی که می خواهیم نیستند و همیشه خودمان باید تغییراتی اعمال کنیم.

اگر می خواهید Back-End کار کنید

گزینه هایی که در این بخش معمولا در اختیار دارید:

  • PHP
  • ASP.net

کدام بهتر است؟ هر دو و هیچکدام! قیچی بهتر است یا چاقو ؟ این سوال جوابی ندارد جز اینکه شما از کدام می خواهید استفاده کنید .من خودم هر دو را امتحان کردم و PHP را انتخاب کردم به علت راحتی استفاده و یادگیری، جامعه کاربری بیشتر، مشتریان بیشتر و متن باز بودن. پس ما بنا را روی PHP می گذاریم.

خوب حالا من PHP را یاد گرفته ام. فریم ورکی برای آن وجود ندارد تا کارم را راحت تر، سریع تر و امن تر انجام دهم ؟ سوال خیلی خوبیست. تعداد زیادی فریم ورک PHP وجود دارد که باز نمی توان بهترین را در همه جهات انتخاب کرد ولی من طبق معمول با اکثرشان کار کردم و عاشق Laravel شدم! شما هم همین کار را می توانید انجام دهید ولی ما بنا را روی لاراول می گذاریم.

اگر می خواهید Back-End و Front-End را با هم یاد بگیرید

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

خوب سعی کردم تا حد ممکن ساده ولی کامل، نحوه ورود به دنیای وب رو توضیح بدم. امیدوارم مفید بوده باشه و استفاده کنید.


همینک دیدگاه خود را برای ما بنویسید!