آی تی پورت

چنانچه قصد یادگیری طراح وب سایت به صورت حرفه ای یا فقط به جهت علاقه مندی را داشته باشید، در این مطلب از کاسپریا، طراحی سایت در کرج، تمام مراحل مورد نیاز برای شروع یادگیری طراحی سایت، یا به عبارت انگلیسی آن Web Design توضیح داده خواهد شد. برای یادگیری طراحی سایت چند پیش نیاز وجود دارد که در ادامه به آن ها اشاره خواهد شد. توجه داشته باشید که هدف این مطلب نحوه یادگیری “طراحی سایت” است و نه راه اندازی سایت. راه اندازی سایت به معنی خرید هاست (فضای نگه داری فایل های سایت) و دامین (آدرس سایت) و سپس نصب یک سی ام اس (سیستم مدیریت سایت) مانند وردپرس است که نیازی به کدنویسی ندارد، و “طراحی” سایت به معنی طراحی و راه اندازی یک سایت اختصاصی و حرفه ای با کدنویسی از ابتدا است که توسط “طراح سایت” انجام می شود.

پیش نیازها

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

یادگیری HTML

یادگیری زبان HTML اولین مرحله در یادگیری طراحی سایت است. زبان HTML یا به فارسی اِچ تی اِم اِل مخفف عبارت HyperText Markup Language است. این زبان برای تعریف اجزاء و بخش های مختلف یک وب سایت استفاده می شود و مبنای تمامی صفحات اینترنتی است. به عنوان مثال اغلب وب سایت ها دارای هدر (بخش بالای سایت شامل لوگو، منو و غیره)، بخش محتوا (شامل متن اصلی صفحه)، سایدبار (ستون یا بخشی که معمولاً کنار مطالب است) و فوتر (بخش پایین وب سایت که شامل لینک به صفحات دیگر، کپی رایت و غیره است) می باشد. با استفاده از HTML این اجزاء در صفحه تعریف شده و با زبان دیگری به نام CSS استایل دهی می شود. سی اس اس در ادامه توضیح داده خواهد شد. HTML از عبارت هایی به نام Tag که به فارسی تَگ خوانده می شود تشکیل شده که هر تگ برای تعریف یک چیز به بخصوص به کار می رود به عوان یک تَگ برای ایجاد متن در صفحه، یک تگ درج عکس در صفحه، یک تگ برای درج لینک در صفحه و ده ها تگ دیگر برای تعریف بخش های مختلف دیگر.

یادگیری CSS

CSS مخفف Cascading Style Sheets بوده و برای تعریف و مشخص کردن ظواهر اجزاء و بخش های مختلفی که با HTML تعریف شده اند است. به این معنی که ظاهر، شکل و شمایل آن ها تعریف می شود. به عنوان مثال رنگ پس زمینه، حاشیه دور کادر، رنگ فونت، سایز فونت، موقعیت در صفحه، فاصله با دیگر اجزاء و به طور کلی تمام آنچه که مربوط به ظواهر یک وب سایت است با CSS تعریف می شود. یادگیری سی اس اس نسبت به اِچ تی اِم اِل زمان بیشتری نیاز دارد. تا اینجا شخص با یادگیری همین دو زبان HTML و CSS می تواند وب سایت و صفحات استاتیک (Static) و ثابت طراحی کند. صفحه استاتیک به این معنی است که این صفحه در صورت نیاز به ویرایش (به عنوان مثال تغییر بخشی از متن) نیاز به ویرایش کدنویسی آن است. در مقابل طراحی سایت استاتیک، طراحی سایت داینامیک (Dynamic) یا به فارسی پویا است که دارای پنل مدیریت بوده و مدیر وب سایت می تواند با مراجعه به پنل مدیریت اقدام به ویرایش محتوای سایت بدون نیاز به ویرایش کدنویسی صفحه کند. تقریبا ۹۵ درصد سایت های موجود به صورت داینامیک طراحی می شوند.

یادگیری JavaScript

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

یادگیری یک زبان سرور ساید

