اطلاعاتی درباره Front End

9 امتیاز

Loading…

برنامه‌نویسی فرانت‌اند(Front End)چیست و فرانت‌اند کارها چه کسانی هستند؟

اگر با مفهوم client و server در حوزه آی تی آشنایی داشته باشید قادر خواهید بود تا تفاوت برنامه‌نویسی در این دو حوزه را درک کنید به‌طورکلی در برنامه‌نویسی تحت وب به مواردی که شامل عملیات سمت client می‌شود فرانت‌اند و عملیاتی که در سمت سرور رخ می‌دهد برنامه‌نویسی بک‌اند گفته می‌شود. منظور از عملیات در اینجا طراحی و برنامه‌نویسی تا قبل از مرحله‌ای برنامه‌نویسی بک‌اند می‌باشد. به‌طور مثال طراحی ظاهری یک سایت زمانی که کامل می‌شود نیاز به تبدیل به کد پیدا می‌کند که برنامه‌نویس در اینجا از زبان‌های سمت کلاینت وب استفاده کرده و این کار را انجام می‌دهد.

تعریف دیگری که می‌توان از این نوع برنامه‌نویسی کرد این است برنامه‌نویسی فرانت به جلوه بصری یک سایت روح بخشیده و آن را در قالب کدهای  html-css-js بازخلق می‌کند.

برنامه‌نویس سمت کاربر یا Front End باید این هنر را داشته باشد تا طرح گرافیکی داده‌شده را به نحو احسن بادانش برنامه‌نویسی خود به یک سایت استاتیک تبدیل نماید.

آنچه یک سایت استاتیک را به یک سایت داینامیک تبدیل می‌کند دانشی است که می‌توان به آن برنامه‌نویسی بک‌اند نام داد.

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

زمان تبدیل یک فایل فتوشاپ به یک صفحه وب، برنامه‌نویس (مبتدی) با یکسری چالش‌ها برمی‌خورد باید این چالش‌ها را به‌صورت صحیح و اصولی آن‌ها را رفع کنید، مانند:

1- محیط برنامه‌نویسی : محیط برنامه‌نویسی راحت و به کد نویسی شما باید سرعت بدهد را انتخاب کنید، مثلاً با نوشتن ابتدای یک کد با پیشنهاد کامل کردن خودکار آن در زمان شما صرفه‌جویی می‌کند یا اینکه اشتباهات سینتکسی‌تان را گوش زد می‌کند  مانند++Notepad ، Atom، Sublime Text و …

2- زبان‌های برنامه‌نویسی : بهتر است برای کد نویسی سمت کلاینت زبان‌های مانند، Css، Javascript،jQuery و Ajax و … را آموزش‌دیده باشید و بر آن‌ها مسلط باشید تا بتوانید سایت‌های به‌روز و زیبایی را با سرعت زیادی طراحی کنید.

باید تگ‌های HTML به‌صورت صحیح استفاده کنیم مثلاً: حتماً برای قسمت پایین صفحه (فوتر) از تگ <footer></footer> استفاده کنیم برای تگ‌های post از تگ <article></article> استفاده کرد. یا برای موارد لینکی به‌هیچ‌عنوان از <button> استفاده نکنید، <button> برای فرم‌ها فقط استفاده می‌شود.

برای عناوین سایتمان با توجه به اهمیت آن‌ها از تگ <H1> تا <H6> که <h1>، برای مهم‌ترین سر تیتر استفاده می‌شود. <h6> کم‌اهمیت‌ترین سر تیتر را تعریف می‌کند.

سعی کنید بخش‌های سایت که استایل و شکل ظاهری یکسانی دارند مشخص کرده و به‌صورت کلاس طراحی کرده و در کلاس‌های تگ‌هایمان آن‌ها را صدا بزنیم.

زمانی که از تگ <img> استفاده می‌کنیم و عکس را می‌آوریم در html پهنایی مشخص به آن بدهیم و برای تصاویر داخل مطالب در کد نویسی css مقدار max-width:100%; بگذاریم (این مقدار را حتماً باید به img بدهیم نه به کلاس عکسمان).

پس از اتمام طراحی و کد نویسی، صفحه خود را در مرورگرها و ورژن های مختلفی امتحان کرد. مانند فایرفاکس (Firefox)، مرورگر مایکروسافت (IE)، اپرا (Opera) و… . برای اطلاعات بیشتر لطفاً به مقاله سازگاری با مرورگرها در طراحی سایت رجوع کنید.

در حال حاضر بیشترین کاربران اینترنت از تلفن‌های همراه و تبلت ها استفاده می‌کنند ما باید پس لازم هست که حتماً سایت طراحی‌شده را در تلفن‌های همراه چک کرده و به مدل واکنشگر ای (ریسپانسیو) آن دقت کنیم.

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

پیشنهاد ما این است که از فریم ورک های که موجود بهره ببرید. فریم ورک ها در طراحی ظاهر وب‌سایت بسیار کمک می‌کند مانند Bootstrap، Foundation،  Semantic UI و …

برای ظاهر و کارای سایت خود حتماً از اصول IX و UX بهره ببرید، باید کارهای ما بر اساس اصول باشد.

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