در مطلب قبل گفته شد که طراحی سایت چیست. حال افراد بسیاری که می خواهند طراح سایت شوند، اولین سوالی که با آن مواجه کی شوند این است که طراحی سایت را از کجا شروع کنیم؟ در واقع دغدغه اصلی افراد در شروع طراحی سایت، نداشتن نقشه راه و مسیر یادگیری طراحی سایت است. خیلی از طراحان وب در شروع کار خود، راهشان را با آزمون و خطا آغاز می کنند که این مورد باعث می شود زمان زیادی را از دست دهند و در طول مسیر سردرگم شوند. گروه سرچان در این مقاله بررسی می کند طراحی سایت را از کجا شروع کنید و به عنوان طراح سایت باید چه چیزهایی را یاد بگیرید و از چه ابزارهایی استفاده کنید.
آنچه شما در این مقاله می آموزید:
انواع طراحی سایت
قبل از شروع طراحی سایت لازم است با انواع طراحی سایت آشنا شوید تا بتوانید با دید باز شروع به طراحی سایت کنید. طراحی سایت به طور کلی به دو صورت انجام می شود:
- سایت های ایستاتیک (Static Website)
- سایت های داینامیک (Dynamic Website)
سایت های ایستاتیک یا ایستا
برای شروع طراحی سایت باید بدانید که سایت ایستا یعنی چی؟ سایت هایی که به صورت ایستا طراحی می شوند، تنها قسمت فرانت اند دارند. این موضوع به این یعنی می باشد که مطالب و محتویات سایت تنها یک بار جمع آوری شده است. در این مدل طراحی هر کدام از صفحات سایت، جداگانه طراحی و بارگذاری می شوند. در این سایت ها هرگونه تغییر باید توسط طراح و کارشناس سایت انجام شود. از این مدل معمولا برای طراحی وب سایت های معرفی که تا مدت ها محتوای آن تغییر نمی کند، استفاده می شود.
سایت های داینامیک یا پویا
در طراحی این سایت ها هر دو بخش فرانت اند و بک اند برنامه نویسی می شود. سایت های پویا نیاز به تغییر مداوم محتوا دارند و با توجه به کاربرد سایت، طراحی شده و توسعه پیدا می کنند. در سایت های داینامیک برنامه نویس بک اند، وظیفه پویا سازی وب سایت را بر عهده دارد و باید اسکریپتی را طراحی کند که سایت به طور کامل پویا باشد. امروزه بیشتر از سایت های پویا استفاده می شود.
برای شروع طراحی سایت چه چیزهایی را یاد بگیریم؟
گام اول برای شروع طراحی سایت : یادگیری زبان HTML
اگر نگاهی به اولین سایت های منتشر شده در وب کنید، می بینیم که صفحات آن ها تنها از چند المان ساده و ابتدایی تشکیل شده اند. از گذشته تا امروز، تکنولوژی های مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بوده اند، اما تمام این تکنولوژی ها به زبان HTML منتهی می شوند. زبان نشانه گذاری HTML اولین چیزی است که طراحان وب باید یاد بگیرند. HTML مخفف Hyper Text Markup Language است و در فارسی به آن زبان نشانه گذاری ابر متن گفته می شود.
دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان گذاری یا Markup language به حساب می آید. از زبان HTML برای ایجاد بدنه اصلی و ساختار کلی صفحات وب استفاده می شود. این زبان با تگ ها کار می کند و این تگ ها هستند که مشخص می کنند در صفحه وب از چه عناصری استفاده شده است. در واقع تگ ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می شود.
گام دوم برای شروع طراحی سایت : یادگیری زبان CSS
زبانی که به منظور زیباسازی و فرم دهی به صفحات وب استفاده می شود، CSS نام دارد. دومین قدم در شروع طراحی سایت برای کسی که قصد دارد طراح سایت شود، CSS است. CSS مخفف عبارت Cascading Style Sheets و به معنی برگه های آبشاری است. این زبان مانند HTML یک زبان نشانه گذاری است که اجازه می دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ بندی و فونت ها شکل دهید. به کمک CSS می توانید خصوصیاتی مثل رنگ ها، فونت ها، ابعاد، سایز ها، نحوه چیدمان عناصر و غیره را در صفحات وب مشخص کنید.
گام سوم برای شروع طراحی سایت : یادگیری زبان جاوا اسکریپت
زمانی که به زبان های HTML و CSS مسلط شدید، می توانید صفحات وب ایستا (Static) را طراحی کنید. اما امروزه کمتر سایتی را می توانید پیدا کنید که ایستا باشد. زیرا کاربران به دنبال سایت های تعاملی و داینامیک هستند و دوست دارند از امکانات مختلف آن ها استفاده کنند. یکی از محبوب ترین زبان های برنامه نویسی که برای پویا کردن سایت ها استفاده می شود، جاوا اسکریپت است. جاوا اسکریپت زبانی سطح بالا، داینامیک، مبتنی بر شی و تفسیری است که از شیوه های مختلف برنامه نویسی پشتیبانی می کند.
این زبان از نظر محبوبیت و کاربرد، رشد بسیار بالایی دارد و از آن می توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن های موبایل، بازی و اپلیکیشن های دسکتاپ استفاده کرد. بنابراین می توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت، یک زبان همه فن حریف است.
گام چهارم برای شروع طراحی سایت : یادگیری یک زبان برنامه نویسی سمت سرور مثل PHP
زمانی که شما سه گام قبلی را طی کنید، به راحتی می توانید یک سایت را به صورت کامل طراحی کنید. اما امروزه سایت ها علاوه بر ظاهر زیبا، نیازمند اجرا و پردازش درست نیازهای کاربران می باشند. به طور کلی، برنامه نویسان وب به سه دسته سمت کاربر، سمت سرور و Full Stack تقسیم می شوند. گروه اول وظیفه دارند به طراحی ظاهری سایت بپردازند که به آن ها برنامه نویس های سمت کاربر (Client-side) می گویند.
گروه دوم افرادی هستند که منطق سایت ها را پیاده سازی می کنند و به عنوان برنامه نویسان سمت سرور (Server-side) شناخته می شوند. بعضی از برنامه نویسان می توانند در هر دو حوزه کار کنند که به آن ها برنامه نویسان Full Stack می گویند. زبان های برنامه نویسی سمت سرور شامل زبان های زیر می باشند.
- PHP
- Nodejs
- python
- asp.net
ابزارهای مورد نیاز برای شروع طراحی سایت
در زمان انتخاب ابزار توسعه برنامه نویسی، شما دو گزینه برای انتخاب خواهید داشت. این دو گزینه ها شامل IDE ها و Text Editor ها می شوند. بسیاری از برنامه نویسان تفاوت بین آن ها را نمی دانند. هر یک از این ابزارها مزایا و معایبی دارند که باید با توجه به اهدافی که برنامه نویس دارد، یکی از آن ها را انتخاب کنید.
ویرایشگر های کدنویسی برای شروع طراحی سایت
برای نوشتن کدها می توانید از ادیتور های پیشرفته استفاده کنید. البته فراموش نکنید که می توانید در نرم افزاری مثل Notepad کدنویسی کنید، اما دیگر خبری از قابلیت های جذاب مثل کامل کردن خودکار کد، رنگ گذاری کلمات کلیدی، تشخیص خطاها، فرمت بندی کدها نخواهد بود. ویرایشگرهای کد با امکانات متنوعی که دارند، هم کدنویسی را لذت بخش کرده هم در وقت برنامه نویسان صرفه جویی می کنند. در ادامه برخی از معروف ترین Code Editor ها را معرفی می کنیم.
- PhpStorm
- Microsoft Visual Studio
- Microsoft Expression Web
- Notepad++
- Adobe Dreamweaver
- Komodo Edit
- NetBeans
- Adobe Fireworks
نرم افزارهای گرافیکی برای شروع طراحی سایت
در مفاهیم فرانت اند، طراح رابط کاربری با برنامه نویسی رابط کاربری متفاوت است. زیرا برای طراحی این صفحات وب سایت در حقیقت طراح رابط کاربری صفحات سایت را طراحی می کند، ولی وظیفه برنامه نویس سمت فرانت اند است که آن ها را به فرمت وب تبدیل کند. البته شما هم می توانید به کمک نرم افزارهای گرافیکی، یک نمونه از ایده های خود را طراحی کنید. سپس این ایده طراحی شده را با زبان های سمت کاربر برنامه نویسی کنید.
مزیت دیگر استفاده از نرم افزارهای گرافیکی در طراحی سایت این است که شما کم کم به طرح کلی می رسید. دیگر لازم نیست زمان کدنویسی همه چیز را اول در ذهن خود بسازید و فقط باید فایل های طراحی شده را مرور کنید. یکی از معروف ترین نرم افزارهای گرافیکی دنیا Sketch است که برای طراحی رابط کاربری از آن استفاده می شود. این نرم افزار های گرافیکی مورد نیاز برای شروع طراحی سایت، شامل موارد زیر می باشند:
- Adobe Photoshop
- Adobe Illustrator
از کجا طراحی سایت را شروع کنیم؟
قدم اول شروع طراحی سایت : آشنا بودن به محیط وب
بله اولین قدم برای شروع طراحی سایت، این است که با دنیای وب آشنا شوید. این آشنایی صرفا این نیست که بتوانید سرچ کنید یا دانلود کنید. منظور این است که کمی کار با سایت ها و ابزارهای مختلف آن را بدانید. به عنوان مثال داشتن وبلاگ و مدیریت آن، ذهنیت شما را بسیار به طراحی سایت نزدیک می کند. شما در وبلاگ می توانید دسته بندی ایجاد کنید، مطلب بنویسید. مطلب خود را به یک دسته بندی اختصاص دهید. قالب وبلاگ را تعیین کنید. اگر هم تا کنون وبلاگ نداشته اید، قطعا در شبکه های اجتماعی فعالیت کرده اید و مطالبی را در این شبکه ها منتشر کرده اید. این مثال نیز یک نوع کار کردن با ابزارهای دنیای وب می باشد.
قدم دوم شروع طراحی سایت: یادگیری وردپرس
وردپرس یک نوع سیستم مدیریت محتوا می باشد که می توانیم به طور ساده تر بگوییم که وردپرس یک سایت ساز است. یعنی امکاناتی که یک سایت باید داشته باشد را در اختیار شما قرار می دهد. این امکانات شامل امکان ارسال مطلب، ساخت دسته بندی مطالب، آپلود فایل، مدیریت کاربران و … می باشد. تمام کدهای این امکانات را وردپرس برای شما نوشته است و کاملا آماده می توانید از آن به صورت رایگان استفاده کنید. همچنین قالب های بسیار زیادی نیز برای وردپرس وجود دارد که به راحتی با چند کلیک می توانید ظاهر زیبا و حرفه ای برای سایت خود انتخاب کنید.
حالا چرا طراحی سایت با وردپرس؟
بزرگترین مزیت طراحی سایت با وردپرس، وجود افزونه های فراوان در آن است. شما می توانید این افزونه ها را اصطلاحا روی سایت خود نصب کنید. این افزونه های باعث می شوند که امکانات جدید به سایت خود اضافه کنید. به عنوان مثال اگر بخواهید در سایت خود پرداخت آنلاین داشته باشید، کافیست افزونه مربوط به این کار را نصب کنید. یا اگر بخواهید یک فروشگاه اینترنتی در سایت خود داشته باشید، کافیست افزونه این کار را نصب کنید. به راحتی با چند کلیک امکانات بسیار حرفه ای می توانید به سایت اضافه کنید. اگر به دنبال طراحی سایت با وردپرس هستید، حتما مقاله آن را مطالعه کنید تا از صفر تا ۱۰۰ آن آگاه شوید.
قدم سوم شروع طراحی سایت : سفارشی سازی قالب
قالب های سایت، حداقل از کدهای HTML و CSS تشکیل شده اند. یادگیری این کدها تقریبا ساده است. پس اگر کمی تحقیق کنید یا در دوره های مربوطه شرکت کنید، این زبان ها را یاد می گیرید. اما برای این که حرفه ای شوید، باید کمی با آن ها سر و کله بزنید. این سر و کله زدن بهتر از سفارشی سازی قالب های آماده می باشد. یعنی بهتر می باشد که کدهای قالب های دیگران را دست کاری کنید و بنابر سلیقه خود، قالب متفاوت تر ایجاد کنید.
قدم چهارم شروع طراحی سایت : طراحی قالب
در قدم قبل به شما گفتیم که سفارشی سازی قالب ها را انجام دهید. حال به شما می گوییم که یک قالب اختصاصی برای خود طراحی کنید. دلیل این موضوع این است که در هنگام سفارشی سازی، با انواع کدهای مختلف قالب آشنا شده اید و در نتیجه تجربه کافی را در این زمینه پیدا کرده اید. شما اگر با HTML ،CSS ،Bootsrape ،Jquery آشنا باشید، می توانید قالب اختصاصی خود را خلق کنید. این قالب ها می توانند برای وردپرس، وبلاگ یا هر نوع سایت دیگری استفاده شود. یعنی این زبان هایی که نام بردیم، در تمام انواع سایت ها استفاده می شوند.
قدم پنجم شروع طراحی سایت : یادگیری PHP
php زبان برنامه نویسی تحت وب است. وردپرس نیز که کمی قبل تر در مورد آن صحبت کردیم، با زبان PHP نوشته شده است. یعنی اگر شما این زبان را یاد بگیرید، می توانید خودتان یک وردپرس خلق کنید. زبان های برنامه نویسی دیگری مانند ASP وجود دارند. شما می توانید زبان های برنامه نویسی دیگری را نیز انتخاب کنید. البته PHP نسب به ASP زبان منعطف تری است.
قدم ششم شروع طراحی سایت : یادگیری پلاگین نویسی برای وردپرس
اگر شما وردپرس را بلد باشید، طراحی قالب نیز برایتان آسان خواهد بود. در قدم قبل نیز زبان برنامه نویسی PHP را یاد گرفته اید. پس می توانید تمام این ها را با هم ترکیب کنید و افزونه برای وردپرس بسازید. برای این کار باید با مستندات وردپرس آشنا باشید. تمام این مستندات نیز در سایت وردپرس قرار دارد. از این طریق می توانید امکانات مختلف برای وردپرس اضافه کنید.
ممکن است مشتری داشته باشید که یک امکان خاص برای سایت خود بخواهد که افزونه آماده آن وجود ندارد. پس می توانید شما سفارش پروژه افزونه نویسی را نیز بگیرید. حتی می توانید افزونه هایی را بنویسید و آن را در مارکت های مختلف برای فروش قرار دهید. به این صورت می توانید درآمدزایی نسبتا خوبی داشته باشید. اگر بتوانید پا در مارکت های بین المللی بگذارید، درآمد دلاری خواهید داشت که برای ما ایرانی ها، درآمد دلاری بسیار شیرین و سودآور است.
قدم هفتم شروع طراحی سایت : یادگیری PHP تحت MVC
اگر بخواهید در زمینه برنامه نویسی PHP پیشرفت بیشتری داشته باشید، باید برنامه نویسی تحت MVC را یاد بگیرید. برنامه نویسی با معماری MVC مزیت های مختلفی دارد. یکی از این مزیت ها این است که باعث می شود امنیت سایت بسیار افزایش پیدا کند. اگر MVC را یاد بگیرید، سطح برنامه نویسی وب شما بسیار بالا خواهد رفت. البته اگر سراغ ASP رفته اید، این معماری MVC در ASP نیز وجود دارد.
قدم هستم شروع طراحی سایت : یادگیری یک فریم ورک PHP مانند لاراول
امروزه برای زبان های مختلف، فریمورک های مختلفی ساخته شده اند. این فرمورک ها کار برنامه نویسی را آسان کرده اند. علاوه بر آسان کردن کار، باعث بالا رفتن سطح برنامه نویسی نیز شده اند. حال کار کردن با فریمورکی مانند لاراول نیز سطح امنیت را بالاتر خواهد برد. بسیاری از شرکت ها نیز برای جذب برنامه نویس PHP اعلام می کنند که باید با فریمورک لاراول آشنا باشند. پس دیگر خودتان باید آگاه باشید که چقدر آشنا بودن به این نوع فریمورک ها لازم است.
سخن پایانیدر این مقاله سعی کردیم تا نقشه راه مناسبی برای شروع طراحی سایت به کسانی که می خواهند طراح سایت شوند و به سطح حرفه ای برسند، معرفی کنیم. البته لازم نیست که شما تا قدم آخر پیش بروید. ممکن است با یادگیری وردپرس به درآمدزایی خوبی برسید و در همان زمینه پیشرفت بیشتری کنید. یا در زمینه های دیگری علاقه بیشتری داشته باشید و بتوانید خودی نشان دهید. یا حتی مستقیم سراغ زبان های برنامه نویسی مانند PHP بروید. پس محدودیت در راه شما برای شروع طراحی سایت وجود ندارد. |