نقشه ی راه فرانت اند

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

Html

Html مخفف hyper text language  می باشد.با توجه به معنی آن ، یک زبان برنامه نویسی نیست.بلکه یک زبان نشانه گذاری است.

چرا html زبان برنامه نویسی نیست؟

به زبان ساده تر، در زبان های برنامه نویسی ،ما با مجموعه ای از دستورالعمل های شرطی،حلقه ها،متغیرها،توابع رو به رو هستیم.زبان های برنامه نویسی ، زبان های پویا هستند.اما زبان Htmlمجموعه از تگ ها را در بر دارد.در آن خبری از شروط و حلقه و توابع نیست.ما در تگ ها مقادیر مدنظر قرار میدهیم.مرورگرها فقط این نوع کد را می شناسد.و کد های دیگر به این زبان ترجمه می شوند.به وسیله ی تگ ها بخش های مختلف html جدا شده اند.هر کدام از این تگ ها معنی متفاوت دارند و هم کدام تاثیر مختلفی بر سئو محتوای می گذارند.فایل های html،textbasedهستند.با پسوند.htmlو.htmنام گذاری و ذخیره می شوند.در واقع به وسیله ی این زبان ،اسکلت بندی وب سایت خودرا طراحی میکنید.

این زبان استاتیک است.استاتیک و داینامیک به چه معنا هستند؟

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

css:

Css مخفف cascading style sheet(CSS) است.CSSیک زبان شیوه نامه است.به وسیله ی آن اسکلت سایت را زیبا می کنیم.ساختار کد های CSSاز دو بخش تشکیل شده است.فایل های CSSدارای پسوند .cssهستند.

• سلکتورها
• بلاک اعلان

برای ایجاد پس زمینه،فونت،ریسپانسیو و….از CSSاستفاده می شود.برای ایجاد تغییرات،تگ مورد نظر را انتخاب کرده و استایل های مد نظر را به آن می دهیم.علاوه بر انتخاب تگ ها،از کلاس ها و آیدی ها نیز می توان استفاده نمود.

طراحی واکنش گرا(responsive):

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

چگونه سایت خود را ریسپانسیو کنیم؟با استفاده از @media  یا Bootstrap سایت را واکنش گرا کنید.

انتخاب فریمورک

فریم ورک در واقع چهارچوب نرم افزاری دارای کتاب خانه ها  قوانین مختلف برنامه نویسی می گویند.در ادامه به بررسی این دو فریم ورک می پردازیم.

Bootstrap

یک منبع متن باز و رایگان ، شامل ابزار های مورد نیاز (html,css,javascript)می باشد.اولین بار توسعه دهندگان توییتر از این فریم ورک استفاده کرده و سپس جهانی شد.با استفاده از این فریم ورک،وب سایت های خود را ریسپانسیو یا واکنش گرا کنید.

W3.css

یکی از فریم ورک های css ، که توسط w3.school طراحی شده است.حجم کمی دارد و کار با آن بسیار راحت تر از bootstrap است.در طراحی و تولید آن خبری از جاوا اسکریپت و فریم ورک های آن نیست.

پیش پردازشگرها(sass/less)

Less  و sass دو فریم ورک مهم از css است.برای بهینه سازی کد های شما ایجاد شده و از نوشتن کدهای تکراری جلوگیری میکند.less استایل دهی را راحت تر می کند و sass نیز قدرت و ظرافت را افزایش می دهد.

Javascript

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

ES6

ECMAscript یا همان ES استاندارهای جاوا اسکریپت هستند.در سال ۲۰۰۹،ES5  یا همان نسخه ی اولیه این استاندارد پیاده سازی شد و فاقد قابلیت های اضافی بود.هم چنین از IE9 نیز پشتیبانی میکرد.ES6 در سال ۲۰۱۵ ایجاد شد و نسبت به نسخه ی قبلی خود برتری هایی داشت.

Npm

Npm یک کتابخانه ی رایگان و متن باز است.مخفف Node Package Manager است.هم چنین یک پکیج منیجر محسوب می شود.npm در واقع نرم افزار node.js را مدیریت می کند.به وسیله ی آن پکیج های جدید برای پروژه ی خود ایجاد و مدیریت آن بسیار آسان است.هم چنین دارای Command Line برای بارگیری و نصب نرم افزار می باشد.

سخن پایانی:

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