اصول توسعه وب سایت برای افراد مبتدی – قسمت اول

• Nikdad.net
• طراحی و توسعه وب سایت, تجربه کاربردی UX, رابط کاربری UI, طراحی وب

اصول توسعه وب سایت برای افراد مبتدی – قسمت اول

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

حوزه های اصلی توسعه وب سایت

مرور کلی از زبان ها و چارچوب های برنامه نویسی

منابع توصیه شده به شما که بهتر یاد بگیرید

اهداف نهایی برای آموزش کدنویسی :

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

اصول اولیه توسعه وب سایت 

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

مولفه های اصلی برای هر وب سایتی

وب سایت ها از فایل های HTML ،CSS و Javascript تشکیل می شوند و در ادامه به صورت کامل شرح می دهیم که دقیقا یک سایت از چه عناصری تشکیل شده است.

• اچ تی ام ال یا HTML زبان نشانه گذاری ابر متن که جزو بخش اصلی همه وب سایت ها می باشد. اچ تی ام ال فایل اصلی وب سایت ها بوده که زمانی به یک سایت نگاه می کنید در مرورگرتان بارگذاری می گردد. شما یک سایت ساده را می توانید با این زبان پیاده سازی نموده و یک صفحه ساده معمولا از این زبان تشکیل شده است.
• CSS یا استایل که از لحاظ زیبا شناسی و ساختار یک وب سایت می تواند مورد استفاده قرار بگیرد و در زمان زیبایی یک صفحه با زبان اچ تی ام ال می توانید در کنار آن یک سی اس اس با رنگ های مختلف ، فونت ها و انیمیشن و … را اضافه نمایید و صفحات را از حالت یکنواختی و سادگی به زیبایی و جذابیت فوق العاده برسانید.
• جاوا اسکریپت : یک زبان برنامه نویسی محسوب می شود که با آن می توانید عناصر وب سایت را باهمدیگر مرتبط کرده و انها را به راحتی دستکاری نمایید. به راحتی می توانید استایل های سی اس اس را به اچ تی ام ال اضافه نمایید ، جاوا اسکریپ تعاملی را اضافه و وب سایت ها را پویاتر نمایید. مثلا شما می توانید از جاوا اسکریپت برای اسکرول صفحات و بالا پایین کردن استفاده نموده و حتی زمانی روی یک دکمه کلیک می کنید یا در نمایش یک اسلاید برای عبور با تصاویر استفاده نمایید. برای کار با پرونده‌های HTML، CSS و جاوا اسکریپت، شما باید از برنامه‌ای در کامپیوتر خود به نام ویرایشگر کد استفاده کنید.

انواع ویرایشگرها برای کدنویسی :

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

• Visual Studio: این نسخه سبک‌وزن از ویژوال استودیو،اصلی ترین IDE ماکروسافت است، و تنها چند سال قدمت دارد، اما به خاطر سرعت، سهولت استفاده، و ویژگی‌های قدرتمند بسیار محبوب شده‌است.
• Atom: اتم ایجاد شده توسط GitHub و تبلیغ شده به عنوان ویرایشگر متن ضد هک، یکی از نقاط قوت اصلی اتم، سفارشی سازی آن می باشد. می‌توانید بسته‌ها و موضوعاتی را نصب کنید، که مشخصه‌هایی را به برنامه اضافه می‌کنند.
• Sublime text: یک برنامه بسیار محبوب می باشد،که مانند اتم مدتی است ارائه شده است. شما می‌توانید بسته‌ها و تم ها را نصب کنید، و  عملکرد سریع آن را مشاهده کنید. من توصیه می‌کنم که بعضی از این ویرایشگر ها را برای مقایسه با یکدیگر امتحان کنید، سپس یکی از آن ها را انتخاب کنید، و آن را رها نکنید، ویژگی‌ها و کلیدهای میان‌برهای IDE خود را نیز یاد بگیرید.

کنترل نسخه برای اصول توسعه وب :

تا اینجا شما با ویرایشگر کد آشنا شده اید و توانسته اید یکی از آنها را برای کار خود انتخاب نمایید و شروع به برنامه نویسی نمایید. ولی اگر در کدهای خودتان دچار اشتباه شده اید و یا باید تمام تغییرات کدهای تان را قبل از آنکه به اشتباه از بین ببرند حذف نمایید یا با فشار دادن Ctrl – Z برای برگرداندن کد، تعداد یک میلیون بار برای شما کار نمی‌کند. حالا باید چکار کنیم؟کنترل نسخه همانند داشتن نقاط ذخیره برای فایل های کد شماست که در برخی تغییرات مورد استفاده قرار می گیرد که می‌تواند همه چیز را خراب کند، شما می‌توانید یک نقطه ذخیره جدید ( به نام یک تعهد ) ایجاد کنید. سپس اگر وب سایت خود را خلال ایجاد شود ، می‌توانید کدهای خود را به حالت قبل برگردانید.