زبان Server Side به معنی یک زبان برنامه نویسی تحت وب است که در سرور سایت اجرا شده و نتیجه آن به مرورگر کاربر ارسال می شود بدین صورت کاربر کدهای اصلی را نمی بیند بلکه فقط نتیجه آن را مشاهده می شود. در بالا در گفته شد که با یادگیری دو زبان HTML و CSS می توان وب سایت های استاتیک طراحی کرد. حالا با یادگیری زبان سرور ساید می توان وب سایت های داینامیک طراحی کرد به این معنی که وب سایت دارای پنل مدیریت باشد (مدیریت صفحات، کاربران و تنظیمات سایت)، کاربران بتوانند در وب سایت عضو شوند، پرداخت آنلاین صورت بگیرید و اینگونه موارد. برای یادگیری زبان سرور ساید دو گزینه اصلی پیش رو است PHP و ASP.NET (با سی شارپ). PHP یک زبان اُپِن سورس، رایگان و پرمخاطب ترین زبان برای ایجاد وب سایت های داینامیک است. تا به امروز حدود ۷۵ الی ۸۰ درصد وب سایت های اینترنتی از پی اِچ پی استفاده می کنند. پی اِچ پی زبانی است که وردپرس با آن ایجاد شده است. در مقابل ASP.NET از شرکت مایکروسافت موجود است که البته ASP.NET به خودی خود یک زبان برنامه نویسی تحت وب نیست بلکه یک فریم ورک است. فریم ورک مجموعه از کدها و ابزارهای مختلف برای ایجاد یک نرم افزار است به همین دلیل ASP.NET معمولاً به همراه زبان برنامه نویسی دیگری از مایکروسافت به نام #C (به فارسی سی شارپ) به کار گرفته می شود. این که PHP بهتر است یا ASP.NET در مطلب دیگری در سایت ما، کاسپریا توضیح داده شده است. در این مطلب برای یادگیری طراحی سایت PHP توصیه می شود و دلیل آن میزان استفاده بالا (و مشتریان بیشتر)، کتاب ها، وب سایت ها و فیلم های آموزشی بسیار بیشتر نسبت به ASP.NET است. بسیار خوب، تا اینجا گفته شد که برای طراحی سایت داینامیک لازم است که یک زبان سرور ساید بکار گرفته شود ولی باید توجه داشت که طراحان سایت همیشه همه قابلیت ها را از ابتدا کدنویسی نمی کنند بلکه از کدهای آماده باکیفیت استفاده خواهند کرد. به عنوان مثال یک CMS (به معنی سیستم مدیریت محتوا) به نام WordPress وجود دارد که افراد با نصب آن یک وب سایت داینامیک با تمام قابلیت های پایه و مورد نیاز مانند ایجاد صفحه، عضویت کاربران، آپلود فایل و غیره را در اختیار افراد قرار می دهد.

اصول طراحی

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

یادگیری سئو

سئو یا به انگلیسی SEO (که البته اصل آن “سئو” نیست بلکه “اِس ای اُ” است) به معنی بهینه سازی سایت برای موتورهای جستجو است و به طور کلی به اصولی گفته می شود بکارگیری آن باعث دریافت بازدیدکننده و البته مشتری بیشتر از جستجوگرها به ویژه گوگل است. از اصول سئو می توان به انتخاب عنوان خوب برای صفحه، تکرار عبارات کلیدی (یعنی عباراتی که کاربران در جستجوگرها آن را سرچ می کنند) در متن صفحه، دریافت بک لینک از سایت های دیگر و بسیاری موارد و جزئیات دیگر است. یادگیری اصول سئو دقیقا بخشی از یادگیری طراحی سایت نیست ولی رعایت این اصول هم برای خود طراح سایت و هم برای مشتریان واجب است. چراکه اکثر از افراد با جست و جو در گوگل به دنبال وب سایت های مختلف هستند.

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

تا اینجا، در مورد مواردی که برای یادگیری طراحی سایت لازم است توضیح داده شد و حالا برای یادگیری کدنویسی وب سایتی معرفی خواهد شد. بهترین وب سایت موجود برای یادگیری کدنویسی به زبان های بالا سایت W3Schools.com است که شامل تمام موارد بالا از جمله JavaScript، CSS، HTML و PHP است. این سایت نیازی به عضویت ندارد به محض ورود به این سایت از دسته بندی مربوطه می توانید شروع به مطالعه کنید. این سایت به زبان انگلیسی روان است و یکی از کامل ترین سایت های موجود برای یادگیری کدنویسی. همچنین فیلم های آموزشی طراحی سایت نیز از Lynda و Tutsplus موجود است که با جستجوی این اسامی (مانند دانلود آموزش Lynda HTML) می توانید فیلم های موجود را دانلود کنید (چراکه در حال حاظر امکان خرید در ایران ممکن نیست). موارد زیادی هم در یوتیوب موجود است. همانند وب سایت، این فیلم ها نیز به زبان انگلیسی روان هستند. در مورد کتاب هم کتاب های انگلیسی بسیار زیادی برای یادگیری زبان های بالا موجود است مانند کتاب HTML & CSS: Design and Build Web Sites که می توانید دانلود و مطالعه کنید. در مورد آموزش های طراحی سایت به زبان فارسی نیز می توانید جستجو کنید ولی موارد به زبان انگلیسی توصیه شود. همچنین در صورت آشنایی به زبان انگلیسی با جستجو می توان به منابع بسیار بیشتری نیز دسترسی پیدا کرد.

تبدیل PSD به HTML

برای شروع طراحی سایت برخی ترجیح می دهند که کدنویسی را مستقیماً در نرم افزار کد ادیتور مورد نظر خود آغاز کرده و طراحی را ادامه دهند و برخی دیگر ابتدا ظاهر و طرح وب سایت در فتوشاپ طراحی کرده و در انتها آن را کدنویسی می کنند که به این کار تبدیل و کدنویسی PSD به HTML گفته می شود. به این صورت که ابتدا تصاویر و مواردی که با کدنویسی قابل اجرا نیست (مانند لوگو، طرح پس زمینه، آیکان ها و غیره) از طرح PSD فتوشاپ برش و استخراج می شود و سپس طراح سایت با نگاه کردن به طرح PSD اصلی، آن را به صفحه قابل استفاده در مرورگر تبدیل و کدنویسی می کند. تبدیل PSD به HTML نیازمند مهارت بالایی در کدنویسی است تا طرح دقیقاً مشابه آنچه در فتوشاپ طراحی شده باشد. همچنین تبدیل PSD به HTML برای یادگیری طراحی سایت واجب نیست.

یادگیری طراحی سایت چقدر طول می کشد؟

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

نتیجه گیری

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