آیا می‌خواهید اصول توسعه وب سایت را یاد بگیرید، اما مطمئن نیستید که از کجا شروع کنید؟ شما سعی کرده‌اید از گوگل برای یادگیری استفاده کنید، و منابع زیادی در آن جا وجود دارد. اما بسیاری از آنها اطلاعات بسیار زیادی را در بر دارند. در حال حاضر، تمام چیزی که شما نیاز دارید اصول توسعه وب سایت می باشد، و همچنین یک توضیح کلی با برخی نکاتی که مشخص می کند گام بعدی شما چه باشد، و دقیقا به همین دلیل است که، این راهنمای ساده را درباره نحوه تبدیل شدن به یک توسعه دهنده وب نوشته‌ام. اگر شما یک کد نویس مبتدی باشید، این راهنما برای شما است، در این مقاله موارد زیر پوشش داده می شود:
- توضیح حوزه های اصلی در توسعه وب
- یک مرور کلی از زبان‌های برنامه‌نویسی و چارچوب‌ها
- منابع توصیه شده به شما، که کمک می کند بهتر یاد بگیرید.
هدف نهایی شما برای یادگیری کد نویسی
دلایل خود را برای وارد شدن به کد نویسی در نظر بگیرید. به دنبال چه چیزی هستید؟ هدف نهایی شما چیست؟ آیا به دنبال سرگرمی، تغییر شغل، یک شغل انعطاف‌پذیر که در آن می‌توانید به خانواده خود نزدیک‌تر شوید، هستید؟ تمام رویکرد شما برای توسعه وب سایت باید حول و حوش رسیدن به این رویا باشد. شما حتی می‌توانید سعی کنید هدفتان را یادداشت کنید و آن را جایی قرار دهید که هرروز آن را بینید، مانند آینه حمام یا کنار کامپیوتر خودتان! همان طور که در این مقاله پیش می‌روید، هدف خود را در ذهن خود نگاه دارید، و تعیین کنید که چه تصمیماتی می‌گیرید: چه زبانی برای یادگیری، حتی نحوه یادگیری خود را انتخاب کنید. طبق آن چه گفته شد، بیایید با اصول اولیه شروع کنیم!
اصول اولیه توسعه وب سایت
یک وب سایت ممکن است یک صفحه ساده باشد، یا ممکن است یک برنامه وب بسیار پیچیده باشد. اگر می‌توانید آن را روی وب در یک مرورگر مشاهده کنید، قطعا با یک توسعه وب این کار انجام شده است. در این جا توضیح ساده‌ای از این که، چگونه وب سایت‌ها در دنیای وب کار می کنند، آورده شده‌است:
- وب سایت‌ها اساسا مجموعه‌ای از فایل‌های ذخیره‌شده در کامپیوتر به نام سرور هستند.
- سرورها کامپیوترهایی هستند، که برای میزبانی وب سایت‌ها به کار می‌روند، به این معنی که آنها فایل‌های وب سایت را ذخیره می‌کنند. این سرورها به شبکه عظیم موسوم به شبکه گسترده جهانی یا اینترنت متصل شده‌اند.
- مرورگرهای برنامه‌هایی هستند که شما روی کامپیوترتان اجرا می‌کنید، آنها فایل‌های وب سایت را از طریق ارتباط اینترنتی خود بارگذاری می‌کنند. کامپیوتر شما به عنوان کاربری شناخته می‌شود، که به سرور متصل می‌شود.
مولفه های اصلی برای هر وب سایتی
همانطور که در بالا ذکر شد، وب سایت ها عمدتا از فایل های HTML ،CSS و Javascript تشکیل می شوند. بیایید نگاهی نزدیک تر به هر یک از آنها بیندازیم:
- HTML یا زبان نشانه گذاری ابرمتن: HTML بنیاد همه وب سایت ها می باشد. HTML همچنین فایل اصلی می باشد، که وقتی به یک وب سایت نگاه می کنید در مرورگر شما بارگذاری می شود. شما واقعا می توانید یک وب سایت بسیار ساده را، با استفاده از HTML و هیچ نوع فایل دیگری درست کنید، جالب به نظر نمی رسد، اما این کمترین چیزی است، که شما برای یک وب سایت نیاز دارید.
- CSS یا صفحات استایل آبشاری: بدون CSS، یک وب سایت از نظر زیباشناسی خوشایند به نظر نمی‌رسد. با CSS می‌توانید رنگ‌های مختلف، و فونت‌های اجباری را اضافه کرده، و وب سایت را به هر شکلی که ممکن است ترکیب‌بندی کنید. حتی می‌توانید انیمیشن را اضافه کنید و اشکال را با استفاده از CSS پیشرفته رسم کنید.
- جاوا اسکریپت: جاوا اسکریپت یک زبان برنامه‌نویسی است، که به شما اجازه می‌دهد با عناصر وب سایت ارتباط برقرار کنید و آنها را دستکاری کنید. در حالی که CSS استایل را به HTML اضافه می کند، جاوا اسکریپت تعامل را اضافه می‌کند، و وب سایت را پویاتر می‌کند. برای مثال، می‌توانید از جاوا اسکریپت استفاده کنید تا صفحه به بالا اسکرول شود، وقتی که روی یک دکمه کلیک می کنید. یا یک نمایش اسلاید با دکمه‌ها برای عبور از طریق تصاویر ایجاد کنید. برای کار با پرونده‌های HTML، CSS و جاوا اسکریپت، شما باید از برنامه‌ای در کامپیوتر خود به نام ویرایشگر کد استفاده کنید.
انتخاب ویرایشگر برای شروع کد نویسی
کدام ویرایشگر کد باید مورد استفاده قرار بگیرد؟ این یک سوال بسیار رایج است، به خصوص اگر شما تازه کار باشید. بهترین ویرایشگر کد برای شما به شدت وابسته به نوع کد نوشتاری شما خواهد بود. اگر به طور عمده HTML، CSS و جاوا اسکریپت کار می کنید، می‌توانید کدنویسی خود را در Notepad یا TextEdit ویندوز یا اگر مایل باشید، برای Mac تهیه کنید. برای زبان‌های دیگر ( که در بخش بعدی به آن ها اشاره می کنیم) شما به یک ویرایشگر کد قوی تری نیاز دارید، که IDE ( محیط توسعه یکپارچه ) نامیده می‌شود. IDE ها دارای ویژگی‌هایی هستند که به شما این امکان را می‌دهد که مشکل کد خود را رفع، و آن را کامپایل کنید. در اینجا چند ویرایشگر کد مشهور وجود دارد:
- Visual Studio: این نسخه سبک‌وزن از ویژوال استودیو،اصلی ترین IDE ماکروسافت است، و تنها چند سال قدمت دارد، اما به خاطر سرعت، سهولت استفاده، و ویژگی‌های قدرتمند بسیار محبوب شده‌است.
- Atom: اتم ایجاد شده توسط GitHub و تبلیغ شده به عنوان ویرایشگر متن ضد هک، یکی از نقاط قوت اصلی اتم، سفارشی سازی آن می باشد. می‌توانید بسته‌ها و موضوعاتی را نصب کنید، که مشخصه‌هایی را به برنامه اضافه می‌کنند.
- Sublime text: یک برنامه بسیار محبوب می باشد،که مانند اتم مدتی است ارائه شده است. شما می‌توانید بسته‌ها و تم ها را نصب کنید، و عملکرد سریع آن را مشاهده کنید. من توصیه می‌کنم که بعضی از این ویرایشگر ها را برای مقایسه با یکدیگر امتحان کنید، سپس یکی از آن ها را انتخاب کنید، و آن را رها نکنید، ویژگی‌ها و کلیدهای میان‌برهای IDE خود را نیز یاد بگیرید.
کنترل نسخه برای اصول توسعه وب سایت
حالا شما ویرایشگر کد خود را انتخاب کردید، و شروع به نوشتن کد می‌کنید. اما اگر در کد خود اشتباه کنید چه اتفاقی می‌افتد، و شما باید تمام تغییرات کد خود را قبل از آن اشتباه از بین ببرید؟ و فشار دادن Ctrl – Z برای برگرداندن کد، تعداد یک میلیون بار برای شما کار نمی‌کند. پس فکر می کنید چه کاری باید انجام دهید؟ پاسخ نسخه کنترل است! کنترل نسخه مثل داشتن نقاط ذخیره برای فایل‌های کد شما است. اگر فکر می‌کنید که ممکن است در شرف انجام برخی تغییرات کد باشید، که می‌تواند همه چیز را خراب کند، شما می‌توانید یک نقطه ذخیره جدید ( به نام یک تعهد ) ایجاد کنید. سپس اگر وب سایت خود را خلال ایجاد شود ، می‌توانید کدهای خود را به حالت قبل برگردانید. اگر اشتباهی مرتکب شدید که به شدت به باز گرداندن آن نیاز دارید، کنترل نسخه می تواند یک نجات دهنده باشد.
کنترل نسخه عالی به نظر می‌رسد! اما چگونه کار می‌کند؟ استفاده از یک سیستم کنترل نسخه (vcs) شامل ذخیره‌سازی فایل‌های کد شما، و کل تاریخچه تغییرات در ،چیزی است که مخزن نامیده می‌شود. معمولا شما از یک مخزن برای هر وب سایت یا پروژه استفاده می‌کنید. سپس مخزن خود را به صورت آنلاین در آن چه که به عنوان مخزن مرکزی شناخته می‌شود ، ذخیره می کنید، و همچنین نسخه‌ای از کامپیوتر خود را در یک مخزن محلی نگهداری می‌کنید. زمانی که در کامپیوتر خود تغییراتی ایجاد می‌کنید، می‌توانید آنها را ایجاد کنید، و سپس آنها را به مخزن مرکزی هل دهید. این فرآیند به شما این امکان را می‌دهد که چندین نیرو را داشته باشید، که روی یک مجموعه از کدها کار می‌کنند، و حتی فایل‌های یک‌سان را هم تغییر می‌دهند. سیستم کنترل نسخه اصلی این روزها Git می باشد، رقیب اصلی آن Subversion یا SVN می باشد.
Front endهمه چیز در مورد ظاهر سایت
front end (یا سمت کاربر) به آن چه که توسط کاربر در مرورگر دیده می شود، گفته می شود. فرونت اند در واقع همان HTML و CSS است، که ما در ابتدای مقاله در مورد آن صحبت کردیم. جاوا اسکریپت در اصل فقط یک زبان سمت کاربر بود، اما امروزه شما می‌توانید از جاوا اسکریپت به عنوان سمت سرور خود و یا back end استفاده کنید. فرونت اند در پایان کار به شدت باعث بهبود صفحه سایت شما خواهد شد. علاوه بر این، front end باعث می شود حس خوبی برای کاربران(UX یا تجربه کاربر) از دیدن سایت به وجود بیاید. اگر از تغییرات CSS در طراحی سایت خود لذت می‌برید، مطمئن شوید برای همه نقطه های سایت خود انجام دهید، و انیمیشن های ظریف جاوا اسکریپت را اضافه کنید، تا به کاربر کمک می‌کند ، سپس به احتمال زیاد از توسعه وب سایت خود لذت خواهید برد.
Backend همه چیز در مورد کارکرد سایت
در حالی که Frontend همه چیز در مورد ظاهر و رفتار بصری وب سایت است، هدف Backend انجام همه چیز برای کار پشت صحنه، و عملکرد وب سایت می باشد. اگر در توسعه بک اند کار می‌کنید، کارهایی مانند رسیدگی به درخواست برای سرور و پایگاه‌داده انجام خواهید داد. برخی مثال های بک اند می تواند هنگامی باشد که، کاربری یک فرم “تماس با ما” را پر می کند، و این اطلاعات باید ذخیره شوند. Backend همچنین ممکن است شامل ایجاد وب سایت بر روی یک سرور، رسیدگی به استقرار، و راه‌اندازی پایگاه‌های داده SQL باشد. اگر راه‌اندازی همه بخش‌های کارکردی یک وب سایت برای شما سرگرم‌کننده به نظر برسد، شما احتمالا از بک اند خود لذت می برید.
استفاده از سمت کاربر و سرور در کنار هم
نام‌های Frontend, Backend به این دلیل مطرح می‌شوند که، فرونت اند آن چیزی است که شما می‌توانید در مرورگر خود ببینید، و بک اند قسمتی است که شما نمی‌توانید ببینید، اما بسیاری از اجسام سنگین و عملکردی را که به فرونت اند کمک می‌کند، را کنترل می‌کند. شما می‌توانید به Frontend عنوان ویترین یک کسب‌وکار بدهید، زیرا این تنها بخشی است که اغلب مشتریان آن را می‌بینند. Backend شبیه ساخت، توزیع و مراکز عملیاتی می باشد، که به این فروشگاه کمک می‌کند. هر دو عملکرد جداگانه‌ای دارند، و به یک اندازه دارای اهمیت می باشند.
در اصول توسعه وب سایت ، شما می‌توانید تنها بر روی فرونت اند و یا بک اند تمرکز کنید. یا می‌توانید در هر دو مورد تمرکز کنید، که به آن توسعه کامل پشته یا full stack development می گویند، چیزی که شما می‌خواهید بر روی آن تمرکز کنید به طور عمده به دو عامل بستگی دارد:
- اولویت شخصی شما : هرکسی نمیتواند به جفت فرونت اند و بک اند، علاقه داشته باشد.
- دسترسی به شغل : فهرست‌های شغلی محلی خود را جستجو کرده، و با برنامه نویس ها ملاقاتی ترتیب دهید، تا مشاغل مربوطه را درک کنید.
لازم به ذکر است که اگر شما به هردو مهارت فرونت اند و بک اند علاقه مند باشید، برنامه نویس full stack development بودن شما را با ارزش تر می کند، این موضوع به معنای آن است که، هرچه با فن‌آوری‌های بیشتری بتوانید کار کنید، کارهای بیشتری می‌توانید انجام دهید. stackOverflow در نظرسنجی سال ۲۰۱۷ خود از کاربران گزارش داد که، ۶۳.۷ درصد از کاربرانش به عنوان برنامه نویس توسعه کامل پشته، ۲۴.۴ درصد برنامه نویس بک اند، و ۱۱.۹ درصد به عنوان برنامه نویس فرونت اند، شناسایی شده اند. با این حال، این امر به شدت وابسته به شرکت خواهد بود. برخی از شرکت‌ها ممکن است از توسعه دهندگان کامل بهره ببرند، در حالی که سایر شرکت ها از انواع برنامه نویس فرونت اند و بک اند برخوردارند.
قوی کردن مهارت های Frontend
هنگامی که اصول اولیه HTML ،CSS و جاوا اسکریپت را متوجه شدید، می‌توانید مهارت‌های پیشرفته تری را در قسمت فرونت اند شروع کنید. این بخش به شما روش‌ها و ابزارهایی معرفی می کند،که به شما کمک خواهند کرد تا مهارت‌های با ارزش تری را به عنوان یک توسعه دهنده وب، ادامه دهید. زمانی که وب سایت‌ها برای اولین بار دیده شدند، تنها یک راه برای دیدن آنها روی کامپیوتر شما وجود داشت. تلفن های هوشمند، و موبایل هنوز وجود نداشتند. هنگام طراحی سایت، فقط باید نگران این می بودید که در کامپیوترتان به چه شکل خواهد شد. اکنون طبق آمار،افراد بیشتر از موبایل های خود برای جستجو در اینترنت استفاده می‌کنند. بنابراین ما باید مطمئن شویم که وب سایت های ما در همه جا کار می کند، از بزرگ‌ترین نمایشگرها تا کوچک‌ترین موبایل ها! این عمل چیزی است که به عنوان طراحی واکنش گرا شناخته شده است. به این دلیل نامگذاری شده است، که طراحی می‌تواند به هر دستگاهی که آن را می‌بیند، پاسخ دهد.
می‌توانید ببینید یک وب سایت چقدر واکنش گرا خواهد بود، به طور دستی عرض پنجره جستجوگر خود را تغییر داده و مشاهده می‌کنید که طراحی چگونه با پهنای یک مرورگر بزرگ و کوچک برخورد می کند.ایجاد یک وب سایت کاملا واکنش گرا، شامل برنامه‌ریزی زیادی در مرحله طراحی است، تا در نظر بگیرید که همه المان های سایت در دستگاه های مختلف به نظر می رسد.
مطلب مرتبط: سایت های واکنش گرا و برنامه های موبایل
چهارچوب های برنامه نویسی کمکی برای طراحی واکنش گرا
همان طور که ممکن است تصور کنید، کدگذاری تمام CSS یک وب سایت واکنش گرا، ممکن است زمان زیادی ببرد. اگر شما نمی‌توانید زمان زیادی را صرف کنید، ممکن است با استفاده از یک چارچوب واکنشی مانند بوت استرپ یا Zurb این کار را انجام دهید. زیبایی این چارچوب‌ها آن است که، آنها با CSS و جاوا اسکریپت از پیش بسته‌بندی می‌شوند. آنها کارهای زیادی برای شما با استفاده از عناصر استایل اولیه، انجام می دهند. آنها همچنین با اجزای جاوا اسکریپت مانند پنجره‌های نمایشی(modal pop – up)، و منوی سایت ظاهر می شوند. از آن جا که از چیزی استفاده می‌کنید که قبلا مورد آزمایش قرار گرفته‌است، طراحی سایت شما خیلی ساده‌تر می شود. تنها نکته ای که باید رعایت کنید این است که، شما نباید بیش از حد به چارچوب‌ها وابسته شوید، هیچ جایگزینی برای دانستن چگونگی ساخت یک وب سایت واکنش گرا از ابتدا وجود ندارد.
نوشته اصول توسعه وب سایت برای افراد مبتدی-قسمت اول اولین بار در طراحی سایت | طراحی وب سایت حرفه ای در تهران با پیام آوا پردازش پدیدار شد.