اگر اشتباهی مرتکب شدید که به شدت به باز گرداندن آن نیاز دارید، کنترل نسخه می تواند یک نجات دهنده باشد. استفاده از یک سیستم کنترل نسخه (vcs) شامل ذخیره‌سازی فایل‌های کد شما، و کل تاریخچه تغییرات در ،چیزی است که مخزن نامیده می‌شود. معمولا شما از یک مخزن برای هر وب سایت یا پروژه استفاده می‌کنید. سپس مخزن خود را به صورت آنلاین در آن چه که به عنوان مخزن مرکزی شناخته می‌شود ، ذخیره می کنید، و همچنین نسخه‌ای از کامپیوتر خود را در یک مخزن محلی نگهداری می‌کنید. زمانی که در کامپیوتر خود تغییراتی ایجاد می‌کنید، می‌توانید آن‌ها را ایجاد کنید، و سپس آن‌ها را به مخزن مرکزی هل دهید. این فرآیند به شما این امکان را می‌دهد که چندین نیرو را داشته باشید، که روی یک مجموعه از کدها کار می‌کنند، و حتی فایل‌های یک‌سان را هم تغییر می‌دهند. سیستم کنترل نسخه اصلی این روزها Git می باشد، رقیب اصلی آن Subversion یا SVN می باشد.

ظاهر سایت یا فرانت اند چیست ؟

فرانت اند یا سمت کاربر که هر آنچیزی که توسط مرورگر کاربر می تواند ببیند را گفته می شود. فرونت اند همان HTML و CSS بوده که در این بخش بسیار مورد استفاده قرار می گیرد. جاوا اسکریپت فقط یک زبان سمت کاربر بوده که امروزه شما می توانید از این زبان برای سمت سرور و حتی بک اند نیز استفاده نمایید. فرونت اند در پایان کار باعث بهبود صفحه وب سایت شما نیز خواهد شد. front end معمولا حس خوبی برای کاربران (UX یا تجربه کاربر) از دیدن سایت به وجود بیاید. اگر از تغییرات سی اس اس در طراحی وب سایت خودتان لذت می برید و مطمئن هستید که تمامی نقاط سایت خودتان را انجام داده اید ، انیمیشن های ظریف جاوا اسکریپت را افزوده اید تا به کاربر کمک نماید و احتمالا از توسعه وب لذت می برید.

کارکرد سایت یا بک اند چیست ؟

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

استفاده از سمت کاربر و سرور در کنار هم

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

در اصول توسعه وب سایت ، شما می‌توانید تنها بر روی فرونت اند و یا بک اند تمرکز کنید. یا می‌توانید در هر دو مورد تمرکز کنید، که به آن توسعه کامل پشته یا full stack development می گویند،  چیزی که شما می‌خواهید بر روی آن تمرکز کنید به طور عمده به دو عامل بستگی دارد:

• اولویت شخصی شما : هرکسی نمیتواند به جفت فرونت اند و بک اند، علاقه داشته باشد.
• دسترسی به شغل : فهرست‌های شغلی محلی خود را جستجو کرده، و با برنامه نویس ها ملاقاتی ترتیب دهید، تا مشاغل مربوطه را درک کنید.

لازم به ذکر است که اگر شما به هردو مهارت فرونت اند و بک اند علاقه مند باشید، برنامه نویس full stack development بودن شما را با ارزش تر می کند، این موضوع به معنای آن است که، هرچه با فن‌آوری‌های بیشتری بتوانید کار کنید، کارهای بیشتری می‌توانید انجام دهید. stackOverflow در نظرسنجی سال ۲۰۱۷ خود از کاربران گزارش داد که، ۶۳.۷ درصد از کاربرانش به عنوان برنامه نویس توسعه کامل پشته، ۲۴.۴ درصد برنامه نویس بک اند، و ۱۱.۹ درصد به عنوان برنامه نویس فرونت اند، شناسایی شده اند. با این حال، این امر به شدت وابسته به شرکت خواهد بود. برخی از شرکت‌ها ممکن است از توسعه دهندگان کامل بهره ببرند، در حالی که سایر شرکت ها از انواع برنامه نویس فرونت اند و بک اند برخوردارند.

قوی کردن مهارت های  Frontend

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

مطلب مرتبط: سایت های واکنش گرا و برنامه های موبایل

چهارچوب های برنامه نویسی کمکی برای طراحی واکنش گرا

همان طور که ممکن است تصور کنید، کدگذاری تمام CSS یک وب سایت واکنش گرا، ممکن است زمان زیادی ببرد. اگر شما نمی‌توانید زمان زیادی را صرف کنید، ممکن است با استفاده از یک چارچوب واکنشی مانند بوت استرپ یا Zurb این کار را انجام دهید. زیبایی این چارچوب‌ها آن است که، آن‌ها با CSS و جاوا اسکریپت از پیش بسته‌بندی می‌شوند. آن‌ها کارهای زیادی برای شما با استفاده از عناصر استایل اولیه، انجام می دهند. آن‌ها همچنین با اجزای جاوا اسکریپت مانند پنجره‌های نمایشی(modal pop – up)، و منوی سایت ظاهر می شوند. از آن جا که از چیزی استفاده می‌کنید که قبلا  مورد آزمایش قرار گرفته‌است، طراحی سایت شما  خیلی ساده‌تر می شود. تنها نکته ای که باید رعایت کنید این است که، شما نباید بیش از حد به چارچوب‌ها وابسته شوید، هیچ جایگزینی برای دانستن چگونگی ساخت یک وب سایت واکنش گرا از ابتدا وجود ندارد.

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

Nikdad همچنین می تواند با هزینه های اندک تبلیغات گوگل ادوردز را برای سایت شما انجام دهد تا از همان روزهای نخست بارگزاری سایتتان در رتبه های برتر گوگل دیده شوید.

قسمت دوم این مقاله :

اصول توسعه وب سایت برای افراد مبتدی – قسمت دوم

Nikdad.net وب‌سایت

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